/* ---------- ACCUEIL : héros, planche PC5 ---------- */
.hero-vue { position: relative; height: max(420px, calc(100svh - var(--entete) - 240px)); border-bottom: 1px solid var(--trait); overflow: hidden; cursor: crosshair; touch-action: pan-y; }
.hero-vue .encre { position: absolute; inset: 0; }
.hero-vue .encre img { object-position: 50% 58%; }
.hero-vue .etiquette { position: absolute; left: 14px; top: 24px; z-index: 3; color: var(--encre); background: rgba(241,239,232,.85); padding: 6px 8px; }
.hero-vue .tampon { position: absolute; right: 22px; top: 26px; z-index: 3; background: rgba(241,239,232,.9); mix-blend-mode: normal; }
.hero-vue .aide { position: absolute; left: 14px; bottom: 12px; z-index: 3; display: flex; align-items: center; gap: 8px; color: var(--encre); background: rgba(241,239,232,.8); padding: 6px 8px; }
.hero-vue .aide::before { content: ""; width: 7px; height: 7px; background: var(--rouge); }
.te { position: absolute; z-index: 2; background: rgba(207,67,40,.55); pointer-events: none; opacity: 0; transition: opacity .3s; }
.te-h { left: 0; right: 0; height: 1px; top: 0; } .te-v { top: 0; bottom: 0; width: 1px; left: 0; }
.lecture { position: absolute; z-index: 3; left: 0; top: 0; pointer-events: none; font: 400 10px/1 var(--mono); color: #fff; background: var(--encre); padding: 5px 6px; opacity: 0; transition: opacity .3s; white-space: nowrap; }
.hero-vue.actif .te, .hero-vue.actif .lecture { opacity: 1; }
.cotes { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.cotes line { stroke: var(--rouge); stroke-width: 1.5; }
.cotes text { font: 400 12px var(--mono); fill: #fff; }
.cotes rect { fill: var(--rouge); }
.hero-bas { grid-template-columns: 1.55fr 1fr .42fr; }
.hero-bas > * { padding: clamp(16px, 2vw, 28px); }
.hero-bas .lien { display: flex; flex-direction: column; justify-content: space-between; color: var(--rouge); font: 400 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .05em; transition: background .3s; }
.hero-bas .lien:hover { background: rgba(207,67,40,.07); }
.hero-bas .lien b { align-self: flex-end; font-weight: 400; font-size: 16px; }

/* ---------- intro ---------- */
.intro { grid-template-columns: 1fr 1fr; }
.intro .encre { min-height: 72vh; }
.intro .pad { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.grand-texte { font: 600 clamp(1.5rem, 2.55vw, 2.7rem)/1.04 var(--sans); text-transform: uppercase; letter-spacing: -.03em; }
.faits { grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--trait); }
.faits .pad { display: grid; gap: 10px; align-content: start; }
.faits strong { font: 600 clamp(1.6rem, 2.4vw, 2.4rem)/1 var(--sans); color: var(--encre); letter-spacing: -.03em; }

/* ---------- entêtes de section ---------- */
.tete { grid-template-columns: 1.4fr 1fr; border-bottom: 1px solid var(--trait); }
.tete > * { padding: clamp(40px, 5vw, 80px) clamp(16px, 2vw, 28px) clamp(18px, 2vw, 28px); display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; }

/* ---------- écueils ---------- */
.ecueils-grille { grid-template-columns: repeat(4, 1fr); }
.fiche { display: flex; flex-direction: column; }
.fiche .haut { display: flex; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--trait); }
.fiche svg { width: 100%; height: clamp(170px, 17vw, 240px); padding: 20px; border-bottom: 1px solid var(--trait); }
.fiche svg * { fill: none; stroke: var(--encre); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fiche svg .face { fill: var(--papier); }
.fiche svg .pointille { stroke-dasharray: 3 3; stroke: var(--gris); }
.fiche svg .r { stroke: var(--rouge); }
.fiche .txt { padding: 18px 14px 22px; display: grid; gap: 12px; }
.fiche:hover svg g { transform: translateY(-4px); }
.fiche svg g { transition: transform .5s cubic-bezier(.2,.7,.2,1); }

/* ---------- plan épinglé : du relevé au permis ---------- */
.plan-epingle { height: 480vh; }
.plan-scene { position: sticky; top: var(--entete); height: calc(100svh - var(--entete)); display: grid; grid-template-columns: 1fr minmax(300px, 400px); overflow: hidden; }
.plan-zone { position: relative; border-right: 1px solid var(--trait); display: grid; place-items: center; overflow: hidden; }
.plan-zone svg { width: min(92%, 1000px); max-height: 86%; overflow: visible; }
.phrase { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; pointer-events: none; }
.plan .mur-ex { fill: #b5b1a7; }
.plan .demoli { stroke: var(--rouge); stroke-width: 2; stroke-dasharray: 6 5; fill: none; }
.plan .zone { fill: rgba(207,67,40,.07); stroke: var(--rouge); stroke-width: 1.2; stroke-dasharray: 5 4; }
.plan .mur, .plan .cloison { fill: var(--encre); }
.plan .porte { stroke: var(--encre); stroke-width: 1; fill: none; }
.plan .meuble { stroke: #9a968d; stroke-width: .8; fill: none; }
.plan .cote { stroke: #55524c; stroke-width: .7; fill: none; }
.plan .terrasse { fill: url(#hachure); stroke: #8a877f; stroke-width: 1; }
.plan text { font: 400 11px var(--mono); fill: var(--encre); letter-spacing: .03em; }
.plan .cote-t { font-size: 10px; fill: #55524c; }
.plan .piece { fill: #5f5c56; font-size: 10px; text-transform: uppercase; }
.plan .niv { fill: var(--rouge); font-size: 9px; }
.plan .rep rect { fill: var(--rouge); } .plan .rep text { fill: #fff; font-size: 11px; }
.plan-panneau { display: flex; flex-direction: column; }
.phases { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--trait); }
.phases span { padding: 12px 8px; border-right: 1px solid var(--trait); font: 400 10px/1.3 var(--mono); text-transform: uppercase; color: var(--gris); transition: color .3s, background .3s; }
.phases span:last-child { border-right: 0; }
.phases span.on { color: #fff; background: var(--encre); }
.plan-panneau .pad { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; }
.etats { list-style: none; border-top: 1px solid var(--trait); }
.etats li { display: flex; justify-content: space-between; gap: 12px; padding: 13px clamp(16px, 2vw, 28px); border-bottom: 1px solid var(--trait); font-size: 14px; color: var(--gris); transition: color .3s; }
.etats li::after { content: "○"; font-family: var(--mono); }
.etats li.on { color: var(--encre); } .etats li.on::after { content: "●"; color: var(--rouge); }

/* ---------- projets (accueil + page) ---------- */
.projets-grille { grid-template-columns: repeat(2, 1fr); }
.projet { display: block; border-bottom: 1px solid var(--trait); }
.projet .encre { aspect-ratio: 4 / 3; }
.projet .encre img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.projet:hover .encre img { transform: scale(1.035); }
.projet .meta { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px 0; }
.projet h3 { padding: 8px 14px 18px; }
.projet:hover h3 { color: var(--rouge); }

/* ---------- démarche : visuel collant, étapes qui défilent ---------- */
.demarche { grid-template-columns: 1fr 1fr; }
.visuel { position: sticky; top: var(--entete); height: calc(100svh - var(--entete)); overflow: hidden; }
.visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(100% 0 0 0); transition: clip-path 1s cubic-bezier(.7,0,.2,1); }
.visuel img.on { clip-path: inset(0 0 0 0); }
.visuel .ligne { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--rouge); z-index: 2; }
.visuel .num { position: absolute; right: 14px; bottom: 12px; z-index: 2; font: 600 clamp(4rem, 9vw, 9rem)/.8 var(--sans); color: var(--papier); mix-blend-mode: difference; }
.etape { min-height: 78vh; padding: clamp(40px, 6vw, 90px) clamp(16px, 3vw, 44px); border-bottom: 1px solid var(--trait); display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.etape h3 { font-size: clamp(1.7rem, 2.8vw, 2.8rem); }

/* ---------- pour qui ---------- */
.pour-qui { grid-template-columns: 1fr 1fr; }
.pour-qui .encre { min-height: 100%; aspect-ratio: auto; }
.pour-qui .acc { border-top: 1px solid var(--trait); }

/* ---------- pages intérieures ---------- */
.page-titre { text-align: center; padding: clamp(70px, 9vw, 140px) 20px clamp(40px, 5vw, 70px); }
.page-titre .mono { margin-bottom: 18px; }
.page-titre h1 { max-width: 18ch; margin-inline: auto; }
.page-titre .lead { margin: 22px auto 0; }
.filtres { display: flex; justify-content: center; border-top: 1px solid var(--trait); }
.filtres button { border: 0; border-right: 1px solid var(--trait); background: none; padding: 14px 20px; font: 400 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--gris); cursor: pointer; }
.filtres button:first-child { border-left: 1px solid var(--trait); }
.filtres button[aria-pressed="true"] { color: var(--encre); background: rgba(27,27,25,.06); }
.filtres sup { color: var(--rouge); margin-left: 3px; }
.grille-3 { grid-template-columns: repeat(3, 1fr); }
.grille-3 .projet.cache { display: none; }

/* honoraires */
.bascule { display: grid; grid-template-columns: 1fr 1fr; width: min(520px, 100%); margin: 0 auto; border: 1px solid var(--trait); }
.bascule button { border: 0; background: none; padding: 13px; font: 400 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--gris); cursor: pointer; }
.bascule button[aria-pressed="true"] { background: var(--encre); color: var(--papier); }
.offres { grid-template-columns: .9fr repeat(4, 1fr); border-top: 1px solid var(--trait); margin-top: 40px; }
.offre { padding: 22px 16px; display: flex; flex-direction: column; gap: 12px; }
.offre .prix { font: 600 clamp(1.5rem, 2.2vw, 2.2rem)/1 var(--sans); color: var(--encre); letter-spacing: -.03em; }
.offre .prix small { font: 400 10px var(--mono); color: var(--gris); letter-spacing: 0; margin-left: 4px; text-transform: uppercase; }
.offre .btn { margin-top: auto; justify-content: space-between; }
.offre.mise { background: rgba(207,67,40,.05); }
.comparer-wrap { position: relative; }
.comparer { width: 100%; border-collapse: collapse; }
.comparer th, .comparer td { border-top: 1px solid var(--trait); border-right: 1px solid var(--trait); padding: 12px 16px; text-align: left; font-size: 14px; font-weight: 500; }
.comparer td:last-child { border-right: 0; }
.comparer th { width: 18%; color: var(--encre); }
.comparer .oui::before { content: "■"; color: var(--encre); font-size: 11px; }
.comparer .non { background: rgba(27,27,25,.05); }
.faq { grid-template-columns: .8fr 1.2fr; }
.faq > div:first-child { padding: clamp(40px, 5vw, 80px) clamp(16px, 2vw, 28px); }

/* atelier */
.atelier-hero { display: grid; place-items: center; min-height: 64vh; border-bottom: 1px solid var(--trait); }
.atelier-hero svg { width: min(340px, 60vw); overflow: visible; }
.atelier-hero path { fill: none; stroke: var(--encre); stroke-width: .5; }
.atelier-hero .fin { stroke-width: .25; stroke-dasharray: 1.5 1.5; stroke: var(--gris); }
.atelier-hero .r { stroke: var(--rouge); stroke-width: 1; }
.histoire { grid-template-columns: 1fr 1fr; }
.histoire .encre { min-height: 80vh; }
.histoire .pad { display: flex; flex-direction: column; gap: 22px; justify-content: center; }
.missions { list-style: none; border-top: 1px solid var(--trait); counter-reset: m; }
.missions li { counter-increment: m; display: flex; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--trait); color: var(--encre); }
.missions li::before { content: "0" counter(m); font: 400 11px/1.9 var(--mono); color: var(--rouge); }
.equipe { grid-template-columns: repeat(3, 1fr); }
.membre { position: relative; overflow: hidden; }
.membre img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.membre .nom { padding: 14px; border-top: 1px solid var(--trait); text-align: center; }
.membre .bio { position: absolute; inset: 0 0 auto; aspect-ratio: 3 / 4; background: rgba(27,27,25,.9); color: var(--papier); padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; opacity: 0; transition: opacity .45s; font-size: 14px; }
.membre:hover .bio, .membre:focus-within .bio { opacity: 1; }
.membre:hover img { transform: scale(1.04); }

/* contact */
.contact { grid-template-columns: 1fr 1fr; }
.contact form { display: grid; grid-template-columns: 1fr 1fr; }
.champ { display: flex; flex-direction: column; gap: 6px; padding: 16px clamp(16px, 2vw, 28px); border-bottom: 1px solid var(--trait); border-right: 1px solid var(--trait); }
.champ.large { grid-column: 1 / -1; border-right: 0; }
.champ:nth-child(even):not(.large) { border-right: 0; }
.champ input, .champ select, .champ textarea { border: 0; background: none; padding: 6px 0; font-size: 18px; font-weight: 600; text-transform: uppercase; color: var(--encre); letter-spacing: -.01em; outline-offset: 6px; }
.champ textarea { min-height: 110px; resize: vertical; text-transform: none; font-weight: 500; font-size: 16px; }
.champ input::placeholder, .champ textarea::placeholder { color: var(--clair); }
.champ .erreur { color: var(--rouge); font: 400 10px var(--mono); text-transform: uppercase; min-height: 12px; }
.envoi { grid-column: 1 / -1; padding: 18px clamp(16px, 2vw, 28px); display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.merci { grid-column: 1 / -1; padding: 40px clamp(16px, 2vw, 28px); }
.contact .encre { min-height: 100%; }
.coordonnees { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--trait); }

@media (max-width: 1000px) {
  .hero-bas, .intro, .tete, .demarche, .pour-qui, .histoire, .contact, .faq { grid-template-columns: 1fr; }
  .hero-bas > *, .intro > *, .tete > *, .pour-qui > *, .histoire > *, .contact > * { border-right: 0; border-bottom: 1px solid var(--trait); }
  .hero-bas .lien { flex-direction: row; }
  .intro .encre, .histoire .encre { min-height: 60vh; }
  .ecueils-grille { grid-template-columns: 1fr 1fr; }
  .ecueils-grille > * { border-bottom: 1px solid var(--trait); }
  .ecueils-grille > *:nth-child(2n) { border-right: 0; }
  .plan-scene { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .plan-zone { border-right: 0; border-bottom: 1px solid var(--trait); }
  .plan-panneau .pad { display: none; }
  .etats li { padding-block: 9px; font-size: 13px; }
  .visuel { position: relative; top: 0; height: 60vh; }
  .etape { min-height: 0; }
  .grille-3 { grid-template-columns: 1fr 1fr; }
  .offres { grid-template-columns: 1fr 1fr; }
  .offres > :first-child { display: none; }
  .offres > * { border-bottom: 1px solid var(--trait); }
  .offres > *:nth-child(odd) { border-right: 0; }
  .comparer-wrap { overflow-x: auto; }
  .comparer { min-width: 680px; }
  .equipe { grid-template-columns: 1fr 1fr; }
  .pour-qui .encre { min-height: 50vh; }
}
@media (max-width: 620px) {
  .faits, .projets-grille, .grille-3, .equipe, .coordonnees, .contact form { grid-template-columns: 1fr; }
  .faits > *, .coordonnees > * { border-right: 0; border-bottom: 1px solid var(--trait); }
  .ecueils-grille { grid-template-columns: 1fr; }
  .ecueils-grille > * { border-right: 0; }
  .champ { border-right: 0 !important; }
  .filtres { flex-wrap: wrap; }
  .hero-vue .tampon { display: none; }
}

@media (hover: none) { .hero-vue .aide { display: none; } .hero-vue { cursor: auto; } }