/* ============================================================
   Fara Mic Record — page d'accueil
   ============================================================ */

.fmr-home > * { margin-left: 0 !important; margin-right: auto !important; }

/* ---------- Hero ---------- */

.fmr-hero { padding: 40px 0 24px; }
.fmr-hero > * { margin-left: 0 !important; margin-right: auto !important; }

.fmr-eyebrow--dot { display: flex; align-items: center; gap: 11px; }
.fmr-eyebrow--dot::before {
  content: '';
  width: 7px; height: 7px; flex: none;
  border-radius: 50%;
  background: var(--accent);
  animation: fmr-pulse 1.8s ease-in-out infinite;
}

.fmr-hero-title { margin: 0; max-width: none; }
.fmr-hero-brand {
  display: block;
  font-size: clamp(54px, 10.6vw, 150px);
  line-height: .83;
  letter-spacing: -.035em;
  font-weight: 900;
  text-wrap: balance;
}
.fmr-hero-sub {
  display: block;
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--t45);
  letter-spacing: .14em;
}

.fmr-home .fmr-lede {
  margin: 32px 0 0;
  max-width: 52ch;
  font-size: 17.5px;
  line-height: 1.55;
  color: rgba(237, 234, 245, .65);
}

/* ---------- Formules ---------- */

.fmr-formulas { margin-top: 28px; max-width: 520px; }
.fmr-formula {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px solid var(--border-soft);
}
.fmr-formula-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--t35);
  flex: none;
}
.fmr-formula-name { flex: 1; font-size: 15.5px; font-weight: 700; color: var(--fg); }
.fmr-formula-price { font-family: var(--mono); font-size: 13px; color: var(--accent); white-space: nowrap; }

.fmr-home .fmr-cta { margin-top: 32px; gap: 14px; }

/* ---------- Atouts : grille en filets ---------- */

.fmr-sr-label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.fmr-features {
  margin-top: 72px;
  gap: 1px !important;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
}
.fmr-features > .wp-block-column { background: var(--bg); }
.fmr-feature { padding: 30px 26px; }
.fmr-feature > * { margin-left: 0 !important; }
.fmr-feature-n {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--accent);
}
.fmr-feature-t {
  margin: 16px 0 0;
  font-family: var(--display);
  font-variation-settings: 'wdth' var(--wd);
  font-size: 17px;
  font-weight: 700;
  color: var(--fg);
}
.fmr-feature-d { margin: 9px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--t55); }

/* ---------- Etapes ---------- */

.fmr-steps { margin-top: 28px; gap: 22px; }
.fmr-step { padding: 18px 0 0; border-top: 2px solid var(--border-strong); }
.fmr-step > * { margin-left: 0 !important; }
.fmr-step-n {
  margin: 0;
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 600;
  color: rgba(159, 79, 255, .5);
}
.fmr-step-t { margin: 12px 0 0; font-size: 16px; font-weight: 700; color: var(--fg); }
.fmr-step-d { margin: 7px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--t55); }

/* ---------- Titres de section ---------- */

.fmr-home h2.fmr-h2 {
  margin: 80px 0 20px;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -.02em;
  max-width: 24ch;
}
.fmr-home h2.fmr-h2 + p { margin-top: 0; max-width: 64ch; }
.fmr-home > p { max-width: 64ch; }
.fmr-home .wp-block-buttons { margin-top: 24px; }

/* ---------- FAQ en accordeon natif ---------- */

.fmr-faq {
  border-bottom: 1px solid var(--border);
  padding: 0;
}
.fmr-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--fg);
  transition: padding-left 420ms cubic-bezier(.22, .68, 0, 1);
}
.fmr-faq summary::-webkit-details-marker { display: none; }
.fmr-faq summary::after {
  content: '+';
  flex: none;
  font-family: var(--mono);
  font-size: 18px;
  color: var(--accent);
  transition: transform 420ms cubic-bezier(.22, .68, 0, 1);
}
.fmr-faq[open] summary::after { content: '\2014'; }
.fmr-faq:hover summary, .fmr-faq[open] summary { padding-left: 8px; }
.fmr-faq p {
  margin: 0;
  padding: 0 0 20px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(237, 234, 245, .6);
  max-width: 64ch;
}

/* ---------- Appel final ---------- */

.fmr-final {
  margin-top: 88px;
  padding: 56px 0 0;
  border-top: 1px solid var(--border-soft);
}
.fmr-final > * { margin-left: 0 !important; margin-right: auto !important; }
.fmr-final-title {
  margin: 0;
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.02;
  letter-spacing: -.03em;
  font-weight: 900;
  max-width: 14ch;
}
.fmr-final .fmr-lede { margin-top: 20px; max-width: 46ch; }

