/* =========================
   RÉINITIALISATION DE BASE
   ========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =========================
   VARIABLES CSS
   ========================= */
:root {
  --text-main: #333;
  --text-secondary: #555;
  --interactive: #8B8B8B;
  --icon: #C0C0C0;
  --background-light: #FAF9F6;
  --highlight: #FFD700;
    --color-1: #F3D9DC;
    --color-2: #F7E6CF;
    --color-3: #FFF9D9;
    --color-4: #D6ECD2;
    --color-5: #D9E8F6;
    --color-6: #E6DAF1;
    --color-7: #FAF9F6; /* DEFAULT */
    --color-8: #000000;
  
  
}
canvas {
    display: block; /* Supprime les espaces autour du canvas */
    position: absolute; /* Permet un positionnement absolu */
    top: 0;
    left: 0;
    width: 100vw; /* 100% de la largeur de la fenêtre */
    height: 100vh; /* 100% de la hauteur de la fenêtre */
     z-index: 0 !important;
}

/* =========================
   STYLES GLOBAUX
   ========================= */
html {
  font-size: 16px; /* Taille de base des polices */
  scroll-behavior: smooth;
  line-height: 1.5;
}

body {
  font-family: Helvetica, Arial, sans-serif; /* Police principale */
  color: var(--text-main); /* Couleur principale */
  background: linear-gradient(to bottom, var(--background-light), #E0E0E0);
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* Décale tout le contenu à droite */
  min-height: 80vh;
  padding-right: 10px; /* Ajoute un léger espace sur la droite */
  }


body::after {
    content: "";
    position: fixed;
	display: block;
    top: 10%;
    right: 0;
	width: 400px; /* Largeur définie */
    min-height: 467px; /* Hauteur définie pour tester */
    background: url('../img/design/right.webp') no-repeat center;
    background-size: contain;
    opacity: 0.2; /* Légère transparence */
    z-index: -10;
	animation: sway 5s infinite ease-in-out;
}
html, body {
  height: 100%; /* Garantit que html et body remplissent la fenêtre */
  overflow: hidden; /* Empêche tout débordement et scroll */
}


.tile-html {
    box-sizing: border-box;
    position: relative;
    transform-origin: center;
    transform: scale(1);
    max-width: 150px; /* Limite maximale */
    max-height: 100px; /* Limite maximale */
}



/* ===========================
   TEXTE DORÉ EN RELIEF
=========================== */
#brand-title {
    position: fixed;
    top: 35px;
    left: 100px;
    font-family: "Orbitron", sans-serif;
    font-weight: 600;
    line-height: 1.1;
    pointer-events: none;
    user-select: none;
    z-index: 9999;

    /* Taille desktop par défaut */
    font-size: 26px;

    /* GOLD */
    background-image: linear-gradient(#e5c55a, #b89d42);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    /* RELIEF */
    text-shadow:
        1px 1px 2px rgba(255,255,255,0.35),
       -1px -1px 2px rgba(0,0,0,0.25);
}

#brand-title .subtitle {
    display: block;
    font-size: 18px;
    margin-top: 4px;
    font-weight: 400;

    background-image: linear-gradient(#e5c55a, #b89d42);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 0.85;

    text-shadow:
        1px 1px 1px rgba(255,255,255,0.25),
       -1px -1px 1px rgba(0,0,0,0.22);
}

.menu-layout {
    width: 100%;                 /* 🔹 Plein écran */
    padding: 25px 25px 25px;    /* 🔹 Marge top + marge gauche/droite confortable */
    display: flex;
    flex-direction: column;
    gap: 50px;                   /* 🔹 Espacement entre sections */
    box-sizing: border-box;      /* 🔹 Pour que le padding soit inclus dans le width */
}

.menu-section {
    display: flex;
    flex-direction: column;
    gap: 12px;                    /* 🔹 Espacement régulier entre chaque lien */
    font-family: "Inter", sans-serif;
}

/* TITRES ("Navigation", "Tools", etc.) */
.menu-section h2 {
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.5;
    margin: 0 0 4px 0;
}

/* LIENS DU MENU */
.menu-section a {
    display: flex;
    align-items: center;
    gap: 10px;                    /* 🔹 Espace icône / texte */
    font-size: 19px;              /* 🔹 Taille lisible mais pas énorme */
    font-weight: 400;
    text-decoration: none;
    color: rgba(0,0,0,0.85);
    transition: 0.2s ease-in-out;
    line-height: 1.25;
}

/* HOVER */
.menu-section a:hover {
    opacity: 1;
    transform: translateX(6px);
}

/* ICONES */
.menu-section a i {
    width: 22px;
    font-size: 20px;
    opacity: 0.85;
}

/* ===========================
   MEDIA QUERIES RESPONSIVE
=========================== */

/* TABLETTE */
@media (max-width: 1024px) {

    #brand-title {
    font-size: 22px;
    top: 30px;
    left: 80px;
}

    #brand-title .subtitle {
        font-size: 16px;
    }
}

/* MOBILE GRAND (iPhone Plus, Samsung S9 etc.) */
@media (max-width: 768px) {
    #brand-title {
        font-size: 18px;
        top: 22px;
        left: 80px;
    }

    #brand-title .subtitle {
        font-size: 14px;
    }
}

/* MOBILE PETIT (iPhone SE, Android budget…)*/
@media (max-width: 480px) {
    #brand-title {
        font-size: 15px;
        top: 35px;
        left: 82px;
    }

    #brand-title .subtitle {
        font-size: 12px;
    }
}



/* =========================
   HEADER
   ========================= */
header {
  position: absolute; /* Position absolue comme dans votre design */
  width: 100%; /* Garde le header sur toute la largeur */
  z-index: 1000; /* Priorité visuelle */
  display: flex;
  justify-content: space-between; /* Équilibre les éléments à gauche et à droite */
  align-items: center; /* Aligne les éléments verticalement */
  padding: 10px; /* Marges internes */
  background: none; /* Pas de fond */
}

/* =========================
   ICÔNES
   ========================= */
