/* Bal'Ô : styles du thème, repris des maquettes (artefact « Maquettes site Bal'Ô »). */

:root {
	--bleu: #294D68;
	--bleu-fonce: #1F3B50;
	--bleu-ombre: #5795CE;
	--texte: #202021;
	--texte-2: #3D4A55;
	--fond-clair: #EEF4FA;
	--fond-hachure: #E3ECF5;
	--bordure: #D5E2EF;
	--bordure-2: #C9D9E8;
	--gris-pill: #8AA3B8;
	--blanc: #FFFFFF;
	--pied: #202021;
	--pied-texte: #E6E9EC;
	--titres: 'Rubik', system-ui, sans-serif;
	--corps: 'Source Sans 3', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--blanc); color: var(--texte); font-family: var(--corps); font-size: 18px; line-height: 1.55; }
img { max-width: 100%; height: auto; }
a { color: var(--bleu); }
a:hover { color: var(--texte); }
h1, h2, h3, h4 { font-family: var(--titres); color: var(--bleu); line-height: 1.15; }
h1 { font-size: 46px; margin: 0 0 16px; }
h2 { font-size: 36px; margin: 0 0 16px; }
h3 { font-size: 22px; margin: 0 0 8px; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; z-index: 100; background: var(--blanc); padding: 8px 12px; }
.muted { color: var(--texte-2); font-size: 15px; }
.eyebrow { margin: 0 0 14px; font-weight: 700; color: var(--bleu); text-transform: uppercase; letter-spacing: .06em; font-size: 15px; }
.chapo { font-size: 20px; max-width: 820px; margin: 0; }

/* Encart média à venir */
.ph { background: repeating-linear-gradient(135deg, var(--fond-clair) 0 14px, var(--fond-hachure) 14px 28px); border: 2px dashed var(--bleu-ombre); color: var(--bleu); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; font-size: 15px; line-height: 1.4; min-height: 160px; }
.ph b { font-family: var(--titres); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; font-weight: 700; text-decoration: none; font-size: 17px; }
.btn-p { background: var(--bleu); color: var(--blanc); box-shadow: 4px 4px 0 var(--bleu-ombre); }
.btn-p:hover { color: var(--blanc); background: var(--bleu-fonce); }
.btn-s { background: var(--blanc); color: var(--bleu); border: 2px solid var(--bleu); }
.btn-w { background: var(--blanc); color: var(--bleu); }
.btn-o { border: 2px solid var(--blanc); color: var(--blanc); }
.btn-o:hover, .btn-w:hover { color: var(--bleu-fonce); }
.btns { display: flex; gap: 14px; flex-wrap: wrap; }

/* Bandeau haut + en-tête */
.topbar { background: var(--bleu); color: var(--blanc); font-size: 15px; }
.topbar a { color: var(--blanc); }
.topbar__inner { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; padding-top: 8px; padding-bottom: 8px; }
.topbar__right { display: flex; gap: 20px; flex-wrap: wrap; }
.topbar__menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; }
.site-header { border-bottom: 1px solid var(--bordure); }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding-top: 18px; padding-bottom: 18px; }
.site-header__logo img { height: 52px; width: auto; display: block; }
.site-nav { flex: 1 1 480px; }
.site-nav__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 26px; font-weight: 600; font-size: 17px; }
.site-nav__menu a { text-decoration: none; }
.site-nav__menu .current-menu-item > a, .site-nav__menu .current-menu-ancestor > a, .site-nav__menu .current_page_parent > a { color: var(--texte); }

