/* Guides piliers de l'équipe (includes/guide.php) : lecture longue, confortable, aux couleurs d'Optencis. */
.opx-guide {
	--g-ink: var(--wp--preset--color--ink, #01182A);
	--g-blue: var(--wp--preset--color--blue, #0D36D0);
	--g-ivory: var(--wp--preset--color--ivory, #FEFFFA);
	--g-muted: var(--wp--preset--color--ink-muted, #4F5B66);
	--g-line: var(--wp--preset--color--platinum, #E4E4E6);
	--g-cyan: var(--wp--preset--color--cyan, #1FCDFF);
	--g-gold: var(--wp--preset--color--market-gold, #FFB800);
	color: var(--g-ink);
	margin-block: 0 !important;
}
.opx-guide *, .opx-guide *::before, .opx-guide *::after { box-sizing: border-box; }
.opx-guide__wrap { max-width: 760px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 24px); }

/* En-tête sombre, comme les pages des marchés */
.opx-guide__hero {
	position: relative;
	overflow: hidden;
	padding: clamp(40px, 7vw, 72px) 0 clamp(36px, 6vw, 56px);
	color: var(--g-ivory);
	background: radial-gradient(1000px 360px at 85% -10%, rgba(31, 205, 255, .18), transparent 60%), linear-gradient(180deg, var(--g-ink) 0%, #06205e 70%, var(--g-blue) 150%);
}
.opx-guide__hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 58%, rgba(255, 255, 255, .05) 58%, rgba(255, 255, 255, .05) 72%, transparent 72%); }
.opx-guide__hero .opx-guide__wrap { position: relative; z-index: 1; }
.opx-guide__eyebrow { margin: 0; color: var(--g-cyan); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.opx-guide__title { margin: 12px 0 14px; color: inherit; font-size: clamp(32px, 5.4vw, 52px); font-weight: 500; letter-spacing: -.02em; line-height: 1.08; }
.opx-guide__lead { margin: 0; color: rgba(254, 255, 250, .82); font-size: clamp(17px, 2.2vw, 19px); line-height: 1.6; }
.opx-guide__meta { margin: 18px 0 0; color: rgba(254, 255, 250, .6); font-size: 13px; }
.opx-guide--paged { padding-top: var(--wp--preset--spacing--50, 40px); }
.opx-guide__paged { margin: 0; font-size: clamp(28px, 4vw, 36px); font-weight: 500; }

/* Barre de progression de lecture (view.js), sous la barre d'admin si elle est là */
.opx-guide__progress { position: fixed; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; z-index: 100; height: 4px; background: rgba(13, 54, 208, .12); opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.opx-guide__progress.is-visible { opacity: 1; }
.opx-guide__progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--g-blue), var(--g-cyan)); transform: scaleX(0); transform-origin: left; }
@media (prefers-reduced-motion: reduce) { .opx-guide__progress { transition: none; } }

/* Texte */
.opx-guide__body { padding-top: 32px; font-size: 17px; line-height: 1.7; }
.opx-guide__body p, .opx-guide__body li { max-width: 68ch; }
.opx-guide__body p { margin: 0 0 1em; }
.opx-guide__body a { color: var(--g-blue); text-underline-offset: 3px; }
.opx-guide__section { padding-top: 12px; scroll-margin-top: 24px; }
.opx-guide__section h2 { margin: 40px 0 16px; font-size: clamp(24px, 3.4vw, 30px); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.opx-guide__body ul, .opx-guide__body ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.opx-guide__body li { margin-bottom: .5em; }
.opx-guide__body li::marker { color: var(--g-blue); font-weight: 700; }

/* « In short » et sommaire */
.opx-guide__short { margin: 0 0 20px; padding: 20px 24px; border-left: 4px solid var(--g-blue); border-radius: 0 14px 14px 0; background: #EEF1FC; }
.opx-guide__short-title, .opx-guide__toc-title { margin: 0 0 10px !important; color: var(--g-blue); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.opx-guide__short ul { margin: 0; }
.opx-guide__short li:last-child { margin-bottom: 0; font-weight: 600; }
.opx-guide__toc { margin: 0 0 8px; padding: 18px 24px; border: 1px solid var(--g-line); border-radius: 14px; background: #fff; }
.opx-guide__toc ol { columns: 2; column-gap: 32px; margin: 0; font-size: 15px; }
.opx-guide__toc li { break-inside: avoid; margin-bottom: .35em; }
.opx-guide__toc a { color: var(--g-ink); text-decoration: none; }
.opx-guide__toc a:hover { color: var(--g-blue); text-decoration: underline; }
@media (max-width: 640px) { .opx-guide__toc ol { columns: 1; } }

/* Tableaux */
.opx-guide__table { overflow-x: auto; margin: 0 0 1.4em; border: 1px solid var(--g-line); border-radius: 14px; background: #fff; }
.opx-guide__table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.opx-guide__table th, .opx-guide__table td { padding: 11px 14px; border-bottom: 1px solid var(--g-line); text-align: left; vertical-align: top; }
.opx-guide__table th { color: var(--g-muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: #F6F7FB; }
.opx-guide__table tr:last-child td { border-bottom: 0; }
.opx-guide__table td:last-child { font-variant-numeric: tabular-nums; }
#the-math-nobody-explains tbody tr:nth-child(6) td { background: rgba(13, 54, 208, .07); font-weight: 700; }

/* Formule et règles d'or */
.opx-guide__formula { display: inline-block; padding: 10px 18px; border-radius: 10px; background: var(--g-ink); color: var(--g-ivory); font-size: 18px; font-weight: 700; letter-spacing: .01em; }
#our-3-golden-rules ol { display: grid; gap: 14px; padding: 0; list-style: none; counter-reset: rule; }
#our-3-golden-rules li { counter-increment: rule; position: relative; max-width: none; margin: 0; padding: 20px 22px 20px 70px; border-radius: 16px; background: var(--g-ink); color: rgba(254, 255, 250, .86); }
#our-3-golden-rules li::before { content: counter(rule); position: absolute; top: 18px; left: 22px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(31, 205, 255, .16); color: var(--g-cyan); font-weight: 800; }
#our-3-golden-rules li strong { display: block; margin-bottom: 4px; color: var(--g-ivory); font-size: 18px; }

/* FAQ */
.opx-guide__qa { max-width: 68ch; border-bottom: 1px solid var(--g-line); }
.opx-guide__qa:first-of-type { border-top: 1px solid var(--g-line); }
.opx-guide__qa summary { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 16px 0; cursor: pointer; list-style: none; }
.opx-guide__qa summary::-webkit-details-marker { display: none; }
.opx-guide__qa summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(var(--g-blue), var(--g-blue)) center / 12px 2px no-repeat, linear-gradient(var(--g-blue), var(--g-blue)) center / 2px 12px no-repeat, #EEF1FC; transition: background-size .2s ease; }
.opx-guide__qa[open] summary::after { background-size: 12px 2px, 2px 0, auto; }
.opx-guide__qa summary:focus-visible { outline: 2px solid var(--g-cyan); outline-offset: 4px; border-radius: 6px; }
.opx-guide__qa h3 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.35; }
.opx-guide__qa p { margin: 0 0 18px; color: var(--g-muted); }
@media (prefers-reduced-motion: reduce) { .opx-guide__qa summary::after { transition: none; } }

/* Notes de bas de partie */
.opx-guide__note { padding: 12px 16px; border-radius: 10px; background: #F6F7FB; color: var(--g-muted); font-size: 14px; }
.opx-guide__risk { margin-top: 32px !important; padding: 12px 16px; border-left: 3px solid var(--g-gold); border-radius: 0 8px 8px 0; background: rgba(255, 184, 0, .08); color: var(--g-muted); font-size: 13px; }

/* Appel vers Optencis Edge */
.opx-edge { position: relative; overflow: hidden; margin: 36px 0; padding: 28px; border-radius: 20px; background: linear-gradient(160deg, var(--g-ink) 0%, #06205e 70%, var(--g-blue) 140%); color: var(--g-ivory); }
.opx-edge::after { content: ""; position: absolute; top: -60px; right: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(31, 205, 255, .28), transparent 70%); pointer-events: none; }
.opx-edge > * { position: relative; z-index: 1; max-width: 560px !important; }
.opx-edge__eyebrow { margin: 0 0 8px !important; color: var(--g-cyan); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.opx-edge__title { margin: 0 0 8px !important; font-size: clamp(22px, 3vw, 26px); font-weight: 600; line-height: 1.25; }
.opx-edge__text { margin: 0 0 18px !important; color: rgba(254, 255, 250, .78); font-size: 15px; }
.opx-edge__action { margin: 0 0 12px !important; }
.opx-edge__btn { display: inline-block; padding: 13px 22px; border-radius: 999px; background: var(--g-ivory); color: var(--g-blue) !important; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.opx-edge__btn:hover { background: #fff; }
.opx-edge__fine { margin: 0 !important; color: rgba(254, 255, 250, .5); font-size: 12px; }