/* =========================================================================
   ROCK N' KID / RIFF & NEEDLE - main.css
   ─────────────────────────────────────────────────────────────────────────
   Architecture :
     1. Tokens (variables globales)
     2. Reset & base
     3. Typographie
     4. Layout (container, sections)
     5. Utilitaires sémantiques
     6. Composants
        - boutons / badges / tags / chips
        - header / nav / drawer mobile
        - mini-panier / overlay recherche / menu compte
        - cookie banner / modal me prévenir
        - hero / cartes formats / cartes univers
        - grille produits / carte produit / sticky bar mobile
        - filtres / breadcrumb / pagination
        - galerie / accordéons / fiche produit
        - réassurance / salons / atelier / newsletter
        - checkout / login / account
        - pages légales / faq / contact
        - footer
   Préfixe : .rnk-   ·   BEM : block__element--modifier
   Mobile-first.    Pas de framework. Pas de CSS-in-JS.
   ========================================================================= */


/* =========================================================================
   1. TOKENS
   ========================================================================= */
:root {
  /* - Couleurs - encre graphite, papier froid, pas de noir pur - */
  --rnk-color-bg:                 #fafafa;     /* papier légèrement chaud, pas ivoire */
  --rnk-color-bg-alt:             #f5f5f5;     /* fond alterné, gris chaud très léger */
  --rnk-color-surface:            #ffffff;
  --rnk-color-text:               #1e1e1e;     /* encre graphite, presque noir */
  --rnk-color-text-muted:         #5c5c58;
  --rnk-color-text-soft:          #6b6b66;     /* AA: ≥4.5:1 sur fond clair */

  --rnk-color-dark:               #1e1e1e;
  --rnk-color-dark-soft:          #2e2e2c;
  --rnk-color-dark-text:          #f7f7f5;

  --rnk-color-accent:             #d1073c;     /* rouge identitaire, AA sur fonds clairs */
  --rnk-color-accent-hover:       #c20838;
  --rnk-color-accent-soft:        #fae9ec;
  --rnk-color-accent-on-dark:     #ef5b7c;     /* 5.1:1 sur #1e1e1e, texte AA/RGAA */

  --rnk-color-secondary:          #3d7a5a;     /* vert profond, moins sauge */
  --rnk-color-secondary-soft:     #e4ede6;

  --rnk-color-warm:               #c65d3b;     /* terracotta - manga */
  --rnk-color-fantasy:            #4a4a3a;
  --rnk-color-witchy:             #3a2f4a;
  --rnk-color-tattoo:             #2e2820;
  --rnk-color-cosy:               #5e7a60;

  --rnk-color-border:             #dddcd8;
  --rnk-color-border-strong:      #b8b7b0;
  --rnk-color-overlay:            rgba(30, 30, 30, 0.6);

  --rnk-color-danger:             #b5293b;
  --rnk-color-success:            #3d7a5a;

  /* Univers (utilisés par les pages /univers et les badges) */
  --rnk-universe-horreur:         #1e1c1c;
  --rnk-universe-fantasy:         #1c2818;
  --rnk-universe-dark-romance:    #1e1528;
  --rnk-universe-manga:           #0e1420;
  --rnk-universe-witchy:          #1a1020;
  --rnk-universe-tattoo:          #1a1a12;
  --rnk-universe-cosy:            #161c10;

  /* - Typographie - */
  --rnk-font-heading: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --rnk-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --rnk-fs-base:      1rem;
  --rnk-lh-base:      1.6;
  --rnk-fw-normal:    400;
  --rnk-fw-medium:    500;
  --rnk-fw-bold:      600;

  /* - Espacements - */
  --rnk-spacing-xxs:  0.25rem;
  --rnk-spacing-xs:   0.5rem;
  --rnk-spacing-sm:   0.75rem;
  --rnk-spacing-md:   1rem;
  --rnk-spacing-lg:   1.5rem;
  --rnk-spacing-xl:   2.5rem;
  --rnk-spacing-2xl:  4rem;
  --rnk-spacing-3xl:  6rem;

  /* - Rayons - */
  --rnk-radius-sm:    0.25rem;
  --rnk-radius-md:    0.5rem;
  --rnk-radius-lg:    0.75rem;
  --rnk-radius-xl:    1rem;
  --rnk-radius-pill:  999px;

  /* - Contrôles - base commune, compacte mais confortable - */
  --rnk-control-height:      2.875rem;
  --rnk-control-radius:      0.375rem;
  --rnk-control-padding-x:   1.125rem;
  --rnk-control-font-size:   0.875rem;

  /* - Élévations - */
  --rnk-shadow-sm:    0 1px 2px rgba(30, 30, 30, 0.05);
  --rnk-shadow-md:    0 6px 16px rgba(30, 30, 30, 0.07);
  --rnk-shadow-lg:    0 18px 40px rgba(30, 30, 30, 0.10);

  /* - Champs de formulaire - */
  --rnk-field-height:        var(--rnk-control-height);
  --rnk-field-radius:        var(--rnk-control-radius);
  --rnk-field-padding-x:     1rem;
  --rnk-field-border:        #cbc9c4;
  --rnk-field-border-hover:  #8f8d87;
  --rnk-field-placeholder:   #7a7975;
  --rnk-field-focus-shadow:  0 0 0 3px var(--rnk-color-accent-soft);

  /* - Transitions - */
  --rnk-transition-fast: 150ms cubic-bezier(0.25, 1, 0.5, 1);
  --rnk-transition-base: 280ms cubic-bezier(0.16, 1, 0.3, 1);

  /* - Layout - */
  --rnk-container-max:    80rem;
  --rnk-container-narrow: 56rem;
  --rnk-header-h:         4.5rem;
  --rnk-z-dropdown:       50;
  --rnk-z-header:         60;
  --rnk-z-drawer:         100;
  --rnk-z-overlay:        110;
  --rnk-z-modal:          120;
  --rnk-z-cookie:         130;
}


/* =========================================================================
   2. RESET & BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--rnk-font-body);
  font-size: var(--rnk-fs-base);
  line-height: var(--rnk-lh-base);
  color: var(--rnk-color-text);
  background-color: var(--rnk-color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100%;
}

img, picture, video, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol { list-style: none; padding: 0; margin: 0; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--rnk-transition-fast);
}
a:hover { color: var(--rnk-color-accent); }

button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}

input, select, textarea { font: inherit; color: inherit; }

/* Focus visible : couleur d'accent par défaut, blanche sur fonds sombres pour
   garantir la visibilité au clavier sur tous les contextes (header, hero,
   footer, drawers). */
:focus-visible {
  outline: 2px solid var(--rnk-color-accent);
  outline-offset: 2px;
}

hr {
  border: 0;
  border-top: 1px solid var(--rnk-color-border);
  margin: var(--rnk-spacing-xl) 0;
}

/* Empêche le scroll quand un overlay est ouvert */
body[data-rnk-scroll-locked="true"] { overflow: hidden; }


/* =========================================================================
   3. TYPOGRAPHIE
   ========================================================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--rnk-font-heading);
  font-weight: var(--rnk-fw-normal);
  line-height: 1.2;
  margin: 0 0 var(--rnk-spacing-md);
  color: var(--rnk-color-text);
}
h1 { font-size: clamp(2rem,    4vw + 1rem, 3.25rem); line-height: 1.15; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem); letter-spacing: -0.01em; }
h3 { font-size: clamp(1.25rem, 1vw + 1rem,  1.5rem); font-weight: var(--rnk-fw-medium); }
h4 { font-size: 1.125rem; font-weight: var(--rnk-fw-medium); }

p { margin: 0 0 var(--rnk-spacing-md); }
p:last-child { margin-bottom: 0; }

strong { font-weight: var(--rnk-fw-bold); }
small  { font-size: 0.875rem; color: var(--rnk-color-text-muted); }

.rnk-eyebrow {
  display: inline-block;
  font-family: var(--rnk-font-body);
  font-size: 0.8125rem;
  font-weight: var(--rnk-fw-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rnk-color-accent);
  margin-bottom: var(--rnk-spacing-md);
}

.rnk-lead {
  font-size: 1.125rem;
  color: var(--rnk-color-text-muted);
  max-width: 50ch;
}


/* =========================================================================
   4. LAYOUT
   ========================================================================= */
.rnk-container {
  width: 100%;
  max-width: var(--rnk-container-max);
  margin-inline: auto;
  padding-inline: var(--rnk-spacing-md);
}
@media (min-width: 48rem) { .rnk-container { padding-inline: var(--rnk-spacing-lg); } }
@media (min-width: 64rem) { .rnk-container { padding-inline: var(--rnk-spacing-xl); } }

.rnk-container--narrow { max-width: var(--rnk-container-narrow); }
.rnk-container--centered { text-align: center; }

.rnk-section { padding-block: var(--rnk-spacing-xl); }
@media (min-width: 48rem) { .rnk-section { padding-block: var(--rnk-spacing-2xl); } }
@media (min-width: 64rem) { .rnk-section { padding-block: var(--rnk-spacing-3xl); } }

.rnk-section--surface { background-color: var(--rnk-color-surface); }
.rnk-section--alt    { background-color: var(--rnk-color-bg-alt); }
.rnk-section--dark   { background-color: var(--rnk-color-dark);   color: var(--rnk-color-dark-text); }
.rnk-section--accent { background-color: var(--rnk-color-dark); color: var(--rnk-color-dark-text); position: relative; overflow: hidden; }
.rnk-section--accent::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, oklch(0.35 0.08 15 / 0.25) 0%, transparent 60%);
  pointer-events: none;
}
.rnk-section--tight  { padding-block: var(--rnk-spacing-lg); }
@media (min-width: 48rem) { .rnk-section--tight { padding-block: var(--rnk-spacing-xl); } }
@media (min-width: 64rem) { .rnk-section--tight { padding-block: var(--rnk-spacing-xl); } }

/* Ancienne classe des bandeaux, conservée pour la compatibilité du contenu. */
.rnk-section--banner {
  position: relative;
  overflow: hidden;
  background-color: var(--rnk-color-dark);
  background-image: none;
  color: var(--rnk-color-dark-text);
}
.rnk-section--banner > .rnk-container { position: relative; }
.rnk-section--banner h1 { color: inherit; }
.rnk-section--banner .rnk-lead { color: rgba(247, 247, 245, 0.85); }
.rnk-section--banner .rnk-eyebrow { color: oklch(0.85 0.06 15); }
.rnk-section--banner .rnk-breadcrumb { color: rgba(250, 248, 245, 0.85); }
.rnk-section--banner .rnk-breadcrumb a:hover { color: #fff; }

/* Compact: for short centered messages (salons, newsletter) */
.rnk-section--compact { padding-block: var(--rnk-spacing-xl); }
@media (min-width: 48rem) { .rnk-section--compact { padding-block: var(--rnk-spacing-xl); } }
@media (min-width: 64rem) { .rnk-section--compact { padding-block: var(--rnk-spacing-2xl); } }

/* Generous: for editorial/atelier sections that need more air */
.rnk-section--generous { padding-block: var(--rnk-spacing-2xl); }
@media (min-width: 48rem) { .rnk-section--generous { padding-block: var(--rnk-spacing-3xl); } }
@media (min-width: 64rem) { .rnk-section--generous { padding-block: clamp(5rem, 7vw, 7.5rem); } }

/* Shop: reduced top padding since filter bar provides visual separation */
.rnk-section--shop { padding-block: var(--rnk-spacing-lg) var(--rnk-spacing-xl); }
@media (min-width: 48rem) { .rnk-section--shop { padding-block: var(--rnk-spacing-xl) var(--rnk-spacing-2xl); } }
@media (min-width: 64rem) { .rnk-section--shop { padding-block: var(--rnk-spacing-xl) var(--rnk-spacing-3xl); } }

.rnk-section__header { text-align: center; margin-bottom: var(--rnk-spacing-xl); }
.rnk-section__header--start { text-align: start; }
.rnk-section__header--flex {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.rnk-section__title  { margin-bottom: var(--rnk-spacing-sm); }
.rnk-section__lead   { margin-inline: auto; max-width: 50ch; color: var(--rnk-color-text-muted); font-size: 1.125rem; line-height: 1.6; }
.rnk-section__header--start .rnk-section__lead { margin-inline: 0; }
.rnk-section__header--flex .rnk-section__lead { margin-bottom: 0; }

.rnk-section__cta {
  text-align: center;
  margin-top: var(--rnk-spacing-xl);
}
@media (min-width: 64rem) { .rnk-section__cta { margin-top: var(--rnk-spacing-2xl); } }


/* =========================================================================
   5. UTILITAIRES sémantiques
   ========================================================================= */
.rnk-skip-link {
  position: absolute;
  top: 0; left: 0;
  padding: var(--rnk-spacing-sm) var(--rnk-spacing-md);
  background: var(--rnk-color-dark);
  color: var(--rnk-color-dark-text);
  border-radius: 0 0 var(--rnk-radius-sm) 0;
  transform: translateY(-110%);
  transition: transform var(--rnk-transition-fast);
  z-index: 1000;
}
.rnk-skip-link:focus { transform: translateY(0); }

.rnk-sr-only {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.rnk-show-mobile  { display: block; }
.rnk-show-desktop { display: none; }
@media (min-width: 64rem) {
  .rnk-show-mobile  { display: none; }
  .rnk-show-desktop { display: block; }
}


/* =========================================================================
   6. COMPOSANTS
   ========================================================================= */

/* ─── Boutons ─────────────────────────────────────────────────────────── */
.rnk-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rnk-spacing-xs);
  padding: 0.6875rem var(--rnk-control-padding-x);
  font-family: var(--rnk-font-body);
  font-size: var(--rnk-control-font-size);
  font-weight: var(--rnk-fw-medium);
  line-height: 1.25;
  text-align: center;
  border-radius: var(--rnk-control-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--rnk-transition-fast),
              color var(--rnk-transition-fast),
              border-color var(--rnk-transition-fast),
              transform var(--rnk-transition-fast),
              box-shadow var(--rnk-transition-fast);
  min-height: var(--rnk-control-height);
}
.rnk-button--primary   { background-color: var(--rnk-color-dark);   color: var(--rnk-color-dark-text); }
.rnk-button--primary:hover { background-color: var(--rnk-color-accent); color: var(--rnk-color-dark-text); transform: translateY(-1px); box-shadow: 0 4px 12px oklch(0.4 0.15 15 / 0.2); }

.rnk-button--secondary { background-color: transparent; color: var(--rnk-color-text); border-color: var(--rnk-field-border); }
.rnk-button--secondary:hover { background-color: var(--rnk-color-bg-alt); border-color: var(--rnk-field-border-hover); color: var(--rnk-color-text); }

.rnk-button--ghost     { background-color: transparent; color: var(--rnk-color-text); border-color: var(--rnk-field-border); }
.rnk-button--ghost:hover { border-color: var(--rnk-field-border-hover); background: var(--rnk-color-bg-alt); color: var(--rnk-color-text); }

/* Surfaces sombres : les boutons primaires deviennent clairs et les
   boutons secondaires / fantômes rebascule en texte clair. */
.rnk-section--banner .rnk-button--primary,
.rnk-section--accent .rnk-button--primary,
.rnk-section--dark   .rnk-button--primary,
.rnk-universe-hero   .rnk-button--primary,
.rnk-page-hero       .rnk-button--primary {
  background-color: var(--rnk-color-dark-text);
  color: var(--rnk-color-dark);
  border-color: var(--rnk-color-dark-text);
}
.rnk-section--banner .rnk-button--primary:hover,
.rnk-section--accent .rnk-button--primary:hover,
.rnk-section--dark   .rnk-button--primary:hover,
.rnk-universe-hero   .rnk-button--primary:hover,
.rnk-page-hero       .rnk-button--primary:hover {
  background-color: var(--rnk-color-accent);
  color: var(--rnk-color-dark-text);
  border-color: var(--rnk-color-accent);
}

/* Recherche catalogue : action discrète mais bien lisible sur le hero. */
.rnk-page-hero .rnk-search-form .rnk-button--primary {
  background-color: transparent;
  color: var(--rnk-color-dark-text);
  border-color: oklch(0.92 0.005 60 / 0.55);
}
.rnk-page-hero .rnk-search-form .rnk-button--primary:hover {
  background-color: oklch(0.95 0.005 60 / 0.08);
  color: var(--rnk-color-dark-text);
  border-color: var(--rnk-color-dark-text);
}

.rnk-section--banner .rnk-button--secondary,
.rnk-section--accent .rnk-button--secondary,
.rnk-section--dark   .rnk-button--secondary,
.rnk-universe-hero   .rnk-button--secondary,
.rnk-page-hero       .rnk-button--secondary,
.rnk-section--banner .rnk-button--ghost,
.rnk-section--accent .rnk-button--ghost,
.rnk-section--dark   .rnk-button--ghost,
.rnk-universe-hero   .rnk-button--ghost,
.rnk-page-hero       .rnk-button--ghost {
  color: var(--rnk-color-dark-text);
  border-color: oklch(0.92 0.005 60 / 0.35);
}
.rnk-section--banner .rnk-button--secondary:hover,
.rnk-section--accent .rnk-button--secondary:hover,
.rnk-section--dark   .rnk-button--secondary:hover,
.rnk-universe-hero   .rnk-button--secondary:hover,
.rnk-page-hero       .rnk-button--secondary:hover,
.rnk-section--banner .rnk-button--ghost:hover,
.rnk-section--accent .rnk-button--ghost:hover,
.rnk-section--dark   .rnk-button--ghost:hover,
.rnk-universe-hero   .rnk-button--ghost:hover,
.rnk-page-hero       .rnk-button--ghost:hover {
  color: var(--rnk-color-dark-text);
  border-color: var(--rnk-color-dark-text);
  background: oklch(0.95 0.005 60 / 0.08);
}

.rnk-button--accent    { background-color: var(--rnk-color-accent);     color: var(--rnk-color-dark-text); }
.rnk-button--accent:hover { background-color: var(--rnk-color-accent-hover); }

.rnk-button--inverse   { background-color: var(--rnk-color-dark-text); color: var(--rnk-color-accent); }
.rnk-button--inverse:hover { background-color: var(--rnk-color-bg-alt); color: var(--rnk-color-accent-hover); }

.rnk-button--block { width: 100%; }
.rnk-button--small { padding-inline: 1rem; min-height: var(--rnk-control-height); font-size: var(--rnk-control-font-size); }

.rnk-button[disabled],
.rnk-button[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--rnk-color-bg-alt);
  color: var(--rnk-color-text-muted);
  border-color: var(--rnk-color-border);
}


