/* Site de Vincent Decreus, podologue - reprise du template Artisteer « decreus_15 » (mesures relevées sur l'ancien site). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: #0b2332; font: 13px/1.25 Arial, "Arial Unicode MS", Helvetica, sans-serif; }
/* Fond figé : il ne bouge pas quand la page défile. Taille d'origine (1927 × 1100 px) sur un écran normal,
   agrandi seulement si l'écran est plus large ou plus haut, pour toujours couvrir toute la fenêtre. */
#fond {
  background: #fff url(../img/page.png) no-repeat 50% 0 fixed;
  background-size: max(1927px, 100vw, calc(100vh * 1927 / 1100)) auto;
  min-height: 100vh; padding: 20px 0 10px;
}
img { max-width: 100%; height: auto; border: 0; }

/* ---------- En-tête : photo + menu en pastilles ---------- */
.entete {
  position: relative; width: 812px; height: 230px; margin: 0 auto;
  background: url(../img/header.png) no-repeat 0 0; border: 3px solid #616465; border-radius: 5px;
}
.lien-accueil { position: absolute; left: 30px; top: 150px; width: 260px; height: 70px; }
.lien-accueil span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bouton-menu { display: none; }
.onglets { padding: 6px 6px 0 6px; }
.onglets ul { list-style: none; margin: 0; padding: 0 0 0 8px; display: flex; flex-wrap: wrap; gap: 2px 0; }
.onglets li { position: relative; margin-left: 11px; }
.onglets li:first-child { margin-left: 0; }
.onglets li + li::before { content: ""; position: absolute; left: -11px; top: 0; width: 11px; height: 24px; background: url(../img/menuseparator.png) center no-repeat; }
.onglets a {
  display: block; padding: 0 8px; line-height: 24px; font-size: 15px; font-weight: 700; color: #fff; text-decoration: none;
  background: rgba(2, 94, 187, .3); border: 1px solid rgba(12, 149, 223, .3); border-radius: 4px;
}
.onglets a:hover { background: rgba(2, 94, 187, .6); }
.onglets a.actif { background: #fff; color: #e2341d; border-color: rgba(73, 163, 253, .5); }

/* ---------- Feuille ---------- */
.feuille {
  width: 812px; margin: 20px auto 0; background: #ccd6e0; border: 3px solid #616465; border-radius: 5px;
  box-shadow: 0 0 3px 2px rgba(0, 0, 0, .1); overflow: hidden; min-height: 400px; padding-bottom: 60px;
}
.bandeau { margin-bottom: 25px; }
.bandeau p { margin: 0; }
.mise-en-page { display: grid; grid-template-columns: minmax(0, 1fr); }
.mise-en-page.avec-colonne { grid-template-columns: minmax(0, 631px) 175px; }
.contenu { min-width: 0; }

/* Blocs (anciens articles) */
.bloc { margin: 5px; }
.bloc + .bloc { margin-top: 45px; }
.bloc-titre { margin: 10px 0 0 10px; font-size: 24px; font-weight: 700; color: #012e5b; line-height: 31px; }
.icone-pied { display: inline-block; width: 23px; height: 31px; margin-right: 6px; vertical-align: middle; background: url(../img/postheadericon.png) no-repeat; }
.boite-titre .icone-pied { background-image: url(../img/blockheadericon.png); }
.bloc-contenu::after { content: ""; display: table; clear: both; }
.bloc-contenu p { margin: 12px 0; }
.bloc-contenu a { color: #0254a7; text-decoration: underline; }
.bloc-contenu a:hover { color: #0b8bd0; text-decoration: none; }
.bloc-contenu ul { padding-left: 20px; }
.bloc-contenu ul > li { list-style: none; position: relative; }
.bloc-contenu ul > li::before { content: ""; position: absolute; left: -14px; top: 5px; width: 8px; height: 8px; background: url(../img/postbullets.png) no-repeat; }
.titre-page { margin: 10px; font-size: 24px; color: #012e5b; }

/* Colonne de droite */
.colonne { padding: 0; }
.boite { margin: 5px; }
.boite-titre {
  margin: 0 0 4px; padding: 8px 7px; border: 1px solid #616465; border-radius: 4px;
  background: linear-gradient(#0273e3, #024d97); color: #fff; font-size: 14px; font-weight: 700; line-height: 31px;
}
.boite-titre .icone-pied { margin: 0 6px 0 10px; }
.boite-contenu { border: 2px solid #616465; border-radius: 4px; padding: 7px; }
.boite-contenu p { margin: 0; }
.boite-contenu a { color: #086ba0; text-decoration: underline; }

/* Galeries (si un bloc « galerie » est ajouté) */
.galerie { display: flex; flex-wrap: wrap; gap: 12px; padding: 10px 0; }
.galerie .photo { line-height: 0; border: 3px solid #616465; border-radius: 3px; }
.galerie .photo img { max-width: 170px; max-height: 170px; }

/* Pagination */
.pagination { text-align: center; margin: 20px 0; }
.pagination a, .pagination strong { display: inline-block; padding: 3px 9px; margin: 0 2px; border-radius: 4px; }
.pagination a { background: #024d97; color: #fff; text-decoration: none; }

/* Pied de page */
.pied { width: 812px; margin: 0 auto; padding: 10px; text-align: center; font-size: 11px; color: #000; }
.pied p { margin: 0; }
.pied a { color: #064e74; text-decoration: underline; }

/* Agrandissement des photos */
.visionneuse { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .9); display: flex; align-items: center; justify-content: center; flex-direction: column; }
.visionneuse img { max-width: calc(100vw - 120px); max-height: calc(100vh - 110px); }
.visionneuse .legende-v { color: #eee; }
.visionneuse button { position: absolute; border: 0; background: rgba(255, 255, 255, .15); color: #fff; font-size: 30px; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; }
.visionneuse .fermer { top: 15px; right: 15px; } .visionneuse .prec { left: 15px; } .visionneuse .suiv { right: 15px; }

/* Bouton « revenir en haut » */
.remonter {
  position: fixed; right: 24px; bottom: 24px; z-index: 30; width: 46px; height: 46px; border-radius: 50%;
  background: #024d97; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.remonter::before { content: ""; position: absolute; left: 16px; top: 19px; width: 12px; height: 12px; border-left: 3px solid #fff; border-top: 3px solid #fff; transform: rotate(45deg); }
.remonter.visible { opacity: 1; visibility: visible; }

/* ---------- Tablettes et téléphones ---------- */
@media (max-width: 840px) {
  #fond { padding: 8px 0; }
  .entete, .feuille, .pied { width: auto; margin-left: 8px; margin-right: 8px; }
  .entete { height: auto; min-height: 150px; background-size: cover; background-position: 0 50%; }
  .mise-en-page.avec-colonne { grid-template-columns: 1fr; }
  .colonne { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .bloc-contenu img { float: none !important; display: block; margin: 10px auto !important; }
  .bloc-contenu p { text-align: left !important; }
  .bloc-contenu { padding: 0 6px; }
}
@media (max-width: 600px) {
  .entete { min-height: 140px; padding-bottom: 6px; }
  .bouton-menu {
    display: block; margin: 8px 8px 0 auto; padding: 4px 16px; border: 1px solid rgba(12, 149, 223, .6); border-radius: 4px;
    background: rgba(2, 94, 187, .75); color: #fff; font: 700 15px Arial, sans-serif; cursor: pointer;
  }
  .onglets { display: none; }
  .onglets.ouvert { display: block; }
  .onglets ul { flex-direction: column; align-items: stretch; padding: 0; gap: 4px; }
  .onglets li { margin-left: 0; }
  .onglets li::before { display: none; }
  .onglets a { background: rgba(2, 50, 110, .85); }
  .bandeau [style*="height: 44px"] { height: auto !important; line-height: 1.4 !important; padding: 8px; }
  .bandeau img, .bandeau span, .bandeau button { float: none !important; display: inline-block !important; margin: 4px !important; vertical-align: middle; }
  .bloc-titre { font-size: 20px; }
  .remonter { right: 12px; bottom: 16px; }
}