/* Thème Laurina : surcouche de Source alignée sur charte.md (https://osteopatheallauch.com).
   Chargée après built/screen.css. html:root gagne sur les :root injectés par Ghost (accent, fond). */

html:root {
  /* Palette de la charte */
  --lm-primary: #2F6F5E;
  --lm-primary-hover: #245848;
  --lm-secondary: #A8DCC8;
  --lm-accent: #E3F2EC;
  --lm-background: #FBFDFC;
  --lm-surface: #FFFFFF;
  --lm-border: #CFE3DA;
  --lm-text: #2B2D2A;
  --lm-text-secondary: #5E6661;
  --lm-radius: 16px;
  --lm-shadow: 0 8px 24px rgba(47, 111, 94, 0.08);

  /* Variables de Source remappées sur la charte */
  --ghost-accent-color: var(--lm-primary);
  --background-color: var(--lm-background);
  --color-darker-gray: var(--lm-text);
  --color-primary-text: var(--lm-text);
  --color-secondary-text: var(--lm-text-secondary);
  --color-border: var(--lm-border);
  --color-light-gray: var(--lm-border);
  --color-lighter-gray: var(--lm-accent);
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Newsreader", Georgia, serif;
  --font-serif-alt: "Newsreader", Georgia, serif;
  --container-width: 1200px;
  --content-width: 720px;
}

body {
  background: var(--lm-background);
  color: var(--lm-text);
  font-family: var(--font-sans);
}

a { color: var(--lm-primary); }
a:hover { opacity: 1; color: var(--lm-primary-hover); }

/* Titres : Newsreader léger, jamais en gras */
.is-title,
.gh-content :is(h2, h3, h4),
.gh-card-title,
.gh-article-title,
.gh-container-title,
.gh-header-title {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
  color: var(--lm-text);
}
.gh-content h3, .gh-content h4 { font-weight: 500 !important; }

/* Boutons pilule de la charte */
.gh-button,
.lm-button {
  min-height: 48px;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--lm-primary);
  color: #fff !important;
  font: 600 15px/1.2 var(--font-sans);
  letter-spacing: 0;
  text-decoration: none;
  transition: background-color 0.2s;
}
.gh-button:hover,
.lm-button:hover { background: var(--lm-primary-hover); opacity: 1; }

/* En-tête : fond blanc, fine bordure basse */
.lm-navigation {
  background: var(--lm-surface);
  border-bottom: 1px solid var(--lm-border);
}
.lm-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--lm-text); }
.lm-brand img { width: 40px; height: 40px; max-height: none; }
.lm-brand-name { font-family: var(--font-serif); font-size: 20px; font-weight: 500; letter-spacing: 0; }
.lm-navigation .nav a {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  text-transform: none;
  color: var(--lm-text);
}
.lm-navigation .nav a:hover,
.lm-navigation .nav .nav-current a { color: var(--lm-primary); }
.lm-navigation .gh-navigation-actions .lm-button { min-height: 44px; padding: 12px 22px; font-size: 14px; }

/* Libellés de thème (tag) : majuscules espacées, vert */
.gh-card-tag,
.gh-article-tag,
.lm-cta-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lm-primary) !important;
}

/* Cartes d'articles */
.gh-card-image,
.gh-card-image img,
.gh-article-image img,
.gh-content img { border-radius: var(--lm-radius); }
.gh-card-excerpt,
.gh-card-meta { color: var(--lm-text-secondary); }
.gh-card-link:hover .gh-card-title { color: var(--lm-primary); opacity: 1; }

/* Article : lecture confortable */
.gh-article-excerpt { color: var(--lm-text-secondary); }
.gh-content { font-size: 18px; line-height: 1.7; color: var(--lm-text); }
.gh-content > p, .gh-content li { color: var(--lm-text); }
.gh-content a { color: var(--lm-primary); text-decoration: underline; text-underline-offset: 3px; }
.gh-content blockquote { border-left-color: var(--lm-secondary); font-family: var(--font-serif); font-style: italic; }

/* Tableaux générés par le blog (première colonne en <th> de ligne) */
.gh-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  overflow: hidden;
}
.gh-content th,
.gh-content td { padding: 12px 16px; border-bottom: 1px solid var(--lm-border); text-align: left; vertical-align: top; }
.gh-content thead th {
  background: var(--lm-accent);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lm-primary);
}
.gh-content tbody th { font-weight: 600; color: var(--lm-text); }
.gh-content tbody tr:last-child :is(th, td) { border-bottom: 0; }

/* Encadré de fin d'article */
.lm-cta { margin-top: 56px; }
.lm-cta-box {
  padding: 32px;
  border-radius: var(--lm-radius);
  background: var(--lm-accent);
  border: 1px solid var(--lm-border);
  text-align: center;
}
.lm-cta-box > * + * { margin-top: 12px; }
.lm-cta-title { font-family: var(--font-serif); font-size: 28px; line-height: 1.2; color: var(--lm-text); }
.lm-cta-text { color: var(--lm-text-secondary); font-size: 16px; }
.lm-cta .lm-button { display: inline-flex; margin-top: 20px; }

/* Pied de page identique au site */
.lm-footer {
  margin-top: 96px;
  background: var(--lm-accent);
  border-top: 1px solid var(--lm-border);
  color: var(--lm-text-secondary);
}
.lm-footer .gh-footer-inner { padding-block: 56px 32px; }
.lm-footer-main { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.lm-footer-id { display: flex; align-items: center; gap: 20px; }
.lm-footer-id img { width: 56px; height: 56px; }
.lm-footer-id p { font-size: 14px; line-height: 1.5; margin: 0; }
.lm-footer-id .lm-footer-name { font-family: var(--font-serif); font-size: 20px; font-weight: 500; color: var(--lm-text); }
.lm-footer-bar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--lm-border);
  font-size: 13px;
}
.lm-footer-bar nav { display: flex; gap: 20px; flex-wrap: wrap; }
.lm-footer-bar a { color: var(--lm-text-secondary); }
.lm-footer-bar a:hover { color: var(--lm-primary); }

@media (max-width: 767px) {
  .lm-brand-name { font-size: 17px; }
  .lm-cta-box { padding: 24px 20px; }
  .lm-cta-title { font-size: 24px; }
  .lm-footer-main { flex-direction: column; align-items: flex-start; }
  .lm-footer-main .lm-button { width: 100%; }
}