/* ─── Badges ─────────────────────────────────────────────────────────── */
.rnk-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--rnk-spacing-xxs);
  padding: 0.3125rem 0.75rem;
  font-size: 0.75rem;
  font-weight: var(--rnk-fw-medium);
  letter-spacing: 0.02em;
  border-radius: var(--rnk-radius-pill);
  background-color: var(--rnk-color-dark);
  color: var(--rnk-color-dark-text);
  white-space: nowrap;
  line-height: 1.2;
}
.rnk-badge--new       { background-color: var(--rnk-color-secondary); }
.rnk-badge--unique    { background-color: var(--rnk-color-warm); }
.rnk-badge--series    { background-color: var(--rnk-color-fantasy); }
.rnk-badge--low       { background-color: transparent; color: var(--rnk-color-warm); border: 1px solid var(--rnk-color-warm); }
.rnk-badge--sold      { background-color: var(--rnk-color-text-soft); }
.rnk-badge--back-soon { background-color: transparent; color: var(--rnk-color-secondary); border: 1px solid var(--rnk-color-secondary); }
.rnk-badge--handmade  { background-color: var(--rnk-color-bg-alt); color: var(--rnk-color-text); border: 1px solid var(--rnk-color-border-strong); }
.rnk-badge--ghost     { background: oklch(0.96 0.005 60); color: var(--rnk-color-text-muted); border: 1px solid var(--rnk-color-border); }


/* ─── Tags ─────────────────────────────────────────────────────────── */
.rnk-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  font-size: 0.75rem;
  border-radius: var(--rnk-radius-pill);
  background-color: var(--rnk-color-bg-alt);
  color: var(--rnk-color-text);
  border: 1px solid var(--rnk-color-border);
}


/* ─── Stock indicator ────────────────────────────────────────────── */
.rnk-stock {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.8125rem;
  font-weight: var(--rnk-fw-medium);
  letter-spacing: 0.005em;
  color: var(--rnk-color-secondary);
}
.rnk-stock::before {
  content: "";
  width: 0.4375rem; height: 0.4375rem;
  border-radius: var(--rnk-radius-pill);
  background-color: var(--rnk-color-success);
  flex-shrink: 0;
}
.rnk-stock--low      { color: var(--rnk-color-warm); }
.rnk-stock--low::before     { background-color: var(--rnk-color-warm); }
.rnk-stock--sold     { color: var(--rnk-color-text-muted); }
.rnk-stock--sold::before    { background-color: var(--rnk-color-text-muted); }
.rnk-stock--back-soon{ color: var(--rnk-color-secondary); }
.rnk-stock--back-soon::before { background-color: var(--rnk-color-secondary); }


/* ─── Site header ────────────────────────────────────────────────────── */
.rnk-announcement {
  background-color: var(--rnk-color-dark);
  color: var(--rnk-color-dark-text);
  text-align: center;
  font-size: 0.8125rem;
  padding: var(--rnk-spacing-xs) var(--rnk-spacing-md);
  margin-bottom: 0;
}

.rnk-site-header {
  position: sticky;
  top: 0;
  z-index: var(--rnk-z-header);
  background-color: var(--rnk-color-bg);
  border-bottom: 1px solid var(--rnk-color-border);
}

.rnk-site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rnk-spacing-md);
  padding-block: var(--rnk-spacing-md);
}

.rnk-site-header__brand { display: inline-flex; align-items: center; line-height: 1.1; text-align: left; }
.rnk-site-header__brand:hover { opacity: 0.8; }
.rnk-site-header__brand-logo { height: 4.25rem; width: auto; display: block; }
.rnk-site-header__brand-name {
  display: block;
  font-family: var(--rnk-font-heading);
  font-size: 1.375rem;
  margin: 0;
}
.rnk-site-header__brand-tag {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rnk-color-text-muted);
  margin-top: 2px;
}

.rnk-site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--rnk-spacing-xs);
}

.rnk-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--rnk-radius-md);
  position: relative;
  color: var(--rnk-color-text);
  transition: background-color var(--rnk-transition-fast),
              color var(--rnk-transition-fast);
}
.rnk-icon-button:hover {
  background-color: var(--rnk-color-bg-alt);
  color: var(--rnk-color-accent);
}

.rnk-cart-count {
  position: absolute;
  top: 0.4rem; right: 0.4rem;
  min-width: 1.125rem; height: 1.125rem;
  padding-inline: 0.25rem;
  border-radius: var(--rnk-radius-pill);
  background-color: var(--rnk-color-accent);
  color: var(--rnk-color-dark-text);
  font-size: 0.6875rem;
  font-weight: var(--rnk-fw-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rnk-cart-count[hidden] { display: none; }

.rnk-site-header__burger { display: inline-flex; }
@media (min-width: 64rem) { .rnk-site-header__burger { display: none; } }


/* ─── Navigation desktop ─────────────────────────────────────────────── */
.rnk-nav { display: none; flex: 1; }
@media (min-width: 64rem) {
  .rnk-nav { display: flex; justify-content: center; align-items: center; }
}

.rnk-nav__list { display: flex; align-items: center; gap: var(--rnk-spacing-lg); }
.rnk-nav__item { position: relative; }
.rnk-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--rnk-spacing-xxs);
  padding: var(--rnk-spacing-xs) 0;
  font-size: 0.9375rem;
  font-weight: var(--rnk-fw-medium);
  color: var(--rnk-color-text);
}
.rnk-nav__link:hover,
.rnk-nav__link--active { color: var(--rnk-color-accent); }
.rnk-nav__chevron { width: 0.625rem; height: 0.625rem; transition: transform var(--rnk-transition-fast); }
.rnk-nav__item[data-rnk-open="true"] .rnk-nav__chevron { transform: rotate(180deg); }

.rnk-nav__submenu {
  position: absolute;
  top: 100%; left: 0;
  min-width: 16rem;
  margin-top: var(--rnk-spacing-xs);
  padding: var(--rnk-spacing-xs);
  background-color: var(--rnk-color-surface);
  border: 1px solid var(--rnk-color-border);
  border-radius: var(--rnk-radius-md);
  box-shadow: var(--rnk-shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--rnk-transition-fast),
              transform var(--rnk-transition-fast),
              visibility var(--rnk-transition-fast);
  z-index: var(--rnk-z-dropdown);
}
.rnk-nav__item:hover .rnk-nav__submenu,
.rnk-nav__item:focus-within .rnk-nav__submenu,
.rnk-nav__item[data-rnk-open="true"] .rnk-nav__submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.rnk-nav__sublink {
  display: block;
  padding: var(--rnk-spacing-sm) var(--rnk-spacing-md);
  font-size: 0.875rem;
  border-radius: var(--rnk-radius-sm);
}
.rnk-nav__sublink:hover {
  background-color: var(--rnk-color-bg-alt);
  color: var(--rnk-color-accent);
}


/* ─── Drawer mobile (navigation) ────────────────────────────────────── */
.rnk-drawer {
  position: fixed; inset: 0;
  z-index: var(--rnk-z-drawer);
  visibility: hidden;
  pointer-events: none;
}
.rnk-drawer[data-rnk-open="true"] { visibility: visible; pointer-events: auto; }

.rnk-drawer__overlay {
  position: absolute; inset: 0;
  background-color: var(--rnk-color-overlay);
  opacity: 0;
  transition: opacity var(--rnk-transition-base);
}
.rnk-drawer[data-rnk-open="true"] .rnk-drawer__overlay { opacity: 1; }

.rnk-drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(20rem, 90vw);
  background-color: var(--rnk-color-bg);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform var(--rnk-transition-base);
  box-shadow: var(--rnk-shadow-lg);
}
.rnk-drawer[data-rnk-open="true"] .rnk-drawer__panel { transform: translateX(0); }

.rnk-drawer__header,
.rnk-drawer__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--rnk-spacing-md);
  border-bottom: 1px solid var(--rnk-color-border);
}
.rnk-drawer__logo { height: 1.75rem; width: auto; }
.rnk-drawer__footer {
  border-bottom: 0;
  border-top: 1px solid var(--rnk-color-border);
  flex-direction: column;
  gap: var(--rnk-spacing-xs);
  align-items: stretch;
}
.rnk-drawer__body { flex: 1; overflow-y: auto; padding: var(--rnk-spacing-sm) 0; }

.rnk-drawer__group { padding: var(--rnk-spacing-sm) 0; }
.rnk-drawer__group-title {
  display: block;
  padding: var(--rnk-spacing-xs) var(--rnk-spacing-md);
  font-size: 0.75rem;
  font-weight: var(--rnk-fw-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rnk-color-text-muted);
}
.rnk-drawer__link {
  display: block;
  padding: var(--rnk-spacing-sm) var(--rnk-spacing-md);
  font-size: 0.9375rem;
}
.rnk-drawer__link:hover,
.rnk-drawer__link--active {
  background-color: var(--rnk-color-bg-alt);
  color: var(--rnk-color-accent);
}

/* Sous-menu mobile collapsible (Par format / Par univers) */
.rnk-drawer__submenu-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--rnk-spacing-sm) var(--rnk-spacing-md);
  font-size: 0.9375rem;
  font-weight: var(--rnk-fw-medium);
  text-align: left;
}
.rnk-drawer__submenu-toggle[aria-expanded="true"] .rnk-nav__chevron { transform: rotate(180deg); }
.rnk-drawer__submenu { padding: 0 var(--rnk-spacing-md) var(--rnk-spacing-sm); }
.rnk-drawer__submenu[hidden] { display: none; }


/* ─── Mini-panier (drawer droit) ────────────────────────────────────── */
.rnk-mini-cart {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(24rem, 100vw);
  background-color: var(--rnk-color-bg);
  border-left: 1px solid var(--rnk-color-border);
  box-shadow: var(--rnk-shadow-lg);
  display: flex;
  flex-direction: column;
  z-index: var(--rnk-z-overlay);
  transform: translateX(100%);
  transition: transform var(--rnk-transition-base);
}
.rnk-mini-cart[data-rnk-open="true"] { transform: translateX(0); }
.rnk-mini-cart__overlay {
  position: fixed; inset: 0;
  background-color: var(--rnk-color-overlay);
  opacity: 0; visibility: hidden;
  transition: opacity var(--rnk-transition-base);
  z-index: var(--rnk-z-drawer);
}
.rnk-mini-cart__overlay[data-rnk-open="true"] { opacity: 1; visibility: visible; }

.rnk-mini-cart__header,
.rnk-mini-cart__footer {
  padding: var(--rnk-spacing-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rnk-spacing-sm);
  border-bottom: 1px solid var(--rnk-color-border);
}
.rnk-mini-cart__footer {
  border-bottom: 0;
  border-top: 1px solid var(--rnk-color-border);
  flex-direction: column;
  align-items: stretch;
}
.rnk-mini-cart__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--rnk-spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--rnk-spacing-md);
}

.rnk-mini-cart__item {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--rnk-spacing-sm);
  padding-bottom: var(--rnk-spacing-md);
  border-bottom: 1px solid var(--rnk-color-border);
}
.rnk-mini-cart__item:last-child { border-bottom: 0; padding-bottom: 0; }
.rnk-mini-cart__item-media {
  aspect-ratio: 3 / 4;
  background-color: var(--rnk-color-bg-alt);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--rnk-color-border);
  border-radius: var(--rnk-radius-sm);
}
.rnk-mini-cart__item-title {
  font-size: 0.875rem;
  font-weight: var(--rnk-fw-medium);
  margin: 0 0 0.125rem;
  line-height: 1.4;
}
.rnk-mini-cart__item-meta {
  font-size: 0.75rem;
  color: var(--rnk-color-text-muted);
  margin-bottom: var(--rnk-spacing-xs);
}
.rnk-mini-cart__item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rnk-spacing-xs);
  margin-top: var(--rnk-spacing-xs);
}

.rnk-mini-cart__totals {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--rnk-font-heading);
  font-size: 1.25rem;
}

.rnk-mini-cart__empty {
  padding: var(--rnk-spacing-xl) 0;
  text-align: center;
  color: var(--rnk-color-text-muted);
}


/* ─── Overlay recherche ──────────────────────────────────────────────── */
.rnk-search-overlay {
  position: fixed; inset: 0;
  z-index: var(--rnk-z-modal);
  display: flex;
  flex-direction: column;
  background-color: rgba(30, 30, 30, 0.5);
  backdrop-filter: blur(2px);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--rnk-transition-base), visibility var(--rnk-transition-base);
}
.rnk-search-overlay[data-rnk-open="true"] { visibility: visible; opacity: 1; }

.rnk-search-overlay__panel {
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
  background-color: var(--rnk-color-bg);
  border: 1px solid var(--rnk-color-border);
  border-top: 0;
  border-radius: 0 0 var(--rnk-radius-lg) var(--rnk-radius-lg);
  box-shadow: var(--rnk-shadow-lg);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.rnk-search-overlay__header {
  display: flex;
  align-items: center;
  gap: var(--rnk-spacing-sm);
  padding: var(--rnk-spacing-md);
  border-bottom: 1px solid var(--rnk-color-border);
}
.rnk-search-overlay__input {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 1.125rem;
  padding: var(--rnk-spacing-xs) 0;
  outline: 0;
}
.rnk-search-overlay__input:focus-visible {
  outline: 2px solid var(--rnk-color-accent);
  outline-offset: 4px;
  border-radius: var(--rnk-radius-sm);
}
/* Hide native search clear button */
.rnk-search-overlay__input::-webkit-search-cancel-button,
.rnk-search-overlay__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.rnk-search-overlay__input::-ms-clear { display: none; }

.rnk-search-overlay__clear {
  border: 0;
  background: transparent;
  font-size: 0.8125rem;
  color: var(--rnk-color-text-muted);
  cursor: pointer;
  padding: var(--rnk-spacing-xs) var(--rnk-spacing-sm);
  border-radius: var(--rnk-radius-sm);
  white-space: nowrap;
  display: none;
}
.rnk-search-overlay__clear:hover { color: var(--rnk-color-text); background: var(--rnk-color-bg-alt); }
.rnk-search-overlay__clear[data-visible] { display: inline-flex; }

.rnk-search-overlay__close-btn {
  border: 0;
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--rnk-color-text-muted);
  cursor: pointer;
  padding: var(--rnk-spacing-xs) var(--rnk-spacing-sm);
  border-radius: var(--rnk-radius-sm);
  white-space: nowrap;
}
.rnk-search-overlay__close-btn:hover { color: var(--rnk-color-text); background: var(--rnk-color-bg-alt); }

.rnk-search-overlay__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rnk-spacing-xs);
  padding: var(--rnk-spacing-md);
  border-bottom: 1px solid var(--rnk-color-border);
}

.rnk-search-overlay__results {
  overflow-y: auto;
  padding: var(--rnk-spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--rnk-spacing-md);
}
.rnk-search-overlay__results:empty { display: none; }

.rnk-search-section__title {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rnk-color-text-muted);
  margin: 0 0 var(--rnk-spacing-xs);
}

.rnk-search-result {
  display: flex;
  align-items: center;
  gap: var(--rnk-spacing-sm);
  padding: var(--rnk-spacing-sm);
  border-radius: var(--rnk-radius-md);
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
}
.rnk-search-result:hover,
.rnk-search-result:focus-visible {
  background-color: var(--rnk-color-bg-alt);
  border-color: var(--rnk-color-border);
}
.rnk-search-result__media {
  width: 3rem; height: 3rem;
  border-radius: var(--rnk-radius-sm);
  background-color: var(--rnk-color-bg-alt);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--rnk-color-border);
  flex-shrink: 0;
}
.rnk-search-result__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.rnk-search-result__main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 0.3rem;
}
.rnk-search-result__title {
  font-size: 0.9375rem;
  font-weight: var(--rnk-fw-medium);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rnk-search-result__meta {
  font-size: 0.75rem;
  color: var(--rnk-color-text-muted);
}
.rnk-search-result__price { font-weight: var(--rnk-fw-medium); }

.rnk-search-empty {
  padding: var(--rnk-spacing-xl);
  text-align: center;
  color: var(--rnk-color-text-muted);
}
.rnk-search-empty__hint { margin-top: var(--rnk-spacing-xs); font-size: 0.875rem; }


/* ─── Menu compte ───────────────────────────────────────────────────── */
.rnk-account-menu {
  position: relative;
}
.rnk-account-menu__panel {
  position: absolute;
  top: 100%; right: 0;
  margin-top: var(--rnk-spacing-xs);
  min-width: 14rem;
  background-color: var(--rnk-color-surface);
  border: 1px solid var(--rnk-color-border);
  border-radius: var(--rnk-radius-md);
  box-shadow: var(--rnk-shadow-md);
  padding: var(--rnk-spacing-xs);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--rnk-transition-fast),
              visibility var(--rnk-transition-fast),
              transform var(--rnk-transition-fast);
  z-index: var(--rnk-z-dropdown);
}
.rnk-account-menu[data-rnk-open="true"] .rnk-account-menu__panel {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.rnk-account-menu__title {
  padding: var(--rnk-spacing-sm) var(--rnk-spacing-md);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rnk-color-text-muted);
}
.rnk-account-menu__link {
  display: block;
  padding: var(--rnk-spacing-sm) var(--rnk-spacing-md);
  font-size: 0.875rem;
  border-radius: var(--rnk-radius-sm);
}
.rnk-account-menu__link:hover {
  background-color: var(--rnk-color-bg-alt);
  color: var(--rnk-color-accent);
}
.rnk-account-menu__divider {
  border-top: 1px solid var(--rnk-color-border);
  margin: var(--rnk-spacing-xs) 0;
}


/* ─── Cookie banner ─────────────────────────────────────────────────── */
.rnk-cookie-banner {
  position: fixed;
  inset-block-end: var(--rnk-spacing-md);
  inset-inline-start: var(--rnk-spacing-md);
  inset-inline-end: var(--rnk-spacing-md);
  max-width: 40rem;
  margin-inline: auto;
  padding: var(--rnk-spacing-md) var(--rnk-spacing-lg);
  background-color: var(--rnk-color-surface);
  border: 1px solid var(--rnk-color-border);
  border-radius: var(--rnk-radius-lg);
  box-shadow: var(--rnk-shadow-lg);
  z-index: var(--rnk-z-cookie);
  display: flex;
  flex-direction: column;
  gap: var(--rnk-spacing-sm);
}
.rnk-cookie-banner[hidden] { display: none; }
.rnk-cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rnk-spacing-xs);
}


/* ─── Modal "Me prévenir" ───────────────────────────────────────────── */
.rnk-modal {
  position: fixed; inset: 0;
  z-index: var(--rnk-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--rnk-spacing-md);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--rnk-transition-base), visibility var(--rnk-transition-base);
}
.rnk-modal[data-rnk-open="true"] { visibility: visible; opacity: 1; }
.rnk-modal__overlay {
  position: absolute; inset: 0;
  background-color: var(--rnk-color-overlay);
}
.rnk-modal__panel {
  position: relative;
  width: 100%;
  max-width: 28rem;
  background-color: var(--rnk-color-surface);
  border-radius: var(--rnk-radius-lg);
  padding: var(--rnk-spacing-xl);
  box-shadow: var(--rnk-shadow-lg);
}
.rnk-modal__close {
  position: absolute;
  top: var(--rnk-spacing-sm); right: var(--rnk-spacing-sm);
}


