/* chambres-hotes-en-france.fr : etats hover et focus visibles pour les huit
   roles interactifs, plus correctifs de geometrie mesures.
   Palette du profil : encre #163047, papier #fffdf8, papier doux #eef5f3,
   accent #b94049, accent 2 #12658c, ligne #c5d5d4, muted #5d6870.
   Aucun deplacement de mise en page. Aucun envoi, aucune donnee. */

:root {
  --cn-ink: #163047;
  --cn-paper: #fffdf8;
  --cn-paper-soft: #eef5f3;
  --cn-accent: #b94049;
  --cn-accent-2: #12658c;
  --cn-line: #c5d5d4;
  --cn-muted: #5d6870;
}

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

/* 2. Lien auteur (byline et cartes auteur/redaction) */
.dn-article-author[href],
.dn-author-card h2 a[href],
.dn-author-card__portrait[href],
.dn-author-hero a[href],
.dn-team-card__link[href] {
  transition: color 140ms ease, opacity 140ms ease;
}
.dn-article-author[href]:hover,
.dn-author-card h2 a[href]:hover,
.dn-author-hero a[href]:hover,
.dn-team-card__link[href]:hover {
  color: var(--cn-accent-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dn-author-card__portrait[href]:hover,
.dn-team-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,
.dn-author-hero a[href]:focus-visible,
.dn-team-card__link[href]:focus-visible,
.dn-team-card__portrait[href]:focus-visible {
  outline: 2px solid var(--cn-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(--cn-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(--cn-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],
.dn-trust__button--secondary[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(--cn-accent-2);
  color: var(--cn-paper);
  border-color: var(--cn-accent-2);
}
.dn-form-submit:focus-visible,
.dn-trust__button[href]:focus-visible {
  outline: 2px solid var(--cn-accent-2);
  outline-offset: 3px;
}

/* 5. Pagination */
.dn-pagination a[href],
.dn-pagination .page-numbers {
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}
.dn-pagination a[href]:hover {
  color: var(--cn-paper);
  background-color: var(--cn-accent);
  border-color: var(--cn-accent);
}
.dn-pagination a[href]:focus-visible {
  outline: 2px solid var(--cn-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: #ffd9c2;
  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(--cn-paper);
  outline-offset: 3px;
}

/* 7. Liens de partage d'article */
.dn-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 22px 0 4px;
}
.dn-share__label {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cn-accent);
}
.dn-share__link[href] {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid var(--cn-accent);
  border-radius: 999px;
  font-size: 14px;
  color: var(--cn-ink);
  text-decoration: none;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}
.dn-share__link[href]:hover {
  color: var(--cn-paper);
  background-color: var(--cn-accent);
  border-color: var(--cn-accent);
}
.dn-share__link[href]:focus-visible {
  outline: 2px solid var(--cn-accent-2);
  outline-offset: 3px;
}

/* 8. Liens sociaux du footer */
.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, 255, 255, 0.42);
  border-radius: 999px;
  font-size: 14px;
  color: var(--cn-paper);
  text-decoration: none;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}
.dn-fleet-footer__social a[href]:hover {
  color: var(--cn-ink);
  background-color: var(--cn-paper);
  border-color: var(--cn-paper);
}
.dn-fleet-footer__social a[href]:focus-visible {
  outline: 2px solid var(--cn-paper);
  outline-offset: 3px;
}

/* --- Correctifs de geometrie mesures (gate vertical_rhythm). --- */

/* Redaction : la grille ne demarre jamais a zero pixel contre le bandeau
   d'ouverture, et le corps de carte garde un padding utile. */
.dn-team-grid {
  padding-top: 28px !important;
}
.dn-team-card__body {
  padding-top: 24px !important;
  padding-bottom: 26px !important;
}
.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%;
}
.dn-team-card__link {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin-top: 16px !important;
}
@media (max-width: 480px) {
  .dn-team-grid {
    padding-top: 18px !important;
  }
  .dn-team-card__body {
    padding-top: 18px !important;
  }
  .dn-team-card__portrait {
    width: min(168px, 46vw) !important;
    margin-bottom: 18px !important;
  }
}

/* Fil d'Ariane : jamais colle au bas du header. */
.dn-breadcrumb {
  margin-top: 18px !important;
}

/* Formulaire de confiance : centre a marges symetriques dans le viewport.
   La page est posee en grid ; on revient a une colonne unique centree pour
   que le formulaire ne soit jamais une largeur intermediaire collee a gauche
   (gate forms_layout). */
.dn-page-layout:has(.dn-contact-form) {
  display: block !important;
}
.dn-page-content:has(.dn-contact-form) {
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.dn-contact {
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 38px !important;
}

/* Bloc ranksource de Publicite : carte moins haute a 1440 pour respecter
   le ratio hauteur/largeur du gate commercial_layout (<= 0.80). Colonne de
   texte elargie, logo et ecarts resserres, titre borne. */
@media (min-width: 1100px) {
  .dn-trust__marketplace {
    grid-template-columns: 168px minmax(0, 1fr) auto !important;
    gap: 22px !important;
    padding: 30px 32px !important;
  }
  .dn-trust__marketplace h2 {
    font-size: clamp(24px, 2.1vw, 30px) !important;
    line-height: 1.14 !important;
  }
}

/* Chapeau de la grille des formats de Publicite : occupe toute la ligne
   pour que les trois cartes restent sur une seule rangee (aucun trou). */
.dn-trust__formats > .dn-trust__kicker {
  grid-column: 1 / -1;
  margin: 0 0 4px;
}

/* Bloc commercial de Contact : le contenu utile occupe le cadre. */
.dn-trust__contact-commercial {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(24px, 5vw, 54px);
  padding: clamp(16px, 3vw, 28px) !important;
}
.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 {
    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%;
  }
}

/* Formulaires : une seule colonne, largeur utile complete, sans overflow. */
.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;
  }
  .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;
  }
  .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;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
  }
}