/* mlfaq v1.1.0 (+ rubriques repliables, lien d'accueil à droite — 12/11/2026) — page /questions-frequentes et lien de la FAQ d'accueil
   Couleur de marque #fd0065, police du thème. Colonne de droite calquée sur mlpublications. */

.mlfaq, .mlfaq-sidebar {
  --mlfaq-pink: #fd0065;
  --mlfaq-pink-light: #fff0f6;
  --mlfaq-gray-200: #e5e5e5;
  --mlfaq-gray-500: #7a7a7a;
  --mlfaq-gray-700: #3d3d3d;
}

.mlfaq { margin: 0 auto 40px; color: #2b2b2b; }

.mlfaq__intro { font-size: 1rem; line-height: 1.65; margin: 0 0 22px; color: var(--mlfaq-gray-700); max-width: 860px; }
.mlfaq__intro p { margin: 0 0 10px; }
.mlfaq__intro a, .mlfaq__a a, .mlfaq__contact-text a { color: var(--mlfaq-pink); text-decoration: underline; text-underline-offset: 2px; }
.mlfaq__intro a:hover, .mlfaq__a a:hover, .mlfaq__contact-text a:hover { color: #c8004f; }

/* ── Mise en page 2 colonnes ─────────────────────────────────────────────── */
.mlfaq-layout { display: flex; gap: 32px; align-items: flex-start; }
.mlfaq-main { flex: 1 1 0; min-width: 0; }
.mlfaq-sidebar { flex: 0 0 280px; width: 280px; position: sticky; top: 16px; }

/* ── Colonne de droite ───────────────────────────────────────────────────── */
.mlfaq-sidebar__bloc { background: #fff; border: 1px solid var(--mlfaq-gray-200); padding: 14px 16px; margin-bottom: 16px; }
.mlfaq-sidebar__titre {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--mlfaq-gray-500); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--mlfaq-gray-200);
}
.mlfaq-toc ul, .mlfaq-toc ul li { list-style: none !important; margin: 0; padding: 0; }
.mlfaq-toc li { margin-bottom: 5px; }
.mlfaq-toc li::before { display: none !important; }
.mlfaq-toc a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: 13px; line-height: 1.4; color: var(--mlfaq-pink); text-decoration: none;
  padding: 4px 0 4px 10px; border-left: 2px solid var(--mlfaq-gray-200);
  transition: border-color .15s, background .15s, padding-left .1s;
}
.mlfaq-toc a:hover, .mlfaq-toc a.is-active { border-left-color: var(--mlfaq-pink); background: var(--mlfaq-pink-light); padding-left: 14px; }
.mlfaq-toc a.is-active { font-weight: 600; }
.mlfaq-toc__nb { font-size: 11px; color: var(--mlfaq-gray-500); font-weight: 400; padding-right: 4px; }

.mlfaq-sidebar__contenu { font-size: 13px; line-height: 1.6; color: var(--mlfaq-gray-700); }
.mlfaq-sidebar__contenu p { margin: 0 0 .6em; }
.mlfaq-sidebar__contenu p:last-child { margin-bottom: 0; }
.mlfaq-sidebar__contenu ul { list-style: none; margin: 0; padding: 0; }
.mlfaq-sidebar__contenu li { margin: 0 0 6px; padding-left: 14px; position: relative; }
.mlfaq-sidebar__contenu li::before { content: "›"; position: absolute; left: 2px; top: 0; color: var(--mlfaq-pink); font-weight: 700; }
.mlfaq-sidebar__contenu a { color: var(--mlfaq-pink); text-decoration: none; }
.mlfaq-sidebar__contenu a:hover { text-decoration: underline; }

/* ── Rubriques et questions ──────────────────────────────────────────────── */
.mlfaq__cat { margin: 0 0 30px; scroll-margin-top: 90px; }
.mlfaq__cat-title { font-size: 1.25rem; font-weight: 700; color: var(--mlfaq-pink); margin: 0 0 12px; }

/* Titre de rubrique = bouton d'ouverture (rubriques repliables, 12/11/2026) */
.mlfaq__cat-toggle {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; width: 100%;
  margin: 0; padding: 0; border: 0; background: none; text-align: left;
  font: inherit; color: inherit; cursor: default; position: relative;
}
.mlfaq__cat-nb { font-size: .8rem; font-weight: 400; color: var(--mlfaq-gray-500); }
.mlfaq__cat-toggle:focus-visible { outline: 2px solid var(--mlfaq-pink); outline-offset: 3px; }

