/** Shopify CDN: Minification failed

Line 448:0 Unexpected "}"

**/
/* ============================================================
   MAISON ANORAM — Design overrides (Dawn-based)
   Esprit : élégance artisanale ralentie. Inspiration Gemmyo.
   Charte Marion Carlier, septembre 2026. Remplace anais-design.css.
   ============================================================ */

/* ---------- Variables custom (palette MAISON ANORAM officielle) ---------- */
:root {
  /* Palette guide de marque */
  --anoram-rouille-fonce: #4a1d16;
  --anoram-rouille:       #80482f;
  --anoram-lilas:         #ccace2;
  --anoram-beige:         #c6a895;
  --anoram-creme:         #f3eee7;

  --anoram-rouille-rgb: 128, 72, 47;
  --anoram-lilas-rgb:   204, 172, 226;

  --anoram-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
  --anoram-easing-soft: cubic-bezier(0.25, 0.1, 0.25, 1);
  --anoram-duration: 0.7s;
  --anoram-stagger: 0.08s;
}

/* ============================================================
   22/09 — ÉCHELLE TYPOGRAPHIQUE UNIQUE
   Un seul barème pour tout le site. Chaque cran est FLUIDE : il interpole
   entre sa valeur téléphone et sa valeur grand écran, donc la lecture ne
   saute à aucun point de rupture — 390, 768, 1024, 1440 ou 1920.
   Règle : un rôle = un cran, quelle que soit la section qui l'emploie.
   Avant : les titres de section sortaient à 44, 42 ou 26 px selon la section,
   les sous-titres à 18, 15,5 ou 15, et les libellés à 15, 14, 13,7 ou 13.
   ============================================================ */
:root {
  --pas-hxl:     clamp(3.2rem, 1.9rem + 3.4vw, 5.2rem);  /* héro */
  --pas-h0:      clamp(2.8rem, 1.9rem + 2.4vw, 4.4rem);  /* titre de page */
  --pas-h1:      clamp(2.6rem, 2rem + 1.6vw, 3.6rem);    /* grand titre de section */
  --pas-h2:      clamp(2.2rem, 1.8rem + 1.1vw, 3rem);    /* titre de section */
  --pas-h3:      clamp(1.9rem, 1.75rem + 0.35vw, 2.1rem);/* titre de bloc */
  --pas-h4:      clamp(1.7rem, 1.6rem + 0.25vw, 1.8rem); /* sous-titre, nom de produit */
  --pas-corps:   clamp(1.5rem, 1.42rem + 0.2vw, 1.6rem); /* texte courant */
  --pas-corps-2: 1.4rem;                                  /* texte secondaire, boutons */
  --pas-libelle: 1.3rem;                                  /* sur-titres, mentions */
}

h1, h2, h3, h4, .h0, .h1, .h2, .h3, .h4, .hxl {
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.hxl { font-size: var(--pas-hxl); letter-spacing: 0.005em; }
.h0 { font-size: var(--pas-h0); letter-spacing: 0.005em; }
h1, .h1 { font-size: var(--pas-h1); }
h2, .h2 { font-size: var(--pas-h2); }
h3, .h3 { font-size: var(--pas-h3); }
h4, .h4 { font-size: var(--pas-h4); }

/* Body un poil plus large/respirant */
.rte p, .rich-text__text p {
  line-height: 1.7;
  font-size: var(--pas-corps);
}

/* ---------- Header : wordmark plus grand & aéré ---------- */
.header__heading-link {
  padding: 0;
}

.header__heading-logo {
  font-size: 2.6rem;
  letter-spacing: 0.04em;
}

@media (min-width: 990px) {
  .header__heading-logo {
    font-size: 3.2rem;
  }
}

/* Menu items plus aérés */
.header__menu-item {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 1.25rem;
}

.header__inline-menu {
  margin-top: 1.2rem;
}

/* CTA rendez-vous : plus distinct, tons chauds */
.header .header__cta-button,
.shopify-section-header .header__cta-button {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 1.3rem;
  padding: 0.9rem 1.6rem;
  transition: transform 0.3s var(--anoram-easing-soft), box-shadow 0.3s var(--anoram-easing-soft);
}
.header .header__cta-button:hover,
.shopify-section-header .header__cta-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(74, 29, 22, 0.12);
}

/* CTA "Prendre RDV" — placé dans la grid-area "left-icons" du header Dawn,
   bouton avec texte au top, devient icône calendrier au scroll (style Gemmyo). */
@media (min-width: 990px) {
  .header__left-icons {
    grid-area: left-icons;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    z-index: 2;
  }

  .header__left-icons .header__cta-button {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
  }

  /* Au top : icône cachée, texte visible */
  .header__cta-icon {
    display: none;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
  }

  /* On masque le CTA original (dans .header__icons à droite) */
  .header__icons .header__cta-button {
    display: none;
  }

  /* IMPORTANT : Dawn met aussi la search dans grid-area: left-icons par défaut
     (sur top-center). Comme on y met notre CTA RDV, la search se superpose →
     on cache la search desktop sur la home (notre CTA prend toute la zone). */
  .home-header-overlay .header > .header__search {
    display: none;
  }
}

@media (max-width: 989px) {
  .header__left-icons {
    display: none;
  }
}

/* ---------- Banner / Hero : plus généreux ---------- */
.banner--large {
  min-height: 78vh;
}

.banner--medium {
  min-height: 62vh;
}

