/*
Theme Name: ABG Services
Theme URI: https://abg-rdc.com
Author: Sam
Description: Thème vitrine ABG Services (Kinshasa, RDC). Couleurs bleu marine et or, header/footer et sections modifiables dans Apparence > Éditeur, bouton WhatsApp flottant réglable dans Apparence > Personnaliser > Contact ABG.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: abg-services
Tags: block-patterns, full-site-editing, style-variations, custom-colors, wide-blocks
*/

html { scroll-behavior: smooth; }
:where(.wp-site-blocks) :where([id]) { scroll-margin-top: 96px; }
.wp-site-blocks > * + main,
.wp-site-blocks > * + footer { margin-block-start: 0; }

/* ---------- Header ---------- */
.abg-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent);
	backdrop-filter: saturate(160%) blur(10px);
	-webkit-backdrop-filter: saturate(160%) blur(10px);
	border-bottom: 3px solid var(--wp--preset--color--secondary);
}
.admin-bar .abg-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .abg-header { top: 46px; } }
.abg-logo img { height: 56px; width: auto; display: block; }
.abg-logo { margin: 0; }
.abg-header .wp-block-navigation a:hover { color: var(--wp--preset--color--secondary); }
@media (max-width: 600px) {
	.abg-logo img { height: 44px; }
	.abg-header .abg-header-cta { display: none; }
}

/* ---------- Petites étiquettes ---------- */
.abg-eyebrow {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--secondary-soft);
	padding: 0.35rem 0.9rem;
	border-radius: var(--wp--custom--radius-button);
}
p.abg-eyebrow.has-text-align-center { display: table; margin-left: auto; margin-right: auto; }
.abg-dark .abg-eyebrow { background: rgba(255,255,255,0.1); color: var(--wp--preset--color--secondary); }

/* Soulignement doré sous les titres de section */
.abg-title-line::after {
	content: "";
	display: block;
	width: 72px;
	height: 4px;
	border-radius: 4px;
	background: var(--wp--preset--color--secondary);
	margin-top: 0.9rem;
}
.abg-title-line.has-text-align-center::after { margin-left: auto; margin-right: auto; }

/* ---------- Sections sombres (hero, pourquoi, footer) ---------- */
.abg-dark,
.abg-dark :where(h1, h2, h3, h4, p, li) { color: var(--wp--preset--color--primary-contrast); }
.abg-dark .has-muted-color { color: rgba(255,255,255,0.75) !important; }
.abg-dark a:not(.wp-element-button) { color: var(--wp--preset--color--primary-contrast); }
.abg-dark a:not(.wp-element-button):hover { color: var(--wp--preset--color--secondary); }
.abg-dark .has-secondary-color { color: var(--wp--preset--color--secondary) !important; }
.abg-dark .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--primary-contrast);
	border-color: rgba(255,255,255,0.7);
}
.abg-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary-contrast);
	color: var(--wp--preset--color--primary);
}

/* ---------- Hero avec vague dorée ---------- */
.abg-hero { position: relative; overflow: hidden; }
/* Trait doré ondulé en bas des bandeaux bleus */
.abg-hero::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 14px;
	height: 44px;
	pointer-events: none;
	z-index: 1;
	background: var(--wp--preset--color--secondary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 44' preserveAspectRatio='none'%3E%3Cpath d='M0 34 C360 4 760 52 1440 10' fill='none' stroke='%23000' stroke-width='4'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 44' preserveAspectRatio='none'%3E%3Cpath d='M0 34 C360 4 760 52 1440 10' fill='none' stroke='%23000' stroke-width='4'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.abg-hero > * { position: relative; z-index: 2; }
.abg-tagline { font-style: italic; opacity: .9; }

/* Mosaïque photos du hero */
.abg-photos { gap: 12px !important; }
.abg-photos .wp-block-image { margin: 0; flex: 1 1 0; }
.abg-photos .wp-block-image img {
	width: 100%;
	aspect-ratio: 3 / 5;
	object-fit: cover;
	border-radius: var(--wp--custom--radius);
	box-shadow: 0 18px 40px -18px rgba(0,0,0,.55);
	display: block;
}
.abg-photos .wp-block-image:nth-child(2) { transform: translateY(28px); }
.abg-photos .wp-block-image:first-child img,
.abg-photos .wp-block-image:last-child img { border: 3px solid rgba(255,255,255,.15); }

/* ---------- Cartes ---------- */
.abg-card {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	height: 100%;
}
.abg-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--custom--shadow);
	border-color: var(--wp--preset--color--secondary);
}
.abg-card .wp-block-list { padding-left: 1.1rem; margin: 0; }
.abg-card .wp-block-list li { margin-bottom: .25rem; }
.abg-card .wp-block-list li::marker { color: var(--wp--preset--color--secondary); }

