/* ════════════════════════════════════════════════════════════════════
   Source : eds_snippet 11283
   */
/* Snippet auto-créé pour home-css */

body.home-front-page #contact-form > div.form-submit:nth-of-type(3) {
    margin-top: 28px !important;
}

body.home-front-page #contact-form {
    padding-bottom: 28px !important;
}
body.home-front-page #contact-form > div.form-submit:nth-of-type(3) > button.btn.btn-primary {
    line-height: 1.6 !important;
}

/* Bio auteurs : ancienne valeur desktop (15px), desormais en specificite
   normale + responsive plus bas (les regles nth-of-type ultra-specifiques
   ont ete retirees pour permettre la reduction fluide sous 981). */
body.home-front-page .auteur-banner-bio, body.woocommerce-shop .auteur-banner-bio { font-size: 15px !important; }

/* Intro contact : ancienne valeur desktop (15px) en specificite normale
   (la regle ultra-specifique #contact > ... > p.contact-intro a ete retiree
   pour permettre les overrides responsive sous 981). */
body.home-front-page .contact-intro { font-size: 15px !important; }

/* Titre "Nous contacter" : TOUJOURS la meme taille que "Les plumes"
   (.authors-title = var(--fs-3xl), puis 36px sous 585). */
body.home-front-page .contact-title { font-size: var(--fs-3xl) !important; }

/* Couverture featured — suppression de la "ligne claire" sous la couv.
   Cause (isolee par mutation live) : la 3e couche d'ombre, tres nette
   (drop-shadow -7px 10px 4px), concentre sa masse sombre ~10px SOUS le
   bord ; le ruban juste au bord reste clair et tranche sur la brique
   sombre -> fausse "ligne claire". Fix : on adoucit le flou de cette
   seule couche (4 -> 10px), offsets/teintes inchanges. Seam supprime,
   ombre toujours franche et ancree. */
body.home-front-page .featured .book-cover, body.woocommerce-shop .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 10px rgba(42,20,8,.315)) !important;
}

/* Couvertures catalogue — suppression de la "ligne claire" sous la couv
   (visible surtout sur Bakchich : bas d'image le plus sombre, luminance 25
   vs 245/80/42, ET ombre la plus intense .371). Meme cause que le featured
   (isolee par rig clone + mutation live) : la 3e couche d'ombre tres nette
   (drop-shadow -4px 6px 3px) concentre sa masse ~6px sous le bord et laisse
   un liseré clair au ras du bord, qui tranche sur une couv sombre. Fix : on
   adoucit le flou de cette seule couche (3 -> 10px), offsets/teintes par
   livre inchanges. (Le masque --fade:1px d'origine est conserve.) */
body.home-front-page .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  10px rgba(42,20,8,.242)) !important;
}
body.home-front-page .book-card:nth-child(2) .book-cover,
body.home-front-page .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  10px rgba(42,20,8,.371)) !important;
}
body.home-front-page .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  10px rgba(42,20,8,.324)) !important;
}

/* === Marges laterales = pages auteur ============================
   Les pages auteur capent leur contenu a 1120px (section large) /
   1090px (sections texte). Sur la home, catalog (1200) et reassurance
   (1160) debordaient plus large -> moins d'air a gauche/droite. On les
   ramene a 1120 pour un gouttiere equivalente aux pages auteur.        */
