/* domus-vitrine-webkit — thème de base. Les couleurs et la police viennent de config/theme.json. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font-family: var(--police); font-size: 16px; line-height: 1.55;
}
a { color: inherit; }
img { display: block; max-width: 100%; }

.entete {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px clamp(16px, 5vw, 64px); border-bottom: 1px solid color-mix(in srgb, var(--texte) 12%, transparent);
}
.marque { font-size: 1.15rem; letter-spacing: .32em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.marque::first-letter { color: var(--accent); }
.entete nav { display: flex; gap: 28px; }
.entete nav a { text-decoration: none; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--discret); }
.entete nav a:hover { color: var(--accent); }

main { padding: 0 clamp(16px, 5vw, 64px) 80px; max-width: 1280px; margin: 0 auto; }
.intro { padding: 64px 0 36px; }
.intro h1 { font-weight: 400; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: .04em; margin: 0 0 8px; }
.intro p { color: var(--discret); margin: 0; max-width: 60ch; }
.vide { color: var(--discret); }

.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 28px; }
.carte { display: flex; flex-direction: column; background: var(--surface); text-decoration: none; transition: transform .2s ease; }
.carte:hover { transform: translateY(-3px); }
.carte img, .sans-photo { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.sans-photo { display: grid; place-items: center; color: var(--discret); font-size: .85rem; background: color-mix(in srgb, var(--texte) 6%, var(--surface)); }
.carte-corps { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.carte h2 { font-weight: 400; font-size: 1.15rem; margin: 0; line-height: 1.35; }
.etiquette { color: var(--accent); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; }
.lieu, .details { margin: 0; color: var(--discret); font-size: .92rem; }
.prix { margin: auto 0 0; padding-top: 10px; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.prix.grand { font-size: 1.5rem; margin: 0; white-space: nowrap; }

.fiche { padding-top: 32px; }
.fil { color: var(--discret); font-size: .85rem; }
.fil a { text-decoration: none; }
.galerie { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0 36px; }
.galerie figure { margin: 0; position: relative; }
.galerie img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.galerie .principale { grid-column: span 4; }
.galerie .principale img { aspect-ratio: 16 / 9; }
.galerie figcaption { position: absolute; left: 0; bottom: 0; padding: 6px 10px; font-size: .78rem; background: color-mix(in srgb, var(--fond) 70%, transparent); }
.fiche-entete { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap;
  padding-bottom: 24px; border-bottom: 1px solid color-mix(in srgb, var(--texte) 12%, transparent); }
.fiche h1 { font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.3rem); margin: 6px 0; line-height: 1.25; max-width: 30ch; }
.points { list-style: none; padding: 0; margin: 24px 0; display: flex; flex-wrap: wrap; gap: 10px; }
.points li { border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); padding: 6px 14px; font-size: .9rem; }
.description { max-width: 70ch; color: color-mix(in srgb, var(--texte) 88%, var(--fond)); }
.fichiers, .contact { margin-top: 40px; }
.fichiers h2, .contact h2 { font-weight: 400; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.fichiers ul { list-style: none; padding: 0; }
.fichiers li { padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--texte) 10%, transparent); }
.contact p { margin: 4px 0; }

.pied { display: flex; flex-wrap: wrap; gap: 24px; padding: 32px clamp(16px, 5vw, 64px); color: var(--discret); font-size: .85rem;
  border-top: 1px solid color-mix(in srgb, var(--texte) 12%, transparent); }

@media (max-width: 640px) {
  .entete { flex-direction: column; align-items: flex-start; gap: 12px; }
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .galerie .principale { grid-column: span 2; }
}