:root{
  --green:#157A61;
  --teal:#0F8276;
  --black:#10211D;
  --mint:#E3F3EE;
  --grey:#53665F;
  --white:#FFFFFF;
  --bg:#F2F7F5;
  --text:#10211D;
  --brand-600:#157A61;
  --radius:6px;
  --shadow:0 12px 32px rgba(16,33,29,.08);

}

* { box-sizing:border-box; }
html{
  height:100%;
  font-size:17px;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
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;
  font-weight:400;
  line-height:1.55;
  font-kerning:normal;
  font-feature-settings:"cv02", "cv03", "cv04", "cv11";
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color:var(--text);
  background:
    radial-gradient(circle at 82% 2%, rgba(47, 168, 140, .10), transparent 26rem),
    linear-gradient(180deg, #f7faf9, #f1f7f5 46%, #edf4f2);
}

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;
  }        

.wrapper-layout.wrapper-layout--guest {
  margin-right: 0;
  margin-left: 0;
}

.wrapper-layout--guest .main-content {
  min-width: 0;
  padding: 0 clamp(0.55rem, 2vw, 1.5rem);
}

  .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;
  }
}

button,
input,
select,
textarea{
  font:inherit;
}

p,
small,
label{
  text-wrap:pretty;
}

::placeholder{
  color:#819089;
  opacity:1;
}

/* Keep recurring interface labels readable across the learning workspace. */
.main-content :is(
  [class*="__eyebrow"],
  [class*="__kicker"],
  [class*="__caption"],
  [class*="__label"],
  [class*="__hint"]
){
  font-size:max(.7rem, 12px);
  line-height:1.45;
}

.main-content :is(
  [class*="__meta"],
  [class*="__status"]
){
  font-size:max(.72rem, 12px);
  line-height:1.45;
}