/* ==========================================================================
   ZEGA TECHNOLOGY — modules.css (ZT-02)
   --------------------------------------------------------------------------
   Extension du Design System G3 : composants du nouveau socle (fiches, catalogues,
   galerie, vidéo, filtres, FAQ, flux, contact, zones prévues). Charger APRÈS
   tokens.css et components.css, qui ne sont PAS modifiés. Aucune valeur brute
   hors tokens (sauf géométrie propre à un composant). Mobile-first : les règles
   de base valent pour le mobile, les @media élargissent.
   Points de rupture officiels (tokens.css) : 900px, 480px.
   ========================================================================== */

/* ---------- Mise en page ------------------------------------------------- */
/* Section « étroite » : le conteneur garde la largeur standard (bord gauche aligné avec les autres
   sections) ; seul son contenu est limité à une largeur de lecture confortable. */
.container--narrow > * { max-width: 760px; }
.container--narrow > .zt-centered { margin-left: auto; margin-right: auto; }
.section-head { max-width: 640px; margin-bottom: var(--space-xl); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.zt-section-cta { text-align: center; margin-top: var(--space-xl); }
.zt-note { margin-top: var(--space-md); font-style: italic; }
.zt-cta__intro { max-width: 560px; margin: 0 auto; }

/* ---------- Hero de page ------------------------------------------------- */
.zt-hero { min-height: 0; padding: var(--space-3xl) var(--gutter-mobile) var(--space-2xl); }
.zt-hero--home { min-height: 620px; padding-top: var(--space-4xl); }
.zt-hero--page { min-height: 420px; }
.zt-hero--compact { padding-top: var(--space-2xl); padding-bottom: var(--space-xl); }
.zt-hero__inner { position: relative; max-width: 780px; }
.zt-hero--home .zt-hero__inner { max-width: 820px; }
.zt-hero__lead { max-width: 600px; margin: var(--space-sm) auto var(--space-xl); }
.zt-hero__ctas { justify-content: center; }
.zt-hero__badges { justify-content: center; margin-top: var(--space-xl); }
@media (max-width: 900px) {
    .zt-hero--home, .zt-hero--page { min-height: 0; }
}

/* Fil d'Ariane */
.zt-crumbs { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: var(--space-sm); font-size: var(--text-caption); color: var(--text-muted); }
.zt-crumbs li + li::before { content: '/'; margin-right: 6px; opacity: 0.6; }
.zt-crumbs a { color: var(--text-muted); text-decoration: none; }
.zt-crumbs a:hover { color: var(--text-primary); }
.zt-crumbs [aria-current] { color: var(--cyan); }

/* ---------- Navigation : compléments ------------------------------------ */
.zt-dropdown__panel--wide { min-width: 720px; }
.zt-dropdown__all { grid-column: 1 / -1; margin-top: var(--space-2xs); padding: var(--space-2xs) var(--space-xs); }
.zt-mono { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--tracking-wide); }
.zt-mono--sm { width: 36px; height: 36px; font-size: 0.78rem; }
@media (max-width: 1280px) { .zt-dropdown__panel--wide { min-width: 0; } }
.zt-search { position: relative; }
.zt-search > i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.zt-search .input { padding-left: 44px; }
.zt-search-results { list-style: none; margin-top: var(--space-md); display: flex; flex-direction: column; gap: var(--space-3xs); max-height: 50vh; overflow-y: auto; }
.zt-search-results a { display: block; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); text-decoration: none; color: var(--text-primary); }
.zt-search-results a:hover, .zt-search-results a:focus-visible { background: rgba(0, 212, 255, 0.08); }
.zt-search-results small { display: block; color: var(--text-muted); font-size: var(--text-caption); }
.zt-search-results .tag { margin-left: var(--space-2xs); }

