/* icon link https://www.freepik.com/author/iconmarket/icons/generic-detailed-outline_1083?query=house

https://heroicons.com/solid  */

::selection {
  background: var(--ev-primary);
  color: #fff;
}

.btn-outline-primary {
  --btn-hover-color: white;
}

.icon--home {
  --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='1.5' class='size-6' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m2.25 12 8.954-8.955a1.126 1.126 0 0 1 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25'/%3E%3C/svg%3E%0A");
}


.breadcrumb {
  margin-bottom: var(--ev-space-s-m);
}


.page {
	margin-top: 0;
}

[id^="article_link"] main {
  margin-block: 0 var(--ev-space-2xl-3xl);
}

.hero.section-inspector {
  margin-top: 0 !important;
}

.form-page .flexible-form__title-wrapper,
.banner.banner-bg.section-inspector {
  min-height: 32vh;
  display: grid;
  align-items: end;
}

.breadcrumb-wrapper {
  background-color: var(--ev-light);
  padding-block: var(--ev-space-s);
}

.btn-primary {
  --btn-color: white;
}

.btn-primary,
.swal2-confirm {
  --btn-hover-bg: var(--ev-dark);
  --btn-hover-color: white;
  --btn-hover-border-color: var(--ev-dark)
}

.intro__container {
  padding: 0 !important;
}


.intro__content.grid-content {
  background: var(--ev-text-bg);
  border: 1px solid var(--ev-border-color);
}

.paragraph__image.grid-image.broken-image {
  margin-bottom: 0;
}

.paragraph__grid::after {
  content: "";
  grid-column: 1/4;
  background: var(--ev-text-bg);
  grid-row: 3/-1;
  z-index: -1;
  border: 1px solid var(--ev-border-color);
}


.paragraph__grid {
  grid-template-areas: "title title     title" "img   img       img  " "..    ..        .. " "..    paragraph ..   " "..    cta       ..   " "..    ..        ..   ";
  column-gap: 0;
  grid-template-rows: auto auto var(--ev-space-m-l) 1fr var(--ev-space-m-l);
  grid-template-columns: var(--ev-space-m-l) 1fr var(--ev-space-m-l);
  position: relative;
  z-index: 1;
}


.banner-bg, .form-page .flexible-form__title-wrapper {
  --bg-text-color: white;
  padding-block: var(--ev-space-4xl-5xl) var(--ev-space-l) !important;
}

.banner-bg::after, .form-page .flexible-form__title-wrapper::after {
  background-image: url('https://serveur-images.devil-it-applications.fr/marks/upload/hero.jpg');
  background-position: center;
}

.banner-bg::before, .form-page .flexible-form__title-wrapper::before {
  background-color: rgba(var(--ev-dark-rgb), 50%);
}

.flexible-form__wrapper {
  background: var(--ev-light);
  padding: var(--ev-space-2xl);
  border: 1px solid var(--ev-light);
  border-top: hidden;
}

.flexible-form__title {
  text-align: center;
}


.form-control, .article--list .article__filter-dropdown-btn {
  --input-bg: var(--ev-text-bg);
}

.flexible-form__container {
  margin-top: 0;
}

figure {
  position: relative;
}


figure:hover::before {
  height: 100%;
  opacity: 0;
  -webkit-transition: all .4s linear;
  transition: all .4s linear;
}

figure::before {
  background: #ffffff4d;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  opacity: 1;
  z-index: 9;
  pointer-events: none;
}

.linked-menu__item:not(.no-img) {
  grid-template-areas: "linked-menu-subtitle linked-menu-subtitle    linked-menu-subtitle" "linked-menu-title    linked-menu-title       linked-menu-title   " "linked-menu-image                    linked-menu-image       linked-menu-image                   " "..                   ..                      ..                  " "..                   linked-menu-description ..                  " "..                   linked-menu-btn         ..                  " "..                   ..                      ..                  ";
  column-gap: 0;
  grid-template-rows: auto auto auto var(--ev-space-m-l) auto auto var(--ev-space-m-l);
  grid-template-columns: var(--ev-space-m-l) 1fr var(--ev-space-m-l);
  position: relative;
  z-index: 1;
}

.linked-menu__image {
  margin-bottom: 0;
}

.linked-menu__item:not(.no-img)::after {
  content: "";
  background: var(--ev-text-bg);
  grid-column: 1/3;
  grid-row: 4/-1;
  z-index: -1;
  bopr: ;
  border: 1px solid var(--ev-border-color);
}