/* ─── Hero ───────────────────────────────────────────────────────────── */
.rnk-hero {
  background-color: var(--rnk-color-bg-alt);
  padding-block: var(--rnk-spacing-2xl);
}
@media (min-width: 48rem) { .rnk-hero { padding-block: var(--rnk-spacing-3xl); } }
@media (min-width: 64rem) { .rnk-hero { padding-block: clamp(5rem, 8vw, 8rem); } }

.rnk-hero__inner { display: grid; gap: var(--rnk-spacing-xl); align-items: center; }
@media (min-width: 64rem) { .rnk-hero__inner { grid-template-columns: 1fr 1fr; gap: var(--rnk-spacing-2xl); } }

.rnk-hero__title {
  font-size: clamp(2.25rem, 4vw + 1rem, 3.5rem);
  font-weight: var(--rnk-fw-normal);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: var(--rnk-spacing-md);
}
.rnk-hero__lead {
  max-width: 36rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--rnk-color-text-muted);
  margin-bottom: var(--rnk-spacing-lg);
}
.rnk-hero__actions { display: flex; flex-wrap: wrap; gap: var(--rnk-spacing-sm); }

.rnk-hero__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--rnk-radius-lg);
  background-color: var(--rnk-color-dark);
  border: 1px solid var(--rnk-color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.rnk-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Fallback for background-image based heroes (other pages) */
.rnk-hero__media--bg {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(228, 10, 67, 0.3), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(198, 93, 59, 0.25), transparent 55%);
  background-size: cover;
  background-position: center;
  color: var(--rnk-color-dark-text);
  font-family: var(--rnk-font-heading);
  font-size: 1.5rem;
  text-align: center;
  padding: var(--rnk-spacing-xl);
}
.rnk-hero__media[style*="--rnk-bg-image"] {
  background-image: var(--rnk-bg-image);
  padding: 0;
}
.rnk-hero__media[style*="--rnk-bg-image"] > * {
  display: none;
}

/* ─── Hero immersive (image overlay, text over dark) ─────────────────── */
.rnk-hero--immersive {
  position: relative;
  overflow: hidden;
  background: var(--rnk-color-dark);
  color: var(--rnk-color-dark-text);
  padding-block: clamp(2rem, 5vw, 3.5rem);
  min-height: 75svh;
  min-height: 75vh; /* fallback */
  display: flex;
  align-items: center;
}
.rnk-hero--immersive::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      oklch(0.15 0.01 20 / 0.75) 0%,
      oklch(0.15 0.01 20 / 0.55) 40%,
      oklch(0.15 0.01 20 / 0.45) 70%,
      oklch(0.15 0.01 20 / 0.35) 100%
    );
  z-index: 1;
}
.rnk-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rnk-hero--immersive .rnk-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rnk-spacing-lg);
}
.rnk-hero--immersive .rnk-hero__inner > div {
  max-width: 92rem;
}
.rnk-hero--immersive .rnk-hero__media {
  display: none;
}
.rnk-hero--immersive .rnk-eyebrow {
  color: oklch(0.85 0.06 15);
  font-size: 0.875rem;
  letter-spacing: 0.18em;
}
.rnk-hero--immersive .rnk-hero__title {
  font-size: clamp(2.5rem, 6vw + 1rem, 5rem);
  line-height: 1.05;
  color: var(--rnk-color-dark-text);
  text-shadow: 0 2px 20px oklch(0.1 0.01 20 / 0.5);
  margin-bottom: var(--rnk-spacing-lg);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.rnk-hero--immersive .rnk-hero__lead {
  font-size: 1.125rem;
  max-width: 50ch;
  color: oklch(0.88 0.005 60);
  line-height: 1.7;
}
.rnk-hero--immersive .rnk-hero__actions {
  margin-block-start: var(--rnk-spacing-xl);
  display: flex;
  gap: var(--rnk-spacing-md);
}
.rnk-hero--immersive .rnk-button--primary {
  background: var(--rnk-color-accent);
  color: var(--rnk-color-dark-text);
  border: none;
  padding: 1rem 2rem;
  font-size: 1rem;
}
.rnk-hero--immersive .rnk-button--primary:hover {
  background: var(--rnk-color-accent-hover);
}
.rnk-hero--immersive .rnk-button--secondary {
  color: var(--rnk-color-dark-text);
  border-color: oklch(0.92 0.005 60 / 0.35);
  padding: 1rem 2rem;
  font-size: 1rem;
}
.rnk-hero--immersive .rnk-button--secondary:hover {
  border-color: var(--rnk-color-dark-text);
  background: oklch(0.95 0.005 60 / 0.08);
}


/* ─── Cartes formats / univers / réassurance / atelier ─────────────── */
.rnk-format-grid {
  display: grid;
  gap: var(--rnk-spacing-sm);
  grid-template-columns: 1fr;
}
@media (min-width: 36rem) { .rnk-format-grid { grid-template-columns: repeat(2, 1fr); gap: var(--rnk-spacing-md); } }
@media (min-width: 64rem) { .rnk-format-grid { grid-template-columns: repeat(4, 1fr); gap: var(--rnk-spacing-md); } }

.rnk-format-card {
  display: flex;
  flex-direction: column;
  background-color: var(--rnk-color-surface);
  border: 1px solid var(--rnk-color-border);
  border-radius: var(--rnk-radius-lg);
  overflow: hidden;
  transition: border-color var(--rnk-transition-fast),
              transform var(--rnk-transition-fast),
              box-shadow var(--rnk-transition-fast);
  height: 100%;
}
.rnk-format-card:hover {
  border-color: var(--rnk-color-accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px oklch(0.3 0.02 30 / 0.1);
  color: var(--rnk-color-text);
}
.rnk-format-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  background-color: var(--rnk-color-bg-alt);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transition: transform var(--rnk-transition-base);
}
.rnk-responsive-category-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rnk-format-card:hover .rnk-format-card__media {
  transform: scale(1.04);
}
.rnk-format-card__body {
  padding: var(--rnk-spacing-md) var(--rnk-spacing-lg) var(--rnk-spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--rnk-spacing-xxs);
}
.rnk-format-card__subtitle {
  font-family: var(--rnk-font-body);
  font-size: 0.6875rem;
  font-weight: var(--rnk-fw-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rnk-color-accent);
  order: -1;
}
.rnk-format-card__title {
  font-family: var(--rnk-font-heading);
  font-size: 1.375rem;
  font-weight: var(--rnk-fw-bold);
  line-height: 1.2;
  margin: 0;
  color: var(--rnk-color-text);
}
.rnk-format-card__desc {
  font-size: 0.8125rem;
  color: var(--rnk-color-text-soft);
  line-height: 1.5;
  margin-top: var(--rnk-spacing-xxs);
}

.rnk-universe-grid {
  display: grid;
  gap: var(--rnk-spacing-md);
  grid-template-columns: 1fr;
}
@media (min-width: 36rem) { .rnk-universe-grid { grid-template-columns: repeat(2, 1fr); gap: var(--rnk-spacing-lg); } }
@media (min-width: 64rem) { .rnk-universe-grid { grid-template-columns: repeat(4, 1fr); } }

.rnk-universe-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  background-color: var(--rnk-color-surface);
  border: 1px solid var(--rnk-color-border);
  border-radius: var(--rnk-radius-lg);
  overflow: hidden;
  color: var(--rnk-color-text);
  transition: transform var(--rnk-transition-base),
              box-shadow var(--rnk-transition-base),
              border-color var(--rnk-transition-base);
  height: 100%;
}
.rnk-universe-card:hover {
  transform: translateY(-4px);
  border-color: var(--rnk-universe-tone, var(--rnk-color-accent));
  box-shadow: 0 18px 40px var(--rnk-universe-shadow, rgba(30, 30, 30, 0.15));
  color: var(--rnk-color-text);
}

/* Bloc texture du haut : photo brute */
.rnk-universe-card__texture {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  flex-shrink: 0;
  background-color: var(--rnk-universe-dark, var(--rnk-color-dark));
  overflow: hidden;
  transition: transform var(--rnk-transition-base);
}
.rnk-universe-card__texture picture,
.rnk-universe-card__texture img {
  display: block;
  width: 100%;
  height: 100%;
}
.rnk-universe-card__texture img {
  object-fit: cover;
}
.rnk-universe-card:hover .rnk-universe-card__texture {
  transform: scale(1.04);
}

/* Corps texte */
.rnk-universe-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--rnk-spacing-xxs);
  padding: var(--rnk-spacing-lg) var(--rnk-spacing-lg) var(--rnk-spacing-md);
  flex: 1;
}
.rnk-universe-card__title {
  font-family: var(--rnk-font-heading);
  font-size: 1.5rem;
  font-weight: var(--rnk-fw-bold);
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--rnk-color-text);
}
.rnk-universe-card__tagline {
  font-size: 0.875rem;
  color: var(--rnk-color-text-muted);
  font-style: italic;
  margin: 0;
  line-height: 1.4;
}
.rnk-universe-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: var(--rnk-spacing-md);
  font-size: 0.75rem;
  font-weight: var(--rnk-fw-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rnk-universe-tone, var(--rnk-color-accent));
  transition: gap var(--rnk-transition-base);
}
.rnk-universe-card:hover .rnk-universe-card__cta { gap: 0.7em; }

/* Couleurs par univers ──────────────────────────────────────────────── */
.rnk-universe-card--horreur {
  --rnk-universe-dark: #1e1c1c;
  --rnk-universe-tone: #a8203a;
  --rnk-universe-shadow: rgba(168, 32, 58, 0.18);
}
.rnk-universe-card--fantasy {
  --rnk-universe-dark: #1c2818;
  --rnk-universe-tone: #806410;
  --rnk-universe-shadow: rgba(200, 168, 80, 0.18);
}
.rnk-universe-card--dark-romance {
  --rnk-universe-dark: #1e1528;
  --rnk-universe-tone: #9b4669;
  --rnk-universe-shadow: rgba(200, 122, 154, 0.18);
}
.rnk-universe-card--manga {
  --rnk-universe-dark: #0e1420;
  --rnk-universe-tone: #b53519;
  --rnk-universe-shadow: rgba(212, 74, 40, 0.18);
}
.rnk-universe-card--witchy {
  --rnk-universe-dark: #1a1020;
  --rnk-universe-tone: #704096;
  --rnk-universe-shadow: rgba(152, 104, 200, 0.18);
}
.rnk-universe-card--tattoo {
  --rnk-universe-dark: #1a1a12;
  --rnk-universe-tone: #974910;
  --rnk-universe-shadow: rgba(200, 120, 58, 0.18);
}
.rnk-universe-card--cosy {
  --rnk-universe-dark: #161c10;
  --rnk-universe-tone: #526f35;
  --rnk-universe-shadow: rgba(122, 158, 90, 0.18);
}


/* Réassurance */
.rnk-reassurance-grid {
  display: grid;
  gap: var(--rnk-spacing-lg);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 36rem) { .rnk-reassurance-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .rnk-reassurance-grid { grid-template-columns: repeat(5, 1fr); } }
.rnk-reassurance__item { text-align: center; }
.rnk-reassurance__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem; height: 3rem;
  margin-bottom: var(--rnk-spacing-sm);
  border-radius: var(--rnk-radius-md);
  background-color: var(--rnk-color-accent-soft);
  color: var(--rnk-color-accent);
}
.rnk-reassurance__title { font-family: var(--rnk-font-body); font-size: 0.875rem; font-weight: var(--rnk-fw-medium); margin: 0 0 0.125rem; }
.rnk-reassurance__desc  { font-size: 0.75rem; color: var(--rnk-color-text-muted); margin: 0; }


/* Format help (category) ---------------------------------------------------
   Bloc d'aide compact affiché entre le hero de la catégorie et la grille
   produits. Objectif : aider l'utilisateur à valider que le format
   correspond à son usage avant d'explorer les produits.

   - Compact : padding contenus, typographie ramenée à 0.875rem pour le corps.
   - Cohérent : carte sur surface, bordure 1px et radius alignés sur les
     autres cards (format-card, event-card).
   - Mobile-first : pile en colonne (titre+texte, puis points), passe sur
     deux colonnes à 36rem pour économiser la hauteur sans imposer de
     scroll horizontal.                                                   */
.rnk-format-help {
  display: grid;
  gap: var(--rnk-spacing-md);
  padding: var(--rnk-spacing-md) var(--rnk-spacing-lg);
  background-color: var(--rnk-color-surface);
  border: 1px solid var(--rnk-color-border);
  border-radius: var(--rnk-radius-lg);
  box-shadow: var(--rnk-shadow-sm);
}
@media (min-width: 36rem) {
  .rnk-format-help {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--rnk-spacing-lg);
    align-items: start;
    padding: var(--rnk-spacing-lg) var(--rnk-spacing-xl);
  }
}
.rnk-format-help__body { min-width: 0; }
.rnk-format-help__title {
  font-family: var(--rnk-font-body);
  font-size: 0.8125rem;
  font-weight: var(--rnk-fw-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rnk-color-text-muted);
  margin: 0 0 var(--rnk-spacing-xs);
}
.rnk-format-help__text {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--rnk-color-text);
  margin: 0 0 var(--rnk-spacing-sm);
}
.rnk-format-help__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.8125rem;
  font-weight: var(--rnk-fw-medium);
  color: var(--rnk-color-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--rnk-transition-fast);
}
.rnk-format-help__link:hover,
.rnk-format-help__link:focus-visible {
  color: var(--rnk-color-accent-hover);
}
.rnk-format-help__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  align-content: start;
}
.rnk-format-help__points li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.8125rem;
  color: var(--rnk-color-text-soft);
  line-height: 1.5;
}
.rnk-format-help__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background-color: var(--rnk-color-accent);
}


/* Atelier */
.rnk-atelier__grid { display: grid; gap: var(--rnk-spacing-xl); align-items: center; }
@media (min-width: 64rem) { .rnk-atelier__grid { grid-template-columns: 1fr 1fr; gap: var(--rnk-spacing-2xl); } }
.rnk-atelier__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, var(--rnk-color-fantasy) 0%, var(--rnk-color-dark) 100%);
  background-size: cover;
  background-position: center;
  border-radius: var(--rnk-radius-xl);
  display: flex; align-items: center; justify-content: center;
  color: var(--rnk-color-dark-text);
  font-family: var(--rnk-font-heading);
  overflow: hidden;
  box-shadow: 0 12px 40px oklch(0.2 0.02 30 / 0.15);
}
.rnk-atelier__media[style*="--rnk-bg-image"] {
  background-image: var(--rnk-bg-image);
}
.rnk-atelier__media[style*="background-image"] > *,
.rnk-atelier__media[style*="--rnk-bg-image"] > * {
  display: none;
}
.rnk-atelier__media[style*="background-image"] > .rnk-atelier__caption,
.rnk-atelier__media[style*="--rnk-bg-image"] > .rnk-atelier__caption {
  display: inline-block;
}
.rnk-atelier__caption {
  position: absolute;
  left: var(--rnk-spacing-md);
  bottom: var(--rnk-spacing-md);
  padding: 0.375rem 0.75rem;
  font-family: var(--rnk-font-body);
  font-size: 0.75rem;
  font-weight: var(--rnk-fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rnk-color-dark-text);
  background-color: oklch(0.2 0.02 30 / 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--rnk-radius-sm, 0.375rem);
}
.rnk-atelier__content { display: flex; flex-direction: column; }
.rnk-atelier__intro {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--rnk-color-text-muted);
  max-width: 52ch;
  margin: 0 0 var(--rnk-spacing-lg);
}
.rnk-feature-list { display: flex; flex-direction: column; gap: var(--rnk-spacing-lg); }
.rnk-feature-list--two-cols { display: grid; grid-template-columns: 1fr; gap: var(--rnk-spacing-lg) var(--rnk-spacing-md); }
@media (min-width: 36rem) {
  .rnk-feature-list--two-cols { grid-template-columns: 1fr 1fr; }
}
.rnk-feature { display: flex; gap: var(--rnk-spacing-md); align-items: flex-start; }
.rnk-feature__icon {
  flex-shrink: 0;
  width: 2.5rem; height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rnk-radius-md);
  background-color: var(--rnk-color-secondary-soft);
  color: var(--rnk-color-secondary);
}
.rnk-feature__title { font-family: var(--rnk-font-body); font-size: 1rem; font-weight: var(--rnk-fw-medium); margin: 0 0 var(--rnk-spacing-xxs); }
.rnk-feature__desc  { font-size: 0.875rem; color: var(--rnk-color-text-muted); margin: 0; }

.rnk-atelier__cta { margin-top: var(--rnk-spacing-lg); margin-bottom: 0; }


/* Salons */
.rnk-salons__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem; height: 4rem;
  border-radius: var(--rnk-radius-pill);
  background-color: rgba(247, 247, 245, 0.18);
  margin-bottom: var(--rnk-spacing-md);
}
.rnk-salons__title { color: inherit; margin-bottom: var(--rnk-spacing-md); letter-spacing: -0.005em; }
.rnk-salons__lead {
  max-width: 36rem;
  margin: 0 auto var(--rnk-spacing-lg);
  opacity: 0.9;
}

/* Newsletter */
.rnk-newsletter__form {
  display: flex; gap: var(--rnk-spacing-xs);
  max-width: 28rem;
  margin: var(--rnk-spacing-lg) auto 0;
  flex-wrap: wrap;
}
.rnk-newsletter__input {
  flex: 1; min-width: 14rem;
  padding: 0.625rem var(--rnk-field-padding-x);
  border: 1px solid var(--rnk-field-border);
  border-radius: var(--rnk-field-radius);
  background-color: var(--rnk-color-surface);
  font-size: 1rem;
  min-height: var(--rnk-field-height);
  box-shadow: inset 0 1px 1px rgba(30, 30, 30, 0.025);
  transition: border-color var(--rnk-transition-fast), box-shadow var(--rnk-transition-fast), background-color var(--rnk-transition-fast);
}
.rnk-newsletter__input:hover { border-color: var(--rnk-field-border-hover); }
.rnk-newsletter__input:focus {
  outline: 0;
  border-color: var(--rnk-color-accent);
  box-shadow: var(--rnk-field-focus-shadow);
}
.rnk-newsletter__input::placeholder { color: var(--rnk-field-placeholder); opacity: 1; }
.rnk-newsletter__feedback {
  margin-top: var(--rnk-spacing-sm);
  font-size: 0.875rem;
  min-height: 1.25rem;
}
.rnk-newsletter__feedback[data-rnk-state="success"] { color: var(--rnk-color-success); }
.rnk-newsletter__feedback[data-rnk-state="error"]   { color: var(--rnk-color-danger); }


/* ─── Grille produits / carte produit ───────────────────────────────── */
/* Mobile-first : 1 col sur narrow / standard mobile (< 30rem),
   2 col sur phablette / tablette, 3 col sur desktop, 4 col sur large desktop. */
