/* Variables couleur */
:root {

  /* Mode Clair */
  --cpc-primary: rgba(165, 95, 255, 1);
  --cpc-on-primary: rgba(255, 255, 255, 1);
  --cpc-secondary: linear-gradient(22.53deg, rgba(112, 0, 255, 0.7) 18.11%, rgba(91, 57, 134, 0.35) 56.34%, rgba(33, 0, 11, 0) 98.93%);
  --jv-primary: rgba(232, 17, 31, 1);
  --jv-on-primary: rgba(255, 255, 255, 1);
  --jv-secondary: linear-gradient(22.53deg, rgba(112, 0, 255, 0.7) 18.11%, rgba(102, 0, 0, 0.406) 56.34%, rgba(33, 0, 11, 0) 98.93%);
  --hw-primary: rgba(28, 167, 76, 1);
  --hw-on-primary: rgba(255, 255, 255, 1);
  --hw-secondary: linear-gradient(22.53deg, rgba(112, 0, 255, 0.7) 18.11%, rgba(0, 102, 16, 0.406) 56.34%, rgba(33, 0, 11, 0) 98.93%);
  --jdp-primary: rgba(192, 166, 75, 1);
  --jdp-on-primary: rgba(255, 255, 255, 1);
  --jdp-secondary: linear-gradient(22.53deg, rgba(112, 0, 255, 0.7) 18.11%, rgba(102, 80, 0, 0.406) 56.34%, rgba(33, 0, 11, 0) 98.93%);
  --mm-primary: rgba(112, 0, 255, 1);
  --mm-on-primary: rgba(255, 255, 255, 1);
  --mm-secondary: linear-gradient(22.53deg, rgba(112, 0, 255, 0.7) 18.11%, rgba(27, 0, 102, 0.406) 56.34%, rgba(33, 0, 11, 0) 98.93%);
  --button: rgba(165, 95, 255, 1);
  --on-button: rgba(255, 255, 255, 1);
  --button-disabled: rgba(180, 180, 177, 1);
  --on-button-disabled: rgba(91, 81, 104, 1);
  --background: rgba(244, 244, 242, 1);
  --on-background-primary: rgba(33, 0, 11, 1);
  --on-background-secondary: rgba(115, 98, 104, 1);
  --header: linear-gradient(0deg, #151515, #151515), linear-gradient(267.15deg, rgba(18, 14, 21, 0.5) 43.49%, #21000B 97.64%);
  --on-header-primary: rgba(255, 253, 236, 1);
  --surface: linear-gradient(284.74deg, rgba(245, 245, 239, 0.5) 57.65%, #FFFFFF 92.52%);
  --surface2: rgba(255, 255, 255, 1);
  --on-surface-primary: rgba(33, 0, 11, 1);
  --on-surface-secondary: rgba(33, 0, 11, 0.5);
  --highlight: rgba(33, 0, 11, 1);
  --on-highlight-primary: rgba(255, 253, 236, 1);
  --caption: rgba(244, 244, 242, 1);
  --on-caption-primary: rgba(33, 0, 11, 1);
  --on-caption-secondary: rgba(165, 95, 255, 1);
  --selected: rgba(238, 238, 238, 1);
  --on-selected-primary: rgba(33, 0, 11, 1);
  --footer: linear-gradient(0deg, #151515, #151515), linear-gradient(243.04deg, rgba(28, 16, 40, 0.5) 20.82%, #1D1A16 60.59%);
  --on-footer-primary: rgba(255, 253, 236, 1);
  --on-footer-secondary: rgba(255, 253, 236, 0.7);
  --free-access: rgba(112, 0, 255, 1);
  --on-free-access: rgba(255, 253, 236, 1);
  --hyperlink: rgba(165, 95, 255, 1);
  --hover-hyperlink: rgba(107, 64, 160, 1);
  --separator: rgba(200, 199, 204, 1);
  --component: rgba(238, 238, 238, 1);
  --error: rgba(234, 0, 42, 1);
  --success: rgba(0, 119, 12, 1);

  /* Mode Sombre */
  --dm-cpc-primary: rgba(148, 94, 216, 1);
  --dm-cpc-on-primary: rgba(255, 255, 255, 1);
  --dm-cpc-secondary: linear-gradient(22.53deg, rgba(112, 0, 255, 0.7) 18.11%, rgba(91, 57, 134, 0.35) 56.34%, rgba(33, 0, 11, 0) 98.93%);
  --dm-jv-primary: rgba(206, 34, 23, 1);
  --dm-jv-on-primary: rgba(255, 255, 255, 1);
  --dm-jv-secondary: linear-gradient(22.53deg, rgba(112, 0, 255, 0.7) 18.11%, rgba(102, 0, 0, 0.406) 56.34%, rgba(33, 0, 11, 0) 98.93%);
  --dm-hw-primary: rgba(26, 148, 67, 1);
  --dm-hw-on-primary: rgba(255, 255, 255, 1);
  --dm-hw-secondary: linear-gradient(22.53deg, rgba(112, 0, 255, 0.7) 18.11%, rgba(0, 102, 16, 0.406) 56.34%, rgba(33, 0, 11, 0) 98.93%);
  --dm-jdp-primary: rgba(167, 146, 73, 1);
  --dm-jdp-on-primary: rgba(255, 255, 255, 1);
  --dm-jdp-secondary: linear-gradient(22.53deg, rgba(112, 0, 255, 0.7) 18.11%, rgba(102, 80, 0, 0.406) 56.34%, rgba(33, 0, 11, 0) 98.93%);
  --dm-mm-primary: rgba(101, 0, 228, 1);
  --dm-mm-on-primary: rgba(255, 255, 255, 1);
  --dm-mm-secondary: linear-gradient(22.53deg, rgba(112, 0, 255, 0.7) 18.11%, rgba(27, 0, 102, 0.406) 56.34%, rgba(33, 0, 11, 0) 98.93%);
  --dm-button: rgba(148, 94, 216, 1);
  --dm-on-button: rgba(255, 255, 255, 1);
  --dm-button-disabled: rgba(229, 229, 229, 1);
  --dm-on-button-disabled: rgba(154, 154, 154, 1);
  --dm-background: rgba(21, 21, 21, 1);
  --dm-on-background-primary: rgba(255, 253, 236, 1);
  --dm-on-background-secondary: rgba(184, 184, 175, 1);
  --dm-header: linear-gradient(0deg, #151515, #151515), linear-gradient(267.15deg, rgba(18, 14, 21, 0.5) 43.49%, #21000B 97.64%);  
  --dm-on-header-primary: rgba(255, 253, 236, 1);
  --dm-surface: linear-gradient(267.46deg, rgba(28, 16, 40, 0.5) 43.26%, #1D1A16 96.29%);
  --dm-surface2: rgba(33, 0, 11, 1);
  --dm-on-surface-primary: rgba(255, 253, 236, 1);
  --dm-on-surface-secondary: rgba(255, 253, 236, 0.5);
  --dm-highlight: rgba(33, 0, 11, 1);
  --dm-on-highlight-primary: rgba(255, 253, 236, 1);
  --dm-caption: rgba(33, 0, 11, 1);
  --dm-on-caption-primary: rgba(255, 253, 236, 1);
  --dm-on-caption-secondary: rgba(148, 94, 216, 1);
  --dm-selected: rgba(238, 238, 238, 1);
  --dm-on-selected-primary: rgba(33, 0, 11, 1);
  --dm-footer: linear-gradient(0deg, #151515, #151515), linear-gradient(243.04deg, rgba(28, 16, 40, 0.5) 20.82%, #1D1A16 60.59%);  
  --dm-on-footer-primary: rgba(255, 253, 236, 1);
  --dm-on-footer-secondary: rgba(255, 253, 236, 0.7);
  --dm-free-access: rgba(100, 0, 228, 1);
  --dm-on-free-access: rgba(255, 253, 236, 1);
  --dm-hyperlink: rgba(148, 94, 216, 1);
  --dm-hover-hyperlink: rgba(123, 81, 177, 1);
  --dm-separator: rgba(200, 199, 204, 1);
  --dm-component: rgba(238, 238, 238, 1);
  --dm-error: rgba(234, 0, 42, 1);
  --dm-success: rgba(0, 119, 12, 1);
}

/* **************************************************** */
/*   STYLES DE BASE & RESOLUTION MOBILE (<745px)        */
/* **************************************************** */

/* Définition de base pour le rem */
html {
    font-size: 16px;
    /* min-height:100%; */
  }
  
  a {
    text-decoration: none;
  }

  strong {
    font-weight: bold;
    word-break: break-word;
  }

  i {
    font-style: italic;
    word-break: break-word;
  }

  em {
    word-break: break-word;
  }
  
  /* Polices utilisées sur le front */
  
  .Headline-1, span.layout-content-title:first-of-type {
  font-family: Obviously-wide;
  /* font-size: 2.73rem; */
  font-size: 1.8rem;
  font-weight: 670;
  /* line-height: 3.18rem; */
  line-height: 1.98rem;
  letter-spacing: 0px;
  text-align: left;
  }
  
  .Headline-2 {
  font-family: Obviously-narrow;
  font-size: 1.82rem;
  font-weight: 440;
  line-height: 2.27rem;
  letter-spacing: 0px;
  text-align: left;
  }
  
  .Headline-3, h3.layout-config-title {
  font-family: Obviously-extended;
  font-size: 1.1rem;
  font-style: italic;
  font-weight: 770;
  line-height: 1.73rem;
  letter-spacing: 0px;
  text-align: left;
  }
  
  .Headline-4 {
  font-family: Obviously;
  font-size: 0.91rem;
  font-weight: 670;
  line-height: 1.41rem;
  letter-spacing: 0px;
  text-align: left;
  }
  
  .Headline-5 {
  font-family: Obviously-narrow;
  font-size: 1.64rem;
  font-weight: 540;
  line-height: 2.27rem;
  letter-spacing: 0px;
  text-align: left;
  
  }
  
  .Headline-6 {
  font-family: Obviously-narrow;
  font-size: 1.14rem;
  font-weight: 440;
  line-height: 1.77rem;
  letter-spacing: 0px;
  text-align: left;
  }
  
  .Headline-7 {
  font-family: Obviously-narrow;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.73rem;
  letter-spacing: 0px;
  text-align: left;
  }
  
  body.darkmode .Headline-7, body.darkmode .Headline-7 a, body.darkmode div.main-container div.fil-actu-item .Headline-7 a {
    color: #FFFDEC;
  }

  .Navigation-1 {
  font-family: Obviously-wide;
  font-size: 1rem;
  font-style: italic;
  font-weight: 670;
  line-height: 34px;
  letter-spacing: 0px;
  text-align: left;
  }
  
  .Navigation-2 {
  font-family: Obviously-wide;
  font-size: 0.73rem;
  font-style: italic;
  font-weight: 670;
  line-height: 1.14rem;
  letter-spacing: 0px;
  text-align: left;
  }
  
  .Navigation-3 {
  font-family: Obviously;
  font-size: 0.73rem;
  font-weight: 540;
  line-height: 1.14rem;
  letter-spacing: 0px;
  text-align: left;
  }
  
  .Subtitle-1 {
  font-family: Obviously;
  font-size: 0.73rem;
  font-weight: 560;
  line-height: 0.73rem;
  letter-spacing: 0px;
  text-align: left;
  font-style: normal;
  }
  
  .Subtitle-2 {
  font-family: Obviously;
  font-size: 0.73rem;
  font-style: italic;
  font-weight: 500;
  line-height: 0.73rem;
  letter-spacing: 0px;
  text-align: left;
  }
  
  .Subtitle-3 {
  font-family: Obviously;
  font-size: 0.55rem;
  font-weight: 550;
  line-height: 0.86rem;
  letter-spacing: 0px;
  }

  
  .Body-1 {
    font-family: Merriweather;
    font-size: 22px;
    font-weight: 300;
    line-height: 32px;
    letter-spacing: 0px; 
  }
  
  .Body-2 {
    font-family: Merriweather;
    font-size: 18px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0px;
    
  }
  
  .Body-3 {
  font-family: Obviously;
  font-size: 0.82rem;
  font-weight: 400; /* 540 */
  line-height: 1.27rem;
  letter-spacing: 0px;
  text-align: left;
  }
  
  .Body-4 {
  font-family: Merriweather;
  font-size: 0.73rem;
  font-weight: 400;
  line-height: 1.36rem;
  letter-spacing: 0px;
  text-align: left;
  }
  
  .Button {
  font-family: Obviously;
  font-size: 0.91rem;
  font-weight: 560;
  line-height: 1.41rem;
  letter-spacing: 0px;
  text-align: left;
  cursor: pointer;
  padding-left: 16px;
  padding-right: 16px;
  /*padding-top: 6px;*/
  padding-bottom: 6px;
  background-color: #A55FFF;
  text-transform: uppercase;
  color:#ffffff;
  }

  .btn--disabled {
    font-family: Obviously;
  font-size: 0.91rem;
  font-weight: 560;
  line-height: 1.41rem;
  letter-spacing: 0px;
  text-align: left;
  cursor: pointer;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 6px;
  padding-bottom: 10px;
  text-transform: uppercase;
  background: #B4B4B1;
  color:#ffffff;
  }
  
  .Caption {
  font-family: Obviously;
  font-size: 1.18rem;
  font-weight: 670;
  line-height: 1.86rem;
  letter-spacing: 0px;
  text-align: left;
  }
  
  .Overline {
  font-family: Obviously;
  font-size: 0.55rem;
  font-weight: 550;
  line-height: 0.86rem;
  letter-spacing: 0px;
  text-align: left;
  }
  
  .Caption-Article {
  font-family: Obviously;
  font-size: 0.55rem;
  font-weight: 500;
  line-height: 0.86rem;
  letter-spacing: 0px;
  text-align: left;
  }

  /* Preview */
.Preview {
font-family: Obviously-condensed;
font-size: 60px;
font-style: normal;
font-weight: 700;
line-height: 70px; /* 116.667% */
text-transform: uppercase;
}

 /* Note textuelle */
 .note_txt {
  font-family: Obviously-condensed;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 70px; /* 116.667% */
  text-transform: uppercase;
  }

  .white {
    color: var(--on-header-primary);
  }

  .dejalu {
    color: var(--on-background-secondary);
  }

  body.darkmode .dejalu {
    color: var(--dm-on-background-secondary);
  }
  
  div.dejalu-checked {
    display: flex;
    align-self: end;
    justify-self: end;
    transform: translateY(-180%);
  }

header, footer {
  max-width: 100vw;
}

  .hide, div.derniers-articles-item.last.hide, div.derniers-articles-item.test.hide {
    display: none;
  }

  a.global-link {
    line-height: 0;
  }

  /* Image lightbox */

  #PostImageBox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: opacity .5s ease;
    -webkit-backdrop-filter: blur(1rem);
    backdrop-filter: blur(1rem);
}

#PostImageBox:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .75;
  align-self: center;
}

#PostImageBox .img-container {
  position: relative;
  max-height: 90%;
  max-width: 90%;
  /* margin: 0 auto 4rem; */
  transition: all .25s ease;
  align-self: center;
}

#PostImageBox .img-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit:contain;
}

#PostImageBox .post-image-box-container {
    text-align: center;
    /* padding: 3rem 1.5rem; */
    height: 100vh;
    padding: 0;
    display:flex;
    justify-content:center;
}

#PostImageBox .post-image-box-container .post-image-box-nav {
  position: inherit;
  margin-bottom: 4rem;
  text-align: right;
}

#PostImageBox .post-image-box-container .post-image-box-nav .next-arrow.disabled, #PostImageBox .post-image-box-container .post-image-box-nav .prev-arrow.disabled {
  opacity: .2!important;
}

#PostImageBox .post-image-box-container .post-image-box-nav .next-arrow, #PostImageBox .post-image-box-container .post-image-box-nav .prev-arrow {
  position: absolute;
  top: 50%;
  width: 5%;
  text-align: center;
  transform: translate(-50%,-50%);
  cursor: pointer;
  transition: opacity .2s ease;
  opacity: .85;
}

#PostImageBox .post-image-box-container .post-image-box-nav .prev-arrow {
  margin-right: 2rem;
}

#PostImageBox .post-image-box-container .post-image-box-nav .next-arrow, #PostImageBox .post-image-box-container .post-image-box-nav .prev-arrow {
  display: inline-block;
}

body.darkmode #PostImageBox .post-image-box-container .post-image-box-nav .next-arrow svg path, body.darkmode  #PostImageBox .post-image-box-container .post-image-box-nav .prev-arrow svg path {
  fill: #ffffff;
}

#PostImageBox .post-image-box-container .prev-arrow {
  left: 5%;
}

#PostImageBox .post-image-box-container .next-arrow {
  right: 5%;
}

#PostImageBox.opened {
  opacity: 1;
    pointer-events: inherit;
}

#PostImageBox .post-image-box-container .caption {
  font-family: Obviously;
  font-size: 0.55rem;
  font-weight: 550;
  line-height: 0.86rem;
  letter-spacing: 0px;
  position: absolute;
  bottom: 0;
  /* left: 50%;
  transform: translate(-50%); */
  padding-right: 8px;
    padding-left: 4px;
    text-align:left;
}

#PostImageBox .caption {
  bottom: 0px;
  color: #21000B;
  background: #FFFDEC;
}

