/* ===================================================
   Feuille de Style Principale pour INFORBALD
   Version Finale
   =================================================== */

/* --- 1. VARIABLES DE DESIGN --- */
:root {
  --color-background: #18181B; /* Un fond sombre et moderne */
  --color-surface: #27272A;   /* Une couleur légèrement plus claire pour les cartes */
  --color-primary: #EEAC04;   /* Votre couleur Or/Jaune pour les accents */
  --color-secondary: #e52d27; /* Couleur secondaire (rouge) */
  --color-text: #F4F4F5;      /* Un blanc cassé pour le texte, plus doux pour les yeux */
  --color-muted: #A1A1AA;     /* Un gris clair pour le texte secondaire */
  --font-family: system-ui, -apple-system, sans-serif;
  --container-width: 1140px;
}

/* --- 2. RESET ET STYLES DE BASE --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  background-image: linear-gradient(200deg, rgba(213, 213, 213, 0.01) 0%, rgba(213, 213, 213, 0.01) 14.286%,rgba(140, 140, 140, 0.01) 14.286%, rgba(140, 140, 140, 0.01) 28.572%,rgba(52, 52, 52, 0.01) 28.572%, rgba(52, 52, 52, 0.01) 42.858%,rgba(38, 38, 38, 0.01) 42.858%, rgba(38, 38, 38, 0.01) 57.144%,rgba(159, 159, 159, 0.01) 57.144%, rgba(159, 159, 159, 0.01) 71.42999999999999%,rgba(71, 71, 71, 0.01) 71.43%, rgba(71, 71, 71, 0.01) 85.71600000000001%,rgba(88, 88, 88, 0.01) 85.716%, rgba(88, 88, 88, 0.01) 100.002%),linear-gradient(337deg, rgba(25, 25, 25, 0.01) 0%, rgba(25, 25, 25, 0.01) 12.5%,rgba(150, 150, 150, 0.01) 12.5%, rgba(150, 150, 150, 0.01) 25%,rgba(84, 84, 84, 0.01) 25%, rgba(84, 84, 84, 0.01) 37.5%,rgba(85, 85, 85, 0.01) 37.5%, rgba(85, 85, 85, 0.01) 50%,rgba(188, 188, 188, 0.01) 50%, rgba(188, 188, 188, 0.01) 62.5%,rgba(80, 80, 80, 0.01) 62.5%, rgba(80, 80, 80, 0.01) 75%,rgba(73, 73, 73, 0.01) 75%, rgba(73, 73, 73, 0.01) 87.5%,rgba(219, 219, 219, 0.01) 87.5%, rgba(219, 219, 219, 0.01) 100%),linear-gradient(203deg, rgba(233, 233, 233, 0.01) 0%, rgba(233, 233, 233, 0.01) 25%,rgba(114, 114, 114, 0.01) 25%, rgba(114, 114, 114, 0.01) 50%,rgba(164, 164, 164, 0.01) 50%, rgba(164, 164, 164, 0.01) 75%,rgba(228, 228, 228, 0.01) 75%, rgba(228, 228, 228, 0.01) 100%),linear-gradient(317deg, rgba(139, 139, 139, 0.02) 0%, rgba(139, 139, 139, 0.02) 16.667%,rgba(44, 44, 44, 0.02) 16.667%, rgba(44, 44, 44, 0.02) 33.334%,rgba(166, 166, 166, 0.02) 33.334%, rgba(166, 166, 166, 0.02) 50.001000000000005%,rgba(2, 2, 2, 0.02) 50.001%, rgba(2, 2, 2, 0.02) 66.668%,rgba(23, 23, 23, 0.02) 66.668%, rgba(23, 23, 23, 0.02) 83.33500000000001%,rgba(21, 21, 21, 0.02) 83.335%, rgba(21, 21, 21, 0.02) 100.002%),linear-gradient(328deg, rgba(3, 3, 3, 0.03) 0%, rgba(3, 3, 3, 0.03) 12.5%,rgba(116, 116, 116, 0.03) 12.5%, rgba(116, 116, 116, 0.03) 25%,rgba(214, 214, 214, 0.03) 25%, rgba(214, 214, 214, 0.03) 37.5%,rgba(217, 217, 217, 0.03) 37.5%, rgba(217, 217, 217, 0.03) 50%,rgba(68, 68, 68, 0.03) 50%, rgba(68, 68, 68, 0.03) 62.5%,rgba(118, 118, 118, 0.03) 62.5%, rgba(118, 118, 118, 0.03) 75%,rgba(200, 200, 200, 0.03) 75%, rgba(200, 200, 200, 0.03) 87.5%,rgba(198, 198, 198, 0.03) 87.5%, rgba(198, 198, 198, 0.03) 100%),linear-gradient(97deg, rgba(195, 195, 195, 0.03) 0%, rgba(195, 195, 195, 0.03) 16.667%,rgba(177, 177, 177, 0.03) 16.667%, rgba(177, 177, 177, 0.03) 33.334%,rgba(170, 170, 170, 0.03) 33.334%, rgba(170, 170, 170, 0.03) 50.001000000000005%,rgba(158, 158, 158, 0.03) 50.001%, rgba(158, 158, 158, 0.03) 66.668%,rgba(121, 121, 121, 0.03) 66.668%, rgba(121, 121, 121, 0.03) 83.33500000000001%,rgba(146, 146, 146, 0.03) 83.335%, rgba(146, 146, 146, 0.03) 100.002%),linear-gradient(268deg, rgba(103, 103, 103, 0.03) 0%, rgba(103, 103, 103, 0.03) 25%,rgba(112, 112, 112, 0.03) 25%, rgba(112, 112, 112, 0.03) 50%,rgba(4, 4, 4, 0.03) 50%, rgba(4, 4, 4, 0.03) 75%,rgba(227, 227, 227, 0.03) 75%, rgba(227, 227, 227, 0.03) 100%),linear-gradient(90deg, hsl(98,0%,0%),hsl(98,0%,0%));  color: var(--color-text);
  line-height: 1.6;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--color-text);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
  margin-top: 5%;
  flex-grow: 1;
}

.container {
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;
}

/* --- 3. EN-TÊTE ET NAVIGATION --- */
.main-header {
  background-color: rgba(24, 24, 27, 0.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #333;
  padding: 1rem 0;
  
  /* --- MODIFICATIONS --- */
  position: fixed; /* On utilise 'fixed' au lieu de 'sticky' */
  top: 0;
  left: 0;
  width: 100%;     /* On s'assure qu'il prend toute la largeur */
  z-index: 9999;   /* On garde le z-index très élevé */
}

.main-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-logo img {
  height: 45px;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
}

.main-nav a {
  color: var(--color-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--color-text);
  border-bottom-color: var(--color-primary);
}
/* Style pour le bouton dans la navigation */
.nav-button {
  background-color: var(--color-primary);
  color: var(--color-background) !important; /* On force la couleur du texte */
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-weight: bold;
}

/* On s'assure que la bordure du bas n'apparaît pas sur le bouton */
.nav-button:hover {
  color: var(--color-background) !important;
  border-bottom-color: transparent !important;
  filter: brightness(1.1);
}
/* --- 4. PIED DE PAGE --- */
.main-footer {
  background-color: #111;
  text-align: center;
  padding: 1.5rem 0;
  margin-top: 3rem;
  color: var(--color-muted);
  font-size: 0.9rem;
}

/* --- 5. COMPOSANTS PAGE D'ACCUEIL --- */

.hero {
  background-color: var(--color-surface);
  padding: 4rem 0; /* Un peu moins de padding vertical */
  border-bottom: 1px solid #444;
}

/* Disposition en colonne et centrée */
.hero-content {
  display: flex;
  flex-direction: column; /* On empile les éléments verticalement */
  align-items: center;   /* On centre horizontalement */
  text-align: center;    /* On centre le texte */
  gap: 1rem;
}

/* Bloc de texte principal de la section hero */
.hero-text {
  max-width: 650px; /* On limite la largeur des lignes de texte */
  margin-bottom: 2rem; /* Espace avant l'animation */
}

/* Le logo dans la section hero */
.hero-logo {
    width: 30%;
    margin-left: auto; /* Centrage horizontal */
    margin-right: auto;
}

.hero-text h1 {
  font-size: 3.5rem;
  color: var(--color-text);
  margin-bottom: 1rem;
}

.hero-text .subtitle {
  font-size: 1.2rem;
  color: var(--color-muted);
  margin-bottom: 2rem;
}

/* Conteneur de l'animation 3D */
.hero-animation {
  width: 100%;
}

/* Style générique pour les boutons */
.btn {
  display: inline-block;
  padding: 0.8rem 1.8rem;
  border-radius: 50px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1rem;
  transition: transform 0.3s, background-color 0.3s, filter 0.3s;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-background);
}