@media (max-width: 749px) {
  .banner--large,
  .banner--medium {
    min-height: 88vh;
  }
}

/* ============================================================
   HOME : header overlay transparent (style maison de joaillerie)
   - Le hero démarre tout en haut, derrière le header
   - Header transparent au top, texte crème sur l'image
   - Au scroll (>60px) ou au hover : fond crème opaque + texte charbon
   - Transition fluide entre les deux états
   - Active uniquement sur la home via class .home-header-overlay (JS)
   ============================================================ */

/* Hero full-screen sur la home (override du 78vh par défaut) */
.template-index .banner--large {
  min-height: calc(100vh - var(--rmp-header-h, 9.2rem));
}

/* (Le header en position: fixed sort du flow, donc le hero démarre
   naturellement au top de la page — pas besoin de margin négatif.) */

/* Transition globale du header (couleur fond + couleurs des éléments) */
@media (min-width: 990px) {
  .home-header-overlay .section-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 4;
    /* 16/09 (demande d'Anaïs) : plus de header transparent sur la home. La bande
       du haut est opaque dès le chargement, la photo du hero commence dessous. */
    background-color: rgba(243, 238, 231, 0.96);
    border-bottom: 1px solid rgba(128, 72, 47, 0.18);
    transition: background-color 0.45s var(--anoram-easing-soft),
                border-color 0.45s var(--anoram-easing-soft),
                box-shadow 0.45s var(--anoram-easing-soft);
  }

  /* Le .header-wrapper doit toujours être pleine largeur (Dawn lui met
     parfois des max-width / display block contraints). On force ici. */
  .home-header-overlay .header-wrapper {
    width: 100%;
    display: block;
    background-color: rgba(243, 238, 231, 0.96) !important;
    transition: background-color 0.45s var(--anoram-easing-soft),
                border-color 0.45s var(--anoram-easing-soft);
  }

  /* État TRANSPARENT : texte crème sur le hero — UNIQUEMENT sur la HOME
     (les autres pages n'ont pas d'image hero plein écran ; le texte crème
     y serait invisible) */
  body.template-index.home-header-overlay .section-header:not(.is-scrolled):not(:hover) .header__heading-link,
  body.template-index.home-header-overlay .section-header:not(.is-scrolled):not(:hover) .header__heading-link .h2,
  body.template-index.home-header-overlay .section-header:not(.is-scrolled):not(:hover) .header__heading-link .h1,
  body.template-index.home-header-overlay .section-header:not(.is-scrolled):not(:hover) .header__heading,
  body.template-index.home-header-overlay .section-header:not(.is-scrolled):not(:hover) .header__heading-logo,
  body.template-index.home-header-overlay .section-header:not(.is-scrolled):not(:hover) .header__menu-item,
  body.template-index.home-header-overlay .section-header:not(.is-scrolled):not(:hover) .header__active-menu-item,
  body.template-index.home-header-overlay .section-header:not(.is-scrolled):not(:hover) .header__icon,
  body.template-index.home-header-overlay .section-header:not(.is-scrolled):not(:hover) .header__icon svg {
    color: rgb(74, 29, 22) !important;
    transition: color 0.45s var(--anoram-easing-soft);
  }

  /* CTA en transparent (HOME uniquement) : border crème + texte crème */
  body.template-index.home-header-overlay .section-header:not(.is-scrolled):not(:hover) .header__cta-button {
    background-color: transparent !important;
    border: 1px solid rgba(74, 29, 22, 0.5) !important;
    color: rgb(74, 29, 22) !important;
  }
  body.template-index.home-header-overlay .section-header:not(.is-scrolled):not(:hover) .header__cta-button:hover {
    background-color: rgb(74, 29, 22) !important;
    color: rgb(243, 238, 231) !important;
  }

  /* AUTRES PAGES (non-home) : header OPAQUE dès le top (fond crème, texte
     charbon) — pas d'overlay transparent puisqu'il n'y a pas d'image hero
     plein écran derrière. */
  body:not(.template-index).home-header-overlay .section-header,
  body:not(.template-index).home-header-overlay .section-header .header-wrapper {
    background-color: rgba(243, 238, 231, 0.96) !important;
  }
  body:not(.template-index).home-header-overlay .section-header {
    border-bottom: 1px solid rgba(128, 72, 47, 0.18);
  }

  /* 16/09 — QA parcours client. Sur les pages sans hero, le header reste
     DANS le flux (sticky) : il occupe sa propre hauteur, le contenu commence
     naturellement dessous et plus aucun titre ne passe sous la bande du haut.
     Avant, le header était en position: fixed et le contenu rattrapé par un
     padding-top calé sur --rmp-header-h — or cette variable est posée par le
     script de la section hero, qui n'existe que sur l'accueil. Ailleurs le
     fallback 9rem (144 px) s'appliquait, plus court que le header réel
     (172 px) : « Actualités », « Mentions légales », « Conditions générales »,
     les titres de collection, le panier, la recherche et la 404 passaient
     partiellement sous le menu. */
  body:not(.template-index).home-header-overlay .section-header {
    position: sticky;
  }

  /* L'accueil garde le header hors flux : le hero calcule sa hauteur avec
     --rmp-header-h et démarre au ras du haut de page. */
  .template-index.home-header-overlay #MainContent {
    padding-top: var(--rmp-header-h, var(--header-height, 9rem));
  }
}

