/* ═══════════════════════════════════════════════════════════════
   Diamond Services HOME — sections de la page d'accueil
   ═══════════════════════════════════════════════════════════════ */

/* ─── Logo (header) ─── */
.rr-logo { display:flex; align-items:center; gap:12px; }
.rr-logo-text { display:flex; flex-direction:column; align-items:flex-start; line-height:1; }

/* ─── Logo Showcase (au-dessus de l'écosystème) — 6-8 cm ─── */
.rr-logo-showcase {
    text-align: center;
    margin: 0 auto 36px;
    max-width: 240px;
}
.rr-logo-big {
    width: 240px !important;
    height: 240px !important;
    max-width: 240px !important;
    display: block;
    margin: 0 auto;
    border-radius: 16px;
    box-shadow: 0 14px 40px rgba(20,30,42,.18);
    transition: transform .4s ease;
    object-fit: cover;
}
.rr-logo-big:hover { transform: scale(1.03) rotate(-1deg); }
@media (max-width:768px) {
    .rr-logo-showcase { max-width: 180px; }
    .rr-logo-big { width: 180px !important; height: 180px !important; max-width: 180px !important; }
}
.rr-logo-text .rr-logo-r { font-family:var(--rr-font-heading); font-size:22px; font-weight:900; color:var(--rr-gold); letter-spacing:.5px; }
.rr-logo-text .rr-logo-o { font-family:var(--rr-font-heading); font-size:22px; font-weight:400; font-style:italic; color:var(--rr-charcoal); }
.rr-logo-tagline { font-size:9px; letter-spacing:2.5px; text-transform:uppercase; color:var(--rr-gold); margin-top:3px; font-style:italic; font-family:var(--rr-font-heading); font-weight:400; }
.rr-logo-text .rr-logo-r, .rr-logo-text .rr-logo-o { display:inline; }

