* {
  box-sizing: border-box; 
  scrollbar-width: thin; 
  scrollbar-color: var(--text-dim) var(--bg);
}

:root {
  /* --- LIGHT THEME --- */
  --bg: #e0e5ec;
  --text-main: #4a4a4a;
  --text-dim: #8b96a9;
  --accent: #5e6878;
  
  /* Ombres Neumorphism */
  --shadow-light: #ffffff;
  --shadow-dark: #a3b1c6;
  
  /* UI Elements */
  --msg-user-bg: #e0e5ec;
  --msg-bot-bg: #e0e5ec;
  --badge-user: #e0e5ec;
  --badge-bot: #d1d9e6;

  /* NOUVEAU : Couleur de fond des pop-ups (Gris-bleu profond, harmonisé) */
  --overlay-bg: rgba(0, 0, 0, 0.3); 
}

[data-theme="dark"] {
  /* --- DARK THEME --- */
  --bg: #1b1d21;
  --text-main: #d1d5db;
  --text-dim: #6b7280;
  --accent: #9ca3af;       

  /* Ombres Neumorphism Dark */
  --shadow-light: rgba(255, 255, 255, 0.03);
  --shadow-dark: rgba(0, 0, 0, 0.5);

  /* UI Elements */
  --msg-user-bg: #1b1d21;
  --msg-bot-bg: #1b1d21;
  --badge-user: #1b1d21;
  --badge-bot: #141518;

  /* NOUVEAU : Plus sombre pour détacher du fond noir */
  --overlay-bg: rgba(0, 0, 0, 0.3);
}

/* --- SCROLLBAR --- */
* { scrollbar-width: thin; scrollbar-color: var(--text-dim) var(--bg); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background-color: var(--text-dim); border-radius: 20px; border: 4px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background-color: var(--accent); }
::-webkit-scrollbar-corner { background: var(--bg); }

html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; width: 100%; }
body {
  font-family: 'Nunito', system-ui, sans-serif;
  background-color: var(--bg);
  color: var(--text-main);
  transition: background-color 0.3s ease, color 0.3s ease;
}

#app { height: 100dvh; display:flex; flex-direction:column; }

/* --- HEADER --- */
.header { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; z-index: 10; }
.header .title { font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); }
.header-actions { display: flex; gap: 15px; align-items: center; }

/* BOUTONS NEUMORPHIC */
.neu-btn, .neu-btn-small, .neu-btn-icon {
  background: var(--bg); color: var(--text-main); border: none; border-radius: 50px;
  box-shadow: 6px 6px 12px var(--shadow-dark), -6px -6px 12px var(--shadow-light);
  cursor: pointer; transition: all 0.2s ease; font-weight: 700; outline: none;
}
.neu-btn:active, .neu-btn-small:active, .neu-btn-icon:active, .neu-btn.active {
  box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
  transform: translateY(1px);
}
.neu-btn { padding: 0 24px; height: 46px; font-size: 15px; }
.neu-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.neu-btn-small { padding: 8px 16px; font-size: 13px; text-decoration: none; display: inline-block; }
.neu-btn-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; padding: 0; }

[data-theme="light"] .icon-sun { display: none; }
[data-theme="dark"] .icon-moon { display: none; }

/* --- MESSAGES --- */
.messages { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 20px; scroll-behavior: smooth; }
.msg { max-width: 820px; margin: 0 auto 24px auto; display: flex; gap: 14px; align-items: flex-end; }
.msg.user { flex-direction: row-reverse; }
.msg .badge {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: bold; flex: 0 0 auto; background: var(--bg);
  box-shadow: 3px 3px 6px var(--shadow-dark), -3px -3px 6px var(--shadow-light);
}
.msg .bubble {
  padding: 14px 20px; border-radius: 20px; line-height: 1.5; font-size: 15px; max-width: 80%;
  word-break: break-word; background: var(--bg);
}
.msg.assistant .bubble {
  border-bottom-left-radius: 4px;
  box-shadow: 5px 5px 10px var(--shadow-dark), -5px -5px 10px var(--shadow-light);
  color: var(--text-main);
}
.msg.user .bubble {
  border-bottom-right-radius: 4px;
  box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
  color: var(--text-main); opacity: 0.9;
}
.msg.assistant .bubble.nopad { padding: 0; background: transparent; box-shadow: none; width: fit-content; }
.msg.msg-full {
  max-width: 820px; /* IMPORTANT : Retour à la largeur standard pour aligner le "L" */
  width: 100%;
  /* On ne change rien d'autre, les marges auto du .msg standard s'appliquent */
}

