/* Nuisibye : même système graphique que Signature BTP, déclinaison vert profond */
:root {
  --vert: #16332B;
  --vert-profond: #0E241E;
  --vert-nuit: #0A1A15;
  --or: #C9A96E;
  --or-patine: #A5834A;
  --or-clair: #E4CB90;
  --ivoire: #F6F1EA;
  --ivoire-fonce: #EFE7DB;
  --pierre: #E4D9C6;
  --encre: #1E2622;
  --taupe: #5F6660;
  --blanc: #FFFFFF;
  --f-capitales: "Cinzel", "Trajan Pro", Georgia, serif;
  --f-titre: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-texte: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --largeur: 1200px;
  --gouttiere: clamp(18px, 4vw, 40px);
  --hauteur-entete: 84px;
  --transition: .35s cubic-bezier(.2, .6, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--hauteur-entete); }
body { font-family: var(--f-texte); font-size: 16px; line-height: 1.7; color: var(--encre); background: var(--ivoire); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.conteneur { width: 100%; max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin: 0 auto; padding: 0 var(--gouttiere); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: -999px; top: 10px; background: var(--or); color: var(--vert-nuit); padding: 10px 16px; z-index: 100; }
.evitement:focus { left: 10px; }

/* Boutons */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 30px; font-family: var(--f-texte); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.bouton--or { background: var(--or); color: var(--vert-nuit); border-color: var(--or); }
.bouton--or:hover { background: var(--ivoire); border-color: var(--ivoire); }
.bouton--clair { color: var(--ivoire); border-color: rgba(246, 241, 234, .7); }
.bouton--clair:hover { background: var(--ivoire); color: var(--vert-nuit); }
.bouton--vert { background: var(--vert); color: var(--ivoire); border-color: var(--vert); }
.bouton--vert:hover { background: var(--vert-profond); }
.lien-fleche { display: inline-flex; gap: 12px; align-items: center; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding-bottom: 8px; border-bottom: 1px solid var(--or); }
.lien-fleche span { transition: transform var(--transition); }
.lien-fleche:hover span { transform: translateX(4px); }

/* Titres */
.surtitre { display: flex; align-items: center; gap: 14px; font-family: var(--f-capitales); font-size: 12.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--or-patine); margin-bottom: 18px; }
.surtitre::before { content: ""; width: 36px; height: 1px; background: currentColor; }
.titre { font-family: var(--f-titre); font-weight: 500; font-size: clamp(34px, 4.4vw, 54px); line-height: 1.08; letter-spacing: -.005em; color: var(--vert); }
.titre em { font-style: italic; color: var(--or-patine); font-weight: 500; }
.chapeau { font-size: 17px; color: var(--taupe); max-width: 620px; margin-top: 22px; }
section { padding: clamp(80px, 10vw, 130px) 0; }

/* En-tête */
.entete { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hauteur-entete); transition: background var(--transition), box-shadow var(--transition); }
.entete.defile { background: rgba(10, 26, 21, .96); box-shadow: 0 1px 0 rgba(201, 169, 110, .25); }
.entete .conteneur { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.entete__logo img { height: 66px; width: auto; }
.navigation { display: flex; align-items: center; gap: 36px; }
.navigation a { color: var(--ivoire); text-decoration: none; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.navigation a:not(.bouton):hover { color: var(--or-clair); }
.navigation .bouton { padding: 13px 20px; color: var(--or); border-color: var(--or); }
.navigation .bouton:hover { background: var(--or); color: var(--vert-nuit); }
.burger { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; }
.burger span { display: block; width: 26px; height: 1.5px; background: var(--ivoire); margin: 6px auto; transition: transform var(--transition), opacity var(--transition); }

/* Héros */
.heros { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; color: var(--ivoire); overflow: hidden; background: var(--vert-nuit); }
.heros__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.heros::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10, 26, 21, .94) 0%, rgba(10, 26, 21, .82) 38%, rgba(14, 36, 30, .45) 70%, rgba(14, 36, 30, .25) 100%), linear-gradient(0deg, rgba(10, 26, 21, .55), transparent 40%); }
.heros .conteneur { position: relative; z-index: 2; padding-top: calc(var(--hauteur-entete) + 40px); padding-bottom: 90px; }
.heros .surtitre { color: var(--or); font-size: 12.5px; margin-top: 0; max-width: none; }
.heros h1 { font-family: var(--f-titre); font-weight: 500; font-size: clamp(50px, 7.4vw, 96px); line-height: 1; letter-spacing: -.01em; max-width: 760px; }
.heros h1 em { font-style: italic; color: var(--or-clair); }
.heros p { font-size: 17.5px; max-width: 560px; margin-top: 28px; color: rgba(246, 241, 234, .86); }
.heros__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.heros__credit { position: absolute; z-index: 2; right: var(--gouttiere); bottom: 18px; font-family: var(--f-titre); font-style: italic; font-size: 14px; color: rgba(246, 241, 234, .6); }

