/* ══════════════════════════════════════════════════════════════════
   creer-mon-merch.css — les pavés de la page « Créer mon merch ».

   La page expliquait son modèle en paragraphes : quatre cartes à
   déplier, un exemple chiffré en prose, des arguments répétés trois
   fois sous trois formes. On lisait beaucoup et on ne retenait rien.

   Ici chaque idée tient dans un pavé : une image, un titre, trois
   lignes. Ces classes sont propres à cette page — `pages-pro.css`
   est partagé avec « Équiper mon équipe » et « BDE/Asso », et y
   toucher aurait déplacé deux pages qu'on ne regardait pas.
   ══════════════════════════════════════════════════════════════════ */

/* ── Hero : une vraie photo, pas un vêtement détouré ──
   `.hero-page__visuel img` est réglé en `contain` avec 7 % de marge
   intérieure, parce que les trois pages pro y posaient un produit
   détouré qu'un recadrage amputerait. La photo du menu, elle, est une
   photo d'ambiance : `contain` la laissait flotter au milieu d'un
   aplat noir avec des bandes de chaque côté. */
.hero-page__visuel--photo img {
  object-fit: cover;
  padding: 0;
}

/* ── Pavé : une image, trois phrases, rien de plus ── */
.mer-pave {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 54px 0;
  border-top: 1px solid #efeae2;
}
/* Un pavé sur deux présente l'image à droite : l'œil change de côté,
   ce qui suffit à signaler qu'on passe à une autre idée. */
.mer-pave--inverse .mer-pave__media { order: 2; }

.mer-pave__media {
  border-radius: 20px;
  overflow: hidden;
  background: var(--gris);
  aspect-ratio: 4 / 3;
}
.mer-pave__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.mer-pave__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--bordeaux); margin: 0 0 12px;
}
.mer-pave__titre {
  font-family: var(--font-display);
  font-size: clamp(25px, 3.4vw, 36px); font-weight: 800;
  letter-spacing: -.025em; line-height: 1.1;
  color: #0f0f0f; margin: 0 0 14px; text-wrap: balance;
}
.mer-pave__txt p {
  font-size: 15px; line-height: 1.65; color: #555;
  margin: 0 0 20px; max-width: 46ch;
}

