/* Ronronnet V6 (14/11/2026) : feuille du gabarit (chargée après base.css et theme.css).
   Parti pris : une marque d'appareil pour la maison. Page blanche, l'objet en très grand sur une « scène » gris chaud
   (le fond exact des images détourées, sans jointure), encre graphite, l'orange du cadran en touche rare : l'anneau,
   les étoiles, la pastille d'économie. Une seule grille (1 240 px), deux rayons (24 px, pilule), sept tailles.
   Mouvement signature : l'anneau orange, qui se trace derrière la Dôme à l'arrivée et avance d'un tiers par étape.
   Plus : le compteur du moteur sur un chiffre vrai, des apparitions sobres, les survols. Rien avec « moins
   d'animations ». Aucune ombre douce, aucun dégradé, aucun picto dans un rond. */

/* ------------------------------------------------------------------ échelle et bases */
:root {
  --t-1: 0.8125rem;                                    /* 13 px : notes, sources */
  --t-2: 0.9375rem;                                    /* 15 px : textes secondaires, menus, boutons */
  --t-3: 1.0625rem;                                    /* 17 px : texte courant */
  --t-4: 1.3125rem;                                    /* 21 px : titres de bloc, chapeaux */
  --t-5: clamp(1.5rem, 1.3rem + 0.6vw, 1.75rem);       /* 24 à 28 px : prix, titres de carte */
  --t-6: clamp(2rem, 1.55rem + 1.5vw, 2.75rem);        /* 32 à 44 px : titres de section */
  --t-7: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);        /* 40 à 72 px : titre du premier écran, la note */
  --section: clamp(4rem, 2.8rem + 4.5vw, 7.5rem);      /* rythme vertical entre deux sections */
  --gap: clamp(1rem, 0.6rem + 1.2vw, 1.5rem);          /* écart entre deux cartes */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

html { scroll-padding-top: 5.5rem; }
body { background: var(--bg); color: var(--ink); font-size: var(--t-3); line-height: 1.55; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01" 0; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
input, textarea, select { caret-color: var(--ink); border-radius: var(--radius); border-color: color-mix(in srgb, var(--ink) 28%, var(--bg)); padding-inline: 1rem; min-height: 3rem; }
a { text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: currentColor; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; }
p, li { text-wrap: pretty; }
img { border-radius: 0; }
figure { margin: 0; }
b, strong { font-weight: 600; }

/* Apparitions du moteur : courtes, une seule fois, sur la courbe de la boutique. Pas de fondu entre les pages. */
.reveal-pending { opacity: 1; transform: none; }
.reveal-in { transition: none; }
@view-transition { navigation: none; }
.reveal-wait { transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }

/* ------------------------------------------------------------------ typographie de la boutique */
.rn-h1 { font-size: var(--t-7); line-height: 1.04; letter-spacing: -0.035em; margin: 0; text-wrap: balance; }
.rn-h1--page { font-size: var(--t-6); line-height: 1.08; letter-spacing: -0.025em; }
.rn-h2 { font-size: var(--t-6); line-height: 1.06; letter-spacing: -0.028em; margin: 0 0 2rem; max-width: 22ch; text-wrap: balance; }
.rn-h3 { font-size: var(--t-5); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 0.5rem; }
.rn-h4 { font-size: var(--t-4); line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 0.35rem; }
.rn-h4 a { text-decoration: none; }
.rn-h4 a:hover { text-decoration: underline; }
.rn-lead { font-size: var(--t-3); line-height: 1.55; color: var(--muted); margin: 0; max-width: 34rem; }
.rn-small { font-size: var(--t-1); line-height: 1.5; color: var(--muted); margin: 0; }
.rn-price { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap; }
.rn-save { display: inline-flex; align-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: var(--t-1); line-height: 1.2; padding: 0.3rem 0.7rem; border-radius: var(--pill); white-space: nowrap; }
.rn-code { display: inline-block; background: var(--bg); color: var(--ink); font-weight: 600; letter-spacing: 0.04em; line-height: 1.2; padding: 0.2rem 0.65rem; border-radius: var(--pill); border: 1px solid var(--ink); }
.rn-link { font-weight: 500; display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.rn-link:hover { text-decoration-color: currentColor; }
.rn-star { font-weight: 400; }
.review-stars { color: var(--accent); letter-spacing: 0.06em; }

/* Liste cochée : une coche graphite, fine, sans rond autour. */
.rn-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.rn-checks li { display: grid; grid-template-columns: 1.125rem minmax(0, 1fr); gap: 0.6rem; align-items: start; line-height: 1.4; }
.rn-checks .icon { width: 1.125rem; height: 1.125rem; margin-top: 0.12em; color: var(--ink); stroke-width: 2.2; }

/* ------------------------------------------------------------------ boutons : pilules graphite */
.btn { min-height: 3.25rem; padding: 0.8rem 1.75rem; border: 1px solid transparent; border-radius: var(--pill); font-family: var(--font-body); font-weight: 500; font-size: var(--t-2); letter-spacing: 0; transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease), transform 160ms var(--ease); }
.btn-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.btn-primary:hover, .btn.btn-primary:focus-visible { background: #34363A; border-color: #34363A; color: #fff; }
.btn-secondary { background: transparent; border-color: color-mix(in srgb, var(--ink) 30%, var(--bg)); color: var(--ink); }
.btn.btn-secondary:hover, .btn.btn-secondary:focus-visible { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn:active:not([disabled]) { transform: scale(0.98); }
.btn-small { min-height: 2.75rem; padding: 0.4rem 1.1rem; font-size: var(--t-2); }
.rn-btn-light { background: var(--ink); border-color: var(--ink); color: #fff; min-height: 2.75rem; padding: 0.4rem 1.25rem; font-size: var(--t-2); }
.btn.rn-btn-light:hover, .btn.rn-btn-light:focus-visible { background: #34363A; color: #fff; }
.link-button { font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 0.22em; }

/* ------------------------------------------------------------------ bandeau pratique et en-tête */
.announce { background: var(--bg); color: var(--muted); font-size: var(--t-1); border-bottom: 1px solid var(--line); }
.announce-list { padding-block: 0.5rem; gap: 0 0.75rem; max-width: var(--wrap); }
.announce .icon { display: none; }
.announce-list li + li::before { content: "·"; margin-right: 0.75rem; }
@media (max-width: 599px) { .announce-list li:nth-child(n+3) { display: none; } }

.rn-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color 200ms var(--ease); }
.rn-header.is-scrolled { border-bottom-color: var(--line); }
.rn-header-row { display: flex; align-items: center; gap: 1rem; min-height: 4rem; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.rn-header .brand { margin-right: auto; min-height: 2.75rem; display: inline-flex; align-items: center; }
.brand-logo { height: 1.375rem; width: auto; }
.rn-nav { display: none; }
.rn-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2rem; }
.rn-nav a { position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; font-size: var(--t-2); font-weight: 500; text-decoration: none; color: var(--ink); }
.rn-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.6rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--ease); }
.rn-nav a:hover::after, .rn-nav a[aria-current="page"]::after { transform: scaleX(1); }
.rn-header-actions { display: flex; align-items: center; gap: 0.25rem; }
.cart-link { margin: 0; min-height: 2.75rem; padding: 0 1.1rem; border: 1px solid color-mix(in srgb, var(--ink) 22%, var(--bg)); border-radius: var(--pill); font-size: var(--t-2); font-weight: 500; gap: 0.5rem; transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease); }
.cart-link:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.cart-count { border-radius: var(--pill); background: var(--ink); color: #fff; font-weight: 600; min-width: 1.375rem; height: 1.375rem; font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.cart-link:hover .cart-count { background: #fff; color: var(--ink); }

/* Menu du téléphone : un bouton, la liste se déplie sous la barre. Les deux traits deviennent une croix. */
.rn-menu { position: static; }
.rn-menu-button { list-style: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--pill); cursor: pointer; }
.rn-menu-button::-webkit-details-marker { display: none; }
.rn-burger, .rn-burger::before, .rn-burger::after { display: block; width: 1.25rem; height: 1.5px; background: var(--ink); transition: transform 220ms var(--ease), background-color 220ms var(--ease); }
.rn-burger { position: relative; background: transparent; }
.rn-burger::before, .rn-burger::after { content: ""; position: absolute; left: 0; }
.rn-burger::before { top: -4px; }
.rn-burger::after { top: 4px; }
.rn-menu[open] .rn-burger::before { transform: translateY(4px) rotate(45deg); }
.rn-menu[open] .rn-burger::after { transform: translateY(-4px) rotate(-45deg); }
.rn-menu-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: 1px solid var(--line); padding: 0.5rem var(--gutter) 1.5rem; max-height: calc(100svh - 4rem); overflow: auto; }
.rn-menu:not([open]) .rn-menu-panel { display: none; }
.rn-menu-panel ul { list-style: none; margin: 0; padding: 0; }
.rn-menu-panel li + li { border-top: 1px solid var(--line); }
.rn-menu-panel a { display: flex; align-items: center; min-height: 3.5rem; font-family: var(--font-display); font-weight: 600; font-size: var(--t-4); letter-spacing: -0.015em; text-decoration: none; }
.rn-menu-panel a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; }
@media (min-width: 960px) {
  .rn-header-row { min-height: 4.5rem; gap: 3rem; }
  .brand-logo { height: 1.625rem; }
  .rn-nav { display: block; }
  .rn-menu { display: none; }
}

