/* ════════════════════════════════════════════════════════════════════
   Source : eds_snippet 11661
   */
/* ════════════════════════════════════════════════════════════════════
   1. CLONE EXACT — bloc featured + catalog du source landing4.html
   Aucune modification du source. Spec identique au source.
   Gagne sur landing4.css child par ordre source (snippet inline HEAD
   injecté après les link rel=stylesheet).
   ════════════════════════════════════════════════════════════════════ */

.featured {
  background: var(--cream-page);
  padding-top: clamp(3.5rem, 7vw, 5rem);
}

/* Layout row sans cadre ni bordure
   Cover réduit progressivement de 300 → 220 ; gap idem. Stack sous 585. */
.featured-layout {
  display: grid;
  grid-template-columns: clamp(220px, 28vw, 300px) 1fr;
  gap: clamp(1.75rem, 4vw, 5rem);
  align-items: center;
  max-width: 860px;
  margin-inline: auto;
  justify-content: center;
}
.featured-layout .book-cover {
  width: 100%;
  max-width: clamp(220px, 28vw, 300px);
}
@media (max-width: 585px) {
  .featured-layout {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    gap: 2rem;
  }
  .featured-layout .book-cover { max-width: 240px; }
  .featured-pitch {
    text-align: left;
    margin-inline: auto;
  }
}

/* Contenu texte : line-height de référence test3 (hérité par défaut) */
.featured-text { line-height: 2em; }

/* Badge eyebrow — genre "Grands reportages" (sf-eyebrow test3)
   Ratio total proportionnel : 2 × 0.36em padding + 2.3em line-height = font-size × 3.02.
   Cohérent avec page produit, Maruffy, catalogue. Scale à toutes les MQs. */
.featured-eyebrow {
  font-family: var(--ff-caps);
  font-size: 11px;
  font-weight: 500;
  line-height: 2.3em;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-soft);
  background: var(--cream);
  display: inline-block;
  padding: 0.36em 1.09em;
  border-radius: 6px;
  margin-top: 10px;
  margin-bottom: 8px;
}

/* Couverture — ombre franche + effet reliure (ligne fixe à gauche) */
/* La peur sans frontières : intensité +5% */
.featured .book-cover {
  filter:
    drop-shadow(-15px 21px 18px rgba(42,20,8,.210))
    drop-shadow(-12px 17px 9px  rgba(42,20,8,.231))
    drop-shadow(-7px  10px 4px  rgba(42,20,8,.315));
}
.book-cover {
  position: relative;
  display: inline-block;
  filter: var(--shadow-book);
  width: 300px;
  max-width: 100%;
  margin-inline: auto;
  line-height: 0;
}
.book-cover img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
  /* Mask : bords de l'image qui fondent en transparence sur 1px */
  --fade: 1px;
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  mask-composite: intersect;
}

/* Ligne verticale (ombre du pli) — sans blend mode, opacité basse pour être subtile partout */
.book-cover::before {
  content: "";
  position: absolute;
  top: 1px; bottom: 1px;
  left: 7px;
  width: 1.8px;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.14) 35%,
    rgba(0,0,0,.22) 50%,
    rgba(0,0,0,.14) 65%,
    rgba(0,0,0,0) 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Reflet clair (lumière sur le pli) — screen : visible sur les covers sombres */
.book-cover::after {
  content: "";
  position: absolute;
  top: 1px; bottom: 1px;
  left: 9px;
  width: 1px;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.12) 40%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,.12) 60%,
    rgba(255,255,255,0) 100%
  );
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 3;
}

.featured-title {
  font-family: var(--ff-serif);
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  margin: 10px 0 4px;
  padding-bottom: 10px;
}
.featured-author {
  font-family: var(--ff-caps);
  font-size: 14px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-bottom: 1em;
}
.featured-genre { margin-bottom: var(--sp-4); }
.featured-pitch {
  font-family: var(--ff-serif);
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.4;
  color: var(--text);
  border-left: 2px solid var(--gold-dim);
  padding-left: 0.8em;
  padding-bottom: 0;
  margin-bottom: 1em;
  max-width: 520px;
}
.featured-price {
  font-family: var(--ff-serif);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0;
  padding-bottom: 0;
  font-variant-numeric: tabular-nums;
}
.featured-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 25.7px;
}


/* Boutons featured catalogue : line-height en em (override .btn unitless) */
body.woocommerce-shop .featured .featured-actions .btn-primary,
body.woocommerce-shop .featured .featured-actions .btn-ghost {
  line-height: 1.2em !important;
}
/* ============================================================
   8. CATALOGUE
   ============================================================ */
.catalog {
  background: var(--cream-page);
  padding-top: clamp(3.5rem, 7vw, 5rem);
  padding-bottom: clamp(5.5rem, 9vw, 8rem);
}
.catalog > .container { max-width: 1200px; }
.catalog-header {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.catalog-title {
  font-family: var(--ff-serif);
  font-size: var(--fs-3xl);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--sp-3);
}
.catalog-title em { color: var(--gold); font-style: italic; }
.catalog-subtitle {
  font-family: var(--ff-serif);
  font-style: italic;
  color: var(--text-soft);
  font-size: var(--fs-md);
}
.catalog-subtitle strong { color: var(--ink); font-weight: 600; }

/* Catalogue 2×2, texte à droite — mirror du featured.
   Suit le design « Ses ouvrages » des pages auteur : 2 cols jusque 480,
   carte en row >820, stacked (cover top) sous 820, puis 1 col sous 480. */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: clamp(3rem, 5vw, 5rem);
  column-gap: clamp(2.5rem, 4vw, 4.5rem);
  max-width: 1160px;
  margin-inline: auto;
}
@media (max-width: 584px) {
  .catalog-grid {
    grid-template-columns: 1fr;
    max-width: 360px;
    row-gap: 2.5rem;
  }
}

/* Chaque carte en ligne : cover gauche + texte droite (texte top-aligné) */
.book-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
}
/* Sous 820 : la carte se stack (cover dessus, texte dessous, centré).
   Le bouton « AJOUTER AU PANIER » a alors la largeur de la carte → plus de wrap forcé. */
@media (max-width: 820px) {
  .book-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 1.25rem;
  }
  .book-card .book-cover { margin-inline: auto; }
  .book-card-text {
    align-items: center;
    padding-top: 8px;
    padding-bottom: 0;
  }
  .book-card .book-extrait {
    text-align: left;
    border-left: 2px solid var(--gold-dim);
    max-width: 260px;
  }
  .book-card:nth-child(4) .book-card-text { width: auto; }
}
@media (max-width: 480px) {
  .book-card .book-cover { width: 180px; }
}

/* Cover catalogue — effet reliure + blend modes adaptatifs */
.book-card .book-cover {
  width: 200px;
  max-width: 100%;
  filter: var(--shadow-book-sm);
}
/* Une aventure humaine : intensité ajustée */
.book-card:nth-child(1) .book-cover {
  filter:
    drop-shadow(-10px 14px 13px rgba(42,20,8,.163))
    drop-shadow(-7px  10px 6px  rgba(42,20,8,.172))
    drop-shadow(-4px  6px  3px  rgba(42,20,8,.242));
}
/* Bakchich + Les hommes mariés : intensité ajustée */
.book-card:nth-child(2) .book-cover,
.book-card:nth-child(4) .book-cover {
  filter:
    drop-shadow(-10px 14px 13px rgba(42,20,8,.268))
    drop-shadow(-7px  10px 6px  rgba(42,20,8,.289))
    drop-shadow(-4px  6px  3px  rgba(42,20,8,.371));
}
/* Tapis rouge : ombre renforcée */
.book-card:nth-child(3) .book-cover {
  filter:
    drop-shadow(-10px 14px 13px rgba(42,20,8,.234))
    drop-shadow(-7px  10px 6px  rgba(42,20,8,.252))
    drop-shadow(-4px  6px  3px  rgba(42,20,8,.324));
}
.book-card .book-cover::before {
  left: 5px;
  width: 1.6px;
  z-index: 3;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.08) 35%,
    rgba(0,0,0,.14) 50%,
    rgba(0,0,0,.08) 65%,
    rgba(0,0,0,0) 100%
  );
}
.book-card .book-cover::after {
  left: 7px;
  width: 1px;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.1) 40%,
    rgba(255,255,255,.15) 50%,
    rgba(255,255,255,.1) 60%,
    rgba(255,255,255,0) 100%
  );
}

/* Texte — légèrement descendu pour équilibrer avec le haut de la couverture */
.book-card-text {
  line-height: 1.4em;
  padding-top: 20px;
  padding-bottom: 35px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}
/* Carte 4 (Les hommes mariés) : bloc texte légèrement élargi pour que la description tienne sur 2 lignes */
.book-card:nth-child(4) .book-card-text {
  width: 105%;
}

/* ============================================================ */
/* HOVER COUVERTURES — PAGE BLANCHE QUI SE RETOURNE             */
/* ============================================================ */

.book-card .book-cover { overflow: hidden; }