/* ---------- Cartes & listes --------------------------------------------- */
.zt-split { align-items: center; gap: var(--space-2xl); }
.zt-split__panel { padding: var(--space-xl); }
.zt-tile { text-align: center; }
.zt-tile .card__icon { margin: 0 auto var(--space-sm); font-size: 0.9rem; }
.zt-feature__title { display: block; color: var(--text-primary); font-weight: 600; }
.zt-feature__accent { display: block; color: var(--cyan); font-size: var(--text-body-sm); }
a.card--feature { text-decoration: none; color: inherit; }
a.card--feature:hover { transform: none; border-color: var(--border-color-strong); }
.zt-cards--compact { gap: var(--space-sm); }
.zt-visual { display: flex; align-items: center; justify-content: center; color: var(--cyan); }
.zt-taglist { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-2xs); }
.zt-checklist { list-style: none; display: grid; gap: var(--space-sm); }
.zt-checklist li { display: flex; align-items: flex-start; gap: var(--space-xs); padding: var(--space-xs) 0; }
.zt-checklist li i { margin-top: 3px; }
.zt-checklist--arrow li { border-bottom: 1px solid var(--border-color); }
@media (min-width: 901px) { .zt-checklist--arrow { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-xl); } }
.zt-bullets { margin: var(--space-sm) 0 0 var(--space-md); color: var(--text-muted); font-size: var(--text-body-sm); line-height: var(--leading-relaxed); }
.zt-related-note { text-align: center; max-width: 700px; margin: 0 auto var(--space-xl); }
.zt-combo { padding: var(--space-lg); text-align: center; }
.zt-chips { gap: var(--space-xs); }
.zt-chips--center { justify-content: center; }
.zt-chip { padding: 8px 16px; font-size: var(--text-body-sm); text-decoration: none; transition: border-color var(--transition-fast), color var(--transition-fast); }
.zt-chip:hover { border-color: var(--border-color-strong); color: var(--cyan); }
.zt-chip i { color: var(--cyan); margin-right: 6px; }
.zt-steps .timeline-step { max-width: 640px; }

/* ---------- FAQ (accordéon natif) --------------------------------------- */
.zt-faq { display: flex; flex-direction: column; gap: var(--space-xs); }
.zt-faq__item { background: var(--surface-raised); border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.zt-faq__item[open] { border-color: var(--border-color-strong); }
.zt-faq__item summary { cursor: pointer; list-style: none; padding: var(--space-sm) var(--space-md); font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); }
.zt-faq__item summary::-webkit-details-marker { display: none; }
.zt-faq__item summary::after { content: '+'; color: var(--cyan); font-size: 1.3rem; line-height: 1; }
.zt-faq__item[open] summary::after { content: '\2212'; }
.zt-faq__answer { padding: 0 var(--space-md) var(--space-md); }

/* ---------- Filtres, galerie, portfolio --------------------------------- */
.zt-filters { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-lg); }
.zt-filter { background: var(--surface-raised); border: 1px solid var(--border-color); color: var(--text-muted); padding: 8px 16px; border-radius: var(--radius-pill); cursor: pointer; font-size: var(--text-body-sm); min-height: 40px; }
.zt-filter:hover { border-color: var(--border-color-strong); color: var(--text-primary); }
.zt-filter.is-active { background: var(--surface-accent); border-color: var(--border-color-strong); color: var(--cyan); }
[data-zt-filterable] [hidden] { display: none !important; }

.zt-gallery { list-style: none; display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.zt-gallery__item { display: block; position: relative; overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--surface-raised); text-decoration: none; color: inherit; }
.zt-gallery__item img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--transition-slow); }
.zt-gallery__item:hover img { transform: scale(1.04); }
.zt-gallery__cap { display: block; padding: var(--space-xs) var(--space-sm); font-size: var(--text-body-sm); color: var(--text-muted); }
.zt-portfolio .card--case-study { display: flex; flex-direction: column; }

/* Lightbox */
.zt-lightbox { position: fixed; inset: 0; z-index: var(--z-popup-overlay); background: var(--overlay-strong); display: none; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-md); }
.zt-lightbox.is-open { display: flex; }
.zt-lightbox__stage { position: relative; max-width: min(1100px, 100%); max-height: 78vh; overflow: auto; border-radius: var(--radius-md); }
.zt-lightbox__stage img { max-width: 100%; max-height: 78vh; width: auto; height: auto; margin: 0 auto; cursor: zoom-in; }
.zt-lightbox.is-zoomed .zt-lightbox__stage img { max-width: none; max-height: none; cursor: zoom-out; }
.zt-lightbox__cap { margin-top: var(--space-sm); color: var(--text-primary); text-align: center; font-size: var(--text-body-sm); min-height: 1.5em; }
.zt-lightbox__count { color: var(--text-muted); font-size: var(--text-caption); }
.zt-lightbox__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: var(--radius-circle); background: var(--surface-raised); border: 1px solid var(--border-color); color: var(--text-primary); cursor: pointer; }
.zt-lightbox__btn:hover { border-color: var(--border-color-strong); color: var(--cyan); }
.zt-lightbox__prev { left: var(--space-sm); }
.zt-lightbox__next { right: var(--space-sm); }
.zt-lightbox__close { top: var(--space-sm); right: var(--space-sm); transform: none; }
.zt-lightbox__zoom { top: var(--space-sm); right: calc(var(--space-sm) + 52px); transform: none; }

