/* Pont de survol du sous-menu desktop : le panneau s'ouvrait mais se fermait
   avant que le pointeur l'atteigne (visible=true, held=false). On prolonge la
   zone survolable du declencheur jusqu'au panneau et on supprime l'ecart. */
@media (min-width: 1025px) {
  .navigation-main .menu > li.menu-item-has-children,
  .navigation .menu > li.menu-item-has-children {
    position: relative;
  }

  .navigation-main .menu > li.menu-item-has-children::after,
  .navigation .menu > li.menu-item-has-children::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 28px;
    display: block;
    background: transparent;
    pointer-events: auto;
  }

  .navigation-main .menu > li.menu-item-has-children > .sub-menu:not(.mega-menu),
  .navigation .menu > li.menu-item-has-children > .sub-menu:not(.mega-menu) {
    margin-top: 0 !important;
    top: calc(100% - 10px) !important;
  }

  /* Le mega-menu centre sur son item debordait a gauche (x=-111) et le
     pointeur quittait la zone survolable. On le centre sur le viewport. */
  .navigation-main .menu > li.menu-item-has-children > .sub-menu.mega-menu,
  .navigation .menu > li.menu-item-has-children > .sub-menu.mega-menu {
    position: fixed !important;
    left: 50% !important;
    top: 168px !important;
    transform: translateX(-50%) !important;
    max-width: 100vw !important;
  }

  .navigation-main .menu > li.menu-item-has-children > .sub-menu::before,
  .navigation .menu > li.menu-item-has-children > .sub-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -28px;
    height: 28px;
    display: block;
    background: transparent;
  }
}

/* Le logo source porte sa reserve #22232f (be blanc + MARKETING rouge). Le
   brief interdit de le recolorer et aucune variante claire officielle
   n'existe : la rangee de marque du masthead recoit donc la meme reserve, ce
   qui fait disparaitre la boite sombre sur fond clair signalee en revue DA. */
html body.diginov-media .smart-head-row.smart-head-mid {
  background: #22232f !important;
  background-color: #22232f !important;
}

html body.diginov-media .smart-head-row.smart-head-mid .logo-link,
html body.diginov-media .smart-head-row.smart-head-mid .search-icon,
html body.diginov-media .smart-head-row.smart-head-mid .ts-search-icon,
html body.diginov-media .smart-head-row.smart-head-mid .search-link {
  color: #ffffff;
}

/* Identite bemarketing.fr : reserve #22232f du logo source, aucune recoloration.
   Le logo natif 246x50 est servi avec sa reserve d'un quart de hauteur ; on ne
   force ni filtre ni inversion. Seules les dimensions rendues sont securisees. */
.smart-head .logo-image,
.main-head .logo-image,
.ts-logo .logo-image {
  width: auto;
  height: auto;
  max-width: 148px;
  max-height: 46px;
  object-fit: contain;
}

.dn-footer-brand__logo,
.dn-footer-brand__logo--light,
.dn-footer-brand__logo--dark {
  width: auto;
  height: auto;
  max-width: 216px;
  max-height: 62px;
  object-fit: contain;
}

/* Etats hover/focus des roles interactifs (breadcrumb, author, pagination,
   sharing_link, social_link) : changement visible et focus clavier sans
   deplacement de mise en page. Couleurs de la palette approuvee. */
.dn-breadcrumb a:hover,
.dn-breadcrumb a:focus-visible,
a.dn-article-author:hover,
a.dn-article-author:focus-visible,
.dn-author-card h2 a:hover,
.dn-author-card h2 a:focus-visible,
.dn-author-card__portrait:hover,
.dn-author-card__portrait:focus-visible,
.dn-share__link:hover,
.dn-share__link:focus-visible,
.dn-fleet-footer__social a:hover,
.dn-fleet-footer__social a:focus-visible {
  color: #df171c;
  text-decoration: underline;
}

.dn-pagination a:hover,
.dn-pagination a:focus-visible {
  background-color: #22232f;
  color: #ffffff;
}

.dn-breadcrumb a:focus-visible,
a.dn-article-author:focus-visible,
.dn-author-card h2 a:focus-visible,
.dn-author-card__portrait:focus-visible,
.dn-pagination a:focus-visible,
.dn-share__link:focus-visible,
.dn-fleet-footer__social a:focus-visible {
  outline: 2px solid #df171c;
  outline-offset: 2px;
}

/* Bloc ranksource Publicité : la 3e colonne `auto` ecrasait le CTA en une
   colonne de 78 px, texte casse. On passe a deux colonnes et on pose le CTA
   sous le texte, largeur max-content. */
/* Encart RankSource : la carte etait presque carree (648 x 658) et trop
   verticale. On l'elargit au-dela de la colonne editoriale et on repasse en
   trois colonnes logo / texte / CTA, sur une seule ligne. */