body.home-front-page .catalog > .container, body.woocommerce-shop .catalog > .container { max-width: 1120px !important; }
/* iPad Air paysage (1180-1199) : grille resserree (1090) pour ouvrir marges laterales tout en gardant text col >=290 (Hommes maries 3 lignes preserve). Cover inchangee a 200px. */
/* Galaxy Tab S4 paysage (1138-1179) : decalage leger vers la droite (margin-left auto, margin-right 0) */
@media (min-width: 1133px) and (max-width: 1179px) {
  body.home-front-page .catalog > .container,
  body.woocommerce-shop .catalog > .container {
    max-width: 1090px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}
/* iPad Air paysage (1180-1199) : decalage leger vers la droite */
@media (min-width: 1180px) and (max-width: 1199px) {
  body.home-front-page .catalog > .container,
  body.woocommerce-shop .catalog > .container {
    max-width: 1090px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: 15px !important;
  }
}
/* >=1200 : grille pleine 1120, padding lateral 0 */
@media (min-width: 1200px) {
  body.home-front-page .catalog > .container,
  body.woocommerce-shop .catalog > .container { padding-left: 0 !important; padding-right: 0 !important; }
}
body.home-front-page .reassurance > .container { max-width: 1120px !important; }
/* Bouton catalogue : jamais de retour a la ligne (toujours 1 seule ligne). */
body.home-front-page .catalog .book-card .btn, body.woocommerce-shop .catalog .book-card .btn { white-space: nowrap !important; }

/* ============================================================
   Featured — alignement responsive avec section "Son ouvrage"
   de la page auteur Maruffy. Layout centré horizontalement à
   chaque palier. Paliers : 1280 / 1024 / 880 / 768 / 720 / 685
   / 585 (stack) / 485.
   ============================================================ */
@media (max-width: 1280px) {
  body.home-front-page .featured, body.woocommerce-shop .featured { padding: 96px 0 !important; }
  body.home-front-page .featured .featured-layout, body.woocommerce-shop .featured .featured-layout {
    display: grid !important;
    grid-template-columns: 280px auto !important;
    gap: 56px !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: 920px !important;
    margin: 0 auto !important;
    justify-content: center !important;
  }
  body.home-front-page .featured .featured-title, body.woocommerce-shop .featured .featured-title {
    font-size: 32px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.005em !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
  }
  body.home-front-page .featured .featured-pitch, body.woocommerce-shop .featured .featured-pitch {
    font-size: 18px !important;
    line-height: 1.4 !important;
    margin: 25px 0 !important;
    max-width: 460px !important;
  }
  body.home-front-page .featured .featured-price, body.woocommerce-shop .featured .featured-price {
    font-size: 28px !important;
  }
  body.home-front-page .featured .featured-actions .btn-primary,
  body.woocommerce-shop .featured .featured-actions .btn-primary,
  body.home-front-page .featured .featured-actions .btn-ghost, body.woocommerce-shop .featured .featured-actions .btn-ghost {
    font-size: 12.5px !important;
  }
}

@media (max-width: 1024px) {
  body.home-front-page .featured .featured-title, body.woocommerce-shop .featured .featured-title { font-size: 28px !important; margin-bottom: 0 !important; }
  body.home-front-page .featured .featured-pitch, body.woocommerce-shop .featured .featured-pitch { font-size: 16px !important; margin-top: 20px !important; margin-bottom: 20px !important; }
  body.home-front-page .featured .featured-price, body.woocommerce-shop .featured .featured-price { font-size: 24px !important; }
  body.home-front-page .featured .featured-eyebrow, body.woocommerce-shop .featured .featured-eyebrow { font-size: 9.5px !important; }
  body.home-front-page .featured .featured-actions .btn-primary,
  body.woocommerce-shop .featured .featured-actions .btn-primary,
  body.home-front-page .featured .featured-actions .btn-ghost, body.woocommerce-shop .featured .featured-actions .btn-ghost { font-size: 12px !important; }
}

@media (max-width: 880px) {
  body.home-front-page .featured .featured-layout, body.woocommerce-shop .featured .featured-layout {
    grid-template-columns: 240px auto !important;
    gap: 56px !important;
    width: fit-content !important;
    max-width: 760px !important;
    margin: 0 auto !important;
  }
  body.home-front-page .featured .book-cover, body.woocommerce-shop .featured .book-cover {
    width: 240px !important;
    max-width: 240px !important;
    margin: 0 !important;
  }
  body.home-front-page .featured .featured-title, body.woocommerce-shop .featured .featured-title { font-size: 26px !important; }
  body.home-front-page .featured .featured-pitch, body.woocommerce-shop .featured .featured-pitch { font-size: 15px !important; margin-top: 18px !important; margin-bottom: 18px !important; line-height: 1.4 !important; }
  body.home-front-page .featured .featured-price, body.woocommerce-shop .featured .featured-price { font-size: 22px !important; }
  body.home-front-page .featured .featured-eyebrow, body.woocommerce-shop .featured .featured-eyebrow { font-size: 9px !important; }
  body.home-front-page .featured .featured-actions .btn-primary,
  body.woocommerce-shop .featured .featured-actions .btn-primary,
  body.home-front-page .featured .featured-actions .btn-ghost, body.woocommerce-shop .featured .featured-actions .btn-ghost { font-size: 11px !important; }
}

@media (max-width: 768px) {
  body.home-front-page .featured > .container, body.woocommerce-shop .featured > .container {
    width: 80vw !important;
    max-width: 80vw !important;
    margin: 0 auto !important;
    padding-inline: 0 !important;
  }
  body.home-front-page .featured .featured-layout, body.woocommerce-shop .featured .featured-layout {
    grid-template-columns: clamp(140px, calc(28.37vw + 2.1px), 220px) auto !important;
    gap: 36px !important;
    width: fit-content !important;
    max-width: 720px !important;
    margin: 0 auto !important;
  }
  body.home-front-page .featured .book-cover, body.woocommerce-shop .featured .book-cover {
    width: clamp(140px, calc(28.37vw + 2.1px), 220px) !important;
    max-width: clamp(140px, calc(28.37vw + 2.1px), 220px) !important;
  }
}

@media (max-width: 720px) {
  body.home-front-page .featured .featured-layout, body.woocommerce-shop .featured .featured-layout { text-align: left !important; justify-items: stretch !important; }
  body.home-front-page .featured .featured-text, body.woocommerce-shop .featured .featured-text { text-align: left !important; }
}

@media (max-width: 685px) {
  body.home-front-page .featured > .container, body.woocommerce-shop .featured > .container {
    width: 85vw !important;
    max-width: 85vw !important;
  }
  body.home-front-page .featured, body.woocommerce-shop .featured { padding-top: 32px !important; padding-bottom: 54px !important; }
  body.home-front-page .featured .featured-layout, body.woocommerce-shop .featured .featured-layout {
    grid-template-columns: 200px auto !important;
    gap: 20px !important;
    width: fit-content !important;
    max-width: 560px !important;
    margin: 0 auto !important;
  }
  body.home-front-page .featured .book-cover, body.woocommerce-shop .featured .book-cover {
    width: 185px !important;
    max-width: 185px !important;
  }
  body.home-front-page .featured .featured-title, body.woocommerce-shop .featured .featured-title { font-size: 27px !important; margin: 0 0 8px !important; }
  body.home-front-page .featured .featured-pitch, body.woocommerce-shop .featured .featured-pitch { font-size: 16px !important; margin: 8px 0 10px !important; }
  body.home-front-page .featured .featured-price, body.woocommerce-shop .featured .featured-price { font-size: 23px !important; margin: 0 0 10px !important; }
  body.home-front-page .featured .featured-eyebrow, body.woocommerce-shop .featured .featured-eyebrow { font-size: 9px !important; margin-bottom: 8px !important; }
  body.home-front-page .featured .featured-actions .btn-primary,
  body.woocommerce-shop .featured .featured-actions .btn-primary,
  body.home-front-page .featured .featured-actions .btn-ghost, body.woocommerce-shop .featured .featured-actions .btn-ghost { font-size: 11px !important; }
}

/* === Stack à 585 (= Maruffy ouvrage) ============================ */
@media (max-width: 585px) {
  /* Air hero -> badge fortement reduit : bord dechire -> badge ~66 -> ~24px. */
  body.home-front-page .hero { padding-bottom: 16px !important; }
  body.home-front-page .featured, body.woocommerce-shop .featured { padding-top: 8px !important; }
  /* Couverture + badge eyebrow : apparition immediate sur mobile, sans fade
     reveal ni flash lazy (l'image est aussi forcee en eager via snippet JS). */
  html.js-ready body.home-front-page .featured .book-cover.reveal,
  html.js-ready body.woocommerce-shop .featured .book-cover.reveal,
  html.js-ready body.home-front-page .featured .featured-eyebrow.reveal, html.js-ready body.woocommerce-shop .featured .featured-eyebrow.reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* (Marges laterales : gerees par le bloc 80vw en fin de fichier, scope
     <=585 uniquement, meme valeur que .eds-auteur-container mobile.) */
  body.home-front-page .featured .featured-layout, 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.home-front-page .featured .featured-text, body.woocommerce-shop .featured .featured-text { display: contents !important; }
  /* Ordre stack (cover-first) : eyebrow → couverture → titre → auteur → pitch → prix → CTA.
     Le titre passe SOUS la couverture (demande Ghislain). */
  body.home-front-page .featured .featured-eyebrow, 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.home-front-page .featured .book-cover, 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.home-front-page .featured .featured-title, 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.home-front-page .featured .featured-author, 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.home-front-page .featured .featured-pitch, 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;
    /* Police = descriptions catalogue (16px). Le <br> est retire en JS
       (snippet 11374) sous 585 -> flux naturel : 3 lignes tant que possible
       (>= ~345px de viewport), puis 4 lignes. Plafond 340px : evite de tomber
       a 2 lignes vers le haut de la plage. */
    font-size: 16px !important;
    line-height: 1.25 !important;
    text-wrap: balance !important;
  }
  body.home-front-page .featured .featured-price, 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.home-front-page .featured .featured-actions, 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.home-front-page .featured .featured-actions .btn-primary,
  body.woocommerce-shop .featured .featured-actions .btn-primary,
  body.home-front-page .featured .featured-actions .btn-ghost, body.woocommerce-shop .featured .featured-actions .btn-ghost {
    font-size: 12px !important;
    padding: 1em 1.8em !important;
  }
}

@media (max-width: 485px) {
  body.home-front-page .featured .featured-title, body.woocommerce-shop .featured .featured-title { font-size: 25px !important; margin: 5px 0 0 !important; }
  body.home-front-page .featured .featured-price, body.woocommerce-shop .featured .featured-price { font-size: 23px !important; margin: 0 !important; }
  body.home-front-page .featured .featured-eyebrow, body.woocommerce-shop .featured .featured-eyebrow { font-size: 9px !important; margin: 0 0 24px !important; }
  body.home-front-page .featured .featured-actions .btn-primary, body.woocommerce-shop .featured .featured-actions .btn-primary { font-size: 11px !important; padding: 11px 19.8px !important; }
}

/* ============================================================
   Reassurance — equilibre vertical optique (site-wide, pas home-only)
   Bug d'origine : margin: 4px sur .reassurance-icon ajoutait 4px au-dessus
   sans compensation en bas => air au-dessus 72 / en-dessous 68 a 1366.
   Fix : zero le margin-top de l'icone + biais leger -4/+4 sur section
   padding pour suivre le centrage optique (icone lourde s'ancre au haut,
   texte leger respire en bas). Air final : ~64 dessus / ~72 dessous.
   Applique toutes tailles d'ecran confondues, toutes pages.
   ============================================================ */
.reassurance {
  padding-top: 32px !important;
  padding-bottom: 40px !important;
}
.reassurance-icon {
  margin-top: 0 !important;
}

/* ============================================================
   Reassurance — single-line titres entre 721 et 1080
   Sans override, padding clamp(1rem,3vw,2rem) = 30.9px a 1030 viewport,
   le titre Cormorant 22px "Titres toujours disponibles" (244px) wrap a
   244px dispo. On reduit le padding lateral pour gagner ~20px d'air.
   Borne basse 721 : sous 720 le grid passe a 1 colonne (full width).
   ============================================================ */
/* Sous 1080, tous les titres passent uniformement sur 2 lignes
   (au lieu d'un seul wrap inegal). max-width force le wrap des 3,
   text-wrap: balance equilibre les lignes. Layout 3-col conserve,
   stack 1-col reste a 720 (landing4 default). */
@media (max-width: 1080px) and (min-width: 721px) {
  .reassurance-title {
    max-width: 15ch;
    margin-inline: auto;
    text-wrap: balance;
  }
}
/* ipad mini paysage (1024) inclus : reduire padding item pour garder
   le texte sur 1 ligne (sinon content 244 = naturel max -> wrap sous-pixel). */