/* Hauteur du header pour calcul du padding-top de main (toutes pages sauf home) */
:root {
  --header-height: 9rem; /* valeur de repli ; home-header.js pose la hauteur mesurée */
}
/* 21/09 : les ancres (#atelier-alliances, #rdv…) s'arrêtent sous le header collant */
[id] { scroll-margin-top: calc(var(--header-height, 9rem) + 1.6rem); }

  /* État SCROLLED ou HOVER : fond crème opaque + texte charbon — appliqué
     sur les DEUX wrappers (.section-header ET .header-wrapper) pour
     garantir que la couleur couvre toute la largeur, peu importe les
     contraintes Dawn sur l'un ou l'autre. */
  .home-header-overlay .section-header.is-scrolled,
  .home-header-overlay .section-header:hover,
  .home-header-overlay .section-header.is-scrolled .header-wrapper,
  .home-header-overlay .section-header:hover .header-wrapper {
    background-color: rgba(243, 238, 231, 0.96) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .home-header-overlay .section-header.is-scrolled,
  .home-header-overlay .section-header:hover {
    border-bottom: 1px solid rgba(128, 72, 47, 0.18);
    box-shadow: 0 1px 12px rgba(74, 29, 22, 0.06);
  }

  /* Au SCROLL : le logo/nom de boutique disparaît en douceur.
     Sur la HOME, le markup Dawn met le logo dans <h1 class="header__heading">.
     Sur les AUTRES pages, c'est directement <a class="header__heading-link">
     (pas de <h1>). On cible les deux pour que la disparition marche partout. */
  /* 16/09 : le logo ne disparaît plus au scroll. La bande du haut doit rester
     identifiable en permanence (demande d'Anaïs), et une marque neuve a tout
     intérêt à ce que son nom reste sous les yeux. Il rapetisse simplement. */
  .home-header-overlay .section-header.is-scrolled .header__heading,
  .home-header-overlay .section-header.is-scrolled .header__heading-link {
    opacity: 1;
    transform: scale(0.82);
    transition: opacity 0.35s var(--anoram-easing-soft),
                max-width 0.35s var(--anoram-easing-soft),
                max-height 0.35s var(--anoram-easing-soft),
                margin 0.35s var(--anoram-easing-soft),
                padding 0.35s var(--anoram-easing-soft),
                visibility 0s linear 0.35s;
  }

  .home-header-overlay .section-header .header__heading,
  .home-header-overlay .section-header .header__heading-link {
    transition: opacity 0.35s var(--anoram-easing-soft),
                max-width 0.35s var(--anoram-easing-soft),
                max-height 0.35s var(--anoram-easing-soft),
                margin 0.35s var(--anoram-easing-soft),
                padding 0.35s var(--anoram-easing-soft);
  }

  /* HEADER QUI RAPETISSE AU SCROLL — transitions douces sur le header.
     Le header est fixed donc ses changements de padding ne propagent pas
     de reflow aux autres sections (qui scrollent indépendamment). */
  .home-header-overlay .section-header,
  .home-header-overlay .header-wrapper,
  .home-header-overlay .header {
    transition: padding 0.35s var(--anoram-easing-soft),
                background-color 0.45s var(--anoram-easing-soft),
                border-color 0.45s var(--anoram-easing-soft),
                box-shadow 0.45s var(--anoram-easing-soft);
  }

  /* État TOP : header généreux (padding vertical large) */
  .home-header-overlay .section-header:not(.is-scrolled) .header {
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
  }

  /* État SCROLLED : header compact, animé en douceur */
  .home-header-overlay .section-header.is-scrolled .header {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  /* Menu items légèrement réduits au scroll, animés en douceur */
  .home-header-overlay .section-header.is-scrolled .header__menu-item {
    font-size: 1.3rem;
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
  }
  .home-header-overlay .section-header .header__menu-item {
    transition: font-size 0.35s var(--anoram-easing-soft),
                padding 0.35s var(--anoram-easing-soft);
  }

  /* 16/09 : plus de bascule en flex au scroll. Elle datait de l'époque où le
     logo disparaissait ; maintenant qu'il reste, `space-between` le renvoyait
     à gauche et il mangeait le menu sur les écrans étroits. La grille Dawn
     `header--top-center` est conservée dans les deux états, seuls le padding
     et la taille du logo changent. */

  /* 16/09 : le logo reste visible au scroll, simplement plus petit.
     (Avant : largeur forcée à 0 et masqué — la bande du haut perdait son nom.) */
  .home-header-overlay .section-header.is-scrolled .header__heading,
  .home-header-overlay .section-header.is-scrolled .header__heading-link {
    opacity: 1;
    visibility: visible;
    transform: scale(0.8);
    transform-origin: center;
  }

  /* Empêcher le menu de wrapper */
  .home-header-overlay .section-header.is-scrolled .list-menu--inline,
  .home-header-overlay .section-header.is-scrolled .header__inline-menu {
    flex-wrap: nowrap;
    white-space: nowrap;
    margin-top: 0 !important;
  }

  /* Pour que le menu soit centré sur l'AXE du viewport (et pas seulement
     entre les 2 côtés qui ont des largeurs différentes), les zones gauche
     et droite prennent la même proportion (flex: 1 1 0). Le menu reste à
     sa taille naturelle au milieu. */
  .home-header-overlay .section-header.is-scrolled .header__left-icons {
    flex: 1 1 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .home-header-overlay .section-header.is-scrolled .header__icons {
    flex: 1 1 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .home-header-overlay .section-header.is-scrolled .header__inline-menu {
    flex: 0 0 auto;
  }

  /* AU SCROLL : le CTA "Prendre RDV" devient une icône calendrier seule.
     Changements instantanés sur le layout (padding, border, font-size).
     Seules les couleurs transitent. */
  .home-header-overlay .section-header.is-scrolled .header__cta-button--left {
    border: none !important;
    background-color: transparent !important;
    padding: 0.6rem !important;
    color: rgb(74, 29, 22) !important;
    font-size: 0;
  }

  .home-header-overlay .section-header.is-scrolled .header__cta-button--left .header__cta-label {
    display: none;
  }

  .home-header-overlay .section-header.is-scrolled .header__cta-button--left .header__cta-icon {
    display: inline-block;
  }

  /* CTA : transitions douces (couleurs + padding/border-radius) — confinées
     au header en fixed, pas de propagation de reflow */
  .home-header-overlay .header__cta-button--left {
    transition: padding 0.35s var(--anoram-easing-soft),
                background-color 0.35s var(--anoram-easing-soft),
                border-color 0.35s var(--anoram-easing-soft),
                color 0.35s var(--anoram-easing-soft);
  }

  .home-header-overlay .section-header.is-scrolled .header-wrapper,
  .home-header-overlay .section-header:hover .header-wrapper {
    background-color: transparent !important;
  }

  /* Élément qui suit le header overlay : ne pas réserver d'espace pour le sticky natif */
  .home-header-overlay .shopify-section--header + .shopify-section,
  .home-header-overlay .shopify-section-header + .shopify-section {
    margin-top: 0;
  }
}

/* Mobile : pas d'overlay (header reste opaque, classique). L'image hero peut
   quand même prendre 100vh mais le header occupe sa hauteur normale. */
@media (max-width: 989px) {
  .template-index .banner--large {
    min-height: 90vh;
  }
}

/* Heading hero : Kinfolk n'a qu'un weight 400, donc on force pour éviter le
   fake-bold synthétisé par le navigateur quand un <strong> est présent.
   Taille mesurée — on ne veut pas écraser la photo derrière. */
.banner__heading {
  font-size: clamp(2.4rem, 3.2vw, 4rem);
  letter-spacing: 0.01em;
  font-weight: 400 !important;
  line-height: 1.2;
}

.banner__heading strong,
.banner__heading b {
  font-weight: 400 !important;
}

.banner__text {
  font-size: 1.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 1.2rem;
  opacity: 0.85;
}

.banner__text--subtitle {
  font-family: var(--font-body-family);
  letter-spacing: 0.22em;
}

.banner__box {
  padding: 3.2rem 3.2rem;
  backdrop-filter: blur(2px);
  /* 16/09 — QA : la couleur était figée en crème, y compris sur les bannières
     dont le texte est crème (scheme-4) → texte invisible sur les pages Contact
     et Ateliers. La boîte prend désormais le fond de SON color scheme.
     (Couleurs du thème en virgules : rgba(var(--…), x), jamais rgb(var(… / x%)).) */
  background-color: rgba(var(--color-background), 0.94);
}

/* Mobile : Dawn force par défaut .banner__box { background: transparent } en
   <750px (section-image-banner.css ligne 231) → le texte CHARBON devient
   illisible sur l'image. On force le fond crème semi-opaque pour garder la
   lisibilité du hero sur mobile. */
@media (max-width: 749px) {
  .banner__box {
    padding: 2.4rem 2rem;
  }

  .banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box {
    background-color: rgba(var(--color-background), 0.92) !important;
    backdrop-filter: blur(2px);
    border-radius: 0;
  }

  .banner__heading {
    font-size: clamp(2rem, 6.5vw, 2.8rem);
  }
}

.banner .button {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 1.4rem;
  padding: 1.4rem 2.6rem;
  transition: transform 0.3s var(--anoram-easing), box-shadow 0.3s var(--anoram-easing);
}
.banner .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(74, 29, 22, 0.12);
}

/* ---------- USP strip : séparateurs élégants ----------
   21/09 : la règle qui forçait 1.6rem de padding sur la section est retirée,
   l'espacement se règle désormais dans l'éditeur comme partout. */

.usp-strip {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: var(--pas-libelle);
}

/* ---------- "Trois univers" : numérotation 01/02/03 + style éditorial ---------- */
.multicolumn.anoram-numerotee .multicolumn-list {
  position: relative;
  counter-reset: anais-univers;
}

.multicolumn .multicolumn-card {
  position: relative;
  counter-increment: anais-univers;
  padding: 2.4rem 0 2rem;
  transition: transform 0.5s var(--anoram-easing);
  border-top: 1px solid rgba(128, 72, 47, 0.25); /* trait Rouille subtil */
}

.multicolumn .multicolumn-card:hover {
  transform: translate3d(0, -4px, 0);
}

.multicolumn .multicolumn-card__info > .h3 {
  font-size: clamp(2rem, 2.4vw, 2.6rem);
  margin-top: 0;
  margin-bottom: 1.2rem;
  letter-spacing: 0.04em;
}

/* Numérotation 01/02/03 — version éditoriale, en Fustat 500
   pour contraster avec le titre Kinfolk en dessous */
/* 21/09 : numéros réservés aux multicolonnes « numérotées » (classe anoram-numerotee) ; les cartes
   des axes et des ateliers, qui ont une photo, n'en ont pas */
.multicolumn.anoram-numerotee .multicolumn-card__info::before {
  content: counter(anais-univers, decimal-leading-zero);
  display: block;
  font-family: var(--font-body-family);
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: 0.28em;
  color: rgb(128, 72, 47); /* Rouille pleine */
  margin-bottom: 2rem;
  text-transform: uppercase;
}

@media (max-width: 749px) {
  .multicolumn .multicolumn-card {
    padding: 2.4rem 1.5rem 2rem;
  }
  .multicolumn .multicolumn-card__info::before {
    margin-bottom: 1.2rem;
  }
}

/* Heading multicolumn principal : grand et aéré */
.multicolumn .title-wrapper-with-link {
  margin-bottom: 4rem;
}

.multicolumn .title {
  font-size: var(--pas-h2);
  text-align: center;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

/* Lien "Découvrir" : underline maison + on coupe le text-decoration natif Dawn */
.multicolumn .link,
.multicolumn .multicolumn-card__info .link {
  position: relative;
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 1.4rem;
  padding-bottom: 0.4rem;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(128, 72, 47, 0.45); /* Rouille subtle */
  transition: border-color 0.3s var(--anoram-easing),
              color 0.3s var(--anoram-easing);
  color: rgb(74, 29, 22); /* Charbon par défaut */
}
.multicolumn .link .icon-arrow {
  margin-left: 0.6rem;
  transition: transform 0.3s var(--anoram-easing);
}
.multicolumn .link:hover {
  border-bottom-color: rgb(128, 72, 47); /* Rouille pleine */
  color: rgb(128, 72, 47);
}
.multicolumn .link:hover .icon-arrow {
  transform: translate3d(4px, 0, 0);
}

/* ---------- Featured collection : aérer la grille ---------- */
.featured-collection .title-wrapper-with-link,
.featured-collection .collection__title {
  margin-bottom: 4rem;
  text-align: center;
}

.featured-collection .title {
  font-size: clamp(2.8rem, 4vw, 4.4rem);
  letter-spacing: -0.01em;
}

.card-wrapper:hover .card__media .media img {
  transform: scale(1.04);
}
.card__media .media img {
  transition: transform 0.8s var(--anoram-easing-soft);
}

.card__heading {
  letter-spacing: 0.02em;
  /* 22/09 : un nom de bijou était le texte le plus faible de la page (15,5 px
     en serif Light). Il passe au cran « sous-titre ». */
  font-size: var(--pas-h4);
}

/* ---------- Image-with-text : variations ---------- */
.image-with-text__heading {
  font-size: var(--pas-h2);
  margin-bottom: 1.6rem;
  letter-spacing: -0.012em;
}

.image-with-text__text {
  font-size: var(--pas-corps);
  line-height: 1.7;
}

.image-with-text__text p {
  margin-bottom: 1.4rem;
}

/* Bouton style ghost dans image-with-text : underline + flèche */
.image-with-text__content .button {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 1.4rem;
  padding: 1.2rem 2.4rem;
  transition: transform 0.3s var(--anoram-easing), box-shadow 0.3s var(--anoram-easing);
}
.image-with-text__content .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(74, 29, 22, 0.1);
}

/* Manifesto : section dédiée, citation centrée avec filets verticaux haut/bas
   On cible la section rich-text via son id JSON (section_key = "manifesto") */
#shopify-section-manifesto {
  position: relative;
  padding: clamp(8rem, 12vw, 14rem) 2rem;
}

#shopify-section-manifesto::before,
#shopify-section-manifesto::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  width: 1px;
  height: 4rem;
  background: rgba(128, 72, 47, 0.5); /* filet Rouille */
  transform: translateX(-50%);
}
#shopify-section-manifesto::before { top: 4rem; }
#shopify-section-manifesto::after { bottom: 4rem; }

