* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #071019;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f5efe2;
}
.site-shell {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
}
.prototype-note {
  max-width: 1086px;
  width: 100%;
  padding: 10px 14px;
  margin-bottom: 10px;
  border: 1px solid rgba(213, 153, 74, .35);
  color: #d7b376;
  background: rgba(0,0,0,.25);
  border-radius: 8px;
  font-size: 14px;
}
.image-map {
  position: relative;
  width: min(100%, 1086px);
  box-shadow: 0 16px 60px rgba(0,0,0,.45);
}
.image-map img {
  display: block;
  width: 100%;
  height: auto;
}
.hotspot {
  position: absolute;
  display: block;
  border-radius: 8px;
  outline: none;
}
.hotspot:focus-visible {
  box-shadow: 0 0 0 3px #f2b24b, 0 0 0 6px rgba(242,178,75,.35);
  background: rgba(242,178,75,.15);
}
/* Décommenter pour voir les zones cliquables pendant les tests. */
/* .hotspot { background: rgba(255, 180, 0, .18); border: 1px solid rgba(255, 180, 0, .7); } */

/* Coordonnées en pourcentage sur l’image 1086 x 1448 */
.nav-logo       { left: 1.5%;  top: 1.3%;  width: 7%;   height: 4.4%; }
.nav-accueil    { left: 17.1%; top: 2.1%;  width: 7.2%; height: 2.4%; }
.nav-comprendre { left: 26.7%; top: 2.1%;  width: 10%;  height: 2.4%; }
.nav-outils     { left: 39.3%; top: 2.1%;  width: 6.5%; height: 2.4%; }
.nav-transmettre{ left: 49.0%; top: 2.1%;  width: 10.7%;height: 2.4%; }
.nav-ateliers   { left: 63.0%; top: 2.1%;  width: 7.5%; height: 2.4%; }
.nav-apropos    { left: 73.5%; top: 2.1%;  width: 8.8%; height: 2.4%; }
.nav-contact    { left: 84.0%; top: 2.1%;  width: 7.4%; height: 2.4%; }
.nav-mecontacter{ left: 86.4%; top: 1.0%;  width: 12.6%;height: 3.8%; }

.btn-commencer  { left: 7.4%;  top: 17.3%; width: 17.7%;height: 2.8%; }
.btn-livres     { left: 7.4%;  top: 20.9%; width: 17.7%;height: 2.8%; }
.btn-ateliers   { left: 7.4%;  top: 24.4%; width: 17.7%;height: 2.8%; }

.vision-livre       { left: 19.4%; top: 42.7%; width: 11.3%; height: 4.0%; }
.action-outil       { left: 53.0%; top: 42.7%; width: 12.0%; height: 4.0%; }
.transmission-atelier{ left: 82.2%; top: 42.7%; width: 12.0%; height: 4.0%; }

.card-comprendre { left: 5.9%;  top: 54.0%; width: 27.7%; height: 6.5%; }
.card-outil      { left: 35.4%; top: 54.0%; width: 27.7%; height: 6.5%; }
.card-atelier    { left: 64.3%; top: 54.0%; width: 27.7%; height: 6.5%; }

.offre-livres   { left: 6.8%;  top: 70.3%; width: 18.5%; height: 7.1%; }
.offre-outils   { left: 28.1%; top: 70.3%; width: 18.5%; height: 7.1%; }
.offre-ateliers { left: 49.5%; top: 70.3%; width: 18.5%; height: 7.1%; }
.offre-oeuvres  { left: 71.0%; top: 70.3%; width: 18.5%; height: 7.1%; }

.social-fb      { left: 4.2%;  top: 91.0%; width: 3.8%; height: 3.0%; border-radius: 50%; }
.social-insta   { left: 8.6%;  top: 91.0%; width: 3.8%; height: 3.0%; border-radius: 50%; }
.social-youtube { left: 13.0%; top: 91.0%; width: 3.8%; height: 3.0%; border-radius: 50%; }
.social-tiktok  { left: 17.4%; top: 91.0%; width: 3.8%; height: 3.0%; border-radius: 50%; }
.footer-email   { left: 53.5%; top: 88.5%; width: 16.0%; height: 3.8%; }
.footer-contact { left: 52.8%; top: 92.2%; width: 16.0%; height: 3.8%; }