/* ==========================================================================
   ZEGA TECHNOLOGIES — DESIGN SYSTEM COMPONENTS (Phase 02 + Phase 03)
   --------------------------------------------------------------------------
   Composants globaux réutilisables par toutes les futures pages. S'appuie
   exclusivement sur les tokens définis dans tokens.css (aucune valeur brute
   dispersée). Charger tokens.css AVANT ce fichier.

   Sommaire :
   1. Reset & base          9.  Badges & statuts
   2. Layout & grille       10. Alertes
   3. Typographie           11. Formulaires
   4. Boutons               12. Modales / Popups / Drawers
   5. Liens                 13. Navigation (visuel + comportement mobile)
   6. Cartes                13b. Footer (Phase 03)
   7. Surfaces & glass      14. Sections
   8. Icônes                15. Éléments technologiques
                            16. Accessibilité & utilitaires
   ========================================================================== */

/* ==========================================================================
   1. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    font-family: var(--font-body);
    background: var(--surface-base);
    color: var(--text-primary);
    overflow-x: hidden;
    line-height: var(--leading-normal);
}

img, svg, video, canvas { max-width: 100%; display: block; }

a { color: inherit; }

button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }

/* ==========================================================================
   2. LAYOUT & GRILLE
   ========================================================================== */
.container      { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter); }

.section        { padding: var(--space-4xl) var(--gutter); }
.section-inner  { max-width: var(--container-max); margin: 0 auto; }

/* Grilles génériques — un nombre volontairement restreint de variantes */
.grid    { display: grid; gap: var(--space-lg); }
.grid-2  { grid-template-columns: repeat(2, 1fr); }
.grid-3  { grid-template-columns: repeat(3, 1fr); }
.grid-4  { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Stack : empilement vertical avec espacement constant */
.stack { display: flex; flex-direction: column; gap: var(--space-md); }
.stack--sm { gap: var(--space-sm); }
.stack--lg { gap: var(--space-lg); }

/* Cluster : groupement horizontal avec retour à la ligne */
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }

@media (max-width: 900px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .section { padding: var(--space-3xl) var(--gutter-mobile); }
    .container, .container-wide { padding: 0 var(--gutter-mobile); }
}

/* ==========================================================================
   3. TYPOGRAPHIE
   ========================================================================== */
.text-display, .h1, .h2, .h3, .h4, .h5 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
}
.text-display { font-size: var(--text-display); }
.h1 { font-size: var(--text-h1); }
.h2 { font-size: var(--text-h2); margin-bottom: var(--space-sm); }
.h3 { font-size: var(--text-h3); }
.h4 { font-size: var(--text-h4); font-weight: 600; }
.h5 { font-size: var(--text-h5); font-weight: 600; }

.body-lg { font-size: var(--text-body-lg); line-height: var(--leading-relaxed); color: var(--text-muted); }
.body    { font-size: var(--text-body); line-height: var(--leading-normal); color: var(--text-muted); }
.body-sm { font-size: var(--text-body-sm); line-height: var(--leading-normal); color: var(--text-muted); }
.caption { font-size: var(--text-caption); color: var(--text-muted); }

.eyebrow {
    display: inline-flex; align-items: center; gap: var(--space-2xs);
    font-size: var(--text-eyebrow);
    font-weight: 600;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: var(--space-sm);
}
.eyebrow::before { content: ''; width: 20px; height: 2px; background: var(--cyan); }

.text-gradient {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text-accent { color: var(--cyan); }
.text-muted  { color: var(--text-muted); }

/* ==========================================================================
   4. BOUTONS
   ========================================================================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--text-body-sm);
    padding: 12px 26px;
    border-radius: var(--radius-sm);
    border: var(--border-width) solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity var(--transition-base), transform var(--transition-base),
                border-color var(--transition-base), background var(--transition-base),
                color var(--transition-base);
    -webkit-tap-highlight-color: transparent;
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Tailles */
.btn--sm { padding: 8px 16px; font-size: var(--text-caption); border-radius: var(--radius-sm); }
.btn--lg { padding: 15px 34px; font-size: var(--text-body); }

/* Variante Primary : identité ZEGA forte (gradient de marque) */
.btn-primary {
    background: var(--gradient-brand);
    color: var(--text-on-accent);
    box-shadow: 0 4px 16px rgba(0, 102, 255, 0.25);
}
.btn-primary:hover  { opacity: 0.9; transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); opacity: 1; }

