/* ============================================
   PAGE PRODUIT - GESTION DES RÉSEAUX SOCIAUX
   Même grammaire visuelle que creation-site-internet.css — mobile first
   Préfixe : rs-
   ============================================ */

/* Nuances dérivées de la charte (aucune couleur en dur) */
:root {
    --rs-texte-doux: color-mix(in srgb, var(--noir-olive) 68%, var(--creme-fouettee));
    --rs-texte-moyen: color-mix(in srgb, var(--noir-olive) 80%, var(--vert-persil));
    --rs-filet: color-mix(in srgb, var(--noir-olive) 16%, transparent);
    --rs-blanc: color-mix(in srgb, var(--creme-fouettee) 25%, white);
    --rs-ombre: 0 10px 26px color-mix(in srgb, var(--noir-olive) 8%, transparent);
    --rs-ombre-forte: 0 14px 40px color-mix(in srgb, var(--noir-olive) 12%, transparent);
}

/* ---------- Transitions ---------- */
.rs-hero a,
.rs-section a,
.rs-carte a,
.rs-devis a,
.rs-sticky-bar a,
.rs-form button {
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease,
                box-shadow 0.35s ease, transform 0.35s ease;
}

/* ---------- Conteneurs & rythme ---------- */
.rs-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.rs-section {
    padding: 3.5rem 0;
    position: relative;
}

.rs-section h2,
.rs-carte h2,
.rs-devis h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.75rem;
    line-height: 1.14;
    letter-spacing: -0.01em;
    color: var(--vert-persil);
    margin: 0 0 1.2rem;
    text-wrap: balance;
}

.rs-paragraph {
    margin: 0 0 1rem;
    font-size: 1rem;
    line-height: 1.85;
    max-width: 68ch;
    text-wrap: pretty;
}

.rs-paragraph-wide { max-width: 80ch; margin-top: 2rem; }

.rs-tagline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--jaune-oeuf);
    margin: 1.5rem 0;
}

.rs-tagline-red { color: var(--rouge-tomate); }

.rs-btn-block { width: 100%; }

/* ---------- HERO ---------- */
.rs-hero {
    position: relative;
    padding: 3rem 1.5rem 3.5rem;
    overflow: hidden;
}

.rs-hero-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 3rem 4rem;
    align-items: center;
}

.rs-hero-text {
    flex: 1 1 440px;
    min-width: 0;
}

.rs-hero h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin: 0 0 1.3rem;
    text-wrap: balance;
}

.rs-mark {
    background: linear-gradient(transparent 62%, var(--jaune-oeuf) 62%);
}

.rs-hero-lead {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.2rem !important;
    line-height: 1.5 !important;
    color: var(--vert-persil);
}

.rs-hero-lead strong { color: var(--rouge-tomate); font-weight: 800; }

.rs-hero-text p {
    font-size: 1.02rem;
    line-height: 1.85;
    max-width: 60ch;
    margin: 0 0 1rem;
}

.rs-hero-highlight {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--vert-persil);
    line-height: 1.6 !important;
    padding: 0.9rem 1.1rem;
    border-left: 4px solid var(--rouge-tomate);
    background: color-mix(in srgb, var(--jaune-oeuf) 22%, transparent);
    border-radius: 0 12px 12px 0;
}

.rs-network-chips {
    list-style: none;
    margin: 0 0 1.4rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.rs-network-chips li {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    padding: 0.4rem 0.9rem;
    border-radius: 50px;
    border: 2px solid var(--noir-olive);
    background: var(--rs-blanc);
}

.rs-network-chips li:nth-child(1) { background: var(--vert-persil); color: var(--creme-fouettee); border-color: var(--vert-persil); }
.rs-network-chips li:nth-child(2) { background: var(--rose-bonbon); }
.rs-network-chips li:nth-child(3) { background: var(--jaune-oeuf); }
.rs-network-chips .rs-chip-etc { border-style: dashed; background: transparent; }

.rs-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.8rem;
}

/* Stickers flottants */
.rs-hero-decoration { position: absolute; inset: 0; pointer-events: none; }
.rs-hero-decoration img { position: absolute; height: auto; }

.rs-hero-decoration .sticker-1 {
    top: 4%;
    right: 4%;
    width: 52px;
    animation: rsFloat1 5s ease-in-out infinite;
}

.rs-hero-decoration .sticker-2 {
    bottom: 5%;
    left: 2%;
    width: 60px;
    animation: rsFloat2 6s ease-in-out infinite 0.8s;
}

@keyframes rsFloat1 {
    0%, 100% { transform: translateY(0) rotate(14deg); }
    50%      { transform: translateY(-10px) rotate(14deg); }
}

@keyframes rsFloat2 {
    0%, 100% { transform: translateY(0) rotate(-8deg); }
    50%      { transform: translateY(-12px) rotate(-8deg); }
}

/* ---------- INFOGRAPHIE : MOIS TYPE ---------- */
.rs-month-wrap {
    flex: 1 1 300px;
    display: flex;
    justify-content: center;
}

.rs-month {
    position: relative;
    width: 100%;
    max-width: 360px;
    margin: 0;
    padding: 1.8rem 1.5rem 1.5rem;
    background: var(--rs-blanc);
    border: 2px solid var(--noir-olive);
    border-radius: 22px;
    box-shadow: 8px 8px 0 var(--vert-persil);
    transform: rotate(1.5deg);
}

.rs-month-sticker {
    position: absolute;
    top: -28px;
    left: -18px;
    width: 66px;
    transform: rotate(-16deg);
    filter: drop-shadow(0 5px 10px color-mix(in srgb, var(--noir-olive) 20%, transparent));
}

.rs-month-head {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    color: var(--vert-persil);
    margin: 0 0 1.1rem;
    padding-bottom: 0.9rem;
    border-bottom: 2px dashed var(--rs-filet);
}

