:root{
      --bg:#0E0A14;        /* noir violacé */
      --panel:#171024;     /* panneaux violet très sombre */
      --muted:#B1A7C7;     /* gris-lavande */
      --text:#F0ECFF;      /* blanc légèrement lavande */
      --accent:#A78BFA;
      --accent2:#A78BFA;
      --border:#2F2540;    /* border violet sombre */
    }

    /* Page wrapper */
    .page{
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 0 24px 0 24px;
    }


.separator{
    border-top: 1px solid #3c3053;
    margin: 42px 0 32px 0;
}

    /* Chat “phone” */
    .chat{
      width: min(980px, 100%);
      border: 1px solid var(--border);
      background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
      border-radius: 26px;
      box-shadow: 0 30px 90px rgba(0,0,0,.45);
      overflow:hidden;
    }

    /* Header */
    .chat__topbar{
      display:flex;
      align-items:center;
      gap:12px;
      padding: 14px 16px;
      background: color-mix(in srgb, var(--panel) 92%, var(--accent) 8%);
      border-bottom: 1px solid var(--border);
    }
    .avatar{
      width:42px; height:42px;
      border-radius:999px;
      border: 1px solid color-mix(in srgb, var(--border) 65%, var(--accent) 35%);
      background: radial-gradient(circle at 30% 30%, rgba(167,139,250,.25), transparent 55%), var(--bg);
      display:grid;
      place-items:center;
      font-weight:700;
      letter-spacing:.4px;
      color: var(--text);
      flex:0 0 auto;
    }
    .topbar__meta{
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:2px;
    }
    .topbar__title{
      font-weight:700;
      line-height:1.1;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .topbar__subtitle{
      font-size:13px;
      color: var(--muted);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .topbar__pill{
      margin-left:auto;
      padding: 8px 10px;
      border-radius:999px;
      border:1px solid var(--border);
      background: rgba(0,0,0,.18);
      color: var(--muted);
      font-size:13px;
      white-space:nowrap;
    }

    /* Messages area */
    .chat__body{
      padding: 16px 14px 10px;
      background:
        radial-gradient(700px 420px at 15% 100%, rgba(167,139,250,.08), transparent 60%),
        radial-gradient(700px 420px at 85% 0%, rgba(167,139,250,.06), transparent 60%),
        var(--bg);
    }

    .day{
      display:flex;
      justify-content:center;
      margin: 8px 0 14px;
    }
    .day span{
      font-size:12px;
      color: var(--muted);
      padding: 6px 10px;
      border:1px solid var(--border);
      background: rgba(0,0,0,.18);
      border-radius:999px;
    }

    .msg{
      display:flex;
      margin: 10px 0;
    }
    .msg--me{ justify-content:flex-end; }
    .msg--them{ justify-content:flex-start; }

    .bubbleme{
      max-width: min(560px, 88%);
      padding: 10px 12px;
      border-radius: 12px 12px 0px 12px;
      border:1px solid var(--border);
      box-shadow: 0 12px 35px rgba(0,0,0,.25);
      position:relative;
      line-height:1.45;
      font-size: 15px;
      color: var(--text);
      word-wrap:break-word;
      overflow-wrap:anywhere;
    }


        .bubblethem{
      max-width: min(560px, 88%);
      padding: 10px 12px;
      border-radius: 12px 12px 12px 0px;
      border:1px solid var(--border);
      box-shadow: 0 12px 35px rgba(0,0,0,.25);
      position:relative;
      line-height:1.45;
      font-size: 15px;
      color: var(--text);
      word-wrap:break-word;
      overflow-wrap:anywhere;
    }

    /* Whatsapp-ish tails */
    .msg--me .bubbleme{
        background-color: #a78bfa38;
        border-color: color-mix(in srgb, var(--border) 55%, var(--accent) 45%);
      border-top-right-radius: 8px;
    }
    .msg--them .bubblethem{
      background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      border-top-left-radius: 8px;
    }

    .metagg{
      display:flex;
      justify-content:flex-end;
      align-items: center;
      gap:8px;
      margin-top:6px;
      font-size: 12px;
      color: color-mix(in srgb, var(--muted) 92%, var(--text) 8%);
      user-select:none;
    }
    .msg--them .metagg{ justify-content:flex-start; }

    .name{
      font-weight:600;
      color: color-mix(in srgb, var(--accent) 55%, var(--text) 45%);
    }

    /* “Quote” style for interview answers */
    .bubble blockquote{
      margin: 8px 0 0;
      padding-left: 10px;
      border-left: 3px solid color-mix(in srgb, var(--accent) 55%, var(--border) 45%);
      color: color-mix(in srgb, var(--text) 92%, var(--muted) 8%);
    }

    .avatar img{
        width: 100%;
        height: 100%;
        border-radius: 999px;
    }

    /* Typing indicator */
    .typing{
      display:inline-flex;
      gap:6px;
      align-items:center;
      padding: 10px 12px;
      border-radius:12px;
      border:1px solid var(--border);
      background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      box-shadow: 0 12px 35px rgba(0,0,0,.20);
      color: var(--muted);
      font-size:14px;
    }
    .dots{
      display:inline-flex;
      gap:4px;
      transform: translateY(1px);
    }
    .dot{
      width:6px; height:6px;
      border-radius:999px;
      background: color-mix(in srgb, var(--muted) 70%, var(--text) 30%);
      opacity:.6;
      animation: bob 1.1s infinite ease-in-out;
    }
    .dot:nth-child(2){ animation-delay:.15s; }
    .dot:nth-child(3){ animation-delay:.3s; }
    @keyframes bob{
      0%, 100%{ transform: translateY(0); opacity:.55; }
      50%{ transform: translateY(-4px); opacity:1; }
    }

    /* Footer input (fake) */
    .chat__footer{
      border-top: 1px solid var(--border);
      background: color-mix(in srgb, var(--panel) 92%, var(--accent) 8%);
      padding: 12px;
      display:flex;
      gap:10px;
      align-items:center;
    }
    .fake-input{
      flex:1;
      border:1px solid var(--border);
      background: rgba(0,0,0,.18);
      border-radius: 999px;
      padding: 10px 12px;
      color: var(--muted);
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }
    .fake-input span{
      opacity:.9;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .send{
      border:1px solid color-mix(in srgb, var(--border) 60%, var(--accent) 40%);
      background: color-mix(in srgb, var(--accent) 18%, var(--panel) 82%);
      color: var(--text);
      padding: 10px 14px;
      border-radius:999px;
      font-weight:700;
      cursor:default;
      user-select:none;
    }

    /* Small screens */
    @media (max-width: 560px){
      .chat__topbar{ padding: 12px; }
      .topbar__pill{ display:none; }
      .bubble{ font-size: 14.5px; }
    }



















.reddd{
  color: #c084fc;
  margin: 0 0 4px 0;
}

.collabs__head{
  margin-bottom: clamp(14px, 2vw, 22px);
  max-width: 70ch;
  padding: 0 24px;
  margin: 0;
}

.collabs__head h2{
text-align: center;
}

.collabs__head p{
    text-align: center;
    margin-top: 0;
}


.gridwrap{
  padding: 24px;
  width: 100%;
  max-width: 1024px;
}


.gridtable{
  border: 1px solid var(--border);
  border-radius: 18px;            /* coins arrondis du tableau */
  overflow: hidden;               /* IMPORTANT pour arrondir les 4 bords */
  background: var(--panel);
}

/* 4 colonnes */
.gridtable__head,
.gridtable__row{
  display:grid;
  grid-template-columns: 110px 1.8fr 1fr; /* Numéro | Description | Localisation */
}

.cell{
  padding: 14px 14px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  line-height: 1.45;
  min-width: 0;
  display: flex;
  align-items: center;
}

.cell--head{
  font-weight: 700;
  color: var(--text);
  background: #171024;
}

.cell--num{
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;  
}

.cell--center{
  display:flex;
  justify-content:center;
  align-items:center;
}

/* enlever les bords “internes” sur la dernière colonne */
.gridtable__head .cell:last-child,
.gridtable__row .cell:last-child{
  border-right: none;
}

.gridtable__row{
  background-color: #1E1A2E;
}

/* enlever le border-bottom sur la dernière ligne */
.gridtable__row:last-child .cell{
  border-bottom: none;
}

/* Thumbnail */
.thumb{
  width: 92px;
  height: 56px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 60%, var(--accent) 40%);
  overflow:hidden;
  cursor:pointer;
}
.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform .15s ease;
}
.thumb:hover img{ transform: scale(1.04); }
.thumb:focus-visible{
  outline: 2px solid rgba(167,139,250,.7);
  outline-offset: 3px;
}

/* Hover row (optionnel mais nice) */
.gridtable__row:hover .cell{
  background: rgba(167,139,250,.06);
}

/* Responsive */
@media (max-width: 860px){
  .gridtable__head,
  .gridtable__row{
    grid-template-columns: 80px 1.6fr 1fr 120px;
  }
  .thumb{ width: 84px; height: 52px; }
}
@media (max-width: 640px){
  /* Sur mobile, on empile (table -> cards) */
  .gridtable__head{ display:none; }
  .gridtable__row{
    grid-template-columns: 1fr;
  }
  .cell{
    border-right:none;
  }
  .cell--center{
    justify-content:flex-start;
  }
  .gridtable__row{
    border-bottom: 1px solid var(--border);
  }
  .gridtable__row:last-child{
    border-bottom:none;
  }
}

/* === Modal fullscreen === */
.imgmodal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}
.imgmodal.is-open{ display:block; }

.imgmodal__backdrop{
  position:absolute;
  inset:0;
  border:none;
  width:100%;
  height:100%;
  cursor:pointer;
}

.imgmodal__panel{
  position:relative;
  width:min(1100px, 92vw);
  height:min(80vh, 760px);
  margin: 8vh auto 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
}

.imgmodal__panel img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  display:block;
}

.imgmodal__close{
  position:absolute;
  top:10px;
  right:10px;
  border-radius:999px;
  border: 1px solid color-mix(in srgb, var(--border) 60%, var(--accent) 40%);
  background: rgba(0,0,0,.25);
  color: var(--text);
  width:40px;
  height:40px;
  cursor:pointer;
}