/* ------------------------------------------------------------------ grille : une seule, 1 240 px, mêmes marges partout */
.rn-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
main > .rn-wrap { margin-block: var(--section); }
.rn-head { display: grid; gap: 0.75rem; margin-bottom: 2.5rem; }
.rn-head .rn-h2 { margin: 0; }
main > :last-child:not(.sticky-buy) { margin-bottom: 0; }

/* ------------------------------------------------------------------ l'anneau (signature)
   Cercle SVG aux coordonnées de l'image, même recadrage qu'elle (cover, calé à droite), masqué par la silhouette de
   l'objet : il passe derrière la Dôme. pathLength = 300 : un tiers = 100. */
.rn-ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible;
  -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: 100% 50%; mask-position: 100% 50%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
/* épaisseur en unités de l'image : environ 2 px à l'écran (l'image est réduite de 2 à 4 fois) */
.rn-ring circle { fill: none; stroke: var(--accent); stroke-width: 6.5; stroke-linecap: round; stroke-dasharray: 300 300; }
.rn-ring--scene circle { stroke-width: 8; }
@media (min-width: 1024px) { .rn-ring--scene circle { stroke-width: 4; } }
.rn-ring--scene { -webkit-mask-image: url("anneau/scene.png"); mask-image: url("anneau/scene.png"); }
.rn-ring--etape-1 { -webkit-mask-image: url("anneau/etape-1.png"); mask-image: url("anneau/etape-1.png"); }
.rn-ring--etape-2 { -webkit-mask-image: url("anneau/etape-2.png"); mask-image: url("anneau/etape-2.png"); }
.rn-ring--etape-3 { -webkit-mask-image: url("anneau/etape-3.png"); mask-image: url("anneau/etape-3.png"); }
/* Le bas de l'anneau passe derrière le socle : les tiers se comptent sur la partie visible (de 150° à 30°, 200 unités). */
.rn-ring[data-part="1"] circle { stroke-dasharray: 67 300; }
.rn-ring[data-part="2"] circle { stroke-dasharray: 133 300; }
@media (prefers-reduced-motion: no-preference) {
  .rn-ring--scene circle { animation: rn-ring-draw 1800ms 250ms var(--ease) both; }
  /* étapes : l'arc part du tiers précédent et avance d'un tiers quand l'étape entre à l'écran (anim.js) */
  .rn-step.reveal-wait .rn-ring circle { transition: stroke-dasharray 1200ms 350ms var(--ease); }
  .rn-step.reveal-wait:not(.is-revealed) .rn-ring[data-part="1"] circle { stroke-dasharray: 0 300; }
  .rn-step.reveal-wait:not(.is-revealed) .rn-ring[data-part="2"] circle { stroke-dasharray: 67 300; }
  .rn-step.reveal-wait:not(.is-revealed) .rn-ring[data-part="3"] circle { stroke-dasharray: 133 300; }
}
@keyframes rn-ring-draw { from { stroke-dasharray: 0 300; } to { stroke-dasharray: 300 300; } }

/* ------------------------------------------------------------------ accueil : premier écran
   Une scène gris chaud, coins 24 px, toute la grille. Ordinateur : le texte à gauche, l'image remplit la scène et
   l'objet se tient à droite. Téléphone : le texte, puis l'image, dans la même scène. */
main > .rn-hero { margin-top: 0.5rem; }
.rn-stage { position: relative; background: var(--stage); border-radius: var(--radius); overflow: hidden; display: grid; }
.rn-hero-text { position: relative; z-index: 1; display: grid; justify-items: start; gap: 1.25rem; padding: 2.25rem 1.5rem 0; }
.rn-hero .rn-h1 { max-width: 9.5em; }
.rn-rating { margin: -0.25rem 0 0; font-size: var(--t-2); }
.rn-rating a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.6rem; min-height: 2.75rem; text-decoration: none; color: var(--ink); }
.rn-rating a:hover span { text-decoration: underline; }
.rn-rating .review-stars { font-size: 1.0625rem; letter-spacing: 0.1em; }
.rn-rating b { font-weight: 600; }
.rn-hero-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 0.25rem; }
.rn-hero-price { margin: 0; }
.rn-hero-price .rn-price { font-size: var(--t-5); }
.rn-hero-notes .delivery-promise { margin: 0; font-size: var(--t-2); color: var(--muted); }
.rn-hero-media { position: relative; aspect-ratio: 10 / 9; margin-top: -0.5rem; }
.rn-hero-media img, .rn-hero-media picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.rn-proofs { list-style: none; margin: 0; padding: 1.25rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1rem; font-size: var(--t-2); }
.rn-proofs li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: 0.5rem; align-items: start; line-height: 1.35; }
.rn-proofs .icon { width: 1rem; height: 1rem; margin-top: 0.12em; color: var(--ink); stroke-width: 2.2; }
@media (min-width: 600px) { .rn-hero-text { padding: 3rem 2.5rem 0; } .rn-hero-media { aspect-ratio: 16 / 10; } }
/* Tablette : le titre en haut, puis la note, le prix et le bouton posés dans le vide gauche de l'image (fond uni de la
   scène, aucune jointure). L'image est calée en bas de la scène, à son format exact : rien n'est rogné. */