/* ── Les trois lignes d'un pavé ── */
.mer-points { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 12px; }
.mer-points li {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px;
  align-items: start;
  font-size: 14.5px; line-height: 1.55; color: #333;
}
.mer-points svg { color: var(--bordeaux); margin-top: 2px; }
.mer-points b { font-weight: 700; color: #0f0f0f; }

/* ── Avant / après ──
   Le bénéfice ne se démontre pas : il se compare. Deux colonnes, les
   mêmes six lignes, et l'écart se voit sans être commenté. */
.mer-vs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.mer-vs__col {
  border-radius: 18px; padding: 26px 26px 10px;
  border: 1.5px solid #e5e0d8; background: #fff;
}
.mer-vs__col--nous { background: #0f0f0f; border-color: #0f0f0f; }
.mer-vs__t {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #6e6e6e; margin: 0 0 18px;
}
.mer-vs__col--nous .mer-vs__t { color: rgba(255,255,255,.55); }
.mer-vs__liste { list-style: none; margin: 0; padding: 0; }
.mer-vs__liste li {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px;
  align-items: start;
  font-size: 14px; line-height: 1.5; color: #555;
  padding: 13px 0; border-top: 1px solid #efeae2;
}
.mer-vs__liste li:first-child { border-top: 0; }
.mer-vs__col--nous .mer-vs__liste li { color: rgba(255,255,255,.82); border-top-color: rgba(255,255,255,.12); }
.mer-vs__liste svg { margin-top: 2px; }
.mer-vs__col--eux svg { color: #b9b2a6; }
.mer-vs__col--nous svg { color: #6ee7a8; }

/* ── Le calcul, en trois temps ──
   Le même exemple tenait dans un paragraphe de cinq lignes suivi de
   quatre encarts. Il tient dans une addition. */
.mer-calc {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 18px; align-items: center;
  background: var(--gris); border-radius: 20px; padding: 32px 30px;
}
.mer-calc__case { text-align: center; }
.mer-calc__n {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 42px); font-weight: 900;
  letter-spacing: -.03em; line-height: 1; color: #0f0f0f;
  font-variant-numeric: tabular-nums;
}
.mer-calc__case--gain .mer-calc__n { color: var(--bordeaux); }
.mer-calc__l { font-size: 12.5px; color: #6e6e6e; margin-top: 7px; line-height: 1.4; }
.mer-calc__op { font-size: 22px; font-weight: 700; color: #b9b2a6; }
.mer-calc__note { font-size: 12.5px; color: #6e6e6e; margin: 14px 0 0; }

/* ── La recommande ──
   Elle suit les quatre étapes, parce qu'elle est la cinquième — celle
   qui n'en est plus une. Un bandeau bas et large, pas une carte de
   plus : c'est une précision, pas un argument à peser. */
.mer-relance {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  background: var(--gris); border-radius: 18px;
  padding: 22px 26px; margin-top: 24px;
}
.mer-relance h3 {
  font-size: 16.5px; font-weight: 800; letter-spacing: -.015em;
  color: #0f0f0f; margin: 0 0 5px;
}
.mer-relance p { font-size: 13.5px; line-height: 1.6; color: #666; margin: 0; max-width: 60ch; }

/* ── Le catalogue, en images ──
   Énumérer « t-shirts, sweats, polos, vestes, tabliers, tote bags »
   coûtait une ligne de texte pour six produits qu'on peut montrer. */
.mer-produits {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.mer-produit {
  border: 1.5px solid #e5e0d8; border-radius: 16px; overflow: hidden;
  background: #fff; text-align: center;
}
/* `height: auto` est indispensable : l'attribut `height="2000"` du
   balisage est un indice de présentation et l'emporte sur
   `aspect-ratio`. Sans lui, chaque vignette faisait 2000 px de haut. */
.mer-produit img {
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain;
  background: var(--gris); display: block; padding: 14px;
}
.mer-produit span {
  display: block; font-size: 13.5px; font-weight: 600;
  color: #0f0f0f; padding: 12px 8px;
}

/* ══ « Pour qui ça marche » : quatre cibles, un onglet chacune ══
   Les quatre publics tenaient dans quatre cartes côte à côte, donc en
   une phrase chacun — trop peu pour qu'un commerçant se reconnaisse.
   En onglets, chaque cible a la place de dire quatre choses, et le
   visiteur ne lit que la sienne. */
.mer-centre { text-align: center; }
.mer-centre .pp-sec__sub { margin-left: auto; margin-right: auto; }

/* La barre d'onglets. Elle défile horizontalement sous 760 px plutôt
   que de passer à la ligne : quatre onglets empilés ne ressemblent
   plus à des onglets. */
.mer-onglets {
  display: flex; gap: 8px; justify-content: center;
  border-bottom: 1px solid #efeae2;
  margin: 30px 0 28px;
  overflow-x: auto;
  scrollbar-width: none;
}
.mer-onglets::-webkit-scrollbar { display: none; }
.mer-onglet {
  display: inline-flex; align-items: center; gap: 9px;
  flex: 0 0 auto;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  color: #6e6e6e; white-space: nowrap;
  padding: 12px 18px 14px;
  /* Le trait actif se pose SUR la ligne du conteneur, sans décaler la
     rangée : une bordure réelle ajouterait 2,5 px sous l'onglet
     sélectionné et ferait sauter les trois autres. */
  position: relative;
  transition: color .18s;
}
.mer-onglet::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2.5px; border-radius: 2px; background: var(--bordeaux);
  transform: scaleX(0); transition: transform .2s;
}
.mer-onglet:hover { color: #0f0f0f; }
.mer-onglet[aria-selected="true"] { color: #0f0f0f; font-weight: 700; }
.mer-onglet[aria-selected="true"]::after { transform: scaleX(1); }
.mer-onglet svg { color: #b9b2a6; transition: color .18s; }
.mer-onglet[aria-selected="true"] svg { color: var(--bordeaux); }

/* Le panneau : la carte d'appel à gauche, les quatre points à droite. */
.mer-panneau {
  display: grid; grid-template-columns: 290px 1fr; gap: 28px;
  text-align: left;
}
.mer-panneau[hidden] { display: none; }
.mer-panneau__carte {
  background: var(--gris); border-radius: 18px; padding: 26px 24px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  align-self: start;
}
.mer-panneau__carte h3 { font-size: 16.5px; font-weight: 800; color: #0f0f0f; margin: 0; letter-spacing: -.015em; }
.mer-panneau__carte p { font-size: 13.5px; line-height: 1.6; color: #666; margin: 0 0 4px; }

.mer-panneau__grille {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px 30px;
  align-content: start; padding-top: 4px;
}
.mer-item { display: grid; grid-template-columns: 26px 1fr; gap: 13px; align-items: start; }
.mer-item svg { color: var(--bordeaux); margin-top: 2px; }
.mer-item h4 { font-size: 14.5px; font-weight: 700; color: #0f0f0f; margin: 0 0 4px; letter-spacing: -.01em; }
.mer-item p  { font-size: 13.5px; line-height: 1.55; color: #666; margin: 0; }

@media (max-width: 860px) {
  .mer-onglets { justify-content: flex-start; }
  .mer-panneau { grid-template-columns: 1fr; gap: 22px; }
  /* La carte d'appel passe SOUS les arguments : en haut d'une colonne
     unique, elle demanderait d'écrire avant d'avoir rien lu. */
  .mer-panneau__carte { order: 2; }
}
@media (max-width: 560px) {
  .mer-panneau__grille { grid-template-columns: 1fr; gap: 20px; }
}

/* ── Bandeau noir : la marque blanche, dite une seule fois ── */
.mer-bandeau {
  background: #0f0f0f; border-radius: 22px;
  padding: 44px 48px; margin: 54px 0 0;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center;
}
.mer-bandeau h2 {
  font-family: var(--font-display);
  font-size: clamp(23px, 3vw, 32px); font-weight: 800;
  letter-spacing: -.025em; line-height: 1.12;
  color: #fff; margin: 0 0 12px; text-wrap: balance;
}
.mer-bandeau p { font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.72); margin: 0; max-width: 42ch; }
.mer-bandeau__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mer-bandeau__liste li {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start;
  font-size: 14.5px; line-height: 1.5; color: #fff;
}
.mer-bandeau__liste svg { color: #6ee7a8; margin-top: 2px; }

@media (max-width: 900px) {
  .mer-pave {
    grid-template-columns: 1fr; gap: 26px; padding: 40px 0;
  }
  /* L'image repasse au-dessus dans les deux sens : sur une colonne,
     l'alternance ne veut plus rien dire et laissait une image seule
     sous son propre texte. */
  .mer-pave--inverse .mer-pave__media { order: 0; }
  .mer-pave__media { aspect-ratio: 16 / 10; }
  .mer-vs { grid-template-columns: 1fr; }
  .mer-calc {
    grid-template-columns: 1fr; gap: 10px; padding: 26px 22px;
  }
  /* Sur une colonne, l'addition se lit de haut en bas : une flèche
     qui pointe encore vers la droite renvoie hors de l'écran. */
  .mer-calc__op { text-align: center; }
  .mer-calc__op--fleche { transform: rotate(90deg); }
  .mer-bandeau { grid-template-columns: 1fr; gap: 26px; padding: 34px 24px; }
}