figure img {
  cursor: zoom-in;
}
  
  /* Home */
  
  h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
  }

  p, h1 {
  margin: 0;
  padding: 0;
  font-size: 1.33rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.36rem;
  }
  
  body {
    margin:0;
    width: 100%;
    min-width: 300px;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content;
    background: #F4F4F2;
    color: #21000B;
  /* grid-gap: 2rem; */
  grid-template-areas: 
    "header"
    "main"
    "footer";
  font-family: 'Obviously';
  align-content: space-between;
  }

  body.article-display {
    grid-template-areas: 
    "header"
    "main"
    "features"
    "article-footer"
    "footer";
  }

  body.article-display footer {
    margin-top: 0px;
  }
  
  body.darkmode {
    background: #151515;
    color: #F4F4F2;
  }

  body.darkmode a p {
    /*background: #151515;*/
    color: #F4F4F2;
  }

  body.darkmode p a, body.darkmode div.grid-container a {
    color: #945ED8;
  }

  body.darkmode p a:hover, body.darkmode div.grid-container a:hover {
    color: #6B40A0;
  }
  
  header a {
    color: #FFFDEC;
  }


  div.header-container {
  grid-area: header;  
  height: 99px;
  background: linear-gradient(267.15deg, rgba(18, 14, 21, 0.9) 43.49%, #21000B 97.64%), url(/content/themes/canard-pc/dist/img/croix-header-footer.png), #151515;
  display: flex;
  align-items : center;
  justify-content: center;
  min-width: 350px;
  }
  
  div.header-container div.logo-container, footer div.logo-container {
  width: 203px;
  height: 45px;
  background: #FFFDEC;
  display: flex;
  align-items : center;
  justify-content: center;
  }
  
  div.logo-container a {
    display:grid;
  }

  div.header-container nav {
  position:absolute;
  right: 24px;
  top: 34px;
  }
  
  /*interface non visible en version mobile */
  
  div.header-section-menu, div.header-section-jv, div.header-section-jdp, div.header-section-hw, div.user-section, div.search  {
  display:none;
  }
  
  /* Contenu Menu visible en version mobile */

  #menuMobileContent div.header-section-jv, #menuMobileContent div.header-section-jdp, #menuMobileContent div.header-section-hw  {
    display:flex;
    }

    #menuMobileContent div.header-section-jv {
      height: 58px;
      width: 182px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-transform: uppercase;
      color: #FFFDEC;
      grid-area:mobileMainSectionJV;
    }
  
    #menuMobileContent div.header-section-jv a:hover {
      color: #E8111F;
    }

    #menuMobileContent div.header-section-jv.active {
      background: #E8111F;
      width: 216px;
    }
    
    #menuMobileContent div.header-section-jdp {
      width: 253px;
      height: 58px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-transform: uppercase;
      color: #FFFDEC;
      grid-area:mobileMainSectionJDP;
    }

    #menuMobileContent div.header-section-jdp a:hover {
      color:#C0A64B;
    }
  
    #menuMobileContent div.header-section-jdp.active {
      background: #C0A64B;
      width: 323px;
    }
    
    #menuMobileContent div.header-section-hw {
      width: 199px;
      height: 58px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-transform: uppercase;
      color: #FFFDEC;
      grid-area:mobileMainSectionHW;
    }
    
    #menuMobileContent div.header-section-hw a:hover {
      color:#1CA74C;
    }

    #menuMobileContent div.header-section-hw.active {
      background: #1CA74C;
      width: 228px;
    }

    #menuMobileContent h1.Navigation-1 {
      font-size: 24px;
    }

    #menuMobileContent h1.Navigation-2 {
      font-size: 16px;
      line-height: 1.8rem;
    }

    #menuMobileContent div.header-section-hw a, #menuMobileContent div.header-section-jdp a, #menuMobileContent div.header-section-jv a {
      display: inline-flex;
    }

    #menuMobileContent div.header-section-hw svg, #menuMobileContent div.header-section-jdp svg, #menuMobileContent div.header-section-jv svg {
      margin-left: 4px;
    }

    #menuMobileMain.mm-jv {
      grid-area:mobileMainJV;
    }

    #menuMobileMain.mm-jdp {
      grid-area:mobileMainJDP;
    }

    #menuMobileMain.mm-hw {
      grid-area:mobileMainHW;
    }

  div.search {
    display: flex;
    position:absolute;
    top: 28px;
    left: 20px;
  }
  
  div#search {
    display:none;
  }
  
  
  div.search #modeJour, div.search #modeNuit {
    width: 36px;
    height: 36px;
  }
  
  /* Burger Menu */
  
  #menuToggle
  {
    /* display: block; */
    position: relative;
    -webkit-user-select: none;
    user-select: none;
    /* position: fixed; */
  z-index: 100000000032;
  width: 50px;
  transform: translate(10px); 
  }

  #menuToggle:has(> input:checked) {
    position:fixed;
    transform: translate(-40px);
  }
  
  #menuToggle a
  {
    text-decoration: none;
    color: #232323;
    transition: color 0.3s ease;
  }
  
  #menuMobileContent a {
    color:#FFFEDE;
  }

  #menuToggle a:hover
  {
    color: tomato;
  }
  
  
  #menuToggle input[type=checkbox]
  {
    display: block;
    width: 50px;
    height: 40px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    z-index:9;
    opacity: 0; /* hide this */
    z-index: 9; /* and place it over the hamburger */
    z-index:500;
    -webkit-touch-callout: none;
  }
  
  /*
   * Just a quick hamburger
   */
  #menuToggle span
  {
    display: block;
    width: 40px;
    height: 5px;
    margin-bottom: 5px;
    position: relative;
    background: #FFFDEC;
    border-radius: 3px;
    
    z-index: 9;
    
    transform-origin: 4px 0px;
    
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
  }
  
  #menuToggle span#span1
  {
    transform-origin: 0% 0%;
  }
  
  #menuToggle span#span2
  {
    transform-origin: 0% 100%;
  }
  
  #menuToggle input:checked ~ span#span1
  {
    transform: rotate(45deg) translate(-2px, -6px);
    background: #FFFDEC;
  }
  
  #menuToggle input:checked ~ span#span2
  {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }
  
  #menuToggle input:checked ~ span#span3
  {
    transform: rotate(-45deg) translate(-1px, -1px);
  }
  
  #menuToggle input:checked {
    
  }
  
  #menu
  {
    position: fixed;
    width: 0;
    overflow:hidden;
    height: 100vh;
    margin: -70px 0 0 64px;
    padding-top: 34px;
    z-index: 8;
  background: linear-gradient(267.15deg, rgba(18, 14, 21, 0.8) 43.49%, #21000B 97.64%), url(/content/themes/canard-pc/dist/img/croix-header-footer.png), #151515;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */
    transform-origin: 0% 0%;
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows:min-content;
    grid-template-areas:
      "mobileHeader"
      "menuMobileContent"
      "mobileFooter";
    transition: all .3s ease-in-out;
    transform: translate(0%, 0);
  }

  #menuMobileContent {
    grid-area:menuMobileContent;
    display: grid;
    grid-template-areas:
      "mobileMainSectionJV"
      "mobileMainJV"
      "mobileMainSectionJDP"
      "mobileMainJDP"
      "mobileMainSectionHW"
      "mobileMainHW";
    grid-template-columns: 1fr;
    grid-template-rows: min-content;
    align-content:start;
  }
  

  #menuMobileHeader {
    grid-area: mobileHeader;
  }

  #menuMobileUser a {
    text-transform: uppercase;
    font-size: 15px;
  }

  #menuMobileUser {
    max-width: 65vw;
    white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  }

  #menuMobileMainSection {
    grid-area: mobileMainSection;
  }

  #menuMobileHeader, #menuMobileMainSection {
    height: 48px;
    align-self: start;
    padding-left: 16px;
    color: #FFFDEC;
    display:flex;
  }
  
  #menuToggle span.hide {
    opacity: 0;
  }
  
  #menuToggle input.hide {
    display: none;
  }
  
  #menuMobileSearch {
    /* display:none; */
    position:absolute;
    right: 50px;
    /*display:flex;*/
    /* align-items: center; */
    background: transparent;
    /* margin-top: -8px; */
    flex-direction: row;
    display: flex;
  }
  
  #menuMobileSearch svg.searchBtn {
    cursor:pointer;
    /* margin-right: 16px; */
    align-self: start;
    justify-self: end;
  }
  
  #menuMobileSearch svg.closeBtn {
    display:none;
    margin-right: 16px;
    cursor:pointer;
  }
  
  
  #menuMobileSearch.active {
    left:15px;
    right:16px;
    background: #21000B;
    width:98%;
  }

  #menuMobileSearch.active form {
    width:100%;
  }
  
  #menuMobileSearch.active svg.closeBtn {
    display: flex;
  }
  
  #menuMobileSearch input[type=text] {
    width: 0px;
    height:46px;
    outline: none;
    background: transparent;
    border: 0px;
    margin-left:16px;
    color: #FFFDEC;
  }
  
  #menuMobileSearch.active input[type=text] {
    width:100%;
    margin-top: -10px;
  }
  
  #menuMobileHeader a, #menuMobileSections a, #menuMobileMain a, #menuMobileMainSection a {
    color: #FFFDEC;
  }
  
  #menuMobileMainSection a {
    font-size:1.83rem;
    text-transform:uppercase;
  }
  
  #menuMobileMain {
    grid-area:mobileMain;
    align-self: start;
    padding-left: 16px;
  }
  
  #menuMobileSections {
    grid-area:mobileSections;
    align-self: start;
    grid-gap: 33px;
    display:grid;
    padding-left:16px;
  }
  
  #menuMobileSections a {
    font-size: 1.33rem;
  }
  
  #menuMobileSections p:first-of-type a:hover {
    color: #C0A64B;
  }
  
  #menuMobileSections p:last-of-type a:hover {
    color: #1CA74C;
  }
  
  #menuMobileFooter {
    grid-area:mobileFooter;
    align-self:end;
    display:grid;
    height: 30px;
    align-items: center;
    justify-items: center;
    margin-bottom: 50px;
  }
  
  
  
  #menu ul {
    padding: 0;
  }
  
  #menu li
  {
    padding:0;
    font-size: 1.33rem;
    text-transform:uppercase;
    margin-bottom: 24px;
    list-style: none;
  }

  #menuMobileMain ul li a {
    font-size: 16px;
  }
  
  #menuMobileFooter ul {
    display:flex;
    padding-left:16px;
    fill: #fff;
    color: #fff;
    height: 22px;
  }
  
  #menuMobileFooter ul li {
   margin-right: 18px;
    fill:#fff;
    color: #fff;
    list-style: none;
    height: 22px;
  }
  
  #menuMobileFooter ul li div {
    fill : #fff;
    height:22px;
  }
  
  #menuMobileFooter ul li div svg {
    height:22px;
  }
  
  #menuToggle input:checked ~ div#menu
  {
    /*transform: none;*/
    width: 100vw;
    transform: translate(-100%, 0);
    transition: all .3s ease-in-out;
  }
  
  div.user-section {
    cursor:pointer;
  }
  
  /* Mode Nuit */
    
  #modeJour, #modeNuit {
    display:none;
    cursor:pointer;
  }
  
  #modeJour.active, #modeNuit.active {
    display: flex;
  }
  
  /* Menu principal */

  div.header-section-menu ul li a, div.header-section-menu ul li a:visited {
    color: #FFFDEC; 
  }

  div.header-section-menu ul.header-nav li a:hover {
    color : #E8111F;
  }

  div.header-section-menu ul.header-jdp-nav li a:hover {
    color: #C0A64B;
  }
  div.header-section-menu ul.header-hw-nav li a:hover {
    color: #1CA74C;
  }

  ul.left-box::before{
    content:"|";
    font-weight: 500;
    font-size: 1.1rem;
    margin-bottom: 3px;
  }

  /* Contenu principal */
  

  div.main-container {
    grid-area: main;
    width: 100%;
    /* min-width: 31.17rem; */
    justify-self: center;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content;
    grid-template-areas: 
    "premier-bloc"
    "second-bloc"
    "troisieme-bloc";
    justify-items: center;
    grid-gap:24px;
    padding-top: 24px;
    max-width: 100vw;
  }

  div.second-bloc, div.non-connecte-container  {
    background: linear-gradient(284.74deg, rgba(245, 245, 239, 0.8) 57.65%, #FFFFFF 92.52%), url(/content/themes/canard-pc/dist/img/e72e9250b06dade2bd13c43e57d96efe.png);
  }

  div.non-connecte, div.main-container.non-connecte, div.main-container.hardware.non-connecte, div.main-container.jdp.non-connecte {
    grid-template-areas: 
    "non-connecte"
    "premier-bloc"
    "second-bloc"
    "troisieme-bloc";
    margin-bottom: 24px;
  }

  div.non-connecte-container {
    grid-area:non-connecte;
    display:grid;
    grid-template-columns: 1fr;
    width:100%;
    justify-items: center;
    grid-template-areas: "discover-cpc";
  }

  div.discover-cpc-container {
    grid-area:discover-cpc;
    grid-template-columns: 1fr;
    grid-template-rows: min-content;
    grid-template-areas:
      "discover-header"
      "discover1" 
      "discover2" 
      "discover3"
      "discover4"
      "discover-cpc-footer";
  }

  div.premier-bloc, div.second-bloc div.centered-container, div.troisieme-bloc, div.non-connecte-container div.discover-cpc-container {
    width: calc(100% - 16px);
  }

  div.premier-bloc {
    grid-area:premier-bloc;
    display:grid;
    grid-gap: 24px;
    grid-template-columns: 1fr;
    grid-template-areas: 
    "main"
    "derniers-articles"
    "fil-actu";
  }

  div.second-bloc {
    grid-area:second-bloc;
    display:grid;
    grid-template-columns: 1fr;
    justify-items:center;
    grid-template-areas: 
    "second-centre";
  }

  div.second-bloc div.centered-container {
    grid-area:second-centre;
    display:grid;
    grid-gap: 24px;
    grid-template-columns: 1fr;
    grid-template-areas: 
    "jdp"
    "hw";
  }

  div.troisieme-bloc {
    grid-area:troisieme-bloc;
    display:grid;
    grid-gap: 24px;
    grid-template-columns: 1fr;
    grid-template-areas: 
    "configs"
    "guide-achat"
    "boutique"
    "vids"
    "pave"
    "evergreen";
  }

  div.main-container.non-connecte {
    padding-top:0px;
  }

  div.main-container.minimal {
    min-height:100%;
    /*margin-top: 204px;*/
    /*margin-bottom: 204px;*/
    display: grid;
    grid-gap: 48px;
    grid-template-columns: 1fr;
    grid-template-rows: min-content;
    grid-template-areas: "minimal";
    justify-content:center;
    max-width: 100vw;
  }

  .main-container.full-width {
    grid-template-areas: none;
  }
  

  div.main-container a, a.global-link {
    color: #21000B;
  }

  body.darkmode div.main-container a, body.darkmode a.global-link {
    color: #F4F4F2;
  }

  div.main-container a.Button {
    color:#fff;
  }

  div.main-container p.Headline-3 {
    font-size: 1rem;
  }

  div.fil-actu-item p:last-of-type {
    display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 60px;
  }

  div.fil-actu-item h3.Headline-7 {
    font-size:1.2rem;
  }

  div.fil-actu-item p.Body-4 {
    font-size: 1rem;
  }

  p.preview, div.videos-item p, div.post-infos p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
  }

  div.result-content p.preview, div.vote-content p.preview, div.whine-content p.preview {
    -webkit-line-clamp: 6;
  }


  div.discover-cpc-container, #jdp-plateau-header, #hardware-header {
    /*padding-top: 24px;*/
  }
  
  div.layout-framed, div.post-conclusion, div.technical-description, div.article-footer, div.connexion, .table-container table thead, div.container-articles-author, div.page-flex-layout.layout-framed, .download_layer {
    background: linear-gradient(284.74deg, rgba(245, 245, 239, 0.8) 57.65%, #FFFFFF 92.52%), url(/content/themes/canard-pc/dist/img/e72e9250b06dade2bd13c43e57d96efe.png);
  }
  
  div.discover-cpc-header p:first-of-type, div.derniers-articles-header p:first-of-type, div.fil-actu-container p:first-of-type, div#jdp-plateau-header p:first-of-type, div#hardware-header p:first-of-type, div.guide-achat-container p:first-of-type, div.boutique-container p:first-of-type, div#videos-header p:first-of-type {
    display: flex;
  }

  div.discover-cpc-header p:first-of-type.Headline-3 {
    font-size: 1rem;
  }
  
  div.discover-cpc-header p:first-of-type svg, div.derniers-articles-header p:first-of-type svg, div.fil-actu-container p:first-of-type svg, div#jdp-plateau-header p:first-of-type svg, div#hardware-header p:first-of-type svg, div#annonce-header p:first-of-type svg, div.guide-achat-container p:first-of-type svg, div.boutique-container p:first-of-type svg, div#videos-header p:first-of-type svg {
    align-self: center;
    height: 16px;
  }
  
  div.discover-cpc-footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  div.discover-cpc-footer input {
    margin-top: 16px;
    margin-bottom: 16px;
    text-transform: uppercase;
    color: #FFFDEC;
    background: #A55FFF;
    padding: 8px 16px 8px 16px;
    border: 0;
  }
  
  div.discover-cpc-footer p {
    text-align: center;
  }

  div.main-container.hardware div.premier-bloc {
    grid-template-areas :
    "main-a"
    "derniers-articles"
    "configs"
    "big-guide-achat";
  }

  div.main-container.hardware div.second-bloc div.centered-container {
    grid-template-areas :
    "guides-achats"
    "annonce"
    "boutique";
  }

  div.main-container.hardware div.troisieme-bloc {
    grid-template-areas :
      "pave"
      "evergreen";
  }

  #hardware-header {
    grid-area:hw-h;
  }

  #hw1 {
    grid-area:hw1;
  }
  
  #hw2 {
    grid-area:hw2;
  }
  
  div.configs-container {
    grid-area:configs;
  }

  div.big-guide-achat-container {
    grid-area:big-guide-achat;
  }
  
  div.guide-achat-container {
    grid-area:guide-achat;
  }
  
  div.guide-achat-container div.auteur-date-article, div.liste-categorie.guides-achat div.auteur-date-article {
    display:none;
  }

  div.boutique-container {
    grid-area:boutique;
  }

  div.main-container.jdp div.premier-bloc {
    /*width: 60.67rem;*/
    grid-template-areas :
      "main-a"
      "derniers-articles"; 
  }

  div.main-container.jdp div.second-bloc div.centered-container {
    grid-template-areas: 
    "articles-populaires";
  }

  div.main-container.jdp div.troisieme-bloc {
    grid-template-areas:
      "guides-achats"
      "annonce"
      "boutique";
  }

  div.articles-populaires-container {
    grid-area:articles-populaires;
  }

  div.articles-populaires-container {
    display:grid;
    grid-gap:24px;
    grid-template-columns: 1fr;
    grid-template-rows: min-content;
    grid-template-areas: 
    "articles-populaires-header"
    "articles-populaires-1"
    "articles-populaires-2"
    "articles-populaires-3"
    "articles-populaires-4";
  }

  div.second-bloc div.centered-container, div.discover-cpc-container {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  div.last-guides-achats-container {
    grid-area:guides-achats;
    display:grid;
    grid-gap:24px;
    grid-template-columns: 1fr;
    grid-template-rows: min-content;
    grid-template-areas:
      "guides-header"
      "last-guides1"
      "last-guides2";
  }

  div.big-guide-achat-container {
    grid-area:big-guide-achat;
  }
  
  div.annonce-container {
    grid-area: annonce;
  }

  div.pave-container {
    grid-area: pave;
  }

  div.main-container.liste-categorie {
    margin-top: 24px;
    display:grid;
    grid-gap: 24px;
    grid-template-columns: 1fr;
    grid-template-rows: min-content;
    grid-template-areas:
      "liste-categorie-header"
      "category-list-item1"
      "category-list-item2" 
      "category-list-item3"
      "category-list-item4"
      "category-list-item5"
      "category-list-item6"
      "category-list-item7"
      "category-list-item8"
      "category-list-item9"
      "category-list-item10"
      "category-list-item11"
      "category-list-item12"
      "category-list-item13"
      "category-list-item14"
      "category-list-item15"
      "category-list-item16" 
      "pagination";
      width: calc(100% - 16px);
  }

  #liste-categorie-header {
    grid-area:liste-categorie-header;
  }

  #category-list-item1 {
    grid-area: category-list-item1;
  }

  #category-list-item2 {
    grid-area: category-list-item2;
  }

  #category-list-item3 {
    grid-area: category-list-item3;
  }

  #category-list-item4 {
    grid-area: category-list-item4;
  }

  #category-list-item5 {
    grid-area: category-list-item5;
  }

  #category-list-item6 {
    grid-area: category-list-item6;
  }

  #category-list-item7 {
    grid-area: category-list-item7;
  }

  #category-list-item8 {
    grid-area: category-list-item8;
  }

  #category-list-item9 {
    grid-area: category-list-item9;
  }

  #category-list-item10 {
    grid-area: category-list-item10;
  }

  #category-list-item11 {
    grid-area: category-list-item11;
  }

  #category-list-item12 {
    grid-area: category-list-item12;
  }

  #category-list-item13 {
    grid-area: category-list-item13;
  }

  #category-list-item14 {
    grid-area: category-list-item14;
  }

  #category-list-item15 {
    grid-area: category-list-item15;
  }

  #category-list-item16 {
    grid-area: category-list-item16;
  }

  div.pagination {
    grid-area:pagination;
    display:inline-flex;
    grid-gap:8px;
    justify-self:end;
    align-items: center;
  }

  div.pagination a.next svg, div.pagination a.prev svg {
    height:35px;
  }

  a.prev.Button, a.next.Button {
    color: #F4F4F2;
  }

  main a.main-link-home {
    display:flex;
    flex-direction:column;
  }
  
  
  main, .configs-img, .big-guide-achat-img, .pave-img {
  min-height: 330px;
  background: #F4F4F2;
  display: flex;
  align-items: end;
  justify-content: start;
  }

  body.darkmode main, body.darkmode .configs-img, body.darkmode .big-guide-achat-img, body.darkmode .pave-img {
    background: #21000B;
  }
  
  main div.main-layer-img, div.configs-img div.configs-layer-img, div.big-guide-achat-img div.big-guide-achat-layer-img, div.pave-img div.pave-img div.pave-layer-img {
    position:relative;
    display:inline-block;
    width:100%;
    height:100%;
  }

  div.configs-img div.configs-layer-img {
    /*max-height: 421px;*/
  }
  
  main div.main-layer-img::before, div.configs-img div.configs-layer-img::before, div.big-guide-achat-img div.big-guide-achat-layer-img::before, div.pave-img div.pave-img div.pave-layer-img::before, div.article-cover div.main-layer-img::before, div.page-img::before {
    content:'';
    position:absolute;
    width: 100%;
    height:100%;
    display:inline-block;
    background: linear-gradient(22.53deg, rgba(112, 0, 255, 0.7) 18.11%, rgba(102, 0, 0, 0.406) 56.34%, rgba(33, 0, 11, 0) 98.93%);
  }
  
  div.configs-img div.configs-layer-img::before, div.big-guide-achat-layer-img::before, div.page-img::before {
    background: linear-gradient(22.53deg, rgba(112, 0, 255, 0.7) 18.11%, rgba(0, 102, 16, 0.406) 56.34%, rgba(33, 0, 11, 0) 98.93%);
  }
  
  main div.main-layer-img img, .configs-img img, .big-guide-achat-img img, .pave-img img, .big-guide-achat--item a {
    display:flex;
  }
  
  main div.main-cartouche, div.configs-img div.configs-cartouche, div.big-guide-achat-img div.big-guide-achat-cartouche, div.pave-img div.pave-cartouche {
    display: flex;
      position: absolute;
      align-self: end;
      justify-self: start;
    z-index:5;
    flex-direction: column;
    justify-items: start;
    max-width: calc(100% - 16px);
  }
  
  main div.main-cartouche div.article-category, div.configs-cartouche div.article-category, div.big-guide-achat-cartouche div.article-category, div.pave-cartouche div.article-category {
    position: relative;
  }
  
  /*main div.article-category, main div.main-article-titre, main div.main-article-soustitre {
    align-self: end;
  }*/
  
  div.article-category div.Subtitle-2 {
   background: #7000FF;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 3px;
    padding-bottom: 3px;
    height: 18px;
    box-sizing: border-box;
  }
  
  main div.main-article-soustitre, main div.main-article-titre, div.configs-img div.configs-article-titre, div.configs-img div.configs-article-soustitre, div.big-guide-achat-img div.big-guide-achat-article-titre, div.big-guide-achat-img div.big-guide-achat-article-soustitre, div.pave-img div.pave-article-titre, div.pave-img div.pave-article-soustitre  {
  margin-top: 16px;
    /* background: #21000B; */
    color: #FFFDEC;
    padding-right: 8px;
    width:fit-content;
  }
  
  div.configs-img div.configs-cartouche, div.big-guide-achat-img div.big-guide-achat-cartouche, div.pave-img div.pave-cartouche {
    max-width: 350px;
  }
  
  main div.main-article-soustitre, div.configs-img div.configs-article-soustitre, div.big-guide-achat-img div.big-guide-achat-soustitre, div.pave-img div.pave-article-soustitre, div.big-guide-achat-article-soustitre {
    margin-bottom: 36px;
  }

  main div.main-article-soustitre, div.page-content div.main-cartouche div.main-article-soustitre {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  main img, .configs-img img, .big-guide-achat-img img, .pave-img img {
  width: 100%;
  height:100%;
  object-position: center;
  object-fit: cover;
  aspect-ratio: 374/322;
    z-index:1;
  }

  main div.main-article-titre, div.div.pave-article-titre, div.page-content div.main-cartouche div.main-article-titre {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: calc(100% - 8px);
  }
  
  .derniers-articles-img img, .jdp-img img, .hw-img img, .guide-achat-img img, .boutique-img img, .videos-img img, .discover-cpc-img img {
  width: 100%;
  height:100%;
  min-height: 17.42rem;
  object-fit: cover;
  aspect-ratio: 374/209;
  }
  
  div.derniers-articles-container, div.guide-achat-container, div.videos-container {
  /*height: 82.2rem;*/
  grid-gap: 2rem;
  display: grid;
  }
  
  div.derniers-articles-header {
  /*height: 2.1rem;*/
  }
  
  .toggle {
  margin-top: 4px;
  }

  body.darkmode .toggle rect {
    stroke: #ffffff;
  }

  .articles-selector {
    cursor:pointer;
  }
  
  div.fil-actu-container p:first-of-type {
  /*margin: 0;
  padding: 0;
  font-weight: 770;
  font-style: italic;
  font-size: 0.63rem;
  line-height: 1rem;*/
  }

  body.darkmode div.fil-actu-container h3 a svg path {
    fill: #FFFDEC;
  }

  body.darkmode div.fil-actu-container h3 a {
    color: #FFFDEC;
  }

  body.darkmode p.Headline-3 a {
    color: #FFFDEC;
  }
  
  div.derniers-articles-header p:last-of-type {
  margin-top: 9px;
  text-transform: uppercase;
  /*line-height: 0.8rem;
  font-size: 0.75rem;*/
  }
  
  div.derniers-articles-item div.derniers-articles-img, div.jdp-container div.jdp-img, div.hw-img, div.boutique-img, div.guide-achat-img, div.videos-img, div.discover-cpc-img, div.discover-cpc-item div.derniers-articles-img, div.news-img, div., div.vote-img, div.whine-img {
  /*background: #D9D9D9;*/
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 209px;
  }
  
  div.derniers-articles-item, div.jdp-item, div.hardware-item, div.annonce-item, div.boutique-item, div.guide-achat-item, div.configs-item, div.videos-item, div.big-guide-achat-item, div.articles-populaires-item, div.last-guides-achats-item, div.category-list-item, div.pave-item, div.evergreen-item {
  display: grid;
  grid-gap: 0;
  grid-template-rows: min-content;
  
  }

  svg.toggle.actif {
    transform: rotateY(180deg);
  }
  
  div.derniers-articles-item p, div.jdp-item p, div.hardware-item p, div.annonce-item p, div.boutique-item p, div.guide-achat-item p, div.configs-container p, div.videos-item p, div.big-guide-achat-container p, div.pave-container p {
  margin: 0;
  padding: 0;
  }
  
  div.fil-actu-container, div.jdp-container, div.hardware-container, div.annonce-container, div.boutique-container, div.guide-achat-container, div.configs-container, div.videos-container, div.discover-cpc-container, div.big-guide-achat-container, div.pave-container, div.evergreen-container {
  display: grid;
  grid-gap: 24px;
  align-content: start;
  }
  
  div.fil-actu-item:first-of-type {
  /* margin-top: 8px;*/
  }
  
  div.fil-actu-item p:first-of-type {
  color: #8B8B8B;
  margin: 0;
  padding: 0;
  }
  
  div.fil-actu-item h1 {
  /*font-style: normal;
  font-weight: 460;
  font-size: 19px;
  line-height: 30px;*/
  }
  
div.hardware-container {
  grid-template-rows: min-content;
  grid-template-columns: 1fr;
  grid-template-areas:
    "hw-h"
    "hw1"
    "hw2";
    /*padding-bottom: 24px;*/
}

div.evergreen-container {
  grid-template-rows: min-content;
  grid-template-columns: 1fr;
  grid-template-areas:
    "ever-h"
    "ever1"
    "ever2";
    padding-bottom: 24px;
}

div.jdp-container {
  /*padding-bottom: 24px;*/
}

  div.article-category, div.article-auteur-date {
  z-index: 5;
  }
  
  div.article-category {
  display: flex;
  position: absolute;
  align-self: start;
  justify-self: end;
  background: #E8111F;
  color: #ffffff;
  height: max(18px, 1rem);
  align-items: center;
  /*padding-left:8px;*/
  }

  
    div.main-container.jdp div.article-category, div.jdp-img div.article-category, div.article-category.jdp {
      background: #C0A64B;
    }
    
    div.hardware-container div.article-category, div.configs-img div.article-category, div.hw-img div.article-category, div.big-guide-achat-img div.article-category, div.annonce-container div.article-category, div.main-container.hardware div.article-category, div.article-category.hw {
      background: #1CA74C;
    }

   #discover1 div.article-category, #discover2 div.article-category, div.article-category.jv {
    background: #E8111F;
   }

   #discover3 div.article-category {
    background: #C0A64B;
   }

   #discover4 div.article-category {
    background: #1CA74C;
   }

   div.pave-img div.article-category {
    background: #A55FFF;
   }
  
  /* Motifs et logos des cartouches de catégorie des vignettes */
  
  div.article-category span {
  margin-left: 8px;
  }

  div.article-category span a, div.article-category a, body.darkmode div.post-informations span.auteur-article a {
    color: #fff;;
  }

  div.article-category svg {
  margin-left: 8px;
  margin-right: 8px;
    height:10px;
  }
  
  div.motif-jv, div.motif-jv-main {
  width: 1.68rem;
  height: 1rem;
  background: url(/content/themes/canard-pc/dist/img/jv-motif-small.png), #FFFEDE;
  background-size: 2.73rem;
  margin-left: 0.36rem;
  }
  
  div.motif-jdp {
    width: 1.68rem;
  height: 1rem;
    background: url(/content/themes/canard-pc/dist/img/jdp-motif-small.png) #FFFEDE;
   background-size: 2.73rem;
  margin-left: 0.36rem;
  }
  
  div.motif-hw {
    width: 1.68rem;
  height: 1rem;
    background: url(/content/themes/canard-pc/dist/img/hw-motif-small.png) #FFFEDE;
    background-size: 20px;
    background-position: center;
  margin-left: 0.36rem;
  }
  
  div.motif-jv-2 {
  width: 1rem;
  height: 1rem;
  background: url(https://s3-alpha-sig.figma.com/img/cef2/2613/d027d1f9611a887f27ee3a0657854099?Expires=1679270400&Signature=hVghtLHGeQpZu-LyJ8jVYuhbweyvnLEIGwJxkzBUgcGXqTo-17626KDmxKUB1vX0T-6sCI3xS2sXw2Bthm2WW7tQ3GmRG5t2R3gzEifVFYjQATcaLpV~rg2YUNglaQNUW~oRvhrVCz3eWKevOZZRnw9692NoDwrab~UY1b2uVKdufEobT0ZHb-DovfWDhBfBw-G1-0VqZBnfYKMRvzZrwmk9BdFN61BREZWDr-~6ltB5z966A~QoYgp~QyVIKBsv-sjanvPPipuM7WGWUBtxKjxOskWwHVOST-GygFI~b5KSFGXB1nBrsROu8t-100aQ7eiofChzFseXIpKBWKX4Cg__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4);
  background-size: 4.55rem;
  }
  
  div.motif-jv-main-2 {
  width: 1rem;
  height: 1rem;
  background: url(https://s3-alpha-sig.figma.com/img/4623/865f/c578eb94f7a9a2a4bfdb76df3247b108?Expires=1679270400&Signature=Nxi67GDfBB99pK8r3Nfw41IXMvxPvuGbbTmIrdv3642sZZqnGdfjeBmYjLY~bhzKOC153vKbIWeksk00AtMXUqHuUmBGWMCtrziYycGLBVCaJKoDjrAftOgyvuUYFlaiKv8FHJ-RDt6ZKicnrUSGsM5cfjMs9JxJlfIBdZLP~MMJNQCyEAUedoJntXSFCCJF5c8WSMD0CrNysJIA~CDVS043JWR2v~IXmHQj8zJ5wJOXd00eIyD6CepHumqWZzfUgj-NW3cWb5QDA5y90yE~Jpgk7XbLQFkK4K9Q68Ui97i10lpYBFLVe8WUUE~x6zAENBb01ZgEhJ1UwLVpc-eMBg__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4);
  background-size: 1.82rem;
  }
  
  div.motif-jdp-2 {
  width: 1rem;
  height: 1rem;
  background: url(https://s3-alpha-sig.figma.com/img/dbb0/81be/11316e97d825cbd61faf165dc37ce810?Expires=1679270400&Signature=jsjh5vVhAuwObr8ZqtcwWPbZJOucK6uT1vMLoT6cZCUxp-LV1pr~LbPvgUkbo4ncBdd43jh~F3Gy3cJQdwheAlbVuIe2niyobojdKQS-5rMoqpUBO5wuqyfAHIt6d4MLNdz3sxf9WcnxoerA6eI5NXtiIc9izlRh8eeZPtLDInEX3Z6LdFzGb7t3KU0QrD42Xr-CEIyPEUJexfGQt~66PTi70JsyHRKhEpxlvM5~zTeyOfghCiH5KufPHYqQBU67ha-Snn0NS8PehV6ue~j~klMl4gS8DguXxyt83VMZlG9hmoK19dp3VfUmDuGhQHwxSqGcs3dtdiuA~0WQ7aqNdA__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4);
  background-size: 1.36rem;
  }
  
  div.motif-hw-2 {
  width: 1rem;
  height: 1rem;
  background: url(https://s3-alpha-sig.figma.com/img/711c/617c/87d786d3634380a834452a64e3710606?Expires=1679270400&Signature=lYwUqbYtCwvFOrzuAOVD1YKyZQcMS1rnupaIX3xITfwgt7ei5bG2p5GeUixO7U7L7HRBokUBOc5HtAOVcUxvjact1hujsOYACmS1nRVkG1wyNnvrT2AvdhXROL2Rys9xcrrF-i6BenH~0Oll7QPCIVkWxsN9Cx4lXpvi41AQl9IEBJyu0oONDwogxe3cmngn11ONp5wwUnExLpOvzkic4YO6gnirxUgRFZbQAkZ8-6Z0ootoPH1tgnF3jxRgMfT4CTKqSyY3aTBqKN8jzy6EjpaoNZOFHTvgkyK1AB0aGYMG7~tOKGyJis2bJ06jCtIWUNIxqzXhKA6kW76Do1P3cw__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4);
  background-size: 1.36rem;
  }
  
  div.auteur-date-article {
  display: flex;
  /* position: absolute; */
  align-self: end;
  justify-self: start;
  background: #F4F4F2;
  color: #21000B;
  height: 1rem;
  align-items: center;
  padding-left: 4px;
  padding-right: 4px;
  gap: 4px;
  /* fix Safari */
  position:relative;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  }

  div.news-telex div.auteur-date-article {
    /* position: absolute; */
    transform: unset;
    background:none;
  }

  body.darkmode div.auteur-date-article, body.darkmode div.auteur-date-article span.auteur-article, body.darkmode div.auteur-date-article span.auteur-article a {
    color: #FFFDEC;
    background: #21000B;
  }
  
  div.news-telex div.auteur-date-article {
    /* position: absolute; */
    transform: unset;
    background:none;
  }

  span.auteur-article {
  color: #21000B;
  }
  
  span.date-article, div.main-container a.number, div.main-container .actions a, td.post-title a {
  color: #A55FFF;
  }
  
  div.derniers-articles-item div.derniers-articles-img, div.jdp-item div.jdp-img, div.hardware-item div.hw-img, div.last-guides-achats-item div.hw-img, div.annonce-item div.annonce-img, div.annonce-item div.hw-img, div.discover-cpc-item div.discover-cpc-img, div.discover-cpc-item div.derniers-articles-img, div.discover-cpc-item div.hw-img, div.discover-cpc-item div.jdp-img , div.articles-populaires-item div.derniers-articles-img, div.last-guides-achats-item div.jdp-img, div.annonce-item div.jdp-img, div.category-list-item div.derniers-articles-img, div.more-posts-item div.derniers-articles-img, div.guide-achat-item .hw-img, .evergreen-item .derniers-articles-img  {
  z-index: 1;
  display: grid;
  }


  footer {
  margin-top: 16px;
  grid-area: footer;
  height: 300px;
  background: linear-gradient(267.15deg, rgba(18, 14, 21, 0.9) 43.49%, #21000B 97.64%), url(/content/themes/canard-pc/dist/img/croix-header-footer.png), #151515;
  }
  
  body.darkmode div.second-bloc, body.darkmode div.annonce-container, body.darkmode div.non-connecte-container, body.darkmode div.layout-framed, body.darkmode div.post-conclusion, body.darkmode div.technical-description, body.darkmode div.connexion, body.darkmode div.article-footer, body.darkmode .table-container table thead, body.darkmode div.news-telex, body.darkmode div.container-articles-author {
    background: linear-gradient(267.46deg, rgba(28, 16, 40, 0.9) 43.26%, #1D1A16 96.29%), url(/content/themes/canard-pc/dist/img/763796cad2f965e120dae476292556b5.png);
  }

  body div.jdp div.troisieme-bloc div.annonce-container {
    background: none;
  }
  
  div.footer-container {
    height: 268px;
    padding:16px;
    color: #FFFDEC;
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content;
    grid-gap:16px;
    grid-template-areas:
      "logo-footer about-cpc"
      "rs-cpc rs-cpc"
      "copyright-cpc links-cpc";
      max-width: calc(100vw - 32px);
  }
  
  footer a {
    color: #FFFDEC;
  }

  footer ul {
    margin: 0;
    padding: 0;
  }

  footer ul li {
    list-style: none;
  }
    
    footer div.logo-container {
      grid-area:logo-footer;
      align-self: end;
    }
    
    footer div.about-cpc {
      grid-area:about-cpc;
      display:flex;
      flex-direction: column;
      justify-self: end;
      align-items: start;
    }
    
    #copyright-footer {
      grid-area:copyright-cpc;
          align-self:center;
    }
    
    #legal-footer {
      grid-area:links-cpc;
          align-self:center;
      justify-self: end;
    }

    footer div#icones-footer {
      grid-area:rs-cpc;
      height: 40px;
      fill: #fff;
      align-items: center;
      display:flex;
      align-self:end;
      justify-self:center;
    }
    
    footer div#icones-footer ul, footer div#icones-footer div {
      display:flex;
      margin:0px;
      padding:0px;
      align-self: center;
      flex-wrap:wrap;
      justify-content: center;
    }
    
    footer div#icones-footer ul li, footer div#icones-footer ul li div, footer div#icones-footer span, footer div#icones-footer span div  {
      list-style:none;
      height:46px;
      fill: #fff;
    }
    
    footer div#icones-footer ul li, footer div#icones-footer span {
      margin-left:8px;
    }
    
    footer div#icones-footer ul li a svg, footer div#icones-footer span svg {
      height: 25px;
      
    }
    
    footer a.Body-3, footer div.Overline {
      font-weight: normal;
    }


    /**********************************/
    /* Template for default post/page */
    /**********************************/
    
    div.page-content {
      grid-area: main;
      width: calc(100% - 16px);
      min-width: 350px;
      justify-self: center;
      display: grid;
      gap: 24px;
      grid-template-columns: 1fr;
      grid-template-rows: min-content;
      grid-template-areas:
        "page-content"
        "more-articles";
        margin-top: 24px;
    }

    div.page-content.default-post {
      overflow: hidden;
    }

    .post-row {
      display: flex;
      align-items: flex-start;
      position:relative;
      background: #F4F4F2;
      /* margin-left:48px; */
      width:100%;
      flex-direction:column;
      gap: 24px;
    }

    .post-row.desktop {
      /* display:none; */
    }

    .post-row.mobile {
      display:flex;
    }

    body.darkmode .post-row {
      background: #151515;
    }

    .a-type {
      display: flex;
      width: 100%;
      /* margin-left: 24px; */
    }

    .post-row:first-child > .a-type {
      margin-left: 0px;
    }

    .post-row:first-child {
      margin-left: 0;
    }

    .b-type {
      display: flex;
      flex-direction: column;
      position: relative;
    /* right: 0px; */
    width: 100%;
    gap: 24px;
    }

    .b-type.last {
      position: relative;
      left:unset;
      /* margin-left:24px; */
    }

    blockquote {
      margin-top: -45px;
    margin-left: 0px;
    }

    blockquote p {
      font-family: Obviously;
      font-size: 21px;
      font-weight: 670;
      line-height: 33px;
      letter-spacing: 0px;
      text-align: left;
      color: #A55FFF;
    }

    div.page-content div.page-content-container {
      grid-area:page-content;
    }

    div.page-content div.container {
      grid-area:more-articles;
    }

    div.page-content div.article-cover, div.page-cover, div.page-content-container div.article-cover {
      min-height: 322px;
      background: #D9D9D9;
      display: flex;
      align-items: end;
      justify-content: start;
      grid-area:cover-img;
    }

    div.article-cover div.main-layer-img, div.page-img {
      position: relative;
      display: inline-block;
      width: 100%;
      height: 100%;
    }

    div.right_col div.page-cover div.page-img {
      height: 421px;
    }

    figure {
      position: relative;
      display: inline-block;
      width: 100%;
      margin: 0px;
      overflow:hidden;
    }

    figure.layout-photo img {
      -webkit-transform: scale(1.05);
      transform: scale(1.05);
      -webkit-transition: .3s ease-in-out;
      transition: .3s ease-in-out;
    }

    figure.layout-photo:hover img {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
    div.post-slideshow {
      position: relative;
      display: grid;
      width: 100%;
      flex-direction: column;
      grid-gap:24px;
    }

    div.post-slideshow figure {
      margin: 0;
    }

    div.post-slideshow img {
      margin-bottom: 24px;
    }

    div.post-slideshow img:last-of-type {
      margin-bottom: 0px;
    }

    figcaption {
      position: absolute;
      bottom: 0px;
      background: #F4F4F2;
    }

    figcaption.Subtitle-3, .gslide-desc {
      font-size:12px;
      line-height:18px;
      padding-right: 8px;
      padding-left: 4px;
    }

    body.darkmode figcaption.Subtitle-3, .gslide-desc {
      color: #21000B;
    }

    div.article-cover div.main-layer-img img, figure img, div.post-slideshow img, div.page-img img {
      width: 100%;
      height: 100%;
      object-position: center;
      object-fit: cover;
      aspect-ratio: 601/338;
      z-index: 1;
      display:flex;
    }

    div.page-content div.main-cartouche, div.page-cartouche, div.page-content-container div.main-cartouche, div.page-content-container div.main-cartouche {
      display: flex;
      position: absolute;
      align-self: end;
      justify-self: start;
      z-index: 5;
      flex-direction: column;
      justify-items: start;
      max-width: calc(100% - 16px);
    }

    div.page-content-container div.main-cartouche {
      margin-bottom: 24px;
    }

    div.layout-config-right-col {
      display: grid;
      grid-template-columns: 1fr;
      grid-gap: 16px;
      grid-template-areas: 
      "illus"
      "infos";
  }

  div.layout-config-image-container {
    grid-area: illus;
    display: grid;
    /* height: 570px; */
}

    div.layout-config-price {
      position: absolute;
      background: var(--hw-primary);
      display: flex;
      padding: 4px 8px 4px 8px;
      color: #ffffff;
  }

  div.layout-config-picto {
    position: absolute;
    display: flex;
    align-self: end;
    justify-self: end;
    }

    ul.layout-config-components {
      grid-area: infos;
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 8px;
    }

    li.layout-config-component {
      display:flex;
      flex-direction: column;
      gap: 12px;
    }

    div.left_col div.layout-o-products div.layout-framed-content {
      display: grid;
      grid-template-columns: 1fr;
      /* gap: 16px; */
  }

    div.page-content div.main-cartouche div.article-category {
      position: relative;
    }

    div.page-content div.main-cartouche div.main-article-titre, div.page-content-container div.main-article-titre, div.page-content-container div.main-cartouche div.main-article-titre {
      margin-top: 16px;
      /* background: #21000B; */
      color: #FFFDEC;
      padding-right: 8px;
      width: fit-content;
    }

    span.layout-content-title:first-of-type {
      margin-top: 16px;
      /* background: #21000B; */
      color: #FFFDEC;
      padding-right: 8px;
      width: fit-content;
    }

    div.page-informations {
      padding-left: 40px;
    }

    div.left_col div.page-informations .layout-content-title:first-of-type {
      display:none;
    }

    div.page-content div.main-cartouche div.main-article-soustitre, div.page-content-container div.main-cartouche div.main-article-soustitre {
      margin-top: 16px;
      /* background: #21000B; */
      color: #FFFDEC;
      /* padding-left: 40px; */
      padding-right: 8px;
      width: fit-content;
      margin-bottom: 36px;
    }

    .boxed, span.layout-content-title:first-of-type {
      box-shadow: inset 0 -1.18em 0 0 #21000B;
      padding-left: 40px;
    padding-right: 8px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    }

    .boxed, span.layout-content-title:first-of-type.Headline-1, div.pave-article-titre span.Headline-1 {
      /* font-size: 2.4rem; */
      font-size: 1.8rem;
      word-break: break-word;
    }

    .boxed.Headline-2 {
      /* font-size: 1.82rem; */
      font-size: 1.50rem;
    }

    /*div.post-content {
      display:grid;
      grid-template-columns: 1fr;
      grid-template-rows: min-content;
      grid-template-areas:
      "post-infos"
      "post-content"
      "post-conclusion";
      grid-gap:24px;
    }*/

    div.post-content {
      display:grid;
      grid-template-columns: 1fr;
      grid-template-rows: min-content;
      grid-template-areas: 
      "left-section";
    }

    div.left_section {
      grid-area:left-section;
      display:grid;
      grid-template-columns: 1fr;
      grid-template-rows: min-content;
      grid-template-areas:
      "post-content";
      /* grid-gap:24px; */
    }

    div.right_section {
      grid-area:right_section;
      display:grid;
      grid-template-columns: 1fr;
      grid-template-rows: min-content;
      grid-template-areas:
      "encarts"
      "slideshow";
      /*align-content:space-between;*/
      grid-gap:24px;
    }

    div.right_section.no-slideshow {
      grid-template-areas: 
      "slideshow"
      "encarts"
      "encarts";
    }

    div.post-conclusion-header, div.post-conclusion-content {
      padding-left: 8px;
      padding-right: 8px;
    }
    
    div.encarts {
    grid-area:encarts;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    gap:24px;
    margin-top:24px;
    }

    div.layout-citation figure svg {
      margin-left: 0px;
    }

    body.darkmode div.layout-citation figure svg path {
      fill: #E5E5E5;
    }

    div.right_section.no-slideshow div.encarts {
      margin-top: 0;
    }

    div.encarts div.layout-framed {
      display:none;
    }

    div.post-informations {
      grid-area: post-infos;
    }

    div.post-informations, div.layout-text, div.layout-intertitle, div.layout-citation {
      margin-left:8px;
      margin-right: 8px;
    }

    div.post-informations span.auteur-article, div.post-informations span.date-article, div.post-conclusion span.date-article, div.post-conclusion span.auteur-article {
      font-size: 12px;
    }
    div.post-informations span.auteur-article a, div.post-conclusion span.date-article a, div.post-conclusion span.auteur-article a, div.more-posts-item span.auteur-article a {
      color: #21000B;
    }

    div.post-informations span.date-article p, div.post-conclusion span.date-article p {
      display: inline-flex;
      color: rgba(33, 0, 11, 0.5);
      font-size: 12px;
    }

    body.darkmode div.post-conclusion span.auteur-article a, body.darkmode div.news-telex a, body.darkmode div.post-informations span.date-article p, body.darkmode div.post-conclusion span.date-article p {
      color: #FFFDEC;
    }
    
    div.post-informations p.post-header {
      margin-top: 16px;
    }

    div.layout-text + div.layout-intertitle {
      /* margin-top: 24px; */
    }

    div.post-layouts {
      display:grid;
      grid-gap:24px;
      grid-area: post-content;  
    }

    div.post-row {
      order: 1;
    }

    div.post-row.desktop {
      order: 2;
    }

    div.post-row.desktop .a-type {
      display:none;
    }

    h4.layout-framed-title, h4.post-conclusion-header-title, h4.layout-framed-title.Headline-4 {
      padding-top:12px;
    }

    h4.layout-framed-title, h4.layout-framed-title.Headline-4 {
      padding-left:24px;
    }

    p.layout-framed-content.Body-3, div.post-conclusion-content.Body-3, div.post-note-content.Body-3, div.technical-description.Body-3, p.layout-framed-content {
      font-size: 18px;
      line-height: 32px;
      padding-bottom: 12px;
      padding-top: 12px;
      padding-left: 8px;
      padding-right: 8px;
    }

    div.post-note-content.multi {
      flex-direction: column;
    gap: 16px;
}

    div.post-note-content.Body-3 svg.dark, body.darkmode div.post-note-content.Body-3 svg.light {
      display:none;
    }

    body.darkmode div.post-note-content.Body-3 svg.dark {
      display: block;
    }

    body.darkmode div.post-note-content.Body-3 svg path {
      fill: #fff;
    }

    div.post-note-content.Body-3 span {
      position: absolute;
      font-size: 40px;
      max-width: 100px;
      margin-top: 10px;
      text-align:center;
      width: 100%;
      text-wrap:nowrap;
    }

    span.Preview.chantier {
      margin-left: 100px;
    }

    div.technical-description strong, div.technical-description b {
      color: #A55FFF;
    }

    div.post-conclusion-content.Body-3 {
      padding-top: 12px;
    }
    div.post-note-content {
      padding-top: 5px;
      display:flex;
    }

    div.post-note-content span {
      margin-top: 5px;
    }

    div.post-conclusion {
      grid-area: post-conclusion;
    }

    div.post-side-content {
      display:none;
    }

    div.article-footer {
      display:grid;
      width:100%;  
      grid-area:article-footer;
      justify-content:center;
    }

    div.article-footer div.container {
      display: grid;
    }

    div.more-posts {
      display:grid;
      grid-gap: 24px;
      margin-bottom: 24px;
      padding-left: 24px;
      padding-right: 24px;
      justify-self: center;
      justify-content: center;
      max-width:1920px;
    }

    div.post-features {
      grid-area:features;
      width:100%;
      justify-content:center;
      display:grid;
      margin-bottom:16px;
      margin-top:16px;
    }

    div.post-features.hash-back {
      margin-bottom: 24px;
      z-index: 600;
      background: var(--background);
    }

    div.post-features.hash-back::before {
      content: " ";
      background: linear-gradient(180deg, rgba(244, 244, 242, 0.00) 0%, #F4F4F2 50%);
      z-index: 250;
      width: 100%;
      height: 195px;
      position:relative;
      margin-top: -140px;
    }

    body.darkmode div.post-features.hash-back::before {
      background: linear-gradient(180deg, rgba(244, 244, 242, 0.00) 0%, #151515 50%);
    }

    div.post-features.hash-back div.post-features-container {
      display:grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: min-content;
      grid-template-areas: 
      "features-header features-header features-header features-header"
      "features-item1 features-item1 features-item2 features-item2";
      padding: 24px;
      grid-gap:24px;
      max-width: 1872px;
    }

    div.premium-content-header {
      grid-area: features-header;
    }

    div.premium-access {
      grid-area: features-item1;
      align-content:start;
    }

    div.premium-access a.Button {
      /* padding-bottom: 0px;
      max-height: 30px; */
    }

    div.free-access {
      grid-area: features-item2;
      align-content: space-between;
    }

    div.access-features {
      display: grid;
      grid-gap: 16px;
      margin-bottom: 16px;
    }

    .subscribe-now {
      text-align:center;
    }

    #PostSidebar {
      display: grid;
      grid-template-columns: 1fr;
      margin-top:16px;
      margin-bottom: 16px;
      grid-gap:16px;
      justify-content: center;
      z-index: 600;
    }

    div.widget-content {
      display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    grid-gap:16px;
    }

    .top-votes-link, .top-whines-link, .page-content a, .news-img .auteur-article a:hover, div.result-img, div.vote-img, div.whine-img, div.post-informations span.auteur-article a:hover {
      color: #A55FFF;
    }

    .page-content a:hover {
      color: #6B40A0;
    }

    .page-content div.article-cover div.main-cartouche a:hover {
     color: var(--cpc-on-primary);
    }

    .widget-description {
      text-align:center;
    }

    .vote-widget, .whine-widget, .share-widget, .premium-access, .free-access {
      display:grid;
      justify-items:center;
      grid-gap: 16px;
      text-align: center;
    }

    div.grid-container {
      /* margin-top: 24px; */
      grid-area: minimal;
      /*grid-gap:24px;*/
      display:grid;
      grid-template-columns: 1fr;
      margin-left:8px;
      margin-right: 8px;
      max-width: calc(100vw - 16px);
    }

    div.grid-container.two_cols {
      grid-template-columns: 1fr;
      grid-template-areas: 
      "left-col"
      "right-col";
    }

    .left_col {
      grid-area: left-col;
      display:flex;
      flex-direction: column;
      gap:24px;
      max-width: calc(100vw - 16px);
    }

    .right_col {
      grid-area: right-col;
      display:flex;
      flex-direction: column;
      gap:24px;
    }

    div.right_col div.layout-image figure img {
      max-width:100%;
    }

    .download_layer {
      position: fixed;
      top: 160px;
      width: 355px;
      height: 100px;
      display: grid;
      justify-content: center;
      align-content: center;
      z-index:500;
    }
  
    /*** ProgressBar ***/

    body.jeu-video progress.readingProgressbar {
      color:#E8111F;
    }

    body.jeu-video .readingProgressbar::-webkit-progress-value {
       background-color: #E8111F !important; 
    }

    body.jeu-video .readingProgressbar::-moz-progress-bar { 
      background-color: #E8111F !important;
    }

    body.jeu-de-plateau progress.readingProgressbar {
      color: #C0A64B;
    }

    body.jeu-de-plateau .readingProgressbar::-webkit-progress-value {
      background-color: #C0A64B !important; 
   }

   body.jeu-de-plateau .readingProgressbar::-moz-progress-bar { 
     background-color: #C0A64B !important;
   }

  body.hardware progress.readingProgressbar {
      color: #1CA74C;
    }

    body.hardware .readingProgressbar::-webkit-progress-value {
      background-color: #1CA74C !important; 
   }

   body.hardware .readingProgressbar::-moz-progress-bar { 
     background-color: #1CA74C !important;
   }

    body.hardware.darkmode progress.readingProgressbar {
      color: #1A9443;
    }

    body.hardware.darkmode .readingProgressbar::-webkit-progress-value {
      background-color: #1A9443 !important; 
   }

   body.hardware.darkmode .readingProgressbar::-moz-progress-bar { 
     background-color: #1A9443 !important;
   }

    body.jeu-video.darkmode progress.readingProgressbar {
      color:#CE2217 ;
    }

    body.jeu-video.darkmode .readingProgressbar::-webkit-progress-value {
      background-color: #CE2217 !important; 
   }

   body.jeu-video.darkmode .readingProgressbar::-moz-progress-bar { 
     background-color: #CE2217 !important;
   }

    body.jeu-de-plateau.darkmode progress.readingProgressbar {
      color: #A79249;
    }

    body.jeu-de-plateau.darkmode .readingProgressbar::-webkit-progress-value {
      background-color: #A79249 !important; 
   }

   body.jeu-de-plateau.darkmode .readingProgressbar::-moz-progress-bar { 
     background-color: #A79249 !important;
   }

    /*** Locomotive ***/

    .locomotive-navigation {
      position: fixed;
      bottom:0;
      left:0;
      width:100%;
      /* background: linear-gradient(243.04deg, rgba(28, 16, 40, 0.5) 20.82%, #1D1A16 60.59%), url(/content/themes/canard-pc/dist/img/croix-header-footer.png), #151515; */
      /* background: #151515; */
      min-height:70px;
      display:flex;
      /*grid-template-columns: 1fr 4fr 1fr;*/
      justify-content: end;
      align-content: center;
      z-index:10000;
    }

    .locomotive_prev {
      margin-left: 24px;
      justify-self:start;
    }

    .locomotive_next {
      margin-right: 24px;
      text-align:right;
      justify-self:end;
    }

    .locomotive_prev, .locomotive_next, .locomotive_next div, .locomotive_prev div {
      display:flex;
      align-items: center;
      gap: 8px;
    }

    .locomotive_next span.locomotive-post-title, .locomotive_prev span.locomotive-post-title {
      display: none;
    }

    div.locomotive_section {
      width: 100%;
      display: flex;
      justify-items: flex-end;
      justify-content: end;
      /* min-height: 60px; */
      margin-right: 0px;
    }

    .locomotive_title {
      display: grid;
    justify-content: center;
    align-items: center;
    background: linear-gradient(243.04deg, rgba(28, 16, 40, 0.5) 20.82%, #1D1A16 60.59%), url(/content/themes/canard-pc/dist/img/croix-header-footer.png), #151515;
    width:100%;
    }

    div.locomotive-toggle {
      position: absolute;
    margin-top: -45px;
    margin-right: 10px;
    justify-self: end;
    display: flex;
    }

    div.locomotive-sommaire {
      display:flex;
      flex-direction: column;
      justify-content: center;
      align-items: start;
      max-height:0px;
      overflow: hidden;
    }

    .locomotive-navigation a span {
      color: #FFFDEC;
      display: inline-flex;
      font-size: 14px;
      font-weight: normal;
    }

    div.locomotive-container {
      display:grid;
      transition: ease-in-out 0.5s;
      width: 100vw;
    }

    div.locomotive-container.active div.locomotive-sommaire {
      max-height: 100%;
      margin-bottom: 12px;
    }

    div.locomotive-container.active div.locomotive-sommaire a {
      margin-left: 24px; 
    }

    div.locomotive-container.active div.locomotive-toggle {
      transform: rotate(180deg);
    }

    .locomotive-navigation a span {
      /* display:none; */
    }

    div.page-content .locomotive_title h4.Headline-4 {
      color: #fff;
      margin:0;
      padding-right: 60px;
      padding-left: 5px;
      text-align:center;
    }

    div.page-content .Headline-4, h4.layout-framed-title.Headline-4 {
      font-size: 14px;
      /* margin-bottom: 12px; */
    }

   /***********  Template News **************/

   div.page-content.news-post {
    grid-template-areas: "news-container";
    grid-template-columns: 1fr;
    justify-content:center;
    max-width: 900px;
   }

   div.news-container {
    /*width: 100%;*/
   }

   div.news-container::after {
    content: '';
    display: block;
    clear: both;
   }

   #news-item-focus {
    box-sizing: border-box;
   }

   div.news-item, div.result-item, div.vote-item, div.whine-item {
    /* width: 450px; */
    background: #ffffff;
    margin-bottom: 32px;
    max-width: min(100%, 450px)
   }

   div.vote-item, div.whine-item {
    max-width: 100%;
   }

   div.news-item {
    max-width: min(100%, 900px);
   }

   body.darkmode div.news-item, body.darkmode div.result-item, body.darkmode div.vote-item, body.darkmode div.whine-item {
    background: #000000;
   }

   body.darkmode div.news-item {
    background: #000000;
    color: #FFFDEC;
   }

   div.news-informations, div.news-content, div.result-informations, div.result-content, div.vote-informations, div.vote-content, div.whine-informations, div.whine-content {
    margin-bottom: 8px;
    margin-left: 8px;
    margin-right: 8px;
   }

   div.news-telex h5.preview {
    padding-bottom: 8px;
    padding-left: 8px;
    padding-right: 8px;
   }

   div.vote-informations, div.whine-informations {
    height: 75px;
   }

   div.news-telex div.news-informations {
    margin-bottom:0px;
   }

   div.news-share {
    display: flex;
    position: absolute;
    align-self: start;
    justify-self: end;
   }

   div.news-share.Button {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 4px;
    padding-bottom: 10px;
   }

   div.news-share.Button svg {
    width: 36px;
    height: 20px;
   }

   div.news-img img, div.result-img img, div.vote-img img, div.whine-img img {
    object-fit: cover;
    aspect-ratio: 290/163;
    width: 450px;
    height: 253px;
    min-height: auto;
    max-width:100%;
   }

   div.news-img img, div.vote-img img {
    width:100%;
   }

   #news-item-focus div.news-img img  {
    width: 442px; 
   }

   div.result-img a, div.vote-img a, div.whine-img a {
    display: flex;
   }

   div.news-content p.preview {
    display:block;
    overflow:auto;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    max-height:100%;
   }

   div.news-content p.preview.Body-1 {
    font-size: 16px;
   }

   div.news-content p.preview a, div.news-telex a:hover, div.result-content p.preview a, div.vote-content p.preview a, div.whine-content p.preview a, div.locomotive-sommaire a:hover span {
    color:#A55FFF;
   }

   div.page-content div.locomotive-sommaire a.active:hover span {
    color:#FFFDEC;
   }

   div.locomotive-sommaire a.active span {
    font-weight: bold;
   }


   #news-item-focus {
    border:4px solid #A55FFF;
   }

   div.news-item div.news-header div.news-img, div.result-item div.result-header div.result-img, div.vote-item div.vote-header div.vote-img, div.whine-item div.whine-header div.whine-img {
    display:grid;
   }

   div.news-telex {
    background: linear-gradient(284.74deg, rgba(245, 245, 239, 0.8) 57.65%, #FFFFFF 92.52%), url(/content/themes/canard-pc/dist/img/e72e9250b06dade2bd13c43e57d96efe.png);
    /* background: linear-gradient(350deg, rgba(245, 245, 239, 0.50) 0%, #FFF 100%), url(/content/themes/canard-pc/dist/img/e72e9250b06dade2bd13c43e57d96efe.png), lightgray 0% 0% / 10.000000149011612px 10.000000149011612px repeat; */
   }

   div.news-telex a h5.preview {
    /* padding-top: 45px; */
    padding: 30px 8px 8px;
   }

   div.news-telex a, .news-img .auteur-article a, div.result-img .auteur-article a, div.vote-img .auteur-article a, div.whine-img .auteur-article a  {
    color:#21000B;
   }

   body.darkmode .news-img .auteur-article a {
    color: #FFFDEC;
   }

   div.news-telex div.news-share {
    right:0;
   }

   .btn--disabled, div.main-container a.btn--disabled {
    background: #B4B4B1;
    color: #5B5168;
    cursor: not-allowed;
   }

   .share-code, .username_input {
    font-family: Obviously;
    font-size: 0.91rem;
    font-weight: 560;
    line-height: 1.41rem;
    letter-spacing: 0px;
    text-align: center;
    cursor: pointer;
    padding-top: 5px;
    padding-bottom: 8px;
   }

   input#shareCode {
    margin-bottom: 16px;
   }

   .username_input {
    text-align: left;
   }

   /*****************************************/
   /***** Page 404 **************************/
   /*****************************************/

   div.screen {
    margin-top: 140px;
   }

   .error-404 {
    width: 100%;
   }

   .error-404 svg {
    width:90%;
   }
   
   body.darkmode .error-404 svg path  {
    fill: #FFFDEC;
   }

   body.darkmode .error-404 svg ellipse {
    stroke: #FFFDEC;
   }

   body.darkmode .error-404 svg g ellipse {
   stroke: #E8111F;
   }

   body.darkmode .error-404 svg mask path {
    fill: #21000B;
   }

   .backto, .legend404 {
    justify-content: center;
    display:flex;
   }

   .backto {
    margin-top: 100px;
   }

   .legend404 {
    flex-direction: column;
    align-items:center;
    padding-left: 8px;
    padding-right: 8px;
   }

   .backto a.Button {
    color: #F4F4F2;
   }

   .rot1 {
    display:none;
   }

   .rot2 {
   display:none;
   }

   .legend404 em {
    font-style: normal;
   }

  /*****************************************/
  /***** Maintenance  **********************/
  /*****************************************/

  body.maintenance-page {
    width: 100vw;
    height: 100vh;
    background: url(https://cdn.canardware.com/2021/05/09211325/verticalBG_home_generale-web.jpg) center no-repeat;
  }

  body.maintenance-page.error {
    background: url(/content/themes/canard-pc/dist/img/page-erreur-server.jpg) center no-repeat;
    background-size: cover;
  }

  body.maintenance-page div.container {
    display: flex;
  flex-direction: column;
  justify-self: center;
  align-self: center;
  height: 100vh;
  align-items: center;
  justify-content: center;
  margin-left: 24px;
  margin-right: 24px;
  }

  body.maintenance-page.error div.container {
    justify-content: unset;
  }

  body.maintenance-page.error div.container img.custom-logo {
    margin-top: 24px;
  }

  body.maintenance-page.error progress {
    display:none;
  }


  body.maintenance-page div.container div img {
    max-width: 100%;
    object-fit: contain;
  }

   /**************************************/
   /******** Login *******************/
   /*************************************/

   #Login {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content;
    grid-template-areas: 
    "connexion" 
    "inscription";
    justify-content: center;
    filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 0.15));
    grid-gap:24px;
   }

   .inscription, .connexion {
    width: min(100vw, 600px);
    padding:24px;
    justify-self: center;
   }

   .inscription h5.Headline-5 {
    color: #fff;
    text-align: center;
   }

   .inscription {
    grid-area:inscription;
    display:grid;
    align-content: space-between;
    justify-content: center;
    background: #848484;
    grid-gap:16px;
    background: linear-gradient(180deg, rgba(18, 14, 21, 0.4) 43.49%, #21000B 97.64%), url(/content/themes/canard-pc/dist/img/subscribe-now.png);
    background-size: cover;
   }

   .inscription .Button-Grey {
    text-transform: uppercase;
    color: #fff;
    border: 1px solid #FFF;
    display:flex;
    justify-content: center;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
cursor: pointer;
    font-family: Obviously;
    font-size: 20px;
    font-style: normal;
    font-weight: 560;
    line-height: normal;
    text-transform: uppercase;
    color: #fff;
   }

   .connexion {
    grid-area: connexion;  
    display: grid;
    justify-content:start;
    grid-template-columns: 1fr;
   }

   .connexion h5.Headline-5 {
    margin-bottom: 16px;
    margin-left: 8px;
    margin-right: 8px;
   }

   .connexion form {
    display:grid;
    grid-template-columns: 1fr;
    grid-gap: 16px;
    margin-left: 8px;
    margin-right: 8px;
   }

   .connexion .alert-danger {
    color: #E8111F;
   }

   .input-group {
    display: flex;
    width:100%;
    align-items: center;
   }

   .input-group input {
    padding-right: 24px;
    height: 48px;
    flex:1;
    padding-left: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
    box-sizing:border-box;
   }

   .switch {
    display: flex;
    align-items: center;
   }

   .switch input[type=checkbox] {
    /*width: 20px;
    height: 20px;
    border: 0;
    margin: 0;*/
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
   }

   .checkmark {
    /*position: absolute;*/
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
  }

  .checkmark:after {
    content: "";
    /*position: absolute;*/
    display: none;
  }

  .checkmark:after {
    position:relative;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }

   .switch input:checked ~ .checkmark {
    background-color: #7000FF;
   }

.container input:checked ~ .checkmark:after {
  display: block;
}

   .switch span {
    margin-left: 8px;
   }

   .switch span:first-of-type {
    margin-left: 0;
   }

   .sub-options {
    display:flex;
    align-items: center;
    justify-content: space-between;
   }

   .actions {
    display: flex;
   }

   .connexion button.Button {
    border: 0;
    text-align: center;
   }

   /***************/
    /*** Profil ***/
    /**************/

    
    #Profile {
      grid-area:minimal;
      justify-self: center;
      display:grid;
      grid-template-columns: 1fr;
      grid-template-rows: min-content;
      grid-template-areas: 
      "profil"
      "powers"
      "chouinage";
      grid-gap:48px;
      margin-top:42px;
      font-family: Merriweather;
      font-size: 22px;
      font-style: normal;
      font-weight: 700;
      line-height: 32px;
      margin-left:8px;
      margin-right:8px;
    }

    .profil-infos {
      grid-area:profil;
      display:grid;
      grid-template-columns: 1fr;
      grid-template-rows: min-content;
      grid-template-areas: 
      "infos-h"
      "infos-perso"
      "infos-abos";
      grid-gap:24px;
    }

    .profil-infos h3 {
      grid-area:infos-h;
    }

    .input-group {
      margin-top: 16px;
    }

    .input-group span, .email span {
      margin-bottom: 16px;
      margin-right: 16px;
    }

    div.infos-perso .input-group span, div.infos-perso .email span {
      margin-bottom: 0px;
    }

    .infos-perso {
      grid-area:infos-perso;
    }

    .infos-abos {
      grid-area:infos-abos;
      display: grid;
      grid-template-rows: min-content;
      grid-template-columns: 1fr;
      grid-gap:16px;
    }

    .infos-abos a.Button {
      color: #F4F4F2;
    }

    .profil-powers {
      grid-area:powers;
      display:grid;
      grid-template-columns: 1fr;
      justify-content: center;
      grid-template-areas: 
      "powers-h"
      "power-1"
      "power-2"
      "power-3";
      grid-gap:24px;
    }

    .profil-powers h3 {
      grid-area:powers-h;
    }
    #power1 {
      grid-area:power-1;
    }
    #power2 {
      grid-area:power-2;
    }
    #power2 {
      grid-area:power-2;
    }

    .user-power {
      display:grid;
      justify-items: center;
      grid-template-columns: 1fr;
      grid-template-rows: min-content;
      text-align:center;
      grid-gap:16px;
    }

    .user-power .share-code, .username_input {
      display:grid;
      justify-items: center;
      grid-gap:16px;
    }

    .username_input {
      max-width:50%;
    }

    .profil-articles {
      grid-area:chouinage;
      display:grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: min-content;
      grid-template-areas: 
      "chouiner-h chouiner-h chouiner-s"
      "chouiner-t chouiner-t chouiner-t";
      grid-gap:24px;
    }

    .profil-articles h3 {
      grid-area:chouiner-h;
    }
    .profil-articles input {
      grid-area:chouiner-s;
    }
    .profil-articles .table-chouiner {
      grid-area:chouiner-t;
    }

    .table-container table {
      width:100%;
      padding-left: 16px;
      padding-right: 16px;
    }

    th.center, td.center  {
      text-align:center;
    }

    .table-container table td {
      padding-top: 8px;
      padding-bottom: 8px;
    }

    #UserSharedPosts .pagination {
      display:flex;
      justify-content: end;
      margin-top: 16px;
    }

   div.author-container {
    margin-top:24px;
    display:grid;
    /*grid-gap:48px;*/
    grid-template-columns: 1fr;
    grid-template-rows: min-content;
    grid-template-areas: 
    "author-h"
    "author-a";
    justify-self:center;
    justify-content: center;
   }

   div.author-details {
    background: #F4F4F2;
    margin-left: 0px;
    padding:0px;
   }

   div.author-header {
    grid-area:author-h;
    display:flex;
    flex-direction: column;
    align-items: center;
   }

   .author-title {
    margin-bottom:0px;
    display:flex;
    align-items:baseline;
    justify-content: center;
   }

   .author-title svg {
    width:30px;
    height:30px;
    margin-left:16px;
   }

   .author-biography {
    display:flex;
    justify-content: center;
   }

   div.container-articles-author {
    display:grid;
    padding-left: 8px;
    padding-right: 8px;
   }

   div.derniers-articles-author {
    padding-bottom: 16px;
    padding-bottom: 16px;
    grid-area:author-a;
    display:grid;
    grid-template-columns: 1fr;
    /*justify-self:center;*/
    grid-gap:16px;
   }

   div.liste-articles-author {
    display:grid;
    grid-gap:24px;
    grid-template-columns: 1fr;
    grid-template-areas:
    "category-list-item1"
    "category-list-item2"
    "category-list-item3"
    "category-list-item4";
   }
  
    img.author-avatar {
      width:365px;
      height:365px;
      border-radius:100%;
    }

    body.darkmode div.author-details {
      background:#000;
     }

  /*** Search results ***/

  div.search-page-content {
    grid-area: minimal;
    max-width:450px;
  }

  .search-title {
    margin-top:24px;
    margin-bottom: 24px;
  }

  /***** Classement *****/

  .post-position {
    padding: 4px 8px;
    background: #A55FFF;
    display: flex;
    position: absolute;
    align-self: start;
    justify-self: start;
    min-width: 54px;
    color: #fff;
    justify-content:center;
  }

  .post-votes {
    display: flex;
    position: absolute;
    align-self: end;
    justify-self: end;
    color: #21000B;
    background: #F4F4F2;
    padding: 0px 4px;
  }

  .post-whines {
    display: flex;
    position: absolute;
    align-self: start;
    justify-self: start;
    color: #21000B;
    background: #F4F4F2;
    padding: 0px 4px;
  }

  div.page-cover, div.page-flex-layout {
    grid-column-start: 1;
  }

  div.page-flex-content, div.page-flex-layout.layout-framed {
    grid-column-start: 2;
  }

  div.layout-o-p-p, .layout-o-p-p-title {
    padding-top: 12px;
  }

  .layout-o-p-p-title, .layout-o-p-p-price {
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 12px;
  }

  div.layout-o-p-p-link {
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 24px;
  }

  div.layout-o-p-p img {
    width:100%;
    object-fit: cover;
  }

  div.page-cover:first-of-type, div.page-flex-content:first-of-type  {
    grid-column-start: span 2;
  }

  /**
  * Votes & Chouinages
  **/

  div.top-votes-container {
    /* max-width: calc(100vw - 48px); */
    max-width: 100%;
  }

  div.vote-content p.preview, div.whine-content p.preview {
    -webkit-line-clamp: 2;
  }
  
  h5.vote-title a, h5.whine-title a {
    display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
  }

  div.layout-config-image-container div.layout-config-img img {
    max-width: 100%;
    object-fit: cover;
    height: 100%;
}