.icon {
  width: 40px; /* Taille des icônes */
  height: 40px;
  background: linear-gradient(to bottom, #457B9D, var(--interactive)); /* Dégradé */
  border-radius: 50%; /* Forme circulaire */
  display: inline-block; /* Conteneur pour centrer */
  transition: transform 0.3s ease, background 0.3s ease; /* Transition fluide */
}

.icon-button:hover {
  transform: scale(1.1); /* Effet d'agrandissement au survol */
  color: #007BFF; /* Accent bleu */
  transition: 0.3s ease;
}

/* Labels des icônes */
.icon-label {
  font-size: 12px; /* Texte sous les icônes */
  color: var(--text-secondary); /* Couleur du texte */
  text-align: center;
  margin-top: 5px; /* Espacement entre l’icône et le texte */
}

/* Conteneur des icônes */
.icon-container {
  display: flex; /* Disposition en ligne */
  justify-content: space-around; /* Distribution uniforme */
  align-items: center; 
  gap: 10px; /* Espacement entre les icônes */
  margin-left: auto; /* Décale tout le conteneur à droite */
}

.icon-button {
  color: var(--icon); /* Couleur des icônes */
  cursor: pointer; /* Curseur interactif */
  outline: none; /* Supprime le contour par défaut */
}

.icon-button:focus {
  outline: 3px solid var(--highlight); /* Met en évidence l'icône au focus */
}
/* Footer Menu */
.bottom-left-menu {
  position: fixed; /* Fixe le footer en bas de la fenêtre */
  bottom: 5px; /* Déplace le footer plus bas */
  left: 20px; /* Distance par rapport au bord droit */
  text-align: right; /* Aligne le texte à droite */
  z-index: 1000; /* S’assure que le footer reste visible par-dessus d’autres éléments */
}

/* Liste dans le footer */
.bottom-left-menu ul {
  display: flex; /* Disposition en ligne */
  gap: 10px; /* Espacement entre les éléments */
  list-style: none; /* Supprime les puces */
  margin: 0; /* Évite un débordement éventuel */
  padding: 0;
}

/* Liens dans le footer */
.bottom-left-menu li a {
  font-size: 0.8rem; /* Taille des liens */
  color: var(--text-secondary); /* Couleur des liens */
  text-decoration: none; /* Supprime le soulignement */
  position: relative; /* Nécessaire pour le pseudo-élément ::after */
  transition: color 0.3s ease, text-shadow 0.3s ease; /* Transition fluide */
}

/* Animation au survol */
.bottom-left-menu li a::after {
  content: '';
  position: absolute;
  bottom: -3px; /* Distance sous le lien */
  left: 0;
  width: 0;
  height: 2px;
  background: var(--highlight); /* Couleur de la barre */
  transition: width 0.3s ease; /* Animation fluide */
}

.bottom-left-menu li a:hover {
  text-shadow: 
    2px 2px 4px rgba(255, 255, 255, 1), 
    -2px -2px 4px rgba(0, 0, 0, 0.6); /* Effet de lumière sur le texte */
}

.bottom-left-menu li a:hover::after {
  width: 100%; /* Remplit la largeur du lien */
}


.bottom-right-menu {
  position: fixed; /* Fixe le footer en bas de la fenêtre */
  bottom: 5px; /* Déplace le footer plus bas */
  right: 20px; /* Distance par rapport au bord droit */
  text-align: right; /* Aligne le texte à droite */
  z-index:1000;
  pointer-events: auto;
}
.bottom-right-menu a { 
font-size: 0.8rem; /* Taille des liens */
  color: var(--text-secondary); /* Couleur des liens */
  text-decoration: none; /* Supprime le soulignement */
  position: relative; /* Nécessaire pour le pseudo-élément ::after */
  transition: color 0.3s ease, text-shadow 0.3s ease; /* Transition fluide */
}

.coffee-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #f8f9fa;
  color: #333;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.6rem 1.2rem;
  border: 1px solid #ccc;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: background 0.3s, transform 0.2s;
}
/* three js */

.threejs-container {
width: 100%; 
height: 100vh;	
height:100%;
 z-index: 0; 	
}
#threejs-container {
  pointer-events: none !important;
}

main {
  width:99%;
  height: 100vh; /* Prend toute la hauteur de la fenêtre */
  display: flex; /* Active Flexbox */
  justify-content: center; /* Centre horizontalement */
  align-items: center; /* Centre verticalement */
}
.wrapper {
  
  min-width: 300px; /* Largeur maximale pour les grands écrans */
  width: 90%; /* Largeur relative pour les petits écrans */
  max-height:80vh;
  background: #ffffff; /* Fond blanc pour l'article */
  padding: 20px; /* Espacement interne */
  border-radius: 8px; /* Coins arrondis */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre légère */
  opacity:0.75;
  font-family: 'Arial', sans-serif; /* Police lisible */
  line-height: 1.6; /* Améliore la lisibilité */
  overflow-x:hidden;
  overflow-y:auto;
  margin:auto;

}
/* =========================
   wrapper style
   ========================= */
   
 .wrapper >.title {
  text-align: center;
  font-size: 2.4em;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  color: #222;
  letter-spacing: 0.5px;
}
 
.wrapper > h2,
.wrapper > h3,
.wrapper > h4,
.wrapper > h5,
.wrapper > h6 {
  font-family: inherit;
  color: #333;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 2em;
  margin-bottom: 0.5em;
}

.wrapper > h2 {
  font-size: 1.6em;
   padding-bottom: 0.3em;
}

.wrapper > h3 {
  font-size: 1.4em;
}

.wrapper > h4 {
  font-size: 1.2em;
  font-weight: 500;
}

.wrapper > h5 {
  font-size: 1em;
  font-weight: 500;
  color: #555;
}

.wrapper > h6 {
  font-size: 0.9em;
  font-weight: 500;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
 

#descriptionBox {
position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
}


.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-family: Helvetica, Arial, sans-serif;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 1rem 1.2rem;       /* plus grand padding */
  font-size: 1.05rem;         /* texte plus grand */
  font-family: Helvetica, Arial, sans-serif;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
  transition: border 0.3s ease, box-shadow 0.3s ease;
  color: var(--text-main);
}

/* focus visuel */
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--highlight);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.25);
  outline: none;
}

/* zone de message plus haute */
.contact-form textarea {
  min-height: 160px;
  resize: vertical;
}

/* labels plus espacés et visibles */
.contact-form label {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
}
.contact-form button {
  padding: 0.8rem 1.2rem;
  background-color: var(--highlight);
  color: #333;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.contact-form button:hover {
  background-color: #e6c200;
  transform: translateY(-2px);
}

.alert {
  padding: 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
}

.alert-success {
  background-color: #d4edda;
  color: #155724;
}

.alert-danger {
  background-color: #f8d7da;
  color: #721c24;
}

/* --- Language Switcher sobre et centré --- */
.lang-switcher {
  margin: 0.8rem 0 1.5rem 0;   /* espace sous le titre */
  text-align: center;          /* centré horizontalement */
}

.lang-switcher ul {
  list-style: none;            /* pas de puces */
  padding: 0;
  margin: 0;
  display: inline-flex;        /* alignement horizontal compact */
  gap: 0.6rem;                 /* espace entre chaque lien */
}

.lang-switcher a.lang {
  display: inline-block;
  padding: 0.35rem 0.65rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  color: #444;
  border: 1px solid #ddd;
  background: #fafafa;
  transition: all 0.3s ease;
}

.lang-switcher a.lang:hover {
  background: #eee;
  border-color: #bbb;
  color: #000;
}

.hidden {
  display: none;
}


/* =========================
   Menu index home
   ========================= */

.article {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;          /* centre l'article */
    padding: 0 20px;         /* respire sur mobile */
    box-sizing: border-box;
}