/* Fondu 1px sur les bords — identique à .book-cover img, appliqué aux deux SVGs pour persister au survol */
.book-card .book-stage,
.book-card .curl {
  --fade: 1px;
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  mask-composite: intersect;
}

.book-stage {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  z-index: 2;
}
.book-stage .hole {
  opacity: 0;
  transform: scale(0);
  transform-origin: 586px 0;
  transition:
    transform 0.75s cubic-bezier(0.7, 0, 0.84, 0),
    opacity 0.08s linear 0.67s;
}
.book-card .book-cover:hover .book-stage .hole {
  opacity: 1;
  transform: scale(1);
  transition:
    transform 0.75s cubic-bezier(0.22, 0.9, 0.3, 1) 0.15s,
    opacity 0.12s linear 0.15s;
}

.book-card .curl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 4;
  opacity: 0;
  transform: scale(0);
  transform-origin: 100% 0%;
  transition:
    transform 0.75s cubic-bezier(0.7, 0, 0.84, 0),
    opacity 0.08s linear 0.67s;
  filter:
    drop-shadow(-12px 18px 20px rgba(12, 10, 8, 0.23))
    drop-shadow(-5px  8px  12px rgba(12, 10, 8, 0.18))
    drop-shadow(-1px  2px  3px  rgba(28, 24, 20, 0.27));
}
.book-card .book-cover:hover .curl {
  opacity: 1;
  transform: scale(1);
  transition:
    transform 0.75s cubic-bezier(0.22, 0.9, 0.3, 1) 0.15s,
    opacity 0.12s linear 0.15s;
}


@media (prefers-reduced-motion: reduce) {
  .book-card .curl { transition: none; }
}

/* Zone cliquable desktop : curl + background révélé uniquement */
.book-card .cover-link {
  display: contents;
}
.book-card .cover-hit-area {
  pointer-events: none;
  fill: transparent;
}
.book-card .book-stage {
  cursor: default;
}

@media (hover: hover) {
  /* Seule la cover-hit-area (forme exacte de la zone révélée) est cliquable.
     Le curl reste pointer-events: none — son rect plein cadre capterait partout sinon. */
  .book-card .book-stage,
  .book-card .book-stage > rect,
  .book-card .book-stage > image,
  .book-card .book-stage > text { pointer-events: none; }
  .book-card .cover-hit-area { pointer-events: auto; cursor: pointer; }
}

/* LIRE : letter-spacing serré au repos */
.book-card .book-stage > text:nth-of-type(2) {
  letter-spacing: 0px;
  transition: letter-spacing 600ms ease 150ms;
}

/* LIRE : letter-spacing s'ouvre au survol */
.book-card .book-stage:has(.cover-hit-area:hover) > text:nth-of-type(2) {
  letter-spacing: 5px;
  transition: letter-spacing 600ms ease 150ms;
}

/* En/plus s'effacent au survol pour laisser LIRE seul en scène */
.book-card .book-stage > text:nth-of-type(1),
.book-card .book-stage > text:nth-of-type(3) {
  transition: opacity 600ms ease 150ms;
}
.book-card .book-stage:has(.cover-hit-area:hover) > text:nth-of-type(1),
.book-card .book-stage:has(.cover-hit-area:hover) > text:nth-of-type(3) {
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .book-card .book-stage > text { transition: none; }
}


.book-eyebrow {
  font-family: var(--ff-caps);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  background: var(--cream);
  display: inline-block;
  padding: 0.36em 1.09em;
  border-radius: 6px;
  margin-bottom: 5px;
  line-height: 2.3em;
}
.book-title {
  font-family: var(--ff-serif);
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
  margin: 5px 0 3px;
  padding-bottom: 5px;
  transition: color .3s var(--ease);
}
.book-title a { color: inherit; }
.book-author {
  font-family: var(--ff-caps);
  font-size: 11px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.book-extrait {
  font-family: var(--ff-serif);
  font-size: 16px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.2em;
  color: var(--text);
  border-left: 2px solid var(--gold-dim);
  padding-left: 0.8em;
  padding-bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
}
.book-price {
  margin-top: auto;
  font-family: var(--ff-serif);
  font-weight: 600;
  font-size: clamp(18px, 2.2vw, 24px);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0;
  padding-bottom: 0;
}
/* Centrage vertical texte bouton (même fix Montserrat uppercase que .btn) */
.book-cta {
  display: inline-flex;
  margin-top: 14px;
  padding: 1em 2em;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  min-height: 0;
  line-height: 1.6;
}
.book-cta svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════
   2. RESET — neutralise les overrides catalogue ajoutés
   à landing4.css child lignes 1965-1990 (spec [0,3,2]).
   Reproduit ces sélecteurs avec les valeurs source landing4.html.
   Spec identique → snippet later wins par ordre source.
   ════════════════════════════════════════════════════════════════════ */

body.woocommerce.archive .featured,
.page-template-page-catalogue .featured {
  padding-top: clamp(3.5rem, 7vw, 5rem);
  padding-bottom: 0;
}
body.woocommerce.archive .featured-layout,
.page-template-page-catalogue .featured-layout {
  grid-template-columns: clamp(220px, 28vw, 300px) 1fr;
}
body.woocommerce.archive .featured-layout .book-cover,
.page-template-page-catalogue .featured-layout .book-cover {
  width: 100%;
  max-width: clamp(220px, 28vw, 300px);
}
/* Stack mobile : portage du bloc home.css 251-341 (qui ciblait déjà
   body.woocommerce-shop mais ne chargeait pas faute d'enqueue sur le catalogue).
   Reproduit le design home featured mobile : flex column, ordre eyebrow → cover →
   title → author → pitch (séparateurs horizontaux border-top/bottom au lieu de
   border-left vertical) → price → actions, tailles et centrage harmonisés. */
@media (max-width: 585px) {
  body.woocommerce-shop .featured .featured-layout {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-items: center !important;
    text-align: center !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }
  body.woocommerce-shop .featured .featured-text { display: contents !important; }
  body.woocommerce-shop .featured .featured-eyebrow {
    order: 1 !important;
    display: inline-block !important;
    width: auto !important;
    align-self: center !important;
    margin: 0 0 16px !important;
    font-size: 9px !important;
  }
  body.woocommerce-shop .featured .book-cover {
    order: 2 !important;
    width: 240px !important;
    max-width: 240px !important;
    align-self: center !important;
    margin: 0 auto 28px !important;
  }
  body.woocommerce-shop .featured .featured-title {
    order: 3 !important;
    font-size: 26px !important;
    margin: 0 0 6px !important;
    text-wrap: balance !important;
    text-align: center !important;
    width: 100% !important;
    align-self: center !important;
    padding-bottom: 0 !important;
  }
  body.woocommerce-shop .featured .featured-author {
    order: 4 !important;
    align-self: center !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 0 6px !important;
    padding-bottom: 0 !important;
  }
  body.woocommerce-shop .featured .featured-pitch {
    order: 5 !important;
    align-self: center !important;
    border-top: 1px solid rgba(184, 146, 74, 0.30) !important;
    border-bottom: 1px solid rgba(184, 146, 74, 0.30) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    padding: 10px 0 !important;
    width: 96% !important;
    max-width: 340px !important;
    margin: 12px auto !important;
    text-align: center !important;
    white-space: normal !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    text-wrap: balance !important;
  }
  body.woocommerce-shop .featured .featured-price {
    order: 6 !important;
    font-size: 23px !important;
    text-align: center !important;
    width: 100% !important;
    align-self: center !important;
    margin: 0 !important;
  }
  body.woocommerce-shop .featured .featured-actions {
    order: 7 !important;
    align-self: center !important;
    justify-content: center !important;
    margin: 16px 0 0 !important;
    gap: 12px !important;
  }
  body.woocommerce-shop .featured .featured-actions {
    flex-direction: column !important;
    align-items: center !important;
    margin: 16px auto 0 !important;
    gap: 12px !important;
  }
  body.woocommerce-shop .featured .featured-actions .btn-primary,
  body.woocommerce-shop .featured .featured-actions .btn-ghost {
    font-size: 12px !important;
    padding: 1em 1.8em !important;
  }
}
@media (max-width: 685px) {
  /* Air sous le featured, identique home (snippet 11283 ligne 214). */
  body.woocommerce-shop section.featured {
    padding-bottom: 54px !important;
  }
}
@media (max-width: 485px) {
  body.woocommerce-shop .featured .featured-title { font-size: 25px !important; margin: 5px 0 0 !important; }
  body.woocommerce-shop .featured .featured-price { font-size: 23px !important; margin: 0 !important; }
  body.woocommerce-shop .featured .featured-eyebrow { font-size: 9px !important; margin: 0 0 24px !important; }
  body.woocommerce-shop .featured .featured-actions .btn-primary { font-size: 11px !important; padding: 11px 19.8px !important; }
}
body.woocommerce.archive .featured .featured-text,
.page-template-page-catalogue .featured .featured-text {
  margin-top: 0;
  line-height: 2em;
}
body.woocommerce.archive .featured .featured-eyebrow,
.page-template-page-catalogue .featured .featured-eyebrow {
  margin-top: 10px;
  margin-bottom: 8px;
  line-height: 2.3em;
}
body.woocommerce.archive .featured .featured-title,
.page-template-page-catalogue .featured .featured-title {
  margin: 10px 0 4px;
  padding-bottom: 10px;
}
body.woocommerce.archive .featured .featured-author,
.page-template-page-catalogue .featured .featured-author {
  margin-bottom: 10px;
  padding-bottom: 1em;
}
body.woocommerce.archive .featured .featured-pitch,
.page-template-page-catalogue .featured .featured-pitch {
  margin-bottom: 1em;
}
body.woocommerce.archive .featured .featured-actions,
.page-template-page-catalogue .featured .featured-actions {
  margin-top: 25.7px;
}

/* ════════════════════════════════════════════════════════════════════
   3. PAGE-HEADER + CATALOG-SECTION-TITLE (catalogue-only)
   ════════════════════════════════════════════════════════════════════ */

.page-template-page-catalogue .page-header,
body:is(.woocommerce.archive, .page-id-150) .page-header {
  padding-top: calc(80px + clamp(1.75rem, 2.8vw, 2.75rem));
  margin-bottom: 8px;
}
.page-template-page-catalogue .page-header-eyebrow,
body:is(.woocommerce.archive, .page-id-150) .page-header-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.page-template-page-catalogue .page-header-title,
body:is(.woocommerce.archive, .page-id-150) .page-header-title {
  font-size: clamp(2.1rem, 1.6rem + 1.4vw, 2.875rem);
}

.page-template-page-catalogue .catalog-section-title .eyebrow,
body.woocommerce.archive .catalog-section-title .eyebrow {
  display: none;
}
.page-template-page-catalogue .catalog-section-title,
body.woocommerce.archive .catalog-section-title {
  margin: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(0.25rem, 0.5vw, 0.5rem);
}
.page-template-page-catalogue .catalog-section-title::after,
body.woocommerce.archive .catalog-section-title::after {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gold-dim);
  margin: 12px auto 0;
  opacity: 0.7;
}

