:root {
    --fond: #ffffff;
    --fond-carte: #f7f7f8;
    --texte: #1a1a1a;
    --texte-doux: #6b6b6b;
    --bordure: #e2e2e4;
    --accent: #1a1a1a;
    --erreur: #c0392b;
    --erreur-fond: #fdf0ee;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background: var(--fond);
    color: var(--texte);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
}

body.avec-resultat { justify-content: flex-start; }

h1 {
    /* Titre uniquement : le reste de la page garde la police systeme,
       plus sobre pour du texte fonctionnel (formulaire, resultats, debug). */
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-size: clamp(2.25rem, 9vw, 3.75rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    margin: 0 0 1.75rem;
    text-align: center;
    animation: apparition 0.5s ease-out;
}

form {
    width: 100%;
    max-width: 36rem;
    display: flex;
    gap: 0.5rem;
}

input {
    flex: 1;
    min-width: 0;
    padding: 0.85rem 1.1rem;
    font-size: 1rem;
    color: var(--texte);
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: 2rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08);
}

button {
    padding: 0.85rem 1.4rem;
    font-size: 1rem;
    font-family: inherit;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: 2rem;
    cursor: pointer;
    white-space: nowrap;
    min-height: 44px;
    transition: transform 0.1s ease, opacity 0.15s ease;
}

button:hover:not(:disabled) { transform: translateY(-1px); }
button:active:not(:disabled) { transform: translateY(0); }
button:disabled { opacity: 0.5; cursor: wait; }

.exemple {
    margin: 0;
    font-size: 0.875rem;
    color: var(--texte-doux);
    text-align: center;
    max-width: 32rem;
    max-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    overflow: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, max-height 0.2s ease,
                margin-top 0.2s ease;
}

.exemple.visible {
    margin-top: 1rem;
    max-height: 3rem;
    opacity: 1;
    transform: translateY(0);
}

/* --- Attente : trois points qui pulsent, pendant que Claude reflechit --- */
.attente {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 1.1rem;
    color: var(--texte-doux);
    font-size: 0.95rem;
}

.attente .points span {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 3px;
    border-radius: 50%;
    background: var(--texte-doux);
    animation: pulse 1.2s ease-in-out infinite;
}
.attente .points span:nth-child(2) { animation-delay: 0.15s; }
.attente .points span:nth-child(3) { animation-delay: 0.3s; }

@keyframes pulse {
    0%, 60%, 100% { opacity: 0.25; transform: scale(0.85); }
    30% { opacity: 1; transform: scale(1); }
}

/* --- Carte de reponse --- */
.carte {
    padding: 1.1rem;
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: 0.75rem;
    animation: apparition 0.35s ease-out;
}

.carte pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0;
}

.carte pre a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--bordure);
    text-underline-offset: 0.15em;
}

.carte pre a:hover { text-decoration-color: var(--texte); }

.carte.erreur {
    color: var(--erreur);
    background: var(--erreur-fond);
    border-color: #f3d4cf;
}

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

.meta {
    margin: 0.75rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
    font-size: 0.8125rem;
    color: var(--texte-doux);
}

.meta .puce {
    padding: 0.2rem 0.6rem;
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: 1rem;
}

/* --- Panneau debug : les appels d'outils --- */
.debug {
    margin-top: 0.75rem;
    animation: apparition 0.4s ease-out;
}

.debug summary {
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--texte-doux);
    padding: 0.4rem 0;
    user-select: none;
}

.debug summary:hover { color: var(--texte); }

.appel-outil {
    margin-top: 0.5rem;
    padding: 0.75rem 0.9rem;
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-left: 3px solid var(--accent);
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    animation: apparition 0.25s ease-out;
}

.appel-outil.en-erreur { border-left-color: var(--erreur); }

.appel-outil .ligne1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.appel-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    margin-right: 0.4rem;
    border-radius: 50%;
    background: var(--accent);
    color: var(--fond);
    font-size: 0.625rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.appel-outil.en-erreur .appel-numero { background: var(--erreur); }

.appel-outil .duree { font-weight: 400; color: var(--texte-doux); }

