/*
 * Feuille de style du volet.
 *
 * Contrainte : le volet s'affiche dans le webview embarqué d'Outlook, dont la
 * largeur utile descend à ~320 px et dont le moteur peut être ancien sur les
 * postes en Outlook 2016. On s'en tient donc à des propriétés largement
 * supportées (flexbox, pas de grid, pas de :has, pas de container queries).
 */

:root {
    --encre: #16213e;
    --encre-douce: #4a5568;
    --gris-tres-clair: #f4f6fa;
    --gris-clair: #e2e7f0;
    --bleu: #1f3a93;
    --bleu-clair: #eaeffb;
    --violet: #6b46c1;
    --violet-clair: #f1ebfd;
    --rouge: #c53030;
    --rouge-clair: #fdecec;
    --orange: #b7791f;
    --orange-clair: #fdf4e3;
    --vert: #276749;
    --vert-clair: #e9f5ee;
    --rayon: 6px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #16213e;
    color: var(--encre);
    background: #ffffff;
}

.volet {
    padding: 12px;
    max-width: 640px;
    margin: 0 auto;
}

/* ---------- En-tête ---------- */

.entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e7f0;
    border-bottom: 1px solid var(--gris-clair);
    margin-bottom: 12px;
}

.entete h1 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.2px;
}

.etiquette-moteur {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 10px;
    background: #f1ebfd;
    background: var(--violet-clair);
    color: #6b46c1;
    color: var(--violet);
    white-space: nowrap;
}

/* ---------- Carte message ---------- */

.carte {
    border: 1px solid #e2e7f0;
    border: 1px solid var(--gris-clair);
    border-radius: 6px;
    border-radius: var(--rayon);
    padding: 10px 12px;
    margin-bottom: 12px;
    background: #fff;
}

.carte-titre {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    color: #4a5568;
    color: var(--encre-douce);
    margin: 0 0 8px;
}

.message-objet {
    font-weight: 600;
    font-size: 13px;
    margin: 0 0 4px;
    word-break: break-word;
}

.message-meta {
    color: #4a5568;
    color: var(--encre-douce);
    font-size: 12px;
    margin: 0;
    word-break: break-word;
}

/* ---------- Sélecteur de démo ---------- */

.bandeau-demo {
    background: #fdf4e3;
    background: var(--orange-clair);
    border: 1px solid #f0d9a8;
    border-radius: 6px;
    border-radius: var(--rayon);
    padding: 8px 10px;
    margin-bottom: 12px;
    font-size: 12px;
    color: #b7791f;
    color: var(--orange);
}

.bandeau-demo select {
    width: 100%;
    margin-top: 6px;
    padding: 5px;
    font-family: inherit;
    font-size: 12px;
    border: 1px solid #e0c78c;
    border-radius: 4px;
    background: #fff;
    color: #16213e;
    color: var(--encre);
}

/* ---------- Boutons ---------- */

.bouton {
    display: inline-block;
    width: 100%;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    border-radius: var(--rayon);
    cursor: pointer;
    text-align: center;
}

.bouton-principal {
    background: #1f3a93;
    background: var(--bleu);
    color: #fff;
}

