/* === SOUK N ROLL HOMEPAGE === */
.sr-hero {
position: relative;
width: 100%;
min-height: 92vh;
background: url(‘/wp-content/uploads/2026/05/sr-hero-boutique-v3.jpg’) center/cover no-repeat;
margin: -20px 0 0;
padding: 0;
}
.sr-hero::before {
content: « »;
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.35) 100%);
pointer-events: none;
}
/* === ARROW === */
.sr-arrow {
position: absolute;
left: 50%;
bottom: 30px;
transform: translateX(-50%);
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(2, 168, 108, 0.85);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
cursor: pointer;
z-index: 3;
box-shadow: 0 6px 20px rgba(2, 168, 108, 0.5);
animation: bounce 2.2s infinite;
transition: all 0.3s;
border: 2px solid rgba(255,255,255,0.4);
}
.sr-arrow:hover {
transform: translateX(-50%) scale(1.2);
background: #02A86C;
box-shadow: 0 8px 30px rgba(2, 168, 108, 0.8);
}
@keyframes bounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(12px); }
}
/* === MOTTO BANNER — « De la terre à la cuillère » (fine bande) === */
.sr-motto {
position: relative;
padding: 26px 30px;
background: linear-gradient(135deg, #0F5E9E 0%, #167A99 35%, #1A98A0 60%, #02A86C 100%);
text-align: center;
overflow: hidden;
}
.sr-motto::before {
content: « »;
position: absolute;
inset: 0;
background:
radial-gradient(circle at 25% 30%, rgba(255, 220, 130, 0.25) 0%, transparent 40%),
radial-gradient(circle at 75% 70%, rgba(255, 220, 130, 0.18) 0%, transparent 45%);
pointer-events: none;
}
.sr-motto-line {
display: none; /* lignes ornementales retirées (gain de hauteur) */
}
.sr-motto-text {
font-family: ‘Caveat’, cursive;
font-size: clamp(1.6rem, 3.4vw, 2.6rem);
color: #fff;
margin: 0 auto;
font-weight: 500;
letter-spacing: 1.5px;
text-shadow:
0 2px 14px rgba(0, 0, 0, 0.35),
0 0 24px rgba(255, 220, 130, 0.2);
position: relative;
z-index: 2;
line-height: 1.1;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(14px, 2.2vw, 28px);
flex-wrap: nowrap;
width: fit-content;
}
.sr-motto-words {
display: inline-block;
}
.sr-motto-sep {
font-size: 0.5em;
color: #FFE9B8;
opacity: 0.85;
display: inline-block;
transform: translateY(-0.08em);
}
@media (max-width: 768px) {
.sr-motto { padding: 18px 18px; }
.sr-motto-text { gap: 10px; letter-spacing: 1px; }
}
/* === DOORS SECTION === */
.sr-doors-section {
padding: 90px 20px;
background:
radial-gradient(circle at 20% 20%, rgba(231, 197, 144, 0.25) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(186, 142, 88, 0.18) 0%, transparent 50%),
linear-gradient(180deg, #F5EBD9 0%, #EADAB8 100%);
text-align: center;
}
.sr-doors-section h2 {
font-size: clamp(2.4rem, 5vw, 3.6rem);
color: #4A2C14;
margin: 0 0 10px;
font-family: ‘Caveat’, cursive;
font-weight: 700;
letter-spacing: 1px;
}
.sr-doors-section .sr-intro {
font-size: 1.15rem;
color: #6B4A2B;
max-width: 620px;
margin: 0 auto 60px;
font-family: ‘Amiri’, serif;
font-style: italic;
}
.sr-doors {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}
/* === DOOR (V1 + ouverture 2 battants) === */
.sr-door {
position: relative;
display: block;
text-decoration: none;
aspect-ratio: 3/4;
border-radius: 200px 200px 12px 12px;
overflow: hidden;
/* Intérieur sombre révélé quand la porte s’ouvre */
background:
radial-gradient(ellipse at 50% 40%, rgba(255, 220, 130, 0.3) 0%, transparent 60%),
linear-gradient(180deg, #2A1404 0%, #1A0F08 100%);
box-shadow: 0 10px 30px rgba(16, 113, 192, 0.25);
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.45s;
border: 3px solid #fff;
perspective: 1400px;
}
.sr-door:hover {
transform: translateY(-12px) scale(1.03);
box-shadow: 0 20px 50px rgba(16, 113, 192, 0.45);
}
/* Les 2 battants */
.sr-door-half {
position: absolute;
top: 0;
bottom: 0;
width: 50%;
background: linear-gradient(135deg, #1071C0 0%, #02A86C 100%);
transition: transform 0.55s cubic-bezier(0.55, 0.05, 0.25, 1);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
will-change: transform;
}
.sr-door-left {
left: 0;
transform-origin: left center;
box-shadow: inset -3px 0 8px rgba(0,0,0,0.4);
}
.sr-door-right {
right: 0;
transform-origin: right center;
box-shadow: inset 3px 0 8px rgba(0,0,0,0.4);
}
/* Contenu visible sur la porte fermée */
.sr-door-inner {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 22px;
color: #fff;
text-align: center;
background: linear-gradient(180deg, rgba(16,113,192,0.85) 0%, rgba(2,168,108,0.85) 100%);
pointer-events: none;
transition: opacity 0.4s ease, transform 0.4s ease;
}
.sr-door-icon {
font-size: 4rem;
margin-bottom: 20px;
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}
.sr-door-title {
font-size: 1.8rem;
font-weight: 700;
margin: 0 0 8px;
color: #fff;
line-height: 1.1;
font-family: ‘Caveat’, cursive;
letter-spacing: 0.5px;
}
.sr-door-desc {
font-size: 0.95rem;
opacity: 0.95;
margin: 0;
line-height: 1.4;
font-family: ‘Amiri’, serif;
font-style: italic;
}
.sr-door-cta {
margin-top: 22px;
padding: 8px 26px;
background: rgba(255,255,255,0.2);
border: 2px solid #fff;
border-radius: 30px;
font-size: 1.05rem;
letter-spacing: 1px;
font-weight: 600;
font-family: ‘Caveat’, cursive;
}
/* Ouverture au clic : battants pivotent + contenu disparaît */
.sr-door.is-opening .sr-door-left { transform: rotateY(-110deg); }
.sr-door.is-opening .sr-door-right { transform: rotateY( 110deg); }
.sr-door.is-opening .sr-door-inner {
opacity: 0;
transform: scale(1.1);
}
/* === STORY === */
.sr-story { padding: 100px 20px; background: #fff; text-align: center; }
.sr-story-inner { max-width: 800px; margin: 0 auto; }
.sr-story h2 {
color: #1071C0;
font-size: clamp(2.4rem, 5vw, 4rem);
font-family: ‘Caveat’, cursive;
font-weight: 700;
margin: 0 0 30px;
letter-spacing: 1px;
}
.sr-story p {
font-size: 1.15rem;
line-height: 1.8;
color: #444;
margin: 0 0 20px;
font-family: ‘Amiri’, serif;
}
.sr-story .sr-tagline {
color: #02A86C;
font-size: 1.8rem;
font-family: ‘Caveat’, cursive;
font-weight: 600;
margin-top: 40px;
}
/* === A. INTRO CINEMATIQUE — Palais Marrakchi Bleu Majorelle === */
.sr-intro-curtain {
position: fixed;
inset: 0;
z-index: 99999;
perspective: 1800px;
overflow: hidden;
}
.sr-intro-curtain.is-leaving {
pointer-events: none;
}
.sr-intro-doorpanel {
position: absolute;
top: 0;
bottom: 0;
width: 50%;
background:
linear-gradient(180deg,
#6B1F18 0%, #4A1410 1.5%,
#6B1F18 1.5%, #4A1410 2.5%,
transparent 2.5%),
radial-gradient(circle 3.8px at 50% 50%, #F4D58A 22%, #D4A24A 48%, #7A5818 65%, transparent 70%) 0 0 / 52px 58px,
linear-gradient(180deg,
transparent 0%, transparent 13%,
#040E1A 13%, #010509 14.5%, #040E1A 16%,
transparent 16%, transparent 48%,
#040E1A 48%, #010509 49.5%, #040E1A 51%,
transparent 51%, transparent 83%,
#040E1A 83%, #010509 84.5%, #040E1A 86%,
transparent 86%),
repeating-linear-gradient(90deg,
rgba(0,0,0,0.5) 0px, rgba(0,0,0,0.5) 2px,
transparent 2px, transparent 70px),
repeating-linear-gradient(90deg,
rgba(120, 200, 235, 0.05) 0px, rgba(120, 200, 235, 0.05) 1px,
transparent 1px, transparent 5px),
linear-gradient(170deg,
#2C6498 0%,
#1B4575 30%,
#0E2C50 60%,
#051831 90%,
#020E1F 100%);
transition: transform 1.1s cubic-bezier(0.78, 0, 0.18, 1);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
will-change: transform;
transform: translateZ(0);
}
.sr-intro-doorpanel–left {
left: 0;
transform-origin: left center;
box-shadow: inset -6px 0 14px rgba(0,0,0,0.9);
}
.sr-intro-doorpanel–right {
right: 0;
transform-origin: right center;
box-shadow: inset 6px 0 14px rgba(0,0,0,0.9);
}
.sr-intro-curtain.is-leaving .sr-intro-doorpanel–left { transform: rotateY(-118deg); }
.sr-intro-curtain.is-leaving .sr-intro-doorpanel–right { transform: rotateY( 118deg); }
.sr-intro-glow {
position: absolute;
inset: 0;
background: radial-gradient(ellipse 40% 60% at center, rgba(255, 220, 130, 0.85) 0%, rgba(255, 180, 80, 0.4) 30%, transparent 70%);
opacity: 0;
z-index: 1;
pointer-events: none;
mix-blend-mode: screen;
}
.sr-intro-curtain.is-leaving .sr-intro-glow {
animation: sr-intro-glow-burst 1.1s ease;
}
@keyframes sr-intro-glow-burst {
0% { opacity: 0; transform: scale(0.2); }
25% { opacity: 0.4; transform: scale(0.5); }
55% { opacity: 1; transform: scale(1.2); }
100% { opacity: 0; transform: scale(1.7); }
}
.sr-intro-handle {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: clamp(60px, 7vw, 100px);
height: clamp(60px, 7vw, 100px);
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #FAEBC8 0%, #E8C76F 35%, #B58A2A 65%, #6B4E0E 100%);
box-shadow:
0 8px 18px rgba(0,0,0,0.85),
inset 0 -4px 8px rgba(0,0,0,0.35),
inset 0 4px 8px rgba(255,250,210,0.5),
0 0 0 3px #051831,
0 0 0 5px rgba(212, 162, 74, 0.5);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.sr-intro-handle::before {
content: « »;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 50%;
border-radius: 50%;
background: radial-gradient(circle at 40% 35%, #FAEBC8 0%, #C5942E 80%);
box-shadow:
inset 0 -3px 5px rgba(0,0,0,0.35),
inset 0 2px 4px rgba(255,250,210,0.6);
}
.sr-intro-doorpanel–left .sr-intro-handle { right: clamp(20px, 3vw, 40px); }
.sr-intro-doorpanel–right .sr-intro-handle { left: clamp(20px, 3vw, 40px); }
.sr-intro-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
text-align: center;
padding: 40px;
transition: opacity 0.5s ease, transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.sr-intro-curtain.is-leaving .sr-intro-content {
opacity: 0;
transform: translate(-50%, -50%) scale(1.5);
}
.sr-intro-logo {
width: clamp(140px, 22vw, 220px);
height: auto;
display: block;
margin: 0 auto;
filter: drop-shadow(0 0 30px rgba(16, 113, 192, 0.6));
animation: sr-intro-logo-pulse 2.4s ease-in-out infinite;
}
@keyframes sr-intro-logo-pulse {
0%, 100% {
transform: scale(1);
filter: drop-shadow(0 0 20px rgba(16, 113, 192, 0.5));
}
50% {
transform: scale(1.06);
filter: drop-shadow(0 0 35px rgba(2, 168, 108, 0.7));
}
}
.sr-intro-text {
color: #F5E5C8;
font-family: ‘Caveat’, cursive;
font-weight: 500;
font-size: clamp(1.5rem, 3.4vw, 2.4rem);
margin: 40px 0 0;
letter-spacing: 1px;
opacity: 0;
animation: sr-intro-text-fade 1.8s ease 0.7s forwards;
}
.sr-intro-text::after {
content: « »;
display: inline-block;
width: 8px;
height: 8px;
background: #02A86C;
border-radius: 50%;
margin-left: 8px;
animation: sr-intro-blink 1s ease-in-out infinite;
}
@keyframes sr-intro-text-fade { to { opacity: 1; } }
@keyframes sr-intro-blink {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
/* === C. MANGA FX === */
.sr-manga-fx {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9998;
opacity: 0;
visibility: hidden;
}
.sr-manga-fx.is-active {
visibility: visible;
opacity: 1;
}
.sr-flash {
position: absolute;
inset: 0;
background: #fff;
opacity: 0;
}
.sr-manga-fx.is-active .sr-flash {
animation: sr-flash 480ms ease-out forwards;
}
@keyframes sr-flash {
0% { opacity: 0; }
8% { opacity: 0.95; }
100% { opacity: 0; }
}
.sr-speed-lines {
position: absolute;
inset: -20%;
background: repeating-conic-gradient(
from 0deg at 50% 50%,
transparent 0deg 2deg,
rgba(0,0,0,0.95) 2deg 2.5deg,
transparent 2.5deg 4deg,
rgba(0,0,0,0.75) 4deg 4.4deg,
transparent 4.4deg 6.5deg,
rgba(0,0,0,0.9) 6.5deg 7deg,
transparent 7deg 10deg,
rgba(0,0,0,0.7) 10deg 10.5deg,
transparent 10.5deg 13deg
);
-webkit-mask: radial-gradient(circle at center, transparent 16%, black 38%, black 70%, transparent 92%);
mask: radial-gradient(circle at center, transparent 16%, black 38%, black 70%, transparent 92%);
opacity: 0;
transform: scale(0.4);
}
.sr-manga-fx.is-active .sr-speed-lines {
animation: sr-speed-lines 1100ms ease-out forwards;
}
@keyframes sr-speed-lines {
0% { transform: scale(0.4); opacity: 0; }
20% { transform: scale(1); opacity: 1; }
100% { transform: scale(1.6); opacity: 0; }
}
.sr-don {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.2) rotate(-8deg);
font-family: « Arial Black », « Helvetica Neue », sans-serif;
font-size: clamp(7rem, 22vw, 20rem);
font-weight: 900;
line-height: 1;
color: #1071C0;
-webkit-text-stroke: 6px #fff;
text-shadow:
10px 10px 0 #02A86C,
12px 12px 0 rgba(0,0,0,0.85);
letter-spacing: -8px;
opacity: 0;
user-select: none;
}
.sr-manga-fx.is-active .sr-don {
animation: sr-don 1100ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes sr-don {
0% { transform: translate(-50%, -50%) scale(0.2) rotate(-12deg); opacity: 0; }
25% { transform: translate(-50%, -50%) scale(1.25) rotate(-6deg); opacity: 1; }
55% { transform: translate(-50%, -50%) scale(1.05) rotate(-4deg); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1) rotate(-4deg); opacity: 0; }
}
@media (max-width: 768px) {
.sr-hero { min-height: 60vh; }
.sr-arrow { width: 48px; height: 48px; font-size: 1.5rem; bottom: 20px; }
.sr-doors { gap: 24px; }
.sr-door-icon { font-size: 3rem; }
.sr-door-title { font-size: 1.5rem; }
.sr-door-desc { font-size: 0.88rem; }
}
Pousse les portes du souk
❖De la terre à la cuillère❖
Choisis ta porte
Pousse une porte et entre dans notre univers — du souk authentique aux saveurs de l’argan.
Du souk à votre table
est né d’une envie simple : partager le meilleur du terroir marocain — du miel récolté directement par nos apiculteurs partenaires, à l’huile d’olive pressée le jour même, en passant par nos glaces artisanales premium.
Installés au cœur de Bab El Khmiss, l’un des quartiers les plus authentiques de Marrakech, nous vous accueillons dans une boutique où chaque produit raconte une histoire.
« L’authenticité du souk, la qualité d’un artisan. »
(function(){
var hoverTimer = null;
var lastTrigger = 0;
function attachScroll(){
var arrow = document.querySelector(« .sr-arrow »);
var target = document.querySelector(« .sr-doors-section ») || document.querySelector(« .sr-story »);
if(!arrow || !target) return;
function scrollToDoors(){
var now = Date.now();
if(now – lastTrigger < 2000) return;
lastTrigger = now;
target.scrollIntoView({ behavior: "smooth", block: "start" });
}
arrow.addEventListener("mouseenter", function(){
hoverTimer = setTimeout(scrollToDoors, 150);
});
arrow.addEventListener("mouseleave", function(){
if(hoverTimer) clearTimeout(hoverTimer);
});
arrow.addEventListener("click", function(e){
e.preventDefault();
scrollToDoors();
});
}
function attachDoors(){
var doors = document.querySelectorAll(".sr-door");
var mangaFx = document.getElementById('sr-manga-fx');
doors.forEach(function(door){
door.addEventListener("click", function(e){
if (door.classList.contains("is-opening")) return;
e.preventDefault();
var href = door.getAttribute("href");
if (mangaFx) {
mangaFx.classList.remove('is-active');
void mangaFx.offsetWidth;
mangaFx.classList.add('is-active');
}
setTimeout(function(){
door.classList.add("is-opening");
}, 110);
setTimeout(function(){
if (mangaFx) mangaFx.classList.remove('is-active');
}, 650);
// Navigation après 420ms (flash) + 1600ms (ouverture battants) = 2020ms total + buffer
setTimeout(function(){
window.location.href = href;
}, 750);
});
});
}
function handleIntro(){
var intro = document.getElementById('sr-intro');
if (!intro) return;
var seen = false;
try { seen = sessionStorage.getItem('sr_intro_seen'); } catch(err) {}
if (seen) {
if (intro.parentNode) { intro.parentNode.removeChild(intro); }
return;
}
setTimeout(function(){
intro.classList.add('is-leaving');
try { sessionStorage.setItem('sr_intro_seen', '1'); } catch(err) {}
setTimeout(function(){
if (intro.parentNode) { intro.parentNode.removeChild(intro); }
}, 3600);
}, 2500);
}
function init(){
handleIntro();
attachScroll();
attachDoors();
}
if(document.readyState === "loading"){
document.addEventListener("DOMContentLoaded", init);
} else {
init();
}
})();