/* Variante Secondary : surface pleine, sans gradient */
.btn-secondary {
    background: var(--surface-raised);
    border-color: var(--border-color);
    color: var(--text-primary);
}
.btn-secondary:hover { border-color: var(--border-color-strong); }

/* Variante Ghost : discret, pour actions légères */
.btn-ghost {
    background: none;
    border-color: var(--border-color);
    color: var(--text-muted);
}
.btn-ghost:hover { border-color: var(--border-color-strong); color: var(--cyan); }

/* Variante Outline : bordure visible, fond transparent */
.btn-outline {
    background: none;
    border-color: var(--border-color);
    color: var(--text-primary);
}
.btn-outline:hover { border-color: var(--border-color-strong); background: rgba(0, 212, 255, 0.06); }

/* Icon button : carré, icône seule */
.btn-icon {
    width: 40px; height: 40px; padding: 0;
    border-radius: var(--radius-sm);
    background: none;
    border-color: var(--border-color);
    color: var(--text-muted);
}
.btn-icon:hover { border-color: var(--border-color-strong); color: var(--cyan); }
.btn-icon--circle { border-radius: var(--radius-circle); }

/* Link button : se comporte visuellement comme un lien accentué */
.btn-link {
    background: none; border: none; padding: 0;
    color: var(--cyan);
    font-weight: 600;
    font-size: var(--text-body-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    gap: var(--space-3xs);
}
.btn-link:hover { gap: var(--space-2xs); }

/* États communs */
.btn[disabled], .btn.is-disabled {
    opacity: 0.45; cursor: not-allowed; pointer-events: none;
}
.btn.is-loading { color: transparent; pointer-events: none; position: relative; }
.btn.is-loading::after {
    content: '';
    position: absolute; width: 16px; height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: var(--radius-circle);
    animation: zt-spin 0.7s linear infinite;
}
.btn-secondary.is-loading::after, .btn-ghost.is-loading::after, .btn-outline.is-loading::after {
    border-color: rgba(0, 212, 255, 0.3);
    border-top-color: var(--cyan);
}

/* ==========================================================================
   5. LIENS
   ========================================================================== */
.link {
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.link:hover { color: var(--text-primary); }
.link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 2px; }

.link-accent { color: var(--cyan); text-decoration: none; }
.link-accent:hover { text-decoration: underline; }

.link-arrow {
    display: inline-flex; align-items: center; gap: var(--space-2xs);
    color: var(--cyan);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--text-caption);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    transition: gap var(--transition-fast);
}
.link-arrow:hover { gap: var(--space-xs); }

.link-icon { display: inline-flex; align-items: center; gap: var(--space-2xs); text-decoration: none; color: var(--text-muted); transition: color var(--transition-fast); }
.link-icon:hover { color: var(--cyan); }

/* ==========================================================================
   6. CARTES
   ========================================================================== */
.card {
    background: var(--surface-raised);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    position: relative;
    overflow: hidden;
    transition: border-color var(--transition-slow), transform var(--transition-slow), box-shadow var(--transition-slow);
}
.card:hover { border-color: var(--border-color-strong); transform: translateY(-4px); box-shadow: var(--shadow-md); }

.card__icon {
    width: 52px; height: 52px;
    background: var(--surface-accent);
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    color: var(--cyan);
    font-size: 1.3rem;
    margin-bottom: var(--space-md);
}
.card__title { font-family: var(--font-display); font-size: var(--text-h4); font-weight: 600; margin-bottom: var(--space-2xs); }
.card__text  { font-size: var(--text-body-sm); color: var(--text-muted); line-height: var(--leading-relaxed); margin-bottom: var(--space-md); }

/* Service Card : icône + titre + texte + lien (défaut = .card) */
.card--service {}

/* Solution Card : identité produit, plus de place pour un visuel/logo */
.card--solution { padding: 0; display: flex; flex-direction: column; }
.card--solution .card__visual { aspect-ratio: 16/10; background: var(--surface-accent); }
.card--solution .card__body { padding: var(--space-lg); }