.rs-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.rs-month-grid span {
    aspect-ratio: 1;
    border-radius: 8px;
    background: color-mix(in srgb, var(--creme-fouettee) 70%, var(--noir-olive) 4%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.72rem;
}

.rs-month-grid .rs-day-label {
    background: none;
    aspect-ratio: auto;
    font-size: 0.68rem;
    color: var(--rs-texte-doux);
    padding-bottom: 2px;
}

.rs-month-grid .rs-day-off { background: color-mix(in srgb, var(--noir-olive) 5%, transparent); }

.rs-month-grid .rs-day-post {
    background: var(--rouge-tomate);
    color: white;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--rouge-tomate) 35%, transparent);
    animation: rsPop 3.2s ease-in-out infinite;
}

.rs-month-grid .rs-day-post:nth-of-type(n) { animation-delay: 0s; }

.rs-month-grid .rs-day-meet {
    background: var(--vert-persil);
    color: var(--creme-fouettee);
}

@keyframes rsPop {
    0%, 85%, 100% { transform: scale(1); }
    92%           { transform: scale(1.12); }
}

.rs-month-legend {
    list-style: none;
    margin: 1.2rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.86rem;
    line-height: 1.45;
}

.rs-month-legend li { display: flex; align-items: center; gap: 0.6rem; }

.rs-legend-dot {
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 4px;
}

.rs-legend-post { background: var(--rouge-tomate); }
.rs-legend-meet { background: var(--vert-persil); }
.rs-legend-net  { background: var(--jaune-oeuf); border-radius: 50%; }

.rs-month-price {
    margin-top: 1.2rem;
    padding: 0.9rem 1rem;
    background: var(--vert-persil);
    border-radius: 14px;
    text-align: center;
    color: var(--creme-fouettee);
    font-family: 'Montserrat', sans-serif;
}

.rs-month-price span { display: block; font-size: 0.78rem; font-weight: 600; opacity: 0.85; }
.rs-month-price strong { display: block; font-size: 1.45rem; font-weight: 800; color: var(--jaune-oeuf); white-space: nowrap; }

/* ---------- BANDEAU DÉFILANT ---------- */
.rs-marquee {
    background: var(--vert-persil);
    border-top: 2px solid var(--noir-olive);
    border-bottom: 2px solid var(--noir-olive);
    padding: 0.8rem 0;
    overflow: hidden;
}

.rs-marquee-track {
    display: flex;
    width: max-content;
    animation: rsMarquee 30s linear infinite;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--creme-fouettee);
}

.rs-marquee-track span { padding-right: 1.6rem; }
.rs-marquee-track .rs-marquee-sep { color: var(--jaune-oeuf); }

@keyframes rsMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ---------- SPLIT GÉNÉRIQUE ---------- */
.rs-split {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem 4rem;
    align-items: center;
}

.rs-split-top { align-items: flex-start; }

.rs-split-text { flex: 1 1 360px; min-width: 0; }

/* ---------- INFOGRAPHIE : BULLES DE QUESTIONS ---------- */
.rs-bubbles {
    flex: 1 1 380px;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 0.5rem 0 1rem;
}

.rs-bubble {
    position: relative;
    margin: 0;
    max-width: 88%;
    padding: 0.85rem 1.2rem;
    border-radius: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.45;
    border: 2px solid var(--noir-olive);
    box-shadow: 4px 4px 0 var(--noir-olive);
}

.rs-bubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    width: 16px;
    height: 16px;
    background: inherit;
    border-right: 2px solid var(--noir-olive);
    border-bottom: 2px solid var(--noir-olive);
}

.rs-bubble:nth-child(odd)  { align-self: flex-start; border-bottom-left-radius: 4px; }
.rs-bubble:nth-child(even) { align-self: flex-end; border-bottom-right-radius: 4px; }
.rs-bubble:nth-child(odd)::after  { left: 22px; transform: rotate(45deg); }
.rs-bubble:nth-child(even)::after { right: 22px; transform: rotate(45deg); }

.rs-bubble-1 { background: var(--jaune-oeuf); transform: rotate(-1.5deg); }
.rs-bubble-2 { background: var(--rose-bonbon); transform: rotate(1.5deg); }
.rs-bubble-3 { background: var(--rs-blanc); transform: rotate(-0.8deg); }
.rs-bubble-4 { background: var(--vert-persil); color: var(--creme-fouettee); transform: rotate(1deg); }
.rs-bubble-5 { background: var(--rs-blanc); transform: rotate(-1deg); }

.rs-bubbles-head {
    position: absolute;
    right: -6px;
    bottom: -20px;
    width: 60px;
    transform: rotate(10deg);
    opacity: 0.9;
    pointer-events: none;
}

/* Note "recette" sous les bulles */
.rs-recipe-note {
    margin-top: 3rem;
    padding: 1.6rem 1.5rem;
    border: 2px dashed var(--vert-persil);
    border-radius: 20px;
    text-align: center;
}

.rs-recipe-trio {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.rs-recipe-trio span:not(.rs-plus) {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    background: var(--vert-persil);
    color: var(--creme-fouettee);
}

.rs-recipe-trio span:nth-child(3) { background: var(--rouge-tomate) !important; color: white !important; }
.rs-recipe-trio span:nth-child(5) { background: var(--jaune-oeuf) !important; color: var(--noir-olive) !important; }

.rs-plus {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--vert-persil);
}

.rs-recipe-note p {
    margin: 0 auto;
    max-width: 62ch;
    font-size: 1rem;
    line-height: 1.8;
}

.rs-recipe-note .rs-tagline { margin: 0.8rem auto 0; }

/* ---------- INTRO SPLIT ---------- */
.rs-intro-split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.2rem 3rem;
    margin-bottom: 2.4rem;
}

.rs-intro-split h2 { flex: 1 1 420px; margin-bottom: 0; }