.rnk-product-grid {
  display: grid;
  gap: var(--rnk-spacing-lg) var(--rnk-spacing-md);
  grid-template-columns: 1fr;
}
@media (min-width: 30rem) { .rnk-product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--rnk-spacing-lg) var(--rnk-spacing-md); } }
@media (min-width: 64rem) { .rnk-product-grid { grid-template-columns: repeat(3, 1fr); gap: var(--rnk-spacing-xl) var(--rnk-spacing-lg); } }
@media (min-width: 80rem) { .rnk-product-grid { grid-template-columns: repeat(4, 1fr); gap: var(--rnk-spacing-xl) var(--rnk-spacing-lg); } }

.rnk-product-card { display: flex; flex-direction: column; position: relative; }
.rnk-product-card__link {
  color: inherit;
  text-decoration: none;
  outline: none;
}
.rnk-product-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.rnk-product-card__link:hover { color: var(--rnk-color-accent); }
.rnk-product-card__media {
  position: relative;
  aspect-ratio: 405 / 510;
  background-color: var(--rnk-color-bg-alt);
  border-radius: var(--rnk-radius-md);
  overflow: hidden;
  margin-bottom: var(--rnk-spacing-sm);
  isolation: isolate;
}
.rnk-product-card__image {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--rnk-transition-base);
}
.woocommerce .rnk-product-card__media > img.rnk-product-card__image {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}
.rnk-product-card:hover .rnk-product-card__image { transform: scale(1.03); }

.rnk-product-card__placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rnk-color-text-soft);
  font-family: var(--rnk-font-heading);
  font-size: 1rem;
  background:
    repeating-linear-gradient(45deg,
      var(--rnk-color-bg-alt),
      var(--rnk-color-bg-alt) 12px,
      var(--rnk-color-border) 12px,
      var(--rnk-color-border) 13px);
  text-align: center;
  padding: var(--rnk-spacing-md);
}

.rnk-product-card__badges {
  position: absolute;
  top: var(--rnk-spacing-sm);
  left: var(--rnk-spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--rnk-spacing-xxs);
  align-items: flex-start;
  z-index: 2;
}

/* Discreet hover/focus CTA inside the media. Pure affordance, click still
   hits the full-card link. */
.rnk-product-card__media::after {
  content: "Voir le produit";
  position: absolute;
  inset-inline-start: var(--rnk-spacing-sm);
  inset-block-end: var(--rnk-spacing-sm);
  padding: 0.4375rem 0.75rem;
  font-family: var(--rnk-font-body);
  font-size: 0.75rem;
  font-weight: var(--rnk-fw-medium);
  letter-spacing: 0.04em;
  color: var(--rnk-color-text);
  background-color: var(--rnk-color-surface);
  border-radius: var(--rnk-radius-pill);
  box-shadow: var(--rnk-shadow-sm);
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.25s var(--rnk-ease-out-quart),
    transform 0.25s var(--rnk-ease-out-quart);
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
}
.rnk-product-card:hover .rnk-product-card__media::after,
.rnk-product-card:focus-within .rnk-product-card__media::after {
  opacity: 1;
  transform: translateY(0);
}
/* Hide the CTA on sold cards. Nothing to "see" makes more sense here. */
.rnk-product-card--sold .rnk-product-card__media::after { content: none; }

.rnk-product-card__category {
  font-family: var(--rnk-font-body);
  font-size: 0.6875rem;
  color: var(--rnk-color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--rnk-spacing-xxs);
}
.rnk-product-card__title {
  font-family: var(--rnk-font-body);
  font-size: 0.9375rem;
  font-weight: var(--rnk-fw-medium);
  line-height: 1.4;
  margin: 0 0 var(--rnk-spacing-xs);
  color: var(--rnk-color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
          line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--rnk-transition-fast);
}
.rnk-product-card:hover .rnk-product-card__title,
.rnk-product-card:has(.rnk-product-card__link:hover) .rnk-product-card__title,
.rnk-product-card:has(a:hover) .rnk-product-card__title { color: var(--rnk-color-accent); }
.rnk-product-card__footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rnk-spacing-xs);
}

.rnk-price { font-size: 1rem; font-weight: var(--rnk-fw-medium); color: var(--rnk-color-text); }
.rnk-price__amount { font-variant-numeric: tabular-nums; }
.rnk-price__old {
  font-size: 0.8125rem;
  color: var(--rnk-color-text-soft);
  text-decoration: line-through;
  margin-right: var(--rnk-spacing-xs);
}

/* Sold: paper veil + desaturation. Reads clearly without dimming the
   image into uselessness. Cross diagonal hints at "indisponible" without
   shouting. */
.rnk-product-card--sold .rnk-product-card__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: oklch(0.97 0.005 80 / 0.55);
  z-index: 1;
  pointer-events: none;
  transition: background-color 0.3s var(--rnk-ease-out-quart);
}
.rnk-product-card--sold .rnk-product-card__media > .rnk-product-card__image,
.rnk-product-card--sold .rnk-product-card__media > .rnk-product-card__placeholder {
  filter: grayscale(0.55);
  transition: filter 0.3s var(--rnk-ease-out-quart);
}
.rnk-product-card--sold .rnk-product-card__title  { color: var(--rnk-color-text-muted); }
.rnk-product-card--sold .rnk-price                { color: var(--rnk-color-text-muted); text-decoration: line-through; }

/* Rarity affordance: a hairline inset ring on the media. Discreet,
   tactile, no second badge. Terracotta-tinted for "Pièce unique",
   neutral for "Petite série". Activates from the badge type already
   in the markup, so all existing cards benefit. */
.rnk-product-card:has(.rnk-badge--series) .rnk-product-card__media {
  box-shadow: inset 0 0 0 1px var(--rnk-color-border-strong);
}
.rnk-product-card:has(.rnk-badge--unique) .rnk-product-card__media {
  box-shadow: inset 0 0 0 1px oklch(0.65 0.10 40 / 0.55);
}
/* Sold cards drop the rarity ring - the "Vendu" treatment leads. */
.rnk-product-card--sold:has(.rnk-badge--unique) .rnk-product-card__media,
.rnk-product-card--sold:has(.rnk-badge--series) .rnk-product-card__media {
  box-shadow: none;
}

/* Keyboard focus on the in-card link: ring the media instead of the bare
   link. Clearer target, kinder to mouse + keyboard users alike. */
.rnk-product-card:has(a:focus-visible) .rnk-product-card__media {
  outline: 2px solid var(--rnk-color-accent);
  outline-offset: 3px;
}
.rnk-product-card:has(a:focus-visible) .rnk-product-card__title {
  color: var(--rnk-color-accent);
}
/* Suppress the default link outline so we don't get a doubled ring.
   The card-level outline above is the visible focus indicator. */
.rnk-product-card a:focus { outline: none; }
.rnk-product-card a:focus-visible { outline: none; }


/* ─── Sticky bar produit (mobile) ───────────────────────────────────── */
.rnk-sticky-bar {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  background-color: var(--rnk-color-surface);
  border-top: 1px solid var(--rnk-color-border);
  box-shadow: 0 -4px 12px rgba(30, 30, 30, 0.05);
  padding: var(--rnk-spacing-sm) var(--rnk-spacing-md);
  display: flex;
  align-items: center;
  gap: var(--rnk-spacing-sm);
  z-index: 40;
  transform: translateY(100%);
  transition: transform var(--rnk-transition-base);
}
.rnk-sticky-bar[data-rnk-visible="true"] { transform: translateY(0); }
.rnk-sticky-bar__info { flex: 1; min-width: 0; }
.rnk-sticky-bar__name {
  font-size: 0.8125rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rnk-sticky-bar__price { font-weight: var(--rnk-fw-medium); }
@media (min-width: 64rem) { .rnk-sticky-bar { display: none; } }


/* ─── Filtres / breadcrumb / pagination ─────────────────────────────── */
.rnk-filter-bar { background-color: var(--rnk-color-bg); border-bottom: 1px solid var(--rnk-color-border); }
.rnk-filter-bar__inner {
  display: flex; flex-direction: column; gap: var(--rnk-spacing-xs);
  padding: var(--rnk-spacing-sm) var(--rnk-spacing-lg);
}
@media (min-width: 64rem) {
  .rnk-filter-bar__inner { padding: var(--rnk-spacing-sm) var(--rnk-spacing-xl); }
}
.rnk-filter-bar__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--rnk-spacing-xxs) + 0.075rem);
  padding-bottom: var(--rnk-spacing-xs);
}
.rnk-filter-bar__row:last-child {
  padding-bottom: 0;
}
.rnk-filter-bar__label {
  font-size: 0.6875rem;
  color: var(--rnk-color-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: var(--rnk-spacing-xs);
  min-width: 5.5rem;
}

.rnk-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--rnk-spacing-xxs);
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--rnk-color-border);
  background-color: transparent;
  color: var(--rnk-color-text);
  font-size: 0.75rem;
  font-weight: var(--rnk-fw-normal);
  border-radius: var(--rnk-radius-sm);
  transition: all var(--rnk-transition-fast);
  min-height: auto;
  line-height: 1.4;
}
.rnk-filter-chip:hover { border-color: var(--rnk-color-border-strong); color: var(--rnk-color-text); }
.rnk-filter-chip[aria-pressed="true"] {
  background-color: #6b6b66;
  color: var(--rnk-color-dark-text);
  border-color: #6b6b66;
}
.rnk-filter-chip--accent[aria-pressed="true"] {
  background-color: #6b6b66;
  border-color: #6b6b66;
}

.rnk-filter-bar__meta {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--rnk-spacing-sm);
  font-size: 0.875rem;
  color: var(--rnk-color-text-muted);
}
.rnk-filter-bar__sort {
  min-height: var(--rnk-control-height);
  padding: 0.625rem 2.5rem 0.625rem var(--rnk-control-padding-x);
  border: 1px solid var(--rnk-field-border);
  background-color: var(--rnk-color-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231e1e1e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1rem;
  border-radius: var(--rnk-control-radius);
  font-size: var(--rnk-control-font-size);
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--rnk-transition-fast), box-shadow var(--rnk-transition-fast);
}
.rnk-filter-bar__sort:hover { border-color: var(--rnk-field-border-hover); }
.rnk-filter-bar__sort:focus-visible { outline: 0; border-color: var(--rnk-color-accent); box-shadow: var(--rnk-field-focus-shadow); }

.rnk-filter-bar__mobile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rnk-spacing-sm);
  padding: var(--rnk-spacing-sm) 0;
}
.rnk-filter-bar__rows {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--rnk-ease-out-quart);
  overflow: hidden;
}
.rnk-filter-bar__rows > .rnk-filter-bar__rows-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--rnk-spacing-xs);
}
.rnk-filter-bar__rows-inner > .rnk-button {
  margin-top: var(--rnk-spacing-xxs);
}
.rnk-filter-bar__rows[data-rnk-open="true"] {
  grid-template-rows: 1fr;
  padding-block-end: var(--rnk-spacing-sm);
}


.rnk-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rnk-spacing-xxs);
  font-size: 0.7rem;
  color: var(--rnk-color-text-muted);
}
.rnk-breadcrumb a:hover { color: var(--rnk-color-accent); }
.rnk-breadcrumb__sep { opacity: 0.6; }


.rnk-pagination {
  display: flex;
  justify-content: center;
  gap: var(--rnk-spacing-xs);
  margin-top: var(--rnk-spacing-xl);
}
@media (min-width: 48rem) { .rnk-pagination { margin-top: var(--rnk-spacing-2xl); } }


/* ─── Galerie produit ───────────────────────────────────────────────── */
.rnk-gallery { display: flex; flex-direction: column; gap: var(--rnk-spacing-sm); }
.rnk-gallery__main {
  position: relative;
  aspect-ratio: 1 / 1;
  background-color: var(--rnk-color-bg-alt);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--rnk-color-border);
  border-radius: var(--rnk-radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rnk-gallery__main > .rnk-product-card__placeholder { display: none; }
.rnk-gallery__main--has-image > .rnk-product-card__placeholder { display: none; }
.rnk-gallery__main:not([style*="background-image"]):not([style*="--rnk-bg-image"]) > .rnk-product-card__placeholder { display: flex; }
.rnk-gallery__caption {
  position: absolute;
  bottom: var(--rnk-spacing-sm);
  left: var(--rnk-spacing-sm);
  background-color: rgba(247, 247, 245, 0.9);
  border: 1px solid var(--rnk-color-border);
  padding: 0.375rem 0.75rem;
  border-radius: var(--rnk-radius-pill);
  font-size: 0.75rem;
  color: var(--rnk-color-text-muted);
}
.rnk-gallery__nav {
  position: absolute;
  top: 50%;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--rnk-radius-pill);
  background-color: rgba(247, 247, 245, 0.9);
  border: 1px solid var(--rnk-color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
}
.rnk-gallery__nav:hover { background-color: var(--rnk-color-surface); }
.rnk-gallery__nav--prev { left: var(--rnk-spacing-sm); }
.rnk-gallery__nav--next { right: var(--rnk-spacing-sm); }

.rnk-gallery__thumbs {
  display: flex;
  gap: var(--rnk-spacing-xs);
  overflow-x: auto;
  padding-bottom: 2px;
}
.rnk-gallery__thumb {
  flex-shrink: 0;
  width: 4.5rem; height: 4.5rem;
  border: 2px solid var(--rnk-color-border);
  background-color: var(--rnk-color-bg-alt);
  background-size: cover;
  background-position: center;
  border-radius: var(--rnk-radius-md);
  overflow: hidden;
  transition: border-color var(--rnk-transition-fast);
}
.rnk-gallery__thumb:hover { border-color: var(--rnk-color-accent); }
.rnk-gallery__thumb[aria-current="true"] { border-color: var(--rnk-color-accent); }


/* ─── Accordéon ─────────────────────────────────────────────────────── */
.rnk-accordion {
  border: 1px solid var(--rnk-color-border);
  border-radius: var(--rnk-radius-lg);
  overflow: hidden;
  background-color: var(--rnk-color-surface);
}
.rnk-accordion__item + .rnk-accordion__item { border-top: 1px solid var(--rnk-color-border); }
.rnk-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rnk-spacing-sm);
  padding: var(--rnk-spacing-md) var(--rnk-spacing-lg);
  text-align: left;
  font-size: 0.9375rem;
  font-weight: var(--rnk-fw-medium);
  transition: background-color var(--rnk-transition-fast);
}
.rnk-accordion__trigger:hover { background-color: var(--rnk-color-bg-alt); }
.rnk-accordion__icon { width: 1rem; height: 1rem; transition: transform var(--rnk-transition-fast); }
.rnk-accordion__trigger[aria-expanded="true"] .rnk-accordion__icon { transform: rotate(180deg); }
.rnk-accordion__panel {
  padding: 0 var(--rnk-spacing-lg) var(--rnk-spacing-lg);
  font-size: 0.9375rem;
  color: var(--rnk-color-text-muted);
  line-height: 1.7;
}
.rnk-accordion__panel[hidden] { display: none; }
.rnk-accordion__panel ul { list-style: disc; padding-left: 1.25rem; margin: var(--rnk-spacing-sm) 0; }
.rnk-accordion__panel li + li { margin-top: var(--rnk-spacing-xxs); }


/* ─── Fiche produit (single) ────────────────────────────────────────── */
.rnk-product-layout { display: grid; gap: var(--rnk-spacing-xl); }
@media (min-width: 64rem) {
  .rnk-product-layout { grid-template-columns: minmax(0, 1fr) 28rem; gap: var(--rnk-spacing-2xl); align-items: start; }
}
.rnk-product-layout--details > * { grid-column: 1 / 2; min-width: 0; }
.rnk-product-info { display: flex; flex-direction: column; gap: var(--rnk-spacing-md); }
.rnk-product-info__title { margin: 0; }
.rnk-product-info__price { font-family: var(--rnk-font-heading); font-size: 2rem; margin: 0; }
.rnk-product-info__tax   { font-size: 0.8125rem; color: var(--rnk-color-text-muted); }
.rnk-product-info__intro { font-size: 1rem; color: var(--rnk-color-text-muted); line-height: 1.7; margin: 0; }

.rnk-feature-tags { display: flex; flex-wrap: wrap; gap: var(--rnk-spacing-xs); }

.rnk-quantity {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--rnk-color-border-strong);
  border-radius: var(--rnk-radius-md);
  overflow: hidden;
  height: 2.75rem;
}
.rnk-quantity__button {
  width: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  background-color: var(--rnk-color-bg);
}
.rnk-quantity__button:hover { background-color: var(--rnk-color-bg-alt); }
.rnk-quantity__value {
  width: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--rnk-fw-medium);
  font-variant-numeric: tabular-nums;
}

.rnk-purchase { display: flex; flex-direction: column; gap: var(--rnk-spacing-sm); }
@media (min-width: 36rem) { .rnk-purchase { flex-direction: row; } }

/* Trust list - bloc réassurance vertical dans la colonne fiche produit */
.rnk-trust-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 1px solid var(--rnk-color-border);
  border-radius: var(--rnk-radius-lg);
  background-color: var(--rnk-color-surface);
  overflow: hidden;
}
.rnk-trust-list__item {
  display: flex;
  align-items: center;
  gap: var(--rnk-spacing-sm);
  padding: var(--rnk-spacing-sm) var(--rnk-spacing-md);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--rnk-color-text);
}
.rnk-trust-list__item + .rnk-trust-list__item {
  border-top: 1px solid var(--rnk-color-border);
}
.rnk-trust-list__icon {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--rnk-color-accent);
}


/* ─── Footer ─────────────────────────────────────────────────────────── */
.rnk-site-footer {
  background-color: var(--rnk-color-dark);
  color: var(--rnk-color-dark-text);
  padding-block: var(--rnk-spacing-2xl);
}
@media (min-width: 64rem) { .rnk-site-footer { padding-block: var(--rnk-spacing-3xl) var(--rnk-spacing-2xl); } }
.rnk-site-footer__grid {
  display: grid;
  gap: var(--rnk-spacing-xl);
  grid-template-columns: 1fr;
}
@media (min-width: 36rem) { .rnk-site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 48rem) { .rnk-site-footer__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) {
  .rnk-site-footer__grid {
    /* Marque large + 5 colonnes de navigation alignées. */
    grid-template-columns: 1.6fr repeat(5, 1fr);
    gap: var(--rnk-spacing-2xl);
    align-items: start;
  }
}
.rnk-site-footer__title {
  font-family: var(--rnk-font-heading);
  font-size: 1.25rem;
  margin: 0 0 var(--rnk-spacing-md);
  color: var(--rnk-color-dark-text);
}
.rnk-site-footer__brand {
  max-width: 22rem;
}
.rnk-site-footer__logo {
  height: 5rem;
  width: auto;
  display: block;
  margin-bottom: var(--rnk-spacing-lg);
}
.rnk-site-footer__tagline {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  opacity: 0.78;
}
.rnk-site-footer__heading {
  font-family: var(--rnk-font-body);
  font-size: 0.8125rem;
  font-weight: var(--rnk-fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rnk-color-dark-text);
  margin: 0 0 var(--rnk-spacing-md);
  opacity: 0.9;
}
.rnk-site-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--rnk-spacing-sm);
  font-size: 0.875rem;
  line-height: 1.5;
}
.rnk-site-footer__list a { color: var(--rnk-color-dark-text); opacity: 0.78; transition: opacity var(--rnk-transition-fast); }
.rnk-site-footer__list a:hover { opacity: 1; color: var(--rnk-color-dark-text); text-decoration: underline; }