@media (min-width: 600px) and (max-width: 1023px) {
  .rn-stage { container-type: inline-size; }
  .rn-hero-text { padding: 3rem 2rem calc(56.25cqi - 10.5rem); }
  /* le bord gauche de l'anneau est à 48,6 % de l'image : la note, le prix et le bouton restent avant 46 % */
  .rn-hero-text > :not(.rn-h1) { max-width: calc(46cqi - 2rem); }
  .rn-hero-media { position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 16 / 9; margin: 0; }
}
@media (min-width: 1024px) {
  .rn-stage { aspect-ratio: 16 / 9; align-items: center; }
  .rn-hero-text { grid-area: 1 / 1; padding: 0 0 0 clamp(2.5rem, 4.5vw, 4rem); max-width: 46%; gap: 1.5rem; }
  .rn-hero-media { grid-area: 1 / 1; position: absolute; inset: 0; aspect-ratio: auto; margin: 0; }
  .rn-proofs { display: flex; justify-content: space-between; gap: 1.5rem; padding: 1.25rem clamp(2.5rem, 4.5vw, 4rem) 0; }
}

/* ------------------------------------------------------------------ accueil : code de bienvenue (une ligne, surface claire) */
main > .rn-offer { margin-block: clamp(2rem, 1.5rem + 2vw, 3rem) 0; }
.rn-offer-row { background: var(--surface); border-radius: var(--radius); padding: 1rem 1rem 1rem 1.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem; }
.rn-offer-text { margin: 0; line-height: 1.6; font-size: var(--t-2); }
.rn-offer-text strong { font-family: var(--font-display); font-size: var(--t-4); font-weight: 600; letter-spacing: -0.02em; margin-right: 0.35rem; }
.rn-offer-action { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.rn-offer-status { font-size: var(--t-2); font-weight: 500; }
.rn-offer-status:empty { display: none; }
[data-rn-code].is-done { display: none; }
[data-rn-code-status].is-done { animation: rn-pop 420ms var(--ease); }
@keyframes rn-pop { 0% { transform: scale(0.96); opacity: 0.4; } 100% { transform: none; opacity: 1; } }
@media (max-width: 599px) { .rn-offer-row { padding: 1.25rem 1.5rem; } }

/* ------------------------------------------------------------------ avis d'acheteurs du modèle (accueil) : la note en très grand */
.rn-reviews { display: grid; gap: 1.5rem; }
.review-summary { gap: 2rem; }
.review-summary-title { font-size: var(--t-6); line-height: 1.06; letter-spacing: -0.028em; max-width: 16ch; margin: 0; text-wrap: balance; }
.mr-summary { justify-content: start; gap: 1.5rem 3rem; align-items: center; }
.mr-average { display: grid; grid-template-columns: auto auto; align-items: baseline; justify-content: start; column-gap: 0.75rem; margin: 0; font-size: var(--t-2); color: var(--muted); }
.mr-average strong { grid-row: 1 / span 3; font-family: var(--font-display); font-size: var(--t-7); font-weight: 600; line-height: 0.9; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.mr-average .review-stars { font-size: var(--t-3); }
.mr-count { color: var(--muted); grid-column: 2; }
.mr-bars { min-width: 15rem; }
.mr-bar-bg { fill: var(--line); }
.mr-bar-fill { fill: var(--ink); }
.mr-source, .mr-bar-label, .mr-bar-n, .review-meta { font-size: var(--t-1); color: var(--muted); }
.mr-source { max-width: 32rem; }
.review-excerpts { gap: var(--gap); }
.review-excerpt { border: 0; border-radius: var(--radius); background: var(--surface); color: var(--ink); padding: 1.75rem; display: flex; flex-direction: column; gap: 0.75rem; }
.review-excerpt .review-head { margin: 0; }
.review-excerpt-body { font-family: var(--font-display); font-weight: 500; font-size: var(--t-4); line-height: 1.35; letter-spacing: -0.015em; margin: 0; flex: 1; }
.review-excerpt .review-meta { margin: 0; }
.review-summary-more { margin: -1.25rem 0 0; }
.review-summary-more a { font-weight: 500; }
/* Le chiffre vrai (compteur du moteur) ouvre la section, sur un filet. */
.rn-figure { margin: 0 0 1rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; }
.rn-figure strong { font-family: var(--font-display); font-size: var(--t-5); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.rn-figure > span { color: var(--muted); }
@media (min-width: 900px) {
  .review-summary { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 4rem; row-gap: 2.5rem; }
  .review-summary > * { grid-column: 1 / -1; }
  .review-summary > .review-summary-title { grid-column: 1; align-self: end; }
  .review-summary > .mr-summary { grid-column: 2; grid-row: 1; justify-content: end; }
  .review-excerpts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ ce qui change : une grande image, un titre, une phrase */
.rn-benefit-list { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 3.5rem) var(--gap); }
.rn-benefit { display: grid; gap: 1.25rem; align-content: start; }
.rn-benefit-media { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.rn-benefit-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.rn-benefit--habitue .rn-benefit-media img { object-position: 50% 82%; }
.rn-benefit--objet .rn-benefit-media img { object-position: 50% 60%; }
.rn-benefit-text { max-width: 32rem; }
.rn-benefit-text .rn-h3 { margin-bottom: 0.4rem; }
.rn-benefit-body { margin: 0; color: var(--muted); }
.rn-benefit-text .rn-small { margin-top: 0.75rem; }
@media (hover: hover) and (pointer: fine) { .rn-benefit:hover .rn-benefit-media img { transform: scale(1.025); } }
@media (min-width: 700px) { .rn-benefit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------ packs : trois cartes, le conseil cerclé de graphite */
.rn-pack-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }
.rn-pack { position: relative; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius); overflow: hidden; outline: 1.5px solid transparent; outline-offset: -1.5px; }
.rn-pack.is-best, .rn-card.is-best, .rn-choice.is-best { outline: 1.5px solid var(--ink); outline-offset: -1.5px; }
.rn-pack-badge { margin: 0; display: inline-flex; align-self: flex-start; background: var(--ink); color: #fff; font-size: var(--t-1); font-weight: 500; line-height: 1.2; padding: 0.35rem 0.8rem; border-radius: var(--pill); }
.rn-pack-media { display: block; aspect-ratio: 4 / 3; background: var(--stage); overflow: hidden; }
.rn-pack-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.rn-pack-body { display: flex; flex-direction: column; gap: 0.75rem; flex: 1; padding: 1.5rem 1.75rem 1.75rem; }
.rn-pack-body .rn-h4 { margin: 0; font-size: var(--t-5); letter-spacing: -0.02em; }
.rn-pack-list { font-size: var(--t-2); color: var(--muted); }
.rn-pack-list .icon { color: var(--muted); }
.rn-pack-price { margin: auto 0 0; padding-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; }
.rn-pack-price .rn-price { font-size: var(--t-6); line-height: 1; flex-basis: 100%; }
.rn-pack-ref { font-size: var(--t-2); color: var(--muted); white-space: nowrap; }
.rn-pack-ref s { text-decoration-thickness: 1px; }
.rn-pack-form { display: grid; margin-top: 0.5rem; }
@media (hover: hover) and (pointer: fine) { .rn-pack:hover .rn-pack-media img { transform: scale(1.03); } }
@media (min-width: 900px) { .rn-pack-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } }
.rn-guarantees { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem var(--gap); }
.rn-guarantees li { display: grid; grid-template-columns: 1.125rem minmax(0, 1fr); gap: 0.6rem; align-items: start; }
.rn-guarantees .icon { width: 1.125rem; height: 1.125rem; margin-top: 0.15em; color: var(--ink); stroke-width: 2.2; }
.rn-guarantees strong { display: block; font-weight: 600; line-height: 1.35; font-size: var(--t-2); }
.rn-guarantees span { display: block; font-size: var(--t-1); color: var(--muted); line-height: 1.45; margin-top: 0.15rem; }
@media (min-width: 900px) { .rn-guarantees { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------ trois étapes : trois scènes, l'anneau avance */
.rn-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem var(--gap); counter-reset: none; }
.rn-step { display: grid; gap: 1.25rem; align-content: start; }
.rn-step-media { position: relative; aspect-ratio: 6 / 5; border-radius: var(--radius); overflow: hidden; background: var(--stage); }
.rn-step-media img, .rn-step-media picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.rn-step-text { max-width: 24rem; }
.rn-step-text p { margin: 0; color: var(--muted); }
.rn-step-n { font-variant-numeric: tabular-nums; margin-right: 0.5em; color: var(--muted); font-weight: 500; }
@media (min-width: 760px) { .rn-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------ face au bac classique : cinq lignes à coches */
.rn-compare { display: grid; gap: 2.5rem; }
.rn-cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-3); }
.rn-cmp th, .rn-cmp td { padding: 1.1rem 0.5rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.rn-cmp thead th, .rn-cmp thead td { border-bottom: 1px solid var(--ink); padding-top: 0; }
.rn-cmp thead th { font-family: var(--font-display); font-size: var(--t-2); font-weight: 600; line-height: 1.2; text-align: center; width: 6rem; text-wrap: balance; }
.rn-cmp thead th:not(.is-us) { color: var(--muted); font-weight: 500; }
.rn-cmp tbody th { text-align: left; font-weight: 400; padding-left: 0; line-height: 1.4; }
.rn-cmp td { text-align: center; }
.rn-mark { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; line-height: 1; }
.rn-mark--yes .icon { width: 1.375rem; height: 1.375rem; color: var(--ink); stroke-width: 2.4; }
.rn-mark--no { font-size: var(--t-4); font-weight: 400; color: color-mix(in srgb, var(--ink) 45%, var(--bg)); }
.rn-compare-media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface); }
.rn-compare-media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 700px) { .rn-cmp thead th { width: 9rem; font-size: var(--t-3); } }
/* Sous 900 px, le tableau suffit : la Dôme vient d'être montrée trois fois au-dessus. */
@media (max-width: 899px) { .rn-compare-media { display: none; } }
@media (max-width: 419px) { .rn-cmp thead th { width: 4.75rem; } .rn-cmp th, .rn-cmp td { padding-inline: 0.35rem; } }
@media (min-width: 900px) {
  .rn-compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: center; }
  .rn-compare-media { order: -1; aspect-ratio: 1; }
}
/* Comparatif du moteur (autres produits) */
.cmp-title { font-size: var(--t-6); line-height: 1.06; letter-spacing: -0.028em; margin: 0 0 2rem; max-width: 22ch; }
.cmp-table { font-size: var(--t-3); border-collapse: separate; border-spacing: 0; }
.cmp-table th, .cmp-table td { padding: 1rem 1.25rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.cmp-table thead th { font-family: var(--font-display); font-size: var(--t-3); font-weight: 600; border-bottom: 1px solid var(--ink); }
.cmp-table th[scope="row"] { font-weight: 500; color: var(--muted); padding-left: 0; width: 24%; }
.cmp-table .is-us { background: var(--surface); font-weight: 500; }
.cmp-table tbody td:not(.is-us) { color: var(--muted); }
.cmp-note { font-size: var(--t-1); }
@media (max-width: 639px) {
  .cmp-scroll .cmp-table tr { border-bottom: 0; padding: 0 0 1.25rem; }
  .cmp-scroll .cmp-table th[scope="row"] { font-family: var(--font-display); font-size: var(--t-3); color: var(--ink); width: auto; padding-bottom: 0.5rem; }
  .cmp-scroll .cmp-table td { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.1rem; justify-content: start; text-align: left; padding: 0.75rem 1rem; }
  .cmp-scroll .cmp-table td::before { font-size: var(--t-1); font-weight: 600; }
  .cmp-scroll .cmp-table td.is-us { border-radius: var(--radius) var(--radius) 0 0; }
  .cmp-scroll .cmp-table td:not(.is-us) { background: var(--bg); border: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); }
}

