/* Base commune des 4 blogs : mise en page neutre et blocs d'article (classes a-*).
   L'apparence propre à chaque blog vient de public/themes/<blog>/theme.css, chargé après ce fichier. */
/* Couleurs utilisées par les blocs d'article : le thème les redéfinit ; --accent vient de la couleur du blog (admin). */
:root {
  --navy: var(--ink, #0e1c2b);
  --gold: var(--accent, #b8955a);
  --cream: var(--soft, #f7f5f0);
  --grey: var(--muted, #6b7885);
  --line: #dddad4;
  --text: var(--ink, #28323d);
  --ok: #2b7a57;
  --bad: #b3261e;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 17px/1.65 Arial, "Helvetica Neue", sans-serif; }
.wrap { max-width: 72rem; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
.site-main { padding-top: 1.5rem; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 10; background: #fff; padding: .5rem 1rem; }
img { max-width: 100%; height: auto; }
.site-intro, .list-head { max-width: 46rem; margin: 1rem 0 2rem; }
.site-intro h1, .list-head h1 { margin: 0 0 .5rem; }
.eyebrow { margin: 0; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.empty-note { color: var(--muted, #666); }
.cards { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.card-link { display: block; color: inherit; text-decoration: none; }
.card-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; background: #eef1ef; }
.card-cat { display: block; margin-top: .75rem; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.card-title { margin: .3rem 0 .4rem; font-size: 1.2rem; line-height: 1.3; }
.card-link:hover .card-title { text-decoration: underline; text-decoration-color: var(--accent); }
.card-excerpt { margin: 0 0 .4rem; font-size: .95rem; color: var(--muted, #555); }
.card-meta { margin: 0; font-size: .85rem; color: var(--muted, #777); }
.pager { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; margin: 2.5rem 0 0; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; margin: 0 auto 1rem; padding: 0; max-width: 760px; font-size: .85rem; color: var(--muted, #777); }
.crumbs li + li::before { content: "›"; margin-right: .3rem; }
.crumbs a { color: inherit; }
.related { max-width: 72rem; margin: 3rem auto 0; padding-top: 2rem; border-top: 1px solid var(--line, #ddd); }
.message { max-width: 40rem; margin: 3rem auto; text-align: center; }

/* ---- Article (identique pour tous les blogs ; le thème peut surcharger couleurs et polices) ---- */
h1, h2, h3, h4 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; color: var(--navy); line-height: 1.25; }
h1 { font-size: clamp(28px, 6vw, 38px); margin: .25rem 0 .75rem; }
h2 { font-size: 23px; margin: 2.25rem 0 .75rem; }
h3 { font-size: 19px; margin: 1.75rem 0 .5rem; }
h4 { font-size: 17px; margin: 1.5rem 0 .5rem; }
a { color: var(--navy); text-decoration-color: var(--gold); text-underline-offset: 3px; }
img { max-width: 100%; height: auto; }

.a-eyebrow { margin: 0; color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; }
.a-eyebrow::after { content: ""; display: inline-block; width: 2rem; height: 1px; background: var(--gold); vertical-align: middle; margin-left: .75rem; }
.a-excerpt { font-size: 18px; color: var(--grey); margin: 0 0 .75rem; }
.a-meta { font-size: 14px; color: var(--grey); border-bottom: 1px solid var(--line); padding-bottom: 1rem; margin: 0 0 1.5rem; }
.a-meta strong { color: var(--navy); }
.a-subheading { font-weight: 700; color: var(--navy); margin: 1.5rem 0 .25rem; }
.a-block-title { margin: 0 0 .5rem; color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }

.a-figure { margin: 1.75rem 0; }
.a-figure img { display: block; width: 100%; border-radius: 4px; }
.a-figure figcaption { font-size: 14px; color: var(--grey); margin-top: .4rem; }
.a-figure.is-missing .a-placeholder { aspect-ratio: 16 / 9; display: flex; flex-direction: column; gap: .4rem; align-items: center; justify-content: center; text-align: center; padding: 1rem;
  background: repeating-linear-gradient(45deg, var(--cream), var(--cream) 12px, #efebe2 12px, #efebe2 24px); border: 1px dashed var(--gold); color: var(--grey); font-size: 14px; }

.a-quote { margin: 1.75rem 0; padding: .25rem 0 .25rem 1.25rem; border-left: 3px solid var(--gold); font-family: Georgia, serif; font-size: 19px; color: var(--navy); }
.a-quote p { margin: 0; }
.a-quote footer { font: 14px Arial, sans-serif; color: var(--grey); margin-top: .5rem; }

/* Encadrés « Bon à savoir » */
.a-callout, .a-highlight, .a-summary, .a-tool { margin: 1.75rem 0; padding: 1rem 1.25rem; background: var(--cream); border-left: 3px solid var(--gold); border-radius: 0 4px 4px 0; }
.a-callout p:last-child, .a-highlight p:last-child { margin-bottom: 0; }
.a-callout--warning { border-left-color: #c58a00; background: #fcf6e6; }
.a-callout--danger { border-left-color: var(--bad); background: #fbeeed; }
.a-callout--info { border-left-color: var(--navy); background: #eef2f6; }
.a-highlight { font-size: 18px; color: var(--navy); }
.a-summary ul { margin: 0; padding-left: 1.2rem; }
.a-tool { border-left-color: var(--navy); border-style: dashed; border-width: 1px 1px 1px 3px; }

.a-table { overflow-x: auto; margin: 1.5rem 0; }
.a-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.a-table caption { text-align: left; color: var(--grey); font-size: 14px; padding-bottom: .4rem; }
.a-table th, .a-table td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.a-table thead th { background: var(--navy); color: #fff; font-weight: 600; }
.a-table tbody th { color: var(--navy); }

.a-faq { margin: 2rem 0; }
.a-faq details { border-bottom: 1px solid var(--line); padding: .75rem 0; }
.a-faq summary { cursor: pointer; font-weight: 700; color: var(--navy); }
.a-faq details p { margin: .5rem 0 0; }
.a-steps ol { counter-reset: step; list-style: none; padding: 0; }
.a-steps li { counter-increment: step; position: relative; padding: 0 0 1rem 3rem; }
.a-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.a-steps li p { margin: .25rem 0 0; }
.a-proscons { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1.75rem 0; }
.a-proscons > .a-block-title { margin: 0; }
@media (min-width: 560px) { .a-proscons { grid-template-columns: 1fr 1fr; } .a-proscons > .a-block-title { grid-column: 1 / -1; } }
.a-proscons > div { background: var(--cream); padding: 1rem 1.25rem; border-radius: 4px; }
.a-pros-title { color: var(--ok); font-weight: 700; margin: 0 0 .4rem; }
.a-cons-title { color: var(--bad); font-weight: 700; margin: 0 0 .4rem; }
.a-proscons ul { margin: 0; padding-left: 1.2rem; }
.a-verdict { background: var(--cream); padding: .75rem 1rem; }

.a-cta { margin: 2rem 0; padding: 1.5rem; background: var(--navy); color: #fff; border-radius: 4px; }
.a-cta p { margin: 0 0 1rem; }
.a-cta-btn { display: inline-block; background: var(--gold); color: #fff; padding: .75rem 1.25rem; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; font-weight: 700; text-decoration: none; }
.a-cta-btn::after { content: " →"; }

.a-sources { margin-top: 2.5rem; font-size: 14px; color: var(--grey); }
.a-sources h2 { font-size: 12px; font-family: Arial, sans-serif; font-weight: 700; color: var(--gold); letter-spacing: 1.5px; text-transform: uppercase; }
.a-author { margin-top: 2.5rem; padding: 1.25rem; border-top: 2px solid var(--navy); background: var(--cream); }
.a-author p { margin: 0; }
.a-author .a-block-title { margin-bottom: .4rem; }
.a-reviewer { margin-top: .5rem !important; color: var(--ok); font-weight: 700; font-size: 14px; }
/* Emplacement de publicité (le thème du blog le remplacera par le bloc AdSense) */
.a-ad { margin: 1.75rem 0; min-height: 90px; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(-45deg, #f2f2f2, #f2f2f2 8px, #e9e9e9 8px, #e9e9e9 16px); border: 1px dashed #aaa; color: #777; font: 12px/1 Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.a-article { max-width: 760px; margin: 0 auto; }
.a-meta a { color: inherit; }
.a-ad { min-height: 0; background: none; border: 0; display: block; }

/* Calculateurs (blocs « tool ») */
.a-tool form { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); margin: .5rem 0 1rem; }
.a-tool label { display: block; font-size: .85rem; font-weight: 700; margin-bottom: .2rem; }
.a-tool input { width: 100%; padding: .5rem; font: inherit; border: 1px solid #999; border-radius: 4px; background: #fff; }
.a-tool output { display: block; }
.a-tool .tool-result { background: #fff; border-radius: 4px; padding: .75rem 1rem; }
.a-tool .tool-result dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; margin: 0; }
.a-tool .tool-result dt { color: var(--muted, #555); }
.a-tool .tool-result dd { margin: 0; font-weight: 700; }
.a-tool .tool-note { font-size: .85rem; color: var(--muted, #666); margin: .75rem 0 0; }

/* Choix de la langue (articles traduits) : discret, hérite des couleurs du thème */
.lang-switch { display: flex; flex-wrap: wrap; gap: .35rem .75rem; align-items: center; max-width: 760px; margin: 0 auto 1.25rem; font-size: .9rem; color: var(--muted, #777); }
.lang-switch a { color: inherit; font-weight: 600; }