/* ---------- Vidéo (façade) ---------------------------------------------- */
.zt-videos { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
@media (min-width: 901px) { .zt-videos--multi { grid-template-columns: repeat(2, 1fr); } }
.zt-video { margin: 0; }
.zt-video__play, .zt-video iframe, .zt-video video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-md); background: var(--gradient-dark) center / cover no-repeat; }
.zt-video__play { position: relative; cursor: pointer; border: 1px solid var(--border-color); }
.zt-video__icon { position: absolute; inset: 0; margin: auto; width: 68px; height: 68px; border-radius: var(--radius-circle); background: var(--gradient-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; box-shadow: var(--shadow-glow-blue); transition: transform var(--transition-base); }
.zt-video__play:hover .zt-video__icon { transform: scale(1.08); }
.zt-video figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-xs); font-size: var(--text-body-sm); color: var(--text-muted); }
.zt-video figcaption strong { color: var(--text-primary); }

/* ---------- Flux & canaux (NEXORA IA / WhatsApp) ------------------------ */
.zt-flow { margin: 0 0 var(--space-lg); }
.zt-flow__title { font-family: var(--font-display); font-weight: 600; margin-bottom: var(--space-sm); }
.zt-flow__steps { list-style: none; display: flex; flex-direction: column; gap: var(--space-2xs); counter-reset: step; }
.zt-flow__step { display: flex; align-items: center; gap: var(--space-xs); background: var(--surface-raised); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: var(--space-xs) var(--space-sm); position: relative; }
.zt-flow__step:not(:last-child)::after { content: '\2193'; position: absolute; left: 50%; bottom: -16px; color: var(--cyan); font-size: 1.1rem; z-index: 1; }
.zt-flow__icon { color: var(--cyan); width: 22px; text-align: center; }
@media (min-width: 901px) {
    .zt-flow__steps { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: var(--space-md); }
    .zt-flow__step { flex: 1 1 130px; flex-direction: column; text-align: center; justify-content: center; padding: var(--space-sm); }
    .zt-flow__step:not(:last-child)::after { content: '\2192'; left: auto; right: calc(-1 * var(--space-md)); bottom: auto; top: 50%; transform: translate(50%, -50%); }
}
.zt-channels { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); margin-top: var(--space-lg); }
.zt-channels__in { display: flex; flex-direction: column; gap: var(--space-xs); width: 100%; max-width: 320px; }
.zt-channels__box, .zt-channels__core { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--surface-raised); font-weight: 600; }
.zt-channels__core { background: var(--surface-accent); border-color: var(--border-color-strong); width: 100%; max-width: 320px; }
.zt-channels__arrow { color: var(--cyan); transform: rotate(90deg); }
@media (min-width: 901px) {
    .zt-channels { flex-direction: row; justify-content: center; }
    .zt-channels__arrow { transform: none; }
    .zt-channels__core { width: auto; max-width: none; }
}

/* ---------- Correctifs de formulaire (défauts constatés au test ZT-02) ---- */
/* components.css : la flèche des <select> n'a pas de taille (elle remplissait le champ) et les cases à cocher
   héritent d'un min-width de 40px prévu pour les boutons. Corrigés ici sans toucher au design system. */
.select { background-size: 12px 8px; }
.checkbox input, .radio input { min-width: 0; min-height: 0; width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- Contact ------------------------------------------------------ */
.zt-contact { display: grid; gap: var(--space-xl); grid-template-columns: 1fr; }
@media (min-width: 901px) { .zt-contact { grid-template-columns: 5fr 7fr; gap: var(--space-2xl); align-items: start; } }
.zt-contact__list { list-style: none; display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-lg); }
.zt-contact__list li { display: flex; gap: var(--space-sm); align-items: flex-start; }
.zt-contact__list strong { display: block; }
.zt-contact__list span:not(.icon-wrap), .zt-contact__list a { color: var(--text-muted); font-size: var(--text-body-sm); text-decoration: none; }
.zt-contact__list a:hover { color: var(--cyan); }
.zt-contact__form { padding: var(--space-lg); }
@media (min-width: 901px) { .zt-contact__form { padding: var(--space-xl); } }
.zt-consent { align-items: flex-start; line-height: var(--leading-normal); }
.zt-consent input { margin-top: 3px; flex-shrink: 0; }
#cf-alert:empty { display: none; }
#cf-alert { margin: var(--space-md) 0; }

