/* ═══════════════════════════════════════════════════════════════════════════
 * Miaouleo V4 — les blocs du moteur, habillés par l'identité du thème.
 * ═══════════════════════════════════════════════════════════════════════════
 * TROISIÈME COUCHE, ET LA SEULE QUI APPARTIENNE À CE THÈME
 *
 *   1. front/theme/_v4/assets/css/    le socle : ce que tout bloc V4 sait faire
 *   2. front/themes/webshop/miaouleo/ l'identité : tokens, typographie, chrome
 *   3. CE FICHIER                     les blocs V4 sous CETTE identité
 *
 * Le socle ne connaît pas ce thème, et le CSS du thème V3 ne connaît pas les
 * classes des blocs V4 (`.sws-v4-*`, `.mnx-*`). Sans cette couche, chaque écart
 * se corrigeait dans le socle — donc pour les 19 presets à la fois.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * 🔴 POURQUOI DES `px` ET NON DES `rem`
 * ═══════════════════════════════════════════════════════════════════════════
 * `base.css` du thème pose `html { font-size: 62.5% }` — convention
 * `sws-listing` du projet, 1rem = 10px. Le socle V4, lui, écrit ses tailles en
 * `rem` en supposant 16px. Tout y rendait donc à 62,5 % : titre de hero à 44px
 * au lieu de 60, libellés de bande à 8px. Mesuré au navigateur le 2026-09-27
 * contre https://miaouleo.simwebshop.com/.
 *
 * Les valeurs ci-dessous sont celles de la PRODUCTION, relevées une à une.
 */

/* ── Hero ──────────────────────────────────────────────────────────────── */

.sws-v4-hero--split {
  /* 64 / 96 px en production : le hero respire davantage en bas, ce qui
     détache la bande de réassurance qui le suit. */
  padding-block: 64px 96px;
}

.sws-v4-hero--split h1 {
  font-size: clamp(34px, 4.2vw, 60px);
  line-height: 1.08;
  margin-block-end: 16px;
}

.sws-v4-hero--split .sws-v4-hero__lead {
  font-size: 17px;
  line-height: 1.6;
}

/* L'image du hero est un VISUEL POSÉ, pas un fond : elle garde ses
   proportions dans un cadre arrondi, au lieu d'être rognée bord à bord. */
.sws-v4-hero--split img {
  border-radius: var(--border-radius-lg, 20px);
  object-fit: contain;
  align-self: center;
}

/* 🔴 LE VIDE SOUS LE HERO, SUR MOBILE ET TABLETTE.
   Mesuré le 2026-09-29 (prod) : à 412 px, 120 px vides sous l'image — le
   padding bureau (96 px en bas) plus un cadre d'image de hauteur FIXE
   (280 px) où l'image, en `contain`, n'en occupait que 232. À 768 px, texte
   et image côte à côte : le titre montait à 324 px, le cadre s'étirait à
   668 px pour une image de 198 — 422 px de vide.
   Sous 900 px : texte puis image, padding resserré, et l'image prend SA
   hauteur au lieu de flotter dans un cadre. Le bloc pose ces dimensions en
   ligne (`style=`), d'où les `!important`. */