/* ─── HERO SLIDER ─── */
.rr-hero-slider { position:relative; height:680px; overflow:hidden; background:var(--rr-charcoal); }
.rr-slider { position:relative; width:100%; height:100%; }
.rr-slide {
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    opacity:0; transition:opacity 1.2s ease;
    display:flex; align-items:center;
}
.rr-slide.active { opacity:1; }
.rr-slide-overlay {
    position:absolute; inset:0;
    background:linear-gradient(110deg, rgba(20,56,66,.85) 0%, rgba(24,30,42,.6) 50%, rgba(20,56,66,.4) 100%);
}
.rr-slide-content {
    position:relative; z-index:2; color:#fff;
    max-width:700px;
}
.rr-slide-tag {
    display:inline-block;
    padding:6px 16px;
    background:var(--rr-gold);
    color:#fff;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:2px;
    border-radius:3px;
    margin-bottom:18px;
    font-weight:700;
}
.rr-slide-content h1 {
    color:#fff;
    font-size:64px;
    line-height:1.1;
    margin-bottom:16px;
    font-weight:900;
}
.rr-slide-content h1 em { color:var(--rr-gold-light); font-style:italic; font-weight:400; }
.rr-slide-content p { font-size:20px; opacity:.92; margin-bottom:28px; max-width:560px; }
.rr-slide-cta { display:flex; gap:12px; flex-wrap:wrap; }
.rr-btn-outline-light { background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.rr-btn-outline-light:hover { background:#fff; color:var(--rr-charcoal) !important; border-color:#fff; }
.rr-btn-lg { padding:16px 32px; font-size:16px; }

.rr-slider-nav {
    position:absolute; top:50%; transform:translateY(-50%);
    width:48px; height:48px;
    border-radius:50%;
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(8px);
    border:1.5px solid rgba(255,255,255,.3);
    color:#fff;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size:24px;
    transition:all .2s;
    z-index:5;
}
.rr-slider-nav:hover { background:var(--rr-gold); border-color:var(--rr-gold); transform:translateY(-50%) scale(1.1); }
.rr-prev { left:28px; }
.rr-next { right:28px; }

.rr-slider-dots {
    position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
    display:flex; gap:8px; z-index:5;
}
.rr-slider-dots button {
    width:36px; height:4px;
    background:rgba(255,255,255,.3);
    border:none; border-radius:2px;
    cursor:pointer;
    transition:all .25s;
    padding:0;
}
.rr-slider-dots button.active { background:var(--rr-gold); width:60px; }

/* ─── STATS BAR ─── */
.rr-stats-bar {
    background:linear-gradient(180deg, var(--rr-charcoal), var(--rr-teal-dark));
    color:#fff;
    padding:32px 0;
}
.rr-stats-grid {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:30px;
    text-align:center;
}
.rr-stat strong {
    display:block;
    font-family:var(--rr-font-heading);
    font-size:36px;
    color:var(--rr-gold-light);
    line-height:1;
    margin-bottom:6px;
}
.rr-stat span {
    font-size:13px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:rgba(255,255,255,.7);
}

/* ─── SECTIONS génériques ─── */
.rr-section { padding:80px 0; }
.rr-section-header { text-align:center; max-width:680px; margin:0 auto 50px; }
.rr-section-header-inline { display:flex; justify-content:space-between; align-items:flex-end; text-align:left; max-width:none; margin-bottom:36px; gap:16px; flex-wrap:wrap; }
.rr-section-overline {
    display:inline-block;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:3px;
    color:var(--rr-gold);
    margin-bottom:12px;
    font-weight:600;
}
.rr-section-title { font-size:42px; line-height:1.1; margin-bottom:14px; }
.rr-section-title em { color:var(--rr-gold); font-style:italic; font-weight:400; }
.rr-section-title-light { color:#fff; }
.rr-section-title-light em { color:var(--rr-gold-light); }
.rr-section-sub { font-size:17px; color:var(--rr-muted); line-height:1.6; }
.rr-link-arrow { display:inline-flex; align-items:center; gap:5px; color:var(--rr-gold); font-weight:600; margin-top:12px; }
.rr-link-arrow:hover { gap:10px; }

/* ─── ÉCOSYSTÈME ─── */
.rr-section-ecosystem { padding:80px 0 60px; }
.rr-ecosystem-grid {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:22px;
}
.rr-eco-card {
    background:#fff;
    border:1px solid var(--rr-border-l);
    border-radius:12px;
    padding:32px 26px;
    transition:all .25s;
    text-align:left;
}
.rr-eco-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,.08); border-color:transparent; }
.rr-eco-icon {
    width:60px; height:60px;
    border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    font-size:30px;
    color:#fff;
    margin-bottom:18px;
}
.rr-eco-card h3 { font-size:20px; margin-bottom:8px; }
.rr-eco-card p { color:var(--rr-muted); font-size:14px; line-height:1.6; margin-bottom:14px; }

/* ─── CATÉGORIES (cards picto + image) — version agrandie fond blanc ─── */
.rr-cats-pictos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.rr-cat-picto-card {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #fff;
    border: 1.5px solid var(--rr-border-l);
    border-radius: 14px;
    padding: 20px 22px;
    text-decoration: none;
    color: var(--rr-text);
    transition: all .25s;
    position: relative;
    overflow: hidden;
}
.rr-cat-picto-card:hover {
    border-color: var(--rr-gold);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(187,127,77,.2);
}
.rr-cat-picto-icon {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1.5px solid var(--rr-border-l);
    border-radius: 14px;
    overflow: hidden;
    transition: transform .25s;
}
.rr-cat-picto-card:hover .rr-cat-picto-icon {
    transform: scale(1.06) rotate(-3deg);
    border-color: var(--rr-gold-light);
}
.rr-cat-picto-icon img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 6px;
    /* Assure que le fond reste blanc même si l'image a un fond légèrement teinté */
    background: #fff;
}
.rr-cat-picto-icon iconify-icon { font-size: 50px; color: var(--rr-gold); }
.rr-cat-picto-body { flex: 1; min-width: 0; }
.rr-cat-picto-body h3 {
    margin: 0 0 4px;
    font-size: 19px;
    line-height: 1.2;
    font-family: var(--rr-font-heading);
    font-weight: 700;
    color: var(--rr-charcoal);
}
.rr-cat-picto-body span {
    font-size: 13px;
    color: var(--rr-muted);
    letter-spacing: .3px;
}
.rr-cat-picto-arrow {
    color: var(--rr-gold);
    font-size: 24px;
    opacity: 0;
    transform: translateX(-8px);
    transition: all .25s;
}
.rr-cat-picto-card:hover .rr-cat-picto-arrow {
    opacity: 1;
    transform: translateX(0);
}
@media (max-width: 768px) {
    .rr-cats-pictos-grid { grid-template-columns: 1fr; }
    .rr-cat-picto-icon { width: 80px; height: 80px; }
}