.linked-menu__item.no-img {
  background: var(--ev-text-bg);
  padding: var(--ev-space-m-l);
  border: 1px solid var(--ev-border-color);
}

.linked-menu__item {
	margin-bottom: var(--ev-space-2xl);
}

.discover.collapse-parent {
  background: var(--bs-breakpoint-lg);
}

.btn.btn-tag {
  text-decoration: none;
}

.discover__content {
  background: var(--ev-text-bg);
}


.intro {
  background: transparent;
  margin-top: var(--ev-space-2xl);
}

.flexible-form__title-wrapper {
  background-color: transparent;
}

.article--list .article__item {
  --article-item-bg: var(--ev-border-color);
  --article-item-bg-content: var(--ev-text-bg);
}

.article .label-wrapper > * {
  background: #ffffff4a;
  color: black;
}

.label.label-secondary {
  backdrop-filter: blur(4px);
}

.banner__content b {
	margin-bottom: var(--ev-space-s);
	display: inline-block;
}

@media (min-width: 992px) {
  .banner-bg, .form-page .flexible-form__title-wrapper {
    padding-block: var(--ev-space-5xl-6xl) var(--ev-space-2xl) !important;
  }
  
  .intro__container.d-grid {
    --img-width: 600px;
    grid-template-areas: ".. .. img img""content .. img img""content .. .. ..";
    grid-template-columns: minmax(50%, 1fr) var(--ev-space-2xl) var(--ev-space-2xl) minmax(300px, 600px);
    position: relative;
    z-index: 1;
    grid-template-rows: var(--ev-space-2xl) 1fr var(--ev-space-2xl);
  }
  
  .intro__content.grid-content {
    background-color: transparent; 
    border: none;
  }
}

.intro__image img {
  height: fit-content;
}

.intro__grid.d-grid {
  padding: 0;
}

.grid-content {
  padding: var(--ev-space-m-l);
}

.intro__container.d-grid::after {
  content: "";
  background: var(--ev-text-bg);
  grid-column: 1/4;
  grid-row: 2/-1;
  z-index: -1;
  border: 1px solid var(--ev-border-color);
}