/* ---------- Légal -------------------------------------------------------- */
.zt-legal-outline { margin: var(--space-sm) 0 0 var(--space-lg); display: flex; flex-direction: column; gap: var(--space-xs); color: var(--text-muted); }

/* ---------- Sécurité & confiance (ZT-03) --------------------------------- */
.zt-security .card--feature h3.zt-feature__title { font-size: var(--text-body); margin-bottom: var(--space-3xs); }
.zt-security__label { display: inline-block; margin-right: var(--space-2xs); font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--cyan); }
.zt-security__doc { margin: var(--space-2xs) 0 0; }
.zt-security__doc .badge { margin-right: var(--space-2xs); }

/* ---------- Statuts de disponibilité, encadrés, légende, schéma (ZT-04) --- */
.zt-status { white-space: nowrap; vertical-align: middle; }
.zt-card__status { margin: 0 0 var(--space-xs); }
.zt-hero__status { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-xs); margin: calc(-1 * var(--space-md)) 0 var(--space-lg); color: var(--text-muted); font-size: var(--text-body-sm); }
.zt-notice-section { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.zt-notice__text { margin: 0; }
.zt-notice__text + .zt-notice__text { margin-top: var(--space-2xs); }
.zt-legend { display: grid; gap: var(--space-sm); grid-template-columns: 1fr; }
@media (min-width: 901px) { .zt-legend { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-xl); } }
.zt-legend__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); padding: var(--space-xs) 0; border-bottom: 1px solid var(--border-color); }
.zt-legend dt { flex: 0 0 auto; }
.zt-legend dd { margin: 0; flex: 1 1 220px; }
.zt-channel-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); margin-bottom: var(--space-md); }
.zt-channel-status__label { font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--cyan); }

.zt-diagram { margin: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.zt-diagram__layer { border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--surface-raised); padding: var(--space-md); }
.zt-diagram__layer--core { border-color: var(--border-color-strong); background: var(--surface-accent); }
.zt-diagram__label { font-family: var(--font-display); font-weight: 600; margin-bottom: var(--space-xs); text-align: center; }
.zt-diagram__items { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); }
.zt-diagram__item { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); border: 1px solid var(--border-color); background: rgba(10, 15, 30, 0.5); font-size: var(--text-body-sm); }
.zt-diagram__item i { color: var(--cyan); }
.zt-diagram__arrow { text-align: center; color: var(--cyan); padding: var(--space-2xs) 0; }
.zt-diagram figcaption { text-align: center; }

/* ---------- Zones prévues (local uniquement) & à documenter ------------- */
.zt-placeholder { display: flex; gap: var(--space-sm); align-items: flex-start; margin: var(--space-md) 0; padding: var(--space-sm) var(--space-md); border: 1px dashed var(--border-color-strong); border-radius: var(--radius-md); color: var(--text-muted); font-size: var(--text-body-sm); background: rgba(0, 212, 255, 0.03); }
.zt-placeholder__icon { color: var(--cyan); margin-top: 2px; }
.zt-placeholder code { display: block; margin-top: 2px; font-size: var(--text-caption); color: var(--muted); word-break: break-word; }
.zt-todo { border-style: dashed; opacity: 0.85; }

/* ---------- Accessibilité ------------------------------------------------ */
.zt-hero .cluster a:focus-visible, .zt-filter:focus-visible, .zt-faq__item summary:focus-visible { box-shadow: var(--focus-ring); outline: none; }
@media (prefers-reduced-motion: reduce) {
    .zt-gallery__item img, .zt-video__icon { transition: none; }
}

/* ---------- ZT-05 : médias — visuel de tête, galerie étendue, vignettes de cartes, vidéo ------------- */
/* Aucune nouvelle palette : jetons existants uniquement. */
.section--cover { padding-block: var(--space-xl) 0; }
.zt-cover { margin: 0 auto; max-width: 960px; }
.zt-cover picture { display: block; }
.zt-cover__img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--surface-raised); }
.zt-cover__cap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); margin-top: var(--space-sm); font-size: var(--text-body-sm); color: var(--text-muted); }
.zt-media-tag { flex: none; }
/* Statut de validation : local UNIQUEMENT (zt_media_tags_html) — jamais rendu en production */
.zt-media-status { flex: none; font-size: var(--text-caption); color: var(--warning); border: 1px dashed var(--warning-border); border-radius: var(--radius-pill); padding: 1px 8px; white-space: nowrap; }
.zt-media-status--concept { color: var(--cyan); border-color: var(--border-color-strong); }
.zt-media-status--validated { color: var(--success); border-color: var(--success-border); }
.zt-media-status--archived { color: var(--muted); border-color: var(--border-color); }
.zt-media-note { display: flex; gap: var(--space-xs); align-items: flex-start; margin: 0 0 var(--space-md); color: var(--text-muted); }
.zt-media-note i { color: var(--cyan); margin-top: 3px; }

