/* =========================================================
   MONEHPAD — Charte graphique (bleu & blanc + touches rose)
   À charger APRÈS les autres feuilles de style du site.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Couleurs */
  --surface: #F4F8FD;          /* fond de page bleu très clair */
  --surface-raised: #FFFFFF;   /* cartes, modales */
  --mist: #EBF3FE;             /* encadrés, bandeaux, filtres */
  --line: #CFE0F5;             /* bordures 1px */
  --ink: #0F2747;              /* texte principal bleu foncé */
  --ink-muted: #4B6382;        /* texte secondaire */
  --brand: #1A4B8C;            /* bleu Monehpad */
  --brand-deep: #0F2747;       /* survol, pied de page */
  --on-brand: #FFFFFF;
  --accent: #2563EB;           /* bleu vif / ciel */
  --accent-ink: #1D4ED8;       /* bleu en texte / focus */
  --on-accent: #FFFFFF;
  --blush: #EBF3FE;            /* bleu clair doux : encadrés */
  --rose: #C5DCF8;             /* bordure bleu clair */
  --rose-ink: #1A4B8C;         /* texte bleu foncé */
  --success: #15803D;
  --warning: #B45309;
  --danger: #B91C1C;

  /* Typo */
  --font-titre: 'Fraunces', Georgia, serif;
  --font-texte: 'DM Sans', system-ui, sans-serif;

  /* Espacements */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px;  --space-12: 48px; --space-16: 64px;

  /* Rayons */
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-full: 9999px;

  /* Ombre */
  --shadow-card: 0 4px 14px rgba(15,39,71,.05), 0 14px 34px rgba(15,39,71,.09);

  /* Mapping variables existantes vers la charte Bleu & Blanc */
  --primary-900: #0F2747;
  --primary-800: #12345F;
  --primary-700: #1A4B8C;
  --primary-600: #2563EB;
  --primary-500: #3B82F6;
  --primary-100: #DCEBFE;
  --primary-50:  #EBF3FE;
  --neutral-900: #0F2747;
  --neutral-800: #0F2747;
  --neutral-700: #1E3A5F;
  --neutral-600: #4B6382;
  --neutral-500: #546B8A;
  --neutral-300: #CFE0F5;
  --neutral-200: #D5E4F7;
  --neutral-100: #EBF3FE;
  --neutral-50:  #FFFFFF;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #0E1726; --surface-raised: #16223A; --mist: #1D2D4A; --line: #2A3B57;
    --ink: #EEF3FA; --ink-muted: #A6B3C6;
    --brand: #8DB8F0; --brand-deep: #1D4F91; --on-brand: #0E1726;
    --accent: #6FA8E8; --accent-ink: #9CC3F2; --on-accent: #0E1726;
    --blush: #2E2030; --rose: #5A3348; --rose-ink: #F2A9C2;
    --success: #7CC79A; --warning: #E3B266; --danger: #F08F7C;
  }
}
:root[data-theme="dark"] {
  --surface: #0E1726; --surface-raised: #16223A; --mist: #1D2D4A; --line: #2A3B57;
  --ink: #EEF3FA; --ink-muted: #A6B3C6;
  --brand: #8DB8F0; --brand-deep: #1D4F91; --on-brand: #0E1726;
  --accent: #6FA8E8; --accent-ink: #9CC3F2; --on-accent: #0E1726;
  --blush: #2E2030; --rose: #5A3348; --rose-ink: #F2A9C2;
  --success: #7CC79A; --warning: #E3B266; --danger: #F08F7C;
}