@media (min-width: 992px) {
  /* ────────────────────────────────────────────────
   ODD ITEMS  (1, 3, 5…)
   IMAGE + GAP ON THE LEFT  →  linked-menu-img linked-menu-img
   ──────────────────────────────────────────────── */
.linked-menu__item:nth-child(2n+1):not(.no-img) {
  /* img | imgGap | spacer | text | tailGap */
  grid-template-columns:
      minmax(300px, 600px)
      var(--ev-space-2xl)
      var(--ev-space-m-l)
      minmax(50%, 1fr)
      var(--ev-space-m-l);

  grid-template-areas:
    "linked-menu-image linked-menu-image ..                       ..  .."
    "linked-menu-image linked-menu-image ..                       ..  .."
    "linked-menu-image linked-menu-image ..  linked-menu-subtitle ..  "
    "linked-menu-image linked-menu-image ..  linked-menu-title    ..  "
    "linked-menu-image linked-menu-image ..  linked-menu-description .."
    "linked-menu-image linked-menu-image ..  linked-menu-btn      ..  "
    "linked-menu-image linked-menu-image ..                       ..  .."
    "..                ..                ..                    ..  ..";

  grid-template-rows:
      var(--ev-space-2xl)
      var(--ev-space-m-l)
      repeat(4, min-content)
      var(--ev-space-m-l)      
      var(--ev-space-2xl);

  gap: 0;
  position: relative;
  z-index: 1;
}

.linked-menu__item:nth-child(2n+1):not(.no-img)::after {
  content: "";
  background: var(--ev-text-bg);
  grid-column: 2 / -1;          /* starts after the two-col image span */
  grid-row: 2 / -1;
  border: 1px solid var(--ev-border-color);
  z-index: -1;
}

/* ────────────────────────────────────────────────
   EVEN ITEMS  (2, 4, 6…)
   IMAGE + GAP ON THE RIGHT  →  linked-menu-img linked-menu-img
   ──────────────────────────────────────────────── */
.linked-menu__item:nth-child(2n):not(.no-img) {
  /* leadGap | text | spacer | imgGap | img */
  grid-template-columns:
      var(--ev-space-m-l)
      minmax(50%, 1fr)
      var(--ev-space-m-l)
      var(--ev-space-2xl)
      minmax(300px, 600px);

  grid-template-areas:
    ".. ..                       ..  linked-menu-image linked-menu-image"
    ".. ..                       ..  linked-menu-image linked-menu-image"
    ".. linked-menu-subtitle     ..  linked-menu-image linked-menu-image"
    ".. linked-menu-title        ..  linked-menu-image linked-menu-image"
    ".. linked-menu-description  ..  linked-menu-image linked-menu-image"
    ".. linked-menu-btn          ..  linked-menu-image linked-menu-image"
    ".. ..                       ..  linked-menu-image linked-menu-image"
    ".. ..                       ..  ..              ..";

  grid-template-rows:      
      var(--ev-space-2xl)
      var(--ev-space-m-l)
      repeat(4, min-content)
      var(--ev-space-m-l)      
      var(--ev-space-2xl);

  gap: 0;
  position: relative;
  z-index: 1;
}

.linked-menu__item:nth-child(2n):not(.no-img)::after {
  content: "";
  background: var(--ev-text-bg);
  grid-column: 1 / 5;  
  grid-row: 2 / -1;
  border: 1px solid var(--ev-border-color);
  z-index: -1;
}

  .paragraph__item--Centre .paragraph__grid {
    background: var(--ev-text-bg);
    padding: var(--ev-space-m-l);
    border: 1px solid var(--ev-border-color);
  }
  
  .paragraph__item--Gauche .paragraph__grid:not(.no-img) {
    grid-template-areas: ".. ..        .. img img"".. ..        .. img img" ".. title     .. img img" ".. paragraph .. img img" ".. cta       .. img img" ".. ..        .. img img "".. ..        .. ..  .. ";
    grid-template-columns: var(--ev-space-m-l) minmax(50%, 1fr) var(--ev-space-m-l) var(--ev-space-2xl) minmax(300px, 600px);
    grid-template-rows: var(--ev-space-2xl) var(--ev-space-m-l) repeat(3, min-content) var(--ev-space-m-l) var(--ev-space-2xl) auto;
    gap: 0;
    position: relative;
    z-index: 1;
  }
  
  
  .paragraph__item--Gauche .paragraph__grid:not(.no-img)::after {
    content: "";
    background: var(--ev-text-bg);
    grid-column: 1/5;
    grid-row: 2 / -1;
    z-index: -1;
    border: 1px solid var(--ev-border-color);
  }
  
 .paragraph__item--Droite .paragraph__grid:not(.no-img) {
  grid-template-columns:
      minmax(300px, 600px) 
      var(--ev-space-2xl) 
      var(--ev-space-m-l)
      minmax(50%, 1fr)     
      var(--ev-space-m-l);  

  grid-template-areas:
    "img img ..        ..        .."
    "img img ..        ..        .."
    "img img ..        title     .."
    "img img ..        paragraph .."
    "img img ..        cta       .."
    "img img ..        ..        .."
    "..  ..  ..        ..        ..";

  grid-template-rows:
      var(--ev-space-2xl)
      var(--ev-space-m-l)
      repeat(3, min-content)
      var(--ev-space-m-l)
      var(--ev-space-2xl)
      auto;

  gap: 0;
  position: relative;
  z-index: 1;
}

.paragraph__item--Droite .paragraph__grid:not(.no-img)::after {
  content: "";
  background: var(--ev-text-bg);
  grid-column: 2 / -1;   
  grid-row: 2 / -1;
  border: 1px solid var(--ev-border-color);
  z-index: -1;
}
 
.paragraph__item--Centre .paragraph__grid::after {
  content: unset;
}

.paragraph__item--Centre .paragraph__grid {
  grid-template-columns: 0 1fr 0;
}

 
  @media (width > 992px) {
 
    .flexible-form__wrapper {
      margin-inline: auto;
      background-image: url('https://serveur-images.devil-it-applications.fr/marks/upload/pattern.png');
      background-position: top right;
      background-repeat: no-repeat;
    }


    /* .flexible-form__content {
      max-width: 42rem;
    } */
  }

  
  .hero .btn-primary {
    --btn-bg: transparent;
    --btn-color: white;
    --btn-hover-border-color: #fff3;
    --btn-hover-bg: var(--ev-primary);
    --btn-border-color: #ffffff40;
  }
  

.flexible-form .form-check-label {
  border: 1px solid #c0c0c0;
}

.flexible-form .form-check-label {
  color: var(--ev-heading-case);
}

.flexible-form .form-check-input[type="checkbox"]:checked + .form-check-label {
  color: white;
}

.flexible-form__footer {
  margin-top: var(--ev-space-s-m);
}
