). Desktop inchangé (reste position:fixed, règle de
base plus haut dans ce fichier, sa position dans le DOM n'a pas d'effet
sur son rendu desktop). */
.ets_wa_whatsapp_block {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
width: auto !important;
height: auto !important;
display: flex !important;
justify-content: center;
margin: 16px auto;
}
.ets_wa_whatsapp_block a {
position: relative !important;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100% !important;
max-width: 320px !important;
min-height: 44px;
box-sizing: border-box;
background: #25D366;
color: #fff;
font-family: "Instrument Sans", sans-serif;
font-weight: 700;
font-size: 14px;
padding: 10px 16px;
border-radius: 100px;
text-decoration: none;
box-shadow: 0 4px 14px rgba(0,0,0,.10);
}
.ets_wa_whatsapp_block a img {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
width: 18px !important;
height: 18px !important;
margin: 0 !important;
}
.ets_wa_whatsapp_block .ets_wa_title {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #fff !important;
font-family: "Instrument Sans", sans-serif !important;
font-weight: 700 !important;
font-size: 14px !important;
line-height: 1.3 !important;
}
}
/* ===== BADGE AVIS : container + croix de fermeture ===== */
#rating-badge-container {
position: fixed;
bottom: 125px;
right: 12px;
z-index: 9999;
}
/* Le badge lui-même n'est plus fixed, c'est le container qui l'est */
#rating-badge-container .rating-badge {
position: relative;
bottom: auto;
right: auto;
z-index: auto;
}
/* Clone home (au-dessus du hero, home.js initRatingBadgeInline) : masqué par
défaut — donc sur desktop et tablette. Réaffiché uniquement en mobile via la
règle @media (max-width:767px) ci-dessous (id partagé avec l'original) +
affinage dans responsive.css. */
#rating-badge-container.ml-rating-inline {
display: none;
}
#rating-badge-close {
display: none;
}
/* Mobile : badge repositionné par header.tpl juste au-dessus de la ligne
copyright, sur TOUTES les pages (demande 17/08/2026). Passe d'un badge
flottant/vertical à un bandeau horizontal dans le flux normal de la page.
Desktop : aucun changement, le badge reste position:fixed (règle plus haut) —
sa position dans le DOM n'affecte pas son rendu desktop. */
@media (max-width: 767px) {
#rating-badge-container {
position: static;
right: auto;
left: auto;
bottom: auto;
transform: none;
display: flex;
justify-content: center;
align-items: center;
margin: 16px auto;
padding: 0 16px;
}
#rating-badge-container .rating-badge {
flex-direction: row;
align-items: center;
justify-content: center;
gap: 8px;
width: 100% !important;
max-width: 320px !important;
min-height: 44px;
padding: 10px 14px;
border-radius: 100px;
background: #fff;
border: 1px solid rgba(0,0,0,.08);
backdrop-filter: none;
box-shadow: 0 4px 14px rgba(0,0,0,.10);
box-sizing: border-box;
}
#rating-badge-container .rating-line1,
#rating-badge-container .rating-line2 {
white-space: nowrap;
}
#rating-badge-container .rating-line2 {
color: #8b8b8b;
font-size: 12px;
}
/* La croix de fermeture (#rating-badge-close) est désormais masquée en toutes
circonstances (display:none, règle plus haut) — plus besoin de règle mobile
dédiée ici. */
/* Spécificité : la règle desktop #rating-badge-container.ml-rating-inline
{display:none} a la même spécificité (1 id + 1 classe) que le display:flex
ci-dessus (1 id seul, donc moins spécifique) — sans cette ligne, le clone
resterait caché même en mobile. */
#rating-badge-container.ml-rating-inline {
display: flex;
}
}
.product-flag.out_of_stock {
background-color: #999999 !important;
}
/* Google Translate widget */
.goog-te-gadget-simple{border-radius:14px!important;border:1px solid #ddd!important;padding:2px 6px!important;background:transparent!important;}.goog-te-gadget-simple a{color:#555!important;text-decoration:none!important;}
/* Alignement vertical des boutons radio + logos de paiement (fix lignes PayPal) */
.payment-options .payment-option {
display: flex;
align-items: baseline;
}
.payment-options .payment-option .custom-radio.float-xs-left {
float: none;
flex: 0 0 auto;
position: relative;
top: 5px;
}
.payment-options .payment-option label img {
vertical-align: middle;
}
.payment-options .payment-option .paypal-mark {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
vertical-align: middle;
}
/* ============================================================
MesLacets.fr — Styles HOME native (à coller dans theme.css)
Sections : hero, bestsellers, intro, promo fidélité, carrousel.
Police : Sarala (auto-hébergée), tout le corps de texte unifié dessus. Marque #fd0065.
Système typo : H1 32px/600 rose · H2 27px/600 rose · H3 20px/700 #232323 ·
corps 16px/400 #232323 lh1.6 justifié · secondaire 14px/400 #555 lh1.5.
============================================================ */
/* Règles RESPONSIVE (@media) de ces sections déplacées dans responsive.css le 17/08/2026. */
/* ===== 1. HERO ===== */
.ml-hero { max-width: 1110px; margin: 0 auto; padding: 8px 16px 24px; }
.ml-hero__title { font-family: "Instrument Sans", sans-serif; font-size:32px; font-weight:500; color:#fd0065; line-height:1.15; margin:0 0 20px; }
.ml-hero__title-short { display: none; }
.ml-hero__grid { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; grid-template-rows:300px 300px; gap:20px;
grid-template-areas:"big big s1 s2" "big big wide wide"; }
.ml-hero__tile--big { grid-area:big; } .ml-hero__tile--s1 { grid-area:s1; }
.ml-hero__tile--s2 { grid-area:s2; } .ml-hero__tile--wide { grid-area:wide; }
.ml-hero__tile { position:relative; display:block; overflow:hidden; background-size:cover; background-position:50% 50%;
border-radius:4px; text-decoration:none; transition:transform .3s ease; }
.ml-hero__tile:hover { transform:scale(1.015); }
.ml-hero__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; z-index:0; }
.ml-hero__tile::before { content:""; position:absolute; inset:0; z-index:0;
background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 45%); pointer-events:none; }
.ml-hero__overlay { position:relative; z-index:1; padding:22px 24px; text-align:right;
display:flex; flex-direction:column; height:100%; box-sizing:border-box; }
.ml-hero__name { font-family: "Instrument Sans", sans-serif; font-weight:500; color:#fd0065; font-size:54px; line-height:1.05; margin:0; text-shadow:0 1px 6px rgba(0,0,0,.25); }
.ml-hero__tag { font-family: "Instrument Sans", sans-serif; font-weight:600; color:#fff; font-size:16px; margin:4px 0 0; text-shadow:0 1px 4px rgba(0,0,0,.4); }
.ml-hero__count { font-family: "Instrument Sans", sans-serif; color:#fff; font-size:13px; margin:auto 0 0; opacity:.95; line-height:1.3;
background:rgba(40,40,40,.55); padding:5px 10px; border-radius:4px; display:inline-block; align-self:flex-end; }
.ml-hero__tile--s1 .ml-hero__name, .ml-hero__tile--s2 .ml-hero__name { font-size:28px; }
.ml-hero__tile--s1 .ml-hero__count, .ml-hero__tile--s2 .ml-hero__count { font-size:12px; }
/* ===== 1bis. RÉASSURANCE RAPIDE (mobile only, sous le hero) ===== */
.ml-trust-mobile { display: none; }
.ml-trust-mobile__item { text-align: center; }
.ml-trust-mobile__icon { width: 28px; height: 28px; margin: 0 auto 6px; color: #fd0065; }
.ml-trust-mobile__label { font-family: "Instrument Sans", sans-serif; font-size: 11.5px; font-weight: 700; line-height: 1.3; color: #232323; }
/* ===== 2. BESTSELLERS ===== */
.ml-bestsellers { max-width:1110px; margin:0 auto; padding:24px 16px; }
.ml-bestsellers__heading { font-family: "Instrument Sans", sans-serif; font-size:27px; font-weight:500; color:#fd0065; margin:0 0 20px; text-align:left; }
.ml-bestsellers__grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.ml-product { display:flex; flex-direction:column; align-items:center; text-decoration:none; color:inherit;
padding:12px; border:1px solid #DADADA; border-radius:4px; background:#fff; transition:transform .2s ease, box-shadow .2s ease; }
.ml-product:hover { transform:translateY(-3px); box-shadow:0 2px 8px rgba(0,0,0,.06); }
.ml-product__imgwrap { width:100%; aspect-ratio:1/1; overflow:hidden; border-radius:4px; background:#f7f7f7; }
.ml-product__imgwrap img { width:100%; height:100%; object-fit:cover; display:block; }
.ml-product__name { font-family: "Instrument Sans", sans-serif; font-size:14px; font-weight:700; color:#232323; text-align:center; margin-top:10px; line-height:1.25; }
.ml-product__price { font-family: "Instrument Sans", sans-serif; font-size:16px; font-weight:400; color:#232323; margin-top:4px; }
/* ===== 3. INTRO / UNIVERS ===== */
.ml-intro { max-width:1110px; margin:0 auto 24px; padding:0 16px; }
.ml-intro__heading { font-family: "Instrument Sans", sans-serif; font-size:27px; font-weight:500; color:#fd0065; margin:0 0 20px; text-align:left; }
.ml-intro__cols { display:grid; grid-template-columns:7fr 3fr; gap:32px; align-items:center; }
.ml-intro__subtitle { font-family: "Instrument Sans", sans-serif; font-size:20px; font-weight:700; color:#232323; margin:0 0 12px; }
.ml-intro__text p { font-family: "Instrument Sans", sans-serif; font-size:16px; color:#232323; line-height:1.6; margin:0 0 14px; text-align:justify; }
.ml-intro__text a { color:#fd0065; text-decoration:underline; }
.ml-intro__text a:hover { text-decoration:none; }
.ml-intro__media a { display:block; }
.ml-intro__note { font-size:12px !important; color:#888 !important; font-style:italic; }
.ml-intro__media { text-align:center; }
.ml-intro__media img { max-width:320px; width:100%; height:auto; border-radius:4px; display:block; margin:0 auto; }
/* ===== 4. PROMO FIDÉLITÉ (mobile only) ===== */
.ml-promo-fidelite { display:none; }
/* ===== 5. CARROUSEL PROMO (desktop + tablette) ===== */
.ml-carousel { position:relative; max-width:1110px; margin:0 auto; padding:16px; }
.ml-carousel__viewport { overflow:hidden; border-radius:4px; }
.ml-carousel__track { display:flex; transition:transform .5s ease; }
.ml-carousel__slide { flex:0 0 100%; display:block; text-decoration:none; }
.ml-carousel__slide img { width:100%; height:auto; display:block; }
.ml-carousel__nav { position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border:0;
background:rgba(255,255,255,.7); color:#fd0065; font-size:30px; line-height:1; cursor:pointer; padding:0; z-index:2; border-radius:50%; transition:background .2s; }
.ml-carousel__nav:hover { background:#fff; }
.ml-carousel__nav--prev { left:22px; } .ml-carousel__nav--next { right:22px; }
.ml-carousel__dots { display:flex; justify-content:center; gap:8px; margin-top:12px; }
.ml-carousel__dot { width:9px; height:9px; border-radius:50%; border:0; padding:0; background:#cfcfcf; cursor:pointer; transition:background .2s; }
.ml-carousel__dot.is-active { background:#fd0065; }
/* ===== 6. COMPTEURS ===== */
.ml-counters { max-width:1110px; margin:0 auto; padding:24px 16px; }
.ml-counters__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:center; }
.ml-counter { display:flex; flex-direction:column; align-items:center; }
.ml-counter__num { font-family: "Instrument Sans", sans-serif; font-size:59px; font-weight:600; color:#232323; line-height:1.1; }
.ml-counter__label { font-family: "Instrument Sans", sans-serif; font-size:19px; font-weight:400; color:#fd0065; margin-top:4px; }
.ml-counter__label-short { display: none; }
/* ===== 7. TROIS BONNES RAISONS ===== */
.ml-raisons { max-width:1110px; margin:0 auto; padding:24px 16px; }
.ml-raisons__heading { font-family: "Instrument Sans", sans-serif; font-size:27px; font-weight:500; color:#fd0065; margin:0 0 24px; text-align:left; }
.ml-raisons__grid { display:flex; flex-direction:column; gap:24px; }
.ml-raison { display:flex; align-items:flex-start; gap:18px; text-align:left; }
.ml-raison__icon { color:#818A91; flex:0 0 auto; display:inline-flex; margin-top:2px; }
.ml-raison__body { flex:1; max-width:760px; }
.ml-raison__title { font-family: "Instrument Sans", sans-serif; font-size:17px; font-weight:700; color:#232323; margin:0 0 6px; line-height:1.3; }
.ml-raison__text { font-family: "Instrument Sans", sans-serif; font-size:16px; color:#232323; line-height:1.6; margin:0; text-align:justify; }
/* ===== 8. TÉMOIGNAGES CLIENTS ===== */
.ml-temoins { max-width:1110px; margin:0 auto; padding:24px 16px; }
.ml-temoins__heading { font-family: "Instrument Sans", sans-serif; font-size:27px; font-weight:500; color:#fd0065; margin:0 0 24px; text-align:left; }
.ml-temoins__viewport { overflow:hidden; }
.ml-temoins__track { display:flex; transition:transform .5s ease; }
.ml-temoins__slide { flex:0 0 33.3333%; box-sizing:border-box; padding:0 10px; }
.ml-temoins__card { border:1px solid #DADADA; border-radius:6px; padding:20px; height:100%; box-sizing:border-box; background:#fff; }
.ml-temoins__stars { color:#fd0065; font-size:15px; letter-spacing:2px; margin-bottom:10px; }
.ml-temoins__text { font-family: "Instrument Sans", sans-serif; font-size:15px; color:#232323; line-height:1.5; margin:0 0 12px; text-align:justify; }
.ml-temoins__author { font-family: "Instrument Sans", sans-serif; font-size:14px; font-weight:700; color:#232323; margin:0; }
.ml-temoins__nav { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:18px; }
.ml-temoins__arrow { width:36px; height:36px; border:0; background:rgba(0,0,0,.05); color:#fd0065; font-size:26px; line-height:1; cursor:pointer; border-radius:50%; transition:background .2s; }
.ml-temoins__arrow:hover { background:rgba(0,0,0,.1); }
.ml-temoins__dots { display:flex; gap:8px; }
.ml-temoins__dot { width:9px; height:9px; border-radius:50%; border:0; padding:0; background:#cfcfcf; cursor:pointer; transition:background .2s; }
.ml-temoins__dot.is-active { background:#fd0065; }
/* Masquer le carrousel d'avis du module footer UNIQUEMENT sur la home
(les témoignages y sont déjà affichés dans le corps via .ml-temoins).
Le module reste visible sur toutes les autres pages. */
body#index .ml-avis { display: none; }
/* ===== 9. PARCOUREZ NOTRE GAMME (6 catégories) ===== */
.ml-gamme { max-width:1110px; margin:0 auto; padding:24px 16px; }
.ml-gamme__heading { font-family: "Instrument Sans", sans-serif; font-size:27px; font-weight:500; color:#fd0065; margin:0 0 20px; text-align:left; }
.ml-gamme__heading-short { display: none; }
.ml-gamme__cats { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.ml-gamme__cat { display:flex; flex-direction:column; align-items:center; text-decoration:none; }
.ml-gamme__thumb { display:block; width:100%; aspect-ratio: 3 / 2; border:1px solid #fd0065; border-radius:4px; overflow:hidden; box-sizing:border-box; }
.ml-gamme__thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease; }
.ml-gamme__cat:hover .ml-gamme__thumb img { transform:scale(1.05); }
.ml-gamme__label { font-family: "Instrument Sans", sans-serif; font-size:14px; color:#fd0065; text-align:center; margin-top:10px; line-height:1.3; }
/* ===== 10. DÉCOUVREZ NOS DERNIÈRES PUBLICATIONS (6 articles) ===== */
.ml-publications { max-width:1110px; margin:0 auto; padding:24px 16px; }
.ml-publications__heading { font-family: "Instrument Sans", sans-serif; font-size:27px; font-weight:500; color:#fd0065; margin:0 0 24px; text-align:left; }
.ml-publications__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px 24px; }
.ml-publi { display:flex; gap:14px; align-items:flex-start; }
.ml-publi__img { flex:0 0 104px; display:block; }
.ml-publi__img img { width:104px; height:auto; display:block; }
.ml-publi__body { flex:1; min-width:0; }
.ml-publi__title { font-family: "Instrument Sans", sans-serif; font-size:15px; font-weight:700; line-height:1.25; margin:0 0 6px; }
.ml-publi__title a { color:#232323; text-decoration:none; }
.ml-publi__title a:hover { color:#fd0065; }
.ml-publi__excerpt { font-family: "Instrument Sans", sans-serif; font-size:14px; color:#555; line-height:1.5; margin:0 0 8px; }
.ml-publi__more { font-family: "Instrument Sans", sans-serif; font-size:13px; font-weight:700; color:#fd0065; text-decoration:none; }
.ml-publi__more:hover { text-decoration:underline; }
.ml-publications__all { display:block; text-align:right; margin-top:24px; font-family: "Instrument Sans", sans-serif; font-size:16px; font-weight:700; color:#fd0065; text-decoration:none; }
.ml-publications__all:hover { text-decoration:underline; }
/* ===== 10bis. PUBLICATIONS — mobile only : titre condensé + carrousel =====
Injectés en DOM par home.js (initPublicationsMobile), juste après le
titre/la grille d'origine générés par le hook displayHome (module
mlpublications) : un en-tête mobile ("Guides & conseils" + "Tout voir")
et un carrousel des 5 premières publications, sur le même schéma que
.ml-temoins (piste + flèches + points). Masqués par défaut (desktop) ;
affichés uniquement en mobile, qui masque en retour titre/grille d'origine
(cf. responsive.css). */
.ml-publications__head-mobile { display: none; }
.ml-publications__heading-mobile {
font-family: "Instrument Sans", sans-serif;
font-size: 23px;
font-weight: 500;
color: #fd0065;
margin: 0;
}
.ml-publications__all-mobile {
font-family: "Instrument Sans", sans-serif;
font-size: 13px;
font-weight: 700;
color: #fd0065;
text-decoration: none;
white-space: nowrap;
}
.ml-publications__all-mobile:hover { text-decoration: underline; }
.ml-publications__carousel { display: none; position: relative; }
.ml-publications__viewport { overflow: hidden; border-radius: 4px; }
.ml-publications__track { display: flex; transition: transform .5s ease; }
.ml-publications__slide { flex: 0 0 100%; display: block; text-decoration: none; color: inherit; }
.ml-publications__imgwrap {
display: block;
width: 100%;
aspect-ratio: 313/300;
overflow: hidden;
border-radius: 4px;
border: 1px solid #fd0065;
background: #f7f7f7;
}
.ml-publications__imgwrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ml-publications__title-mobile {
font-family: "Instrument Sans", sans-serif;
font-size: 14px;
font-weight: 700;
color: #232323;
line-height: 1.35;
margin: 10px 4px 0;
}
.ml-publications__nav {
position: absolute;
top: 40%;
transform: translateY(-50%);
width: 34px;
height: 34px;
border: 0;
background: rgba(255,255,255,.85);
color: #fd0065;
font-size: 26px;
line-height: 1;
cursor: pointer;
padding: 0;
z-index: 2;
border-radius: 50%;
box-shadow: 0 1px 6px rgba(0,0,0,.15);
}
.ml-publications__nav--prev { left: 6px; }
.ml-publications__nav--next { right: 6px; }
.ml-publications__dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.ml-publications__dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: #cfcfcf; cursor: pointer; }
.ml-publications__dot.is-active { background: #fd0065; }
/* ===== 11. LA PETITE HISTOIRE DE MESLACETS ===== */
.ml-histoire { max-width:1110px; margin:0 auto; padding:24px 16px; }
.ml-histoire__heading { font-family: "Instrument Sans", sans-serif; font-size:27px; font-weight:500; color:#fd0065; margin:0 0 20px; text-align:left; }
.ml-histoire__cols { display:grid; grid-template-columns:200px 1fr; gap:40px; align-items:start; }
.ml-histoire__cale { display:flex; flex-direction:column; align-items:center; justify-content:center; padding-top:8px; border-right:2px solid #f0d2de; }
.ml-histoire__depuis { font-family: "Instrument Sans", sans-serif; font-size:18px; font-weight:400; color:#232323; letter-spacing:2px; text-transform:uppercase; }
.ml-histoire__annee { font-family: "Instrument Sans", sans-serif; font-size:72px; font-weight:700; color:#fd0065; line-height:1; }
.ml-histoire__text { max-width:820px; }
.ml-histoire__text p { font-family: "Instrument Sans", sans-serif; font-size:16px; color:#232323; line-height:1.6; margin:0 0 14px; text-align:justify; }
.ml-histoire__chute { font-weight:700; color:#fd0065 !important; }
/* ===== 11bis. HISTOIRE — mobile only : label condensé + révélation du texte =====
.ml-histoire__depuis-mobile ("Notre histoire") remplace "depuis" en mobile
uniquement (cf. responsive.css) ; .ml-histoire__more (paragraphes 2 à 9) est
masqué par défaut en mobile et révélé au clic sur .ml-histoire__link
(home.js, initHistoireToggle) — pas de navigation, juste une révélation en
place, comme demandé. Sur desktop, tout reste visible sans changement. */
.ml-histoire__depuis-mobile { display: none; }
.ml-histoire__link {
display: none;
align-items: center;
gap: 6px;
margin: 0 0 14px;
background: none;
border: 0;
padding: 0;
font-family: "Instrument Sans", sans-serif;
font-size: 14px;
font-weight: 700;
color: #fd0065;
cursor: pointer;
}
.ml-histoire__link svg { flex: 0 0 auto; }
.ml-histoire__link:hover { text-decoration: underline; }
.ml-histoire__link.is-hidden { display: none !important; }
/* ===== 12. FAQ — VOS QUESTIONS LES PLUS FRÉQUENTES ===== */
.ml-faq { max-width:1110px; margin:0 auto; padding:24px 16px; }
.ml-faq__heading { font-family: "Instrument Sans", sans-serif; font-size:27px; font-weight:500; color:#fd0065; margin:0 0 20px; text-align:left; }
.ml-faq__heading-short { display: none; }
.ml-faq__cta {
display: none;
margin: 16px auto 0;
background: none;
border: 0;
padding: 0;
font-family: "Instrument Sans", sans-serif;
font-size: 14px;
font-weight: 700;
color: #fd0065;
cursor: pointer;
}
.ml-faq__cta:hover { text-decoration: underline; }
.ml-faq__cta.is-hidden { display: none !important; }
.ml-faq__list { display:grid; grid-template-columns:1fr 1fr; column-gap:48px; align-items:start; }
.ml-faq__item { border-bottom:1px solid #e7e7e7; }
/* en 2 colonnes : bordure haute sur les 2 premiers items (un par colonne) */
.ml-faq__list > .ml-faq__item:nth-child(1),
.ml-faq__list > .ml-faq__item:nth-child(2) { border-top:1px solid #e7e7e7; }
.ml-faq__q {
font-family: "Instrument Sans", sans-serif; font-size:17px; font-weight:500; color:#232323;
list-style:none; cursor:pointer; padding:18px 44px 18px 4px; position:relative;
transition:color .2s ease;
}
.ml-faq__q::-webkit-details-marker { display:none; }
.ml-faq__q:hover { color:#fd0065; }
/* chevron */
.ml-faq__q::after {
content:""; position:absolute; right:8px; top:50%; width:10px; height:10px;
border-right:2px solid #fd0065; border-bottom:2px solid #fd0065;
transform:translateY(-65%) rotate(45deg); transition:transform .3s ease;
}
.ml-faq__item[open] .ml-faq__q { color:#fd0065; }
.ml-faq__item[open] .ml-faq__q::after { transform:translateY(-35%) rotate(225deg); }
/* contenu : animation d'ouverture douce via grid-template-rows */
.ml-faq__a {
display:grid; grid-template-rows:1fr; overflow:hidden;
}
.ml-faq__a > p {
font-family: "Instrument Sans", sans-serif; font-size:16px; color:#232323; line-height:1.6;
margin:0; padding:0 44px 20px 4px; min-height:0; text-align:justify;
}
.ml-faq__a a { color:#fd0065; text-decoration:underline; }
/* repli animé : on s'appuie sur details[open] pour la transition d'apparition */
.ml-faq__item:not([open]) .ml-faq__a { display:none; }
/* ===== 13. NOUS TROUVER & NOUS CONTACTER ===== */
.ml-contact { max-width:1110px; margin:0 auto; padding:24px 16px; }
.ml-contact__cols { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:stretch; }
/* filet vertical : sur la colonne gauche étirée en pleine hauteur */
.ml-contact__map { padding-right:48px; border-right:1px solid #DADADA; }
.ml-contact__heading { font-family: "Instrument Sans", sans-serif; font-size:27px; font-weight:500; color:#fd0065; margin:0 0 18px; text-align:left; line-height:1.2; }
/* --- bloc carte --- */
.ml-contact__mapwrap { border-radius:6px; overflow:hidden; box-shadow:0 1px 6px rgba(0,0,0,.08); }
.ml-contact__mapwrap iframe { display:block; width:100%; height:340px; border:0; }
.ml-contact__addr { font-family: "Instrument Sans", sans-serif; font-size:15px; color:#555; margin:12px 0 0; line-height:1.55; }
/* --- bloc formulaire : grille Bootstrap neutralisée, layout vertical resserré --- */
.ml-contact__form h3 { display:none; } /* masque le titre "Contactez-nous" du widget natif */
.ml-contact__form .form-group.row { display:block; margin:0 0 10px; }
.ml-contact__form .form-control-label,
.ml-contact__form label {
display:block; width:auto; float:none; text-align:left !important;
font-family: "Instrument Sans", sans-serif; font-size:14px; font-weight:600; color:#232323;
margin:0 0 4px; padding:0; max-width:none;
}
.ml-contact__form [class*="col-md-"],
.ml-contact__form [class*="offset-md-"],
.ml-contact__form [class*="col-md-offset-"] {
width:100% !important; max-width:100% !important; margin-left:0 !important; padding:0 !important; flex:0 0 100% !important;
}
.ml-contact__form .form-control,
.ml-contact__form input[type=email],
.ml-contact__form input[type=text],
.ml-contact__form select,
.ml-contact__form textarea {
font-family: "Instrument Sans", sans-serif; font-size:15px; color:#232323;
border:1px solid #cfcfcf; border-radius:4px; padding:7px 11px; width:100%; box-sizing:border-box; background:#fff; line-height:1.3;
}
.ml-contact__form .form-control:focus,
.ml-contact__form textarea:focus,
.ml-contact__form select:focus { outline:none; border-color:#fd0065; box-shadow:0 0 0 2px rgba(253,0,101,.12); }
.ml-contact__form textarea { min-height:96px; resize:vertical; }
.ml-contact__form .custom-file-input,
.ml-contact__form label.btn,
.ml-contact__form .btn-file {
font-family: "Instrument Sans", sans-serif; font-size:13px; font-weight:700; background:#fd0065; color:#fff;
border:0; border-radius:4px; padding:7px 14px; cursor:pointer;
}
.ml-contact__form .form-control-comment { font-family: "Instrument Sans", sans-serif; font-size:13px; color:#888; margin-top:3px; }
.ml-contact__form .captcha_contact label { margin-bottom:8px; }
.ml-contact__form .form-footer { margin-top:14px; text-align:left; }
.ml-contact__form button[type=submit],
.ml-contact__form input[type=submit] {
font-family: "Instrument Sans", sans-serif; font-size:16px; font-weight:700;
background:#fd0065; color:#fff; border:0; border-radius:4px; padding:11px 30px; cursor:pointer;
transition:background .2s ease; text-transform:none;
}
.ml-contact__form button[type=submit]:hover,
.ml-contact__form input[type=submit]:hover { background:#d80056; }
.ml-contact__form input[name=url] { position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important; }
/* ============================================================
MesLacets — Alternance de fonds des sections de la home
------------------------------------------------------------
Objectif : rythmer la page (blanc / gris clair), en commençant
et finissant par du blanc. Découpage par GROUPES logiques.
Particularité du thème Classic : le conteneur .ml-home (.page-home)
est limité à max-width 1110px. Pour une bande PLEINE LARGEUR sans
élargir l'élément ni créer de scroll horizontal, on étend la couleur
latéralement via box-shadow 100vw + clip-path. Validé en live :
aucun scroll horizontal.
À coller dans theme.css. Aucune dépendance, aucun changement de
structure HTML.
============================================================ */
:root { --ml-bg-gris: #F7F7F7; }
/* Full-bleed : étend le fond gris jusqu'aux bords de l'écran.
box-shadow peint 100vw de chaque côté ; clip-path coupe en haut/bas
pour que l'ombre ne déborde pas verticalement sur les voisins. */
body#index .ml-carousel,
body#index .ml-counters,
body#index .ml-temoins,
body#index .ml-histoire {
background: var(--ml-bg-gris);
box-shadow: 0 0 0 100vw var(--ml-bg-gris);
clip-path: inset(0 -100vw);
position: relative;
}
/* Jointure de deux blocs gris contigus (carousel + counters) :
les deux clip-path arrondis à la même coordonnée sous-pixel laissent
un filet blanc d'1px. Correctif : le bloc du HAUT (carousel) étend sa
découpe d'1px vers le BAS uniquement (4e valeur de inset = bottom),
pour recouvrir la jointure. Son bord supérieur reste net (voisin blanc
ml-intro), et la mise en page n'est pas décalée (peinture seule). */
body#index .ml-carousel {
clip-path: inset(0 -100vw -1px -100vw);
}
/* ------------------------------------------------------------
Découpage des zones (commence et finit en BLANC) :
Zone 1 — BLANC : ml-hero · ml-bestsellers · ml-intro
Zone 2 — GRIS : ml-carousel · ml-counters
Zone 3 — BLANC : ml-raisons
Zone 4 — GRIS : ml-temoins (cartes bordées ressortent)
Zone 5 — BLANC : ml-gamme · ml-publications
Zone 6 — GRIS : ml-histoire
Zone 7 — BLANC : ml-faq · ml-contact (/ ml-maps)
Les sections blanches n'ont aucune règle : fond par défaut.
------------------------------------------------------------ */
/* ============================================================
MesLacets — Espace bas de footer sur MOBILE
------------------------------------------------------------
Problème : sur mobile, les badges flottants (bouton WhatsApp
« Nous contacter », fixé bottom:0 ~99px, et la pastille note
client « Noté 4.6 sur 5 ») recouvrent les dernières lignes du
footer (bloc SARL FOOLS, crédits « 24/33 – Hoodspot »).
Solution : réserver 100px d'espace sous le footer en mobile,
pour que ces lignes passent au-dessus de l'encombrement des
badges. Aucun effet sur desktop (marge latérale suffisante).
À coller dans theme.css.
============================================================ */
/* ============================================================
MesLacets — Mise en page structuree des descriptions de categories
Titres cales sur la home (.ml-intro), corps 15px (allure filles),
bandeau + grille de longueurs + bloc guide. Icones SVG inline.
A integrer dans theme.css. S'applique a TOUTES les categories
dont la description est enveloppee dans