.article .title {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 1rem;
  color: var(--text-main, #333);
}

.article .lead {
  font-style: italic;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  color: #555;
}

.article p {margin-bottom: 1rem;}

.article-image {
  margin: 2rem auto;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
}

.article-image img {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
  max-height: 600px;
}


.page-title {
  text-align: center;
  font-size: 2rem;
  margin: 2rem 0;
}

.astro-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  padding: 1rem;
}

.astro-card {
  width: 300px;
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

.astro-card:hover {
  transform: translateY(-4px);
}

.astro-card a {
  text-decoration: none;
  color: inherit;
}

.astro-thumb img {
  width: 150px;
  height: 85px;
  object-fit: cover;
  display: block;
}

.astro-body {
  padding: 1rem;
}

.astro-body h2 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: #222;
}

.excerpt {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 1rem;
}

.read-more  {
  font-weight: bold;
  color: #0077cc; 
}

.pagination {
  text-align: center;
  margin: 2rem 0;
}

.pagination a {
  margin: 0 1rem;
  text-decoration: none;
  color: #0077cc;
  font-weight: bold;
}


/* Pour les très petits écrans */
@media (max-width: 480px) {
  .article-image {
    margin: 1.5rem 0;
  }

  .article-image img {
    border-radius: 0.5rem;
    max-height: 300px;
  }
}

/* Pour les écrans très larges */
@media (min-width: 1400px) {
  .article-image img {
    max-height: 700px;
  }
}

.article-menu {
  float: right;
  width: 30%;
  min-width: 220px;
  margin: 1rem 0 1rem 2rem;
  padding: 1rem;
  background: #f8f9fa;
  border-left: 4px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
}

.article-menu h2 {
  margin-top: 0;
  font-size: 1.2rem;
}

.article-menu ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.article-menu li {
  margin-bottom: 0.5rem;
}

.article-menu a {
  text-decoration: none;
  color: #0077cc;
}

.article-menu a:hover {
  text-decoration: underline;
}

.article span.read-more a {
  color: #0077cc !important;
  font-weight: bold;
}

/* Responsive */
@media (max-width: 768px) {
  .article-menu {
    float: none;
    width: 100%;
    margin: 2rem 0;
  }
}

/* === FIX SIMPLE & PROPRE POUR LE MENU LANGUE === */
.lang-menu {
    position: relative;
    display: inline-block;
    z-index: 10000;
}

.lang-menu .lang-current {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 12px;
    padding: 6px 14px;
    cursor: pointer;
    font-size: 14px;
}

.lang-menu .lang-list {
    position: absolute;
    top: 10;
    right: 0;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 12px;
    list-style: none;
    padding: 6px 0;
    margin: 0;
    display: none; /* ✅ masqué proprement */
    z-index: 10001;
}

.lang-menu:hover .lang-list {
    display: block; /* ✅ simple, fiable, cliquable */
}

.lang-menu .lang-list li a {
    display: block;
    padding: 8px 12px;
    color: #333;
    text-decoration: none;
}

.lang-menu .lang-list li a:hover {
    background: #eee;
}

/* =========================
   Menu index home
   ========================= */
   .notice-warning {
    margin: 20px 0;
    padding: 12px;
    background: #fff3cd;
    border-left: 4px solid #ffca2c;
    border-radius: 8px;
    color: #664d03;
    font-size: 0.95rem;
}


   .circle-gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90vw;
    height: 90vw;
    max-width: 600px;
    max-height: 600px;
    margin: 50px auto;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(248, 249, 250, 0.8), rgba(233, 236, 239, 0.8));
    box-shadow: 10px 10px 20px #d4d4d4, -10px -10px 20px #ffffff;
	
}

.circle-item {
    position: absolute;
    text-align: center;
    transform-origin: center;
	
	z-index:350;
	
}
.circle-item > p,.circle-item  { text-decoration:none;}
.circle-item:hover p {
  font-weight: bold;
}

.circle-item:nth-child(1) { transform: rotate(0deg) translate(230px) rotate(0deg); }
.circle-item:nth-child(2) { transform: rotate(45deg) translate(230px) rotate(-45deg); }
.circle-item:nth-child(3) { transform: rotate(90deg) translate(230px) rotate(-90deg); }
.circle-item:nth-child(4) { transform: rotate(135deg) translate(230px) rotate(-135deg); }
.circle-item:nth-child(5) { transform: rotate(180deg) translate(230px) rotate(-180deg); }
.circle-item:nth-child(6) { transform: rotate(225deg) translate(230px) rotate(-225deg); }
.circle-item:nth-child(7) { transform: rotate(270deg) translate(230px) rotate(-270deg); }
.circle-item:nth-child(8) { transform: rotate(315deg) translate(230px) rotate(-315deg); }



.circle-gallery p {
    font-size: 14px;
     color: #495057;
    font-weight: 500;
	 text-decoration:none;
}

.circle-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;    
}

/* =========================
   SYMBOLS PLANETAIRES 3D METALLIQUES
   ========================= */

/* Base commune */

