/* ─── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Base ────────────────────────────────────────────────────────────────── */
body {
    font-family: var(--font-main);
    background:  var(--color-bg);
    color:       var(--color-text);
    min-height:  100vh;
    padding:     1rem;
}

#app {
    max-width:      640px;
    margin:         0 auto;
    display:        flex;
    flex-direction: column;
    gap:            0.4rem;
}

/* ─── Sections collapsibles ──────────────────────────────────────────────── */
.section {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    overflow:      hidden;
}

.section-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         0.85rem 1.2rem;
    cursor:          pointer;
    user-select:     none;
    font-weight:     600;
    letter-spacing:  0.03em;
    transition:      background var(--transition);
}
.section-header:hover { background: var(--color-surface-alt); }

.toggle-icon {
    transition: transform var(--transition);
    font-size: 1rem;
    opacity: 0.6;
}
.section.collapsed .toggle-icon { transform: rotate(-90deg); }

.section-body {
    padding:    0.9rem 1.2rem;
    display:    flex;
    flex-direction: column;
    gap:        0.7rem;
    max-height: 1200px;
    opacity:    1;
    overflow:   hidden;
    transition: max-height var(--transition), padding var(--transition), opacity var(--transition);
}
.section.collapsed .section-body {
    max-height:     0;
    padding-top:    0;
    padding-bottom: 0;
    opacity:        0;
}

/* ─── Contrôles ──────────────────────────────────────────────────────────── */
.control-row {
    display:     flex;
    align-items: center;
    gap:         1rem;
}
.control-row label {
    color:      var(--color-text-muted);
    font-size:  0.88rem;
    min-width:  140px;
    flex-shrink: 0;
}
.control-group {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
}
.control-group > label {
    color:     var(--color-text-muted);
    font-size: 0.88rem;
}

/* Range */
input[type="range"] {
    flex:          1;
    accent-color:  var(--color-accent);
    cursor:        pointer;
}

/* Select */
select {
    flex:          1;
    background:    var(--color-surface-alt);
    color:         var(--color-text);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    padding:       0.35rem 0.6rem;
    font-size:     0.9rem;
    cursor:        pointer;
}

/* Toggle switch */
.toggle {
    appearance:    none;
    -webkit-appearance: none;
    width:         44px;
    height:        24px;
    background:    var(--color-border);
    border-radius: 12px;
    position:      relative;
    cursor:        pointer;
    flex-shrink:   0;
    transition:    background var(--transition);
}
.toggle::after {
    content:       '';
    position:      absolute;
    width:         18px;
    height:        18px;
    background:    white;
    border-radius: 50%;
    top:           3px;
    left:          3px;
    transition:    transform var(--transition);
}
.toggle:checked              { background: var(--color-accent); }
.toggle:checked::after       { transform: translateX(20px); }

/* ─── Affichage horloge ──────────────────────────────────────────────────── */
.clock-time {
    font-family:    var(--font-clock);
    font-size:      3.5rem;
    text-align:     center;
    letter-spacing: 0.1em;
    padding:        0.5rem 0 1rem;
}

/* ─── Réveil — sélecteurs H:M ────────────────────────────────────────────── */
.alarm-time-selectors {
    display:     flex;
    align-items: center;
    gap:         0.4rem;
}
.alarm-time-selectors select { flex: 0 0 72px; }

/* ─── Overlay réveil ─────────────────────────────────────────────────────── */
.overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0, 0, 0, 0.88);
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             2rem;
    z-index:         1000;
}
.overlay button {
    padding:       1.4rem 2.8rem;
    font-size:     1.4rem;
    font-weight:   700;
    border:        none;
    border-radius: var(--radius);
    cursor:        pointer;
}
#alarm-stop      { background: #c0392b; color: white; }
#alarm-snooze-btn { background: var(--color-surface-alt); color: var(--color-text); }

/* ─── Feedback ───────────────────────────────────────────────────────────── */
#feedback-form {
    display:        flex;
    flex-direction: column;
    gap:            0.6rem;
}
#feedback-text {
    background:    var(--color-surface-alt);
    color:         var(--color-text);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    padding:       0.7rem;
    resize:        vertical;
    font-family:   var(--font-main);
    font-size:     0.9rem;
}
.form-footer {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
}
#feedback-counter {
    font-size: 0.8rem;
    color:     var(--color-text-muted);
}
#feedback-form button {
    padding:       0.45rem 1.4rem;
    background:    var(--color-accent);
    color:         #111;
    border:        none;
    border-radius: var(--radius);
    font-weight:   700;
    cursor:        pointer;
    transition:    opacity var(--transition);
}
#feedback-form button:hover { opacity: 0.85; }

/* ─── Utilitaires ────────────────────────────────────────────────────────── */
.hidden { display: none !important; }