.rs-intro-split-text {
    flex: 1 1 320px;
    padding-top: 0.4rem;
}

.rs-intro-split-text p {
    margin: 0 0 0.8rem;
    font-size: 0.98rem;
    line-height: 1.8;
    color: var(--rs-texte-moyen);
}

.rs-spoiler {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.05rem !important;
    color: var(--noir-olive) !important;
}

.rs-spoiler span {
    display: inline-block;
    margin-right: 0.5rem;
    padding: 0.15rem 0.6rem;
    border-radius: 6px;
    background: var(--rouge-tomate);
    color: white;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    vertical-align: 2px;
}

/* ---------- INFOGRAPHIE : 5 OBJECTIFS ---------- */
.rs-goals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.4rem;
}

.rs-goal {
    position: relative;
    padding: 1.6rem 1.5rem 1.7rem;
    background: var(--rs-blanc);
    border-radius: 18px;
    box-shadow: var(--rs-ombre);
    border-top: 6px solid var(--rs-goal-color, var(--vert-persil));
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rs-goal:hover { transform: translateY(-4px); box-shadow: var(--rs-ombre-forte); }

.rs-goal-yellow { --rs-goal-color: var(--jaune-oeuf); }
.rs-goal-pink   { --rs-goal-color: var(--rose-bonbon); }
.rs-goal-red    { --rs-goal-color: var(--rouge-tomate); }
.rs-goal-green  { --rs-goal-color: var(--vert-persil); }
.rs-goal-dark   { --rs-goal-color: var(--noir-olive); }

.rs-goal-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.rs-goal-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.6rem;
    height: 2.6rem;
    padding: 0 0.5rem;
    border-radius: 12px;
    background: var(--vert-persil);
    color: var(--creme-fouettee);
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1;
    letter-spacing: 0.02em;
}

.rs-goal-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rs-goal-color) 22%, var(--rs-blanc));
}

.rs-goal-icon svg {
    display: block;
    width: 1.7rem;
    height: 1.7rem;
    fill: none;
    stroke: var(--vert-persil);
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}

.rs-goal-dark .rs-goal-icon { background: color-mix(in srgb, var(--noir-olive) 10%, var(--rs-blanc)); }
.rs-goal-dark .rs-goal-num  { background: var(--noir-olive); }
.rs-goal-red .rs-goal-num   { background: var(--rouge-tomate); color: white; }
.rs-goal-yellow .rs-goal-num { background: var(--jaune-oeuf); color: var(--noir-olive); }
.rs-goal-pink .rs-goal-num  { background: var(--rose-bonbon); color: var(--noir-olive); }

.rs-goal h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.08rem;
    line-height: 1.35;
    color: var(--vert-persil);
    margin: 0 0 0.7rem;
}

.rs-goal p {
    margin: 0 0 0.6rem;
    font-size: 0.93rem;
    line-height: 1.7;
    color: var(--rs-texte-moyen);
}

.rs-goal p:last-child { margin-bottom: 0; }

/* Note jaune (avertissement) */
.rs-note {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem 1.5rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 2.4rem;
    padding: 1.6rem 1.6rem;
    background: var(--jaune-oeuf);
    border-radius: 18px;
    box-shadow: var(--rs-ombre);
}

.rs-note-sticker {
    position: absolute;
    top: -24px;
    right: 18px;
    width: 54px;
    transform: rotate(14deg);
    pointer-events: none;
}

.rs-note p { flex: 1 1 380px; margin: 0; font-size: 0.98rem; line-height: 1.7; }

.rs-note .btn { flex: none; background: var(--noir-olive); color: var(--creme-fouettee); }
.rs-note .btn:hover { background: var(--rouge-tomate); color: white; }

/* ---------- SECTION TEINTÉE : LE BON RÉSEAU ---------- */
.rs-section-tint {
    background: color-mix(in srgb, var(--rose-bonbon) 16%, var(--creme-fouettee));
    overflow: hidden;
}

.rs-tint-hand {
    position: absolute;
    right: 2%;
    bottom: 4%;
    width: 60px;
    opacity: 0.5;
    transform: rotate(-14deg);
    pointer-events: none;
}

.rs-cliches {
    list-style: none;
    margin: 1.2rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.rs-cliches li {
    position: relative;
    padding-left: 2rem;
    font-size: 1rem;
    line-height: 1.6;
}

.rs-cliches li::before {
    content: '?';
    position: absolute;
    left: 0;
    top: 0.05rem;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--noir-olive);
    color: var(--creme-fouettee);
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Entonnoir */
.rs-funnel {
    flex: 1 1 360px;
    min-width: 0;
    padding: 1.6rem 1.4rem;
    background: var(--rs-blanc);
    border-radius: 22px;
    box-shadow: var(--rs-ombre-forte);
}

.rs-funnel-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rouge-tomate);
    text-align: center;
    margin: 0 0 1.1rem;
}

.rs-funnel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.rs-funnel-list li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.35;
    background: color-mix(in srgb, var(--vert-persil) 10%, transparent);
    color: var(--vert-persil);
}

/* L'entonnoir se resserre étape par étape */
.rs-funnel-list li:nth-child(1) { width: 100%; }
.rs-funnel-list li:nth-child(2) { width: 92%; background: color-mix(in srgb, var(--vert-persil) 18%, transparent); }
.rs-funnel-list li:nth-child(3) { width: 84%; background: color-mix(in srgb, var(--vert-persil) 28%, transparent); }
.rs-funnel-list li:nth-child(4) { width: 76%; background: color-mix(in srgb, var(--vert-persil) 40%, transparent); }

.rs-funnel-list li span {
    flex: none;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--rouge-tomate);
}

.rs-funnel-arrow { display: flex; justify-content: center; margin: 0.4rem 0; }