/* Sections */
.section { padding: 80px 0; }
.section--tight { padding: 32px 0 48px; }
.section--alt { background: var(--fond-clair); }
.breadcrumb { font-size: 15px; margin-bottom: 18px; }
.split { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.split > * { flex: 1 1 460px; min-width: 0; }
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--wide { gap: 28px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.trust { background: var(--fond-clair); border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); }
.trust .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.trust div > div { padding: 22px 20px 22px 0; }
.trust strong { font-family: var(--titres); color: var(--bleu); font-size: 19px; }
.trust span { font-size: 16px; }

/* Cartes */
.card { display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 2px solid var(--bleu); text-decoration: none; color: var(--texte); background: var(--blanc); min-height: 150px; }
.card:hover { box-shadow: 6px 6px 0 var(--bleu-ombre); color: var(--texte); }
.card h3 { margin: 0; font-size: 21px; }
.card span { font-size: 16px; }
.fcard { border: 2px solid var(--bleu); display: flex; flex-direction: column; background: var(--blanc); }
.fcard .ph { border: none; border-bottom: 2px dashed var(--bleu-ombre); height: 150px; min-height: 0; }
.fcard__body { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.fcard__body p { margin: 0; }
.fcard__point { font-size: 14px; font-weight: 700; color: var(--bleu); text-transform: uppercase; letter-spacing: .06em; }
.fcard h2 { margin: 0; font-size: 24px; }
.fcard h2 a { text-decoration: none; }
.fcard__more { font-weight: 700; margin-top: auto; }
.pill { display: inline-block; padding: 2px 10px; border: 1px solid var(--gris-pill); font-size: 14px; margin: 0 6px 6px 0; color: var(--bleu); background: var(--blanc); }

/* Fiche solution */
.enjeux { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.enjeux > div { border-top: 4px solid var(--bleu); padding-top: 16px; }
.enjeux p { margin: 0; }
.table-wrap { overflow-x: auto; border: 1px solid var(--bordure); background: var(--blanc); }
.table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 17px; }
.table th, .table td { padding: 14px; text-align: left; border-bottom: 1px solid var(--bordure); vertical-align: top; }
.table th { border-bottom: 2px solid var(--bleu); font-size: 15px; color: var(--bleu); }
.args { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.args li { padding-left: 22px; position: relative; }
.args li::before { content: ''; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; background: var(--bleu-ombre); }
.steps { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: none; }
.steps__n { font-family: var(--titres); font-size: 40px; font-weight: 700; color: var(--bleu-ombre); line-height: 1; }
.steps p { margin: 0; }
.faq { border-top: 2px solid var(--bleu); }
.faq details { border-bottom: 1px solid var(--bordure); }
.faq summary { cursor: pointer; font-weight: 700; color: var(--bleu); padding: 16px 0; }
.faq details p { margin: 0 0 16px; }
.links { list-style: none; margin: 0; padding: 0; }
.links li { padding: 10px 0; border-top: 1px solid var(--bordure); }

/* Bandeaux */
.band { padding: 56px 0; }
.band--blue { background: var(--bleu); color: var(--blanc); }
.band--blue h2 { color: var(--blanc); }
.band__inner { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.band__title { margin: 0; font-size: 32px; flex: 1 1 480px; }

/* Contenu éditorial (pages simples) */
.entry { max-width: 820px; }
.entry > * + * { margin-top: 1em; }

/* Pied de page */
.site-footer { background: var(--pied); color: var(--pied-texte); padding: 56px 0 32px; font-size: 16px; }
.site-footer a { color: var(--blanc); }
.site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; }
.site-footer__logo { width: 84px; height: 84px; display: block; margin-bottom: 14px; }
.site-footer__title { margin: 0 0 10px; font-weight: 700; color: var(--blanc); }
.site-footer__menu { list-style: none; margin: 0; padding: 0; line-height: 1.9; }
.site-footer__menu a { color: var(--pied-texte); text-decoration: none; }
.site-footer__menu a:hover { color: var(--blanc); text-decoration: underline; }

@media (max-width: 720px) {
	.wrap { padding: 0 16px; }
	h1 { font-size: 34px; }
	h2 { font-size: 28px; }
	.section { padding: 56px 0; }
}