/* Cozyfolio Studio — styles partagés */

html, body { margin: 0; padding: 0; background: #fbf9f5; }
body { font-family: 'Viaoda Libre', Georgia, serif; color: #2e3f63; }
p { text-align: justify; text-justify: inter-word; }
a { color: #2e3f63; text-decoration: none; }
a:hover { color: #7FA8D6; }
::selection { background: #dfe6f2; }

/* Navigation */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 40px;
  background: rgba(251,249,245,0.85);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(46,63,99,0.08);
}
.site-nav .brand { font-family: 'Ms Madi', cursive; font-size: 26px; line-height: 1; }
.site-nav .links { display: flex; gap: 32px; font-size: 17px; letter-spacing: 0.06em; flex-wrap: wrap; justify-content: flex-end; }
.site-nav .links a.active { border-bottom: 1px solid #2e3f63; }

.site-nav .has-dropdown { position: relative; }
.site-nav .dropdown {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  padding-top: 16px; min-width: 200px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.15s ease 0.3s, visibility 0s linear 0.45s;
}
.site-nav .has-dropdown:hover .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 0.12s ease, visibility 0s;
}
.site-nav .dropdown-inner {
  background: #fbf9f5; border: 1px solid rgba(46,63,99,0.12); border-radius: 6px;
  box-shadow: 0 18px 40px rgba(46,63,99,0.14);
  padding: 10px 0;
  display: flex; flex-direction: column;
}
.site-nav .dropdown a { padding: 11px 22px; font-size: 16px; white-space: nowrap; }
.site-nav .dropdown a:hover { background: rgba(127,168,214,0.12); color: #2e3f63; }

/* Formulaire (page contact) */
input, textarea, select {
  font-family: 'Viaoda Libre', Georgia, serif; font-size: 19px; color: #2e3f63;
  background: #ffffff; border: 1px solid rgba(46,63,99,0.25);
  padding: 12px 14px; border-radius: 3px; width: 100%; box-sizing: border-box;
}
input:focus, textarea:focus, select:focus { outline: 2px solid #7FA8D6; outline-offset: 1px; }
button.envoyer {
  align-self: center; margin-top: 8px;
  font-family: 'Viaoda Libre', Georgia, serif; font-size: 19px;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: #2e3f63; color: #fbf9f5; border: none;
  padding: 15px 42px; border-radius: 3px; cursor: pointer;
}
button.envoyer:hover { background: #43598a; }

/* Vignette avec nom du modèle affiché au survol */
.model-card { position: relative; display: block; overflow: hidden; border-radius: 4px; }
.model-card .model-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(46,63,99,0.55); color: #fbf9f5; font-size: 19px; letter-spacing: 0.04em;
  text-align: center; padding: 16px; box-sizing: border-box;
  opacity: 0; transition: opacity 0.25s ease; pointer-events: none;
}
.model-card:hover .model-label { opacity: 1; }

/* Emplacements d'images à remplir (voir js/image-slot.js) */
image-slot { display: block; position: relative; width: 100%; height: 100%; overflow: hidden; }
.image-slot-placeholder {
  width: 100%; height: 100%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 18px;
  background: #f1eee7; border: 1px dashed rgba(46,63,99,0.3);
  color: #7FA8D6; font-style: italic; font-size: 17px;
}

/* Adaptations mobiles */
@media (max-width: 720px) {
  .site-nav { padding: 14px 18px; flex-direction: column; gap: 8px; }
  .site-nav .links { gap: 16px; font-size: 16px; justify-content: center; }
  .split, .about-grid, .form-row { grid-template-columns: 1fr !important; }
  .site-nav .has-dropdown { padding-bottom: 0; margin-bottom: 0; }
  .site-nav .dropdown { position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto; display: none; padding-top: 6px; transition: none; }
  .site-nav .dropdown-inner { box-shadow: none; border: none; background: transparent; }
  .site-nav .has-dropdown:hover .dropdown { display: flex; }
}