div#live_twitch {
  position: fixed;
  /* display:flex; */
  display:none;
  bottom: 0;
  right:0px;
  z-index: 5000;
  background: #151515;
  padding: 8px;
  flex-direction: column;
  animation-name: slide;
  animation-duration: 1s;  
  animation-fill-mode: forwards;
}

@keyframes slide {
  from {width: 0px;}
  to {width: 200px;}
}

div#live_twitch a {
  display:flex;
}

div#live_twitch a img {
  width: 200px;
}

div#live_twitch a span {
  position: absolute;
    left: 10px;
    align-self: end;
    color: white;
    margin-bottom: 5px;
}

div.live_popin {
  display: inline-flex;
  margin-top: 8px;
  animation-name: pop;
  animation-duration: 250ms;  
  animation-fill-mode: forwards;
  animation-delay: 1s;
}

div.live_popin span {
  font-size: 10px;
  color: white;
  text-wrap: nowrap;
}

@keyframes pop {
  from {display: none;}
  to {display: inline-flex;}
}

/* Vignettes */

div.preview-vignettes-page {
  display: flex;
  /* width:100%;
  height:100%; */
  margin: 0;
  padding: 0;
}

div.main_preview_desktop main, div.main_preview_desktop main img  {
  max-height: 616px;
  width: 924px;
}