.rs-funnel-arrow svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: var(--rouge-tomate);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rs-funnel-result {
    margin: 0 auto;
    width: 68%;
    padding: 0.9rem 1rem;
    border-radius: 50px;
    background: var(--vert-persil);
    color: var(--creme-fouettee);
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.35;
}

.rs-funnel-result strong { color: var(--jaune-oeuf); }

/* Exemples */
.rs-examples {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.2rem;
    margin-top: 2.8rem;
}

.rs-example {
    padding: 1.4rem 1.3rem;
    border-radius: 18px;
    background: var(--rs-blanc);
    border: 2px solid var(--vert-persil);
    text-align: center;
}

.rs-example p { margin: 0; }

.rs-example-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rs-texte-doux);
    margin-bottom: 0.6rem !important;
}

.rs-example-case {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
}

.rs-example-arrow {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--rouge-tomate);
    margin: 0.3rem 0 !important;
}

.rs-example-net { font-size: 0.93rem; line-height: 1.6; }
.rs-example-net strong { color: var(--vert-persil); }

.rs-example-no { border-style: dashed; border-color: var(--rouge-tomate); }
.rs-example-no .rs-example-case { text-decoration: line-through; text-decoration-color: var(--rouge-tomate); text-decoration-thickness: 2px; }
.rs-example-no .rs-example-net strong { color: var(--rouge-tomate); }

.rs-section a:not(.btn) { color: var(--vert-persil); }
.rs-section a:not(.btn):hover { color: var(--rouge-tomate); }

/* ---------- BANDEAU DE MOTIF ---------- */
.rs-pattern-band {
    height: 56px;
    background-image: url('/assets/motifs/carreauxverts.png');
    background-size: 200px;
    background-repeat: repeat;
}

.rs-pattern-band.pattern-red { background-image: url('/assets/motifs/carreauxrouges.png'); }

/* ---------- LA CARTE (PRESTATIONS, fond vert) ---------- */
.rs-carte {
    position: relative;
    background: var(--vert-persil);
    padding: 3.5rem 0;
    overflow: hidden;
}

.rs-carte h2 { color: var(--creme-fouettee); }
.rs-carte > .rs-container > .rs-paragraph { color: color-mix(in srgb, var(--creme-fouettee) 88%, transparent); }

.rs-carte-hand {
    position: absolute;
    right: 3%;
    top: 3%;
    width: 64px;
    opacity: 0.4;
    transform: rotate(16deg);
    pointer-events: none;
}

.rs-carte-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.8rem;
    margin: 1.8rem 0 2.6rem;
}

.rs-carte-nav a {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1rem 1.2rem;
    border: 1px solid color-mix(in srgb, var(--creme-fouettee) 28%, transparent);
    border-radius: 14px;
    text-decoration: none;
    color: var(--creme-fouettee);
    font-family: 'Montserrat', sans-serif;
}

.rs-carte-nav a:hover { border-color: var(--jaune-oeuf); background: color-mix(in srgb, var(--creme-fouettee) 8%, transparent); }
.rs-carte-nav span { font-weight: 600; font-size: 0.9rem; }
.rs-carte-nav strong { font-weight: 800; font-size: 1.1rem; color: var(--jaune-oeuf); white-space: nowrap; }

/* Bloc principal : rédaction */
.rs-offer { scroll-margin-top: 110px; }

.rs-offer h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.35rem;
    line-height: 1.25;
    margin: 0 0 0.6rem;
    text-wrap: balance;
}

.rs-offer-main {
    padding: 2rem 1.5rem;
    border-radius: 24px;
    background: color-mix(in srgb, var(--creme-fouettee) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--creme-fouettee) 22%, transparent);
}

.rs-offer-main h3 { color: var(--creme-fouettee); }

.rs-offer-head {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 3rem;
    margin-bottom: 2.2rem;
}

.rs-offer-head > div:first-child { flex: 1 1 280px; }

.rs-offer-from {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: color-mix(in srgb, var(--creme-fouettee) 80%, transparent);
}

.rs-offer-from strong { display: block; font-size: 1.7rem; font-weight: 800; color: var(--jaune-oeuf); white-space: nowrap; }

.rs-offer-intro { flex: 1 1 380px; }

.rs-offer-intro p {
    margin: 0 0 0.8rem;
    font-size: 0.97rem;
    line-height: 1.8;
    color: color-mix(in srgb, var(--creme-fouettee) 88%, transparent);
}

.rs-offer-intro strong { color: var(--creme-fouettee); }

.rs-formulas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 2.2rem 1.4rem;
}

.rs-formula {
    position: relative;
    padding: 2rem 1.5rem 1.8rem;
    background: var(--creme-fouettee);
    border-radius: 20px;
    color: var(--noir-olive);
    box-shadow: 0 16px 40px color-mix(in srgb, var(--noir-olive) 25%, transparent);
}

.rs-formula-plus { background: var(--jaune-oeuf); }

.rs-formula-sticker {
    position: absolute;
    top: -26px;
    right: -8px;
    width: 60px;
    transform: rotate(14deg);
    filter: drop-shadow(0 5px 10px color-mix(in srgb, var(--noir-olive) 30%, transparent));
    pointer-events: none;
}

.rs-formula-name {
    margin: 0 0 0.4rem;
    padding-right: 2.6rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rouge-tomate);
}

.rs-formula-plus .rs-formula-name { color: var(--vert-persil); }

.rs-formula-price {
    margin: 0 0 1rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    line-height: 1.1;
    color: var(--vert-persil);
    white-space: nowrap;
}

.rs-formula-price span { font-size: 0.95rem; font-weight: 600; }


/* Badge en tête de formule */
.rs-formula-badge {
    display: inline-block;
    margin: 0 0 0.9rem;
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    background: var(--vert-persil);
    color: var(--jaune-oeuf);
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.rs-formula-badge-light { background: var(--rouge-tomate); color: white; }

/* Infographie : le rythme de publication sur 4 semaines */
.rs-rhythm {
    margin: 0 0 1.2rem;
    padding: 0.9rem 1rem 1rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--vert-persil) 8%, var(--rs-blanc));
}