#shopify-section-manifesto .rich-text__wrapper {
  max-width: 78rem;
  margin: 0 auto;
  text-align: center;
}

/* Kinfolk n'a qu'une graisse Regular (pas d'italique) — donc on reste droit
   et on distingue la citation par la taille, l'espacement et les guillemets. */
#shopify-section-manifesto .rich-text__heading {
  font-family: var(--font-heading-family);
  font-size: clamp(2rem, 2.8vw, 3rem) !important;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.01em;
  font-weight: 400 !important;
  margin-bottom: 2.4rem;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

#shopify-section-manifesto .rich-text__caption,
#shopify-section-manifesto .caption {
  font-family: var(--font-body-family);
  font-size: 1.3rem !important;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-top: 2rem;
}

/* ---------- Footer enrichi ---------- */
.footer {
  padding-top: 6rem;
  padding-bottom: 4rem;
}

.footer .footer__content-top {
  padding-bottom: 4rem;
}

.footer .footer__blocks-wrapper {
  gap: 4rem;
}

.footer-block__heading {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 1.2rem;
  margin-bottom: 1.4rem;
}

/* Footer : on prend la main sur le hover (border-bottom révélé) et on coupe
   le text-decoration: underline natif Dawn → un seul trait, plus élégant */
.footer-block--menu .footer-block__details-content > a,
.footer-block ul a,
.footer-block li a {
  font-size: 1.4rem;
  padding: 0.4rem 0;
  display: inline-block;
  text-decoration: none !important;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--anoram-easing-soft),
              color 0.25s var(--anoram-easing-soft);
}