/* ---------- Ecrans reduits ---------- */

@media (max-width: 1024px) {
  .fmr-features, .fmr-steps { flex-wrap: wrap; }
  .fmr-features > .wp-block-column { flex-basis: calc(50% - 1px) !important; }
  .fmr-steps > .wp-block-column { flex-basis: calc(50% - 11px) !important; }
}

@media (max-width: 720px) {
  .fmr-hero { padding: 24px 0 8px; }
  .fmr-home h2.fmr-h2 { font-size: 26px; margin-top: 56px; }
  .fmr-features > .wp-block-column,
  .fmr-steps > .wp-block-column { flex-basis: 100% !important; }
  .fmr-formula { flex-wrap: wrap; gap: 6px 14px; }
  .fmr-formula-name { flex-basis: 100%; order: 3; }
}

/* ============================================================
   Survol des cartes numerotees
   Meme grammaire que la FAQ : 420 ms, cubic-bezier(.22,.68,0,1).
   ============================================================ */

/* ---------- Ligne 1 : les atouts, en grille de filets ----------
   Pas de soulevement ici : la grille est jointive, un decalage
   casserait les filets. On remplit la case et on allume le numero. */

.fmr-features > .wp-block-column {
  transition: background-color 420ms cubic-bezier(.22, .68, 0, 1);
}
.fmr-features > .wp-block-column:hover,
.fmr-features > .wp-block-column:focus-within {
  background: var(--panel);
}

.fmr-feature {
  position: relative;
  overflow: hidden;
  transition: padding-left 420ms cubic-bezier(.22, .68, 0, 1);
}

/* Le filet d'accent qui se deploie en haut de la case */
.fmr-feature::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  transition: width 520ms cubic-bezier(.22, .68, 0, 1);
}
.fmr-features > .wp-block-column:hover .fmr-feature::after,
.fmr-features > .wp-block-column:focus-within .fmr-feature::after {
  width: 100%;
}

.fmr-feature-n,
.fmr-feature-t,
.fmr-feature-d {
  transition: color 420ms ease, letter-spacing 420ms cubic-bezier(.22, .68, 0, 1);
}
.fmr-features > .wp-block-column:hover .fmr-feature-n {
  letter-spacing: .22em;
}
.fmr-features > .wp-block-column:hover .fmr-feature-d {
  color: var(--t72);
}

/* ---------- Ligne 2 : les etapes ----------
   Cartes separees : elles peuvent se soulever. */

.fmr-step {
  transition: transform 420ms cubic-bezier(.22, .68, 0, 1),
              border-top-color 420ms ease;
}
.fmr-steps > .wp-block-column:hover .fmr-step,
.fmr-steps > .wp-block-column:focus-within .fmr-step {
  transform: translateY(-5px);
  border-top-color: var(--accent);
}

.fmr-step-n,
.fmr-step-t,
.fmr-step-d {
  transition: color 420ms ease, transform 420ms cubic-bezier(.22, .68, 0, 1);
}
.fmr-steps > .wp-block-column:hover .fmr-step-n {
  color: var(--accent);
}
.fmr-steps > .wp-block-column:hover .fmr-step-d {
  color: var(--t72);
}

/* ---------- Mouvement reduit ---------- */

@media (prefers-reduced-motion: reduce) {
  .fmr-feature::after { transition: none; }
  .fmr-steps > .wp-block-column:hover .fmr-step { transform: none; }
  .fmr-features > .wp-block-column:hover .fmr-feature-n { letter-spacing: .14em; }
}

/* ============================================================
   Correctif de specificite
   Astra declare .entry-content p { margin-bottom: 1.6em } :
   deux classes, donc il l'emporte sur nos regles a une classe
   et gonfle les interlignes des cartes. On redeclare les memes
   valeurs a specificite egale ; cette feuille etant chargee
   apres celle du theme, c'est la notre qui s'applique.
   ============================================================ */

.entry-content .fmr-hero-title { margin: 0; }
.entry-content .fmr-hero-sub { margin-top: 20px; }
.entry-content .fmr-formula { margin: 0; }
.entry-content .fmr-features { margin-top: 72px; }
.entry-content .fmr-feature-n { margin: 0; }
.entry-content .fmr-feature-t { margin: 16px 0 0; }
.entry-content .fmr-feature-d { margin: 9px 0 0; }
.entry-content .fmr-step-n { margin: 0; }
.entry-content .fmr-step-t { margin: 12px 0 0; }
.entry-content .fmr-step-d { margin: 7px 0 0; }
.entry-content .fmr-final-title { margin: 0; }