@media (max-width: 900px) {
  .sws-v4-hero--split {
    padding-block: 24px 32px;
  }
  .sws-v4-hero--split > div {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  .sws-v4-hero--split .sws-v4-hero__media {
    min-height: 0 !important;
  }
  .sws-v4-hero--split .sws-v4-hero__media img {
    position: static !important;
    height: auto !important;
    padding: 0 !important;
  }
}

/* ── Boutons ───────────────────────────────────────────────────────────── */

.sws-v4-block .sws-v4-cta--plein,
.sws-v4-block a[class*="__cta"],
.sws-v4-block span[class*="__cta"] {
  padding: 15px 28px;
  font-size: 17px;
  border-radius: var(--button-radius, 999px);
}

/* ── Sections ──────────────────────────────────────────────────────────── */

/* `--section-spacing` vaut 72px chez ce thème, et le socle l'écrit en
   `calc(… / 2)` — 36px au rendu. La production aère à 72. */
.sws-v4-block.sws-v4-pack,
.sws-v4-block.sws-v4-feature-grid:not(.sws-v4-feature-grid--bar),
.sws-v4-block.sws-v4-product-pick,
.sws-v4-block.sws-v4-faq,
.sws-v4-block.sws-v4-category-grid {
  padding-block: var(--section-spacing, 72px);
}

/* Titres de section — 36px en production, contre 22 rendus par le socle. */
.sws-v4-block h2 {
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.2;
}

.sws-v4-feature-grid__lead,
.sws-v4-pack__note {
  font-size: 16px;
}

/* ── Bande de réassurance ──────────────────────────────────────────────── */

.mnx-perks {
  padding-block: 48px;
}

.mnx-perks__inner {
  gap: 24px 40px;
}

/* ── Carte produit ─────────────────────────────────────────────────────
   Ce thème possède sa carte (`_partials/product-card.php`) : même vocabulaire
   que celle du moteur, plus une ligne FORMAT et un CTA unique « Commander »
   posé sur la ligne du prix. Le socle habille déjà tout le reste. */
.sws-product-card__format {
  font-size: .8125rem;
  color: var(--color-text-muted);
}

/* 🔴 SUR UNE CARTE ÉTROITE, LE BOUTON PASSE À LA LIGNE.
   Mesuré le 2026-09-29 en prod mobile : à deux colonnes (cartes de 174 px),
   prix + « Commander » ne tenaient pas sur une ligne — le prix était écrasé à
   0 px (« 2 », « 79 » tronqués) et le bouton débordait de la carte.
   Côte à côte quand la CARTE est assez large (le rendu de référence) ; sur
   une carte étroite, le bouton descend sous le prix et prend toute la
   largeur. Requête de CONTENEUR et non de l'écran : c'est la largeur de la
   carte qui compte, et elle dépend aussi de la vue choisie. Le prix ne
   rétrécit jamais. */
.sws-product-card {
  container-type: inline-size;
}

.sws-product-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px .75em;
  margin-top: auto;
  padding-top: 8px;
}

.sws-product-card__foot .sws-product-card__price {
  flex: 0 0 auto;
  white-space: nowrap;
}

.sws-product-card__order {
  flex: 0 0 auto;
  white-space: nowrap;
}

@container (max-width: 260px) {
  .sws-product-card__foot { flex-direction: column; align-items: stretch; }
  .sws-product-card__order { width: 100%; padding-inline: 1em; justify-content: center; }
}

/* ── Questions fréquentes ──────────────────────────────────────────────
   Le bloc rend des `<details>` à bordure basse, posée EN LIGNE. La source
   les présente en cartes : fond blanc, coins arrondis, chevron à droite.
   Les styles inline du bloc gagnent sur toute règle de feuille, d'où les
   `!important` — c'est le seul moyen de les reprendre sans modifier le
   bloc, qui sert 19 presets. */
.sws-v4-faq details {
  background: var(--color-surface, #fff) !important;
  border: 1px solid var(--color-border, #eadfd3) !important;
  border-radius: var(--border-radius-lg, 14px) !important;
  padding: 1.15em 1.4em !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.sws-v4-faq details + details {
  margin-top: .75em;
}

.sws-v4-faq details[open] {
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .04));
}

/* Le chevron : `list-style:none` inline retire la puce native, on la
   redessine à droite et on la retourne à l'ouverture. */
.sws-v4-faq summary {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  font-size: clamp(15px, 1.4vw, 17px);
}

.sws-v4-faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  background: var(--color-surface-alt, #f7efe6) no-repeat center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b1d16' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-size: 1em 1em;
  transition: transform .2s ease;
}

.sws-v4-faq details[open] summary::after {
  transform: rotate(180deg);
}

/* ── Étapes numérotées ─────────────────────────────────────────────────
   Le bloc empile la pastille au-dessus du titre. La source les met côte à
   côte dans une carte teintée. */
.sws-v4-feature-grid__item--etapes {
  display: flex;
  align-items: center;
  gap: 1em;
  background: var(--color-surface-alt, #f7efe6);
  border-radius: var(--border-radius-lg, 14px);
  padding: 1.1em 1.3em;
}

.sws-v4-feature-grid__item--etapes .sws-v4-feature-grid__num {
  margin: 0 !important;
  flex: 0 0 auto;
}

.sws-v4-feature-grid__item--etapes h3 {
  margin: 0 !important;
  font-size: 1rem;
}