/* ---------- 2. Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body, button, input, select, textarea {
  font-family: var(--font-texte);
}
h1, h2, h3, h4 {
  font-family: var(--font-titre);
  font-weight: 500;
  letter-spacing: -0.01em;
}
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-texte);
  font-size: 17px;
  line-height: 27px;
}
h1, h2, h3, .display, .hero-title, .section-title, .card-title {
  font-family: var(--font-titre);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
}
.display { font-size: 56px; line-height: 60px; }
h1 { font-size: 40px; line-height: 46px; }
h2 { font-size: 28px; line-height: 34px; }
h3 { font-size: 21px; line-height: 28px; }
@media (max-width: 640px) {
  .display { font-size: 40px; line-height: 44px; }
  h1 { font-size: 32px; line-height: 38px; }
}
p { margin: 0 0 var(--space-4); }
.lead  { font-size: 19px; line-height: 30px; }
.small { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.muted { color: var(--ink-muted); }
.price, .card-price-value { font-size: 24px; line-height: 28px; font-weight: 700; color: var(--ink); }

a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-deep); }

:focus-visible {
  outline: 3px solid var(--accent-ink);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- 3. Mise en page ---------- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-4); }
.section { padding: var(--space-12) 0; }
@media (min-width: 900px) { .section { padding: var(--space-16) 0; } }
.section--mist { background: var(--mist); }
.section--blush { background: var(--blush); }

/* ---------- 4. Boutons ---------- */
.btn, .btn-primary, .btn-accent {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  font: 700 17px/20px var(--font-texte);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.btn--primary, .btn-primary { background: var(--brand); color: var(--on-brand); box-shadow: none; }
.btn--primary:hover, .btn-primary:hover { background: var(--brand-deep); color: #FFFFFF; }
.btn--secondary { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn--secondary:hover { background: var(--mist); }
.btn--ghost { background: transparent; color: var(--brand); }
.btn--ghost:hover { background: var(--mist); }

/* ---------- 5. Cartes ---------- */
.card, .ehpad-card, .filters-sidebar, .search-card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: box-shadow .2s;
}
.card { padding: var(--space-6); }
.card:hover, .ehpad-card:hover { box-shadow: var(--shadow-card); }

/* Fiche établissement */
.etab-card { padding: 0; overflow: hidden; }
.etab-card__photo {
  display: block; width: calc(100% - 2 * var(--space-4)); aspect-ratio: 4 / 3; object-fit: cover;
  margin: var(--space-4) var(--space-4) 0;
  border-radius: 999px 999px var(--radius-md) var(--radius-md); /* arche signature */
}
.etab-card__body { padding: var(--space-4) var(--space-6) var(--space-6); }
.etab-card__name { font: 600 21px/28px var(--font-titre); margin: 0 0 var(--space-1); }
.etab-card__city { color: var(--ink-muted); font-size: 15px; line-height: 22px; }

/* Arche réutilisable (encadrés, illustrations) */
.arch { border-radius: 999px 999px 0 0; }

/* ---------- 6. Badges (toujours avec un libellé, jamais la couleur seule) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font: 700 14px/20px var(--font-texte);
  background: var(--mist); color: var(--brand);
}
.badge--public    { background: var(--brand); color: var(--on-brand); }
.badge--prive     { background: var(--mist); color: var(--brand); border: 1px solid var(--line); }
.badge--rose      { background: var(--blush); color: var(--rose-ink); border: 1px solid var(--rose); }
.badge--success   { background: transparent; color: var(--success); border: 1px solid currentColor; }
.badge--warning   { background: transparent; color: var(--warning); border: 1px solid currentColor; }

/* ---------- 7. Filtres (pastilles) ---------- */
.chip, .quick-tag {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--line);
  background: var(--surface-raised); color: var(--ink);
  font: 400 15px/20px var(--font-texte);
  cursor: pointer;
}
.chip:hover, .quick-tag:hover { border-color: var(--brand); color: var(--brand); }
.chip[aria-pressed="true"], .chip.is-active, .quick-tag.active {
  background: var(--brand); color: var(--on-brand); border-color: var(--brand);
}

/* ---------- 8. Formulaires ---------- */
.field label, .search-field label { display: block; font: 700 15px/20px var(--font-texte); color: var(--ink); margin-bottom: var(--space-2); text-transform: none; letter-spacing: 0; }
.input, select, input[type="text"], input[type="number"], input[type="email"], input[type="tel"], textarea, .search-input, .search-select {
  width: 100%; box-sizing: border-box;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-raised); color: var(--ink);
  font: 400 17px/24px var(--font-texte);
}
.input:focus, select:focus, input:focus, textarea:focus, .search-input:focus, .search-select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}
.input--error { border-color: var(--danger); }
.error-text { color: var(--danger); font-size: 15px; }

/* Recherche « en phrase » de la page d'accueil */
.search-sentence {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  font-size: 21px; line-height: 40px;
}
.search-sentence select, .search-sentence input {
  width: auto; min-height: 0; display: inline-block;
  border: 0; border-bottom: 2px solid var(--brand); border-radius: 0;
  padding: 0 var(--space-1); background: transparent;
  font: 700 21px/32px var(--font-texte); color: var(--brand);
}