/* Technology Card : plus compacte, orientée logo/nom */
.card--technology { text-align: center; padding: var(--space-md); }
.card--technology .card__icon { margin: 0 auto var(--space-sm); }

/* Case Study Card : visuel dominant + résumé court */
.card--case-study { padding: 0; }
.card--case-study .card__visual { aspect-ratio: 16/9; background: var(--surface-accent); }
.card--case-study .card__body { padding: var(--space-md) var(--space-lg) var(--space-lg); }

/* Resource Card : article/ressource — méta (date, catégorie) + titre */
.card--resource .card__meta { display: flex; gap: var(--space-sm); margin-bottom: var(--space-xs); }

/* Feature Card : sobre, sans hover translation (liste de fonctionnalités) */
.card--feature { display: flex; gap: var(--space-sm); align-items: flex-start; }
.card--feature:hover { transform: none; }

/* Metric Card : chiffre en avant */
.card--metric { text-align: center; }
.card--metric .card__metric-value {
    font-family: var(--font-display); font-size: var(--text-h1); font-weight: 700; color: var(--cyan); line-height: 1;
    margin-bottom: var(--space-2xs);
}
.card--metric .card__metric-label { font-size: var(--text-caption); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }

/* Contact/CTA Card : surface accentuée, incite à l'action */
.card--cta {
    background: var(--gradient-dark);
    border-color: var(--border-color);
    text-align: center;
}

/* ==========================================================================
   7. SURFACES & GLASS
   ========================================================================== */
.surface            { background: var(--surface-base); }
.surface--raised    { background: var(--surface-raised); border: var(--border-width) solid var(--border-color); border-radius: var(--radius-lg); }
.surface--glass {
    background: var(--surface-glass);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-lg);
}
.surface--highlighted { background: var(--surface-highlight); border: var(--border-width) solid var(--border-color-strong); border-radius: var(--radius-lg); }
.surface--dark       { background: var(--gradient-dark); border-radius: var(--radius-lg); }
.surface--accent     { background: var(--surface-accent); border-radius: var(--radius-lg); }

/* ==========================================================================
   8. ICÔNES
   --------------------------------------------------------------------------
   Stratégie : une seule famille d'icônes (Font Awesome 6, graisse "solid"
   pour les icônes fonctionnelles/UI, "brands" uniquement pour les réseaux
   sociaux). Ne pas mélanger avec d'autres sets d'icônes (Bootstrap Icons,
   Feather, etc.). Tailles standardisées ci-dessous.
   ========================================================================== */
.icon-sm { font-size: 0.85rem; }
.icon-md { font-size: 1.1rem; }
.icon-lg { font-size: 1.4rem; }

.icon-wrap {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface-accent);
    color: var(--cyan);
    border-radius: var(--radius-md);
    width: 44px; height: 44px;
    flex-shrink: 0;
}
.icon-wrap--lg { width: 64px; height: 64px; font-size: 1.5rem; border-radius: var(--radius-lg); }

/* ==========================================================================
   9. BADGES & STATUTS
   ========================================================================== */
.badge {
    display: inline-flex; align-items: center; gap: var(--space-3xs);
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    font-size: var(--text-caption);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    border: var(--border-width) solid transparent;
}
.badge--neutral { background: var(--surface-raised); border-color: var(--border-color); color: var(--text-muted); }
.badge--accent  { background: var(--info-bg); border-color: var(--info-border); color: var(--cyan); }
.badge--success { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
.badge--warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }
.badge--danger  { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }

.badge--dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Tag : variante non-pilule, pour catégorisation de contenu (ressources, technos) */
.tag {
    display: inline-flex; align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    border: var(--border-width) solid var(--border-color);
    color: var(--text-muted);
    font-size: var(--text-caption);
}

/* ==========================================================================
   10. ALERTES
   ========================================================================== */
.alert {
    display: flex; align-items: flex-start; gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    border: var(--border-width) solid transparent;
    font-size: var(--text-body-sm);
    line-height: var(--leading-normal);
}
.alert__icon { flex-shrink: 0; margin-top: 2px; }
.alert__title { font-weight: 600; margin-bottom: 2px; display: block; }
.alert__close { margin-left: auto; background: none; border: none; color: inherit; opacity: 0.6; cursor: pointer; }
.alert__close:hover { opacity: 1; }