.rnk-site-footer__social { display: flex; gap: var(--rnk-spacing-sm); margin-top: var(--rnk-spacing-lg); }
.rnk-site-footer__social a {
  display: inline-flex;
  width: 2.5rem; height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--rnk-radius-md);
  border: 1px solid rgba(247, 247, 245, 0.25);
  color: var(--rnk-color-dark-text);
  transition: background-color var(--rnk-transition-fast),
              border-color var(--rnk-transition-fast),
              transform var(--rnk-transition-fast);
}
.rnk-site-footer__social a:hover {
  background-color: rgba(247, 247, 245, 0.1);
  border-color: rgba(247, 247, 245, 0.5);
  transform: translateY(-2px);
}

.rnk-site-footer__bottom {
  border-top: 1px solid rgba(247, 247, 245, 0.12);
  margin-top: var(--rnk-spacing-2xl);
  padding-top: var(--rnk-spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--rnk-spacing-xs);
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  opacity: 0.7;
  text-align: center;
}
.rnk-site-footer__bottom small { color: var(--rnk-color-dark-text); }
@media (min-width: 48rem) { .rnk-site-footer__bottom { flex-direction: row; text-align: start; } }


/* =========================================================================
   Pages spécifiques (cart, checkout, account, légal, etc.)
   ========================================================================= */

/* Cart layout */
.rnk-cart-layout { display: grid; gap: var(--rnk-spacing-xl); }
@media (min-width: 64rem) {
  .rnk-cart-layout { grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--rnk-spacing-2xl); align-items: start; }
}

.rnk-cart-item {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: var(--rnk-spacing-md);
  padding: var(--rnk-spacing-md);
  background-color: var(--rnk-color-surface);
  border: 1px solid var(--rnk-color-border);
  border-radius: var(--rnk-radius-md);
}
@media (min-width: 36rem) { .rnk-cart-item { grid-template-columns: 6rem 1fr; } }
.rnk-cart-item__media {
  aspect-ratio: 3 / 4;
  background-color: var(--rnk-color-bg-alt);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--rnk-color-border);
  border-radius: var(--rnk-radius-sm);
}
.rnk-cart-item__title {
  font-family: var(--rnk-font-body);
  font-size: 0.9375rem;
  font-weight: var(--rnk-fw-medium);
  margin: 0 0 var(--rnk-spacing-xxs);
  line-height: 1.4;
}
.rnk-cart-item__meta {
  font-size: 0.75rem;
  color: var(--rnk-color-text-muted);
  margin-bottom: var(--rnk-spacing-xs);
}
.rnk-cart-item__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rnk-spacing-sm);
  margin-top: var(--rnk-spacing-sm);
  flex-wrap: wrap;
}

.rnk-cart-summary {
  background-color: var(--rnk-color-surface);
  border: 1px solid var(--rnk-color-border);
  border-radius: var(--rnk-radius-md);
  padding: var(--rnk-spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--rnk-spacing-md);
}
.rnk-cart-summary__line {
  display: flex;
  justify-content: space-between;
  font-size: 0.9375rem;
  color: var(--rnk-color-text-muted);
}
.rnk-cart-summary__line strong { color: var(--rnk-color-text); }
.rnk-cart-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--rnk-spacing-md);
  border-top: 1px solid var(--rnk-color-border);
  font-family: var(--rnk-font-heading);
  font-size: 1.5rem;
}

/* Checkout */
.rnk-checkout-layout { display: grid; gap: var(--rnk-spacing-xl); }
@media (min-width: 64rem) { .rnk-checkout-layout { grid-template-columns: minmax(0, 1fr) 22rem; } }

.rnk-form-section { margin-bottom: var(--rnk-spacing-xl); }
.rnk-form-section__title {
  display: flex;
  align-items: center;
  gap: var(--rnk-spacing-sm);
  margin-bottom: var(--rnk-spacing-md);
  font-family: var(--rnk-font-body);
  font-size: 1rem;
  font-weight: var(--rnk-fw-medium);
}
.rnk-form-step {
  display: inline-flex;
  width: 1.75rem; height: 1.75rem;
  align-items: center;
  justify-content: center;
  background-color: var(--rnk-color-dark);
  color: var(--rnk-color-dark-text);
  border-radius: var(--rnk-radius-pill);
  font-size: 0.8125rem;
}

.rnk-field { margin-bottom: var(--rnk-spacing-md); }
.rnk-field__row { display: flex; gap: var(--rnk-spacing-sm); flex-wrap: wrap; }
.rnk-field__row > .rnk-field { flex: 1 1 12rem; margin-bottom: 0; }
.rnk-field__label {
  display: block;
  font-size: 0.875rem;
  font-weight: var(--rnk-fw-bold);
  line-height: 1.4;
  color: var(--rnk-color-text);
  margin-bottom: 0.5rem;
}
.rnk-field__input,
.rnk-field__textarea,
.rnk-field__select {
  width: 100%;
  padding: 0.625rem var(--rnk-field-padding-x);
  background-color: var(--rnk-color-surface);
  border: 1px solid var(--rnk-field-border);
  border-radius: var(--rnk-field-radius);
  box-shadow: inset 0 1px 1px rgba(30, 30, 30, 0.025);
  font-size: 1rem;
  line-height: 1.5;
  min-height: var(--rnk-field-height);
  transition: border-color var(--rnk-transition-fast), box-shadow var(--rnk-transition-fast), background-color var(--rnk-transition-fast);
}
.rnk-field__input::placeholder,
.rnk-field__textarea::placeholder { color: var(--rnk-field-placeholder); opacity: 1; }
.rnk-field__input:hover,
.rnk-field__textarea:hover,
.rnk-field__select:hover { border-color: var(--rnk-field-border-hover); }
.rnk-field__textarea { min-height: 8rem; resize: vertical; }
.rnk-field__select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231e1e1e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 0.9rem center;
  background-repeat: no-repeat;
  background-size: 1.15rem;
}
.rnk-field__input:focus,
.rnk-field__textarea:focus,
.rnk-field__select:focus {
  border-color: var(--rnk-color-accent);
  outline: 0;
  box-shadow: var(--rnk-field-focus-shadow);
}
.rnk-field__input:disabled,
.rnk-field__textarea:disabled,
.rnk-field__select:disabled { background-color: var(--rnk-color-bg-alt); color: var(--rnk-color-text-muted); cursor: not-allowed; opacity: 1; }

.rnk-radio-card,
.rnk-checkbox-card {
  display: flex;
  align-items: flex-start;
  gap: var(--rnk-spacing-sm);
  padding: var(--rnk-spacing-md);
  border: 1px solid var(--rnk-color-border);
  border-radius: var(--rnk-radius-md);
  background-color: var(--rnk-color-surface);
  transition: border-color var(--rnk-transition-fast);
}
.rnk-radio-card:hover,
.rnk-checkbox-card:hover { border-color: var(--rnk-color-accent); }
.rnk-radio-card input,
.rnk-checkbox-card input { margin-top: 0.25rem; accent-color: var(--rnk-color-accent); }
.rnk-radio-card__title,
.rnk-checkbox-card__title { font-size: 0.9375rem; }
.rnk-radio-card__meta,
.rnk-checkbox-card__meta {
  font-size: 0.8125rem;
  color: var(--rnk-color-text-muted);
  display: block;
  margin-top: 0.125rem;
}
.rnk-radio-card__price { margin-left: auto; font-weight: var(--rnk-fw-medium); white-space: nowrap; }


/* Form-message (vanilla feedback) */
.rnk-form-message {
  padding: var(--rnk-spacing-sm) var(--rnk-spacing-md);
  border-radius: var(--rnk-radius-md);
  font-size: 0.875rem;
  border: 1px solid var(--rnk-color-border);
  background-color: var(--rnk-color-bg-alt);
}
.rnk-form-message[hidden] { display: none; }
.rnk-form-message[data-rnk-state="success"] {
  background-color: var(--rnk-color-secondary-soft);
  border-color: var(--rnk-color-secondary);
  color: var(--rnk-color-secondary);
}
.rnk-form-message[data-rnk-state="error"] {
  background-color: rgba(162, 59, 59, 0.08);
  border-color: var(--rnk-color-danger);
  color: var(--rnk-color-danger);
}


/* Account */
.rnk-account-layout { display: grid; gap: var(--rnk-spacing-xl); }
@media (min-width: 48rem) { .rnk-account-layout { grid-template-columns: 16rem 1fr; align-items: start; } }
.rnk-account-nav {
  display: grid;
  gap: 0.375rem;
  background-color: var(--rnk-color-bg-alt);
  border: 1px solid var(--rnk-color-border);
  border-radius: var(--rnk-radius-md);
  padding: var(--rnk-spacing-sm);
}
.rnk-account-nav__link {
  display: flex;
  align-items: center;
  gap: var(--rnk-spacing-sm);
  padding: var(--rnk-spacing-sm) var(--rnk-spacing-md);
  font-size: 0.9375rem;
  border-radius: var(--rnk-radius-sm);
}
.rnk-account-nav__icon {
  display: grid;
  flex: 0 0 1.25rem;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
}
.rnk-account-nav__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rnk-account-nav__link:hover { background-color: var(--rnk-color-surface); }
.rnk-account-nav__link--active {
  background-color: var(--rnk-color-surface);
  font-weight: var(--rnk-fw-medium);
  color: var(--rnk-color-accent);
}


