/* ════════════════════════════════════════════════════════════
   FOOTER MOBILE  (composant reutilisable)
   Brand + tagline (harmonisee si 2 lignes) + divider bleu +
   3 accordeons facon FAQ (Navigation / Contact / Legal) +
   ligne discrete centree en bas.
   A inclure via :
     <div id="footer-mobile-placeholder"></div>
     <script src="<.../>js/footer-mobile.js"></script>
   ════════════════════════════════════════════════════════════ */

#footer-mobile-placeholder { min-height: 470px; }

.mfoot {
  background:
    radial-gradient(circle at top left,  rgba(179,138,71,.10) 0%, transparent 50%),
    radial-gradient(circle at top right, rgba(179,138,71,.10) 0%, transparent 50%),
    linear-gradient(180deg, #111 0%, #080808 100%);
  border-top: 2px solid var(--blue);
  padding: 44px 20px 26px;
}

/* ─── Brand + tagline ─── */
.mfoot__brand {
  width: fit-content;          /* la boite epouse le texte -> sert de reference au divider */
  text-align: center;
  margin: 0 auto 8px;
  font-family: 'Cinzel', serif;
  color: var(--gold);
  font-size: 24px;
  letter-spacing: 0.08em;
}
.mfoot__tagline {
  text-align: center;
  margin: 0 auto 22px;
  max-width: 320px;            /* favorise un retour en 2 lignes equilibrees */
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: #7a7a7a;
  text-wrap: balance;          /* harmonise les 2 lignes */
}

/* ─── Divider bleu ─── */
/* La largeur est calee sur celle du texte "Cedric Training" via le JS.
   La valeur ci-dessous n'est qu'un repli avant l'execution du script. */
.mfoot__divider {
  width: 220px;
  height: 2px;
  margin: 0 auto 30px;
  background: var(--blue);
}

/* ─── Accordeons (meme style que la FAQ) ─── */
.mfoot__acc {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 460px;
  margin: 0 auto;
}
.mfoot__item {
  background: #141414;
  border: 1px solid #1f1f1f;
  border-radius: 4px;
  overflow: hidden;
}
.mfoot__head {
  position: relative;
  list-style: none;
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-size: 14px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 17px 50px 17px 18px;
  transition: color .2s;
}
.mfoot__head::-webkit-details-marker { display: none; }
.mfoot__head::after {
  content: '+';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  font-weight: 300;
  color: var(--gold);
  transition: transform .2s;
}
.mfoot__item[open] .mfoot__head::after { transform: translateY(-50%) rotate(45deg); }

.mfoot__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 2px 18px 20px;
}
.mfoot__body a {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: #C9C9C9;
  transition: color .2s;
}
.mfoot__body a:hover { color: var(--gold); }

/* ─── Ligne discrete en bas ─── */
.mfoot__place {
  text-align: center;
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid #1e1e1e;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #666;
}