/* =========================================================================
   Maison de santé de VIAS — site.css
   Archétype : « Coastal Calm Editorial » (méditerranéen apaisé, sun-washed).
   Élément signature : l'ARCHE méditerranéenne (masque d'image, hauts de
   sections/cartes en arc, halo solaire) déclinée sur tout le site.
   ANTI-FOOTPRINT : aucune classe custom — on ne style QUE des classes/ids
   Bootstrap existants, des éléments et des pseudo-éléments.
   ========================================================================= */

:root {
  /* Palette méditerranéenne */
  --bs-primary: #1a5a73;          /* bleu-mer profond */
  --bs-primary-rgb: 26, 90, 115;
  --bs-secondary: #e8654e;        /* corail chaud (accent/CTA) */
  --bs-secondary-rgb: 232, 101, 78;

  --ms-sea-deep: #103f52;
  --ms-sea: #1a5a73;
  --ms-sea-soft: #2f7d97;
  --ms-coral: #e8654e;
  --ms-coral-soft: #f0876f;
  --ms-sage: #7c9885;
  --ms-sage-soft: #a7bca9;
  --ms-sand: #faf4ea;
  --ms-sand-deep: #f1e7d6;
  --ms-ink: #213a43;
  --ms-gold: #c99155;

  --bs-body-bg: var(--ms-sand);
  --bs-body-color: var(--ms-ink);
  --bs-body-font-family: 'Figtree', system-ui, -apple-system, sans-serif;
  --bs-body-font-size: 1.02rem;
  --bs-body-line-height: 1.7;

  --bs-heading-color: var(--ms-sea-deep);
  --bs-link-color: var(--ms-sea);
  --bs-link-color-rgb: 26, 90, 115;
  --bs-link-hover-color: var(--ms-coral);
  --bs-border-color: #e6dcc9;

  --bs-light: #fbf6ed;
  --bs-light-rgb: 251, 246, 237;
  --bs-dark: #14333f;
  --bs-dark-rgb: 20, 51, 63;

  --ms-shadow: 0 18px 40px -18px rgba(16, 63, 82, 0.35),
    0 6px 14px -8px rgba(16, 63, 82, 0.22);
  --ms-shadow-soft: 0 14px 30px -20px rgba(16, 63, 82, 0.3);
  --ms-arch: 50% 50% 14px 14px / 26% 26% 14px 14px;
}

