/*
 * The shared frame of every theme (ThemeContext::stylesheets(), after shop.css, before the theme's sheet).
 * - The header's height (--bar-h): anchors (#produits, #mur, ?c=…) land under the fixed header, never beneath it.
 * - Contrasts: text on a token surface always uses its paired token (soft-text on brand-soft, accent-on-ink on ink).
 * - The footer: the welcome offer as a real button on its own row, the customer's links aligned.
 */
:root{--bar-h:64px}
/* The two add up: 16px of air under the header (any anchor), the header's height on the sections one lands on. */
html{scroll-padding-top:16px}
:is(#produits,#mur,#code,#faq,#contact){scroll-margin-top:var(--bar-h)}
/* Contrasts */
.notice{color:var(--soft-text)}
.hero__promise{color:var(--accent-on-ink)}
.foot__fine a{color:inherit}
/* « Confirmer l’annulation » on the dark pages (Immersion, Néon: --danger is the light red there): dark text. */
:is(.theme-immersion,.theme-neon) .cancel__go{--fg:var(--ink-soft)}
/* Footer: offer + links */
.foot__links{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin:var(--s3) 0 0;padding-top:var(--s2);border-top:1px solid color-mix(in srgb,currentColor 16%,transparent)}
.foot__nav{display:flex;flex-wrap:wrap;align-items:center;gap:0 24px}
.foot__nav a{display:inline-flex;align-items:center;min-height:44px;color:inherit;font-size:var(--t-sm);font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.foot__nav a:hover{text-decoration-thickness:2px}
.foot__offer{display:inline-flex;align-items:center;gap:12px;min-height:52px;max-width:100%;padding:6px 18px 6px 6px;border-radius:var(--pill);background:color-mix(in srgb,currentColor 7%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 24%,transparent);color:inherit;font-size:var(--t-sm);font-weight:600;line-height:1.25;text-decoration:none;transition:background-color var(--q),box-shadow var(--q)}
.foot__offer:hover{background:color-mix(in srgb,currentColor 13%,transparent);box-shadow:inset 0 0 0 1.5px currentColor}
.foot__offer-pct{display:grid;place-items:center;flex:none;min-width:58px;height:40px;padding:0 12px;border-radius:var(--pill);background:var(--brand);color:var(--brand-ink);font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.foot__offer-text{min-width:0}
.foot__offer .ico{flex:none;transition:transform var(--m)}
.foot__offer:hover .ico{transform:translateX(3px)}
@media (max-width:699px){.foot__offer{width:100%}.foot__offer-text{flex:1}}
.theme-brut .foot__offer,.theme-brut .foot__offer-pct,.theme-journal .foot__offer,.theme-journal .foot__offer-pct,.theme-retro .foot__offer,.theme-retro .foot__offer-pct{border-radius:0}
/* Product page, computer: every photo shown large (the visual on the whole width, the packshot and the others two by
   two, full-resolution source), no carousel hiding the second photo behind a dot. Atelier keeps its leafing gallery. */
@media (min-width:1000px){
body:not(.theme-atelier) .pdp__gallery:has(.gallery>:nth-child(2)){overflow:visible;border-radius:0;box-shadow:none;border:0}
body:not(.theme-atelier) .gallery:has(>:nth-child(2)){display:grid;grid-template-columns:1fr 1fr;gap:12px;overflow:visible;scroll-snap-type:none}
body:not(.theme-atelier) .gallery:has(>:nth-child(2))>*{aspect-ratio:1;border-radius:var(--r-lg);overflow:hidden}
body:not(.theme-atelier) .gallery:has(>:nth-child(2))>:first-child,body:not(.theme-atelier) .gallery:has(>:nth-child(2))>:last-child:nth-child(even){grid-column:1 / -1;aspect-ratio:1 / 1.05}
body:not(.theme-atelier) .pdp__gallery:has(.gallery>:nth-child(2)) .dots{display:none}
.theme-brut .gallery>*,.theme-journal .gallery>*,.theme-retro .gallery>*{border-radius:0}
}
/* Aurora (and Sable, its light twin), computer: the opening's title sized for its column (three lines, not one word
   per line pushing the products off the screen); the category chips of the opening are not stacked over the result
   chips glued under it: the grid's sticky categories already filter (as on phones, tags.css). */
@media (min-width:1100px){
:is(.theme-aurora,.theme-sable) .hero__title{font-size:min(calc(var(--t-hero) * var(--display-scale,1)),8.6vw,8.75rem);line-height:.88}
:is(.theme-aurora,.theme-sable) .hero{min-height:min(88svh,860px)}
:is(.theme-aurora,.theme-sable) main:has(.seek):has(#produits .filters) :is([data-chips],.hero__cta:has(>[data-chips]:only-child)){display:none}
}
/* « Cadrage intelligent » (framing.js, App\Services\Media\FrameStore): a product picture fills 100 % of its frame,
   no padding, no band of colour. Its recipe (the frame's ratio: the centre of the crop, its zoom, the background
   widened) is drawn with object-fit: contain plus a scale and a move inside the frame that clips it (--fz, --fx,
   --fy), or with object-position alone (--fp) when nothing clips it. Without a recipe yet: cover, centred. A frame
   whose recipe widens the background shows it on the background's own colour (--fr-bg). The hover zoom stays. */
.media__img,.uv-moons .uv-moon img,.offer__pics .offer__pic,.line .line__media img,.mk-drop .media__img{object-fit:cover;padding:0}
html body img.is-framed[data-fr]{object-fit:contain;object-position:50% 50%;padding:0;scale:var(--fz,1);translate:var(--fx,0) var(--fy,0)}
html body img.is-framed--pos[data-fr]{object-fit:cover;object-position:var(--fp,50% 50%);scale:none;translate:none}
.media:has(>.media__img.is-framed){overflow:hidden}
html .media.media:has(>.media__img.is-framed),html .media.is-loaded:has(>.media__img.is-framed){background:var(--fr-bg,var(--brand-soft))}
html .media.is-loaded:has(>.media__img),html .media.media:has(>.media__img[fetchpriority]){animation:none}
/* The shop's own wide pictures (the opening's cover, the « À propos » photo; ShopImages::fit): a banner or a
   packshot, both fill their room by their recipe. */
:is(.hero__cover,.im-hero__img,.im-about__img,.media__img):is(.is-banner,.is-whole){object-fit:cover;padding:0}
/* Carnet's polaroid stays on its paper. */
html .theme-carnet .ft__media.media{background:var(--cr-cream,#fbf6ea)}
/* The hover zoom stays inside the picture's frame. */
.card:hover .media__img{transform:scale(1.03)}
/* Phones: iOS never inflates the text, no grey flash on taps; the page never wider than the screen. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent;overflow-x:clip}
/* Notch and home bar (viewport-fit=cover): the gutters and the fixed bars keep clear of them. */
.wrap{padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
.foot{padding-bottom:max(var(--s4,32px),calc(env(safe-area-inset-bottom) + 16px))}
.bar{padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
.pill{bottom:max(16px,calc(env(safe-area-inset-bottom) + 10px))}
/* « Ajouter à l'écran d'accueil » (partials/a2hs, frame.js): two lines in the footer, on its colours. */
.a2hs{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:var(--s3,24px) 0 0;padding:14px 16px;border-radius:var(--r-lg,16px);background:color-mix(in srgb,currentColor 7%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 18%,transparent)}
.a2hs[hidden]{display:none}
.a2hs__icon{flex:none;width:44px;height:44px;border-radius:11px;box-shadow:0 0 0 1px color-mix(in srgb,currentColor 18%,transparent)}
.a2hs__text{flex:1 1 220px;min-width:0}
.a2hs__title{margin:0;font-weight:800;font-size:var(--t-sm,15px)}
.a2hs__how{display:none;margin:2px 0 0;font-size:var(--t-sm,15px);line-height:1.4;opacity:.92}
.a2hs__share{width:1.15em;height:1.15em;vertical-align:-.2em}
[data-a2hs=ios] .a2hs__how--ios,[data-a2hs=android] .a2hs__how--android,[data-a2hs=prompt] .a2hs__how--prompt{display:block}
.a2hs__go{display:none;--bg:transparent;--fg:currentColor;color:inherit;min-height:44px;box-shadow:inset 0 0 0 1.5px currentColor}
[data-a2hs=prompt] .a2hs__go{display:inline-flex}
html.is-app .a2hs{display:none}
.page-offline main{padding-top:var(--s3,24px)}
.theme-brut .a2hs,.theme-journal .a2hs,.theme-retro .a2hs,.theme-brut .a2hs__icon,.theme-journal .a2hs__icon,.theme-retro .a2hs__icon{border-radius:0}
/* Phones (360 to 430 px, iPhone SE to 15 Pro Max): every text at least 14 px (12 px for a label in capitals),
   every control 44 px high, nothing closer than 16 px to a side (the product photos included: a whole picture in
   its card, never cut by the screen), the fields at 16 px (iOS does not zoom). Measured page by page on the 18
   themes (harness sweep.js / edges.js). */
.skip{min-height:44px;display:inline-flex;align-items:center}
html body[class] .bar__link--pro{min-height:44px;min-width:44px;justify-content:center}
html body[class] :is(.seek__chip,.benefit__go,.uv-gal__go){min-height:44px}
@media (max-width:699px){
.pdp__gallery{margin:0;border-radius:var(--r-lg)}
.pdp__gallery .gallery{border-radius:inherit}
html body[class] :is(.foot__fine,.fine,.offer__each,.buy__sub,.card__title--meta){font-size:var(--t-sm)}
html body[class] .foot__fine a{font-size:inherit}
html body[class] :is(.chip,.benefit,.chips__chip,.uv-card__pitch,.fr-flag,.mk-sticker-s,.cp-tag,.ec-bubble__badge,.wx-show__price,.uv-planet__n,.ec-bubble__price,.cp-bar__left,.cp-space__until,.cp-space__left){font-size:max(var(--t-sm),14px)}
html body[class] .cn__fam{font-size:max(12px,.62em)}
html body[class] .cn__name{font-size:max(14px,1em)}
html body[class] .jn-kicker{font-size:12px}
html body[class] :is(input,select,textarea):not([type=checkbox]):not([type=radio]){font-size:max(16px,1em)}
html body[class] :is(.fr-chip,.fr-select,.wx-show__add,.ne-add,.rt-task__item,.uv-bar__all,.btn--add,.im-orbit__add,.filter){min-height:44px;min-width:44px}
html body[class] .rt-task__item{height:44px;font-size:14px}
html body[class] .rt-win__ctl{width:44px;height:44px}
html body[class] .ne-add{width:44px;height:44px}
html body[class].theme-univers .uv-bar__all{font-size:var(--t-sm)}
html body[class] .fl-dot{width:44px;height:44px}
html body[class].theme-maison :is(.filter,.eyebrow){font-size:12px}
html body[class] :is(.vs-eyebrow,.about__tag,.jn-dateline span){font-size:12px}
/* The side dots of Fil and Univers are a computer's guide: on a phone they sat on the screen's edge. */
html body[class] :is(.fl-dots,.uv-dots){display:none}
/* Frais: the search bar's rail never widens the page (a grid track at its content's size). */
html body[class] .fr-bar__inner{grid-template-columns:minmax(0,1fr)}
html body[class] .fr-chips{min-width:0}
/* Vestiaire: the lookbook grid keeps the gutters (it was cut by the screen's sides). */
html body[class].theme-vestiaire .grid{margin-inline:0;column-gap:12px}
/* Immersion: the category rail starts at the gutter (its box sat 16 px past both sides); the giant titles fit the width. */
html body[class].theme-immersion .im-chips{margin-inline:0}
html body[class].theme-immersion :is(.im-contact__title,.im-step__title){font-size:min(calc(clamp(3rem,1rem + 10vw,11rem) * var(--display-scale,1)),11.5vw);overflow-wrap:anywhere}
/* Rétro: the windows and the desktop icons keep 16 px from the sides. */
html body[class] .rt-win{margin-inline:16px}
html body[class] .chips--retro{padding-inline:16px}
/* Éclat: the « + » and the badge stay inside their bubble. */
html body[class] .ec-bubble__add{right:2px;bottom:2px}
html body[class] .ec-bubble__badge{max-width:calc(100% - 4px);white-space:normal;text-align:center;line-height:1.2}
/* A card's foot: the price gives room to « + » (it wraps « FCFA » under the amount rather than push the button out). */
html body[class] .card__foot .price{min-width:0;flex:1 1 0}
html body[class] .card__badges .chip{font-size:max(var(--t-sm),14px)}
html body[class] .pack__name--link{display:inline-flex;align-items:center;min-height:24px}
/* Carnet: the polaroids lean less, so that a card never leans past the gutter. */
html body[class].theme-carnet .card{transform:rotate(calc(var(--cr-t) * .4))}
html body[class].theme-carnet .grid{padding-inline:4px}
html body[class].theme-immersion .pdp__title{font-size:min(2.25rem,8.6vw);overflow-wrap:anywhere}
html body[class] .im-hero__stage{width:100%}
html body[class].theme-carnet .eyebrow{margin-left:2px}
html body[class] .buy__add{min-width:0}
html body[class] .buy__sub{white-space:normal;overflow-wrap:anywhere}
html body[class] .cure__len-go{min-height:44px}
}
/* The rich texts (App\Support\RichText: p, br, strong, em, ul, ol, li, h3, a) drawn the same way on the 18 themes,
   in the theme's own colours and type: a title of section a step bigger and bolder, lists with their marks, links
   underlined in the text's colour (contrast kept), no margin after the last block. */
.prose :is(p,ul,ol){margin:0 0 .9em}
.prose :is(ul,ol){padding-left:1.35em}
.prose ul{list-style:disc}.prose ol{list-style:decimal}
.prose li{margin:0 0 .3em;padding-left:.15em}
.prose li::marker{color:var(--brand-text,currentColor)}
.prose h3{margin:1.2em 0 .45em;font-size:1.08em;font-weight:700;line-height:1.3;letter-spacing:-.005em;color:inherit}
.prose h3:first-child{margin-top:0}
.prose strong{font-weight:700}.prose em{font-style:italic}
.prose a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose a:hover{text-decoration-thickness:2px}
.prose>:last-child{margin-bottom:0}
/* « À la une » on the cards of « Notre sélection »: 14 px, the size of the text of a phone (12 px was below it). */
.ft .ft__tag{font-size:14px;padding:5px 12px}
/* Récolte: a full-width bar (the sticky categories) enters without its tilt: tilted, its corners passed the screen's
   edges and widened the page by 1 px on a phone (the header then 15 px from the edge). */
.js .theme-recolte .filters.reveal:not(.is-in){transform:translateY(22px)}
/* Carnet writes the family in its serif, not in capitals: the size of a text (14 px), like the name under it. */
html body.theme-carnet .card__title .cn__fam{font-size:max(14px,1.15em)}
/* A product both put forward (« À la une », left) and in the campaign (« −10 % avec code », right): on a narrow card
   the two labels met; the campaign's goes under the other one. */
.media .cp-tag:not(.cp-tag--new):has(~ .cp-tag--new){top:40px}
@media (min-width:700px){.media .cp-tag:not(.cp-tag--new):has(~ .cp-tag--new){top:46px}}
/* The average score of a product (partials/card-rating: real reviews only), on its card and its page. */
.card-rate{display:inline-flex;align-items:center;gap:6px;margin:2px 0 4px;color:var(--ink);font-size:var(--t-xs);font-weight:700;line-height:1.2;text-decoration:none}
.card-rate__stars{position:relative;display:inline-block;color:color-mix(in srgb,currentColor 25%,transparent);letter-spacing:.06em}
.card-rate__stars span{position:absolute;inset:0 auto 0 0;width:var(--p,100%);overflow:hidden;color:currentColor;white-space:nowrap}
.card-rate__stars span::before{content:"★★★★★"}
.card-rate__n span{color:var(--muted);font-weight:500}
.card-rate--page{min-height:44px;margin:0 0 8px;font-size:var(--t-sm)}