/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* =========================================================================
   Accessibility — reduced motion (WCAG 2.2)
   Complements assets/js/kin.js (which stops the top-bar carousel autoplay).
   Neutralises the slide transition for users who asked to reduce motion.
   !important is allowed here per project rules (a11y override).
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.whb-top-bar .wd-carousel .swiper-wrapper,
	.whb-top-bar .wd-carousel .wd-carousel-wrap {
		transition-duration: 0s !important;
	}
}

/* =========================================================================
   Top-bar promo carousel — visual tweaks (scoped to the header top bar)
   Goal: vertically centred message + smaller, whiter, closer arrows.
   All arrow sizing/colour uses Woodmart's own CSS variables (no !important).
   ========================================================================= */

/* 1. Vertical centring — kill the empty <p> Gutenberg leaves in the HTML
   block (it makes the block taller than the 40px bar and pushes text up),
   then centre the message in the bar. */
.whb-top-bar .wd-header-html > p:empty,
.whb-top-bar .wp-block-wd-carousel + p:empty {
	display: none;
}
.whb-top-bar .wd-header-html {
	display: flex;
	align-items: center;
	width: 100%;
}
.whb-top-bar .wd-carousel-item {
	justify-content: center;
	min-height: 40px; /* match the top-bar height so the message centres vertically */
}
.whb-top-bar .wd-carousel-item > * {
	margin: 0;
}

/* 2. Cluster slide + arrows near the centre. Arrows hug the carousel edges
   (wd-pos-sep), so a narrower, centred carousel brings them in. Tune width. */
.whb-top-bar .wp-block-wd-carousel {
	max-width: 460px;
	margin-inline: auto;

	/* 3. Arrows: smaller glyph, in the bar's ink (Woodmart variables).
	   NB: do NOT override --wd-arrow-size / --wd-arrow-offset-h here — they feed
	   the prev/next positioning math and visually swap the arrows if changed. */
	--wd-arrow-icon-size: 16px; /* default 24px */
	--wd-arrow-color: var(--kin-topbar-ink);
	--wd-arrow-color-hover: rgba(53, 36, 62, 0.65);
}
.whb-top-bar .wd-nav-arrows .wd-arrow-inner,
.whb-top-bar .wd-nav-arrows .wd-arrow-inner::after {
	color: var(--kin-topbar-ink);
}

/* Design of the « brandline » of the validated mockup (refonte-kinthia.com/
   maison.html, 20/10/2026) : lilac bar (header builder, top-bar row), plum
   ink, Work Sans 400, 11px at every width (the mockup's 9px on phones read
   poorly : client's choice, 20/10/2026). The bar keeps its Swiper. The ink is
   11.9:1 on the lilac. */
.whb-top-bar {
	--kin-topbar-ink: #35243e;
}
.whb-top-bar .wd-carousel-item p {
	font-family: "Work Sans", Arial, sans-serif;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--kin-topbar-ink);
}

/* 4. Mobile: the header is full-width, so its .container fills ~95-100% of the
   viewport and the carousel gets too wide → Swiper makes each slide wide and
   the arrows hug the edges. Add side padding to the top-bar container (the
   demo achieves the same via the native Header-Banner rule .wd-hb .container).
   Woodmart's mobile breakpoint is 768.98px. */
@media (max-width: 768.98px) {
	.whb-top-bar .container {
		padding-inline: 30px;
	}
}

/* =========================================================================
   FiboSearch inside Woodmart's full-screen search overlay — match the theme.
   The form is injected by kin_fibosearch_in_woodmart_overlay() (functions.php).
   We restyle FiboSearch's default boxed bar to look like Woodmart's native
   overlay input: transparent, centred, large. Scoped to .wd-search-full-screen
   so nothing else (if FiboSearch is used elsewhere) is affected.
   ========================================================================= */
