/* Styles pour les boutons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.938rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    box-shadow: 0 5px 5px -5px rgba(0,0,0,0.5);
    width: max-content;
}
.btn .material-symbols-outlined {
    font-size: 20px;
}

/* --small : l'ancien nom de --sm, encore écrit dans 25 gabarits (administration surtout). */
.btn--sm,
.btn--small {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}
/* Un --small sans couleur (« Monter », « Descendre », « Modifier » de l'administration) prend le contour discret
   d'« Annuler » au lieu du bouton gris du navigateur. Écrit AVANT les couleurs : à poids égal, toute couleur
   (.btn--secondary…) l'emporte. */
.btn--small {
    background: transparent;
    color: var(--text-color-main);
    border-color: var(--border-color);
}
.btn--sm .material-symbols-outlined,
.btn--small .material-symbols-outlined {
    font-size: 18px;
}
.btn:hover {
    filter: brightness(0.90);
}

/* Les aplats viennent des variables --bouton-* (base/_variables.css, mode_sombre.css) : chacun porte son texte à 4,5:1
   au moins, en clair comme en sombre (lot « composants », 24/10/2026). */
.btn--primary {
    background: var(--bouton-primaire);
    color: var(--encre-sur-primaire);
    border-color: var(--bouton-primaire);
}
.btn--primary-dark {
    background: var(--primary-dark);
    color: var(--encre-sur-primaire);
    border-color: var(--primary-dark);
}
.btn--primary-darker {
    background: var(--primary-darker);
    color: var(--encre-sur-primaire);
    border-color: var(--primary-darker);
}
/* « Plus clair » : un bouton teinté, fond bleu pâle et texte bleu soutenu. Un aplat plus clair que --primary ne porte
   pas le blanc à 4,5:1 (3,5 en clair, 2,6 en sombre). */
.btn--primary-lighter {
    background: color-mix(in srgb, var(--primary) 10%, var(--panneau-fond));
    color: var(--pastille-principale-texte);
    border-color: color-mix(in srgb, var(--primary) 30%, var(--panneau-fond));
}
.btn--green {
    background: var(--bouton-vert);
    color: var(--encre-sur-primaire);
    border-color: var(--bouton-vert);
}
/* L'orange porte une encre sombre : le blanc n'y atteint que 2,5:1. --warning est son synonyme (administration). */
.btn--orange,
.btn--warning {
    background: var(--bouton-orange);
    color: var(--bouton-orange-texte);
    border-color: var(--bouton-orange);
}
.btn--red {
    background: var(--bouton-rouge);
    color: var(--encre-sur-primaire);
    border-color: var(--bouton-rouge);
}
.btn--purple {
    background: var(--bouton-violet);
    color: var(--encre-sur-primaire);
    border-color: var(--bouton-violet);
}
.btn--info {
    background: var(--bouton-info);
    color: var(--encre-sur-primaire);
    border-color: var(--bouton-info);
}

.btn--success, .btn--valid {
    background: var(--bouton-succes);
    color: var(--encre-sur-primaire);
    border-color: var(--bouton-succes);
}

/* « Annuler » : UN seul style, sur les pages comme dans les fenêtres (_modal.css) — une pastille discrète, contour fin,
   texte du thème. */
.btn--cancel {
    background: transparent;
    color: var(--text-color-main);
    border-color: var(--border-color);
    box-shadow: none;
}
.btn--cancel:hover {
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border-color));
    filter: none;
}

.btn--secondary {
    background: var(--bouton-secondaire);
    color: var(--encre-sur-primaire);
    border-color: var(--bouton-secondaire);
}
.btn--md {
    padding: 8px 10px;
    font-size: 0.9em;
}
.btn--sm.icon {
    padding: 5px 12px 5px 8px;
}
.btn--md.icon {
    padding: 8px 15px 8px 10px;
}
.btn--danger {
    background: var(--bouton-rouge);
    color: var(--encre-sur-primaire);
    border-color: var(--bouton-rouge);
}

.btn--outline {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}

.btn--outline:hover {
    background: var(--bouton-primaire);
    color: var(--encre-sur-primaire);
}

.btn-outline-primary {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-primary:hover {
    background: var(--bouton-primaire);
    color: var(--encre-sur-primaire);
}

.btn-outline-secondary {
    background: transparent;
    color: var(--text-color-main);
    border-color: var(--border-color);
}

.btn-outline-secondary:hover {
    background: var(--bouton-secondaire);
    color: var(--encre-sur-primaire);
    border-color: var(--bouton-secondaire);
}

/* Les contours colorés : le texte prend la couleur de titre du ton (4,5:1 sur le fond de page, clair et sombre),
   le survol l'aplat du bouton plein correspondant. */
.btn-outline-success {
    background: transparent;
    color: var(--ton-succes-titre);
    border-color: var(--ton-succes-titre);
}

.btn-outline-success:hover {
    background: var(--bouton-succes);
    border-color: var(--bouton-succes);
    color: var(--encre-sur-primaire);
}

.btn-outline-warning {
    background: transparent;
    color: var(--ton-attention-titre);
    border-color: var(--ton-attention-titre);
}

.btn-outline-warning:hover {
    background: var(--bouton-orange);
    border-color: var(--bouton-orange);
    color: var(--bouton-orange-texte);
}

.btn-outline-danger {
    background: transparent;
    color: var(--ton-erreur-titre);
    border-color: var(--ton-erreur-titre);
}

.btn-outline-danger:hover {
    background: var(--bouton-rouge);
    border-color: var(--bouton-rouge);
    color: var(--encre-sur-primaire);
}

.btn-link {
    background: transparent;
    color: var(--primary);
    border: none;
    text-decoration: underline;
    padding: 0;
}

.btn-link:hover {
    color: var(--primary-dark);
}

.btn--premium {
    background: linear-gradient(90deg, #2b50ff 0%, #11c19f 100%);
    color: white;
    box-shadow: 0 4px 16px rgba(41,87,255,0.12);
    transition: filter 0.2s;
    border: none;
}

.btn--statut {
    padding:5px 10px;
    background-color:#666;
    color: white;
    border: 1px solid #666;
}
.btn--statut:hover {
    background-color: lightgray;
    color: black;
    border: 1px solid lightgray;
}

.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--panneau-fond);
    border: 2px solid var(--stroke);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    transition: all 0.2s ease;
    margin-bottom: 1rem;
}
.btn-google:hover {
    background: var(--bg);
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-1);
    text-decoration: none;
}
.btn-google img {
    width: 20px;
    height: 20px;
}
.btn--ghost {
    background: transparent;
    color: var(--primary);
    border: none;
    box-shadow: none;
}
.btn--ghost:hover {
    background: var(--bg);
    color: var(--primary);
    border: none;
    box-shadow: none;
}
/* Sur téléphone, un bouton au libellé long passe à la ligne au lieu
   d'élargir la page (« Créer une nouvelle notice pour ce bâtiment »,
   « Ajouter une notice de sécurité incendie »…). Il ne dépasse jamais la
   largeur de son conteneur ; l'icône garde sa taille. `width: auto` remplace
   le `max-content` du bloc .btn, qui interdisait au bouton de rétrécir. */
@media screen and (max-width: 600px) {
    .btn {
        white-space: normal;
        width: auto;
        max-width: 100%;
    }
    .btn .material-symbols-outlined {
        flex-shrink: 0;
    }
}