/* Importer la police Montserrat */
@importer l'URL (‘https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=échange’);
.hs-banner-conteneur {
largeur : 100 % ;
largeur maximale : 1 200 px ;
marge : 0 automatique ;
box-shadow : 0 15px 30px rgba(0, 0, 0, 0.08);
rayon de bordure : 12 px ;
débordement : caché ;
position : relative ;
}
.hs-bannière {
affichage : flexible ;
hauteur : 300px ;
position : relative ;
arrière-plan : dégradé linéaire (135 degrés, #1a3a2f 0 %, #2a5c46 100 %) ;
}
.hs-banner-content {
flexion : 1 ;
remplissage : 30px 40px ;
affichage : flexible ;
direction flexible : colonne ;
justifier-contenu : centre ;
couleur : blanc ;
indice z : 2 ;
position : relative ;
}
.hs-banner-image {
flexion : 1 ;
position : relative ;
débordement : caché ;
}
.hs-banner-image img {
largeur : 100 % ;
hauteur : 100 % ;
ajustement de l'objet : couverture ;
position de l'objet : centre ;
}
.hs-logo {
famille de polices : ‘Montserrat’, sans-serif;
poids de la police : 700 ;
taille de police : 36 px ;
couleur : #fff ;
marge inférieure : 15 px ;
texte-ombre : 2px 2px 0 #000 ;
}
.hs-slogan {
taille de police : 13 px ;
poids de la police : 400 ;
opacité : 0,85 ;
espacement des lettres : 1 px ;
transformation de texte : majuscule ;
marge inférieure : 20 px ;
famille de polices : ‘Montserrat’, sans-serif;
}
.hs-cta-bouton {
position : absolue ;
gauche : 54 % ;
bas : 5 % ;
transformer : traduire (-50 %, -50 %);
couleur d'arrière-plan : #e8a838 ;
couleur : #1a3a2f ;
décoration de texte : aucune ;
rembourrage : 16px 40px ;
rayon de bordure : 8 px ;
poids de la police : 700 ;
taille de police : 20 px ;
transition : toutes les 0,3 s sont faciles ;
ombre de la boîte : 0 4px 12px rgba(232, 168, 56, 0,25) ;
famille de polices : ‘Montserrat’, sans-serif;
alignement du texte : centre ;
espace blanc : nowrap ;
indice z : 10 ;
}
.hs-cta-bouton : survoler {
couleur d'arrière-plan : #f5bc4f ;
transformer : traduire (-50 %, -50 %) échelle (1,05 );
box-shadow : 0 6px 20px rgba(232, 168, 56, 0.4);
}
@media (largeur maximale : 900 px) {
.hs-bannière {
direction flexible : colonne ;
hauteur : 350 px ;
}
.hs-banner-content {
remplissage : 25px 30px ;
}
.hs-banner-image {
hauteur : 150px ;
}
.hs-cta-bouton {
gauche : 50 % ;
en haut : calc(100 % – 150px/2);
transformer : traduire (-50 %, -50 %);
remplissage : 14px 32px ;
taille de police : 18 px ;
}
.hs-cta-bouton : survoler {
transformer : traduire (-50 %, -50 %) échelle (1,05 );
}
}
@media (largeur maximale : 600 px) {
.hs-bannière {
hauteur : 300px ;
}
.hs-banner-content {
remplissage : 20px 25px ;
}
.hs-logo {
taille de police : 22 px ;
texte-ombre : 1px 1px 0 #000 ;
}
.hs-cta-bouton {
remplissage : 12px 28px ;
taille de police : 16 px ;
}
}

Boutique de la Société Humanitaire du Maroc
Chaque achat aide les animaux

Achetez maintenant

[custom_breadcrumbs]

Achetez avec cœur — Soutenez les animaux au Maroc

.shop-héros {
arrière-plan : dégradé linéaire (
vers le bas,
#69DBAA 0%,
#5AC79A 100%
);
alignement du texte : centre ;
remplissage : 100px 20px ;
}
.shop-héros h1 {
couleur : #0E1A17 ;
taille de police : 32 px ;
poids de la police : 700 ;
}
.shop-héros p {
couleur : #1A1A1A ;
taille de police : 20 px ;
hauteur de ligne : 1,5 ;
largeur maximale : 900 px ;
marge : 0 auto 20px ;
}
.shop-hero .cta-btn {
arrière-plan : #AB1B2E ;
couleur : #fff !important;
remplissage : 14px 36px ;
rayon de bordure : 6 px ;
taille de police : 18 px ;
poids de la police : 600 ;
}

Chaque achat que vous effectuez soutient directement le sauvetage, les soins et le bien-être des animaux à travers le Maroc.

Avec nos partenaires de confiance, redonner au suivant se fait sans effort : achetez les choses que vous aimez et faites la différence dès aujourd'hui.

Ensemble, nous faisons avancer la compassion.

Achetez maintenant — Aidez-nous aujourd'hui →

Panier

💬 Ce que disent nos supporters

«J'aime savoir que mes achats soutiennent de véritables sauvetages d'animaux errants.» — Sarah M. (Royaume-Uni)
"Chaque commande donne l'impression d'aider un chien ou un chat dans le besoin." — Jonas L. (Allemagne)
"La qualité est excellente et la mission qui la sous-tend la rend encore meilleure." — Amina R. (France)
"Je parle de ce magasin à tous mes amis : c'est du shopping qui a un but." — Emily P. (États-Unis)
« De beaux objets et une cause encore plus belle ! » — Chloé B. (France)
"C'est bien de savoir que mon don nourrit également les animaux sauvés." — Marco D. (Italie)
"Le paiement a été facile et j'aime l'histoire derrière chaque produit." — Layla S. (EAU)
« Soutenir le traitement humain des animaux lors des courses – parfait. » —Thomas K. (Canada)
"Shopping pour une bonne cause. Je reviendrai!" — Nadia T. (Espagne)
"Chaque achat est comme un petit acte de gentillesse." — Helen F. (Australie)

/* ================================
SPA DU MAROC – Témoignages
================================ */
.hsm-témoignages {
alignement du texte : centre ;
marge : 70px automatique ;
largeur maximale : 850 px ;
remplissage : 50px 25px ;
arrière-plan : #fff7f8 ;
bordure : 2px solide #f0d4d7 ;
rayon de bordure : 18 px ;
ombre de la boîte : 0 4px 18px rgba(171, 28, 45, 0,08) ;
famille de polices : « Poppins », « Ouvrir Sans », sans-serif;
}
.hsm-témoignages h2 {
taille de police : 1,8rem ;
couleur : #ab1c2d ;
poids de la police : 700 ;
marge inférieure : 25 px ;
espacement des lettres : 0,3 px ;
}
.témoignage-carrousel {
position : relative ;
débordement : caché ;
hauteur : 100px ;
affichage : flexible ;
align-items : centre ;
justifier-contenu : centre ;
}
.témoignage-élément {
position : absolue ;
largeur : 100 % ;
opacité : 0 ;
transition : opacité 1, facilité d'entrée et de sortie ;
taille de police : 1.1rem ;
couleur : #444 ;
style de police : italique ;
hauteur de ligne : 1,5 ;
remplissage : 0 15px ;
}
.témoignage-item.active {
opacité : 1 ;
}
/* Tailles de police adaptatives */
@media (largeur maximale : 768 px) {
.hsm-témoignages {
remplissage : 40px 20px ;
}
.hsm-témoignages h2 {
taille de police : 1,5rem ;
}
.témoignage-élément {
taille de police : 1rem ;
}
}