:root {
  --teal: #0798ad;
  --teal-dark: #067f91;
  --ink: #10232d;
  --muted: #73838c;
  --line: #e7eef0;
  --soft: #f4fbfc;
  --danger: #c62828;
  --success: #2f7d4f;
  --violet: #7f44d6;
  --violet-dark: #6030b0;
  --violet-soft: #f3edff;
  --yellow: #ffcc45;
  --coral: #ff6b57;
  --blue: #285dff;
  --green-soft: #ecf8ef;
  --shadow: 0 20px 60px rgba(16, 35, 45, .08);
  --shadow-strong: 0 28px 80px rgba(16, 35, 45, .16);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    linear-gradient(180deg, #f7fdfe 0, #fff 370px),
    #fff;
  text-rendering: optimizeLegibility;
  /* clip coupe le débordement horizontal SANS transformer le body en conteneur de scroll
     (hidden cassait window.scrollY : ombre du header et bouton remonter inertes). */
  overflow-x: hidden;
  overflow-x: clip;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
}

.site-header {
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1440px;
  margin: 0 auto;
  padding: 22px 44px;
  background: transparent; /* fondu dans la page (pas de bloc blanc) */
  position: relative;
  z-index: 5;
}

.logo img {
  width: 210px;
  height: auto;
  transition: transform .22s var(--ease-out);
}

.logo:hover img {
  transform: translateY(-2px);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  font-weight: 800;
  color: var(--teal);
}

.main-nav a {
  white-space: nowrap;
  position: relative;
  transition: color .18s ease;
}

.main-nav a:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--violet));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--ease-out);
}

.main-nav a:hover:after {
  transform: scaleX(1);
}

.nav-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: transparent;
  position: relative;
}

.nav-icon:before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 15px 0 -5px var(--teal);
}

.cart-link {
  border: 2px solid var(--teal);
  border-radius: 999px;
  padding: 8px 14px;
  box-shadow: 0 10px 24px rgba(7, 152, 173, .10);
}

.announcement {
  background:
    linear-gradient(90deg, var(--teal-dark), var(--teal), #15b7c9);
  color: #fff;
  text-align: center;
  font-weight: 700;
  padding: 13px 18px;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .18);
  position: relative;
  overflow: hidden;
}
/* Bandeau d'annonce : l'ancien message sort par la gauche, le nouveau entre par la droite */
.announcement-track { display: grid; }
.announcement-item {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: translateX(100%); /* en attente, hors écran à DROITE */
  transition: transform .6s ease;
}
.announcement-item.is-active { transform: translateX(0); } /* au centre */
.announcement-item.is-leaving { transform: translateX(-100%); } /* sort hors écran à GAUCHE */
@media (prefers-reduced-motion: reduce) {
  .announcement-item { transition: none; transform: none; opacity: 0; }
  .announcement-item.is-active { opacity: 1; }
}

.hero {
  display: grid;
  grid-template-columns: minmax(380px, 1fr) minmax(360px, 520px);
  gap: 60px;
  max-width: 1220px;
  min-height: 520px;
  margin: 0 auto;
  padding: 44px 44px 34px;
  align-items: center;
  position: relative;
  isolation: isolate;
}

.hero:before {
  content: "";
  position: absolute;
  inset: 24px 18px 10px;
  z-index: -1;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(7, 152, 173, .08), transparent 34%),
    linear-gradient(315deg, rgba(127, 68, 214, .08), transparent 38%);
  opacity: .9;
}

.hero-copy h1 {
  font-size: 56px;
  line-height: 1;
  letter-spacing: 0;
  margin: 22px 0 24px;
}

.hero-copy h1 span {
  background: var(--teal);
  color: #fff;
  border-radius: 7px;
  padding: 0 8px;
  display: inline-block;
}

.hero-copy p {
  color: var(--muted);
  font-size: 21px;
  line-height: 1.62;
}

.hero-copy strong,
.impact strong {
  color: var(--teal);
}

.pill,
.badge {
  display: inline-flex;
  align-items: center;
  background: rgba(223, 244, 246, .9);
  color: var(--teal-dark);
  border: 1px solid rgba(7, 152, 173, .12);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(7, 152, 173, .08);
}

.badge.large {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 4;
}

.hero-visual {
  min-height: 430px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .88), rgba(244, 251, 252, .78)),
    repeating-linear-gradient(135deg, rgba(7, 152, 173, .08) 0 1px, transparent 1px 12px);
  border: 1px solid rgba(7, 152, 173, .12);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-strong);
  perspective: 900px;
  --tilt-x: 0;
  --tilt-y: 0;
}

.hero-visual:before,
.product-gallery:before,
.product-highlight-media:before {
  content: "";
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 8px;
  pointer-events: none;
  z-index: 1;
}

.hero-visual:after,
.product-gallery:after,
.product-highlight-media:after {
  content: "";
  position: absolute;
  inset: auto -20% -36% -20%;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(7, 152, 173, .16));
  pointer-events: none;
  z-index: 1;
}

.hero-visual img {
  max-height: 450px;
  object-fit: contain;
  filter: drop-shadow(0 28px 38px rgba(16, 35, 45, .16));
  position: relative;
  z-index: 2;
  transform: rotateX(calc(var(--tilt-y) * -1deg)) rotateY(calc(var(--tilt-x) * 1deg));
  transition: transform .18s ease, filter .22s ease;
}

.section {
  max-width: 1220px;
  margin: 0 auto;
  padding: 74px 44px;
}

.section.narrow {
  max-width: 840px;
}

.section h1,
.section h2 {
  margin-top: 0;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.grid-3 article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 26px;
  background: #fff;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .22s ease;
}

.grid-3 article:before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--teal), var(--violet), var(--yellow));
  transform: scaleX(.24);
  transform-origin: left;
  transition: transform .24s var(--ease-out);
}

.grid-3 article:hover {
  transform: translateY(-4px);
  border-color: #c4e9ee;
  box-shadow: 0 24px 70px rgba(16, 35, 45, .12);
}

.grid-3 article:hover:before {
  transform: scaleX(1);
}

.grid-3.compact {
  padding-top: 34px;
  padding-bottom: 34px;
}

.feature-cards article {
  text-align: center;
}

.feature-cards img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin: 0 auto 18px;
}

.product-strip {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 46px;
  align-items: center;
  border-top: 1px solid var(--line);
}

.product-strip img {
  border-radius: 8px;
}

.eyebrow {
  color: #8b8b8b;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0;
}

.button {
  appearance: none;
  border: 2px solid var(--teal);
  background: linear-gradient(135deg, var(--teal), #12adc1);
  color: #fff;
  border-radius: 999px;
  padding: 13px 25px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 900;
  cursor: pointer;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(7, 152, 173, .22);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background .2s ease, border-color .2s ease;
}

.button:before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -85%;
  width: 56%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .46), transparent);
  transform: skewX(-18deg);
  transition: left .55s var(--ease-out);
}

.button:hover:before {
  left: 130%;
}

.button:hover {
  background: linear-gradient(135deg, var(--teal-dark), var(--teal));
  border-color: var(--teal-dark);
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(7, 152, 173, .30);
}

.button-small {
  min-height: 40px;
  padding: 9px 16px;
  font-size: 14px;
}

.button-outline,
.button.secondary {
  background: #fff;
  color: var(--teal);
  box-shadow: 0 12px 28px rgba(16, 35, 45, .06);
}

.button.secondary:hover,
.button-outline:hover {
  background: var(--soft);
  box-shadow: 0 14px 34px rgba(16, 35, 45, .10);
}

.link-button {
  border: 0;
  background: transparent;
  color: var(--teal);
  font-weight: 800;
  cursor: pointer;
  padding: 0;
}

.link-button.danger {
  color: var(--danger);
}

.price-line {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 24px;
}

.price-line del {
  color: #8a8a8a;
  font-size: 1em;
}

.price-line strong {
  color: #e00024;
  font-size: 1.14em;
  text-shadow: 0 10px 24px rgba(224, 0, 36, .12);
}

.price-line span {
  color: #e00024;
  font-size: .72em;
  font-weight: 800;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.product-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 12px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, #fff, #fbfeff);
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .22s ease;
}

.product-card:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(7, 152, 173, .12), transparent 42%, rgba(127, 68, 214, .10));
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}

.product-card:hover {
  transform: translateY(-6px);
  border-color: #b9e7ee;
  box-shadow: 0 28px 76px rgba(16, 35, 45, .16);
}

.product-card:hover:before {
  opacity: 1;
}

.product-card > * {
  position: relative;
  z-index: 1;
}

.product-card-media {
  aspect-ratio: 1;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(243, 237, 255, .9), rgba(244, 251, 252, .95)),
    repeating-linear-gradient(135deg, rgba(127, 68, 214, .10) 0 1px, transparent 1px 13px);
  overflow: hidden;
  position: relative;
}

.product-card-media:after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -75%;
  width: 44%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .68), transparent);
  transform: skewX(-18deg);
  transition: left .65s var(--ease-out);
}

.product-card:hover .product-card-media:after {
  left: 132%;
}

.product-card img {
  aspect-ratio: 1;
  object-fit: contain;
  margin-bottom: 4px;
  transform: translateY(0) scale(1);
  transition: transform .26s var(--ease-out);
}

.product-card:hover img {
  transform: translateY(-4px) scale(1.035);
}

.product-card h2 {
  margin: 0;
}

.product-card-copy,
.product-card-foot {
  color: var(--muted);
  line-height: 1.45;
}

.product-card-price {
  margin: 0;
  font-size: 24px;
}

.product-card-price del {
  color: #8a8a8a;
}

.product-card-price strong {
  color: #e00024;
}

.product-card-foot {
  font-weight: 800;
}

.product-card-button {
  width: 100%;
  margin-top: 6px;
}

.product-page {
  max-width: 1220px;
  margin: 0 auto;
  padding: 38px 44px 72px;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(360px, 1fr);
  gap: 72px;
  align-items: center;
}

.product-gallery {
  position: relative;
  min-height: 520px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(243, 237, 255, .92), rgba(255, 255, 255, .9) 55%, rgba(244, 251, 252, .96)),
    repeating-linear-gradient(135deg, rgba(127, 68, 214, .12) 0 1px, transparent 1px 14px);
  border: 1px solid rgba(127, 68, 214, .14);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-strong);
  perspective: 900px;
  isolation: isolate;
  --tilt-x: 0;
  --tilt-y: 0;
}

.product-gallery img {
  max-height: 500px;
  object-fit: contain;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 30px 42px rgba(16, 35, 45, .15));
  transform: rotateX(calc(var(--tilt-y) * -1deg)) rotateY(calc(var(--tilt-x) * 1deg));
  transition: transform .18s ease, filter .22s ease;
}

.product-summary h1 {
  font-size: 48px;
  line-height: 1.05;
  color: #565656;
  margin: 8px 0 14px;
}

.home-hero {
  position: relative;
}

.hero-lead {
  max-width: 680px;
}

.hero-actions,
.conversion-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 20px;
}

.hero-proof-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.hero-proof-list li {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  color: #425862;
  font-weight: 900;
  background: #fff;
}

.hero-price-card {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: min(250px, calc(100% - 48px));
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 6px;
  z-index: 3;
  backdrop-filter: blur(12px);
  overflow: hidden;
}

.hero-price-card:before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--teal), var(--violet), var(--yellow));
}

.hero-price-card span,
.hero-price-card small {
  color: var(--muted);
  font-weight: 800;
}

.hero-price-card strong {
  color: #e00024;
  font-size: 38px;
  line-height: 1;
}

.trust-strip {
  max-width: 1220px;
  margin: 0 auto;
  padding: 18px 44px 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.trust-strip div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(16, 35, 45, .06);
  position: relative;
  overflow: hidden;
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .22s ease;
}

.trust-strip div:before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--teal);
}

.trust-strip div:nth-child(2):before {
  background: var(--violet);
}

.trust-strip div:nth-child(3):before {
  background: var(--yellow);
}

.trust-strip div:nth-child(4):before {
  background: var(--coral);
}

.trust-strip div:hover {
  transform: translateY(-4px);
  border-color: #c4e9ee;
  box-shadow: 0 22px 56px rgba(16, 35, 45, .11);
}

.trust-strip strong,
.trust-strip span {
  display: block;
}

.trust-strip strong {
  font-size: 18px;
  margin-bottom: 6px;
}

.trust-strip span {
  color: var(--muted);
  line-height: 1.35;
}

.section-heading {
  max-width: 700px;
  margin-bottom: 28px;
}

.section-heading h2,
.product-highlight-copy h2,
.included-band h2,
.product-detail-block h2 {
  font-size: 42px;
  line-height: 1.08;
  margin-bottom: 16px;
}

.product-highlight {
  display: grid;
  grid-template-columns: minmax(280px, 430px) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.product-highlight-media {
  background:
    linear-gradient(135deg, rgba(243, 237, 255, .92), rgba(255, 255, 255, .72)),
    repeating-linear-gradient(135deg, rgba(127, 68, 214, .12) 0 1px, transparent 1px 14px);
  border-radius: 8px;
  padding: 24px;
  border: 1px solid rgba(127, 68, 214, .14);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.product-highlight-media img {
  position: relative;
  z-index: 2;
  transition: transform .25s var(--ease-out);
}

.product-highlight-media:hover img {
  transform: translateY(-5px) scale(1.02);
}

.product-highlight-copy > p:not(.eyebrow) {
  color: var(--muted);
  font-size: 20px;
  line-height: 1.55;
}

.price-offer {
  border: 1px solid var(--line);
  border-left: 5px solid var(--yellow);
  border-radius: 8px;
  padding: 16px 18px;
  margin: 22px 0;
  background:
    linear-gradient(135deg, #fff, #fffdf5);
  box-shadow: 0 16px 42px rgba(16, 35, 45, .07);
}

.price-offer span,
.price-offer small {
  color: var(--muted);
  font-weight: 800;
}

.price-offer p {
  margin: 5px 0 2px;
  font-size: 34px;
}

.price-offer del {
  color: #8a8a8a;
}

.price-offer strong {
  color: #e00024;
}

.use-cases .grid-3 article h3 {
  margin: 0 0 10px;
  font-size: 24px;
}

.use-cases .grid-3 article p {
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

.included-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr) auto;
  gap: 28px;
  align-items: center;
  background:
    linear-gradient(135deg, #10232d, #173947 64%, #17253b);
  color: #fff;
  border-radius: 8px;
  margin-top: 28px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-strong);
}

.included-band:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 18px);
  opacity: .55;
  pointer-events: none;
}

.included-band > * {
  position: relative;
  z-index: 1;
}

.included-band .eyebrow,
.included-band h2 {
  color: #fff;
}

.included-band ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  font-weight: 800;
}

.included-band .button {
  border-color: #fff;
  background: #fff;
  color: var(--teal);
  white-space: nowrap;
}

.shop-intro {
  padding-top: 44px;
  padding-bottom: 54px;
}

.shop-intro h1 {
  font-size: clamp(44px, 5vw, 64px);
  line-height: 1.05;
  margin: 16px 0 10px;
  max-width: 820px;
}

.shop-intro .lead {
  max-width: 820px;
  margin-bottom: 24px;
}

.shop-intro .product-grid {
  grid-template-columns: 1fr;
  gap: 0;
}

.shop-intro .product-card {
  grid-template-columns: minmax(330px, .88fr) minmax(0, 1fr);
  grid-template-areas:
    "media badge"
    "media title"
    "media copy"
    "media price"
    "media foot"
    "media cta";
  column-gap: clamp(24px, 4vw, 56px);
  row-gap: 12px;
  align-items: center;
  min-height: 0;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 22px;
}

.shop-intro .product-card-media {
  grid-area: media;
  aspect-ratio: 1.08;
  min-height: 0;
}

.shop-intro .badge {
  grid-area: badge;
  justify-self: start;
}

.shop-intro .product-card h2 {
  grid-area: title;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.08;
}

.shop-intro .product-card-copy {
  grid-area: copy;
  max-width: 560px;
  font-size: 18px;
}

.shop-intro .product-card-price {
  grid-area: price;
  font-size: 28px;
}

.shop-intro .product-card-foot {
  grid-area: foot;
}

.shop-intro .product-card-button {
  grid-area: cta;
  width: auto;
  justify-self: start;
  min-width: 210px;
}

.product-sales-page {
  align-items: start;
}





.product-subtitle {
  color: var(--muted);
  font-size: 20px;
  line-height: 1.5;
  margin: 0 0 16px;
}

.product-price {
  margin-bottom: 16px;
}

.product-benefits {
  list-style: none;
  padding: 0;
  margin: 20px 0 24px;
  display: grid;
  gap: 10px;
}

.product-benefits li {
  padding-left: 28px;
  position: relative;
  font-weight: 800;
  color: #314a55;
}

.product-benefits li:before {
  content: "";
  position: absolute;
  left: 0;
  top: .35em;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: inset 0 0 0 4px #cceff3;
}

/* Bouton « Comment fonctionne la Podcastor Pocket ? » sous les points forts */
.product-howto {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 4px 0 8px;
  padding: 12px 22px;
  border: 2px solid var(--teal);
  border-radius: 999px;
  color: var(--teal);
  font-weight: 800;
  font-size: 15.5px;
  line-height: 1.25;
  text-decoration: none;
  transition: background .18s var(--ease-out), color .18s var(--ease-out), transform .18s var(--ease-out);
}
.product-howto:hover {
  background: var(--teal);
  color: #fff;
  transform: translateY(-1px);
}
.product-howto-arrow { transition: transform .18s var(--ease-out); }
.product-howto:hover .product-howto-arrow { transform: translateX(3px); }

.buy-form {
  display: grid;
  gap: 18px;
  max-width: 520px;
}

.buy-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fff;
  box-shadow: var(--shadow);
  gap: 13px;
  position: relative;
  overflow: hidden;
}

.buy-card:before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--teal), var(--violet), var(--yellow));
}

.buy-card > * {
  position: relative;
  z-index: 1;
}

.buy-card-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}

.buy-card-heading strong {
  font-size: 19px;
}

.buy-card-heading span,
.checkout-reassurance,
.option-row small {
  color: var(--muted);
  font-weight: 700;
}

.buy-card-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 14px;
  align-items: end;
}

.buy-card .field-label {
  display: grid;
  gap: 8px;
}

.quantity-control {
  display: inline-grid;
  grid-template-columns: 44px 58px 44px;
  width: max-content;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
}

.quantity-control button,
.quantity-control input {
  border: 0;
  background: #fff;
  text-align: center;
  height: 48px;
}

.quantity-control button {
  cursor: pointer;
  font-weight: 900;
  color: var(--ink);
  transition: background .16s ease, color .16s ease;
}

.quantity-control button:hover {
  background: var(--soft);
  color: var(--teal-dark);
}

.impact {
  font-size: 16px;
  line-height: 1.45;
}

.field-label {
  font-weight: 800;
}

select,
input,
textarea {
  width: 100%;
  border: 1px solid #dbe5e8;
  border-radius: 8px;
  padding: 13px 15px;
  background: #fff;
  color: var(--ink);
}

.checkbox-row,
.radio-row,
.payment-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-weight: 800;
}

.checkbox-row input,
.radio-row input,
.payment-row input {
  width: auto;
  margin-top: 5px;
  accent-color: var(--teal);
}

.option-row {
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s var(--ease-out);
}

.option-row:hover {
  transform: translateY(-1px);
  border-color: #c4e9ee;
}

.option-row.is-active,
.option-row:has(input:checked) {
  background: linear-gradient(135deg, var(--green-soft), #fff);
  border-color: #abdcbf;
  box-shadow: 0 12px 28px rgba(47, 125, 79, .08);
}

.option-row small {
  flex-basis: 100%;
  padding-left: 28px;
}

.buy-button {
  width: 100%;
  font-size: 18px;
  min-height: 54px;
  box-shadow: 0 16px 36px rgba(7, 152, 173, .26);
}

.buy-button:after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: inherit;
  pointer-events: none;
}

.mobile-sticky-buy {
  display: none;
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .62s ease,
    transform .62s var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0) * 1ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.checkout-reassurance {
  margin: -4px 0 0;
  text-align: center;
}

.info {
  color: var(--muted);
  border-bottom: 1px dotted var(--muted);
  cursor: help;
  position: relative;
}

.info:hover:after {
  content: attr(data-tooltip);
  position: absolute;
  left: 0;
  bottom: 130%;
  width: 300px;
  background: var(--ink);
  color: #fff;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
  z-index: 10;
}

.product-detail-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 44px;
  align-items: start;
  border-top: 1px solid var(--line);
}

.product-detail-block p {
  color: var(--muted);
  line-height: 1.65;
  font-size: 19px;
}

.included-list {
  display: grid;
  gap: 10px;
  background: var(--soft);
  border-radius: 8px;
  padding: 18px;
}

.included-list span {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  font-weight: 900;
}

.cart-layout,
.checkout-layout {
  max-width: 1220px;
  margin: 0 auto;
  padding: 72px 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 410px;
  gap: 46px;
  align-items: start;
}

.cart-line {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
  border-bottom: 1px solid var(--line);
  padding-bottom: 28px;
}

.cart-line img {
  border-radius: 8px;
}

.order-box,
.panel,
.auth-card {
  border: 3px solid var(--teal);
  border-radius: 28px;
  padding: 28px;
  background: #fff;
}

.order-box h2,
.panel h2 {
  margin-top: 0;
}

.totals {
  display: grid;
  gap: 12px;
  margin: 18px 0;
}

.totals div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.totals .total {
  font-size: 20px;
  border-top: 3px solid var(--line);
}

.checkout-form h1 {
  margin-top: 0;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.form-grid label {
  display: grid;
  gap: 7px;
  font-weight: 800;
}

.span-2 {
  grid-column: 1 / -1;
}

.payment-row {
  border-top: 1px solid var(--line);
  padding: 16px 0;
}

.payment-row small {
  display: block;
  color: var(--muted);
  font-weight: 600;
  margin-top: 4px;
}

.terms {
  margin: 18px 0;
}

.bank-box {
  background: var(--soft);
  border-left: 4px solid var(--teal);
  padding: 18px;
  border-radius: 8px;
  margin: 22px 0;
}

.bank-box.is-error {
  background: #fdf3f3;
  border-left-color: var(--danger);
}

.bank-box.is-error h2 {
  color: var(--danger);
}

/* Frise de suivi de commande */
.order-steps {
  display: flex;
  align-items: flex-start;
  margin: 26px 0 30px;
}

.order-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  gap: 7px;
  min-width: 0;
}

.order-step::before {
  content: "";
  position: absolute;
  top: 15px;
  left: -50%;
  width: 100%;
  height: 3px;
  background: rgba(16, 32, 39, .13);
  z-index: 0;
}

.order-step:first-child::before {
  display: none;
}

.order-step.is-done::before,
.order-step.is-current::before {
  background: #0798ad;
}

.order-step.is-error::before {
  background: var(--danger);
}

.order-step i {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 3px solid rgba(16, 32, 39, .18);
  color: #fff;
  z-index: 1;
  box-sizing: border-box;
}

.order-step i svg {
  width: 15px;
  height: 15px;
}

.order-step.is-done i {
  background: #0798ad;
  border-color: #0798ad;
}