/* Galerie : schémas larges (≥ 3:2) montrés en entier, colonnes plus larges pour rester lisibles */
.zt-gallery--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.zt-gallery__item picture { display: block; }
.zt-gallery__item--wide img { aspect-ratio: 16 / 9; object-fit: contain; background: var(--navy); }
.zt-gallery__cap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-xs); }
.zt-gallery__text { flex: 1 1 100%; }
.zt-gallery__item:focus-visible, .zt-lightbox__btn:focus-visible, .zt-video__play:focus-visible { box-shadow: var(--focus-ring); outline: none; }

/* Lightbox : mention conceptuelle + légende */
.zt-lightbox__meta { display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); margin-top: var(--space-sm); }
.zt-lightbox__meta .zt-lightbox__cap { margin-top: 0; }

/* Vignette de carte (couverture du registre à la place de l'icône) */
.zt-card__media { margin-bottom: var(--space-sm); }
.zt-card__media picture { display: block; }
.zt-card__media img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--border-color); }

/* Vidéo : durée sur la vignette, lien sortant */
.zt-video__duration { position: absolute; right: 10px; bottom: 10px; padding: 2px 8px; border-radius: var(--radius-pill); background: rgba(10, 15, 30, 0.85); color: var(--text-primary); font-size: var(--text-caption); font-variant-numeric: tabular-nums; }
a.zt-video__play { text-decoration: none; color: inherit; }
/* ---------- ZT-06 : catalogue des solutions (grille pilotée par le registre) ------------- */
/* Jetons existants uniquement ; aucune référence à une solution particulière. */
.zt-catalog { list-style: none; display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.zt-catalog__cell { display: flex; min-width: 0; }
.zt-catalog-card { display: flex; flex-direction: column; width: 100%; padding: 0; overflow: hidden; }
.zt-catalog-card.is-featured { border-color: var(--border-color-strong); }
.zt-catalog-card__visual { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; background: var(--gradient-dark); border-bottom: 1px solid var(--border-color); overflow: hidden; }
.zt-catalog-card__visual picture { display: block; width: 100%; height: 100%; }
.zt-catalog-card__visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.zt-catalog-card__mono { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4vw, 2.75rem); letter-spacing: 0.08em; color: var(--cyan); }
.zt-catalog-card__body { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-md); flex: 1; }
.zt-catalog-card__cat { margin: 0; font-size: var(--text-caption); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--cyan); }
.zt-catalog-card__meta { margin: 0; font-size: var(--text-caption); color: var(--text-muted); }
.zt-catalog-card .card__title { margin: 0; }
.zt-catalog-card .zt-card__status { margin: 0; }
.zt-catalog-card .card__text { margin: 0; }
.zt-catalog-card .link-arrow { margin-top: auto; padding-top: var(--space-xs); }
.zt-catalog-card .link-arrow:focus-visible { box-shadow: var(--focus-ring); outline: none; border-radius: var(--radius-sm); }

/* ---------- ZT-07 : pages légales (sommaire, sections numérotées, tableaux, champs d'identité) ------------- */
/* Jetons existants uniquement. Lisibilité d'abord : largeur de lecture limitée, sections espacées, tableaux empilés sur mobile. */
.container--narrow > .zt-legal { max-width: 920px; }
.zt-legal { display: flex; flex-direction: column; gap: var(--space-lg); }
.zt-legal .alert, .zt-legal-sec > .body-sm, .zt-legal-related { max-width: 760px; }
.zt-legal-version { margin: 0; color: var(--text-muted); }
.zt-legal-toc { border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-raised); max-width: 760px; }
.zt-legal-toc summary { cursor: pointer; padding: var(--space-sm) var(--space-md); font-weight: 600; }
.zt-legal-toc summary:focus-visible { box-shadow: var(--focus-ring); outline: none; border-radius: var(--radius-md); }
.zt-legal-toc__count { font-weight: 400; color: var(--text-muted); font-size: var(--text-body-sm); }
.zt-legal-toc ol { margin: 0; padding: 0 var(--space-md) var(--space-md) calc(var(--space-md) + 1.4em); display: grid; gap: var(--space-2xs); }
.zt-legal-toc a { color: var(--text-link); text-decoration: none; }
.zt-legal-toc a:hover { text-decoration: underline; }
.zt-legal-toc a:focus-visible, .zt-legal-related a:focus-visible, .zt-legal a.link-accent:focus-visible { box-shadow: var(--focus-ring); outline: none; border-radius: var(--radius-sm); }

