/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/****/
html {
  --partner-width: 120px;
  --color-brown: #33130b;
  --color-pale-yellow: #f1efdc;
  --color-pale-yellow-hover: #98887a;
  --color-burgundy: #842811;
  --color-orangered: #c65a0c
}

.mt-2 { margin-top: 2rem; }

/****/

body {
  overflow-x: hidden;
  font-family: Arial, sans-serif;
}

header {
  width: 100%;
  height: 60vh;
  position: relative;
  background: #ff9800;
  background-size: cover;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 41% 96.88%, 22.94% 80.96%, 0% 88.25%);

  &:after {
    content: "";
    display: block;
    
    background-image: url('https://www.diantredujeu.net/uploads/images/2025/DDJ8_1.jpg');
    background-size: cover;
    z-index: 1;
    position: absolute;
    rotate: -1deg;
    translate: 0 -25px;
    scale: 1.05;
    top: 0;    left: 0;    right: 0;    bottom: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 41% 96.88%, 22.94% 80.96%, 0% 88.25%);
  }

  .header-container {
    padding: 0 30px;
    position: relative;
    display: flex;
    justify-content: space-between;
    background-color: #00000099;
    top: 0;
    z-index: 999;
    box-shadow: 0 10px 15px #0009;
    
    /* position: sticky; */
  }
  
  .nav {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    
    a {
      color: white;
      text-decoration: none;
      margin: 0 15px;
      font-weight: bold;
      font-size: 1rem;
      text-transform: uppercase;
      position: relative;
    
      &.menuactive {
        position: relative;
        &:after {
          border-bottom: 2px #fff solid;
          content: "";
          display: block;
          position: absolute;
          left: .5rem;
          right: 0.5rem;
          bottom: -0.375rem;

          @media (width <= 800px) {
          bottom: 0;
          }

          }
      }
    }

    @media (width <= 800px) {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      text-align: right;
      flex-direction: column;
      padding: 20px 20px;
      background: #00000099;
      transition: all .3s;
      transform: translateX(100%);
      opacity: 0;

      &:is(.nav_mobile-btn--opened .nav) {
        .nav {
          transform: translateX(0);
        }
        .header-container {
          box-shadow: 0 10px 15px #0009;
        }
      }

      li {
        width: 100%;
        margin: 5px 15px;
        a {
          padding: .5rem .125rem 0.375rem;
          display: inline-block;
        }


  


      }
    }
  }

  .nav_mobile-btn {
    display: none; 
    background: none;
    border: none;
    cursor: pointer;
    
    @media (width <= 800px) {
      display: block;
    }
    svg {
      fill: #fff;
      width: 2rem;
      height: 2rem;
      path {
        transition: all .5s;
      }
    }
  }

  &:has(.nav_mobile-btn--opened) {
    .header-container {
      box-shadow: 0 0 0 #000f;
    }
    .header-content {
      animation: none;
      transition: opacity .5s;
      opacity: 0 !important;
    }
  }

  .nav_mobile-btn--opened {
    svg {
      path:nth-child(1) { 
        transform: rotate(45deg);
        transform-origin: 2px 2px;
      }
      path:nth-child(3) { 
        transform:  rotate(-45deg);
        transform-origin: 2px calc(100% - 2px);
      }
      path:nth-child(2) { opacity: 0; }
    }
    & + .nav {
      transform: translateX(0%);
      opacity: 1;
    }
  }

  h1 {
    img {
      filter: drop-shadow(0 0 5px #000) drop-shadow(0 0 10px #000);
      max-width: 175px;
      display: block;
      height: auto;
    }
  }
  & > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    z-index: 1;
  }
  
  .header-content {
    font-family: "Germania One", Arial, sans-serif;
    max-width: 80%;
    background:    #0009;
    padding:    20px 50px;
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    right: 10%;
    z-index: 2;
    backdrop-filter: blur(3px);
    box-shadow: 0 0 30px #000d;
    border-radius:    6px;
    animation: fadeInScaleFromTop .4s ease-in-out forwards;

    
    .countdown {
      display: flex;
      gap: 30px;
      margin-bottom: 30px;
      opacity: 0;
      animation: fadeInFromLeft .25s .35s ease-out forwards;
      
      .count {
        display: flex;
        align-items: center;
        font-weight: bold;
        
        .value {
          font-size: 70px;
          line-height: 1;
        }
        
        .label {
          font-size: 14px;
          writing-mode: vertical-rl;
          transform: rotate(180deg);
          margin-top: 5px;
          letter-spacing: 1px;
        }
      }

      .days :is(.value, .label) { color: #ffeb3b; }
      .hours :is(.value, .label) { color: #ff5722; }
      .minutes :is(.value, .label) { color: #00b0ff; }
      .seconds :is(.value, .label) { color: #8bc34a; }      
    }
    
    .subtitle {
      font-size: 40px;
      color: #ff9800;
      margin-bottom: 10px;
      opacity: 0;
      animation: fadeInFromLeft .3s .5s ease-out forwards;
    }
    .title {
      font-size: 60px;
      font-weight: bold;
      text-transform: uppercase;
      opacity: 0;
      animation: fadeInFromLeft .4s .6s ease-out forwards;
      
      span:nth-child(1) { color: white; display: block; }
      span:nth-child(2) { color: #e91e63; }
      span:nth-child(3) { color: #ff9800; }
      span:nth-child(4) { color: #03a9f4; }
    }
    
    
  }
  
}

main {
  padding: 2rem;   
}

.partner {
  margin: 2rem 0;
  width: 100%;

  .intervenants {
    margin-top: 2rem;
    display: flex;
    gap: 5rem;

    &.marquee {
      animation: marquee 20s linear infinite;
      &:hover {
        animation-play-state: paused;
      }
    }

    .intervenant {
      flex-shrink: 0;
      display: flex;
      gap: 1rem;
      align-items: center;

      a {
        display: contents;
      }

      strong {
        color: var(--color-brown);
        font-family: "Germania One", Arial, sans-serif;
        font-size: 2rem;
      }
      img {
        width: 120px;
        height: auto;
      }
span {
        font-family: arial;
        display: block;
        color: #000;
        margin-top: 10px;
        font-size: 0.875rem;
        font-style: italic;
      }
     
    }
  }
}

.section {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
  

  .article {
    height: auto;
    border-radius: 10px;
    width: calc(50% - .5rem);
    line-height: 1.25;
    padding: 1rem;
    background: var(--color-pale-yellow);
    display: flex;
    justify-content: space-between;

    &.big {
      width: 100%;
      img {
        width: 500px;
      }
    }

    img {
      border-radius: 0 10px 10px 0;
      /* float: right; */
      width: 250px;
      max-width: 50%;
      height: calc(100% + 2rem);
      translate: 1rem -1rem;
      border-left: 5px #fff solid;
      object-fit: cover;
      &.focus-right {
        object-position: 60% 0;
      }
    }

    .partner_btn {
      color: #000;
      display: block;
      margin-top: .5rem;
    }

    &:has(.partner_btn) {
      cursor: pointer;
      transition: border-color .7s;
      &:hover {
        border-color: var(--color-pale-yellow-hover);
      }
    }

  }
  h2 {
    font-size: 2rem;
    color: var(--color-brown);
    font-family: "Germania One", Arial, sans-serif;
    margin-bottom: .5rem;
    flex-basis: 100%;
  }
}


.section.col-3 {
  .article {
    width: calc(33.33% - .67rem);
  }
  img {
    width: 100px;
    object-fit: contain;
    border: none;
    translate:  .5rem 0;
    height: 100%;
  }
}
.section.bg-white {
 .article {
  background: #fff;
  border: 3px var(--color-pale-yellow) solid;
 } 
}

@media (width <= 800px) {
  header {
    .header-content {
      max-width: 90%;
      right: 5%;
      padding: 10px 20px;
      .countdown {
        gap: 15px;
        justify-content: space-evenly;
        .count .value {
          font-size: 54px;
        }
        .seconds {
          display: none;
        }
      }
    }
  }

  main {
    padding: 1rem;
  }
  .section, .section.col-3 {
    .article {
      width: 100%;
    }
  }
  .section.col-2 {
    .article {
      flex-direction: column;
      
      img {
        width: calc(100% + 2rem);
        max-width: none;
        translate: -1rem 1rem;
        border: 0;
        border-radius: 0 0 10px 10px;
      }
    }
  }
}

@media (width > 1280px) {
  .section {
    .partner {
      order: 2
    }
    .article {
      width: calc(33% - .67rem);
      &.big {
      width: calc(33% - .67rem);
     
    }
    }
  }
}

/* PROGRAMME */

.programme-vendredi,
.programme-samedi,
.programme-dimanche {
  display: contents;
}

.programme-samedi h2 {
  color: var(--color-burgundy);
}
.programme-dimanche h2 {
  color: var(--color-orangered);
}

/* INSCRIPTION */
.section--inscription { }

.inscription-descr {
    flex-basis: calc(50% - .5rem);
  
  @media (width <= 800px) {
    flex-basis: 100%;
  }
  & > p {
    font-style: italic;
  }
}
.inscription-img {
    flex-basis: calc(50% - .5rem);
  flex-shrink: 1;
   @media (width <= 800px) {
flex-basis: 100%;
   }
  img {
    max-width: 100%;
    height: auto;
  }
}
.inscription-crenaux {
  margin-top: 3rem;
  text-align: center;
  p {
    margin: 0.5rem auto;
    background: rgb(230, 225, 210);
    padding: 1rem;
    border-radius: 4px;
    display: inline-block;
  }
}

.inscription-form {
  flex-basis: 70%;
  margin: 0 15%;

  @media (width <= 800px) {
    margin: 0;
    flex-basis: 100%;
    max-width: 100%;
  }

  .row {
    margin: 1rem 0;
    display: flex;
    gap: 1rem;
    @media (width <= 800px) {
      flex-wrap: wrap;
      gap: 0.25rem;
    }
    .col.s6 {
      align-self: center;
      width: 50%;
      &:first-child {
        text-align: right;
      }
      @media (width <= 800px) {
        width: 100%;
        &:first-child {
        text-align: left;
      }
      }
    }
    .col.submit {
      flex-basis: 100%;
      text-align: center;
    }
  }
  label {
    font-size: 1.125rem;
  }
  .hours div {
    margin: .5rem 0;
    cursor: pointer;
  }


  input {
    padding: 0.25rem;
    font-size: 1.125rem;
    @media (width <= 800px) {
      [type="text"] {
        width: 100%;
        box-sizing: border-box;
      }
    }

    &.cms_submit {
      background:  rgb(230, 225, 210);
      border: 1px rgb(206, 200, 184) solid;
      padding: .5rem 1rem;
      border-radius: 4px;
      cursor: pointer;
      &:hover {
        box-shadow: 0px 3px 5px #0003;
      }
    }
  }
  textarea {
    width: 100%;
    min-height: 100px;
    font-family: arial, sans-serif;
    padding: 0.5rem;
    border-radius: 0.25rem;
    border-width: 1px;
        @media (width <= 800px) {
        width: 100%;
        box-sizing: border-box;
    }
  }
  
}



/* ANIMATIONS */
@keyframes fadeInScaleFromTop {
  0% {
    opacity: 0;
    transform: translateY(-100px) scale(0.85);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes fadeInFromLeft {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(var(--partner-width));
  }
}
/* Stylesheet: ddj_2025 Modified On 2025-05-18 02:32:26 */

/* Stylesheet: ddj_2025 Modified On 2025-08-21 00:58:14 */