/* ============================================================
   LÉGENDE COULEURS (XXright*) — YogaKwetu
   ------------------------------------------------------------
   PERSONNES (reserved)
   - Nathalie Ortiz              => .XXright1   => reserved      => #FF8C00 (darkorange)
   - Jeannine Rodrigues          => .XXright2   => reserved      => #8FBC8F (darkseagreen)
   - Fabienne Henry              => .XXright3   => reserved      => #8A2BE2 (blueviolet)
   - Martin Etienne              => .XXright3   => reserved      => #8A2BE2 (blueviolet)
   - Caroline Lagneau            => .XXright4   => reserved      => #DC143C (crimson)
   - Isabelle Corbo              => .XXright5   => reserved      => #D2691E (chocolate)
   - Dorianne Van Oudenhove      => .XXright6   => reserved      => #4B0082 (indigo)
   - Patrick Halluent            => .XXright8   => reserved      => blue
   - Helene Decloux              => .XXright10  => reserved      => #6495ED (cornflowerblue)
   - Anne-Catherine Suain        => .XXright11  => reserved      => #008000 (green)
   - Patrizia                    => .XXright12  => reserved      => #B8860B (darkgoldenrod)
   - Leroy Nathalie2             => .XXright13  => reserved      => #7FFF00 (chartreuse)  [texte noir]
   - Lize Halluent               => .XXright14  => reserved      => #FF7F50 (coral)

   NEW INCOMING (reserved)
   - New incoming (A)            => .XXright15  => reserved      => #8A2BE2 (blueviolet)
   - New incoming (B)            => .XXright16  => reserved      => #B8860B (darkgoldenrod)
   - New incoming (C)            => .XXright17  => reserved      => #FF8C00 (darkorange)
   - New incoming (D)            => .XXright18  => reserved      => #FFD700 (gold)
   - Sophie Dupont               => .XXright19  => reserved      => #FFB6C1 (lightpink)
   - Dummy / Nouvel arrivant     => .XXright666 => reserved      => #FF0000 (red)

   STATUTS (workflow)
   - Pre-reserved                => .XXright7   => pre-reserved  => #000000 (black)
   - Stand-by canceled           => .XXright9   => canceled      => red
   - Canceled                    => .XXright96  => canceled      => red
   - Pay initiated               => .XXright97  => pay_initiated => #d8d7d7 (gris clair)
   - Pay standby                 => .XXright98  => pay-standby   => #b6b4b4 (gris foncé)
   - Archived                    => .XXright99  => archived      => #663399 (proximus)
 ============================================================ */


/* =========================
   Blocs "right" — factorisation
   ========================= */

/* base commune */
.xright,
[class^="XXright"]{
  border: 1px solid white;
  width: 200px;
  height: 30px;
  font-weight: bold;
  box-sizing: border-box;
}

/* xright est différent (gris + plus petit) */
.xright{
  border-color: grey;
  width: 200px;
  height: 20px;
}

/* si tu as des contenus longs, ça évite le débordement */
[class^="XXright"]{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* =========================
   Couleurs par "profil"
   ========================= */

/* reserved (personnes) */
.XXright1{  background-color:#FF8C00; color:#fff; } /* orange */
.XXright2{  background-color:#8FBC8F; color:#fff; } /* darkseagreen */
.XXright3{  background-color:#8A2BE2; color:#fff; } /* blueviolet */
.XXright4{  background-color:#DC143C; color:#fff; } /* crimson */
.XXright5{  background-color:#D2691E; color:#fff; } /* chocolate */
.XXright6{  background-color:#4B0082; color:#fff; } /* indigo */
.XXright8{  background-color:blue;    color:#fff !important; } /* blue */
.XXright10{ background-color:#6495ED; color:#fff; } /* cornflowerblue */
.XXright11{ background-color:#008000; color:#fff; } /* green */
.XXright12{ background-color:#B8860B; color:#fff; } /* darkgoldenrod */
.XXright13{ background-color:#7FFF00; color:#000; } /* chartreuse */
.XXright14{ background-color:#FF7F50; color:#fff; } /* coral */

/* "new incoming - reserved" */
.XXright15{ background-color:#8A2BE2; color:#fff; }
.XXright16{ background-color:#B8860B; color:#fff; }
.XXright17{ background-color:#FF8C00; color:#fff; }
.XXright18{ background-color:#FFD700; color:#fff; }
.XXright19{ background-color:#FFB6C1; color:#fff; }

.XXright666{ background-color:#FF0000; color:#fff; } /* dummy / nouvel arrivant */

/* statuts */
.XXright7{  background-color:#000;    color:#fff; } /* pre-reserved */
.XXright9{  background-color:red;     color:#fff; } /* stand-by canceled */
.XXright96{ background-color:red;     color:#fff; } /* canceled */
.XXright97{ background-color:#d8d7d7; color:#fff; } /* pay_initiated (gris clair) */
.XXright98{ background-color:#b6b4b4; color:#fff; } /* pay-standby (gris foncé) */
.XXright99{ background-color:#663399; color:#fff; } /* archived (proximus) */

/* =========================
   Mobile (optionnel mais conseillé)
   Si ces blocs se retrouvent sur smartphone,
   on évite le "200px" trop rigide.
   ========================= */
@media (max-width: 480px){
  .xright,
  [class^="XXright"]{
    width: 100%;
    max-width: 260px; /* ajuste si tu veux */
  }
}