:root{
  --bg:#f2f5f9;
  --frame-border: 6px solid rgba(18, 56, 255, 1);
  --card-radius: 18px;
  --card-padding: 22px;
  font-family: 'Comfortaa', cursive;
}

*{box-sizing:border-box;margin:0;padding:0}

body,html{
  height:100%;
  margin:0;
  padding:0;
  background: #0b0c0f; /* couleur fallback */

  /* 🚀 Ajoute ici ton fond personnalisé */
  background-image: url("images/fond-decran.png"); /* <-- met ton image ici */
  background-size: cover;        /* couvre tout l'écran */
  background-position: center;   /* centré */
  background-attachment: fixed;  /* effet parallax */
  background-repeat: no-repeat;

  display:flex;
  align-items:center;
  justify-content:center;
  font-family: 'Comfortaa', cursive;
}

/* page background (juste pour placer un background visible avant le cadre) */
.page-bg{
  width:100%;
  max-width:1200px;
  margin:0 auto;
}

/* outer frame with thick border */
.outer-frame{
  border-radius:14px;
  padding:22px;
  min-height:720px;
  display:flex;
  flex-direction:column;
  gap:18px;

  /* Bordure dégradé rouge → noir */
  border: 10px solid transparent;
  background: #000000aa;
    border: 2px solid rgb(0, 89, 255);
}

/* header */
.header{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
}

/* avatar + logo */
.avatar-wrap{ text-align:center; margin-top:-10px; }
.avatar{
  width:110px;
  height:110px;
  object-fit:cover;
  border-radius:50%; /* rend ronde */
  border:6px solid rgba(37,71,255,0.15);
  box-shadow:0 6px 18px rgba(0,0,0,0.4);
  display:block;
  margin:0 auto;
}
.logo{
  display:block;
  width:220px;
  margin:8px auto 0;
  opacity:0.95;
}

/* main card (rectangle principal avec meme fond et bord arrondi + gradient rouge->noir pour bord intérieur) */
.main-card{
  background: rgba(26, 26, 26, 0.75);
  border:3px solid rgba(212, 168, 95, 0.4);
  border-radius: 14px;
  padding:20px;
  display:flex;
  gap:18px;
  position:relative;
  height: 500px;
  width: 1000px;
}

/* inner border gradient */
.main-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:12px;
  padding:3px;
  -webkit-mask: linear-gradient(#fff,#fff) content-box, linear-gradient(#fff,#fff);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  background:linear-gradient(90deg, #ff2b2b, #000000);
  z-index:-1;
}

/* layout */
.left-col{ flex:2; display:flex; flex-direction:column; gap:18px; }
.right-col{ flex:1; display:flex; flex-direction:column; gap:18px; align-items:center; }

/* big box left */
.big-box{
  background:rgba(255,255,255,0.02);
  border-radius:12px;
  min-height:360px;
  border:3px solid rgba(37,71,255,0.12);
  position:relative;
  padding:18px;
}
.placeholder{ color: rgba(200,200,200,0.5); font-size:18px; padding:12px; }
.dots{ position:absolute; left:50%; transform:translateX(-50%); bottom:14px; display:flex; gap:10px;}
.dots span{width:10px;height:10px;border-radius:50%;background:rgba(37, 255, 200, 0.6);display:inline-block;}


/* bottom box (motd) */
.bottom-box{
  background:rgba(255,255,255,0.02);
  border-radius:10px;
  padding:12px;
  border:2px solid rgba(37,71,255,0.08);
  min-height:80px; /* Force une hauteur minimale */
  display:flex;
  flex-direction:column;
}
.motd-content{ 
  margin-top:8px; 
  font-size:1.05rem; 
  color:#e01c1c;
  min-height:5px; /* Hauteur fixe pour le texte */
  display:flex;
  align-items:center; /* Centre verticalement le texte */

}

/* right column buttons */
.button-box{ width:100%; display:flex; flex-direction:column; gap:14px; align-items:center; }
.btn{
  display:block;
  width:86%;
  padding:16px 12px;
  text-align:center;
  text-decoration:none;
  font-weight:700;
  border-radius:10px;
  background: #D4A85F;
  color: #1A1A1A;
  box-shadow:0 6px 18px rgba(0,0,0,0.45);
  border:2px solid rgba(255,255,255,0.06);
}
.btn:hover{ transform:translateY(-3px); transition:all .18s ease; background: #E1B974;}

/* Container de texte */
.text-display {
  position: relative;
  height: 320px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.display-text {
  position: absolute;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  font-size: 1.2rem;
  color: rgba(200, 200, 200, 0.8);
  text-align: center;
  line-height: 1.6;
  padding: 20px;
}

.display-text.active {
  opacity: 1;
  z-index: 1;
}

/* Les dots (garde ton style actuel mais ajoute ça) */
.dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  display: flex;
  gap: 10px;
  z-index: 10;
}

.dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(37, 255, 200, 0.4);
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s ease;
}

.dots span:hover {
  background: rgba(37, 255, 200, 0.8);
  transform: scale(1.2);
}

.dots span.active {
  background: rgba(37, 255, 200, 1);
  box-shadow: 0 0 10px rgba(37, 255, 200, 0.6);
}

/* Titre des boîtes (plus propre et réutilisable) */
.box-title {
  color: #D4A85F;  /* doré */
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 8px;
  text-transform: uppercase;  /* OPTIONNEL: met en majuscules */
  letter-spacing: 1px;  /* OPTIONNEL: espace les lettres */
}

/* links box */
.links-box{ width:86%; background:rgba(255,255,255,0.02); border-radius:10px; padding:12px; border:2px solid #D4A85F; }
.link-pill{ display:inline-block; margin:6px 8px; padding:8px 12px; border-radius:8px; text-decoration:none; border:1px solid #D4A85F; color: #D4A85F; }

/* footer */
.footer{ margin-top:10px; display:flex; align-items:center; justify-content:center; gap:12px; position:relative; }

.footer .copyright{
  opacity:0.45;
  color:#ffffff;
  font-size:0.95rem;
  padding-left:12px;
}

/* small / single page tweaks */
.outer-frame.small{ max-width:1000px; }
.main-card.single{ padding:18px; min-height:420px; }

/* responsive */
@media(max-width:900px){
  .main-card{ flex-direction:column; }
  .right-col{ flex-direction:row; justify-content:space-around; width:100%; }
  .button-box{ width:48%; }
  .links-box{ width:100%; }
}