/* CDT — Navigation Chemin de Traverse */
.cdt-nav {
  --cdt-paper: #d3ab84;
  --cdt-panel: rgba(238, 214, 183, .55);
  --cdt-ink: #3a2c22;
  --cdt-red: #7d2f26;
  --cdt-rule: #8a6340;
  --cdt-rule-soft: rgba(107, 74, 48, .35);
  --cdt-ring: url('https://www.lechemindetraverse.com/wp-content/uploads/2022/07/contour_categ.png');
  --cdt-ring-hover: url('https://www.lechemindetraverse.com/wp-content/uploads/2022/07/contour_categ_hover-2.png');
  --cdt-ring-size: 178px;
  position: relative;
  z-index: 30;
  font-family: 'Special Elite', Georgia, serif;
  color: var(--cdt-ink);
}

/* --- Les 3 entrées --------------------------------------------- */
/* Grille de 3 colonnes qui bascule d'un coup en 1 seule (jamais 2). */
.cdt-nav__bar {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  column-gap: clamp(20px, 5vw, 90px);
  row-gap: 30px;
  padding-top: 14px;
}
.cdt-nav__trigger-item { display: flex; justify-content: center; width: 100%; }
/* En mode large : tous les panneaux passent après la rangée d'entrées. */
.cdt-nav__panel { grid-column: 1 / -1; order: 2; width: 100%; }
@container (max-width: 820px) {
  .cdt-nav__bar { grid-template-columns: 1fr; }
  /* Une colonne : le panneau reprend sa place juste sous SON entrée (accordéon). */
  .cdt-nav__panel { order: 0; }
}
.cdt-nav__trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  max-width: 300px;
  padding-bottom: 14px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: center;
}
.cdt-nav__medallion {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cdt-ring-size, 178px);
  height: var(--cdt-ring-size, 178px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--cdt-ring) center / contain no-repeat;
  /* Le PNG du contour a des marges transparentes : on les rattrape. */
  margin-bottom: -16px;
  transition: transform .28s ease;
}
/* Couche du contour survolé : fondu croisé (préchargée dès le rendu). */
.cdt-nav__medallion::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cdt-ring-hover) center / contain no-repeat;
  opacity: 0;
  transition: opacity .28s ease;
}
.cdt-nav__trigger::after {
  content: "";
  position: absolute;
  inset: auto 0 -34px 0;
  height: 34px;
}
.cdt-nav__trigger { position: relative; }
.cdt-nav__trigger:hover .cdt-nav__medallion,
.cdt-nav__trigger:focus-visible .cdt-nav__medallion,
.cdt-nav__trigger[aria-expanded="true"] .cdt-nav__medallion { transform: scale(1.03); }
.cdt-nav__trigger:hover .cdt-nav__medallion::before,
.cdt-nav__trigger:focus-visible .cdt-nav__medallion::before,
.cdt-nav__trigger[aria-expanded="true"] .cdt-nav__medallion::before { opacity: 1; }
.cdt-nav__medallion img { width: 42%; height: 42%; object-fit: contain; }
.cdt-nav__label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 27px;
  line-height: 1.1;
  color: var(--cdt-red);
  transition: color .25s ease;
}
.cdt-nav__trigger:hover .cdt-nav__label,
.cdt-nav__trigger[aria-expanded="true"] .cdt-nav__label {
  color: var(--cdt-ink);
  font-weight: 600;
}
.cdt-nav__sub {
  font-family: 'Cutive Mono', ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.5 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* --- Panneau déroulant ----------------------------------------- */
.cdt-nav__panel {
  margin-top: 4px;
  border-top: 1px solid var(--cdt-rule);
  border-bottom: 1px solid var(--cdt-rule);
  background: var(--cdt-panel);
  animation: cdt-nav-in .18s ease-out both;
}
.cdt-nav__panel[hidden] { display: none; }
@keyframes cdt-nav-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  .cdt-nav__panel { animation: none; }
  .cdt-nav__medallion, .cdt-nav__medallion::before, .cdt-nav__label, .cdt-nav__card { transition: none; }
}

.cdt-nav__panel-inner { max-width: 1500px; margin: 0 auto; padding: 34px 44px 40px; }
.cdt-nav__kicker {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 26px;
  font-family: 'Cutive Mono', ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #6b4a30;
}
.cdt-nav__kicker::after { content: ""; flex: 1; border-top: 1px solid #a8815a; }

.cdt-nav__grid {
  --cdt-gap-x: 44px;
  --cdt-min: 210px;      /* largeur mini d'une colonne */
  --cdt-max-cols: 5;     /* plafond sur très grand écran */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(
    max(var(--cdt-min), (100% - (var(--cdt-max-cols) - 1) * var(--cdt-gap-x)) / var(--cdt-max-cols))
  , 1fr));
  gap: 30px var(--cdt-gap-x);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Le nombre de lignes suit tout seul : 5 colonnes → 2 lignes,
   4 colonnes → 3 lignes, etc. Aucun media query nécessaire. */

/* Cartes (boutiques / thèmes) */
.cdt-nav__card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cdt-rule-soft);
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
.cdt-nav__card:hover { border-bottom-color: var(--cdt-red); }
.cdt-nav__card-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cdt-nav__card * { margin: 0; }
.cdt-nav__card-icon {
  flex: none;
  width: var(--cdt-item-icon, 28px);
  height: var(--cdt-item-icon, 28px);
  margin-top: 3px;
  object-fit: contain;
  opacity: .85;
  transition: opacity .2s ease;
}
.cdt-nav__card:hover .cdt-nav__card-icon { opacity: 1; }
.cdt-nav__card-title {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  line-height: 1.2 !important;
  color: var(--cdt-red);
}
.cdt-nav__card-desc {
  display: block;
  font-family: 'Cutive Mono', ui-monospace, monospace;
  font-size: 11.5px;
  line-height: 1.6 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #4a3324;
}

/* Groupes (catégories) */
.cdt-nav__group { display: flex; flex-direction: column; gap: 12px; }
.cdt-nav__group-title {
  margin: 0;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(107, 74, 48, .4);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 21px;
  color: var(--cdt-red);
}
.cdt-nav__list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cdt-nav__list a {
  font-family: 'Cutive Mono', ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 1.35 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cdt-ink);
  text-decoration: none;
}
.cdt-nav__list a:hover { color: var(--cdt-red); }

/* Mobile : accordéon empilé */
@media (max-width: 782px) {
  .cdt-nav { --cdt-ring-size: 128px; }
  .cdt-nav__panel-inner { padding: 24px 20px 30px; }
  .cdt-nav__grid { --cdt-gap-x: 24px; --cdt-min: 150px; }
}