.msg.msg-full .bubble,
.msg.msg-full .bubble.nopad {
  width: 100% !important;     /* Force l'occupation totale de l'espace */
  max-width: 100% !important; /* Débloque la limite de 80% du texte */
  padding: 0;
  background: transparent;
  box-shadow: none;
}

/* --- COMPOSER --- */
.composer { padding: 20px; background: var(--bg); position: relative; z-index: 100; }
.composer .row { display: flex; gap: 16px; align-items: center; max-width: 820px; margin: 0 auto; }
.neu-input {
  flex: 1; height: 46px; border-radius: 50px; border: none; background: var(--bg); color: var(--text-main);
  padding: 0 20px; font-size: 16px; outline: none;
  box-shadow: inset 5px 5px 10px var(--shadow-dark), inset -5px -5px 10px var(--shadow-light);
  font-family: inherit; transition: box-shadow 0.2s;
}
.neu-input:focus { box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light); }
.typing {
  position: absolute;top: -3%; 
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 800px;
  text-align: left;
  padding-left: 25px;
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
  pointer-events: none;
  transition: opacity 0.3s;
}

/* --- SUGGESTIONS --- */
.suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 820px; margin: 0 auto; padding: 0 16px 20px 16px; }
.suggestion-chip {
  background: var(--bg); color: var(--text-dim); border: none; padding: 10px 20px; border-radius: 50px;
  font-size: 14px; cursor: pointer;
  box-shadow: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light);
  transition: transform 0.2s, box-shadow 0.2s;
}
.suggestion-chip:hover { color: var(--text-main); transform: translateY(-2px); box-shadow: 6px 6px 12px var(--shadow-dark), -6px -6px 12px var(--shadow-light); }
.suggestion-chip:active { box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light); transform: translateY(0); }

/* --- CARTES PROJET --- */
.cards {
  display: grid;
  grid-template-columns: 1fr; /* Force l'affichage les unes sous les autres */
  gap: 20px;
  width: 100%;
  box-sizing: border-box;

  /* --- C'EST ICI QUE VOUS CHOISISSEZ LA LARGEUR --- */
  max-width: 500px; 
  /* Exemples : 
     - 450px (taille standard d'un message texte)
     - 650px (plus large, votre souhait "+1/3")
     - 100%  (toute la largeur disponible jusqu'à 820px)
  */
}

@keyframes cardPop {
  0% { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: scale(1); }
}

.card {
  background: var(--bg); border-radius: 16px; padding: 14px; cursor: pointer; position: relative; z-index: 1; 
  box-shadow: 8px 8px 16px var(--shadow-dark), -8px -8px 16px var(--shadow-light);
  transition: transform 0.3s ease, box-shadow 0.3s ease; border: none; display: flex; flex-direction: column;
  transform-origin: center center;
  animation: cardPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.card:hover { z-index: 10; transform: translateY(-4px); box-shadow: 12px 12px 24px var(--shadow-dark), -12px -12px 24px var(--shadow-light); }
.card:active { transform: translateY(0); box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light); }