div.main_preview_intermediaire main, div.main_preview_intermediaire main img  {
  width: 604px;
  max-height: 616px;
}

div.main_preview_desktop main div.main-cartouche {
  max-width: 924px;
}

div.main_preview_intermediaire main div.main-cartouche {
  max-width: 604px;
}

div.main_preview_intermediaire div.derniers-articles-item div.derniers-articles-img {
  width: 290px;
}

div.main_preview_intermediaire main div.main-article-titre {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

div.main_preview_intermediaire div.article-category span {
  margin-left: 8px;
  overflow: hidden;
  max-width: 137px;
  text-overflow: ellipsis;
  width: fit-content;
  white-space: nowrap;
}

div.main_preview_intermediaire .Headline-1 {
  line-height: 2.2rem;
}

div.main_preview_intermediaire .boxed.Headline-2 {
  font-size: 1.50rem;
}

div.vignettes_preview_desktop .derniers-articles-img img {
  object-fit: cover;
        aspect-ratio: 450 / 253;
        width: 450px;
        height: 253px;
        min-height: auto;
}

div.vignettes_preview_intermediaire .derniers-articles-img img {
  object-fit: cover;
        aspect-ratio: 290 / 163;
        width: 290px;
        height: 163px;
        min-height: auto;
}

div.vignettes_preview_intermediaire div.article-category svg {
  height: auto;
}

div.vignettes_preview_home div.article-category span {
  margin-left: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  width: fit-content;
  white-space: nowrap;
  max-width: unset;
  white-space: nowrap;
}

div.vignettes_preview_intermediaire div.article-category span {
  margin-left: 8px;
  overflow: hidden;
  max-width: 137px;
  text-overflow: ellipsis;
  width: fit-content;
  white-space: nowrap;
}

div.vignettes_preview_intermediaire div.derniers-articles-item div.derniers-articles-img {
  background: #D9D9D9;
        /* display: flex; */
        align-items: center;
        justify-content: center;
        height: 163px;
        min-height: 163px !important;
        width: 290px;
        min-width: 290px;
        overflow: hidden;
}

div.vignettes_preview_desktop div.derniers-articles-item div.derniers-articles-img {
  background: #D9D9D9;
  /* display: flex; */
  align-items: center;
  justify-content: center;
  height: 253px;
  min-height: 253px !important;
  width: 450px;
  min-width: 450px;
  overflow: hidden;
}


div.vignettes_preview {
  display:grid;
  grid-template-columns: 180px 925px 450px;
  grid-gap: 24px;
  grid-template-areas: 
  ". vignettes_preview_header_1 vignettes_preview_header_2"
  "vignette_preview_rows_1 main_preview_desktop vignette_preview_desktop"
  "vignette_preview_rows_2 main_preview_intermediaire vignette_preview_intermediaire";
}

div.vignettes_preview_header_1 {
  grid-area: vignettes_preview_header_1;
  display: flex;
  justify-content: center;
}

div.vignettes_preview_header_2 {
  grid-area: vignettes_preview_header_2;
  display: flex;
  justify-content: center;
}

div.vignettes_preview_rows_1 {
  grid-area: vignette_preview_rows_1;
  display: flex;
  justify-content: end;
}

div.vignettes_preview_rows_2 {
  grid-area: vignette_preview_rows_2;
  display: flex;
  justify-content: end;
}

div.vignettes_preview_rows_3 {
  grid-area: vignette_preview_rows_3;
  display: flex;
}

div.vignettes_preview_rows_4 {
  grid-area: vignette_preview_rows_4;
  display: flex;
}

div.vignettes_preview_desktop {
  grid-area: vignette_preview_desktop;
  display: flex;
}

div.main_preview_desktop {
  grid-area: main_preview_desktop;
  display: flex;
}

div.main_preview_intermediaire {
  grid-area: main_preview_intermediaire;
  display: flex;
}

div.main_preview_tablette {
  grid-area: main_preview_tablette;
  display: flex;
}

div.main_preview_telephone {
  grid-area: main_preview_mobile;
  display: flex;
}

div.vignettes_preview_tablette {
  grid-area: vignette_preview_tablette;
}

div.vignettes_preview_intermediaire {
  grid-area: vignette_preview_intermediaire;
}

div.vignettes_preview_telephone {
  grid-area: vignette_preview_mobile;
}

/* ********************************** */
/*   RESOLUTION MOBILE BASSE (<400px) */
/* ********************************** */

@media only screen and (max-width: 399px) {

  footer div#icones-footer ul li a svg, footer div#icones-footer span svg {
    height: 22px;
  }

  div.footer-container {
    grid-template-areas:
  "rs-cpc rs-cpc"
  "logo-footer about-cpc" 
  "copyright-cpc links-cpc";
  }

  .boxed, span.layout-content-title:first-of-type.Headline-1, div.pave-article-titre span.Headline-1 {
    font-size: 1.5rem;
  }

  div.main-container p.Headline-3, div.discover-cpc-header p:first-of-type.Headline-3 {
    font-size: 0.8rem;
}

  .Headline-1, span.layout-content-title:first-of-type {
   /* line-height: 2.8rem; */
   line-height: 2.0rem;
  }

  .boxed.Headline-2 {
    font-size: 1.4rem;
  }

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

  div.news-content p.preview {
    font-size: 16px;
  }

}