.btn:hover {
    transform: translateY(-3px);
    filter: brightness(1.1);
}

/* Section pour la grille des services */
.services {
    padding: 4rem 0;
    background-image: linear-gradient(0deg, transparent 0%, transparent 60%,rgba(183, 183, 183,0.05) 60%, rgba(183, 183, 183,0.05) 93%,transparent 93%, transparent 100%),linear-gradient(135deg, transparent 0%, transparent 55%,rgba(183, 183, 183,0.05) 55%, rgba(183, 183, 183,0.05) 84%,transparent 84%, transparent 100%),linear-gradient(0deg, transparent 0%, transparent 80%,rgba(183, 183, 183,0.05) 80%, rgba(183, 183, 183,0.05) 94%,transparent 94%, transparent 100%),linear-gradient(90deg, rgb(0,0,0),rgb(0,0,0));
}

/* Titre de section réutilisable */
.section-title {
    text-align: center;
    font-size: 2.5rem;
    color: var(--color-text);
}

/* NOUVELLE VERSION AVEC FLEX-WRAP */
.services-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Centre les cartes sur la ligne */
  gap: 2rem;
  width: 100%;
}
.service-card {
  background-color: var(--color-surface);
  padding: 2rem;
  border-radius: 8px;
  border: 1px solid #333;
  transition: transform 0.3s, border-color 0.3s;
  
  /* On ajoute une base de taille pour le flexbox */
  flex: 1 1 280px; /* Chaque carte essaiera de faire au moins 280px */
  max-width: 350px; /* On évite qu'elles ne deviennent trop larges */
}

.service-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
}

