/* ============================================================
   Roselyne Gaude — 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: #DCC2A1;
  color: #fff;
  font: 17px/1.6 Georgia, "Times New Roman", Times, serif;
}
img { max-width: 100%; height: auto; border: 0; }
a { color: #fff; text-decoration: underline; }
a:hover { color: #000; }

/* 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 #fff; outline-offset: 2px; }

/* ---------------- Accueil ---------------- */
.accueil { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.composition { background: url(../images/fond-default.gif) repeat-x; background-size: auto 100%; }
.composition .cadre { width: 750px; max-width: 100%; margin: 0 auto; }
.composition img { display: block; width: 100%; }
/* Rangée des boutons dans l'image (écrans larges) : proportions des tranches d'origine */
.rangee { display: flex; }
.rangee > .gauche { flex: 0 0 1.6%; }
.rangee > .droite { flex: 1 1 auto; }
.rangee .boutons { display: flex; }
.rangee .boutons > :nth-child(1), .rangee .boutons > :nth-child(2) { flex: 0 0 13.008%; }
.rangee .boutons > :nth-child(3) { flex: 0 0 13.144%; }
.rangee .boutons > :nth-child(4) { flex: 1 1 auto; }
/* Boutons séparés (écrans étroits) */
.menu-accueil { display: none; justify-content: center; flex-wrap: wrap; gap: 8px 14px; padding: 18px 16px; }
.menu-accueil .bouton { width: 111px; }

/* ---------------- Pages intérieures ---------------- */
.bandeau-haut { background: url(../images/fond-top.gif) repeat-x; min-height: 92px; }
.bandeau-haut h1 { margin: 0; line-height: 0; }
.bande { background: #AE978F; }
.bande .interieur { max-width: 780px; display: flex; gap: 40px; padding: 60px 16px 28px 0; }
.menu { flex: 0 0 150px; display: flex; flex-direction: column; gap: 2px; padding-top: 0; }
.menu .bouton { width: 111px; }
.texte { flex: 1; min-width: 0; }
.texte p { margin: 0 0 1em; }
.portrait { float: right; width: 150px; margin: 0 0 12px 22px; color: #000; font-size: 14px; line-height: 1.4; }
.portrait img { display: block; margin-bottom: 10px; }
.portrait a { line-height: 0; display: inline-block; }
.bandeau-bas { background: url(../images/fond-bas.gif) repeat-x; min-height: 92px; }

/* ---------------- Tablette et téléphone ---------------- */
@media (max-width: 760px) {
  .rangee { display: none; }
  .menu-accueil { display: flex; }
  .accueil { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .bande .interieur { flex-direction: column; gap: 22px; padding: 22px 16px 26px; }
  .menu { flex: none; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 14px; }
  .portrait { width: 132px; margin-left: 16px; }
  .bandeau-bas { min-height: 60px; }
}

/* ---------------- Galerie de photos ---------------- */
.galerie { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 22px 18px; }
.photo { margin: 0; flex: 0 1 auto; max-width: 100%; min-width: 0; font-size: 14px; line-height: 1.4; text-align: center; }
.photo a { display: block; line-height: 0; }
.photo img { display: block; margin: 0 auto 8px; }
.photo a:hover img, .photo a:focus img { outline: 2px solid #fff; }

/* ---------------- Souvenir ---------------- */
.souvenir-image { display: block; }
.pied-souvenir { max-width: 780px; padding: 14px 16px 18px 190px; text-align: center; font-size: 14px; }
.pied-souvenir img { display: block; margin: 0 auto; }
.pied-souvenir p { margin: 14px 0 0; }
.pied-souvenir a { color: #7F6E68; overflow-wrap: anywhere; }
.pied-souvenir a:hover { color: #000; }

/* ---------------- Pages d'agrandissement ---------------- */
body.page-zoom { background: #AE978F; }
.zoom { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; }
.zoom img { display: block; }
.zoom .retour { margin: 10px 0 0; font: 13px/1.4 Verdana, Arial, Helvetica, sans-serif; }
.zoom a { color: #000; }
.zoom a:hover { color: #fff; }

@media (max-width: 640px) {
  .galerie { gap: 18px 12px; }
  .pied-souvenir { padding: 14px 16px 18px; }
}