/* Home (H.3). Mobile-first, fidèle à la grammaire de marque.
   Scopé sous body.apa-is-home pour ne pas fuir hors home.
   On force le wrapper plein-largeur car le thème parent contraint. */

body.apa-is-home {
	background: #fff;
}
body.apa-is-home .wp-block-post-content,
body.apa-is-home main.wp-block-group,
body.apa-is-home .entry-content {
	max-width: none !important;
	padding: 0 !important;
}
body.apa-is-home .wp-block-post-title,
body.apa-is-home .entry-header,
body.apa-is-home .wp-block-post-date,
body.apa-is-home .wp-block-post-author {
	display: none !important;
}

.apa-home {
	font-family: 'Inter', system-ui, sans-serif;
	color: #14202d;
	line-height: 1.55;
}
.apa-home * { box-sizing: border-box; }
.apa-home h1, .apa-home h2, .apa-home h3 {
	font-family: var(--apa-font-display, 'Poppins', 'Inter', system-ui, sans-serif);
	color: #1b3a6b;
	margin: 0 0 .4em;
	line-height: 1.15;
}
.apa-home p { margin: 0 0 1em; }

.apa-h-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 56px 18px;
}
.apa-h-section-title { font-size: 1.6rem; text-align: center; }
.apa-h-section-lede {
	text-align: center;
	color: #5b6675;
	max-width: 640px;
	margin: 0 auto 24px;
}

