/*======================================================*/
/*  Galerie "Nos réalisations" — siteinternet.php        */
/*  Cartes navigateur : le site défile au survol,        */
/*  inclinaison 3D + reflet qui suit la souris.          */
/*======================================================*/
.rz {
   position: relative;
   overflow: hidden;
   isolation: isolate;
   padding: 100px 22px 110px;
   background: linear-gradient(135deg, #ff9800 0%, #ff5722 55%, #e91e63 100%);
}

/* Grandes taches de couleur qui dérivent lentement */
.rz-blobs { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.rz-blobs span {
   position: absolute;
   border-radius: 50%;
   filter: blur(70px);
   opacity: .55;
   animation: rz-drift 16s ease-in-out infinite alternate;
}

.rz-blobs span:nth-child(1) { width: 520px; height: 520px; top: -160px; left: -120px; background: #ffd54f; }
.rz-blobs span:nth-child(2) { width: 460px; height: 460px; top: 35%; right: -140px; background: #ab47bc; animation-delay: -6s; }
.rz-blobs span:nth-child(3) { width: 420px; height: 420px; bottom: -180px; left: 30%; background: #ff7043; animation-delay: -11s; }

@keyframes rz-drift {
   from { transform: translate(0, 0) scale(1); }
   to   { transform: translate(60px, 40px) scale(1.15); }
}

/* Fin motif de points par-dessus le dégradé */
.rz::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.5px, transparent 1.5px);
   background-size: 24px 24px;
}

/*--- En-tête ---*/
.rz-head {
   max-width: 820px;
   margin: 0 auto 54px;
   text-align: center;
   color: #fff;
}

.rz-kicker {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 7px 16px;
   border-radius: 50px;
   background: rgba(255, 255, 255, 0.2);
   border: 1px solid rgba(255, 255, 255, 0.35);
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 1px;
   text-transform: uppercase;
}

.rz-title {
   margin: 18px 0 10px;
   font-family: 'Poppins', Verdana, sans-serif;
   font-size: clamp(2.3rem, 5.5vw, 4rem);
   font-weight: 700;
   line-height: 1.05;
   letter-spacing: -1.5px;
   text-align: center;
   color: #fff;
   text-shadow: 0 6px 30px rgba(120, 20, 40, 0.25);
}

.rz-title span {
   position: relative;
   white-space: nowrap;
}

/* Trait de surligneur jaune sous "confiance" */
.rz-title span::after {
   content: "";
   position: absolute;
   left: -4px;
   right: -4px;
   bottom: 4px;
   height: 14px;
   z-index: -1;
   border-radius: 6px;
   background: #ffd54f;
   opacity: .85;
   transform: rotate(-1.5deg);
}

.rz-sub {
   margin: 0 auto;
   max-width: 600px;
   font-size: 17px;
   line-height: 1.6;
   color: rgba(255, 255, 255, 0.92);
}

.rz-pills {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 10px;
   margin-top: 24px;
}

.rz-pills span {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 16px;
   border-radius: 50px;
   background: #fff;
   color: #d84315;
   font-size: 14px;
   font-weight: 600;
   box-shadow: 0 8px 20px rgba(120, 20, 40, 0.18);
}

/*--- Grille "bento" ---*/
.rz-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 28px;
   max-width: 1240px;
   margin: 0 auto;
}

.rz-cell { display: flex; min-width: 0; }
.rz-wide { grid-column: span 2; }

/*--- Carte ---*/
.rz-card {
   --rx: 0deg;
   --ry: 0deg;
   --mx: 50%;
   --my: 0%;
   position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
   overflow: hidden;
   border-radius: 20px;
   background: #fff;
   color: #333 !important;
   text-decoration: none !important;
   box-shadow: 0 14px 36px rgba(90, 20, 30, 0.22);
   transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
   transition: transform .25s ease-out, box-shadow .35s ease;
}

/* Liseré de couleur propre à chaque site */
.rz-card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   z-index: 3;
   height: 5px;
   background: var(--rz-g, var(--rz));
}

/* Reflet lumineux qui suit la souris */
.rz-card::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 4;
   pointer-events: none;
   background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.28), transparent 45%);
   opacity: 0;
   transition: opacity .35s ease;
}

.rz-card:hover {
   box-shadow: 0 28px 60px rgba(90, 20, 30, 0.35), 0 0 0 3px #fff;
   transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-8px);
}

.rz-card:hover::after { opacity: 1; }

