/* =====================================================================
   Metro Academy — Design System
   Aligné sur la charte Metro Center (Projet-RP / presentations)
   Tokens, base, et composants réutilisables.
   ===================================================================== */

:root {
    /* Couleurs marque */
    --keyence-red:   #e50012;
    --keyence-red-2: #ff2c40;
    --ink:    #0f1524;
    --muted:  #5b6478;
    --bg:     #f7f8fc;
    --card:   #ffffff;
    --border: #e7eaf1;

    /* Couleurs sémantiques */
    --success: #0a9d52;
    --success-bg: #e7f7ee;
    --warning: #c87a00;
    --warning-bg: #fff4e0;
    --danger:  #c0001a;
    --info:    #2563eb;
    --info-bg: #e8f0fe;

    /* Niveaux pédagogiques */
    --level-debutant:      #0a9d52;
    --level-intermediaire: #c87a00;
    --level-avance:        #e50012;

    /* Mouvement */
    --ease: cubic-bezier(.2,.7,.2,1);
    --t: .25s var(--ease);

    /* Rayons & ombres */
    --r-sm: 10px;
    --r:    16px;
    --r-lg: 22px;
    --shadow-sm: 0 2px 8px rgba(15,21,36,.06);
    --shadow:    0 12px 32px rgba(15,21,36,.08);
    --shadow-lg: 0 24px 60px rgba(15,21,36,.14);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overscroll-behavior-y: contain; }

body {
    font-family: "Manrope", "Segoe UI", Tahoma, sans-serif;
    color: var(--ink);
    background: var(--bg);
    min-height: 100vh;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

h1, h2, h3, h4 {
    font-family: "Space Grotesk", "Manrope", sans-serif;
    letter-spacing: -.02em;
    line-height: 1.15;
}

a { color: inherit; }

/* ===== Eyebrow (petit label en capitales) ===== */
.eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--keyence-red);
    background: rgba(229,0,18,.08);
    border: 1px solid rgba(229,0,18,.18);
    padding: 6px 14px;
    border-radius: 999px;
}

/* ===== Boutons ===== */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none; cursor: pointer;
    border: none;
    background: linear-gradient(135deg, var(--keyence-red-2) 0%, var(--keyence-red) 100%);
    color: #fff;
    border-radius: 999px;
    padding: 13px 22px;
    font-family: inherit;
    font-weight: 800; font-size: 14px; letter-spacing: -.01em;
    box-shadow: 0 8px 22px rgba(229,0,18,.32), 0 0 0 1px rgba(255,255,255,.10) inset;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease);
    min-height: 46px;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(229,0,18,.45); }
.btn:active { transform: translateY(0) scale(.98); }
.btn span.arrow { transition: transform .2s var(--ease); display: inline-block; }
.btn:hover span.arrow { transform: translateX(4px); }

.btn-ghost {
    background: #fff; color: var(--ink);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { border-color: var(--keyence-red); color: var(--keyence-red); box-shadow: var(--shadow-sm); }

.btn-sm { padding: 9px 16px; min-height: 38px; font-size: 13px; }

/* ===== Carte générique ===== */
.card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 26px;
    box-shadow: 0 12px 32px rgba(15,21,36,.06);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
    overflow: hidden;
}
.card.clickable { cursor: pointer; }
.card.clickable::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--keyence-red) 50%, transparent);
    opacity: 0; transition: opacity .3s var(--ease);
}
.card.clickable:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(229,0,18,.22);
}
.card.clickable:hover::before { opacity: 1; }

/* ===== Tag / chip ===== */
.tag {
    display: inline-block;
    background: rgba(229,0,18,.08);
    color: var(--keyence-red);
    border: 1px solid rgba(229,0,18,.18);
    border-radius: 999px;
    font-size: 11px; font-weight: 900; letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 5px 12px;
}
.tag.level-debutant      { color: var(--level-debutant);      background: rgba(10,157,82,.10);  border-color: rgba(10,157,82,.25); }
.tag.level-intermediaire { color: var(--level-intermediaire); background: rgba(200,122,0,.10);  border-color: rgba(200,122,0,.25); }
.tag.level-avance        { color: var(--level-avance);        background: rgba(229,0,18,.08);   border-color: rgba(229,0,18,.18); }

/* ===== Callout (encadré pédagogique) ===== */
.callout {
    border-radius: var(--r);
    padding: 16px 18px 16px 18px;
    margin: 18px 0;
    border-left: 4px solid var(--info);
    background: var(--info-bg);
    font-size: 15px;
}
.callout .callout-title { font-weight: 800; margin-bottom: 4px; }
.callout.tip     { border-left-color: var(--success); background: var(--success-bg); }
.callout.warning { border-left-color: var(--warning); background: var(--warning-bg); }
.callout.key     { border-left-color: var(--keyence-red); background: rgba(229,0,18,.06); }

/* ===== Barre de progression ===== */
.progress-track {
    height: 8px; border-radius: 999px;
    background: var(--border); overflow: hidden;
}
.progress-fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--keyence-red-2), var(--keyence-red));
    transition: width .5s var(--ease);
}
.progress-fill.complete {
    background: linear-gradient(90deg, #16c069, var(--success));
}

/* ===== Reveal au scroll ===== */
[data-animate] {
    opacity: 0; transform: translateY(22px);
    transition: opacity .55s var(--ease), transform .55s var(--ease);
}
[data-animate].animated { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    [data-animate] { opacity: 1 !important; transform: none !important; }
    * { animation: none !important; }
}

/* ===== Utilitaires ===== */
.wrap { max-width: 1180px; margin: 0 auto; padding: clamp(20px,3vw,36px) clamp(16px,4vw,40px) 90px; }
.grid { display: grid; gap: 22px; }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.hidden { display: none !important; }
.text-muted { color: var(--muted); }
.center { text-align: center; }