/* ════════════════════════════════════════════════════════════════════
   4. AUTEUR-BANNER stack ≤720 (source landing4.html, manquait child)
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  .auteur-banner,
  .auteur-banner--reverse {
    grid-template-columns: 1fr;
    gap: 24px;
    justify-items: center;
    text-align: center;
    padding: 36px 0;
  }
  .auteur-banner--reverse .auteur-banner-photo { order: 0; }
  .auteur-banner--reverse .auteur-banner-content { text-align: center; }
  .auteur-banner-bio,
  .auteur-banner--reverse .auteur-banner-bio {
    border-left: none; border-right: none;
    padding-left: 0; padding-right: 0;
    max-width: 520px; margin-inline: auto;
  }
  .auteur-banner-stats { justify-content: center; }
  .auteur-banner-actions,
  .auteur-banner--reverse .auteur-banner-actions { justify-content: center; }
  .auteur-banner-photo { width: 200px; height: 200px; }
}

/* ════════════════════════════════════════════════════════════════════
   5. AUTEUR-BANNER stack centré ≤585 — clone EXACT du layout home.css
   Ordre : nom (1) → tagline (2) → photo (3) → bio (4) → actions stack (5)
   Boutons full-width empilés. Cf. home.css @≤585 L1070-1118.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 585px) {
  .authors-title { font-size: 36px !important; }
  .auteur-banner,
  .auteur-banner--reverse {
    display: flex !important; flex-direction: column !important;
    align-items: center !important; text-align: center !important;
    grid-template-columns: none !important; gap: 0 !important;
  }
  .auteur-banner-content { display: contents !important; }
  .auteur-banner-name {
    order: 1 !important; font-size: 29px !important; font-weight: 600 !important; line-height: 1.1 !important;
    margin: 0 0 6px !important; text-align: center !important; width: 100% !important;
  }
  .auteur-banner-tagline {
    order: 2 !important; font-size: 20.5px !important; line-height: 1.1 !important;
    margin: 2px 0 34px !important; text-align: center !important; width: 100% !important;
  }
  .auteur-banner .auteur-banner-photo,
  .auteur-banner--reverse .auteur-banner-photo {
    order: 3 !important; width: 220px !important; height: 220px !important;
    align-self: center !important; margin: 0 auto 30px !important;
  }
  .auteur-banner-bio,
  .auteur-banner--reverse .auteur-banner-bio {
    order: 4 !important; text-align: left !important; width: 100% !important; max-width: none !important;
    border-left: 0 !important; border-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important;
    margin: 0 0 22px !important; font-size: 13.4px !important; line-height: 1.85 !important;
  }
  .auteur-banner-actions,
  .auteur-banner--reverse .auteur-banner-actions {
    order: 5 !important; width: 100% !important; flex-direction: column !important;
    align-items: center !important; justify-content: flex-start !important; gap: 12px !important;
  }
  .auteur-banner-actions .btn { font-size: 13px !important; min-height: 38px !important; }
}


/* ════════════════════════════════════════════════════════════════════
   CATALOGUE FEATURED — overrides spécifiques (page catalogue uniquement)
   Diverge de l'accueil : padding-top réduit + cover 270px + typo adaptée.
   Demande Ghislain 2026-06-09.
   ════════════════════════════════════════════════════════════════════ */

/* ─── ≥1100 : grand écran — padding-top 1.5rem, cover 270px, typo -10%, air -5%
   IMPORTANT : on FIXE le grid-template-columns pour neutraliser la MQ iPad
   Pro paysage (pointer:coarse) qui imposait 220px auto et faisait déborder
   la cover de 270px. ─── */