.rs-formula-plus .rs-rhythm { background: color-mix(in srgb, var(--rs-blanc) 55%, transparent); }

.rs-rhythm-label {
    margin: 0 0 0.7rem;
    font-size: 0.86rem;
    line-height: 1.5;
}

.rs-rhythm-label strong { color: var(--vert-persil); }

.rs-rhythm-weeks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.rs-rhythm-weeks li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.rs-rhythm-week {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    color: var(--rs-texte-doux);
}

.rs-rhythm-tiles {
    display: flex;
    gap: 4px;
    width: 100%;
    justify-content: center;
}

/* Une tuile = une publication (mini-post : bandeau image + 2 lignes de texte) */
.rs-rhythm-post {
    position: relative;
    flex: 0 1 34px;
    aspect-ratio: 4 / 5;
    border-radius: 6px;
    background: var(--rouge-tomate);
    box-shadow: 0 3px 8px color-mix(in srgb, var(--rouge-tomate) 30%, transparent);
    animation: rsPostIn 0.5s ease both;
}

.rs-rhythm-post::before {
    content: '';
    position: absolute;
    left: 14%;
    right: 14%;
    top: 12%;
    height: 38%;
    border-radius: 3px;
    background: color-mix(in srgb, white 80%, transparent);
}

.rs-rhythm-post::after {
    content: '';
    position: absolute;
    left: 14%;
    right: 30%;
    bottom: 16%;
    height: 10%;
    border-radius: 2px;
    background: color-mix(in srgb, white 60%, transparent);
    box-shadow: 0 -6px 0 color-mix(in srgb, white 60%, transparent);
}

.rs-formula-plus .rs-rhythm-post {
    background: var(--vert-persil);
    box-shadow: 0 3px 8px color-mix(in srgb, var(--vert-persil) 30%, transparent);
}

.rs-rhythm-weeks li:nth-child(2) .rs-rhythm-post { animation-delay: 0.1s; }
.rs-rhythm-weeks li:nth-child(3) .rs-rhythm-post { animation-delay: 0.2s; }
.rs-rhythm-weeks li:nth-child(4) .rs-rhythm-post { animation-delay: 0.3s; }

@keyframes rsPostIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rs-formula-meta {
    list-style: none;
    margin: 0 0 1.2rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.rs-formula-meta li {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.74rem;
    padding: 0.3rem 0.7rem;
    border-radius: 50px;
    background: color-mix(in srgb, var(--vert-persil) 12%, transparent);
    color: var(--vert-persil);
}

.rs-formula-plus .rs-formula-meta li { background: color-mix(in srgb, var(--noir-olive) 10%, transparent); color: var(--noir-olive); }

.rs-formula-list-title {
    margin: 0 0 0.6rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--noir-olive);
}

.rs-check-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.rs-check-list li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 0.93rem;
    line-height: 1.6;
}

.rs-check-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: var(--rouge-tomate);
}

.rs-formula-same { margin: 0; font-size: 1rem; line-height: 1.8; }


.rs-offer-cta { margin-top: 2rem; text-align: center; }

/* Séparateur entre l'abonnement et les prestations ponctuelles */
.rs-carte-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 3.5rem 0 2.6rem;
}

.rs-carte-divider-line {
    flex: 1;
    height: 0;
    border-top: 2px dashed color-mix(in srgb, var(--creme-fouettee) 40%, transparent);
}

.rs-carte-divider-label {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    background: var(--jaune-oeuf);
    color: var(--noir-olive);
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
}

.rs-carte-divider-label img { width: 26px; height: 26px; object-fit: contain; }

/* Duo : création + optimisation */
.rs-offers-duo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 2.4rem 1.4rem;
}

.rs-offer-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem 1.8rem;
    background: var(--creme-fouettee);
    border-radius: 20px;
    color: var(--noir-olive);
    box-shadow: 0 16px 40px color-mix(in srgb, var(--noir-olive) 25%, transparent);
}

.rs-offer-card h3 { color: var(--vert-persil); padding-right: 2rem; }

.rs-offer-sticker {
    position: absolute;
    top: -26px;
    right: -8px;
    width: 62px;
    transform: rotate(12deg);
    filter: drop-shadow(0 5px 10px color-mix(in srgb, var(--noir-olive) 30%, transparent));
    pointer-events: none;
}

.rs-offer-price {
    margin: 0 0 1rem !important;
    align-self: flex-start;
    padding: 0.3rem 0.9rem;
    border-radius: 10px;
    background: var(--jaune-oeuf);
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    white-space: nowrap;
    transform: rotate(-2deg);
}

.rs-offer-card > p {
    margin: 0 0 0.9rem;
    font-size: 0.95rem;
    line-height: 1.75;
}

.rs-offer-card a:not(.btn) { color: var(--vert-persil); }
.rs-offer-card a:not(.btn):hover { color: var(--rouge-tomate); }

.rs-offer-networks {
    font-style: italic;
    color: var(--rs-texte-doux);
    font-size: 0.9rem !important;
}

.rs-offer-btn { margin-top: auto; align-self: flex-start; }

/* Mini-infographie : trier les placards */
.rs-sort {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.2rem 0 1.2rem;
}

.rs-sort span {
    flex: 1 1 90px;
    text-align: center;
    padding: 0.6rem 0.4rem;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
}

.rs-sort-keep    { background: var(--vert-persil); color: var(--creme-fouettee); }
.rs-sort-improve { background: var(--jaune-oeuf); color: var(--noir-olive); }
.rs-sort-redo    { background: var(--rouge-tomate); color: white; }

