/* ===========================================================
   Pages de marques (templates/pages/marque.php).
   Uniquement des variables de tokens.css et des motifs du shop.
   =========================================================== */

/* ---- Hero : nom de marque en grand, descriptif dessous ---- */
.marque-hero__title {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.marque-hero__nom {
  display: block;
}
.marque-hero__sous {
  display: block;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: var(--lh-tight);
  font-weight: 500;
  color: var(--color-muted);
  text-wrap: balance;
}

/* Logo sur le visuel : plus grand que le logo AudioFly générique */
.marque-hero__visual > img {
  max-width: 68%;
  max-height: 46%;
}
/* Sans logo autorisé (Advatek) : nom en typo de titre, jamais de logo inventé */
.marque-hero__wordmark {
  position: relative;
  z-index: 2;
  padding: 0 var(--space-5);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-align: center;
  color: var(--color-fg);
}

/* ---- Applications : cartes sans cadre, filet supérieur ---- */
.marque-sec--applications .cards--plain .card {
  padding-top: var(--space-4);
  border-top: 2px solid var(--color-border-strong);
  border-radius: 0;
  box-shadow: none;
  gap: var(--space-2);
}
.marque-sec--applications .cards--plain .card::before {
  content: "";
  position: absolute;
  inset: -2px auto auto 0;
  width: 40px;
  height: 2px;
  background: var(--grad);
}

/* ---- Bloc texte (« Pourquoi choisir … ? ») : titre à gauche, texte à droite ---- */
.marque-texte {
  display: grid;
  gap: var(--space-4);
}
.marque-texte .sec-head {
  margin-bottom: 0;
}
.marque-texte__corps {
  font-size: clamp(1rem, 1.3vw, 1.08rem);
}
.marque-texte__corps p {
  max-width: 64ch;
}
@media (min-width: 900px) {
  .marque-texte {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-7);
    align-items: start;
  }
}