/* ==========================================================================
SABDA INTERNATIONAL — site.css (site public) — v3 « escvdo » (SPEC déc. 17)
Fond ivoire unique, une serif, échelle resserrée, zéro animation d'apparition.
Mobile-first. Flexbox partout, grid en amélioration (@supports). Transitions ≤ 200 ms.
========================================================================== */
/* ---------- Visibilité JS / no-JS ---------- */
.no-js .js-only { display: none !important; }
.js .no-js-only { display: none !important; }
/* ---------- Échelle typographique resserrée (site public seulement) ---------- */
.site-main h1, .site-main .h1 { font-size: 2rem; font-weight: 500; letter-spacing: 0; }
.site-main h2, .site-main .h2 { font-size: 1.625rem; font-weight: 500; letter-spacing: 0; }
.site-main h3, .site-main .h3 { font-size: 1.25rem; font-weight: 500; }
.site-main h4, .site-main .h4 { font-size: 1.0625rem; font-weight: 500; }
@media (min-width: 48em) {
.site-main h1, .site-main .h1 { font-size: 2.5rem; }
.site-main h2, .site-main .h2 { font-size: 1.875rem; }
.site-main h3, .site-main .h3 { font-size: 1.375rem; }
}
.eyebrow, .overline { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: #7A2A2F; color: var(--c-terre-text); margin: 0 0 0.5rem; }
.eyebrow--onimage { color: #F7F3ED; }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }
.lead { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 1.25rem; line-height: 1.5; color: #3A2321; color: var(--c-brun); }
.link-arrow { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 1.125rem; color: #1E0C0D; color: var(--c-charbon); text-decoration: none; border-bottom: 1px solid #401215; border-bottom-color: var(--c-terre); padding-bottom: 1px; }
.link-arrow::after { content: " \2192"; }
.link-arrow:hover { color: #7A2A2F; color: var(--c-terre-text); }
.links-row .link-arrow { margin: 0 0.9rem 0.75rem; display: inline-block; }
.lang-note { margin: 1rem 0 0; }
.badge-lang { font-weight: 500; letter-spacing: 0.04em; text-transform: none; }
.text-center { text-align: center; }
.ratio-45 img { aspect-ratio: 4 / 5; -o-object-fit: cover; object-fit: cover; width: 100%; }
.ratio-23 img { aspect-ratio: 2 / 3; -o-object-fit: cover; object-fit: cover; width: 100%; }
.ratio-34 img { aspect-ratio: 3 / 4; -o-object-fit: cover; object-fit: cover; width: 100%; }
/* emplacements sans contenu (portrait, photo de groupe) : cadre ivoire-2 + filet terre cuite, aucun texte */
.frame { position: relative; width: 100%; height: 0; background: #EFE3D6; background: var(--c-ivoire-2); border: 1px solid #401215; border-color: var(--c-terre); }
.frame--23 { padding-top: 150%; }
.frame--43 { padding-top: 75%; }
.frame::after { content: ""; position: absolute; top: 12px; left: 12px; right: 12px; bottom: 12px; border: 1px solid #E2D7C8; border-color: var(--c-sable); }
/* ---------- En-tête : UNE ligne, ≤ 96 px, ivoire, collant réduit à 56 px au défilement ---------- */
.site-header { background: #F7F3ED; background: var(--c-ivoire); border-bottom: 1px solid #E2D7C8; border-bottom: var(--bd); position: relative; position: -webkit-sticky; position: sticky; top: 0; z-index: 100; z-index: var(--z-header); }
.header-bar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 64px; height: var(--h-header); transition: height 180ms ease-out; }
.header-bar__left, .header-bar__right { -webkit-box-flex: 1; -ms-flex: 1 1 0; flex: 1 1 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-width: 0; }
.header-bar__right { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
.brand { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex: 0 0 auto; flex: 0 0 auto; height: 100%; padding: 6px 0.5rem; text-decoration: none; }
.brand__logo { display: block; width: auto; height: 48px; transition: height 180ms ease-out; }
.is-compact .header-bar { height: 56px; height: var(--h-header-compact); }
.is-compact .brand__logo { height: 40px; }
.hdr-btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 0.35rem; color: #1E0C0D; color: var(--c-charbon); text-decoration: none; position: relative; border-radius: 2px; }
.hdr-btn:hover, .hdr-btn:focus-visible { color: #7A2A2F; color: var(--c-terre-text); }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: middle; }
.hdr-cart__count { position: absolute; top: 5px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #401215; background: var(--c-terre); color: #EFE3D6; font-family: "Jost", Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; }
.hdr-cart__count[data-empty="1"] { display: none; }
.hdr-menu { margin-left: -8px; }
.hdr-btn--search { display: none; }
/* langue + devise : un seul menu (details, fonctionne sans JS) */
.hdr-prefs { position: relative; display: none; border: 0; }
.site-header details, .site-header details:last-of-type { border: 0; }
.hdr-prefs__sum { list-style: none; cursor: pointer; font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 0.9375rem; letter-spacing: 0.04em; }
.hdr-prefs__sum::-webkit-details-marker { display: none; }
.hdr-prefs__sum::after { content: none; }
.hdr-prefs__label { margin-right: 0.4rem; }
.hdr-prefs__panel { position: absolute; right: 0; top: 100%; min-width: 15rem; background: #EFE3D6; border: 1px solid #E2D7C8; border: var(--bd); padding: 1rem; box-shadow: 0 12px 32px rgba(30,12,13,0.12); z-index: 30; }
.prefs__k { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: #7A2A2F; color: var(--c-terre-text); margin-bottom: 0.35rem; }
.hdr-lang { margin-bottom: 0.9rem; }
.hdr-lang__list { list-style: none; margin: 0; padding: 0; }
.hdr-lang__list a { display: block; padding: 0.3rem 0; font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 1.0625rem; color: #3A2321; color: var(--c-brun); text-decoration: none; }
.hdr-lang__list a[aria-current="true"] { color: #1E0C0D; color: var(--c-charbon); border-bottom: 1px solid #401215; border-bottom-color: var(--c-terre); display: inline-block; }
.hdr-lang__list a:hover { color: #7A2A2F; color: var(--c-terre-text); }
.hdr-cur select { min-height: 36px; width: auto; padding: 0.25rem 1.75rem 0.25rem 0.5rem; font-size: 0.9375rem; background-color: transparent; border-color: #E2D7C8; border-color: var(--c-sable); }
/* navigation : tiroir sur mobile, ligne serif sur desktop */
.nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #F7F3ED; background: var(--c-ivoire); border-bottom: 1px solid #E2D7C8; border-bottom: var(--bd); padding: 0.5rem 1rem 1.25rem; max-height: calc(100vh - 64px); overflow: auto; }
.no-js .nav, .nav.is-open { display: block; }
.no-js .nav { position: static; border: 0; padding: 0 0 0.5rem; max-height: none; }
.no-js .header-bar { height: auto; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0.5rem 0; }
.no-js .header-bar__left { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; width: 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; }
.nav__list { list-style: none; margin: 0; padding: 0; }
.nav__item > a { display: block; padding: 0.7rem 0; font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 1.25rem; color: #1E0C0D; color: var(--c-charbon); text-decoration: none; border-bottom: 1px solid #EFE3D6; border-bottom-color: var(--c-sable-2); }
.nav__item > a[aria-current="page"], .nav__item > a:hover { color: #7A2A2F; color: var(--c-terre-text); }
.nav__sub { list-style: none; margin: 0; padding: 0.25rem 0 0.5rem 1rem; }
.nav__sub a { display: block; padding: 0.35rem 0; font-size: 0.9375rem; color: #3A2321; color: var(--c-brun); text-decoration: none; }
.nav__sub a:hover { color: #7A2A2F; color: var(--c-terre-text); }
.nav__extra { padding-top: 1rem; }
.hdr-search { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 1rem; }
.hdr-search input { min-height: 40px; border-right: 0; border-radius: 2px 0 0 2px; }
.hdr-search__btn { min-width: 44px; border: 1px solid #B08A5A; border-color: var(--c-sable-3); border-radius: 0 2px 2px 0; background: transparent; color: #3A2321; color: var(--c-brun); }
.nav__prefs .hdr-lang__list { display: -webkit-box; display: -ms-flexbox; display: flex; }
.nav__prefs .hdr-lang__list li { margin-right: 1rem; }
@media (min-width: 64em) {
.header-bar { height: 92px; height: var(--h-header-lg); }
.brand__logo { height: 64px; }
.is-compact .header-bar { height: 56px; }
.is-compact .brand__logo { height: 40px; }
.hdr-menu { display: none !important; }
.hdr-btn--search { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; }
.hdr-prefs { display: block; margin-right: 0.25rem; }
.nav, .no-js .nav { display: block !important; position: static; background: transparent; border: 0; padding: 0; max-height: none; overflow: visible; }
.no-js .header-bar { height: 92px; -ms-flex-wrap: nowrap; flex-wrap: nowrap; padding: 0; }
.no-js .header-bar__left { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; width: auto; -ms-flex: 1 1 0; flex: 1 1 0; }
.nav__extra { display: none; }
.nav__list { display: -webkit-box; display: -ms-flexbox; display: flex; }
.nav__item { position: relative; }
.nav__item > a { padding: 0.5rem 1.1rem 0.5rem 0; border-bottom: 0; white-space: nowrap; font-size: 1.0625rem; }
.nav__item > a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; text-decoration-color: #401215; }
.nav__item.has-sub > a::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 0.4rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; -webkit-transform: translateY(-3px) rotate(45deg); transform: translateY(-3px) rotate(45deg); }
.nav__sub { position: absolute; left: 0; top: 100%; min-width: 13rem; margin: 0; padding: 0.5rem 0; background: #EFE3D6; border: 1px solid #E2D7C8; border: var(--bd); box-shadow: 0 12px 32px rgba(30,12,13,0.12); visibility: hidden; opacity: 0; transition: opacity 120ms ease-out, visibility 120ms; z-index: 20; }
.nav__item:hover > .nav__sub, .nav__item:focus-within > .nav__sub { visibility: visible; opacity: 1; }
.nav__sub a { padding: 0.4rem 1rem; font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 1.0625rem; }
}
@media (min-width: 64em) and (max-width: 79.99em) { .nav__item > a { padding-right: 0.8rem; font-size: 1rem; } }
/* ---------- Sections : fond ivoire unique, aucun aplat ---------- */
.site-main { min-height: 50vh; }
.section { padding: 3rem 0; }
.section--sable, .section--ivoire2, .section--foret { background: transparent; color: inherit; }
.section-head { margin-bottom: 1.5rem; }
.section-head h2 { margin-bottom: 0.5rem; }
.section-head .lead { margin-bottom: 0; max-width: 40rem; }
.section-head--center { text-align: center; }
.section-head--center .lead { margin-left: auto; margin-right: auto; }
.page-head { padding-top: 1rem; padding-bottom: 1.5rem; }
.page-head h1 { margin-bottom: 0.5rem; }
.page-head .lead { margin-bottom: 0; }
.page-head--center { text-align: center; }
.page-head--center .breadcrumb ol { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
@media (min-width: 48em) { .section { padding: 4.5rem 0; } .page-head { padding-top: 1.5rem; padding-bottom: 2rem; } }
.btn { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 0.875rem; letter-spacing: 0.12em; font-weight: 600; border-radius: 0; }
.btn--onimage { background: rgba(247,243,237,0.92); border-color: #F7F3ED; color: #1E0C0D; }
.btn--onimage:hover, .btn--onimage:focus-visible { background: #F7F3ED; color: #7A2A2F; border-color: #F7F3ED; }
/* ---------- Accueil 1 : rideau plein écran ---------- */
.curtain { position: relative; min-height: calc(100vh - 64px); min-height: calc(100vh - var(--h-header)); background: #E2D7C8; background: var(--c-sable); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: hidden; }
.curtain__media { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.curtain__media picture, .curtain__media img { width: 100%; height: 100%; }
.curtain__media img { -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; }
.curtain__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70%; background: -webkit-gradient(linear, left bottom, left top, from(rgba(30,12,13,0.62)), to(rgba(30,12,13,0))); background: linear-gradient(0deg, rgba(30,12,13,0.62) 0%, rgba(30,12,13,0) 100%); }
.curtain__text { position: relative; text-align: center; padding: 0 1rem 3.5rem; max-width: 44rem; }
.curtain__text .eyebrow { margin-bottom: 0.9rem; }
.curtain__title { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-weight: 400; font-size: 2rem; line-height: 1.15; color: #F7F3ED; margin: 0 0 1.5rem; letter-spacing: 0.01em; }
@media (min-width: 48em) { .curtain__title { font-size: 2.75rem; } }
@media (min-width: 64em) { .curtain { min-height: calc(100vh - 92px); min-height: calc(100vh - var(--h-header-lg)); } .curtain__text { padding-bottom: 5rem; } .curtain__title { font-size: 3rem; } }
/* ---------- Accueil 2 : comment nos pièces sont fabriquées ---------- */
.craft-fig { margin: 0; }
.craft-fig img { width: 100%; height: auto; }
.craft-fig a { display: block; }
.craft-fig__cap { padding: 0.35rem 0 0; }
.craft-trio { list-style: none; margin: 0 -0.75rem; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.craft-trio__item { width: 100%; padding: 0 0.75rem; margin-bottom: 2rem; }
.craft-trio__item .eyebrow { margin: 1rem 0 0.25rem; }
.craft-trio__title { margin-bottom: 0.4rem; }
.craft-trio__text { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 1.125rem; line-height: 1.45; color: #3A2321; color: var(--c-brun); margin: 0; }
@media (min-width: 48em) { .craft-trio__item { width: 33.333%; } }
@supports (display: grid) {
.craft-trio { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin: 0; }
.craft-trio__item { width: auto; padding: 0; margin: 0; }
@media (min-width: 48em) { .craft-trio { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
}
.stats { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 2.5rem 0 2rem; border-top: 1px solid #E2D7C8; border-top: var(--bd); border-bottom: 1px solid #E2D7C8; border-bottom: var(--bd); }
.stat { width: 50%; text-align: center; padding: 1.5rem 0.5rem; }
.stat__n { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 2.75rem; line-height: 1; color: #1E0C0D; color: var(--c-charbon); font-weight: 400; margin-bottom: 0.5rem; }
.stat__l { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: #7A2A2F; color: var(--c-terre-text); }
@media (min-width: 48em) { .stat { width: 25%; padding: 2rem 0.5rem; } .stat__n { font-size: 3.5rem; } }
/* ---------- Cartes produit 3:4 nues ---------- */
.card-product { position: relative; height: 100%; }
.card-product__media { position: relative; display: block; overflow: hidden; background: #EFE3D6; background: var(--c-ivoire-2); }
.card-product__media img { width: 100%; aspect-ratio: 3 / 4; -o-object-fit: cover; object-fit: cover; }
.card-product__alt { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity 180ms ease-out; }
.card-product__alt img { height: 100%; }
.card-product:hover .card-product__alt, .card-product:focus-within .card-product__alt { opacity: 1; }
.card-product__body { padding: 0.75rem 0 1rem; }
.card-product__title { font-size: 1.0625rem; margin-bottom: 0.2rem; font-weight: 500; line-height: 1.3; }
.card-product__title a { color: #1E0C0D; color: var(--c-charbon); text-decoration: none; }
.card-product__title a::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.card-product__title a:hover { color: #7A2A2F; color: var(--c-terre-text); }
.card-product__meta { margin: 0; font-size: 0.875rem; }
/* LE PRIX S ECRIT DANS LA POLICE DU SITE (9 novembre 2026).
Lionnel : « je veux aussi que tu me propose d autres polices d ecritures
pour les prix car c est peu lisible ». Essai E retenu, applique partout.
La cause n etait PAS la forme des chiffres — verifie a 48 px, Cormorant
Garamond ne porte que des chiffres de meme hauteur — mais la finesse de ce
serif tres contraste a 16 px sur le fond creme.
Graisse 400 : il n existe pas de fichier de police en 500 sur le serveur,
le navigateur fabriquait un faux gras. */
.card-product .price { font-family: "Jost", Arial, sans-serif; font-family: var(--f-sans); font-weight: 400; font-variant-numeric: tabular-nums; font-size: 1.125rem; }
.card-product__flag { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: #7A2A2F; color: var(--c-terre-text); margin-left: 0.5rem; }
.product-grid { margin-bottom: 1rem; }
.grid-editorial { width: 100%; }
.grid-editorial .craft-fig, .grid-editorial picture { height: 100%; }
.grid-editorial img { width: 100%; height: 100%; aspect-ratio: 1 / 1; -o-object-fit: cover; object-fit: cover; }
@supports (display: grid) {
.grid-editorial { grid-column: span 2; grid-row: span 2; }
.grid-editorial img { aspect-ratio: auto; }
}
/* ---------- Accueil 4 : la créatrice ---------- */
.home-creator__grid, .creator__grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.home-creator__portrait, .creator__portrait { width: 60%; margin: 0 auto 1.5rem; }
.home-creator__text, .creator__text { width: 100%; }
.home-creator__name, .creator__name { font-size: 2rem; margin-bottom: 1rem; }
.home-creator__lines { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 1.25rem; line-height: 1.5; color: #3A2321; color: var(--c-brun); max-width: 34rem; }
.creator__text p { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 1.1875rem; line-height: 1.5; color: #1E0C0D; color: var(--c-charbon); max-width: 36rem; }
@media (min-width: 64em) {
.home-creator__portrait, .creator__portrait { width: 34%; margin: 0; }
.home-creator__text, .creator__text { width: 66%; padding-left: 5rem; }
.home-creator__name, .creator__name { font-size: 2.5rem; }
.creator__grid { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
}
/* ---------- Journal ---------- */
.card-post { height: 100%; }
.card-post__media { display: block; overflow: hidden; background: #EFE3D6; }
.card-post__media img { width: 100%; aspect-ratio: 16 / 9; -o-object-fit: cover; object-fit: cover; }
.card-post__body { padding: 0.75rem 0 0; }
.card-post__title { font-size: 1.25rem; margin-bottom: 0.4rem; }
.card-post__title a { color: #1E0C0D; color: var(--c-charbon); text-decoration: none; }
.card-post__title a:hover { color: #7A2A2F; color: var(--c-terre-text); }
.post__head { padding-top: 1rem; padding-bottom: 1.5rem; text-align: center; }
.container--post { max-width: 60rem; }
.post__media { margin-bottom: 2rem; }
.post__media img { width: 100%; aspect-ratio: 16 / 9; -o-object-fit: cover; object-fit: cover; }
.post__caption { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-style: italic; font-size: 1rem; color: #7A5A52; color: var(--t-muted); padding: 0.5rem 0 0; text-align: center; }
.post__body { padding-bottom: 1.5rem; font-size: 1.0625rem; line-height: 1.7; }
.post__body h4, .post__body h5 { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 1.375rem; text-transform: none; letter-spacing: 0; margin-top: 1.5rem; }
.post__tags { padding-bottom: 2rem; }
.post__tags .badge { margin: 0 0.25rem 0.25rem 0; }
/* ---------- Newsletter : une ligne ---------- */
.newsletter { border-top: 1px solid #E2D7C8; border-top: var(--bd); padding: 2rem 0 1rem; }
.newsletter__row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.newsletter__text { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 1.25rem; color: #3A2321; color: var(--c-brun); margin: 0 1.5rem 1rem 0; }
.newsletter__form { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-flex: 1; -ms-flex: 1 1 20rem; flex: 1 1 20rem; max-width: 30rem; }
.newsletter__form input[type="email"] { -webkit-box-flex: 1; -ms-flex: 1 1 12rem; flex: 1 1 12rem; margin: 0 0.5rem 0.5rem 0; background: transparent; }
.newsletter__form .btn { margin-bottom: 0.5rem; }
.newsletter__demo { margin: 0.25rem auto 0; }
/* ---------- Boutique / filtres en ligne ---------- */
.shop { padding-bottom: 3rem; }
.filters { padding: 0.5rem 0 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid #E2D7C8; border-bottom: var(--bd); }
.filters__title { display: none; }
.filters__row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; margin: 0 -0.5rem; }
.filters__row .field { width: 50%; padding: 0 0.5rem; margin-bottom: 0.75rem; }
.filters__row .field--range { width: 100%; }
.filters__row .field--check { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; padding-bottom: 0.6rem; }
.filters__row .field--actions { width: 100%; }
.filters label { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: #7A2A2F; color: var(--c-terre-text); }
.filters select, .filters input { min-height: 38px; font-size: 0.9375rem; background-color: transparent; border-color: #E2D7C8; border-color: var(--c-sable); }
.range { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.range span { padding: 0 0.5rem; color: #7A5A52; }
@media (min-width: 64em) {
.filters__row .field, .filters__row .field--range, .filters__row .field--actions { width: auto; -webkit-box-flex: 0; -ms-flex: 0 1 11rem; flex: 0 1 11rem; }
.filters__row .field--range { -ms-flex: 0 1 15rem; flex: 0 1 15rem; }
.filters__row .field--actions { -ms-flex: 0 0 auto; flex: 0 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; margin-left: auto; }
}
.collection-meta { margin-bottom: 1rem; }
.collection-meta__row { border-bottom: 1px solid #E2D7C8; border-bottom: var(--bd); padding-bottom: 0.75rem; }
.collection-meta__row p { margin-bottom: 0.4rem; }
/* ---------- Fiche produit : galerie 4:5 empilée + colonne collante + accordéons ---------- */
.product { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-bottom: 2rem; }
.product__gallery { width: 100%; margin-bottom: 1.5rem; }
.product__info { width: 100%; }
.product__stack { display: -webkit-box; display: -ms-flexbox; display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; margin: 0 -1rem; padding: 0 1rem; }
.product__slide { -ms-flex: 0 0 86%; flex: 0 0 86%; scroll-snap-align: start; margin-right: 0.5rem; background: #EFE3D6; background: var(--c-ivoire-2); }
.product__slide img { width: 100%; aspect-ratio: 4 / 5; -o-object-fit: cover; object-fit: cover; }
.product__zoom-link { display: block; cursor: zoom-in; }
.product__title { font-size: 1.75rem; margin-bottom: 0.5rem; }
.made-line { font-size: 1.0625rem; font-style: italic; color: #7A2A2F; color: var(--c-terre-text); margin: 0 0 1rem; line-height: 1.4; }
.price-block--big .price { font-size: 1.375rem; font-family: "Jost", Arial, sans-serif; font-family: var(--f-sans); font-weight: 400; font-variant-numeric: tabular-nums; }
.product__flags { margin: 0.25rem 0 0.75rem; }
.product__buy { margin: 0.5rem 0 1.5rem; padding: 0; }
.product__stock { margin-bottom: 0.75rem; color: #3A2321; }
.qty { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 0.75rem; }
.qty label { margin: 0 0.75rem 0 0; font-weight: 400; }
.qty input { width: 5rem; background: transparent; }
.product__form .btn { margin-top: 0.25rem; }
.product__acc details > :not(summary) { padding-bottom: 1rem; }
.product__acc summary { font-size: 1.125rem; }
.product-desc .prose ul { list-style: none; padding-left: 0; }
.product-desc .prose li { padding: 0.3rem 0; border-bottom: 1px solid #EFE3D6; }
.product__short { margin-top: 1rem; }
.specs { margin: 0; }
.specs__row { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0.45rem 0; border-bottom: 1px solid #EFE3D6; border-bottom-color: var(--c-sable-2); font-size: 0.9375rem; }
.specs__row dt { width: 40%; -ms-flex-negative: 0; flex-shrink: 0; color: #7A5A52; color: var(--t-muted); padding-right: 0.5rem; }
.specs__row dd { margin: 0; }
.commitment p { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 1.125rem; line-height: 1.5; color: #3A2321; color: var(--c-brun); margin-bottom: 0.6rem; }
@media (min-width: 64em) {
.product__gallery { width: 55%; padding-right: 3.5rem; margin-bottom: 0; }
.product__info { width: 45%; }
.product__sticky { position: -webkit-sticky; position: sticky; top: 72px; }
.product__stack { display: block; overflow: visible; margin: 0; padding: 0; }
.product__slide { margin: 0 0 1rem; }
}
/* Zoom */
.zoom { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 300; z-index: var(--z-modal); background: rgba(30,12,13,0.92); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 1rem; overflow: auto; }
.zoom[hidden] { display: none; }
.zoom img { max-width: 100%; max-height: 90vh; width: auto; height: auto; -o-object-fit: contain; object-fit: contain; }
.zoom__close { position: fixed; top: 1rem; right: 1rem; width: 44px; height: 44px; border-radius: 50%; background: #F7F3ED; color: #1E0C0D; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
/* ---------- Pages de récit : hero image + texte posé ---------- */
.page-hero { position: relative; min-height: 20rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #E2D7C8; background: var(--c-sable); overflow: hidden; }
.page-hero__media { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0; }
.page-hero__media picture, .page-hero__media img { width: 100%; height: 100%; }
.page-hero__media img { -o-object-fit: cover; object-fit: cover; }
.page-hero__media::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(30,12,13,0.55); }
.page-hero__text { position: relative; text-align: center; padding: 3rem 1rem; max-width: 46rem; }
.page-hero__text h1, .page-hero__title { color: #F7F3ED; font-weight: 400; margin-bottom: 0.75rem; }
.page-hero__manifesto { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 1.125rem; line-height: 1.5; color: #F7F3ED; margin: 0; }
@media (min-width: 64em) { .page-hero { min-height: 30rem; } .page-hero--tall { min-height: 36rem; } .page-hero__manifesto { font-size: 1.25rem; } .site-main .page-hero__title { font-size: 2.75rem; } }
/* Atelier : déclaration, piliers, personnes, lieu, processus, feuilles */
.declaration { padding-bottom: 1rem; }
.declaration__text { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 1.375rem; line-height: 1.45; color: #1E0C0D; color: var(--c-charbon); }
@media (min-width: 48em) { .declaration__text { font-size: 1.625rem; } }
.pillars { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -1rem; }
.pillar { width: 100%; padding: 0 1rem; margin-bottom: 2rem; text-align: center; }
.pillar__n { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 4rem; line-height: 1; color: #1E0C0D; color: var(--c-charbon); margin-bottom: 0.75rem; }
.pillar__title { margin-bottom: 0.5rem; }
.pillar__text { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 1.125rem; line-height: 1.45; color: #3A2321; color: var(--c-brun); max-width: 20rem; margin: 0 auto 0.5rem; }
@media (min-width: 48em) { .pillar { width: 33.333%; } }
.people__grid, .place__grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.people__text, .people__photo, .place__map, .place__text { width: 100%; }
.people__text { text-align: center; margin-bottom: 1.5rem; }
.people__n { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 4.5rem; line-height: 1; color: #1E0C0D; color: var(--c-charbon); margin: 0.5rem 0; }
.people__l { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 1.25rem; color: #3A2321; color: var(--c-brun); }
.people__stat { font-size: 0.9375rem; margin: 0.2rem 0; }
.place__map { margin-bottom: 1.5rem; }
.place__title { margin-bottom: 0.75rem; }
.place__addr { font-style: normal; font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 1.125rem; line-height: 1.5; color: #3A2321; color: var(--c-brun); margin-bottom: 1rem; }
.java-map { width: 100%; height: auto; display: block; }
.java-map__land { fill: #EFE3D6; stroke: #3A2321; stroke-width: 1.2; }
.java-map__dot { fill: #401215; }
.java-map__ring { fill: none; stroke: #401215; stroke-width: 1; }
.java-map__city { fill: #7A5A52; }
.java-map__label { font-family: "Cormorant Garamond", Georgia, serif; font-size: 26px; fill: #1E0C0D; }
.java-map__small { font-family: "Cormorant Garamond", Georgia, serif; font-size: 15px; fill: #7A5A52; letter-spacing: 0.06em; }
@media (min-width: 64em) {
.people__text { width: 40%; text-align: left; margin: 0; padding-right: 3rem; }
.people__photo { width: 60%; }
.place__map { width: 50%; margin: 0; padding-right: 3rem; }
.place__text { width: 50%; }
}
.process { padding-bottom: 0; }
.step { border-top: 1px solid #E2D7C8; border-top: var(--bd); padding: 2.5rem 0; }
.step__grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.step__media { width: 100%; margin-bottom: 1.25rem; }
.step__body { width: 100%; }
.step__n { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 4rem; line-height: 1; color: #401215; color: var(--c-terre); margin-bottom: 0.5rem; }
.step__title { font-size: 1.75rem; margin-bottom: 0.5rem; }
.step__more summary { font-size: 1rem; }
.step__thumbs { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0.5rem -0.25rem 0; }
.step__thumbs .craft-fig { width: 50%; padding: 0 0.25rem; }
.step__thumbs img { aspect-ratio: 4 / 5; -o-object-fit: cover; object-fit: cover; }
.craft-quote { margin: 0 0 1rem; padding-left: 1rem; border-left: 1px solid #401215; border-left-color: var(--c-terre); }
.craft-quote__text { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 1.125rem; line-height: 1.45; color: #3A2321; color: var(--c-brun); margin-bottom: 0.25rem; }
.craft-quote--lead .craft-quote__text { font-size: 1.375rem; color: #1E0C0D; color: var(--c-charbon); }
.craft-quote__src { font-size: 0.75rem; color: #7A5A52; color: var(--t-muted); }
.craft-quote__src a { color: #7A2A2F; color: var(--c-terre-text); }
@media (min-width: 64em) {
.step { padding: 4rem 0; }
.step__media { width: 46%; margin-bottom: 0; padding-right: 4rem; }
.step__body { width: 54%; max-width: 34rem; }
.step--flip .step__grid { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
.step--flip .step__media { padding-right: 0; padding-left: 4rem; }
.step__title { font-size: 2.25rem; }
}
.leaves { border-top: 1px solid #E2D7C8; border-top: var(--bd); }
.leaves__list { margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.leaf { width: 100%; padding: 1rem 1.5rem 1rem 0; border-top: 1px solid #EFE3D6; border-top-color: var(--c-sable-2); }
.leaf__name { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 1.75rem; line-height: 1.1; color: #1E0C0D; color: var(--c-charbon); margin-bottom: 0.25rem; }
.leaf__note { margin: 0; font-size: 0.9375rem; color: #3A2321; color: var(--c-brun); }
.leaf__src { display: block; margin-top: 0.15rem; }
@media (min-width: 48em) { .leaf { width: 50%; } }
@media (min-width: 64em) { .leaf { width: 33.333%; } }
/* Matières */
.materials__intro { margin-bottom: 1rem; }
.materials { margin: 0; }
.material { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 2.5rem 0; border-top: 1px solid #E2D7C8; border-top: var(--bd); }
.material > .craft-fig, .material__body { width: 100%; }
.material > .craft-fig { margin-bottom: 1.25rem; }
.material__title { font-size: 2rem; margin-bottom: 0.25rem; }
.material__types { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 1.125rem; font-style: italic; color: #7A2A2F; color: var(--c-terre-text); margin-bottom: 0.5rem; }
.material__origin .eyebrow { display: inline; margin-right: 0.5rem; }
.materials__more { margin-top: 2rem; }
@media (min-width: 64em) {
.material > .craft-fig { width: 42%; margin: 0; padding-right: 4rem; }
.material__body { width: 58%; max-width: 34rem; }
.material > .material__body:first-child { width: 100%; max-width: 40rem; }
.material:nth-child(even) { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
.material:nth-child(even) > .craft-fig { padding-right: 0; padding-left: 4rem; }
.site-main .material__title { font-size: 2.25rem; }
}
/* Créatrice : repères */
.marks__list { margin: 0 auto; max-width: 46rem; }
.mark { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 1rem 0; border-top: 1px solid #E2D7C8; border-top: var(--bd); }
.mark:last-child { border-bottom: 1px solid #E2D7C8; border-bottom: var(--bd); }
.mark__k { width: 100%; font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 1.5rem; color: #7A2A2F; color: var(--c-terre-text); margin-bottom: 0.25rem; }
.mark__v { width: 100%; margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 1.125rem; color: #1E0C0D; color: var(--c-charbon); }
@media (min-width: 48em) { .mark__k { width: 30%; margin: 0; padding-right: 1rem; } .mark__v { width: 70%; } }
.creator__original { padding-bottom: 3rem; }
/* ---------- Pages contenu (éditoriales, contact, légal, recherche) ---------- */
.editorial { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding-bottom: 3rem; }
.editorial__media { width: 100%; margin-bottom: 1.5rem; }
.editorial__text { width: 100%; }
.editorial__media img { width: 100%; }
@media (min-width: 64em) { .editorial__media { width: 38%; margin-bottom: 0; padding-right: 3rem; position: -webkit-sticky; position: sticky; top: 72px; } .editorial__text { width: 62%; } }
.chapters { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -0.5rem; }
.chapter { display: block; width: 100%; padding: 0 0.5rem; margin-bottom: 1.5rem; text-decoration: none; color: inherit; }
.chapter__media { position: relative; overflow: hidden; background: #EFE3D6; }
.chapter__media img { width: 100%; height: 100%; aspect-ratio: 3 / 4; -o-object-fit: cover; object-fit: cover; }
.chapter__body { padding: 0.75rem 0 0.5rem; }
.chapter__title { margin-bottom: 0.25rem; }
.chapter__cta { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: #7A2A2F; color: var(--c-terre-text); }
@media (min-width: 48em) { .chapter { width: 33.333%; } }
@supports (display: grid) {
.chapters { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin: 0; }
.chapter { width: auto !important; padding: 0; margin: 0; }
@media (min-width: 48em) { .chapters { grid-template-columns: repeat(3, 1fr); } }
}
.lookbook-campaign { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -0.5rem; }
.lookbook-campaign__item { width: 100%; padding: 0 0.5rem; margin-bottom: 1rem; }
.lookbook-grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -0.5rem; }
.lookbook-grid__item { display: block; width: 50%; padding: 0 0.5rem; margin-bottom: 1rem; text-decoration: none; color: #3A2321; color: var(--c-brun); }
.lookbook-grid__item img { width: 100%; aspect-ratio: 3 / 4; -o-object-fit: cover; object-fit: cover; }
.lookbook-grid__caption { display: block; padding: 0.4rem 0; font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 1.0625rem; }
@media (min-width: 48em) { .lookbook-campaign__item { width: 50%; } .lookbook-grid__item { width: 25%; } }
@supports (display: grid) {
.lookbook-campaign, .lookbook-grid { display: grid; gap: 1rem; margin: 0; grid-template-columns: repeat(2, 1fr); }
.lookbook-campaign__item, .lookbook-grid__item { width: auto; padding: 0; margin: 0; }
.lookbook-campaign { grid-template-columns: 1fr; }
@media (min-width: 48em) { .lookbook-campaign { grid-template-columns: repeat(2, 1fr); } .lookbook-grid { grid-template-columns: repeat(4, 1fr); } }
}
.dl dt { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 1.25rem; color: #3A2321; margin-top: 1rem; }
.dl dd { margin: 0.25rem 0 0.5rem; }
.prose--wide { max-width: none; }
.faq details .prose { max-width: none; }
.contact-list { margin: 0 0 2rem; }
.contact-list div { padding: 0.75rem 0; border-bottom: 1px solid #E2D7C8; border-bottom: var(--bd); }
.contact-list dt { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: #7A2A2F; color: var(--c-terre-text); font-weight: 600; }
.contact-list dd { margin: 0.15rem 0 0; }
.legal-list li { padding: 0.75rem 0; border-bottom: 1px solid #E2D7C8; border-bottom: var(--bd); font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 1.25rem; }
.legal-list a { text-decoration: none; color: #3A2321; }
.legal-list a:hover { color: #7A2A2F; color: var(--c-terre-text); }
.search-form { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 40rem; margin-bottom: 1rem; }
.search-form input { margin-right: 0.5rem; }
.search-fallback details ul.cols { -webkit-columns: 2; columns: 2; -webkit-column-gap: 2rem; column-gap: 2rem; }
.search-fallback li { padding: 0.2rem 0; -webkit-column-break-inside: avoid; break-inside: avoid; }
.search-results { list-style: none; padding: 0; margin: 0 0 2rem; }
.search-results li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid #E2D7C8; border-bottom: var(--bd); }
.search-results img { width: 56px; height: 72px; -o-object-fit: cover; object-fit: cover; margin-right: 0.75rem; -ms-flex-negative: 0; flex-shrink: 0; background: #EFE3D6; }
.search-results a { font-weight: 500; text-decoration: none; color: #1E0C0D; }
.search-results a:hover { color: #7A2A2F; color: var(--c-terre-text); }
.todo h2 { margin-top: 2rem; }
.todo details { border-top: 1px solid #E2D7C8; }
/* ---------- Panier / paiement ---------- */
.cart__layout, .checkout__layout { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-bottom: 3rem; }
.cart__items, .checkout__form { width: 100%; margin-bottom: 1.5rem; }
.cart__summary, .checkout__summary { width: 100%; -ms-flex-item-align: start; align-self: flex-start; }
.cart-line { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid #E2D7C8; border-bottom: var(--bd); }
.cart-line__actions { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-top: 0.5rem; }
@media (min-width: 40em) { .cart-line { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .cart-line__actions { width: auto; margin-top: 0; } }
.cart-line__img { width: 72px; height: 72px; -o-object-fit: cover; object-fit: cover; margin-right: 0.75rem; background: #EFE3D6; -ms-flex-negative: 0; flex-shrink: 0; }
.cart-line__body { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; }
.cart-line__name { font-weight: 500; text-decoration: none; color: #1E0C0D; display: block; }
.cart-line__name:hover { color: #7A2A2F; color: var(--c-terre-text); }
.cart-line input.cart-line__qty { display: inline-block; width: 4.5rem; -ms-flex: 0 0 4.5rem; flex: 0 0 4.5rem; min-height: 36px; padding: 0.25rem 0.5rem; margin: 0 0.75rem 0 0; }
.cart-line__total { min-width: 4.5rem; text-align: right; }
.cart-line__remove { color: #7A2A2F; font-size: 0.8125rem; text-decoration: underline; margin-left: 0.75rem; }
.totals { margin: 1rem 0; }
.totals > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 0.4rem 0; }
.totals dd { margin: 0; font-weight: 600; }
.totals__total { border-top: 1px solid #B08A5A; margin-top: 0.5rem; padding-top: 0.75rem !important; font-size: 1.125rem; }
.ship-method { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: 0.6rem 0.75rem; border: 1px solid #E2D7C8; border: var(--bd); border-radius: 2px; margin-bottom: 0.5rem; background: #EFE3D6; font-weight: 400; }
.ship-method input { margin-top: 0.25rem; }
.steps { list-style: none; padding: 0; margin: 0 0 1.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; border-bottom: 1px solid #E2D7C8; border-bottom: var(--bd); }
.steps li { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 0.6rem 0.25rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #7A5A52; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.steps li span { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: #E2D7C8; color: #3A2321; text-align: center; line-height: 22px; margin-right: 0.35rem; font-size: 0.75rem; }
.steps li.is-active { color: #7A2A2F; color: var(--c-terre-text); border-bottom-color: #401215; border-bottom-color: var(--c-terre); }
.steps li.is-active span, .steps li.is-done span { background: #401215; color: #F7F3ED; }
.js .checkout fieldset[data-step] { display: none; }
.js .checkout fieldset[data-step].is-active { display: block; }
.pay-method { padding: 0.75rem; border: 1px solid #E2D7C8; border: var(--bd); border-radius: 2px; margin-bottom: 0.5rem; background: #EFE3D6; font-weight: 400; }
.confirm { text-align: center; padding: 2rem 1.5rem; }
.confirm__number { font-size: 2.25rem; color: #401215; color: var(--c-terre); letter-spacing: 0.04em; margin: 0.25rem 0 1rem; }
.account .card h2 { margin-bottom: 1rem; }
@media (min-width: 64em) {
.cart__items, .checkout__form { width: 62%; padding-right: 3rem; margin-bottom: 0; }
.cart__summary, .checkout__summary { width: 38%; position: -webkit-sticky; position: sticky; top: 1rem; }
}
/* ---------- Pied de page : ivoire, 4 colonnes, manifeste 1 phrase, pas de second logo ---------- */
.site-footer { background: #F7F3ED; background: var(--c-ivoire); border-top: 1px solid #E2D7C8; border-top: var(--bd); margin-top: 3rem; padding: 3rem 0 1.5rem; color: #3A2321; color: var(--c-brun); }
.footer-grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: auto; margin-right: auto; }
.footer-col { width: 50%; padding-right: 1rem; margin-bottom: 1.5rem; }
.footer-col--brand { width: 100%; }
.footer-brandname { font-size: 1.375rem; margin-bottom: 0.5rem; color: #1E0C0D; color: var(--c-charbon); }
.footer-manifesto { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 1.125rem; line-height: 1.5; max-width: 22rem; margin-bottom: 0.75rem; }
.footer-title { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: #7A2A2F; color: var(--c-terre-text); margin-bottom: 0.75rem; }
.footer-col ul li { padding: 0.15rem 0; }
.footer-col a { color: #3A2321; color: var(--c-brun); text-decoration: none; }
.footer-col a:hover { color: #7A2A2F; color: var(--c-terre-text); text-decoration: underline; }
.site-footer address { font-style: normal; line-height: 1.6; }
.footer-bottom { border-top: 1px solid #E2D7C8; border-top: var(--bd); padding-top: 1rem; margin-top: 0.5rem; }
.footer-bottom p { margin-bottom: 0.4rem; }
.footer-bottom a { color: #3A2321; color: var(--c-brun); }
@media (min-width: 48em) { .footer-col { width: 25%; } .footer-col--brand { width: 100%; } }
@media (min-width: 64em) { .footer-col { width: 18%; } .footer-col--brand { width: 46%; } }
.wa-float { position: fixed; right: 1rem; bottom: 1rem; width: 48px; height: 48px; border-radius: 50%; background: #7A5A52; background: var(--c-foret); color: #F7F3ED; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; box-shadow: 0 4px 12px rgba(30,12,13,0.2); z-index: 90; text-decoration: none; }
.wa-float .ic { width: 24px; height: 24px; }
.wa-float:hover { background: #401215; background: var(--c-indigo); color: #F7F3ED; }
.toast { position: fixed; left: 50%; bottom: 5.5rem; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: #1E0C0D; color: #F7F3ED; padding: 0.75rem 1.25rem; font-size: 0.9375rem; z-index: 400; max-width: calc(100% - 2rem); box-shadow: 0 12px 32px rgba(30,12,13,0.2); }
.toast a { color: #E2D7C8; }
/* ---------- Page de choix de langue (racine) ---------- */
.page-langchooser { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 100vh; text-align: center; padding: 1rem; }
.langchooser__logo { width: auto; height: 220px; margin: 0 auto 1rem; }
.langchooser__list { list-style: none; padding: 0; margin: 1.5rem 0; }
.langchooser__list li { margin-bottom: 0.75rem; }
.langchooser__list .btn { min-width: 14rem; }
.langchooser__name { font-size: 2.25rem; margin: 0.5rem 0 0.25rem; }
.langchooser__tagline { font-size: 1.25rem; font-style: italic; color: #3A2321; }
/* ---------- Impression ---------- */
@media print { .site-header, .site-footer, .wa-float, .filters, .toast { display: none !important; } }
/* ===== v4 — médiathèque, médias de test, reconnaissance, professionnels (SPEC déc. 18-20) ===== */
.media { position: relative; }
.media img { display: block; }
.page-hero__media.media { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.page-hero__media.media img { height: 100%; }
.page-hero__media .ph-badge { z-index: 2; }
.frame--45 { padding-top: 125%; }
.crop-top { -o-object-position: center top; object-position: center top; }
.crop-bottom { -o-object-position: center bottom; object-position: center bottom; }
.ph-badge { position: absolute; right: 6px; bottom: 6px; z-index: 2; font-family: "Jost", Arial, sans-serif; font-family: var(--f-sans); font-size: 11px; line-height: 1; letter-spacing: 0.02em; padding: 4px 7px; color: #F7F3ED; background: rgba(30,12,13,0.62); border: 1px solid rgba(247,243,237,0.35); border-radius: 2px; pointer-events: none; white-space: nowrap; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; }
.curtain__media .ph-badge { bottom: 10px; right: 10px; }
.curtain__video { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.curtain__video video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.curtain__media .curtain__img { height: 100%; }
.curtain__media figure.media { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0; }
.curtain__media figure.media picture, .curtain__media figure.media img { width: 100%; height: 100%; }
.curtain__media .ph-badge { z-index: 3; }
@media (prefers-reduced-motion: reduce) { .curtain__video { display: none; } }
.people__photo .media { margin: 0 auto; }
.people__photo .media img { width: 100%; height: auto; }
.recognition__grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.recognition__event, .recognition__kebaya { width: 100%; }
.recognition__event .media { margin: 0 auto; }
.recognition__event .media img { width: 100%; height: auto; }
.recognition__caption { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 1.125rem; line-height: 1.45; margin: 1rem 0 0.25rem; }
.recognition__kebaya { margin-top: 2rem; }
.recognition__kebaya .media { width: 60%; margin: 0 auto; }
@media (min-width: 64em) {
/* 26 octobre 2026 — Lionnel : « c'est pas tres joli la, il y a un trou ».
Les deux colonnes etaient figees a 58 % et 30 %. L image de gauche est
carree, celle de droite au format 4:5 : a ces largeurs la, la droite
finissait 166 px plus haut que la gauche et laissait un vide.
Les largeurs sont maintenant choisies pour que la hauteur tombe juste.
L image de droite occupe 41,8 % et l ecart entre les colonnes 5,7 %, soit
un rapport de largeurs de 0,8 — exactement le format 4:5. Les deux images
ont donc la meme hauteur a toutes les largeurs d ecran, et l image de
droite n est pas recadree d un pixel : elle est seulement plus grande. */
.recognition__event { width: 58%; padding-right: 5.7%; }
.recognition__kebaya { width: 41.8%; margin-top: 0; }
.recognition__kebaya .media { width: 100%; }
}
.media-credit { margin: 0.25rem 0 0; }
.home-pro { margin: -1rem 0 2.5rem; }
.pro { max-width: 52rem; }
.pro__block { margin-bottom: 3rem; }
.pro__who li { padding: 0.5rem 0; border-bottom: 1px solid #E2D7C8; border-color: var(--c-sable); font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 1.25rem; }
.pro__offer li { position: relative; padding-left: 3.5rem; margin-bottom: 1.5rem; }
.pro__n { position: absolute; left: 0; top: -0.3rem; font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 2.5rem; line-height: 1; color: #401215; color: var(--c-terre); }
.pro__offer-title { font-size: 1.25rem; margin: 0 0 0.25rem; }
.pro__how { padding-left: 1.25rem; }
.pro__how li { margin-bottom: 0.5rem; }
.pro__terms { margin-top: 1rem; }
.pro__linesheet { margin-top: 1.5rem; }
.nav__item--pro a { color: #7A2A2F; color: var(--c-terre-text); }
.hdr-pro { display: none; }
@media (min-width: 64em) {
.nav__item--pro { display: none; }
.hdr-pro { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 1rem; color: #7A2A2F; color: var(--c-terre-text); white-space: nowrap; padding: 0 0.6rem; }
.hdr-pro[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
}
.curtain__media .ph-badge { right: auto; left: 10px; }
/* ── v5 — bandeau « site de démonstration » (SITE_MODE=test uniquement) ─────────
Discret, en tout haut de page, avant l'en-tête collant ; jamais collant lui-même. */
.demo-banner { margin: 0; padding: 5px 16px; text-align: center; font-family: "Jost", Arial, sans-serif; font-family: var(--f-sans); font-size: 11px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: #F7F3ED; background: #3A2321; background: var(--c-brun, #3A2321); }
.is-compact .demo-banner { display: none; }
@media print { .demo-banner { display: none; } }
/* ============================================================ v5 — Engagements (4 piliers) et familles de techniques */
/* Les 4 engagements : ce sont des MOTS, pas des chiffres — pas de gros nombre, le mot porte seul. */
.stats--pillars { margin-bottom: 0.75rem; }
.stat--pillar { padding: 1.25rem 0.5rem; }
.stat__l--strong { font-size: 0.9375rem; letter-spacing: 0.1em; line-height: 1.35; color: #1E0C0D; color: var(--c-charbon); }
.stat__n--sm { font-size: 1.5rem; margin-bottom: 0.25rem; color: #401215; color: var(--c-terre); }
.pillars-source { margin: 0 0 2rem; }
@media (min-width: 48em) { .stat--pillar { padding: 1.75rem 0.5rem; } .stat__l--strong { font-size: 1.0625rem; } }
/* l'atelier passe de 3 à 4 piliers */
@media (min-width: 48em) { .pillar { width: 50%; } }
@media (min-width: 64em) { .pillar { width: 25%; } }
/* Familles de techniques (page Matières) */
.tech-families__list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -1rem; }
.tech-family { width: 100%; padding: 0 1rem 2rem; }
.tech-family__title { font-size: 1.5rem; margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid #E2D7C8; border-bottom: var(--bd); }
.tech-family__count { margin-top: 0.5rem; }
.tech-family .craft-quote { margin: 0.75rem 0; }
@media (min-width: 48em) { .tech-family { width: 50%; } }
@media (min-width: 64em) { .tech-family { width: 25%; } }
/* Encadré honnête : ni label, ni promesse — un constat */
.callout { border-left: 3px solid #401215; border-left-color: var(--c-terre); background: #EFE3D6; background: var(--c-ivoire-2, #EFE3D6); padding: 0.75rem 0.875rem; font-size: 0.875rem; line-height: 1.5; color: #3A2321; color: var(--c-brun); margin: 0.75rem 0; }
/* Citation de la créatrice, en exergue */
.creator-quote { padding-top: 1rem; }
.pull-quote { margin: 0.5rem 0 0.75rem; }
.pull-quote blockquote { margin: 0; }
.pull-quote__text { font-family: "Cormorant Garamond", Georgia, serif; font-family: var(--f-serif); font-size: 1.75rem; line-height: 1.3; color: #1E0C0D; color: var(--c-charbon); margin: 0; }
.pull-quote__by { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: #7A2A2F; color: var(--c-terre-text); margin-top: 0.75rem; }
.pull-quote__trans { font-size: 0.9375rem; color: #3A2321; color: var(--c-brun); margin: 0.5rem 0 0.25rem; }
@media (min-width: 48em) { .pull-quote__text { font-size: 2.25rem; } }
/* ==========================================================================
v6 — 2026-09-20 : robustesse du menu, lisibilité, alignements, finition.
Bloc ajouté APRÈS le reste : il gagne à spécificité égale.
========================================================================== */
/* ---------- 1. Jetons de mouvement (4 durées, 2 courbes) ---------- */
:root {
--mo-short: 120ms;
--mo-base: 250ms;
--mo-long: 500ms;
--mo-image: 1100ms;
--mo-ease: cubic-bezier(0, 0, 0.3, 1);
--mo-ease-image: cubic-bezier(0.15, 0.75, 0.5, 1);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}
/* ---------- 2. Menu : fonctionne SANS JavaScript ----------
La case à cocher est l'unique source de vérité. Le JS ne fait qu'améliorer
(aria, Échap, verrouillage du défilement). Si le JS ne se charge pas,
le menu s'ouvre quand même. */
.nav-switch { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); -webkit-clip-path: inset(50%); clip-path: inset(50%); white-space: nowrap; border: 0; }
.nav-switch:checked ~ .nav { display: block; }
.hdr-menu { margin-left: -8px; cursor: pointer; }
.nav-switch:focus-visible ~ .hdr-menu { outline: 2px solid #7A2A2F; outline-offset: 2px; }
.burger { display: block; position: relative; width: 20px; height: 14px; }
.burger i { position: absolute; left: 0; width: 100%; height: 1.4px; background: currentColor; border-radius: 1px; transition: -webkit-transform var(--mo-base) var(--mo-ease), opacity var(--mo-short) linear; transition: transform var(--mo-base) var(--mo-ease), opacity var(--mo-short) linear; }
.burger i:nth-child(1) { top: 0; }
.burger i:nth-child(2) { top: 6.3px; }
.burger i:nth-child(3) { top: 12.6px; }
.nav-switch:checked ~ .hdr-menu .burger i:nth-child(1) { -webkit-transform: translateY(6.3px) rotate(45deg); transform: translateY(6.3px) rotate(45deg); }
.nav-switch:checked ~ .hdr-menu .burger i:nth-child(2) { opacity: 0; }
.nav-switch:checked ~ .hdr-menu .burger i:nth-child(3) { -webkit-transform: translateY(-6.3px) rotate(-45deg); transform: translateY(-6.3px) rotate(-45deg); }
/* tiroir : ombre, hauteur bornée, défilement fluide */
.nav { box-shadow: 0 18px 32px rgba(30,12,13, 0.10); -webkit-overflow-scrolling: touch; }
.drawer-open, .drawer-open body { overflow: hidden; }
@media (min-width: 64em) {
.nav-switch { display: none; }
.nav { box-shadow: none; }
}
/* ---------- 3. Lisibilité : voile constant sous tout texte posé sur image ---------- */
.curtain__media::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(30,12,13, 0.34); pointer-events: none; z-index: 1; }
.curtain__media::after { height: 82%; background: -webkit-gradient(linear, left bottom, left top, from(rgba(30,12,13, 0.78)), to(rgba(30,12,13, 0))); background: linear-gradient(0deg, rgba(30,12,13, 0.78) 0%, rgba(30,12,13, 0) 100%); z-index: 2; }
.curtain__text { z-index: 3; text-shadow: 0 1px 24px rgba(30,12,13, 0.5); }
.eyebrow--onimage { color: #EFE3D6; font-weight: 600; letter-spacing: 0.18em; opacity: 1; }
.curtain__title { color: #EFE3D6; }
.page-hero__media::after { background: rgba(30,12,13, 0.52); }
.page-hero__text, .page-hero__inner { text-shadow: 0 1px 20px rgba(30,12,13, 0.45); }
/* taille minimale de texte : rien sous 14 px sur mobile */
.text-xs, .small, .muted { font-size: 0.875rem; }
.card-product__meta { font-size: 0.9375rem; }
/* ---------- 4. Alignements : une seule échelle, un seul conteneur ---------- */
.container { width: 100%; max-width: 75rem; margin-left: auto; margin-right: auto; padding-left: 1.25rem; padding-right: 1.25rem; }
@media (min-width: 48em) { .container { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 64em) { .container { padding-left: 2.5rem; padding-right: 2.5rem; } }
.section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
@media (min-width: 48em) { .section { padding-top: 5rem; padding-bottom: 5rem; } }
.section + .section { padding-top: 0; }
.section-head { margin-bottom: 2rem; }
/* l'en-tête reste sur UNE ligne à toutes les largeurs, même sans JS */
.header-bar, .no-js .header-bar { height: 64px; height: var(--h-header); -ms-flex-wrap: nowrap; flex-wrap: nowrap; padding-top: 0; padding-bottom: 0; }
.no-js .header-bar__left { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; width: auto; -ms-flex: 1 1 0; flex: 1 1 0; }
.no-js .nav { position: absolute; border-bottom: 1px solid #E2D7C8; padding: 0.5rem 1rem 1.25rem; max-height: calc(100vh - 64px); }
@media (min-width: 64em) { .header-bar, .no-js .header-bar { height: 92px; height: var(--h-header-lg); } }
/* ---------- 5. En-tête : se cache en descendant, revient en montant ---------- */
.site-header { transition: -webkit-transform var(--mo-long) var(--mo-ease), box-shadow var(--mo-base) var(--mo-ease); transition: transform var(--mo-long) var(--mo-ease), box-shadow var(--mo-base) var(--mo-ease); will-change: transform; }
.site-header.is-stuck { box-shadow: 0 4px 20px rgba(30,12,13, 0.07); }
.site-header.is-hidden { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); }
.nav-switch:checked ~ .nav ~ *, .drawer-open .site-header { -webkit-transform: none !important; transform: none !important; }
/* ---------- 6. Liens de navigation : soulignement qui se dessine ---------- */
@media (min-width: 64em) {
.nav__item > a { position: relative; }
.nav__item > a::before { content: ""; position: absolute; left: 0; right: 1.1rem; bottom: 2px; height: 1px; background: currentColor; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: right center; transform-origin: right center; transition: -webkit-transform var(--mo-base) var(--mo-ease); transition: transform var(--mo-base) var(--mo-ease); }
.nav__item > a:hover::before, .nav__item > a:focus-visible::before { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: left center; transform-origin: left center; }
/* sous-menu : glisse et s'estompe */
.nav__sub { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); transition: opacity var(--mo-base) var(--mo-ease), visibility var(--mo-base), -webkit-transform var(--mo-base) var(--mo-ease); transition: opacity var(--mo-base) var(--mo-ease), visibility var(--mo-base), transform var(--mo-base) var(--mo-ease); }
.nav__item:hover > .nav__sub, .nav__item:focus-within > .nav__sub { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
/* ---------- 7. Cartes produit : zoom lent et fondu croisé ---------- */
.card-product__media img { transition: -webkit-transform var(--mo-image) var(--mo-ease-image); transition: transform var(--mo-image) var(--mo-ease-image); }
.card-product:hover .card-product__media img, .card-product:focus-within .card-product__media img { -webkit-transform: scale3d(1.06, 1.06, 1); transform: scale3d(1.06, 1.06, 1); }
.card-product__alt { transition: opacity var(--mo-long) var(--mo-ease); z-index: 1; }
.card-post__media img { transition: -webkit-transform var(--mo-image) var(--mo-ease-image); transition: transform var(--mo-image) var(--mo-ease-image); }
.card-post:hover .card-post__media img { -webkit-transform: scale3d(1.06, 1.06, 1); transform: scale3d(1.06, 1.06, 1); }
/* ---------- 8. Fiche produit : galerie et informations collées ---------- */
@media (min-width: 64em) {
.product__gallery, .product__info { position: -webkit-sticky; position: sticky; top: calc(92px + 1.5rem); -ms-flex-item-align: start; align-self: flex-start; }
.product__gallery { top: 1.5rem; }
}
.product__slide img { transition: -webkit-transform var(--mo-image) var(--mo-ease-image); transition: transform var(--mo-image) var(--mo-ease-image); }
.product__zoom-link:hover img { -webkit-transform: scale3d(1.04, 1.04, 1); transform: scale3d(1.04, 1.04, 1); }
.product__slide { overflow: hidden; }
/* ---------- 9. Boutons : angles vifs partout, même finition ---------- */
.btn, .btn--onimage, .hdr-search input, .hdr-search__btn, input, select, textarea { border-radius: 0; }
.btn { transition: background-color var(--mo-base) var(--mo-ease), color var(--mo-base) var(--mo-ease), border-color var(--mo-base) var(--mo-ease); }
/* ---------- 10. Images : jamais de saut de mise en page ---------- */
img { max-width: 100%; height: auto; background-color: #EFE3D6; }
.card-product__media img, .card-post__media img, .product__slide img, .curtain__media img { background-color: #EFE3D6; }
/* ---------- 11. Corrections de détail ---------- */
/* mots longs (adresses, identifiants) : on coupe plutôt que de déborder */
.site-footer, .site-footer a, .footer-col, .footer-col li, .card-product__title, .breadcrumb { overflow-wrap: anywhere; word-wrap: break-word; }
/* le bouton menu reste dans la gouttière */
.hdr-menu { margin-left: -6px; }
/* filet de sécurité : aucune page ne peut défiler horizontalement */
html, body { overflow-x: hidden; }
/* lisibilité des bandeaux de page : voile plus franc + ombre de texte */
.page-hero__media::after { background: rgba(30,12,13, 0.60); }
.page-hero__title, .page-hero__manifesto, .page-hero__text, .page-hero__inner, .page-hero .eyebrow { text-shadow: 0 1px 20px rgba(30,12,13, 0.55); }
/* barre de filtres : tous les champs sur la même ligne de base */
.filters__row > .field { -ms-flex-item-align: end; align-self: flex-end; padding-bottom: 0; }
.filters__row > .field--check { padding-bottom: 0.45rem; }
/* =========================================================================
SABDA International — surcouche charte graphique (édition 2026)
Générée par tools/rebrand.mjs. Ne pas éditer à la main.
Palette : 10 couleurs, jamais de blanc pur ni de noir pur.
Typographie : Cormorant Garamond Light (titres) + Jost 200/300/400.
========================================================================= */
:root{
--c-bordeaux:#401215; --c-bordeaux-page:#3B1114; --c-encre:#1E0C0D;
--c-creme:#EFE3D6; --c-papier:#F7F3ED; --c-rouge:#7A2A2F;
--c-or:#B08A5A; --c-brun-doux:#7A5A52; --c-texte:#3A2321; --c-filet:#E2D7C8;
--f-serif:"Cormorant Garamond", Garamond, Georgia, "Times New Roman", serif;
--f-sans:"Jost", Futura, Avenir, "Helvetica Neue", Arial, sans-serif;
--fw-regular:300; --fw-medium:400; --fw-semibold:400;
--ls-caps:0.42em;
--h-header:116px;
--h-header-lg:132px;
--h-header-compact:116px;
}
html,body{background:#F7F3ED;color:#3A2321;}
body{font-family:var(--f-sans);font-weight:300;}
/* --- pas de gras : Jost 300 en courant, 400 pour mettre en valeur --- */
strong,b,th,dt,label,.label,.price,.totals dd,.steps li,.badge,.field .error,.placeholder,
.search-results a,.cart-line__name,.card-product__title,.btn,.btn--link{font-weight:400;}
h1,h2,h3,h4,.h1,.h2,.h3,.h4,.serif,.site-main h1,.site-main h2,.site-main h3,.site-main h4,
.site-main .h1,.site-main .h2,.site-main .h3,.site-main .h4,
.curtain__title,.page-hero__title,.page-hero__text h1,.stat__n,.footer-brandname,.langchooser__name{
font-family:var(--f-serif);font-weight:300;letter-spacing:0.01em;}
/* --- surtitres : Jost ExtraLight, capitales, interlettrage 0,42 em, rouge signal --- */
h5,h6,.eyebrow,.overline,.prefs__k,.stat__l,.card-product__flag,.filters label,
.chapter__cta,.contact-list dt,.footer-title{
font-family:var(--f-sans);font-weight:200;text-transform:uppercase;
letter-spacing:0.42em;color:#7A2A2F;}
/* --- surtitres posés sur une photo : crème, jamais rouge signal (lisibilité) --- */
.eyebrow--onimage,.curtain .eyebrow,.page-hero .eyebrow,.curtain__text .eyebrow{color:#EFE3D6;}
/* --- navigation et en-tête : « les titres en Cormorant, tout le reste en Jost » (charte p18) --- */
.nav__list > li > a,.nav__sub a,.hdr-prefs__sum,.hdr-pro,.hdr-lang__list a,.prefs select,
.breadcrumb,.pagination a,.pagination span{font-family:var(--f-sans);font-weight:300;letter-spacing:0.06em;}
.nav__list > li > a{text-transform:none;}
/* --- boutons : fond bordeaux, texte crème, angles droits, survol rouge signal --- */
.btn,.btn--primary{background:#401215;color:#EFE3D6;border:1px solid #401215;
border-radius:0;font-family:var(--f-sans);font-weight:400;letter-spacing:0.2em;text-transform:uppercase;}
.btn:hover,.btn:focus-visible,.btn--primary:hover,.btn--primary:focus-visible{
background:#7A2A2F;border-color:#7A2A2F;color:#EFE3D6;}
.btn--secondary{background:transparent;color:#401215;border:1px solid #401215;}
.btn--secondary:hover,.btn--secondary:focus-visible{background:#401215;color:#EFE3D6;}
.btn--link{background:none;border:0;color:#401215;text-transform:none;letter-spacing:0;}
/* --- en-tête : logo complet, jamais sous 180 px de large (charte p5) ---
Répartition : blocs latéraux à leur taille, la marque prend la place qui reste.
Aucun débordement possible, le logo garde sa taille minimale. */
.site-header{background:#F7F3ED;border-bottom:1px solid #E2D7C8;}
.header-bar,.no-js .header-bar,.is-compact .header-bar{height:var(--h-header);}
.header-bar{justify-content:flex-start;}
.header-bar__left,.header-bar__right{flex:0 0 auto;}
/* 18/10/2026 — Lionnel : « je veux que le logo soit a gauche ».
La marque passe en premier (order:-1) et ne prend plus la place qui reste :
elle se cale a gauche, le menu la suit, et le bloc de droite est pousse au
bord par margin-left:auto. Le logo garde sa taille mini de 180 px. */
.header-bar__right{margin-left:auto;}
.brand{order:-1;flex:0 0 auto;justify-content:flex-start;
padding:6px 1rem 6px 0;min-width:0;}
.brand__logo,.is-compact .brand__logo{height:auto;width:180px;min-width:180px;
flex:0 0 auto;max-width:none;} /* jamais comprimé : la taille mini de la charte tient */
.brand__emblem{display:none;height:auto;width:56px;min-width:48px;flex:0 0 auto;max-width:none;}
@media (max-width:22.4375em){ /* < 360 px : emblème seul (charte p7) */
.brand__logo{display:none;}
.brand__emblem{display:block;}
:root{--h-header:72px;--h-header-compact:72px;}
}
.langchooser__logo{height:auto;width:min(360px,72vw);min-width:180px;}
@media (min-width:64em){
.header-bar,.no-js .header-bar,.is-compact .header-bar{height:var(--h-header-lg);}
.brand__logo,.is-compact .brand__logo{width:200px;}
}
.nav,.no-js .nav{max-height:calc(100vh - var(--h-header));}
/* --- pied de page : l'unique aplat bordeaux de la page (charte p9 et p18) --- */
.site-footer{background:#401215;color:#EFE3D6;border-top:1px solid #401215;}
.site-footer a,.site-footer p,.site-footer li,.site-footer address,.site-footer span{color:#EFE3D6;}
.site-footer .footer-title,.site-footer h2{color:#EFE3D6;font-family:var(--f-sans);font-weight:200;
text-transform:uppercase;letter-spacing:0.42em;}
.site-footer a:hover,.site-footer a:focus-visible{color:#EFE3D6;text-decoration:underline;}
.site-footer .muted,.site-footer .text-xs,.site-footer .footer-manifesto{color:#EFE3D6;opacity:0.82;}
.footer-brandname{color:#EFE3D6;font-family:var(--f-serif);font-weight:300;}
.footer-bottom{border-top:1px solid #B08A5A;}
/* --- filets : or végétal --- */
hr,.rule,.sep{border-color:#B08A5A;}
/* --- logo : ni ombre, ni effet, ni recoloration (charte p6) --- */
.brand__logo,.brand__emblem,.langchooser__logo{box-shadow:none;filter:none;}
/* ==================================================================
LISTE INFINIE (v8-1) — defilement continu sur les pages de liste.
La place des images est deja reservee plus haut (aspect-ratio 3/4 +
object-fit cover) : la page ne saute pas pendant le chargement.
Typographie : Jost Light, jamais de gras — charte p18.
================================================================== */
.liste-infinie__sentinelle { height: 1px; margin: 0; padding: 0; }
.liste-infinie__etat {
font-family: "Jost", "Futura", "Segoe UI", Roboto, Arial, sans-serif;
font-family: var(--f-sans);
font-weight: 300;
letter-spacing: 0.06em;
text-align: center;
margin: 1.75rem 0 0.5rem;
color: #7A5A52;
color: var(--t-muted);
}
.liste-infinie__etat--charge { opacity: 0.85; }
.liste-infinie__etat--fin {
padding-top: 1.25rem;
border-top: 1px solid #E2D7C8;
border-top-color: var(--c-sable);
color: #7A2A2F;
color: var(--c-terre-text);
}
/* Le bouton « Voir plus » garde le style de la charte (.btn--secondary) ;
on lui donne seulement de l'air au-dessus du pied de page. */
.product-grid + .js-only,
[data-product-grid] ~ .js-only { margin-top: 1.5rem; }
/* Apparition des nouvelles cartes : uniquement pour qui n'a pas demande
moins d'animation. Sans cette preference, la carte apparait sans effet. */
@media (prefers-reduced-motion: no-preference) {
.card-product.est-entree,
.grid-editorial.est-entree {
-webkit-animation: liste-infinie-entree 320ms ease-out both;
animation: liste-infinie-entree 320ms ease-out both;
}
@-webkit-keyframes liste-infinie-entree {
from { opacity: 0; -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); }
to { opacity: 1; -webkit-transform: none; transform: none; }
}
@keyframes liste-infinie-entree {
from { opacity: 0; -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); }
to { opacity: 1; -webkit-transform: none; transform: none; }
}
}
/* --- 2026-10-15 : bouton de langue explicite + mention de devise --- */
.hdr-prefs__label { font-weight: 600; letter-spacing: .02em; }
.hdr-devise { display: none; font-size: .72rem; letter-spacing: .06em; opacity: .7;
white-space: nowrap; margin: 0 .1rem 0 .35rem; }
@media (min-width: 80em) { .hdr-devise { display: inline-block; } }
.prefs__devise { margin: .7rem 0 0; padding-top: .6rem;
border-top: 1px solid rgba(64,18,21,.15); }
.prefs__devise .prefs__k { display: block; margin: 0 0 .15rem; }
.prefs__devise p { margin: 0; font-size: .8rem; opacity: .75; }
/* --- 18/10/2026 : le bandeau debordait a droite entre 1024 et 1100 px ---
Mesure avant correction (page d'accueil, polices chargees) :
francais -75 px a 1024, -39 a 1060, -1 a 1280 ; indonesien -49 ; anglais -31.
Le menu garde sa version resserree sur toute la largeur bureau, et entre
1024 et 1152 px le logo descend a sa taille mini de charte (180 px).
Mesure apres correction : 0 debordement de 1024 a 1920 px, fr / en / id. */
@media (min-width:64em){
.nav__item > a{padding-right:0.8rem;font-size:1rem;}
}
@media (min-width:64em) and (max-width:71.99em){
.brand__logo,.is-compact .brand__logo{width:180px;min-width:180px;}
.brand{padding-right:0.5rem;}
.nav__item > a{padding-right:0.45rem;font-size:0.9375rem;}
}
/* --- 19/10/2026 : tailles et couleurs sous le prix, sur la vignette ---
Demande de Lionnel : savoir avant d ouvrir la fiche si l article se
decline. Discret : la ligne ne doit pas concurrencer le prix. */
.card-product__decl{margin:.15rem 0 0;font-size:.8125rem;line-height:1.35;
color:#6B5A52;letter-spacing:.01em;}
/* ---------- L INCRUSTATION « NOUVEAUTE » (30/10/2026) ----------
Premiere version : une bande au bas de la photo. Lionnel l a trouvee peu
jolie et l a voulue sur le cote. Deuxieme version, celle-ci : une bande
verticale le long du bord gauche, texte lu de bas en haut. Elle ne
recouvre qu une lisiere de l image et se lit de loin. */
.card-product__media { position: relative; }
/* LE MEDAILLON « JUST CREATED » — 2 novembre 2026.
Remplace la bande verticale posee le 30 octobre. Lionnel a choisi la
maquette « 04 / Medaillon » : une pastille ronde bordeaux dans l angle
superieur droit de la photo, soulignee d un filet or, le mot sur deux
lignes.
LE MOT EST LE MEME DANS LES TROIS LANGUES, choix de Lionnel le meme jour.
Il n y a AUCUN
dans le HTML : le rond est plus etroit que
« JUST CREATED » d un seul tenant, donc l espace entre les deux mots fait
la coupure tout seul. Sans CSS, l etiquette reste une phrase lisible. */
.card-product__neuf {
position: absolute;
top: .85rem;
right: .85rem;
/* on ANNULE les cotes de l ancienne bande, qu une feuille en cache
pourrait encore porter */
left: auto;
bottom: auto;
width: 4.5rem;
height: 4.5rem;
box-sizing: border-box;
padding: 0 .5rem;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 50%;
background: rgba(64, 18, 21, .92);
color: #F7F3ED;
font-family: Jost, system-ui, sans-serif;
font-weight: 300;
font-size: .56rem;
letter-spacing: .14em;
text-transform: uppercase;
line-height: 1.5;
pointer-events: none;
/* le filet or, tout autour : le medaillon se detache aussi bien sur une
photo claire que sur une photo sombre */
box-shadow: inset 0 0 0 1px rgba(176, 138, 90, .85);
/* l ancienne bande ecrivait de bas en haut : on remet le texte a plat,
en clair et non par heritage */
writing-mode: horizontal-tb;
transform: none;
}
@supports (backdrop-filter: blur(2px)) {
.card-product__neuf { backdrop-filter: blur(2px); }
}
@media (max-width: 30em) {
.card-product__neuf {
top: .6rem;
right: .6rem;
width: 3.6rem;
height: 3.6rem;
padding: 0 .35rem;
font-size: .48rem;
letter-spacing: .1em;
}
}
/* ---------- WhatsApp : les couleurs de la marque ----------
Demande de Lionnel le 1er novembre 2026 : « je veux que le bouton
WhatsApp soit aux couleurs de WhatsApp ».
On cible par l ADRESSE du lien, ce qui habille les 1 464 pages du site
sans en retoucher une seule.
Verts officiels : #25D366 (vif), #128C7E (moyen), #075E54 (fonce).
Le vert fonce est choisi pour le TEXTE : sur le papier creme du site,
le vert vif ne serait pas assez lisible. */
a[href*="api.whatsapp.com"],
a[href*="wa.me"] { color: #075E54; }
/* DANS LE PIED DE PAGE, QUI EST SOMBRE (7 novembre 2026).
Le vert officiel fonce n y donne qu un contraste de 2,08 : illisible.
On garde le vert fonce partout ailleurs, sur les fonds clairs. */
.site-footer a[href*="api.whatsapp.com"],
.site-footer a[href*="wa.me"] { color: #25D366; }
a[href*="api.whatsapp.com"]:hover,
a[href*="api.whatsapp.com"]:focus-visible,
a[href*="wa.me"]:hover,
a[href*="wa.me"]:focus-visible { color: #128C7E; }
/* la bulle ronde en bas a droite : fond vert, pictogramme blanc,
exactement comme le bouton de WhatsApp lui-meme */
/* « a.wa-float » et non « .wa-float » : la regle sur l adresse du lien
ci-dessus a la meme force qu une classe seule et l emportait, ce qui
peignait le pictogramme en vert fonce SUR du vert. */
a.wa-float { background: #25D366; color: #FFFFFF; }
a.wa-float:hover,
a.wa-float:focus-visible { background: #1DA851; color: #FFFFFF; }
/* un bouton plein aux couleurs de WhatsApp */
/* « a.btn--whatsapp » pour passer devant la regle sur l adresse du lien.
Fond : le vert que tout le monde reconnait (#25D366). Texte : un vert
tres fonce plutot que du blanc. WhatsApp ecrit en blanc sur ce vert,
mais le contraste y est trop faible pour un bouton qu un client doit
lire et cliquer ; le vert fonce garde la couleur de la marque et reste
lisible. */
a.btn--whatsapp { background: #25D366; border: 1px solid #25D366; color: #0A3622; }
a.btn--whatsapp:hover,
a.btn--whatsapp:focus-visible { background: #128C7E; border-color: #128C7E; color: #FFFFFF; }
/* ---------- Avis « site en construction » ----------
Pas de gras : la charte l interdit. La premiere ligne se distingue
par la couleur et l espacement, comme les intitules du site. */
.avis-chantier { border-left: 3px solid #25D366; background: rgba(37,211,102,0.08);
padding: 1rem 1.15rem; margin: 1.75rem 0; }
.avis-chantier__titre { color: #075E54; text-transform: uppercase;
letter-spacing: 0.14em; font-size: 0.8rem; margin: 0 0 0.5rem; }
.avis-chantier p { margin: 0 0 0.5rem; }
.avis-chantier p:last-child { margin-bottom: 0; }
/* ---------- Pied de page sur telephone ----------
Constate le 1er novembre 2026 : 1050 px de haut sur un ecran de 393 px,
soit plus d un ecran entier rien que pour le pied de page. Et le numero
WhatsApp se coupait en deux au milieu des chiffres.
Le numero n est plus repete dans la liste : il figure deja dans l adresse
juste au-dessus. Les listes passent en DEUX colonnes et tous les
espacements se resserrent. Rien ne change au-dessus de 48em : l ordinateur
garde sa mise en page en quatre colonnes. */
@media (max-width: 47.99em) {
.site-footer { margin-top: 2rem; padding: 1.75rem 0 1rem; }
.footer-brandname { font-size: 1.15rem; margin-bottom: 0.35rem; }
.footer-manifesto { font-size: 0.95rem; line-height: 1.45; margin-bottom: 0.5rem; }
.site-footer address { line-height: 1.45; }
/* chaque bloc prend toute la largeur, et sa liste se met sur deux
colonnes : environ 14 lignes au lieu de 25 */
.footer-col { width: 100%; padding-right: 0; margin-bottom: 0.9rem; }
.footer-title { margin-bottom: 0.4rem; }
.footer-col ul { -webkit-columns: 2; -moz-columns: 2; columns: 2;
-webkit-column-gap: 1rem; -moz-column-gap: 1rem; column-gap: 1rem; }
.footer-col ul li { padding: 0.1rem 0; line-height: 1.35;
-webkit-column-break-inside: avoid; break-inside: avoid; }
.footer-bottom { padding-top: 0.75rem; margin-top: 0.25rem; }
.footer-bottom p { margin-bottom: 0.25rem; }
/* La bulle WhatsApp et le bandeau Assistant flottent au-dessus de la
page : sans cette reserve en bas, ils recouvrent les mentions legales
et on ne peut plus les lire ni les toucher.
Mesure du 1er novembre 2026 sur un ecran de 393 px : la bulle occupe
de 16 a 64 px du bas, le bandeau Assistant de 74 a 114 px. La reserve
est donc calee sur 114 px plus une marge, et non estimee. */
.site-footer { padding-bottom: 8.25rem; }
}
/* ---------- Pied de page : listes repliables sur telephone ----------
Demande de Lionnel le 1er novembre 2026 : « que pour la navigation sur
telephone ». Les sont ecrits OUVERTS dans le HTML ; un petit
script les replie seulement sous 48em. Ainsi, sans JavaScript, tout
reste visible : c est un confort ajoute, jamais un masquage.
Sur ordinateur, rien ne change. */
/* Deux corrections constatees a l ecran le 1er novembre 2026 :
- le chevron etait BORDEAUX SUR BORDEAUX. La regle qui eclaircit le
texte du pied vise a, p, li, address et span, mais pas summary : le
summary gardait donc la couleur du corps de page. On la pose ici.
- une regle generale du site encadre les d un filet en haut
et en bas, ce qui doublait les traits. On la neutralise ici. */
/* Deux surprises mesurees a l ecran, corrigees ici sans dependre de
l heritage ni de la force des selecteurs :
- le chevron restait BORDEAUX SUR BORDEAUX : le pseudo-element ::after
ne reprenait pas la couleur de son summary. On ecrit donc la couleur
en clair plutot que de compter sur currentColor.
- un filet gris revenait sous chaque section : une regle plus forte que
« .footer-acc » le reposait. On passe par « .site-footer .footer-acc ». */
.site-footer .footer-acc { border: 0; background: none; padding: 0; margin: 0; }
.footer-acc > summary { list-style: none; color: #EFE3D6; }
.footer-acc > summary::-webkit-details-marker { display: none; }
@media (max-width: 47.99em) {
.footer-acc > summary { cursor: pointer; display: -webkit-box; display: -ms-flexbox;
display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
padding: 0.6rem 0; border-bottom: 1px solid rgba(226,215,196,0.18); }
.footer-acc > summary .footer-title { margin-bottom: 0; }
/* le chevron est DESSINE : aucune police de la charte ne contient de fleche */
/* base.css pose deja « summary::after { content: "+" ; color: bordeaux ;
position: absolute } ». On remet donc TOUT a plat ici : la position,
la couleur et le contenu. Sinon le chevron heritait du bordeaux et
allait se placer dans un coin. */
.footer-acc > summary::after { content: ''; width: 8px; height: 8px; margin-right: 3px;
position: static; top: auto; right: auto; font-size: 0;
color: #EFE3D6;
border-right: 1px solid #EFE3D6; border-bottom: 1px solid #EFE3D6;
-webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0.75; }
.footer-acc[open] > summary::after { -webkit-transform: rotate(-135deg);
transform: rotate(-135deg); }
.footer-acc > ul { padding-top: 0.55rem; padding-bottom: 0.2rem; }
.footer-col { margin-bottom: 0.1rem; }
}
/* ------------------------------------------------------------------
L ARBRE DES CATEGORIES — 5 novembre 2026
Le menu montre desormais des parents et leurs enfants. Sans retrait,
les deux niveaux se confondent et le menu devient une liste plate de
29 lignes que personne ne lit.
On ecrit la couleur en clair : base.css habille deja les liens du
tiroir, et compter sur l heritage s est deja retourne contre nous.
------------------------------------------------------------------ */
.nav__sub .nav__child > a {
padding-left: 1.65rem;
font-size: .94em;
color: #6B5A52;
}
.nav__sub .nav__child > a::before {
content: "\00b7";
position: absolute;
margin-left: -.85rem;
opacity: .5;
}
.footer-col .foot__child > a {
padding-left: .9rem;
/* L OPACITE EST RETIREE (7 novembre 2026). Elle melangeait la
couleur du compteur au fond sombre et faisait retomber le
contraste a 3,98, sous le minimum de 4,5. L attenuation reste
portee par la couleur, qui est calculee pour ce fond. */
}
/* Le nombre de produits en face de chaque categorie (5 novembre 2026).
Discret : c est une information, pas un argument. Couleur ecrite en
clair, jamais heritee — base.css habille deja les liens du tiroir. */
.nav__n,
.footer-col .nav__n {
color: #73655F;
font-size: .88em;
font-variant-numeric: tabular-nums;
}
/* LE COMPTEUR DANS LE PIED DE PAGE (7 novembre 2026).
Le pied de page est sombre : le gris du menu du haut n y donnait
qu un contraste de 3,88, sous le minimum de 4,5. Mesure par
Lighthouse. Deux fonds, deux couleurs — eclaircir partout aurait
abime le menu du haut, qui est sur fond ivoire. */
.site-footer .nav__n {
color: #9C8E87;
}
/* ==========================================================================
Bande d image en haut d une page de categorie (6 novembre 2026)
L image est remplacable depuis l ecran Medias du back-office.
Hauteur tenue par aspect-ratio : la page ne saute pas au chargement.
========================================================================== */
.cat-entete { overflow: hidden; background: #EFE3D6; background: var(--c-blanc, #EFE3D6); }
.cat-entete img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; -o-object-fit: cover; object-fit: cover; }
@media (min-width: 48em) { .cat-entete img { aspect-ratio: 21 / 8; } }
.cat-entete + .page-head { padding-top: 1.5rem; }
/* ==========================================================================
FICHE PRODUIT — 7 novembre 2026 : grande photo, miniatures, vrai zoom.
Demande de Lionnel. Tout est pose par app.js a partir des photos deja
presentes dans la page ; ce bloc ne fait que les habiller.
Sans JavaScript, .has-thumbs n est jamais ajoute : la page garde ses
photos empilees comme avant, et la bande de miniatures n existe pas.
========================================================================== */
.js .product__stack.has-thumbs .product__slide { display: none; }
.js .product__stack.has-thumbs .product__slide.is-current { display: block; }
.product__thumbs { list-style: none; margin: 0.6rem 0 0; padding: 0; font-size: 0; }
.product__thumbs-item { display: inline-block; margin: 0 0.45rem 0.45rem 0; }
.product__thumb { display: block; padding: 0; width: 72px; line-height: 0; cursor: pointer;
background: #EFE3D6; background: var(--c-ivoire-2);
border: 1px solid transparent; border-radius: 2px; }
.product__thumb img { width: 100%; height: auto; display: block;
-o-object-fit: cover; object-fit: cover; }
.product__thumb[aria-current="true"] { border-color: #7A2A2F; border-color: var(--c-terre-text); }
.product__thumb:focus-visible { outline: 2px solid #7A2A2F; outline: 2px solid var(--c-terre-text); outline-offset: 2px; }
@media (min-width: 64em) { .product__thumb { width: 88px; } }
/* ----- l ecran de zoom ----- */
html.pzoom-ouvert, html.pzoom-ouvert body { overflow: hidden; }
.pzoom { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 400;
background: rgba(30,12,13,0.95); }
.pzoom[hidden] { display: none; }
.pzoom__scene { position: absolute; top: 0; left: 0; right: 0; bottom: 60px;
overflow: hidden; cursor: -webkit-zoom-in; cursor: zoom-in;
-ms-touch-action: none; touch-action: none; }
.pzoom__scene.is-zoomed { cursor: -webkit-grab; cursor: grab; }
.pzoom__scene img { position: absolute; top: 0; left: 0; display: block;
max-width: none; max-height: none;
-webkit-transform-origin: 0 0; transform-origin: 0 0;
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
-webkit-user-drag: none; }
.pzoom__bar { position: absolute; left: 0; right: 0; bottom: 0; min-height: 60px;
text-align: center; background: rgba(30,12,13,0.55);
padding: 8px 10px; padding-bottom: 8px;
padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
.pzoom__b { display: inline-block; vertical-align: middle; width: 44px; height: 44px;
margin: 0 3px; padding: 0; border-radius: 50%;
border: 1px solid rgba(247,243,237,0.35); background: transparent;
color: #F7F3ED; font-family: inherit; font-size: 18px; line-height: 42px;
text-align: center; cursor: pointer; }
.pzoom__b:hover { background: rgba(247,243,237,0.16); }
.pzoom__b[hidden] { display: none; }
.pzoom__compte { display: inline-block; vertical-align: middle; min-width: 56px;
color: #F7F3ED; font-size: 13px; letter-spacing: 0.02em; }
/* L image du zoom reste invisible tant qu elle n est pas placee
(7 novembre 2026). Sans cela, dans Safari, elle apparaissait un instant
en haut a gauche a sa taille reelle avant de se mettre en place. */
.pzoom__scene img { visibility: hidden; }
.pzoom__scene img.est-pose { visibility: visible; }
/* Traduction d'une citation de l'atelier (8 novembre 2026).
L'indonesien reste la citation, dans la serif ; la traduction se lit juste
en dessous, plus petite et plus discrete, pour qu'on distingue d'un coup
d'oeil la voix de l'atelier de sa traduction. */
.craft-quote__trad { font-size: 0.875rem; line-height: 1.5; font-style: normal; color: #7A5A52; color: var(--t-muted); margin: 0 0 0.35rem; }
.craft-quote--lead .craft-quote__trad { font-size: 0.9375rem; }
.pillar__trad { font-size: 0.875rem; line-height: 1.5; color: #7A5A52; color: var(--t-muted); margin: 0.4rem 0 0; }
.declaration__trad { font-size: 1rem; line-height: 1.55; color: #7A5A52; color: var(--t-muted); margin: 0.6rem 0 0; }
/* ---------- Bulle WhatsApp : le pictogramme redevient visible (8 nov. 2026) ---------- */
/* Meme poids que la regle du pied qui colorait tout en vert, mais placee
plus loin : c est elle qui gagne. Le trait passe de 1,4 a 2 px et le
pictogramme de 24 a 26 px, sans quoi il reste maigre sur un rond de 48. */
.site-footer a.wa-float,
.site-footer a.wa-float:hover,
.site-footer a.wa-float:focus-visible { color: #FFFFFF; }
.wa-float .ic { width: 26px; height: 26px; stroke-width: 2; }
/* ---------- Pied de page : les sous-familles se replient (8 nov. 2026) ---------- */
/* On remet a plat ce que base.css met sur tout « details » et tout
« summary::after » : filets, « + » bordeaux, position absolue. */
.site-footer .foot__det { border: 0; margin: 0; padding: 0; background: none; }
.site-footer .foot__det > summary.foot__sum {
list-style: none; cursor: pointer; display: inline-block; position: relative;
padding: 0 1.1rem 0 0; margin: 0; border: 0; font: inherit; color: inherit; }
.site-footer .foot__det > summary.foot__sum::-webkit-details-marker { display: none; }
.site-footer .foot__det > summary.foot__sum::after {
content: "\25B8"; position: absolute; right: 0.15rem; top: 0;
color: inherit; font-size: 0.9em; line-height: inherit;
-webkit-transition: -webkit-transform 0.15s ease; transition: transform 0.15s ease; }
.site-footer .foot__det[open] > summary.foot__sum::after {
-webkit-transform: rotate(90deg); transform: rotate(90deg); }
.site-footer .foot__det > summary.foot__sum:hover,
.site-footer .foot__det > summary.foot__sum:focus-visible { color: #E2D7C8; }
.site-footer .foot__sous { margin: 0.2rem 0 0.4rem; padding: 0; list-style: none; }
/* ---------- Carte de Java : vraies cotes, vraies coordonnees (8 nov. 2026) ---------- */
/* Les iles voisines — Madura, Bali, les petites du nord — en retrait, pour
que Java reste le sujet. */
.java-map__isles { fill: #E2D7C8; fill: var(--c-filet); stroke: #7A5A52; stroke-width: 0.6; }
/* Le trait pointille qui relie Jombang a son nom, descendu sous l ile faute
de place entre le point et Surabaya. */
.java-map__leader { stroke: #401215; stroke: var(--c-bordeaux); stroke-width: 0.8; stroke-dasharray: 2 3; }
/* Halo couleur papier derriere les noms : sans lui « Jakarta » tombe sur la
cote et « Surabaya » sur Madura, et ni l un ni l autre ne se lit. */
.java-map__small, .java-map__label {
paint-order: stroke fill; stroke: #F7F3ED; stroke: var(--c-papier);
stroke-width: 3.5px; stroke-linejoin: round; }
/* ---------- Carte de Java : trait de cote au kilometre (8 nov. 2026) ---------- */
/* Remplace la version au 1/50 millionieme. Les regles ci-dessous passent
APRES celles du matin, donc elles les emportent sans avoir a les effacer. */
.java-map__mer { fill: #F2EADF; }
.java-map__cadre { fill: none; stroke: #D9CCBC; stroke-width: 1; }
.java-map__grille { fill: none; stroke: #D9CCBC; stroke-width: 0.5; }
.java-map__isles { fill: #E6DACB; stroke: #A08A7C; stroke-width: 0.5; }
.java-map__land { fill: #EFE3D6; fill: var(--c-creme); stroke: #3A2321; stroke-width: 1; }
/* Le halo est accorde au fond de mer, et non plus au fond de page. */
.java-map__small, .java-map__label {
paint-order: stroke fill; stroke: #F2EADF; stroke-width: 3.2px; stroke-linejoin: round; }
.java-map__echelle line { stroke: #7A5A52; stroke-width: 0.9; }
.java-map__echelle text { font-family: "Cormorant Garamond", Georgia, serif;
font-family: var(--f-serif); font-size: 13px; fill: #7A5A52; fill: var(--t-muted);
letter-spacing: 0.05em; paint-order: stroke fill; stroke: #F2EADF;
stroke-width: 3px; stroke-linejoin: round; }
/* GRANDE PHOTO PRODUIT AVEC SA LEGENDE (8 novembre 2026).
La figure occupe deux colonnes sur deux lignes. Sans cela, l image prend
toute la hauteur et la legende deborde de la case. La figure devient donc
une colonne : la photo prend la place qui reste, la legende garde la
sienne. Les images generiques n ont pas de legende et ne changent pas. */
.grid-editorial .craft-fig { display: flex; flex-direction: column; }
.grid-editorial .craft-fig__lien { flex: 1 1 auto; min-height: 0; display: block; }
.grid-editorial .craft-fig__lien picture,
.grid-editorial .craft-fig__lien img { height: 100%; }
.grid-editorial .craft-fig__cap { flex: 0 0 auto; display: block; }
.grid-editorial .craft-fig__cap .price-block { display: block; }
/* ALIGNER LE BAS DE LA GRANDE PHOTO SUR LE BAS DES PETITES (9 novembre 2026).
Lionnel : « je veux que le bas de l image soit alignee avec le bas des
petites images, et garde la meme ecriture que les petites images ».
La legende prend exactement la place du corps d une carte produit : memes
marges, meme ecriture du nom. Le bas de l image tombe alors tout seul au
bon endroit. Le nom tient sur une ligne : deux lignes decaleraient tout. */
@media (min-width: 48em) {
/* UNE HAUTEUR FIXE POUR TOUS LES CORPS DE CARTE (9 novembre 2026).
Sans cela l alignement depend du nom des produits : 81 px avec un nom
d une ligne, 103 px avec un nom de deux lignes, donc 22 px d ecart des
qu une bande melange les deux. Mesure sur huit largeurs d ecran.
103 px = la hauteur d un corps a deux lignes, relevee dans le navigateur.
Le nom est coupe au-dela de deux lignes pour que ce plafond tienne. */
.card-product__body { min-height: 6.4375rem; }
.card-product__title { display: -webkit-box; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; overflow: hidden; }
.grid-editorial .craft-fig__cap { min-height: 6.4375rem; }
.grid-editorial .craft-fig__cap { padding: 0.75rem 0 1rem; }
.grid-editorial .craft-fig__cap > a { display: block; font-size: 1.0625rem;
/* 400 comme les titres de carte : il n existe pas de fichier Jost 500,
et 500 ferait fabriquer un faux gras par le navigateur. */
font-weight: 400; line-height: 1.3; margin-bottom: 0.2rem;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.grid-editorial .craft-fig__cap .price { font-family: "Jost", Arial, sans-serif; font-family: var(--f-sans); font-weight: 400; font-variant-numeric: tabular-nums; font-size: 1.125rem; }
.grid-editorial .craft-fig__cap a { text-decoration: none; }
/* ---------- LES TAILLES HORS VIGNETTE (9 novembre 2026) ----------
.craft-fig__decl sous la GRANDE photo des pages de collection.
.product__decl sur la FICHE produit, quand il n y a qu un seul
format : une information, pas une liste deroulante
a un seul choix.
.qty--taille la liste deroulante des tailles ; large assez pour
« 200 cm x 200 cm — USD $ 175 » sans rogner.
Les couleurs et la graisse sont celles de .card-product__decl, posee le
19 octobre : la grande photo doit dire la meme chose, de la meme facon,
que la petite juste a cote. */
.craft-fig__decl { display: block; margin: 0.15rem 0 0; font-size: 0.8125rem;
line-height: 1.35; color: #6B5A52; letter-spacing: 0.01em; }
.product__decl { margin: 0 0 0.75rem; font-size: 0.9375rem; line-height: 1.35;
color: #3A2321; letter-spacing: 0.01em; }
.qty--taille select { min-width: 13rem; max-width: 100%; }