/* ---------- RÉFÉRENCES ---------- */
.rs-frise {
    list-style: none;
    margin: 0 0 2.6rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.4rem 1rem;
}

.rs-frise li {
    position: relative;
    padding-top: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    background-image: repeating-linear-gradient(90deg, var(--vert-persil) 0 12px, transparent 12px 22px);
    background-repeat: no-repeat;
    background-position: 0 7px;
    background-size: calc(100% + 1rem) 3px;
}

.rs-frise li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--rouge-tomate);
    box-shadow: 0 0 0 5px var(--creme-fouettee);
}

.rs-frise li:last-child { background-image: none; }
.rs-frise .rs-frise-now::before { background: var(--jaune-oeuf); border: 2px solid var(--noir-olive); box-sizing: border-box; }

.rs-frise-date {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rouge-tomate);
}

.rs-frise-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--vert-persil);
}

.rs-cases {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 2rem 1.4rem;
}

.rs-case {
    display: flex;
    flex-direction: column;
    padding: 1.4rem 1.4rem 1.6rem;
    background: var(--rs-blanc);
    border-radius: 20px;
    box-shadow: var(--rs-ombre);
}

.rs-case-yellow { --rs-case-color: var(--jaune-oeuf); }
.rs-case-green  { --rs-case-color: var(--vert-persil); }
.rs-case-pink   { --rs-case-color: var(--rose-bonbon); }

/* Mini-maquette de profil (générique, sans logo de réseau) */
.rs-case-visual {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: color-mix(in srgb, var(--creme-fouettee) 70%, white);
    border: 1px solid var(--rs-filet);
    padding-bottom: 0.9rem;
    margin-bottom: 1.2rem;
}

.rs-mock-banner {
    height: 58px;
    background:
        radial-gradient(circle at 85% 30%, color-mix(in srgb, white 35%, transparent) 0 14px, transparent 15px),
        linear-gradient(120deg, var(--rs-case-color) 0 60%, color-mix(in srgb, var(--rs-case-color) 70%, var(--noir-olive)) 60% 100%);
}

.rs-mock-avatar {
    position: absolute;
    top: 30px;
    left: 14px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px solid var(--rs-blanc);
    background: var(--noir-olive);
    color: var(--creme-fouettee);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.85rem;
}

.rs-mock-lines {
    padding: 0.5rem 0.9rem 0 76px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rs-mock-lines span { height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--noir-olive) 22%, transparent); width: 70%; }
.rs-mock-lines span + span { width: 45%; background: color-mix(in srgb, var(--noir-olive) 12%, transparent); }

.rs-mock-posts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 0.9rem 0.9rem 0;
}

.rs-mock-posts span {
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    background: color-mix(in srgb, var(--rs-case-color) 35%, white);
}

.rs-mock-posts span:nth-child(2) { background: color-mix(in srgb, var(--rouge-tomate) 25%, white); }

.rs-case-since {
    align-self: flex-start;
    margin: 0 0 0.7rem;
    padding: 0.25rem 0.7rem;
    border-radius: 50px;
    background: var(--vert-persil);
    color: var(--creme-fouettee);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
}

.rs-case h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.12rem;
    line-height: 1.35;
    color: var(--noir-olive);
    margin: 0 0 0.8rem;
}

.rs-case > p {
    margin: 0 0 0.8rem;
    font-size: 0.93rem;
    line-height: 1.72;
    color: var(--rs-texte-moyen);
}

.rs-case-tags {
    margin-top: auto;
    padding-top: 0.9rem;
    border-top: 1px solid var(--rs-filet);
}

.rs-case-label {
    margin: 0 0 0.5rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rouge-tomate);
}

.rs-case-tags ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.rs-case-tags li {
    padding: 0.3rem 0.7rem;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.74rem;
    background: color-mix(in srgb, var(--rs-case-color) 30%, transparent);
    color: var(--noir-olive);
}

.rs-case-green .rs-case-tags li { background: color-mix(in srgb, var(--vert-persil) 15%, transparent); color: var(--vert-persil); }

.rs-also {
    margin: 2.2rem 0 0;
    padding: 1.1rem 1.4rem;
    border-left: 4px solid var(--jaune-oeuf);
    background: color-mix(in srgb, var(--jaune-oeuf) 14%, transparent);
    border-radius: 0 14px 14px 0;
    font-size: 0.98rem;
    line-height: 1.7;
}

/* Bloc chiffres (prêt à activer) */
.rs-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.rs-stat {
    padding: 1.4rem;
    border-radius: 18px;
    background: var(--vert-persil);
    color: var(--creme-fouettee);
    text-align: center;
}

.rs-stat-value { margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 2rem; color: var(--jaune-oeuf); }
.rs-stat-label { margin: 0.3rem 0 0; font-size: 0.9rem; }

/* ---------- ÉTAPES ---------- */
.rs-timeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 2.4rem 1.4rem;
    margin-top: 2.5rem;
}

.rs-timeline-step {
    padding-right: 0.8rem;
    background-image: repeating-linear-gradient(90deg, var(--vert-persil) 0 12px, transparent 12px 22px);
    background-repeat: no-repeat;
    background-position: 22px 21px;
    background-size: calc(100% + 1.4rem - 22px) 3px;
}

.rs-timeline-step:last-child { background-image: none; }

.rs-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--vert-persil);
    color: var(--creme-fouettee);
    box-shadow: 0 0 0 6px var(--creme-fouettee);
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    margin-bottom: 1.2rem;
}

.rs-timeline-step:nth-child(even) .rs-step-number { background: var(--rouge-tomate); color: white; }

.rs-timeline-step h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--noir-olive);
    margin: 0 0 0.5rem;
}

.rs-timeline-step p {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--rs-texte-moyen);
}

/* Infographie : boucle mensuelle */
.rs-loop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem 3rem;
    margin-top: 3rem;
    padding: 1.8rem 1.5rem;
    border-radius: 22px;
    background: var(--rs-blanc);
    box-shadow: var(--rs-ombre);
}