@media (min-width: 1100px) {
  body:is(.woocommerce.archive, .page-id-150) .page-header,
  body.woocommerce-shop .page-header {
    margin-bottom: 0 !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: -14px !important; /* compense décalage déco-visuelle (~240) vs pageHeader.bottom (~268) à 1920 */
    min-height: calc(100vh - 269px) !important; /* 80 header + ~189 page-header */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-layout {
    display: grid !important;
    grid-template-columns: 260px max-content !important;
    gap: 52px !important;
    align-items: center !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    transform: none !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-text {
    width: max-content !important;
    max-width: 462px !important;
    margin-top: -20px !important; /* -5% cover h, plus serré que -10% */
  }
  body.woocommerce-shop.woocommerce-shop section.featured .book-cover {
    width: 260px !important;
    max-width: 260px !important;
  }
  /* Espacements proportionnels aux ratios iPad Pro paysage × 0.85 (serrage) */
  body.woocommerce-shop.woocommerce-shop section.featured .featured-eyebrow {
    font-size: 10.5px !important;
    margin-top: 0 !important;
    margin-bottom: 6.2px !important;       /* 10.5 * (7.6/11) * 0.85 */
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-title {
    font-size: 36px !important;
    margin-top: 10px !important;
    margin-bottom: 4px !important;
    padding-bottom: 10px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-author {
    font-size: 13px !important;
    margin-bottom: 8.1px !important;       /* 13 * (9.5/13) * 0.85 */
    padding-bottom: 10.5px !important;     /* 13 * (12.35/13) * 0.85 */
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-pitch {
    font-size: 17px !important;
    margin-top: 0 !important;
    margin-bottom: 11.2px !important;      /* 17 * (17.1/22) * 0.85 */
    max-width: none !important;
    padding-left: 0.8em !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-price { font-size: 26px !important; }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions {
    margin-top: 20.7px !important;         /* 24.4 * 0.85 */
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions .btn-primary,
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions .btn-ghost {
    font-size: 13px !important;
    padding: 1em 2em !important;
  }
}

/* ─── 821-1099 : tablette large — padding 1.25rem, cover 240px ─── */
@media (max-width: 1099px) and (min-width: 821px) {
  body.woocommerce-shop.woocommerce-shop section.featured { padding-top: 1.25rem !important; }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-layout {
    display: grid !important;
    grid-template-columns: 240px max-content !important;
    gap: 44px !important;
    align-items: center !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    transform: none !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-text {
    width: max-content !important;
    max-width: 440px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .book-cover {
    width: 240px !important;
    max-width: 240px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-eyebrow { margin-top: 0 !important; }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-title { font-size: 28px !important; }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-pitch { font-size: 16px !important; }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-price { font-size: 24px !important; }
}

/* ─── 586-820 : tablette portrait — padding 1rem, cover 220px ─── */
@media (max-width: 820px) and (min-width: 586px) {
  body.woocommerce-shop.woocommerce-shop section.featured { padding-top: 1rem !important; }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-layout {
    display: grid !important;
    grid-template-columns: 220px max-content !important;
    gap: 36px !important;
    align-items: center !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    transform: none !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-text {
    width: max-content !important;
    max-width: 400px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .book-cover {
    width: 220px !important;
    max-width: 220px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-eyebrow { margin-top: 0 !important; }
}

/* ─── ≤585 : stack — padding-top + eyebrow margin-top reset ─── */
@media (max-width: 585px) {
  body.woocommerce-shop.woocommerce-shop section.featured { padding-top: 0.75rem !important; }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-eyebrow { margin-top: 0 !important; }
}


/* ════════════════════════════════════════════════════════════════════
   iPad Pro PAYSAGE uniquement (1100-1399 landscape + pointer:coarse)
   — overrides Ghislain 2026-06-10
   page-header padding 150 + cover 320 + typo +18% + min-height pour
   pousser la section suivante sous la flottaison + translateY(-35px).
   pointer:coarse = ne matche QUE les vraies tablettes, pas les desktops
   dans la même range de largeur.
   ════════════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (min-width: 1100px) and (max-width: 1399px) and (min-height: 830px) and (min-aspect-ratio: 13/10) and (max-aspect-ratio: 15/10) {
  body:is(.woocommerce.archive, .page-id-150) .page-header,
  body.woocommerce-shop .page-header {
    padding-top: 150px !important;
    margin-bottom: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured {
    padding-top: 0 !important;
    margin-top: -11px !important; /* compense décalage déco-visuelle (266) vs pageHeader.bottom (289) */
    min-height: calc(100vh - 289px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-layout {
    grid-template-columns: 320px max-content !important;
    gap: 64px !important;
    transform: translateY(-35px) !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .book-cover {
    width: 320px !important;
    max-width: 320px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-text {
    max-width: 567px !important; /* 540 * 1.05 */
    margin-top: -50px !important; /* -10% de 496 cover height */
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-title { font-size: 40px !important; } /* 38 * 1.05 */
  body.woocommerce-shop.woocommerce-shop section.featured .featured-pitch { font-size: 22px !important; } /* 21 * 1.05 */
  body.woocommerce-shop.woocommerce-shop section.featured .featured-price { font-size: 34px !important; } /* 32 * 1.05 */
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions .btn-primary,
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions .btn-ghost {
    font-size: 14px !important;
    padding: 1em 2em !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Neutralisation du ::after natif sous .catalog-section-title (petit trait 32×1)
   sur pages woocommerce-shop — l'ornement officiel est injecté en DOM via JS
   (snippet "Catalog ornement inject") sous forme de .page-header-ornament cloné.
   ════════════════════════════════════════════════════════════════════ */
body.woocommerce-shop .catalog-section-title::after {
  content: none !important;
}

/* Air entre H2 et ornement injecté + air sous l'ornement + lignes plus longues */
.catalog-section-title .page-header-ornament {
  margin-top: 18px !important;
  margin-bottom: 30px !important;
}
.catalog-section-title .page-header-ornament::before,
.catalog-section-title .page-header-ornament::after {
  flex: 0 0 220px !important;
}

/* Air au-dessus de .catalog-section-title (règle Ghislain) */
.page-template-page-catalogue .catalog-section-title,
body.woocommerce.archive .catalog-section-title {
  margin-top: 10px;
}

/* Air entre les 2 rows du grid de cards */
.catalog-grid {
  row-gap: 72px;
}

/* Air sous la 2e row (avant la bande Réassurance) */
body.woocommerce-shop.woocommerce-shop section.catalog {
  padding-bottom: 86px !important;
}

/* Portrait UNIQUEMENT */
@media (orientation: portrait) {
  .catalog-section-title .page-header-ornament {
    margin-bottom: 0px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.catalog {
    padding-top: 12px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   iPad Pro 12.9 PORTRAIT (1000-1080 portrait) — overrides Ghislain 2026-06-10
   Cover 280 (scale 0.875 = 280/320 par rapport à iPad Pro paysage référence).
   Bloc texte aux ratios stricts 0.875 sur eyebrow/title/author/pitch/price/CTA.
   + air sous header (page-header padding-top 140) pour aérer la composition.
   + ornement séparateur Featured ↔ Autres titres.
   ════════════════════════════════════════════════════════════════════ */
@media (orientation: portrait) and (min-width: 1000px) and (max-width: 1080px) {
  body:is(.woocommerce.archive, .page-id-150) .page-header,
  body.woocommerce-shop .page-header {
    padding-top: 140px !important;
    margin-bottom: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured {
    padding-top: 20px !important;
    padding-bottom: 30px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-layout {
    grid-template-columns: 280px max-content !important;
    gap: 56px !important; /* 64 × 0.875 */
    align-items: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .book-cover {
    width: 280px !important;
    max-width: 280px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-text {
    width: max-content !important;
    max-width: 500px !important;
    margin-top: -44px !important; /* -50 × 0.875 */
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-eyebrow {
    font-size: 9.6px !important; /* 11 × 0.875 */
    margin-top: 0 !important;
    margin-bottom: 7.3px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-title {
    font-size: 35px !important; /* 40 × 0.875 */
    margin-top: 8.2px !important;
    margin-bottom: 3.3px !important;
    padding-bottom: 8.2px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-author {
    font-size: 11.5px !important; /* 13 × 0.875 */
    margin-bottom: 9.2px !important;
    padding-bottom: 11.9px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-pitch {
    font-size: 19px !important; /* 22 × 0.875 */
    margin-top: 0 !important;
    margin-bottom: 14.9px !important;
    max-width: none !important;
    padding-left: 0.8em !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-price {
    font-size: 30px !important; /* 34 × 0.875 */
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions {
    margin-top: 23.5px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions .btn-primary,
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions .btn-ghost {
    font-size: 12px !important;
    padding: 1em 2em !important; /* 14×27 × 0.875 */
  }
  /* Pas d'ornement entre Featured et catalog-section-title — ornement placé SOUS le H2 */
  body.woocommerce-shop.woocommerce-shop section.featured::after {
    content: none !important;
  }
  /* Section "Autres titres" — réduire covers + serrer espacements pour voir 2 cards au load */
  body.woocommerce-shop.woocommerce-shop .catalog-section-title {
    margin-top: 0 !important;
    padding-top: 38px !important;
    padding-bottom: 10px !important;
  }
  /* Ornement sous le H2 = clone EXACT injecté en DOM (.page-header-ornament) — voir snippet JS "Catalog ornement inject" */
  body.woocommerce-shop.woocommerce-shop .catalog-section-title h2 {
    font-size: 32px !important;
    margin: 0 !important;
  }
  body.woocommerce-shop.woocommerce-shop .catalog-section-title .eyebrow {
    display: none !important;
  }
  body.woocommerce-shop.woocommerce-shop section.catalog {
    padding-top: 16px !important;
    padding-bottom: 80px !important;
  }
  body.woocommerce-shop.woocommerce-shop .catalog-grid {
    column-gap: 24px !important;
    row-gap: 80px !important;
  }
  /* Section Auteurs : marges latérales 96px (home + catalogue) */
  .authors .container {
    padding-left: 96px !important;
    padding-right: 96px !important;
  }
  body.woocommerce-shop.woocommerce-shop .catalog-grid .book-cover {
    width: 235px !important;
    max-width: 235px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   iPad Pro 11" paysage (1194×834) — bornes strictes pour éviter
   collision avec MQ Pro 12.9 paysage (1100-1399 + aspect 13/10-15/10 + min-height 830).
   ════════════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (min-width: 1190px) and (max-width: 1200px) and (min-height: 830px) and (max-height: 840px) {
  .page-header-eyebrow {
    margin-top: -22px;
  }
  body.woocommerce-shop.woocommerce-shop section.featured {
    padding-top: 56px !important;
    margin-top: 0 !important;
    padding-bottom: 48px !important;
  }
  body.woocommerce-shop .catalog {
    padding-top: 36px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   iPad Mini 6 paysage (1133×744) — Ghislain 2026-06-10
   ════════════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (min-width: 1128px) and (max-width: 1140px) and (min-height: 739px) and (max-height: 749px) {
  body.woocommerce.archive .catalog-section-title {
    margin-top: 36px;
  }
  body.woocommerce-shop.woocommerce-shop section.catalog {
    padding-top: 28px;
  }
}


/* ════════════════════════════════════════════════════════════════════
   iPad Air paysage (1180×820) — Ghislain 2026-06-10
   Cover 290 + bloc texte aux ratios iPad Pro paysage adaptés.
   +20px d'air au-dessus de l'eyebrow.
   ════════════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (min-width: 1175px) and (max-width: 1185px) and (min-height: 815px) and (max-height: 825px) {
  body:is(.woocommerce.archive, .page-id-150) .page-header,
  body.woocommerce-shop .page-header {
    margin-bottom: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured {
    padding-top: 40px !important;
    padding-bottom: 0 !important;
    margin-top: -14px !important;
    min-height: calc(100vh - 269px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-layout {
    display: grid !important;
    grid-template-columns: 290px max-content !important;
    gap: 56px !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    transform: translateY(-25px) !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .book-cover {
    width: 290px !important;
    max-width: 290px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-text {
    width: max-content !important;
    max-width: 510px !important;
    margin-top: -45px !important; /* -10% de 449 cover h */
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-eyebrow {
    font-size: 10px !important;
    margin-top: 0 !important;
    margin-bottom: 7.6px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-title {
    font-size: 36px !important;
    margin-top: 8.5px !important;
    margin-bottom: 3.4px !important;
    padding-bottom: 8.5px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-author {
    font-size: 13px !important;
    margin-bottom: 9.5px !important;
    padding-bottom: 12.35px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-pitch {
    font-size: 20px !important;
    margin-top: 0 !important;
    margin-bottom: 15.5px !important;
    max-width: none !important;
    padding-left: 0.8em !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-price { font-size: 31px !important; }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions {
    margin-top: 24.4px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions .btn-primary,
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions .btn-ghost {
    font-size: 12.5px !important;
    padding: 1em 2em !important;
  }
  /* Air paysage uniquement — overrides Ghislain */
  body:is(.woocommerce.archive, .page-id-150) .page-header,
  body.woocommerce-shop .page-header {
    margin-top: 8px;
  }
  body.woocommerce-shop.woocommerce-shop section.featured {
    margin-bottom: 28px;
  }
  body.woocommerce-shop.woocommerce-shop section.catalog {
    padding-top: 18px;
  }
}


/* ════════════════════════════════════════════════════════════════════
   iPad Mini paysage (1024×768) — Ghislain 2026-06-10
   Cover 230 + ratios iPad Pro paysage. + air au-dessus eyebrow,
   - air sous déco (margin-top négatif), + air sous carte.
   ════════════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (min-width: 1020px) and (max-width: 1030px) and (min-height: 760px) and (max-height: 775px) {
  body:is(.woocommerce.archive, .page-id-150) .page-header,
  body.woocommerce-shop.woocommerce-shop .page-header {
    margin-bottom: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: -25px !important;
    min-height: calc(100vh - 230px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-layout {
    display: grid !important;
    grid-template-columns: 260px max-content !important;
    gap: 52px !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    transform: none !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .book-cover {
    width: 260px !important;
    max-width: 260px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-text {
    width: max-content !important;
    max-width: 460px !important;
    margin-top: -40px !important; /* -10% cover_h ~400 */
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-eyebrow {
    font-size: 9px !important;
    margin-top: 0 !important;
    margin-bottom: 6.2px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-title {
    font-size: 32.5px !important;
    margin-top: 6.91px !important;
    margin-bottom: 2.76px !important;
    padding-bottom: 6.91px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-author {
    font-size: 11.7px !important;
    margin-bottom: 7.72px !important;
    padding-bottom: 10.04px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-pitch {
    font-size: 18px !important;
    margin-top: 0 !important;
    margin-bottom: 12.6px !important;
    max-width: none !important;
    padding-left: 0.8em !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-price { font-size: 27.5px !important; }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions {
    margin-top: 19.8px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions .btn-primary,
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions .btn-ghost {
    font-size: 11.5px !important;
    padding: 1em 2em !important;
  }
  /* Section Auteurs : marges latérales 96px (home + catalogue) */
  .authors .container {
    padding-left: 96px !important;
    padding-right: 96px !important;
  }
  /* Mini paysage uniquement — overrides Ghislain */
  .page-header-eyebrow {
    margin-top: 10px;
  }
  body.woocommerce-shop.woocommerce-shop section.catalog {
    padding-top: 18px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Galaxy Tab S4 paysage (1138×712) — Ghislain 2026-06-10
   Format 16:10, faible hauteur — cover réduite pour tenir verticalement.
   ════════════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (min-width: 1130px) and (max-width: 1145px) and (min-height: 705px) and (max-height: 720px) {
  body:is(.woocommerce.archive, .page-id-150) .page-header,
  body.woocommerce-shop .page-header {
    margin-bottom: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: -25px !important;
    min-height: calc(100vh - 210px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-layout {
    display: grid !important;
    grid-template-columns: 250px max-content !important;
    gap: 48px !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    transform: translateY(-15px) !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .book-cover {
    width: 250px !important;
    max-width: 250px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-text {
    width: max-content !important;
    max-width: 425px !important;
    margin-top: -36px !important; /* -10% cover_h ~360 */
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-eyebrow {
    font-size: 8.25px !important;
    margin-top: 0 !important;
    margin-bottom: 5.7px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-title {
    font-size: 30px !important;
    margin-top: 6.38px !important;
    margin-bottom: 2.55px !important;
    padding-bottom: 6.38px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-author {
    font-size: 10.8px !important;
    margin-bottom: 7.13px !important;
    padding-bottom: 9.27px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-pitch {
    font-size: 16.5px !important;
    margin-top: 0 !important;
    margin-bottom: 11.63px !important;
    max-width: none !important;
    padding-left: 0.8em !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-price { font-size: 25.5px !important; }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions {
    margin-top: 18.3px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions .btn-primary,
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions .btn-ghost {
    font-size: 10.5px !important;
    padding: 1em 2em !important;
  }
  .catalog {
    padding-top: 18px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   iPad Pro 11" portrait (834×1194) — base Air portrait + viewport légèrement plus haut
   ════════════════════════════════════════════════════════════════════ */
@media (orientation: portrait) and (min-width: 830px) and (max-width: 840px) and (min-height: 1190px) and (max-height: 1200px) {
  body:is(.woocommerce.archive, .page-id-150) .page-header {
    padding-top: 125px;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-layout {
    grid-template-columns: 245px max-content !important;
    gap: 48px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .book-cover {
    width: 245px !important;
    max-width: 245px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured {
    padding-bottom: 48px !important;
    min-height: 0 !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-text {
    max-width: 455px !important;
    margin-top: -39.7px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-eyebrow {
    font-size: 8.75px !important;
    margin-top: 0 !important;
    margin-bottom: 5px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-title {
    font-size: 32.1px !important;
    margin-top: 5px !important;
    margin-bottom: 2px !important;
    padding-bottom: 5px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-author {
    font-size: 10.5px !important;
    margin-bottom: 6.5px !important;
    padding-bottom: 8.4px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-pitch {
    font-size: 17.5px !important;
    margin-top: 0 !important;
    margin-bottom: 9px !important;
    max-width: none !important;
    padding-left: 0.8em !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-price { font-size: 27.4px !important; }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions {
    margin-top: 16.6px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions .btn-primary,
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions .btn-ghost {
    font-size: 11.1px !important;
    padding: 1em 2em !important;
    min-height: 0 !important;
  }
  body.woocommerce-shop.woocommerce-shop .catalog-grid .book-cover {
    width: 190px !important;
    max-width: 190px !important;
  }
  .authors .container {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   iPad Mini 6 portrait (744×1133) — base Air portrait, légèrement compacté
   ════════════════════════════════════════════════════════════════════ */
@media (orientation: portrait) and (min-width: 740px) and (max-width: 748px) and (min-height: 500px) and (max-height: 1300px) {
  body:is(.woocommerce.archive, .page-id-150) .page-header {
    padding-top: 125px;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-layout {
    grid-template-columns: 220px max-content !important;
    gap: 42px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .book-cover {
    width: 220px !important;
    max-width: 220px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured {
    padding-bottom: 48px !important;
    min-height: 0 !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-text {
    max-width: 408px !important;
    margin-top: -35.6px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-eyebrow {
    font-size: 7.86px !important;
    margin-top: 0 !important;
    margin-bottom: 4.5px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-title {
    font-size: 28.8px !important;
    margin-top: 4.5px !important;
    margin-bottom: 1.8px !important;
    padding-bottom: 4.5px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-author {
    font-size: 9.43px !important;
    margin-bottom: 5.87px !important;
    padding-bottom: 7.54px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-pitch {
    font-size: 15.7px !important;
    margin-top: 0 !important;
    margin-bottom: 8.07px !important;
    max-width: none !important;
    padding-left: 0.8em !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-price { font-size: 24.6px !important; }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions {
    margin-top: 14.9px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions .btn-primary,
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions .btn-ghost {
    font-size: 9.95px !important;
    padding: 1em 2em !important;
    min-height: 0 !important;
  }
  body.woocommerce-shop.woocommerce-shop .catalog-grid .book-cover {
    width: 170px !important;
    max-width: 170px !important;
  }
  .authors .container {
    padding-left: 68px !important;
    padding-right: 68px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Galaxy Tab S4 portrait (712×1138) — viewport étroit + un peu plus court
   ════════════════════════════════════════════════════════════════════ */
@media (orientation: portrait) and (min-width: 708px) and (max-width: 716px) and (min-height: 1133px) and (max-height: 1143px) {
  body:is(.woocommerce.archive, .page-id-150) .page-header {
    padding-top: 125px;
  }
  body.woocommerce-shop.woocommerce-shop section.catalog {
    padding-top: 24px !important;
  }
  /* Galaxy Tab S4 portrait : clone exhaustif du design 744x1133 sur la section auteurs.
     Override le bloc @media (max-width: 720px) qui passe tout en stack centre.
     Padding banner symetrique 48px top+bottom (air separateur entre banners equilibre). */
  .auteur-banner {
    grid-template-columns: 250px 1fr !important;
    gap: 32px !important;
    align-items: center !important;
    justify-items: stretch !important;
    text-align: left !important;
    padding: 48px 0 !important;
  }
  .auteur-banner--reverse {
    grid-template-columns: 1fr 250px !important;
  }
  .auteur-banner--reverse .auteur-banner-photo { order: 2 !important; }
  .auteur-banner--reverse .auteur-banner-content { text-align: right !important; }
  .auteur-banner-photo {
    width: 250px !important;
    height: 250px !important;
  }
  .auteur-banner-bio {
    padding-left: 11px !important;
    padding-right: 0 !important;
    max-width: none !important;
    margin-inline: 0 !important;
    border-left: 1px solid var(--gold-dim) !important;
    border-right: none !important;
  }
  .auteur-banner--reverse .auteur-banner-bio {
    padding-left: 0 !important;
    padding-right: 11px !important;
    max-width: none !important;
    margin-inline: 0 !important;
    border-left: none !important;
    border-right: 1px solid var(--gold-dim) !important;
  }
  .auteur-banner-actions { justify-content: flex-start !important; }
  .auteur-banner--reverse .auteur-banner-actions { justify-content: flex-end !important; }
  .auteur-banner-stats { justify-content: flex-start !important; }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-layout {
    grid-template-columns: 215px max-content !important;
    gap: 42px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .book-cover {
    width: 215px !important;
    max-width: 215px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured {
    padding-bottom: 48px !important;
    min-height: 0 !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-text {
    max-width: 390px !important;
    margin-top: -34px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-eyebrow {
    font-size: 7.5px !important;
    margin-top: 0 !important;
    margin-bottom: 4.3px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-title {
    font-size: 27.5px !important;
    margin-top: 4.3px !important;
    margin-bottom: 1.7px !important;
    padding-bottom: 4.3px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-author {
    font-size: 9px !important;
    margin-bottom: 5.6px !important;
    padding-bottom: 7.2px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-pitch {
    font-size: 15px !important;
    margin-top: 0 !important;
    margin-bottom: 7.7px !important;
    max-width: none !important;
    padding-left: 0.8em !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-price { font-size: 23.5px !important; }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions {
    margin-top: 14.2px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions .btn-primary,
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions .btn-ghost {
    font-size: 9.5px !important;
    padding: 1em 2em !important;
    min-height: 0 !important;
  }
  body.woocommerce-shop.woocommerce-shop .catalog-grid .book-cover {
    width: 180px !important;
    max-width: 180px !important;
  }
  .authors .container {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   iPad Mini 1-5 portrait (768×1024) — cover 220, bloc texte font-sizes au ratio 0.6875
   (marges héritées du défaut Pro paysage, pas surchargées)
   ════════════════════════════════════════════════════════════════════ */
@media (orientation: portrait) and (min-width: 763px) and (max-width: 773px) and (min-height: 1019px) and (max-height: 1029px) {
  body:is(.woocommerce.archive, .page-id-150) .page-header {
    padding-top: 115px;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-layout {
    grid-template-columns: 210px max-content !important;
    gap: 36px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .book-cover {
    width: 210px !important;
    max-width: 210px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured {
    padding-bottom: 28px !important;
    min-height: 0 !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-text {
    max-width: 390px !important;
    margin-top: -34px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-eyebrow {
    font-size: 7.5px !important;
    margin-top: 0 !important;
    margin-bottom: 4.3px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-title {
    font-size: 27.5px !important;
    margin-top: 4.3px !important;
    margin-bottom: 1.7px !important;
    padding-bottom: 4.3px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-author {
    font-size: 9px !important;
    margin-bottom: 5.6px !important;
    padding-bottom: 7.2px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-pitch {
    font-size: 15px !important;
    margin-top: 0 !important;
    margin-bottom: 7.7px !important;
    max-width: none !important;
    padding-left: 0.8em !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-price { font-size: 23.5px !important; }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions {
    margin-top: 14.2px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions .btn-primary,
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions .btn-ghost {
    font-size: 9.5px !important;
    padding: 1em 2em !important;
    min-height: 0 !important;
  }
  body.woocommerce-shop.woocommerce-shop .catalog-grid .book-cover {
    width: 160px !important;
    max-width: 160px !important;
  }
  .authors .container {
    padding-left: 56px !important;
    padding-right: 56px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   iPad Air portrait (820×1180) — Ghislain 2026-06-11
   ════════════════════════════════════════════════════════════════════ */
@media (orientation: portrait) and (min-width: 815px) and (max-width: 825px) and (min-height: 1175px) and (max-height: 1185px) {
  body:is(.woocommerce.archive, .page-id-150) .page-header {
    padding-top: 125px;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-layout {
    grid-template-columns: 240px max-content !important;
    gap: 48px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .book-cover {
    width: 240px !important;
    max-width: 240px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured {
    padding-bottom: 48px !important;
    min-height: 0 !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-text {
    max-width: 446px !important;
    margin-top: -38.9px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-eyebrow {
    font-size: 8.6px !important;
    margin-top: 0 !important;
    margin-bottom: 4.9px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-title {
    font-size: 31.4px !important;
    margin-top: 4.9px !important;
    margin-bottom: 1.9px !important;
    padding-bottom: 4.9px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-author {
    font-size: 10.3px !important;
    margin-bottom: 6.4px !important;
    padding-bottom: 8.2px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-pitch {
    font-size: 17.1px !important;
    margin-top: 0 !important;
    margin-bottom: 8.8px !important;
    max-width: none !important;
    padding-left: 0.8em !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-price { font-size: 26.9px !important; }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions {
    margin-top: 16.2px !important;
  }
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions .btn-primary,
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions .btn-ghost {
    font-size: 10.9px !important;
    padding: 1em 2em !important;
    min-height: 0 !important;
  }
  body.woocommerce-shop.woocommerce-shop .catalog-grid .book-cover {
    width: 185px !important;
    max-width: 185px !important;
  }
  .authors .container {
    padding-left: 76px !important;
    padding-right: 76px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   HARMONISATION TABLETTES (hors iPad Pro) — Ghislain 2026-06-11
   - Boutons featured (.featured-actions .btn-primary/.btn-ghost) → 12px
   - Boutons autres livres (.book-cta) → 11px
   Sur toutes les tablettes listées, en portrait ET paysage.
   ════════════════════════════════════════════════════════════════════ */
@media
  /* iPad Mini 1-5 portrait (768×1024) */
  (orientation: portrait) and (min-width: 763px) and (max-width: 773px) and (min-height: 1019px) and (max-height: 1029px),
  /* iPad Mini 1-5 paysage (1024×768) */
  (orientation: landscape) and (min-width: 1019px) and (max-width: 1029px) and (min-height: 763px) and (max-height: 773px),
  /* iPad Mini 6 portrait (744×1133) */
  (orientation: portrait) and (min-width: 739px) and (max-width: 749px) and (min-height: 1128px) and (max-height: 1138px),
  /* iPad Mini 6 paysage (1133×744) */
  (orientation: landscape) and (min-width: 1128px) and (max-width: 1138px) and (min-height: 739px) and (max-height: 749px),
  /* iPad 9e gen portrait (810×1080) */
  (orientation: portrait) and (min-width: 805px) and (max-width: 815px) and (min-height: 1075px) and (max-height: 1085px),
  /* iPad 9e gen paysage (1080×810) */
  (orientation: landscape) and (min-width: 1075px) and (max-width: 1085px) and (min-height: 805px) and (max-height: 815px),
  /* iPad Air 4/5 portrait (820×1180) */
  (orientation: portrait) and (min-width: 815px) and (max-width: 825px) and (min-height: 1175px) and (max-height: 1185px),
  /* iPad Air 4/5 paysage (1180×820) */
  (orientation: landscape) and (min-width: 1175px) and (max-width: 1185px) and (min-height: 815px) and (max-height: 825px),
  /* iPad Pro 11" portrait (834×1194) */
  (orientation: portrait) and (min-width: 829px) and (max-width: 839px) and (min-height: 1189px) and (max-height: 1199px),
  /* iPad Pro 11" paysage (1194×834) */
  (orientation: landscape) and (min-width: 1189px) and (max-width: 1199px) and (min-height: 829px) and (max-height: 839px),
  /* Galaxy Tab S4 portrait (712×1138) */
  (orientation: portrait) and (min-width: 707px) and (max-width: 717px) and (min-height: 1133px) and (max-height: 1143px),
  /* Galaxy Tab S4 paysage (1138×712) */
  (orientation: landscape) and (min-width: 1133px) and (max-width: 1143px) and (min-height: 707px) and (max-height: 717px),
  /* Galaxy Tab S7/8/9 portrait (753×1205) */
  (orientation: portrait) and (min-width: 748px) and (max-width: 758px) and (min-height: 1200px) and (max-height: 1210px),
  /* Galaxy Tab S7/8/9 paysage (1205×753) */
  (orientation: landscape) and (min-width: 1200px) and (max-width: 1210px) and (min-height: 748px) and (max-height: 758px),
  /* Galaxy Tab S7+/8+ portrait (870×1389) */
  (orientation: portrait) and (min-width: 865px) and (max-width: 875px) and (min-height: 1384px) and (max-height: 1394px),
  /* Galaxy Tab S7+/8+ paysage (1389×870) */
  (orientation: landscape) and (min-width: 1384px) and (max-width: 1394px) and (min-height: 865px) and (max-height: 875px),
  /* Galaxy Tab A8 portrait (800×1280) */
  (orientation: portrait) and (min-width: 795px) and (max-width: 805px) and (min-height: 1275px) and (max-height: 1285px),
  /* Galaxy Tab A8 paysage (1280×800) */
  (orientation: landscape) and (min-width: 1275px) and (max-width: 1285px) and (min-height: 795px) and (max-height: 805px),
  /* Surface Pro 8/9 portrait (912×1368) */
  (orientation: portrait) and (min-width: 907px) and (max-width: 917px) and (min-height: 1363px) and (max-height: 1373px),
  /* Surface Pro 8/9 paysage (1368×912) */
  (orientation: landscape) and (min-width: 1363px) and (max-width: 1373px) and (min-height: 907px) and (max-height: 917px)
{
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions .btn-primary,
  body.woocommerce-shop.woocommerce-shop section.featured .featured-actions .btn-ghost {
    font-size: 12px !important;
  }
  body.woocommerce-shop .catalog .book-cta {
    font-size: 11px !important;
  }
}

/* Orchestration reveal — CSS pur, animations keyframes (Ghislain 2026-06-11) */
@keyframes catalog-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* (1) Page-header instantane (jamais cache) */
body:is(.woocommerce.archive, .page-id-150) .page-header,
body:is(.woocommerce.archive, .page-id-150) .page-header.reveal,
body:is(.woocommerce.archive, .page-id-150) .page-header .reveal,
body.woocommerce-shop .page-header,
body.woocommerce-shop .page-header.reveal,
body.woocommerce-shop .page-header .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* (2) Featured : fade-in 0 -> 500ms */
body.woocommerce.archive section.featured,
body.woocommerce-shop section.featured {
  opacity: 0;
  animation: catalog-fade-in 0.5s ease-out 0s forwards !important;
}
/* Enfants featured : neutraliser leur reveal individuel pour eviter cascade croisee */
body.woocommerce.archive section.featured .reveal,
body.woocommerce-shop section.featured .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* (3) Sections sous featured (catalog-section-title + section.catalog + authors + reassurance + trust-features)
       fade-in 700 -> 1100ms (apres featured fini).
       Selecteurs avec .reveal AUSSI pour battre l'override .reveal.is-visible. */
body.woocommerce.archive section.catalog,
body.woocommerce.archive section.authors,
body.woocommerce.archive .reassurance,
body.woocommerce.archive .trust-features,
body.woocommerce.archive .catalog-section-title,
body.woocommerce.archive .catalog-section-title.reveal,
body.woocommerce.archive .catalog-section-title.reveal.is-visible,
body.woocommerce-shop section.catalog,
body.woocommerce-shop section.authors,
body.woocommerce-shop .reassurance,
body.woocommerce-shop .trust-features,
body.woocommerce-shop .catalog-section-title,
body.woocommerce-shop .catalog-section-title.reveal,
body.woocommerce-shop .catalog-section-title.reveal.is-visible {
  opacity: 0;
  animation: catalog-fade-in 0.4s ease-out 0.7s forwards !important;
}
/* Enfants .reveal des sections du dessous : neutraliser leur cascade interne
   (ils heriteront de l'opacity du parent qui anime). */
body.woocommerce.archive section.catalog .reveal,
body.woocommerce.archive section.authors .reveal,
body.woocommerce.archive .reassurance .reveal,
body.woocommerce.archive .reassurance-item.reveal,
body.woocommerce.archive .catalog-section-title .reveal,
body.woocommerce-shop section.catalog .reveal,
body.woocommerce-shop section.authors .reveal,
body.woocommerce-shop .reassurance .reveal,
body.woocommerce-shop .reassurance-item.reveal,
body.woocommerce-shop .catalog-section-title .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   <= 585px — Ghislain 2026-06-11
   1. .page-header padding-top force a 163px (eyebrow CATALOGUE alignedY
      avec breadcrumb /panier/ step actif center ~Y173).
   2. .catalog-section-title .page-header-ornament before/after flex
      passe de 220px a 60px (clone visuel du separateur sous H1).
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 584px) {
  body:is(.woocommerce.archive, .page-id-150) .page-header,
  body.woocommerce-shop .page-header,
  .page-template-page-catalogue .page-header {
    padding-top: 80px !important;
  }
  .catalog-section-title .page-header-ornament::before,
  .catalog-section-title .page-header-ornament::after {
    flex: 0 0 28vw !important;
  }
  body.woocommerce-shop.woocommerce-shop section.catalog {
    padding-top: 46px !important;
  }
  .page-header-eyebrow {
    font-size: 10px !important;
  }
  .page-header-ornament span {
    width: 5px !important;
    height: 5px !important;
  }
}

/* freeze-btn-ghost-catalogue-align */
/* ════════════════════════════════════════════════════════════════════
   Cohérence boutons .btn-ghost sur catalogue : matche le comportement
   home (color rouge marron #8b3a2a au hover/focus), au lieu du gold
   Kadence par défaut sur les liens .woocommerce.
   ════════════════════════════════════════════════════════════════════ */
body.woocommerce-shop button.btn-ghost,
body.woocommerce-shop button.btn-ghost:hover,
body.woocommerce-shop button.btn-ghost:focus,
body.woocommerce-shop button.btn-ghost:focus-visible,
body.woocommerce-shop button.btn-ghost:active,
body.woocommerce-shop a.btn-ghost,
body.woocommerce-shop a.btn-ghost:hover,
body.woocommerce-shop a.btn-ghost:focus,
body.woocommerce-shop a.btn-ghost:focus-visible,
body.woocommerce-shop a.btn-ghost:active,
body.woocommerce-shop a.btn-blanc,
body.woocommerce-shop a.btn-blanc:hover {
    color: rgb(139, 58, 42) !important;
}


/* ════════════════════════════════════════════════════════════════════
   Source : eds_snippet 11669
   */
/* Catalogue — featured & catalog : layout ordi (exclut iPad Pro paysage) */
@media (min-width: 1280px) and (min-aspect-ratio: 1.5/1) {
  body.woocommerce-shop.woocommerce-shop section.featured {
    min-height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 92px !important;
    justify-content: flex-start !important;
    margin-top: 0 !important;
  }
  body.woocommerce-shop.woocommerce-shop section.catalog,
  body.woocommerce-shop.woocommerce-shop .catalog {
    padding-top: 48px !important;
  }
}


/* ════════════════════════════════════════════════════════════════════
   Source : eds_snippet 11292
   */
/* Snippet vidé — les règles auto-générées via inspecteur live entraient
   en conflit avec auteur-css (#11285). Tout est désormais géré dans
   auteur-css avec des sélecteurs propres. */

body.archive #main > section.eds-auteur-books-section:nth-of-type(2) > div.eds-auteur-container > div.eds-auteur-books-grid > article.book-card.reveal.eds-auteur-book.is-visible:nth-of-type(1) > div.book-card-text:nth-of-type(2) {
    padding-top: 0px !important;
}

body.archive #main > section.eds-auteur-books-section:nth-of-type(2) > div.eds-auteur-container > div.eds-auteur-books-grid > article.book-card.reveal.eds-auteur-book.is-visible:nth-of-type(2) > div.book-card-text:nth-of-type(2) {
    padding-top: 0px !important;
}

body.archive #main > section.eds-auteur-books-section:nth-of-type(2) > div.eds-auteur-container > div.eds-auteur-books-grid > article.book-card.reveal.eds-auteur-book.is-visible:nth-of-type(4) > div.book-card-text:nth-of-type(2) {
    padding-top: 0px !important;
}

body.archive #main > section.eds-auteur-books-section:nth-of-type(2) > div.eds-auteur-container > div.eds-auteur-books-grid > article.book-card.reveal.eds-auteur-book.is-visible:nth-of-type(3) > div.book-card-text:nth-of-type(2) {
    padding-top: 0px !important;
}
body.archive #main > section.eds-auteur-hero:nth-of-type(1) {
    padding-top: 150px !important;
}
body.archive #main > section.eds-auteur-hero:nth-of-type(1) > div.eds-auteur-container > div.eds-auteur-external:nth-of-type(2) {
    margin-top: 128px !important;
    margin-bottom: 16px !important;
}
body.archive #main > section.eds-auteur-hero:nth-of-type(1) > div.eds-auteur-container > div.eds-auteur-grid:nth-of-type(1) > div.eds-auteur-photo-col:nth-of-type(2) > div.eds-auteur-photo-frame > img {
    margin-top: 16px !important;
}


/* ════════════════════════════════════════════════════════════════════
   Cohérence boutons .btn-primary rouges sur catalogue : matche home.
   Sur featured (livre vedette) → color ivoire EDS.
   Sur auteur-banner (Fiche auteur) → color blanc pur (au lieu du gold
   Kadence par défaut sur les liens .woocommerce).
   ════════════════════════════════════════════════════════════════════ */
body.woocommerce-shop .featured button.btn-primary,
body.woocommerce-shop .featured button.btn-primary:hover,
body.woocommerce-shop .featured button.btn-primary:focus,
body.woocommerce-shop .featured button.btn-primary:focus-visible,
body.woocommerce-shop .featured button.btn-primary:active,
body.woocommerce-shop .featured a.btn-primary,
body.woocommerce-shop .featured a.btn-primary:hover,
body.woocommerce-shop .featured a.btn-primary:focus,
body.woocommerce-shop .featured a.btn-primary:focus-visible,
body.woocommerce-shop .featured a.btn-primary:active {
    color: rgb(255, 249, 239) !important;
}

body.woocommerce-shop .auteur-banner-actions a.btn-primary,
body.woocommerce-shop .auteur-banner-actions a.btn-primary:hover,
body.woocommerce-shop .auteur-banner-actions a.btn-primary:focus,
body.woocommerce-shop .auteur-banner-actions a.btn-primary:focus-visible,
body.woocommerce-shop .auteur-banner-actions a.btn-primary:active,
body.woocommerce-shop .auteur-banner-actions button.btn-primary,
body.woocommerce-shop .auteur-banner-actions button.btn-primary:hover {
    color: rgb(255, 255, 255) !important;
}


/* Cohérence rendu hover bouton featured catalogue :
   force une layer compositor GPU permanente sur .featured-actions
   pour que le texte du bouton soit rasterized une fois et bouge
   solidairement avec le button lors du translateY(-1px) hover. */
body.woocommerce-shop section.featured .reveal.featured-actions,
body.woocommerce.archive section.featured .reveal.featured-actions {
    transform: translateZ(0) !important;
}
body.woocommerce-shop section.featured button.btn-primary,
body.woocommerce.archive section.featured button.btn-primary {
    will-change: transform !important;
    transform: translateZ(0);
    backface-visibility: hidden;
}
body.woocommerce-shop section.featured button.btn-primary:hover,
body.woocommerce.archive section.featured button.btn-primary:hover {
    transform: translate3d(0, -1px, 0);
}
/* État repos du ::before : transition étendue à background-color pour
   permettre la transition au release (sans delay), durée + ease alignés sur
   filter / box-shadow existants. */
body.woocommerce-shop section.featured button.btn-primary::before,
body.woocommerce.archive section.featured button.btn-primary::before {
    transition: filter 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out !important;
}
/* Au hover : filter brightness 1.06 (theme) retiré → anime sur CPU = désynchro
   perçue. Remplacé par background-color équivalent rgb(147,61,45) (= rgb(139,58,42) × 1.06).
   S'interpole en GPU, solidaire du transform du bouton. Delay 0.15s identique
   à toutes les autres transitions du .btn:hover::before. */
body.woocommerce-shop section.featured button.btn-primary:hover::before,
body.woocommerce.archive section.featured button.btn-primary:hover::before {
    filter: none !important;
    background-color: rgb(147, 61, 45) !important;
    transition: filter 0.3s ease-in-out 0.15s, box-shadow 0.3s ease-in-out 0.15s, background-color 0.3s ease-in-out 0.15s !important;
}

/* Quand le bouton featured passe en .is-loading ou .is-added, masquer
   instantanément le texte original ("Ajouter au panier") pour éviter qu'il ne
   se superpose au ::after "Ajout…" / "Ajouté ✓". Spec plus haute que l'override
   color ivoire featured. */
body.woocommerce-shop .featured button.btn-primary.is-loading,
body.woocommerce-shop .featured button.btn-primary.is-added,
body.woocommerce.archive .featured button.btn-primary.is-loading,
body.woocommerce.archive .featured button.btn-primary.is-added {
    color: transparent !important;
    transition: color 0s !important;
}

/* === iPad Pro 11 paysage (1194x834) — container catalog "Autres titres" centré.
   Override la règle coarse max-width: 1200 + margin-right: 15 qui collait le
   container au bord gauche en iPad. */
@media (orientation: landscape) and (min-width: 1190px) and (max-width: 1198px) and (min-height: 830px) and (max-height: 838px) {
  body.woocommerce-shop.woocommerce-shop .catalog > .container {
    max-width: 1090px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Catalogue archive — cards stack vertical "design home" : pitch bordé top/bottom
   (au lieu de left), eyebrow en tête, alignement centré. Range <=1080 pour couvrir
   tablette portrait. Porté depuis snippet 11284 TEMP-PATCH-catalogue-card-vertical. */
@media (max-width: 1080px) {
  body.woocommerce-shop .catalog .book-card { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 0 !important; }
  body.woocommerce-shop .catalog .book-card .book-cover { order: 0 !important; width: 200px !important; max-width: 200px !important; margin: 0 0 26px !important; }
  body.woocommerce-shop .catalog .book-card .book-card-text { display: contents !important; }
  body.woocommerce-shop .catalog .book-card .book-eyebrow { order: -1 !important; margin-bottom: 24px !important; text-align: center !important; }
  body.woocommerce-shop .catalog .book-card .book-title { text-align: center !important; margin: 5px 0 0 !important; padding-bottom: 5px !important; }
  body.woocommerce-shop .catalog .book-card .book-author { text-align: center !important; margin: 6px 0 auto !important; }
  body.woocommerce-shop .catalog .book-card .book-extrait { text-align: center !important; border-left: 0 !important; border-top: 0.8px solid rgba(184,146,74,0.3) !important; border-bottom: 0.8px solid rgba(184,146,74,0.3) !important; padding: 10px 0 !important; margin: 10px auto !important; max-width: 92% !important; }
  body.woocommerce-shop .catalog .book-card .book-price { text-align: center !important; margin: auto 0 0 !important; }
  body.woocommerce-shop .catalog .book-card .btn { align-self: center !important; margin-top: 16px !important; }
}

/* Catalogue archive — auteur-banner responsive 586-980 (tablette portrait).
   Porté depuis snippet 11284 TEMP-PATCH-catalogue-auteur-banner. */
@media (max-width: 980px) and (min-width: 586px) {
  body.woocommerce-shop .auteur-banner { gap: clamp(22px, calc(22px + (100vw - 586px) * 0.0659), 48px) !important; align-items: center !important; }
  body.woocommerce-shop .auteur-banner-name { font-size: 28px !important; line-height: 1.05 !important; letter-spacing: -0.2px !important; margin: 0 0 clamp(4px, calc(4px + (100vw - 586px) * 0.01266), 9px) !important; }
  body.woocommerce-shop .auteur-banner-tagline { font-size: 20px !important; line-height: 1.2 !important; margin: 0 0 clamp(7px, calc(7px + (100vw - 586px) * 0.01772), 14px) !important; }
  body.woocommerce-shop .auteur-banner-bio { font-size: clamp(13px, calc(13px + (100vw - 586px) * 0.005063), 15px) !important; line-height: 1.4 !important; margin: 0 0 clamp(10px, calc(10px + (100vw - 586px) * 0.02025), 18px) !important; }
  body.woocommerce-shop .auteur-banner-actions { gap: clamp(10px, calc(10px + (100vw - 586px) * 0.01013), 14px) !important; flex-direction: row !important; }
  body.woocommerce-shop .auteur-banner-actions .btn { font-size: 11px !important; padding: 0.5em 2.3em !important; min-height: 38px !important; }
}

/* Curl tactile sur covers catalog (catalogue archive) : la classe .is-curled
   posee en JS au 1er tap ouvre le curl ; le book-stage devient non-cliquable
   sauf cover-hit-area (2e tap = navigation). Scope (hover: none) pour couvrir
   tablettes paysage et tous écrans tactiles. */
@media (hover: none) {
  body.woocommerce-shop .catalog .book-card.is-curled .book-stage .hole {
    opacity: 1 !important; transform: scale(1) !important;
    transition: transform 0.75s cubic-bezier(0.22,0.9,0.3,1) 0.15s, opacity 0.12s linear 0.15s !important;
  }
  body.woocommerce-shop .catalog .book-card.is-curled .curl {
    opacity: 1 !important; transform: scale(1) !important;
    transition: transform 0.75s cubic-bezier(0.22,0.9,0.3,1) 0.15s, opacity 0.12s linear 0.15s !important;
  }
  body.woocommerce-shop .catalog .book-card.is-curled .book-stage,
  body.woocommerce-shop .catalog .book-card.is-curled .book-stage > rect,
  body.woocommerce-shop .catalog .book-card.is-curled .book-stage > image,
  body.woocommerce-shop .catalog .book-card.is-curled .book-stage > text { pointer-events: none !important; }
  body.woocommerce-shop .catalog .book-card.is-curled .cover-hit-area { pointer-events: all !important; cursor: pointer !important; }
}