.order-step.is-current i {
  border-color: #0798ad;
}

.order-step.is-current i::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0798ad;
}

.order-step.is-error i {
  background: var(--danger);
  border-color: var(--danger);
}

.order-step span {
  font-weight: 800;
  font-size: 14px;
  color: #102027;
}

.order-step.is-todo span {
  color: rgba(16, 32, 39, .45);
  font-weight: 700;
}

.order-step.is-current span {
  color: #0798ad;
}

.order-step.is-error span {
  color: var(--danger);
}

.order-step small {
  font-size: 12px;
  color: #64757f;
  margin-top: -3px;
}

@media (max-width: 640px) {
  .order-steps {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .order-step {
    flex-direction: row;
    text-align: left;
    align-items: center;
    gap: 12px;
  }

  .order-step::before {
    top: -16px;
    left: 15px;
    width: 3px;
    height: 16px;
  }

  .order-step small {
    margin-left: auto;
    margin-top: 0;
  }
}

.receipt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0 0;
}

/* Audit 23/09, R4/A6 : « Payer par virement » est un petit formulaire POST ; il se range comme un bouton. */
.receipt-actions .receipt-inline-form {
  display: contents;
}

.lead {
  color: var(--muted);
  font-size: 21px;
  line-height: 1.6;
}

.cms-body {
  color: #314a55;
  line-height: 1.68;
}

.cms-body h2,
.cms-body h3 {
  color: var(--ink);
}

.cms-body h2 {
  margin: 1.8em 0 .55em;
  font-size: 1.32rem;
  line-height: 1.3;
}

.cms-body h3 {
  margin: 1.35em 0 .4em;
  font-size: 1.06rem;
}

.cms-body ul {
  padding-left: 1.25em;
  margin: .5em 0 1em;
}

.cms-body li {
  margin: .28em 0;
}

.cms-table-wrap {
  overflow-x: auto;
  margin: 16px 0 26px;
  -webkit-overflow-scrolling: touch;
}

.cms-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}

.cms-table th,
.cms-table td {
  text-align: left;
  vertical-align: top;
  padding: 11px 14px;
  border: 1px solid #e2ebef;
}

.cms-table thead th {
  background: #f2f8f9;
  color: var(--ink);
  font-weight: 800;
}

.cms-table tbody th {
  background: #fafcfd;
  color: var(--ink);
  font-weight: 700;
  width: 32%;
}

.text-teal {
  color: var(--teal);
}

.warning-box {
  background: #fff8e8;
  border-left: 4px solid #e1a400;
  border-radius: 8px;
  padding: 18px;
  margin: 22px 0;
}

.commitment-list {
  display: grid;
  gap: 16px;
  margin-top: 34px;
}

.commitment-list article {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 6px 24px;
  align-items: start;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(244, 251, 252, .9)),
    #fff;
  box-shadow: 0 18px 48px rgba(16, 35, 45, .07);
}

.commitment-list article > span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: rgba(7, 152, 173, .10);
  color: var(--teal);
  font-size: 34px;
  font-weight: 900;
}

.commitment-list h2 {
  grid-column: 2;
  margin: 0 0 8px;
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1.15;
}

.commitment-list p {
  grid-column: 2;
  margin: 0;
  max-width: 860px;
  font-size: 18px;
  line-height: 1.62;
}

.empty-cart {
  min-height: 420px;
  display: grid;
  align-items: center;
}

.empty-state {
  display: grid;
  justify-items: start;
  gap: 14px;
  padding: clamp(28px, 5vw, 52px);
  border: 1px solid rgba(7, 152, 173, .16);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(7, 152, 173, .10), rgba(127, 68, 214, .08)),
    #fff;
  box-shadow: var(--shadow);
}

.empty-state span {
  color: var(--teal-dark);
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.empty-state h1 {
  margin: 0;
  font-size: clamp(24px, 3vw, 32px);
}

.empty-state p {
  max-width: 560px;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

.rate-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 34px 0;
}

.rate-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 26px;
  text-align: center;
  box-shadow: var(--shadow);
}

.rate-grid strong {
  display: block;
  color: var(--teal);
  font-size: 48px;
  line-height: 1;
}

.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}

.danger-text {
  color: var(--danger);
}

.site-footer {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.2fr) minmax(280px, .9fr);
  gap: 30px;
  background: var(--teal);
  color: #fff;
  padding: 42px 44px;
  margin-top: 60px;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-weight: 800;
}

.newsletter-form {
  display: grid;
  gap: 12px;
}

.newsletter-form label {
  display: grid;
  gap: 8px;
  font-weight: 900;
}

.newsletter-form span {
  font-weight: 600;
  line-height: 1.35;
}

.button-light {
  background: #fff;
  color: var(--teal);
  border-color: #fff;
}

.button-light:hover {
  background: #e8fbfd;
  border-color: #e8fbfd;
}

.flash {
  max-width: 960px;
  margin: 18px auto;
  border-radius: 8px;
  padding: 14px 18px;
  font-weight: 800;
}

.flash-success {
  background: #e7f7ed;
  color: var(--success);
}

.flash-error {
  background: #fff0f0;
  color: var(--danger);
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 14px;
}

.right {
  float: right;
}

.admin-shell {
  background: #f5f7f8;
}

.admin-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
}

.admin-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: #11191d;
  color: #fff;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.admin-logo {
  background: #fff;
  border-radius: 8px;
  padding: 12px;
}

.admin-sidebar nav {
  display: grid;
  gap: 8px;
}

.admin-sidebar nav a,
.admin-sidebar .link-button {
  color: #dce8eb;
  padding: 11px 12px;
  border-radius: 8px;
  text-align: left;
}

.admin-sidebar nav a:hover,
.admin-sidebar .link-button:hover {
  background: rgba(255, 255, 255, .08);
}

.admin-main {
  padding: 38px;
}

.admin-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}

.admin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  margin: 24px 0 34px;
}

.admin-cards div {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: var(--shadow);
}

.admin-cards span {
  color: var(--muted);
  font-weight: 800;
}

.admin-cards strong {
  display: block;
  font-size: 30px;
  margin-top: 8px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.admin-table th {
  background: #edf5f6;
  font-size: 13px;
  text-transform: uppercase;
  color: #48616a;
}

.status {
  background: #edf5f6;
  color: var(--teal-dark);
  border-radius: 999px;
  padding: 5px 10px;
  font-weight: 900;
  font-size: 13px;
}

.admin-two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 22px;
}

.panel {
  border: 0;
  border-radius: 8px;
  box-shadow: var(--shadow);
  margin-bottom: 22px;
}

.log-row {
  border-top: 1px solid var(--line);
  padding: 14px 0;
}

.log-row span {
  color: var(--muted);
  font-size: 13px;
}

.auth-card {
  max-width: 460px;
  margin: 80px auto;
  box-shadow: var(--shadow);
}

.settings-form h2 {
  margin: 22px 0 0;
}

.content-editor {
  display: grid;
  gap: 22px;
}

.content-editor small,
.product-editor-form small {
  color: var(--muted);
  font-weight: 700;
}

.admin-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.admin-sticky-actions {
  position: sticky;
  bottom: 18px;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  padding: 14px;
  background: rgba(245, 247, 248, .88);
  border: 1px solid var(--line);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}

.duplicate-panel {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 16px;
  align-items: end;
}

.duplicate-panel h2 {
  grid-column: 1 / -1;
  margin: 0;
}

.admin-products .product-card {
  align-content: start;
}

.admin-shell {
  background:
    radial-gradient(circle at 92% 4%, rgba(127, 68, 214, .10), transparent 28%),
    radial-gradient(circle at 12% 10%, rgba(7, 152, 173, .12), transparent 32%),
    #f3f7f8;
  color: #14242d;
}

.admin-auth-main {
  min-height: 100vh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 20px;
  padding: 28px;
}

.admin-auth-logo {
  width: 230px;
  background: #fff;
  border-radius: 14px;
  padding: 18px 22px;
  box-shadow: var(--shadow);
}

.admin-layout {
  grid-template-columns: 286px minmax(0, 1fr);
}

.admin-sidebar {
  background:
    linear-gradient(180deg, rgba(7, 152, 173, .18), transparent 26%),
    #10232d;
  padding: 26px 20px;
  box-shadow: 18px 0 44px rgba(16, 35, 45, .14);
  overflow-y: auto;
}

.admin-sidebar::-webkit-scrollbar {
  width: 8px;
}

.admin-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .18);
  border-radius: 999px;
}

.admin-logo {
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .12);
}

.admin-sidebar-title {
  display: grid;
  gap: 3px;
  padding: 2px 8px 0;
}

.admin-sidebar-title span {
  color: rgba(255, 255, 255, .58);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.admin-sidebar-title strong {
  color: #fff;
  font-size: 22px;
}

.admin-sidebar nav {
  gap: 6px;
}

.admin-sidebar nav a,
.admin-sidebar .link-button {
  display: flex;
  align-items: center;
  min-height: 42px;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, .78);
  font-weight: 900;
  transition: background .18s var(--ease-out), border-color .18s var(--ease-out), color .18s var(--ease-out), transform .18s var(--ease-out);
}

.admin-sidebar nav a:hover,
.admin-sidebar .link-button:hover,
.admin-sidebar nav a.is-active {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .12);
  color: #fff;
  transform: translateX(2px);
}

.admin-sidebar nav a.is-active {
  box-shadow: inset 4px 0 0 var(--yellow);
}

.admin-main {
  min-width: 0;
  padding: 28px clamp(24px, 3vw, 46px) 48px;
}

.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin: -28px calc(clamp(24px, 3vw, 46px) * -1) 30px;
  padding: 18px clamp(24px, 3vw, 46px);
  background: rgba(243, 247, 248, .88);
  border-bottom: 1px solid rgba(16, 35, 45, .08);
  backdrop-filter: blur(16px);
}

.admin-topbar span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.admin-topbar strong {
  display: block;
  margin-top: 2px;
  font-size: 22px;
}

.admin-topbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.admin-heading {
  align-items: flex-start;
}

.admin-heading h1,
.admin-hero h1 {
  margin: 0;
  line-height: 1.04;
}

.admin-heading p {
  margin: 8px 0 0;
  max-width: 720px;
}

.admin-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  margin-bottom: 24px;
  padding: clamp(24px, 4vw, 38px);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(7, 152, 173, .18), rgba(127, 68, 214, .12)),
    #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}

.admin-hero::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(255, 204, 69, .26);
  pointer-events: none;
}

.admin-hero > * {
  position: relative;
  z-index: 1;
}

.admin-hero span {
  color: var(--teal-dark);
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.admin-hero h1 {
  margin-top: 8px;
  font-size: clamp(34px, 4vw, 54px);
}

.admin-hero p {
  max-width: 620px;
  margin: 12px 0 0;
  color: #5c6f78;
  font-size: 18px;
}

.admin-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.admin-cards {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.admin-cards a,
.admin-cards div {
  display: block;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(16, 35, 45, .06);
  border-radius: 18px;
  padding: 21px;
  box-shadow: 0 18px 48px rgba(16, 35, 45, .08);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s var(--ease-out);
}

.admin-cards a:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-strong);
  border-color: rgba(7, 152, 173, .22);
}

.admin-cards small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 800;
}

.panel {
  padding: 24px;
  border: 1px solid rgba(16, 35, 45, .06);
  border-radius: 18px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 18px 48px rgba(16, 35, 45, .08);
}

.panel > h2:first-child,
.panel-heading h2 {
  margin-top: 0;
}

.panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

.panel-heading h2 {
  margin-bottom: 0;
}

.panel-heading a,
.panel-heading span {
  color: var(--muted);
  font-weight: 900;
}

.panel .admin-table,
.admin-dashboard-grid .admin-table {
  box-shadow: none;
  border: 1px solid var(--line);
}

.admin-table {
  border-radius: 18px;
}

.admin-table th {
  background: #edf7f8;
  color: #31515b;
  letter-spacing: .03em;
}

.admin-table td {
  background: #fff;
}

.admin-table tr:hover td {
  background: #fbfefe;
}

.admin-table-comfort td {
  line-height: 1.45;
}

.admin-filter-bar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(210px, .35fr) auto;
  gap: 14px;
  align-items: end;
  margin-bottom: 22px;
  padding: 18px;
  border: 1px solid rgba(16, 35, 45, .06);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(16, 35, 45, .06);
}

.admin-inline-form {
  display: flex;
  gap: 8px;
  align-items: center;
}

.admin-empty {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 18px;
  border: 1px dashed rgba(7, 152, 173, .35);
  border-radius: 16px;
  background: #f8fdfe;
}

.admin-empty strong {
  font-size: 18px;
}

.admin-empty p {
  margin: 0;
  color: var(--muted);
}

.admin-check-list,
.admin-quick-grid {
  display: grid;
  gap: 12px;
}

.admin-check {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 14px;
  background: #f7fbfc;
  font-weight: 900;
}

.admin-check span {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--teal);
}

.admin-check-danger span {
  background: var(--danger);
}

.admin-check-warning span {
  background: var(--yellow);
}

.admin-check-ok span {
  background: var(--success);
}

.admin-quick-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-quick-grid a {
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  font-weight: 1000;
  transition: transform .18s var(--ease-out), border-color .18s var(--ease-out);
}

.admin-quick-grid a:hover {
  transform: translateY(-2px);
  border-color: rgba(7, 152, 173, .35);
}

.admin-quick-grid small {
  color: var(--muted);
  font-weight: 800;
}

.admin-upload-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .5fr) auto;
  gap: 18px;
  align-items: end;
}

.admin-upload-panel h2,
.admin-upload-panel p {
  margin: 0;
}

.admin-upload-panel p {
  margin-top: 8px;
}

.admin-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  gap: 18px;
}

.admin-media-card {
  display: grid;
  gap: 13px;
  padding: 14px;
  border: 1px solid rgba(16, 35, 45, .08);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(16, 35, 45, .07);
}

.admin-media-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: 14px;
  background:
    linear-gradient(45deg, #eef5f6 25%, transparent 25%),
    linear-gradient(-45deg, #eef5f6 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eef5f6 75%),
    linear-gradient(-45deg, transparent 75%, #eef5f6 75%),
    #fff;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-size: 20px 20px;
}

.admin-media-card span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.admin-copy-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.admin-copy-field input {
  min-width: 0;
}

.admin-settings-form {
  display: grid;
  gap: 22px;
}

.admin-settings-form .admin-sticky-actions {
  position: static;
  justify-content: flex-end;
}

.settings-form h2 {
  margin: 0;
}

.toggle-row {
  min-height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfefe;
}

.toggle-row input {
  width: 18px;
  height: 18px;
}

.log-row {
  border-top-color: var(--line);
}

.log-row:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.status {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.button-small {
  min-height: 0;
  padding: 9px 14px;
  font-size: 14px;
}

.desktop-only {
  display: none;
}

@media (max-width: 920px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 20px;
  }

  .main-nav {
    width: 100%;
    overflow-x: auto;
    gap: 18px;
    padding-bottom: 4px;
  }

  .hero,
  .product-page,
  .cart-layout,
  .checkout-layout,
  .product-strip,
  .product-highlight,
  .included-band,
  .product-detail-block,
  .admin-two-cols {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
    padding-top: 48px;
  }

  .hero-copy h1,
  .shop-intro h1 {
    font-size: 44px;
  }

  .hero-visual,
  .product-gallery {
    min-height: 420px;
  }

  .hero-price-card {
    position: static;
    width: 100%;
    margin: -36px 20px 20px;
    justify-self: stretch;
  }

  .trust-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-left: 20px;
    padding-right: 20px;
  }

  .grid-3,
  .rate-grid,
  .admin-cards,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .included-band {
    align-items: start;
  }

  .buy-card-row,
  

  .shop-intro .product-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "badge"
      "title"
      "copy"
      "price"
      "foot"
      "cta";
  }

  .shop-intro .product-card-media {
    aspect-ratio: 1;
  }

  .commitment-list article {
    grid-template-columns: 1fr;
  }

  .commitment-list article > span,
  .commitment-list h2,
  .commitment-list p {
    grid-column: 1;
  }

  .commitment-list article > span {
    grid-row: auto;
  }

  .span-2 {
    grid-column: auto;
  }

  .cart-line {
    grid-template-columns: 110px 1fr;
  }

  .cart-line > strong {
    grid-column: 1 / -1;
  }

  .admin-layout {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    position: static;
    height: auto;
  }

  .admin-main {
    padding: 22px;
  }

  .duplicate-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .section,
  .product-page,
  .cart-layout,
  .checkout-layout {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 18px;
    padding-bottom: 12px;
    gap: 18px;
  }

  .announcement {
    padding: 9px 14px;
    font-size: 15px;
  }

  .hero-copy p {
    font-size: 17px;
    line-height: 1.5;
  }

  .hero-copy h1,
  .product-summary h1,
  .section-heading h2,
  .product-highlight-copy h2,
  .included-band h2,
  .product-detail-block h2 {
    font-size: 34px;
  }

  .hero-visual,
  .product-gallery {
    min-height: 310px;
  }

  .hero-visual img,
  .product-gallery img {
    max-height: 300px;
  }

  .home-hero .hero-visual {
    min-height: 180px;
  }

  .home-hero .hero-visual img {
    max-height: 180px;
  }

  .hero-price-card {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 170px;
    margin: 0;
    padding: 10px;
  }

  .hero-price-card strong {
    font-size: 24px;
  }

  .hero-price-card .button {
    display: none;
  }

  .hero-actions,
  .conversion-actions {
    display: grid;
  }

  .hero-actions .secondary {
    display: none;
  }

  .site-header {
    align-items: center;
  }

  .main-nav {
    justify-content: center;
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 10px 16px;
    font-size: 15px;
  }

  .main-nav a:first-child {
    flex-basis: 100%;
    text-align: center;
  }

  .trust-strip {
    grid-template-columns: 1fr;
  }

  .price-offer p {
    font-size: 28px;
  }

  .buy-card-heading {
    display: grid;
  }

  .mobile-sticky-buy {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 20;
    min-height: 50px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--teal), #12adc1);
    color: #fff;
    font-weight: 900;
    box-shadow: 0 18px 42px rgba(16, 35, 45, .22);
  }

  .order-box {
    border-radius: 16px;
  }

  .site-footer {
    grid-template-columns: 1fr;
    padding: 32px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *:before,
  *:after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Polish 2026-07 — header sticky + accessibilité
   ========================================================================== */

.shop-shell .site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: box-shadow .24s var(--ease-out);
}

/* Hauteur et logo constants : seule l'ombre apparaît au scroll (pas de reflow = pas de clignotement) */
body.is-scrolled .site-header {
  box-shadow: 0 10px 30px rgba(16, 35, 45, .08);
}

/* v514 : pas de flou tant que la page n’a pas défilé → l’en-tête a EXACTEMENT la couleur de la page
   (au repos, le flou dessinait un léger rectangle plus clair autour de l’en-tête) ; il revient dès que
   le contenu passe sous l’en-tête collant. */
body.shop-shell:not(.is-scrolled) .site-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(7, 152, 173, .45);
  outline-offset: 2px;
}

/* Header mobile compact */
@media (max-width: 560px) {
  .site-header {
    min-height: 0;
    padding: 14px 16px 12px;
  }

  .logo img,
  body.is-scrolled .logo img {
    width: 148px;
  }

  .main-nav {
    gap: 8px 14px;
    font-size: 14px;
  }

  .main-nav a:after {
    bottom: -4px;
  }

  .cart-link {
    padding: 6px 12px;
  }
}

/* ==========================================================================
   Accueil — reprise fidèle de podcastor.fr (styles maison PODK)
   ========================================================================== */

.home-hero {
  overflow: hidden;
  background: linear-gradient(90deg, #f6fafb 0%, #f6fafb 45%, #eef7f8 100%);
}

.home-hero-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
}

.home-hero-copy {
  padding: clamp(10px, 1.8vw, 28px) clamp(18px, 2.4vw, 32px) clamp(34px, 5vw, 72px) clamp(40px, 4vw, 80px);
}

.home-kicker {
  display: inline-block;
  margin: 0 0 18px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(7, 152, 173, .1);
  color: var(--teal-dark);
  font-size: .88rem;
  font-weight: 800;
}

.home-hero-copy h1 {
  max-width: none;
  margin: 0;
  color: var(--ink);
  font-size: clamp(24px, 3.4vw, 52px);
  line-height: 1.08;
  letter-spacing: 0;
}

.home-hero-copy h1 .home-hero-lead {
  display: block;
  white-space: nowrap;
}

.home-highlight-word {
  color: #fff;
  display: inline-block;
  position: relative;
  z-index: 0;
}

/* Mot surligné : boîte teal masquée qui « déroule » les mots verticalement (slot-machine),
   sans fondu ni chevauchement → transition fluide. Bord gauche = début de la ligne du dessus. */
.home-hero-rotor {
  display: inline-block;
  overflow: hidden;
  height: 1.34em; /* repli avant JS : une seule ligne visible (JS fixe la valeur exacte en px) */
  vertical-align: bottom;
  margin-top: .2em;
  background: var(--teal);
  color: #fff;
  border-radius: 11px;
  box-shadow: 0 12px 26px rgba(7, 152, 173, .3);
  transform-origin: center center;
  transform: rotate(var(--pk-tilt, 1.4deg));
  transition: transform .45s ease, width .5s cubic-bezier(.4, 0, .2, 1);
}
.home-hero-track {
  display: block;
  transition: transform .55s cubic-bezier(.5, .05, .1, 1);
  will-change: transform;
}
.home-hero-word {
  display: block;
  white-space: nowrap;
  line-height: 1.34;
  padding: 0 .3em;
}
/* Icône de la case teal, à droite du mot, intégrée comme un emoji.
   ⚠️ largeur ET hauteur en em (icônes carrées) : la mesure JS de la largeur de la boîte
   est ainsi juste dès la mise en page, avant même le chargement du PNG. */
.home-hero-ico {
  display: inline-block;
  width: .84em;
  height: .84em;
  /* « middle » = milieu de l'icône sur l'axe médian du texte (base + demi-hauteur d'x),
     donc alignée sur le corps des minuscules et non sur le haut des majuscules. */
  vertical-align: middle;
  /* Remontée d'un cheveu au-dessus de l'axe médian : purement visuel (position:relative),
     donc sans effet sur la hauteur de ligne ni sur la mesure de la largeur de la case. */
  position: relative;
  top: -.05em;
  /* .34em = padding droit de la case (.3em) + le surplus d'inclinaison (~.04em)
     → autant d'air à gauche de l'icône qu'à sa droite. */
  margin-left: .34em;
}

.home-highlight-word::before {
  content: "";
  position: absolute;
  left: -.1em;
  right: -.14em;
  bottom: .02em;
  z-index: -1;
  height: 1.08em;
  border-radius: 4px;
  background: var(--teal);
  transform: rotate(-1deg) translate(calc(.03em - 2px), calc(.02em + 1px));
  transform-origin: 50% 50%;
}

.home-lead {
  margin-top: clamp(20px, 2.4vw, 32px); /* espace sous le titre / la boîte "sans abonnement" */
}

.home-lead p {
  max-width: 560px;
  margin: 22px 0 28px;
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.65;
}