.alert--success { background: var(--success-bg); border-color: var(--success-border); color: #6EE7C6; }
.alert--info     { background: var(--info-bg); border-color: var(--info-border); color: var(--cyan); }
.alert--warning  { background: var(--warning-bg); border-color: var(--warning-border); color: #FFCE80; }
.alert--error    { background: var(--danger-bg); border-color: var(--danger-border); color: #FF9AA6; }
.alert--neutral  { background: var(--surface-raised); border-color: var(--border-color); color: var(--text-muted); }

/* ==========================================================================
   11. FORMULAIRES
   ========================================================================== */
.field { position: relative; margin-bottom: var(--space-md); }
.field__label {
    display: block;
    font-size: var(--text-caption);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-2xs);
}
.field__help  { display: block; margin-top: var(--space-3xs); font-size: var(--text-caption); color: var(--text-muted); }
.field__error { display: block; margin-top: var(--space-3xs); font-size: var(--text-caption); color: var(--danger); }
.field__success { display: block; margin-top: var(--space-3xs); font-size: var(--text-caption); color: var(--success); }

.input, .textarea, .select {
    width: 100%;
    background: rgba(10, 15, 30, 0.6);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 13px 16px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--text-body);
    outline: none;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.input::placeholder, .textarea::placeholder { color: rgba(136, 146, 164, 0.55); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--cyan); background: rgba(10, 15, 30, 0.9); }
.textarea { resize: vertical; min-height: 140px; }

.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238892A4' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }

.field--error .input, .field--error .textarea, .field--error .select { border-color: var(--danger); }
.field--success .input, .field--success .textarea, .field--success .select { border-color: var(--success); }
.field[data-disabled], .input:disabled, .textarea:disabled, .select:disabled { opacity: 0.5; cursor: not-allowed; }

/* Checkbox / Radio : conservent l'apparence native mais recolorées */
.checkbox, .radio { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-body-sm); color: var(--text-muted); cursor: pointer; }
.checkbox input, .radio input { width: 18px; height: 18px; accent-color: var(--cyan); cursor: pointer; }

/* Upload */
.upload {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2xs);
    border: 1px dashed var(--border-color-strong);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    text-align: center;
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.upload:hover { border-color: var(--cyan); background: rgba(0, 212, 255, 0.04); }

/* Champ téléphone / email : mêmes classes .input, préfixe optionnel */
.input-group { display: flex; align-items: stretch; }
.input-group__prefix {
    display: flex; align-items: center; padding: 0 14px;
    background: rgba(10, 15, 30, 0.6);
    border: var(--border-width) solid var(--border-color);
    border-right: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    color: var(--text-muted); font-size: var(--text-body-sm);
}
.input-group .input { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

/* Champ piège anti-spam (honeypot) — invisible pour un humain */
.hp-field { position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

/* Ligne de formulaire à 2 colonnes */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
@media (max-width: 900px) { .form-row { grid-template-columns: 1fr; } }

/* ==========================================================================
   12. MODALES / POPUPS / DRAWERS
   --------------------------------------------------------------------------
   Langage visuel uniquement — la logique d'ouverture/fermeture générique
   est fournie par assets/js/popups.js. Aucune logique métier ici.
   ========================================================================== */
.zt-overlay {
    position: fixed; inset: 0;
    background: var(--overlay-strong);
    z-index: var(--z-popup-overlay);
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-md);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base);
}
.zt-overlay.is-open { opacity: 1; visibility: visible; }

.zt-modal {
    position: relative;
    z-index: var(--z-popup);
    width: 100%; max-width: 560px;
    max-height: 88vh;
    overflow-y: auto;
    background: var(--surface-raised);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    transform: translateY(16px) scale(0.98);
    opacity: 0;
    transition: transform var(--transition-slow), opacity var(--transition-slow);
}
.zt-overlay.is-open .zt-modal { transform: translateY(0) scale(1); opacity: 1; }
.zt-modal--lg { max-width: 760px; }
.zt-modal--sm { max-width: 400px; }

.zt-modal__close {
    position: absolute; top: var(--space-md); right: var(--space-md);
    width: 36px; height: 36px;
    background: none; border: var(--border-width) solid var(--border-color);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer; font-size: 1rem;
}
.zt-modal__close:hover { border-color: var(--border-color-strong); color: var(--cyan); }
.zt-modal__title { font-family: var(--font-display); font-size: var(--text-h3); margin-bottom: var(--space-md); }

