/* Visual Travel Guide - feuille de style commune des pages desktop modernes (modèles *_us avec us.modernPages=true)
   Reproduit l'apparence des pages desktop actuelles (tableaux) avec du HTML moderne.
   Couleurs, polices et images de décor sont celles des modèles actuels. */

:root {
  --link: #0033cc;
  --rule-dark: #000;
  --bar: #ddd;
  --box-border: #666;
  --thumbs-bg: #f5f5f5;
  --story-rule: #404040;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: url(bg.gif);
  color: #000;
  font: small verdana, arial, sans-serif;   /* = 13px, comme BODY,TD actuellement */
}
a, a:visited { color: var(--link); }
a:active { color: #444; }
img { border: 0; }

/* ---- en-tête : bandeau blanc avec vtus.jpg, vtfr.jpg ou vtth.jpg (selon la langue) à droite, puis la phrase d'accroche ---- */
.site-header { padding: 4px; }
.site-header .banner { background: #fff; text-align: right; padding: 4px; margin: -4px -4px 0; }
.site-header .banner img { width: 720px; height: 100px; max-width: 100%; height: auto; vertical-align: bottom; }
.site-header .tagline { font-weight: bold; margin: 4px 0 0; }

/* ---- barre de navigation grise (fil d'Ariane | lieu | tailles) ---- */
.navbar {
  display: grid;
  grid-template-columns: 30% 40% 30%;
  align-items: center;
  min-height: 20px;
  background: var(--bar);
  border-top: 1px solid var(--rule-dark);
  box-shadow: inset 0 1px 0 #fff;            /* le filet blanc sous le trait noir */
  border-bottom: 1px solid #aaa;
  margin-bottom: 15px;
  padding: 0 4px;
}
.navbar .crumbs { font-weight: bold; }
.navbar .place { text-align: center; font-weight: bold; }
.navbar .extra, .navbar .sizes { text-align: right; }
/* page photo : fil d'Ariane et tailles sur une ligne, titre et "Last" sur la suivante */
.navbar.photo-nav { grid-template-columns: 30% 40% 30%; grid-template-areas: "crumbs crumbs sizes" "blank place extra"; }
.photo-nav .crumbs { grid-area: crumbs; } .photo-nav .sizes { grid-area: sizes; }
.photo-nav .place { grid-area: place; } .photo-nav .extra { grid-area: extra; }

/* ---- mise en page : colonne de gauche + contenu ---- */
.layout {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px;
  padding: 0 5px 5px;
  align-items: start;
}

/* ---- boîtes de la colonne de gauche (barre de titre en gifs + cadre gris) ---- */
.box { margin-bottom: 13px; max-width: 16em; }
.box > h2 {
  margin: 0;
  height: 22px;
  line-height: 22px;
  padding: 0 10px;
  font-size: small;
  font-weight: bold;
  white-space: nowrap;
  background: url(title-left.gif) left top no-repeat,
              url(title-right.gif) right top no-repeat,
              url(title-center.gif) repeat-x;
}
.box > .content {
  background: #fff;
  border: 1px solid var(--box-border);
  padding: 1.2em 3px 3px;                   /* la ligne vide en haut des cadres actuels */
}
.box ul { list-style: none; margin: 0; padding: 0; }
.box.see-also li { line-height: 1.25; }

#map-web-btn { margin: 4px 0 0; }
.ads:empty { display: none; }

/* ---- contenu principal (fond blanc) ---- */
.story { background: #fff; min-width: 0; }
.story h1 {
  font-size: medium; margin: 0;
  border-bottom: 1px solid var(--story-rule);
  padding-bottom: 2px;
}
.thumbs { background: var(--thumbs-bg); padding: 1em 0 1em; margin: 0 0 12px; line-height: 0; }
.thumbs a { display: inline-block; margin: 0 4px 4px 0; }
.thumbs img { vertical-align: bottom; }   /* taille donnée par la page : 200, 300 ou 600px */
.loc-intro { max-width: 60em; line-height: 1.5; margin: 0 10px 12px; }
.story .end-rule { border-top: 1px solid var(--story-rule); }

/* ---- page photo ---- */
.photo { text-align: center; padding: 15px 0 0; }
.photo .nav { margin: 0 0 1em; }
.photo img { max-width: 100%; height: auto; }
.photo img.full { max-width: none; }         /* taille large : image en taille réelle, avec défilement */

/* ---- pied de page ---- */
.site-footer {
  border-top: 1px solid var(--rule-dark);
  box-shadow: inset 0 1px 0 #eee;
  background: var(--bar);
  min-height: 20px;
  padding: 3px 4px;
}

/* ---- téléphones : la colonne de gauche passe sous le contenu ---- */
@media (max-width: 700px) {
  .navbar { grid-template-columns: 1fr auto; }
  .navbar .place { display: none; }
  .layout { grid-template-columns: 1fr; }
  .layout > aside { order: 2; }
  .box { max-width: none; }
  .thumbs img { width: calc(50vw - 16px); height: auto; aspect-ratio: 1; }
  .navbar.photo-nav { grid-template-columns: 1fr auto; grid-template-areas: "crumbs sizes" "place extra"; }
  .navbar.photo-nav .place { display: block; text-align: left; }
}