.home-lead strong {
  color: var(--teal);
  font-weight: 800;
}

/* Texte hero multi-blocs (intro + checklist + accroches) : espacements resserrés */
.home-lead p {
  margin: 0 0 16px;
}
.home-lead > *:last-child {
  margin-bottom: 0;
}
.home-lead-checks {
  list-style: none;
  margin: 16px 0 18px;
  padding: 0;
  display: grid;
  gap: 9px;
  max-width: 560px;
}
.home-lead-checks li {
  position: relative;
  padding-left: 32px;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.4;
  font-weight: 600;
}
.home-lead-checks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: .05em;
  width: 21px;
  height: 21px;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 21px;
  text-align: center;
}
/* Icône posée à droite du texte, intégrée comme un emoji (reste dans la ligne) */
.home-lead-ico {
  display: inline-block;
  height: 1.3em;
  width: auto;
  vertical-align: -.3em;
  margin-left: .12em;
}
.home-lead-ico + .home-lead-ico {
  margin-left: .04em;
}

.home-lead-spacer {
  display: block;
  height: 14px;
}

/* Rangée des deux boutons du hero : « Comment ça marche ? » puis « Choisir un modèle » */
.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
.home-hero-actions .button.home-cta {
  margin-top: 0;
}
/* Bouton secondaire : même gabarit, fond teal très doux, sans contour */
.button.home-cta.home-cta-ghost {
  border-color: transparent;
  background: rgba(7, 152, 173, .1);
}
.button.home-cta.home-cta-ghost:hover {
  border-color: transparent;
  background: rgba(7, 152, 173, .18);
}
/* Même seuil que la réorganisation mobile de shop.js : le reste de la colonne est centré,
   or un conteneur flex n'hérite pas du text-align → les boutons restaient calés à gauche. */
@media (max-width: 900px) {
  .home-hero-actions {
    justify-content: center;
  }
}

.button.home-cta {
  display: inline-block;
  margin-top: 16px;
  padding: 13px 26px;
  border: 2px solid var(--teal);
  border-radius: 16px;
  background: transparent;
  color: var(--teal);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
  transition: background .18s ease, box-shadow .18s ease, transform .18s var(--ease-out);
}

.button.home-cta:hover {
  background: rgba(7, 152, 173, .08);
  box-shadow: 0 8px 20px rgba(7, 152, 173, .12);
  transform: translateY(-1px);
  color: var(--teal);
}

.home-hero-media {
  position: relative;
  min-height: 560px;
  padding: 24px 24px 24px clamp(72px, 7vw, 118px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-device {
  width: min(50%, 310px);
  max-width: 310px;
  max-height: 470px;
  height: auto;
  object-fit: contain;
  animation: podcastor-float 5.4s ease-in-out infinite;
  filter: drop-shadow(0 34px 44px rgba(16, 32, 39, .2));
}

@keyframes podcastor-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-18px) rotate(1deg); }
}

/* Cartes de réassurance */

.home-proof {
  padding: 22px 20px 96px;
  background: linear-gradient(180deg, #eef7f8 0%, #fff 55%);
}

.home-proof-row {
  max-width: 1260px;
  margin: -20px auto 32px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.home-proof-item {
  height: 100%;
  padding: 26px clamp(18px, 2.4vw, 30px) 30px;
  border: 1px solid rgba(16, 31, 39, .1);
  border-radius: 8px;
  background: rgba(255, 255, 255, .74);
  box-shadow: 0 18px 40px rgba(16, 31, 39, .08);
  text-align: center;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}

.home-proof-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 52px rgba(16, 31, 39, .12);
}

.home-proof-item img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin: 0 auto 16px;
}

.home-proof-item h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: .92rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.home-proof-item p {
  max-width: 390px;
  margin: 0 auto;
  color: var(--muted);
  line-height: 1.55;
}

.home-proof-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}

.home-proof-actions .home-cta {
  margin-top: 0;
}

.home-cta-small {
  padding: 10px 20px;
  font-size: .95rem;
}

.home-contact-link {
  font-weight: 800;
  color: var(--teal);
}

.home-contact-link:hover {
  color: var(--teal-dark);
  text-decoration: underline;
}

.footer-copyright {
  grid-column: 1 / -1;
  margin: 26px 0 0;
  font-size: 13px;
  opacity: .7;
}

@media (max-width: 900px) {
  .home-hero-inner {
    grid-template-columns: 1fr;
  }

  .home-hero-copy {
    padding: 40px 24px 8px;
    text-align: center;
  }

  .home-hero-copy h1,
  .home-lead p {
    max-width: none;
  }

  .home-hero-media {
    min-height: 0;
    padding: 8px 16px 40px;
  }

  .home-device {
    width: min(64%, 280px);
  }

  .home-proof-row {
    grid-template-columns: 1fr;
    margin-top: 0;
  }

  .home-proof {
    padding-bottom: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-device {
    animation: none;
  }
}

/* ==========================================================================
   Footer — reprise fidèle podcastor.fr
   ========================================================================== */

.site-footer {
  display: block;
  padding: 0;
  margin-top: 60px;
  background: var(--teal);
  color: #fff;
}

.footer-widgets {
  max-width: 1220px;
  margin: 0 auto;
  padding: 48px 44px 36px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
}

.footer-title {
  display: block;
  margin: 0;
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.footer-divider {
  display: block;
  width: 44px;
  height: 4px;
  margin: 16px 0 20px;
  background: rgba(255, 255, 255, .45);
  border-radius: 999px;
}

.footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.footer-menu a {
  color: rgba(255, 255, 255, .92);
  font-weight: 600;
  font-size: 15.5px;
  transition: color .15s ease, padding-left .18s var(--ease-out);
}

.footer-menu a:hover {
  color: #fff;
  padding-left: 4px;
  text-decoration: underline;
}

.footer-newsletter-text {
  margin: 0 0 18px;
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
  max-width: 340px;
}

.footer-newsletter-form {
  display: flex;
  gap: 12px;
  align-items: stretch;
  flex-wrap: wrap;
  max-width: 400px;
}

.footer-newsletter-form input[type="email"] {
  flex: 1 1 210px;
  min-height: 50px;
  padding: 0 16px;
  border: 1.5px solid rgba(255, 255, 255, .75);
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 16px;
  outline: none;
}

.footer-newsletter-form input[type="email"]::placeholder {
  color: rgba(255, 255, 255, .72);
}

.footer-newsletter-form input[type="email"]:focus {
  border-color: #fff;
  background: rgba(255, 255, 255, .12);
}

.footer-newsletter-form button {
  min-width: 150px;
  min-height: 50px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: #1697a7;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s ease, opacity .2s ease;
}

.footer-newsletter-form button:hover {
  opacity: .95;
  transform: translateY(-1px);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .16);
  background: rgba(0, 0, 0, .06);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 44px;
  font-size: 14px;
  color: rgba(255, 255, 255, .92);
}

.footer-copyright {
  margin: 0;
  opacity: 1;
}

.footer-socials {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.footer-socials a {
  display: inline-flex;
  color: #fff;
  opacity: .92;
  transition: opacity .15s ease, transform .18s var(--ease-out);
}

.footer-socials a:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.back-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  width: 46px;
  height: 46px;
  border: 2px solid var(--teal);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--teal);
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  box-shadow: 0 10px 26px rgba(16, 35, 45, .16);
}

body.is-scrolled .back-to-top {
  opacity: 1;
  pointer-events: auto;
}

.back-to-top:hover {
  background: var(--teal);
  color: #fff;
}

/* ==========================================================================
   Boutique — grille produits style WooCommerce/Flatsome
   ========================================================================== */

.shop-page-title {
  margin: 6px 0 26px;
  font-size: clamp(28px, 3vw, 38px);
}

.wc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.wc-card {
  position: relative;
  display: block;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(16, 32, 39, .08);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}

.wc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(16, 32, 39, .14);
}

.wc-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  text-align: center;
  max-width: 140px;
  padding: 10px 12px;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  box-shadow: 0 8px 18px rgba(7, 152, 173, .3);
}

.wc-card-image {
  display: block;
  background: #fff;
}

.wc-card-image img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 12px;
  transition: transform .25s var(--ease-out);
}

.wc-card:hover .wc-card-image img {
  transform: scale(1.04);
}

.wc-card-text {
  display: grid;
  gap: 4px;
  padding: 14px 16px 18px;
  text-align: center;
}

.wc-card-cat {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .85;
}

.wc-card-title {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--teal);
  line-height: 1.3;
}

.wc-card:hover .wc-card-title {
  text-decoration: underline;
}

.wc-card-price {
  margin-top: 2px;
  font-size: 15.5px;
}

.wc-card-price del {
  color: var(--muted);
  font-weight: 600;
  margin-right: 6px;
}

.wc-card-price ins {
  text-decoration: none;
  color: var(--ink);
  font-weight: 900;
}

/* ==========================================================================
   Fiche produit — mise en page à plat façon site actuel
   ========================================================================== */

.product-summary-flat .product-price span {
  display: inline-block;
  color: var(--coral);
  font-weight: 800;
  font-size: 15px;
}

.buy-flat {
  display: grid;
  gap: 16px;
  margin: 18px 0 22px;
}

.buy-flat-field {
  max-width: 340px;
}

.buy-flat-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
}

.buy-flat-row .quantity-control {
  flex: none;
}

.buy-flat-row .buy-button {
  flex: 1 1 auto;
  width: auto;
  min-width: 240px;
  white-space: nowrap;
}

.buy-flat .impact {
  margin: 2px 0 0;
}

.buy-flat .checkout-reassurance {
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
  text-align: left;
}

@media (max-width: 920px) {
  .footer-widgets {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 40px 24px 30px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    padding: 16px 24px;
  }

  .wc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .wc-grid {
    grid-template-columns: 1fr;
    max-width: 380px;
    margin: 0 auto;
  }

  .footer-newsletter-form {
    flex-direction: column;
    max-width: none;
  }

  .footer-newsletter-form input[type="email"],
  .footer-newsletter-form button {
    width: 100%;
    /* en colonne, la base flex (210px) devenait une hauteur : champ géant */
    flex: none;
    min-height: 52px;
  }

  .buy-flat-row .buy-button {
    min-width: 0;
    width: 100%;
    white-space: normal;
  }
}

/* ==========================================================================
   Superposition fine avec podcastor.fr — header, bandeau, hero
   ========================================================================== */

.site-header {
  min-height: 104px;
  padding: 20px 48px;
}

.logo img {
  width: 196px;
}

.main-nav {
  gap: 44px;
  font-size: 17.5px;
}

.nav-picto {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--teal);
  transition: transform .16s var(--ease-out), color .16s ease;
}

.nav-picto svg {
  width: 25px;
  height: 25px;
}

.nav-picto:hover {
  color: var(--teal-dark);
  transform: translateY(-1px);
}

.nav-picto:after {
  content: none;
}

.cart-count {
  position: absolute;
  top: -3px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.announcement {
  background: var(--teal);
  box-shadow: none;
  font-weight: 600;
  font-size: 16.5px;
  padding: 12px 18px;
}

.home-kicker {
  font-size: 16px;
  padding: 10px 18px;
  margin-bottom: 20px;
}

.home-lead p {
  font-size: 18.5px;
  line-height: 1.6;
}

.button.home-cta {
  padding: 15px 32px;
  font-size: 17.5px;
}

.home-cta-small {
  padding: 11px 22px;
  font-size: 15.5px;
}

@media (min-width: 981px) {
  .home-hero-copy {
    transform: translateX(clamp(72px, 7vw, 132px));
  }

  .home-hero-media {
    padding-left: clamp(24px, 3vw, 60px);
  }
}

@media (max-width: 560px) {
  .main-nav {
    gap: 10px 18px;
    font-size: 15px;
  }

  .announcement {
    font-size: 15px;
    padding: 10px 14px;
  }
}

.home-hero-copy h1 {
  max-width: none;
}

/* ==========================================================================
   Superposition finale — titre, footer, icônes
   ========================================================================== */

.home-hero-copy h1 {
  font-weight: 800;
}

@media (min-width: 981px) {
  .home-hero-copy {
    padding-right: clamp(14px, 1.6vw, 24px);
  }
}

.site-footer {
  margin-top: 0;
}

.home-proof {
  padding-bottom: 110px;
}

.footer-menu {
  gap: 0;
}

.footer-menu li {
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}

.footer-menu li:last-child {
  border-bottom: 0;
}

.footer-menu a {
  display: block;
  padding: 10px 0;
}

.footer-menu a:hover {
  padding-left: 4px;
}

/* Colonne hero : largeur utile 560px comme le col-inner Flatsome, position conservée */
@media (min-width: 981px) {
  .home-hero-copy {
    padding-left: 36px;
    padding-right: clamp(14px, 1.6vw, 24px);
    transform: translateX(calc(clamp(72px, 7vw, 132px) + 55px));
  }
}

.home-lead p {
  font-size: 18px;
}

@media (min-width: 981px) {
  .home-hero-media {
    padding-right: 80px;
  }
}

/* ==========================================================================
   Page Nos engagements — reprise fidèle podcastor.fr
   ========================================================================== */

.page-nos-engagements {
  /* v514 : fond commun à toutes les pages (plus de dégradé blanc ni de halos coupés net sous l’en-tête) */
  background: transparent;
  padding-bottom: clamp(76px, 8vw, 112px);
}

.page-nos-engagements h1 {
  max-width: 820px;
  margin: 0 auto clamp(34px, 5vw, 58px);
  color: var(--ink);
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.06;
  text-align: center;
}

/* ==========================================================================
   Nos engagements : cartes reprises du style de la page d'accueil (v560,
   Gabriel : « retravaille le design de la page pour que les cases soient plus
   designs et plus raccords avec le style de la page d'accueil »).
   Mêmes valeurs que les 3 garanties de l'accueil (.home-proof-item) : fond
   blanc, arrondi 18, bordure rgba(16,32,39,.08), ombre 0 18px 40px, contenu
   CENTRÉ, titre teal 800 sans capitales. Retirés : les coins à 8 px, le liseré
   dégradé du haut, les gros numéros « 01 » et le fond dégradé de l'ancienne
   maquette. Grille conservée : 2 cartes larges puis 3.
   ========================================================================== */
.engage-cards {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
  max-width: 1120px;
  margin: 0 auto;
}

.engage-cards article {
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px 30px 34px;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(16, 32, 39, .08);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(16, 32, 39, .07);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.engage-cards article:nth-child(n + 3) {
  grid-column: span 4;
  padding: 30px 26px 32px;
}

.engage-cards article:hover {
  transform: translateY(-4px);
  border-color: rgba(7, 152, 173, .18);
  box-shadow: 0 24px 48px rgba(16, 32, 39, .12);
}

/* v561 (Gabriel : « j'ai un doute sur les icônes » → pastille retirée) : les
   illustrations sont posées NUES sur le blanc, comme les 3 garanties de
   l'accueil. Les badges officiels (cocarde France, indice de réparabilité)
   respiraient mal dans un cercle teal, et leurs verts juraient avec lui.
   La HAUTEUR est commune aux cinq : elles occupent la même bande. */
.engage-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 4px;
  padding: 0;
  background: none;
}

/* v564 : les 5 fichiers partagent un cadre de 320 x 280 et surtout la MÊME
   SURFACE D ENCRE (et non la même boîte : une icône ajourée doit occuper plus de
   place qu une icône pleine pour peser pareil à l oeil). Une seule taille
   d affichage suffit donc — 101 x 88 = le cadre des fichiers au pixel près. */
.engage-icon img {
  display: block;
  width: 101px;
  height: 88px;
  object-fit: contain;
  transition: transform .22s ease;
}

.engage-cards article:hover .engage-icon img {
  transform: scale(1.06);
}

.engage-cards h5 {
  margin: 0;
  color: var(--teal);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  text-wrap: balance;
}

/* Les titres sont saisis en minuscules (ils étaient mis en capitales par
   l ancienne maquette) : on remet juste la majuscule initiale, sans toucher
   au contenu de la page. */
.engage-cards h5::first-letter {
  text-transform: uppercase;
}

.engage-cards p {
  max-width: 430px;
  margin: 0;
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}

@media (max-width: 900px) {
  /* Tablette : 2 colonnes égales (la 5e carte prend toute la largeur) */
  .engage-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 700px;
  }

  .engage-cards article,
  .engage-cards article:nth-child(n + 3) {
    grid-column: span 1;
    padding: 28px 24px 30px;
  }

  .engage-cards article:last-child {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .page-nos-engagements h1 {
    max-width: 320px;
    margin-left: 0;
    font-size: 27px;
    line-height: 1.14;
    text-align: left;
  }

  .engage-cards {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 360px;
    margin: 0 auto;
  }

  .engage-cards article,
  .engage-cards article:nth-child(n + 3),
  .engage-cards article:last-child {
    grid-column: auto;
    padding: 26px 22px 28px;
  }

  .engage-icon img {
    width: 91px;
    height: 80px;
  }

  .engage-cards h5 {
    font-size: 16.5px;
  }
}
/* Fond pleine largeur pour la page Nos engagements */
.page-nos-engagements {
  max-width: none;
  width: 100%;
  margin: 0;
  padding-left: 24px;
  padding-right: 24px;
}

/* Fond continu de la page d'accueil (main entier, sections transparentes) */
/* Fond de page teal porté par le body → l'en-tête (transparent, hors <main>) partage la même
   couleur que la page, sans couture. */
body.home {
  background:
    radial-gradient(circle at 74% 34%, rgba(7, 152, 173, .14), transparent 28%),
    linear-gradient(135deg, #f7fbfc 0%, #eef8fa 100%);
}

body.home main {
  background: transparent;
}

/* v514 (Gabriel : « uniformise la nouvelle couleur menu haut partout ») : le fond teal très doux de
   l’accueil devient celui de TOUTES les pages publiques → l’en-tête (transparent, hors <main>) a
   partout la couleur qu’il a sur l’accueil et se fond dans la page, sans bande blanche.
   Le halo teal (radial) reste propre à l’accueil ; back-office et pages intégrées non concernés. */
body.shop-shell:not(.home):not(.embed-shell) {
  background: linear-gradient(135deg, #f7fbfc 0%, #eef8fa 100%);
}

body.home .home-hero {
  background: transparent;
}

body.home .home-proof {
  background: transparent;
  padding: 22px 20px 56px;
}

/* Carte boutique : image carrée (l'attribut height ne doit pas primer) */
.wc-card-image img {
  height: auto;
}

/* ==========================================================================
   Fiche produit — image sans cadre (l'appareil flotte, comme podcastor.fr)
   ========================================================================== */

.product-gallery {
  min-height: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  padding: 10px 0;
}

.product-gallery:before,
.product-gallery:after {
  display: none;
}

.product-gallery img {
  max-height: 560px;
  filter: drop-shadow(0 30px 44px rgba(16, 35, 45, .18));
}

.product-gallery .badge.large {
  left: 0;
  top: 0;
}



/* Badge fiche produit : teal plein cohérent avec la boutique (au lieu du pill clair + halo) */
.product-gallery .badge.large {
  background: var(--teal);
  color: #fff;
  border: 0;
  box-shadow: 0 10px 22px rgba(7, 152, 173, .28);
  padding: 11px 18px;
  font-size: 13.5px;
  line-height: 1.2;
}

/* Pastilles de réassurance : plus discrètes et alignées sous l'appareil */




/* Ligne d'impact remontée sous le prix (remplace l'ancien sous-titre) */
.product-impact-lead {
  margin: 14px 0 20px;
}

/* ==========================================================================
   Mentions légales — cartes documents PDF (reprise podcastor.fr)
   ========================================================================== */

.page-mentions-legales h1 {
  margin-bottom: 8px;
}

.page-mentions-legales .cms-body > p {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

.legal-docs-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  margin-top: 34px;
}

.legal-doc-card {
  display: flex;
  flex-direction: column;
  background: #f6f6f6;
  border-radius: 28px;
  padding: 24px;
  color: inherit;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background .2s ease;
}

.legal-doc-card:hover {
  transform: translateY(-4px);
  background: #eef7f8;
  box-shadow: 0 20px 44px rgba(16, 32, 39, .12);
}

.legal-doc-preview-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  line-height: 0;
}

.legal-doc-preview {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 210 / 297;
  object-fit: cover;
  object-position: top center;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(16, 32, 39, .12);
}

.legal-doc-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.legal-doc-meta h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--ink);
}

.legal-doc-type {
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.4;
}

.legal-doc-download {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  color: var(--teal);
  font-weight: 700;
}

.legal-doc-download-icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(7, 152, 173, .12);
  font-weight: 900;
}

@media (max-width: 1100px) {
  .legal-docs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 640px;
  }
}

@media (max-width: 560px) {
  .legal-docs-grid {
    grid-template-columns: 1fr;
    max-width: 340px;
  }
}

/* ==========================================================================
   Formulaire de contact — champ message vocal
   ========================================================================== */

.contact-form select {
  cursor: pointer;
}

.voice-field {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: var(--soft);
}

.voice-field-label {
  font-weight: 900;
  color: var(--ink);
}

.voice-recorder {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.danger-button {
  background: var(--coral);
  color: #fff;
  border-color: var(--coral);
}

.voice-preview {
  width: 100%;
  max-width: 340px;
  height: 40px;
}

.voice-upload {
  display: grid;
  gap: 6px;
}

.voice-upload-text {
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
}

.voice-upload-secondary .voice-upload-text::before {
  content: "↓ ";
}

.voice-field input[type="file"] {
  font-size: 13px;
}

.link-button {
  background: none;
  border: 0;
  color: var(--teal);
  font-weight: 800;
  cursor: pointer;
  padding: 0;
}

.link-button:hover {
  color: var(--teal-dark);
  text-decoration: underline;
}

/* Lecteur vocal côté admin (page Messages) */
.admin-voice {
  margin-top: 10px;
  display: grid;
  gap: 5px;
}

.admin-voice-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--adm-teal, #0798ad);
}

.admin-voice audio {
  width: 240px;
  max-width: 100%;
  height: 38px;
}

/* ==========================================================================
   Landing page publique d'un éditeur (/e/{slug})
   ========================================================================== */

.editor-landing {
  --editor-accent: #0798ad;
}

.editor-landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 40px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 48px) clamp(30px, 4vw, 50px);
}

.editor-landing-hero:only-child,
.editor-landing-copy:last-child {
  grid-template-columns: 1fr;
}

.editor-landing-kicker {
  display: inline-block;
  margin: 0 0 14px;
  padding: 8px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--editor-accent) 12%, #fff);
  color: var(--editor-accent);
  font-weight: 800;
  font-size: .88rem;
}

.editor-landing-copy h1 {
  margin: 0 0 14px;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.05;
  color: var(--ink);
}

.editor-landing-tagline {
  margin: 0 0 18px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--editor-accent);
}

.editor-landing-intro {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 560px;
}

.editor-landing-intro p {
  margin: 0 0 12px;
}

.button.editor-landing-cta {
  margin-top: 22px;
  background: var(--editor-accent);
  border-color: var(--editor-accent);
  color: #fff;
}

.button.editor-landing-cta:hover {
  filter: brightness(.94);
}

.editor-landing-visual {
  display: grid;
  place-items: center;
}

