/* Définit les variables de couleur globales du thème MVP. */
:root {
    /* Définit la couleur de fond principale claire. */
    --bg: #f2f5f8;

    /* Définit la couleur de surface des cartes. */
    --card: #ffffff;

    /* Définit la couleur de texte principale. */
    --text: #182230;

    /* Définit la couleur de texte secondaire. */
    --muted: #5d6b7b;

    /* Définit la couleur principale d'action. */
    --primary: #0058b0;

    /* Définit la couleur de succès. */
    --success: #0d8f4f;

    /* Définit la couleur d'avertissement. */
    --warning: #c67500;

    /* Définit la couleur d'erreur. */
    --error: #b42318;

    /* Définit la couleur de bordure standard. */
    --border: #d6dde5;
}

/* Applique un reset simple et cohérent sur tous les éléments. */
* {
    /* Calcule les largeurs en incluant les bordures et paddings. */
    box-sizing: border-box;
}

/* Applique le style global du body. */
body {
    /* Supprime les marges navigateur par défaut. */
    margin: 0;

    /* Définit une pile de police simple et lisible. */
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

    /* Définit la couleur de fond générale. */
    background: var(--bg);

    /* Définit la couleur de texte principale. */
    color: var(--text);
}

/* Définit le conteneur principal partagé par toutes les pages. */
.layout-main {
    /* Limite la largeur pour une lecture confortable. */
    max-width: 980px;

    /* Centre horizontalement le contenu. */
    margin: 0 auto;

    /* Ajoute des marges intérieures globales. */
    padding: 24px 16px 48px;
}

/* Définit l'apparence des cartes de contenu. */
.card {
    /* Définit le fond blanc des sections. */
    background: var(--card);

    /* Ajoute une bordure légère pour structurer le contenu. */
    border: 1px solid var(--border);

    /* Arrondit les angles pour une lecture visuelle plus douce. */
    border-radius: 12px;

    /* Ajoute de l'espace intérieur dans la carte. */
    padding: 20px;

    /* Ajoute de l'espace entre les cartes successives. */
    margin-bottom: 16px;

    /* Ajoute une ombre discrète de profondeur. */
    box-shadow: 0 8px 20px rgba(24, 34, 48, 0.04);
}

/* Définit le style des labels de section. */
.label {
    /* Supprime la marge haute pour compacter le bloc. */
    margin-top: 0;

    /* Définit une petite taille de texte pour label. */
    font-size: 0.86rem;

    /* Définit la couleur secondaire des labels. */
    color: var(--muted);

    /* Espace légèrement les lettres pour style signalétique. */
    letter-spacing: 0.06em;

    /* Transforme le texte en majuscules pour lisibilité signalétique. */
    text-transform: uppercase;
}

/* Définit le style visuel des numéros de ticket standards. */
.ticket-number {
    /* Supprime la marge verticale par défaut. */
    margin: 8px 0 16px;

    /* Définit une taille importante de ticket. */
    font-size: 2.6rem;

    /* Définit un poids de police fort. */
    font-weight: 800;
}

/* Définit la grille de boutons vendeur. */
.action-grid {
    /* Active un layout flexible horizontal. */
    display: flex;

    /* Permet le retour à la ligne sur petit écran. */
    flex-wrap: wrap;

    /* Ajoute un espacement entre les boutons. */
    gap: 10px;

    /* Ajoute un espace vertical avant/après la grille. */
    margin: 16px 0;
}

/* Définit le style de base des boutons. */
.btn {
    /* Supprime les bordures natives navigateur. */
    border: none;

    /* Arrondit les coins des boutons. */
    border-radius: 10px;

    /* Ajoute un padding confortable pour le clic tactile. */
    padding: 12px 16px;

    /* Définit un curseur main au survol. */
    cursor: pointer;

    /* Définit la couleur de texte des boutons. */
    color: #ffffff;

    /* Définit une taille de texte lisible. */
    font-size: 1rem;

    /* Définit un poids lisible des libellés de bouton. */
    font-weight: 600;
}

/* Définit la variation primaire des boutons. */
.btn-primary {
    /* Applique la couleur principale d'action. */
    background: var(--primary);
}

/* Définit la variation succès des boutons. */
.btn-success {
    /* Applique la couleur succès d'action. */
    background: var(--success);
}

/* Définit la variation avertissement des boutons. */
.btn-warning {
    /* Applique la couleur avertissement d'action. */
    background: var(--warning);
}

/* Définit le style de base des messages de feedback. */
.message {
    /* Réserve une hauteur minimale pour éviter le saut de layout. */
    min-height: 22px;

    /* Définit la marge basse du message. */
    margin-bottom: 0;

    /* Définit un poids de texte moyen. */
    font-weight: 600;
}

/* Définit la variante visuelle de message de succès. */
.message-success {
    /* Applique la couleur de succès. */
    color: var(--success);
}

/* Définit la variante visuelle de message d'erreur. */
.message-error {
    /* Applique la couleur d'erreur. */
    color: var(--error);
}

/* Définit la liste des liens d'accueil. */
.link-list {
    /* Supprime le style de puce natif. */
    list-style: none;

    /* Supprime le retrait par défaut. */
    padding: 0;

    /* Supprime la marge par défaut. */
    margin: 0;
}

/* Définit l'espacement entre les items de la liste de liens. */
.link-list li {
    /* Ajoute une séparation visuelle entre lignes. */
    border-top: 1px solid var(--border);

    /* Ajoute un espace vertical interne. */
    padding: 12px 0;
}

/* Supprime la bordure du premier item de liste. */
.link-list li:first-child {
    /* Retire la bordure supérieure du premier élément. */
    border-top: none;
}

/* Définit l'alignement horizontal des liens d'action inline. */
.inline-actions {
    /* Affiche les liens en ligne flexible. */
    display: flex;

    /* Ajoute un espacement entre les liens. */
    gap: 14px;

    /* Ajoute une marge haute légère sous le titre item. */
    margin-top: 6px;
}

/* Définit le style des liens d'action inline. */
.inline-actions a {
    /* Applique la couleur principale de lien. */
    color: var(--primary);

    /* Supprime le soulignement par défaut. */
    text-decoration: none;

    /* Définit un poids lisible de lien. */
    font-weight: 600;
}

/* Définit le style de la carte écran public. */
.display-board {
    /* Applique un fond sombre pour visibilité à distance. */
    background: #0f172a;

    /* Définit la couleur de texte claire. */
    color: #f8fafc;

    /* Ajoute un arrondi large sur le conteneur. */
    border-radius: 18px;

    /* Ajoute un padding généreux pour lecture à distance. */
    padding: 32px;

    /* Centre le texte de l'écran public. */
    text-align: center;

    /* Ajoute une bordure subtile. */
    border: 1px solid #1e293b;
}

/* Définit le style XXL du ticket sur écran public. */
.display-ticket-number {
    /* Définit une taille très grande pour visibilité loin. */
    font-size: clamp(4rem, 12vw, 8rem);

    /* Définit un poids très marqué pour la lisibilité. */
    font-weight: 900;

    /* Définit les marges verticales du numéro. */
    margin: 12px 0 24px;
}

/* Définit les ajustements responsive pour petits écrans. */
@media (max-width: 640px) {
    /* Réduit les paddings globaux pour écrans mobiles. */
    .layout-main {
        padding: 16px 12px 32px;
    }

    /* Réduit la taille ticket en mode mobile. */
    .ticket-number {
        font-size: 2rem;
    }

    /* Passe les boutons sur toute la largeur mobile. */
    .action-grid .btn {
        width: 100%;
    }
}