/* Bandeau d'engagements */
.engagements { background: var(--vert-profond); color: var(--ivoire); padding: 0; }
.engagements .conteneur { display: grid; grid-template-columns: repeat(4, 1fr); }
.engagement { padding: 34px 26px 34px 0; }
.engagement + .engagement { padding-left: 26px; border-left: 1px solid rgba(201, 169, 110, .28); }
.engagement h3 { font-family: var(--f-capitales); font-weight: 500; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--or); margin-bottom: 8px; }
.engagement p { font-size: 14.5px; line-height: 1.6; color: rgba(246, 241, 234, .78); }

/* Interventions */
.cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 60px; }
.carte { background: var(--blanc); border: 1px solid var(--pierre); border-top: 2px solid var(--or); padding: 34px 30px 30px; display: flex; flex-direction: column; transition: transform var(--transition), box-shadow var(--transition); }
.carte:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(14, 36, 30, .08); }
.carte .carte__num { flex: none; font-family: var(--f-titre); font-style: italic; font-size: 22px; color: var(--or-patine); margin-bottom: 14px; }
.carte h3 { font-family: var(--f-capitales); font-weight: 500; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--vert); margin-bottom: 12px; }
.carte p { color: var(--taupe); font-size: 15px; flex: 1; }
.carte .lien-fleche { margin-top: 26px; align-self: flex-start; color: var(--vert); }

/* Professionnels */
.pros { background: var(--vert-nuit); color: var(--ivoire); position: relative; overflow: hidden; }
.pros .titre { color: var(--ivoire); }
.pros .titre em { color: var(--or-clair); }
.pros .surtitre { color: var(--or); }
.pros__grille { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 7vw, 100px); align-items: center; }
.pros__texte > p { color: rgba(246, 241, 234, .78); margin-top: 22px; max-width: 520px; }
.pros__liste { list-style: none; margin: 34px 0 40px; border-top: 1px solid rgba(201, 169, 110, .25); }
.pros__liste li { display: grid; grid-template-columns: 170px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid rgba(201, 169, 110, .25); font-size: 15px; color: rgba(246, 241, 234, .8); }
.pros__liste b { font-family: var(--f-capitales); font-weight: 500; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--or); padding-top: 2px; }
.rapport { background: var(--ivoire); color: var(--encre); padding: 34px 32px; position: relative; box-shadow: 18px 18px 0 var(--or-patine); }
.rapport__tete { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid var(--vert); padding-bottom: 16px; margin-bottom: 8px; }
.rapport__tete img { height: 38px; width: auto; }
.rapport__tete span { font-family: var(--f-capitales); font-size: 11px; letter-spacing: .18em; color: var(--or-patine); }
.rapport h4 { font-family: var(--f-titre); font-size: 26px; font-weight: 500; color: var(--vert); margin: 14px 0 10px; }
.rapport dl { display: grid; grid-template-columns: auto 1fr; font-size: 13.5px; }
.rapport dt, .rapport dd { padding: 9px 0; border-bottom: 1px dashed var(--pierre); }
.rapport dt { color: var(--taupe); padding-right: 20px; }
.rapport dd { text-align: right; font-weight: 600; color: var(--vert); }
.rapport__plan { margin: 18px 0 6px; height: 120px; border: 1px solid var(--vert); position: relative; background: repeating-linear-gradient(45deg, transparent 0 10px, rgba(22, 51, 43, .05) 10px 11px); }
.rapport__plan i { position: absolute; width: 18px; height: 18px; border: 1px solid var(--vert); background: var(--or); font: 600 9px/16px var(--f-texte); font-style: normal; text-align: center; color: var(--vert-nuit); }
.rapport__exemple { position: absolute; top: -12px; left: 32px; background: var(--or); color: var(--vert-nuit); font-family: var(--f-capitales); font-size: 10.5px; letter-spacing: .18em; padding: 4px 10px; }

