@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");

* {
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}

html, body {
    height: auto; /* Laisse le body s'étendre avec le contenu */
    min-height: 100%; /* Toujours au moins pleine hauteur */
    margin: 0;
}
   
body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  /* L'image est en dessous, le dégradé au-dessus avec transparence */
  background: 
    url('../img/circuit.png') repeat,
    linear-gradient(135deg, rgba(238,242,243,0.99), rgba(207,217,223,0.99));

  background-size: 200px 200px, cover;
  background-position: top left, center;
  background-attachment: fixed;

  color: #333;
  min-height: 100vh;
  padding: 2rem 1rem;
}

header {
  text-align: center;
  margin-bottom: 2rem;
}

header img.logo {
  margin-bottom: 1rem;
}

h1 {
  font-weight: 600;
  margin: 0;
}
    
h5 {
    color: #0043D0 !important;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto 2rem auto;
  width: 100%;
}
    
.message {
    position: relative;
    background: rgba(252, 252, 252, 0.60);
    text-align: center !important;
    border-radius: 5px;
    padding: 30px;

    /* Bordure transparente pour accueillir le dégradé */
    border: 3px solid transparent;

    /* Fond principal + dégradé pastel animé */
    background-image: 
        linear-gradient(rgba(252, 252, 252, 0.60), rgba(252, 252, 252, 0.60)), 
        linear-gradient(270deg, #8fbfe8, #e8a7c7, #8fbfe8);
    
    background-origin: border-box;
    background-clip: padding-box, border-box;

    /* Animation douce du dégradé */
    background-size: 100% 100%, 300% 300%;
    animation: borderGradientPastel 8s ease infinite;
}

/* Animation fluide du dégradé pastel */
@keyframes borderGradientPastel {
    0% { background-position: 0% 50%, 0% 50%; }
    50% { background-position: 0% 50%, 100% 50%; }
    100% { background-position: 0% 50%, 0% 50%; }
}




.card {
  position: relative;
  background: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect width='6' height='6' fill='%23f8f8f8'/%3E%3Cpath d='M0 6L6 0M-1 1l2-2M5 7l2-2' stroke='%23e0e0e0' stroke-width='0.5'/%3E%3C/svg%3E") repeat, 
    white; /* Texture SVG très légère */
  padding: 1.5rem 1.5rem 1.5rem 2rem; /* Décalage pour la bande */
  border-radius: 1rem;
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  text-align: center;
  color: inherit;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* -------- Bandes métalliques -------- */
.card::before,
.card::after {
  content: "";
  position: absolute;
  top: 0;
  width: 20px;
  height: 100%;
  background: var(--bande-color, linear-gradient(to bottom, #0043D0, #007BFF));
  z-index: 1;

  background-image:
    var(--bande-color),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.03) 0px,
      rgba(255,255,255,0.03) 1px,
      transparent 1px,
      transparent 2px
    ),
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.3) 0%,
      rgba(255,255,255,0) 50%,
      rgba(255,255,255,0.25) 100%
    );
  background-blend-mode: overlay, overlay, normal;
}

.card::before {
  left: 0;
  border-radius: 1rem 0 0 1rem;
  box-shadow: 3px 0 7px rgba(0, 0, 0, 0.15);
}

.card::after {
  right: 0;
  border-radius: 0 1rem 1rem 0;
  box-shadow: -3px 0 7px rgba(0, 0, 0, 0.15);
}

/* -------- Reflet diagonal animé -------- */
.card::before::after,
.card::after::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.4) 0%,
    rgba(255,255,255,0) 80%
  );
  transform: rotate(25deg);
  pointer-events: none;
}

/* Animation au survol */
.card:hover::before::after,
.card:hover::after::after {
  animation: glossy-move 1.2s ease forwards;
}

@keyframes glossy-move {
  0%   { left: -75%; }
  100% { left: 125%; }
}

/* Couleurs */
.card.status-yellow {
  --bande-color: 
    linear-gradient(
      to bottom,
      #F5E9B3 0%,
      #D8C37A 20%,
      #FAF7E4 40%,
      #D8C37A 60%,
      #F5E9B3 80%,
      #BFA55C 100%
    );
}
    
.card.status-green {
  --bande-color:
    linear-gradient(
      to bottom,
      #CDE8CD 0%,
      #94B894 20%,
      #F0F7F0 40%,
      #94B894 60%,
      #CDE8CD 80%,
      #6E936E 100%
    );
}
    
.card.status-gray {
  --bande-color:
    linear-gradient(
      to bottom,
      #E1E1E1 0%,
      #B0B0B0 20%,
      #F6F6F6 40%,
      #B0B0B0 60%,
      #E1E1E1 80%,
      #7A7A7A 100%
    );
}

/* Effet hover carte */
.card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 32px rgba(0,0,0,0.2);
}

.card h2 {
  margin: 0;
  font-size: 1.3rem;
}
    
footer {
  margin-top: auto;
  text-align: center;
  font-size: 0.85rem;
  color: #666;
  padding: 1rem 0;
}

.logo {
  max-width: 100%;
  height: auto;
}

/* Responsive */
@media (max-width: 768px) {
  .logo {
    width: 320px;
  }
}
    
@media (max-width: 480px) {
  .logo {
    width: 220px;
  }
}