/* Identite lot01 afriquenligne.fr. Palette DA ocre/creme/encre. Logo non redessine. */
html body {
  --dn-id-ink: #3c3c4e;
  --dn-id-paper: #fffaf3;
  --dn-id-accent: #b95c08;
  --dn-id-line: #e4d9c8;
  --dn-id-display: Georgia, "Times New Roman", "Noto Serif", serif;
  --dn-id-body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

html body .dn-id-foot,
html body .dn-id-page {
  color: var(--dn-id-ink);
  background: var(--dn-id-paper);
  font-family: var(--dn-id-body);
}

html body .dn-id-foot--afriquenligne {
  border-top: 4px solid var(--dn-id-accent);
  padding: 34px 0 20px;
  margin-top: 48px;
}

html body .dn-id-foot__grid {
  display: grid;
  grid-template-columns: minmax(180px, 244px) minmax(0, 1fr);
  gap: 28px 48px;
  align-items: start;
}

html body .dn-id-foot__brandcol {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

html body .dn-id-brand img {
  display: block;
  width: auto;
  height: auto;
  max-height: 156px;
  max-width: min(220px, 62vw);
  padding: 6px 10px;
  background: var(--dn-id-paper);
  border: 1px solid var(--dn-id-line);
}

html body .dn-id-foot__locality {
  margin: 0;
  font: 400 0.82rem/1.4 var(--dn-id-body);
  color: color-mix(in srgb, var(--dn-id-ink) 78%, transparent);
}

html body .dn-id-foot__label {
  margin: 0 0 12px;
  font: 700 0.72rem/1.2 var(--dn-id-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dn-id-accent);
}

html body .dn-id-foot__sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 30px;
}

html body .dn-id-foot__sections a {
  display: block;
  padding: 4px 0;
  border-bottom: 1px solid var(--dn-id-line);
}

html body .dn-id-foot a {
  color: var(--dn-id-ink);
  text-decoration: none;
  font: 600 0.94rem/1.35 var(--dn-id-body);
}

html body .dn-id-foot a:hover,
html body .dn-id-foot a:focus-visible {
  color: var(--dn-id-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

html body .dn-id-foot__band--2 {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--dn-id-line);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 34px;
}

html body .dn-id-foot__house,
html body .dn-id-foot__base nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

html body .dn-id-foot__ads {
  margin: 0;
  max-width: 34rem;
  font: 400 0.9rem/1.5 var(--dn-id-body);
}

html body .dn-id-foot__ads strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--dn-id-display);
  color: var(--dn-id-ink);
}

html body .dn-id-foot__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 20px;
  margin-top: 22px;
  font: 400 0.8rem/1.45 var(--dn-id-body);
}

html body .dn-id-foot__base button {
  border: 0;
  padding: 0;
  background: none;
  color: var(--dn-id-ink);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

html body .dn-id-kicker {
  margin: 0 0 8px;
  font: 700 0.72rem/1.2 var(--dn-id-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dn-id-accent);
}

html body .dn-id-page__head h1 {
  margin: 0 0 18px;
  font: 700 2.1rem/1.14 var(--dn-id-display);
}

html body .dn-id-page__body {
  max-width: 46rem;
}

html body .dn-id-page__body h2,
html body .dn-id-page__body h3 {
  font-family: var(--dn-id-display);
}

/*
 * Pont de survol du mega-menu desktop.
 *
 * Le theme sert le panneau quelques pixels sous le bas du declencheur. Quand le
 * curseur traverse ce vide, le `li:hover` tombe, le panneau repasse en
 * `pointer-events:none` et disparait avant le clic. Le pseudo-element couvre
 * exactement ce vide, sans agrandir ni deplacer le panneau.
 */
html body .navigation .menu > li.item-mega-menu > .sub-menu.mega-menu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
  background: transparent;
  pointer-events: auto;
}

@media (max-width: 860px) {
  html body .dn-id-foot__grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  html body .dn-id-foot__sections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  html body .dn-id-brand img {
    max-width: 60vw;
    max-height: 132px;
  }
  html body .dn-id-foot__sections {
    gap: 6px 18px;
  }
}

/*
 * Etats hover/focus explicites pour les roles interactifs sans retour
 * mesurable (fil d'Ariane, auteur, pagination) et focus visible global.
 * Aucun deplacement de mise en page, aucune couleur sur les aplats de bouton.
 */
html body .dn-breadcrumb a:hover,
html body [class*="breadcrumb" i] a:hover,
html body a[rel="author"]:hover,
html body .dn-article-author:hover,
html body .dn-id-page__body a:hover,
html body .dn-pagination a:hover,
html body .page-numbers:hover {
  color: var(--dn-id-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible,
html body [tabindex]:focus-visible {
  outline: 3px solid var(--dn-id-accent);
  outline-offset: 2px;
}

/*
 * Pages de confiance composées (bloc ranksource). La mesure de lecture de
 * 46rem ecrasait la grille commerciale en trois colonnes : la copie tombait
 * a un mot par ligne. Le corps s'elargit uniquement quand un bloc dn-trust
 * est present, les sections internes gardant leurs propres largeurs.
 */
html body .dn-id-page__body:has(.dn-trust) {
  max-width: min(1180px, 100%);
}

@media (max-width: 1100px) {
  html body .dn-trust__marketplace {
    grid-template-columns: 1fr;
  }
}

/*
 * Tiroir mobile : le conteneur de logo .ts-logo est vide sur ce domaine et
 * laissait un grand blanc avant le premier lien. On le retire et on resserre
 * l'entete du tiroir, sans toucher au bouton de fermeture ni a la navigation.
 */
html body .mobile-menu-container.off-canvas .off-canvas-head .ts-logo {
  display: none;
}

html body .mobile-menu-container.off-canvas .off-canvas-head {
  padding-top: 10px;
  padding-bottom: 6px;
}

html body .mobile-menu-container.off-canvas .off-canvas-content {
  padding-top: 8px;
}

html body .mobile-menu-container.off-canvas .off-canvas-content .mobile-menu {
  margin-top: 0;
}