(classe ajoutée par template.php selon ?page=). ===================================================================== */ .page-filtre { --ml-vert: #2D5947; --ml-vert-nuit: #16302a; --ml-rouge: #EB423F; --ml-creme: #f6f5f2; --ml-texte: #222222; --ml-doux: #5f5f5f; --ml-bordure: #e6e3dd; --ml-rayon: 14px; font-family: "Roboto", "Helvetica Neue", Arial, sans-serif; } /* Toutes les pages de la refonte (#page reçoit une classe page-… quand $refonte) : contenu aligné sur le header et le pied de page (styleXav.css met .container à 1500 px avec 15 px de marge intérieure, le header / pied de page sont à 1440 px avec 24 px) */ #page[class*="page-"] .container { max-width: 1440px; padding-left: 24px; padding-right: 24px; } @media (max-width: 767.98px) { #page[class*="page-"] .container { padding-left: 14px; padding-right: 14px; } } /* ---------- Fil d'Ariane ---------- */ .page-filtre .breadcrumb { margin: 0 0 18px; padding: 0; background: none; font-size: 13px; color: var(--ml-doux); } .page-filtre .breadcrumb-item + .breadcrumb-item::before { content: "›"; color: #b5b1a8; } .page-filtre .breadcrumb a { color: var(--ml-doux); } .page-filtre .breadcrumb a:hover { color: var(--ml-vert); } /* ---------- Titre + introduction ---------- */ .page-filtre h1 { margin: 0 0 12px; font-size: clamp(26px, 3vw, 38px); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: var(--ml-texte); } .page-filtre h1 + p { max-width: 980px; margin-bottom: 26px; font-size: 15px; line-height: 1.65; color: var(--ml-doux); } /* ---------- Bloc pointures (en haut) ---------- */ .page-filtre > .container > .row > .filtre, .page-filtre .row > .filtre { width: 100%; margin: 0 15px 8px; padding: 20px 24px 14px; background: var(--ml-creme); border: 1px solid var(--ml-bordure); border-radius: 18px; } .page-filtre .filtre h4, .page-filtre .div_filtre h4 { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ml-vert); } /* Pointures en capsules : la grille col-6 / col-md-3 devient une rangée qui passe à la ligne, la case iCheck est masquée (le clic sur le label la coche toujours : ifClicked inchangé) */ .page-filtre .row > .filtre .col-md-9 > .row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } .page-filtre .row > .filtre .col-md-9 > .row > div { flex: 0 0 auto; width: auto; max-width: none; padding: 0; } .page-filtre .row > .filtre label { position: relative; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 8px 16px; font-size: 13.5px; line-height: 1.2; white-space: nowrap; background: #fff; border: 1px solid var(--ml-bordure); border-radius: 999px; cursor: pointer; user-select: none; transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease; } .page-filtre .row > .filtre .element_filtre1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; } .page-filtre .row > .filtre label:hover { border-color: var(--ml-vert); box-shadow: 0 2px 8px rgba(0, 0, 0, .06); } .page-filtre .row > .filtre label:has(.focus) { outline: 2px solid var(--ml-vert); outline-offset: 2px; } .page-filtre .row > .filtre label:has(.checked) { background: var(--ml-vert); border-color: var(--ml-vert); color: #fff; } .page-filtre .row > .filtre label:has(.checked) small { color: rgba(255, 255, 255, .8); } .page-filtre .row > .filtre label:has(.checked) .element_filtre::before { content: "\2713"; margin-right: 6px; font-weight: 700; } .page-filtre .element_filtre, .page-filtre .element_filtre1 { width: auto; margin: 0; } .page-filtre .element_filtre small { color: var(--ml-doux); } /* Cases iCheck (thème rouge) recolorées dans le vert de la marque */ .page-filtre .icheckbox_minimal-red, .page-filtre .iradio_minimal-red { filter: hue-rotate(150deg) saturate(.55) brightness(.8); } /* ---------- Colonne des filtres ---------- */ .page-filtre .div_filtre { padding: 22px 20px; background: #fff; border: 1px solid var(--ml-bordure); border-radius: 18px; box-shadow: 0 8px 26px rgba(0, 0, 0, .05); } .page-filtre .div_filtre h4 { margin-top: 18px; } .page-filtre .div_filtre h4:first-of-type, .page-filtre #filtre_responsive > h4:first-of-type { margin-top: 0; } .page-filtre .div_filtre .filtre { margin: 0 0 6px; padding: 0 0 14px; background: none; border: 0; border-bottom: 1px solid var(--ml-bordure); border-radius: 0; } .page-filtre .div_filtre .filtre > div { padding: 4px 0; } .page-filtre .div_filtre label { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--ml-texte); cursor: pointer; } .page-filtre .div_filtre label:hover { color: var(--ml-vert); } .page-filtre .div_filtre a { color: var(--ml-texte); font-weight: 500; } .page-filtre .div_filtre a:hover { color: var(--ml-vert); } /* Bouton d'effacement des filtres et curseur de prix (Bootstrap) */ .page-filtre #deleteFilter .btn, .page-filtre .div_filtre .btn { border-radius: 999px; font-weight: 700; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; } .page-filtre .div_filtre input[type=range] { width: 100%; accent-color: var(--ml-vert); } /* Curseur de prix (09/10/2026) — filtre_prix() dans modules/filtre.php. Sélecteurs appuyés pour passer devant l'ancien .slideRange (piste grise carrée) ; partie remplie = --fp-pct, mise à jour en JS. */ .page-filtre .fp { padding: 2px 0 4px; } .page-filtre .fp-tete { display: flex; align-items: center; justify-content: space-between; min-height: 32px; margin-bottom: 12px; } .page-filtre .fp-libelle { font-size: 13px; color: var(--ml-doux); } .page-filtre .fp-valeur { display: inline-flex; align-items: baseline; padding: 4px 12px; font-size: 15px; font-weight: 700; color: var(--ml-vert); background: var(--ml-creme); border: 1px solid var(--ml-bordure); border-radius: 999px; font-variant-numeric: tabular-nums; } .page-filtre .fp-valeur #prixResult { margin: 0; font: inherit; color: inherit; letter-spacing: 0; } /* curseur au maximum = sans limite : « Tous les prix » remplace « Jusqu'à … € » */ .page-filtre .fp-tous { display: none; font-size: 14px; font-weight: 700; color: var(--ml-vert); } .page-filtre .fp.fp-max .fp-libelle, .page-filtre .fp.fp-max .fp-valeur { display: none; } .page-filtre .fp.fp-max .fp-tous { display: inline; } .page-filtre .div_filtre input[type=range].fp-curseur { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 22px; margin: 0; padding: 0; background: transparent; border: 0; opacity: 1; cursor: pointer; } .page-filtre .div_filtre input[type=range].fp-curseur:focus { outline: none; } /* piste */ .page-filtre .div_filtre input[type=range].fp-curseur::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--ml-vert) 0, var(--ml-vert) var(--fp-pct, 0%), var(--ml-bordure) var(--fp-pct, 0%), var(--ml-bordure) 100%); } .page-filtre .div_filtre input[type=range].fp-curseur::-moz-range-track { height: 6px; border-radius: 999px; background: var(--ml-bordure); } .page-filtre .div_filtre input[type=range].fp-curseur::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--ml-vert); } /* poignée */ .page-filtre .div_filtre input[type=range].fp-curseur::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -8px; background: #fff; border: 2px solid var(--ml-vert); border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); transition: transform .15s ease, box-shadow .15s ease; } .page-filtre .div_filtre input[type=range].fp-curseur::-moz-range-thumb { width: 18px; height: 18px; background: #fff; border: 2px solid var(--ml-vert); border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); transition: transform .15s ease, box-shadow .15s ease; } .page-filtre .div_filtre input[type=range].fp-curseur:hover::-webkit-slider-thumb, .page-filtre .div_filtre input[type=range].fp-curseur:active::-webkit-slider-thumb { transform: scale(1.12); } .page-filtre .div_filtre input[type=range].fp-curseur:hover::-moz-range-thumb, .page-filtre .div_filtre input[type=range].fp-curseur:active::-moz-range-thumb { transform: scale(1.12); } .page-filtre .div_filtre input[type=range].fp-curseur:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(45, 89, 71, .22), 0 2px 6px rgba(0, 0, 0, .18); } .page-filtre .div_filtre input[type=range].fp-curseur:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(45, 89, 71, .22), 0 2px 6px rgba(0, 0, 0, .18); } .page-filtre .fp-bornes { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--ml-doux); } .page-filtre .fp-appliquer { display: block; width: 100%; margin-top: 14px; padding: 9px 16px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--ml-vert); border: 1px solid var(--ml-vert); border-radius: 999px; cursor: pointer; transition: background .2s ease, box-shadow .2s ease; } .page-filtre .fp-appliquer:hover { background: #224537; box-shadow: 0 4px 12px rgba(45, 89, 71, .25); } .page-filtre .fp-appliquer:focus-visible { outline: 2px solid var(--ml-vert); outline-offset: 2px; } /* ---------- Résultats ---------- */ #loadingProduct > .col-12.mb-3 { font-size: 14px; color: var(--ml-doux); } #loadingProduct > .col-12.mb-3 b { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 24px; padding: 0 8px; margin-right: 4px; font-size: 13px; color: #fff; background: var(--ml-vert); border-radius: 999px; } /* Carte produit (div.image_block renvoyé par l'AJAX) */ .page-filtre .image_block { padding: 0 10px 28px !important; } .page-filtre .image_block > div { position: relative; display: flex; flex-direction: column; height: 100%; } .page-filtre .image_block > div > div:first-child { position: relative; overflow: hidden; padding: 16px; background: var(--ml-creme); border-radius: var(--ml-rayon); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; } .page-filtre .image_block img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .6s cubic-bezier(.2, .7, .2, 1); } .page-filtre .image_block:hover img { transform: scale(1.07) rotate(-2deg); } /* Pastilles NOUVEAU / promotion */ .page-filtre .image_block .rubanRightNew, .page-filtre .image_block .rubanRight { position: absolute; top: 12px; left: 12px; right: auto; z-index: 2; padding: 5px 11px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; border-radius: 999px; } .page-filtre .image_block .rubanRightNew { background: var(--ml-vert); } .page-filtre .image_block .rubanRight { background: var(--ml-rouge); } .page-filtre .image_block .rubanRightNew:not(.hide) ~ .rubanRight:not(.hide) { top: 42px; } /* Textes de la carte */ .page-filtre .image_block .text-center { text-align: left !important; } .page-filtre .image_block > div > .text-center:first-of-type, .page-filtre .image_block > div > div:nth-child(2) { margin-top: 14px; } .page-filtre .image_block b { font-size: 16px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ml-texte); } .page-filtre .image_block a:hover b { color: var(--ml-vert); } .page-filtre .image_block > div > div:nth-child(3) .text-center { font-size: 13px; color: var(--ml-doux); text-transform: capitalize; } .page-filtre .image_block .pricing { margin-top: 6px; font-size: 16px; } .page-filtre .pricing .actif { font-weight: 700 !important; color: var(--ml-texte); } .page-filtre .pricing .promotion { font-weight: 700 !important; color: var(--ml-rouge) !important; } .page-filtre .pricing span.ancien { font-size: 14px; color: var(--ml-doux); text-decoration: line-through; } /* ---------- Pagination ---------- */ .page-filtre .pagination { justify-content: center; gap: 6px; flex-wrap: wrap; } .page-filtre .page-link { min-width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; padding: 0 14px; font-weight: 500; color: var(--ml-texte); background: #fff; border: 1px solid var(--ml-bordure) !important; border-radius: 999px !important; transition: background .2s ease, color .2s ease, border-color .2s ease; } .page-filtre .page-link:hover { color: #fff; background: var(--ml-vert); border-color: var(--ml-vert) !important; } .page-filtre .page-item.active .page-link { color: #fff; background: var(--ml-vert); border-color: var(--ml-vert) !important; } .page-filtre .page-item.disabled .page-link { color: #b5b1a8; background: transparent; } /* ---------- Mobile ---------- */ @media (max-width: 991.98px) { /* bouton d'ouverture des filtres : pastille verte au lieu de l'image */ #toggle_filtre { top: auto !important; bottom: 22px; left: 50% !important; transform: translateX(-50%); padding: 0; border-radius: 999px; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); overflow: hidden; } #toggle_filtre img { display: none; } #toggle_filtre::before { content: "\f0b0 Filtrer"; display: block; padding: 13px 24px; font-family: FontAwesome, "Roboto", Arial, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--ml-vert, #2D5947); } html[lang="en"] #toggle_filtre::before { content: "\f0b0 Filter"; } .page-filtre .div_filtre { border-radius: 0; box-shadow: none; border: 0; } #toggleFiltre { border-radius: 999px; background: #2D5947 !important; padding: 6px 14px !important; font-weight: 700; } } @media (max-width: 767.98px) { .page-filtre .row > .filtre { margin: 0 15px 8px; padding: 16px 14px 14px; } .page-filtre .row > .filtre .col-md-9 > .row { gap: 6px; } .page-filtre .row > .filtre label { gap: 4px; padding: 7px 12px; font-size: 12.5px; } .page-filtre .image_block { padding: 0 6px 22px !important; } .page-filtre .image_block b { font-size: 14px; } } /* ---------- Listes : blocs de filtres repliables (theme/mephisto/js/mephisto.js) ---------- */ .page-filtre .ml-titre-repliable { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; cursor: pointer; user-select: none; } .page-filtre .ml-titre-repliable::after { content: "\f107"; font-family: FontAwesome; font-size: 18px; line-height: 1; color: var(--ml-vert); transition: transform .25s ease; } .page-filtre .ml-titre-repliable[aria-expanded="true"]::after { transform: rotate(180deg); } .page-filtre .ml-titre-repliable:hover { color: var(--ml-vert-nuit); } .page-filtre .ml-titre-repliable:focus-visible { outline: 2px solid var(--ml-vert); outline-offset: 3px; border-radius: 4px; } .page-filtre .ml-corps-repliable.ml-ferme { display: none; } .page-filtre .div_filtre .filtre.ml-ferme + div h4, .page-filtre .div_filtre .filtre.ml-ferme + h4 { margin-top: 10px; } /* ---------- Réassurance affichée sous la bannière de la page d'accueil (theme/mephisto/reassurance_v2.php) ---------- */ .mf.mf-sous-banniere { margin-top: 0; } .mf.mf-sous-banniere .mf-reassurance { border-top: 0; border-bottom: 1px solid #e6e3dd; padding: 28px 0; } /* ---------- Accueil : encart « Achetez en toute sérénité » ---------- */ .ma .ma-serenite-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; } /* Carte vedette : paiement en 3 fois */ .ma .ma-serenite-vedette { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 40px 36px 34px; color: rgba(255, 255, 255, .85); background: radial-gradient(420px 260px at 100% 0%, rgba(217, 178, 111, .28), transparent 60%), linear-gradient(150deg, var(--ma-vert) 0%, var(--ma-vert-nuit) 100%); border-radius: 22px; } .ma .ma-serenite-vedette::after { content: "3x"; position: absolute; right: -10px; bottom: -48px; font-size: 220px; font-weight: 900; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .10); pointer-events: none; } .ma .ma-serenite-sur { margin-bottom: 12px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ma-or); } .ma .ma-serenite-vedette h3 { margin: 0 0 12px; font-size: clamp(26px, 2.6vw, 36px); font-weight: 900; line-height: 1.1; color: #fff; } .ma .ma-serenite-vedette > p:not(.ma-serenite-sur):not(.ma-mention-4x) { font-size: 15.5px; line-height: 1.6; } /* Échéancier 1/3 - 1/3 - 1/3 */ .ma .ma-echeances { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 28px 0 26px; padding: 0; list-style: none; counter-reset: none; } .ma .ma-echeances li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px 14px; font-size: 13px; font-weight: 500; text-align: center; color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; } .ma .ma-echeances li span { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; font-size: 17px; font-weight: 900; color: var(--ma-vert-nuit); background: #fff; border-radius: 50%; } .ma .ma-echeances li:first-child span { background: var(--ma-or); } /* petite flèche entre les échéances */ .ma .ma-echeances li + li::before { content: "\f105"; position: absolute; left: -10px; top: 34px; font-family: FontAwesome; font-size: 16px; color: rgba(255, 255, 255, .45); transform: translateX(-50%); } .ma .ma-serenite-moyens { position: relative; z-index: 1; margin-top: auto; display: flex; gap: 12px; font-size: 32px; color: #fff; opacity: .9; } /* Cartes d'engagements */ .ma .ma-serenite-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .ma .ma-serenite-carte { display: flex; flex-direction: column; gap: 10px; padding: 28px 26px; color: var(--ma-doux); background: var(--ma-creme); border: 1px solid var(--ma-bordure); border-radius: 22px; transition: transform .3s ease, box-shadow .3s ease, background .3s ease; } .ma .ma-serenite-carte:hover { color: var(--ma-doux); background: #fff; transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0, 0, 0, .08); } .ma .ma-serenite-icone { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 4px; font-size: 21px; color: #fff; background: var(--ma-vert); border-radius: 16px; transition: transform .3s ease, background .3s ease; } .ma .ma-serenite-carte:hover .ma-serenite-icone { transform: rotate(-8deg) scale(1.05); background: var(--ma-vert-nuit); } .ma .ma-serenite-carte strong { font-size: 18px; font-weight: 700; color: var(--ma-texte); } .ma .ma-serenite-carte > span:last-child { font-size: 14px; line-height: 1.6; } @media (max-width: 1199.98px) { .ma .ma-serenite-grille { grid-template-columns: 1fr; } } @media (max-width: 767.98px) { .ma .ma-serenite-vedette { padding: 30px 22px 26px; border-radius: 18px; } .ma .ma-echeances li { padding: 12px 4px 10px; font-size: 12px; } .ma .ma-echeances li span { width: 44px; height: 44px; font-size: 15px; } .ma .ma-serenite-cartes { grid-template-columns: 1fr; gap: 12px; } .ma .ma-serenite-carte { padding: 22px 20px; border-radius: 18px; } } /* ---------- Téléphone flottant (header_v2.php, bas gauche de l'écran) ---------- */ .mh .mh-appel { position: fixed; left: 20px; bottom: 20px; z-index: 1035; font-family: var(--mh-police); } .mh .mh-appel-carte { display: flex; align-items: center; gap: 14px; padding: 12px 22px 12px 12px; color: var(--mh-texte); background: var(--mh-blanc); border: 1px solid var(--mh-bordure); border-radius: 20px; box-shadow: 0 14px 40px rgba(0, 0, 0, .18); transition: transform .25s ease, box-shadow .25s ease; } .mh .mh-appel-carte:hover { color: var(--mh-texte); transform: translateY(-3px); box-shadow: 0 18px 46px rgba(0, 0, 0, .22); } .mh .mh-appel-icone { position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; font-size: 25px; color: var(--mh-blanc); background: var(--mh-vert); border-radius: 50%; } /* onde qui pulse autour de l'icône (donne envie d'appeler) */ .mh .mh-appel-icone::before, .mh .mh-appel-icone::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--mh-vert); animation: mh-onde 2.4s ease-out infinite; } .mh .mh-appel-icone::after { animation-delay: 1.2s; } @keyframes mh-onde { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.7); opacity: 0; } } .mh .mh-appel-icone .fa { animation: mh-sonne 4s ease-in-out infinite; } @keyframes mh-sonne { 0%, 82%, 100% { transform: rotate(0); } 85% { transform: rotate(-14deg); } 88% { transform: rotate(12deg); } 91% { transform: rotate(-10deg); } 94% { transform: rotate(6deg); } } .mh .mh-appel-texte { display: flex; flex-direction: column; line-height: 1.2; } .mh .mh-appel-texte small { font-size: 13px; color: var(--mh-texte-doux); } .mh .mh-appel-texte strong { margin: 2px 0 3px; font-size: 26px; font-weight: 900; letter-spacing: .02em; color: var(--mh-vert); white-space: nowrap; } .mh .mh-appel-etat { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mh-texte-doux); } .mh .mh-appel-point { width: 8px; height: 8px; border-radius: 50%; background: #b5b1a8; } .mh .mh-appel-ouvert .mh-appel-point { background: #22a55b; box-shadow: 0 0 0 3px rgba(34, 165, 91, .2); } .mh .mh-appel-ouvert .mh-appel-etat { color: #1d7f47; font-weight: 500; } .mh .mh-appel-reduire { position: absolute; top: -9px; right: -9px; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0 !important; font-size: 12px !important; color: var(--mh-texte-doux) !important; background: var(--mh-blanc) !important; border: 1px solid var(--mh-bordure) !important; border-radius: 50%; box-shadow: 0 4px 10px rgba(0, 0, 0, .12); } .mh .mh-appel-reduire:hover { color: var(--mh-texte) !important; } /* état réduit : bouton rond */ .mh .mh-appel-reduit .mh-appel-carte { padding: 8px; border-radius: 50%; } .mh .mh-appel-reduit .mh-appel-texte, .mh .mh-appel-reduit .mh-appel-reduire { display: none; } /* Mobile : barre fixe pleine largeur en bas de l'écran (clients âgés : impossible à rater, facile à toucher) */ @media (max-width: 767.98px) { .mh .mh-appel { left: 0; right: 0; bottom: 0; } .mh .mh-appel-carte, .mh .mh-appel-reduit .mh-appel-carte { gap: 12px; width: 100%; padding: 9px 14px calc(9px + env(safe-area-inset-bottom, 0px)); background: var(--mh-blanc); border: 0; border-top: 1px solid var(--mh-bordure); border-radius: 0; box-shadow: 0 -8px 24px rgba(0, 0, 0, .12); } .mh .mh-appel-carte:hover { transform: none; } .mh .mh-appel-icone { width: 44px; height: 44px; font-size: 21px; } .mh .mh-appel-reduit .mh-appel-texte { display: flex; } /* la réduction ne s'applique pas sur mobile */ .mh .mh-appel-reduire, .mh .mh-appel-etat { display: none !important; } .mh .mh-appel-texte { flex: 1 1 auto; } .mh .mh-appel-texte small { font-size: 12px; } .mh .mh-appel-texte strong { margin: 1px 0 0; font-size: 21px; } .mh .mh-appel-carte::after { content: "Appeler"; flex: 0 0 auto; padding: 11px 18px; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mh-blanc); background: var(--mh-vert); border-radius: 999px; } html[lang="en"] .mh .mh-appel-carte::after { content: "Call"; } /* le bas des pages n'est pas masqué par la barre */ body:has(#mhAppel) { padding-bottom: 72px; } /* listes : le bouton « Filtrer » passe au-dessus de la barre */ #toggle_filtre { bottom: 84px !important; } } @media print { .mh .mh-appel { display: none; } } /* ---------- Listes : pastilles des autres coloris (mephisto.js + theme/mephisto/coloris.php) ---------- */ .page-filtre .ml-coloris { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 2px; } .page-filtre .ml-pastille { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .18); box-shadow: inset 0 0 0 2px #fff; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; } .page-filtre a.ml-pastille:hover { transform: scale(1.2); box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--ml-vert); } .page-filtre .ml-pastille-actuelle { cursor: default; box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--ml-texte); } .page-filtre .ml-pastille-plus { font-size: 12px; font-weight: 500; color: var(--ml-doux); } /* ---------- Accueil : pastilles des autres coloris dans les fiches (mêmes pastilles que les listes) ---------- */ .ma .ml-coloris { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; } .ma .ml-pastille { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .18); box-shadow: inset 0 0 0 2px #fff; transition: transform .2s ease, box-shadow .2s ease; } .ma a.ml-pastille:hover { transform: scale(1.2); box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--ma-vert); } .ma .ml-pastille-actuelle { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--ma-texte); } .ma .ml-pastille-plus { font-size: 12px; font-weight: 500; color: var(--ma-doux); } /* ---------- Fiche produit : produits récemment consultés (produit.php wishlist_v2, cartes de l'accueil) ---------- */ .ma.ma-recents { margin: 48px 0 24px; } /* ---------- Fiche produit : détails, caractéristiques, engagements, produits associés (produit.php produit_details_v2) ---------- */ .ma.ma-produit { margin: 0; } .ma .ma-details-produit { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 28px; align-items: start; } .ma .ma-details-texte { padding: 34px 36px; background: #fff; border: 1px solid var(--ma-bordure); border-radius: 22px; } .ma .ma-details-texte .ma-titre { margin: 6px 0 18px; } .ma .ma-details-description { font-size: 16px; line-height: 1.7; color: #3d3d3d; } .ma .ma-details-description p { margin: 0 0 12px; } .ma .ma-technique { margin-top: 22px; padding: 18px 20px; font-size: 15px; line-height: 1.65; color: #3d3d3d; background: var(--ma-creme); border-left: 4px solid var(--ma-vert); border-radius: 0 14px 14px 0; } .ma .ma-technique h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--ma-texte); text-transform: uppercase; letter-spacing: .03em; } .ma .ma-technique h3 .fa { margin-right: 4px; color: var(--ma-vert); } .ma .ma-technique p { margin: 0 0 8px; } .ma .ma-technique p:last-child { margin-bottom: 0; } .ma .ma-entretien { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--ma-bordure); } .ma .ma-entretien > div { margin-top: 12px; font-size: 15px; line-height: 1.65; color: #3d3d3d; } .ma .ma-caracteristiques { padding: 30px 28px; color: #fff; background: radial-gradient(circle at 100% 0, rgba(217, 178, 111, .22) 0, transparent 55%), linear-gradient(150deg, var(--ma-vert) 0%, var(--ma-vert-nuit) 100%); border-radius: 22px; } .ma .ma-caracteristiques h3 { margin: 0 0 18px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ma-or); } .ma .ma-caracteristiques dl { margin: 0; } .ma .ma-caracteristiques dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); } .ma .ma-caracteristiques dl > div:first-child { padding-top: 0; } .ma .ma-caracteristiques dt { font-size: 14px; font-weight: 400; color: rgba(255, 255, 255, .72); } .ma .ma-caracteristiques dd { margin: 0; font-size: 15px; font-weight: 700; text-align: right; } .ma .ma-semelles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .ma .ma-semelles img { height: 74px; width: auto; padding: 6px; background: #fff; border-radius: 12px; } .ma .ma-badge-catalogue { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 7px 14px; font-size: 13px; font-weight: 700; color: var(--ma-vert-nuit); background: var(--ma-or); border-radius: 999px; } .ma .ma-engagements-produit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; } .ma .ma-engagements-produit a { display: flex; align-items: center; gap: 16px; padding: 20px 22px; color: var(--ma-doux); background: var(--ma-creme); border: 1px solid var(--ma-bordure); border-radius: 18px; transition: transform .3s ease, box-shadow .3s ease, background .3s ease; } .ma .ma-engagements-produit a:hover { color: var(--ma-doux); background: #fff; transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, .07); } .ma .ma-engagements-produit .ma-serenite-icone { flex: 0 0 48px; width: 48px; height: 48px; margin: 0; font-size: 19px; border-radius: 14px; } .ma .ma-engagements-produit a:hover .ma-serenite-icone { transform: rotate(-8deg) scale(1.05); background: var(--ma-vert-nuit); } .ma .ma-engagements-produit strong { display: block; font-size: 16px; font-weight: 700; color: var(--ma-texte); } .ma .ma-engagements-produit small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; } .ma .ma-associes { margin-top: 56px; } @media (max-width: 991.98px) { .ma .ma-details-produit { grid-template-columns: 1fr; gap: 20px; } .ma .ma-engagements-produit { grid-template-columns: 1fr; gap: 12px; } } @media (max-width: 767.98px) { .ma .ma-details-texte { padding: 24px 20px; border-radius: 18px; } .ma .ma-caracteristiques { padding: 24px 20px; border-radius: 18px; } .ma .ma-engagements-produit a { padding: 16px 18px; } .ma .ma-associes { margin-top: 40px; } } /* ---------- Paiement en 4X PayPal (05/10/2026) : pied de page, encart sérénité de l'accueil ---------- */ .mf .mf-paiements .mf-paiement-fois { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 26px; padding: 0 8px; font-size: 13px; font-weight: 900; letter-spacing: .04em; color: #fff; border: 2px solid rgba(255, 255, 255, .85); border-radius: 6px; } .mf .mf-bas-ligne { flex-wrap: wrap; align-content: center; row-gap: 12px; min-height: 0; padding-top: 18px; padding-bottom: 16px; } .mf .mf-bas-ligne > p { margin: 0; } .mf .mf-bas .mf-mention-4x { order: 3; flex: 0 0 100%; padding-top: 12px; font-size: 11px; line-height: 1.5; color: rgba(255, 255, 255, .45); border-top: 1px solid rgba(255, 255, 255, .07); } .ma .ma-4x { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 14px 16px; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); border-radius: 14px; } .ma .ma-4x strong { display: block; font-size: 15px; color: #fff; } .ma .ma-4x-badge { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; font-size: 16px; font-weight: 900; color: var(--ma-vert-nuit); background: var(--ma-or); border-radius: 50%; } .ma .ma-serenite-vedette .ma-mention-4x { position: relative; z-index: 1; margin: 10px 0 16px; font-size: 11px; line-height: 1.5; color: rgba(255, 255, 255, .6); } /* ---------- Accueil : commande par téléphone (au-dessus de « Achetez en toute sérénité ») ---------- */ .ma .ma-appel { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 44px 48px; color: rgba(255, 255, 255, .82); background: radial-gradient(circle at 100% 0, rgba(217, 178, 111, .25) 0, transparent 50%), linear-gradient(135deg, var(--ma-vert) 0%, var(--ma-vert-nuit) 100%); border-radius: 24px; } .ma .ma-appel::after { content: "\f095"; position: absolute; right: -30px; bottom: -70px; font-family: FontAwesome; font-size: 260px; line-height: 1; color: rgba(255, 255, 255, .04); transform: rotate(-12deg); pointer-events: none; } .ma .ma-appel-texte, .ma .ma-appel-actions { position: relative; z-index: 1; } .ma .ma-appel .ma-surtitre { color: var(--ma-or); } .ma .ma-appel h2 { margin: 6px 0 12px; font-size: 34px; font-weight: 900; line-height: 1.15; color: #fff; } .ma .ma-appel-texte > p:not(.ma-surtitre):not(.ma-appel-etat) { max-width: 520px; font-size: 16px; line-height: 1.6; } .ma .ma-appel-etat { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px !important; padding: 7px 14px; font-size: 13px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .1); border-radius: 999px; } .ma .ma-appel-etat i { width: 9px; height: 9px; border-radius: 50%; background: #9aa5a1; } .ma .ma-appel-ouvert i { background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); animation: ma-appel-pouls 2s infinite; } .ma .ma-appel-numero { display: flex; align-items: center; gap: 18px; padding: 18px 26px 18px 18px; color: var(--ma-vert-nuit); background: #fff; border-radius: 20px; box-shadow: 0 18px 40px rgba(0, 0, 0, .22); transition: transform .25s ease, box-shadow .25s ease; } .ma .ma-appel-numero:hover { color: var(--ma-vert-nuit); transform: translateY(-3px); box-shadow: 0 24px 48px rgba(0, 0, 0, .28); } .ma .ma-appel-icone { flex: 0 0 64px; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; font-size: 28px; color: var(--ma-vert-nuit); background: var(--ma-or); border-radius: 18px; animation: ma-appel-sonne 4s ease-in-out infinite; } .ma .ma-appel-numero small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ma-vert); } .ma .ma-appel-numero strong { display: block; font-size: 36px; font-weight: 900; line-height: 1.1; letter-spacing: .02em; white-space: nowrap; } .ma .ma-appel-infos { list-style: none; margin: 18px 0 0; padding: 0; font-size: 14px; } .ma .ma-appel-infos li { display: flex; align-items: center; gap: 10px; padding: 5px 0; } .ma .ma-appel-infos .fa { width: 16px; color: var(--ma-or); text-align: center; } .ma .ma-appel-infos a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .ma .ma-appel-infos a:hover { color: var(--ma-or); } .ma .ma-appel-section + .ma-serenite { padding-top: 56px; } @keyframes ma-appel-pouls { 70% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } } @keyframes ma-appel-sonne { 0%, 86%, 100% { transform: rotate(0); } 88% { transform: rotate(-12deg); } 91% { transform: rotate(10deg); } 94% { transform: rotate(-8deg); } 97% { transform: rotate(5deg); } } @media (max-width: 991.98px) { .ma .ma-appel { grid-template-columns: 1fr; gap: 26px; padding: 36px 32px; } } @media (max-width: 767.98px) { .ma .ma-appel { padding: 28px 20px; border-radius: 18px; } .ma .ma-appel h2 { font-size: 26px; } .ma .ma-appel-numero { gap: 14px; padding: 14px 18px 14px 14px; border-radius: 16px; } .ma .ma-appel-icone { flex-basis: 52px; width: 52px; height: 52px; font-size: 22px; border-radius: 14px; } .ma .ma-appel-numero strong { font-size: 27px; } .ma .ma-appel-section + .ma-serenite { padding-top: 44px; } } @media (prefers-reduced-motion: reduce) { .ma .ma-appel-icone, .ma .ma-appel-ouvert i { animation: none; } } /* ---------- Fiche produit : matière / couleur sous la photo principale (produit.php produit_matiere_bulle) ---------- */ .ma-matiere { display: flex; justify-content: center; margin: 14px 0 6px; } .ma-matiere-bulle { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 6px 18px 6px 6px; font-family: "Roboto", "Helvetica Neue", Arial, sans-serif; font-size: 14px; line-height: 1.3; color: #5f5f5f; background: #f6f5f2; border: 1px solid #e6e3dd; border-radius: 999px; box-shadow: 0 6px 18px rgba(0, 0, 0, .05); } .ma-matiere-icone { flex: 0 0 30px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 13px; color: #fff; background: #2D5947; border-radius: 50%; } .ma-matiere-nom { display: inline-block; } .ma-matiere-nom::first-letter, .ma-matiere-bulle strong::first-letter { text-transform: uppercase; } .ma-matiere-bulle strong { display: inline-block; } .ma-matiere-sep { width: 4px; height: 4px; background: #d9b26f; border-radius: 50%; } .ma-matiere-bulle strong { font-weight: 700; color: #222; } @media (max-width: 767.98px) { .ma-matiere-bulle { font-size: 13px; padding-right: 14px; } } /* ---------- Accueil : « Mephisto-Shop, spécialiste des chaussures Mephisto » (texte SEO redessiné) ---------- */ .ma .ma-presentation-v2 { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 56px; background: var(--ma-creme); border: 1px solid var(--ma-bordure); border-radius: 28px; } .ma .ma-presentation-v2::before { /* logo M Mephisto en filigrane (images/logo-m-mephisto.png) */ content: ""; position: absolute; left: -30px; bottom: -50px; width: 380px; height: 380px; background: url("../../../images/logo-m-mephisto.png") no-repeat left bottom / contain; opacity: .06; pointer-events: none; } .ma .ma-presentation-texte, .ma .ma-chiffres { position: relative; z-index: 1; } .ma .ma-presentation-texte h2 { margin: 8px 0 18px; font-size: 36px; font-weight: 900; line-height: 1.15; color: var(--ma-texte); } .ma .ma-presentation-intro { font-size: 17px; line-height: 1.75; color: #3d3d3d; } .ma .ma-presentation-intro strong { color: var(--ma-vert); } .ma .ma-presentation-texte .ma-details { margin: 18px 0 0; } .ma .ma-presentation-texte .ma-details a { color: var(--ma-vert); } .ma .ma-presentation-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 28px; } .ma .ma-presentation-liens .ma-lien-fleche { margin-left: 8px; } .ma .ma-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; } .ma .ma-chiffres li { display: flex; flex-direction: column; gap: 8px; padding: 26px 22px; color: rgba(255, 255, 255, .8); background: linear-gradient(150deg, var(--ma-vert) 0%, var(--ma-vert-nuit) 100%); border-radius: 20px; transition: transform .3s ease, box-shadow .3s ease; } .ma .ma-chiffres li:nth-child(2), .ma .ma-chiffres li:nth-child(3) { color: var(--ma-doux); background: #fff; border: 1px solid var(--ma-bordure); } .ma .ma-chiffres li:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0, 0, 0, .1); } .ma .ma-chiffres strong { font-size: 40px; font-weight: 900; line-height: 1; letter-spacing: -.01em; color: #fff; } .ma .ma-chiffres li:nth-child(2) strong, .ma .ma-chiffres li:nth-child(3) strong { color: var(--ma-vert); } .ma .ma-chiffres small { font-size: 18px; font-weight: 700; opacity: .7; } .ma .ma-chiffres span { font-size: 14px; line-height: 1.5; } .ma .ma-chiffres li:first-child strong, .ma .ma-chiffres li:last-child strong { color: var(--ma-or); } @media (max-width: 1199.98px) { .ma .ma-presentation-v2 { grid-template-columns: 1fr; gap: 36px; padding: 44px 40px; } } @media (max-width: 767.98px) { .ma .ma-presentation-v2 { padding: 30px 20px; border-radius: 20px; } .ma .ma-presentation-v2::before { font-size: 280px; bottom: -80px; } .ma .ma-presentation-texte h2 { font-size: 27px; } .ma .ma-presentation-intro { font-size: 15.5px; } .ma .ma-presentation-liens .ma-bouton { width: 100%; } .ma .ma-presentation-liens .ma-lien-fleche { margin: 6px auto 0; } .ma .ma-chiffres { gap: 10px; } .ma .ma-chiffres li { padding: 18px 16px; border-radius: 16px; } .ma .ma-chiffres strong { font-size: 30px; } .ma .ma-chiffres small { font-size: 14px; } .ma .ma-chiffres span { font-size: 12.5px; } } /* ---------- Page de résultats de recherche (produit.php recherche_v2) ---------- */ .ma.ma-recherche { margin: 0 0 40px; } .ma .ma-recherche-entete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 32px; align-items: end; margin-bottom: 36px; padding: 40px 44px; background: var(--ma-creme); border: 1px solid var(--ma-bordure); border-radius: 24px; } .ma .ma-recherche-entete h1 { margin: 6px 0 0; font-size: 34px; font-weight: 900; line-height: 1.15; color: var(--ma-texte); overflow-wrap: anywhere; } .ma .ma-recherche-entete h1 span { color: var(--ma-vert); } .ma .ma-recherche-compte { margin-top: 10px !important; font-size: 15px; color: var(--ma-doux); } .ma .ma-recherche-compte strong { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 26px; margin-right: 4px; padding: 0 9px; font-size: 13px; color: #fff; background: var(--ma-vert); border-radius: 999px; } .ma .ma-recherche-form { position: relative; display: flex; min-width: 0; width: 100%; align-items: center; padding: 6px; background: #fff; border: 1px solid var(--ma-bordure); border-radius: 999px; box-shadow: 0 10px 28px rgba(0, 0, 0, .06); } .ma .ma-recherche-form:focus-within { border-color: var(--ma-vert); } .ma .ma-recherche-form > .fa { position: absolute; left: 22px; color: var(--ma-doux); } .ma .ma-recherche-form input { flex: 1; min-width: 0; height: 44px; padding: 0 12px 0 44px; font-size: 15px; color: var(--ma-texte); background: transparent; border: 0; outline: 0; } .ma .ma-recherche-form button { height: 44px; padding: 0 24px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--ma-vert); border: 0; border-radius: 999px; cursor: pointer; transition: background .2s ease; } .ma .ma-recherche-form button:hover { background: var(--ma-vert-nuit); } .ma .ma-recherche-groupe + .ma-recherche-groupe { margin-top: 48px; } .ma .ma-recherche-titre { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; font-size: 22px; font-weight: 700; color: var(--ma-texte); } .ma .ma-recherche-titre span { padding: 2px 10px; font-size: 13px; color: var(--ma-vert); background: var(--ma-creme); border: 1px solid var(--ma-bordure); border-radius: 999px; } .ma .ma-grille { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 20px; } .ma .ma-recherche-vide { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; } .ma .ma-recherche-vide-texte { padding: 40px; background: #fff; border: 1px solid var(--ma-bordure); border-radius: 24px; } .ma .ma-recherche-vide-icone { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin-bottom: 18px; font-size: 24px; color: var(--ma-vert-nuit); background: var(--ma-or); border-radius: 18px; } .ma .ma-recherche-vide-texte h2 { margin-bottom: 12px; font-size: 26px; font-weight: 900; color: var(--ma-texte); } .ma .ma-recherche-vide-texte p { max-width: 560px; font-size: 16px; line-height: 1.65; color: #3d3d3d; } .ma .ma-recherche-vide-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .ma .ma-recherche-pistes { display: flex; flex-direction: column; gap: 10px; padding: 34px 30px; background: linear-gradient(150deg, var(--ma-vert) 0%, var(--ma-vert-nuit) 100%); border-radius: 24px; } .ma .ma-recherche-pistes p { margin-bottom: 6px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ma-or); } .ma .ma-recherche-pistes a { display: flex; align-items: center; gap: 12px; padding: 16px 18px; font-size: 16px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; transition: background .2s ease, transform .2s ease; } .ma .ma-recherche-pistes a .fa-long-arrow-right { margin-left: auto; color: var(--ma-or); } .ma .ma-recherche-pistes a:hover { color: #fff; background: rgba(255, 255, 255, .16); transform: translateX(3px); } @media (max-width: 1199.98px) { .ma .ma-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ma .ma-recherche-entete { grid-template-columns: minmax(0, 1fr); align-items: start; } } @media (max-width: 991.98px) { .ma .ma-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ma .ma-recherche-vide { grid-template-columns: 1fr; } } @media (max-width: 767.98px) { .ma .ma-recherche-entete { padding: 26px 20px; border-radius: 18px; gap: 20px; margin-bottom: 26px; } .ma .ma-recherche-entete h1 { font-size: 26px; } .ma .ma-recherche-form button { padding: 0 16px; } .ma .ma-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; } .ma .ma-grille .ma-carte-visuel { padding: 10px; } .ma .ma-grille .ma-carte-titre { font-size: 14px; } .ma .ma-recherche-vide-texte { padding: 28px 20px; border-radius: 18px; } .ma .ma-recherche-vide-texte h2 { font-size: 22px; } .ma .ma-recherche-vide-actions .ma-bouton { width: 100%; } .ma .ma-recherche-pistes { padding: 26px 20px; border-radius: 18px; } } /* ===================================================================== FENÊTRE « AJOUTÉ AU PANIER » (template.php mhAjoutPanier / mhAlertePanier,