/* Repli actif seulement si JavaScript est disponible (classe posée par la page) */
.mlfaq-js .mlfaq__cat { margin: 0; border-bottom: 1px solid var(--mlfaq-gray-200); }
.mlfaq-js .mlfaq__cat-title { margin: 0; }
.mlfaq-js .mlfaq__cat-toggle { cursor: pointer; padding: 18px 40px 18px 2px; }
.mlfaq-js .mlfaq__cat-toggle:hover .mlfaq__cat-nom { text-decoration: underline; text-underline-offset: 3px; }
.mlfaq-js .mlfaq__cat-toggle::after {
  content: ""; position: absolute; right: 10px; top: 50%;
  width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-75%) rotate(45deg); transition: transform .2s;
}
.mlfaq-js .mlfaq__cat.is-open .mlfaq__cat-toggle::after { transform: translateY(-25%) rotate(-135deg); }
.mlfaq-js .mlfaq__cat:not(.is-open) > .mlfaq__list { display: none; }
.mlfaq-js .mlfaq__cat.is-open > .mlfaq__list { margin-bottom: 22px; }
.mlfaq-js .mlfaq__cat:first-child { border-top: 1px solid var(--mlfaq-gray-200); }
.mlfaq-js .mlfaq__item:last-child { border-bottom: 0; }

.mlfaq__list { border-top: 1px solid #ececec; }
.mlfaq__item { border-bottom: 1px solid #ececec; scroll-margin-top: 90px; }
.mlfaq__q {
  list-style: none; cursor: pointer; position: relative;
  padding: 16px 40px 16px 2px; font-weight: 600; font-size: 1rem; line-height: 1.4;
}
.mlfaq__q::-webkit-details-marker { display: none; }
.mlfaq__q::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; font-weight: 400; color: var(--mlfaq-pink); line-height: 1;
}
.mlfaq__item[open] > .mlfaq__q::after { content: "\2212"; }
.mlfaq__q:hover { color: var(--mlfaq-pink); }
.mlfaq__q:focus-visible { outline: 2px solid var(--mlfaq-pink); outline-offset: 2px; }
.mlfaq__a { padding: 0 2px 18px; font-size: .97rem; line-height: 1.65; color: var(--mlfaq-gray-700); }
.mlfaq__a p { margin: 0 0 10px; }
.mlfaq__a p:last-child { margin-bottom: 0; }
.mlfaq__a ul, .mlfaq__a ol { margin: 0 0 10px 20px; padding: 0; }
.mlfaq__a li { margin: 3px 0; }

.mlfaq__empty { padding: 20px 0; color: #6b6b6b; }

/* ── Bloc contact ────────────────────────────────────────────────────────── */
.mlfaq__contact { margin-top: 36px; padding: 22px 24px; border: 1px solid #f3c2d6; border-radius: 12px; background: #fff6fa; }
.mlfaq__contact-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 6px; color: #2b2b2b; }
.mlfaq__contact-text { font-size: .95rem; line-height: 1.6; color: var(--mlfaq-gray-700); }
.mlfaq__contact-text p { margin: 0 0 8px; }
.mlfaq__contact-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.mlfaq__btn {
  display: inline-block; padding: 10px 18px; border-radius: 8px; border: 1px solid var(--mlfaq-pink);
  color: var(--mlfaq-pink); background: #fff; font-weight: 600; font-size: .92rem; text-decoration: none;
}
.mlfaq__btn:hover { background: #fff0f6; color: #c8004f; text-decoration: none; }
.mlfaq__btn--main { background: var(--mlfaq-pink); color: #fff; }
.mlfaq__btn--main:hover { background: #e0005a; color: #fff; }

/* ── FAQ de la page d'accueil : lien vers la page complète ───────────────── */
.mlfaq-home__all { text-align: right; margin: 14px 0 0; }
.mlfaq-home__all a { color: #fd0065; font-weight: 600; text-decoration: none; }
.mlfaq-home__all a::after { content: " →"; }
.mlfaq-home__all a:hover { text-decoration: underline; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .mlfaq-layout { flex-direction: column; gap: 8px; }
  .mlfaq-sidebar { flex: none; width: 100%; position: static; order: -1; }
  /* Sur mobile : seul le sommaire reste en tête de page, comme sur les articles */
  .mlfaq-sidebar .mlfaq-sidebar__bloc:not(.mlfaq-sidebar__sommaire) { display: none; }
  .mlfaq__q { font-size: .95rem; padding: 14px 34px 14px 0; }
  .mlfaq__contact { padding: 18px 16px; }
  .mlfaq__btn { flex: 1 1 100%; text-align: center; }
}