/* ============================================
   cssSection.css — Système de couleurs par section
   Option A : trait coloré 3px bas du page-header
   ============================================ */

/* Variables couleurs par section */
:root {
    --c-parcours:      #E11D48;
    --c-parcours-l:    #FEF2F2;
    --c-parcours-m:    #FECACA;
    --c-conv:          #1D4ED8;
    --c-conv-l:        #EFF6FF;
    --c-conv-m:        #BFDBFE;
    --c-vocab:         #15803D;
    --c-vocab-l:       #F0FDF4;
    --c-vocab-m:       #BBF7D0;
    --c-atelier:       #B45309;
    --c-atelier-l:     #FFFBEB;
    --c-atelier-m:     #FDE68A;
    --c-immersion:     #6D28D9;
    --c-immersion-l:   #F5F3FF;
    --c-immersion-m:   #DDD6FE;
    --c-jeux:          #0E7490;
    --c-jeux-l:        #ECFEFF;
    --c-jeux-m:        #A5F3FC;
    --c-espace:        #374151;
    --c-espace-l:      #F9FAFB;
}

/* Base page-header — toujours le bandeau rouge existant */
.page-header {
    background: var(--blanc);
    border-bottom: 3px solid var(--bordure);
    padding: 20px 0;
}

/* Trait coloré par section */
.page-header.section-parcours   { border-bottom-color: var(--c-parcours) }
.page-header.section-conv       { border-bottom-color: var(--c-conv) }
.page-header.section-vocab      { border-bottom-color: var(--c-vocab) }
.page-header.section-atelier    { border-bottom-color: var(--c-atelier) }
.page-header.section-immersion  { border-bottom-color: var(--c-immersion) }
.page-header.section-jeux       { border-bottom-color: var(--c-jeux) }
.page-header.section-espace     { border-bottom-color: var(--c-espace) }
.page-header.section-canaries   { border-bottom-color: #D97706 }

/* Icône de section dans le page-header */
.section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-right: 10px;
}
.section-icon.parcours  { background: var(--c-parcours-l); }
.section-icon.conv      { background: var(--c-conv-l); }
.section-icon.vocab     { background: var(--c-vocab-l); }
.section-icon.atelier   { background: var(--c-atelier-l); }
.section-icon.immersion { background: var(--c-immersion-l); }
.section-icon.jeux      { background: var(--c-jeux-l); }

/* Étiquette de section (label uppercase coloré) */
.section-label {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 3px;
    display: block;
}
.section-label.parcours  { color: var(--c-parcours) }
.section-label.conv      { color: var(--c-conv) }
.section-label.vocab     { color: var(--c-vocab) }
.section-label.atelier   { color: var(--c-atelier) }
.section-label.immersion { color: var(--c-immersion) }
.section-label.jeux      { color: var(--c-jeux) }

/* Bouton couleur section */
.btn-section {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-sm);
    padding: 8px 18px;
    font-size: .875rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: opacity .15s;
    text-decoration: none;
}
.btn-section:hover { opacity: .88 }
.btn-section.parcours  { background: var(--c-parcours) }
.btn-section.conv      { background: var(--c-conv) }
.btn-section.vocab     { background: var(--c-vocab) }
.btn-section.atelier   { background: var(--c-atelier) }
.btn-section.immersion { background: var(--c-immersion) }
.btn-section.jeux      { background: var(--c-jeux) }

/* Card accent top par section */
.card-section { border-top: 2.5px solid var(--bordure) }
.card-section.parcours  { border-top-color: var(--c-parcours) }
.card-section.conv      { border-top-color: var(--c-conv) }
.card-section.vocab     { border-top-color: var(--c-vocab) }
.card-section.atelier   { border-top-color: var(--c-atelier) }
.card-section.immersion { border-top-color: var(--c-immersion) }
.card-section.jeux      { border-top-color: var(--c-jeux) }

/* Barre de progression colorée */
.prog-bar { height: 4px; background: var(--bordure); border-radius: 999px; overflow: hidden }
.prog-fill { height: 100%; border-radius: 999px; transition: width .3s }
.prog-fill.parcours  { background: var(--c-parcours) }
.prog-fill.conv      { background: var(--c-conv) }
.prog-fill.vocab     { background: var(--c-vocab) }
.prog-fill.atelier   { background: var(--c-atelier) }
.prog-fill.immersion { background: var(--c-immersion) }
.prog-fill.jeux      { background: var(--c-jeux) }

