/*
 * Mise en page de l'écran « Boutons du chatbot ».
 *
 * Volontairement dans une feuille de style (et non en attributs `style` dans la page) : la
 * politique de sécurité du back-office interdit les styles « inline » (cahier des charges,
 * section 9). Les couleurs reposent sur `currentColor`, donc sur le thème clair comme sombre.
 */

.arbre-aide {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    font-size: 0.875rem;
    line-height: 1.5;
}

.arbre-aide ol {
    margin: 0.25rem 0 0 1.25rem;
    list-style: decimal;
}

.arbre-liste {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.arbre-ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

.arbre-ligne-menu {
    background: color-mix(in srgb, currentColor 5%, transparent);
    font-weight: 600;
}

.arbre-ligne-orpheline {
    border-style: dashed;
    border-color: rgb(217 119 6);
}

/* Indentation : un cran par niveau d'imbrication (8 niveaux suffisent largement). */
.arbre-niveau-0 { margin-left: 0; }
.arbre-niveau-1 { margin-left: 1.5rem; }
.arbre-niveau-2 { margin-left: 3rem; }
.arbre-niveau-3 { margin-left: 4.5rem; }
.arbre-niveau-4 { margin-left: 6rem; }
.arbre-niveau-5 { margin-left: 7.5rem; }
.arbre-niveau-6 { margin-left: 9rem; }
.arbre-niveau-7 { margin-left: 10.5rem; }

.arbre-texte {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.arbre-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.arbre-vide {
    padding: 1.5rem;
    text-align: center;
    border-radius: 0.5rem;
    border: 1px dashed color-mix(in srgb, currentColor 30%, transparent);
}

.arbre-statut {
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* Écran « Importer un plan ». */
.import-formulaire {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 48rem;
}

.import-etiquette {
    font-weight: 600;
    font-size: 0.875rem;
}

.import-champ {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    background: transparent;
    color: inherit;
    font: inherit;
}

textarea.import-champ {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
}

.import-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0;
    font-weight: 400;
}

.import-erreur,
.import-avertissement {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    border: 1px solid rgb(220 38 38);
}

.import-avertissement {
    border-color: rgb(217 119 6);
}

.import-erreur ul,
.import-avertissement ul {
    margin: 0.25rem 0 0 1.25rem;
    list-style: disc;
}

/* Choix de l'avatar : une vignette par image, la vignette choisie est entourée. */
.choix-avatars {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: 0.5rem;
}

.choix-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.25rem;
    border-radius: 0.5rem;
    border: 2px solid color-mix(in srgb, currentColor 15%, transparent);
    cursor: pointer;
    font-size: 0.8125rem;
}

.choix-avatar:hover {
    border-color: color-mix(in srgb, currentColor 40%, transparent);
}

.choix-avatar:has(input:checked) {
    border-color: rgb(37 99 235);
    background: color-mix(in srgb, rgb(37 99 235) 10%, transparent);
    font-weight: 600;
}

.choix-avatar:has(input:focus-visible) {
    outline: 2px solid rgb(37 99 235);
    outline-offset: 2px;
}

.choix-avatar-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* Écran d'accueil. */
.accueil-bonjour {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    font-weight: 500;
}

.accueil-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.accueil-carte {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

.accueil-large {
    max-width: none;
}

.accueil-titre {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: color-mix(in srgb, currentColor 70%, transparent);
}

.accueil-gros {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 500;
}

.accueil-doux {
    margin: 0;
    font-size: 0.875rem;
    color: color-mix(in srgb, currentColor 70%, transparent);
}

.accueil-liste {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.accueil-liste li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.875rem;
}
/* --- Écran « Mon chatbot » : boutons à gauche, aperçu en direct à droite ----------------- */
.mon-chatbot { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
.mon-chatbot-arbre { min-width: 0; }
.mon-chatbot-apercu { min-width: 0; }
@media (min-width: 1280px) {
    .mon-chatbot { grid-template-columns: minmax(0, 1fr) 420px; align-items: start; }
    .mon-chatbot-apercu { position: sticky; top: 5rem; }
}

/* --- Écran « Réglages du chatbot » ------------------------------------------------------- */
.reglages-actions { margin-top: 1.5rem; }

/* --- Écran « Statistiques » ----------------------------------------------------------------- */
.stats-periodes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
.stats-periode { padding: 0.4rem 0.9rem; border: 1px solid rgb(156 163 175); border-radius: 9999px; background: transparent; cursor: pointer; font-size: 0.875rem; }
.stats-periode-active { background: rgb(37 99 235); border-color: rgb(37 99 235); color: #fff; }
.stats-graphique { width: 100%; height: 11rem; display: block; }
.stats-barre { fill: rgb(37 99 235); }
.stats-tableau { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.stats-tableau th, .stats-tableau td { padding: 0.45rem 0.5rem; border-bottom: 1px solid rgb(229 231 235); text-align: left; }
.stats-tableau thead th { font-weight: 600; }

/* --- Fenêtre « Ce qui change » (relecture avant publication) -------------------------------- */
.diff-resume { margin-bottom: 0.75rem; }
.diff-titre { margin: 1.25rem 0 0.5rem; font-weight: 600; font-size: 1rem; }
.diff-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.diff-badge { display: inline-block; margin-right: 0.35rem; padding: 0.05rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
.diff-ajout { background: rgb(220 252 231); color: rgb(22 101 52); }
.diff-suppression { background: rgb(254 226 226); color: rgb(153 27 27); }
.diff-deplace { background: rgb(254 243 199); color: rgb(146 64 14); }
.diff-bloc { margin-bottom: 0.9rem; padding: 0.6rem 0.75rem; border: 1px solid rgb(229 231 235); border-radius: 0.5rem; }
.diff-chemin { margin: 0 0 0.4rem; font-weight: 600; }
.diff-changement { margin-bottom: 0.6rem; }
.diff-champ { margin: 0 0 0.15rem; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: rgb(107 114 128); }
.diff-avant, .diff-apres { margin: 0.1rem 0; padding: 0.25rem 0.5rem; border-radius: 0.35rem; overflow-wrap: anywhere; }
.diff-avant { background: rgb(254 242 242); }
.diff-apres { background: rgb(240 253 244); }
.diff-etiquette { display: inline-block; min-width: 3.2rem; font-size: 0.75rem; font-weight: 600; color: rgb(75 85 99); }