.service-card h3 {
    color: var(--color-primary);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.service-card .learn-more {
    display: inline-block;
    margin-top: 1rem;
    font-weight: bold;
}
/* --- 6. ANIMATION IMPRIMANTE 3D (VOS VALEURS) --- */
.printer-animation {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  background-color: var(--color-text);
  border-radius: 50%;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
}
.printer-animation .printer-part {
  position: absolute;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
}
.printer-animation .printer-base {
  width: 50%;
  bottom: 50px;
}
.printer-animation .printer-bar {
  width: 50%;
  animation: anim-bar 4s linear infinite;
}
.printer-animation .printer-extruder {
  width: 25px; 
  animation: anim-extruder 4s linear infinite;
}
@keyframes anim-bar {
  0%   { transform: translate(-50%, -0%); }
  25%  { transform: translate(-50%, -35%); }
  50%  { transform: translate(-50%, -50%); }
  75%  { transform: translate(-50%, 0%); }
  100% { transform: translate(-50%, -40%); }
}
@keyframes anim-extruder {
  0%   { transform: translate(-120%, 35%); }
  25%  { transform: translate(20%, 20%); }
  50%  { transform: translate(-120%, 10%); }
  75%  { transform: translate(20%, 20%); }
  100% { transform: translate(-120%, 35%); }
}

/* --- 7. PAGE SERVICES (DESIGN AVANCÉ) --- */
.page-header {
    background-color: var(--color-surface);
    text-align: center;
    padding: 3rem 0;
    border-bottom: 1px solid #333;
}
.page-header h1 { font-size: 2.8rem; color: var(--color-text); }
.page-header p { font-size: 1.1rem; color: var(--color-muted); }
.service-section { padding: 4rem 0; }
.detailed-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; }
.fade-in-section { transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.fade-in-section.is-visible { opacity: 1; transform: translateY(0); }

.service-detail-card {
    background: radial-gradient(circle, #303033, var(--color-surface));
    border: 1px solid #444;
    border-radius: 12px;
    padding: 2.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
    margin: 20px;
}
.service-detail-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, var(--color-primary), transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
    filter: blur(50px);
}
.service-detail-card:hover { transform: translateY(-5px); border-color: var(--color-primary); }
.service-detail-card:hover::before { opacity: 0.15; }
.service-detail-card > * { position: relative; z-index: 1; }
.service-detail-card .service-icon {
    width: 100%;
    max-width: 350px; /* Limite la largeur maximale de l'image */
    height: auto;     /* Laisse la hauteur s'ajuster proportionnellement */
    object-fit: cover;
    border-radius: 8px;
    margin-left: auto;  /* Centre l'image dans la carte */
    margin-right: auto;
}.service-detail-card h3 { font-size: 1.8rem; color: var(--color-text); margin-bottom: 1.5rem; height: 120px;}
.service-detail-card ul {
    list-style: none;
    text-align: left;
    padding-left: 1rem;
    color: var(--color-muted);
    margin-bottom: 2rem;
    flex-grow: 1;
    width: 100%;
}
.service-detail-card ul li { margin-bottom: 0.75rem; position: relative; padding-left: 25px; }
.service-detail-card ul li::before { content: '✓'; color: var(--color-primary); position: absolute; left: 0; font-weight: bold; }
.service-detail-card .btn { align-self: center; }
.btn-secondary { background-color: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); }
.btn-secondary:hover { background-color: var(--color-primary); color: var(--color-background); }