/* Fil de cours — états */
.cours-ligne {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--bordure);
    background: var(--blanc);
    transition: border-color .15s, background .15s;
}
.cours-ligne.termine  { border-left-color: var(--vert); background: var(--vert-l) }
.cours-ligne.en-cours { border-left-color: var(--bleu); background: var(--bleu-l) }
.cours-ligne.a-faire  { border-left-color: var(--bordure); background: var(--blanc) }
.cours-ligne:hover    { background: var(--bg) }

.cours-num {
    width: 24px; height: 24px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem; font-weight: 700;
    flex-shrink: 0;
    border: 2px solid var(--bordure);
    color: var(--muted);
    background: var(--bg);
}
.cours-num.termine  { background: var(--vert); border-color: var(--vert); color: #fff }
.cours-num.en-cours { background: var(--bleu); border-color: var(--bleu); color: #fff }

/* Filtre niveau — pills */
.filtre-niveaux { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px }
.filtre-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 14px; border-radius: 999px; font-size: .78rem; font-weight: 600;
    border: 1.5px solid var(--bordure); background: var(--bg); color: var(--muted);
    cursor: pointer; text-decoration: none; transition: all .15s;
}
.filtre-pill:hover { border-color: var(--c-parcours); color: var(--c-parcours) }
.filtre-pill.actif { background: var(--c-parcours); border-color: var(--c-parcours); color: #fff }
.filtre-pill.actif-a0 { background: #E11D48; border-color: #E11D48; color: #fff }
.filtre-pill.actif-a1 { background: #1D4ED8; border-color: #1D4ED8; color: #fff }
.filtre-pill.actif-a2 { background: #15803D; border-color: #15803D; color: #fff }
.filtre-pill.actif-b1 { background: #6D28D9; border-color: #6D28D9; color: #fff }
.filtre-pill.actif-b2 { background: #B45309; border-color: #B45309; color: #fff }

/* Carte jeu */
.card-jeu {
    background: var(--blanc);
    border: 0.5px solid var(--bordure);
    border-radius: var(--radius);
    border-top: 2.5px solid var(--bordure);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform .15s, box-shadow .15s;
}
.card-jeu:hover { transform: translateY(-2px) }
.card-jeu.debloque   { cursor: pointer }
.card-jeu.verrouille { opacity: .6 }
.card-jeu .jeu-ico   { font-size: 1.6rem; margin-bottom: 2px }
.card-jeu .jeu-titre { font-weight: 700; font-size: .95rem }
.card-jeu .jeu-desc  { font-size: .78rem; color: var(--muted); line-height: 1.4; flex: 1 }
.card-jeu .jeu-seuil {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .7rem; font-weight: 600;
    padding: 2px 8px; border-radius: 999px; align-self: flex-start;
}

/* Grille jeux 2 colonnes */
.grille-jeux {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

/* Carte vocabulaire thème */
.card-vocab {
    background: var(--blanc);
    border: 0.5px solid var(--bordure);
    border-top: 2.5px solid var(--c-vocab);
    border-radius: var(--radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform .15s;
}
.card-vocab:hover { transform: translateY(-2px) }
.card-vocab.verrouille { opacity: .55; border-top-color: var(--bordure) }
.card-vocab .vocab-ico  { font-size: 1.8rem; margin-bottom: 4px }
.card-vocab .vocab-titre{ font-weight: 700; font-size: .9rem }
.card-vocab .vocab-desc { font-size: .75rem; color: var(--muted); line-height: 1.4; flex: 1 }

/* Carte immersion */
.card-immersion {
    background: var(--blanc);
    border: 0.5px solid var(--bordure);
    border-top: 2.5px solid var(--c-immersion);
    border-radius: var(--radius);
    padding: 16px;
    transition: transform .15s;
}
.card-immersion:hover { transform: translateY(-2px) }

/* Grille 3 colonnes responsive */
.grille-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px }

@media(max-width:640px) {
    .grille-jeux   { grid-template-columns: 1fr 1fr }
    .grille-3      { grid-template-columns: 1fr 1fr }
}
@media(max-width:420px) {
    .grille-jeux   { grid-template-columns: 1fr }
    .grille-3      { grid-template-columns: 1fr }
}

/* Grille jeux compacte quand un jeu est actif */
.grille-jeux-mini {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--bordure);
}
.grille-jeux-mini .card-jeu { padding: 10px; }
.grille-jeux-mini .card-jeu .jeu-ico { font-size: 1.2rem }
.grille-jeux-mini .card-jeu .jeu-desc { display: none }