/* =================================================================
   Sabliya - styles partagés (index.html + merci.html)
   Centralise tout le design commun pour garantir la cohérence.
   ================================================================= */

/* --- Polices locales --- */
@font-face {
  font-family: "Noto Serif";
  src: url("Fonts/NotoSerif-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Futura";
  /* Face normale (Medium). .woff2 prioritaire (léger + support universel) ;
     .ttc en repli pour les navigateurs sans woff2, puis pile système si besoin. */
  src: url("Fonts/Futura.woff2") format("woff2"),
       url("Fonts/Futura.ttc") format("collection");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Futura";
  /* Face grasse (Bold) - utilisée par les boutons (font-weight:700).
     woff2 uniquement : le .ttc ne permet pas de cibler la face Bold. */
  src: url("Fonts/Futura-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --primaire: #a07a81;
  --primaire-dark: #7c5b62;
  --secondaire: #ede5dc;
  --text: #3d2f31;
  --erreur: #b3534b;
  --font-titre: "Noto Serif", Georgia, "Times New Roman", serif;
  --font-corps: "Futura", "Trebuchet MS", "Century Gothic", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  font-family: var(--font-corps);
  color: var(--text);
  background: var(--primaire); /* couleur de repli avant chargement vidéo */
  overflow: hidden;
}

/* --- Fond vidéo plein écran --- */
.bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--primaire); /* couleur unie tant que la vidéo n'est pas chargée */
  z-index: -2;
}
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(40, 24, 28, 0.42);
  z-index: -1;
}

/* --- Carte centrale glassmorphism --- */
.card {
  width: 100%;
  max-width: 500px;
  text-align: center;
  padding: 0.6rem 1.6rem 0.45rem;
  background: rgba(237, 229, 220, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid #ede5dc;
  border-radius: 28px;
  box-shadow: 0 22px 60px rgba(28, 16, 20, 0.38);
  animation: card-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Repli pour les navigateurs sans backdrop-filter : carte quasi opaque
   pour conserver la lisibilité du texte sur la vidéo. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .card { background: rgba(237, 229, 220, 0.95); }
}

/* Monogramme posé directement sur la carte (sans cadre ni ombre) */
.logo {
  width: 300px;
  max-width: 80%;
  height: auto;
  margin: 0 auto 0.4rem;
  display: block;
}

/* Slogan de marque (eyebrow) - discret, juste sous le logo */
.slogan {
  font-family: var(--font-corps);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primaire-dark);
  opacity: 0.85;
  line-height: 1.45;
  margin: 0 auto 0.5rem;
  max-width: 26ch;
}

.title {
  font-family: var(--font-titre);
  font-weight: 400;
  font-size: clamp(2.1rem, 8vw, 2.6rem);
  letter-spacing: 0.04em;
  color: var(--primaire-dark);
  margin-bottom: 0.55rem;
  line-height: 1.05;
}

/* --- Boutons (CTA index + lien retour merci) --- */
.btn, .back {
  font-family: var(--font-corps);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--secondaire);
  background: var(--primaire-dark);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  touch-action: manipulation; /* supprime le délai de tap de 300ms */
  transition: background 0.2s, transform 0.08s;
}
.btn { width: 100%; padding: 0.85rem 1rem; }
.back {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  text-decoration: none;
}
.btn:hover, .back:hover { background: #5f444a; }
.btn:active, .back:active { transform: scale(0.985); }
.btn:disabled { opacity: 0.65; cursor: default; }
/* Focus clavier visible : anneau contrasté qui ressort aussi bien sur la carte
   claire que sur le bouton foncé (liseré clair + anneau primaire). */
.btn:focus-visible, .back:focus-visible, .socials a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--secondaire), 0 0 0 5px var(--primaire-dark);
}

/* --- Réseaux sociaux --- */
.socials {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.3rem;
}
.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--primaire-dark);
  background: rgba(160, 122, 129, 0.12);
  touch-action: manipulation;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.socials a:hover {
  background: var(--primaire);
  color: var(--secondaire);
  transform: translateY(-2px);
}
.socials svg { width: 20px; height: 20px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Animations --- */
@keyframes card-in {
  from { opacity: 0; transform: translateY(22px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pop {
  0%   { opacity: 0; transform: scale(0.4); }
  100% { opacity: 1; transform: scale(1); }
}

/* Confort visuel : on coupe les mouvements si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
  .card, .success-icon, .badge { animation: none; }
  .btn:active, .back:active { transform: none; }
}

/* --- Desktop / breakpoint --- */
@media (min-width: 480px) {
  .card { padding: 0.75rem 2.2rem 0.6rem; }
  .logo { width: 300px; }
}