/* Ma Transmission — design maison (pas de maquette) pensé pour un lectorat 55-75 ans :
   corps de texte généreux (19px), contrastes élevés, bleu nuit rassurant + crème chaleureux. */

:root {
	--bleu: #1f3a5f;
	--bleu-vif: #2e547f;
	--creme: #faf7f2;
	--creme-fonce: #efe8dc;
	--or: #b07d2b;
	--encre: #22282f;
	--gris: #5b6470;
	--rayon: 10px;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 19px; color: var(--encre); background: var(--creme); line-height: 1.7; }
a { color: var(--bleu-vif); text-underline-offset: 3px; }
a:hover { color: var(--or); }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 20px; }

/* header */
.site-header { background: var(--bleu); padding: 18px 0; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.logo { color: #fff; text-decoration: none; font-size: 1.5rem; font-weight: 700; font-family: Georgia, "Times New Roman", serif; letter-spacing: .3px; }
.logo em { font-style: normal; color: #e8c98a; }
.nav-piliers { display: flex; gap: 4px 18px; flex-wrap: wrap; }
.nav-piliers a { color: #eef2f7; text-decoration: none; font-weight: 600; font-size: .95rem; }
.nav-piliers a:hover { color: #e8c98a; }

/* contenus */
main.wrap { padding: 34px 20px 56px; }
h1 { font-family: Georgia, "Times New Roman", serif; font-size: 2.1rem; line-height: 1.25; color: var(--bleu); margin: 0 0 8px; }
.sous-titre { color: var(--gris); margin-top: 0; font-size: 1.08rem; }
h2 { font-family: Georgia, "Times New Roman", serif; font-size: 1.45rem; color: var(--bleu); margin-top: 40px; }
h3 { font-size: 1.1rem; color: var(--bleu); }

.encadre { background: #fff; border: 1px solid var(--creme-fonce); border-left: 5px solid var(--or); border-radius: var(--rayon); padding: 18px 24px; margin: 22px 0; }
.encadre p { margin: 8px 0; }

table.bareme { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--rayon); overflow: hidden; margin: 18px 0; font-size: .98rem; }
table.bareme th { background: var(--bleu); color: #fff; text-align: left; padding: 10px 14px; }
table.bareme td { border-top: 1px solid var(--creme-fonce); padding: 9px 14px; }
.table-scroll { overflow-x: auto; }

/* grilles de cartes (hubs, home) */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; padding: 0; margin: 18px 0; list-style: none; }
.grille li { background: #fff; border: 1px solid var(--creme-fonce); border-radius: var(--rayon); padding: 18px 20px; }
.grille li a { font-weight: 700; text-decoration: none; font-size: 1.05rem; }
.grille li .meta { color: var(--gris); font-size: .95rem; margin-top: 6px; }

/* CTA */
.cta { margin: 18px 0 8px; }
.cta a { display: inline-block; background: var(--or); color: #fff; text-decoration: none; font-weight: 700; border-radius: var(--rayon); padding: 13px 24px; font-size: 1.05rem; }
.cta a:hover { background: #96691f; color: #fff; }

/* simulateur */
.simulateur { background: #fff; border: 2px solid var(--bleu); border-radius: var(--rayon); padding: 24px 28px; margin: 26px 0; }
.simulateur label { display: block; font-weight: 700; margin: 16px 0 6px; }
.simulateur input, .simulateur select { font-size: 1.1rem; padding: 10px 14px; border: 2px solid var(--creme-fonce); border-radius: 8px; width: 100%; max-width: 380px; background: var(--creme); color: var(--encre); }
.simulateur button { margin-top: 20px; font-size: 1.1rem; font-weight: 700; background: var(--bleu); color: #fff; border: none; border-radius: 8px; padding: 13px 26px; cursor: pointer; }
.simulateur button:hover { background: var(--bleu-vif); }
.resultat { display: none; margin-top: 24px; padding: 20px 24px; background: var(--creme); border-radius: var(--rayon); }
.resultat .gros { font-size: 1.7rem; font-weight: 700; color: var(--bleu); }
.resultat table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: .95rem; }
.resultat td { padding: 5px 0; border-top: 1px solid var(--creme-fonce); }
.resultat td:last-child { text-align: right; font-weight: 600; }

/* FAQ */
.faq details { background: #fff; border: 1px solid var(--creme-fonce); border-radius: var(--rayon); padding: 12px 18px; margin: 10px 0; }
.faq summary { font-weight: 700; cursor: pointer; }

/* sources YMYL */
.sources { border-top: 2px solid var(--creme-fonce); margin-top: 44px; padding-top: 14px; font-size: .92rem; color: var(--gris); }
.sources a { color: var(--gris); }

/* footer */
.site-footer { background: var(--bleu); color: #cdd8e6; padding: 30px 0; margin-top: 48px; font-size: .95rem; }
.site-footer a { color: #fff; }
.footer-nav { display: flex; gap: 6px 18px; flex-wrap: wrap; margin-bottom: 12px; }
.attribution { opacity: .8; }

.note { color: var(--gris); font-size: .92rem; }
.maillage { line-height: 2.1; }

@media (max-width: 640px) {
	body { font-size: 17px; }
	h1 { font-size: 1.7rem; }
}

/* bandeau illustré (habillage sous le header) */
.bandeau { height: 170px; background: url(/img/banniere.jpg) center / cover no-repeat; border-bottom: 4px solid #b07d2b; }
@media (max-width: 640px) { .bandeau { height: 104px; } }