/* ============================================================
   Ollama Chunk Processor — Feuille de style
   Esthétique : "cabinet de lecture" — papier crème,
   serif élégant pour les titres, mono pour le code/résultats.
   Responsive, accessible, mode sombre via préférence système.
   Licence MIT
   ============================================================ */

/* ─── Variables : palette claire (papier) ─────────────────── */
:root {
    /* Surfaces */
    --fond-page:         #f3ede0;   /* papier crème */
    --fond-panneau:      #fbf8f1;   /* papier plus clair */
    --fond-eleve:        #ffffff;
    --fond-code:         #f0e8d6;

    /* Encres */
    --encre-principale:  #1a1814;   /* presque noir, légère chaleur */
    --encre-secondaire:  #4a463e;
    --encre-discrete:    #8a8478;

    /* Bordures */
    --trait-fin:         #d8cfb8;
    --trait-marque:      #b8aa8a;

    /* Accents */
    --accent-rouge:      #8b2a2a;   /* rouge sénatorial */
    --accent-or:         #a87d1f;   /* or vieilli */
    --accent-vert:       #3a5a3a;   /* vert profond */

    /* Typographie */
    --serif:    'Fraunces', 'Iowan Old Style', 'Hoefler Text', Georgia, serif;
    --sans:     'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono:     'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

    /* Espacement */
    --gouttiere:   1.5rem;
    --rayon:       4px;

    /* Ombres douces */
    --ombre-douce:   0 1px 2px rgba(26, 24, 20, 0.05),
                     0 4px 12px rgba(26, 24, 20, 0.04);
    --ombre-relief:  0 2px 6px rgba(26, 24, 20, 0.08),
                     0 8px 24px rgba(26, 24, 20, 0.06);
}

/* ─── Mode sombre (préférence système) ────────────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        --fond-page:         #1a1814;
        --fond-panneau:      #232019;
        --fond-eleve:        #2a261e;
        --fond-code:         #1f1c16;

        --encre-principale:  #f0e8d6;
        --encre-secondaire:  #c8c0ae;
        --encre-discrete:    #8a8478;

        --trait-fin:         #3a3528;
        --trait-marque:      #4a4332;

        --accent-rouge:      #d68a8a;
        --accent-or:         #d4b466;
        --accent-vert:       #8aaa8a;
    }
}

/* ─── Reset & base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* L'attribut HTML `hidden` doit l'emporter sur tout `display:` d'auteur */
[hidden] { display: none !important; }

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

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--encre-principale);
    background-color: var(--fond-page);
    /* Texture subtile de papier via gradient */
    background-image:
        radial-gradient(circle at 20% 30%, rgba(184, 170, 138, 0.04) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(184, 170, 138, 0.04) 0%, transparent 40%);
}

h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 500;
    letter-spacing: -0.01em;
    margin: 0;
}

code, kbd {
    font-family: var(--mono);
    font-size: 0.9em;
    background-color: var(--fond-code);
    padding: 0.1em 0.4em;
    border-radius: var(--rayon);
    color: var(--accent-rouge);
}

/* ─── En-tête ─────────────────────────────────────────────── */
.entete {
    max-width: 72rem;
    margin: 0 auto;
    padding: 1.75rem var(--gouttiere) 1.25rem;
    border-bottom: 1px solid var(--trait-fin);
}

.entete__marque {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.entete__ornement {
    font-family: var(--serif);
    font-size: 2rem;
    color: var(--accent-or);
    line-height: 1;
}

.entete__titre {
    font-size: clamp(1.4rem, 3.5vw, 1.9rem);
    font-style: italic;
    font-weight: 400;
}

.entete__sous-titre {
    margin: 0.35rem 0 0;
    color: var(--encre-secondaire);
    font-size: 0.95rem;
    max-width: 50ch;
}

/* ─── Cadre principal ─────────────────────────────────────── */
.cadre {
    max-width: 72rem;
    margin: 0 auto;
    padding: 1.25rem var(--gouttiere) 2rem;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

/* À partir d'un écran moyen, on passe en deux colonnes */
@media (min-width: 980px) {
    .cadre {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        align-items: start;
    }
    .panneau--config {
        position: sticky;
        top: 2rem;
        max-height: calc(100vh - 4rem);
        overflow-y: auto;
    }
}

/* ─── Panneaux ────────────────────────────────────────────── */
.panneau {
    background-color: var(--fond-panneau);
    border: 1px solid var(--trait-fin);
    border-radius: var(--rayon);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--ombre-douce);
}

.panneau__entete {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.panneau__titre {
    font-size: 1.3rem;
    font-style: italic;
    color: var(--encre-principale);
    margin-bottom: 1.1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--trait-fin);
    position: relative;
}

.panneau__titre::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 3rem;
    height: 2px;
    background-color: var(--accent-or);
}