.resultat-etat {
    font-weight: 600;
    color: #1a7a3c;
}

.appel-outil.en-erreur .resultat-etat { color: var(--erreur); }

/* Args et resultat : une petite grille cle/valeur, plus lisible qu'un
   JSON.stringify brut sur une seule ligne. */
.cle-valeurs {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.15rem 0.6rem;
    margin: 0.35rem 0 0;
}

.cle-valeurs dt {
    color: var(--texte-doux);
}

.cle-valeurs dd {
    margin: 0;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.75rem;
    overflow-wrap: anywhere;
    color: var(--texte);
}

.args-vide {
    display: block;
    margin-top: 0.35rem;
    color: var(--texte-doux);
    font-style: italic;
}

@media (max-width: 520px) {
    form { flex-direction: column; }
    button { width: 100%; }
    h1 { margin-bottom: 1.25rem; }
}

/* --- Ecran 2 : la liste des actions --- */

#ecran-plan {
    width: 100%;
    max-width: 40rem;
}

/* Le titre reste centre sur cet ecran aussi (regle de base h1, non
   ecrasee ici) : seul le reste du contenu suit le fil de lecture a
   gauche. */
#ecran-plan h1 { margin-bottom: 0.5rem; }

/* Meme langage visuel que le panneau debug et le journal : une petite
   carte avec bordure d'accent a gauche et une etiquette discrete, plutot
   qu'une phrase en italique entre guillemets flottant seule sous le titre. */
.intention-affichee {
    margin: 0 0 1.25rem;
    padding: 0.65rem 0.9rem;
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-left: 3px solid var(--accent);
    border-radius: 0.5rem;
}

.intention-etiquette {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--texte-doux);
}

.intention-texte {
    margin: 0;
    color: var(--texte);
}

.action {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.9rem;
    margin-top: 0.6rem;
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: 0.75rem;
    animation: apparition 0.3s ease-out;
}

.action input[type="checkbox"] {
    /* Case dessinee entierement en CSS, pas la case native du systeme :
       imposer une taille a une case native (via width/height seuls,
       sans appearance:none) la deforme sur Safari, qui a une forme
       interne fixe. On evite le probleme en ne dependant plus du tout
       du rendu natif. */
    appearance: none;
    -webkit-appearance: none;
    /* La regle "input" generique (champ de recherche) porte flex:1 et
       du padding : sans les neutraliser ici, ils passent au travers et
       etirent la case dans son conteneur flex. C'est ce qui produisait
       la case a moitie remplie constatee a l'ecran. */
    flex: none;
    padding: 0;
    width: 1.15rem;
    height: 1.15rem;
    /* Alignee sur le haut du titre (line-height serre a 1.2 juste
       au-dessus), pas sur le milieu de la ligne de texte par defaut. */
    margin-top: 0.05rem;
    flex-shrink: 0;
    border: 1.5px solid var(--bordure);
    border-radius: 0.3rem;
    background: var(--fond);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.action input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--accent);
}

.action input[type="checkbox"]:checked::after {
    content: "";
    width: 0.3rem;
    height: 0.55rem;
    border: solid var(--fond);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-1px, -2px);
}

.action input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: default;
}

.action-contenu { flex: 1; min-width: 0; }

.action-titre { font-weight: 600; line-height: 1.2; }

.action-raison {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--texte-doux);
}

.action-echec {
    margin-top: 0.35rem;
    padding: 0.4rem 0.6rem;
    background: var(--erreur-fond);
    border: 1px solid #f3d4cf;
    border-radius: 0.4rem;
    color: var(--erreur);
    font-size: 0.8125rem;
}

.badges {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.55rem;
    font-size: 0.75rem;
    border-radius: 1rem;
    background: var(--fond);
    border: 1px solid var(--bordure);
    color: var(--texte-doux);
}

/* Petit point discret devant chaque badge, dans la couleur du texte du
   badge : ajoute du caractere sans ajouter une seule couleur de plus. */
.badge::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
    flex-shrink: 0;
}

.badge-irreversible {
    color: var(--erreur);
    background: var(--erreur-fond);
    border-color: #f3d4cf;
}

