:root{
  --cuivre: #b87333;
  --laiton: #c9a34e;
  --acier: #4d3a28;
  --clair: #f4e2b1;
  --bg-header: rgba(30,20,10,0.85);
}

/* ---------- HEADER ---------- */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.45rem 1.25rem;
  gap:1rem;

  background:linear-gradient(180deg, rgba(40,25,12,0.95), rgba(15,8,4,0.95));
  border-bottom:2px solid var(--cuivre);
  box-shadow:0 6px 18px rgba(0,0,0,0.6);

  color:var(--clair);
  font-family:"Cinzel", serif;
  white-space:nowrap;
}

/* LEFT */
.header-left{
  display:flex;
  align-items:center;
  gap:0.75rem;
}

.header-logo img{
  height:48px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}

.site-title{
  font-size:1.25rem;
  color:var(--laiton);
  font-weight:700;
  letter-spacing:0.6px;
}

/* RIGHT */
.header-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex:1;
}

/* ---------- NAV DESKTOP ---------- */
.main-nav{
  display:flex;
  align-items:center;
  gap:0.6rem;
}

/* LIENS TEXTE */
.main-nav a:not(.nav-icon){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.45rem 0.75rem;

  color:var(--clair);
  text-decoration:none;

  background:rgba(70,50,30,0.22);
  border:1px solid rgba(255,255,255,0.04);
  border-radius:6px;

  font-weight:600;
  transition:0.15s;
}

.main-nav a:not(.nav-icon):hover{
  transform:translateY(-2px);
  color:var(--laiton);
  background:rgba(90,60,35,0.45);
  border-color:var(--cuivre);
}

/* ---------- ICONES (UNIFIÉES) ---------- */
.nav-icon{
  display:flex;
  align-items:center;
  justify-content:center;

  width:44px;      /* 👈 taille fixe */
  height:44px;     /* 👈 taille fixe */

  padding:0;       /* 👈 on enlève les différences */
  
  background:rgba(70,50,30,0.22);
  border:1px solid rgba(255,255,255,0.04);
  border-radius:8px;

  cursor:pointer;
  transition:0.15s;
}

.nav-icon img{
  width:clamp(28px, 3.2vw, 42px);
  display:block;
}

.nav-icon:hover{
  transform:translateY(-2px) scale(1.05);
  background:rgba(90,60,35,0.45);
  border-color:var(--cuivre);
}

/* ---------- HAMBURGER ---------- */
.menu-toggle{
  display:none;
}

/* ---------- MENU MOBILE ---------- */
.mobile-menu{
  position:fixed;
  top:0;
  left:0;

  width:100vw;
  height:100vh;

  max-width:100vw;
  max-height:100vh;

  overflow:hidden;

  z-index:2000;

  display:flex;
  flex-direction:column;

  background-image: url("../images/fonds/fond_rotation.webp");

  transform:translateY(-100%);
  transition:transform 0.4s ease;
}

.mobile-menu.active{
  transform:translateY(0);
}

/* HEADER MOBILE */
.mobile-menu-header{
  display:flex;
  justify-content:flex-end;
  align-items:center;

  padding:1rem;
  height:70px;

  background:linear-gradient(180deg, rgba(30,20,10,0.9), transparent);
}

/* CROIX */
.close-menu{
  font-size:2rem;
  cursor:pointer;
  color:var(--clair);
}

/* CONTENU */
.mobile-menu-content{
  flex:1;

  display:flex;
  flex-direction:column;
  justify-content:top;
  align-items:center;

  gap:0.8rem;
}

/* LIENS */
.mobile-menu a{
  font-size:1.2rem;
  line-height:1.1;
  padding:0.2rem 0;

  color:var(--clair);
  text-decoration:none;

  opacity:0;
  transform:translateY(10px);
}

/* ANIMATION */
.mobile-menu.active a{
  animation:fadeIn 0.4s ease forwards;
}

.mobile-menu.active a:nth-child(2){ animation-delay:0.1s; }
.mobile-menu.active a:nth-child(3){ animation-delay:0.2s; }
.mobile-menu.active a:nth-child(4){ animation-delay:0.3s; }
.mobile-menu.active a:nth-child(5){ animation-delay:0.4s; }
.mobile-menu.active a:nth-child(6){ animation-delay:0.5s; }

