/* Direction : atelier taillé dans la pierre chaude. Lin et noyer, filets de 1 px, angles vifs, images sans rayon. */
h1, h2 { font-weight: 400; letter-spacing: -0.04em; line-height: .94; }
h3 { font-family: var(--police-titre); font-weight: 500; font-size: 1.375rem; letter-spacing: -0.015em; line-height: 1.2; }
p { color: var(--encre-2); }
.marque { font-weight: 600; font-size: 1.5rem; letter-spacing: -0.03em; }
.marque small { font-weight: 500; color: var(--encre-2); letter-spacing: 0; }
.entete { background: var(--fond); backdrop-filter: none; border-bottom: 1px solid var(--encre); }
.menu a { font-weight: 500; }
.menu-bouton { border: 1px solid var(--encre); }
.menu-mobile { background: var(--fond); border-bottom: 1px solid var(--encre); }
.menu-mobile a:active { background: color-mix(in srgb, var(--encre) 12%, transparent); }
.bouton { border-radius: 999px; background: var(--encre); color: var(--fond); border: 1px solid var(--encre); font-weight: 500; padding: 14px 28px; }
.bouton:hover { background: var(--fond); color: var(--encre); }
.bouton-second, .entete .bouton { background: transparent; color: var(--encre); }
.bouton-second:hover, .entete .bouton:hover { background: var(--encre); color: var(--fond); }
.entete .bouton { padding: 10px 22px; }
.menu .bouton, .menu .bouton:hover, .menu .bouton[aria-current] { border: 1px solid var(--encre); }
::selection { background: var(--encre); color: var(--fond); }

/* premier écran : titre à gauche, photo à droite, jusqu'au bord ; la photo se « monte » par assises */
section.hero[data-slot] { padding: 0; overflow: clip; }
.hero .contenu { width: 100%; max-width: none; gap: 0; align-items: stretch; }
.hero-texte { padding: var(--e-4) var(--gouttiere) var(--e-6); align-self: end; }
.hero h1 { font-size: var(--t-1); }
.hero-texte p.chapo { font-size: 1.1875rem; max-width: 40ch; margin-block: var(--e-4); color: var(--encre-2); }
.hero-visuel { position: relative; overflow: hidden; border-left: 1px solid var(--encre); }
.hero-visuel img { width: 100%; height: 100%; min-height: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--cadrage, 50% 30%); background: #c9bfae; border-radius: 0; animation: none; }
.hero-visuel .assise { position: absolute; left: 0; right: 0; height: 25.2%; background: var(--fond); z-index: 2; pointer-events: none; }
.hero-visuel .assise:nth-of-type(1) { top: 0; } .hero-visuel .assise:nth-of-type(2) { top: 25%; } .hero-visuel .assise:nth-of-type(3) { top: 50%; } .hero-visuel .assise:nth-of-type(4) { top: 75%; }
@media (prefers-reduced-motion: no-preference) {
  .hero-visuel .assise { animation: assise 760ms var(--ease-sortie) both; }
  .hero-visuel .assise:nth-of-type(odd) { --sens: 101%; } .hero-visuel .assise:nth-of-type(even) { --sens: -101%; }
  .hero-visuel .assise:nth-of-type(1) { animation-delay: 80ms; } .hero-visuel .assise:nth-of-type(2) { animation-delay: 200ms; } .hero-visuel .assise:nth-of-type(3) { animation-delay: 320ms; } .hero-visuel .assise:nth-of-type(4) { animation-delay: 440ms; }
  @keyframes assise { from { transform: none; } to { transform: translateX(var(--sens)); } }
}
.hero-visuel figcaption, .legende { position: absolute; left: 16px; bottom: 16px; z-index: 3; background: var(--fond); border: 1px solid var(--encre); padding: 6px 12px; font-size: .75rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--encre); }

/* offre : lignes de savoir-faire */
.titre-section { display: grid; gap: var(--e-3); margin-bottom: var(--e-6); }
.titre-section p { margin: 0; max-width: 50ch; }
.savoirs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--encre); }
.savoirs li { display: grid; gap: 6px var(--e-4); padding: var(--e-3) 0; border-bottom: 1px solid var(--encre); }
.savoirs h3 { font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); letter-spacing: -0.03em; font-weight: 400; }
.savoirs p { margin: 0; max-width: 56ch; }

/* preuve : l'entreprise */
.entreprise { display: grid; gap: var(--e-6); }
.entreprise figure { margin: 0; position: relative; }
.entreprise img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--cadrage, 50% 30%); border: 1px solid var(--encre); background: #c9bfae; }
.entreprise figcaption { margin-top: 10px; font-size: .75rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--encre); }
.entreprise h2 { margin-bottom: var(--e-3); }
.garanties { list-style: none; margin: var(--e-4) 0 0; padding: 0; border-top: 1px solid var(--encre); }
.garanties li { padding: 14px 0; border-bottom: 1px solid var(--encre); display: grid; gap: 2px; }
.garanties b { font-weight: 600; font-size: 1.125rem; color: var(--encre); }
.garanties span { color: var(--encre-2); }
.methode { margin-top: var(--e-8); }
.methode ol { margin: var(--e-3) 0 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid var(--encre); }
.methode li { padding: var(--e-3) 0; border-bottom: 1px solid var(--encre); display: grid; gap: 4px var(--e-4); }
.methode h3 { font-weight: 500; }
.methode p { margin: 0; }