@media (max-width: 1080px) and (min-width: 1024px) {
  .reassurance-item {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}
/* Sous 1024 (< ipad mini paysage) : texte passe sur 2 lignes
   balancees, line-height resserre 1.55, margin-top 8px. */
@media (max-width: 1023.98px) and (min-width: 721px) {
  .reassurance-text {
    max-width: 22ch;
    margin-inline: auto;
    text-wrap: balance;
    line-height: 1.55;
    margin-top: 8px;
  }
}

/* ============================================================
   Fade-in featured section apres apparition complete du hero
   Timeline hero : eyebrow .15s, h1 .4s, sub1 .6s, sub2 .8s, CTA 1.0s
   (toutes 1s duree). Dernier hero element entierement visible a 2.0s.
   Featured commence donc a 2.0s, duree 1s pour rester dans le rythme.
   Reutilise fadeUp (declare dans landing4.css ligne 591).
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  body.home-front-page .featured, body.woocommerce-shop .featured {
    opacity: 0;
    transform: translateY(18px);
    animation: fadeUp 1s cubic-bezier(.2,.8,.2,1) 2s forwards;
  }
}

/* ============================================================
   3 PAYSAGES iPad (mini ancien 1024, mini recent 1133, iPad Air 1180)
   Design unifie : hero CLASSIQUE plein ecran + banniere Hero.webp
   (du child theme) + featured padding-top reduit pour reveler le
   genre+titre du livre featured au bas du viewport au load.
   Borne max-height 830 exclut laptops (typique 600-800h... mais beaucoup
   d'ultraportables <=900). Borne max-width 1185 exclut iPad Pro 11"
   (1194×834) qui garde son design "card centree" via MQ dediee.
   ============================================================ */
@media (orientation: landscape) and (min-width: 1024px) and (max-width: 1185px) and (max-height: 830px) {
  /* Banniere unifiee : Hero.webp du child theme (plein ecran classique). */
  body.home-front-page.home-front-page .hero-inner {
    background-image:
      radial-gradient(ellipse 50% 43% at 20% 50%,
        rgba(240,235,227,0.82) 0%,
        rgba(240,235,227,0.82) 35%,
        rgba(240,235,227,0.476) 57%,
        rgba(240,235,227,0.18) 73%,
        rgba(240,235,227,0) 88%),
      url("https://editionsdusentin.com/wp-content/themes/kadence-sentin-child/assets/Hero.webp") !important;
  }
  /* Featured padding-top : revele eyebrow+titre du livre featured en bas
     du viewport au load (peek "il y a un livre en dessous"). Cible : air
     sous titre ~13px. Spec (0,3,1) > iPad Pro MQ (0,2,1) qui matche aussi
     1180×820 et sinon impose padding 0. */
  body.home-front-page.home-front-page .featured, body.woocommerce-shop.woocommerce-shop .featured {
    padding-top: 4px !important;
    padding-bottom: 0 !important;
  }
}
/* Sub-overrides padding-top pour aligner le titre featured a vh-13 :
   - 1024 : hero classique = 466h, padding-top 126
   - 1180 : hero classique = 517h, padding-top 215 (l'iPad Pro MQ matche
     aussi 1180 donc spec doit etre >= 0,3,1) */
@media (orientation: landscape) and (min-width: 1024px) and (max-width: 1099px) and (max-height: 800px) {
  body.home-front-page.home-front-page .featured, body.woocommerce-shop.woocommerce-shop .featured { padding-top: 126px !important; }
}
@media (orientation: landscape) and (min-width: 1141px) and (max-width: 1185px) and (max-height: 830px) {
  body.home-front-page.home-front-page .featured, body.woocommerce-shop.woocommerce-shop .featured { padding-top: 56px !important; }
}

/* ============================================================
   iPad Pro paysage (11" 1194x834 + 12.9" 1366x1024 + iPad Air 13)
   - hero compresse a 50vh (bottom + drop-shadow)
   - featured occupe la moitie basse, carte centree verticalement
   MQ : min-aspect 13/10 + max-aspect 15/10 exclut laptops 16/9 + 16/10.
   ============================================================ */
@media (orientation: landscape) and (pointer: coarse) and (min-width: 1100px) and (max-width: 1399px) and (min-height: 830px) and (min-aspect-ratio: 13/10) and (max-aspect-ratio: 15/10) {
  /* Hero : section padding-block annule (section { padding-block } base
     ajoutait ~72px) + heroInner = 50vh pile. Shadow 24px deborde dans
     featured (meme bg cream-page, transition naturelle).                  */
  body.home-front-page .hero {
    padding-top: 80px !important;
    padding-bottom: 0 !important;
  }
  body.home-front-page .hero-inner {
    /* Hauteur calee sur l'aspect-ratio natif de Hero-1366.webp (1366x512)
       pour que la dechirure du bas reste visible. */
    min-height: 0 !important;
    aspect-ratio: 1366 / 512 !important;
    padding-top: 44px !important;
    padding-bottom: 24px !important;
    background-image:
      radial-gradient(ellipse 50% 43% at 20% 50%,
        rgba(240,235,227,0.82) 0%,
        rgba(240,235,227,0.82) 35%,
        rgba(240,235,227,0.476) 57%,
        rgba(240,235,227,0.18) 73%,
        rgba(240,235,227,0) 88%),
      url("https://editionsdusentin.com/wp-content/uploads/2026/05/Hero-1366.webp") !important;
  }

  /* Featured : occupe l'espace restant sous le hero (hero = 80px section
     padding + heroInner aspect 1366/512). Flex centre vertical pour air. */
  body.home-front-page .featured, body.woocommerce-shop .featured {
    min-height: calc(100vh - 80px - 100vw * 512 / 1366) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  body.home-front-page .featured > .container, body.woocommerce-shop .featured > .container {
    width: 100% !important;
  }
  /* Carte compacte pour laisser air haut/bas (carte integralement visible).
     translateY(-12px) la remonte de 12px par rapport au centrage flex. */
  body.home-front-page .featured .featured-layout, body.woocommerce-shop .featured .featured-layout {
    display: grid !important;
    grid-template-columns: 220px auto !important;
    gap: 40px !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: 860px !important;
    margin: 0 auto !important;
    transform: translateY(-12px) !important;
  }
  body.home-front-page .featured .book-cover, body.woocommerce-shop .featured .book-cover {
    width: 220px !important;
    max-width: 220px !important;
  }
  /* Catalogue : padding-top fixe 30px (demande Ghislain 2026-06-01) — la
     grille n'est plus centree verticalement, elle se cale en haut de section.
     padding-bottom garde le calc pour l'air sous la grille.                  */
  body.home-front-page .catalog, body.woocommerce-shop .catalog {
    padding-top: 30px !important;
    padding-bottom: calc((100vh - 687px) / 2) !important;
  }
  /* Conteneur + grille elargis (1120->1200, gap 54->64) pour que la colonne
     texte des cartes passe a ~304px -> la description longue ("Les hommes
     maries") tient sur 3 lignes (etait 4). Verifie live @1366 : text 304,
     3 lignes. Scope iPad Pro paysage uniquement (desktop garde 1120).        */
  body.home-front-page .catalog > .container, body.woocommerce-shop .catalog > .container { max-width: 1200px !important; }
  body.home-front-page .catalog .catalog-grid, body.woocommerce-shop .catalog .catalog-grid {
    max-width: 1200px !important;
    column-gap: 64px !important;
  }
  /* Badge eyebrow : padding 0.36em + line-height 2.3 = ratio total 3.02
     (cohérent avec catalogue, page produit, Maruffy à toutes les MQs). */
  body.home-front-page .featured .featured-eyebrow, body.woocommerce-shop .featured .featured-eyebrow {
    padding-top: 0.36em !important;
    padding-bottom: 0.36em !important;
    line-height: 2.3 !important;
  }
  /* Textes resserres pour limiter la hauteur de la colonne text */
  body.home-front-page .featured .featured-title, body.woocommerce-shop .featured .featured-title {
    font-size: 31px !important;
    line-height: 1.1 !important;
    margin: 0 0 4px !important;
    padding-bottom: 0 !important;
  }
  body.home-front-page .featured .featured-author, body.woocommerce-shop .featured .featured-author {
    margin: 0 0 8px !important;
    padding-bottom: 0 !important;
  }
  body.home-front-page .featured .featured-pitch, body.woocommerce-shop .featured .featured-pitch {
    font-size: 15px !important;
    line-height: 1.4 !important;
    margin: 0 0 14px !important;
  }
  body.home-front-page .featured .featured-price, body.woocommerce-shop .featured .featured-price {
    font-size: 22px !important;
    margin: 0 0 14px !important;
  }
  body.home-front-page .featured .featured-actions, body.woocommerce-shop .featured .featured-actions {
    margin-top: 0 !important;
  }
}

/* Sous-palier iPad Pro 11" paysage (1194x834) : viewport plus court +
   hero a aspect-ratio image (= 442px de haut) => featured ne fait que ~312
   donc cover et textes shrunk au max pour preserver l'air haut/bas.
   min-width 1180->1186 (2026-06-01) : EXCLUT iPad Air paysage (1180x820)
   qui tombait a tort dans cette regle compacte (cover 140) alors que le
   bloc 712 (carte cachee 11") ne le rattrapait pas (min-width 1186). L'Air
   retombe desormais dans la bande 1024-1185 (hero plein + carte revelee au
   scroll, cover 280) = etat identique a 1180x819. */
@media (orientation: landscape) and (pointer: coarse) and (min-width: 1186px) and (max-width: 1210px) and (min-height: 820px) and (max-height: 850px) {
  body.home-front-page .featured .featured-layout, body.woocommerce-shop .featured .featured-layout {
    grid-template-columns: 140px auto !important;
    gap: 28px !important;
  }
  body.home-front-page .featured .book-cover, body.woocommerce-shop .featured .book-cover {
    width: 140px !important;
    max-width: 140px !important;
  }
  body.home-front-page .featured .featured-title, body.woocommerce-shop .featured .featured-title { font-size: 20px !important; }
  body.home-front-page .featured .featured-author, body.woocommerce-shop .featured .featured-author { font-size: 12px !important; margin: 0 0 4px !important; }
  body.home-front-page .featured .featured-eyebrow, body.woocommerce-shop .featured .featured-eyebrow { font-size: 9px !important; padding: 0.36em 1.09em !important; }
  body.home-front-page .featured .featured-pitch, body.woocommerce-shop .featured .featured-pitch { font-size: 13px !important; line-height: 1.35 !important; margin: 0 0 10px !important; }
  body.home-front-page .featured .featured-price, body.woocommerce-shop .featured .featured-price { font-size: 18px !important; margin: 0 0 10px !important; }
  body.home-front-page .featured .featured-actions .btn-primary,
  body.woocommerce-shop .featured .featured-actions .btn-primary,
  body.home-front-page .featured .featured-actions .btn-ghost, body.woocommerce-shop .featured .featured-actions .btn-ghost { font-size: 11px !important; padding: 0.7em 1.4em !important; }
  /* Catalogue 11" : grille mesuree a 679px (vs 687 a 12.9). Override padding */
  body.home-front-page .catalog, body.woocommerce-shop .catalog {
    padding-top: calc((100vh - 679px) / 2) !important;
    padding-bottom: calc((100vh - 679px) / 2) !important;
  }
}


/* ============================================================
   AJOUT 2026-05-29 — accueil featured : gestion hauteur viewport
   a 1280 de large (hero plein inchange ; voir 2 cas ci-dessous).
   ============================================================ */

/* --- 1280 x ~800 (laptop 16:10 court) : carte cachee au load ---
   Hero plein conserve (~692px). On pousse la carte sous la ligne de
   flottaison (bande creme = meme bg que le hero -> raccord invisible) ;
   la carte se revele au scroll. pt = 100vh - 660 -> card top ~ 100vh+30. */
@media (min-width: 1200px) and (max-width: 1300px) and (max-height: 850px) and (min-aspect-ratio: 3/2) {
  body.home-front-page .featured, body.woocommerce-shop .featured {
    padding-top: max(96px, calc(100vh - 660px)) !important;
  }
}

/* --- 1280 x 1024 (5:4) : banniere courte Hero-1366 (1366x512) pour
   compresser le hero ; carte featured entiere sous le hero, centree
   verticalement, cover 230px (texte <= cover, ~57px d'air haut/bas). --- */
@media (orientation: landscape) and (min-width: 1100px) and (max-width: 1399px) and (min-height: 950px) and (min-aspect-ratio: 5/4) and (max-aspect-ratio: 13/10) {
  body.home-front-page .hero {
    padding-top: 80px !important;
    padding-bottom: 0 !important;
  }
  body.home-front-page .hero-inner {
    min-height: 0 !important;
    aspect-ratio: 1366 / 512 !important;
    padding-top: 44px !important;
    padding-bottom: 24px !important;
    background-image:
      radial-gradient(ellipse 50% 43% at 20% 50%,
        rgba(240,235,227,0.82) 0%,
        rgba(240,235,227,0.82) 35%,
        rgba(240,235,227,0.476) 57%,
        rgba(240,235,227,0.18) 73%,
        rgba(240,235,227,0) 88%),
      url("https://editionsdusentin.com/wp-content/uploads/2026/05/Hero-1366.webp") !important;
  }
  body.home-front-page .featured, body.woocommerce-shop .featured {
    min-height: calc(100vh - 80px - 100vw * 512 / 1366) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  body.home-front-page .featured > .container, body.woocommerce-shop .featured > .container { width: 100% !important; }
  body.home-front-page .featured .featured-layout, body.woocommerce-shop .featured .featured-layout {
    display: grid !important;
    grid-template-columns: 230px auto !important;
    gap: 44px !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: 880px !important;
    margin: 0 auto !important;
  }
  body.home-front-page .featured .book-cover, body.woocommerce-shop .featured .book-cover {
    width: 230px !important;
    max-width: 230px !important;
  }
  body.home-front-page .featured .featured-eyebrow, body.woocommerce-shop .featured .featured-eyebrow {
    padding-top: 0.36em !important;
    padding-bottom: 0.36em !important;
    line-height: 2.3 !important;
  }
  body.home-front-page .featured .featured-title, body.woocommerce-shop .featured .featured-title {
    font-size: 31px !important;
    line-height: 1.1 !important;
    margin: 0 0 4px !important;
  }
  body.home-front-page .featured .featured-author, body.woocommerce-shop .featured .featured-author { margin: 0 0 8px !important; }
  body.home-front-page .featured .featured-pitch, body.woocommerce-shop .featured .featured-pitch {
    font-size: 16px !important;
    line-height: 1.4 !important;
    margin: 0 0 14px !important;
  }
  body.home-front-page .featured .featured-price, body.woocommerce-shop .featured .featured-price {
    font-size: 24px !important;
    margin: 0 0 14px !important;
  }
  body.home-front-page .featured .featured-actions, body.woocommerce-shop .featured .featured-actions { margin-top: 0 !important; }
}


/* --- iPad paysage court (1024-1185 x <=830 : iPad mini 1024x768,
   iPad mini 6 1133x744, iPad Air/10e gen 1180x820) : hero rempli +
   carte cachee. Hero.webp (1920px hi-res) recadre par cover (cabine
   centrale conservee, bord dechire intact car cover par la hauteur).
   Hero occupe ~100vh - ~50 (reveal creme 45-55px), carte sous la
   flottaison (revelee au scroll). Double-classe pour surcharger les
   peeks l.323/348/351 (spec 0,3,1). --- */
@media (orientation: landscape) and (min-width: 1024px) and (max-width: 1185px) and (max-height: 830px) {
  /* Hero rempli : Hero.webp 1920px recadre par cover (cabine centrale +
     bord dechire conserves). Gradient beige recale verticalement (42%)
     pour suivre le bloc texte agrandi. */
  body.home-front-page.home-front-page .hero .hero-inner {
    min-height: calc(100vh - 165px) !important;
    padding-top: 13.5vh !important;
    background-image:
      radial-gradient(ellipse 52% 46% at 20% 42%,
        rgba(240,235,227,0.85) 0%,
        rgba(240,235,227,0.85) 36%,
        rgba(240,235,227,0.5) 58%,
        rgba(240,235,227,0.18) 74%,
        rgba(240,235,227,0) 89%),
      url("https://editionsdusentin.com/wp-content/themes/kadence-sentin-child/assets/Hero.webp") !important;
  }
  /* Textes hero agrandis (proportions ~ format 1920 : 8% / 6.5% / 1.8% de
     la hauteur banner), ligne 2 calee a ~40% (col entre cretes). vh pour
     scaler 1024/1133/1180. Spec haute pour battre le palier <=1024. */
  body.home-front-page.home-front-page .hero .hero-content .hero-eyebrow { font-size: 1.5vh !important; }
  body.home-front-page.home-front-page .hero .hero-content .hero-h1 { font-size: 6.3vh !important; }
  body.home-front-page.home-front-page .hero .hero-content .hero-sub { font-size: 5.1vh !important; }
  /* Carte cachee sous la flottaison (revelee au scroll). padding-bottom
     pour loger l'ombre portee de la cover (~39px) -> sinon la section
     .catalog (fond creme opaque) la recouvre. */
  body.home-front-page.home-front-page .featured, body.woocommerce-shop.woocommerce-shop .featured {
    padding-top: 70px !important;
    padding-bottom: 96px !important;
  }
}


/* --- Laptop 16:10 court (~1440x900 ; bande 1301-2000 x aspect 8/5 : 1440x900, 1680x1050, 1920x1200) :
   meme principe que les iPad courts. Le hero base est trop court pour ces
   viewports plus hauts -> la carte pointait ~56px sous le hero. On remplit
   le hero (Hero.webp 1920px recadre par cover, cabine + bord dechire
   conserves) ; la carte repasse sous la flottaison (le padding featured
   existant ~80px suffit : hero ~845 + 80 = 925 > 900). padding-top remonte
   le bloc texte pour garder la ligne 2 a ~40% (col entre cretes). Les
   16:9 voisins (1366x768, 1536x864) sont exclus par l'aspect-ratio. --- */
@media (min-width: 1301px) and (max-width: 2000px) and (min-aspect-ratio: 31/20) and (max-aspect-ratio: 17/10) {
  body.home-front-page.home-front-page .hero .hero-inner {
    min-height: calc(100vh - 177px) !important;
    padding-top: 15.5vh !important;
  }
}


/* --- Desktop 16:9 large (~1920x1080 ; bande 1700-2000 x aspect ~16:9) :
   meme remplissage que les autres bandes. A cette taille le hero base
   (~980px) laissait la carte affleurer ~20px sous la flottaison. Hero
   rempli -> carte cachee (revelee au scroll), ligne 2 inchangee a ~40%
   (col entre cretes, identique a la reference base : 40.3 -> 40.4%). Les
   16:9 plus petits (1366x768, 1536x864) sont hors bande (min-width 1700)
   car deja OK (carte cachee nativement). --- */
@media (min-width: 1700px) and (max-width: 2000px) and (min-aspect-ratio: 17/10) and (max-aspect-ratio: 37/20) {
  body.home-front-page.home-front-page .hero .hero-inner {
    min-height: calc(100vh - 177px) !important;
    padding-top: 15.5vh !important;
  }
}


/* --- iPad Pro 11" paysage (~1194x834 ; bande 1186-1240 x <=870) :
   aligne sur les autres iPad courts -> hero rempli (Hero.webp recadre) +
   carte cachee, au lieu du full-card a cover 140px. On neutralise les
   regles iPad Pro full-card (aspect-ratio banniere courte, flex centre)
   et on reutilise le meme remplissage que la bande 1024-1185. Le 12.9"
   (1366x1024) reste en full-card (hors bande, width > 1240). --- */
@media (orientation: landscape) and (min-width: 1186px) and (max-width: 1240px) and (max-height: 870px) {
  body.home-front-page.home-front-page .hero {
    padding-top: 72px !important;
    padding-bottom: 50px !important;
  }
  body.home-front-page.home-front-page .hero .hero-inner {
    aspect-ratio: auto !important;
    min-height: calc(100vh - 165px) !important;
    padding-top: 13.5vh !important;
    padding-bottom: 24px !important;
    background-image:
      radial-gradient(ellipse 52% 46% at 20% 42%,
        rgba(240,235,227,0.85) 0%,
        rgba(240,235,227,0.85) 36%,
        rgba(240,235,227,0.5) 58%,
        rgba(240,235,227,0.18) 74%,
        rgba(240,235,227,0) 89%),
      url("https://editionsdusentin.com/wp-content/themes/kadence-sentin-child/assets/Hero.webp") !important;
  }
  body.home-front-page.home-front-page .hero .hero-content .hero-eyebrow { font-size: 1.5vh !important; }
  body.home-front-page.home-front-page .hero .hero-content .hero-h1 { font-size: 6.3vh !important; }
  body.home-front-page.home-front-page .hero .hero-content .hero-sub { font-size: 5.1vh !important; }
  body.home-front-page.home-front-page .featured, body.woocommerce-shop.woocommerce-shop .featured {
    display: block !important;
    min-height: 0 !important;
    padding-top: 70px !important;
    padding-bottom: 96px !important;
  }
}


/* ============================================================
   C — Refonte portrait (a partir de 834x1194 et en dessous)
   ============================================================ */

/* VOLET 1 — carte featured portrait tablette (586-880) : remontee
   (padding-top 96 -> 48), cover reduite (240 -> 200), badge moins haut
   (line-height resserre), espacements autour de la description reduits. */
@media (min-width: 586px) and (max-width: 880px) {
  body.home-front-page .featured, body.woocommerce-shop .featured { padding-top: 48px !important; }
  body.home-front-page .featured .featured-layout, body.woocommerce-shop .featured .featured-layout {
    grid-template-columns: 240px max-content !important;
    gap: 40px !important;
    width: fit-content !important;
    margin: 0 auto !important;
    justify-content: center !important;
  }
  body.home-front-page .featured .book-cover, body.woocommerce-shop .featured .book-cover { width: 240px !important; max-width: 240px !important; }
  body.home-front-page .featured .featured-eyebrow, body.woocommerce-shop .featured .featured-eyebrow { line-height: 2.3 !important; }
  body.home-front-page .featured .featured-pitch, body.woocommerce-shop .featured .featured-pitch { margin-top: 10px !important; margin-bottom: 10px !important; }
}

/* VOLET 1bis — iPad Pro 12.9" PORTRAIT (1024x1366) — demande Ghislain
   2026-06-01 : featured remonte (padding-top 96->30), catalogue remonte
   (padding-top ~70->20), couvertures des 4 livres du catalogue 200->240.
   Borne 1000-1080 : exclut iPad mini/Air portrait (768/820) et 11" (834),
   cible le seul 12.9" portrait. */
@media (orientation: portrait) and (min-width: 1000px) and (max-width: 1080px) {
  body.home-front-page .featured, body.woocommerce-shop .featured { padding-top: 30px !important; }
  body.home-front-page .catalog, body.woocommerce-shop .catalog { padding-top: 20px !important; }
  /* double-classe pour battre la regle <=1043 (cover 200px, meme specificite
     mais source-order posterieur) -> 240px. */
  body.home-front-page.home-front-page .catalog .book-card .book-cover, body.woocommerce-shop.woocommerce-shop .catalog .book-card .book-cover {
    width: 240px !important;
    max-width: 240px !important;
  }
}

/* VOLET 2 — catalogue en cartes verticales centrees (<=1080), sur le
   modele de la page auteur (cover dessus, texte centre dessous).
   Seuil remonte a 1080 : meme rendu stack iPad mini paysage (1024) sur la
   plage 1044-1080, ou le layout horizontal devenait trop serre. */
@media (max-width: 1080px) {
  body.home-front-page .catalog .book-card, 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.home-front-page .catalog .book-card .book-cover, body.woocommerce-shop .catalog .book-card .book-cover {
    order: 0 !important;
    width: 200px !important;
    max-width: 200px !important;
    margin: 0 0 26px !important;
  }
  /* display:contents -> les enfants du bloc texte deviennent items flex
     de .book-card, ce qui permet de remonter le badge AU-DESSUS de la cover
     (order:-1) comme sur la page auteur. */
  body.home-front-page .catalog .book-card .book-card-text, body.woocommerce-shop .catalog .book-card .book-card-text { display: contents !important; }
  body.home-front-page .catalog .book-card .book-eyebrow, body.woocommerce-shop .catalog .book-card .book-eyebrow { order: -1 !important; margin-bottom: 24px !important; }
  body.home-front-page .catalog .book-card .book-eyebrow, body.woocommerce-shop .catalog .book-card .book-eyebrow { text-align: center !important; }
  body.home-front-page .catalog .book-card .book-title, body.woocommerce-shop .catalog .book-card .book-title { text-align: center !important; margin: 5px 0 0 !important; padding-bottom: 5px !important; }
  body.home-front-page .catalog .book-card .book-author, body.woocommerce-shop .catalog .book-card .book-author { text-align: center !important; margin: 6px 0 auto !important; }
  body.home-front-page .catalog .book-card .book-extrait, 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.home-front-page .catalog .book-card .book-price, body.woocommerce-shop .catalog .book-card .book-price { text-align: center !important; margin: auto 0 0 !important; }
  body.home-front-page .catalog .book-card .btn, body.woocommerce-shop .catalog .book-card .btn { align-self: center !important; margin-top: 16px !important; }
}


/* VOLET 3 — curl au click sur les covers catalogue (tactile, indépendamment
   de la largeur) : la classe .is-curled (posee en JS au 1er tap) ouvre
   le curl ; le book-stage devient non-cliquable sauf la zone cover-hit-area
   (2e tap = navigation). Scope (hover: none) pour couvrir tablettes paysage. */
@media (hover: none) {
  body.home-front-page .catalog .book-card.is-curled .book-stage .hole, 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.home-front-page .catalog .book-card.is-curled .curl, 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.home-front-page .catalog .book-card.is-curled .book-stage,
  body.woocommerce-shop .catalog .book-card.is-curled .book-stage,
  body.home-front-page .catalog .book-card.is-curled .book-stage > rect,
  body.woocommerce-shop .catalog .book-card.is-curled .book-stage > rect,
  body.home-front-page .catalog .book-card.is-curled .book-stage > image,
  body.woocommerce-shop .catalog .book-card.is-curled .book-stage > image,
  body.home-front-page .catalog .book-card.is-curled .book-stage > text,
  body.woocommerce-shop .catalog .book-card.is-curled .book-stage > text { pointer-events: none !important; }
  body.home-front-page .catalog .book-card.is-curled .cover-hit-area, body.woocommerce-shop .catalog .book-card.is-curled .cover-hit-area { pointer-events: all !important; cursor: pointer !important; }
}


/* VOLET 4 — premier ecran portrait tablette (586-880, portrait) : hero
   agrandi ~50vh (Banniere-web2 recadre via cover) + featured ~50vh en
   flex-center (carte centree), catalogue sous la flottaison. Textes hero
   agrandis + repositionnes (ligne 2 ~40%, col entre cretes) + gradient a
   42%. padding-bottom hero a 0 : le BORD DECHIRE devient le vrai bas du
   hero -> air visuel symetrique au-dessus/sous la carte (sinon le
   padding-bottom de 50px gonflait l'air du haut). */
@media (min-width: 586px) and (max-width: 880px) and (orientation: portrait) {
  body.home-front-page.home-front-page .hero { padding-bottom: 0 !important; }
  body.home-front-page.home-front-page .hero .hero-inner {
    min-height: calc(50vh - 49px) !important;
    padding-top: 7vh !important;
    background-image:
      radial-gradient(55% 60% at 25% 42%,
        rgba(240,235,227,0.85) 0%,
        rgba(240,235,227,0.78) 30%,
        rgba(240,235,227,0.45) 55%,
        rgba(240,235,227,0.15) 75%,
        rgba(240,235,227,0) 90%),
      url("https://editionsdusentin.com/wp-content/uploads/2026/02/Banniere-web2.png") !important;
    background-size: cover, cover !important;
  }
  body.home-front-page.home-front-page .hero .hero-content .hero-eyebrow { font-size: 0.82vh !important; }
  body.home-front-page.home-front-page .hero .hero-content .hero-h1 { font-size: 3.0vh !important; }
  body.home-front-page.home-front-page .hero-inner .hero-content { max-width: 68vw !important; }
  body.home-front-page.home-front-page .hero .hero-content .hero-sub { font-size: 3.0vh !important; }
  body.home-front-page.home-front-page .featured, body.woocommerce-shop.woocommerce-shop .featured {
    min-height: calc(50vh + 2px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
}

/* Titre du livre featured toujours un peu plus gros que les titres du
   catalogue (28px). Sous 880 (portrait/phone) le featured tombait a 25-26px
   < 28 -> on le force a 31px. */
@media (max-width: 880px) {
  body.home-front-page.home-front-page .featured .featured-title, body.woocommerce-shop.woocommerce-shop .featured .featured-title { font-size: 31px !important; }
}

/* En mode stack (<=880, cartes verticales) : plus d'air entre les rangees
   (entre le CTA d'une carte et le badge de la rangee suivante). 48 -> 72. */
@media (max-width: 880px) {
  body.home-front-page.home-front-page .catalog .catalog-grid, body.woocommerce-shop.woocommerce-shop .catalog .catalog-grid { row-gap: 72px !important; }
}

/* En mode stack (<=880) : le haut du catalogue est deja place sous la
   flottaison par la section featured -> le gros padding-top de .catalog
   (~56px) est inutile. 10px suffit largement. */
@media (max-width: 880px) {
  body.home-front-page.home-front-page .catalog, body.woocommerce-shop.woocommerce-shop .catalog { padding-top: 10px !important; }
}

/* ============================================================
   SECTION MAISON — compression fluide 641-1080 (2 colonnes)
   Entre ~1080 et 641 (juste avant le semi-stack a 640), le
   design 2 colonnes se comprimait mal : titres valeurs qui se
   touchaient ("Independance/Exigence"), texte sur 5-6 lignes,
   vide central. Leviers (ordre demande) : 1) gap inter-colonnes,
   2) espacement vertical separateurs/blocs, 3) taille caracteres
   + logo en dernier recours. Tout fluide via calc/clamp, valeurs
   = baseline exacte a 1080 (zero saut) -> floor a 641. On ne
   touche a rien sous 640 (semi-stack gere ailleurs).
   ============================================================ */
@media (min-width: 641px) and (max-width: 1080px) {
  /* 1. gap entre les 2 colonnes : 90 (>=830) -> 30 (<=770), garde
     la baseline en haut de plage, ne comprime que la ou ca coince. */
  body.home-front-page .maison-layout {
    column-gap: clamp(30px, calc(100vw - 740px), 90px) !important;
  }
  /* 3. titre + logo (Montagne) reduits doucement, dernier recours. */
  body.home-front-page .house-title {
    font-size: clamp(29px, calc(29px + (100vw - 641px) * 0.016), 36px) !important;
    margin-bottom: clamp(14px, calc(14px + (100vw - 641px) * 0.01367), 20px) !important;
  }
  body.home-front-page .house-title::before {
    width: clamp(150px, calc(150px + (100vw - 641px) * 0.0683), 180px) !important;
    height: clamp(68px, calc(68px + (100vw - 641px) * 0.0319), 82px) !important;
    margin: -18px auto 18px !important;
  }
  body.home-front-page .house-lead {
    font-size: clamp(13px, calc(13px + (100vw - 641px) * 0.00228), 14px) !important;
  }
  /* 2. espacement vertical separateurs/blocs valeurs resserre. */
  body.home-front-page .sm-vals {
    padding-top: clamp(10px, calc(10px + (100vw - 641px) * 0.0228), 20px) !important;
  }
  body.home-front-page .sm-val {
    margin-bottom: clamp(14px, calc(14px + (100vw - 641px) * 0.0228), 24px) !important;
    padding-left: clamp(18px, calc(18px + (100vw - 641px) * 0.01367), 24px) !important;
    padding-right: clamp(14px, calc(14px + (100vw - 641px) * 0.01367), 20px) !important;
  }
  /* 3. titre valeur (24->18) : evite la collision Independance/Exigence. */
  body.home-front-page .sm-val p.sm-vt {
    font-size: clamp(18px, calc(18px + (100vw - 641px) * 0.01367), 24px) !important;
    padding-bottom: clamp(12px, calc(12px + (100vw - 641px) * 0.0273), 24px) !important;
  }
}

/* ============================================================
   SECTION MAISON — petites tablettes & mobiles (<=640)
   <=640 (semi-stack 1 colonne, valeurs encore 2x2) :
     - plus d'air au-dessus du logo (equilibre avec le bas de section)
     - un peu plus d'air entre le lead et la 1re ligne des 4 entrees
   <=585 : bascule en STACK 1 colonne, separateurs horizontaux
     (3 traits entre les 4 entrees), espacement separateur<->bloc
     titre+texte resserre. Couvre aussi tous les mobiles.
   On ne touche pas a la plage 641-1080 (geree au-dessus).
   ============================================================ */
@media (max-width: 640px) {
  body.home-front-page .house { padding-top: 100px !important; }
  body.home-front-page .sm-vals { padding-top: 36px !important; }
}
@media (max-width: 585px) {
  body.home-front-page .sm-vals { flex-direction: column !important; flex-wrap: nowrap !important; }
  body.home-front-page .sm-val {
    width: 100% !important;
    border-left: 0 !important;
    padding: 22px 0 22px !important;
    margin-bottom: 0 !important;
    text-align: center !important;
  }
  body.home-front-page .sm-val:first-child { padding-top: 0 !important; }
  body.home-front-page .sm-val + .sm-val { border-top: 1px solid var(--gold-dim) !important; }
  body.home-front-page .sm-val p,
  body.home-front-page .sm-val p.sm-vt { text-align: center !important; }
  body.home-front-page .sm-val p.sm-vt { padding-bottom: 7px !important; margin-bottom: 0 !important; }
}


/* ============================================================
   SECTION AUTEURS — responsive sous 981
   586-980 : 2 colonnes conservees ; le bloc texte (nom + tagline
   + bio + boutons) ne doit jamais depasser la hauteur photo +
   decoration (250 + 2x10 = 270px). Reduction FLUIDE (aussi grand
   que possible a chaque largeur) du gap, des tailles et des
   line-heights + centrage vertical. Hierarchie/proportions gardees.
   <=585 : stack centre -> nom, tagline, photo, bio, boutons.
   Le nom (26px) reste plus petit que le titre "Les plumes".
   ============================================================ */
@media (max-width: 980px) and (min-width: 586px) {
  /* Nom 28 / sous-titre 20 (fixes). gap photo<->texte genereux (fluide 22..48).
     Boutons plus larges et moins hauts, memes proportions qu'au-dessus de 980
     (padding ~2em horizontal, min-height abaissee de 44 a 34). Le bloc texte
     reste <= hauteur photo+deco (270) : bio resserree (lh 1.4) pour compenser. */
  body.home-front-page .auteur-banner, body.woocommerce-shop .auteur-banner {
    gap: clamp(22px, calc(22px + (100vw - 586px) * 0.0659), 48px) !important;
    align-items: center !important;
  }
  body.home-front-page .auteur-banner-name, 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.home-front-page .auteur-banner-tagline, 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.home-front-page .auteur-banner-bio, 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.home-front-page .auteur-banner-actions, body.woocommerce-shop .auteur-banner-actions {
    gap: clamp(10px, calc(10px + (100vw - 586px) * 0.01013), 14px) !important;
  }
  body.home-front-page .auteur-banner-actions .btn, body.woocommerce-shop .auteur-banner-actions .btn {
    font-size: 11px !important;
    padding: 0.5em 2.3em !important; min-height: 38px !important;
  }
}

@media (max-width: 585px) {
  /* Stack centre : nom (26, gras 600), sous-titre (18), photo et boutons (11px)
     CENTRES. Seul le texte (bio) reste aligne a gauche (reference page auteur :
     Montserrat 13.4px, lh 1.85) et SANS separateur a gauche. Boutons empiles.
     Titre "Les plumes" 36px (hierarchie franche : titre 36 > nom 27 > st 19). */
  body.home-front-page .authors-title, body.woocommerce-shop .authors-title { font-size: 36px !important; }
  body.home-front-page .auteur-banner,
  body.woocommerce-shop .auteur-banner,
  body.home-front-page .auteur-banner--reverse,
  body.woocommerce-shop .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;
  }
  body.home-front-page .auteur-banner-content, body.woocommerce-shop .auteur-banner-content { display: contents !important; }
  body.home-front-page .auteur-banner-name, body.woocommerce-shop .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;
  }
  body.home-front-page .auteur-banner-tagline, body.woocommerce-shop .auteur-banner-tagline {
    order: 2 !important; font-size: 20.5px !important; line-height: 1.1 !important;
    /* lh 1.3->1.1 : compense le demi-interligne perdu (0.2*20.5/2 ~ 2px)
       en haut/bas pour garder l'air nom<->tagline et tagline<->photo. */
    margin: 2px 0 34px !important; text-align: center !important; width: 100% !important;
  }
  body.home-front-page .auteur-banner .auteur-banner-photo,
  body.woocommerce-shop .auteur-banner .auteur-banner-photo,
  body.home-front-page .auteur-banner--reverse .auteur-banner-photo,
  body.woocommerce-shop .auteur-banner--reverse .auteur-banner-photo {
    order: 3 !important; width: 220px !important; height: 220px !important;
    align-self: center !important; margin: 0 auto 30px !important;
  }
  body.home-front-page .auteur-banner-bio,
  body.woocommerce-shop .auteur-banner-bio,
  body.home-front-page .auteur-banner--reverse .auteur-banner-bio,
  body.woocommerce-shop .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;
  }
  body.home-front-page .auteur-banner-actions,
  body.woocommerce-shop .auteur-banner-actions,
  body.home-front-page .auteur-banner--reverse .auteur-banner-actions,
  body.woocommerce-shop .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;
  }
  body.home-front-page .auteur-banner-actions .btn, body.woocommerce-shop .auteur-banner-actions .btn { font-size: 13px !important; min-height: 38px !important; }
}

/* ============================================================
   SECTION CONTACT — responsive sous 981
   - Titre = taille de "Les plumes" a toutes largeurs (regle globale
     plus haut : var(--fs-3xl), puis 36px sous 585).
   586-980 : colonnes 50/50. Texte des 2 colonnes a la meme taille
     que le texte des auteurs (bio : clamp 13->15px). Paddings de la
     carte form + champs reduits. Bouton inchange.
   <=585 : section en 1 colonne (regle 820 native). Padding-top/bottom
     identiques a la section auteurs (48 / 58). Titre centre. Texte a la
     taille du texte auteurs (13.4px). Nom + mail empiles. Paddings carte
     et champs reduits pour un mobile harmonieux et confortable.
   ============================================================ */
@media (max-width: 980px) and (min-width: 586px) {
  body.home-front-page .contact-grid {
    grid-template-columns: 55fr 65fr !important;
    column-gap: 30px !important;
  }
  body.home-front-page .contact-intro {
    font-size: clamp(13px, calc(10.0331px + 0.5063vw), 15px) !important;
  }
  body.home-front-page .contact-form .form-group input,
  body.home-front-page .contact-form .form-group textarea {
    font-size: clamp(13px, calc(10.0331px + 0.5063vw), 15px) !important;
    padding: 0.85em 1em !important;
  }
  /* Carte form : padding uniforme 20px. */
  body.home-front-page .contact-form { padding: 20px !important; }
  body.home-front-page #contact-form { padding-bottom: 20px !important; }
  body.home-front-page #contact-form > div.form-submit:nth-of-type(3) { margin-top: 16px !important; }
  /* Bouton : largeur = contenu + padding. Le 30% natif devenait plus
     etroit que le texte sous 981 (le fond ne contenait plus "ENVOYER"). */
  body.home-front-page .form-submit .btn {
    width: auto !important;
    padding: 0.8em 2em !important;
  }
}

@media (max-width: 585px) {
  body.home-front-page .contact-title {
    font-size: 36px !important;
    text-align: center !important;
  }
  /* Air visuel sommet == base. Le titre a line-height 1.5em -> ~15.5px de
     leading invisible AU-DESSUS des glyphes : avec padding egal, l'air
     percu en haut depasse celui du bas. On retranche ce leading du
     padding-top (38 + 15.5 ~= 54 = padding-bottom). */
  body.home-front-page .contact {
    padding-top: 38px !important;
    padding-bottom: 54px !important;
  }
  body.home-front-page .contact-text {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
    width: 100% !important;
  }
  /* Texte = taille du texte auteurs au stack (bio 13.4px / lh 1.85). */
  body.home-front-page .contact-intro {
    font-size: 13.4px !important;
    line-height: 1.85 !important;
  }
  /* Carte form : air haut == air bas (padding-top == padding-bottom)
     pour equilibrer l'air au-dessus du 1er champ et sous le bouton. */
  body.home-front-page .contact-form { padding: 18px 16px !important; }
  body.home-front-page #contact-form { padding-bottom: 18px !important; }
  body.home-front-page #contact-form > div.form-submit:nth-of-type(3) { margin-top: 16px !important; }
  /* Champs : padding reduit, nom + mail empiles. */
  body.home-front-page .contact-form .form-group input,
  body.home-front-page .contact-form .form-group textarea {
    padding: 0.75em 0.9em !important;
  }
  body.home-front-page .contact-form .form-row {
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
  }
  body.home-front-page .contact-form .form-group { margin-bottom: 12px !important; }
  body.home-front-page .contact-form textarea { min-height: 130px !important; }
  /* Bouton : largeur = contenu + padding (idem sous 981, le 30% natif
     rognait le fond sous le texte). */
  body.home-front-page .form-submit .btn {
    width: auto !important;
    padding: 0.8em 1.9em !important;
  }
}

/* ============================================================
   MARGES LATERALES SOUS 585 = PAGES AUTEUR (conteneur 80vw)
   UNIQUEMENT <=585px (demande Ghislain : ne rien changer au-dessus).
   La page auteur cale son .eds-auteur-container a 80vw en mobile
   (verifie en live = 80vw a 430/560). On replique ce 80vw sur toutes
   les sections home sous 585 -> air gauche/droite identique a la page
   auteur (vw = %, pas un padding fixe). Au-dessus de 585 : inchange. */
@media (max-width: 585px) {
  body.home-front-page .featured > .container,
  body.woocommerce-shop .featured > .container,
  body.home-front-page .catalog > .container,
  body.woocommerce-shop .catalog > .container,
  body.home-front-page .house > .container,
  body.home-front-page .authors > .container,
  body.woocommerce-shop .authors > .container,
  body.home-front-page .reassurance > .container,
  body.home-front-page .contact > .container {
    width: 85vw !important;
    max-width: 85vw !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }
}

/* ============================================================
   Sous 585 — line-heights resserres/elargis + compensation de l'air
   (demi-interligne perdu/gagne = |L_old - L_new| * font-size / 2,
   ajoute en margin haut/bas pour garder l'air au-dessus/dessous).
   ============================================================ */
@media (max-width: 585px) {
  /* house-title : lh 1.3 -> 1.1 (36px). Comp = 0.2*36/2 = 3.6px :
     margin-bottom 20->23.6 (air titre<->lead) + ::before margin-bottom
     20->23.6 (air logo<->titre). */
  body.home-front-page .house-title {
    line-height: 1.1 !important;
    margin-bottom: 23.6px !important;
  }
  body.home-front-page .house-title::before {
    margin: -20px auto 23.6px !important;
  }
  /* reassurance-text : lh 2.215 -> 1.8 (13px). Comp = 0.415*13/2 ~ 2.7px
     en haut et en bas -> garde l'air au-dessus et au-dessous des 3 items. */
  body.home-front-page .reassurance-text {
    line-height: 1.8 !important;
    margin-top: 2.7px !important;
    margin-bottom: 2.7px !important;
  }
}


/* ════════════════════════════════════════════════════════════════════
   Source : eds_snippet 11284
   */
/* Catalogue home : seuls la couverture et le bouton "Ajouter au panier" réagissent au survol.
   Tous les autres textes (titre, auteur, description, eyebrow, prix) sont neutralisés. */
.home-front-page .catalog-grid .book-card .book-eyebrow,
.home-front-page .catalog-grid .book-card .book-title,
.home-front-page .catalog-grid .book-card .book-title a,
.home-front-page .catalog-grid .book-card .book-author,
.home-front-page .catalog-grid .book-card .book-desc,
.home-front-page .catalog-grid .book-card .book-price {
    pointer-events: none !important;
    cursor: default !important;
}
.home-front-page .catalog-grid .book-card .book-title a {
    color: inherit !important;
    text-decoration: none !important;
    border: 0 !important;
    background: transparent !important;
}
.home-front-page .catalog-grid .book-card .book-title a:hover,
.home-front-page .catalog-grid .book-card .book-title a:focus,
.home-front-page .catalog-grid .book-card .book-title a:focus-visible {
    color: inherit !important;
    text-decoration: none !important;
}

/* === iPad Pro 11 paysage (1194x834) — featured aligné catalogue plein écran
   + catalog container centré. Cover 320, gap 64, title 40, pitch 22, prix 34,
   eyebrow 12, auteur 14, boutons 13. Catalog max-width 1090 + margin auto
   (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.home-front-page.home-front-page .featured .featured-layout {
    grid-template-columns: 320px max-content !important;
    gap: 64px !important;
    max-width: 880px !important;
    width: fit-content !important;
    margin: 0 auto !important;
    justify-content: center !important;
  }
  body.home-front-page.home-front-page .featured .book-cover {
    width: 320px !important;
    max-width: 320px !important;
  }
  body.home-front-page.home-front-page .featured .featured-eyebrow {
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
    padding: 4px 12px !important;
    margin: 0 0 14px !important;
  }
  body.home-front-page.home-front-page .featured .featured-title {
    font-size: 40px !important;
    line-height: 1.1 !important;
    margin: 10px 0 4px !important;
    padding-bottom: 10px !important;
  }
  body.home-front-page.home-front-page .featured .featured-author {
    font-size: 14px !important;
    letter-spacing: 1.05px !important;
    margin: 0 0 14px !important;
    padding-bottom: 12px !important;
  }
  body.home-front-page.home-front-page .featured .featured-pitch {
    font-size: 22px !important;
    line-height: 1.4 !important;
    margin: 0 0 11px !important;
    padding-left: 0.8em !important;
    max-width: none !important;
  }
  body.home-front-page.home-front-page .featured .featured-price {
    font-size: 34px !important;
    margin: 0 !important;
  }
  body.home-front-page.home-front-page .featured .featured-actions {
    margin-top: 25px !important;
  }
  body.home-front-page.home-front-page .featured .featured-actions .btn-primary,
  body.home-front-page.home-front-page .featured .featured-actions .btn-ghost,
  body.home-front-page.home-front-page .featured .featured-actions a.btn-primary,
  body.home-front-page.home-front-page .featured .featured-actions a.btn-ghost,
  body.home-front-page.home-front-page .featured .featured-actions button.btn-primary,
  body.home-front-page.home-front-page .featured .featured-actions button.btn-ghost {
    font-size: 13px !important;
    padding: 13px 26px !important;
  }
  body.home-front-page.home-front-page .catalog > .container {
    max-width: 1090px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ============================================================
   LOAD ANIMATION iPad Pro portrait (1024×1366) — port de eds_snippet 11744.
   Hero visible immédiat ; .featured + .catalog masqués jusqu'à reveal staged
   (JS dans home.js).
   ============================================================ */
/* eds-css */
/* TEMP — Home (front-page) iPad Pro portrait (1024×1366) : ordre top→down strict.
   Hero visible immédiat ; .featured masqué jusqu'à step1 (imgs+fonts prêtes) ;
   .catalog masqué jusqu'à step2 (UNIQUEMENT après step1 + ses 4 covers prêtes).
   Pas de gate JS-class pour le hide initial → opacity:0 dès le 1er paint via MQ. */

@media (width: 1024px) and (orientation: portrait) {
  body.home-front-page .featured,
  body.home-front-page .catalog {
    opacity: 0 !important;
    animation: none !important;
    transition: opacity 700ms ease-out !important;
    will-change: opacity;
  }
  body.home-front-page.eds-home-step1 .featured { opacity: 1 !important; }
  body.home-front-page.eds-home-step2 .catalog { opacity: 1 !important; }
}