.footer-block ul a:hover,
.footer-block li a:hover,
.footer-block--menu .footer-block__details-content > a:hover {
  border-bottom-color: rgba(128, 72, 47, 0.6); /* Rouille subtile */
  color: rgb(128, 72, 47); /* Rouille */
}

.footer__content-bottom {
  border-top: 1px solid rgba(var(--color-foreground), 0.18);
  padding-top: 2.4rem;
  font-size: 1.2rem;
  letter-spacing: 0.06em;
}

/* Tagline footer (si block "text" présent) — Kinfolk droit (pas d'italic dispo) */
.footer .footer-block--text .footer-block__text {
  font-family: var(--font-heading-family);
  font-size: 1.7rem;
  font-style: normal;
  letter-spacing: 0.04em;
  line-height: 1.5;
  opacity: 0.85;
}

/* ---------- Scroll-reveal — version ultra-douce (juste fade, pas de translate)
   Les translateY donnent un effet "saut" perceptible quand chaque section
   apparaît. On garde uniquement le fade-in pour la respiration sans jank. */
@media (prefers-reduced-motion: no-preference) {
  .scroll-trigger.animate--slide-in {
    opacity: 0;
    transition: opacity 0.5s var(--anoram-easing);
    will-change: opacity;
  }

  .scroll-trigger.animate--slide-in.scroll-trigger--offscreen {
    opacity: 0;
  }

  .scroll-trigger.animate--slide-in:not(.scroll-trigger--offscreen) {
    opacity: 1;
  }
}