/* ---------- Icônes rondes ---------- */
.abg-icon { margin: 0; }
.abg-icon img { width: 76px; height: 76px; display: block; }
.abg-icon.has-text-align-center img,
.abg-center .abg-icon img { margin-left: auto; margin-right: auto; }
.abg-center { text-align: center; }
.abg-icon-sm img { width: 44px; height: 44px; }

/* ---------- Liste à coches dorées ---------- */
.abg-checklist { list-style: none; padding-left: 0; }
.abg-checklist li {
	position: relative;
	padding-left: 2.6rem;
	margin-bottom: 1rem;
	font-size: 1.15rem;
	min-height: 1.9rem;
	display: flex;
	align-items: center;
}
.abg-checklist li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary);
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------- Photo arrondie ---------- */
.abg-photo { max-width: 380px; margin-left: auto !important; margin-right: auto !important; }
.abg-photo img {
	border-radius: calc(var(--wp--custom--radius) * 1.4);
	box-shadow: 0 24px 50px -24px rgba(0,0,0,.6);
	width: 100%;
	max-height: 460px;
	object-fit: cover;
	border: 4px solid var(--wp--preset--color--secondary);
}

/* ---------- Étapes ---------- */
.abg-step-num {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-weight: 800;
	font-size: 0.95rem;
	letter-spacing: .12em;
	color: var(--wp--preset--color--secondary);
	margin-bottom: 0;
}

/* ---------- Valeurs (Servir • Innover • Faciliter) ---------- */
.abg-value {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	color: var(--wp--preset--color--primary);
	margin-bottom: 0;
}

/* ---------- CTA ---------- */
.abg-rounded { border-radius: calc(var(--wp--custom--radius) * 1.5); overflow: hidden; }
.abg-btn-dark .wp-block-button__link { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary-contrast); }
.abg-btn-dark .wp-block-button__link:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }

/* ---------- Contact ---------- */
.abg-whatsapp-card {
	background: linear-gradient(135deg, #1FAF55 0%, #25D366 100%);
	border-radius: var(--wp--custom--radius);
	box-shadow: 0 16px 34px -16px rgba(31,175,85,.6);
}
.abg-whatsapp-card, .abg-whatsapp-card :where(p, h3, a:not(.wp-element-button)) { color: #fff !important; }
.abg-whatsapp-card .wp-block-button__link { background: #fff; color: #128C45; }
.abg-whatsapp-card .wp-block-button__link:hover { background: #0B2A6B; color: #fff; }
.abg-contact-line { align-items: center; }
#contact .abg-card { height: auto; }
.abg-contact-line p { margin: 0; }

/* ---------- Footer ---------- */
.abg-footer { border-top: 4px solid var(--wp--preset--color--secondary); }
.abg-footer .abg-logo img { height: 64px; }
.abg-footer .wp-block-list { list-style: none; padding-left: 0; }
.abg-footer .wp-block-list li { margin-bottom: .35rem; }
.abg-footer .wp-block-separator { border-color: rgba(255,255,255,.15); opacity: 1; }

/* ---------- FAQ ---------- */
.wp-block-details summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 1rem; font-size: 1.15rem; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--wp--preset--color--secondary); transition: transform .2s ease; }
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details > :not(summary) { color: var(--wp--preset--color--muted); }

/* ---------- Bouton outline ---------- */
.wp-block-button.is-style-outline > .wp-block-button__link { border: 2px solid currentColor; background: transparent; color: var(--wp--preset--color--primary); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary-contrast); border-color: var(--wp--preset--color--primary); }

/* Espace entre intro de section et contenu */
.wp-block-group.alignfull > * + .wp-block-columns.alignwide { margin-block-start: var(--wp--preset--spacing--50); }

/* ---------- Bouton WhatsApp flottant ---------- */
.abg-whatsapp-float {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 999;
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .8rem 1.2rem .8rem .9rem;
	border-radius: 999px;
	background: #25D366;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 12px 28px -8px rgba(0,0,0,.35);
	transition: transform .2s ease, background .2s ease;
}
.abg-whatsapp-float:hover { transform: translateY(-3px); background: #1FAF55; color: #fff; }
@media (max-width: 600px) {
	.abg-whatsapp-float { padding: .9rem; }
	.abg-whatsapp-float__label { display: none; }
}

.wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--base); }
@media (max-width: 781px) {
	.abg-photos .wp-block-image:nth-child(2) { transform: none; }
}


