/* ========================================
   MESSAGE COMPONENT
   Messages, alertes et boîtes d'information unifiés
   ======================================== */

.message {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--radius-lg, 12px);
    background-color: var(--surface, #ffffff);
    border: 1px solid var(--message-bord);
    border-left: 4px solid var(--message-bord);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 1rem;
    transition: all 0.2s ease;
    align-items: center;
}

.message:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ========================================
   ICÔNE
   ======================================== */

.message__icon {
    flex-shrink: 0;
    font-size: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================================
   CONTENU
   ======================================== */

.message__content {
    flex: 1;
    min-width: 0;
}

.message__title {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #111827);
    line-height: 1.4;
}

.message__text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--message-texte);
}

/* Quand il n'y a pas de titre, le texte est aligné au centre verticalement */
.message:not(:has(.message__title)) .message__content {
    display: flex;
    align-items: center;
}

.message:not(:has(.message__title)) .message__text {
    font-size: 0.875rem;
}

/* ========================================
   TYPES (COULEURS)
   ======================================== */

/* Les cinq tons passent par les variables --ton-* (base/_variables.css, mode_sombre.css) : le thème sombre suit
   tout seul, sans surcharge. Un texte posé directement dans le message prend la couleur de texte du ton. */
.message--info {
    background-color: var(--ton-info-fond);
    border-color: var(--ton-info-bord);
    color: var(--ton-info-texte);
}
.message--info .message__icon { color: var(--ton-info-icone); }
.message--info .message__title { color: var(--ton-info-titre); }
.message--info .message__text { color: var(--ton-info-texte); }

.message--success {
    background-color: var(--ton-succes-fond);
    border-color: var(--ton-succes-bord);
    color: var(--ton-succes-texte);
}
.message--success .message__icon { color: var(--ton-succes-icone); }
.message--success .message__title { color: var(--ton-succes-titre); }
.message--success .message__text { color: var(--ton-succes-texte); }

.message--warning {
    background-color: var(--ton-attention-fond);
    border-color: var(--ton-attention-bord);
    color: var(--ton-attention-texte);
}
.message--warning .message__icon { color: var(--ton-attention-icone); }
.message--warning .message__title { color: var(--ton-attention-titre); }
.message--warning .message__text { color: var(--ton-attention-texte); }

.message--error {
    background-color: var(--ton-erreur-fond);
    border-color: var(--ton-erreur-bord);
    color: var(--ton-erreur-texte);
}
.message--error .message__icon { color: var(--ton-erreur-icone); }
.message--error .message__title { color: var(--ton-erreur-titre); }
.message--error .message__text { color: var(--ton-erreur-texte); }

.message--help {
    background-color: var(--ton-aide-fond);
    border-color: var(--ton-aide-bord);
    color: var(--ton-aide-texte);
}
.message--help .message__icon { color: var(--ton-aide-icone); }
.message--help .message__title { color: var(--ton-aide-titre); }
.message--help .message__text { color: var(--ton-aide-texte); }

/* ========================================
   TAILLES
   ======================================== */

/* Compact - Style alerte (petite, discrète) */
.message--compact {
    padding: 0.75rem 1rem;
    gap: 0.25rem;
    border-width: 1px;
    border-left-width: 4px;
    align-items: center;
}

.message--compact .message__icon {
    font-size: 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
}

.message--compact .message__text {
    font-size: 0.875rem;
}

/* Normal - Taille par défaut (défini ci-dessus) */
.message--normal {
    padding: 1.25rem;
    gap: 1.25rem;
}

.message--normal .message__icon, .message--narrow .message__icon, .message--wide .message__icon  {
    font-size: 2rem;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-md, 8px);
    padding: 0.5rem;
}

/* Icône avec fond coloré pour taille normal : l'aplat du ton, l'encre --ton-encre-sur-icone (blanche en clair, sombre en sombre). */
.message--normal.message--info .message__icon { background-color: var(--ton-info-icone); color: var(--ton-encre-sur-icone); }
.message--normal.message--success .message__icon { background-color: var(--ton-succes-icone); color: var(--ton-encre-sur-icone); }
.message--normal.message--warning .message__icon { background-color: var(--ton-attention-icone); color: var(--ton-encre-sur-icone); }
.message--normal.message--error .message__icon { background-color: var(--ton-erreur-icone); color: var(--ton-encre-sur-icone); }
.message--normal.message--help .message__icon { background-color: var(--ton-aide-icone); color: var(--ton-encre-sur-icone); }