.scroll-trigger.animate--slide-in:not(.scroll-trigger--offscreen) {
  will-change: auto;
}

/* ---------- Buttons globaux : transitions GPU only ---------- */
.button, button, .link {
  transition: transform 0.3s var(--anoram-easing-soft),
              background-color 0.3s var(--anoram-easing-soft),
              color 0.3s var(--anoram-easing-soft),
              box-shadow 0.3s var(--anoram-easing-soft),
              border-color 0.3s var(--anoram-easing-soft);
}

/* Pas de fade-in du body : ça peut créer un flash en preview Shopify (iframe)
   et n'apporte rien quand le contenu est déjà rendu côté serveur. */

/* ---------- Page produit : raffiner ---------- */
.product__title h1 {
  font-size: clamp(2.4rem, 3.2vw, 3.8rem);
  letter-spacing: -0.012em;
  margin-bottom: 1.4rem;
}

.product .price {
  font-size: 1.7rem;
  letter-spacing: 0.04em;
}

.product__description {
  font-size: 1.55rem;
  line-height: 1.75;
}

.product-form__submit {
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- Collection grid : aérer ---------- */
.collection .grid--4-col-desktop {
  --grid-desktop-vertical-spacing: 64px;
}

.collection-hero__title {
  font-size: clamp(3rem, 5vw, 5rem);
  text-align: center;
  margin-bottom: 4rem;
}

/* ---------- Inputs (formulaires) ---------- */
.field__input,
.select__select {
  letter-spacing: 0.04em;
  font-size: 1.5rem;
  transition: border-color 0.25s ease;
}

/* ---------- Petits raffinements ---------- */
::selection {
  background-color: rgba(var(--anoram-rouille-rgb, 128, 72, 47), 0.18);
  color: rgb(var(--color-foreground));
}

a {
  transition: color 0.2s ease, opacity 0.2s ease;
}

/* ============================================================
   Sticker « Pièce unique » (16/09, demande d'Anaïs)
   Piloté par le tag produit « pièce unique » : elle l'ajoute ou le retire
   depuis l'admin, rien à toucher dans le thème. Rendu dans
   snippets/card-product.liquid et sections/main-product.liquid.
   ============================================================ */
.badge--unique {
  font-family: var(--font-body-family);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1.3rem;
  padding: 0.5rem 1.2rem;
  /* 21/09 : suit le réglage « rayon des badges » du thème au lieu d'un 0 en dur */
  border-radius: var(--badge-corner-radius);
}
.badge--product {
  display: inline-block;
  margin-bottom: 1.2rem;
}

/* ============================================================
   Logo au défilement (16/09)
   Le header rétrécit au scroll et comprimait le wordmark à ~62 px de large,
   illisible. On lui fixe une largeur explicite dans les deux états : pleine
   taille en haut de page, 150 px une fois la page défilée.
   ============================================================ */
@media (min-width: 990px) {
  .home-header-overlay .section-header .header__heading,
  .home-header-overlay .section-header .header__heading-link {
    flex: 0 0 auto;
  }
  .home-header-overlay .section-header .header__heading-logo {
    width: 240px;
    height: auto;
    max-width: none;
    transition: width 0.35s var(--anoram-easing-soft);
  }
  .home-header-overlay .section-header.is-scrolled .header__heading,
  .home-header-overlay .section-header.is-scrolled .header__heading-link {
    transform: none;
  }
  .home-header-overlay .section-header.is-scrolled .header__heading-logo {
    width: 150px;
  }
}

/* ============================================================
   16/09 — QA parcours client : cohérence des marges.
   Tout le contenu s'aligne sur la gouttière de .page-width
   (120 px à 1440). Relevé avant correction : 5 bords gauches
   différents sur l'accueil (120 / 140 / 150 / 155 / 190).
   ============================================================ */
@media screen and (min-width: 990px) {
  /* Blocs image + texte : Dawn pose 7rem de part et d'autre du bloc de
     texte, ce qui le décalait de 70 px par rapport à la grille. L'air est
     conservé du seul côté de l'image. */
  .image-with-text .image-with-text__content {
    padding-left: 0;
    padding-right: 0;
  }
  .image-with-text__grid--reverse .image-with-text__content {
    padding-right: 7rem;
  }
  .image-with-text__grid:not(.image-with-text__grid--reverse) .image-with-text__content {
    padding-left: 7rem;
  }

  /* Carrousel de réassurance : les cartes n'ont pas de fond, mais Dawn leur
     pose 20 px (.multicolumn-card) + 15 px (.multicolumn-card__info) de
     padding interne — le texte tombait à 155 au lieu de 120. */
  /* 22/09 : ne vaut que pour les cartes SANS fond ; celles qui ont un aplat
     ont besoin d'une marge intérieure, sinon le texte touche le bord. */
  .multicolumn:not(.background-primary):not(.background-secondary) .multicolumn-list .multicolumn-card.content-container,
  .multicolumn:not(.background-primary):not(.background-secondary) .multicolumn-list .multicolumn-card.content-container .multicolumn-card__info {
    padding-left: 0;
    padding-right: 0;
  }

  /* Cartes d'articles : 10 px (.card__content) + 20 px (.card__information)
     décalaient le titre par rapport au titre de section. */
  .blog .blog__posts .card__content,
  .blog .blog__posts .card__content .card__information {
    padding-left: 0;
    padding-right: 0;
  }
}

/* 16/09 — QA : les photos d'articles sont des portraits 2:3 posés dans un
   cadre paysage. Cadrage centré = tête coupée. On cadre vers le haut. */
.article-card__image-wrapper .article-card__image.media > img,
.blog .card__media .media > img {
  object-position: center 22%;
}

/* Bannière « Mon histoire » : le portrait (Anaïs derrière un chapeau) est
   cadré haut dans la photo. Un recadrage centré coupait le crâne et ne
   laissait qu'une bande d'yeux. */
/* 21/09 : règle déplacée dans le custom_css de la section (templates/page.a-propos.json) */

/* ============================================================
   22/09 — Tampon Maison Anoram à cheval sur le bord de la photo
   Reprise exacte de la papeterie de Marion (maison-anoram-papeterie.jpg) :
   le sceau est une pastille PLEINE, de la couleur du fond qui se trouve sous la
   photo ; il mord sur l'image d'un tiers et repose sur le fond pour les deux
   autres tiers, si bien que le raccord est invisible. Horizontalement il reste
   DANS la largeur de la photo (retour Damien 22/09 : il débordait sur le côté).
   Toujours droit, jamais d'opacité.
   ============================================================ */
.anoram-tampon-host { position: relative; }
/* hors d'un hôte (pied de page), le sceau n'est qu'une enveloppe transparente */
.anoram-tampon-sceau { display: block; }
.anoram-tampon-sceau > .anoram-tampon { display: block; width: 100%; height: auto; }
/* dans un hôte : pastille pleine, calée sur le bord de la photo */
.anoram-tampon-host > .anoram-tampon-sceau.anoram-tampon-sceau {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  width: var(--anoram-tampon-w, 11rem);
  aspect-ratio: 442 / 480;
  border-radius: 50%;
  /* Dawn colle une ombre à tous les enfants de la cellule média : pas sur le sceau. */
  box-shadow: none;
  /* la pastille prend le fond de la SECTION (posé par image-with-text sur le bloc
     extérieur), pas celui du média : c'est ce qu'on voit sous la photo. */
  background: rgb(var(--anoram-tampon-bg, var(--color-background)));
}
.anoram-tampon-host > .anoram-tampon-sceau > .anoram-tampon.anoram-tampon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 88%;
}
.anoram-tampon-host--s { --anoram-tampon-w: 8.4rem; }
.anoram-tampon-host--m { --anoram-tampon-w: 11rem; }
.anoram-tampon-host--l { --anoram-tampon-w: 14rem; }
/* part du sceau posée SUR la photo : --anoram-tampon-over (0 = entièrement dehors,
   1 = entièrement dedans). Défaut 0,33, soit un tiers dessus, deux tiers dessous. */