.rs-loop-cycle {
    position: relative;
    flex: none;
    width: 230px;
    height: 230px;
    margin: 0 auto;
}

.rs-loop-cycle svg {
    position: absolute;
    inset: 15px;
    width: 200px;
    height: 200px;
    animation: rsSpin 24s linear infinite;
}

.rs-loop-arc {
    fill: none;
    stroke: var(--vert-persil);
    stroke-width: 3;
    stroke-dasharray: 8 7;
}

#rs-arrowhead path { fill: var(--rouge-tomate); }

@keyframes rsSpin { to { transform: rotate(360deg); } }

.rs-loop-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.2;
    color: var(--vert-persil);
}

.rs-loop-item {
    position: absolute;
    padding: 0.3rem 0.7rem;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.76rem;
    white-space: nowrap;
    transform: translate(-50%, -50%);
}

.rs-loop-n { top: 15px;  left: 50%;  background: var(--rouge-tomate); color: white; }
.rs-loop-e { top: 50%;   left: calc(100% - 15px); background: var(--jaune-oeuf); color: var(--noir-olive); }
.rs-loop-s { top: calc(100% - 15px); left: 50%; background: var(--vert-persil); color: var(--creme-fouettee); }
.rs-loop-w { top: 50%;   left: 15px; background: var(--rose-bonbon); color: var(--noir-olive); }

.rs-loop-text { flex: 1 1 300px; }
.rs-loop-text .rs-tagline { margin-top: 0; font-size: 1.2rem; }

/* ---------- CONCLUSION + FORMULAIRE ---------- */
.rs-devis {
    position: relative;
    background: var(--vert-persil);
    padding: 3rem 0 3.5rem;
    scroll-margin-top: 80px;
}

