/* Styles propres aux pages publiques du CMS (complètent app.css). */

/* Motif « lignes de champ » */
.cms-field { position: absolute; pointer-events: none; overflow: visible; }
.cms-field path { fill: none; stroke: currentColor; stroke-width: 0.45; }
.cms-rule { position: relative; height: 56px; color: var(--color-gold); }
.cms-rule .cms-field { inset: 0; width: 100%; height: 100%; }
.cms-rule .cms-field path { stroke-width: 1; vector-effect: non-scaling-stroke; }

@media (prefers-reduced-motion: no-preference) {
    .cms-field.is-drawing path {
        stroke-dasharray: 1;
        animation: cms-draw 2.4s cubic-bezier(.3, .6, .2, 1) both;
        animation-delay: var(--delay, 0s);
    }
}

/* Le tracé part de l'état visible : l'animation le redessine, il n'est jamais caché au repos. */
@keyframes cms-draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

/* Barre de progression de lecture */
.cms-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; pointer-events: none; }
.cms-progress span { display: block; height: 100%; background: var(--color-accent-ink); transform: scaleX(0); transform-origin: 0 50%; }

/* Onglets : état sélectionné */
.cms-tab[aria-selected="true"] { background: #fff; box-shadow: inset 0 0 0 1px rgb(18 49 43 / 0.12); color: var(--color-pine-800); }
.cms-dark .cms-tab[aria-selected="true"] { background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); color: #fff; }

/* Carrousels : barre de défilement discrète */
.cms-carousel { scrollbar-width: thin; scrollbar-color: rgb(18 49 43 / 0.25) transparent; scroll-padding-inline: 1rem; }
.cms-carousel:focus-visible { outline-offset: 4px; }

/* FAQ : pas de triangle natif */
.cms-faq summary::-webkit-details-marker { display: none; }

/* Liens et code dans le texte riche sur fond sombre */
.cms-dark .prose-mt a { color: var(--color-gold-soft); }
.cms-dark .prose-mt h2, .cms-dark .prose-mt h3 { color: #fff; }