/*
Theme Name: Apprivoise
Theme URI: https://apprivoise.fr
Author: Apprivoise – Conseil et Formation
Description: Thème à blocs pour Apprivoise, aux couleurs de la charte (Ivory, Brillant Rose, Moon Stone, Tea Green, Naples Yellow) avec les polices Averia Sans Libre et Nunito hébergées localement.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: apprivoise
*/

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-site-blocks { padding: 0; }
.apv-section { padding: 88px 24px; }
.apv-section > * { max-width: 1200px; margin-left: auto; margin-right: auto; }
.apv-section.is-narrow-pad { padding-top: 48px; padding-bottom: 48px; }
.apv-section h2 { font-size: 2.75rem; margin-top: 0; margin-bottom: 0.5rem; }
.apv-eyebrow { font-size: 0.875rem; letter-spacing: 0.08em; font-weight: 800; color: #2F6F79; margin: 0; }
.apv-pill { display: inline-block; background: #B7E7B7; color: #1F2A30; padding: 6px 16px; border-radius: 999px; font-size: 0.875rem; font-weight: 800; letter-spacing: 0.04em; margin: 0; }

/* ---------- Boutons ---------- */
.wp-block-button__link { font-weight: 800; transition: filter .15s; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
.wp-block-button__link:hover { filter: brightness(.95); }
.wp-block-button.apv-btn-outline .wp-block-button__link { background: transparent; color: #2F6F79; border: 2px solid #2F6F79; padding-top: calc(0.9rem - 2px); padding-bottom: calc(0.9rem - 2px); }
.wp-block-button.apv-btn-dark .wp-block-button__link { background: #1F2A30; color: #FFFFFF; }
.wp-block-button.apv-btn-light .wp-block-button__link { background: #FFFFFF; color: #1F2A30; }
:where(a, button, input, select, textarea):focus-visible { outline: 3px solid #1F2A30; outline-offset: 3px; }

/* ---------- Bandeau + en-tête ---------- */
.apv-topbar { background: #2F6F79; color: #FFFFFF; padding: 10px 24px; font-size: 0.875rem; font-weight: 600; }
.apv-topbar a { color: #FFFFFF; text-decoration: none; }
.apv-topbar a:hover { text-decoration: underline; color: #FFFFFF; }
.apv-topbar > .wp-block-group { max-width: 1200px; margin: 0 auto; }
.apv-topbar p { margin: 0; }
.apv-header { background: #F5F1EA; border-bottom: 1px solid #E3DCCF; padding: 16px 24px; }
.apv-header > .wp-block-group { max-width: 1200px; margin: 0 auto; }
.apv-logo { margin: 0; }
.apv-logo img { height: 56px; width: auto; display: block; }
.apv-header .wp-block-navigation { font-weight: 700; }
.apv-header .wp-block-navigation a { color: #1F2A30; text-decoration: none; }
.apv-header .wp-block-navigation a:hover { color: #2F6F79; text-decoration: underline; }

/* ---------- Hero ---------- */
.apv-hero { background: #F5F1EA; padding: 72px 24px 80px; }
.apv-hero > .wp-block-columns { max-width: 1200px; margin: 0 auto; gap: 48px; align-items: center; }
.apv-hero h1 { font-size: 3.75rem; margin: 20px 0 24px; }
.apv-hero h1 em { font-style: normal; color: #2F6F79; }
.apv-hero .apv-lead { font-size: 1.25rem; color: #3A464C; max-width: 560px; }
.apv-hero .apv-note { font-size: 0.875rem; color: #4B575D; margin-top: 16px; }
.apv-hero-card { background: #FFFFFF; border-radius: 32px; padding: 32px; box-shadow: 0 12px 40px rgba(31,42,48,.10); max-width: 440px; margin-left: auto; margin-right: auto; }
.apv-hero-card figure { margin: 0 0 20px; text-align: center; }
.apv-hero-card img { width: 200px; height: 200px; object-fit: contain; }
.apv-hero-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-weight: 700; }
.apv-hero-card li { position: relative; padding-left: 28px; }
.apv-hero-card li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 12px; height: 12px; border-radius: 50%; background: #FF48B0; }
.apv-hero-card li:nth-child(2)::before { background: #479AA6; }
.apv-hero-card li:nth-child(3)::before { background: #FAD85B; }

/* ---------- Confiance ---------- */
.apv-trust { background: #FFFFFF; border-top: 1px solid #E3DCCF; border-bottom: 1px solid #E3DCCF; padding: 28px 24px; }
.apv-trust > .wp-block-group { max-width: 1200px; margin: 0 auto; gap: 24px 48px; }
.apv-trust figure { margin: 0; }
.apv-trust img { height: 84px; width: auto; }
.apv-trust p { margin: 0; color: #3A464C; }
.apv-tag { border: 1.5px solid #479AA6; color: #2F6F79; padding: 8px 16px; border-radius: 999px; font-weight: 800; font-size: 0.875rem; margin: 0; }

/* ---------- Cartes formations ---------- */
.apv-formations { background: #F5F1EA; }
.apv-cards { gap: 24px; margin-top: 16px; }
.apv-card { background: #FFFFFF; border-radius: 24px; padding: 28px; border-top: 6px solid #FF48B0; position: relative; }
.apv-card.is-tool { border-top-color: #479AA6; padding: 24px; }
.apv-card h3 { font-size: 1.625rem; margin: 0 0 8px; }
.apv-card.is-tool h3 { font-size: 1.5rem; }
.apv-card p { margin: 0 0 12px; color: #3A464C; font-size: 1rem; }
.apv-card .apv-more { font-weight: 800; margin: 0; }
.apv-card .apv-more a { color: #2F6F79; text-decoration: none; }
.apv-card .apv-more a::after { content: ""; position: absolute; inset: 0; border-radius: 24px; } /* toute la carte cliquable */
.apv-card:hover { box-shadow: 0 8px 28px rgba(31,42,48,.12); }
.apv-sub { margin: 40px 0 0; }
.apv-banner-yellow { background: #FAD85B; border-radius: 24px; padding: 28px 32px; margin-top: 40px; gap: 16px 32px; }
.apv-banner-yellow p { margin: 0; }
.apv-banner-yellow strong { font-family: var(--wp--preset--font-family--averia-sans-libre); font-size: 1.625rem; }

/* ---------- Méthode ---------- */
.apv-method { background: #FFFFFF; }
.apv-steps { gap: 24px; margin-top: 32px; }
.apv-step .apv-num { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.25rem; margin: 0 0 12px; background: #FF48B0; color: #1F2A30; }
.apv-step:nth-child(2) .apv-num { background: #479AA6; color: #FFFFFF; }
.apv-step:nth-child(3) .apv-num { background: #B7E7B7; }
.apv-step:nth-child(4) .apv-num { background: #FAD85B; }
.apv-step h3 { font-size: 1.2rem; margin: 0 0 8px; font-family: var(--wp--preset--font-family--nunito); font-weight: 800; }
.apv-step p { margin: 0; color: #3A464C; font-size: 1rem; }

/* ---------- À propos ---------- */
.apv-about { background: #F5F1EA; }
.apv-about > .wp-block-columns { gap: 48px; align-items: center; }
.apv-about figure { margin: 0; background: #FFFFFF; border-radius: 32px; padding: 32px; text-align: center; }
.apv-about figure img { width: 240px; height: 240px; object-fit: contain; }
.apv-chips { gap: 10px; margin: 20px 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; }
.apv-chips li { background: #FFFFFF; padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 0.95rem; }

/* ---------- Témoignages (pattern séparé) ---------- */
.apv-reviews { background: #2F6F79; color: #FFFFFF; }
.apv-reviews h2 { color: #FFFFFF; }
.apv-quote { background: #FFFFFF; color: #1F2A30; border-radius: 24px; padding: 28px; }
.apv-quote p { margin: 0 0 12px; font-size: 1.125rem; }
.apv-quote .apv-who { font-weight: 800; font-size: 0.95rem; color: #2F6F79; margin: 0; }
.apv-reviews .apv-reviews-intro { color: #E8F2F3; max-width: 700px; margin: 0 auto 8px 0; }
.apv-reviews .apv-stats, .apv-reviews .apv-quotes { gap: 24px; margin-top: 24px; }
.apv-stat { border-radius: 24px; padding: 28px; color: #1F2A30; }
.apv-stat.is-yellow { background: #FAD85B; }
.apv-stat.is-green { background: #B7E7B7; }
.apv-stat.is-white { background: #FFFFFF; }
.apv-stat .apv-big { font-family: var(--wp--preset--font-family--averia-sans-libre); font-weight: 700; font-size: 3.5rem; line-height: 1; margin: 0 0 8px; }
.apv-stat p { margin-top: 0; font-weight: 700; font-size: 1rem; line-height: 1.4; }
.apv-quote { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }

/* ---------- Contact ---------- */
.apv-contact { background: #F5F1EA; }
.apv-contact > .wp-block-columns { gap: 48px; }
.apv-contact-card { background: #FFFFFF; border-radius: 28px; padding: 32px; }
.apv-contact-card p { margin-top: 0; }

/* ---------- Pied de page ---------- */
.apv-footer { background: #1F2A30; color: #E8E2D6; padding: 48px 24px 0; font-size: 0.95rem; }
.apv-footer a { color: #E8E2D6; }
.apv-footer a:hover { color: #FFFFFF; }
.apv-footer h2, .apv-footer h3 { color: #FFFFFF; }
.apv-footer > .wp-block-columns { max-width: 1200px; margin: 0 auto; gap: 32px 48px; }
.apv-footer p { margin: 0 0 6px; }
.apv-footer-legal { border-top: 1px solid #3A464C; margin-top: 40px; padding: 16px 0; text-align: center; font-size: 0.8125rem; color: #C9C2B4; }
.apv-footer-legal p { margin: 0; }

/* ---------- Fiche formation ---------- */
.apv-crumbs { max-width: 1200px; margin: 0 auto; padding: 32px 24px 0; font-size: 0.875rem; color: #4B575D; }
.apv-fiche { padding: 24px 24px 72px; }
.apv-fiche > .wp-block-columns { max-width: 1200px; margin: 0 auto; gap: 40px; align-items: flex-start; }
.apv-fiche h1 { font-size: 3.25rem; margin: 16px 0; }
.apv-box { background: #FFFFFF; border-radius: 24px; padding: 28px; margin-bottom: 24px; }
.apv-box h2 { font-size: 1.75rem; margin: 0 0 12px; }
.apv-box.is-yellow { background: #FAD85B; }
.apv-aside { background: #FFFFFF; border-radius: 28px; padding: 28px; box-shadow: 0 12px 40px rgba(31,42,48,.10); border-top: 8px solid #FF48B0; }
.apv-aside h2 { font-size: 1.625rem; margin: 0 0 16px; }
.apv-aside dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 0 0 20px; }
.apv-aside dt { font-weight: 800; }
.apv-aside dd { margin: 0; }
.apv-qualiopi img { width: 180px; height: auto; }
.apv-aside .wp-block-buttons { flex-direction: column; align-items: stretch; }
.apv-aside .wp-block-button { width: 100%; }
.apv-aside .wp-block-button__link { width: 100%; text-align: center; }

/* ---------- Pages standard ---------- */
.apv-page-title { background: #F5F1EA; padding: 56px 24px 8px; }
.apv-page-title > * { max-width: 1200px; margin-left: auto; margin-right: auto; }
.apv-page-title h1 { font-size: 3rem; }
.apv-page-content { padding: 24px 24px 72px; }

/* ---------- Mobile ---------- */
@media (max-width: 781px) {
	.apv-section { padding: 56px 20px; }
	.apv-hero { padding: 40px 20px 48px; }
	.apv-hero h1 { font-size: 2.5rem; }
	.apv-section h2 { font-size: 2rem; }
	.apv-fiche h1 { font-size: 2.25rem; }
	.apv-logo img { height: 44px; }
}

/* ---------- Motifs et symboles de la charte (assets/images) ---------- */
.apv-trust { background-color: #FFFFFF; background-image: url("assets/images/motif-fleur-beige.png"); background-size: 216px 94px; }
.apv-method { background-color: #FFFFFF; background-image: url("assets/images/motif-rond-beige.png"); background-size: 95px 139px; }
.apv-reviews { background-color: #2F6F79; background-image: url("assets/images/motif-rond-bleu.png"); background-size: 95px 139px; }
.apv-banner-yellow { background-color: #FAD85B; background-image: url("assets/images/motif-rond-beige.png"); background-size: 95px 139px; }
.apv-footer { background-color: #1F2A30; background-image: url("assets/images/motif-fleur-rose-footer.png"); background-size: 216px 94px; }
.apv-box.is-yellow { background-color: #FAD85B; background-image: url("assets/images/motif-rond-beige.png"); background-size: 95px 139px; }
.apv-fiche { background-image: url("assets/images/motif-fleur-beige.png"); background-size: 216px 94px; }

/* Symbole « neurones » en puces, pastilles et filigranes */
.apv-hero-card { position: relative; }
.apv-hero-card::after { content: ""; position: absolute; top: -40px; right: -34px; width: 96px; height: 100px; background: url("assets/images/symbole-jaune.png") center/contain no-repeat; transform: rotate(14deg); pointer-events: none; }
.apv-hero-card li { padding-left: 38px; min-height: 28px; line-height: 28px; }
.apv-hero-card li::before { top: 0; width: 26px; height: 27px; border-radius: 0; background: url("assets/images/symbole-rose.png") center/contain no-repeat; }
.apv-hero-card li:nth-child(2)::before { background: url("assets/images/symbole-bleu.png") center/contain no-repeat; }
.apv-hero-card li:nth-child(3)::before { background: url("assets/images/symbole-jaune.png") center/contain no-repeat; }

.apv-eyebrow { display: flex; align-items: center; gap: 10px; }
.apv-eyebrow::before { content: ""; flex: none; width: 30px; height: 31px; background: url("assets/images/symbole-rose.png") center/contain no-repeat; }
.apv-eyebrow.is-bleu::before { background-image: url("assets/images/symbole-bleu.png"); }

.apv-card { overflow: hidden; }
.apv-card::before { content: ""; position: absolute; top: -10px; right: -12px; width: 78px; height: 82px; background: url("assets/images/symbole-rose.png") center/contain no-repeat; opacity: .16; transform: rotate(18deg); pointer-events: none; }
.apv-card.is-tool::before { background-image: url("assets/images/symbole-bleu.png"); width: 64px; height: 67px; }

.apv-about figure { background-color: #FFFFFF; background-image: url("assets/images/motif-rond-vert.png"); background-size: 95px 139px; padding: 48px 32px; }
.apv-about figure img { width: 68%; height: auto; aspect-ratio: 1 / 1; border-radius: 50%; box-shadow: 0 10px 30px rgba(31,42,48,.15); }

.apv-contact { position: relative; overflow: hidden; }
.apv-contact::after { content: ""; position: absolute; right: -70px; bottom: -90px; width: 300px; height: 315px; background: url("assets/images/symbole-jaune.png") center/contain no-repeat; transform: rotate(-14deg); pointer-events: none; }
.apv-contact > * { position: relative; z-index: 1; }

.apv-aside { position: relative; }
.apv-aside::before { content: ""; position: absolute; top: -34px; right: -22px; width: 84px; height: 88px; background: url("assets/images/symbole-rose.png") center/contain no-repeat; transform: rotate(14deg); pointer-events: none; }

/* Catégorie Communication et relations (vert) */
.apv-card.is-vert { border-top-color: #B7E7B7; }
.apv-card.is-vert::before { background-image: url("assets/images/symbole-vert.png"); }
.apv-eyebrow.is-vert::before { background-image: url("assets/images/symbole-vert.png"); }

/* Carte ComColors : barre des 6 couleurs et diagramme (charte ComColors, mars 2023) */
.apv-card.is-comcolors { border-top: 0; padding-top: 36px; }
.apv-card.is-comcolors::before { background-image: url("assets/images/comcolors-diagramme.png"); top: -14px; right: -14px; width: 96px; height: 96px; opacity: .18; transform: none; }
.apv-card.is-comcolors::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: url("assets/images/comcolors-barre.png") center/100% 100% no-repeat; }
.apv-cc-logo { margin: 6px 0 10px 8px; }
.apv-cc-logo img { height: 34px; width: auto; }

/* Logos réseaux (CJD, Les entreprises s'engagent) */
.apv-networks { gap: 20px 28px; align-items: center; }
.apv-trust .apv-net-cjd img { height: 96px; width: auto; }
.apv-trust .apv-net-lee img { height: 72px; width: auto; }