.badge-bloquee {
    color: var(--texte-doux);
    text-decoration: line-through;
}

.badge-execute {
    color: #1a7a3c;
    background: #eaf6ee;
    border-color: #cdeada;
}

.action.etat-refusee,
.action.etat-bloquee { opacity: 0.6; }

/* Bref halo autour d'une carte qui vient d'etre executee ou d'echouer,
   pour que le regard s'y pose sans avoir a comparer avant/apres a la
   main. S'estompe tout seul, ne laisse rien de permanent. */
@keyframes halo-reussite {
    from { box-shadow: 0 0 0 3px rgba(26, 122, 60, 0.25); }
    to   { box-shadow: 0 0 0 3px rgba(26, 122, 60, 0); }
}
@keyframes halo-echec {
    from { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.25); }
    to   { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0); }
}
.action.vient-de-reussir { animation: halo-reussite 1.6s ease-out; }
.action.vient-d-echouer { animation: halo-echec 1.6s ease-out; }

/* --- Coche animee, message de fin d'execution --- */
.carte-succes {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.carte-succes p { margin: 0; }

.coche-animee { flex-shrink: 0; }

.coche-cercle {
    stroke: #1a7a3c;
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
    animation: dessiner-cercle 0.45s ease-out forwards;
}

.coche-trait {
    stroke: #1a7a3c;
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: dessiner-trait 0.3s ease-out 0.4s forwards;
}

@keyframes dessiner-cercle { to { stroke-dashoffset: 0; } }
@keyframes dessiner-trait { to { stroke-dashoffset: 0; } }

/* --- La barre d'ajout, sous la liste --- */

/* .barre-ajout est un <form> : son input et son bouton heritent deja des
   regles de base (meme police, meme rembourrage, meme rayon, meme cible
   tactile de 44px que la barre de recherche de l'ecran 1). On ne surcharge
   que la largeur : la regle "form" generique plafonne a 36rem, pensee pour
   l'ecran 1 (seul sur la page, plus etroit) ; ici la barre doit occuper
   toute la largeur de #ecran-plan (40rem), comme les cartes d'actions et
   le bouton executer au-dessus et en-dessous d'elle. Le media query
   generique (form { flex-direction: column }) couvre deja le reste. */
.barre-ajout {
    max-width: none;
    margin-top: 1.5rem;
}

#bouton-executer {
    display: block;
    width: 100%;
    margin-top: 1.5rem;
    padding: 0.9rem;
}

#message-execution:empty { margin: 0; }
#message-execution { margin-top: 1rem; }

/* --- Ecran du journal : le fil chronologique des evenements audit_log --- */
.journal {
    width: 100%;
    max-width: 36rem;
}

.chrono {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.evenement {
    padding: 0.75rem 0.9rem;
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-left: 3px solid var(--accent);
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    animation: apparition 0.3s ease-out;
}

.evenement.en-erreur { border-left-color: var(--erreur); }
.evenement.en-succes { border-left-color: #1a7a3c; }
.evenement.en-compense {
    border-left-color: var(--texte-doux);
    border-left-style: dashed;
}

.evenement .ligne1 {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-weight: 600;
}

.evenement .duree { font-weight: 400; color: var(--texte-doux); }

.evenement .args,
.evenement .resultat {
    margin-top: 0.35rem;
    color: var(--texte-doux);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.75rem;
    overflow-wrap: anywhere;
}

/* --- Bouton "Annuler" d'un evenement EXECUTEE compensable --- */
.evenement .bouton-annuler {
    display: block;
    margin-top: 0.5rem;
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem;
    min-height: auto;
    border-radius: 1rem;
}

/* --- Le bouton "Nouvelle demande" : discret, en retrait, pas un
   bouton d'action principal --- */
.lien-discret {
    display: block;
    margin: 0 auto 0.75rem;
    padding: 0.3rem 0.8rem;
    font-size: 0.8125rem;
    color: var(--texte-doux);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 1rem;
    min-height: auto;
    text-align: center;
}

.lien-discret:hover {
    color: var(--texte);
    border-color: var(--bordure);
    transform: none;
}