/* ------------------------------------------------------------------ l'essai chez soi, la méthode repliée */
.rn-adapt { display: grid; gap: 2rem; }
.rn-adapt .rn-h2 { margin-bottom: 1rem; }
.rn-adapt .rn-lead a { color: var(--ink); white-space: nowrap; }
.rn-adapt-media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface); }
.rn-adapt-media img { width: 100%; height: 100%; object-fit: cover; object-position: 88% 50%; }
.rn-acc { margin-top: 2rem; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.rn-acc > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; cursor: pointer; font-weight: 500; list-style: none; }
.rn-acc > summary::-webkit-details-marker { display: none; }
.rn-acc > summary::after { content: "+"; font-size: var(--t-4); font-weight: 400; line-height: 1; transition: transform 220ms var(--ease); }
.rn-acc[open] > summary::after { transform: rotate(45deg); }
.rn-acc > p { margin: 0 0 1rem; }
.rn-adapt-steps { list-style: none; margin: 0; padding: 0; }
.rn-adapt-steps li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0.5rem; padding-block: 1rem; border-top: 1px solid var(--line); }
.rn-adapt-steps .rn-step-n { font-family: var(--font-display); font-size: var(--t-4); line-height: 1.2; margin: 0; }
.rn-adapt-steps .rn-h4 { font-size: var(--t-3); }
.rn-adapt-steps p { margin: 0; color: var(--muted); font-size: var(--t-2); }
@media (min-width: 700px) {
  .rn-adapt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, -1rem + 5vw, 4rem); align-items: center; }
  .rn-adapt-media { aspect-ratio: 1; }
}

/* ------------------------------------------------------------------ questions (brique du moteur) */
.rn-faq { display: grid; gap: 0.5rem; }
.faq { border-top: 1px solid var(--ink); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { padding: 1.2rem 2.75rem 1.2rem 0; font-weight: 500; font-size: var(--t-3); line-height: 1.4; }
.faq-item summary::after { font-size: var(--t-4); font-weight: 400; line-height: 1; top: 1.15rem; right: 0.25rem; color: var(--ink); }
.faq-answer { color: var(--muted); padding: 0 2.75rem 1.4rem 0; }
.faq-answer p { margin: 0 0 0.6em; max-width: 38rem; }
.rn-faq-list > p { margin: 1rem 0 0; }
@media (min-width: 900px) {
  .rn-faq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; }
  .rn-faq .rn-h2 { position: sticky; top: 7rem; }
}

