@font-face { font-family: "Playfair"; src: url(fonts/playfair-display-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Playfair"; src: url(fonts/playfair-display-latin-500-italic.woff2) format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url(fonts/montserrat-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url(fonts/montserrat-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url(fonts/montserrat-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* Couleurs du logo : noir d'encre et or brossé */
  --nuit: #13120f;
  --nuit-2: #1c1a16;
  --ivoire: #f1ece2;
  --ivoire-2: #e7e0d2;
  --encre: #171614;
  --or: #c9a36b;          /* sur fond sombre */
  --or-fonce: #7f6131;    /* texte or sur fond clair */
  --gris: #a39d92;
  --titre: "Playfair", Georgia, serif;
  --texte: "Montserrat", system-ui, sans-serif;
  --cadre: min(1180px, 100% - 2 * clamp(16px, 4vw, 48px));
  /* Grain de béton, fabriqué (pas de photo) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--nuit); color: var(--ivoire);
  font: 400 1rem/1.65 var(--texte); -webkit-font-smoothing: antialiased;
}
body::before { /* matière : grain sur toute la page */
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none;
  background: var(--grain); opacity: .09; mix-blend-mode: overlay;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2 { font-family: var(--titre); font-weight: 500; line-height: 1.08; letter-spacing: -.01em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.9rem, 6.7vw, 5.5rem); }
h2 { font-size: clamp(1.9rem, 3.9vw, 3.2rem); }
p { margin: 0 0 1em; }
.cadre { width: var(--cadre); margin-inline: auto; }
.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 16px; top: 16px; z-index: 200; background: var(--ivoire); color: var(--encre); padding: .6em 1em; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
.chantier :focus-visible, .clair :focus-visible { outline-color: var(--or-fonce); }

.surtitre {
  font: 500 .74rem/1.4 var(--texte); letter-spacing: .24em; text-transform: uppercase;
  color: var(--or); margin-bottom: 1.2em;
}
.surtitre::before { content: ""; display: inline-block; width: 2.2em; height: 1px; background: currentColor; vertical-align: middle; margin-right: .9em; }
.chapo { font-size: clamp(1.02rem, 1.4vw, 1.15rem); max-width: 40em; color: color-mix(in srgb, currentColor 82%, transparent); }

/* Boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
  padding: .7em 1.4em; border: 1px solid var(--or); background: var(--or); color: var(--encre);
  font: 600 .8rem/1 var(--texte); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  transition: background .25s, color .25s;
}
.bouton:hover { background: transparent; color: var(--or); }
.bouton--ligne { background: transparent; color: var(--ivoire); border-color: color-mix(in srgb, var(--ivoire) 40%, transparent); }
.bouton--ligne:hover { border-color: var(--or); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.8em; }
.lien { color: var(--or); text-underline-offset: .3em; }

/* En-tête */
.entete {
  position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 24px;
  padding: 12px clamp(16px, 4vw, 48px);
  background: color-mix(in srgb, var(--nuit) 94%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--or) 22%, transparent);
}
.marque { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marque img { width: 44px; height: auto; }
.marque__mot { font: 500 .82rem/1.2 var(--texte); letter-spacing: .22em; text-transform: uppercase; margin: 0; }
.marque__mot b { font-weight: 600; color: var(--or); }
.entete__nav { display: flex; gap: 28px; margin-left: auto; }
.entete__nav a { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; opacity: .8; }
.entete__nav a:hover { opacity: 1; color: var(--or); }
.entete__actions { display: flex; gap: 10px; }
.entete .bouton { min-height: 40px; padding: .6em 1.1em; }

/* Le chantier : scène 3D pilotée par le défilement (ville3d.js). Fond clair, texte encre. */
:root { --papier: #efe9df; --or-texte: #6b5127; }
.chantier { position: relative; padding: 0; background: var(--papier); color: var(--encre); }
.chantier .surtitre { color: var(--or-texte); }
.chantier__scene { position: relative; display: grid; grid-template-columns: minmax(300px, 4fr) 8fr; align-items: center; width: var(--cadre); margin-inline: auto; padding: 110px 0 60px; }
.chantier__toile, .chantier__amorce { display: none; }
.chantier__affiche { grid-column: 2; grid-row: 1; width: 100%; height: auto; align-self: start; position: sticky; top: 100px; }
.chantier__voile { display: none; }
.chantier__textes { list-style: none; margin: 0; padding: 0; grid-column: 1; grid-row: 1; position: relative; z-index: 2; }
.etape { margin-bottom: 3em; max-width: 30em; }
.etape h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); }
.etape p { color: color-mix(in srgb, var(--encre) 88%, transparent); }
.etape--intro p:not(.surtitre) { font-size: 1.08rem; }
.chantier .bouton { color: var(--encre); }
.chantier .bouton:hover { color: var(--encre); background: transparent; border-color: var(--encre); }
.chantier .bouton--ligne { border-color: color-mix(in srgb, var(--encre) 55%, transparent); }
.chantier__legende { grid-column: 1 / -1; margin: 1.2em 0 0; font-size: .75rem; letter-spacing: .06em; color: #4d483f; }
.chantier__legende a { text-underline-offset: .2em; }
.indice, .chantier__jauge { display: none; }

/* 3D disponible : la toile remplace l'image fixe */
.trois-d .chantier__affiche { display: none; }

/* Animé : scène collée plein cadre, une étape à la fois */
.anime .chantier { height: 1000vh; }
.anime .chantier__scene { position: sticky; top: 0; width: 100%; height: 100vh; height: 100svh; padding: 0; display: block; overflow: hidden; }
.anime .chantier__amorce { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.anime .chantier__toile { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s; }
.anime.scene-prete .chantier__toile { opacity: 1; }
.anime .chantier__voile { display: block; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(239,233,223,.95) 0%, rgba(239,233,223,.92) 36%, rgba(239,233,223,0) 62%); }
.anime .chantier__textes { position: absolute; left: max(16px, (100% - 1180px) / 2); top: 0; bottom: 0; width: min(34em, 38%); }
.anime .etape { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; margin: 0; opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity .5s, transform .6s cubic-bezier(.2,.7,.2,1), visibility .5s; }
.anime .etape.actif { opacity: 1; visibility: visible; transform: none; }
.anime .etape > * { flex: none; }
.anime .indice { display: block; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: #4d483f; margin-top: 2.5em; }
.anime .indice::after { content: ""; display: block; width: 1px; height: 42px; margin-top: 12px; background: linear-gradient(var(--or-texte), transparent); animation: descend 2s ease-in-out infinite; }
@keyframes descend { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.anime .chantier__jauge { display: block; position: absolute; left: max(16px, (100% - 1180px) / 2); right: max(16px, (100% - 1180px) / 2); bottom: 24px; height: 1px; background: color-mix(in srgb, var(--encre) 18%, transparent); }
.anime .chantier__jauge span { display: block; height: 100%; background: var(--or-texte); transform-origin: left; transform: scaleX(0); }
.anime .chantier__legende { position: absolute; right: max(16px, (100% - 1180px) / 2); bottom: 36px; margin: 0; text-align: right; max-width: 60%; padding: .4em .8em; background: var(--papier); }

/* Fin du parcours : la maquette se fait tourner (ville3d.js). La molette continue à faire défiler ; au doigt, seul le glissement horizontal est capté. */
.chantier__tourner, .tourner-indice { display: none; }
.anime .chantier__tourner { display: block; position: absolute; z-index: 3; top: 72px; bottom: 84px; right: 0; left: calc(max(16px, (100% - 1180px) / 2) + min(34em, 38%) + 16px); touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; visibility: hidden; }
.anime.tourne-ok .chantier__tourner { visibility: visible; }
.anime .chantier__tourner:active { cursor: grabbing; }
.anime .chantier__tourner:focus-visible { outline-offset: -8px; }
.anime .tourner-indice { display: block; position: absolute; z-index: 3; left: 67%; bottom: 88px; margin: 0; padding: .5em 1.1em; border-radius: 999px; background: var(--papier); color: #4d483f; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 8px); transition: opacity .5s, transform .5s; }
.anime.tourne-ok .tourner-indice { opacity: 1; transform: translate(-50%, 0); }
.seul .tourner-indice { display: none; }

/* Capture / contrôle : ?p=0.5 fixe la progression (page de 100vh, pas de défilement) ; &seul = scène sans texte */
.fixe .chantier { height: 100vh; }
.fixe .entete { position: absolute; }
.seul .entete, .seul .chantier__textes, .seul .chantier__voile, .seul .chantier__legende, .seul .chantier__jauge, .seul main > section:not(.chantier), .seul .pied { display: none; }
.seul .chantier__amorce { display: none; }

/* Sections */
section { position: relative; padding: clamp(80px, 11vw, 150px) 0; }
.clair { background: var(--ivoire); color: var(--encre); }
.clair .surtitre, .clair .lien { color: var(--or-fonce); }
.clair::before { /* calque d'architecte */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .06;
  background-image: linear-gradient(var(--encre) 1px, transparent 1px), linear-gradient(90deg, var(--encre) 1px, transparent 1px);
  background-size: 24px 24px;
}
.clair .cadre, .sombre .cadre { position: relative; }
.sombre { background: var(--nuit); }

/* Services */
.services__liste { margin-top: 3em; border-top: 1px solid color-mix(in srgb, var(--encre) 25%, transparent); }
.services details { border-bottom: 1px solid color-mix(in srgb, var(--encre) 25%, transparent); }
.services summary {
  display: flex; align-items: baseline; gap: 1.2em; padding: 1.1em 0; cursor: pointer; list-style: none;
  font: 500 clamp(1.3rem, 2.4vw, 1.9rem)/1.2 var(--titre);
}
.services summary::-webkit-details-marker { display: none; }
.services summary::after { content: "+"; margin-left: auto; font: 400 1.5rem/1 var(--texte); color: var(--or-fonce); transition: transform .3s; }
.services details[open] summary::after { transform: rotate(45deg); }
.services .num { font: 600 .75rem/1 var(--texte); letter-spacing: .14em; color: var(--or-fonce); min-width: 2em; }
.services ul { columns: 2 260px; column-gap: 3em; margin: 0 0 1.6em; padding: 0 0 0 3.2em; list-style: none; }
.services li { break-inside: avoid; padding: .3em 0 .3em 1.2em; position: relative; }
.services li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: .55em; height: 1px; background: var(--or-fonce); }
.services__plus { margin-top: 2em; font-style: italic; font-family: var(--titre); font-size: 1.15rem; }

/* Réalisations : avant / après */
.comparaisons { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin: 3em 0 2em; }
.comparaison { margin: 0; }
.comparaison__vue { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid color-mix(in srgb, var(--or) 35%, transparent); }
.photo { position: absolute; inset: 0; display: grid; place-items: end start; padding: 16px; background-size: cover; background-position: center; }
.photo span { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; background: var(--nuit); padding: .45em .8em; }
.photo--avant { place-items: start start; background-color: #24211c; background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(241,236,226,.05) 14px 15px); }
.photo--apres {
  background-color: #2f2a22; background-image: repeating-linear-gradient(45deg, transparent 0 14px, rgba(201,163,107,.12) 14px 15px);
  clip-path: inset(0 0 0 var(--pos)); place-items: end end;
}
.comparaison__vue::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--or); pointer-events: none; }
.comparaison input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.comparaison__vue:has(input:focus-visible) { outline: 2px solid var(--or); outline-offset: 3px; }
.comparaison figcaption { margin-top: .9em; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }

/* Méthode */
.methode__etapes { list-style: none; counter-reset: e; padding: 0; margin: 3em 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 32px; }
.methode__etapes li { counter-increment: e; padding: 1.4em 0 1.6em; border-top: 1px solid var(--encre); }
.methode__etapes li::before { content: counter(e, decimal-leading-zero); display: block; font: 500 2.4rem/1 var(--titre); color: var(--or-fonce); margin-bottom: .4em; }
.methode__etapes b { display: block; font: 600 .82rem/1.4 var(--texte); letter-spacing: .14em; text-transform: uppercase; margin-bottom: .4em; }

/* Appel final */
.appel { text-align: center; background: radial-gradient(80% 70% at 50% 0%, #26221b, var(--nuit) 70%); }
.appel__mono { width: 120px; margin: 0 auto 2em; }
.appel h2 { max-width: 16em; margin-inline: auto; }
.appel .chapo { margin-inline: auto; }
.appel .actions { justify-content: center; }

/* Pied */
.pied { padding: 56px 0 28px; border-top: 1px solid color-mix(in srgb, var(--or) 25%, transparent); font-size: .88rem; }
.pied__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.pied__grille span { letter-spacing: .12em; font-size: .72rem; color: var(--gris); }
.pied a { text-underline-offset: .25em; }
.pied__credit { margin-top: 40px; font-size: .75rem; color: var(--gris); }

/* Pages intérieures (devis, mentions) */
.page { padding: 140px 0 100px; }
.page h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }

/* Devis */
.devis__grille { display: grid; grid-template-columns: 1fr minmax(260px, 340px); gap: clamp(32px, 6vw, 96px); align-items: start; }
#devis { margin-top: 2.5em; }
.choix { border: 0; padding: 0; margin: 0 0 2em; display: flex; flex-wrap: wrap; gap: 8px; }
.choix legend, .champ label { font: 600 .74rem/1.4 var(--texte); letter-spacing: .16em; text-transform: uppercase; margin-bottom: .9em; padding: 0; }
.champ label span { font-weight: 400; letter-spacing: .04em; text-transform: none; color: #5d574d; }
.choix label { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: .5em 1em; border: 1px solid color-mix(in srgb, var(--encre) 30%, transparent); cursor: pointer; font-size: .92rem; background: var(--ivoire); }
.choix input { position: absolute; opacity: 0; }
.choix label:has(input:checked) { background: var(--encre); color: var(--ivoire); border-color: var(--encre); }
.choix label:has(input:focus-visible) { outline: 2px solid var(--or-fonce); outline-offset: 2px; }
.champ { margin-bottom: 1.4em; }
.champ label { display: block; margin-bottom: .5em; }
.champ input, .champ textarea {
  width: 100%; padding: .8em .9em; border: 1px solid color-mix(in srgb, var(--encre) 35%, transparent); border-radius: 0;
  background: #fbf8f2; color: var(--encre); font: 400 1rem/1.5 var(--texte);
}
.champ input:focus, .champ textarea:focus { outline: 2px solid var(--or-fonce); outline-offset: 0; border-color: transparent; }
.champs-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); column-gap: 20px; }
.devis__note { font-size: .88rem; color: #4d483f; max-width: 36em; }
.devis .bouton { background: var(--encre); border-color: var(--encre); color: var(--ivoire); }
.devis .bouton:hover { background: transparent; color: var(--encre); }
.devis__merci { margin-top: 1.4em; padding: 1em 1.2em; border-left: 3px solid var(--or-fonce); background: #fbf8f2; }
.devis__ensuite { position: sticky; top: 110px; padding: 32px; background: var(--encre); color: var(--ivoire); }
.devis__ensuite h2 { font-size: 1.8rem; }
.devis__ensuite ol { list-style: none; padding: 0; margin: 0 0 2em; counter-reset: e; }
.devis__ensuite li { counter-increment: e; padding: .8em 0 .8em 2.6em; position: relative; border-top: 1px solid color-mix(in srgb, var(--ivoire) 18%, transparent); font-size: .92rem; }
.devis__ensuite li::before { content: counter(e, decimal-leading-zero); position: absolute; left: 0; top: .75em; font: 500 1.1rem/1.3 var(--titre); color: var(--or); }
.devis__ensuite b { display: block; font-weight: 600; }
.devis__ensuite .bouton { margin-top: .8em; background: transparent; color: var(--ivoire); border-color: color-mix(in srgb, var(--ivoire) 40%, transparent); }
.devis__zone { font-size: .82rem; color: var(--gris); margin: 0; }
.mentions h2 { font-size: 1.5rem; margin-top: 2em; }
.mentions .cadre { max-width: 760px; }
.a-completer { background: #f3dfb5; padding: 0 .3em; }

/* Téléphone */
@media (max-width: 860px) {
  .entete { gap: 10px; }
  .entete__nav, .marque__mot { display: none; }
  .entete__actions { margin-left: auto; }
  .entete .bouton { min-height: 44px; padding: .6em .8em; letter-spacing: .06em; font-size: .8rem; }
  .pied a { display: inline-block; padding: 12px 0; }
  .chantier__legende a { padding: 12px 0; } /* en ligne : la zone de toucher grandit sans écarter les lignes */
  .chantier__scene { grid-template-columns: 1fr; padding-top: 96px; }
  .chantier__affiche { grid-column: 1; grid-row: 1; height: 55vh; object-fit: cover; position: static; }
  .chantier__textes { grid-row: 2; }
  .anime .chantier__textes { left: 16px; right: 16px; width: auto; top: auto; bottom: 72px; height: 19em; }
  .anime .etape { justify-content: flex-end; }
  .anime .chantier__voile { background: linear-gradient(0deg, rgba(239,233,223,.97) 0%, rgba(239,233,223,.9) 52%, rgba(239,233,223,.7) 62%, rgba(239,233,223,0) 82%); }
  .anime .chantier__legende { left: 16px; right: 16px; max-width: none; text-align: left; bottom: 0; font-size: .75rem; padding: 0; background: none; }
  .anime .chantier__jauge { display: none; }
  .anime .indice { margin-top: 1.2em; }
  .anime .chantier__tourner { left: 0; top: 64px; bottom: calc(72px + 19em); }
  .anime .tourner-indice { left: 50%; top: 76px; bottom: auto; font-size: .7rem; letter-spacing: .14em; }
  .etape h1 { font-size: 2.1rem; }
  .etape h2 { font-size: 1.6rem; }
  .services ul { padding-left: 0; }
  .devis__grille { grid-template-columns: 1fr; }
  .devis__ensuite { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}