.symbol {
            font-size: clamp(32px, 6vw, 80px);
            font-weight: normal;
            line-height: 1;
            display: inline-block;
            margin: 0 10px; 
            display: flex !important;
            justify-content: center;
            align-items: center;

            /* GRAVURE MÉTALLIQUE — ton code */
            color: transparent;
            -webkit-background-clip: text;

            filter:
                drop-shadow(1px 1px 1px rgba(0,0,0,0.3))
                drop-shadow(-1px -1px 1px rgba(255,255,255,0.9));
        }



        /* Couleurs LÉGÈRES appliquées AU TEXTE SEULEMENT */
        .circle-item:nth-of-type(1) .symbol { background-image: linear-gradient(#e6e6e6,#bfbfbf); } /* Mercure */
.circle-item:nth-of-type(2) .symbol { background-image: linear-gradient(#d9a579,#b07b4e); } /* Vénus */
.circle-item:nth-of-type(3) .symbol { background-image: linear-gradient(#d8daeb,#b8bbcf); } /* Terre */
.circle-item:nth-of-type(4) .symbol { background-image: linear-gradient(#d98c76,#b5634c); } /* Mars */
.circle-item:nth-of-type(5) .symbol { background-image: linear-gradient(#e3d091,#bda56e); } /* Jupiter */
.circle-item:nth-of-type(6) .symbol { background-image: linear-gradient(#caa786,#9c7958); } /* Saturne */
.circle-item:nth-of-type(7) .symbol { background-image: linear-gradient(#c9d7e4,#9fb3c6); } /* Uranus */
.circle-item:nth-of-type(8) .symbol { background-image: linear-gradient(#a7bce1,#6b85bb); } /* Neptune */

/* SOLEIL (centre) */
.circle-center .symbol {
    font-size: 100px;
    width: min(70vw, 320px); 
    flex-direction: column;
    background-image: linear-gradient(#e5c55a, #b89d42);
}

.circle-logo {
    position: relative;
    width: min(70vw, 320px);     /* toujours un carré */
    aspect-ratio: 1 / 1;         /* verrouille un cercle parfait */
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;         /* jamais écrasé */
    border-radius: 50%;          /* cercle parfait */
    display: block;
}

/* Responsive pour petits écrans */
@media (max-width: 1024px) {
    .circle-gallery {
        width: 45vw; /* Adaptation à la taille de l'écran */
        height: 45vw; /* Toujours un cercle parfait */
    }

   .circle-item:nth-child(1) { 
    transform: rotate(0deg) translate(15vw) rotate(0deg);     
}

.circle-item:nth-child(2) { 
    transform: rotate(45deg) translate(15vw) rotate(-45deg);     
}

.circle-item:nth-child(3) { 
    transform: rotate(90deg) translate(15vw) rotate(-90deg);     
}

.circle-item:nth-child(4) { 
    transform: rotate(135deg) translate(15vw) rotate(-135deg);     
}

.circle-item:nth-child(5) { 
    transform: rotate(180deg) translate(15vw) rotate(-180deg);     
}

.circle-item:nth-child(6) { 
    transform: rotate(225deg) translate(15vw) rotate(-225deg); 
   }

.circle-item:nth-child(7) { 
    transform: rotate(270deg) translate(15vw) rotate(-270deg);     
}

.circle-item:nth-child(8) { 
    transform: rotate(315deg) translate(15vw) rotate(-315deg); 
}



    .circle-gallery p {
  font-family: 'Inter', 'Segoe UI', sans-serif;
  font-size: 0.85rem;
  color: #444;
  text-decoration: none;
  display: block;
  text-align: center;
  transition: color 0.3s ease, transform 0.2s ease;
}
}
/* Responsive pour écrans très petits (< 768px) */
@media (max-width: 768px) {
    .circle-gallery {
        width: 90vw; /* Cercle plus grand, mais reste proportionné à l'écran */
        height: 90vw;       
    }



    .circle-item:nth-child(1) { transform: rotate(0deg) translate(32vw) rotate(0deg); }
    .circle-item:nth-child(2) { transform: rotate(45deg) translate(32vw) rotate(-45deg); }
    .circle-item:nth-child(3) { transform: rotate(90deg) translate(32vw) rotate(-90deg); }
    .circle-item:nth-child(4) { transform: rotate(135deg) translate(32vw) rotate(-135deg); }
    .circle-item:nth-child(5) { transform: rotate(180deg) translate(32vw) rotate(-180deg); }
    .circle-item:nth-child(6) { transform: rotate(225deg) translate(32vw) rotate(-225deg); }
    .circle-item:nth-child(7) { transform: rotate(270deg) translate(32vw) rotate(-270deg); }
    .circle-item:nth-child(8) { transform: rotate(315deg) translate(32vw) rotate(-315deg); }

}
  
 @media (max-width: 1024px) and (orientation: landscape) {
    .circle-gallery {
        width: 40vw;  /* Cercle plus petit en paysage */
        height: 40vw;
    }

    

    .circle-item:nth-child(1) { transform: rotate(0deg) translate(14vw) rotate(0deg); }
    .circle-item:nth-child(2) { transform: rotate(45deg) translate(14vw) rotate(-45deg); }
    .circle-item:nth-child(3) { transform: rotate(90deg) translate(14vw) rotate(-90deg); }
    .circle-item:nth-child(4) { transform: rotate(135deg) translate(14vw) rotate(-135deg); }
    .circle-item:nth-child(5) { transform: rotate(180deg) translate(14vw) rotate(-180deg); }
    .circle-item:nth-child(6) { transform: rotate(225deg) translate(14vw) rotate(-225deg); }
    .circle-item:nth-child(7) { transform: rotate(270deg) translate(14vw) rotate(-270deg); }
    .circle-item:nth-child(8) { transform: rotate(315deg) translate(14vw) rotate(-315deg); }
}

@media (max-height: 375px) and (orientation: landscape) {

    /* Rayon adaptatif basé sur la HAUTEUR (logique en landscape) */
    :root {
        --radius-landscape: calc(min(35vh, 35vw)); 
        --planet-offset-landscape: calc(var(--radius-landscape) - 40px);
    }

    .circle-gallery {
        width: calc(var(--radius-landscape) * 2);
        height: calc(var(--radius-landscape) * 2);
    }

    .circle-item:nth-child(1)  { transform: rotate(0deg) translate(var(--planet-offset-landscape)) rotate(0deg); }
    .circle-item:nth-child(2)  { transform: rotate(45deg) translate(var(--planet-offset-landscape)) rotate(-45deg); }
    .circle-item:nth-child(3)  { transform: rotate(90deg) translate(var(--planet-offset-landscape)) rotate(-90deg); }
    .circle-item:nth-child(4)  { transform: rotate(135deg) translate(var(--planet-offset-landscape)) rotate(-135deg); }
    .circle-item:nth-child(5)  { transform: rotate(180deg) translate(var(--planet-offset-landscape)) rotate(-180deg); }
    .circle-item:nth-child(6)  { transform: rotate(225deg) translate(var(--planet-offset-landscape)) rotate(-225deg); }
    .circle-item:nth-child(7)  { transform: rotate(270deg) translate(var(--planet-offset-landscape)) rotate(-270deg); }
    .circle-item:nth-child(8)  { transform: rotate(315deg) translate(var(--planet-offset-landscape)) rotate(-315deg); }

    .circle-center {
        width: calc(var(--radius-landscape) * 0.6);
        height: calc(var(--radius-landscape) * 0.6);
    }
}


@media (max-width: 375px) {

    /* Rayon adaptatif basé sur la HAUTEUR (logique en landscape) */
    :root {
        --radius-landscape: calc(min(35vh, 35vw)); 
        --planet-offset-landscape: calc(var(--radius-landscape) - 40px);
    }

    .circle-gallery {
        width: calc(var(--radius-landscape) * 2);
        height: calc(var(--radius-landscape) * 2);
    }

    .circle-item:nth-child(1)  { transform: rotate(0deg) translate(var(--planet-offset-landscape)) rotate(0deg); }
    .circle-item:nth-child(2)  { transform: rotate(45deg) translate(var(--planet-offset-landscape)) rotate(-45deg); }
    .circle-item:nth-child(3)  { transform: rotate(90deg) translate(var(--planet-offset-landscape)) rotate(-90deg); }
    .circle-item:nth-child(4)  { transform: rotate(135deg) translate(var(--planet-offset-landscape)) rotate(-135deg); }
    .circle-item:nth-child(5)  { transform: rotate(180deg) translate(var(--planet-offset-landscape)) rotate(-180deg); }
    .circle-item:nth-child(6)  { transform: rotate(225deg) translate(var(--planet-offset-landscape)) rotate(-225deg); }
    .circle-item:nth-child(7)  { transform: rotate(270deg) translate(var(--planet-offset-landscape)) rotate(-270deg); }
    .circle-item:nth-child(8)  { transform: rotate(315deg) translate(var(--planet-offset-landscape)) rotate(-315deg); }

    .circle-center .circle-logo {
        width: calc(var(--radius-landscape) * 0.6);
        height: calc(var(--radius-landscape) * 0.6);
    }

    
}


   
/* ----------------------------------------------------------------
   BOUTON FLOTTANT DE CHAT 
   ----------------------------------------------------------------*/
#chat-float-button {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 50px;
    height: 50px;

    /* Couleur “Zen” (ex: teal) */
    background-color: #83c5be; 
    color: #fff;
    font-size: 1.2rem;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    /* Ombre douce et subtile */
    box-shadow: 0 4px 8px rgba(0,0,0,0.12);

    z-index: 9999;
}

/* ----------------------------------------------------------------
   FENÊTRE DE CHAT (conteneur global)
   ----------------------------------------------------------------*/
#chat-window {
    position: fixed;
    bottom: 80px;  
    left: 20px;

    width: 320px;
    max-width: 90vw;

    min-height: 200px;       
    max-height: 80vh;

    /* Permet le redimensionnement */
    resize: both;       
    overflow: auto;     

    /* Couleurs et bordures douces */
    background-color: #f1f5f6;  /* gris très clair / pastel */
    border: 1px solid #ccc;
    border-radius: 12px;        /* coins plus arrondis */
    display: none; 
    flex-direction: column;
    z-index: 9999;

    /* Ombre légère */
    box-shadow: 0 8px 10px rgba(0,0,0,0.1);
}

/* ----------------------------------------------------------------
   EN-TÊTE DU CHAT
   ----------------------------------------------------------------*/
#chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    /* Même couleur que le bouton ou un pastel complémentaire */
    background-color: #83c5be; 
    color: #fff;

    padding: 10px;
    border-top-left-radius: 12px; 
    border-top-right-radius: 12px; 
}

#chat-header h2 {
    margin: 0;
    font-size: 1rem;
}

#chat-close-button {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
}

/* ----------------------------------------------------------------
   CONTENU DU CHAT
   ----------------------------------------------------------------*/
#chat-content {
    flex: 1;            
    padding: 10px;
    box-sizing: border-box;
    overflow-y: auto;
}

/* ----------------------------------------------------------------
   FORMULAIRE
   ----------------------------------------------------------------*/
#chat-content h2 {
    margin-top: 0.5rem;
    font-size: 1rem;
}

#chat-content textarea {
    width: 100%;
    box-sizing: border-box;
    resize: none;
    border-radius: 8px;
    border: 1px solid #ccc;
    padding: 8px;
    font-family: inherit;
}

#chat-content button {
    background-color: #83c5be;
    color: #fff;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    margin-top: 5px;
    border-radius: 8px;
    font-family: inherit;
    transition: background-color 0.2s ease-in-out;
}

#chat-content button:hover {
    background-color: #66b2ab;
}

/* ----------------------------------------------------------------
   HISTORIQUE DES MESSAGES
   ----------------------------------------------------------------*/
#chat-messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

/* ----------------------------------------------------------------
   STYLE DE CHAQUE MESSAGE
   ----------------------------------------------------------------*/
.message {
    padding: 10px 14px;
    border-radius: 16px;
    max-width: 80%;
    word-wrap: break-word;
    font-size: 0.95rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    line-height: 1.4;
}

/* Message utilisateur => Pastel plus vif */
.message-user {
    background-color: #ffcb77; 
    color: #333;
    align-self: flex-end;
}

/* Message bot => Gris / blanc cassé */
.message-bot {
    background-color: #e3e7e8;
    color: #333;
    align-self: flex-start;
}

/* ----------------------------------------------------------------
   INDICATEUR "TYPING..." (3 PETITS POINTS)
   ----------------------------------------------------------------*/
.typing-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 20px;
    background-color: #e3e7e8;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.typing-indicator span {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 2px;
    background-color: #888;
    border-radius: 50%;
    animation: typing 1s infinite ease-in-out;
}

.typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}
.typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {
    0% { transform: translateY(0); }
    20% { transform: translateY(-4px); }
    40%, 100% { transform: translateY(0); }
}

/* ----------------------------------------------------------------
   RÉPONSE CLASSIQUE
   ----------------------------------------------------------------*/
#response-output {
    max-height: 150px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ----------------------------------------------------------------
   MEDIA QUERIES
   => ADAPTATION TÉLÉPHONE / TABLETTE / ORDINATEUR
   ----------------------------------------------------------------*/

/* Petits écrans (max 480px) */
@media (max-width: 480px) {
    #chat-window {
        width: 90%;
        left: 5%;
        bottom: 10px;
        height: 70vh;
        max-height: none;
        border-radius: 10px;
    }
}

/* Tablettes (max 768px) */
@media (max-width: 768px) {
    #chat-window {
        width: 400px;
        max-width: 90%;
        left: auto;
        right: 10px;
        bottom: 20px;
    }
}


/* =========================
   MENU CANVAS
   ========================= */
   
/* ===== Bouton burger premium ===== */
.burger-menu {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 1);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    transition: 
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;

    box-shadow: 
        0 4px 12px rgba(0,0,0,0.15),
        inset 0 2px 4px rgba(255,255,255,0.15);
}

/* Icône à l’intérieur */
.burger-menu i {
    font-size: 1.5rem;
    color: #333;
    transition: color 0.25s ease;
}

/* Effet hover premium */
.burger-menu:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

.burger-menu:hover i {
    color: #111;
}

/* Effet clic */
.burger-menu:active {
    transform: scale(0.95);
}

/* Menu planétaire caché par défaut */
/* ============================================================
   🔥 MENU FULLSCREEN NOOLOGIA — EFFET PAGE QUI SE TOURNE
   ============================================================ */
/* 1. CONTENEUR – toujours transparent au départ */
#menu-parameters.fullscreen-menu {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    background: transparent;
    z-index: 99999;
    display: none;
    overflow: hidden;
    /* GPU layer promotion – ultra important */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* 2. Wrapper – on force le layer 3D */
.page-wrapper {
    position: absolute;
    inset: 0;
    perspective: 1800px;
    transform-style: preserve-3d;
    overflow: hidden;
    
    /* Force un layer GPU dédié */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
}

/* 3. La page qui tourne – TOUTES les astuces anti-saccade */
.page {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.96);
    opacity: 0;
    
    transform-origin: left center;
    transform-style: preserve-3d;
    border-radius: 0 14px 14px 0;

    /* LES 5 LIGNES MAGIQUES QUI TUENT LES SACCADES */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);                     /* force un nouveau layer */
    -webkit-transform: translateZ(0);
    will-change: transform, opacity, filter;      /* le navigateur prépare le GPU */
}