/* =========================================================
   v2 — pages, fiches services, formulaires
   ========================================================= */

/* Header */
.abg-site-logo img { height: 56px !important; width: auto !important; }
.abg-header-right { align-items: center; }
.abg-header .abg-header-cta { display: flex !important; }
.abg-header .abg-header-cta .wp-block-button__link { padding: .7rem 1.3rem; font-size: 1rem; }
@media (max-width: 600px) {
	.abg-site-logo img { height: 42px !important; }
	.abg-header .abg-header-cta .wp-block-button__link { padding: .55rem .9rem; font-size: .9rem; }
}

/* Titres de pages */
.abg-home-title, .abg-page-title { font-size: clamp(2.2rem, 4.4vw, 3.5rem) !important; line-height: 1.02; }
.abg-lead { opacity: .92; }
.abg-dark .abg-lead { color: rgba(255,255,255,.88) !important; }
.abg-page-hero { padding-bottom: calc(var(--wp--preset--spacing--70) + 20px) !important; }
.abg-hero-icon { justify-content: center; }
.abg-icon-xl img { width: 180px; height: 180px; filter: drop-shadow(0 20px 40px rgba(0,0,0,.35)); }
.abg-photo--hero img { max-height: 380px; }

/* Cartes */
.abg-card--lg h3 { font-size: 1.8rem; }
.abg-link-card h3 a, .abg-card h3 a { color: inherit; text-decoration: none; }
.abg-link-card h3 a:hover { color: var(--wp--preset--color--secondary); }
.abg-link-card { display: flex; flex-direction: column; }
.abg-link-card .abg-more { margin-top: auto; }
.abg-more a { font-weight: 700; text-decoration: none; }
.abg-more a:hover { text-decoration: underline; }
.abg-linklist { list-style: none; padding-left: 0 !important; }
.abg-linklist li { border-bottom: 1px solid var(--wp--preset--color--border); padding: .45rem 0; margin: 0 !important; }
.abg-linklist a { text-decoration: none; font-weight: 600; display: flex; justify-content: space-between; }
.abg-linklist a::after { content: "→"; color: var(--wp--preset--color--secondary); }
.abg-small-cards .abg-icon img { width: 60px; height: 60px; }

/* Étapes numérotées */
.abg-steps .wp-block-column { position: relative; }
.abg-num {
	width: 3rem; height: 3rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-weight: 800;
	font-size: 1.4rem;
	display: flex; align-items: center; justify-content: center;
	margin-bottom: .5rem;
	box-shadow: 0 0 0 6px var(--wp--preset--color--secondary-soft);
}
.abg-steps .wp-block-column:nth-child(odd) .abg-num { background: var(--wp--preset--color--secondary); color: var(--wp--preset--color--primary); }
.abg-step-title { font-size: 1.2rem !important; margin-top: .6rem; }
@media (min-width: 782px) {
	.abg-steps .wp-block-column:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 1.5rem; left: 3.8rem; right: -1rem;
		border-top: 2px dashed var(--wp--preset--color--border);
	}
}

/* Pastilles, puces, flux */
.abg-pills { list-style: none; padding-left: 0 !important; display: flex; flex-wrap: wrap; gap: .5rem; }
.abg-pills li { margin: 0 !important; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); border-radius: 999px; padding: .35rem .9rem; font-weight: 600; font-size: .95rem; color: var(--wp--preset--color--primary); }
.abg-checklist--sm li { font-size: 1.05rem; margin-bottom: .7rem; }
.abg-flow { display: flex; flex-direction: column; gap: .5rem; }
.abg-flow-item { margin: 0 !important; display: flex; align-items: center; gap: .8rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: .6rem .9rem; font-weight: 600; }
.abg-flow--light .abg-flow-item { background: var(--wp--preset--color--surface); border-color: var(--wp--preset--color--border); color: var(--wp--preset--color--primary); }
.abg-chip-num { flex: 0 0 auto; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--wp--preset--color--secondary); color: var(--wp--preset--color--primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .9rem; }