/* galerie : chantiers, images carrées de bord */
.galerie { background: var(--fond); border-top: 1px solid var(--encre); }
.galerie h2 { margin-bottom: var(--e-6); }
.mosaique { gap: var(--e-3); }
.mosaique li { border-radius: 0; overflow: visible; }
.mosaique li figure { margin: 0; }
.mosaique li a { display: block; overflow: hidden; border: 1px solid var(--encre); }
.mosaique img { border-radius: 0; background: #c9bfae; }
.mosaique figcaption { font-size: .75rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--encre); padding-top: 10px; }

/* zone : intervention et repères de prix */
.zone { background: var(--fond); color: var(--encre); border-top: 1px solid var(--encre); }
.zone h2, .zone h3 { color: var(--encre); }
.zone a { text-decoration-color: var(--encre); }
.communes { list-style: none; margin: var(--e-3) 0 0; padding: 0; columns: 2; column-gap: var(--e-4); font-size: 1.125rem; }
.communes li { padding: 5px 0; border-bottom: 1px solid color-mix(in srgb, var(--encre) 28%, transparent); break-inside: avoid; }
.prix-table { width: 100%; border-collapse: collapse; margin-top: var(--e-3); }
.prix-table caption { text-align: left; font-size: .75rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; padding-bottom: 10px; color: var(--encre); }
.prix-table th, .prix-table td { text-align: left; padding: 14px 0; border-top: 1px solid var(--encre); font-weight: 400; vertical-align: top; }
.prix-table tr:last-child th, .prix-table tr:last-child td { border-bottom: 1px solid var(--encre); }
.prix-table th { font-size: 1.125rem; font-weight: 500; color: var(--encre); padding-right: 16px; }
.prix-table td { color: var(--encre-2); }
.prix-table td.p { text-align: right; font-weight: 600; color: var(--encre); white-space: nowrap; font-variant-numeric: tabular-nums; padding-left: 16px; }
.prix-table small { display: block; font-size: .9375rem; }
.note-prix { font-size: .9375rem; margin-top: var(--e-2); }

.faq-liste { border-top: 1px solid var(--encre); }
.faq-liste details { border-bottom: 1px solid var(--encre); }
.faq-liste summary { font-weight: 500; font-size: 1.25rem; letter-spacing: -0.015em; }
.faq-liste summary::after { color: var(--encre); font-family: var(--police-texte); font-weight: 300; }

.contact { background: var(--fond); border-top: 1px solid var(--encre); }
.contact .formulaire { background: transparent; border: 1px solid var(--encre); border-radius: 0; padding: var(--e-4); }
.formulaire input, .formulaire textarea, .formulaire select { font: inherit; border: 1px solid var(--encre); border-radius: 0; background: var(--fond); min-height: 48px; padding: 12px 14px; color: var(--encre); width: 100%; }
.formulaire input:focus, .formulaire textarea:focus, .formulaire select:focus { outline: 2px solid var(--encre); outline-offset: 2px; box-shadow: none; }
.formulaire .confirmation { background: var(--encre); color: var(--fond); border-radius: 0; }
.coordonnees { margin-top: var(--e-4); font-size: 1.25rem; }
.coordonnees a { color: var(--encre); }
.pied { border-top: 1px solid var(--encre); background: var(--fond); padding-bottom: var(--e-8); }

.barre-mobile { position: fixed; inset: auto 0 0 0; z-index: 30; padding: 10px var(--gouttiere) calc(10px + env(safe-area-inset-bottom)); background: var(--fond); border-top: 1px solid var(--encre); display: flex; gap: 10px; transition: transform 240ms var(--ease-sortie); }
.barre-mobile .bouton { flex: 1; white-space: nowrap; padding-inline: 12px; }
.barre-mobile .bouton:first-child { flex: 1.6; background: var(--encre); color: var(--fond); }
.barre-mobile[data-cachee] { transform: translateY(110%); }
body { padding-bottom: 72px; }

@media (min-width: 700px) {
  .barre-mobile { display: none; }
  body { padding-bottom: 0; }
  .hero .contenu { grid-template-columns: 1.1fr .9fr; min-height: calc(100vh - 73px); max-height: 900px; }
  .hero-visuel img { aspect-ratio: auto; position: absolute; inset: 0; }
  .titre-section { grid-template-columns: 1fr 1fr; align-items: end; }
  .savoirs li { grid-template-columns: 1fr 1.2fr; align-items: baseline; }
  .entreprise { grid-template-columns: .8fr 1.2fr; align-items: start; }
  .methode li { grid-template-columns: 1fr 1.2fr; align-items: baseline; }
  .zone .contenu { grid-template-columns: 1fr 1.2fr; gap: var(--e-8); }
}
@media (max-width: 699px) {
  .marque { font-size: 1.25rem; white-space: nowrap; }
  .marque small { font-size: .6875rem; }
  .hero-visuel { order: -1; border-left: 0; border-bottom: 1px solid var(--encre); }
  .hero-visuel img { aspect-ratio: 5 / 4; --cadrage: 50% 28%; }
  .hero-texte { padding-top: var(--e-3); }
  .hero h1 { font-size: 2.875rem; }
  .prix-table td.p { font-size: 1.0625rem; }
  .communes { columns: 1; }
  .hero-visuel figcaption { display: none; }
}