/* ——— Installer l'application et activer les notifications ——— */
.installation {
    position: relative;
    margin: 0 0 18px;
    padding: 16px;
    border: 1px solid #CDEFF8;
    border-radius: 18px;
    background: linear-gradient(135deg, #E6FAFE 0%, #FFFFFF 70%);
    color: var(--le-navy);
    box-shadow: 0 10px 26px rgba(0, 50, 185, 0.08);
    animation: installation-arrivee 0.4s ease-out both;
}
.installation[hidden] { display: none; }
.installation-connexion { margin: 28px 0 0; }
.installation-tete { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding-right: 28px; }
.installation-tete > div { min-width: 0; }
.installation-icone { flex: none; width: 48px; height: 48px; border-radius: 13px; box-shadow: 0 6px 14px rgba(0, 50, 185, 0.25); }
.installation h2 { margin: 0 0 3px; font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: normal; text-transform: none; color: var(--le-navy); }
.installation-intro { margin: 0; font-size: 14px; line-height: 1.4; color: var(--text-muted); }
.installation-etapes { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: etape; }
.installation-etape { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.85); counter-increment: etape; }
.installation-etape[data-etat="masque"] { display: none; }
.installation-puce {
    display: grid;
    place-items: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--le-blue);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}
.installation-puce::before { content: counter(etape); }
.installation-etape[data-etat="fait"] .installation-puce { background: var(--success); }
.installation-etape[data-etat="fait"] .installation-puce::before { content: "✓"; }
.installation-etape:is([data-etat="attente"], [data-etat="bloque"]) .installation-puce { background: var(--border-strong); }
.installation-texte { display: grid; flex: 1; gap: 2px; min-width: 0; }
.installation-texte strong { font-size: 15px; font-weight: 700; line-height: 1.25; }
.installation-texte small { font-size: 13px; line-height: 1.38; color: var(--text-muted); overflow-wrap: anywhere; }
.installation-texte small:empty { display: none; }
.installation-texte small svg { width: 15px; height: 15px; margin: 0 1px; vertical-align: -2px; color: var(--le-blue); }
.installation-etape[data-etat="fait"] .installation-texte strong { color: var(--text-muted); }
.installation-bouton {
    flex: none;
    min-height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: var(--le-navy);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}
.installation-bouton[hidden] { display: none; }
.installation-bouton:hover { background: var(--le-blue); }
.installation-bouton[disabled] { opacity: 0.6; cursor: progress; }
.installation-bouton:focus-visible, .installation-fermer:focus-visible { outline: 3px solid var(--le-cyan); outline-offset: 2px; }
.installation-fermer {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.installation-fermer:hover { background: rgba(0, 50, 185, 0.08); color: var(--le-navy); }

@keyframes installation-arrivee {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .installation { animation: none; }
}