/* Drawer : variante glissée depuis le bord (mobile nav, filtres, etc.) */
.zt-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(360px, 88vw);
    background: var(--surface-raised);
    border-left: var(--border-width) solid var(--border-color);
    padding: var(--space-xl) var(--space-lg);
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    z-index: var(--z-popup);
    overflow-y: auto;
}
.zt-overlay.is-open .zt-drawer { transform: translateX(0); }

/* Vidéo popup : ratio contraint, pas de padding interne */
.zt-modal--video { padding: 0; overflow: hidden; background: #000; }
.zt-modal--video .zt-modal__video { aspect-ratio: 16/9; width: 100%; }

/* ==========================================================================
   13. NAVIGATION (VISUEL — implémentation du header en phase ultérieure)
   ========================================================================== */
.zt-topbar {
    background: var(--surface-raised);
    border-bottom: var(--border-width) solid var(--border-color);
    padding: var(--space-2xs) var(--gutter);
    display: flex; justify-content: space-between; align-items: center;
    font-size: var(--text-caption);
    color: var(--text-muted);
}

.zt-nav {
    position: sticky; top: 0; z-index: var(--z-nav);
    background: var(--overlay);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: var(--border-width) solid var(--border-color);
    padding: 0 var(--gutter);
    display: flex; align-items: center; justify-content: space-between;
    height: 70px;
}
.zt-nav-logo { display: flex; align-items: center; gap: var(--space-xs); text-decoration: none; }
.zt-nav-logo__icon {
    width: 42px; height: 42px;
    background: var(--gradient-brand);
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; color: #fff;
}

/* Plaque claire pour le logo officiel réel (img/logo.png, rouge/bleu) : la
   marque n'est pas modifiée, seule une surface légère est ajoutée derrière
   pour la lisibilité sur fond sombre — cf. rapport de clôture Phase 04. */
.zt-logo-plate {
    display: inline-flex; align-items: center;
    background: #fff;
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    line-height: 0;
}
.zt-logo-img { height: 26px; width: auto; display: block; }
.zt-logo-plate--lg { padding: 7px 14px; }
.zt-logo-img--lg { height: 34px; }
.zt-nav-links { display: flex; align-items: center; gap: var(--space-3xs); list-style: none; }
.zt-nav-links a {
    color: var(--text-muted); text-decoration: none; font-size: var(--text-body-sm); font-weight: 500;
    padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background var(--transition-fast);
}
.zt-nav-links a:hover, .zt-nav-links a.is-active { color: var(--text-primary); background: rgba(0, 102, 255, 0.15); }
.zt-nav-links a.is-active { color: var(--cyan); }

.zt-nav-actions { display: flex; align-items: center; gap: var(--space-xs); }

/* Dropdown / mega-menu : panneau flottant sous un item de nav */
.zt-dropdown { position: relative; }
.zt-dropdown__trigger {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font: inherit;
    font-size: var(--text-body-sm); font-weight: 500;
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background var(--transition-fast);
}
.zt-dropdown__trigger:hover,
.zt-dropdown.is-open .zt-dropdown__trigger,
.zt-dropdown.is-mobile-open .zt-dropdown__trigger { color: var(--text-primary); background: rgba(0, 102, 255, 0.15); }
.zt-dropdown.is-active > .zt-dropdown__trigger { color: var(--cyan); }
.zt-dropdown__trigger .zt-chevron { font-size: 0.7em; transition: transform var(--transition-fast); }
.zt-dropdown.is-open .zt-dropdown__trigger .zt-chevron,
.zt-dropdown:hover .zt-dropdown__trigger .zt-chevron { transform: rotate(180deg); }

.zt-dropdown__panel {
    position: absolute; top: calc(100% + 10px); left: 0;
    min-width: 240px;
    background: var(--surface-raised);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}
.zt-dropdown:hover .zt-dropdown__panel,
.zt-dropdown.is-open .zt-dropdown__panel,
.zt-dropdown:focus-within .zt-dropdown__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.zt-dropdown__panel--mega { min-width: 640px; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }

.zt-dropdown__item {
    display: flex; align-items: flex-start; gap: var(--space-xs);
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-sm);
    text-decoration: none; color: var(--text-primary);
    transition: background var(--transition-fast);
}
.zt-dropdown__item:hover, .zt-dropdown__item:focus-visible { background: rgba(0, 212, 255, 0.08); }
.zt-dropdown__item .icon-wrap { width: 36px; height: 36px; font-size: 0.95rem; }
.zt-dropdown__item-title { font-size: var(--text-body-sm); font-weight: 600; }
.zt-dropdown__item-desc { font-size: var(--text-caption); color: var(--text-muted); }
.zt-dropdown__note {
    grid-column: 1 / -1;
    font-size: var(--text-caption); color: var(--text-muted);
    padding: var(--space-3xs) var(--space-xs) var(--space-2xs);
    border-bottom: var(--border-width) solid var(--border-color);
    margin-bottom: var(--space-3xs);
}

