/*cases*/

@import "https://unpkg.com/open-props" layer(design.system);
@import "https://unpkg.com/open-props/normalize.min.css" layer(demo.support);

@keyframes slide-in {
  from {
    scale: .85;
    rotate: calc((var(--side, 1) * (5deg * var(--amp, 1))));
  }
}

@layer demo {
  .card-animation-layer {
    @media (prefers-reduced-motion: no-preference) {
      @supports (animation-timeline: view()) {
        animation: slide-in linear both;
        animation-timeline: view();
        animation-range: cover 0% contain 15%;
      }
    }
  } 
}

@layer demo.support {
  body {
    display: grid;
    place-content: end center;
    padding: var(--size-5);
    gap: var(--size-10);
  } 
  
  main {
    --cols: 3;
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, var(--size-content-2))); /*règle problème image*/
    gap: var(--size-5);
    padding-inline: var(--size-5);
    padding-block: 3svh 50svh;
    place-items: start;
    
    @media (width >= 720px)  { --cols: 2}
    @media (width >= 1200px) { --cols: 4 }
    @media (width >= 1920px) { --cols: 6}
    
    & > .card-animation-layer {
      display: grid;
      gap: var(--size-2);
      
      &:nth-of-type(2n + 1) { transform-origin: 25vw 100%; --side: -1; }
      &:nth-of-type(2n)     { transform-origin: -25vw 100%; --side: 1; }
      
      @media (width >= 720px) {
        &:nth-of-type(3n + 1) { transform-origin: 50vw 100%; --side: -1; --amp: 2; }
        &:nth-of-type(3n + 2) { transform-origin: 25vw 100%; --side: -1; }
        &:nth-of-type(3n + 3) { transform-origin: -25vw 100%; --side: 1 }
        &:nth-of-type(3n)     { transform-origin: -50vw 100%; --side: 1; --amp: 2; }
      }
      
      @media (width >= 1200px) {
        &:nth-of-type(4n + 1) { transform-origin: 75vw 100%; --side: -1; --amp: 3; }
        &:nth-of-type(4n + 2) { transform-origin: 50vw 100%; --side: -1; --amp: 2; }
        &:nth-of-type(4n + 3) { transform-origin: 25vw 100%; --side: -1; }  
        &:nth-of-type(4n)     { transform-origin: -25vw 100%; --side: 1; --amp: 3; }
      }
      
      @media (width >= 1920px) {
        &:nth-of-type(8n + 1) { transform-origin: 100vw 100%; --side: -1; --amp: 4; }
        &:nth-of-type(8n + 2) { transform-origin: 75vw 100%; --side: -1; --amp: 3; }
        &:nth-of-type(8n + 3) { transform-origin: 50vw 100%; --side: -1; --amp: 2; }
        &:nth-of-type(8n + 4) { transform-origin: 25vw 100%; --side: -1; }
        &:nth-of-type(8n + 5) { transform-origin: -25vw 100%; --side: 1; }
        &:nth-of-type(8n + 6) { transform-origin: -50vw 100%; --side: 1; --amp: 2; }
        &:nth-of-type(8n + 7) { transform-origin: -75vw 100%; --side: 1; --amp: 3; }
        &:nth-of-type(8n)     { transform-origin: -100vw 100%; --side: 1; --amp: 4; }
      }
    }
  }
  
  .card {
    background: var(--surface-2);
    border: 1px solid color-mix(in srgb, var(--surface-4), #0000 50%);
    /*border: 1px solid color-mix(in srgb, var(--surface-4), #ea000000 50%);*/
    padding-block: var(--size-3) var(--size-2);/*hauteur*/
    padding-inline: var(--size-7); /*taille des cases*/
    border-radius: var(--radius-4); /*forme cases*/
    box-shadow: var(--shadow-4);

    &.landscape img { aspect-ratio: var(--ratio-landscape) }
    &.portrait img { aspect-ratio: var(--ratio-portrait) }
    &.square img { aspect-ratio: var(--ratio-square) }
    
    & > p {
      color: var(--text-2);
      line-clamp: 2;
    }
    
    & > :is(a, p) {
      font-size: var(--font-size-1);
      font-family:"headline" ;
      src:url(../Assets/Font/Edu_QLD_Hand/EduQLDHand-VariableFont_wght.ttf);
      font-weight: bold;
      font-style: normal;
      line-height:1.25;
    }
    
    img {
      background-color: var(--surface-3);
      border-radius: var(--radius-3);/*contours de l'image*/
      margin-block-end: var(--size-2);/*espace entre image et texte*/
    }
    
    @media (prefers-color-scheme: light) {
      background: rgb(255, 255, 255);
    }
  }
  
  h5 {
    max-inline-size: 100%;
    text-align: center;
  }
}

/*plus cases*/

@font-face {
  font-family:"headline" ;
  src:url(../Assets/Font/Edu_QLD_Hand/EduQLDHand-VariableFont_wght.ttf);
}



#bodyp1 h1{
   
    text-transform: uppercase;
    font-size: 95px;
    text-align: center;
    margin: 0 auto;
    margin-top: 1.2rem;
    font-family:"headline" ;
    font-weight: 500;
    max-width: 26ch;
    text-transform: uppercase;
    color: rgb(255, 255, 255);
}

#bodyp1 h2{
  color: rgb(255, 255, 255);
   margin: 0 auto;
   margin-top: 1.2rem;
   text-align: center;
  font-family:"headline" ;
}


#bodyp1 h3{
  color: rgb(255, 255, 255); font-family:"headline" ;
  
}


#bodyp1{
    border: 40px solid rgb(0, 0, 0);
    background-image: url(../Assets/deco_site/fond.jpg);
    background-size:cover;

}

#bodyp1 h4{
  color: rgb(255, 255, 255); font-family:"headline" ;
  text-align: left;
}


.deco_img{

  
    width: auto;
    height: auto;

    max-width: min(90vw, 900px);
    max-height: 500px;

    display: block;
    float: right;
    position: static;
    margin:4px 0 20px auto;
}