/* biojournal.fr : états hover et focus visibles pour les huit rôles
   interactifs, plus les correctifs de géométrie mesurés par les gates.
   Palette du profil : paper #fffdf6, ink #1d3027, accent #303018,
   accent_2 #c77b34, line #cbd7c2. Aucun déplacement de mise en page.
   Aucun envoi, aucune donnée. */

:root {
  --bj-paper: #fffdf6;
  --bj-ink: #1d3027;
  --bj-accent: #303018;
  --bj-accent-2: #c77b34;
  --bj-line: #cbd7c2;
}

/* 1. Fil d'Ariane */
.dn-breadcrumb a[href] {
  transition: color 140ms ease, text-decoration-color 140ms ease;
}
.dn-breadcrumb a[href]:hover {
  color: var(--bj-accent-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dn-breadcrumb a[href]:focus-visible {
  outline: 2px solid var(--bj-accent-2);
  outline-offset: 3px;
  border-radius: 2px;
}

/* 2. Lien auteur (byline et carte auteur) */
.dn-article-author[href],
.dn-author-card h2 a[href],
.dn-author-card__portrait[href] {
  transition: color 140ms ease, opacity 140ms ease;
}
.dn-article-author[href]:hover,
.dn-author-card h2 a[href]:hover {
  color: var(--bj-accent-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dn-author-card__portrait[href]:hover {
  opacity: 0.82;
}
.dn-article-author[href]:focus-visible,
.dn-author-card h2 a[href]:focus-visible,
.dn-author-card__portrait[href]:focus-visible {
  outline: 2px solid var(--bj-accent-2);
  outline-offset: 3px;
  border-radius: 2px;
}

/* 3. Cartes éditoriales (titre et visuel) */
.dn-stream-card h2 a[href],
.dn-stream-card h3 a[href],
.dn-archive-card h2 a[href],
.dn-archive-card h3 a[href],
.dn-more-card h2 a[href],
.dn-more-card h3 a[href],
.dn-related-card h2 a[href],
.dn-related-card h3 a[href],
.dn-lead h2 a[href],
.dn-lead h3 a[href] {
  transition: color 140ms ease;
}
.dn-stream-card h2 a[href]:hover,
.dn-stream-card h3 a[href]:hover,
.dn-archive-card h2 a[href]:hover,
.dn-archive-card h3 a[href]:hover,
.dn-more-card h2 a[href]:hover,
.dn-more-card h3 a[href]:hover,
.dn-related-card h2 a[href]:hover,
.dn-related-card h3 a[href]:hover,
.dn-lead h2 a[href]:hover,
.dn-lead h3 a[href]:hover {
  color: var(--bj-accent-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dn-stream-card a[href]:focus-visible,
.dn-archive-card a[href]:focus-visible,
.dn-more-card a[href]:focus-visible,
.dn-related-card a[href]:focus-visible,
.dn-lead a[href]:focus-visible {
  outline: 2px solid var(--bj-accent-2);
  outline-offset: 3px;
  border-radius: 2px;
}
.dn-stream-card__media[href]:hover,
.dn-archive-card__media[href]:hover,
.dn-more-card__media[href]:hover,
.dn-related-card__media[href]:hover,
.dn-lead__media[href]:hover {
  opacity: 0.86;
}

/* 4. Boutons et CTA */
.dn-form-submit,
.dn-trust__button[href] {
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.dn-form-submit:hover,
.dn-trust__button[href]:hover {
  background-color: var(--bj-ink);
  color: var(--bj-paper);
  border-color: var(--bj-ink);
}
.dn-form-submit:focus-visible,
.dn-trust__button[href]:focus-visible {
  outline: 2px solid var(--bj-accent-2);
  outline-offset: 3px;
}

/* 5. Pagination */
.dn-pagination a[href] {
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}
.dn-pagination a[href]:hover {
  color: var(--bj-paper);
  background-color: var(--bj-accent);
  border-color: var(--bj-accent);
}
.dn-pagination a[href]:focus-visible {
  outline: 2px solid var(--bj-accent-2);
  outline-offset: 3px;
}

/* 6. Liens de footer */
.dn-fleet-footer__links a[href],
.dn-fleet-footer__sections a[href],
.dn-fleet-footer__base a[href] {
  transition: color 140ms ease;
}
.dn-fleet-footer__links a[href]:hover,
.dn-fleet-footer__sections a[href]:hover,
.dn-fleet-footer__base a[href]:hover {
  color: var(--bj-accent-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dn-fleet-footer__links a[href]:focus-visible,
.dn-fleet-footer__sections a[href]:focus-visible,
.dn-fleet-footer__base a[href]:focus-visible {
  outline: 2px solid var(--bj-paper);
  outline-offset: 3px;
}

/* 7. Liens de partage d'article */
.dn-share__link[href] {
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}
.dn-share__link[href]:hover {
  color: var(--bj-paper);
  background-color: var(--bj-accent);
  border-color: var(--bj-accent);
}
.dn-share__link[href]:focus-visible {
  outline: 2px solid var(--bj-accent-2);
  outline-offset: 3px;
}

/* 8. Liens sociaux du footer */
.dn-fleet-footer__social a[href] {
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}
.dn-fleet-footer__social a[href]:hover {
  color: var(--bj-paper);
  background-color: var(--bj-accent);
  border-color: var(--bj-accent);
}
.dn-fleet-footer__social a[href]:focus-visible {
  outline: 2px solid var(--bj-paper);
  outline-offset: 3px;
}

/* Bloc de partage : mise en page aérée, alignée sur le footer d'article. */
.dn-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 20px 0 4px;
}
.dn-share__label {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bj-accent);
}
.dn-share__link[href] {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid var(--bj-accent);
  border-radius: 999px;
  font-size: 14px;
  color: var(--bj-ink);
  text-decoration: none;
}

/* Liens sociaux du footer : tailles exploitables (14 px minimum). */
.dn-fleet-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 0 18px;
}
.dn-fleet-footer__social a[href] {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 253, 246, 0.42);
  border-radius: 999px;
  font-size: 14px;
  color: var(--bj-paper);
  text-decoration: none;
}

/* Bloc « Présenter une campagne » : WordPress peut injecter un <p> vide qui
   décale l'auto-placement et tasse le texte dans une colonne étroite. */
.dn-trust__contact-commercial {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(24px, 5vw, 54px);
}
.dn-trust__contact-commercial > .dn-trust__marketplace-logo {
  flex: 0 0 auto;
  width: 210px;
  max-width: 210px;
}
.dn-trust__contact-commercial > div {
  flex: 1 1 420px;
  min-width: 0;
}
.dn-trust__contact-commercial > p:empty {
  display: none;
}
@media (max-width: 820px) {
  .dn-trust__contact-commercial {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .dn-trust__contact-commercial > .dn-trust__marketplace-logo {
    width: 150px;
    max-width: 150px;
  }
  .dn-trust__contact-commercial > div {
    flex: 1 1 auto;
    width: 100%;
  }
}

body .dn-trust .dn-trust__contact-commercial {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  grid-template-columns: none !important;
  gap: clamp(24px, 5vw, 54px) !important;
}
body .dn-trust .dn-trust__contact-commercial > .dn-trust__marketplace-logo {
  flex: 0 0 auto !important;
  width: 210px !important;
  max-width: 210px !important;
}
body .dn-trust .dn-trust__contact-commercial > div {
  flex: 1 1 420px !important;
  min-width: 0 !important;
  width: auto !important;
}
body .dn-trust .dn-trust__contact-commercial > p:empty {
  display: none !important;
}
@media (max-width: 820px) {
  body .dn-trust .dn-trust__contact-commercial {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  body .dn-trust .dn-trust__contact-commercial > .dn-trust__marketplace-logo {
    width: 150px !important;
    max-width: 150px !important;
  }
  body .dn-trust .dn-trust__contact-commercial > div {
    flex: 1 1 auto !important;
    width: 100% !important;
  }
}

/* Formulaires de confiance : une seule colonne, largeur utile complète. */
.dn-contact-form {
  width: 100%;
  max-width: 100%;
}
@media (max-width: 820px) {
  .dn-contact-form,
  .dn-contact-form input:not([type="hidden"]),
  .dn-contact-form textarea,
  .dn-contact-form select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* --- Correctifs de géométrie mesurés. Aucune image, aucun déplacement de
   contenu. --- */

/* Fil d'Ariane : jamais collé au bas du header quand une page n'a pas de
   bandeau d'ouverture (mesure vertical_rhythm, Rédaction desktop et mobile). */
.dn-breadcrumb {
  margin-top: 18px !important;
}

/* Formulaire de confiance Publicité : centré dans le conteneur éditorial,
   marges symétriques (gate forms_layout, 1440 : 0,769 collé à gauche). */
.dn-contact {
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 38px !important;
}

/* Bloc commercial : padding réduit pour que le contenu utile occupe au moins
   80 % du cadre en mobile (gate commercial_layout). */
.dn-trust__contact-commercial {
  padding: clamp(16px, 3vw, 28px) !important;
}

/* Consentement : la case garde sa taille native, le libellé reprend la
   largeur utile sur une seule ligne fluide, sans troncature. */
.dn-form-consent {
  width: 100% !important;
  height: auto !important;
}
.dn-form-consent label {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  width: 100% !important;
  height: auto !important;
}
.dn-form-consent input[type="checkbox"],
.dn-form-consent input[type="radio"] {
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  margin: 2px 0 0 !important;
}
.dn-form-consent label > span {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
}
@media (max-width: 820px) {
  .dn-contact-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  .dn-contact-form textarea,
  .dn-contact-form select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

/* Rédaction : le portrait reprend une proportion de profil éditorial, garde
   son carré, et le CTA respire avant le bord bas de la carte. */
.dn-team-card__portrait {
  display: block !important;
  width: min(208px, 42vw) !important;
  height: auto !important;
  margin: 0 auto 22px !important;
}
.dn-team-card__portrait img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
}
@media (max-width: 480px) {
  .dn-team-card__portrait {
    width: min(168px, 46vw) !important;
    margin-bottom: 18px !important;
  }
}
.dn-team-card__body {
  padding-bottom: 26px !important;
}
.dn-team-card__link {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin-top: 16px !important;
}

/* Rail publicitaire d'article : présent, strictement vide, neutre. Aucun
   fond coloré, bordure ou placeholder perceptible, desktop comme mobile. */
.dn-article-rail,
.dn-article-rail__slot,
.dn-rail-slot {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.dn-article-rail__slot::before,
.dn-article-rail__slot::after {
  content: none !important;
}

/* Menu desktop : le méga-panneau doit s'ouvrir au survol du déclencheur et
   rester ouvert pendant la traversée du pont vers ses liens. Le parent ne
   l'ouvrait pas au survol (panneau mesuré visibility:hidden, opacity:0,
   pointer-events:none). Le pont couvre l'écart de 6 px entre le déclencheur
   et le panneau, qui est un enfant du <li>. Aucun déplacement de mise en page. */
@media (min-width: 1021px) {
  body.diginov-media .smart-head-main .navigation-main > .menu > li.menu-item-has-children:hover > .sub-menu,
  body.diginov-media .smart-head-main .navigation-main > .menu > li.menu-item-has-children:focus-within > .sub-menu {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  body.diginov-media .smart-head-main .navigation-main .sub-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
  }
  /* Panneau lisible : les vignettes et titres non survolés ne doivent pas
     rester délavés à demi-opacité. */
  body.diginov-media .smart-head-main .mega-menu .dn-loop-post-fallback,
  body.diginov-media .smart-head-main .mega-menu .dn-loop-post-fallback__body,
  body.diginov-media .smart-head-main .mega-menu .dn-loop-post-fallback__media,
  body.diginov-media .smart-head-main .mega-menu .dn-cover {
    opacity: 1 !important;
  }
  body.diginov-media .smart-head-main .mega-menu .dn-loop-post-fallback h3 > a,
  body.diginov-media .smart-head-main .mega-menu h3 > a {
    color: var(--dn-ink) !important;
  }
  body.diginov-media .smart-head-main .mega-menu time,
  body.diginov-media .smart-head-main .mega-menu .dn-meta {
    color: color-mix(in srgb, var(--dn-ink) 72%, var(--dn-paper)) !important;
  }
  /* Focus clavier visible sur les déclencheurs et les liens du panneau. */
  body.diginov-media .smart-head-main .navigation-main > .menu > li.menu-item-has-children > a:focus-visible {
    outline: 2px solid var(--bj-accent-2);
    outline-offset: 2px;
    border-radius: 2px;
  }
  body.diginov-media .smart-head-main .navigation-main .sub-menu a:focus-visible {
    outline: 2px solid var(--bj-accent-2);
    outline-offset: -2px;
  }
}

/* Liens dans les formulaires de confiance : contraste >= 4,5:1 au repos,
   au survol et au focus. */
.dn-contact-form a[href],
.dn-form-consent a[href] {
  color: var(--bj-accent) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dn-contact-form a[href]:hover,
.dn-form-consent a[href]:hover {
  color: var(--bj-ink) !important;
}
.dn-contact-form a[href]:focus-visible,
.dn-form-consent a[href]:focus-visible {
  outline: 2px solid var(--bj-accent-2);
  outline-offset: 2px;
}

/* Bloc commercial de Contact : en mobile, les enfants remplissent la largeur
   utile pour qu'aucune colonne morte ne subsiste (gate commercial_layout,
   Contact 390 : 0,77 < 0,80). */
@media (max-width: 820px) {
  .dn-trust__contact-commercial {
    align-items: stretch !important;
  }
  .dn-trust__contact-commercial > .dn-trust__marketplace-logo {
    width: auto !important;
    max-width: 100% !important;
  }
  .dn-trust__contact-commercial > div {
    width: 100% !important;
  }
}

/* Encart RankSource : en mobile, le padding du bloc est resserre pour que le
   contenu utile occupe au moins 80 % du cadre (gate commercial_layout,
   Publicité 390 : 0,762). Aucune image, aucun texte modifie. */
@media (max-width: 820px) {
  .dn-trust__marketplace {
    padding: 16px !important;
    gap: 18px !important;
  }
  .dn-trust__marketplace-logo img {
    width: min(170px, 100%) !important;
  }
}

/* Bandeau de consentement : tant qu'il est ouvert, le document reserve la
   hauteur du panneau pour qu'il ne masque aucun champ, CTA ni texte
   obligatoire des formulaires (gate forms_layout, contexte froid). La reserve
   disparait des que le panneau est ferme (classe d'etat retiree). */
body:has(.dn-consent-open) {
  padding-bottom: clamp(320px, 50vh, 470px) !important;
}
.dn-consent {
  max-height: 52vh;
  overflow: auto;
  overscroll-behavior: contain;
}
@media (max-width: 820px) {
  .dn-consent {
    max-height: 46vh;
  }
}