/* --- 8. PAGE PROJETS (CARROUSEL 3D, BENTO, IA) --- */
.project-showcase { padding: 4rem 0; min-height: 80vh; }
.carousel-scene { width: 300px; height: 200px; margin: 5rem auto; position: relative; perspective: 1000px; }
.project-carousel { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; animation: spin-carousel 25s linear infinite; }
.carousel-scene:hover .project-carousel { animation-play-state: paused; }
@keyframes spin-carousel { from { transform: rotateY(0deg); } to { transform: rotateY(-360deg); } }
.project-panel { position: absolute; width: 280px; height: 180px; left: 10px; top: 10px; background-size: cover; background-position: center; border-radius: 12px; border: 2px solid #555; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5); overflow: hidden; transition: transform 0.5s ease; }
.project-panel:nth-child(1) { transform: rotateY(  0deg) translateZ(280px); }
.project-panel:nth-child(2) { transform: rotateY( 60deg) translateZ(280px); }
.project-panel:nth-child(3) { transform: rotateY(120deg) translateZ(280px); }
.project-panel:nth-child(4) { transform: rotateY(180deg) translateZ(280px); }
.project-panel:nth-child(5) { transform: rotateY(240deg) translateZ(280px); }
.project-panel:nth-child(6) { transform: rotateY(300deg) translateZ(280px); }
/* Effet au survol d'un panneau */
.project-panel:hover {
  border-color: var(--color-primary);
}

/* On définit un effet de survol spécifique pour chaque panneau
 afin de conserver sa position dans le carrousel tout en l'agrandissant. */
.project-panel:nth-child(1):hover { transform: rotateY(  0deg) translateZ(310px) scale(1.1); }
.project-panel:nth-child(2):hover { transform: rotateY( 60deg) translateZ(310px) scale(1.1); }
.project-panel:nth-child(3):hover { transform: rotateY(120deg) translateZ(310px) scale(1.1); }
.project-panel:nth-child(4):hover { transform: rotateY(180deg) translateZ(310px) scale(1.1); }
.project-panel:nth-child(5):hover { transform: rotateY(240deg) translateZ(310px) scale(1.1); }
.project-panel:nth-child(6):hover { transform: rotateY(300deg) translateZ(310px) scale(1.1); }

.project-panel a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 50%); }
.project-panel .panel-info { color: white; font-weight: bold; text-transform: uppercase; padding: 1rem; text-shadow: 0 2px 5px black; }
.project-panel:hover .panel-info { transform: translateY(0); }
.img_site{width: 76%;}
.a_site{
  flex-direction: column;
}
/* Bento Grid pour les créations 3D */
.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 180px; gap: 1rem; }
.bento-item { grid-row: span var(--rows, 1); grid-column: span var(--cols, 1); background-size: cover; background-position: center; border-radius: 12px; border: 1px solid #444; transition: transform 0.3s ease; }
.bento-item:hover { transform: scale(1.03); }

/* Liste IA avec image "sticky" */
/* --- NOUVELLE VERSION --- */
.ia-feature-list {
  display: flex;
  flex-direction: column; /* On empile les éléments verticalement */
  align-items: center;    /* On centre horizontalement */
  gap: 3rem;
}

.ia-sticky-image {
  width: 100%;
  max-width: 500px; /* On donne une largeur maximale au visage */
  height: 50vh;     /* On ajuste la hauteur */
}

.ia-list-content {
  width: 100%;
  display: flex;
  align-items: center; /* On centre les cartes de service */
  gap: 2rem;
}

.ia-item {
  padding: 2rem;
  border: 1px solid transparent;
  max-width: 700px; /* On donne une largeur maximale aux descriptions */
  width: 100%;
  text-align: center;
}

.ia-item h3 {
  color: var(--color-primary);
  font-size: 1.5rem;
}

.ia-item p {
  color: var(--color-muted);
}

.w30ps{width: 30%;}
/* --- 9. SYSTÈME DE MODALE --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: center; z-index: 2000; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0s 0.4s; }
.modal-overlay.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.modal-window { background: var(--color-surface); border-radius: 12px; border: 1px solid #444; max-width: 800px; width: 90%; display: flex; box-shadow: 0 10px 40px rgba(0,0,0,0.5); transform: scale(0.9); transition: transform 0.4s ease; }
.modal-overlay.is-open .modal-window { transform: scale(1); }
.modal-img { width: 50%; object-fit: cover; border-radius: 12px 0 0 12px; }
.modal-content { padding: 2rem; width: 50%; }
.modal-title { font-size: 2rem; color: var(--color-primary); }
.modal-desc { color: var(--color-muted); margin: 1rem 0 2rem 0; }
.modal-close { position: absolute; top: 10px; right: 15px; background: none; border: none; color: var(--color-muted); font-size: 2rem; cursor: pointer; }
.modal-close:hover { color: var(--color-text); }

.image-gallery { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
.image-thumb { position: relative; }
.image-thumb img { 
    width: 150px; /* On met une taille fixe */
    height: 150px; 
    object-fit: cover; /* Important: remplit le carré sans déformer l'image */
    border-radius: 8px; 
    border: 2px solid #444;
}
.image-thumb .delete-link { position: absolute; top: -5px; right: -5px; background: var(--color-secondary); color: white; border-radius: 50%; width: 25px; height: 25px; text-align: center; line-height: 25px; text-decoration: none; font-weight: bold; }
/* Trouve l'ancienne règle et remplace-la par celle-ci */
.service-detail-card .service-icon {
  width: 100%; /* L'image prend toute la largeur de la carte */
  max-width: 350px; /* Mais elle ne dépassera jamais 350px de large */
  height: auto; /* La hauteur s'adapte pour ne pas déformer l'image */
  object-fit: cover;
  border-radius: 8px;
  margin-left: auto; /* Centre l'image horizontalement */
  margin-right: auto;
}
/* --- Style pour les filtres de recherche --- */
.filters-container {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 3rem;
  padding: 1.5rem;
  background-color: var(--color-surface);
  border-radius: 12px;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  flex-direction: column;
}

.filter-group label {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.filter-group select,
.filter-group input {
  min-width: 250px;
  padding: 0.8rem;
  background-color: var(--color-background);
  border: 1px solid #555;
  border-radius: 6px;
  color: var(--color-text);
  font-size: 1rem;
}

.filter-group select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23A1A1AA' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  padding-right: 2.5rem;
}
/* --- 10. RESPONSIVE DESIGN --- */
@media (max-width: 900px) {
    .hero-content { flex-direction: column; text-align: center; }
    .services-grid { grid-template-columns: 1fr; }
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
    .ia-feature-list { flex-direction: column; }
    .ia-sticky-image, .ia-list-content { width: 100%; }
    .ia-sticky-image { top: 90px; height: 40vh; margin-bottom: 2rem; }
    model-viewer {
      min-height: 300px;
  }
}
@media (max-width: 768px) {

  
  .hero-text h1 { font-size: 2.5rem; }
  .modal-window { flex-direction: column; max-height: 80vh; overflow-y: auto;}
  .modal-img { width: 100%; height: 200px; border-radius: 12px 12px 0 0;}
  .modal-content { width: 100%; }
}
@media (max-width: 480px) {
    .carousel-scene { width: 210px; height: 140px; margin: 3rem auto; }
    .project-panel { width: 190px; height: 120px; }
    .project-panel:nth-child(1) { transform: rotateY(  0deg) translateZ(165px); }
    .project-panel:nth-child(2) { transform: rotateY( 60deg) translateZ(165px); }
    .project-panel:nth-child(3) { transform: rotateY(120deg) translateZ(165px); }
    .project-panel:nth-child(4) { transform: rotateY(180deg) translateZ(165px); }
    .project-panel:nth-child(5) { transform: rotateY(240deg) translateZ(165px); }
    .project-panel:nth-child(6) { transform: rotateY(300deg) translateZ(165px); }
    .project-panel .panel-info { font-size: 0.8rem; }
}

