/* Styles de l'Aide CoolBridge (page aide.html et pages aide\*.html).
   Fichier propre au didacticiel : `assets/css/style.css` n'est pas modifié.
   Monter le `?v=` ici à chaque changement, et le répercuter dans le
   `<link>` de toutes les pages qui chargent ce fichier. */

/* ===== Recherche ===== */
.aide-recherche {
    margin: 24px 0 32px;
}

.aide-recherche label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--vert-sapin);
}

.aide-recherche input[type="search"] {
    width: 100%;
    max-width: 480px;
    padding: 10px 14px;
    font-size: 18px;
    border: 1px solid var(--texte-clair);
    border-radius: 8px;
    color: var(--texte);
    background-color: #fff;
}

.aide-aucun {
    color: var(--texte-clair);
    margin-bottom: 24px;
}

/* ===== Pastilles ===== */
.aide-famille {
    margin-bottom: 32px;
}

ul.pastilles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
}

.pastille-lien {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
}

a.pastille-lien {
    background-color: var(--vert-sapin);
    color: var(--creme);
}

a.pastille-lien:hover,
a.pastille-lien:focus {
    background-color: var(--or);
    color: var(--vert-sapin);
    outline: 2px solid var(--vert-sapin);
    outline-offset: 2px;
}

span.pastille-lien {
    background-color: transparent;
    border: 1px dashed var(--texte-clair);
    color: var(--texte-clair);
    cursor: default;
}

em.pastille-bientot {
    font-size: 13px;
    font-style: normal;
}

em.pastille-bientot::before { content: " ("; }
em.pastille-bientot::after { content: ")"; }

/* ===== Page de thème : étapes ===== */
.aide-retour {
    display: inline-block;
    margin: 16px 0;
    font-weight: 600;
}

.aide-source {
    display: none;
}

ol.aide-etapes {
    list-style: none;
    padding: 0;
    margin: 16px 0 32px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    gap: 24px;
    counter-reset: aide-etape;
}

.aide-etape {
    counter-increment: aide-etape;
    text-align: center;
}

.aide-etape::before {
    content: "Étape " counter(aide-etape);
    display: block;
    font-weight: 700;
    color: var(--vert-sapin);
    margin-bottom: 8px;
}

.aide-etape img {
    width: 100%;
    max-width: 390px;
    height: auto;
    border: 1px solid var(--texte-clair);
    border-radius: 12px;
}

.aide-etape p {
    margin-top: 8px;
}

/* ===== Impression ===== */
@media print {
    .banner-lancement,
    .site-header,
    nav.menu-principal,
    .site-footer,
    .aide-retour,
    .aide-recherche {
        display: none;
    }

    .aide-source {
        display: block;
        font-size: 12px;
        color: #444;
    }

    body {
        background: none;
        background-color: #fff;
        color: #000;
    }

    h1, h2 {
        color: var(--vert-sapin);
    }

    ol.aide-etapes {
        grid-template-columns: repeat(2, 1fr);
    }

    .aide-etape {
        break-inside: avoid;
    }

    .aide-etape img {
        max-height: 11cm;
        width: auto;
    }

    @page {
        margin: 15mm;
    }
}