/* RESET MINIMAL */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* VARIABLES GLOBALES */
:root {
    /* couleurs */
    --color-bg: rgba(0,0,0,1);
    --footer-color: rgba(34,34,34,1);  /* Avant : color-surface */
    --header-color: rgba(17,24,39,1);
    --color-text: rgba(255, 255, 255, 1);
    --color-success: #22c55e;
    --color-error: #ef4444;
    --color-warning: #f59e0b;
    --titre-text-color: rgba(255,255,255,1);

    /* layout */
    --header-padding: 14px 20px;
    --footer-padding: 0.8rem;
    --controls-color: rgba(255, 255, 255, 1);

    /* typo */
    --font-family: Arial, sans-serif;
    --font-size-base: 16px;
    --font-size-lg: 1.5rem;

    /* slideshow */
    --slideshow-max-width: 90%;
    --slideshow-max-height: 100%;

    /* photos */
    --photo-radius: 12px;
    --photo-shadow: 0 10px 30px rgba(0,0,0,0.5);
    --photo-border-width: 0px;
    --photo-border-color: rgba(0,0,0,0);
    --photo-border-style: solid;

    --photo-padding: 0px; /* pour effet cadre plus tard */
    --photo-bg: rgba(0,0,0,0);

    /* animations */
    --transition-speed: 1s;

    /* QR CODE */
    --qr-overlay-color-start: 0, 0, 0;
    --qr-overlay-color-end: 0, 0, 0;
    --qr-overlay-opacity-start: 0.6;
    --qr-overlay-opacity-end: 0.9;
    --qr-box-bg: rgba(255, 255, 255, 0.08);
    --qr-box-border: rgba(255, 255, 255, 0.15);
    --qr-box-border-width: 1px;
    --qr-box-radius: 20px;
    --qr-box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    --qr-text-color: rgb(255,255,255);
    /* scan effect */
    --qr-scan: rgba(0, 255, 200,0.18);
    --qr-scan-color: 0, 255, 200;
    --qr-scan-opacity: 0.18;
    /* QR IMAGE (le QR lui-même) */
    --qr-image-size: 100%;
    --qr-image-padding: 14px;
    --qr-image-radius: 16%;
    --qr-image-border-width: 0px;
    --qr-image-border-color: rgba(0,0,0,0);
    --qr-image-border-style: solid;
    --qr-image-shadow: 0 10px 30px rgba(0,0,0,0.3);

    /* SYSTEM */
    --bg-modale: #fff;
    --title-modale: #333;
    --text-empty: #666;
}

/* BODY */
body {
    font-family: var(--font-family);
    background-color: var(--color-bg);
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* ============================= */
/* MODALE GENERIQUE (Erreur/Info) */
/* ============================= */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 10000; /* au-dessus du reste */
}

.modal-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    background: var(--bg-modale);
    padding: 24px 32px;
    border-radius: 12px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    position: relative;
}

.modal-title {
    font-size: 1.25rem;
    margin-bottom: 12px;
    color: var(--title-modale);
}

.modal-text {
    font-size: 1rem;
    color: var(--text-empty);
    margin-bottom: 20px;
}

.modal-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.modal-buttons .modal-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    background-color: #ff4d6d; /* rose foncé */
    color: #fff;
    font-weight: 500;
    transition: background 0.2s ease;
}

.modal-buttons .modal-btn:hover {
    background-color: #ff1e4f; /* hover */
}

.modal-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: var(--text-empty);
}

.modal-checkbox input {
    cursor: pointer;
}