/* ─── APP MOBILE ─── */
.rr-section-app {
    background:linear-gradient(135deg, var(--rr-charcoal) 0%, var(--rr-teal-dark) 100%);
    color:#fff;
    padding:90px 0;
}
.rr-app-layout {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}
.rr-app-content { color:rgba(255,255,255,.9); }
.rr-app-content p { font-size:17px; opacity:.85; }
.rr-app-features { list-style:none; padding:0; margin:24px 0 30px; }
.rr-app-features li { padding:8px 0; display:flex; align-items:center; gap:10px; font-size:15px; }
.rr-app-features iconify-icon { color:var(--rr-gold-light); font-size:22px; }
.rr-app-stores { display:flex; gap:12px; flex-wrap:wrap; }
.rr-store-btn {
    display:inline-flex; align-items:center; gap:12px;
    padding:12px 22px;
    background:#000;
    color:#fff;
    border:1.5px solid rgba(255,255,255,.2);
    border-radius:10px;
    text-decoration:none;
    transition:all .2s;
}
.rr-store-btn:hover { background:var(--rr-gold); border-color:var(--rr-gold); color:#fff !important; transform:translateY(-2px); }
.rr-store-btn iconify-icon { font-size:30px; }
.rr-store-btn span { display:flex; flex-direction:column; line-height:1.1; font-weight:600; }
.rr-store-btn small { font-size:10px; opacity:.7; font-weight:400; letter-spacing:.5px; }

.rr-app-actions { margin: 0 0 22px; }
.rr-app-video-btn { display:inline-flex; align-items:center; gap:8px; }
.rr-app-video-btn iconify-icon { font-size:22px; }

.rr-app-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.rr-app-iphone {
    width: 100%;
    max-width: 380px;
    height: auto;
    display: block;
    /* PNG détourée avec transparence — pas besoin de mix-blend-mode */
    filter: drop-shadow(0 25px 60px rgba(0,0,0,.6));
    transition: transform .3s;
}
.rr-app-iphone:hover { transform: scale(1.02); }
.rr-app-visual {
    position: relative;
    isolation: isolate;
    /* Halo subtil derrière */
}
.rr-app-visual::after {
    content: '';
    position: absolute;
    top: 10%; left: 10%; right: 10%; bottom: 5%;
    background: radial-gradient(ellipse at center, rgba(187,127,77,.15) 0%, transparent 65%);
    z-index: -1;
    filter: blur(40px);
}

.rr-app-floating-badge {
    position: absolute;
    bottom: 30px; right: 0;
    background: var(--rr-gold);
    color: #fff;
    padding: 10px 16px;
    border-radius: 25px;
    display: flex; align-items: center; gap: 8px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 22px rgba(187,127,77,.4);
    animation: rrFloat 2.5s ease-in-out infinite;
    pointer-events: none;
}
.rr-app-floating-badge iconify-icon { font-size:18px; }
@keyframes rrFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* ─── Modale vidéo ─── */
.rr-video-modal {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.92);
    backdrop-filter: blur(8px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.rr-video-modal.open { display: flex; }
.rr-video-modal-inner {
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,.6);
    background: #000;
}
.rr-video-modal-inner video {
    width: 100%;
    height: auto;
    max-height: 90vh;
    display: block;
}
.rr-video-modal-close {
    position: absolute;
    top: 20px; right: 24px;
    width: 48px; height: 48px;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(6px);
    border: 1.5px solid rgba(255,255,255,.3);
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .2s;
}
.rr-video-modal-close:hover { background: var(--rr-red); border-color: var(--rr-red); transform: rotate(90deg); }

/* ─── ANNONCES VEDETTES ─── */
.rr-product-card { position:relative; }
.rr-product-img { position:relative; }
.rr-product-badge {
    position:absolute; top:10px; left:10px;
    background:var(--rr-gold);
    color:#fff;
    padding:4px 10px;
    border-radius:11px;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:1px;
    font-weight:700;
    z-index:2;
}
.rr-product-meta { display:flex; gap:14px; font-size:12px; color:var(--rr-muted); margin:6px 0 10px; }
.rr-product-meta span { display:flex; align-items:center; gap:4px; }

/* ─── TÉMOIGNAGES ─── */
.rr-testimonials-grid {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
}
.rr-testimonial {
    background:#fff;
    padding:32px 28px;
    border-radius:10px;
    border:1px solid var(--rr-border-l);
}
.rr-stars { color:var(--rr-gold); font-size:18px; letter-spacing:2px; margin-bottom:14px; }
.rr-testimonial p {
    font-family:var(--rr-font-heading);
    font-style:italic;
    font-size:18px;
    line-height:1.5;
    color:var(--rr-charcoal);
    margin-bottom:22px;
}
.rr-testimonial-author { font-size:13px; color:var(--rr-muted); }
.rr-testimonial-author strong { display:block; color:var(--rr-charcoal); font-style:normal; margin-bottom:2px; }

/* ─── RÉASSURANCE ─── */
.rr-reassurance { background:var(--rr-cream-2); padding:36px 0; border-top:1px solid var(--rr-border); border-bottom:1px solid var(--rr-border); }
.rr-reassurance-grid {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:24px;
}
.rr-reassurance-item {
    display:flex; align-items:center; gap:14px;
}
.rr-reassurance-item iconify-icon {
    font-size:36px; color:var(--rr-gold);
    flex-shrink:0;
}
.rr-reassurance-item strong { display:block; color:var(--rr-charcoal); font-size:14px; margin-bottom:2px; }
.rr-reassurance-item span { font-size:12px; color:var(--rr-muted); }

/* ─── CTA FINAL ─── */
.rr-cta-final {
    background:linear-gradient(135deg, var(--rr-charcoal), var(--rr-teal-dark) 60%, var(--rr-teal));
    color:#fff;
    padding:90px 0;
    text-align:center;
}
.rr-cta-inner h2 { color:#fff; font-size:44px; margin-bottom:14px; }
.rr-cta-inner h2 em { color:var(--rr-gold-light); }
.rr-cta-inner p { font-size:18px; opacity:.85; margin-bottom:32px; }
.rr-cta-buttons { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ─── Responsive ─── */
@media (max-width: 1024px) {
    .rr-ecosystem-grid { grid-template-columns:1fr 1fr; }
    .rr-categories-grid { grid-template-columns:1fr 1fr; }
    .rr-testimonials-grid { grid-template-columns:1fr; }
    .rr-reassurance-grid { grid-template-columns:1fr 1fr; }
    .rr-app-layout { grid-template-columns:1fr; }
    .rr-stats-grid { grid-template-columns:1fr 1fr; gap:24px; }
}
@media (max-width: 768px) {
    .rr-hero-slider { height:560px; }
    .rr-slide-content h1 { font-size:38px; }
    .rr-slide-content p { font-size:16px; }
    .rr-section { padding:50px 0; }
    .rr-section-title { font-size:30px; }
    .rr-section-header-inline { flex-direction:column; align-items:flex-start; }
    .rr-ecosystem-grid { grid-template-columns:1fr; }
    .rr-categories-grid { grid-template-columns:1fr; }
    .rr-reassurance-grid { grid-template-columns:1fr; }
    .rr-prev { left:10px; } .rr-next { right:10px; }
    .rr-logo-text .rr-logo-r, .rr-logo-text .rr-logo-o { font-size:18px; }
    .rr-logo-tagline { display:none; }
}

/* ═══════════════════════════════════════════════════════════════
   HOME PILOTÉE PAR LE PAGE BUILDER
   Quand l'accueil vient du builder (hook displayHome), renderHook()
   enveloppe chaque section dans .pb-row > .pb-row-cols > .pb-col >
   .pb-block. Ces wrappers (max-width, paddings, marges) casseraient
   les sections plein écran (hero, stats, app, CTA…).
   On les neutralise UNIQUEMENT sur les rows marquées .rr-home-section
   (posées par l'installeur du profil de base), pour un rendu identique
   au template codé en dur. Les sections gardent leur propre .rr-container.
   ═══════════════════════════════════════════════════════════════ */
.rr-home main.rr-main .pb-row.rr-home-section { padding: 0; margin: 0; }
.rr-home main.rr-main .pb-row.rr-home-section > .pb-row-cols {
    max-width: none; margin: 0; padding: 0; gap: 0;
}
.rr-home main.rr-main .pb-row.rr-home-section > .pb-row-cols > .pb-col {
    flex: 0 0 100%; max-width: 100%; padding: 0;
}
.rr-home main.rr-main .pb-row.rr-home-section .pb-block { margin: 0; }
.rr-home main.rr-main .pb-row.rr-home-section .ap-raw-html { display: block; }