/* MAISON VALDORO — thème « chapitres alternés » (déclinaison C, 30/07/2026)
   Parchemin + noir, or en accent. Zéro script, zéro requête externe. */
:root {
  --or: #B8933F;
  --or-clair: #D4B76A;
  --noir: #12100D;
  --parchemin: #F1EBDD;
  --encre: #2A2620;
  --encre-douce: #5d5647;
  --clair: #EDE6D6;
  --serif: 'Cormorant Garamond', 'Didot', 'Playfair Display', Georgia, serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--parchemin); color: var(--encre); font-family: var(--serif); font-size: 17px; }
img { max-width: 100%; display: block; }
a { color: inherit; }

.kicker { font-size: 11px; letter-spacing: .38em; text-transform: uppercase; color: var(--or); }

/* ---------- header */
header { background: var(--noir); position: sticky; top: 0; z-index: 20; }
.bandeau { text-align: center; font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(237,230,214,.45); padding: 8px 12px; border-bottom: 1px solid rgba(184,147,63,.2); }
header nav { max-width: 1300px; margin: auto; display: flex; align-items: center;
  justify-content: space-between; padding: 16px 24px; gap: 12px; }
header nav .g, header nav .d { display: flex; gap: 26px; flex-wrap: wrap; }
header nav a { color: var(--clair); text-decoration: none; font-size: 11px; letter-spacing: .26em;
  text-transform: uppercase; }
header nav a.actif { color: var(--or-clair); }
.logo { font-size: 22px !important; letter-spacing: .5em !important; color: var(--or) !important;
  text-indent: .5em; white-space: nowrap; }

/* ---------- hero */
.hero { max-width: 1300px; margin: auto; padding: 80px 30px; display: grid;
  grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: center; }