/* Universe pages */
.rnk-universe-hero {
  position: relative;
  padding-block: var(--rnk-spacing-lg);
  color: var(--rnk-color-dark-text);
  background-color: var(--rnk-universe-bg, var(--rnk-color-dark));
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 48rem) { .rnk-universe-hero { padding-block: var(--rnk-spacing-xl); } }
@media (min-width: 64rem) { .rnk-universe-hero { padding-block: var(--rnk-spacing-xl); } }
.rnk-universe-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--rnk-universe-image, none);
  background-position: var(--rnk-universe-image-position, center center);
  background-repeat: no-repeat;
  background-size: var(--rnk-universe-image-size, cover);
  filter: saturate(0.72) contrast(0.92);
  opacity: 0.28;
}
.rnk-universe-hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(12, 12, 12, 0.78) 0%, rgba(12, 12, 12, 0.56) 52%, rgba(12, 12, 12, 0.34) 100%),
    radial-gradient(circle at 30% 30%, var(--rnk-universe-tone, var(--rnk-color-accent)) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, var(--rnk-universe-tone, var(--rnk-color-accent)) 0%, transparent 50%);
  opacity: 0.72;
}
.rnk-universe-hero > .rnk-container { position: relative; z-index: 1; }
.rnk-universe-hero__content { margin-top: var(--rnk-spacing-md); max-width: 48rem; }
.rnk-universe-hero .rnk-eyebrow { color: rgba(250, 248, 245, 0.85); }
.rnk-universe-hero h1 { color: inherit; }
.rnk-universe-hero p  { color: rgba(247, 247, 245, 0.85); }
.rnk-universe-hero .rnk-breadcrumb { color: rgba(250, 248, 245, 0.85); }
.rnk-universe-hero .rnk-breadcrumb a:hover { color: #fff; }
.rnk-section--dark .rnk-breadcrumb,
.rnk-section--accent .rnk-breadcrumb { color: rgba(250, 248, 245, 0.85); }
.rnk-section--dark .rnk-breadcrumb a:hover,
.rnk-section--accent .rnk-breadcrumb a:hover { color: #fff; }

.rnk-universe-hero--horreur      { --rnk-universe-tone: #a8203a; }
.rnk-universe-hero--fantasy      { --rnk-universe-tone: #c8a850; }
.rnk-universe-hero--dark-romance { --rnk-universe-tone: #c87a9a; }
.rnk-universe-hero--manga        { --rnk-universe-tone: #d44a28; }
.rnk-universe-hero--witchy       { --rnk-universe-tone: #9868c8; }
.rnk-universe-hero--tattoo       { --rnk-universe-tone: #c8783a; }
.rnk-universe-hero--cosy         { --rnk-universe-tone: #7a9e5a; }

/* Les heroes de pages reprennent l'intro sobre de Notre histoire.
   Les heroes des univers conservent leur traitement illustré dédié. */
.rnk-page-hero {
  position: relative;
  color: var(--rnk-color-dark-text);
  background-color: var(--rnk-color-dark);
  background-image: none;
  overflow: hidden;
  isolation: isolate;
}
.rnk-page-hero::before {
  content: none;
}
.rnk-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(12, 12, 12, 0.98) 0%, rgba(12, 12, 12, 0.9) 100%);
  opacity: 1;
  pointer-events: none;
}
.rnk-page-hero > .rnk-container {
  position: relative;
  z-index: 1;
  max-width: var(--rnk-container-max) !important;
}
.rnk-page-hero h1 { color: inherit; }
.rnk-page-hero p,
.rnk-page-hero .rnk-lead { color: rgba(247, 247, 245, 0.85); }
.rnk-page-hero .rnk-lead { max-width: 36rem; }
.rnk-page-hero .rnk-eyebrow { color: var(--rnk-color-accent-on-dark); }
.rnk-page-hero .rnk-breadcrumb { color: rgba(250, 248, 245, 0.6); }
.rnk-page-hero .rnk-breadcrumb [aria-current="page"] { color: var(--rnk-color-dark-text); }
.rnk-page-hero .rnk-breadcrumb a:hover { color: #fff; }

/* L'atelier conserve son identité noire, sans halo coloré. */
.rnk-story-intro {
  --rnk-page-hero-bg: var(--rnk-color-dark);
}
.rnk-story-intro::after {
  background: linear-gradient(90deg, rgba(12, 12, 12, 0.98) 0%, rgba(12, 12, 12, 0.9) 100%);
  opacity: 1;
}


/* FAQ */
.rnk-faq-category + .rnk-faq-category { margin-top: var(--rnk-spacing-xl); }
.rnk-faq-category__title {
  font-family: var(--rnk-font-heading);
  font-size: 1.25rem;
  margin: 0 0 var(--rnk-spacing-md);
  padding-bottom: var(--rnk-spacing-xs);
  border-bottom: 1px solid var(--rnk-color-border);
}


/* Contact */
.rnk-contact-layout { display: grid; gap: var(--rnk-spacing-xl); }
@media (min-width: 48rem) { .rnk-contact-layout { grid-template-columns: 1.5fr 1fr; align-items: start; } }


/* Page404 / maintenance */
.rnk-empty-state {
  max-width: 32rem;
  margin: var(--rnk-spacing-2xl) auto;
  text-align: center;
}
.rnk-empty-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5rem; height: 5rem;
  border-radius: var(--rnk-radius-pill);
  background-color: var(--rnk-color-bg-alt);
  margin: 0 auto var(--rnk-spacing-lg);
  font-family: var(--rnk-font-heading);
  font-size: 1.5rem;
  color: var(--rnk-color-text-muted);
}

/* 404 - traitement éditorial dédié */
.rnk-404 {
  max-width: 36rem;
  margin: var(--rnk-spacing-xl) auto var(--rnk-spacing-2xl);
  text-align: center;
  position: relative;
}
.rnk-404__number {
  display: block;
  font-family: var(--rnk-font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(6rem, 22vw, 12rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--rnk-color-accent);
  margin: 0 auto var(--rnk-spacing-md);
  /* dégradé sobre pour donner un peu de matière sans crier */
  background: linear-gradient(180deg, var(--rnk-color-accent) 0%, var(--rnk-color-accent-hover) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  user-select: none;
}
.rnk-404__rule {
  display: block;
  width: 3rem;
  height: 1px;
  background: var(--rnk-color-accent);
  margin: 0 auto var(--rnk-spacing-md);
  opacity: 0.6;
}
.rnk-404 h1 {
  font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
  margin-bottom: var(--rnk-spacing-sm);
}
.rnk-404__lead {
  color: var(--rnk-color-text-muted);
  max-width: 38ch;
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.65;
}
.rnk-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rnk-spacing-sm);
  justify-content: center;
  margin-top: var(--rnk-spacing-lg);
}
.rnk-404__suggest-title {
  font-family: var(--rnk-font-heading);
  font-style: italic;
  font-size: 1.5rem;
  text-align: center;
  margin: 0 0 var(--rnk-spacing-md);
  color: var(--rnk-color-text);
}
.rnk-404__suggest-eyebrow {
  display: block;
  text-align: center;
  font-family: var(--rnk-font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rnk-color-accent);
  margin-bottom: var(--rnk-spacing-xs);
}
.rnk-404__sign-off {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rnk-spacing-sm);
  margin-top: var(--rnk-spacing-2xl);
  font-size: 0.8125rem;
  color: var(--rnk-color-text-muted);
}
.rnk-404__sign-off::before,
.rnk-404__sign-off::after {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--rnk-color-border-strong);
}

@media (prefers-reduced-motion: no-preference) {
  .rnk-404__number {
    animation: rnk-404-fade 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .rnk-404 h1 { animation: rnk-404-rise 700ms 80ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .rnk-404__lead { animation: rnk-404-rise 700ms 160ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .rnk-404__actions { animation: rnk-404-rise 700ms 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
}
@keyframes rnk-404-fade {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
@keyframes rnk-404-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* Salon card */
.rnk-cards-grid {
  display: grid;
  gap: var(--rnk-spacing-lg);
  grid-template-columns: 1fr;
}
.rnk-cards-grid > li { display: flex; }
@media (min-width: 48rem) { .rnk-cards-grid { grid-template-columns: repeat(2, 1fr); gap: var(--rnk-spacing-lg); } }
@media (min-width: 64rem) { .rnk-cards-grid { grid-template-columns: repeat(2, 1fr); gap: var(--rnk-spacing-xl); } }

.rnk-event-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: var(--rnk-spacing-sm);
  padding: var(--rnk-spacing-lg) var(--rnk-spacing-lg) var(--rnk-spacing-xl);
  background-color: var(--rnk-color-surface);
  border: 1px solid var(--rnk-color-border);
  border-radius: var(--rnk-radius-lg);
  transition: border-color var(--rnk-transition-fast),
              box-shadow var(--rnk-transition-fast);
}
.rnk-event-card:hover {
  border-color: var(--rnk-color-border-strong);
  box-shadow: 0 4px 16px oklch(0.3 0.01 30 / 0.06);
}
.rnk-event-card__date {
  font-size: 0.8125rem;
  font-weight: var(--rnk-fw-medium);
  color: var(--rnk-color-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.rnk-event-card__title {
  font-family: var(--rnk-font-heading);
  font-size: 1.375rem;
  margin: 0;
}
.rnk-event-card__meta {
  font-size: 0.875rem;
  color: var(--rnk-color-text-muted);
  margin: 0;
}
.rnk-event-card .rnk-badge {
  align-self: flex-start;
}

/* Event card - enriched variant (salons page) */
.rnk-event-card--rich {
  gap: var(--rnk-spacing-sm);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  border-top: 3px solid var(--rnk-color-border);
}
.rnk-event-card--rich[data-rnk-universe="horreur"]      { border-top-color: oklch(0.55 0.18 15); }
.rnk-event-card--rich[data-rnk-universe="fantasy"]      { border-top-color: oklch(0.7 0.12 90); }
.rnk-event-card--rich[data-rnk-universe="dark-romance"] { border-top-color: oklch(0.7 0.1 350); }
.rnk-event-card--rich[data-rnk-universe="manga"]        { border-top-color: oklch(0.65 0.18 35); }
.rnk-event-card--rich[data-rnk-universe="witchy"]       { border-top-color: oklch(0.6 0.15 290); }
.rnk-event-card--rich[data-rnk-universe="tattoo"]       { border-top-color: oklch(0.6 0.13 55); }
.rnk-event-card--rich[data-rnk-universe="cosy"]         { border-top-color: oklch(0.65 0.12 130); }
.rnk-event-card__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rnk-spacing-xs);
  align-items: center;
  justify-content: space-between;
}
.rnk-event-card__desc {
  font-size: 0.9rem;
  color: var(--rnk-color-text-muted);
  line-height: 1.55;
  margin: 0;
}
.rnk-event-card--rich .rnk-event-card__title {
  font-size: clamp(1.45rem, 2vw, 1.7rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}
.rnk-event-card__title a { color: inherit; text-decoration: none; }
.rnk-event-card__title a:hover { color: var(--rnk-color-accent); }
.rnk-event-card__desc > :last-child { margin-bottom: 0; }
.rnk-event-card__details {
  list-style: none;
  margin: auto 0 0;
  padding: var(--rnk-spacing-md) 0 0;
  border-top: 1px solid var(--rnk-color-border);
  display: grid;
  gap: 0.875rem;
}
.rnk-event-card__details li {
  display: grid;
  grid-template-columns: 1.375rem 1fr;
  gap: 0.75rem;
  align-items: start;
  line-height: 1.45;
}
.rnk-event-card__details strong {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--rnk-color-text-muted);
  font-size: 0.6875rem;
  font-weight: var(--rnk-fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rnk-event-card__value {
  display: block;
  color: var(--rnk-color-text);
  font-size: 0.9375rem;
  font-weight: var(--rnk-fw-medium);
}
.rnk-event-card__detail--date .rnk-event-card__value {
  font-size: 1rem;
  font-weight: var(--rnk-fw-bold);
}
.rnk-event-card__details svg {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.15rem;
  color: var(--rnk-color-accent);
}
.rnk-event-card__link {
  align-self: flex-start;
  margin-top: var(--rnk-spacing-sm);
  color: var(--rnk-color-accent);
  font-size: 0.875rem;
  font-weight: var(--rnk-fw-bold);
  text-decoration: none;
}
.rnk-event-card__link:hover { text-decoration: underline; }
.rnk-event-hero {
  padding-block: var(--rnk-spacing-lg) var(--rnk-spacing-xl);
  background: var(--rnk-color-dark);
  color: var(--rnk-color-dark-text);
}
.rnk-event-hero .rnk-breadcrumb { color: rgba(250, 248, 245, 0.65); }
.rnk-event-hero .rnk-breadcrumb [aria-current="page"] { color: var(--rnk-color-dark-text); }
.rnk-event-hero .rnk-eyebrow { color: var(--rnk-color-accent-on-dark); }
.rnk-event-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rnk-spacing-md);
  margin-top: var(--rnk-spacing-lg);
}
.rnk-event-hero h1 { max-width: 18ch; margin: var(--rnk-spacing-xs) 0; color: inherit; }
.rnk-event-hero__lead { margin: 0; color: rgba(247, 247, 245, 0.82); font-size: clamp(1rem, 2vw, 1.25rem); }
.rnk-event-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: var(--rnk-color-dark-text);
  font-size: 0.8rem;
  font-weight: var(--rnk-fw-bold);
}
.rnk-event-status::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--rnk-color-accent); }
.rnk-event-page__main { padding-block-start: var(--rnk-spacing-xl); }
.rnk-event-layout { display: grid; gap: var(--rnk-spacing-xl); align-items: start; }
.rnk-event-story h2,
.rnk-event-practical h2 { margin: var(--rnk-spacing-xs) 0 var(--rnk-spacing-md); }
.rnk-event-story__intro { max-width: 44rem; font-size: 1.125rem; line-height: 1.75; }
.rnk-event-story__intro > :last-child { margin-bottom: 0; }
.rnk-event-stand { margin-top: var(--rnk-spacing-2xl); padding-top: var(--rnk-spacing-xl); border-top: 1px solid var(--rnk-color-border); }
.rnk-event-stand > p { max-width: 42rem; color: var(--rnk-color-text-muted); font-size: 1rem; line-height: 1.7; }
.rnk-event-benefits { display: grid; gap: var(--rnk-spacing-md); margin: var(--rnk-spacing-xl) 0 0; padding: 0; list-style: none; }
.rnk-event-benefits li { padding-left: var(--rnk-spacing-md); border-left: 2px solid var(--rnk-color-accent); }
.rnk-event-benefits strong,
.rnk-event-benefits span { display: block; }
.rnk-event-benefits strong { margin-bottom: 0.25rem; }
.rnk-event-benefits span { color: var(--rnk-color-text-muted); font-size: 0.9rem; line-height: 1.55; }
.rnk-event-practical {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--rnk-color-surface);
  border: 1px solid var(--rnk-color-border);
  border-top: 3px solid var(--rnk-color-accent);
  border-radius: var(--rnk-radius-lg);
  box-shadow: var(--rnk-shadow-sm);
}
.rnk-event-practical__list { display: grid; gap: 1rem; margin: 0; padding: var(--rnk-spacing-md) 0; border-block: 1px solid var(--rnk-color-border); list-style: none; }
.rnk-event-practical__list li { display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.75rem; align-items: start; }
.rnk-event-practical__list svg { margin-top: 0.15rem; color: var(--rnk-color-accent); }
.rnk-event-practical__list strong,
.rnk-event-practical__list span { display: block; }
.rnk-event-practical__list strong { margin-bottom: 0.15rem; color: var(--rnk-color-text-muted); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; }
.rnk-event-practical__list span span { color: var(--rnk-color-text); font-size: 0.95rem; font-weight: var(--rnk-fw-medium); line-height: 1.45; }
.rnk-event-practical__actions { display: grid; gap: var(--rnk-spacing-xs); margin-top: var(--rnk-spacing-md); }
.rnk-event-prepare { border-block: 1px solid var(--rnk-color-border); }
.rnk-event-prepare__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--rnk-spacing-sm); }
.rnk-event-page__back { padding-block: var(--rnk-spacing-lg); font-size: 0.875rem; }
.rnk-event-page__back a { color: var(--rnk-color-text-muted); }
.rnk-event-page__back a:hover { color: var(--rnk-color-accent); }
@media (min-width: 48rem) {
  .rnk-event-hero { padding-block-end: var(--rnk-spacing-2xl); }
  .rnk-event-hero__content { flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .rnk-event-benefits { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 64rem) {
  .rnk-event-layout { grid-template-columns: minmax(0, 1.55fr) minmax(19rem, 0.75fr); gap: clamp(3rem, 7vw, 7rem); }
  .rnk-event-practical { position: sticky; top: calc(var(--rnk-header-height, 5rem) + 1.5rem); }
}
/* Login */
.rnk-auth-card {
  max-width: 26rem;
  margin: var(--rnk-spacing-2xl) auto;
  padding: var(--rnk-spacing-xl);
  background-color: var(--rnk-color-surface);
  border: 1px solid var(--rnk-color-border);
  border-radius: var(--rnk-radius-lg);
  box-shadow: var(--rnk-shadow-md);
}


/* Confirmation */
.rnk-confirmation {
  max-width: 36rem;
  margin: var(--rnk-spacing-2xl) auto;
  text-align: center;
}
.rnk-confirmation__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem; height: 4.5rem;
  margin-bottom: var(--rnk-spacing-md);
  border-radius: var(--rnk-radius-pill);
  background-color: var(--rnk-color-secondary-soft);
  color: var(--rnk-color-success);
  font-size: 1.75rem;
}


/* Cookie preferences (page legal-cookies) */
.rnk-cookie-pref {
  display: flex;
  align-items: flex-start;
  gap: var(--rnk-spacing-sm);
  padding: var(--rnk-spacing-md);
  border: 1px solid var(--rnk-color-border);
  border-radius: var(--rnk-radius-md);
  background-color: var(--rnk-color-surface);
}
.rnk-cookie-pref + .rnk-cookie-pref { margin-top: var(--rnk-spacing-sm); }
.rnk-cookie-pref input { margin-top: 0.25rem; accent-color: var(--rnk-color-accent); }
.rnk-cookie-pref__title { display: block; font-weight: var(--rnk-fw-medium); margin: 0 0 var(--rnk-spacing-xxs); }
label.rnk-cookie-pref__title { cursor: pointer; }
.rnk-cookie-pref input:disabled + div label.rnk-cookie-pref__title { cursor: not-allowed; }
.rnk-cookie-pref__desc  { font-size: 0.8125rem; color: var(--rnk-color-text-muted); margin: 0; }


/* Documents juridiques : restaure la typographie neutralisée par le reset. */
.rnk-legal-document h2 {
  margin: var(--rnk-spacing-2xl) 0 var(--rnk-spacing-lg);
  font-weight: var(--rnk-fw-normal);
  text-transform: none;
}
.rnk-legal-document > h2:first-child,
.rnk-legal-document > :first-child > h2:first-child { margin-top: 0; }
.rnk-legal-document h3,
.rnk-legal-document h4 {
  margin: var(--rnk-spacing-xl) 0 var(--rnk-spacing-md);
  font-weight: var(--rnk-fw-medium);
  text-transform: none;
}
.rnk-legal-document p,
.rnk-legal-document ul,
.rnk-legal-document ol,
.rnk-legal-document dl,
.rnk-legal-document blockquote,
.rnk-legal-document table { margin-bottom: var(--rnk-spacing-lg); }
.rnk-legal-document ul,
.rnk-legal-document ol { padding-inline-start: 1.5rem; }
.rnk-legal-document ul { list-style: disc; }
.rnk-legal-document ol { list-style: decimal; }
.rnk-legal-document ul ul { list-style: circle; }
.rnk-legal-document ol ol { list-style: lower-alpha; }
.rnk-legal-document li + li { margin-top: var(--rnk-spacing-xs); }
.rnk-legal-document li::marker { color: var(--rnk-color-accent); }
.rnk-legal-document a:not(.rnk-button) {
  color: var(--rnk-color-accent);
  text-decoration: underline;
  text-decoration-thickness: 0.0625em;
  text-underline-offset: 0.16em;
}
.rnk-legal-document blockquote {
  padding-inline-start: var(--rnk-spacing-md);
  border-inline-start: 3px solid var(--rnk-color-border-strong);
  color: var(--rnk-color-text-muted);
}
.rnk-legal-document dt { font-weight: var(--rnk-fw-bold); }
.rnk-legal-document dd { margin: var(--rnk-spacing-xs) 0 var(--rnk-spacing-md); }
.rnk-legal-document table { width: 100%; border-collapse: collapse; }
.rnk-legal-document th,
.rnk-legal-document td {
  padding: var(--rnk-spacing-sm);
  border: 1px solid var(--rnk-color-border);
  text-align: start;
  vertical-align: top;
}
.rnk-legal-document th { background: var(--rnk-color-bg-alt); font-weight: var(--rnk-fw-bold); }
.rnk-legal-document .rnk-cookie-pref__desc { margin-bottom: 0; }

@media (max-width: 47.99rem) {
  .rnk-legal-document h2 { margin-top: var(--rnk-spacing-xl); }
  .rnk-legal-document h3,
  .rnk-legal-document h4 { margin-top: var(--rnk-spacing-lg); }
  .rnk-legal-document { overflow-wrap: anywhere; }
  .rnk-legal-document table { display: block; overflow-x: auto; }
}

/* Legal placeholder pills (RAISON SOCIALE, SIRET, etc.) */
.rnk-legal-placeholder {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: var(--rnk-radius-sm);
  background-color: rgba(184, 92, 30, 0.12);
  border: 1px dashed var(--rnk-color-warm);
  color: var(--rnk-color-warm);
  font-family: var(--rnk-font-mono, monospace);
  font-size: 0.8125rem;
  font-weight: var(--rnk-fw-medium);
  letter-spacing: 0.02em;
}


/* =========================================================================
   Pages enrichies (search, confirmation, login, account)
   Ajouts complétant le périmètre Figma : sidebar filtres,
   recap confirmation, switcher login.
   ========================================================================= */

/* ─── Search results : layout sidebar + grille ───────────────────── */
.rnk-search-page {
  display: grid;
  gap: var(--rnk-spacing-xl);
}
@media (min-width: 64rem) {
  .rnk-search-page { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--rnk-spacing-2xl); align-items: start; }
}

.rnk-search-sidebar {
  position: sticky;
  top: calc(var(--rnk-header-h) + var(--rnk-spacing-md));
  display: flex;
  flex-direction: column;
  gap: var(--rnk-spacing-lg);
}
.rnk-search-sidebar__title {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rnk-color-text-muted);
  margin: 0 0 var(--rnk-spacing-sm);
}
.rnk-search-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: var(--rnk-spacing-xs);
  font-size: 0.875rem;
}
.rnk-search-sidebar__option {
  display: flex;
  align-items: center;
  gap: var(--rnk-spacing-xs);
  cursor: pointer;
}
.rnk-search-sidebar__option input { accent-color: var(--rnk-color-accent); }
.rnk-search-sidebar__count {
  margin-inline-start: auto;
  font-size: 0.75rem;
  color: var(--rnk-color-text-muted);
}

.rnk-search-active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rnk-spacing-xs);
  margin-bottom: var(--rnk-spacing-md);
}
.rnk-chip-removable {
  display: inline-flex;
  align-items: center;
  gap: var(--rnk-spacing-xxs);
  padding: 0.3125rem 0.75rem;
  background-color: var(--rnk-color-accent-soft);
  color: var(--rnk-color-accent);
  border-radius: var(--rnk-radius-pill);
  font-size: 0.75rem;
}
.rnk-chip-removable button { color: inherit; line-height: 1; }





/* ─── Order confirmation : récap stylisé ─────────────────────────── */
.rnk-confirmation__recap {
  text-align: left;
  margin-top: var(--rnk-spacing-lg);
  background-color: var(--rnk-color-surface);
  border: 1px solid var(--rnk-color-border);
  border-radius: var(--rnk-radius-lg);
  overflow: hidden;
}
.rnk-confirmation__recap-header,
.rnk-confirmation__recap-total {
  padding: var(--rnk-spacing-md) var(--rnk-spacing-lg);
  font-family: var(--rnk-font-body);
  font-weight: var(--rnk-fw-medium);
  font-size: 0.9375rem;
}
.rnk-confirmation__recap-header { border-bottom: 1px solid var(--rnk-color-border); }
.rnk-confirmation__recap-total {
  border-top: 1px solid var(--rnk-color-border);
  display: flex;
  justify-content: space-between;
}
.rnk-confirmation__recap-line {
  display: flex;
  align-items: center;
  gap: var(--rnk-spacing-md);
  padding: var(--rnk-spacing-md) var(--rnk-spacing-lg);
  border-bottom: 1px solid var(--rnk-color-border);
}
.rnk-confirmation__recap-line:last-child { border-bottom: 0; }
.rnk-confirmation__recap-line .rnk-cart-item__media { width: 3rem; }
.rnk-confirmation__shipping {
  background-color: var(--rnk-color-secondary-soft);
  border: 1px solid var(--rnk-color-secondary);
  color: var(--rnk-color-secondary);
  padding: var(--rnk-spacing-md) var(--rnk-spacing-lg);
  border-radius: var(--rnk-radius-md);
  margin-top: var(--rnk-spacing-md);
  text-align: left;
}
.rnk-confirmation__shipping h2 { color: var(--rnk-color-secondary); margin: 0 0 var(--rnk-spacing-xxs); font-family: var(--rnk-font-body); font-size: 0.9375rem; }
.rnk-confirmation__shipping p { margin: 0; font-size: 0.875rem; color: var(--rnk-color-secondary); }


/* ─── Login : switcher modes + demo banner ───────────────────────── */
.rnk-demo-banner {
  display: flex;
  gap: var(--rnk-spacing-xs);
  padding: var(--rnk-spacing-sm) var(--rnk-spacing-md);
  background-color: rgba(184, 92, 30, 0.1);
  border: 1px solid var(--rnk-color-warm);
  border-radius: var(--rnk-radius-md);
  margin-bottom: var(--rnk-spacing-md);
  font-size: 0.8125rem;
  color: var(--rnk-color-warm);
}

.rnk-auth-tabs {
  display: flex;
  gap: var(--rnk-spacing-xs);
  margin-bottom: var(--rnk-spacing-md);
  padding: 0.25rem;
  background-color: var(--rnk-color-bg-alt);
  border-radius: var(--rnk-radius-md);
}
.rnk-auth-tab {
  flex: 1;
  padding: var(--rnk-spacing-sm);
  text-align: center;
  font-size: 0.875rem;
  font-weight: var(--rnk-fw-medium);
  border-radius: var(--rnk-radius-sm);
  color: var(--rnk-color-text-muted);
  transition: background-color var(--rnk-transition-fast),
              color var(--rnk-transition-fast);
}
.rnk-auth-tab[aria-selected="true"] {
  background-color: var(--rnk-color-surface);
  color: var(--rnk-color-text);
  box-shadow: var(--rnk-shadow-sm);
}


/* ─── Account dashboard : action cards ───────────────────────────── */
.rnk-account-actions {
  display: grid;
  gap: var(--rnk-spacing-md);
  grid-template-columns: 1fr;
  margin-bottom: var(--rnk-spacing-lg);
}
@media (min-width: 36rem) { .rnk-account-actions { grid-template-columns: repeat(3, 1fr); } }

.rnk-account-action {
  display: flex;
  flex-direction: column;
  gap: var(--rnk-spacing-sm);
  padding: var(--rnk-spacing-lg);
  background-color: var(--rnk-color-surface);
  border: 1px solid var(--rnk-color-border);
  border-radius: var(--rnk-radius-lg);
  text-align: left;
  transition: border-color var(--rnk-transition-fast),
              transform var(--rnk-transition-fast);
}
.rnk-account-action:hover {
  border-color: var(--rnk-color-accent);
  transform: translateY(-2px);
}
.rnk-account-action__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--rnk-radius-md);
  background-color: var(--rnk-color-bg-alt);
  color: var(--rnk-color-accent);
}
.rnk-account-action__title {
  font-family: var(--rnk-font-body);
  font-size: 0.9375rem;
  font-weight: var(--rnk-fw-medium);
  margin: 0;
}
.rnk-account-action__desc {
  font-size: 0.8125rem;
  color: var(--rnk-color-text-muted);
  margin: 0;
}