/*--- Mini navigateur ---*/
.rz-browser { display: block; background: #f1f1f4; }

.rz-bar {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 13px 14px 9px;
}

.rz-lights { display: flex; gap: 6px; flex: 0 0 auto; }
.rz-lights i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.rz-lights i:nth-child(2) { background: #febc2e; }
.rz-lights i:nth-child(3) { background: #28c840; }

.rz-url {
   flex: 1;
   min-width: 0;
   padding: 4px 12px;
   border-radius: 8px;
   background: #fff;
   color: #777;
   font-size: 12px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.rz-url i { color: #2f9e44; margin-right: 3px; }

/* La capture complète du site défile de haut en bas au survol */
.rz-screen {
   position: relative;
   display: block;
   height: 270px;
   background-color: #ddd;
   background-size: 100% auto;
   background-position: 50% 0;
   background-repeat: no-repeat;
   transition: background-position 5.5s cubic-bezier(.45, .05, .35, 1);
}

.rz-card:hover .rz-screen { background-position: 50% 100%; }

/* Capture d'une seule hauteur d'écran : elle remplit le cadre sans défiler */
.rz-screen.rz-still,
.rz-card:hover .rz-screen.rz-still { background-size: cover; background-position: 50% 50%; }

/* Bouton "Visiter" qui apparaît sur la capture */
.rz-visit {
   position: absolute;
   right: 14px;
   bottom: 14px;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 9px 16px;
   border-radius: 50px;
   background: var(--rz);
   color: #fff;
   font-size: 14px;
   font-weight: 600;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
   opacity: 0;
   transform: translateY(10px);
   transition: opacity .3s ease, transform .3s ease;
}

.rz-card:hover .rz-visit { opacity: 1; transform: translateY(0); }

/*--- Texte de la carte ---*/
.rz-body {
   display: flex;
   flex-direction: column;
   gap: 8px;
   flex: 1;
   padding: 20px 24px 26px;
   text-align: left;
}

.rz-meta {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px 14px;
}

.rz-tag {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 4px 12px;
   border-radius: 50px;
   background: color-mix(in srgb, var(--rz) 14%, #fff);
   color: var(--rz-ink);
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .5px;
   text-transform: uppercase;
}

.rz-place {
   color: #888;
   font-size: 13px;
}

.rz-place i { color: var(--rz-ink); margin-right: 3px; }

.rz-name {
   display: block;
   font-size: 22px;
   font-weight: 700;
   line-height: 1.2;
   color: #222;
}

.rz-desc {
   display: block;
   font-size: 15px;
   line-height: 1.6;
   color: #666;
}

.rz-desc b { color: #333; }

/*--- Carte "Et votre site ?" ---*/
.rz-cta {
   align-items: center;
   justify-content: center;
   gap: 12px;
   padding: 40px 28px;
   text-align: center;
   background: rgba(255, 255, 255, 0.12);
   border: 3px dashed rgba(255, 255, 255, 0.75);
   box-shadow: none;
   color: #fff !important;
   -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);
}

.rz-cta::before { display: none; }
.rz-cta .rz-name { color: #fff; font-size: 26px; }
.rz-cta .rz-desc { color: rgba(255, 255, 255, 0.9); max-width: 300px; }

.rz-cta-plus {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 74px;
   height: 74px;
   border-radius: 50%;
   background: #fff;
   color: #ff5722;
   font-size: 30px;
   box-shadow: 0 12px 28px rgba(90, 20, 30, 0.3);
   transition: transform .4s ease;
}

.rz-cta:hover { background: rgba(255, 255, 255, 0.2); box-shadow: 0 20px 50px rgba(90, 20, 30, 0.3); }
.rz-cta:hover .rz-cta-plus { transform: rotate(90deg) scale(1.08); }

.rz-cta-btn {
   margin-top: 8px;
   padding: 12px 26px;
   border-radius: 50px;
   background: #fff;
   color: #e64a19;
   font-weight: 600;
   font-size: 15px;
}

/*--- Responsive ---*/
@media (max-width: 980px) {
   .rz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
   .rz-wide { grid-column: span 2; }
}

@media (max-width: 640px) {
   .rz { padding: 70px 16px 80px; }
   .rz-head { margin-bottom: 36px; }
   .rz-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
   .rz-wide { grid-column: auto; }
   .rz-screen { height: 210px; }
   .rz-name { font-size: 20px; }
   .rz-hover-hint { display: none; }
   /* Pas de survol sur mobile : le bouton "Visiter" reste visible */
   .rz-visit { opacity: 1; transform: none; font-size: 13px; padding: 7px 13px; }
}

@media (prefers-reduced-motion: reduce) {
   .rz-blobs span { animation: none; }
   .rz-screen { transition: none; }
   .rz-card { transform: none !important; }
}