/* OUVERTURE & FERMETURE */
#menu-parameters.active   { display: block !important; }
#menu-parameters.active .page   { animation: pageOpen 1.38s cubic-bezier(0.215, 0.61, 0.355, 1) forwards; }
#menu-parameters.closing .page  { animation: pageClose 1.05s cubic-bezier(0.215, 0.61, 0.355, 1) forwards; }

/* KEYFRAMES – version 100 % fluide partout (même sur iPhone SE 1ère génération) */
@keyframes pageOpen {
    0% {
        transform: rotateY(-124deg) rotateX(10deg) translateX(-4%) scale(0.945);
        opacity: 0;
        filter: drop-shadow(-55px 0 75px rgba(0,0,0,0.55));
    }
    50%  { opacity: 0.85; }
    78%  {
        transform: rotateY(-10deg) rotateX(1.5deg) scale(0.998);
        filter: drop-shadow(-10px 0 22px rgba(0,0,0,0.28));
    }
    100% {
        transform: rotateY(0deg) rotateX(0deg) scale(1);
        opacity: 1;
        filter: drop-shadow(0 8px 20px rgba(0,0,0,0.06));
    }
}

@keyframes pageClose {
    0% {
        transform: rotateY(0deg) rotateX(0deg) scale(1);
        opacity: 1;
        filter: drop-shadow(0 8px 20px rgba(0,0,0,0.06));
    }
    100% {
        transform: rotateY(-124deg) rotateX(10deg) translateX(-4%) scale(0.945);
        opacity: 0;
        filter: drop-shadow(-55px 0 75px rgba(0,0,0,0.55));
    }
}

