/* Site d'Alex Manucure - reprise du template Artisteer « alex2024 » (mesures relevées sur l'ancien site). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #ccc; color: #0c1301; font: 14px/1.25 "Century Gothic", Arial, "Arial Unicode MS", Helvetica, sans-serif; }
/* Fond figé : logo « Alex Manucure » en haut à gauche, voile blanc, photo des mains au centre, dégradé blanc → gris */
#fond {
  background:
    url(../img/logo-gauche.png) no-repeat 0 0 fixed,
    linear-gradient(rgba(255, 255, 255, .4) 0, rgba(179, 179, 179, .15) 1050px) no-repeat fixed,
    url(../img/page.jpg) no-repeat 50% 50% fixed,
    linear-gradient(#fff 0, #ccc 1050px) no-repeat fixed;
  background-color: #ccc;
  min-height: 100vh; overflow: hidden;
}
img { max-width: 100%; height: auto; border: 0; }

/* ---------- En-tête : menu en boutons + image + sous-menu ---------- */
.entete {
  position: relative; width: 910px; margin: 0 auto; padding: 11px 4px; text-align: center;
  background: linear-gradient(rgba(219, 219, 219, .2), rgba(163, 163, 163, .2)); border-radius: 0 0 20px 20px;
}
.bouton-menu { display: none; }
.boutons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; }
.boutons a {
  display: block; height: 26px; padding: 0 22px; line-height: 24px; border-radius: 7px; text-decoration: none; color: #000;
  font-size: 14px; font-weight: 700; text-transform: uppercase; font-variant: small-caps;
  background: linear-gradient(rgba(102, 102, 102, .4), rgba(20, 20, 20, .4)); border: 1px solid rgba(112, 112, 112, .4);
}
.boutons a:hover { color: #292929; background: linear-gradient(rgba(150, 150, 150, .5) 0, rgba(128, 128, 128, .5) 30%, rgba(74, 74, 74, .5) 100%); border-color: rgba(12, 19, 1, .5); }
.boutons a.actif { background: linear-gradient(#db9585 0, #c4543b 63%, #99412e 100%); border-color: #3d3d3d; }
.image-entete p { margin: 0; }
.image-entete img { display: block; margin: 0 auto; }
.sous-menu { margin-top: 4px; }

/* ---------- Feuille ---------- */
.feuille {
  width: 910px; margin: 10px auto 0; background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(43, 43, 43, .2); border-bottom: 0; border-radius: 20px 20px 0 0;
}
/* Colonne vide de 145 px à gauche, comme l'ancien site */
.contenu { min-height: 400px; padding: 17px 17px 17px 162px; }
/* Pages d'albums : pas de colonne, les photos prennent toute la largeur */
.contenu:has(.galerie) { padding-left: 17px; }

/* Blocs (anciens articles) */
.bloc + .bloc { margin-top: 30px; }
.bloc-titre { margin: 19px 0; font-size: 26px; color: #994700; }
.bloc-contenu::after { content: ""; display: table; clear: both; }
.bloc-contenu p { margin: 12px 0; }
.bloc-contenu h1 { margin: 21px 0; font-size: 35px; color: #994700; }
.bloc-contenu h2 { margin: 19px 0; font-size: 26px; color: #994700; }
.bloc-contenu h3 { margin: 19px 0; font-size: 21px; font-weight: normal; color: #7a7a7a; }
.bloc-contenu a { color: #c9624a; font-weight: 700; text-decoration: none; }
.bloc-contenu a:hover { color: #0c1301; text-decoration: underline; }
.bloc-contenu hr { border: 0; border-top: 1px solid #a9b6c4; margin: 10px 0; }
.bloc-contenu table { border-collapse: collapse; font-size: 14px; }
.bloc-contenu td { padding: 2px 0; vertical-align: top; text-align: left; }
.titre-page { margin: 21px 0; font-size: 35px; color: #8b0000; text-align: center; }

/* Galeries « polaroid » : photos encadrées de blanc, légèrement penchées, redressées et agrandies au survol */
.galerie { text-align: center; padding-top: 20px; }
.galerie .photo {
  display: inline-block; position: relative; z-index: 0; margin: 8px 6px; padding: 10px 10px 30px; line-height: 0; background: #fff;
  box-shadow: 1px 2px 6px rgba(0, 0, 0, .35); transform: rotate(var(--r, 0deg)); transition: transform .3s ease-out;
  vertical-align: middle;
}
.galerie .photo:hover, .galerie .photo:focus { z-index: 100; transform: rotate(0deg) scale(1.2); }
.galerie .photo img { width: 180px; height: 135px; object-fit: cover; }

/* Nuage de mots en mouvement (TagCanvas) ; la liste n'est visible que si le nuage ne peut pas démarrer */
.nuage { text-align: center; line-height: 0; }
.nuage canvas { max-width: 100%; height: auto; }
.nuage-mots { display: none; line-height: 1.6; padding: 10px; }
.nuage.sans-animation canvas { display: none; }
.nuage.sans-animation .nuage-mots { display: block; }
.nuage-mots ul { list-style: none; margin: 0; padding: 0; }
.nuage-mots li { display: inline-block; margin: 0 8px; }
.nuage-mots a { text-decoration: none; pointer-events: none; }

/* 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: #c9624a; color: #fff; text-decoration: none; }

/* Pied de page */
.pied { background: #2b2b2b; padding: 8px; min-height: 55px; text-align: center; color: #a1a1a1; font-size: 10px; display: flex; flex-direction: column; justify-content: center; }
.pied p { margin: 0; }
.pied a { color: #787878; text-decoration: none; }
.pied a:hover { text-decoration: underline; }

/* Agrandissement des photos */
.visionneuse { position: fixed; inset: 0; z-index: 1000; 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: #c9624a; 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: 940px) {
  #fond { background-image: none, linear-gradient(rgba(255, 255, 255, .4) 0, rgba(179, 179, 179, .15) 1050px), url(../img/page.jpg), linear-gradient(#fff 0, #ccc 1050px); }
  .entete, .feuille { width: auto; margin-left: 8px; margin-right: 8px; }
  .contenu { padding: 12px; }
  .bloc-contenu img { float: none !important; display: block; margin: 10px auto !important; }
  .bloc-contenu p { text-align: left !important; }
  .bloc-contenu table { width: 100% !important; }
}
@media (max-width: 600px) {
  body { font-size: 13px; }
  .bouton-menu {
    display: block; margin: 0 0 8px auto; padding: 4px 16px; border: 1px solid #3d3d3d; border-radius: 7px; cursor: pointer;
    background: linear-gradient(#db9585 0, #c4543b 63%, #99412e 100%); color: #000; font: 700 14px "Century Gothic", Arial, sans-serif;
  }
  .menu:not(.sous-menu) { display: none; }
  .menu.ouvert { display: block; margin-bottom: 8px; }
  .menu:not(.sous-menu) .boutons { flex-direction: column; align-items: stretch; }
  .boutons a { padding: 0 12px; }
  .bloc-contenu h1 { font-size: 28px; }
  .galerie .photo { margin: 6px; padding: 6px 6px 20px; }
  .galerie .photo img { width: 130px; height: 98px; }
  .remonter { right: 12px; bottom: 16px; }
}