/*
 * Thème ZAFER — mise en forme des sections.
 * Couleurs, polices et tailles : variables de theme.json (--wp--preset--*).
 * Règle : jamais de 100vw (la barre de défilement provoquerait un débordement horizontal) ;
 * les sections pleine largeur passent par alignfull.
 */

:root {
	--zafer-bleu: var(--wp--preset--color--bleu);
	--zafer-nuit: var(--wp--preset--color--nuit);
	--zafer-lavande: var(--wp--preset--color--lavande);
	--zafer-lavande-pale: var(--wp--preset--color--lavande-pale);
	--zafer-carte: var(--wp--custom--radius--carte, 14px);
	--zafer-pilule: var(--wp--custom--radius--pilule, 999px);
	--zafer-ombre: 0 6px 20px rgba(15, 28, 77, 0.10);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { overflow-wrap: break-word; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
.zafer-main > * + * { margin-block-start: 0; }
[id] { scroll-margin-top: 1rem; }

:focus-visible { outline: 3px solid var(--zafer-lavande); outline-offset: 3px; }

/* Surtitre : petit libellé au-dessus des titres (remplace le mono 10 px, trop petit). */
.zafer-surtitre {
	font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--zafer-bleu); margin-bottom: 0.25rem;
}
.zafer-chapo { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--gris); max-width: 46rem; }

/* Boutons secondaires (contour) */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent; color: currentColor; border: 2px solid currentColor;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: rgba(171, 176, 255, 0.18); }

