/* Gracenne Prints. Systeme visuel inspire de L'Afficherie (reference donnee par Yanis
   le 2026-09-23) : titres Georgia gras avec une ligne en italique dore, UI Inter, cartes
   creme arrondies a ombre douce, vert profond pour l'achat, bannieres photo a texte blanc.
   Page sur fond BLANC (decision Yanis) : la creme ne vit que dans les cartes. */
:root {
  --fond: #FFFFFF;
  --creme: #FBF6EF;
  --creme-2: #F5EDE3;
  --encre: #1A1A1A;
  --encre-2: #6B6259;
  --vert: #1F4B36;
  --vert-2: #173A2A;
  --or: #A8864F;
  --or-clair: #C9A66B;
  --trait: #ECE4D8;
  --serif: Georgia, "Times New Roman", Times, serif;
  --sans: Inter, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --largeur: 1280px;
  --r: 16px;
  --r-btn: 12px;
  --ombre: 0 8px 24px rgba(0,0,0,.08);
  --ombre-2: 0 14px 34px rgba(0,0,0,.12);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
body.fige { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.12; letter-spacing: -.01em; margin: 0 0 .4em; }
h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
h1 em, h2 em { display: block; font-style: italic; font-weight: 400; color: var(--or); }
p { margin: 0 0 1em; }
.enveloppe { max-width: var(--largeur); margin: 0 auto; padding: 0 20px; }
@media (min-width: 1000px) { .enveloppe { padding: 0 32px; } }
.muet { color: var(--encre-2); }
.centre { text-align: center; }
.surtitre { font: 600 .72rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--or); margin: 0 0 10px; }
.chapeau { font-size: 1.1rem; line-height: 1.6; color: var(--encre-2); max-width: 40em; }
.ico { flex: none; }
.saut { position: absolute; left: -999px; }
.saut:focus { left: 16px; top: 8px; background: #fff; padding: 8px; z-index: 99; }
:focus-visible { outline: 2px solid var(--vert); outline-offset: 3px; }

/* boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px;
  border: 1px solid var(--encre); border-radius: var(--r-btn); background: var(--encre); color: #fff;
  font: 600 .98rem var(--sans); text-decoration: none; cursor: pointer; transition: background .2s, transform .15s, box-shadow .2s; }
.btn .ico { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.14); }
.btn-vert { background: var(--vert); border-color: var(--vert); }
.btn-vert:hover { background: var(--vert-2); }
.btn-clair { background: var(--creme); color: var(--encre); border-color: var(--trait); }
.btn-clair:hover { background: #fff; }
.btn-ligne-blanc { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-plein { width: 100%; min-height: 56px; }
.ou { color: var(--encre-2); font-size: .9rem; }

/* bandeau + en-tete */
.annonce { background: var(--vert); color: #F4EFE6; text-align: center; font: 600 .82rem/1.4 var(--sans); padding: 9px 16px; letter-spacing: .01em; }
.entete { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.97); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--trait); }
.entete-in { display: flex; align-items: center; gap: 16px; height: 72px; }
.logo { font: 700 1.55rem/1 var(--serif); letter-spacing: .01em; text-decoration: none; color: var(--encre); margin: 0; white-space: nowrap; }
.logo span { font: 600 .58rem var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--or); margin-left: 7px; vertical-align: middle; }
.recherche { position: relative; flex: 1; max-width: 460px; margin: 0 auto; display: none; }
.recherche .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--encre-2); }
.recherche input { width: 100%; height: 44px; padding: 0 16px 0 42px; border: 1px solid var(--trait); border-radius: var(--r-btn); background: var(--creme); font: 400 .95rem var(--sans); color: var(--encre); }
.recherche input:focus { outline: none; border-color: var(--or-clair); background: #fff; }
.recherche-res { position: absolute; top: 52px; left: 0; right: 0; background: #fff; border: 1px solid var(--trait); border-radius: var(--r); box-shadow: var(--ombre-2); padding: 6px; z-index: 50; }
.recherche-res[hidden] { display: none; }
.recherche-res a { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 10px; text-decoration: none; }
.recherche-res a:hover, .recherche-res a.actif { background: var(--creme); }
.recherche-res img { width: 40px; height: 60px; object-fit: cover; border-radius: 4px; }
.recherche-res strong { display: block; font: 600 .92rem var(--sans); }
.recherche-res small { color: var(--encre-2); font-size: .8rem; }
.recherche-vide { padding: 12px; color: var(--encre-2); font-size: .9rem; }
.btn-panier { position: relative; margin-left: auto; background: none; border: 0; padding: 10px; cursor: pointer; color: var(--encre); }
.panier-compte { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; border-radius: 9px; background: var(--or); color: #fff; font: 700 .68rem/18px var(--sans); text-align: center; padding: 0 4px; }
.panier-compte[hidden] { display: none; }
.nav-cat { display: none; border-top: 1px solid var(--trait); }
.nav-cat ul { list-style: none; margin: 0 auto; display: flex; justify-content: center; gap: 34px; height: 46px; align-items: center; }
.nav-cat a { text-decoration: none; font: 500 .9rem var(--sans); }
.nav-cat li:first-child a { color: var(--or); font-weight: 600; }
.nav-cat a:hover { color: var(--vert); }
.menu-mobile { border: 0; }
.menu-mobile summary { list-style: none; cursor: pointer; padding: 8px 0; display: flex; }
.menu-mobile summary::-webkit-details-marker { display: none; }
.menu-mobile summary::after { content: none; }
.menu-mobile nav { position: absolute; left: 0; right: 0; top: 72px; background: #fff; border-bottom: 1px solid var(--trait); box-shadow: var(--ombre); padding: 6px 20px 14px; }
.menu-mobile ul { list-style: none; margin: 0; padding: 0; }
.menu-mobile li a { display: block; padding: 13px 0; border-bottom: 1px solid var(--trait); text-decoration: none; font: 600 1.05rem var(--sans); }
@media (min-width: 1000px) {
  .menu-mobile { display: none; }
  .recherche, .nav-cat { display: block; }
  .btn-panier { margin-left: 0; }
}

/* fil d'ariane */
.fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 18px 0 0; margin: 0; font-size: .82rem; color: var(--encre-2); }
.fil li + li::before { content: "›"; margin-right: 6px; }
.fil a { text-decoration: none; }
.fil a:hover { text-decoration: underline; }

/* hero */
.hero { display: grid; gap: 32px; align-items: center; padding-top: 28px; }
.hero h1 { font-size: clamp(2.4rem, 5vw, 3.9rem); line-height: 1.05; }
.hero-sous { font-size: 1.1rem; color: var(--encre-2); max-width: 32em; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin: 26px 0 22px; }
.hero-img { border-radius: var(--r); overflow: hidden; box-shadow: var(--ombre-2); }
.hero-img img { width: 100%; aspect-ratio: 1; object-fit: cover; }
@media (min-width: 1000px) { .hero { grid-template-columns: 1fr 1.05fr; gap: 56px; padding-top: 44px; } .hero-img img { aspect-ratio: 5 / 4; } }

/* rassurance */
.rassurance { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .88rem; color: var(--encre-2); }
.rassurance li { display: flex; align-items: center; gap: 8px; }
.rassurance .ico { color: var(--vert); width: 18px; height: 18px; }
.rassurance.compacte { margin: 18px 0 4px; gap: 8px; }
.rassurance.compacte li { background: var(--creme); border-radius: 999px; padding: 6px 12px; font-size: .8rem; }

/* sections */
.bloc { padding-top: clamp(56px, 7vw, 96px); }
.tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; margin-bottom: 26px; }
.tete h2 { margin: 0; }
.tete-sous { color: var(--encre-2); margin: 8px 0 0; }
.tete-lien { display: inline-flex; align-items: center; gap: 6px; font: 600 .92rem var(--sans); color: var(--vert); text-decoration: none; }
.tete-lien .ico { width: 16px; height: 16px; transition: transform .2s; }
.tete-lien:hover .ico { transform: translateX(3px); }
.tete-page { padding-top: 26px; padding-bottom: 26px; text-align: center; }
.tete-page .chapeau { margin: 0 auto; }

/* duo de grandes cartes */
.duo { display: grid; gap: 18px; padding-top: 48px; }
@media (min-width: 1000px) { .duo { grid-template-columns: 1fr 1fr; gap: 24px; } }
.duo-carte { display: flex; flex-direction: column; border-radius: var(--r); padding: 30px 28px 26px; color: #fff; text-decoration: none; box-shadow: var(--ombre); transition: transform .3s, box-shadow .3s; overflow: hidden; }
.duo-carte:hover { transform: translateY(-3px); box-shadow: var(--ombre-2); }
.duo-carte.or { background: linear-gradient(160deg, #B8955F, #9C7A45); }
.duo-carte.vert { background: linear-gradient(160deg, #2A5C44, #1B4230); }
.duo-carte .surtitre { color: rgba(255,255,255,.8); }
.duo-carte h2 { color: #fff; }
.duo-carte p { opacity: .92; max-width: 30em; }
.duo-vign { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 10px 0 18px; }
.duo-vign.large { grid-template-columns: 1fr 1fr; }
.duo-vign img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; box-shadow: 0 6px 14px rgba(0,0,0,.2); }
.duo-vign.large img { aspect-ratio: 4 / 3; }
.duo-lien { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.duo-lien .ico { width: 18px; height: 18px; }

/* grille de produits */
.grille { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1000px) { .grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.grille.centree { display: flex; flex-wrap: wrap; justify-content: center; }
.grille.centree > li { width: calc(50% - 9px); }
@media (min-width: 1000px) { .grille.centree > li { width: calc(25% - 18px); } }
.carte[hidden] { display: none; }
.carte a { display: flex; flex-direction: column; height: 100%; background: var(--creme); border-radius: var(--r); padding: 14px 14px 16px; text-decoration: none; box-shadow: 0 1px 0 rgba(0,0,0,.02); transition: box-shadow .3s, transform .3s; }
.carte a:hover { box-shadow: var(--ombre-2); transform: translateY(-3px); }
.carte-img { position: relative; aspect-ratio: 2 / 3; margin-bottom: 14px; }
.carte-img picture, .carte-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carte-img .img-a img { box-shadow: 0 10px 22px rgba(0,0,0,.14); border-radius: 2px; }
.carte-img .img-b { opacity: 0; transition: opacity .4s ease; }
.carte-img .img-b img { border-radius: 10px; }
@media (hover: hover) { .carte a:hover .img-b { opacity: 1; } }
.carte-titre { font: 600 .98rem/1.3 var(--sans); color: var(--encre); }
.carte-ref { font: italic 400 .92rem var(--serif); color: var(--encre-2); margin: 2px 0 8px; }
.carte-prix { margin-top: auto; font-size: .9rem; color: var(--encre-2); }
.carte-prix strong { color: var(--or); font-size: 1.02rem; }

/* bannieres photo */
.bannieres { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 700px) { .bannieres { grid-template-columns: 1fr 1fr; gap: 20px; } }
.banniere a { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; text-decoration: none; box-shadow: var(--ombre); }
.banniere picture, .banniere img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.banniere a:hover img { transform: scale(1.04); }
.banniere a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,15,10,.62) 0%, rgba(20,15,10,.15) 55%, transparent 80%); }
.banniere-txt { position: absolute; left: 0; bottom: 0; z-index: 1; padding: 22px 24px; color: #fff; }
.banniere-txt strong { display: block; font: 600 clamp(1.4rem, 2.4vw, 1.9rem)/1.1 var(--serif); }
.banniere-txt small { display: block; font-size: .88rem; opacity: .9; margin: 6px 0 10px; max-width: 22em; }
.banniere-txt em { font-style: normal; font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: 6px; border-bottom: 1px solid rgba(255,255,255,.7); padding-bottom: 2px; }
.banniere-txt .ico { width: 16px; height: 16px; }

/* grand bandeau */
.grand-bandeau { position: relative; display: block; min-height: 340px; border-radius: var(--r); overflow: hidden; text-decoration: none; color: #fff; box-shadow: var(--ombre-2); }
.grand-bandeau picture, .grand-bandeau img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.grand-bandeau::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,15,10,.75) 0%, rgba(20,15,10,.35) 50%, transparent 85%); }
.grand-bandeau-txt { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; min-height: 340px; padding: 36px; max-width: 520px; }
.grand-bandeau .surtitre { color: rgba(255,255,255,.8); }
.grand-bandeau strong { font: 600 clamp(1.8rem, 3.2vw, 2.6rem)/1.1 var(--serif); }
.grand-bandeau small { font-size: 1rem; opacity: .92; margin: 12px 0 18px; }
.grand-bandeau em { font-style: normal; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.grand-bandeau .ico { width: 18px; height: 18px; }

/* atelier */
.atelier-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 900px) { .atelier-liste { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.atelier-liste li { background: var(--creme); border-radius: var(--r); padding: 26px 24px; }
.atelier-liste .ico { width: 28px; height: 28px; color: var(--or); margin-bottom: 12px; }
.atelier-liste strong { display: block; font: 600 1.2rem var(--serif); margin-bottom: 6px; }
.atelier-liste p { color: var(--encre-2); margin: 0; font-size: .95rem; }
.atelier-note { font-size: .82rem; color: var(--encre-2); margin-top: 16px; }

/* chercher un verset */
.cherche-carte { background: var(--creme); border-radius: var(--r); padding: 40px 28px; text-align: center; }
.cherche { display: flex; gap: 10px; max-width: 540px; margin: 18px auto 16px; }
.cherche input { flex: 1; min-width: 0; height: 52px; padding: 0 16px; border: 1px solid var(--trait); border-radius: var(--r-btn); font: 400 1rem var(--sans); background: #fff; }
.cherche input:focus { outline: none; border-color: var(--or-clair); }

/* faq */
.faq-in { border-top: 1px solid var(--trait); }
details { border-bottom: 1px solid var(--trait); }
details summary { list-style: none; cursor: pointer; padding: 18px 0; display: flex; justify-content: space-between; gap: 16px; font: 600 1rem var(--sans); }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; font: 400 1.4rem/1 var(--sans); color: var(--or); }
details[open] summary::after { content: "−"; }
details p { color: var(--encre-2); font-size: .95rem; }

/* appel final */
.final { background: linear-gradient(160deg, #2A5C44, #1B4230); color: #fff; border-radius: var(--r); padding: 48px 28px; text-align: center; }
.final h2 { color: #fff; }
.final p { opacity: .9; }
.final .hero-cta { justify-content: center; margin-bottom: 0; }

/* page produit */
.produit-tete { padding-top: 10px; }
.produit-tete h1 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin-bottom: 8px; }
.produit-sous { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; color: var(--encre-2); font: italic 400 1.02rem var(--serif); margin-bottom: 20px; }
.pastille { display: inline-flex; align-items: center; gap: 6px; font: 600 .78rem var(--sans); font-style: normal; color: var(--vert); background: #EAF2EC; border-radius: 999px; padding: 5px 11px; }
.pastille .ico { width: 15px; height: 15px; }
.produit { display: grid; gap: 26px; }
@media (min-width: 1000px) { .produit { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px; align-items: start; } .galerie { position: sticky; top: 140px; } }
.galerie { min-width: 0; }
.piste { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: var(--creme); border-radius: var(--r); }
.piste::-webkit-scrollbar { display: none; }
.piste figure { flex: 0 0 100%; margin: 0; scroll-snap-align: start; aspect-ratio: 1; }
.piste picture { display: block; width: 100%; height: 100%; }
.piste img { width: 100%; height: 100%; object-fit: contain; }
.points { display: flex; justify-content: center; gap: 7px; padding: 12px 0 0; }
.points span { width: 7px; height: 7px; border-radius: 50%; background: var(--trait); }
.points span.actif { background: var(--encre); }
.vignettes { display: none; }
@media (min-width: 1000px) {
  .points { display: none; }
  .vignettes { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
  .vignettes button { width: 68px; padding: 0; border: 2px solid transparent; border-radius: 10px; background: var(--creme); cursor: pointer; aspect-ratio: 1; overflow: hidden; }
  .vignettes img { width: 100%; height: 100%; object-fit: cover; }
  .vignettes button.actif, .vignettes button:hover { border-color: var(--or-clair); }
}
.verset { margin: 0 0 22px; padding: 18px 22px; background: var(--creme); border-radius: var(--r); font: italic 400 1.2rem/1.45 var(--serif); }
.verset p { margin: 0 0 6px; }
.verset cite { font: 600 .75rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--or); font-style: normal; }
.tailles { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.etape { font: 600 1.2rem var(--serif); padding: 0; margin: 0 0 12px; }
p.etape { margin-top: 18px; }
.etape strong { font: 500 .95rem var(--sans); color: var(--encre-2); margin-left: 6px; }
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.chip { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14px 8px 12px; border: 1.5px solid var(--trait); border-radius: var(--r-btn); background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip-t { font-weight: 700; font-size: .95rem; }
.chip-s { font-size: .7rem; color: var(--encre-2); margin-top: 2px; }
.chip-p { font-size: .82rem; margin-top: 6px; font-weight: 600; color: var(--vert); }
.chip-badge { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: var(--or); color: #fff; font: 700 .6rem var(--sans); letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.chip:hover { border-color: var(--or-clair); }
.chip:has(input:checked) { border-color: var(--or); box-shadow: 0 0 0 1px var(--or), 0 6px 14px rgba(168,134,79,.18); }
.chip:has(input:focus-visible) { outline: 2px solid var(--vert); outline-offset: 2px; }
.plus-tailles { border: 0; margin-top: 8px; }
.plus-tailles summary { padding: 8px 0; font: 600 .88rem var(--sans); color: var(--encre-2); justify-content: flex-start; }
.plus-tailles summary::after { margin-left: 8px; font-size: 1.1rem; }
.plus-tailles .chips { padding: 10px 0 6px; }
.echelle { margin: 4px 0 18px; background: var(--creme); border-radius: var(--r); padding: 14px 14px 10px; }
.echelle[hidden] { display: none; }
.echelle svg { width: 100%; height: auto; display: block; max-height: 150px; }
.echelle .mur { fill: var(--creme); }
.echelle .cadre { fill: #fff; stroke: #3A2A1E; stroke-width: 1.6; transition: all .35s cubic-bezier(.2,1.2,.3,1); }
.echelle .canape { fill: #D8CCB8; }
.echelle figcaption { font-size: .76rem; color: var(--encre-2); margin-top: 6px; text-align: center; }
.achat-ligne { display: flex; align-items: center; gap: 14px; }
.prix-grand { display: flex; flex-direction: column; }
.prix-grand .prix-live { font: 700 1.6rem var(--sans); }
.prix-grand small { font-size: .74rem; color: var(--encre-2); }
.btn-achat { flex: 1; min-height: 58px; font-size: 1rem; letter-spacing: .03em; text-transform: uppercase; }
.btn.ajoute { background: var(--or); border-color: var(--or); }
.offre-panier { display: flex; gap: 10px; align-items: center; margin: 14px 0 0; padding: 12px 14px; background: #F7EFE3; border-radius: var(--r-btn); font-size: .88rem; }
.offre-panier .ico { color: var(--or); }
.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); margin: 18px 0 8px; padding: 14px 0; border-block: 1px solid var(--trait); }
.chiffres div { text-align: center; padding: 0 6px; }
.chiffres div + div { border-left: 1px solid var(--trait); }
.chiffres dt { font: 700 1.45rem/1 var(--serif); color: var(--or); }
.chiffres dd { margin: 5px 0 0; font-size: .7rem; line-height: 1.3; color: var(--encre-2); }
.accordeons { margin-top: 8px; }
.carte-texte { background: var(--creme); border-radius: var(--r); padding: clamp(26px, 4vw, 48px); }
.carte-texte > h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.texte-long h2 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-top: 1.4em; }
.texte-long p { font-size: 1rem; line-height: 1.75; max-width: 46em; }
.renvoi { font: italic 400 1.02rem/1.5 var(--serif); color: var(--encre-2); margin-top: 1.4em; }
.renvoi a { display: inline-flex; align-items: center; gap: 6px; color: var(--vert); font: 600 .92rem var(--sans); text-decoration: none; }
.renvoi a:hover { text-decoration: underline; }
.renvoi .ico { width: 16px; height: 16px; }
.dans-carte { margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--trait); }
.dans-carte .carte a { background: #fff; }
.kjv { margin: 10px 0 26px; padding: 22px 26px 10px; border-left: 3px solid var(--or-clair); background: var(--creme); border-radius: 0 var(--r) var(--r) 0; }
.kjv p { font: italic 400 1.12rem/1.6 var(--serif); }
.kjv sup { color: var(--or); font: 700 .7rem var(--sans); font-style: normal; margin-right: 3px; }
section.texte-long { margin: 0 auto; padding-top: 40px; }

/* boutique */
.outils { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.filtres { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 2px 20px; max-width: calc(100% + 40px); }
.filtres::-webkit-scrollbar { display: none; }
@media (min-width: 1000px) { .filtres { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; max-width: none; } }
.filtres button { flex: none; border: 1px solid var(--trait); background: #fff; border-radius: 999px; padding: 9px 16px; font: 500 .86rem var(--sans); color: var(--encre); cursor: pointer; }
.filtres button:hover { border-color: var(--or-clair); }
.filtres button[aria-pressed="true"] { background: var(--encre); color: #fff; border-color: var(--encre); }
.tri { display: flex; align-items: center; gap: 18px; font-size: .88rem; }
.tri select { font: inherit; padding: 8px 10px; border: 1px solid var(--trait); border-radius: 10px; background: #fff; margin-left: 6px; }

/* index des versets */
.livres { columns: 14em; column-gap: 32px; }
.livre { break-inside: avoid; margin-bottom: 16px; background: var(--creme); border-radius: var(--r); padding: 18px 20px; }
.livre h2 { font-size: 1.25rem; margin: 0 0 .3em; }
.livre ul { list-style: none; padding: 0; margin: 0; }
.livre li { padding: 2px 0; }
.livre a { text-decoration: none; font-weight: 500; }
.livre a:hover { color: var(--vert); text-decoration: underline; }
.voisins { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.voisins a { display: block; padding: 9px 16px; background: var(--creme); border-radius: 999px; text-decoration: none; font: 500 .92rem var(--sans); }
.voisins a:hover { background: var(--creme-2); }

/* barre d'achat collante (mobile) */
.barre-achat { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #fff; border-top: 1px solid var(--trait); box-shadow: 0 -6px 20px rgba(0,0,0,.08);
  transform: translateY(110%); transition: transform .25s ease; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); }
.barre-achat.visible { transform: none; }
.barre-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.barre-info { display: flex; flex-direction: column; font-size: .88rem; line-height: 1.3; }
@media (min-width: 1000px) { .barre-achat { display: none; } }

/* tiroir panier */
.tiroir { position: fixed; inset: 0; z-index: 60; }
.tiroir[hidden] { display: none; }
.tiroir-fond { position: absolute; inset: 0; background: rgba(0,0,0,.4); opacity: 0; transition: opacity .25s; }
.tiroir-panneau { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.9,.3,1); }
.tiroir.ouvert .tiroir-fond { opacity: 1; }
.tiroir.ouvert .tiroir-panneau { transform: none; }
.tiroir-tete { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px; border-bottom: 1px solid var(--trait); }
.tiroir-tete h2 { font-size: 1.5rem; margin: 0; }
.tiroir-fermer { background: none; border: 0; cursor: pointer; padding: 6px; color: var(--encre); }
.palier { padding: 0 22px; }
.palier p { margin: 16px 0 8px; font: 600 .9rem var(--sans); }
.jauge { height: 6px; background: var(--creme-2); border-radius: 3px; overflow: hidden; margin-bottom: 14px; }
.jauge span { display: block; height: 100%; background: var(--or); transition: width .4s; }
.tiroir-lignes { flex: 1; overflow-y: auto; padding: 0 22px; }
.ligne { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--trait); }
.ligne img { width: 64px; height: 96px; object-fit: cover; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,.12); }
.ligne-info { display: flex; flex-direction: column; gap: 2px; font-size: .9rem; }
.ligne-info a { font: 600 .98rem var(--sans); text-decoration: none; }
.ligne-info .muet { font-size: .82rem; }
.ligne-prix { font-weight: 700; font-size: .95rem; }
.qte { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.qte button { width: 28px; height: 28px; border: 1px solid var(--trait); background: #fff; cursor: pointer; border-radius: 8px; font-size: 1rem; }
.qte .retirer { width: auto; height: auto; border: 0; background: none; text-decoration: underline; font-size: .78rem; color: var(--encre-2); margin-left: 8px; }
.vide { text-align: center; padding: 56px 0; color: var(--encre-2); }
.tiroir-pied { padding: 18px 22px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--trait); background: var(--creme); }
.tiroir-pied[hidden] { display: none; }
.tiroir-pied .btn { background: var(--vert); border-color: var(--vert); }
.ligne-total { display: flex; justify-content: space-between; font-size: .92rem; padding: 3px 0; }
.ligne-total[hidden] { display: none; }
.ligne-total.remise { color: var(--vert); font-weight: 600; }
.ligne-total.fort { font-weight: 700; font-size: 1.08rem; padding: 10px 0 14px; }
.tiroir-pied .muet { font-size: .78rem; margin: 10px 0 0; }

/* pied */
.pied { margin-top: clamp(72px, 9vw, 112px); background: #16130F; color: #D9D1C5; padding: 60px 0 28px; font-size: .9rem; }
.pied .brin { color: var(--or-clair); margin: 0 0 12px; display: block; }
.pied-in { display: grid; gap: 34px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.pied .logo { color: #F4EFE6; }
.pied-marque p:last-child { margin-top: 14px; max-width: 24em; opacity: .8; }
.pied h2 { font: 600 .72rem var(--sans); letter-spacing: .16em; text-transform: uppercase; margin: 0 0 14px; color: var(--or-clair); }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { padding: 4px 0; }
.pied a { text-decoration: none; }
.pied a:hover { text-decoration: underline; }
.pied-bas { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); font-size: .78rem; opacity: .7; }
.page-produit .pied { padding-bottom: 96px; }
@media (min-width: 1000px) { .page-produit .pied { padding-bottom: 28px; } }

/* ================================================================ motion
   Apparitions avec inertie et leger depassement, jamais de fondu plat. Rien n'est
   cache sans JS (html.js), filet html.fin si site.js ne demarre pas. */
:root { --ressort: cubic-bezier(.18, 1.2, .35, 1); --doux-e: cubic-bezier(.22, .8, .24, 1); }
html.js:not(.fin) .apparait:not(.vu) { opacity: 0; transform: translateY(28px); }
.apparait.vu, html.fin .apparait { opacity: 1; transform: none;
  transition: opacity .8s var(--doux-e) var(--d, 0ms), transform 1s var(--ressort) var(--d, 0ms); }
html.js .hero-txt > * { animation: monte 1s var(--ressort) both; }
html.js .hero-txt > :nth-child(2) { animation-delay: .08s; } html.js .hero-txt > :nth-child(3) { animation-delay: .16s; } html.js .hero-txt > :nth-child(4) { animation-delay: .24s; }
html.js .hero-img { animation: entre 1.2s var(--ressort) .1s both; }
@keyframes monte { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes entre { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
.vol { position: fixed; z-index: 90; pointer-events: none; border-radius: 4px; box-shadow: 0 18px 40px -12px rgba(0,0,0,.45); }
.panier-compte.rebond { animation: rebond .6s var(--ressort); }
@keyframes rebond { 0% { transform: scale(.4); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.entete-in { transition: height .3s var(--doux-e); }
@media (min-width: 1000px) { .entete.serre .entete-in { height: 60px; } }
.tiroir.ouvert .ligne { animation: glisse .5s var(--ressort) both; }
.tiroir.ouvert .ligne:nth-child(2) { animation-delay: .06s; } .tiroir.ouvert .ligne:nth-child(3) { animation-delay: .12s; }
@keyframes glisse { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.cadre.incline { transition: transform .25s ease-out; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .apparait { opacity: 1 !important; transform: none !important; }
}

/* Journal (2026-09-30) : bloc verset = vignette encadree + reference + citation + commentaire */
.article h2{margin-top:2.4rem}
.verset-bloc{display:grid;grid-template-columns:120px 1fr;gap:1.2rem;align-items:start;margin:1.6rem 0;padding:1.2rem;background:#FBF6EF;border-radius:16px}
.verset-bloc img{width:120px;height:auto;border-radius:8px;display:block}
.verset-bloc h3{margin:0 0 .3rem;font-size:1.05rem}
.verset-bloc blockquote{margin:0 0 .6rem;font-style:italic;font-family:Georgia,serif;color:#1F4B36}
.verset-bloc p{margin:.3rem 0}
.verset-lien a{font-weight:600}
.liste-journal{list-style:none;padding:0}.liste-journal li{margin:0 0 1.6rem}
@media (max-width:600px){.verset-bloc{grid-template-columns:80px 1fr}.verset-bloc img{width:80px}}