/* ============================================================
   style.css — Arthurimmo Saint-Jean-de-Monts
   Feuille de style centralisée — toutes les pages
   ============================================================ */

/* --- Fonts ------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* --- Variables de marque ----------------------------------- */
:root {
  --arthur-orange:     #f29400;
  --arthur-anthracite: #31393f;
  --arthur-black:      #000;
}

/* --- Base -------------------------------------------------- */
body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* --- Couleurs utilitaires ---------------------------------- */
.bg-arthur-orange      { background: var(--arthur-orange); }
.bg-arthur-anthracite  { background: var(--arthur-anthracite); }
.text-arthur-orange    { color: var(--arthur-orange); }
.text-arthur-anthracite{ color: var(--arthur-anthracite); }
.border-arthur-orange  { border-color: var(--arthur-orange); }

/* --- Layout ------------------------------------------------ */
.min-h-available {
  min-height: calc(100dvh - 64px);
}

/* --- Animations -------------------------------------------- */
.fade-in {
  animation: fadeIn .35s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes move {
  from { transform: translate(-10%, -10%) scale(1); }
  to   { transform: translate(20%, 10%) scale(1.2); }
}

@keyframes sonarSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .5; }
}

.animate-pulse { animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }

/* --- Carte / Map ------------------------------------------- */
#map-container {
  height: 350px;
  z-index: 1;
}

/* --- Banner déco (index) ----------------------------------- */
.banner-blob {
  position: absolute;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(242, 148, 0, .15) 0%, rgba(242, 148, 0, 0) 70%);
  filter: blur(60px);
  border-radius: 999px;
  z-index: 1;
  animation: move 20s infinite alternate;
}

.banner-grid {
  background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: linear-gradient(to bottom, black, transparent);
}

/* --- Atout cards (simulateur) ------------------------------ */
.atout-card {
  display: block;
  cursor: pointer;
}

.atout-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  font-weight: 700;
  transition: all .25s ease;
}

.atout-card:hover .atout-inner {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

.atout-card input:checked + .atout-inner {
  background: var(--arthur-orange);
  border-color: var(--arthur-orange);
  color: white;
  box-shadow: 0 10px 25px rgba(242, 148, 0, 0.35);
}

/* --- Prose (pages SEO) ------------------------------------- */
.prose h2 {
  color: var(--arthur-anthracite);
  font-weight: 900;
  margin-top: 3.5rem;
  margin-bottom: 1.5rem;
  font-size: 1.875rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.prose h3 {
  color: var(--arthur-anthracite);
  font-weight: 800;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.prose p {
  margin-bottom: 1.5rem;
  color: #475569;
  line-height: 1.8;
  font-size: 1.125rem;
}

.prose ul {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.prose li {
  margin-bottom: 0.5rem;
  color: #475569;
  font-size: 1.125rem;
}

.prose a {
  color: var(--arthur-orange);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.prose a:hover {
  color: #d97700;
}

/* --- Tableau stylé ----------------------------------------- */
.styled-table th {
  background-color: var(--arthur-anthracite);
  color: white;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
}

/* --- Navigation principale --------------------------------- */
.nav-link {
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #64748b;
  text-decoration: none;
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.nav-link:hover {
  background: #fff7ed;
  color: var(--arthur-orange);
}

.nav-link--active {
  background: #fff7ed;
  color: var(--arthur-orange);
}

/* --- Menu mobile ------------------------------------------- */
#mobile-menu {
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 1rem 1rem;
  background: white;
  border-top: 1px solid #e2e8f0;
}

#mobile-menu.open {
  display: flex;
}

#mobile-menu .nav-link {
  padding: 0.6rem 1rem;
  font-size: 0.7rem;
}