/* ---------- En-tête (bandeau bleu de la maquette) ---------- */
.zafer-entete { background: var(--zafer-bleu); color: #fff; padding-block: 0.9rem; }
.zafer-entete__barre { gap: 1rem 2rem; }
.zafer-entete__logo { display: inline-flex; align-items: center; gap: 1.1rem; color: #fff; text-decoration: none; }
.zafer-entete__logo img { display: block; width: 150px; height: auto; }
.zafer-entete__nom {
	font-family: var(--wp--preset--font-family--manuscrite); font-size: 1.75rem; line-height: 1;
	color: var(--zafer-lavande); letter-spacing: 0.02em; text-transform: uppercase;
	padding-left: 1.1rem; border-left: 1px solid rgba(255, 255, 255, 0.3);
}
.zafer-nav { color: #fff; font-weight: 600; }
.zafer-nav a { color: #fff; text-decoration: none; }
.zafer-nav a:hover, .zafer-nav a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.zafer-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--zafer-bleu); color: #fff; padding: 1.5rem;
}
.zafer-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { font-size: 1.25rem; gap: 1rem; }
@media (max-width: 480px) {
	.zafer-entete__logo img { width: 110px; }
	.zafer-entete__nom { font-size: 1.35rem; padding-left: 0.8rem; }
}

/* ---------- Accueil : accroche (N0) ---------- */
.zafer-hero {
	position: relative; overflow: hidden; isolation: isolate;
	background: var(--zafer-bleu); color: #fff;
	padding-block: var(--wp--preset--spacing--60);
}
.zafer-hero::before {
	content: ""; position: absolute; z-index: -1; inset: -20% -10% auto auto; width: 60%; aspect-ratio: 1;
	background: radial-gradient(circle, rgba(171, 176, 255, 0.35) 0%, rgba(171, 176, 255, 0) 65%);
}
.zafer-hero .zafer-surtitre { color: var(--zafer-lavande); }
.zafer-hero__titre { color: #fff; font-size: var(--wp--preset--font-size--huge); line-height: 1.05; }
.zafer-hero__titre em { font-style: normal; color: var(--zafer-lavande); font-size: 0.62em; display: inline-block; margin-top: 0.3em; }
.zafer-hero__intro { font-size: var(--wp--preset--font-size--large); color: rgba(255, 255, 255, 0.9); max-width: 36rem; margin-inline: auto !important; }
.zafer-hero__portes { gap: 1rem 1.5rem; margin-top: var(--wp--preset--spacing--50) !important; }
.zafer-hero__portes .wp-block-button__link { min-width: 15rem; text-align: center; font-size: 1.05rem; }

/* ---------- Je découvre Isodom : personae ---------- */
.zafer-decouvrir { background: var(--zafer-lavande-pale); padding-block: var(--wp--preset--spacing--60); }
/* En-tête de section : titre à gauche, chapô à droite (aligné sur la même colonne). */
.zafer-section-tete { gap: 1rem 3rem; }
.zafer-section-tete__titre { flex: 1 1 28rem; }
.zafer-section-tete h2 { font-size: var(--wp--preset--font-size--xx-large); margin: 0; }
.zafer-section-tete h2 em { font-style: normal; color: #5A5FD6; }
.zafer-section-tete .zafer-chapo { flex: 1 1 20rem; max-width: 26rem; margin: 0; font-size: 1.0625rem; }
.zafer-personae { gap: 1.5rem; margin-top: var(--wp--preset--spacing--50) !important; }
.zafer-carte {
	background: #fff; border-radius: var(--zafer-carte); box-shadow: var(--zafer-ombre);
	padding: 1.5rem;
}
.zafer-persona {
	display: grid; grid-template-columns: 3.25rem 1fr; grid-template-rows: auto auto 1fr auto; column-gap: 1rem;
	border-top: 4px solid var(--zafer-lavande); transition: transform .15s ease, box-shadow .15s ease;
}
.zafer-persona:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15, 28, 77, 0.14); }
@media (prefers-reduced-motion: reduce) { .zafer-persona { transition: none; } .zafer-persona:hover { transform: none; } }
.zafer-persona > * { margin: 0 !important; }
.zafer-persona__initiale {
	grid-row: span 2; width: 3.25rem; height: 3.25rem; border-radius: 50%;
	display: grid; place-items: center; background: var(--zafer-lavande); color: var(--zafer-bleu);
	font-weight: 800; font-size: 1.25rem;
}
.zafer-persona__nom { font-family: var(--wp--preset--font-family--texte); font-weight: 800; font-size: 1.125rem; color: var(--wp--preset--color--encre); align-self: end; }
.zafer-persona__role { color: var(--wp--preset--color--gris); font-size: 0.9375rem; }
/* La citation : le verbatim, en manuscrite, comme dans la maquette. */
.zafer-persona__citation {
	grid-column: 1 / -1; margin-top: 1.25rem !important; position: relative; padding-left: 1.75rem;
	font-family: var(--wp--preset--font-family--manuscrite); font-size: 1.3rem; line-height: 1.35; color: var(--zafer-bleu);
}
.zafer-persona__citation::before {
	content: "«"; position: absolute; left: 0; top: -0.2em; font-size: 2rem; line-height: 1; color: var(--zafer-lavande);
}
.zafer-persona__action { grid-column: 1 / -1; margin-top: 1.25rem !important; padding-top: 1rem; border-top: 1px solid #ECEDF8; font-weight: 700; font-size: 0.9375rem; }
.zafer-persona__action a { text-decoration: none; color: var(--zafer-bleu); }
.zafer-persona__action a:hover, .zafer-persona__action a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

.zafer-bandeau-vert {
	margin-top: var(--wp--preset--spacing--50) !important;
	background: var(--wp--preset--color--vert-pale); color: var(--wp--preset--color--vert);
	border: 1px solid #C4E8DB; border-radius: var(--zafer-carte); padding: 1.5rem 1.75rem; gap: 1.25rem; font-size: 1.0625rem;
}
.zafer-bandeau-vert strong { font-family: var(--wp--preset--font-family--manuscrite); font-size: 1.35rem; font-weight: 700; margin-right: 0.25rem; }
.zafer-bandeau-vert figure { margin: 0; flex: none; }
.zafer-bandeau-vert p { margin: 0; }

/* ---------- Bandeau ZAFI ---------- */
.zafer-zafi-section { background: #fff; padding-block: var(--wp--preset--spacing--50); }
.zafer-zafi {
	background: var(--zafer-lavande-pale); border: 1px solid #DCDFFF; border-radius: var(--zafer-carte);
	padding: 1.5rem; gap: 1.25rem; flex-wrap: nowrap !important;
}
.zafer-zafi__avatar {
	flex: none; width: 4rem; height: 4rem; border-radius: 50%; background: var(--zafer-bleu);
	display: grid; place-items: center;
}
.zafer-zafi__avatar img { width: 2.6rem; height: auto; }
.zafer-zafi__texte { flex: 1; min-width: 0; }
.zafer-zafi__titre { font-family: var(--wp--preset--font-family--texte); font-weight: 800; font-size: 1.25rem; color: var(--wp--preset--color--encre); margin: 0; }
.zafer-zafi__titre em { color: var(--zafer-bleu); }
.zafer-zafi__exemples { gap: 0.5rem 0.75rem; margin-top: 0.75rem !important; }
.zafer-zafi__exemples .wp-block-button__link { color: var(--zafer-bleu); font-weight: 600; font-size: 0.9375rem; padding: 0.5rem 1rem; border-width: 1px; background: #fff; }
.zafer-zafi-section[hidden] { display: none; }
@media (max-width: 600px) { .zafer-zafi { flex-wrap: wrap !important; } }

/* ---------- Manifeste ---------- */
.zafer-manifeste { background: var(--zafer-nuit); color: #fff; padding-block: var(--wp--preset--spacing--60); text-align: center; }
.zafer-manifeste .zafer-surtitre { color: var(--zafer-lavande); }
.zafer-manifeste h2 { color: #fff; font-size: var(--wp--preset--font-size--xx-large); }
.zafer-manifeste h2 em { font-style: normal; color: var(--zafer-lavande); }

/* ---------- Déjà une Fourmi ---------- */
.zafer-connexion { background: var(--wp--preset--color--beige); padding-block: var(--wp--preset--spacing--60); }
.zafer-connexion__carte {
	background: var(--zafer-bleu); color: #fff; border-radius: var(--zafer-carte);
	padding: clamp(1.5rem, 5vw, 3.5rem); gap: 1.5rem 3rem;
}
.zafer-connexion__carte > div:first-child { flex: 1 1 22rem; }
.zafer-connexion .zafer-surtitre { color: var(--zafer-lavande); }
.zafer-connexion h2 { color: #fff; font-size: var(--wp--preset--font-size--xx-large); margin-top: 0; }
.zafer-connexion h2 em { font-style: normal; color: var(--zafer-lavande); }

/* ---------- Pages ---------- */
.zafer-bandeau-page { background: var(--zafer-bleu); color: #fff; padding-block: var(--wp--preset--spacing--50); }
.zafer-bandeau-page .wp-block-post-title { color: #fff; margin: 0; }
.zafer-contenu { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); }

/* Message du plugin de restriction (visiteur non connecté). */
.members-access-error {
	max-width: 40rem; margin-inline: auto; text-align: center; font-size: 1.125rem;
	background: var(--zafer-lavande-pale); border-radius: var(--zafer-carte); padding: 2rem 1.5rem;
}
.members-access-error a { border-radius: var(--zafer-pilule) !important; }

/* Ancien bloc HTML « mon parcours » (.mz) : il se mettait en 100vw et répétait l'en-tête.
   Neutralisé ici tant qu'il n'est pas remplacé par le motif « Espace Fourmi ». */
.wp-block-post-content .mz {
	width: auto !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important;
	min-height: 0 !important; border-radius: var(--zafer-carte);
}
.wp-block-post-content .mz-head { display: none !important; }

/* ---------- Espace Fourmi (UE2) ---------- */
.zafer-espace > h2 { margin-top: 0; }
.zafer-espace__cartes { gap: 1.5rem; margin-top: var(--wp--preset--spacing--40) !important; }
.zafer-espace .zafer-carte { border: 1px solid #E4E6F5; }
.zafer-carte__tete { gap: 1rem; }
.zafer-carte__tete figure { margin: 0; flex: none; }
.zafer-carte__tete h3 { font-family: var(--wp--preset--font-family--texte); font-weight: 800; font-size: 1.25rem; color: var(--wp--preset--color--encre); margin: 0; }
.zafer-carte__chapo { color: var(--wp--preset--color--gris); }
.zafer-situations__liste { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.75rem; }
.zafer-situations__liste .wp-block-button { width: 100%; }
.zafer-situations__liste .wp-block-button__link { display: block; width: 100%; text-align: center; font-weight: 600; }
.zafer-questions__liste { flex-direction: column; align-items: stretch; gap: 0.6rem; margin-top: 1rem; }
.zafer-questions__liste .wp-block-button { width: 100%; }
.zafer-questions__liste .wp-block-button__link {
	display: block; width: 100%; text-align: left; border-radius: 10px;
	background: var(--wp--preset--color--creme); color: var(--wp--preset--color--ocre); font-weight: 600;
}
.zafer-questions__liste .wp-block-button__link:hover { background: #FFE9B8; color: #6B4600; }
.zafer-questions__plus { margin-top: 0.75rem; }
.zafer-questions__plus summary { cursor: pointer; color: var(--wp--preset--color--ocre); font-weight: 700; }
.zafer-espace .zafer-zafi { margin-top: var(--wp--preset--spacing--50); }
.zafer-espace .zafer-zafi figure { margin: 0; flex: none; }

.zafer-carte__lien { margin-top: 1.25rem; font-weight: 700; }
.zafer-carte__lien a { text-decoration: none; }
.zafer-carte__lien a:hover, .zafer-carte__lien a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Mon parcours (UE2) : itinéraire en 5 repères ---------- */
.zafer-parcours {
	background-color: #FAF9F4; border: 1px solid #E4E2D8; border-radius: var(--zafer-carte);
	background-image: linear-gradient(rgba(0, 0, 0, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .02) 1px, transparent 1px);
	background-size: 24px 24px; padding: clamp(1.25rem, 4vw, 3rem);
}
.zafer-parcours > h2 { margin-top: 0; font-size: var(--wp--preset--font-size--xx-large); }
.zafer-parcours > h2 em { font-style: normal; color: #5A5FD6; }
.zafer-parcours__retour { font-size: 0.9375rem; font-weight: 700; margin: 0 0 1rem; }
.zafer-parcours__retour a { text-decoration: none; }
.zafer-etapes {
	--zafer-point: 3rem; --zafer-haut: 1.25rem; --zafer-bas: 4.25rem;
	position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem;
	margin-top: var(--wp--preset--spacing--50) !important;
}
/* Chemin en pointillés : une vague qui passe par le centre de chaque point (haut, bas, haut…). */
.zafer-etapes::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6.5rem; z-index: 0; pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 104' preserveAspectRatio='none'%3E%3Cpath d='M0,44 C50,44 50,20 100,20 S250,68 300,68 S450,20 500,20 S650,68 700,68 S850,20 900,20 S950,40 1000,40' fill='none' stroke='%232C31A3' stroke-width='3' stroke-dasharray='9 7' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* margin : 0 annule l'espacement « flow » de WordPress, qui décalerait les points par rapport au chemin. */
.zafer-etapes > .zafer-etape { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; margin: 0 !important; }
.zafer-etape > * { margin: 0 !important; }
.zafer-etape__num {
	width: var(--zafer-point); height: var(--zafer-point); border-radius: 50%; flex: none;
	display: grid; place-items: center; background: var(--zafer-bleu); color: #fff; font-weight: 800;
	box-shadow: 0 0 0 5px #FAF9F4; margin-top: calc(var(--zafer-haut) - var(--zafer-point) / 2) !important;
}
.zafer-etape:nth-child(even) .zafer-etape__num { margin-top: calc(var(--zafer-bas) - var(--zafer-point) / 2) !important; background: #5A5FD6; }
.zafer-etape__carte {
	margin-top: 1rem !important; width: 100%; flex: 1; display: flex; flex-direction: column;
	background: #fff; border-radius: var(--zafer-carte); box-shadow: var(--zafer-ombre); padding: 1.25rem; text-align: center;
}
.zafer-etape:nth-child(odd) .zafer-etape__carte { margin-bottom: calc(var(--zafer-bas) - var(--zafer-haut)) !important; }
.zafer-etape__carte > * { margin: 0 !important; }
.zafer-etape__titre { font-size: 1.35rem; color: var(--zafer-bleu); }
.zafer-etape__texte { margin-top: 0.5rem !important; color: var(--wp--preset--color--gris); font-size: 0.9375rem; flex: 1; }
.zafer-etape__action { margin-top: 1rem !important; font-weight: 700; font-size: 0.9375rem; }
.zafer-etape__action a { text-decoration: none; }
.zafer-etape__action a:hover, .zafer-etape__action a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
/* Mobile et tablette : frise verticale. */
@media (max-width: 960px) {
	.zafer-etapes { grid-template-columns: 1fr; gap: 1rem; }
	.zafer-etapes::before {
		background: none; height: auto; bottom: 1.5rem; top: 1.5rem; left: calc(var(--zafer-point) / 2 - 1.5px); right: auto;
		border-left: 3px dashed var(--zafer-bleu);
	}
	.zafer-etapes > .zafer-etape { flex-direction: row; align-items: flex-start; gap: 1rem; }
	.zafer-etape__num, .zafer-etape:nth-child(even) .zafer-etape__num { margin-top: 0.75rem !important; }
	.zafer-etape__carte, .zafer-etape:nth-child(odd) .zafer-etape__carte { margin: 0 !important; text-align: left; }
}

/* 404 */
.zafer-404 { padding-block: var(--wp--preset--spacing--60); }
.zafer-404 .is-style-outline > .wp-block-button__link { color: var(--zafer-bleu); }
.zafer-404__image img { background: var(--zafer-lavande-pale); border-radius: var(--zafer-carte); padding: 1rem; }

/* ---------- Pied de page ---------- */
.zafer-pied {
	background: var(--zafer-nuit); color: rgba(255, 255, 255, 0.85);
	padding-block: var(--wp--preset--spacing--50) 0; font-size: 0.9375rem;
}
.zafer-pied a { color: #fff; }
.zafer-pied a:hover { color: var(--zafer-lavande); }
.zafer-pied__grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.zafer-pied__grille img { width: 140px; height: auto; }
.zafer-pied__nom { font-family: var(--wp--preset--font-family--manuscrite); font-size: 1.5rem; color: var(--zafer-lavande); text-transform: uppercase; margin: 0.75rem 0 0; }
.zafer-pied__slogan { font-family: var(--wp--preset--font-family--manuscrite); color: #fff; margin: 0.25rem 0; }
.zafer-pied__titre { font-weight: 800; color: #fff; margin: 0 0 0.5rem; }
.zafer-pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
/* Réserve à droite pour la bulle ZAFI flottante, qui ne doit masquer aucun texte. */
.zafer-pied__bas {
	border-top: 1px solid rgba(255, 255, 255, 0.15); margin-top: 2rem; padding: 1.25rem 0 1.5rem;
	padding-right: 88px; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 781px) {
	.zafer-pied__grille { grid-template-columns: 1fr; }
	.zafer-pied__bas { padding-bottom: 96px; padding-right: 0; }
}

/* ---------- Widget du plugin POC Chatbot, habillé en ZAFI ---------- */
/* « body » : le CSS du plugin est chargé après celui du thème. */
body .poc-chatbot {
	--pcb-primary: #2C31A3;
	--pcb-accent: #2C31A3;
	--pcb-user: #F3F4FF;
	--pcb-bot: #F1EFE8;
	--pcb-muted: #5F5E5A;
	--pcb-radius: 14px;
	font-family: var(--wp--preset--font-family--texte);
}
body .poc-chatbot__launcher {
	font-size: 0; color: transparent;
	background: #2C31A3 url("../img/fourmi-blanche.png") center / 62% auto no-repeat;
	box-shadow: 0 0 0 3px #fff, 0 8px 20px rgba(15, 28, 77, 0.35);
}
body .poc-chatbot__launcher:focus-visible { outline-color: var(--zafer-lavande); }
body .poc-chatbot__title { font-family: var(--wp--preset--font-family--manuscrite); font-weight: 700; font-size: 1.25rem; }
body .poc-chatbot__send { border-radius: var(--zafer-pilule); padding: 0 1.1rem; }
body .poc-chatbot__input { border-radius: 10px; }
body .poc-chatbot__input:focus { outline-color: var(--zafer-lavande); }