.zt-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; min-width: 40px; min-height: 40px; align-items: center; justify-content: center; }
.zt-hamburger span { display: block; width: 22px; height: 2px; background: var(--text-muted); border-radius: 2px; transition: transform var(--transition-fast), opacity var(--transition-fast); }
.zt-hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.zt-hamburger.is-active span:nth-child(2) { opacity: 0; }
.zt-hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1280px) {
    /* Seuil relevé de 900px à 1280px (bug trouvé au test Phase 04) : avec 8
       entrées de navigation + logo + recherche + CTA, la barre desktop
       déborde réellement entre ~901px et ~1250px. Plutôt que de construire
       une troisième variante "nav compacte" fragile pour cette zone
       intermédiaire, on bascule sur le panneau mobile déjà conçu et testé. */
    /* backdrop-filter sur .zt-nav crée, par spécification CSS, un "containing
       block" pour ses descendants position:fixed — le panneau mobile
       (.zt-nav-links / .zt-nav-actions) se retrouvait ainsi piégé et
       positionné par rapport à la barre de 70px au lieu du viewport (bug
       trouvé au test, cf. rapport de clôture). Sur mobile, où l'effet verre
       est de toute façon peu visible, on bascule sur un fond opaque simple. */
    .zt-nav {
        padding: 0 var(--gutter-mobile);
        backdrop-filter: none; -webkit-backdrop-filter: none;
        background: var(--navy);
    }
    .zt-topbar { display: none; }
    .zt-hamburger { display: flex; }

    /* Panneau mobile plein écran (déclenché par .zt-hamburger, classe .is-open
       ajoutée par main.js) plutôt qu'un simple dropdown : plus lisible sur
       petit écran, cohérent avec la charte "aucun débordement horizontal". */
    .zt-nav-links {
        display: none;
        position: fixed; top: 70px; left: 0; right: 0;
        height: calc(100vh - 70px);
        background: var(--navy);
        border-top: var(--border-width) solid var(--border-color);
        flex-direction: column; align-items: stretch; gap: 0;
        padding: var(--space-md) var(--gutter-mobile) 152px;
        overflow-y: auto;
        z-index: var(--z-nav);
        box-sizing: border-box;
    }
    .zt-nav-links.is-open { display: flex; }
    .zt-nav-links > li { width: 100%; }
    .zt-nav-links a { display: block; padding: var(--space-sm) var(--space-2xs); }
    .zt-dropdown__trigger { width: 100%; justify-content: space-between; padding: var(--space-sm) var(--space-2xs); }

    /* Barre d'action ancrée en BAS de l'écran (et non plus en flux normal dans
       la barre <nav> à hauteur fixe de 70px, qui débordait — bug trouvé au
       test, cf. rapport de clôture). */
    .zt-nav-actions {
        display: none;
        flex-direction: column; align-items: stretch; gap: var(--space-sm);
        position: fixed; left: 0; right: 0; bottom: 0;
        padding: var(--space-sm) var(--gutter-mobile);
        border-top: var(--border-width) solid var(--border-color);
        background: var(--navy);
        z-index: var(--z-nav);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
        box-sizing: border-box;
    }
    .zt-nav-actions.is-open { display: flex; }
    .zt-nav-actions .btn-primary { width: 100%; justify-content: center; }

    /* Dropdown/mega-menu en mobile = accordéon inline (pas de panneau flottant) */
    .zt-dropdown__panel {
        position: static; opacity: 1; visibility: visible; transform: none;
        display: none;
        box-shadow: none; border: none; background: var(--surface-raised);
        margin: var(--space-2xs) 0 var(--space-2xs) var(--space-sm);
    }
    .zt-dropdown.is-mobile-open .zt-dropdown__panel { display: grid; }
    .zt-dropdown__panel--mega { grid-template-columns: 1fr; min-width: 0; }
}

