h2 {
  font-size: 10;
  text-shadow: 0 5px 15px rgb(102, 101, 101);
  vertical-align: middle;
  align-self: center;
}

header {
  color: aliceblue;
    background-color: transparent;
    box-shadow: 0 5px 15px rgba(0,0,0,0.8);
    margin: 0;
    padding: 0.02px;
    margin-bottom: 2vh;
    text-shadow: 0 5px 15px rgba(146, 132, 162, 0.8);
}

body {
    margin: 0;
  font-family: system-ui;
  height: 100%;
  font:1.33em 'Roboto Condensed', arial; 
  color:#f1e7f4; 
  text-align:center;
  background-image:radial-gradient(circle, #3c3b52 0%, #252233 80%);
}

.bodycontainer {
  max-width: 1300px;
  font-family: system-ui;
  margin: 0 auto;
  padding: 1ch;
  height:100%; 
  font:1.33em 'Roboto Condensed', arial; 
  color:#f1e7f4; 
  text-align:center;
  background-color: transparent;
}

.dashboard {
  display: grid;
  gap: 1ch;
  & > * {
    background: var(--bg, #EEE);
    border-radius: 2ch;
    color: hsl(215, 75%, 10%);
    container-type: inline-size;
    grid-column: var(--gc, auto);
    grid-row: var(--gr, auto);
    padding: 2ch;
    & h2 {
      margin-block: 0 1ch;
    }
  }
  & table {
    border-collapse: collapse;
    width: 100%;
    & td {
      border-block-end: 1px solid;
      padding-block: .66ch;
    }
    & th {
      border-block-end: 4px double;
      font-variant: small-caps;
      font-weight: 500;
      padding-block: 1ch 0.5ch;
      text-align: start;
      text-transform: lowercase;
    }
    & tr:nth-of-type(2) td { padding-block-start: 1.33ch; }
    & :is(td,th):last-of-type { text-align: end; }
  }
  & ul {
    all: unset;
    display: grid;
    gap: 1.5ch;
    & li { list-style-position: inside; }
  }
}

.bento {
  transition-property: box-shadow;
  transition-duration: 100ms;
  transition-delay: 10ms;
  transition: filter 0.3s ease;
}

.bento:hover {
    box-shadow: 0 5px 15px #282827;
    filter:brightness(80%);
    cursor: pointer;
}

.PDP {
    background-image: url(/AcceuilV2/img/PDP.jpg);
    height: 40vh;
  background-size: cover;       /* occupe toute la div sans déformation */
  background-position: center;  /* centre l’image */
  background-repeat: no-repeat; /* évite les répétitions */
  image-rendering: auto;        /* rend net selon le navigateur */
}


.pix { 
  --bg: linear-gradient(#d2cdbe);
  background-image: url("/AcceuilV2/img/pix.png");
  background-size: cover;       /* occupe toute la div sans déformation */
  background-position: center;  /* centre l’image */
  background-repeat: no-repeat; /* évite les répétitions */
  image-rendering: auto;        /* rend net selon le navigateur */
  align-items: center;
}

.bac { 
  --bg: linear-gradient(#d2cdbe);
  background-image: url(/AcceuilV2/img/bacblur.png);
 }
.nvl {
  font-size: 1.5em;
  text-align: center;
  background-image: url(/AcceuilV2/img/nvl.png);
}
.cv {
  font-size: 1.5em;
  text-align: center;
  background-image: url(/AcceuilV2/img/CV_BG.png);
  color: black;
  vertical-align: middle;
  background-size: cover;
  }

button {
  background-color: transparent;
  color : black;
  border: none;
  font-size: 2rem;
  padding: 100px 100px;
  cursor: pointer;
  position: relative;
}

@media (min-width: 768px) {
  .activity-feed { --gc: span 4;  }
  .PDP { --gc: span 2;--gr: span 2; }
  .challenges { --gc: span 3; }
  .dashboard { grid-template-columns: repeat(7, 1fr); }
  .pix { --gc: span 2; --gr: span 2; }
  .bac { --gc: span 3; }
  .nvl { --gc: span 4; }
  .cv { --gc: span 3; --gr: span 2; }
}

.piti
{
  font-size: 0%;
}