/* ============================================================
   🚫 Désactive menu langues pendant le fullscreen
   ============================================================ */
body.menu-open .lang-menu .lang-list {
    display: none !important;
}

body.menu-open .lang-menu {
    pointer-events: none;
    opacity: 0.3;
}

/* ============================================================
   🔘 BOUTON CLOSE — même style que BURGER
   ============================================================ */
.menu-close {
    width: 60px;
    height: 60px;
    border-radius: 50%;

    border: 2px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 1);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;

    box-shadow:
        0 4px 12px rgba(0,0,0,0.15),
        inset 0 2px 4px rgba(255,255,255,0.15);

    position: absolute;
    top: 20px;
    right: 20px;

    z-index: 200000;
}

/* Hover */
.menu-close:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

.menu-close:active {
    transform: scale(0.95);
}

/* Icône interne */
.menu-close i,
.menu-close span,
.menu-close svg {
    font-size: 1.4rem;
    color: rgba(0, 0, 0, 0.8);
    transition: color 0.25s ease;
}

.menu-close:hover i,
.menu-close:hover span,
.menu-close:hover svg {
    color: rgba(0, 0, 0, 1);
}

/* Version sombre optionnelle */
.menu-close.dark-close {
    border: 2px solid rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.1);
}

.menu-close.dark-close i {
    color: rgba(0, 0, 0, 0.7);
}

.menu-close.dark-close:hover i {
    color: rgba(0, 0, 0, 0.9);
}

/* Quand le menu fullscreen est ouvert */
body.menu-open .bottom-right-menu {
    display: none !important;
}


/* =========================
   PETITS ÉCRANS ET MODE PORTRAIT (max-width: 600px)
   ========================= */
@media (max-width: 600px), (orientation: portrait) {
	
  .planet-symbol {
    font-size: 1.2rem; /* Réduction de la taille des symboles */
    width: 2.5rem; /* Réduction de la taille des cercles */
    height: 2.5rem;
  }

  .menu-canvas {
    top: 5px; /* Position légèrement ajustée */
    left: 5px; /* Position légèrement ajustée */
    padding: 8px; /* Réduction de l’espacement interne */
  }
  
  .icon {
    width: 30px; /* Icônes plus petites */
    height: 30px;
  }

  .icon-label {
    font-size: 10px; /* Texte plus petit sous les icônes */
  }

  .icon-container {
    gap: 8px; /* Espacement réduit */
  }

  .bottom-left-menu {
    bottom: 10px; /* Position légèrement plus haute */
    right: 10px;
  }

  .bottom-left-menu li a {
    font-size: 0.7rem; /* Taille des liens plus petite */
  }

  body.menu-open footer .bottom-right-menu {
    display: none !important;
}
}

/* =========================
   MOYENS ÉCRANS ET MODE PAYSAGE (600px à 1200px ou landscape)
   ========================= */
@media (min-width: 600px) and (max-width: 1200px), (orientation: landscape) {
  .icon {
    width: 35px; /* Taille intermédiaire des icônes */
    height: 35px;
  }

  .icon-label {
    font-size: 11px; /* Texte intermédiaire */
  }

  .icon-container {
    gap: 10px; /* Espacement légèrement ajusté */
  }

  .bottom-left-menu {
    bottom: 15px; /* Position plus équilibrée */
    right: 15px;
  }

  .bottom-left-menu li a {
    font-size: 0.75rem; /* Taille intermédiaire des liens */
  }
}

/* =========================
   GRANDS ÉCRANS (min-width: 1200px)
   ========================= */
@media (min-width: 1200px) {
  .icon {
    width: 50px; /* Taille augmentée des icônes */
    height: 50px;
  }

  .icon-label {
    font-size: 14px; /* Texte plus grand */
  }

  .icon-container {
    gap: 12px; /* Espacement généreux */
  }

  .bottom-left-menu {
    bottom: 5px; /* Très bas pour grands écrans */
    right: 20px; /* Largeur standard */
  }

  .bottom-left-menu li a {
    font-size: 0.85rem; /* Liens légèrement plus grands */
  }
}





/* Styles pour l'animation du conteneur de la scène */
    #threejs-container {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 50px;
      height: 50px;
      background: transparent;
      overflow: hidden;
      border-radius: 50%;
      transition: all 1s ease-in-out;
      opacity: 0;
      pointer-events: none;
    }

    /* Classe active pour l'animation */
   #threejs-container {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
    background: transparent;
    overflow: hidden;
    border-radius: 50%;
    transition: all 1s ease-in-out;
    opacity: 0;
    pointer-events: none;
}

/* Mode plein écran */
#threejs-container.active {
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 0;
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}


#close-scene-btn {
    position: fixed;
    top: 80px;
    right: 20px;
    width: 55px;
    height: 55px;

    /* Style verre / blur premium */
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);

    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;
    opacity: 0;
    transform: scale(0.8);

    /* Animations propres */
    transition:
        opacity 0.4s ease,
        transform 0.4s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;

    z-index: 999999999; /* au-dessus de TOUT */
}

#close-scene-btn i {
    font-size: 1.4rem;
    color: #fff;
    text-shadow: 0 0 8px rgba(0,0,0,0.4);
}

/* Apparition en mode scène active */
#threejs-container.active + #close-scene-btn {
    opacity: 1;
    transform: scale(1);
     z-index: 10;
}

/* Hover premium */
#close-scene-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* Caché */
.close-scene-btn.hidden {
    display: none;
    opacity: 0;
    transform: scale(0.8);
    z-index: 300000;
}

/* Visible */
.close-scene-btn.visible {
    display: flex;
    opacity: 1;
    transform: scale(1);
    z-index: 30000;
}
    /* ============================================================
   FIX — Canvas désactivé sauf quand un module 3D est actif
   ============================================================ */



/* Quand un module est actif → le canvas devient interactif */
body.module-active #threejs-container,
body.module-active #threejs-container canvas {
    pointer-events: auto;
}
	
	#descriptionBox.loading::after {
    content: " ...";
    animation: dots 1s steps(3, end) infinite;
}

