@font-face { font-family: 'UnifrakturMaguntia'; src: url(polices/UnifrakturMaguntia-Book.ttf) format('truetype'); font-display: swap }
:root { --encre: #2B2018; --brun: #8A4925; --or: #B08A4A; --papier: #F7F0E3; --papier2: #EFE4CF; --vert: #2D5A3D; }
* { box-sizing: border-box }
body { margin: 0; font-family: Georgia, "Palatino Linotype", "Book Antiqua", serif; color: var(--encre); background: var(--papier); line-height: 1.55; font-size: 18px }
a { color: var(--brun) }
.enveloppe { max-width: 1080px; margin: 0 auto; padding: 0 20px }
.alerte-dev { background: #8B1E1E; color: #fff; font: 14px/1.4 system-ui, sans-serif; padding: 8px 16px; text-align: center; display: none }
header.haut { display: flex; justify-content: space-between; align-items: center; padding: 18px 0 }
.marque { font-size: 22px; letter-spacing: .12em; text-transform: uppercase; color: var(--brun); text-decoration: none }
.bouton { display: inline-block; background: var(--brun); color: #fff; text-decoration: none; padding: 14px 26px; border-radius: 4px; font-size: 18px; border: 0; cursor: pointer; font-family: inherit }
.bouton:hover { background: #6E3818 }
.bouton.second { background: transparent; color: var(--brun); border: 2px solid var(--brun) }
.heros { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: 30px 0 50px }
.heros h1 { font-size: 46px; line-height: 1.12; margin: 0 0 16px; font-weight: 400 }
.heros .accroche { font-size: 20px; margin: 0 0 24px }
.heros img { width: 100%; max-width: 400px; height: auto; justify-self: center; box-shadow: 0 22px 44px rgba(60, 35, 15, .38), inset 0 0 0 1px #6b4a2a; border: 12px solid #2a2118; outline: 1px solid #B08A4A; outline-offset: -9px; background: #F7F0E3; padding: 16px; }
.prix-court { margin-top: 14px; font-size: 16px; color: #5A4A3A }
section { padding: 50px 0; border-top: 1px solid #E2D4BA }
section h2 { font-size: 32px; font-weight: 400; margin: 0 0 24px; text-align: center }
.trois { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px }
.carte-info h3 { font-size: 20px; margin: 0 0 8px; color: var(--brun); font-weight: 400; letter-spacing: .05em }
.essai { background: var(--papier2); border-radius: 8px; padding: 28px; display: grid; grid-template-columns: 340px 1fr; gap: 30px; align-items: center }
.essai input { font: inherit; font-size: 22px; padding: 12px 14px; width: 100%; border: 2px solid var(--or); border-radius: 4px; background: #fff }
.essai .ecu svg { width: 100%; height: auto }
.essai .blasonnement { font-style: italic; margin: 12px 0 }
.badge { display: inline-block; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--brun); color: var(--brun); padding: 2px 8px; margin-right: 6px }
.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px }
.galerie figure { margin: 0; text-align: center; font-size: 15px }
.galerie img { width: 100%; border: 8px solid #2a2118; box-shadow: 0 8px 20px rgba(60, 35, 15, .25) }
.offres { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 860px; margin: 0 auto }
.offre { background: #fff; border: 2px solid #E2D4BA; border-radius: 8px; padding: 28px; display: flex; flex-direction: column }
.offre.vedette { border-color: var(--brun) }
.offre .montant { font-size: 44px; margin: 6px 0 }
.offre ul { padding-left: 20px; margin: 10px 0 22px; flex: 1 }
.honnete { max-width: 760px; margin: 0 auto }
.honnete p { margin: 0 0 14px }
details { background: #fff; border: 1px solid #E2D4BA; border-radius: 6px; padding: 14px 18px; margin: 0 auto 10px; max-width: 820px }
summary { cursor: pointer; font-size: 19px }
footer { padding: 30px 0 50px; font-size: 15px; color: #5A4A3A; text-align: center; border-top: 1px solid #E2D4BA }
.page-texte { max-width: 820px; margin: 0 auto; padding: 20px 20px 60px }
.page-texte h1 { font-weight: 400 }
.page-texte h2 { font-weight: 400; color: var(--brun); margin-top: 32px }
.a-completer { background: #FFF3B0; padding: 0 4px }
form.formulaire label { display: block; margin: 16px 0 6px }
form.formulaire input, form.formulaire textarea { font: inherit; width: 100%; padding: 10px; border: 2px solid var(--or); border-radius: 4px }
@media (max-width: 800px) {
  .heros, .essai, .offres { grid-template-columns: 1fr }
  .trois, .galerie { grid-template-columns: 1fr }
  .heros h1 { font-size: 34px }
}