/* --- 11. STYLE POUR LE MODÈLE 3D --- */

model-viewer {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background-color: transparent;
}

/* --- 12. EFFETS AVANCÉS POUR MODÈLE 3D --- */

/* On ajoute l'animation de flottaison au conteneur */
.ia-sticky-image {
  animation: float-animation 6s ease-in-out infinite;
}

/* Keyframes pour l'animation de flottaison */
@keyframes float-animation {
  0% {
      transform: translateY(0px);
  }
  50% {
      transform: translateY(-20px); /* Hauteur de la flottaison */
  }
  100% {
      transform: translateY(0px);
  }
}
/* --- 13. AJUSTEMENT POUR LE CONTENEUR 3D --- */

#celia-container {
  width: 100%;
  height: 100%;
  min-height: 450px; /* Assure une hauteur minimale pour que la scène soit visible */
  display: flex;
  justify-content: center;
  align-items: center;
}


/* --- 14. PAGE CONTACT --- */

.contact-section {
  padding: 4rem 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr; /* Deux colonnes de tailles différentes */
  gap: 3rem;
  background-color: var(--color-surface);
  padding: 3rem;
  border-radius: 12px;
  border: 1px solid #444;
}

.contact-info h3 {
  font-size: 1.8rem;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.contact-info p {
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}

.contact-info ul {
  list-style: none;
}

.contact-info ul li {
  margin-bottom: 0.5rem;
  color: var(--color-text);
}

.contact-form .form-group {
  margin-bottom: 1.5rem;
}

.contact-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--color-muted);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.8rem;
  background-color: var(--color-background);
  border: 1px solid #555;
  border-radius: 6px;
  color: var(--color-text);
  font-size: 1rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(238, 172, 4, 0.2);
}

/* Responsive pour la page contact */
@media (max-width: 900px) {
  .contact-grid {
      grid-template-columns: 1fr;
  }
}

/* Style pour le nouveau logo textuel */
.text-logo {
  font-family: 'Segoe UI', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 1.6rem; /* Un peu plus grand que les liens du menu */
  color: var(--color-text); /* Couleur blanche par défaut */
  text-decoration: none;
  letter-spacing: 1.5px; /* Espace légèrement les lettres pour un look pro */
  transition: color 0.3s ease;
}

/* On peut même lui donner la couleur primaire au survol */
.text-logo:hover {
  color: var(--color-primary);
}

/* On peut supprimer l'ancienne règle pour .header-logo img si elle existe encore */
.header-logo img {
  display: none; /* On s'assure que l'ancienne image est bien masquée */
}

/* --- 6. ANIMATIONS POUR LES CARTES DE SERVICE --- */

/* Conteneur commun pour les animations dans les cartes */
.card-animation-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem;
  position: relative;
}

/* --- Animation Maintenance (Nouvelle Version) --- */
.maintenance-animation {
  position: relative;
  width: 300px;
  height: 300px;
}

/* Position de base pour tous les éléments */
.maintenance-gear,
.maintenance-wrench,
.maintenance-screwdriver {
  position: absolute;
  left: 50%;
  top: 50%;
}

/* 1. L'écrou qui tourne */
.maintenance-gear {
  width: 100%;
  /* On le centre parfaitement */
  transform: translate(-50%, -50%);
  /* On applique l'animation de rotation */
  animation: spin-gear 10s linear infinite;
}

/* 2. La clé qui bouge */
.maintenance-wrench {
  width: 100%;
  /* On la positionne et on applique son animation */
  animation: move-wrench 3s ease-in-out infinite;
}

/* 3. Le tournevis qui bouge */
.maintenance-screwdriver {
  width: 100%;
  /* On le positionne et on applique son animation */
  animation: move-screwdriver 3s ease-in-out infinite;
  animation-delay: -1.5s; /* On décale son animation pour un effet asynchrone */
}


/* KEYFRAMES POUR LES NOUVELLES ANIMATIONS */