/* **************************************************** */
/*   RESOLUTION MOBILE TABLETTE (entre 745px et 1280px) */
/* **************************************************** */

  @media only screen and (min-width: 744px) {
  
    html {
      font-size:16px;
    }
  
    body {
    min-width: 744px;
  }
  
  div.premier-bloc {
    grid-template-columns: 1fr 1fr;
    grid-gap: 24px;
    grid-template-rows: min-content;
    grid-template-areas :
      "main-a main-a"
      "derniers-articles derniers-articles"
      "fil-actu fil-actu";
  }

  div.second-bloc div.Centered-container {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
    "jdp jdp"
    "hw hw";
  }

  div.troisieme-bloc {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
    "configs configs"
    "guide-achat boutique"
    "vids vids"
    "pave pave"
    "evergreen evergreen";
  }
  
  div.main-container.full-width {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }

  div.main-container.hardware div.premier-bloc {
    /*width: 60.67rem;*/
    grid-template-columns: 1fr 1fr;
    grid-template-areas :
      "main-a main-a"
      "derniers-articles derniers-articles"
      "configs configs"
      "big-guide-achat big-guide-achat";
  }
  div.main-container.hardware div.second-bloc div.centered-container {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
    "guides-achats guides-achats"
    "annonce boutique";
  }

  div.main-container.hardware div.troisieme-bloc {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
    "pave pave"
    "evergreen evergreen";
  }

  div.main-container.jdp div.premier-bloc {
    grid-template-columns: 1fr 1fr;
    grid-template-areas :
    "main-a main-a"
    "derniers-articles derniers-articles";
  } 
  
  div.main-container.jdp div.second-bloc div.centered-container {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "articles-populaires articles-populaires";
  }

  div.main-container.jdp div.troisieme-bloc {
    grid-template-columns: 1fr 1fr;
    grid-template-areas :
    "annonce boutique"
    "guides-achats guides-achats";
  }

  div.discover-cpc-container {
    grid-area:discover-cpc;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content;
    grid-template-areas:
      "discover-header discover-header"
      "discover1 discover2" 
      "discover3 discover4"
      "discover-cpc-footer discover-cpc-footer";
  }

  div.main-container.liste-categorie {
    width: calc(100% - 16px);
  }
  
  div.discover-cpc-header {
    grid-area:discover-header;
  }
  
  div.discover-cpc-footer {
    grid-area:discover-cpc-footer;
  }
  
  main {
    grid-area:main-a;
  }

  div.articles-populaires-container {
    display:grid;
    grid-gap:24px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content;
    grid-template-areas: 
    "articles-populaires-header articles-populaires-header"
    "articles-populaires-1 articles-populaires-2" 
    "articles-populaires-3 articles-populaires-4";
  }

  #articles-populaires-header {
    grid-area: articles-populaires-header;
  }
  #articles-populaires-1 {
    grid-area: articles-populaires-1;
  }

  #articles-populaires-2 {
    grid-area: articles-populaires-2;
  }

  #articles-populaires-3 {
    grid-area: articles-populaires-3;
  }

  #articles-populaires-4 {
    grid-area: articles-populaires-4;
  }

  div.last-guides-achats-container {
    grid-area:guides-achats;
    display:grid;
    grid-gap:24px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content;
    grid-template-areas:
      "guides-header guides-header"
      "last-guides1 last-guides2";
  }

  #last-guides-achats-header {
    grid-area:guides-header;
  }

  div.main-container.liste-categorie {
    margin-top: 24px;
    display:grid;
    grid-gap: 24px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content;
    grid-template-areas:
      "liste-categorie-header liste-categorie-header"
      "category-list-item1 category-list-item2" 
      "category-list-item3 category-list-item4"
      "category-list-item5 category-list-item6"
      "category-list-item7 category-list-item8"
      "category-list-item9 category-list-item10"
      "category-list-item11 category-list-item12"
      "category-list-item13 category-list-item14"
      "category-list-item15 category-list-item16" 
      "pagination pagination";
  }

  div.configs-img div.configs-cartouche, div.big-guide-achat-img div.big-guide-achat-cartouche, div.pave-img div.pave-cartouche {
    max-width: 600px;
  }
  
  
  main img, .configs-img img, .big-guide-achat-img img, .pave-img img {
    aspect-ratio:728/322;
    object-fit:cover;
    height:100%;
  }
  
  div.configs-img div.configs-layer-img, div.big-guide-achat-img div.big-guide-achat-layer-img, div.pave-layer-img {
    max-height: inherit;
}

