/* =========================================================
   Refonte OnlyPhone : couche de design « atelier premium »
   (inspiration Emil Kowalski : retenue, précision, mouvement doux)
   Se charge après style.css : tout le contenu existant est conservé.
   ========================================================= */
 /* Police : Inter, hébergée sur le site (identique sur tous les appareils) */
@font-face { font-family: "Inter"; src: url(../fonts/inter-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
:root { --f-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --f-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }
.section h2, .hero h1 { letter-spacing: -.035em; }
body { font-feature-settings: "ss01", "cv11"; }
h1, h2, h3 { font-weight: 600; }
:root { --rf-ease: cubic-bezier(.23, 1, .32, 1); --rf-spring: cubic-bezier(.34, 1.4, .64, 1); --rf-ink: #0b0c0f; --rf-ink-2: #121418; --rf-ink-3: #181b20; --rf-line: rgba(243, 244, 246, .07); --rf-line-2: rgba(243, 244, 246, .13); }

/* ---------- Fond : encre profonde, halos laiton fixes, grain ---------- */
html[data-theme="dark"] { --ink: #0b0c0f; --glass: #121418; --line: var(--rf-line); --muted: #9095a0; }
html[data-theme="dark"] body { background: var(--rf-ink); }
html[data-theme="dark"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 45% at 80% -5%, rgba(201, 160, 108, .13), transparent 70%), radial-gradient(40% 40% at -5% 40%, rgba(201, 160, 108, .05), transparent 70%); }
.rf-grain { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .045;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.rf-spot { position: fixed; left: 0; top: 0; z-index: 0; width: 900px; height: 900px; margin: -450px 0 0 -450px; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(201, 160, 108, .09), transparent); transform: translate3d(70vw, 10vh, 0); will-change: transform; }
html:not([data-theme="dark"]) .rf-spot { background: radial-gradient(closest-side, rgba(201, 160, 108, .14), transparent); }

/* ---------- Sections : un seul fond continu, séparées par un filet ---------- */
html[data-theme="dark"] .section,
html[data-theme="dark"] .section-glass,
html[data-theme="dark"] .section-ink,
html[data-theme="dark"] .section-night { background: transparent; }
html[data-theme="dark"] .section + .section { border-top: 1px solid var(--rf-line); }
html[data-theme="dark"] .section-ink, html[data-theme="dark"] .section-night { background: linear-gradient(180deg, rgba(201, 160, 108, .035), transparent 40%); }
.section { padding: clamp(80px, 10vw, 130px) 0; position: relative; }

/* ---------- Typographie : plus grande, plus serrée ---------- */
.section h2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; }
.section .head p, .section .lead { font-size: 1.125rem; line-height: 1.6; max-width: 56ch; }
html[data-theme="dark"] .section .head p { color: var(--muted); }
.hero h1 { letter-spacing: -.045em; font-weight: 600; text-wrap: balance; }
/* Numéro de section discret, façon catalogue */
main { counter-reset: rf; }
.section .head { counter-increment: rf; }
.section .head::before { content: counter(rf, decimal-leading-zero); display: block; margin-bottom: 18px; font: 600 .8125rem/1 var(--f-text); letter-spacing: .18em; color: var(--brass); }

/* ---------- Surfaces : cartes à filet fin, dégradé discret, lueur qui suit la souris ---------- */
html[data-theme="dark"] :is(.repairs, .shop, .quotes, .pros, .facts, .maps, .promises, .flow) > li,
html[data-theme="dark"] :is(.brand-panel, .faq details, .rq, .screens, .about-photos img) {
  background-color: var(--rf-ink-2); background-image: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 60%);
  box-shadow: inset 0 0 0 1px var(--rf-line), inset 0 1px 0 rgba(255, 255, 255, .04); border-color: transparent; }
:is(.repairs, .shop, .quotes, .pros, .facts, .maps) > li, .brand-panel, .faq details { border-radius: 22px; transition: transform .6s var(--rf-ease), box-shadow .3s, background-color .3s; }
@media (hover: hover) and (pointer: fine) {
  :is(.repairs, .shop, .facts, .maps) > li:hover { transform: translateY(-3px); }
  html[data-theme="dark"] .rf-lit { background-image: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(201, 160, 108, .12), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 60%) !important;
    box-shadow: inset 0 0 0 1px rgba(236, 214, 176, .22), 0 24px 50px -28px rgba(0, 0, 0, .9) !important; }
}