/* Keyframe pour la rotation de l'écrou */
@keyframes spin-gear {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* NOUVEAU Keyframe pour le mouvement de la clé (rotation) */
@keyframes move-wrench {
  0%   { transform: translate(-50%, -50%) rotate(25deg); }   /* 45deg de base - 20deg */
  50%  { transform: translate(-50%, -50%) rotate(65deg); }   /* 45deg de base + 20deg */
  100% { transform: translate(-50%, -50%) rotate(25deg); }   /* 45deg de base - 20deg */
}

/* NOUVEAU Keyframe pour le mouvement du tournevis (rotation) */
@keyframes move-screwdriver {
  0%   { transform: translate(-50%, -50%) rotate(-65deg); }  /* -45deg de base - 20deg */
  50%  { transform: translate(-50%, -50%) rotate(-25deg); }  /* -45deg de base + 20deg */
  100% { transform: translate(-50%, -50%) rotate(-65deg); }  /* -45deg de base - 20deg */
}


/* --- Animation Développement Web --- */
.web-animation {
  position: relative;
  width: 300px;
  height: 300px;
}
.web-base, .web-code {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.web-base {
  width: 100%;
}
.web-code {
  width: 100%;
  clip-path: inset(0 100% 0 0); /* Cache le code au début */
  animation: anim-code 4s linear infinite;
}

@keyframes anim-code {
  0%   { clip-path: inset(0 100% 0 0); } /* Totalement caché */
  50%  { clip-path: inset(0 0 0 0); }    /* Totalement visible */
  100% { clip-path: inset(0 0 0 100%); } /* Disparaît par la gauche */
}

/* --- 15. PAGE SOLUTIONS IA --- */
.ia-section-layout {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.ia-section-layout.reverse {
  flex-direction: row-reverse;
}

.ia-section-text, .ia-section-visual {
  flex: 1; /* Chaque colonne prend 50% de la largeur */
}

.ia-section-text h2 {
  font-size: 2.2rem;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.ia-section-text p {
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}

.ia-section-text ul {
  list-style: none;
  margin-bottom: 2rem;
}

.ia-section-text ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 0.75rem;
}

.ia-section-text ul li::before {
  content: '✓';
  color: var(--color-primary);
  position: absolute;
  left: 0;
  font-weight: bold;
}

/* Conteneur pour le visage 3D sur cette page */
#celia-container-ia-page {
  width: 100%;
  height: 100%;
  min-height: 450px;
}

@media(max-width: 900px) {
  .ia-section-layout {
      flex-direction: column !important;
  }
}
/* --- 15. INTERFACE SAPHIRA IA --- */

.saphira-container {
  display: flex;
  height: calc(100vh - 80px); /* Hauteur de l'écran moins le header */
  width: 100%;
}

.saphira-visage-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-background);
}

#celia-container {
  width: 100%;
  height: 100%;
  max-width: 600px;
  max-height: 600px;
}

.saphira-chat-container {
  flex: 1;
  background-color: var(--color-surface);
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border-left: 1px solid #444;
}

.dialogue-area {
  flex-grow: 1;
  overflow-y: auto;
  padding-right: 1rem;
}

.message-container {
  max-width: 85%;
  margin-bottom: 1rem;
  padding: 0.8rem 1.2rem;
  border-radius: 18px;
  line-height: 1.5;
}

.message-container.user-message {
  background-color: var(--color-primary);
  color: var(--color-background);
  border-radius: 18px 18px 4px 18px;
  margin-left: auto; /* Aligne à droite */
}

.message-container.saphira-message {
  background-color: #3f3f46;
  color: var(--color-text);
  border-radius: 18px 18px 18px 4px;
  margin-right: auto; /* Aligne à gauche */
}

.prompt-area {
  padding-top: 1.5rem;
  border-top: 1px solid #444;
}

.prompt-form {
  display: flex;
  gap: 1rem;
}

#prompt-input {
  flex-grow: 1;
  padding: 0.8rem;
  background-color: var(--color-background);
  border: 1px solid #555;
  border-radius: 8px;
  color: var(--color-text);
  font-size: 1rem;
}

#prompt-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(238, 172, 4, 0.2);
}

#send-button {
  background-color: var(--color-primary);
  color: var(--color-background);
  border: none;
  border-radius: 8px;
  padding: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsive pour l'interface de chat */
@media (max-width: 900px) {
  .saphira-container {
      flex-direction: column;
      height: auto;
  }
  .saphira-visage-container {
      height: 50vh;
      min-height: 350px;
  }
  #celia-container canvas{     
    width: 50%!important;
    height: unset!important;
  }
}

/* --- 16. BOUTONS D'ACTION SUR LES MESSAGES --- */
.message-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.message-action-button {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  border-radius: 5px;
  width: 30px;
  height: 30px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, color 0.2s;
}
.message-action-button:hover {
  background: var(--color-primary);
  color: var(--color-background);
}

/* --- 17. SÉLECTEUR DE LANGUE --- */
.language-selector-wrapper {
  position: relative;
}

#language-selector {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--color-surface);
  border: 1px solid #555;
  padding: 0.8rem;
  padding-right: 2rem; /* Espace pour la flèche */
  border-radius: 8px;
  color: var(--color-text);
  cursor: pointer;
  font-size: 1rem;
}

.language-selector-wrapper::after {
  content: '▾';
  font-size: 1.2rem;
  color: var(--color-muted);
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* --- 18. BOUTON STOP --- */
.prompt-area {
  position: relative; /* Nécessaire pour positionner le bouton stop */
}

.stop-button {
  position: absolute;
  bottom: 100%; /* Se place juste au-dessus de la barre de prompt */
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 1rem;
  background-color: var(--color-secondary);
  color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  transition: transform 0.2s ease;
}

.stop-button:hover {
  transform: translateX(-50%) scale(1.1);
}
/* --- 19. MODALE DES CONDITIONS D'UTILISATION --- */

/* Appliqué au body par JS pour bloquer le scroll */
body.modal-open {
  overflow: hidden;
}

/* On s'assure que la modale est bien au-dessus de tout */
#terms-modal-overlay {
  z-index: 3000;
}

.terms-modal {
  max-width: 550px; /* Taille de la modale */
  text-align: center;
}

.terms-modal .modal-content {
  width: 100%;
  padding: 1rem 2rem 2rem 2rem;
}

.terms-modal .text-link {
  display: inline-block;
  margin: 1rem 0;
  font-weight: bold;
}

.checkbox-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 1.5rem 0;
  color: var(--color-muted);
}

