<!-- ============================================================
BANNIÈRE "SITE À VENDRE" — Mademoiselle Totebag
Copie ce bloc juste après la balise <body> de ton site.
Contact déjà pré-rempli avec contact@mademoiselle-totebag.com
============================================================ -->
<style>
:root {
--mt-bg: #fdf6f3; /* fond crème-rosé, dans l'esprit du site */
--mt-text: #4a3b3a; /* brun chaud, doux */
--mt-accent: #d88ba0; /* rose poudré signature */
--mt-accent-dark: #b96b81;
}
.mt-banner {
position: relative;
width: 100%;
background: var(--mt-bg);
border-bottom: 1px solid #f0dfe0;
color: var(--mt-text);
font-family: Georgia, "Times New Roman", serif;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
padding: 13px 20px;
box-sizing: border-box;
font-size: 15px;
z-index: 9999;
}
.mt-banner__badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--mt-accent);
color: #fff;
font-weight: 700;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 5px 11px;
border-radius: 999px;
white-space: nowrap;
}
.mt-banner__badge::before {
content: "♥";
font-size: 11px;
}
.mt-banner__text {
font-style: italic;
opacity: 0.95;
}
.mt-banner__cta {
background: var(--mt-accent-dark);
color: #fff;
border: none;
padding: 7px 18px;
border-radius: 999px;
font-size: 14px;
font-family: Georgia, serif;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: background 0.15s ease, transform 0.1s ease;
}
.mt-banner__cta:hover {
background: var(--mt-accent);
transform: translateY(-1px);
}
.mt-banner__close {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--mt-text);
opacity: 0.45;
font-size: 20px;
line-height: 1;
cursor: pointer;
padding: 4px;
font-family: serif;
}
.mt-banner__close:hover { opacity: 0.9; }
@media (max-width: 560px) {
.mt-banner { font-size: 13px; padding: 11px 36px 11px 14px; }
.mt-banner__cta { padding: 6px 14px; font-size: 13px; }
}
</style>
<div class="mt-banner" id="mt-banner">
<span class="mt-banner__badge">À vendre</span>
<span class="mt-banner__text">Mademoiselle Totebag cherche une nouvelle Mademoiselle pour continuer l'aventure — la boutique est à vendre.</span>
<a class="mt-banner__cta" href="mailto:contact@mademoiselle-totebag.com?subject=Reprise%20de%20Mademoiselle%20Totebag">En savoir plus</a>
<button class="mt-banner__close" id="mt-banner-close" aria-label="Fermer la bannière">×</button>
</div>
<script>
document.getElementById('mt-banner-close').addEventListener('click', function () {
document.getElementById('mt-banner').style.display = 'none';
});
</script>
<!-- ============================================================
BANNIÈRE "SITE À VENDRE" — Mademoiselle Totebag
Copie ce bloc juste après la balise <body> de ton site.
Contact déjà pré-rempli avec contact@mademoiselle-totebag.com
============================================================ -->
<style>
:root {
--mt-bg: #fdf6f3; /* fond crème-rosé, dans l'esprit du site */
--mt-text: #4a3b3a; /* brun chaud, doux */
--mt-accent: #d88ba0; /* rose poudré signature */
--mt-accent-dark: #b96b81;
}
.mt-banner {
position: relative;
width: 100%;
background: var(--mt-bg);
border-bottom: 1px solid #f0dfe0;
color: var(--mt-text);
font-family: Georgia, "Times New Roman", serif;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
padding: 13px 20px;
box-sizing: border-box;
font-size: 15px;
z-index: 9999;
}
.mt-banner__badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--mt-accent);
color: #fff;
font-weight: 700;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 5px 11px;
border-radius: 999px;
white-space: nowrap;
}
.mt-banner__badge::before {
content: "♥";
font-size: 11px;
}
.mt-banner__text {
font-style: italic;
opacity: 0.95;
}
.mt-banner__cta {
background: var(--mt-accent-dark);
color: #fff;
border: none;
padding: 7px 18px;
border-radius: 999px;
font-size: 14px;
font-family: Georgia, serif;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: background 0.15s ease, transform 0.1s ease;
}
.mt-banner__cta:hover {
background: var(--mt-accent);
transform: translateY(-1px);
}
.mt-banner__close {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--mt-text);
opacity: 0.45;
font-size: 20px;
line-height: 1;
cursor: pointer;
padding: 4px;
font-family: serif;
}
.mt-banner__close:hover { opacity: 0.9; }
@media (max-width: 560px) {
.mt-banner { font-size: 13px; padding: 11px 36px 11px 14px; }
.mt-banner__cta { padding: 6px 14px; font-size: 13px; }
}
</style>
<div class="mt-banner" id="mt-banner">
<span class="mt-banner__badge">À vendre</span>
<span class="mt-banner__text">Mademoiselle Totebag cherche une nouvelle Mademoiselle pour continuer l'aventure — la boutique est à vendre.</span>
<a class="mt-banner__cta" href="mailto:contact@mademoiselle-totebag.com?subject=Reprise%20de%20Mademoiselle%20Totebag">En savoir plus</a>
<button class="mt-banner__close" id="mt-banner-close" aria-label="Fermer la bannière">×</button>
</div>
<script>
document.getElementById('mt-banner-close').addEventListener('click', function () {
document.getElementById('mt-banner').style.display = 'none';
});
</script>
Il y a 19 produits.
Filtres actifs