/* FAQ : ouverture plus douce, plus aérée */
.faq details { padding-inline: 6px; }
html[data-theme="dark"] .faq details[open] { box-shadow: inset 0 0 0 1px rgba(236, 214, 176, .2); }

/* ---------- Boutons : ressort, appui tactile, flèche qui glisse ---------- */
.btn, .link-btn { transition: transform .3s var(--rf-spring), box-shadow .3s, background .2s, color .2s; }
.btn:active, .link-btn:active { transform: scale(.97); transition-duration: .1s; }
.btn-brass { box-shadow: var(--lg-brass-shadow), 0 10px 28px -12px rgba(201, 160, 108, .75); }
@media (hover: hover) { .btn-brass:hover { box-shadow: var(--lg-brass-shadow), 0 16px 38px -12px rgba(201, 160, 108, .95); } }

/* ---------- Champs du formulaire : focus net et lumineux ---------- */
html[data-theme="dark"] .field :is(input, select, textarea) { background: var(--rf-ink); box-shadow: inset 0 0 0 1px var(--rf-line-2); border-color: transparent; transition: box-shadow .2s; }
html[data-theme="dark"] .field :is(input, select, textarea):focus { box-shadow: inset 0 0 0 1px var(--brass), 0 0 0 4px rgba(201, 160, 108, .15); outline: none; }

/* ---------- Hero : halo laiton derrière le téléphone ---------- */
.hero-visual { position: relative; }
.hero-visual::before { content: ""; position: absolute; left: 50%; top: 42%; width: 560px; height: 560px; max-width: 120vw; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(201, 160, 108, .22), transparent), radial-gradient(closest-side, transparent 78%, rgba(243, 244, 246, .06) 79%, transparent 80%); }
.hero-visual > * { position: relative; z-index: 1; }
html[data-theme="dark"] .hero { background: transparent; }

/* Titre principal : reflet doré qui passe une fois toutes les quelques secondes sur « Lieusaint » */
.rf-gold { background: linear-gradient(100deg, #8a6232, #ecd6b0 30%, #c9a06c 55%, #ecd6b0 80%, #8a6232); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rf-sheen 6s linear 1.2s infinite; }
@keyframes rf-sheen { to { background-position: -200% 0; } }

/* ---------- Apparition au défilement : opacité, translation, léger flou ---------- */
.rf-rv { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity .9s var(--rf-ease), transform .9s var(--rf-ease), filter .9s var(--rf-ease); transition-delay: calc(var(--rf-d, 0) * 60ms); }
.rf-rv.rf-in { opacity: 1; transform: none; filter: none; }

/* ---------- Barre de progression de lecture ---------- */
.rf-progress { position: fixed; left: 0; top: 0; z-index: 95; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--brass-ink), var(--brass-hi)); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .rf-rv { opacity: 1; transform: none; filter: none; transition: none; }
  .rf-gold { animation: none; }
}

/* =========================================================
   Boutique en ligne : menu, annonce du haut, grande carte dans « Boutique »
   ========================================================= */