/* Savoir-faire */
.savoir { background: var(--ivoire-fonce); }
.savoir__grille { display: grid; grid-template-columns: 320px 1fr; gap: clamp(40px, 7vw, 100px); align-items: center; }
.sceau { width: 280px; height: 280px; border-radius: 50%; border: 1px solid var(--or); display: grid; place-items: center; position: relative; margin: 0 auto; }
.sceau::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; border: 1px solid rgba(165, 131, 74, .45); }
.sceau img { width: 210px; height: 210px; }
.points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 44px; margin-top: 36px; }
.point { padding: 22px 0; border-top: 1px solid var(--pierre); }
.point h3 { font-family: var(--f-capitales); font-weight: 500; font-size: 13.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--vert); margin-bottom: 6px; }
.point p { font-size: 15px; color: var(--taupe); }

/* Méthode */
.methode { background: var(--vert); color: var(--ivoire); }
.methode .titre { color: var(--ivoire); }
.methode .titre em { color: var(--or-clair); }
.methode .surtitre { color: var(--or); }
.etapes { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 60px; border-top: 1px solid rgba(201, 169, 110, .35); }
.etape { padding: 34px 28px 10px 0; }
.etape + .etape { padding-left: 28px; border-left: 1px solid rgba(201, 169, 110, .2); }
.etape .etape__num { font-family: var(--f-titre); font-style: italic; font-size: 46px; line-height: 1; color: var(--or); }
.etape h3 { font-family: var(--f-capitales); font-weight: 500; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; margin: 18px 0 10px; }
.etape p { font-size: 15px; color: rgba(246, 241, 234, .75); }

/* Zone */
.zone__grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 90px); align-items: center; }
.zone figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.zone figcaption { font-family: var(--f-titre); font-style: italic; font-size: 15px; color: var(--taupe); margin-top: 12px; }
.villes { list-style: none; margin-top: 34px; columns: 2; column-gap: 40px; }
.villes li { font-family: var(--f-titre); font-size: 23px; color: var(--vert); padding: 7px 0; border-bottom: 1px solid var(--pierre); break-inside: avoid; }
.villes li.principale::after { content: " ·"; color: var(--or); }

/* FAQ */
.faq { background: var(--ivoire-fonce); }
.faq__liste { margin-top: 50px; max-width: 860px; border-top: 1px solid var(--pierre); }
.faq details { border-bottom: 1px solid var(--pierre); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 24px 0; font-family: var(--f-titre); font-size: 24px; font-weight: 500; color: var(--vert); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-texte); font-weight: 300; font-size: 26px; line-height: 1; color: var(--or-patine); transition: transform var(--transition); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 26px; color: var(--taupe); max-width: 720px; }

