/*
 * TestGN - design system des pages publiques (Phase 13, Prompt 63).
 * Palette dérivée du logo (bouclier marine, coche verte, "N" or/rouge).
 * Un seul systeme d'angles (tout doux, 12-20px ; pilule pour les actions),
 * un seul accent dominant (vert), l'or en rehaut ponctuel, le rouge
 * strictement réservé aux etats d'erreur - jamais decoratif.
 */

:root {
    --tgn-navy-900: #0a1730;
    --tgn-navy-800: #0d1b34;
    --tgn-navy-700: #14284a;
    --tgn-navy-600: #1c3865;

    --tgn-green-700: #0f7a45;
    --tgn-green-600: #149951;
    --tgn-green-500: #1caf5e;
    --tgn-green-100: #e3f6ea;

    --tgn-gold-600: #c8930f;
    --tgn-gold-500: #dba91f;
    --tgn-gold-100: #faf1dc;

    --tgn-red-600: #c22b2b;
    --tgn-red-100: #fbe9e9;

    --tgn-ink: #14213d;
    --tgn-ink-muted: #57607a;
    --tgn-ink-faint: #8992a8;

    --tgn-surface: #ffffff;
    --tgn-surface-alt: #f5f7fb;
    --tgn-surface-navy: var(--tgn-navy-800);
    --tgn-border: #e3e7ef;

    --tgn-radius-sm: 10px;
    --tgn-radius-md: 16px;
    --tgn-radius-lg: 24px;

    --tgn-shadow-sm: 0 1px 2px rgba(13, 27, 52, .05), 0 1px 1px rgba(13, 27, 52, .04);
    --tgn-shadow-md: 0 12px 28px -8px rgba(13, 27, 52, .16);
    --tgn-shadow-lg: 0 32px 64px -16px rgba(13, 27, 52, .24);

    --tgn-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --tgn-container: 1200px;
}

/* ---------------------------------------------------------------- base */

body.tgn-public {
    font-family: var(--tgn-font-sans);
    color: var(--tgn-ink);
    background: var(--tgn-surface);
    -webkit-font-smoothing: antialiased;
}

.tgn-public h1, .tgn-public h2, .tgn-public h3, .tgn-public h4 {
    font-family: var(--tgn-font-sans);
    color: var(--tgn-ink);
    letter-spacing: -0.01em;
}

.tgn-public a { color: var(--tgn-green-700); }
.tgn-public a:hover { color: var(--tgn-green-600); }

.tgn-public .text-muted { color: var(--tgn-ink-muted) !important; }

.tgn-container { max-width: var(--tgn-container); margin: 0 auto; padding: 0 1.25rem; }

/* Passe l'utilisateur clavier directement au contenu */
.tgn-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--tgn-navy-900);
    color: #fff;
    padding: .75rem 1.25rem;
    border-radius: 0 0 var(--tgn-radius-sm) 0;
    z-index: 2000;
    font-weight: 600;
}
.tgn-skip-link:focus {
    left: 0;
    color: #fff;
}

.tgn-public :focus-visible {
    outline: 3px solid var(--tgn-gold-500);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- nav */

.tgn-nav {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--tgn-border);
    height: 72px;
}
.tgn-nav .tgn-container { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 1rem; }

.tgn-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 700; font-size: 1.15rem; color: var(--tgn-navy-900) !important; }
.tgn-brand img { height: 34px; width: auto; display: block; }

.tgn-nav-links { display: flex; align-items: center; gap: 1.75rem; }
.tgn-nav-links a { color: var(--tgn-ink); text-decoration: none; font-weight: 500; font-size: .95rem; }
.tgn-nav-links a:hover { color: var(--tgn-green-700); }

.tgn-nav-actions { display: flex; align-items: center; gap: .6rem; }

.tgn-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--tgn-radius-sm);
    border: 1px solid var(--tgn-border);
    background: #fff;
    font-size: 1.2rem;
    color: var(--tgn-navy-900);
}

.tgn-mobile-nav {
    display: none;
    position: fixed;
    inset: 72px 0 0 0;
    background: #fff;
    z-index: 1040;
    overflow-y: auto;
    padding: 1.5rem 1.25rem 2rem;
}
.tgn-mobile-nav.tgn-mobile-nav-open { display: block; }
.tgn-mobile-nav a {
    display: block;
    padding: .9rem 0;
    border-bottom: 1px solid var(--tgn-border);
    color: var(--tgn-ink);
    text-decoration: none;
    font-weight: 500;
}
.tgn-mobile-nav .tgn-btn { width: 100%; margin-top: 1rem; }

@media (max-width: 991.98px) {
    .tgn-nav-links { display: none; }
    .tgn-nav-toggle { display: inline-flex; }
}

/* ---------------------------------------------------------------- boutons (pilule) */

.tgn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1;
    padding: .8rem 1.5rem;
    border-radius: 999px;
    border: 1px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease;
    cursor: pointer;
}
.tgn-btn:active { transform: translateY(1px) scale(.98); }