body {
  background-color: var(--ms-sand);
  background-image:
    radial-gradient(1100px 520px at 88% -8%, rgba(232, 101, 78, 0.10), transparent 60%),
    radial-gradient(900px 480px at -6% 4%, rgba(124, 152, 133, 0.16), transparent 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Typographie éditoriale ---------- */
h1, h2, h3, h4, h5, .navbar-brand, .display-1, .display-2, .display-3, .display-4 {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  letter-spacing: -0.015em;
}
h1, .display-3, .display-4 { font-weight: 700; line-height: 1.08; }
h2 { font-weight: 600; }
p { text-wrap: pretty; }
.lead { font-weight: 400; }

::selection { background: rgba(232, 101, 78, 0.22); }

/* ---------- Liens ---------- */
a { transition: color 0.18s ease; }

/* =========================================================================
   NAVBAR — verre dépoli + souligné corail animé
   ========================================================================= */
.navbar.sticky-top {
  background-color: rgba(251, 246, 237, 0.82) !important;
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid rgba(26, 90, 115, 0.10);
  box-shadow: 0 6px 22px -18px rgba(16, 63, 82, 0.6);
}
.navbar-brand { font-size: 1.32rem; }
.navbar .nav-link {
  font-weight: 500;
  color: var(--ms-ink);
  position: relative;
  padding-inline: 0.85rem;
}
.navbar .nav-link::after {
  content: '';
  position: absolute;
  left: 0.85rem; right: 0.85rem; bottom: 0.3rem;
  height: 2px;
  background: linear-gradient(90deg, var(--ms-coral), var(--ms-gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 2px;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus { color: var(--ms-sea); }
.navbar .nav-link:hover::after,
.navbar .nav-link:focus::after { transform: scaleX(1); }

/* =========================================================================
   BOUTONS — pill, dégradé, lift au survol
   ========================================================================= */
.btn { --bs-btn-font-weight: 600; border-radius: 999px; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.btn-lg { padding-inline: 1.7rem; }

.btn-primary {
  --bs-btn-bg: var(--ms-sea);
  --bs-btn-border-color: var(--ms-sea);
  --bs-btn-hover-bg: var(--ms-sea-deep);
  --bs-btn-hover-border-color: var(--ms-sea-deep);
  --bs-btn-active-bg: var(--ms-sea-deep);
  --bs-btn-active-border-color: var(--ms-sea-deep);
  --bs-btn-disabled-bg: var(--ms-sea);
  --bs-btn-disabled-border-color: var(--ms-sea);
  background-image: linear-gradient(160deg, #21708c, var(--ms-sea) 60%);
  box-shadow: 0 12px 24px -12px rgba(16, 63, 82, 0.7);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -12px rgba(16, 63, 82, 0.7); }

.btn-secondary,
.btn-outline-primary {
  --bs-btn-border-width: 2px;
}
.btn-outline-primary {
  --bs-btn-color: var(--ms-sea);
  --bs-btn-border-color: rgba(26, 90, 115, 0.4);
  --bs-btn-hover-bg: var(--ms-sea);
  --bs-btn-hover-border-color: var(--ms-sea);
  --bs-btn-active-bg: var(--ms-sea-deep);
}
.btn-outline-primary:hover { transform: translateY(-2px); }

/* Bouton corail accent — on cible .btn-secondary pour l'accent chaud */
.btn-secondary {
  --bs-btn-bg: var(--ms-coral);
  --bs-btn-border-color: var(--ms-coral);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #d8543d;
  --bs-btn-hover-border-color: #d8543d;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #d8543d;
  background-image: linear-gradient(160deg, var(--ms-coral-soft), var(--ms-coral) 60%);
  box-shadow: 0 12px 24px -12px rgba(232, 101, 78, 0.65);
}
.btn-secondary:hover { transform: translateY(-2px); }

/* =========================================================================
   HERO — halo solaire + masque d'image en ARCHE (signature)
   ========================================================================= */
#hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(820px 520px at 78% 18%, rgba(232, 101, 78, 0.16), transparent 62%),
    linear-gradient(180deg, #fff7ec 0%, var(--ms-sand) 70%);
}
#hero::before {
  /* halo solaire flottant */
  content: '';
  position: absolute;
  top: -120px; right: -80px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(201, 145, 85, 0.35), transparent 65%);
  border-radius: 50%;
  filter: blur(8px);
  z-index: 0;
  animation: ms-float 12s ease-in-out infinite;
}
#hero > * { position: relative; z-index: 1; }
#hero h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); }
#hero .lead { font-size: clamp(1.05rem, 2vw, 1.3rem); color: #3a525b; }

/* Masque ARCHE sur l'image du hero + cadre + ombre profonde */
#hero .ratio,
#hero img.img-fluid {
  border-radius: var(--ms-arch);
  box-shadow: var(--ms-shadow);
  border: 6px solid #fff;
  overflow: hidden;
}
#hero .ratio { border: 0; }
#hero .ratio > * { border-radius: var(--ms-arch); }

/* Carte flottante d'info posée sur le hero */
#hero .card {
  backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, 0.92);
}

@keyframes ms-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(22px) scale(1.05); }
}

/* =========================================================================
   SECTIONS COLORÉES — coins en ARC + profondeur
   ========================================================================= */
.bg-primary {
  background-color: var(--ms-sea) !important;
  background-image: linear-gradient(155deg, var(--ms-sea-deep), var(--ms-sea) 55%, #226c86) !important;
  position: relative;
}
/* Le hero d'article et les bandeaux primaires reçoivent un grand arc en bas */
#article-hero { border-bottom-left-radius: 42px; border-bottom-right-radius: 42px; }

/* Bande sombre / claire arrondie */
.bg-dark { background-color: var(--ms-sea-deep) !important; }
footer.bg-dark {
  border-top-left-radius: 46px;
  border-top-right-radius: 46px;
  background-image: linear-gradient(165deg, #16424f, var(--ms-sea-deep));
}
footer .text-secondary { color: #b7cbd1 !important; }

/* =========================================================================
   CARTES — ombre double-couche, barre d'accent, lift, hauts en arc doux
   ========================================================================= */
.card {
  border-radius: 20px;
  box-shadow: var(--ms-shadow-soft);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
  background: #fffdf9;
}
.card.shadow-sm { box-shadow: var(--ms-shadow-soft) !important; }
.card:hover { transform: translateY(-6px); box-shadow: var(--ms-shadow); }

/* Barre d'accent dégradée en haut des cartes du blog / produits */
.card.border-0 { position: relative; overflow: hidden; }
.card.border-0::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ms-coral), var(--ms-gold) 55%, var(--ms-sage));
  opacity: 0;
  transition: opacity 0.28s ease;
  z-index: 2;
}
.card.border-0:hover::before { opacity: 1; }