/* Contact */
.contact__grille { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 7vw, 100px); align-items: start; }
.coordonnees { margin-top: 34px; border-top: 1px solid var(--pierre); }
.coordonnees div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--pierre); font-size: 15px; }
.coordonnees dt { font-family: var(--f-capitales); font-size: 11.5px; letter-spacing: .16em; color: var(--or-patine); padding-top: 3px; }
.coordonnees a { color: var(--vert); font-weight: 600; }
.formulaire { background: var(--blanc); border-top: 3px solid var(--vert); padding: clamp(28px, 4vw, 48px); box-shadow: 0 30px 60px rgba(14, 36, 30, .08); display: grid; gap: 24px; }
.formulaire .ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.formulaire label { display: grid; gap: 4px; font-family: var(--f-capitales); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--vert); }
.formulaire input, .formulaire select, .formulaire textarea { font-family: var(--f-texte); font-size: 15.5px; letter-spacing: 0; text-transform: none; color: var(--encre); background: transparent; border: 0; border-bottom: 1px solid var(--pierre); padding: 10px 0; width: 100%; border-radius: 0; }
.formulaire select { appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A5834A' stroke-width='1.5'/%3E%3C/svg%3E") right 4px center no-repeat; }
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { outline: none; border-bottom-color: var(--or); }
.formulaire textarea { min-height: 110px; resize: vertical; }
.formulaire .accord { display: flex; gap: 12px; align-items: flex-start; font-family: var(--f-texte); font-size: 13.5px; letter-spacing: 0; text-transform: none; color: var(--taupe); }
.formulaire .accord input { width: auto; margin-top: 4px; accent-color: var(--vert); }
.formulaire .bouton { justify-self: start; }
.formulaire .note { font-size: 12.5px; color: var(--taupe); }

/* Pied de page */
.pied { background: var(--vert-nuit); color: rgba(246, 241, 234, .75); padding: 80px 0 30px; font-size: 14.5px; }
.pied__grille { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 50px; }
.pied__logo img { width: 280px; height: auto; }
.pied__devise { font-family: var(--f-titre); font-style: italic; font-size: 22px; color: var(--or); margin-top: 26px; line-height: 1.3; }
.pied h4 { font-family: var(--f-capitales); font-weight: 500; font-size: 12px; letter-spacing: .2em; color: var(--or); margin-bottom: 18px; }
.pied ul { list-style: none; display: grid; gap: 8px; }
.pied a { text-decoration: none; }
.pied a:hover { color: var(--or-clair); }
.pied__bas { margin-top: 60px; padding-top: 24px; border-top: 1px solid rgba(201, 169, 110, .2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 12.5px; color: rgba(246, 241, 234, .5); }

/* Barre d'appel mobile */
.appel-mobile { display: none; }

/* Apparition au défilement */
.revele { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.revele.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .revele { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* Responsive */
@media (max-width: 1020px) {
  .cartes { grid-template-columns: repeat(2, 1fr); }
  .engagements .conteneur { grid-template-columns: repeat(2, 1fr); }
  .engagement:nth-child(3) { padding-left: 0; border-left: 0; }
  .engagement:nth-child(n+3) { border-top: 1px solid rgba(201, 169, 110, .28); }
  .etapes { grid-template-columns: repeat(2, 1fr); }
  .etape:nth-child(3) { padding-left: 0; border-left: 0; }
  .pros__grille, .zone__grille, .contact__grille, .savoir__grille { grid-template-columns: 1fr; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  :root { --hauteur-entete: 70px; }
  .entete__logo img { height: 52px; }
  .burger { display: block; }
  .navigation { position: fixed; inset: var(--hauteur-entete) 0 auto; background: var(--vert-nuit); flex-direction: column; align-items: stretch; gap: 0; padding: 10px var(--gouttiere) 26px; transform: translateY(-120%); transition: transform var(--transition); border-bottom: 1px solid rgba(201, 169, 110, .3); }
  .navigation a { padding: 16px 0; border-bottom: 1px solid rgba(201, 169, 110, .15); }
  .navigation .bouton { margin-top: 18px; padding: 16px; }
  .menu-ouvert .navigation { transform: none; }
  .menu-ouvert .entete { background: var(--vert-nuit); }
  .menu-ouvert .burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .menu-ouvert .burger span:nth-child(2) { opacity: 0; }
  .menu-ouvert .burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .heros::before { background: linear-gradient(180deg, rgba(10, 26, 21, .75) 0%, rgba(10, 26, 21, .88) 55%, rgba(10, 26, 21, .96) 100%); }
  .heros__credit { left: var(--gouttiere); right: auto; }
  .pros__liste li { grid-template-columns: 1fr; gap: 4px; }
  .points { grid-template-columns: 1fr; }
  .appel-mobile { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; box-shadow: 0 -10px 30px rgba(0, 0, 0, .18); }
  .appel-mobile .bouton { padding: 18px 10px; }
  body { padding-bottom: 58px; }
}
@media (max-width: 600px) {
  .surtitre { letter-spacing: .16em; font-size: 11.5px; }
  .heros .surtitre { font-size: 11px; }
  .surtitre::before { width: 22px; }
  .cartes, .etapes, .engagements .conteneur { grid-template-columns: 1fr; }
  .etape, .etape + .etape { padding: 28px 0 8px; border-left: 0; }
  .etape + .etape { border-top: 1px solid rgba(201, 169, 110, .2); }
  .engagement, .engagement + .engagement { padding: 24px 0; border-left: 0; }
  .engagement + .engagement { border-top: 1px solid rgba(201, 169, 110, .28); }
  .formulaire .ligne { grid-template-columns: 1fr; }
  .villes { columns: 1; }
  .pied__grille { grid-template-columns: 1fr; }
  .heros__actions .bouton { width: 100%; }
  .rapport { box-shadow: 10px 10px 0 var(--or-patine); }
  .sceau { width: 230px; height: 230px; }
  .sceau img { width: 170px; height: 170px; }
}