/* ========================================
   Composant Checklist
   Liste de vérification avec icônes de statut
   ======================================== */

.checklist {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.checklist__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    transition: all 0.2s ease;
}

.checklist__item--clickable {
    cursor: pointer;
}

.checklist__item--clickable:hover {
    background: var(--background-light);
}

.checklist__item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-1);
}

.checklist__icon {
    flex-shrink: 0;
    font-size: 24px;
}

.checklist__icon--success {
    color: var(--green);
}

.checklist__icon--warning {
    color: var(--alerte-color);
}

.checklist__icon--error {
    color: var(--danger-color);
}

.checklist__text {
    flex: 1;
    font-size: 0.938rem;
    color: var(--text-color-main);
}

.checklist__action-icon {
    flex-shrink: 0;
    font-size: 20px;
    color: var(--text-color-light);
    transition: color 0.2s ease;
}

.checklist__item--clickable:hover .checklist__action-icon {
    color: var(--primary);
}

.checklist__item .btn {
    margin-left: auto;
}

/* ----------------------------------------
   Infobulle d'une ligne : la valeur saisie, au survol ou au focus clavier.
   Le texte vient de data-infobulle (placé par le gabarit ou par
   appliquerInfobulle() dans batiment.js), lignes séparées par "\n".
   Même teinte que .stat-card__tooltip : sombre dans les deux thèmes.
   Pas de title natif : il met une seconde à paraître.
   ---------------------------------------- */
.checklist__item[data-infobulle] {
    position: relative;
}

.checklist__item[data-infobulle]::after {
    content: attr(data-infobulle);
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0.5rem;
    width: max-content;
    max-width: min(22rem, calc(100vw - 5rem));
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    background: #111827;
    color: #f9fafb;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
    white-space: pre-line;
    overflow-wrap: anywhere;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    z-index: 60;
    pointer-events: none;
}

.checklist__item[data-infobulle]:hover::after,
.checklist__item[data-infobulle]:focus-visible::after {
    display: block;
}

/* Le focus clavier doit se voir sur la ligne elle-même. */
.checklist__item[data-infobulle]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* .card coupe ce qui dépasse (overflow: hidden) : l'infobulle de la dernière
   ligne serait rognée. Une carte qui porte une checklist avec infobulles laisse
   donc déborder. Sans effet visuel : la carte a un padding, aucun enfant ne
   touche ses coins arrondis. */
.card:has(.checklist__item[data-infobulle]) {
    overflow: visible;
}