.editor-landing-visual img {
  width: 100%;
  max-width: 460px;
  max-height: 460px;
  object-fit: contain;
  filter: drop-shadow(0 30px 44px rgba(16, 35, 45, .18));
}

.editor-landing-products {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px clamp(20px, 5vw, 48px) clamp(50px, 7vw, 90px);
}

.editor-landing-products h2 {
  margin: 0 0 26px;
  font-size: clamp(24px, 3vw, 34px);
  text-align: center;
}

.editor-landing-empty {
  text-align: center;
  color: var(--muted);
  padding: 30px 0 60px;
}

.editor-landing .wc-card-title {
  color: var(--editor-accent);
}

@media (max-width: 900px) {
  .editor-landing-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .editor-landing-intro {
    max-width: none;
  }

  .editor-landing-visual {
    order: -1;
  }
}

/* Petit ajustement : bouton danger dans les formulaires admin/éditeur */
.button.danger-button {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
}

.button.danger-button:hover {
  filter: brightness(.94);
}

/* ==========================================================================
   Retouches fiche produit (contour bouton, gras option, couleur libellé)
   ========================================================================== */

.buy-button:after {
  content: none;
}

.option-row {
  font-weight: 500;
}

.product-summary-flat .product-price span {
  color: #e00024;
}

/* Champ visuel de la landing éditeur */
.landing-hero-field {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: var(--soft);
}

.landing-hero-label {
  font-weight: 900;
  color: var(--ink);
}

.landing-hero-preview {
  width: 180px;
  max-height: 180px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
}

.landing-hero-upload {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
}

/* Séparateur de sous-section dans les formulaires admin */
.admin-subsection {
  display: grid;
  gap: 2px;
  margin-top: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.admin-subsection strong {
  font-size: 15px;
}

.admin-subsection small {
  color: var(--muted);
}

/* Grille produits des back-offices : colonnes bornées (une carte seule ne s'étire plus) */
.product-grid.admin-products {
  grid-template-columns: repeat(auto-fill, minmax(240px, 300px));
}

.admin-products .product-card-media {
  aspect-ratio: 1;
  max-height: 260px;
}

.admin-products .product-card-media img {
  max-height: 220px;
  object-fit: contain;
}

/* Grille des permissions administrateurs */
.admin-perms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px 18px;
}

/* ==========================================================================
   Popup modale (demande de retrait, etc.)
   ========================================================================== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(12, 31, 40, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal-backdrop[hidden] {
  display: none;
}

.modal-card {
  position: relative;
  width: min(520px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 20px;
  padding: 30px 28px;
  box-shadow: 0 30px 80px rgba(12, 31, 40, .35);
}

.modal-card h2 {
  margin: 0 0 12px;
  font-size: 22px;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #eef2f4;
  color: #10232d;
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
}

.modal-close:hover {
  background: #dfe8ec;
}

/* ==========================================================================
   Éditeur visuel de pages (type WordPress)
   ========================================================================== */

.page-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}

.page-editor-main {
  min-width: 0;
}

.page-editor-canvas-panel {
  padding: 26px 28px 30px;
}

.page-editor-title {
  width: 100%;
  border: 0 !important;
  background: transparent !important;
  font-size: clamp(24px, 2.6vw, 32px) !important;
  font-weight: 900;
  color: var(--ink);
  padding: 4px 2px !important;
  margin-bottom: 6px;
  box-shadow: none !important;
}

.page-editor-title:focus {
  outline: 2px solid rgba(7, 152, 173, .25);
  border-radius: 8px;
}

.page-editor-lead {
  width: 100%;
  border: 0 !important;
  background: transparent !important;
  font-size: 16px !important;
  color: var(--muted);
  padding: 4px 2px !important;
  margin-bottom: 14px;
  resize: vertical;
  box-shadow: none !important;
}

.page-editor-lead:focus {
  outline: 2px solid rgba(7, 152, 173, .25);
  border-radius: 8px;
}