.panneau__entete .panneau__titre {
    margin-bottom: 0;
}

.panneau__actions {
    display: flex;
    gap: 0.5rem;
}

/* ─── Formulaire ──────────────────────────────────────────── */
.formulaire {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.champ {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.champ__label {
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--encre-secondaire);
}

.champ__controle {
    font-family: var(--sans);
    font-size: 1rem;
    color: var(--encre-principale);
    background-color: var(--fond-eleve);
    border: 1px solid var(--trait-fin);
    border-radius: var(--rayon);
    padding: 0.6rem 0.75rem;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
}

.champ__controle:focus {
    outline: none;
    border-color: var(--accent-or);
    box-shadow: 0 0 0 3px rgba(168, 125, 31, 0.15);
}

.champ__controle--textarea {
    resize: vertical;
    min-height: 5rem;
    line-height: 1.5;
}

.champ__controle--mono {
    font-family: var(--mono);
    font-size: 0.9rem;
}

.champ__controle--fichier {
    padding: 0.5rem;
    cursor: pointer;
}

.champ__aide {
    margin: 0;
    font-size: 0.85rem;
    color: var(--encre-discrete);
    font-style: italic;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: baseline;
}

/* ─── Bouton-lien pour révéler le texte brut ──────────────── */
.lien-toggle {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-style: italic;
    color: var(--accent-or);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}

.lien-toggle:hover {
    color: var(--accent-rouge);
}

/* ─── Ligne "select + bouton-icône" (rafraîchir la liste) ───── */
.champ__ligne-controle {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.champ__ligne-controle .champ__controle {
    flex: 1;
    min-width: 0;
}

.bouton-icone {
    flex-shrink: 0;
    width: 2.5rem;
    background-color: var(--fond-eleve);
    border: 1px solid var(--trait-fin);
    border-radius: var(--rayon);
    color: var(--encre-secondaire);
    font-size: 1.1rem;
    cursor: pointer;
    transition: transform 0.3s, border-color 0.15s, color 0.15s;
}

.bouton-icone:hover:not(:disabled) {
    border-color: var(--accent-or);
    color: var(--accent-or);
}

.bouton-icone:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.bouton-icone.tourne {
    animation: rotation 0.6s linear;
}

@keyframes rotation {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ─── Paramètres avancés (details/summary) ────────────────── */
.parametres-avances {
    border-top: 1px dashed var(--trait-fin);
    padding-top: 1rem;
    margin-top: 0.5rem;
}

.parametres-avances__titre {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.05rem;
    cursor: pointer;
    color: var(--encre-secondaire);
    list-style: none;
    user-select: none;
}

.parametres-avances__titre::before {
    content: '▸ ';
    color: var(--accent-or);
    transition: transform 0.2s;
    display: inline-block;
}

.parametres-avances[open] .parametres-avances__titre::before {
    transform: rotate(90deg);
}

.parametres-avances[open] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.parametres-avances[open] > .champ {
    margin-top: 0.5rem;
}

/* ─── Boutons ─────────────────────────────────────────────── */
.actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.bouton {
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.65rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--rayon);
    cursor: pointer;
    transition: transform 0.05s, background-color 0.15s, border-color 0.15s;
    min-height: 44px;  /* zone tactile mobile */
}

.bouton:active:not(:disabled) {
    transform: translateY(1px);
}

.bouton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.bouton--principal {
    background-color: var(--encre-principale);
    color: var(--fond-page);
    border-color: var(--encre-principale);
}

.bouton--principal:hover:not(:disabled) {
    background-color: var(--accent-rouge);
    border-color: var(--accent-rouge);
}

.bouton--secondaire {
    background-color: transparent;
    color: var(--encre-secondaire);
    border-color: var(--trait-marque);
}

.bouton--secondaire:hover:not(:disabled) {
    border-color: var(--encre-secondaire);
    color: var(--encre-principale);
}

.bouton--mini {
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
    min-height: 32px;
    background-color: transparent;
    color: var(--encre-secondaire);
    border-color: var(--trait-fin);
}

.bouton--mini:hover:not(:disabled) {
    background-color: var(--fond-code);
    border-color: var(--trait-marque);
    color: var(--encre-principale);
}

/* ─── Progression ─────────────────────────────────────────── */
.progression {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: var(--fond-code);
    border-radius: var(--rayon);
    border: 1px solid var(--trait-fin);
}

.progression__barre {
    height: 6px;
    background-color: var(--trait-fin);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progression__remplissage {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-or), var(--accent-rouge));
    transition: width 0.3s ease;
}

.progression__texte {
    margin: 0;
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--encre-secondaire);
}