/* ---------- 9. En-tête & pied de page ---------- */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.site-header .nav-wrapper {
  max-width: 1380px;
}
.site-header a { color: var(--ink); text-decoration: none; font-weight: 700; }
.site-header a:hover { color: var(--brand); }

/* Bouton design "Trouver un établissement" dans l'en-tête */
.site-header .nav-links {
  background: var(--mist);
  border: 1.5px solid var(--line);
  padding: 5px 7px;
  border-radius: var(--radius-full);
}
.site-header .nav-links a.nav-btn-find {
  background: var(--brand);
  color: var(--on-brand) !important;
  border: 2px solid var(--brand);
  border-radius: var(--radius-full);
  padding: 7px 18px 7px 8px;
  box-shadow: 0 4px 12px rgba(29, 79, 145, 0.22);
}
.site-header .nav-links a.nav-btn-find:hover {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
  color: #FFFFFF !important;
}
.site-header .nav-links a.nav-pill-link {
  color: var(--ink);
  font-family: var(--font-texte);
}
.site-header .nav-links a.nav-pill-link i {
  color: var(--brand);
}
.site-header .nav-links a.nav-pill-link:hover {
  background: var(--surface);
  color: var(--brand);
  border-color: var(--line);
}
.site-header .btn-phone {
  background: var(--mist);
  color: var(--brand);
  border: 1px solid var(--line);
}
.site-header .btn-phone:hover {
  background: var(--surface);
  border-color: var(--brand);
  color: var(--brand-deep);
}
.site-header .btn-accent {
  background: var(--blush);
  color: var(--rose-ink);
  border: 1.5px solid var(--rose);
  min-height: 40px;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  box-shadow: none;
}
.site-header .btn-accent:hover {
  background: var(--rose);
  color: var(--ink);
}

/* Bannière Héro selon la charte Bleu & Blanc + touche Blush */
.hero-section {
  background: var(--mist);
  border-bottom: 1px solid var(--line);
}
.hero-pill {
  background: var(--blush);
  border: 1px solid var(--rose);
  color: var(--rose-ink);
}
.hero-pill i {
  color: var(--rose-ink) !important;
}
.hero-title {
  color: var(--ink);
  font-family: var(--font-titre);
}
.hero-title span.highlight {
  background: none;
  -webkit-text-fill-color: var(--brand);
  color: var(--brand);
}
.hero-subtitle {
  color: var(--ink-muted);
}
.search-card {
  box-shadow: var(--shadow-card);
  border: 1px solid var(--line);
}

.site-footer {
  background: var(--brand-deep); color: #FFFFFF;
  padding: var(--space-12) 0;
}
.site-footer a { color: #FFFFFF; }
.site-footer .small { color: rgba(255,255,255,.8); }

/* ---------- 10. Catalogue, Filtres & Encadrés Guide ---------- */
.filters-sidebar {
  background: #FFFFFF;
  border: 1px solid #D5E4F7;
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 8px 28px rgba(15, 39, 71, 0.05);
}
.results-header {
  background: #FFFFFF;
  border: 1px solid #D5E4F7;
  border-radius: 16px;
  padding: 14px 20px;
  box-shadow: 0 4px 14px rgba(15, 39, 71, 0.04);
}
.guide-box {
  background: #FFFFFF;
  border: 1px solid #D5E4F7;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: 0 6px 20px rgba(15, 39, 71, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.guide-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15, 39, 71, 0.09);
}
.guide-box:nth-child(2) {
  background: #F2F7FF;
  border-color: #C5DCF8;
}
.guide-box__icon {
  width: 48px; height: 56px; background: linear-gradient(135deg, #2563EB 0%, #1A4B8C 100%);
  color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  border-radius: 999px 999px 10px 10px; margin-bottom: var(--space-4);
  box-shadow: 0 6px 14px rgba(26, 75, 140, 0.2);
}
.guide-box:nth-child(2) .guide-box__icon {
  background: linear-gradient(135deg, #1A4B8C 0%, #0F2747 100%);
  color: #FFFFFF;
}

.section-pill {
  background: #E4F0FE;
  color: #1A4B8C;
  border: 1px solid #C2DAFA;
}

.ai-assistant-fab {
  background: linear-gradient(135deg, #1A4B8C 0%, #0F2747 100%);
  color: var(--on-brand);
  border: 2px solid #FFFFFF;
  box-shadow: var(--shadow-card);
}
.ai-assistant-fab:hover {
  background: linear-gradient(135deg, #2563EB 0%, #12345F 100%);
}