.bouton-principal:hover { background: #172f7a; }

.bouton-principal:disabled {
    background: #9aa6c4;
    cursor: default;
}

.bouton-secondaire {
    background: #fff;
    color: #1f3a93;
    color: var(--bleu);
    border: 1px solid #1f3a93;
    border: 1px solid var(--bleu);
}

.bouton-secondaire:hover { background: #eaeffb; }
.bouton-secondaire:hover { background: var(--bleu-clair); }

.rangee-boutons {
    display: flex;
    margin: 0 -3px;
}

.rangee-boutons .bouton {
    margin: 0 3px;
    font-size: 12px;
    padding: 7px 8px;
}

/* ---------- Attente ---------- */

.attente {
    text-align: center;
    padding: 24px 12px;
    color: #4a5568;
    color: var(--encre-douce);
}

.rond {
    width: 26px;
    height: 26px;
    border: 3px solid #e2e7f0;
    border: 3px solid var(--gris-clair);
    border-top-color: #6b46c1;
    border-top-color: var(--violet);
    border-radius: 50%;
    margin: 0 auto 10px;
    animation: tourner 0.9s linear infinite;
}

@keyframes tourner { to { transform: rotate(360deg); } }

/* ---------- Résultat ---------- */

.resume {
    background: #f1ebfd;
    background: var(--violet-clair);
    border-left: 3px solid #6b46c1;
    border-left: 3px solid var(--violet);
    padding: 9px 11px;
    border-radius: 0 6px 6px 0;
    border-radius: 0 var(--rayon) var(--rayon) 0;
    margin-bottom: 12px;
    font-size: 12.5px;
}

.ligne-champ {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 0;
    border-bottom: 1px dotted #e2e7f0;
    border-bottom: 1px dotted var(--gris-clair);
}

.ligne-champ:last-child { border-bottom: none; }

.ligne-champ dt {
    color: #4a5568;
    color: var(--encre-douce);
    font-size: 11.5px;
    flex: 0 0 auto;
    margin-right: 10px;
}

.ligne-champ dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}

.code-technique {
    display: block;
    font-family: Consolas, "Courier New", monospace;
    font-size: 10.5px;
    font-weight: 400;
    color: #4a5568;
    color: var(--encre-douce);
}

dl { margin: 0; }

/* ---------- Badges ---------- */

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.badge-haute { background: #fdecec; color: #c53030; }
.badge-haute { background: var(--rouge-clair); color: var(--rouge); }
.badge-normale { background: #fdf4e3; color: #b7791f; }
.badge-normale { background: var(--orange-clair); color: var(--orange); }
.badge-basse { background: #e9f5ee; color: #276749; }
.badge-basse { background: var(--vert-clair); color: var(--vert); }

/* ---------- Jauge de confiance ---------- */

.jauge {
    height: 6px;
    background: #e2e7f0;
    background: var(--gris-clair);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 6px;
}

.jauge-remplissage {
    height: 100%;
    background: #6b46c1;
    background: var(--violet);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.jauge-faible { background: #b7791f; }
.jauge-faible { background: var(--orange); }

.justification {
    font-size: 11.5px;
    color: #4a5568;
    color: var(--encre-douce);
    margin: 6px 0 0;
    font-style: italic;
}

/* ---------- Alternatives ---------- */

.alternatives { margin-top: 10px; }

.alternative {
    display: block;
    width: 100%;
    text-align: left;
    background: #f4f6fa;
    background: var(--gris-tres-clair);
    border: 1px solid #e2e7f0;
    border: 1px solid var(--gris-clair);
    border-radius: 4px;
    padding: 6px 9px;
    margin-bottom: 4px;
    font-family: inherit;
    font-size: 12px;
    color: #16213e;
    color: var(--encre);
    cursor: pointer;
}

.alternative:hover { border-color: #1f3a93; background: #eaeffb; }
.alternative:hover { border-color: var(--bleu); background: var(--bleu-clair); }

.alternative .score {
    float: right;
    color: #4a5568;
    color: var(--encre-douce);
    font-size: 11px;
}

/* ---------- Éléments détectés ---------- */

.pastille {
    display: inline-block;
    background: #eaeffb;
    background: var(--bleu-clair);
    color: #1f3a93;
    color: var(--bleu);
    border-radius: 4px;
    padding: 3px 8px;
    margin: 0 4px 4px 0;
    font-size: 11.5px;
}

.pastille b {
    font-weight: 600;
    font-family: Consolas, "Courier New", monospace;
}

.pastille span {
    color: #4a5568;
    color: var(--encre-douce);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: block;
}

/* ---------- Réponse proposée ---------- */

textarea.reponse {
    width: 100%;
    min-height: 210px;
    padding: 9px;
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.55;
    border: 1px solid #e2e7f0;
    border: 1px solid var(--gris-clair);
    border-radius: 4px;
    resize: vertical;
    color: #16213e;
    color: var(--encre);
}

textarea.reponse:focus {
    outline: none;
    border-color: #1f3a93;
    border-color: var(--bleu);
}

.objet-reponse {
    font-size: 12px;
    color: #4a5568;
    color: var(--encre-douce);
    margin: 0 0 6px;
    word-break: break-word;
}

/* ---------- À faire ---------- */

.a-faire {
    margin: 0;
    padding-left: 18px;
    font-size: 12.5px;
}

.a-faire li { margin-bottom: 3px; }

/* ---------- Erreur ---------- */

.erreur {
    background: #fdecec;
    background: var(--rouge-clair);
    border: 1px solid #f5c6c6;
    color: #c53030;
    color: var(--rouge);
    border-radius: 6px;
    border-radius: var(--rayon);
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 12.5px;
}

/* ---------- Refus d'accès ---------- */

.refus {
    background: #fdecec;
    background: var(--rouge-clair);
    border: 1px solid #f5c6c6;
    border-radius: 6px;
    border-radius: var(--rayon);
    padding: 16px 14px;
    text-align: center;
    color: #16213e;
    color: var(--encre);
}

.refus-titre {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: #c53030;
    color: var(--rouge);
}

.refus p { margin: 0 0 6px; font-size: 12.5px; }
.refus p:last-child { margin-bottom: 0; }

.refus-detail {
    font-family: Consolas, "Courier New", monospace;
    font-size: 11.5px;
    color: #4a5568;
    color: var(--encre-douce);
    word-break: break-all;
}

/* ---------- Identité ---------- */

.identite {
    margin: 14px 0 0;
    padding: 6px 10px;
    background: #f4f6fa;
    background: var(--gris-tres-clair);
    border-radius: 6px;
    border-radius: var(--rayon);
    font-size: 11.5px;
    color: #4a5568;
    color: var(--encre-douce);
    text-align: center;
    word-break: break-word;
}

.identite b { color: #16213e; font-weight: 600; }
.identite b { color: var(--encre); font-weight: 600; }

/* ---------- Pied ---------- */

.pied {
    margin-top: 16px;
    padding-top: 10px;
    border-top: 1px solid #e2e7f0;
    border-top: 1px solid var(--gris-clair);
    font-size: 11px;
    color: #4a5568;
    color: var(--encre-douce);
    text-align: center;
}

.masque { display: none; }

/* Avertissement du moteur, affiché seulement quand un vrai modèle a répondu. */
.avertissement-ia {
    margin: -6px 0 12px;
    padding: 7px 10px;
    border-radius: 4px;
    font-size: 11.5px;
    line-height: 1.45;
    background: #fdf4e3;
    background: var(--orange-clair);
    color: #b7791f;
    color: var(--orange);
}