.zt-legal-sec { display: flex; flex-direction: column; gap: var(--space-sm); padding-top: var(--space-lg); border-top: 1px solid var(--border-color); scroll-margin-top: var(--space-xl); }
.zt-legal-sec__title { margin: 0; }
.zt-legal-num { color: var(--cyan); margin-right: var(--space-3xs); font-variant-numeric: tabular-nums; }
.zt-legal-p, .zt-legal-list { max-width: 72ch; margin: 0; }
.zt-legal-h3 { margin: var(--space-xs) 0 0; }
.zt-legal-list { padding-left: var(--space-md); display: flex; flex-direction: column; gap: var(--space-2xs); list-style: disc; }
.zt-legal-list li::marker { color: var(--cyan); }
.zt-legal-sec .zt-note { margin: 0; }

/* Champs d'identification (liste de définitions) */
.zt-legal-fields { margin: 0; display: grid; border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; }
.zt-legal-fields__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); padding: var(--space-xs) var(--space-md); }
.zt-legal-fields__row + .zt-legal-fields__row { border-top: 1px solid var(--border-color); }
.zt-legal-fields dt { font-weight: 600; }
.zt-legal-fields dd { margin: 0; color: var(--text-muted); overflow-wrap: anywhere; }
@media (min-width: 640px) { .zt-legal-fields__row { grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr); gap: var(--space-md); } }
.zt-legal-pending { font-style: italic; }

/* Tableaux : lisibles sur ordinateur, empilés (une carte par ligne) sur mobile — les rôles ARIA du balisage conservent la sémantique */
.zt-table-wrap { border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; }
.zt-table { width: 100%; border-collapse: collapse; font-size: var(--text-body-sm); }
.zt-table__caption { text-align: left; padding: var(--space-xs) var(--space-md); font-weight: 600; background: var(--surface-raised); border-bottom: 1px solid var(--border-color); caption-side: top; }
.zt-table th, .zt-table td { padding: var(--space-xs) var(--space-md); text-align: left; vertical-align: top; border-top: 1px solid var(--border-color); overflow-wrap: anywhere; }
.zt-table thead th { color: var(--text-muted); font-size: var(--text-caption); text-transform: uppercase; letter-spacing: var(--tracking-wider); border-top: 0; }
.zt-table tbody th { font-weight: 600; }
.zt-table td { color: var(--text-muted); }
@media (max-width: 720px) {
    .zt-table, .zt-table caption, .zt-table tbody, .zt-table tr, .zt-table th, .zt-table td { display: block; width: 100%; }
    .zt-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* en-têtes lus par les lecteurs d'écran, remplacés par data-label */
    .zt-table tr { padding: var(--space-xs) 0; border-top: 1px solid var(--border-color); }
    .zt-table tbody tr:first-child { border-top: 0; }
    .zt-table th, .zt-table td { border-top: 0; padding: var(--space-3xs) var(--space-md); }
    .zt-table td::before { content: attr(data-label); display: block; font-size: var(--text-caption); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--cyan); }
}

.zt-legal-cards .card--feature { height: 100%; }
@media (max-width: 480px) { .zt-legal-cards .card--feature { flex-direction: column; gap: var(--space-xs); } }   /* mobile : l'icône passe au-dessus du texte (texte pleine largeur) */
.zt-legal-buttons { margin-top: var(--space-xs); }
.zt-legal-related { border-top: 1px solid var(--border-color); padding-top: var(--space-lg); }
.zt-legal-related h2 { margin: 0 0 var(--space-xs); }
.zt-legal-related ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin: 0; padding: 0; }
.zt-legal .zt-flow { margin: 0; }
.zt-legal .zt-faq { max-width: 760px; }

/* Repères internes (local UNIQUEMENT : jamais rendus en production ni dans l'export statique) */
.zt-legal-flag { white-space: nowrap; font-size: var(--text-caption); vertical-align: baseline; margin-left: var(--space-3xs); }
.zt-legal-flagrow { margin: 0; }