/* ========================================
   CMS SECTIONS - PUBLIC SITE STYLES
   Advanced sections: Carousel, Countdown, Reviews, Pricing
   ======================================== */

/* Focus states for accessibility */
.cms-section a:focus-visible,
.cms-section button:focus-visible,
.cms-section input:focus-visible,
.cms-section textarea:focus-visible,
.cms-section select:focus-visible {
  outline: 2px solid var(--site-primary-color);
  outline-offset: 2px;
}

/* ========================================
   CAROUSEL/SLIDER SECTION
   ======================================== */

.cms-carousel {
    position: relative;
    overflow: hidden;
    padding: 48px 32px;
}

.carousel-section-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 32px;
    color: var(--site-text-color, #111827);
}

/* Product carousel mode */
.cms-carousel--products {
    overflow: visible;
}

.carousel-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1280px;
    margin: 0 auto;
}

.carousel-product-card {
    background: var(--site-background, #fff);
    border-radius: var(--site-radius-md);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: var(--site-shadow-sm);
    transition: all 0.3s ease;
    animation: carouselProductIn 0.4s ease forwards;
    opacity: 0;
}

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

.carousel-product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--site-shadow-lg);
}

.carousel-product-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.carousel-product-image {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--site-surface, #f3f4f6);
}

.carousel-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.carousel-product-card:hover .carousel-product-image img {
    transform: scale(1.06);
}

.carousel-product-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #d1d5db;
}

.carousel-product-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #ef4444, #f97316);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: var(--site-radius-sm);
}

.carousel-product-info {
    padding: 16px;
}

.carousel-product-name {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--site-text-color, #1f2937);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.carousel-product-price {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--site-primary-color, #6366f1);
}

@media (max-width: 1024px) {
    .carousel-products-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .carousel-products-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .cms-carousel { padding: 40px 20px; }
}

@media (max-width: 480px) {
    .carousel-products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .carousel-product-info { padding: 12px; }
    .carousel-product-name { font-size: 13px; }
    .carousel-product-price { font-size: 14px; }
}

/* Empty state */
.carousel-empty {
    text-align: center;
    padding: 60px 32px;
    background: var(--site-surface, #f3f4f6);
    border-radius: var(--site-radius-lg);
    color: var(--site-text-muted, #9ca3af);
}

.carousel-empty i {
    font-size: 36px;
    margin-bottom: 12px;
    display: block;
    opacity: 0.5;
}

.carousel-empty p {
    margin: 0;
    font-size: 15px;
}

.carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--site-radius-lg);
    aspect-ratio: 16/9;
}

.carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.carousel-slide.active {
    position: relative;
    opacity: 1;
    visibility: visible;
}

/* Slide transitions */
.carousel-slide.slide-out-left {
    transform: translateX(-100%);
    opacity: 0;
}

.carousel-slide.slide-out-right {
    transform: translateX(100%);
    opacity: 0;
}

.carousel-slide.slide-in-left {
    animation: slideInFromLeft 0.5s ease forwards;
}

.carousel-slide.slide-in-right {
    animation: slideInFromRight 0.5s ease forwards;
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.carousel-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 60px 40px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: white;
    text-align: center;
}

.carousel-title {
    font-size: 42px;
    font-weight: 700;
    margin: 0 0 16px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.carousel-subtitle {
    font-size: 18px;
    margin: 0 0 24px;
    opacity: 0.9;
}

.carousel-cta {
    display: inline-block;
    padding: 14px 32px;
    background: var(--site-primary-color, #6366f1);
    color: white !important;
    border-radius: var(--site-radius-sm);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
}

.carousel-cta:hover {
    background: var(--site-primary-color, #4f46e5);
    transform: translateY(-2px);
}

/* Navigation Arrows */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--site-text-color, #18181b);
    font-size: 18px;
    transition: all 0.2s;
    box-shadow: var(--site-shadow-md);
    z-index: 10;
}

.carousel-arrow:hover {
    background: white;
    transform: translateY(-50%) scale(1.1);
}

.carousel-prev {
    left: 20px;
}

.carousel-next {
    right: 20px;
}

/* Navigation Dots */
.carousel-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.carousel-dot {
    width: 12px;
    height: 12px;
    background: rgba(255,255,255,0.5);
    border: 2px solid white;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}

.carousel-dot:hover,
.carousel-dot.active {
    background: white;
    transform: scale(1.2);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .carousel-title {
        font-size: 28px;
    }

    .carousel-subtitle {
        font-size: 16px;
    }

    .carousel-arrow {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .carousel-prev {
        left: 10px;
    }

    .carousel-next {
        right: 10px;
    }

    .carousel-content {
        padding: 40px 20px;
    }
}

@media (max-width: 480px) {
    .carousel-title {
        font-size: 22px;
    }

    .carousel-subtitle {
        font-size: 14px;
        margin: 0 0 16px;
    }

    .carousel-content {
        padding: 24px 16px;
    }

    .carousel-cta {
        padding: 12px 24px;
        font-size: 14px;
    }

    .carousel-arrow {
        width: 34px;
        height: 34px;
        font-size: 12px;
    }

    .cms-carousel {
        padding: 32px 16px;
    }

    .carousel-section-title {
        font-size: 24px;
    }
}

/* ========================================
   COUNTDOWN/PROMO BANNER SECTION
   ======================================== */

.cms-countdown {
    position: relative;
    padding: 40px;
}

.cms-countdown[data-sticky="true"] {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Style: Urgent (Red/Bold) */
.cms-countdown-urgent {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
}

.cms-countdown-urgent .countdown-badge {
    background: #fbbf24;
    color: var(--site-text-color);
}

.cms-countdown-urgent .countdown-cta {
    background: white;
    color: #dc2626 !important;
}

.cms-countdown-urgent .countdown-cta:hover {
    background: #fef3c7;
}

/* Style: Elegant (Dark/Sophisticated) */
.cms-countdown-elegant {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    color: white;
}

.cms-countdown-elegant .countdown-badge {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.cms-countdown-elegant .countdown-value {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
}

.cms-countdown-elegant .countdown-cta {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white !important;
}

/* Style: Minimal (Light/Clean) */
.cms-countdown-minimal {
    background: var(--site-surface, #f9fafb);
    color: var(--site-text-color, #1f2937);
    border-top: 1px solid var(--site-border, #e5e7eb);
    border-bottom: 1px solid var(--site-border, #e5e7eb);
}

.cms-countdown-minimal .countdown-badge {
    background: var(--site-primary-color, #6366f1);
    color: white;
}

.cms-countdown-minimal .countdown-value {
    background: var(--site-background-color, white);
    border: 2px solid var(--site-border, #e5e7eb);
    color: var(--site-text-color, #1f2937);
}

.cms-countdown-minimal .countdown-cta {
    background: var(--site-primary-color, #6366f1);
    color: white !important;
}

/* Container Layout */
.countdown-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Badge */
.countdown-badge {
    padding: 6px 14px;
    border-radius: var(--site-radius-xl);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Text Content */
.countdown-text {
    text-align: center;
    flex: 1;
    min-width: 200px;
}

.countdown-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.2;
}

.countdown-description {
    font-size: 16px;
    margin: 0;
    opacity: 0.9;
}

/* Timer Display */
.countdown-timer {
    display: flex;
    align-items: center;
    gap: 8px;
}

.countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.countdown-value {
    font-size: 36px;
    font-weight: 700;
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    min-width: 70px;
    padding: 12px 16px;
    background: rgba(0,0,0,0.2);
    border-radius: var(--site-radius-md);
    text-align: center;
    transition: transform 0.3s ease;
}

.countdown-value.countdown-flip {
    animation: flipNumber 0.3s ease;
}

@keyframes flipNumber {
    0% { transform: rotateX(0deg); }
    50% { transform: rotateX(-90deg); }
    100% { transform: rotateX(0deg); }
}

.countdown-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
}

.countdown-separator {
    font-size: 32px;
    font-weight: 700;
    opacity: 0.5;
    margin-top: -20px;
}

/* CTA Button */
.countdown-action {
    flex-shrink: 0;
}

.countdown-cta {
    display: inline-block;
    padding: 14px 32px;
    border-radius: var(--site-radius-sm);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.countdown-cta:hover {
    transform: translateY(-2px);
    box-shadow: var(--site-shadow-lg);
}

/* Dismiss Button */
.countdown-dismiss {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 50%;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.countdown-dismiss:hover {
    background: rgba(255,255,255,0.3);
}

/* Expired State */
.countdown-expired {
    text-align: center;
    padding: 20px;
}

.countdown-is-expired {
    opacity: 0.7;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .countdown-container {
        flex-direction: column;
        text-align: center;
    }

    .countdown-title {
        font-size: 22px;
    }

    .countdown-value {
        font-size: 28px;
        min-width: 56px;
        padding: 10px 12px;
    }

    .countdown-separator {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .cms-countdown {
        padding: 28px 16px;
    }

    .countdown-title {
        font-size: 18px;
    }

    .countdown-description {
        font-size: 14px;
    }

    .countdown-value {
        font-size: 22px;
        min-width: 48px;
        padding: 8px 10px;
    }

    .countdown-separator {
        font-size: 20px;
    }

    .countdown-cta {
        padding: 12px 24px;
        font-size: 14px;
    }
}

/* ========================================
   ADVANCED REVIEWS/TESTIMONIALS SECTION
   ======================================== */

.cms-reviews {
    padding: 80px 40px;
}

/* Header */
.reviews-header {
    text-align: center;
    margin-bottom: 48px;
}

.reviews-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--site-text-color, #111827);
    margin: 0 0 20px;
}

.reviews-subtitle {
    font-size: 18px;
    color: var(--site-text-muted, #6b7280);
    margin: 0;
}

/* Summary Stats */
.reviews-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.reviews-average {
    display: flex;
    align-items: center;
    gap: 12px;
}

.average-number {
    font-size: 48px;
    font-weight: 700;
    color: var(--site-text-color, #111827);
}

.average-stars {
    display: flex;
    gap: 4px;
    font-size: 24px;
}

.average-stars i {
    color: #fbbf24;
}

.reviews-count {
    font-size: 14px;
    color: var(--site-text-muted, #6b7280);
}

/* Container Layouts */
.reviews-container {
    display: grid;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.reviews-columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.reviews-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.reviews-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Review Card */
.review-card {
    background: var(--site-background-color, white);
    border-radius: var(--site-radius-lg);
    padding: 28px;
    box-shadow: var(--site-shadow-md);
    transition: transform 0.2s, box-shadow 0.2s;
}

.review-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--site-shadow-lg);
}

/* Review Card Content */
.review-rating {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
}

.review-rating i {
    color: #fbbf24;
    font-size: 16px;
}

.review-text {
    font-size: 16px;
    line-height: 1.7;
    color: var(--site-text-color, #374151);
    margin: 0 0 24px;
    font-style: normal;
}

/* Author Section */
.review-author {
    display: flex;
    align-items: center;
    gap: 14px;
}

.author-photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--site-primary-color, #6366f1), var(--site-secondary-color, #8b5cf6));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 18px;
}

.author-details {
    flex: 1;
}

.author-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.author-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--site-text-color, #111827);
}

.verified-badge {
    color: #10b981;
    font-size: 14px;
}

.author-role {
    display: block;
    font-size: 13px;
    color: var(--site-text-muted, #6b7280);
    margin-top: 2px;
}

/* Review Footer */
.review-footer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--site-border, #f3f4f6);
}

.review-date {
    font-size: 12px;
    color: var(--site-text-muted, #9ca3af);
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .reviews-columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cms-reviews {
        padding: 60px 20px;
    }

    .reviews-title {
        font-size: 28px;
    }

    .reviews-columns-2,
    .reviews-columns-3,
    .reviews-columns-4 {
        grid-template-columns: 1fr;
    }

    .average-number {
        font-size: 36px;
    }
}

@media (max-width: 480px) {
    .cms-reviews {
        padding: 48px 16px;
    }

    .reviews-title {
        font-size: 24px;
    }

    .reviews-subtitle {
        font-size: 15px;
    }

    .reviews-header {
        margin-bottom: 32px;
    }

    .review-card {
        padding: 20px;
    }

    .review-text {
        font-size: 14px;
    }

    .average-number {
        font-size: 32px;
    }

    .average-stars {
        font-size: 20px;
    }
}

/* ========================================
   PRICING TABLES SECTION
   ======================================== */

.cms-pricing-tables {
    padding: 80px 40px;
}

/* Header */
.pricing-header {
    text-align: center;
    margin-bottom: 48px;
}

.pricing-tables-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--site-text-color, #111827);
    margin: 0 0 16px;
}

.pricing-tables-subtitle {
    font-size: 18px;
    color: var(--site-text-muted, #6b7280);
    margin: 0 0 32px;
}

/* Billing Toggle */
.pricing-billing-toggle {
    display: inline-flex;
    background: var(--site-surface, #f3f4f6);
    border-radius: var(--site-radius-md);
    padding: 4px;
}

.billing-option {
    padding: 12px 24px;
    background: transparent;
    border: none;
    border-radius: var(--site-radius-sm);
    font-size: 14px;
    font-weight: 500;
    color: var(--site-text-muted, #6b7280);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.billing-option:hover {
    color: var(--site-text-color, #374151);
}

.billing-option.active {
    background: var(--site-background-color, white);
    color: var(--site-text-color, #111827);
    box-shadow: var(--site-shadow-sm);
}

.billing-save {
    background: #dcfce7;
    color: #16a34a;
    padding: 2px 8px;
    border-radius: var(--site-radius-xl);
    font-size: 11px;
    font-weight: 600;
}

/* Plans Grid */
.pricing-plans {
    display: grid;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.pricing-columns-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
}

.pricing-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.pricing-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Plan Card */
.pricing-plan {
    background: var(--site-background-color, white);
    border: 1px solid var(--site-border, #e5e7eb);
    border-radius: var(--site-radius-xl);
    padding: 32px;
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}

.pricing-plan:hover {
    transform: translateY(-4px);
    box-shadow: var(--site-shadow-lg);
}

/* Popular Plan */
.pricing-plan-popular {
    background: #f5f3ff;
    border: 2px solid var(--site-primary-color, #6366f1);
    transform: scale(1.05);
    z-index: 1;
}

.pricing-plan-popular:hover {
    transform: scale(1.05) translateY(-4px);
}

.pricing-popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--site-primary-color, #6366f1), var(--site-secondary-color, #8b5cf6));
    color: white;
    padding: 6px 20px;
    border-radius: var(--site-radius-xl);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* Plan Header */
.pricing-plan-header {
    text-align: center;
    margin-bottom: 24px;
}

.pricing-plan-name {
    font-size: 24px;
    font-weight: 700;
    color: var(--site-text-color, #111827);
    margin: 0 0 8px;
}

.pricing-plan-description {
    font-size: 14px;
    color: var(--site-text-muted, #6b7280);
    margin: 0;
}

/* Price Display */
.pricing-plan-price {
    text-align: center;
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--site-border, #e5e7eb);
}

.price-currency {
    font-size: 24px;
    font-weight: 600;
    color: var(--site-text-color, #111827);
    vertical-align: super;
}

.price-amount {
    font-size: 56px;
    font-weight: 700;
    color: var(--site-text-color, #111827);
    line-height: 1;
    transition: opacity 0.15s;
}

.price-amount.price-changing {
    opacity: 0.3;
}

.price-period {
    font-size: 16px;
    color: var(--site-text-muted, #6b7280);
}

/* Features List */
.pricing-features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    flex-grow: 1;
}

.pricing-features-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    font-size: 15px;
    border-bottom: 1px solid var(--site-border, #f3f4f6);
}

.pricing-features-list li:last-child {
    border-bottom: none;
}

.pricing-features-list li i {
    width: 20px;
    text-align: center;
    font-size: 14px;
}

.feature-included {
    color: var(--site-text-color, #374151);
}

.feature-included i {
    color: #10b981;
}

.feature-excluded {
    color: #9ca3af;
}

.feature-excluded i {
    color: #ef4444;
}

.feature-excluded span {
    text-decoration: line-through;
}

/* CTA Button */
.pricing-plan-action {
    margin-top: auto;
}

.pricing-cta {
    display: block;
    width: 100%;
    padding: 16px 24px;
    background: var(--site-background-color, white);
    border: 2px solid var(--site-border, #e5e7eb);
    border-radius: var(--site-radius-md);
    color: var(--site-text-color, #374151);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.pricing-cta:hover {
    background: var(--site-surface, #f9fafb);
    border-color: var(--site-primary-color, #6366f1);
    color: var(--site-primary-color, #6366f1);
}

.pricing-cta-primary {
    background: linear-gradient(135deg, var(--site-primary-color, #6366f1), var(--site-secondary-color, #8b5cf6));
    border-color: transparent;
    color: white !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.pricing-cta-primary:hover {
    background: linear-gradient(135deg, var(--site-primary-color, #4f46e5), var(--site-secondary-color, #7c3aed));
    border-color: transparent;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
}

/* Footer */
.pricing-footer {
    text-align: center;
    font-size: 14px;
    color: var(--site-text-muted, #6b7280);
    margin-top: 40px;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .pricing-columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-plan-popular {
        transform: scale(1);
    }

    .pricing-plan-popular:hover {
        transform: translateY(-4px);
    }
}

@media (max-width: 768px) {
    .cms-pricing-tables {
        padding: 60px 20px;
    }

    .pricing-tables-title {
        font-size: 28px;
    }

    .pricing-columns-2,
    .pricing-columns-3,
    .pricing-columns-4 {
        grid-template-columns: 1fr;
    }

    .pricing-plan {
        padding: 24px;
    }

    .price-amount {
        font-size: 44px;
    }

    .billing-option {
        padding: 10px 16px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .cms-pricing-tables {
        padding: 48px 16px;
    }

    .pricing-tables-title {
        font-size: 24px;
    }

    .pricing-tables-subtitle {
        font-size: 15px;
    }

    .pricing-plan {
        padding: 20px;
    }

    .price-amount {
        font-size: 36px;
    }

    .price-currency {
        font-size: 20px;
    }

    .pricing-plan-price {
        margin-bottom: 24px;
        padding-bottom: 24px;
    }

    .pricing-features-list li {
        font-size: 14px;
        padding: 10px 0;
    }

    .pricing-cta {
        padding: 14px 20px;
        font-size: 15px;
    }
}

/* ========================================
   ANIMATIONS (Basic)
   ======================================== */

/* Scroll Animations */
.cms-section[data-animation] {
    opacity: 0;
    will-change: opacity, transform;
}

.cms-section[data-animation="none"],
.cms-section[data-animation].section-visible {
    opacity: 1;
}

.cms-section[data-animation="fade"] {
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.cms-section[data-animation="fade"].section-visible {
    opacity: 1;
}

.cms-section[data-animation="slide"] {
    transform: translateY(40px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.cms-section[data-animation="slide"].section-visible {
    opacity: 1;
    transform: translateY(0);
}

.cms-section[data-animation="scale"] {
    transform: scale(0.95);
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.cms-section[data-animation="scale"].section-visible {
    opacity: 1;
    transform: scale(1);
}

/* Hover Effects */
.cms-section[data-hover="lift"] .review-card,
.cms-section[data-hover="lift"] .pricing-plan {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.cms-section[data-hover="lift"] .review-card:hover,
.cms-section[data-hover="lift"] .pricing-plan:hover {
    transform: translateY(-8px);
    box-shadow: var(--site-shadow-xl);
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .cms-section[data-animation] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .cms-section[data-hover="lift"] .review-card:hover,
    .cms-section[data-hover="lift"] .pricing-plan:hover {
        transform: none !important;
    }

    .carousel-slide {
        transition: none !important;
        animation: none !important;
    }

    .countdown-value {
        animation: none !important;
    }

    .countdown-badge {
        animation: none !important;
    }
}

/* ========================================
   CTA (CALL TO ACTION) SECTION
   ======================================== */

.cms-cta {
    padding: 80px 24px;
    background: linear-gradient(135deg, var(--site-primary-color, #6366F1), var(--site-secondary-color, #8B5CF6));
    color: #ffffff;
}

.cta-container {
    max-width: 800px;
    margin: 0 auto;
}

.cta-content {
    text-align: center;
}

.cta-title {
    font-size: clamp(28px, 5vw, 42px);
    font-weight: 700;
    margin: 0 0 16px;
    color: inherit;
}

.cta-subtitle {
    font-size: clamp(16px, 2vw, 20px);
    opacity: 0.9;
    margin: 0 0 32px;
    line-height: 1.6;
}

.cta-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--site-radius-sm);
    transition: all 0.3s ease;
}

.cta-btn--primary {
    background: #ffffff;
    color: var(--site-primary-color, #6366F1);
}

.cta-btn--primary:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.cta-btn--secondary {
    background: transparent;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.cta-btn--secondary:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

/* CTA Variants */
.cms-cta--minimal {
    background: var(--site-surface, #f9fafb);
    color: var(--site-text-color, #111827);
}

.cms-cta--minimal .cta-btn--primary {
    background: var(--site-primary-color, #6366F1);
    color: #ffffff;
}

.cms-cta--minimal .cta-btn--secondary {
    color: var(--site-primary-color, #6366F1);
    border-color: var(--site-primary-color, #6366F1);
}

/* ========================================
   FAQ SECTION
   ======================================== */

.cms-faq {
    padding: 80px 24px;
    background: var(--site-background-color, #ffffff);
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-header {
    text-align: center;
    margin-bottom: 48px;
}

.faq-title {
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--site-text-color, #111827);
}

.faq-subtitle {
    font-size: 18px;
    color: var(--site-text-muted, #6b7280);
    margin: 0;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: var(--site-surface, #f9fafb);
    border-radius: var(--site-radius-md);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item.open {
    background: var(--site-background-color, #ffffff);
    box-shadow: var(--site-shadow-md);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    color: var(--site-text-color, #111827);
    transition: all 0.3s ease;
}

.faq-question:hover {
    color: var(--site-primary-color, #6366F1);
}

.faq-question-text {
    flex: 1;
    padding-right: 16px;
}

.faq-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.faq-item.open .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-item.open .faq-answer {
    max-height: 500px;
}

.faq-answer-content {
    padding: 0 24px 20px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--site-text-muted, #4b5563);
}

/* FAQ Grid Card (hover effect via CSS instead of inline JS handlers) */
.faq-grid-card {
    background: var(--site-background);
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-md, 12px);
    padding: 24px;
    box-shadow: var(--site-shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
    transition: box-shadow var(--site-transition, 0.3s cubic-bezier(0.4, 0, 0.2, 1));
}

.faq-grid-card:hover {
    box-shadow: var(--site-shadow-md);
}

/* ========================================
   VIDEO SECTION
   ======================================== */

.cms-video {
    padding: 80px 24px;
    background: #111827;
    color: #ffffff;
}

.video-container {
    max-width: 1000px;
    margin: 0 auto;
}

.video-header {
    text-align: center;
    margin-bottom: 32px;
}

.video-title {
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 700;
    margin: 0 0 12px;
}

.video-subtitle {
    font-size: 18px;
    opacity: 0.8;
    margin: 0;
}

.video-wrapper {
    position: relative;
    border-radius: var(--site-radius-lg);
    overflow: hidden;
    background: #000;
}

.video-embed {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-player video {
    width: 100%;
    display: block;
}

.video-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    color: var(--site-text-muted, #6b7280);
}

.video-placeholder i {
    font-size: 48px;
    margin-bottom: 16px;
}

.video-caption {
    text-align: center;
    margin-top: 16px;
    font-size: 14px;
    opacity: 0.7;
}

/* Video variant - light background */
.cms-video--light {
    background: var(--site-surface, #f9fafb);
    color: var(--site-text-color, #111827);
}

.cms-video--light .video-wrapper {
    box-shadow: var(--site-shadow-lg);
}

/* ========================================
   FEATURES SECTION
   ======================================== */

.cms-features {
    padding: 80px 24px;
    background: var(--site-background-color, #ffffff);
}

.features-container {
    max-width: 1200px;
    margin: 0 auto;
}

.features-header {
    margin-bottom: 48px;
}

.features-badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    color: var(--site-primary-color, #6366F1);
    border-radius: var(--site-radius-xl);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.features-title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    color: var(--site-text-color, #111827);
    margin: 0 0 16px;
    line-height: 1.2;
}

.features-subtitle {
    font-size: 18px;
    color: var(--site-text-muted, #6b7280);
    margin: 0;
    max-width: 600px;
}

.features-header[style*="center"] .features-subtitle {
    margin-left: auto;
    margin-right: auto;
}

/* Features Grid */
.features-grid {
    display: grid;
    gap: 32px;
}

.features-columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.features-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.features-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Feature Item */
.feature-item {
    padding: 32px;
    background: var(--site-surface, #f9fafb);
    border-radius: var(--site-radius-lg);
    transition: all 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--site-shadow-lg);
}

.feature-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--site-primary-color, #6366F1), var(--site-secondary-color, #8B5CF6));
    border-radius: var(--site-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.feature-icon i {
    font-size: 24px;
    color: white;
}

.feature-image {
    width: 100%;
    height: 160px;
    border-radius: var(--site-radius-md);
    overflow: hidden;
    margin-bottom: 20px;
}

.feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feature-number {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--site-primary-color, #6366F1), var(--site-secondary-color, #8B5CF6));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.feature-number span {
    font-size: 24px;
    font-weight: 700;
    color: white;
}

.feature-content {}

.feature-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--site-text-color, #111827);
    margin: 0 0 12px;
}

.feature-description {
    font-size: 15px;
    line-height: 1.7;
    color: var(--site-text-muted, #6b7280);
    margin: 0;
}

.feature-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--site-primary-color, #6366F1);
    text-decoration: none;
    transition: gap 0.2s ease;
}

.feature-link:hover {
    gap: 12px;
}

/* Features CTA */
.features-cta {
    margin-top: 48px;
}

.features-cta-btn {
    display: inline-block;
    padding: 16px 32px;
    background: linear-gradient(135deg, var(--site-primary-color, #6366F1), var(--site-secondary-color, #8B5CF6));
    color: white !important;
    border-radius: var(--site-radius-sm);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.features-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}

/* Features Variants */
.cms-features--cards .feature-item {
    background: var(--site-background-color, white);
    border: 1px solid var(--site-border, #e5e7eb);
    box-shadow: var(--site-shadow-md);
}

.cms-features--minimal {
    background: transparent;
}

.cms-features--minimal .feature-item {
    background: transparent;
    padding: 24px 0;
    border-radius: 0;
}

.cms-features--minimal .feature-item:hover {
    transform: none;
    box-shadow: none;
}

.cms-features--centered .feature-item {
    text-align: center;
}

.cms-features--centered .feature-icon,
.cms-features--centered .feature-number {
    margin-left: auto;
    margin-right: auto;
}

/* Responsive */
@media (max-width: 1024px) {
    .features-columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cms-features {
        padding: 60px 20px;
    }

    .features-columns-2,
    .features-columns-3,
    .features-columns-4 {
        grid-template-columns: 1fr;
    }

    .feature-item {
        padding: 24px;
    }
}

@media (max-width: 480px) {
    .cms-features {
        padding: 48px 16px;
    }

    .feature-item {
        padding: 20px;
    }

    .feature-title {
        font-size: 18px;
    }

    .feature-description {
        font-size: 14px;
    }

    .feature-icon {
        width: 48px;
        height: 48px;
    }

    .feature-icon i {
        font-size: 20px;
    }

    .features-grid {
        gap: 20px;
    }
}

/* ========================================
   TEAM SECTION
   ======================================== */

.cms-team {
    padding: 80px 24px;
    background: var(--site-background-color, #ffffff);
}

.team-container {
    max-width: 1200px;
    margin: 0 auto;
}

.team-header {
    text-align: center;
    margin-bottom: 48px;
}

.team-title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    color: var(--site-text-color, #111827);
    margin: 0 0 16px;
}

.team-subtitle {
    font-size: 18px;
    color: var(--site-text-muted, #6b7280);
    margin: 0;
}

.team-grid {
    display: grid;
    gap: 32px;
}

.team-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.team-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.team-member {
    text-align: center;
    padding: 32px;
    background: var(--site-surface, #f9fafb);
    border-radius: var(--site-radius-lg);
    transition: all 0.3s ease;
}

.team-member:hover {
    transform: translateY(-4px);
    box-shadow: var(--site-shadow-lg);
}

.team-member-image {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 20px;
    position: relative;
}

.team-member-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-member-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--site-primary-color, #6366F1), var(--site-secondary-color, #8B5CF6));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: white;
}

.team-member-info {
    text-align: center;
}

.team-member-name {
    font-size: 20px;
    font-weight: 600;
    color: var(--site-text-color, #111827);
    margin: 0 0 4px;
}

.team-member-role {
    font-size: 14px;
    color: var(--site-primary-color, #6366F1);
    margin: 0 0 12px;
}

.team-member-bio {
    font-size: 14px;
    line-height: 1.6;
    color: var(--site-text-muted, #6b7280);
    margin: 0 0 16px;
}

.team-member-social,
.team-member-social-inline {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.team-member-social {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(50%);
    opacity: 0;
    transition: all 0.3s ease;
}

.team-member:hover .team-member-social {
    opacity: 1;
}

.team-social {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.team-social a {
    width: 36px;
    height: 36px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--site-primary-color, #6366F1);
    transition: all 0.2s ease;
}

.team-social a:hover {
    background: var(--site-primary-color, #6366F1);
    color: white;
}

@media (max-width: 768px) {
    .cms-team {
        padding: 60px 20px;
    }

    .team-columns-3,
    .team-columns-4 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .cms-team {
        padding: 48px 16px;
    }

    .team-member {
        padding: 24px;
    }

    .team-member-image {
        width: 100px;
        height: 100px;
    }

    .team-member-name {
        font-size: 18px;
    }

    .team-member-bio {
        font-size: 13px;
    }

    .team-member-placeholder {
        font-size: 32px;
    }
}

/* ========================================
   STATS SECTION
   ======================================== */

.cms-stats {
    padding: 80px 24px;
    background: linear-gradient(135deg, var(--site-primary-color, #6366F1), var(--site-secondary-color, #8B5CF6));
    color: white;
}

.stats-container {
    max-width: 1200px;
    margin: 0 auto;
}

.stats-header {
    text-align: center;
    margin-bottom: 48px;
}

.stats-title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    margin: 0 0 16px;
    color: inherit;
}

.stats-subtitle {
    font-size: 18px;
    opacity: 0.9;
    margin: 0;
}

.stats-grid {
    display: grid;
    gap: 32px;
}

.stats-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.stats-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.stat-item {
    text-align: center;
    padding: 32px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--site-radius-lg);
    backdrop-filter: blur(10px);
}

.stat-icon {
    font-size: 32px;
    margin-bottom: 16px;
    opacity: 0.9;
}

.stat-value {
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 8px;
}

.stat-label {
    font-size: 16px;
    opacity: 0.9;
}

.stat-description {
    font-size: 14px;
    opacity: 0.7;
    margin-top: 8px;
}

/* Stats Light Variant */
.cms-stats--light {
    background: var(--site-surface, #f9fafb);
    color: var(--site-text-color, #111827);
}

.cms-stats--light .stat-item {
    background: var(--site-background-color, white);
    box-shadow: var(--site-shadow-md);
}

.cms-stats--light .stat-value {
    color: var(--site-primary-color, #6366F1);
}

@media (max-width: 768px) {
    .cms-stats {
        padding: 60px 20px;
    }

    .stats-columns-3,
    .stats-columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-value {
        font-size: 36px;
    }
}

@media (max-width: 480px) {
    .cms-stats {
        padding: 48px 16px;
    }

    .stats-columns-3,
    .stats-columns-4 {
        grid-template-columns: 1fr;
    }

    .stat-item {
        padding: 24px;
    }

    .stat-value {
        font-size: 32px;
    }

    .stat-label {
        font-size: 14px;
    }

    .stat-icon {
        font-size: 28px;
    }
}

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

.cms-newsletter {
    padding: 80px 24px;
    background: var(--site-surface, #f9fafb);
    position: relative;
}

.newsletter-container {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.newsletter-icon {
    font-size: 48px;
    color: var(--site-primary-color, #6366F1);
    margin-bottom: 24px;
}

.newsletter-title {
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 700;
    color: var(--site-text-color, #111827);
    margin: 0 0 12px;
}

.newsletter-description,
.newsletter-subtitle {
    font-size: 16px;
    color: var(--site-text-muted, #6b7280);
    margin: 0 0 32px;
    line-height: 1.6;
}

.newsletter-form {
    display: flex;
    gap: 12px;
    max-width: 450px;
    margin: 0 auto;
}

.newsletter-form--stacked {
    flex-direction: column;
}

.newsletter-input-wrapper {
    display: flex;
    gap: 12px;
    flex: 1;
}

.newsletter-input {
    flex: 1;
    padding: 16px 20px;
    border: 2px solid var(--site-border, #e5e7eb);
    border-radius: var(--site-radius-sm);
    font-size: 16px;
    transition: border-color 0.2s ease;
}

.newsletter-input:focus {
    outline: none;
    border-color: var(--site-primary-color, #6366F1);
}

.newsletter-btn,
.newsletter-submit {
    padding: 16px 24px;
    background: linear-gradient(135deg, var(--site-primary-color, #6366F1), var(--site-secondary-color, #8B5CF6));
    color: white;
    border: none;
    border-radius: var(--site-radius-sm);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.newsletter-btn:hover,
.newsletter-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}

.newsletter-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
}

.newsletter-feature {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--site-text-muted, #6b7280);
}

.newsletter-feature i {
    color: var(--site-primary-color, #6366F1);
}

.newsletter-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.newsletter-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.newsletter-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.newsletter-privacy {
    font-size: 12px;
    color: var(--site-text-muted, #9ca3af);
    margin-top: 16px;
}

.newsletter-privacy a {
    color: var(--site-primary-color, #6366F1);
    text-decoration: none;
}

@media (max-width: 480px) {
    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-btn {
        width: 100%;
    }
}

/* ========================================
   CONTACT SECTION
   ======================================== */

.cms-contact {
    padding: 80px 24px;
    background: var(--site-background-color, #ffffff);
}

.contact-container {
    max-width: 1000px;
    margin: 0 auto;
}

.contact-header {
    text-align: center;
    margin-bottom: 48px;
}

.contact-title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    color: var(--site-text-color, #111827);
    margin: 0 0 16px;
}

.contact-subtitle {
    font-size: 18px;
    color: var(--site-text-muted, #6b7280);
    margin: 0;
}

.contact-content {
    display: grid;
    gap: 48px;
}

.contact-content--split {
    grid-template-columns: 1fr 1fr;
}

.contact-content--stacked {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin: 0 auto;
}

.contact-info {}

.contact-info-item {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.contact-info-item > i {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    border-radius: var(--site-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--site-primary-color, #6366F1);
    flex-shrink: 0;
}

.contact-info-item > div {
    flex: 1;
}

.contact-info-item strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--site-text-color, #111827);
    margin-bottom: 4px;
}

.contact-info-item p {
    font-size: 14px;
    color: var(--site-text-muted, #6b7280);
    margin: 0;
}

.contact-info-item a {
    color: var(--site-primary-color, #6366F1);
    text-decoration: none;
}

.contact-form-wrapper {
    flex: 1;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.contact-form {}

.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--site-text-color, #374151);
    margin-bottom: 8px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--site-border, #e5e7eb);
    border-radius: var(--site-radius-sm);
    font-size: 15px;
    transition: border-color 0.2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--site-primary-color, #6366F1);
}

.contact-form textarea {
    min-height: 120px;
    resize: vertical;
}

.contact-form button,
.contact-submit {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, var(--site-primary-color, #6366F1), var(--site-secondary-color, #8B5CF6));
    color: white;
    border: none;
    border-radius: var(--site-radius-sm);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.contact-form button:hover,
.contact-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}

@media (max-width: 768px) {
    .cms-contact {
        padding: 60px 20px;
    }

    .contact-content,
    .contact-content--split {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .cms-contact {
        padding: 48px 16px;
    }

    .contact-header {
        margin-bottom: 32px;
    }

    .contact-form input,
    .contact-form textarea {
        padding: 12px 14px;
        font-size: 14px;
    }

    .contact-form button,
    .contact-submit {
        padding: 14px 20px;
        font-size: 15px;
    }
}

/* ========== SOCIAL LINKS SECTION ========== */

.cms-social {
    padding: 40px 20px;
}

.cms-social .social-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.cms-social .social-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--site-text-color, #18181b);
    margin: 0 0 8px;
}

.cms-social .social-subtitle {
    font-size: 15px;
    color: var(--site-text-muted, #71717a);
    margin: 0 0 24px;
}

.cms-social .social-icons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.cms-social .social-icons--vertical {
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.cms-social .social-icon {
    width: var(--icon-size, 48px);
    height: var(--icon-size, 48px);
    background: var(--icon-bg, #f3f4f6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-color, #374151);
    font-size: calc(var(--icon-size, 48px) * 0.4);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.cms-social .social-icons--vertical .social-icon {
    width: auto;
    padding: 12px 24px;
    border-radius: var(--site-radius-sm);
    gap: 12px;
}

.cms-social .social-icon:hover {
    transform: translateY(-3px);
    box-shadow: var(--site-shadow-lg);
}

/* Brand color on hover for default variant */
.cms-social--default .social-icon:hover {
    background: var(--hover-color);
    color: #ffffff;
}

/* Scale effect for colored variant */
.cms-social--colored .social-icon:hover {
    transform: translateY(-3px) scale(1.05);
}

/* Outlined style */
.cms-social.cms-social--outlined .social-icon {
    background: transparent;
    border: 2px solid var(--icon-bg, #e4e4e7);
}

.cms-social.cms-social--outlined .social-icon:hover {
    border-color: var(--hover-color);
    color: var(--hover-color);
    background: transparent;
}

/* Minimal style */
.cms-social.cms-social--minimal .social-icon {
    background: transparent;
    width: auto;
    height: auto;
    font-size: 24px;
}

.cms-social.cms-social--minimal .social-icon:hover {
    background: transparent;
    color: var(--hover-color);
    transform: scale(1.2);
}

.cms-social .social-label {
    font-size: 14px;
    font-weight: 500;
}

.cms-social .social-placeholder {
    color: var(--site-text-muted, #a1a1aa);
    text-align: center;
    padding: 20px;
}

.cms-social .social-placeholder i {
    font-size: 32px;
    margin-bottom: 8px;
    display: block;
}

.cms-social .social-placeholder p {
    margin: 0;
    font-size: 14px;
}

@media (max-width: 480px) {
    .cms-social .social-icon {
        --icon-size: 40px;
    }
}

/* ========== APPOINTMENT SECTION ========== */

.cms-appointment {
    padding: 60px 20px;
}

.appointment-container {
    max-width: 700px;
    margin: 0 auto;
}

.appointment-header {
    text-align: center;
    margin-bottom: 40px;
}

.appointment-title {
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 12px;
    color: inherit;
}

.appointment-subtitle {
    font-size: 1.1rem;
    opacity: 0.8;
    margin: 0 0 8px;
}

.appointment-description {
    font-size: 0.95rem;
    opacity: 0.7;
    margin: 0;
}

.appointment-form {
    background: var(--site-background);
    border-radius: var(--site-radius-lg);
    padding: 32px;
    box-shadow: var(--site-shadow-md);
}

.appointment-field {
    margin-bottom: 24px;
}

.appointment-fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 480px) {
    .appointment-fields-row {
        grid-template-columns: 1fr;
    }
}

.appointment-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--site-text-color, #374151);
    margin-bottom: 10px;
}

.appointment-label i {
    color: var(--appointment-primary, #6366F1);
    font-size: 14px;
}

.appointment-input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--site-border, #e5e7eb);
    border-radius: var(--site-radius-sm);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: var(--site-background);
    color: var(--site-text-color, #1e293b);
}

.appointment-input:focus {
    outline: none;
    border-color: var(--appointment-primary, #6366F1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--appointment-primary, #6366F1) 13%, transparent);
}

.appointment-textarea {
    resize: vertical;
    min-height: 80px;
}

/* Type selector grid */
.appointment-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

.appointment-type-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    border: 2px solid var(--site-border, #e5e7eb);
    border-radius: var(--site-radius-md);
    cursor: pointer;
    transition: all 0.2s;
    background: var(--site-background);
    text-align: center;
}

.appointment-type-option:hover {
    border-color: color-mix(in srgb, var(--appointment-primary, #6366F1) 40%, transparent);
    background: color-mix(in srgb, var(--appointment-primary, #6366F1) 3%, transparent);
}

.appointment-type-option.selected,
.appointment-type-option:has(input:checked) {
    border-color: var(--appointment-primary, #6366F1);
    background: color-mix(in srgb, var(--appointment-primary, #6366F1) 6%, transparent);
}

.appointment-type-option input {
    display: none;
}

.type-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--site-text-color, #1e293b);
    margin-bottom: 4px;
}

.type-duration {
    font-size: 0.8rem;
    color: var(--site-text-muted, #64748b);
}

/* Time slots grid */
.appointment-slots-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.appointment-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    padding: 10px 14px;
    border: 2px solid var(--site-border, #e5e7eb);
    border-radius: var(--site-radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--site-text-color, #374151);
    background: var(--site-background);
}

.appointment-slot:hover {
    border-color: color-mix(in srgb, var(--appointment-primary, #6366F1) 40%, transparent);
    background: color-mix(in srgb, var(--appointment-primary, #6366F1) 3%, transparent);
}

.appointment-slot.selected,
.appointment-slot:has(input:checked) {
    border-color: var(--appointment-primary, #6366F1);
    background: var(--appointment-primary, #6366F1);
    color: #fff;
}

.appointment-slot input {
    display: none;
}

/* Submit button */
.appointment-submit-btn {
    width: 100%;
    padding: 16px 24px;
    border: none;
    border-radius: var(--site-radius-md);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background: var(--appointment-primary, #6366F1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s;
    font-family: inherit;
}

.appointment-submit-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: var(--site-shadow-lg);
}

.appointment-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Messages */
.appointment-success-message,
.appointment-error-message {
    padding: 16px 20px;
    border-radius: var(--site-radius-md);
    margin-top: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.95rem;
}

.appointment-success-message {
    background: #d1fae5;
    color: #065f46;
}

.appointment-error-message {
    background: #fee2e2;
    color: #991b1b;
}

.appointment-success-message i,
.appointment-error-message i {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Split variant */
.appointment-split-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.appointment-form-side {
    flex: 1;
}

.appointment-contact-side {
    width: 280px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--appointment-primary, #6366F1), color-mix(in srgb, var(--appointment-primary, #6366F1) 87%, transparent));
    border-radius: var(--site-radius-lg);
    padding: 32px;
    color: #fff;
}

.contact-side-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 24px;
}

.contact-side-items {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-side-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.contact-side-item i {
    font-size: 18px;
    opacity: 0.9;
    margin-top: 2px;
}

.contact-side-item a,
.contact-side-item span {
    color: #fff;
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1.5;
}

.contact-side-item a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .appointment-split-layout {
        flex-direction: column !important;
    }

    .appointment-contact-side {
        width: 100%;
    }

    .appointment-type-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .cms-appointment {
        padding: 48px 16px;
    }

    .appointment-form {
        padding: 24px 20px;
    }

    .appointment-title {
        font-size: 1.5rem;
    }

    .appointment-subtitle {
        font-size: 0.95rem;
    }

    .appointment-type-grid {
        grid-template-columns: 1fr;
    }

    .appointment-submit-btn {
        padding: 14px 20px;
        font-size: 0.9rem;
    }
}

/* Calendar variant specific */
.cms-appointment--calendar .appointment-container {
    max-width: 900px;
}

/* Minimal variant */
.cms-appointment--minimal .appointment-form {
    max-width: 500px;
    margin: 0 auto;
}

.cms-appointment--minimal .appointment-header {
    margin-bottom: 24px;
}

/* =============================================
   PRODUCTS SECTION
   Extracted from _products.html.erb
   ============================================= */

/* ========== PREMIUM PRODUCTS SECTION ========== */
.cms-products-premium {
  padding: 100px 48px;
  background: var(--site-background, #fff);
  min-height: 70vh;
}

.products-premium-container {
  max-width: 1400px;
  margin: 0 auto;
}

/* Header */
.products-premium-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60px;
  gap: 32px;
}

.products-premium-title-wrapper {
  text-align: center;
}

.products-premium-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--site-primary-color);
  margin-bottom: 12px;
  padding: 6px 16px;
  background: color-mix(in srgb, var(--site-primary-color) 10%, transparent);
  border-radius: var(--site-radius-xl);
}

.products-premium-title {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  color: var(--site-text-color);
  margin: 0 0 16px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.products-premium-subtitle {
  font-size: 18px;
  color: var(--site-text-muted);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Filters */
.products-premium-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.products-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--site-surface);
  border: 2px solid transparent;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  color: var(--site-text-color);
  cursor: pointer;
  transition: all 0.3s ease;
}

.products-filter-chip:hover {
  border-color: var(--site-primary-color);
  color: var(--site-primary-color);
}

.products-filter-chip.active {
  background: var(--site-primary-color);
  color: #fff;
  border-color: var(--site-primary-color);
}

.products-filter-chip i {
  font-size: 12px;
}

/* Products Grid */
.products-premium-grid {
  display: grid;
  gap: 32px;
}

.products-cols-2 { grid-template-columns: repeat(2, 1fr); }
.products-cols-3 { grid-template-columns: repeat(3, 1fr); }
.products-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Product Card */
.product-premium-card {
  background: var(--site-background);
  border-radius: var(--site-radius-xl);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;
  box-shadow: var(--site-shadow-md);
}

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

.product-premium-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--site-shadow-xl);
}

/* Product Visual */
.product-premium-visual {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: linear-gradient(145deg, #f8f9fa 0%, #e9ecef 100%);
}

.product-premium-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.product-premium-card:hover .product-premium-image {
  transform: scale(1.08);
}

.product-premium-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #f1f3f4 0%, #e8eaed 100%);
}

.product-premium-placeholder i {
  font-size: 48px;
  color: #ccc;
}

/* Badge */
.product-premium-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: var(--site-radius-sm);
  z-index: 2;
}

.product-premium-badge.product-badge--default,
.product-premium-badge.product-badge--sale {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
}

.product-premium-badge.product-badge--out-of-stock {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
}

/* Overlay */
.product-premium-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.4s ease;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 24px;
}

.product-premium-card:hover .product-premium-overlay {
  opacity: 1;
}

.product-overlay-actions {
  display: flex;
  gap: 12px;
  transform: translateY(20px);
  transition: transform 0.4s ease;
}

.product-premium-card:hover .product-overlay-actions {
  transform: translateY(0);
}

.product-overlay-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--site-radius-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  text-decoration: none;
}

.product-overlay-btn--primary {
  background: #fff;
  color: var(--site-text-color);
}

.product-overlay-btn--primary:hover {
  background: var(--site-primary-color);
  color: #fff;
}

.product-overlay-btn--cart {
  background: var(--site-primary-color);
  color: #fff;
}

.product-overlay-btn--cart:hover {
  background: var(--site-secondary-color);
}

.product-premium-link-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Product Info */
.product-premium-info {
  padding: 24px;
}

.product-premium-category {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--site-primary-color);
  margin-bottom: 8px;
}

.product-premium-name {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.3;
}

.product-premium-name a {
  color: var(--site-text-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

.product-premium-name a:hover {
  color: var(--site-primary-color);
}

.product-premium-description {
  font-size: 14px;
  color: var(--site-text-muted);
  margin: 0 0 16px;
  line-height: 1.5;
}

.product-premium-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.product-premium-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.price-was {
  font-size: 14px;
  color: var(--site-text-muted);
  text-decoration: line-through;
}

.price-now {
  font-size: 20px;
  font-weight: 800;
  color: var(--site-text-color);
}

.product-premium-quick-add {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--site-surface);
  border-radius: var(--site-radius-md);
  color: var(--site-text-color);
  transition: all 0.3s ease;
  text-decoration: none;
}

.product-premium-quick-add:hover {
  background: var(--site-primary-color);
  color: #fff;
}

/* Empty State */
.products-premium-empty {
  text-align: center;
  padding: 100px 40px;
}

.products-empty-visual {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.products-empty-circles {
  position: absolute;
  inset: 0;
}

.circle {
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--site-primary-color);
  opacity: 0.2;
  animation: pulse 3s infinite;
}

.circle-1 { inset: 0; animation-delay: 0s; }
.circle-2 { inset: 20px; animation-delay: 0.5s; }
.circle-3 { inset: 40px; animation-delay: 1s; }

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.2; }
  50% { transform: scale(1.1); opacity: 0.4; }
}

.products-empty-visual i {
  font-size: 56px;
  color: var(--site-primary-color);
  position: relative;
  z-index: 1;
}

.products-premium-empty h3 {
  font-size: 28px;
  font-weight: 700;
  color: var(--site-text-color);
  margin: 0 0 12px;
}

.products-premium-empty p {
  font-size: 16px;
  color: var(--site-text-muted);
  margin: 0 0 32px;
}

.products-notify-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: var(--site-primary-color);
  color: #fff;
  border: none;
  border-radius: var(--site-radius-md);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.products-notify-btn:hover {
  background: var(--site-secondary-color);
  transform: translateY(-2px);
}

/* Load More */
.products-premium-loadmore {
  text-align: center;
  margin-top: 60px;
}

.products-loadmore-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 40px;
  background: transparent;
  border: 2px solid var(--site-border);
  border-radius: 50px;
  font-size: 15px;
  font-weight: 600;
  color: var(--site-text-color);
  cursor: pointer;
  transition: all 0.3s ease;
}

.products-loadmore-btn:hover {
  border-color: var(--site-primary-color);
  color: var(--site-primary-color);
}

.products-loadmore-btn i {
  transition: transform 0.3s ease;
}

.products-loadmore-btn:hover i {
  transform: translateY(3px);
}

/* CTA */
.products-premium-cta {
  text-align: center;
  margin-top: 60px;
}

.products-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 40px;
  background: linear-gradient(135deg, var(--site-primary-color) 0%, var(--site-secondary-color) 100%);
  color: #fff;
  border-radius: var(--site-radius-md);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 8px 30px color-mix(in srgb, var(--site-primary-color) 30%, transparent);
}

.products-cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px color-mix(in srgb, var(--site-primary-color) 40%, transparent);
}

.products-cta-button i {
  transition: transform 0.3s ease;
}

.products-cta-button:hover i {
  transform: translateX(4px);
}

/* Responsive */
@media (max-width: 1200px) {
  .products-cols-4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  .cms-products-premium {
    padding: 80px 32px;
  }

  .products-cols-3,
  .products-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .products-premium-grid {
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .cms-products-premium {
    padding: 60px 20px;
  }

  .products-premium-header {
    margin-bottom: 40px;
  }

  .products-premium-title {
    font-size: 32px;
  }

  .products-filter-chip {
    padding: 10px 18px;
    font-size: 13px;
  }

  .product-premium-info {
    padding: 20px;
  }

  .product-premium-name {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .cms-products-premium {
    padding: 48px 16px;
  }

  .products-cols-2,
  .products-cols-3,
  .products-cols-4 {
    grid-template-columns: 1fr;
  }

  .products-premium-grid {
    gap: 20px;
  }

  .products-premium-header {
    margin-bottom: 32px;
  }

  .products-premium-title {
    font-size: 28px;
  }

  .products-premium-subtitle {
    font-size: 15px;
  }

  .product-premium-visual {
    aspect-ratio: 1/1;
  }

  .product-premium-info {
    padding: 16px;
  }

  .product-premium-name {
    font-size: 15px;
  }

  .price-now {
    font-size: 18px;
  }

  .products-filter-chip {
    padding: 8px 14px;
    font-size: 12px;
  }
}

/* =============================================
   FEATURED PRODUCTS SECTION
   Extracted from _featured_products.html.erb
   ============================================= */

/* ========== FEATURED PRODUCTS SECTION ========== */
.cms-featured-products {
  padding: 80px 32px;
  background: var(--site-surface, #f9fafb);
}

.featured-products-container {
  max-width: 1280px;
  margin: 0 auto;
}

/* Header */
.featured-products-header {
  text-align: center;
  margin-bottom: 48px;
}

.featured-products-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
  color: white;
  border-radius: var(--site-radius-xl);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.featured-products-badge i {
  font-size: 14px;
}

.featured-products-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  color: var(--site-text-color, #1f2937);
  margin: 0 0 12px;
}

.featured-products-subtitle {
  font-size: 17px;
  color: var(--site-text-muted, #6b7280);
  max-width: 500px;
  margin: 0 auto;
}

/* Grid */
.featured-products-grid {
  display: grid;
  gap: 24px;
}

.featured-cols-2 { grid-template-columns: repeat(2, 1fr); }
.featured-cols-3 { grid-template-columns: repeat(3, 1fr); }
.featured-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Product Card */
.featured-product-card {
  background: var(--site-background, #fff);
  border-radius: var(--site-radius-lg);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: var(--site-shadow-md);
  transition: all 0.3s ease;
  animation: featuredFadeUp 0.5s ease forwards;
  opacity: 0;
}

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

.featured-product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--site-shadow-lg);
  border-color: rgba(0,0,0,0.08);
}

/* Product Image */
.featured-product-image {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--site-surface, #f3f4f6);
}

.featured-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.featured-product-card:hover .featured-product-image img {
  transform: scale(1.08);
}

.featured-product-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-size: 32px;
}

/* Badge */
.featured-product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
  color: white;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: var(--site-radius-sm);
  z-index: 2;
}

/* Overlay */
.featured-product-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  text-decoration: none;
}

.featured-product-card:hover .featured-product-overlay {
  opacity: 1;
}

.overlay-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--site-background);
  color: var(--site-text-color);
  border-radius: var(--site-radius-sm);
  font-weight: 600;
  font-size: 14px;
  transform: translateY(10px);
  transition: transform 0.3s ease;
}

.featured-product-card:hover .overlay-btn {
  transform: translateY(0);
}

/* Product Info */
.featured-product-info {
  padding: 20px;
}

.featured-product-name {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
  line-height: 1.3;
  color: var(--site-text-color, #1f2937);
}

.featured-product-name a {
  color: var(--site-text-color, #1f2937);
  text-decoration: none;
  transition: color 0.2s;
}

.featured-product-name a:hover {
  color: var(--site-primary-color);
}

.featured-product-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.price-old {
  font-size: 14px;
  color: var(--site-text-muted, #9ca3af);
  text-decoration: line-through;
}

.price-current {
  font-size: 18px;
  font-weight: 700;
  color: var(--site-primary-color, #6366f1);
}

/* Empty State */
.featured-products-empty {
  text-align: center;
  padding: 80px 40px;
  background: var(--site-background, #fff);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--site-radius-lg);
}

.empty-visual {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  background: var(--site-primary-color, #6366f1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-visual i {
  font-size: 32px;
  color: white;
}

.featured-products-empty h3 {
  font-size: 22px;
  margin: 0 0 8px;
  color: var(--site-text-color, #1f2937);
}

.featured-products-empty p {
  color: var(--site-text-muted, #6b7280);
  margin: 0;
}

/* CTA */
.featured-products-cta {
  text-align: center;
  margin-top: 48px;
}

.featured-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: var(--site-primary-color, #6366f1);
  color: white;
  border-radius: var(--site-radius-md);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.featured-cta-btn:hover {
  background: var(--site-secondary-color);
  transform: translateY(-2px);
}

.featured-cta-btn i {
  transition: transform 0.3s;
}

.featured-cta-btn:hover i {
  transform: translateX(4px);
}

/* Responsive */
@media (max-width: 1024px) {
  .featured-cols-4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .cms-featured-products { padding: 60px 24px; }
  .featured-cols-3, .featured-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .featured-products-grid { gap: 16px; }
}

@media (max-width: 480px) {
  .cms-featured-products {
    padding: 48px 16px;
  }

  .featured-cols-2, .featured-cols-3, .featured-cols-4 {
    grid-template-columns: 1fr;
  }

  .featured-products-grid {
    gap: 14px;
  }

  .featured-products-title {
    font-size: 24px;
  }

  .featured-products-subtitle {
    font-size: 14px;
  }

  .featured-product-info {
    padding: 16px;
  }

  .featured-product-name {
    font-size: 14px;
  }

  .price-current {
    font-size: 16px;
  }
}

/* =============================================
   FEATURED PRODUCTS — rental_horizontal_scroll
   F1.6 — Coups de coeur en scroll horizontal pour marketplace P2P.
   100 % token-driven (--site-*), aucune ref marque.
   ============================================= */

/* Specificity 0-3-0 to beat cms_blocks/_featured_products.css's
   .cms-section.cms-featured-products base rule (0-2-0) regardless
   of cascade load order (cms_blocks/ loads AFTER cms_sections). */
.cms-section.cms-featured-products.cms-featured-products--rental-horizontal-scroll {
  padding: 48px 0 8px;
  font-family: var(--site-font-family, inherit);
  background: var(--site-primary-light);
}

/* Variant Tendances en fallback — réutilise tout le style "Coups de cœur"
   et ajoute un bloc empty-state centré (icône + texte) dans le même encart.
   Backlog Emma retours 2026-05-26 (2e itération). */
.cms-featured-products--trending-fallback {
  padding-bottom: 48px;
}

.cms-featured-products--trending-fallback .cms-featured-products__fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px 24px 16px;
  text-align: center;
}

.cms-featured-products--trending-fallback .cms-featured-products__fallback-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--site-primary-soft, rgba(12, 153, 148, 0.10));
  color: var(--site-primary-color, #0C9994);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cms-featured-products--trending-fallback .cms-featured-products__fallback-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--site-text-muted, #6B7280);
  max-width: 520px;
}

.cms-featured-products--trending-fallback .cms-featured-products__fallback-text a {
  color: var(--site-primary-color, #0C9994);
  text-decoration: underline;
  font-weight: 600;
}

.cms-featured-products--rental-horizontal-scroll .cms-featured-products__inner {
  max-width: var(--site-container-max, 1240px);
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}

.cms-featured-products--rental-horizontal-scroll .cms-featured-products__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.cms-featured-products--rental-horizontal-scroll .cms-featured-products__title {
  font-size: 21px;
  line-height: 1.2;
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-text-color);
  margin: 0;
}

.cms-featured-products--rental-horizontal-scroll .cms-featured-products__see-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-primary-color);
  padding: 7px 15px;
  border-radius: var(--site-radius-sm, 9px);
  border: 1.5px solid var(--site-primary-soft, var(--site-border));
  background: transparent;
  text-decoration: none;
  transition: var(--site-transition, background .18s, color .18s, border-color .18s);
}

.cms-featured-products--rental-horizontal-scroll .cms-featured-products__see-all:hover {
  background: var(--site-primary-soft, var(--site-primary-light));
  color: var(--site-primary-color);
}

.cms-featured-products--rental-horizontal-scroll .cms-featured-products__scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 6px 4px 12px;
  scrollbar-width: none;
}

.cms-featured-products--rental-horizontal-scroll .cms-featured-products__scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.cms-featured-products--rental-horizontal-scroll .cms-featured-products__card {
  flex-shrink: 0;
  flex-basis: 210px;
  width: 210px;
  scroll-snap-align: start;
  border-radius: var(--site-radius-md, 14px);
  overflow: hidden;
  background: var(--site-background, var(--site-background-color, #fff));
  box-shadow: var(--site-shadow-sm);
  border: 1px solid var(--site-border);
  color: var(--site-text-color);
  text-decoration: none;
  cursor: pointer;
  transition: var(--site-transition, transform .22s, box-shadow .22s);
  display: block;
}

.cms-featured-products--rental-horizontal-scroll .cms-featured-products__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--site-shadow-md, var(--site-shadow-sm));
}

.cms-featured-products--rental-horizontal-scroll .cms-featured-products__card-media {
  position: relative;
  height: 140px;
  overflow: hidden;
  background: var(--site-surface, var(--site-primary-soft));
}

.cms-featured-products--rental-horizontal-scroll .cms-featured-products__card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s;
}

.cms-featured-products--rental-horizontal-scroll .cms-featured-products__card:hover .cms-featured-products__card-image {
  transform: scale(1.05);
}

.cms-featured-products--rental-horizontal-scroll .cms-featured-products__card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--site-text-muted);
}

.cms-featured-products--rental-horizontal-scroll .cms-featured-products__card-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  background: var(--site-accent-color, var(--site-primary-color));
  color: var(--site-background, var(--site-background-color, #fff));
  font-size: 9px;
  font-weight: var(--site-font-weight-black, 900);
  letter-spacing: .5px;
  padding: 3px 8px;
  border-radius: var(--site-radius-sm, 6px);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  box-shadow: var(--site-shadow-sm);
}

.cms-featured-products--rental-horizontal-scroll .cms-featured-products__card-heart {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--site-background, var(--site-background-color, #fff));
  border: 1px solid var(--site-border);
  color: var(--site-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: var(--site-shadow-sm);
  transition: var(--site-transition, transform .15s, color .15s, background .15s);
}

.cms-featured-products--rental-horizontal-scroll .cms-featured-products__card-heart:hover {
  transform: scale(1.1);
  color: var(--site-primary-color);
}

.cms-featured-products--rental-horizontal-scroll .cms-featured-products__card-heart--shifted {
  top: auto;
  bottom: 10px;
}

/* PR #3097 — État favori actif (data-favorited="true") : cœur rempli orange */
.cms-featured-products--rental-horizontal-scroll .cms-featured-products__card-heart[data-favorited="true"],
.cms-rental-catalog .cms-rental-catalog__card-heart[data-favorited="true"] {
  background: var(--site-accent-color, #F99907);
  border-color: var(--site-accent-color, #F99907);
  color: #fff;
}
.cms-featured-products--rental-horizontal-scroll .cms-featured-products__card-heart[data-favorited="true"] svg,
.cms-rental-catalog .cms-rental-catalog__card-heart[data-favorited="true"] svg {
  fill: currentColor;
  stroke: currentColor;
}

/* ─────────────────────────────────────────────────────────────────────────
   PR #3097 — Popup conversion "Créez un compte pour conserver vos favoris"
   Injectée dans <body> par favorite_button_controller au 1er clic anonyme.
   ───────────────────────────────────────────────────────────────────────── */
.cms-favorite-modal {
  border: none;
  padding: 0;
  border-radius: 16px;
  max-width: 440px;
  width: calc(100% - 40px);
  background: #fff;
  box-shadow: 0 25px 60px -10px rgba(0,0,0,0.30);
}
.cms-favorite-modal::backdrop {
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.cms-favorite-modal__inner { padding: 32px 28px 26px; text-align: center; position: relative; }
.cms-favorite-modal__close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: none; cursor: pointer;
  font-size: 28px; color: #9ca3af; line-height: 1;
}
.cms-favorite-modal__close:hover { color: #1f2937; }
.cms-favorite-modal__icon { font-size: 40px; margin-bottom: 12px; }
.cms-favorite-modal__title {
  font-size: 19px; font-weight: 800; color: #111827; margin: 0 0 10px;
}
.cms-favorite-modal__text {
  font-size: 14px; line-height: 1.5; color: #4b5563; margin: 0 0 22px;
}
.cms-favorite-modal__actions {
  display: flex; flex-direction: column; gap: 8px;
}
.cms-favorite-modal__btn {
  display: inline-block; padding: 11px 18px;
  border-radius: 10px; font-weight: 700; font-size: 14px;
  text-decoration: none; cursor: pointer; border: none;
  transition: all 0.15s;
}
.cms-favorite-modal__btn--primary {
  background: var(--site-primary-color, #0c9994); color: #fff;
}
.cms-favorite-modal__btn--primary:hover { filter: brightness(1.08); }
.cms-favorite-modal__btn--ghost {
  background: transparent; color: #6b7280;
}
.cms-favorite-modal__btn--ghost:hover { background: #f3f4f6; color: #374151; }

.cms-featured-products--rental-horizontal-scroll .cms-featured-products__card-body {
  padding: 12px 13px 14px;
}

.cms-featured-products--rental-horizontal-scroll .cms-featured-products__card-name {
  /* Backlog Emma 6.9 — titres cards 13.5px → 16px (carousel featured accueil) */
  font-size: 16px;
  font-weight: var(--site-font-weight-bold, 800);
  color: var(--site-text-color);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cms-featured-products--rental-horizontal-scroll .cms-featured-products__card-loc {
  font-size: 11.5px;
  color: var(--site-text-muted);
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cms-featured-products--rental-horizontal-scroll .cms-featured-products__card-loc svg {
  flex-shrink: 0;
  color: var(--site-text-muted);
}

.cms-featured-products--rental-horizontal-scroll .cms-featured-products__card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cms-featured-products--rental-horizontal-scroll .cms-featured-products__card-price {
  font-size: 14.5px;
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-primary-color);
  line-height: 1.1;
}

.cms-featured-products--rental-horizontal-scroll .cms-featured-products__card-price small {
  font-size: 11px;
  font-weight: var(--site-font-weight-regular, 500);
  color: var(--site-text-muted);
  margin-left: 1px;
}

.cms-featured-products--rental-horizontal-scroll .cms-featured-products__card-price--na {
  color: var(--site-text-muted);
  font-weight: var(--site-font-weight-semibold, 600);
}

.cms-featured-products--rental-horizontal-scroll .cms-featured-products__card-stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-text-muted);
}

.cms-featured-products--rental-horizontal-scroll .cms-featured-products__card-stars svg {
  color: var(--site-accent-color, var(--site-primary-color));
}

.cms-featured-products--rental-horizontal-scroll.cms-featured-products--empty {
  padding: 48px 0 24px;
}

.cms-featured-products--rental-horizontal-scroll .cms-featured-products__empty {
  margin: 0;
  padding: 20px;
  text-align: center;
  color: var(--site-text-muted);
  font-size: 14px;
}

@media (max-width: 768px) {
  .cms-featured-products--rental-horizontal-scroll {
    padding: 32px 0 8px;
  }

  .cms-featured-products--rental-horizontal-scroll .cms-featured-products__inner {
    padding: 0 16px;
  }

  .cms-featured-products--rental-horizontal-scroll .cms-featured-products__title {
    font-size: 18px;
  }

  .cms-featured-products--rental-horizontal-scroll .cms-featured-products__card {
    flex-basis: 180px;
    width: 180px;
  }

  .cms-featured-products--rental-horizontal-scroll .cms-featured-products__card-media {
    height: 120px;
  }
}

/* =============================================
   CATEGORIES — rental_explore_grid (F1.7)
   Grille responsive de cartes catégories (marketplace P2P).
   100% var(--site-*) — builder-first.

   Specificity 0-3-0 to survive sibling cms_blocks/* rules
   that may load later.
   ============================================= */
.cms-section.cms-categories.cms-categories--rental-explore-grid {
  padding: 48px 0 8px;
  font-family: var(--site-font-family, inherit);
  background: var(--site-primary-light);
}

.cms-categories--rental-explore-grid .cms-categories__inner {
  max-width: var(--site-container-max, 1240px);
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}

.cms-categories--rental-explore-grid .cms-categories__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.cms-categories--rental-explore-grid .cms-categories__title {
  font-size: 21px;
  line-height: 1.2;
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-text-color);
  margin: 0;
}

.cms-categories--rental-explore-grid .cms-categories__subtitle {
  flex-basis: 100%;
  margin: 0;
  font-size: 14px;
  color: var(--site-text-muted);
}

.cms-categories--rental-explore-grid .cms-categories__see-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-primary-color);
  padding: 7px 15px;
  border-radius: var(--site-radius-sm, 9px);
  border: 1.5px solid var(--site-primary-soft, var(--site-border));
  background: transparent;
  text-decoration: none;
  transition: var(--site-transition, background .18s, color .18s, border-color .18s);
}

.cms-categories--rental-explore-grid .cms-categories__see-all:hover {
  background: var(--site-primary-soft, var(--site-primary-light));
  color: var(--site-primary-color);
}

.cms-categories--rental-explore-grid .cms-categories__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Column overrides driven by data attributes (no inline style — CSP-safe). */
.cms-categories--rental-explore-grid[data-cms-cols-desktop="1"] .cms-categories__grid { grid-template-columns: repeat(1, 1fr); }
.cms-categories--rental-explore-grid[data-cms-cols-desktop="2"] .cms-categories__grid { grid-template-columns: repeat(2, 1fr); }
.cms-categories--rental-explore-grid[data-cms-cols-desktop="3"] .cms-categories__grid { grid-template-columns: repeat(3, 1fr); }
.cms-categories--rental-explore-grid[data-cms-cols-desktop="4"] .cms-categories__grid { grid-template-columns: repeat(4, 1fr); }
.cms-categories--rental-explore-grid[data-cms-cols-desktop="5"] .cms-categories__grid { grid-template-columns: repeat(5, 1fr); }
.cms-categories--rental-explore-grid[data-cms-cols-desktop="6"] .cms-categories__grid { grid-template-columns: repeat(6, 1fr); }

.cms-categories--rental-explore-grid .cms-categories__card {
  border-radius: var(--site-radius-md, 14px);
  overflow: hidden;
  background: var(--site-background, var(--site-background-color, #fff));
  box-shadow: var(--site-shadow-sm);
  border: 1px solid var(--site-border);
  color: var(--site-text-color);
  text-decoration: none;
  cursor: pointer;
  transition: var(--site-transition, transform .22s, box-shadow .22s);
  display: block;
}

.cms-categories--rental-explore-grid .cms-categories__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--site-shadow-md, var(--site-shadow-sm));
}

.cms-categories--rental-explore-grid .cms-categories__card-media {
  position: relative;
  height: 155px;
  overflow: hidden;
  background: var(--site-surface, var(--site-primary-soft));
}

.cms-categories--rental-explore-grid .cms-categories__card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s;
}

.cms-categories--rental-explore-grid .cms-categories__card:hover .cms-categories__card-image {
  transform: scale(1.05);
}

/* Dégradé bas-haut pour garantir la lisibilité du badge posé sur l'image. */
.cms-categories--rental-explore-grid .cms-categories__card-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.32) 100%);
  z-index: 1;
}

.cms-categories--rental-explore-grid .cms-categories__card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--site-text-muted);
  font-size: 24px;
}

.cms-categories--rental-explore-grid .cms-categories__card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: var(--site-accent-color, var(--site-primary-color));
  color: var(--site-background, var(--site-background-color, #fff));
  font-size: 10.5px;
  font-weight: var(--site-font-weight-black, 800);
  padding: 4px 10px;
  border-radius: var(--site-radius-sm, 7px);
  box-shadow: var(--site-shadow-sm);
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cms-categories--rental-explore-grid .cms-categories__card-body {
  padding: 12px 13px 14px;
}

.cms-categories--rental-explore-grid .cms-categories__card-name {
  font-size: 13.5px;
  font-weight: var(--site-font-weight-bold, 800);
  color: var(--site-text-color);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cms-categories--rental-explore-grid .cms-categories__card-count {
  font-size: 11.5px;
  color: var(--site-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cms-categories--rental-explore-grid .cms-categories__card-count svg {
  flex-shrink: 0;
  color: var(--site-text-muted);
}

@media (max-width: 1024px) {
  .cms-categories--rental-explore-grid .cms-categories__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .cms-categories--rental-explore-grid[data-cms-cols-tablet="1"] .cms-categories__grid { grid-template-columns: repeat(1, 1fr); }
  .cms-categories--rental-explore-grid[data-cms-cols-tablet="2"] .cms-categories__grid { grid-template-columns: repeat(2, 1fr); }
  .cms-categories--rental-explore-grid[data-cms-cols-tablet="3"] .cms-categories__grid { grid-template-columns: repeat(3, 1fr); }
  .cms-categories--rental-explore-grid[data-cms-cols-tablet="4"] .cms-categories__grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
  .cms-categories--rental-explore-grid {
    padding: 32px 0 8px;
  }
  .cms-categories--rental-explore-grid .cms-categories__inner {
    padding: 0 16px;
  }
  .cms-categories--rental-explore-grid .cms-categories__title {
    font-size: 18px;
  }
  .cms-categories--rental-explore-grid .cms-categories__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .cms-categories--rental-explore-grid[data-cms-cols-mobile="1"] .cms-categories__grid { grid-template-columns: repeat(1, 1fr); }
  .cms-categories--rental-explore-grid[data-cms-cols-mobile="2"] .cms-categories__grid { grid-template-columns: repeat(2, 1fr); }
  .cms-categories--rental-explore-grid[data-cms-cols-mobile="3"] .cms-categories__grid { grid-template-columns: repeat(3, 1fr); }
  .cms-categories--rental-explore-grid .cms-categories__card-media {
    height: 130px;
  }
  .cms-categories--rental-explore-grid .cms-categories__card-body {
    padding: 10px 11px 12px;
  }
  .cms-categories--rental-explore-grid .cms-categories__card-name {
    font-size: 12.5px;
  }
}

/* =============================================
   RENTAL_CATALOG — marketplace_grid (F1.8)
   Grille complète d'annonces récentes avec bouton "Charger plus".
   Cards visuellement identiques à F1.6 (Coups de coeur).
   100% token-driven (--site-*), aucune ref marque.

   Specificity 0-3-0 to beat the legacy inline <style> inside
   _rental_catalog.html.erb and sibling cms_blocks/* rules that may load later.
   ============================================= */
.cms-section.cms-rental-catalog.cms-rental-catalog--marketplace-grid {
  padding: 48px 0 8px;
  font-family: var(--site-font-family, inherit);
  background: var(--site-primary-light);
}

.cms-rental-catalog--marketplace-grid .cms-rental-catalog__inner {
  max-width: var(--site-container-max, 1240px);
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}

.cms-rental-catalog--marketplace-grid .cms-rental-catalog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.cms-rental-catalog--marketplace-grid .cms-rental-catalog__title {
  font-size: 21px;
  line-height: 1.2;
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-text-color);
  margin: 0;
}

.cms-rental-catalog--marketplace-grid .cms-rental-catalog__see-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-primary-color);
  padding: 7px 15px;
  border-radius: var(--site-radius-sm, 9px);
  border: 1.5px solid var(--site-primary-soft, var(--site-border));
  background: transparent;
  text-decoration: none;
  transition: var(--site-transition, background .18s, color .18s, border-color .18s);
}

.cms-rental-catalog--marketplace-grid .cms-rental-catalog__see-all:hover {
  background: var(--site-primary-soft, var(--site-primary-light));
  color: var(--site-primary-color);
}

.cms-rental-catalog--marketplace-grid .cms-rental-catalog__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Column overrides driven by data attributes (no inline style — CSP-safe). */
.cms-rental-catalog--marketplace-grid[data-cms-cols-desktop="1"] .cms-rental-catalog__grid { grid-template-columns: repeat(1, 1fr); }
.cms-rental-catalog--marketplace-grid[data-cms-cols-desktop="2"] .cms-rental-catalog__grid { grid-template-columns: repeat(2, 1fr); }
.cms-rental-catalog--marketplace-grid[data-cms-cols-desktop="3"] .cms-rental-catalog__grid { grid-template-columns: repeat(3, 1fr); }
.cms-rental-catalog--marketplace-grid[data-cms-cols-desktop="4"] .cms-rental-catalog__grid { grid-template-columns: repeat(4, 1fr); }
.cms-rental-catalog--marketplace-grid[data-cms-cols-desktop="5"] .cms-rental-catalog__grid { grid-template-columns: repeat(5, 1fr); }

.cms-rental-catalog--marketplace-grid .cms-rental-catalog__card {
  border-radius: var(--site-radius-md, 14px);
  overflow: hidden;
  background: var(--site-background, var(--site-background-color, #fff));
  box-shadow: var(--site-shadow-sm);
  border: 1px solid var(--site-border);
  color: var(--site-text-color);
  text-decoration: none;
  cursor: pointer;
  transition: var(--site-transition, transform .22s, box-shadow .22s);
  display: block;
}

.cms-rental-catalog--marketplace-grid .cms-rental-catalog__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--site-shadow-md, var(--site-shadow-sm));
}

.cms-rental-catalog--marketplace-grid .cms-rental-catalog__card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--site-surface, var(--site-primary-soft));
}

.cms-rental-catalog--marketplace-grid .cms-rental-catalog__card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s;
}

.cms-rental-catalog--marketplace-grid .cms-rental-catalog__card:hover .cms-rental-catalog__card-image {
  transform: scale(1.05);
}

.cms-rental-catalog--marketplace-grid .cms-rental-catalog__card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--site-text-muted);
}

.cms-rental-catalog--marketplace-grid .cms-rental-catalog__card-tag {
  position: absolute;
  top: 10px;
  /* Backlog Emma 18.15 — badge PRO déplacé en haut-GAUCHE pour libérer
     l'angle top-right au cœur favoris (position uniforme entre cards
     pro et non-pro). Le card-tag de cette variante ne sert qu'au PRO,
     pas à la catégorie (cf. _rental_catalog_marketplace_grid.html.erb). */
  left: 10px;
  z-index: 2;
  background: var(--site-accent-color, var(--site-primary-color));
  color: var(--site-background, var(--site-background-color, #fff));
  /* Backlog Emma 6.9 — tag catégorie 9px → 12px + padding rééquilibré (lisibilité) */
  font-size: 12px;
  font-weight: var(--site-font-weight-black, 900);
  letter-spacing: .5px;
  padding: 4px 9px;
  border-radius: var(--site-radius-sm, 6px);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  box-shadow: var(--site-shadow-sm);
}

.cms-rental-catalog--marketplace-grid .cms-rental-catalog__card-heart {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--site-background, var(--site-background-color, #fff));
  border: 1px solid var(--site-border);
  color: var(--site-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: var(--site-shadow-sm);
  transition: var(--site-transition, transform .15s, color .15s, background .15s);
}

.cms-rental-catalog--marketplace-grid .cms-rental-catalog__card-heart:hover {
  transform: scale(1.1);
  color: var(--site-primary-color);
}

.cms-rental-catalog--marketplace-grid .cms-rental-catalog__card-heart--shifted {
  top: auto;
  bottom: 10px;
}

.cms-rental-catalog--marketplace-grid .cms-rental-catalog__card-body {
  padding: 12px 13px 14px;
}

.cms-rental-catalog--marketplace-grid .cms-rental-catalog__card-name {
  /* Backlog Emma 6.9 — titres cards 13.5px → 16px (page accueil marketplace-grid) */
  font-size: 16px;
  font-weight: var(--site-font-weight-bold, 800);
  color: var(--site-text-color);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cms-rental-catalog--marketplace-grid .cms-rental-catalog__card-loc {
  font-size: 11.5px;
  color: var(--site-text-muted);
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cms-rental-catalog--marketplace-grid .cms-rental-catalog__card-loc svg {
  flex-shrink: 0;
  color: var(--site-text-muted);
}

.cms-rental-catalog--marketplace-grid .cms-rental-catalog__card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cms-rental-catalog--marketplace-grid .cms-rental-catalog__card-price {
  font-size: 14.5px;
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-primary-color);
  line-height: 1.1;
}

.cms-rental-catalog--marketplace-grid .cms-rental-catalog__card-price small {
  font-size: 11px;
  font-weight: var(--site-font-weight-regular, 500);
  color: var(--site-text-muted);
  margin-left: 1px;
}

.cms-rental-catalog--marketplace-grid .cms-rental-catalog__card-price--na {
  color: var(--site-text-muted);
  font-weight: var(--site-font-weight-semibold, 600);
}

.cms-rental-catalog--marketplace-grid .cms-rental-catalog__card-stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-text-muted);
}

.cms-rental-catalog--marketplace-grid .cms-rental-catalog__card-stars svg {
  color: var(--site-accent-color, var(--site-primary-color));
}

.cms-rental-catalog--marketplace-grid .cms-rental-catalog__load-more-wrap {
  text-align: center;
  padding: 40px 0 20px;
}

.cms-rental-catalog--marketplace-grid .cms-rental-catalog__load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--site-primary-soft, var(--site-border));
  color: var(--site-primary-color);
  font-size: 14px;
  font-weight: var(--site-font-weight-bold, 800);
  padding: 13px 32px;
  border-radius: var(--site-radius-md, 14px);
  background: var(--site-background, var(--site-background-color, #fff));
  text-decoration: none;
  transition: var(--site-transition, background .18s, transform .18s, border-color .18s);
}

.cms-rental-catalog--marketplace-grid .cms-rental-catalog__load-more-btn:hover {
  background: var(--site-primary-soft, var(--site-primary-light));
  transform: translateY(-2px);
}

.cms-rental-catalog--marketplace-grid .cms-rental-catalog__load-more-btn svg {
  color: var(--site-primary-color);
}

.cms-rental-catalog--marketplace-grid.cms-rental-catalog--empty {
  padding: 48px 0 24px;
}

.cms-rental-catalog--marketplace-grid .cms-rental-catalog__empty {
  margin: 0;
  padding: 20px;
  text-align: center;
  color: var(--site-text-muted);
  font-size: 14px;
}

@media (max-width: 1024px) {
  .cms-rental-catalog--marketplace-grid .cms-rental-catalog__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .cms-rental-catalog--marketplace-grid[data-cms-cols-tablet="1"] .cms-rental-catalog__grid { grid-template-columns: repeat(1, 1fr); }
  .cms-rental-catalog--marketplace-grid[data-cms-cols-tablet="2"] .cms-rental-catalog__grid { grid-template-columns: repeat(2, 1fr); }
  .cms-rental-catalog--marketplace-grid[data-cms-cols-tablet="3"] .cms-rental-catalog__grid { grid-template-columns: repeat(3, 1fr); }
  .cms-rental-catalog--marketplace-grid[data-cms-cols-tablet="4"] .cms-rental-catalog__grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
  .cms-section.cms-rental-catalog.cms-rental-catalog--marketplace-grid {
    padding: 32px 0 8px;
  }
  .cms-rental-catalog--marketplace-grid .cms-rental-catalog__inner {
    padding: 0 16px;
  }
  .cms-rental-catalog--marketplace-grid .cms-rental-catalog__head {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
  }
  .cms-rental-catalog--marketplace-grid .cms-rental-catalog__title {
    font-size: 18px;
  }
  .cms-rental-catalog--marketplace-grid .cms-rental-catalog__see-all {
    font-size: 12px;
    padding: 6px 12px;
  }
  .cms-rental-catalog--marketplace-grid .cms-rental-catalog__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .cms-rental-catalog--marketplace-grid[data-cms-cols-mobile="1"] .cms-rental-catalog__grid { grid-template-columns: repeat(1, 1fr); }
  .cms-rental-catalog--marketplace-grid[data-cms-cols-mobile="2"] .cms-rental-catalog__grid { grid-template-columns: repeat(2, 1fr); }
  .cms-rental-catalog--marketplace-grid[data-cms-cols-mobile="3"] .cms-rental-catalog__grid { grid-template-columns: repeat(3, 1fr); }
  .cms-rental-catalog--marketplace-grid .cms-rental-catalog__card-body {
    padding: 10px 11px 12px;
  }
  .cms-rental-catalog--marketplace-grid .cms-rental-catalog__card-name {
    font-size: 12.5px;
  }
  .cms-rental-catalog--marketplace-grid .cms-rental-catalog__load-more-wrap {
    padding: 28px 0 12px;
  }
  .cms-rental-catalog--marketplace-grid .cms-rental-catalog__load-more-btn {
    font-size: 13px;
    padding: 11px 24px;
  }
}

/* =============================================
   NEWSLETTER SECTION
   Extracted from _newsletter.html.erb
   ============================================= */

.newsletter-message {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: var(--site-radius-sm);
  font-size: 14px;
  text-align: center;
}
.newsletter-success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}
.newsletter-error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}
.newsletter-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* =============================================
   LOYALTY SECTION
   Extracted from _loyalty.html.erb
   ============================================= */

.cms-loyalty {
  padding: 60px 20px;
}
.loyalty-section-container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.loyalty-section-header {
  margin-bottom: 40px;
}
.loyalty-section-icon {
  font-size: 48px;
  margin-bottom: 16px;
}
.loyalty-section-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--site-text-color, #18181b);
  margin: 0 0 12px;
}
.loyalty-section-subtitle {
  font-size: 16px;
  color: var(--site-text-muted, #71717a);
  margin: 0;
  max-width: 500px;
  margin: 0 auto;
}
.loyalty-points-info {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  padding: 24px;
  background: var(--site-surface, #f9fafb);
  border-radius: var(--site-radius-lg);
}
.points-info-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.points-info-item i {
  font-size: 24px;
}
.points-info-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.points-info-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--site-text-color, #18181b);
}
.points-info-label {
  font-size: 13px;
  color: var(--site-text-muted, #71717a);
}
.loyalty-lookup-compact {
  margin-bottom: 32px;
  padding: 24px;
  background: var(--site-background);
  border: 1px solid var(--site-border, #e4e4e7);
  border-radius: var(--site-radius-md);
}
.lookup-label {
  font-size: 14px;
  color: var(--site-text-muted, #52525b);
  margin: 0 0 12px;
}
.lookup-form-inline {
  display: flex;
  gap: 8px;
  max-width: 400px;
  margin: 0 auto;
}
.lookup-email-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--site-border, #e4e4e7);
  border-radius: var(--site-radius-sm);
  font-size: 14px;
  outline: none;
}
.lookup-email-input:focus {
  border-color: var(--site-primary-color);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.lookup-submit-btn {
  padding: 12px 16px;
  border: none;
  border-radius: var(--site-radius-sm);
  color: #fff;
  cursor: pointer;
  transition: opacity 0.2s;
}
.lookup-submit-btn:hover {
  opacity: 0.9;
}
.lookup-result {
  margin-top: 16px;
  padding: 12px;
  border-radius: var(--site-radius-sm);
  font-size: 14px;
}
.lookup-result-success {
  background: #d4edda;
  color: #155724;
}
.lookup-points-value {
  font-weight: 700;
  font-size: 18px;
}
.lookup-result-not-found {
  background: #fff3cd;
  color: #856404;
}
.lookup-result-error {
  background: #f8d7da;
  color: #721c24;
}
.loyalty-section-cta {
  margin-top: 24px;
}
.loyalty-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--site-radius-sm);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: opacity 0.2s, transform 0.2s;
}
.loyalty-cta-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.loyalty-section-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--site-text-muted, #a1a1aa);
}
.loyalty-section-empty i {
  font-size: 48px;
  margin-bottom: 16px;
}
@media (max-width: 480px) {
  .loyalty-points-info {
    flex-direction: column;
    gap: 20px;
  }
  .points-info-item {
    justify-content: center;
  }
  .loyalty-section-title {
    font-size: 24px;
  }
}

/* ========== UTILITY CLASSES ========== */
.cms-hidden { display: none; }

/* ========== DIVIDER SECTION ========== */
.cms-divider {
  padding: 32px;
}
.cms-divider hr {
  border: none;
  margin: 0 auto;
}

/* ========== CONTACT FORM SECTION ========== */
.form-success-message,
.form-error-message {
  padding: 16px;
  border-radius: var(--site-radius-sm);
  text-align: center;
  margin-top: 12px;
}
.form-success-message {
  background: #d4edda;
  color: #155724;
}
.form-error-message {
  background: #f8d7da;
  color: #721c24;
}

/* ========== TESTIMONIALS SECTION (fixed structural styles) ========== */
.testimonials-aggregate {
  text-align: center;
  margin-bottom: 3rem;
}
.aggregate-stars {
  font-size: 1.5rem;
  color: #fbbf24;
  margin-bottom: 0.5rem;
}
.aggregate-summary {
  color: var(--site-text-muted);
  margin: 0;
}
.aggregate-summary strong {
  color: var(--site-text-color);
}
.testimonial-verified {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--site-border);
}
.testimonial-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--premium-success);
}
.testimonials-cta-wrapper {
  text-align: center;
  margin-top: 3rem;
}
.testimonials-trust-logos {
  margin-top: 4rem;
  text-align: center;
}
.testimonials-trust-logos > p {
  color: var(--site-text-muted);
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}
.testimonials-trust-logos-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
  opacity: 0.6;
}
.testimonials-trust-logos-grid img {
  height: 32px;
  width: auto;
  filter: grayscale(100%);
}
.avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--premium-gradient-primary);
  color: white;
  font-weight: 700;
}

/* ========== FAQ SECTION (grid variant fixed styles) ========== */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}
.faq-grid-card-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.faq-grid-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--site-radius-sm);
  background: var(--site-secondary-color, #E8F7F4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.faq-grid-icon i {
  color: var(--site-primary-color, #4DBBAB);
  font-size: 14px;
}
.faq-grid-card h4 {
  margin: 0 0 6px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--site-text-color);
}
.faq-grid-card p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--site-text-muted);
  line-height: 1.5;
}
.faq-title-highlight {
  color: var(--site-primary-color, #4DBBAB);
  font-style: italic;
  text-decoration: underline;
  text-decoration-color: var(--site-primary-color, #4DBBAB);
}

/* ========== STATS SECTION (premium fixed styles) ========== */
.stats-header-premium {
  color: white;
}
.stats-badge-premium {
  background: rgba(255,255,255,0.15);
  color: white;
}
.stats-title-white {
  color: white;
}
.stats-subtitle-premium {
  color: rgba(255,255,255,0.7);
}
.stats-cta-wrapper {
  text-align: center;
  margin-top: 3rem;
}
.stats-cta-btn-premium {
  border-color: rgba(255,255,255,0.4);
  color: white;
}
.stats-cta-arrow {
  margin-left: 8px;
}

/* ========== TEAM SECTION (fixed structural styles) ========== */
.team-cta {
  text-align: center;
}

/* ========== ACCORDION SECTION (fixed structural styles) ========== */
.accordion-container {
  max-width: 900px;
  margin: 0 auto;
}
.accordion-header {
  text-align: center;
  margin-bottom: 48px;
}
.accordion-subtitle {
  color: var(--site-text-muted);
  margin-top: 16px;
}

/* ========== CTA SECTION (fixed structural styles) ========== */
.cta-badge-premium {
  background: rgba(255,255,255,0.15);
  color: white;
  margin-bottom: 1.5rem;
}
.cta-icon-spacer {
  margin-right: 8px;
}
.cta-icon-spacer-left {
  margin-left: 8px;
}
.cta-trust {
  margin-top: 2rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.7);
}
.cta-trust i {
  margin-right: 6px;
}

/* ========== FEATURES SECTION (fixed structural styles) ========== */
.feature-link-premium {
  padding: 0.75rem 1.5rem;
  margin-top: 1rem;
  display: inline-flex;
}
.feature-icon-spacer {
  margin-left: 8px;
}
.feature-stat-block {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--site-border);
}
.feature-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--site-primary-color);
}
.feature-stat-label {
  font-size: 0.875rem;
  color: var(--site-text-muted);
  margin-left: 0.5rem;
}
.features-cta-wrapper {
  text-align: center;
  margin-top: 3rem;
}

/* ========== PRICING SECTION (fixed structural styles) ========== */
.pricing-cta-arrow {
  margin-left: 8px;
}
.pricing-plan-guarantee {
  text-align: center;
  font-size: 0.875rem;
  color: var(--site-text-muted);
  margin-top: 1rem;
}
.pricing-plan-guarantee i {
  color: var(--premium-success);
}
.pricing-footer-wrapper {
  text-align: center;
  margin-top: 3rem;
}
.pricing-footer-wrapper > p {
  color: var(--site-text-muted);
}
.pricing-trust-elements {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.pricing-trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--site-text-muted);
}
.pricing-trust-item i {
  color: var(--premium-success);
}

/* ========== COLUMNS SECTION (title highlight) ========== */
.columns-title-highlight {
  color: var(--site-primary-color, #4DBBAB);
  font-style: italic;
}

/* ========== HERO SECTION (phone_mockup variant) ========== */

/* Fix 1 — Titre hero blanc, bold, aligné gauche sur fond coloré */
.cms-hero--phone_mockup .hero-split-content {
  text-align: left;
  background: transparent;
  color: #fff;
}
.cms-hero--phone_mockup .hero-split-content .hero-title {
  color: #fff;
  font-weight: 800;
  text-align: left;
  font-size: clamp(2rem, 4vw, 2.6rem);
  line-height: 1.2;
}
.cms-hero--phone_mockup .hero-split-content .hero-subtitle {
  color: rgba(255,255,255,0.9);
  text-align: left;
  font-size: 1rem;
  line-height: 1.7;
  max-width: 480px;
}

/* Fix 2 — Hero highlight (mot souligné en italique) */
.hero-highlight {
  font-style: italic;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.cms-hero .hero-highlight {
  color: #fff;
  text-decoration-color: #fff;
}

/* Fix 4 — Boutons pilule (radius 50px) */
.hero-phone-btn-primary {
  background: #fff;
  color: var(--site-primary-color, #4DBBAB);
  border-radius: 50px;
  padding: 14px 32px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  display: inline-block;
}
.hero-phone-btn-secondary {
  border: 2px solid #fff;
  color: #fff;
  border-radius: 50px;
  padding: 14px 32px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  display: inline-block;
}

/* Fix 3 — Badges flottants sur le phone mockup */
.hero-phone-badge {
  position: absolute;
  background: #fff;
  border-radius: 12px;
  padding: 10px 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  font-size: 0.75rem;
  font-weight: 600;
  color: #2D3436;
  z-index: 10;
  display: flex;
  align-items: center;
}
.hero-phone-badge--top-right { top: 40px; right: -20px; }
.hero-phone-badge--bottom-left { bottom: 60px; left: -30px; }

.hero-phone-image-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* Fix 5 — Phone shadow plus prononcée */
.hero-phone-device {
  width: 260px;
  height: 520px;
  background: #fff;
  border-radius: 36px;
  box-shadow: 0 25px 80px rgba(0,0,0,0.25);
  overflow: hidden;
  position: relative;
  border: 5px solid #e8e8e8;
}
.hero-phone-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 26px;
  background: #e8e8e8;
  border-radius: 0 0 14px 14px;
  z-index: 2;
}
.hero-phone-screen {
  padding: 40px 16px 16px;
  height: 100%;
  background: linear-gradient(135deg, var(--site-primary-color, #4DBBAB) 0%, #3a9e90 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero-phone-screen i {
  font-size: 32px;
  color: #fff;
  margin-bottom: 12px;
}
.hero-phone-screen-title {
  color: #fff;
  font-weight: 700;
  font-size: 18px;
}
.hero-phone-screen-subtitle {
  color: rgba(255,255,255,0.8);
  font-size: 12px;
  margin-top: 8px;
}

@media (max-width: 768px) {
  .faq-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile animation optimizations - faster perceived load on small screens */
@media (max-width: 480px) {
  /* Remove staggered card entry animations on small mobile for faster perceived load */
  .carousel-product-card,
  .product-premium-card,
  .featured-product-card {
    opacity: 1;
    animation-duration: 0.3s;
    animation-delay: 0s !important;
  }

  /* Reduce section scroll animation intensity */
  .cms-section[data-animation="slide"] {
    transform: translateY(20px);
  }

  /* Reduce hover lift effect on mobile (touch devices) */
  .cms-section[data-hover="lift"] .review-card:hover,
  .cms-section[data-hover="lift"] .pricing-plan:hover {
    transform: translateY(-4px);
  }

  /* Simplify decorative pulse animations */
  .circle-1, .circle-2, .circle-3 {
    animation-delay: 0s !important;
  }

  .countdown-badge {
    animation: none;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .cms-section,
  .cms-section * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   NAVBAR MARKETPLACE STICKY GLASS
   Variant: theme_setting('navbar_variant') == 'marketplace_sticky_glass'
   100% token-driven (glassmorphism rgba/blur kept as UI effect constants)
   ========================================================================= */
.cms-navbar--marketplace-sticky-glass {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--site-navbar-bg, rgba(255, 255, 255, 0.85));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--site-navbar-border, rgba(0, 0, 0, 0.06));
  font-family: var(--site-font-family);
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__inner {
  max-width: var(--site-container-max);
  margin: 0 auto;
  padding: 0 32px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__left {
  display: flex;
  align-items: center;
  gap: 48px;
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  /* Logo = SVG currentColor. Token opt-in --site-navbar-logo-color (Coliope :
     blanc sur navbar teal), fallback primary = rendu legacy des autres sites. */
  color: var(--site-navbar-logo-color, var(--site-primary-color));
  text-decoration: none;
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__logo-img {
  height: 36px;
  width: auto;
  display: block;
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__logo-svg-wrapper {
  display: inline-flex;
  align-items: center;
  color: var(--site-navbar-logo-color, var(--site-primary-color));
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__logo-svg-wrapper svg {
  height: 24px;
  width: auto;
  display: block;
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__logo-text {
  font-size: 22px;
  font-weight: var(--site-font-weight-brand);
  color: var(--site-navbar-text-active, var(--site-primary-color));
  letter-spacing: -0.5px;
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__links {
  display: flex;
  gap: 4px;
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__links a {
  font-size: 16px;
  font-weight: var(--site-font-weight-regular);
  color: var(--site-navbar-text, var(--site-text-muted));
  padding: 8px 13px;
  white-space: nowrap;
  position: relative;
  text-decoration: none;
  transition: color 0.2s;
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 1px;
  background: var(--site-accent-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__links a:hover {
  color: var(--site-navbar-text-active, var(--site-text-color));
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__links a:hover::after {
  transform: scaleX(1);
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__links a.is-active {
  color: var(--site-navbar-text-active, var(--site-text-color));
  font-weight: var(--site-font-weight-bold);
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__links a.is-active::after {
  transform: scaleX(1);
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Option B (validé Jérôme 2026-07-07) — CTA « Proposer un objet » en BLANC
   plein sur la nav teal : texte + icône à la couleur de marque. Plus lisible
   que l'ancien contour blanc qui se perdait sur le fond. */
.cms-navbar--marketplace-sticky-glass .cms-navbar__cta {
  font-size: 15px;
  font-weight: var(--site-font-weight-bold);
  color: var(--site-primary-color);
  padding: 11px 22px;
  white-space: nowrap;
  border: 1.5px solid #fff;
  border-radius: var(--site-radius-sm);
  text-decoration: none;
  transition: box-shadow 0.2s, transform 0.2s, background 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__cta-label {
  font-weight: var(--site-font-weight-bold);
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__cta svg {
  stroke: var(--site-primary-color);
  transition: stroke 0.2s;
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__cta:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.32);
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__login {
  font-size: 16px;
  font-weight: var(--site-font-weight-semibold);
  color: var(--site-navbar-text-active, var(--site-text-color));
  padding: 12px 18px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__login:hover {
  color: var(--site-accent-color);
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--site-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  font-weight: var(--site-font-weight-brand);
  letter-spacing: 0.5px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s;
  margin-left: 4px;
  overflow: hidden;
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__avatar:hover {
  transform: scale(1.06);
}
/* Option B (validé Jérôme 2026-07-07) — chip compte « Mon espace » blanc.
   Remplace le rond « E » : pastille couleur de marque + libellé + chevron. */
.cms-navbar--marketplace-sticky-glass .cms-navbar__account {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border-radius: 100px;
  padding: 5px 12px 5px 6px;
  margin-left: 4px;
  text-decoration: none;
  transition: box-shadow 0.2s, transform 0.2s;
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__account:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.32);
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__account-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--site-primary-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: var(--site-font-weight-brand, 800);
  overflow: hidden;
  flex: 0 0 auto;
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__account-dot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__account-label {
  color: var(--site-primary-dark);
  font-weight: var(--site-font-weight-semibold, 600);
  font-size: 13.5px;
  white-space: nowrap;
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__account-chev {
  color: var(--site-primary-dark);
  opacity: 0.7;
  flex: 0 0 auto;
  transition: transform 0.2s;
}

/* ── Menu déroulant compte « Mon espace » (Option A, 2026-07-08) ── */
.cms-navbar--marketplace-sticky-glass .cms-navbar__account-wrap { position: relative; }
.cms-navbar--marketplace-sticky-glass .cms-navbar__account-wrap .cms-navbar__account {
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__account-wrap.is-open .cms-navbar__account-chev {
  transform: rotate(180deg);
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__account-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 246px;
  background: #fff;
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(0, 0, 0, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 1200;
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__account-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__account-menu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 10px;
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__account-dot--lg {
  width: 40px;
  height: 40px;
  font-size: 16px;
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__account-menu-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__account-menu-id strong {
  font-size: 14px;
  color: var(--site-primary-dark);
  font-weight: var(--site-font-weight-brand, 800);
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__account-menu-coins {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--site-primary-color);
  font-weight: var(--site-font-weight-semibold, 600);
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__account-menu-sep {
  height: 1px;
  background: rgba(0, 0, 0, 0.07);
  margin: 4px 6px;
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__account-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  color: #333;
  text-decoration: none;
  transition: background 0.15s;
  white-space: nowrap;
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__account-menu a:hover {
  background: rgba(0, 0, 0, 0.05);
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__account-menu-danger {
  color: #c0392b !important;
  font-weight: var(--site-font-weight-semibold, 600);
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__account-menu-danger:hover {
  background: rgba(192, 57, 43, 0.08) !important;
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__hamburger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--site-navbar-text-active, var(--site-text-color));
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__mobile-menu {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  /* La navbar porte un backdrop-filter (glassmorphism) → elle devient le bloc
     englobant de ce menu en position:fixed. `bottom: 0` se résolvait donc
     contre la hauteur de la navbar (~84px) au lieu du viewport → le menu était
     écrasé à ~48px (« le menu déroulant ne s'ouvre pas »). On force une hauteur
     basée viewport (dvh pour gérer la barre d'URL mobile, vh en fallback). */
  height: calc(100vh - 64px);
  height: calc(100dvh - 64px);
  background: var(--site-background);
  z-index: 499;
  padding: 24px;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__mobile-menu.is-open {
  display: flex;
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__mobile-menu a {
  display: block;
  padding: 14px 0;
  font-size: 18px;
  font-weight: var(--site-font-weight-bold);
  color: var(--site-text-color);
  border-bottom: 1px solid var(--site-border);
  text-decoration: none;
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__mobile-menu a:last-child {
  border-bottom: none;
}
.cms-navbar--marketplace-sticky-glass .cms-navbar__mobile-menu-accent {
  color: var(--site-primary-color) !important;
}
@media (max-width: 860px) {
  .cms-navbar--marketplace-sticky-glass .cms-navbar__links {
    display: none;
  }
  .cms-navbar--marketplace-sticky-glass .cms-navbar__hamburger {
    display: flex;
  }
  /* T01 (20/07) — le CTA « Proposer un objet » réduit à son icône « + »
     chevauchait le logo sur petit écran. On le masque : l'action est reprise
     dans le menu hamburger (cf. partial _marketplace_sticky_glass). */
  .cms-navbar--marketplace-sticky-glass .cms-navbar__cta {
    display: none;
  }
  .cms-navbar--marketplace-sticky-glass .cms-navbar__cta-label {
    display: none;
  }
  /* Option B — sur mobile la chip compte se réduit à la pastille (gain de place) */
  .cms-navbar--marketplace-sticky-glass .cms-navbar__account-label,
  .cms-navbar--marketplace-sticky-glass .cms-navbar__account-chev {
    display: none;
  }
  .cms-navbar--marketplace-sticky-glass .cms-navbar__account {
    padding: 4px;
  }
  .cms-navbar--marketplace-sticky-glass .cms-navbar__inner {
    padding: 0 16px;
    height: 64px;
  }
}
@media (max-width: 576px) {
  .cms-navbar--marketplace-sticky-glass .cms-navbar__mobile-menu {
    top: 56px;
    padding: 16px;
  }
  .cms-navbar--marketplace-sticky-glass .cms-navbar__mobile-menu a {
    font-size: 16px;
    padding: 12px 0;
  }
}

/* =========================================================================
   NAVBAR MARKETPLACE ACCOUNT
   Variant: rendered automatically on authenticated/private marketplace pages
   (mon-compte, fidelite, location/mes-*, ma-location, messages,
   reservation-loueur). Minimal: logo + "Retour au site" + avatar.
   100% token-driven.
   ========================================================================= */
.cms-navbar--marketplace-account {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--site-background);
  border-bottom: 1px solid var(--site-border);
}
.cms-navbar--marketplace-account .cms-navbar__inner {
  max-width: var(--site-container-max);
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.cms-navbar--marketplace-account .cms-navbar__logo-link {
  display: inline-flex;
  align-items: center;
  height: 32px;
  color: var(--site-primary-color);
  text-decoration: none;
}
.cms-navbar--marketplace-account .cms-navbar__logo-img {
  height: 32px;
  width: auto;
  display: block;
}
.cms-navbar--marketplace-account .cms-navbar__logo-svg-wrapper {
  display: inline-flex;
  align-items: center;
  height: 28px;
  color: var(--site-primary-color);
}
.cms-navbar--marketplace-account .cms-navbar__logo-svg-wrapper svg {
  height: 28px;
  width: auto;
}
.cms-navbar--marketplace-account .cms-navbar__logo-text {
  font-size: 18px;
  font-weight: var(--site-font-weight-bold);
  color: var(--site-text-color);
}
.cms-navbar--marketplace-account .cms-navbar__account-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cms-navbar--marketplace-account .cms-navbar__back-to-site {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--site-radius-sm);
  font-size: 13px;
  font-weight: var(--site-font-weight-bold);
  color: var(--site-text-muted);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.cms-navbar--marketplace-account .cms-navbar__back-to-site:hover {
  background: var(--site-surface);
  color: var(--site-text-color);
}
.cms-navbar--marketplace-account .cms-navbar__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--site-primary-soft);
  color: var(--site-primary-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: var(--site-font-weight-black);
  overflow: hidden;
  border: 2px solid var(--site-border);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.cms-navbar--marketplace-account .cms-navbar__avatar:hover {
  border-color: var(--site-primary-color);
  transform: scale(1.05);
}
.cms-navbar--marketplace-account .cms-navbar__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cms-navbar--marketplace-account .cms-navbar__avatar-initials {
  line-height: 1;
}

/* Backlog Emma L3.16 — bulle notification messages non-lus sur la navbar. */
/* Backlog Emma L5.1 — pastille solde coins (colibri) dans la navbar. */
.cms-navbar--marketplace-account .cms-navbar__coins {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 9px;
  border-radius: 999px;
  background: var(--site-surface, rgba(0, 0, 0, 0.05));
  color: var(--site-text-color, #111);
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  transition: background 0.18s ease, transform 0.18s ease;
}
.cms-navbar--marketplace-account .cms-navbar__coins:hover,
.cms-navbar--marketplace-account .cms-navbar__coins:focus-visible {
  background: var(--site-accent-soft, #FFF4E0);
  transform: translateY(-1px);
  outline: none;
}
.cms-navbar--marketplace-account .cms-navbar__coins-value {
  color: var(--site-accent-color, #F99907);
}

.cms-navbar--marketplace-account .cms-navbar__notif {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--site-text-color, #111);
  background: transparent;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}
.cms-navbar--marketplace-account .cms-navbar__notif:hover,
.cms-navbar--marketplace-account .cms-navbar__notif:focus-visible {
  background: var(--site-surface, rgba(0, 0, 0, 0.06));
  outline: none;
}
.cms-navbar--marketplace-account .cms-navbar__notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--site-danger, #ef4444);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid var(--site-background, #fff);
}

/* Bouton Déconnexion (déplacé depuis le hero du dashboard) */
.cms-navbar--marketplace-account .cms-navbar__logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--site-radius-sm);
  font-size: 13px;
  font-weight: var(--site-font-weight-bold);
  color: var(--site-text-muted);
  text-decoration: none;
  border: 1px solid var(--site-border);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cms-navbar--marketplace-account .cms-navbar__logout:hover {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fecaca;
}
.cms-navbar--marketplace-account .cms-navbar__logout-label {
  white-space: nowrap;
}

@media (max-width: 600px) {
  .cms-navbar--marketplace-account .cms-navbar__inner {
    padding: 12px 16px;
  }
  .cms-navbar--marketplace-account .cms-navbar__back-to-site {
    padding: 6px 10px;
  }
  .cms-navbar--marketplace-account .cms-navbar__back-to-site span {
    display: none;
  }
  .cms-navbar--marketplace-account .cms-navbar__logout {
    padding: 6px 10px;
  }
  .cms-navbar--marketplace-account .cms-navbar__logout-label {
    display: none;
  }
}

/* =========================================================================
   FOOTER MARKETPLACE DARK 4COLS
   Variant: theme_setting('footer_variant') == 'marketplace_dark_4cols'
   100% token-driven
   ========================================================================= */
.cms-footer--marketplace-dark-4cols {
  background: var(--site-footer-bg);
  padding: 56px 32px 32px;
  font-family: var(--site-font-family);
}
.cms-footer--marketplace-dark-4cols .cms-footer__inner {
  max-width: var(--site-container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.cms-footer--marketplace-dark-4cols .cms-footer__col {
  display: block;
}
.cms-footer--marketplace-dark-4cols .cms-footer__col--brand {
  display: block;
}
.cms-footer--marketplace-dark-4cols .cms-footer__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.cms-footer--marketplace-dark-4cols .cms-footer__logo-img {
  height: 28px;
  width: auto;
  filter: brightness(0) invert(1);
  display: block;
}
.cms-footer--marketplace-dark-4cols .cms-footer__logo-svg-wrapper {
  display: inline-flex;
  align-items: center;
  color: #fff;
}
.cms-footer--marketplace-dark-4cols .cms-footer__logo-svg-wrapper svg {
  height: 22px;
  width: auto;
  display: block;
}
.cms-footer--marketplace-dark-4cols .cms-footer__logo-text {
  font-size: 22px;
  font-weight: var(--site-font-weight-brand);
  color: var(--site-primary-color);
  letter-spacing: -0.5px;
}
.cms-footer--marketplace-dark-4cols .cms-footer__desc {
  font-size: 13px;
  color: var(--site-footer-text-soft);
  line-height: 1.7;
  margin-bottom: 20px;
}
.cms-footer--marketplace-dark-4cols .cms-footer__socials {
  display: flex;
  gap: 8px;
}
/* G2 (Emma 2026-07-01) — la règle générique
   `.cms-footer__col a { display: block }` (ligne ~6178) battait notre
   `display: flex` car `.cms-footer__col a` (spec 0,2,1) > `.cms-footer__social`
   (spec 0,2,0). Résultat prod : SVG 16px en haut-gauche du rond 36px au
   lieu d'être centré. Fix : on ré-augmente la spécificité en ajoutant
   le parent `__socials` (spec 0,3,0). */
.cms-footer--marketplace-dark-4cols .cms-footer__socials .cms-footer__social {
  width: 36px;
  height: 36px;
  border-radius: var(--site-radius-sm);
  background: var(--site-footer-divider);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s;
  text-decoration: none;
  color: var(--site-footer-text-soft);
  margin: 0;
}
/* SVG en block pour éliminer le 4px de baseline inline qui décalait l'icône. */
.cms-footer--marketplace-dark-4cols .cms-footer__socials .cms-footer__social svg {
  display: block;
}
.cms-footer--marketplace-dark-4cols .cms-footer__social:hover {
  background: var(--site-primary-color);
  color: #fff;
}
.cms-footer--marketplace-dark-4cols .cms-footer__social svg {
  stroke: currentColor;
}
.cms-footer--marketplace-dark-4cols .cms-footer__heading {
  font-size: 11px;
  font-weight: var(--site-font-weight-brand);
  color: var(--site-footer-heading);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.cms-footer--marketplace-dark-4cols .cms-footer__col a {
  display: block;
  font-size: 13.5px;
  font-weight: var(--site-font-weight-semibold);
  color: var(--site-footer-text-soft);
  margin-bottom: 10px;
  text-decoration: none;
  transition: color 0.18s;
}
.cms-footer--marketplace-dark-4cols .cms-footer__col a:hover {
  color: #fff;
}
.cms-footer--marketplace-dark-4cols .cms-footer__bottom {
  max-width: var(--site-container-max);
  margin: 0 auto;
  border-top: 1px solid var(--site-footer-divider);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cms-footer--marketplace-dark-4cols .cms-footer__copy {
  font-size: 12.5px;
  color: var(--site-footer-text-soft);
  font-weight: var(--site-font-weight-semibold);
}
.cms-footer--marketplace-dark-4cols .cms-footer__links {
  display: flex;
  gap: 20px;
}
.cms-footer--marketplace-dark-4cols .cms-footer__links a {
  font-size: 12.5px;
  color: var(--site-footer-text-soft);
  font-weight: var(--site-font-weight-semibold);
  text-decoration: none;
  transition: color 0.18s;
}
.cms-footer--marketplace-dark-4cols .cms-footer__links a:hover {
  color: var(--site-footer-text);
}
@media (max-width: 800px) {
  .cms-footer--marketplace-dark-4cols .cms-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 500px) {
  .cms-footer--marketplace-dark-4cols {
    padding: 32px 16px 20px;
  }
  .cms-footer--marketplace-dark-4cols .cms-footer__inner {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 28px;
  }
  .cms-footer--marketplace-dark-4cols .cms-footer__bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  .cms-footer--marketplace-dark-4cols .cms-footer__links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
}

/* =========================================================================
   HERO MARKETPLACE SEARCH MOSAIC
   Variant: hero.variant == 'marketplace_search_mosaic'
   Double-line title, social proof, 3-field search, 3-item photo mosaic.
   100% token-driven.
   ========================================================================= */
/* Neutralize legacy "fixed navbar" spacing for all marketplace (sticky) navbars
   — applies site-wide when navbar_variant starts with "marketplace_*". */
body[data-navbar-variant^="marketplace"] .public-site-main {
  padding-top: 0;
}
body[data-navbar-variant^="marketplace"] .public-site-main > .public-page > .cms-hero:first-child,
body[data-navbar-variant^="marketplace"] .public-site-main > .public-page > .cms-hero-marketplace:first-child {
  margin-top: 0;
  padding-top: 0;
}

.cms-hero--marketplace-search-mosaic {
  /* Neutralize the generic .cms-hero (min-height: 100vh, display: flex,
     align-items: center, gradient bg) inherited from public_site.css. */
  min-height: auto;
  display: block;
  align-items: initial;
  justify-content: initial;
  background: var(--site-primary-light);
  position: relative;
  overflow: hidden;
  padding: 56px 32px 0;
}
.cms-hero--marketplace-search-mosaic .cms-hero__inner {
  width: 100%;
  max-width: var(--site-container-max);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.cms-hero--marketplace-search-mosaic .cms-hero__top {
  text-align: center;
  margin-bottom: 40px;
}
.cms-hero--marketplace-search-mosaic .cms-hero__text {
  max-width: 680px;
  margin: 0 auto;
}
.cms-hero--marketplace-search-mosaic .cms-hero__title {
  font-size: clamp(34px, 4.5vw, 58px);
  font-weight: var(--site-font-weight-black);
  color: var(--site-text-color);
  line-height: 1.05;
  letter-spacing: -1.2px;
  margin: 48px 0 18px;
  font-family: var(--site-font-family);
}
.cms-hero--marketplace-search-mosaic .cms-hero__title-emphasis {
  color: var(--site-primary-color);
  font-family: var(--site-font-family);
  font-style: normal;
  font-weight: var(--site-font-weight-black);
  /* Backlog Emma retours 2026-05-26 (4e itération) — soulignement retiré,
     le contraste de couleur (teal sur noir) + le poids black suffisent à
     porter l'emphase, sans l'effet "lien hypertexte" qui faisait penser à
     un mot cliquable. */
  text-decoration: none;
}
.cms-hero--marketplace-search-mosaic .cms-hero__subtitle {
  font-size: 16px;
  font-weight: var(--site-font-weight-medium);
  color: var(--site-text-muted);
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto;
}
.cms-hero--marketplace-search-mosaic .cms-hero__subtitle strong {
  color: var(--site-text-color);
  font-weight: var(--site-font-weight-bold);
}

/* Community proof */
.cms-hero--marketplace-search-mosaic .cms-hero__proof {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  justify-content: center;
}
.cms-hero--marketplace-search-mosaic .cms-hero__avatars {
  display: flex;
}
.cms-hero--marketplace-search-mosaic .cms-hero__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2.5px solid var(--site-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: var(--site-font-weight-brand);
  color: #fff;
  margin-left: -10px;
}
.cms-hero--marketplace-search-mosaic .cms-hero__avatar:first-child {
  margin-left: 0;
}
.cms-hero--marketplace-search-mosaic .cms-hero__proof-txt {
  font-size: 13.5px;
  color: var(--site-text-muted);
  font-weight: var(--site-font-weight-semibold);
  line-height: 1.35;
  text-align: left;
}
.cms-hero--marketplace-search-mosaic .cms-hero__proof-txt b {
  color: var(--site-text-color);
}

/* Search form */
.cms-hero--marketplace-search-mosaic .cms-hero__form {
  background: var(--site-background);
  border-radius: 16px;
  padding: 7px;
  display: flex;
  align-items: stretch;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 28px var(--site-primary-soft);
  border: 1.5px solid var(--site-primary-soft);
  max-width: 100%;
  margin: 36px auto 0;
  /* Override the site-wide 1.7 body line-height that otherwise stretches
     the form labels and inputs vertically. */
  line-height: 1;
}
.cms-hero--marketplace-search-mosaic .cms-hero__field {
  flex: 1;
  padding: 14px 24px;
  border-right: 1.5px solid var(--site-surface);
  min-width: 0;
  text-align: left;
}
.cms-hero--marketplace-search-mosaic .cms-hero__field:last-of-type {
  border-right: none;
}
.cms-hero--marketplace-search-mosaic .cms-hero__field-label {
  /* Backlog Emma 6.6 — labels Quoi/Où/Quand passés de 10.5px à 14px */
  font-size: 14px;
  font-weight: var(--site-font-weight-brand);
  color: var(--site-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.cms-hero--marketplace-search-mosaic .cms-hero__field-input {
  /* Backlog Emma 6.6 — input + placeholder passés de 14px à 16px */
  font-size: 16px;
  color: var(--site-text-color);
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--site-font-family);
}

/* Backlog Emma retours 2026-05-26 (5e itération) — retirer l'outline focus
   teal-2px qui venait de la règle a11y globale `.cms-section input:focus-visible`.
   La searchbar entière est déjà un repère visuel évident (placeholder, label
   au-dessus du champ) et l'outline carré venait casser la pill ronde du hero. */
.cms-hero--marketplace-search-mosaic .cms-hero__field-input:focus,
.cms-hero--marketplace-search-mosaic .cms-hero__field-input:focus-visible {
  outline: none;
  box-shadow: none;
}
.cms-hero--marketplace-search-mosaic .cms-hero__field-input::placeholder {
  color: var(--site-text-muted-2);
}
/* Backlog Emma 6.7 — rapprocher l'icône calendrier du texte sur le champ "Quand ?".
   Sans override, le ::-webkit-calendar-picker-indicator natif se positionne à l'extrême
   droite d'un input pleine largeur, ce qui le déconnecte visuellement du label.
   On limite la largeur effective au contenu et on resserre l'indicator. */
.cms-hero--marketplace-search-mosaic .cms-hero__field-input[type="date"] {
  width: auto;
  max-width: max-content;
}
.cms-hero--marketplace-search-mosaic .cms-hero__field-input[type="date"]::-webkit-calendar-picker-indicator {
  margin-left: 6px;
  padding: 2px;
  cursor: pointer;
}
.cms-hero--marketplace-search-mosaic .cms-hero__form-btn {
  flex-shrink: 0;
  background: var(--site-primary-color);
  color: #fff;
  font-size: 14px;
  font-weight: var(--site-font-weight-brand);
  padding: 0 32px;
  border-radius: 11px;
  border: 2px solid var(--site-primary-color);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--site-font-family);
  transition: background 0.18s, border-color 0.18s;
  white-space: nowrap;
}
.cms-hero--marketplace-search-mosaic .cms-hero__form-btn:hover {
  background: var(--site-primary-dark);
  border-color: var(--site-primary-dark);
}
.cms-hero--marketplace-search-mosaic .cms-hero__form-btn svg {
  stroke: #fff;
}

/* Photo mosaic */
.cms-hero--marketplace-search-mosaic .cms-hero__mosaic {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 1fr;
  gap: 10px;
  margin-top: 44px;
}
.cms-hero--marketplace-search-mosaic .cms-hero__mosaic-item {
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  height: 210px;
  position: relative;
  background: var(--site-surface);
  display: block;
  text-decoration: none;
  color: inherit;
}
.cms-hero--marketplace-search-mosaic .cms-hero__mosaic-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.cms-hero--marketplace-search-mosaic .cms-hero__mosaic-item:hover img {
  transform: scale(1.04);
}
.cms-hero--marketplace-search-mosaic .cms-hero__mosaic-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--site-primary-light), var(--site-surface));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--site-border);
  font-size: 32px;
}
.cms-hero--marketplace-search-mosaic .cms-hero__mosaic-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 16px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
  color: #fff;
}
.cms-hero--marketplace-search-mosaic .cms-hero__mosaic-label span {
  font-size: 13px;
  font-weight: var(--site-font-weight-brand);
}
.cms-hero--marketplace-search-mosaic .cms-hero__mosaic-label small {
  display: block;
  font-size: 11px;
  font-weight: var(--site-font-weight-semibold);
  opacity: 0.8;
  margin-top: 2px;
}
.cms-hero--marketplace-search-mosaic .cms-hero__mosaic-price {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--site-background);
  color: var(--site-primary-dark);
  font-size: 13px;
  font-weight: var(--site-font-weight-brand);
  padding: 5px 11px;
  border-radius: 8px;
  box-shadow: var(--site-shadow-sm);
}
.cms-hero--marketplace-search-mosaic .cms-hero__mosaic-price small {
  font-size: 10px;
  font-weight: var(--site-font-weight-semibold);
  color: var(--site-text-muted);
}

@media (max-width: 700px) {
  .cms-hero--marketplace-search-mosaic {
    padding: 32px 16px 0;
  }
  .cms-hero--marketplace-search-mosaic .cms-hero__mosaic {
    grid-template-columns: 1fr 1fr;
  }
  .cms-hero--marketplace-search-mosaic .cms-hero__mosaic-item:last-child {
    display: none;
  }
  .cms-hero--marketplace-search-mosaic .cms-hero__form {
    flex-direction: column;
  }
  .cms-hero--marketplace-search-mosaic .cms-hero__field {
    border-right: none;
    border-bottom: 1.5px solid var(--site-surface);
  }
  .cms-hero--marketplace-search-mosaic .cms-hero__field:last-of-type {
    border-bottom: none;
  }
  .cms-hero--marketplace-search-mosaic .cms-hero__form-btn {
    padding: 14px 32px;
    justify-content: center;
  }
}

/* ===================================================================
   Retour Jérôme 2026-05-27 — Bandeau teal englobant pour le hero home.
   Reprend la grammaire visuelle de `cms-rental-catalog__hero` (catalogue) :
   carte gradient teal + searchbar "pill" blanche + pill IA semi-transparente.
   Le titre / sous-titre / social proof restent EN DEHORS (sur fond clair),
   contrairement au hero catalogue qui englobe tout.
   =================================================================== */
.cms-hero--marketplace-search-mosaic .cms-hero__searchblock {
  background: linear-gradient(135deg, var(--site-primary-color, #0C9994) 0%, var(--site-primary-dark, #087371) 100%);
  border-radius: 20px;
  padding: 28px 32px 24px;
  position: relative;
  overflow: hidden;
  margin: 36px 0 0;
  box-shadow: 0 18px 44px rgba(12, 153, 148, 0.18);
}

/* Cercle décoratif coin haut-droit (cohérent avec cms-rental-catalog__hero::after) */
.cms-hero--marketplace-search-mosaic .cms-hero__searchblock::after {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.cms-hero--marketplace-search-mosaic .cms-hero__searchblock-inner {
  position: relative;
  z-index: 1;
}

/* === Searchbar PILL blanche dans le bandeau teal === */
/* Override des styles `.cms-hero__form` existants UNIQUEMENT à l'intérieur
   du searchblock (les autres usages restent intacts). */
.cms-hero--marketplace-search-mosaic .cms-hero__searchblock .cms-hero__form {
  background: #fff;
  border: none;
  border-radius: 999px;
  padding: 6px;
  margin: 0;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  line-height: 1;
}

.cms-hero--marketplace-search-mosaic .cms-hero__searchblock .cms-hero__field {
  border-right: 1px solid var(--site-border-color, #E5EAEA);
  padding: 10px 18px;
}

.cms-hero--marketplace-search-mosaic .cms-hero__searchblock .cms-hero__field:last-of-type {
  border-right: none;
}

.cms-hero--marketplace-search-mosaic .cms-hero__searchblock .cms-hero__field-label {
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--site-text-muted, #6E7C7B);
  margin-bottom: 2px;
  font-weight: 700;
  text-transform: uppercase;
}

.cms-hero--marketplace-search-mosaic .cms-hero__searchblock .cms-hero__field-input {
  font-size: 14px;
  font-weight: 500;
  color: var(--site-text-color, #1A2D2C);
}

.cms-hero--marketplace-search-mosaic .cms-hero__searchblock .cms-hero__field-input::placeholder {
  color: #B8C0BF;
  font-weight: 400;
}

.cms-hero--marketplace-search-mosaic .cms-hero__searchblock .cms-hero__form-btn {
  margin-left: 6px;
  padding: 0 26px;
  border-radius: 999px;
  border: none;
  background: var(--site-primary-color, #0C9994);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}

.cms-hero--marketplace-search-mosaic .cms-hero__searchblock .cms-hero__form-btn:hover {
  background: var(--site-primary-dark, #087371);
  border-color: transparent;
}

/* === Pill IA dans le bandeau teal === */
/* Calque sur `.cms-rental-catalog__hero-intent` (catalogue) : translucide blanc
   sur le fond teal du bandeau. */
.cms-hero--marketplace-search-mosaic .cms-hero__searchblock-intent {
  margin-top: 14px;
}

/* Reset des marges/max-width du composant générique `.cms-intent-search`
   (défini avec margin: 16px 0 28px et max-width 1180px dans son scss). */
.cms-hero--marketplace-search-mosaic .cms-hero__searchblock-intent .cms-intent-search {
  margin: 0;
}

.cms-hero--marketplace-search-mosaic .cms-hero__searchblock-intent .cms-intent-search-strip {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  box-shadow: none;
  max-width: 100%;
  margin: 0;
}

.cms-hero--marketplace-search-mosaic .cms-hero__searchblock-intent .cms-intent-search-strip:hover,
.cms-hero--marketplace-search-mosaic .cms-hero__searchblock-intent .cms-intent-search-strip:focus-within {
  background: rgba(255, 255, 255, 0.18);
  transform: none;
  box-shadow: none;
}

.cms-hero--marketplace-search-mosaic .cms-hero__searchblock-intent .cms-intent-search-strip__label,
.cms-hero--marketplace-search-mosaic .cms-hero__searchblock-intent .cms-intent-search-strip__cta {
  color: rgba(255, 255, 255, 0.92);
}

.cms-hero--marketplace-search-mosaic .cms-hero__searchblock-intent .cms-intent-search-strip__badge {
  background: var(--site-accent-color, #F99907);
  color: #fff;
}

/* Quand le panel IA s'ouvre (is-expanded), il déborde naturellement vers le
   bas avec son fond blanc propre — pas besoin d'override supplémentaire. */

/* Responsive — sous 768px : padding réduit + form en colonne */
@media (max-width: 768px) {
  .cms-hero--marketplace-search-mosaic .cms-hero__searchblock {
    padding: 20px 16px 18px;
    border-radius: 18px;
  }

  .cms-hero--marketplace-search-mosaic .cms-hero__searchblock .cms-hero__form {
    flex-direction: column;
    border-radius: 18px;
    padding: 8px;
  }

  .cms-hero--marketplace-search-mosaic .cms-hero__searchblock .cms-hero__field {
    border-right: none;
    border-bottom: 1px solid var(--site-border-color, #E5EAEA);
    padding: 12px 16px;
  }

  .cms-hero--marketplace-search-mosaic .cms-hero__searchblock .cms-hero__field:last-of-type {
    border-bottom: 1px solid var(--site-border-color, #E5EAEA);
  }

  .cms-hero--marketplace-search-mosaic .cms-hero__searchblock .cms-hero__form-btn {
    margin: 0;
    width: 100%;
    padding: 14px 26px;
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════════════════════════
   CTA PROMO GRADIENT ORBS (F1.5)
   Coliope-inspired promotional banner with gradient + translucent orbs.
   All colors sourced from --site-* tokens (accent gradient, white glass UI).
   ══════════════════════════════════════════════════════════════════ */
.cms-cta--promo-gradient-orbs {
  /* F1.5 — neutralize inherited base .cms-cta (gradient + forced white + heavy padding).
     The card owns its own gradient/padding; the section wrapper should be transparent. */
  background: transparent;
  color: inherit;
  padding: 32px 0;
}
.cms-cta--promo-gradient-orbs .cms-cta__inner {
  /* La largeur du conteneur du site, sans jamais coller aux bords de l'écran :
     même gouttière que la grille des catégories. */
  width: min(var(--site-container-max, 1240px), 100% - 64px);
  margin: 0 auto;
}
@media (max-width: 768px) {
  .cms-cta--promo-gradient-orbs .cms-cta__inner {
    width: calc(100% - 32px);
  }
}
.cms-cta--promo-gradient-orbs .cms-cta__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  border-radius: 20px;
  padding: 44px 52px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  background: linear-gradient(
    130deg,
    var(--site-accent-color) 0%,
    color-mix(in srgb, var(--site-accent-color) 85%, #000) 60%,
    color-mix(in srgb, var(--site-accent-color) 70%, #fff) 100%
  );
  box-shadow: 0 8px 40px color-mix(in srgb, var(--site-accent-color) 30%, transparent);
  transition: transform 0.22s ease;
}
.cms-cta--promo-gradient-orbs.cms-cta--scheme-primary .cms-cta__card {
  background: linear-gradient(
    130deg,
    var(--site-primary-color) 0%,
    color-mix(in srgb, var(--site-primary-color) 85%, #000) 60%,
    color-mix(in srgb, var(--site-primary-color) 70%, #fff) 100%
  );
  box-shadow: 0 8px 40px color-mix(in srgb, var(--site-primary-color) 30%, transparent);
}
.cms-cta--promo-gradient-orbs .cms-cta__card:hover {
  transform: translateY(-3px);
}
.cms-cta--promo-gradient-orbs .cms-cta__orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.cms-cta--promo-gradient-orbs .cms-cta__orb--1 {
  width: 380px;
  height: 380px;
  background: rgba(255, 255, 255, 0.08);
  right: -80px;
  top: -160px;
}
.cms-cta--promo-gradient-orbs .cms-cta__orb--2 {
  width: 180px;
  height: 180px;
  background: rgba(255, 255, 255, 0.06);
  right: 220px;
  bottom: -70px;
}
.cms-cta--promo-gradient-orbs .cms-cta__text {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.cms-cta--promo-gradient-orbs .cms-cta__kicker {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 10.5px;
  font-weight: var(--site-font-weight-brand, 800);
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.cms-cta--promo-gradient-orbs .cms-cta__title {
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: var(--site-font-weight-black, 900);
  color: #fff;
  line-height: 1.1;
  margin: 0 0 10px;
}
.cms-cta--promo-gradient-orbs .cms-cta__subtitle {
  font-size: 14.5px;
  font-weight: var(--site-font-weight-semibold, 600);
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.5;
  margin: 0 0 22px;
}
.cms-cta--promo-gradient-orbs .cms-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--site-accent-color);
  font-size: 13.5px;
  font-weight: var(--site-font-weight-brand, 800);
  padding: 12px 24px;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transition: transform 0.18s ease;
}
.cms-cta--promo-gradient-orbs.cms-cta--scheme-primary .cms-cta__btn {
  color: var(--site-primary-color);
}
.cms-cta--promo-gradient-orbs .cms-cta__card:hover .cms-cta__btn {
  transform: scale(1.04);
}
.cms-cta--promo-gradient-orbs .cms-cta__btn svg {
  stroke: currentColor;
}
.cms-cta--promo-gradient-orbs .cms-cta__image {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 200px;
  height: 140px;
  border-radius: 14px;
  overflow: hidden;
}
.cms-cta--promo-gradient-orbs .cms-cta__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 700px) {
  .cms-cta--promo-gradient-orbs .cms-cta__card {
    flex-direction: column;
    align-items: stretch;
    padding: 28px 24px;
    gap: 20px;
  }
  .cms-cta--promo-gradient-orbs .cms-cta__image {
    width: 100%;
    height: 160px;
  }
}

@media (max-width: 576px) {
  .cms-cta--promo-gradient-orbs {
    padding-top: 32px;
  }
  .cms-cta--promo-gradient-orbs .cms-cta__card {
    padding: 20px 18px;
    border-radius: 14px;
    gap: 16px;
  }
  .cms-cta--promo-gradient-orbs .cms-cta__title {
    font-size: 20px;
  }
  .cms-cta--promo-gradient-orbs .cms-cta__subtitle {
    font-size: 13px;
    margin-bottom: 16px;
  }
  .cms-cta--promo-gradient-orbs .cms-cta__btn {
    font-size: 12px;
    padding: 10px 18px;
  }
  .cms-cta--promo-gradient-orbs .cms-cta__image {
    height: 130px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   CTA PARTNER OFFERS CAROUSEL
   Marketplace-oriented CTA: a horizontal carousel of partner offers
   (coupons, promo codes). 100% token-driven — consumes --site-* only.
   ══════════════════════════════════════════════════════════════════ */
.cms-cta--partner-offers-carousel {
  /* Override the inherited base .cms-cta (gradient + white text + heavy pad) */
  background: transparent;
  color: inherit;
  padding: 40px 24px;
}
.cms-cta--partner-offers-carousel.cms-cta--bg-transparent {
  background: transparent;
}
.cms-cta--partner-offers-carousel.cms-cta--bg-accent-soft {
  background: color-mix(in srgb, var(--site-accent-color) 8%, transparent);
}
.cms-cta--partner-offers-carousel.cms-cta--bg-primary-soft {
  background: color-mix(in srgb, var(--site-primary-color) 8%, transparent);
}

.cms-cta--partner-offers-carousel .cms-cta__inner {
  max-width: var(--site-container-max, 1240px);
  margin: 0 auto;
}

.cms-cta--partner-offers-carousel .cms-cta__header {
  text-align: center;
  margin-bottom: 24px;
}
.cms-cta--partner-offers-carousel .cms-cta__kicker {
  display: inline-block;
  background: var(--site-primary-soft, color-mix(in srgb, var(--site-primary-color) 10%, transparent));
  color: var(--site-primary-color);
  font-size: 10.5px;
  font-weight: var(--site-font-weight-brand, 800);
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 20px;
  padding: 4px 12px;
  margin-bottom: 12px;
}
.cms-cta--partner-offers-carousel .cms-cta__title {
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-text-color);
  line-height: 1.15;
  margin: 0 0 10px;
}
.cms-cta--partner-offers-carousel .cms-cta__subtitle {
  font-size: 16px;
  font-weight: var(--site-font-weight-semibold, 600);
  color: var(--site-text-muted);
  line-height: 1.5;
  max-width: 640px;
  margin: 0 auto;
}

.cms-cta--partner-offers-carousel .cms-cta__carousel {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.cms-cta--partner-offers-carousel .cms-cta__carousel-viewport {
  flex: 1;
  overflow: hidden;
  /* Container query context: cards compute their width from viewport width
     via 100cqw, not from the flex track (which has circular sizing otherwise). */
  container-type: inline-size;
}
.cms-cta--partner-offers-carousel .cms-cta__carousel-track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 20px;
  transition: transform 0.35s ease;
  will-change: transform;
}

.cms-cta--partner-offers-carousel .cms-cta__offer {
  /* 100cqw = 100% of the viewport's inline size (container query).
     Resolves the circular flex-basis bug where `100%` referred to the
     track's width (which depends on children widths). */
  flex: 0 0 calc((100cqw - 40px) / 3);
  background: var(--site-background, #fff);
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius-md, 12px);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: var(--site-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
  box-sizing: border-box;
}
.cms-cta--partner-offers-carousel .cms-cta__offer:hover {
  transform: translateY(-4px);
  box-shadow: var(--site-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
}

.cms-cta--partner-offers-carousel .cms-cta__offer-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cms-cta--partner-offers-carousel .cms-cta__offer-partner-logo {
  max-width: 80px;
  max-height: 36px;
  object-fit: contain;
}
.cms-cta--partner-offers-carousel .cms-cta__offer-partner-initial {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--site-primary-soft, color-mix(in srgb, var(--site-primary-color) 10%, transparent));
  color: var(--site-primary-color);
  font-weight: var(--site-font-weight-bold, 700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cms-cta--partner-offers-carousel .cms-cta__offer-partner-name {
  font-size: 13px;
  font-weight: var(--site-font-weight-semibold, 600);
  color: var(--site-text-muted);
}

.cms-cta--partner-offers-carousel .cms-cta__offer-highlight {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-accent-color);
  line-height: 1;
  letter-spacing: -0.5px;
}
.cms-cta--partner-offers-carousel .cms-cta__offer-title {
  font-size: 15px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-text-color);
  line-height: 1.3;
}
.cms-cta--partner-offers-carousel .cms-cta__offer-description {
  font-size: 13.5px;
  color: var(--site-text-muted);
  line-height: 1.5;
  margin: 0;
  flex-grow: 1;
}

.cms-cta--partner-offers-carousel .cms-cta__offer-code {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed var(--site-border);
}
.cms-cta--partner-offers-carousel .cms-cta__offer-code-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--site-text-muted-2, var(--site-text-muted));
  font-weight: var(--site-font-weight-brand, 800);
}
.cms-cta--partner-offers-carousel .cms-cta__offer-code-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 14px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-primary-color);
  background: var(--site-primary-soft, color-mix(in srgb, var(--site-primary-color) 10%, transparent));
  padding: 4px 10px;
  border-radius: 6px;
}

.cms-cta--partner-offers-carousel .cms-cta__offer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--site-primary-color);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--site-radius-sm, 8px);
  font-size: 13.5px;
  font-weight: var(--site-font-weight-brand, 800);
  text-decoration: none;
  transition: background 0.2s ease;
}
.cms-cta--partner-offers-carousel .cms-cta__offer-btn:hover {
  background: var(--site-primary-dark, var(--site-primary-color));
}
.cms-cta--partner-offers-carousel .cms-cta__offer-btn svg {
  stroke: currentColor;
}
.cms-cta--partner-offers-carousel .cms-cta__offer-btn--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* C.1 — Locked state (visitor not logged in).
   The card / partner / highlight stay visible to seed signup desire,
   only the code value and direct redeem link are gated. */
.cms-cta--partner-offers-carousel .cms-cta__offer-locked {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding: 6px 10px;
  border-radius: var(--site-radius-sm, 8px);
  background: var(--site-primary-soft, color-mix(in srgb, var(--site-primary-color) 10%, transparent));
  color: var(--site-text-muted-2, var(--site-text-muted));
  font-size: 12px;
  font-weight: var(--site-font-weight-bold, 700);
  letter-spacing: 0.2px;
  align-self: flex-start;
}
.cms-cta--partner-offers-carousel .cms-cta__offer-locked-icon {
  flex-shrink: 0;
  color: var(--site-primary-color);
}
.cms-cta--partner-offers-carousel .cms-cta__offer-locked-text {
  white-space: nowrap;
}

.cms-cta--partner-offers-carousel .cms-cta__offer-btn--locked {
  background: transparent;
  color: var(--site-primary-color);
  border: 1px solid var(--site-primary-color);
}
.cms-cta--partner-offers-carousel .cms-cta__offer-btn--locked:hover {
  background: var(--site-primary-soft, color-mix(in srgb, var(--site-primary-color) 12%, transparent));
  color: var(--site-primary-color);
}
.cms-cta--partner-offers-carousel .cms-cta__offer-btn--locked svg {
  stroke: currentColor;
  flex-shrink: 0;
}

/* Backlog Emma retours 2026-05-26 (8e itération) — bouton "Révéler avec X coins".
   Action explicite et engageante (couleur accent = orange Coliope) puisqu'on va
   consommer des coins du customer. Hover assombrit pour signaler l'action. */
.cms-cta--partner-offers-carousel .cms-cta__offer-btn--reveal {
  background: var(--site-accent-color, #F99907);
  color: white;
  border: 1px solid var(--site-accent-color, #F99907);
  cursor: pointer;
}
.cms-cta--partner-offers-carousel .cms-cta__offer-btn--reveal:hover {
  background: color-mix(in srgb, var(--site-accent-color, #F99907) 88%, black);
  color: white;
}
.cms-cta--partner-offers-carousel .cms-cta__offer-btn--reveal svg {
  stroke: currentColor;
  flex-shrink: 0;
}

/* Bouton "Il vous manque X coins" — état muted (pas d'action possible). */
.cms-cta--partner-offers-carousel .cms-cta__offer-btn--insufficient {
  background: var(--site-surface-color, #F5F5F5);
  color: var(--site-text-muted, #6B7280);
  border: 1px dashed var(--site-border-color, #D1D5DB);
  cursor: not-allowed;
}
.cms-cta--partner-offers-carousel .cms-cta__offer-btn--insufficient svg {
  stroke: currentColor;
  flex-shrink: 0;
}

/* button_to génère un <form> wrapper — on annule les styles par défaut pour
   que le bouton reste aligné comme les anchors voisins (link-button visuel). */
.cms-cta--partner-offers-carousel .cms-cta__offer-form {
  margin: 0;
  padding: 0;
  display: inline-block;
  width: 100%;
}
.cms-cta--partner-offers-carousel .cms-cta__offer-form .cms-cta__offer-btn {
  width: 100%;
}

/* Option B — Code partenaire masqué (gate par seuil de points fidélité).
   On garde la même boîte que l'état déverrouillé, mais on grise le code et
   on ajoute une icône cadenas dans le label pour signaler le gate. */
.cms-cta--partner-offers-carousel .cms-cta__offer-code--masked .cms-cta__offer-code-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--site-text-muted);
}
.cms-cta--partner-offers-carousel .cms-cta__offer-code--masked .cms-cta__offer-locked-icon {
  color: var(--site-accent-color, var(--site-primary-color));
}
.cms-cta--partner-offers-carousel .cms-cta__offer-code-value--masked {
  color: var(--site-text-muted);
  background: color-mix(in srgb, var(--site-text-muted, #6b7280) 10%, transparent);
  letter-spacing: 2px;
  opacity: 0.7;
  user-select: none;
}

.cms-cta--partner-offers-carousel .cms-cta__carousel-nav {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--site-background, #fff);
  border: 1px solid var(--site-border);
  box-shadow: var(--site-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
  color: var(--site-text-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.cms-cta--partner-offers-carousel .cms-cta__carousel-nav:hover {
  background: var(--site-primary-color);
  color: #fff;
  border-color: var(--site-primary-color);
}
.cms-cta--partner-offers-carousel .cms-cta__carousel-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.cms-cta--partner-offers-carousel .cms-cta__carousel-nav:disabled:hover {
  background: var(--site-background, #fff);
  color: var(--site-text-color);
  border-color: var(--site-border);
}

.cms-cta--partner-offers-carousel .cms-cta__carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  flex-basis: 100%;
}
.cms-cta--partner-offers-carousel .cms-cta__carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--site-border);
  cursor: pointer;
  border: none;
  padding: 0;
  transition: background 0.2s ease, width 0.2s ease, border-radius 0.2s ease;
}
.cms-cta--partner-offers-carousel .cms-cta__carousel-dot.is-active {
  background: var(--site-primary-color);
  width: 24px;
  border-radius: 4px;
}

/* Responsive via container queries on the viewport (not @media on window)
   so the carousel adapts to its own available space — robust inside any
   layout. */
@container (max-width: 900px) {
  .cms-cta--partner-offers-carousel .cms-cta__offer {
    flex: 0 0 calc((100cqw - 20px) / 2);
  }
}

@container (max-width: 600px) {
  .cms-cta--partner-offers-carousel .cms-cta__offer {
    flex: 0 0 100cqw;
  }
}

@media (max-width: 600px) {
  .cms-cta--partner-offers-carousel {
    padding: 32px 16px;
  }
  .cms-cta--partner-offers-carousel .cms-cta__carousel-nav {
    display: none;
  }
  .cms-cta--partner-offers-carousel .cms-cta__offer-highlight {
    font-size: 32px;
  }
}

/* =============================================
   PARTNERS — logos_marquee (F1.9 v2 — card-based marquee)
   Chaque partenaire s'affiche dans une card riche (initiale dans un rond
   coloré + nom + tagline), en bande défilante infinie. 100 % token-driven
   (--site-*), zéro hex, zéro référence de marque. Spécificité 0-3-0 pour
   battre cms_blocks/*.css.
   ============================================= */

.cms-section.cms-partners.cms-partners--logos-marquee {
  padding: 72px 0;
  font-family: var(--site-font-family, inherit);
  background: transparent;
  overflow: hidden;
}

/* Default v2 look: subtle vertical gradient (transparent → primary-light → transparent). */
.cms-partners.cms-partners--logos-marquee.cms-partners--bg-gradient {
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--site-primary-light, var(--site-primary-soft, transparent)) 50%,
    transparent 100%
  );
}

.cms-partners.cms-partners--logos-marquee.cms-partners--bg-solid-light {
  background: var(--site-primary-light, var(--site-primary-soft, transparent));
}

.cms-partners.cms-partners--logos-marquee.cms-partners--bg-transparent {
  background: transparent;
}

/* White-card style — Backlog Emma retours 2026-05-26 : aligne la section
   partenaires visuellement avec "Coups de cœur" (même fond blanc, même
   container max, padding-bottom resserré pour scander la grappe). */
.cms-partners.cms-partners--logos-marquee.cms-partners--bg-white-card {
  background: var(--site-background-color, #fff);
  padding-top: 0;
  padding-bottom: 48px;
}

/* Primary-light — Backlog Emma retours 2026-05-26 (2e itération) :
   reproduit exactement le bloc Coups de cœur (fond var(--site-primary-light),
   container max 1240px, padding latéral 32px). */
.cms-partners.cms-partners--logos-marquee.cms-partners--bg-primary-light {
  background: var(--site-primary-light);
  padding: 48px 0;
}

.cms-partners--bg-primary-light .cms-partners__inner {
  max-width: var(--site-container-max, 1240px);
  margin: 0 auto;
  padding: 0;
}

/* Spécificité (0,3,0) avec 2 classes sur le même élément (.cms-partners.cms-partners--bg-primary-light)
   pour battre la règle .cms-partners--logos-marquee .cms-partners__title (0,2,0)
   qui apparaît plus bas dans le fichier. */
.cms-partners.cms-partners--bg-primary-light .cms-partners__head {
  max-width: var(--site-container-max, 1240px);
  margin: 0 auto 22px;
  padding: 0 32px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cms-partners.cms-partners--bg-primary-light .cms-partners__head-text { flex: 1; min-width: 0; }
.cms-partners.cms-partners--bg-primary-light .cms-partners__kicker { display: none; }

.cms-partners.cms-partners--bg-primary-light .cms-partners__title {
  font-size: 21px;
  line-height: 1.2;
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-text-color);
  margin: 0;
}

/* See-all CTA en pill identique à "Tout voir" des Coups de cœur */
.cms-partners.cms-partners--bg-primary-light .cms-partners__see-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-primary-color);
  padding: 7px 15px;
  border-radius: var(--site-radius-sm, 9px);
  border: 1.5px solid var(--site-primary-soft, var(--site-border));
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  transform: none;
  transition: var(--site-transition, background .18s, color .18s, border-color .18s);
}

.cms-partners.cms-partners--bg-primary-light .cms-partners__see-all:hover {
  background: var(--site-primary-soft, var(--site-primary-light));
  color: var(--site-primary-color);
  transform: none;
}

/* Inner: full width; head gets horizontal padding, track stays full-bleed. */
.cms-partners--logos-marquee .cms-partners__inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.cms-partners--logos-marquee .cms-partners__head {
  max-width: var(--site-container-max, 1240px);
  margin: 0 auto 32px;
  padding: 0 32px;
  text-align: center;
}

/* Quand une CTA "see all" est rendue à droite, le header bascule en flex
   (title bloc gauche / CTA droite) — calé sur le pattern Coups de cœur. */
.cms-partners--logos-marquee .cms-partners__head:has(.cms-partners__see-all) {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  text-align: left;
}

.cms-partners--logos-marquee .cms-partners__head-text {
  flex: 1;
  min-width: 0;
}

.cms-partners--logos-marquee .cms-partners__see-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-bottom: 4px;
  font-size: 14px;
  font-weight: var(--site-font-weight-semibold, 600);
  color: var(--site-primary-color);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, transform 0.15s ease;
}

.cms-partners--logos-marquee .cms-partners__see-all:hover {
  color: var(--site-primary-dark, var(--site-primary-color));
  transform: translateX(2px);
}

.cms-partners--logos-marquee .cms-partners__see-all svg {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .cms-partners--logos-marquee .cms-partners__head:has(.cms-partners__see-all) {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

.cms-partners--logos-marquee .cms-partners__kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: var(--site-font-weight-brand, 800);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--site-primary-color, var(--site-text-color));
  margin-bottom: 12px;
}

.cms-partners--logos-marquee .cms-partners__title {
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.2;
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-text-color);
  margin: 0 0 8px;
}

.cms-partners--logos-marquee .cms-partners__subtitle {
  margin: 0 auto;
  max-width: 520px;
  font-size: 15px;
  color: var(--site-text-muted, var(--site-text-color));
}

/* Track: full-bleed with lateral mask fade.
   Backlog Emma retours 2026-05-26 (11e itération) — padding vertical pour
   absorber le hover translateY(-3px) + le box-shadow (~24px) qui débordaient
   en haut/bas et se faisaient clipper par overflow:hidden. */
.cms-partners--logos-marquee .cms-partners__track {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 12px 0 24px;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 10%,
    #000 90%,
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 10%,
    #000 90%,
    transparent 100%
  );
}

.cms-partners--logos-marquee .cms-partners__scroll {
  display: flex;
  align-items: stretch;
  gap: 16px;
  width: fit-content;
  animation: cms-partners-marquee var(--cms-partners-duration, 40s) linear infinite;
}

.cms-partners--logos-marquee[data-pause-on-hover="true"] .cms-partners__track:hover .cms-partners__scroll,
.cms-partners--logos-marquee[data-pause-on-hover="true"] .cms-partners__track:focus-within .cms-partners__scroll {
  animation-play-state: paused;
}

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

/* Card: initial bubble + name + tagline. */
.cms-partners--logos-marquee .cms-partners__card {
  display: flex;
  flex-direction: column;
  min-width: 200px;
  max-width: 240px;
  background: var(--site-background, #fff);
  border: 1px solid var(--site-border, rgba(0, 0, 0, 0.08));
  border-radius: var(--site-radius-card, 16px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
  box-shadow: var(--site-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.04));
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.cms-partners--logos-marquee a.cms-partners__card:hover,
.cms-partners--logos-marquee a.cms-partners__card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--site-shadow-md, 0 8px 24px rgba(0, 0, 0, 0.08));
  border-color: var(--site-primary-soft, var(--site-primary-color, currentColor));
  outline: none;
}

/* Média : image plein cadre, ~60% du haut (ratio 5:3), ligne de bordure propre. */
.cms-partners--logos-marquee .cms-partners__media {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 3;
  background: var(--site-surface, #f1f5f4);
  border-bottom: 1px solid var(--site-border, rgba(0, 0, 0, 0.08));
  overflow: hidden;
}
.cms-partners--logos-marquee .cms-partners__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}
.cms-partners--logos-marquee a.cms-partners__card:hover .cms-partners__media img,
.cms-partners--logos-marquee a.cms-partners__card:focus-visible .cms-partners__media img {
  transform: scale(1.04);
}

/* Fallback sans image : dégradé + initiale. */
.cms-partners--logos-marquee .cms-partners__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,
    var(--site-primary-color, #0E8C86),
    var(--site-primary-dark, #0a6d68));
  color: var(--site-background, #fff);
  font-size: 38px;
  font-weight: var(--site-font-weight-black, 900);
}

/* Corps : nom + domaine, centrés. */
.cms-partners--logos-marquee .cms-partners__body {
  padding: 12px 14px 14px;
  text-align: center;
}

.cms-partners--logos-marquee .cms-partners__name {
  font-size: 14px;
  font-weight: var(--site-font-weight-brand, 800);
  color: var(--site-text-color);
  line-height: 1.25;
}

/* Domaine en pastille teal (variante B validée). */
.cms-partners--logos-marquee .cms-partners__tagline {
  display: inline-block;
  margin-top: 7px;
  padding: 2px 10px;
  background: var(--site-primary-soft, rgba(14, 140, 134, 0.10));
  color: var(--site-primary-dark, var(--site-primary-color, var(--site-text-color)));
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: var(--site-font-weight-semibold, 700);
  line-height: 1.3;
}

.cms-partners--logos-marquee.cms-partners--empty {
  padding: 32px 0;
}

.cms-partners--logos-marquee .cms-partners__empty {
  margin: 8px auto 0;
  max-width: var(--site-container-max, 1240px);
  padding: 0 32px;
  text-align: center;
  font-size: 14px;
  color: var(--site-text-muted, var(--site-text-color));
}

@media (prefers-reduced-motion: reduce) {
  .cms-partners--logos-marquee .cms-partners__scroll {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    gap: 16px;
    padding: 0 16px;
  }
}

@media (max-width: 768px) {
  .cms-section.cms-partners.cms-partners--logos-marquee {
    padding: 48px 0;
    --cms-partners-duration: 30s;
  }
  .cms-partners--logos-marquee .cms-partners__head {
    margin-bottom: 24px;
    padding: 0 20px;
  }
  .cms-partners--logos-marquee .cms-partners__card {
    min-width: 168px;
    max-width: 200px;
  }
  .cms-partners--logos-marquee .cms-partners__media--placeholder {
    font-size: 32px;
  }
  .cms-partners--logos-marquee .cms-partners__body {
    padding: 10px 12px 12px;
  }
  .cms-partners--logos-marquee .cms-partners__name {
    font-size: 13px;
  }
  .cms-partners--logos-marquee .cms-partners__tagline {
    font-size: 11px;
  }
}

/* =============================================
   LOYALTY — header unifié des 3 sections de /fidelite (mockup
   coliope_loyalty_refonte.html). Identique partout : pill kicker avec
   badge numéroté ①/②/③ + h2 + subtitle, centré. Tokens --site-*.
   ============================================= */
.cms-loyalty-page__head {
  text-align: center;
  padding: 0 24px;
  margin-bottom: 30px;
}
.cms-loyalty-page__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: var(--site-font-weight-brand, 800);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--site-primary-dark, var(--site-primary-color));
  background: color-mix(in srgb, var(--site-primary-color, #0c9994) 12%, white);
  padding: 6px 16px 6px 6px;
  border-radius: 999px;
}
.cms-loyalty-page__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--site-primary-color, #0c9994);
  color: #fff;
  font-size: 13px;
  font-weight: var(--site-font-weight-black, 900);
  line-height: 1;
}
.cms-loyalty-page__title {
  font-size: 30px;
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-text-color);
  margin: 12px 0 6px;
  letter-spacing: -0.01em;
  font-family: var(--site-font-family, 'Nunito', system-ui, sans-serif);
}
.cms-loyalty-page__subtitle {
  font-size: 15px;
  color: var(--site-text-muted, var(--site-text-color));
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.5;
}

/* =============================================
   LOYALTY — Section 1 : showcase partenaires (carrousel auto-scroll riche)
   Cards plus grandes que le marquee home : image 16:9 + badge "X bons plans"
   + nom + domaine pastille + description longue + lien "Découvrir les offres".
   Défilement CSS pur, pause au survol, prefers-reduced-motion respecté.
   Tokens --site-* uniquement.
   ============================================= */
.cms-section.cms-loyalty-partners {
  padding: 56px 0;
  /* Fond teal très clair (mockup #F4FAF9) — token-driven : mélange 4% du
     primary avec du blanc pour rester sur la palette du site. */
  background: color-mix(in srgb, var(--site-primary-color, #0c9994) 4%, white);
}
.cms-loyalty-partners__inner {
  max-width: var(--site-container-max, 1240px);
  margin: 0 auto;
}
.cms-loyalty-partners__head {
  text-align: center;
  padding: 0 24px;
  margin-bottom: 30px;
}
.cms-loyalty-partners__kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: var(--site-font-weight-brand, 800);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--site-primary-dark, var(--site-primary-color));
  background: color-mix(in srgb, var(--site-primary-color, #0c9994) 12%, white);
  padding: 6px 16px 6px 6px;
  border-radius: 999px;
}
.cms-loyalty-partners__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--site-primary-color, #0c9994);
  color: #fff;
  font-size: 12px;
  font-weight: var(--site-font-weight-black, 900);
  line-height: 1;
}
.cms-loyalty-partners__title {
  font-size: 30px;
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-text-color);
  margin: 12px 0 6px;
  letter-spacing: -0.01em;
}
.cms-loyalty-partners__subtitle {
  font-size: 15px;
  color: var(--site-text-muted, var(--site-text-color));
  max-width: 620px;
  margin: 0 auto;
}

/* =============================================
   HERO IMMERSIVE — Carrousel partenaires (variante A, 2026-06-09)
   Mockup mockups/coliope_partners_hero_carousel.html validé Jérôme.
   Remplace l'ancien marquee auto-scroll (cards lettres uniformes)
   par 1 bandeau photo plein cadre à la fois, navigation arrows + dots.
   Stimulus controller : `loyalty-partners-carousel`.
   ============================================= */

/* Container hero : carrousel principal */
.cms-loyalty-partners-hero {
  position: relative;
  max-width: var(--site-container-max, 1100px);
  margin: 0 auto;
  padding: 0 24px;
  /* Retour Emma (vague 2) — le carousel ne montrait QUE le 1er partenaire.
     Cause : `overflow:hidden` ET `translateX` étaient sur le MÊME élément
     (`__track`), donc le track rognait ses slides puis se déplaçait avec sa
     fenêtre de découpe → seul le slide 1 visible, le reste vide. Le clip doit
     être sur le conteneur FIXE (ici), et le translateX sur le track qui bouge.
     Le fond teal + coins arrondis passent donc ici (et le dégradé sur chaque
     slide). Confirmé en live avec Emma. */
  overflow: hidden;
  border-radius: var(--site-radius-card, 18px);
  box-shadow: var(--site-shadow-md, 0 8px 28px rgba(14, 111, 108, 0.10));
}

/* Track : flex horizontal, transform piloté par Stimulus (translateX -idx*100%)
   Retour Jérôme 2026-06-09 — défilement trop brutal en 0.5s, passé à 1.0s
   avec ease-out-quart (cubic-bezier(0.16, 1, 0.3, 1)) — courbe « soft landing »
   qui démarre vite puis ralentit à l'arrivée, perception très douce. */
.cms-loyalty-partners-hero__track {
  position: relative;
  display: flex;
  width: 100%;
  /* PAS d'overflow ici : c'est le conteneur `.cms-loyalty-partners-hero` qui
     clippe. Le track porte uniquement le translateX (piloté par Stimulus) et
     laisse ses slides déborder pour que le défilement les révèle.
     Le dégradé teal + coins arrondis sont désormais sur le hero / les slides. */
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Slide : 1 par viewport */
.cms-loyalty-partners-hero__slide {
  flex: 0 0 100%;
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  /* Dégradé teal porté par CHAQUE slide (avant : sur le track, donc slide 1
     seulement, cf. fix carousel dans .cms-loyalty-partners-hero). */
  background: linear-gradient(135deg,
    var(--site-primary-color, #199894) 0%,
    var(--site-primary-dark, #0e6f6c) 100%);
}
/* Photo de fond avec léger zoom lent (Ken Burns) sur la slide active pour
   donner vie à l'image entre deux transitions, sans hover. */
/* Retour Emma (vague 2) — les logos partenaires (PNG portrait, fond blanc)
   flottaient comme un rectangle blanc brut au centre. On les présente en
   CARTE BLANCHE arrondie + ombre, calée à droite et centrée verticalement :
   rendu « vitrine de marque ». Le contenu texte (nom/description/CTA) occupe
   la moitié gauche. Rendu validé en live avec Emma. */
.cms-loyalty-partners-hero__slide-img {
  position: absolute;
  top: 50%;
  right: 5%;
  left: auto;
  transform: translateY(-50%);
  width: 32%;
  max-width: 300px;
  height: 80%;
  object-fit: contain;
  padding: 20px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.30);
  z-index: 1;
}

/* Fallback placeholder : dégradé teal + lettre géante en transparence */
.cms-loyalty-partners-hero__slide--placeholder {
  background:
    radial-gradient(circle at 20% 20%, rgba(229, 168, 46, 0.25) 0%, transparent 50%),
    linear-gradient(135deg,
      var(--site-primary-color, #199894) 0%,
      var(--site-primary-dark, #0e6f6c) 100%);
}
.cms-loyalty-partners-hero__slide-letter {
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 360px;
  font-weight: var(--site-font-weight-black, 900);
  color: rgba(255, 255, 255, 0.08);
  letter-spacing: -0.05em;
  line-height: 1;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* Overlay sombre pour lisibilité texte sur photo */
.cms-loyalty-partners-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    transparent 30%,
    rgba(0, 0, 0, 0.55) 75%,
    rgba(0, 0, 0, 0.80) 100%);
}

/* Contenu texte du slide — fade-up subtil quand la slide devient active
   pour adoucir l'arrivée (était perçu trop brutal selon retour Jérôme). */
.cms-loyalty-partners-hero__content {
  position: relative;
  z-index: 2;
  padding: 40px 48px;
  color: #fff;
  /* Largeur bornée : le texte occupe la moitié gauche, la carte logo la
     droite (cf. .cms-loyalty-partners-hero__slide-img) — pas de chevauchement. */
  width: 100%;
  max-width: 58%;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease 0.25s, transform 0.7s ease 0.25s;
}
.cms-loyalty-partners-hero__slide:not([aria-hidden="true"]) .cms-loyalty-partners-hero__content {
  opacity: 1;
  transform: translateY(0);
}

/* Badge gold "X bons plans" */
.cms-loyalty-partners-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #E5A82E;
  color: var(--site-text-color, #1A2D2C);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: var(--site-font-weight-black, 900);
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}

/* Nom du partenaire (gros titre) */
.cms-loyalty-partners-hero__name {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: var(--site-font-weight-black, 900);
  color: #fff;
  margin: 0 0 8px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
  line-height: 1.15;
}

/* Catégorie pill semi-transparente */
.cms-loyalty-partners-hero__cat {
  display: inline-block;
  font-size: 13px;
  font-weight: var(--site-font-weight-semibold, 700);
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.12);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

/* Description */
.cms-loyalty-partners-hero__desc {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
  max-width: 100%;
  margin: 0 0 22px;
  line-height: 1.5;
  /* Cape à 3 lignes : garde la carte propre quelle que soit la longueur. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* CTA pill blanc */
.cms-loyalty-partners-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: var(--site-primary-dark, #0e6f6c);
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: var(--site-font-weight-brand, 800);
  font-size: 14px;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.cms-loyalty-partners-hero__cta:hover,
.cms-loyalty-partners-hero__cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  outline: none;
}
.cms-loyalty-partners-hero__cta i { transition: transform 0.2s; }
.cms-loyalty-partners-hero__cta:hover i,
.cms-loyalty-partners-hero__cta:focus-visible i { transform: translateX(3px); }

/* Arrows navigation latéraux.
   Retour Jérôme 2026-06-10 — fond glassmorphism blanc 15 % invisible sur
   placeholder teal. Passé à fond sombre 45 % + ombre, garantit lisibilité
   sur photo (avec overlay) ET sur placeholder gradient teal. */
.cms-loyalty-partners-hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: all 0.2s;
}
.cms-loyalty-partners-hero__nav:hover,
.cms-loyalty-partners-hero__nav:focus-visible {
  background: rgba(0, 0, 0, 0.65);
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  outline: none;
}
.cms-loyalty-partners-hero__nav--prev { left: 42px; }
.cms-loyalty-partners-hero__nav--next { right: 42px; }

/* Dots pagination en dessous */
.cms-loyalty-partners-hero__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}
.cms-loyalty-partners-hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--site-text-color, #1A2D2C) 20%, transparent);
  cursor: pointer;
  padding: 0;
  border: none;
  transition: all 0.2s;
}
.cms-loyalty-partners-hero__dot--active {
  width: 28px;
  border-radius: 999px;
  background: var(--site-primary-color, #199894);
}
.cms-loyalty-partners-hero__dot:hover,
.cms-loyalty-partners-hero__dot:focus-visible {
  background: color-mix(in srgb, var(--site-text-color, #1A2D2C) 45%, transparent);
  outline: none;
}

/* Responsive */
@media (max-width: 768px) {
  .cms-section.cms-loyalty-partners {
    padding: 44px 0;
  }
  .cms-loyalty-partners__title { font-size: 25px; }
  .cms-loyalty-partners-hero__slide { min-height: 340px; }
  .cms-loyalty-partners-hero__content { padding: 28px 24px; }
  .cms-loyalty-partners-hero__name { font-size: 26px; }
  .cms-loyalty-partners-hero__desc { font-size: 14px; }
  .cms-loyalty-partners-hero__slide-letter { font-size: 240px; right: -20px; }
  .cms-loyalty-partners-hero__nav--prev { left: 12px; }
  .cms-loyalty-partners-hero__nav--next { right: 12px; }
  .cms-loyalty-partners-hero__nav { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .cms-loyalty-partners-hero__track,
  .cms-loyalty-partners-hero__slide-img,
  .cms-loyalty-partners-hero__content,
  .cms-loyalty-partners-hero__cta,
  .cms-loyalty-partners-hero__nav { transition: none; }
  .cms-loyalty-partners-hero__slide-img { transform: none; }
  .cms-loyalty-partners-hero__content { opacity: 1; transform: none; }
}

/* =============================================
   HERO — marketplace_page_header (F2.1)
   Compact page-level hero used on internal pages (catalog, à propos, etc.).
   100% token-driven (--site-*), aucun hex hardcodé, aucune ref marque.
   Specificity 0-3-0 to beat legacy .cms-hero base rules loaded later.
   ============================================= */
.cms-section.cms-hero.cms-hero--marketplace-page-header {
  /* Reset generic .cms-hero (min-height: 100vh, flex, gradient). */
  min-height: auto;
  display: block;
  align-items: initial;
  justify-content: initial;
  padding: 64px 32px 48px;
  background: var(--site-primary-light);
  color: var(--site-text-color);
  font-family: var(--site-font-family, inherit);
  position: relative;
  overflow: hidden;
}

/* Specificity bump (0-5-1) to beat the marketplace navbar padding-top:0
   neutralizer at line ~5918 (same specificity but earlier in source).
   Without this, the section is flush with the sticky navbar. */
body[data-navbar-variant^="marketplace"] .public-site-main > .public-page > .cms-section.cms-hero.cms-hero--marketplace-page-header {
  padding-top: 64px;
}

.cms-hero--marketplace-page-header[data-cms-bg="gradient"] {
  background: linear-gradient(180deg, var(--site-primary-light) 0%, var(--site-background, var(--site-background-color, #fff)) 100%);
}

.cms-hero--marketplace-page-header[data-cms-bg="solid_white"] {
  background: var(--site-background, var(--site-background-color, #fff));
}

.cms-hero--marketplace-page-header .cms-hero__inner {
  width: 100%;
  max-width: var(--cms-hero-max-width, 680px);
  margin: 0 auto;
  position: relative;
  z-index: 1;
  text-align: center;
}

.cms-hero--marketplace-page-header[data-cms-align="left"] .cms-hero__inner {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.cms-hero--marketplace-page-header .cms-hero__kicker {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-primary-color);
  margin-bottom: 14px;
}

.cms-hero--marketplace-page-header .cms-hero__title {
  font-size: clamp(26px, 3.5vw, 40px);
  line-height: 1.1;
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-text-color);
  font-family: var(--site-font-family, inherit);
  letter-spacing: -0.6px;
  margin: 0 0 14px;
}

.cms-hero--marketplace-page-header .cms-hero__subtitle {
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.6;
  color: var(--site-text-muted);
  font-weight: var(--site-font-weight-regular, 500);
  margin: 0 auto;
  max-width: 560px;
}

.cms-hero--marketplace-page-header[data-cms-align="left"] .cms-hero__subtitle {
  margin: 0;
}

.cms-hero--marketplace-page-header .cms-hero__subtitle strong {
  color: var(--site-text-color);
  font-weight: var(--site-font-weight-bold, 700);
}

.cms-hero--marketplace-page-header .cms-hero__subtitle-emphasis {
  color: var(--site-primary-color);
  font-weight: var(--site-font-weight-bold, 700);
  text-decoration: underline;
  text-decoration-color: var(--site-accent-color);
  text-underline-offset: 4px;
  text-decoration-thickness: 2.5px;
}

@media (max-width: 768px) {
  .cms-section.cms-hero.cms-hero--marketplace-page-header {
    padding: 44px 20px 32px;
  }
  .cms-hero--marketplace-page-header .cms-hero__kicker {
    font-size: 11px;
    letter-spacing: 1.4px;
    margin-bottom: 10px;
  }
  .cms-hero--marketplace-page-header .cms-hero__title {
    font-size: clamp(22px, 6vw, 30px);
    margin-bottom: 10px;
  }
  .cms-hero--marketplace-page-header .cms-hero__subtitle {
    font-size: 14px;
  }
}

/* =============================================
   RENTAL_CATALOG — marketplace_catalog_full (F2.2)
   Full catalog with search + category chips + grid + empty state + submit CTA.
   Cards duplicated (intentionally) from marketplace_grid to decouple future
   evolutions between the homepage variant and the full catalog variant.
   100% token-driven (--site-*), aucun hex hardcodé, aucune ref marque.
   Specificity 0-3-0 to beat cms_blocks/*.css loading later.
   ============================================= */
.cms-section.cms-rental-catalog.cms-rental-catalog--marketplace-catalog-full {
  padding: 32px 0 48px;
  font-family: var(--site-font-family, inherit);
  background: var(--site-background, var(--site-background-color, #fff));
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__inner {
  max-width: var(--site-container-max, 1240px);
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}

/* ===================================================================
   Backlog Emma retours 2026-05-26 — refonte zone hero + filtres /location.
   cf. mockups/coliope_catalogue_filters.html
   =================================================================== */

/* Hero compact teal en haut du catalogue */
.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__hero {
  background: linear-gradient(135deg, var(--site-primary-color, #0C9994) 0%, var(--site-primary-dark, #087371) 100%);
  border-radius: 20px;
  padding: 36px 40px 28px;
  color: white;
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__hero::after {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__hero-inner {
  position: relative;
  z-index: 1;
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__hero-title {
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: var(--site-font-weight-black, 800);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: white;
  margin: 0 0 6px;
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__hero-sub {
  font-size: 14px;
  font-weight: 400;
  opacity: 0.85;
  margin: 0 0 22px;
}

/* Searchbar pill — bouton carte + 2 champs + submit */
.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__search--pill {
  background: white;
  border-radius: 999px;
  padding: 6px;
  display: flex;
  align-items: stretch;
  gap: 0;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
  flex-wrap: wrap;
}

.cms-rental-catalog__search-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  /* Retour Emma 2026-05-26 : passer du noir massif à un teal-soft sur fond
     blanc → contraste plus doux dans la searchbar pill et reste reconnaissable
     comme un bouton secondaire. */
  background: var(--site-primary-light, #F0FDFB);
  color: var(--site-primary-dark, #087371);
  border-radius: 999px;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.cms-rental-catalog__search-map-btn:hover {
  background: var(--site-primary-color, #0C9994);
  color: white;
}

.cms-rental-catalog__search-map-btn i {
  font-size: 12px;
}

.cms-rental-catalog__search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  flex: 1;
  min-width: 180px;
  border-right: 1px solid var(--site-border-color, #E5EAEA);
}

.cms-rental-catalog__search-field:last-of-type {
  border-right: none;
}

.cms-rental-catalog__search-field > i {
  color: var(--site-primary-color, #0C9994);
  font-size: 14px;
  flex-shrink: 0;
}

.cms-rental-catalog__search-field-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.cms-rental-catalog__search-field-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--site-text-muted, #6E7C7B);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.cms-rental-catalog__search-field-input {
  border: none;
  outline: none;
  padding: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--site-text-color, #1A2D2C);
  font-weight: 500;
  width: 100%;
  min-width: 0;
}

/* Backlog Emma retours 2026-05-26 (5e itération) — outline focus a11y retiré
   sur les champs Quoi/Où de la searchbar catalog. La règle globale
   `.cms-section input:focus-visible { outline: 2px solid teal }` venait
   casser le radius de la pill blanche du hero. La searchbar pill entière
   matérialise déjà l'état actif. */
.cms-rental-catalog__search-field-input:focus,
.cms-rental-catalog__search-field-input:focus-visible {
  outline: none;
  box-shadow: none;
}

.cms-rental-catalog__search-field-input::placeholder {
  color: #B8C0BF;
  font-weight: 400;
}

.cms-rental-catalog__search-submit {
  margin-left: 6px;
  padding: 0 24px;
  background: var(--site-primary-color, #0C9994);
  color: white;
  border-radius: 999px;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
}

.cms-rental-catalog__search-submit:hover {
  background: var(--site-primary-dark, #087371);
}

@media (max-width: 768px) {
  .cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__hero {
    padding: 24px 20px 20px;
  }

  .cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__search--pill {
    flex-direction: column;
    border-radius: 20px;
    padding: 8px;
  }

  .cms-rental-catalog__search-map-btn,
  .cms-rental-catalog__search-submit {
    justify-content: center;
    width: 100%;
    margin: 0;
  }

  .cms-rental-catalog__search-field {
    border-right: none;
    border-bottom: 1px solid var(--site-border-color, #E5EAEA);
    padding: 12px 16px;
  }

  .cms-rental-catalog__search-field:last-of-type {
    border-bottom: 1px solid var(--site-border-color, #E5EAEA);
  }
}

/* Bandeau IA "Décrivez votre besoin" intégré dans le hero teal.
   On override les styles globaux de .cms-intent-search-strip pour qu'il
   s'adapte au fond du hero (transparence blanche + bordure légère). */
.cms-rental-catalog__hero-intent {
  margin-top: 14px;
}

.cms-rental-catalog__hero-intent .cms-intent-search-strip {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: white;
}

.cms-rental-catalog__hero-intent .cms-intent-search-strip:hover,
.cms-rental-catalog__hero-intent .cms-intent-search-strip:focus-within {
  background: rgba(255, 255, 255, 0.18);
}

.cms-rental-catalog__hero-intent .cms-intent-search-strip__label,
.cms-rental-catalog__hero-intent .cms-intent-search-strip__cta {
  color: rgba(255, 255, 255, 0.92);
}

.cms-rental-catalog__hero-intent .cms-intent-search-strip__badge {
  background: var(--site-accent-color, #F99907);
  color: white;
}

/* ===== Toolbar v2 — catégories + chips popovers ===== */
.cms-rental-catalog__toolbar-v2 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  position: relative;
}

/* Catégories en select (mini-thumbs) */
.cms-rental-catalog__cat-select {
  position: relative;
  flex: 1;
  min-width: 280px;
  max-width: 420px;
}

.cms-rental-catalog__cat-select > summary {
  list-style: none;
  cursor: pointer;
}

.cms-rental-catalog__cat-select > summary::-webkit-details-marker {
  display: none;
}

.cms-rental-catalog__cat-select-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: white;
  border: 1px solid var(--site-border-color, #E5EAEA);
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  color: var(--site-text-color, #1A2D2C);
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cms-rental-catalog__cat-select[open] > summary .cms-rental-catalog__cat-select-btn,
.cms-rental-catalog__cat-select-btn:hover {
  border-color: var(--site-primary-color, #0C9994);
  box-shadow: 0 1px 2px rgba(12, 153, 148, 0.04), 0 4px 12px rgba(26, 45, 44, 0.05);
}

.cms-rental-catalog__cat-thumb {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--site-primary-light, #F0FDFB) center / cover no-repeat;
  flex-shrink: 0;
  border: 2px solid white;
  box-shadow: 0 0 0 1px var(--site-border-color, #E5EAEA);
}

.cms-rental-catalog__cat-current {
  flex: 1;
  font-weight: 600;
}

.cms-rental-catalog__cat-select > summary i {
  color: var(--site-text-muted, #6E7C7B);
  font-size: 11px;
  transition: transform 0.15s ease;
}

.cms-rental-catalog__cat-select[open] > summary i {
  transform: rotate(180deg);
}

.cms-rental-catalog__cat-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--site-border-color, #E5EAEA);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.10);
  padding: 8px;
  max-height: 380px;
  overflow-y: auto;
  z-index: 20;
}

.cms-rental-catalog__cat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  text-decoration: none;
  color: var(--site-text-color, #1A2D2C);
  transition: background 0.12s ease;
}

.cms-rental-catalog__cat-item:hover {
  background: var(--site-primary-light, #F0FDFB);
}

.cms-rental-catalog__cat-item.is-active {
  background: var(--site-primary-light, #F0FDFB);
  color: var(--site-primary-dark, #087371);
  font-weight: 600;
}

.cms-rental-catalog__cat-item-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--site-background-color, #FAFAF8) center / cover no-repeat;
  flex-shrink: 0;
}

/* Chips popovers — Prix / Dates / Tri */
.cms-rental-catalog__chip-pop {
  position: relative;
}

.cms-rental-catalog__chip-pop > summary {
  list-style: none;
  cursor: pointer;
}

.cms-rental-catalog__chip-pop > summary::-webkit-details-marker {
  display: none;
}

.cms-rental-catalog__chip-pop-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: white;
  border: 1px solid var(--site-border-color, #E5EAEA);
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--site-text-color, #1A2D2C);
  transition: border-color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}

.cms-rental-catalog__chip-pop[open] > summary .cms-rental-catalog__chip-pop-btn,
.cms-rental-catalog__chip-pop-btn:hover {
  border-color: var(--site-primary-color, #0C9994);
  background: var(--site-primary-light, #F0FDFB);
}

.cms-rental-catalog__chip-pop.is-active > summary .cms-rental-catalog__chip-pop-btn {
  background: var(--site-primary-light, #F0FDFB);
  border-color: var(--site-primary-color, #0C9994);
}

.cms-rental-catalog__chip-pop-btn > i:first-child {
  color: var(--site-primary-color, #0C9994);
  font-size: 12px;
}

.cms-rental-catalog__chip-pop-btn strong {
  color: var(--site-primary-dark, #087371);
  font-weight: 700;
}

.cms-rental-catalog__chip-pop-clear {
  margin-left: 4px;
  padding: 2px 4px;
  color: var(--site-text-muted, #6E7C7B);
  font-size: 10px;
  text-decoration: none;
  border-radius: 999px;
  transition: color 0.12s ease;
}

.cms-rental-catalog__chip-pop-clear:hover {
  color: var(--site-text-color, #1A2D2C);
}

.cms-rental-catalog__chip-pop-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: white;
  border: 1px solid var(--site-border-color, #E5EAEA);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.10);
  padding: 20px 24px;
  min-width: 320px;
  max-width: 480px;
  z-index: 20;
}

.cms-rental-catalog__chip-pop-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--site-text-color, #1A2D2C);
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cms-rental-catalog__chip-pop-value {
  color: var(--site-primary-dark, #087371);
  font-weight: 800;
}

.cms-rental-catalog__chip-pop-apply {
  margin-top: 14px;
  width: 100%;
  padding: 10px 16px;
  background: var(--site-primary-color, #0C9994);
  color: white;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

.cms-rental-catalog__chip-pop-apply:hover {
  background: var(--site-primary-dark, #087371);
}

.cms-rental-catalog__chip-pop-helper {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--site-primary-light, #F0FDFB);
  border-radius: 8px;
  font-size: 12px;
  color: var(--site-primary-dark, #087371);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}

/* Date range grid */
.cms-rental-catalog__date-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.cms-rental-catalog__date-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cms-rental-catalog__date-field > span {
  font-size: 10px;
  font-weight: 700;
  color: var(--site-text-muted, #6E7C7B);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.cms-rental-catalog__date-field input {
  padding: 10px 12px;
  border: 1px solid var(--site-border-color, #E5EAEA);
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--site-text-color, #1A2D2C);
}

.cms-rental-catalog__date-field input:focus {
  outline: none;
  border-color: var(--site-primary-color, #0C9994);
}

/* Sort dropdown — list of links */
.cms-rental-catalog__chip-pop-panel--sort {
  min-width: 200px;
  padding: 8px;
}

.cms-rental-catalog__sort-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--site-text-color, #1A2D2C);
  text-decoration: none;
  transition: background 0.12s ease;
}

.cms-rental-catalog__sort-item:hover {
  background: var(--site-primary-light, #F0FDFB);
}

.cms-rental-catalog__sort-item.is-active {
  background: var(--site-primary-light, #F0FDFB);
  color: var(--site-primary-dark, #087371);
  font-weight: 600;
}

.cms-rental-catalog__sort-item i {
  color: var(--site-primary-color, #0C9994);
  font-size: 11px;
}

/* Compact price range pour popover */
.cms-price-range.cms-price-range--compact {
  margin-top: 8px;
}

.cms-price-range.cms-price-range--compact .cms-price-range__title {
  display: none;
}

@media (max-width: 768px) {
  .cms-rental-catalog__toolbar-v2 {
    flex-direction: column;
    align-items: stretch;
  }

  .cms-rental-catalog__cat-select {
    max-width: none;
    min-width: 0;
  }

  .cms-rental-catalog__chip-pop-panel {
    left: 0;
    right: 0;
    min-width: 0;
  }
}

/* --- Search form --- */
.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__search {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 20px;
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__search-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  background: var(--site-background, var(--site-background-color, #fff));
  border: 1.5px solid var(--site-border);
  border-radius: var(--site-radius-md, 14px);
  transition: var(--site-transition, border-color .18s, box-shadow .18s);
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__search-wrap:focus-within {
  border-color: var(--site-primary-color);
  box-shadow: 0 0 0 3px var(--site-primary-soft, var(--site-primary-light));
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__search-icon {
  position: absolute;
  left: 14px;
  color: var(--site-text-muted);
  pointer-events: none;
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__search-input {
  flex: 1;
  padding: 12px 14px 12px 42px;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 15px;
  font-family: var(--site-font-family, inherit);
  color: var(--site-text-color);
  border-radius: var(--site-radius-md, 14px);
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__search-input::placeholder {
  color: var(--site-text-muted);
}

/* PR #3099 + polish 2026-05-19 — Filtres additionnels (CP + Prix min/max).
   Chaque champ a sa propre bordure complète (cohérence avec la search bar
   principale). Focus state synchronisé avec --site-primary. */
.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__search-input--cp {
  flex: 0 0 130px;
  padding: 12px 14px;
  background: var(--site-background, #fff);
  border: 1.5px solid var(--site-border, #e5e7eb);
  border-radius: var(--site-radius-md, 14px);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__search-input--cp:focus {
  border-color: var(--site-primary-color);
  box-shadow: 0 0 0 3px var(--site-primary-soft, var(--site-primary-light));
  outline: none;
}
/* ── Slider range Airbnb-style pour filtre prix min/max (PR coliope-polish) ──
   Remplace les anciens inputs number price_min/price_max. Plus moderne, plus
   intuitif (drag des handles), garde l'a11y native via inputs range. */
.cms-price-range {
  position: relative;
  flex: 1 1 260px;
  min-width: 240px;
  padding: 10px 16px 8px;
  background: var(--site-background, #fff);
  border: 1.5px solid var(--site-border, #e5e7eb);
  border-radius: var(--site-radius-md, 14px);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.cms-price-range:focus-within {
  border-color: var(--site-primary-color);
  box-shadow: 0 0 0 3px var(--site-primary-soft, var(--site-primary-light));
}
.cms-price-range__title {
  font-size: 10px;
  font-weight: 600;
  color: var(--site-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 2px;
}
.cms-price-range__track {
  position: relative;
  height: 4px;
  background: var(--site-border, #e5e7eb);
  border-radius: 2px;
  margin: 14px 9px 10px; /* 9px = thumb radius pour que extrêmes touchent les bords */
}
.cms-price-range__active {
  position: absolute;
  top: 0; bottom: 0;
  background: var(--site-primary-color, #0c9994);
  border-radius: 2px;
  transition: left .12s ease, right .12s ease;
}
/* 2 inputs range positionnés EN ENFANTS du track pour centrage automatique
   sur l'axe Y (thumb centré sur la barre, pas au-dessus). */
.cms-price-range__input {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 50%;
  left: -9px;            /* aligné sur extension margin du track */
  right: -9px;
  width: calc(100% + 18px);
  height: 0;
  transform: translateY(-50%);
  background: transparent;
  pointer-events: none;
  outline: none;
  margin: 0;
  z-index: 3;
}
.cms-price-range__input::-webkit-slider-runnable-track {
  background: transparent;
  height: 0;
  border: none;
}
.cms-price-range__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--site-primary-color, #0c9994);
  cursor: grab;
  box-shadow: 0 2px 5px rgba(0,0,0,.15);
  transition: transform .15s ease, box-shadow .15s ease;
  /* Fine-tune : -9px = moitié réelle du thumb (18/2). Le default Webkit positionne
     le thumb avec son top aligné sur le track center, donc il faut le remonter de
     la moitié de sa hauteur pour que son CENTRE soit sur le track. */
  margin-top: -9px;
}
.cms-price-range__input::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 3px 8px rgba(0,0,0,.22);
}
.cms-price-range__input::-webkit-slider-thumb:active { cursor: grabbing; }
.cms-price-range__input::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--site-primary-color, #0c9994);
  cursor: grab;
  box-shadow: 0 2px 5px rgba(0,0,0,.15);
  transition: transform .15s ease;
  /* Cohérence avec ::-webkit-slider-thumb (margin-top -9px = moitié hauteur thumb) */
  transform: translateY(-9px);
}
.cms-price-range__input::-moz-range-track {
  background: transparent;
  border: none;
}
.cms-price-range__labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--site-text-muted, #6b7280);
  padding: 0 4px;
}
.cms-price-range__labels strong {
  color: var(--site-text-color, #111827);
  font-weight: 700;
}
.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__search-price-sep {
  color: var(--site-text-muted);
  font-size: 14px;
  font-weight: 600;
}

/* Mobile : passer les filtres CP/Prix sous la barre principale */
@media (max-width: 768px) {
  .cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__search {
    flex-wrap: wrap;
  }
  .cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__search-input--cp,
  .cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__search-price-range {
    flex-basis: 100%;
    border-left: none;
    border-top: 1px solid var(--site-border, #e5e7eb);
    padding-left: 14px;
  }
  .cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__search-price-range { padding: 6px 14px; }
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__search-btn {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 0 22px;
  font-size: 14px;
  font-weight: var(--site-font-weight-bold, 700);
  font-family: var(--site-font-family, inherit);
  color: var(--site-background, var(--site-background-color, #fff));
  background: var(--site-primary-color);
  border-radius: var(--site-radius-md, 14px);
  transition: var(--site-transition, background .18s, transform .18s);
  white-space: nowrap;
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__search-btn:hover {
  background: var(--site-primary-dark, var(--site-primary-color));
  transform: translateY(-1px);
}

/* --- Category chips --- */
.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--site-border);
  background: var(--site-background, var(--site-background-color, #fff));
  color: var(--site-text-color);
  font-size: 13px;
  font-weight: var(--site-font-weight-semibold, 600);
  font-family: var(--site-font-family, inherit);
  text-decoration: none;
  transition: var(--site-transition, background .18s, color .18s, border-color .18s);
}

/* Variante chip avec vignette : padding gauche réduit pour coller la pastille au bord. */
.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__chip--with-thumb {
  padding-left: 4px;
  gap: 8px;
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__chip-thumb {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
  background: var(--site-primary-soft, var(--site-surface));
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__chip:hover {
  background: var(--site-primary-soft, var(--site-primary-light));
  border-color: var(--site-primary-color);
  color: var(--site-primary-color);
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__chip.is-active {
  background: var(--site-primary-color);
  border-color: var(--site-primary-color);
  color: var(--site-background, var(--site-background-color, #fff));
}

/* --- Grid --- */
.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.cms-rental-catalog--marketplace-catalog-full[data-cms-cols-desktop="1"] .cms-rental-catalog__grid { grid-template-columns: repeat(1, 1fr); }
.cms-rental-catalog--marketplace-catalog-full[data-cms-cols-desktop="2"] .cms-rental-catalog__grid { grid-template-columns: repeat(2, 1fr); }
.cms-rental-catalog--marketplace-catalog-full[data-cms-cols-desktop="3"] .cms-rental-catalog__grid { grid-template-columns: repeat(3, 1fr); }
.cms-rental-catalog--marketplace-catalog-full[data-cms-cols-desktop="4"] .cms-rental-catalog__grid { grid-template-columns: repeat(4, 1fr); }
.cms-rental-catalog--marketplace-catalog-full[data-cms-cols-desktop="5"] .cms-rental-catalog__grid { grid-template-columns: repeat(5, 1fr); }

/* --- Card --- */
.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__card {
  border-radius: var(--site-radius-md, 14px);
  overflow: hidden;
  background: var(--site-background, var(--site-background-color, #fff));
  box-shadow: var(--site-shadow-sm);
  border: 1px solid var(--site-border);
  color: var(--site-text-color);
  text-decoration: none;
  cursor: pointer;
  transition: var(--site-transition, transform .22s, box-shadow .22s);
  display: block;
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--site-shadow-md, var(--site-shadow-sm));
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--site-surface, var(--site-primary-soft));
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s;
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__card:hover .cms-rental-catalog__card-image {
  transform: scale(1.05);
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--site-text-muted);
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__card-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: var(--site-accent-color, var(--site-primary-color));
  color: var(--site-background, var(--site-background-color, #fff));
  font-size: 9px;
  font-weight: var(--site-font-weight-black, 900);
  letter-spacing: .5px;
  padding: 3px 8px;
  border-radius: var(--site-radius-sm, 6px);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  box-shadow: var(--site-shadow-sm);
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__card-category-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  /* PR #3095 — Lisibilité : avant on avait teal-soft sur teal-color = vert
     sur vert illisible. On harmonise avec le badge de la home (fond accent
     orange Coliope + police blanche) pour une lecture immédiate. */
  background: var(--site-accent-color, #F99907);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: var(--site-font-weight-bold, 700);
  letter-spacing: .3px;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 60px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__card-category-tag--shifted {
  top: 38px;
}

/* Retour Emma 2026-05-26 — la catégorie reste TOUJOURS en haut, c'est le PRO
   qui descend en dessous quand les deux sont présents. Position stable de la
   catégorie = repère visuel constant pour le client. */
.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__card-tag--shifted {
  top: 42px;
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__card-heart {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--site-background, var(--site-background-color, #fff));
  border: 1px solid var(--site-border);
  color: var(--site-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: var(--site-shadow-sm);
  transition: var(--site-transition, transform .15s, color .15s, background .15s);
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__card-heart:hover {
  transform: scale(1.1);
  color: var(--site-primary-color);
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__card-heart--shifted {
  top: auto;
  bottom: 10px;
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__card-body {
  padding: 12px 13px 14px;
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__card-name {
  font-size: 13.5px;
  font-weight: var(--site-font-weight-bold, 800);
  color: var(--site-text-color);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__card-loc {
  font-size: 11.5px;
  color: var(--site-text-muted);
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__card-loc svg {
  flex-shrink: 0;
  color: var(--site-text-muted);
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__card-price {
  font-size: 14.5px;
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-primary-color);
  line-height: 1.1;
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__card-price small {
  font-size: 11px;
  font-weight: var(--site-font-weight-regular, 500);
  color: var(--site-text-muted);
  margin-left: 1px;
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__card-price--na {
  color: var(--site-text-muted);
  font-weight: var(--site-font-weight-semibold, 600);
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__card-stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-text-muted);
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__card-stars svg {
  color: var(--site-accent-color, var(--site-primary-color));
}
/* Retour Jérôme 2026-06-01 — compteur d'avis discret à côté de la note
   moyenne (« 4.5 (12) »). Couleur muted + poids normal pour ne pas
   concurrencer visuellement la note. */
.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__card-reviews-count {
  font-weight: 400;
  font-size: 11px;
  color: var(--site-text-muted, #6b7280);
  margin-left: 2px;
}

/* --- Empty state --- */
.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__empty-block {
  text-align: center;
  padding: 56px 20px;
  border: 1.5px dashed var(--site-border);
  border-radius: var(--site-radius-md, 14px);
  background: var(--site-surface, var(--site-primary-soft));
  color: var(--site-text-muted);
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__empty-icon {
  color: var(--site-text-muted-2, var(--site-text-muted));
  margin-bottom: 12px;
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__empty-title {
  font-size: 18px;
  font-weight: var(--site-font-weight-bold, 800);
  color: var(--site-text-color);
  margin: 0 0 6px;
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__empty-msg {
  margin: 0;
  font-size: 14px;
  color: var(--site-text-muted);
}

/* --- Submit CTA --- */
.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__submit-cta {
  display: flex;
  justify-content: center;
  padding: 40px 0 8px;
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--site-primary-color);
  color: var(--site-background, var(--site-background-color, #fff));
  font-size: 14.5px;
  font-weight: var(--site-font-weight-bold, 800);
  font-family: var(--site-font-family, inherit);
  padding: 13px 26px;
  border-radius: var(--site-radius-md, 14px);
  text-decoration: none;
  box-shadow: var(--site-shadow-sm);
  transition: var(--site-transition, background .18s, transform .18s, box-shadow .18s);
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__submit-btn:hover {
  background: var(--site-primary-dark, var(--site-primary-color));
  transform: translateY(-2px);
  box-shadow: var(--site-shadow-md, var(--site-shadow-sm));
}

.cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__submit-btn svg {
  color: currentColor;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .cms-rental-catalog--marketplace-catalog-full[data-cms-cols-tablet="1"] .cms-rental-catalog__grid { grid-template-columns: repeat(1, 1fr); }
  .cms-rental-catalog--marketplace-catalog-full[data-cms-cols-tablet="2"] .cms-rental-catalog__grid { grid-template-columns: repeat(2, 1fr); }
  .cms-rental-catalog--marketplace-catalog-full[data-cms-cols-tablet="3"] .cms-rental-catalog__grid { grid-template-columns: repeat(3, 1fr); }
  .cms-rental-catalog--marketplace-catalog-full[data-cms-cols-tablet="4"] .cms-rental-catalog__grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
  .cms-section.cms-rental-catalog.cms-rental-catalog--marketplace-catalog-full {
    padding: 20px 0 36px;
  }
  .cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__inner {
    padding: 0 16px;
  }
  .cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__search {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
  }
  .cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__search-btn {
    padding: 12px 22px;
  }
  .cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__chips {
    gap: 6px;
    margin-bottom: 20px;
  }
  .cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__chip {
    font-size: 12px;
    padding: 6px 13px;
  }
  .cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .cms-rental-catalog--marketplace-catalog-full[data-cms-cols-mobile="1"] .cms-rental-catalog__grid { grid-template-columns: repeat(1, 1fr); }
  .cms-rental-catalog--marketplace-catalog-full[data-cms-cols-mobile="2"] .cms-rental-catalog__grid { grid-template-columns: repeat(2, 1fr); }
  .cms-rental-catalog--marketplace-catalog-full[data-cms-cols-mobile="3"] .cms-rental-catalog__grid { grid-template-columns: repeat(3, 1fr); }
  .cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__card-body {
    padding: 10px 11px 12px;
  }
  .cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__card-name {
    font-size: 12.5px;
  }
  .cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__empty-block {
    padding: 40px 16px;
  }
  .cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__submit-cta {
    padding: 28px 0 6px;
  }
  .cms-rental-catalog--marketplace-catalog-full .cms-rental-catalog__submit-btn {
    font-size: 13.5px;
    padding: 12px 22px;
  }
}

/* Fallback when no catalogue CmsPage is configured (F2.4 cleanup). */
.cms-section.cms-rental-catalog.cms-rental-catalog--unconfigured {
  padding: 64px 20px;
  text-align: center;
  font-family: var(--site-font-family, inherit);
}
.cms-rental-catalog--unconfigured .cms-rental-catalog--unconfigured__title {
  font-size: 1.5rem;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-text-color);
  margin: 0 0 8px;
}
.cms-rental-catalog--unconfigured .cms-rental-catalog--unconfigured__desc {
  margin: 0;
  color: var(--site-text-muted);
  font-size: 15px;
}

/* =========================================================================
   RENTAL_ITEM — marketplace_detail (F3)
   Full item detail page : breadcrumb, gallery (main + thumbs), info column
   (category, title, meta, price, description, owner, pricing table) and
   booking card with availability checker.
   Specificity 0-3-0 chained class selectors to beat cms_blocks/*.css.
   100 % token-driven (--site-*).
   ========================================================================= */
.cms-section.cms-rental-item.cms-rental-item--marketplace-detail {
  padding: 40px 0 80px;
  font-family: var(--site-font-family, inherit);
  color: var(--site-text-color);
  background: var(--site-background);
}
.cms-section.cms-rental-item.cms-rental-item--marketplace-detail.cms-rental-item--bg-primary-light {
  background: var(--site-primary-light);
}
.cms-rental-item--marketplace-detail .cms-rental-item__inner {
  max-width: var(--site-container-max, 1240px);
  margin: 0 auto;
  padding: 0 32px;
}

/* Breadcrumb */
.cms-rental-item--marketplace-detail .cms-rental-item__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--site-text-muted);
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.cms-rental-item--marketplace-detail .cms-rental-item__breadcrumb a {
  color: var(--site-primary-color);
  font-weight: var(--site-font-weight-bold, 700);
  text-decoration: none;
}
.cms-rental-item--marketplace-detail .cms-rental-item__breadcrumb a:hover {
  text-decoration: underline;
}
.cms-rental-item--marketplace-detail .cms-rental-item__breadcrumb svg {
  color: var(--site-text-muted-2, var(--site-text-muted));
  flex-shrink: 0;
}
.cms-rental-item--marketplace-detail .cms-rental-item__breadcrumb-current {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60vw;
}

/* 2-col layout */
.cms-rental-item--marketplace-detail .cms-rental-item__layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: flex-start;
}

/* Gallery */
.cms-rental-item--marketplace-detail .cms-rental-item__gallery {
  aspect-ratio: 4/3;
  background: var(--site-surface, #f5f5f5);
  border-radius: var(--site-radius-card, 14px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--site-text-muted-2, var(--site-text-muted));
  border: 1px solid var(--site-border, #e5e7eb);
}
/* Retour Emma 2026-08-20 — `cover` recadrait la photo dans le cadre 4/3 :
   une photo prise au format portrait (le cas courant depuis un téléphone)
   perdait le haut et le bas de l'objet et paraissait « zoomée ». `contain`
   montre l'objet entier ; le cadre garde sa hauteur et le fond neutre du
   conteneur comble les marges. Les vignettes et les cartes du catalogue
   restent en `cover` : elles supposent une grille de hauteur homogène. */
.cms-rental-item--marketplace-detail .cms-rental-item__gallery-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Bouton qui enveloppe la photo principale pour l'ouvrir en grand. Il ne doit
   rien peindre par lui-même : la photo garde exactement le rendu d'avant. */
.cms-rental-item--marketplace-detail .cms-rental-item__gallery-zoom {
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: zoom-in;
  display: block;
  position: relative;
}

.cms-rental-item--marketplace-detail .cms-rental-item__gallery-zoom-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.72);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

.cms-rental-item--marketplace-detail .cms-rental-item__gallery-zoom:hover .cms-rental-item__gallery-zoom-hint,
.cms-rental-item--marketplace-detail .cms-rental-item__gallery-zoom:focus-visible .cms-rental-item__gallery-zoom-hint {
  opacity: 1;
}

/* Sur écran tactile il n'y a pas de survol : l'indice reste visible en
   permanence, sinon rien n'indique que la photo s'agrandit. */
@media (hover: none) {
  .cms-rental-item--marketplace-detail .cms-rental-item__gallery-zoom-hint {
    opacity: 1;
  }
}

.cms-rental-item--marketplace-detail .cms-rental-item__gallery-zoom:focus-visible {
  outline: 2px solid var(--site-primary-color, #0f766e);
  outline-offset: 2px;
}
.cms-rental-item--marketplace-detail .cms-rental-item__gallery-placeholder {
  width: 80px;
  height: 80px;
  stroke-width: 1.5;
}

.cms-rental-item--marketplace-detail .cms-rental-item__thumbs {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  /* T28 — jusqu'à 5 photos (cap T27) : la rangée défile horizontalement au
     lieu de déborder. scroll-snap pour un arrêt net sur chaque miniature. */
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 2px;
}
.cms-rental-item--marketplace-detail .cms-rental-item__thumb {
  aspect-ratio: 1/1;
  width: 80px;
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: 0;
  border-radius: var(--site-radius-sm, 9px);
  background: var(--site-surface, #f5f5f5);
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--site-text-muted-2, var(--site-text-muted));
  font: inherit;
  cursor: pointer;
  transition: border-color 0.2s;
  overflow: hidden;
}
.cms-rental-item--marketplace-detail .cms-rental-item__thumb.is-active,
.cms-rental-item--marketplace-detail .cms-rental-item__thumb:hover {
  border-color: var(--site-primary-color);
}
.cms-rental-item--marketplace-detail .cms-rental-item__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   Visionneuse plein écran des photos d'une annonce (retour Emma 2026-08-20).
   <dialog> natif : le navigateur gère le top-layer et la fermeture ESC ;
   le CSS ne fait que la mise en scène. Portée sous `.cms-rental-lightbox`
   uniquement — aucune classe générique au niveau racine.
   ============================================================ */
.cms-rental-lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  border: none;
  background: transparent;
  overflow: hidden;
}

.cms-rental-lightbox::backdrop {
  background: rgba(9, 9, 11, 0.92);
}

.cms-rental-lightbox__stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 16px;
  box-sizing: border-box;
}

.cms-rental-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  border-radius: var(--site-radius-sm, 9px);
}

.cms-rental-lightbox__close,
.cms-rental-lightbox__nav {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(24, 24, 27, 0.72);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}

.cms-rental-lightbox__close:hover,
.cms-rental-lightbox__nav:hover {
  background: rgba(63, 63, 70, 0.9);
}

.cms-rental-lightbox__close:focus-visible,
.cms-rental-lightbox__nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.cms-rental-lightbox__close {
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
}

.cms-rental-lightbox__nav {
  top: 50%;
  width: 48px;
  height: 48px;
  transform: translateY(-50%);
}

.cms-rental-lightbox__nav--prev { left: 16px; }
.cms-rental-lightbox__nav--next { right: 16px; }
.cms-rental-lightbox__nav[hidden],
.cms-rental-lightbox__counter[hidden] { display: none; }

.cms-rental-lightbox__counter {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(24, 24, 27, 0.72);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Verrou de scroll posé sur <body> pendant qu'une visionneuse ou une modale
   est ouverte : `<dialog>` ne fige pas la page derrière sur iOS, et le
   geste de swipe faisait défiler le contenu de fond. `top` est calculé en
   JS pour conserver la position de lecture. */
body.cms-scroll-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

@media (max-width: 600px) {
  .cms-rental-lightbox__stage { padding: 64px 8px 72px; }
  .cms-rental-lightbox__nav {
    width: 40px;
    height: 40px;
  }
  .cms-rental-lightbox__nav--prev { left: 8px; }
  .cms-rental-lightbox__nav--next { right: 8px; }
}

/* ============================================================
   Backlog Emma 9.5 — Section "Pourrait vous plaire" sur la fiche objet.
   Réutilise la grammaire cards catalogue (border-radius, ombre, accent tag)
   pour cohérence visuelle, mais avec sa propre échelle (4 cols desktop).
   ============================================================ */
.cms-rental-item--marketplace-detail .cms-rental-item__similar {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--site-border, rgba(28, 28, 28, 0.08));
}
.cms-rental-item--marketplace-detail .cms-rental-item__similar-title {
  font-size: 22px;
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-text-color);
  margin: 0 0 20px;
  letter-spacing: -0.02em;
}
.cms-rental-item--marketplace-detail .cms-rental-item__similar-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 992px) {
  .cms-rental-item--marketplace-detail .cms-rental-item__similar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .cms-rental-item--marketplace-detail .cms-rental-item__similar-grid {
    grid-template-columns: 1fr;
  }
}
.cms-rental-item--marketplace-detail .cms-rental-item__similar-card {
  background: var(--site-background, #ffffff);
  border-radius: var(--site-radius-card, 14px);
  border: 1px solid var(--site-border, rgba(28, 28, 28, 0.08));
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cms-rental-item--marketplace-detail .cms-rental-item__similar-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--site-shadow-md, 0 6px 20px rgba(0, 0, 0, 0.08));
}
.cms-rental-item--marketplace-detail .cms-rental-item__similar-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.cms-rental-item--marketplace-detail .cms-rental-item__similar-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--site-surface, #f5f5f5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cms-rental-item--marketplace-detail .cms-rental-item__similar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cms-rental-item--marketplace-detail .cms-rental-item__similar-placeholder {
  font-size: 32px;
  color: var(--site-text-muted, #6b7280);
  opacity: 0.6;
}
.cms-rental-item--marketplace-detail .cms-rental-item__similar-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--site-accent-color, #F99907);
  color: var(--site-background, #ffffff);
  font-size: 11px;
  font-weight: var(--site-font-weight-black, 900);
  letter-spacing: 0.5px;
  padding: 4px 9px;
  border-radius: var(--site-radius-sm, 6px);
  box-shadow: var(--site-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
}
.cms-rental-item--marketplace-detail .cms-rental-item__similar-body {
  padding: 12px 14px;
}
.cms-rental-item--marketplace-detail .cms-rental-item__similar-name {
  font-size: 16px;
  font-weight: var(--site-font-weight-bold, 800);
  color: var(--site-text-color);
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cms-rental-item--marketplace-detail .cms-rental-item__similar-price {
  font-size: 14px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-primary-color);
  margin: 0;
}
.cms-rental-item--marketplace-detail .cms-rental-item__similar-price small {
  font-size: 11px;
  color: var(--site-text-muted);
  margin-left: 2px;
}

/* Right column */
.cms-rental-item--marketplace-detail .cms-rental-item__right {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cms-rental-item--marketplace-detail .cms-rental-item__category {
  display: inline-block;
  /* Backlog Emma 9.2 — catégorie en orange (--site-accent-color) + bordure arrondi
     pour cohérence avec le `card-tag` du catalogue (toutes les pages alignées). */
  background: var(--site-accent-color, #F99907);
  color: var(--site-background, #ffffff);
  font-size: 12px;
  font-weight: var(--site-font-weight-brand, 800);
  padding: 4px 12px;
  border-radius: var(--site-radius-pill, 999px);
  margin-bottom: 12px;
}
.cms-rental-item--marketplace-detail .cms-rental-item__title {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: var(--site-font-weight-black, 900);
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--site-text-color);
}
.cms-rental-item--marketplace-detail .cms-rental-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--site-text-muted);
  margin-bottom: 20px;
}
.cms-rental-item--marketplace-detail .cms-rental-item__meta-item {
  display: inline-flex;
  align-items: center;
  /* Backlog Emma 9.3 — espace icône / texte 5px → 8px (un peu plus d'air,
     spécialement sous le titre pour l'item "lieu" qui paraissait étriqué). */
  gap: 8px;
}
.cms-rental-item--marketplace-detail .cms-rental-item__stars {
  color: var(--site-accent-color);
  font-weight: var(--site-font-weight-bold, 700);
}

.cms-rental-item--marketplace-detail .cms-rental-item__price {
  font-size: 34px;
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-primary-color);
  line-height: 1;
}
.cms-rental-item--marketplace-detail .cms-rental-item__price small {
  font-size: 14px;
  font-weight: var(--site-font-weight-semibold, 600);
  color: var(--site-text-muted);
  margin-left: 4px;
}

.cms-rental-item--marketplace-detail .cms-rental-item__desc {
  font-size: 15px;
  color: var(--site-text-color);
  line-height: 1.6;
}
.cms-rental-item--marketplace-detail .cms-rental-item__desc p {
  margin: 0 0 8px;
}

/* Owner */
.cms-rental-item--marketplace-detail .cms-rental-item__owner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--site-border, #e5e7eb);
  border-radius: var(--site-radius-card, 14px);
  background: var(--site-background);
}
/* Retour Jérôme 2026-06-01 — bouton « Poser une question » sur la card
   loueur (mode 3 étages, connecté, pas soi-même). Style ghost pour ne
   pas concurrencer le CTA principal « Réserver ». */
.cms-rental-item--marketplace-detail .cms-rental-item__owner-contact-form {
  margin: 0;
  flex: 0 0 auto;
}
.cms-rental-item--marketplace-detail .cms-rental-item__owner-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 100px;
  border: 1px solid var(--site-border, #e5e7eb);
  background: var(--site-background, #fff);
  color: var(--site-text-color, #111827);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.cms-rental-item--marketplace-detail .cms-rental-item__owner-contact-btn:hover {
  border-color: var(--site-primary-color, #0c9994);
  background: color-mix(in srgb, var(--site-primary-color, #0c9994) 6%, var(--site-background, #fff));
}

/* Recette A9 — modale « Poser une question » (dialog natif, message obligatoire) */
.cms-rental-inquiry-dialog {
  width: 92vw;
  max-width: 440px;
  border: 1px solid var(--site-border, #e5e7eb);
  border-radius: 16px;
  padding: 22px 22px 18px;
  background: var(--site-background, #fff);
  color: var(--site-text-color, #111827);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
.cms-rental-inquiry-dialog::backdrop {
  background: rgba(15, 23, 42, 0.55);
}
.cms-rental-inquiry-form__title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
}
.cms-rental-inquiry-form__hint {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--site-text-muted, #6b7280);
}
.cms-rental-inquiry-form__textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 96px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--site-border, #e5e7eb);
  background: var(--site-background, #fff);
  color: var(--site-text-color, #111827);
  font: inherit;
  font-size: 13.5px;
}
.cms-rental-inquiry-form__textarea:focus {
  outline: none;
  border-color: var(--site-primary-color, #0c9994);
}
.cms-rental-inquiry-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}
.cms-rental-inquiry-form__cancel {
  padding: 8px 14px;
  border-radius: 100px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--site-text-muted, #6b7280);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.cms-rental-inquiry-form__cancel:hover {
  color: var(--site-text-color, #111827);
}
.cms-rental-item--marketplace-detail .cms-rental-item__owner-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--site-primary-soft, rgba(0,0,0,0.05));
  color: var(--site-primary-color);
  font-weight: var(--site-font-weight-black, 900);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cms-rental-item--marketplace-detail .cms-rental-item__owner-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cms-rental-item--marketplace-detail .cms-rental-item__owner-name {
  font-size: 14px;
  font-weight: var(--site-font-weight-brand, 800);
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--site-text-color);
}
.cms-rental-item--marketplace-detail .cms-rental-item__owner-role {
  font-size: 12px;
  color: var(--site-text-muted);
}
.cms-rental-item--marketplace-detail .cms-rental-item__pro-badge {
  background: linear-gradient(135deg, var(--site-accent-color), var(--site-primary-dark, var(--site-primary-color)));
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .5px;
  padding: 2px 7px;
  border-radius: 5px;
}

/* Pricing table */
.cms-rental-item--marketplace-detail .cms-rental-item__pricing {
  border: 1px solid var(--site-border, #e5e7eb);
  border-radius: var(--site-radius-card, 14px);
  padding: 20px 22px;
  background: var(--site-background);
}
.cms-rental-item--marketplace-detail .cms-rental-item__pricing-title {
  font-size: 13px;
  font-weight: var(--site-font-weight-brand, 800);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--site-text-muted);
  margin: 0 0 12px;
}
.cms-rental-item--marketplace-detail .cms-rental-item__pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--site-border, #e5e7eb);
  font-size: 14px;
  gap: 12px;
}
.cms-rental-item--marketplace-detail .cms-rental-item__pricing-row:last-child {
  border-bottom: none;
}
.cms-rental-item--marketplace-detail .cms-rental-item__pricing-label {
  color: var(--site-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cms-rental-item--marketplace-detail .cms-rental-item__pricing-value {
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-text-color);
}
/* Deposit row colour (default = accent) */
.cms-rental-item--marketplace-detail .cms-rental-item__pricing-row--deposit {
  color: var(--site-accent-color);
  font-weight: var(--site-font-weight-bold, 700);
}
.cms-rental-item--marketplace-detail .cms-rental-item__pricing-label--deposit,
.cms-rental-item--marketplace-detail .cms-rental-item__pricing-value--deposit {
  color: var(--site-accent-color);
}
/* Deposit row colour = danger (bumped specificity via data attr) */
.cms-rental-item--marketplace-detail[data-cms-deposit-color="danger"] .cms-rental-item__pricing-row--deposit {
  color: var(--site-danger, var(--site-accent-color));
}
.cms-rental-item--marketplace-detail[data-cms-deposit-color="danger"] .cms-rental-item__pricing-label--deposit,
.cms-rental-item--marketplace-detail[data-cms-deposit-color="danger"] .cms-rental-item__pricing-value--deposit {
  color: var(--site-danger, var(--site-accent-color));
}

/* Booking card */
.cms-rental-item--marketplace-detail .cms-rental-item__booking {
  background: var(--site-primary-light, var(--site-surface, #f5f5f5));
  border: 1px solid var(--site-primary-soft-2, var(--site-primary-soft, var(--site-border)));
  border-radius: var(--site-radius-card, 14px);
  padding: 24px;
}
.cms-rental-item--marketplace-detail .cms-rental-item__booking-title {
  font-size: 18px;
  font-weight: var(--site-font-weight-black, 900);
  margin: 0 0 16px;
  color: var(--site-text-color);
}
.cms-rental-item--marketplace-detail .cms-rental-item__booking-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.cms-rental-item--marketplace-detail .cms-rental-item__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cms-rental-item--marketplace-detail .cms-rental-item__field--qty {
  margin-bottom: 16px;
}
.cms-rental-item--marketplace-detail .cms-rental-item__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: var(--site-font-weight-brand, 800);
  color: var(--site-text-muted);
  display: block;
}
.cms-rental-item--marketplace-detail .cms-rental-item__input {
  padding: 11px 14px;
  border: 1px solid var(--site-border, #e5e7eb);
  border-radius: var(--site-radius-sm, 9px);
  font-family: inherit;
  font-size: 14px;
  background: var(--site-background, #fff);
  color: var(--site-text-color);
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
  box-sizing: border-box;
}
.cms-rental-item--marketplace-detail .cms-rental-item__input:focus {
  outline: none;
  border-color: var(--site-primary-color);
  box-shadow: 0 0 0 3px var(--site-primary-soft, rgba(0,0,0,0.08));
}

.cms-rental-item--marketplace-detail .cms-rental-item__qty {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cms-rental-item--marketplace-detail .cms-rental-item__qty-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  /* Backlog Emma 9.8 — bouton secondaire (comme "proposer un objet") : couleur
     neutre au repos, accent ne s'allume qu'au hover. Au lieu du primary color
     direct qui paraissait trop "actif" en permanence. */
  background: var(--site-surface, #f5f5f5);
  border: 1px solid var(--site-border, #e5e7eb);
  font-size: 18px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-text-color, inherit);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  font-family: inherit;
}
.cms-rental-item--marketplace-detail .cms-rental-item__qty-btn:hover {
  background: var(--site-primary-color);
  color: #fff;
  border-color: var(--site-primary-color);
}

/* Backlog Emma 9.9 — bouton "Vérifier la disponibilité" caché visuellement
   (auto-check au change des dates). Reste dans le DOM comme fallback no-JS. */
.cms-rental-item--marketplace-detail .cms-rental-item__check-btn--auto[hidden] {
  display: none !important;
}
.cms-rental-item--marketplace-detail .cms-rental-item__qty-input {
  width: 60px;
  text-align: center;
  padding: 8px;
  border: 1px solid var(--site-border, #e5e7eb);
  border-radius: var(--site-radius-sm, 9px);
  font-weight: var(--site-font-weight-bold, 700);
  font-family: inherit;
  font-size: 14px;
  background: var(--site-background, #fff);
  color: var(--site-text-color);
}

.cms-rental-item--marketplace-detail .cms-rental-item__check-btn {
  width: 100%;
  padding: 14px;
  background: var(--site-primary-color);
  color: #fff;
  border: none;
  font-weight: var(--site-font-weight-brand, 800);
  border-radius: var(--site-radius-sm, 9px);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s, transform 0.1s;
  cursor: pointer;
  font-family: inherit;
}
.cms-rental-item--marketplace-detail .cms-rental-item__check-btn:hover:not(:disabled) {
  background: var(--site-primary-dark, var(--site-primary-color));
  transform: translateY(-1px);
}
.cms-rental-item--marketplace-detail .cms-rental-item__check-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Result card */
.cms-rental-item--marketplace-detail .cms-rental-item__result {
  margin-top: 16px;
  padding: 16px;
  background: var(--site-background, #fff);
  border-radius: var(--site-radius-sm, 9px);
  border: 1px solid var(--site-border, #e5e7eb);
}
.cms-rental-item--marketplace-detail .cms-rental-item__result-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--site-font-weight-brand, 800);
  font-size: 14px;
  margin-bottom: 12px;
}
.cms-rental-item--marketplace-detail .cms-rental-item__result-header--ok {
  color: var(--site-success, var(--site-primary-color));
}
.cms-rental-item--marketplace-detail .cms-rental-item__result-header--ko {
  color: var(--site-danger, var(--site-accent-color));
  margin-bottom: 0;
}
.cms-rental-item--marketplace-detail .cms-rental-item__result-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--site-border, #e5e7eb);
  font-size: 14px;
  color: var(--site-text-color);
  gap: 12px;
}
.cms-rental-item--marketplace-detail .cms-rental-item__result-row:last-of-type {
  border-bottom: none;
}
.cms-rental-item--marketplace-detail .cms-rental-item__result-row--total {
  font-weight: var(--site-font-weight-black, 900);
  font-size: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--site-border, #e5e7eb);
  border-bottom: none;
}
/* Backlog Emma L6.18 — note explicative empreinte / débit J+1. */
.cms-rental-item--marketplace-detail .cms-rental-item__result-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--site-surface, #f9fafb);
  color: var(--site-text-muted, #6b7280);
  font-size: 12px;
  line-height: 1.45;
}
.cms-rental-item--marketplace-detail .cms-rental-item__result-note i {
  color: var(--site-primary-color, #0c9994);
  margin-top: 1px;
  flex-shrink: 0;
}
.cms-rental-item--marketplace-detail .cms-rental-item__result-note strong {
  color: var(--site-text-color, #1f2937);
}
.cms-rental-item--marketplace-detail .cms-rental-item__book-btn {
  width: 100%;
  padding: 14px;
  background: var(--site-accent-color);
  color: #fff;
  border: none;
  font-weight: var(--site-font-weight-black, 900);
  border-radius: var(--site-radius-sm, 9px);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  transition: background 0.2s, transform 0.1s, filter 0.2s;
  cursor: pointer;
  font-family: inherit;
}
.cms-rental-item--marketplace-detail .cms-rental-item__book-btn:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}

/* Empty state */
.cms-rental-item--marketplace-detail.cms-rental-item--empty {
  padding: 64px 32px;
  text-align: center;
}
.cms-rental-item--marketplace-detail .cms-rental-item__empty {
  color: var(--site-text-muted);
  font-size: 15px;
  margin: 0;
}

/* Responsive */
@media (max-width: 900px) {
  .cms-rental-item--marketplace-detail .cms-rental-item__layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .cms-rental-item--marketplace-detail .cms-rental-item__inner {
    padding: 0 20px;
  }
  .cms-rental-item--marketplace-detail .cms-rental-item__thumb {
    width: 64px;
  }
  .cms-rental-item--marketplace-detail .cms-rental-item__meta {
    gap: 10px;
  }
}

/* F3 — override marketplace navbar neutralizer so this section keeps some
   breathing room under the sticky glass navbar (same pattern as F2 hero). */
body[data-navbar-variant^="marketplace"] .public-site-main > .public-page > .cms-section.cms-rental-item.cms-rental-item--marketplace-detail {
  padding-top: 40px;
}

/* ============================================================
   BOOKING MODAL (F4)
   Pattern: <dialog> native for a11y (focus trap + ESC).
   100% token-driven via var(--site-*). No legacy override —
   plain 0-1-0 specificity is enough.
   Opened from rental_item_booking_controller#openBookingModal.
   ============================================================ */
.cms-booking-modal {
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  padding: 0;
  border: none;
  border-radius: var(--site-radius-card, 14px);
  background: var(--site-background, #ffffff);
  box-shadow: var(--site-shadow-lg, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
  overflow: hidden;
  font-family: inherit;
  color: inherit;
}
.cms-booking-modal::backdrop {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}

/* Header */
.cms-booking-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--site-border, rgba(28, 28, 28, 0.1));
}
.cms-booking-modal__title {
  font-size: 17px;
  font-weight: var(--site-font-weight-black, 900);
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--site-text-color, inherit);
}
.cms-booking-modal__title-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--site-primary-soft, rgba(12, 153, 148, 0.10));
  color: var(--site-primary-color, currentColor);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cms-booking-modal__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  color: var(--site-text-muted, inherit);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  padding: 0;
}
.cms-booking-modal__close:hover {
  background: var(--site-surface, rgba(0, 0, 0, 0.04));
  color: var(--site-text-color, inherit);
}

/* Body */
.cms-booking-modal__body {
  padding: 20px 24px;
  max-height: calc(90vh - 180px);
  overflow-y: auto;
}

/* Summary block */
.cms-booking-modal__summary {
  background: var(--site-primary-light, rgba(12, 153, 148, 0.05));
  border: 1px solid var(--site-primary-soft-2, rgba(12, 153, 148, 0.15));
  border-radius: var(--site-radius-sm, 9px);
  padding: 14px 16px;
  margin-bottom: 20px;
}
.cms-booking-modal__summary-item {
  font-weight: var(--site-font-weight-brand, 800);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--site-text-color, inherit);
}
.cms-booking-modal__summary-item svg {
  color: var(--site-primary-color, currentColor);
  flex-shrink: 0;
}
.cms-booking-modal__summary-rows {
  display: grid;
  gap: 4px;
  font-size: 13px;
}
.cms-booking-modal__summary-row {
  display: flex;
  justify-content: space-between;
  color: var(--site-text-muted, inherit);
  gap: 12px;
}
.cms-booking-modal__summary-row[hidden] {
  display: none;
}
.cms-booking-modal__summary-row strong {
  color: var(--site-text-color, inherit);
  font-weight: var(--site-font-weight-bold, 700);
}
.cms-booking-modal__summary-total {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--site-primary-soft-2, rgba(12, 153, 148, 0.15));
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: var(--site-font-weight-black, 900);
  font-size: 16px;
  color: var(--site-text-color, inherit);
  gap: 12px;
}
.cms-booking-modal__summary-total-amount {
  color: var(--site-primary-color, currentColor);
  font-size: 20px;
}

/* G3 — Delivery mode + carriers (booking modal) */
.cms-booking-modal__step {
  padding: 14px 0;
  border-top: 1px solid var(--site-border, rgba(28, 28, 28, 0.1));
}
.cms-booking-modal__step:first-child {
  border-top: none;
  padding-top: 4px;
}
.cms-booking-modal__step-title {
  font-size: 11.5px;
  font-weight: var(--site-font-weight-brand, 800);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--site-text-muted, inherit);
  margin-bottom: 10px;
}
.cms-booking-modal__step-title--sub {
  margin-top: 14px;
  font-size: 10.5px;
}
.cms-booking-modal__delivery-modes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cms-booking-modal__delivery-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--site-border, rgba(28, 28, 28, 0.1));
  border-radius: var(--site-radius-sm, 9px);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.cms-booking-modal__delivery-option:hover {
  border-color: color-mix(in srgb, var(--site-primary-color, #0c9994) 30%, transparent);
}
.cms-booking-modal__delivery-option:has(input[type="radio"]:checked) {
  border-color: var(--site-primary-color, #0c9994);
  background: color-mix(in srgb, var(--site-primary-color, #0c9994) 8%, var(--site-background, #fff));
}
.cms-booking-modal__delivery-option input[type="radio"] {
  accent-color: var(--site-primary-color, #0c9994);
  margin: 0;
}
.cms-booking-modal__delivery-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
}
.cms-booking-modal__delivery-text strong {
  font-weight: var(--site-font-weight-bold, 700);
}
.cms-booking-modal__delivery-text small {
  font-size: 12px;
  color: var(--site-text-muted, inherit);
}
.cms-booking-modal__delivery-price {
  font-weight: var(--site-font-weight-bold, 700);
  font-size: 14px;
  color: var(--site-primary-color, inherit);
}
.cms-booking-modal__shipping-details {
  margin-top: 12px;
  padding: 14px;
  background: var(--site-surface, #f5f5f5);
  border-radius: var(--site-radius-sm, 9px);
}
.cms-booking-modal__shipping-details[hidden] {
  display: none;
}
.cms-booking-modal__field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cms-booking-modal__carriers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.cms-booking-modal__carrier-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--site-border, rgba(28, 28, 28, 0.1));
  border-radius: var(--site-radius-sm, 9px);
  background: var(--site-background, #fff);
  cursor: pointer;
  font-size: 13px;
  transition: border-color 0.15s, background 0.15s;
}
.cms-booking-modal__carrier-chip:hover {
  border-color: color-mix(in srgb, var(--site-primary-color, #0c9994) 30%, transparent);
}
.cms-booking-modal__carrier-chip:has(input[type="radio"]:checked) {
  border-color: var(--site-primary-color, #0c9994);
  background: color-mix(in srgb, var(--site-primary-color, #0c9994) 10%, var(--site-background, #fff));
}
.cms-booking-modal__carrier-chip input[type="radio"] {
  accent-color: var(--site-primary-color, #0c9994);
  margin: 0;
}
/* Indicateur live à côté du titre « Transporteur » dans la booking modal.
   Affiche « Calcul des tarifs en cours… » / « Tarifs mis à jour » /
   « Tarifs indicatifs » selon le retour du fetch shipping_rates Sendcloud
   (cf. rental_item_booking_controller.js#scheduleShippingRatesFetch). */
.cms-booking-modal__rates-status {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 100px;
  background: var(--site-primary-light, #eef2ff);
  color: var(--site-primary-color, #4f46e5);
  vertical-align: middle;
}
.cms-booking-modal__rates-status[data-kind='ok'] {
  background: color-mix(in srgb, rgb(16, 134, 90) 12%, white);
  color: rgb(16, 134, 90);
}
.cms-booking-modal__rates-status[data-kind='fallback'] {
  background: color-mix(in srgb, rgb(180, 99, 0) 12%, white);
  color: rgb(180, 99, 0);
}

/* Retour Jérôme 2026-05-31 — même cause que .cms-owner-items__carrier-name
   (cf. PR #3468). Le nom n'avait pas de `color` explicite, héritait de la
   cascade → résolvait à ~ blanc dans le contexte custom domain coliope.fr.
   On pose la couleur explicitement + flex tooling pour ne pas pousser le
   prix hors du chip avec un nom long (« Mondial Relay »). */
.cms-booking-modal__carrier-name {
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-text-color, #111827);
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cms-booking-modal__carrier-price {
  font-size: 12px;
  color: var(--site-text-muted, inherit);
  margin-left: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Form */
.cms-booking-modal__fields {
  display: grid;
  gap: 14px;
}
.cms-booking-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cms-booking-modal__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: var(--site-font-weight-brand, 800);
  color: var(--site-text-muted, inherit);
}
.cms-booking-modal__label-required::after {
  content: ' *';
  color: var(--site-accent-color, currentColor);
}
.cms-booking-modal__input,
.cms-booking-modal__textarea {
  padding: 11px 14px;
  border: 1px solid var(--site-border, rgba(28, 28, 28, 0.1));
  border-radius: var(--site-radius-sm, 9px);
  font-family: inherit;
  font-size: 14px;
  background: var(--site-background, #ffffff);
  color: var(--site-text-color, inherit);
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
.cms-booking-modal__input:focus,
.cms-booking-modal__textarea:focus {
  outline: none;
  border-color: var(--site-primary-color, currentColor);
  box-shadow: 0 0 0 3px var(--site-primary-soft, rgba(12, 153, 148, 0.10));
}
.cms-booking-modal__textarea {
  resize: vertical;
  min-height: 70px;
}

/* Error message — soft danger variant with clean fallback */
.cms-booking-modal__error {
  background: var(--site-danger-soft, rgba(239, 68, 68, 0.08));
  color: var(--site-danger-strong, #991B1B);
  border: 1px solid var(--site-danger-border, rgba(239, 68, 68, 0.25));
  border-radius: var(--site-radius-sm, 9px);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: var(--site-font-weight-semibold, 600);
  margin-top: 14px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.cms-booking-modal__error[hidden] {
  display: none;
}
.cms-booking-modal__error svg {
  flex-shrink: 0;
  margin-top: 1px;
}

/* Footer */
.cms-booking-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--site-border, rgba(28, 28, 28, 0.1));
  background: var(--site-surface, rgba(0, 0, 0, 0.02));
}
.cms-booking-modal__btn {
  padding: 11px 22px;
  border-radius: var(--site-radius-sm, 9px);
  font-size: 14px;
  font-weight: var(--site-font-weight-bold, 700);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s, transform 0.1s, opacity 0.15s;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.cms-booking-modal__btn--ghost {
  background: transparent;
  color: var(--site-text-muted, inherit);
  border: 1px solid var(--site-border, rgba(28, 28, 28, 0.1));
}
.cms-booking-modal__btn--ghost:hover {
  background: var(--site-background, #ffffff);
  color: var(--site-text-color, inherit);
}
.cms-booking-modal__btn--primary {
  background: var(--site-accent-color, currentColor);
  color: var(--site-accent-contrast, #ffffff);
}
.cms-booking-modal__btn--primary:hover {
  background: var(--site-accent-hover, var(--site-accent-color, currentColor));
  transform: translateY(-1px);
}
.cms-booking-modal__btn--primary[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Responsive — on mobile the dialog takes almost the full screen */
@media (max-width: 600px) {
  .cms-booking-modal {
    max-width: 100%;
    width: calc(100% - 16px);
    max-height: 95vh;
    border-radius: var(--site-radius-sm, 9px);
  }
  .cms-booking-modal__header,
  .cms-booking-modal__body,
  .cms-booking-modal__footer {
    padding-left: 16px;
    padding-right: 16px;
  }
  .cms-booking-modal__body {
    max-height: calc(95vh - 160px);
  }
  .cms-booking-modal__footer {
    flex-direction: column-reverse;
  }
  .cms-booking-modal__btn {
    width: 100%;
    justify-content: center;
  }
}

/* =============================================
   CONTENT — values_grid & text_image_split (F5)
   Builder-first content variants, 100 % token-driven (--site-*),
   zero hex, zero brand ref in runtime. Specificity 0-3-0 to
   beat any generic .cms-content base rule loaded later.
   ============================================= */

/* ---- Shared bases --------------------------------------------- */
.cms-section.cms-content.cms-content--values-grid,
.cms-section.cms-content.cms-content--text-image-split,
.cms-section.cms-content.cms-content--default {
  font-family: var(--site-font-family, inherit);
  color: var(--site-text-color);
  padding: 80px 32px;
}

/* Background style variants (apply on any content variant) */
.cms-section.cms-content.cms-content--bg-white {
  background: var(--site-background, #fff);
}
.cms-section.cms-content.cms-content--bg-primary-light {
  background: var(--site-primary-light);
}
.cms-section.cms-content.cms-content--bg-surface {
  background: var(--site-surface);
}

.cms-section.cms-content .cms-content__inner {
  max-width: var(--site-container-max, 1240px);
  margin: 0 auto;
  width: 100%;
}

.cms-section.cms-content .cms-content__head {
  text-align: center;
  margin-bottom: 48px;
}

.cms-section.cms-content .cms-content__kicker {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-weight: var(--site-font-weight-brand, 800);
  color: var(--site-primary-color);
  margin-bottom: 12px;
}

.cms-section.cms-content .cms-content__title {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15;
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-text-color);
  letter-spacing: -0.4px;
  margin: 0 0 10px;
}

.cms-section.cms-content .cms-content__subtitle {
  font-size: 16px;
  line-height: 1.6;
  color: var(--site-text-muted);
  max-width: 640px;
  margin: 0 auto;
}

/* ---- values_grid ---------------------------------------------- */
.cms-section.cms-content.cms-content--values-grid .cms-content__values-grid {
  display: grid;
  grid-template-columns: repeat(var(--cms-content-cols-desktop, 4), minmax(0, 1fr));
  gap: 20px;
}

/* Bind --cms-content-cols-* from data-attrs so pure-CSS responsive works */
.cms-section.cms-content.cms-content--values-grid[data-cms-cols-desktop="1"] { --cms-content-cols-desktop: 1; }
.cms-section.cms-content.cms-content--values-grid[data-cms-cols-desktop="2"] { --cms-content-cols-desktop: 2; }
.cms-section.cms-content.cms-content--values-grid[data-cms-cols-desktop="3"] { --cms-content-cols-desktop: 3; }
.cms-section.cms-content.cms-content--values-grid[data-cms-cols-desktop="4"] { --cms-content-cols-desktop: 4; }
.cms-section.cms-content.cms-content--values-grid[data-cms-cols-desktop="5"] { --cms-content-cols-desktop: 5; }
.cms-section.cms-content.cms-content--values-grid[data-cms-cols-desktop="6"] { --cms-content-cols-desktop: 6; }

.cms-section.cms-content.cms-content--values-grid[data-cms-cols-tablet="1"] { --cms-content-cols-tablet: 1; }
.cms-section.cms-content.cms-content--values-grid[data-cms-cols-tablet="2"] { --cms-content-cols-tablet: 2; }
.cms-section.cms-content.cms-content--values-grid[data-cms-cols-tablet="3"] { --cms-content-cols-tablet: 3; }
.cms-section.cms-content.cms-content--values-grid[data-cms-cols-tablet="4"] { --cms-content-cols-tablet: 4; }

.cms-section.cms-content.cms-content--values-grid[data-cms-cols-mobile="1"] { --cms-content-cols-mobile: 1; }
.cms-section.cms-content.cms-content--values-grid[data-cms-cols-mobile="2"] { --cms-content-cols-mobile: 2; }

.cms-section.cms-content.cms-content--values-grid .cms-content__value-card {
  padding: 28px 22px;
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius-card, 14px);
  background: var(--site-background, #fff);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cms-section.cms-content.cms-content--values-grid[data-card-align="center"] .cms-content__value-card {
  text-align: center;
  align-items: center;
}

.cms-section.cms-content.cms-content--values-grid .cms-content__value-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--site-shadow-md, 0 8px 24px rgba(0, 0, 0, 0.08));
  border-color: var(--site-primary-soft-2, rgba(12, 153, 148, 0.15));
}

.cms-section.cms-content.cms-content--values-grid .cms-content__value-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.cms-section.cms-content.cms-content--values-grid .cms-content__value-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.cms-section.cms-content.cms-content--values-grid .cms-content__value-icon--teal {
  background: var(--site-primary-soft, rgba(12, 153, 148, 0.10));
  color: var(--site-primary-color);
}

.cms-section.cms-content.cms-content--values-grid .cms-content__value-icon--accent {
  background: var(--site-accent-soft, rgba(249, 153, 7, 0.10));
  color: var(--site-accent-color);
}

.cms-section.cms-content.cms-content--values-grid .cms-content__value-title {
  font-size: 17px;
  line-height: 1.3;
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-text-color);
  margin: 0 0 8px;
}

.cms-section.cms-content.cms-content--values-grid .cms-content__value-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--site-text-muted);
  margin: 0;
}

@media (max-width: 1024px) {
  .cms-section.cms-content.cms-content--values-grid .cms-content__values-grid {
    grid-template-columns: repeat(var(--cms-content-cols-tablet, 2), minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .cms-section.cms-content.cms-content--values-grid,
  .cms-section.cms-content.cms-content--text-image-split {
    padding: 60px 24px;
  }
  .cms-section.cms-content.cms-content--values-grid .cms-content__values-grid {
    grid-template-columns: repeat(var(--cms-content-cols-mobile, 1), minmax(0, 1fr));
  }
  .cms-section.cms-content .cms-content__head {
    margin-bottom: 36px;
  }
}

/* ---- text_image_split ---------------------------------------- */
.cms-section.cms-content.cms-content--text-image-split .cms-content__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

/* Swap columns visually via `order: -1` on the image column (CSP-safe,
   no inline style, more predictable than direction: rtl). */
.cms-section.cms-content.cms-content--text-image-split[data-image-position="left"] .cms-content__image-col {
  order: -1;
}

.cms-section.cms-content.cms-content--text-image-split .cms-content__text-col .cms-content__kicker {
  margin-bottom: 14px;
}

.cms-section.cms-content.cms-content--text-image-split .cms-content__text-col .cms-content__title {
  font-size: clamp(24px, 2.8vw, 32px);
  text-align: left;
  margin-bottom: 16px;
}

.cms-section.cms-content.cms-content--text-image-split .cms-content__text-col .cms-content__body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--site-text-color);
  margin: 0 0 16px;
}

.cms-section.cms-content.cms-content--text-image-split .cms-content__text-col .cms-content__body strong {
  color: var(--site-primary-dark, var(--site-primary-color));
  font-weight: var(--site-font-weight-brand, 800);
}

.cms-section.cms-content.cms-content--text-image-split .cms-content__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  background: var(--site-primary-color);
  color: #fff;
  border-radius: var(--site-radius-sm, 9px);
  font-weight: var(--site-font-weight-brand, 800);
  font-size: 15px;
  margin-top: 20px;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.1s ease;
}

.cms-section.cms-content.cms-content--text-image-split .cms-content__cta:hover {
  background: var(--site-primary-dark, var(--site-primary-color));
  transform: translateY(-1px);
}

.cms-section.cms-content.cms-content--text-image-split .cms-content__cta svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Image column — aspect-ratio driven by data-attr. */
.cms-section.cms-content.cms-content--text-image-split .cms-content__image-col {
  aspect-ratio: 4 / 3;
  border-radius: var(--site-radius-card, 14px);
  overflow: hidden;
  background: var(--site-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--site-text-muted-2, var(--site-text-muted));
}

.cms-section.cms-content.cms-content--text-image-split .cms-content__image-col[data-aspect-ratio="1:1"]  { aspect-ratio: 1 / 1; }
.cms-section.cms-content.cms-content--text-image-split .cms-content__image-col[data-aspect-ratio="3:2"]  { aspect-ratio: 3 / 2; }
.cms-section.cms-content.cms-content--text-image-split .cms-content__image-col[data-aspect-ratio="16:9"] { aspect-ratio: 16 / 9; }

.cms-section.cms-content.cms-content--text-image-split .cms-content__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cms-section.cms-content.cms-content--text-image-split .cms-content__image-placeholder {
  width: 80px;
  height: 80px;
  stroke-width: 1.5;
}

@media (max-width: 900px) {
  .cms-section.cms-content.cms-content--text-image-split .cms-content__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  /* On mobile, image stays below text even if image_position = left. */
  .cms-section.cms-content.cms-content--text-image-split[data-image-position="left"] .cms-content__image-col {
    order: 0;
  }
}

/* ============================================================
   CUSTOMER ACCOUNT (C.1)
   Builder-first login/register page — 2 cards side-by-side
   on desktop, stacked on mobile. No Stimulus, no inline JS.
   Specificity chained at 0-3-0 to beat cms_blocks/*.css defaults.
   Rendered by public_sites/customer_account.html.erb
   (Cms::Public::CustomersController#customer_account).
   ============================================================ */
.cms-section.cms-customer-account.cms-customer-account--auth-split {
  font-family: var(--site-font-family, inherit);
  color: var(--site-text-color, inherit);
  background: var(--site-primary-light, #f5f7fb);
  padding: 64px 32px;
}

.cms-section.cms-customer-account .cms-customer-account__inner {
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}

.cms-section.cms-customer-account .cms-customer-account__head {
  text-align: center;
  margin-bottom: 36px;
}

.cms-section.cms-customer-account .cms-customer-account__head-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--site-primary-soft, rgba(12, 153, 148, 0.10));
  color: var(--site-primary-color, currentColor);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.cms-section.cms-customer-account .cms-customer-account__title {
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.15;
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-text-color, inherit);
  letter-spacing: -0.4px;
  margin: 0 0 10px;
}

.cms-section.cms-customer-account .cms-customer-account__subtitle {
  font-size: 15px;
  line-height: 1.55;
  color: var(--site-text-muted, #6b7280);
  max-width: 520px;
  margin: 0 auto;
}

/* Alerts (flash) */
.cms-section.cms-customer-account .cms-customer-account__alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--site-radius-sm, 9px);
  font-size: 14px;
  font-weight: var(--site-font-weight-semibold, 600);
  max-width: 720px;
  margin: 0 auto 20px;
  line-height: 1.4;
}

.cms-section.cms-customer-account .cms-customer-account__alert svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.cms-section.cms-customer-account .cms-customer-account__alert--error {
  background: var(--site-danger-soft, rgba(239, 68, 68, 0.08));
  color: var(--site-danger-strong, #991B1B);
  border: 1px solid var(--site-danger-border, rgba(239, 68, 68, 0.25));
}

.cms-section.cms-customer-account .cms-customer-account__alert--success {
  background: var(--site-success-soft, rgba(34, 197, 94, 0.10));
  color: var(--site-success, #15803d);
  border: 1px solid var(--site-success-border, rgba(34, 197, 94, 0.25));
}

/* Cards grid */
.cms-section.cms-customer-account .cms-customer-account__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

/* Backlog Emma 7.1 — quand le segmented control "pill" est présent (mode toggle
   one-at-a-time), on passe en 1 colonne centrée pour éviter le trou à côté de
   la card visible (le Stimulus controller cache la card non-active via [hidden]). */
.cms-section.cms-customer-account .cms-customer-account__cards:has(.cms-customer-account__segmented) {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
}
.cms-section.cms-customer-account .cms-customer-account__cards:has(.cms-customer-account__segmented) .cms-customer-account__segmented {
  justify-self: center;
}

.cms-section.cms-customer-account .cms-customer-account__card {
  background: var(--site-background, #ffffff);
  border: 1px solid var(--site-border, rgba(28, 28, 28, 0.08));
  border-radius: var(--site-radius-card, 14px);
  box-shadow: var(--site-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
  padding: 32px;
  scroll-margin-top: 24px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.cms-section.cms-customer-account .cms-customer-account__card--highlight {
  border-color: var(--site-primary-soft-2, var(--site-primary-soft, rgba(12, 153, 148, 0.15)));
  box-shadow: var(--site-shadow-md, 0 8px 24px rgba(0, 0, 0, 0.08));
}

/* Card head */
.cms-section.cms-customer-account .cms-customer-account__card-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  margin-bottom: 22px;
}

.cms-section.cms-customer-account .cms-customer-account__card-bubble {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cms-section.cms-customer-account .cms-customer-account__card-bubble--primary {
  background: var(--site-primary-soft, rgba(12, 153, 148, 0.10));
  color: var(--site-primary-color, currentColor);
}

.cms-section.cms-customer-account .cms-customer-account__card-bubble--accent {
  background: var(--site-accent-soft, rgba(249, 153, 7, 0.10));
  color: var(--site-accent-color, var(--site-primary-color, currentColor));
}

.cms-section.cms-customer-account .cms-customer-account__card-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  min-width: 0;
}

.cms-section.cms-customer-account .cms-customer-account__card-title {
  font-size: 18px;
  line-height: 1.25;
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-text-color, inherit);
  margin: 0;
}

.cms-section.cms-customer-account .cms-customer-account__card-subtitle {
  font-size: 13px;
  line-height: 1.4;
  color: var(--site-text-muted, #6b7280);
  margin: 0;
}

/* Form */
.cms-section.cms-customer-account .cms-customer-account__form {
  display: grid;
  gap: 14px;
}

.cms-section.cms-customer-account .cms-customer-account__field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cms-section.cms-customer-account .cms-customer-account__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.cms-section.cms-customer-account .cms-customer-account__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: var(--site-font-weight-brand, 800);
  color: var(--site-text-muted, #6b7280);
}

.cms-section.cms-customer-account .cms-customer-account__label-optional {
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--site-font-weight-regular, 400);
  color: var(--site-text-muted-2, var(--site-text-muted, #9ca3af));
  font-size: 11px;
  margin-left: 4px;
}

.cms-section.cms-customer-account .cms-customer-account__input {
  padding: 11px 14px;
  /* Backlog Emma 7.2 — champs plus visibles : bordure 1.5px à 18% (au lieu de
     1px à 10%) + fond off-white plutôt que blanc pur. */
  border: 1.5px solid var(--site-border, rgba(28, 28, 28, 0.18));
  border-radius: var(--site-radius-sm, 9px);
  font-family: inherit;
  font-size: 14px;
  background: var(--site-surface, #fafafa);
  color: var(--site-text-color, inherit);
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
  width: 100%;
}

/* Backlog Emma 7.3 — wrapper + œil pour révéler le mot de passe */
.cms-section.cms-customer-account .cms-customer-account__password-wrap {
  position: relative;
  width: 100%;
}
.cms-section.cms-customer-account .cms-customer-account__input--with-eye {
  padding-right: 44px;
}
.cms-section.cms-customer-account .cms-customer-account__password-eye {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--site-text-muted, #6b7280);
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}
.cms-section.cms-customer-account .cms-customer-account__password-eye:hover {
  color: var(--site-primary-color, currentColor);
  background: var(--site-primary-soft, rgba(12, 153, 148, 0.10));
}
.cms-section.cms-customer-account .cms-customer-account__password-eye:focus-visible {
  outline: 2px solid var(--site-primary-color, currentColor);
  outline-offset: 2px;
}

/* Backlog Emma 7.1 — segmented control "pill" en haut des cards (toggle login/register) */
.cms-section.cms-customer-account .cms-customer-account__segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin: 0 auto 18px;
  background: var(--site-surface, #f5f5f5);
  border: 1px solid var(--site-border, rgba(28, 28, 28, 0.10));
  border-radius: var(--site-radius-pill, 999px);
}
.cms-section.cms-customer-account .cms-customer-account__segment {
  appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px 18px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: var(--site-font-weight-semibold, 600);
  color: var(--site-text-muted, #6b7280);
  border-radius: var(--site-radius-pill, 999px);
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.cms-section.cms-customer-account .cms-customer-account__segment:hover {
  color: var(--site-text-color, inherit);
}
.cms-section.cms-customer-account .cms-customer-account__segment--active {
  background: var(--site-background, #ffffff);
  color: var(--site-primary-color, currentColor);
  box-shadow: var(--site-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
}
.cms-section.cms-customer-account .cms-customer-account__segment:focus-visible {
  outline: 2px solid var(--site-primary-color, currentColor);
  outline-offset: 2px;
}

.cms-section.cms-customer-account .cms-customer-account__input:focus {
  outline: none;
  border-color: var(--site-primary-color, currentColor);
  box-shadow: 0 0 0 3px var(--site-primary-soft, rgba(12, 153, 148, 0.12));
}

.cms-section.cms-customer-account .cms-customer-account__input::placeholder {
  color: var(--site-text-muted-2, var(--site-text-muted, #c4c7cc));
  opacity: 1;
}

/* I.4 — Referral field (prefilled card) and "J'ai un code" details */
.cms-section.cms-customer-account .cms-customer-account__field--referral .cms-customer-account__input {
  background: color-mix(in srgb, var(--site-primary-color, #6366f1) 6%, transparent);
  border-color: color-mix(in srgb, var(--site-primary-color, #6366f1) 28%, transparent);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-weight: var(--site-font-weight-bold, 700);
  letter-spacing: 0.12em;
  color: var(--site-primary-color, #6366f1);
}

.cms-section.cms-customer-account .cms-customer-account__hint {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--site-text-muted, #6b7280);
}

.cms-section.cms-customer-account .cms-customer-account__hint strong {
  color: var(--site-primary-color, #6366f1);
  font-weight: var(--site-font-weight-bold, 700);
}

.cms-section.cms-customer-account .cms-customer-account__details {
  margin-top: 4px;
  border: 1px dashed var(--site-border, rgba(28, 28, 28, 0.18));
  border-radius: var(--site-radius-md, 10px);
  padding: 10px 14px;
}

.cms-section.cms-customer-account .cms-customer-account__details[open] {
  border-color: color-mix(in srgb, var(--site-primary-color, #6366f1) 30%, transparent);
  background: color-mix(in srgb, var(--site-primary-color, #6366f1) 4%, transparent);
}

.cms-section.cms-customer-account .cms-customer-account__details-summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-text-color, inherit);
  list-style: none;
  user-select: none;
}

.cms-section.cms-customer-account .cms-customer-account__details-summary::-webkit-details-marker {
  display: none;
}

.cms-section.cms-customer-account .cms-customer-account__details-summary::before {
  content: "+ ";
  color: var(--site-primary-color, #6366f1);
  font-weight: var(--site-font-weight-brand, 800);
}

.cms-section.cms-customer-account .cms-customer-account__details[open] .cms-customer-account__details-summary::before {
  content: "− ";
}

.cms-section.cms-customer-account .cms-customer-account__details .cms-customer-account__field {
  margin-top: 10px;
}

/* Consent checkbox */
.cms-section.cms-customer-account .cms-customer-account__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--site-text-muted, #6b7280);
  cursor: pointer;
  margin-top: 2px;
  /* Consent sentence reads as prose — explicitly reset uppercase/letter-spacing
     in case an ancestor form/label rule sets them. */
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--site-font-weight-regular, 400);
}

.cms-section.cms-customer-account .cms-customer-account__consent-checkbox {
  margin-top: 3px;
  accent-color: var(--site-primary-color, currentColor);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.cms-section.cms-customer-account .cms-customer-account__consent-text {
  min-width: 0;
}

.cms-section.cms-customer-account .cms-customer-account__consent-link {
  color: var(--site-primary-color, currentColor);
  text-decoration: underline;
}

.cms-section.cms-customer-account .cms-customer-account__consent-link:hover {
  color: var(--site-primary-dark, var(--site-primary-color, currentColor));
}

/* Submit button */
.cms-section.cms-customer-account .cms-customer-account__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 22px;
  border-radius: var(--site-radius-sm, 9px);
  font-family: inherit;
  font-size: 15px;
  font-weight: var(--site-font-weight-bold, 700);
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.2s ease;
  margin-top: 4px;
}

.cms-section.cms-customer-account .cms-customer-account__submit--primary {
  background: var(--site-primary-color, currentColor);
  color: var(--site-primary-contrast, #ffffff);
}

.cms-section.cms-customer-account .cms-customer-account__submit--primary:hover {
  background: var(--site-primary-dark, var(--site-primary-color, currentColor));
  transform: translateY(-1px);
  box-shadow: var(--site-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.10));
}

.cms-section.cms-customer-account .cms-customer-account__submit--primary[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Cross-card switch link */
.cms-section.cms-customer-account .cms-customer-account__switch {
  margin: 18px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--site-text-muted, #6b7280);
}

.cms-section.cms-customer-account .cms-customer-account__switch-link {
  color: var(--site-primary-color, currentColor);
  font-weight: var(--site-font-weight-bold, 700);
  text-decoration: none;
}

.cms-section.cms-customer-account .cms-customer-account__switch-link:hover {
  text-decoration: underline;
  color: var(--site-primary-dark, var(--site-primary-color, currentColor));
}

/* Responsive */
@media (max-width: 900px) {
  .cms-section.cms-customer-account.cms-customer-account--auth-split {
    padding: 48px 20px;
  }
  .cms-section.cms-customer-account .cms-customer-account__cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 520px) {
  .cms-section.cms-customer-account .cms-customer-account__card {
    padding: 24px 20px;
  }
  .cms-section.cms-customer-account .cms-customer-account__field-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   RENTER RESERVATIONS (H.1)
   Builder-first, token-driven page rendered by
   public_sites/renter_reservation_management.html.erb.
   Two modes gated by modifiers:
     .cms-renter-reservations--list   (index "Mes réservations")
     .cms-renter-reservations--detail (single reservation)
   Specificity chained at 0-3-0 to beat cms_blocks/*.css defaults.
   ============================================================ */
.cms-section.cms-renter-reservations.cms-renter-reservations--list,
.cms-section.cms-renter-reservations.cms-renter-reservations--detail {
  font-family: var(--site-font-family, inherit);
  color: var(--site-text-color, inherit);
  background: var(--site-surface, var(--site-primary-light, #f5f7fb));
  padding: 56px 24px 72px;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

/* ── Hero (list header) ───────────────────────────── */
.cms-section.cms-renter-reservations .cms-renter-reservations__hero {
  text-align: left;
  margin-bottom: 28px;
  padding: 24px 28px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--site-primary-color) 12%, transparent),
    color-mix(in srgb, var(--site-accent-color, var(--site-secondary-color, var(--site-primary-color))) 8%, transparent));
  border: 1px solid var(--site-primary-soft, var(--site-border));
  border-radius: var(--site-radius-lg, 16px);
}

.cms-section.cms-renter-reservations .cms-renter-reservations__hero-title {
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-text-color, inherit);
  letter-spacing: -0.3px;
  margin: 0 0 6px;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__hero-subtitle {
  font-size: 15px;
  line-height: 1.55;
  color: var(--site-text-muted, #6b7280);
  margin: 0;
}

/* ── Groups (list sections) ──────────────────────── */
.cms-section.cms-renter-reservations .cms-renter-reservations__group {
  margin-bottom: 32px;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__group:last-child {
  margin-bottom: 0;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__group--active {
  padding: 20px;
  border-radius: var(--site-radius-lg, 16px);
  border: 2px solid var(--site-primary-color, #6366f1);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--site-primary-color) 8%, transparent),
    color-mix(in srgb, var(--site-accent-color, var(--site-secondary-color, var(--site-primary-color))) 6%, transparent));
}

.cms-section.cms-renter-reservations .cms-renter-reservations__group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__group-title {
  margin: 0;
  font-size: 16px;
  font-weight: var(--site-font-weight-brand, 800);
  color: var(--site-text-color, inherit);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__group--active .cms-renter-reservations__group-title {
  color: var(--site-primary-color, #6366f1);
}

.cms-section.cms-renter-reservations .cms-renter-reservations__group--pending .cms-renter-reservations__group-title,
.cms-section.cms-renter-reservations .cms-renter-reservations__group--pending .cms-renter-reservations__group-icon {
  color: var(--site-accent-color, var(--site-primary-color, #f57c00));
}

.cms-section.cms-renter-reservations .cms-renter-reservations__group--completed .cms-renter-reservations__group-title,
.cms-section.cms-renter-reservations .cms-renter-reservations__group--completed .cms-renter-reservations__group-icon {
  color: var(--site-text-muted, #6b7280);
}

.cms-section.cms-renter-reservations .cms-renter-reservations__group-icon {
  flex-shrink: 0;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__group-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--site-primary-color, #6366f1);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--site-primary-color) 20%, transparent);
  animation: cms-renter-reservations-pulse 2s infinite;
  flex-shrink: 0;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__group-count {
  font-size: 12px;
  font-weight: var(--site-font-weight-semibold, 600);
  background: var(--site-primary-color, #6366f1);
  color: #fff;
  border-radius: 20px;
  padding: 2px 10px;
  min-width: 24px;
  text-align: center;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__group--pending .cms-renter-reservations__group-count {
  background: var(--site-accent-color, var(--site-primary-color, #f57c00));
}

.cms-section.cms-renter-reservations .cms-renter-reservations__group--completed .cms-renter-reservations__group-count {
  background: var(--site-text-muted, #6b7280);
}

@keyframes cms-renter-reservations-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}

/* ── Card list ───────────────────────────────────── */
.cms-section.cms-renter-reservations .cms-renter-reservations__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__card {
  display: grid;
  grid-template-columns: 160px 1fr;
  background: var(--site-background, #fff);
  border: 1px solid var(--site-border, #e5e7eb);
  border-radius: var(--site-radius-md, 12px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--site-shadow-sm, 0 1px 4px rgba(0,0,0,0.06));
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--site-shadow-md, 0 4px 20px rgba(0,0,0,0.10));
  border-color: var(--site-primary-soft, var(--site-primary-color, #6366f1));
}

.cms-section.cms-renter-reservations .cms-renter-reservations__card--muted {
  opacity: 0.7;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__card-media {
  position: relative;
  background: var(--site-surface, #f1f5f9);
  overflow: hidden;
  min-height: 120px;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__card-img-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--site-text-muted-2, #9ca3af);
}

.cms-section.cms-renter-reservations .cms-renter-reservations__card-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__card-title {
  font-size: 15px;
  font-weight: var(--site-font-weight-brand, 800);
  color: var(--site-text-color, inherit);
}

.cms-section.cms-renter-reservations .cms-renter-reservations__card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--site-text-muted, #6b7280);
}

.cms-section.cms-renter-reservations .cms-renter-reservations__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__price {
  font-weight: var(--site-font-weight-brand, 800);
  color: var(--site-primary-color, #6366f1);
}

/* Progress (active cards) */
.cms-section.cms-renter-reservations .cms-renter-reservations__progress {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__progress-track {
  flex: 1;
  height: 5px;
  background: var(--site-border, #e5e7eb);
  border-radius: 999px;
  overflow: hidden;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__progress-fill {
  height: 100%;
  width: var(--cms-rr-progress, 0%);
  background: var(--site-primary-color, #6366f1);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__progress-label {
  font-size: 11px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-primary-color, #6366f1);
  white-space: nowrap;
}

/* Flag (extension pending inline) */
.cms-section.cms-renter-reservations .cms-renter-reservations__flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: var(--site-font-weight-bold, 700);
  padding: 3px 10px;
  border-radius: 999px;
  width: fit-content;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__flag--warning {
  color: var(--site-accent-color, #f57c00);
  background: color-mix(in srgb, var(--site-accent-color, #f57c00) 15%, transparent);
}

/* ── Status badges ───────────────────────────────── */
.cms-section.cms-renter-reservations .cms-renter-reservations__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: var(--site-font-weight-bold, 700);
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* `awaiting_payment` n'avait pas de variante : le badge sortait sans couleur,
   alors que la réservation attend une action du locataire. Il partage la
   teinte d'attente de `pending`. */
.cms-section.cms-renter-reservations .cms-renter-reservations__badge--awaiting_payment,
.cms-section.cms-renter-reservations .cms-renter-reservations__badge--pending {
  color: var(--site-accent-color, #f57c00);
  background: color-mix(in srgb, var(--site-accent-color, #f57c00) 15%, transparent);
}

.cms-section.cms-renter-reservations .cms-renter-reservations__badge--confirmed {
  color: var(--site-primary-color, #6366f1);
  background: var(--site-primary-soft, color-mix(in srgb, var(--site-primary-color) 15%, transparent));
}

.cms-section.cms-renter-reservations .cms-renter-reservations__badge--active,
.cms-section.cms-renter-reservations .cms-renter-reservations__badge--extended {
  color: #fff;
  background: var(--site-primary-color, #6366f1);
}

.cms-section.cms-renter-reservations .cms-renter-reservations__badge--completed {
  color: var(--site-success, #22c55e);
  background: color-mix(in srgb, var(--site-success, #22c55e) 15%, transparent);
}

.cms-section.cms-renter-reservations .cms-renter-reservations__badge--cancelled,
.cms-section.cms-renter-reservations .cms-renter-reservations__badge--refunded {
  color: var(--site-danger, #ef4444);
  background: color-mix(in srgb, var(--site-danger, #ef4444) 15%, transparent);
}

/* ── Empty state ─────────────────────────────────── */
.cms-section.cms-renter-reservations .cms-renter-reservations__empty {
  text-align: center;
  padding: 64px 24px;
  background: var(--site-background, #fff);
  border: 1px dashed var(--site-border, #e5e7eb);
  border-radius: var(--site-radius-lg, 16px);
}

.cms-section.cms-renter-reservations .cms-renter-reservations__empty-icon {
  display: inline-flex;
  width: 72px;
  height: 72px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--site-primary-soft, color-mix(in srgb, var(--site-primary-color) 10%, transparent));
  color: var(--site-primary-color, #6366f1);
  margin-bottom: 20px;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__empty-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: var(--site-font-weight-brand, 800);
  color: var(--site-text-color, inherit);
}

.cms-section.cms-renter-reservations .cms-renter-reservations__empty-text {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--site-text-muted, #6b7280);
}

.cms-section.cms-renter-reservations .cms-renter-reservations__empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--site-btn-radius, 24px);
  background: var(--site-primary-color, #6366f1);
  color: #fff;
  font-size: 14px;
  font-weight: var(--site-font-weight-bold, 700);
  text-decoration: none;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__empty-cta:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* ── List: back link to dashboard ────────────────── */
.cms-section.cms-renter-reservations.cms-renter-reservations--list .cms-renter-reservations__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-primary-color, #6366f1);
  text-decoration: none;
  margin-bottom: 16px;
}

.cms-section.cms-renter-reservations.cms-renter-reservations--list .cms-renter-reservations__back:hover {
  color: var(--site-primary-dark, #4f46e5);
}

/* ── Detail: back link + header ──────────────────── */
.cms-section.cms-renter-reservations.cms-renter-reservations--detail .cms-renter-reservations__back {
  margin-bottom: 16px;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-primary-color, #6366f1);
  text-decoration: none;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__back-link:hover {
  text-decoration: underline;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__detail-title {
  font-size: clamp(22px, 2.5vw, 28px);
  line-height: 1.2;
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-text-color, inherit);
  margin: 0;
}

/* ── Loyalty banner (rental completed) ─────────────── */
.cms-section.cms-renter-reservations .cms-renter-reservations__loyalty-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  margin: 0 0 16px;
  background: var(--site-success-soft, rgba(34, 197, 94, 0.10));
  border: 1px solid color-mix(in srgb, var(--site-success, #16a34a) 30%, transparent);
  border-radius: var(--site-radius-card, 14px);
  box-shadow: var(--site-shadow-sm, 0 1px 4px rgba(0,0,0,0.06));
  flex-wrap: wrap;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__loyalty-banner-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--site-success-soft, rgba(34, 197, 94, 0.18));
  color: var(--site-success, #16a34a);
}

.cms-section.cms-renter-reservations .cms-renter-reservations__loyalty-banner-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 220px;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__loyalty-banner-title {
  font-size: 15px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-text-color, inherit);
  line-height: 1.35;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__loyalty-banner-meta {
  font-size: 13px;
  color: var(--site-text-muted, #64748b);
  line-height: 1.4;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__loyalty-banner-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--site-radius-sm, 10px);
  background: var(--site-success, #16a34a);
  color: var(--site-background, #fff);
  font-size: 13px;
  font-weight: var(--site-font-weight-semibold, 600);
  text-decoration: none;
  transition: opacity 0.2s;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__loyalty-banner-link:hover {
  opacity: 0.88;
  color: var(--site-background, #fff);
  text-decoration: none;
}

/* ── Detail grid ─────────────────────────────────── */
.cms-section.cms-renter-reservations .cms-renter-reservations__detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* ── Info cards ──────────────────────────────────── */
.cms-section.cms-renter-reservations .cms-renter-reservations__info {
  background: var(--site-background, #fff);
  border: 1px solid var(--site-border, #e5e7eb);
  border-radius: var(--site-radius-lg, 16px);
  padding: 20px;
  box-shadow: var(--site-shadow-sm, 0 1px 4px rgba(0,0,0,0.06));
}

.cms-section.cms-renter-reservations .cms-renter-reservations__info--warning {
  border: 2px solid var(--site-accent-color, #f57c00);
  background: color-mix(in srgb, var(--site-accent-color, #f57c00) 6%, var(--site-background, #fff));
}

.cms-section.cms-renter-reservations .cms-renter-reservations__info-title {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: var(--site-font-weight-brand, 800);
  color: var(--site-text-color, inherit);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__info--warning .cms-renter-reservations__info-title {
  color: var(--site-accent-color, #f57c00);
}

.cms-section.cms-renter-reservations .cms-renter-reservations__info-text {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--site-text-color, inherit);
}

.cms-section.cms-renter-reservations .cms-renter-reservations__info-note {
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--site-text-muted, #6b7280);
}

/* ── Item (detail header card) ──────────────────── */
.cms-section.cms-renter-reservations .cms-renter-reservations__item {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  align-items: center;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__item-media {
  width: 100px;
  height: 80px;
  border-radius: var(--site-radius-sm, 8px);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--site-surface, #f1f5f9);
}

.cms-section.cms-renter-reservations .cms-renter-reservations__item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__item-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--site-text-muted-2, #9ca3af);
}

.cms-section.cms-renter-reservations .cms-renter-reservations__item-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__item-name {
  font-size: 16px;
  font-weight: var(--site-font-weight-brand, 800);
  color: var(--site-text-color, inherit);
}

.cms-section.cms-renter-reservations .cms-renter-reservations__item-category {
  font-size: 13px;
  color: var(--site-text-muted, #6b7280);
}

/* ── Rows (key/value lists) ──────────────────────── */
.cms-section.cms-renter-reservations .cms-renter-reservations__rows {
  display: flex;
  flex-direction: column;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  font-size: 14px;
  color: var(--site-text-color, inherit);
  border-bottom: 1px solid var(--site-border, #e5e7eb);
}

.cms-section.cms-renter-reservations .cms-renter-reservations__row:last-child {
  border-bottom: none;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__row-label {
  color: var(--site-text-muted, #6b7280);
}

.cms-section.cms-renter-reservations .cms-renter-reservations__row-value {
  color: var(--site-text-color, inherit);
  font-weight: var(--site-font-weight-semibold, 600);
  text-align: right;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__row--total {
  font-weight: var(--site-font-weight-black, 900);
}

.cms-section.cms-renter-reservations .cms-renter-reservations__row--total .cms-renter-reservations__row-label,
.cms-section.cms-renter-reservations .cms-renter-reservations__row--total .cms-renter-reservations__row-value {
  color: var(--site-primary-color, #6366f1);
  font-weight: var(--site-font-weight-black, 900);
}

/* ── Timeline (Suivi) ────────────────────────────── */
.cms-section.cms-renter-reservations .cms-renter-reservations__timeline {
  position: relative;
  padding-left: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__timeline::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--site-border, #e5e7eb);
  border-radius: 2px;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__step {
  position: relative;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__step-dot {
  position: absolute;
  left: -28px;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--site-background, #fff);
  border: 2px solid var(--site-border, #e5e7eb);
  color: var(--site-text-muted-2, #9ca3af);
}

.cms-section.cms-renter-reservations .cms-renter-reservations__step--done .cms-renter-reservations__step-dot {
  border-color: var(--site-primary-color, #6366f1);
  background: var(--site-background, #fff);
  color: var(--site-primary-color, #6366f1);
}

.cms-section.cms-renter-reservations .cms-renter-reservations__step--warning .cms-renter-reservations__step-dot {
  border-color: var(--site-accent-color, #f57c00);
  background: color-mix(in srgb, var(--site-accent-color, #f57c00) 20%, var(--site-background, #fff));
  color: var(--site-accent-color, #f57c00);
}

.cms-section.cms-renter-reservations .cms-renter-reservations__step--cancelled .cms-renter-reservations__step-dot {
  border-color: var(--site-danger, #ef4444);
  background: color-mix(in srgb, var(--site-danger, #ef4444) 15%, var(--site-background, #fff));
  color: var(--site-danger, #ef4444);
}

.cms-section.cms-renter-reservations .cms-renter-reservations__step-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__step-title {
  font-size: 14px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-text-color, inherit);
}

.cms-section.cms-renter-reservations .cms-renter-reservations__step-meta {
  font-size: 12px;
  color: var(--site-text-muted, #6b7280);
}

.cms-section.cms-renter-reservations .cms-renter-reservations__step--warning .cms-renter-reservations__step-title {
  color: var(--site-accent-color, #f57c00);
}

.cms-section.cms-renter-reservations .cms-renter-reservations__step--cancelled .cms-renter-reservations__step-title {
  color: var(--site-danger, #ef4444);
}

/* ── Owner ──────────────────────────────────────── */
.cms-section.cms-renter-reservations .cms-renter-reservations__owner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__owner-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg,
    var(--site-primary-color, #6366f1),
    var(--site-secondary-color, var(--site-primary-color, #8b5cf6)));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--site-font-weight-bold, 700);
  font-size: 15px;
  flex-shrink: 0;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__owner-body {
  display: flex;
  flex-direction: column;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__owner-name {
  font-size: 14px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-text-color, inherit);
}

.cms-section.cms-renter-reservations .cms-renter-reservations__owner-meta {
  font-size: 12px;
  color: var(--site-text-muted, #6b7280);
}

/* ── Actions & buttons ──────────────────────────── */
.cms-section.cms-renter-reservations .cms-renter-reservations__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__action-form {
  flex: 1;
  display: flex;
  min-width: 0;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__btn {
  appearance: none;
  border: 1.5px solid transparent;
  padding: 12px 18px;
  border-radius: var(--site-btn-radius, 10px);
  font-size: 14px;
  font-weight: var(--site-font-weight-bold, 700);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: filter 0.2s ease, background 0.2s ease, transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  font-family: inherit;
  line-height: 1;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__btn--block {
  width: 100%;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__btn--primary {
  background: var(--site-primary-color, #6366f1);
  color: #fff;
  border-color: var(--site-primary-color, #6366f1);
  width: 100%;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__btn--primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.cms-section.cms-renter-reservations .cms-renter-reservations__btn--outline {
  background: var(--site-background, #fff);
  color: var(--site-primary-color, #6366f1);
  border-color: var(--site-primary-color, #6366f1);
}

.cms-section.cms-renter-reservations .cms-renter-reservations__btn--outline:hover {
  background: var(--site-primary-soft, color-mix(in srgb, var(--site-primary-color) 10%, transparent));
}

.cms-section.cms-renter-reservations .cms-renter-reservations__btn--danger-outline {
  background: var(--site-background, #fff);
  color: var(--site-danger, #ef4444);
  border-color: var(--site-danger, #ef4444);
  width: 100%;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__btn--danger-outline:hover {
  background: color-mix(in srgb, var(--site-danger, #ef4444) 10%, transparent);
}

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 900px) {
  .cms-section.cms-renter-reservations.cms-renter-reservations--list,
  .cms-section.cms-renter-reservations.cms-renter-reservations--detail {
    padding: 40px 16px 56px;
  }
  .cms-section.cms-renter-reservations .cms-renter-reservations__detail-grid {
    grid-template-columns: 1fr;
  }
  .cms-section.cms-renter-reservations .cms-renter-reservations__card {
    grid-template-columns: 100px 1fr;
  }
  .cms-section.cms-renter-reservations .cms-renter-reservations__card-media {
    min-height: 100px;
  }
  .cms-section.cms-renter-reservations .cms-renter-reservations__hero {
    padding: 20px;
  }
}

@media (max-width: 560px) {
  .cms-section.cms-renter-reservations .cms-renter-reservations__actions {
    flex-direction: column;
  }
  .cms-section.cms-renter-reservations .cms-renter-reservations__action-form {
    width: 100%;
  }
  .cms-section.cms-renter-reservations .cms-renter-reservations__detail-head {
    align-items: flex-start;
  }
  .cms-section.cms-renter-reservations .cms-renter-reservations__card-meta {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   OWNER RESERVATION DETAIL (H.2)
   Builder-first, token-driven page rendered by
   public_sites/owner_reservation_detail.html.erb.
   Reuses the .cms-renter-reservations skeleton (info cards, timeline,
   rows, badges) and adds dedicated .cms-owner-reservation classes for
   blocks specific to the owner perspective: renter card, action buttons
   (accept/reject/start/complete), notice banners.
   Specificity chained at 0-3-0 to beat cms_blocks/*.css defaults.
   ============================================================ */

/* ── Renter card (left col, beneath item) ──────────── */
.cms-section.cms-owner-reservation .cms-owner-reservation__renter {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.cms-section.cms-owner-reservation .cms-owner-reservation__renter-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg,
    var(--site-primary-color, #6366f1),
    var(--site-secondary-color, var(--site-primary-color, #8b5cf6)));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--site-font-weight-bold, 700);
  font-size: 16px;
  flex-shrink: 0;
}

.cms-section.cms-owner-reservation .cms-owner-reservation__renter-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cms-section.cms-owner-reservation .cms-owner-reservation__renter-name {
  font-size: 15px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-text-color, inherit);
}

.cms-section.cms-owner-reservation .cms-owner-reservation__renter-meta {
  font-size: 13px;
  color: var(--site-text-muted, #6b7280);
  word-break: break-word;
}

.cms-section.cms-owner-reservation .cms-owner-reservation__renter-notes {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--site-surface, color-mix(in srgb, var(--site-primary-color) 6%, transparent));
  border-left: 3px solid var(--site-primary-color, #6366f1);
  border-radius: var(--site-radius-sm, 8px);
}

.cms-section.cms-owner-reservation .cms-owner-reservation__renter-notes-label {
  display: block;
  font-size: 12px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-primary-color, #6366f1);
  margin-bottom: 4px;
}

.cms-section.cms-owner-reservation .cms-owner-reservation__renter-notes-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--site-text-color, inherit);
  white-space: pre-line;
}

/* ── Owner actions ─────────────────────────────────── */
.cms-section.cms-owner-reservation .cms-owner-reservation__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cms-section.cms-owner-reservation .cms-owner-reservation__action-form {
  display: flex;
  width: 100%;
  margin: 0;
}

.cms-section.cms-owner-reservation .cms-owner-reservation__action-btn {
  appearance: none;
  border: 1.5px solid transparent;
  padding: 12px 18px;
  border-radius: var(--site-btn-radius, 10px);
  font-size: 14px;
  font-weight: var(--site-font-weight-bold, 700);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: filter 0.2s ease, background 0.2s ease, transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  font-family: inherit;
  line-height: 1;
  width: 100%;
}

.cms-section.cms-owner-reservation .cms-owner-reservation__action-btn--block {
  width: 100%;
}

.cms-section.cms-owner-reservation .cms-owner-reservation__action-btn--primary {
  background: var(--site-primary-color, #6366f1);
  color: #fff;
  border-color: var(--site-primary-color, #6366f1);
}

.cms-section.cms-owner-reservation .cms-owner-reservation__action-btn--primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.cms-section.cms-owner-reservation .cms-owner-reservation__action-btn--danger-outline {
  /* Backlog Emma L3.6 — « Changer couleur bouton refuser ». L'outline
     blanc/rouge n'était pas assez voyant côté loueur quand il doit
     rejeter une demande. Bascule en fill plein rouge (texte blanc)
     pour le distinguer clairement du bouton « Accepter » primaire. */
  background: var(--site-danger, #ef4444);
  color: #fff;
  border-color: var(--site-danger, #ef4444);
}

.cms-section.cms-owner-reservation .cms-owner-reservation__action-btn--danger-outline:hover {
  filter: brightness(0.92);
  transform: translateY(-1px);
}

/* ── Notices (read-only states) ───────────────────── */
.cms-section.cms-owner-reservation .cms-owner-reservation__notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--site-radius-sm, 8px);
  font-size: 14px;
  font-weight: var(--site-font-weight-semibold, 600);
  background: var(--site-surface, color-mix(in srgb, var(--site-primary-color) 6%, transparent));
  color: var(--site-text-color, inherit);
}

.cms-section.cms-owner-reservation .cms-owner-reservation__notice--success {
  background: color-mix(in srgb, var(--site-success, #22c55e) 12%, transparent);
  color: var(--site-success, #22c55e);
}

.cms-section.cms-owner-reservation .cms-owner-reservation__notice--danger {
  background: color-mix(in srgb, var(--site-danger, #ef4444) 12%, transparent);
  color: var(--site-danger, #ef4444);
}

/* ── G6 — Renter tracking card ─────────────────────── */
.cms-renter-tracking-card {
  background: color-mix(in srgb, var(--site-success, #22c55e) 8%, var(--site-background, #fff));
  border: 1px solid color-mix(in srgb, var(--site-success, #22c55e) 25%, transparent);
}
.cms-renter-tracking-card__intro {
  font-size: 13.5px;
  color: var(--site-text-color, inherit);
  margin: 0 0 14px;
}
.cms-renter-tracking-card__details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cms-renter-tracking-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  padding: 4px 0;
}
.cms-renter-tracking-card__row-label {
  color: var(--site-text-muted, inherit);
}
.cms-renter-tracking-card__tracking {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--site-background, #fff);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--site-border, rgba(28, 28, 28, 0.1));
  font-size: 13px;
}
.cms-renter-tracking-card__status {
  font-weight: var(--site-font-weight-bold, 700);
}
.cms-renter-tracking-card__status--label_generated {
  color: var(--site-primary-color, #0c9994);
}
.cms-renter-tracking-card__status--in_transit {
  color: var(--site-warning, #f59e0b);
}
.cms-renter-tracking-card__status--delivered {
  color: var(--site-success, #22c55e);
}
.cms-renter-tracking-card__status--failed,
.cms-renter-tracking-card__status--returned {
  color: var(--site-danger, #ef4444);
}
.cms-renter-tracking-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--site-primary-color, #0c9994);
  font-weight: var(--site-font-weight-bold, 700);
  text-decoration: none;
  font-size: 13px;
}
.cms-renter-tracking-card__link:hover {
  text-decoration: underline;
}
.cms-renter-tracking-card__timeline {
  list-style: none;
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--site-success, #22c55e) 25%, transparent);
  display: flex;
  align-items: center;
  gap: 0;
}
.cms-renter-tracking-card__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  font-size: 11px;
  color: var(--site-text-muted-2, var(--site-text-muted, #9ca3af));
  gap: 4px;
}
.cms-renter-tracking-card__step.is-done,
.cms-renter-tracking-card__step.is-current {
  color: var(--site-success, #22c55e);
  font-weight: var(--site-font-weight-bold, 700);
}
.cms-renter-tracking-card__step-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--site-border, rgba(28, 28, 28, 0.15));
}
.cms-renter-tracking-card__step.is-done .cms-renter-tracking-card__step-dot {
  background: var(--site-success, #22c55e);
}
.cms-renter-tracking-card__step.is-current .cms-renter-tracking-card__step-dot {
  background: var(--site-success, #22c55e);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--site-success, #22c55e) 25%, transparent);
}
.cms-renter-tracking-card__step-line {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--site-border, rgba(28, 28, 28, 0.15));
  z-index: -1;
}
.cms-renter-tracking-card__step-line.is-done {
  background: var(--site-success, #22c55e);
}

/* ── G5 — Owner shipping card ─────────────────────── */
.cms-owner-shipping-card {
  margin-top: 16px;
}
.cms-owner-shipping-card__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--site-success, #22c55e);
  color: var(--site-background, #fff);
  font-weight: var(--site-font-weight-bold, 700);
  font-size: 14px;
  margin-right: 6px;
}
.cms-owner-shipping-card__recipient {
  font-size: 13.5px;
  color: var(--site-text-muted, inherit);
  margin: 0 0 14px;
}
.cms-owner-shipping-card__step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  border: 1px dashed var(--site-border, rgba(28, 28, 28, 0.15));
  border-radius: var(--site-radius-sm, 9px);
  margin-bottom: 10px;
}
.cms-owner-shipping-card__step--success {
  border-style: solid;
  border-color: var(--site-success, #22c55e);
  background: color-mix(in srgb, var(--site-success, #22c55e) 8%, transparent);
}
.cms-owner-shipping-card__step-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cms-owner-shipping-card__step-text strong {
  font-weight: var(--site-font-weight-bold, 700);
  /* Backlog Emma 18.21 — visibilité écritures pour transporteurs :
     tailles renforcées (strong 14→15, small 12.5→13.5) et small passé du
     gris muted (peu lisible sur fond clair) au text-color principal. */
  font-size: 15px;
}
.cms-owner-shipping-card__step-text small {
  font-size: 13.5px;
  color: var(--site-text-color, inherit);
  line-height: 1.5;
  font-weight: var(--site-font-weight-semibold, 600);
}
.cms-owner-shipping-card__tracking {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--site-background, #fff);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--site-border, rgba(28, 28, 28, 0.1));
}
.cms-owner-shipping-card__step-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cms-owner-shipping-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: var(--site-radius-sm, 9px);
  font-size: 13px;
  font-weight: var(--site-font-weight-bold, 700);
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.cms-owner-shipping-card__btn--primary {
  background: var(--site-primary-color, #0c9994);
  color: var(--site-background, #fff);
}
.cms-owner-shipping-card__btn--primary:hover {
  background: var(--site-primary-dark, #105f5e);
}
.cms-owner-shipping-card__btn--ghost {
  background: transparent;
  color: var(--site-text-muted, inherit);
  border-color: var(--site-border, rgba(28, 28, 28, 0.15));
}
.cms-owner-shipping-card__btn--ghost:hover {
  background: var(--site-surface, #f5f5f5);
  color: var(--site-text-color, inherit);
}

/* ── Admin notes ──────────────────────────────────── */
.cms-section.cms-owner-reservation .cms-owner-reservation__admin-notes {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--site-text-muted, #6b7280);
  white-space: pre-line;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 560px) {
  .cms-section.cms-owner-reservation .cms-owner-reservation__actions {
    gap: 8px;
  }
}

/* ============================================================
   OWNER ITEM MANAGEMENT (H.3)
   Builder-first, token-driven page rendered by
   public_sites/owner_item_management.html.erb.
   Two modes gated by modifiers:
     .cms-owner-items--list   (grid of submitted items)
     .cms-owner-items--detail (single item edit + sidebar)
   Specificity chained at 0-3-0 to beat cms_blocks/*.css defaults.
   ============================================================ */
.cms-section.cms-owner-items.cms-owner-items--list,
.cms-section.cms-owner-items.cms-owner-items--detail {
  font-family: var(--site-font-family, inherit);
  color: var(--site-text-color, inherit);
  background: var(--site-surface, var(--site-primary-light, #f5f7fb));
  padding: 56px 24px 72px;
}

.cms-section.cms-owner-items .cms-owner-items__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Flash messages ───────────────────────────────── */
.cms-section.cms-owner-items .cms-owner-items__flash {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--site-radius-md, 12px);
  font-size: 14px;
  font-weight: var(--site-font-weight-semibold, 600);
  margin-bottom: 20px;
  border: 1px solid transparent;
}

.cms-section.cms-owner-items .cms-owner-items__flash--success {
  background: color-mix(in srgb, var(--site-success, #22c55e) 12%, transparent);
  color: var(--site-success-strong, var(--site-success, #166534));
  border-color: color-mix(in srgb, var(--site-success, #22c55e) 30%, transparent);
}

.cms-section.cms-owner-items .cms-owner-items__flash--danger {
  background: var(--site-danger-soft, rgba(239, 68, 68, 0.08));
  color: var(--site-danger-strong, #991B1B);
  border-color: var(--site-danger-border, rgba(239, 68, 68, 0.25));
}

/* ── Bandeau Stripe Connect (gating loueur) ─────────
   Affiché en haut de /location/mes-objets quand le user est connecté
   mais n'a pas encore complété son onboarding Stripe Connect Express.
   Ton "info chaleureux" : violet Stripe + body explicatif + CTA primary.
   Couleurs : on évite jaune/orange qui font alarme — on veut une
   invitation, pas une alerte. */
.cms-section.cms-owner-items .cms-owner-items__stripe-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
  background: color-mix(in srgb, #635BFF 6%, var(--site-background, #fff));
  border: 1px solid color-mix(in srgb, #635BFF 22%, transparent);
  border-radius: var(--site-radius, 12px);
}
.cms-section.cms-owner-items .cms-owner-items__stripe-banner-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #635BFF;
  color: #fff;
  border-radius: 9px;
  font-size: 18px;
  font-weight: 800;
}
.cms-section.cms-owner-items .cms-owner-items__stripe-banner-body {
  flex: 1 1 auto;
  min-width: 0;
}
.cms-section.cms-owner-items .cms-owner-items__stripe-banner-title {
  font-size: 15px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-text-color, #111827);
  margin: 0 0 4px;
}
.cms-section.cms-owner-items .cms-owner-items__stripe-banner-text {
  font-size: 13px;
  line-height: 1.45;
  color: var(--site-text-muted, #4b5563);
  margin: 0;
}
.cms-section.cms-owner-items .cms-owner-items__stripe-banner-action {
  flex: 0 0 auto;
  align-self: center;
}
@media (max-width: 640px) {
  .cms-section.cms-owner-items .cms-owner-items__stripe-banner {
    flex-direction: column;
  }
  .cms-section.cms-owner-items .cms-owner-items__stripe-banner-action {
    align-self: stretch;
  }
  .cms-section.cms-owner-items .cms-owner-items__stripe-banner-action a {
    width: 100%;
    text-align: center;
  }
}

/* ── Hero (list header) ───────────────────────────── */
.cms-section.cms-owner-items .cms-owner-items__hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 24px 28px;
  margin-bottom: 28px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--site-primary-color) 12%, transparent),
    color-mix(in srgb, var(--site-accent-color, var(--site-secondary-color, var(--site-primary-color))) 8%, transparent));
  border: 1px solid var(--site-primary-soft, var(--site-border));
  border-radius: var(--site-radius-lg, 16px);
}

.cms-section.cms-owner-items .cms-owner-items__hero-text {
  flex: 1 1 320px;
  min-width: 0;
}

.cms-section.cms-owner-items .cms-owner-items__hero-title {
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-text-color, inherit);
  letter-spacing: -0.3px;
  margin: 0 0 6px;
}

.cms-section.cms-owner-items .cms-owner-items__hero-subtitle {
  font-size: 15px;
  line-height: 1.55;
  color: var(--site-text-muted, #6b7280);
  margin: 0;
}

.cms-section.cms-owner-items .cms-owner-items__hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* ── Buttons ──────────────────────────────────────── */
.cms-section.cms-owner-items .cms-owner-items__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--site-radius-sm, 9px);
  font-size: 14px;
  font-weight: var(--site-font-weight-bold, 700);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: background 0.15s, transform 0.1s, opacity 0.15s, color 0.15s, border-color 0.15s;
}

.cms-section.cms-owner-items .cms-owner-items__btn--primary {
  background: var(--site-primary-color, #6366f1);
  color: var(--site-primary-contrast, #ffffff);
}

.cms-section.cms-owner-items .cms-owner-items__btn--primary:hover {
  background: var(--site-primary-hover, var(--site-primary-color, #6366f1));
  transform: translateY(-1px);
}

.cms-section.cms-owner-items .cms-owner-items__btn--primary[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.cms-section.cms-owner-items .cms-owner-items__btn--ghost {
  background: var(--site-background, #ffffff);
  color: var(--site-text-color, inherit);
  border-color: var(--site-border, rgba(28, 28, 28, 0.12));
}

.cms-section.cms-owner-items .cms-owner-items__btn--ghost:hover {
  background: var(--site-surface, rgba(0, 0, 0, 0.04));
  border-color: var(--site-primary-soft, var(--site-primary-color, #6366f1));
}

.cms-section.cms-owner-items .cms-owner-items__btn--block {
  display: flex;
  width: 100%;
  justify-content: center;
}

/* ── Card grid (list mode) ────────────────────────── */
.cms-section.cms-owner-items .cms-owner-items__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}

/* H3 — wrapper relatif card + bouton Supprimer en overlay (sibling du
   lien card, jamais imbriqué dedans). */
.cms-section.cms-owner-items .cms-owner-items__card-wrap {
  position: relative;
}
.cms-section.cms-owner-items .cms-owner-items__card-wrap .cms-owner-items__card {
  height: 100%;
}
.cms-section.cms-owner-items .cms-owner-items__card-delete {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--site-text-muted, #6b7280);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  transition: color 120ms ease, background-color 120ms ease;
}
.cms-section.cms-owner-items .cms-owner-items__card-delete:hover {
  background: #fff;
  color: var(--site-danger, #ef4444);
}

.cms-section.cms-owner-items .cms-owner-items__card {
  display: flex;
  flex-direction: column;
  background: var(--site-background, #fff);
  border: 1px solid var(--site-border, #e5e7eb);
  border-radius: var(--site-radius-lg, 16px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--site-shadow-sm, 0 1px 4px rgba(0,0,0,0.06));
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.cms-section.cms-owner-items .cms-owner-items__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--site-shadow-md, 0 4px 20px rgba(0,0,0,0.10));
  border-color: var(--site-primary-soft, var(--site-primary-color, #6366f1));
}

.cms-section.cms-owner-items .cms-owner-items__card-media {
  position: relative;
  background: var(--site-surface, #f1f5f9);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

/* Ticket Coliope LOT 1. Même motif que les vignettes « photos en ligne » et
   que la galerie de la fiche : le `cover` en 4/3 amputait plus de la moitié
   de la hauteur d'une photo portrait de téléphone. Le loueur croyait que sa
   photo avait été rognée à l'enregistrement et ne savait plus ce que verraient
   les visiteurs. La carte montre désormais la photo entière ; le fond neutre
   de `.cms-owner-items__card-media` remplit le reste de la boîte. */
.cms-section.cms-owner-items .cms-owner-items__card-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.cms-section.cms-owner-items .cms-owner-items__card-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--site-text-muted-2, #9ca3af);
}

.cms-section.cms-owner-items .cms-owner-items__card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 11px;
  font-weight: var(--site-font-weight-bold, 700);
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.cms-section.cms-owner-items .cms-owner-items__card-badge--pending_approval {
  background: color-mix(in srgb, var(--site-warning, #f59e0b) 18%, var(--site-background, #fff));
  color: var(--site-warning-strong, #92400e);
}

.cms-section.cms-owner-items .cms-owner-items__card-badge--approved {
  background: color-mix(in srgb, var(--site-success, #22c55e) 16%, var(--site-background, #fff));
  color: var(--site-success-strong, #166534);
}

.cms-section.cms-owner-items .cms-owner-items__card-badge--rejected {
  background: var(--site-danger-soft, rgba(239, 68, 68, 0.12));
  color: var(--site-danger-strong, #991B1B);
}

.cms-section.cms-owner-items .cms-owner-items__card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.cms-section.cms-owner-items .cms-owner-items__card-title {
  font-size: 15px;
  font-weight: var(--site-font-weight-brand, 800);
  color: var(--site-text-color, inherit);
}

.cms-section.cms-owner-items .cms-owner-items__card-category {
  font-size: 12px;
  font-weight: var(--site-font-weight-semibold, 600);
  color: var(--site-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.cms-section.cms-owner-items .cms-owner-items__card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
}

.cms-section.cms-owner-items .cms-owner-items__card-price {
  font-size: 15px;
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-primary-color, #6366f1);
}

.cms-section.cms-owner-items .cms-owner-items__card-price small {
  font-size: 11px;
  font-weight: var(--site-font-weight-semibold, 600);
  color: var(--site-text-muted, #6b7280);
  margin-left: 2px;
}

.cms-section.cms-owner-items .cms-owner-items__card-price--muted {
  color: var(--site-text-muted, #6b7280);
  font-weight: var(--site-font-weight-semibold, 600);
}

.cms-section.cms-owner-items .cms-owner-items__card-stock {
  font-size: 12px;
  font-weight: var(--site-font-weight-semibold, 600);
  color: var(--site-text-muted, #6b7280);
}

/* ── Empty state ──────────────────────────────────── */
.cms-section.cms-owner-items .cms-owner-items__empty {
  text-align: center;
  padding: 56px 24px;
  background: var(--site-background, #fff);
  border: 1px dashed var(--site-border, #e5e7eb);
  border-radius: var(--site-radius-lg, 16px);
}

.cms-section.cms-owner-items .cms-owner-items__empty-icon {
  margin: 0 auto 14px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--site-primary-soft, color-mix(in srgb, var(--site-primary-color) 10%, transparent));
  color: var(--site-primary-color, #6366f1);
}

.cms-section.cms-owner-items .cms-owner-items__empty-title {
  font-size: 18px;
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-text-color, inherit);
  margin: 0 0 6px;
}

.cms-section.cms-owner-items .cms-owner-items__empty-text {
  font-size: 14px;
  color: var(--site-text-muted, #6b7280);
  margin: 0 0 18px;
}

/* ── List: back link to dashboard ────────────────── */
.cms-section.cms-owner-items.cms-owner-items--list .cms-owner-items__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-primary-color, #6366f1);
  text-decoration: none;
  margin-bottom: 16px;
}

.cms-section.cms-owner-items.cms-owner-items--list .cms-owner-items__back:hover {
  color: var(--site-primary-dark, #4f46e5);
}

/* ── Detail mode ──────────────────────────────────── */
.cms-section.cms-owner-items.cms-owner-items--detail .cms-owner-items__back {
  margin-bottom: 16px;
}

.cms-section.cms-owner-items .cms-owner-items__back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-primary-color, #6366f1);
  text-decoration: none;
}

.cms-section.cms-owner-items .cms-owner-items__back-link:hover {
  text-decoration: underline;
}

.cms-section.cms-owner-items .cms-owner-items__detail-head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.cms-section.cms-owner-items .cms-owner-items__detail-title {
  font-size: clamp(22px, 2.5vw, 28px);
  line-height: 1.15;
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-text-color, inherit);
  letter-spacing: -0.3px;
  margin: 0;
}

.cms-section.cms-owner-items .cms-owner-items__badge {
  font-size: 11px;
  font-weight: var(--site-font-weight-bold, 700);
  padding: 5px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.cms-section.cms-owner-items .cms-owner-items__badge--pending_approval {
  background: color-mix(in srgb, var(--site-warning, #f59e0b) 16%, var(--site-background, #fff));
  color: var(--site-warning-strong, #92400e);
}

.cms-section.cms-owner-items .cms-owner-items__badge--approved {
  background: color-mix(in srgb, var(--site-success, #22c55e) 14%, var(--site-background, #fff));
  color: var(--site-success-strong, #166534);
}

.cms-section.cms-owner-items .cms-owner-items__badge--rejected {
  background: var(--site-danger-soft, rgba(239, 68, 68, 0.12));
  color: var(--site-danger-strong, #991B1B);
}

.cms-section.cms-owner-items .cms-owner-items__form-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 24px;
}

.cms-section.cms-owner-items .cms-owner-items__col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

/* ── Form blocks ──────────────────────────────────── */
.cms-section.cms-owner-items .cms-owner-items__card-block {
  background: var(--site-background, #fff);
  border: 1px solid var(--site-border, #e5e7eb);
  border-radius: var(--site-radius-lg, 16px);
  padding: 22px 22px 18px;
  margin-bottom: 18px;
}

.cms-section.cms-owner-items .cms-owner-items__card-block:last-child {
  margin-bottom: 0;
}

.cms-section.cms-owner-items .cms-owner-items__block-title {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: var(--site-font-weight-brand, 800);
  color: var(--site-text-color, inherit);
  /* Retour Jérôme 2026-05-29 — titres de section (Expédition, Visibilité…) en
     casse normale, plus de CAPITALES. */
  text-transform: none;
  letter-spacing: normal;
}

.cms-section.cms-owner-items .cms-owner-items__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.cms-section.cms-owner-items .cms-owner-items__field:last-child {
  margin-bottom: 0;
}

.cms-section.cms-owner-items .cms-owner-items__field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.cms-section.cms-owner-items .cms-owner-items__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: var(--site-font-weight-brand, 800);
  color: var(--site-text-muted, #6b7280);
}

.cms-section.cms-owner-items .cms-owner-items__label--required::after {
  content: ' *';
  color: var(--site-accent-color, var(--site-primary-color, #ef4444));
}

.cms-section.cms-owner-items .cms-owner-items__label-hint {
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--site-font-weight-semibold, 600);
  color: var(--site-text-muted-2, #9ca3af);
  margin-left: 6px;
}

.cms-section.cms-owner-items .cms-owner-items__input,
.cms-section.cms-owner-items .cms-owner-items__textarea,
.cms-section.cms-owner-items .cms-owner-items__select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--site-border, rgba(28, 28, 28, 0.1));
  border-radius: var(--site-radius-sm, 9px);
  font-family: inherit;
  font-size: 14px;
  background: var(--site-background, #ffffff);
  color: var(--site-text-color, inherit);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.cms-section.cms-owner-items .cms-owner-items__input:focus,
.cms-section.cms-owner-items .cms-owner-items__textarea:focus,
.cms-section.cms-owner-items .cms-owner-items__select:focus {
  outline: none;
  border-color: var(--site-primary-color, #6366f1);
  box-shadow: 0 0 0 3px var(--site-primary-soft, color-mix(in srgb, var(--site-primary-color) 15%, transparent));
}

.cms-section.cms-owner-items .cms-owner-items__input--compact {
  padding: 9px 11px;
  font-size: 13px;
}

/* Recette E13 — dropdown autocomplete ville (BAN) sous le champ code postal.
   EMMA-03 — réutilisé sur les barres de recherche accueil + catalogue :
   `.ban-ac__anchor` = wrapper générique position:relative qui ancre le
   dropdown `.ban-ac__results`, quel que soit le contexte (dépôt, hero,
   catalogue). Fichier CSS pur chargé globalement par layouts/public_site. */
.cms-owner-items__field--ac,
.ban-ac__anchor {
  position: relative;
}
.ban-ac__results {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: #fff;
  border: 1px solid var(--site-border, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
  overflow: hidden;
  max-height: 240px;
  overflow-y: auto;
}
.ban-ac__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  font-size: 13.5px;
  color: #111827;
  cursor: pointer;
}
.ban-ac__item:hover,
.ban-ac__item:focus {
  background: color-mix(in srgb, var(--site-primary-color, #0c9994) 8%, #fff);
  outline: none;
}

.cms-section.cms-owner-items .cms-owner-items__textarea {
  resize: vertical;
  min-height: 80px;
}

.cms-section.cms-owner-items .cms-owner-items__file {
  width: 100%;
  font-size: 13px;
  padding: 8px 0;
  color: var(--site-text-color, inherit);
  font-family: inherit;
}

/* G3 — Label natif d'`<input type="file">` ne se met pas à jour quand JS
   réécrit `input.files` via DataTransfer (limitation Chrome/Safari).
   On masque l'input et on rend un bouton + compteur pilotés par
   photo_preview_controller#_updateStatus. */
.cms-section.cms-owner-items .cms-owner-items__file--hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cms-section.cms-owner-items .cms-owner-items__file-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 6px 0 0;
}

.cms-section.cms-owner-items .cms-owner-items__file-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--site-primary-color, #0C9994);
  border-radius: 8px;
  background: transparent;
  color: var(--site-primary-color, #0C9994);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
  font-family: inherit;
}

.cms-section.cms-owner-items .cms-owner-items__file-trigger:hover,
.cms-section.cms-owner-items .cms-owner-items__file-trigger:focus-visible {
  background: var(--site-primary-color, #0C9994);
  color: #fff;
  outline: none;
}

.cms-section.cms-owner-items .cms-owner-items__file--hidden:focus + .cms-owner-items__file-control .cms-owner-items__file-trigger {
  box-shadow: 0 0 0 3px rgba(12, 153, 148, 0.25);
}

.cms-section.cms-owner-items .cms-owner-items__file-trigger i {
  font-size: 15px;
}

.cms-section.cms-owner-items .cms-owner-items__file-status {
  font-size: 13px;
  color: var(--site-text-muted, #6b7280);
}

.cms-section.cms-owner-items .cms-owner-items__file-status.is-active {
  color: var(--site-text-color, #1C1C1C);
  font-weight: 600;
}

/* Hint formats/taille + message d'erreur de validation upload (Coliope) */
.cms-section.cms-owner-items .cms-owner-items__file-hint {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--site-text-muted, #6b7280);
  text-transform: none;
  letter-spacing: normal;
}
.cms-section.cms-owner-items .cms-owner-items__file-error,
.cms-section.cms-owner-items .cms-owner-items__field-error {
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--site-danger, #dc2626);
  text-transform: none;
  letter-spacing: normal;
}
.cms-section.cms-owner-items .cms-owner-items__file-error[hidden],
.cms-section.cms-owner-items .cms-owner-items__field-error[hidden] { display: none; }

/* Prévisualisation des photos sélectionnées avant envoi (Coliope) —
   photo_preview_controller.js. Grille de vignettes avec bouton « × ». */
.cms-section.cms-owner-items .cms-owner-items__preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
  margin: 12px 0 0;
}
.cms-section.cms-owner-items .cms-owner-items__preview-grid[hidden] { display: none; }
.cms-section.cms-owner-items .cms-owner-items__preview-item {
  position: relative;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--site-border-color, #e5e7eb);
  background: var(--site-surface-2, #f9fafb);
}
/* Retour Emma 2026-08-20 — même motif que la fiche : le carré `cover`
   rognait sévèrement une photo portrait, et le loueur croyait que sa photo
   avait été recadrée à l'enregistrement. La vignette montre désormais la
   photo entière, telle qu'elle sera publiée. */
.cms-section.cms-owner-items .cms-owner-items__preview-img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--site-surface-2, #f9fafb);
}
/* Bloc « Photos en ligne » de la page d'édition d'annonce : réutilise la
   grille de vignettes de la prévisualisation d'upload. */
.cms-section.cms-owner-items .cms-owner-items__photos-order {
  margin: 0 0 16px;
}

.cms-section.cms-owner-items .cms-owner-items__photos-order .cms-owner-items__preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
  margin: 8px 0 0;
}

/* Réordonnancement des photos avant envoi (retour Emma 2026-08-20) :
   badge de couverture + flèches ‹ ›. Portée sous `.cms-owner-items`. */
.cms-section.cms-owner-items .cms-owner-items__preview-item[draggable='true'] {
  cursor: grab;
}

.cms-section.cms-owner-items .cms-owner-items__preview-cover {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--site-primary-color, #0f766e);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.cms-section.cms-owner-items .cms-owner-items__preview-moves {
  position: absolute;
  left: 4px;
  right: 4px;
  /* À mi-hauteur de la vignette : posées en bas, elles recouvraient le nom
     du fichier, seul repère pour savoir quelle photo on déplace. */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  gap: 4px;
}

.cms-section.cms-owner-items .cms-owner-items__preview-move {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.72);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.cms-section.cms-owner-items .cms-owner-items__preview-move:disabled {
  opacity: 0.3;
  cursor: default;
}

.cms-section.cms-owner-items .cms-owner-items__preview-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.72);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.cms-section.cms-owner-items .cms-owner-items__preview-remove:hover {
  background: var(--site-danger, #dc2626);
}
.cms-section.cms-owner-items .cms-owner-items__preview-name {
  margin: 0;
  padding: 4px 6px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--site-text-muted, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: none;
  letter-spacing: normal;
}

/* ─────────────────────────────────────────────────────────────────────────
   PR #3095 — Template de chargement Coliope (partial _loading.html.erb).
   Réutilisable partout dans les sites publics (CmsSite).
   ───────────────────────────────────────────────────────────────────────── */
.cms-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--site-primary-color, #0c9994);
}
.cms-loading--inline { padding: 24px 0; }
.cms-loading--overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
}
.cms-loading__spinner {
  display: inline-block;
  animation: cms-loading-spin 1.1s linear infinite;
  color: var(--site-primary-color, #0c9994);
}
.cms-loading__spinner svg { display: block; }
.cms-loading--sm .cms-loading__spinner { width: 24px; height: 24px; }
.cms-loading--md .cms-loading__spinner { width: 40px; height: 40px; }
.cms-loading--lg .cms-loading__spinner { width: 64px; height: 64px; }
.cms-loading__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--site-text-color, #1F2937);
  letter-spacing: 0.1px;
}
.cms-loading--lg .cms-loading__label { font-size: 15px; }
.cms-loading--sm .cms-loading__label { font-size: 12px; }

@keyframes cms-loading-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* PR #3083 — Toggle 3 modes Photo dans le modal de proposition d'objet */
.cms-section.cms-owner-items .cms-owner-items__field--photo-mode {
  grid-column: 1 / -1; /* prend toute la largeur même dans une grid */
}

.cms-section.cms-owner-items .cms-owner-items__photo-modes {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.cms-section.cms-owner-items .cms-owner-items__photo-mode {
  flex: 1 1 0;
  min-width: 120px;
  cursor: pointer;
}

.cms-section.cms-owner-items .cms-owner-items__photo-mode input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cms-section.cms-owner-items .cms-owner-items__photo-mode-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  background: var(--site-surface, #f1f5f9);
  border: 1px solid var(--site-border, #e5e7eb);
  border-radius: var(--site-radius-sm, 9px);
  font-size: 13px;
  font-weight: 600;
  color: var(--site-text-muted, #475569);
  transition: all 0.15s;
  text-align: center;
}

.cms-section.cms-owner-items .cms-owner-items__photo-mode-label i {
  font-size: 14px;
}

.cms-section.cms-owner-items .cms-owner-items__photo-mode input[type="radio"]:checked + .cms-owner-items__photo-mode-label {
  background: var(--site-primary-color, #0c9994);
  border-color: var(--site-primary-color, #0c9994);
  color: #fff;
}

.cms-section.cms-owner-items .cms-owner-items__photo-mode:hover .cms-owner-items__photo-mode-label {
  border-color: var(--site-primary-color, #0c9994);
}

.cms-section.cms-owner-items .cms-owner-items__photo-detail {
  margin-top: 12px;
}

.cms-section.cms-owner-items .cms-owner-items__photo-ai-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(12, 153, 148, 0.06), rgba(249, 153, 7, 0.05));
  border: 1px solid rgba(12, 153, 148, 0.20);
  border-radius: var(--site-radius-sm, 9px);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--site-text-color, #1F2937);
}

.cms-section.cms-owner-items .cms-owner-items__photo-ai-hint i {
  color: var(--site-primary-color, #0c9994);
  margin-top: 2px;
  flex-shrink: 0;
}

.cms-section.cms-owner-items .cms-owner-items__photo-ai-hint em {
  color: var(--site-primary-color, #0c9994);
  font-style: normal;
  font-weight: 700;
}

/* T15 — pastille « crédits d'images IA restants » */
.cms-section.cms-owner-items .cms-owner-items__ai-credit-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 7px 14px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  background: var(--site-primary-light, #f0fdfb);
  border: 1px solid color-mix(in srgb, var(--site-primary-color, #0c9994) 25%, transparent);
  color: var(--site-primary-dark, #105f5e);
}
.cms-section.cms-owner-items .cms-owner-items__ai-credit-pill--warn {
  background: #fff4f4;
  border-color: rgba(229, 72, 77, 0.3);
  color: #b3282c;
}

.cms-section.cms-owner-items .cms-owner-items__image-preview {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 4 / 3;
  border-radius: var(--site-radius-sm, 9px);
  overflow: hidden;
  background: var(--site-surface, #f1f5f9);
  margin-bottom: 8px;
}

/* Ticket Coliope LOT 1. L'aperçu de couverture recadrait lui aussi, si bien
   que le loueur ne pouvait vérifier sa photo nulle part dans son espace. */
.cms-section.cms-owner-items .cms-owner-items__image-preview-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ── Price grid ───────────────────────────────────── */
.cms-section.cms-owner-items .cms-owner-items__price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.cms-section.cms-owner-items .cms-owner-items__price-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cms-section.cms-owner-items .cms-owner-items__price-cell-label {
  font-size: 10px;
  font-weight: var(--site-font-weight-bold, 700);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--site-text-muted, #6b7280);
}

/* ── Toggle ───────────────────────────────────────── */
.cms-section.cms-owner-items .cms-owner-items__toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  cursor: pointer;
  border-top: 1px solid var(--site-border, #e5e7eb);
}

.cms-section.cms-owner-items .cms-owner-items__toggle:first-of-type {
  border-top: none;
  padding-top: 0;
}

/* PR #3095 — Badge "Disponible / Indisponible" sous le toggle Actif.
   Distingue l'état CONTRÔLÉ (toggle Actif) de l'état CALCULÉ (Disponible
   = stock libre vs réservations en cours). */
.cms-section.cms-owner-items .cms-owner-items__availability-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
}
.cms-section.cms-owner-items .cms-owner-items__availability-row[data-state="available"] {
  background: #ECFDF5;
  color: #065F46;
  border-left: 3px solid #10B981;
}
.cms-section.cms-owner-items .cms-owner-items__availability-row[data-state="unavailable"] {
  background: #FFFBEB;
  color: #78350F;
  border-left: 3px solid #F59E0B;
}
.cms-section.cms-owner-items .cms-owner-items__availability-icon {
  font-size: 16px;
  margin-top: 1px;
  flex-shrink: 0;
}
.cms-section.cms-owner-items .cms-owner-items__availability-row[data-state="available"] .cms-owner-items__availability-icon {
  color: #10B981;
}
.cms-section.cms-owner-items .cms-owner-items__availability-row[data-state="unavailable"] .cms-owner-items__availability-icon {
  color: #F59E0B;
}
.cms-section.cms-owner-items .cms-owner-items__availability-text strong {
  display: block;
  font-weight: 700;
  margin-bottom: 2px;
}
.cms-section.cms-owner-items .cms-owner-items__availability-text small {
  display: block;
  opacity: 0.85;
  font-size: 12px;
}

.cms-section.cms-owner-items .cms-owner-items__toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.cms-section.cms-owner-items .cms-owner-items__toggle-track {
  flex-shrink: 0;
  width: 38px;
  height: 22px;
  background: var(--site-border, #d1d5db);
  border-radius: 999px;
  position: relative;
  transition: background 0.15s;
  margin-top: 2px;
}

.cms-section.cms-owner-items .cms-owner-items__toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--site-background, #fff);
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  transition: transform 0.15s;
}

.cms-section.cms-owner-items .cms-owner-items__toggle-input:checked + .cms-owner-items__toggle-track {
  background: var(--site-primary-color, #6366f1);
}

.cms-section.cms-owner-items .cms-owner-items__toggle-input:checked + .cms-owner-items__toggle-track .cms-owner-items__toggle-thumb {
  transform: translateX(16px);
}

.cms-section.cms-owner-items .cms-owner-items__toggle-input:focus-visible + .cms-owner-items__toggle-track {
  box-shadow: 0 0 0 3px var(--site-primary-soft, color-mix(in srgb, var(--site-primary-color) 20%, transparent));
}

.cms-section.cms-owner-items .cms-owner-items__toggle-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: var(--site-text-color, inherit);
  /* Retour Jérôme 2026-05-29 — neutralise l'uppercase hérité du contexte parent
     sur les titres/desc des toggles (Remise en main propre, Expédition, Visible
     dans le catalogue, Actif…). Même pattern défensif que .cms-owner-items__consent. */
  text-transform: none;
  letter-spacing: normal;
}

.cms-section.cms-owner-items .cms-owner-items__toggle-text strong {
  font-weight: var(--site-font-weight-bold, 700);
}

.cms-section.cms-owner-items .cms-owner-items__toggle-text small {
  font-size: 12px;
  color: var(--site-text-muted, #6b7280);
}

/* ── Shipping section : poids/dims/valeur + transporteurs ─────────── */
.cms-section.cms-owner-items .cms-owner-items__block-desc {
  font-size: 13.5px;
  color: var(--site-text-muted, #6b7280);
  margin: -4px 0 14px;
}

.cms-section.cms-owner-items .cms-owner-items__field-row--3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.cms-section.cms-owner-items .cms-owner-items__shipping-fields {
  margin-top: 12px;
  padding: 16px;
  background: var(--site-surface, #f5f5f5);
  border-radius: var(--site-radius-sm, 9px);
}

.cms-section.cms-owner-items .cms-owner-items__shipping-fields[hidden] {
  display: none;
}

.cms-section.cms-owner-items .cms-owner-items__field-hint {
  font-size: 12.5px;
  color: var(--site-text-muted, #6b7280);
  margin-top: 6px;
}

.cms-section.cms-owner-items .cms-owner-items__carriers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 6px;
}

.cms-section.cms-owner-items .cms-owner-items__carrier-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--site-border, #e5e7eb);
  border-radius: var(--site-radius-sm, 9px);
  background: var(--site-background, #fff);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.cms-section.cms-owner-items .cms-owner-items__carrier-chip:hover {
  border-color: color-mix(in srgb, var(--site-primary-color, #0c9994) 30%, transparent);
  background: color-mix(in srgb, var(--site-primary-color, #0c9994) 6%, var(--site-background, #fff));
}

.cms-section.cms-owner-items .cms-owner-items__carrier-chip:has(input[type="checkbox"]:checked) {
  border-color: var(--site-primary-color, #0c9994);
  background: color-mix(in srgb, var(--site-primary-color, #0c9994) 10%, var(--site-background, #fff));
}

.cms-section.cms-owner-items .cms-owner-items__carrier-chip input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--site-primary-color, #0c9994);
  margin: 0;
}

/* Retour Jérôme 2026-05-31 — sur /location/mes-objets/:id, les noms
   « Colissimo / Mondial Relay / Chronopost / DHL Express » étaient
   invisibles : on voyait uniquement la checkbox et le prix. Cause :
   `__carrier-name` n'avait pas de `color` explicite et la cascade depuis
   le wrapper résolvait à une couleur ~ blanche dans le contexte custom
   domain (text-color hérité du body via une chaîne d'inheritance peu
   prévisible). On pose désormais `color` explicitement, en miroir de
   `__carrier-price` qui a toujours eu son `--site-text-muted`. Ajout
   aussi de `flex: 0 1 auto` + `min-width: 0` pour éviter qu'un nom
   long ne pousse le prix en débordement (problème observé sur
   « Mondial Relay »). */
.cms-section.cms-owner-items .cms-owner-items__carrier-name {
  font-weight: var(--site-font-weight-bold, 700);
  font-size: 13.5px;
  color: var(--site-text-color, #111827);
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cms-section.cms-owner-items .cms-owner-items__carrier-price {
  font-size: 12px;
  color: var(--site-text-muted, #6b7280);
  margin-left: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ── Form actions ─────────────────────────────────── */
.cms-section.cms-owner-items .cms-owner-items__form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* Backlog Emma 14.1 — Consentement CGU + politique sur le form "Proposer un objet"
   (modal). Style aligné sur la checkbox consentement de la page connexion. */
.cms-owner-items__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin: 16px 0;
  background: var(--site-surface, #fafafa);
  border-radius: var(--site-radius-sm, 9px);
  border: 1px solid var(--site-border, rgba(28, 28, 28, 0.10));
  font-size: 13px;
  line-height: 1.5;
  color: var(--site-text-color);
  cursor: pointer;
  /* Retour Jérôme 2026-05-27 — neutraliser tout text-transform/letter-spacing
     hérité du contexte parent. Sans ça, le texte "En proposant cet objet,
     j'accepte..." sort en CAPITALES (pattern défensif déjà appliqué ailleurs,
     cf. .cms-customer-account__pro-checkbox-text et .partner-form__redemption-option). */
  text-transform: none;
  letter-spacing: normal;
}
.cms-owner-items__consent-text {
  text-transform: none;
  letter-spacing: normal;
}
.cms-owner-items__consent-checkbox {
  flex-shrink: 0;
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--site-primary-color);
  cursor: pointer;
}
.cms-owner-items__consent-text {
  flex: 1;
}
.cms-owner-items__consent-link {
  color: var(--site-primary-color);
  text-decoration: underline;
  font-weight: var(--site-font-weight-semibold, 600);
}
.cms-owner-items__consent-link:hover {
  color: var(--site-primary-dark, var(--site-primary-color));
}

/* ── Sidebar ──────────────────────────────────────── */
.cms-section.cms-owner-items .cms-owner-items__status-card {
  border-radius: var(--site-radius-lg, 16px);
  padding: 18px 20px;
  border: 1px solid transparent;
}

.cms-section.cms-owner-items .cms-owner-items__status-card--success {
  background: color-mix(in srgb, var(--site-success, #22c55e) 10%, var(--site-background, #fff));
  border-color: color-mix(in srgb, var(--site-success, #22c55e) 25%, transparent);
}

.cms-section.cms-owner-items .cms-owner-items__status-card--warning {
  background: color-mix(in srgb, var(--site-warning, #f59e0b) 10%, var(--site-background, #fff));
  border-color: color-mix(in srgb, var(--site-warning, #f59e0b) 25%, transparent);
}

.cms-section.cms-owner-items .cms-owner-items__status-card--danger {
  background: var(--site-danger-soft, rgba(239, 68, 68, 0.08));
  border-color: var(--site-danger-border, rgba(239, 68, 68, 0.25));
}

.cms-section.cms-owner-items .cms-owner-items__status-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: var(--site-font-weight-brand, 800);
  color: var(--site-text-color, inherit);
}

.cms-section.cms-owner-items .cms-owner-items__status-card--success .cms-owner-items__status-title {
  color: var(--site-success-strong, #166534);
}

.cms-section.cms-owner-items .cms-owner-items__status-card--warning .cms-owner-items__status-title {
  color: var(--site-warning-strong, #92400e);
}

.cms-section.cms-owner-items .cms-owner-items__status-card--danger .cms-owner-items__status-title {
  color: var(--site-danger-strong, #991B1B);
}

.cms-section.cms-owner-items .cms-owner-items__status-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--site-text-color, inherit);
  margin: 0;
}

.cms-section.cms-owner-items .cms-owner-items__sidebar-card {
  background: var(--site-background, #fff);
  border: 1px solid var(--site-border, #e5e7eb);
  border-radius: var(--site-radius-lg, 16px);
  padding: 18px 20px;
}

.cms-section.cms-owner-items .cms-owner-items__sidebar-title {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: var(--site-font-weight-brand, 800);
  color: var(--site-text-color, inherit);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* Sujet #3 — Lot B : liste "Locataires à contacter" sur le détail objet. */
.cms-owner-renters {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cms-owner-renters__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  background: #F5F5F5;
  border: 1px solid var(--site-border, #E5E7EB);
}
.cms-owner-renters__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--site-primary-color, #0C9994);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}
.cms-owner-renters__info {
  flex: 1;
  min-width: 0;
}
.cms-owner-renters__name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--site-text-color, #1C1C1C);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cms-owner-renters__meta {
  display: block;
  font-size: 11px;
  color: var(--site-text-muted, #6B7280);
  margin-top: 2px;
  font-weight: 600;
}
.cms-owner-renters__status {
  font-weight: 700;
}
.cms-owner-renters__status--active,
.cms-owner-renters__status--extended { color: var(--site-accent-color, #F99907); }
.cms-owner-renters__status--confirmed { color: var(--site-primary-color, #0C9994); }
.cms-owner-renters__status--pending { color: #6B7280; }

.cms-owner-renters__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 11px;
  border-radius: 100px;
  border: none;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
  font-family: inherit;
  transition: background 0.15s, transform 0.12s;
}
.cms-owner-renters__btn--new {
  background: var(--site-primary-color, #0C9994);
  color: #fff;
}
.cms-owner-renters__btn--new:hover { background: #0A7A76; transform: translateY(-1px); color: #fff; }
.cms-owner-renters__btn--existing {
  background: #fff;
  color: var(--site-primary-color, #0C9994);
  border: 1.5px solid var(--site-primary-color, #0C9994);
}
.cms-owner-renters__btn--existing:hover {
  background: #F0FDFB;
  color: var(--site-primary-color, #0C9994);
}

/* button_to embarque le bouton dans un <form> ; on neutralise le styling
   par défaut pour qu'il s'aligne comme un lien. */
.cms-owner-renters__btn-form {
  margin: 0;
  padding: 0;
  display: contents;
}

.cms-section.cms-owner-items .cms-owner-items__sidebar-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.cms-section.cms-owner-items .cms-owner-items__sidebar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

.cms-section.cms-owner-items .cms-owner-items__sidebar-row-label {
  color: var(--site-text-muted, #6b7280);
}

.cms-section.cms-owner-items .cms-owner-items__sidebar-row-value {
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-text-color, inherit);
}

.cms-section.cms-owner-items .cms-owner-items__stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cms-section.cms-owner-items .cms-owner-items__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cms-section.cms-owner-items .cms-owner-items__stat-label {
  font-size: 12px;
  color: var(--site-text-muted, #6b7280);
}

.cms-section.cms-owner-items .cms-owner-items__stat-value {
  font-size: 18px;
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-primary-color, #6366f1);
}

/* ── Submit modal ─────────────────────────────────── */
.cms-section.cms-owner-items .cms-owner-items__submit-modal {
  width: 100%;
  max-width: 640px;
  /* Retour Emma 2026-08-20 — `vh` se calcule sur la fenêtre barre d'URL
     dépliée : sur mobile, la modale dépassait le viewport réel et le bas du
     formulaire sortait de l'écran. `dvh` suit la hauteur réellement visible.
     La ligne `vh` reste en repli pour les navigateurs sans `dvh`. */
  max-height: 92vh;
  max-height: 92dvh;
  padding: 0;
  border: none;
  border-radius: var(--site-radius-card, 14px);
  background: var(--site-background, #ffffff);
  box-shadow: var(--site-shadow-lg, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
  overflow: hidden;
  font-family: inherit;
  color: inherit;
}

.cms-section.cms-owner-items .cms-owner-items__submit-modal::backdrop {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}

.cms-section.cms-owner-items .cms-owner-items__submit-modal-form {
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  max-height: 92dvh;
}

.cms-section.cms-owner-items .cms-owner-items__submit-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--site-border, rgba(28, 28, 28, 0.1));
  flex-shrink: 0;
}

.cms-section.cms-owner-items .cms-owner-items__submit-modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 16px;
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-text-color, inherit);
}

.cms-section.cms-owner-items .cms-owner-items__submit-modal-title-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--site-primary-soft, color-mix(in srgb, var(--site-primary-color) 12%, transparent));
  color: var(--site-primary-color, currentColor);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cms-section.cms-owner-items .cms-owner-items__submit-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  color: var(--site-text-muted, inherit);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}

.cms-section.cms-owner-items .cms-owner-items__submit-modal-close:hover {
  background: var(--site-surface, rgba(0, 0, 0, 0.04));
  color: var(--site-text-color, inherit);
}

.cms-section.cms-owner-items .cms-owner-items__submit-modal-body {
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1 1 auto;
  /* Retour Emma 2026-08-20 — sans confinement, arriver en bas du formulaire
     transmettait la suite du geste à la page derrière la modale : le
     contenu de fond défilait, la modale se retrouvait décalée et il
     devenait impossible de remonter jusqu'au champ « Titre ». `contain`
     arrête le geste au bord du formulaire. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.cms-section.cms-owner-items .cms-owner-items__submit-modal-intro {
  font-size: 13px;
  color: var(--site-text-muted, #6b7280);
  margin: 0 0 16px;
}

/* Retour Emma 2026-06-21 — bloc d'erreurs en tête du form quand une
   soumission a été rejetée côté serveur (ex. prix sous le minimum
   plateforme). Reprend les codes couleurs du flash--danger global mais
   reste contenu dans la modale ré-ouverte. */
.cms-section.cms-owner-items .cms-owner-items__submit-modal-errors {
  background: var(--site-danger-soft, rgba(239, 68, 68, 0.08));
  color: var(--site-danger-strong, #991B1B);
  border: 1px solid var(--site-danger-border, rgba(239, 68, 68, 0.25));
  border-radius: var(--site-radius-md, 12px);
  padding: 12px 16px;
  margin: 0 0 18px;
  font-size: 13px;
}

.cms-section.cms-owner-items .cms-owner-items__submit-modal-errors-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-weight: var(--site-font-weight-semibold, 600);
}

.cms-section.cms-owner-items .cms-owner-items__submit-modal-errors-list {
  margin: 0;
  padding-left: 20px;
}

.cms-section.cms-owner-items .cms-owner-items__submit-modal-errors-list li + li {
  margin-top: 2px;
}

.cms-section.cms-owner-items .cms-owner-items__submit-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--site-border, rgba(28, 28, 28, 0.1));
  background: var(--site-surface, rgba(0, 0, 0, 0.02));
  flex-shrink: 0;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 900px) {
  .cms-section.cms-owner-items .cms-owner-items__form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .cms-section.cms-owner-items.cms-owner-items--list,
  .cms-section.cms-owner-items.cms-owner-items--detail {
    padding: 32px 16px 56px;
  }
  .cms-section.cms-owner-items .cms-owner-items__hero {
    padding: 18px 18px;
  }
  .cms-section.cms-owner-items .cms-owner-items__hero-actions {
    width: 100%;
  }
  .cms-section.cms-owner-items .cms-owner-items__hero-actions .cms-owner-items__btn {
    flex: 1 1 auto;
    justify-content: center;
  }
  .cms-section.cms-owner-items .cms-owner-items__field-row {
    grid-template-columns: 1fr;
  }
  .cms-section.cms-owner-items .cms-owner-items__submit-modal {
    max-width: 100%;
    width: calc(100% - 16px);
    max-height: 95vh;
    max-height: 95dvh;
    border-radius: var(--site-radius-sm, 9px);
  }

  .cms-section.cms-owner-items .cms-owner-items__submit-modal-form {
    max-height: 95vh;
    max-height: 95dvh;
  }
  .cms-section.cms-owner-items .cms-owner-items__submit-modal-head,
  .cms-section.cms-owner-items .cms-owner-items__submit-modal-body,
  .cms-section.cms-owner-items .cms-owner-items__submit-modal-footer {
    padding-left: 16px;
    padding-right: 16px;
  }
  .cms-section.cms-owner-items .cms-owner-items__submit-modal-footer {
    flex-direction: column-reverse;
  }
  .cms-section.cms-owner-items .cms-owner-items__submit-modal-footer .cms-owner-items__btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   RENTAL CONVERSATIONS (H.4)
   Builder-first, token-driven page rendered by
   public_sites/rental_conversations.html.erb (list)
   and public_sites/rental_conversation.html.erb (thread).
   Two modes gated by modifiers:
     .cms-rental-conversations--list   (Mes messages)
     .cms-rental-conversation          (single thread, chat layout)
   Specificity chained at 0-3-0 to beat cms_blocks/*.css defaults.
   ============================================================ */

/* ── List wrapper ──────────────────────────────────── */
.cms-section.cms-rental-conversations.cms-rental-conversations--list {
  font-family: var(--site-font-family, inherit);
  color: var(--site-text-color, inherit);
  background: var(--site-surface, var(--site-primary-light, #f5f7fb));
  padding: 56px 24px 72px;
  /* C.3 — Stretch the list container so 1-2 conversations don't leave a
     huge blank gap before the dark footer. min-height fallback covers
     viewports without --cms-navbar-height/--cms-footer-height tokens. */
  min-height: 70vh;
}

.cms-section.cms-rental-conversations .cms-rental-conversations__inner {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}

/* ── Hero ──────────────────────────────────────────── */
.cms-section.cms-rental-conversations .cms-rental-conversations__hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 26px;
  margin-bottom: 24px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--site-primary-color) 12%, transparent),
    color-mix(in srgb, var(--site-accent-color, var(--site-secondary-color, var(--site-primary-color))) 8%, transparent));
  border: 1px solid var(--site-primary-soft, var(--site-border));
  border-radius: var(--site-radius-lg, 16px);
}

.cms-section.cms-rental-conversations .cms-rental-conversations__hero-text {
  flex: 1 1 280px;
  min-width: 0;
}

.cms-section.cms-rental-conversations .cms-rental-conversations__hero-title {
  margin: 0 0 4px;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.18;
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-text-color, inherit);
  letter-spacing: -0.3px;
}

.cms-section.cms-rental-conversations .cms-rental-conversations__hero-subtitle {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--site-text-muted, #6b7280);
}

.cms-section.cms-rental-conversations .cms-rental-conversations__hero-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: var(--site-radius-sm, 9px);
  background: var(--site-background, #fff);
  border: 1px solid var(--site-primary-soft, var(--site-border, #e5e7eb));
  color: var(--site-primary-color, #6366f1);
  font-size: 13px;
  font-weight: var(--site-font-weight-semibold, 600);
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}

.cms-section.cms-rental-conversations .cms-rental-conversations__hero-back:hover {
  background: color-mix(in srgb, var(--site-primary-color) 8%, var(--site-background, #fff));
  transform: translateX(-1px);
}

/* Sujet #3 — Lot C : sous-onglets de filtrage par rôle. */
.cms-section.cms-rental-conversations .cms-rental-conversations__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  padding: 6px;
  background: var(--site-surface-color, #F5F5F5);
  border-radius: var(--site-radius-md, 14px);
}
.cms-section.cms-rental-conversations .cms-rental-conversations__tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-size: 13px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-text-muted, #6B7280);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.cms-section.cms-rental-conversations .cms-rental-conversations__tab:hover:not(.cms-rental-conversations__tab--active) {
  background: rgba(255, 255, 255, 0.6);
  color: var(--site-text-color, #1C1C1C);
}
.cms-section.cms-rental-conversations .cms-rental-conversations__tab--active {
  background: var(--site-background, #fff);
  color: var(--site-primary-color, #0C9994);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.cms-section.cms-rental-conversations .cms-rental-conversations__tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 100px;
  background: var(--site-border, #E5E7EB);
  color: var(--site-text-color, #1C1C1C);
  font-size: 11px;
  font-weight: 800;
}
.cms-section.cms-rental-conversations .cms-rental-conversations__tab--active .cms-rental-conversations__tab-count {
  background: var(--site-primary-color, #0C9994);
  color: #fff;
}

/* ── List ──────────────────────────────────────────── */
.cms-section.cms-rental-conversations .cms-rental-conversations__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.cms-section.cms-rental-conversations .cms-rental-conversations__item {
  margin: 0;
}

.cms-section.cms-rental-conversations .cms-rental-conversations__card {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--site-background, #fff);
  border: 1px solid var(--site-border, #e5e7eb);
  border-radius: var(--site-radius-md, 12px);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.cms-section.cms-rental-conversations .cms-rental-conversations__card:hover {
  border-color: var(--site-primary-color, #6366f1);
  box-shadow: var(--site-shadow-md, 0 6px 18px rgba(15, 23, 42, 0.08));
  transform: translateY(-1px);
}

.cms-section.cms-rental-conversations .cms-rental-conversations__card--unread {
  border-color: color-mix(in srgb, var(--site-primary-color) 60%, var(--site-border, #e5e7eb));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--site-primary-color) 14%, transparent);
}

/* ── Avatar ────────────────────────────────────────── */
.cms-section.cms-rental-conversations .cms-rental-conversations__avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: var(--site-font-weight-bold, 700);
  color: #fff;
  background: var(--site-primary-color, #6366f1);
  flex-shrink: 0;
}

.cms-section.cms-rental-conversations .cms-rental-conversations__avatar--p0 {
  background: var(--site-primary-color, #6366f1);
}

.cms-section.cms-rental-conversations .cms-rental-conversations__avatar--p1 {
  background: var(--site-accent-color, var(--site-secondary-color, #f57c00));
}

.cms-section.cms-rental-conversations .cms-rental-conversations__avatar--p2 {
  background: var(--site-success, #22c55e);
}

.cms-section.cms-rental-conversations .cms-rental-conversations__avatar--p3 {
  background: var(--site-secondary-color, var(--site-primary-color, #8b5cf6));
}

.cms-section.cms-rental-conversations .cms-rental-conversations__avatar--p4 {
  background: color-mix(in srgb, var(--site-primary-color) 65%, #1e293b);
}

/* ── Card body ────────────────────────────────────── */
.cms-section.cms-rental-conversations .cms-rental-conversations__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cms-section.cms-rental-conversations .cms-rental-conversations__row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.cms-section.cms-rental-conversations .cms-rental-conversations__name {
  font-size: 14px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-text-color, inherit);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cms-section.cms-rental-conversations .cms-rental-conversations__type {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: var(--site-font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.cms-section.cms-rental-conversations .cms-rental-conversations__type--peer {
  color: var(--site-primary-color, #6366f1);
  background: color-mix(in srgb, var(--site-primary-color) 10%, transparent);
  border-color: color-mix(in srgb, var(--site-primary-color) 25%, transparent);
}

.cms-section.cms-rental-conversations .cms-rental-conversations__type--support {
  color: var(--site-accent-color, var(--site-secondary-color, #b45309));
  background: color-mix(in srgb, var(--site-accent-color, var(--site-secondary-color, #f59e0b)) 12%, transparent);
  border-color: color-mix(in srgb, var(--site-accent-color, var(--site-secondary-color, #f59e0b)) 30%, transparent);
}

/* H.6.bis — Role badge: clarifies the *current user* role in each conversation */
.cms-section.cms-rental-conversations .cms-rental-conversations__role-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: var(--site-font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.cms-section.cms-rental-conversations .cms-rental-conversations__role-badge--renter {
  color: var(--site-primary-color, #0c9994);
  background: color-mix(in srgb, var(--site-primary-color, #0c9994) 10%, transparent);
  border-color: color-mix(in srgb, var(--site-primary-color, #0c9994) 25%, transparent);
}
.cms-section.cms-rental-conversations .cms-rental-conversations__role-badge--owner {
  color: var(--site-accent-color, #b45309);
  background: color-mix(in srgb, var(--site-accent-color, #f59e0b) 12%, transparent);
  border-color: color-mix(in srgb, var(--site-accent-color, #f59e0b) 30%, transparent);
}
.cms-section.cms-rental-conversations .cms-rental-conversations__role-badge--admin {
  color: var(--site-text-muted, #6b7280);
  background: var(--site-surface, #f5f5f5);
  border-color: var(--site-border, #e5e7eb);
}
.cms-section.cms-rental-conversations .cms-rental-conversations__role-badge--member {
  color: var(--site-text-muted, #6b7280);
  background: var(--site-surface, #f5f5f5);
  border-color: var(--site-border, #e5e7eb);
}

.cms-section.cms-rental-conversations .cms-rental-conversations__sub {
  font-size: 12px;
  color: var(--site-text-muted, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cms-section.cms-rental-conversations .cms-rental-conversations__sub-sep {
  color: var(--site-border, #cbd5e1);
}

.cms-section.cms-rental-conversations .cms-rental-conversations__preview {
  font-size: 13px;
  line-height: 1.4;
  color: var(--site-text-muted, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cms-section.cms-rental-conversations .cms-rental-conversations__preview-from {
  color: var(--site-text-color, inherit);
  font-weight: var(--site-font-weight-semibold, 600);
}

.cms-section.cms-rental-conversations .cms-rental-conversations__preview-system {
  font-style: italic;
}

.cms-section.cms-rental-conversations .cms-rental-conversations__preview-empty {
  font-style: italic;
  opacity: 0.7;
}

/* ── Card meta (right side) ───────────────────────── */
.cms-section.cms-rental-conversations .cms-rental-conversations__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.cms-section.cms-rental-conversations .cms-rental-conversations__time {
  font-size: 11px;
  color: var(--site-text-muted, #94a3b8);
  white-space: nowrap;
}

.cms-section.cms-rental-conversations .cms-rental-conversations__unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--site-primary-color, #6366f1);
  color: #fff;
  font-size: 11px;
  font-weight: var(--site-font-weight-bold, 700);
}

/* ── Empty state ──────────────────────────────────── */
.cms-section.cms-rental-conversations .cms-rental-conversations__empty {
  text-align: center;
  padding: 64px 24px;
  background: var(--site-background, #fff);
  border: 1px dashed var(--site-border, #e5e7eb);
  border-radius: var(--site-radius-lg, 16px);
  color: var(--site-text-muted, #6b7280);
}

.cms-section.cms-rental-conversations .cms-rental-conversations__empty-icon {
  color: var(--site-primary-color, #6366f1);
  opacity: 0.55;
  margin-bottom: 14px;
}

.cms-section.cms-rental-conversations .cms-rental-conversations__empty-title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-text-color, inherit);
}

.cms-section.cms-rental-conversations .cms-rental-conversations__empty-text {
  margin: 0 auto 18px;
  max-width: 380px;
  font-size: 14px;
  line-height: 1.5;
}

.cms-section.cms-rental-conversations .cms-rental-conversations__empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--site-radius-sm, 9px);
  background: var(--site-primary-color, #6366f1);
  color: #fff;
  font-size: 14px;
  font-weight: var(--site-font-weight-semibold, 600);
  text-decoration: none;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.cms-section.cms-rental-conversations .cms-rental-conversations__empty-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* ── Pagination "Voir plus" (Option B) ─────────────── */
.cms-section.cms-rental-conversations .cms-rental-conversations__loadmore {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}
.cms-section.cms-rental-conversations .cms-rental-conversations__loadmore-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border: 1px solid var(--site-border-color, #e5e7eb);
  border-radius: var(--site-radius-sm, 9px);
  background: var(--site-background, #fff);
  color: var(--site-text-color, #111827);
  font-size: 14px;
  font-weight: var(--site-font-weight-semibold, 600);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cms-section.cms-rental-conversations .cms-rental-conversations__loadmore-btn:hover {
  background: var(--site-surface-muted, #f9fafb);
  border-color: var(--site-primary-color, #6366f1);
}

/* ── Thread layout ─────────────────────────────────── */
.cms-section.cms-rental-conversation {
  font-family: var(--site-font-family, inherit);
  color: var(--site-text-color, inherit);
  background: var(--site-surface, var(--site-primary-light, #f5f7fb));
  padding: 24px;
}

.cms-section.cms-rental-conversation .cms-rental-conversation__shell {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 140px);
  min-height: 480px;
  background: var(--site-background, #fff);
  border: 1px solid var(--site-border, #e5e7eb);
  border-radius: var(--site-radius-lg, 16px);
  overflow: hidden;
  box-shadow: var(--site-shadow-sm, 0 2px 8px rgba(15, 23, 42, 0.04));
}

/* ── Thread header ─────────────────────────────────── */
.cms-section.cms-rental-conversation .cms-rental-conversation__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--site-background, #fff);
  border-bottom: 1px solid var(--site-border, #e5e7eb);
  flex-shrink: 0;
}

.cms-section.cms-rental-conversation .cms-rental-conversation__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--site-radius-sm, 9px);
  background: var(--site-surface, #f3f4f6);
  color: var(--site-text-muted, #6b7280);
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.cms-section.cms-rental-conversation .cms-rental-conversation__back:hover {
  background: color-mix(in srgb, var(--site-primary-color) 10%, var(--site-surface, #f3f4f6));
  color: var(--site-primary-color, #6366f1);
}

.cms-section.cms-rental-conversation .cms-rental-conversation__avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: var(--site-font-weight-bold, 700);
  color: #fff;
  background: var(--site-primary-color, #6366f1);
  flex-shrink: 0;
}

.cms-section.cms-rental-conversation .cms-rental-conversation__avatar--p0 { background: var(--site-primary-color, #6366f1); }
.cms-section.cms-rental-conversation .cms-rental-conversation__avatar--p1 { background: var(--site-accent-color, var(--site-secondary-color, #f57c00)); }
.cms-section.cms-rental-conversation .cms-rental-conversation__avatar--p2 { background: var(--site-success, #22c55e); }
.cms-section.cms-rental-conversation .cms-rental-conversation__avatar--p3 { background: var(--site-secondary-color, var(--site-primary-color, #8b5cf6)); }
.cms-section.cms-rental-conversation .cms-rental-conversation__avatar--p4 { background: color-mix(in srgb, var(--site-primary-color) 65%, #1e293b); }

.cms-section.cms-rental-conversation .cms-rental-conversation__header-info {
  flex: 1;
  min-width: 0;
}

.cms-section.cms-rental-conversation .cms-rental-conversation__header-name {
  font-size: 14px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-text-color, inherit);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cms-section.cms-rental-conversation .cms-rental-conversation__header-sub {
  font-size: 12px;
  color: var(--site-text-muted, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cms-section.cms-rental-conversation .cms-rental-conversation__resa-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: var(--site-font-weight-semibold, 600);
  color: var(--site-primary-color, #6366f1);
  background: color-mix(in srgb, var(--site-primary-color) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--site-primary-color) 22%, transparent);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.cms-section.cms-rental-conversation .cms-rental-conversation__resa-link:hover {
  background: color-mix(in srgb, var(--site-primary-color) 16%, transparent);
}

/* ── Messages list ─────────────────────────────────── */
.cms-section.cms-rental-conversation .cms-rental-conversation__messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px 18px 8px;
  background: color-mix(in srgb, var(--site-surface, #f5f7fb) 70%, var(--site-background, #fff));
  display: flex;
  flex-direction: column;
  gap: 6px;
  scroll-behavior: smooth;
}

.cms-section.cms-rental-conversation .cms-rental-conversation__date-divider {
  align-self: center;
  margin: 12px 0 4px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: var(--site-font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--site-text-muted, #6b7280);
  background: var(--site-background, #fff);
  border: 1px solid var(--site-border, #e5e7eb);
  border-radius: 999px;
}

.cms-section.cms-rental-conversation .cms-rental-conversation__message {
  max-width: 78%;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cms-section.cms-rental-conversation .cms-rental-conversation__message--system {
  align-self: center;
  max-width: 90%;
  text-align: center;
}

.cms-section.cms-rental-conversation .cms-rental-conversation__message--mine {
  align-self: flex-end;
  align-items: flex-end;
}

.cms-section.cms-rental-conversation .cms-rental-conversation__message--theirs {
  align-self: flex-start;
  align-items: flex-start;
}

.cms-section.cms-rental-conversation .cms-rental-conversation__sender {
  font-size: 11px;
  font-weight: var(--site-font-weight-semibold, 600);
  color: var(--site-text-muted, #94a3b8);
  margin: 0 10px;
}

.cms-section.cms-rental-conversation .cms-rental-conversation__bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.45;
  word-break: break-word;
  white-space: pre-wrap;
}

.cms-section.cms-rental-conversation .cms-rental-conversation__message--mine .cms-rental-conversation__bubble {
  background: var(--site-primary-color, #6366f1);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.cms-section.cms-rental-conversation .cms-rental-conversation__message--theirs .cms-rental-conversation__bubble {
  background: var(--site-background, #fff);
  color: var(--site-text-color, inherit);
  border: 1px solid var(--site-border, #e5e7eb);
  border-bottom-left-radius: 4px;
}

/* Sprint C2 Centre de modération Coliope (2026-06-02) — bouton "Signaler" sur
   les messages des autres. Discret (couleur muted) mais accessible (titre +
   aria-label). État "Signalé" en vert disabled. */
.cms-section.cms-rental-conversation .cms-rental-conversation__flag {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--site-text-muted, #94a3b8);
  background: transparent;
  border: 1px solid transparent;
  padding: 2px 8px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  opacity: 0.55;
  transition: all 0.15s ease;
}
.cms-section.cms-rental-conversation .cms-rental-conversation__flag:hover {
  opacity: 1;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.25);
}
.cms-section.cms-rental-conversation .cms-rental-conversation__flag:disabled,
.cms-section.cms-rental-conversation .cms-rental-conversation__flag--done {
  cursor: default;
  opacity: 0.9;
  color: #16a34a;
  background: rgba(22, 163, 74, 0.10);
  border-color: rgba(22, 163, 74, 0.25);
}

.cms-section.cms-rental-conversation .cms-rental-conversation__message--system .cms-rental-conversation__bubble {
  display: inline-block;
  background: color-mix(in srgb, var(--site-primary-color) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--site-primary-color) 18%, transparent);
  color: var(--site-text-muted, #475569);
  font-size: 12px;
  font-style: italic;
  border-radius: 999px;
  padding: 6px 14px;
}

.cms-section.cms-rental-conversation .cms-rental-conversation__time {
  font-size: 10px;
  color: var(--site-text-muted, #94a3b8);
  margin: 0 10px;
}

/* ── Form ──────────────────────────────────────────── */
.cms-section.cms-rental-conversation .cms-rental-conversation__form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 16px;
  background: var(--site-background, #fff);
  border-top: 1px solid var(--site-border, #e5e7eb);
  flex-shrink: 0;
}

.cms-section.cms-rental-conversation .cms-rental-conversation__textarea {
  flex: 1;
  min-height: 42px;
  max-height: 140px;
  padding: 11px 16px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
  color: var(--site-text-color, inherit);
  background: var(--site-surface, #f3f4f6);
  border: 1px solid var(--site-border, #e5e7eb);
  border-radius: 22px;
  resize: none;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cms-section.cms-rental-conversation .cms-rental-conversation__textarea:focus {
  border-color: var(--site-primary-color, #6366f1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-primary-color) 18%, transparent);
  background: var(--site-background, #fff);
}

.cms-section.cms-rental-conversation .cms-rental-conversation__submit-btn {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--site-primary-color, #6366f1);
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease;
}

.cms-section.cms-rental-conversation .cms-rental-conversation__submit-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.cms-section.cms-rental-conversation .cms-rental-conversation__submit-btn[disabled] {
  background: var(--site-text-muted, #94a3b8);
  cursor: not-allowed;
  transform: none;
  filter: none;
}

.cms-section.cms-rental-conversation .cms-rental-conversation__locked {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  background: var(--site-surface, #f3f4f6);
  border-top: 1px solid var(--site-border, #e5e7eb);
  font-size: 13px;
  color: var(--site-text-muted, #6b7280);
  flex-shrink: 0;
}

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 720px) {
  .cms-section.cms-rental-conversations.cms-rental-conversations--list {
    padding: 32px 14px 56px;
  }

  .cms-section.cms-rental-conversations .cms-rental-conversations__hero {
    padding: 18px 18px;
  }

  .cms-section.cms-rental-conversations .cms-rental-conversations__hero-back {
    align-self: flex-start;
  }

  .cms-section.cms-rental-conversations .cms-rental-conversations__card {
    grid-template-columns: 40px 1fr;
    gap: 12px;
    padding: 12px 14px;
  }

  .cms-section.cms-rental-conversations .cms-rental-conversations__avatar {
    width: 40px;
    height: 40px;
    font-size: 14px;
    border-radius: 10px;
  }

  .cms-section.cms-rental-conversations .cms-rental-conversations__meta {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
  }

  .cms-section.cms-rental-conversation {
    padding: 0;
  }

  .cms-section.cms-rental-conversation .cms-rental-conversation__shell {
    height: calc(100vh - 64px);
    min-height: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .cms-section.cms-rental-conversation .cms-rental-conversation__resa-link {
    padding: 6px 10px;
    font-size: 11px;
  }

  .cms-section.cms-rental-conversation .cms-rental-conversation__message {
    max-width: 88%;
  }

  .cms-section.cms-rental-conversation .cms-rental-conversation__form {
    padding: 10px 12px;
    padding-bottom: 10px;
  }
}



/* ============================================================
   LOYALTY (H.5)
   Builder-first, token-driven page rendered by
   public_sites/loyalty.html.erb. Hero, balance + progress,
   rewards catalogue, tier ladder, points history. All colours
   sourced from --site-* tokens. Specificity chained at 0-3-0
   to beat cms_blocks/*.css defaults.
   ============================================================ */

/* ── Wrapper ──────────────────────────────────────── */
.cms-section.cms-loyalty {
  font-family: var(--site-font-family, inherit);
  color: var(--site-text-color, inherit);
  background: var(--site-surface, var(--site-primary-light, #f5f7fb));
  padding: 56px 24px 72px;
}

.cms-section.cms-loyalty .cms-loyalty__inner {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ── Back link ────────────────────────────────────── */
.cms-section.cms-loyalty .cms-loyalty__back {
  margin-bottom: -8px;
}

.cms-section.cms-loyalty .cms-loyalty__back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-primary-color, currentColor);
  text-decoration: none;
}

.cms-section.cms-loyalty .cms-loyalty__back-link:hover {
  opacity: 0.8;
}

/* ── Hero ─────────────────────────────────────────── */
.cms-section.cms-loyalty .cms-loyalty__hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 20px 4px;
}

.cms-section.cms-loyalty .cms-loyalty__hero-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--site-primary-color, currentColor);
  color: var(--site-primary-contrast, #ffffff);
}

.cms-section.cms-loyalty .cms-loyalty__hero-title {
  margin: 0;
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: var(--site-font-weight-brand, 800);
  color: var(--site-heading-color, var(--site-text-color, inherit));
}

.cms-section.cms-loyalty .cms-loyalty__hero-subtitle {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--site-text-muted, #64748b);
  max-width: 580px;
}

/* ── Program rules banner ─────────────────────────── */
.cms-section.cms-loyalty .cms-loyalty__rules {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  padding: 18px 22px;
  background: var(--site-background, #ffffff);
  border: 1px solid var(--site-border, rgba(28, 28, 28, 0.08));
  border-radius: var(--site-radius-card, 14px);
  box-shadow: var(--site-shadow-soft, 0 4px 14px rgba(15, 23, 42, 0.06));
}

.cms-section.cms-loyalty .cms-loyalty__rule {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 120px;
}

.cms-section.cms-loyalty .cms-loyalty__rule-value {
  font-size: 20px;
  font-weight: var(--site-font-weight-brand, 800);
  color: var(--site-primary-color, currentColor);
}

.cms-section.cms-loyalty .cms-loyalty__rule-label {
  font-size: 12px;
  font-weight: var(--site-font-weight-semibold, 600);
  color: var(--site-text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* ── Empty / call-to-action states ────────────────── */
.cms-section.cms-loyalty .cms-loyalty__empty {
  background: var(--site-background, #ffffff);
  border: 1px solid var(--site-border, rgba(28, 28, 28, 0.08));
  border-radius: var(--site-radius-card, 14px);
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.cms-section.cms-loyalty .cms-loyalty__empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--site-primary-light, rgba(15, 23, 42, 0.05));
  color: var(--site-primary-color, currentColor);
  margin-bottom: 4px;
}

.cms-section.cms-loyalty .cms-loyalty__empty-title {
  margin: 0;
  font-size: 18px;
  font-weight: var(--site-font-weight-brand, 800);
  color: var(--site-heading-color, var(--site-text-color, inherit));
}

.cms-section.cms-loyalty .cms-loyalty__empty-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--site-text-muted, #64748b);
  max-width: 520px;
}

.cms-section.cms-loyalty .cms-loyalty__empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 22px;
  background: var(--site-primary-color, currentColor);
  color: var(--site-primary-contrast, #ffffff);
  border-radius: var(--site-radius-pill, 999px);
  font-size: 14px;
  font-weight: var(--site-font-weight-semibold, 600);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.cms-section.cms-loyalty .cms-loyalty__empty-cta:hover {
  opacity: 0.88;
  color: var(--site-primary-contrast, #ffffff);
}

/* ── Overview (balance + tier progress) ───────────── */
.cms-section.cms-loyalty .cms-loyalty__overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 20px;
}

.cms-section.cms-loyalty .cms-loyalty__balance,
.cms-section.cms-loyalty .cms-loyalty__tier-info {
  background: var(--site-background, #ffffff);
  border: 1px solid var(--site-border, rgba(28, 28, 28, 0.08));
  border-radius: var(--site-radius-card, 14px);
  padding: 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--site-shadow-soft, 0 4px 14px rgba(15, 23, 42, 0.06));
}

.cms-section.cms-loyalty .cms-loyalty__balance {
  align-items: center;
  text-align: center;
  justify-content: center;
}

.cms-section.cms-loyalty .cms-loyalty__balance-value {
  font-size: clamp(36px, 5vw, 44px);
  line-height: 1;
  font-weight: var(--site-font-weight-brand, 800);
  color: var(--site-primary-color, currentColor);
}

.cms-section.cms-loyalty .cms-loyalty__balance-label {
  font-size: 12px;
  font-weight: var(--site-font-weight-bold, 700);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--site-text-muted, #64748b);
}

.cms-section.cms-loyalty .cms-loyalty__balance-equiv {
  font-size: 13px;
  font-weight: var(--site-font-weight-semibold, 600);
  color: var(--site-primary-color, currentColor);
}

.cms-section.cms-loyalty .cms-loyalty__balance-meta {
  margin-top: 8px;
  font-size: 12px;
  color: var(--site-text-muted, #64748b);
}

/* ── Tier card right column ───────────────────────── */
.cms-section.cms-loyalty .cms-loyalty__tier-info {
  gap: 12px;
}

.cms-section.cms-loyalty .cms-loyalty__tier-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--site-radius-pill, 999px);
  background: var(--site-primary-color, currentColor);
  color: var(--site-primary-contrast, #ffffff);
  font-size: 13px;
  font-weight: var(--site-font-weight-bold, 700);
}

.cms-section.cms-loyalty .cms-loyalty__tier-badge--none {
  background: var(--site-surface, #f1f5f9);
  color: var(--site-text-muted, #64748b);
}

.cms-section.cms-loyalty .cms-loyalty__tier-multiplier {
  font-size: 14px;
  font-weight: var(--site-font-weight-semibold, 600);
  color: var(--site-text-color, inherit);
}

.cms-section.cms-loyalty .cms-loyalty__tier-perk {
  font-size: 13px;
  color: var(--site-text-muted, #64748b);
}

/* ── Progress bar ─────────────────────────────────── */
.cms-section.cms-loyalty .cms-loyalty__progress {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cms-section.cms-loyalty .cms-loyalty__progress-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.cms-section.cms-loyalty .cms-loyalty__progress-label {
  color: var(--site-text-color, inherit);
}

.cms-section.cms-loyalty .cms-loyalty__progress-value {
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-primary-color, currentColor);
}

.cms-section.cms-loyalty .cms-loyalty__progress-bar {
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: var(--site-surface, rgba(15, 23, 42, 0.08));
  overflow: hidden;
}

.cms-section.cms-loyalty .cms-loyalty__progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--cms-loyalty-progress, 0%);
  background: var(--site-primary-color, currentColor);
  border-radius: inherit;
  transition: width 0.5s ease;
}

.cms-section.cms-loyalty .cms-loyalty__progress-meta {
  font-size: 12px;
  color: var(--site-text-muted, #64748b);
}

/* ── Group container (titled section) ─────────────── */
.cms-section.cms-loyalty .cms-loyalty__group {
  background: var(--site-background, #ffffff);
  border: 1px solid var(--site-border, rgba(28, 28, 28, 0.08));
  border-radius: var(--site-radius-card, 14px);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--site-shadow-soft, 0 4px 14px rgba(15, 23, 42, 0.06));
}

.cms-section.cms-loyalty .cms-loyalty__group-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cms-section.cms-loyalty .cms-loyalty__group-title {
  margin: 0;
  font-size: 18px;
  font-weight: var(--site-font-weight-brand, 800);
  color: var(--site-heading-color, var(--site-text-color, inherit));
}

.cms-section.cms-loyalty .cms-loyalty__group-subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--site-text-muted, #64748b);
}

/* ── My coupons ───────────────────────────────────── */
.cms-section.cms-loyalty .cms-loyalty__coupons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cms-section.cms-loyalty .cms-loyalty__coupon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  background: var(--site-surface, #f8fafc);
  border: 1px solid var(--site-border, rgba(28, 28, 28, 0.08));
  border-radius: var(--site-radius-md, 10px);
}

.cms-section.cms-loyalty .cms-loyalty__coupon-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cms-section.cms-loyalty .cms-loyalty__coupon-name {
  font-size: 14px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-text-color, inherit);
}

.cms-section.cms-loyalty .cms-loyalty__coupon-meta {
  font-size: 12px;
  color: var(--site-text-muted, #64748b);
}

.cms-section.cms-loyalty .cms-loyalty__coupon-code {
  padding: 8px 14px;
  border-radius: var(--site-radius-md, 10px);
  background: var(--site-background, #ffffff);
  border: 1px dashed var(--site-primary-color, currentColor);
  color: var(--site-primary-color, currentColor);
  font-family: var(--site-font-family-mono, ui-monospace, "SF Mono", monospace);
  font-size: 14px;
  font-weight: var(--site-font-weight-bold, 700);
  letter-spacing: 1px;
}

.cms-section.cms-loyalty .cms-loyalty__coupon-state {
  padding: 4px 10px;
  border-radius: var(--site-radius-pill, 999px);
  font-size: 12px;
  font-weight: var(--site-font-weight-bold, 700);
  background: var(--site-surface, #f1f5f9);
  color: var(--site-text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* ── Rewards grid ─────────────────────────────────── */
.cms-section.cms-loyalty .cms-loyalty__rewards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.cms-section.cms-loyalty .cms-loyalty__reward-card {
  display: flex;
  flex-direction: column;
  background: var(--site-surface, #f8fafc);
  border: 1px solid var(--site-border, rgba(28, 28, 28, 0.08));
  border-radius: var(--site-radius-card, 14px);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cms-section.cms-loyalty .cms-loyalty__reward-card--available {
  border-color: var(--site-primary-color, currentColor);
}

.cms-section.cms-loyalty .cms-loyalty__reward-card--available:hover {
  transform: translateY(-2px);
  box-shadow: var(--site-shadow-medium, 0 10px 24px rgba(15, 23, 42, 0.08));
}

.cms-section.cms-loyalty .cms-loyalty__reward-card--locked {
  opacity: 0.7;
}

.cms-section.cms-loyalty .cms-loyalty__reward-media {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--site-background, #ffffff);
  border-bottom: 1px solid var(--site-border, rgba(28, 28, 28, 0.08));
}

.cms-section.cms-loyalty .cms-loyalty__reward-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.cms-section.cms-loyalty .cms-loyalty__reward-fallback {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--site-primary-light, rgba(15, 23, 42, 0.05));
  color: var(--site-primary-color, currentColor);
}

.cms-section.cms-loyalty .cms-loyalty__reward-body {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.cms-section.cms-loyalty .cms-loyalty__reward-name {
  margin: 0;
  font-size: 15px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-heading-color, var(--site-text-color, inherit));
}

.cms-section.cms-loyalty .cms-loyalty__reward-description {
  margin: 0;
  font-size: 13px;
  color: var(--site-text-muted, #64748b);
  line-height: 1.5;
}

.cms-section.cms-loyalty .cms-loyalty__reward-value {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: var(--site-radius-pill, 999px);
  background: var(--site-background, #ffffff);
  border: 1px solid var(--site-border, rgba(28, 28, 28, 0.08));
  font-size: 12px;
  font-weight: var(--site-font-weight-semibold, 600);
  color: var(--site-text-color, inherit);
}

.cms-section.cms-loyalty .cms-loyalty__reward-cost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-primary-color, currentColor);
}

.cms-section.cms-loyalty .cms-loyalty__redeem-form {
  margin-top: auto;
}

.cms-section.cms-loyalty .cms-loyalty__redeem-btn {
  appearance: none;
  border: 0;
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 16px;
  border-radius: var(--site-radius-pill, 999px);
  background: var(--site-primary-color, currentColor);
  color: var(--site-primary-contrast, #ffffff);
  font-size: 13px;
  font-weight: var(--site-font-weight-bold, 700);
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.1s ease;
  text-decoration: none;
}

.cms-section.cms-loyalty .cms-loyalty__redeem-btn:hover {
  opacity: 0.9;
  color: var(--site-primary-contrast, #ffffff);
}

.cms-section.cms-loyalty .cms-loyalty__redeem-btn:active {
  transform: translateY(1px);
}

.cms-section.cms-loyalty .cms-loyalty__redeem-btn--ghost {
  background: transparent;
  border: 1px solid var(--site-primary-color, currentColor);
  color: var(--site-primary-color, currentColor);
}

.cms-section.cms-loyalty .cms-loyalty__redeem-btn--ghost:hover {
  background: var(--site-primary-light, rgba(15, 23, 42, 0.05));
  color: var(--site-primary-color, currentColor);
}

.cms-section.cms-loyalty .cms-loyalty__redeem-btn--disabled {
  background: var(--site-surface, #e5e7eb);
  color: var(--site-text-muted, #64748b);
  cursor: not-allowed;
}

.cms-section.cms-loyalty .cms-loyalty__redeem-btn--disabled:hover {
  opacity: 1;
  color: var(--site-text-muted, #64748b);
}

/* ── Tier ladder ──────────────────────────────────── */
.cms-section.cms-loyalty .cms-loyalty__tiers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.cms-section.cms-loyalty .cms-loyalty__tier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px 18px 20px;
  background: var(--site-surface, #f8fafc);
  border: 1px solid var(--site-border, rgba(28, 28, 28, 0.08));
  border-radius: var(--site-radius-card, 14px);
}

.cms-section.cms-loyalty .cms-loyalty__tier-card--current {
  border-color: var(--cms-loyalty-tier-color, var(--site-primary-color, currentColor));
  border-width: 2px;
  background: var(--site-background, #ffffff);
  box-shadow: var(--site-shadow-soft, 0 4px 14px rgba(15, 23, 42, 0.06));
}

.cms-section.cms-loyalty .cms-loyalty__tier-current-flag {
  position: absolute;
  top: -10px;
  left: 16px;
  padding: 3px 10px;
  border-radius: var(--site-radius-pill, 999px);
  background: var(--cms-loyalty-tier-color, var(--site-primary-color, currentColor));
  color: var(--site-primary-contrast, #ffffff);
  font-size: 11px;
  font-weight: var(--site-font-weight-bold, 700);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cms-section.cms-loyalty .cms-loyalty__tier-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cms-loyalty-tier-color, var(--site-primary-color, currentColor));
  color: var(--site-primary-contrast, #ffffff);
}

.cms-section.cms-loyalty .cms-loyalty__tier-name {
  margin: 0;
  font-size: 16px;
  font-weight: var(--site-font-weight-brand, 800);
  color: var(--site-heading-color, var(--site-text-color, inherit));
}

.cms-section.cms-loyalty .cms-loyalty__tier-threshold {
  font-size: 12px;
  color: var(--site-text-muted, #64748b);
}

.cms-section.cms-loyalty .cms-loyalty__tier-perks {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cms-section.cms-loyalty .cms-loyalty__tier-perk-item {
  font-size: 13px;
  color: var(--site-text-color, inherit);
  position: relative;
  padding-left: 14px;
}

.cms-section.cms-loyalty .cms-loyalty__tier-perk-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cms-loyalty-tier-color, var(--site-primary-color, currentColor));
}

/* ── Points history ───────────────────────────────── */
.cms-section.cms-loyalty .cms-loyalty__history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.cms-section.cms-loyalty .cms-loyalty__transaction {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--site-border, rgba(28, 28, 28, 0.08));
  align-items: center;
}

.cms-section.cms-loyalty .cms-loyalty__transaction:last-child {
  border-bottom: 0;
}

.cms-section.cms-loyalty .cms-loyalty__transaction-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cms-section.cms-loyalty .cms-loyalty__transaction--earn .cms-loyalty__transaction-icon {
  background: var(--site-success-soft, rgba(34, 197, 94, 0.12));
  color: var(--site-success, #16a34a);
}

.cms-section.cms-loyalty .cms-loyalty__transaction--spend .cms-loyalty__transaction-icon {
  background: var(--site-danger-soft, rgba(239, 68, 68, 0.12));
  color: var(--site-danger, #dc2626);
}

.cms-section.cms-loyalty .cms-loyalty__transaction-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cms-section.cms-loyalty .cms-loyalty__transaction-label {
  font-size: 14px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-text-color, inherit);
}

.cms-section.cms-loyalty .cms-loyalty__transaction-meta {
  font-size: 12px;
  color: var(--site-text-muted, #64748b);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cms-section.cms-loyalty .cms-loyalty__transaction-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.cms-section.cms-loyalty .cms-loyalty__transaction-points {
  font-size: 14px;
  font-weight: var(--site-font-weight-brand, 800);
}

.cms-section.cms-loyalty .cms-loyalty__transaction--earn .cms-loyalty__transaction-points {
  color: var(--site-success, #16a34a);
}

.cms-section.cms-loyalty .cms-loyalty__transaction--spend .cms-loyalty__transaction-points {
  color: var(--site-danger, #dc2626);
}

.cms-section.cms-loyalty .cms-loyalty__transaction-date {
  font-size: 11px;
  color: var(--site-text-muted, #64748b);
}

/* ── How it works ─────────────────────────────────── */
.cms-section.cms-loyalty .cms-loyalty__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.cms-section.cms-loyalty .cms-loyalty__step {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  background: var(--site-surface, #f8fafc);
  border: 1px solid var(--site-border, rgba(28, 28, 28, 0.08));
  border-radius: var(--site-radius-card, 14px);
}

.cms-section.cms-loyalty .cms-loyalty__step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--site-primary-color, currentColor);
  color: var(--site-primary-contrast, #ffffff);
  font-weight: var(--site-font-weight-brand, 800);
  font-size: 14px;
}

.cms-section.cms-loyalty .cms-loyalty__step-title {
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: var(--site-font-weight-brand, 800);
  color: var(--site-heading-color, var(--site-text-color, inherit));
}

.cms-section.cms-loyalty .cms-loyalty__step-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--site-text-muted, #64748b);
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 820px) {
  .cms-section.cms-loyalty {
    padding: 36px 16px 56px;
  }

  .cms-section.cms-loyalty .cms-loyalty__overview {
    grid-template-columns: 1fr;
  }

  .cms-section.cms-loyalty .cms-loyalty__rewards-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

@media (max-width: 520px) {
  .cms-section.cms-loyalty .cms-loyalty__rules {
    flex-direction: column;
    gap: 14px;
  }

  .cms-section.cms-loyalty .cms-loyalty__group {
    padding: 20px 16px;
  }

  .cms-section.cms-loyalty .cms-loyalty__rewards-grid {
    grid-template-columns: 1fr;
  }

  .cms-section.cms-loyalty .cms-loyalty__transaction {
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  .cms-section.cms-loyalty .cms-loyalty__transaction-amount {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    align-items: flex-start;
    flex-direction: row;
    gap: 8px;
  }
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ LOYALTY REFERRAL (I.4)                                               ║
   ║ Inviter mes amis — code copy + share email/SMS + counter.            ║
   ║ Token-driven, no hex.                                                ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

.cms-section.cms-loyalty .cms-loyalty__referral {
  background: color-mix(in srgb, var(--site-primary-color, #6366f1) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--site-primary-color, #6366f1) 18%, transparent);
  border-radius: var(--site-radius-card, 14px);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--site-shadow-soft, 0 4px 14px rgba(15, 23, 42, 0.06));
}

.cms-section.cms-loyalty .cms-loyalty__referral-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cms-section.cms-loyalty .cms-loyalty__referral-title {
  margin: 0;
  font-size: 18px;
  font-weight: var(--site-font-weight-brand, 800);
  color: var(--site-heading-color, var(--site-text-color, inherit));
}

.cms-section.cms-loyalty .cms-loyalty__referral-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--site-text-muted, #64748b);
}

.cms-section.cms-loyalty .cms-loyalty__referral-text strong {
  color: var(--site-primary-color, #6366f1);
  font-weight: var(--site-font-weight-bold, 700);
}

.cms-section.cms-loyalty .cms-loyalty__referral-code-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cms-section.cms-loyalty .cms-loyalty__referral-label {
  font-size: 12px;
  font-weight: var(--site-font-weight-bold, 700);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--site-text-muted, #64748b);
}

.cms-section.cms-loyalty .cms-loyalty__referral-code-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}

.cms-section.cms-loyalty .cms-loyalty__referral-code {
  flex: 1 1 200px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  background: var(--site-background, #ffffff);
  border: 1.5px dashed color-mix(in srgb, var(--site-primary-color, #6366f1) 30%, transparent);
  border-radius: var(--site-radius-md, 10px);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 22px;
  font-weight: var(--site-font-weight-bold, 700);
  letter-spacing: 0.18em;
  color: var(--site-primary-color, #6366f1);
  user-select: all;
}

.cms-section.cms-loyalty .cms-loyalty__referral-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--site-background, #ffffff);
  border: 1px solid var(--site-border, rgba(28, 28, 28, 0.12));
  border-radius: var(--site-radius-md, 10px);
  font-size: 14px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-text-color, inherit);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease,
    color 160ms ease;
}

.cms-section.cms-loyalty .cms-loyalty__referral-copy-btn:hover {
  background: color-mix(in srgb, var(--site-primary-color, #6366f1) 8%, transparent);
  border-color: color-mix(in srgb, var(--site-primary-color, #6366f1) 30%, transparent);
  color: var(--site-primary-color, #6366f1);
}

.cms-section.cms-loyalty .cms-loyalty__referral-copy-btn.is-copied {
  background: color-mix(in srgb, var(--site-success-color, #22c55e) 14%, transparent);
  border-color: color-mix(in srgb, var(--site-success-color, #22c55e) 35%, transparent);
  color: var(--site-success-color, #16a34a);
}

.cms-section.cms-loyalty .cms-loyalty__referral-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.cms-section.cms-loyalty .cms-loyalty__referral-share-label {
  font-size: 13px;
  color: var(--site-text-muted, #64748b);
  margin-right: 4px;
}

.cms-section.cms-loyalty .cms-loyalty__referral-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--site-background, #ffffff);
  border: 1px solid var(--site-border, rgba(28, 28, 28, 0.12));
  border-radius: var(--site-radius-md, 10px);
  font-size: 13px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-text-color, inherit);
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease,
    color 160ms ease;
}

.cms-section.cms-loyalty .cms-loyalty__referral-share-btn:hover {
  background: color-mix(in srgb, var(--site-primary-color, #6366f1) 8%, transparent);
  border-color: color-mix(in srgb, var(--site-primary-color, #6366f1) 30%, transparent);
  color: var(--site-primary-color, #6366f1);
}

.cms-section.cms-loyalty .cms-loyalty__referral-stats {
  margin-top: 4px;
  padding: 12px 16px;
  background: var(--site-background, #ffffff);
  border: 1px solid var(--site-border, rgba(28, 28, 28, 0.08));
  border-radius: var(--site-radius-md, 10px);
  font-size: 14px;
  color: var(--site-text-muted, #64748b);
}

.cms-section.cms-loyalty .cms-loyalty__referral-stats strong {
  font-size: 17px;
  font-weight: var(--site-font-weight-brand, 800);
  color: var(--site-primary-color, #6366f1);
}

@media (max-width: 520px) {
  .cms-section.cms-loyalty .cms-loyalty__referral {
    padding: 20px 16px;
  }

  .cms-section.cms-loyalty .cms-loyalty__referral-code {
    font-size: 18px;
    letter-spacing: 0.12em;
  }

  .cms-section.cms-loyalty .cms-loyalty__referral-share {
    flex-direction: column;
    align-items: stretch;
  }

  .cms-section.cms-loyalty .cms-loyalty__referral-share-btn {
    justify-content: center;
  }
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ CUSTOMER SETTINGS (H.6.b)                                            ║
   ║ Builder-first — 100% tokens, no hex, no inline styles.               ║
   ║ Specificity: 0-2-0 chained on `.cms-section.cms-settings`.           ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

.cms-section.cms-settings {
  padding: 40px 32px 80px;
  background: var(--site-surface, #f5f5f5);
  font-family: var(--site-font-family, 'Nunito', system-ui, sans-serif);
  color: var(--site-text-color, #1c1c1c);
}
.cms-section.cms-settings .cms-settings__inner {
  max-width: var(--site-container-max, 1100px);
  margin: 0 auto;
}

/* ── Header ─────────────────────────────────────── */
.cms-section.cms-settings .cms-settings__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 20px;
  flex-wrap: wrap;
}
.cms-section.cms-settings .cms-settings__title {
  font-size: 32px;
  font-weight: var(--site-font-weight-black, 900);
  margin: 8px 0 4px;
  color: var(--site-text-color, #1c1c1c);
}
.cms-section.cms-settings .cms-settings__subtitle {
  font-size: 15px;
  color: var(--site-text-muted, #6b7280);
  margin: 0;
}
.cms-section.cms-settings .cms-settings__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-primary-color, #0c9994);
  text-decoration: none;
  transition: color 0.15s;
}
.cms-section.cms-settings .cms-settings__back:hover {
  color: var(--site-primary-dark, #105f5e);
}
.cms-section.cms-settings .cms-settings__back i {
  font-size: 11px;
}

/* ── Layout ─────────────────────────────────────── */
.cms-section.cms-settings .cms-settings__layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  align-items: flex-start;
}

/* ── Sidebar Nav (sticky) ───────────────────────── */
.cms-section.cms-settings .cms-settings__nav {
  position: sticky;
  top: 24px;
  background: var(--site-background, #ffffff);
  border: 1px solid var(--site-border, #e5e7eb);
  border-radius: var(--site-radius-card, 14px);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cms-section.cms-settings .cms-settings__nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--site-radius-sm, 9px);
  font-size: 14px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-text-muted, #6b7280);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.cms-section.cms-settings .cms-settings__nav-link i {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}
.cms-section.cms-settings .cms-settings__nav-link:hover {
  background: var(--site-surface, #f5f5f5);
  color: var(--site-text-color, #1c1c1c);
}
.cms-section.cms-settings .cms-settings__nav-link.is-active {
  background: var(--site-primary-soft, rgba(12, 153, 148, 0.1));
  color: var(--site-primary-color, #0c9994);
}
.cms-section.cms-settings .cms-settings__nav-link--danger {
  color: var(--site-danger, #ef4444);
}
.cms-section.cms-settings .cms-settings__nav-link--danger:hover {
  background: var(--site-danger-soft, rgba(239, 68, 68, 0.1));
  color: var(--site-danger, #ef4444);
}

/* ── Tabbed panels (mutually exclusive) ─────────── */
.cms-section.cms-settings .cms-settings__panel[hidden] {
  display: none;
}

/* ── Content cards ──────────────────────────────── */
.cms-section.cms-settings .cms-settings__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.cms-section.cms-settings .cms-settings__card {
  background: var(--site-background, #ffffff);
  border: 1px solid var(--site-border, #e5e7eb);
  border-radius: var(--site-radius-card, 14px);
  padding: 28px 32px;
  scroll-margin-top: 24px;
}
.cms-section.cms-settings .cms-settings__card--danger {
  border-color: color-mix(in srgb, var(--site-danger, #ef4444) 30%, var(--site-border, #e5e7eb));
  background: color-mix(in srgb, var(--site-danger, #ef4444) 3%, var(--site-background, #ffffff));
}
.cms-section.cms-settings .cms-settings__card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.cms-section.cms-settings .cms-settings__card-title {
  font-size: 18px;
  font-weight: var(--site-font-weight-black, 900);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--site-text-color, #1c1c1c);
}
.cms-section.cms-settings .cms-settings__card-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--site-primary-soft, rgba(12, 153, 148, 0.1));
  color: var(--site-primary-color, #0c9994);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}
.cms-section.cms-settings .cms-settings__card-icon--accent {
  background: var(--site-accent-soft, rgba(249, 153, 7, 0.1));
  color: var(--site-accent-color, #f99907);
}
.cms-section.cms-settings .cms-settings__card-icon--danger {
  background: var(--site-danger-soft, rgba(239, 68, 68, 0.1));
  color: var(--site-danger, #ef4444);
}
.cms-section.cms-settings .cms-settings__card-icon--success {
  background: var(--site-success-soft, rgba(34, 197, 94, 0.1));
  color: var(--site-success, #22c55e);
}
.cms-section.cms-settings .cms-settings__card-desc {
  font-size: 13.5px;
  color: var(--site-text-muted, #6b7280);
  margin: 4px 0 0;
}
.cms-section.cms-settings .cms-settings__subhead {
  font-size: 14px;
  font-weight: var(--site-font-weight-black, 800);
  margin: 0 0 12px;
  color: var(--site-text-color, #1c1c1c);
}
.cms-section.cms-settings .cms-settings__divider {
  border: none;
  border-top: 1px solid var(--site-border, #e5e7eb);
  margin: 22px 0;
}

/* ── Forms ──────────────────────────────────────── */
.cms-section.cms-settings .cms-settings__form {
  display: grid;
  gap: 16px;
}
.cms-section.cms-settings .cms-settings__form--mb {
  margin-bottom: 28px;
}
.cms-section.cms-settings .cms-settings__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cms-section.cms-settings .cms-settings__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cms-section.cms-settings .cms-settings__field--narrow {
  max-width: 200px;
}
.cms-section.cms-settings .cms-settings__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: var(--site-font-weight-brand, 800);
  color: var(--site-text-muted, #6b7280);
}
.cms-section.cms-settings .cms-settings__input {
  padding: 11px 14px;
  border: 1px solid var(--site-border, #e5e7eb);
  border-radius: var(--site-radius-sm, 9px);
  font-family: inherit;
  font-size: 14px;
  background: var(--site-background, #ffffff);
  color: var(--site-text-color, #1c1c1c);
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
.cms-section.cms-settings .cms-settings__input:focus {
  outline: none;
  border-color: var(--site-primary-color, #0c9994);
  box-shadow: 0 0 0 3px var(--site-primary-soft, rgba(12, 153, 148, 0.1));
}

/* H10 — wrapper champ mot de passe + œil afficher/masquer
   (Stimulus input-visibility-toggle). */
.cms-section.cms-settings .cms-settings__input-wrap {
  position: relative;
}
.cms-section.cms-settings .cms-settings__input-wrap .cms-settings__input {
  padding-right: 42px;
}
.cms-section.cms-settings .cms-settings__input-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--site-text-muted, #6b7280);
  border-radius: 8px;
}
.cms-section.cms-settings .cms-settings__input-eye:hover {
  color: var(--site-primary-color, #0c9994);
  background: var(--site-primary-soft, rgba(12, 153, 148, 0.1));
}

/* ── Avatar row ─────────────────────────────────── */
.cms-section.cms-settings .cms-settings__avatar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.cms-section.cms-settings .cms-settings__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--site-primary-soft, rgba(12, 153, 148, 0.1));
  color: var(--site-primary-color, #0c9994);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: var(--site-font-weight-black, 900);
  flex-shrink: 0;
}
.cms-section.cms-settings .cms-settings__avatar--photo {
  object-fit: cover;
  background: transparent;
  border: 2px solid var(--site-border, #e5e7eb);
}
.cms-section.cms-settings .cms-settings__avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.cms-section.cms-settings .cms-settings__file-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Buttons ────────────────────────────────────── */
.cms-section.cms-settings .cms-settings__btn {
  padding: 11px 18px;
  border-radius: var(--site-radius-sm, 9px);
  font-size: 14px;
  font-weight: var(--site-font-weight-bold, 700);
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  /* Backlog Emma retours 2026-05-26 (12e itération) — empêche l'héritage
     d'un text-transform: uppercase par un parent (cas du <label> sur
     "Choisir une photo" qui apparaissait en CAPITALES). */
  text-transform: none;
  letter-spacing: normal;
  transition: background 0.15s, color 0.15s, transform 0.1s, border-color 0.15s;
}
.cms-section.cms-settings .cms-settings__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.cms-section.cms-settings .cms-settings__btn--sm {
  padding: 8px 14px;
  font-size: 13px;
}
.cms-section.cms-settings .cms-settings__btn--mt {
  margin-top: 10px;
}
.cms-section.cms-settings .cms-settings__btn--primary {
  background: var(--site-primary-color, #0c9994);
  color: #fff;
}
.cms-section.cms-settings .cms-settings__btn--primary:hover:not(:disabled) {
  background: var(--site-primary-dark, #105f5e);
  transform: translateY(-1px);
}
.cms-section.cms-settings .cms-settings__btn--ghost {
  background: transparent;
  color: var(--site-text-muted, #6b7280);
  border-color: var(--site-border, #e5e7eb);
}
.cms-section.cms-settings .cms-settings__btn--ghost:hover:not(:disabled) {
  background: var(--site-surface, #f5f5f5);
  color: var(--site-text-color, #1c1c1c);
}
.cms-section.cms-settings .cms-settings__btn--danger {
  background: transparent;
  color: var(--site-danger, #ef4444);
  border-color: color-mix(in srgb, var(--site-danger, #ef4444) 30%, transparent);
}
.cms-section.cms-settings .cms-settings__btn--danger:hover:not(:disabled) {
  background: var(--site-danger, #ef4444);
  color: #fff;
  border-color: var(--site-danger, #ef4444);
}
.cms-section.cms-settings .cms-settings__form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
}
.cms-section.cms-settings .cms-settings__form-actions--start {
  justify-content: flex-start;
  margin-top: 16px;
}

/* ── Toggles (CSS-only, no JS) ──────────────────── */
.cms-section.cms-settings .cms-settings__toggle-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--site-border, #e5e7eb);
}
.cms-section.cms-settings .cms-settings__toggle-row:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}
.cms-section.cms-settings .cms-settings__toggle-text {
  flex: 1;
}
.cms-section.cms-settings .cms-settings__toggle-title {
  font-size: 14px;
  font-weight: var(--site-font-weight-bold, 700);
  margin-bottom: 2px;
  color: var(--site-text-color, #1c1c1c);
}
.cms-section.cms-settings .cms-settings__toggle-desc {
  font-size: 12.5px;
  color: var(--site-text-muted, #6b7280);
  line-height: 1.45;
}
.cms-section.cms-settings .cms-settings__toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  display: inline-block;
}
.cms-section.cms-settings .cms-settings__toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.cms-section.cms-settings .cms-settings__toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--site-border, #e5e7eb);
  border-radius: 24px;
  transition: background 0.2s;
}
.cms-section.cms-settings .cms-settings__toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.cms-section.cms-settings .cms-settings__toggle input:checked + .cms-settings__toggle-slider {
  background: var(--site-primary-color, #0c9994);
}
.cms-section.cms-settings .cms-settings__toggle input:checked + .cms-settings__toggle-slider::before {
  transform: translateX(20px);
}
.cms-section.cms-settings .cms-settings__toggle input:disabled + .cms-settings__toggle-slider {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Stripe block ───────────────────────────────── */
.cms-section.cms-settings .cms-settings__stripe-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--site-success-soft, rgba(34, 197, 94, 0.1));
  color: var(--site-success, #22c55e);
  border-radius: var(--site-radius-sm, 9px);
  font-weight: var(--site-font-weight-bold, 700);
  margin-bottom: 16px;
}
.cms-section.cms-settings .cms-settings__stripe-status--pending {
  background: var(--site-warning-soft, rgba(245, 158, 11, 0.1));
  color: var(--site-warning, #f59e0b);
}
.cms-section.cms-settings .cms-settings__stripe-payout {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px dashed var(--site-border, #e5e7eb);
  font-size: 14px;
}
.cms-section.cms-settings .cms-settings__stripe-payout:last-of-type {
  border-bottom: none;
}
.cms-section.cms-settings .cms-settings__stripe-payout strong {
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-text-color, #1c1c1c);
}
.cms-section.cms-settings .cms-settings__muted {
  color: var(--site-text-muted, #6b7280);
}

/* ── 2FA block ──────────────────────────────────── */
.cms-section.cms-settings .cms-settings__qr-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 12px;
}
.cms-section.cms-settings .cms-settings__qr-placeholder {
  width: 140px;
  height: 140px;
  background: var(--site-surface, #f5f5f5);
  border: 2px dashed var(--site-border, #e5e7eb);
  border-radius: var(--site-radius-sm, 9px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--site-text-muted-2, #9ca3af);
  font-size: 40px;
}
.cms-section.cms-settings .cms-settings__qr-code {
  width: 168px;
  height: 168px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--site-border, #e5e7eb);
  border-radius: var(--site-radius-sm, 9px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cms-section.cms-settings .cms-settings__qr-code svg {
  width: 100%;
  height: 100%;
  display: block;
}
.cms-section.cms-settings .cms-settings__qr-instructions {
  flex: 1;
  min-width: 220px;
}
.cms-section.cms-settings .cms-settings__qr-instructions p {
  font-size: 13.5px;
  margin: 0 0 12px;
  color: var(--site-text-color, #1c1c1c);
}
.cms-section.cms-settings .cms-settings__qr-manual {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--site-text-muted, #6b7280);
}
.cms-section.cms-settings .cms-settings__qr-manual summary {
  cursor: pointer;
  user-select: none;
}
.cms-section.cms-settings .cms-settings__qr-secret {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: var(--site-surface, #f5f5f5);
  border: 1px solid var(--site-border, #e5e7eb);
  border-radius: 6px;
  word-break: break-all;
}

/* ── Hints / inline notes ───────────────────────── */
.cms-section.cms-settings .cms-settings__hint {
  font-size: 13px;
  color: var(--site-text-muted, #6b7280);
  margin: 0 0 12px;
  line-height: 1.5;
}
.cms-section.cms-settings .cms-settings__hint--success {
  color: var(--site-success, #22c55e);
  font-weight: var(--site-font-weight-bold, 700);
}
.cms-section.cms-settings .cms-settings__hint--inline {
  font-style: italic;
  color: var(--site-text-muted-2, #9ca3af);
  font-size: 12px;
}

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 900px) {
  .cms-section.cms-settings .cms-settings__layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .cms-section.cms-settings .cms-settings__nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-x: auto;
  }
  .cms-section.cms-settings .cms-settings__nav-link {
    white-space: nowrap;
  }
}
@media (max-width: 600px) {
  .cms-section.cms-settings {
    padding: 24px 16px 56px;
  }
  .cms-section.cms-settings .cms-settings__card {
    padding: 22px 18px;
  }
  .cms-section.cms-settings .cms-settings__row {
    grid-template-columns: 1fr;
  }
  .cms-section.cms-settings .cms-settings__title {
    font-size: 26px;
  }
}

/* ════════════════════════════════════════════════════════
   I.2.3 — Mes badges (settings detailed view)
   ════════════════════════════════════════════════════════ */
.cms-section.cms-settings .cms-settings__badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 4px;
}
.cms-section.cms-settings .cms-settings__badge {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--site-border, #e5e7eb);
  border-radius: var(--site-radius-sm, 9px);
  background: var(--site-background, #ffffff);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.cms-section.cms-settings .cms-settings__badge-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.cms-section.cms-settings .cms-settings__badge-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cms-section.cms-settings .cms-settings__badge-name {
  font-size: 14px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-text-color, #1c1c1c);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cms-section.cms-settings .cms-settings__badge-meta {
  font-size: 12px;
  color: var(--site-text-muted, #6b7280);
}
.cms-section.cms-settings .cms-settings__badge-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: var(--site-radius-pill, 999px);
}
.cms-section.cms-settings .cms-settings__badge-state--ok {
  background: var(--site-primary-soft, rgba(12, 153, 148, 0.10));
  color: var(--site-primary-color, #0c9994);
}
.cms-section.cms-settings .cms-settings__badge-state--locked {
  background: var(--site-surface, #f5f5f5);
  color: var(--site-text-muted, #6b7280);
}
.cms-section.cms-settings .cms-settings__badge--acquired {
  border-color: var(--site-primary-soft-2, rgba(12, 153, 148, 0.18));
  background: var(--site-primary-soft, rgba(12, 153, 148, 0.06));
}
.cms-section.cms-settings .cms-settings__badge--acquired .cms-settings__badge-icon {
  background: var(--site-primary-soft-2, rgba(12, 153, 148, 0.18));
  color: var(--site-primary-color, #0c9994);
}
.cms-section.cms-settings .cms-settings__badge--acquired:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--site-primary-soft, rgba(12, 153, 148, 0.10));
}
.cms-section.cms-settings .cms-settings__badge--locked {
  opacity: 0.65;
}
.cms-section.cms-settings .cms-settings__badge--locked .cms-settings__badge-icon {
  background: var(--site-surface, #f5f5f5);
  color: var(--site-text-muted, #6b7280);
  filter: grayscale(0.85);
}
@media (max-width: 600px) {
  .cms-section.cms-settings .cms-settings__badges-grid {
    grid-template-columns: 1fr;
  }
}

/* I.3 — Rental item reviews (marketplace detail) */
.cms-rental-item--marketplace-detail .cms-rental-item__stars-count {
  font-size: 12px;
  font-weight: var(--site-font-weight-semibold, 600);
  color: var(--site-text-muted);
  margin-left: 4px;
}
.cms-rental-item--marketplace-detail .cms-rental-item__reviews {
  margin-top: 4px;
  padding: 16px;
  border: 1px solid var(--site-border, #e5e7eb);
  border-radius: var(--site-radius-card, 14px);
  background: var(--site-background);
}
.cms-rental-item--marketplace-detail .cms-rental-item__reviews-title {
  font-size: 16px;
  font-weight: var(--site-font-weight-brand, 800);
  color: var(--site-text-color);
  margin: 0 0 12px;
}
.cms-rental-item--marketplace-detail .cms-rental-item__reviews-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--site-border, #e5e7eb);
}
.cms-rental-item--marketplace-detail .cms-rental-item__reviews-summary-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--site-accent-color);
  font-weight: var(--site-font-weight-bold, 700);
  font-size: 18px;
}
.cms-rental-item--marketplace-detail .cms-rental-item__reviews-summary-count {
  font-size: 13px;
  color: var(--site-text-muted);
}
.cms-rental-item--marketplace-detail .cms-rental-item__reviews-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cms-rental-item--marketplace-detail .cms-rental-item__review {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cms-rental-item--marketplace-detail .cms-rental-item__review-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cms-rental-item--marketplace-detail .cms-rental-item__review-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--site-primary-soft, rgba(0,0,0,0.06));
  color: var(--site-primary-color);
  font-weight: var(--site-font-weight-black, 900);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cms-rental-item--marketplace-detail .cms-rental-item__review-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cms-rental-item--marketplace-detail .cms-rental-item__review-name {
  font-size: 13px;
  font-weight: var(--site-font-weight-brand, 800);
  color: var(--site-text-color);
}
.cms-rental-item--marketplace-detail .cms-rental-item__review-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: var(--site-accent-color);
}
.cms-rental-item--marketplace-detail .cms-rental-item__review-date {
  font-size: 11px;
  color: var(--site-text-muted);
}
.cms-rental-item--marketplace-detail .cms-rental-item__review-title {
  font-size: 13px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-text-color);
}
.cms-rental-item--marketplace-detail .cms-rental-item__review-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--site-text-color);
  margin: 0;
}
.cms-rental-item--marketplace-detail .cms-rental-item__review-reply {
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: var(--site-radius-input, 10px);
  background: var(--site-surface, #f5f5f5);
  border-left: 3px solid var(--site-primary-color);
}
.cms-rental-item--marketplace-detail .cms-rental-item__review-reply-header {
  font-size: 11px;
  font-weight: var(--site-font-weight-bold, 700);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--site-primary-color);
  margin-bottom: 4px;
}
.cms-rental-item--marketplace-detail .cms-rental-item__review-reply-body {
  font-size: 12px;
  line-height: 1.5;
  color: var(--site-text-color);
  margin: 0;
}
.cms-rental-item--marketplace-detail .cms-rental-item__reviews-more {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: var(--site-font-weight-semibold, 600);
  color: var(--site-primary-color);
  text-decoration: none;
}
.cms-rental-item--marketplace-detail .cms-rental-item__reviews-more:hover {
  text-decoration: underline;
}
.cms-rental-item--marketplace-detail .cms-rental-item__reviews-empty {
  font-size: 13px;
  color: var(--site-text-muted);
  margin: 0;
  font-style: italic;
}

/* I.3 — Renter reservation review banner / form / status */
.cms-section.cms-renter-reservations .cms-renter-reservations__review-banner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  margin: 0 0 16px;
  background: var(--site-background, #fff);
  border: 1px solid color-mix(in srgb, var(--site-accent-color) 30%, transparent);
  border-radius: var(--site-radius-card, 14px);
  box-shadow: var(--site-shadow-sm, 0 1px 4px rgba(0,0,0,0.06));
}
.cms-section.cms-renter-reservations .cms-renter-reservations__review-banner-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cms-section.cms-renter-reservations .cms-renter-reservations__review-banner-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--site-accent-color) 18%, transparent);
  color: var(--site-accent-color);
}
.cms-section.cms-renter-reservations .cms-renter-reservations__review-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cms-section.cms-renter-reservations .cms-renter-reservations__review-banner-title {
  font-size: 15px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-text-color, inherit);
}
.cms-section.cms-renter-reservations .cms-renter-reservations__review-banner-meta {
  font-size: 13px;
  color: var(--site-text-muted);
  line-height: 1.4;
}
.cms-section.cms-renter-reservations .cms-renter-reservations__review-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cms-section.cms-renter-reservations .cms-renter-reservations__review-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  margin: 0;
  padding: 0;
}
.cms-section.cms-renter-reservations .cms-renter-reservations__review-rating-legend {
  font-size: 12px;
  font-weight: var(--site-font-weight-semibold, 600);
  color: var(--site-text-muted);
  margin-right: 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.cms-section.cms-renter-reservations .cms-renter-reservations__review-star {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  color: var(--site-border, #d1d5db);
  transition: color 0.15s;
}
.cms-section.cms-renter-reservations .cms-renter-reservations__review-star:hover,
.cms-section.cms-renter-reservations .cms-renter-reservations__review-star:hover ~ .cms-renter-reservations__review-star {
  color: var(--site-border, #d1d5db);
}
.cms-section.cms-renter-reservations .cms-renter-reservations__review-rating:hover .cms-renter-reservations__review-star {
  color: var(--site-accent-color);
}
.cms-section.cms-renter-reservations .cms-renter-reservations__review-rating .cms-renter-reservations__review-star:hover ~ .cms-renter-reservations__review-star {
  color: var(--site-border, #d1d5db);
}
.cms-section.cms-renter-reservations .cms-renter-reservations__review-star-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}
.cms-section.cms-renter-reservations .cms-renter-reservations__review-star-input:checked ~ .cms-renter-reservations__review-star-icon,
.cms-section.cms-renter-reservations .cms-renter-reservations__review-star-input:focus-visible ~ .cms-renter-reservations__review-star-icon {
  color: var(--site-accent-color);
  outline: 2px solid var(--site-accent-color);
  outline-offset: 2px;
  border-radius: 4px;
}
/* highlight any star <= the checked one within the fieldset */
.cms-section.cms-renter-reservations .cms-renter-reservations__review-rating:has(.cms-renter-reservations__review-star-input[value="1"]:checked) .cms-renter-reservations__review-star:nth-child(2) .cms-renter-reservations__review-star-icon,
.cms-section.cms-renter-reservations .cms-renter-reservations__review-rating:has(.cms-renter-reservations__review-star-input[value="2"]:checked) .cms-renter-reservations__review-star:nth-child(2) .cms-renter-reservations__review-star-icon,
.cms-section.cms-renter-reservations .cms-renter-reservations__review-rating:has(.cms-renter-reservations__review-star-input[value="2"]:checked) .cms-renter-reservations__review-star:nth-child(3) .cms-renter-reservations__review-star-icon,
.cms-section.cms-renter-reservations .cms-renter-reservations__review-rating:has(.cms-renter-reservations__review-star-input[value="3"]:checked) .cms-renter-reservations__review-star:nth-child(2) .cms-renter-reservations__review-star-icon,
.cms-section.cms-renter-reservations .cms-renter-reservations__review-rating:has(.cms-renter-reservations__review-star-input[value="3"]:checked) .cms-renter-reservations__review-star:nth-child(3) .cms-renter-reservations__review-star-icon,
.cms-section.cms-renter-reservations .cms-renter-reservations__review-rating:has(.cms-renter-reservations__review-star-input[value="3"]:checked) .cms-renter-reservations__review-star:nth-child(4) .cms-renter-reservations__review-star-icon,
.cms-section.cms-renter-reservations .cms-renter-reservations__review-rating:has(.cms-renter-reservations__review-star-input[value="4"]:checked) .cms-renter-reservations__review-star:nth-child(2) .cms-renter-reservations__review-star-icon,
.cms-section.cms-renter-reservations .cms-renter-reservations__review-rating:has(.cms-renter-reservations__review-star-input[value="4"]:checked) .cms-renter-reservations__review-star:nth-child(3) .cms-renter-reservations__review-star-icon,
.cms-section.cms-renter-reservations .cms-renter-reservations__review-rating:has(.cms-renter-reservations__review-star-input[value="4"]:checked) .cms-renter-reservations__review-star:nth-child(4) .cms-renter-reservations__review-star-icon,
.cms-section.cms-renter-reservations .cms-renter-reservations__review-rating:has(.cms-renter-reservations__review-star-input[value="4"]:checked) .cms-renter-reservations__review-star:nth-child(5) .cms-renter-reservations__review-star-icon,
.cms-section.cms-renter-reservations .cms-renter-reservations__review-rating:has(.cms-renter-reservations__review-star-input[value="5"]:checked) .cms-renter-reservations__review-star .cms-renter-reservations__review-star-icon {
  color: var(--site-accent-color);
}
.cms-section.cms-renter-reservations .cms-renter-reservations__review-star-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cms-section.cms-renter-reservations .cms-renter-reservations__review-star-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.cms-section.cms-renter-reservations .cms-renter-reservations__review-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cms-section.cms-renter-reservations .cms-renter-reservations__review-label {
  font-size: 12px;
  font-weight: var(--site-font-weight-semibold, 600);
  color: var(--site-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.cms-section.cms-renter-reservations .cms-renter-reservations__review-input,
.cms-section.cms-renter-reservations .cms-renter-reservations__review-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--site-border, #d1d5db);
  border-radius: var(--site-radius-input, 10px);
  background: var(--site-background, #fff);
  color: var(--site-text-color, inherit);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  transition: border-color 0.15s;
}
.cms-section.cms-renter-reservations .cms-renter-reservations__review-input:focus,
.cms-section.cms-renter-reservations .cms-renter-reservations__review-textarea:focus {
  outline: none;
  border-color: var(--site-accent-color);
}
.cms-section.cms-renter-reservations .cms-renter-reservations__review-textarea {
  resize: vertical;
  min-height: 90px;
}
.cms-section.cms-renter-reservations .cms-renter-reservations__review-actions {
  display: flex;
  justify-content: flex-end;
}
.cms-section.cms-renter-reservations .cms-renter-reservations__review-submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--site-radius-sm, 10px);
  background: var(--site-accent-color);
  color: var(--site-background, #fff);
  font-size: 14px;
  font-weight: var(--site-font-weight-semibold, 600);
  border: 0;
  cursor: pointer;
  transition: opacity 0.15s;
}
.cms-section.cms-renter-reservations .cms-renter-reservations__review-submit:hover {
  opacity: 0.88;
}

.cms-section.cms-renter-reservations .cms-renter-reservations__review-status {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  margin: 0 0 16px;
  background: var(--site-background, #fff);
  border: 1px solid var(--site-border, #e5e7eb);
  border-radius: var(--site-radius-card, 14px);
  box-shadow: var(--site-shadow-sm, 0 1px 4px rgba(0,0,0,0.06));
}
.cms-section.cms-renter-reservations .cms-renter-reservations__review-status-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--site-surface, #f5f5f5);
  color: var(--site-text-muted);
}
.cms-section.cms-renter-reservations .cms-renter-reservations__review-status--is-approved .cms-renter-reservations__review-status-icon {
  background: color-mix(in srgb, var(--site-success, #16a34a) 16%, transparent);
  color: var(--site-success, #16a34a);
}
.cms-section.cms-renter-reservations .cms-renter-reservations__review-status--is-rejected .cms-renter-reservations__review-status-icon {
  background: color-mix(in srgb, var(--site-danger, #dc2626) 16%, transparent);
  color: var(--site-danger, #dc2626);
}
.cms-section.cms-renter-reservations .cms-renter-reservations__review-status--is-pending .cms-renter-reservations__review-status-icon {
  background: color-mix(in srgb, var(--site-accent-color) 16%, transparent);
  color: var(--site-accent-color);
}
.cms-section.cms-renter-reservations .cms-renter-reservations__review-status-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cms-section.cms-renter-reservations .cms-renter-reservations__review-status-title {
  font-size: 14px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-text-color, inherit);
}
.cms-section.cms-renter-reservations .cms-renter-reservations__review-status-extract {
  font-size: 13px;
  line-height: 1.5;
  color: var(--site-text-color, inherit);
  margin: 0;
}

/* I.3.9 — Owner reservation review + reply */
.cms-section.cms-renter-reservations .cms-owner-reservation__review-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cms-section.cms-renter-reservations .cms-owner-reservation__review {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cms-section.cms-renter-reservations .cms-owner-reservation__review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.cms-section.cms-renter-reservations .cms-owner-reservation__review-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: var(--site-accent-color);
}
.cms-section.cms-renter-reservations .cms-owner-reservation__review-date {
  font-size: 12px;
  color: var(--site-text-muted);
}
.cms-section.cms-renter-reservations .cms-owner-reservation__review-title {
  font-size: 14px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-text-color, inherit);
}
.cms-section.cms-renter-reservations .cms-owner-reservation__review-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--site-text-color, inherit);
  margin: 0;
}
.cms-section.cms-renter-reservations .cms-owner-reservation__review-reply {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: var(--site-radius-input, 10px);
  background: var(--site-surface, #f5f5f5);
  border-left: 3px solid var(--site-primary-color);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cms-section.cms-renter-reservations .cms-owner-reservation__review-reply-header {
  font-size: 11px;
  font-weight: var(--site-font-weight-bold, 700);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--site-primary-color);
}
.cms-section.cms-renter-reservations .cms-owner-reservation__review-reply-body {
  font-size: 12px;
  line-height: 1.5;
  color: var(--site-text-color, inherit);
  margin: 0;
}
.cms-section.cms-renter-reservations .cms-owner-reservation__review-reply-date {
  font-size: 11px;
  color: var(--site-text-muted);
}
.cms-section.cms-renter-reservations .cms-owner-reservation__reply-form {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--site-radius-input, 10px);
  background: var(--site-surface, #f5f5f5);
}
.cms-section.cms-renter-reservations .cms-owner-reservation__reply-label {
  font-size: 12px;
  font-weight: var(--site-font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--site-text-muted);
}
.cms-section.cms-renter-reservations .cms-owner-reservation__reply-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--site-border, #d1d5db);
  border-radius: var(--site-radius-input, 10px);
  background: var(--site-background, #fff);
  color: var(--site-text-color, inherit);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  min-height: 70px;
}
.cms-section.cms-renter-reservations .cms-owner-reservation__reply-textarea:focus {
  outline: none;
  border-color: var(--site-primary-color);
}
.cms-section.cms-renter-reservations .cms-owner-reservation__reply-actions {
  display: flex;
  justify-content: flex-end;
}
.cms-section.cms-renter-reservations .cms-owner-reservation__reply-submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--site-radius-sm, 10px);
  background: var(--site-primary-color);
  color: var(--site-background, #fff);
  font-size: 13px;
  font-weight: var(--site-font-weight-semibold, 600);
  border: 0;
  cursor: pointer;
  transition: opacity 0.15s;
}
.cms-section.cms-renter-reservations .cms-owner-reservation__reply-submit:hover {
  opacity: 0.88;
}

/* ============================================================
   Coliope chantier A — corrections centrage des grids
   ============================================================
   Probleme : repeat(N, 1fr) etend les items sur toute la largeur
   meme quand peu d'items. Resultat : 2 cards alignees gauche,
   espace blanc a droite. Solution : auto-fit avec largeur max
   bornee + justify-content: center pour aligner au centre.
   ============================================================ */

/* Hero mosaic : laisser tel quel (3 items toujours = grid 3-col fixe) */
/* Override marketplace_grid (rental_catalog) — 4 items max par col, auto-fit */
.cms-section.cms-rental-catalog.cms-rental-catalog--marketplace-grid .cms-rental-catalog__grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 300px));
  justify-content: center;
}

/* Categories explore_grid */
.cms-section.cms-categories.cms-categories--rental-explore-grid .cms-categories__grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
  justify-content: center;
}

/* Featured products horizontal scroll : padding lateral pour eviter que les
   cards touchent les bords (coupure visuelle desagreable). justify-content
   center coupe la 1ere card en scroll-snap → on ne l'utilise pas ici. */
.cms-section.cms-featured-products.cms-featured-products--rental-horizontal-scroll .cms-featured-products__scroll {
  padding: 4px 32px;
  scroll-padding-inline: 32px;
}

/* Content values_grid (utilise sur a-propos + ailleurs) */
.cms-section.cms-content.cms-content--values-grid .cms-content__values-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
  justify-content: center;
}

/* Customer account cards : Stimulus controller customer-account-tabs ne
   montre qu'une card a la fois (login OU signup). Le grid 2-col laissait
   un trou a droite. Solution : grid auto-fit avec max-width par card. */
.cms-section.cms-customer-account .cms-customer-account__cards {
  grid-template-columns: repeat(auto-fit, minmax(320px, 460px));
  justify-content: center;
}

/* Navbar marketplace_account : harmoniser hauteur ET logo avec
   marketplace_sticky_glass. Sans ca, la transition visuelle landing → compte
   etait abrupte (plus mince + logo plus petit). */
.cms-navbar--marketplace-account .cms-navbar__inner {
  height: 84px;
  padding-top: 0;
  padding-bottom: 0;
}
/* Logo identique aux 2 navbars : 36px img / 24px svg / 22px text + couleur primary */
.cms-navbar--marketplace-account .cms-navbar__logo-link {
  height: auto;
}
.cms-navbar--marketplace-account .cms-navbar__logo-img {
  height: 36px;
}
.cms-navbar--marketplace-account .cms-navbar__logo-svg-wrapper {
  height: auto;
}
.cms-navbar--marketplace-account .cms-navbar__logo-svg-wrapper svg {
  height: 24px;
}
.cms-navbar--marketplace-account .cms-navbar__logo-text {
  font-size: 22px;
  font-weight: var(--site-font-weight-brand);
  color: var(--site-primary-color);
  letter-spacing: -0.5px;
}

/* ============================================================
   Coliope chantier A — fin
   ============================================================ */

/* ============================================================
   Loyalty v2 — Refonte pédagogique (mockup coliope_loyalty.html)
   Scope : .cms-loyalty.cms-loyalty--v2
   N'écrase pas .cms-loyalty existant. Les classes propres au v2
   utilisent le préfixe .cms-loyalty-v2__*.
   ============================================================ */
.cms-section.cms-loyalty.cms-loyalty--v2 {
  display: block;
  padding: 0;
  background: var(--site-background, #fff);
  color: var(--site-text-color, #1c1c1c);
  font-family: var(--site-font-family, 'Nunito', system-ui, sans-serif);
}

/* =============================================
   LOYALTY — page dédiée "Comment ça marche" (cms-loyalty-how)
   Réutilise les sections/tiers/rewards cms-loyalty-v2 ; ajoute la barre
   retour, le hero teal plein, la grille "gagner des coins", la FAQ et les CTA.
   ============================================= */
.cms-loyalty-how .cms-loyalty-how__topbar {
  border-bottom: 1px solid var(--site-border, rgba(0, 0, 0, 0.08));
  background: var(--site-background, #fff);
}
.cms-loyalty-how .cms-loyalty-how__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 32px;
  font-size: 14px;
  font-weight: var(--site-font-weight-brand, 800);
  color: var(--site-text-color);
  text-decoration: none;
}
.cms-loyalty-how .cms-loyalty-how__back:hover {
  color: var(--site-primary-color, #0c9994);
}

.cms-loyalty-how .cms-loyalty-how__hero {
  text-align: center;
  padding: 52px 32px 56px;
  background: linear-gradient(135deg,
    var(--site-primary-color, #0c9994),
    var(--site-primary-dark, #0a6d68));
  color: #fff;
}
.cms-loyalty-how .cms-loyalty-how__kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: var(--site-font-weight-brand, 800);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.16);
  padding: 5px 13px;
  border-radius: 999px;
}
.cms-loyalty-how .cms-loyalty-how__title {
  font-size: 38px;
  font-weight: var(--site-font-weight-black, 900);
  margin: 14px 0 8px;
}
.cms-loyalty-how .cms-loyalty-how__subtitle {
  font-size: 16px;
  opacity: 0.92;
  max-width: 640px;
  margin: 0 auto;
}

/* Gagner des coins */
.cms-loyalty-how .cms-loyalty-how__earn {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.cms-loyalty-how .cms-loyalty-how__earn-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--site-background, #fff);
  border: 1px solid var(--site-border, rgba(0, 0, 0, 0.08));
  border-radius: var(--site-radius-card, 14px);
  padding: 18px;
}
.cms-loyalty-how .cms-loyalty-how__earn-ic {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--site-primary-soft, rgba(12, 153, 148, 0.10));
  color: var(--site-primary-color, #0c9994);
}
.cms-loyalty-how .cms-loyalty-how__earn-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cms-loyalty-how .cms-loyalty-how__earn-text strong {
  font-size: 15px;
  font-weight: var(--site-font-weight-brand, 800);
}
.cms-loyalty-how .cms-loyalty-how__earn-text span {
  font-size: 12.5px;
  color: var(--site-text-muted, #6b7280);
}
.cms-loyalty-how .cms-loyalty-how__earn-val {
  margin-left: auto;
  font-size: 16px;
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-accent-color, #f39200);
  white-space: nowrap;
}

/* Niveaux / tiers — cards blanches + liseré coloré + gros multiplicateur (mockup) */
.cms-loyalty-how .cms-loyalty-how__tiers {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}
.cms-loyalty-how .cms-loyalty-how__tier {
  position: relative;
  background: var(--site-background, #fff);
  border: 1px solid var(--site-border, rgba(0, 0, 0, 0.08));
  border-radius: 18px;
  padding: 26px 24px 24px;
  text-align: center;
  overflow: hidden;
}
.cms-loyalty-how .cms-loyalty-how__tier.is-current {
  border-color: var(--site-primary-color, #0c9994);
  box-shadow: 0 10px 30px var(--site-primary-soft, rgba(12, 153, 148, 0.16));
}
.cms-loyalty-how .cms-loyalty-how__tier-cap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--tier-cap, var(--site-primary-color, #0c9994));
}
.cms-loyalty-how .cms-loyalty-how__tier-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 10.5px;
  font-weight: var(--site-font-weight-brand, 800);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--site-primary-dark, var(--site-primary-color));
  background: var(--site-primary-soft, rgba(12, 153, 148, 0.10));
  padding: 3px 9px;
  border-radius: 999px;
}
.cms-loyalty-how .cms-loyalty-how__tier-name {
  font-weight: var(--site-font-weight-black, 900);
  font-size: 18px;
  margin-top: 4px;
}
.cms-loyalty-how .cms-loyalty-how__tier-th {
  font-size: 13px;
  color: var(--site-text-muted, #6b7280);
  margin: 4px 0 14px;
}
.cms-loyalty-how .cms-loyalty-how__tier-mult {
  font-size: 32px;
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-primary-color, #0c9994);
  line-height: 1;
}
.cms-loyalty-how .cms-loyalty-how__tier-mult span {
  display: block;
  font-size: 12.5px;
  font-weight: var(--site-font-weight-semibold, 700);
  color: var(--site-text-muted, #6b7280);
  margin-top: 5px;
}
.cms-loyalty-how .cms-loyalty-how__tier-perks {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.cms-loyalty-how .cms-loyalty-how__tier-perks li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--site-text-color);
}
.cms-loyalty-how .cms-loyalty-how__tier-perks li svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--site-primary-color, #0c9994);
}

/* FAQ */
.cms-loyalty-how .cms-loyalty-how__faq {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cms-loyalty-how .cms-loyalty-how__faq-item {
  background: var(--site-background, #fff);
  border: 1px solid var(--site-border, rgba(0, 0, 0, 0.08));
  border-radius: var(--site-radius-card, 14px);
  padding: 18px 20px;
}
.cms-loyalty-how .cms-loyalty-how__faq-q {
  font-weight: var(--site-font-weight-brand, 800);
  font-size: 15px;
  color: var(--site-text-color);
}
.cms-loyalty-how .cms-loyalty-how__faq-a {
  font-size: 13.5px;
  color: var(--site-text-muted, #6b7280);
  margin-top: 8px;
  line-height: 1.55;
}

/* CTA boutons */
.cms-loyalty-how .cms-loyalty-how__catalogue-cta,
.cms-loyalty-how .cms-loyalty-how__bottom-cta {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto;
}
.cms-loyalty-how .cms-loyalty-how__catalogue-cta {
  margin-top: 28px;
}
.cms-loyalty-how .cms-loyalty-how__bottom-cta {
  padding: 0 32px 72px;
}
.cms-loyalty-how .cms-loyalty-how__cta-btn {
  display: inline-block;
  background: var(--site-accent-color, #f39200);
  color: #fff;
  font-weight: var(--site-font-weight-brand, 800);
  padding: 12px 24px;
  border-radius: var(--site-radius-pill, 999px);
  text-decoration: none;
  font-size: 15px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.cms-loyalty-how .cms-loyalty-how__cta-btn:hover {
  transform: translateY(-1px);
  opacity: 0.94;
}
.cms-loyalty-how .cms-loyalty-how__cta-btn--ghost {
  background: transparent;
  color: var(--site-primary-color, #0c9994);
  border: 2px solid var(--site-primary-color, #0c9994);
}

@media (max-width: 768px) {
  .cms-loyalty-how .cms-loyalty-how__title { font-size: 28px; }
  .cms-loyalty-how .cms-loyalty-how__hero { padding: 40px 22px 44px; }
}

.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__back-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 32px 0;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--site-text-muted, #6b7280);
  text-decoration: none;
  padding: 6px 0;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__back-link:hover {
  color: var(--site-primary-color, #0c9994);
}

/* ── ZONE 1 — HERO ───────────────────────────────────────── */
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__hero {
  position: relative;
  padding: 60px 32px 80px;
  background: linear-gradient(
    135deg,
    var(--site-primary-light, #f0fdfb) 0%,
    color-mix(in srgb, var(--site-primary-color, #0c9994) 8%, white) 100%
  );
  overflow: hidden;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__hero::before,
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__hero::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: var(--site-primary-soft, rgba(12, 153, 148, 0.10));
  filter: blur(60px);
  pointer-events: none;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__hero::before {
  top: -100px;
  right: 10%;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__hero::after {
  bottom: -100px;
  left: 10%;
  background: var(--site-accent-soft, rgba(249, 153, 7, 0.10));
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: center;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__kicker {
  display: inline-block;
  padding: 6px 14px;
  background: var(--site-primary-color, #0c9994);
  color: #fff;
  border-radius: var(--site-radius-pill, 999px);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__hero-title {
  margin: 0 0 16px;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  line-height: 1.1;
  color: var(--site-primary-dark, #105f5e);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__hero-title-accent {
  color: var(--site-accent-color, #f99907);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__hero-subtitle {
  margin: 0;
  max-width: 480px;
  font-size: 17px;
  color: var(--site-text-muted, #6b7280);
}

/* Mono-section condensée (refonte 2026-05-29) : 3 mini-étapes + lien détail
   placés sous le sous-titre du hero, à la place des anciennes ZONE 2/3/4. */
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__mini-steps {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 480px;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__mini-step {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--site-text-color);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__mini-step strong {
  font-weight: var(--site-font-weight-brand, 800);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__mini-step-ic {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--site-primary-soft, rgba(14, 140, 134, 0.10));
  color: var(--site-primary-color, #0c9994);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__how-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-weight: var(--site-font-weight-brand, 800);
  font-size: 15px;
  color: var(--site-primary-color, #0c9994);
  text-decoration: none;
  transition: gap 0.15s ease;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__how-link:hover {
  gap: 12px;
  text-decoration: underline;
}
/* Section 3 — Les bons plans : même fond teal-clair que la section 1 (mockup
   alterne section1 teal / section2 blanc / section3 teal). On masque le
   header interne du cta partner_offers_carousel car on rend notre propre
   header unifié (.cms-loyalty-page__head) au-dessus. */
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__bons-plans {
  background: color-mix(in srgb, var(--site-primary-color, #0c9994) 4%, white);
  padding: 56px 0 64px;
  scroll-margin-top: 80px;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__bons-plans .cms-cta__header {
  display: none;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__bons-plans .cms-cta {
  background: transparent;
  padding: 0;
}

/* (Bloc Boutique/Toggle retiré 2026-05-30 : modèle simplifié à un seul
   type d'offre — les bons plans partenaires. Cf. loyalty.html.erb section 3.) */

/* Section 2 — carte contenue "Le programme de fidélité" (mockup coliope_loyalty_refonte).
   Header centré (kicker + h2) + band gradient arrondi, 2 colonnes
   (gauche : lead + mini-étapes + lien ; droite : carte membre). */
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-prog__band {
  max-width: 1100px;
  margin: 8px auto 0;
  background: linear-gradient(135deg,
    var(--site-background, #fff),
    color-mix(in srgb, var(--site-primary-color, #0c9994) 7%, white));
  border: 1px solid var(--site-border, rgba(0, 0, 0, 0.08));
  border-radius: 22px;
  padding: 34px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 34px;
  align-items: center;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-prog__lead {
  margin: 0;
  font-size: 16px;
  color: var(--site-text-muted, #6b7280);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-prog .cms-loyalty-v2__mini-steps {
  margin-top: 18px;
  max-width: none;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-prog .cms-loyalty-v2__how-link {
  margin-top: 18px;
}
/* La carte membre garde son style hero-card ; on neutralise juste l'éventuelle
   largeur héritée pour qu'elle remplisse la colonne droite du band. */
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-prog__band .cms-loyalty-v2__hero-card {
  width: 100%;
  margin: 0;
}
@media (max-width: 860px) {
  .cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-prog__band {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 26px;
  }
}

.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__hero-card {
  background: #fff;
  border-radius: var(--site-radius-card, 14px);
  padding: 28px;
  box-shadow: var(--site-shadow-md, 0 4px 16px rgba(0, 0, 0, 0.08));
  border: 2px solid var(--site-primary-color, #0c9994);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__hero-card-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--site-text-muted, #6b7280);
  margin-bottom: 10px;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__hero-card-value {
  font-size: 56px;
  font-weight: 900;
  color: var(--site-primary-color, #0c9994);
  line-height: 1;
  margin-bottom: 4px;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__hero-card-value-text {
  font-size: 28px;
  font-weight: 900;
  color: var(--site-primary-color, #0c9994);
  line-height: 1.1;
  margin-bottom: 8px;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__hero-card-suffix {
  font-size: 14px;
  color: var(--site-text-muted, #6b7280);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__hero-card-divider {
  height: 1px;
  background: var(--site-border, #e5e7eb);
  margin: 18px 0;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__hero-card-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding: 6px 0;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__hero-card-row strong {
  color: var(--site-text-color, #1c1c1c);
  text-align: right;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__hero-card-row-label {
  color: var(--site-text-muted, #6b7280);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__hero-card-progress {
  margin-top: 14px;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__hero-card-progress-bar {
  position: relative;
  width: 100%;
  height: 8px;
  border-radius: var(--site-radius-pill, 999px);
  background: var(--site-primary-soft, rgba(12, 153, 148, 0.10));
  overflow: hidden;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__hero-card-progress-fill {
  display: block;
  height: 100%;
  width: var(--cms-loyalty-progress, 0%);
  background: linear-gradient(90deg, var(--site-primary-color, #0c9994), var(--site-accent-color, #f99907));
  border-radius: inherit;
  transition: width 0.5s ease;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__hero-card-progress-meta {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--site-text-muted, #6b7280);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__hero-card-cta {
  display: block;
  text-align: center;
  background: var(--site-primary-color, #0c9994);
  color: #fff;
  padding: 14px;
  border-radius: var(--site-radius-sm, 9px);
  font-weight: 800;
  margin-top: 16px;
  text-decoration: none;
  transition: background 0.15s;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__hero-card-cta:hover {
  background: var(--site-primary-dark, #105f5e);
}

/* ── Sections génériques ─────────────────────────────────── */
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__section {
  padding: 80px 32px;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__section--why {
  background: var(--site-surface, #f5f5f5);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__section--partners {
  background: var(--site-accent-soft, rgba(249, 153, 7, 0.10));
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__section--cta {
  padding: 60px 32px;
}

.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__section-head {
  text-align: center;
  margin-bottom: 50px;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__section-head--left {
  text-align: left;
  max-width: 1100px;
  margin: 0 auto 30px;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__section-kicker {
  color: var(--site-primary-color, #0c9994);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__section-title {
  margin: 0 auto 14px;
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 900;
  max-width: 700px;
  color: var(--site-text-color, #1c1c1c);
  line-height: 1.2;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__section-head--left .cms-loyalty-v2__section-title {
  margin-left: 0;
  text-align: left;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__section-subtitle {
  margin: 0 auto;
  max-width: 600px;
  font-size: 16px;
  color: var(--site-text-muted, #6b7280);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__section-head--left .cms-loyalty-v2__section-subtitle {
  margin-left: 0;
  text-align: left;
}

/* ── ZONE 2 — Steps ──────────────────────────────────────── */
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__step {
  position: relative;
  background: #fff;
  padding: 32px 24px;
  border-radius: var(--site-radius-card, 14px);
  border: 1px solid var(--site-border, #e5e7eb);
  transition: transform 0.2s, box-shadow 0.2s;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__step:hover {
  transform: translateY(-4px);
  box-shadow: var(--site-shadow-md, 0 4px 16px rgba(0, 0, 0, 0.08));
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__step-number {
  position: absolute;
  top: -16px;
  left: 32px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--site-primary-color, #0c9994);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 16px;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__step-icon {
  width: 56px;
  height: 56px;
  background: var(--site-primary-light, #f0fdfb);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0 20px;
  color: var(--site-primary-color, #0c9994);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__step-title {
  margin: 0 0 8px;
  font-weight: 900;
  font-size: 18px;
  color: var(--site-text-color, #1c1c1c);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__step-text {
  margin: 0;
  font-size: 14px;
  color: var(--site-text-muted, #6b7280);
  line-height: 1.55;
}

/* ── ZONE 3 — Why cards ──────────────────────────────────── */
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
  justify-content: center;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__why-card {
  background: #fff;
  padding: 28px;
  border-radius: var(--site-radius-card, 14px);
  border-left: 4px solid var(--site-primary-color, #0c9994);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__why-card--accent {
  border-left-color: var(--site-accent-color, #f99907);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__why-card-icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--site-primary-soft, rgba(12, 153, 148, 0.10));
  color: var(--site-primary-color, #0c9994);
  padding: 8px;
  margin-bottom: 14px;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__why-card--accent .cms-loyalty-v2__why-card-icon {
  background: var(--site-accent-soft, rgba(249, 153, 7, 0.10));
  color: var(--site-accent-color, #f99907);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__why-card-title {
  margin: 0 0 8px;
  font-weight: 900;
  font-size: 17px;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__why-card-text {
  margin: 0;
  font-size: 14px;
  color: var(--site-text-muted, #6b7280);
  line-height: 1.55;
}

/* ── ZONE 4 — Tiers ──────────────────────────────────────── */
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__tier {
  position: relative;
  padding: 28px 24px;
  border-radius: var(--site-radius-card, 14px);
  text-align: center;
  background: var(--site-surface, #f5f5f5);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__tier--bronze {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__tier--silver {
  background: linear-gradient(135deg, #f1f5f9, #cbd5e1);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__tier--gold {
  background: linear-gradient(135deg, #fef3c7, #fbbf24);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__tier.is-current {
  box-shadow: 0 0 0 3px var(--site-primary-color, #0c9994);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__tier.is-current::after {
  content: '✓ Vous êtes ici';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--site-primary-color, #0c9994);
  color: #fff;
  padding: 4px 12px;
  border-radius: var(--site-radius-pill, 999px);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__tier-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  color: var(--cms-loyalty-tier-color, var(--site-primary-color, #0c9994));
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__tier-name {
  margin: 0 0 4px;
  font-weight: 900;
  font-size: 18px;
  color: var(--site-text-color, #1c1c1c);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__tier-threshold {
  font-size: 12px;
  color: var(--site-text-muted, #6b7280);
  margin-bottom: 14px;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__tier-perks {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  font-size: 13px;
  color: var(--site-text-color, #1c1c1c);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__tier-perks li {
  position: relative;
  padding: 4px 0 4px 18px;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__tier-perks li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 4px;
  color: var(--site-primary-color, #0c9994);
  font-weight: 900;
}

/* ── ZONE 5 — Partners ──────────────────────────────────── */
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__partner-card {
  background: #fff;
  padding: 24px;
  border-radius: var(--site-radius-card, 14px);
  display: flex;
  flex-direction: column;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__partner-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-weight: 700;
  color: var(--site-text-color, #1c1c1c);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__partner-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--site-primary-soft, rgba(12, 153, 148, 0.10));
  color: var(--site-primary-color, #0c9994);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__partner-name {
  font-weight: 800;
  font-size: 14px;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__partner-highlight {
  font-size: 36px;
  font-weight: 900;
  color: var(--site-accent-color, #f99907);
  margin-bottom: 6px;
  line-height: 1.1;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__partner-title {
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 800;
  color: var(--site-text-color, #1c1c1c);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__partner-text {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--site-text-muted, #6b7280);
  line-height: 1.5;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__partner-code-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--site-text-muted, #6b7280);
  margin-bottom: 4px;
  letter-spacing: 1px;
  font-weight: 700;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__partner-code-value {
  font-weight: 800;
  color: var(--site-primary-color, #0c9994);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  word-break: break-all;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__partner-cta {
  display: block;
  text-align: center;
  margin-top: auto;
  background: var(--site-primary-color, #0c9994);
  color: #fff;
  padding: 12px;
  border-radius: var(--site-radius-sm, 9px);
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__partner-cta:hover {
  background: var(--site-primary-dark, #105f5e);
}

/* PR #3071 — Gate révélation du code promo. 4 états :
   1. Révélé → .cms-loyalty-v2__partner-code-value (style existant) reste tel quel
   2. Anonyme + 3. Pas assez de points → .cms-loyalty-v2__partner-code-locked
   4. Connecté + assez de points → .cms-loyalty-v2__partner-code-reveal-btn   */
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__partner-code-locked {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(12, 153, 148, 0.06);
  border: 1px dashed rgba(12, 153, 148, 0.30);
  color: #1F2937;
  font-size: 13px;
  line-height: 1.45;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__partner-code-locked i {
  color: var(--site-primary-color, #0c9994);
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__partner-code-locked[data-state="insufficient"] {
  background: rgba(249, 153, 7, 0.06);
  border-color: rgba(249, 153, 7, 0.30);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__partner-code-locked[data-state="insufficient"] i {
  color: var(--site-accent-color, #F99907);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__partner-code-link {
  color: var(--site-primary-color, #0c9994);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__partner-code-reveal-form {
  margin: 0;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__partner-code-reveal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--site-primary-color, #0c9994), var(--site-accent-color, #F99907));
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__partner-code-reveal-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__partner-code-reveal-btn:active {
  transform: translateY(0);
}

/* ── ZONE 6 — Referral ──────────────────────────────────── */
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__referral {
  padding: 60px 32px;
  background: linear-gradient(
    135deg,
    var(--site-primary-color, #0c9994),
    var(--site-primary-dark, #105f5e)
  );
  color: #fff;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__referral-card {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__referral-text {
  color: #fff;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__referral-title {
  margin: 0 0 14px;
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 900;
  line-height: 1.2;
  color: #fff;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__referral-desc {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__referral-stats {
  margin-top: 16px;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.12);
  padding: 8px 14px;
  border-radius: var(--site-radius-pill, 999px);
  display: inline-block;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__referral-form {
  background: #fff;
  padding: 24px;
  border-radius: var(--site-radius-card, 14px);
  color: var(--site-text-color, #1c1c1c);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__referral-form-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--site-text-muted, #6b7280);
  margin-bottom: 6px;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__referral-form-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__referral-form-input {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid var(--site-border, #e5e7eb);
  border-radius: var(--site-radius-sm, 9px);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  font-size: 14px;
  background: var(--site-surface, #f5f5f5);
  color: var(--site-text-color, #1c1c1c);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  user-select: all;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__referral-form-btn {
  background: var(--site-accent-color, #f99907);
  color: #fff;
  padding: 12px 18px;
  border: none;
  border-radius: var(--site-radius-sm, 9px);
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, transform 0.15s;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__referral-form-btn:hover {
  background: color-mix(in srgb, var(--site-accent-color, #f99907) 85%, black);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__referral-form-btn.is-copied {
  background: var(--site-success, #22c55e);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__referral-share {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__referral-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--site-radius-sm, 9px);
  background: var(--site-surface, #f5f5f5);
  color: var(--site-text-color, #1c1c1c);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--site-border, #e5e7eb);
  transition: background 0.15s;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__referral-share-btn:hover {
  background: var(--site-primary-light, #f0fdfb);
  color: var(--site-primary-dark, #105f5e);
}

/* ── CTA login (sections opérationnelles) ───────────────── */
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__cta-block {
  max-width: 600px;
  margin: 0 auto;
  background: var(--site-primary-soft, rgba(12, 153, 148, 0.10));
  border-radius: var(--site-radius-card, 14px);
  padding: 36px 28px;
  text-align: center;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  color: var(--site-primary-color, #0c9994);
  margin-bottom: 14px;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__cta-title {
  margin: 0 0 8px;
  font-weight: 900;
  font-size: 20px;
  color: var(--site-text-color, #1c1c1c);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__cta-text {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--site-text-muted, #6b7280);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__cta-btn {
  display: inline-block;
  background: var(--site-primary-color, #0c9994);
  color: #fff;
  padding: 12px 28px;
  border-radius: var(--site-radius-sm, 9px);
  font-weight: 800;
  text-decoration: none;
  transition: background 0.15s;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__cta-btn:hover {
  background: var(--site-primary-dark, #105f5e);
}

/* ── Coupons (récompenses déjà échangées) ──────────────── */
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__coupons {
  max-width: 1100px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__coupon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--site-radius-card, 14px);
  background: #fff;
  border: 1px solid var(--site-border, #e5e7eb);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__coupon-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__coupon-name {
  font-weight: 800;
  font-size: 14px;
  color: var(--site-text-color, #1c1c1c);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__coupon-meta {
  font-size: 12px;
  color: var(--site-text-muted, #6b7280);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__coupon-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 800;
  font-size: 14px;
  background: var(--site-primary-soft, rgba(12, 153, 148, 0.10));
  color: var(--site-primary-color, #0c9994);
  padding: 8px 14px;
  border-radius: var(--site-radius-sm, 9px);
  user-select: all;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__coupon-state {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--site-radius-pill, 999px);
  background: var(--site-surface, #f5f5f5);
  color: var(--site-text-muted, #6b7280);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__coupon-state--used,
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__coupon-state--expired {
  background: rgba(239, 68, 68, 0.10);
  color: #b91c1c;
}

/* ── Catalogue récompenses ──────────────────────────────── */
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__rewards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__reward-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--site-border, #e5e7eb);
  border-radius: var(--site-radius-card, 14px);
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__reward-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--site-shadow-md, 0 4px 16px rgba(0, 0, 0, 0.08));
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__reward-card.is-available {
  border-color: var(--site-primary-color, #0c9994);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__reward-card.is-locked {
  opacity: 0.78;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__reward-media {
  aspect-ratio: 16 / 9;
  background: var(--site-surface, #f5f5f5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--site-text-muted, #6b7280);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__reward-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__reward-fallback {
  color: var(--site-primary-color, #0c9994);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__reward-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__reward-name {
  margin: 0;
  font-weight: 900;
  font-size: 16px;
  color: var(--site-text-color, #1c1c1c);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__reward-desc {
  margin: 0;
  font-size: 13px;
  color: var(--site-text-muted, #6b7280);
  line-height: 1.5;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__reward-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--site-accent-color, #f99907);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__reward-cost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--site-radius-pill, 999px);
  background: var(--site-primary-soft, rgba(12, 153, 148, 0.10));
  color: var(--site-primary-color, #0c9994);
  font-weight: 800;
  font-size: 13px;
  align-self: flex-start;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__redeem-form {
  margin-top: auto;
  padding-top: 8px;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__redeem-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: var(--site-radius-sm, 9px);
  background: var(--site-primary-color, #0c9994);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  margin-top: auto;
  font-family: inherit;
  transition: background 0.15s;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__redeem-btn:hover {
  background: var(--site-primary-dark, #105f5e);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__redeem-btn--ghost {
  background: transparent;
  border: 1px solid var(--site-primary-color, #0c9994);
  color: var(--site-primary-color, #0c9994);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__redeem-btn--ghost:hover {
  background: var(--site-primary-soft, rgba(12, 153, 148, 0.10));
  color: var(--site-primary-dark, #105f5e);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__redeem-btn--disabled,
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__redeem-btn:disabled {
  background: var(--site-surface, #f5f5f5);
  color: var(--site-text-muted, #6b7280);
  cursor: not-allowed;
}

/* ── Historique transactions ────────────────────────────── */
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__history {
  max-width: 1100px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__transaction {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border-radius: var(--site-radius-sm, 9px);
  background: #fff;
  border: 1px solid var(--site-border, #e5e7eb);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__transaction-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--site-primary-soft, rgba(12, 153, 148, 0.10));
  color: var(--site-primary-color, #0c9994);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__transaction--spend .cms-loyalty-v2__transaction-icon {
  background: var(--site-accent-soft, rgba(249, 153, 7, 0.10));
  color: var(--site-accent-color, #f99907);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__transaction-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__transaction-label {
  font-weight: 800;
  font-size: 14px;
  color: var(--site-text-color, #1c1c1c);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__transaction-meta {
  font-size: 12px;
  color: var(--site-text-muted, #6b7280);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__transaction-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__transaction-points {
  font-weight: 900;
  font-size: 14px;
  color: var(--site-primary-color, #0c9994);
  white-space: nowrap;
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__transaction--spend .cms-loyalty-v2__transaction-points {
  color: var(--site-accent-color, #f99907);
}
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__transaction-date {
  font-size: 11px;
  color: var(--site-text-muted, #6b7280);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__hero {
    padding: 40px 20px 60px;
  }
  .cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__hero-inner,
  .cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__referral-card {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__section,
  .cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__referral {
    padding: 50px 20px;
  }
  .cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__steps,
  .cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__why-grid,
  .cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__tiers,
  .cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__partners-grid {
    grid-template-columns: 1fr;
  }
  .cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__hero-card-value {
    font-size: 44px;
  }
}
@media (max-width: 600px) {
  .cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__transaction {
    grid-template-columns: 32px 1fr;
  }
  .cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__transaction-amount {
    grid-column: 2;
    align-items: flex-start;
  }
  .cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__coupon {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ============================================================
   CONTACT — Page Prendre contact (Cms::Public::ContactController#show)
   Scope: .cms-section.cms-contact
   ============================================================ */
.cms-section.cms-contact {
  font-family: var(--site-font-family);
  color: var(--site-text-color);
  background: var(--site-background);
  display: block;
  padding: 0;
  overflow: visible;
}
.cms-section.cms-contact a { color: inherit; text-decoration: none; }

.cms-section.cms-contact .cms-contact__breadcrumb {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 32px 8px;
  font-size: 13px;
  color: var(--site-text-muted);
}
.cms-section.cms-contact .cms-contact__breadcrumb a { color: var(--site-primary-color); font-weight: 700; }
.cms-section.cms-contact .cms-contact__breadcrumb span[aria-hidden] { margin: 0 8px; opacity: .5; }

.cms-section.cms-contact .cms-contact__hero {
  background: linear-gradient(135deg, var(--site-primary-light, #F0FDFB) 0%, #E8F8F6 100%);
  padding: 48px 32px 60px;
  position: relative;
  overflow: hidden;
}
.cms-section.cms-contact .cms-contact__hero::before,
.cms-section.cms-contact .cms-contact__hero::after {
  content: '';
  position: absolute;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--site-primary-soft, rgba(12,153,148,0.10)) 0%, transparent 70%);
}
.cms-section.cms-contact .cms-contact__hero::before { top: -80px; right: -60px; }
.cms-section.cms-contact .cms-contact__hero::after  { bottom: -100px; left: -40px; }
.cms-section.cms-contact .cms-contact__hero-inner { position: relative; z-index: 1; text-align: center; max-width: 900px; margin: 0 auto; }
.cms-section.cms-contact .cms-contact__title { font-size: 38px; font-weight: 900; color: var(--site-primary-dark, #105F5E); margin-bottom: 12px; }
.cms-section.cms-contact .cms-contact__subtitle { font-size: 16px; color: var(--site-text-muted); max-width: 600px; margin: 0 auto; }

.cms-section.cms-contact .cms-contact__grid {
  max-width: 1100px;
  margin: -32px auto 32px;
  padding: 0 32px;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
}

.cms-section.cms-contact .cms-contact__form-card {
  background: white;
  border: 1px solid var(--site-border, #E5E7EB);
  border-radius: var(--site-radius-card, 14px);
  padding: 32px;
  box-shadow: var(--site-shadow-md, 0 4px 16px rgba(0,0,0,0.08));
}
.cms-section.cms-contact .cms-contact__form-title { font-size: 22px; font-weight: 900; color: var(--site-primary-dark, #105F5E); margin-bottom: 4px; }
.cms-section.cms-contact .cms-contact__form-sub { font-size: 13.5px; color: var(--site-text-muted); margin-bottom: 24px; }

.cms-section.cms-contact .cms-contact__flash {
  padding: 12px 14px;
  border-radius: var(--site-radius-sm, 9px);
  font-size: 13px;
  margin-bottom: 16px;
  font-weight: 700;
}
.cms-section.cms-contact .cms-contact__flash--success {
  background: rgba(34,197,94,0.10);
  color: #16A34A;
  border: 1px solid rgba(34,197,94,0.3);
}
.cms-section.cms-contact .cms-contact__flash--error {
  background: rgba(239,68,68,0.08);
  color: #DC2626;
  border: 1px solid rgba(239,68,68,0.3);
}

.cms-section.cms-contact .cms-contact__row { margin-bottom: 16px; }
.cms-section.cms-contact .cms-contact__row--double { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cms-section.cms-contact .cms-contact__field { display: flex; flex-direction: column; }
.cms-section.cms-contact .cms-contact__label {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--site-text-color);
  margin-bottom: 6px;
}
.cms-section.cms-contact .cms-contact__label-opt { font-weight: 600; color: var(--site-text-muted); font-size: 11.5px; margin-left: 4px; }

.cms-section.cms-contact .cms-contact__input,
.cms-section.cms-contact .cms-contact__select,
.cms-section.cms-contact .cms-contact__textarea {
  width: 100%;
  padding: 11px 14px;
  font-family: var(--site-font-family);
  font-size: 14px;
  border: 1px solid var(--site-border, #E5E7EB);
  border-radius: var(--site-radius-sm, 9px);
  background: var(--site-surface, #F5F5F5);
  color: var(--site-text-color);
  transition: border-color .15s, background .15s;
}
.cms-section.cms-contact .cms-contact__input:focus,
.cms-section.cms-contact .cms-contact__select:focus,
.cms-section.cms-contact .cms-contact__textarea:focus {
  outline: none;
  border-color: var(--site-primary-color);
  background: white;
}
.cms-section.cms-contact .cms-contact__textarea { min-height: 110px; resize: vertical; }

.cms-section.cms-contact .cms-contact__rgpd {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  background: var(--site-primary-soft, rgba(12,153,148,0.10));
  border-radius: var(--site-radius-sm, 9px);
  font-size: 12.5px;
  color: var(--site-text-color);
  margin-bottom: 16px;
  line-height: 1.55;
}
.cms-section.cms-contact .cms-contact__rgpd input { margin-top: 2px; flex-shrink: 0; }
.cms-section.cms-contact .cms-contact__rgpd a { color: var(--site-primary-dark, #105F5E); font-weight: 800; text-decoration: underline; }

.cms-section.cms-contact .cms-contact__submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: var(--site-primary-color);
  color: white;
  border: none;
  border-radius: var(--site-radius-pill, 999px);
  font-family: var(--site-font-family);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.cms-section.cms-contact .cms-contact__submit:hover {
  background: var(--site-primary-dark, #105F5E);
  transform: translateY(-1px);
}
.cms-section.cms-contact .cms-contact__microtext {
  display: block;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--site-text-muted);
}

.cms-section.cms-contact .cms-contact__info-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cms-section.cms-contact .cms-contact__info-card {
  background: white;
  border: 1px solid var(--site-border, #E5E7EB);
  border-radius: var(--site-radius-card, 14px);
  padding: 18px 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.cms-section.cms-contact .cms-contact__info-ico {
  width: 38px; height: 38px;
  border-radius: var(--site-radius-sm, 9px);
  background: var(--site-primary-soft, rgba(12,153,148,0.10));
  color: var(--site-primary-dark, #105F5E);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cms-section.cms-contact .cms-contact__info-label {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--site-text-muted);
  margin-bottom: 4px;
}
.cms-section.cms-contact .cms-contact__info-value {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--site-text-color);
}
.cms-section.cms-contact .cms-contact__info-value a { color: var(--site-primary-dark, #105F5E); }
.cms-section.cms-contact .cms-contact__info-sub {
  font-size: 12.5px;
  color: var(--site-text-muted);
  margin-top: 2px;
}

.cms-section.cms-contact .cms-contact__socials {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.cms-section.cms-contact .cms-contact__social-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--site-primary-soft, rgba(12,153,148,0.10));
  color: var(--site-primary-dark, #105F5E);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.cms-section.cms-contact .cms-contact__social-btn:hover {
  background: var(--site-primary-color);
  color: white;
}

.cms-section.cms-contact .cms-contact__faq {
  padding: 48px 0;
  background: var(--site-surface, #F5F5F5);
}
.cms-section.cms-contact .cms-contact__faq-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
}
.cms-section.cms-contact .cms-contact__faq-head {
  text-align: center;
  margin-bottom: 32px;
}
.cms-section.cms-contact .cms-contact__overline {
  display: inline-block;
  padding: 4px 14px;
  background: var(--site-primary-soft, rgba(12,153,148,0.10));
  color: var(--site-primary-dark, #105F5E);
  border-radius: var(--site-radius-pill, 999px);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 12px;
}
.cms-section.cms-contact .cms-contact__faq-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--site-primary-dark, #105F5E);
}
.cms-section.cms-contact .cms-contact__faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cms-section.cms-contact .cms-contact__faq-item {
  background: white;
  border: 1px solid var(--site-border, #E5E7EB);
  border-radius: var(--site-radius-card, 14px);
  overflow: hidden;
}
.cms-section.cms-contact .cms-contact__faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-weight: 800;
  font-size: 15px;
  color: var(--site-text-color);
}
.cms-section.cms-contact .cms-contact__faq-item summary::-webkit-details-marker { display: none; }
.cms-section.cms-contact .cms-contact__faq-item summary::after {
  content: '+';
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--site-primary-soft, rgba(12,153,148,0.10));
  color: var(--site-primary-dark, #105F5E);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 18px;
  flex-shrink: 0;
  transition: transform .2s;
}
.cms-section.cms-contact .cms-contact__faq-item[open] summary::after { content: '−'; }
.cms-section.cms-contact .cms-contact__faq-body {
  padding: 0 22px 18px;
  font-size: 14px;
  color: var(--site-text-muted);
  line-height: 1.6;
}

.cms-section.cms-contact .cms-contact__press-band {
  max-width: 1100px;
  margin: 32px auto 64px;
  padding: 28px 32px;
  background: linear-gradient(135deg, var(--site-primary-color), var(--site-primary-dark, #105F5E));
  color: white;
  border-radius: var(--site-radius-card, 14px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cms-section.cms-contact .cms-contact__press-band-text { font-size: 15px; font-weight: 700; }
.cms-section.cms-contact .cms-contact__press-band-text strong { font-weight: 900; }
.cms-section.cms-contact .cms-contact__press-band-btn {
  padding: 10px 22px;
  background: white;
  color: var(--site-primary-dark, #105F5E);
  border-radius: var(--site-radius-pill, 999px);
  font-weight: 800;
  font-size: 13px;
}

@media (max-width: 900px) {
  .cms-section.cms-contact .cms-contact__grid { grid-template-columns: 1fr; }
  .cms-section.cms-contact .cms-contact__row--double { grid-template-columns: 1fr; }
  .cms-section.cms-contact .cms-contact__title { font-size: 28px; }
  .cms-section.cms-contact .cms-contact__press-band { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ============================================================
   AVIS — Page publique (Cms::Public::ReviewsController#show)
   Scope: .cms-section.cms-reviews-page
   ============================================================ */
.cms-section.cms-reviews-page {
  font-family: var(--site-font-family);
  color: var(--site-text-color);
  background: var(--site-background);
  display: block;
  padding: 0;
  overflow: visible;
  --star-color: var(--site-accent-color, #F99907);
  --google-blue: #4285F4;
  --google-red: #EA4335;
  --google-yellow: #FBBC05;
  --google-green: #34A853;
}
.cms-section.cms-reviews-page a { color: inherit; text-decoration: none; }

.cms-section.cms-reviews-page .cms-reviews-page__breadcrumb {
  max-width: 1100px; margin: 0 auto; padding: 24px 32px 8px;
  font-size: 13px; color: var(--site-text-muted);
}
.cms-section.cms-reviews-page .cms-reviews-page__breadcrumb a { color: var(--site-primary-color); font-weight: 700; }
.cms-section.cms-reviews-page .cms-reviews-page__breadcrumb span[aria-hidden] { margin: 0 8px; opacity: .5; }

.cms-section.cms-reviews-page .cms-reviews-page__hero {
  background: linear-gradient(135deg, var(--site-primary-light, #F0FDFB) 0%, #E8F8F6 100%);
  padding: 48px 32px 60px;
  position: relative; overflow: hidden;
}
.cms-section.cms-reviews-page .cms-reviews-page__hero::before,
.cms-section.cms-reviews-page .cms-reviews-page__hero::after {
  content: ''; position: absolute; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, var(--site-primary-soft, rgba(12,153,148,0.10)) 0%, transparent 70%);
}
.cms-section.cms-reviews-page .cms-reviews-page__hero::before { top: -80px; right: -60px; }
.cms-section.cms-reviews-page .cms-reviews-page__hero::after  { bottom: -100px; left: -40px; }
.cms-section.cms-reviews-page .cms-reviews-page__hero-inner { position: relative; z-index: 1; text-align: center; max-width: 900px; margin: 0 auto; }
.cms-section.cms-reviews-page .cms-reviews-page__title { font-size: 38px; font-weight: 900; color: var(--site-primary-dark, #105F5E); margin-bottom: 12px; }
.cms-section.cms-reviews-page .cms-reviews-page__subtitle { font-size: 16px; color: var(--site-text-muted); max-width: 600px; margin: 0 auto; }

.cms-section.cms-reviews-page .cms-reviews-page__global-rating {
  max-width: 1100px; margin: -32px auto 32px; padding: 0 32px; position: relative; z-index: 2;
}
.cms-section.cms-reviews-page .cms-reviews-page__rating-card {
  background: white; border: 1px solid var(--site-border, #E5E7EB);
  border-radius: var(--site-radius-card, 14px); padding: 32px;
  box-shadow: var(--site-shadow-md, 0 4px 16px rgba(0,0,0,0.08));
  display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: center;
}
.cms-section.cms-reviews-page .cms-reviews-page__rating-card--no-distribution { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
.cms-section.cms-reviews-page .cms-reviews-page__rating-block { text-align: center; padding-right: 40px; border-right: 1px solid var(--site-border, #E5E7EB); }
.cms-section.cms-reviews-page .cms-reviews-page__rating-card--no-distribution .cms-reviews-page__rating-block { padding-right: 0; border-right: none; }
.cms-section.cms-reviews-page .cms-reviews-page__score { font-size: 64px; font-weight: 900; color: var(--site-primary-dark, #105F5E); line-height: 1; }
.cms-section.cms-reviews-page .cms-reviews-page__score sup { font-size: 28px; color: var(--site-text-muted); font-weight: 700; }
.cms-section.cms-reviews-page .cms-reviews-page__stars { font-size: 26px; color: var(--star-color); letter-spacing: 2px; margin: 8px 0 12px; }
.cms-section.cms-reviews-page .cms-reviews-page__count { font-size: 14px; font-weight: 700; color: var(--site-text-muted); }
.cms-section.cms-reviews-page .cms-reviews-page__google-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; margin-top: 12px;
  background: white; border: 1px solid var(--site-border, #E5E7EB);
  border-radius: var(--site-radius-pill, 999px); font-size: 12.5px; font-weight: 800;
}
.cms-section.cms-reviews-page .cms-reviews-page__google-logo { display: inline-flex; gap: 0; font-weight: 900; font-size: 14px; }
.cms-section.cms-reviews-page .cms-reviews-page__google-logo span:nth-child(1) { color: var(--google-blue); }
.cms-section.cms-reviews-page .cms-reviews-page__google-logo span:nth-child(2) { color: var(--google-red); }
.cms-section.cms-reviews-page .cms-reviews-page__google-logo span:nth-child(3) { color: var(--google-yellow); }
.cms-section.cms-reviews-page .cms-reviews-page__google-logo span:nth-child(4) { color: var(--google-blue); }
.cms-section.cms-reviews-page .cms-reviews-page__google-logo span:nth-child(5) { color: var(--google-green); }
.cms-section.cms-reviews-page .cms-reviews-page__google-logo span:nth-child(6) { color: var(--google-red); }
.cms-section.cms-reviews-page .cms-reviews-page__verified-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  background: var(--site-success-soft, rgba(34,197,94,0.10)); color: var(--site-success, #22C55E);
  border-radius: var(--site-radius-pill, 999px); font-size: 11px; font-weight: 800;
}
.cms-section.cms-reviews-page .cms-reviews-page__cta-google {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; margin-top: 16px;
  background: var(--site-primary-color); color: white;
  border-radius: var(--site-radius-pill, 999px); font-size: 13px; font-weight: 800;
}
.cms-section.cms-reviews-page .cms-reviews-page__cta-google:hover { background: var(--site-primary-dark, #105F5E); }

.cms-section.cms-reviews-page .cms-reviews-page__distribution { display: flex; flex-direction: column; gap: 8px; }
.cms-section.cms-reviews-page .cms-reviews-page__distrib-row { display: grid; grid-template-columns: 50px 1fr 60px; align-items: center; gap: 12px; font-size: 13px; }
.cms-section.cms-reviews-page .cms-reviews-page__distrib-label { font-weight: 700; }
.cms-section.cms-reviews-page .cms-reviews-page__distrib-star { color: var(--star-color); margin-left: 2px; }
.cms-section.cms-reviews-page .cms-reviews-page__distrib-bar { height: 8px; background: var(--site-surface, #F5F5F5); border-radius: var(--site-radius-pill, 999px); overflow: hidden; }
.cms-section.cms-reviews-page .cms-reviews-page__distrib-fill { height: 100%; background: var(--star-color); border-radius: var(--site-radius-pill, 999px); }
.cms-section.cms-reviews-page .cms-reviews-page__distrib-pct { text-align: right; font-weight: 800; color: var(--site-text-muted); }

.cms-section.cms-reviews-page .cms-reviews-page__section { padding: 48px 0; }
.cms-section.cms-reviews-page .cms-reviews-page__section--alt { background: var(--site-surface, #F5F5F5); }
.cms-section.cms-reviews-page .cms-reviews-page__section-inner { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
.cms-section.cms-reviews-page .cms-reviews-page__section-head { text-align: center; margin-bottom: 32px; }
.cms-section.cms-reviews-page .cms-reviews-page__overline {
  display: inline-block; padding: 4px 14px;
  background: var(--site-primary-soft, rgba(12,153,148,0.10)); color: var(--site-primary-dark, #105F5E);
  border-radius: var(--site-radius-pill, 999px);
  font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.2px;
  margin-bottom: 12px;
}
.cms-section.cms-reviews-page .cms-reviews-page__section-title { font-size: 28px; font-weight: 800; color: var(--site-primary-dark, #105F5E); }
.cms-section.cms-reviews-page .cms-reviews-page__section-sub { font-size: 14px; color: var(--site-text-muted); margin-top: 8px; }

.cms-section.cms-reviews-page .cms-reviews-page__grid { display: grid; gap: 20px; }
.cms-section.cms-reviews-page .cms-reviews-page__grid--3 { grid-template-columns: repeat(3, 1fr); }
.cms-section.cms-reviews-page .cms-reviews-page__grid--2 { grid-template-columns: repeat(2, 1fr); }

.cms-section.cms-reviews-page .cms-reviews-page__card {
  background: white; border: 1px solid var(--site-border, #E5E7EB);
  border-radius: var(--site-radius-card, 14px); padding: 24px;
  position: relative; transition: transform .2s, box-shadow .2s;
}
.cms-section.cms-reviews-page .cms-reviews-page__card:hover { transform: translateY(-2px); box-shadow: var(--site-shadow-md, 0 4px 16px rgba(0,0,0,0.08)); }
.cms-section.cms-reviews-page .cms-reviews-page__card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cms-section.cms-reviews-page .cms-reviews-page__avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--site-primary-color); color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px;
}
.cms-section.cms-reviews-page .cms-reviews-page__card-author { font-weight: 800; font-size: 14px; }
.cms-section.cms-reviews-page .cms-reviews-page__card-date { font-size: 12px; color: var(--site-text-muted); }
.cms-section.cms-reviews-page .cms-reviews-page__card-stars { color: var(--star-color); font-size: 16px; letter-spacing: 1px; margin-bottom: 8px; }
.cms-section.cms-reviews-page .cms-reviews-page__card-title { font-weight: 800; font-size: 14.5px; margin-bottom: 6px; }
.cms-section.cms-reviews-page .cms-reviews-page__card-text { font-size: 14px; color: var(--site-text-color); line-height: 1.55; }
.cms-section.cms-reviews-page .cms-reviews-page__source {
  position: absolute; top: 16px; right: 16px;
  padding: 3px 9px; border-radius: var(--site-radius-pill, 999px);
  font-size: 10px; font-weight: 800;
  background: white; border: 1px solid var(--site-border, #E5E7EB);
  display: inline-flex; align-items: center; gap: 4px;
}
.cms-section.cms-reviews-page .cms-reviews-page__source--google { color: var(--google-blue); }
.cms-section.cms-reviews-page .cms-reviews-page__source--verified { color: var(--site-success, #22C55E); border-color: rgba(34,197,94,0.3); }
.cms-section.cms-reviews-page .cms-reviews-page__card-item {
  margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--site-border, #E5E7EB);
  font-size: 12.5px; color: var(--site-text-muted);
}
.cms-section.cms-reviews-page .cms-reviews-page__card-item b { color: var(--site-text-color); font-weight: 800; }
.cms-section.cms-reviews-page .cms-reviews-page__card-owner { font-size: 11.5px; color: var(--site-text-muted); margin-top: 4px; }

.cms-section.cms-reviews-page .cms-reviews-page__cta-final {
  max-width: 900px; margin: 32px auto 64px; padding: 40px 32px;
  background: linear-gradient(135deg, var(--site-primary-color), var(--site-primary-dark, #105F5E));
  color: white; border-radius: var(--site-radius-card, 14px); text-align: center;
}
.cms-section.cms-reviews-page .cms-reviews-page__cta-final h2 { font-size: 24px; margin-bottom: 8px; }
.cms-section.cms-reviews-page .cms-reviews-page__cta-final p { font-size: 14px; opacity: 0.9; margin-bottom: 20px; }
.cms-section.cms-reviews-page .cms-reviews-page__cta-final-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px;
  background: white; color: var(--site-primary-dark, #105F5E);
  border-radius: var(--site-radius-pill, 999px); font-weight: 800; font-size: 14px;
}

.cms-section.cms-reviews-page .cms-reviews-page__empty {
  max-width: 700px; margin: 60px auto; padding: 40px 32px; text-align: center;
}
.cms-section.cms-reviews-page .cms-reviews-page__empty h2 { color: var(--site-primary-dark, #105F5E); font-size: 24px; margin-bottom: 8px; }
.cms-section.cms-reviews-page .cms-reviews-page__empty p { color: var(--site-text-muted); font-size: 14px; }

@media (max-width: 900px) {
  .cms-section.cms-reviews-page .cms-reviews-page__rating-card { grid-template-columns: 1fr; gap: 24px; }
  .cms-section.cms-reviews-page .cms-reviews-page__rating-block { padding-right: 0; padding-bottom: 24px; border-right: none; border-bottom: 1px solid var(--site-border, #E5E7EB); }
  .cms-section.cms-reviews-page .cms-reviews-page__grid--3,
  .cms-section.cms-reviews-page .cms-reviews-page__grid--2 { grid-template-columns: 1fr; }
  .cms-section.cms-reviews-page .cms-reviews-page__title { font-size: 28px; }
}

/* Hero proof — cliquable vers la page Avis */
.cms-hero--marketplace-search-mosaic a.cms-hero__proof,
.cms-hero--marketplace-search-mosaic .cms-hero__proof--clickable {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  border-radius: var(--site-radius-pill, 999px);
  padding: 6px 10px;
  margin: -6px -10px;
  transition: background-color 0.15s ease;
}
.cms-hero--marketplace-search-mosaic a.cms-hero__proof:hover,
.cms-hero--marketplace-search-mosaic .cms-hero__proof--clickable:hover {
  background-color: rgba(255, 255, 255, 0.6);
}

/* ============================================================
   FIX — Page /avis, /contact, /loyalty : coller le hero sous la
   navbar marketplace (comme /location) + override text-transform
   sur le checkbox RGPD + force white sur le CTA final
   ============================================================ */
body[data-navbar-variant^="marketplace"] .public-site-main > .public-page > .cms-section.cms-contact:first-child,
body[data-navbar-variant^="marketplace"] .public-site-main > .public-page > .cms-section.cms-reviews-page:first-child,
body[data-navbar-variant^="marketplace"] .public-site-main > .public-page > .cms-section.cms-loyalty.cms-loyalty--v2:first-child {
  margin-top: 0;
  padding-top: 0;
}
body[data-navbar-variant^="marketplace"] .public-site-main > .public-page > .cms-section.cms-contact:first-child > .cms-contact__hero,
body[data-navbar-variant^="marketplace"] .public-site-main > .public-page > .cms-section.cms-reviews-page:first-child > .cms-reviews-page__hero,
body[data-navbar-variant^="marketplace"] .public-site-main > .public-page > .cms-section.cms-loyalty.cms-loyalty--v2:first-child > .cms-loyalty-v2__hero {
  margin-top: 0;
}

/* RGPD checkbox — pas de capitalisation forcée (texte de phrase, pas un label de champ) */
.cms-section.cms-contact .cms-contact__rgpd,
.cms-section.cms-contact .cms-contact__rgpd span {
  text-transform: none !important;
  letter-spacing: normal;
  font-weight: 400;
  font-size: 12.5px;
}
.cms-section.cms-contact .cms-contact__rgpd a {
  font-weight: 700;
}

/* CTA final page Avis — force le titre h2 en blanc (override h1-h6 global) */
.cms-section.cms-reviews-page .cms-reviews-page__cta-final,
.cms-section.cms-reviews-page .cms-reviews-page__cta-final h2,
.cms-section.cms-reviews-page .cms-reviews-page__cta-final p {
  color: white !important;
}
.cms-section.cms-reviews-page .cms-reviews-page__cta-final-btn {
  color: var(--site-primary-dark, #105F5E) !important;
}

/* ============================================================
   FIX 2 — Gap top persistant + alignement font des titres hero
   sur les pages /contact, /avis, /loyalty (calé sur la home
   .cms-hero--marketplace-search-mosaic .cms-hero__title)
   ============================================================ */

/* Force padding-top:0 sur le main wrapper en marketplace, avec
   spécificité accrue (body.public-site-body + !important) pour
   battre tout reset/cache navigateur. */
body.public-site-body[data-navbar-variant^="marketplace"] .public-site-main {
  padding-top: 0 !important;
}

/* Alignement font des titres hero sur la home — clamp 34→58, 900,
   line-height 1.05, letter-spacing -1.2px, Nunito (--site-font-family) */
.cms-section.cms-contact .cms-contact__title,
.cms-section.cms-reviews-page .cms-reviews-page__title,
.cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__hero-title {
  font-size: clamp(34px, 4.5vw, 58px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -1.2px;
  font-family: var(--site-font-family);
}

@media (max-width: 600px) {
  .cms-section.cms-contact .cms-contact__title,
  .cms-section.cms-reviews-page .cms-reviews-page__title,
  .cms-section.cms-loyalty.cms-loyalty--v2 .cms-loyalty-v2__hero-title {
    font-size: 32px;
    letter-spacing: -0.8px;
  }
}

/* ============================================================
   FIX 3 — Hard kill du gap top sur /contact, /avis, /loyalty
   pour les marketplaces (override .cms-section padding:100px 32px
   global défini dans public_site.css avec !important explicite).
   ============================================================ */
body.public-site-body[data-navbar-variant^="marketplace"] main.public-site-main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.public-site-body[data-navbar-variant^="marketplace"] main.public-site-main > section.cms-section.cms-contact,
body.public-site-body[data-navbar-variant^="marketplace"] main.public-site-main > section.cms-section.cms-reviews-page,
body.public-site-body[data-navbar-variant^="marketplace"] main.public-site-main > section.cms-section.cms-loyalty.cms-loyalty--v2 {
  padding: 0 !important;
  margin: 0 !important;
  display: block;
}
body.public-site-body[data-navbar-variant^="marketplace"] section.cms-section.cms-contact > .cms-contact__hero,
body.public-site-body[data-navbar-variant^="marketplace"] section.cms-section.cms-reviews-page > .cms-reviews-page__hero,
body.public-site-body[data-navbar-variant^="marketplace"] section.cms-section.cms-loyalty.cms-loyalty--v2 > .cms-loyalty-v2__hero {
  margin-top: 0 !important;
}

/* ========================================
   AVAILABILITY CALENDAR (Sujet #3 — Stock & dispo)
   ======================================== */

.cms-rental-item__availability {
  background: var(--site-surface-color, #F5F5F5);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
}
.cms-rental-item__availability-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--site-text-color, #1C1C1C);
}
.ac-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.ac-month-label {
  font-weight: 700;
  font-size: 15px;
  text-transform: capitalize;
  color: var(--site-text-color, #1C1C1C);
}
.ac-nav { display: flex; gap: 6px; }
.ac-nav button {
  width: 32px; height: 32px;
  border: none; border-radius: 8px;
  background: #fff; cursor: pointer;
  font-size: 16px; color: var(--site-text-muted, #6B7280);
  transition: background 0.15s;
}
.ac-nav button:hover {
  background: var(--site-primary-light, #F0FDFB);
  color: var(--site-primary-color, #0C9994);
}
.ac-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

/* EMMA-46 (test mobile amie) — gardes anti-débordement :
   1. le calendrier ne doit jamais rendre la page plus large que l'écran ;
   2. s'il est contraint (vieux mobiles, zooms), il DEVIENT coulissable
      horizontalement à l'intérieur de son propre cadre (html/body sont en
      overflow-x hidden : un débordement de page serait inatteignable). */
[data-controller="availability-calendar"] {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ac-grid { min-width: 296px; }

/* Anti « grid blowout » : les colonnes du détail objet peuvent rétrécir
   sous la largeur intrinsèque de leur contenu (min-width:auto par défaut). */
.cms-rental-item--marketplace-detail .cms-rental-item__layout > * {
  min-width: 0;
}
.ac-day-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--site-text-muted, #6B7280);
  text-align: center;
  padding: 6px 0;
}
.ac-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s;
}

/* EMMA-37 — jours passés : grisés, non cliquables (indisponibles). */
.ac-day.ac-past {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
  text-decoration: line-through;
}
.ac-day:hover { transform: scale(1.05); }
.ac-empty { background: transparent; cursor: default; }
.ac-available {
  background: rgba(16, 185, 129, 0.1);
  color: rgb(16, 185, 129);
}
.ac-available:hover { background: rgba(16, 185, 129, 0.25); }
.ac-reserved {
  background: rgba(239, 68, 68, 0.15);
  color: rgb(239, 68, 68);
  cursor: not-allowed;
}
.ac-reserved:hover { transform: none; }
.ac-blocked {
  background: rgba(156, 163, 175, 0.2);
  color: rgb(156, 163, 175);
  cursor: not-allowed;
}
.ac-blocked:hover { transform: none; }
.ac-today { box-shadow: 0 0 0 2px var(--site-primary-color, #0C9994); }
.ac-selected {
  background: var(--site-primary-color, #0C9994) !important;
  color: #fff !important;
}
.ac-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 16px;
  font-size: 11px;
  color: var(--site-text-muted, #6B7280);
}
.ac-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ac-legend-item .ac-dot {
  width: 12px; height: 12px;
  border-radius: 4px;
  display: inline-block;
}
.ac-legend-item .ac-dot.ac-available { background: rgba(16, 185, 129, 0.3); }
.ac-legend-item .ac-dot.ac-reserved  { background: rgba(239, 68, 68, 0.3); }
.ac-legend-item .ac-dot.ac-blocked   { background: rgba(156, 163, 175, 0.3); }
.ac-legend-item .ac-dot.ac-selected  { background: var(--site-primary-color, #0C9994); }
.ac-loading, .ac-error {
  text-align: center;
  padding: 32px;
  font-size: 13px;
  color: var(--site-text-muted, #6B7280);
}
.ac-error { color: rgb(239, 68, 68); }

/* Card availability badge (Sujet #3) — Backlog Emma 4e itération :
   fond blanc presque opaque (rgba 0.92) au lieu d'une teinte couleur très
   diluée + blur. Sur les photos claires ou texturées (tente jaune, robe
   violette, vélo blanc), le badge devient enfin lisible sans dépendre du
   backdrop-filter (mal supporté + ne marche pas sur fond mat). */
.cms-rental-catalog__card-avail {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
}
.cms-rental-catalog__card-avail-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
/* La couleur du texte + du dot porte désormais l'identité du statut,
   le fond reste blanc pour garantir la lisibilité quel que soit le visuel. */
.cms-rental-catalog__card-avail--available {
  color: rgb(16, 134, 90);
}
.cms-rental-catalog__card-avail--upcoming {
  color: rgb(180, 99, 0);
}
.cms-rental-catalog__card-avail--booked {
  color: rgb(184, 28, 28);
}

/* ========================================
   OWNER AGENDA GANTT (Sujet #3 PR B)
   ======================================== */

.cms-owner-agenda { padding: 32px 0; }
.cms-owner-agenda .cms-owner-items__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Tabs (réutilise le pattern existant si présent, sinon override léger) */
.cms-owner-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid #D1D5DB;
  margin-bottom: 32px;
}
.cms-owner-tab {
  padding: 12px 20px;
  font-weight: 700;
  font-size: 14px;
  color: #6B7280;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  text-decoration: none;
  transition: all 0.2s;
}
.cms-owner-tab:hover { color: #1C1C1C; }
.cms-owner-tab--active {
  color: var(--site-primary-color, #0C9994);
  border-bottom-color: var(--site-primary-color, #0C9994);
}
.cms-owner-tab__badge {
  display: inline-block;
  min-width: 20px;
  padding: 2px 6px;
  background: var(--site-primary-color, #0C9994);
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
}

/* Stats cards */
.cms-owner-agenda__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.cms-owner-agenda__stat {
  background: #fff;
  border: 1px solid #D1D5DB;
  border-radius: 12px;
  padding: 16px 20px;
}
.cms-owner-agenda__stat-label {
  font-size: 11px;
  font-weight: 700;
  color: #6B7280;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.cms-owner-agenda__stat-value {
  font-size: 24px;
  font-weight: 800;
  color: #1C1C1C;
}
.cms-owner-agenda__stat--accent .cms-owner-agenda__stat-value {
  color: var(--site-primary-color, #0C9994);
}
.cms-owner-agenda__stat-meta {
  font-size: 11px;
  color: #6B7280;
  margin-top: 4px;
}

/* Toolbar */
.cms-owner-agenda__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.cms-owner-agenda__filters {
  display: flex;
  gap: 12px;
}
.cms-owner-agenda__select {
  padding: 8px 12px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font-size: 13px;
  background: #fff;
  font-family: inherit;
}
.cms-owner-agenda__select:disabled { opacity: 0.6; cursor: not-allowed; }
.cms-owner-agenda__zoom {
  display: flex;
  gap: 4px;
}
.cms-owner-agenda__zoom-btn {
  padding: 6px 12px;
  border: 1px solid #D1D5DB;
  background: #fff;
  color: #1C1C1C;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 6px;
  font-family: inherit;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.cms-owner-agenda__zoom-btn:hover,
.cms-owner-agenda__zoom-btn:focus-visible {
  border-color: var(--site-primary-color, #0C9994);
  color: var(--site-primary-color, #0C9994);
  outline: none;
}
.cms-owner-agenda__zoom-btn--active,
.cms-owner-agenda__zoom-btn--active:hover,
.cms-owner-agenda__zoom-btn--active:focus-visible {
  background: var(--site-primary-color, #0C9994);
  color: #fff;
  border-color: var(--site-primary-color, #0C9994);
}
.cms-owner-agenda__zoom-btn:disabled:not(.cms-owner-agenda__zoom-btn--active) { opacity: 0.6; cursor: not-allowed; }

/* Empty state */
.cms-owner-agenda__empty {
  background: #fff;
  border: 2px dashed #D1D5DB;
  border-radius: 14px;
  padding: 48px 32px;
  text-align: center;
  color: #6B7280;
}
.cms-owner-agenda__cta {
  display: inline-block;
  margin-top: 16px;
  padding: 12px 24px;
  background: var(--site-primary-color, #0C9994);
  color: #fff;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
}

/* Gantt container */
.cms-owner-agenda__gantt {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.cms-owner-agenda__gantt-scroll {
  overflow-x: auto;
}
.cms-owner-agenda__gantt-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  min-width: 1200px;
}
.cms-owner-agenda__gantt-table th,
.cms-owner-agenda__gantt-table td {
  padding: 0;
  margin: 0;
  border-right: 1px solid #D1D5DB;
  border-bottom: 1px solid #D1D5DB;
  vertical-align: middle;
}
/* Header row : fond uniforme blanc (les jours deviennent des "chips") +
   bordure haute pour cadrer proprement le calendrier. */
.cms-owner-agenda__gantt-table thead th {
  background: #fff;
  border-top: 1px solid #D1D5DB;
}
.cms-owner-agenda__gantt-corner {
  width: 240px;
  padding: 14px 18px;
  font-size: 11px;
  font-weight: 700;
  color: #6B7280;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.cms-owner-agenda__gantt-day-header {
  width: 32px;
  /* Padding extérieur : crée la respiration autour du "chip" interne. */
  padding: 8px 4px;
  text-align: center;
}
/* Le "chip" interne porte tout le visuel (couleur, fond, radius). */
.cms-owner-agenda__gantt-day-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 42px;
  padding: 6px 2px;
  border-radius: 8px;
  background: #F5F5F5;
  color: #6B7280;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  transition: transform 0.15s;
}
.cms-owner-agenda__gantt-day-header--weekend .cms-owner-agenda__gantt-day-pill {
  color: #F99907;
  background: rgba(249, 153, 7, 0.14);
}
.cms-owner-agenda__gantt-day-header--today .cms-owner-agenda__gantt-day-pill {
  color: #fff;
  background: var(--site-primary-color, #0C9994);
  font-weight: 800;
  box-shadow: 0 1px 4px rgba(12, 153, 148, 0.25);
}
.cms-owner-agenda__gantt-dow {
  display: block;
  font-size: 9px;
  opacity: 0.75;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.cms-owner-agenda__gantt-daynum {
  display: block;
  font-size: 12px;
  font-weight: inherit;
}
.cms-owner-agenda__gantt-label {
  padding: 12px 16px;
  background: #fff;
  vertical-align: middle;
}
.cms-owner-agenda__gantt-label-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cms-owner-agenda__gantt-thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.cms-owner-agenda__gantt-thumb--placeholder {
  background: #F5F5F5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.cms-owner-agenda__gantt-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.cms-owner-agenda__gantt-name {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cms-owner-agenda__gantt-meta {
  font-size: 11px;
  color: #6B7280;
}
.cms-owner-agenda__gantt-cell {
  height: 56px;
  background: rgba(16, 185, 129, 0.04);
}
.cms-owner-agenda__gantt-cell--weekend { background: rgba(249, 153, 7, 0.04); }
.cms-owner-agenda__gantt-cell--today { background: rgba(12, 153, 148, 0.08); }

/* Bars (cellules colorées avec colspan) */
.cms-owner-agenda__gantt-bar-cell {
  padding: 0 4px;
  background: #fff;
}
.cms-owner-agenda__gantt-bar {
  width: 100%;
  height: 38px;
  border-radius: 6px;
  border: none;
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  overflow: hidden;
  transition: transform 0.15s;
  font-family: inherit;
  text-align: left;
}
.cms-owner-agenda__gantt-bar:hover { transform: scale(1.01); position: relative; z-index: 3; }
.cms-owner-agenda__gantt-bar--confirmed { background: var(--site-primary-color, #0C9994); }
.cms-owner-agenda__gantt-bar--active { background: #F99907; }
.cms-owner-agenda__gantt-bar--completed { background: #9CA3AF; opacity: 0.7; }
/* G5 — statut « en attente » (pending / awaiting_payment) : trame
   pointillée pour signaler qu'il ne s'agit pas encore d'un blocage ferme. */
.cms-owner-agenda__gantt-bar--pending {
  background: repeating-linear-gradient(135deg,
    #C7A700, #C7A700 4px,
    #E5C74B 4px, #E5C74B 8px);
  color: #1C1C1C;
  font-weight: 700;
}
.cms-owner-agenda__gantt-bar--blocked {
  background: repeating-linear-gradient(45deg,
    #9CA3AF, #9CA3AF 4px,
    #B7BEC9 4px, #B7BEC9 8px);
  color: #fff;
  font-style: italic;
}
.cms-owner-agenda__gantt-bar-icon { flex-shrink: 0; font-size: 12px; }
.cms-owner-agenda__gantt-bar-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }

/* Legend */
.cms-owner-agenda__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 24px;
  background: #F5F5F5;
  font-size: 12px;
  color: #6B7280;
  align-items: center;
}
.cms-owner-agenda__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cms-owner-agenda__legend-swatch {
  width: 16px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}
.cms-owner-agenda__legend-swatch--pending {
  background: repeating-linear-gradient(135deg,
    #C7A700, #C7A700 3px,
    #E5C74B 3px, #E5C74B 6px);
}
.cms-owner-agenda__legend-swatch--confirmed { background: var(--site-primary-color, #0C9994); }
.cms-owner-agenda__legend-swatch--active { background: #F99907; }
.cms-owner-agenda__legend-swatch--completed { background: #9CA3AF; opacity: 0.7; }
.cms-owner-agenda__legend-swatch--blocked {
  background: repeating-linear-gradient(45deg,
    #9CA3AF, #9CA3AF 3px,
    #B7BEC9 3px, #B7BEC9 6px);
}
.cms-owner-agenda__legend-today {
  margin-left: auto;
  font-weight: 700;
}

/* Drill-down popup */
.cms-owner-agenda__drill {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.cms-owner-agenda__drill[hidden] { display: none; }
.cms-owner-agenda__drill-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.cms-owner-agenda__drill-popup {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 28px 32px 24px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  max-height: 90vh;
  overflow-y: auto;
}
.cms-owner-agenda__drill-close {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 24px;
  color: #6B7280;
  cursor: pointer;
  border-radius: 8px;
}
.cms-owner-agenda__drill-close:hover { background: #F5F5F5; color: #1C1C1C; }
.cms-owner-agenda__drill-title {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 4px;
}
.cms-owner-agenda__drill-ref {
  font-size: 11px;
  color: #6B7280;
  font-family: 'SF Mono', Monaco, monospace;
  margin-bottom: 16px;
}
.cms-owner-agenda__drill-status--confirmed { color: var(--site-primary-color, #0C9994); font-weight: 700; }
.cms-owner-agenda__drill-status--active,
.cms-owner-agenda__drill-status--extended { color: #F99907; font-weight: 700; }
.cms-owner-agenda__drill-status--completed { color: #9CA3AF; font-weight: 700; }
.cms-owner-agenda__drill-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}
.cms-owner-agenda__drill-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 13px;
  border-bottom: 1px solid #F5F5F5;
}
.cms-owner-agenda__drill-row:last-child { border-bottom: none; }
.cms-owner-agenda__drill-row dt { color: #6B7280; margin: 0; }
.cms-owner-agenda__drill-row dd { font-weight: 700; margin: 0; text-align: right; }
.cms-owner-agenda__drill-shipping--accent { color: #F99907; }
.cms-owner-agenda__drill-shipping--success { color: #10B981; }
.cms-owner-agenda__drill-help {
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(249, 153, 7, 0.10);
  border-left: 3px solid #F99907;
  border-radius: 0 8px 8px 0;
  font-size: 12px;
  color: #6B7280;
}

/* Sujet #3 — Lot A : bouton "Contacter le locataire" dans le drill-down. */
.cms-owner-agenda__drill-actions {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #E5E7EB;
}
.cms-owner-agenda__drill-contact-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 12px;
  border: none;
  background: var(--site-primary-color, #0C9994);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  font-family: inherit;
}
.cms-owner-agenda__drill-contact-btn:hover:not(:disabled) {
  background: #0A7A76;
  transform: translateY(-1px);
}
.cms-owner-agenda__drill-contact-btn:disabled {
  background: #D1D5DB;
  cursor: not-allowed;
}

/* ========================================
   FORM BLACKOUTS (Sujet #3 PR B)
   ======================================== */

.cms-blackouts__header { margin-bottom: 16px; }
.cms-blackouts__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}
.cms-blackouts__presets-label {
  font-size: 11px;
  font-weight: 700;
  color: #6B7280;
  letter-spacing: 0.5px;
  padding: 6px 0;
}
.cms-blackouts__preset {
  padding: 6px 12px;
  border: 1px solid #D1D5DB;
  border-radius: 18px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  color: #6B7280;
  transition: all 0.15s;
}
.cms-blackouts__preset:hover {
  border-color: var(--site-primary-color, #0C9994);
  color: var(--site-primary-color, #0C9994);
}
.cms-blackouts__list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cms-blackouts__item {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr 32px;
  gap: 12px;
  align-items: end;
  padding: 14px 16px;
  background: #F5F5F5;
  border-radius: 10px;
  position: relative;
}
.cms-blackouts__item--conflict {
  background: rgba(239, 68, 68, 0.08);
  border-left: 3px solid #EF4444;
  padding-left: 13px;
}
.cms-blackouts__field { display: flex; flex-direction: column; }
.cms-blackouts__field--reason { /* hint */ }
.cms-blackouts__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #6B7280;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cms-blackouts__input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
}
.cms-blackouts__input:focus {
  outline: none;
  border-color: var(--site-primary-color, #0C9994);
  box-shadow: 0 0 0 3px rgba(12, 153, 148, 0.15);
}
.cms-blackouts__delete {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #EF4444;
  font-size: 22px;
  border-radius: 8px;
  align-self: end;
  margin-bottom: 1px;
}
.cms-blackouts__delete:hover { background: rgba(239, 68, 68, 0.1); }
.cms-blackouts__conflict {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding: 6px 10px;
  background: #EF4444;
  color: #fff;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}
.cms-blackouts__add {
  display: block;
  width: 100%;
  padding: 16px;
  border: 2px dashed #D1D5DB;
  border-radius: 10px;
  text-align: center;
  color: var(--site-primary-color, #0C9994);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
  background: #fff;
  font-family: inherit;
  margin-bottom: 16px;
}
.cms-blackouts__add:hover {
  border-color: var(--site-primary-color, #0C9994);
  background: rgba(12, 153, 148, 0.05);
}
.cms-blackouts__add-plus { font-size: 18px; vertical-align: middle; margin-right: 4px; }
.cms-blackouts__actions {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid #D1D5DB;
}
.cms-blackouts__save {
  padding: 12px 24px;
  background: var(--site-primary-color, #0C9994);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  transition: background 0.15s;
}
.cms-blackouts__save:hover:not(:disabled) { background: #105F5E; }
.cms-blackouts__save:disabled { opacity: 0.6; cursor: not-allowed; }
.cms-blackouts__status { font-size: 12px; }
.cms-blackouts__status--pending { color: #6B7280; }
.cms-blackouts__status--success { color: #10B981; font-weight: 700; }
.cms-blackouts__status--error { color: #EF4444; font-weight: 700; }

/* ════════════════════════════════════════════════════════════════
   PRO SYNC — Sujet #5 / Niveau 1 (PR #2957)
   Tokens Coliope : --site-primary-color (#0C9994) + --site-accent-color (#F99907)
   ════════════════════════════════════════════════════════════════ */

.cms-pro-sync { padding: 24px 0 56px; }
.cms-pro-sync__inner { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

.cms-pro-sync__back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px;
  font-size: 13px; font-weight: 700; color: #6B7280;
  text-decoration: none; margin-bottom: 14px;
  transition: background 0.15s;
}
.cms-pro-sync__back:hover { background: #F0FDFB; color: var(--site-primary-color, #0C9994); }

/* ── Sub-tabs ────────────────────────────────────────────── */
.cms-pro-sync__subtabs {
  display: flex; gap: 4px; padding: 4px;
  background: #F5F5F5; border-radius: 12px;
  margin: 18px 0 24px;
  flex-wrap: wrap;
}
.cms-pro-sync__subtab {
  padding: 9px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 700; color: #6B7280;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: default;
}
.cms-pro-sync__subtab--active {
  background: #fff; color: var(--site-primary-color, #0C9994);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.cms-pro-sync__subtab--soon { opacity: 0.55; }
.cms-pro-sync__soon {
  font-size: 9px; font-weight: 800; padding: 1px 6px;
  background: var(--site-accent-color, #F99907); color: #fff;
  border-radius: 100px; letter-spacing: 0.4px; margin-left: 4px;
}

/* ── Tab badge PRO ───────────────────────────────────────── */
.cms-owner-tab__badge--pro {
  background: var(--site-accent-color, #F99907);
  color: #fff; letter-spacing: 0.5px;
}

/* ── Stats grid ──────────────────────────────────────────── */
.cms-pro-sync__stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px; margin-bottom: 22px;
}
.cms-pro-sync__stat {
  background: #fff; border: 1px solid #E5E7EB;
  border-radius: 14px; padding: 18px;
}
.cms-pro-sync__stat--success { border-color: #10B981; background: linear-gradient(135deg, #D1FAE5 0%, #fff 60%); }
.cms-pro-sync__stat--accent  { border-color: var(--site-accent-color, #F99907); background: linear-gradient(135deg, #FEF3E2 0%, #fff 60%); }
.cms-pro-sync__stat--danger  { border-color: #DC2626; background: linear-gradient(135deg, #FEE2E2 0%, #fff 60%); }

.cms-pro-sync__stat-label {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.5px; color: #6B7280;
}
.cms-pro-sync__stat-value {
  display: block; font-size: 28px; font-weight: 900;
  letter-spacing: -0.5px; line-height: 1; margin-top: 6px;
}
.cms-pro-sync__stat-value--small { font-size: 18px; }
.cms-pro-sync__stat-meta {
  display: block; font-size: 12px; color: #6B7280;
  margin-top: 6px; font-weight: 600;
}

/* ── Panel cards ─────────────────────────────────────────── */
.cms-pro-sync__panel {
  background: #fff; border: 1px solid #E5E7EB;
  border-radius: 18px; overflow: hidden;
  margin-bottom: 22px;
}
.cms-pro-sync__panel-head {
  padding: 18px 22px; display: flex;
  align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  border-bottom: 1px solid #E5E7EB;
}
.cms-pro-sync__panel-head h3 {
  font-size: 15px; font-weight: 800; margin: 0;
  display: flex; align-items: center; gap: 8px;
}
.cms-pro-sync__panel-head h3 i { color: var(--site-primary-color, #0C9994); }
.cms-pro-sync__panel-meta {
  font-size: 12px; color: #6B7280; font-weight: 700;
}
.cms-pro-sync__panel-body { padding: 18px 22px; }

.cms-pro-sync__panel--errors { border-color: #FECACA; }
.cms-pro-sync__panel--errors .cms-pro-sync__panel-head h3 { color: #DC2626; }

.cms-pro-sync__help {
  font-size: 13px; color: #6B7280; line-height: 1.5;
  font-weight: 600;
}
.cms-pro-sync__help code {
  background: #F0FDFB; padding: 1px 6px; border-radius: 4px;
  color: var(--site-primary-color, #0C9994);
  font-size: 12px; font-family: 'JetBrains Mono', monospace;
}

/* ── Buttons ─────────────────────────────────────────────── */
.cms-pro-sync__btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-radius: 10px;
  border: none; cursor: pointer;
  font-size: 13px; font-weight: 800;
  font-family: inherit;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  text-decoration: none;
}
.cms-pro-sync__btn--primary { background: var(--site-primary-color, #0C9994); color: #fff; }
.cms-pro-sync__btn--primary:hover:not(:disabled) { background: #0A7A76; transform: translateY(-1px); color: #fff; }
.cms-pro-sync__btn--secondary { background: var(--site-accent-color, #F99907); color: #fff; }
.cms-pro-sync__btn--secondary:hover:not(:disabled) { background: #D97706; transform: translateY(-1px); color: #fff; }
.cms-pro-sync__btn--ghost { background: #fff; color: #1C1C1C; border: 1.5px solid #E5E7EB; }
.cms-pro-sync__btn--ghost:hover { border-color: var(--site-primary-color, #0C9994); color: var(--site-primary-color, #0C9994); }
.cms-pro-sync__btn--sm { padding: 6px 11px; font-size: 12px; }
.cms-pro-sync__btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Tables ──────────────────────────────────────────────── */
.cms-pro-sync__table {
  width: 100%; border-collapse: collapse;
}
.cms-pro-sync__table th {
  text-align: left; padding: 10px 16px;
  font-size: 11px; font-weight: 800;
  color: #6B7280;
  text-transform: uppercase; letter-spacing: 0.5px;
  background: #F5F5F5; border-bottom: 1px solid #E5E7EB;
}
.cms-pro-sync__table td {
  padding: 13px 16px; font-size: 13px;
  border-bottom: 1px solid #E5E7EB;
  vertical-align: top;
}
.cms-pro-sync__table tr:last-child td { border-bottom: none; }
.cms-pro-sync__table tr:hover td { background: #F0FDFB; }
.cms-pro-sync__table code {
  background: #F5F5F5; padding: 1px 6px; border-radius: 4px;
  font-size: 11px; font-family: 'JetBrains Mono', monospace;
}

.cms-pro-sync__table--diff td { padding: 9px 16px; }
.cms-pro-sync__diff-old { color: #DC2626; text-decoration: line-through; }
.cms-pro-sync__diff-new { color: #10B981; font-weight: 700; }

/* ── Badges ──────────────────────────────────────────────── */
.cms-pro-sync__badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 100px;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.cms-pro-sync__badge--success { background: #D1FAE5; color: #059669; }
.cms-pro-sync__badge--warning { background: #FEF3C7; color: #D97706; }
.cms-pro-sync__badge--danger  { background: #FEE2E2; color: #DC2626; }
.cms-pro-sync__badge--info    { background: #DBEAFE; color: #2563EB; }
.cms-pro-sync__badge--muted   { background: #F5F5F5; color: #6B7280; }
.cms-pro-sync__badge--mode    { background: #CCFBF1; color: var(--site-primary-color, #0C9994); }

/* ── Empty state ─────────────────────────────────────────── */
.cms-pro-sync__empty {
  padding: 40px 20px; text-align: center;
}
.cms-pro-sync__empty-icon { font-size: 36px; margin-bottom: 8px; }
.cms-pro-sync__empty p { font-size: 14px; color: #1C1C1C; font-weight: 700; }

/* ── Audit detail page ───────────────────────────────────── */
.cms-pro-sync__audit-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px;
}
.cms-pro-sync__audit-head h1 {
  font-size: 22px; font-weight: 900; letter-spacing: -0.3px;
  margin: 0;
}
.cms-pro-sync__audit-meta {
  background: #fff; border: 1px solid #E5E7EB;
  border-radius: 14px; padding: 16px 20px;
  margin-bottom: 22px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 18px;
  font-size: 13px;
}
.cms-pro-sync__audit-meta strong { color: #6B7280; font-weight: 700; }
.cms-pro-sync__audit-meta code {
  background: #F5F5F5; padding: 1px 6px; border-radius: 4px;
  font-size: 11px;
}

/* ── Modal d'import ──────────────────────────────────────── */
/* Spécificité accrue (.cms-section > ...) pour battre la règle globale
   `.cms-section > div { position: relative; z-index: 1 }` qui sinon
   bloquait l'overlay full-screen. */
.cms-pro-sync__modal,
.cms-section > .cms-pro-sync__modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.cms-pro-sync__modal[hidden],
.cms-section > .cms-pro-sync__modal[hidden] { display: none; }
.cms-pro-sync__modal-overlay {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px);
}
.cms-pro-sync__modal-popup {
  position: relative; z-index: 1;
  background: #fff; border-radius: 18px;
  /* On évite `min(720px, calc(...))` car Sass legacy en CI interprète
     `min` comme sa fonction homonyme et plante. width/max-width font
     le job de manière équivalente côté navigateur. */
  width: 720px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.cms-pro-sync__modal-head {
  padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid #E5E7EB;
}
.cms-pro-sync__modal-head h3 { font-size: 16px; font-weight: 900; margin: 0; }
.cms-pro-sync__modal-close {
  border: none; background: transparent;
  font-size: 24px; cursor: pointer; color: #6B7280;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.cms-pro-sync__modal-close:hover { background: #F5F5F5; }
.cms-pro-sync__modal-body {
  flex: 1; overflow-y: auto; padding: 22px;
}
.cms-pro-sync__modal-foot {
  padding: 16px 22px; border-top: 1px solid #E5E7EB;
  display: flex; justify-content: flex-end; gap: 10px;
  flex-wrap: wrap;
}

.cms-pro-sync__step-label {
  font-size: 12px; font-weight: 800; color: #6B7280;
  text-transform: uppercase; letter-spacing: 0.5px;
  margin: 0 0 10px;
}
.cms-pro-sync__step-label:not(:first-child) { margin-top: 18px; }

/* Variante : label avec une action secondaire à droite (ex. "Télécharger template") */
.cms-pro-sync__step-label--with-action {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.cms-pro-sync__step-label-action {
  font-size: 12px;
  font-weight: 500;
  color: var(--site-primary-color, #0c9994);
  text-decoration: underline;
  text-transform: none;
  letter-spacing: 0;
}
.cms-pro-sync__step-label-action i { font-size: 10px; }

/* Wrapper d'actions dans la tête de panel (boutons côte-à-côte avec gap+wrap) */
.cms-pro-sync__panel-head-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Mode selection ──────────────────────────────────────── */
.cms-pro-sync__modes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.cms-pro-sync__mode {
  border: 1.5px solid #E5E7EB; border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  /* Reset des styles hérités d'un éventuel `label` global. */
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--site-text-color, #1C1C1C);
}
.cms-pro-sync__mode * { text-transform: none; }
.cms-pro-sync__mode:hover { border-color: #CCFBF1; }
.cms-pro-sync__mode--active {
  border-color: var(--site-primary-color, #0C9994);
  background: #F0FDFB;
}
.cms-pro-sync__mode input { accent-color: var(--site-primary-color, #0C9994); margin-right: 6px; }
.cms-pro-sync__mode strong { display: block; font-size: 13px; font-weight: 800; margin-bottom: 4px; }
.cms-pro-sync__mode span { display: block; font-size: 11px; color: #6B7280; line-height: 1.4; font-weight: 600; }

/* ── Dropzone ────────────────────────────────────────────── */
.cms-pro-sync__dropzone {
  border: 2px dashed #D1D5DB; border-radius: 14px;
  padding: 30px 20px; text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  margin-bottom: 14px;
}
.cms-pro-sync__dropzone:hover, .cms-pro-sync__dropzone--over {
  border-color: var(--site-primary-color, #0C9994);
  background: #F0FDFB;
}
.cms-pro-sync__dropzone-icon { font-size: 36px; margin-bottom: 8px; }
.cms-pro-sync__dropzone-title { font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.cms-pro-sync__dropzone-help { font-size: 12px; color: #6B7280; }
.cms-pro-sync__dropzone-help strong { color: var(--site-primary-color, #0C9994); }

/* ── Diff inside modal ───────────────────────────────────── */
.cms-pro-sync__diff {
  margin-top: 18px; padding: 16px;
  background: #F5F5F5; border-radius: 12px;
}
.cms-pro-sync__diff-title { font-size: 13px; font-weight: 800; margin-bottom: 12px; }
.cms-pro-sync__diff-stats {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
}
.cms-pro-sync__diff-stat {
  padding: 4px 11px; background: #fff; border-radius: 100px;
  font-size: 12px; font-weight: 700;
  border: 1px solid #E5E7EB;
}
.cms-pro-sync__diff-stat strong { font-weight: 900; }
.cms-pro-sync__diff-stat--success { color: #10B981; border-color: #D1FAE5; }
.cms-pro-sync__diff-stat--accent  { color: var(--site-accent-color, #F99907); border-color: #FEF3E2; }
.cms-pro-sync__diff-stat--danger  { color: #DC2626; border-color: #FEE2E2; }
.cms-pro-sync__diff-table-wrap {
  background: #fff; border-radius: 10px;
  max-height: 320px; overflow-y: auto;
}
.cms-pro-sync__diff-errors {
  margin-top: 12px; padding: 12px 14px;
  background: #FEE2E2; border-left: 3px solid #DC2626;
  border-radius: 0 10px 10px 0; font-size: 12px;
}
.cms-pro-sync__diff-errors h5 { margin: 0 0 6px; font-size: 13px; color: #DC2626; }
.cms-pro-sync__diff-errors ul { margin: 0; padding-left: 18px; line-height: 1.6; }

/* ── Status messages ─────────────────────────────────────── */
.cms-pro-sync__status {
  margin-top: 12px; padding: 10px 14px;
  border-radius: 10px; font-size: 13px; font-weight: 600;
}
.cms-pro-sync__status--pending { background: #DBEAFE; color: #2563EB; }
.cms-pro-sync__status--error   { background: #FEE2E2; color: #DC2626; }
.cms-pro-sync__status--success { background: #D1FAE5; color: #059669; }

/* ── Chargement des photos en masse (loueur PRO) ─────────── */
.cms-pro-sync__bulk-images {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-top: 14px;
}
.cms-pro-sync__file-input { max-width: 360px; font-size: 13px; }
/* Le controller Stimulus impose ces classes au <p> de statut (partagé avec
   l'admin) : on les style ici pour la page publique loueur. */
.cms-bulk-image-upload__status {
  margin: 12px 0 0; font-size: 13px; font-weight: 700;
  line-height: 1.5; white-space: pre-line;
}
.cms-bulk-image-upload__status--info    { color: #2563EB; }
.cms-bulk-image-upload__status--success { color: #059669; }
.cms-bulk-image-upload__status--warn    { color: #B45309; }
.cms-bulk-image-upload__status--error   { color: #DC2626; }

@media (max-width: 720px) {
  .cms-pro-sync__panel-head { padding: 14px 16px; }
  .cms-pro-sync__panel-body { padding: 14px 16px; }
  .cms-pro-sync__modal-popup { width: calc(100vw - 16px); }
}

/* ════════════════════════════════════════════════════════════════
   PRO SYNC NIVEAU 2 — API & Tokens (Sujet #5, PR #2957)
   ════════════════════════════════════════════════════════════════ */

/* Bandeau "raw token" affiché 1x après création */
.cms-pro-sync__token-flash {
  background: linear-gradient(135deg, #FEF3E2 0%, #fff 60%);
  border: 2px solid var(--site-accent-color, #F99907);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex; gap: 16px; align-items: center; justify-content: space-between;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.cms-pro-sync__token-flash h3 { font-size: 15px; font-weight: 900; margin: 0 0 4px; }
.cms-pro-sync__token-flash p { font-size: 13px; margin: 0 0 8px; color: #6B7280; }
.cms-pro-sync__token-raw {
  display: inline-block; padding: 8px 12px;
  background: #1F2937; color: #FCD34D;
  border-radius: 8px; font-size: 13px;
  font-family: 'JetBrains Mono', monospace;
  word-break: break-all;
}

/* Code block (curl example) */
.cms-pro-sync__code {
  background: #1F2937; color: #E5E7EB;
  border-radius: 12px; padding: 14px 16px;
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 12px; line-height: 1.7;
  overflow-x: auto;
  margin: 0;
  white-space: pre;
}

/* Modale form fields (pour la modale "Nouveau token") */
.cms-pro-sync__form-field {
  margin-bottom: 16px;
}
.cms-pro-sync__form-field label {
  font-size: 12px; font-weight: 800; color: #6B7280;
  text-transform: uppercase; letter-spacing: 0.4px;
  display: block; margin-bottom: 6px;
}
.cms-pro-sync__form-field input[type="text"] {
  width: 100%; padding: 10px 14px;
  border: 1.5px solid #E5E7EB; border-radius: 10px;
  font-size: 14px; font-family: inherit;
}
.cms-pro-sync__form-field input[type="text"]:focus {
  outline: none; border-color: var(--site-primary-color, #0C9994);
}
.cms-pro-sync__form-field small {
  display: block; font-size: 11px; color: #9CA3AF;
  margin-top: 4px;
}

.cms-pro-sync__radios {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.cms-pro-sync__radio {
  border: 1.5px solid #E5E7EB; border-radius: 12px;
  padding: 12px 14px; cursor: pointer;
  text-transform: none; letter-spacing: normal;
  color: inherit;
  display: block;
  font-weight: 400;
}
.cms-pro-sync__radio--active {
  border-color: var(--site-primary-color, #0C9994); background: #F0FDFB;
}
.cms-pro-sync__radio strong { display: block; font-size: 13px; font-weight: 800; margin: 4px 0 2px; }
.cms-pro-sync__radio span { display: block; font-size: 11px; color: #6B7280; line-height: 1.4; }
.cms-pro-sync__radio input { accent-color: var(--site-primary-color, #0C9994); margin-right: 6px; }

.cms-pro-sync__checkbox {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; cursor: pointer; text-transform: none;
  font-weight: 400; color: inherit; letter-spacing: normal;
}
.cms-pro-sync__checkbox input { accent-color: var(--site-primary-color, #0C9994); width: 18px; height: 18px; }

.cms-pro-sync__notice {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: 10px;
  font-size: 13px; font-weight: 600;
  margin-top: 14px;
}
.cms-pro-sync__notice--warn {
  background: #FEF3E2; color: #92400E;
  border-left: 3px solid var(--site-accent-color, #F99907);
}
.cms-pro-sync__notice i { font-size: 16px; flex-shrink: 0; margin-top: 2px; }

/* ════════════════════════════════════════════════════════════════
   PRO SYNC NIVEAU 3 — Webhooks (Sujet #5, PR #2957)
   ════════════════════════════════════════════════════════════════ */

.cms-pro-sync__events-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
}
.cms-pro-sync__event-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--site-border, #E5E7EB);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.cms-pro-sync__event-row:has(input:checked) {
  border-color: var(--site-primary-color, #0C9994);
  background: #F0FDFB;
}
.cms-pro-sync__event-row input {
  accent-color: var(--site-primary-color, #0C9994);
  margin-top: 2px;
}
.cms-pro-sync__event-row strong {
  display: block;
  font-size: 12px; font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  color: var(--site-text-color, #1C1C1C);
}
.cms-pro-sync__event-row span {
  display: block;
  font-size: 11px; color: #6B7280;
  margin-top: 2px;
  font-weight: 600;
  line-height: 1.4;
}

.cms-pro-sync__form-field input[type="url"] {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  font-size: 14px;
  font-family: 'JetBrains Mono', monospace;
}
.cms-pro-sync__form-field input[type="url"]:focus {
  outline: none;
  border-color: var(--site-primary-color, #0C9994);
}

/* ════════════════════════════════════════════════════════════════
   PRO SYNC NIVEAU 4 — Intégrations natives (Sujet #5, PR #2957)
   ════════════════════════════════════════════════════════════════ */

.cms-pro-sync__connectors-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px; margin-top: 16px;
}
.cms-pro-sync__connector {
  background: #fff;
  border: 1.5px solid var(--site-border, #E5E7EB);
  border-radius: 14px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
  position: relative;
}
.cms-pro-sync__connector:hover {
  transform: translateY(-2px);
  border-color: var(--site-primary-color, #0C9994);
  box-shadow: 0 4px 14px rgba(12, 153, 148, 0.12);
}
.cms-pro-sync__connector--available {
  border-color: #10B981;
  background: linear-gradient(135deg, #D1FAE5 0%, #fff 50%);
}
.cms-pro-sync__connector--soon {
  opacity: 0.85;
}
.cms-pro-sync__connector--soon:hover {
  transform: none;
  border-color: var(--site-border, #E5E7EB);
  box-shadow: none;
}

.cms-pro-sync__connector-logo {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff;
  flex-shrink: 0;
}
.cms-pro-sync__connector-name {
  font-size: 15px; font-weight: 900;
  color: var(--site-text-color, #1C1C1C);
}
.cms-pro-sync__connector-status {
  font-size: 11px; font-weight: 800;
  padding: 2px 9px;
  border-radius: 100px;
  display: inline-block;
  margin-top: 3px;
}
.cms-pro-sync__connector-status--soon {
  background: var(--site-accent-color, #F99907);
  color: #fff;
}
.cms-pro-sync__connector-status--available {
  background: #10B981;
  color: #fff;
}
.cms-pro-sync__connector-desc {
  font-size: 12px; color: #6B7280;
  line-height: 1.5;
  font-weight: 600;
  flex: 1;
  margin: 0;
}
.cms-pro-sync__connector-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px;
}
.cms-pro-sync__connector-actions form {
  margin: 0;
}

.cms-pro-sync__notice--info {
  background: #F0FDFB;
  color: #0A4F4D;
  border-left: 3px solid var(--site-primary-color, #0C9994);
}

/* ════════════════════════════════════════════════════════════════
   COMPTE PRO — Toggle pro/particulier (Sujet #4, PR #2957)
   ════════════════════════════════════════════════════════════════ */

.cms-customer-pro { padding: 24px 0 56px; }
.cms-customer-pro__inner { max-width: 920px; margin: 0 auto; padding: 0 16px; }

.cms-customer-pro__header { margin-bottom: 22px; }
.cms-customer-pro__back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px;
  font-size: 13px; font-weight: 700; color: #6B7280;
  text-decoration: none; transition: background 0.15s;
}
.cms-customer-pro__back:hover {
  background: #F0FDFB;
  color: var(--site-primary-color, #0C9994);
}
.cms-customer-pro__header h1 {
  font-size: 28px; font-weight: 900;
  letter-spacing: -0.5px; margin: 12px 0 6px;
}
.cms-customer-pro__header p {
  color: #6B7280; font-weight: 600; font-size: 14px;
  line-height: 1.5;
}

/* Hero CTA pour particulier */
.cms-customer-pro__hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg,
    var(--site-primary-color, #0C9994) 0%,
    color-mix(in srgb, var(--site-primary-color, #0C9994) 70%, #0a4f4d) 100%);
  color: #fff; padding: 32px;
  border-radius: 24px;
  margin-bottom: 22px;
  box-shadow: 0 10px 30px -10px rgba(12, 153, 148, 0.35);
}
.cms-customer-pro__hero::before {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.16) 0%, transparent 70%);
  pointer-events: none;
}
.cms-customer-pro__hero::after {
  content: ''; position: absolute; bottom: -80px; left: 25%;
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(249,153,7,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.cms-customer-pro__hero-pattern {
  position: absolute; inset: 0; opacity: 0.06;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20px 20px, #fff 1px, transparent 1px),
    radial-gradient(circle at 60px 60px, #fff 1px, transparent 1px);
  background-size: 80px 80px;
}
.cms-customer-pro__hero-inner { position: relative; z-index: 1; }
.cms-customer-pro__hero-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  background: var(--site-accent-color, #F99907); color: #fff;
  border-radius: 100px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.5px; text-transform: uppercase;
  margin-bottom: 12px;
}
.cms-customer-pro__hero h2 {
  font-size: 26px; font-weight: 900;
  letter-spacing: -0.3px; margin-bottom: 8px;
}
.cms-customer-pro__hero p {
  font-size: 14px; opacity: 0.95;
  line-height: 1.5; font-weight: 600;
  margin-bottom: 20px;
  max-width: 560px;
}
.cms-customer-pro__hero-perks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.cms-customer-pro__hero-perk {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  padding: 12px 14px; border-radius: 12px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700;
}
.cms-customer-pro__hero-perk i {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--site-accent-color, #F99907); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; flex-shrink: 0;
}

/* Notices */
.cms-customer-pro__notice {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 18px; border-radius: 12px;
  font-size: 13px; font-weight: 600;
  margin-bottom: 22px;
  line-height: 1.5;
}
.cms-customer-pro__notice i { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.cms-customer-pro__notice--info {
  background: #F0FDFB; color: #0A4F4D;
  border-left: 3px solid var(--site-primary-color, #0C9994);
}
.cms-customer-pro__notice--success {
  background: #D1FAE5; color: #065F46;
  border-left: 3px solid #059669;
}
.cms-customer-pro__notice strong { font-weight: 900; }

/* Flash */
.cms-customer-pro__flash {
  padding: 12px 18px; border-radius: 10px;
  font-size: 13px; font-weight: 700;
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 10px;
}
.cms-customer-pro__flash--error { background: #FEE2E2; color: #991B1B; }
.cms-customer-pro__flash--success { background: #D1FAE5; color: #065F46; }

/* Stats */
.cms-customer-pro__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin-bottom: 22px;
}
.cms-customer-pro__stat {
  background: #F0FDFB;
  border: 1px solid #CCFBF1;
  border-radius: 14px; padding: 16px;
}
.cms-customer-pro__stat-label {
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.4px;
  color: #0A4F4D;
}
.cms-customer-pro__stat-value {
  display: block;
  font-size: 22px; font-weight: 900;
  letter-spacing: -0.4px; line-height: 1;
  margin-top: 6px;
  color: var(--site-text-color, #1C1C1C);
}
.cms-customer-pro__stat-value--small { font-size: 15px; }
.cms-customer-pro__stat-meta {
  font-size: 12px; color: #6B7280; margin-top: 4px; font-weight: 600;
}

/* Panels */
.cms-customer-pro__panel {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 18px; overflow: hidden;
  margin-bottom: 22px;
}
.cms-customer-pro__panel--danger {
  border-color: #FECACA;
}
.cms-customer-pro__panel--danger .cms-customer-pro__panel-head {
  background: #FEF2F2;
}
.cms-customer-pro__panel--danger .cms-customer-pro__panel-head h2 {
  color: #B91C1C;
}
.cms-customer-pro__panel-head {
  padding: 16px 22px;
  border-bottom: 1px solid #E5E7EB;
}
.cms-customer-pro__panel-head h2 {
  font-size: 15px; font-weight: 800;
  display: flex; align-items: center; gap: 9px;
  margin: 0;
}
.cms-customer-pro__panel-head h2 i {
  color: var(--site-primary-color, #0C9994);
}
.cms-customer-pro__panel-body { padding: 22px; }
.cms-customer-pro__panel-foot {
  padding: 14px 22px;
  border-top: 1px solid #E5E7EB;
  display: flex; justify-content: flex-end; gap: 10px;
}

/* Section title */
.cms-customer-pro__section-title {
  font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: #6B7280; margin: 18px 0 12px;
}

/* Form */
.cms-customer-pro__form-row {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.cms-customer-pro__form-field {
  display: flex; flex-direction: column; gap: 6px;
  flex: 1; min-width: 220px;
}
.cms-customer-pro__form-label {
  font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.4px;
  color: #6B7280;
}
.cms-customer-pro__form-input {
  padding: 11px 14px;
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  transition: border-color 0.15s;
}
.cms-customer-pro__form-input:focus {
  outline: none;
  border-color: var(--site-primary-color, #0C9994);
}
.cms-customer-pro__form-field small {
  font-size: 11px; color: #9CA3AF;
}
.cms-customer-pro__inline-code {
  background: #F5F5F5; padding: 2px 8px;
  border-radius: 5px; font-size: 12px;
  color: var(--site-primary-color, #0C9994);
  font-family: 'JetBrains Mono', 'Menlo', monospace;
}

/* Buttons */
.cms-customer-pro__btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px;
  border-radius: 10px; border: none;
  font-size: 13px; font-weight: 800;
  cursor: pointer; font-family: inherit;
  transition: all 0.15s;
  text-decoration: none;
}
.cms-customer-pro__btn--primary {
  background: var(--site-primary-color, #0C9994); color: #fff;
}
.cms-customer-pro__btn--primary:hover {
  background: #0A7A76; color: #fff;
}
.cms-customer-pro__btn--accent {
  background: var(--site-accent-color, #F99907); color: #fff;
}
.cms-customer-pro__btn--accent:hover {
  background: #D97706; color: #fff;
}
.cms-customer-pro__btn--ghost {
  background: transparent;
  color: var(--site-text-color, #1C1C1C);
  border: 1.5px solid #E5E7EB;
}
.cms-customer-pro__btn--ghost:hover {
  border-color: var(--site-primary-color, #0C9994);
  color: var(--site-primary-color, #0C9994);
}
.cms-customer-pro__btn--danger {
  background: #fff; color: #B91C1C;
  border: 1.5px solid #FECACA;
}
.cms-customer-pro__btn--danger:hover {
  background: #FEE2E2;
  color: #B91C1C;
}

/* Danger list */
.cms-customer-pro__danger-list {
  margin: 12px 0 0;
  padding-left: 22px;
  font-size: 13px;
  line-height: 1.9;
  color: #6B7280;
  font-weight: 600;
}
.cms-customer-pro__danger-list strong { color: #B91C1C; font-weight: 900; }

/* ════════════════════════════════════════════════════════════════
   CAUTIONS & LITIGES — Sujet #6
   ════════════════════════════════════════════════════════════════ */

/* Actions caution sous chaque résa loueur */
.cms-owner-resa-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 6px;
}
.cms-owner-resa-actions__btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 100px;
  font-size: 11px; font-weight: 800;
  border: 1.5px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.cms-owner-resa-actions__btn--ok {
  background: #fff;
  color: #059669;
  border-color: #D1FAE5;
}
.cms-owner-resa-actions__btn--ok:hover {
  background: #D1FAE5;
  border-color: #059669;
}
.cms-owner-resa-actions__btn--dispute {
  background: #fff;
  color: #DC2626;
  border-color: #FECACA;
}
.cms-owner-resa-actions__btn--dispute:hover {
  background: #FEE2E2;
  border-color: #DC2626;
}
/* Retour Jérôme 2026-06-01 — bouton « Refuser » sur les résa pending
   (côté loueur). Alias visuel de --dispute mais avec un wording neutre :
   c'est un refus, pas un signalement. */
.cms-owner-resa-actions__btn--reject {
  background: #fff;
  color: #DC2626;
  border-color: #FECACA;
}
.cms-owner-resa-actions__btn--reject:hover {
  background: #FEE2E2;
  border-color: #DC2626;
}
.cms-owner-resa-actions__badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 100px;
  font-size: 11px; font-weight: 800;
  background: #FEF3C7;
  color: #92400E;
}

/* Modale Dispute */
.cms-section .cms-dispute-modal,
.cms-dispute-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.cms-section .cms-dispute-modal[hidden],
.cms-dispute-modal[hidden] { display: none; }
.cms-dispute-modal-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
}
.cms-dispute-modal-popup {
  position: relative; z-index: 1;
  background: #fff; border-radius: 18px;
  width: 580px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  overflow: hidden;
}
.cms-dispute-modal-head {
  padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid #E5E7EB;
}
.cms-dispute-modal-head h3 {
  font-size: 16px; font-weight: 900;
  display: flex; align-items: center; gap: 10px;
  margin: 0;
}
.cms-dispute-modal-close {
  width: 32px; height: 32px; border-radius: 50%;
  border: none; background: transparent;
  font-size: 22px; color: #6B7280; cursor: pointer;
}
.cms-dispute-modal-close:hover { background: #F5F5F5; }
.cms-dispute-modal-body {
  flex: 1; overflow-y: auto;
  padding: 22px;
}
.cms-dispute-modal-meta {
  background: #F5F5F5;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 12px; line-height: 1.6;
  margin-bottom: 14px;
}
.cms-dispute-modal-meta code {
  background: #fff; padding: 1px 6px; border-radius: 4px;
  font-size: 11px;
}
.cms-dispute-modal-notice {
  background: #FEF3C7;
  color: #92400E;
  border-left: 3px solid #D97706;
  padding: 12px 14px;
  border-radius: 10px;
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 12px; font-weight: 600;
  line-height: 1.5;
  margin-bottom: 16px;
}
.cms-dispute-modal-notice i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.cms-dispute-modal-notice strong { font-weight: 900; }

.cms-dispute-form-field {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 14px;
}
.cms-dispute-form-field label {
  font-size: 12px; font-weight: 800;
  color: #6B7280;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.cms-dispute-form-field label small {
  font-weight: 600; text-transform: none;
  color: #9CA3AF; letter-spacing: normal;
}
.cms-dispute-form-field input[type="text"],
.cms-dispute-form-field input[type="number"],
.cms-dispute-form-field input[type="file"],
.cms-dispute-form-field select,
.cms-dispute-form-field textarea {
  padding: 10px 14px;
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
}
.cms-dispute-form-field input:focus,
.cms-dispute-form-field select:focus,
.cms-dispute-form-field textarea:focus {
  outline: none;
  border-color: var(--site-primary-color, #0C9994);
}
.cms-dispute-form-field small {
  font-size: 11px; color: #9CA3AF;
}

.cms-dispute-checkbox {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px;
  background: #F5F5F5;
  border-radius: 10px;
  font-size: 13px; cursor: pointer;
  font-weight: 600; line-height: 1.5;
  /* PR #3095 — Forcer la couleur pour ne pas hériter d'un parent en
     `color: #fff` (modale overlay) qui rendait le texte invisible
     sur fond gris clair. */
  color: #1F2937;
}
.cms-dispute-checkbox input {
  accent-color: var(--site-primary-color, #0C9994);
  margin-top: 2px;
  width: 16px; height: 16px; flex-shrink: 0;
}

.cms-dispute-modal-error {
  background: #FEE2E2;
  color: #991B1B;
  border-left: 3px solid #DC2626;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px; font-weight: 700;
  margin-top: 12px;
}

.cms-dispute-modal-foot {
  padding: 14px 22px;
  border-top: 1px solid #E5E7EB;
  display: flex; justify-content: flex-end; gap: 10px;
}
.cms-dispute-modal-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  border-radius: 10px; border: none;
  font-size: 13px; font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.cms-dispute-modal-btn--ghost {
  background: transparent;
  color: #1C1C1C;
  border: 1.5px solid #E5E7EB;
}
.cms-dispute-modal-btn--ghost:hover {
  border-color: var(--site-primary-color, #0C9994);
  color: var(--site-primary-color, #0C9994);
}
.cms-dispute-modal-btn--danger {
  background: #DC2626;
  color: #fff;
}
.cms-dispute-modal-btn--danger:hover { background: #991B1B; }
.cms-dispute-modal-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ════════════════════════════════════════════════════════════════
   TRANQUILLITÉ+ — bloc dans la modale de réservation (Sujet #6)
   ════════════════════════════════════════════════════════════════ */

.cms-tranquility-block {
  border: 1.5px solid var(--site-primary-soft, #CCFBF1);
  background: var(--site-primary-soft, #F0FDFB);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 14px 0;
}
.cms-tranquility-block__head {
  font-size: 13px; font-weight: 800;
  color: var(--site-primary-color, #0C9994);
  text-transform: uppercase; letter-spacing: 0.4px;
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.cms-tranquility-block__deposit-info {
  font-size: 13px; color: var(--site-text-color, #1C1C1C);
  font-weight: 600; line-height: 1.5;
  margin: 0 0 12px;
}
.cms-tranquility-block__deposit-info strong { font-weight: 900; }

.cms-tranquility-block__option {
  display: flex; gap: 12px; align-items: flex-start;
  background: #fff;
  border: 1.5px solid var(--site-border, #E5E7EB);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.cms-tranquility-block__option:has(input:checked) {
  border-color: var(--site-accent-color, #F99907);
  background: linear-gradient(135deg, var(--site-accent-soft, #FEF3E2) 0%, #fff 60%);
}
.cms-tranquility-block__option input[type="checkbox"] {
  accent-color: var(--site-accent-color, #F99907);
  margin-top: 3px;
  width: 18px; height: 18px;
  flex-shrink: 0;
}
.cms-tranquility-block__option-text {
  flex: 1; min-width: 0;
}
.cms-tranquility-block__option-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 800;
  color: var(--site-text-color, #1C1C1C);
  flex-wrap: wrap;
}
.cms-tranquility-block__price {
  background: var(--site-accent-color, #F99907);
  color: #fff;
  font-size: 11px; font-weight: 800;
  padding: 2px 8px; border-radius: 100px;
}
.cms-tranquility-block__option-help {
  display: block;
  font-size: 12px; color: #6B7280;
  font-weight: 600;
  line-height: 1.5;
  margin-top: 4px;
}
.cms-tranquility-block__option-help strong { color: #1C1C1C; font-weight: 900; }

/* ════════════════════════════════════════════════════════════════
   IA IMAGE FALLBACK — Sujet #7
   Couleurs : on réutilise l'accent orange Coliope (--site-accent-color)
   pour la thématique "magie / IA" — cohérent avec MEMBRE, PRO, etc.
   ════════════════════════════════════════════════════════════════ */

/* Badge "🪄 IA" sur le catalogue (overlay sur l'image) */
.cms-ai-image-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  background: rgba(249, 153, 7, 0.92);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 10px; font-weight: 800;
  border-radius: 100px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  pointer-events: none;
}
.cms-ai-image-badge--inside-preview {
  position: absolute; top: 8px; right: 8px;
  z-index: 1;
}
/* Retour Jérôme 2026-05-31 — sur la card publique (catalogue + home),
   le badge IA était collé en haut à droite, juste sous le bouton cœur,
   ce qui donnait deux pills empilés au même coin et entrait en conflit
   visuel avec le geste favori. On le déplace en bas à droite, miroir du
   pill "Disponible" qui occupe le coin bas-gauche (bottom:12px left:12px).
   Le bouton cœur reste seul en haut à droite. */
.cms-ai-image-badge--card {
  position: absolute; bottom: 12px; right: 12px;
  z-index: 2;
}

/* Bouton "Générer une image IA" sous l'upload */
.cms-ai-image-actions {
  margin-top: 10px;
  display: flex; gap: 8px;
}
.cms-ai-image-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px;
  border: 1.5px solid var(--site-accent-color, #F99907);
  background: var(--site-accent-color, #F99907);
  color: #fff;
  border-radius: 10px;
  font-size: 13px; font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
}
.cms-ai-image-btn:hover:not(:disabled) {
  background: #D97706;
  transform: translateY(-1px);
}
.cms-ai-image-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.cms-ai-image-btn--ghost {
  background: transparent;
  color: var(--site-text-color, #1C1C1C);
  border-color: #E5E7EB;
}
.cms-ai-image-btn--ghost:hover:not(:disabled) {
  border-color: var(--site-accent-color, #F99907);
  color: var(--site-accent-color, #F99907);
  background: transparent;
}
.cms-ai-image-btn--primary {
  background: var(--site-accent-color, #F99907);
  border-color: var(--site-accent-color, #F99907);
  color: #fff;
}
.cms-ai-image-btn-quota {
  margin-left: 4px;
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  font-size: 10px;
  font-weight: 900;
}

/* Image preview placeholder (quand vide) */
.cms-owner-items__image-preview--empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px;
  background: #F5F5F5;
  border: 2px dashed #E5E7EB;
  border-radius: 14px;
  padding: 32px 20px;
  color: #9CA3AF;
  font-size: 13px; font-weight: 700;
}
.cms-owner-items__image-preview--empty span:first-child { font-size: 32px; }

/* Modale de génération */
.cms-ai-image-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.cms-ai-image-modal[hidden] { display: none; }
.cms-section > .cms-ai-image-modal,
.cms-section .cms-ai-image-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.cms-section > .cms-ai-image-modal[hidden],
.cms-section .cms-ai-image-modal[hidden] { display: none; }

.cms-ai-image-modal-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
}
.cms-ai-image-modal-popup {
  position: relative; z-index: 1;
  background: #fff;
  border-radius: 18px;
  width: 560px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.cms-ai-image-modal-head {
  padding: 18px 22px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid #E5E7EB;
}
.cms-ai-image-modal-head h3 {
  font-size: 16px; font-weight: 900;
  display: flex; align-items: center; gap: 10px;
  margin: 0;
}
.cms-ai-image-modal-head h3 i {
  color: var(--site-accent-color, #F99907);
}
.cms-ai-image-modal-close {
  width: 32px; height: 32px; border-radius: 50%;
  border: none; background: transparent;
  font-size: 22px; color: #6B7280; cursor: pointer;
}
.cms-ai-image-modal-close:hover { background: #F5F5F5; }
.cms-ai-image-modal-body {
  flex: 1; overflow-y: auto;
  padding: 22px;
}
.cms-ai-image-modal-foot {
  padding: 14px 22px;
  border-top: 1px solid #E5E7EB;
  display: flex; justify-content: flex-end; gap: 10px;
}

/* Loader animation */
.cms-ai-image-loader {
  display: flex; flex-direction: column;
  align-items: center;
  padding: 32px 24px; gap: 14px;
}
.cms-ai-image-loader-circle {
  width: 80px; height: 80px;
  border-radius: 50%;
  /* Gradient teal → orange Coliope */
  background: linear-gradient(135deg, var(--site-primary-color, #0C9994) 0%, var(--site-accent-color, #F99907) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  animation: cms-ai-image-pulse 1.6s ease-in-out infinite;
}
@keyframes cms-ai-image-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(249, 153, 7, 0.4); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 16px rgba(249, 153, 7, 0); }
}
.cms-ai-image-loader-text {
  font-size: 14px; font-weight: 800;
  color: var(--site-accent-color, #F99907);
}
.cms-ai-image-loader-help {
  font-size: 12px; color: #6B7280; font-weight: 600;
}

/* Quota bar (utilisée dans la modale) */
.cms-ai-image-quota-bar {
  background: #F5F5F5;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700;
}
.cms-ai-image-quota-bar.exhausted {
  background: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.3);
  color: #DC2626;
}
.cms-ai-image-quota-bar-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--site-accent-color, #F99907);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
}
.cms-ai-image-quota-track {
  height: 6px; background: #fff;
  border-radius: 100px; overflow: hidden;
}
.cms-ai-image-quota-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--site-primary-color, #0C9994), var(--site-accent-color, #F99907));
  border-radius: 100px;
  transition: width 0.5s;
}
.cms-ai-image-quota-text {
  font-size: 12px; color: #6B7280; font-weight: 800;
  flex-shrink: 0;
}

/* Erreur */
.cms-ai-image-error {
  background: #FEE2E2;
  color: #991B1B;
  border-left: 3px solid #DC2626;
  padding: 14px 16px;
  border-radius: 10px;
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px;
}
.cms-ai-image-error i { font-size: 18px; flex-shrink: 0; margin-top: 2px; color: #DC2626; }
.cms-ai-image-error strong { font-weight: 900; }
.cms-ai-image-error p { font-size: 12px; line-height: 1.5; font-weight: 600; margin: 0; }

/* Preview de l'image générée */
.cms-ai-image-preview {
  border-radius: 14px;
  overflow: hidden;
  background: #F5F5F5;
}

/* ============================================================
   Sujet #2 — Chantier 🅰️ Parcours Loueur (Coliope)
   Landing /devenir-loueur + Wizard 5 étapes + Welcome page
   Couleurs Coliope via --site-primary-color (fallback #0C9994)
   et --site-accent-color (fallback #F99907).
   ============================================================ */

.owner-signup-landing,
.owner-signup-wizard-section,
.owner-signup-welcome {
  font-family: 'Nunito', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: #1C1C1C;
  padding: 32px 24px 64px;
  background: #F5F5F5;
}

/* ---------- Boutons partagés ---------- */
.owner-signup-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 100px;
  border: none;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
  text-decoration: none;
  line-height: 1.2;
}
.owner-signup-btn--primary {
  background: var(--site-primary-color, #0C9994);
  color: #fff;
}
.owner-signup-btn--primary:hover {
  background: color-mix(in srgb, var(--site-primary-color, #0C9994) 85%, black);
}
.owner-signup-btn--accent {
  background: var(--site-accent-color, #F99907);
  color: #fff;
}
.owner-signup-btn--accent:hover {
  background: color-mix(in srgb, var(--site-accent-color, #F99907) 85%, black);
}
.owner-signup-btn--ghost {
  background: transparent;
  color: #1C1C1C;
  border: 2px solid #E5E7EB;
}
.owner-signup-btn--ghost:hover {
  border-color: var(--site-primary-color, #0C9994);
  color: var(--site-primary-color, #0C9994);
}
.owner-signup-btn--link {
  background: transparent;
  color: #6B7280;
  text-decoration: underline;
  padding: 12px 6px;
  font-size: 13px;
  font-weight: 700;
}
.owner-signup-btn--link:hover { color: var(--site-primary-color, #0C9994); }

/* ---------- Landing /devenir-loueur ---------- */
.owner-signup-landing__hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
  background: #fff;
  padding: 48px 36px;
  border-radius: 18px;
  border: 1px solid #E5E7EB;
  margin: 0 auto 32px;
  max-width: 1100px;
}
.owner-signup-landing__eyebrow {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--site-accent-color, #F99907);
  margin-bottom: 10px;
}
.owner-signup-landing__title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -1px;
  margin-bottom: 14px;
}
.owner-signup-landing__title em {
  color: var(--site-primary-color, #0C9994);
  font-style: normal;
}
.owner-signup-landing__lede {
  color: #6B7280;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 600;
  margin-bottom: 22px;
  max-width: 480px;
}
.owner-signup-landing__cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.owner-signup-landing__stats {
  display: flex;
  gap: 18px;
  margin-top: 28px;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
}
.owner-signup-landing__stats li {
  padding: 12px 16px;
  background: color-mix(in srgb, var(--site-primary-color, #0C9994) 8%, white);
  border-radius: 12px;
}
.owner-signup-landing__stats strong {
  display: block;
  font-size: 22px;
  font-weight: 900;
  color: var(--site-primary-color, #0C9994);
}
.owner-signup-landing__stats span {
  font-size: 11px;
  color: #6B7280;
  font-weight: 700;
}
.owner-signup-landing__hero-illu {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--site-primary-color, #0C9994) 15%, white) 0%,
    color-mix(in srgb, var(--site-accent-color, #F99907) 15%, white) 100%);
  border-radius: 24px;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  gap: 14px;
  box-shadow: 0 20px 50px -20px rgba(12, 153, 148, 0.3);
}

.owner-signup-landing__benefits,
.owner-signup-landing__steps {
  background: #fff;
  padding: 40px 32px;
  border-radius: 18px;
  border: 1px solid #E5E7EB;
  margin: 0 auto 28px;
  max-width: 1100px;
}
.owner-signup-landing__section-title {
  font-size: 26px;
  font-weight: 900;
  text-align: center;
  margin-bottom: 8px;
}
.owner-signup-landing__section-subtitle {
  font-size: 14px;
  color: #6B7280;
  text-align: center;
  margin-bottom: 28px;
  font-weight: 600;
}
.owner-signup-landing__benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.owner-signup-card {
  background: #fff;
  border: 1.5px solid #E5E7EB;
  border-radius: 14px;
  padding: 22px 18px;
  text-align: center;
  transition: transform 0.15s, border-color 0.15s;
}
.owner-signup-card:hover {
  border-color: var(--site-primary-color, #0C9994);
  transform: translateY(-2px);
}
.owner-signup-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--site-primary-color, #0C9994) 10%, white);
  color: var(--site-primary-color, #0C9994);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin: 0 auto 12px;
}
.owner-signup-card__icon--accent {
  background: color-mix(in srgb, var(--site-accent-color, #F99907) 12%, white);
  color: var(--site-accent-color, #F99907);
}
.owner-signup-card h3 {
  font-size: 14px;
  font-weight: 900;
  margin-bottom: 6px;
}
.owner-signup-card p {
  font-size: 12px;
  color: #6B7280;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}

.owner-signup-landing__flow {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  padding: 0;
  margin: 0 0 24px;
}
.owner-signup-landing__flow li {
  text-align: center;
  padding: 0 12px;
}
.owner-signup-landing__step-num {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--site-primary-color, #0C9994);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  margin: 0 auto 12px;
}
.owner-signup-landing__flow h4 {
  font-size: 14px;
  font-weight: 900;
  margin-bottom: 4px;
}
.owner-signup-landing__flow p {
  font-size: 12px;
  color: #6B7280;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}
.owner-signup-landing__bottom-cta {
  text-align: center;
  margin-top: 8px;
}

@media (max-width: 768px) {
  .owner-signup-landing__hero {
    grid-template-columns: 1fr;
    padding: 28px 22px;
  }
  .owner-signup-landing__hero-illu { aspect-ratio: 16/9; }
}

/* ---------- Wizard ---------- */
.owner-signup-wizard {
  background: #fff;
  border-radius: 18px;
  border: 1px solid #E5E7EB;
  overflow: hidden;
  max-width: 760px;
  margin: 0 auto;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08);
}
.owner-signup-wizard__progress {
  display: flex;
  padding: 18px 28px;
  background: color-mix(in srgb, var(--site-primary-color, #0C9994) 6%, white);
  border-bottom: 1px solid #E5E7EB;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.owner-signup-wizard__step {
  display: flex;
  align-items: center;
  gap: 8px;
}
.owner-signup-wizard__step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  background: #fff;
  color: #6B7280;
  border: 2px solid #E5E7EB;
}
.owner-signup-wizard__step--active .owner-signup-wizard__step-num {
  background: var(--site-primary-color, #0C9994);
  color: #fff;
  border-color: var(--site-primary-color, #0C9994);
}
.owner-signup-wizard__step--done .owner-signup-wizard__step-num {
  background: #059669;
  color: #fff;
  border-color: #059669;
}
.owner-signup-wizard__step-label {
  font-size: 11px;
  font-weight: 800;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.owner-signup-wizard__step--active .owner-signup-wizard__step-label {
  color: var(--site-primary-color, #0C9994);
}
.owner-signup-wizard__step-line {
  flex: 1;
  height: 2px;
  background: #E5E7EB;
  min-width: 16px;
  margin: 0 4px;
}
.owner-signup-wizard__step-line--done { background: #059669; }

.owner-signup-wizard__body { padding: 36px 32px 8px; }
.owner-signup-wizard__head { margin-bottom: 24px; text-align: center; }
.owner-signup-wizard__head h2 {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.4px;
  margin-bottom: 8px;
}
.owner-signup-wizard__head p {
  font-size: 13px;
  color: #6B7280;
  font-weight: 600;
  margin: 0;
}

.owner-signup-wizard__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 18px 28px;
  background: #F9FAFB;
  border-top: 1px solid #E5E7EB;
  margin: 28px -32px -8px;
  flex-wrap: wrap;
}
.owner-signup-wizard__foot-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* ---------- Form ---------- */
.owner-signup-form { display: block; }
.owner-signup-form--inline { display: contents; }
.owner-signup-form__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.owner-signup-form__label {
  font-size: 11px;
  font-weight: 800;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.owner-signup-form__input {
  padding: 12px 14px;
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  transition: border-color 0.15s;
}
.owner-signup-form__input:focus {
  outline: none;
  border-color: var(--site-primary-color, #0C9994);
}
.owner-signup-form__hint {
  font-size: 12px;
  color: #6B7280;
  font-weight: 600;
  margin: 0;
}
.owner-signup-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 540px) {
  .owner-signup-form__grid { grid-template-columns: 1fr; }
}

/* Roles */
.owner-signup-roles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 540px) {
  .owner-signup-roles { grid-template-columns: 1fr; }
}
.owner-signup-role-card {
  background: #fff;
  border: 2px solid #E5E7EB;
  border-radius: 14px;
  padding: 24px 18px;
  cursor: pointer;
  transition: transform 0.18s, border-color 0.18s, background 0.18s;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
}
.owner-signup-role-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.owner-signup-role-card:hover {
  border-color: var(--site-primary-color, #0C9994);
  transform: translateY(-2px);
}
.owner-signup-role-card--selected {
  border-color: var(--site-primary-color, #0C9994);
  background: color-mix(in srgb, var(--site-primary-color, #0C9994) 6%, white);
}
.owner-signup-role-card__icon { font-size: 44px; }
.owner-signup-role-card__title { font-size: 18px; font-weight: 900; }
.owner-signup-role-card__lede {
  font-size: 12px;
  color: #6B7280;
  font-weight: 600;
  line-height: 1.4;
}
.owner-signup-role-card__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}
.owner-signup-role-card__tag {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 100px;
  background: #F5F5F5;
  font-weight: 700;
  color: #6B7280;
}

/* SIRET fetched */
.owner-signup-siret-fetched {
  background: color-mix(in srgb, var(--site-primary-color, #0C9994) 6%, white);
  border: 1.5px solid color-mix(in srgb, var(--site-primary-color, #0C9994) 25%, white);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 10px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.owner-signup-siret-fetched--loading { opacity: 0.6; }
.owner-signup-siret-fetched__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--site-primary-color, #0C9994);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.owner-signup-siret-fetched__name { font-weight: 900; font-size: 14px; }
.owner-signup-siret-fetched__detail {
  font-size: 12px;
  color: #6B7280;
  font-weight: 600;
}
.owner-signup-siret-error {
  background: #FEE2E2;
  border-left: 3px solid #DC2626;
  color: #991B1B;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
  margin-top: 10px;
}

/* Rules step */
.owner-signup-rules { display: grid; gap: 12px; }
.owner-signup-rule-card {
  background: #fff;
  border: 1.5px solid #E5E7EB;
  border-radius: 14px;
  padding: 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.owner-signup-rule-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--site-primary-color, #0C9994) 10%, white);
  color: var(--site-primary-color, #0C9994);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.owner-signup-rule-card__icon--accent {
  background: color-mix(in srgb, var(--site-accent-color, #F99907) 12%, white);
  color: var(--site-accent-color, #F99907);
}
.owner-signup-rule-card__icon--success {
  background: #D1FAE5;
  color: #059669;
}
.owner-signup-rule-card h4 {
  font-size: 14px;
  font-weight: 900;
  margin: 0 0 4px;
}
.owner-signup-rule-card p {
  font-size: 13px;
  color: #6B7280;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
}
.owner-signup-rule-card strong { color: #1C1C1C; font-weight: 900; }

.owner-signup-checkbox {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px;
  background: #F9FAFB;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  margin-top: 14px;
}
.owner-signup-checkbox input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--site-primary-color, #0C9994);
  flex-shrink: 0;
}
.owner-signup-link {
  color: var(--site-primary-color, #0C9994);
  font-weight: 800;
}

/* Stripe step */
.owner-signup-stripe-card {
  background: linear-gradient(135deg, #635BFF 0%, #4B45D6 100%);
  color: #fff;
  border-radius: 14px;
  padding: 26px;
  margin-bottom: 6px;
}
.owner-signup-stripe-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.owner-signup-stripe-card__head h3 {
  font-size: 18px;
  font-weight: 900;
  margin: 0;
}
.owner-signup-stripe-card__logo { font-size: 28px; }
.owner-signup-stripe-card p {
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.92;
  margin-bottom: 16px;
}
.owner-signup-stripe-card__feats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 12px;
  list-style: none;
  padding: 0;
}
.owner-signup-stripe-card__feats li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}
.owner-signup-stripe-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #635BFF;
  padding: 11px 20px;
  border: 0;
  border-radius: 100px;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.owner-signup-stripe-card__btn:hover { background: #F5F5F5; }

@media (max-width: 540px) {
  .owner-signup-stripe-card__feats { grid-template-columns: 1fr; }
}

/* First item step */
.owner-signup-item-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 22px;
}
@media (max-width: 640px) {
  .owner-signup-item-grid { grid-template-columns: 1fr; }
}
.owner-signup-item-photo {
  background: #F5F5F5;
  border: 2px dashed #E5E7EB;
  border-radius: 12px;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #6B7280;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  position: relative;
  text-align: center;
  padding: 12px;
}
.owner-signup-item-photo i { font-size: 26px; }
.owner-signup-item-photo__hint {
  font-size: 10px;
  font-weight: 600;
}
.owner-signup-item-photo__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.owner-signup-item-fields { display: block; }

/* ---------- Welcome page ---------- */
.owner-signup-welcome {
  text-align: center;
}
.owner-signup-welcome__inner {
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  border-radius: 18px;
  border: 1px solid #E5E7EB;
  padding: 48px 32px;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.06);
}
.owner-signup-welcome__icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--site-primary-color, #0C9994), var(--site-accent-color, #F99907));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  margin: 0 auto 18px;
  box-shadow: 0 12px 30px -10px rgba(12, 153, 148, 0.4);
}
.owner-signup-welcome__title {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.6px;
  margin-bottom: 8px;
}
.owner-signup-welcome__lede {
  font-size: 14px;
  color: #6B7280;
  font-weight: 600;
  max-width: 460px;
  margin: 0 auto 26px;
  line-height: 1.5;
}

.owner-signup-checklist {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  padding: 22px;
  margin: 0 auto 24px;
  text-align: left;
}
.owner-signup-checklist__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.owner-signup-checklist__head h3 {
  font-size: 14px;
  font-weight: 900;
  margin: 0;
}
.owner-signup-checklist__progress {
  font-size: 12px;
  font-weight: 800;
  color: var(--site-primary-color, #0C9994);
}
.owner-signup-checklist__bar {
  height: 6px;
  background: #F5F5F5;
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 18px;
}
.owner-signup-checklist__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--site-primary-color, #0C9994), var(--site-accent-color, #F99907));
  border-radius: 100px;
  transition: width 0.5s;
}
.owner-signup-checklist__items { list-style: none; padding: 0; margin: 0; }
.owner-signup-checklist__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #F0F0F0;
}
.owner-signup-checklist__item:last-child { border-bottom: 0; }
.owner-signup-checklist__check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.owner-signup-checklist__check--done {
  background: #059669;
  color: #fff;
}
.owner-signup-checklist__check--todo {
  background: #F5F5F5;
  border: 2px solid #E5E7EB;
}
.owner-signup-checklist__label {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
}
.owner-signup-checklist__label--done {
  color: #6B7280;
  text-decoration: line-through;
}
.owner-signup-checklist__action {
  font-size: 11px;
  color: var(--site-primary-color, #0C9994);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 6px 8px;
  text-decoration: none;
  font-family: inherit;
}
.owner-signup-checklist__action:hover {
  text-decoration: underline;
}

.owner-signup-welcome__cta { margin-top: 8px; }

/* ========================================
   Sujet #2 — PARCOURS PARTENAIRE (chantier 🅱️)
   Landing publique, form inscription, dashboard partenaire,
   édition d'offre, set-password.
   ======================================== */

.cms-partner-signup,
.cms-partner-signup-form-section,
.cms-partner-pending,
.cms-partner-set-password,
.cms-partner-dashboard,
.cms-partner-offer-edit {
  --partner-accent: #F99907;
  --partner-accent-dark: #D97706;
  --partner-accent-soft: #FEF3E2;
  --partner-primary: #0C9994;
  --partner-primary-dark: #0A7A76;
  --partner-primary-soft: #F0FDFB;
  --partner-text: #1C1C1C;
  --partner-text-muted: #6B7280;
  --partner-bg: #F5F5F5;
  --partner-surface: #FFFFFF;
  --partner-border: #E5E7EB;
  --partner-success: #059669;
  --partner-success-soft: #D1FAE5;
  --partner-danger: #DC2626;
  --partner-danger-soft: #FEE2E2;
  --partner-warning: #D97706;
  --partner-warning-soft: #FEF3C7;
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  color: var(--partner-text);
  padding: 48px 24px;
  background: var(--partner-bg);
}

.partner-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 100px;
  border: none;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  text-decoration: none;
}
.partner-btn--accent { background: var(--partner-accent); color: #fff; }
.partner-btn--accent:hover { background: var(--partner-accent-dark); }
.partner-btn--ghost { background: transparent; color: var(--partner-text); border: 2px solid var(--partner-border); }
.partner-btn--ghost:hover { border-color: var(--partner-primary); color: var(--partner-primary); }
.partner-btn--large { padding: 14px 28px; font-size: 14px; }

/* Hero landing */
.partner-hero {
  background: linear-gradient(135deg, var(--partner-accent-soft) 0%, var(--partner-primary-soft) 100%);
  padding: 60px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  border-radius: 18px;
  max-width: 1100px;
  margin: 0 auto 32px;
}
@media (max-width: 768px) {
  .partner-hero { grid-template-columns: 1fr; padding: 40px 24px; }
}
.partner-hero__eyebrow {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--partner-accent);
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: #fff;
  border-radius: 100px;
  box-shadow: 0 4px 10px -4px rgba(249, 153, 7, 0.2);
}
.partner-hero__title {
  font-size: 38px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -1px;
  margin-bottom: 14px;
  color: var(--partner-text);
}
.partner-hero__title em { color: var(--partner-accent); font-style: normal; }
.partner-hero__lede {
  color: var(--partner-text-muted);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 600;
  margin-bottom: 22px;
}
.partner-hero__illu {
  background: #fff;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.partner-hero__card {
  padding: 14px 16px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.partner-hero__card--1 { background: var(--partner-accent-soft); }
.partner-hero__card--2 { background: var(--partner-primary-soft); }
.partner-hero__card--3 { background: #F5EBE0; }
.partner-hero__card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--partner-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.partner-hero__card--2 .partner-hero__card-icon { background: var(--partner-primary); }
.partner-hero__card--3 .partner-hero__card-icon { background: #92632F; }
.partner-hero__card strong { display: block; font-size: 14px; font-weight: 900; color: var(--partner-text); }
.partner-hero__card span { font-size: 12px; color: var(--partner-text-muted); font-weight: 600; }

/* Bénéfices */
.partner-benefits { padding: 48px 32px; max-width: 1100px; margin: 0 auto; }
.partner-section-title { font-size: 24px; font-weight: 900; text-align: center; margin-bottom: 8px; }
.partner-section-subtitle {
  font-size: 14px;
  color: var(--partner-text-muted);
  text-align: center;
  margin-bottom: 28px;
  font-weight: 600;
}
.partner-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 768px) { .partner-benefits__grid { grid-template-columns: 1fr; } }
.partner-benefit-card {
  background: #fff;
  border: 1.5px solid var(--partner-border);
  border-radius: 14px;
  padding: 24px 18px;
  text-align: center;
}
.partner-benefit-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--partner-accent-soft);
  color: var(--partner-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 0 auto 14px;
}
.partner-benefit-card__icon--primary {
  background: #CCFBF1;
  color: var(--partner-primary);
}
.partner-benefit-card h3 { font-size: 15px; font-weight: 900; margin-bottom: 8px; }
.partner-benefit-card p { font-size: 13px; color: var(--partner-text-muted); font-weight: 600; line-height: 1.5; }

/* Tiers */
.partner-tiers { padding: 48px 32px; max-width: 1100px; margin: 0 auto; }
.partner-tiers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 768px) { .partner-tiers__grid { grid-template-columns: 1fr; } }
.partner-tier-card {
  background: #fff;
  border: 2px solid var(--partner-border);
  border-radius: 16px;
  padding: 24px 20px;
  position: relative;
}
.partner-tier-card--featured {
  border-color: var(--partner-accent);
  transform: scale(1.04);
  box-shadow: 0 12px 30px -10px rgba(249, 153, 7, 0.25);
}
.partner-tier-card--featured::before {
  content: 'POPULAIRE';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--partner-accent);
  color: #fff;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
}
.partner-tier-card__name {
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
}
.partner-tier-card__name--bronze { color: #B45309; }
.partner-tier-card__name--silver { color: #6B7280; }
.partner-tier-card__name--gold { color: #D97706; }
.partner-tier-card__price { font-size: 28px; font-weight: 900; margin-bottom: 4px; }
.partner-tier-card__price small { font-size: 12px; color: var(--partner-text-muted); font-weight: 700; }
.partner-tier-card__tagline { font-size: 12px; color: var(--partner-text-muted); font-weight: 600; margin-bottom: 14px; }
.partner-tier-card__features { list-style: none; padding: 0; margin: 0; }
.partner-tier-card__features li {
  padding: 6px 0;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.partner-tier-card__features li i { color: var(--partner-success); font-size: 12px; }
.partner-tiers__footnote {
  text-align: center;
  font-size: 12px;
  color: var(--partner-text-muted);
  font-weight: 600;
  margin-top: 18px;
  font-style: italic;
}

/* CTA band */
.partner-cta-band {
  background: linear-gradient(135deg, var(--partner-accent), var(--partner-accent-dark));
  color: #fff;
  text-align: center;
  padding: 48px 32px;
  border-radius: 18px;
  max-width: 1100px;
  margin: 32px auto 0;
}
.partner-cta-band h2 { font-size: 24px; font-weight: 900; margin-bottom: 8px; color: #fff; }
.partner-cta-band p { font-size: 14px; opacity: 0.92; margin-bottom: 18px; }
.partner-cta-band .partner-btn--accent { background: #fff; color: var(--partner-accent-dark); }
.partner-cta-band .partner-btn--accent:hover { background: var(--partner-accent-soft); color: var(--partner-accent-dark); }

/* Form card commun */
.partner-form-card {
  background: #fff;
  border-radius: 18px;
  border: 1px solid var(--partner-border);
  max-width: 720px;
  margin: 0 auto;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.partner-form-card--narrow { max-width: 480px; }
.partner-form-card__head { padding: 24px 28px; border-bottom: 1px solid var(--partner-border); }
.partner-form-card__head h1 { font-size: 22px; font-weight: 900; margin-bottom: 4px; color: var(--partner-text); }
.partner-form-card__head p { font-size: 13px; color: var(--partner-text-muted); font-weight: 600; }
.partner-form-card__alert {
  margin: 16px 28px 0;
  padding: 12px 14px;
  border-radius: 10px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  font-weight: 600;
}
.partner-form-card__alert--error { background: var(--partner-danger-soft); color: #991B1B; }
.partner-form-card__alert--success { background: var(--partner-success-soft); color: #065F46; }
.partner-form-card__alert i { margin-top: 2px; flex-shrink: 0; }
.partner-form { padding: 24px 28px; }
.partner-form__section-title {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--partner-accent);
  margin: 24px 0 10px;
  padding-top: 20px;
  border-top: 1px dashed var(--partner-border);
}
.partner-form__section-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.partner-form__section-title small {
  font-weight: 600;
  text-transform: none;
  color: var(--partner-text-muted);
  letter-spacing: normal;
  margin-left: 6px;
}
.partner-form__row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.partner-form__file-error { margin: 4px 0 0; font-size: 12.5px; font-weight: 600; color: var(--site-danger, #dc2626); }
.partner-form__file-error[hidden] { display: none; }
.partner-form__row label {
  font-size: 11px;
  font-weight: 800;
  color: var(--partner-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.partner-form__row label small {
  font-weight: 600;
  text-transform: none;
  color: #9CA3AF;
  letter-spacing: normal;
}
.partner-form__row input,
.partner-form__row select,
.partner-form__row textarea {
  padding: 11px 14px;
  border: 1.5px solid var(--partner-border);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s;
  background: #fff;
}
.partner-form__row input:focus,
.partner-form__row select:focus,
.partner-form__row textarea:focus {
  outline: none;
  border-color: var(--partner-accent);
}
.partner-form__row--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.partner-form__row--grid > .partner-form__row { margin-bottom: 0; }
@media (max-width: 580px) { .partner-form__row--grid { grid-template-columns: 1fr; } }
.partner-form__inpi-feedback {
  background: var(--partner-primary-soft);
  border: 1.5px solid #CCFBF1;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 6px 0 16px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.partner-form__inpi-feedback--hidden { display: none; }
.partner-form__inpi-feedback-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--partner-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.partner-form__inpi-feedback-name { font-weight: 900; font-size: 14px; }
.partner-form__inpi-feedback-detail { font-size: 12px; color: var(--partner-text-muted); font-weight: 600; }
.partner-form__code-row { display: flex; gap: 8px; align-items: center; }
.partner-form__code-input {
  flex: 1;
  background: var(--partner-bg) !important;
  font-family: 'SFMono-Regular', Consolas, monospace !important;
  font-weight: 900;
  color: var(--partner-accent) !important;
  letter-spacing: 1px;
  cursor: not-allowed;
}
.partner-form__regenerate-btn {
  padding: 11px 14px;
  border: 1.5px solid var(--partner-border);
  background: #fff;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  color: var(--partner-text-muted);
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.partner-form__regenerate-btn:hover { border-color: var(--partner-accent); color: var(--partner-accent); }
.partner-form__cgu {
  margin-top: 14px;
}
.partner-form__cgu label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px;
  background: var(--partner-bg);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--partner-text);
  text-transform: none;
  letter-spacing: normal;
}
.partner-form__cgu input[type='checkbox'] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--partner-accent);
  flex-shrink: 0;
}
.partner-form__cgu a { color: var(--partner-accent); font-weight: 800; }
.partner-form__foot {
  padding: 18px 28px;
  background: var(--partner-bg);
  border-top: 1px solid var(--partner-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 -28px -24px;
  margin-top: 24px;
}
.partner-form__back-link { font-size: 12px; color: var(--partner-text-muted); font-weight: 700; text-decoration: none; }
.partner-form__back-link:hover { color: var(--partner-accent); }

/* Pending */
.partner-pending {
  text-align: center;
  background: #fff;
  border-radius: 18px;
  padding: 60px 32px;
  max-width: 720px;
  margin: 0 auto;
  border: 1px solid var(--partner-border);
}
.partner-pending__icon {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--partner-warning-soft);
  color: var(--partner-warning);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  margin: 0 auto 18px;
}
.partner-pending__title { font-size: 26px; font-weight: 900; margin-bottom: 8px; }
.partner-pending__intro {
  font-size: 14px;
  color: var(--partner-text-muted);
  font-weight: 600;
  max-width: 460px;
  margin: 0 auto 24px;
  line-height: 1.6;
}
.partner-pending__steps {
  background: var(--partner-bg);
  border-radius: 14px;
  padding: 20px;
  max-width: 480px;
  margin: 0 auto;
  text-align: left;
  list-style: none;
}
.partner-pending__step { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.partner-pending__step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  color: var(--partner-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  border: 2px solid var(--partner-border);
  flex-shrink: 0;
}
.partner-pending__step--active .partner-pending__step-num {
  background: var(--partner-warning);
  color: #fff;
  border-color: var(--partner-warning);
}
.partner-pending__step--done .partner-pending__step-num {
  background: var(--partner-success);
  color: #fff;
  border-color: var(--partner-success);
}
.partner-pending__step-text { font-size: 13px; font-weight: 700; }
.partner-pending__step--done .partner-pending__step-text { color: var(--partner-text-muted); }
.partner-pending__contact { margin-top: 24px; font-size: 12px; color: var(--partner-text-muted); }
.partner-pending__contact a { color: var(--partner-accent); font-weight: 800; }

/* Dashboard */
.partner-dashboard {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 768px) { .partner-dashboard { grid-template-columns: 1fr; } }
.partner-dashboard__aside {
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  border: 1px solid var(--partner-border);
  height: fit-content;
}
.partner-dashboard__profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--partner-border);
  margin-bottom: 16px;
}
.partner-dashboard__logo,
.partner-dashboard__logo-img {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  object-fit: cover;
}
.partner-dashboard__logo {
  background: linear-gradient(135deg, var(--partner-accent), var(--partner-accent-dark));
  color: #fff;
  font-weight: 900;
}
.partner-dashboard__name { font-size: 14px; font-weight: 900; text-align: center; color: var(--partner-text); }
.partner-dashboard__tier {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 100px;
  background: var(--partner-accent-soft);
  color: var(--partner-accent);
  font-weight: 800;
}
.partner-dashboard__tier--silver { background: #F3F4F6; color: #6B7280; }
.partner-dashboard__nav { display: flex; flex-direction: column; gap: 4px; }
.partner-dashboard__nav a {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--partner-text-muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.partner-dashboard__nav a.active {
  background: var(--partner-accent-soft);
  color: var(--partner-accent);
  font-weight: 900;
}
.partner-dashboard__nav a:hover { background: var(--partner-bg); }
.partner-dashboard__main { display: flex; flex-direction: column; gap: 18px; }
.partner-dashboard__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 768px) { .partner-dashboard__stats { grid-template-columns: 1fr 1fr; } }

.partner-stat-card {
  background: #fff;
  border: 1px solid var(--partner-border);
  border-radius: 14px;
  padding: 18px 16px;
}
.partner-stat-card__label {
  font-size: 11px;
  font-weight: 800;
  color: var(--partner-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}
.partner-stat-card__value {
  font-size: 26px;
  font-weight: 900;
  color: var(--partner-text);
  line-height: 1;
  margin-bottom: 6px;
}
.partner-stat-card__value small { font-size: 14px; color: var(--partner-text-muted); }
.partner-stat-card__trend { font-size: 11px; font-weight: 800; color: var(--partner-text-muted); }

.partner-status-badge {
  display: inline-block;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 100px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: var(--partner-bg);
  color: var(--partner-text-muted);
}
.partner-status-badge--active { background: var(--partner-success); color: #fff; }

.partner-panel {
  background: #fff;
  border: 1px solid var(--partner-border);
  border-radius: 14px;
  padding: 22px 24px;
}
.partner-panel__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.partner-panel__head h3 { font-size: 16px; font-weight: 900; }
.partner-panel__hint { font-size: 12px; color: var(--partner-text-muted); }
.partner-panel__quota {
  background: var(--partner-bg);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 14px;
}
.partner-panel__quota-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--partner-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.partner-panel__quota-text { flex: 1; color: var(--partner-text); }
.partner-panel__empty {
  padding: 24px;
  background: var(--partner-bg);
  border-radius: 10px;
  text-align: center;
  font-size: 13px;
  color: var(--partner-text-muted);
  font-weight: 600;
}

.partner-offer-card {
  background: #fff;
  border: 1.5px solid var(--partner-border);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 10px;
}
.partner-offer-card--active {
  border-color: var(--partner-success);
  background: linear-gradient(90deg, var(--partner-success-soft) 0%, #fff 50%);
}
.partner-offer-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--partner-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.partner-offer-card__content { flex: 1; min-width: 0; }
.partner-offer-card__title {
  font-size: 14px;
  font-weight: 900;
  margin-bottom: 3px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.partner-offer-card__badge {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 100px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: var(--partner-bg);
  color: var(--partner-text-muted);
}
.partner-offer-card__badge--active { background: var(--partner-success); color: #fff; }
.partner-offer-card__desc {
  font-size: 12px;
  color: var(--partner-text-muted);
  font-weight: 600;
}
.partner-offer-card__code {
  background: #fff;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'SFMono-Regular', Consolas, monospace;
  color: var(--partner-accent);
  font-weight: 900;
  border: 1px solid var(--partner-border);
}
.partner-offer-card__stats {
  display: flex;
  gap: 16px;
  font-size: 11px;
  font-weight: 800;
  color: var(--partner-text-muted);
  margin-top: 6px;
  flex-wrap: wrap;
}
.partner-offer-card__stats span { display: inline-flex; align-items: center; gap: 4px; }
.partner-offer-card__actions { display: flex; gap: 6px; flex-shrink: 0; }
.partner-offer-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1.5px solid var(--partner-border);
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--partner-text-muted);
  text-decoration: none;
}
.partner-offer-action-btn:hover { border-color: var(--partner-accent); color: var(--partner-accent); }
.partner-offer-action-form { display: inline-flex; padding: 0; margin: 0; }
.partner-offer-action-form button { all: unset; cursor: pointer; }

/* Revelation list */
.partner-revelations-list { display: grid; gap: 8px; }
.partner-revelation-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--partner-bg);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
}
.partner-revelation-row__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--partner-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  flex-shrink: 0;
}
.partner-revelation-row__info { flex: 1; }
.partner-revelation-row__meta { font-size: 11px; color: var(--partner-text-muted); }

/* Preview card (édition d'offre) */
.partner-preview-card {
  background: linear-gradient(135deg, var(--partner-accent-soft) 0%, var(--partner-primary-soft) 100%);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 14px;
}
.partner-preview-card__logo,
.partner-preview-card__logo-img {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  object-fit: cover;
}
.partner-preview-card__logo {
  background: var(--partner-accent);
  color: #fff;
  font-weight: 900;
}
.partner-preview-card__content { flex: 1; min-width: 0; }
.partner-preview-card__content strong {
  display: block;
  font-size: 15px;
  font-weight: 900;
  margin-bottom: 2px;
  color: var(--partner-text);
}
.partner-preview-card__tagline { font-size: 12px; color: var(--partner-text-muted); font-weight: 600; margin-bottom: 8px; }
.partner-preview-card__offer-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--partner-accent-dark);
  flex-wrap: wrap;
}
.partner-preview-card__cta {
  background: var(--partner-accent);
  color: #fff;
  padding: 8px 14px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 900;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   PR #3098 — Page "Mes favoris" (customer_favorites.html.erb)
   Extrait du <style> inline pour conformité Ordre 99 §5.
   ───────────────────────────────────────────────────────────────────────── */
.cms-favs { max-width: 1100px; margin: 24px auto 60px; padding: 0 16px; }
.cms-favs__header {
  display: flex; align-items: center; gap: 14px; margin-bottom: 24px;
}
.cms-favs__back {
  color: var(--site-primary-color, #0c9994);
  text-decoration: none; font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px;
}
.cms-favs__back:hover { opacity: 0.8; }
.cms-favs__title {
  font-size: 24px; font-weight: 800;
  color: var(--site-text-color, #1f2937);
  margin: 0;
}
.cms-favs__count {
  margin-left: auto; font-size: 13px; color: #6b7280;
  background: #f3f4f6; padding: 4px 12px; border-radius: 999px;
  font-weight: 600;
}
.cms-favs__grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
/* F7 (Emma 2026-07-07) — bouton retrait favori en coin de carte */
.cms-fav-card-wrap { position: relative; }
.cms-fav-card__remove {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #ef4444; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s, background 0.15s;
}
.cms-fav-card__remove:hover { transform: scale(1.08); background: #fff; }
.cms-fav-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 14px;
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
}
.cms-fav-card:hover {
  transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
}
.cms-fav-card__media { aspect-ratio: 4 / 3; background: #f3f4f6; overflow: hidden; position: relative; }
.cms-fav-card__media img { width: 100%; height: 100%; object-fit: cover; }
.cms-fav-card__media-placeholder {
  display: flex; height: 100%; align-items: center; justify-content: center;
}
.cms-fav-card__media-placeholder i { font-size: 32px; color: #d1d5db; }
.cms-fav-card__body { padding: 12px 14px; }
.cms-fav-card__name { font-weight: 700; font-size: 14px; margin-bottom: 4px; color: #111827; }
.cms-fav-card__meta { font-size: 12px; color: #6b7280; }
.cms-fav-card__price { font-weight: 800; color: var(--site-primary-color, #0c9994); margin-top: 6px; font-size: 14px; }
.cms-fav-card__price small { font-weight: 500; color: #6b7280; font-size: 11px; }
.cms-favs__empty {
  text-align: center; padding: 60px 20px; color: #6b7280;
  background: #f9fafb; border-radius: 14px; border: 1px dashed #e5e7eb;
}
.cms-favs__empty-icon { font-size: 48px; color: #d1d5db; margin-bottom: 12px; }
.cms-favs__empty-title { font-size: 18px; margin-bottom: 8px; color: #374151; }
.cms-favs__empty-cta {
  display: inline-block; margin-top: 16px; padding: 10px 20px;
  background: var(--site-primary-color, #0c9994); color: #fff;
  border-radius: 10px; text-decoration: none; font-weight: 600;
}

/* ============================================================================
   SKELETON LOADER POUR IMAGES CMS (PR coliope-polish 2026-05-19)
   ----------------------------------------------------------------------------
   Wraps <img> dans un .cms-image-frame qui affiche un shimmer dégradé tant
   que `data-controller="image-loader"` n'a pas reçu l'event `load`. Une fois
   chargée, le wrapper bascule en .cms-image-frame--loaded → fade-in image.
   100 % token-friendly (pas de couleurs en dur, garde le neutre gris clair).
   ============================================================================ */

.cms-image-frame {
  position: relative;
  overflow: hidden;
  background: #f3f4f6;
  /* Le frame conserve son aspect-ratio quand l'image n'a pas encore chargé. */
  display: block;
  width: 100%;
}

.cms-image-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 320ms ease;
}

.cms-image-frame--loading {
  background: linear-gradient(90deg, #f0f1f2 0%, #fafafa 50%, #f0f1f2 100%);
  background-size: 200% 100%;
  animation: cms-image-shimmer 1.4s ease-in-out infinite;
}

.cms-image-frame--loaded img {
  opacity: 1;
}

@keyframes cms-image-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Pour respecter `prefers-reduced-motion` (accessibilité). */
@media (prefers-reduced-motion: reduce) {
  .cms-image-frame--loading { animation: none; }
  .cms-image-frame img { transition: none; opacity: 1; }
}

/* ============================================================================
   PAGINATION CATALOGUE (PR coliope-polish 2026-05-19)
   ----------------------------------------------------------------------------
   Pagination simple chips Prev/N/Next pour le catalogue rental.
   Style cohérent avec les cards (radius 10, padding 10/14, --site-primary).
   ============================================================================ */

.cms-rental-catalog__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 32px 0 12px;
  flex-wrap: wrap;
}

.cms-rental-catalog__pagination-link,
.cms-rental-catalog__pagination-current,
.cms-rental-catalog__pagination-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.cms-rental-catalog__pagination-link {
  color: #374151;
  background: #fff;
  border: 1px solid #e5e7eb;
}

.cms-rental-catalog__pagination-link:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.cms-rental-catalog__pagination-current {
  color: #fff;
  background: var(--site-primary-color, #0c9994);
  border: 1px solid var(--site-primary-color, #0c9994);
  cursor: default;
}

.cms-rental-catalog__pagination-gap {
  color: #9ca3af;
  background: transparent;
  border: none;
  min-width: 24px;
}

.cms-rental-catalog__pagination-link--nav {
  font-weight: 500;
  letter-spacing: 0.01em;
}

.cms-rental-catalog__pagination-link--disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

.cms-rental-catalog__pagination-summary {
  flex-basis: 100%;
  text-align: center;
  font-size: 12px;
  color: #6b7280;
  margin-top: 8px;
}

/* ============================================================
   Backlog Emma 16.5 — État des lieux check-in / check-out.
   Partial `_rental_state_of_plays.html.erb` inséré dans
   owner_reservation_detail et renter_reservation_management.
   ============================================================ */
.cms-state-of-plays {
  margin-top: 24px;
  padding: 20px 22px;
  background: var(--site-surface, #fafafa);
  border-radius: var(--site-radius-card, 14px);
  border: 1px solid var(--site-border, rgba(28, 28, 28, 0.08));
}
.cms-state-of-plays__head { margin-bottom: 18px; }
.cms-state-of-plays__title {
  font-size: 16px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-text-color);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cms-state-of-plays__title i {
  color: var(--site-accent-color, #F99907);
}
.cms-state-of-plays__hint {
  margin: 0;
  font-size: 12.5px;
  color: var(--site-text-muted);
  line-height: 1.55;
}
.cms-state-of-plays__hint--muted { font-style: italic; opacity: 0.85; }
.cms-state-of-plays__row {
  background: var(--site-background, #fff);
  padding: 14px 16px;
  border-radius: var(--site-radius-sm, 9px);
  border: 1px solid var(--site-border, rgba(28, 28, 28, 0.08));
  margin-bottom: 12px;
}
.cms-state-of-plays__row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 10px;
}
.cms-state-of-plays__row-head strong { font-size: 14px; }
.cms-state-of-plays__badge {
  font-size: 11px;
  font-weight: var(--site-font-weight-bold, 700);
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cms-state-of-plays__badge--pending { background: rgba(251, 191, 36, 0.14); color: #b45309; }
.cms-state-of-plays__badge--ok      { background: rgba(34, 197, 94, 0.14);   color: #166534; }
.cms-state-of-plays__badge--ko      { background: rgba(239, 68, 68, 0.14);   color: #991b1b; }
.cms-state-of-plays__badge--muted   { background: rgba(0, 0, 0, 0.06);       color: var(--site-text-muted); }
.cms-state-of-plays__photos {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 6px;
}
.cms-state-of-plays__photos a { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 6px; }
.cms-state-of-plays__photos img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.2s ease;
}
.cms-state-of-plays__photos a:hover img { transform: scale(1.04); }
.cms-state-of-plays__quote {
  font-size: 13px;
  color: var(--site-text-color);
  margin: 0 0 8px;
  font-style: italic;
  padding-left: 10px;
  border-left: 3px solid var(--site-primary-color, currentColor);
}
.cms-state-of-plays__note {
  font-size: 13px;
  margin: 6px 0;
  padding: 8px 10px;
  border-radius: 6px;
}
.cms-state-of-plays__note--ok { background: rgba(34, 197, 94, 0.08); }
.cms-state-of-plays__note--ko { background: rgba(239, 68, 68, 0.08); }
.cms-state-of-plays__form {
  display: flex; flex-direction: column; gap: 8px; margin-top: 10px;
}
.cms-state-of-plays__file {
  padding: 8px;
  background: var(--site-surface);
  border: 1.5px dashed var(--site-border);
  border-radius: 6px;
  font-size: 13px;
}
.cms-state-of-plays__textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--site-border, #e5e7eb);
  border-radius: var(--site-radius-sm, 9px);
  font-family: inherit;
  font-size: 13px;
  background: var(--site-background, #fff);
  resize: vertical;
}
.cms-state-of-plays__textarea:focus {
  outline: none;
  border-color: var(--site-primary-color);
}
.cms-state-of-plays__actions {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.cms-state-of-plays__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: var(--site-font-weight-bold, 700);
  text-decoration: none;
  cursor: pointer;
  border: none;
  font-family: inherit;
}
.cms-state-of-plays__btn--primary { background: var(--site-primary-color); color: #fff; }
.cms-state-of-plays__btn--ok      { background: #166534; color: #fff; }
.cms-state-of-plays__btn--ko      {
  background: var(--site-background);
  color: #b91c1c;
  border: 1.5px solid #b91c1c;
}
.cms-state-of-plays__dispute summary {
  list-style: none;
  cursor: pointer;
}
.cms-state-of-plays__dispute summary::-webkit-details-marker { display: none; }
.cms-state-of-plays__dispute-form {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Backlog Emma 19.1 — Icône coin/colibri inline dans hero-card-value loyalty.
   Placeholder SVG, à remplacer par l'asset colibri Emma au moment de la
   livraison. Animation subtile sur hover (pulse 1.05). */
.cms-loyalty-v2__coin-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-right: 10px;
  transition: transform 0.2s ease;
}
.cms-loyalty-v2__hero-card:hover .cms-loyalty-v2__coin-icon {
  transform: scale(1.08) rotate(-4deg);
}

/* Backlog Emma 18.22 — Banner explicatif owner_agenda (calendrier dispo / main propre).
   Dismissible via Stimulus dismissable_banner + localStorage. */
.cms-owner-agenda__hint-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  margin: 16px 0 20px;
  background: var(--site-accent-soft, rgba(249, 153, 7, 0.10));
  border-left: 4px solid var(--site-accent-color, #F99907);
  border-radius: var(--site-radius-sm, 9px);
  color: var(--site-text-color);
}
.cms-owner-agenda__hint-banner.hidden { display: none; }
.cms-owner-agenda__hint-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--site-accent-color, #F99907);
  color: #fff;
  font-size: 14px;
  margin-top: 2px;
}
.cms-owner-agenda__hint-body { flex: 1; }
.cms-owner-agenda__hint-body strong {
  display: block;
  font-size: 14px;
  font-weight: var(--site-font-weight-bold, 700);
  margin-bottom: 4px;
}
.cms-owner-agenda__hint-body strong em {
  color: var(--site-accent-color, #F99907);
  font-style: normal;
}
.cms-owner-agenda__hint-body p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--site-text-muted, #6B7280);
}
.cms-owner-agenda__hint-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--site-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.cms-owner-agenda__hint-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--site-text-color);
}
.cms-owner-agenda__hint-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 8px 0;
  background: transparent;
  border: 1.5px dashed var(--site-accent-color, #F99907);
  border-radius: 50%;
  color: var(--site-accent-color, #F99907);
  cursor: pointer;
}
.cms-owner-agenda__hint-toggle.visible { display: inline-flex; }
.cms-owner-agenda__hint-toggle:hover {
  background: var(--site-accent-soft);
}

/* ============================================================
   Backlog Emma 11.1 — Section "Comment ça marche" (dual_path)
   2 cards cliquables → ancres natives → 2 sections détaillées
   avec étapes (icône à gauche, body à droite) + gamification + CTA.
   ============================================================ */
.cms-how-it-works--dual-path {
  padding: 64px 0;
}
.cms-how-it-works--dual-path.cms-how-it-works--bg-primary-light {
  background: var(--site-primary-light, var(--site-surface, #fafafa));
}
.cms-how-it-works--dual-path .cms-how-it-works__inner {
  max-width: var(--site-container-max, 1100px);
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
.cms-how-it-works--dual-path .cms-how-it-works__header {
  text-align: center;
  margin-bottom: 40px;
}
.cms-how-it-works--dual-path .cms-how-it-works__kicker {
  display: inline-block;
  background: var(--site-accent-color, #F99907);
  color: #fff;
  font-size: 12px;
  font-weight: var(--site-font-weight-brand, 800);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--site-radius-pill, 999px);
  margin-bottom: 14px;
}
.cms-how-it-works--dual-path .cms-how-it-works__title {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-text-color);
  margin: 0 0 10px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.cms-how-it-works--dual-path .cms-how-it-works__subtitle {
  font-size: 16px;
  color: var(--site-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* Choice cards */
.cms-how-it-works--dual-path .cms-how-it-works__choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 56px;
}
@media (max-width: 700px) {
  .cms-how-it-works--dual-path .cms-how-it-works__choice {
    grid-template-columns: 1fr;
  }
}
.cms-how-it-works--dual-path .cms-how-it-works__choice-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 28px;
  background: var(--site-background, #fff);
  border: 1.5px solid var(--site-border, rgba(28, 28, 28, 0.10));
  border-radius: var(--site-radius-card, 14px);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.cms-how-it-works--dual-path .cms-how-it-works__choice-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--site-shadow-md, 0 8px 24px rgba(0, 0, 0, 0.08));
  border-color: var(--site-accent-color, #F99907);
}
.cms-how-it-works--dual-path .cms-how-it-works__choice-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--site-accent-soft, rgba(249, 153, 7, 0.10));
  color: var(--site-accent-color, #F99907);
  font-size: 22px;
}
.cms-how-it-works--dual-path .cms-how-it-works__choice-title {
  font-size: 22px;
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-text-color);
}
.cms-how-it-works--dual-path .cms-how-it-works__choice-pitch {
  font-size: 14px;
  color: var(--site-text-muted);
  line-height: 1.5;
}
.cms-how-it-works--dual-path .cms-how-it-works__choice-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-accent-color, #F99907);
}

/* Path sections (détails par parcours) */
.cms-how-it-works--dual-path .cms-how-it-works__path {
  background: var(--site-background, #fff);
  border-radius: var(--site-radius-card, 14px);
  border: 1px solid var(--site-border, rgba(28, 28, 28, 0.08));
  padding: 32px;
  margin-bottom: 24px;
  scroll-margin-top: 80px; /* ancre cliquée → titre pas masqué par la navbar */
}
.cms-how-it-works--dual-path .cms-how-it-works__path-title {
  font-size: 24px;
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-text-color);
  margin: 0 0 24px;
  letter-spacing: -0.015em;
}

/* Steps : icône à gauche (alignement explicite Emma 11.1), body à droite */
.cms-how-it-works--dual-path .cms-how-it-works__steps {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cms-how-it-works--dual-path .cms-how-it-works__step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.cms-how-it-works--dual-path .cms-how-it-works__step-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--site-primary-soft, rgba(12, 153, 148, 0.10));
  color: var(--site-primary-color, currentColor);
  font-size: 18px;
}
.cms-how-it-works--dual-path .cms-how-it-works__step-body {
  flex: 1;
  min-width: 0;
}
.cms-how-it-works--dual-path .cms-how-it-works__step-title {
  font-size: 15px;
  font-weight: var(--site-font-weight-bold, 700);
  color: var(--site-text-color);
  margin-bottom: 4px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.cms-how-it-works--dual-path .cms-how-it-works__step-num {
  color: var(--site-accent-color, #F99907);
  font-weight: var(--site-font-weight-black, 900);
}
.cms-how-it-works--dual-path .cms-how-it-works__step-text {
  font-size: 13.5px;
  color: var(--site-text-muted);
  margin: 0;
  line-height: 1.55;
}

/* CTA */
.cms-how-it-works--dual-path .cms-how-it-works__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--site-accent-color, #F99907);
  color: #fff;
  border-radius: var(--site-radius-pill, 999px);
  font-weight: var(--site-font-weight-bold, 700);
  font-size: 14px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cms-how-it-works--dual-path .cms-how-it-works__cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--site-shadow-md, 0 8px 20px rgba(0, 0, 0, 0.12));
}
.cms-how-it-works--dual-path .cms-how-it-works__cta--renter {
  background: var(--site-primary-color);
}

/* Gamification */
.cms-how-it-works--dual-path .cms-how-it-works__gamif {
  margin-top: 32px;
  padding: 24px 28px;
  background: linear-gradient(135deg,
    var(--site-accent-color, #F99907) 0%,
    color-mix(in srgb, var(--site-accent-color, #F99907) 60%, #fff) 100%);
  color: #fff;
  border-radius: var(--site-radius-card, 14px);
  display: flex;
  align-items: center;
  gap: 20px;
}
.cms-how-it-works--dual-path .cms-how-it-works__gamif-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 22px;
}
.cms-how-it-works--dual-path .cms-how-it-works__gamif-title {
  font-size: 18px;
  font-weight: var(--site-font-weight-black, 900);
  margin: 0 0 4px;
}
.cms-how-it-works--dual-path .cms-how-it-works__gamif-text {
  font-size: 13.5px;
  margin: 0;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.95);
}
@media (max-width: 560px) {
  .cms-how-it-works--dual-path .cms-how-it-works__gamif {
    flex-direction: column;
    text-align: center;
  }
}

/* ===================================================================
   Espace client — Mes bons plans (codes promo achetés via coins)
   Backlog Emma retours 2026-05-26 (9e itération).
   Réf : mockups/coliope_espace_client_mes_bons_plans.html
   =================================================================== */
.cms-mybonplans { padding: 48px 0 80px; background: var(--site-background-color, #FAFAF8); }
.cms-mybonplans__inner {
  max-width: var(--site-container-max, 1100px);
  margin: 0 auto;
  padding: 40px;
  background: white;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(26, 45, 44, 0.06);
}

/* Topbar pattern aligné sur cms-favs (Backlog Emma 16e itération) :
   bouton retour à gauche + titre + count à droite. */
.cms-mybonplans__topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.cms-mybonplans__back {
  color: var(--site-primary-color, #0C9994);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cms-mybonplans__back:hover { opacity: 0.8; }
.cms-mybonplans__title {
  font-size: 24px;
  font-weight: 800;
  color: var(--site-text-color, #1A2D2C);
  margin: 0;
  letter-spacing: -0.01em;
}
.cms-mybonplans__count {
  margin-left: auto;
  font-size: 13px;
  color: var(--site-text-muted, #6B7280);
  background: var(--site-background-color, #F3F4F6);
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 600;
}

.cms-mybonplans__statrow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.cms-mybonplans__subtitle {
  font-size: 14px;
  color: var(--site-text-muted, #6E7C7B);
  margin: 0;
  max-width: 560px;
  line-height: 1.5;
}

.cms-mybonplans__balance {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: var(--site-primary-light, #F0FDFB);
  border: 1px solid var(--site-primary-soft, rgba(12, 153, 148, 0.10));
  border-radius: 999px;
}
.cms-mybonplans__balance-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--site-accent-color, #F99907);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.cms-mybonplans__balance-text { display: flex; flex-direction: column; }
.cms-mybonplans__balance-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--site-primary-dark, #087371);
  text-transform: uppercase;
}
.cms-mybonplans__balance-value {
  font-size: 18px;
  font-weight: 900;
  color: var(--site-text-color, #1A2D2C);
  line-height: 1;
  margin-top: 2px;
}
.cms-mybonplans__balance-link {
  font-size: 11px;
  color: var(--site-primary-color, #0C9994);
  text-decoration: none;
  font-weight: 600;
  margin-left: 12px;
}
.cms-mybonplans__balance-link:hover { text-decoration: underline; }

.cms-mybonplans__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.cms-mybonplans__section-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--site-text-color, #1A2D2C);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cms-mybonplans__badge-count {
  background: var(--site-primary-light, #F0FDFB);
  color: var(--site-primary-dark, #087371);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 800;
}

.cms-mybonplans__tabs {
  display: inline-flex;
  background: var(--site-background-color, #FAFAF8);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}
.cms-mybonplans__tab {
  border: none;
  background: transparent;
  padding: 7px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--site-text-muted, #6E7C7B);
  cursor: pointer;
  transition: all 0.15s ease;
}
.cms-mybonplans__tab.is-active {
  background: white;
  color: var(--site-text-color, #1A2D2C);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ─── Grid + cards ───────────────────────────── */
.cms-mybonplans__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

.cms-mybonplans__card {
  border: 1px solid var(--site-border-color, #E5EAEA);
  border-radius: 16px;
  padding: 20px;
  background: white;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.cms-mybonplans__card:hover {
  box-shadow: 0 1px 2px rgba(12, 153, 148, 0.04), 0 4px 12px rgba(26, 45, 44, 0.05);
  transform: translateY(-2px);
}
.cms-mybonplans__card.is-new {
  border-color: #10985A;
  background: linear-gradient(135deg, rgba(16, 152, 90, 0.06) 0%, rgba(255, 255, 255, 1) 100%);
  box-shadow: 0 0 0 2px rgba(16, 152, 90, 0.12);
}
.cms-mybonplans__card.is-expired {
  opacity: 0.62;
}

.cms-mybonplans__card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.cms-mybonplans__card-logo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--site-primary-light, #F0FDFB);
  color: var(--site-primary-dark, #087371);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  flex-shrink: 0;
  border: 2px solid var(--site-primary-soft, rgba(12, 153, 148, 0.10));
  object-fit: cover;
}
.cms-mybonplans__card-logo--img {
  background: white;
  padding: 4px;
}
.cms-mybonplans__card-partner { flex: 1; min-width: 0; }
.cms-mybonplans__card-partner-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--site-text-color, #1A2D2C);
}
.cms-mybonplans__card-partner-cat {
  font-size: 11px;
  color: var(--site-text-muted, #6E7C7B);
  margin-top: 2px;
  font-weight: 500;
}
.cms-mybonplans__card-badge {
  background: rgba(249, 153, 7, 0.10);
  color: #C77A00;
  font-size: 14px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 8px;
  flex-shrink: 0;
}
.cms-mybonplans__card-tag-new {
  display: inline-block;
  background: #10985A;
  color: white;
  font-size: 9px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-top: 4px;
}

.cms-mybonplans__card-offer-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--site-text-color, #1A2D2C);
  line-height: 1.35;
}
.cms-mybonplans__card-offer-desc {
  font-size: 12px;
  color: var(--site-text-muted, #6E7C7B);
  line-height: 1.5;
}

/* Code box - pièce centrale, code en clair */
.cms-mybonplans__code-box {
  border: 1.5px dashed var(--site-primary-color, #0C9994);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--site-primary-light, #F0FDFB);
}
.cms-mybonplans__code-box--expired {
  border-style: solid;
  border-color: var(--site-border-color, #E5EAEA);
  background: var(--site-background-color, #FAFAF8);
  color: var(--site-text-muted, #6E7C7B);
  font-size: 12px;
  font-weight: 600;
  justify-content: flex-start;
  gap: 6px;
}
.cms-mybonplans__code-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.cms-mybonplans__code-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--site-primary-dark, #087371);
  text-transform: uppercase;
  margin-bottom: 3px;
}
.cms-mybonplans__code-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 15px;
  font-weight: 800;
  color: var(--site-text-color, #1A2D2C);
  letter-spacing: 0.05em;
  word-break: break-all;
}
.cms-mybonplans__code-copy-btn {
  border: none;
  background: white;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: var(--site-primary-color, #0C9994);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.cms-mybonplans__code-copy-btn:hover {
  background: var(--site-primary-color, #0C9994);
  color: white;
}
.cms-mybonplans__code-copy-btn.is-copied {
  background: #10985A;
  color: white;
}

/* Sprint 1 bons plans (GAP 1) — Mode QR dans la card "Mes bons plans".
   Affiché quand partner.redemption_mode == 'qr_code'. Layout : QR à gauche,
   code court + CTA plein écran + expiration à droite. */
.cms-mybonplans__code-box--qr {
  padding: 14px;
  gap: 14px;
  align-items: stretch;
  background: linear-gradient(135deg, #FAFAF8 0%, var(--site-primary-light, #F0FDFB) 100%);
  border-style: solid;
  border-color: var(--site-primary-soft, rgba(12, 153, 148, 0.18));
}
.cms-mybonplans__qr {
  width: 110px;
  height: 110px;
  background: white;
  padding: 6px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cms-mybonplans__qr svg { width: 100%; height: 100%; display: block; }
.cms-mybonplans__qr--unavailable {
  color: var(--site-border-color, #E5EAEA);
  font-size: 40px;
}
.cms-mybonplans__qr-side {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
.cms-mybonplans__short-code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 16px;
  font-weight: 800;
  color: var(--site-text-color, #1A2D2C);
  letter-spacing: 0.16em;
}
.cms-mybonplans__qr-hint {
  font-size: 11px;
  color: var(--site-text-muted, #6E7C7B);
  font-weight: 600;
  line-height: 1.3;
}
.cms-mybonplans__fullscreen-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  background: var(--site-primary-color, #0C9994);
  color: white;
  border: none;
  padding: 7px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  text-decoration: none;
  margin-top: 4px;
}
.cms-mybonplans__fullscreen-btn:hover { background: var(--site-primary-dark, #087371); color: white; }
.cms-mybonplans__qr-expires {
  font-size: 10px;
  color: var(--site-text-muted, #6E7C7B);
  font-weight: 700;
}
.cms-mybonplans__qr-regen {
  background: transparent;
  border: none;
  color: var(--site-primary-dark, #087371);
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  font-size: 10px;
}

@media (max-width: 480px) {
  .cms-mybonplans__code-box--qr { flex-direction: column; }
  .cms-mybonplans__qr { width: 140px; height: 140px; margin: 0 auto; }
}

.cms-mybonplans__card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--site-border-color, #E5EAEA);
  font-size: 12px;
  color: var(--site-text-muted, #6E7C7B);
  gap: 12px;
}
.cms-mybonplans__card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cms-mybonplans__card-meta strong {
  color: var(--site-text-color, #1A2D2C);
  font-weight: 700;
}
.cms-mybonplans__card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--site-primary-color, #0C9994);
  color: white;
  border-radius: 999px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  transition: background 0.15s ease;
  white-space: nowrap;
}
.cms-mybonplans__card-cta:hover {
  background: var(--site-primary-dark, #087371);
}
.cms-mybonplans__card-cta i { font-size: 10px; }

/* Empty state */
.cms-mybonplans__empty {
  text-align: center;
  padding: 60px 40px;
  border: 2px dashed var(--site-border-color, #E5EAEA);
  border-radius: 20px;
  background: var(--site-background-color, #FAFAF8);
}
.cms-mybonplans__empty-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--site-primary-light, #F0FDFB);
  color: var(--site-primary-color, #0C9994);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}
.cms-mybonplans__empty-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--site-text-color, #1A2D2C);
  margin-bottom: 6px;
}
.cms-mybonplans__empty-text {
  font-size: 14px;
  color: var(--site-text-muted, #6E7C7B);
  max-width: 360px;
  margin: 0 auto 22px;
  line-height: 1.5;
}
.cms-mybonplans__empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  background: var(--site-primary-color, #0C9994);
  color: white;
  border-radius: 999px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}
.cms-mybonplans__empty-cta:hover {
  background: var(--site-primary-dark, #087371);
}

@media (max-width: 768px) {
  .cms-mybonplans__inner { padding: 24px; }
  .cms-mybonplans__header { flex-direction: column; align-items: flex-start; }
  .cms-mybonplans__grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   Modale d'achat de bon plan — Backlog Emma retours 2026-05-26 (9e itération).
   Réf : mockups/coliope_modale_achat_bon_plan.html
   =================================================================== */
.cms-reveal-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.cms-reveal-modal[hidden] { display: none; }

.cms-reveal-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(26, 45, 44, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}

.cms-reveal-modal__dialog {
  position: relative;
  background: white;
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
  max-width: 460px;
  width: 100%;
  padding: 28px;
  z-index: 2;
  font-family: var(--site-font-family, 'Nunito', sans-serif);
}

.cms-reveal-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--site-background-color, #FAFAF8);
  border: none;
  color: var(--site-text-muted, #6E7C7B);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.cms-reveal-modal__close:hover {
  background: var(--site-border-color, #E5EAEA);
  color: var(--site-text-color, #1A2D2C);
}

.cms-reveal-modal__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  margin-bottom: 18px;
}
.cms-reveal-modal__partner-logo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--site-primary-light, #F0FDFB);
  border: 3px solid var(--site-primary-soft, rgba(12, 153, 148, 0.10));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 900;
  color: var(--site-primary-dark, #087371);
  overflow: hidden;
}
.cms-reveal-modal__partner-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cms-reveal-modal__eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--site-accent-color, #F99907);
  text-transform: uppercase;
}
.cms-reveal-modal__title {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--site-text-color, #1A2D2C);
  letter-spacing: -0.01em;
  margin: 2px 0;
}
.cms-reveal-modal__partner-name {
  font-size: 13px;
  color: var(--site-text-muted, #6E7C7B);
  font-weight: 600;
}

.cms-reveal-modal__offer {
  background: rgba(249, 153, 7, 0.10);
  border: 1px solid rgba(249, 153, 7, 0.18);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.cms-reveal-modal__offer-highlight {
  font-size: 28px;
  font-weight: 900;
  color: #C77A00;
  line-height: 1;
  margin-bottom: 4px;
}
.cms-reveal-modal__offer-highlight:empty { display: none; }
.cms-reveal-modal__offer-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--site-text-color, #1A2D2C);
  margin-bottom: 2px;
}
.cms-reveal-modal__offer-desc {
  font-size: 12px;
  font-weight: 400;
  color: var(--site-text-muted, #6E7C7B);
  line-height: 1.45;
}

.cms-reveal-modal__balance {
  background: var(--site-primary-light, #F0FDFB);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.cms-reveal-modal__balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  padding: 4px 0;
}
.cms-reveal-modal__balance-row span:first-child {
  color: var(--site-text-muted, #6E7C7B);
  font-weight: 500;
}
.cms-reveal-modal__balance-row span:last-child {
  color: var(--site-text-color, #1A2D2C);
  font-weight: 800;
}
.cms-reveal-modal__balance-row--minus span:last-child { color: #C77A00; }
.cms-reveal-modal__balance-row--divider {
  border-top: 1px dashed rgba(12, 153, 148, 0.30);
  margin-top: 4px;
  padding-top: 8px;
}
.cms-reveal-modal__balance-row--divider span:first-child {
  color: var(--site-primary-dark, #087371);
  font-weight: 700;
}
.cms-reveal-modal__balance-row--divider span:last-child {
  color: var(--site-primary-dark, #087371);
  font-size: 16px;
  font-weight: 900;
}
.cms-reveal-modal__coin-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--site-accent-color, #F99907);
  margin-right: 6px;
  vertical-align: 0;
}

.cms-reveal-modal__info {
  display: flex;
  gap: 10px;
  background: var(--site-background-color, #FAFAF8);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--site-text-muted, #6E7C7B);
  line-height: 1.45;
  margin-bottom: 22px;
}
.cms-reveal-modal__info svg {
  color: var(--site-primary-color, #0C9994);
  flex-shrink: 0;
  margin-top: 2px;
}
.cms-reveal-modal__info strong { color: var(--site-text-color, #1A2D2C); font-weight: 700; }

.cms-reveal-modal__actions {
  display: flex;
  gap: 10px;
  margin: 0;
}
.cms-reveal-modal__btn {
  flex: 1;
  padding: 14px 18px;
  border-radius: 999px;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s ease, color 0.15s ease;
  /* Retour Jérôme 2026-05-27 — le bouton "Confirmer · 100 coins" cassait
     en 3 lignes mal alignées quand le flex contraignait sa largeur. On force
     le texte sur 1 ligne (la modale a max-width 460px → assez de place). */
  white-space: nowrap;
}
/* Le `<span>` interne (coins value) ne doit pas créer de wrap intermédiaire. */
.cms-reveal-modal__btn > span {
  white-space: nowrap;
}
.cms-reveal-modal__btn--secondary {
  background: white;
  color: var(--site-text-muted, #6E7C7B);
  border: 1.5px solid var(--site-border-color, #E5EAEA);
}
.cms-reveal-modal__btn--secondary:hover {
  background: var(--site-background-color, #FAFAF8);
  color: var(--site-text-color, #1A2D2C);
}
.cms-reveal-modal__btn--primary {
  background: var(--site-primary-color, #0C9994);
  color: white;
}
.cms-reveal-modal__btn--primary:hover {
  background: var(--site-primary-dark, #087371);
}

@media (max-width: 480px) {
  .cms-reveal-modal__dialog { padding: 20px; }
  .cms-reveal-modal__actions { flex-direction: column; }
}

/* ─── Petits additifs partial carousel : nouveau state "code activé" ─── */
.cms-cta--partner-offers-carousel .cms-cta__offer-code--unlocked {
  background: rgba(16, 152, 90, 0.08);
  border: 1px dashed rgba(16, 152, 90, 0.30);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.cms-cta--partner-offers-carousel .cms-cta__offer-code-label--success {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #10985A;
  text-transform: uppercase;
}
.cms-cta--partner-offers-carousel .cms-cta__offer-code-link {
  font-size: 12px;
  color: var(--site-primary-color, #0C9994);
  text-decoration: none;
  font-weight: 700;
}
.cms-cta--partner-offers-carousel .cms-cta__offer-code-link:hover { text-decoration: underline; }

/* Bouton "Voir mon code" (état 1 = déjà acheté, lien vers mes-bons-plans) */
.cms-cta--partner-offers-carousel .cms-cta__offer-btn--unlocked {
  background: white;
  color: #10985A;
  border: 1.5px solid #10985A;
}
.cms-cta--partner-offers-carousel .cms-cta__offer-btn--unlocked:hover {
  background: rgba(16, 152, 90, 0.08);
  color: #10985A;
}
.cms-cta--partner-offers-carousel .cms-cta__offer-btn--unlocked svg {
  stroke: currentColor;
  flex-shrink: 0;
}

/* ===================================================================
   Page "Email envoyé, vérifie ta boîte" — Backlog Emma retours 2026-05-26 (13e).
   Affichée juste après customer_register (plus de connexion auto).
   =================================================================== */
.cms-section.cms-confirmation-sent {
  padding: 80px 0;
  background: var(--site-background-color, #FAFAF8);
  min-height: 60vh;
  display: flex;
  align-items: center;
}
.cms-confirmation-sent__inner {
  max-width: 520px;
  margin: 0 auto;
  background: white;
  border-radius: 20px;
  padding: 48px 40px;
  text-align: center;
  box-shadow: 0 12px 32px rgba(26, 45, 44, 0.08);
}
.cms-confirmation-sent__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--site-primary-light, #F0FDFB);
  color: var(--site-primary-color, #0C9994);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}
.cms-confirmation-sent__title {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--site-text-color, #1A2D2C);
  margin: 0 0 8px;
}
.cms-confirmation-sent__lead {
  font-size: 15px;
  color: var(--site-text-color, #1A2D2C);
  line-height: 1.55;
  margin: 0 0 8px;
}
.cms-confirmation-sent__lead strong {
  color: var(--site-primary-dark, #087371);
  font-weight: 800;
}
.cms-confirmation-sent__sub {
  font-size: 13px;
  color: var(--site-text-muted, #6E7C7B);
  line-height: 1.55;
  margin: 0 0 24px;
}
.cms-confirmation-sent__alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
  margin: 0 0 16px;
}
.cms-confirmation-sent__alert--success {
  background: rgba(16, 152, 90, 0.10);
  color: #10985A;
  border: 1px solid rgba(16, 152, 90, 0.20);
}
.cms-confirmation-sent__alert--error {
  background: rgba(184, 28, 28, 0.08);
  color: #B81C1C;
  border: 1px solid rgba(184, 28, 28, 0.20);
}
.cms-confirmation-sent__resend {
  margin: 28px 0 20px;
  padding: 20px;
  background: var(--site-background-color, #FAFAF8);
  border-radius: 12px;
}
.cms-confirmation-sent__resend-text {
  font-size: 13px;
  color: var(--site-text-muted, #6E7C7B);
  margin: 0 0 12px;
}
.cms-confirmation-sent__resend-form { margin: 0; }
.cms-confirmation-sent__resend-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: white;
  color: var(--site-primary-color, #0C9994);
  border: 1.5px solid var(--site-primary-color, #0C9994);
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cms-confirmation-sent__resend-btn:hover {
  background: var(--site-primary-color, #0C9994);
  color: white;
}
.cms-confirmation-sent__back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--site-text-muted, #6E7C7B);
  text-decoration: none;
  font-weight: 600;
}
.cms-confirmation-sent__back-link:hover {
  color: var(--site-primary-color, #0C9994);
}

/* Lien "Devenir partenaire" sous le form d'inscription */
.cms-customer-account__partner-link {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--site-border-color, #E5EAEA);
  font-size: 12px;
  color: var(--site-text-muted, #6E7C7B);
  text-align: center;
  line-height: 1.55;
}
.cms-customer-account__partner-link a {
  color: var(--site-primary-color, #0C9994);
  text-decoration: none;
  font-weight: 700;
}
.cms-customer-account__partner-link a:hover {
  text-decoration: underline;
}

/* ===================================================================
   Toggle Pro inline + SIRET autocomplete — Backlog Emma retours 2026-05-26 (14e).
   Affiché dans le form customer_register (customer_account.html.erb).
   =================================================================== */
.cms-customer-account__pro-toggle {
  margin: 18px 0 14px;
  padding: 16px;
  background: var(--site-background-color, #FAFAF8);
  border: 1px solid var(--site-border-color, #E5EAEA);
  border-radius: 12px;
}
.cms-customer-account__pro-checkbox-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--site-text-color, #1A2D2C);
}
.cms-customer-account__pro-checkbox {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--site-primary-color, #0C9994);
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.cms-customer-account__pro-checkbox-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Backlog Emma retours 2026-05-27 — neutralise un éventuel text-transform
     uppercase hérité d'un parent (forms customer_account ont déjà des
     `<label class="cms-customer-account__label">` en majuscules). */
  text-transform: none;
  letter-spacing: normal;
}
.cms-customer-account__pro-checkbox-text strong {
  font-weight: 800;
  color: var(--site-text-color, #1A2D2C);
  text-transform: none;
  letter-spacing: normal;
}
.cms-customer-account__pro-checkbox-help {
  font-size: 12px;
  color: var(--site-text-muted, #6E7C7B);
  font-weight: 400;
}
.cms-customer-account__pro-fields {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--site-border-color, #E5EAEA);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cms-customer-account__pro-fields[hidden] { display: none; }

/* SIRET autocomplete dropdown */
.cms-siret-ac__results {
  margin-top: 6px;
  background: white;
  border: 1px solid var(--site-border-color, #E5EAEA);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  max-height: 280px;
  overflow-y: auto;
  z-index: 20;
}
.cms-siret-ac__results[hidden] { display: none; }
.cms-siret-ac__item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--site-border-color, #E5EAEA);
  font-family: inherit;
  transition: background 0.12s ease;
}
.cms-siret-ac__item:last-child { border-bottom: none; }
.cms-siret-ac__item:hover,
.cms-siret-ac__item:focus { background: var(--site-primary-light, #F0FDFB); outline: none; }
.cms-siret-ac__item-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--site-text-color, #1A2D2C);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cms-siret-ac__inactive-badge {
  background: rgba(184, 28, 28, 0.12);
  color: #B81C1C;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cms-siret-ac__item-meta {
  font-size: 11px;
  color: var(--site-text-muted, #6E7C7B);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cms-siret-ac__item-siret {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--site-primary-dark, #087371);
  font-weight: 700;
}
.cms-siret-ac__item-sep { color: var(--site-border-color, #E5EAEA); }
.cms-siret-ac__empty {
  padding: 14px;
  font-size: 13px;
  color: var(--site-text-muted, #6E7C7B);
  text-align: center;
}

/* ===================================================================
   Partner signup form — additions Backlog Emma retours 2026-05-27 :
     - Password eye (Stimulus password-toggle)
     - Redemption mode (radio QR / written_code)
     - Textarea offer description
   =================================================================== */
.partner-form__password-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}
.partner-form__password-input {
  flex: 1;
  padding-right: 42px !important;
}
.partner-form__password-eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 10px;
  color: var(--site-text-muted, #6E7C7B);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.12s ease, color 0.12s ease;
}
.partner-form__password-eye:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--site-primary-color, #0C9994);
}

.partner-form__redemption-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 6px;
}
.partner-form__redemption-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1.5px solid var(--site-border-color, #E5EAEA);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  background: white;
  /* Retour Jérôme 2026-05-27 — neutraliser le text-transform: uppercase hérité de
     `.partner-form__row label` (cf. ligne 21113). Sans ça, "QR code Coliope" et
     "Code promo écrit" sortent en MAJUSCULES dans les radio cards. */
  text-transform: none;
  letter-spacing: normal;
}
.partner-form__redemption-option:hover {
  border-color: var(--partner-accent, #F99907);
  background: rgba(249, 153, 7, 0.04);
}
.partner-form__redemption-option:has(input[type="radio"]:checked) {
  border-color: var(--partner-accent, #F99907);
  background: rgba(249, 153, 7, 0.08);
}
.partner-form__redemption-option input[type="radio"] {
  margin-top: 4px;
  accent-color: var(--partner-accent, #F99907);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.partner-form__redemption-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(249, 153, 7, 0.10);
  color: var(--partner-accent, #C77A00);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.partner-form__redemption-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.partner-form__redemption-body strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--site-text-color, #1A2D2C);
  text-transform: none;
  letter-spacing: normal;
}
.partner-form__redemption-body small {
  font-size: 12px;
  color: var(--site-text-muted, #6E7C7B);
  line-height: 1.4;
  text-transform: none;
  letter-spacing: normal;
}

/* Textarea offer description */
.partner-form__row textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--site-border-color, #E5EAEA);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  color: var(--site-text-color, #1A2D2C);
  resize: vertical;
  min-height: 80px;
  font-weight: 400;
  line-height: 1.5;
}
.partner-form__row textarea:focus {
  outline: none;
  border-color: var(--partner-accent, #F99907);
  box-shadow: 0 0 0 3px rgba(249, 153, 7, 0.15);
}

@media (max-width: 640px) {
  .partner-form__redemption-modes { grid-template-columns: 1fr; }
}

/* =============================================
   STRIPE EMBEDDED ONBOARDING white-label (2026-06-11)
   Onboarding Stripe Connect embarqué dans coliope.fr (branding Coliope).
   Mockup validé : mockups/coliope_stripe_embedded_onboarding.html.
   Tokens --site-* (thématisable), zéro hex marque hors Stripe purple.
   ============================================= */
.cms-section.cms-stripe-embed {
  padding: 48px 0 80px;
  background: color-mix(in srgb, var(--site-primary-color, #199894) 4%, white);
  min-height: 70vh;
}
.cms-stripe-embed__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}
.cms-stripe-embed__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: var(--site-font-weight-semibold, 700);
  color: var(--site-primary-color, #199894);
  text-decoration: none;
  margin-bottom: 20px;
}
.cms-stripe-embed__back:hover { text-decoration: underline; }

.cms-stripe-embed__head { margin-bottom: 24px; }
.cms-stripe-embed__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in srgb, var(--site-primary-color, #199894) 12%, white);
  color: var(--site-primary-dark, var(--site-primary-color));
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: var(--site-font-weight-brand, 800);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.cms-stripe-embed__title {
  font-size: 30px;
  font-weight: var(--site-font-weight-black, 900);
  color: var(--site-text-color, #1A2D2C);
  margin-bottom: 8px;
}
.cms-stripe-embed__subtitle {
  font-size: 16px;
  color: var(--site-text-muted, #4a5d5c);
  max-width: 560px;
}

/* Bandeau réassurance */
.cms-stripe-embed__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  background: var(--site-background, #fff);
  border: 1px solid var(--site-border, rgba(26, 45, 44, 0.10));
  border-radius: var(--site-radius-card, 16px);
  padding: 16px 20px;
  margin-bottom: 24px;
}
.cms-stripe-embed__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--site-text-muted, #4a5d5c);
  font-weight: var(--site-font-weight-semibold, 600);
}
.cms-stripe-embed__trust-item i { color: var(--site-primary-color, #199894); font-size: 16px; }

/* Carte contenant le composant embarqué */
.cms-stripe-embed__card {
  background: var(--site-background, #fff);
  border: 1px solid var(--site-border, rgba(26, 45, 44, 0.10));
  border-radius: var(--site-radius-card, 16px);
  box-shadow: var(--site-shadow-md, 0 8px 28px rgba(14, 111, 108, 0.10));
  overflow: hidden;
}
.cms-stripe-embed__card-header {
  padding: 20px 28px;
  border-bottom: 1px solid var(--site-border, rgba(26, 45, 44, 0.10));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--site-primary-color, #199894) 4%, transparent),
    transparent);
}
.cms-stripe-embed__card-header-left { display: flex; align-items: center; gap: 12px; }
.cms-stripe-embed__card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--site-primary-color, #199894) 12%, white);
  color: var(--site-primary-dark, var(--site-primary-color));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.cms-stripe-embed__card-title { font-size: 16px; font-weight: var(--site-font-weight-brand, 700); }
.cms-stripe-embed__card-sub { font-size: 13px; color: var(--site-text-muted, #4a5d5c); }
.cms-stripe-embed__secured {
  font-size: 12px;
  color: var(--site-text-muted, #4a5d5c);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.cms-stripe-embed__secured i { color: var(--site-primary-color, #199894); }

/* Loader + erreur + point de montage */
.cms-stripe-embed__loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 56px 28px;
  color: var(--site-text-muted, #4a5d5c);
  font-size: 14px;
}
.cms-stripe-embed__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid color-mix(in srgb, var(--site-primary-color, #199894) 20%, transparent);
  border-top-color: var(--site-primary-color, #199894);
  border-radius: 50%;
  animation: cms-stripe-embed-spin 0.8s linear infinite;
}
@keyframes cms-stripe-embed-spin { to { transform: rotate(360deg); } }

.cms-stripe-embed__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 28px;
  text-align: center;
  color: #b91c1c;
  font-size: 14px;
}
.cms-stripe-embed__error i { font-size: 28px; }
.cms-stripe-embed__error-link {
  color: var(--site-primary-color, #199894);
  font-weight: var(--site-font-weight-semibold, 700);
  text-decoration: none;
}
.cms-stripe-embed__error-link:hover { text-decoration: underline; }

.cms-stripe-embed__mount { padding: 8px 20px 20px; }
.cms-stripe-embed__mount:empty { padding: 0; }

.cms-stripe-embed__powered {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 20px;
  font-size: 12px;
  color: var(--site-text-muted, #9ca3af);
  border-top: 1px solid var(--site-border, rgba(26, 45, 44, 0.10));
  text-align: center;
}
.cms-stripe-embed__powered strong { color: #635BFF; font-weight: 700; }

@media (max-width: 640px) {
  .cms-stripe-embed__card-header { flex-direction: column; align-items: flex-start; }
  .cms-stripe-embed__title { font-size: 25px; }
}

/* Mention CGU comptes connectés Stripe (Phase 1 bis 2026-06-12) */
.cms-stripe-embed__tos {
  margin-top: 14px;
  text-align: center;
  font-size: 12px;
  color: var(--site-text-muted, #9ca3af);
}
.cms-stripe-embed__tos a {
  color: var(--site-primary-color, #199894);
  text-decoration: underline;
}

/* Note de réassurance particuliers — onboarding Stripe (2026-06-12) */
.cms-stripe-embed__note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: color-mix(in srgb, var(--site-primary-color, #199894) 7%, white);
  border: 1px solid color-mix(in srgb, var(--site-primary-color, #199894) 20%, transparent);
  border-radius: var(--site-radius-card, 12px);
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--site-text-color, #1A2D2C);
}
.cms-stripe-embed__note i {
  color: var(--site-primary-color, #199894);
  font-size: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}

/* Mention procédurale astérisquée — onboarding Stripe (2026-06-12) */
.cms-stripe-embed__footnote {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--site-text-muted, #9ca3af);
  text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────
   Backlog Emma (gaps) — Autocomplete villes Google Places (.pac-container)
   « menu ville charte FTW » : le dropdown Google s'affichait avec son
   style brut (bord carré, police système, pas d'arrondi). On le ré-aligne
   sur la charte Coliope (arrondi, ombre douce, survol teal). Le widget est
   injecté dans <body> par Google → sélecteurs NON scopés (volontaire).
   ───────────────────────────────────────────────────────────────────── */
.pac-container {
  border-radius: 12px;
  border: 1px solid var(--site-primary-soft, rgba(12, 153, 148, 0.18));
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  margin-top: 6px;
  padding: 6px;
  font-family: var(--site-font-family, inherit);
  background: var(--site-background, #fff);
  overflow: hidden;
}
.pac-container::after { display: none !important; } /* retire le logo « powered by Google » redondant */
.pac-item {
  border: none;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  color: var(--site-text-color, #1f2937);
  cursor: pointer;
  line-height: 1.3;
}
.pac-item:hover,
.pac-item-selected,
.pac-item.pac-item-selected {
  background: var(--site-primary-light, #e7f7f5);
}
.pac-item-query {
  font-size: 14px;
  color: var(--site-text-color, #1f2937);
  font-weight: var(--site-font-weight-semibold, 600);
}
.pac-matched { color: var(--site-primary-color, #0c9994); font-weight: 700; }
.pac-icon { display: none; } /* retire l'icône épingle grise Google, plus propre */