Boutique
/* =========================================================
0 — MASQUER LA BOUTIQUE WOOCOMMERCE NATIVE
uniquement sur la page contenant notre boutique Stoti
========================================================= */
/* Titre natif Astra / WordPress */
body.woocommerce-shop .entry-header,
body.woocommerce-shop header.entry-header,
body.woocommerce-shop .page-title,
body.woocommerce-shop .woocommerce-products-header {
display: none !important;
}
/* Breadcrumb natif */
body.woocommerce-shop .woocommerce-breadcrumb,
body.woocommerce-shop .ast-woocommerce-container > .woocommerce-breadcrumb {
display: none !important;
}
/* Compteur + tri WooCommerce natifs */
body.woocommerce-shop .woocommerce-result-count,
body.woocommerce-shop .woocommerce-ordering {
display: none !important;
}
/*
IMPORTANT :
On ne masque que les produits WooCommerce qui sont
des enfants directs de la zone boutique native Astra.
Cela évite de toucher à notre propre grille.
*/
body.woocommerce-shop .ast-woocommerce-container > ul.products,
body.woocommerce-shop .ast-woocommerce-container > .products,
body.woocommerce-shop .ast-woocommerce-container > nav.woocommerce-pagination {
display: none !important;
}
/* Réduit les espacements imposés par Astra */
body.woocommerce-shop .site-content,
body.woocommerce-shop .ast-container,
body.woocommerce-shop .content-area,
body.woocommerce-shop #primary,
body.woocommerce-shop article,
body.woocommerce-shop .entry-content {
max-width: none !important;
}
body.woocommerce-shop .entry-content {
margin: 0 !important;
}
body.woocommerce-shop #primary {
width: 100% !important;
margin: 0 !important;
}
/* =========================================================
1 — VARIABLES
========================================================= */
#stoti-shop-pro,
#stoti-shop-pro * {
box-sizing: border-box;
}
#stoti-shop-pro {
–st-green:#078579;
–st-green-dark:#05685f;
–st-green-deep:#044f48;
–st-green-soft:#e7f5f2;
–st-pink:#eca9a7;
–st-pink-soft:#fbe9e7;
–st-gold:#c8a768;
–st-black:#252c2a;
–st-grey:#707875;
–st-light:#f6f7f6;
–st-white:#ffffff;
–st-cream:#fffaf7;
–st-border:rgba(37,44,42,.105);
position:relative;
width:100%;
overflow:hidden;
margin:0 !important;
padding:0 !important;
color:var(–st-black);
background:#fff;
font-family: »Manrope »,Arial,sans-serif;
}
#stoti-shop-pro a,
#stoti-shop-pro a:hover,
#stoti-shop-pro a:focus,
#stoti-shop-pro a:active,
#stoti-shop-pro a:visited {
text-decoration:none !important;
-webkit-tap-highlight-color:transparent;
}
#stoti-shop-pro button,
#stoti-shop-pro input,
#stoti-shop-pro select {
font:inherit;
}
.elementor-widget-html:has(#stoti-shop-pro),
.elementor-widget-html:has(#stoti-shop-pro) .elementor-widget-container {
width:100% !important;
max-width:none !important;
margin:0 !important;
padding:0 !important;
}
/* =========================================================
2 — HERO
========================================================= */
.st-shop-hero {
position:relative;
overflow:hidden;
padding:
clamp(64px,7vw,112px)
clamp(18px,5vw,74px)
clamp(58px,6vw,92px);
background:
radial-gradient(circle at 5% 0%,rgba(236,169,167,.17),transparent 29%),
radial-gradient(circle at 96% 15%,rgba(7,133,121,.12),transparent 28%),
linear-gradient(135deg,#fff 0%,#f7fbfa 56%,#fff8f4 100%);
}
.st-shop-hero:after {
position:absolute;
right:-190px;
top:-240px;
width:620px;
height:620px;
content: » »;
border:1px solid rgba(7,133,121,.06);
border-radius:50%;
box-shadow:
0 0 0 55px rgba(7,133,121,.014),
0 0 0 110px rgba(7,133,121,.009);
}
.st-shop-max {
position:relative;
z-index:2;
width:min(100%,1480px);
margin:0 auto;
}
.st-shop-breadcrumb {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px;
margin-bottom:30px;
color:var(–st-grey);
font-size:9px;
}
.st-shop-breadcrumb a:hover {
color:var(–st-green) !important;
}
.st-shop-eyebrow {
display:inline-flex;
align-items:center;
gap:12px;
margin-bottom:17px;
color:var(–st-green);
font-size:9px;
font-weight:700;
letter-spacing:.23em;
text-transform:uppercase;
}
.st-shop-eyebrow:before {
width:38px;
height:1px;
content: » »;
background:linear-gradient(
90deg,
var(–st-pink),
var(–st-gold)
);
}
.st-shop-h1 {
max-width:990px;
margin:0;
color:var(–st-black);
font-family: »Cormorant Garamond »,Georgia,serif;
font-size:clamp(58px,7.5vw,110px);
font-weight:600;
line-height:.87;
letter-spacing:-.055em;
}
.st-shop-h1 em {
display:block;
margin-top:12px;
color:var(–st-green);
font-weight:500;
}
.st-shop-lead {
max-width:730px;
margin:34px 0 0;
color:var(–st-grey);
font-size:clamp(13px,1.1vw,16px);
line-height:1.85;
}
.st-shop-lead strong {
color:var(–st-black);
}
.st-shop-pills {
display:flex;
flex-wrap:wrap;
gap:9px;
margin-top:29px;
}
.st-shop-pill {
display:inline-flex;
min-height:39px;
align-items:center;
gap:8px;
padding:8px 13px;
border:1px solid rgba(7,133,121,.12);
border-radius:999px;
color:var(–st-green-dark);
background:rgba(255,255,255,.72);
font-size:8px;
font-weight:700;
}
.st-shop-pill svg {
width:15px;
height:15px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
}
/* =========================================================
3 — CATEGORIES
========================================================= */
.st-shop-cats {
padding:
43px
clamp(15px,4vw,60px)
44px;
border-top:1px solid rgba(0,0,0,.04);
border-bottom:1px solid rgba(0,0,0,.06);
background:#fff;
}
.st-cats-header {
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:30px;
margin-bottom:28px;
}
.st-mini-label {
display:block;
margin-bottom:7px;
color:var(–st-green);
font-size:8px;
font-weight:700;
letter-spacing:.18em;
text-transform:uppercase;
}
.st-cats-title {
margin:0;
font-family: »Cormorant Garamond »,Georgia,serif;
font-size:clamp(31px,3vw,44px);
font-weight:600;
line-height:1;
}
.st-cats-scroll {
display:flex;
gap:clamp(18px,2.2vw,34px);
overflow-x:auto;
padding:5px 4px 13px;
scrollbar-width:none;
scroll-behavior:smooth;
scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch;
}
.st-cats-scroll::-webkit-scrollbar {
display:none;
}
.st-cat-card {
flex:0 0 clamp(110px,9.5vw,150px);
padding:0;
border:0;
color:inherit;
background:transparent;
cursor:pointer;
text-align:center;
scroll-snap-align:start;
}
.st-cat-img {
position:relative;
display:block;
width:100%;
aspect-ratio:1;
overflow:hidden;
margin-bottom:13px;
border:1px solid rgba(37,44,42,.08);
border-radius:50%;
background:var(–st-cream);
box-shadow:0 12px 30px rgba(30,50,45,.07);
transition:
transform .35s ease,
border-color .35s ease,
box-shadow .35s ease;
}
.st-cat-img img {
width:100%;
height:100%;
object-fit:cover;
transition:transform .55s ease;
}
.st-cat-card:hover .st-cat-img,
.st-cat-card.active .st-cat-img {
border-color:var(–st-green);
box-shadow:0 18px 38px rgba(7,133,121,.15);
transform:translateY(-4px);
}
.st-cat-card:hover .st-cat-img img {
transform:scale(1.07);
}
.st-cat-card.active .st-cat-img:after {
position:absolute;
inset:7px;
content: » »;
pointer-events:none;
border:1px solid rgba(255,255,255,.9);
border-radius:50%;
}
.st-cat-name {
display:block;
color:var(–st-black);
font-size:10px;
font-weight:700;
line-height:1.35;
}
.st-cat-count {
display:block;
margin-top:4px;
color:var(–st-grey);
font-size:7px;
}
.st-cat-all {
display:grid;
width:100%;
height:100%;
place-items:center;
color:var(–st-green);
background:
radial-gradient(circle,#fff,var(–st-green-soft));
}
.st-cat-all svg {
width:48%;
height:48%;
fill:none;
stroke:currentColor;
stroke-width:1.25;
stroke-linecap:round;
stroke-linejoin:round;
}
/* =========================================================
4 — BOUTIQUE
========================================================= */
.st-shop-products {
padding:
clamp(55px,6vw,90px)
clamp(14px,4vw,60px)
clamp(75px,8vw,120px);
background:#f6f7f6;
}
.st-products-header {
margin-bottom:27px;
}
.st-products-header h2 {
margin:0;
font-family: »Cormorant Garamond »,Georgia,serif;
font-size:clamp(40px,4.6vw,64px);
font-weight:600;
line-height:.96;
}
.st-products-header p {
max-width:620px;
margin:14px 0 0;
color:var(–st-grey);
font-size:10px;
line-height:1.75;
}
/* =========================================================
5 — TOOLBAR
========================================================= */
.st-toolbar {
position:relative;
z-index:10;
display:grid;
grid-template-columns:
minmax(240px,1fr)
minmax(185px,.62fr)
minmax(185px,.62fr)
auto;
gap:9px;
margin-bottom:31px;
padding:9px;
border:1px solid var(–st-border);
border-radius:17px;
background:rgba(255,255,255,.95);
box-shadow:0 15px 38px rgba(30,50,45,.06);
}
.st-tool {
display:flex;
min-width:0;
min-height:56px;
align-items:center;
gap:10px;
padding:0 15px;
border:1px solid rgba(37,44,42,.075);
border-radius:11px;
background:#fafbf9;
}
.st-tool svg {
width:17px;
height:17px;
flex:0 0 auto;
fill:none;
stroke:var(–st-green);
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
}
.st-tool input,
.st-tool select {
width:100%;
min-width:0;
padding:0;
border:0 !important;
outline:0 !important;
color:var(–st-black) !important;
background:transparent !important;
box-shadow:none !important;
font-size:10px;
}
.st-tool input::placeholder {
color:#939996;
}
.st-tool select {
cursor:pointer;
font-weight:600;
}
.st-count {
display:flex;
min-width:145px;
min-height:56px;
align-items:center;
justify-content:center;
padding:0 15px;
border-radius:11px;
color:var(–st-green-dark);
background:var(–st-green-soft);
font-size:8px;
font-weight:700;
text-align:center;
}
/* =========================================================
6 — GRID
========================================================= */
.st-products-grid {
display:grid;
grid-template-columns:
repeat(4,minmax(0,1fr));
gap:clamp(15px,2vw,26px);
}
/* =========================================================
7 — PRODUCT CARD
========================================================= */
.st-product {
min-width:0;
overflow:hidden;
border:1px solid rgba(37,44,42,.075);
border-radius:20px;
background:#fff;
box-shadow:0 13px 35px rgba(30,50,45,.05);
transition:
transform .4s cubic-bezier(.2,.7,.2,1),
box-shadow .35s ease,
border-color .35s ease;
}
.st-product:hover {
border-color:rgba(7,133,121,.18);
box-shadow:0 27px 58px rgba(30,50,45,.12);
transform:translateY(-7px);
}
.st-product-link {
display:flex;
height:100%;
flex-direction:column;
}
.st-product-visual {
position:relative;
display:block;
width:100%;
aspect-ratio:1 / 1.16;
overflow:hidden;
background:#eee9e4;
}
.st-product-img {
display:block !important;
width:100% !important;
max-width:none !important;
height:100% !important;
margin:0 !important;
object-fit:cover !important;
object-position:center !important;
border:0 !important;
border-radius:0 !important;
transform:scale(1.01);
transition:
transform .7s ease,
filter .4s ease;
}
.st-product:hover .st-product-img {
filter:saturate(1.04) contrast(1.01);
transform:scale(1.065);
}
.st-product-visual:after {
position:absolute;
z-index:2;
inset:0;
content: » »;
pointer-events:none;
background:
linear-gradient(
180deg,
transparent 62%,
rgba(4,48,42,.20)
);
opacity:0;
transition:opacity .35s ease;
}
.st-product:hover .st-product-visual:after {
opacity:1;
}
.st-badges {
position:absolute;
z-index:5;
top:13px;
left:13px;
display:flex;
flex-direction:column;
gap:5px;
}
.st-badge {
display:inline-flex;
min-height:27px;
align-items:center;
padding:6px 10px;
border:1px solid rgba(255,255,255,.55);
border-radius:999px;
box-shadow:0 6px 17px rgba(0,0,0,.1);
font-size:7px;
font-weight:700;
letter-spacing:.1em;
text-transform:uppercase;
backdrop-filter:blur(10px);
}
.st-badge.sale {
color:#fff;
background:rgba(177,67,70,.92);
}
.st-badge.new {
color:var(–st-green-dark);
background:rgba(255,255,255,.94);
}
.st-view-circle {
position:absolute;
z-index:5;
right:14px;
bottom:14px;
display:grid;
width:42px;
height:42px;
place-items:center;
border-radius:50%;
color:var(–st-green-dark);
background:rgba(255,255,255,.96);
box-shadow:0 11px 28px rgba(20,40,35,.17);
opacity:0;
transform:translateY(8px);
transition:
opacity .3s ease,
transform .3s ease;
}
.st-product:hover .st-view-circle {
opacity:1;
transform:none;
}
.st-view-circle svg {
width:17px;
height:17px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
}
/* product copy */
.st-product-copy {
display:flex;
flex:1;
flex-direction:column;
padding:18px 17px 19px;
}
.st-product-cat {
margin-bottom:7px;
color:var(–st-green);
font-size:7px;
font-weight:700;
letter-spacing:.11em;
text-transform:uppercase;
}
.st-product-title {
display:-webkit-box;
overflow:hidden;
min-height:45px;
margin:0;
color:var(–st-black);
font-family: »Cormorant Garamond »,Georgia,serif;
font-size:clamp(20px,1.7vw,27px);
font-weight:600;
line-height:1.03;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
transition:color .25s ease;
}
.st-product:hover .st-product-title {
color:var(–st-green-dark);
}
.st-price {
display:flex;
flex-wrap:wrap;
align-items:baseline;
gap:6px;
margin-top:auto;
padding-top:15px;
}
.st-price-prefix {
color:var(–st-grey);
font-size:8px;
}
.st-price-current {
color:var(–st-black);
font-size:15px;
font-weight:700;
}
.st-price-old {
color:#a0a5a2;
font-size:9px;
text-decoration:line-through;
}
.st-product-footer {
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-top:13px;
padding-top:12px;
border-top:1px solid rgba(37,44,42,.07);
}
.st-stock {
display:inline-flex;
align-items:center;
gap:6px;
color:var(–st-grey);
font-size:7px;
}
.st-stock:before {
width:6px;
height:6px;
content: » »;
border-radius:50%;
background:var(–st-green);
}
.st-product-read {
color:var(–st-green);
font-size:7px;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
}
/* =========================================================
8 — PLACEHOLDER
========================================================= */
.st-placeholder {
display:grid;
width:100%;
height:100%;
place-items:center;
color:var(–st-pink);
background:
radial-gradient(circle,#fff,var(–st-pink-soft));
}
.st-placeholder svg {
width:34%;
height:34%;
fill:none;
stroke:currentColor;
stroke-width:1.15;
stroke-linecap:round;
stroke-linejoin:round;
}
/* =========================================================
9 — SKELETON
========================================================= */
.st-skeleton {
overflow:hidden;
border-radius:20px;
background:#fff;
}
.st-skel-img {
aspect-ratio:1 / 1.16;
background:
linear-gradient(
100deg,
#eae7e5 20%,
#f8f7f6 42%,
#eae7e5 64%
);
background-size:220% 100%;
animation:stLoading 1.35s linear infinite;
}
.st-skel-copy {
padding:18px;
}
.st-skel-line {
height:10px;
margin-bottom:10px;
border-radius:999px;
background:#ebe9e7;
}
.st-skel-small {
width:34%;
}
.st-skel-title {
width:78%;
height:19px;
}
.st-skel-price {
width:45%;
margin-top:18px;
}
@keyframes stLoading {
from {
background-position:120% 0;
}
to {
background-position:-120% 0;
}
}
/* =========================================================
10 — EMPTY
========================================================= */
.st-empty {
display:none;
padding:65px 25px;
border:1px solid var(–st-border);
border-radius:20px;
background:#fff;
text-align:center;
}
.st-empty.show {
display:block;
}
.st-empty-icon {
display:grid;
width:60px;
height:60px;
place-items:center;
margin:0 auto 17px;
border-radius:50%;
color:var(–st-green);
background:var(–st-green-soft);
font-size:22px;
}
.st-empty h3 {
margin:0;
font-family: »Cormorant Garamond »,Georgia,serif;
font-size:31px;
font-weight:600;
}
.st-empty p {
margin:9px 0 0;
color:var(–st-grey);
font-size:10px;
}
/* =========================================================
11 — PAGINATION
========================================================= */
.st-pagination {
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap:7px;
margin-top:45px;
}
.st-page {
display:grid;
width:41px;
height:41px;
place-items:center;
padding:0;
border:1px solid var(–st-border);
border-radius:50%;
color:var(–st-black);
background:#fff;
cursor:pointer;
font-size:9px;
font-weight:700;
transition:
color .25s ease,
background .25s ease,
transform .25s ease;
}
.st-page:hover,
.st-page.active {
color:#fff;
background:var(–st-green);
border-color:var(–st-green);
transform:translateY(-2px);
}
.st-page:disabled {
opacity:.3;
cursor:default;
transform:none;
}
/* =========================================================
12 — TRUST
========================================================= */
.st-trust {
padding:
50px
clamp(14px,4vw,60px);
background:#f2e7de;
}
.st-trust-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
width:min(100%,1370px);
margin:0 auto;
overflow:hidden;
border-radius:20px;
background:rgba(37,44,42,.08);
gap:1px;
}
.st-trust-item {
display:flex;
min-height:135px;
align-items:center;
justify-content:center;
gap:15px;
padding:25px 28px;
background:#fff9f5;
}
.st-trust-icon {
display:grid;
width:51px;
height:51px;
flex:0 0 auto;
place-items:center;
border-radius:50%;
color:var(–st-green);
background:var(–st-green-soft);
}
.st-trust-icon svg {
width:23px;
height:23px;
fill:none;
stroke:currentColor;
stroke-width:1.7;
stroke-linecap:round;
stroke-linejoin:round;
}
.st-trust-copy strong {
display:block;
margin-bottom:5px;
font-family: »Cormorant Garamond »,Georgia,serif;
font-size:21px;
font-weight:600;
}
.st-trust-copy span {
display:block;
max-width:280px;
color:var(–st-grey);
font-size:8px;
line-height:1.6;
}
/* =========================================================
13 — ABOUT / SEO
========================================================= */
.st-about {
padding:
clamp(65px,8vw,115px)
clamp(14px,4vw,60px);
background:#fff;
}
.st-about-card {
display:grid;
grid-template-columns:minmax(340px,.8fr) minmax(0,1.2fr);
width:min(100%,1450px);
margin:0 auto;
overflow:hidden;
border:1px solid rgba(7,133,121,.1);
border-radius:27px;
box-shadow:0 27px 70px rgba(30,50,45,.09);
}
.st-about-image {
position:relative;
min-height:590px;
overflow:hidden;
background:#d9cbc0;
}
.st-about-image img {
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
transition:transform .8s ease;
}
.st-about-card:hover .st-about-image img {
transform:scale(1.04);
}
.st-about-copy {
display:flex;
flex-direction:column;
justify-content:center;
padding:
clamp(55px,6vw,95px)
clamp(40px,6vw,95px);
background:
radial-gradient(circle at 95% 5%,rgba(236,169,167,.15),transparent 29%),
linear-gradient(140deg,#edf8f5,#fffaf7);
}
.st-about-copy h2 {
max-width:770px;
margin:0;
font-family: »Cormorant Garamond »,Georgia,serif;
font-size:clamp(45px,5vw,73px);
font-weight:600;
line-height:.94;
letter-spacing:-.04em;
}
.st-about-copy h2 em {
color:var(–st-green);
font-weight:500;
}
.st-about-copy p {
max-width:780px;
margin:23px 0 0;
color:var(–st-grey);
font-size:12px;
line-height:1.87;
}
.st-about-copy strong {
color:var(–st-black);
}
.st-about-actions {
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:28px;
}
.st-about-button {
display:inline-flex;
min-height:52px;
align-items:center;
justify-content:center;
padding:13px 21px;
border-radius:999px;
font-size:8px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
transition:.3s ease;
}
.st-about-primary {
color:#fff !important;
background:var(–st-green);
}
.st-about-primary:hover {
color:var(–st-green) !important;
background:#fff;
box-shadow:0 14px 35px rgba(7,133,121,.15);
}
.st-about-secondary {
border:1px solid var(–st-border);
background:rgba(255,255,255,.7);
}
.st-about-secondary:hover {
color:#fff !important;
background:var(–st-black);
}
/* =========================================================
14 — SEO TEXT
========================================================= */
.st-seo {
padding:
clamp(65px,8vw,110px)
clamp(18px,5vw,80px);
background:#fff;
}
.st-seo-inner {
width:min(100%,1080px);
margin:0 auto;
}
.st-seo h2 {
margin:0 0 32px;
font-family: »Cormorant Garamond »,Georgia,serif;
font-size:clamp(40px,5vw,63px);
font-weight:600;
line-height:.97;
}
.st-seo h3 {
margin:36px 0 12px;
font-family: »Cormorant Garamond »,Georgia,serif;
font-size:clamp(27px,3vw,37px);
font-weight:600;
}
.st-seo p {
margin:0 0 17px;
color:var(–st-grey);
font-size:11px;
line-height:1.9;
}
.st-seo strong {
color:var(–st-black);
}
/* =========================================================
15 — FAQ
========================================================= */
.st-faq {
padding:
65px
clamp(15px,5vw,75px)
85px;
background:#f6f7f6;
}
.st-faq-inner {
width:min(100%,1000px);
margin:0 auto;
}
.st-faq-header {
margin-bottom:29px;
text-align:center;
}
.st-faq-header h2 {
margin:8px 0 0;
font-family: »Cormorant Garamond »,Georgia,serif;
font-size:clamp(38px,5vw,58px);
font-weight:600;
}
.st-faq-item {
margin-bottom:9px;
overflow:hidden;
border:1px solid var(–st-border);
border-radius:13px;
background:#fff;
}
.st-faq-item summary {
position:relative;
padding:20px 55px 20px 20px;
cursor:pointer;
list-style:none;
color:var(–st-black);
font-size:10px;
font-weight:700;
}
.st-faq-item summary::-webkit-details-marker {
display:none;
}
.st-faq-item summary:after {
position:absolute;
right:20px;
top:50%;
content: »+ »;
color:var(–st-green);
font-family: »Cormorant Garamond »,serif;
font-size:26px;
transform:translateY(-50%);
}
.st-faq-item[open] summary:after {
content: »− »;
}
.st-faq-answer {
padding:0 20px 20px;
color:var(–st-grey);
font-size:10px;
line-height:1.8;
}
/* =========================================================
16 — CTA
========================================================= */
.st-final {
padding:
55px
clamp(14px,4vw,60px)
75px;
background:#fff;
}
.st-final-card {
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
width:min(100%,1200px);
margin:0 auto;
padding:32px 34px;
overflow:hidden;
border-radius:22px;
color:#fff;
background:
radial-gradient(circle at 100% 0%,rgba(255,255,255,.09),transparent 33%),
linear-gradient(135deg,var(–st-green-dark),var(–st-green-deep));
}
.st-final-card span {
display:block;
margin-bottom:6px;
color:rgba(255,255,255,.67);
font-size:7px;
font-weight:700;
letter-spacing:.15em;
text-transform:uppercase;
}
.st-final-card h3 {
margin:0;
color:#fff;
font-family: »Cormorant Garamond »,Georgia,serif;
font-size:clamp(29px,3vw,42px);
font-weight:600;
}
.st-final-button {
display:inline-flex;
min-height:53px;
align-items:center;
justify-content:center;
padding:13px 23px;
border-radius:999px;
color:var(–st-green-dark) !important;
background:#fff;
font-size:8px;
font-weight:700;
letter-spacing:.08em;
white-space:nowrap;
text-transform:uppercase;
transition:transform .3s ease;
}
.st-final-button:hover {
transform:translateY(-3px);
}
/* =========================================================
17 — FOCUS
========================================================= */
#stoti-shop-pro a:focus,
#stoti-shop-pro button:focus,
#stoti-shop-pro input:focus,
#stoti-shop-pro select:focus {
outline:none !important;
}
#stoti-shop-pro a:focus-visible,
#stoti-shop-pro button:focus-visible,
#stoti-shop-pro input:focus-visible,
#stoti-shop-pro select:focus-visible {
outline:2px solid var(–st-pink) !important;
outline-offset:3px !important;
}
/* =========================================================
18 — TABLETTE
========================================================= */
@media(max-width:1100px) {
.st-toolbar {
grid-template-columns:1fr 1fr;
}
.st-products-grid {
grid-template-columns:repeat(3,minmax(0,1fr));
}
}
/* =========================================================
19 — TABLETTE VERTICALE
========================================================= */
@media(max-width:820px) {
.st-products-grid {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.st-trust-grid {
grid-template-columns:1fr;
}
.st-trust-item {
justify-content:flex-start;
}
.st-about-card {
display:flex;
flex-direction:column;
}
.st-about-image {
min-height:0;
aspect-ratio:16 / 10;
}
.st-about-copy {
align-items:center;
text-align:center;
}
.st-about-actions {
justify-content:center;
}
}
/* =========================================================
20 — MOBILE
========================================================= */
@media(max-width:600px) {
.st-shop-hero {
padding:43px 16px 42px;
text-align:center;
}
.st-shop-breadcrumb,
.st-shop-eyebrow,
.st-shop-pills {
justify-content:center;
}
.st-shop-h1 {
font-size:clamp(49px,15vw,66px);
}
.st-shop-lead {
margin-left:auto;
margin-right:auto;
}
.st-shop-cats {
padding-left:0;
padding-right:0;
}
.st-cats-header {
justify-content:center;
padding:0 16px;
text-align:center;
}
.st-cats-scroll {
padding-left:16px;
padding-right:16px;
scroll-padding-inline:16px;
}
.st-cat-card {
flex-basis:103px;
}
.st-shop-products {
padding:
46px
11px
67px;
}
.st-products-header {
text-align:center;
}
.st-products-header p {
margin-left:auto;
margin-right:auto;
}
.st-toolbar {
grid-template-columns:1fr;
}
.st-products-grid {
gap:10px;
}
.st-product {
border-radius:14px;
}
.st-product-copy {
padding:13px 11px 14px;
}
.st-product-title {
min-height:39px;
font-size:clamp(18px,5.6vw,22px);
}
.st-price-current {
font-size:13px;
}
.st-view-circle,
.st-product-footer {
display:none;
}
.st-trust {
padding:34px 11px;
}
.st-trust-item {
min-height:107px;
padding:20px;
}
.st-about {
padding:52px 11px;
}
.st-about-card {
border-radius:19px;
}
.st-about-image {
aspect-ratio:4 / 4.4;
}
.st-about-copy {
padding:43px 21px;
}
.st-seo {
padding:54px 17px;
}
.st-faq {
padding:54px 11px;
}
.st-final {
padding:44px 11px 55px;
}
.st-final-card {
flex-direction:column;
padding:27px 20px;
text-align:center;
}
.st-final-button {
width:100%;
}
}
/* 1 colonne uniquement sur très petits téléphones */
@media(max-width:360px) {
.st-products-grid {
grid-template-columns:1fr;
}
.st-product-visual {
aspect-ratio:1 / 1.04;
}
}
@media(prefers-reduced-motion:reduce) {
#stoti-shop-pro *,
#stoti-shop-pro *:before,
#stoti-shop-pro *:after {
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
}
Fleuriste Stoti · Marrakech
Des fleurs pour
chaque émotion.
Découvrez notre boutique de fleurs à Marrakech :
bouquets de roses, compositions florales,
créations romantiques, anniversaires, mariages,
naissances et attentions personnalisées préparées par
Fleuriste Stoti.
Création artisanale
Livraison à Marrakech
Préparé avec soin
Explorez nos univers
Nos créations florales
Filtrez par occasion, recherchez une création
ou triez la collection selon vos préférences.
Chargement…
✿
Aucun bouquet trouvé
Essayez une autre catégorie ou une autre recherche.
Fleurs sélectionnées avec soin
Des compositions préparées avec attention
dans notre boutique à Marrakech.
Créations sur mesure
Couleurs, style et budget peuvent être adaptés
selon votre demande.
Livraison à Marrakech
À domicile, hôtel, bureau, restaurant
ou lieu d’événement.
Fleuriste Stoti Marrakech
Un bouquet pour
dire ce qui compte.
Chez Fleuriste Stoti, nous créons
des bouquets pour accompagner les moments qui
comptent : anniversaire, amour, mariage, naissance,
remerciement ou simple attention.
Notre boutique est située au
Quartier Assif à Marrakech,
à côté de la Pâtisserie Dar Yemma.
Vous pouvez commander depuis la boutique en ligne
ou nous contacter pour une création personnalisée.
Commander un bouquet de fleurs à Marrakech
Vous recherchez un
fleuriste à Marrakech
pour offrir des fleurs à un proche ?
Fleuriste Stoti vous propose une sélection de bouquets
et compositions florales pour différentes occasions.
Parcourez notre boutique, choisissez votre création et
contactez-nous pour organiser votre commande.
Des fleurs pour toutes les occasions
Notre collection comprend notamment des bouquets
d’anniversaire, créations romantiques, roses,
compositions de mariage, bouquets de naissance
et attentions pour remercier une personne.
Les créations proposées peuvent évoluer selon
les saisons et la disponibilité des fleurs.
Livraison de fleurs à Marrakech
Nous proposons la
livraison de fleurs à Marrakech
afin de vous permettre de faire plaisir même à distance.
Une livraison peut être organisée à domicile,
dans un hôtel, un bureau, un restaurant ou sur
un lieu d’événement selon les modalités confirmées
lors de la commande.
Votre bouquet personnalisé
Vous souhaitez une création différente de celles
présentées sur la boutique ? Contactez-nous directement.
Indiquez-nous votre occasion, vos couleurs préférées,
votre style et votre budget pour que notre équipe
puisse vous orienter vers une composition adaptée.
Besoin d’aide pour votre commande ?
Livrez-vous les bouquets à Marrakech ?
Oui. Nous proposons la livraison de bouquets
et compositions florales à Marrakech.
Contactez-nous pour confirmer la date,
la zone et les modalités de livraison.
Puis-je personnaliser mon bouquet ?
Oui. Vous pouvez nous indiquer les couleurs,
le type d’occasion, le style recherché
et votre budget.
Où se trouve Fleuriste Stoti ?
Notre boutique se trouve au Quartier Assif
à Marrakech, à côté de la Pâtisserie Dar Yemma.
Puis-je faire livrer des fleurs dans un hôtel ?
Oui, sous réserve des modalités de réception
de l’établissement. Indiquez le nom de l’hôtel,
celui du destinataire et les informations utiles
au moment de la commande.
Parlons de votre prochaine création florale.
Affichage de 1–12 sur 87 résultats
