:root{
  --green:#1A6D55;
  --teal:#0D8383;
  --black:#071717;
  --mint:#E7F3F3;
  --grey:#606060;
  --white:#FFFFFF;
  --bg:#f4f9f8;
  --radius:12px;
  --shadow:0 4px 12px rgba(7,23,23,.08);

}

* { box-sizing:border-box; }
html,body,#app{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  color:var(--text);
  background:linear-gradient(180deg, #f6fbfb, #f3f7f6 40%, #eef5f4);
}

a{ color:var(--brand-600); text-decoration:none; }
a:hover{ text-decoration:underline; }
.container {
display: flex;
min-height: 100vh;
}
.flash {
    position: fixed;
    bottom: 20px;
    right: 15px;

    padding: 14px 20px;
    border-radius: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;

    z-index: 9999; /* IMPORTANT — sinon il peut passer derrière une carte */

    box-shadow: 0 4px 12px rgba(0,0,0,0.12);

    animation: fadeIn 0.4s ease-out,
               fadeOut 0.4s ease-in 4s forwards;
}

/* Pour que plusieurs messages se stackent proprement */
.flash + .flash {
    margin-top: 10px;
}


/* Couleurs par type */
.flash-success {
    background: #E6F6EA;
    color: #207345;
}

.flash-error {
    background: #FCE8E6;
    color: #A4282D;
}

.flash-warning {
    background: #FFF4D8;
    color: #946200;
}

.flash-info {
    background: #E7F3F9;
    color: #0C5460;
}

/* Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateX(50px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeOut {
    to { opacity: 0; transform: translateX(50px); }
}


.wrapper-layout {
margin-left: 295px;
margin-right: 20px;
  }        

  .spinner {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 3px solid var(--mint);
  border-top: 3px solid var(--teal);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-left: 8px;
  vertical-align: middle;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}



  @media (max-width: 1024px) {
  .wrapper-layout {
margin-left: 5px;
margin-right: 5px;
  }
}