@media (min-width: 1025px) {
  .dn-trust--advertising .dn-trust__marketplace,
  body.diginov-media .dn-trust__contact-commercial {
    width: min(1120px, calc(100vw - 64px)) !important;
    max-width: none !important;
    margin-left: calc((100% - min(1120px, calc(100vw - 64px))) / 2) !important;
    align-items: stretch !important;
  }

  .dn-trust--advertising .dn-trust__marketplace {
    grid-template-columns: 200px minmax(0, 1fr) auto !important;
    gap: clamp(24px, 3vw, 44px);
  }

  .dn-trust--advertising .dn-trust__marketplace > p {
    grid-column: auto;
    justify-self: end;
    margin: 0;
  }

  .dn-trust--advertising .dn-trust__marketplace > .dn-trust__marketplace-logo,
  .dn-trust__contact-commercial > .dn-trust__marketplace-logo {
    align-self: stretch !important;
  }
}

.dn-trust__marketplace .dn-trust__button {
  white-space: nowrap;
  width: max-content;
  max-width: 100%;
}

/* Le rendu du contenu de la page Contact injecte un `</p>` orphelin apres le
   logo ranksource : le navigateur cree alors un <p> vide qui occupe la 2e
   colonne de la grille et repousse le texte dans la colonne etroite. On
   neutralise ce noeud vide et on etire les colonnes pour supprimer la colonne
   morte. */
.dn-trust__contact-commercial > p:empty {
  display: none !important;
}

.dn-trust .dn-trust__contact-commercial,
aside.dn-trust__contact-commercial {
  align-items: stretch !important;
}

.dn-trust .dn-trust__contact-commercial > .dn-trust__marketplace-logo,
aside.dn-trust__contact-commercial > .dn-trust__marketplace-logo {
  align-self: stretch !important;
  min-height: 100%;
}

/* Boutons des blocs Publicité/Contact : contraste >= 4.5 au repos, au survol et
   au focus. Encre sur papier inversee, accent de marque au survol. */
.dn-trust__button,
.dn-trust__button:link,
.dn-trust__button:visited {
  background-color: #22232f !important;
  color: #ffffff !important;
  border-color: #22232f !important;
}

.dn-trust__button:hover,
.dn-trust__button:focus-visible {
  background-color: #df171c !important;
  color: #ffffff !important;
  border-color: #df171c !important;
}

.dn-trust__button:focus-visible {
  outline: 2px solid #df171c;
  outline-offset: 2px;
}

/* Le theme force `color: #a74f3d !important` sur `.dn-page-content a` avec une
   specificite tres haute. On la depasse pour garantir le contraste du CTA. */
html body.diginov-media.diginov-brand-bemarketing-fr .dn-page-content .dn-trust__button,
html body.diginov-media.diginov-brand-bemarketing-fr .dn-page-content .dn-trust__button:link,
html body.diginov-media.diginov-brand-bemarketing-fr .dn-page-content .dn-trust__button:visited,
html body.diginov-media.diginov-brand-bemarketing-fr.diginov-trust-body .dn-page-content .dn-trust__button,
html body.diginov-media.diginov-brand-bemarketing-fr.diginov-trust-body .dn-page-content .dn-trust__button:link,
html body.diginov-media.diginov-brand-bemarketing-fr.diginov-trust-body .dn-page-content .dn-trust__button:visited {
  color: #ffffff !important;
  background-color: #22232f !important;
  border-color: #22232f !important;
}

html body.diginov-media.diginov-brand-bemarketing-fr .dn-page-content .dn-trust__button:hover,
html body.diginov-media.diginov-brand-bemarketing-fr .dn-page-content .dn-trust__button:focus-visible,
html body.diginov-media.diginov-brand-bemarketing-fr.diginov-trust-body .dn-page-content .dn-trust__button:hover,
html body.diginov-media.diginov-brand-bemarketing-fr.diginov-trust-body .dn-page-content .dn-trust__button:focus-visible {
  color: #ffffff !important;
  background-color: #df171c !important;
  border-color: #df171c !important;
}

.dn-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 26px 0 8px;
  font-size: 14px;
}

.dn-share__label {
  font-weight: 600;
}

.dn-share a[href],
.dn-share a[href]:link,
.dn-share a[href]:visited {
  color: #22232f !important;
  text-decoration: none !important;
  background-color: transparent !important;
}

.dn-share a[href]:hover,
.dn-share a[href]:focus-visible {
  color: #df171c !important;
  text-decoration: underline !important;
  background-color: #f1eff4 !important;
}

.dn-fleet-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 12px 0;
  font-size: 14px;
}

@media (max-width: 767px) {
  .smart-head .logo-image,
  .main-head .logo-image,
  .ts-logo .logo-image {
    max-width: 118px;
    max-height: 38px;
  }
  .dn-footer-brand__logo,
  .dn-footer-brand__logo--light,
  .dn-footer-brand__logo--dark {
    max-width: 180px;
    max-height: 52px;
  }
}