.rf-arr { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--rf-spring); }
a:hover > .rf-arr, a:hover .btn .rf-arr { transform: translate(2px, -2px); }
.rf-new { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font: 600 .75rem/1 var(--f-text); letter-spacing: .02em; color: #1a1206; background: linear-gradient(180deg, #f0dab6, #c9a06c); }
.rf-navshop { display: inline-flex !important; align-items: center; gap: 5px; color: var(--brass-hi) !important; }
.rf-announce { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 5px 14px 5px 5px; border-radius: 999px; font-size: .9rem; color: var(--on-dark, #f3f4f6);
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(236, 214, 176, .22); transition: background .2s, box-shadow .2s, transform .3s var(--rf-spring); }
.rf-announce:hover { background: rgba(201, 160, 108, .1); box-shadow: inset 0 0 0 1px rgba(236, 214, 176, .45); }
.rf-announce:active { transform: scale(.98); }

.rf-eshop { position: relative; display: grid; gap: 28px; align-items: center; margin-bottom: 28px; padding: clamp(26px, 4vw, 48px); border-radius: 28px; overflow: hidden; color: var(--on-dark, #f3f4f6); text-decoration: none;
  background: radial-gradient(70% 120% at 100% 0%, rgba(201, 160, 108, .28), transparent 60%), linear-gradient(180deg, #16181d, #0f1114);
  box-shadow: inset 0 0 0 1px rgba(236, 214, 176, .2), 0 40px 80px -40px rgba(0, 0, 0, .9); transition: transform .6s var(--rf-ease), box-shadow .3s; }
@media (min-width: 860px) { .rf-eshop { grid-template-columns: 1.1fr .9fr; } }
@media (hover: hover) { .rf-eshop:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(236, 214, 176, .4), 0 50px 90px -40px rgba(0, 0, 0, .95); } }
.rf-eshop h3 { margin: 16px 0 10px; font: 600 clamp(1.8rem, 3.4vw, 2.6rem)/1.05 var(--f-display); letter-spacing: -.035em; }
.rf-eshop p { max-width: 46ch; color: #a6acb6; font-size: 1.05rem; }
.rf-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 26px; padding: 0; list-style: none; }
.rf-cats li { padding: 6px 12px; border-radius: 999px; font-size: .85rem; color: var(--brass-hi); background: rgba(201, 160, 108, .1); box-shadow: inset 0 0 0 1px rgba(201, 160, 108, .2); }
.rf-eshop .btn { pointer-events: none; }
/* Illustration : trois coques en éventail + un verre trempé (dessin CSS, aucune image) */
.rf-eshop-art { position: relative; height: 280px; }
.rf-case { position: absolute; left: 50%; top: 50%; width: 120px; height: 240px; margin: -120px 0 0 -60px; border-radius: 26px; transition: transform .8s var(--rf-ease);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset 0 2px 0 rgba(255, 255, 255, .25), 0 30px 40px -20px rgba(0, 0, 0, .8); }
.rf-case::before { content: ""; position: absolute; left: 12px; top: 12px; width: 44px; height: 44px; border-radius: 13px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.rf-case.c1 { background: linear-gradient(160deg, #2a2b2e, #0d0e10); transform: translateX(-90px) rotate(-14deg); }
.rf-case.c2 { background: linear-gradient(160deg, #f0dab6, #b88d57); transform: translateY(-6px); z-index: 2; }
.rf-case.c3 { background: linear-gradient(160deg, #fbfbf9, #d6d5d0); transform: translateX(90px) rotate(14deg); }
.rf-glass { position: absolute; left: 50%; top: 50%; z-index: 3; width: 112px; height: 230px; margin: -100px 0 0 10px; border-radius: 24px; transform: rotate(8deg); transition: transform .8s var(--rf-ease);
  background: linear-gradient(120deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .06) 40%, rgba(255, 255, 255, .02) 60%, rgba(255, 255, 255, .2)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
@media (hover: hover) {
  .rf-eshop:hover .c1 { transform: translateX(-110px) rotate(-18deg); }
  .rf-eshop:hover .c3 { transform: translateX(110px) rotate(18deg); }
  .rf-eshop:hover .rf-glass { transform: translate(14px, -8px) rotate(12deg); }
}
.rf-toast { position: fixed; left: 50%; bottom: calc(24px + var(--dock-h, 0px)); z-index: 97; transform: translate(-50%, 20px); opacity: 0; padding: 12px 18px; border-radius: 14px; font-size: .9rem; color: #f3f4f6;
  background: #1b1e23; box-shadow: inset 0 0 0 1px rgba(243, 244, 246, .14), 0 16px 40px -12px rgba(0, 0, 0, .8); transition: transform .4s var(--rf-spring), opacity .3s; pointer-events: none; }
.rf-toast.on { transform: translate(-50%, 0); opacity: 1; }

/* =========================================================
   Section « Écran cassé ? » : 3 cartes Avant / Pendant / Après
   ========================================================= */
.rf-steps { display: grid; gap: 16px; margin-top: 48px; }
@media (min-width: 860px) { .rf-steps { grid-template-columns: repeat(3, 1fr); } }
.rf-step { margin: 0; padding: 22px; border-radius: 26px; background: var(--rf-ink-2); background-image: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 60%);
  box-shadow: inset 0 0 0 1px var(--rf-line), inset 0 1px 0 rgba(255, 255, 255, .04); color: #f3f4f6; transition: transform .6s var(--rf-ease), box-shadow .3s; }
.rf-shot { height: 280px; display: grid; place-items: center; margin-bottom: 22px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(60% 60% at 50% 60%, rgba(201, 160, 108, .14), transparent 70%), #101216; }
.rf-shot img { max-height: 240px; width: auto; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .55)); transition: transform .8s var(--rf-ease); }
.rf-step small { display: block; font: 600 .8125rem/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.rf-step h3 { margin: 10px 0 8px; font: 600 1.375rem/1.2 var(--f-display); letter-spacing: -.025em; }
.rf-step p { margin: 0; color: #9095a0; font-size: 1rem; line-height: 1.55; }
@media (hover: hover) and (pointer: fine) {
  .rf-step:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(236, 214, 176, .22), 0 24px 50px -28px rgba(0, 0, 0, .9); }
  .rf-step:hover .rf-shot img { transform: translateY(-6px) scale(1.03); }
}
/* En mode clair, les cartes restent sombres (vitrine) */
html:not([data-theme="dark"]) .rf-step { background-color: #16181c; }

/* =========================================================
   Avis : en-tête sur une ligne, avis sur une seule rangée qui défile de gauche à droite
   ========================================================= */
.reviews { grid-template-columns: 1fr !important; gap: 28px; }
@media (min-width: 860px) {
  .reviews-head { display: flex !important; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
  .reviews-head .h-sub { margin: 0; flex: 1 1 100%; }
  .reviews-head .score { margin: 0; }
}
/* Sans animation automatique (réglage « réduire les animations ») : rangée glissable, avance d'un avis toutes les 5 s */
.quotes:not(.is-marquee) { display: flex !important; flex-wrap: nowrap; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; columns: auto !important;
  padding: 4px var(--gutter) 16px; margin-inline: calc(var(--gutter) * -1); -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.quotes:not(.is-marquee)::-webkit-scrollbar { display: none; }
.quotes:not(.is-marquee) li { flex: none; width: min(360px, 84vw); margin: 0 !important; scroll-snap-align: start; break-inside: auto; }
.quotes:not(.is-marquee) blockquote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.quotes li { border-radius: 22px; }

/* Vraies photos produits dans la carte boutique (fond transparent) */
.rf-p { position: absolute; left: 50%; top: 50%; height: 250px; width: auto; transform-origin: 50% 90%; filter: drop-shadow(0 24px 28px rgba(0, 0, 0, .55)); transition: transform .8s var(--rf-ease); }
.rf-p.c1 { transform: translate(-50%, -50%) translateX(-110px) rotate(-12deg); }
.rf-p.c3 { transform: translate(-50%, -50%) translateX(110px) rotate(12deg); }
.rf-p.c2 { z-index: 2; height: 270px; transform: translate(-50%, -52%); }
.rf-p.g { z-index: 3; height: 230px; opacity: .9; transform: translate(-50%, -46%) translateX(70px) rotate(6deg); }
@media (hover: hover) {
  .rf-eshop:hover .rf-p.c1 { transform: translate(-50%, -50%) translateX(-130px) rotate(-16deg); }
  .rf-eshop:hover .rf-p.c3 { transform: translate(-50%, -50%) translateX(130px) rotate(16deg); }
  .rf-eshop:hover .rf-p.g { transform: translate(-50%, -50%) translateX(90px) rotate(10deg); }
}
@media (max-width: 520px) { .rf-p { height: 200px; } .rf-p.c2 { height: 215px; } .rf-p.g { height: 185px; } .rf-p.c1 { transform: translate(-50%, -50%) translateX(-80px) rotate(-12deg); } .rf-p.c3 { transform: translate(-50%, -50%) translateX(80px) rotate(12deg); } }

/* Avant-goût : 6 produits en rangée glissable */
.rf-teaser { margin: -8px 0 32px; }
.rf-teaser-h { margin: 0 0 14px; font: 600 .8125rem/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.rf-teaser ul { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 12px; margin: 0; padding: 0 0 6px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rf-teaser ul::-webkit-scrollbar { display: none; }
.rf-teaser li { scroll-snap-align: start; }
.rf-teaser a { display: block; padding: 12px 12px 14px; border-radius: 20px; text-decoration: none; color: inherit; background: var(--rf-ink-2); box-shadow: inset 0 0 0 1px var(--rf-line); transition: transform .5s var(--rf-ease), box-shadow .3s; }
html:not([data-theme="dark"]) .rf-teaser a { background: #fff; box-shadow: inset 0 0 0 1px rgba(22, 24, 28, .08), 0 10px 24px -16px rgba(22, 24, 28, .3); }
.rf-pi { display: grid; place-items: center; height: 150px; margin-bottom: 12px; border-radius: 14px; background: radial-gradient(60% 60% at 50% 55%, rgba(201, 160, 108, .14), transparent 70%); }
.rf-pi img { max-height: 132px; width: auto; transition: transform .6s var(--rf-ease); }
.rf-teaser strong { display: block; font-size: .95rem; font-weight: 600; letter-spacing: -.01em; }
.rf-teaser small { display: block; margin-top: 2px; font-size: .85rem; color: var(--muted); }
@media (hover: hover) { .rf-teaser a:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(201, 160, 108, .35), 0 18px 34px -20px rgba(0, 0, 0, .6); } .rf-teaser a:hover img { transform: scale(1.06) rotate(-2deg); } }
/* Coques Belkin en éventail (remplace les coques précédentes et le verre trempé) */
.rf-p.k1, .rf-p.k2, .rf-p.k3, .rf-p.k4 { height: 270px; }
.rf-p.k1 { transform: translate(-50%, -50%) translateX(-150px) rotate(-14deg); }
.rf-p.k4 { transform: translate(-50%, -50%) translateX(-52px) rotate(-5deg); z-index: 1; }
.rf-p.k3 { transform: translate(-50%, -50%) translateX(150px) rotate(14deg); z-index: 1; }
.rf-p.k2 { transform: translate(-50%, -52%) translateX(50px) rotate(4deg); z-index: 2; height: 290px; }
@media (hover: hover) {
  .rf-eshop:hover .rf-p.k1 { transform: translate(-50%, -50%) translateX(-175px) rotate(-18deg); }
  .rf-eshop:hover .rf-p.k4 { transform: translate(-50%, -52%) translateX(-60px) rotate(-7deg); }
  .rf-eshop:hover .rf-p.k3 { transform: translate(-50%, -50%) translateX(175px) rotate(18deg); }
  .rf-eshop:hover .rf-p.k2 { transform: translate(-50%, -55%) translateX(58px) rotate(5deg); }
}
@media (max-width: 520px) {
  .rf-p.k1, .rf-p.k2, .rf-p.k3, .rf-p.k4 { height: 210px; }
  .rf-p.k1 { transform: translate(-50%, -50%) translateX(-105px) rotate(-14deg); }
  .rf-p.k4 { transform: translate(-50%, -50%) translateX(-36px) rotate(-5deg); }
  .rf-p.k3 { transform: translate(-50%, -50%) translateX(105px) rotate(14deg); }
  .rf-p.k2 { transform: translate(-50%, -52%) translateX(36px) rotate(4deg); height: 225px; }
}

/* Annonce boutique en ligne mise en avant : mini-coques, bordure laiton lumineuse */
.rf-announce { position: relative; gap: 12px; padding: 7px 18px 7px 8px; font-size: 1rem; font-weight: 500; margin-bottom: 26px; isolation: isolate;
  background: linear-gradient(180deg, rgba(201, 160, 108, .16), rgba(201, 160, 108, .06)); box-shadow: inset 0 0 0 1px rgba(236, 214, 176, .45), 0 10px 30px -12px rgba(201, 160, 108, .55); }
.rf-announce::after { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; box-shadow: 0 0 0 0 rgba(201, 160, 108, .45); animation: rf-ring 2.8s var(--rf-ease) infinite; }
@keyframes rf-ring { 70%, 100% { box-shadow: 0 0 0 10px rgba(201, 160, 108, 0); } }
.rf-announce:hover { box-shadow: inset 0 0 0 1px rgba(236, 214, 176, .7), 0 14px 36px -12px rgba(201, 160, 108, .75); }
.rf-minis { display: inline-flex; align-items: center; padding: 3px 8px 3px 6px; border-radius: 999px; background: rgba(11, 12, 15, .55); box-shadow: inset 0 0 0 1px rgba(243, 244, 246, .12); }
.rf-minis img { width: auto; height: 26px; margin-left: -5px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .6)); transition: transform .4s var(--rf-spring); }
.rf-minis img:first-child { margin-left: 0; }
.rf-minis img:nth-child(1) { transform: rotate(-10deg); } .rf-minis img:nth-child(2) { transform: rotate(-3deg); }
.rf-minis img:nth-child(3) { transform: rotate(4deg); } .rf-minis img:nth-child(4) { transform: rotate(11deg); }
.rf-announce:hover .rf-minis img:nth-child(1) { transform: rotate(-16deg) translateX(-2px); }
.rf-announce:hover .rf-minis img:nth-child(4) { transform: rotate(17deg) translateX(2px); }
.rf-announce .rf-new { background: linear-gradient(180deg, #f6e4c4, #c9a06c); }
@media (max-width: 520px) { .rf-announce { font-size: .875rem; gap: 8px; padding-right: 12px; } .rf-minis img { height: 22px; } .rf-ann-txt { max-width: 19ch; line-height: 1.25; } }
@media (prefers-reduced-motion: reduce) { .rf-announce::after { animation: none; } }
.rf-announce, .rf-announce:hover { text-decoration: none !important; }
.rf-minis { padding: 4px 10px 4px 8px; }
.rf-minis img { height: 32px; margin-left: -2px; }
@media (max-width: 520px) { .rf-minis img { height: 26px; } }

/* Halo du haut centré sur le téléphone (taille proportionnelle au téléphone, mobile comme bureau) */
.hero-visual::before { display: none; }
.rp-stage::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: calc(676px * var(--rp-s) * .92); height: calc(676px * var(--rp-s) * .92); transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(201, 160, 108, .22), transparent), radial-gradient(closest-side, transparent 78%, rgba(243, 244, 246, .07) 79%, transparent 80%); }

/* « Écran cassé ? » sur mobile : les 3 étapes en slider horizontal */
@media (max-width: 859px) {
  .rf-steps { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 10px; overscroll-behavior-x: contain; }
  .rf-steps::-webkit-scrollbar { display: none; }
  .rf-step { flex: 0 0 82%; scroll-snap-align: center; }
  .rf-shot { height: 230px; }
  .rf-shot img { max-height: 200px; }
}
.rp-stage::before { width: min(calc(676px * var(--rp-s) * .8), 88vw); height: min(calc(676px * var(--rp-s) * .8), 88vw); }

/* Comparatif des écrans : vraie photo (setup gamer, Unsplash, licence libre) pour juger noirs et couleurs */
.demo.is-scene .sd-screen { background: #000 url(../img/ecran-gamer.webp) center / cover no-repeat; }
.demo.is-scene .sd-stars, .demo.is-scene .sd-moon, .demo.is-scene .sd-city { display: none; }
.demo.is-scene .sd-time { text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
/* Boutique physique d'abord, puis la boutique en ligne */
#vente .shop + .rf-eshop { margin-top: clamp(40px, 6vw, 64px); }