@keyframes dots {
    0%, 20% { content: " "; }
    40% { content: "."; }
    60% { content: ".."; }
    80%, 100% { content: "..."; }
}


.color-picker-container {
  position: fixed; /* Positionnement fixe dans l'écran */
  bottom: 35px; /* Position depuis le bas */
  right: 35px; /* Position depuis la droite */
  display: flex;
  align-items: center; /* Aligne l'arc par rapport à l'icône centrale */
  z-index: 1000; /* Toujours visible */
}
/* Fond zen */
.zen-background {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(250,249,246,0.6) 50%, rgba(255,215,0,0.3) 100%);
    transform: translate(-50%, -50%);
    transition: all 1s ease;
    z-index: -1;
}


/* Conteneur UL pour le menu */
#left-command-menu {
    position: relative;
    width: 300px; /* Diamètre du cercle */
    height: 300px; /* Rayon vertical */
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Positionnement des boutons en arc */
/* Positionnement des boutons en arc */
#left-command-menu li {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center center; /* Définit le centre comme point de pivot */
}

/* Boutons répartis en arc (4 icônes seulement) */
#left-command-menu li:nth-child(1) {
    transform: rotate(-80deg) translate(0, -140px);
}
#left-command-menu li:nth-child(2) {
    transform: rotate(-60deg) translate(0, -140px);
}
#left-command-menu li:nth-child(3) {
    transform: rotate(-40deg) translate(0, -140px);
}
#left-command-menu li:nth-child(4) {
    transform: rotate(-20deg) translate(0, -140px);
}
#left-command-menu > button {
    all: unset; /* Réinitialise tous les styles hérités */
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Boutons ronds */
    background-color: #606060; /* Couleur de fond neutre */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Fond actif */
.color-picker-container.active .zen-background {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(250,249,246,0.4) 60%, rgba(255,215,0,0.2) 100%);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
}

/* Transition lors de l'apparition */
.menu-item.active {
    opacity: 1;
    pointer-events: all;
}

/* Conteneur bas-droite */
.color-picker-container {
    position: fixed;
    bottom: 2.5vw;
    right: 2.5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 99999;
}


/* Pavé vertical */
.color-arc-vertical {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Cases verticales */
.color-option {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 2px solid #9b4dca;
    background: #faf6ef;
    transition: transform 0.2s ease;
}

.color-option:hover {
    transform: scale(1.1);
}

/* Couleurs pastel */
.color-red     { background-color: #F3D9DC; }
.color-orange  { background-color: #F7E6CF; }
.color-yellow  { background-color: #FFF9D9; }
.color-green   { background-color: #D6ECD2; }
.color-blue    { background-color: #D9E8F6; }
.color-purple  { background-color: #E6DAF1; }
.color-default { background-color: #FAF9F6; }
.color-black   { background-color: #000; }

/* Animation rotation */
@keyframes rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* =========================
   MEDIA QUERIES
============================= */

/* Mobile <600px */
@media (max-width: 600px) {
    #icon-trigger {
        width: 40px;
        height: 40px;
    }

    .color-arc-vertical {
        padding: 6px;
        gap: 5px;
    }

    .color-option {
        width: 28px;
        height: 28px;
    }

    .color-picker-container {
        bottom: 3vw;
        right: 3vw;
    }
}

/* Tablette 600px–1200px */
@media (min-width: 601px) and (max-width: 1200px) {
    #icon-trigger {
        width: 45px;
        height: 45px;
    }

    .color-arc-vertical {
        padding: 7px;
        gap: 6px;
    }

    .color-option {
        width: 32px;
        height: 32px;
    }
}

/* Desktop >1200px */
@media (min-width: 1201px) {
    #icon-trigger {
        width: 50px;
        height: 50px;
    }

    .color-arc-vertical {
        padding: 8px;
        gap: 6px;
    }

    .color-option {
        width: 36px;
        height: 36px;
    }
}


.search-container {
    width: 280px;
    margin: 0 auto 25px auto;
    position: relative;
}

#search-input {
    width: 100%;
    padding: 12px 18px;
    border-radius: 30px;
    border: 1px solid rgba(0,0,0,0.15);
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(8px);
    font-size: 1rem;
    outline: none;
    transition: 0.25s ease;
    color: #333;
}

#search-input:focus {
    box-shadow: 0 0 15px rgba(180,180,180,0.35);
    border-color: #bda76c;  /* ton OR NOOLOGIA */
}

#suggestions {
    position: absolute;
    top: 105%;
    width: 100%;
    background: rgba(255,255,255,0.98);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.15);
    padding: 6px 0;
    margin: 0;
    list-style: none;
    display: none;
    overflow: hidden;
}

#suggestions.visible {
    display: block;
}

#suggestions li a {
    display: block;
    padding: 10px 18px;
    font-size: 0.95rem;
    color: #333;
    text-decoration: none;
    transition: 0.25s;
}

#suggestions li a:hover {
    background: rgba(200,200,200,0.35);
}
.tile-title {
  position: absolute;
  pointer-events: none;
  color: #333;
  background-color: rgba(255, 255, 255, 0.9);
  font: bold 16px Arial;
  padding: 4px 8px;
  border-radius: 4px;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.tile-description {
  position: absolute;
  pointer-events: none;
  color: #333;
  background-color: rgba(255, 255, 255, 0.9);
  font: 14px Arial;
  padding: 4px 8px;
  border-radius: 4px;
  transform: translate(-50%, -50%);
  max-width: 300px;
  /* Initialement masquée */
  opacity: 0;
  display: none;
}

.navigation-helper {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border-radius: 5px;
  font-size: 14px;
  pointer-events: none;
}

/* =========================
   ANIMATION
   ========================= */
   

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
  
@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}


@keyframes breathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


@keyframes breeze {
    0%, 100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(2px, -2px);
    }
    50% {
        transform: translate(-2px, 2px);
    }
    75% {
        transform: translate(2px, 2px);
    }
}

@keyframes sway {
    0%, 100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(1deg);
    }
}
   
/* =========================
   MEDIA QUERIES RESPONSIVE
   ========================= */

/* Petits écrans (smartphones) */
@media (max-width: 600px) {
  body {
    padding-right: 5px; /* Réduit l'espace à droite pour petits écrans */
  }
  
    .footer-logo {
    position: absolute;
    bottom: 80px;
    left: 3%;
    transform: translateX(-50%);
}
}

/* Moyens écrans (tablettes) */
@media (min-width: 600px) and (max-width: 1200px) {
  body {
    padding-right: 8px; /* Ajuste légèrement l'espace */
  }
  

}

/* Grands écrans (desktops) */
@media (min-width: 1200px) {
  body {
    padding-right: 15px; /* Espace plus généreux pour grands écrans */
  }
}