.card__cover {
  width: 100%; height: 110px; margin-bottom: 12px; border-radius: 10px; overflow: hidden;
  box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light);
  pointer-events: none;
  user-select: none;
}
.card__cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none; user-select: none;
}
.card__top { display: flex; justify-content: space-between; margin-bottom: 8px; }
.card__title { font-weight: 700; font-size: 14px; color: var(--text-main); }
.card__meta { font-size: 12px; color: var(--text-dim); }
.card__role { font-size: 11px; color: var(--accent); font-weight: 600; margin-bottom: 8px; }
.card__one { 
  font-size: 12px; line-height: 1.4; color: var(--text-main); opacity: 0.8; margin-bottom: 12px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.tag { 
  font-size: 10px; padding: 4px 8px; border-radius: 10px; background: var(--bg);
  box-shadow: 2px 2px 5px var(--shadow-dark), -2px -2px 5px var(--shadow-light); 
  color: var(--text-main);
}
.tag--clickable {
  cursor: pointer; border: none; font-family: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.tag--clickable:hover {
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 3px 3px 8px var(--shadow-dark), -3px -3px 8px var(--shadow-light);
}
.tag--clickable:active {
  transform: translateY(0);
  color: var(--text-dim);
  box-shadow: inset 2px 2px 4px var(--shadow-dark), inset -2px -2px 4px var(--shadow-light);
}
.modal-tags { margin-bottom: 20px; }

/* --- MODALE --- */
.modal {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: var(--overlay-bg);
  
  /* --- AJOUT POUR LE FLOU --- */
  backdrop-filter: blur(8px);         /* Standard */
  -webkit-backdrop-filter: blur(8px); /* Important pour Safari / iOS */
  /* -------------------------- */

  opacity: 0; 
  visibility: hidden;
  pointer-events: none; 
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal.open { 
  opacity: 1; 
  visibility: visible;
  pointer-events: auto; 
}

.neu-panel {
  background: var(--bg); border-radius: 30px; box-shadow: 0 20px 50px rgba(0,0,0,0.2);
  padding: 30px; color: var(--text-main); border: none;
  width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; position: relative;
}

/* --- SCROLLBAR PERSONNALISÉE POUR LA MODALE --- */

/* 1. On affine la barre pour la modale spécifiquement */
.neu-panel::-webkit-scrollbar {
  width: 6px; /* Plus fin et élégant */
}

/* 2. La "piste" (le fond de la barre) */
.neu-panel::-webkit-scrollbar-track {
  background: transparent; /* Fond invisible pour l'intégration */
  margin-top: 25px;    /* IMPORTANT: Évite de toucher le coin arrondi haut */
  margin-bottom: 25px; /* IMPORTANT: Évite de toucher le coin arrondi bas */
}

/* 3. L'ascenseur (la partie qui bouge) */
.neu-panel::-webkit-scrollbar-thumb {
  background-color: var(--accent); /* Couleur cohérente avec le thème */
  border-radius: 20px; /* Bords totalement ronds */
  opacity: 0.8;
}

/* Optionnel : Changement de couleur au survol pour le feedback */
.neu-panel {
  background: var(--bg); 
  border-radius: 30px; 
  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
  padding: 30px; 
  color: var(--text-main); 
  border: none;
  width: 90%; 
  max-width: 600px; 
  max-height: 90vh; 
  
  overflow-y: auto;    /* On garde ça pour scroller le texte vers le bas */
  
  /* --- AJOUTE CETTE LIGNE --- */
  overflow-x: hidden;  /* C'est ça qui tue la barre du bas entourée en rouge */
  
  position: relative;
}

.modal__close { position: absolute; top: 15px; right: 15px; }
.modal__panel h2 { margin-top: 0; margin-bottom: 8px; font-size: 24px; }
.modal__panel .meta { font-size: 14px; color: var(--accent); margin-bottom: 20px; font-weight: 600; }
.modal__panel .desc { font-size: 16px; line-height: 1.6; margin-bottom: 24px; color: var(--text-main); }
.modal__panel .btnrow { display: flex; gap: 12px; }

/* --- CARROUSEL INTERACTIF (MODALE) --- */
/* --- CARROUSEL INTERACTIF (MODALE) --- */
.modal__panel .carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 10px 5px 20px 5px;
  margin-bottom: 24px;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.modal__panel .carousel:active { cursor: grabbing; }

/* Wrapper animé (pop-up) */
.modal__panel .carousel .carousel__item{
  flex-shrink: 0;
  transform-origin: center;
  will-change: transform, opacity;
  animation: photoPop 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Image : garde hover/transition sur transform */
.modal__panel .carousel .carousel__item img{
  height: 200px;
  border-radius: 12px;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.1);
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: auto;
  transition: transform 0.2s;
  display: block;
}

/* Vidéo dans le carrousel (mêmes contraintes qu'une image) */
.modal__panel .carousel .carousel__item video{
  height: 200px;
  border-radius: 12px;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.1);
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: auto;
  transition: transform 0.2s, opacity 0.3s ease;
  display: block;
  background: #000;
}

/* Wrapper vidéo : shimmer pendant le chargement */
.carousel__item--video-wrap {
  position: relative;
}
.carousel__item--video-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(
    90deg,
    var(--bg) 25%,
    var(--shadow-dark) 50%,
    var(--bg) 75%
  );
  background-size: 200% 100%;
  animation: videoShimmer 1.2s ease-in-out infinite;
  opacity: 1;
  transition: opacity 0.3s ease;
  z-index: 1;
  pointer-events: none;
}

/* Quand la vidéo est prête : on masque le shimmer */
.carousel__item--video-wrap:has(video:not(.carousel__video--loading))::before {
  opacity: 0;
  pointer-events: none;
}

@keyframes videoShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* La vidéo elle-même invisible tant que pas chargée, visible après */
.carousel__video--loading {
  opacity: 0;
}
.carousel__video:not(.carousel__video--loading) {
  opacity: 1;
}

.modal__panel .carousel .carousel__item img:hover { transform: scale(1.02); }

.modal__panel .carousel .carousel__item video:hover { transform: scale(1.02); }

@keyframes photoPop {
  0%   { opacity: 0; transform: translateY(10px) scale(0.92); }
  60%  { opacity: 1; transform: translateY(0) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- DESCRIPTION ET BOUTON VOIR PLUS --- */
/* --- GESTION DU TEXTE MODALE --- */

.modal__panel .desc {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 10px;
  color: var(--text-main);
  white-space: pre-wrap;
  transition: max-height 0.3s ease;
  
  /* IMPORTANT : Par défaut, on prépare le terrain pour le scroll */
  overflow-y: hidden; 
}

/* 1. État REPLIÉ (Texte coupé avec "Voir plus") */
.modal__panel .desc.clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  /* Fallback hauteur fixe */
  max-height: 6.4em; 
}

/* 2. État DÉPLIÉ (Quand on a cliqué sur "Voir plus") */
.modal__panel .desc:not(.clamped) {
  display: block;      /* On repasse en block standard */
  overflow-y: auto;    /* Active le scroll INTERNE */
  max-height: 200px;   /* Hauteur max fixe sur PC */
  padding-right: 10px; /* Marge pour ne pas que le texte touche la scrollbar */
}

/* 3. Ajustement SPÉCIFIQUE MOBILE pour l'état déplié */
@media (max-width: 768px) {
  /* On cible le texte quand il est DÉPLIÉ (non coupé) */
  .modal__panel .desc:not(.clamped) {
    /* AVANT : max-height: 40vh; (Trop grand) */
    
    /* MAINTENANT : On réduit drastiquement */
    max-height: 25vh; 
    
    /* Optionnel : Ajoute une marge interne pour aérer */
    margin-bottom: 15px; 
  }
}

/* --- SCROLLBAR INTERNE DU TEXTE (Pour faire joli) --- */
.modal__panel .desc::-webkit-scrollbar { width: 4px; }
.modal__panel .desc::-webkit-scrollbar-track { background: transparent; }
.modal__panel .desc::-webkit-scrollbar-thumb { 
  background-color: var(--accent); 
  border-radius: 10px; 
  opacity: 0.5;
}

.read-more-btn {
  background: none; border: none; padding: 0; color: var(--accent); font-weight: 700;
  font-size: 14px; cursor: pointer; margin-bottom: 24px; text-decoration: underline;
  display: inline-block; opacity: 0.8; transition: opacity 0.2s;
}
.read-more-btn:hover { opacity: 1; }

/* --- ZOOM OVERLAY & TRACK --- */
.zoom-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3000;
  background: var(--overlay-bg);
  display: flex; align-items: center; justify-content: center;
  
  /* --- AJOUT POUR LE FLOU --- */
  backdrop-filter: blur(10px);        
  -webkit-backdrop-filter: blur(10px);
  /* -------------------------- */

  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.zoom-overlay.active { opacity: 1; pointer-events: auto; }

.zoom-track {
  display: flex; width: 100%; height: 100%; overflow-x: auto;
  align-items: center; gap: 0; scrollbar-width: none; cursor: grab;
}
.zoom-track:active { cursor: grabbing; }
.zoom-track::-webkit-scrollbar { display: none; }

.zoom-slide {
  min-width: 100%; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; scroll-snap-align: center;
  overflow: hidden;
}
.zoom-slide img {
  width: auto; height: auto; max-width: 90vw; max-height: 90vh;
  object-fit: contain; box-shadow: 0 0 30px rgba(0,0,0,0.5);
  cursor: zoom-in;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  transform-origin: center center;
  will-change: transform;
  touch-action: none;
}
.zoom-slide img.zoomed-in {
  cursor: zoom-out;
  /* Le transform est géré en JS pour le pan */
}

/* Vidéo dans le zoom overlay : même look qu'une image, mais pas de zoom-in */
.zoom-slide video {
  width: auto; height: auto; max-width: 90vw; max-height: 90vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(0,0,0,0.5);
  cursor: default;
  display: block;
  background: #000;
  touch-action: none;
}

.close-zoom { position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,0.2); color: #fff; border: none; z-index: 3001; }
.close-zoom:hover { background: rgba(255,255,255,0.4); }

/* --- ANIMATIONS ET ÉTATS GLOBAUX --- */
@keyframes messagePop {
  0% { opacity: 0; transform: translateY(20px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.msg { animation: messagePop 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards; transform-origin: bottom center; }

@keyframes msgDepop {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.85) translateY(-10px); }
}
.msg.msg-exiting {
  animation: msgDepop 0.35s ease-in forwards;
  pointer-events: none;
}

.header, .messages, .composer, .suggestions { transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease; }

/* body.stage-center .header { transform: translateY(-100%); opacity: 0; pointer-events: none; } */
body.stage-center .messages { opacity: 0; pointer-events: none; }
body.stage-center .suggestions { transform: translateY(-40vh); }
body.stage-center .composer { transform: translateY(-40vh); }
body.stage-center #app { justify-content: flex-end; }

/* --- MEDIA QUERIES --- */
@media (max-width: 768px) {
  .suggestions { flex-direction: column; justify-content: flex-start; padding-left: 20px; padding-right: 20px; }
  .suggestion-chip { text-align: left; border-radius: 12px; }
  .typing { top: 10px; padding-left: 45px; }
  .neu-input { font-size: 15px !important; }
  .header .title { font-size: 14px; letter-spacing: 0.02em; }
  
  body.stage-center .composer,
  body.stage-center .suggestions { transform: translateY(0) !important; }

  body.stage-center .header { transform: translateY(0) !important; opacity: 1 !important; pointer-events: auto !important; }
  .composer { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
}

@media (max-width: 480px) {
  .composer { padding: 30px; }
  .composer .row { gap: 8px; }
  .neu-btn { padding: 0 16px; font-size: 14px; }
  .neu-input { min-width: 0; }
}

@media (min-width: 769px) {
  .composer { padding-bottom: 60px; }
.neu-panel {
    /* Largeur : On passe de 600px (défaut) à 900px ou plus */
    max-width: 900px; 
    
    /* On garde une marge de sécurité sur les côtés */
    width: 85%; 
    
    /* Optionnel : On peut aussi ajuster la hauteur max si besoin */
    max-height: 90vh; 
  }
}

/* =========================================
   EFFET GRAIN / NOISE
   ========================================= */

/* =========================================
   EFFET GRAIN / NOISE (FINAL)
   ========================================= */

/* =========================================
   EFFET GRAIN / NOISE (SANS FICHIER IMAGE)
   ========================================= */

/* =========================================
   EFFET GRAIN ANIMÉ (DATA URI + KEYFRAMES)
   ========================================= */

.texture-fond {
  /* 1. Positionnement par-dessus tout le site */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* 2. Indispensable pour cliquer sur tes boutons en dessous */
  pointer-events: none;
  z-index: 9999;

  /* 3. L'IMAGE DE BRUIT (Générée directement, pas de fichier nécessaire) */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
  
  /* Taille du motif (plus petit = grain plus fin) */
  background-size: 400px 400px;

  /* 4. REGLAGES DE VISIBILITÉ (C'est ici que tu doses) */
  opacity: 0.3;            /* Monte à 0.25 ou 0.30 pour un effet très fort */
  mix-blend-mode: overlay;  /* Essaie 'hard-light' si 'overlay' est trop doux */

  /* 5. L'ANIMATION */
  /* 0.2s = vitesse frenetique / steps(1) = saccadé sans lissage */
  animation: noise 0.2s steps(1) infinite;
}

/* 6. LE MOUVEMENT (Fait vibrer l'image) */
@keyframes noise {
  0%   { background-position: 0 0; }
  10%  { background-position: -5% -10%; }
  20%  { background-position: -15% 5%; }
  30%  { background-position: 7% -25%; }
  40%  { background-position: 20% 25%; }
  50%  { background-position: -25% 10%; }
  60%  { background-position: 15% 5%; }
  70%  { background-position: 0% 15%; }
  80%  { background-position: 25% 35%; }
  90%  { background-position: -10% 10%; }
  100% { background-position: 0 0; }
}

/* --- ANIMATIONS OVERSCROLL (ELASTIQUE) --- */

/* Appliqué au conteneur quand on relâche la souris pour qu'il revienne en place */
.zoom-track.bouncing, .carousel.bouncing {
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Effet rebond */
  transform: translateX(0) !important;
}

/* Animations pour le clavier (quand on tape flèche gauche/droite en butée) */
@keyframes nudgeRight {
  0% { transform: translateX(0); }
  50% { transform: translateX(30px); } /* Déplacement vers la droite */
  100% { transform: translateX(0); }
}

@keyframes nudgeLeft {
  0% { transform: translateX(0); }
  50% { transform: translateX(-30px); } /* Déplacement vers la gauche */
  100% { transform: translateX(0); }
}

.anim-nudge-right {
  animation: nudgeRight 0.3s ease-in-out;
}

.anim-nudge-left {
  animation: nudgeLeft 0.3s ease-in-out;
}

/* --- ANIMATIONS SUGGESTIONS --- */

/* Apparition (Rebond élastique) */
@keyframes chipPopIn {
  0% { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: scale(1); }
}

/* Disparition (Rétrécissement rapide) */
@keyframes chipPopOut {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.6); }
}

/* Application par défaut (Entrée) */
.suggestion-chip {
  /* On garde vos styles existants et on ajoute l'anim */
  animation: chipPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  
  /* Important pour que l'animation de sortie soit fluide */
  transform-origin: center center;
  backface-visibility: hidden;
}

/* Classe à ajouter en JS pour la sortie */
.suggestion-chip.exiting {
  animation: chipPopOut 0.3s ease-in forwards;
  pointer-events: none; /* Empêche de recliquer pendant qu'elles partent */
}

/* --- Ajustement Mobile Uniquement --- */
@media (max-width: 768px) {
  .cards {
    /* Au lieu de 100%, on met 92% pour laisser un petit espace sur les côtés */
    width: 92%; 
    
    /* Important : permet de centrer la carte dans l'espace restant */
    margin: 0 auto;
    margin-left: 0; 
    margin-right: auto; 
    
    /* On supprime le padding vertical pour que l'avatar s'aligne parfaitement avec le bas de l'image */
    padding: 0;
  }
}

@media (max-width: 768px) {
  .modal__panel .carousel .carousel__item img{
    box-shadow: 2px 2px 6px rgba(0,0,0,0.12);
  }
}


/* ---- Flag / Signalement ---- */
.flag-btn {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
  color: var(--text-secondary, #999);
  padding: 2px 4px;
  border-radius: 4px;
}
.msg.assistant:hover .flag-btn {
  opacity: 0.5;
}
.flag-btn:hover {
  opacity: 1 !important;
  color: var(--accent, #e74c3c);
}
.flag-btn.flagged {
  opacity: 0.6;
  color: var(--accent, #27ae60);
  cursor: default;
}
.msg.assistant {
  position: relative;
}