/* ============================================================================
OphtaMarket — Refonte 2026 — CSS unifie
Genere a partir des 6 maquettes PC + 6 maquettes Mobile
Toutes les classes prefixees om- pour eviter les conflits
============================================================================ */
/* =============================================================================
0. Font-face declarations (Poppins)
============================================================================= */
@font-face { font-family: "Poppins"; src: url('Poppins/Poppins-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url('Poppins/Poppins-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url('Poppins/Poppins-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url('Poppins/Poppins-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url('Poppins/Poppins-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url('Poppins/Poppins-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url('Poppins/Poppins-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url('Poppins/Poppins-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
/* =============================================================================
1. CSS Variables (:root)
============================================================================= */
:root {
/* Couleurs principales */
--om-color-primary: #0052a3;
--om-color-primary-dark: #061f56;
--om-color-primary-deep: #07529f;
--om-color-primary-medium: #3c79ba;
--om-color-primary-medium-dark: #4f7fb4;
--om-color-primary-light: #6ea2ef;
--om-color-primary-soft: #9bb6d3;
/* Couleurs fonctionnelles */
--om-color-rental: #69c6df;
--om-color-rental-light: #78d2e8;
--om-color-accent: #6f9cf1;
--om-color-success: #4f8fff;
/* Texte */
--om-color-text: #0d1b3c;
--om-color-text-soft: #667188;
--om-color-text-muted: #8b93a2;
/* Surfaces et fonds */
--om-color-background: #ffffff;
--om-color-surface: #ffffff;
--om-color-surface-alt: #f3f3f3;
--om-color-muted: #efefef;
/* Bordures et lignes */
--om-color-border: #dbe5f0;
--om-color-border-soft: #e8edf3;
--om-color-line: #d2d7de;
/* Cartes categories */
--om-color-card-blue: #d7e8f8;
--om-color-card-light: #ecf1f5;
--om-color-card-blue-strong: #b9d8f6;
--om-color-card-mint: #cdeef3;
--om-color-banner: #e7eff8;
/* Police */
--om-font-main: "Poppins", "Montserrat", "Segoe UI", Arial, sans-serif;
/* Containers */
--om-container-width: 1200px;
--om-container-wide: 1230px;
--om-container-narrow: 1190px;
--om-contact-width: 1120px;
}
/* =============================================================================
2. Base / Reset (GLOBAL — pas de scope)
============================================================================= */
*, *::before, *::after {
box-sizing: border-box;
}
html {
font-size: 16px;
}
body {
margin: 0;
background: var(--om-color-background);
color: var(--om-color-text);
font-family: var(--om-font-main);
line-height: 1.35;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
button, input, textarea, select {
font: inherit;
}
.om-page {
width: 100%;
background: var(--om-color-background);
color: var(--om-color-text);
font-family: var(--om-font-main);
line-height: 1.35;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.om-page img {
display: block;
max-width: 100%;
}
.om-page a {
color: inherit;
text-decoration: none;
}
.om-page button,
.om-page input,
.om-page textarea {
font: inherit;
}
/* =============================================================================
3. Container / Layout
============================================================================= */
.om-container {
width: 100%;
max-width: var(--om-container-width);
margin: 0 auto;
padding: 0 24px;
}
.om-container--wide {
max-width: calc(var(--om-container-wide) + 48px);
}
.om-container--narrow {
max-width: var(--om-container-narrow);
}
.om-container--contact {
max-width: calc(var(--om-contact-width) + 48px);
}
/* =============================================================================
4. Header (topbar, main, nav)
============================================================================= */
.om-site-header {
background: #fff;
border-bottom: 1px solid #e8edf3;
}
/* --- Topbar --- */
.om-topbar {
height: 35px;
background: var(--om-color-primary);
color: #fff;
}
.om-topbar .om-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.om-topbar p {
margin: 0;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
}
.om-topbar a {
color: #fff;
text-decoration: none;
font-weight: 700;
}
.om-topbar a:hover {
text-decoration: underline;
}
/* --- Header main --- */
.om-header-main {
border-bottom: 1px solid #edf1f6;
}
.om-header-main__inner {
display: grid;
grid-template-columns: 220px 1fr auto;
align-items: center;
gap: 30px;
height: 86px;
}
.om-logo img {
width: 214px;
height: auto;
}
.om-search-bar {
display: flex;
align-items: center;
height: 40px;
border-radius: 6px;
overflow: hidden;
background: #eef3f8;
border: 1px solid #e2e8ef;
}
.om-search-bar input {
flex: 1;
height: 100%;
border: 0;
background: transparent;
padding: 0 16px;
color: #3d4863;
font-size: 13px;
outline: none;
}
.om-search-bar input::placeholder {
color: #8c97aa;
}
.om-search-bar button {
width: 48px;
height: 100%;
border: 0;
background: transparent;
cursor: pointer;
}
.om-search-bar svg {
width: 18px;
height: 18px;
fill: #2f3a55;
}
.om-header-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 22px;
}
.om-header-actions__link {
font-size: 12px;
color: var(--om-color-primary);
font-weight: 600;
white-space: nowrap;
flex: 0 0 auto;
}
.om-header-user-group {
display: inline-flex;
align-items: center;
gap: 18px;
flex: 0 0 auto;
}
.om-header-cart {
position: relative;
display: flex;
align-items: flex-start;
align-self: center;
}
.om-header-cart img {
height: 30px;
width: auto;
object-fit: contain;
}
/* ==== Popup survol panier ==== */
.om-header-cart-wrap {
position: relative;
display: inline-flex;
align-items: center;
}
.om-cart-popup {
position: absolute;
top: calc(100% + 14px);
right: -12px;
width: 340px;
background: #ffffff;
box-shadow: 0 16px 40px rgba(21, 67, 96, 0.18);
border: 1px solid rgba(21, 67, 96, 0.08);
border-radius: 10px;
padding: 12px 14px;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
z-index: 1100;
pointer-events: none;
}
.om-cart-popup::before {
content: '';
position: absolute;
top: -16px;
right: 18px;
border-style: solid;
border-width: 0 10px 16px 10px;
border-color: transparent transparent #ffffff transparent;
filter: drop-shadow(0 -2px 2px rgba(21, 67, 96, 0.06));
}
.om-cart-popup::after {
content: '';
position: absolute;
top: -14px;
left: 0;
right: 0;
height: 18px;
}
@media (min-width: 769px) {
.om-header-cart-wrap:hover .om-cart-popup,
.om-header-cart-wrap:focus-within .om-cart-popup {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
}
.om-cart-popup__empty {
text-align: center;
padding: 20px 8px;
color: #6a7083;
font-size: 14px;
}
.om-cart-popup__header {
display: flex;
justify-content: center;
padding-bottom: 10px;
border-bottom: 1px solid rgba(21, 67, 96, 0.08);
margin-bottom: 10px;
}
.om-cart-popup__see-all {
color: #2f6cc4;
font-size: 14px;
font-weight: 600;
text-decoration: none;
}
.om-cart-popup__see-all:hover {
text-decoration: underline;
}
.om-cart-popup__list {
list-style: none;
padding: 0;
margin: 0;
max-height: 260px;
overflow-y: auto;
}
.om-cart-popup__item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid rgba(21, 67, 96, 0.05);
}
.om-cart-popup__item:last-child {
border-bottom: none;
}
.om-cart-popup__thumb {
flex: 0 0 44px;
width: 44px;
height: 44px;
border-radius: 6px;
overflow: hidden;
background: #f4f5f8;
display: flex;
align-items: center;
justify-content: center;
}
.om-cart-popup__thumb img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.om-cart-popup__thumb-ph {
width: 20px;
height: 20px;
background: #cfd4dd;
border-radius: 4px;
display: block;
}
.om-cart-popup__info {
flex: 1;
min-width: 0;
}
.om-cart-popup__name {
font-size: 13px;
font-weight: 600;
color: #202944;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 4px;
}
.om-cart-popup__qty-price {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
}
.om-cart-popup__qty {
color: #6a7083;
}
.om-cart-popup__price {
font-weight: 700;
color: #202944;
}
.om-cart-popup__footer {
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid rgba(21, 67, 96, 0.08);
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.om-cart-popup__btn {
background: #2f6cc4;
color: #ffffff;
padding: 8px 16px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: background-color 0.2s;
}
.om-cart-popup__btn:hover {
background: #24589f;
}
.om-cart-popup__total {
font-size: 14px;
color: #202944;
}
.om-cart-popup__total strong {
font-size: 15px;
color: #202944;
}
.om-header-aide {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
gap: 3px;
}
.om-header-aide__circle {
width: 22px;
height: 22px;
border-radius: 50%;
background: transparent;
border: 1.5px solid #3a4055;
color: #3a4055;
font-size: 13px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.om-header-aide__label {
font-size: 9px;
color: #555;
font-weight: 400;
white-space: nowrap;
}
.om-header-user {
position: relative;
cursor: pointer;
display: flex;
align-items: flex-start;
}
.om-header-user img {
height: 35px;
width: auto;
object-fit: contain;
}
.om-user-dropdown {
display: none;
position: absolute;
top: calc(100% + 10px);
right: 0;
min-width: 180px;
background: #ffffff;
border: 1px solid #e1e4ea;
border-radius: 8px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
padding: 6px 0;
z-index: 1000;
}
.om-user-dropdown__item {
padding: 10px 18px;
font-size: 13px;
color: #1c2538;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s ease;
}
.om-user-dropdown__item:hover {
background: #f3f6fb;
color: #1a62d3;
}
.om-user-dropdown__sep {
height: 1px;
background: #eef1f6;
margin: 0 12px;
}
.om-header-icon--cart img {
height: 30px;
width: auto;
object-fit: contain;
}
.om-header-icon--cart svg {
display: none;
}
.om-header-icon {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 11px;
color: #222b45;
position: relative;
white-space: nowrap;
flex: 0 0 auto;
cursor: pointer;
}
.om-header-icon svg {
width: 21px;
height: 21px;
fill: #202944;
}
.om-header-icon--cart span:not(.om-cart-badge) {
display: none;
}
.om-cart-badge {
position: absolute;
top: -6px;
right: -8px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--om-color-primary);
color: #fff;
font-size: 10px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* --- Header nav --- */
.om-header-nav {
border-bottom: 1px solid #edf1f6;
}
.om-header-nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 42px;
}
.om-main-nav ul {
display: flex;
align-items: center;
gap: 40px;
margin: 0;
padding: 0;
list-style: none;
}
.om-main-nav a {
font-size: 12px;
color: #232d48;
}
.om-shop-button {
min-width: 170px;
height: 30px;
padding: 0 18px;
border-radius: 20px;
background: var(--om-color-primary);
color: #fff;
font-size: 12px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
cursor: pointer;
transition: background 0.2s ease;
}
/* --- Header mobile --- */
.om-header-mobile {
display: none;
}
.om-icon-button {
width: 28px;
height: 28px;
padding: 4px 2px;
border: 0;
background: transparent;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
cursor: pointer;
}
.om-icon-button span {
display: block;
width: 100%;
height: 2px;
background: #1d2943;
border-radius: 2px;
}
.om-header-cart {
position: relative;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.om-header-cart svg {
width: 22px;
height: 22px;
fill: #202944;
}
.om-header-search {
padding: 0 16px 14px;
}
/* =============================================================================
5. Hero (accueil)
============================================================================= */
.om-hero {
padding-top: 0;
}
.om-hero-banner {
position: relative;
height: 514px;
overflow: hidden;
background:
radial-gradient(circle at 18% 22%, rgba(155, 182, 211, 0.28), transparent 55%),
radial-gradient(circle at 82% 78%, rgba(105, 198, 223, 0.22), transparent 60%),
linear-gradient(135deg, #061f56 0%, #0052a3 55%, #3c79ba 100%);
}
.om-hero-banner__image {
width: 100%;
height: 432px;
object-fit: cover;
}
.om-hero-banner__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
pointer-events: none;
}
.om-hero-banner__content {
position: absolute;
top: 92px;
right: 78px;
text-align: center;
color: #fff;
z-index: 2;
}
.om-hero-banner__content h1 {
margin: 0 0 16px;
font-size: 26px;
line-height: 1.22;
font-weight: 800;
}
.om-hero-banner__content p {
margin: 0;
font-size: 12px;
letter-spacing: 0.04em;
font-weight: 500;
}
.om-hero-banner__overlay {
position: absolute;
right: 16px;
bottom: 18px;
left: 16px;
color: #fff;
text-align: right;
}
.om-hero-tabs {
display: grid;
grid-template-columns: repeat(4, 1fr);
height: 82px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
}
.om-hero-tabs__item {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 20px;
color: #fff;
font-size: 16px;
font-weight: 800;
line-height: 1.25;
position: relative;
overflow: hidden;
transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.4s ease;
z-index: 1;
}
.om-hero-tabs__item span {
display: inline-block;
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.om-hero-tabs__item:hover span {
transform: scale(1.08);
}
.om-hero-tabs__item::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at center, rgba(255,255,255,0.12) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: 1;
}
.om-hero-tabs__item::after {
content: '';
position: absolute;
top: 0;
left: -110%;
width: 60%;
height: 100%;
background: linear-gradient(
105deg,
transparent 20%,
rgba(255, 255, 255, 0.08) 35%,
rgba(255, 255, 255, 0.22) 50%,
rgba(255, 255, 255, 0.08) 65%,
transparent 80%
);
transform: skewX(-18deg);
pointer-events: none;
z-index: 2;
}
.om-hero-tabs__item:hover {
box-shadow: 0 10px 30px rgba(0, 20, 60, 0.35),
0 0 20px rgba(100, 160, 255, 0.15);
filter: brightness(1.12);
}
.om-hero-tabs__item:hover::before {
opacity: 1;
}
.om-hero-tabs__item:hover::after {
animation: om-shine-sweep 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes om-shine-sweep {
0% { left: -110%; }
100% { left: 130%; }
}
.om-hero-tabs__item--dark {
background: var(--om-color-primary-dark);
}
.om-hero-tabs__item--active {
background: var(--om-color-primary);
}
/* =============================================================================
6. Product cards and grids
============================================================================= */
/* --- Section intro --- */
.om-section-intro {
padding-top: 62px;
text-align: center;
}
.om-section-intro h2 {
margin: 0 0 6px;
font-size: 25px;
line-height: 1.15;
font-weight: 800;
color: var(--om-color-text);
}
.om-section-intro p {
margin: 0 0 22px;
font-size: 14px;
color: var(--om-color-text-soft);
}
/* --- Section heading --- */
.om-section-heading {
margin-bottom: 24px;
}
.om-section-heading--center {
text-align: center;
}
.om-section-heading h2 {
margin: 0 0 8px;
font-size: 26px;
line-height: 1.15;
font-weight: 800;
color: #1b2c4c;
}
.om-section-heading p {
margin: 0;
font-size: 14px;
color: var(--om-color-primary);
}
/* --- Page heading --- */
.om-page-heading {
margin-bottom: 28px;
}
.om-page-heading h1 {
margin: 0;
font-size: 24px;
line-height: 1.15;
font-weight: 700;
color: #1a2a46;
}
.om-page-heading--boutique {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-bottom: 24px;
}
.om-page-heading__sort {
min-width: 180px;
}
.om-page-heading__sort .champs_selection_simule {
border-radius: 8px;
border: 1px solid #c6ccd6;
font-size: 12px;
font-weight: 500;
color: #2b3448;
transition: border-color 0.2s ease;
}
.om-page-heading__sort .champs_selection_simule:hover {
border-color: #b8c5d6;
}
.om-page-heading__sort .champs_selection_simule_bouton {
padding: 10px 38px 10px 14px;
}
/* --- Product strip (accueil) --- */
.om-product-strip {
padding: 40px 0 24px;
}
.om-product-strip__inner {
display: grid;
grid-template-columns: 212px 1fr;
align-items: start;
gap: 32px;
}
/* --- Product grid --- */
.om-product-grid {
display: grid;
gap: 22px;
}
.om-product-grid--3 {
grid-template-columns: repeat(3, 1fr);
}
.om-product-grid--4 {
grid-template-columns: repeat(4, 1fr);
}
.om-product-grid--5 {
grid-template-columns: repeat(5, 1fr);
}
/* --- Product card (simple, accueil) --- */
.om-product-card {
background: #fff;
border: 1px solid var(--om-color-border);
text-align: left;
position: relative;
transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.om-product-card--simple {
min-height: 220px;
padding: 18px 16px 16px;
text-align: center;
}
.om-product-card--simple img {
width: 100%;
height: 132px;
object-fit: contain;
margin-bottom: 16px;
}
.om-product-card--simple h3 {
margin: 0;
color: #5b6276;
font-size: 13px;
line-height: 1.25;
font-weight: 500;
}
.om-card-media-placeholder {
display: flex;
align-items: center;
justify-content: center;
background: #f0f0f0;
}
.om-card-media-placeholder--simple {
height: 132px;
margin-bottom: 16px;
}
/* --- Product card (boutique) --- */
.om-product-card--shop {
min-height: 210px;
padding: 18px 16px 16px;
text-align: center;
}
.om-product-card--shop img {
width: 100%;
height: 118px;
object-fit: contain;
margin-bottom: 20px;
}
.om-product-card--shop h3 {
margin: 0 0 12px;
font-size: 12px;
line-height: 1.25;
font-weight: 500;
color: #5b6276;
}
.om-product-card--shop p {
margin: 0;
font-size: 16px;
line-height: 1;
font-weight: 500;
color: #2a2f38;
}
.om-product-card--shop span {
font-size: 10px;
}
.om-card-media-placeholder--shop {
height: 118px;
margin-bottom: 20px;
}
/* --- Product card (catalogue) --- */
.om-product-card__link {
display: block;
height: 100%;
}
.om-product-card__image {
height: 230px;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 24px 16px 10px;
overflow: hidden;
}
.om-product-card__image img {
max-width: 100%;
max-height: 178px;
width: auto;
object-fit: contain;
transition: transform 0.3s ease;
}
.om-product-card__content {
padding: 12px 16px 18px;
}
.om-product-card__content h2 {
margin: 0;
font-size: 13px;
line-height: 1.42;
font-weight: 500;
color: #555d70;
}
.om-product-card__content h3 {
margin: 0 0 8px;
min-height: 38px;
font-size: 14px;
line-height: 1.3;
font-weight: 700;
color: #2a2f39;
}
.om-product-card__type {
margin: 0 0 10px;
font-size: 12px;
color: #8d93a0;
}
.om-product-card__footer {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
}
.om-product-card__price strong {
display: inline;
margin-right: 4px;
font-size: 18px;
line-height: 1;
font-weight: 500;
color: #1c2538;
}
.om-product-card__price span {
font-size: 13px;
font-weight: 500;
}
.om-product-card__price em {
display: block;
font-style: normal;
font-size: 10px;
color: var(--om-color-success);
font-weight: 600;
}
.om-product-card__add {
width: 28px;
height: 28px;
border-radius: 50%;
background: #d0d0d0;
color: #fff;
font-size: 20px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 28px;
margin-bottom: 2px;
border: 0;
cursor: pointer;
transition: background 0.2s ease;
}
.om-product-card__add svg {
width: 15px;
height: 15px;
fill: #fff;
}
/* --- Product card (list mode, mobile) --- */
.om-product-card--list {
background: #fff;
border: 1px solid var(--om-color-border);
border-radius: 6px;
overflow: hidden;
}
.om-product-card--list .om-product-card__link {
display: grid;
grid-template-columns: 118px 1fr;
gap: 14px;
padding: 12px;
align-items: center;
}
.om-product-card--list .om-product-card__image {
width: 118px;
height: 118px;
padding: 0;
}
.om-product-card--list .om-product-card__image img {
max-width: 100%;
max-height: 100%;
}
.om-product-card--list .om-product-card__content h3 {
font-size: 15px;
line-height: 1.15;
font-weight: 800;
color: #13213c;
min-height: auto;
}
.om-product-card--list .om-product-card__price strong {
font-size: 16px;
font-weight: 800;
color: #0f1831;
}
/* --- Product section title --- */
.om-product-section + .om-product-section {
margin-top: 26px;
}
.om-product-section__title {
margin: 0 0 14px;
font-size: 12px;
font-weight: 500;
color: #7c8392;
}
/* --- Product list (mobile) --- */
.om-product-list {
display: grid;
gap: 10px;
}
/* --- Deal card --- */
.om-deal-card {
background: #fff;
border: 1px solid #ededed;
text-align: center;
min-height: 248px;
padding: 16px 12px 14px;
position: relative;
transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.om-deal-card:hover {
border-color: #cfe0ef;
box-shadow: 0 6px 18px rgba(0, 82, 163, 0.12);
transform: translateY(-2px);
}
.om-deal-card img {
width: 100%;
height: 128px;
object-fit: contain;
margin-bottom: 12px;
transition: transform 0.3s ease;
}
.om-deal-card:hover img {
transform: scale(1.05);
}
.om-deal-card h3 {
min-height: 40px;
margin: 0 0 12px;
font-size: 11px;
line-height: 1.25;
color: #585d69;
font-weight: 500;
}
.om-deal-card p {
margin: 0;
color: #1c2335;
font-size: 18px;
line-height: 1;
font-weight: 500;
}
.om-deal-card span {
font-size: 10px;
}
.om-card-media-placeholder--deal {
height: 128px;
margin-bottom: 12px;
}
/* --- Horizontal slider (mobile) --- */
.om-product-slider {
display: flex;
gap: 12px;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 10px;
margin-bottom: 14px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.om-product-slider::-webkit-scrollbar {
display: none;
}
.om-product-slider > * {
flex: 0 0 70%;
scroll-snap-align: start;
}
/* --- Section action (mobile) --- */
.om-section-action {
display: flex;
justify-content: center;
margin-top: 6px;
margin-bottom: 28px;
}
.om-mobile-only {
display: none;
}
/* =============================================================================
7. Brands
============================================================================= */
.om-brands {
padding: 20px 0 28px;
}
.om-brands__inner {
display: flex;
align-items: center;
gap: 44px;
}
.om-brands h2 {
flex: 0 0 auto;
margin: 0;
font-size: 25px;
font-weight: 500;
color: var(--om-color-text);
}
.om-brands__list {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 26px;
}
.om-brands__list img {
max-height: 48px;
width: auto;
object-fit: contain;
}
/* =============================================================================
8. Opportunities
============================================================================= */
.om-opportunities {
padding: 0 0 40px;
}
.om-opportunities-box {
background: var(--om-color-surface-alt);
padding: 28px 90px 34px;
}
/* =============================================================================
9. Boutique section
============================================================================= */
/* Boutique benefits bar uses the general benefits bar below (section 17) */
/* =============================================================================
10. Rental / Location
============================================================================= */
.om-rental {
padding: 6px 0 40px;
}
.om-rental-panel {
display: grid;
grid-template-columns: 1fr 434px;
min-height: 370px;
}
.om-rental-panel__content {
background: var(--om-color-rental);
color: #fff;
text-align: center;
padding: 68px 78px 40px;
}
.om-rental-panel__content h2 {
margin: 0 0 26px;
font-size: 25px;
line-height: 1.1;
font-weight: 800;
}
.om-rental-panel__content p {
margin: 0 auto 30px;
max-width: 610px;
font-size: 14px;
line-height: 1.5;
font-weight: 500;
}
.om-rental-panel__actions {
display: flex;
justify-content: center;
gap: 14px;
}
.om-rental-features {
display: grid;
grid-template-columns: repeat(2, 1fr);
background: var(--om-color-rental-light);
gap: 3px;
border-left: 3px solid #fff;
}
.om-feature-card {
background: #fff;
padding: 36px 24px 22px;
text-align: center;
min-height: 183px;
}
.om-feature-card__icon {
width: 54px;
height: 54px;
margin: 0 auto 18px;
color: #08a8d8;
}
.om-feature-card__icon svg,
.om-feature-card__icon img {
width: 100%;
height: 100%;
fill: currentColor;
object-fit: contain;
}
.om-feature-card h3 {
margin: 0;
font-size: 13px;
line-height: 1.45;
font-weight: 800;
color: #1f2f56;
}
/* =============================================================================
11. Buyback / Rachat
============================================================================= */
.om-buyback-panel {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 220px;
background: var(--om-color-primary-dark);
overflow: hidden;
}
.om-buyback-panel__illustration {
display: flex;
align-items: flex-end;
justify-content: center;
}
.om-buyback-panel__illustration img {
width: 100%;
max-width: 460px;
object-fit: contain;
}
.om-buyback-panel__content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 30px 56px 30px 18px;
color: #fff;
}
.om-buyback-panel__content h2 {
margin: 0 0 10px;
font-size: 25px;
line-height: 1.15;
font-weight: 800;
}
.om-buyback-panel__content p {
margin: 0 0 22px;
font-size: 15px;
line-height: 1.45;
font-weight: 600;
}
.om-buyback-panel .om-light-button {
align-self: flex-start;
}
/* =============================================================================
12. Contact form
============================================================================= */
.om-contact {
padding: 0 0 95px;
}
.om-contact--page {
padding: 60px 0 95px;
}
.om-contact--page .om-section-heading h1 {
margin: 0 0 8px;
font-size: 26px;
line-height: 1.15;
font-weight: 800;
color: #1b2c4c;
}
.om-contact-tel {
margin-top: 6px;
font-size: 14px;
color: var(--om-color-text-soft);
}
.om-contact-tel a {
color: var(--om-color-primary);
font-weight: 600;
text-decoration: none;
}
.om-contact-tel a:hover {
text-decoration: underline;
}
.om-contact-box {
max-width: 1152px;
margin: 0 auto;
background: #f4f4f4;
padding: 52px 58px 38px;
display: grid;
grid-template-columns: 1fr 430px;
gap: 48px;
}
.om-contact-box--services {
grid-template-columns: 1fr 500px;
}
.om-contact-form-panel .om-section-heading {
text-align: center;
margin-bottom: 30px;
}
.om-contact-form {
max-width: 470px;
margin: 0 auto;
}
.om-contact-form__topic {
margin-bottom: 14px;
text-align: center;
color: var(--om-color-primary);
font-size: 14px;
font-weight: 500;
}
.om-form-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.om-form-field input,
.om-form-field textarea {
width: 100%;
border: 0;
border-bottom: 1px solid #cfd5dd;
background: transparent;
padding: 0 8px 10px;
color: #243148;
font-size: 13px;
outline: none;
}
.om-form-field input {
height: 36px;
}
.om-form-field textarea {
height: 120px;
resize: none;
padding-top: 8px;
}
.om-form-field input::placeholder,
.om-form-field textarea::placeholder {
color: #7d8593;
}
.om-form-footer {
margin-top: 34px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
}
.om-form-footer--services {
align-items: flex-end;
}
.om-captcha-box {
display: flex;
flex-direction: column;
gap: 8px;
}
.om-captcha-visual {
width: 170px;
height: 34px;
border: 1px solid #e1e1e1;
background: #fafafa;
color: #5d5d5d;
font-size: 18px;
letter-spacing: 0.35em;
display: flex;
align-items: center;
justify-content: center;
text-transform: lowercase;
}
.om-captcha-box input {
width: 110px;
height: 30px;
border: 1px solid #d8d8d8;
background: #fff;
padding: 0 8px;
font-size: 11px;
}
.om-captcha-stack {
display: grid;
gap: 10px;
}
.om-captcha-controls {
display: flex;
align-items: center;
gap: 6px;
}
.om-captcha-controls input {
width: 110px;
height: 30px;
border: 1px solid #d7d7d7;
background: #fff;
padding: 0 8px;
font-size: 11px;
color: #2a2f38;
}
.om-captcha-refresh {
width: 30px;
height: 30px;
border: 0;
background: #ececec;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.om-captcha-refresh svg {
width: 16px;
height: 16px;
fill: #1d2434;
}
/* --- File upload (services) --- */
.om-file-upload-row {
display: flex;
align-items: center;
gap: 10px;
margin-top: 14px;
}
.om-file-upload {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 118px;
height: 24px;
padding: 0 10px;
border: 1px solid #8f8f8f;
background: #f8f8f8;
color: #1c2131;
font-size: 11px;
cursor: pointer;
}
.om-file-upload input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.om-file-upload__status {
font-size: 11px;
color: #2a2f38;
}
.om-contact-image img {
width: 100%;
height: 100%;
min-height: 510px;
object-fit: cover;
}
/* =============================================================================
13. Footer
============================================================================= */
.om-site-footer {
background: #f3f3f3;
}
.om-footer-main {
padding: 34px 0 28px;
}
.om-footer-main__inner {
display: grid;
grid-template-columns: 320px 220px 220px 140px 220px;
gap: 30px;
align-items: start;
}
.om-logo--footer img {
width: 220px;
}
.om-footer-brand p {
margin: 20px 0 0;
max-width: 260px;
color: #51596c;
font-size: 11px;
line-height: 1.6;
}
.om-footer-newsletter h3,
.om-footer-nav h3 {
margin: 0 0 14px;
font-size: 12px;
line-height: 1.2;
font-weight: 800;
color: #1f2940;
text-transform: uppercase;
}
.om-footer-newsletter p,
.om-footer-newsletter span {
display: block;
margin: 0 0 12px;
color: #4f5668;
font-size: 11px;
}
.om-newsletter-form {
margin-bottom: 18px;
}
.om-newsletter-form input {
width: 160px;
height: 32px;
border: 0;
background: #e9e9e9;
padding: 0 12px;
font-size: 11px;
color: #20283b;
outline: none;
}
.om-social-links {
display: flex;
align-items: center;
gap: 8px;
}
.om-social-links a {
width: 22px;
height: 22px;
color: var(--om-color-primary);
font-size: 12px;
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: center;
}
.om-social-links a svg {
width: 100%;
height: 100%;
}
.om-footer-nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.om-footer-nav li + li {
margin-top: 10px;
}
.om-footer-nav a {
color: #4f5668;
font-size: 11px;
line-height: 1.3;
}
.om-footer-bottom {
background: var(--om-color-primary-dark);
color: #fff;
}
.om-footer-bottom .om-container {
height: 42px;
display: flex;
align-items: center;
}
.om-footer-bottom p {
margin: 0;
font-size: 11px;
font-weight: 600;
}
/* =============================================================================
14. Callback banner (materiel neuf)
============================================================================= */
.om-callback {
padding: 18px 0 36px;
}
.om-callback-banner {
width: 100%;
max-width: var(--om-container-width);
margin: 0 auto;
height: 85px;
border-radius: 6px;
background: var(--om-color-muted);
display: grid;
grid-template-columns: 1fr 1.35fr;
align-items: center;
padding: 0 42px;
}
.om-callback-banner__contact {
display: flex;
align-items: center;
gap: 16px;
}
.om-callback-banner__icon {
width: 28px;
height: 28px;
color: #4b5263;
}
.om-callback-banner__icon svg {
width: 100%;
height: 100%;
fill: currentColor;
}
.om-callback-banner__text p,
.om-callback-banner__message p {
margin: 0;
font-size: 12px;
color: #50586c;
line-height: 1.2;
}
.om-callback-banner__text strong {
display: block;
margin-top: 2px;
font-size: 20px;
font-weight: 700;
color: #4b5263;
line-height: 1.1;
}
.om-callback-banner__cta {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 28px;
padding-left: 54px;
}
.om-callback-banner__message span {
display: block;
margin-top: 2px;
font-size: 10px;
color: #666f83;
}
.om-callback-button {
min-width: 168px;
height: 30px;
padding: 0 18px;
border-radius: 18px;
background: #f7f7f7;
color: #3e4758;
font-size: 12px;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #d8dee7;
cursor: pointer;
transition: all 0.2s;
}
.om-callback-button:hover {
background: #fff;
border-color: var(--om-color-primary);
color: var(--om-color-primary);
}
/* =============================================================================
15. Category cards (materiel neuf)
============================================================================= */
.om-categories {
padding-bottom: 34px;
}
.om-category-list {
display: flex;
flex-direction: column;
gap: 22px;
max-width: 864px;
margin: 0 auto;
}
.om-category-card {
height: 220px;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
overflow: hidden;
}
.om-category-card--light {
grid-template-columns: 1fr 1fr;
}
.om-category-card--mint {
grid-template-columns: 1fr 1fr;
}
.om-category-card--blue {
background: var(--om-color-card-blue);
}
.om-category-card--light {
background: var(--om-color-card-light);
}
.om-category-card--blue-strong {
background: var(--om-color-card-blue-strong);
}
.om-category-card--mint {
background: var(--om-color-card-mint);
}
.om-category-card__content {
padding: 0 44px 0 74px;
}
.om-category-card--light .om-category-card__content,
.om-category-card--mint .om-category-card__content {
padding: 0 48px 0 22px;
}
.om-category-card__content h2 {
margin: 0 0 16px;
font-size: 22px;
line-height: 1.1;
font-weight: 800;
color: #111b34;
}
.om-category-card__content p {
max-width: 390px;
margin: 0 0 24px;
font-size: 14px;
line-height: 1.5;
color: #2f394d;
}
.om-category-card__media {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.om-category-card__media img {
max-height: 210px;
width: auto;
object-fit: contain;
}
.om-category-card__media--left img {
margin-left: 28px;
}
/* =============================================================================
16. Catalogue layout with filters
============================================================================= */
/* --- Breadcrumb --- */
.om-breadcrumb {
margin-bottom: 26px;
}
.om-breadcrumb__back {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 600;
color: #0f1c39;
}
.om-breadcrumb__icon {
font-size: 18px;
line-height: 1;
margin-top: -1px;
}
/* --- Catalogue intro --- */
.om-catalogue-hero {
padding: 34px 0 44px;
}
.om-catalogue-intro {
background: var(--om-color-banner);
min-height: 180px;
padding: 56px 118px;
}
.om-catalogue-intro--compact {
min-height: 0;
padding: 26px 118px;
}
.om-catalogue-intro h1 {
margin: 0 0 16px;
font-size: 24px;
line-height: 1.1;
font-weight: 800;
color: #141f39;
}
.om-catalogue-intro p {
margin: 0;
max-width: 870px;
font-size: 16px;
line-height: 1.5;
color: #2a3348;
}
/* --- Catalogue toolbar --- */
.om-catalogue {
padding-bottom: 46px;
}
.om-catalogue-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 28px;
}
.om-catalogue-toolbar__left {
display: flex;
align-items: center;
gap: 82px;
}
.om-catalogue-toolbar__left h2 {
margin: 0;
font-size: 15px;
font-weight: 700;
color: #23334f;
}
.om-clear-filters {
font-size: 11px;
color: #676f81;
text-decoration: underline;
background: none;
border: 0;
cursor: pointer;
}
.om-sort-button {
min-width: 162px;
height: 34px;
padding: 0 14px 0 18px;
border: 1px solid #c6ccd6;
border-radius: 8px;
background: #fff;
color: #2b3448;
display: inline-flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: border-color 0.2s ease;
}
.om-sort-button span {
font-size: 12px;
font-weight: 500;
}
.om-sort-button svg {
width: 18px;
height: 18px;
fill: #1f2c46;
}
.om-sort-select-wrap {
position: relative;
min-width: 180px;
}
.om-sort-select {
width: 100%;
height: 34px;
padding: 0 38px 0 14px;
border: 1px solid #c6ccd6;
border-radius: 8px;
background: #fff;
color: #2b3448;
font-size: 12px;
font-weight: 500;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
transition: border-color 0.2s ease;
}
.om-sort-select-wrap svg {
position: absolute;
top: 50%;
right: 12px;
width: 18px;
height: 18px;
fill: #1f2c46;
transform: translateY(-50%);
pointer-events: none;
}
/* --- Catalogue layout --- */
.om-catalogue-layout {
display: grid;
grid-template-columns: 270px 1fr;
gap: 38px;
align-items: start;
}
.om-catalogue-content {
min-width: 0;
}
.om-catalogue-products {
padding: 0 0 28px;
}
.om-catalogue-count {
margin: 0 0 20px;
color: var(--om-color-text-soft);
font-size: 12px;
font-weight: 600;
}
.om-product-grid--catalogue-list {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.om-product-card--disabled {
cursor: pointer;
}
.om-product-card__note {
margin: 10px 0 0;
color: #7b8494;
font-size: 11px;
line-height: 1.4;
}
.om-catalogue-empty {
padding: 22px 24px;
border: 1px solid var(--om-color-border);
background: #fff;
color: #576076;
font-size: 14px;
line-height: 1.5;
}
/* --- Filters sidebar --- */
.om-filters-sidebar {
padding-top: 6px;
}
.om-filter-group {
border-top: 1px solid #d9dde4;
padding-top: 18px;
margin-bottom: 32px;
}
.om-filter-group__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.om-filter-group__header h3 {
margin: 0;
font-size: 17px;
line-height: 1.15;
font-weight: 700;
color: var(--om-color-primary);
}
.om-filter-toggle {
width: 22px;
height: 22px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.om-filter-toggle svg {
width: 100%;
height: 100%;
fill: #1c4f9d;
}
.om-filter-search {
position: relative;
margin-bottom: 18px;
}
.om-filter-search input {
width: 100%;
height: 34px;
padding: 0 34px 0 12px;
border: 1px solid #dfe4ea;
border-radius: 6px;
background: #fafafa;
color: #31405a;
font-size: 11px;
outline: none;
transition: border-color 0.2s ease;
}
.om-filter-search input::placeholder {
color: #98a0ac;
}
.om-filter-search button {
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
width: 18px;
height: 18px;
border: 0;
background: transparent;
cursor: pointer;
}
.om-filter-search svg {
width: 100%;
height: 100%;
fill: #8e98a7;
}
.om-filter-list,
.om-filter-sublist {
margin: 0;
padding: 0;
list-style: none;
}
.om-filter-list li + li {
margin-top: 10px;
}
.om-filter-list__nested {
margin-top: 10px;
}
.om-filter-sublist {
margin-top: 12px;
padding-left: 30px;
}
.om-filter-sublist li + li {
margin-top: 10px;
}
/* --- Checkbox --- */
.om-checkbox {
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
position: relative;
}
.om-checkbox input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.om-checkbox__mark {
width: 16px;
height: 16px;
border: 1px solid #d4d9e1;
background: #fff;
position: relative;
flex: 0 0 16px;
transition: border-color 0.2s ease;
}
.om-checkbox input:checked + .om-checkbox__mark::after {
content: "";
position: absolute;
left: 4px;
top: 1px;
width: 5px;
height: 9px;
border: solid #263047;
border-width: 0 1.5px 1.5px 0;
transform: rotate(45deg);
}
.om-checkbox__label {
font-size: 11px;
line-height: 1.3;
color: #5f6778;
}
.om-checkbox input:checked ~ .om-checkbox__label {
color: #1c253d;
font-weight: 600;
}
/* =============================================================================
17. Advantages / Benefits bar
============================================================================= */
/* --- Advantages bar (occasion/reconditionne) --- */
.om-advantages {
padding: 16px 0 36px;
}
.om-advantages-bar {
background: var(--om-color-primary-light);
border-radius: 4px;
min-height: 78px;
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
align-items: center;
padding: 0 34px;
}
.om-advantage-item {
display: flex;
align-items: center;
gap: 14px;
color: #fff;
}
.om-advantage-item__icon {
width: 28px;
height: 28px;
flex: 0 0 28px;
}
.om-advantage-item__icon svg {
width: 100%;
height: 100%;
fill: currentColor;
}
.om-advantage-item p {
margin: 0;
font-size: 12px;
line-height: 1.25;
font-weight: 600;
}
/* --- Benefits bar (boutique en ligne) --- */
.om-shop-benefits {
padding: 16px 0 38px;
}
.om-benefits-bar {
background: var(--om-color-primary-deep);
border-radius: 4px;
min-height: 82px;
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
padding: 0 54px;
}
.om-benefit-item {
display: flex;
align-items: center;
gap: 16px;
color: #fff;
}
.om-benefit-item__icon {
width: 28px;
height: 28px;
flex: 0 0 28px;
}
.om-benefit-item__icon svg {
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
}
.om-benefit-item p {
margin: 0;
font-size: 13px;
line-height: 1.25;
font-weight: 400;
}
/* --- Shipping banner (mobile boutique) --- */
.om-shipping-banner {
background: var(--om-color-primary);
padding: 8px 10px;
text-align: center;
}
.om-shipping-banner p {
margin: 0;
color: #fff;
font-size: 11px;
line-height: 1.3;
font-weight: 800;
}
/* =============================================================================
18. Guarantee panel
============================================================================= */
.om-guarantee {
padding: 0 0 34px;
}
.om-guarantee-panel {
display: grid;
grid-template-columns: 1fr 440px;
min-height: 280px;
}
.om-guarantee-panel__content {
background: var(--om-color-primary-light);
color: #fff;
padding: 34px 46px;
text-align: center;
}
.om-guarantee-panel__content h2 {
margin: 0 0 24px;
font-size: 22px;
line-height: 1.15;
font-weight: 800;
}
.om-guarantee-panel__content p {
margin: 0 0 18px;
font-size: 13px;
line-height: 1.55;
font-weight: 500;
}
.om-guarantee-panel__content p:last-child {
margin-bottom: 0;
}
.om-guarantee-features {
background: var(--om-color-primary-light);
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr 1fr;
gap: 8px;
padding-left: 8px;
}
.om-guarantee-feature {
background: #fff;
min-height: 136px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
text-align: center;
}
.om-guarantee-feature--tall {
grid-column: 2;
grid-row: 1 / span 2;
}
.om-guarantee-feature__icon {
width: 38px;
height: 38px;
color: #6f9df1;
}
.om-guarantee-feature__icon svg {
width: 100%;
height: 100%;
fill: currentColor;
}
.om-guarantee-feature h3 {
margin: 0;
font-size: 13px;
line-height: 1.4;
font-weight: 700;
color: #1b2b4b;
}
/* --- Page Nos Garanties (contenu en dur) --- */
.om-container--garanties {
max-width: 1000px;
}
.om-bandeau-slogan {
background-color: #2673FF;
text-align: center;
padding: 10px 16px;
}
.om-bandeau-slogan__inner {
color: #fff;
font-size: 15px;
font-weight: 500;
line-height: 1.3;
}
.om-ariane-retour {
display: inline-block;
margin-top: 20px;
padding-left: 20px;
font-size: 12px;
font-weight: 600;
color: #000034;
background-image: url('../images/ariane_noir.png');
background-repeat: no-repeat;
background-position: 0 3px;
text-decoration: none;
}
.om-page-hero {
padding: 0;
}
.om-page-hero .om-page-heading {
margin-top: 18px;
margin-bottom: 20px;
}
.om-garanties {
padding: 0 0 50px;
}
.om-garanties-grid {
display: grid;
grid-template-columns: 528px 1fr;
gap: 12px;
align-items: start;
}
.om-garanties-col-left {
display: flex;
flex-direction: column;
gap: 20px;
padding-top: 10px;
}
.om-garanties-col-right {
padding-top: 40px;
}
.om-garantie-bloc {
position: relative;
color: #fff;
border-radius: 7px;
padding: 30px 25px;
box-sizing: border-box;
background-repeat: no-repeat;
background-position: 97% 25px;
}
.om-garantie-bloc--1 {
background-color: #0B1956;
background-image: url('../images/ico_bloque_1_nos_garanties.png');
}
.om-garantie-bloc--2 {
background-color: #004A93;
background-image: url('../images/ico_bloque_2_nos_garanties.png');
}
.om-garantie-bloc--3 {
background-color: #3882CB;
background-image: url('../images/ico_bloque_3_nos_garanties.png');
}
.om-garantie-bloc__inner {
display: block;
}
.om-garantie-bloc__titre {
margin: 0;
padding-top: 20px;
padding-right: 60px;
font-size: 18px;
font-weight: 800;
line-height: 1.25;
color: #fff;
}
.om-garantie-bloc__sous-titre {
margin: 0;
padding-top: 25px;
padding-bottom: 15px;
font-size: 15px;
font-weight: 700;
line-height: 1.35;
color: #fff;
}
.om-garantie-bloc__contenu {
font-size: 15px;
line-height: 1.55;
color: #fff;
}
.om-garantie-bloc__contenu a {
color: #fff;
text-decoration: underline;
}
/* =============================================================================
19. Services / Process steps
============================================================================= */
/* --- Services hero --- */
.om-moving-hero {
padding: 48px 0 28px;
}
.om-moving-hero__inner {
display: grid;
grid-template-columns: 1fr 470px;
gap: 36px;
align-items: center;
}
.om-moving-hero__content {
padding-top: 22px;
}
.om-moving-hero__content h1 {
margin: 0 0 14px;
font-size: 52px;
line-height: 1.05;
font-weight: 800;
color: var(--om-color-primary);
}
.om-moving-hero__content h2 {
margin: 0 0 16px;
max-width: 560px;
font-size: 23px;
line-height: 1.22;
font-weight: 800;
color: #152545;
}
.om-moving-hero__content p {
margin: 0 0 24px;
max-width: 560px;
font-size: 14px;
line-height: 1.6;
color: #46607d;
}
.om-moving-hero__visual {
display: flex;
align-items: center;
justify-content: center;
}
.om-moving-hero__visual img {
width: 100%;
max-width: 430px;
object-fit: contain;
}
/* --- Process steps --- */
.om-process {
padding: 0 0 42px;
}
.om-process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.om-process-card {
min-height: 210px;
padding: 22px 18px 20px;
color: #fff;
}
.om-process-card--dark {
background: #0b56a8;
}
.om-process-card--medium {
background: #3a79bb;
}
.om-process-card--medium-dark {
background: #4d7cb0;
}
.om-process-card--light {
background: #98b4d0;
}
.om-process-card__number {
display: block;
margin-bottom: 12px;
font-size: 37px;
line-height: 1;
font-weight: 500;
}
.om-process-card h3 {
margin: 0 0 12px;
font-size: 24px;
line-height: 1.15;
font-weight: 700;
}
.om-process-card p {
margin: 0;
font-size: 13px;
line-height: 1.55;
max-width: 215px;
}
/* =============================================================================
20. Reassurance
============================================================================= */
.om-reassurance {
padding: 0 0 42px;
}
.om-reassurance-panel {
display: grid;
grid-template-columns: 1fr 428px;
min-height: 290px;
}
.om-reassurance-panel__content {
background: var(--om-color-accent);
color: #fff;
padding: 38px 46px;
text-align: center;
}
.om-reassurance-panel__content h2 {
margin: 0 0 18px;
font-size: 34px;
line-height: 1.15;
font-weight: 800;
}
.om-reassurance-panel__content p {
margin: 0 auto 26px;
max-width: 540px;
font-size: 14px;
line-height: 1.65;
}
.om-reassurance-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
background: var(--om-color-accent);
padding-left: 8px;
}
.om-reassurance-card {
background: #fff;
min-height: 141px;
padding: 22px 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.om-reassurance-card__icon {
width: 42px;
height: 42px;
margin-bottom: 14px;
color: var(--om-color-accent);
}
.om-reassurance-card__icon svg {
width: 100%;
height: 100%;
fill: currentColor;
}
.om-reassurance-card h3 {
margin: 0;
font-size: 14px;
line-height: 1.4;
font-weight: 700;
color: #1b2b4b;
}
/* =============================================================================
21. Buttons (all types)
============================================================================= */
.om-btn-primary,
.om-btn-outline,
.om-btn-light,
.om-btn-callback {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
cursor: pointer;
transition: all 0.2s ease;
}
/* --- Primary button (pill) --- */
.om-btn-primary {
min-width: 170px;
height: 34px;
padding: 0 20px;
border-radius: 20px;
background: var(--om-color-primary);
color: #fff;
font-size: 13px;
font-weight: 700;
}
/* --- Primary button (square, form submit) --- */
.om-btn-primary--square {
border-radius: 4px;
background: var(--om-color-primary-dark);
min-width: 128px;
height: 38px;
font-size: 12px;
}
/* --- Primary button (small) --- */
.om-btn-primary--small {
min-width: 128px;
height: 40px;
border-radius: 4px;
}
/* --- Primary button (full width, mobile) --- */
.om-btn-primary--full {
width: 100%;
border-radius: 6px;
}
/* --- Outline button --- */
.om-btn-outline {
min-width: 170px;
height: 30px;
padding: 0 22px;
border: 1px solid #7fa3c7;
border-radius: 20px;
color: #6a7a93;
font-size: 13px;
font-weight: 500;
background: transparent;
}
/* --- Light button --- */
.om-btn-light {
min-width: 180px;
height: 34px;
padding: 0 20px;
border-radius: 20px;
background: #fff;
color: #49627c;
font-size: 13px;
font-weight: 500;
}
/* --- Callback button --- */
.om-btn-callback {
min-width: 168px;
height: 30px;
border-radius: 18px;
background: #f7f7f7;
color: #3e4758;
font-size: 12px;
font-weight: 500;
}
/* --- Primary button (alias CTA hero + form submit, square, dark) --- */
.om-primary-button,
.om-light-button {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
border: 0;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.om-primary-button {
min-width: 178px;
height: 38px;
padding: 0 20px;
border-radius: 5px;
background: var(--om-color-primary-dark);
color: #fff;
font-size: 12px;
font-weight: 700;
font-family: inherit;
}
.om-primary-button--small {
min-width: 136px;
height: 40px;
}
.om-primary-button:hover {
background: #08184e;
color: #fff;
}
/* --- Light button (alias reassurance, pill, white) --- */
.om-light-button {
min-width: 168px;
height: 36px;
padding: 0 18px;
border-radius: 22px;
background: #fff;
color: #42607f;
font-size: 13px;
font-weight: 500;
font-family: inherit;
}
.om-light-button:hover {
background: #f4f8ff;
color: var(--om-color-primary);
}
/* --- Outline button (alias voir tout, pill, transparent) --- */
.om-outline-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 170px;
height: 30px;
padding: 0 22px;
border: 1px solid #7fa3c7;
border-radius: 20px;
background: transparent;
color: #6a7a93;
font-size: 13px;
font-weight: 500;
font-family: inherit;
text-decoration: none;
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease;
}
.om-outline-button:hover {
border-color: var(--om-color-primary);
color: var(--om-color-primary);
}
/* --- Bottom toolbar (mobile catalogue) --- */
.om-bottom-toolbar {
position: fixed;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 100%;
max-width: 100%;
height: 54px;
background: #f4f4f4;
border-top: 1px solid #d7d7d7;
display: none;
grid-template-columns: 1fr 1fr;
z-index: 20;
}
.om-bottom-toolbar__button {
border: 0;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
color: #1d2434;
font-size: 14px;
font-weight: 700;
cursor: pointer;
}
.om-bottom-toolbar__button + .om-bottom-toolbar__button {
border-left: 1px solid #dfdfdf;
}
.om-bottom-toolbar__button svg {
width: 19px;
height: 19px;
fill: #1d2434;
}
/* =============================================================================
22. Hover states
============================================================================= */
.om-main-nav a:hover,
.om-header-actions__link:hover,
.om-footer-nav a:hover,
.om-breadcrumb__back:hover,
.om-clear-filters:hover {
color: var(--om-color-primary);
}
.om-shop-button:hover,
.om-btn-primary:hover {
background: #00458b;
}
.om-btn-primary--square:hover {
background: #08184e;
}
.om-btn-outline:hover {
border-color: var(--om-color-primary);
color: var(--om-color-primary);
}
.om-btn-light:hover {
background: #f3fbff;
color: var(--om-color-primary);
}
.om-btn-callback:hover {
background: #ffffff;
}
.om-product-card:hover {
border-color: #cfe0ef;
box-shadow: 0 6px 18px rgba(0, 82, 163, 0.12);
transform: translateY(-2px);
}
.om-product-card:hover .om-product-card__image img,
.om-product-card:hover .om-product-card--simple img,
.om-product-card--simple:hover img,
.om-product-card--shop:hover img {
transform: scale(1.05);
}
.om-product-card:hover .om-product-card__add {
background: var(--om-color-primary);
}
.om-product-card--simple img,
.om-product-card--shop img {
transition: transform 0.3s ease;
}
.om-sort-button:hover,
.om-sort-select:hover,
.om-sort-select:focus,
.om-filter-search input:focus,
.om-checkbox:hover .om-checkbox__mark {
border-color: #b8c5d6;
}
/* =============================================================================
23. Responsive — Tablet (max-width: 1024px)
============================================================================= */
@media (max-width: 1024px) {
/* Container */
.om-container {
padding: 0 20px;
}
/* Header desktop -> masque */
.om-header-main__inner {
grid-template-columns: 200px 1fr 280px;
gap: 16px;
height: 70px;
}
.om-logo img {
width: 180px;
}
.om-main-nav ul {
gap: 24px;
}
/* Hero */
.om-hero-banner {
height: 400px;
}
.om-hero-banner__image {
height: 340px;
}
.om-hero-banner__content {
top: 60px;
right: 40px;
}
.om-hero-tabs {
height: 70px;
}
.om-hero-tabs__item {
font-size: 14px;
}
/* Product strip */
.om-product-strip__inner {
grid-template-columns: 1fr;
}
.om-product-grid--5 {
grid-template-columns: repeat(4, 1fr);
}
.om-product-grid--catalogue-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Brands */
.om-brands__inner {
flex-wrap: wrap;
gap: 20px;
}
.om-brands__list {
gap: 20px;
}
/* Opportunities */
.om-opportunities-box {
padding: 24px 40px 30px;
}
/* Rental */
.om-rental-panel {
grid-template-columns: 1fr 360px;
}
.om-rental-panel__content {
padding: 40px 40px 30px;
}
/* Buyback */
.om-buyback-panel__content {
padding: 24px 30px 24px 16px;
}
/* Contact */
.om-contact-box {
grid-template-columns: 1fr 350px;
gap: 30px;
padding: 40px 40px 30px;
}
/* Footer */
.om-footer-main__inner {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
/* Callback banner */
.om-callback-banner {
padding: 0 24px;
grid-template-columns: 1fr 1fr;
}
.om-callback-banner__cta {
padding-left: 20px;
gap: 16px;
}
/* Category cards */
.om-category-card {
height: auto;
min-height: 200px;
grid-template-columns: 1fr 1fr;
}
.om-category-card--light,
.om-category-card--mint {
grid-template-columns: 1fr 1fr;
}
.om-category-card__content {
padding: 24px 24px 24px 40px;
}
.om-category-card--light .om-category-card__content,
.om-category-card--mint .om-category-card__content {
padding: 24px 24px 24px 20px;
}
/* Catalogue */
.om-catalogue-layout {
grid-template-columns: 220px 1fr;
gap: 24px;
}
.om-catalogue-intro {
padding: 40px 60px;
}
.om-catalogue-intro--compact {
padding: 22px 60px;
}
/* Advantages */
.om-advantages-bar {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
padding: 16px 24px;
}
.om-benefits-bar {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
padding: 16px 34px;
}
/* Guarantee */
.om-guarantee-panel {
grid-template-columns: 1fr 350px;
}
/* Page Nos Garanties */
.om-garanties-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.om-garanties-col-left,
.om-garanties-col-right {
padding-top: 0;
}
/* Services hero */
.om-moving-hero__inner {
grid-template-columns: 1fr 380px;
gap: 24px;
}
.om-moving-hero__content h1 {
font-size: 40px;
}
/* Process */
.om-process-grid {
grid-template-columns: repeat(2, 1fr);
}
/* Reassurance */
.om-reassurance-panel {
grid-template-columns: 1fr 350px;
}
}
/* =============================================================================
24. Responsive — Mobile (max-width: 768px)
============================================================================= */
@media (max-width: 768px) {
/* Container */
.om-container {
padding: 0 16px;
}
/* Header — switch to mobile layout */
.om-header-main__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
height: auto;
padding: 12px 0;
gap: 10px;
}
.om-header-mobile {
display: block;
}
/* Actions header en mobile : logo a gauche, user + cart a droite, revendre + aide masques */
.om-header-actions {
display: flex;
margin-left: auto;
gap: 10px;
align-items: center;
}
.om-header-actions__link {
display: none;
}
.om-header-aide {
display: none;
}
.om-header-user-group {
display: inline-flex;
align-items: center;
gap: 12px;
}
.om-header-user img {
height: 28px;
}
.om-header-cart img {
height: 26px;
}
.om-header-nav {
display: none !important;
}
.om-logo {
flex: 0 0 auto;
display: flex;
justify-content: flex-start;
padding-left: 8px;
}
.om-logo img {
width: 130px;
}
.om-search-bar {
width: 100%;
order: 10;
}
.om-search-bar .cadre_saisie_semi_auto_recherche_article section {
height: 40px;
}
.om-search-bar input {
padding: 0 14px !important;
font-size: 12px;
}
.om-topbar {
height: auto;
padding: 7px 16px;
}
.om-topbar p {
font-size: 9px;
line-height: 1.3;
text-align: center;
}
/* Burger a droite apres les pictos user/cart */
.om-mobile-menu-toggle {
display: flex !important;
position: static !important;
top: auto !important;
right: auto !important;
order: 5;
padding: 4px 6px;
}
/* Espace entre le header et la video hero */
.om-hero {
padding-top: 18px;
}
/* Hero mobile : video en haut, titre dans la zone video, tabs en-dessous sans chevauchement */
.om-hero-banner {
min-height: auto;
height: auto;
border-radius: 8px 8px 0 0;
display: flex;
flex-direction: column;
}
.om-hero-banner__video {
position: relative;
width: 100%;
height: 210px;
object-fit: cover;
}
.om-hero-banner__content {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 210px;
padding: 16px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
text-align: right;
bottom: auto;
z-index: 2;
}
.om-hero-banner__content h1 {
font-size: 22px;
max-width: 220px;
margin: 0 0 6px;
line-height: 1.2;
}
.om-hero-banner__content p {
font-size: 10px;
margin: 0;
}
.om-hero-tabs {
position: relative;
grid-template-columns: repeat(2, 1fr);
height: auto;
left: auto;
right: auto;
bottom: auto;
}
.om-hero-tabs__item {
min-height: 56px;
padding: 12px 10px;
font-size: 12px;
font-weight: 700;
}
/* Damier de couleur en mobile : inversion du 3e (Location) et 4e (Services) */
.om-hero-tabs .om-hero-tabs__item:nth-child(3) {
background: var(--om-color-primary);
}
.om-hero-tabs .om-hero-tabs__item:nth-child(4) {
background: var(--om-color-primary-dark);
}
/* Section intro mobile */
.om-section-intro {
padding-top: 18px;
margin-bottom: 10px;
}
.om-section-intro h2 {
font-size: 26px;
}
.om-section-intro p {
font-size: 13px;
margin-bottom: 14px;
}
/* Product grids mobile */
.om-product-grid--3,
.om-product-grid--4,
.om-product-grid--5 {
grid-template-columns: 1fr;
}
/* Catalogue occasion : images carrees sur mobile */
.om-product-card__image {
height: auto;
aspect-ratio: 1 / 1;
padding: 12px;
}
.om-product-card__image img {
max-height: 100%;
width: 100%;
object-fit: contain;
}
/* Espace en bas pour la barre fixe Filtrer/Trier */
.om-catalogue {
padding-bottom: 64px;
}
.om-product-grid--catalogue-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.om-product-grid {
gap: 12px;
}
.om-product-card--simple,
.om-product-card--shop,
.om-deal-card {
min-height: auto;
padding: 12px 10px 14px;
}
.om-product-card--simple img,
.om-product-card--shop img,
.om-deal-card img,
.om-card-media-placeholder--simple,
.om-card-media-placeholder--shop,
.om-card-media-placeholder--deal {
height: 110px;
margin-bottom: 12px;
}
.om-product-card--simple h3,
.om-deal-card h3 {
font-size: 11px;
}
.om-product-card--shop h3,
.om-deal-card h3 {
min-height: 0;
margin: 0;
}
.om-product-card--shop p,
.om-deal-card p {
margin: 10px 0 0;
font-size: 18px;
}
/* Product strip mobile */
.om-product-strip__inner {
grid-template-columns: 1fr;
gap: 16px;
}
.contenu_page_accueil .om-product-grid--4,
.contenu_page_accueil .om-product-grid--5 {
display: flex;
gap: 12px;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 10px;
margin-bottom: 14px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.contenu_page_accueil .om-product-grid--4::-webkit-scrollbar,
.contenu_page_accueil .om-product-grid--5::-webkit-scrollbar {
display: none;
}
.contenu_page_accueil .om-product-grid--4 > .om-product-card,
.contenu_page_accueil .om-product-grid--5 > .om-deal-card {
flex: 0 0 70%;
scroll-snap-align: start;
}
.contenu_page_accueil .om-product-strip {
padding: 18px 16px 0;
}
.contenu_page_accueil .om-product-strip__inner {
gap: 0;
}
.contenu_page_accueil .om-section-intro {
padding-top: 0;
}
.contenu_page_accueil .om-mobile-only {
display: flex;
}
.contenu_page_accueil .om-desktop-only {
display: none !important;
}
.contenu_page_accueil .om-section-action .om-outline-button {
font-size: 13px;
}
.contenu_page_accueil .om-opportunities {
margin: 18px 16px 0;
padding: 0;
}
.contenu_page_accueil .om-opportunities .om-section-heading {
margin-bottom: 10px;
}
.contenu_page_accueil .om-opportunities .om-section-heading p {
font-size: 13px;
}
/* Brands mobile */
.om-brands {
padding: 18px 0 20px;
text-align: center;
}
.om-brands__inner {
flex-direction: column;
gap: 16px;
}
.om-brands h2 {
font-size: 24px;
font-weight: 700;
}
.om-brands__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.om-brands__list a {
background: #fff;
border: 1px solid var(--om-color-border);
border-radius: 10px;
min-height: 60px;
padding: 8px 10px;
display: flex;
align-items: center;
justify-content: center;
}
.om-brands .om-brands__list a img {
height: 26px;
width: auto;
max-width: 80%;
margin: 0 auto;
object-fit: contain;
}
/* Opportunities mobile */
.om-opportunities-box {
padding: 20px 16px;
margin: 0;
}
/* Rental mobile */
.om-rental {
padding: 18px 0 24px;
}
.om-rental-panel {
grid-template-columns: 1fr;
}
.om-rental-panel__content {
padding: 24px 18px;
text-align: center;
}
.om-rental-panel__content h2 {
font-size: 24px;
margin-bottom: 16px;
}
.om-rental-panel__content p {
font-size: 13px;
margin-bottom: 18px;
}
.om-rental-panel__actions {
flex-direction: column;
align-items: center;
gap: 10px;
}
.om-rental-panel__actions .om-light-button {
min-width: 0;
width: auto;
padding: 0 28px;
}
.om-rental-features {
border-left: 0;
gap: 8px;
padding-top: 8px;
}
.om-feature-card {
padding: 18px 12px;
min-height: 122px;
}
.om-feature-card__icon {
width: 34px;
height: 34px;
margin-bottom: 12px;
}
.om-feature-card h3 {
font-size: 12px;
}
/* Buyback mobile */
.om-buyback-panel {
grid-template-columns: 1fr;
padding: 18px 18px 22px;
margin-top: 8px;
}
.om-buyback-panel__illustration {
order: 1;
}
.om-buyback-panel__illustration img {
max-width: 100%;
height: 160px;
margin-bottom: 12px;
}
.om-buyback-panel__content {
order: 2;
padding: 0;
text-align: center;
}
.om-buyback-panel__content h2 {
font-size: 24px;
margin-bottom: 8px;
}
.om-buyback-panel__content p {
font-size: 13px;
margin-bottom: 16px;
}
.om-buyback-panel .om-light-button {
align-self: center;
}
/* Contact mobile */
.om-contact {
padding: 0 0 24px;
}
.om-contact-box {
grid-template-columns: 1fr;
gap: 18px;
padding: 22px 16px 16px;
max-width: 100%;
}
.om-contact-form {
max-width: 100%;
}
.om-form-grid {
gap: 12px;
}
.om-form-field input {
height: 34px;
font-size: 12px;
padding: 0 6px 10px;
}
.om-form-field textarea {
height: 96px;
font-size: 12px;
padding: 8px 6px;
}
.om-form-footer {
margin-top: 18px;
display: grid;
gap: 12px;
}
.om-captcha-visual {
width: 100%;
max-width: 180px;
height: 36px;
font-size: 19px;
letter-spacing: 0.28em;
}
.om-captcha-box {
display: grid;
}
.om-captcha-box input {
width: 120px;
height: 32px;
}
.om-contact-image img {
min-height: auto;
height: 240px;
}
/* File upload mobile */
.om-file-upload-row {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.om-file-upload {
width: 140px;
height: 30px;
}
/* Footer mobile */
.om-footer-main__inner {
grid-template-columns: 1fr;
gap: 18px;
text-align: center;
}
.om-logo--footer {
display: flex;
justify-content: center;
}
.om-logo--footer img {
width: 170px;
}
.om-footer-brand p {
margin: 12px auto 0;
}
.om-newsletter-form input {
width: 100%;
height: 34px;
}
.om-social-links {
justify-content: center;
gap: 14px;
}
.om-social-links a {
width: 28px;
height: 28px;
}
.om-footer-bottom .om-container {
height: auto;
padding: 14px 16px;
justify-content: center;
}
.om-footer-bottom p {
font-size: 10px;
text-align: center;
}
/* Callback banner mobile */
.om-callback-banner {
grid-template-columns: 1fr;
height: auto;
padding: 14px 16px;
gap: 10px;
justify-items: center;
text-align: center;
}
.om-callback-banner__contact {
justify-content: center;
}
.om-callback-banner__cta {
padding-left: 0;
flex-direction: column;
align-items: center;
gap: 10px;
}
.om-callback-banner__text strong {
font-size: 17px;
}
/* Category cards mobile */
.om-category-card {
height: auto;
grid-template-columns: 1fr;
padding: 18px 16px 16px;
}
.om-category-card--light,
.om-category-card--mint {
grid-template-columns: 1fr;
}
.om-category-card__content {
padding: 0;
}
.om-category-card--light .om-category-card__content,
.om-category-card--mint .om-category-card__content {
padding: 0;
}
.om-category-card__content h2 {
font-size: 24px;
margin-bottom: 10px;
}
.om-category-card__content p {
font-size: 13px;
margin-bottom: 16px;
}
.om-category-card__media {
margin-top: 16px;
height: auto;
}
.om-category-card__media img {
max-height: 180px;
}
/* Catalogue mobile */
.om-catalogue-layout {
grid-template-columns: 1fr;
gap: 0;
}
.om-filters-sidebar {
display: none;
}
.om-catalogue-intro {
padding: 22px 18px;
}
.om-catalogue-intro--compact {
padding: 16px 18px;
}
.om-catalogue-intro h1 {
font-size: 28px;
margin-bottom: 12px;
}
.om-catalogue-intro p {
font-size: 14px;
}
.om-catalogue-toolbar {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.om-product-grid--3 {
grid-template-columns: 1fr;
}
.om-product-card__image {
height: 150px;
padding: 12px 10px 6px;
}
.om-product-card__image img {
max-height: 125px;
}
.om-product-card__content {
padding: 10px 12px 14px;
}
.om-product-card__content h2 {
font-size: 12px;
}
.om-product-card__content h3 {
font-size: 15px;
min-height: auto;
}
.om-product-card__price strong {
font-size: 16px;
font-weight: 800;
}
/* Catalogue occasion mobile : aligner les vignettes sur celles de la boutique (image en gros centree + texte en dessous avec memes tailles) */
.om-product-grid--3 .om-product-card {
border-color: #cfe0ef;
border-radius: 2px;
min-height: 390px;
position: relative;
}
.om-product-grid--3 .om-product-card__image {
height: 230px;
width: 100%;
aspect-ratio: auto;
padding: 24px 14px 10px;
align-items: center;
}
.om-product-grid--3 .om-product-card__image img {
max-width: 90%;
max-height: 178px;
width: auto;
}
.om-product-grid--3 .om-product-card__content {
padding: 0 18px 16px;
}
.om-product-grid--3 .om-product-card__content h3 {
margin: 2px 0 4px;
min-height: 34px;
font-size: 18px;
font-weight: 600;
line-height: 1.2;
}
.om-product-grid--3 .om-product-card__type {
margin: 0 0 18px;
font-size: 12px;
}
.om-product-grid--3 .om-product-card__price strong {
font-size: 20px;
font-weight: 500;
}
/* Breadcrumb mobile */
.om-breadcrumb {
margin-bottom: 14px;
}
/* Page heading mobile */
.om-page-heading h1 {
font-size: 23px;
}
/* Advantages mobile */
.om-advantages-bar {
grid-template-columns: 1fr;
padding: 0;
gap: 0;
border-radius: 0;
}
.om-advantage-item {
padding: 10px 12px;
gap: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.om-advantage-item:first-child {
border-top: 0;
}
.om-advantage-item__icon {
width: 22px;
height: 22px;
flex: 0 0 22px;
}
.om-advantage-item p {
font-size: 11px;
}
/* Mobile : texte sur une seule ligne, neutraliser les
du HTML */
.om-advantage-item p br {
display: none;
}
/* Benefits mobile */
.om-benefits-bar {
grid-template-columns: 1fr;
padding: 0;
gap: 0;
border-radius: 0;
}
.om-benefit-item {
padding: 10px 12px;
gap: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.om-benefit-item:first-child {
border-top: 0;
}
.om-benefit-item__icon {
width: 22px;
height: 22px;
flex: 0 0 22px;
}
.om-benefit-item p {
font-size: 11px;
}
/* Guarantee mobile */
.om-guarantee-panel {
grid-template-columns: 1fr;
}
.om-guarantee-panel__content {
padding: 24px 18px;
}
.om-guarantee-panel__content h2 {
font-size: 20px;
}
.om-guarantee-features {
padding-left: 0;
gap: 8px;
padding-top: 8px;
}
.om-guarantee-feature {
min-height: 122px;
padding: 18px 12px;
}
.om-guarantee-feature__icon {
width: 34px;
height: 34px;
}
.om-guarantee-feature h3 {
font-size: 12px;
}
/* Page Nos Garanties mobile */
.om-bandeau-slogan {
padding: 8px 12px;
}
.om-bandeau-slogan__inner {
font-size: 13px;
}
.om-ariane-retour {
margin-top: 14px;
}
.om-page-hero {
padding: 0;
}
.om-page-hero .om-page-heading {
margin-top: 12px;
margin-bottom: 14px;
}
.om-garanties {
padding: 0 0 36px;
}
.om-garanties-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.om-garanties-col-left,
.om-garanties-col-right {
padding-top: 0;
}
.om-garanties-col-left {
gap: 16px;
}
.om-garantie-bloc {
padding: 24px 18px;
background-size: 44px auto;
background-position: calc(100% - 14px) 18px;
}
.om-garantie-bloc__titre {
padding-top: 0;
padding-right: 60px;
font-size: 17px;
}
.om-garantie-bloc__sous-titre {
padding-top: 18px;
padding-right: 60px;
padding-bottom: 10px;
font-size: 14px;
}
.om-garantie-bloc__contenu {
font-size: 14px;
line-height: 1.55;
}
/* Services hero mobile */
.om-moving-hero {
padding: 18px 16px 0;
}
.om-moving-hero .om-container {
padding: 0;
}
.om-moving-hero__inner {
grid-template-columns: 1fr;
gap: 0;
}
.om-moving-hero__visual {
order: -1;
margin-bottom: 14px;
}
.om-moving-hero__visual img {
max-width: 270px;
}
.om-moving-hero__content {
padding-top: 0;
text-align: center;
}
.om-moving-hero__content h1 {
font-size: 34px;
margin-bottom: 12px;
}
.om-moving-hero__content h2 {
font-size: 20px;
max-width: 100%;
margin-bottom: 14px;
}
.om-moving-hero__content p {
font-size: 13px;
max-width: 100%;
margin-bottom: 18px;
}
/* Process mobile */
.om-process {
padding: 18px 16px 0;
}
.om-process .om-container {
padding: 0;
}
.om-process-grid {
grid-template-columns: 1fr;
}
.om-process-card {
min-height: auto;
padding: 18px 16px;
}
.om-process-card__number {
font-size: 30px;
margin-bottom: 10px;
}
.om-process-card h3 {
font-size: 22px;
margin-bottom: 10px;
}
.om-process-card p {
width: 100%;
max-width: none;
}
/* Reassurance mobile */
.om-reassurance-panel {
grid-template-columns: 1fr;
}
.om-reassurance-panel__content {
padding: 24px 18px;
}
.om-reassurance-panel__content h2 {
font-size: 28px;
margin-bottom: 16px;
}
.om-reassurance-panel__content p {
font-size: 13px;
margin-bottom: 18px;
}
.om-reassurance-grid {
padding-left: 0;
gap: 8px;
padding-top: 8px;
}
.om-reassurance-card {
min-height: 122px;
padding: 18px 12px;
}
.om-reassurance-card__icon {
width: 34px;
height: 34px;
margin-bottom: 12px;
}
.om-reassurance-card h3 {
font-size: 12px;
}
/* Buttons mobile */
.om-btn-primary {
min-width: 150px;
height: 36px;
font-size: 12px;
border-radius: 6px;
}
.om-primary-button {
min-width: 160px;
height: 40px;
font-size: 13px;
}
.om-primary-button--small {
min-width: 128px;
height: 38px;
}
.om-light-button {
min-width: 150px;
height: 34px;
font-size: 12px;
}
.om-btn-outline {
min-width: 150px;
height: 38px;
font-size: 13px;
}
.om-btn-light {
min-width: 140px;
height: 34px;
font-size: 12px;
}
.om-btn-callback {
min-width: 118px;
height: 32px;
}
/* Bottom toolbar visible on mobile */
.om-bottom-toolbar {
display: grid;
}
/* Mobile menu visible */
.om-mobile-menu-toggle {
display: flex;
}
.om-header-nav {
display: none;
}
.om-mobile-menu--open {
display: block;
}
}
/* =============================================================================
23. Mobile menu toggle & overlay (header.php)
============================================================================= */
.om-mobile-menu-toggle {
display: none;
position: absolute;
top: 50px;
right: 16px;
flex-direction: column;
gap: 5px;
cursor: pointer;
z-index: 110;
padding: 8px;
}
.om-mobile-menu-toggle span {
display: block;
width: 22px;
height: 2px;
background: var(--om-color-text);
border-radius: 1px;
transition: transform 0.2s;
}
.om-mobile-menu {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 200;
}
.om-mobile-menu--open {
display: block;
}
.om-mobile-nav {
position: relative;
background: #fff;
max-width: 320px;
height: 100%;
padding: 60px 24px 24px;
display: flex;
flex-direction: column;
gap: 0;
overflow-y: auto;
}
.om-mobile-nav__close {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
font-size: 32px;
line-height: 1;
color: var(--om-color-text);
cursor: pointer;
padding: 6px 12px;
z-index: 1;
}
.om-mobile-nav__close:hover,
.om-mobile-nav__close:focus {
color: var(--om-color-primary);
outline: none;
}
.om-mobile-nav a {
display: block;
padding: 14px 0;
border-bottom: 1px solid var(--om-color-border);
color: var(--om-color-text);
font-size: 14px;
font-weight: 500;
}
.om-mobile-nav__shop {
margin-top: 16px;
background: var(--om-color-primary);
color: #fff !important;
text-align: center;
border-radius: 20px;
padding: 12px 0 !important;
border-bottom: none !important;
font-weight: 700 !important;
}
/* =============================================================================
24. Overrides CMS — widgets et plugins existants
============================================================================= */
/* --- Barre de recherche widget CMS --- */
.om-search-bar .titre_barre_recherche,
.om-search-bar label,
.om-search-bar .label_recherche,
.om-search-bar #inset_formPQuaD,
.om-search-bar script {
display: none !important;
}
.om-search-bar > link {
display: none;
}
.om-search-bar .global_cadre_saisie_semi_auto_recherche_article {
width: 100%;
}
.om-search-bar,
.om-search-bar .cadre_saisie_semi_auto_recherche_article section {
display: flex;
align-items: center;
height: 44px;
border-radius: 6px;
overflow: visible;
background: #eef3f8;
border: 1px solid #e2e8ef;
width: 100%;
position: relative;
}
.om-search-bar .class_champs_recherche_article,
.om-search-bar input[type="text"],
.om-search-bar input[type="search"] {
flex: 1;
height: 100% !important;
border: 0 !important;
background: transparent !important;
padding: 0 18px !important;
color: #3d4863;
font-size: 13px;
outline: none;
font-family: var(--om-font-main);
margin: 0;
box-shadow: none !important;
}
.om-search-bar input::placeholder {
color: #8c97aa;
}
.om-search-bar .bouton_de_recherche_softaneo {
width: 50px;
height: 100%;
border: 0;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 0;
color: transparent;
position: relative;
flex-shrink: 0;
}
.om-search-bar .bouton_de_recherche_softaneo::after {
content: "";
display: block;
width: 18px;
height: 18px;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%232f3a55' d='M10.5 4a6.5 6.5 0 1 1 0 13a6.5 6.5 0 0 1 0-13Zm0 1.8a4.7 4.7 0 1 0 0 9.4a4.7 4.7 0 0 0 0-9.4Zm5.95 10.68l3.75 3.75l-1.27 1.27l-3.75-3.75z'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.om-search-bar .le_cadre_result_recherche_article {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 100;
background: #fff;
border: 1px solid #e2e8ef;
border-top: 0;
border-radius: 0 0 6px 6px;
max-height: 400px;
overflow-y: auto;
}
.om-search-bar button[type="submit"],
.om-search-bar .bouton_recherche {
width: 50px;
height: 100%;
border: 0;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.om-search-bar .bouton_recherche img,
.om-search-bar button svg {
width: 18px;
height: 18px;
}
/* --- Brands : SVG dans --- */
.om-brands__list a {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.om-brands__list a img {
height: 40px;
width: auto;
max-width: 180px;
object-fit: contain;
}
/* --- Panier widget CMS --- */
.om-header-icon--cart .pour_panier,
.om-header-icon--cart .contenu_panier_widget {
display: inline-flex;
align-items: center;
}
.om-header-icon--cart .nb_panier {
position: absolute;
top: -6px;
right: -8px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--om-color-primary);
color: #fff;
font-size: 10px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* --- Formulaire avance CMS (compilateur_formulaire) --- */
.formulaire_avance_global {
width: 100%;
}
.formulaire_avance_global .ligne_formulaire_avance {
margin-bottom: 14px;
}
.formulaire_avance_global input[type="text"],
.formulaire_avance_global input[type="email"],
.formulaire_avance_global input[type="tel"],
.formulaire_avance_global textarea,
.formulaire_avance_global select {
width: 100%;
border: 0;
border-bottom: 1px solid #d4d9df;
background: transparent;
padding: 8px 10px;
color: #273147;
font-size: 13px;
font-family: var(--om-font-main);
outline: none;
}
.formulaire_avance_global input[type="text"]:focus,
.formulaire_avance_global input[type="email"]:focus,
.formulaire_avance_global input[type="tel"]:focus,
.formulaire_avance_global textarea:focus {
border-bottom-color: var(--om-color-primary);
}
.formulaire_avance_global textarea {
min-height: 100px;
resize: vertical;
}
.formulaire_avance_global .bouton_envoi_formulaire,
.formulaire_avance_global button[type="submit"],
.formulaire_avance_global input[type="submit"] {
min-width: 128px;
height: 40px;
padding: 0 20px;
border: 0;
border-radius: 4px;
background: var(--om-color-primary);
color: #fff;
font-size: 13px;
font-weight: 700;
cursor: pointer;
font-family: var(--om-font-main);
}
.formulaire_avance_global .bouton_envoi_formulaire:hover,
.formulaire_avance_global button[type="submit"]:hover {
background: #00458b;
}
/* --- Captcha CMS --- */
.captcha_global,
.cadre_captcha {
display: flex;
align-items: flex-start;
gap: 12px;
margin-top: 16px;
flex-wrap: wrap;
}
.captcha_global img,
.cadre_captcha img {
max-height: 40px;
}
.captcha_global input,
.cadre_captcha input {
width: 110px;
height: 34px;
border: 1px solid #d8d8d8;
background: #fff;
padding: 0 8px;
font-size: 12px;
}
/* --- Contact image (complement au .om-contact-box defini plus haut) --- */
.om-contact-image img {
width: 100%;
height: 100%;
min-height: 510px;
object-fit: cover;
}
@media (max-width: 768px) {
.om-contact-image img {
min-height: auto;
height: 240px;
}
}
/* --- Formulaire CMS : largeur complete dans la box contact --- */
.om-contact-form-panel .formulaire_avance_global {
max-width: 100%;
}
.om-contact-form-panel .formulaire_avance_global input[type="text"],
.om-contact-form-panel .formulaire_avance_global input[type="email"],
.om-contact-form-panel .formulaire_avance_global input[type="tel"],
.om-contact-form-panel .formulaire_avance_global textarea {
width: 100%;
max-width: 100%;
}
.om-contact-form-panel .formulaire_avance_global img {
max-width: 300px;
height: auto;
margin-bottom: 10px;
}
/* --- Conteneurs CMS (pour pages fonctionnelles plugin : panier, profil) --- */
.contenu_centre {
max-width: var(--om-container-width);
margin: 0 auto;
padding: 0 24px;
}
.cadre_contenu_principale_partout {
min-height: 300px;
}
/* --- Popup auto front CMS --- */
#fenetre_popup {
z-index: 1000;
}
/* --- Masquer elements legacy non utilises --- */
.ligne_grise_header,
.section_user_panier_header,
.header_mobile,
.header_pc_tab,
.autour_de_menu_mobile {
display: none !important;
}
/* =============================================================================
25. Formulaires natifs (contact + newsletter + demenagement)
============================================================================= */
/* --- Formulaires natifs alignes sur les maquettes mutation_2026 --- */
.om-contact-form-native .om-form-grid,
.om-demenagement-form .om-form-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.om-contact-form-native .om-form-field--full,
.om-demenagement-form .om-form-field--full {
grid-column: 1 / -1;
}
.om-contact-form-native .om-form-field input,
.om-contact-form-native .om-form-field textarea,
.om-demenagement-form .om-form-field input,
.om-demenagement-form .om-form-field textarea {
width: 100%;
border: 0;
border-bottom: 1px solid #cfd5dd;
background: transparent;
padding: 0 8px 10px;
color: #243148;
font-size: 13px;
font-family: var(--om-font-main);
outline: none;
transition: border-color 0.2s;
}
.om-contact-form-native .om-form-field input:focus,
.om-contact-form-native .om-form-field textarea:focus,
.om-demenagement-form .om-form-field input:focus,
.om-demenagement-form .om-form-field textarea:focus {
border-bottom-color: var(--om-color-primary);
}
.om-contact-form-native .om-form-field textarea,
.om-demenagement-form .om-form-field textarea {
height: 120px;
resize: none;
padding-top: 8px;
}
.om-contact-form-native .om-form-field input::placeholder,
.om-contact-form-native .om-form-field textarea::placeholder,
.om-demenagement-form .om-form-field input::placeholder,
.om-demenagement-form .om-form-field textarea::placeholder {
color: #7d8593;
}
.om-contact-form-native .om-form-footer,
.om-demenagement-form .om-form-footer {
margin-top: 34px;
display: flex;
align-items: flex-start;
justify-content: flex-end;
gap: 20px;
}
.om-contact-form__topic {
color: var(--om-color-primary);
font-size: 14px;
font-weight: 500;
margin-bottom: 14px;
text-align: center;
}
/* --- Messages de retour --- */
.om-form-message {
margin-top: 16px;
padding: 12px 16px;
border-radius: 4px;
font-size: 13px;
line-height: 1.4;
transition: opacity 0.5s;
}
.om-form-message--ok {
background-color: #e8f5e9;
color: #2e7d32;
border-left: 4px solid #4caf50;
}
.om-form-message--error {
background-color: #ffebee;
color: #c62828;
border-left: 4px solid #f44336;
}
.om-form-message--info {
background-color: #e3f2fd;
color: #1565c0;
border-left: 4px solid #2196f3;
}
/* --- Erreur sur un champ individuel (contact / demenagement) --- */
.om-form-field {
position: relative;
}
.om-form-field.is-error input,
.om-form-field.is-error textarea,
.om-form-field.is-error select {
border-color: #f44336 !important;
background-color: #fff5f5;
}
.om-form-field__error {
display: block;
margin-top: 4px;
color: #c62828;
font-size: 12px;
font-weight: 500;
line-height: 1.3;
}
/* --- Newsletter footer avec check verte --- */
.om-newsletter-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.om-newsletter-input-wrap input[type="email"] {
width: 100%;
height: 32px;
border: 0;
background: #e9e9e9;
padding: 0 36px 0 12px;
font-size: 11px;
color: #20283b;
outline: none;
font-family: var(--om-font-main);
border-radius: 2px;
}
.om-newsletter-check {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
border: 0;
background: transparent;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s;
pointer-events: none;
}
.om-newsletter-check--visible {
opacity: 1;
pointer-events: auto;
}
.om-newsletter-check:hover {
background: rgba(76, 175, 80, 0.1);
border-radius: 50%;
}
.om-newsletter-check svg {
display: block;
}
.om-newsletter-form .om-form-message {
margin-top: 8px;
font-size: 11px;
padding: 6px 10px;
}
/* =============================================================================
25. Outils de navigation Softaneo (boutique / catalogue)
Sidebar filtres + listing produits + tri PC + barre mobile
============================================================================= */
/* Conteneur principal listing + sidebar */
.page_liste_des_produit_ssoftaneo {
display: flex;
gap: 40px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 30px 20px 80px;
position: relative;
box-sizing: border-box;
}
/* Colonne filtre PC */
.colonne_filtrage_produit_softaneo {
width: 260px;
flex-shrink: 0;
display: block;
}
.filtrage_pc_produit_softaneo {
display: block;
}
.titre_filtrage_produit_softaneo {
font-family: "Poppins", sans-serif;
font-weight: 600;
font-size: 20px;
color: var(--om-color-primary-dark);
padding-bottom: 16px;
border-bottom: 2px solid var(--om-color-primary);
margin-bottom: 16px;
letter-spacing: 0.5px;
}
.btn_tout_effacer_filtrage_produit_softaneo {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 13px;
color: var(--om-color-primary);
text-decoration: underline;
cursor: pointer;
text-align: right;
margin-bottom: 10px;
transition: color 0.2s;
}
.btn_tout_effacer_filtrage_produit_softaneo:hover {
color: var(--om-color-primary-dark);
}
.active_desactive_destockage {
padding: 14px 0;
border-top: 1px solid #E0E0E0;
margin-top: 10px;
}
.sous_titre_filtrage_produit_softaneo {
font-family: "Poppins", sans-serif;
font-weight: 600;
font-size: 15px;
color: var(--om-color-primary);
padding: 14px 30px 14px 0;
margin-top: 10px;
border-top: 1px solid #E0E0E0;
position: relative;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.deploi_section_filtre_actif,
.deploi_section_filtre_inactif {
width: 20px;
height: 12px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.deploi_section_filtre_actif {
background-image: url('../images/deploi.png');
}
.deploi_section_filtre_inactif {
background-image: url('../images/deploi2.png');
}
.liste_cat_produit_softaneo {
padding: 10px 0 20px;
}
.un_ele_cat_liste_produit_pc,
.un_ele_cat_liste_produit_pc_actif {
padding: 6px 0 6px 28px;
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 14px;
color: #333;
background-position: left center;
background-repeat: no-repeat;
background-size: 18px 18px;
margin-bottom: 4px;
cursor: pointer;
transition: color 0.2s;
}
.un_ele_cat_liste_produit_pc {
background-image: url('../images/check_box_filtre_cat_pc_vide.png');
}
.un_ele_cat_liste_produit_pc_actif {
background-image: url('../images/check_box_filtre_cat_pc_plein.png');
color: var(--om-color-primary-dark);
font-weight: 500;
}
.un_ele_cat_liste_produit_pc:hover {
color: var(--om-color-primary);
}
.cadre_ele_sous_cat_produit_softaneo {
padding-left: 20px;
}
/* Colonne listing produits */
.colonne_liste_produit_softaneo {
flex: 1;
min-width: 0;
}
.titre_page_liste_produit_softaneo {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 26px;
color: var(--om-color-primary-dark);
padding-bottom: 10px;
letter-spacing: 0.5px;
}
.nb_produit_dispo_softaneo {
font-family: "Poppins", sans-serif;
font-weight: 500;
font-size: 13px;
color: #707070;
padding-bottom: 14px;
}
.nom_de_cat_dans_liste_produit {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 14px;
color: #707070;
padding: 8px 10px;
border-bottom: 1px solid #E0E0E0;
margin-bottom: 10px;
}
/* Tri PC (liste deroulante a droite du titre) */
.pour_systeme_trie_pc_parcot_liste_produit {
display: block;
width: 220px;
position: absolute;
right: 20px;
top: 38px;
z-index: 2;
}
.champs_selection_simule {
border: 1px solid #CCC;
border-radius: 6px;
background: #fff;
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 13px;
color: #333;
cursor: pointer;
width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.champs_selection_simule_bouton {
padding: 10px 14px;
}
.champs_selection_simule_liste_choix {
display: none;
border-top: 1px solid #CCC;
background: #fff;
position: relative;
z-index: 1;
}
.choix_selection_simule_inactif,
.choix_selection_simule_actif {
padding: 10px 14px;
transition: background 0.2s;
}
.choix_selection_simule_inactif:hover {
background: #F5F8FC;
}
.choix_selection_simule_actif {
font-weight: 600;
color: var(--om-color-primary);
background: #F5F8FC;
}
.deploiemeent_simuler_selection_inactif,
.deploiemeent_simuler_selection_actif {
background-image: url('../images/fleche_deploiement_simule.png');
background-repeat: no-repeat;
background-position: right 12px center;
}
/* Liste produits */
.liste_des_produit_softaneo {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px;
padding-top: 20px;
text-align: left;
}
/* Les separateurs occupent toute la largeur du grid */
.liste_des_produit_softaneo > .nom_de_cat_dans_liste_produit,
.liste_des_produit_softaneo > .bulle_info_top,
.liste_des_produit_softaneo > .interieur_bulle_info_top {
grid-column: 1 / -1;
}
/* Vignette produit */
.vignette_produit_softaneo {
background: #fff;
border: 1px solid #E0E0E0;
border-radius: 8px;
overflow: hidden;
position: relative;
box-sizing: border-box;
transition: box-shadow 0.25s, transform 0.25s;
}
.vignette_produit_softaneo:hover {
box-shadow: 0 6px 18px rgba(0, 82, 163, 0.12);
transform: translateY(-2px);
}
.vignette_produit_softaneo_btn_vers_fiche_produit {
display: block;
text-decoration: none;
color: inherit;
}
.interieur_vignette_produit_softaneo {
padding: 16px;
box-sizing: border-box;
background-image: url('../images/plusbleu.png');
background-repeat: no-repeat;
background-position: right 12px bottom 12px;
background-size: 22px;
}
.image_simple_vignette_produit_softaneo {
width: 100%;
height: 170px;
display: flex;
align-items: center;
justify-content: center;
background: #F9F9F9;
border-radius: 6px;
margin-bottom: 12px;
overflow: hidden;
}
.image_simple_vignette_produit_softaneo img {
max-width: 90%;
max-height: 90%;
object-fit: contain;
transition: transform 0.3s;
}
.vignette_produit_softaneo:hover .image_simple_vignette_produit_softaneo img {
transform: scale(1.05);
}
.titre_vignette_produit_softaneo {
font-family: "Poppins", sans-serif;
font-weight: 800;
font-size: 18px;
line-height: 1.2;
letter-spacing: 0.02em;
color: #2b2f39;
text-transform: none;
padding-bottom: 8px;
min-height: 44px;
}
.type_mat_vignette_produit_softaneo,
.garantie_vignette_produit_softaneo {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 1.4;
color: #8d93a0;
}
.garantie_vignette_produit_softaneo {
padding-bottom: 10px;
}
.tarif_vignette_produit_softaneo {
font-family: "Poppins", sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 1;
color: #1c2538;
padding-top: 6px;
}
.precision_ttc {
font-size: 13px;
font-weight: 500;
color: #1c2538;
margin-left: 2px;
}
.dispo_vignette_produit_softaneo {
font-family: "Poppins", sans-serif;
font-weight: 600;
font-size: 10px;
font-style: normal;
color: var(--om-color-success);
padding-top: 6px;
}
.vignette_destockage {
position: absolute;
top: 12px;
left: 0;
padding: 6px 12px;
border-radius: 0 6px 6px 0;
color: #fff;
background: var(--om-color-primary-dark);
font-family: "Poppins", sans-serif;
font-weight: 600;
font-size: 11px;
z-index: 2;
letter-spacing: 0.5px;
}
.vignette_certification {
position: absolute;
bottom: 10px;
right: 10px;
padding: 4px 10px;
background: #33c7a8;
color: #fff;
font-family: "Poppins", sans-serif;
font-weight: 500;
font-size: 11px;
border-radius: 3px;
z-index: 2;
}
/* Bouton scroll up du plugin Softaneo — masque sur tous les breakpoints car doublon
avec le .om-scroll-top du theme (foot.php). Conserve pour reference si besoin. */
.ico_scroll_up {
display: none !important;
position: absolute;
bottom: 90px;
right: 20px;
height: 36px;
width: 36px;
z-index: 3;
cursor: pointer;
background: #fff url('../images/Scroll-UP.png') center / 18px no-repeat;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
transition: transform 0.2s;
}
.ico_scroll_up:hover {
transform: translateY(-2px);
}
/* Barre mobile filtre/tri (cachee en desktop) */
.section_de_filtrage_mobile {
display: none;
}
.filtrage_mobile_produit_softaneo,
.filtre_mobile_disponibilite_produit_softaneo {
display: none;
}
.systeme_de_trie_liste_mobile,
.systeme_de_filtre_liste_mobile {
display: none;
}
/* Navigation categorie mobile cachee en desktop */
.navigation_categorie_parcot_softaneo {
display: none;
}
/* Adaptation : s'integre bien dans la section .om-catalogue */
.om-catalogue .page_liste_des_produit_ssoftaneo,
.om-catalogue-content .page_liste_des_produit_ssoftaneo {
padding: 20px 0 60px;
}
/* =============================================================================
25bis. Outils Softaneo — MODE BOUTIQUE (alignement maquette 2026)
============================================================================= */
/* Layout specifique boutique : grid 2 colonnes explicite */
.page_liste_des_produit_ssoftaneo.mode_boutique_layout {
display: grid;
grid-template-columns: 280px 1fr;
grid-template-rows: auto 1fr;
column-gap: 44px;
row-gap: 12px;
max-width: 1230px;
padding: 0 0 60px;
position: relative;
}
/* Placement explicite des elements principaux */
.mode_boutique_layout > .om-catalogue-toolbar {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.mode_boutique_layout > .colonne_filtrage_produit_softaneo {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.mode_boutique_layout > .colonne_liste_produit_softaneo {
grid-column: 2 / 3;
grid-row: 1 / 3;
min-width: 0;
}
/* Les elements mobiles et scroll-up : retires du flow grid (display:none les exclut naturellement pour les premiers) */
.mode_boutique_layout > .section_de_filtrage_mobile,
.mode_boutique_layout > .systeme_de_trie_liste_mobile,
.mode_boutique_layout > .systeme_de_filtre_liste_mobile {
grid-column: 1 / -1;
}
.mode_boutique_layout > .ico_scroll_up {
position: fixed;
z-index: 10;
}
/* Toolbar horizontale : Filtres a gauche + Tout effacer colle a droite */
.mode_boutique_layout .om-catalogue-toolbar {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 0;
}
.mode_boutique_layout .om-catalogue-toolbar__left {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
}
.mode_boutique_layout .om-catalogue-toolbar__left h2 {
margin: 0;
font-family: "Poppins", sans-serif;
font-size: 15px;
font-weight: 700;
color: var(--om-color-primary-dark);
padding-bottom: 0;
border-bottom: 0;
min-width: 80px;
}
.mode_boutique_layout .om-clear-filters {
font-family: "Poppins", sans-serif;
font-size: 12px;
font-weight: 400;
color: #676f81;
text-decoration: underline;
cursor: pointer;
transition: color 0.2s;
}
.mode_boutique_layout .om-clear-filters:hover {
color: var(--om-color-primary);
}
.mode_boutique_layout .om-clear-filters {
margin-left: auto;
}
/* Le Trier par est deplace dans le H1 au chargement (cf boutique.php).
Fallback : s il reste dans la toolbar, on le cache pour ne pas avoir de doublon */
.mode_boutique_layout .om-catalogue-toolbar .om-catalogue-toolbar__right {
width: 160px;
flex: 0 0 160px;
margin-left: 12px;
}
/* Une fois deplace dans le slot, on le rend visible explicitement */
.om-page-heading__sort .om-catalogue-toolbar__right {
width: 100%;
margin-left: 0;
}
/* On masque le tri positionne en absolute (mode non-boutique) dans le layout boutique */
.mode_boutique_layout > .pour_systeme_trie_pc_parcot_liste_produit {
display: none;
}
/* Sidebar filtres (mode boutique) */
.mode_boutique_layout .colonne_filtrage_produit_softaneo {
width: 100%;
padding-top: 0;
}
.mode_boutique_layout .sous_titre_filtrage_produit_softaneo {
border-top: 1px solid #d9dde4;
border-bottom: 0;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 17px;
color: var(--om-color-primary);
text-transform: none;
letter-spacing: 0;
padding: 18px 30px 14px 0;
margin-top: 0;
}
/* Search sidebar (mode boutique) */
.mode_boutique_layout .om-filter-search {
position: relative;
margin: 0 0 14px;
}
.mode_boutique_layout .om-filter-search input {
width: 100%;
height: 34px;
padding: 0 34px 0 12px;
border: 1px solid #dfe4ea;
border-radius: 6px;
background: #fafafa;
color: #31405a;
font-size: 12px;
font-family: "Poppins", sans-serif;
outline: none;
box-sizing: border-box;
}
.mode_boutique_layout .om-filter-search input::placeholder {
color: #98a0ac;
}
.mode_boutique_layout .om-filter-search input:focus {
border-color: var(--om-color-primary);
}
.mode_boutique_layout .om-filter-search button {
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
width: 18px;
height: 18px;
border: 0;
background: transparent;
cursor: pointer;
padding: 0;
}
.mode_boutique_layout .om-filter-search svg {
width: 100%;
height: 100%;
fill: #8e98a7;
}
/* Checkboxes style maquette (on remplace les bg-images par un carre CSS) */
.mode_boutique_layout .un_ele_cat_liste_produit_pc,
.mode_boutique_layout .un_ele_cat_liste_produit_pc_actif {
position: relative;
padding: 4px 0 4px 30px;
font-family: "Poppins", sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 1.35;
color: #1c253d;
background-image: none;
margin-bottom: 8px;
cursor: pointer;
transition: color 0.15s;
}
.mode_boutique_layout .un_ele_cat_liste_produit_pc::before,
.mode_boutique_layout .un_ele_cat_liste_produit_pc_actif::before {
content: "";
position: absolute;
left: 0;
top: 3px;
width: 20px;
height: 20px;
border: 1px solid #d4d9e1;
background: #ececec;
box-sizing: border-box;
border-radius: 2px;
}
.mode_boutique_layout .un_ele_cat_liste_produit_pc_actif {
color: #1c253d;
font-weight: 600;
}
.mode_boutique_layout .un_ele_cat_liste_produit_pc_actif::before {
border-color: #263047;
background: #fff;
}
.mode_boutique_layout .un_ele_cat_liste_produit_pc_actif::after {
content: "";
position: absolute;
left: 7px;
top: 6px;
width: 6px;
height: 11px;
border: solid #263047;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.mode_boutique_layout .un_ele_cat_liste_produit_pc:hover {
color: var(--om-color-primary);
}
.mode_boutique_layout .un_ele_cat_liste_produit_pc:hover::before {
border-color: #b8c5d6;
}
/* Sous-categories (indentation) */
.mode_boutique_layout .cadre_ele_sous_cat_produit_softaneo {
padding-left: 24px;
}
/* Colonne produits (mode boutique) */
.mode_boutique_layout .colonne_liste_produit_softaneo {
min-width: 0;
}
.mode_boutique_layout .nb_produit_dispo_softaneo[data-om-compteur="1"] {
display: none;
}
/* Masquer la bulle "X produits disponibles" rendue dans le listing (mode boutique) */
.mode_boutique_layout .bulle_info_top,
.mode_boutique_layout .interieur_bulle_info_top {
display: none;
}
/* Separateurs de categorie (Lentilles, Consommables...) */
.mode_boutique_layout .nom_de_cat_dans_liste_produit {
font-family: "Poppins", sans-serif;
font-size: 12px;
font-weight: 500;
color: #7c8392;
padding: 0 0 6px;
border-bottom: 0;
margin: 10px 0 4px;
}
.mode_boutique_layout .liste_des_produit_softaneo {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px 22px;
padding-top: 0;
}
/* Vignette produit (mode boutique) : bouton "+" rond en bas a droite */
.mode_boutique_layout .vignette_produit_softaneo {
border-radius: 2px;
border-color: #cfe0ef;
min-height: 390px;
position: relative;
cursor: pointer;
}
.mode_boutique_layout .interieur_vignette_produit_softaneo {
background-image: none;
padding: 0 18px 16px;
}
.mode_boutique_layout .image_simple_vignette_produit_softaneo {
height: 230px;
background: transparent;
border-radius: 0;
margin: 0 -4px 0;
padding: 24px 14px 10px;
}
.mode_boutique_layout .image_simple_vignette_produit_softaneo img {
max-height: 178px;
}
.mode_boutique_layout .titre_vignette_produit_softaneo {
margin-top: 2px;
padding-bottom: 4px;
min-height: 34px;
font-weight: 600;
letter-spacing: 0;
}
.mode_boutique_layout .type_mat_vignette_produit_softaneo {
margin-bottom: 18px;
}
.mode_boutique_layout .garantie_vignette_produit_softaneo {
display: none;
}
.mode_boutique_layout .tarif_vignette_produit_softaneo {
padding-top: 0;
margin-bottom: 2px;
}
/* Bouton "+" rond : positionne en bas a droite de la vignette */
.om-product-card__add {
position: absolute;
right: 16px;
bottom: 16px;
width: 28px;
height: 28px;
border-radius: 50%;
background: #d0d0d0;
color: #fff;
font-size: 20px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: "Poppins", sans-serif;
font-weight: 400;
pointer-events: none;
transition: background 0.2s;
z-index: 1;
}
.mode_boutique_layout .vignette_produit_softaneo:hover .om-product-card__add {
background: var(--om-color-primary);
}
/* En mode non-boutique, on masque le "+" rond (redondant avec plusbleu bg) */
.page_liste_des_produit_ssoftaneo:not(.mode_boutique_layout) .om-product-card__add {
display: none;
}
.mode_boutique_layout .vignette_produit_softaneo_btn_vers_fiche_produit {
display: none;
}
/* =============================================================================
26. Outils Softaneo — Tablette (max-width: 1024px)
============================================================================= */
@media (max-width: 1024px) {
.page_liste_des_produit_ssoftaneo {
gap: 24px;
padding: 20px 16px 60px;
}
.page_liste_des_produit_ssoftaneo.mode_boutique_layout {
grid-template-columns: 220px 1fr;
gap: 20px 24px;
}
.mode_boutique_layout .liste_des_produit_softaneo {
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
.colonne_filtrage_produit_softaneo {
width: 220px;
}
.titre_page_liste_produit_softaneo {
font-size: 22px;
}
.pour_systeme_trie_pc_parcot_liste_produit {
width: 180px;
right: 16px;
}
.liste_des_produit_softaneo {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
}
}
/* =============================================================================
27. Outils Softaneo — Mobile (max-width: 768px)
============================================================================= */
@media (max-width: 768px) {
.page_liste_des_produit_ssoftaneo {
display: block;
padding: 0 0 80px;
}
.page_liste_des_produit_ssoftaneo.mode_boutique_layout .om-catalogue-toolbar {
display: none;
}
.page_liste_des_produit_ssoftaneo.mode_boutique_layout .liste_des_produit_softaneo {
grid-template-columns: 1fr;
gap: 12px;
}
/* Cacher sidebar PC et tri PC */
.colonne_filtrage_produit_softaneo,
.filtrage_pc_produit_softaneo,
.pour_systeme_trie_pc_parcot_liste_produit {
display: none;
}
/* Afficher barre mobile filtre/tri */
.section_de_filtrage_mobile {
display: flex;
width: 100%;
height: 48px;
background: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
border-top: 1px solid #F0F0F0;
border-bottom: 1px solid #F0F0F0;
}
.absolute-position {
position: absolute;
z-index: auto;
bottom: 0;
}
.fixed-position {
position: fixed;
z-index: 10;
bottom: 0;
left: 0;
}
.un_ele_de_filtrage_mobile {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
height: 48px;
font-family: "Poppins", sans-serif;
font-weight: 500;
font-size: 14px;
color: var(--om-color-primary-dark);
cursor: pointer;
}
.un_ele_de_filtrage_mobile_filtre {
background: url("data:image/svg+xml;utf8,") no-repeat;
background-position: calc(50% + 42px) center;
background-size: 14px;
border-right: 1px solid #F0F0F0;
}
.un_ele_de_filtrage_mobile_trie {
background: url("data:image/svg+xml;utf8,") no-repeat;
background-position: calc(50% + 50px) center;
background-size: 14px;
}
/* Boutique mobile : grille 1 colonne */
.page_liste_des_produit_ssoftaneo.mode_boutique_layout {
grid-template-columns: 1fr;
column-gap: 0;
}
.mode_boutique_layout > .colonne_filtrage_produit_softaneo {
display: none;
}
.mode_boutique_layout > .colonne_liste_produit_softaneo {
grid-column: 1 / -1;
grid-row: auto;
}
.mode_boutique_layout > .om-catalogue-toolbar {
grid-column: 1 / -1;
}
/* Boutique mobile : masquer le Trier par deplace dans le H1 (remplace par la barre basse Filtrer/Trier) */
.om-page-heading--boutique {
flex-direction: column;
align-items: flex-start;
gap: 0;
margin-bottom: 8px;
}
.om-page-heading__sort {
display: none;
}
.colonne_liste_produit_softaneo {
padding: 10px 16px 0;
}
.titre_page_liste_produit_softaneo {
font-size: 20px;
padding-top: 16px;
}
.nb_produit_dispo_softaneo {
display: block;
padding-left: 0;
}
.liste_des_produit_softaneo {
grid-template-columns: 1fr;
gap: 12px;
padding-top: 12px;
}
/* Popup filtre/tri mobile plein ecran */
.systeme_de_trie_liste_mobile,
.systeme_de_filtre_liste_mobile {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
z-index: 99;
overflow-y: auto;
}
.systeme_de_filtre_liste_mobile_etape {
z-index: 100;
}
.systeme_de_trie_liste_mobile .contenu_centre,
.systeme_de_filtre_liste_mobile .contenu_centre {
padding: 30px 20px 20px;
max-width: 500px;
margin: 0 auto;
}
.titre_trie_filtre_mobile {
padding: 20px 0;
text-align: center;
color: var(--om-color-primary-dark);
font-family: "Poppins", sans-serif;
font-weight: 600;
font-size: 16px;
}
.btn_ferme_trie_filtre_mobile,
.btn_ferme_trie_filtre_mobile_haut_droite {
width: 19px;
height: 19px;
cursor: pointer;
background: url('../images/ferme_trie_filtre.png') center / contain no-repeat;
}
.btn_ferme_trie_filtre_mobile {
margin-bottom: 20px;
}
.btn_ferme_trie_filtre_mobile_haut_droite {
position: absolute;
top: 28px;
right: 20px;
}
.btn_retour_trie_filtre_mobile {
width: 12px;
height: 17px;
cursor: pointer;
background: url('../images/retour_filtre_mobile.png') center / contain no-repeat;
position: absolute;
top: 32px;
left: 20px;
}
.gros_bouton_filtre_mobile {
padding: 14px 0;
margin-bottom: 4px;
border-bottom: 1px solid #E0E0E0;
font-family: "Poppins", sans-serif;
font-weight: 500;
font-size: 15px;
color: var(--om-color-primary-dark);
cursor: pointer;
background: url('../images/petit_fleche_gros_bouton_mobile.png') right center / 8px no-repeat;
}
.un_ele_de_trie_mobile,
.un_ele_de_trie_mobile_actif {
background-repeat: no-repeat;
background-position: 3px center;
background-size: 18px;
padding: 8px 0 8px 30px;
margin: 6px 0;
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 15px;
color: var(--om-color-primary-dark);
cursor: pointer;
}
.un_ele_de_trie_mobile {
background-image: url('../images/point_vide.png');
}
.un_ele_de_trie_mobile_actif {
background-image: url('../images/point_actif.png');
font-weight: 500;
}
.un_ele_cat_liste_produit_mobile,
.un_ele_cat_liste_produit_mobile_actif {
background-repeat: no-repeat;
background-position: 3px center;
background-size: 18px;
padding: 8px 0 8px 30px;
margin: 6px 0;
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 15px;
color: var(--om-color-primary-dark);
cursor: pointer;
}
.un_ele_cat_liste_produit_mobile {
background-image: url('../images/carre_vide.png');
}
.un_ele_cat_liste_produit_mobile_actif {
background-image: url('../images/carre_plein.png');
font-weight: 500;
}
.divise_en_deux_colonnes {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.divise_en_deux_colonnes .un_ele_cat_liste_produit_mobile,
.divise_en_deux_colonnes .un_ele_cat_liste_produit_mobile_actif {
margin: 0;
}
/* Vignette mobile : layout ligne avec image a gauche */
.vignette_produit_softaneo {
height: auto;
min-height: 150px;
}
.image_simple_vignette_produit_softaneo {
height: 140px;
}
.titre_vignette_produit_softaneo {
min-height: auto;
}
.ico_scroll_up {
right: 12px;
bottom: 70px;
}
}
/* =============================================================================
26. Page identification / creation de compte
============================================================================= */
/* --- Wrapper general --- */
.om-auth {
padding: 56px 0 80px;
}
.om-page-heading--center {
text-align: center;
margin-bottom: 40px;
}
.om-page-heading--center p {
margin: 10px 0 0;
color: var(--om-color-text-soft);
font-size: 15px;
}
/* Reprise fidele du module identification / inscription de la prod (cf pour_theme_ophtamarket_BACKUP). Ces styles override le CSS du widget_login_shop charge via dans identification.php et inscription.php. */
/* --- Bloc bleu fonce "Je suis deja client" --- */
.section_login_widget_login_shop {
background-color: #0B1956;
color: #fff;
font-family: var(--om-font-main);
font-size: 15px;
text-align: left;
padding: 30px 40px 40px;
border-radius: 12px;
box-sizing: border-box;
vertical-align: top;
}
.cadre_choix_identifier {
border: 0 !important;
}
.titre_section_login {
font-family: var(--om-font-main);
font-size: 24px !important;
font-weight: 600;
letter-spacing: 0.01em;
text-align: center !important;
border: 0 !important;
background-color: transparent !important;
padding-bottom: 18px;
}
.input_login {
border: 0;
background-color: #E8F0FE;
border-radius: 8px;
font-family: var(--om-font-main);
font-size: 15px;
color: #022545;
padding-left: 20px !important;
box-sizing: border-box;
}
.autour_de_se_souvenir_de_moi_widget_login_shop {
text-align: left !important;
padding-bottom: 15px;
}
.autour_de_se_souvenir_de_moi_widget_login_shop input[type="checkbox"] {
width: 22px;
height: 22px;
border-radius: 0;
}
.text_checkbox_login {
font-family: var(--om-font-main);
font-size: 16px !important;
}
/* --- Bloc blanc "Nouveau client" --- */
.zone_creation_compte {
background-color: #ffffff;
margin-bottom: 25px;
padding: 30px 40px 40px;
border-radius: 12px;
box-sizing: border-box;
vertical-align: top;
}
.zone_creation_compte .titre_section_login {
padding-top: 0;
padding-bottom: 18px;
color: #022545;
font-weight: 600;
}
.cadre_contenu_etape_avant_inscription {
font-family: var(--om-font-main);
font-size: 15px;
color: #1B2330;
line-height: 26px;
width: 100%;
max-width: 320px;
margin: auto;
text-align: left;
padding-bottom: 15px;
}
.cadre_liste_indication_avant_inscription {
padding-top: 10px;
padding-bottom: 20px;
}
.point_bleu_liste_avant_inscription {
display: inline-block;
width: 9px;
height: 9px;
background-color: #014F9F;
border-radius: 10px;
margin-right: 7px;
}
.cadre_autour_btn_premier_etape_avant_inscription {
padding-bottom: 20px;
text-align: center;
}
/* --- Boutons --- */
.btn_avant_premiere_etape_inscription,
.btn_validation_log,
.btn_valide_formulaire_creation_compte_detail,
.btn_annule_mdp_oublie,
.btn_active_mdp_oublie,
.btn_login_se_connecter,
.btn_login_mdp_oublie {
min-width: 150px;
height: 42px;
font-family: var(--om-font-main);
font-size: 14px !important;
font-weight: 500;
color: #fff;
text-align: center;
cursor: pointer;
background-color: #004A93 !important;
border-radius: 999px;
padding: 0 18px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
white-space: nowrap;
line-height: 1 !important;
transition: transform 0.2s ease, background-color 0.2s ease;
box-sizing: border-box;
}
.btn_avant_premiere_etape_inscription:hover,
.btn_validation_log:hover,
.btn_valide_formulaire_creation_compte_detail:hover,
.btn_annule_mdp_oublie:hover,
.btn_active_mdp_oublie:hover,
.btn_login_se_connecter:hover,
.btn_login_mdp_oublie:hover {
transform: translateY(-1px);
background-color: #003874 !important;
}
.btn_annule_mdp_oublie,
.btn_active_mdp_oublie {
min-width: 150px !important;
width: auto !important;
}
/* Tableau des boutons en ligne -> espacement */
.contenu_formulaire_log > center > table,
.demande_envois_mdp_oublie + #retour_pour_demande_reset_mdp + center > table {
margin: 18px auto 0;
border-collapse: separate;
border-spacing: 10px 0;
}
.contenu_formulaire_log > center > table td,
.demande_envois_mdp_oublie + #retour_pour_demande_reset_mdp + center > table td {
padding: 0 !important;
}
.contenu_formulaire_log {
width: 100% !important;
max-width: 360px;
margin: auto;
}
/* --- Formulaire inscription detaille --- */
.cadre_global_section_creation_de_compte_detaille {
width: 267px;
margin: auto;
padding-top: 20px;
padding-bottom: 40px;
}
.titre_creation_de_compte_detail {
color: #004A93;
font-family: var(--om-font-main);
font-size: 20px;
font-weight: 800;
padding-bottom: 18px;
text-align: center;
}
.section_creation_compte_detail {
padding-bottom: 20px;
}
.section_creation_compte_detail .pass_eye {
top: 11px;
}
/* Correction affichage oeil mdp : l input a un padding-right pour laisser la place a l icone */
.champ_formulaire input[type="password"].input_login,
.champ_formulaire input[type="text"].input_login {
padding-right: 40px !important;
}
.champ_formulaire .pass_eye {
top: 50% !important;
right: 10px !important;
transform: translateY(-50%);
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
opacity: 1 !important;
}
.champ_formulaire .pass_eye img {
width: 20px !important;
height: 20px !important;
display: block !important;
opacity: 0.6 !important;
}
.champ_formulaire .pass_eye:hover img {
opacity: 1 !important;
}
.titre_section_creation_compte_detail {
padding-bottom: 20px;
font-family: var(--om-font-main);
font-size: 18px;
font-weight: 800;
text-align: center;
color: #022545;
}
.un_champs_formulaire_creation_compte_detail {
position: relative;
}
.valide_email_ok {
width: 17px;
height: 17px;
background-image: url('../images/valide_form_ok.png');
background-repeat: no-repeat;
position: absolute;
right: 20px;
top: 17px;
}
.cadre_si_invalide {
padding-top: 2px;
padding-bottom: 5px;
font-family: var(--om-font-main);
font-size: 12px;
color: #B82E2E;
}
.radio_td_en_ligne {
border: 0 !important;
}
.label_radio_td_en_ligne {
padding-right: 25px;
}
.img_des_pour_mdp {
margin-left: 20px;
}
.champs_creation_compte_detail {
border: 1px solid #707070;
border-radius: 8px;
padding: 10px;
width: 100%;
box-sizing: border-box;
margin-top: 7px;
margin-bottom: 7px;
outline: none;
}
.champs_creation_compte_detail_invalide {
border: 1px solid #B82E2E;
}
.cadre_btn_valide_formulaire_creation_compte_detail {
padding: 10px;
text-align: center;
}
/* --- Responsive desktop moyen (>= 740px) : deux colonnes cote a cote, meme hauteur --- */
@media screen and (min-width: 740px) {
.cadre_choix_identifier {
width: auto !important;
}
.zone_identification {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: center;
gap: 32px;
}
.section_login_widget_login_shop,
.zone_creation_compte {
display: flex !important;
flex-direction: column;
margin: 0 !important;
padding: 36px 44px 40px;
}
.zone_creation_compte .cadre_autour_btn_premier_etape_avant_inscription {
margin-top: auto;
}
}
@media screen and (min-width: 1100px) {
.section_login_widget_login_shop {
width: 470px !important;
flex: 0 0 470px;
}
.zone_creation_compte {
width: 430px !important;
flex: 0 0 430px;
}
}
/* --- Liens sous le panel --- */
.om-auth-links {
text-align: center;
margin-top: 28px;
color: var(--om-color-text-soft);
font-size: 14px;
}
.om-auth-links p {
margin: 0;
}
.om-auth-links a {
color: var(--om-color-primary);
font-weight: 600;
}
.om-auth-links a:hover {
text-decoration: underline;
}
/* =============================================================================
26.1 Responsive — Page identification
============================================================================= */
@media (max-width: 768px) {
.om-auth {
padding: 32px 0 48px;
}
.zone_creation_compte {
margin-left: 0 !important;
margin-top: 20px;
}
.section_login_widget_login_shop,
.zone_creation_compte {
width: 100% !important;
display: block;
padding: 28px 20px 32px;
}
.contenu_formulaire_log {
width: 100% !important;
}
.cadre_contenu_etape_avant_inscription {
width: 100%;
}
.titre_section_login {
font-size: 20px !important;
}
/* Boutons du widget login : pas de min-width fixe sur mobile pour eviter le debordement du cadre bleu */
.btn_avant_premiere_etape_inscription,
.btn_validation_log,
.btn_valide_formulaire_creation_compte_detail,
.btn_annule_mdp_oublie,
.btn_active_mdp_oublie,
.btn_login_se_connecter,
.btn_login_mdp_oublie {
min-width: 0 !important;
width: 100% !important;
padding: 0 10px !important;
font-size: 13px !important;
}
/* Reduction de l espacement entre les deux boutons en mobile */
.contenu_formulaire_log > center > table,
.demande_envois_mdp_oublie + #retour_pour_demande_reset_mdp + center > table {
border-spacing: 6px 0;
}
}
/* =============================================================================
27. Scroll-top button (fixed, apparait au survol de la zone)
============================================================================= */
.om-scroll-top-zone {
position: fixed;
right: 0;
bottom: 0;
width: 140px;
height: 140px;
pointer-events: none;
z-index: 998;
}
.om-scroll-top-zone::before {
content: "";
position: absolute;
inset: 0;
pointer-events: auto;
}
.om-scroll-top {
position: absolute;
right: 24px;
bottom: 44px;
width: 48px;
height: 48px;
border: 0;
border-radius: 50%;
background: var(--om-color-primary);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transform: translateY(10px) scale(0.9);
transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 6px 18px rgba(6, 31, 86, 0.18);
pointer-events: auto;
}
.om-scroll-top.is-ready {
opacity: 0.18;
visibility: visible;
transform: translateY(0) scale(1);
}
.om-scroll-top-zone:hover .om-scroll-top.is-ready,
.om-scroll-top.is-ready:focus-visible {
opacity: 1;
background: var(--om-color-primary-dark);
box-shadow: 0 10px 24px rgba(6, 31, 86, 0.32);
}
.om-scroll-top svg {
width: 20px;
height: 20px;
display: block;
}
@media (max-width: 768px) {
.om-scroll-top-zone {
width: 110px;
height: 110px;
}
.om-scroll-top {
right: 16px;
bottom: 36px;
width: 44px;
height: 44px;
}
.om-scroll-top.is-ready {
opacity: 0.85;
}
}
/* =============================================================================
28. Page inscription (refonte propre 2026) - scope .om-signup
============================================================================= */
.om-signup {
padding: 48px 0 80px;
background: var(--om-color-background);
}
.om-signup__header {
text-align: center;
max-width: 560px;
margin: 0 auto 32px;
}
.om-signup__header h1 {
margin: 0 0 10px;
font-size: 30px;
font-weight: 800;
line-height: 1.15;
color: #022545;
}
.om-signup__header p {
margin: 0;
color: var(--om-color-text-soft);
font-size: 14px;
line-height: 1.5;
}
.om-signup-card {
max-width: 680px;
margin: 0 auto;
background: #ffffff;
border-radius: 14px;
padding: 36px 40px 32px;
box-shadow: 0 4px 18px rgba(14, 35, 76, 0.06);
box-sizing: border-box;
}
.om-signup-section {
margin-bottom: 28px;
}
.om-signup-section:last-of-type {
margin-bottom: 16px;
}
.om-signup-section__title {
margin: 0 0 18px;
padding: 0 0 10px 16px;
position: relative;
font-size: 15px;
font-weight: 700;
color: #022545;
border-bottom: 1px solid #e7edf4;
letter-spacing: 0.01em;
}
.om-signup-section__title::before {
content: "";
position: absolute;
left: 0;
top: 5px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--om-color-primary);
}
.om-signup-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 18px;
}
.om-signup-field {
display: flex;
flex-direction: column;
position: relative;
}
.om-signup-field--full {
grid-column: 1 / -1;
}
.om-signup-field label {
font-size: 12px;
font-weight: 600;
color: #5b6276;
margin-bottom: 6px;
letter-spacing: 0.01em;
}
.om-signup-required {
color: #B82E2E;
font-weight: 700;
}
.om-signup-field input[type="text"],
.om-signup-field input[type="email"],
.om-signup-field input[type="tel"],
.om-signup-field input[type="password"] {
width: 100%;
height: 42px;
padding: 0 14px;
border: 1px solid #d6dde8;
border-radius: 8px;
background: #ffffff;
color: #022545;
font-family: var(--om-font-main);
font-size: 14px;
outline: none;
box-sizing: border-box;
transition: border-color 0.2s, box-shadow 0.2s;
}
.om-signup-field input:focus {
border-color: var(--om-color-primary);
box-shadow: 0 0 0 3px rgba(0, 74, 147, 0.1);
}
.om-signup-field input::placeholder {
color: #98a1b3;
}
.om-signup-input-wrap {
position: relative;
}
.om-signup-input-wrap--password input {
padding-right: 76px !important;
}
.om-signup-check {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%) scale(0.8);
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #e8f7e9;
color: #2e7d32;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s, transform 0.2s;
}
.om-signup-check svg {
width: 14px;
height: 14px;
}
.om-signup-field.is-valid .om-signup-check {
opacity: 1;
transform: translateY(-50%) scale(1);
}
.om-signup-toggle-eye,
.om-signup-generate-pwd {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
padding: 0;
border: 0;
background: transparent;
color: #5b6276;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
transition: background 0.2s, color 0.2s;
}
.om-signup-toggle-eye {
right: 40px;
}
.om-signup-generate-pwd {
right: 6px;
}
.om-signup-toggle-eye:hover,
.om-signup-generate-pwd:hover {
background: #f0f3f8;
color: var(--om-color-primary);
}
.om-signup-toggle-eye svg,
.om-signup-generate-pwd svg {
width: 18px;
height: 18px;
}
.om-signup-toggle-eye .om-eye-hide {
display: none;
}
.om-signup-toggle-eye.is-revealed .om-eye-show {
display: none;
}
.om-signup-toggle-eye.is-revealed .om-eye-hide {
display: block;
}
.om-signup-select-wrap {
position: relative;
}
.om-signup-select-wrap::after {
content: "";
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-25%) rotate(45deg);
width: 8px;
height: 8px;
border-right: 2px solid #5b6276;
border-bottom: 2px solid #5b6276;
pointer-events: none;
}
.om-signup-select-wrap select {
width: 100%;
height: 42px;
padding: 0 36px 0 14px;
border: 1px solid #d6dde8;
border-radius: 8px;
background: #ffffff;
color: #022545;
font-family: var(--om-font-main);
font-size: 14px;
outline: none;
appearance: none;
-webkit-appearance: none;
box-sizing: border-box;
cursor: pointer;
transition: border-color 0.2s, box-shadow 0.2s;
}
.om-signup-select-wrap select:focus {
border-color: var(--om-color-primary);
box-shadow: 0 0 0 3px rgba(0, 74, 147, 0.1);
}
/* Radio civilite */
.om-signup-radio-group {
display: flex;
gap: 28px;
padding: 6px 0 2px;
}
.om-signup-radio {
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
user-select: none;
}
.om-signup-radio input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.om-signup-radio__mark {
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid #c8d0dc;
background: #ffffff;
position: relative;
flex: 0 0 18px;
transition: border-color 0.2s;
}
.om-signup-radio input:checked + .om-signup-radio__mark {
border-color: var(--om-color-primary);
}
.om-signup-radio input:checked + .om-signup-radio__mark::after {
content: "";
position: absolute;
inset: 3px;
border-radius: 50%;
background: var(--om-color-primary);
}
.om-signup-radio__label {
font-size: 14px;
color: #022545;
font-weight: 500;
}
/* Erreurs */
.om-signup-error {
margin: 6px 0 0;
font-size: 12px;
color: #B82E2E;
display: none;
}
.om-signup-field.is-error .om-signup-error:first-of-type {
display: block;
}
.om-signup-field.is-email-used .om-signup-error[data-key="email-used"] {
display: block;
}
.om-signup-field.is-email-used .om-signup-error:not([data-key]) {
display: none;
}
.om-signup-field.is-error input,
.om-signup-field.is-error select,
.om-signup-field.is-email-used input {
border-color: #B82E2E;
box-shadow: 0 0 0 3px rgba(184, 46, 46, 0.08);
}
/* CGU */
.om-signup-cgu {
margin: 8px 0 24px;
padding: 16px 18px;
background: #f6f9fd;
border-radius: 8px;
}
.om-signup-checkbox {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
user-select: none;
}
.om-signup-checkbox input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.om-signup-checkbox__mark {
width: 18px;
height: 18px;
border-radius: 4px;
border: 2px solid #c8d0dc;
background: #ffffff;
position: relative;
flex: 0 0 18px;
margin-top: 1px;
transition: background 0.2s, border-color 0.2s;
}
.om-signup-checkbox input:checked + .om-signup-checkbox__mark {
background: var(--om-color-primary);
border-color: var(--om-color-primary);
}
.om-signup-checkbox input:checked + .om-signup-checkbox__mark::after {
content: "";
position: absolute;
left: 4px;
top: 0px;
width: 5px;
height: 10px;
border: solid #ffffff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.om-signup-checkbox__label {
font-size: 13px;
color: #4a5264;
line-height: 1.5;
}
.om-signup-checkbox__label a {
color: var(--om-color-primary);
text-decoration: underline;
}
.om-signup-cgu.is-error .om-signup-checkbox__mark {
border-color: #B82E2E;
box-shadow: 0 0 0 3px rgba(184, 46, 46, 0.08);
}
/* Actions */
.om-signup-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 8px;
}
.om-signup-cancel {
display: inline-flex;
align-items: center;
justify-content: center;
height: 44px;
padding: 0 24px;
border-radius: 8px;
border: 1px solid #d6dde8;
background: #ffffff;
color: #5b6276;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
}
.om-signup-cancel:hover {
border-color: var(--om-color-primary);
color: var(--om-color-primary);
}
.om-signup-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
height: 44px;
padding: 0 28px;
border: 0;
border-radius: 8px;
background: #004A93;
color: #ffffff;
font-family: var(--om-font-main);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s ease, background 0.2s ease;
}
.om-signup-submit:hover {
background: #003874;
transform: translateY(-1px);
}
.om-signup-submit[disabled] {
opacity: 0.7;
cursor: wait;
}
.om-signup-submit__arrow {
width: 18px;
height: 18px;
transition: transform 0.2s ease;
}
.om-signup-submit:hover .om-signup-submit__arrow {
transform: translateX(2px);
}
.om-signup-required-note {
margin: 18px 0 0;
text-align: center;
font-size: 12px;
color: #8b93a2;
font-style: italic;
}
.om-signup-retour {
margin-top: 16px;
padding: 0;
font-size: 13px;
text-align: center;
}
.om-signup-retour.is-success {
padding: 14px 18px;
background: #e8f7e9;
color: #2e7d32;
border-radius: 8px;
border-left: 3px solid #2e7d32;
text-align: left;
}
.om-signup-retour.is-error {
padding: 14px 18px;
background: #fdecec;
color: #B82E2E;
border-radius: 8px;
border-left: 3px solid #B82E2E;
text-align: left;
}
.om-signup-login-link {
margin: 24px 0 0;
text-align: center;
font-size: 14px;
color: var(--om-color-text-soft);
}
.om-signup-login-link a {
color: var(--om-color-primary);
font-weight: 600;
text-decoration: none;
}
.om-signup-login-link a:hover {
text-decoration: underline;
}
/* Responsive mobile (<768px) */
@media (max-width: 768px) {
.om-signup {
padding: 32px 0 56px;
}
.om-signup__header h1 {
font-size: 24px;
}
.om-signup-card {
padding: 24px 20px 24px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(14, 35, 76, 0.05);
}
.om-signup-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.om-signup-section__title {
font-size: 14px;
}
.om-signup-radio-group {
gap: 20px;
}
.om-signup-actions {
flex-direction: column;
gap: 10px;
}
.om-signup-cancel,
.om-signup-submit {
width: 100%;
}
}
/* =============================================================================
29. Pages legales (CGV, CGU, Mentions legales, Politique de confidentialite)
============================================================================= */
.om-legal {
padding: 40px 0 80px;
background: var(--om-color-background);
}
.om-legal__header {
text-align: center;
max-width: 760px;
margin: 0 auto 32px;
}
.om-legal__header h1 {
margin: 0;
font-size: 30px;
font-weight: 800;
line-height: 1.2;
color: #022545;
}
.om-legal__content {
max-width: 820px;
margin: 0 auto;
background: #ffffff;
border-radius: 14px;
padding: 40px 48px 48px;
box-shadow: 0 4px 18px rgba(14, 35, 76, 0.05);
color: #2b3448;
font-size: 14px;
line-height: 1.7;
}
.om-legal__content h2,
.om-legal__content h3,
.om-legal__content h4 {
color: var(--om-color-primary-dark);
line-height: 1.3;
margin-top: 28px;
margin-bottom: 12px;
}
.om-legal__content h2 { font-size: 20px; }
.om-legal__content h3 { font-size: 17px; }
.om-legal__content h4 { font-size: 15px; }
.om-legal__content p {
margin: 0 0 12px;
}
.om-legal__content ul,
.om-legal__content ol {
margin: 0 0 14px;
padding-left: 24px;
}
.om-legal__content li {
margin-bottom: 6px;
}
.om-legal__content a {
color: var(--om-color-primary);
text-decoration: underline;
}
.om-legal__content a:hover {
color: var(--om-color-primary-dark);
}
.om-legal__content strong {
color: #022545;
}
.om-legal__content table {
width: 100%;
border-collapse: collapse;
margin: 16px 0;
font-size: 13px;
}
.om-legal__content th,
.om-legal__content td {
padding: 10px 12px;
border: 1px solid #e2e8ef;
text-align: left;
vertical-align: top;
}
.om-legal__content th {
background: #f4f7fb;
color: #022545;
font-weight: 600;
}
@media (max-width: 768px) {
.om-legal {
padding: 28px 0 56px;
}
.om-legal__header h1 {
font-size: 22px;
}
.om-legal__content {
padding: 24px 20px;
border-radius: 10px;
font-size: 13.5px;
}
.om-legal__content h2 { font-size: 18px; }
.om-legal__content h3 { font-size: 16px; }
}
/* =============================================================================
X. Page panier vide (reprise rendu prod)
============================================================================= */
/* Barre bleue slogan en haut de page */
.ligne_2673FF {
background-color: #2673FF;
}
.ligne_slogan_om .interieur_slogan_sur_ligne_2673FF {
font-size: 15px;
color: #fff;
text-align: center;
font-family: "Poppins", Arial, sans-serif;
font-weight: 500;
padding-top: 12px;
padding-bottom: 12px;
letter-spacing: 0.2px;
}
/* Contenu central panier vide */
.toute_la_page_panier_vide {
background-color: #fff;
}
.cadre_panier_vide {
text-align: center;
color: #242727;
font-family: "Poppins", Arial, sans-serif;
font-weight: 700;
font-size: 16px;
padding-top: 50px;
padding-bottom: 70px;
}
.cadre_panier_vide p {
margin: 12px 0;
}
.cadre_panier_vide img {
max-width: 220px;
height: auto;
display: inline-block;
}
.cadre_panier_vide .btn_prix_produit_parcot_fiche_produit {
width: auto;
min-width: 300px;
margin: 40px auto 0;
background-color: #004A93;
float: none;
display: inline-block;
white-space: nowrap;
border-radius: 62px;
font-family: "Poppins", Arial, sans-serif;
font-style: normal;
}
.cadre_panier_vide .btn_prix_produit_parcot_fiche_produit td {
white-space: nowrap;
}
/* Bouton generique (usage : page panier vide) */
.btn_prix_produit_parcot_fiche_produit {
background-color: #6DA7FF;
color: #fff;
border-radius: 6px;
min-width: 181px;
text-align: center;
cursor: pointer;
transition: transform 0.3s ease;
font-family: "Poppins", Arial, sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 1.2;
padding: 15px 16px 13px;
box-sizing: border-box;
}
.btn_prix_produit_parcot_fiche_produit:hover {
transform: scale(1.05);
}
.btn_prix_produit_parcot_fiche_produit table {
display: inline-block;
border-collapse: collapse;
margin: 0 auto;
}
.btn_prix_produit_parcot_fiche_produit table td {
vertical-align: middle;
color: #fff;
}
/* Petite icone panier dans le bouton */
.pour_valide_confirmation_ajout_panier {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.pour_valide_confirmation_ajout_panier img.img_panier_dans_bouton {
height: 18px;
width: auto;
display: block;
}
@media (max-width: 768px) {
.ligne_slogan_om .interieur_slogan_sur_ligne_2673FF {
font-size: 14px;
padding-top: 14px;
padding-bottom: 14px;
line-height: 1.3;
}
.cadre_panier_vide {
padding-top: 32px;
padding-bottom: 50px;
font-size: 15px;
}
.cadre_panier_vide img {
max-width: 170px;
}
.cadre_panier_vide .btn_prix_produit_parcot_fiche_produit {
width: auto;
min-width: 0;
max-width: calc(100% - 40px);
padding-left: 18px;
padding-right: 18px;
margin-top: 28px;
}
}
/* =============================================================================
Product Detail (fiche produit) - Refonte 2026
============================================================================= */
.om-product-detail {
padding: 28px 0 48px;
background: var(--om-color-background);
}
.om-product-detail__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 48px;
margin-top: 24px;
background: var(--om-color-surface);
border-radius: 16px;
padding: 32px;
box-shadow: 0 2px 10px rgba(13, 27, 60, 0.06);
}
.om-product-detail__media {
position: relative;
min-width: 0;
}
.om-product-detail__placeholder {
width: 100%;
min-height: 400px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid var(--om-color-border-soft);
border-radius: 12px;
color: var(--om-color-text-muted);
font-size: 14px;
font-weight: 500;
}
.om-product-gallery {
display: flex;
flex-direction: column;
gap: 14px;
}
.om-product-gallery__main {
width: 100%;
aspect-ratio: 1 / 1;
background: var(--om-color-surface);
border: 1px solid var(--om-color-border-soft);
border-radius: 12px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.om-product-gallery__main img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.om-product-gallery__thumbs {
display: flex;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
flex-wrap: wrap;
}
.om-product-gallery__thumbs li {
list-style: none;
margin: 0;
padding: 0;
}
.om-product-gallery__thumbs button {
width: 72px;
height: 72px;
border: 2px solid var(--om-color-border-soft);
border-radius: 10px;
background: var(--om-color-surface);
cursor: pointer;
padding: 4px;
transition: border-color 0.2s, transform 0.2s;
overflow: hidden;
}
.om-product-gallery__thumbs button img {
width: 100%;
height: 100%;
object-fit: contain;
}
.om-product-gallery__thumbs button:hover {
border-color: var(--om-color-primary-light);
transform: translateY(-2px);
}
.om-product-gallery__thumbs li.is-active button {
border-color: var(--om-color-primary);
box-shadow: 0 0 0 2px rgba(0, 82, 163, 0.08);
}
.om-product-detail__content {
display: flex;
flex-direction: column;
gap: 18px;
min-width: 0;
}
.om-product-detail__category {
display: inline-block;
width: fit-content;
padding: 5px 14px;
background: var(--om-color-card-blue);
border-radius: 999px;
color: var(--om-color-primary-dark);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.om-product-detail__title {
display: flex;
flex-direction: column;
gap: 6px;
}
.om-product-detail__title h1 {
margin: 0;
font-size: 32px;
font-weight: 700;
color: var(--om-color-text);
line-height: 1.2;
}
.om-product-detail__ref {
color: var(--om-color-text-soft);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.02em;
}
.om-product-detail__price {
display: flex;
align-items: baseline;
gap: 8px;
padding: 14px 22px;
background: var(--om-color-card-blue);
border-radius: 14px;
width: fit-content;
}
.om-product-detail__price strong {
font-size: 17px;
font-weight: 600;
color: var(--om-color-primary);
line-height: 1;
}
.om-product-detail__price span {
font-size: 13px;
color: var(--om-color-primary-dark);
font-weight: 600;
letter-spacing: 0.04em;
}
.om-product-detail__price--quote strong {
font-size: 20px;
color: var(--om-color-text);
}
.om-product-detail__sold {
padding: 14px 22px;
background: #fdecec;
color: #b02a2a;
border-radius: 14px;
font-weight: 700;
font-size: 15px;
width: fit-content;
letter-spacing: 0.02em;
}
.om-product-detail__actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.om-product-detail__actions .om-primary-button {
border-radius: 22px;
}
.om-product-detail__description {
color: var(--om-color-text-soft);
line-height: 1.6;
font-size: 15px;
}
.om-product-detail__description p {
margin: 0 0 10px;
}
.om-product-detail__description ul,
.om-product-detail__description ol {
padding-left: 22px;
margin: 10px 0;
}
.om-product-detail__description li {
margin: 4px 0;
}
.om-product-detail__description strong {
color: var(--om-color-text);
}
.om-product-detail__specs {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px 20px;
background: var(--om-color-card-light);
border-radius: 12px;
}
.om-product-detail__spec {
display: flex;
gap: 10px;
font-size: 14px;
color: var(--om-color-text-soft);
padding: 4px 0;
line-height: 1.4;
}
.om-product-detail__spec-label {
font-weight: 600;
color: var(--om-color-text);
flex-shrink: 0;
}
.om-product-detail__spec-value {
flex: 1;
}
.om-product-detail__infos {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px;
margin: 0;
}
.om-product-detail__info-item {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 16px;
background: var(--om-color-card-light);
border-radius: 10px;
margin: 0;
}
.om-product-detail__info-item dt {
font-size: 10px;
color: var(--om-color-text-muted);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.om-product-detail__info-item dd {
margin: 0;
font-size: 14px;
color: var(--om-color-text);
font-weight: 600;
line-height: 1.3;
}
.om-product-detail__garanties {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 6px;
padding-top: 20px;
border-top: 1px solid var(--om-color-border-soft);
}
.om-product-detail__garantie-item {
display: flex;
align-items: center;
gap: 10px;
color: var(--om-color-text-soft);
font-size: 13px;
}
.om-product-detail__garantie-item svg {
fill: var(--om-color-primary);
flex-shrink: 0;
}
.om-product-detail__video {
margin-top: 28px;
background: var(--om-color-surface);
border-radius: 16px;
padding: 28px;
box-shadow: 0 2px 10px rgba(13, 27, 60, 0.06);
}
.om-product-detail__video h2 {
margin: 0 0 16px;
font-size: 20px;
color: var(--om-color-text);
}
.om-product-detail__video-frame {
border-radius: 12px;
overflow: hidden;
background: #000;
}
.om-product-detail__video-frame video {
width: 100%;
height: auto;
display: block;
}
/* Produits associes */
.om-product-related {
padding: 24px 0 40px;
}
.om-section-heading--related {
text-align: center;
}
.om-section-heading--related h2 {
font-weight: 600;
font-size: 22px;
}
.om-product-related__carousel {
position: relative;
margin-top: 20px;
padding: 0 56px;
}
.om-product-related__track {
display: flex;
gap: 20px;
overflow-x: auto;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
padding: 4px 0;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.om-product-related__track::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
.om-product-related__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border: 1px solid var(--om-color-border-soft);
border-radius: 50%;
background: #fff;
color: var(--om-color-primary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 10px rgba(13, 27, 60, 0.12);
transition: background 0.2s, color 0.2s, transform 0.2s;
z-index: 2;
}
.om-product-related__nav:hover {
background: var(--om-color-primary);
color: #fff;
transform: translateY(-50%) scale(1.05);
}
.om-product-related__nav--prev {
left: 0;
}
.om-product-related__nav--next {
right: 0;
}
@media (max-width: 640px) {
.om-product-related__carousel {
padding: 0 44px;
}
.om-product-related__nav {
width: 36px;
height: 36px;
}
}
.om-product-related__card {
display: flex;
flex-direction: column;
gap: 12px;
background: var(--om-color-surface);
border-radius: 12px;
padding: 16px;
text-decoration: none;
color: inherit;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 1px 6px rgba(13, 27, 60, 0.04);
flex: 0 0 240px;
scroll-snap-align: start;
}
@media (max-width: 640px) {
.om-product-related__card {
flex-basis: 78%;
}
}
.om-product-related__card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(13, 27, 60, 0.10);
}
.om-product-related__image {
width: 100%;
aspect-ratio: 4 / 3;
background: #fff;
border: 1px solid var(--om-color-border-soft);
border-radius: 8px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.om-product-related__image img {
width: 100%;
height: 100%;
object-fit: contain;
}
.om-product-related__image-empty {
color: var(--om-color-text-muted);
font-size: 12px;
}
.om-product-related__info {
display: flex;
flex-direction: column;
gap: 4px;
}
.om-product-related__info h3 {
margin: 0 0 4px;
font-size: 15px;
font-weight: 600;
color: var(--om-color-text);
line-height: 1.3;
text-transform: uppercase;
}
.om-product-related__type,
.om-product-related__garantie {
font-size: 12px;
color: var(--om-color-text-muted);
}
.om-product-related__price {
margin-top: 4px;
font-size: 16px;
font-weight: 700;
color: var(--om-color-primary);
}
.om-product-related__dispo {
font-size: 12px;
color: var(--om-color-primary-dark);
font-weight: 500;
}
/* ==== Bouton ajout panier avec morph (idle -> loading -> success) ==== */
.om-product-detail__cart-btn {
position: relative;
border: none;
cursor: pointer;
font: inherit;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 220px;
overflow: hidden;
transition: background-color 0.35s ease;
}
.om-cart-btn__state {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.om-cart-btn__loading,
.om-cart-btn__success {
position: absolute;
inset: 0;
opacity: 0;
transform: translateY(8px);
pointer-events: none;
}
.om-product-detail__cart-btn.is-loading .om-cart-btn__label,
.om-product-detail__cart-btn.is-success .om-cart-btn__label {
opacity: 0;
transform: translateY(-8px);
}
.om-product-detail__cart-btn.is-loading .om-cart-btn__loading {
opacity: 1;
transform: translateY(0);
}
.om-product-detail__cart-btn.is-success .om-cart-btn__success {
opacity: 1;
transform: translateY(0);
}
.om-product-detail__cart-btn.is-success {
background-color: #22a06b;
color: #ffffff;
}
.om-product-detail__cart-btn.is-loading {
cursor: wait;
}
/* Spinner */
.om-cart-btn__spinner {
width: 20px;
height: 20px;
animation: om-cart-spin 0.8s linear infinite;
}
.om-cart-btn__spinner circle {
fill: none;
stroke: currentColor;
stroke-width: 3;
stroke-linecap: round;
stroke-dasharray: 38 62;
}
@keyframes om-cart-spin {
to { transform: rotate(360deg); }
}
/* Checkmark anime */
.om-cart-btn__check {
width: 22px;
height: 22px;
stroke: currentColor;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.om-cart-btn__check polyline {
stroke-dasharray: 24;
stroke-dashoffset: 24;
}
.om-product-detail__cart-btn.is-success .om-cart-btn__check polyline {
animation: om-cart-check-draw 0.35s ease-out 0.1s forwards;
}
@keyframes om-cart-check-draw {
to { stroke-dashoffset: 0; }
}
/* Image clone qui vole en parabole vers le panier */
.om-cart-fly-clone {
position: fixed;
top: 0;
left: 0;
width: 90px;
height: 90px;
z-index: 9999;
pointer-events: none;
border-radius: 12px;
box-shadow: 0 12px 32px rgba(21, 67, 96, 0.28);
object-fit: cover;
background: #ffffff;
will-change: transform, opacity, offset-distance;
offset-rotate: 0deg;
}
/* Bounce du badge quand produit ajoute */
.om-cart-badge.is-bouncing {
animation: om-cart-badge-bounce 0.7s cubic-bezier(0.36, 0, 0.4, 1.5);
}
@keyframes om-cart-badge-bounce {
0% { transform: scale(1); }
25% { transform: scale(1.5); background-color: #22a06b; }
55% { transform: scale(0.85); }
100% { transform: scale(1); }
}
/* Flash du panier header a l arrivee */
.om-header-cart.is-receiving img {
animation: om-cart-icon-wiggle 0.5s ease-out;
}
@keyframes om-cart-icon-wiggle {
0% { transform: rotate(0deg) translateY(0); }
30% { transform: rotate(-8deg) translateY(-3px); }
60% { transform: rotate(6deg) translateY(0); }
100% { transform: rotate(0deg) translateY(0); }
}
.om-product-detail__cart-confirm {
display: inline-block;
}
/* Responsive */
@media (max-width: 900px) {
.om-product-detail__inner {
grid-template-columns: 1fr;
gap: 24px;
padding: 20px;
}
.om-product-detail__title h1 {
font-size: 24px;
}
.om-product-detail__price strong {
font-size: 20px;
}
}
@media (max-width: 600px) {
.om-product-detail {
padding: 16px 0 32px;
}
.om-product-detail__inner {
padding: 16px;
border-radius: 12px;
}
.om-product-detail__infos {
grid-template-columns: 1fr 1fr;
}
.om-product-detail__actions {
flex-direction: column;
}
.om-product-detail__actions .om-primary-button,
.om-product-detail__actions .om-light-button {
width: 100%;
text-align: center;
}
.om-product-gallery__thumbs button {
width: 60px;
height: 60px;
}
}
/* =============================================================================
Loader / Spinner Softaneo (remplace le GIF)
============================================================================= */
.om-loader-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
grid-column: 1 / -1;
width: 100%;
padding: 60px 20px;
box-sizing: border-box;
}
.om-loader-wrap > .om-loader-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
margin: 0 auto;
padding: 40px 60px;
background: rgba(255, 255, 255, 0.85);
border-radius: 16px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
.om-loader-brand {
font-family: 'Poppins', sans-serif;
font-size: 24px;
font-weight: 700;
letter-spacing: 1.5px;
background: linear-gradient(
90deg,
var(--om-color-primary-dark, #061f56) 0%,
var(--om-color-primary-light, #6ea2ef) 50%,
var(--om-color-primary-dark, #061f56) 100%
);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: om-shimmer 2.4s ease-in-out infinite;
}
.om-loader-dots {
display: flex;
align-items: center;
gap: 10px;
}
.om-loader-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--om-color-primary, #0052a3);
animation: om-dot-pulse 1.4s ease-in-out infinite;
}
.om-loader-dot:nth-child(2) { animation-delay: 0.15s; }
.om-loader-dot:nth-child(3) { animation-delay: 0.3s; }
.om-loader-dot:nth-child(4) { animation-delay: 0.45s; }
.om-loader-text {
font-family: 'Poppins', sans-serif;
font-size: 13px;
color: var(--om-color-text-soft, #667188);
letter-spacing: 0.5px;
}
@keyframes om-shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
@keyframes om-dot-pulse {
0%, 80%, 100% {
transform: scale(0.4);
opacity: 0.25;
}
40% {
transform: scale(1.1);
opacity: 1;
}
}
/* =============================================================================
Y. Page Qui sommes nous (reprise rendu prod, en dur)
============================================================================= */
@font-face { font-family: "FuturaPTMedium"; src: url('futura/FuturaPTMedium.otf'); font-display: swap; }
@font-face { font-family: "Futura_Heavy_font"; src: url('futura/Futura_Heavy_font.ttf'); font-display: swap; }
.que_diffu_medium_et_small { display: block; }
.que_diffu_small { display: none; }
.ariane_retour_accueil_qsn {
padding-top: 15px;
}
.ariane_retour_accueil_qsn .btn_ariane_retour_accueil {
display: inline-block;
color: #004A93;
font-family: "Poppins", Arial, sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
padding: 6px 0;
}
.ariane_retour_accueil_qsn .btn_ariane_retour_accueil::before {
content: "\2190 ";
margin-right: 4px;
}
.cadre_article_ophtamarket_br_plateforme_dachat_et_de_vente_de_materiel_en_ophtalmologie {
padding-top: 20px;
padding-bottom: 30px;
background-color: #fff;
}
.cadre_article_ophtamarket_br_plateforme_dachat_et_de_vente_de_materiel_en_ophtalmologie h1 {
color: #004A93;
font-family: "FuturaPTMedium", "Poppins", Arial, sans-serif;
font-size: 22px;
line-height: 1.25;
padding-top: 10px;
padding-bottom: 20px;
margin: 0;
}
.cadre_principale_qui_sommes_nous {
padding-top: 20px;
padding-bottom: 30px;
}
.colonne_1_qui_somems_nous,
.colonne_2_qui_somems_nous {
width: 100%;
display: block;
}
.bloque_1_qui_sommes_nous,
.bloque_2_qui_sommes_nous,
.bloque_3_qui_sommes_nous {
position: relative;
border-radius: 7px;
padding: 40px 20px 30px 20px;
margin-bottom: 20px;
}
.cadre_principale_qui_sommes_nous .bloque_1_qui_sommes_nous {
background-color: #0B1956;
color: #fff;
}
.cadre_principale_qui_sommes_nous .bloque_2_qui_sommes_nous {
background-color: #004A93;
color: #fff;
}
.cadre_principale_qui_sommes_nous .bloque_3_qui_sommes_nous {
background-color: #F5F5F5;
color: #004A93;
padding: 40px 10px 15px 10px;
}
.bloque_1_qui_sommes_nous::after {
content: " ";
width: 58px;
height: 58px;
background-image: url('../images/cocarde.png');
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: 10px;
right: 15px;
}
.bloque_2_qui_sommes_nous::after {
content: " ";
width: 53px;
height: 50px;
background-image: url('../images/avatarcheck.png');
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: 20px;
right: 15px;
}
.bloque_3_qui_sommes_nous::after {
content: " ";
width: 59px;
height: 53px;
background-image: url('../images/planete.png');
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: 10px;
right: 15px;
}
.titre_qui_sommes_nous {
font-family: "FuturaPTMedium", "Poppins", Arial, sans-serif;
font-size: 24px;
padding-bottom: 10px;
}
.sous_titre_qui_sommes_nous {
font-family: "Futura_Heavy_font", "Poppins", Arial, sans-serif;
font-size: 18px;
padding-bottom: 20px;
line-height: 23px;
padding-right: 70px;
}
.contenu_titre_qui_sommes_nous {
font-family: "Poppins", Arial, sans-serif;
font-size: 15px;
line-height: 22px;
}
.contenu_titre_qui_sommes_nous p {
margin: 0 0 12px 0;
}
.image_qui_sommes_nous {
display: none;
margin-top: 10px;
}
.image_qui_sommes_nous img {
max-width: 100%;
height: auto;
display: block;
}
.bandeau_bas_qui_sommes_nous {
display: none;
}
.bandeau_bas_qui_sommes_nous img {
width: 100%;
height: auto;
display: block;
}
@media (min-width: 1024px) {
.que_diffu_medium_et_small { display: none; }
.cadre_article_ophtamarket_br_plateforme_dachat_et_de_vente_de_materiel_en_ophtalmologie h1 {
font-size: 28px;
padding-top: 30px;
padding-bottom: 30px;
}
.cadre_principale_qui_sommes_nous {
padding-top: 10px;
padding-bottom: 50px;
font-size: 0;
}
.colonne_1_qui_somems_nous {
width: 574px;
display: inline-block;
vertical-align: top;
font-size: 15px;
}
.colonne_2_qui_somems_nous {
width: 400px;
display: inline-block;
vertical-align: top;
margin-left: 20px;
font-size: 15px;
}
.bloque_1_qui_sommes_nous,
.bloque_2_qui_sommes_nous,
.bloque_3_qui_sommes_nous {
padding: 60px;
}
.cadre_principale_qui_sommes_nous .bloque_3_qui_sommes_nous {
padding: 60px 30px 30px 30px;
}
.sous_titre_qui_sommes_nous {
max-width: 320px;
padding-right: 0;
}
.image_qui_sommes_nous {
display: block;
}
}
@media (max-width: 767px) {
.que_diffu_small { display: block; }
.bandeau_bas_qui_sommes_nous { display: block; }
.bandeau_haut_qui_sommes_nous { display: none; }
}
/* =============================================================================
Page Occasion vs Reconditionné (contenu en dur, reprise du design prod)
============================================================================= */
body.om-page-bg-white,
body.om-page-bg-white .om-page {
background: #fff;
}
.contenu_page_occasion_vs_reconditionne {
padding-top: 16px;
padding-bottom: 60px;
}
.contenu_page_occasion_vs_reconditionne .om-container--narrow {
max-width: 1000px;
}
.om-occasion-recond-layout {
display: flex;
align-items: flex-start;
gap: 40px;
}
.om-occasion-recond-layout .cadre_article_occasion_vs_reconditionne {
flex: 0 0 45%;
max-width: 45%;
padding-top: 20px;
position: relative;
}
.om-occasion-recond-layout .cadre_article_occasion_vs_reconditionne_part2 {
flex: 0 0 55%;
max-width: 55%;
padding-left: 60px;
margin-top: 110px;
position: relative;
}
.cadre_article_occasion_vs_reconditionne h1 {
width: 220px;
color: #0B1956;
font-family: "Futura_Heavy_font", "Poppins", Arial, sans-serif;
font-size: 30px;
font-weight: normal;
padding-top: 0;
margin-top: 0;
margin-bottom: 20px;
line-height: 1.2;
}
.cadre_global_occasion_vs_recond {
position: relative;
}
.logo_planete {
position: absolute;
right: 120px;
top: -87px;
}
.logo_planete img {
display: block;
max-width: 100%;
height: auto;
}
.occasion_vs_recond_part_a {
padding-bottom: 25px;
padding-top: 10px;
}
.occasion_vs_recond_part_b {
padding-bottom: 25px;
}
.occasion_vs_recond_part_c {
padding-top: 40px;
padding-bottom: 30px;
background-color: #F5F5F5;
border-radius: 7px;
padding-left: 60px;
padding-right: 60px;
padding-top: 60px;
padding-bottom: 160px;
}
.sous_titre_occasion_vs_recond {
font-family: "Futura_Heavy_font", "Poppins", Arial, sans-serif;
font-weight: normal;
font-size: 18px;
padding-bottom: 15px;
color: #004A93;
}
.contenu_occasion_vs_recond {
font-size: 15px;
color: #242727;
line-height: 1.5;
}
.intro_sous_section_occasion_vs_recond {
font-size: 13px;
color: #0B1956;
}
.slogan_occasion_vs_recond {
color: #004A93;
font-family: "Futura_Heavy_font", "Poppins", Arial, sans-serif;
font-weight: normal;
font-size: 18px;
padding-bottom: 25px;
}
.img_final_occasion_vs_recond {
display: block;
margin-top: -100px;
margin-left: 30px;
margin-bottom: 60px;
}
.img_final_occasion_vs_recond img {
max-width: 100%;
height: auto;
width: 402px;
}
@media (max-width: 1024px) {
.om-occasion-recond-layout {
gap: 24px;
}
.om-occasion-recond-layout .cadre_article_occasion_vs_reconditionne_part2 {
padding-left: 30px;
margin-top: 80px;
}
.logo_planete {
right: 40px;
}
.occasion_vs_recond_part_c {
padding-left: 40px;
padding-right: 40px;
padding-bottom: 120px;
}
}
@media (max-width: 768px) {
.om-occasion-recond-layout {
flex-direction: column;
gap: 0;
}
.om-occasion-recond-layout .cadre_article_occasion_vs_reconditionne,
.om-occasion-recond-layout .cadre_article_occasion_vs_reconditionne_part2 {
flex: 0 0 100%;
max-width: 100%;
padding-left: 0;
padding-top: 20px;
margin-top: 20px;
}
.cadre_article_occasion_vs_reconditionne h1 {
width: auto;
font-size: 26px;
padding-right: 90px;
}
.logo_planete {
position: absolute;
right: 5px;
top: -55px;
}
.logo_planete img {
width: 75px;
}
.occasion_vs_recond_part_c {
padding: 30px 25px;
}
.img_final_occasion_vs_recond {
margin-top: 20px;
margin-left: 0;
margin-bottom: 30px;
text-align: center;
}
.img_final_occasion_vs_recond img {
width: 100%;
max-width: 380px;
}
}
/* ===== Popup entree (confirmation professionnel de sante) ===== */
/* Mise en forme reprise de l ancien theme pour garder l identite visuelle */
.cadre_interne_popup_de_depart {
width: 284px;
margin: auto;
text-align: center;
font-size: 18px;
color: #242727;
padding: 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.cadre_interne_popup_de_depart img {
width: 180px;
height: auto;
display: block;
margin: 0 auto;
}
.btn_popup_accueil {
background-color: #003989;
font-family: "Poppins", sans-serif;
font-weight: 600;
font-size: 12px;
color: #fff;
cursor: pointer;
transition: transform 0.3s ease;
padding: 10px 30px 10px 10px;
border-radius: 7px;
background-image: url('../images/check_blanc.png');
background-repeat: no-repeat;
background-position: 95% center;
display: inline-block;
margin-top: 15px;
}
.btn_popup_accueil:hover {
transform: scale(1.2);
}
.voile_popup_auto {
background: rgba(0, 0, 0, 0.70) !important;
}
@media screen and (min-width: 1000px) {
.interieur_popup_auto {
width: 800px !important;
margin-left: -400px !important;
top: 25% !important;
}
.cadre_interne_popup_de_depart {
width: 100%;
font-size: 20px;
line-height: 26px;
}
.cadre_interne_popup_de_depart img {
margin-bottom: 20px;
}
.btn_popup_accueil {
max-width: 284px;
margin: 40px auto 0 auto;
background-position: 95% center;
}
}
/* ============================================================
PAGE PANIER EN ETAPES (/mon-panier)
Styles repris de la prod ophtamarket.com (pour_theme_ophtamarket.css)
Adaptes : FuturaPT -> Poppins, fond page blanc
============================================================ */
.om-cart {
background: #ffffff;
padding: 30px 0 40px;
}
.om-cart .om-container--wide {
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
}
/* Mobile first */
.encadrement_grand_panier_en_etape {
padding-bottom: 40px;
font-family: "Poppins", sans-serif;
}
.detail_commande_en_etape {
padding-top: 10px;
color: #242727;
}
.titre_etape_panier {
padding-bottom: 20px;
font-size: 20px;
font-weight: 600;
color: #242727;
}
.interieur_panier_etape {
width: 320px;
margin: auto;
}
.un_element_ligne_panier_en_etape {
clear: both;
position: relative;
padding-bottom: 20px;
}
.cadre_vignette_produit_panier_etape {
width: 113px;
min-height: 130px;
float: left;
padding-right: 15px;
cursor: pointer;
}
.cadre_vignette_produit_panier_etape img {
width: 113px;
height: auto;
}
.cadre_info_produit_panier_etape {
width: 186px;
display: inline-block;
vertical-align: top;
font-size: 15px;
line-height: 20px;
}
.titre_une_ligne_panier_etape {
font-weight: bold;
cursor: pointer;
}
.description_courte_produit_panier_etape {
color: #6a7083;
font-size: 13px;
line-height: 18px;
}
.cadre_qut_et_suppr_panier_etape {
width: 106px;
display: inline-block;
vertical-align: top;
position: relative;
margin-bottom: 15px;
}
.information_ref_produit_panier_etape,
.information_stock_panier_etape {
display: none;
}
.qut_panier_etape {
display: inline-block;
}
.quantite_action_grand_panier {
font-size: 15px !important;
color: #1B2330 !important;
background-color: transparent !important;
border: 0px !important;
display: inline-block;
cursor: pointer;
width: 22px;
text-align: center;
line-height: 22px;
user-select: none;
}
.qut_prod_panier_etape {
border: 0px !important;
background-color: #DCDCDC !important;
border-radius: 3px;
font-weight: 500;
font-size: 11px;
color: #1B2330;
width: 22px;
display: inline-block;
text-align: center;
padding-top: 3px;
padding-bottom: 3px;
-moz-appearance: textfield;
appearance: textfield;
}
.qut_prod_panier_etape::-webkit-outer-spin-button,
.qut_prod_panier_etape::-webkit-inner-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
.cadre_suppr_panier_etape {
position: absolute;
bottom: 0px;
right: 10px;
height: 21px;
}
.cadre_suppr_panier_etape img {
height: 21px !important;
}
.prix_produit_panier_etape {
font-weight: 700;
font-size: 15px;
color: #4A4A4A;
}
.phrase_pour_ajout_info_complementaire,
.coche_obligatoire_pour_valider_panier {
clear: both;
}
.phrase_pour_ajout_info_complementaire {
font-size: 11px;
font-style: italic;
cursor: pointer;
color: #2f6cc4;
text-decoration: underline;
}
.cadre_interne_section_info_comp {
padding-top: 20px;
padding-bottom: 20px;
}
.titre_info_comp {
font-size: 14px;
color: #242727;
font-weight: bold;
padding-bottom: 12px;
}
.note_info_comp {
font-size: 12px;
font-style: italic;
color: #8a8f9c;
margin-top: 10px;
}
.pour_info_compl {
padding: 10px 12px;
width: 100%;
box-sizing: border-box;
border: 1px solid #cdd3dc;
border-radius: 4px;
font-family: inherit;
margin-bottom: 0;
}
.section_pour_bouton_suite_etape_panier {
position: fixed;
width: 100%;
background-color: #ffffff;
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
bottom: 0;
left: 0;
z-index: 5;
border-top: 1px solid #f0f0f0;
}
.interieur_section_pour_bouton_suite_etape_panier {
padding-top: 15px;
padding-bottom: 15px;
width: 350px;
margin: auto;
}
.diffusion_du_total_ttc_etape {
width: 100%;
}
.diffusion_du_total_ttc_etape_label {
font-weight: 800;
font-size: 15px;
color: #242727;
float: left;
padding-left: 25px;
}
.diffusion_du_total_ttc_etape_tarif {
font-weight: 800;
font-size: 15px;
color: #242727;
float: right;
padding-right: 25px;
}
.bouton_au_dessus_de_passage_etape_panier {
width: 181px;
margin-top: 20px;
cursor: pointer;
border: 1px solid #081B39;
background-color: #ffffff;
color: #081B39;
border-radius: 62px;
transition: transform 0.3s ease;
font-size: 13px;
font-weight: 500;
text-align: center;
padding: 10px 18px;
box-sizing: border-box;
}
.bouton_au_dessus_de_passage_etape_panier:hover {
transform: scale(1.05);
}
.bouton_de_passage_etape_panier {
float: right;
width: 181px;
margin-top: 10px;
cursor: pointer;
background-color: #081B39;
color: #ffffff;
border-radius: 62px;
transition: transform 0.3s ease;
font-size: 13px;
font-weight: 500;
text-align: center;
padding: 10px 18px;
box-sizing: border-box;
}
.bouton_de_passage_etape_panier:hover {
transform: scale(1.05);
}
.bouton_de_passage_etape_panier_inactif {
background-color: #707070;
}
.cadre_bouton_validation_panier_etape_livraison {
display: none;
}
.titre_recap_panier {
font-weight: 600;
font-size: 20px;
color: #242727;
padding-top: 20px;
padding-bottom: 20px;
}
.indication_tete_recap_panier_nb_prod {
font-weight: 800;
font-size: 15px;
color: #242727;
}
.recapitulatif_commande table {
width: 100%;
}
.recap_panier_img_prod {
border-bottom: 1px solid #bcbcbc;
}
.recap_panier_img_prod img {
width: 50px;
height: auto;
}
.recap_panier_info_prod {
font-size: 15px;
color: #242727;
border-bottom: 1px solid #bcbcbc;
}
.recap_produit_mini_titre {
font-weight: 600;
}
.recap_produit_qut {
color: #6a7083;
font-size: 13px;
}
.recap_panier_tarif_prod {
text-align: right;
border-bottom: 1px solid #bcbcbc;
color: #000;
font-size: 15px;
}
.td_de_tva_recap {
font-size: 12px;
color: #242727;
}
.montant_total_tva_recap {
font-weight: 800;
font-size: 12px;
text-align: right;
color: #000;
}
.td_de_total_recap {
font-weight: 800;
font-size: 15px;
color: #242727;
}
.montant_total_total_recap {
font-weight: 800;
font-size: 15px;
text-align: right;
color: #000;
}
.pied_panier_etape {
height: 50px;
}
/* Header 3 etapes */
.cadre_header_panier_etape {
padding-top: 0;
padding-bottom: 30px;
font-size: 11px;
color: #000;
}
.cadre_header_panier_etape table {
width: 100%;
table-layout: fixed;
}
.cadre_header_panier_etape td {
text-align: center;
vertical-align: middle;
padding-left: 3px;
padding-right: 3px;
}
.cadre_header_panier_etape td:not(.sepa_td_header_etape) {
width: 10%;
cursor: pointer;
}
.cadre_header_panier_etape img {
height: 20px;
cursor: pointer;
display: block;
margin: 0 auto 6px;
}
.ligne_separation_header_panier_etape {
height: 1px;
background-color: #bcbcbc;
width: 100%;
}
.ligne_separation_header_panier_etape_active {
background-color: #004A93;
height: 2px;
width: 100%;
}
.sepa_td_header_etape {
width: 20%;
}
.entour_resume_panier_mot_ancre {
width: 320px;
margin: auto;
text-align: left;
}
/* === Desktop (>= 730px) === */
@media screen and (min-width: 730px) {
.cadre_header_panier_etape img {
height: 25px;
}
.cadre_header_panier_etape {
font-size: 12px;
}
.sepa_td_header_etape {
width: 35%;
}
.detail_commande_en_etape {
position: relative;
display: flex;
align-items: stretch;
width: 100%;
}
/* Trait separateur vertical continu entre les 2 colonnes, ne peut pas etre coupe */
.detail_commande_en_etape::after {
content: '';
position: absolute;
left: 59.5%;
top: 0;
bottom: 0;
width: 1px;
background-color: #adadad;
pointer-events: none;
}
.section_gauche_etape_base_panier {
flex: 0 0 59.5%;
box-sizing: border-box;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 30px;
border-right: none;
}
.recapitulatif_commande {
flex: 0 0 39.5%;
box-sizing: border-box;
padding-left: 20px;
padding-right: 20px;
}
.titre_recap_panier {
padding-top: 0px;
}
.interieur_panier_etape {
width: 100%;
}
.cadre_vignette_produit_panier_etape {
width: 150px;
float: none;
display: inline-block;
padding: 0;
}
.cadre_vignette_produit_panier_etape img {
width: 150px;
}
.cadre_info_produit_panier_etape {
width: calc(100% - 160px);
display: inline-block;
padding-left: 20px;
box-sizing: border-box;
}
.cadre_qut_et_suppr_panier_etape {
width: 100%;
text-align: right;
}
.cadre_suppr_panier_etape {
position: relative;
display: inline-block;
padding-top: 5px;
padding-left: 30px;
vertical-align: bottom;
bottom: auto;
right: auto;
height: auto;
}
.qut_panier_etape {
vertical-align: bottom;
padding-bottom: 1px;
}
.qut_prod_panier_etape {
width: 30px;
text-align: center;
}
.diffusion_du_total_ttc_etape {
display: none;
}
.section_pour_bouton_suite_etape_panier {
position: static;
width: 100%;
box-shadow: none;
border-top: 0;
padding-right: 200px;
box-sizing: border-box;
}
.interieur_section_pour_bouton_suite_etape_panier {
padding-top: 0;
width: auto;
}
.bouton_de_passage_etape_panier {
margin-top: -90px;
}
.cadre_bouton_validation_panier_etape_livraison {
padding-left: 30px;
display: block;
}
.cadre_bouton_validation_panier_etape_livraison .bouton_de_passage_etape_panier {
margin-top: 20px;
float: left;
}
.pied_panier_etape {
height: 0;
}
.entour_resume_panier_mot_ancre {
width: 100%;
}
}
/* === Footer fix mobile etapes panier : total TTC compact + bouton sur une seule ligne centre === */
@media screen and (max-width: 729px) {
.section_pour_bouton_suite_etape_panier .interieur_section_pour_bouton_suite_etape_panier {
padding-top: 8px;
padding-bottom: 8px;
text-align: center;
}
.section_pour_bouton_suite_etape_panier .diffusion_du_total_ttc_etape_label {
font-size: 13px;
padding-left: 15px;
}
.section_pour_bouton_suite_etape_panier .diffusion_du_total_ttc_etape_tarif {
font-size: 13px;
padding-right: 15px;
}
.section_pour_bouton_suite_etape_panier .bouton_de_passage_etape_panier {
display: inline-block;
float: none;
width: auto;
min-width: 220px;
margin-top: 6px;
white-space: nowrap;
}
}
/* === Bloc Besoin d aide === */
.om-cart-help {
background: #f4f5f8;
border: 1px solid #dfe3eb;
border-radius: 10px;
padding: 28px 20px;
text-align: center;
margin: 40px auto 0;
max-width: 700px;
}
.om-cart-help h2 {
font-size: 18px;
font-weight: 700;
color: #202944;
margin: 0 0 10px;
}
.om-cart-help p {
color: #6a7083;
font-size: 14px;
margin: 0 0 10px;
}
.om-cart-help__phone {
display: inline-block;
font-size: 18px;
font-weight: 700;
color: #2f6cc4;
text-decoration: underline;
}
/* ==== ETAPE 2 PANIER - Adresses livraison / facturation ==== */
.encadre_gestionnaire_adresse {
margin-top: 10px;
}
.interieur_gestionnaire_addrese {
font-family: "Poppins", sans-serif;
}
.separateur_de_groupe_facture_annexe {
margin-bottom: 28px;
}
.titre_de_groupe_type_adresse_annexe {
font-size: 16px;
font-weight: 700;
color: #1c2538;
padding-bottom: 12px;
border-bottom: 1px solid #e1e4ea;
margin-bottom: 14px;
}
/* Carte d adresse */
.present_adresse_active,
.present_adresse_inactive {
position: relative;
display: flex;
align-items: flex-start;
gap: 14px;
background: #ffffff;
border: 1px solid #dfe3eb;
border-radius: 10px;
padding: 16px 18px;
margin-bottom: 12px;
cursor: pointer;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.present_adresse_inactive:hover {
border-color: #b7c2d4;
background: #f9fbfe;
}
.present_adresse_active {
border-color: #003989;
background: #f4f8ff;
box-shadow: 0 2px 6px rgba(0, 57, 137, 0.08);
cursor: default;
}
/* Radio activation */
.btn_activation_adresse_annexe {
flex: 0 0 auto;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid #b7c2d4;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
margin-top: 2px;
box-sizing: border-box;
}
.present_adresse_active .btn_activation_adresse_annexe {
border-color: #003989;
}
.interieur_btn_activation_adresse_annexe {
width: 10px;
height: 10px;
border-radius: 50%;
background: transparent;
}
.present_adresse_active .interieur_btn_activation_adresse_annexe {
background: #003989;
}
/* Contenu de la carte */
.contenu_adresse_annexe {
flex: 1 1 auto;
font-size: 14px;
color: #2b2f39;
line-height: 1.5;
}
.zone_titre_individuel_adresse_annexe {
font-size: 15px;
font-weight: 700;
color: #1c2538;
margin-bottom: 6px;
}
/* Actions Modifier / Supprimer */
.action_adresse_annexe {
flex: 0 0 auto;
display: flex;
flex-direction: column;
gap: 6px;
align-items: flex-end;
}
.btn_action_adresse_annexe {
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
transition: background 0.15s ease;
}
.btn_action_adresse_annexe:hover {
background: #eef3fa;
}
.btn_action_adresse_annexe table {
border-collapse: collapse;
}
.logo_de_btn_action_adresse_annexe {
padding-right: 6px;
vertical-align: middle;
}
.logo_de_btn_action_adresse_annexe img {
width: 14px;
height: 14px;
object-fit: contain;
opacity: 0.7;
}
.txt_btn_action_adresse_annexe {
font-size: 12px;
color: #5c6578;
font-weight: 500;
line-height: 1;
}
.btn_action_adresse_annexe_supprimer .txt_btn_action_adresse_annexe {
color: #c23b3b;
}
.btn_action_adresse_annexe_supprimer:hover .logo_de_btn_action_adresse_annexe img {
opacity: 1;
}
/* ==== Formulaire modification / ajout d adresse ==== */
.cadre_adresse_annexe {
background: #f9fbfe;
border: 1px solid #dfe3eb;
border-radius: 10px;
padding: 20px 22px;
margin-bottom: 14px;
}
.cadre_adresse_annexe_interne {
max-width: 100%;
}
.titre_au_dessus_formulaire_nouvelle_adresse {
font-size: 15px;
font-weight: 700;
color: #1c2538;
padding-bottom: 14px;
border-bottom: 1px solid #e1e4ea;
margin-bottom: 16px;
}
/* Choix Livraison / Facturation */
.btn_selection_type_adresse,
.btn_selection_type_adresse_selected {
border: 1px solid #dfe3eb;
border-radius: 8px;
padding: 10px 12px;
text-align: center;
cursor: pointer;
background: #ffffff;
font-size: 13px;
color: #2b2f39;
transition: all 0.15s ease;
margin-right: 6px;
}
.btn_selection_type_adresse:hover {
border-color: #b7c2d4;
background: #f3f6fb;
}
.btn_selection_type_adresse_selected {
border-color: #003989;
background: #003989;
color: #ffffff;
font-weight: 600;
}
.td_img_type_adresse {
display: none;
}
.pour_img_type_adresse_selection {
display: none;
}
.btn_selection_type_adresse table,
.btn_selection_type_adresse_selected table {
width: 100%;
border-collapse: collapse;
}
/* Formulaire d adresse interne */
.cadre_formulaire_adresse_interne {
margin-top: 16px;
}
.cadre_formulaire_adresse_interne table {
width: 100%;
border-collapse: separate;
border-spacing: 0 10px;
}
.cadre_formulaire_adresse_interne td {
vertical-align: middle;
padding: 0;
}
.cadre_label_form_adresse_annexe {
padding-right: 12px;
}
.interieur_label_form_adresse_annexe {
font-size: 13px;
color: #5c6578;
font-weight: 500;
text-align: right;
padding-right: 4px;
}
.label_form_adresse_front {
width: 110px !important;
text-align: right !important;
}
.cadre_champs_form_adresse_annexe_designation,
.cadre_champs_form_adresse_annexe_rue,
.cadre_champs_form_adresse_annexe_cp,
.cadre_champs_form_adresse_annexe_commune,
.cadre_champs_form_adresse_annexe_pays,
.cadre_champs_form_adresse_annexe_precision {
flex: 1 1 auto;
}
.champs_de_form {
border: 1px solid #cdd3dc;
border-radius: 6px;
padding: 9px 12px;
font-size: 14px;
font-family: inherit;
color: #2b2f39;
background: #ffffff;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
box-sizing: border-box;
}
.champs_de_form:focus {
outline: none;
border-color: #003989;
box-shadow: 0 0 0 3px rgba(0, 57, 137, 0.1);
}
select.champs_de_form {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235c6578' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
cursor: pointer;
}
.cadre_champs_form_adresse_annexe_cp .champs_de_form {
width: 120px !important;
}
.section_particularite_addresse_livraison {
padding: 10px 0;
}
/* Boutons annulation / validation dans le form adresse */
.bouton_annulation_ajout_modif_adresse_client_front,
.bouton_de_validation_ajout_modif_adresse_client_front,
.btn_validation.bouton_de_validation_ajout_modif_adresse_client_front {
display: inline-block;
padding: 10px 22px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: transform 0.15s ease, background 0.15s ease;
margin: 16px 6px 0;
border: 1px solid transparent;
box-sizing: border-box;
}
.bouton_annulation_ajout_modif_adresse_client_front {
background: #ffffff;
color: #5c6578;
border-color: #cdd3dc;
}
.bouton_annulation_ajout_modif_adresse_client_front:hover {
background: #f3f6fb;
border-color: #b7c2d4;
}
.btn_validation.bouton_de_validation_ajout_modif_adresse_client_front,
.bouton_de_validation_ajout_modif_adresse_client_front {
background: #003989;
color: #ffffff;
}
.bouton_de_validation_ajout_modif_adresse_client_front:hover {
background: #002a66;
transform: scale(1.02);
}
/* Bouton "Creer une nouvelle adresse" */
.bouton_de_creation_nouvelle_adresse,
.btn_validation.bouton_de_creation_nouvelle_adresse {
display: inline-block;
margin: 14px auto 4px;
padding: 12px 24px;
border: 1px dashed #003989;
border-radius: 8px;
color: #003989;
font-size: 14px;
font-weight: 600;
cursor: pointer;
background: transparent;
text-align: center;
transition: background 0.15s ease, transform 0.15s ease;
}
.bouton_de_creation_nouvelle_adresse:hover,
.btn_validation.bouton_de_creation_nouvelle_adresse:hover {
background: #f4f8ff;
transform: scale(1.02);
}
/* Centrage du bouton Creer nouvelle adresse */
.encadre_gestionnaire_adresse center,
.interieur_gestionnaire_addrese center {
margin-top: 10px;
}
/* Responsive : au-dessous de 730px, layout plus compact */
@media screen and (max-width: 729px) {
.present_adresse_active,
.present_adresse_inactive {
flex-wrap: wrap;
padding: 14px;
}
.action_adresse_annexe {
flex-direction: row;
width: 100%;
justify-content: flex-end;
margin-top: 6px;
gap: 10px;
}
.cadre_adresse_annexe {
padding: 16px 14px;
}
.label_form_adresse_front {
width: 90px !important;
}
.interieur_label_form_adresse_annexe {
font-size: 12px;
}
}
/* ==== ETAPE 3 PANIER - Selection du mode de paiement ==== */
.cadre_selection_mode_de_paiement_panier {
font-family: "Poppins", sans-serif;
padding-top: 10px;
}
/* Case a cocher CGV */
.coche_obligatoire_pour_valider_panier {
background: #ffffff;
border: 1px solid #dfe3eb;
border-radius: 10px;
padding: 14px 18px;
margin-bottom: 22px;
}
.coche_obligatoire_pour_valider_panier table {
width: 100%;
border-collapse: collapse;
}
.coche_obligatoire_pour_valider_panier td {
vertical-align: middle;
font-size: 13px;
color: #2b2f39;
line-height: 1.5;
}
.coche_obligatoire_pour_valider_panier td:last-child {
width: 32px;
text-align: right;
padding-left: 12px;
}
.coche_obligatoire_pour_valider_panier a {
color: #003989;
text-decoration: underline;
}
.coche_obligatoire_pour_valider_panier_checkbox {
width: 20px;
height: 20px;
cursor: pointer;
accent-color: #003989;
}
/* Zone des modes de paiement (opacite reduite tant que CGV pas cochees) */
.interieur_cadre_selection_mode_de_paiement_panier {
transition: opacity 0.2s ease;
}
/* Titre au dessus de la liste */
.cadre_selection_mode_de_paiement_panier .titre_etape_panier,
.titre_cadre_selection_mode_de_paiement_panier {
font-size: 16px;
font-weight: 700;
color: #1c2538;
padding-bottom: 12px;
border-bottom: 1px solid #e1e4ea;
margin-bottom: 16px;
}
/* Liste des modes : une ligne par mode */
.cadre_des_liste_de_mode_de_paiement {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 18px;
}
/* Une ligne mode de paiement : nom gauche | logo droite | radio droite */
.un_ele_liste_de_mode_de_paiement {
background: #ffffff;
border: 1px solid #dfe3eb;
border-radius: 10px;
padding: 14px 20px;
cursor: pointer;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: 16px;
box-sizing: border-box;
position: relative;
}
.un_ele_liste_de_mode_de_paiement:hover {
border-color: #b7c2d4;
background: #f9fbfe;
}
/* Card selectionnee (classe ajoutee par le JS du plugin : un_ele_liste_de_mode_de_paiement_selection) */
.un_ele_liste_de_mode_de_paiement_selection {
border-color: #003989 !important;
background: #f4f8ff !important;
box-shadow: 0 4px 14px rgba(0, 57, 137, 0.10);
}
/* Le titre du mode a gauche */
.titre_un_ele_liste_de_mode_de_paiement {
flex: 1 1 auto;
font-size: 15px;
font-weight: 600;
color: #1c2538;
text-align: left;
margin: 0;
}
/* Le logo a droite (si present) */
.img_un_ele_liste_de_mode_de_paiement {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: flex-end;
min-height: 32px;
max-width: 160px;
}
.img_un_ele_liste_de_mode_de_paiement img {
max-height: 32px;
max-width: 160px;
width: auto !important;
height: auto !important;
object-fit: contain;
}
/* Radio bouton tout a droite */
.btn_un_ele_liste_de_mode_de_paiement {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.btn_un_ele_liste_de_mode_de_paiement .btn_paiement {
width: 18px;
height: 18px;
border-radius: 50%;
background: transparent;
border: 2px solid #cdd3dc;
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 0;
text-indent: -9999px;
position: relative;
}
.un_ele_liste_de_mode_de_paiement_selection .btn_un_ele_liste_de_mode_de_paiement > .btn_paiement {
border-color: #003989;
}
.un_ele_liste_de_mode_de_paiement_selection .btn_un_ele_liste_de_mode_de_paiement > .btn_paiement::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
border-radius: 50%;
background: #003989;
}
/* Zone detail du mode de paiement (enfant de la card, visible quand selectionnee) */
.detail_un_ele_liste_de_mode_de_paiement {
width: 100%;
flex: 0 0 100%;
background: #ffffff;
border: 1px solid #e1e4ea;
border-radius: 8px;
padding: 20px 22px;
margin-top: 16px;
animation: om-fade-in 0.2s ease;
box-sizing: border-box;
text-align: left;
}
@keyframes om-fade-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Cadre interne paiement (override du CSS legacy du plugin) */
.detail_un_ele_liste_de_mode_de_paiement .cadre_systeme_paiement_interne {
padding: 0;
width: 100%;
}
.detail_un_ele_liste_de_mode_de_paiement .fieldset_systeme_paiement_interne {
border: none;
background: transparent;
padding: 0;
text-align: left;
}
.detail_un_ele_liste_de_mode_de_paiement .fieldset_systeme_paiement_interne legend {
background: transparent;
border: none;
padding: 0 0 12px 0;
font-size: 15px;
font-weight: 700;
color: #1c2538;
}
/* Tableau IBAN (virement) */
.cadre_message_paiement {
background: #ffffff;
border: 1px solid #e1e4ea;
border-radius: 8px;
padding: 18px;
color: #2b2f39;
font-size: 14px;
line-height: 1.6;
}
.cadre_message_paiement p {
margin: 0 0 12px;
}
.cadre_message_paiement table {
display: table !important;
width: 100%;
border-collapse: collapse;
margin-top: 10px;
font-size: 13px;
}
.cadre_message_paiement table td {
padding: 6px 10px;
border-bottom: 1px solid #eef1f6;
}
.cadre_message_paiement table tr:last-child td {
border-bottom: none;
}
.cadre_message_paiement strong {
color: #1c2538;
}
/* Erreur de paiement */
.erreur_valide_paiement {
margin: 14px 0;
padding: 12px 16px;
border-radius: 8px;
background: #fff1f1;
border: 1px solid #f5c6c6;
color: #c23b3b;
font-size: 13px;
display: none;
}
/* Bouton Payer (form Axepta) + Valider ce mode de paiement (virement) */
.detail_un_ele_liste_de_mode_de_paiement form button[type="submit"],
.detail_un_ele_liste_de_mode_de_paiement .btn_paiement:not(.btn_un_ele_liste_de_mode_de_paiement .btn_paiement) {
display: inline-block !important;
padding: 12px 32px !important;
background: #003989 !important;
color: #ffffff !important;
border: none !important;
border-radius: 8px !important;
font-size: 14px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: background 0.15s ease, transform 0.15s ease !important;
text-transform: none !important;
letter-spacing: normal !important;
line-height: 1.3 !important;
text-align: center !important;
margin: 16px 0 0 !important;
width: auto !important;
box-shadow: none !important;
text-shadow: none !important;
font-family: inherit !important;
}
.detail_un_ele_liste_de_mode_de_paiement form button[type="submit"]:hover,
.detail_un_ele_liste_de_mode_de_paiement .btn_paiement:not(.btn_un_ele_liste_de_mode_de_paiement .btn_paiement):hover {
background: #002a66 !important;
transform: scale(1.02);
}
/* Ce bouton est pose dans un center> tag, on garde l alignement */
.detail_un_ele_liste_de_mode_de_paiement center {
display: block;
margin-top: 16px;
}
/* Responsive paiement */
@media screen and (max-width: 729px) {
.cadre_des_liste_de_mode_de_paiement {
grid-template-columns: 1fr;
}
.un_ele_liste_de_mode_de_paiement {
flex-direction: row;
align-items: center;
min-height: 70px;
text-align: left;
padding: 12px 14px;
}
.titre_un_ele_liste_de_mode_de_paiement {
flex: 1 1 auto;
margin-bottom: 0;
text-align: left;
}
.img_un_ele_liste_de_mode_de_paiement {
flex: 0 0 80px;
min-height: 40px;
margin-bottom: 0;
}
.img_un_ele_liste_de_mode_de_paiement img {
max-height: 36px;
}
.btn_un_ele_liste_de_mode_de_paiement {
width: auto;
flex: 0 0 auto;
margin-left: 10px;
}
.detail_un_ele_liste_de_mode_de_paiement {
padding: 16px 14px;
}
.cadre_message_paiement {
padding: 14px;
}
.cadre_message_paiement table {
font-size: 12px;
}
}
/* =============================================================================
Catalogue occasion — Barre mobile fixe Filtrer / Trier + overlays
============================================================================= */
.om-mobile-filter-bar {
display: none;
}
.om-mobile-overlay {
display: none;
}
@media (max-width: 768px) {
.om-mobile-filter-bar {
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 56px;
background: #ffffff;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
border-top: 1px solid #e5eaf0;
z-index: 200;
}
.om-mobile-filter-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
border: 0;
background: transparent;
color: var(--om-color-primary-dark);
font-family: "Poppins", sans-serif;
font-weight: 500;
font-size: 15px;
cursor: pointer;
padding: 0;
}
.om-mobile-filter-btn + .om-mobile-filter-btn {
border-left: 1px solid #f0f0f0;
}
.om-mobile-filter-btn svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.om-catalogue {
padding-bottom: 70px;
}
.om-catalogue .om-filters-sidebar,
.om-catalogue .om-catalogue-toolbar {
display: none;
}
.om-catalogue-layout {
display: block;
}
.om-mobile-overlay {
position: fixed;
inset: 0;
background: #ffffff;
z-index: 1000;
flex-direction: column;
overflow-y: auto;
}
.om-mobile-overlay--open {
display: flex;
}
body.om-mobile-overlay-is-open {
overflow: hidden;
}
.om-mobile-overlay__header {
display: flex;
align-items: center;
justify-content: center;
padding: 18px 16px;
position: relative;
flex-shrink: 0;
}
.om-mobile-overlay__header h3 {
margin: 0;
font-family: "Poppins", sans-serif;
font-size: 15px;
font-weight: 600;
color: var(--om-color-primary-dark);
}
.om-mobile-overlay__header--sub {
justify-content: space-between;
padding: 14px 16px;
}
.om-mobile-overlay__controls {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 18px 12px;
flex-shrink: 0;
}
.om-mobile-overlay__close,
.om-mobile-overlay__back {
border: 0;
background: transparent;
font-size: 26px;
line-height: 1;
color: var(--om-color-primary-dark);
cursor: pointer;
padding: 4px 6px;
}
.om-mobile-overlay__clear {
color: var(--om-color-primary);
text-decoration: none;
font-family: "Poppins", sans-serif;
font-size: 14px;
font-weight: 500;
}
.om-mobile-overlay__list {
list-style: none;
margin: 0;
padding: 0;
flex: 1;
}
.om-mobile-overlay__list > li {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px;
border-bottom: 1px solid #edf0f5;
cursor: pointer;
font-family: "Poppins", sans-serif;
font-size: 15px;
color: var(--om-color-primary-dark);
}
.om-mobile-overlay__label {
flex: 1;
}
.om-mobile-overlay__chevron {
color: #9aa3b4;
font-size: 22px;
line-height: 1;
}
.om-mobile-overlay__form {
display: flex;
flex-direction: column;
flex: 1;
}
.om-mobile-choice-list {
list-style: none;
margin: 0;
padding: 8px 22px 20px;
flex: 1;
}
.om-mobile-choice-list > li {
padding: 10px 0;
}
.om-mobile-checkbox,
.om-mobile-radio {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
font-family: "Poppins", sans-serif;
font-size: 14px;
color: var(--om-color-primary-dark);
}
.om-mobile-checkbox input[type="checkbox"],
.om-mobile-radio input[type="radio"] {
width: 18px;
height: 18px;
margin: 0;
accent-color: var(--om-color-primary-dark);
cursor: pointer;
}
.om-mobile-checkbox__mark,
.om-mobile-radio__mark {
display: none;
}
.om-mobile-overlay__footer {
padding: 20px 22px 28px;
text-align: center;
flex-shrink: 0;
}
.om-mobile-overlay__validate {
display: inline-block;
min-width: 200px;
padding: 12px 28px;
background: #89acff;
color: #ffffff;
border: 0;
border-radius: 10px;
font-family: "Poppins", sans-serif;
font-size: 15px;
font-weight: 500;
cursor: pointer;
}
.om-mobile-overlay__validate:hover {
background: #7299f0;
}
/* Decaler le scroll-top au-dessus de la barre mobile pour eviter le chevauchement */
body:has(.om-mobile-filter-bar) .om-scroll-top-zone,
body:has(.section_de_filtrage_mobile) .om-scroll-top-zone {
bottom: 44px;
}
}
/* =============================================================================
Catalogue materiel neuf - vignettes produit avec images
Vignettes "carte blanche" : image centree + nom produit + marque en sous-titre
============================================================================= */
.om-product-card--catalogue-neuf {
background: #fff;
border: 1px solid var(--om-color-border);
border-radius: 4px;
overflow: hidden;
padding: 0;
display: flex;
flex-direction: column;
}
.om-product-card--catalogue-neuf .om-product-card__image {
background: #fff;
padding: 24px 20px 16px;
height: 315px;
display: flex;
align-items: center;
justify-content: center;
}
.om-product-card--catalogue-neuf .om-product-card__image img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.om-product-card--catalogue-neuf .om-product-card__content {
padding: 10px 14px 16px;
border-top: 1px solid #f0f3f7;
text-align: left;
}
.om-product-card--catalogue-neuf .om-product-card__name {
margin: 0 0 4px;
font-size: 12px;
font-weight: 500;
line-height: 1.35;
color: #2d3a52;
}
.om-product-card--catalogue-neuf .om-product-card__brand {
margin: 0;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.05em;
color: #8d97aa;
text-transform: uppercase;
}
/* =============================================================================
Catalogue chirurgie - produit unique mis en avant (layout highlight)
============================================================================= */
.om-catalogue-products--highlight {
padding: 36px 0 40px;
}
.om-product-highlight {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: 40px;
}
.om-product-highlight__visual {
display: flex;
align-items: center;
justify-content: center;
}
.om-product-highlight__visual img {
max-width: 100%;
max-height: 520px;
object-fit: contain;
}
.om-product-highlight__content h2 {
margin: 0 0 18px;
font-size: 26px;
line-height: 1.15;
font-weight: 800;
color: #2d2d2d;
}
.om-product-highlight__content p {
margin: 0 0 24px;
font-size: 14px;
line-height: 1.7;
color: #414141;
}
.om-product-highlight__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 280px;
height: 44px;
padding: 0 18px;
border-radius: 6px;
background: var(--om-color-primary);
color: #fff;
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition: background 0.2s ease;
}
.om-product-highlight__cta:hover {
background: var(--om-color-primary-dark);
}
.om-product-highlight__cta svg {
width: 18px;
height: 18px;
fill: currentColor;
}
/* Mobile */
@media (max-width: 768px) {
.om-product-highlight {
grid-template-columns: 1fr;
gap: 18px;
}
.om-product-highlight__visual img {
max-height: 300px;
}
.om-product-highlight__content h2 {
font-size: 22px;
}
.om-product-highlight__content p {
font-size: 13px;
}
.om-product-highlight__cta {
width: 100%;
min-width: 0;
}
.om-catalogue-products--highlight {
padding: 18px 0 24px;
}
/* Catalogue materiel neuf : grille mobile 2 colonnes */
.om-product-grid--catalogue-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.om-product-card--catalogue-neuf .om-product-card__image {
height: 170px;
padding: 14px 10px 10px;
}
.om-product-card--catalogue-neuf .om-product-card__content {
padding: 8px 10px 12px;
}
}
/* ==================================================================
Page en cours de creation (maintenance temporaire page services)
================================================================== */
.om-maintenance-page {
padding: 84px 0 120px;
}
.om-container--maintenance {
width: 100%;
max-width: 1168px;
margin: 0 auto;
padding: 0 24px;
}
.om-maintenance-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 88px;
min-height: 430px;
}
.om-maintenance-text {
max-width: 520px;
}
.om-maintenance-text h1 {
margin: 0 0 22px;
font-size: 44px;
line-height: 1.1;
font-weight: 700;
color: #152545;
letter-spacing: -0.02em;
}
.om-maintenance-text p {
margin: 0 0 14px;
font-size: 15px;
line-height: 1.8;
color: #6f7788;
font-weight: 400;
}
.om-maintenance-illustration {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 430px;
}
.om-maintenance-illustration img {
width: 100%;
max-width: 430px;
height: auto;
object-fit: contain;
}
@media (max-width: 768px) {
.om-maintenance-page {
padding: 40px 20px 56px;
text-align: center;
}
.om-container--maintenance {
padding: 0;
}
.om-maintenance-hero {
flex-direction: column;
gap: 24px;
min-height: 0;
}
.om-maintenance-illustration {
flex: 0 0 auto;
order: -1;
}
.om-maintenance-illustration img {
max-width: 260px;
}
.om-maintenance-text {
max-width: 320px;
margin: 0 auto;
}
.om-maintenance-text h1 {
font-size: 28px;
line-height: 1.2;
margin: 0 0 18px;
}
.om-maintenance-text p {
font-size: 14px;
line-height: 1.7;
margin: 0 0 12px;
}
}