/* ==========================================================================
   13b. FOOTER (Phase 03)
   --------------------------------------------------------------------------
   Absent du Design System de la Phase 02 (aucune page publiée n'avait encore
   de footer commun) — ajouté ici en tant qu'extension naturelle de la
   Navigation, pas en tant que nouveau système parallèle.
   ========================================================================== */
.zt-footer {
    background: var(--surface-raised);
    border-top: var(--border-width) solid var(--border-color);
    padding: var(--space-2xl) var(--gutter) var(--space-lg);
}
.zt-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr;
    gap: var(--space-xl);
    margin-bottom: var(--space-2xl);
}
.zt-footer-brand p { font-size: var(--text-body-sm); color: var(--text-muted); line-height: var(--leading-relaxed); margin: var(--space-sm) 0 var(--space-md); }
.zt-footer-socials { display: flex; gap: var(--space-2xs); }
.zt-footer-social {
    width: 36px; height: 36px;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); text-decoration: none; font-size: var(--text-body-sm);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}
.zt-footer-social:hover { border-color: var(--border-color-strong); color: var(--cyan); }
.zt-footer-social[aria-disabled="true"] { opacity: 0.35; pointer-events: none; }

.zt-footer-col .zt-footer-title {
    font-family: var(--font-display); font-size: var(--text-caption); font-weight: 600;
    letter-spacing: var(--tracking-wider); text-transform: uppercase;
    color: var(--text-primary); margin-bottom: var(--space-md);
}
.zt-footer-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-2xs); }
.zt-footer-col ul a { color: var(--text-muted); text-decoration: none; font-size: var(--text-body-sm); transition: color var(--transition-fast); }
.zt-footer-col ul a:hover { color: var(--cyan); }

.zt-footer-contact li { display: flex; align-items: flex-start; gap: var(--space-2xs); color: var(--text-muted); font-size: var(--text-body-sm); line-height: var(--leading-snug); list-style: none; }
.zt-footer-contact li i { color: var(--cyan); margin-top: 2px; flex-shrink: 0; width: 16px; }

.zt-footer-news {
    display: flex; align-items: center; gap: var(--space-xs);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    background: var(--surface-accent);
    border: var(--border-width) solid var(--border-color);
    text-decoration: none; color: var(--text-primary);
    margin-top: var(--space-sm);
    font-size: var(--text-body-sm); font-weight: 600;
    transition: border-color var(--transition-fast);
}
.zt-footer-news:hover { border-color: var(--border-color-strong); }
.zt-footer-news i { color: var(--success); }

.zt-footer-bottom {
    border-top: var(--border-width) solid var(--border-color);
    padding-top: var(--space-lg);
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: var(--space-sm);
}
.zt-footer-bottom p { font-size: var(--text-caption); color: var(--text-muted); }
.zt-footer-bottom a { color: var(--text-muted); text-decoration: none; }
.zt-footer-bottom a:hover { color: var(--cyan); }
.zt-footer-legal { display: flex; gap: var(--space-sm); flex-wrap: wrap; }

@media (max-width: 1024px) {
    .zt-footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 900px) {
    .zt-footer { padding: var(--space-xl) var(--gutter-mobile) var(--space-md); }
    .zt-footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
    .zt-footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
    .zt-footer-grid { grid-template-columns: 1fr; }
}

/* Bouton "retour en haut" partagé (Phase 02 : classe utilitaire, ici son style) */
.zt-back-top {
    position: fixed; bottom: 24px; right: 24px; z-index: var(--z-dropdown);
    width: 44px; height: 44px;
    background: var(--gradient-brand);
    border: none; border-radius: var(--radius-sm);
    color: #fff; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-glow-blue);
    text-decoration: none;
    opacity: 0; pointer-events: none;
    transition: opacity var(--transition-base), transform var(--transition-fast);
}
.zt-back-top:hover { transform: translateY(-3px); }

