/* ============================================================
   Château Vieux Mouleyre — mise en page adaptative (2026)
   Reprend les images, couleurs et typographie du site d'origine
   (Dreamweaver, tableaux de 750 px) dans une page lisible sur mobile.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #F3EFCC url(../images/fond1500.jpg);
  color: #000;
  font: 16px/1.6 Georgia, "Times New Roman", Times, serif;
}
img { max-width: 100%; height: auto; border: 0; }
a { color: #5C4C29; text-decoration: none; }
a:hover { color: #000; text-decoration: underline; }
a[href^="tel:"] { white-space: nowrap; }

/* Boutons en image, avec l'image de survol d'origine */
.bouton { display: block; line-height: 0; }
.bouton img { display: block; width: 100%; }
.bouton .survol { display: none; }
a.bouton:hover .normal, a.bouton:focus .normal { display: none; }
a.bouton:hover .survol, a.bouton:focus .survol { display: block; }
a.bouton:focus-visible { outline: 2px solid #5C4C29; outline-offset: 2px; }

/* ---------------- Accueil ---------------- */
.accueil {
  min-height: 100vh;
  max-width: 780px;
  margin: 0 auto;
  padding: 24px 16px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.accueil-haut {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}
.langues { display: flex; flex-direction: column; gap: 18px; }
.langues.gauche { align-items: flex-end; }
.langues.droite { align-items: flex-start; }
.langues .bouton { width: 80px; }
.visuel { width: 390px; }
.titre { margin: 18px 0 0; font-size: 1em; line-height: 0; }
.titre img { width: 641px; }
.filet { display: block; width: 641px; margin: 10px auto 0; }
.coordonnees { color: #5C4C29; font-size: 17px; margin: 16px 0 0; }

/* ---------------- Pages intérieures ---------------- */
.page { max-width: 780px; padding: 10px 16px 28px; }
.entete { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 7px; }
.entete .logo { width: 250px; }
.menu { display: flex; flex-wrap: wrap; gap: 0 6px; }
.menu .bouton { width: 120px; }
.titre-page { margin: 26px 0 18px 32px; line-height: 0; }
.contenu { margin: 0 30px 0 165px; }
.contenu p { margin: 0 0 1em; }
.photo { float: right; width: 305px; margin: 0 0 14px 20px; }
.photo.gauche { float: left; width: 223px; margin: 4px 20px 8px 0; }
.photo img { display: block; }
.photo figcaption { font-size: 12px; font-style: italic; line-height: 1.3; margin-top: 2px; }
figure { margin: 0; }
.pied { clear: both; padding-top: 20px; }
.pied .haut { display: block; width: 721px; max-width: 100%; line-height: 0; }
.pied p { text-align: right; color: #5C4C29; font-size: 17px; margin: 10px 0 0; }

/* ---------------- Tablette ---------------- */
@media (max-width: 760px) {
  .contenu { margin: 0; }
  .titre-page { margin-left: 0; }
}

/* ---------------- Téléphone ---------------- */
@media (max-width: 600px) {
  body { font-size: 17px; }
  .accueil { min-height: 0; padding-top: 16px; }
  .accueil-haut { grid-template-columns: 1fr; gap: 14px; }
  .accueil-haut .visuel-cellule { order: -1; }
  .langues { flex-direction: row; justify-content: center; gap: 16px; }
  .langues.gauche, .langues.droite { align-items: center; }
  .langues .bouton { width: 66px; }
  .coordonnees { font-size: 16px; }

  .entete { justify-content: center; }
  .entete .logo { width: 220px; }
  .menu { display: grid; grid-template-columns: repeat(2, 120px); justify-content: center; gap: 4px 18px; }
  .titre-page { margin: 18px 0 14px; text-align: center; }
  .photo, .photo.gauche { float: none; width: auto; margin: 0 0 18px; text-align: center; }
  .photo img { display: inline-block; }
  .pied p { text-align: center; }
}

/* ============================================================
   Ajouts : Vinification, Les vins, Fronsac (FR / GB / AL)
   ============================================================ */
figure { max-width: 100%; }

/* Petites photos légendées empilées à droite (vinification) */
.photo.etroite { width: 190px; clear: right; }

/* Étiquettes des deux vins, en tête de la page des vins */
.photo.etiquettes { width: 301px; }
.photo.etiquettes img { max-width: 100%; }

/* Grande photo du vignoble, sous le texte (Fronsac) */
.photo.large { float: none; clear: both; width: 536px; margin: 22px 0 0 auto; }
.photo.large figcaption { font-size: 13px; }

/* Bandeaux « Château Vieux Mouleyre » / « Le Petit Ane » */
.contenu h2 { clear: both; margin: 1.6em 0 1em; font-size: 1em; line-height: 0; }
.sous-titre { margin-top: -0.4em; }

/* Bandeau des médailles et guides */
.decoration { clear: both; width: 549px; margin: 1.4em 0 1em; }
.decoration img { display: block; }

/* Liste à puce d'origine (puce.gif) */
.puces { list-style: none; margin: 0 0 1em; padding: 0; }
.puces li { padding-left: 18px; background: url(../images/puce.gif) no-repeat 0 0.45em; }

/* Couvertures de revues et de guides */
.distinctions {
  clear: both;
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: 10px 14px;
  margin: 0.4em 0 1.2em;
}
.distinctions img { display: block; }

@media (max-width: 600px) {
  .photo.etroite, .photo.etiquettes, .photo.large { float: none; width: auto; margin: 0 0 18px; text-align: center; }
  .decoration { width: auto; }
  .distinctions { justify-content: center; }
}