/* ---- Boutons ---- */
.apa-h-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 22px;
	border-radius: 12px;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	min-height: 48px;
	transition: transform .12s, background .12s;
}
.apa-h-btn-primary { background: #ef5a4c; color: #fff; box-shadow: 0 3px 10px rgba(239,90,76,.30); }
.apa-h-btn-primary:hover { background: #d8412f; transform: translateY(-1px); }
.apa-h-btn-secondary { background: #fff; color: #1b3a6b; border: 1px solid rgba(27,58,107,.18); }
.apa-h-btn-secondary:hover { background: rgba(27,58,107,.05); }

/* ============ 2. HÉRO ============ */
.apa-h-hero {
	background: linear-gradient(180deg, #f4f1ea 0%, #fff 100%);
	text-align: center;
}
.apa-h-hero .apa-h-inner { padding: 64px 18px 56px; }
.apa-h-hero-title {
	font-size: 2.1rem;
	letter-spacing: -.5px;
	margin: 0 auto 18px;
	max-width: 820px;
}
.apa-h-hero-accent { color: #ef5a4c; }
.apa-h-hero-lede {
	max-width: 620px;
	margin: 0 auto 28px;
	color: #5b6675;
	font-size: 1.05rem;
}
.apa-h-hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============ 3. BANDEAU ARGUMENTS ============ */
.apa-h-args { background: #1b3a6b; color: #fff; }
.apa-h-args .apa-h-inner { padding: 24px 18px; }
/* Grille auto-fit : chaque item garde au moins 200 px de large, le navigateur
   décide combien de colonnes tiennent. min(100%, 200px) évite que la
   minmax dépasse 100% sur très petit écran (et casse en horizontal scroll). */
.apa-h-args-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 14px 20px;
	max-width: 1100px;
	margin: 0 auto;
}
.apa-h-arg {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0; /* Permet à l'item de s'adapter à sa col sans déborder */
}
.apa-h-arg-ico { font-size: 1.5rem; flex-shrink: 0; width: 36px; text-align: center; }
/* Le bloc texte (b + span) prend la place restante ; sans min-width: 0,
   les flex children gardent leur min-content et débordent. */
.apa-h-arg > div { min-width: 0; flex: 1 1 auto; }
.apa-h-arg b {
	display: block;
	font-weight: 700;
	color: #fff;
	font-size: .95rem;
	line-height: 1.25;
}
.apa-h-arg span {
	display: block;
	color: rgba(255,255,255,.7);
	font-size: .82rem;
	line-height: 1.35;
}

/* ============ 4. DEUX FAÇONS ============ */
.apa-h-deux { background: #fff; }
.apa-h-deux-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-top: 24px;
}
.apa-h-deux-card {
	display: block;
	background: #fff;
	border: 1px solid rgba(0,0,0,.08);
	border-top: 4px solid #ef5a4c;
	border-radius: 16px;
	padding: 28px 24px;
	text-decoration: none;
	color: #14202d;
	box-shadow: 0 1px 3px rgba(0,0,0,.04);
	transition: transform .15s, box-shadow .15s;
}
.apa-h-deux-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.apa-h-deux-card-projet { border-top-color: #1b3a6b; }
.apa-h-deux-ico { font-size: 1.8rem; display: block; margin-bottom: 6px; }
.apa-h-deux-card h3 { font-size: 1.2rem; margin: 6px 0 8px; color: #1b3a6b; }
.apa-h-deux-card p { color: #5b6675; font-size: .95rem; margin-bottom: 12px; }
.apa-h-deux-link { color: #ef5a4c; font-weight: 700; }
.apa-h-deux-card-projet .apa-h-deux-link { color: #1b3a6b; }

/* (Section « Situations populaires » retirée v2 — /projets/ joue ce rôle) */

/* ============ 5. COMMENT ÇA MARCHE ============ */
.apa-h-comment { background: #fff; }
.apa-h-steps {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
/* Grille interne : badge à gauche occupe 2 lignes (titre + description),
   colonne droite contient titre puis description. min-width: 0 sur la
   colonne droite pour autoriser le wrap normal du texte (sinon Grid
   réserve la largeur "intrinsèque" et fait éclater la mise en page,
   notamment dans une 2e colonne 1fr d'un .apa-h-steps en 2 cols à 880px). */
.apa-h-steps li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"badge title"
		"badge desc";
	gap: 4px 16px;
	background: #fff;
	border: 1px solid rgba(0,0,0,.06);
	border-radius: 12px;
	padding: 18px 18px 16px;
	align-items: start;
}
.apa-h-step-num {
	grid-area: badge;
	align-self: start;
	background: #1b3a6b;
	color: #fff;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-family: var(--apa-font-display, 'Poppins', 'Inter', system-ui, sans-serif);
	font-size: 1.05rem;
	flex-shrink: 0;
}
.apa-h-steps h3 {
	grid-area: title;
	font-size: 1.05rem;
	margin: 0 0 4px;
	min-width: 0;
}
.apa-h-steps p {
	grid-area: desc;
	color: #5b6675;
	font-size: .92rem;
	line-height: 1.5;
	margin: 0;
	min-width: 0;
}
.apa-h-comment-link { text-align: center; margin-top: 22px; }
.apa-h-comment-link a { color: #ef5a4c; font-weight: 700; text-decoration: none; }

/* ============ 7. KIT RÉSEAUX SOCIAUX ============ */
.apa-h-kit { background: linear-gradient(135deg, #1b3a6b 0%, #2f5fa3 100%); color: #fff; }
.apa-h-kit h2 { color: #fff !important; text-align: left; }
.apa-h-kit p { color: rgba(255,255,255,.88) !important; }
.apa-h-kit .apa-h-mini { color: rgba(255,255,255,.65) !important; font-size: .9rem; }
/* Le badge « inclus » garde son texte bleu sur fond jaune — lisible et
   intentionnel, n'est pas concerné par le forçage blanc du h2. */
.apa-h-kit h2 .apa-h-kit-inclus { color: #1b3a6b !important; }
.apa-h-kit-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: center;
}
.apa-h-kit-inclus {
	background: #f6c453;
	color: #1b3a6b;
	padding: 2px 12px;
	border-radius: 999px;
	font-size: .85rem;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	display: inline-block;
	vertical-align: middle;
	margin-left: 4px;
}
.apa-h-kit-visu {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
	height: 200px;
}
.apa-h-kit-post, .apa-h-kit-story, .apa-h-kit-banner {
	background: rgba(255,255,255,.10);
	border: 1px dashed rgba(255,255,255,.25);
	border-radius: 8px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 8px;
	color: rgba(255,255,255,.75);
	font-size: .75rem;
	letter-spacing: .5px;
	text-transform: uppercase;
}
.apa-h-kit-post   { aspect-ratio: 1; }
.apa-h-kit-story  { aspect-ratio: 9/16; }
.apa-h-kit-banner { aspect-ratio: 21/9; grid-column: span 2; }

/* ============ 8. POUR QUI ============ */
.apa-h-pour-qui { background: #fff; }
.apa-h-pour-qui-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-top: 24px;
}
.apa-h-pour-qui-card {
	background: #f4f1ea;
	border-radius: 14px;
	padding: 24px 22px;
	text-align: center;
}
.apa-h-pq-ico { font-size: 2rem; }
.apa-h-pour-qui-card h3 { font-size: 1.15rem; margin: 6px 0 8px; }
.apa-h-pour-qui-card p { color: #5b6675; font-size: .95rem; margin: 0; }

/* ============ 9. RÉASSURANCE ============ */
.apa-h-reass { background: #eafaf2; }
.apa-h-reass-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
.apa-h-reass-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: #fff;
	border-radius: 12px;
	padding: 16px 14px;
}
.apa-h-rs-ico { font-size: 1.4rem; }
.apa-h-reass-card b { color: #1b3a6b; font-size: .95rem; font-weight: 700; }
.apa-h-reass-card span { color: #5b6675; font-size: .82rem; }

/* ============ 10. FINAL CTA ============ */
.apa-h-final {
	background: #1b3a6b;
	color: #fff;
	text-align: center;
}
.apa-h-final-title { color: #fff; font-size: 1.8rem; }
.apa-h-final-lede { color: rgba(255,255,255,.78); }
.apa-h-final-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

/* ============ Responsive : breakpoints ============ */

@media (min-width: 600px) {
	.apa-h-hero-title { font-size: 2.6rem; }
	.apa-h-pour-qui-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (min-width: 880px) {
	.apa-h-inner { padding: 80px 32px; }
	.apa-h-hero .apa-h-inner { padding: 90px 32px 72px; }
	.apa-h-hero-title { font-size: 3.2rem; }
	.apa-h-section-title { font-size: 2rem; }
	.apa-h-deux-grid { grid-template-columns: 1fr 1fr; }
	.apa-h-steps { grid-template-columns: 1fr 1fr; gap: 18px; }
	.apa-h-kit-grid { grid-template-columns: 1.1fr 1fr; }
	.apa-h-reass-grid { grid-template-columns: repeat(4, 1fr); }
	.apa-h-final-title { font-size: 2.4rem; }
}

/* ============ Sections à fond foncé : contraste garanti ============
   La règle générique .apa-home h2 { color: #1b3a6b; } posée en haut
   peut être disputée par le block theme parent (Twenty Twenty-Five)
   sur certains rendus. On augmente la spécificité (.apa-home .apa-h-*)
   pour s'assurer que tout titre / paragraphe d'un bloc à fond foncé
   ressort en blanc, sans dépendre de l'ordre de cascade. */

.apa-home .apa-h-args,
.apa-home .apa-h-kit,
.apa-home .apa-h-final {
	color: #fff;
}
.apa-home .apa-h-args h1, .apa-home .apa-h-args h2, .apa-home .apa-h-args h3,
.apa-home .apa-h-kit  h1, .apa-home .apa-h-kit  h2, .apa-home .apa-h-kit  h3,
.apa-home .apa-h-final h1, .apa-home .apa-h-final h2, .apa-home .apa-h-final h3 {
	color: #fff;
}
.apa-home .apa-h-kit p,
.apa-home .apa-h-final p,
.apa-home .apa-h-final-lede {
	color: rgba(255,255,255,.88);
}
.apa-home .apa-h-kit .apa-h-mini {
	color: rgba(255,255,255,.65);
}
.apa-home .apa-h-args b { color: #fff; }
.apa-home .apa-h-args span { color: rgba(255,255,255,.78); }

/* Le badge « inclus » garde son fond jaune et son texte bleu — c'est
   un repère intentionnel, lisible (jaune sur bleu foncé alentour). */
.apa-home .apa-h-kit-inclus {
	color: #1b3a6b;
}