/* =================================================================
   Permisdelouer — Page « Fonctionnalités » (blocs natifs)
   Complète landing.css / landing-native.css : ne définit que ce que
   les blocs natifs ne savent pas exprimer (rangées zig-zag, scènes
   d'illustration et les 7 mini-animations CSS/SVG).
   S'appuie sur les variables de landing.css (--brand-*, --mint-*,
   --ink*, --line, --card, --surface-2, --r-*, --ease-out, --shadow-*).
   Toutes les animations sont neutralisées via prefers-reduced-motion.
   ================================================================= */

/* ---------- Kicker de section (avec filet) ----------------------- */
.pdl-section-kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}
.pdl-section-kicker::before {
	content: "";
	width: 26px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	opacity: 0.6;
}

/* ---------- Liens de saut (en-tête de page) ---------------------- */
.pdl-jump .wp-block-button__link { box-shadow: none; }

/* ---------- Rangées de fonctionnalités (zig-zag) ----------------- */
/* Chaque rangée est un wp:columns (flex). L'ordre visuel est porté par
   le markup ; sur mobile on force le texte en premier. */
.pdl-feat-row { align-items: center; }

.pdl-feat-index {
	display: inline-block;
	font-weight: 600;
	font-size: 0.72rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ink-mute);
}
.pdl-feat-index strong { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--brand-300); letter-spacing: -0.02em; margin-right: 0.5rem; vertical-align: -0.18em; }
.pdl-feat-dark .pdl-feat-index { color: var(--brand-200); }
.pdl-feat-dark .pdl-feat-index strong { color: var(--brand-400); }