main, .configs-img, .big-guide-achat-img, .pave-img {
  min-height: auto;
}

.derniers-articles-img img, .jdp-img img, .hw-img img, .guide-achat-img img, .boutique-img img, .videos-img img, .discover-cpc-img img {
  width: 100%;
  height:100%;
  object-fit: cover;
  aspect-ratio: 358/209;
  min-height: auto;
  }

      
  div.derniers-articles-container {
    grid-area:derniers-articles;
    grid-template-columns : 1fr 1fr;
    grid-template-rows: min-content;
    grid-template-areas :
      "article-header article-header"
      "article1 article2"
      "article3 article4"
      "article5 article6";
  }
  
  #derniers-article-header {
    grid-area:article-header;
  }
  #derniers-articles-1 {
    grid-area:article1;
  }
  #derniers-articles-2 {
    grid-area:article2;
  }
  #derniers-articles-3 {
    grid-area:article3;
  }
  #derniers-articles-4 {
    grid-area:article4;
  }
  #derniers-articles-5 {
    grid-area:article5;
  }
  #derniers-articles-6 {
    grid-area:article6;
  }
  
  #derniers-article-header p svg, div.fil-actu-container p:first-of-type svg, #jdp-plateau-header svg, #hardware-header svg, #annonce-header svg, div.configs-container svg, div.big-guide-achat-container svg, div.guide-achat-container svg, div.boutique-container svg, #videos-header svg, div.pave-container svg {
      height: 14px;
  }

  p.preview, div.post-infos p {
    max-height: 80px;
  }

  div.result-content p.preview, div.vote-content p.preview a, div.whine-content p.preview a {
    max-height: 400px;
  }

  div.videos-item p, div.post-infos p:first-of-type {
    max-height: 100px;
    word-break: break-word;
  }
  
  div.fil-actu-container {
    grid-area:fil-actu;
  }
  
  div.configs-img div.configs-cartouche, div.big-guide-achat-img div.big-guide-achat-cartouche, div.pave-cartouche {
    max-width: 600px;
  }

  div.jdp-container {
    grid-area:jdp;
    grid-gap:24px;
    grid-template-columns : 1fr 1fr;
    grid-template-rows: min-content;
    grid-template-areas :
      "jdp-h jdp-h"
      "jdp1 jdp2";
  }
  
  #jdp-plateau-header {
    grid-area:jdp-h;
  }
  #jdp1 {
    grid-area:jdp1;
  }
  #jdp2 {
    grid-area:jdp2;
  }
  
  div.hardware-container {
    grid-area:hw;
    grid-gap:24px;
    grid-template-columns : 1fr 1fr;
    grid-template-rows: min-content;
    grid-template-areas :
      "hw-h hw-h"
      "hw1 hw2";
  }
  
  
  div.videos-container {
    grid-area:vids;
    grid-gap:24px;
    grid-template-columns : 1fr 1fr;
    grid-template-rows: min-content;
    grid-template-areas :
      "vid-h vid-h"
      "vid1 vid2"
      "vid3 vid4";
  }

  div.evergreen-container {
    grid-area:evergreen;
    grid-gap:24px;
    grid-template-columns : 1fr 1fr;
    grid-template-rows: min-content;
    grid-template-areas :
      "ever-h ever-h"
      "ever1 ever2";
  }

  #evergreen-header {
    grid-area:ever-h;
  }

  #ever1 {
    grid-area: ever1;
  }
  
  #ever2 {
    grid-area: ever2;
  }

  #videos-header {
    grid-area:vid-h;
  }
  
    footer, footer a {
      color: #FFFDEC; 
    }

    footer {
      display: grid;
      max-height: 246px;
    }
    
    div.footer-container {
    height: 198px;
    padding:24px;
    justify-self: center;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 2fr 1fr;
    grid-template-areas:
      "logo-footer logo-footer about-cpc"
      "copyright-cpc links-cpc rs-cpc";
  }
    
    footer div.logo-container {
      grid-area:logo-footer;
      align-self: end;
    }
    
    footer div.about-cpc {
      grid-area:about-cpc;
      display:flex;
      flex-direction: column;
      justify-self: end;
      align-items: end;
    }
    
    #copyright-footer {
      grid-area:copyright-cpc;
          align-self:end;
    }
    
    #legal-footer {
      grid-area:links-cpc;
          align-self:end;
      justify-self: center;
    }
    
    footer div#icones-footer {
      grid-area:rs-cpc;
      background: #21000b;
      height: 40px;
      width:316px;
      fill: #fff;
      align-items: center;
      display:flex;
      align-self:end;
      justify-self:end;
    }
    
    footer div#icones-footer ul, footer div#icones-footer div {
      display:flex;
      margin:0px;
      padding:0px;
      align-self: center;
    }
    
    footer div#icones-footer ul li, footer div#icones-footer ul li div, footer div#icones-footer span  {
      list-style:none;
      height:24px;
      fill: #fff;
    }
    
    footer div#icones-footer ul li, footer div#icones-footer span {
      margin-left:8px;
    }
    
    footer div#icones-footer ul li a svg, footer div#icones-footer span a svg {
      height: 22px;
      
    }
    
    footer a.Body-3, footer div.Overline {
      font-weight: normal;
    }

    /* Template for default post/page */

    div.more-posts {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: min-content;
      grid-template-areas:
      "other-posts-title1 other-posts-title1"
      "mp-item1 mp-item2"
      "other-posts-title2 other-posts-title2"
      "mp-item3 mp-item4";
    }

    h4.other-posts-title:first-of-type {
      grid-area:other-posts-title1;
    }

    h4.other-posts-title:last-of-type {
      grid-area:other-posts-title2;
    }

    #more-posts-item1 {
      grid-area:mp-item1;
    }

    #more-posts-item2 {
      grid-area:mp-item2;
    }

    #more-posts-item3 {
      grid-area:mp-item3;
    }

    #more-posts-item4 {
      grid-area:mp-item4;
    }

    div.layout-images, div.layout-images.grid {
      display:inline-flex;
      grid-gap:8px;
    }

    blockquote p {
      font-size: 26px;
    }

    div.grid-container.two_cols {
      grid-template-columns: 1fr;
      grid-template-areas: 
      "left-col"
      "right-col";
    }

    div.grid-container {
      margin-top: 24px;
      grid-area: minimal;
      /* grid-gap: 24px; */
      display: grid;
      grid-template-columns: 1fr;
      margin-left: 24px;
      margin-right: 24px;
  }

  div.left_col div.layout-o-products div.layout-framed-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

    /*** Profil ***/

    #Login {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: min-content;
      grid-template-areas: 
      "inscription connexion";
      justify-content: center;
      filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 0.15));
      grid-gap:0px;
     }

     .inscription, .connexion {
      width: min(45vw, 600px);
      padding:24px;
     }
     
    .profil-infos {
      grid-area:profil;
      display:grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: min-content;
      grid-template-areas: 
      "infos-h infos-h"
      "infos-perso infos-abos";
      grid-gap:24px;
    }

    .inscription {
      grid-gap:0px;
    }

    .inscription .Button-Grey {
      width:min(40vw, 550px);
    }

    /*** Auteur ***/
    
    div.author-header {
      grid-area:author-h;
      display:flex;
      flex-direction: row;
      align-items: center;
     }

     div.author-details {
      background: #F4F4F2;
      margin-left: -85px;
      padding:24px;
     }
    
     .author-title {
      margin-bottom:24px;
      display:flex;
      align-items:baseline;
      justify-content:start;
     }

     .author-title svg {
      width:auto;
      height:auto;
     }

     div.container-articles-author {
      display:grid;
      width:100%;
      justify-content: center;
     }
  
     div.derniers-articles-author {
      padding-top:24px;
      padding-bottom:24px;
      grid-area:author-a;
      display:grid;
      grid-template-columns: 1fr;
      /*justify-self:center;*/
      grid-gap:24px;
     }
  
     div.liste-articles-author {
      display:grid;
      grid-gap:24px;
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
      "category-list-item1 category-list-item2" 
      "category-list-item3 category-list-item4";
     }
    
      img.author-avatar {
        width:465px;
        height:465px;
        border-radius:100%;
      }

       div.author-details {
    background: #F4F4F2;
    margin-left: -85px;
    padding:24px;
   }

   /* div.page-content.news-post {
    /* max-width: 604px; 
    max-width: 100%;
   } */

   div.result-item, div.vote-item, div.whine-item {
    width:290px;
    
   }

   div.result-item {
    width: calc((100% - 32px) / 2);
   }

  /*  div.news-item, div.news-img img {
    width: 310px;
   } */

   div.vote-img img, div.whine-img img {
    aspect-ratio: 290/163;
    width: 290px;
    height: 163px;
   } 

   div.news-content p.preview.Body-1 {
    font-size: 22px;
   }


/*** Pages & Customs modèles ***/

   div.grid-container {
    margin-left:24px;
    margin-right: 24px;
   }

/*** Locomotive ***/

div.locomotive-toggle {
  margin-top: -45px;
}

  
   div.locomotive-navigation div.locomotive_title h4.Headline-4 {
    font-size: 20px;
    margin-bottom: 12px;
  }

/*** Rechrche ***/

div.search-page-content {
  width: calc(100% - 32px);
  max-width: calc(100% - 32px);
}

  }
  