.hero h1 { font-size: clamp(38px, 5vw, 54px); font-weight: 300; line-height: 1.1; margin: 22px 0; }
.hero h1 em, .entete h1 em { color: var(--or); }
.hero .txt { font-size: 18px; line-height: 1.85; color: var(--encre-douce); max-width: 46ch; }
.hero img { border: 1px solid #D8CFBB; }
.cta { display: inline-block; margin-top: 28px; padding: 13px 34px; border: 1px solid var(--encre);
  color: var(--encre); text-decoration: none; font-size: 12px; letter-spacing: .3em;
  text-transform: uppercase; background: none; font-family: var(--serif); cursor: pointer; }
.strip { border-top: 1px solid #D8CFBB; border-bottom: 1px solid #D8CFBB; padding: 14px;
  text-align: center; font-size: 12px; letter-spacing: .18em; color: var(--encre-douce); }

/* ---------- chapitres */
.chapitre.noir { background: var(--noir); color: var(--clair); }
.chapitre .inner { max-width: 1300px; margin: auto; padding: 80px 30px; display: grid;
  grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.chapitre h2 { font-size: clamp(28px, 4vw, 38px); font-weight: 300; letter-spacing: .14em;
  text-transform: uppercase; margin: 12px 0; }
.chapitre.noir p { color: rgba(237,230,214,.65); line-height: 1.8; }
.chapitre.clair p { color: var(--encre-douce); line-height: 1.8; }
.chapitre.noir img { border: 1px solid rgba(184,147,63,.35); }
.chapitre.clair img { border: 1px solid #D8CFBB; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.quatuor { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.lien { display: inline-block; margin-top: 24px; color: var(--or); font-size: 13px;
  letter-spacing: .26em; text-transform: uppercase; text-decoration: none;
  border-bottom: 1px solid var(--or); padding-bottom: 4px; }

/* ---------- pages collection */
.entete { max-width: 860px; margin: auto; padding: 80px 30px 40px; text-align: center; }
.entete.gauche { text-align: left; padding-bottom: 90px; }
.entete h1 { font-size: clamp(34px, 5vw, 48px); font-weight: 300; letter-spacing: .18em; margin: 16px 0 22px; }
.entete .txt { font-size: 18px; line-height: 1.85; color: var(--encre-douce); }
.entete .note { margin-top: 18px; font-size: 15px; color: #8d8471; }
.lh { margin: 34px 0 10px; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--or); }
.grille { max-width: 1300px; margin: auto; padding: 50px 30px 80px; display: grid; gap: 34px; }
.grille.sept, .grille.huit { grid-template-columns: repeat(4, 1fr); }
.grille.six { grid-template-columns: repeat(3, 1fr); }
.carte { background: #fff; border: 1px solid #D8CFBB; text-decoration: none; }
.carte .leg { padding: 16px; display: flex; flex-direction: column; gap: 5px; }
.carte .nom { letter-spacing: .2em; text-transform: uppercase; font-size: 14px; }
.carte .sub { color: #8d8471; font-size: 13px; }
.carte .prix { color: var(--or); font-size: 15px; margin-top: 3px; }
.carte.epuise img { opacity: .55; filter: saturate(.75); }
.carte.epuise .prix { color: #8d8471; letter-spacing: .18em; text-transform: uppercase; font-size: 12px; }

/* ---------- fiches */
.fiche { max-width: 1200px; margin: auto; padding: 70px 30px 90px; display: grid;
  grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.fiche > img { border: 1px solid #D8CFBB; position: sticky; top: 120px; }
.fiche h1 { font-size: clamp(32px, 4vw, 44px); font-weight: 300; letter-spacing: .14em; margin: 12px 0; }
.fiche .format { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: #8d8471; margin-bottom: 26px; }
.fiche .txt { font-size: 19px; line-height: 1.8; color: var(--encre-douce); }
.fiche .note { margin-top: 20px; font-size: 15px; color: #8d8471; line-height: 1.7; }
.coloris { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 30px; }
.coloris figure img { border: 1px solid #D8CFBB; }
.coloris figcaption { font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: #8d8471; text-align: center; margin-top: 6px; }
.achat { margin-top: 36px; border-top: 1px solid #D8CFBB; padding-top: 28px; display: flex;
  align-items: center; gap: 22px; flex-wrap: wrap; }
.achat .prix { font-size: 30px; }
.achat .pvc { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #8d8471; }
.achat .cta { margin-top: 0; }
.navfiche { margin-top: 34px; font-size: 13px; letter-spacing: .1em; color: #8d8471; }
.navfiche a { color: var(--or); text-decoration: none; }

/* ---------- formulaire */
.formulaire { margin-top: 40px; display: flex; flex-direction: column; gap: 22px; text-align: left; }
.formulaire input, .formulaire textarea { background: none; border: none;
  border-bottom: 1px solid #C9BFA9; padding: 12px 2px; font-family: var(--serif);
  font-size: 17px; color: var(--encre); outline: none; resize: none; }
.formulaire input:focus, .formulaire textarea:focus { border-color: var(--or); }

/* ---------- footer */
footer { background: var(--noir); color: var(--clair); margin-top: 60px; }
footer .cols { max-width: 1300px; margin: auto; padding: 60px 30px; display: grid;
  grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
.fm { letter-spacing: .4em; color: var(--or); }
.ft { margin-top: 14px; font-size: 14px; color: rgba(237,230,214,.5); line-height: 1.7; max-width: 32ch; }
.fk { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: rgba(237,230,214,.7); }
.fl { display: flex; flex-direction: column; gap: 10px; }
.fl a { color: rgba(237,230,214,.65); text-decoration: none; font-size: 14px; }
.news { margin-top: 16px; display: flex; gap: 10px; }
.news input { flex: 1; background: none; border: none; border-bottom: 1px solid rgba(237,230,214,.3);
  padding: 8px 2px; color: var(--clair); font-family: var(--serif); font-size: 15px; outline: none; }
.news button { background: none; border: 1px solid var(--or); color: var(--or); padding: 8px 18px;
  font-family: var(--serif); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; cursor: pointer; }
.fin { border-top: 1px solid rgba(184,147,63,.2); padding: 22px; text-align: center;
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: rgba(237,230,214,.35); }

/* ---------- responsive */
@media (max-width: 900px) {
  .hero, .chapitre .inner, .fiche { grid-template-columns: 1fr; }
  .grille.sept, .grille.huit { grid-template-columns: repeat(2, 1fr); }
  .grille.six { grid-template-columns: repeat(2, 1fr); }
  header nav .g, header nav .d { gap: 14px; }
  .fiche > img { position: static; }
  footer .cols { grid-template-columns: 1fr; }
}