.wd-search-full-screen .dgwt-wcas-search-wrapp {
	max-width: none; /* drop FiboSearch's 600px cap inside the overlay */
	width: 100%;
	padding-inline: 100px;
	border-bottom: 1px solid var(--brdcolor-gray-300, #e1e1e1);
	margin-bottom: 20px;
}
.wd-search-full-screen .dgwt-wcas-search-form,
.wd-search-full-screen .dgwt-wcas-sf-wrapp {
	background: transparent;
	border: 0;
	box-shadow: none;
}
.wd-search-full-screen .dgwt-wcas-search-input[type="search"] {
	height: auto;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	text-align: center;
	font-weight: 600;
	font-size: 48px;
	color: var(--color-gray-800, #333);
}
/* Remove FiboSearch's submit/voice clutter — keep a clean centred input
   (Enter or clicking a suggestion submits). */
.wd-search-full-screen .dgwt-wcas-search-submit,
.wd-search-full-screen .dgwt-wcas-voice-search {
	display: none;
}

/* Close (X) button — Woodmart's native cross is 38px in a 100×100 area, which
   looks oversized/low in this overlay. Trim it (keeps a comfortable touch target).
   NB: Woodmart lazy-loads its full-screen search CSS LATE (in the body, after the
   child theme's <link>), so an equal-specificity override loses on load order.
   We raise specificity (extra classes) to win regardless. */
.wd-search-full-screen .wd-close-search.wd-action-btn.wd-style-icon.wd-cross-icon {
	--wd-action-icon-size: 24px;
	--wd-action-w: 56px;
	--wd-action-h: 56px;
}

@media (max-width: 768.98px) {
	.wd-search-full-screen .dgwt-wcas-search-wrapp {
		padding-inline: 20px;
	}
	.wd-search-full-screen .dgwt-wcas-search-input[type="search"] {
		font-size: 28px;
	}
}

/* =========================================================================
   Comparison table (kin-compare) — cms_block "Comparison" (#1278).
   "Kinthia vs others" benefits table (adapted from a Shopify g_comparison
   section: 630px table, 360px first column, 40/80px padding). Accessible
   <table> with sr-only Oui/Non and decorative ✓/✕ marks.
   ========================================================================= */
/* Texte réservé aux lecteurs d'écran. Définition UNIQUE du projet : le blog en
   portait une seconde, qui écrasait celle-ci partout tant que tout vivait dans
   un seul fichier. Les deux techniques de masquage sont conservées, `clip` pour
   les navigateurs anciens et `clip-path` pour les autres. `!important` est ici
   autorisé par les règles du projet (surcharge d'accessibilité). */
.kin-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.kin-compare__inner {
	max-width: 630px;
	margin-inline: auto;
}
.kin-compare__title {
	margin: 0 0 24px;
	text-align: center;
	font-size: 24px;
	font-weight: 700;
	color: var(--color-gray-900, #242424);
}
.kin-compare__table {
	/* border-spacing puts its gap BETWEEN the columns *and* outside the first/last
	   one — CSS offers no way to exclude the outer edges, and the gap can't move to
	   cell padding here because the CELLS are the cards (they carry the radius and
	   the row separators). So: keep border-spacing, then pull the table out by
	   exactly that gap. The 10px gutters stay; the dead 10px on each outer edge is
	   reclaimed, so the cards sit flush with the container.
	   Matters most on mobile, where 20px of dead space is a big share of a shrunken
	   table. The overhang is empty spacing and stays inside the page container's
	   own padding (15px), so it can't cause horizontal scroll. */
	--kin-compare-gap: 10px;
	width: calc(100% + 2 * var(--kin-compare-gap));
	margin-inline: calc(-1 * var(--kin-compare-gap));
	border-collapse: separate;
	border-spacing: var(--kin-compare-gap) 0; /* horizontal gaps between columns */
	table-layout: fixed;
}
.kin-compare__corner {
	width: 56%; /* first column ≈ 360/630 */
}
/* Recipe: <div> in every cell holds the content; background + rounding go on the
   CELLS (a separated table would otherwise show all cell borders → grid), so we
   set the cell borders to 0 and put the row-separator border-bottom on the inner
   .box, with 2px inline padding on the cells. Reliable, no <td> positioning bug. */
.kin-compare__col,
.kin-compare__cell,
.kin-compare__feature,
.kin-compare__corner {
	border: 0;
	padding: 0 2px;
	vertical-align: middle;
}
.kin-compare__col {
	width: 22%;
	font-size: 14px;
	font-weight: 700;
}
.kin-compare__feature {
	text-align: left;
	font-size: 15px;
	font-weight: 500;
	color: var(--color-gray-800, #333);
}
.kin-compare__box {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 13px 6px;
	text-align: center;
}
.kin-compare__feature .kin-compare__box {
	justify-content: flex-start;
	text-align: left;
	padding-inline: 15px;
}
/* Row separator on the CELLS (not the .box): a <td> fills the whole row height,
   so its border-bottom sits at the row bottom → aligned across the row even when
   the feature text wraps to 2 lines. (A .box border-bottom follows the box's own
   content height, which differs per column → the misalignment.) */
.kin-compare__table tbody tr:not(:last-child) .kin-compare__feature,
.kin-compare__table tbody tr:not(:last-child) .kin-compare__cell {
	border-bottom: 1px solid var(--brdcolor-gray-300, #ececec);
}
/* Each comparison column = a separated card: Kinthia (brand colour) vs others
   (white). Rounded top on the header, rounded bottom on the last body row. */
.kin-compare__col--brand,
.kin-compare__cell--brand {
	background: rgba(166, 132, 99, 1);
	color: #fff;
}
.kin-compare__feature,
.kin-compare__col--others,
.kin-compare__cell--others {
	background: #fff;
}
.kin-compare__cell--others {
	color: #000; /* black cross on the light "others" column */
}
/* first column's card starts at the FIRST body row (the empty corner header
   stays transparent) → round the top of the first feature cell, not the corner. */
.kin-compare__col--brand,
.kin-compare__col--others {
	border-radius: 10px 10px 0 0;
}
.kin-compare__table tbody tr:first-child .kin-compare__feature {
	border-radius: 10px 10px 0 0;
}
.kin-compare__table tbody tr:last-child .kin-compare__feature,
.kin-compare__table tbody tr:last-child .kin-compare__cell--brand,
.kin-compare__table tbody tr:last-child .kin-compare__cell--others {
	border-radius: 0 0 10px 10px;
}
/* Kinthia column: its own row-separator colour */
.kin-compare__table tbody tr:not(:last-child) .kin-compare__cell--brand {
	border-bottom-color: rgb(217 209 209);
}
/* brand header: icon stacked above the label */
.kin-compare__col--brand .kin-compare__box {
	flex-direction: column;
	gap: 8px;
	padding-block: 16px;
}
.kin-compare__brand-logo {
	width: auto;
	height: 27px;
}
/* Inline SVG check/cross — coloured via currentColor (white in the brand
   column, black in the others column). Outer ring + transparent centre. */
.kin-compare__icon {
	display: block;
	width: 24px;
	height: 24px;
}

@media (min-width: 768px) {
	.kin-compare__title {
		font-size: 32px;
	}
	.kin-compare__feature {
		font-size: 16px;
	}
	.kin-compare__col {
		font-size: 15px;
	}
}

/* =========================================================================
   Image rounding utility — matches the theme's default 10px radius. Woodmart
   exposes no border-radius control for images, so add this class to an image
   block via its "Advanced → Additional CSS class(es)" field. Clips block + img.
   ========================================================================= */
.kin-radius {
	overflow: hidden;
}
.kin-radius,
.kin-radius img {
	border-radius: 10px;
}

/* =========================================================================
   Footer — full width.
   footer.php (l.60) prints `<div class="container main-footer wd-entry-content">`,
   and Woodmart caps every `.container` at `max-width: var(--wd-container-w)`
   (1222px). The `wd/row` inside therefore CANNOT be wider than that — the cap
   has to be lifted here, not on the row. That div is theme markup, so no
   "Additional CSS class" is possible, and no native full-width footer option
   exists: child CSS is the only route.

   Drive the variable instead of overriding `max-width` (see WD-07), and keep the
   horizontal padding on its own knob so it stays adjustable.
   Specificity: `.main-footer.container` (0,2,0) beats `.container` (0,1,0) — no
   `!important` needed.
   ========================================================================= */
.main-footer.container {
	--wd-container-w: 100%;
	padding-inline: var(--kin-footer-pad, 15px);
}
@media (min-width: 1025px) {
	.main-footer.container {
		--kin-footer-pad: 40px;
	}
}

/* Full-bleed a DIRECT child of `.main-footer.container` out to the footer's full
   width (e.g. a band with a background colour), while its siblings keep their
   padding. Add `kin-fullbleed` via the block's Advanced → Additional CSS class(es).

   How: cancel the parent's inline padding with a symmetric negative margin and
   grow the width back by 2×padding. Pure layout units (no 100vw), so it is IMMUNE
   to the scrollbar — the 50%-50vw trick drifts when Woodmart's --wd-scroll-w isn't
   set (it defaults to .001px here), which is what pushed the block right but left
   the left padding in place. --kin-footer-pad is inherited from the container, so
   this auto-matches the breakpoint (40px desktop / 15px below 1025px).
   NOTE: the CONTENT goes edge-to-edge too — add horizontal padding on the block if
   you want the inner content re-aligned. Only works on a DIRECT child of the footer
   container (which this block is). */
.kin-fullbleed.kin-fullbleed.kin-fullbleed {
	/* TRIPLED class = specificity (0,3,0). Must beat Woodmart's late-loading
	   `:is(.entry-content,.wd-entry-content) > .wp-block-wd-container { margin-inline: auto }`
	   (0,2,0) — same 0,2,0 as a doubled class loses the tie on load order (WD-06),
	   and `auto` on an over-wide element collapsed to 0 + overflow-right (the block
	   drifted right, left padding stayed). Also beats `.wp-block-wd-container { width }`. */
	width: calc(100% + 2 * var(--kin-footer-pad, 15px));
	max-width: none;
	margin-inline: calc(-1 * var(--kin-footer-pad, 15px));
}

/* =========================================================================
   Prices — brand colour → neutral dark.
   Woodmart ships `.price { color: var(--wd-primary-color); font-weight: 600 }` in
   its main style.css AND in the `woocommerce-base` part, which loads LATE in the
   body (WD-06). On the category page only style.css is loaded (so a plain `.price`
   would win), but that part CAN load on other templates and would then override us.
   Doubled class = specificity (0,2,0) → wins everywhere, whatever the load order,
   no `!important`. No native setting exists for the price colour (checked).
   font-weight is left untouched.
   ========================================================================= */
.price.price {
	color: #333333;
}

/* =========================================================================
   Product cards ("fw-button" design) — hide the now-empty Add-to-cart slot.
   kin_remove_loop_add_to_cart() (functions.php) detaches the loop button, which
   leaves `<div class="wd-add-btn wd-add-btn-replace">` empty. Its height came from
   the button itself (`.wd-add-btn > a { min-height: … }`), so it collapses — BUT it
   is still a flex item of the card, so it would keep adding one `gap`. Hide it.
   Scoped to this design; in `content-product-fw-button.php` that div only ever held
   the quantity + the button, so nothing else is lost.
   ========================================================================= */
.wd-product.wd-hover-fw-button .wd-add-btn-replace {
	display: none;
}

/* =========================================================================
   Newsletter form (CF7) — inline layout (email grows, button beside).
   Replaces the demo Mailchimp widget in the footer. Colours are left to the
   theme; only the layout is set here. `.kin-nl-row` is the wrapper in the CF7
   form template (plugin: kin-subscribers → "Newsletter – Footer").
   ========================================================================= */
.kin-nl-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: stretch;
}
.kin-nl-row .wpcf7-form-control-wrap {
	flex: 1 1 180px;
	min-width: 0;
}
.kin-nl-row input[type="email"] {
	width: 100%;
}
.kin-nl-row .wpcf7-submit {
	flex: 0 0 auto;
}

/* Remove the theme's GLOBAL image rounding on one block.
   Woodmart applies `border-radius: var(--wd-brd-radius)` to every
   `.wd-block-image :is(img, .wd-block-image-link)` (css/parts/block-image.css),
   and `:root { --wd-brd-radius: 10px }` comes from Theme Settings. The `wd/image`
   block has NO native radius control (only `gallery`/`products`/… expose a
   "rounding" option), so drive the variable instead — it wins whatever the
   specificity, no `!important` needed (see WD-07).
   Usage: block → Advanced → Additional CSS class(es) → `kin-radius-0`. */
.kin-radius-0 {
	--wd-brd-radius: 0;
}

/* =========================================================================
   Block bottom-spacing utilities — Woodmart spaces flow children with
   margin-block: 0 var(--wd-block-spacing). Add one of these to a block via its
   "Advanced → Additional CSS class(es)" field to set its bottom gap. Drives the
   variable, so it wins regardless of specificity (see WD-07). No placeholder.
   ========================================================================= */
.kin-mb-0 {
	--wd-block-spacing: 0;
}
.kin-mb-8 {
	--wd-block-spacing: 8px;
}
.kin-mb-16 {
	--wd-block-spacing: 16px;
}
.kin-mb-24 {
	--wd-block-spacing: 24px;
}
.kin-mb-32 {
	--wd-block-spacing: 32px;
}
.kin-mb-40 {
	--wd-block-spacing: 40px;
}

/* =========================================================================
   Blog cards — SEO (see templates/content-meta-image.php + kin.js).
   The card keeps a SINGLE crawlable <a> (the article title). The empty overlay
   link is gone; the whole card, the category and the social share are JS-driven
   (data-lk / data-kin-href) so no extra <a> lands in the DOM. Below: restore
   the clickable feel + mirror the styling those elements lost by no longer
   being <a> tags.
   ========================================================================= */
.kin-lk {
	cursor: pointer;
}

/* `kin-lk` placed on a whole carousel: only the slides are clickable, so the
   arrows, pagination and the gaps between slides must not look clickable.
   (Blog cards carry `kin-lk` on the card itself and contain no slide → unaffected.) */
.kin-lk:has(.wd-carousel-item) {
	cursor: auto;
}
.kin-lk .wd-carousel-item {
	cursor: pointer;
}

/* Faux-links (category, social share) — clickable feel + keyboard focus. */
.kin-lk [data-lk-cat],
.kin-lk [data-kin-share] {
	cursor: pointer;
}
.kin-lk [data-lk-cat]:focus-visible,
.kin-lk [data-kin-share]:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Category: <a> → <span data-lk-cat>. Text colour is inherited from the
   container (.wd-post-cat.wd-style-default sets `color`); only the hover state
   needs restoring since span:hover doesn't consume Woodmart's link vars. */
.wd-post-cat.wd-style-default [data-lk-cat]:hover {
	color: var(--wd-link-color-hover);
}

/* Social share: <a> → <span data-kin-share>. Mirror Woodmart's
   `.wd-social-icons > a` rules (css/parts/el-social-icons.css) — all values come
   from container-level CSS vars, so the icons render identically. */
.wd-social-icons > span[data-kin-share] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wd-social-size, 40px);
	height: var(--wd-social-size, 40px);
	font-size: var(--wd-social-icon-size, calc(var(--wd-social-size, 40px) / 2.5));
	color: var(--wd-social-color);
	background-color: var(--wd-social-bg, unset);
	box-shadow: var(--wd-social-shadow);
	border: var(--wd-social-brd) var(--wd-social-brd-color);
	border-radius: var(--wd-social-radius);
	line-height: 1;
}
.wd-social-icons > span[data-kin-share]:hover {
	color: var(--wd-social-color-hover, var(--wd-social-color));
	background-color: var(--wd-social-bg-hover, var(--wd-social-bg));
	border-color: var(--wd-social-brd-color-hover, var(--wd-social-brd-color));
	box-shadow: var(--wd-social-shadow-hover);
}
.wd-social-icons.wd-style-default > span[data-kin-share] {
	width: auto;
	height: auto;
	padding: var(--wd-social-gap, calc(var(--wd-social-size, 40px) / 6));
	min-width: 24px;
}

/* Read-more: <a> → <span> (navigates via the whole-card click, no <a>/URL added).
   The container already gives uppercase / 600 / .9em (inherited); only the link
   colour (normally applied through the global `a` rule) and the hover need
   restoring — mirrors `.wd-post-read-more.wd-style-link a`. */
.wd-post-read-more.wd-style-link .kin-read-more {
	color: var(--wd-link-color);
	cursor: pointer;
}
.wd-post-read-more.wd-style-link .kin-read-more:hover {
	opacity: 0.8;
}

/* ---------------------------------------------------------------------------
   Action buttons whose <a> was converted to <span> for SEO
   (kin_strip_ui_link_hrefs() in functions.php — size guide, review count).

   Woodmart styles action buttons by TAG, not by class:
       .wd-action-btn > a { position:relative; display:inline-flex; align-items:center;
                            justify-content:center; width:var(--wd-action-w, unset);
                            height:var(--wd-action-h, unset); gap:.3em; cursor:pointer;
                            line-height:1; transition:none; }          (woodmart/css/base.css)
   A <span> matches none of it — the icon and the label lose their flex row, their gap
   and the pointer cursor. We mirror the parent rules 1:1 onto the converted element.
   Same trap, same fix as `.wd-social-icons > a` and `.wd-post-read-more a` above.

   Kept in sync with the parent: re-check these declarations after a Woodmart update
   (see ARCHITECTURE.md §13.1 — theme update checklist). No !important: nothing else targets the span.
   --------------------------------------------------------------------------- */
.wd-action-btn > [data-kin-action] {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wd-action-w, unset);
	height: var(--wd-action-h, unset);
	gap: 0.3em;
	line-height: 1;
	transition: none;
}

/* Mirrors `.wd-action-btn.wd-style-text > a` + `.wd-heading .wd-action-btn.wd-style-text > a`. */
.wd-action-btn.wd-style-text > [data-kin-action] {
	font-weight: 600;
}

.wd-heading .wd-action-btn.wd-style-text > [data-kin-action] {
	height: 25px;
}

/* Mirrors `.wd-action-btn > a:hover .wd-action-icon:before` / `… .wd-action-text`. */
.wd-action-btn > [data-kin-action]:hover .wd-action-icon::before {
	color: var(--wd-action-icon-color-hover, var(--wd-action-color-hover));
}

.wd-action-btn > [data-kin-action]:hover .wd-action-text {
	color: var(--wd-action-text-color-hover, var(--wd-action-color-hover));
}

/* Every stripped link keeps its click affordance.

   Needed because the browser's UA stylesheet only gives `cursor: pointer` to anchors that
   HAVE an href (`a:-webkit-any-link`). The header tools (cart, account, wishlist — see
   header-elements/*.php) stay <a> tags but lose their href, so they would fall back to the
   default arrow. Everything else about them is untouched: no Woodmart rule uses `:link` or
   `:visited` (grepped), and the tag-based selectors (`.wd-header-cart… > a`) still match. */
[data-kin-action],
[data-kin-go] {
	cursor: pointer;
}

/* =========================================================================
   Engagements Kinthia : une ligne = un picto, un titre, un texte
   -------------------------------------------------------------------------
   Deux sections les utilisent : l'accueil (`kin-home.css`, maquette
   `.signature-promises`) et la fiche produit (`kin-product.css`, maquette
   `.sp-promises`). Ici la structure commune ; chaque feuille de zone pose ses
   couleurs, tailles et écarts (D-69 : un composant de plusieurs zones reste
   global). Les variables `--kin-pro-*` viennent de la section.

   Le picto est un ornement : masque CSS sur un pseudo-élément, rien dans le
   contenu. Il occupe la colonne de gauche sur toute la hauteur de la ligne.
   ========================================================================= */

.kin-promises .kin-promises__row {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	column-gap: 17px;
	padding-block: 21px;
	border-block-end: 1px solid var(--kin-pro-line);
}

/* Deux classes : Woodmart pose une marge sous tout enfant de groupe (WD-47). */
.kin-promises .kin-promises__row.kin-promises__row {
	margin-block: 0;
}

.kin-promises .kin-promises__row:last-child {
	border-block-end: 0;
}

.kin-promises .kin-promises__row::before {
	content: "";
	grid-column: 1;
	grid-row: 1 / -1;
	background-color: var(--kin-pro-picto);
	-webkit-mask-image: var(--kin-pro-picto-img);
	mask-image: var(--kin-pro-picto-img);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	mask-position: center center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.kin-promises .kin-promises__row > * {
	grid-column: 2;
	margin-block: 0;
}

.kin-promises .kin-promises__row > * + * {
	margin-block-start: 8px;
}

.kin-promises .kin-promises__row--mineral  { --kin-pro-picto-img: url(assets/img/reassurance/mineraux.svg); }
.kin-promises .kin-promises__row--coffret  { --kin-pro-picto-img: url(assets/img/reassurance/selection-coffret.svg); }
.kin-promises .kin-promises__row--conseils { --kin-pro-picto-img: url(assets/img/reassurance/conseils.svg); }
.kin-promises .kin-promises__row--camion   { --kin-pro-picto-img: url(assets/img/reassurance/livraison-retours.svg); }
.kin-promises .kin-promises__row--arbre    { --kin-pro-picto-img: url(assets/img/reassurance/arbre-plante.svg); }

/* ---------------------------------------------------------------------------
   Accordéons — couleur des filets et de la flèche (#d2ccc5).
   S'applique aux DEUX accordéons de la fiche produit (résumé : Caractéristiques/Entretien/
   Notre cause/Livraison, et FAQ) et à tout accordéon futur.

   Répartition volontaire :
   - la bordure de l'ACCORDÉON lui-même passe par l'attribut natif `borderColorCode` du bloc
     (son CSS généré `.wd.wd .wd-XXXX{border-color:…}` pèse (0,3,0) et charge après cette
     feuille : il gagnerait sur toute règle écrite ici — WD-06/WD-20) ;
   - les filets des VOLETS et la flèche n'ont AUCUNE règle générée, donc un simple (0,2,0)
     suffit ici.

   La flèche hérite normalement de `--color-gray-300`, un token GLOBAL du thème : on ne le
   redéfinit surtout pas (il sert partout), on pose la couleur sur l'opener lui-même.
   --------------------------------------------------------------------------- */
/*
 * CLASSE TRIPLÉE (0,4,0) — nécessaire pour les filets des volets.
 * `css/parts/el-accordion.css` déclare :
 *     .wd-accordion:where(.wd-style-default) > .wd-accordion-item {
 *         border-bottom: 1px solid var(--brdcolor-gray-300); }
 *     .wd-accordion:where(.wd-style-default) > .wd-accordion-item:first-of-type {
 *         border-top: 2px solid var(--brdcolor-gray-300); }
 * `:where()` ayant une spécificité NULLE, la 1re ne pèse que (0,2,0) et la 2e (0,3,0) — et ce
 * fichier est chargé dans le <body>, donc APRÈS cette feuille : il gagnait les deux ties
 * (WD-06/WD-20) et les filets restaient gris. Ce sont aussi des SHORTHAND `border-*`, qui
 * réinitialisent la couleur.
 * D'où (0,4,0) : un seul sélecteur couvre le filet du bas de chaque volet ET celui du haut
 * du premier. Mesuré : 6/6 des points de couleur passent à #d2ccc5.
 */
.wd-accordion.wd-accordion.wd-accordion > .wd-accordion-item {
	border-color: #d2ccc5;
}

/* L'opener n'a pas de règle concurrente : (0,2,0) suffit.
   Couleur distincte des filets (#d2ccc5) : la flèche est un élément d'INTERFACE, pas une
   simple séparation — elle doit rester lisible sur fond blanc. #46392a donne un contraste
   d'environ 10:1, très au-delà des 3:1 exigés pour un élément non textuel (WCAG 1.4.11). */
.wd-accordion .wd-accordion-opener {
	color: #46392a;
}

/* =========================================================================
   Cartes produit — masquer la liste de souhaits sous 1025px
   -------------------------------------------------------------------------
   Sur desktop le cœur n'apparaît qu'au survol : il ne gêne pas. Sous 1025px il
   n'y a pas de survol, alors Woodmart le rend visible en permanence, et il
   recouvre le coin haut-droit de la photo produit (mesuré : 35×35 px en
   `position: absolute` sur une carte de 175 px de large, soit 20 % de sa
   largeur). On le retire là où il coûte, on le garde là où il ne coûte rien.

   AUCUN RÉGLAGE NATIF ne fait ça : `product_loop_wishlist` est un interrupteur
   global, sans variante par appareil (vérifié dans `inc/admin/settings/wishlist.php`).

   1025px est la frontière du thème lui-même, pas un nombre choisi au hasard :
   c'est à `max-width: 1024px` que Woodmart bascule la barre en affichage
   permanent, et c'est dans cette même requête qu'il masque déjà l'aperçu rapide
   et le comparateur. On applique le même traitement au même endroit.

   On masque le CONTENEUR, pas le bouton : comparer et aperçu rapide étant
   désactivés dans les réglages, le cœur est son seul enfant. Ne masquer que lui
   laisserait un `.wd-buttons` de 0×0 dont le `box-shadow` peint quand même.

   `display: none` retire l'élément de l'ordre de tabulation et de l'arbre
   d'accessibilité : pas de bouton focusable mais invisible (le piège de WD-29).
   L'action reste disponible sur la fiche produit.

   Spécificité (0,2,0) et non `!important` : les feuilles de Woodmart se chargent
   APRÈS celle de l'enfant (WD-20, vérifié ici : enfant à l'octet 54798,
   `woo-loop-prod-predefined.css` à 103542), et sa règle `.wd-buttons{display:flex}`
   pèse (0,1,0). Il faut donc passer au-dessus, pas taper plus fort.
   ========================================================================= */
@media (max-width: 1024px) {
	.wd-product .wd-buttons {
		display: none;
	}
}

/* =========================================================================
   Méga-menu — une colonne de menu qui étale sa liste en grille
   -------------------------------------------------------------------------
   PROBLÈME. Le déroulant « Boutique » est en `Full width` (1425 px mesurés),
   mais la liste des 33 pierres tenait dans UNE colonne de 200 px sur 1165 px de
   haut : plus de 80 % de la largeur perdue, et la liste passait sous le pli.

   POURQUOI. La grille de Woodmart (`wd-grid-f-inline`) s'applique au NIVEAU 1
   du déroulant, dont chaque entrée est une colonne :
       .wd-grid-f-inline > .wd-col { flex: 0 0 var(--wd-f-basis, auto) }   ← 200px
   Or le niveau 1 ne contient qu'une entrée, « Par Pierre ». La grille n'a donc
   rien à répartir, et les 33 pierres, au NIVEAU 2, restent en `display: block`.

   SOLUTION, en deux temps. On laisse la colonne concernée occuper toute la
   largeur, puis on transforme SA liste en grille. On cible par une classe posée
   sur l'entrée de menu (champ natif « Classes CSS » de WordPress), donc c'est
   réutilisable : n'importe quelle future colonne (« Par Intention »…) s'étale
   de la même façon en recevant `kin-menu-grid`, sans toucher au CSS.

   On passe par la VARIABLE `--wd-f-basis` du thème plutôt que de redéclarer
   `flex` : c'est le levier prévu, et il survit à un changement de sa règle
   (WD-20). Rappel : les feuilles de Woodmart se chargent APRÈS celle de
   l'enfant, d'où une spécificité choisie, jamais un `!important`.

   ⚠️ Uniquement au-dessus de 1025 px : sous cette largeur le menu devient le
   panneau mobile déroulant, où une grille n'aurait aucun sens.
   ========================================================================= */
@media (min-width: 1025px) {
	/* --- Design « Full width » : une seule rubrique étalée ------------------
	   La colonne prend toute la largeur au lieu des 200 px par défaut. Opt-in
	   par la classe : sous ce design, chaque entrée de niveau 1 est une colonne,
	   et les étaler toutes reviendrait à les empiler. */
	.wd-design-full-width .wd-sub-menu > li.kin-menu-grid {
		--wd-f-basis: 100%;
	}

	/* --- La liste s'étale en colonnes ---------------------------------------
	   Deux balisages selon le design du déroulant :
	     Full width : `.sub-sub-menu` est fille directe de l'entrée ;
	     Aside      : elle est enveloppée dans un `.wd-dropdown-menu`.
	   Sous `aside`, la règle s'applique à TOUTES les rubriques, sans classe : le
	   panneau de droite fait toujours toute la largeur, une liste sur une seule
	   colonne y serait aussi perdue. Une rubrique ajoutée s'étale donc d'office.

	   🔴 `auto-fill` seul n'a PAS de plafond : il remplit la largeur disponible.
	   Or le panneau `aside` suit le viewport (`--wd-dropdown-width: 100vw`), donc
	   mesuré : 7 colonnes à 1440 px, mais 11 à 1920 et 15 à 2560. Illisible.

	   Le `max()` pose un plancher qui GRANDIT avec le conteneur, ce qui plafonne
	   le compte à 8 sans requête média :
	       piste mini = max( 150px , (100% − 7 gouttières) / 8 )
	   Sur un large panneau, piste + gouttière vaut exactement (100% + 20px) / 8,
	   donc `auto-fill` en place 8, jamais plus. Sur un panneau étroit, le
	   plancher de 150 px reprend la main et le compte redescend naturellement.
	   Vérifié : 7 colonnes jusqu'à 1440 px, 8 à partir de 1600, et 8 au-delà.

	   Pour plafonner à 7 au lieu de 8, changer les DEUX nombres : `/ 8` → `/ 7`
	   et `140px` → `120px` (le nombre de gouttières, soit (n − 1) × 20). */
	.wd-design-full-width .wd-sub-menu > li.kin-menu-grid > .sub-sub-menu,
	.wd-design-aside .wd-sub-menu > li > .wd-dropdown-menu > .sub-sub-menu {
		display: grid;
		grid-template-columns: repeat(
			auto-fill,
			minmax(max(var(--kin-menu-col, 150px), calc((100% - 140px) / 8)), 1fr)
		);
		column-gap: 20px;
	}
}

/* =========================================================================
   Méga-menu — rubrique en vignettes : image au-dessus, nom centré dessous
   -------------------------------------------------------------------------
   Le balisage natif d'une entrée de niveau 2 est un lien contenant une image
   puis un NŒUD TEXTE nu (le thème n'enveloppe le titre dans un `<span>` qu'au
   niveau 0). D'où le passage du lien en colonne flex : le nœud texte devient un
   élément flex anonyme et se centre comme un enfant normal, sans balisage à
   ajouter et sans surcharge de gabarit.

   Le thème pose `width` et `height` en `!important` sur `.wd-nav-img` ; la
   variable `--nav-img-height` est donc le SEUL levier pour la taille (WD-20).
   Elle n'est pas exposée par l'élément « Main menu » du header builder, à la
   différence des blocs menu Gutenberg et Elementor : d'où ce réglage ici.

   `--kin-menu-col` gouverne la largeur mini d'une colonne, donc leur nombre via
   `auto-fill`. Les deux variables sont là pour qu'un ajustement soit un
   changement de valeur, pas une réécriture de règle.
   ========================================================================= */
@media (min-width: 1025px) {
	.wd-design-aside .wd-sub-menu > li > .wd-dropdown-menu > .sub-sub-menu {
		--kin-menu-col: 112px;
		row-gap: 22px;
	}

	/* 🔴 Woodmart impose une largeur EN DUR aux entrées du panneau `aside` :
	       .wd-dropdown-menu.wd-design-aside .wd-wp-menu > .sub-sub-menu > li { width: 200px }
	   Dans une grille, l'entrée déborde alors de sa piste dès que celle-ci fait
	   moins de 200 px (mesuré : pistes de 166 px, débordement de 34 px, soit
	   exactement l'écart). C'est aussi ce 200 px qui donnait la colonne unique
	   de 200 px avant la mise en grille.
	   L'entrée doit suivre sa piste, d'où `width: auto`. `min-width: 0` en
	   complément : un élément de grille a `min-width: auto` par défaut, donc il
	   refuse de passer sous la largeur de son contenu (même famille de piège que
	   WD-19). Spécificité (0,5,2) contre la (0,4,1) du thème, qui charge après. */
	.wd-design-aside .wd-sub-menu > li > .wd-dropdown-menu.wd-wp-menu > .sub-sub-menu > li {
		width: auto;
		min-width: 0;
		/* Le thème pose `margin-bottom: 25px`, hérité d'une disposition en flux
		   où c'était le seul moyen d'espacer les lignes. En grille, `row-gap`
		   fait ce travail, et les deux s'ADDITIONNENT : le pas entre lignes
		   mesurait 127 px (80 de contenu + 25 de marge + 22 de gouttière) au
		   lieu des ~102 attendus. On rend l'espacement à `row-gap`, qui est le
		   seul réglage à toucher ensuite. */
		margin-bottom: 0;
	}

	.wd-design-aside .wd-sub-menu > li > .wd-dropdown-menu > .sub-sub-menu > li > a {
		flex-direction: column;
		align-items: center;
		gap: 8px;
		padding: 0;
		text-align: center;
		text-transform: none;
		font-size: 13px;
		line-height: 1.25;
		/* Le thème passe ces libellés en demi-gras
		   (`.wd-dropdown-menu.wd-design-aside .wd-wp-menu > .sub-sub-menu > li > a
		   { font-weight: 600 }`, spécificité (0,4,2)). En vignettes, c'est
		   l'image qui porte le repère visuel : le nom se lit mieux en graisse
		   normale. Notre sélecteur pèse (0,4,3), il suffit donc de déclarer la
		   propriété ici, sans surenchère ni `!important`. */
		font-weight: 400;
	}

	/* Vignette : 56px, et la marge de droite du mode « icône » n'a plus de sens
	   une fois l'image passée au-dessus du texte. */
	.wd-design-aside .wd-sub-menu > li > .wd-dropdown-menu > .sub-sub-menu .wd-nav-img {
		--nav-img-height: 56px;
		--nav-img-width: 56px;
		margin-inline-end: 0;
		transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	}

	/* Zoom progressif au survol. Seul `transform` est animé : c'est la propriété
	   que le navigateur compose sans recalculer la mise en page (§12), donc
	   aucune ligne ne bouge et les voisines ne sont pas repeintes.
	   Le déclencheur est le LIEN et non l'image, pour que survoler le libellé
	   produise le même effet. `:focus-visible` en plus : au clavier, on doit
	   voir ce que la souris montre. */
	.wd-design-aside .wd-sub-menu > li > .wd-dropdown-menu > .sub-sub-menu > li > a:hover .wd-nav-img,
	.wd-design-aside .wd-sub-menu > li > .wd-dropdown-menu > .sub-sub-menu > li > a:focus-visible .wd-nav-img {
		transform: scale(1.15);
	}
}

/* =========================================================================
   Hauteur du fond blanc du méga-menu, par palier de largeur
   -------------------------------------------------------------------------
   POURQUOI C'EST MANUEL. Le panneau de droite est positionné en ABSOLU : il ne
   pousse pas son conteneur, qui ne peut donc pas s'ajuster à son contenu. D'où
   le champ « Dropdown height » de l'entrée « Boutique » (560 px), et ces
   paliers pour les largeurs où il ne suffit pas.

   POURQUOI ÇA VARIE. Le nombre de colonnes baisse avec la largeur, donc le
   nombre de lignes monte ; et à colonnes plus étroites, certains libellés se
   replient sur deux lignes. Hauteur de liste mesurée :

       1280 px → 6 colonnes, 6 lignes, 624 px
       1366 px → 7 colonnes, 5 lignes, 554 px
       1440 px → 7 colonnes, 5 lignes, 538 px
       ≥1600   → 8 colonnes, 5 lignes, 489 à 522 px   (le champ à 560 suffit)

   ⚠️ Ces valeurs dépendent du NOMBRE d'entrées de la rubrique la plus longue
   (33 pierres) et de la LONGUEUR des libellés. À reprendre si l'un ou l'autre
   change : le contrôle est « la liste dépasse-t-elle le fond », mesurable en
   comparant les `getBoundingClientRect().bottom` des deux.

   🔴 ON REDÉCLARE LA VARIABLE, PAS LA PROPRIÉTÉ. Un `min-height` ici perdrait :
   la règle du thème, `.wd-design-aside .wd-sub-menu-wrapp > .wd-sub-menu
   { min-height: var(--wd-dropdown-height) }`, a exactement la même spécificité
   (0,3,0) et se charge APRÈS celle de l'enfant (WD-20). En posant la variable
   sur ce même élément, c'est la règle du thème elle-même qui calcule la bonne
   valeur. La valeur par défaut vient d'un style INLINE sur le `<li>` parent
   (`style="--wd-dropdown-height: 560px"`, alimenté par le champ « Dropdown
   height ») : une déclaration sur un descendant l'emporte sur cet héritage. */
@media (min-width: 1025px) and (max-width: 1365px) {
	.wd-design-aside .wd-sub-menu-wrapp > .wd-sub-menu {
		--wd-dropdown-height: 670px;
	}
}

@media (min-width: 1366px) and (max-width: 1599px) {
	.wd-design-aside .wd-sub-menu-wrapp > .wd-sub-menu {
		--wd-dropdown-height: 600px;
	}
}

/* Mouvement réduit : on garde le changement d'échelle au survol, on supprime son
   ANIMATION. Le repère visuel reste, l'effet de mouvement disparaît, ce que
   demande le critère. `!important` autorisé ici par les règles du projet
   (surcharge d'accessibilité). */
@media (prefers-reduced-motion: reduce) {
	.wd-design-aside .wd-nav-img {
		transition: none !important;
	}
}

/* =========================================================================
   Réassurance du pied de page (maquette `.signature-footer-reassurance`)
   Quatre engagements sur fond vert sauge, au-dessus du pied de page, sur
   toutes les pages : d'où cette feuille globale et non `kin-home.css`.

   Le bandeau est un bloc natif posé dans le bloc HTML « Footer Jewellery 2 »
   (#1367) ; `kin-fullbleed` l'étire sur toute la largeur du pied de page.
   Les pictos sont des masques CSS : rien de décoratif dans le contenu.
   ========================================================================= */

.kin-reassurance.kin-reassurance {
	--kin-rea-bg: #e7ebe2;
	--kin-rea-ink: #28232e;
	--kin-rea-text: #5c6256;
	--kin-rea-line: #c8d0c1;
	--kin-rea-picto: #403347;

	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px 20px;
	margin-block: 0; /* Woodmart pose 20 px sous tout enfant de bloc (WD-47). */
	padding: 32px 20px;
	background-color: var(--kin-rea-bg);
	border-block-end: 1px solid var(--kin-rea-line);
	color: var(--kin-rea-ink);
}

.kin-reassurance .kin-reassurance__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 13px;
	min-width: 0;
	margin-block: 0;
	text-align: center;
}

.kin-reassurance .kin-reassurance__item::before {
	content: "";
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	background-color: var(--kin-rea-picto);
	-webkit-mask-image: var(--kin-rea-img);
	mask-image: var(--kin-rea-img);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	mask-position: center center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.kin-reassurance .kin-reassurance__item > * {
	max-width: 29ch;
	margin-block: 0;
}

.kin-reassurance .kin-reassurance__titre {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--kin-rea-ink);
}

/* Le titre et son texte forment un seul bloc : l'écart entre eux est ici, et
   non dans le `gap` de l'article, qui sépare le picto du texte. */
.kin-reassurance .kin-reassurance__item > .kin-reassurance__texte {
	margin-block-start: -7px;
	font-size: 11px;
	line-height: 1.65;
	color: var(--kin-rea-text);
}

.kin-reassurance .kin-reassurance__item--selection { --kin-rea-img: url(assets/img/reassurance/selection-coffret.svg); }
.kin-reassurance .kin-reassurance__item--confiance { --kin-rea-img: url(assets/img/reassurance/choisi-avec-coeur.svg); }
.kin-reassurance .kin-reassurance__item--livraison { --kin-rea-img: url(assets/img/reassurance/livraison-retours.svg); }
.kin-reassurance .kin-reassurance__item--foret     { --kin-rea-img: url(assets/img/reassurance/arbre-plante.svg); }

@media (min-width: 551px) {
	.kin-reassurance.kin-reassurance {
		gap: 36px 30px;
		padding: 38px 6%;
	}
	.kin-reassurance .kin-reassurance__item {
		gap: 17px;
	}
	.kin-reassurance .kin-reassurance__item::before {
		width: 64px;
		height: 64px;
	}
	.kin-reassurance .kin-reassurance__titre {
		font-size: 14px;
	}
	.kin-reassurance .kin-reassurance__item > .kin-reassurance__texte {
		margin-block-start: -9px;
		font-size: 12px;
	}
}

@media (min-width: 1001px) {
	.kin-reassurance.kin-reassurance {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 32px;
		/* Le contenu ne dépasse pas 1440 px, et garde 6 % de marge en dessous. */
		padding: 48px max(6%, 50% - 720px);
	}
}

/* =========================================================================
   Sélecteur de langue du pied de page (WPML, emplacement natif « pied de
   page », réglé dans WPML : noms natifs, sans drapeaux)
   WPML l'imprime après le pied de page de Woodmart, sur le fond blanc de la
   page : il reprend le fond du pied (réglage Woodmart `footer-bar-bg`, sans
   variable CSS) pour en être la dernière ligne. Encre à 6,5:1 sur ce fond
   (le gris des liens du pied n'y fait que 3,6:1). La langue courante se
   distingue autrement que par la couleur ; cibles de 44 px. Masqué quand il
   ne propose que la langue courante (page sans traduction) : un lien vers la
   page elle-même ne sert à rien. Sélecteurs doublés : la feuille de WPML et
   celle de Woodmart (`wd-wpml`) se chargent après la nôtre.
   ========================================================================= */

.wpml-ls-statics-footer.wpml-ls-statics-footer.wpml-ls-legacy-list-horizontal {
	--kin-pied-fond: #f8f7f7;
	--kin-pied-encre: #595959;
	--kin-pied-encre-forte: #28232e;

	margin: 0;
	padding: 0 15px 16px;
	background-color: var(--kin-pied-fond);
}

.wpml-ls-statics-footer.wpml-ls-statics-footer:not(:has(li + li)) {
	display: none;
}

.wpml-ls-statics-footer.wpml-ls-statics-footer .wpml-ls-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 12px;
	font-size: 14px;
	line-height: 1.2;
	color: var(--kin-pied-encre);
}

