/* ============================================================
   CYCL — Cabinet YANA Conseil Learning
   Feuille de styles officielle (design tokens — contracts/design-tokens.md)
   Charte : cyc.md §62-§63. Bootstrap 5 local + styles propres.
   ============================================================ */

:root {
    /* Palette officielle (§61.2) */
    --yana-bleu-profond: #123B6D;
    --yana-bleu-electrique: #1769E0;
    --yana-vert-emeraude: #10A37F;
    --yana-or: #D9A441;
    --yana-blanc: #FFFFFF;
    --yana-gris-clair: #F5F7FA;
    --yana-bleu-nuit: #0B1F33;

    /* Sémantique */
    --yana-erreur: #B91C1C;
    --yana-avertissement: #B45309;
    --yana-succes: var(--yana-vert-emeraude);

    /* Typographie */
    --yana-font-titres: "Manrope", system-ui, sans-serif;
    --yana-font-texte: "Inter", system-ui, sans-serif;

    /* Espacements / rayons / ombres */
    --yana-radius: 12px;
    --yana-radius-sm: 8px;
    --yana-ombre: 0 2px 12px rgba(11, 31, 51, .08);
    --yana-ombre-forte: 0 8px 24px rgba(11, 31, 51, .14);
}

body {
    font-family: var(--yana-font-texte);
    background: var(--yana-gris-clair);
    color: var(--yana-bleu-nuit);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--yana-font-titres);
    color: var(--yana-bleu-nuit);
}

/* --- Boutons --- */
.btn-yana-primary {
    background: var(--yana-bleu-electrique);
    border: 1px solid var(--yana-bleu-electrique);
    color: var(--yana-blanc);
    border-radius: var(--yana-radius-sm);
    font-weight: 600;
    padding: .65rem 1.4rem;
}
.btn-yana-primary:hover { background: var(--yana-bleu-profond); color: var(--yana-blanc); }

.btn-yana-outline {
    background: transparent;
    border: 1.5px solid var(--yana-bleu-electrique);
    color: var(--yana-bleu-electrique);
    border-radius: var(--yana-radius-sm);
    font-weight: 600;
    padding: .65rem 1.4rem;
}
.btn-yana-outline:hover { background: var(--yana-bleu-electrique); color: var(--yana-blanc); }

.btn-yana-gold {
    background: var(--yana-or);
    border: 1px solid var(--yana-or);
    color: var(--yana-bleu-nuit);
    border-radius: var(--yana-radius-sm);
    font-weight: 700;
    padding: .65rem 1.4rem;
}

/* --- Cartes --- */
.card-yana {
    background: var(--yana-blanc);
    border: none;
    border-radius: var(--yana-radius);
    box-shadow: var(--yana-ombre);
}
.card-yana:hover { box-shadow: var(--yana-ombre-forte); }

/* --- Badges --- */
.badge-yana-success { background: var(--yana-vert-emeraude); color: #fff; }
.badge-yana-gold { background: var(--yana-or); color: var(--yana-bleu-nuit); }
.badge-yana-bleu { background: var(--yana-bleu-profond); color: #fff; }

/* --- Barre de progression --- */
.progress-yana { height: 8px; background: var(--yana-gris-clair); border-radius: 999px; overflow: hidden; }
.progress-yana .bar { height: 100%; background: var(--yana-vert-emeraude); border-radius: 999px; }

/* --- Timeline parcours (§61.9) --- */
.timeline-yana { list-style: none; padding: 0; position: relative; }
.timeline-yana::before {
    content: ""; position: absolute; left: 14px; top: 0; bottom: 0; width: 2px; background: var(--yana-gris-clair);
}
.timeline-yana li { position: relative; padding: .5rem 0 .5rem 3rem; }
.timeline-yana li::before {
    content: ""; position: absolute; left: 8px; top: 1rem; width: 14px; height: 14px;
    border-radius: 50%; background: var(--yana-gris-clair); border: 3px solid var(--yana-blanc);
    box-shadow: 0 0 0 2px var(--yana-bleu-electrique);
}
.timeline-yana li.done::before { background: var(--yana-vert-emeraude); box-shadow: 0 0 0 2px var(--yana-vert-emeraude); }
.timeline-yana li.current::before { background: var(--yana-or); box-shadow: 0 0 0 2px var(--yana-or); }

/* --- Header / Footer --- */
.site-header { background: var(--yana-bleu-profond); }
.site-header .nav-link { color: rgba(255, 255, 255, .85); font-weight: 500; }
.site-header .nav-link:hover, .site-header .nav-link.active { color: #fff; }
.site-footer { background: var(--yana-bleu-nuit); color: rgba(255, 255, 255, .75); }
.site-footer a { color: rgba(255, 255, 255, .75); text-decoration: none; }
.site-footer a:hover { color: #fff; }

/* --- Hero --- */
.hero-yana { background: linear-gradient(135deg, var(--yana-bleu-profond) 0%, var(--yana-bleu-nuit) 100%); color: #fff; }
.hero-yana h1 { color: #fff; }
.hero-yana .lead { color: rgba(255, 255, 255, .85); }
.hero-yana .slogan { color: var(--yana-or); font-style: italic; }

/* --- Statistiques --- */
.stat-yana { text-align: center; }
.stat-yana .value { font-family: var(--yana-font-titres); font-size: 2.2rem; font-weight: 800; color: var(--yana-bleu-profond); }
.stat-yana .label { color: #64748b; }

/* --- Accessibilité (§61.15) --- */
:focus-visible { outline: 3px solid var(--yana-bleu-electrique); outline-offset: 2px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--yana-bleu-electrique); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- Utilitaires --- */
.text-yana-vert { color: var(--yana-vert-emeraude); }
.text-yana-or { color: var(--yana-or); }
.bg-yana-bleu-profond { background: var(--yana-bleu-profond); }
.bg-yana-gris-clair { background: var(--yana-gris-clair); }