.rs-devis-inner {
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.rs-devis-card {
    position: relative;
    background: var(--creme-fouettee);
    border-radius: 24px;
    box-shadow: 0 18px 50px color-mix(in srgb, var(--noir-olive) 28%, transparent);
    padding: 2rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2.2rem 3rem;
}

.rs-devis-sticker {
    position: absolute;
    top: -26px;
    right: -12px;
    width: 72px;
    transform: rotate(14deg);
    filter: drop-shadow(0 6px 12px color-mix(in srgb, var(--noir-olive) 25%, transparent));
    pointer-events: none;
}

.rs-devis-text { flex: 1 1 320px; min-width: 0; }
.rs-devis-text p { margin: 0 0 1rem; font-size: 0.98rem; line-height: 1.8; }

.rs-no-list {
    list-style: none;
    margin: 0 0 1.4rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.rs-no-list li {
    position: relative;
    padding-left: 2.3rem;
    font-size: 0.98rem;
    line-height: 1.65;
}

.rs-no-list li::before {
    content: '✕';
    position: absolute;
    left: 0;
    top: 0.1rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--rouge-tomate);
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rs-devis-hand { width: 78px; margin-top: 0.5rem; transform: rotate(-10deg); }

.rs-form {
    flex: 1 1 320px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rs-form h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.12rem;
    color: var(--vert-persil);
    margin: 0;
}

.rs-form-choices {
    border: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.rs-form-choices legend,
.rs-form-group label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--noir-olive);
    margin-bottom: 0.4rem;
    padding: 0;
}

.rs-choice { position: relative; display: block; }

.rs-choice input {
    position: absolute;
    opacity: 0;
    inset: 0;
}

.rs-choice span {
    display: flex;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    padding: 0.7rem 0.8rem;
    border: 2px solid color-mix(in srgb, var(--noir-olive) 12%, var(--creme-fouettee));
    border-radius: 10px;
    background: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.82rem;
    line-height: 1.3;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.rs-choice input:checked + span {
    border-color: var(--vert-persil);
    background: var(--vert-persil);
    color: var(--creme-fouettee);
}

.rs-choice input:focus-visible + span { outline: 2px solid var(--rouge-tomate); outline-offset: 2px; }

.rs-required { color: var(--rouge-tomate); }

.rs-form-group input,
.rs-form-group textarea,
.rs-form-group select {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 2px solid color-mix(in srgb, var(--noir-olive) 12%, var(--creme-fouettee));
    border-radius: 10px;
    background: white;
    font-family: 'Libre Baskerville', serif;
    font-size: 0.98rem;
    color: var(--noir-olive);
    box-sizing: border-box;
    resize: vertical;
    transition: border-color 0.2s ease;
}

.rs-form-group input:focus,
.rs-form-group textarea:focus,
.rs-form-group select:focus {
    outline: none;
    border-color: var(--rouge-tomate);
}

.rs-form-note {
    text-align: center;
    margin: 0;
    font-size: 0.8rem;
    color: var(--rs-texte-doux);
}

.rs-error-msg {
    display: none;
    text-align: center;
    color: var(--rouge-tomate);
    font-size: 0.9rem;
    margin: 0;
}

/* ---------- BARRE D'ADDITION COLLANTE ---------- */
.rs-sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    background: var(--vert-persil);
    color: var(--creme-fouettee);
    padding: 0.55rem 3.4rem 0.55rem 1rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.7rem 1.4rem;
    box-shadow: 0 -8px 24px color-mix(in srgb, var(--noir-olive) 20%, transparent);
    transform: translateY(110%);
    transition: transform 0.35s ease;
}

.rs-sticky-bar.rs-bar-visible { transform: translateY(0); }

.rs-sticky-bar p {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
}

.rs-sticky-bar strong { color: var(--jaune-oeuf); }
.rs-sticky-bar .btn { padding: 0.6rem 1.3rem; font-size: 0.82rem; }

.rs-sticky-bar .btn-label-short { display: none; }

.rs-sticky-close {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 2px solid color-mix(in srgb, var(--creme-fouettee) 45%, transparent);
    border-radius: 50%;
    background: transparent;
    color: var(--creme-fouettee);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.rs-sticky-close:hover,
.rs-sticky-close:focus-visible {
    background: var(--jaune-oeuf);
    border-color: var(--jaune-oeuf);
    color: var(--noir-olive);
    outline: none;
}

.rs-sticky-close svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
}

/* Pastille discrète pour rouvrir le bandeau */
.rs-sticky-reopen {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 900;
    padding: 0.55rem 1rem;
    border: 2px solid var(--noir-olive);
    border-radius: 50px;
    background: var(--jaune-oeuf);
    color: var(--noir-olive);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.78rem;
    box-shadow: 3px 3px 0 var(--noir-olive);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.rs-sticky-reopen span { font-weight: 800; }
.rs-sticky-reopen.rs-reopen-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.rs-sticky-reopen:hover { background: var(--rouge-tomate); color: white; }

/* ---------- APPARITION AU SCROLL ---------- */
.rs-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.rs-reveal.rs-visible { opacity: 1; transform: translateY(0); }

/* ============================================
   PETIT MOBILE
   ============================================ */
@media (max-width: 599px) {
    .rs-sticky-bar { justify-content: space-between; }
    .rs-sticky-bar p { font-size: 0.78rem; line-height: 1.3; }
    .rs-sticky-bar .btn { padding: 0.5rem 0.9rem; font-size: 0.74rem; white-space: nowrap; }
    .rs-sticky-bar .btn-label-long { display: none; }
    .rs-sticky-bar .btn-label-short { display: inline; }
    .rs-carte-divider-line { display: none; }
    .rs-carte-divider { justify-content: center; }
}

@media (max-width: 420px) {
    .rs-form-choices { grid-template-columns: 1fr; }
    .rs-bubble { max-width: 96%; }
    .rs-funnel-result { width: 86%; }
    .rs-hero-ctas .btn-large { width: 100%; padding: 1rem 1.2rem; font-size: 0.95rem; }
}

/* ============================================
   TABLETTE
   ============================================ */
@media (min-width: 768px) {
    .rs-container { padding: 0 2rem; }

    .rs-section { padding: 4.5rem 0; }
    .rs-section h2,
    .rs-carte h2,
    .rs-devis h2 { font-size: 2.1rem; }

    .rs-hero { padding: 4rem 2rem 4.5rem; }
    .rs-hero h1 { font-size: 2.5rem; }
    .rs-hero-lead { font-size: 1.35rem !important; }
    .rs-hero-decoration .sticker-1 { width: 64px; }
    .rs-hero-decoration .sticker-2 { width: 76px; }

    .rs-marquee-track { font-size: 0.85rem; }
    .rs-marquee-track span { padding-right: 2rem; }

    .rs-bubble { font-size: 0.98rem; max-width: 80%; }
    .rs-recipe-note { padding: 2rem 2.5rem; }

    .rs-pattern-band { height: 64px; background-size: 260px; }

    .rs-carte { padding: 4.5rem 0; }
    .rs-carte-hand { width: 88px; }
    .rs-offer-main { padding: 2.6rem 2.4rem; }
    .rs-formula,
    .rs-offer-card { padding: 2.3rem 2rem 2rem; }

    .rs-devis { padding: 4rem 0 4.5rem; }
    .rs-devis-card { padding: 2.6rem; }
    .rs-devis-inner { padding: 0 2rem; }

    .rs-loop { padding: 2rem 2.6rem; }

    .rs-sticky-bar { padding: 0.8rem 4rem 0.8rem 2rem; }
    .rs-sticky-bar p { font-size: 0.92rem; }
}

/* ============================================
   DESKTOP
   ============================================ */
@media (min-width: 1024px) {
    .rs-section { padding: 5.5rem 0; }
    .rs-section h2,
    .rs-carte h2,
    .rs-devis h2 { font-size: 2.5rem; }
    .rs-hero h1 { font-size: 3rem; }
    .rs-hero { padding: 4.5rem 2rem 5.5rem; }
    .rs-carte { padding: 5.5rem 0; }
    .rs-devis { padding: 4.5rem 0 5rem; }
    .rs-devis-card { padding: 3rem; }
    .rs-offer h3 { font-size: 1.5rem; }
    .rs-offer-main h3 { font-size: 1.75rem; }

    /* 5 objectifs : 3 + 2, les deux derniers plus larges */
    .rs-goals { grid-template-columns: repeat(6, 1fr); }
    .rs-goal { grid-column: span 2; }
    .rs-goal:nth-child(4),
    .rs-goal:nth-child(5) { grid-column: span 3; }
}

/* ============================================
   ACCESSIBILITÉ / MOUVEMENT RÉDUIT
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .rs-hero-decoration img,
    .rs-marquee-track,
    .rs-month-grid .rs-day-post,
    .rs-loop-cycle svg { animation: none; }

    .rs-hero a, .rs-section a, .rs-carte a, .rs-devis a, .rs-sticky-bar a, .rs-form button,
    .rs-goal, .rs-sticky-bar, .rs-sticky-reopen { transition: none; }
    .rs-rhythm-post { animation: none; }

    .rs-reveal { opacity: 1; transform: none; transition: none; }
}

/* Vraie image de réalisation : affichée en entier, la maquette CSS est masquée.
   Si le fichier est absent, onerror retire l'image et la maquette reste visible. */
.rs-case-visual:has(.case-real-img),
.iv-case-visual:has(.case-real-img) {
    padding: 0;
    min-height: 0;
    display: block;
    background: #fff;
}
.rs-case-visual:has(.case-real-img) > :not(.case-real-img),
.iv-case-visual:has(.case-real-img) > :not(.case-real-img) {
    display: none;
}
.case-real-img {
    display: block;
    width: 100%;
    height: auto;
}