/* Design system */

:root {
    /* Neutres chauds */
    --bg:        #ecebe7;
    --surface:   #fbfaf8;
    --surface-2: #e3e1db;
    --line:      #d5d1c7;
    --line-fort: #b8b2a4;

    --text:      #1b1a17;   /* 15,4:1 */
    --text-2:    #55524b;   /*  8,2:1 */
    --text-3:    #656055;   /*  4,8:1 --surface-2, fond + sombre thème clair */

    --accent:    #85590a;   /*  4,7:1 --surface-2 */
    --accent-bg: rgba(133, 89, 10, .10);

    --ok:        #256b40;   /*  4,9:1 --surface-2 */
    --ko:        #ab372b;

    --ombre: 0 1px 2px rgba(60, 50, 35, .06),
             0 12px 32px -18px rgba(60, 50, 35, .35);

    --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --serif: ui-serif, 'Iowan Old Style', Georgia, serif;

    --r: 3px;
    --r-fenetre: 8px;
    --transition: 130ms cubic-bezier(.2, 0, .2, 1);
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:        #15130e;
        --surface:   #1e1b15;
        --surface-2: #262117;
        --line:      #3a3327;
        --line-fort: #574d3c;

        --text:      #f5f1e8;
        --text-2:    #c8c0b0;
        --text-3:    #9d9486;

        --accent:    #e0aa4a;
        --accent-bg: rgba(224, 170, 74, .14);

        --ok:        #6cc48c;
        --ko:        #ec8371;

        --ombre: 0 1px 2px rgba(0, 0, 0, .5),
                 0 16px 40px -20px rgba(0, 0, 0, .9);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --bg:        #15130e;
    --surface:   #1e1b15;
    --surface-2: #262117;
    --line:      #3a3327;
    --line-fort: #574d3c;
    --text:      #f5f1e8;
    --text-2:    #c8c0b0;
    --text-3:    #9d9486;
    --accent:    #e0aa4a;
    --accent-bg: rgba(224, 170, 74, .14);
    --ok:        #6cc48c;
    --ko:        #ec8371;
    --ombre: 0 1px 2px rgba(0, 0, 0, .5),
             0 16px 40px -20px rgba(0, 0, 0, .9);
    color-scheme: dark;
}

:root[data-theme="light"] {
    --bg:        #ecebe7;
    --surface:   #fbfaf8;
    --surface-2: #e3e1db;
    --line:      #d5d1c7;
    --line-fort: #b8b2a4;
    --text:      #1b1a17;
    --text-2:    #55524b;
    --text-3:    #656055;
    --accent:    #85590a;
    --accent-bg: rgba(133, 89, 10, .10);
    --ok:        #256b40;   /*  4,9:1 --surface-2 */
    --ko:        #ab372b;
    --ombre: 0 1px 2px rgba(60, 50, 35, .06),
             0 12px 32px -18px rgba(60, 50, 35, .35);
    color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: clamp(1rem, 4vw, 3rem) clamp(.75rem, 4vw, 2rem);

    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    background-image: radial-gradient(circle at 1px 1px, rgba(128, 118, 96, .08) 1px, transparent 0);
    background-size: 4px 4px;

    overflow-x: hidden;
    transition: background-color var(--transition), color var(--transition);
}

/* Focus clavier */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--accent); color: var(--surface); }

button, input, select, textarea {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
}
button { cursor: pointer; }

/* Fenêtre */
.fenetre {
    width: 100%;
    max-width: 720px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-fenetre);
    box-shadow: var(--ombre);
    overflow: hidden;
}

.fenetre--etroite { max-width: 380px; }   /* connexion */
.fenetre--large   { max-width: 940px; }   /* lanceur de dés, en deux colonnes */

/* Primitives */
.fenetre__entete {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .6rem .9rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    font-size: .78rem;
    color: var(--text-3);
}
.fenetre__entete b { color: var(--text-2); font-weight: 600; }
.fenetre__entete a { color: var(--text-3); text-decoration: none; }
.fenetre__entete a:hover { color: var(--accent); }
.fenetre__entete .pousse { margin-inline-start: auto; }

.corps { padding: 1.1rem .9rem; display: grid; gap: 1.1rem; }

.champ { display: grid; gap: .3rem; }

.etiquette {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-3);
}

.saisie {
    width: 100%;
    padding: .55rem .7rem;
    font-family: var(--mono);
    font-size: .88rem;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    transition: border-color var(--transition);
}
.saisie::placeholder { color: var(--text-3); }
.saisie:focus { border-color: var(--accent); outline: none; }
textarea.saisie { min-height: 130px; resize: vertical; line-height: 1.55; }
.saisie.est-fautive { border-color: var(--ko); }

.aide { font-family: var(--sans); font-size: .74rem; color: var(--text-3); }
.erreur { font-family: var(--sans); font-size: .74rem; color: var(--ko); }

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .6rem 1.1rem;
    font-family: var(--mono);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--accent);
    background: var(--accent-bg);
    border: 1px solid transparent;
    border-radius: var(--r);
    transition: background var(--transition), color var(--transition), transform var(--transition);
}
.bouton:hover { background: var(--accent); color: var(--surface); }
.bouton:active { transform: translateY(1px); }

