/*
 * 1ère adaptation modible vite fait par Fabien
 */

 .mobile {
  display: none;
}
.desktop {
  display:block
}

@media (max-width: 1280px) {
  body>aside {
    grid-column: 1 / 7;
  }
  main {
    grid-column: 7 / 14;
  }
}

@media (max-width: 1024px) {
  body>aside {
    grid-column: 1 / 8;
  }
  main {
    grid-column: 8 / 14;
  }
  h5 {
	font-size: var(--font-size-small);
  }
}
@media (max-width: 800px) {
  .mobile {
    display: block;
  }
  .desktop {
    display: none;
  }
  :root {
    --baseline: .9rem;
  }
  h1.mobile {
    grid-column: 1/15;
    border:none;
    margin: 0;
  }
  /* élargit composant */
  body > header {
    padding: var(--baseline-x2) 0 0 0 !important;
    gap: var(--baseline) 0;
  }
  #logo > img {
    height:var(--baseline-x6) !important;
  }
  #news {
    grid-column: 4 / 13 ! important;
    background-color: (255, 255, 255, .6);
  }
  body>aside {
    grid-column: 1 / 15;
  }
  main {
    grid-column: 1 / 15;
  }

  h5 {
	font-size: var(--font-size-x2);
  }
  select {
    font-size: small;
    padding-top: 2px;
  }
}

@media (max-width: 640px) {
  header {
    display:flex !important;
    flex-direction: column;
  }
  .wip {
    position:static !important;
  }
  #news {
    height: calc(var(--baseline)*9);
  }
  h5 {
	font-size: var(--font-size-small);
  }
  .watermark {
    transform: translateY(3.5em) rotate(-45deg) !important;
  }
}

@media (max-width: 500px) {
  .see_tooltip {
    display: none;
  }
}
@media (max-width: 460px) {
  /* #paysheet .apayer td:nth-child(2){
    overflow-wrap: anywhere;
  } */
}

@media (max-width: 1024px) and (min-width: 800px) {
	.item_social {
		grid-column: span 2;
		display: flex;
		flex-direction: column;
		justify-content: start;
	}
}

/** LE RESTE DES ADAPTATION EST DANS LES COMPOSANTS ItemSocial.vue et SocialDouble.vue **/