#terms-checkbox {
  width: 18px;
  height: 18px;
}

/* Style du bouton quand il est désactivé */
#terms-accept-btn:disabled {
  background-color: var(--color-surface);
  color: var(--color-muted);
  cursor: not-allowed;
  filter: none;
  transform: none;
}

/* --- 20. MENU BURGER RESPONSIVE --- */

/* Style du bouton burger */
.burger-toggle {
  display: none; /* Caché par défaut sur grand écran */
  width: 30px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 1500; /* Doit être au-dessus du menu */
}

.burger-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--color-text);
  border-radius: 3px;
  position: absolute;
  left: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.burger-toggle span:nth-child(1) { top: 0; }
.burger-toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.burger-toggle span:nth-child(3) { bottom: 0; }

/* Animation du burger en croix (X) */
.burger-toggle.is-active span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
.burger-toggle.is-active span:nth-child(2) {
  opacity: 0;
}
.burger-toggle.is-active span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

/* Media Query pour les écrans mobiles */
@media (max-width: 900px) { /* On peut ajuster ce seuil */
  
  /* On affiche le bouton burger */
  .burger-toggle {
      display: block;
  }
  main {
    margin-top: 18%;
    flex-grow: 1;
}
  /* On transforme la navigation en panneau latéral */
  .main-nav {
      position: fixed;
      top: 0;
      right: 0;
      width: 300px; /* Largeur du panneau */
      max-width: 80%;
      height: 100vh;
      background-color: #111;
      padding-top: 100px;
      transform: translateX(100%); /* Caché par défaut sur la droite */
      transition: transform 0.4s ease-in-out;
      z-index: 1400;
  }

  /* Style du menu quand il est ouvert */
  .main-nav.is-mobile-nav-open {
      transform: translateX(0);
  }
  
  .main-nav ul {
      flex-direction: column;
      align-items: center;
      width: 100%;
      gap: 1rem;
  }

  .main-nav ul li {
      width: 100%;
      text-align: center;
  }

  .main-nav ul a {
      display: block;
      padding: 1rem;
      font-size: 1.1rem;
      width: 100%;
  }

  .main-nav ul a.nav-button {
      margin: 1rem auto;
      width: fit-content; /* Le bouton s'adapte à son contenu */
  }
}

/* --- 19. VUE OBJET 3D INDIVIDUEL --- */
model-viewer {
  width: 100%;
  height: 500px;
  border-radius: 12px;
  background-color: var(--color-surface);
}
/* --- 21. STYLES POUR LES PAGES LÉGALES ET FOOTER --- */

/* Conteneur pour le texte des pages comme Mentions Légales */
.legal-content {
  background-color: var(--color-surface);
  padding: 2rem;
  border-radius: 8px;
  color: var(--color-muted);
  line-height: 1.7;
}