/* =========================================================================
   ANIMATIONS
   ========================================================================= */

/* - Easing tokens - */
:root {
  --rnk-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --rnk-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

/* - Hero entrance (page load) - */
@keyframes rnk-fade-up {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rnk-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.rnk-hero .rnk-eyebrow,
.rnk-hero__title,
.rnk-hero__lead,
.rnk-hero__actions {
  animation: rnk-fade-up 1s var(--rnk-ease-out-expo) both;
}
.rnk-hero .rnk-eyebrow  { animation-delay: 0.15s; }
.rnk-hero__title        { animation-delay: 0.3s; }
.rnk-hero__lead         { animation-delay: 0.5s; }
.rnk-hero__actions      { animation-delay: 0.7s; }

.rnk-hero__media {
  animation: rnk-fade-in 1s var(--rnk-ease-out-quart) 0.3s both;
}

/* - Page-intro choreography (brand-register entry banners) -
   One well-rehearsed entrance: breadcrumb, eyebrow, h1, lead rise in sequence
   to set the page cadence. Applied to every brand entry banner site-wide so the
   arrival rhythm is consistent across universes, shop, salons, formats, story.
   Transactional surfaces (cart, checkout, account, legal, product page) stay
   still: users are in a task and won't wait for choreography. */
@keyframes rnk-intro-rise {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: translateY(0); }
}

.rnk-universe-hero .rnk-breadcrumb,
.rnk-universe-hero .rnk-eyebrow,
.rnk-universe-hero h1,
.rnk-universe-hero p,
.rnk-section--banner .rnk-breadcrumb,
.rnk-section--banner .rnk-eyebrow,
.rnk-section--banner h1,
.rnk-section--banner .rnk-lead,
.rnk-story-intro .rnk-breadcrumb,
.rnk-story-intro .rnk-eyebrow,
.rnk-story-intro h1,
.rnk-story-intro p {
  animation: rnk-intro-rise 700ms var(--rnk-ease-out-expo) both;
}

.rnk-universe-hero .rnk-breadcrumb,
.rnk-section--banner .rnk-breadcrumb,
.rnk-story-intro .rnk-breadcrumb { animation-delay:   0ms; }

.rnk-universe-hero .rnk-eyebrow,
.rnk-section--banner .rnk-eyebrow,
.rnk-story-intro .rnk-eyebrow    { animation-delay: 120ms; }

.rnk-universe-hero h1,
.rnk-section--banner h1,
.rnk-story-intro h1               { animation-delay: 220ms; }

.rnk-universe-hero p,
.rnk-section--banner .rnk-lead,
.rnk-story-intro p                { animation-delay: 360ms; }

/* Universe hero radial overlay: bloom in behind the type so the colored
   atmosphere settles after the words have landed. Slower, longer, no shift. */
@keyframes rnk-universe-overlay-bloom {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 0.28; transform: scale(1); }
}
.rnk-universe-hero::before {
  transform-origin: center;
  animation: rnk-universe-overlay-bloom 1100ms var(--rnk-ease-out-expo) 80ms both;
}

/* - Scroll-reveal for grid items (progressive enhancement) - */
@keyframes rnk-reveal {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rnk-reveal-scale {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@supports (animation-timeline: view()) {
  /* Grid items: staggered reveal */
  .rnk-format-grid > li,
  .rnk-universe-grid > li,
  .rnk-product-grid > li,
  .rnk-feature {
    animation: rnk-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }

  /* Stagger within grids */
  .rnk-format-grid > li:nth-child(2),
  .rnk-universe-grid > li:nth-child(2),
  .rnk-product-grid > li:nth-child(2) { animation-delay: 50ms; }
  .rnk-format-grid > li:nth-child(3),
  .rnk-universe-grid > li:nth-child(3),
  .rnk-product-grid > li:nth-child(3) { animation-delay: 100ms; }
  .rnk-format-grid > li:nth-child(4),
  .rnk-universe-grid > li:nth-child(4),
  .rnk-product-grid > li:nth-child(4) { animation-delay: 150ms; }
  .rnk-universe-grid > li:nth-child(5) { animation-delay: 200ms; }
  .rnk-universe-grid > li:nth-child(6) { animation-delay: 250ms; }
  .rnk-universe-grid > li:nth-child(7) { animation-delay: 300ms; }

  .rnk-feature:nth-child(2) { animation-delay: 80ms; }
  .rnk-feature:nth-child(3) { animation-delay: 160ms; }
  .rnk-feature:nth-child(4) { animation-delay: 240ms; }

  /* Section headers: fade up on scroll */
  .rnk-section__header,
  .rnk-section__title:not(.rnk-section__header .rnk-section__title),
  .rnk-salons__title,
  .rnk-atelier__grid {
    animation: rnk-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 25%;
  }

  /* Atelier media: scale reveal */
  .rnk-atelier__media {
    animation: rnk-reveal-scale linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }

  /* Newsletter form */
  .rnk-newsletter__form {
    animation: rnk-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 25%;
  }

  /* Section CTAs */
  .rnk-section__cta {
    animation: rnk-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 20%;
  }

  /* Pagination */
  .rnk-pagination {
    animation: rnk-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 20%;
  }

  /* Reassurance items */
  .rnk-reassurance__item {
    animation: rnk-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 25%;
  }
  .rnk-reassurance__item:nth-child(2) { animation-delay: 60ms; }
  .rnk-reassurance__item:nth-child(3) { animation-delay: 120ms; }
  .rnk-reassurance__item:nth-child(4) { animation-delay: 180ms; }
  .rnk-reassurance__item:nth-child(5) { animation-delay: 240ms; }

  /* Event cards (salons) */
  .rnk-event-card {
    animation: rnk-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 25%;
  }
  .rnk-event-card:nth-child(2) { animation-delay: 80ms; }
  .rnk-event-card:nth-child(3) { animation-delay: 160ms; }

  /* Footer columns stagger */
  .rnk-site-footer__grid > * {
    animation: rnk-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }
  .rnk-site-footer__grid > *:nth-child(2) { animation-delay: 60ms; }
  .rnk-site-footer__grid > *:nth-child(3) { animation-delay: 120ms; }
  .rnk-site-footer__grid > *:nth-child(4) { animation-delay: 180ms; }
  .rnk-site-footer__grid > *:nth-child(5) { animation-delay: 240ms; }
  .rnk-site-footer__grid > *:nth-child(6) { animation-delay: 300ms; }

  /* Sur l'accueil, les apparitions sont ponctuelles et pilotées par
     IntersectionObserver au lieu d'être recalculées pendant le scroll. */
  body.home .rnk-format-grid > li,
  body.home .rnk-universe-grid > li,
  body.home .rnk-product-grid > li,
  body.home .rnk-feature,
  body.home .rnk-section__header,
  body.home .rnk-section__title:not(.rnk-section__header .rnk-section__title),
  body.home .rnk-salons__title,
  body.home .rnk-atelier__grid,
  body.home .rnk-atelier__media,
  body.home .rnk-newsletter__form,
  body.home .rnk-section__cta,
  body.home .rnk-pagination,
  body.home .rnk-reassurance__item,
  body.home .rnk-event-card,
  body.home .rnk-site-footer__grid > * {
    animation: none;
  }
}


/* =========================================================================
   ACCESSIBILITY: Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* =========================================================================
   DELIGHT - Personality touches across all pages
   ========================================================================= */

/* - Button press feedback - */
.rnk-button:active:not([disabled]) {
  transform: translateY(1px) scale(0.98);
  transition-duration: 50ms;
}

/* - Format card media: smooth zoom on hover - */
.rnk-format-card__media {
  transition: transform 0.4s var(--rnk-ease-out-expo);
}

/* - Badge pulse for "new" items - */
@keyframes rnk-badge-glow {
  0%, 100% { box-shadow: 0 0 0 0 oklch(0.55 0.15 155 / 0.3); }
  50%      { box-shadow: 0 0 0 4px oklch(0.55 0.15 155 / 0); }
}
.rnk-badge--new {
  animation: rnk-badge-glow 2.5s ease-in-out 1s 3;
}

/* - Product card: warm shadow on hover (composes with rarity inset ring) - */
.rnk-product-card:hover .rnk-product-card__media {
  box-shadow: 0 4px 16px oklch(0.3 0.02 30 / 0.12);
}
.rnk-product-card:has(.rnk-badge--series):hover .rnk-product-card__media {
  box-shadow:
    inset 0 0 0 1px var(--rnk-color-border-strong),
    0 4px 16px oklch(0.3 0.02 30 / 0.12);
}
.rnk-product-card:has(.rnk-badge--unique):hover .rnk-product-card__media {
  box-shadow:
    inset 0 0 0 1px oklch(0.65 0.10 40 / 0.55),
    0 4px 16px oklch(0.3 0.02 30 / 0.12);
}
.rnk-product-card__media {
  transition: box-shadow 0.3s var(--rnk-ease-out-quart);
}

/* - Focus ring: smooth appearance - */
:focus-visible {
  outline: 2px solid var(--rnk-color-accent);
  outline-offset: 2px;
  transition: outline-offset 0.15s var(--rnk-ease-out-quart);
}
:focus-visible:active {
  outline-offset: 0px;
}

/* - Newsletter form: success celebration - */
@keyframes rnk-success-pop {
  0%   { transform: scale(0.9); opacity: 0; }
  50%  { transform: scale(1.02); }
  100% { transform: scale(1); opacity: 1; }
}
.rnk-newsletter__feedback[data-rnk-state="success"] {
  animation: rnk-success-pop 0.4s var(--rnk-ease-out-expo) both;
}

/* - Accordion chevron: smooth rotation - */
[data-rnk-accordion-trigger] svg,
.rnk-drawer__submenu-toggle svg {
  transition: transform 0.25s var(--rnk-ease-out-quart);
}

/* - Footer logo: warm glow on hover - */
.rnk-site-footer__logo {
  transition: filter 0.3s var(--rnk-ease-out-quart);
}
.rnk-site-footer__logo:hover {
  filter: brightness(1.15) drop-shadow(0 0 6px oklch(0.7 0.08 20 / 0.3));
}

/* - Cart count: pop animation when updated - */
@keyframes rnk-count-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.rnk-cart-count[data-rnk-updated] {
  animation: rnk-count-pop 0.35s var(--rnk-ease-out-expo);
}

/* - Filter chip: satisfying press - */
.rnk-filter-chip:active {
  transform: scale(0.95);
  transition-duration: 50ms;
}

/* - Icon button: press feedback - */
.rnk-icon-button:active {
  transform: scale(0.92);
  transition-duration: 80ms;
}

/* - Sold product: paper veil lifts slightly on hover - */
.rnk-product-card--sold:hover .rnk-product-card__media::before {
  background-color: oklch(0.97 0.005 80 / 0.35);
}
.rnk-product-card--sold:hover .rnk-product-card__media > .rnk-product-card__image,
.rnk-product-card--sold:hover .rnk-product-card__media > .rnk-product-card__placeholder {
  filter: grayscale(0.3);
}

/* - Announcement bar: subtle shimmer on load - */
@keyframes rnk-shimmer {
  from { background-position: -200% center; }
  to   { background-position: 200% center; }
}
.rnk-announcement {
  background-image: linear-gradient(
    90deg,
    var(--rnk-color-dark) 0%,
    var(--rnk-color-dark) 40%,
    oklch(0.25 0.01 20) 50%,
    var(--rnk-color-dark) 60%,
    var(--rnk-color-dark) 100%
  );
  background-size: 200% 100%;
  animation: rnk-shimmer 3s ease-in-out 0.5s 1;
}

/* - Breadcrumb links: smooth color - */
.rnk-breadcrumb a {
  transition: color 0.2s var(--rnk-ease-out-quart);
}


/* =========================================================================
   ACCESSIBILITY: Forced colors (Windows High Contrast)
   ========================================================================= */
@media (forced-colors: active) {
  .rnk-hero__media {
    border: 2px solid CanvasText;
  }
  .rnk-badge {
    border: 1px solid CanvasText;
  }
  .rnk-button {
    border: 1px solid ButtonText;
  }
  .rnk-format-card,
  .rnk-universe-card,
  .rnk-product-card__media {
    border: 1px solid CanvasText;
  }
}


/* =========================================================================
   ACCESSIBILITÉ - Focus visible
   ─────────────────────────────────────────────────────────────────────────
   Anneau de focus systématique sur tous les éléments interactifs.
   • Couleur accent par défaut (clair sur fonds clairs).
   • Variante claire sur fonds sombres (header sticky, drawers, modals).
   • Variantes spécifiques par composant pour rester lisible sans casser
     le design (cartes, chips, icon buttons, liens cards).
   ========================================================================= */

/* Boutons : anneau systématique */
.rnk-button:focus-visible,
.rnk-icon-button:focus-visible {
  outline: 2px solid var(--rnk-color-accent);
  outline-offset: 2px;
}

/* Boutons en variante "primaire" / "accent" / "inverse" :
   accent rouge sur fond sombre fonctionne, on garde mais on ajoute un anneau
   clair en complément pour rester visible si l'arrière-plan est très rouge
   ou très sombre. */
.rnk-button--primary:focus-visible,
.rnk-button--accent:focus-visible {
  outline: 2px solid var(--rnk-color-dark-text);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--rnk-color-accent);
}

/* Liens d'inline / breadcrumbs : focus underline + outline */
a:focus-visible {
  outline: 2px solid var(--rnk-color-accent);
  outline-offset: 2px;
  border-radius: var(--rnk-radius-sm);
}

/* Filtres (chips boutique) : remplir avec accent à l'état focus pour
   différencier de l'état pressé (gris) tout en restant lisible. */
.rnk-filter-chip:focus-visible {
  outline: 2px solid var(--rnk-color-accent);
  outline-offset: 2px;
  border-color: var(--rnk-color-accent);
}

/* Cartes format / univers : anneau autour de la card complète,
   le lien étant le wrapper. */
.rnk-format-card:focus-visible,
.rnk-universe-card:focus-visible {
  outline: 2px solid var(--rnk-color-accent);
  outline-offset: 4px;
}

/* Galerie produit : anneau visible sur la zone principale et les vignettes. */
.rnk-gallery:focus-visible,
.rnk-gallery__thumb:focus-visible,
.rnk-gallery__nav:focus-visible {
  outline: 2px solid var(--rnk-color-accent);
  outline-offset: 2px;
}

/* Liens et boutons sur fond sombre (header sticky, hero immersif,
   drawers, mini-cart, footer, sections accent / dark) :
   un anneau clair pour rester visible. */
.rnk-drawer__panel a:focus-visible,
.rnk-drawer__panel button:focus-visible,
.rnk-drawer__submenu-toggle:focus-visible,
.rnk-mini-cart a:focus-visible,
.rnk-mini-cart button:focus-visible,
.rnk-site-footer a:focus-visible,
.rnk-site-footer button:focus-visible,
.rnk-section--banner a:focus-visible,
.rnk-section--accent a:focus-visible,
.rnk-section--accent .rnk-button:focus-visible,
.rnk-hero--immersive a:focus-visible,
.rnk-hero--immersive .rnk-button:focus-visible,
.rnk-universe-hero a:focus-visible,
.rnk-page-hero a:focus-visible,
.rnk-page-hero button:focus-visible,
.rnk-section--dark a:focus-visible {
  outline: 2px solid var(--rnk-color-dark-text);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--rnk-color-accent);
}

/* Liens sociaux du footer : viser un anneau lisible sur fond sombre. */
.rnk-site-footer__social a:focus-visible {
  outline: 2px solid var(--rnk-color-dark-text);
  outline-offset: 4px;
  border-radius: var(--rnk-radius-pill);
  box-shadow: 0 0 0 4px var(--rnk-color-accent);
}

/* Chips suggestion search overlay : anneau accent. */
.rnk-search-overlay__chips .rnk-tag:focus-visible {
  outline: 2px solid var(--rnk-color-accent);
  outline-offset: 2px;
}

/* Search overlay close / clear buttons : anneau visible sur fond clair. */
.rnk-search-overlay__clear:focus-visible,
.rnk-search-overlay__close-btn:focus-visible {
  outline: 2px solid var(--rnk-color-accent);
  outline-offset: 2px;
}

/* Skip link : accentuer le focus, déjà très visible mais on renforce. */
.rnk-skip-link:focus,
.rnk-skip-link:focus-visible {
  outline: 2px solid var(--rnk-color-dark-text);
  outline-offset: 2px;
}

/* Pagination : conserver anneau visible quand le bouton est ghost. */
.rnk-pagination a:focus-visible {
  outline: 2px solid var(--rnk-color-accent);
  outline-offset: 2px;
}

/* Account menu items et nav account links */
.rnk-account-menu__link:focus-visible,
.rnk-account-nav__link:focus-visible {
  outline: 2px solid var(--rnk-color-accent);
  outline-offset: 2px;
  border-radius: var(--rnk-radius-sm);
}

/* Reduce motion : conserver le focus mais sans transition visuelle. */
@media (prefers-reduced-motion: reduce) {
  :focus-visible {
    transition: none;
  }
}


/* =========================================================================
   RESPONSIVE REFINEMENTS - passe complète
   Cible :
     - mobile étroit  (≤ 22.5rem / 360px)
     - mobile standard (< 30rem / 480px)
     - tablette        (30rem - 64rem)
     - desktop         (≥ 64rem)
   Objectifs :
     - header lisible sur mobile
     - grilles produits 1 / 2 / 3-4
     - footer empilé sur mobile
     - hero lisible sans texte écrasé
     - cards salons & univers lisibles
     - guide formats facile à parcourir
     - overlay recherche adapté mobile
   Contraintes :
     - pas de réduction de texte sous le seuil de lecture (~14 px / 0.875rem)
     - aucune information masquée
     - pas de scroll horizontal
   ========================================================================= */

/* ── Filet de sécurité : aucun débordement horizontal ─────────────────── */
html, body { overflow-x: clip; }
img, video, svg { max-width: 100%; }
.rnk-main { overflow-x: clip; }

/* Mots longs (URLs dans les blocs légal, e-mails) */
.rnk-accordion__panel,
.rnk-cart-item__title,
.rnk-product-card__title,
.rnk-event-card__title,
.rnk-event-card__details,
.rnk-mini-cart__item-title {
  overflow-wrap: anywhere;
}


/* =========================================================================
   HEADER / NAVIGATION
   ========================================================================= */