@keyframes fadeIn{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* ---------- FOOTER ---------- */
.site-footer{
  position:fixed;
  bottom:0;
  width:100%;
  z-index:1000;

  padding:0.4rem 0rem;

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

  gap:0.5rem;

  background:linear-gradient(180deg, rgba(30,20,10,0.9), rgba(10,5,0,0.95));
  border-top:2px solid var(--cuivre);
}

/* empêche débordement */
.site-footer > *{
  flex-shrink:1;
  min-width:0;
}

.footer-logo{
  display:flex;
  align-items:center;
  gap:0.3rem;
}

.footer-logo img{
  height:36px;
  max-width:100%;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  .site-title{ font-size:1rem; }
  .main-nav a{ font-size:0.9rem; }
}

@media (max-width:820px){
  .site-header{ padding:0.3rem 0.8rem; }
  .site-title{ font-size:0.9rem; }

  .header-logo img{ height:34px; }
  .footer-logo img{ height:32px; }
}

/* ---------- MOBILE / PETITS ECRANS ---------- */
@media (max-width:900px){

  /* cache uniquement texte */
  .main-nav a:not(.nav-icon){
    display:none;
  }

  /* garde icônes */
  .main-nav{
    display:flex;
    gap:0.4rem;
  }

  /* affiche hamburger */
  .menu-toggle{
    display:flex;
  }

  /* optionnel */
  .site-title{
    display:none;
  }
}

/* ===== MAJOR'BOT ===== */
.majordome{
  position:fixed;
  bottom:90px;
  right:20px;

  width:500px;      /* 👈 nouvelle largeur */
  max-width:90vw;   /* 👈 évite de casser sur mobile */
  height:420px;

  display:flex;
  flex-direction:column;

  background:linear-gradient(180deg, rgba(40,25,12,0.95), rgba(15,8,4,0.95));
  border:2px solid var(--cuivre);
  border-radius:12px;

  box-shadow:0 0 25px rgba(0,0,0,0.7);
  z-index:3000;

  animation:fadeIn 0.3s ease;
}

.majordome.hidden{
  display:none;
}

/* HEADER */
.majordome-header{
  padding:10px;
  font-family:"Cinzel", serif;
  color:var(--laiton);

  display:flex;
  justify-content:space-between;

  border-bottom:1px solid var(--cuivre);
}

/* ===== QUESTIONS ===== */
.majordome-questions{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px;
  border-bottom:1px solid var(--cuivre);
}

.majordome-questions-inline{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:10px 0;
}

.question-btn{
  background:rgba(90,60,35,0.4);
  border:1px solid var(--cuivre);
  color:var(--clair);
  padding:6px;
  border-radius:6px;
  cursor:pointer;
  text-align:left;
  transition:0.2s;
  white-space: normal;        /* autorise retour à la ligne */
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-align: left;
  width: 100%;                /* prend toute la largeur */
}

.question-btn:hover{
  background:rgba(120,80,40,0.6);
}

.question-btn.special{
  margin-top:6px;
  background:rgba(180,120,60,0.3);
  border-color:var(--laiton);
}

/* MESSAGES */
.majordome-messages{
  flex:1;
  padding:10px;
  overflow-y:auto;
  color:var(--clair);
  font-size:0.9rem;
}

.majordome-messages a {
  color: var(--laiton);
  text-decoration: underline;
  cursor: pointer;
}

.bot-message{
  background:rgba(90,60,35,0.4);
  padding:8px;
  border-radius:8px;
  margin-bottom:8px;
  
  /* 👇 AJOUT IMPORTANT */
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.bot-message a {
  color: var(--laiton);
  text-decoration: underline;
}

.user-message{
  background:rgba(180,120,60,0.4);
  padding:8px;
  border-radius:8px;
  margin-bottom:8px;
  text-align:right;
}

/* INPUT */
.majordome-input{
  display:flex;
  border-top:1px solid var(--cuivre);
}

.majordome-input.hidden{
  display:none;
}

.majordome-input input{
  flex:1;
  padding:8px;
  background:transparent;
  border:none;
  color:var(--clair);
}

.majordome-input button{
  padding:8px;
  cursor:pointer;
  background:none;
  border:none;
  color:var(--laiton);
}

/* CONTENU GLOBAL */
.majordome-content{
  display:flex;
  flex:1;
  overflow:hidden;
}

/* AVATAR */
.majordome-avatar{
  width:160px;       /* 👈 augmente ici */
  min-width:160px;

  height:100%;
  
  display:flex;
  align-items:flex-end;
  justify-content:center;

  border-right:1px solid var(--cuivre);
  overflow:hidden;
}

.majordome-avatar img{
  height:100%;              /* 👈 prend toute la hauteur */
  width:auto;               /* 👈 garde les proportions */

  object-fit:contain;

  filter:drop-shadow(0 0 8px rgba(0,0,0,0.7));
}

/* MESSAGES */
.majordome-messages{
  flex:1;
  min-width:0;   /* 👈 TRÈS IMPORTANT pour éviter les bugs de flex */
  padding:10px;
  overflow-y:auto;
}

.majordome-avatar img{
  animation: floatBot 3s ease-in-out infinite;
}

@keyframes floatBot{
  0%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
  100%{ transform:translateY(0); }
}

@media (orientation: landscape){
  .majordome{
    max-height:70vh;   /* 👈 encore plus safe */
  }
}

.bot-link {
  color: var(--laiton); !important;
  font-size: 20px !important;
  display: inline-block !important;
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 900px) {
  .bot-link {
    font-size: 0.85rem;
    padding: 2px 4px;
  }
}

@media (max-width: 600px) {
  .bot-link {
    font-size: 0.8rem;
    padding: 1px 3px;
  }
}