.wysiwyg {
  border: 1.5px solid var(--adm-line, #e3ecef);
  border-radius: 14px;
  background: #fff;
}

.wysiwyg-toolbar {
  position: sticky;
  top: 70px;
  z-index: 10;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 10px;
  background: #f6fafb;
  border-bottom: 1.5px solid var(--adm-line, #e3ecef);
  border-radius: 12.5px 12.5px 0 0;
}

.wysiwyg-toolbar button {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 8px;
  min-width: 34px;
  height: 32px;
  padding: 0 9px;
  font-size: 13.5px;
  font-weight: 700;
  color: #10232d;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}

.wysiwyg-toolbar button:hover {
  background: #e8f3f5;
  border-color: rgba(7, 152, 173, .25);
}

.wysiwyg-sep {
  width: 1px;
  height: 20px;
  background: var(--adm-line, #e3ecef);
  margin: 0 4px;
}

.wysiwyg-html-toggle {
  margin-left: auto;
}

.wysiwyg-toolbar.is-html-mode button:not(.wysiwyg-html-toggle) {
  opacity: .35;
  pointer-events: none;
}

.wysiwyg-toolbar.is-html-mode .wysiwyg-html-toggle {
  background: #10232d;
  color: #fff;
}

.wysiwyg-area {
  min-height: 380px;
  padding: 22px 26px;
  outline: none;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
}

.wysiwyg-area:focus {
  box-shadow: inset 0 0 0 2px rgba(7, 152, 173, .18);
}

.wysiwyg-area img {
  max-width: 320px;
  height: auto;
  border-radius: 8px;
}

.wysiwyg-area h2,
.wysiwyg-area h3 {
  margin: 18px 0 10px;
}

.wysiwyg-html {
  width: 100%;
  min-height: 380px;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 18px 22px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px !important;
  line-height: 1.6;
  background: #0c1f28 !important;
  color: #c8e4ec !important;
  resize: vertical;
}

.page-editor-side {
  display: grid;
  gap: 16px;
  position: sticky;
  top: 86px;
}

.page-editor-side-grid {
  gap: 12px;
}

.page-editor-save {
  width: 100%;
  font-size: 16px;
  padding: 14px;
}

/* Médiathèque modale */
.modal-card-wide {
  width: min(760px, 100%);
}

.media-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  max-height: 46vh;
  overflow-y: auto;
  padding: 4px;
}

.media-picker-item {
  display: grid;
  gap: 6px;
  border: 1.5px solid var(--adm-line, #e3ecef);
  border-radius: 12px;
  background: #fff;
  padding: 8px;
  cursor: pointer;
  transition: border-color .14s ease, transform .14s ease;
}

.media-picker-item:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
}

.media-picker-item img {
  width: 100%;
  height: 84px;
  object-fit: contain;
}

.media-picker-item span {
  font-size: 11px;
  color: var(--muted);
  word-break: break-all;
  text-align: center;
}

.media-picker-hint {
  margin: 14px 0 0;
  font-size: 13px;
}

@media (max-width: 1100px) {
  .page-editor {
    grid-template-columns: 1fr;
  }

  .page-editor-side {
    position: static;
  }
}

/* ─── Bundle : produits dérivés en complément ─── */
.bundle-block {
	margin-top: 6px;
	padding: 14px 16px;
	border: 1px solid rgba(16, 32, 39, 0.12);
	border-radius: 12px;
	background: rgba(7, 152, 173, 0.04);
	display: grid;
	gap: 10px;
}

.bundle-block-title {
	font-weight: 800;
	font-size: 0.95rem;
	color: var(--podcastor-ink, #102027);
}

.addon-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 10px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.addon-row:hover {
	background: rgba(255, 255, 255, 0.7);
	border-color: rgba(7, 152, 173, 0.25);
}

.addon-row:has(input:checked) {
	background: #fff;
	border-color: var(--podcastor-teal, #0798ad);
}

.addon-row input[type="checkbox"] {
	flex: 0 0 auto;
}

.addon-thumb {
	width: 52px;
	height: 52px;
	object-fit: cover;
	border-radius: 8px;
	flex: 0 0 auto;
}

.addon-copy {
	display: block;
	line-height: 1.35;
	font-size: 0.92rem;
}

.addon-copy del {
	color: rgba(16, 32, 39, 0.45);
	font-size: 0.85em;
}

.addon-copy small {
	display: block;
	color: rgba(16, 32, 39, 0.55);
	font-size: 0.8rem;
}

.addon-copy .addon-line {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.addon-pct {
	display: inline-block;
	background: #e8f7ef;
	color: #1a7f4b;
	font-size: 0.74rem;
	font-weight: 800;
	line-height: 1;
	padding: 3px 7px;
	border-radius: 999px;
	letter-spacing: 0.2px;
}

/* Total (barré + net) affiché sur le bouton d'achat */
.buy-button .buy-total {
	font-weight: 800;
}

.buy-button .buy-total del {
	font-weight: 600;
	opacity: 0.7;
	margin-right: 2px;
}

/* Bouton « Achat rapide » (PayPal express) */
.buy-quick {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 22px;
	min-height: 54px;
	border: 0;
	border-radius: 14px;
	background: var(--ink, #102027);
	color: #fff;
	font-family: inherit;
	font-weight: 800;
	font-size: 1rem;
	cursor: pointer;
	transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.buy-quick:hover {
	transform: translateY(-1px);
	background: #1c3540;
}

.buy-quick:disabled {
	opacity: 0.6;
	cursor: progress;
	transform: none;
}

.buy-quick-spark {
	font-size: 1.05em;
}

@media (max-width: 620px) {
	.buy-flat-row .buy-button,
	.buy-quick {
		width: 100%;
		min-width: 0;
	}
}

/* v516 (Gabriel : « change la barre Achat rapide en Achat rapide avec PayPal, dans le style de la barre
   Ajouter au panier ») : barre PLEINE LARGEUR sous le bouton d’achat, même hauteur, même arrondi, même
   contour et même typographie ; fond noir conservé pour distinguer le paiement PayPal de l’ajout au panier. */
.buy-flat-row .buy-quick {
	flex: 1 1 100%;
	width: 100%;
	min-height: 54px;
	padding: 13px 25px;
	border-radius: 999px;
	/* v517 (Gabriel : « change la couleur / le gras pour la rendre moins visible ») : bouton SECONDAIRE
	   clair — fond blanc, contour fin gris, texte gris foncé en graisse 700 (au lieu de noir plein / 900) */
	background: #fff;
	border: 2px solid rgba(16, 32, 39, .12);
	color: #3a4a52;
	font-size: 17px;
	font-weight: 700;
	box-shadow: 0 8px 20px rgba(16, 32, 39, .05);
}
.buy-flat-row .buy-quick:hover {
	background: #f6fafb;
	border-color: rgba(16, 32, 39, .26);
	color: var(--ink, #102027);
	box-shadow: 0 10px 24px rgba(16, 32, 39, .08);
}
/* v519 (Gabriel : « intègre le vrai logo discret de PayPal ») : logo officiel monochrome (paypal-black.svg,
   téléchargé depuis paypalobjects.com, gris #333030) à la place du mot « PayPal » — hébergé chez nous. */
.buy-quick-logo {
	display: block;
	width: auto;
	height: 20px;
}

.cart-line-addon {
	border-top: 1px dashed rgba(16, 32, 39, 0.15);
	padding-top: 16px;
}

.cart-line-addon img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 8px;
}

/* ─── Infobulle riche "Stockage" (design podcastor.fr) ─── */
.info-rich {
	border-bottom: none;
	cursor: help;
	position: relative;
	outline: none;
}

.info-rich:hover:after {
	content: none;
}

/* La carte est déplacée dans <body> par shop.js et positionnée en fixe :
   aucun contexte d'empilement de la page ne peut passer devant. */
.info-card {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: min(440px, calc(100vw - 32px));
	background: #fff;
	color: var(--ink);
	border-radius: 18px;
	box-shadow: 0 18px 60px rgba(16, 32, 39, 0.28);
	padding: 20px 24px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	z-index: 9999;
}

.info-card.is-visible {
	display: block;
}

.info-card::before {
	content: "";
	position: absolute;
	top: -7px;
	left: var(--arrow-x, 50%);
	width: 15px;
	height: 15px;
	background: #fff;
	transform: translateX(-50%) rotate(45deg);
	border-radius: 3px;
}

.info-card p {
	margin: 0 0 12px;
	text-align: left;
}

/* Pas de marge sous le dernier élément : le bas de la bulle reste équilibré avec le haut */
.info-card > *:last-child {
	margin-bottom: 0;
}

.info-card ul {
	margin: 0;
	padding-left: 22px;
	display: grid;
	gap: 6px;
}

.info-card li strong {
	font-weight: 800;
}

/* ─── Panier (réplique du panier WooCommerce podcastor.fr) ─── */
.wc-cart {
	max-width: 1180px;
	margin: 0 auto;
}

.wc-cart-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	font-size: clamp(20px, 2.4vw, 27px);
	font-weight: 700;
	color: #c3ced2;
	margin: 6px 0 34px;
}

.wc-cart-steps a {
	color: #c3ced2;
	text-decoration: none;
}

.wc-cart-steps a:hover {
	color: var(--podcastor-teal, #0798ad);
}

.wc-cart-steps .is-current {
	color: var(--ink);
}

.wc-step-sep {
	font-weight: 400;
}

.wc-cart-eligible p {
	margin: 0 0 10px;
	font-size: 17px;
	color: var(--ink);
}

.wc-cart-progress {
	display: block;
	height: 6px;
	border-radius: 999px;
	background: var(--podcastor-teal, #0798ad);
	margin-bottom: 34px;
}

.wc-cart-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 52px;
	align-items: start;
}

.wc-cart-table {
	width: 100%;
	border-collapse: collapse;
}

.wc-cart-table thead th {
	text-align: left;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
	padding: 0 10px 12px 0;
	border-bottom: 2px solid rgba(16, 32, 39, 0.12);
}

.wc-cart-table tbody td {
	padding: 22px 10px 22px 0;
	border-bottom: 1px solid rgba(16, 32, 39, 0.1);
	vertical-align: middle;
	font-size: 16px;
	color: var(--ink);
}

.wc-cart-remove-cell {
	width: 36px;
}

.wc-cart-remove {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid rgba(16, 32, 39, 0.25);
	background: transparent;
	color: rgba(16, 32, 39, 0.45);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
	padding: 0;
}

.wc-cart-remove:hover {
	border-color: #c0392b;
	color: #c0392b;
}

.wc-cart-product-cell {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 240px;
}

.wc-cart-product-cell img {
	width: 82px;
	height: 82px;
	object-fit: contain;
	flex: none;
}

.wc-cart-product-name {
	display: block;
	color: var(--podcastor-teal, #0798ad);
	font-weight: 700;
	font-size: 17px;
	text-decoration: none;
	margin-bottom: 6px;
}

.wc-cart-meta {
	margin: 0 0 2px;
	font-size: 13.5px;
	color: rgba(16, 32, 39, 0.55);
}

.wc-cart-meta strong {
	color: rgba(16, 32, 39, 0.75);
	font-weight: 700;
}

.wc-qty-stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid rgba(16, 32, 39, 0.15);
	border-radius: 6px;
}

.wc-qty-stepper button {
	width: 26px;
	height: 34px;
	border: 0;
	background: transparent;
	color: rgba(16, 32, 39, 0.45);
	font-size: 15px;
	cursor: pointer;
	padding: 0;
}

.wc-qty-stepper button:hover {
	color: var(--podcastor-teal, #0798ad);
}

.wc-qty-stepper input {
	width: 30px;
	border: 0;
	text-align: center;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--ink);
	-moz-appearance: textfield;
	appearance: textfield;
	padding: 7px 0;
	background: transparent;
}

.wc-qty-stepper input::-webkit-outer-spin-button,
.wc-qty-stepper input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.wc-cart-qty-fixed {
	display: inline-block;
	padding: 9px 18px;
	border: 1px solid rgba(16, 32, 39, 0.12);
	border-radius: 6px;
	color: rgba(16, 32, 39, 0.55);
}

.wc-cart-continue {
	display: inline-block;
	margin-top: 30px;
	padding: 13px 26px;
	border: 2px solid var(--podcastor-teal, #0798ad);
	border-radius: 999px;
	color: var(--podcastor-teal, #0798ad);
	font-weight: 800;
	font-size: 13.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.wc-cart-continue:hover {
	background: var(--podcastor-teal, #0798ad);
	color: #fff;
}

.wc-cart-totals h2 {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 6px;
	padding-bottom: 14px;
	border-bottom: 2px solid rgba(16, 32, 39, 0.12);
}

.wc-totals-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 16px 0;
	border-bottom: 1px solid rgba(16, 32, 39, 0.1);
	font-size: 16px;
}

.wc-totals-shipping {
	padding: 16px 0;
	border-bottom: 1px solid rgba(16, 32, 39, 0.1);
	display: grid;
	gap: 10px;
	font-size: 15px;
}

.wc-totals-label {
	color: rgba(16, 32, 39, 0.6);
}

.wc-ship-choice {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}

.wc-ship-choice input {
	accent-color: var(--podcastor-teal, #0798ad);
	width: 17px;
	height: 17px;
}

.wc-totals-total {
	font-size: 19px;
}

.wc-totals-total strong {
	font-size: 21px;
}

.wc-cart-checkout {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 22px;
}

.wc-cart-promo {
	margin-top: 30px;
	padding-top: 22px;
	border-top: 1px solid rgba(16, 32, 39, 0.1);
	display: grid;
	gap: 12px;
}

.wc-cart-promo-title {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-weight: 800;
	font-size: 16px;
}

.wc-cart-promo-title svg {
	width: 19px;
	height: 19px;
	color: rgba(16, 32, 39, 0.5);
}

.wc-cart-promo input {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid rgba(16, 32, 39, 0.2);
	border-radius: 999px;
	font-size: 15px;
}

.wc-cart-promo-apply {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid rgba(16, 32, 39, 0.25);
	border-radius: 999px;
	background: transparent;
	color: rgba(16, 32, 39, 0.55);
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
}

.wc-cart-promo-apply:hover {
	border-color: var(--podcastor-teal, #0798ad);
	color: var(--podcastor-teal, #0798ad);
}

@media (max-width: 900px) {
	.wc-cart-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
	}

	.wc-cart-table thead {
		display: none;
	}

	.wc-cart-table tbody tr {
		display: grid;
		grid-template-columns: 36px minmax(0, 1fr);
		gap: 4px 10px;
		padding: 18px 0;
		border-bottom: 1px solid rgba(16, 32, 39, 0.1);
	}

	.wc-cart-table tbody td {
		border: 0;
		padding: 4px 0;
	}

	.wc-cart-table tbody td[data-label] {
		grid-column: 2;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wc-cart-table tbody td[data-label]:before {
		content: attr(data-label);
		font-size: 13px;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: rgba(16, 32, 39, 0.5);
	}
}

/* Panier : prix et sous-totaux sur une seule ligne */
.wc-cart-table thead th {
	white-space: nowrap;
}

@media (min-width: 901px) {
	.wc-cart-table tbody td[data-label] {
		white-space: nowrap;
	}
}

.wc-cart-promo-applied {
	margin: 0;
	padding: 12px 16px;
	border-radius: 12px;
	background: rgba(29, 158, 89, 0.1);
	color: #1d7a4c;
	font-weight: 700;
	font-size: 14.5px;
}

.wc-totals-discount span,
.wc-totals-discount strong {
	color: #1d7a4c;
}

/* ─── Fiche produit : Stockage et Personnalisation uniformisés ─── */
.buy-flat .option-row {
	max-width: 340px;
	border: 1px solid #dbe5e8;
	border-radius: 8px;
	padding: 13px 15px;
	background: #fff;
	align-items: center;
	flex-wrap: nowrap;
	font-size: 16px;
	gap: 10px;
}

.buy-flat .option-row:hover {
	transform: none;
	border-color: #dbe5e8;
}

.buy-flat .option-row.is-active,
.buy-flat .option-row:has(input:checked) {
	background: #fff;
	border-color: #dbe5e8;
	box-shadow: none;
}

/* Même écart libellé → champ que pour le menu Stockage */
.buy-flat > span.field-label {
	margin-bottom: -8px;
}

/* Fiche produit : Stockage et Personnalisation côte à côte */
.buy-flat-pair {
	display: grid;
	gap: 16px;
}

.buy-flat-pair.has-two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.buy-field {
	display: grid;
	gap: 8px;
	align-content: start;
}

.buy-field .field-label {
	margin: 0;
}

.buy-field select,
.buy-flat .buy-flat-pair .option-row {
	max-width: none;
	width: 100%;
}

/* Le <select> hérite du gras du .field-label : on rétablit un poids normal. */
.buy-field select {
	font-weight: 500;
}

@media (max-width: 600px) {
	.buy-flat-pair.has-two {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Stockage / Personnalisation : boîtes de même hauteur */
.buy-flat-pair.has-two {
	align-items: stretch;
}

.buy-flat-pair .buy-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.buy-flat-pair .buy-field > label.field-label {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

.buy-flat-pair .buy-field select {
	flex: 1;
}

.buy-flat .buy-flat-pair .option-row {
	flex: 1;
	box-sizing: border-box;
}

/* Checkout : ligne CGV propre, phrase fluide avec lien inline */
.checkbox-row.terms {
	display: block;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink);
}

.checkbox-row.terms input {
	margin-right: 8px;
	vertical-align: -2px;
	accent-color: var(--podcastor-teal, #0798ad);
}

.checkbox-row.terms a {
	color: var(--podcastor-teal, #0798ad);
	font-weight: 700;
}

/* Checkout : bouton Commander aligné à droite */
.checkout-order > button.button[type="submit"] {
	display: block;
	margin-left: auto;
}

/* ─── Page Service après-vente ─── */
.sav-page {
	max-width: 880px;
	margin: 0 auto;
	text-align: center;
	padding-top: 46px;
}

.sav-title {
	font-size: clamp(20px, 2.6vw, 27px);
	color: var(--podcastor-teal, #0798ad);
	margin: 0 0 30px;
}

.sav-page > p {
	font-size: 16.5px;
	line-height: 1.65;
	color: rgba(16, 32, 39, 0.8);
	margin: 0 0 22px;
}

.sav-actions {
	display: grid;
	gap: 16px;
	max-width: 640px;
	margin: 34px auto 0;
}

.sav-button {
	width: 100%;
	font-size: 17px;
	min-height: 54px;
	display: grid;
	place-items: center;
}

.sav-voice-card {
	max-width: 640px;
	margin: 26px auto 0;
	background: #fff;
	border: 1px solid rgba(16, 32, 39, 0.08);
	border-radius: 24px;
	box-shadow: 0 24px 60px rgba(16, 32, 39, 0.1);
	padding: 30px 28px;
	display: grid;
	gap: 16px;
	text-align: left;
}

.sav-voice-card h2 {
	margin: 0;
	text-align: center;
	font-size: 21px;
	color: var(--ink);
}

.sav-voice-steps {
	margin: 0;
	text-align: center;
	color: rgba(16, 32, 39, 0.6);
	font-weight: 700;
	font-size: 14px;
}

.sav-voice-steps span {
	color: var(--podcastor-teal, #0798ad);
}

.sav-voice-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.sav-voice-grid label {
	display: grid;
	gap: 6px;
	font-weight: 700;
	font-size: 14px;
	color: var(--ink);
}

.sav-voice-field {
	border: 1px dashed rgba(16, 32, 39, 0.18);
	border-radius: 14px;
	padding: 16px;
}

.sav-voice-submit {
	width: 100%;
}

.sav-voice-card small {
	text-align: center;
	color: rgba(16, 32, 39, 0.55);
}

@media (max-width: 560px) {
	.sav-voice-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ─── Page Nos applications (dupliquée depuis podcastor.fr/app) ─── */

/* Podcastor - 04 - Page Nos apps
   Migré depuis flatsome-child/style.css le 2026-05-16. */

/* Podcastor apps page */
.podcastor-app-shell {
  max-width: none;
  background: transparent; /* v514 : fond de page commun (était #f4fbfc → bande sous l’en-tête) */
}

.podcastor-app-page {
  --app-ink: #101f27;
  --app-muted: #637581;
  --app-teal: #0798ad;
  --app-teal-dark: #087e91;
  --app-line: rgba(16, 31, 39, 0.12);
  --app-surface: rgba(255, 255, 255, 0.78);
  color: var(--app-ink);
  overflow: hidden;
}

.podcastor-app-hero {
  min-height: 680px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
  align-items: center;
  gap: clamp(36px, 6vw, 84px);
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(58px, 7vw, 92px) 28px clamp(46px, 6vw, 74px);
}

.podcastor-app-hero-copy {
  max-width: 610px;
}

.podcastor-app-kicker {
  display: inline-flex;
  margin: 0 0 18px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(7, 152, 173, 0.1);
  color: #086f80;
  font-weight: 800;
  line-height: 1.25;
}

.podcastor-app-hero h1,
.podcastor-app-section-head h1,
.podcastor-app-section-head h2 {
  margin: 0;
  color: var(--app-ink);
  letter-spacing: 0;
}

.podcastor-app-hero h1 {
  max-width: 640px;
  font-size: clamp(42px, 5vw, 72px);
  line-height: 1.03;
}

.podcastor-app-lead {
  max-width: 560px;
  margin: 24px 0 30px;
  color: var(--app-muted);
  font-size: 1.16rem;
  line-height: 1.65;
}

.podcastor-app-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.podcastor-app-button,
.podcastor-app-store-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 8px;
  background: linear-gradient(180deg, #58b5c5 0%, #0798ad 100%);
  color: #fff !important;
  font-weight: 800;
  box-shadow: 0 14px 28px rgba(7, 152, 173, 0.2);
}

.podcastor-app-button-secondary {
  border: 1px solid var(--app-line);
  background: rgba(255, 255, 255, 0.75);
  color: var(--app-ink) !important;
  box-shadow: none;
}

.podcastor-app-hero-visual {
  position: relative;
  min-height: 520px;
}

.podcastor-app-hero-visual::before {
  content: "";
  position: absolute;
  inset: 11% 4% 7% 8%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(7, 152, 173, 0.2), rgba(7, 152, 173, 0) 62%);
}

.podcastor-app-device {
  position: absolute;
  z-index: 2;
  right: 8%;
  bottom: 3%;
  width: min(38%, 230px);
  filter: drop-shadow(0 26px 36px rgba(16, 32, 39, 0.18));
  animation: podcastor-app-float 5.6s ease-in-out infinite;
}

.podcastor-app-phone {
  position: absolute;
  z-index: 1;
  top: 8%;
  left: 4%;
  width: min(62%, 330px);
  aspect-ratio: 0.72;
  padding: 24px;
  border: 1px solid rgba(7, 152, 173, 0.16);
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(233,248,251,0.92));
  box-shadow: 0 36px 80px rgba(16, 32, 39, 0.13);
}

.podcastor-app-phone-bar {
  width: 54px;
  height: 6px;
  margin: 0 auto 22px;
  border-radius: 999px;
  background: rgba(16, 31, 39, 0.14);
}

.podcastor-app-phone-cover {
  width: 70%;
  aspect-ratio: 1;
  margin: 0 auto 22px;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(7,152,173,0.82), rgba(78,179,196,0.4)),
    url("https://podcastor.fr/wp-content/uploads/2026/02/cropped-LOGO-270x270.png") center / 58% no-repeat;
}

.podcastor-app-phone-lines span {
  display: block;
  height: 12px;
  margin: 12px auto;
  border-radius: 999px;
  background: rgba(16, 31, 39, 0.12);
}

.podcastor-app-phone-lines span:nth-child(1) {
  width: 82%;
}

.podcastor-app-phone-lines span:nth-child(2) {
  width: 68%;
}

.podcastor-app-phone-lines span:nth-child(3) {
  width: 48%;
}

.podcastor-app-downloads,
.podcastor-app-steps {
  max-width: 1180px;
  margin: 0 auto;
  padding: 58px 28px;
}

.podcastor-app-downloads {
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(42px, 5vw, 70px);
  padding-bottom: clamp(40px, 5vw, 66px);
}

.podcastor-app-section-head {
  max-width: 900px;
  margin-bottom: 32px;
}

.podcastor-app-section-head h1,
.podcastor-app-section-head h2 {
  max-width: 880px;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.06;
}

.podcastor-app-section-lead {
  max-width: 780px;
  margin: 20px 0 0;
  color: var(--app-muted);
  font-size: 1.16rem;
  line-height: 1.65;
}

.podcastor-app-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.podcastor-app-card,
.podcastor-app-step {
  min-height: 100%;
  padding: 24px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface);
  box-shadow: 0 18px 44px rgba(16, 32, 39, 0.06);
}

.podcastor-app-card {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.86);
}

.podcastor-app-platform-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-bottom: 20px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(7, 152, 173, 0.1);
  color: var(--app-teal-dark);
}

.podcastor-app-platform-mark svg {
  display: block;
  width: auto;
  height: 28px;
  fill: currentColor;
}

.podcastor-app-platform-mark--android {
  color: #3ddc84;
}

.podcastor-app-platform-mark--apple,
.podcastor-app-platform-mark--macos {
  color: #111820;
}

.podcastor-app-platform-mark--windows {
  color: #0078d4;
}

.podcastor-app-card h3,
.podcastor-app-step h3 {
  margin: 0 0 20px;
  color: var(--app-ink);
  font-size: 1.12rem;
}

.podcastor-app-card h3 {
  text-align: center;
}

.podcastor-app-card p,
.podcastor-app-step p {
  margin: 0 0 22px;
  color: var(--app-muted);
  line-height: 1.55;
}

.podcastor-app-card p {
  font-size: 0.96rem;
}

.podcastor-app-store-link {
  width: 100%;
  min-height: 44px;
  margin-top: auto;
  box-shadow: none;
}

.podcastor-app-store-link--with-logo {
  align-items: center;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  justify-items: center;
  min-height: 54px;
  padding: 8px 14px 8px 10px;
  text-align: center;
  background: #fff !important;
  border: 1px solid rgba(7, 152, 173, 0.22);
  color: var(--app-ink) !important;
  box-shadow: 0 10px 22px rgba(16, 32, 39, 0.05);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.podcastor-app-store-link--with-logo .podcastor-app-platform-mark {
  width: 38px;
  min-height: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  background: rgba(7, 152, 173, 0.08);
  box-shadow: none;
}

.podcastor-app-store-link--with-logo .podcastor-app-platform-mark svg {
  height: 20px;
}

.podcastor-app-store-text {
  color: var(--app-ink);
  line-height: 1;
}

.podcastor-app-store-link--with-logo:hover {
  background: #f9fdfe !important;
  border-color: rgba(7, 152, 173, 0.46);
  box-shadow: 0 14px 26px rgba(7, 152, 173, 0.12);
  transform: translateY(-1px);
}

.podcastor-app-steps {
  padding-top: 36px;
  padding-bottom: 90px;
}

.podcastor-app-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.podcastor-app-step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--app-teal);
  color: #fff;
  font-weight: 900;
}

@keyframes podcastor-app-float {
  0%, 100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-14px) rotate(1deg);
  }
}

@media only screen and (max-width: 64em) {
  .podcastor-app-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 58px;
  }

  .podcastor-app-hero-visual {
    min-height: 420px;
  }

  .podcastor-app-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .podcastor-app-downloads {
    min-height: auto;
  }
}

@media only screen and (max-width: 48em) {
  .podcastor-app-hero,
  .podcastor-app-downloads,
  .podcastor-app-steps {
    padding-left: 18px;
    padding-right: 18px;
  }

  .podcastor-app-downloads {
    max-width: 100vw !important;
    overflow: hidden;
  }

  .podcastor-app-section-head,
  .podcastor-app-section-head h1,
  .podcastor-app-section-head h2,
  .podcastor-app-section-lead {
    width: 100%;
    max-width: 324px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
  }

  .podcastor-app-shell {
    padding-top: 30px;
  }

  .podcastor-app-section-head {
    margin-top: 10px !important;
  }

  .podcastor-app-hero {
    overflow: hidden;
  }

  .podcastor-app-hero-copy,
  .podcastor-app-hero h1,
  .podcastor-app-lead {
    max-width: min(324px, calc(100vw - 36px));
  }

  .podcastor-app-hero h1 {
    width: 100%;
    max-width: 320px;
    font-size: 30px;
    line-height: 1.12;
    overflow-wrap: break-word;
  }

  .podcastor-app-lead {
    font-size: 1rem;
    overflow-wrap: break-word;
  }

  .podcastor-app-actions,
  .podcastor-app-grid,
  .podcastor-app-steps-grid {
    grid-template-columns: 1fr;
  }

  .podcastor-app-section-head h1,
  .podcastor-app-section-head h2 {
    font-size: 27px;
    line-height: 1.14;
    overflow-wrap: break-word;
  }

  .podcastor-app-section-lead {
    font-size: 1rem;
    overflow-wrap: break-word;
  }

  .podcastor-app-grid,
  .podcastor-app-card,
  .podcastor-app-step {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .podcastor-app-grid {
    width: min(280px, calc(100vw - 110px)) !important;
    max-width: min(280px, calc(100vw - 110px)) !important;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
  }

  .podcastor-app-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 18px;
  }

  .podcastor-app-card p,
  .podcastor-app-store-link,
  .podcastor-app-platform-mark {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
  }

  .podcastor-app-store-link {
    padding-left: 14px;
    padding-right: 14px;
    font-size: 0.92rem;
    min-height: 44px;
  }

  .podcastor-app-store-link--with-logo {
    grid-template-columns: 34px 1fr;
    gap: 8px;
    padding: 7px 12px 7px 10px;
  }

  .podcastor-app-store-link--with-logo .podcastor-app-platform-mark {
    width: 34px;
    min-height: 32px;
    height: 32px;
  }

  .podcastor-app-store-link--with-logo .podcastor-app-platform-mark svg {
    height: 18px;
  }

  .podcastor-app-actions {
    display: grid;
  }

  .podcastor-app-hero-visual {
    min-height: 360px;
  }

  .podcastor-app-phone {
    left: 0;
    width: min(68%, 260px);
  }

  .podcastor-app-device {
    right: 2%;
    width: min(42%, 170px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .podcastor-app-device {
    animation: none;
  }
}

/* SAV : onglets Écrivez-nous / Envoyez-nous un vocal */
.sav-tabs {
	display: inline-flex;
	gap: 4px;
	margin: 30px auto 0;
	padding: 6px;
	border-radius: 999px;
	background: rgba(7, 152, 173, 0.1);
	border: 1px solid rgba(7, 152, 173, 0.15);
}

.sav-tab {
	border: 0;
	background: transparent;
	padding: 13px 26px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 15.5px;
	color: rgba(16, 32, 39, 0.6);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.sav-tab.is-active {
	background: #fff;
	color: var(--podcastor-teal, #0798ad);
	box-shadow: 0 8px 22px rgba(16, 32, 39, 0.12);
}

.sav-message-label {
	display: grid;
	gap: 6px;
	font-weight: 700;
	font-size: 14px;
	color: var(--ink);
	text-align: left;
}

.apps-soon {
	font-size: 17px;
	color: rgba(16, 32, 39, 0.7);
	margin: 14px 0 0;
}

.podcastor-app-store-link[aria-disabled="true"] {
	cursor: default;
	background: #edf1f2 !important;
	border-color: rgba(16, 32, 39, 0.08);
	color: #9aa6ac !important;
	box-shadow: none;
}

.podcastor-app-store-link[aria-disabled="true"] .podcastor-app-store-text {
	color: #9aa6ac;
}

.podcastor-app-store-link[aria-disabled="true"] .podcastor-app-platform-mark {
	background: rgba(16, 32, 39, 0.05);
	filter: grayscale(1);
	opacity: 0.6;
}

.podcastor-app-store-link[aria-disabled="true"]:hover {
	background: #edf1f2 !important;
	border-color: rgba(16, 32, 39, 0.08);
	box-shadow: none;
	transform: none;
}

/* SAV : enregistreur vocal avec gros bouton micro */
.sav-mic-zone {
	display: grid;
	justify-items: center;
	gap: 12px;
	padding: 18px 0 6px;
}

.sav-mic {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	border: 0;
	background: radial-gradient(circle at 30% 25%, #12b3c9, var(--podcastor-teal, #0798ad) 65%);
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	box-shadow: 0 0 0 14px rgba(7, 152, 173, 0.08), 0 0 0 28px rgba(7, 152, 173, 0.04), 0 18px 40px rgba(7, 152, 173, 0.35);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	margin-bottom: 10px;
}

.sav-mic:hover {
	transform: scale(1.05);
}

.sav-mic svg {
	width: 40px;
	height: 40px;
}

.sav-mic-stop {
	background: radial-gradient(circle at 30% 25%, #ff7a63, #e2503a 65%);
	box-shadow: 0 0 0 14px rgba(226, 80, 58, 0.1), 0 0 0 28px rgba(226, 80, 58, 0.05), 0 18px 40px rgba(226, 80, 58, 0.35);
	animation: sav-mic-pulse 1.4s ease infinite;
}

@keyframes sav-mic-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.06); }
}

.sav-mic-zone h2 {
	margin: 0;
	font-size: 24px;
	color: var(--podcastor-teal, #0798ad);
	text-align: center;
}

.sav-voice-sub {
	margin: 0;
	color: rgba(16, 32, 39, 0.6);
	text-align: center;
	font-size: 15px;
}

.sav-voice-status {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 12px 24px;
	border-radius: 999px;
	background: rgba(7, 152, 173, 0.08);
	font-weight: 800;
	color: var(--ink);
	font-size: 16px;
}

.sav-voice-status strong {
	color: var(--podcastor-teal, #0798ad);
}

.sav-voice-status .sav-status-recording {
	display: none;
	color: #e2503a;
}

.sav-voice-card:has([data-voice-stop]:not([hidden])) .sav-status-ready {
	display: none;
}

.sav-voice-card:has([data-voice-stop]:not([hidden])) .sav-status-recording {
	display: inline;
}

.sav-voice-mic-field {
	border: 0;
	padding: 0;
	display: grid;
	justify-items: center;
	gap: 10px;
}

.sav-voice-mic-field .voice-upload {
	text-align: center;
}

.sav-voice-mic-field .voice-preview {
	width: 100%;
	max-width: 420px;
}

/* hidden doit primer sur display: grid */
.sav-voice-card[hidden] {
	display: none;
}

.sav-voice-card [hidden] {
	display: none !important;
}

/* SAV vocal : pas de fond derrière la zone micro + ondes animées */
.sav-voice-mic-field {
	background: transparent;
	border: 0;
	padding: 0;
}

@keyframes sav-mic-rings {
	0%, 100% {
		box-shadow: 0 0 0 14px rgba(7, 152, 173, 0.08), 0 0 0 28px rgba(7, 152, 173, 0.04), 0 18px 40px rgba(7, 152, 173, 0.35);
	}
	50% {
		box-shadow: 0 0 0 19px rgba(7, 152, 173, 0.11), 0 0 0 38px rgba(7, 152, 173, 0.055), 0 18px 40px rgba(7, 152, 173, 0.35);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.sav-mic[data-voice-record] {
		animation: sav-mic-rings 3.2s ease-in-out infinite;
	}
}

/* Contact : onglets centrés + objet sur toute la largeur */
.contact-tabs {
	display: flex;
	width: fit-content;
	margin: 6px auto 0;
}

.sav-voice-grid .contact-subject {
	grid-column: 1 / -1;
}

/* ─── Page Soumettre un podcast (formulaire fonctionnel relayé au service d'indexation) ─── */

.page-submit [hidden] {
  display: none !important;
}

.submit-card {
  max-width: 620px;
  margin: 8px auto 44px;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid rgba(7, 152, 173, .16);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow);
  text-align: center;
}

.submit-card h2 {
  margin: 0 0 8px;
  font-size: 22px;
}

.submit-sub {
  max-width: 460px;
  margin: 0 auto 20px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.submit-form {
  display: grid;
  gap: 12px;
}

.submit-input {
  text-align: center;
  font-weight: 600;
}

.submit-button {
  width: 100%;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.submit-button[disabled] {
  opacity: .6;
  cursor: progress;
}

.submit-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: submit-spin .7s linear infinite;
}

@keyframes submit-spin {
  to { transform: rotate(360deg); }
}

.submit-legal {
  margin: 16px auto 0;
  max-width: 480px;
  color: rgba(16, 32, 39, .5);
  font-size: 12px;
  line-height: 1.5;
}

.submit-banner {
  margin: 0 0 14px;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}

.submit-banner-error {
  color: #b20000;
  background: rgba(178, 0, 0, .08);
  border: 1px solid rgba(178, 0, 0, .18);
}

.submit-banner-warning {
  color: #8a5a00;
  background: rgba(214, 148, 0, .1);
  border: 1px solid rgba(214, 148, 0, .22);
}

.submit-success-emoji {
  font-size: 44px;
  line-height: 1;
  margin-bottom: 12px;
}

.submit-success-title {
  margin: 0 0 8px;
  font-weight: 800;
  font-size: 19px;
  color: var(--teal-dark);
}

.submit-success-body {
  max-width: 460px;
  margin: 0 auto 18px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.submit-section-label {
  margin: 8px 0 18px;
  text-align: center;
  color: var(--teal-dark);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.submit-benefits {
  margin-bottom: 8px;
}

/* Soumission podcast : étapes email / code */
.submit-code-input {
  letter-spacing: .5em;
  font-weight: 800;
  font-size: 20px;
  text-indent: .5em;
}

.submit-note {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  color: var(--teal-dark);
  background: rgba(7, 152, 173, .09);
  border: 1px solid rgba(7, 152, 173, .2);
}

.submit-resend {
  margin-top: 14px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--teal-dark);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.submit-resend:hover {
  color: var(--ink);
}

/* v676 : « Me renvoyer un code dans 30 s » — grisé pendant le décompte */
.submit-resend:disabled,
.submit-resend:disabled:hover {
  color: var(--muted);
  text-decoration: none;
  cursor: default;
  font-variant-numeric: tabular-nums;
}

/* Page Soumettre : en-tête centré */
.page-submit > h1 {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.page-submit > .lead {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ─── Mode embed (checkout épuré, servi en iframe dans une modale de landing) ─── */
.embed-shell { background: #f4fbfc; }
.embed-header {
  display: flex;
  justify-content: center;
  padding: 16px;
  border-bottom: 1px solid rgba(16, 32, 39, .08);
  background: #fff;
}
.embed-header .logo img { height: 30px; width: auto; }
.embed-shell main { padding: 22px 16px 40px; }
.embed-shell .section { padding-top: 24px; padding-bottom: 24px; }
.embed-shell .checkout-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 620px; margin: 0 auto; padding: 8px 4px 24px; }
@media (min-width: 780px) {
  .embed-shell .checkout-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 34px; max-width: 960px; padding: 12px 18px 32px; align-items: start; }
}

/* Modale checkout sur la landing */
.lp-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.lp-modal[hidden] { display: none !important; }
.lp-modal-backdrop { position: absolute; inset: 0; background: rgba(16, 32, 39, .55); backdrop-filter: blur(2px); }
.lp-modal-card {
  position: relative;
  width: min(760px, 96vw);
  height: min(88vh, 900px);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(16, 32, 39, .35);
  overflow: hidden;
}
.lp-modal-close {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  width: 34px; height: 34px; border: none; border-radius: 50%;
  background: rgba(16, 32, 39, .08); color: #102027;
  font-size: 22px; line-height: 1; cursor: pointer;
}
.lp-modal-close:hover { background: rgba(16, 32, 39, .16); }
.lp-modal-loading {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  color: #5b6b73; font-weight: 700; font-size: 15px; text-align: center; padding: 24px;
}
.lp-spinner {
  width: 26px; height: 26px; border: 3px solid rgba(7, 152, 173, .25);
  border-top-color: #0798ad; border-radius: 50%; animation: submit-spin .7s linear infinite;
}
#lp-checkout-frame { width: 100%; height: 100%; border: 0; display: block; background: #f4fbfc; }
@media (max-width: 620px) {
  .lp-modal { padding: 0; }
  .lp-modal-card { width: 100vw; height: 100vh; border-radius: 0; }
}

/* ==========================================================================
   Header mobile — rangée compacte + menu burger (≤920px)
   ========================================================================== */

.header-right {
  display: flex;
  align-items: center;
  gap: 44px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Ordinateur : le même écart visible entre les trois liens, le bonhomme et le panier (44 px,
   resserré sous ~1050 px pour laisser sa place au logo, qui garde toujours 24 px d'air). Les
   pictos sont dessinés dans des boîtes de 34 px, avec du blanc autour du dessin (8,4 px de
   chaque côté du bonhomme, 6,3 px à gauche du panier) : on le retire des écarts. */
@media (min-width: 921px) {
  .header-right {
    --nav-gap: clamp(20px, 25vw - 218.8px, 44px);
    gap: calc(var(--nav-gap) - 8.44px);
    margin-left: 24px;
  }

  .main-nav {
    gap: var(--nav-gap);
  }

  .header-actions {
    gap: calc(var(--nav-gap) - 14.71px);
  }
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 0;
  background: none;
  padding: 0;
  border-radius: 10px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--teal);
  transition: transform .22s var(--ease-out), opacity .18s ease;
}

.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

@media (max-width: 920px) {
  .site-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 0;
    padding: 10px 16px;
  }

  .logo img,
  body.is-scrolled .logo img {
    width: 150px;
  }

  .header-right {
    position: static;
    gap: 0;
  }

  .nav-toggle {
    display: flex;
  }

  /* Le menu devient un panneau déroulant sous le header */
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: auto;
    overflow: visible;
    gap: 0;
    padding: 6px 22px 14px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 24px 36px rgba(16, 32, 39, .16);
    border-radius: 0 0 18px 18px;
    font-size: 16.5px;
  }

  .main-nav.is-open {
    display: flex;
  }

  .main-nav a {
    padding: 15px 2px;
    border-bottom: 1px solid rgba(16, 32, 39, .08);
    white-space: normal;
  }

  .main-nav a:last-child {
    border-bottom: 0;
  }

  .main-nav a:first-child {
    flex-basis: auto;
    text-align: left;
  }

  .main-nav a:after {
    display: none;
  }
}
/* ==========================================================================
   Mobile : visuel produit placé juste au-dessus du bouton « Choisir un modèle »
   (déplacé par shop.js). Ombre allégée : le 34px du bureau paraît détaché sous
   le petit visuel mobile.
   ========================================================================== */

@media (max-width: 900px) {
  .home-hero-copy .home-hero-media {
    min-height: 0;
    padding: 26px 0 6px;
    margin: 0 auto;
  }

  .home-hero-copy .home-device {
    width: min(58%, 250px);
    filter: drop-shadow(0 14px 18px rgba(16, 32, 39, .16));
  }
}

/* Mobile : resserrer l’espace entre la dernière carte et le footer */
@media (max-width: 900px) {
  body.home .home-proof {
    padding-bottom: 24px;
  }
}

/* ==========================================================================
   Fiche produit mobile — harmonisation espacements & typographie
   ========================================================================== */

@media (max-width: 640px) {
  .product-page {
    padding: 16px 20px 40px;
    gap: 24px;
  }

  .product-gallery {
    min-height: 0;
    padding: 2px 0 0;
  }

  .product-summary h1 {
    font-size: 29px;
    line-height: 1.16;
    margin: 6px 0 10px;
  }

  .product-page .price {
    font-size: 22px;
    margin-bottom: 12px;
  }

  .product-detail-block {
    padding: 40px 20px 44px;
    gap: 22px;
  }

  .product-detail-block h2 {
    font-size: 26px;
    line-height: 1.2;
    margin: 0 0 12px;
  }

  .product-detail-block .eyebrow {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .product-detail-block > div > p:not(.eyebrow) {
    font-size: 16px;
    line-height: 1.55;
  }

  .included-list span {
    padding: 13px 16px;
    font-size: 15.5px;
  }
}

/* Image dans l'infobulle « Personnalisation arrière » */
.info-card .info-card-img {
  display: block;
  width: 100%;
  max-width: 210px;
  margin: 10px auto;
  border-radius: 12px;
}

/* Menus d'options additionnels sur la fiche produit */
.buy-options-extra{display:flex;flex-direction:column;gap:14px;margin-top:14px;}

/* ─── Case « Découvrir le podcast ! » — player flat ─── */
.podcast-discover {
	display: flex;
	flex-direction: column;
	gap: 13px;
	max-width: 300px;
	margin-left: auto;
	background: #fff;
	border: 1px solid rgba(7, 152, 173, .16);
	border-radius: 22px;
	padding: 15px;
	box-shadow: 0 20px 48px rgba(16, 35, 45, .10);
}
.podcast-discover-cover {
	display: block;
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: linear-gradient(135deg, #eaf6f8, #f6fbfc);
}
.podcast-discover-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.podcast-discover-eyebrow {
	display: block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--teal);
	margin: 4px 2px -8px;
}
.podcast-discover-title {
	display: block;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--ink);
	margin: 0 2px;
	text-align: center;
}
.podcast-player {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 2px;
}
.podcast-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 60px;
	height: 60px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 12px 30px rgba(16, 35, 45, .30);
	transition: transform .12s ease, background .12s ease;
}
.podcast-play:hover { background: #fff; transform: translate(-50%, -50%) scale(1.07); }
.podcast-play:active { transform: translate(-50%, -50%) scale(.97); }
.podcast-ico { width: 26px; height: 26px; fill: var(--teal); }
.podcast-ico-play { margin-left: 3px; }
.podcast-ico-pause { display: none; }
.podcast-discover.is-playing .podcast-ico-play { display: none; }
.podcast-discover.is-playing .podcast-ico-pause { display: block; }
.podcast-track {
	flex: 1 1 auto;
	position: relative;
	height: 7px;
	border-radius: 99px;
	background: rgba(7, 152, 173, .15);
	cursor: pointer;
}
.podcast-track-fill {
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 0;
	border-radius: 99px;
	background: var(--teal);
}
.podcast-time {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 800;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
	min-width: 38px;
	text-align: right;
}

/* ==========================================================================
   Page « La Podcastor Pocket » — présentation interactive (pivot + repères)
   ========================================================================== */
.pocket-page { overflow: hidden; }
.pocket-hero { text-align: center; max-width: 840px; margin: 0 auto; padding-top: 24px; padding-bottom: 0; }
.pocket-hero .eyebrow {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: 13px;
	font-weight: 800;
	color: var(--teal);
	background: rgba(7, 152, 173, .10);
	padding: 6px 14px;
	border-radius: 999px;
	margin: 0 0 14px;
}
.pocket-hero h1 { font-size: clamp(28px, 4vw, 44px); line-height: 1.1; margin: 0 0 14px; }
.pocket-hero h1 span { color: var(--teal); }
.pocket-hero p { color: var(--muted); font-size: 18px; max-width: 640px; margin: 0 auto; }

.pocket-stage { position: relative; max-width: 1560px; margin: 0 auto; padding-top: 24px; padding-bottom: 24px; }
.pocket-connectors { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; overflow: visible; }
.pocket-conn { fill: none; stroke: var(--teal); stroke-width: 2.4; stroke-linecap: round; opacity: .95; }

/* Appareil agrandi avec l'écran (300 → 370 px de large). Chaque case est CENTRÉE dans la zone qui va
   du bord de la scène jusqu'à l'appareil : case centrée dans sa colonne + petit écart de 16 px
   (≈ marge latérale de la scène 44 px − vide transparent autour de l'appareil ~30-36 px)
   → même marge à gauche et à droite de la case. */
.pocket-grid { display: grid; grid-template-columns: 1fr clamp(300px, 24vw, 370px) 1fr; column-gap: 16px; row-gap: 70px; align-items: center; }
.pocket-col { display: flex; flex-direction: column; gap: 20px; z-index: 3; }
.pocket-col-left { align-items: center; text-align: right; }
.pocket-col-right { align-items: center; text-align: left; }

.pocket-device-holder { position: relative; display: flex; flex-direction: column; align-items: center; }
/* Modèle 3D (<model-viewer>) de la Podcastor Pocket, orientable au doigt / à la souris */
.pocket-model {
	display: block;
	width: 100%;
	height: auto;
	/* Format le plus « serré » qui garde l'appareil à sa taille (en dessous, il rapetisse) : moins de
	   vide au-dessus et au-dessous. Mêmes proportions que l'affiche de chargement (620 × 872). */
	aspect-ratio: 370 / 520;
	background: transparent;
	outline: none;
	--poster-color: transparent;
	--progress-bar-color: var(--teal);
	--progress-bar-height: 3px;
}
.pocket-drag-hint {
	margin-top: 16px;
	font-size: 13px;
	font-weight: 700;
	color: var(--muted);
	background: rgba(16, 32, 39, .05);
	padding: 6px 14px;
	border-radius: 999px;
}

/* Repères = ANCRES INVISIBLES des hotspots 3D : elles ne servent qu'à accrocher le trait fléché à la
   pièce (position projetée par model-viewer) et à le masquer quand la pièce passe de l'autre côté
   (attribut data-visible). Plus aucun point affiché : seul le trait, terminé par une flèche. */
.pocket-dot {
	position: relative;
	display: block;
	width: 2px;
	height: 2px;
	padding: 0;
	border: 0;
	background: transparent;
	opacity: 0;
	pointer-events: none;
}
@keyframes pkpulse { 0% { transform: scale(.7); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }

.pocket-callout {
	position: relative;
	width: 100%;
	max-width: 410px;
	background: #fff;
	border: 1px solid rgba(16, 32, 39, .10);
	border-radius: 16px;
	padding: 15px 17px;
	box-shadow: 0 16px 36px rgba(16, 32, 39, .08);
	cursor: pointer;
	transition: opacity .4s, transform .4s, border-color .3s, box-shadow .3s;
}
.pocket-callout.is-dim { opacity: .5; }
.pocket-callout.is-active {
	opacity: 1;
	border-color: var(--teal);
	box-shadow: 0 20px 46px rgba(7, 152, 173, .22);
	transform: translateY(-2px);
}
.pocket-callout h3 { margin: 0 0 6px; font-size: 16.5px; display: flex; align-items: center; gap: 9px; }
.pocket-col-left .pocket-callout h3 { flex-direction: row-reverse; }
.pocket-callout .pk-num {
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: var(--teal);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pocket-callout p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }



@media (max-width: 900px) {
	.pocket-grid { grid-template-columns: 1fr; }
	.pocket-device-holder { order: -1; margin-bottom: 10px; }
	.pocket-col,
	.pocket-col-left,
	.pocket-col-right { align-items: stretch; text-align: left; }
	.pocket-col-left .pocket-callout h3 { flex-direction: row; }
	.pocket-callout { max-width: none; }
	.pocket-callout.is-dim { opacity: 1; }
	.pocket-connectors { display: none; }
	.pocket-model { height: 420px; max-width: 380px; }
}

/* Téléphone / tablette (v598) : les six cases dans l’ordre de leurs numéros (1 → 6) et avec le même
   écart entre chacune — les deux colonnes de l’ordinateur (1, 3, 4 | 2, 5, 6) s’effacent (display:
   contents) et chaque case prend son rang (--pk-n, posé au rendu). Moins d’espace autour de
   l’appareil : 16 px au-dessus du cadre 3D (avant : 24 + 24 sur la sous-page d’une landing, 24 sur
   la page du site), la consigne collée au cadre, 36 px entre la consigne et la 1re case (avant : 80).
   Le cadre ne recouvre jamais le texte : aucune marge négative. Ordinateur : inchangé. */
@media (max-width: 900px) {
	.embed-shell .pocket-hero { padding-bottom: 0; }
	.pocket-page .pocket-stage { padding-top: 16px; }
	.pocket-grid { row-gap: 20px; }
	.pocket-col { display: contents; }
	.pocket-callout { order: var(--pk-n, 0); }
	.pocket-device-holder { margin-bottom: 16px; }
	.pocket-drag-hint { margin-top: 0; }
}

/* ==========================================================================
   Page Nos applications : les 4 cases au style des 3 garanties de l’accueil
   (v513 ; cf. v496 : carte blanche arrondie 18 px, même bordure, même ombre,
   icône en haut, titre en couleur, contenu centré). Le bouton « Télécharger »
   reprend celui de l’accueil (.button.home-cta, contour teal).
   ========================================================================== */
.podcastor-app-grid {
	gap: 20px;
}
.podcastor-app-card {
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	padding: 24px 22px 26px;
	background: #fff;
	border: 1px solid rgba(16, 32, 39, .08);
	border-radius: 18px;
	box-shadow: 0 18px 40px rgba(16, 32, 39, .07);
	text-align: center;
}
.podcastor-app-card-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 64px;
}
.podcastor-app-card-ico svg {
	display: block;
	width: 50px;
	height: 50px;
	fill: currentColor;
}
.podcastor-app-card-ico--android {
	color: #3ddc84;
}
.podcastor-app-card-ico--apple,
.podcastor-app-card-ico--macos {
	color: #111820;
}
.podcastor-app-card-ico--windows {
	color: #0078d4;
}
.podcastor-app-card h3 {
	margin: 0;
	color: var(--teal);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.35;
}
.podcastor-app-card .button.home-cta {
	margin-top: 8px;
	padding: 11px 28px;
	font-size: 16px;
}
.podcastor-app-card .button.home-cta[aria-disabled="true"] {
	opacity: .45;
	pointer-events: none;
}
@media only screen and (max-width: 48em) {
	/* le gabarit d’origine rognait la grille (overflow hidden) : les ombres des cartes étaient coupées */
	.podcastor-app-grid {
		width: 100% !important;
		max-width: 340px !important;
		overflow: visible;
	}
	.podcastor-app-card {
		padding: 22px 20px 24px;
	}
}

/* v515 (Gabriel : « diminue l’espace au-dessus de Nos applications, et réduis un peu la taille du titre,
   uniformisée sur celle de “La première boîte à histoire” de l’accueil ») */
.podcastor-app-shell {
	padding-top: 6px; /* en-tête → titre : 104 → 36 px (6 + la marge de 30 px du bloc titre) */
}
.podcastor-app-section-head h1 {
	/* = titre de l’accueil (taille calculée par shop.js) : 48 px sur grand écran, ~47 à 1280, 36 à 1000, 24 sur mobile */
	font-size: clamp(24px, 3.6vw, 48px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: 0;
}
@media only screen and (max-width: 48em) {
	.podcastor-app-shell {
		padding-top: 14px;
	}
}
/* ==========================================================================
   Accueil : bande horizontale des 6 points forts, sous le hero (v491).
   Contenu : bloc « home_highlights » (Pages → Accueil), un point par ligne,
   **texte** = en couleur.
   ========================================================================== */
.home-highlights {
	padding: 6px 20px 30px;
}
.home-highlights-row {
	list-style: none;
	max-width: 1260px;
	margin: 0 auto;
	padding: 20px 8px;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	background: #fff;
	border: 1px solid rgba(16, 32, 39, .08);
	border-radius: 18px;
	box-shadow: 0 18px 40px rgba(16, 32, 39, .07);
}
.home-highlights-row li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 2px 16px;
	text-align: center;
	color: var(--ink);
	font-size: 15px;
	line-height: 1.35;
	font-weight: 600;
}
.home-highlights-row li + li {
	border-left: 1px solid rgba(16, 32, 39, .09);
}
.home-highlights-row li::before {
	content: "✓";
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background: var(--teal);
	color: #fff;
	font-size: 15px;
	font-weight: 900;
	line-height: 30px;
	text-align: center;
}
.home-highlights-row strong {
	color: var(--teal);
	font-weight: 800;
}
@media (max-width: 1100px) {
	.home-highlights-row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: 18px;
	}
	.home-highlights-row li:nth-child(3n + 1) {
		border-left: 0;
	}
}
@media (max-width: 640px) {
	.home-highlights {
		padding: 10px 16px 24px;
	}
	.home-highlights-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 16px 4px;
		row-gap: 16px;
	}
	.home-highlights-row li {
		padding: 2px 10px;
		font-size: 14px;
	}
	.home-highlights-row li + li {
		border-left: 0;
	}
}

/* Accueil (ordinateur) : l'appareil n'est plus centré sur toute la colonne de texte, son haut
   s'aligne sur le haut du titre (v491, « remonte la Podcastor un peu plus haut »). */
@media (min-width: 901px) {
	.home-hero-inner > .home-hero-media {
		align-self: start;
	}
}

/* Bande des points forts : une icône (style emoji, comme celles du titre) au lieu de la coche,
   et le contenu de chaque point CENTRÉ verticalement (v494). */
.home-highlights-row li {
	justify-content: center;
}
.home-highlights-row li.has-ico::before {
	content: none;
	display: none;
}
.home-highlight-ico {
	flex: none;
	display: block;
	width: 48px;
	height: 48px;
	object-fit: contain;
}
@media (max-width: 640px) {
	.home-highlight-ico {
		width: 42px;
		height: 42px;
	}
}

/* ==========================================================================
   Accueil : les 3 garanties (Fabriqué en France / SAV / Livraison) prennent le
   style de la bande des points forts (v496) : carte blanche arrondie 18 px,
   même bordure, même ombre, icône 48 px, titre en couleur sans capitales,
   texte foncé, contenu centré ; même écart (20 px) sous la bande qu'entre les cartes.
   ========================================================================== */
body.home .home-proof-row {
	/* v510 (Gabriel : « descends les 3 cases pour qu’elles soient mieux centrées verticalement ») :
	   −32 → −10 px, et 22 px de moins sous les cartes → même espace au-dessus (depuis la photo)
	   et en dessous (jusqu’au pied de page), sans déplacer le pied de page */
	margin-top: -10px;
}
@media (min-width: 901px) {
	body.home .home-proof {
		padding-bottom: 34px;
	}
}
.home-proof-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 22px 24px;
	background: #fff;
	border: 1px solid rgba(16, 32, 39, .08);
	border-radius: 18px;
	box-shadow: 0 18px 40px rgba(16, 32, 39, .07);
}
.home-proof-item:hover {
	transform: none;
	box-shadow: 0 18px 40px rgba(16, 32, 39, .07);
}
.home-proof-item img {
	/* 64 px (v497) : ces visuels n'occupent que ~70-75 % de leur image, contre ~80-90 % pour les
	   icônes de la bande → à 48 px ils paraissaient plus petits. */
	width: 64px;
	height: 64px;
	margin: 0;
}
.home-proof-item h3 {
	margin: 0;
	color: var(--teal);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
}
.home-proof-item p {
	max-width: 340px;
	margin: 0;
	color: var(--ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}
@media (max-width: 900px) {
	/* v510 : même équilibre sur mobile (texte au-dessus → cartes → pied de page : 48 / 48 px) */
	body.home .home-proof-row {
		margin-top: -18px;
	}
	body.home .home-proof {
		padding-bottom: 16px;
	}
}

/* ==========================================================================
   Accueil : 2 sections image + texte entre la bande des points forts et les
   garanties (v498 ; sans cadre v499 ; image carrée inclinée v506 ;
   v508 : section RESSERRÉE sur les marges du haut de page).
   Chaque section tient entre les deux bords du hero : à GAUCHE le début du
   texte d’introduction, à DROITE le bord droit de l’appareil.
   Section 1 = texte calé à gauche, photo calée à droite ; section 2 = l’inverse.
   Les deux bords sont recalculés avec les valeurs du hero (.home-hero-inner
   1320 px en 1.08fr/.92fr, .home-hero-copy, .home-hero-media, .home-device à
   50 % de la place) : si le hero bouge, ajuster ici aussi.
   ========================================================================== */
.home-stories {
	padding: 20px 0 60px;
}
.home-story {
	--story-img: clamp(200px, 17vw, 280px);
	max-width: 1320px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	/* 901–980 px : à gauche le padding du texte du hero ; à droite le bord de l’appareil
	   (colonne .92fr, marges clamp(72px, 7vw, 118px) / 24 px, appareil = moitié de la place) */
	padding: 0 calc(.115 * min(100%, 1320px) - clamp(72px, 7vw, 118px) / 4 + 18px) 0 clamp(40px, 4vw, 80px);
}
.home-story + .home-story {
	margin-top: clamp(36px, 4vw, 56px);
}
@media (min-width: 901px) {
	/* v509 (Gabriel : « réduis l’écart ») : sur ordinateur les 2 photos sont de part et d’autre,
	   on rapproche les 2 sections (le mobile garde son espace : texte 1 puis photo 2 dessous) */
	.home-story + .home-story {
		margin-top: 16px;
	}
	/* v511-v512 (Gabriel : « descends un peu cette zone », puis « encore de quelques px ») :
	   20 → 42 → 52 px au-dessus de la section 1 */
	.home-stories {
		padding-top: 52px;
	}
}
.home-story-text {
	flex: 0 1 560px;
	min-width: 0;
}
.home-story-text p {
	margin: 0 0 16px;
	color: var(--muted);
	font-size: 18px;
	line-height: 1.6;
}
.home-story-text > :last-child {
	margin-bottom: 0;
}
.home-story-text strong {
	color: var(--teal);
	font-weight: 800;
}
.home-story-media {
	position: relative;
	flex: none;
	width: var(--story-img);
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 18px;
	background: #eef7f8;
	box-shadow: 0 18px 40px rgba(16, 32, 39, .14);
	/* inclinée de 3° : ses coins dépassent de 2,55 % de sa largeur → petite marge côté bord,
	   pour que la photo inclinée reste entièrement dans les marges */
	margin-right: calc(var(--story-img) * .0255);
	transform: rotate(3deg);
}
.home-story-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.home-story-img-left .home-story-media {
	order: -1;
	margin-right: 0;
	margin-left: calc(var(--story-img) * .0255);
	transform: rotate(-3deg);
}
@media (min-width: 981px) {
	/* à gauche : padding 36 px + décalage du texte du hero ; à droite : bord de l’appareil
	   (marges de .home-hero-media clamp(24px, 3vw, 60px) / 80 px) */
	.home-story {
		padding: 0 calc(.115 * min(100%, 1320px) - clamp(24px, 3vw, 60px) / 4 + 60px) 0 calc(36px + clamp(72px, 7vw, 132px) + 55px);
	}
}
/* Cadre « Image à ajouter » (dev et admin uniquement : le public ne voit jamais de cadre vide) */
.home-story-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--teal);
	font-weight: 800;
	font-size: 16px;
	background: repeating-linear-gradient(45deg, #f1f8fa 0 14px, #e7f3f6 14px 28px);
	outline: 2px dashed rgba(7, 152, 173, .35);
	outline-offset: -12px;
}
.home-story-placeholder small {
	display: block;
	margin-top: 6px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
}
/* Sans image (public, image pas encore fournie) : le texte seul, centré */
.home-story-text-only {
	justify-content: center;
	text-align: center;
}
.home-story-text-only .home-story-text {
	flex-basis: 640px;
}
@media (max-width: 900px) {
	.home-stories {
		padding: 10px 24px 44px;
	}
	.home-story {
		flex-direction: column;
		gap: 22px;
		padding: 0;
	}
	.home-story-media,
	.home-story-img-left .home-story-media {
		order: -1;
		margin: 0;
		width: min(64%, 260px);
	}
	.home-story-text {
		flex: none;
		width: 100%;
		text-align: center;
	}
}

/* Accueil (ordinateur) : boutons « Comment ça marche ? » / « Choisir un modèle » un peu plus bas
   sous le texte d'introduction (16 → 36 px, v500). Mobile inchangé (l'image s'intercale). */
@media (min-width: 901px) {
	.home-hero-actions {
		margin-top: 36px;
	}
}

/* v518 (Gabriel : « baisse ça de quelques pixels », capture du texte d’introduction + boutons) : tout le
   bloc sous la case teal du titre descend de 8 px sur ordinateur (case → texte : 26 → 34 px à 2200). */
@media (min-width: 901px) {
	.home-lead {
		margin-top: calc(clamp(20px, 2.4vw, 32px) + 8px);
	}
}

/* ==========================================================================
   Fiche produit — galerie (v524) : l'image principale en grand, les autres en
   petit dessous, deux par deux ; un clic en affiche une en grand (elle échange
   sa place avec la grande). Le bloc n'existe que si le produit a des images
   supplémentaires : sans elles, la fiche est strictement inchangée.
   ========================================================================== */

.product-gallery-wrap {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

/* Image principale, AVEC OU SANS images supplémentaires (v528, même rendu dans les deux cas) :
   cadre carré fixe (la page ne « saute » pas quand une photo non carrée passe en grand) et coins
   arrondis (invisibles sur un visuel détouré, arrondissent une photo ou un visuel sur fond). */
.product-page .product-gallery > img {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 18px;
  transition: transform .18s ease, filter .22s ease, opacity .18s ease;
}

.product-gallery-wrap .product-gallery img[data-gallery-main].is-swapping {
  opacity: 0;
}

/* Toutes les images, image principale comprise, sur UNE seule ligne : le nombre de colonnes
   suit le nombre de vignettes (--thumb-cols, posé par le rendu, plafonné à 4). L'ordre est
   figé — cliquer ne fait que choisir laquelle s'affiche en grand. */
.product-thumbs {
  display: grid;
  grid-template-columns: repeat(var(--thumb-cols, 3), minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.product-thumb {
  appearance: none;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(16, 32, 39, .08);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(16, 32, 39, .07);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Vignette choisie : anneau teal + image estompée — elle se lit comme « celle-ci est déjà
   affichée en grand », et elle ne réagit plus au survol ni au clic. */
.product-thumb.is-active {
  cursor: default;
  border-color: rgba(7, 152, 173, .85);
  box-shadow: 0 0 0 2px rgba(7, 152, 173, .22), 0 12px 28px rgba(16, 32, 39, .07);
}

.product-thumb.is-active img {
  opacity: .45;
}

.product-thumb.is-active:hover {
  transform: none;
  box-shadow: 0 0 0 2px rgba(7, 152, 173, .22), 0 12px 28px rgba(16, 32, 39, .07);
}

/* Image entière (jamais rognée) : un rendu en portrait garde l’appareil complet */
.product-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-thumb:hover {
  transform: translateY(-2px);
  border-color: rgba(7, 152, 173, .45);
  box-shadow: 0 16px 32px rgba(16, 32, 39, .1);
}

.product-thumb:focus-visible {
  outline: 3px solid rgba(7, 152, 173, .55);
  outline-offset: 3px;
}

/* Une seule colonne (tablette, téléphone) : même rangée unique, simplement plus resserrée.
   Le nombre de colonnes reste celui du nombre de vignettes, pour ne pas repousser le prix
   et le bouton d'achat sous plusieurs rangées d'images. */
@media (max-width: 920px) {
  .product-thumbs {
    gap: 12px;
  }
}

@media (max-width: 640px) {
  .product-gallery-wrap {
    gap: 12px;
  }

  .product-thumbs {
    gap: 10px;
    max-width: none;
  }

  .product-thumb {
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(16, 32, 39, .07);
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-thumb,
  .product-page .product-gallery > img {
    transition: none;
  }
}

/* ==========================================================================
   Fiche produit — pastille « En précommande… » centrée sur le bord haut de
   l'image (v526) : l'image commence au padding-top de .product-gallery
   (10 px ; 2 px sur téléphone), la pastille est centrée sur cette ligne.
   Horizontalement, elle part du bord gauche de l’image : l’image (carrée,
   560 px au plus) est centrée dans sa colonne, d’où le décalage quand la
   colonne est plus large (tablette, une seule colonne).
   ========================================================================== */
.product-gallery .badge.large {
  top: 10px;
  left: max(0px, calc((100% - 560px) / 2));
  transform: translateY(-50%);
}

@media (max-width: 640px) {
  .product-gallery .badge.large {
    top: 2px;
  }

  /* La moitié haute de la pastille dépasse au-dessus de l’image : on lui garde
     de l’air sous l’en-tête (même écart qu’avant, ~16 px) */
  .product-gallery:has(.badge.large) {
    margin-top: 18px;
  }
}

/* ==========================================================================
   Page « La Podcastor Pocket » (v527) : « faites-la pivoter » et le bouton
   « Choisir un modèle ! » remontent. Le cadre 3D laisse ~60 px vides sous
   l'appareil (cadrage fixe de model-viewer, mesuré : appareil de 55 à 460 px
   dans un cadre de 520) : la consigne est posée DANS cette bande, hors du flux,
   donc elle ne repousse plus le bouton, qui remonte d'autant. Elle laisse
   passer le glisser (pointer-events: none). Téléphone / tablette (≤ 900 px) :
   inchangé.
   ========================================================================== */
@media (min-width: 901px) {
  .pocket-drag-hint {
    position: absolute;
    left: 50%;
    bottom: 2px;
    margin: 0;
    transform: translateX(-50%);
    white-space: nowrap;
    pointer-events: none;
  }
}

/* ==========================================================================
   Boutique — cartes produits (v529) : même style que les autres cartes du
   site (blanc, arrondi 18 px, bordure et ombre douces), image BORD À BORD
   (plus de marge autour), arrondie en haut par la carte ; pastille sur une
   seule ligne quand elle tient.
   ========================================================================== */
.wc-grid {
  gap: 24px;
}

.wc-card {
  border-radius: 18px;
  border: 1px solid rgba(16, 32, 39, .08);
  box-shadow: 0 18px 40px rgba(16, 32, 39, .07);
  isolation: isolate;
}

.wc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(16, 32, 39, .12);
}

.wc-card-image {
  overflow: hidden;
}

.wc-card-image img {
  padding: 0;
  object-fit: cover;
}

.wc-card-badge {
  top: 14px;
  left: 14px;
  max-width: calc(100% - 28px);
  padding: 9px 14px;
}

.wc-card-text {
  padding: 18px 18px 22px;
}

/* Boutique (v530, centrée en v531) : pastille « En précommande… » CENTRÉE en
   haut de la carte, à cheval sur son bord haut (centre de la pastille = bord
   de la carte, comme sur la fiche produit). La carte ne rogne plus
   son contenu (sinon la moitié haute de la pastille disparaîtrait) : c’est
   l’image qui se rogne elle-même (zoom au survol) et arrondit ses coins du
   haut (18 px de la carte − 1 px de bordure ; isolation = rognage fiable sous
   Safari pendant le zoom). Quand une pastille est affichée, la grille garde
   la place de sa moitié haute au-dessus de chaque rangée. */
.wc-card {
  overflow: visible;
}

.wc-card-image {
  overflow: hidden;
  border-radius: 17px 17px 0 0;
  isolation: isolate;
}

/* width: max-content : posée à 50 %, la pastille n’aurait que la moitié de la
   carte pour s’étaler et passerait sur 2 lignes ; le max-width de la v529
   (100 % − 28 px) la fait encore passer à la ligne sur une carte étroite. */
.wc-card-badge {
  top: -1px;
  left: 50%;
  right: auto;
  width: max-content;
  transform: translate(-50%, -50%);
}

.wc-grid:has(.wc-card-badge) {
  row-gap: 42px;
  padding-top: 17px;
}

/* ==========================================================================
   Fiche produit (v532) : jauge d’avancement des ventes, sous le titre
   « Ce que vous recevez » (réglée dans « Modifier le produit »). Même dessin
   que la jauge des landings (.preorder-meter du modèle carabosse) : titre à
   gauche, « vendus / objectif » à droite, barre dessous avec repère à 50 %.
   ========================================================================== */
.product-gauge {
  width: min(100%, 420px);
  margin: 4px 0 24px;
  padding: 16px;
  border: 1px solid rgba(7, 152, 173, .18);
  border-radius: 16px;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 16px 42px rgba(16, 32, 39, .07);
}

.product-gauge-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--teal-dark);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.3;
}

.product-gauge-count {
  color: var(--ink);
  white-space: nowrap;
}

.product-gauge-track {
  display: block;
  height: 14px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(7, 152, 173, .22) calc(50% - 1px), rgba(7, 152, 173, .22) calc(50% + 1px), transparent calc(50% + 1px)),
    rgba(7, 152, 173, .12);
}

.product-gauge-track > span {
  display: block;
  height: 100%;
  min-width: 12px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--violet));
  box-shadow: 0 0 18px rgba(7, 152, 173, .32);
}

/* ==========================================================================
   Fiche produit (v534) : bloc « Ce que vous recevez » — titre plus petit
   (42 → 32 px ; téléphone 26 → 22 px), jauge agrandie (640 px au plus,
   texte 19 px, barre 20 px) et, sans extrait de podcast (plus rien à droite),
   section en UNE colonne centrée, texte centré. Avec podcast : 2 colonnes
   (texte + lecteur) inchangées.
   ========================================================================== */
.product-detail-block h2 {
  font-size: 32px;
  line-height: 1.15;
}

.product-gauge {
  width: min(100%, 640px);
  margin: 8px 0 28px;
  padding: 22px 24px;
  border-radius: 20px;
}

.product-gauge-head {
  font-size: 19px;
}

.product-gauge-track {
  height: 20px;
  margin-top: 16px;
}

.product-gauge-track > span {
  min-width: 20px;
}

.product-detail-block--solo {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

.product-detail-block--solo > div {
  width: 100%;
  max-width: 820px;
}

.product-detail-block--solo .product-gauge {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 640px) {
  .product-detail-block h2 {
    font-size: 22px;
    line-height: 1.2;
  }

  .product-gauge {
    padding: 18px;
    border-radius: 18px;
  }

  .product-gauge-head {
    font-size: 16px;
  }

  .product-gauge-track {
    height: 16px;
    margin-top: 14px;
  }
}

/* Fiche produit (v534) : le prix n’est en rouge qu’en promotion (prix barré) ;
   sinon il reprend la couleur du texte. */
.product-summary-flat .product-price:not(.is-promo) strong {
  color: var(--ink);
  text-shadow: none;
}

/* ==========================================================================
   Page « La Podcastor Pocket » (v535) : la carte « Comment ajouter de nouvelles
   histoires ? » remplace le bouton « Choisir un modèle ! ». Carte au style des
   cartes du site ; 4 étapes numérotées (pastilles teal des cases de la page).
   ========================================================================== */
.pocket-howto {
  padding-top: 8px;
  padding-bottom: 64px;
}

.pocket-howto-card {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(26px, 4vw, 48px);
  background: #fff;
  border: 1px solid rgba(16, 32, 39, .08);
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(16, 32, 39, .07);
  text-align: center;
}

.pocket-howto-card .eyebrow {
  margin: 0 0 10px;
}

.pocket-howto-card h2 {
  margin: 0 0 14px;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15;
}

.pocket-howto-lead {
  max-width: 720px;
  margin: 0 auto 28px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}

.pocket-howto-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  text-align: left;
}

.pocket-howto-steps li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  border-radius: 18px;
  background: var(--soft);
}

.pocket-howto-steps .pk-num {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pocket-howto-steps h3 {
  margin: 3px 0 6px;
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink);
}

.pocket-howto-steps p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.pocket-howto-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  color: var(--teal);
  font-weight: 800;
}

.pocket-howto-link:hover {
  text-decoration: underline;
}

@media (max-width: 760px) {
  .pocket-howto {
    padding-bottom: 44px;
  }

  .pocket-howto-steps {
    grid-template-columns: 1fr;
  }

  .pocket-howto-steps li {
    padding: 16px;
  }
}

/* Fiche produit (v536) : plus d’air autour de la jauge (titre → jauge 16 → 32 px,
   jauge → texte 28 → 40 px ; téléphone 22 / 28 px). */
.product-gauge {
  margin-top: 32px;
  margin-bottom: 40px;
}

@media (max-width: 640px) {
  .product-gauge {
    margin-top: 22px;
    margin-bottom: 28px;
  }
}

/* Fiche produit (v538) : pastille « En précommande… » CENTRÉE au-dessus de
   l’image, toujours à cheval sur son bord haut (v526). L’image est centrée dans
   .product-gallery, donc centre du bloc = centre de l’image. width: max-content :
   posée à 50 %, elle n’aurait que la moitié de la largeur et passerait sur 2 lignes. */
.product-gallery .badge.large {
  left: 50%;
  right: auto;
  width: max-content;
  max-width: calc(100% - 28px);
  transform: translate(-50%, -50%);
}

/* Panier vide (v540) : la phrase sous le titre est retirée ; le bouton garde de
   l’air sous le titre (14 px d’écart de la grille + 8 px). */
.empty-cart .empty-state .button {
  margin-top: 8px;
}

/* Page « La Podcastor Pocket » (v541) : les 3 étapes de la carte — 1 et 2 côte à
   côte (texte depuis v544), 3 en pleine largeur avec ses deux voies (directement / via
   le store), puis une note sur les Podz. */
.pocket-howto-steps li.pocket-howto-step-wide {
  grid-column: 1 / -1;
}

.pocket-howto-ways {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.pocket-howto-steps .pocket-howto-ways li {
  display: block;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.pocket-howto-ways strong {
  color: var(--ink);
}


@media (max-width: 760px) {
  .pocket-howto-ways {
    grid-template-columns: 1fr;
  }
}

/* Page « La Podcastor Pocket » (v542) : visuel de l’application Podcastor (ordinateur
   + téléphone) entre l’introduction et les étapes de la carte « Comment ajouter de
   nouvelles histoires ? ». Image recadrée sur les appareils, fond transparent : ses
   marges sont les écarts visibles. Même largeur que l’introduction (720 px). */
.pocket-howto-visual {
  max-width: 720px;
  margin: 0 auto 28px;
}

.pocket-howto-visual img {
  display: block;
  width: 100%;
  height: auto;
}

/* Page « La Podcastor Pocket » (v543) : sur ordinateur, les 3 étapes à gauche et
   l’image de l’application à droite, calée en haut des étapes (v548 : ne bouge plus
   quand un volet s’ouvre). Les
   étapes s’empilent (une colonne), les deux voies de l’étape 3 aussi. Sous 901 px,
   rien ne change : image au-dessus des étapes (v542). */
@media (min-width: 901px) {
  .pocket-howto-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: 40px;
    align-items: start;
  }

  .pocket-howto-body .pocket-howto-steps {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr);
  }

  .pocket-howto-body .pocket-howto-visual {
    grid-column: 2;
    grid-row: 1;
    max-width: none;
    margin: 0;
  }

  .pocket-howto-body .pocket-howto-ways {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Page « La Podcastor Pocket » (v544) : chaque étape a son texte ; le lien
   « Télécharger l’application » est passé du bas de la carte à l’étape 1. */
.pocket-howto-steps .pocket-howto-link {
  margin-top: 10px;
}

.pocket-howto-steps .pocket-howto-after {
  margin-top: 12px;
}

/* Page « Nos engagements » (v545) : titre au style et à la place de celui de « Nos
   applications » (v515) — même taille (= titre de l’accueil), même graisse, même
   interligne, même couleur, même écart sous l’en-tête (36 px ; 24 px sur téléphone)
   et, comme lui, centré aussi sur téléphone (il était aligné à gauche). Titre plus
   long que « Nos applications » : lignes équilibrées (sinon « pour… » restait seul
   vers 1 000 px) et pas de largeur de 324 px sur téléphone (3 lignes à 768 px).
   L’écart titre → cartes est conservé. */
.page-nos-engagements {
  padding-top: 36px;
}

.page-nos-engagements > h1 {
  color: #101f27;
  font-size: clamp(24px, 3.6vw, 48px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0;
  text-wrap: balance;
}

@media only screen and (max-width: 48em) {
  .page-nos-engagements {
    padding-top: 24px;
  }

  .page-nos-engagements > h1 {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

/* Pied de page personnalisable (v546) : une colonne sans titre ni lien est masquée, la grille
   suit le nombre de colonnes affichées (--footer-cols, posé dans le HTML) ; un lien sans
   adresse s’affiche en simple texte, au format des liens. */
@media (min-width: 921px) {
  .footer-widgets {
    grid-template-columns: repeat(var(--footer-cols, 3), minmax(0, 1fr));
  }
}

.footer-menu li > span {
  display: block;
  padding: 10px 0;
  color: rgba(255, 255, 255, .92);
  font-weight: 600;
  font-size: 15.5px;
}

/* Page « La Podcastor Pocket » (v548) : les 3 étapes deviennent des volets (details /
   summary), FERMÉS au départ ; la flèche à droite du titre (et tout l’en-tête de la
   case) ouvre / ferme le contenu. Le contenu s’aligne sur le titre (pastille 30 px +
   14 px) ; sur téléphone, il passe sous la pastille, sur toute la largeur. */
.pocket-howto-steps {
  grid-template-columns: minmax(0, 1fr); /* une seule colonne à toutes les largeurs (tablette comprise) */
  align-items: start;
}

.pocket-howto-steps > li {
  display: block;
}

.pocket-howto-fold > summary {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  list-style: none;
}

.pocket-howto-fold > summary::-webkit-details-marker {
  display: none;
}

.pocket-howto-fold > summary h3 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.pocket-howto-chevron {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #fff;
  color: var(--teal);
  box-shadow: 0 2px 8px rgba(16, 32, 39, .08);
  transition: transform .22s ease, background .15s ease;
}

.pocket-howto-chevron::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.pocket-howto-fold[open] > summary .pocket-howto-chevron {
  transform: rotate(180deg);
}

.pocket-howto-fold > summary:hover .pocket-howto-chevron {
  background: #e9f7f9;
}

.pocket-howto-fold > summary:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
  border-radius: 12px;
}

.pocket-howto-fold-body {
  padding: 12px 0 0 44px;
}

.pocket-howto-fold-body > :first-child {
  margin-top: 0;
}

/* Lien « Télécharger l’application → » : plus en boîte flex (où le texte et la flèche
   étaient soulignés séparément) → un seul trait du texte à la flèche au survol. */
.pocket-howto-steps .pocket-howto-link {
  display: inline-block;
}

@media (max-width: 760px) {
  .pocket-howto-fold-body {
    padding-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pocket-howto-chevron {
    transition: none;
  }
}

/* Page « La Podcastor Pocket » (v549) : pendant le chargement du modèle 3D, un
   pourcentage centré remplace la fine barre de progression de model-viewer
   (emplacement « progress-bar », qui couvre tout le cadre 3D) ; il s’efface en
   fondu à 100 %. Pastille blanche : lisible sur l’image d’attente. */
.pocket-model-progress {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity .3s ease, visibility 0s linear 0s;
}

.pocket-model-progress span {
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 6px 18px rgba(16, 32, 39, .12);
  color: var(--teal);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.pocket-model-progress.is-done {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}

/* Composant 3D pas encore chargé (ou script indisponible) : pas de « 0 % » figé. */
model-viewer:not(:defined) .pocket-model-progress {
  display: none;
}

/* ==========================================================================
   Fiche produit (v552) : description longue en texte enrichi (paragraphes,
   gras, italique) et option « Justifier ». Sans mise en forme, rendu
   IDENTIQUE à l’ancien paragraphe unique : marges de 1em (19 px ; 16 px sur
   téléphone) et une ligne vide entre deux paragraphes.
   ========================================================================== */
.product-description {
  margin: 19px 0;
}

.product-description p {
  margin: 0;
}

.product-description p + p {
  margin-top: 1.65em;
}

.product-description.is-justified p {
  text-align: justify;
}

@media (max-width: 640px) {
  .product-description {
    margin: 16px 0;
  }

  .product-description p {
    font-size: 16px;
    line-height: 1.55;
  }

  .product-description p + p {
    margin-top: 1.55em;
  }
}

/* ==========================================================================
   Menus déroulants du site (v554) : flèche décalée vers la gauche — environ
   18 px du bord au lieu des ≈ 7 px de la flèche native du navigateur (qui ne
   se déplace pas). Même chevron gris que les menus des landings (réglés à la
   même distance). Site public seulement (body.shop-shell) : le back-office
   garde ses menus ; le texte ne passe jamais sous la flèche.
   ========================================================================== */
body.shop-shell select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2366727a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1.5 2.5 6 6.5 10.5 2.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
}

/* ==========================================================================
   Page « La Podcastor Pocket » (v556) : l’étape « Branchez votre cartouche » est
   coupée en deux paragraphes (« …ordinateur. » / « Synchronisez… ») — même écart
   entre eux que devant la phrase finale « Remettez ensuite la cartouche… ».
   ========================================================================== */
.pocket-howto-fold-body p + p {
  margin-top: 12px;
}

/* ==========================================================================
   Infobulle « Podz » (page La Podcastor Pocket, v557) : le mot Podz de
   l'étape « Choisissez vos contenus » ouvre une bulle avec l'icône du gland
   et l'explication (elle remplace la note qui était sous les étapes).
   La carte est déplacée dans <body> et positionnée par shop.js, comme les
   autres infobulles riches du site.
   ========================================================================== */
.pocket-podz {
  position: relative;
  color: var(--teal);
  font-weight: 800;
  cursor: help;
  border-bottom: 1px dotted rgba(7, 152, 173, 0.5);
  outline: none;
}

.pocket-podz:hover,
.pocket-podz:focus-visible {
  border-bottom-color: var(--teal);
}

.info-card.info-card-podz.is-visible {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
}

.info-card-podz > img {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
  display: block;
  width: 76px;
  height: auto;
}

.info-card-podz > p {
  grid-column: 2;
}

@media (max-width: 420px) {
  .info-card.info-card-podz.is-visible {
    grid-template-columns: 58px minmax(0, 1fr);
    column-gap: 12px;
  }

  .info-card-podz > img {
    width: 58px;
  }
}

/* v573 — Bloc « Complétez votre commande » du checkout des landings. Il précède
   « Détails de facturation », dont le h1 est en margin-top: 0 : sans cette marge
   basse, le titre vient coller au bloc (écart mesuré à 0 px). */
.checkout-addons {
	margin-top: 0;
	margin-bottom: 26px;
}

/* v574 — Sous-page « Comment ça marche » d'une landing (/comment-ca-marche sur son
   domaine). Elle rend le contenu de /la-podcastor-pocket en mode épuré, avec cet
   en-tête à la place de l'en-tête embed par défaut : flèche de retour à gauche,
   bandeau co-brandé de la landing à droite. */
.lp-subheader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px clamp(16px, 4vw, 40px);
	border-bottom: 1px solid rgba(16, 32, 39, 0.08);
	/* Transparent : l'en-tête se fond dans la teinte de la landing, comme le bandeau
	   co-brandé qui flotte sur le fond de sa page d'accueil. */
	background: transparent;
}

.lp-subback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: none;
	border-radius: 14px;
	border: 1px solid rgba(16, 32, 39, 0.12);
	color: var(--ink, #102027);
	background: #fff;
	transition: background 0.15s, border-color 0.15s;
}

.lp-subback:hover {
	background: #f2f8f9;
	border-color: rgba(7, 152, 173, 0.4);
}

.lp-subback svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.lp-sublockup {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.lp-sublockup img {
	display: block;
	height: 50px;
	width: auto;
}

.lp-sub-x {
	color: #9aa6ac;
	font-weight: 700;
}

@media (max-width: 640px) {
	/* Sur téléphone les deux logos doivent tenir à côté de la flèche de retour. Les largeurs
	   sont bornées (avec object-fit) car un logo d'éditeur peut être très allongé : le
	   logo Biblus fait 1400 x 668, soit 105 px de large à 50 px de haut. */
	.lp-sublockup img {
		height: 30px;
	}

	.lp-sub-editor {
		max-width: 96px;
		object-fit: contain;
	}

	.lp-sub-podcastor {
		max-width: 148px;
		object-fit: contain;
	}

	.lp-sublockup {
		gap: 8px;
	}

	.lp-sub-x {
		font-size: 0.9rem;
	}
}

/* ==========================================================================
   Page « Podcastor solidaire » (/hopitaux, v600) : page courte — la Podcastor
   fabriquée pour les enfants hospitalisés, le modèle 3D et les classes de la
   page Pocket (deux cases seulement, reliées par une flèche à leur pièce),
   puis la collecte HelloAsso dans une carte au style de celle de la page Pocket.
   ========================================================================== */
.solidaire-hero h1 {
  text-wrap: balance;
}

.solidaire-hero p strong {
  color: var(--teal);
  font-weight: 800;
}

/* Cases d’information, pas des boutons : toujours au style « case active » (liseré teal). */
.solidaire-callout {
  cursor: default;
  border-color: var(--teal);
  box-shadow: 0 20px 46px rgba(7, 152, 173, .16);
}

.solidaire-callout h3 {
  font-size: 17px;
}

.solidaire-don {
  padding-top: 8px;
  padding-bottom: 64px;
}

.solidaire-don-card {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(26px, 4vw, 48px);
  background: #fff;
  border: 1px solid rgba(16, 32, 39, .08);
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(16, 32, 39, .07);
  text-align: center;
}

.solidaire-don-card .eyebrow {
  margin: 0 0 10px;
}

.solidaire-don-card h2 {
  margin: 0 0 22px;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15;
  text-wrap: balance;
}

.solidaire-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 24px;
}

.solidaire-figure {
  display: grid;
  gap: 8px;
  align-content: start;
  margin: 0;
  padding: 22px 20px;
  border-radius: 18px;
  background: var(--soft);
}

.solidaire-figure strong {
  color: var(--teal);
  font-size: clamp(34px, 4.4vw, 46px);
  font-weight: 900;
  line-height: 1;
}

.solidaire-figure span {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.solidaire-don-lead {
  max-width: 640px;
  margin: 0 auto 26px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}

.solidaire-don-button {
  font-size: 17px;
}

/* Visible seulement sur le dev et pour un admin connecté, tant qu’aucun lien n’est renseigné. */
.solidaire-don-hint {
  display: inline-block;
  margin: 0;
  padding: 12px 18px;
  border: 2px dashed rgba(7, 152, 173, .45);
  border-radius: 14px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

@media (max-width: 640px) {
  .solidaire-figures {
    grid-template-columns: 1fr;
  }

  .solidaire-don {
    padding-bottom: 44px;
  }
}

/* ==========================================================================
   Comptes clients « Mon compte » (v610) — même compte que dans les applications
   ========================================================================== */
.nav-account.is-signed-in:before {
  content: "";
  position: absolute;
  top: 3px;
  right: 1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 2px #fff;
}

.client-page {
  padding-top: 40px;
}

.client-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.client-head h1 {
  margin: 0;
}

.client-head-email {
  margin: 6px 0 0;
  color: var(--muted);
  font-weight: 700;
}

.client-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

.client-card {
  display: grid;
  gap: 16px;
  margin: 0;
}

.client-card h2 {
  margin: 0;
  font-size: 22px;
}

.client-card label:not(.checkbox-row) {
  display: grid;
  gap: 7px;
  font-weight: 800;
}

.client-card .button {
  justify-self: start;
}

/* Pages à une seule case (mot de passe oublié) : la case et son titre
   forment une colonne de 520 px centrée sur la page. */
.client-card-narrow {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.section.narrow.client-page > .client-head {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.client-row-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.client-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.client-label-row a,
.client-field-note a,
.client-empty a,
.client-section-intro a {
  color: var(--teal);
  font-weight: 800;
}

.client-label-row a {
  font-size: 14px;
}

.client-optional {
  color: var(--muted);
  font-weight: 600;
}

.client-field-note {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.client-card input:disabled {
  background: var(--soft);
  color: var(--muted);
}

.client-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.client-tabs a {
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--teal-dark);
  font-weight: 800;
  font-size: 15px;
  transition: background .16s ease, color .16s ease;
}

.client-tabs a:hover {
  background: var(--teal);
  color: #fff;
}

.client-section {
  margin-bottom: 22px;
  scroll-margin-top: 24px;
}

.client-section h2 {
  margin: 0 0 16px;
  font-size: 22px;
}

.client-section h3 {
  margin: 24px 0 10px;
  font-size: 16px;
}

.client-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.client-section-head h2 {
  margin-bottom: 8px;
}

.client-section-intro {
  margin: 0 0 16px;
  color: var(--muted);
  font-weight: 600;
}

.client-balance {
  font-weight: 800;
  color: var(--teal-dark);
}

.client-balance strong {
  font-size: 26px;
  color: var(--teal);
}

.client-notice {
  margin: 0 0 18px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--soft);
  border-left: 4px solid var(--teal);
  font-weight: 600;
}

.client-notice p {
  margin: 0 0 12px;
}

.client-notice.is-warning {
  background: #fff8e6;
  border-left-color: #e0a100;
}

p.client-notice.is-warning {
  margin-bottom: 22px;
}

.client-empty {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}

.client-orders,
.client-history {
  list-style: none;
  margin: 0;
  padding: 0;
}

.client-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.client-order:first-child {
  border-top: 0;
  padding-top: 0;
}

.client-order-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.client-order-date,
.client-order-items {
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
}

.client-order-items {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-order-total {
  font-weight: 900;
  white-space: nowrap;
}

.client-status {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  background: #eef2f3;
  color: #52616a;
}

.client-status.is-success {
  background: var(--green-soft);
  color: var(--success);
}

.client-status.is-info {
  background: var(--soft);
  color: var(--teal-dark);
}

.client-status.is-warning {
  background: #fff4dc;
  color: #9a6700;
}

/* v620 : les packs sont centrés dans la case — chaque rangée, y compris une dernière rangée
   incomplète. Cartes de largeur fixe ; le bouton reste en bas de la carte si une voisine est plus haute. */
.client-packs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.client-pack {
  flex: 0 0 190px;
  max-width: 100%;
  display: grid;
  justify-items: center;
  align-content: space-between;
  gap: 6px;
  padding: 18px 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  text-align: center;
}

.client-pack-pods {
  font-size: 20px;
  font-weight: 900;
  color: var(--ink);
}

.client-pack-bonus {
  color: var(--teal-dark);
  font-size: 13px;
  font-weight: 800;
}

.client-pack .button {
  margin-top: 6px;
  min-width: 110px;
}

.client-pay-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.client-history li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-weight: 700;
}

.client-history-date {
  color: var(--muted);
  font-weight: 600;
}

.client-history strong {
  color: var(--teal);
}

.client-done {
  justify-items: center;
  text-align: center;
}

.client-done p {
  margin: 0;
}

.client-done .button {
  justify-self: center;
}

.client-done-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--soft);
  color: var(--teal);
  font-size: 26px;
  font-weight: 900;
}

/* Paiement Stancer dans une fenêtre du site (comme sur les landings) */
html.client-pay-open {
  overflow: hidden;
}

.client-pay-modal {
  position: fixed;
  inset: 0;
  z-index: 9000; /* au-dessus de l'entête collant et du bouton « remonter » */
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(16, 35, 45, .55);
}

.client-pay-modal[hidden] {
  display: none !important;
}

.client-pay-dialog {
  display: flex;
  flex-direction: column;
  width: min(520px, 100%);
  height: min(760px, calc(100vh - 36px));
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-strong);
}

.client-pay-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px 12px 20px;
  border-bottom: 1px solid var(--line);
}

.client-pay-close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--soft);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.client-pay-frame {
  flex: 1;
  width: 100%;
  border: 0;
}

.client-pay-banner {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 8999;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 13px 20px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  box-shadow: var(--shadow-strong);
}

.client-pay-banner.is-error {
  background: var(--danger);
}

.client-pay-banner[hidden] {
  display: none !important;
}

@media (max-width: 820px) {
  .client-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .client-page {
    padding-top: 24px;
  }

  .client-row-2 {
    grid-template-columns: 1fr;
  }

  .client-packs {
    gap: 10px;
  }

  .client-pack {
    flex-basis: calc((100% - 10px) / 2);
    padding: 14px 10px;
  }

  /* « +1 000 Podz offerts » sur une seule ligne dès 360 px de large : un peu plus petit, et il peut
     mordre de 6 px sur la marge intérieure de la carte. */
  .client-pack-bonus {
    margin: 0 -6px;
    font-size: 12px;
  }

  .client-pack-pods {
    font-size: 18px;
  }

  .client-pack .button {
    min-width: 0;
    width: 100%;
  }

  .client-order {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 14px;
  }

  .client-order .button {
    grid-column: 2;
  }

  .client-order-items {
    white-space: normal;
  }

  .client-history li {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .client-history-date {
    grid-column: 1;
    grid-row: 2;
    font-size: 13px;
  }
}

/* Connexion unique et création de compte (v615) : la case centrée des pages « Mon compte »,
   un bouton pour afficher le mot de passe, et le lien vers l'autre page sous le bouton. */
.client-card .auth-password {
  position: relative;
  display: block;
}

.client-card .auth-password input {
  padding-right: 54px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}

.password-toggle:hover {
  color: var(--teal);
  background: rgba(7, 152, 173, .08);
}

.password-toggle svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.password-toggle .password-eye-off,
.password-toggle.is-visible .password-eye {
  display: none;
}

.password-toggle.is-visible .password-eye-off {
  display: block;
}

.client-switch {
  margin: 4px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-weight: 700;
  text-align: center;
}

.client-switch a {
  color: var(--teal);
  font-weight: 900;
}

/* Connexion et création de compte (v617) : le titre seul, centré au-dessus de la case. */
.section.narrow.client-page.client-auth > .client-head {
  justify-content: center;
  text-align: center;
}

/* v618 : sur ces deux pages, le bouton (« Se connecter », « Créer mon compte ») est centré dans la case. */
.section.narrow.client-page.client-auth .client-card .button {
  justify-self: center;
}

/* v619 : « Mot de passe oublié » suit ces deux pages (titre et bouton centrés) ; le lien « ← Retour à la
   connexion » est centré sous le bouton. */
.client-card .client-back {
  margin-top: 0;
  text-align: center;
}

/* v624 (audit SEO, point 07) : le duplicata du 1er mot (boucle de l'animation du titre) affiche son texte
   en CSS — même rendu à l'écran, mais le mot n'est plus lu deux fois par les robots. */
.home-hero-word-dup::before {
  content: attr(data-word);
}

/* v626 : liens écrits dans le texte des pages (CGV, CGU, pages de Pages) — visibles. Les boutons et les cartes,
   qui ont toujours une classe, ne changent pas. Une longue adresse passe à la ligne sur téléphone. */
.cms-body a:not([class]) {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

/* v626 : sur téléphone, une adresse e-mail dans un tableau peut passer à la ligne (sinon le tableau déborde). */
.cms-table td {
  overflow-wrap: anywhere;
}

/* ==========================================================================
   v628 — Page « Rejoindre Podcastor » (/rejoindre) : le fonctionnement expliqué
   aux créateurs de podcasts. Valeurs reprises des cartes du site (page Pocket,
   garanties de l'accueil) : carte blanche, arrondi 24, bordure et ombre douces,
   cases sur fond --soft, pastilles numérotées teal.
   ========================================================================== */
.join-page {
  padding-bottom: 52px;
}

.join-hero {
  max-width: 940px;
  margin: 0 auto;
  padding-top: 36px;
  padding-bottom: 28px;
  text-align: center;
}

.join-eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(7, 152, 173, .10);
  color: var(--teal);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.join-hero h1 {
  margin: 0 0 14px;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  text-wrap: balance;
}

.join-hero h1 span {
  color: var(--teal);
}

.join-hero-lead {
  max-width: 820px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
}

.join-section {
  padding-top: 12px;
  padding-bottom: 12px;
  scroll-margin-top: 96px;
}

.join-card {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(26px, 4vw, 48px);
  background: #fff;
  border: 1px solid rgba(16, 32, 39, .08);
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(16, 32, 39, .07);
  text-align: center;
}

.join-card h2 {
  margin: 0 0 26px;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15;
  text-wrap: balance;
}

.join-ways {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  text-align: left;
}

.join-way {
  padding: 24px;
  border-radius: 18px;
  background: var(--soft);
}

.join-tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

/* v633 : icône du Podz (le gland de la page Pocket) en haut à droite de la case « Sans publicité » ;
   le titre garde de la place pour ne jamais passer dessous. */
.join-way {
  position: relative;
}

.join-way-icon {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 52px;
  height: 52px;
}

.join-way h3 {
  padding-right: 52px;
}

/* v635 : la case « Sans publicité » a deux paragraphes (le second présente Podcreator). */
.join-way p + p {
  margin-top: 10px;
}

.join-way p strong {
  color: var(--ink);
}

.join-way h3 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.3;
}

.join-way p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

/* v646 : deux colonnes indépendantes — ouvrir une question ne décale que sa propre colonne.
   Sur téléphone, les colonnes s’effacent (display: contents) et « order » remet l’ordre 1, 2, 3… */
.join-faq {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 1080px;
  margin: 4px auto 0;
  text-align: left;
}

.join-faq-col {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.join-faq details {
  padding: 0 16px;
  border-radius: 14px;
  background: var(--soft);
}

.join-faq summary {
  position: relative;
  padding: 12px 30px 12px 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}

.join-faq summary::-webkit-details-marker {
  display: none;
}

.join-faq summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  width: 9px;
  height: 9px;
  border-right: 2.5px solid var(--teal);
  border-bottom: 2.5px solid var(--teal);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}

.join-faq details[open] summary::after {
  transform: translateY(-30%) rotate(-135deg);
}

.join-faq summary:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
  border-radius: 8px;
}

.join-faq details p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

.join-card-plain {
  padding: 8px 0 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.join-card-plain .join-faq details {
  border: 1px solid rgba(16, 32, 39, .08);
  background: #fff;
}

.join-faq-more {
  margin: 22px 0 0;
  color: var(--muted);
}

.join-faq-more a {
  color: var(--teal);
  font-weight: 800;
}

@media (max-width: 760px) {
  .join-ways {
    grid-template-columns: 1fr;
  }

  .join-faq {
    flex-direction: column;
    align-items: stretch;
  }

  .join-faq-col {
    display: contents;
  }

  .join-way {
    padding: 16px;
  }

  .join-hero {
    padding-top: 24px;
  }

  .join-way-icon {
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
  }

  .join-way h3 {
    padding-right: 40px;
  }

  .join-hero-lead {
    font-size: 17px;
  }
}

/* v628 : formulaire « Soumettre un podcast » posé dans la case « Gratuit » de /rejoindre (variante « inline »
   du formulaire de /submit) et bouton d'inscription de la case « Sans publicité ». */
.join-way [hidden] {
  display: none !important;
}

.join-way .submit-card--inline {
  max-width: none;
  margin: 16px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.submit-card--inline .submit-form {
  gap: 10px;
}

.submit-card--inline .submit-input:not(.submit-code-input) {
  text-align: left;
}

.submit-card--inline .submit-button {
  justify-self: start;
  width: auto;
  min-height: 48px;
}

.submit-card--inline h2 {
  margin: 0 0 6px;
  font-size: 17px;
}

.submit-card--inline .submit-sub {
  max-width: none;
  margin: 0 0 12px;
  font-size: 14px;
  text-align: left;
}

.submit-card--inline [data-step-block="rss"] .submit-sub,
.submit-card--inline .submit-legal {
  max-width: none;
  margin: 10px 0 0;
  font-size: 13.5px;
  text-align: left;
}

.submit-card--inline .submit-success-block {
  padding: 4px 0;
  text-align: center;
}

.join-way-cta {
  margin-top: 16px;
}

/* v652 : /rejoindre, moins d’espace entre le haut de la case « Comment ça marche ? » et sa pastille */
#fonctionnement .join-card {
  padding-top: clamp(20px, 2.6vw, 30px);
}

/* v659 : /contact, le champ « Commande » n'apparaît que pour « Le suivi d’une commande » et « Le service après-vente »
   (options marquées data-order) ; sans lui, le téléphone prend toute la ligne. Navigateur sans :has() : champ toujours visible. */
.sav-voice-card:has(.contact-subject select) .contact-order {
	display: none;
}

.sav-voice-card:has(.contact-subject option[data-order]:checked) .contact-order {
	display: grid;
}

.sav-voice-card:has(.contact-subject select):not(:has(.contact-subject option[data-order]:checked)) .contact-phone {
	grid-column: 1 / -1;
}
/* v663 : /manuel-pcp, manuel d'utilisation de la Podcastor Pocket (même texte que le PDF, podcastor_manual_sections). */
.manual-hero {
  max-width: 860px;
  margin: 0 auto;
  padding-top: 36px;
  padding-bottom: 20px;
  text-align: center;
}

.manual-hero h1 {
  margin: 0 0 12px;
  font-size: clamp(30px, 4.4vw, 48px);
  line-height: 1.08;
  text-wrap: balance;
}

.manual-hero h1 span {
  color: var(--teal);
}

.manual-hero-lead {
  max-width: 640px;
  margin: 0 auto 22px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
}

.manual-hero-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.manual-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 28px;
  max-width: 1120px;
  margin: 0 auto;
  padding-top: 12px;
  align-items: start;
}

.manual-toc {
  position: sticky;
  top: 96px;
  padding: 20px;
  background: #fff;
  border: 1px solid rgba(16, 32, 39, .08);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(16, 32, 39, .07);
}

.manual-toc p {
  margin: 0 0 10px;
  color: var(--teal);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.manual-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.manual-toc li {
  counter-increment: toc;
}

.manual-toc a {
  display: flex;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}

.manual-toc a::before {
  content: counter(toc);
  flex: 0 0 auto;
  min-width: 18px;
  color: var(--teal);
  font-weight: 900;
}

.manual-toc a:hover {
  background: var(--soft);
}

.manual-doc {
  display: grid;
  gap: 20px;
}

.manual-sec {
  padding: clamp(22px, 3.4vw, 40px);
  background: #fff;
  border: 1px solid rgba(16, 32, 39, .08);
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(16, 32, 39, .07);
  scroll-margin-top: 96px;
}

.manual-sec h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.15;
}

.manual-num {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--teal);
  color: #fff;
  font-size: 19px;
  font-weight: 900;
}

.manual-sec h3 {
  margin: 24px 0 8px;
  font-size: 18px;
  line-height: 1.3;
}

.manual-sec p,
.manual-sec li {
  font-size: 16px;
  line-height: 1.65;
}

.manual-sec p {
  margin: 0 0 12px;
}

.manual-sec ul {
  margin: 0 0 12px;
  padding-left: 22px;
}

.manual-sec li + li {
  margin-top: 4px;
}

.manual-sec strong {
  font-weight: 800;
}

.manual-steps {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.manual-steps > li {
  position: relative;
  padding-left: 42px;
  counter-increment: step;
}

.manual-steps > li + li {
  margin-top: 10px;
}

.manual-steps > li::before {
  content: counter(step);
  position: absolute;
  top: 1px;
  left: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(7, 152, 173, .12);
  color: var(--teal);
  font-size: 14px;
  font-weight: 900;
}

.manual-fig {
  margin: 8px 0 18px;
  text-align: center;
}

.manual-fig img {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 0 auto;
}

.manual-fig figcaption {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
}

.manual-keys {
  width: 100%;
  margin: 4px 0 14px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.manual-keys th,
.manual-keys td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
  vertical-align: top;
}

.manual-keys tr:last-child th,
.manual-keys tr:last-child td {
  border-bottom: 0;
}

.manual-keys thead th {
  background: var(--soft);
  color: var(--teal);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.manual-keys tbody th {
  width: 34%;
  font-weight: 800;
}

.manual-note,
.manual-warn {
  margin: 14px 0;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.6;
}

.manual-note {
  background: var(--soft);
  border-left: 4px solid var(--teal);
}

.manual-warn {
  background: #fff4f1;
  border-left: 4px solid var(--coral);
}

.manual-note p:last-child,
.manual-warn p:last-child {
  margin-bottom: 0;
}

.manual-faq h3 {
  margin-top: 18px;
}

.manual-faq h3:first-child {
  margin-top: 0;
}

@media (max-width: 900px) {
  .manual-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .manual-toc {
    position: static;
  }

  .manual-toc ol {
    columns: 2;
    column-gap: 12px;
  }

  .manual-toc li {
    break-inside: avoid;
  }
}

@media (max-width: 560px) {
  .manual-toc ol {
    columns: 1;
  }

  .manual-sec h2 {
    gap: 10px;
  }

  .manual-num {
    width: 34px;
    height: 34px;
    font-size: 17px;
  }

  .manual-keys tbody th {
    width: 40%;
  }

  .manual-keys th,
  .manual-keys td {
    padding: 9px 10px;
    font-size: 14px;
  }
}

/* v667 : /rejoindre, un peu plus d’air au-dessus de « Questions fréquentes ». */
.join-faq-section {
  padding-top: 28px;
}

/* v668 : /rejoindre, « Une autre question ? Écrivez-nous. » dans une bulle au style de « Questions fréquentes ». */
.join-faq-more {
  display: inline-block;
  margin: 26px 0 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(7, 152, 173, .10);
  color: var(--teal);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.join-faq-more a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.join-faq-more a:hover {
  text-decoration-thickness: 2px;
}

@media (max-width: 420px) {
  .join-faq-more {
    font-size: 12px;
    letter-spacing: .06em;
  }
}

/* v669 : /rejoindre, bulle « Lire nos CGU » à gauche de « Une autre question ? Écrivez-nous. » */
.join-faq-more-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}

.join-faq-more-row .join-faq-more {
  margin: 0;
}

/* v670 : /rejoindre, les deux bulles du bas en minuscules ; flèche après « Écrivez-nous ». */
.join-faq-more {
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 420px) {
  .join-faq-more {
    font-size: 14px;
    letter-spacing: 0;
  }
}

/* v671 : /rejoindre, liens des deux bulles du bas sans soulignement. */
.join-faq-more a,
.join-faq-more a:hover {
  text-decoration: none;
}

/* v672 : /rejoindre, pastilles « Comment ça marche ? » et « Questions fréquentes » en minuscules, comme les bulles du bas
   (la pastille du manuel, hors .join-section, garde ses capitales). */
.join-section .join-eyebrow {
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

/* v673 : /rejoindre, titre sans virgule : « rejoignez Podcastor ! » toujours sur sa propre ligne
   (sinon, sur un écran large, le titre tiendrait sur une seule ligne sans ponctuation). */
.join-hero h1 span {
  display: block;
}

/* v674 : captcha Cloudflare Turnstile des soumissions de podcasts (entre le champ et le bouton) */
.submit-captcha {
  display: flex;
  justify-content: center;
  min-height: 65px;
}
.submit-captcha[hidden] {
  display: none !important;
}
.submit-captcha-resend {
  margin-top: 12px;
}
.submit-card--inline .submit-captcha {
  justify-content: flex-start;
}

/* v678 : /rejoindre, les deux bulles du bas centrées entre la FAQ et le pied de page (45 px de part et d’autre,
   au lieu de 26 au-dessus et 12 + 52 en dessous) ; le pied de page ne bouge pas. */
.join-faq-more-row {
  margin-top: 45px;
}
.join-page {
  padding-bottom: 33px;
}

/* v689 — Mon compte : choix des e-mails, sur toute la largeur sous les deux cases. */
.client-card-wide {
  grid-column: 1 / -1;
  scroll-margin-top: 90px;
}

.client-card-wide .checkbox-row {
  align-items: flex-start;
  font-weight: 500;
}

/* v690 : paiement, adresse de livraison distincte. Les champs n'apparaissent que si la case est cochée
   (navigateur sans :has() : toujours visibles, ignorés par le serveur tant que la case est décochée). */
.form-grid label.checkout-ship-toggle {
  display: flex;
}

.checkout-ship-toggle small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-weight: 600;
}

.checkout-ship-toggle input:checked + span small {
  display: none;
}

.checkout-ship-toggle:has(input:not(:checked)) + .checkout-ship-fields {
  display: none;
}

.order-shipping-line {
  margin-top: 18px;
}