/* En préparation / états */
.abg-soon { border: 2px dashed var(--wp--preset--color--border); border-radius: var(--wp--custom--radius); }
.abg-soon-list { font-weight: 600; color: var(--wp--preset--color--muted); }
.abg-badge-soon { display: inline-block; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: var(--wp--preset--color--secondary-soft); color: #8a5a00; padding: .25rem .7rem; border-radius: 999px; margin-bottom: .3rem; }
.abg-empty { border-style: dashed; }
.abg-btns-on-gold .is-style-outline .wp-block-button__link { color: var(--wp--preset--color--primary) !important; border-color: var(--wp--preset--color--primary) !important; background: transparent !important; }
.abg-btns-on-gold .is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--primary) !important; color: #fff !important; }

/* Footer */
.abg-footer-logo img { height: 60px; width: auto; }
.abg-footer-links { list-style: none; padding-left: 0 !important; margin-bottom: 1.6rem; }
.abg-footer-links li { margin-bottom: .35rem; }
.abg-footer-links a { text-decoration: none; }
.abg-footer-links a:hover { text-decoration: underline; }
.abg-footer h4 { font-size: 1rem !important; letter-spacing: .06em; }

/* =========================================================
   Formulaires
   ========================================================= */
.abg-form-card { scroll-margin-top: 110px; }
.abg-form { font-size: 1rem; }
.abg-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.2rem; }
.abg-field { grid-column: 1 / -1; display: flex; flex-direction: column; gap: .35rem; }
.abg-field--half { grid-column: span 1; }
@media (max-width: 600px) { .abg-field--half { grid-column: 1 / -1; } }
.abg-field > label, .abg-field legend { font-weight: 700; color: var(--wp--preset--color--primary); }
.abg-field fieldset { border: 0; padding: 0; margin: 0; }
.abg-field legend { margin-bottom: .45rem; padding: 0; }
.abg-form input[type=text], .abg-form input[type=tel], .abg-form input[type=email], .abg-form select, .abg-form textarea {
	width: 100%;
	font: inherit;
	padding: .8rem .95rem;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: 10px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-sizing: border-box;
}
.abg-form input:focus, .abg-form select:focus, .abg-form textarea:focus { outline: none; border-color: var(--wp--preset--color--primary); box-shadow: 0 0 0 3px var(--wp--preset--color--secondary-soft); }
.abg-form input[type=file] { font: inherit; padding: .6rem; border: 1.5px dashed var(--wp--preset--color--border); border-radius: 10px; background: var(--wp--preset--color--surface); }
.abg-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.abg-choice { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; font-weight: 500; }
.abg-choices .abg-choice { border: 1.5px solid var(--wp--preset--color--border); border-radius: 999px; padding: .5rem 1rem; }
.abg-choices .abg-choice:has(input:checked) { border-color: var(--wp--preset--color--primary); background: var(--wp--preset--color--secondary-soft); }
.abg-choice input { accent-color: var(--wp--preset--color--primary); width: 1.1rem; height: 1.1rem; }
.abg-choice--consent { align-items: flex-start; font-size: .95rem; }
.abg-choice--consent input { margin-top: .2rem; flex: 0 0 auto; }
.abg-req { color: #C0392B; }
.abg-help { font-size: .85rem; color: var(--wp--preset--color--muted); margin: 0; }
.abg-form-actions { margin-top: 1.4rem; }
.abg-form-btn {
	display: inline-block;
	font: inherit; font-weight: 700;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary);
	border: 0; border-radius: 999px;
	padding: .95rem 2rem;
	cursor: pointer;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}
.abg-form-btn:hover { background: var(--wp--preset--color--primary); color: #fff; }
.abg-form-btn--wa { background: #25D366; color: #fff; }
.abg-form-btn--wa:hover { background: #1FAF55; color: #fff; }
.abg-hp { position: absolute !important; left: -9999px !important; height: 1px; overflow: hidden; }
.abg-form-errors { background: #FDECEA; border: 1px solid #F5C2BD; color: #7A1D14; border-radius: 10px; padding: .9rem 1.1rem; margin-bottom: 1.2rem; }
.abg-form-errors ul { margin: .4rem 0 0 1.1rem; }
.abg-form-success { text-align: center; padding: 1rem 0; }
.abg-form-success__icon { width: 4rem; height: 4rem; margin: 0 auto .8rem; border-radius: 50%; background: var(--wp--preset--color--secondary); color: var(--wp--preset--color--primary); font-size: 2rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.abg-form-success__text { font-size: 1.25rem; font-weight: 600; color: var(--wp--preset--color--primary); }
.abg-form-success__hint { color: var(--wp--preset--color--muted); }
.abg-aside { position: sticky; top: 110px; height: auto !important; }

/* Sections collées les unes aux autres dans le contenu des pages */
.wp-block-post-content > .wp-block-group.alignfull { margin-block: 0 !important; }