.anoram-tampon-host--bl > .anoram-tampon-sceau.anoram-tampon-sceau,
.anoram-tampon-host--br > .anoram-tampon-sceau.anoram-tampon-sceau {
  bottom: calc(var(--anoram-tampon-w) * 480 / 442 * (var(--anoram-tampon-over, 0.33) - 1));
}
.anoram-tampon-host--tl > .anoram-tampon-sceau.anoram-tampon-sceau,
.anoram-tampon-host--tr > .anoram-tampon-sceau.anoram-tampon-sceau {
  top: calc(var(--anoram-tampon-w) * 480 / 442 * (var(--anoram-tampon-over, 0.33) - 1));
}
.anoram-tampon-host--bl > .anoram-tampon-sceau.anoram-tampon-sceau,
.anoram-tampon-host--tl > .anoram-tampon-sceau.anoram-tampon-sceau { left: var(--anoram-tampon-inset, 3.2rem); }
.anoram-tampon-host--br > .anoram-tampon-sceau.anoram-tampon-sceau,
.anoram-tampon-host--tr > .anoram-tampon-sceau.anoram-tampon-sceau { right: var(--anoram-tampon-inset, 3.2rem); }
@media screen and (max-width: 749px) {
  .anoram-tampon-host { --anoram-tampon-w: 8.4rem; --anoram-tampon-inset: 2rem; }
  /* 22/09 — sur mobile la photo est AU-DESSUS du texte : la partie du sceau qui déborde
     venait toucher le titre. On réserve exactement la hauteur qui dépasse, plus une marge. */
  .anoram-tampon-host--bl,
  .anoram-tampon-host--br {
    margin-bottom: calc(var(--anoram-tampon-w) * 480 / 442 * (1 - var(--anoram-tampon-over, 0.35)) + 0.4rem);
  }
  .anoram-tampon-host--tl,
  .anoram-tampon-host--tr {
    margin-top: calc(var(--anoram-tampon-w) * 480 / 442 * (1 - var(--anoram-tampon-over, 0.35)) + 0.4rem);
  }
}

