/* styleApp.css
   Refonte globale — thème clair/obscur doux, composants unifiés
   Objectif: pages homogènes + boutons toujours centrés */

/* 1) Reset léger et fondations */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

:root {
    /* Couleurs */
    --bg: #0f1220;
    --bg-soft: #171a2b;
    --surface: #1d2140;
    --surface-2: #23284f;
    --text: #e9ecf8;
    --text-dim: #b7bdd7;
    --primary: #7c9cff;
    --primary-strong: #5d7cff;
    --primary-weak: #a8baff;
    --accent: #28d1b4;
    --danger: #ff5c7a;

    /* Effets */
    --ring: 0 0 0 3px rgba(124, 156, 255, 0.35);
    --shadow-1: 0 6px 24px rgba(0, 0, 0, 0.25);
    --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.35);

    /* Rythme */
    --radius: 12px;
    --radius-sm: 8px;
    --gap-1: 8px;
    --gap-2: 12px;
    --gap-3: 16px;
    --gap-4: 24px;
    --gap-5: 32px;
    --container: 900px;

    /* Typo */
    --font-sans: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Liberation Sans", sans-serif;
    --fs-1: clamp(28px, 4vw, 40px);
    --fs-2: 20px;
    --fs-3: 16px;
    --fw-bold: 700;
    --fw-med: 600;
    --fw-reg: 400;

    /* Boutons */
    --btn-h: 44px;
    --btn-pad: 0 40px;
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #f6f7fb;
        --bg-soft: #eef0f6;
        --surface: #ffffff;
        --surface-2: #f3f5fb;
        --text: #141827;
        --text-dim: #475069;
        --primary: #335cff;
        --primary-strong: #2449e6;
        --primary-weak: #738bff;
        --accent: #0fb39c;
        --danger: #d73a57;
        --ring: 0 0 0 3px rgba(51, 92, 255, 0.25);
        --shadow-1: 0 6px 18px rgba(18, 20, 40, 0.08);
        --shadow-2: 0 10px 26px rgba(18, 20, 40, 0.12);
    }
}

/* 2) Base */
body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--text);
    background:
            radial-gradient(1200px 600px at 20% -10%, rgba(124, 156, 255, 0.15), transparent 60%),
            radial-gradient(1200px 600px at 120% 120%, rgba(40, 209, 180, 0.15), transparent 65%),
            var(--bg);
    line-height: 1.5;
}

img,
svg {
    max-width: 100%;
    display: block;
}

/* Liens */
a {
    color: var(--primary);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* 3) Conteneurs principaux (pages/app) */
.page,
.calcTemps {
    max-width: var(--container);
    margin: 40px auto;
    padding: clamp(16px, 3vw, 32px);
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    display: flex;
    flex-direction: column;
    gap: var(--gap-4);
}

/* 4) Titres */
.title {
    margin: 0;
    text-align: center;
    font-size: var(--fs-1);
    font-weight: var(--fw-bold);
    letter-spacing: 0.4px;
    color: var(--text);
}

/* 5) Groupes de champs et textes alignés */
.texte {
    width: min(700px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--gap-3);
    align-items: center;
}

.texte p,
.texte label {
    margin: 0;
    color: var(--text-dim);
    font-size: var(--fs-3);
}

/* 6) Champs (inputs / labels) */
input[type="text"],
input[type="number"],
input[type="time"],
input[type="date"],
textarea,
select {
    width: 100%;
    min-height: 40px;
    padding: 10px 12px;
    color: var(--text);
    background: var(--bg-soft);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    outline: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

input[disabled],
textarea[disabled] {
    opacity: 0.7;
    cursor: not-allowed;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary-weak);
    box-shadow: var(--ring);
}

/* 7) Boutons — toujours centrés */
.bouton,
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    appearance: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: var(--btn-h);
    padding: var(--btn-pad);
    gap: 10px;
    color: #fff;
    background: linear-gradient(180deg, var(--primary), var(--primary-strong));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-1);
    font-weight: var(--fw-med);
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.2s ease, filter 0.2s ease;
    /* Centrage horizontal même en flux normal */
    margin-left: auto;
    margin-right: auto;
}

.bouton:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
    filter: brightness(1.05);
    box-shadow: var(--shadow-2);
}

.bouton:active,
button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active {
    transform: translateY(1px);
}

.bouton:focus-visible,
button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible {
    outline: none;
    box-shadow: var(--ring), var(--shadow-1);
}

/* Variantes d'actions (optionnel si classes présentes) */
.bouton.danger {
    background: linear-gradient(180deg, var(--danger), #c73b55);
}
.bouton.ghost {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--primary-weak);
}

/* 8) Lignes de boutons — centrage garanti */
#buttons,
.actions,
#retour,
.button-row,
.btns,
.controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-3);
    justify-content: center;  /* centré horizontalement */
    align-items: center;       /* centré verticalement si plusieurs lignes */
}

/* 9) Sections spécifiques aux mini-apps */

/* Calculatrice: grille centrée */
#toucheCalc {
    display: grid;
    grid-template-columns: repeat(4, minmax(100px, 1fr));
    gap: var(--gap-2);
    justify-content: center;       /* centre la grille */
    justify-items: stretch;
    width: min(420px, 100%);
    margin: 0 auto;
}

#affichage {
    width: min(420px, 100%);
    margin: 0 auto;
    text-align: right;
    font-size: 24px;
    letter-spacing: 0.6px;
    background: var(--bg-soft);
}

/* Additionneur/Soustracteur/Comparateur de temps */
#inputsTime,
#listeDurees,
#zonesTemps {
    display: grid;
    gap: var(--gap-3);
    width: min(700px, 100%);
    margin: 0 auto;
}

#calcul,
#ajouterItem,
#retirerItem {
    min-width: 220px; /* boutons principaux plus larges */
}

/* 10) Éléments utilitaires */
.center {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap-3);
}

.stack-sm {
    display: grid;
    gap: var(--gap-2);
}
.stack-md {
    display: grid;
    gap: var(--gap-3);
}
.stack-lg {
    display: grid;
    gap: var(--gap-4);
}

.card {
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius);
    padding: var(--gap-4);
    box-shadow: var(--shadow-1);
}

.muted {
    color: var(--text-dim);
}

/* 11) Responsive fin */
@media (max-width: 640px) {
    .texte {
        grid-template-columns: 1fr;
    }
    .bouton,
    button {
        width: 100%;
        max-width: 460px; /* garde un beau rendu sur mobile */
    }
}