.tgn-btn-primary { background: var(--tgn-green-600); color: #fff; }
.tgn-btn-primary:hover { background: var(--tgn-green-700); color: #fff; }

.tgn-btn-navy { background: var(--tgn-navy-900); color: #fff; }
.tgn-btn-navy:hover { background: var(--tgn-navy-800); color: #fff; }

.tgn-btn-outline { background: transparent; color: var(--tgn-navy-900); border-color: var(--tgn-border); }
.tgn-btn-outline:hover { background: var(--tgn-surface-alt); color: var(--tgn-navy-900); border-color: var(--tgn-ink-faint); }

.tgn-btn-ghost-light { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .4); }
.tgn-btn-ghost-light:hover { background: rgba(255, 255, 255, .18); color: #fff; }

.tgn-btn-lg { padding: 1rem 1.9rem; font-size: 1.02rem; }
.tgn-btn-sm { padding: .55rem 1.1rem; font-size: .85rem; }
.tgn-btn:disabled, .tgn-btn.disabled { opacity: .55; cursor: not-allowed; }

/* ---------------------------------------------------------------- surfaces */

.tgn-section { padding: 5rem 0; }
.tgn-section-tight { padding: 3rem 0; }
.tgn-section-alt { background: var(--tgn-surface-alt); }
.tgn-section-navy { background: var(--tgn-navy-900); color: rgba(255, 255, 255, .92); }
.tgn-section-navy .text-muted { color: rgba(255, 255, 255, .68) !important; }
.tgn-section-navy h2, .tgn-section-navy h3 { color: #fff; }

.tgn-card {
    background: var(--tgn-surface);
    border: 1px solid var(--tgn-border);
    border-radius: var(--tgn-radius-md);
    box-shadow: var(--tgn-shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease;
}
.tgn-card-hover:hover { transform: translateY(-4px); box-shadow: var(--tgn-shadow-md); }

.tgn-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .9rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
}
.tgn-badge-green { background: var(--tgn-green-100); color: var(--tgn-green-700); }
.tgn-badge-gold { background: var(--tgn-gold-100); color: var(--tgn-gold-600); }
.tgn-badge-navy { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .28); }
.tgn-badge-red { background: var(--tgn-red-100); color: var(--tgn-red-600); }

.tgn-icon-tile {
    width: 52px; height: 52px;
    border-radius: var(--tgn-radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}
.tgn-icon-tile-green { background: var(--tgn-green-100); color: var(--tgn-green-700); }
.tgn-icon-tile-gold { background: var(--tgn-gold-100); color: var(--tgn-gold-600); }
.tgn-icon-tile-navy { background: rgba(255, 255, 255, .1); color: #fff; }

.tgn-step-number {
    width: 44px; height: 44px;
    border-radius: 999px;
    background: var(--tgn-green-600);
    color: #fff;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------- hero */

.tgn-hero {
    background: linear-gradient(160deg, var(--tgn-navy-900) 0%, var(--tgn-navy-700) 100%);
    color: #fff;
    padding-top: 5.5rem;
    padding-bottom: 5rem;
}
.tgn-hero h1 { color: #fff; max-width: 22ch; }
.tgn-hero .lead { color: rgba(255, 255, 255, .82); max-width: 56ch; font-size: 1.15rem; }

/* ---------------------------------------------------------------- formulaires */

.tgn-public .form-label { font-weight: 600; color: var(--tgn-ink); font-size: .9rem; }
.tgn-public .form-control, .tgn-public .form-select {
    border-radius: var(--tgn-radius-sm);
    border-color: var(--tgn-border);
    padding: .7rem .9rem;
}
.tgn-public .form-control:focus, .tgn-public .form-select:focus {
    border-color: var(--tgn-green-500);
    box-shadow: 0 0 0 .2rem var(--tgn-green-100);
}
.tgn-public .form-text { color: var(--tgn-ink-faint); }
.tgn-public .invalid-feedback { color: var(--tgn-red-600); }

/* ---------------------------------------------------------------- footer */

.tgn-footer { background: var(--tgn-navy-900); color: rgba(255, 255, 255, .68); padding: 3.5rem 0 2rem; }
.tgn-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.tgn-footer a:hover { color: #fff; }
.tgn-footer h6 { color: #fff; font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1rem; }
.tgn-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 2.5rem; padding-top: 1.5rem; font-size: .85rem; }

/* ---------------------------------------------------------------- utilitaires */

.tgn-eyebrow {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tgn-green-700);
    margin-bottom: .75rem;
}

@media (max-width: 767.98px) {
    .tgn-hero { padding-top: 3rem; padding-bottom: 3rem; text-align: left; }
    .tgn-section { padding: 3.25rem 0; }
}

@media (prefers-reduced-motion: reduce) {
    .tgn-card, .tgn-btn { transition: none; }
}