/* ---------- 21/09 — Tampon en pied de page (ponctuation, charte p. 30) ---------- */
.anoram-footer-tampon { display: block; width: 6.4rem; margin: 0 0 2rem; }

/* ---------- 21/09 — Cartes des axes / ateliers (multicolumn avec photo cliquable) ---------- */
.multicolumn .full-unstyled-link .multicolumn-card__image { transition: transform 0.8s var(--anoram-easing-soft); }
.multicolumn .multicolumn-card:hover .full-unstyled-link .multicolumn-card__image { transform: scale(1.04); }
.multicolumn .multicolumn-card__image-wrapper { overflow: hidden; }

/* ---------- 21/09 — Fiche produit : bloc « rendez-vous pierre » ---------- */
.product__rdv-pierre { margin-top: 2.4rem; padding-top: 2.4rem; border-top: 1px solid rgba(128, 72, 47, 0.25); }
.product__rdv-pierre .h3 { margin: 0 0 1rem; }
.product__rdv-pierre .rte { margin-bottom: 1.6rem; }

/* ---------- 21/09 — Guide des tailles en modale : respiration des intertitres ---------- */
.product-popup-modal__content .rte h2 { margin-top: 2.8rem; margin-bottom: 0.8rem; }
.product-popup-modal__content .rte h2:first-child { margin-top: 0; }
.product-popup-modal__content-info { padding-top: 1rem; }

/* ---------- 21/09 — Menu déroulant : largeur naturelle, une ligne par entrée ---------- */
.header__submenu.list-menu--disclosure { width: auto; min-width: 22rem; }
.header__submenu .header__menu-item { white-space: nowrap; }

/* ---------- 21/09 — Cibles tactiles : icônes réseaux du pied de page à 44 px ---------- */
.list-social__link { min-width: 4.4rem; min-height: 4.4rem; }

/* ---------- 22/09 — Cartes à photo : filet retiré, photo et texte sur le même bord ----------
   Damien 22/09 : le filet au-dessus d'une carte à photo ne sert à rien, et l'image était
   rentrée de 1,5 rem par rapport au texte et au filet — donc rien n'était aligné. */
.multicolumn:not(.anoram-numerotee) .multicolumn-card {
  padding-top: 0;
  border-top: 0;
}
.multicolumn:not(.anoram-numerotee) .multicolumn-card__image-wrapper {
  margin-left: 0;
  margin-right: 0;
}

/* ---------- 22/09 — Cartes à fond plein : de l'air à gauche et à droite ----------
   « Trois savoir-faire » : le texte touchait le bord du bloc coloré. */
.multicolumn.background-primary .multicolumn-list .multicolumn-card,
.multicolumn.background-secondary .multicolumn-list .multicolumn-card {
  padding-left: 2.8rem;
  padding-right: 2.8rem;
}


/* ============================================================
   22/09 — PLANCHER DE LISIBILITÉ + raccrochage au barème
   « On ne peut pas avoir du texte aussi petit » : rien de porteur de sens
   sous 1,3 rem, et chaque rôle raccroché à son cran de l'échelle ci-dessus.
   Contrôle outillé : work-2026-09-22/audit-petit-texte.mjs et audit-echelle.mjs.
   ============================================================ */
.footer__content-bottom .copyright__content,
.footer__content-bottom small,
.footer__list-social .list-social__link,
.caption,
.caption-with-letter-spacing,
.rich-text__caption,
.card__caption,
.footer-block__details-content .list-menu__item {
  font-size: var(--pas-libelle);
}
.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded,
.link,
.customer a {
  font-size: var(--pas-corps-2);
}
/* titres secondaires qui vivaient hors barème */
.accordion__title,
.product__accordion .summary__title,
.collapsible-content__heading {
  font-size: var(--pas-h3);
}
.facets__heading,
.mobile-facets__heading,
.facet-filters__label,
.facets__label,
.product-count,
.product-count__text {
  font-size: var(--pas-corps-2);
}


/* ---------- 22/09 — les derniers hors-barème, relevés au navigateur ----------
   audit-hors-bareme.mjs compare la taille calculée de chaque texte visible aux
   crans de l'échelle, sur 8 pages × 5 largeurs. Ces sélecteurs-là gardaient
   leur propre valeur ; ils raccrochent au cran de leur rôle. */
.banner__heading,
.collection-hero__title { font-size: var(--pas-h0); }
.footer .footer-block__heading { font-size: var(--pas-corps-2); }
.field__label,
.form__label,
.customer .field__label { font-size: var(--pas-corps); }
.price,
.price-item,
.price__container .price-item { font-size: var(--pas-corps); }
.usp-strip__item { font-size: inherit; }