/* ------------------------------------------------------------------ fiches du moteur (« reste de la gamme », « va avec », guides) */
.grid { gap: var(--gap); }
.card { border: 0; border-radius: var(--radius); background: var(--surface); transition: none; overflow: hidden; }
.card:hover { transform: none; box-shadow: none; }
.card-media { border-bottom: 0; background: #fff; }
.card-media img { transition: transform 700ms var(--ease); }
.card-body { padding: 1.25rem 1.5rem 1.5rem; gap: 0.3rem; }
.card-title { font-family: var(--font-display); font-size: var(--t-4); font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
.card-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--t-2); color: var(--muted); }
.card-price { font-family: var(--font-display); font-size: var(--t-4); font-weight: 600; padding-top: 0.5rem; }
.card-meta { font-size: var(--t-1); }
@media (max-width: 599px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .card-link { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; }
  .card-media { align-self: stretch; aspect-ratio: auto; min-height: 7.5rem; }
  .card-body { padding: 1rem 1.25rem 1rem 1rem; }
  .card-sub { -webkit-line-clamp: 1; }
}
@media (hover: hover) and (pointer: fine) { .card:hover .card-media img { transform: scale(1.03); } }

/* ------------------------------------------------------------------ dernier écran : bloc d'achat (brique du moteur) sur la scène */
.feature { border: 0; border-radius: var(--radius); background: var(--surface); padding: 1.5rem; gap: 1.5rem; }
.feature-media { border-radius: var(--radius); overflow: hidden; background: #fff; }
.feature-title { font-size: var(--t-5); letter-spacing: -0.02em; }
.feature-price { font-family: var(--font-display); font-size: var(--t-6); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }
.feature .pdp-shipping { font-weight: 500; }
.feature-delivery { color: var(--muted); font-size: var(--t-2); }
.feature-more a { font-weight: 500; font-size: var(--t-2); }
@media (min-width: 900px) { .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 2.5rem; gap: 3.5rem; } }
.rn-closing .rn-head { justify-items: start; }
.rn-closing-row { display: grid; gap: var(--gap); }
.rn-closing-media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 13; background: var(--stage); }
.rn-closing-media img { width: 100%; height: 100%; object-fit: cover; }
.rn-closing-row.has-photo .feature { grid-template-columns: minmax(0, 1fr); }
.rn-closing-row.has-photo .feature-media { display: none; }
@media (min-width: 700px) {
  .rn-closing-row.has-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .rn-closing-media { aspect-ratio: auto; min-height: 26rem; }
  .rn-closing-row.has-photo .feature { padding: 2rem; align-content: center; }
}
@media (min-width: 900px) {
  .rn-closing-row.has-photo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .rn-closing-media { min-height: 34rem; }
  .rn-closing-row.has-photo .feature { padding: 2.5rem; }
}
.page-home .site-footer { padding-bottom: 5.5rem; }
@media (min-width: 900px) { .page-home .site-footer { padding-bottom: 0; } }

/* ------------------------------------------------------------------ fiche produit */
.breadcrumb ol { padding-top: 0.5rem; font-size: var(--t-1); color: var(--muted); }
.breadcrumb a { color: var(--muted); }
.breadcrumb li + li::before { color: color-mix(in srgb, var(--ink) 30%, var(--bg)); }
.rn-pdp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; max-width: var(--wrap); margin-inline: auto; padding: 0.25rem var(--gutter) 0; }
.rn-pdp-media, .rn-pdp-panel { min-width: 0; }
.gallery-track { border: 0; border-radius: var(--radius); background: #fff; gap: 0; align-items: start; }
/* Chaque vue est carrée : une photo en portrait ne doit pas étirer toute la galerie. */
.gallery-slide { align-self: start; overflow: hidden; background: #fff; }
.gallery-slide > picture, .gallery-slide > img, .gallery-slide > picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
.gallery-slide img { object-fit: cover; }
.gallery-thumbs { gap: 0.6rem; padding-top: 0.75rem; }
.gallery-thumbs a { width: 4.5rem; height: 4.5rem; border: 0; border-radius: var(--radius); background: var(--surface); opacity: 1; overflow: hidden; outline: 1.5px solid transparent; outline-offset: -1.5px; transition: outline-color 180ms var(--ease); }
.gallery-thumbs a[aria-current="true"] { outline-color: var(--ink); }
.gallery-thumbs img { object-fit: cover; }
.gallery-nav, .gallery-zoom { border: 1px solid var(--line); border-radius: var(--pill); background: var(--bg); }
.gallery-count { border: 0; background: var(--bg); color: var(--ink); font-weight: 500; font-size: var(--t-1); border-radius: var(--pill); }
.lightbox, .lightbox::backdrop { background: var(--bg); }
.rn-pdp-title { font-size: var(--t-6); line-height: 1.06; letter-spacing: -0.028em; margin: 0.25rem 0 0.75rem; text-wrap: balance; }
.rn-pdp-sub { margin: 0 0 1.5rem; font-size: var(--t-3); line-height: 1.5; color: var(--muted); }
.rn-pdp-offer { margin: 0 0 1.5rem; padding: 0.85rem 1.25rem; background: var(--surface); border-radius: var(--radius); font-size: var(--t-2); line-height: 1.7; }
.rn-pdp-offer .link-button { min-height: 2.75rem; margin-left: 0.25rem; }
.rn-pdp-offer [data-rn-code-status]:empty { display: none; }
.pdp-price-block { border-top: 1px solid var(--line); padding-top: 1.5rem; margin-top: 0; }
.pdp-price { font-family: var(--font-display); font-size: var(--t-6); font-weight: 600; line-height: 1.05; letter-spacing: -0.025em; }
.pdp-shipping { font-weight: 500; margin-top: 0.35rem; }
.pdp-form { margin-top: 1.5rem; }
.pdp-form > .pdp-delivery, .pdp-form > .secure-line, .pdp-form > .delivery-note { order: 1; }
.qty-row input { width: 5.5rem; text-align: center; font-weight: 500; }
.pdp-delivery { background: var(--surface); border-radius: var(--radius); padding: 1rem 1.25rem; }
.stock-dot { background: var(--ink); border-radius: var(--pill); }
.variant-chip { border-radius: var(--pill); border-width: 1px; }
.pay-frame { stroke: var(--line); }
.pdp-tiers { color: var(--ink); }
.secure-text, .secure-text span { font-size: var(--t-2); }
@media (min-width: 480px) {
  .pdp-form { grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; }
  .pdp-form > * { grid-column: 1 / -1; }
  .pdp-form > .qty-row { grid-column: 1; }
  .pdp-form > .qty-row ~ [data-add-button] { grid-column: 2; }
  .pdp-form:has(.buy-choices) > [data-add-button] { grid-column: 1 / -1; }
}
/* Tablette (744 px et plus) : déjà deux colonnes, la galerie reste à l'écran pendant qu'on lit le bloc d'achat. */
@media (min-width: 744px) {
  .rn-pdp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: start; padding-top: 0.75rem; }
  .rn-pdp-media { position: sticky; top: 5.5rem; }
}
@media (min-width: 900px) {
  .rn-pdp { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, -1rem + 5vw, 4rem); }
  .rn-pdp-media { top: 6rem; }
}