.wpml-ls-statics-footer.wpml-ls-statics-footer .wpml-ls-link[aria-current="page"] {
	font-weight: 600;
	color: var(--kin-pied-encre-forte);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.wpml-ls-statics-footer.wpml-ls-statics-footer .wpml-ls-link:hover {
	color: var(--kin-pied-encre-forte);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* =========================================================================
   Panier latéral (maquette « Signature », volet-panier-boutique.css, D-139)
   Le panneau de Woodmart (`.cart-widget-side`) habillé : 440 px, papier, en-tête
   au filet, articles (photo 78 px, nom en Lora, pierres, quantité, total de la
   ligne), pied lavande (message de livraison, total, « Commander », réassurance).
   Contenu des lignes : kin_mini_panier_ligne(), kin_mini_panier_livraison() et
   kin_mini_panier_reassurance() (functions.php). Les feuilles de Woodmart se
   chargent après celle-ci : une classe de plus (`.wd-side-hidden`).
   Écart voulu : gris de la maquette (#756b79) remonté à #6b5f70 sur le lavande,
   pour l'AA (4,2:1 → 5,1:1) ; « Voir mon panier » absent (D-130).
   ========================================================================= */

.cart-widget-side.wd-side-hidden {
	--wd-side-hidden-w: 440px;
	--kin-volet-encre: #382b3e;
	--kin-volet-discret: #6b5f70;
	--kin-volet-filet: #e4dfda;
	--kin-volet-prune: #64466e;
	/* Contour de focus des liens et boutons : celui de Woodmart, en `!important`, ne se règle que
	   par ses variables (WD-70) ; prune plein, comme la maquette et la page panier. */
	--wd-otl-width: 2px;
	--wd-otl-style: solid;
	--wd-otl-color: var(--kin-volet-prune);
	--wd-otl-offset: 3px;

	border-left: 1px solid var(--kin-volet-filet);
	background-color: #faf8f3;
	font-size: 13px;
	line-height: 1.6;
	color: var(--kin-volet-encre);
}

/* En-tête : « Panier » en Lora, croix seule (son texte reste aux lecteurs d'écran). */
.cart-widget-side.wd-side-hidden .wd-heading {
	align-items: center;
	padding: 24px 25px 22px;
	border-bottom: 1px solid var(--kin-volet-filet);
}

.cart-widget-side.wd-side-hidden .wd-heading .title {
	font: 400 26px/1.3 Lora, serif;
	letter-spacing: 0;
	color: var(--kin-volet-encre);
}

.cart-widget-side.wd-side-hidden .close-side-widget .wd-action-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.cart-widget-side.wd-side-hidden .close-side-widget > a {
	justify-content: center;
	align-items: center;
	width: 36px;
	height: 36px;
	color: var(--kin-volet-encre);
}

.cart-widget-side.wd-side-hidden .close-side-widget .wd-action-icon {
	font-size: 18px;
}

/* Articles. */
.cart-widget-side.wd-side-hidden .woocommerce-mini-cart {
	margin: 0;
	padding: 0 25px;
}

.cart-widget-side.wd-side-hidden .woocommerce-mini-cart .mini_cart_item {
	padding: 24px 34px 24px 0;
	border-bottom: 1px solid var(--kin-volet-filet);
	background: none;
}

.cart-widget-side.wd-side-hidden .woocommerce-mini-cart .mini_cart_item:hover {
	background: none;
}

.cart-widget-side.wd-side-hidden .woocommerce-mini-cart .cart-item-image {
	width: 78px;
	margin: 0 14px 0 0;
}

.cart-widget-side.wd-side-hidden .woocommerce-mini-cart .cart-item-image img {
	width: 78px;
	max-width: none; /* Woodmart : 65 px */
	height: 78px;
	border-radius: 0;
	object-fit: cover;
}

.cart-widget-side.wd-side-hidden .woocommerce-mini-cart .cart-info {
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	padding: 0;
}

.cart-widget-side.wd-side-hidden .woocommerce-mini-cart .cart-info > * {
	grid-column: 1 / -1;
}

.cart-widget-side.wd-side-hidden .woocommerce-mini-cart .wd-entities-title {
	margin: 0 0 6px;
	font: 400 16px/1.45 Lora, serif;
	color: var(--kin-volet-encre);
}

.kin-mini-panier-pierres {
	display: block;
	font-size: 11px;
	line-height: 1.6;
	color: var(--kin-volet-discret, #6b5f70);
}

/* Quantité (− 1 +) et total de la ligne, sur une rangée. */
.cart-widget-side.wd-side-hidden .woocommerce-mini-cart .cart-info > div.quantity {
	grid-column: 1;
	grid-row: 3;
	height: 33px;
	margin: 14px 0 0;
	border: 1px solid #dcd3df;
	background: transparent;
}

.cart-widget-side.wd-side-hidden .woocommerce-mini-cart div.quantity :is(.minus, .plus) {
	width: 26px;
	min-width: 26px;
	height: 31px;
	min-height: 0;
	border: 0;
	background: transparent;
	color: var(--kin-volet-encre);
}

.cart-widget-side.wd-side-hidden .woocommerce-mini-cart div.quantity .qty {
	width: 24px;
	height: 31px;
	min-height: 0;
	border: 0;
	background: transparent;
	font-size: 12px;
	color: var(--kin-volet-encre);
}

.cart-widget-side.wd-side-hidden .woocommerce-mini-cart .cart-info > .kin-mini-panier-prix {
	grid-column: 2;
	grid-row: 3;
	justify-self: end;
	margin: 14px 0 0;
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	color: var(--kin-volet-encre);
}

.cart-widget-side.wd-side-hidden .woocommerce-mini-cart .kin-mini-panier-prix .amount {
	color: inherit;
}

.cart-widget-side.wd-side-hidden .woocommerce-mini-cart .remove {
	top: 24px;
	right: 0;
	inset-inline-end: 0;
	color: var(--kin-volet-discret);
}

/* Pied : livraison, total, bouton, réassurance, sur le lavande. */
.cart-widget-side.wd-side-hidden .shopping-cart-widget-footer {
	display: flex;
	flex-direction: column;
	padding: 19px 25px 15px;
	border-top: 1px solid var(--kin-volet-filet);
	background-color: #f0ebf2;
}

.cart-widget-side.wd-side-hidden .shopping-cart-widget-footer > * {
	padding-inline: 0;
}

.cart-widget-side.wd-side-hidden .shopping-cart-widget-footer.wd-cart-empty {
	display: none;
}

/* Livraison offerte (D-140) : bande sauge sur toute la largeur, en tête du pied, centrée, avec
   le picto de livraison du site et la jauge des articles ; obtenue, la bande passe en sauge
   foncé, même picto, sans jauge.
   Contrastes : #4f6345 sur #e9eee6, 5,6:1 ; blanc sur #4f6345, 6,6:1. */
.cart-widget-side.wd-side-hidden .shopping-cart-widget-footer > .kin-mini-panier-livraison {
	order: -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	margin: -19px -25px 17px;
	padding: 13px 25px;
	border-bottom: 1px solid #d5dfcf;
	background-color: #e9eee6;
	text-align: center;
	color: #4f6345;
}

/* Le pictogramme est dans la ligne : si le texte passe sur deux lignes (téléphone), il reste
   devant le premier mot et l'ensemble reste centré. */
.kin-mini-panier-livraison__texte {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	color: inherit;
	text-wrap: balance;
}

/* Le pictogramme de livraison des engagements du site (`.kin-reassurance__item--livraison`). */
.kin-mini-panier-livraison__texte::before {
	content: "";
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-right: 8px;
	vertical-align: -10px;
	background-color: currentColor;
	-webkit-mask: url(assets/img/reassurance/livraison-retours.svg) center / contain no-repeat;
	mask: url(assets/img/reassurance/livraison-retours.svg) center / contain no-repeat;
}

.kin-mini-panier-livraison__jauge {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: min(100%, 220px);
	height: 5px;
	border: 0;
	border-radius: 3px;
	background-color: #fff;
	color: #4f6345;
	overflow: hidden;
}

.kin-mini-panier-livraison__jauge::-webkit-progress-bar {
	border-radius: 3px;
	background-color: #fff;
}

.kin-mini-panier-livraison__jauge::-webkit-progress-value {
	border-radius: 3px;
	background-color: #4f6345;
}

.kin-mini-panier-livraison__jauge::-moz-progress-bar {
	border-radius: 3px;
	background-color: #4f6345;
}

.cart-widget-side.wd-side-hidden .shopping-cart-widget-footer > .kin-mini-panier-livraison--offerte {
	border-bottom-color: #4f6345;
	background-color: #4f6345;
	color: #fff;
}

.cart-widget-side.wd-side-hidden .woocommerce-mini-cart__total {
	justify-content: space-between;
	align-items: baseline;
	gap: 15px;
	margin: 0 0 17px;
	padding: 0;
	border: 0;
	font-size: 13px;
}

.cart-widget-side.wd-side-hidden .woocommerce-mini-cart__total strong {
	font-weight: 400;
	color: var(--kin-volet-encre);
}

.cart-widget-side.wd-side-hidden .woocommerce-mini-cart__total .amount {
	font: 400 25px/1.2 Lora, serif;
	color: var(--kin-volet-encre);
}

.cart-widget-side.wd-side-hidden .woocommerce-mini-cart__buttons {
	margin: 0;
}

.cart-widget-side.wd-side-hidden .woocommerce-mini-cart__buttons .checkout {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	width: 100%;
	min-height: 46px;
	padding: 11px 14px;
	border: 1px solid var(--kin-volet-prune);
	border-radius: 0;
	background-color: var(--kin-volet-prune);
	font-size: 13px;
	font-weight: 500;
	color: #fff;
	box-shadow: none;
}

.cart-widget-side.wd-side-hidden .woocommerce-mini-cart__buttons .checkout:hover {
	background-color: #4e3557;
	color: #fff;
}

.cart-widget-side.wd-side-hidden .woocommerce-mini-cart__buttons .checkout::after {
	content: "";
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15m-5-5 5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15m-5-5 5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.kin-mini-panier-reassurance {
	margin: 12px 0 0;
	font-size: 11px;
	line-height: 1.6;
	text-align: center;
	color: #6b5f70;
}

/* Panier vide : titre en Lora, sac prune, bouton bordé. */
.cart-widget-side.wd-side-hidden .wd-empty-mini-cart {
	margin: 0;
	padding: 55px 25px;
	text-align: center;
}

/* Le chariot barré de Woodmart : remplacé par le sac de la maquette, sur le message. */
.cart-widget-side.wd-side-hidden .wd-empty-mini-cart::before {
	display: none;
}

.cart-widget-side.wd-side-hidden .wd-empty-mini-cart .woocommerce-mini-cart__empty-message {
	margin: 0 0 25px;
	font: 400 23px/1.3 Lora, serif;
	color: var(--kin-volet-encre);
}

.cart-widget-side.wd-side-hidden .wd-empty-mini-cart .woocommerce-mini-cart__empty-message::before {
	content: "";
	display: block;
	width: 43px;
	height: 43px;
	margin: 0 auto 22px;
	background-color: var(--kin-volet-prune);
	font-size: 0;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h14l2 14H3L5 7ZM8 8V5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h14l2 14H3L5 7ZM8 8V5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cart-widget-side.wd-side-hidden .wd-empty-mini-cart .btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 46px;
	padding: 11px 14px;
	border: 1px solid var(--kin-volet-prune);
	border-radius: 0;
	background: transparent;
	font-size: 13px;
	font-weight: 500;
	color: var(--kin-volet-prune);
	box-shadow: none;
}

.cart-widget-side.wd-side-hidden .wd-empty-mini-cart .btn:hover {
	background: #e5dbe9;
	color: var(--kin-volet-prune);
}

.cart-widget-side.wd-side-hidden :is(a, button, input):focus-visible {
	outline: 2px solid var(--kin-volet-prune);
	outline-offset: 3px;
}

@media (max-width: 580px) {
	.cart-widget-side.wd-side-hidden {
		--wd-side-hidden-w: 410px;
	}

	.cart-widget-side.wd-side-hidden .wd-heading {
		padding: 20px 15px;
	}

	.cart-widget-side.wd-side-hidden .wd-heading .title {
		font-size: 25px;
	}

	.cart-widget-side.wd-side-hidden .woocommerce-mini-cart {
		padding: 0 15px;
	}

	.cart-widget-side.wd-side-hidden .woocommerce-mini-cart .mini_cart_item {
		padding: 20px 29px 20px 0;
	}

	.cart-widget-side.wd-side-hidden .woocommerce-mini-cart .cart-item-image {
		width: 66px;
		margin-right: 11px;
	}

	.cart-widget-side.wd-side-hidden .woocommerce-mini-cart .cart-item-image img {
		width: 66px;
		height: 66px;
	}

	.cart-widget-side.wd-side-hidden .woocommerce-mini-cart .wd-entities-title {
		font-size: 15px;
	}

	.cart-widget-side.wd-side-hidden .woocommerce-mini-cart .remove {
		top: 20px;
	}

	.cart-widget-side.wd-side-hidden .shopping-cart-widget-footer {
		padding: 17px 15px max(15px, env(safe-area-inset-bottom));
	}

	.cart-widget-side.wd-side-hidden .shopping-cart-widget-footer > .kin-mini-panier-livraison {
		margin: -17px -15px 15px;
		padding: 12px 15px;
	}
}

/* =========================================================================
   Volet de connexion (maquette « Signature », volet-compte-boutique.css, D-155)
   Le panneau de Woodmart (`.login-form-side`) habillé comme le panier latéral :
   440 px, papier, en-tête au filet, champs de 48 px sans arrondi, bouton prune,
   « Se souvenir de moi » à gauche et « Mot de passe oublié ? » à droite, encart
   d'inscription lilas, vue « Mot de passe oublié » (inc/volet-compte.php, kin.js).
   Écart voulu : gris de l'encart (#756b79 sur lilas, 4,2:1) remonté à #6b5f70
   (5,1:1), comme le panier (D-139).
   ========================================================================= */

.login-form-side.wd-side-hidden.kin-volet-compte {
	--wd-side-hidden-w: 440px;
	--kin-volet-encre: #382b3e;
	--kin-volet-discret: #756b79;
	--kin-volet-filet: #e4dfda;
	--kin-volet-prune: #64466e;
	--wd-otl-width: 2px;
	--wd-otl-style: solid;
	--wd-otl-color: var(--kin-volet-prune);
	--wd-otl-offset: 3px;

	border-left: 1px solid var(--kin-volet-filet);
	background-color: #faf8f3;
	font-size: 14px;
	line-height: 1.6;
	color: var(--kin-volet-encre);
}

.kin-volet-compte [hidden] {
	display: none;
}

.kin-volet-compte.wd-side-hidden .wd-heading {
	align-items: center;
	gap: 14px;
	padding: 25px;
	border-bottom: 1px solid var(--kin-volet-filet);
}

.kin-volet-compte.wd-side-hidden .wd-heading .title {
	font: 400 26px/1.3 Lora, serif;
	letter-spacing: 0;
	text-transform: none;
	color: var(--kin-volet-encre);
}

.kin-volet-compte.wd-side-hidden .close-side-widget > a {
	gap: 7px;
	min-height: 40px;
	font-size: 12px;
	font-weight: 400;
	text-transform: none;
	color: var(--kin-volet-encre);
}

/* Le corps des deux vues : connexion, mot de passe oublié. */
.kin-volet-compte .kin-volet-compte__corps {
	padding: 27px 25px 30px;
}

.kin-volet-compte .kin-volet-compte__intro {
	margin: 0 0 25px;
	font-size: 13px;
	line-height: 1.7;
	color: var(--kin-volet-discret);
}

.kin-volet-compte .kin-volet-compte__titre-oubli {
	margin: 0 0 15px;
	font: 400 23px/1.35 Lora, serif;
	color: var(--kin-volet-encre);
}

.kin-volet-compte.wd-side-hidden form.woocommerce-form-login,
.kin-volet-compte.wd-side-hidden form.lost_reset_password {
	margin: 0;
	padding: 0;
	border: 0;
}

.kin-volet-compte.wd-side-hidden form .form-row {
	margin: 0 0 22px;
	padding: 0;
}

.kin-volet-compte.wd-side-hidden form label:not(.woocommerce-form-login__rememberme) {
	display: block;
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--kin-volet-encre);
}

.kin-volet-compte.wd-side-hidden form .required {
	font-size: inherit; /* Woodmart : 16 px */
	color: var(--kin-volet-prune);
}

.kin-volet-compte.wd-side-hidden .close-side-widget .wd-action-text {
	font-weight: 400; /* Woodmart : 600 */
}

.kin-volet-compte.wd-side-hidden form input.input-text {
	width: 100%;
	height: 48px;
	padding: 11px 13px;
	border: 1px solid #d9d0dc;
	border-radius: 0;
	background-color: #fffdfa;
	box-shadow: none;
	font-size: 14px;
	color: var(--kin-volet-encre);
}

.kin-volet-compte.wd-side-hidden form input.input-text:focus {
	border-color: var(--kin-volet-prune);
	box-shadow: 0 0 0 1px var(--kin-volet-prune);
}

/* Mot de passe : le bouton « afficher » de WooCommerce, carré de 46 px dans le champ. */
.kin-volet-compte.wd-side-hidden .password-input {
	display: block;
	position: relative;
}

.kin-volet-compte.wd-side-hidden .password-input input.input-text {
	padding-right: 51px;
}

.kin-volet-compte.wd-side-hidden .show-password-input {
	top: 1px;
	right: 1px;
	width: 46px;
	height: 46px;
	color: var(--kin-volet-discret);
}

/* Bouton principal : prune, pleine largeur, 48 px. */
.kin-volet-compte.wd-side-hidden form .form-row-btn {
	margin: 0;
}

.kin-volet-compte.wd-side-hidden form .btn-accent {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 48px;
	padding: 12px 15px;
	border: 1px solid var(--kin-volet-prune);
	border-radius: 0;
	background-color: var(--kin-volet-prune);
	box-shadow: none;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: #fff;
}

.kin-volet-compte.wd-side-hidden form .btn-accent:hover {
	border-color: #4e3557;
	background-color: #4e3557;
	color: #fff;
}

/* « Se souvenir de moi » à gauche, « Mot de passe oublié ? » à droite : Woodmart
   ordonne déjà les deux (`order`), l'ordre se donne donc explicitement. */
.kin-volet-compte.wd-side-hidden .login-form-footer {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 13px;
	margin: 19px 0 0;
	font-size: 12px;
}

.kin-volet-compte.wd-side-hidden .login-form-footer .lost_password {
	order: 2;
}

.kin-volet-compte.wd-side-hidden .woocommerce-form-login__rememberme {
	order: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 12px;
	cursor: pointer;
}

.kin-volet-compte.wd-side-hidden .woocommerce-form-login__rememberme input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--kin-volet-prune);
}

.kin-volet-compte.wd-side-hidden .lost_password,
.kin-volet-compte .kin-volet-compte__retour {
	padding: 0;
	border: 0;
	background: none;
	font-size: 12px;
	font-weight: 400;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-transform: none;
	color: var(--kin-volet-prune);
	cursor: pointer;
}

.kin-volet-compte .kin-volet-compte__retour {
	min-height: 24px;
	margin-top: 22px;
}

/* Encart d'inscription : lilas, centré, pictogramme prune, bouton bordé. */
.kin-volet-compte.wd-side-hidden .create-account-question {
	margin: 0;
	padding: 30px 25px 33px;
	border-top: 1px solid #e1d7e6;
	border-bottom: 1px solid #e1d7e6;
	background-color: #eee8f1;
	text-align: center;
}

/* Le pictogramme de Woodmart (police d'icônes, gris pâle) cède la place à celui de la maquette. */
.kin-volet-compte.wd-side-hidden .create-account-question::before {
	content: none;
}

.kin-volet-compte .kin-volet-compte__picto {
	display: block;
	width: 33px;
	height: 33px;
	margin: 0 auto 12px;
	fill: none;
	stroke: var(--kin-volet-prune);
	stroke-width: 1.3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.kin-volet-compte.wd-side-hidden .create-account-question .kin-volet-compte__question {
	margin: 0 0 10px;
	font: 400 22px/1.35 Lora, serif;
	text-transform: none;
	color: var(--kin-volet-encre);
}

.kin-volet-compte.wd-side-hidden .create-account-question .kin-volet-compte__texte {
	max-width: 295px;
	margin: 0 auto 23px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.7;
	color: #6b5f70;
}

.kin-volet-compte.wd-side-hidden .create-account-button {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 48px;
	padding: 12px 15px;
	border: 1px solid var(--kin-volet-prune);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--kin-volet-prune);
}

.kin-volet-compte.wd-side-hidden .create-account-button:hover {
	background-color: #e4dbe9;
	color: var(--kin-volet-prune);
}

.kin-volet-compte.wd-side-hidden :is(a, button, input):focus-visible {
	outline: 2px solid var(--kin-volet-prune);
	outline-offset: 3px;
}

@media (max-width: 580px) {
	.login-form-side.wd-side-hidden.kin-volet-compte {
		--wd-side-hidden-w: 410px;
	}

	.kin-volet-compte.wd-side-hidden .wd-heading {
		padding: 20px 15px;
	}

	.kin-volet-compte.wd-side-hidden .wd-heading .title {
		font-size: 25px;
	}

	.kin-volet-compte .kin-volet-compte__corps {
		padding: 25px 15px;
	}

	.kin-volet-compte.wd-side-hidden .create-account-question {
		padding: 28px 15px;
	}

	/* 16 px : iOS ne zoome pas sur le champ. */
	.kin-volet-compte.wd-side-hidden form input.input-text {
		font-size: 16px;
	}

	.kin-volet-compte.wd-side-hidden .login-form-footer {
		gap: 17px;
	}
}

/* =========================================================================
   Histoire de Kinthia : le papier et le tirage (maquette `.history`)
   Composant commun à l'accueil (section « histoire », kin-home.css) et à la
   fiche produit (bloc « Notre histoire » du layout #801, kin-product.css),
   D-69 : deux objets posés de travers, un papier (la chouette, « 2006 ») et
   un tirage photo. Déplacé ici de kin-home.css le 15/10/2026. La fiche n'a
   pas de papier : elle garde le tirage (cadre, inclinaison, cadrage), le pose
   à côté d'un premier tirage et neutralise la mise en page ci-dessous
   (kin-product.css, section « L'histoire »).

   Le papier ne mord que sur le coin haut gauche du tirage : la photo
   (03/10/2026) y montre le mur, ses deux visages et les mains restent
   dégagés à toutes les largeurs. Le papier remonte au-dessus du tirage, le
   tirage se décale vers la droite.
   Les deux cartes ont à peu près la même taille. Sous 901 px, le papier
   prend la largeur du tirage et un rapport voisin du sien ; sa chouette,
   son année et ses marges suivent sa largeur (unités `cqi`, valeur en px
   avant, en repli), ses textes gardent leur taille. Au-delà, les deux
   sont déjà de taille voisine.
   Sous 901 px, le tirage suit le papier dans le flux, chevauchement réglé
   par sa marge haute : la colonne prend la hauteur de son contenu, à toute
   largeur. Au-delà, la colonne est assez large pour le poser en absolu ; il
   descend alors de 45 px sous elle, dans le retrait bas de la section.
   Les couleurs sont définies ici, sur la composition : le composant ne
   dépend pas de kin-home.css.
   ========================================================================= */

.kin-histoire .kin-histoire__art {
	--kin-his-papier: #eee8f5;
	--kin-his-trait: #c9bbd5;
	--kin-his-ink: #28232e;

	position: relative;
	margin-block-end: 0;
	margin-inline: 10px;
	color: var(--kin-his-ink);
}

/* Le papier : incliné, cerné d'un second filet en retrait, comme une carte
   glissée dans un album. L'inclinaison est un `transform` : elle ne déplace
   rien dans la page et n'entraîne donc aucun décalage (CLS). */
.kin-histoire .kin-histoire__papier {
	position: relative;
	inset-inline-start: -4px;
	z-index: 2;
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 62%; /* celle du tirage */
	aspect-ratio: 1 / 1.03;
	margin-block: 0;
	padding: 16px 12px;
	background-color: var(--kin-his-papier);
	border: 1px solid var(--kin-his-trait);
	outline: 1px solid var(--kin-his-trait);
	outline-offset: -10px;
	box-shadow: 0 9px 25px rgba(55, 43, 66, 0.07);
	text-align: center;
	transform: rotate(-6deg);
}

.kin-histoire .kin-histoire__papier > * {
	margin-block: 0;
}

.kin-histoire .kin-histoire__ouverture {
	font-size: 9px;
}

.kin-histoire .kin-histoire__papier figure {
	margin: 11px auto 6px;
	margin: 6cqi auto 3cqi;
}

/* `multiply` fond le blanc du détourage dans le papier, sans masque ni
   détourage supplémentaire. */
.kin-histoire .kin-histoire__papier img {
	width: 60px;
	width: min(32cqi, 75px);
	height: 68px;
	height: min(36cqi, 85px);
	margin: 0;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.kin-histoire .kin-histoire__annee {
	font-family: var(--wd-title-font-family, Georgia, serif);
	font-size: 40px;
	font-size: min(22cqi, 47px);
	line-height: 1.2;
}

.kin-histoire .kin-histoire__depuis {
	margin-block-start: 7px;
	margin-block-start: 4cqi;
	font-size: 10px;
	line-height: 1.6;
}

/* Le tirage : sous le papier, incliné dans l'autre sens, calé à droite. */
.kin-histoire .kin-histoire__photo {
	position: relative;
	inset-inline-end: -10px; /* dans la marge de la colonne */
	width: 62%;
	margin: -16px 0 0 auto;
	padding: 8px 8px 20px;
	background-color: #fff;
	box-shadow: 0 9px 25px rgba(55, 43, 66, 0.094);
	transform: rotate(7deg);
}

/* 6:5 partout, cadrée à 35 % de la hauteur : le haut des têtes et le
   casier restent dans le cadre. */
.kin-histoire .kin-histoire__photo img {
	width: 100%;
	height: auto;
	aspect-ratio: 6 / 5;
	object-fit: cover;
	object-position: 50% 35%;
}

.kin-histoire .kin-histoire__photo figcaption {
	margin-block: 12px 0;
	font-family: var(--wd-title-font-family, Georgia, serif);
	font-size: 12px;
	font-style: italic;
	line-height: 1.3;
	text-align: center;
}

@media (min-width: 601px) {
	.kin-histoire .kin-histoire__art {
		margin-inline: 0;
		padding-block-start: 15px;
	}
	.kin-histoire .kin-histoire__papier {
		inset-block-start: -15px;
		inset-inline-start: 0; /* gouttière de 15 px : rien à gagner à gauche */
		width: 68%; /* celle du tirage */
		aspect-ratio: 1 / 1.12;
		padding: 16px 10px;
	}
	.kin-histoire .kin-histoire__ouverture {
		font-size: 9px;
	}
	.kin-histoire .kin-histoire__papier img {
		width: min(32cqi, 80px);
		height: min(36cqi, 85px);
	}
	.kin-histoire .kin-histoire__annee {
		font-size: min(22cqi, 48px);
	}
	.kin-histoire .kin-histoire__depuis {
		font-size: 10px;
	}
	/* Chevauchement croissant avec la largeur, réglé à la mesure : −5 px à
	   601 px, −40 px à 900 px. */
	.kin-histoire .kin-histoire__photo {
		inset-inline-end: -25px; /* dans l'espace entre les colonnes */
		width: 68%;
		margin-block-start: calc(60px - 11vw);
		padding: 10px 10px 35px;
	}
	.kin-histoire .kin-histoire__photo figcaption {
		margin-block-start: 14px;
		font-size: 17px;
	}
}

@media (min-width: 901px) {
	.kin-histoire .kin-histoire__art {
		min-height: 510px;
	}
	/* Le papier redevient un bloc à sa hauteur de contenu. */
	.kin-histoire .kin-histoire__papier {
		inset-block-start: -25px;
		container-type: normal;
		display: block;
		width: min(66%, 300px);
		aspect-ratio: auto;
		padding-block: 26px;
	}
	.kin-histoire .kin-histoire__ouverture {
		font-size: 11px;
	}
	.kin-histoire .kin-histoire__papier img {
		width: 105px;
		height: 105px;
	}
	.kin-histoire .kin-histoire__papier figure {
		margin-block: 24px 10px;
	}
	.kin-histoire .kin-histoire__annee {
		font-size: 57px;
	}
	.kin-histoire .kin-histoire__depuis {
		margin-block-start: 12px;
		font-size: 11px;
	}
	/* Le tirage reposé en absolu, au pied de la colonne ; il descend de 45 px
	   sous elle. */
	.kin-histoire .kin-histoire__photo {
		position: absolute;
		inset-inline-end: -30px;
		bottom: -45px;
		width: 62%;
		margin: 0;
	}
}

/* Gouttière de 50 px : le papier se décale aussi vers la gauche. */
@media (min-width: 1025px) {
	.kin-histoire .kin-histoire__papier {
		inset-inline-start: -25px;
		width: 66%;
	}
}

@media (min-width: 1201px) {
	.kin-histoire .kin-histoire__art {
		min-height: 500px;
	}
	.kin-histoire .kin-histoire__papier {
		width: 62%;
		padding: 34px 15px;
	}
	.kin-histoire .kin-histoire__photo {
		inset-inline-end: -40px;
	}
}

/* « Lire plus » d'un bloc repliable dont le texte tient sans repli (kin.js
   pose `kin-repli-inutile` après mesure) : masqué, sa place gardée pour ne rien
   décaler (CLS). `visibility` le retire aussi de la tabulation et de l'arbre
   d'accessibilité, sa zone de clic (::before) comprise. Sans transition : celle
   des boutons de Woodmart (0,25 s) le laisserait apparaître un instant. Le
   panneau montre ce qui dépasse de la coupe par arrondi (un pixel), sans quoi le
   bas de la dernière ligne serait rogné sans bouton pour le révéler. */
.kin-repli-inutile > .wp-block-wd-button {
	visibility: hidden;
	transition: none;
}

/* (0,4,0) : Woodmart coupe par `…-collapsible-content:not(.wd-opened) > …-container`
   (0,3,0), et sa feuille se charge après la nôtre. */
.kin-repli-inutile.kin-repli-inutile:not(.wd-opened) > .wp-block-wd-container {
	overflow: visible;
}