.legal-content h3 {
  color: var(--color-primary);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* Classe de texte justifié que vous utilisiez */
.text_align_justify {
  text-align: justify;
  margin-bottom: 1rem;
}

/* Style pour les liens dans le footer */
.footer-links {
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  font-size: 0.9rem;
}

.footer-links a {
  color: var(--color-muted);
  transition: color 0.3s;
}

.footer-links a:hover {
  color: var(--color-primary);
}

.footer-links span {
  color: #555;
}

/* Media Query pour les écrans mobiles */
@media (max-width: 900px) { /* On peut ajuster ce seuil */
    model-viewer {
      width: 300px;
  }
  .ia-list-content{
    flex-direction: column;
    margin-top: 20%;
  }
  .prompt-form{
    flex-direction: column;
  }
}

/* --- 20. PAGE CRÉER OBJET FUTURISTE --- */

.futuristic-page-wrapper {
    padding: 4rem 0;
    /* Un fond subtil de grille technologique */
    background-color: #0d0d10;
    background-image: 
        linear-gradient(var(--color-primary-faded, rgba(238, 172, 4, 0.1)) 1px, transparent 1px),
        linear-gradient(to right, var(--color-primary-faded, rgba(238, 172, 4, 0.1)) 1px, transparent 1px);
    background-size: 40px 40px;
}

.futuristic-header {
    text-align: center;
    margin-bottom: 3rem;
}

.futuristic-header h1 {
    font-size: 3rem;
    text-transform: uppercase;
    color: var(--color-primary);
    text-shadow: 0 0 10px var(--color-primary);
}

.futuristic-header p {
    font-size: 1.2rem;
    color: var(--color-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* Conteneur du formulaire avec la bordure animée */
.form-container-futuristic {
    position: relative;
    padding: 2px; /* L'espace pour la bordure */
    background: var(--color-background);
    border-radius: 12px;
    max-width: 700px;
    margin: 0 auto;
    overflow: hidden; /* Pour que la bordure suive le border-radius */
}

/* La bordure animée (pseudo-élément) */
.form-container-futuristic::before {
    content: '';
	position: absolute;
	left: -50%;
	top: -50%;
    width: 200%;
    height: 200%;
	background: conic-gradient(transparent, var(--color-primary), transparent 30%);
	animation: steam 4s linear infinite;
    z-index: 1;
}

/* On s'assure que le formulaire est bien au-dessus de la bordure animée */
.form-container-futuristic .futuristic-form {
    position: relative;
    z-index: 2;
    background: var(--color-background);
    padding: 2.5rem;
    border-radius: 11px;
}

/* On réutilise l'animation de votre ancien CSS mais renommée */
@keyframes steam {
	to {
		transform: rotate(360deg);
	}
}

/* --- 21. CORRECTION POUR LE VISAGE 3D SUR LA PAGE SERVICES --- */

#celia-container-services {
  width: 100%;
  height: 100%;
  min-height: 450px; /* Force une hauteur minimale pour être visible */
}

/* --- PAGE DEVIS MAINTENANCE --- */

.devis-section {
  padding: 4rem 0;
}

.devis-container {
  background-color: var(--color-surface);
  padding: 2rem 3rem;
  border-radius: 12px;
  border: 1px solid #444;
}

.devis-container h3 {
  color: var(--color-primary);
  font-size: 1.8rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  border-left: 3px solid var(--color-primary);
  padding-left: 1rem;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.services-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.service-checkbox {
  background-color: var(--color-background);
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid #555;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
  display: flex;
  align-items: center;
}

.service-checkbox:hover {
  border-color: var(--color-primary);
}

.service-checkbox input[type="checkbox"] {
  display: none; /* On cache la case à cocher par défaut */
}

.checkbox-custom {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-muted);
  border-radius: 4px;
  margin-right: 1rem;
  display: inline-block;
  transition: background-color 0.3s, border-color 0.3s;
}

/* Style de la case quand elle est cochée */
.service-checkbox input[type="checkbox"]:checked + .checkbox-custom {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2318181B' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l3.072 3.098L8 1.986z'/%3e%3c/svg%3e");
}

.devis-total {
  text-align: right;
  font-size: 2rem;
  font-weight: bold;
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #444;
}

.devis-total span {
  color: var(--color-primary);
}

/* --- 22. GALERIE PAGE VUE OBJET --- */

.main-viewer {
  width: 100%;
  height: 500px;
  position: relative;
  background-color: var(--color-surface);
  border-radius: 12px;
}

.viewer-item {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  display: none; /* Caché par défaut */
}

.viewer-item.active {
  display: block; /* Visible */
}

#viewer-img {
  object-fit: contain; /* S'assure que l'image n'est pas déformée */
}

.thumbnail-gallery {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.thumbnail {
  width: 80px;
  height: 80px;
  border: 2px solid #555;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.3s;
  background-color: var(--color-surface);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
}

.thumbnail:hover {
  border-color: var(--color-primary);
}

.thumbnail.active {
  border-color: var(--color-primary);
  box-shadow: 0 0 10px var(--color-primary);
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- NOUVEAU : CARROUSEL DE LOGOS PARTENAIRES (VERSION GRANDS LOGOS) --- */

.partners-section {
  padding: 4rem 0;
}

.logo-carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
  /* On retire le masque en dégradé pour que les logos soient clairs sur les bords */
  -webkit-mask-image: none;
  mask-image: none;
}

.logo-carousel-track {
  display: flex;
  /* L'animation de défilement infini */
  animation: scroll-logos 5s linear infinite; /* J'ai ralenti l'animation pour les grands logos */
}

/* Chaque slide prend maintenant une grande largeur fixe */
.logo-carousel .slide {
  width: 500px;
  padding: 0 50px; /* Espace entre les logos */
  flex-shrink: 0; /* Empêche les slides de se rétrécir */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Style des logos : grands, clairs, sans effets */
.logo-carousel .slide img {
  height: auto;
  width: 100%;
  /* La taille maximale que prendra le logo */
  max-width: 400px;
  max-height: 400px;
  
  /* On retire tous les filtres pour afficher les couleurs originales */
  filter: none;
  opacity: 1;

  /* On retire toutes les transitions et transformations au survol */
  transition: none;
  transform: none;
}

/* On s'assure qu'il n'y a aucun effet au survol */
.logo-carousel .slide img:hover {
  transform: none;
  opacity: 1;
}

/* L'animation de défilement, la moitié de la piste */
@keyframes scroll-logos {
  from { transform: translateX(50%); }
  to { transform: translateX(-50%); }
}

/* --- STYLE DE LA BARRE DE DÉFILEMENT POUR LE CHAT --- */

/* Pour les navigateurs WebKit (Chrome, Safari, Edge...) */
.dialogue-area::-webkit-scrollbar {
  width: 8px; /* Largeur de la barre */
}

.dialogue-area::-webkit-scrollbar-track {
  background: var(--color-background); /* Couleur de fond de la piste */
}

.dialogue-area::-webkit-scrollbar-thumb {
  background-color: var(--color-secondary); /* La couleur rouge pour le curseur */
  border-radius: 10px; /* Coins arrondis */
}

/* Pour Firefox */
.dialogue-area {
  scrollbar-width: thin;
  scrollbar-color: var(--color-secondary) var(--color-background);
}

/* --- STYLE DE LA SCROLLBAR GLOBALE --- */

/* Pour les navigateurs WebKit (Chrome, Safari, Edge...) */
html::-webkit-scrollbar {
  width: 12px;
}

html::-webkit-scrollbar-track {
  background: var(--color-background); /* Fond sombre */
}

html::-webkit-scrollbar-thumb {
  background-color: var(--color-primary); /* Couleur jaune/or */
  border-radius: 20px;
  border: 3px solid var(--color-background); /* Bordure de la même couleur que le fond */
}

/* Pour Firefox */
html {
  scrollbar-width: auto;
  scrollbar-color: var(--color-primary) var(--color-background);
}