/* ==========================================================================
   14. SECTIONS
   ========================================================================== */
.section--standard {}
.section--hero {
    /* min-height fixe plutôt que vh : évite le décalage classique des
       barres d'adresse mobiles dynamiques (100vh y est peu fiable) et reste
       cohérent quelle que soit la hauteur de fenêtre. */
    position: relative; overflow: hidden;
    min-height: 620px;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    padding: var(--space-4xl) var(--gutter);
}
@media (max-width: 900px) {
    .section--hero { min-height: 0; padding: var(--space-3xl) var(--gutter-mobile) var(--space-2xl); }
}
.section--split .section-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: center; }
.section--dark    { background: var(--surface-raised); }
.section--accent  { position: relative; background: var(--gradient-dark); overflow: hidden; }
.section--accent::before {
    content: ''; position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
    width: 500px; height: 300px; background: var(--gradient-radial-glow);
    pointer-events: none;
}
.section--showcase { position: relative; overflow: hidden; text-align: center; }
.section--metrics {
    background: var(--surface-raised);
    border-top: var(--border-width) solid var(--border-color);
    border-bottom: var(--border-width) solid var(--border-color);
    padding: var(--space-xl) var(--gutter);
}
.section--cta { text-align: center; padding: var(--space-3xl) var(--gutter); }
.section--timeline .section-inner { display: flex; flex-direction: column; gap: 0; }
.section--grid .section-inner { display: grid; gap: var(--space-lg); }

@media (max-width: 900px) {
    .section--split .section-inner { grid-template-columns: 1fr; gap: var(--space-2xl); }
}

/* Timeline : étapes verticales connectées (ex. Notre Méthode) */
.timeline-step { position: relative; padding-left: var(--space-xl); padding-bottom: var(--space-xl); border-left: var(--border-width) solid var(--border-color); }
.timeline-step:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline-step::before {
    content: attr(data-step);
    position: absolute; left: -20px; top: 0;
    width: 40px; height: 40px;
    background: var(--gradient-brand);
    border-radius: var(--radius-circle);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: var(--text-body-sm); color: #fff;
}

/* ==========================================================================
   15. ÉLÉMENTS TECHNOLOGIQUES
   --------------------------------------------------------------------------
   Composants visuels "signature" (halo, grille, particules...). Légers :
   CSS pur ou canvas 2D simple (voir assets/js/main.js pour le réseau de
   points). Pas de librairie 3D/WebGL à ce stade.
   ========================================================================== */
.zt-glow {
    position: absolute;
    width: 600px; height: 600px;
    background: var(--gradient-radial-glow);
    pointer-events: none;
}

.zt-dot-grid { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; pointer-events: none; }

/* Grille technologique statique (CSS pur, sans JS ni image) */
.zt-tech-grid {
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Ligne lumineuse décorative */
.zt-line-glow {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    opacity: 0.5;
}

/* Cartes connectées : trait reliant deux éléments (schémas simples) */
.zt-connector { position: relative; }
.zt-connector::after {
    content: '';
    position: absolute; top: 50%; left: 100%;
    width: var(--space-lg); height: 1px;
    background: var(--border-color-strong);
}

/* ==========================================================================
   16. ACCESSIBILITÉ & UTILITAIRES
   ========================================================================== */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: var(--space-sm); top: -60px;
    background: var(--cyan); color: var(--navy);
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-sm);
    z-index: var(--z-tooltip);
    transition: top var(--transition-fast);
    text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: var(--space-sm); }

/* Taille minimale des zones interactives (mobile) */
.btn, .btn-icon, .checkbox input, .radio input, .zt-nav-links a { min-height: 40px; }
.btn-icon, .checkbox input, .radio input { min-width: 40px; }

/* Utilitaire de largeur pleine (ex. bouton d'envoi de formulaire) */
.w-100 { width: 100%; justify-content: center; }

/* ==========================================================================
   MICRO-INTERACTIONS & ANIMATIONS
   ========================================================================== */
@keyframes zt-spin   { to { transform: rotate(360deg); } }
@keyframes zt-pulse  { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.3); } }
@keyframes zt-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes zt-fade-in-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes zt-scale-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

.zt-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--transition-slow), transform var(--transition-slow); }
.zt-reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .zt-reveal { opacity: 1; transform: none; transition: none; }
    * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}