ou
) == */
/* ============================================= */
/* --- 1. Style pour le code "EN LIGNE" (inline) --- */
/* Cible les balises qui ne sont PAS dans une balise */
:not(pre) > code {
font-family: 'Consolas', 'Monaco', 'Menlo', 'Courier New', monospace;
background-color: #f3f4f6; /* Fond gris très clair */
color: #4b5563; /* Texte gris foncé */
padding: 3px 6px; /* Espace intérieur */
border-radius: 5px; /* Coins arrondis */
font-size: 0.9em; /* Taille de police légèrement réduite */
border: 1px solid #e5e7eb; /* Bordure subtile */
}
/* --- 2. Style pour les "BLOCS" de code --- */
/* La balise est utilisée pour préserver les espaces et sauts de ligne */
pre {
font-family: 'Consolas', 'Monaco', 'Menlo', 'Courier New', monospace;
background-color: #282c34; /* Fond sombre (thème "Atom One Dark") */
color: #abb2bf; /* Texte gris clair pour une bonne lisibilité */
padding: 1.2em 1.5em; /* Espace intérieur généreux */
border-radius: 8px; /* Coins arrondis */
overflow-x: auto; /* Barre de défilement horizontale si une ligne est trop longue */
margin: 1.5em 0; /* Marge verticale pour séparer du reste du contenu */
font-size: 0.95em;
line-height: 1.5; /* Espacement entre les lignes pour plus de clarté */
}
/* On s'assure que la balise dans n'hérite pas des styles du code en ligne */
pre code {
background-color: transparent !important;
padding: 0;
border: none;
color: inherit; /* Hérite de la couleur de la balise */
font-size: inherit; /* Hérite de la taille de la balise */
}
fieldset {
/* Style de la bordure */
border: 1px solid #ccc;
border-radius: 8px; /* Bords arrondis */
/* Espace intérieur pour que le contenu ne colle pas à la bordure */
padding: 5px;
/* Marge extérieure pour l'espacement avec les autres éléments */
margin-bottom: 10px;
font-size: 0.75em;
}
legend {
/* Style du texte du titre */
/*font-weight: bold;*/
color: #333;
/* Petit espacement pour que la bordure ne touche pas le texte */
padding: 0 5px;
/* Décale un peu le titre du bord gauche */
margin-left: 10px;
}
.prevent-selection {
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none; /* Standard */
}
/* AJOUT POUR LE BOUTON DÉSACTIVÉ SI CGU NON ACCEPTÉES */
.send-btn-inner.disabled-cgu {
opacity: 0.4; /* Rend l'icône plus transparente */
cursor: not-allowed; /* Affiche un curseur d'interdiction au survol */
filter: grayscale(100%); /* Met l'icône en noir et blanc */
}
/* ======================================================= */
/* == AJOUTS POUR LE BOUTON DE COPIE DE CONVERSATION == */
/* ======================================================= */
.copy-conversation-container {
display: flex;
justify-content: flex-end; /* Modifié pour aligner à droite */
padding: 10px 0;
margin-bottom: 10px;
}
.copy-conversation-btn {
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 20px;
padding: 3px 8px; /* Réduit le padding pour un bouton plus compact */
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
font-size: 0.8em;
transition: background-color 0.2s;
}
/* Style de l'icône à l'intérieur du bouton de copie de conversation */
.copy-conversation-btn img {
width: 20px; /* Même largeur que les boutons d'action individuels */
height: 20px; /* Même hauteur que les boutons d'action individuels */
}
.copy-conversation-btn:hover {
background-color: #e0e0e0;
}
/* ======================================================= */
/* == AJOUTS POUR LES BOUTONS DE SCROLL HAUT/BAS == */
/* ======================================================= */
#scroll-buttons-container {
position: fixed;
bottom: 100px; /* A ajuster pour être au-dessus de la zone de saisie */
right: 25px;
display: flex;
flex-direction: column;
gap: 10px;
z-index: 999; /* Pour être au-dessus du contenu mais sous les modales */
}
.scroll-btn {
width: 44px;
height: 44px;
background-color: rgba(33, 52, 103, 0.8); /* Bleu CIVA semi-transparent */
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
transition: background-color 0.2s, transform 0.2s;
}
.scroll-btn:hover {
background-color: #213467; /* Bleu CIVA plein */
transform: scale(1.1);
}
/* ======================================================= */
/* == AJOUTS POUR LA RESPONSIVITÉ (SMARTPHONES) == */
/* ======================================================= */
/* On applique ces styles sur les écrans de 768px de large ou moins */
@media (max-width: 768px) {
/* 1. On cache l'adresse email et le séparateur pour gagner de la place */
/* 2. On réduit la taille du logo pour qu'il s'intègre mieux */
.macif-civa-logo-center-float img {
width: 150px; /* Taille réduite (ajustez à 150px ou 200px si besoin) */
/* La hauteur s'ajustera automatiquement grâce à height: auto; déjà présent */
}
.menu-lien {
left: 15px; /* On ajoute un petit espace à gauche pour la symétrie */
}
/* 4. Optionnel : Réduire la taille du titre principal si nécessaire */
.header-title {
font-size: 1em; /* Un peu plus petit pour mieux s'adapter */
}
/* 5. On déplace les boutons de scroll pour ne pas gêner sur mobile */
#scroll-buttons-container {
bottom: 85px;
right: 15px;
}
.scroll-btn {
width: 40px;
height: 40px;
}
}
/* --- NOUVEAU : Styles pour l'animation de chargement dans le bouton (carré rouge qui tourne) --- */
/* 1. Définition de l'animation de rotation */
@keyframes civa-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 2. Style de l'icône "stop" qui sera animée */
.stop-btn-inner .stop-icon-animated {
display: block; /* Nécessaire pour que la transformation s'applique */
color: #dc3545; /* Un rouge "danger" standard */
animation: civa-spin 1.5s linear infinite;
}
/* 3. Au survol, on arrête l'animation et on change l'apparence pour un feedback clair */
.stop-btn-inner:hover .stop-icon-animated {
animation: none; /* Arrête l'animation */
color: #ffffff; /* L'icône devient blanche pour un meilleur contraste */
transform: scale(1.1); /* On grossit un peu l'icône pour indiquer qu'elle est cliquable */
}
/* NOUVEAU : Ajout d'un fond rouge au survol du bouton stop pour le rendre plus visible */
.stop-btn-inner:hover {
background-color: #dc3545; /* Fond rouge "danger" */
border-radius: 50%; /* Pour faire un cercle autour de l'icône */
}
/* --- Styles pour l'historique dans le menu de gauche --- */
.history-separator {
border: none;
border-top: 1px solid #e0e0e0;
margin: 20px 0;
}
.sidebar-button {
width: 100%;
padding: 10px 15px;
margin-bottom: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 8px;
cursor: pointer;
text-align: left;
font-size: 0.95em;
font-weight: 500;
display: flex;
align-items: center;
gap: 10px;
transition: background-color 0.2s;
}
.sidebar-button:hover {
background-color: #f0f0f0;
}
.sidebar-button .icon {
font-size: 1.2em;
font-weight: bold;
}
.history-title {
font-size: 0.8em;
font-weight: 600;
color: #666;
text-transform: uppercase;
margin: 0 0 10px 5px;
}
#history-list {
list-style: none;
padding: 0;
margin: 0;
overflow-y: auto; /* Ajoute une barre de défilement si la liste est longue */
max-height: 40vh; /* Limite la hauteur pour ne pas pousser le reste hors de l'écran */
}
.history-item {
padding: 10px;
border-radius: 5px;
cursor: pointer;
margin-bottom: 5px;
display: flex;
justify-content: space-between;
align-items: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.9em;
transition: background-color 0.2s;
}
.history-item:hover, .history-item.active {
background-color: #e9e9e9;
}
.history-item span {
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.delete-history-btn {
background: none;
border: none;
cursor: pointer;
font-size: 1.1em;
color: #888;
padding: 0 5px;
opacity: 0; /* Caché par défaut */
transition: opacity 0.2s;
flex-shrink: 0; /* Empêche le bouton de rétrécir */
}
.history-item:hover .delete-history-btn {
opacity: 1; /* Apparaît au survol de l'item */
}
.delete-history-btn:hover {
color: #d9534f; /* Rouge au survol du bouton */
}
/* NOUVEAU : Conteneurs du menu latéral pour le positionnement du menu utilisateur */
.leftsection-overlay, .leftsection-container {
height: 100%;
}
.leftsection-content {
display: flex;
flex-direction: column;
height: 100%;
}
/* ======================================================= */
/* == STYLES POUR LES ICÔNES (MATERIAL SYMBOLS) == */
/* ======================================================= */
/* Style de base pour toutes les icônes de l'en-tête */
.menu-lien .material-symbols-outlined,
.logout-link .material-symbols-outlined {
font-size: 28px;
color: #333;
vertical-align: middle;
transition: color 0.2s;
}
.menu-lien:hover .material-symbols-outlined,
.logout-link a:hover .material-symbols-outlined {
color: #007bff;
}
.menu-lien {
left: 15px;
cursor: pointer; /* AJOUT : Le curseur pointeur est maintenant sur toute la zone cliquable */
}
.back-link {
left: 15px;
}
/* Style pour les icônes dans la zone de saisie */
.textarea-container .send-btn-inner,
.textarea-container .stop-btn-inner {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
z-index: 10;
}
.textarea-container .send-btn-inner {
right: 5px;
}
.textarea-container .stop-btn-inner {
right: 5px; /* Même position, car ils s'affichent alternativement */
}
.textarea-container .material-symbols-outlined {
font-size: 28px;
color: #213467;
transition: color 0.2s;
}
.scroll-btn .material-symbols-outlined {
font-size: 24px;
color: white;
}
.textarea-container button:hover .material-symbols-outlined {
color: #3a528a;
}
/* ======================================================= */
/* == AJOUTS POUR LE MENU UTILISATEUR DÉROULANT (RESPONSIVE) == */
/* ======================================================= */
/* --- Styles pour la version HEADER (Desktop par défaut) --- */
.header-top-line .user-menu-container {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
text-align: right;
}
.header-top-line .user-menu-dropdown {
top: 100%;
right: 0;
min-width: 160px;
}
.header-top-line .user-menu-container:hover .user-email-display {
background-color: #f0f0f0;
}
/* --- Styles pour la version SIDEBAR (Mobile) --- */
#user-menu-placeholder {
margin-top: auto; /* Pousse le placeholder (et son futur contenu) en bas */
}
#user-menu-placeholder .user-menu-container {
position: relative;
/* Reset des styles de la version header */
top: auto;
right: auto;
transform: none;
/* Nouveaux styles pour l'intégration en bas du menu */
background-color: #f8f9fa;
border-top: 1px solid #e9ecef;
margin: 0 -40px -40px -40px; /* Compense le padding du parent */
padding: 15px 40px;
text-align: left;
}
#user-menu-placeholder .user-menu-dropdown {
top: auto; /* Reset */
right: auto; /* Reset */
bottom: 100%; /* S'ouvre vers le haut */
left: 0;
right: 0;
min-width: 100%;
margin-bottom: 5px;
}
/* NOUVEAU : Style pour le texte de l'email en mode mobile */
#user-menu-placeholder .user-email-text {
font-weight: bold;
}
/* --- Styles COMMUNS aux deux versions --- */
.user-menu-container {
font-size: 0.9em;
color: #333;
cursor: pointer;
}
/* NOUVEAU : Style pour l'icône utilisateur dans le menu */
.user-menu-icon {
font-size: 22px; /* Légèrement plus petit pour s'intégrer */
color: #213467; /* Bleu CIVA pour être cohérent */
}
.user-menu-container .user-email-display {
display: flex;
align-items: center;
gap: 8px; /* Espace entre l'icône et le texte */
padding: 8px 12px;
border-radius: 5px;
transition: background-color 0.2s;
}
.user-menu-dropdown {
display: none;
position: absolute;
background-color: white;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
font-size: 0.80em;
padding: 10px;
z-index: 1001;
text-align: left;
}
.user-menu-container:hover .user-menu-dropdown {
display: block;
}
/* Style pour les informations de profil */
.user-profile-info {
padding: 8px;
font-size: 0.95em;
color: #555;
}
.user-profile-info span {
font-weight: bold;
color: #213467;
}
/* Style pour la checkbox d'historisation DANS le menu */
.user-menu-dropdown .save-history-container {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
margin-left: 0; /* On annule la marge qui n'est plus nécessaire */
font-size: 1em;
border-radius: 5px;
transition: background-color 0.2s;
}
.user-menu-dropdown .save-history-container:hover {
background-color: #f0f0f0;
}
/* Séparateur dans le menu */
.user-menu-separator {
border: none;
border-top: 1px solid #e9ecef;
margin: 5px 0;
}
/* Lien de déconnexion dans le menu */
.logout-menu-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px;
color: #dc3545; /* Rouge pour la déconnexion */
text-decoration: none;
font-weight: bold;
border-radius: 5px;
transition: background-color 0.2s;
}
.logout-menu-item:hover {
background-color: #f8d7da;
}
.logout-menu-item .material-symbols-outlined {
color: #dc3545;
}
/* ======================================================= */
/* == STYLES POUR LA RÉVÉLATION DE MOT DE PASSE == */
/* ======================================================= */
.password-container {
position: relative;
width: 100%;
}
.password-container input {
width: 100%;
padding-right: 45px !important; /* Espace pour l'icône */
box-sizing: border-box;
}
.toggle-password-btn {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
padding: 5px;
display: flex;
color: #888;
}
.toggle-password-btn:hover {
color: #333;
}
.logout-menu-item .material-symbols-outlined {
color: #dc3545;
}
/* ======================================================= */
/* == STYLES POUR LES MESSAGES FLASH (ALERTES) == */
/* ======================================================= */
.flash-message {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}
.flash-message.success { color: #155724; background-color: #d4edda; border-color: #c3e6cb; }
.flash-message.danger { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; }
.flash-message.warning { color: #856404; background-color: #fff3cd; border-color: #ffeeba; }
.flash-message.info { color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; }
/* ======================================================= */
/* == AJOUTS POUR LA CHECKBOX CGU DANS LE CHAT == */
/* ======================================================= */
.cgu-container {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
margin-bottom: 15px;
padding: 12px 15px;
background-color: #fff3cd; /* Jaune d'avertissement */
border: 1px solid #ffeeba;
border-radius: 8px;
font-size: 0.9em;
color: #856404;
}
.cgu-container input[type="checkbox"] {
width: 18px;
height: 18px;
flex-shrink: 0; /* Empêche la checkbox de rétrécir */
}
.cgu-container label a {
color: #0056b3;
font-weight: bold;
text-decoration: underline;
}
/* Animation pour attirer l'attention si l'utilisateur oublie de cocher */
@keyframes shake {
10%, 90% { transform: translateX(-1px); }
20%, 80% { transform: translateX(2px); }
30%, 50%, 70% { transform: translateX(-4px); }
40%, 60% { transform: translateX(4px); }
}
/* ======================================================= */
/* == AJOUTS POUR RENOMMER/SUPPRIMER CONVERSATION == */
/* ======================================================= */
.history-item {
gap: 5px; /* Espace entre le titre et les boutons */
}
.history-item .rename-history-btn,
.history-item .delete-history-btn {
background: none;
border: none;
cursor: pointer;
color: #888;
padding: 0 3px;
opacity: 0; /* Caché par défaut */
transition: opacity 0.2s, color 0.2s;
flex-shrink: 0; /* Empêche les boutons de rétrécir */
font-size: 20px; /* Taille de l'icône */
font-family: 'Material Symbols Outlined' !important;
line-height: 1;
}
.history-item:hover .rename-history-btn,
.history-item:hover .delete-history-btn {
opacity: 0.7; /* Apparaît au survol de l'item */
}
.history-item .rename-history-btn:hover {
opacity: 1;
color: #007bff; /* Bleu au survol */
}
.history-item .delete-history-btn:hover {
opacity: 1;
color: #dc3545; /* Rouge au survol */
}
.history-rename-input {
width: calc(100% - 60px); /* Prend la largeur moins l'espace pour les boutons */
padding: 5px;
border: 1px solid #007bff;
border-radius: 4px;
font-size: 0.9em;
}
/* ======================================================= */
/* == MODALE DE CONFIRMATION GÉNÉRIQUE == */
/* ======================================================= */
.confirm-modal-overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(0,0,0,0.6);
display: flex; align-items: center; justify-content: center;
z-index: 2000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
.confirm-modal-overlay.visible { opacity: 1; visibility: visible; }
.confirm-modal-content {
background-color: white; padding: 25px 30px; border-radius: 8px;
text-align: center; max-width: 450px; width: 90%;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
transform: scale(0.9);
transition: transform 0.3s;
}
.confirm-modal-overlay.visible .confirm-modal-content { transform: scale(1); }
.confirm-modal-content h3 { margin-top: 0; margin-bottom: 15px; color: #333; }
.confirm-modal-content p { margin-bottom: 25px; color: #555; }
.confirm-modal-buttons { display: flex; justify-content: center; gap: 15px; }
.confirm-modal-buttons .btn { border: none; padding: 10px 25px; border-radius: 5px; font-size: 1em; font-weight: bold; cursor: pointer; transition: background-color 0.2s; }
.confirm-modal-buttons .btn-danger { background-color: #dc3545; color: white; }
.confirm-modal-buttons .btn-danger:hover { background-color: #c82333; }
.confirm-modal-buttons .btn-secondary { background-color: #6c757d; color: white; }
.confirm-modal-buttons .btn-secondary:hover { background-color: #5a6268; }
/* --- Styles pour l'historique dans le menu de gauche --- */
/* --- Règles pour améliorer la responsivité du texte et la typographie --- */
/* Appliquer ces règles aux éléments de texte principaux */
#content-messages p,
.question-box p,
.message p,
.disclaimer,
.alias-bubble,
.example-bubble,
.user-profile-info span {
/* Empêche les mots longs de déborder et permet la césure */
word-wrap: break-word; /* Pour une compatibilité plus large */
overflow-wrap: break-word; /* La propriété standard moderne */
hyphens: auto; /* Active la césure automatique pour une meilleure répartition */
/* Expérimental : peut améliorer la répartition des mots sur les lignes */
/* text-wrap: balance; */
/* Décommentez cette ligne si vous souhaitez tester cette propriété,
mais gardez à l'esprit qu'elle n'est pas encore universellement supportée. */
}
/* Assurer que les titres s'adaptent aussi */
.header-title {
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
/* text-wrap: balance; */
}
/* Pour les guillemets isolés, la meilleure pratique est d'utiliser
des espaces insécables ( ou ) directement dans le contenu HTML.
Les règles ci-dessus améliorent la fluidité générale du texte,
ce qui peut réduire l'occurrence de guillemets isolés,
mais ne les élimine pas complètement sans modification du contenu. */
/* NOUVEAU : Styles pour centrer la modale d'impact */
#impact-modal-container {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* NOUVEAU : Styles pour le contenu de la modale d'impact */
#impact-modal-content h3 {
color: #213467;
margin-top: 0;
margin-bottom: 20px;
border-bottom: 2px solid #f0f0f0;
padding-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
/* Suppression des marges et bordures inutiles */
.impact-modal-section h4 { display: none; }
.impact-metric-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid #f0f0f0;
}
.impact-metric-row:last-child {
border-bottom: none;
}
.impact-metric-label {
display: flex;
align-items: center;
gap: 10px;
font-weight: bold;
}
.impact-metric-row .material-symbols-outlined {
color: #28a745; /* Icones en vert */
}
.impact-metric-row .impact-metric-value {
font-family: monospace;
font-size: 1.1em;
font-weight: bold;
color: #28a745; /* Label en vert */
}
.impact-equivalences-row {
display: flex;
justify-content: space-around;
margin-top: 20px;
gap: 20px;
}
.impact-equivalence-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
padding: 15px;
background-color: #f8f9fa;
border-radius: 8px;
flex: 1;
transition: transform 0.2s, box-shadow 0.2s;
}
.impact-equivalence-item:hover {
transform: translateY(-4px);
box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}
.impact-equivalence-item .material-symbols-outlined {
font-size: 36px;
color: #0056b3;
}
.impact-equivalence-value {
font-family: monospace;
font-size: 1.2em;
font-weight: bold;
}
/* ============================================= */
/* == STYLES POUR L'AFFICHAGE DE CODE () == */
/* NOUVEAU : Styles pour centrer la modale d'impact */
.impact-modal-section {
background-color: #f0f0f0; /* Fond légèrement grisé */
padding: 10px;
margin-bottom: 10px;
}
#impact-modal-container {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* NOUVEAU : Styles pour le contenu de la modale d'impact */
#impact-modal-content h3 {
color: #213467;
margin-top: 0;
margin-bottom: 20px;
border-bottom: 2px solid #f0f0f0;
padding-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
/* Suppression des marges et bordures inutiles */
.impact-modal-section h4 { display: none; }
.impact-metric-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid #f0f0f0;
}
.impact-metric-row:last-child {
border-bottom: none;
}
.impact-metric-label {
display: flex;
align-items: center;
gap: 10px;
font-weight: bold;
}
.impact-metric-label .material-symbols-outlined {
color: #0056b3;
}
.impact-metric-value {
font-family: monospace;
}
/* ============================================= */