.bouton--discret {
    color: var(--text-2);
    background: none;
    border-color: var(--line);
}
.bouton--discret:hover { color: var(--text); background: none; border-color: var(--line-fort); }

.barre-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .5rem; }
.choix__option {
    display: grid;
    gap: .15rem;
    padding: .65rem .8rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.choix__option:hover { border-color: var(--line-fort); }
.choix__option input { position: absolute; opacity: 0; pointer-events: none; }
.choix__option:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }
.choix__option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.choix__titre { font-size: .85rem; font-weight: 500; }
.choix__option:has(input:checked) .choix__titre { color: var(--accent); }
.choix__desc { font-family: var(--serif); font-style: italic; font-size: .76rem; color: var(--text-3); }

.pot-de-miel {
    position: absolute;
    inset-inline-start: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.pastille {
    display: inline-block;
    padding: .05rem .45rem;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: 1px solid currentColor;
    border-radius: 100px;
}
.pastille--new      { color: var(--accent); }
.pastille--answered { color: var(--text-2); }
.pastille--planned  { color: var(--accent); }
.pastille--done     { color: var(--ok); }
.pastille--closed   { color: var(--text-3); }
.pastille--type     { color: var(--text-3); border-style: dashed; }

.filtres {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    padding: .55rem .9rem;
    border-block-end: 1px solid var(--line);
}
.filtre {
    padding: .2rem .6rem;
    font-size: .72rem;
    color: var(--text-3);
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: 100px;
    transition: color var(--transition), border-color var(--transition);
}
.filtre:hover { color: var(--text); border-color: var(--line-fort); }
.filtre.est-actif { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }

/* Conversation */
.fil { display: grid; gap: .7rem; }

.bulle {
    display: grid;
    gap: .3rem;
    padding: .7rem .85rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    border-inline-start: 2px solid var(--line-fort);
}
.bulle--admin { border-inline-start-color: var(--accent); background: var(--accent-bg); }

.bulle__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    font-size: .68rem;
    color: var(--text-3);
}
.bulle__auteur { color: var(--text-2); font-weight: 600; }
.bulle--admin .bulle__auteur { color: var(--accent); }

.bulle__corps {
    font-family: var(--sans);
    font-size: .88rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.confirmation {
    display: grid;
    gap: .35rem;
    padding: .7rem .85rem;
    background: var(--surface-2);
    border: 1px solid var(--ok);
    border-radius: var(--r);
}
.confirmation strong { color: var(--ok); }

.repli summary {
    font-family: var(--sans);
    font-size: .74rem;
    color: var(--text-3);
    cursor: pointer;
}
.repli summary:hover { color: var(--accent); }
.repli code {
    display: block;
    margin-block-start: .3rem;
    font-size: .74rem;
    color: var(--accent);
    overflow-wrap: anywhere;
}

.lien-prive {
    display: grid;
    gap: .35rem;
    padding: .7rem .85rem;
    background: var(--surface-2);
    border: 1px dashed var(--accent);
    border-radius: var(--r);
}
.lien-prive code { font-size: .76rem; color: var(--accent); overflow-wrap: anywhere; }

/* Liste */
.liste { display: grid; }
.liste__ligne {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: .8rem;
    padding: .65rem .9rem;
    color: inherit;
    text-decoration: none;
    border-block-end: 1px solid var(--line);
    border-inline-start: 2px solid transparent;
    transition: background var(--transition), border-color var(--transition);
}
.liste__ligne:hover { background: var(--surface-2); border-inline-start-color: var(--line-fort); }
.liste__ligne.est-non-lu { border-inline-start-color: var(--accent); }
.liste__nom { font-weight: 500; }
.liste__extrait {
    font-family: var(--sans);
    font-size: .78rem;
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.liste__date { font-size: .7rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.liste__vide {
    padding: 2rem .9rem;
    text-align: center;
    font-family: var(--serif);
    font-style: italic;
    font-size: .9rem;
    color: var(--text-3);
}

@media (max-width: 560px) {
    .liste__ligne { grid-template-columns: auto 1fr auto; }
    .liste__extrait { display: none; }
}

/* Bascule de thème */
.theme-bascule {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .65rem;
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-2);
    border: 1px solid var(--line);
    border-radius: 100px;
    transition: color var(--transition), border-color var(--transition);
}
.theme-bascule:hover { color: var(--accent); border-color: var(--accent); }
.theme-bascule svg { width: 13px; height: 13px; }

/* Pied */
.pied { font-size: .72rem; color: var(--text-3); text-align: center; }
.pied a { color: var(--text-2); text-decoration: none; border-bottom: 1px solid var(--line-fort); }
.pied a:hover { color: var(--accent); border-color: var(--accent); }

/* Flash */
.flash-container {
    position: fixed;
    inset-block-start: 1rem;
    inset-inline: 1rem;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    align-items: center;
}
.flash-message {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .9rem;
    font-size: .8rem;
    background: var(--surface);
    border: 1px solid var(--line-fort);
    border-radius: var(--r);
    box-shadow: var(--ombre);
}
.flash-error   { border-color: var(--ko); color: var(--ko); }
.flash-success { border-color: var(--ok); color: var(--ok); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}