/* aurelia-deco.fr : etats hover et focus visibles pour les huit roles
   interactifs. Palette du profil : paper #fffdfb, ink #283238,
   accent #167677, accent_2 #b43a38, line #c9d9d5.
   Aucun deplacement de mise en page. Aucun envoi, aucune donnee. */

:root {
  --ad-paper: #fffdfb;
  --ad-ink: #283238;
  --ad-accent: #167677;
  --ad-accent-2: #b43a38;
  --ad-line: #c9d9d5;
}

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

/* 3. Cartes editoriales (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(--ad-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(--ad-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(--ad-accent-2);
  color: var(--ad-paper);
  border-color: var(--ad-accent-2);
}
.dn-form-submit:focus-visible,
.dn-trust__button[href]:focus-visible {
  outline: 2px solid var(--ad-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(--ad-paper);
  background-color: var(--ad-accent);
  border-color: var(--ad-accent);
}
.dn-pagination a[href]:focus-visible {
  outline: 2px solid var(--ad-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(--ad-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(--ad-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(--ad-paper);
  background-color: var(--ad-accent);
  border-color: var(--ad-accent);
}
.dn-share__link[href]:focus-visible {
  outline: 2px solid var(--ad-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(--ad-paper);
  background-color: var(--ad-accent);
  border-color: var(--ad-accent);
}
.dn-fleet-footer__social a[href]:focus-visible {
  outline: 2px solid var(--ad-paper);
  outline-offset: 3px;
}

/* Bloc de partage : mise en page aeree, alignee 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(--ad-accent);
}
.dn-share__link[href] {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid var(--ad-accent);
  border-radius: 999px;
  font-size: 14px;
  color: var(--ad-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, 251, 0.42);
  border-radius: 999px;
  font-size: 14px;
  color: var(--ad-paper);
  text-decoration: none;
}

/* Bloc « Presenter une campagne » de Contact : WordPress peut injecter un <p>
   vide qui decale l'auto-placement de la grille et tasse le texte dans une
   colonne etroite avec un vide mort. Le flex est robuste a ce noeud parasite. */
.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,
.dn-trust__contact-commercial > p:blank {
  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%;
  }
}

/* Renfort de specificite contre le style inline du mu-plugin. */
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,
body .dn-trust .dn-trust__contact-commercial > p:blank {
  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 complete,
   sans debordement mobile. */
.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 geometrie mesures (gates forms_layout, commercial_layout,
   vertical_rhythm). Aucun deplacement de contenu, aucune image. --- */

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

/* Formulaire de confiance : centre dans le conteneur editorial, marges
   symetriques (gate forms_layout, Publicité 1440 : 0.86 colle a gauche). */
.dn-contact {
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 38px !important;
}

/* Bloc commercial de Contact : padding reduit 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;
}

/* --- Correctif retour Marc du 20 septembre (bundle 4ae04192). --- */

/* Contact 390 : la case a cocher du consentement ne doit jamais prendre la
   largeur du champ. Elle mesurait 304 px et ecrasait son libelle a 10 px,
   rendu caractere par caractere sur 1 656 px de haut. La case garde sa taille
   native, le libelle reprend toute la largeur utile sur une seule ligne fluide,
   sans hauteur artificielle ni 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;
  }
}

/* Redaction 390/1440 : le portrait occupait toute la largeur de la carte
   (362 px en mobile, 860 px en desktop, image 360 px agrandie). Il reprend une
   proportion de profil editorial, garde son carre, et le CTA « Voir N articles »
   respire nettement avant le bord bas de la carte. La bio n'est jamais tronquee. */
.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;
}

/* --- Encart RankSource (retour Marc du 20 septembre, 07h43 Paris). --- */

/* En 390 px la grille 200px / minmax(0,1fr) / auto ecrasait la colonne de
   texte a zero et faisait deborder le CTA : l encart etait coupe et semblait
   omettre RankSource. Sous 820 px, l encart devient une pile : logo, titre,
   corps et CTA empiles, chacun entier, sans debordement horizontal. */
@media (max-width: 820px) {
  .dn-trust__marketplace {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    justify-items: start !important;
    align-items: start !important;
  }
  .dn-trust__marketplace > .dn-trust__marketplace-logo,
  .dn-trust__marketplace > .dn-trust__marketplace-logo img {
    width: min(150px, 60%) !important;
    max-width: 150px !important;
    height: auto !important;
  }
  .dn-trust__marketplace > div {
    width: 100% !important;
    min-width: 0 !important;
  }
  .dn-trust__marketplace > p {
    width: 100% !important;
    margin: 0 !important;
  }
  .dn-trust__marketplace .dn-trust__button {
    justify-self: start !important;
    max-width: 100% !important;
    text-align: left;
  }
}

/* Securite de largeur pour que le corps ne soit jamais tasse a cote du CTA. */
.dn-trust__marketplace > div {
  min-width: 0 !important;
}
.dn-trust__marketplace > div p,
.dn-trust__marketplace > div h2 {
  overflow-wrap: break-word;
}

/* Encart RankSource en desktop : la grille centrait chaque colonne a sa
   hauteur de contenu, ce qui laissait plus de 45 % du cadre vide et bloquait
   le preflight (commercial_layout_dead_column). Les colonnes prennent la
   hauteur de la ligne, leur contenu reste centre : plus de vide mort, sans
   deplacer le logo, le titre, le corps ni le CTA. */
@media (min-width: 821px) {
  .dn-trust__marketplace {
    align-items: stretch !important;
  }
  .dn-trust__marketplace > .dn-trust__marketplace-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  .dn-trust__marketplace > div {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    width: 100% !important;
  }
  .dn-trust__marketplace > p {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
  }
}