/* =========================================================
   dx_sections.css — styles utilisés par Hotesses + catégories
   (consolidé : sections, grilles, cartes, chips, FAQ, CTA)
   ========================================================= */

:root{
  --dx-pink:#F10082;
  --dx-chip-bg:#f5f5f5;        /* gris très léger */
  --dx-chip-bg-hover:#efefef;  /* au survol */
}

/* --- Sections & titres --- */
.dx-section{ max-width:980px; margin:1rem auto; padding:0 1rem; }
.dx-section h2{ font-size:clamp(1.25rem,2.6vw,1.6rem); margin:.6rem 0 .4rem; }

/* --- Listes & textes --- */
.dx-ol{ line-height:1.8; margin:.3rem 0 .5rem 1.2rem; }
.dx-ul{ line-height:1.8; margin:.3rem 0 0 1.2rem; }
.dx-muted{ color:#666; }

/* --- CTA bouton (fallback texte) --- */
.dx-cta{
  display:inline-block;
  padding:.85rem 1.2rem;
  border-radius:12px;
  border:1px solid var(--dx-pink);
  background:var(--dx-pink);
  color:#fff;
  text-decoration:none;
  font-weight:800;
}

/* --- CTA image (logo cliquable) --- */
.dx-ctaimg{ text-align:center; margin:.6rem 0; }
.dx-ctaimg a{ display:inline-block; }
.dx-ctaimg img{
  display:block;
  margin:0 auto;
  height:auto;
  max-width:min(520px,92vw);   /* ajuste si besoin ; ex: max-height:90px */
}

/* --- Grille réutilisable --- */
.dx-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px; }
.dx-col-6{ grid-column:span 6; min-width:260px; }
@media (max-width:820px){
  .dx-col-6{ grid-column:span 12; }
}

/* --- Carte (fallback si non défini ailleurs) --- */
.dx-card{ border:1px solid #eee; border-radius:.75rem; padding:1rem; }

/* --- Bandeau de catégories (chips) --- */
.dx-chiprow{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;      /* centrage horizontal */
}

.chip{
  display:inline-block;
  padding:.55rem .8rem;
  border:1px solid #e8e8e8;
  border-radius:999px;
  background:var(--dx-chip-bg);
  color:var(--dx-pink);
  font-weight:800;             /* texte rose gras */
  text-decoration:none;
}

.chip:hover{ background:var(--dx-chip-bg-hover); }

.chip:focus-visible{
  outline:2px solid #4d90fe;
  outline-offset:2px;
  border-radius:999px;
}

/* État actif (si tu mets aria-current="page" sur la puce courante) */
.chip[aria-current="page"]{
  background:#ececec;
  border-color:#dedede;
}
/* === Puce active : outline rose marqué + extras (Option B) === */
.chip[aria-current="page"]{
  background:#ececec;                 /* fond un peu plus foncé */
  border-color: var(--dx-pink);       /* bord rose visible */
  border-width: 2px;                  /* bord plus épais */
  color: var(--dx-pink);              /* texte rose */
  box-shadow: 0 0 0 2px rgba(241,0,130,.12); /* anneau discret */
  transform: translateZ(0) scale(1.02);      /* micro-zoom */
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.chip[aria-current="page"]:hover,
.chip[aria-current="page"]:focus{
  background:#e8e8e8;                 /* léger feedback au survol/focus */
}

/* Focus accentué pour l’accessibilité */
.chip[aria-current="page"]:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--dx-pink);
}

/* --- FAQ --- */
.dx-faq details{ margin:.4rem 0; }
.dx-faq details>div{ padding:.5rem 0; line-height:1.65; }