/* =========================================================================
   SÉLECTEUR DE PROFESSIONNELS — tuiles « pastille en arche » (signature)
   ========================================================================= */
#professionnels .card { text-align: center; }
#professionnels .card .rounded-circle {
  border-radius: 50% 50% 18px 18px / 38% 38% 18px 18px !important;
  background: linear-gradient(160deg, #eaf2f1, #dceae6) !important;
  color: var(--ms-sea);
  box-shadow: inset 0 -4px 10px rgba(16, 63, 82, 0.08), 0 10px 20px -12px rgba(16, 63, 82, 0.4);
  transition: transform 0.28s ease, background 0.28s ease, color 0.28s ease;
}
#professionnels .card:hover .rounded-circle {
  background: linear-gradient(160deg, var(--ms-sea), var(--ms-sea-deep)) !important;
  color: #fff;
  transform: translateY(-3px) rotate(-2deg);
}

/* =========================================================================
   BADGES / BREADCRUMB / FORMULAIRES
   ========================================================================= */
.badge { border-radius: 999px; font-weight: 600; letter-spacing: 0.01em; padding: 0.4em 0.85em; }
.text-bg-primary { background-color: var(--ms-sea) !important; }
.text-bg-secondary { background-color: var(--ms-coral) !important; }

.breadcrumb { --bs-breadcrumb-divider-color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; }
.breadcrumb-item.active { color: rgba(255, 255, 255, 0.85); }

.form-control, .form-select {
  border-radius: 12px;
  border: 1px solid #e2d8c5;
  background-color: #fffdf9;
  box-shadow: inset 0 2px 5px rgba(16, 63, 82, 0.05);
  padding: 0.7rem 0.95rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--ms-sea-soft);
  box-shadow: 0 0 0 0.22rem rgba(26, 90, 115, 0.18);
}

/* =========================================================================
   CORPS D'ARTICLE — rythme éditorial
   ========================================================================= */
#article-body { font-size: 1.08rem; color: #2b424b; }
#article-body h2 {
  font-size: 1.7rem;
  margin-top: 2.4rem;
  margin-bottom: 0.9rem;
  padding-left: 0.9rem;
  border-left: 4px solid var(--ms-coral);
}
#article-body h3 { font-size: 1.32rem; margin-top: 1.8rem; color: var(--ms-sea); }
#article-body p { margin-bottom: 1.15rem; }
#article-body a { color: var(--ms-sea); text-underline-offset: 3px; }
#article-body img { border-radius: 16px; box-shadow: var(--ms-shadow-soft); margin: 1.4rem 0; }
#article-body ul, #article-body ol { margin-bottom: 1.2rem; }
#article-body li { margin-bottom: 0.4rem; }
#article-body blockquote {
  border-left: 4px solid var(--ms-sage);
  background: #f4efe3;
  padding: 1rem 1.2rem;
  border-radius: 0 14px 14px 0;
  font-style: italic;
  color: #41575f;
}
#article-body table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.4rem 0; border-radius: 14px; overflow: hidden; box-shadow: var(--ms-shadow-soft); }
#article-body th { background: var(--ms-sea); color: #fff; padding: 0.75rem 1rem; text-align: left; }
#article-body td { padding: 0.7rem 1rem; border-top: 1px solid #ece2d0; background: #fffdf9; }

/* =========================================================================
   DIVERS — sections sable alternées, images produit, hr
   ========================================================================= */
.bg-light { background-color: var(--ms-sand-deep) !important; }
hr { color: #cdbfa6; opacity: 0.6; }
.object-fit-cover { object-fit: cover; }
.object-fit-contain { object-fit: contain; }
.rounded-4 { border-radius: 22px !important; }

/* Pastille « point clé » : gros chiffres éditoriaux dans les sections d'avantages */
#atouts .display-5 { font-family: 'Newsreader', serif; color: var(--ms-coral); font-weight: 700; }

/* Carte (Google Maps) en arche douce */
iframe[title='Carte'] { border-radius: 20px; box-shadow: var(--ms-shadow-soft); }

/* =========================================================================
   ACCESSIBILITÉ & MOTION
   ========================================================================= */
a:focus-visible, .btn:focus-visible, .nav-link:focus-visible, .form-control:focus-visible {
  outline: 3px solid rgba(232, 101, 78, 0.55);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .card:hover, .btn:hover { transform: none; }
}

@media (max-width: 575.98px) {
  #article-hero { border-bottom-left-radius: 26px; border-bottom-right-radius: 26px; }
  footer.bg-dark { border-top-left-radius: 28px; border-top-right-radius: 28px; }
}