/* **************************************************** */
/*   RESOLUTION DESKTOP BASSE (entre 1280px et 1920px)  */
/* **************************************************** */

  @media only screen and (min-width: 1280px) {

    html {
      font-size: 16px;
    }

     .Headline-1 {
      /* font-size: 40px; */
      line-height: 2.2rem;
    }
/*
    .Headline-2 {
      font-size: 40px;
    }
*/
    .Headline-3 {
      font-size: 1rem;
    } 

    .Navigation-1 {
      font-size: 22px;
    }

    .Navigation-2 {
      font-size: 16px;
    }

    /***  Header ***/

    header {
      width: 100%;
      display:grid;
      grid-template-areas: "header";
      background: linear-gradient(267.15deg, rgba(18, 14, 21, 0.8) 43.49%, #21000B 97.64%), url(/content/themes/canard-pc/dist/img/croix-header-footer.png), #151515;
    }

    div.header-container {
      height: 99px;
    align-items: start;
    justify-content: start;
    max-height:99px;
    width: 1280px;
    justify-self: center;
    grid-area: header;
    }

    div.header-grid {
      width: 100%;
      display: grid;
      grid-template-columns : 2fr 1fr;
      grid-template-rows: min-content;
      grid-template-areas :
        "logos-section user-section"
        "main-menu search";
    }

    div.header-grid-maquette {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 4fr;
      grid-template-rows: min-content;
      grid-template-areas: "logos-section titre_maquette";
  }

  div.header-grid-maquette .Headline-1 {
    color: var(--cpc-on-primary);
  }

  div.header-grid-maquette div.maquette_title {
    grid-area:titre_maquette;
  display:flex;
  align-items: center;
  justify-content: start;
  }

  div.actions_maquette {
    background: linear-gradient(284.74deg, rgba(245, 245, 239, 0.8) 57.65%, #FFFFFF 92.52%), url(/content/themes/canard-pc/dist/img/e72e925….png);
    display: flex;
    flex-direction: column;
    width: min(80%, 1872px);
    justify-content: start;
    gap:16px;
    margin-top: 24px;
  }

  div.actions_maquette a.Button {
    width: 435px;
    text-align: center;
  }

  div.liste_maquette {
    width: min(80%, 1872px);
    justify-content: start;
    display: flex;
    gap: 9px;
    flex-direction: column;
  }

  div.liste_maquette ul.pagination {
    display: flex;
    gap: 8px;
    list-style: none;
  }

  div.post-maquettiste {
    display: grid;
    grid-template-rows: min-content;
    grid-template-areas: 
    "maquette-infos"
    "maquette-post-title";
  }

  div.post-maquettiste div.post-infos {
    grid-area:maquette-infos;
    display: flex;
    flex-direction: row;
    gap: 16px;
  }

  div.post-maquettiste div.post-infos {
    font-size: 18px;
  }

  div.post-maquettiste div.maquette-cat { 
    grid-area: maquette-cat;
  }
  
  div.post-maquettiste div.maquette-auteur {
    grid-area:maquette-auteur;
  }

  div.maquettiste h4 {
    grid-area: maquette-post-title;
  }

  div.post-maquettiste h4 a:hover, div.liste_maquette ul.pagination li a:hover {
    color: var(--cpc-primary);
  }

  div.post-maquettiste h4 a:visited, div.post-maquettiste.post-visited h4 a {
    color: var(--on-button-disabled);
  }

  div.actions_maquette form label {
    font-family: Merriweather;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 32px;
  }

  div.actions_maquette form input {
    padding-right: 16px;
    height: 48px;
    flex: 1;
    padding-left: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    box-sizing: border-box;
    font-family: Obviously;
    font-size: 0.91rem;
    font-weight: 560;
    line-height: 1.41rem;
    letter-spacing: 0px;
    padding-top: 5px;
    padding-bottom: 8px;
  }

    #logos-section {
      grid-area:logos-section;
      display: flex;
    }
    
    nav {
      grid-area:main-menu;
    }
    
    nav svg {
      display:none;
    }
      
      p svg {
        height: auto !important;
      }
    
    div.header-container div.logo-container, footer div.logo-container {
      width: 262px;
      height: 58px;
      background: #FFFDEC;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    div.logo-container svg, footer div.logo-container svg {
      width: 246px;
      height: 42px;
    }
    
    div.header-section-jv {
      height: 58px;
      width: 201px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-transform: uppercase;
      color: #FFFDEC;
    }
  
    div.header-section-jv.active, div.header-section-jv:hover {
      background: #E8111F;
    }

    div.header-section-jv a svg, div.header-section-jdp a svg, div.header-section-hw a svg {
margin-top:3px;
    }

    div.header-section-jv:hover a svg, div.header-section-jdp:hover a svg, div.header-section-hw:hover a svg {
      display:none;
    }
    
    div.header-section-jdp {
      width: 300px;
      height: 58px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-transform: uppercase;
      color: #FFFDEC;
    }

    div.header-section-jdp a, div.header-section-jv a, div.header-section-hw a {
      height: 58px;
      align-content: center;
      align-items: center;
      display: inline-flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    div.header-section-jdp a span, div.header-section-jv a span, div.header-section-hw a span {
      margin-top: 5px;
    }   
  
    div.header-section-jdp.active, div.header-section-jdp:hover {
      background: #C0A64B;
      width: 300px;
    }
    
    div.header-section-hw {
      width: 199px;
      height: 58px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-transform: uppercase;
      color: #FFFDEC;
    }
    
    div.header-section-hw.active, div.header-section-hw:hover {
      background: #1CA74C;
      width: 228px;
    }
    
    div.header-section-hw:hover a span, div.header-section-jdp:hover a span, div.header-section-jv:hover a span {
      font-family: Obviously-wide;
      font-size: 1rem;
      font-style: italic;
      font-weight: 670;
      line-height: 34px;
      letter-spacing: 0px;
      text-align: left;
    }

    div.header-container nav {
      display: flex;
      align-self: start;
      justify-self: start;
      text-transform: uppercase;
      position:relative;
    left: 0;
    top:0;
    }
    
      div#menuToggle {
        display:none;
      }
      
    div.header-section-menu {
      width: auto;
      height: 41px;
      display: flex;
      align-self: end;
      justify-self: start;
      text-transform: uppercase;
      color: #FFFDEC;
    }
    
    div.header-section-menu ul {
      padding:0;
      margin:0;
      font-weight: normal;
      display: flex;
      align-items: center;
      margin-right: 8px;
    }
    
    div.header-section-menu ul li{
      list-style: none;
      margin-left: 16px;
      margin-right: 8px;
      
    }
    
    div.user-section {
      display:flex;
      grid-area:user-section;
      align-items: center;
      justify-content: end;
      margin-right: 24px;
      text-transform: uppercase;
      color: #FFFDEC;
      font-weight: normal;
    }
    
    div.search {
      display:flex;
      grid-area:search;
      align-items: center;
      justify-content: end;
      margin-right: 24px;
      text-transform: uppercase;
      color: #FFFDEC;
      font-weight: normal; 
      position:relative;
      top: 0;
      left:0;
    }
    
    
    div.search svg#modeJour, div.search svg#modeNuit {
      width: auto;
      height: auto;
    }
    
    div.search svg.searchDkpBtn {
      display:inline;
    }
    
    div.search svg:first-of-type {
      /*margin-right: 9px;*/
    }
      
    /* barre de recherche desktop */
    
    div.search {
      
    }
    
    div#search svg.searchDkpBtn {
      cursor:pointer;
    }
    
    div#search svg.closeDkpBtn {
      display:none;
      margin-right: 16px;
      cursor:pointer;
    }
    
    div#search {
      display:flex;
      align-items: center;
    }
    
    div#search.active {
      background: #21000B;
      display:flex;
      align-items:center;
      max-width:265px;
    }
    
    div#search.active svg.closeDkpBtn {
      display: flex;
    }
    
    div#search input[type=text] {
      width: 0px;
      height:30px;
      outline: none;
      background: transparent;
      border: 0px;
      color: #FFFDEC;
      transition: ease-in-out 0.25s;
    }
    
    div#search.active input[type=text] {
      width:100%;
      margin-left: 16px;
    }
      
    ul.instant-results {
      position: absolute;
      display: none;
      width: 30rem;
      top: calc(100% + 1rem);
      padding: 0 2rem;
      list-style: none;
      z-index: 10;
      color: var(--body-color);
  }

  /***  Home  ***/

  div.main-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content;
    width:100%;
    grid-template-areas: 
    "premier-bloc"
    "second-bloc"
    "troisieme-bloc";
    justify-items: center;
  }

  div.main-container-hw, div.main-container.hardware {
    width: 1232px;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: min-content;
    grid-template-areas :
      "main-a derniers-articles derniers-articles"
      "configs derniers-articles derniers-articles"
      "big-guide-achat derniers-articles derniers-articles"
      "guides-achats annonce-hw boutique"
      "pave evergreen evergreen";
  }

  div.main-container.jdp {
    width: 1232px;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: min-content;
    grid-template-areas :
      "main-a derniers-articles derniers-articles"
      "main-a derniers-articles derniers-articles"
      "articles-populaires articles-populaires articles-populaires"
      "guides-achats annonce-hw boutique";
  }

  div.main-container, div.main-container.hardware, div.main-container.jdp {
   /*  grid-template-areas :
    "discover-cpc discover-cpc discover-cpc"
    "main-a derniers-articles derniers-articles"
    "fil-actu derniers-articles derniers-articles"
    "jdp hw hw"
    "configs guide-achat boutique"
    "vids vids vids"
    "pave evergreen evergreen"; */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content;
    width:100%;
    grid-template-areas: 
    "premier-bloc"
    "second-bloc"
    "troisieme-bloc";
    justify-items: center;
  }

  div.premier-bloc {
    grid-area:premier-bloc;
    display:grid;
    grid-gap: 24px;
    grid-template-columns: 2fr 1fr 1fr;
    width: 1232px;
    grid-template-areas: 
    "main-a derniers-articles derniers-articles"
    "fil-actu derniers-articles derniers-articles";
  }

  div.main-container.jdp div.premier-bloc {
    grid-template-areas :
      "main-a derniers-articles derniers-articles"
      "main-a derniers-articles derniers-articles";
  }

  div.main-container.hardware div.premier-bloc {
    grid-template-areas :
      "main-a derniers-articles derniers-articles"
      "configs derniers-articles derniers-articles"
      "big-guide-achat derniers-articles derniers-articles";
  }

  div.second-bloc {
    grid-area:second-bloc;
    display:grid;
    grid-template-columns: 1fr;
    width: 100%;
    justify-items:center;
    grid-template-areas: 
    "second-centre";
  }

  div.second-bloc div.centered-container {
    grid-area:second-centre;
    width:1232px;
    display:grid;
    grid-gap: 24px;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-areas: 
    "jdp hw hw";
  }

  div.main-container.jdp div.second-bloc div.centered-container {
    grid-template-areas :
      "articles-populaires articles-populaires articles-populaires";
  }

  div.main-container.hardware div.second-bloc div.centered-container {
    grid-template-areas :
      "guides-achats annonce boutique";
  }

  div.troisieme-bloc {
    grid-area:troisieme-bloc;
    display:grid;
    grid-gap: 24px;
    grid-template-columns: 2fr 1fr 1fr;
    width: 1232px;
    grid-template-areas: 
    "configs guide-achat boutique"
    "vids vids vids"
    "pave evergreen evergreen";
  }

  div.main-container.jdp div.troisieme-bloc {
    grid-template-areas :
      "guides-achats annonce boutique";
  }

  div.main-container.hardware div.troisieme-bloc {
    grid-template-areas :
      "pave evergreen evergreen";
  }

  div.main-container.hardware.non-connecte {
    /* width: 1232px;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: min-content;
    grid-template-areas :
    "discover-cpc discover-cpc discover-cpc"
      "main-a derniers-articles derniers-articles"
      "configs derniers-articles derniers-articles"
      "big-guide-achat derniers-articles derniers-articles"
      "guides-achats annonce boutique"
      "pave evergreen evergreen"; */
  }

  div.main-container.jdp.non-connecte {
    /* width: 1232px;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: min-content;
    grid-template-areas :
    "discover-cpc discover-cpc discover-cpc"
      "main-a derniers-articles derniers-articles"
      "main-a derniers-articles derniers-articles"
      "articles-populaires articles-populaires articles-populaires"
      "guides-achats annonce boutique"; */
  }

  div.main-container.liste-categorie {
    margin-top: 24px;
    display:grid;
    grid-gap: 24px;
    width: 1232px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: min-content;
    grid-template-areas:
      "liste-categorie-header liste-categorie-header liste-categorie-header liste-categorie-header"
      "category-list-item1 category-list-item2 category-list-item3 category-list-item4"
      "category-list-item5 category-list-item6 category-list-item7 category-list-item8"
      "category-list-item9 category-list-item10 category-list-item11 category-list-item12"
      "category-list-item13 category-list-item14 category-list-item15 category-list-item16" 
      "pagination pagination pagination pagination";
  }

  div.main-container.minimal {
    min-height:100%;
    /*margin-top: 204px;*/
    /*margin-bottom: 204px;*/
    display: grid;
    grid-gap: 48px;
    width: 1232px;
    grid-template-columns: 1fr;
    grid-template-rows: min-content;
    grid-template-areas: "minimal";
    justify-content:center;
  }

  div.main-container.full-width {
    min-height:100%;
    /*margin-top: 204px;*/
    /*margin-bottom: 204px;*/
    display: grid;
    grid-gap: 24px;
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: min-content;
    grid-template-areas: none;;
    justify-content:center;
  }

  /*** User section ***/

  #Login {
    grid-area:minimal;
    width:1200px;
    justify-self: center;
  }

  #Profile {
    grid-area:minimal;
    justify-self: center;
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content;
    grid-template-areas: 
    "profil"
    "powers"
    "chouinage";
    grid-gap:48px;
    margin-top:42px;
    font-family: Merriweather;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
  }

  .user-power p em {
    font-size: 0.85rem;
  }


  .profil-powers {
    grid-area:powers;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: center;
    grid-template-areas: 
    "powers-h powers-h powers-h"
    "power-1 power-2 power-3";
    grid-gap:24px;
  }

  div.articles-populaires-container {
    display:grid;
    grid-gap:24px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: min-content;
    grid-template-areas: 
    "articles-populaires-header articles-populaires-header articles-populaires-header articles-populaires-header"
    "articles-populaires-1 articles-populaires-2 articles-populaires-3 articles-populaires-4";
  }

  p.Headline-3 svg {
    margin-left:8px;
  }

  div.main-container p.Headline-3 svg {
    margin-left: 0px;
  }

  div.discover-cpc-container {
    display:none;
    grid-area:discover-cpc;
  }

  div.last-guides-achats-container {
    grid-area:guides-achats;
    display:grid;
    grid-gap:24px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content;
    grid-template-areas:
      "guides-header guides-header"
      "last-guides1 last-guides2";
  }

  #last-guides1 {
    grid-area:last-guides1;
  }

  #last-guides2 {
    grid-area:last-guides2;
  }
  
  div.non-connecte div.discover-cpc-container {
    display:grid;
    width:1232px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: min-content;
    grid-template-areas:
      "discover-header discover-header discover-header discover-header"
      "discover1 discover2 discover3 discover4"
      "discover-cpc-footer discover-cpc-footer discover-cpc-footer discover-cpc-footer";
  }
  
  div.discover-cpc-header {
    grid-area:discover-header;
  }
  
  #discover1 {
    grid-area:discover1;
  }
  
    #discover2 {
    grid-area:discover2;
  }
  
    #discover3 {
    grid-area:discover3;
  }
  
    #discover4 {
    grid-area:discover4;
  }

    
  div.discover-cpc-footer {
    grid-area:discover-cpc-footer;
    display:flex;
    flex-direction: column;
    align-items: center;
  }

  div.discover-cpc-footer input {
    margin-top: 24px;
    margin-bottom: 24px;
    text-transform: uppercase;
    color: #FFFDEC;
    background: #A55FFF;
    padding: 12px 24px 12px 24px;
    height: 60px;
    border: 0;
  }

  main {
    max-height: 402px;
    width: 604px;
  }
  
  main img {
    aspect-ratio: 604/402;
    max-height: 402px;
  }

main div.main-article-titre {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

  div.fil-actu-item {
    display: grid;
    grid-template-rows: min-content;
    grid-template-columns: 45px 559px;
    grid-template-areas: 
      "horaire-actu titre-actu"
      "horaire-actu content-actu";
  }

  div.fil-actu-item:last-of-type {
    /* display:none; */
  }

  div.fil-actu-item p:first-of-type {
    grid-area:horaire-actu;
    color: #A55FFF;
    margin-top: 14px;
  }
  
  div.fil-actu-item h1 {
    grid-area:titre-actu;
    padding-left: 12px;
  }

  div.fil-actu-item p:last-of-type {
    grid-area:content-actu;
    border-left: 1px solid #21000B;
    padding-left: 12px;
    display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 60px;
  }

  body.darkmode div.fil-actu-item p:last-of-type {
    border-left: 1px solid #FFFDEC;
  }
  
  div.second-bloc, div.non-connecte-container  {
    grid-gap: 24px;
  }
  
  div.annonce-container {
    grid-gap: 24px;
  }

  div.annonce-container p.Headline-6 {
    display:none;
  }

  .configs-img, .big-guide-achat-img, .pave-img {
    min-height: 270px;
    max-height: 275px;
  }
  
  .configs-img img, .pave-img img {
    aspect-ratio:924/421;
  }

  main div.main-cartouche, div.configs-img div.configs-cartouche, div.big-guide-achat-img div.big-guide-achat-cartouche, div.pave-img div.pave-cartouche {
    max-width: 594px;
    width:100%;
    max-height: 275px;
  }

  main div.main-cartouche {
    max-height: none;
  }

  div.guide-achat-container, div.boutique-container {
    grid-gap: 0px;
    grid-template-rows: min-content;
  }
  
  div.guide-achat-container p:first-of-type, div.boutique-container p:first-of-type {
    margin-bottom: 24px;
  }
  
  div.guide-achat-container h2, div.boutique-container h2 {
    margin:0;
  }

  div.derniers-articles-container {
    grid-gap: 24px;
    width:616px;
    align-content:start;
  }

  div.derniers-articles-header {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: min-content;
    grid-template-areas:
      "derniers-articles-titre derniers-articles-switch";
  }
  
  div.derniers-articles-header p:first-of-type {
    grid-area: derniers-articles-titre;
  }
  
  div.derniers-articles-header p:last-of-type {
    grid-area:derniers-articles-switch;
    justify-self: end;
  }
    
      div.article-category svg {
    height:auto;
  }

  div.article-category {
    padding-left:0;
  }

  .derniers-articles-img img, .jdp-img img, .hw-img img, .guide-achat-img img, .boutique-img img, .videos-img img, .discover-cpc-img img {
    object-fit: cover;
    aspect-ratio: 290/163;
      width: 290px;
      height: 163px;
      min-height: auto;
    }
    
    div.derniers-articles-item div.derniers-articles-img, div.jdp-container div.jdp-img, div.hw-img, div.boutique-img, div.guide-achat-img, div.videos-img, div.discover-cpc-item div.discover-cpc-img, div.category-list-item div.derniers-articles-img, div.evergreen-item div.derniers-articles-img, div.articles-populaires-item div.derniers-articles-img, div.last-guides-achats-item div.jdp-img, div.annonce-item div.jdp-img {
    background: #D9D9D9;
    /*display: flex;*/
    align-items: center;
    justify-content: center;
    height: 163px;
    min-height: 163px!important;
    width: 290px;
    min-width: 290px;
    overflow:hidden;
    }

    div.hw-img, div.evergreen-img, div.evergreen-item div.derniers-articles-img {
      display:grid;
    }
      
    div.videos-container {
      grid-template-columns : 1fr 1fr 1fr 1fr;
      grid-template-areas:
        "vid-h vid-h vid-h vid-h"
        "vid1 vid2 vid3 vid4";
    }

  /***  Article  ***/
    
  div.page-content-container {

  }

  div.post-row {
    order:unset;
    gap: unset;
  }

  div.post-row.desktop {
    display:flex;
    margin: 0px;
    order: unset;
  }

  .post-row.mobile {
    display:none;
  }

  div.post-row.desktop .a-type {
    display: flex;
}

  div.main-container.minimal div.page-content-container {
    margin-left:0;
  }


  div.page-content {
    justify-self: center;
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content;
    grid-template-areas:
      "page-content page-content";
      margin-top: 24px;
      width: 1232px;
      padding-left:24px;
      padding-right:24px;
  }

  div.page-content div.article-cover, div.page-cover, div.page-content-container div.article-cover {
    width: 649px;
  }

  div.post-content {
    grid-template-columns: 1fr;
    grid-template-rows: min-content;
    grid-template-areas:
        "left-section";
        grid-gap:24px;
  }

  div.right_section {
    margin-top: 24px;
    grid-template-areas:
        "slideshow"
        "encarts";
  }

  div.post-slideshow {
    grid-area: slideshow;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content;
    grid-template-areas:
        "slide1 slide1"
        "slide2 slide3"
        "slide2 slide4";
        z-index:500;
  }

  figure img, div.post-slideshow img, div.page-img img {
    aspect-ratio: 601/338;
  }

  div.page-flex-layout.layout-image figure img {
    aspect-ratio: unset;
    width: unset;
    height: unset;
    object-fit: unset;
  }

  div.post-slideshow {
    max-height: 1156px;
  }

  div.post-slideshow figure {
    display:none;
  }

  #slide1 {
    grid-area:slide1;
    aspect-ratio: 559/235;
    height:235px;
    display:inline-block;
  }

  #slide2 {
    grid-area:slide2;
    aspect-ratio: 229/500;
    height:500px;
    display:inline-block;
  }

  #slide3 {
    grid-area:slide3;
    aspect-ratio: 306/305;
    height:305px;
    display:inline-block;
  }

  #slide4 {
    grid-area:slide4;
    aspect-ratio: 306/171;
    height:171px;
    display:inline-block;
  }

  .post-row {
    margin-left: 24px;
    flex-direction: unset;
    width:1208px;
  }

  .a-type {
    width: 601px;
    padding-left:24px;
  }

  .post-row.desktop .a-type {
    padding-left: 0px;
    width:649px;
  }

  .b-type {
    flex-direction: column;
    position: absolute;
    /* right: 0px; */
    width: 862px;
    align-self: end;
    top: 0;
    gap: 24px;
  }

  .b-type {
    width: 559px;
    left: 649px;
    z-index:500;
  }

  .b-type.b-type.last {
    margin-left: 24px;
  }

  .post-row:first-child > .b-type {
    left: 673px;
  }

  .post-row:first-child > .a-type {
    width: 649px;
}

.post-row:has(.a-type > .post-informations) {
  margin-top: -70px;
}

.post-row.desktop .b-type {
  left: 673px;
}

div.post-informations, div.layout-text, div.layout-intertitle {
  margin-left: 0px;
  margin-right: 0px;
}

div.layout-citation figure svg {
 width: 30px;
}

div.grid {
  display: grid;
  gap: 24px;
}

div.layout-images.grid {
  grid-template: 1fr 1fr;
  grid-gap: 24px;
}

#PostSidebar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 24px;
  margin-bottom: 24px;
  grid-gap: 24px;
  max-width: 1280px;
}

.widget {
  /* min-width: 449px; */
}

.btn.vote {
  width: 100%;
}

.widget-content .Body-1 {
  /* font-size: 20px; */
}

p.layout-framed-content.Body-3, h4.layout-framed-title, p.layout-framed-content {
  padding-left: 24px;
  padding-right: 24px;
}

div.technical-description.Body-3 {
  grid-area: tech-infos;
  padding-left: 24px;
  padding-right: 24px;
  z-index: 500;
}

div.layout-citation {
  margin-left: -24px;
}

  /*** Image Lightbox **/

  #PostImageBox .img-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%); */
    max-height: 90%;
    max-width: 90%;
    margin:0;
    /* min-width: 870px; */
    display: flex;
  }

  #PostImageBox .img-container img {
    object-fit:contain;
  }

  #PostImageBox .post-image-box-container .next-arrow {
    right: 0%;
  }

  #PostImageBox .caption {
    bottom: 0px;
    color: #21000B;
    background: #FFFDEC;
  }

  div.post-layouts div.layout-framed {
    /* display: none; */
}

  div.encarts {
    grid-area: encarts;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 0;
  }

  div.encarts div.layout-framed {
    display: block;
  }

  div.main-container.minimal div.page-content-container {
    margin-left:0;
  }

  div.article-cover div.main-layer-img img, div.page-img img {
    aspect-ratio: 649/373;
}

div.page-content div.main-cartouche, div.page-cartouche, div.page-content-container div.main-cartouche {
  max-width:640px;
  margin-bottom: 50px;
}

div.page-content div.main-cartouche div.main-article-soustitre, div.page-content-container div.main-cartouche div.main-article-soustitre {
  padding-left:0px;
}

  div.more-posts {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: min-content;
    grid-template-areas:
    "other-posts-title1 other-posts-title1 other-posts-title2 other-posts-title2"
    "mp-item1 mp-item2 mp-item3 mp-item4";
  }

  div.more-posts-item div.derniers-articles-img {
    width: 290px;
    height: 163px;
  }

  div.article-footer div.container {
    width: 1232px;
    padding-top: 24px;
  }

  div.more-posts {
    padding-left: 0px;
    padding-right: 0px;
  }

/***  Auteur   ***/

  div.author-container {
    width: 1232px;
  }

  div.liste-articles-author {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:
        "category-list-item1 category-list-item2 category-list-item3 category-list-item4"
        "category-list-item5 category-list-item6 category-list-item7 category-list-item8"
        "category-list-item9 category-list-item10 category-list-item11 category-list-item12"
        "category-list-item13 category-list-item14 category-list-item15 category-list-item16"
        "pagination pagination pagination pagination";
}

div.derniers-articles-author {
  width: 1232px;
}

.author-title {
  margin-bottom:24px;
}

div.page-content, div.news-container {
  width:1232px;
}

div.news-img img, div.result-img img, div.vote-img img, div.whine-img img {
  width:290px;
  height:163px
}

div.news-item, div.news-img img {
  width: 600px;
  max-width: min(100%, 600px);
}