.pdl-feat-copy h3 { font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.12; }
.pdl-feat-copy > .pdl-feat-desc { margin-top: 0.9rem; font-size: 1.05rem; color: var(--ink-soft); max-width: 34rem; }
.pdl-feat-dark :is(h2, h3) { color: #fff; }
.pdl-feat-dark .pdl-feat-desc { color: var(--brand-100); }

/* Puces des rangées (case cochée mint) */
.pdl-feat-points { list-style: none; padding-left: 0; margin: 1.2rem 0 0; }
.pdl-feat-points li {
	position: relative;
	padding-left: 1.7rem;
	margin-bottom: 0.6rem;
	font-size: 0.95rem;
	color: var(--ink-soft);
}
.pdl-feat-points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.32em;
	width: 15px;
	height: 15px;
	border-radius: 5px;
	background: var(--mint-100);
	border: 1.5px solid var(--mint-200);
}
.pdl-feat-points li::after {
	content: "";
	position: absolute;
	left: 4.5px;
	top: 0.5em;
	width: 5px;
	height: 8px;
	border: solid var(--mint-600);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.pdl-feat-dark .pdl-feat-points li { color: var(--brand-100); }
.pdl-feat-dark .pdl-feat-points li::before { background: oklch(100% 0 0 / 0.08); border-color: var(--mint-400); }
.pdl-feat-dark .pdl-feat-points li::after { border-color: var(--mint-400); }

/* ---------- Scène / carte porteuse d'illustration ---------------- */
.feat-stage {
	--stage-bg: var(--card);
	--stage-line: var(--line);
	--stage-soft: var(--surface-2);
	position: relative;
	border-radius: var(--r-lg);
	background: var(--stage-bg);
	border: 1px solid var(--stage-line);
	box-shadow: var(--shadow-lg);
	padding: clamp(1.5rem, 3.5vw, 2.25rem);
	min-height: 300px;
	display: grid;
	place-items: center;
	overflow: hidden;
}
.pdl-feat-dark .feat-stage {
	--stage-bg: oklch(100% 0 0 / 0.05);
	--stage-line: oklch(100% 0 0 / 0.14);
	--stage-soft: oklch(100% 0 0 / 0.06);
	box-shadow: 0 30px 70px oklch(20% 0.08 264 / 0.45);
	backdrop-filter: blur(2px);
}
.feat-stage .halo {
	position: absolute;
	width: 70%;
	height: 70%;
	border-radius: 50%;
	background: radial-gradient(circle, oklch(85% 0.09 264 / 0.35), transparent 70%);
	filter: blur(20px);
	z-index: 0;
}
.pdl-feat-dark .feat-stage .halo { background: radial-gradient(circle, oklch(60% 0.14 264 / 0.5), transparent 70%); }
.feat-stage > .stage-in { position: relative; z-index: 1; width: 100%; }

.stage-caption {
	position: absolute;
	left: 1.1rem;
	bottom: 0.9rem;
	z-index: 2;
	font-size: 0.74rem;
	font-weight: 500;
	color: var(--ink-mute);
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.pdl-feat-dark .stage-caption { color: var(--brand-200); }
.stage-caption .live {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--mint-400);
	box-shadow: 0 0 0 0 var(--mint-400);
	animation: pulse-live 2.4s var(--ease-out) infinite;
}
@keyframes pulse-live {
	0% { box-shadow: 0 0 0 0 oklch(75% 0.15 160 / 0.55); }
	70%, 100% { box-shadow: 0 0 0 7px oklch(75% 0.15 160 / 0); }
}

/* ===============================================================
   ILLUSTRATION 1 — Signatures multi-bailleurs
   =============================================================== */
.sig { display: grid; gap: 0.6rem; max-width: 340px; margin-inline: auto; }
.sig-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.75rem; border-radius: var(--r-md); background: var(--stage-soft); border: 1px solid var(--stage-line); }
.sig-av { position: relative; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--mint-100); color: var(--mint-600); font-size: 0.72rem; font-weight: 600; }
.pdl-feat-dark .sig-av { background: oklch(100% 0 0 / 0.1); color: var(--mint-400); }
.sig-name { font-size: 0.85rem; font-weight: 500; color: var(--ink); }
.pdl-feat-dark .sig-name { color: #fff; }
.sig-state { margin-left: auto; font-size: 0.76rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; color: var(--mint-600); }
.pdl-feat-dark .sig-state { color: var(--mint-400); }
.sig-state svg { width: 15px; height: 15px; }
.sig-row.is-wait { border-style: dashed; }
.sig-row.is-wait .sig-av { background: var(--brand-50); color: var(--brand-600); }
.pdl-feat-dark .sig-row.is-wait .sig-av { background: oklch(100% 0 0 / 0.06); color: var(--brand-200); }
.sig-row.is-wait .sig-state { color: var(--ink-mute); }
.pdl-feat-dark .sig-row.is-wait .sig-state { color: var(--brand-200); }
.sig-ring { position: absolute; inset: -4px; border-radius: 50%; border: 2px dashed var(--brand-300); animation: cf-spin 5s linear infinite; }
.sig-row.is-signed .sig-av { animation: sig-breathe 4.5s var(--ease-out) infinite; }
.sig-row:nth-child(2).is-signed .sig-av { animation-delay: -1.5s; }
.sig-row:nth-child(3).is-signed .sig-av { animation-delay: -3s; }
@keyframes sig-breathe { 50% { transform: scale(1.07); } }
.sig-meter { margin-top: 0.5rem; }
.sig-track { height: 8px; border-radius: 4px; background: var(--stage-soft); border: 1px solid var(--stage-line); overflow: hidden; }
.sig-fill { height: 100%; width: 75%; border-radius: 4px; background: linear-gradient(90deg, var(--mint-400), var(--mint-500)); position: relative; }
.sig-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, oklch(100% 0 0 / 0.5), transparent); transform: translateX(-100%); animation: sig-shimmer 2.8s var(--ease-out) infinite; }
@keyframes sig-shimmer { to { transform: translateX(220%); } }
.sig-legend { display: flex; justify-content: space-between; margin-top: 0.5rem; font-size: 0.76rem; color: var(--ink-mute); }
.pdl-feat-dark .sig-legend { color: var(--brand-200); }
.sig-legend strong { color: var(--brand-700); font-weight: 600; }
.pdl-feat-dark .sig-legend strong { color: #fff; }

/* ===============================================================
   ILLUSTRATION 2 — Génération des CERFA
   =============================================================== */
.cerfa { position: relative; width: 260px; height: 240px; margin-inline: auto; }
.cerfa-doc { position: absolute; width: 168px; height: 214px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-md); padding: 16px 15px; }
.pdl-feat-dark .cerfa-doc { background: #fff; border-color: transparent; }
.cerfa-doc.d3 { top: 14px; left: 8px; transform: rotate(-7deg); opacity: 0.55; }
.cerfa-doc.d2 { top: 8px; left: 40px; transform: rotate(4deg); opacity: 0.8; }
.cerfa-doc.d1 { top: 0; left: 74px; transform: rotate(0deg); overflow: hidden; }
.cerfa-tag { display: inline-block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.03em; color: #fff; background: var(--brand-600); padding: 2px 7px; border-radius: 5px; }
.cerfa-line { height: 6px; border-radius: 3px; background: var(--brand-100); margin-top: 8px; }
.cerfa-line.w1 { width: 90%; } .cerfa-line.w2 { width: 70%; } .cerfa-line.w3 { width: 82%; }
.cerfa-line.w4 { width: 55%; } .cerfa-line.w5 { width: 76%; }
.cerfa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.cerfa-grid span { height: 22px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--line); }
.cerfa-scan { position: absolute; left: 0; right: 0; top: 0; height: 34px; background: linear-gradient(var(--brand-500) 0 0) bottom/100% 2px no-repeat, linear-gradient(180deg, oklch(70% 0.14 264 / 0.18), transparent); animation: cerfa-scan 3.4s var(--ease-out) infinite; }
@keyframes cerfa-scan {
	0% { transform: translateY(-34px); opacity: 0; }
	12%, 80% { opacity: 1; }
	100% { transform: translateY(214px); opacity: 0; }
}
.cerfa-seal { position: absolute; right: -8px; bottom: 6px; z-index: 3; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--mint-100); border: 2px solid var(--mint-200); color: var(--mint-600); box-shadow: var(--shadow-sm); animation: seal-pop 3.4s var(--ease-out) infinite; }
.cerfa-seal svg { width: 26px; height: 26px; }
@keyframes seal-pop {
	0%, 62% { transform: scale(0.4); opacity: 0; }
	74% { transform: scale(1.12); opacity: 1; }
	86%, 100% { transform: scale(1); opacity: 1; }
}