.tile-html {
    position: relative;
    width: 150px;
    height: 100px;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #ddd;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


 #output {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
            width: 300px;
            height: 400px;
            overflow-y: auto;
            white-space: pre-line;
        }
        button {
            margin: 10px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }

        /* ----------------------------------------------------------------
   BOUTON FLOTTANT DE CHAT 
   ----------------------------------------------------------------*/
#chat-float-button {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 50px;
    height: 50px;

    /* Couleur “Zen” (ex: teal) */
    background-color: #83c5be; 
    color: #fff;
    font-size: 1.2rem;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    /* Ombre douce et subtile */
    box-shadow: 0 4px 8px rgba(0,0,0,0.12);

    z-index: 9999;
}

/* ----------------------------------------------------------------
   FENÊTRE DE CHAT (conteneur global)
   ----------------------------------------------------------------*/
#chat-window {
    position: fixed;
    bottom: 80px;  
    left: 20px;

    width: 320px;
    max-width: 90vw;

    min-height: 200px;       
    max-height: 80vh;

    /* Permet le redimensionnement */
    resize: both;       
    overflow: auto;     

    /* Couleurs et bordures douces */
    background-color: #f1f5f6;  /* gris très clair / pastel */
    border: 1px solid #ccc;
    border-radius: 12px;        /* coins plus arrondis */
    display: none; 
    flex-direction: column;
    z-index: 9999;

    /* Ombre légère */
    box-shadow: 0 8px 10px rgba(0,0,0,0.1);
}

/* ----------------------------------------------------------------
   EN-TÊTE DU CHAT
   ----------------------------------------------------------------*/
#chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    /* Même couleur que le bouton ou un pastel complémentaire */
    background-color: #83c5be; 
    color: #fff;

    padding: 10px;
    border-top-left-radius: 12px; 
    border-top-right-radius: 12px; 
}

#chat-header h2 {
    margin: 0;
    font-size: 1rem;
}

#chat-close-button {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
}

/* ----------------------------------------------------------------
   CONTENU DU CHAT
   ----------------------------------------------------------------*/
#chat-content {
    flex: 1;            
    padding: 10px;
    box-sizing: border-box;
    overflow-y: auto;
}

#chat-window { display: none; }
.typing-indicator { display: none; }

/* ----------------------------------------------------------------
   FORMULAIRE
   ----------------------------------------------------------------*/
#chat-content h2 {
    margin-top: 0.5rem;
    font-size: 1rem;
}

#chat-content textarea {
    width: 100%;
    box-sizing: border-box;
    resize: none;
    border-radius: 8px;
    border: 1px solid #ccc;
    padding: 8px;
    font-family: inherit;
}

#chat-content button {
    background-color: #83c5be;
    color: #fff;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    margin-top: 5px;
    border-radius: 8px;
    font-family: inherit;
    transition: background-color 0.2s ease-in-out;
}

#chat-content button:hover {
    background-color: #66b2ab;
}

/* ----------------------------------------------------------------
   HISTORIQUE DES MESSAGES
   ----------------------------------------------------------------*/
#chat-messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

/* ----------------------------------------------------------------
   STYLE DE CHAQUE MESSAGE
   ----------------------------------------------------------------*/
.message {
    padding: 10px 14px;
    border-radius: 16px;
    max-width: 80%;
    word-wrap: break-word;
    font-size: 0.95rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    line-height: 1.4;
}

/* Message utilisateur => Pastel plus vif */
.message-user {
    background-color: #ffcb77; 
    color: #333;
    align-self: flex-end;
}

/* Message bot => Gris / blanc cassé */
.message-bot {
    background-color: #e3e7e8;
    color: #333;
    align-self: flex-start;
}

/* ----------------------------------------------------------------
   INDICATEUR "TYPING..." (3 PETITS POINTS)
   ----------------------------------------------------------------*/
.typing-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 20px;
    background-color: #e3e7e8;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.typing-indicator span {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 2px;
    background-color: #888;
    border-radius: 50%;
    animation: typing 1s infinite ease-in-out;
}

.typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}
.typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {
    0% { transform: translateY(0); }
    20% { transform: translateY(-4px); }
    40%, 100% { transform: translateY(0); }
}



/* ----------------------------------------------------------------
   RÉPONSE CLASSIQUE
   ----------------------------------------------------------------*/
#response-output {
    max-height: 150px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}
#logo-container {
    pointer-events: auto;
}
/* ----------------------------------------------------------------
   MEDIA QUERIES
   => ADAPTATION TÉLÉPHONE / TABLETTE / ORDINATEUR
   ----------------------------------------------------------------*/

/* Petits écrans (max 480px) */
@media (max-width: 480px) {
    #chat-window {
        width: 90%;
        left: 5%;
        bottom: 10px;
        height: 70vh;
        max-height: none;
        border-radius: 10px;
    }
}

/* Tablettes (max 768px) */
@media (max-width: 768px) {
    #chat-window {
        width: 400px;
        max-width: 90%;
        left: auto;
        right: 10px;
        bottom: 20px;
    }
}

/* ===== Stellar Selector ===== */
#star-selector {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5000;

    background: rgba(20, 20, 20, 0.8);
    backdrop-filter: blur(8px);

    padding: 12px 18px;
    border-radius: 12px;

    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);

    color: #fff;
    text-align: center;

    display: flex;
    flex-direction: column;
    gap: 8px;

    width: max-content;
}

/* Title */
#star-selector h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #ffd27a;
}

/* Dropdown style */
#starSelect {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #000;

    padding: 8px 12px;
    border-radius: 8px;

    font-size: 0.9rem;
    font-weight: 500;

    outline: none;
    cursor: pointer;

    transition: 0.2s ease;
}

#starSelect:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* Mobile tweaks */
@media (max-width: 700px) {
    #star-selector {
        bottom: 15px;
        scale: 0.9;
    }
}
#star-selector-menu {
    display: none !important;
}

.star-type-label {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 14px 30px;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 10px;
    color: #fff;
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease-out;
    z-index: 999999;
}
.star-type-label.visible {
    opacity: 1;
}

.content a {
    color: #333;                     /* lisible et neutre */
    text-decoration: none;           /* pas d'underline moche */
    border-bottom: 1px solid #333;   /* soulignement propre */
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.content a:hover {
    color: #000;                     /* léger foncé */
    border-bottom-color: #000;       /* underline plus net */
}

@media (max-width: 600px) {
    .mode-toggle-btn, .zoom-btn {
        font-size: 18px; /* Réduit la taille des boutons */
        padding: 5px 8px;
    }
}

#infoBtn, #zoomBtn2 {
    position: absolute;
    width: 44px;
    height: 44px;
    background: rgba(20, 20, 40, 0.85);
    border: 2px solid rgba(100, 200, 255, 0.8);
    border-radius: 50%;
    color: white;
    font-size: 20px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0, 180, 255, 0.3);
    transition: all 0.25s ease;
    z-index: 1000;
    pointer-events: auto;
}

#infoBtn:hover, #zoomBtn2:hover {
    background: rgba(0, 120, 255, 0.9);
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 8px 30px rgba(0, 200, 255, 0.6);
}