/* Soplany UX : transitions de page, ecran de chargement, selecteur de langue. */

/* ---------- Transitions entre pages (View Transitions API) ---------- */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: 200ms cubic-bezier(0.4, 0, 1, 1) both sp-page-leave; }
  ::view-transition-new(root) { animation: 300ms cubic-bezier(0, 0, 0.2, 1) both sp-page-enter; }

  /* Repli sans View Transitions : entree au chargement, sortie au clic. */
  html.sp-fallback body { animation: sp-page-enter 280ms cubic-bezier(0, 0, 0.2, 1) both; }
  html.sp-leaving body { opacity: 0; transform: translateY(-8px); transition: opacity 180ms ease, transform 180ms ease; }
}

@keyframes sp-page-leave { to { opacity: 0; transform: translateY(-8px); } }
@keyframes sp-page-enter { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- Ecran de chargement (logo Soplany en pulsation) ---------- */
#sp-loader {
  position: fixed; inset: 0; z-index: 9998;
  display: grid; place-content: center;
  background: color-mix(in srgb, var(--bg, #F7F5F0) 86%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 200ms ease; pointer-events: none;
}
#sp-loader.on { opacity: 1; }
.sp-loader-mark { position: relative; width: 72px; height: 72px; }
.sp-loader-mark svg { width: 72px; height: 72px; animation: sp-loader-pulse 1.3s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.sp-loader-mark::before, .sp-loader-mark::after {
  content: ""; position: absolute; inset: 0; border-radius: 24px;
  border: 2px solid #D9B46A; opacity: 0;
  animation: sp-loader-halo 1.6s ease-out infinite;
}
.sp-loader-mark::after { animation-delay: 0.5s; }
@keyframes sp-loader-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes sp-loader-halo { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(1.65); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .sp-loader-mark svg, .sp-loader-mark::before, .sp-loader-mark::after { animation: none; }
}

/* ---------- Selecteur de langue cherchable ---------- */
.lang-select { position: relative; display: inline-block; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--r-md, 10px);
  background: var(--surface, #fff); border: 1px solid var(--border-strong, rgba(24,21,14,0.22));
  color: var(--fg, #17191F); font: inherit; font-weight: 600; font-size: 0.85rem;
  cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lang-btn:hover, .lang-btn:focus-visible { border-color: var(--accent, #8E6A1B); box-shadow: 0 0 0 3px var(--accent-soft, rgba(180,138,46,0.13)); outline: none; }
.lang-btn .chev { font-size: 0.7rem; color: var(--fg-3, #6E7484); transition: transform 0.18s ease; }
.lang-select.open .lang-btn .chev { transform: rotate(180deg); }
.lang-flag { width: 18px; height: 13px; border-radius: 2.5px; object-fit: cover; box-shadow: 0 0 0 1px var(--border, rgba(24,21,14,0.1)); }
.lang-panel {
  position: absolute; z-index: 90; min-width: 230px;
  bottom: calc(100% + 8px); left: 0;
  background: var(--surface, #fff); border: 1px solid var(--border-strong, rgba(24,21,14,0.22));
  border-radius: var(--r-lg, 14px); box-shadow: var(--shadow-2, 0 16px 40px -18px rgba(0,0,0,0.35));
  padding: 8px; opacity: 0; transform: translateY(6px) scale(0.98);
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lang-select.drop-down .lang-panel { bottom: auto; top: calc(100% + 8px); transform: translateY(-6px) scale(0.98); }
.lang-select.open .lang-panel { opacity: 1; transform: translateY(0) scale(1); }
.lang-search {
  width: 100%; box-sizing: border-box; margin-bottom: 6px;
  padding: 8px 10px; border-radius: var(--r-md, 10px) ;
  border: 1px solid var(--border, rgba(24,21,14,0.1));
  background: var(--surface-2, #F1EEE7); color: var(--fg, #17191F);
  font: inherit; font-size: 0.85rem;
}
.lang-search:focus { outline: none; border-color: var(--accent, #8E6A1B); }
.lang-panel ul { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow: auto; }
.lang-select .lang-option {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; box-sizing: border-box;
  padding: 8px 10px; border-radius: var(--r-md, 10px);
  color: var(--fg, #17191F); text-decoration: none; font-size: 0.88rem;
}
.lang-select .lang-option:hover, .lang-select .lang-option:focus-visible { background: var(--accent-soft, rgba(180,138,46,0.13)); outline: none; }
.lang-select .lang-option .code { margin-left: auto; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; color: var(--fg-3, #6E7484); text-transform: uppercase; }
.lang-select .lang-option[aria-selected="true"] { background: var(--accent-soft, rgba(180,138,46,0.13)); }
.lang-select .lang-option[aria-selected="true"] .code { color: var(--accent, #8E6A1B); }

/* Dans le tiroir de navigation mobile : pleine largeur, panneau vers le bas. */
.nav-sheet .lang-select { display: block; }
.nav-sheet .lang-btn { width: 100%; justify-content: flex-start; }
.nav-sheet .lang-btn .chev { margin-left: auto; }
.nav-sheet .lang-panel { position: static; margin-top: 8px; box-shadow: none; }

/* Le logo est desormais un lockup SVG complet (mark + wordmark vectorise) :
   on laisse ses attributs width/height gouverner, contrairement a l'ancien mark carre. */
.logo svg { width: auto; height: auto; }