.message--normal .message__title {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

/* Large - Info-box importante (RGPD, etc.) */
.message--large {
    padding: 2rem;
    gap: 1.5rem;
}

.message--large .message__icon {
    font-size: 3rem;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-md, 8px);
    padding: 0.75rem;
}

/* Icône avec fond coloré pour taille large : l'aplat du ton, l'encre --ton-encre-sur-icone (blanche en clair, sombre en sombre). */
.message--large.message--info .message__icon { background-color: var(--ton-info-icone); color: var(--ton-encre-sur-icone); }
.message--large.message--success .message__icon { background-color: var(--ton-succes-icone); color: var(--ton-encre-sur-icone); }
.message--large.message--warning .message__icon { background-color: var(--ton-attention-icone); color: var(--ton-encre-sur-icone); }
.message--large.message--error .message__icon { background-color: var(--ton-erreur-icone); color: var(--ton-encre-sur-icone); }
.message--large.message--help .message__icon { background-color: var(--ton-aide-icone); color: var(--ton-encre-sur-icone); }

.message--large .message__title {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.message--large .message__text {
    font-size: 1rem;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .message--normal,
    .message--large {
        gap: 1rem;
        padding: 1rem;
    }

    .message--normal .message__icon,
    .message--large .message__icon {
        align-self: flex-start;
        font-size: 2rem;
        width: 2rem;
        height: 2rem;
    }

    .message--large .message__title {
        font-size: 1.125rem;
    }

    .message--large .message__text {
        font-size: 0.9375rem;
    }
}

/* ========================================
   VARIANTES SUPPLÉMENTAIRES
   ======================================== */

/* Message avec bordure gauche accentuée uniquement */
.message--left-accent {
    border-left-width: 4px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
}

/* Message sans bordure, juste l'ombre */
.message--borderless {
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Message avec fond dégradé subtil */
.message--gradient.message--info {
    background: linear-gradient(135deg, var(--ton-info-fond) 0%, color-mix(in srgb, var(--ton-info-bord) 5%, transparent) 100%);
}

.message--gradient.message--success {
    background: linear-gradient(135deg, var(--ton-succes-fond) 0%, color-mix(in srgb, var(--ton-succes-bord) 5%, transparent) 100%);
}

.message--gradient.message--warning {
    background: linear-gradient(135deg, var(--ton-attention-fond) 0%, color-mix(in srgb, var(--ton-attention-bord) 5%, transparent) 100%);
}

.message--gradient.message--error {
    background: linear-gradient(135deg, var(--ton-erreur-fond) 0%, color-mix(in srgb, var(--ton-erreur-bord) 5%, transparent) 100%);
}

.message--gradient.message--help {
    background: linear-gradient(135deg, var(--ton-aide-fond) 0%, color-mix(in srgb, var(--ton-aide-bord) 5%, transparent) 100%);
}

.message--narrow {
    max-width: 600px;
    margin: 0 auto 1rem auto;
}

.message--wide {
    max-width: 1000px;
    margin: 0 auto 1rem auto;
}

/* ========================================
   COMPATIBILITÉ AVEC ANCIENS NOMS
   ======================================== */

/* Rétrocompatibilité alert-* */
.alert {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-lg, 12px);
    background-color: var(--surface, #ffffff);
    border: 1px solid var(--message-bord);
    border-left-width: 4px;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--message-texte);
}
/* Sur téléphone, un long mot (nom de variable, adresse) passe à la ligne au lieu d'élargir l'alerte. */
@media (max-width: 768px) {
    .alert > :not(.material-symbols-outlined) {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

/* Les alertes flash prennent les tons des messages (un seul jeu de couleurs, clair et sombre). Les noms à double
   tiret (.alert--warning…), écrits dans une dizaine de gabarits, en sont les synonymes : ils restaient neutres. */
.alert-success, .alert--success { background-color: var(--ton-succes-fond); border-color: var(--ton-succes-bord); color: var(--ton-succes-texte); }
.alert-info, .alert--info { background-color: var(--ton-info-fond); border-color: var(--ton-info-bord); color: var(--ton-info-texte); }
.alert-warning, .alert--warning { background-color: var(--ton-attention-fond); border-color: var(--ton-attention-bord); color: var(--ton-attention-texte); }
.alert-error, .alert--error,
.alert-danger, .alert--danger { background-color: var(--ton-erreur-fond); border-color: var(--ton-erreur-bord); color: var(--ton-erreur-texte); }