/* Charte graphique du blog Cercle d'Amour : un seul fichier pour tout le blog */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.65; color: #333; background: #fff; }
.container { max-width: 780px; margin: 0 auto; padding: 40px 20px 60px; }
h1 { font-size: 2em; margin: 20px 0 20px; color: #0000FF; line-height: 1.25; }
h2 { font-size: 1.5em; margin: 32px 0 14px; color: #0000FF; line-height: 1.3; }
h3 { font-size: 1.2em; margin: 22px 0 10px; color: #0000FF; font-weight: 600; }
p { margin: 14px 0; }
ul, ol { margin: 14px 0 14px 28px; }
li { margin: 7px 0; }
strong { font-weight: 600; color: #000; }
a { color: #0000FF; text-decoration: none; }
a:hover { text-decoration: underline; }
hr { border: none; border-top: 1px solid #ddd; margin: 30px 0; }
table { width: 100%; border-collapse: collapse; margin: 20px 0; }
table th, table td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; }
table th { background: #f5f5f5; font-weight: 600; }
code { background: #f5f5f5; padding: 10px 12px; border-radius: 3px; font-family: 'Courier New', monospace; display: block; margin: 15px 0; white-space: pre-wrap; }

.breadcrumb { font-size: .95em; color: #666; margin-bottom: 8px; }
.breadcrumb a { font-weight: 600; }
.meta-desc { font-size: .95em; color: #666; font-style: italic; margin: 15px 0; }

/* Encadrés (même style partout) */
.cta-box, .intro-box, .related-articles { background: #f0f0f0; border-left: 4px solid #0000FF; padding: 20px; margin: 25px 0; }
.related-articles { background: #f9f9f9; border-radius: 4px; }
.related-articles h3 { margin-top: 0; }
.related-articles ul { list-style: none; margin: 0; }
.intro-box p:first-child, .cta-box p:first-child { margin-top: 0; }
.intro-box p:last-child, .cta-box p:last-child { margin-bottom: 0; }
.quote-box, .testimony-box { background: #f8f8f8; border-left: 4px solid #8c8cff; padding: 18px 22px; margin: 22px 0; font-style: italic; color: #444; }
.quote-box .author { display: block; margin-top: 8px; font-style: normal; font-weight: 600; color: #0000FF; font-size: .9em; }
.pillar { margin: 28px 0; padding: 18px 20px; background: #f8f8f8; border-radius: 4px; }
.pillar h3 { margin-top: 0; }

/* Appel à l'action en bas d'article */
.cta-section { background: #f0f0f0; border-left: 4px solid #0000FF; padding: 32px 28px; margin: 50px 0 30px; text-align: center; }
.cta-corps { display: flex; align-items: center; gap: 28px; }
.cta-texte { flex: 1; }
.cta-qr { width: 140px; flex-shrink: 0; font-size: .8em; color: #555; line-height: 1.3; }
.cta-qr img { display: block; width: 132px; height: 132px; margin: 0 auto 6px; border-radius: 6px; }
.cta-section h2 { margin-top: 0; }
.cta-section p { color: #555; }
.cta-button, .article-link { display: inline-block; padding: 11px 26px; background: #0000FF; color: #fff; border-radius: 4px; font-weight: 700; font-size: .95em; }
.cta-button:hover, .article-link:hover { background: #0000cc; text-decoration: none; }

/* Flèches précédent / suivant */
.article-nav { display: flex; gap: 16px; margin: 30px 0 10px; }
.article-nav a { flex: 1; border: 1px solid #ccc; border-radius: 4px; padding: 14px 16px; color: #333; display: block; }
.article-nav a:hover { border-color: #0000FF; text-decoration: none; }
.article-nav .sens { display: block; font-size: .85em; color: #0000FF; font-weight: 700; margin-bottom: 4px; }
.article-nav .titre { display: block; font-size: .95em; line-height: 1.35; }
.article-nav .suivant { text-align: right; }
.article-nav .vide { flex: 1; }
.retour { text-align: center; font-size: .95em; margin: 18px 0 0; color: #666; }

/* Pages de rubrique */
.description { font-size: 1.05em; color: #555; margin-bottom: 30px; }
.nav-tabs { display: flex; gap: 6px 18px; flex-wrap: wrap; border-bottom: 2px solid #e5e5e5; padding-bottom: 14px; margin-bottom: 30px; }
.nav-tabs a { color: #666; font-weight: 500; }
.nav-tabs a.actif { color: #0000FF; font-weight: 700; }
.articles { display: grid; gap: 20px; }
.article-item { padding: 22px; background: #f0f0f0; border-left: 4px solid #0000FF; border-radius: 4px; }
.article-item h3 { margin: 0 0 8px; font-size: 1.25em; }
.article-item p { color: #555; margin: 0 0 14px; }

/* Page d'accueil du blog */
.intro { font-size: 1.1em; color: #555; margin-bottom: 36px; }
.rubrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 40px; }
.rubric-card { padding: 28px; background: #f0f0f0; border-left: 5px solid #0000FF; border-radius: 4px; color: #333; display: block; }
.rubric-card:hover { box-shadow: 0 8px 24px rgba(0,0,255,.12); text-decoration: none; }
.rubric-card h2 { margin: 0 0 10px; font-size: 1.3em; }
.rubric-card p { margin: 0 0 14px; color: #555; }
.article-count { display: inline-block; background: #0000FF; color: #fff; padding: 3px 12px; border-radius: 20px; font-size: .85em; font-weight: 600; }

@media (max-width: 700px) {
  .container { padding: 28px 16px 50px; }
  h1 { font-size: 1.7em; }
  .rubrics-grid { grid-template-columns: 1fr; }
  .article-nav { flex-direction: column; }
  .article-nav .suivant { text-align: left; }
}

/* En-tête avec logo (toutes les pages) */
.site-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid #e5e5e5; }
.marque { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.25em; color: #0000FF; }
.marque:hover { text-decoration: none; }
.marque img { height: 46px; width: auto; }
.lien-blog { font-weight: 600; }

/* Haut de la page d'accueil : texte + photo */
.accueil-haut { display: flex; align-items: center; gap: 28px; margin-bottom: 30px; }
.accueil-haut .intro { margin-bottom: 0; }
.accueil-haut img { width: 300px; height: auto; border-radius: 8px; flex-shrink: 0; }
@media (max-width: 700px) {
  .cta-qr { display: none; }
  .accueil-haut { flex-direction: column; align-items: flex-start; }
  .accueil-haut img { width: 100%; max-width: 420px; }
}