div.page-content.news-post {
  max-width: inherit;
}

  /***  Footer  ***/

  footer {
    margin-top: 1.1rem;
  }

  div.footer-container {
    height: 198px;
    padding:24px;
    max-width: 1232px;
    justify-self: center;
    display:grid;
    grid-template-columns: 386px 410px 386px;
    grid-template-rows: 2fr 1fr;
    grid-template-areas:
      "logo-footer logo-footer about-cpc"
      "copyright-cpc links-cpc rs-cpc";
  }

  footer div.logo-container {
    grid-area:logo-footer;
    align-self: end;
  }
  
  footer div.about-cpc {
    grid-area:about-cpc;
    display:flex;
    flex-direction: column;
    justify-self: end;
    align-items: end;
  }

  footer div.about-cpc ul {
    display: grid;
    justify-items: end;
  }
  
  #copyright-footer {
    grid-area:copyright-cpc;
        align-self:end;
  }
  
  #legal-footer {
    grid-area:links-cpc;
        align-self:end;
    justify-self: center;
  }

  #legal-footer ul {
    display: inline-flex;
    grid-gap: 24px;
  }
  
  footer div#icones-footer {
    grid-area:rs-cpc;
    background: none;
    /*height: 55px;*/
    width:464px;
    fill: #fff;
    align-items: center;
    display:flex;
    align-self:end;
    justify-self:end;
    justify-content: end;
  }
  
  footer div#icones-footer ul {
    display:flex;
    margin:0px;
    padding:0px;
    align-self: center;
  }
  
  footer div#icones-footer ul li, footer div#icones-footer ul li div  {
    list-style:none;
    height:30px;
    fill: #fff;
  }
  
  footer div#icones-footer ul li {
    margin-left:14px;
  }
  
  footer div#icones-footer ul li a svg {
    height: 30px;
    
  }
  
  footer a.Body-3, footer div.Overline {
    font-weight: normal;
  }

  /*******  Catégorie  ******/

  #liste-categorie-header {
    width:1232px;
  }

  div.article-category span {
    margin-left: 8px;
    overflow: hidden;
      max-width: 137px;
      text-overflow: ellipsis;
      width: fit-content;
      white-space: nowrap;
    }

/*** Pages & Customs modèles ***/

  div.grid-container {
    margin-left:unset;
    margin-right: unset;
    justify-self: start;
  }

  div.grid-container.two_cols {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
    "left-col right-col";
  }


    /** Votes & Whines **/

    div.vote-informations, div.whine-informations {
      height: 75px;
    }

    /*** Locomotive ***/

    .locomotive-navigation {
      /*grid-template-columns: 1fr 1fr 1fr;*/
      min-height: 40px;
    }

    div.locomotive_section {
      width: 1232px;
        display: flex;
        justify-items: flex-end;
        justify-content: end;
        margin-right: 24px;;
    }

    div.locomotive-container {
      width:100%;
    }

    div.locomotive_title {
      min-width: 511px;
      max-width: 559px;
      display: flex;
      justify-content: center;
      width: 559px;
    }

    div.locomotive-navigation div.locomotive_title h4.Headline-4 {
      font-size: 14px;
      margin-bottom: 12px;
      font-weight: normal;
    }

    div.page-content .locomotive_title h4.Headline-4 {
      padding: 0px;
    }

    div.locomotive-toggle svg {
      height: 37px;
      width: 37px;
    }

    div.locomotive-toggle {
      margin-top: -20px;
      margin-right: 12px;
    }

    .locomotive-navigation a span {
      color: #FFFDEC;
      display: inline-flex;
      font-size: 12px;
    }

    /*** News ***/
    
    div.news-item, div.news-img img, #news-item-focus div.news-img img {
      width: 600px;
    }

    /*** Recherche ***/

    div.search-page-content {
      width: 1232px;
      max-width: 1232px;
    }

    div.result-item {
      width:290px;
    }

    div.layout-framed-container blockquote {
      padding-left: 24px;
    display: flex;
    /* justify-content: center; */
    margin: 0;
    padding-bottom: 12px;
    font-family: Obviously;
    font-size: 0.73rem;
    font-style: italic;
    font-weight: 500;
    line-height: 0.73rem;
    letter-spacing: 0px;
    text-align: left;
    }

    .b-type.conclusion {
      /* justify-content: end; */
      /* min-height: 100%; */
      position:absolute;
      bottom:0;
    }

  }

/* **************************************************** */
/*   RESOLUTION DESKTOP STANDARD (1920px et plus)       */
/* **************************************************** */

  @media only screen and (min-width: 1920px) {
  
  html {
    font-size: 22px;
  }

/*   .Headline-1 {
    font-size: 2.3rem;
  } */

  .Headline-1, span.layout-content-title:first-of-type {
    line-height: 1.98rem;
  }

  .boxed.Headline-2 {
    font-size: 1.50rem;
  }

  .Headline-2 {
    font-size: 1.82rem;;
  }

  .Headline-3 {
    font-size:1.1rem;
  }

  div.header-container {
    width: 1920px;
  }
  
  div.main-container.liste-categorie, div.main-container.minimal, div.non-connecte div.discover-cpc-container, div.premier-bloc, div.second-bloc div.centered-container, div.troisieme-bloc {
    width: 85.1rem;
  }
  
  main {
    max-height: 616px;
    width: 924px;
  }
  
  main img {
    aspect-ratio: 924/616;
    max-height: 616px;
    width: 924px;
  }

  main div.main-article-titre {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow:hidden;
  }

  
  div.fil-actu-item {
    grid-template-columns: 50px 870px;
  }
  
  
  div.fil-actu-item p:last-of-type {
    grid-area:content-actu;
    border-left: 1px solid #21000B;
    padding-left: 12px;
    display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 60px;
  }

  div.fil-actu-item p:last-of-type.Body-4 {
    font-size: 0.80rem;
  }

  .configs-img, .big-guide-achat-img, .pave-img {
    min-height: 417px;
    max-height: 421px;
  }
  
  .configs-img img, .pave-img img {
    aspect-ratio:924/421;
  }
  
  main div.main-cartouche, div.configs-img div.configs-cartouche, div.big-guide-achat-img div.big-guide-achat-cartouche, div.pave-img div.pave-cartouche {
      max-width: 900px;
      width:100%;
      max-height: none;
    }

    div.dejalu-checked {
      transform: translateY(-212%);
    }

  div.page-flex-layout div.big-guide-achat-img div.big-guide-achat-cartouche {
    max-width:876px;
  }

  div.derniers-articles-container {
    grid-gap: 24px;
    width:924px;
    align-content: start;
  }
  
  .derniers-articles-img img, .jdp-img img, .hw-img img, .guide-achat-img img, .boutique-img img, .videos-img img, .discover-cpc-img img {
  object-fit: cover;
  aspect-ratio: 450/253;
    width: 450px;
    height: 253px;
    min-height: auto;
  }
  
  div.derniers-articles-item div.derniers-articles-img, div.jdp-container div.jdp-img, div.hw-img, div.boutique-img, div.guide-achat-img, div.videos-img, div.discover-cpc-item div.discover-cpc-img, div.category-list-item div.derniers-articles-img, div.evergreen-item div.derniers-articles-img, div.articles-populaires-item div.derniers-articles-img, div.last-guides-achats-item div.jdp-img, div.annonce-item div.jdp-img {
  background: #D9D9D9;
  /*display: flex;*/
  align-items: center;
  justify-content: center;
  height: 11.5rem;
  min-height: 11.5rem !important;
  width: 20.45rem;
  min-width: 20.45rem;
  overflow:hidden;
  }


  div.footer-container {
    max-width: 1872px;
    grid-template-columns: 1fr 1fr 1fr;
  }
    

    /**********************************/
    /* Template for default post/page */
    /**********************************/
    
    div.page-content, div.grid-container.two_cols {
      justify-self: center;
      display: grid;
      gap: 24px;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: min-content;
      grid-template-areas:
        "page-content page-content";
        margin-top: 24px;
        width: 1872px;
        padding-left:24px;
        padding-right:24px;
    }

    div.page-content div.main-cartouche, div.page-cartouche, div.page-content-container div.page-cartouche, div.page-content-container div.main-cartouche {
      max-width: 970px;
      margin-bottom: 150px;
      max-height: 417px;
    }

    div.article-cover div.main-layer-img img, div.page-img img {
      aspect-ratio: 986/567;
    }

    div.page-content-container, div.page-content-container div.left_col {
      z-index: 50;
      background: #F4F4F2;
    }

    div.main-container.minimal div.page-content-container {
      margin-left:0;
    }

    body.darkmode div.page-content-container div.left_col {
      background: #151515;
    }

    div.left_col {
      max-width: 986px;
    }

    .post-row:has(.a-type > .post-informations)  {
      margin-top: -150px;
    }

    .a-type {
      width:912px;
    }

    .post-row:first-child > .a-type {
      width:986px;
    }

    .b-type {
      left: 968px;
      z-index: 500;
      width:862px;
       flex-direction: column;
      position: absolute;
      /* right: 0px; */
      width: 862px;
      align-self: end;
      top: 0;
      gap: 24px;
    }

    .post-row.desktop .a-type {
      width: 1010px;
    }

    .post-row.desktop .b-type {
      left:1010px;
    }

    .post-row:first-child > .b-type {
      left: calc(986px + 24px);
    }

    div.page-content-container div.left_col {
      margin-top: -120px;
    }

    div.page-layouts {
      display: grid;
      gap: 24px;
    }


    div.grid {
      display:grid;
      gap: 24px;
    }

    div.page-content-container div.left_col {
    position: relative;
    padding-left: 24px;
    }

    div.layout-config-right-col {
      display: grid;
    grid-template-columns: 360px 530px;
    grid-gap: 24px;
    grid-template-areas: "illus infos";
    }

    div.layout-config-image-container {
      grid-area:illus;
      display:grid;
      /* height:570px; */
    }

    div.layout-config-image-container div.layout-config-img img {
      max-width:100%;
      object-fit:cover;
      height:100%;
    }

    ul.layout-config-components {
      grid-area: infos;
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 8px;
    }

    li.layout-config-component {
      display:flex;
      flex-direction: column;
      gap: 12px;
    }

    div.layout-config-price {
      position: absolute;
    background: var(--hw-primary);
    display: flex;
    padding: 4px 8px 4px 8px;
    color: #ffffff;
    }

    div.layout-config-picto {
    position: absolute;
    display: flex;
    align-self: end;
    justify-self: end;
    }

    div.grid-container div.page-content-container {
      margin-top: 0;
    }

    body.darkmode div.page-content-container {
      background: #151515;
    }

    div.post-content {
      grid-template-columns: 1fr;
      grid-template-rows: min-content;
      grid-template-areas: 
      "left-section";
      grid-gap:24px;
    }

    div.layout-citation figure svg {
      /* margin-left: -25px; */
    }

    div.post-informations, div.layout-text, div.layout-intertitle {
      margin-left: 0px;
      margin-right: 0px;
    }

    div.article-footer div.container {
      width:1872px;
    }

    div.left_section {
      grid-area:left-section;
      display:grid;
      grid-template-columns: 1fr;
      grid-template-rows: min-content;
      grid-template-areas:
      "post-content";
      grid-gap:24px;
    }

    div.right_section {
      grid-area:right_section;
      display:grid;
      grid-template-columns: 1fr;
      grid-template-rows: min-content;
      grid-template-areas:
      "slideshow"
      "encarts";
      /*align-content:space-between;*/
      grid-gap:24px;
    }

    div.post-row {
      width: 1824px;
      overflow:visible;
      flex-direction:unset;
      margin-left:48px;
      order: unset;
    }

    div.post-row.desktop {
      width: 1872px;
      order: unset;
      display: flex;
    }

    div.post-row.desktop .a-type {
      display: flex;
  }

    div.right_section.no-slideshow div.encarts {
      /* margin-top: calc(-567px + 150px - 24px); */
    }

    div.encarts {
      grid-area:encarts;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top:0;
    }

    
    div.post-content.slideshow-off {
      margin-left: 24px;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: min-content;
      grid-template-areas: 
      "post-infos tech-infos"
      "post-content post-side-content"
      "post-content post-side-content"
      "post-content post-side-content"
      "post-content post-conclusion";
    }

    div.page-content div.article-cover, div.page-cover, div.page-content-container div.page-cover, div.page-content-container div.article-cover {
      width: 986px;
    }

    div.right_col div.page-cover {
      width: auto;
    }

    div.right_col div.page-cover div.page-img img {
      max-width:100%;
      object-fit: cover;
    }

    div.post-slideshow {
      grid-area: slideshow;
      display:grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: min-content;
      grid-template-areas:
      "slide1 slide1"
      "slide2 slide3"
      "slide2 slide4";
    }

    div.post-slideshow {
      max-height: 1156px;
    }

    div.post-slideshow figure {
      display:none;
    }

    #slide1 {
      grid-area:slide1;
      aspect-ratio: 962/361;
      height:361px;
      display:inline-block;
    }

    #slide2 {
      grid-area:slide2;
      aspect-ratio: 360/771;
      height:771px;
      display:inline-block;
    }

    #slide3 {
      grid-area:slide3;
      aspect-ratio: 478/478;
      height:478px;
      display:inline-block;
    }

    #slide4 {
      grid-area:slide4;
      aspect-ratio: 478/269;
      height:269px;
      display:inline-block;
    }

    div.technical-description.Body-3 {
      grid-area: tech-infos;
      padding-left: 24px;
      padding-right: 24px;
      z-index:500;
    }

    div.encarts div.layout-framed {
      display:block;
    }

    p.layout-framed-content.Body-3, h4.layout-framed-title, p.layout-framed-content {
      padding-left: 24px;
      padding-right: 24px;
    }

    figure img {
      aspect-ratio: 914/514;
    }

    div.layout-images figure img {
      aspect-ratio: 445/250;
    }

    blockquote {
      /* margin-left: -24px; */
    }

    div.post-layouts div.layout-framed {
      /* display:none; */
    }

    div.post-side-content {
      grid-area:post-side-content;
      display:grid;
      /*grid-row-end: span 5;*/
      align-content: space-between;
    }

    div.post-conclusion {
      padding-left: 24px;
      padding-right: 24px;
    }

    div.more-posts {
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-areas:
        "other-posts-title1 other-posts-title1 other-posts-title2 other-posts-title2"
        "mp-item1 mp-item2 mp-item3 mp-item4";
        padding-top: 24px;
    }

    div.more-posts-item {
      width:450px;
    }

    div.more-posts-item div.derniers-articles-img {
      width:450px;
      height:253px;
    }

    #PostSidebar {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      margin-top:24px;
      margin-bottom: 24px;
      grid-gap:24px;
    }

    /******************/
    /*** Locomotive ***/
    /******************/

    .locomotive-navigation {
      position: fixed;
      bottom:0;
      left:0;
      width:100%;
      min-height:unset;
      display:flex;
      /* grid-template-columns: 3fr 5fr 3fr; */
      justify-content: center;
      align-content: center;
      align-items: center;
    }

    div.locomotive_section {
      width: 1872px;
      display: flex;
      justify-items:flex-end;
      justify-content:end;
      min-height: unset;
      margin-right: 0px;
    }

    .locomotive_prev {
      margin-left: 24px;
    }

    .locomotive_next {
      margin-right: 24px;
      text-align:right;
    }

    div.locomotive_title {
      display: flex;
    justify-content: center;
    /* margin-right: 47px; */
    background: linear-gradient(243.04deg, rgba(28, 16, 40, 0.5) 20.82%, #1D1A16 60.59%), url(/content/themes/canard-pc/dist/img/croix-header-footer.png), #151515;
    min-width: 814px;
    max-width: 862px;
    }

    .locomotive_next span.locomotive-post-title, .locomotive_prev span.locomotive-post-title {
      display: flex;
    }

    div.locomotive-toggle svg {
      height: 47px;
      width: 47px;
  }

  

    .locomotive-navigation a span {
      color: #FFFDEC;
      display: inline-flex;
      font-size: 14px;
      font-weight: normal;
    }

    div.page-content .locomotive_title h4.Headline-4 {
      color: #fff;
      margin:0;
      padding:0;
    }

    div.locomotive-navigation div.locomotive_title h4.Headline-4 {
      font-size: 16px;
      margin-bottom: 12px;
      font-weight: normal;
    }

    /***************/
    /*** Auteur ***/
    /***************/

  div.author-container {
    width: 1878px;
  }
    div.author-header {
      grid-area:author-h;
      display:flex;
      flex-direction: row;
      align-items: center;
      max-width:1872px;
     }

     div.author-details {
      background: #F4F4F2;
      margin-left: -85px;
      padding:24px;
     }
    
     .author-title {
      margin-bottom:24px;
      display:flex;
      align-items:baseline;
      justify-content:start;
     }

     .author-title svg {
      width:auto;
      height:auto;
     }
  
     div.container-articles-author {
      display:grid;
     }
  
     div.derniers-articles-author {
      padding-top:24px;
      padding-bottom:24px;
      grid-area:author-a;
      display:grid;
      grid-template-columns: 1fr;
      width:1872px;
      /*justify-self:center;*/
      grid-gap:24px;
     }
  
     div.liste-articles-author {
      display:grid;
      grid-gap:24px;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-areas:
      "category-list-item1 category-list-item2 category-list-item3 category-list-item4"
        "category-list-item5 category-list-item6 category-list-item7 category-list-item8"
        "category-list-item9 category-list-item10 category-list-item11 category-list-item12"
        "category-list-item13 category-list-item14 category-list-item15 category-list-item16"
        "pagination pagination pagination pagination";
     }
    
      img.author-avatar {
        width:565px;
        height:565px;
        border-radius:100%;
      }

       div.author-details {
    background: #F4F4F2;
    margin-left: -85px;
    padding:24px;
   }


   /**********************/
  /*** Search results ***/
  /**********************/

  div.search-page-content {
    width: 1872px;
    max-width: 1872px;
  }

  /*** Image Lightbox **/

  #PostImageBox .img-container {
    /* position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-height: 70%;
    max-width: 70%;
    margin:0;
    min-width: 1340px;
    display: flex; */
  }

  #PostImageBox .caption {
    bottom: 0px;
    color: #21000B;
    background: #FFFDEC;
  }

  /********************/
  /****   News    ****/
  /********************/

  div.news-img img, div.result-img img, div.vote-img img, div.whine-img img {
    object-fit: cover;
    aspect-ratio: 450/253;
    width: 450px;
    height: 253px;
    min-height: auto;
  }

  div.page-content, div.news-container, div.grid-container.two_cols {
    width: 1872px;
    /* margin-top: 0px; */
}

div.page-content.default-post {
  /* margin-top: 0px; */
}

div.news-item, div.news-img img, #news-item-focus div.news-img img {
  width: 924px;
  max-width: min(100%, 924px);
}

div.result-item, div.vote-item, div.whine-item {
  width: 450px;
  max-width: min(100%, 450px);
}

div.fil-actu-item:last-of-type {
  display:grid;
}



/**************************/
/*******  Catégorie  ******/
/**************************/

  #liste-categorie-header {
    width:1872px;
  }

  div.article-category span {
      max-width: unset;
      width: fit-content;
      white-space: nowrap;
    }

  div.article-category div.Subtitle-2 {
    height: 22px;
  }
  
  /**
  * Votes & Chouinages 
  **/
  
  div.vote-informations, div.whine-informations {
    height: 100px;
   }

  div.top-votes-content, div.top-whines-content {
    width:1872px;
  }
  
  div.vote-item, div.whine-item {
  height:400px;
  overflow: hidden;
  width: 450px;
}

/*****************************************/
/***** Page 404 **************************/
/*****************************************/

  .legend404 {
    flex-direction: row;
    height:200px;
    padding: 0px;
  }

  .legend404 em {
    display: none;
  }

  .error-404 {
    margin-bottom: 100px;
  }

  .error-404 svg {
    width:auto;
  }

  .backto {
    margin-top: 0px;
   }

  div.screen {
    margin-top: 140px;
    margin-left: 340px;
   }

   .norot {
    margin-left: 400px;
   }

   .rot1 {
    display:flex;
    transform: rotate(38.5deg);
    margin-left: 10px;
    margin-top: 35px;
   }

   .rot2 {
    display:flex;
    margin-left: -45px;
    margin-top: 250px;
    transform: rotate(70.416deg);
   }

}