/* Mobile : compacter la barre pour libérer de la place au logo et aux actions */
@media (max-width: 47.999rem) {
  .rnk-site-header__bar {
    gap: var(--rnk-spacing-xs);
    padding-block: var(--rnk-spacing-sm);
  }
  .rnk-site-header__brand-logo { height: 3rem; }
  .rnk-icon-button { width: 2.5rem; height: 2.5rem; }
  .rnk-site-header__actions { gap: 0.125rem; }
  .rnk-announcement {
    font-size: 0.75rem;
    padding-inline: var(--rnk-spacing-sm);
    line-height: 1.4;
  }
}

/* Mobile étroit (≤ 22.5rem) : on rabote encore d'un cran sans nuire à la lecture */
@media (max-width: 22.5rem) {
  .rnk-site-header__brand-logo { height: 2.5rem; }
  .rnk-icon-button { width: 2.25rem; height: 2.25rem; }
}

/* Tablette : retrouver un peu d'air au logo */
@media (min-width: 48rem) and (max-width: 63.999rem) {
  .rnk-site-header__brand-logo { height: 3.5rem; }
}


/* =========================================================================
   HERO
   ========================================================================= */

/* Hero immersive : éviter le texte écrasé et la min-height excessive sur mobile.
   On laisse respirer le titre sans imposer 75svh. */
.rnk-hero--immersive {
  min-height: auto;
}
@media (min-width: 48rem) {
  .rnk-hero--immersive {
    min-height: 60svh;
    min-height: 60vh;
  }
}
@media (min-width: 64rem) {
  .rnk-hero--immersive {
    min-height: 75svh;
    min-height: 75vh;
  }
}

/* Mobile : titre lisible, lead serré mais pas étouffé, CTA empilés sur très étroit */
@media (max-width: 47.999rem) {
  .rnk-hero--immersive {
    padding-block: var(--rnk-spacing-2xl) var(--rnk-spacing-xl);
  }
  .rnk-hero--immersive .rnk-hero__title {
    font-size: clamp(1.875rem, 8vw, 2.75rem);
    line-height: 1.1;
    text-wrap: balance;
  }
  .rnk-hero--immersive .rnk-hero__lead {
    font-size: 1rem;
    line-height: 1.55;
  }
  .rnk-hero--immersive .rnk-hero__actions {
    margin-block-start: var(--rnk-spacing-lg);
    gap: var(--rnk-spacing-xs);
    flex-wrap: wrap;
  }
  .rnk-hero--immersive .rnk-button--primary,
  .rnk-hero--immersive .rnk-button--secondary {
    padding: 0.875rem 1.25rem;
    font-size: 0.9375rem;
  }
}
@media (max-width: 22.5rem) {
  .rnk-hero--immersive .rnk-hero__actions { flex-direction: column; align-items: stretch; }
  .rnk-hero--immersive .rnk-hero__actions .rnk-button { width: 100%; }
}

/* Hero standard (page non immersive) : éviter l'image qui mange l'écran */
@media (max-width: 47.999rem) {
  .rnk-hero { padding-block: var(--rnk-spacing-xl); }
  .rnk-hero__title  { font-size: clamp(1.875rem, 8vw, 2.5rem); }
  .rnk-hero__lead   { font-size: 1rem; }
  .rnk-hero__media  { aspect-ratio: 16 / 11; }
}


/* =========================================================================
   GRILLES PRODUITS
   ========================================================================= */
/* Note : la définition de base de .rnk-product-grid (1 / 2 / 3 / 4) est
   directement faite plus haut dans le fichier (mobile-first). Ici on ajuste
   uniquement les détails : carte produit lisible, badges qui ne mangent pas
   l'image. */

@media (max-width: 22.5rem) {
  /* Sur très étroit on revient à 1 col pour garder l'image lisible. */
  .rnk-product-grid { grid-template-columns: 1fr; }
}

/* Carte produit : éviter que les badges débordent, éviter le badge--new
   qui clignote au-dessus du texte sur mobile. */
.rnk-product-card__badges { max-width: calc(100% - var(--rnk-spacing-md)); }
.rnk-product-card__badges .rnk-badge { white-space: normal; }

/* Mobile : on cache l'affordance "Voir le produit" qui ne sert à rien sans hover */
@media (hover: none) {
  .rnk-product-card__media::after { content: none; }
}


/* =========================================================================
   GRILLE UNIVERS / FORMATS / SALONS / RÉASSURANCE
   ========================================================================= */

/* Univers : lisible dès le mobile, on garde 1 col en dessous de 30rem
   (le 1 fr / 1 fr écrasait les images sur narrow). */
.rnk-universe-grid { grid-template-columns: 1fr; }
@media (min-width: 30rem) { .rnk-universe-grid { grid-template-columns: repeat(2, 1fr); gap: var(--rnk-spacing-md); } }
@media (min-width: 48rem) { .rnk-universe-grid { gap: var(--rnk-spacing-lg); } }
@media (min-width: 64rem) { .rnk-universe-grid { grid-template-columns: repeat(4, 1fr); } }

@media (max-width: 47.999rem) {
  .rnk-universe-card__title   { font-size: 1.25rem; }
  .rnk-universe-card__body    { padding: var(--rnk-spacing-md) var(--rnk-spacing-md) var(--rnk-spacing-md); }
}

/* Formats : 1 col sur narrow, 2 col mobile standard, 4 col desktop */
@media (max-width: 22.5rem) {
  .rnk-format-grid { grid-template-columns: 1fr; }
}

/* Salons / cards-grid : 1 col tant qu'on n'a pas la place, 2 col à 30rem */
.rnk-cards-grid { grid-template-columns: 1fr; }
@media (min-width: 30rem) { .rnk-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .rnk-cards-grid { grid-template-columns: repeat(2, 1fr); } }

/* Réassurance : 2 col → 3 col → 5 col, mais 1 col dès qu'on est en dessous
   de 22.5rem pour éviter les libellés tronqués. */
@media (max-width: 22.5rem) {
  .rnk-reassurance-grid { grid-template-columns: 1fr; gap: var(--rnk-spacing-md); }
}


/* =========================================================================
   FOOTER
   ========================================================================= */

/* Mobile : 1 col, on assouplit le passage à 2 col pour les écrans 30-36rem */
.rnk-site-footer__grid { grid-template-columns: 1fr; }
@media (min-width: 30rem) { .rnk-site-footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--rnk-spacing-xl); } }
@media (min-width: 48rem) { .rnk-site-footer__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) {
  .rnk-site-footer__grid {
    grid-template-columns: 1.6fr repeat(5, 1fr);
    gap: var(--rnk-spacing-2xl);
  }
}

@media (max-width: 47.999rem) {
  .rnk-site-footer { padding-block: var(--rnk-spacing-2xl) var(--rnk-spacing-xl); }
  .rnk-site-footer__logo { height: 3.5rem; margin-bottom: var(--rnk-spacing-md); }
  .rnk-site-footer__brand { max-width: none; }
  .rnk-site-footer__bottom {
    margin-top: var(--rnk-spacing-xl);
    padding-top: var(--rnk-spacing-md);
  }
}


/* =========================================================================
   OVERLAY RECHERCHE - mobile
   ========================================================================= */

/* Sur mobile l'overlay devient un sheet plein écran : plus naturel au pouce,
   plus de place pour les résultats, le clavier ne masque pas l'input. */
@media (max-width: 47.999rem) {
  .rnk-search-overlay { background-color: var(--rnk-color-bg); backdrop-filter: none; }
  .rnk-search-overlay__panel {
    max-width: none;
    height: 100svh;
    height: 100vh;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .rnk-search-overlay__header {
    padding: var(--rnk-spacing-sm) var(--rnk-spacing-md);
    gap: var(--rnk-spacing-xs);
    position: sticky;
    top: 0;
    background-color: var(--rnk-color-bg);
    z-index: 1;
  }
  .rnk-search-overlay__input {
    font-size: 1rem;
    /* iOS : font-size ≥ 16px évite le zoom auto en focus */
  }
  .rnk-search-overlay__chips {
    gap: var(--rnk-spacing-xxs);
    padding: var(--rnk-spacing-sm) var(--rnk-spacing-md);
  }
  .rnk-search-overlay__results { padding: var(--rnk-spacing-sm) var(--rnk-spacing-md) var(--rnk-spacing-xl); }
  .rnk-search-result__title { white-space: normal; }
}


/* =========================================================================
   PAGE RECHERCHE
   ========================================================================= */

/* Sidebar filtres : sticky sur desktop seulement (sinon elle prend tout
   l'écran sur mobile). */
@media (max-width: 63.999rem) {
  .rnk-search-sidebar {
    position: static;
    top: auto;
    gap: var(--rnk-spacing-md);
  }
  .rnk-search-sidebar__group {
    background-color: var(--rnk-color-bg-alt);
    border: 1px solid var(--rnk-color-border);
    border-radius: var(--rnk-radius-md);
    padding: var(--rnk-spacing-md);
  }
}


/* =========================================================================
   FILTER BAR
   ========================================================================= */

/* Mobile : libellé "Univers / Format" sur sa propre ligne, puis chips qui
   wrappent. Ça évite que le label coupe la première chip. */
@media (max-width: 47.999rem) {
  .rnk-filter-bar__row {
    flex-wrap: wrap;
    row-gap: var(--rnk-spacing-xs);
  }
  .rnk-filter-bar__label {
    flex: 0 0 100%;
    min-width: 0;
    margin-right: 0;
    margin-bottom: 0.125rem;
  }
  .rnk-filter-bar__meta {
    margin-inline-start: 0;
    flex: 1 1 100%;
    justify-content: space-between;
    margin-top: var(--rnk-spacing-xs);
  }
  .rnk-filter-chip {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
  }
}


/* =========================================================================
   NEWSLETTER
   ========================================================================= */

/* Mobile : empiler input et bouton pour des cibles confortables au pouce */
@media (max-width: 30rem) {
  .rnk-newsletter__form {
    flex-direction: column;
    align-items: stretch;
    gap: var(--rnk-spacing-sm);
  }
  .rnk-newsletter__input { min-width: 0; width: 100%; }
  .rnk-newsletter__form .rnk-button { width: 100%; }
}


/* =========================================================================
   COOKIE BANNER & MODAL
   ========================================================================= */

@media (max-width: 30rem) {
  .rnk-cookie-banner {
    inset-inline: var(--rnk-spacing-sm);
    inset-block-end: var(--rnk-spacing-sm);
    padding: var(--rnk-spacing-sm) var(--rnk-spacing-md);
    font-size: 0.875rem;
  }
  .rnk-cookie-banner__actions { flex-direction: column; }
  .rnk-cookie-banner__actions .rnk-button { width: 100%; }
}

@media (max-width: 30rem) {
  .rnk-modal { padding: var(--rnk-spacing-sm); }
  .rnk-modal__panel { padding: var(--rnk-spacing-lg); }
}


/* =========================================================================
   FICHE PRODUIT
   ========================================================================= */

/* Galerie : nav buttons un peu plus petits sur narrow pour ne pas masquer
   l'image. Thumbs scrollables horizontalement (déjà OK), on arrondit juste
   l'expérience tactile. */
@media (max-width: 47.999rem) {
  .rnk-gallery__nav { width: 2.25rem; height: 2.25rem; }
  .rnk-gallery__thumb { width: 3.5rem; height: 3.5rem; }
  .rnk-product-info__price { font-size: 1.625rem; line-height: 1.2; }
  .rnk-product-info__title { font-size: clamp(1.625rem, 6vw, 2.25rem); }
}

/* Sticky bar mobile (CTA add to cart) : nom + prix bien lisibles, bouton
   confortable au pouce */
@media (max-width: 47.999rem) {
  .rnk-sticky-bar__name { font-size: 0.875rem; }
}


/* =========================================================================
   PANIER / CHECKOUT
   ========================================================================= */

@media (max-width: 30rem) {
  .rnk-cart-item {
    grid-template-columns: 4.5rem 1fr;
    gap: var(--rnk-spacing-sm);
    padding: var(--rnk-spacing-sm);
  }
  .rnk-cart-item__row { gap: var(--rnk-spacing-xs); }
  .rnk-cart-summary { padding: var(--rnk-spacing-md); }
  .rnk-cart-summary__total { font-size: 1.25rem; }
}

/* Form rows : on s'assure que tout flex-wrap proprement (déjà flex-wrap mais
   on force min-width: 0 pour éviter les overflow) */
.rnk-field__row > .rnk-field { min-width: 0; }


/* =========================================================================
   COMPTE
   ========================================================================= */

/* Mobile : nav compte horizontale scrollable plutôt qu'empilée verticalement,
   ça évite un long bloc avant le contenu. */
@media (max-width: 47.999rem) {
  .rnk-account-nav {
    display: flex;
    gap: var(--rnk-spacing-xxs);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: var(--rnk-spacing-xxs);
  }
  .rnk-account-nav::-webkit-scrollbar { display: none; }
  .rnk-account-nav__link {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: var(--rnk-spacing-xs) var(--rnk-spacing-sm);
    font-size: 0.875rem;
  }
}


/* =========================================================================
   GUIDE DES FORMATS
   ========================================================================= */

/* TOC sticky : sur mobile la barre devient un peu plus dense et reste
   scrollable horizontalement. Sur desktop elle wrap (déjà géré dans
   formats.html). */
@media (max-width: 47.999rem) {
  .rnk-format-tocbar { padding-block: var(--rnk-spacing-xs); }
  .rnk-format-toc a {
    padding: 0.4375rem 0.75rem;
    font-size: 0.8125rem;
  }
}

/* Cards de comparaison : deux infos clé + CTA, alignement plus net sur narrow */
@media (max-width: 30rem) {
  .rnk-format-compare-card { padding: var(--rnk-spacing-sm) var(--rnk-spacing-md); }
  .rnk-format-compare-card .rnk-button { justify-self: stretch; width: 100%; }
}

/* Ancre sticky : quand on clique dans le sommaire, le titre n'est pas masqué
   par le header + la barre TOC. On combine les deux hauteurs. */
.rnk-format-block { scroll-margin-top: 8rem; }


/* =========================================================================
   PAGES UNIVERS / SHOP - bandeaux
   ========================================================================= */

/* Section banner : padding inline du conteneur + lead lisible sur mobile */
@media (max-width: 47.999rem) {
  .rnk-section--banner,
  .rnk-page-hero { padding-block: var(--rnk-spacing-xl); }
  .rnk-section--banner h1,
  .rnk-page-hero h1 { font-size: clamp(1.75rem, 7vw, 2.5rem); }
  .rnk-section--banner .rnk-lead,
  .rnk-page-hero .rnk-lead { font-size: 0.9375rem; }
}


/* =========================================================================
   ATELIER / FEATURES
   ========================================================================= */

/* Atelier : image en aspect plus humain sur mobile */
@media (max-width: 47.999rem) {
  .rnk-atelier__media { aspect-ratio: 4 / 3; }
  .rnk-atelier__intro { font-size: 1rem; }
  .rnk-feature-list--two-cols { grid-template-columns: 1fr; }
}


/* =========================================================================
   TYPOGRAPHIE - garde-fou de lisibilité
   ========================================================================= */

/* Aucun texte de contenu sous 14px (0.875rem). On limite la baisse du clamp h1
   et on garde un body confortable. */
@media (max-width: 22.5rem) {
  body { font-size: 0.9375rem; line-height: 1.55; }
  h1 { font-size: clamp(1.625rem, 8vw, 2rem); }
  h2 { font-size: clamp(1.5rem, 7vw, 1.875rem); }
  .rnk-section__lead, .rnk-lead { font-size: 1rem; }
}


/* =========================================================================
   FORMULAIRES TACTILES
   ========================================================================= */

/* iOS : éviter le zoom au focus quand on tape dans un champ */
@media (max-width: 47.999rem) {
  .rnk-field__input,
  .rnk-field__textarea,
  .rnk-field__select,
  .rnk-newsletter__input {
    font-size: 1rem;
  }
}


/* =========================================================================
   DRAWER MOBILE - navigation latérale
   ========================================================================= */

/* Drawer : on garde la zone "tap-to-close" visible. Le min(20rem, 90vw)
   existant reste pertinent même sur narrow. */

/* Mini-cart : déjà 100vw au max, mais on s'assure que l'item ne déborde pas */
@media (max-width: 30rem) {
  .rnk-mini-cart__item { grid-template-columns: 4rem 1fr; gap: var(--rnk-spacing-xs); }
}

/* Ancre du bloc Newsletter agenda : dégagement sous le header sticky. */
#rnk-salons-newsletter-intro {
  position: absolute;
  inset-block-start: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  scroll-margin-top: var(--rnk-chrome-h, 4.5rem);
}

/* Newsletter salons : déclinaison du bandeau salons de la page d'accueil. */
#rnk-salons-newsletter {
  position: relative;
  overflow: hidden;
  background-color: var(--rnk-color-dark);
  color: var(--rnk-color-dark-text);
}
#rnk-salons-newsletter::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, oklch(0.35 0.08 15 / 0.25) 0%, transparent 60%);
  pointer-events: none;
}
#rnk-salons-newsletter > .rnk-container {
  position: relative;
}
#rnk-salons-newsletter .rnk-section__title {
  color: inherit;
  margin-bottom: var(--rnk-spacing-sm);
}
#rnk-salons-newsletter .rnk-section__lead,
#rnk-salons-newsletter .rnk-newsletter__consent,
#rnk-salons-newsletter .rnk-newsletter__legal {
  color: rgba(247, 247, 245, 0.9);
}
#rnk-salons-newsletter .rnk-newsletter__input {
  background-color: var(--rnk-color-dark-text);
  border-color: rgba(247, 247, 245, 0.55);
  color: var(--rnk-color-text);
}
#rnk-salons-newsletter .rnk-newsletter__input:focus {
  border-color: var(--rnk-color-dark-text);
  box-shadow: 0 0 0 3px rgba(247, 247, 245, 0.25);
}
#rnk-salons-newsletter .rnk-newsletter__legal a {
  color: inherit;
}
#rnk-salons-newsletter .rnk-newsletter__form .rnk-button--secondary {
  background-color: transparent;
  color: var(--rnk-color-dark-text);
  border-color: rgba(247, 247, 245, 0.55);
}
#rnk-salons-newsletter .rnk-newsletter__form .rnk-button--secondary:hover {
  background-color: rgba(247, 247, 245, 0.08);
  color: var(--rnk-color-dark-text);
  border-color: var(--rnk-color-dark-text);
}
#rnk-salons-newsletter .rnk-newsletter__feedback[data-rnk-state="success"] {
  color: oklch(0.88 0.09 145);
}
#rnk-salons-newsletter .rnk-newsletter__feedback[data-rnk-state="error"] {
  color: oklch(0.88 0.08 25);
}

/* Liens d’aide avant la prise de contact. */
.rnk-contact-help {
  padding: var(--rnk-spacing-lg);
  background: var(--rnk-color-surface);
  border: 1px solid var(--rnk-color-border);
  border-radius: var(--rnk-radius-md);
}
.rnk-contact-help__link {
  display: inline-block;
  padding-block: 0.5rem;
  color: var(--rnk-color-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}