/* Bloc d'achat (briques du moteur) : avis au-dessus du titre, bénéfices courts, cartes de pack, garantie, « va bien avec », accordéons. */
.rating-line { margin: 0; font-size: var(--t-2); }
.rating-line a { font-weight: 500; flex-wrap: wrap; gap: 0 0.5rem; padding-block: 0.4rem; text-decoration: none; color: var(--ink); }
.rating-line-text { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 0.22em; }
.pdp-highlights { margin: 0 0 1.5rem; gap: 0.5rem 1.5rem; font-size: var(--t-2); grid-template-columns: minmax(0, 1fr); }
.pdp-highlights li { gap: 0.6rem; line-height: 1.4; }
.pdp-highlights .icon { width: 1.125rem; height: 1.125rem; margin-top: 0.1em; color: var(--ink); stroke-width: 2.2; flex: 0 0 auto; }
@media (min-width: 480px) { .pdp-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.buy-choices-legend { font-weight: 500; margin-bottom: 0.75rem; }
.buy-choices-list { gap: 0.6rem; }
.buy-choice-card { border: 0; border-radius: var(--radius); background: var(--surface); padding: 1.1rem 1.4rem; gap: 0.2rem 1rem; min-height: 4.5rem; outline: 1.5px solid transparent; outline-offset: -1.5px; transition: outline-color 180ms var(--ease), background-color 180ms var(--ease); }
.buy-choice input:checked + .buy-choice-card { border-color: transparent; box-shadow: none; outline-color: var(--ink); background: var(--bg); }
.buy-choice input:focus-visible + .buy-choice-card { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .buy-choice:hover input:not(:checked) + .buy-choice-card { outline-color: color-mix(in srgb, var(--ink) 25%, var(--bg)); } }
.buy-choices[data-kind="pack"] .buy-choice-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.buy-choices[data-kind="pack"] .buy-choice-badge { grid-column: 1; grid-row: 1; }
.buy-choices[data-kind="pack"] .buy-choice-name { grid-column: 1; grid-row: auto; }
.buy-choices[data-kind="pack"] .buy-choice-detail { grid-column: 1; }
.buy-choices[data-kind="pack"] .buy-choice-price { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.buy-choices[data-kind="pack"] .buy-choice-save { grid-column: 1; justify-self: start; margin-top: 0.3rem; }
.buy-choice-badge { font-size: var(--t-1); font-weight: 500; letter-spacing: 0; text-transform: none; padding: 0.2rem 0.65rem; background: var(--ink); color: #fff; border-radius: var(--pill); margin-bottom: 0.25rem; justify-self: start; }
.buy-choice-name { font-family: var(--font-display); font-weight: 600; font-size: var(--t-3); line-height: 1.25; letter-spacing: -0.01em; }
.buy-choice-detail { font-size: var(--t-1); line-height: 1.45; color: var(--muted); }
.buy-choice-price { font-family: var(--font-display); font-weight: 600; font-size: var(--t-4); white-space: nowrap; text-align: right; line-height: 1.15; letter-spacing: -0.015em; }
.buy-choice-ref { font-family: var(--font-body); font-size: var(--t-1); font-weight: 400; margin-top: 0.1rem; letter-spacing: 0; }
.buy-choice-save { font-size: var(--t-1); font-weight: 600; color: var(--accent-ink); background: var(--accent); padding: 0.2rem 0.6rem; border-radius: var(--pill); white-space: nowrap; }
.pdp-form:has(.buy-choices) > .qty-row { display: none; }
.buy-guarantee { font-size: var(--t-2); font-weight: 500; justify-content: flex-start; }
.buy-guarantee .icon { width: 1.125rem; height: 1.125rem; color: var(--ink); }
.buy-choice input { border-radius: var(--pill); }
.delivery-note { font-size: var(--t-1); }
.pdp-ref { font-size: var(--t-2); margin-top: 0.35rem; color: var(--muted); }
.pdp-ref-save { display: inline-block; background: var(--accent); color: var(--accent-ink); font-weight: 600; padding: 0.15rem 0.6rem; border-radius: var(--pill); }
.goes-with { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.goes-with-title { font-family: var(--font-display); font-size: var(--t-4); font-weight: 600; letter-spacing: -0.015em; text-transform: none; color: var(--ink); margin: 0 0 0.75rem; }
.goes-with .mini { background: var(--surface); border-radius: var(--radius); padding: 0.6rem 1rem 0.6rem 0.6rem; }
.goes-with .mini-title { font-weight: 500; font-size: var(--t-2); line-height: 1.3; display: flex; align-items: center; min-height: 2.75rem; }
.goes-with .mini-price { font-size: var(--t-2); }
.pdp-accordions { margin-top: 2rem; border-top: 1px solid var(--ink); }
.pdp-acc { border-bottom-color: var(--line); }
.pdp-acc > summary { min-height: 3.5rem; font-weight: 500; font-size: var(--t-3); }
.pdp-acc > summary::after { font-size: var(--t-4); font-weight: 400; line-height: 1; color: var(--ink); }
.pdp-acc-body { font-size: var(--t-2); padding-bottom: 1.5rem; color: var(--muted); }
.pdp-acc-body h2, .pdp-acc-body h3 { font-size: var(--t-3); margin: 1.25rem 0 0.35rem; color: var(--ink); }
.pdp-acc-body > :first-child, .pdp-acc-body .prose > :first-child { margin-top: 0; }
.pdp-acc-body .faq { border-top: 0; }
.pdp-acc-body .faq-item:last-child { border-bottom: 0; }
.pdp-acc-body .faq-item summary { font-size: var(--t-2); padding-block: 0.9rem; color: var(--ink); }

/* Barre d'achat collante du téléphone et tiroir « Ajouté au panier » (moteur) : filets fins, pas d'ombre. */
.sticky-buy { background: var(--bg); border-top: 1px solid var(--line); }
.sticky-price { font-family: var(--font-display); font-weight: 600; font-size: var(--t-4); line-height: 1.15; letter-spacing: -0.015em; }
.sticky-sub { font-family: var(--font-body); font-weight: 400; font-size: var(--t-1); color: var(--muted); letter-spacing: 0; }
.sticky-buy .btn { min-height: 3rem; padding-inline: 1.5rem; }
.drawer { border-radius: var(--radius) var(--radius) 0 0; border-top: 0; background: var(--bg); }
.drawer-title { font-family: var(--font-display); font-weight: 600; font-size: var(--t-4); letter-spacing: -0.015em; }
.drawer-note { font-size: var(--t-1); }
.drawer-actions .btn { display: block; text-align: center; line-height: 1.25; padding-block: 0.9rem; }
.drawer-count { white-space: nowrap; }
.drawer-title .icon { color: var(--ink); stroke-width: 2.2; }
.drawer-img, .mini-media img { border: 0; border-radius: var(--radius); background: #fff; }
.icon-button { background: transparent; border: 1px solid var(--line); border-radius: var(--pill); }
.icon-button:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.cart-bump { border: 0; border-radius: var(--radius); background: var(--surface); }
@media (min-width: 640px) { .drawer { border-radius: var(--radius) 0 0 var(--radius); } }

/* Contenu d'un pack, autres choix */
.inbox { gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.inbox-item { background: var(--surface); border-radius: var(--radius); padding: 0.75rem 1.25rem 0.75rem 0.75rem; grid-template-columns: 4.5rem auto minmax(0, 1fr); }
.inbox-media img { width: 4.5rem; height: 4.5rem; border: 0; border-radius: var(--radius); background: #fff; }
.inbox-qty { font-family: var(--font-display); font-weight: 600; }
.inbox-label { font-weight: 500; line-height: 1.35; }
@media (min-width: 900px) { .inbox { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rn-choice-list-wrap { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }
.rn-choice { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.75rem 1rem; align-items: center; background: var(--surface); border-radius: var(--radius); padding: 0.75rem; }
.rn-choice-media { display: block; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--stage); }
.rn-choice-media img { width: 100%; height: 100%; object-fit: cover; }
.rn-choice-body { display: grid; gap: 0.3rem; justify-items: start; min-width: 0; }
.rn-choice-body .rn-h4 { margin: 0; }
.rn-choice-list { margin: 0; font-size: var(--t-2); color: var(--muted); }
.rn-choice .rn-pack-price { padding-top: 0.25rem; }
.rn-choice .rn-pack-price .rn-price { font-size: var(--t-5); flex-basis: auto; }
.rn-choice-cta { grid-column: 1 / -1; min-height: 2.75rem; }
@media (min-width: 700px) {
  .rn-choice-list-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rn-choice { grid-template-columns: 7.5rem minmax(0, 1fr) auto; padding: 1rem 1.5rem 1rem 1rem; }
  .rn-choice-cta { grid-column: auto; }
}

/* Caractéristiques, avis et guides de la fiche */
.specs th, .specs td { padding: 0.8rem 1rem 0.8rem 0; border-bottom-color: var(--line); font-size: var(--t-2); }
.specs th { font-weight: 500; }
.rn-reviews-full .pdp-section, .rn-after .pdp-section { border-top: 0; padding-block: 0; }
.rn-reviews-full .pdp-section + .pdp-section, .rn-after .pdp-section + .pdp-section { margin-top: var(--section); }
.rn-reviews-full .pdp-section > h2, .rn-after .pdp-section > h2 { font-size: var(--t-6); line-height: 1.06; letter-spacing: -0.028em; margin-bottom: 1.5rem; }
.reviews { gap: 0; }
.review { padding-block: 1.4rem; border-bottom-color: var(--line); }
.mr-body { font-size: var(--t-3); max-width: 38rem; }
.mr-more summary { font-weight: 500; }
.guide-link { border: 0; border-radius: var(--radius); background: var(--surface); padding: 1.25rem 1.5rem; }
.guide-link:hover .guide-link-title { text-decoration: underline; }
.guide-link-title { font-family: var(--font-display); font-weight: 600; font-size: var(--t-4); letter-spacing: -0.015em; }
.guide-link-desc, .guide-card-more { font-size: var(--t-2); color: var(--muted); }
.guide-list { gap: var(--gap); }

/* ------------------------------------------------------------------ collections */
.rn-coll-head { display: grid; gap: 0.75rem; }
main > .rn-coll-head { margin-block: 1rem 0; }
main > .rn-coll { margin-top: 2.5rem; }
.rn-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }
.rn-card { background: var(--surface); border-radius: var(--radius); overflow: hidden; position: relative; }
.rn-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--ink); }
.rn-card-media { display: block; aspect-ratio: 4 / 3; background: var(--stage); overflow: hidden; }
.rn-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.rn-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; flex: 1; padding: 1.5rem 1.75rem 1.75rem; }
.rn-card-title { font-family: var(--font-display); font-weight: 600; font-size: var(--t-5); line-height: 1.15; letter-spacing: -0.02em; }
.rn-card-sub { color: var(--muted); font-size: var(--t-2); }
.rn-card-price { margin-top: auto; padding-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; }
.rn-card-price .rn-price { font-size: var(--t-5); line-height: 1; }
@media (hover: hover) and (pointer: fine) { .rn-card:hover .rn-card-media img { transform: scale(1.03); } .rn-card:hover .rn-card-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } }
@media (min-width: 600px) { .rn-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .rn-cards[data-cols="3"], .rn-cards[data-cols="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------ panier */
main > .rn-cart { margin-top: 1.5rem; }
.rn-cart .rn-h1 { margin-bottom: 1.5rem; }
.rn-cart-offer { margin: 0 0 1.75rem; padding: 0.85rem 1.25rem; background: var(--surface); border-radius: var(--radius); font-size: var(--t-2); line-height: 1.7; max-width: 46rem; }
.rn-cart-offer .link-button { min-height: 2.75rem; margin-left: 0.25rem; }
.rn-cart-offer [data-rn-code-status]:empty { display: none; }
.cart-line { grid-template-columns: 5.5rem minmax(0, 1fr); border-bottom-color: var(--line); padding-bottom: 1.25rem; }
.cart-line img { width: 5.5rem; height: 5.5rem; border: 0; border-radius: var(--radius); background: var(--surface); }
.cart-line-title { font-family: var(--font-display); font-weight: 600; font-size: var(--t-3); line-height: 1.3; text-decoration: none; letter-spacing: -0.01em; }
a.cart-line-title:hover { text-decoration: underline; }
.cart-line-price { font-family: var(--font-display); font-weight: 600; font-size: var(--t-3); }
.qty { border: 1px solid var(--line); border-radius: var(--pill); background: transparent; overflow: hidden; }
.qty output { font-weight: 500; }
.cart-summary { border: 0; border-radius: var(--radius); background: var(--surface); padding: 1.75rem; }
.cart-code summary { font-weight: 500; }
.totals .total { border-top: 1px solid var(--ink); padding-top: 0.85rem; font-family: var(--font-display); font-weight: 600; font-size: var(--t-4); letter-spacing: -0.015em; }
.totals .cart-discount dt, .totals .cart-discount dd { color: var(--ink); font-weight: 600; }
.cart-code-status.is-ok { color: var(--ink); font-weight: 500; }
.cart-empty { grid-column: 1 / -1; font-size: var(--t-4); margin: 0.5rem 0 0; }

/* ------------------------------------------------------------------ pages de contenu */
main > .rn-page { margin-top: 1rem; }
.rn-page-head, .rn-page-body { max-width: 42rem; }
.rn-page-head { display: grid; gap: 0.6rem; margin-bottom: 2.5rem; }
.rn-page-body .prose { max-width: none; }
.prose { color: var(--ink); }
.prose h2 { font-size: var(--t-5); margin-top: 2em; letter-spacing: -0.02em; }
.prose h3 { font-size: var(--t-4); margin-top: 1.6em; }
.prose a { font-weight: 500; }
.prose blockquote { border-left: 0; padding: 1.25rem 1.5rem; background: var(--surface); border-radius: var(--radius); color: var(--ink); }
.prose th, .prose td { padding: 0.75rem 1rem 0.75rem 0; border-bottom-color: var(--line); }
.guide .prose h2 { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.guide .prose > p:first-child { font-size: var(--t-4); line-height: 1.45; letter-spacing: -0.01em; }
.contact-card { border: 0; border-radius: var(--radius); background: var(--surface); padding: 1.75rem; }
.contact-card h2 { font-size: var(--t-4); }
.small { font-size: var(--t-1); }
.guide-cards { gap: var(--gap); margin-top: 2rem; }
.guide-card { border: 0; border-radius: var(--radius); background: var(--surface); padding: 1.75rem; transition: none; }
.guide-card:hover { transform: none; box-shadow: none; }
.guide-card:hover .guide-card-title { text-decoration: underline; }
.guide-card .eyebrow { display: none; }
.guide-card-title { font-weight: 600; font-size: var(--t-4); letter-spacing: -0.015em; }
.guide-card-more { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 0.22em; }
.guide-card-more::after { content: none; }
.notfound .eyebrow { display: none; }
.page-title { font-size: var(--t-6); line-height: 1.06; letter-spacing: -0.028em; }
.section-title { font-size: var(--t-5); }

/* ------------------------------------------------------------------ pied de page (brique du moteur) : graphite, logo négatif */
.site-footer { background: var(--ink); color: #fff; border-top: 0; margin-top: var(--section); font-size: var(--t-2); }
.site-footer .wrap { max-width: var(--wrap); }
.footer-grid { padding-block: 4rem 2.5rem; }
/* Le logo du moteur est l'image de l'en-tête (graphite) : sur fond graphite, le lien porte la version négative. */
.footer-logo { display: inline-flex; line-height: 0; background: url("logo-negatif.svg") no-repeat left center / contain; }
.footer-logo .brand-logo { height: 1.625rem; opacity: 0; }
.site-footer .footer-note { color: color-mix(in srgb, #fff 68%, var(--ink)); }
.footer-brand .footer-note { font-family: var(--font-display); font-weight: 500; font-size: var(--t-4); line-height: 1.3; letter-spacing: -0.015em; max-width: 20ch; margin-top: 1rem; color: #fff; text-wrap: balance; }
.footer-title { color: color-mix(in srgb, #fff 60%, var(--ink)); font-weight: 500; letter-spacing: 0; text-transform: none; font-size: var(--t-2); }
.legal-list dt, .cart-bump-title, .eyebrow { text-transform: none; letter-spacing: 0; font-size: var(--t-2); font-weight: 500; }
.site-footer a, .site-footer .link-button { color: #fff; }
.footer-links a { text-decoration: none; }
.footer-law a, .footer-law .link-button { min-width: 2.75rem; }
.footer-links a:hover { text-decoration: underline; }
.footer-bottom { position: relative; border-top: 0; color: color-mix(in srgb, #fff 60%, var(--ink)); font-size: var(--t-1); }
.footer-bottom::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid color-mix(in srgb, #fff 16%, var(--ink)); }
.site-footer :focus-visible { outline-color: #fff; }
.page-product .site-footer { padding-bottom: 5.5rem; }
@media (min-width: 900px) { .page-product .site-footer { padding-bottom: 0; } }

/* ------------------------------------------------------------------ page de paiement (moteur) : mêmes champs, mêmes boutons.
   La feuille du moteur (commerce.css) est chargée après celle-ci : d'où le préfixe body. */
body .co-header { background: var(--bg); border-bottom-color: var(--line); }
body .co-header .brand img, body .co-header .brand-logo { height: 1.375rem; max-height: 1.375rem; }
body .co h1 { font-size: var(--t-6); letter-spacing: -0.028em; font-weight: 600; }
/* Titres de rubrique du paiement : pas d'étiquettes grises en capitales, un titre court en graphite. */
body .co-h, body .cm-invoice-parties h2 { font-family: var(--font-display); font-size: var(--t-3); font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: var(--ink); }
body .co-side { border: 0; padding: 1.75rem; background: var(--surface); border-radius: var(--radius); }
body .co-recap-toggle { border-color: transparent; }
body .co-thumb { border: 0; border-radius: var(--radius); background: #fff; }
body .co-thumb img { border-radius: var(--radius); }
body .co-qty { border-radius: var(--pill); background: var(--ink); color: #fff; font-weight: 600; }
body .co-total { font-family: var(--font-display); font-weight: 600; font-size: var(--t-4); border-top: 1px solid var(--ink); }
body .co-discount dt, body .co-discount dd { color: var(--ink); font-weight: 600; }
body .co-test { border-radius: var(--radius); }
body .co-footer { margin-top: 0; }
body .cm h1 { font-size: var(--t-6); letter-spacing: -0.028em; line-height: 1.06; font-weight: 600; }
body .cm-note, body .cm-pre { border: 0; border-radius: var(--radius); }

/* Fabricant et conformité (appareils électriques) : même volet que les autres, sous eux. */
.rn-compliance { border-bottom: 1px solid var(--line); }
.rn-compliance dl { margin: 0; display: grid; gap: 0.25rem; }
.rn-compliance dt { font-weight: 500; margin-top: 0.5rem; color: var(--ink); }
.rn-compliance dd { margin: 0; }

/* « Voir sa taille chez moi » et conseil sur photo (briques du moteur), côte à côte sur la fiche de la Dôme. */
.rn-place { background: var(--surface); border-radius: var(--radius); padding: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); }
.rn-place-grid { display: grid; gap: 2.5rem; }
.size-ar-title, .photo-advice-title { font-size: var(--t-5); line-height: 1.12; letter-spacing: -0.02em; }
.size-ar-lead, .photo-advice-lead, .size-ar-dims { font-size: var(--t-3); }
.size-ar-source, .photo-advice-privacy, .photo-advice-status, .size-ar-axes { font-size: var(--t-1); }
.size-ar-viewer { border-radius: var(--radius); background: var(--bg); overflow: hidden; }
.photo-advice-preview { border: 0; border-radius: var(--radius); }
@media (min-width: 900px) { .rn-place-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: start; } }

/* ------------------------------------------------------------------ mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  [data-rn-code-status].is-done { animation: none; }
  .rn-benefit-media img, .rn-pack-media img, .rn-card-media img, .card-media img { transition: none; }
}

/* ------------------------------------------------------------------ téléphone : packs et avis glissent au doigt (une carte et le bord de la suivante) */
/* Téléphone : packs, avis, bénéfices et étapes glissent au doigt. Les étapes gardent leur anneau : il avance quand
   l'étape entre à l'écran, donc en glissant. Tablette (700 à 899 px) : les avis glissent, deux cartes à la fois. */
@media (max-width: 699px) {
  .rn-pack-grid, .review-excerpts, .rn-benefit-list, .rn-steps { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 0.25rem; gap: 0.75rem; scrollbar-width: none; overscroll-behavior-x: contain; }
  .rn-pack-grid::-webkit-scrollbar, .review-excerpts::-webkit-scrollbar, .rn-benefit-list::-webkit-scrollbar, .rn-steps::-webkit-scrollbar { display: none; }
  .rn-pack, .review-excerpt, .rn-benefit, .rn-step { flex: 0 0 84%; scroll-snap-align: start; }
  .rn-benefit-media { aspect-ratio: 5 / 4; }
}
@media (min-width: 700px) and (max-width: 899px) {
  .review-excerpts { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 0.25rem; scrollbar-width: none; overscroll-behavior-x: contain; }
  .review-excerpts::-webkit-scrollbar { display: none; }
  .review-excerpt { flex: 0 0 46%; scroll-snap-align: start; }
  /* packs : une carte par ligne, l'image à gauche, le texte à droite */
  .rn-pack { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rn-pack-media { aspect-ratio: auto; min-height: 100%; }
  .rn-pack-media img { object-fit: contain; }
  /* bloc d'achat : la photo en colonne étroite garde l'objet entier (même fond que la scène) */
  .rn-closing-media img { object-fit: contain; }
}
/* Grands écrans : la grille s'élargit un peu, sans devenir démesurée. */
@media (min-width: 1800px) { :root { --wrap: calc(87.5rem + 2 * var(--gutter)); } }