/* ===============================================================
   ILLUSTRATION 3 — Workflow d'instruction (kanban vivant)
   =============================================================== */
.flow { width: 100%; max-width: 360px; margin-inline: auto; }
.flow-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; position: relative; }
.flow-col { background: var(--stage-soft); border: 1px solid var(--stage-line); border-radius: var(--r-md); padding: 0.6rem 0.55rem; min-height: 130px; }
.flow-h { display: flex; align-items: center; gap: 0.35rem; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute); margin-bottom: 0.6rem; }
.pdl-feat-dark .flow-h { color: var(--brand-200); }
.flow-h .d { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-300); }
.flow-h .d.amber { background: var(--amber); }
.flow-h .d.mint { background: var(--mint-400); }
.flow-card { border-radius: 8px; padding: 0.45rem 0.5rem; margin-bottom: 0.45rem; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.pdl-feat-dark .flow-card { background: oklch(100% 0 0 / 0.9); border-color: transparent; }
.flow-ref { font-size: 0.6rem; font-weight: 700; color: var(--brand-600); }
.flow-meta { height: 5px; width: 70%; border-radius: 3px; background: var(--brand-100); margin-top: 4px; }
.flow-card.mint { background: var(--mint-100); border-color: var(--mint-200); }
.flow-card.mint .flow-ref { color: var(--mint-600); }
.flow-card.mint .flow-meta { background: var(--mint-200); }
.flow-runner { position: absolute; top: 34px; left: 0; width: calc((100% - 1.1rem) / 3); border-radius: 8px; padding: 0.45rem 0.5rem; background: var(--brand-600); color: #fff; box-shadow: var(--shadow-md); z-index: 4; animation: flow-move 6s var(--ease-out) infinite; }
.flow-runner .flow-ref { color: #fff; }
.flow-runner .flow-meta { background: oklch(100% 0 0 / 0.5); }
@keyframes flow-move {
	0%, 8% { transform: translateX(0); opacity: 0; }
	14% { opacity: 1; }
	30%, 40% { transform: translateX(0); }
	52%, 62% { transform: translateX(calc(100% + 0.55rem)); }
	74%, 86% { transform: translateX(calc(200% + 1.1rem)); background: var(--mint-500); }
	94%, 100% { transform: translateX(calc(200% + 1.1rem)); opacity: 0; background: var(--mint-500); }
}

/* ===============================================================
   ILLUSTRATION 4 — Délais & relances (anneau de décompte)
   =============================================================== */
.delay { display: flex; align-items: center; gap: 1.4rem; justify-content: center; flex-wrap: wrap; }
.ring { position: relative; width: 150px; height: 150px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .track { fill: none; stroke: var(--stage-soft); stroke-width: 12; }
.ring .prog { fill: none; stroke: var(--brand-500); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 408; stroke-dashoffset: 0; animation: ring-deplete 6s linear infinite, ring-hue 6s linear infinite; }
@keyframes ring-deplete { to { stroke-dashoffset: 350; } }
@keyframes ring-hue {
	0%, 55% { stroke: var(--brand-500); }
	72% { stroke: var(--amber); }
	100% { stroke: var(--alert); }
}
.ring-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-day { font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--ink); line-height: 1; }
.pdl-feat-dark .ring-day { color: #fff; }
.ring-lbl { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); margin-top: 3px; }
.pdl-feat-dark .ring-lbl { color: var(--brand-200); }
.delay-side { display: grid; gap: 0.55rem; }
.relance-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.8rem; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--line); font-size: 0.8rem; font-weight: 500; color: var(--ink-soft); box-shadow: var(--shadow-sm); }
.pdl-feat-dark .relance-pill { background: oklch(100% 0 0 / 0.08); border-color: var(--stage-line); color: #fff; }
.relance-pill svg { width: 16px; height: 16px; color: var(--brand-500); flex: none; }
.relance-pill.alert { color: var(--alert); border-color: #eecac6; background: #fdf3f1; animation: relance-flash 6s var(--ease-out) infinite; }
.pdl-feat-dark .relance-pill.alert { background: oklch(45% 0.16 25 / 0.2); border-color: oklch(60% 0.16 25 / 0.5); color: #ffd9d3; }
.relance-pill.alert svg { color: currentColor; }
@keyframes relance-flash {
	0%, 60% { opacity: 0.35; transform: translateY(4px); }
	72%, 100% { opacity: 1; transform: translateY(0); }
}

/* ===============================================================
   ILLUSTRATION 5 — API REST / JWT (requête → réponse)
   =============================================================== */
.api { width: 100%; max-width: 380px; margin-inline: auto; }
.api-nodes { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.api-node { flex: 1; text-align: center; padding: 0.7rem 0.5rem; border-radius: var(--r-md); background: var(--stage-soft); border: 1px solid var(--stage-line); }
.api-node .ic { display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto 0.4rem; border-radius: 10px; background: oklch(100% 0 0 / 0.1); color: #fff; }
.pdl-feat-light .api-node .ic { background: var(--brand-50); color: var(--brand-600); }
.api-node .nm { font-size: 0.78rem; font-weight: 600; color: #fff; }
.pdl-feat-light .api-node .nm { color: var(--ink); }
.api-wire { position: relative; flex: none; width: 96px; height: 40px; }
.api-wire svg { width: 100%; height: 100%; overflow: visible; }
.api-wire .rail { stroke: var(--brand-400); stroke-width: 2; stroke-dasharray: 1 9; stroke-linecap: round; fill: none; animation: cf-march 2.4s linear infinite; }
.api-packet { position: absolute; top: 50%; left: 0; width: 40px; margin-top: -9px; font-size: 0.52rem; font-weight: 700; text-align: center; color: #fff; padding: 2px 0; border-radius: 5px; background: var(--brand-500); animation: api-req 3.6s var(--ease-out) infinite; }
.api-packet.res { background: var(--mint-500); animation: api-res 3.6s var(--ease-out) infinite; }
@keyframes api-req {
	0% { transform: translateX(0); opacity: 0; }
	8% { opacity: 1; }
	40% { transform: translateX(56px); opacity: 1; }
	46%, 100% { transform: translateX(56px); opacity: 0; }
}
@keyframes api-res {
	0%, 50% { transform: translateX(56px); opacity: 0; }
	58% { opacity: 1; }
	90% { transform: translateX(0); opacity: 1; }
	96%, 100% { transform: translateX(0); opacity: 0; }
}
.api-console { margin-top: 0.9rem; border-radius: var(--r-md); overflow: hidden; background: oklch(24% 0.03 264); border: 1px solid oklch(100% 0 0 / 0.12); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.72rem; }
.api-console .bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.7rem; background: oklch(30% 0.03 264); }
.api-console .bar b { font-family: var(--font-display); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.03em; color: var(--brand-200); text-transform: uppercase; }
.api-console .verb { font-weight: 700; color: var(--mint-400); }
.api-console pre { margin: 0; padding: 0.6rem 0.75rem; color: oklch(88% 0.02 264); line-height: 1.5; white-space: pre; overflow-x: auto; }
.api-console .k { color: var(--brand-300); }
.api-console .s { color: var(--mint-200); }
.jwt-badge { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: auto; padding: 1px 7px; border-radius: 5px; font-family: var(--font-display); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; color: var(--brand-900); background: var(--mint-400); }

/* ===============================================================
   ILLUSTRATION 6 — Notifications navigateur (cloche + toast)
   =============================================================== */
.notif { position: relative; width: 100%; max-width: 340px; margin-inline: auto; min-height: 180px; }
.notif-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; border-radius: var(--r-md); background: var(--stage-soft); border: 1px solid var(--stage-line); }
.notif-dots { display: flex; gap: 4px; }
.notif-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--stage-line); }
.notif-url { flex: 1; height: 20px; border-radius: 6px; background: oklch(100% 0 0 / 0.06); border: 1px solid var(--stage-line); }
.pdl-feat-light .notif-url { background: var(--surface-2); }
.notif-bell { position: relative; display: grid; place-items: center; width: 32px; height: 32px; color: var(--brand-400); }
.pdl-feat-light .notif-bell { color: var(--brand-600); }
.notif-bell svg { width: 20px; height: 20px; transform-origin: top center; animation: bell-ring 4s var(--ease-out) infinite; }
.notif-badge { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; display: grid; place-items: center; padding: 0 3px; border-radius: 8px; background: var(--alert); color: #fff; font-size: 0.58rem; font-weight: 700; animation: badge-pop 4s var(--ease-out) infinite; }
@keyframes bell-ring {
	0%, 55%, 100% { transform: rotate(0); }
	62% { transform: rotate(14deg); } 69% { transform: rotate(-11deg); }
	76% { transform: rotate(7deg); } 83% { transform: rotate(-4deg); } 90% { transform: rotate(0); }
}
@keyframes badge-pop { 0%, 52% { transform: scale(0.6); opacity: 0.4; } 60% { transform: scale(1.2); opacity: 1; } 70%, 100% { transform: scale(1); opacity: 1; } }
.notif-toast { position: absolute; right: 0; top: 58px; width: 250px; z-index: 3; display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.7rem 0.8rem; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-lg); animation: toast-in 4s var(--ease-out) infinite; }
.pdl-feat-dark .notif-toast { background: #fff; border-color: transparent; }
.notif-toast .tic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--brand-600); color: #fff; }
.notif-toast .tic svg { width: 17px; height: 17px; }
.notif-toast .tt { font-size: 0.78rem; font-weight: 600; color: var(--ink); }
.notif-toast .td { font-size: 0.72rem; color: var(--ink-soft); margin-top: 1px; }
@keyframes toast-in {
	0% { transform: translateX(115%); opacity: 0; }
	10%, 78% { transform: translateX(0); opacity: 1; }
	90%, 100% { transform: translateX(115%); opacity: 0; }
}
.notif-center { margin-top: 90px; display: grid; gap: 0.4rem; }
.notif-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--brand-100); padding: 0.45rem 0.6rem; border-radius: 9px; background: var(--stage-soft); border: 1px solid var(--stage-line); }
.pdl-feat-light .notif-item { color: var(--ink-soft); }
.notif-item .nd { width: 7px; height: 7px; border-radius: 50%; background: var(--mint-400); flex: none; }
.notif-item .nd.mute { background: var(--brand-300); }

/* ===============================================================
   ILLUSTRATION 7 — Formulaire de visite éditable (builder)
   =============================================================== */
.builder { width: 100%; max-width: 330px; margin-inline: auto; display: grid; gap: 0.5rem; }
.builder-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.15rem; }
.builder-h .t { font-size: 0.82rem; font-weight: 700; color: var(--ink); }
.pdl-feat-dark .builder-h .t { color: #fff; }
.builder-h .cfg { font-size: 0.68rem; color: var(--ink-mute); display: inline-flex; align-items: center; gap: 0.3rem; }
.pdl-feat-dark .builder-h .cfg { color: var(--brand-200); }
.builder-h .cfg svg { width: 13px; height: 13px; animation: cf-spin 9s linear infinite; }
.b-field { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border-radius: 10px; background: var(--stage-soft); border: 1px solid var(--stage-line); }
.b-grip { flex: none; display: grid; gap: 2px; }
.b-grip i { width: 12px; height: 2px; border-radius: 2px; background: var(--brand-300); }
.b-label { flex: 1; font-size: 0.8rem; color: var(--ink); }
.pdl-feat-dark .b-label { color: #fff; }
.b-check { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: var(--mint-100); color: var(--mint-600); border: 1px solid var(--mint-200); }
.b-check svg { width: 12px; height: 12px; }
.b-switch { flex: none; width: 34px; height: 19px; border-radius: 999px; position: relative; animation: switch-bg 5s var(--ease-out) infinite; }
.b-switch i { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); animation: switch-toggle 5s var(--ease-out) infinite; }
@keyframes switch-toggle { 0%, 45% { left: 2px; } 55%, 100% { left: 17px; } }
@keyframes switch-bg { 0%, 45% { background: var(--brand-200); } 55%, 100% { background: var(--mint-400); } }
.b-add { display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.5rem; border-radius: 10px; border: 1.5px dashed var(--brand-300); color: var(--brand-500); font-size: 0.78rem; font-weight: 600; animation: add-pulse 3s var(--ease-out) infinite; }
.pdl-feat-dark .b-add { color: var(--brand-200); border-color: var(--brand-400); }
.b-add svg { width: 15px; height: 15px; }
@keyframes add-pulse { 50% { border-color: var(--mint-400); color: var(--mint-500); } }
.b-field.b-new { animation: field-enter 5s var(--ease-out) infinite; transform-origin: top; }
@keyframes field-enter {
	0% { opacity: 0; transform: translateY(-8px) scaleY(0.6); }
	14%, 82% { opacity: 1; transform: translateY(0) scaleY(1); }
	96%, 100% { opacity: 0; transform: translateY(-8px) scaleY(0.6); }
}

/* ===============================================================
   Responsive (breakpoints du modèle blocs)
   =============================================================== */
@media (max-width: 900px) {
	.wp-block-columns.is-not-stacked-on-mobile.pdl-feat-row { flex-wrap: wrap !important; }
	.pdl-feat-row > .wp-block-column { flex-basis: 100% !important; }
	.pdl-feat-row > .pdl-feat-copy { order: -1; }
	.feat-stage { min-height: 260px; }
}
@media (max-width: 480px) {
	.delay { flex-direction: column; }
	.notif-toast { width: 210px; }
	.cerfa { transform: scale(0.9); }
}

/* ===============================================================
   Accessibilité — prefers-reduced-motion : tout est neutralisé
   =============================================================== */
@media (prefers-reduced-motion: reduce) {
	.stage-caption .live,
	.sig-ring, .sig-row.is-signed .sig-av, .sig-fill::after,
	.cerfa-scan, .cerfa-seal,
	.flow-runner,
	.ring .prog, .relance-pill.alert,
	.api-wire .rail, .api-packet, .api-packet.res,
	.notif-bell svg, .notif-badge, .notif-toast,
	.builder-h .cfg svg, .b-switch, .b-switch i, .b-add, .b-field.b-new {
		animation: none !important;
	}
	.cerfa-seal { transform: scale(1); opacity: 1; }
	.flow-runner { opacity: 1; transform: translateX(calc(100% + 0.55rem)); }
	.api-packet { opacity: 1; transform: translateX(56px); }
	.api-packet.res { opacity: 0; }
	.notif-toast { transform: translateX(0); opacity: 1; }
	.b-switch i { left: 17px; }
	.b-switch { background: var(--mint-400); }
	.b-field.b-new { opacity: 1; transform: none; }
	.ring .prog { stroke-dashoffset: 300; stroke: var(--amber); }
}