/* ─── Résultats ───────────────────────────────────────────── */
.resultats {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ─── Bloc "Résultat consolidé" (apparaît en haut à la fin) ─ */
.consolide {
    background-color: var(--fond-eleve);
    border: 1px solid var(--trait-marque);
    border-radius: var(--rayon);
    padding: 1.5rem;
    box-shadow: var(--ombre-relief);
    position: relative;
    animation: apparition 0.4s ease;
}

.consolide::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-or), var(--accent-rouge), var(--accent-vert));
    border-radius: var(--rayon) var(--rayon) 0 0;
}

.consolide__entete {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px dotted var(--trait-fin);
    flex-wrap: wrap;
}

.consolide__titre {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--encre-principale);
    margin: 0;
}

.consolide__meta {
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--encre-discrete);
}

.consolide__actions {
    display: flex;
    gap: 0.5rem;
}

.consolide__corps {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--encre-principale);
    max-height: 30rem;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.resultats__placeholder {
    text-align: center;
    color: var(--encre-discrete);
    font-style: italic;
    padding: 3rem 1rem;
    margin: 0;
    border: 1px dashed var(--trait-fin);
    border-radius: var(--rayon);
}

.chunk-resultat {
    background-color: var(--fond-eleve);
    border: 1px solid var(--trait-fin);
    border-left: 3px solid var(--accent-or);
    border-radius: var(--rayon);
    padding: 1.25rem;
    animation: apparition 0.4s ease;
}

@keyframes apparition {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.chunk-resultat--erreur {
    border-left-color: var(--accent-rouge);
    background-color: rgba(139, 42, 42, 0.04);
}

.chunk-resultat__entete {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dotted var(--trait-fin);
}

.chunk-resultat__numero {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--encre-secondaire);
}

.chunk-resultat__meta {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--encre-discrete);
}

.chunk-resultat__corps {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--encre-principale);
}

.chunk-resultat__source {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dotted var(--trait-fin);
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--encre-discrete);
}

.chunk-resultat__source summary {
    cursor: pointer;
    user-select: none;
}

.chunk-resultat__source-texte {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background-color: var(--fond-code);
    border-radius: var(--rayon);
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
}

/* ─── Pied de page ────────────────────────────────────────── */
.pied {
    max-width: 72rem;
    margin: 2rem auto 0;
    padding: 2rem var(--gouttiere);
    border-top: 1px solid var(--trait-fin);
    text-align: center;
    color: var(--encre-discrete);
    font-size: 0.85rem;
}

.pied__separateur {
    margin: 0 0.5rem;
    color: var(--accent-or);
}

/* ─── Mobile : ajustements ────────────────────────────────── */
@media (max-width: 640px) {
    .entete { padding: 2rem 1rem 1.5rem; }
    .cadre { padding: 1.5rem 1rem; gap: 1.5rem; }
    .panneau { padding: 1.25rem; }
    .panneau__entete { flex-direction: column; align-items: flex-start; }
    .actions { flex-direction: column; }
    .actions .bouton { width: 100%; }
}