/* ==========================================================================
Catalogue WooCommerce — thème IDCOMWEB
Maquette Figma « DGS E-commerce » (archive product_cat)
========================================================================== */
:root {
--cat-blanc: #ffffff;
--cat-bleu-clair: #61dbff;
--cat-bleu: #0062d8;
--cat-bleu-moyen: #0d4397;
--cat-bleu-fonce: #00356d;
--cat-noir: #272727;
--cat-gris-clair: #f5f5f5;
--cat-gris-moyen: #bbbbbb;
--cat-rouge: #ff0004;
--cat-font: "Plus Jakarta Sans", sans-serif;
/* Système de mise en page (aligné sur la maquette 1920px) */
--cat-container: 1560px;
--cat-pad: clamp(20px, 4vw, 40px);
--cat-aside: 254px;
--cat-col-gap: 62px;
}
/* Police forcée sur tout le catalogue (le thème applique une police globale
via un sélecteur universel qu'il faut battre en spécificité). */
.catalogue,
.catalogue *,
.catalogue-hero,
.catalogue-hero *,
.single-produit,
.single-produit * {
font-family: var(--cat-font);
}
.catalogue *,
.catalogue-hero *,
.single-produit * {
box-sizing: border-box;
}
/* --------------------------------------------------------------------------
1. Bannière hero
-------------------------------------------------------------------------- */
.catalogue-hero {
position: relative;
display: flex;
align-items: flex-end;
min-height: 500px;
overflow: hidden;
}
.catalogue-hero__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.catalogue-hero__bg::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 98, 216, 0.6);
}
/* Pas d'image : dégradé bleu de repli */
.catalogue-hero--plain .catalogue-hero__bg {
background: linear-gradient(120deg, var(--cat-bleu) 0%, var(--cat-bleu-fonce) 100%);
}
.catalogue-hero--plain .catalogue-hero__bg::after {
display: none;
}
.catalogue-hero__inner {
position: relative;
z-index: 1;
width: 100%;
max-width: var(--cat-container);
margin: 0 auto;
/* Le texte s'aligne sur la colonne des produits (décalé de la sidebar). */
padding: 0 var(--cat-pad) 80px calc(var(--cat-pad) + var(--cat-aside) + var(--cat-col-gap));
display: flex;
flex-direction: column;
gap: 25px;
color: var(--cat-blanc);
}
.catalogue-hero__text {
display: flex;
flex-direction: column;
gap: 4px;
}
.catalogue-hero__surtitre {
margin: 0;
font-size: 25px;
font-weight: 500;
line-height: 1.1;
letter-spacing: 5px;
text-transform: uppercase;
}
.catalogue-hero__title {
margin: 0;
font-size: clamp(34px, 4vw, 60px);
font-weight: 800;
line-height: 1.05;
color: var(--cat-blanc);
}
/* Fil d'ariane */
.catalogue-breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
font-size: 16px;
}
.catalogue-breadcrumb a {
color: var(--cat-blanc);
text-decoration: none;
font-weight: 400;
}
.catalogue-breadcrumb a:hover {
text-decoration: underline;
}
.catalogue-breadcrumb__current {
color: var(--cat-bleu-clair);
font-size: 18px;
font-weight: 700;
}
.catalogue-breadcrumb__sep {
width: 8px;
height: 8px;
border-top: 2px solid var(--cat-blanc);
border-right: 2px solid var(--cat-blanc);
transform: rotate(45deg);
opacity: 0.9;
}
/* Bandeau du catalogue (markup bandeau-secondaire) : contenu aligné sur la
colonne produits (1188 centrée) et ancré en bas — maquette Figma 8-34 :
fil d'ariane à 80px du bas, gap 25 avec le bloc titre, overlay 0.6. */
.bandeau-secondaire--catalogue {
display: flex;
align-items: flex-end;
}
.bandeau-secondaire--catalogue::after {
opacity: 0.6;
}
.bandeau-secondaire--catalogue .container {
height: auto !important;
max-width: 1188px;
width: 100%;
margin: 0 auto 80px;
padding: 0;
}
.bandeau-secondaire--catalogue .row {
height: auto !important;
margin: 0;
}
.bandeau-secondaire--catalogue [class*="col-"] {
padding: 0 !important;
margin: 0 !important;
}
.bandeau-secondaire--catalogue .content .pb-4 {
padding-bottom: 25px !important;
}
.bandeau-secondaire--catalogue .content h2 {
margin: 0;
font: normal normal 500 25px/1.25 "Plus Jakarta Sans", sans-serif;
letter-spacing: 5px;
text-transform: uppercase;
color: var(--cat-blanc);
}
.bandeau-secondaire--catalogue .content h1 {
margin: 0;
}
.bandeau-secondaire--catalogue .fil-dariane span {
font-size: 18px;
margin-right: 0;
}
/* Chevron « > » : positionné en absolu sur le bord droit du lien, il était collé
à l'élément suivant et espacé du précédent (asymétrique). On le remet dans le
flux, centré, avec une marge identique de chaque côté. Sélecteur renforcé
(section + 2 classes) pour battre la règle du bloc bandeau-secondaire. */
section.bandeau-secondaire.bandeau-secondaire--catalogue .fil-dariane a {
padding-right: 0;
}
section.bandeau-secondaire.bandeau-secondaire--catalogue .fil-dariane a::after {
position: static;
display: inline-block;
transform: none;
margin: 0 12px;
vertical-align: middle;
background-position: center;
}
/* Mobile : le header du thème (absolu, ~80px) recouvrait le surtitre (h2). Le
bandeau avait une hauteur fixe (350px) et son contenu, ancré en bas avec un
titre à 60px, remontait sous le header. On réserve la hauteur du header en
haut, on laisse le bandeau grandir si le contenu est long (min-height au lieu
d'une hauteur fixe) et on réduit les titres pour un rendu mobile lisible. */
@media (max-width: 990px) {
section.bandeau-secondaire.bandeau-secondaire--catalogue {
height: auto;
min-height: 350px;
padding-top: 100px;
}
.bandeau-secondaire--catalogue .content h1 {
font: normal normal 800 clamp(32px, 9vw, 44px)/1.1 "Plus Jakarta Sans", sans-serif;
}
.bandeau-secondaire--catalogue .content h2 {
font-size: 16px;
letter-spacing: 3px;
}
}
/* --------------------------------------------------------------------------
2. Corps : description + sidebar + colonne principale
-------------------------------------------------------------------------- */
.catalogue {
color: var(--cat-noir);
background: var(--cat-blanc);
padding-bottom: 120px;
}
.catalogue-body {
/* Maquette 1920 : produits 1188 centrés, filtres épinglés au bord gauche. */
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1188px) minmax(0, 1fr);
align-items: start;
}
/* Description : bloc pleine largeur entre le hero et la grille,
centré par rapport à l'écran (40 sous le hero, 106 au-dessus de la ligne de tri) */
.catalogue-desc {
max-width: 1188px;
margin-inline: auto;
padding: 40px var(--cat-pad) 106px;
text-align: center;
font-size: 18px;
font-weight: 700;
line-height: 26px;
color: var(--cat-bleu);
}
.catalogue-desc p {
margin: 0 0 26px;
}
.catalogue-desc p:last-child {
margin-bottom: 0;
}
.catalogue-desc strong,
.catalogue-desc b {
font-weight: 700;
}
/* --------------------------------------------------------------------------
3. Barre latérale de filtres
-------------------------------------------------------------------------- */
.catalogue-filters {
grid-column: 1;
grid-row: 1;
width: 254px;
margin-left: 50px;
/* « Affiner la sélection » à 50px sous le haut de la grille :
tri (40) + marge sous le tri (43) + 50. */
margin-top: 133px;
}
.catalogue-filters__title {
margin: 0 0 30px;
font-size: 18px;
font-weight: 700;
line-height: 26px;
color: var(--cat-noir);
}
.catalogue-filter {
border-top: 1px solid var(--cat-gris-moyen);
}
.catalogue-filter:first-of-type {
border-top: 0;
}
.catalogue-filter__header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 20px 0;
background: none;
border: 0;
cursor: pointer;
text-align: left;
}
.catalogue-filter:first-of-type .catalogue-filter__header {
padding-top: 0;
}
.catalogue-filter__label {
font-size: 16px;
font-weight: 500;
line-height: 26px;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--cat-noir);
}
/* Icône +/- dessinée en CSS */
.catalogue-filter__icon {
position: relative;
flex-shrink: 0;
width: 20px;
height: 20px;
}
.catalogue-filter__icon::before,
.catalogue-filter__icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: var(--cat-noir);
transition: transform 0.25s ease, opacity 0.25s ease;
}
.catalogue-filter__icon::before {
width: 14px;
height: 2px;
transform: translate(-50%, -50%);
}
.catalogue-filter__icon::after {
width: 2px;
height: 14px;
transform: translate(-50%, -50%);
}
.catalogue-filter.is-open .catalogue-filter__icon::after {
transform: translate(-50%, -50%) scaleY(0);
opacity: 0;
}
.catalogue-filter__panel {
display: none;
padding: 0 0 16px;
}
.catalogue-filter.is-open .catalogue-filter__panel {
display: block;
}
.catalogue-filter__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.catalogue-filter__list label {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
font-weight: 500;
color: var(--cat-noir);
cursor: pointer;
}
.catalogue-filter__list input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--cat-bleu);
cursor: pointer;
}
.catalogue-filter__empty {
margin: 0;
font-size: 14px;
color: var(--cat-gris-moyen);
}
/* Filtre prix : double curseur (maquette 24-1409).
16px de curseurs + 6px d'écart + 26px de libellés. */
.catalogue-filter__range {
position: relative;
height: 48px;
margin-top: 4px;
}
/* Piste : trait noir fin, pleine largeur */
.catalogue-filter__range-track {
position: absolute;
top: 7px;
left: 0;
right: 0;
height: 2px;
background: var(--cat-noir);
}
/* Les deux se superposent au-dessus de la piste ;
seules les poignées restent cliquables (pointer-events). */
.catalogue-filter__range-input {
-webkit-appearance: none;
appearance: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 16px;
margin: 0;
padding: 0;
background: none;
pointer-events: none;
z-index: 3;
}
.catalogue-filter__range-input:focus {
outline: none;
}
.catalogue-filter__range-input::-webkit-slider-runnable-track {
height: 16px;
background: none;
}
.catalogue-filter__range-input::-moz-range-track {
height: 16px;
background: none;
}
.catalogue-filter__range-input::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
border: 0;
border-radius: 50%;
background: var(--cat-bleu);
cursor: pointer;
pointer-events: auto;
}
.catalogue-filter__range-input::-moz-range-thumb {
width: 16px;
height: 16px;
border: 0;
border-radius: 50%;
background: var(--cat-bleu);
cursor: pointer;
pointer-events: auto;
}
.catalogue-filter__range-input:focus-visible::-webkit-slider-thumb {
box-shadow: 0 0 0 3px rgba(0, 98, 216, 0.3);
}
.catalogue-filter__range-input:focus-visible::-moz-range-thumb {
box-shadow: 0 0 0 3px rgba(0, 98, 216, 0.3);
}
/* Valeurs affichées sous chaque poignée */
.catalogue-filter__range-value {
position: absolute;
top: 22px;
transform: translateX(-50%);
font-size: 16px;
line-height: 26px;
color: var(--cat-bleu-fonce);
white-space: nowrap;
}
/* --------------------------------------------------------------------------
4. Colonne principale : tri + grille
-------------------------------------------------------------------------- */
.catalogue-main {
grid-column: 2;
grid-row: 1;
min-width: 0;
transition: opacity 0.2s ease;
}
/* Filtrage AJAX en cours : la grille est estompée le temps du fetch */
.catalogue-main.is-loading {
opacity: 0.4;
pointer-events: none;
}
.catalogue-toolbar {
display: flex;
justify-content: flex-end;
align-items: center;
margin-bottom: 43px;
}
.catalogue-toolbar__sort {
display: flex;
align-items: flex-start;
gap: 15px;
}
.catalogue-toolbar__label {
font-size: 16px;
line-height: 26px;
color: var(--cat-noir);
white-space: nowrap;
}
.catalogue-toolbar .woocommerce-ordering {
margin: 0;
}
.catalogue-toolbar .woocommerce-ordering select,
.catalogue-toolbar select.orderby {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 40px;
width: 216px;
padding: 0 40px 0 16px;
border: 1px solid var(--cat-gris-moyen);
border-radius: 8px;
background-color: var(--cat-blanc);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23272727' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
font-family: var(--cat-font);
font-size: 15px;
font-weight: 500;
color: var(--cat-noir);
cursor: pointer;
}
/* Grille de produits (surcharge des styles WooCommerce par défaut) */
.catalogue ul.products {
list-style: none;
margin: 0 !important;
padding: 0 !important;
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 24px;
row-gap: 106px;
}
.catalogue ul.products::before,
.catalogue ul.products::after {
content: none !important;
}
.catalogue ul.products li.product {
width: auto !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
clear: none !important;
}
/* Carte produit */
.product-card {
position: relative; /* ancre le ::after « stretched link » du titre */
display: flex;
flex-direction: column;
gap: 25px;
height: 100%;
text-decoration: none;
color: inherit;
}
/* Le titre porte le vrai lien de la carte ; son ::after couvre toute la carte
pour la rendre entièrement cliquable, sans imbriquer d'ancre (balisage
valide même quand le prix invité est lui-même un lien). */
.product-card__link {
color: inherit;
text-decoration: none;
}
.product-card__link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
/* Les liens réels de la carte (lien de connexion du prix masqué) restent
cliquables au-dessus de la surface étirée du titre. */
.product-card__price a {
position: relative;
z-index: 2;
}
.product-card__media {
position: relative;
width: 100%;
height: 276px;
background: var(--cat-blanc);
border-radius: 30px;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.09);
overflow: hidden;
}
/* !important : le thème/WooCommerce imposent sinon height:auto et
l'image déborde du cadre 276px (bouteilles coupées). */
.product-card__media img,
ul.products li.product .product-card__media a img,
ul.products li.product .product-card__media img {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
object-fit: contain;
padding: 4px;
margin: 0;
transition: transform 0.4s ease;
}
.product-card:hover .product-card__media img {
transform: scale(1.04);
}
.product-card__body {
display: flex;
flex-direction: column;
gap: 30px;
flex: 1;
}
.product-card__info {
display: flex;
flex-direction: column;
gap: 17px;
}
.product-card__heading {
display: flex;
flex-direction: column;
}
.product-card__title,
.catalogue ul.products li.product .product-card__title {
margin: 0;
padding: 0;
font-size: 18px;
font-weight: 700;
line-height: 26px;
color: var(--cat-noir);
}
.product-card__ref {
font-size: 16px;
font-weight: 400;
line-height: 26px;
color: var(--cat-bleu);
}
.product-card__price {
font-size: 22px;
font-weight: 800;
line-height: 26px;
color: var(--cat-bleu);
}
.product-card__price del {
color: var(--cat-gris-moyen);
font-weight: 500;
margin-right: 8px;
}
.product-card__price ins {
text-decoration: none;
}
.product-card__btn {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: flex-start;
margin-top: auto;
padding: 10px 25px;
border-radius: 100px;
background: var(--cat-bleu-clair);
color: var(--cat-bleu-fonce);
font-size: 16px;
font-weight: 700;
line-height: 26px;
transition: 0.3s;
}
.product-card:hover .product-card__btn {
background: var(--cat-bleu);
color: var(--cat-blanc);
}
/* Pagination */
.catalogue-pagination {
margin-top: 60px;
}
.catalogue-pagination .woocommerce-pagination ul {
display: flex;
justify-content: center;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
border: 0;
}
.catalogue-pagination .woocommerce-pagination ul li {
margin: 0;
border: 0;
}
.catalogue-pagination .woocommerce-pagination a,
.catalogue-pagination .woocommerce-pagination span {
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 8px;
border-radius: 8px;
background: var(--cat-gris-clair);
color: var(--cat-noir);
font-weight: 500;
text-decoration: none;
}
.catalogue-pagination .woocommerce-pagination span.current {
background: var(--cat-bleu);
color: var(--cat-blanc);
}
.catalogue-empty {
font-size: 18px;
color: var(--cat-noir);
padding: 20px 0;
}
/* --------------------------------------------------------------------------
5. Responsive
-------------------------------------------------------------------------- */
/* Sous ~1820px, une grille 1188 centrée ne laisse plus la place aux filtres
épinglés à gauche : la colonne produits suit alors la barre latérale. */
@media (max-width: 1819px) {
.catalogue-body {
grid-template-columns: 366px minmax(0, 1fr);
padding-right: 50px;
}
.bandeau-secondaire--catalogue .container {
max-width: none;
margin-inline: 366px 50px;
width: auto;
}
}
@media (max-width: 1400px) {
.catalogue ul.products {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 1024px) {
:root {
--cat-col-gap: 40px;
--cat-aside: 220px;
}
.catalogue ul.products {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 900px) {
/* La sidebar passe au-dessus de la grille, sur toute la largeur */
.catalogue-hero__inner {
padding-left: var(--cat-pad);
}
.catalogue-hero__title {
font-size: clamp(30px, 7vw, 44px);
}
.catalogue-hero__surtitre {
font-size: 18px;
letter-spacing: 3px;
}
.catalogue-body {
grid-template-columns: 1fr;
padding-inline: var(--cat-pad);
}
.bandeau-secondaire--catalogue .container {
margin-inline: var(--cat-pad);
}
.catalogue-desc {
padding-top: 40px;
padding-bottom: 40px;
}
.catalogue-filters {
grid-column: 1;
grid-row: 1;
width: auto;
margin: 0 0 30px;
border: 1px solid var(--cat-gris-moyen);
border-radius: 16px;
padding: 20px;
}
.catalogue-main {
grid-column: 1;
grid-row: 2;
}
}
@media (max-width: 560px) {
.catalogue-hero {
min-height: 340px;
}
.catalogue-hero__inner {
padding-bottom: 40px;
}
.catalogue ul.products {
grid-template-columns: 1fr;
row-gap: 40px;
}
.catalogue-toolbar {
justify-content: flex-start;
}
.catalogue-toolbar__sort {
width: 100%;
}
.catalogue-toolbar .woocommerce-ordering,
.catalogue-toolbar select.orderby {
flex: 1;
width: 100%;
}
}
/* ==========================================================================
Fiche produit (single)
========================================================================== */
.single-produit {
color: var(--cat-noir);
background: var(--cat-blanc);
/* Le header du thème est en position absolue : fil d'ariane à y=213
comme la maquette 24-1411. */
padding-top: 213px;
}
.single-produit__wrap {
max-width: 1188px;
margin: 0 auto;
padding-inline: 0;
}
/* Fil d'ariane de la fiche produit (fond clair) */
.single-produit__breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 0;
}
.single-produit__breadcrumb a {
font-size: 16px;
font-weight: 400;
line-height: 26px;
color: var(--cat-bleu-fonce);
text-decoration: none;
}
.single-produit__breadcrumb a:hover {
text-decoration: underline;
}
.single-produit__breadcrumb-current {
font-size: 18px;
font-weight: 700;
line-height: 26px;
color: var(--cat-bleu-clair);
}
.single-produit__breadcrumb-sep {
width: 6px;
height: 6px;
border-top: 2px solid var(--cat-bleu-fonce);
border-right: 2px solid var(--cat-bleu-fonce);
transform: rotate(45deg);
opacity: 0.55;
}
/* Fil d'ariane (variante fond clair) */
.catalogue-breadcrumb--dark {
padding-top: 40px;
}
.catalogue-breadcrumb--dark a {
color: var(--cat-noir);
}
.catalogue-breadcrumb--dark a:hover {
color: var(--cat-bleu);
}
.catalogue-breadcrumb--dark .catalogue-breadcrumb__sep {
border-color: var(--cat-noir);
opacity: 0.5;
}
.catalogue-breadcrumb--dark .catalogue-breadcrumb__current {
color: var(--cat-bleu);
}
/* --- Haut de fiche : galerie + infos --- */
.single-produit__top {
display: grid;
grid-template-columns: 381px 1fr;
column-gap: 124px;
align-items: start;
/* 96 sous le fil d'ariane, 50 au-dessus de la section Description. */
padding: 96px 0 50px;
}
/* Galerie */
.single-produit__stage {
position: relative;
width: 100%;
/* Cadre image 381×596 de la maquette. */
height: 596px;
background: var(--cat-blanc);
border-radius: 30px;
overflow: hidden;
}
.single-produit__slide {
display: none;
height: 100%;
}
.single-produit__slide.is-active {
display: block;
}
.single-produit__img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.single-produit__nav {
display: flex;
justify-content: flex-end;
gap: 13px;
margin-top: 31px;
}
.single-produit__arrow {
width: 44px;
height: 44px;
border-radius: 50%;
border: 2px solid var(--cat-bleu-fonce);
background: var(--cat-blanc);
color: var(--cat-bleu-fonce);
font-size: 22px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: 0.25s;
}
.single-produit__arrow:hover {
background: var(--cat-bleu-fonce);
color: var(--cat-blanc);
}
/* Colonne infos */
.single-produit__details {
display: flex;
flex-direction: column;
gap: 30px;
align-items: flex-start;
}
.single-produit__head {
display: flex;
flex-direction: column;
}
.single-produit__brand {
margin: 0 0 5px;
font-size: 25px;
font-weight: 500;
line-height: normal;
letter-spacing: 5px;
text-transform: uppercase;
color: var(--cat-bleu-fonce);
}
.single-produit__title {
margin: 0 0 25px;
font-size: clamp(32px, 3.4vw, 60px);
font-weight: 800;
line-height: normal;
color: var(--cat-bleu-fonce);
}
.single-produit__ref {
margin: 0;
font-size: 16px;
line-height: 26px;
color: var(--cat-bleu);
}
.single-produit__excerpt {
font-size: 16px;
line-height: 26px;
color: var(--cat-noir);
}
.single-produit__excerpt p {
margin: 0 0 10px;
}
/* Formulaire panier */
/* Espacements maquette : description |45| quantités |20| doc |50| prix |30| bouton
(le gap 30 de .single-produit__details fournit les 30 premiers px). */
.single-produit__form {
display: flex;
flex-direction: column;
gap: 0;
align-items: flex-start;
margin: 15px 0 0;
width: 100%;
}
.single-produit__form .single-produit__download {
margin-top: 20px;
}
.single-produit__form .single-produit__price {
margin-top: 50px;
}
.single-produit__form .single-produit__addcart {
margin-top: 30px;
}
.single-produit__options {
display: flex;
align-items: center;
gap: 30px;
}
.single-produit__qty-label {
font-size: 16px;
font-weight: 500;
color: var(--cat-noir);
}
/* Sélecteur de quantité */
/* 88×50 exact : bord 2 + padding 10 + [12 | 15 | 10 | 15 | 12] */
.qty-stepper {
display: inline-flex;
align-items: center;
gap: 15px;
padding: 10px;
border: 2px solid var(--cat-gris-moyen);
background: var(--cat-blanc);
}
.qty-btn {
display: flex;
align-items: center;
justify-content: center;
width: 12px;
height: 26px;
padding: 0;
border: 0;
background: none;
font-size: 20px;
line-height: 1;
color: var(--cat-noir);
cursor: pointer;
}
.qty-input {
width: 10px;
padding: 0;
border: 0;
background: none;
text-align: center;
font-family: var(--cat-font);
font-size: 16px;
font-weight: 500;
color: var(--cat-noir);
-moz-appearance: textfield;
appearance: textfield;
}
@supports (field-sizing: content) {
.qty-input {
width: auto;
min-width: 10px;
field-sizing: content;
}
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Lien documentation */
.single-produit__download {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--cat-bleu);
font-size: 18px;
font-weight: 700;
line-height: 26px;
text-decoration: none;
}
.single-produit__download:hover {
text-decoration: underline;
}
.single-produit__download-icon {
width: 24px;
height: 24px;
flex-shrink: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230062d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Prix */
.single-produit__price {
font-size: 30px;
font-weight: 800;
line-height: 26px;
color: var(--cat-bleu);
}
.single-produit__price del {
color: var(--cat-gris-moyen);
font-weight: 500;
margin-right: 8px;
}
.single-produit__price ins {
text-decoration: none;
}
/* Bouton panier / devis */
.single-produit__addcart {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 20px 40px;
border: 0;
border-radius: 100px;
background: var(--cat-bleu);
color: var(--cat-blanc);
font-size: 18px;
font-weight: 700;
line-height: 26px;
text-decoration: none;
cursor: pointer;
transition: 0.3s;
}
.single-produit__addcart:hover {
background: var(--cat-bleu-fonce);
color: var(--cat-blanc);
}
/* --- Description + caractéristiques --- */
.single-produit__description {
max-width: 885px;
padding: 0 0 60px;
}
.single-produit__desc-title {
margin: 0 0 20px;
font-size: clamp(28px, 3vw, 40px);
font-weight: 800;
line-height: normal;
color: var(--cat-noir);
}
.single-produit__desc-text {
font-size: 16px;
line-height: 26px;
color: var(--cat-noir);
}
.single-produit__desc-text p {
margin: 0 0 12px;
}
.single-produit__specs {
margin-top: 40px;
}
.single-produit__specs-title {
margin: 0 0 25px;
font-size: 24px;
font-weight: 800;
line-height: normal;
color: var(--cat-noir);
}
.single-produit__specs-list {
margin: 0;
font-size: 16px;
line-height: 26px;
color: var(--cat-noir);
}
.single-produit__specs-list ul {
margin: 0;
padding: 0;
list-style: none;
}
.single-produit__specs-list li {
margin: 0 0 4px;
}
.single-produit__specs-list p {
margin: 0 0 12px;
}
.single-produit__specs-list strong {
font-weight: 700;
}
/* --- Produits complémentaires --- */
.single-produit__related {
/* 1660px de fond gris + une gouttière permanente de chaque côté :
le conteneur arrondi ne touche jamais les bords de l'écran. */
max-width: calc(1660px + 2 * var(--cat-pad));
margin: 0 auto 125px;
padding-inline: var(--cat-pad);
}
.single-produit__related-inner {
background: var(--cat-gris-clair);
border-radius: 30px;
/* Padding latéral fluide (100px sur la maquette 1920) : la grille de
produits ne colle jamais aux bords arrondis du fond gris. */
padding: 80px clamp(24px, 3.5vw, 100px);
}
.single-produit__related-title {
margin: 0 0 50px;
text-align: center;
font-size: clamp(28px, 3vw, 40px);
font-weight: 800;
line-height: normal;
color: var(--cat-noir);
}
.single-produit .single-produit__related ul.products {
list-style: none;
max-width: 1188px;
margin: 0 auto;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px 24px;
}
.single-produit__related .products::before,
.single-produit__related .products::after {
content: none !important;
}
.single-produit__related .products li.product {
width: auto !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
}
/* Les cartes du bloc « complémentaires » sont sur fond gris : fond blanc sur l'image déjà géré par .product-card__media */
/* --------------------------------------------------------------------------
Responsive fiche produit
Les surcharges de grille des produits liés reprennent le sélecteur complet
« .single-produit .single-produit__related ul.products » : la règle de base
a une forte spécificité, il faut l'égaler pour que les media-queries gagnent.
-------------------------------------------------------------------------- */
/* Conteneurs : padding latéral dès que la grille pleine largeur ne tient plus */
@media (max-width: 1240px) {
.single-produit__wrap {
padding-inline: var(--cat-pad);
}
}
/* Laptop : gouttière resserrée + 3 produits complémentaires */
@media (max-width: 1200px) {
.single-produit__top {
column-gap: 60px;
}
.single-produit .single-produit__related ul.products {
grid-template-columns: repeat(3, 1fr);
}
}
/* Tablette paysage : colonne image plus étroite, image réduite */
@media (max-width: 1024px) {
.single-produit {
padding-top: 150px;
}
.single-produit__top {
grid-template-columns: 300px 1fr;
column-gap: 50px;
padding-top: 60px;
}
.single-produit__stage {
height: 460px;
}
.single-produit__title {
font-size: clamp(30px, 4.5vw, 48px);
}
.single-produit .single-produit__related ul.products {
grid-template-columns: repeat(2, 1fr);
}
}
/* Format mobile (tablette portrait incluse) : une seule colonne, image nettement
réduite et centrée, produits complémentaires en carrousel Owl (init JS). */
@media (max-width: 900px) {
.single-produit {
padding-top: 120px;
}
.single-produit__top {
grid-template-columns: 1fr;
row-gap: 35px;
padding: 40px 0;
}
/* Galerie centrée et image réduite */
.single-produit__gallery {
display: flex;
flex-direction: column;
align-items: center;
}
.single-produit__stage {
width: 100%;
max-width: 340px;
height: auto;
aspect-ratio: 381 / 500;
}
.single-produit__nav {
width: 100%;
max-width: 340px;
margin-top: 20px;
}
.single-produit__details {
gap: 25px;
}
.single-produit__title {
margin-bottom: 15px;
font-size: clamp(28px, 6vw, 40px);
}
.single-produit__description {
padding-bottom: 40px;
}
/* Produits complémentaires : le conteneur passe en flux « block » pour
laisser Owl gérer la mise en page. Sans JS (fallback), une colonne. */
.single-produit__related-inner {
padding: 50px 0;
}
.single-produit__related-title {
margin-bottom: 30px;
}
.single-produit .single-produit__related ul.products {
display: block;
grid-template-columns: none;
}
.single-produit .single-produit__related ul.products:not(.owl-loaded) > li.product + li.product {
margin-top: 30px !important;
}
}
/* Mobile */
@media (max-width: 600px) {
.single-produit__wrap,
.single-produit__related {
padding-inline: 20px;
}
.single-produit__stage {
max-width: 280px;
aspect-ratio: 381 / 460;
}
.single-produit__nav {
max-width: 280px;
}
.single-produit__brand {
font-size: 20px;
letter-spacing: 3px;
}
.single-produit__title {
font-size: clamp(26px, 8vw, 34px);
}
.single-produit__options {
flex-wrap: wrap;
gap: 12px 20px;
}
.single-produit__addcart {
width: 100%;
}
.single-produit__price {
font-size: 26px;
}
.single-produit__desc-title {
font-size: clamp(24px, 7vw, 32px);
}
}
/* --------------------------------------------------------------------------
Carrousel « Produits complémentaires » (Owl) — format mobile uniquement
Owl n'est initialisé qu'en dessous de 900px (voir catalogue.js) ; au-dessus
le bloc reste une grille CSS classique.
-------------------------------------------------------------------------- */
.single-produit__related .owl-carousel {
width: 100%;
}
/* Marge verticale interne pour ne pas rogner l'ombre des cartes (stage clippé) */
.single-produit__related .owl-carousel .owl-item {
padding: 15px 0;
}
.single-produit__related .owl-carousel li.product {
height: 100%;
}
/* Flèches de navigation (mêmes ronds que la galerie produit) */
.single-produit__related .owl-nav {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 25px;
}
.single-produit__related .owl-nav button.owl-prev,
.single-produit__related .owl-nav button.owl-next {
width: 44px;
height: 44px;
border-radius: 50%;
border: 2px solid var(--cat-bleu-fonce);
background: var(--cat-blanc);
color: var(--cat-bleu-fonce);
font-size: 22px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
transition: 0.25s;
}
.single-produit__related .owl-nav button.owl-prev:hover,
.single-produit__related .owl-nav button.owl-next:hover {
background: var(--cat-bleu-fonce);
color: var(--cat-blanc);
}
.single-produit__related .owl-nav button.owl-prev.disabled,
.single-produit__related .owl-nav button.owl-next.disabled {
opacity: 0.35;
cursor: default;
}
/* Points de pagination */
.single-produit__related .owl-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 18px;
}
.single-produit__related .owl-dots button.owl-dot span {
display: block;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--cat-gris-moyen);
transition: 0.25s;
}
.single-produit__related .owl-dots button.owl-dot.active span {
width: 24px;
border-radius: 5px;
background: var(--cat-bleu);
}
/* ==========================================================================
Règles B2B selon le rôle (module dgs-commerce)
========================================================================== */
/* « Facturé par Air Liquide » — carte d'archive */
.product-card__facture {
font-size: 16px;
font-weight: 700;
line-height: 26px;
color: var(--cat-bleu);
}
/* « Facturé par Air Liquide » — fiche produit (à la place du prix) */
.single-produit__facture {
font-size: 22px;
font-weight: 800;
line-height: 26px;
color: var(--cat-bleu);
}
/* Note sous le CTA (ex. hors zone de livraison) */
.single-produit__note {
margin: 0;
font-size: 14px;
line-height: 20px;
color: var(--cat-gris-moyen);
max-width: 420px;
}
/* ==========================================================================
Boutique DGS — connexion, panier, drawer, checkout (maquettes Figma)
========================================================================== */
.dgs-login *, .dgs-cart *, .dgs-checkout *, .dgs-thankyou *, .dgs-drawer *, .dgs-popup * {
font-family: var(--cat-font);
box-sizing: border-box;
}
/* --------------------------------------------------------------------------
Connexion / Inscription
-------------------------------------------------------------------------- */
.dgs-login {
position: relative;
min-height: 100vh;
/* Carte ancrée vers le bas : 150px au-dessus du footer (maquette py-150 +
justify-end). Le padding-top garde la carte sous le header sur petits écrans. */
padding: 190px 20px 150px;
background-size: cover;
background-position: center top;
display: flex;
align-items: flex-end;
justify-content: center;
}
.dgs-login::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.4);
}
.dgs-login__card {
position: relative;
z-index: 1;
width: 100%;
max-width: 784px;
background: rgba(255, 255, 255, 0.85);
border-radius: 15px;
padding: clamp(40px, 7vw, 100px);
display: flex;
flex-direction: column;
gap: 50px;
}
.dgs-login__tabs {
display: flex;
gap: 20px;
justify-content: center;
}
.dgs-login__tab {
background: none;
border: 0;
padding: 0;
font-family: "DM Sans", var(--cat-font);
font-size: 20px;
font-weight: 700;
line-height: 26px;
color: var(--cat-noir);
text-decoration: underline;
opacity: 0.35;
cursor: pointer;
}
.dgs-login__tab.is-active {
opacity: 1;
}
.dgs-login__form {
display: none;
flex-direction: column;
gap: 50px;
width: 100%;
}
.dgs-login__form.is-active {
display: flex;
}
.dgs-login__fields {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
}
.dgs-field {
display: flex;
flex-direction: column;
gap: 5px;
width: 100%;
}
.dgs-field__label {
font-size: 16px;
font-weight: 700;
color: var(--cat-noir);
}
.dgs-field__input {
width: 100%;
height: 60px;
padding: 13px 30px;
background: var(--cat-gris-clair);
border: 0;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
color: var(--cat-noir);
}
.dgs-field__input:focus {
outline: 2px solid var(--cat-bleu);
}
.dgs-field__hint {
margin: 0;
font-size: 14px;
line-height: 26px;
color: var(--cat-bleu);
}
.dgs-field__date {
display: flex;
gap: 10px;
}
.dgs-field__input--dd, .dgs-field__input--mm {
width: 90px;
}
.dgs-field__input--yyyy {
width: 130px;
}
.dgs-login__lost {
margin: 0;
text-align: center;
}
.dgs-login__lost a {
font-size: 16px;
font-weight: 500;
color: var(--cat-noir);
text-decoration: none;
}
.dgs-login__submit {
width: 100%;
padding: 10px 25px;
border: 0;
border-radius: 100px;
background: var(--cat-bleu-clair);
color: var(--cat-bleu-fonce);
font-size: 16px;
font-weight: 700;
line-height: 26px;
cursor: pointer;
transition: 0.3s;
}
.dgs-login__submit:hover {
background: var(--cat-bleu);
color: var(--cat-blanc);
}
.dgs-login .woocommerce-notices-wrapper .woocommerce-error,
.dgs-login .woocommerce-notices-wrapper .woocommerce-message {
margin: 0;
}
/* ==========================================================================
Message de succès WooCommerce — style « verre bleu » moderne (glassmorphism)
au lieu du vert par défaut. Ex. « … a été ajouté à votre panier ».
========================================================================== */
.woocommerce-message {
position: relative;
display: flex;
align-items: center;
gap: 14px;
margin: 0 0 24px;
padding: 16px 22px;
border: 1px solid rgba(0, 98, 216, 0.22) !important;
border-left: 4px solid #0062d8 !important;
border-top-color: rgba(0, 98, 216, 0.22) !important;
border-radius: 16px;
background: linear-gradient(135deg, rgba(97, 219, 255, 0.22), rgba(0, 98, 216, 0.10)) !important;
-webkit-backdrop-filter: blur(16px) saturate(160%);
backdrop-filter: blur(16px) saturate(160%);
box-shadow: 0 12px 34px rgba(0, 53, 109, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.55);
color: #00356d !important;
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
list-style: none;
}
/* Pastille « check » bleue (remplace l'icône verte WooCommerce). */
.woocommerce-message::before {
content: "✓";
flex: none;
order: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
margin: 0;
padding: 0;
position: static;
top: auto;
left: auto;
border-radius: 50%;
background: #0062d8;
color: #fff !important;
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 14px;
font-weight: 800;
line-height: 1;
}
/* Bouton « Voir le panier » : pilule bleu clair, alignée à droite. */
.woocommerce-message .button,
.woocommerce-message a.wc-forward {
order: 3;
margin: 0 0 0 auto;
padding: 9px 20px;
border: 0;
border-radius: 100px;
background: #61dbff;
color: #00356d;
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 14px;
font-weight: 700;
text-decoration: none;
box-shadow: none;
transition: 0.25s;
}
.woocommerce-message .button:hover,
.woocommerce-message a.wc-forward:hover {
background: #0062d8;
color: #fff;
}
/* --------------------------------------------------------------------------
Panier « Vos articles » — pixel-fidèle à la maquette 56-3535
(grille 1188px : image à 101, infos à 303, prix à ~707, total à ~987)
-------------------------------------------------------------------------- */
.dgs-cart {
max-width: calc(1188px + 2 * var(--cat-pad));
margin: 0 auto;
padding: 300px var(--cat-pad) 102px;
color: var(--cat-noir);
}
.dgs-cart__title {
margin: 0 0 18px;
text-align: center;
font-size: clamp(36px, 4vw, 60px);
font-weight: 800;
color: var(--cat-noir);
}
.dgs-cart__continue {
text-align: center;
margin: 0 0 106px;
}
.dgs-cart__continue a {
color: var(--cat-bleu);
font-size: 16px;
font-weight: 700;
line-height: 26px;
text-decoration: underline;
}
.dgs-cart__table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.dgs-cart__table thead th {
text-align: left;
font-size: 18px;
font-weight: 700;
line-height: 23px;
color: var(--cat-noir);
padding: 0 0 41px;
}
.dgs-cart__table .dgs-cart__th-produit {
padding-left: 303px; /* la largeur des colonnes vient du */
}
.dgs-cart__table .dgs-cart__th-prix,
.dgs-cart__prix {
width: 274.5px;
}
.dgs-cart__table .dgs-cart__th-total,
.dgs-cart__total {
width: 200px;
}
.dgs-cart__row {
background: linear-gradient(var(--cat-gris-moyen), var(--cat-gris-moyen)) no-repeat 101px bottom;
background-size: 987px 1px;
}
.dgs-cart__row td {
padding: 0 0 50px;
vertical-align: top;
}
.dgs-cart__row + .dgs-cart__row td {
padding-top: 36px;
}
.dgs-cart__media {
padding-left: 101px !important;
}
.dgs-cart__media img {
display: block;
width: 177px;
height: 160px;
object-fit: contain;
border-radius: 5px;
background: var(--cat-blanc);
}
.dgs-cart__infos {
padding-left: 0 !important;
padding-top: 19px !important;
}
.dgs-cart__name {
margin: 0;
font-size: 18px;
font-weight: 700;
line-height: 26px;
}
.dgs-cart__name a {
color: var(--cat-noir);
text-decoration: none;
}
.dgs-cart__size,
.dgs-cart__infos .variation {
margin: 0;
font-size: 16px;
font-weight: 400;
line-height: 26px;
color: var(--cat-noir);
}
.dgs-cart__ref {
margin: 3px 0 0;
font-size: 16px;
font-weight: 400;
line-height: 26px;
color: var(--cat-noir);
}
.dgs-cart__remove {
display: inline-block;
margin-top: 15px;
color: #ff0004;
font-size: 16px;
font-weight: 500;
line-height: 26px;
text-decoration: underline;
}
.dgs-cart__prix, .dgs-cart__total {
padding-top: 19px !important;
font-size: 18px;
font-weight: 700;
line-height: 26px;
color: var(--cat-noir);
}
/* Consigne : alignée sur le bord gauche des visuels (101px) */
.dgs-consigne {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0;
margin: 39px 0 0 101px;
padding: 0;
border: 0;
}
.dgs-consigne__label {
width: 223px;
font-size: 16px;
font-weight: 700;
line-height: 26px;
margin-right: 31px;
}
.dgs-consigne__choice {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
line-height: 26px;
cursor: pointer;
}
.dgs-consigne__choice + .dgs-consigne__choice {
margin-left: 24px;
width: 56px;
}
.dgs-consigne__choice:first-of-type {
width: 51px;
}
.dgs-consigne__choice input {
width: 16px;
height: 16px;
accent-color: var(--cat-noir);
}
.dgs-consigne__siou {
width: 131px;
margin-left: 44px;
margin-right: 31px;
font-size: 16px;
line-height: 26px;
color: var(--cat-noir);
}
.dgs-consigne__stepper {
width: 88px;
height: 50px;
justify-content: center;
padding: 9px 12px;
gap: 15px;
border: 2px solid var(--cat-gris-moyen);
}
/* Sous-total + validation : alignés à droite */
.dgs-cart__foot {
display: flex;
align-items: flex-start;
justify-content: flex-end;
gap: 40px;
margin-top: 71px;
}
.dgs-cart__subtotal {
text-align: right;
}
.dgs-cart__subtotal-line {
margin: 0;
font-size: 24px;
font-weight: 700;
line-height: 26px;
color: var(--cat-noir);
}
.dgs-cart__note {
margin: 8px 0 0;
font-size: 16px;
font-weight: 400;
line-height: 26px;
color: var(--cat-bleu);
}
.dgs-cart__validate {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 25px;
border-radius: 100px;
background: var(--cat-bleu-clair);
color: var(--cat-bleu-fonce);
font-size: 20px;
font-weight: 700;
line-height: 26px;
text-decoration: none;
white-space: nowrap;
transition: 0.3s;
}
.dgs-cart__validate:hover {
background: var(--cat-bleu);
color: var(--cat-blanc);
}
.dgs-cart--empty {
text-align: center;
}
.dgs-cart__empty-msg {
margin: 30px 0;
font-size: 18px;
}
/* --------------------------------------------------------------------------
Popup « Produits complémentaires » — pixel-fidèle à la maquette 82-4806
(boîte 1188px radius 30, cartes horizontales 480×174, image 177×174 r15)
-------------------------------------------------------------------------- */
.dgs-popup {
position: fixed;
inset: 0;
z-index: 10000;
display: none;
}
.dgs-popup.is-open {
display: block;
}
.dgs-popup__overlay {
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.7);
}
.dgs-popup__box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(1188px, calc(100vw - 40px));
max-height: 88vh;
overflow-y: auto;
background: var(--cat-gris-clair);
border-radius: 30px;
padding: 80px clamp(24px, 8vw, 103px);
}
.dgs-popup__close {
position: absolute;
top: 58px;
right: 58px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 2px solid var(--cat-bleu-fonce);
border-radius: 50%;
background: none;
color: var(--cat-bleu-fonce);
cursor: pointer;
transition: 0.3s;
}
.dgs-popup__close:hover {
background: var(--cat-bleu-fonce);
color: var(--cat-blanc);
}
.dgs-popup__title {
margin: 0 0 40px;
text-align: center;
font-size: clamp(28px, 3vw, 40px);
font-weight: 800;
color: var(--cat-noir);
}
.dgs-popup__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px 23px;
}
.dgs-popup__item {
display: flex;
gap: 24px;
align-items: flex-start;
}
.dgs-popup__thumb img {
display: block;
width: 177px;
height: 174px;
object-fit: contain;
background: var(--cat-blanc);
border-radius: 15px;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.09);
}
.dgs-popup__infos {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.dgs-popup__name {
margin: 0;
font-size: 18px;
font-weight: 700;
line-height: 26px;
color: var(--cat-noir);
}
.dgs-popup__ref {
margin: 0;
font-size: 16px;
font-weight: 400;
line-height: 26px;
color: var(--cat-bleu);
}
.dgs-popup__price {
margin: 17px 0 0;
font-size: 22px;
font-weight: 800;
line-height: 26px;
color: var(--cat-bleu);
}
.dgs-popup__more {
display: inline-block;
margin-top: 30px;
padding: 10px 25px;
border-radius: 100px;
background: var(--cat-bleu-clair);
color: var(--cat-bleu-fonce);
font-size: 16px;
font-weight: 700;
line-height: 26px;
text-decoration: none;
transition: 0.3s;
}
.dgs-popup__more:hover {
background: var(--cat-bleu);
color: var(--cat-blanc);
}
@media (max-width: 1024px) {
.dgs-popup__grid {
grid-template-columns: 1fr;
}
.dgs-popup__close {
top: 20px;
right: 20px;
}
.dgs-popup__box {
padding-top: 60px;
}
}
@media (max-width: 560px) {
.dgs-popup__item {
flex-direction: column;
}
}
/* --------------------------------------------------------------------------
Modale « Achats fréquents » (upsell affiché à l'ajout au panier)
Maquette Figma « Related Products Container » (node 82:6248).
-------------------------------------------------------------------------- */
.dgs-freq {
position: fixed;
inset: 0;
z-index: 10001;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.dgs-freq.is-open {
opacity: 1;
visibility: visible;
}
.dgs-freq__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
}
.dgs-freq__box {
position: relative;
width: min(1188px, 100%);
max-height: calc(100vh - 40px);
overflow-y: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 50px;
padding: 80px clamp(24px, 8vw, 100px);
background: var(--cat-gris-clair);
border-radius: 30px;
transform: translateY(12px);
transition: transform 0.25s ease;
}
.dgs-freq.is-open .dgs-freq__box {
transform: translateY(0);
}
.dgs-freq__close {
position: absolute;
top: 58px;
right: 58px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 2px solid var(--cat-bleu-fonce);
border-radius: 50%;
background: none;
color: var(--cat-bleu-fonce);
cursor: pointer;
transition: 0.3s;
}
.dgs-freq__close:hover {
background: var(--cat-bleu-fonce);
color: var(--cat-blanc);
}
.dgs-freq__title {
margin: 0;
text-align: center;
font-size: clamp(28px, 3vw, 40px);
font-weight: 800;
line-height: 1.1;
color: var(--cat-noir);
}
.dgs-freq__body {
width: 100%;
}
.dgs-freq__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.dgs-freq__card {
display: flex;
align-items: flex-start;
gap: 24px;
}
.dgs-freq__thumb {
flex-shrink: 0;
width: 177px;
height: 174px;
background: var(--cat-blanc);
border-radius: 15px;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.09);
overflow: hidden;
}
.dgs-freq__thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
padding: 4px;
}
.dgs-freq__info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 30px;
min-width: 0;
flex: 1;
}
.dgs-freq__meta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 17px;
}
.dgs-freq__head {
display: flex;
flex-direction: column;
}
.dgs-freq__name {
margin: 0;
font-size: 18px;
font-weight: 700;
line-height: 26px;
color: var(--cat-noir);
}
.dgs-freq__ref {
margin: 0;
font-size: 16px;
font-weight: 400;
line-height: 26px;
color: var(--cat-bleu);
}
.dgs-freq__price {
margin: 0;
font-size: 22px;
font-weight: 800;
line-height: 26px;
color: var(--cat-bleu);
}
.dgs-freq__add {
align-self: flex-start;
padding: 10px 25px;
border: 0;
border-radius: 100px;
background: var(--cat-bleu-clair);
color: var(--cat-bleu-fonce);
font-family: var(--cat-font);
font-size: 16px;
font-weight: 700;
line-height: 26px;
cursor: pointer;
transition: 0.3s;
}
.dgs-freq__add:hover {
background: var(--cat-bleu);
color: var(--cat-blanc);
}
.dgs-freq__add.is-loading {
opacity: 0.6;
pointer-events: none;
}
.dgs-freq__add.is-added {
background: var(--cat-bleu-fonce);
color: var(--cat-blanc);
}
@media (max-width: 1024px) {
.dgs-freq__grid {
grid-template-columns: 1fr;
}
.dgs-freq__box {
gap: 32px;
padding: 60px 24px 40px;
}
.dgs-freq__close {
top: 20px;
right: 20px;
}
}
@media (max-width: 560px) {
.dgs-freq__card {
flex-direction: column;
align-items: center;
text-align: center;
}
.dgs-freq__info {
align-items: center;
}
}
/* --------------------------------------------------------------------------
Mini-panier (drawer)
-------------------------------------------------------------------------- */
.dgs-drawer {
position: fixed;
inset: 0;
z-index: 10000;
pointer-events: none;
visibility: hidden;
}
.dgs-drawer.is-open {
pointer-events: auto;
visibility: visible;
}
.dgs-drawer__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.25);
opacity: 0;
transition: opacity 0.25s;
}
.dgs-drawer.is-open .dgs-drawer__overlay {
opacity: 1;
}
/* Panneau : maquette Figma 43-1356 (Aperçu panier).
Largeur 645 sur la base 1920 (≈ un tiers de l'écran) : on garde cette
proportion sur les écrans plus étroits (34vw, plancher 430) au lieu d'une
largeur figée trop imposante sur ordinateur portable. */
.dgs-drawer__panel {
position: absolute;
top: 0;
right: 0;
width: min(100vw, clamp(430px, 34vw, 645px));
height: 100%;
background: var(--cat-gris-clair);
box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15);
transform: translateX(100%);
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
padding: 100px 41.5px;
}
.dgs-drawer.is-open .dgs-drawer__panel {
transform: translateX(0);
}
.dgs-drawer__body {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
/* En-tête : titre + croix, filet, compteur */
.dgs-drawer__summary {
display: flex;
flex-direction: column;
gap: 40px;
min-height: 0;
overflow-y: auto;
}
.dgs-drawer__header {
display: flex;
flex-direction: column;
gap: 30px;
}
.dgs-drawer__titlerow {
display: flex;
align-items: center;
justify-content: space-between;
}
.dgs-drawer__title {
margin: 0;
font-size: 18px;
font-weight: 700;
line-height: 26px;
color: var(--cat-noir);
}
.dgs-drawer__close {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.dgs-drawer__sep {
width: 100%;
height: 0;
margin: 0;
border: 0;
border-top: 1px solid var(--cat-gris-moyen);
}
.dgs-drawer__count {
margin: 0;
font-size: 16px;
font-weight: 700;
line-height: 26px;
color: var(--cat-noir);
}
/* Articles */
.dgs-drawer__items {
display: flex;
flex-direction: column;
gap: 40px;
}
.dgs-drawer__item {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
}
.dgs-drawer__item-main {
display: flex;
align-items: flex-start;
gap: 23px;
}
.dgs-drawer__thumb {
flex-shrink: 0;
width: 160px;
height: 160px;
background: var(--cat-blanc);
border-radius: 5px;
overflow: hidden;
}
.dgs-drawer__thumb img {
width: 100%;
height: 100%;
object-fit: contain;
}
.dgs-drawer__info {
display: flex;
flex-direction: column;
gap: 15px;
width: 206px;
}
.dgs-drawer__info-top {
display: flex;
flex-direction: column;
gap: 3px;
}
.dgs-drawer__nameqty {
display: flex;
flex-direction: column;
}
.dgs-drawer__name {
margin: 0;
font-size: 18px;
font-weight: 700;
line-height: 26px;
color: var(--cat-noir);
}
.dgs-drawer__ref,
.dgs-drawer__qty {
margin: 0;
font-size: 16px;
font-weight: 400;
line-height: 26px;
color: var(--cat-noir);
}
.dgs-drawer__price {
margin: 0;
font-size: 18px;
font-weight: 700;
line-height: 26px;
color: var(--cat-noir);
}
.dgs-drawer__remove {
flex-shrink: 0;
display: flex;
width: 28px;
height: 28px;
line-height: 0;
text-decoration: none;
}
.dgs-drawer__remove svg {
transition: stroke 0.2s;
}
.dgs-drawer__remove:hover svg {
stroke: var(--cat-rouge, #ff0004);
}
/* Pied : sous-total + bouton, épinglé en bas */
.dgs-drawer__footer {
display: flex;
flex-direction: column;
gap: 40px;
margin-top: auto;
padding-top: 40px;
}
.dgs-drawer__subtotal {
display: flex;
justify-content: space-between;
align-items: center;
}
.dgs-drawer__subtotal-label {
display: inline-flex;
align-items: baseline;
gap: 8px;
font-size: 18px;
font-weight: 700;
line-height: 26px;
color: var(--cat-noir);
}
.dgs-drawer__subtotal-label em {
font-style: normal;
font-size: 16px;
font-weight: 500;
}
.dgs-drawer__subtotal-amount {
font-size: 30px;
font-weight: 800;
line-height: 26px;
color: var(--cat-noir);
text-align: right;
}
.dgs-drawer__gocart {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 15px 25px;
border-radius: 100px;
background: var(--cat-bleu-clair);
color: var(--cat-bleu-fonce);
font-size: 20px;
font-weight: 700;
line-height: 26px;
text-decoration: none;
transition: 0.3s;
}
.dgs-drawer__gocart:hover {
background: var(--cat-bleu);
color: var(--cat-blanc);
}
/* Ordinateur portable : le panneau suit la proportion « grand écran » (34vw),
on resserre donc paddings, espacements et vignettes pour que le contenu
tienne dans cette largeur réduite. */
@media (max-width: 1680px) and (min-width: 681px) {
.dgs-drawer__panel {
padding: clamp(40px, 6vh, 70px) 32px;
}
.dgs-drawer__summary {
gap: 30px;
}
.dgs-drawer__header {
gap: 20px;
}
.dgs-drawer__items {
gap: 30px;
}
.dgs-drawer__item-main {
gap: 18px;
}
.dgs-drawer__thumb {
width: 120px;
height: 120px;
}
.dgs-drawer__info {
width: auto;
flex: 1;
}
.dgs-drawer__footer {
gap: 28px;
padding-top: 30px;
}
}
@media (max-width: 680px) {
.dgs-drawer__panel {
padding: 40px 24px;
}
.dgs-drawer__thumb {
width: 120px;
height: 120px;
}
.dgs-drawer__info {
width: auto;
flex: 1;
}
}
/* --------------------------------------------------------------------------
Checkout multi-étapes — pixel-fidèle aux maquettes 73-5109 / 75-3452 / 77-4095
Base 1920 : stepper x=180 ; colonne gauche x=366 (champs 781, boîtes 882) ;
récap 645px collé au bord droit (contenu 562, padding 100/35).
-------------------------------------------------------------------------- */
.dgs-checkout {
max-width: 1920px;
margin: 0 auto;
padding-top: 218px; /* le stepper de la maquette est à y=268 (218+50) */
padding-bottom: 120px; /* espace sous les boutons avant le footer (maquette) */
color: var(--cat-noir);
}
.dgs-checkout-login {
max-width: 500px;
margin: 0 auto;
padding: 260px 20px 120px;
text-align: center;
}
/* Stepper */
.dgs-stepper {
display: flex;
align-items: center;
gap: 10px;
padding: 50px 20px 0 180px;
margin-bottom: 0;
flex-wrap: wrap;
}
.dgs-stepper__item {
background: none;
border: 0;
padding: 0;
font-size: 16px;
font-weight: 700;
line-height: 26px;
color: var(--cat-noir);
opacity: 0.5;
text-decoration: none;
cursor: pointer;
}
.dgs-stepper__item.is-active,
.dgs-stepper__item.is-done,
a.dgs-stepper__item {
opacity: 1;
}
.dgs-stepper__sep {
width: 7px;
height: 7px;
border-top: 2px solid var(--cat-noir);
border-right: 2px solid var(--cat-noir);
transform: rotate(45deg);
opacity: 0.5;
}
/* Colonnes : gauche à 366, récap collé à droite */
.dgs-checkout__cols {
display: grid;
grid-template-columns: 882px minmax(0, 645px);
justify-content: space-between;
align-items: start;
/* Gouttière minimale : sur les portables (1501-1919px) le récap se rétrécit
pour tenir dans la largeur → sans gap explicite, justify-content:space-between
ne laisse aucun espace et la colonne de gauche vient se coller au récap. */
column-gap: 40px;
padding-left: 366px;
margin-top: 58px; /* conteneur maquette à y=352 (stepper finit à 294) */
}
.dgs-checkout__main {
padding-top: 50px; /* titres à y=402 */
}
.dgs-step {
display: none;
}
.dgs-step.is-active {
display: block;
}
/* Titres de section : 40px XB, hauteur 50 */
.dgs-step__title {
margin: 0 0 15px;
font-size: 40px;
font-weight: 800;
line-height: 50px;
color: var(--cat-noir);
}
.dgs-step__title--adresse,
.dgs-step__title--gap {
margin-top: 50px;
}
/* Champs (maquette : 781 large, 378 demi, h60, fond #F5F5F5, radius 8, px30) */
.dgs-fields {
width: 100%;
max-width: 781px;
}
.dgs-checkout .form-row {
margin: 0 0 20px !important;
padding: 0 !important;
display: block;
}
.dgs-checkout .form-row label.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
.dgs-checkout .form-row .woocommerce-input-wrapper {
display: block;
width: 100%;
}
.dgs-checkout .form-row input.input-text,
.dgs-checkout .form-row textarea.input-text,
.dgs-checkout .form-row select,
.dgs-checkout .select2-container .select2-selection--single {
width: 100% !important;
height: 60px !important;
padding: 13px 30px !important;
background: var(--cat-gris-clair) !important;
border: 0 !important;
border-radius: 8px !important;
box-shadow: none !important;
font-family: var(--cat-font) !important;
font-size: 16px !important;
font-weight: 500;
line-height: 26px !important;
color: var(--cat-noir) !important;
}
.dgs-checkout .select2-container .select2-selection--single .select2-selection__rendered {
line-height: 34px;
padding: 0;
color: var(--cat-noir);
}
.dgs-checkout .select2-container .select2-selection--single .select2-selection__arrow {
height: 58px;
right: 20px;
}
.dgs-checkout .form-row textarea.input-text {
height: 137px !important;
resize: vertical;
}
.dgs-checkout .form-row-first,
.dgs-checkout .form-row-last {
width: 378px !important;
max-width: 48.4%;
display: block;
}
.dgs-checkout .form-row-first {
float: left !important;
}
.dgs-checkout .form-row-last {
float: right !important;
}
.dgs-checkout .dgs-fields::after {
content: "";
display: block;
clear: both;
}
.dgs-checkout .form-row select,
.dgs-checkout .form-row select.country_to_state {
height: 60px !important;
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23272727' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 30px center !important;
background-size: 24px !important;
}
/* Select natif masqué par Select2 : rester réellement caché (sinon notre
width:100% le ré-élargit et il déborde en tablette/mobile). */
.dgs-checkout .form-row select.select2-hidden-accessible {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
border: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
}
/* Case « enregistrer ces informations » (24px, texte à 44) */
.dgs-saveinfo {
display: flex;
align-items: center;
margin-top: 0;
font-size: 16px;
line-height: 26px;
cursor: pointer;
}
.dgs-saveinfo input {
width: 24px;
height: 24px;
margin: 0 20px 0 0;
accent-color: var(--cat-bleu);
}
/* Boîtes grises (récap coordonnées, types de livraison, adresse, …) :
882 large, padding 30, rangées h34 séparées par un filet */
.dgs-recap,
.dgs-shipping-options .dgs-shipping-list,
.dgs-facturation {
width: 882px;
max-width: 100%;
background: var(--cat-gris-clair);
border-radius: 10px;
padding: 30px;
}
.dgs-recap__row,
.dgs-facturation__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 34px;
padding: 0;
}
.dgs-recap__row + .dgs-recap__row {
border-top: 1px solid var(--cat-gris-moyen);
margin-top: 20px;
padding-top: 20px;
}
.dgs-facturation__row + .dgs-facturation__row {
border-top: 1px solid var(--cat-gris-moyen);
margin-top: 15px;
padding-top: 15px;
}
.dgs-recap__row p {
margin: 0;
font-size: 16px;
line-height: 26px;
}
.dgs-recap__row p strong {
font-weight: 700;
}
.dgs-recap__edit {
background: none;
border: 0;
padding: 0;
color: #ff0004;
font-size: 16px;
font-weight: 500;
line-height: 26px;
cursor: pointer;
}
/* Types de livraison */
.dgs-shipping-options .dgs-shipping-list {
list-style: none;
margin: 0;
}
.dgs-shipping-option + .dgs-shipping-option {
border-top: 1px solid var(--cat-gris-moyen);
margin-top: 15px;
padding-top: 15px;
}
.dgs-shipping-option label {
display: flex;
align-items: flex-start;
gap: 8px;
cursor: pointer;
font-size: 16px;
line-height: 26px;
color: var(--cat-noir);
}
.dgs-shipping-option input {
width: 16px;
height: 16px;
margin-top: 5px;
accent-color: var(--cat-noir);
flex-shrink: 0;
}
.dgs-shipping-label {
flex: 1;
display: flex;
flex-direction: column;
}
.dgs-shipping-date {
color: var(--cat-bleu);
font-size: 16px;
line-height: 26px;
}
.dgs-shipping-price {
font-weight: 400;
white-space: nowrap;
}
.dgs-shipping-free {
font-weight: 400;
}
/* Livraison hors zone */
.dgs-horszone {
display: flex;
gap: 30px;
align-items: center;
margin: 50px 0 0;
}
.dgs-horszone strong {
font-size: 20px;
font-weight: 700;
line-height: 30px;
}
.dgs-horszone a {
color: var(--cat-bleu);
font-size: 16px;
font-weight: 700;
line-height: 26px;
text-decoration: underline;
}
/* Adresse de facturation (radios) */
.dgs-facturation__row label {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
line-height: 26px;
cursor: pointer;
}
.dgs-facturation__row input {
width: 16px;
height: 16px;
accent-color: var(--cat-noir);
}
.dgs-shipping-fields {
margin-top: 20px;
}
/* Navigation des étapes */
.dgs-step__nav {
display: flex;
align-items: center;
justify-content: space-between;
width: 884px;
max-width: 100%;
margin-top: 50px;
}
/* Étape Détails : la barre s'aligne sur le formulaire (781) et non sur les
boîtes 882 des étapes 2/3 → le bouton « Valider » colle au bord du champ. */
.dgs-step[data-step="1"] .dgs-step__nav {
width: 781px;
}
.dgs-step__prev {
background: none;
border: 0;
padding: 0;
color: var(--cat-bleu);
font-size: 16px;
font-weight: 700;
line-height: 26px;
text-decoration: underline;
cursor: pointer;
}
.dgs-step__next {
border: 0;
padding: 10px 25px;
border-radius: 100px;
background: var(--cat-bleu-clair);
color: var(--cat-bleu-fonce);
font-size: 16px;
font-weight: 700;
line-height: 26px;
cursor: pointer;
transition: 0.3s;
}
.dgs-step__next:hover {
background: var(--cat-bleu);
color: var(--cat-blanc);
}
/* Bloc paiement WooCommerce : liste simple espacée (maquette sans encadré) */
.dgs-checkout .woocommerce-checkout-payment {
background: none;
border-radius: 0;
padding: 0;
}
.dgs-checkout .wc_payment_methods {
list-style: none;
margin: 0;
padding: 0;
}
.dgs-checkout .wc_payment_method {
padding: 0;
margin: 0 0 14px;
}
.dgs-checkout .wc_payment_method label {
font-size: 16px;
font-weight: 400;
line-height: 26px;
display: inline;
cursor: pointer;
}
.dgs-checkout .wc_payment_method input.input-radio {
width: 16px;
height: 16px;
margin-right: 8px;
accent-color: var(--cat-noir);
}
/* Encadré descriptif (équivalent du bloc carte de la maquette) */
.dgs-checkout .payment_box {
width: 882px;
max-width: 100%;
background: var(--cat-gris-clair);
border-radius: 10px;
padding: 30px;
margin: 20px 0 0;
font-size: 16px;
line-height: 26px;
color: var(--cat-noir);
}
.dgs-checkout .payment_box p {
margin: 0;
}
.dgs-checkout .place-order {
padding: 0;
margin: 0;
}
.dgs-checkout .woocommerce-terms-and-conditions-wrapper {
margin-bottom: 14px;
}
.dgs-checkout #place_order {
border: 0;
padding: 10px 25px;
border-radius: 100px;
background: var(--cat-bleu-clair);
color: var(--cat-bleu-fonce);
font-size: 16px;
font-weight: 700;
line-height: 26px;
cursor: pointer;
transition: 0.3s;
float: none;
margin: 0;
}
.dgs-checkout #place_order:hover {
background: var(--cat-bleu);
color: var(--cat-blanc);
}
.dgs-checkout__devis-note {
width: 882px;
max-width: 100%;
font-size: 16px;
line-height: 26px;
color: var(--cat-noir);
margin: 0 0 20px;
}
/* Bon de commande */
.dgs-bon__label {
display: inline-flex;
align-items: center;
cursor: pointer;
color: var(--cat-noir);
font-size: 16px;
font-weight: 700;
line-height: 26px;
}
.dgs-bon__input {
display: none;
}
.dgs-bon__icon {
width: 24px;
height: 24px;
margin-right: 15px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23272727' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E") no-repeat center / contain;
}
.dgs-bon__hint {
margin: 5px 0 0;
font-size: 16px;
line-height: 26px;
color: var(--cat-noir);
}
.dgs-bon__file {
margin: 8px 0 0;
font-size: 14px;
color: var(--cat-bleu);
}
/* Bon de commande obligatoire : état d'erreur si non joint à la validation. */
.dgs-bon--error .dgs-bon__label {
border-color: var(--cat-rouge);
}
.dgs-bon__error {
margin: 8px 0 0;
font-size: 14px;
font-weight: 600;
color: var(--cat-rouge);
}
/* --------------------------------------------------------------------------
Récapitulatif « Aperçu panier » (panneau droit)
-------------------------------------------------------------------------- */
.dgs-checkout__aside {
background: var(--cat-gris-clair);
border-radius: 0;
padding: 100px 35px;
min-height: 874px;
position: static;
}
.dgs-review {
width: 562px;
max-width: 100%;
margin: 0 auto;
}
.dgs-review__items {
display: flex;
flex-direction: column;
gap: 40px;
}
.dgs-review__item {
display: flex;
align-items: flex-start;
}
.dgs-review__thumb img {
display: block;
width: 160px;
height: 160px;
object-fit: contain;
background: var(--cat-blanc);
border-radius: 5px;
}
.dgs-review__infos {
margin-left: 23px;
width: 206px;
}
.dgs-review__name {
margin: 0;
font-size: 18px;
font-weight: 700;
line-height: 26px;
color: var(--cat-noir);
}
.dgs-review__meta {
margin: 0;
font-size: 16px;
font-weight: 400;
line-height: 26px;
color: var(--cat-noir);
}
.dgs-review__price {
margin: 15px 0 0;
font-size: 18px;
font-weight: 700;
line-height: 26px;
color: var(--cat-noir);
}
.dgs-review__remove {
margin-left: auto;
line-height: 0;
}
.dgs-review__remove:hover svg {
stroke: #ff0004;
}
.dgs-review__sep {
height: 1px;
background: var(--cat-gris-moyen);
margin: 40px 0;
}
.dgs-review__totals {
display: flex;
flex-direction: column;
gap: 20px;
}
.dgs-review__line {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.dgs-review__label {
font-size: 18px;
font-weight: 700;
line-height: 26px;
color: var(--cat-noir);
}
.dgs-review__amount {
font-size: 22px;
font-weight: 800;
line-height: 26px;
color: var(--cat-noir);
}
.dgs-review__detail {
font-size: 18px;
font-weight: 700;
line-height: 26px;
color: var(--cat-noir);
}
.dgs-coupon__input {
width: 118px;
height: 36px;
padding: 5px 15px;
border: 1px solid var(--cat-noir);
border-radius: 0;
background: none;
font-family: var(--cat-font);
font-size: 14px;
font-style: italic;
color: var(--cat-noir);
text-align: right;
}
.dgs-coupon__input::placeholder {
font-style: italic;
color: var(--cat-noir);
}
.dgs-coupon {
display: inline-flex;
align-items: center;
gap: 8px;
}
.dgs-coupon__apply {
height: 36px;
padding: 0 16px;
border: 0;
border-radius: 100px;
background: var(--cat-noir);
color: #fff;
font-family: var(--cat-font);
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: 0.3s;
}
.dgs-coupon__apply:hover { background: #0062d8; }
.dgs-coupon__apply:disabled { opacity: 0.5; cursor: default; }
.dgs-coupon__feedback {
margin: 6px 0 0;
font-size: 13px;
font-weight: 600;
text-align: right;
}
.dgs-coupon__feedback--success { color: #1a7f37; }
.dgs-coupon__feedback--error { color: #c0392b; }
/* --------------------------------------------------------------------------
Confirmation — maquette 77-4967
-------------------------------------------------------------------------- */
.dgs-thankyou {
max-width: 1920px;
margin: 0 auto;
padding: 218px 0 0;
color: var(--cat-noir);
}
.dgs-thankyou__body {
max-width: 920px;
margin: 0 auto;
padding: 130px 20px 80px; /* titre maquette à y=424 (le stepper finit à 294) */
text-align: center;
}
.dgs-thankyou__title {
margin: 0 0 10px;
font-size: 40px;
font-weight: 800;
line-height: 50px;
}
.dgs-thankyou__order {
margin: 0 0 50px;
font-size: 20px;
font-weight: 700;
line-height: 30px;
color: var(--cat-gris-moyen);
}
.dgs-thankyou__text {
margin: 0 0 50px;
font-size: 16px;
line-height: 26px;
}
.dgs-thankyou__btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 25px;
border-radius: 100px;
background: var(--cat-bleu-clair);
color: var(--cat-bleu-fonce);
font-size: 20px;
font-weight: 700;
line-height: 26px;
text-decoration: none;
transition: 0.3s;
}
.dgs-thankyou__btn:hover {
background: var(--cat-bleu);
color: var(--cat-blanc);
}
.dgs-thankyou__print {
margin: 50px 0 0;
}
.dgs-thankyou__print a {
color: var(--cat-bleu);
font-size: 16px;
font-weight: 700;
line-height: 26px;
text-decoration: underline;
}
/* --------------------------------------------------------------------------
Responsive « Commande reçue » (thankyou)
Le header du thème est en position absolue : on réserve 218px sur desktop
(header haut ~147px, valeur maquette). Sous 1200px le header passe en version
compacte (~60px) : sans réduction, l'espace au-dessus du fil d'ariane (stepper)
était beaucoup trop grand. On le resserre par paliers.
-------------------------------------------------------------------------- */
/* Vue « invité » (non connecté) : WooCommerce affiche un formulaire de connexion /
vérification e-mail à la place de .dgs-thankyou, sans marge → le contenu passait
sous le header absolu. On ne cible que ce cas (aucun .dgs-thankyou dans .woocommerce)
pour ne pas doubler le retrait de la vue connectée. */
body.woocommerce-order-received .woocommerce:not(:has(.dgs-thankyou)) {
max-width: 920px;
margin-inline: auto;
padding: 218px 20px 80px;
}
@media (max-width: 1199px) {
.dgs-thankyou {
padding-top: 130px;
}
.dgs-thankyou__body {
padding-top: 60px;
}
body.woocommerce-order-received .woocommerce:not(:has(.dgs-thankyou)) {
padding-top: 130px;
}
}
@media (max-width: 640px) {
.dgs-thankyou {
padding-top: 110px;
}
.dgs-thankyou__body {
padding: 40px 20px 64px;
}
.dgs-thankyou__title {
font-size: 30px;
line-height: 38px;
}
.dgs-thankyou__order {
margin-bottom: 32px;
font-size: 18px;
line-height: 26px;
}
.dgs-thankyou__text {
margin-bottom: 40px;
}
body.woocommerce-order-received .woocommerce:not(:has(.dgs-thankyou)) {
padding-top: 110px;
}
}
/* Responsive checkout */
@media (max-width: 1919px) {
.dgs-checkout__cols {
padding-left: clamp(20px, calc((100vw - 1188px) / 2), 366px);
}
}
/* Portables (1301-1500px) : la colonne du formulaire / des étapes reste à la
LARGEUR MAQUETTE (882px) — c'est le récap de droite qui se rétrécit — pour que
les blocs des étapes Livraison / Paiement ne soient jamais tassés. */
@media (max-width: 1500px) {
.dgs-checkout__cols {
grid-template-columns: 882px minmax(0, 505px);
gap: 40px;
}
.dgs-checkout__aside {
padding: 50px 30px;
min-height: 0;
}
.dgs-review {
width: 100%;
}
}
/* Passage en une seule colonne dès ≤1300px : en dessous, garder 882px + le récap
à droite rendrait le récap trop étroit → on empile (récap au-dessus, formulaire
et étapes à 882px centrés). Les étapes Livraison / Paiement gardent donc TOUJOURS
leur largeur maquette (882px), en 2 colonnes comme en 1 colonne. */
@media (max-width: 1300px) {
.dgs-checkout {
padding-top: 150px;
padding-bottom: 90px;
}
.dgs-stepper {
padding-left: 40px;
padding-right: 40px;
}
/* Une seule colonne CENTRÉE, plafonnée à 882px (largeur des boîtes des
étapes 2/3) : le récap passe au-dessus du formulaire, et le contenu ne
s'étale pas d'un bord à l'autre sur les portables/tablettes.
minmax(0,882px) empêche les champs 781px d'élargir la piste / déborder. */
.dgs-checkout__cols {
grid-template-columns: minmax(0, 882px);
justify-content: center;
padding-left: 40px;
padding-right: 40px;
margin-top: 40px;
gap: 40px;
}
.dgs-checkout__main,
.dgs-checkout__aside {
min-width: 0;
}
.dgs-checkout__main {
padding-top: 0;
}
.dgs-checkout__aside {
position: static;
order: -1;
padding: 48px 40px;
min-height: 0;
border-radius: 10px;
}
.dgs-review {
width: 100%;
max-width: 562px;
margin: 0 auto;
}
.dgs-step__title {
font-size: 30px;
line-height: 38px;
}
.dgs-recap,
.dgs-shipping-options .dgs-shipping-list,
.dgs-facturation,
.dgs-step__nav,
.dgs-checkout .payment_box,
.dgs-checkout__devis-note {
width: 100%;
}
}
/* Prix masqués (invités) */
.dgs-price-login {
font-size: 14px;
font-weight: 700;
color: var(--cat-bleu);
text-decoration: underline;
}
.dgs-price-external {
font-weight: 700;
color: var(--cat-bleu);
}
/* ---- Panier : tablette (≤1024px) --------------------------------------
La table passe en largeur fluide : on neutralise les grands retraits
fixes hérités du desktop 1920 (image 101px, label 303px) et on étire le
filet séparateur sur toute la largeur. */
@media (max-width: 1024px) {
.dgs-cart {
padding-top: 180px;
}
.dgs-cart__continue {
margin-bottom: 60px;
}
.dgs-cart__table {
table-layout: auto;
}
/* le inline (303/274.5/200) doit céder pour un rendu fluide */
.dgs-cart__table col:first-child {
width: 201px !important; /* image 177 + 24 */
}
.dgs-cart__table col:nth-child(3) {
width: 22% !important;
}
.dgs-cart__table col:nth-child(4) {
width: 18% !important;
}
.dgs-cart__table thead th {
padding-bottom: 24px;
}
.dgs-cart__table .dgs-cart__th-produit {
padding-left: 0;
}
.dgs-cart__media {
padding-left: 0 !important;
width: 201px;
}
.dgs-cart__row {
background-position: 0 bottom;
background-size: 100% 1px;
}
.dgs-cart__row td {
padding-bottom: 32px;
}
.dgs-cart__row + .dgs-cart__row td {
padding-top: 28px;
}
.dgs-consigne {
margin-left: 0;
}
.dgs-cart__foot {
margin-top: 48px;
}
}
/* ---- Panier : mobile (≤640px) -----------------------------------------
Chaque article devient une carte : visuel à gauche, infos à droite,
prix et total étiquetés, consigne et pied empilés pleine largeur. */
@media (max-width: 640px) {
.dgs-cart {
padding-top: 130px;
}
.dgs-checkout {
padding-top: 92px;
padding-bottom: 64px;
}
.dgs-checkout .dgs-stepper {
padding: 18px 20px 0;
gap: 6px;
font-size: 14px;
}
.dgs-checkout .dgs-stepper__item {
font-size: 14px;
}
.dgs-checkout .dgs-checkout__cols {
margin-top: 22px;
padding-left: 20px;
padding-right: 20px;
gap: 26px;
}
.dgs-checkout .dgs-checkout__aside {
padding: 30px 20px;
}
.dgs-cart__title {
margin-bottom: 12px;
}
.dgs-cart__continue {
margin-bottom: 40px;
}
.dgs-cart__table,
.dgs-cart__table tbody {
display: block;
width: 100%;
}
.dgs-cart__table thead {
display: none;
}
.dgs-cart__row {
display: grid;
grid-template-columns: 104px 1fr;
grid-template-areas:
"media infos"
"media prix"
"media total";
column-gap: 18px;
row-gap: 6px;
align-items: start;
padding: 22px 0;
background: none;
border-bottom: 1px solid var(--cat-gris-moyen);
}
.dgs-cart__row td {
padding: 0 !important;
}
.dgs-cart__media {
grid-area: media;
width: 104px;
}
.dgs-cart__media img {
width: 104px;
height: 94px;
}
.dgs-cart__infos {
grid-area: infos;
}
.dgs-cart__prix {
grid-area: prix;
width: auto;
}
.dgs-cart__total {
grid-area: total;
width: auto;
}
.dgs-cart__prix::before,
.dgs-cart__total::before {
content: attr(data-title) " : ";
font-weight: 400;
color: var(--cat-noir);
}
.dgs-consigne {
margin-left: 0;
row-gap: 14px;
}
.dgs-consigne__label {
width: 100%;
margin-right: 0;
}
.dgs-consigne__siou {
width: auto;
margin-left: 24px;
margin-right: 16px;
}
.dgs-cart__foot {
flex-direction: column;
align-items: stretch;
text-align: center;
gap: 24px;
margin-top: 40px;
}
.dgs-cart__validate {
width: 100%;
}
.dgs-checkout .form-row-first,
.dgs-checkout .form-row-last {
width: 100% !important;
max-width: 100%;
margin-right: 0;
float: none !important;
display: block;
}
/* Commande : conteneur, stepper, récap et étape compacts sur mobile */
.dgs-stepper {
padding: 40px 20px 0;
gap: 8px;
font-size: 14px;
}
.dgs-checkout__cols {
padding-left: 20px;
padding-right: 20px;
}
.dgs-checkout__aside {
padding: 36px 20px;
}
.dgs-step__title {
font-size: 26px;
line-height: 34px;
}
/* Article du récap : vignette + infos fluides (plus de 206px fixe) */
.dgs-review__item {
gap: 16px;
}
.dgs-review__thumb img {
width: 120px;
height: 120px;
}
.dgs-review__infos {
margin-left: 0;
width: auto;
flex: 1;
min-width: 0;
}
.dgs-horszone {
flex-wrap: wrap;
gap: 8px 16px;
}
.dgs-recap__row,
.dgs-facturation__row {
flex-wrap: wrap;
}
}
/* Fond blanc des pages boutique (panier / commande / compte) */
body.woocommerce-cart main,
body.woocommerce-checkout main,
body.woocommerce-account main {
background: var(--cat-blanc);
}
/* Bannière coupon WooCommerce par défaut : remplacée par notre champ du récap */
.woocommerce-form-coupon-toggle,
form.checkout_coupon.woocommerce-form-coupon {
display: none !important;
}
/* ==========================================================================
Espace compte « Mon compte » — maquette Figma « MON COMPTE - DETAILS COMPTE »
(contenu 1188px : carte profil 380 + gap 127 + colonne formulaire 681)
========================================================================== */
.dgs-account,
.dgs-account * {
box-sizing: border-box;
font-family: var(--cat-font);
}
.dgs-account {
max-width: calc(1188px + 2 * var(--cat-pad));
margin: 0 auto;
padding: 260px var(--cat-pad) 120px;
color: var(--cat-noir);
}
.dgs-account__inner {
display: flex;
flex-direction: column;
gap: 50px;
}
.dgs-account__title {
margin: 0;
font-size: clamp(36px, 4vw, 60px);
font-weight: 800;
line-height: 1.1;
color: var(--cat-noir);
}
/* --- Colonnes ---------------------------------------------------------- */
.dgs-account__layout {
display: flex;
align-items: flex-start;
gap: clamp(40px, 6.6vw, 127px);
}
/* --- Carte profil (nom + navigation) ----------------------------------- */
.dgs-account__profile {
flex: 0 0 380px;
width: 380px;
display: flex;
flex-direction: column;
gap: 40px;
padding: 30px;
background: var(--cat-gris-clair);
border-radius: 15px;
}
.dgs-account__name {
margin: 0;
font-size: clamp(28px, 2.2vw, 40px);
font-weight: 800;
line-height: 1.15;
color: var(--cat-noir);
word-break: break-word;
}
.dgs-account__nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 20px;
}
.dgs-account__nav a {
display: inline-block;
font-size: 18px;
font-weight: 700;
line-height: 26px;
color: var(--cat-noir);
text-decoration: none;
opacity: 0.5;
transition: opacity 0.2s ease;
}
.dgs-account__nav-item.is-active a,
.dgs-account__nav a:hover,
.dgs-account__nav a:focus-visible {
opacity: 1;
}
/* --- Colonne de contenu ------------------------------------------------ */
.dgs-account__content {
flex: 1 1 auto;
min-width: 0;
max-width: 681px;
}
.dgs-account__content .woocommerce-notices-wrapper {
margin-bottom: 24px;
}
.dgs-account__content .woocommerce-notices-wrapper:empty {
margin-bottom: 0;
}
/* --- Formulaire « Détails du compte » ---------------------------------- */
.dgs-account-form {
display: flex;
flex-direction: column;
gap: 40px;
}
.dgs-account-form__sections {
display: flex;
flex-direction: column;
gap: 50px;
}
.dgs-account-form__section {
display: flex;
flex-direction: column;
gap: 20px;
}
.dgs-account__section-title {
margin: 0;
font-size: clamp(26px, 2.2vw, 40px);
font-weight: 800;
line-height: 1.1;
color: var(--cat-noir);
}
.dgs-account-form__fields {
display: flex;
flex-direction: column;
gap: 20px;
}
/* Champs : réutilisent .dgs-field / .dgs-field__label / .dgs-field__input
(identiques à la maquette : label Bold 16, champ 60px, fond gris clair). */
.dgs-account-form .dgs-field {
margin: 0;
}
.dgs-account-form__fields .dgs-field__input::placeholder {
color: var(--cat-noir);
opacity: 1;
}
/* --- Bouton « Sauvegarder les changements » ---------------------------- */
.dgs-account-form__actions {
margin: 0;
}
.dgs-account-form__submit {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: flex-start;
width: auto;
padding: 10px 25px;
border: 0;
border-radius: 100px;
background: var(--cat-bleu-clair);
color: var(--cat-bleu-fonce);
font-size: 16px;
font-weight: 700;
line-height: 26px;
cursor: pointer;
transition: 0.3s;
}
.dgs-account-form__submit:hover {
background: var(--cat-bleu);
color: var(--cat-blanc);
}
/* --- Repli léger pour les autres onglets (Adresses / Commandes) -------- */
.dgs-account__content .woocommerce-column__title,
.dgs-account__content .woocommerce-Addresses .woocommerce-Address-title h3,
.dgs-account__content h2,
.dgs-account__content h3 {
font-weight: 800;
color: var(--cat-noir);
}
.dgs-account__content .woocommerce-Addresses {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 30px;
margin-top: 10px;
}
.dgs-account__content .woocommerce-Address address,
.dgs-account__content address {
font-style: normal;
font-size: 16px;
line-height: 26px;
color: var(--cat-noir);
}
.dgs-account__content a {
color: var(--cat-bleu);
}
.dgs-account__content .woocommerce-orders-table,
.dgs-account__content table.shop_table {
width: 100%;
border-collapse: collapse;
font-size: 15px;
}
.dgs-account__content .woocommerce-orders-table th,
.dgs-account__content .woocommerce-orders-table td,
.dgs-account__content table.shop_table th,
.dgs-account__content table.shop_table td {
padding: 14px 12px;
border-bottom: 1px solid #e6e6e6;
text-align: left;
}
.dgs-account__content .woocommerce-Button,
.dgs-account__content .button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 25px;
border: 0;
border-radius: 100px;
background: var(--cat-bleu-clair);
color: var(--cat-bleu-fonce);
font-size: 15px;
font-weight: 700;
line-height: 26px;
text-decoration: none;
cursor: pointer;
transition: 0.3s;
}
.dgs-account__content .woocommerce-Button:hover,
.dgs-account__content .button:hover {
background: var(--cat-bleu);
color: var(--cat-blanc);
}
/* --------------------------------------------------------------------------
Responsive
-------------------------------------------------------------------------- */
@media (max-width: 1024px) {
.dgs-account {
padding-top: 200px;
}
.dgs-account__inner {
gap: 40px;
}
}
@media (max-width: 880px) {
.dgs-account__layout {
flex-direction: column;
gap: 40px;
}
.dgs-account__profile {
flex: 0 0 auto;
width: 100%;
}
.dgs-account__content {
max-width: none;
width: 100%;
}
}
@media (max-width: 600px) {
.dgs-account {
padding: 150px var(--cat-pad) 80px;
}
.dgs-account__inner {
gap: 32px;
}
.dgs-account__profile {
padding: 24px;
gap: 32px;
border-radius: 12px;
}
.dgs-account-form__sections {
gap: 40px;
}
.dgs-field__input {
height: 56px;
padding: 13px 20px;
}
.dgs-account-form__submit {
width: 100%;
}
.dgs-account__content .woocommerce-Addresses {
grid-template-columns: minmax(0, 1fr);
}
}
/* ==========================================================================
Compte — Commandes (maquette « MON COMPTE - COMMANDES »)
Tableau 681px : N° commande 155 · Date 129 · Statut 115 · N° suivi 124 ·
Prix 93 · Facture 65 (icône alignée à droite, x=657).
========================================================================== */
.dgs-orders {
display: flex;
flex-direction: column;
gap: 20px;
}
.dgs-orders__scroll {
width: 100%;
overflow-x: auto;
/* La colonne « Facture » aligne l'icône sur le bord droit du tableau
(comme la maquette) : le sous-pixel qui en résulte ne doit pas afficher
de barre de défilement (le tableau passe en cartes empilées ≤ 720px). */
scrollbar-width: none;
}
.dgs-orders__scroll::-webkit-scrollbar {
display: none;
}
.dgs-orders__table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
color: var(--cat-noir);
font-family: "DM Sans", var(--cat-font);
}
.dgs-orders__col--number { width: 155px; }
.dgs-orders__col--date { width: 129px; }
.dgs-orders__col--status { width: 115px; }
.dgs-orders__col--tracking { width: 124px; }
.dgs-orders__col--price { width: 93px; }
.dgs-orders__col--view { width: 80px; }
.dgs-orders__col--invoice { width: auto; }
/* DM Sans forcé sur les cellules (bat la règle .dgs-account * en Plus Jakarta). */
.dgs-orders__table th,
.dgs-orders__table td,
.dgs-orders__table a {
font-family: "DM Sans", var(--cat-font);
}
.dgs-orders__table thead th {
padding: 0 0 25px;
text-align: left;
font-size: 18px;
font-weight: 600;
line-height: 1.2;
color: var(--cat-noir);
white-space: nowrap;
}
.dgs-orders__table tbody td {
padding: 28px 0;
border-top: 1px solid #e6e6e6;
font-size: 18px;
font-weight: 400;
line-height: 1.2;
color: var(--cat-noir);
vertical-align: middle;
white-space: nowrap;
}
.dgs-orders__table .dgs-orders__number {
color: var(--cat-noir);
text-decoration: none;
}
.dgs-orders__table .dgs-orders__number:hover {
text-decoration: underline;
}
.dgs-orders__table tbody tr:last-child td {
border-bottom: 1px solid #e6e6e6;
}
.dgs-orders__number {
color: var(--cat-noir);
text-decoration: none;
}
.dgs-orders__number:hover {
text-decoration: underline;
}
.dgs-orders__facture {
padding-right: 0;
text-align: right;
}
.dgs-orders__table thead th.dgs-orders__facture {
text-align: left;
}
.dgs-orders__download {
display: inline-flex;
align-items: center;
justify-content: flex-end;
color: var(--cat-bleu);
transition: color 0.2s ease;
}
.dgs-orders__download:hover {
color: var(--cat-bleu-fonce);
}
/* Colonne « Voir » : œil vers le détail de la commande. */
.dgs-orders__view {
display: inline-flex;
align-items: center;
color: var(--cat-bleu);
transition: color 0.2s ease;
}
.dgs-orders__view:hover {
color: var(--cat-bleu-fonce);
}
.dgs-orders__pagination {
display: flex;
gap: 16px;
margin-top: 10px;
}
.dgs-orders__page-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 25px;
border-radius: 100px;
background: var(--cat-bleu-clair);
color: var(--cat-bleu-fonce);
font-family: var(--cat-font);
font-size: 15px;
font-weight: 700;
text-decoration: none;
transition: 0.3s;
}
.dgs-orders__page-btn:hover {
background: var(--cat-bleu);
color: var(--cat-blanc);
}
.dgs-orders__empty {
margin: 0;
font-size: 16px;
line-height: 26px;
color: var(--cat-noir);
}
.dgs-orders__browse {
display: inline-block;
margin-left: 10px;
color: var(--cat-bleu);
font-weight: 700;
text-decoration: underline;
}
/* ==========================================================================
Compte — Adresses (maquette « MON COMPTE - ADRESSES »)
========================================================================== */
.dgs-addresses {
display: flex;
flex-direction: column;
gap: 20px;
}
.dgs-addresses__list {
display: flex;
flex-direction: column;
gap: 20px;
}
.dgs-address-card {
display: flex;
flex-direction: column;
gap: 15px;
padding: 30px;
background: var(--cat-gris-clair);
border-radius: 15px;
}
.dgs-address-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.dgs-address-card__title {
margin: 0;
font-size: 24px;
font-weight: 800;
line-height: 1.1;
color: var(--cat-noir);
}
.dgs-address-card__edit {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 700;
line-height: 26px;
color: var(--cat-bleu);
text-decoration: none;
white-space: nowrap;
transition: color 0.2s ease;
}
.dgs-address-card__edit:hover {
color: var(--cat-bleu-fonce);
}
.dgs-address-card__edit svg {
width: 20px;
height: 20px;
flex: 0 0 auto;
}
.dgs-address-card__body {
font-size: 16px;
font-weight: 400;
line-height: 26px;
color: var(--cat-noir);
font-style: normal;
}
.dgs-address-card__body p {
margin: 0;
}
.dgs-account__content .dgs-addresses__add {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 18px;
font-weight: 700;
line-height: 26px;
color: var(--cat-noir);
text-decoration: none;
transition: color 0.2s ease;
}
.dgs-account__content .dgs-addresses__add:hover {
color: var(--cat-bleu);
}
.dgs-addresses__add svg {
width: 24px;
height: 24px;
flex: 0 0 auto;
}
/* --- Formulaire d'édition d'une adresse (endpoint edit-address/{type}) --- */
.dgs-account__content .woocommerce-address-fields h3,
.dgs-account__content form.edit-account h3,
.dgs-account__content .woocommerce-address-fields__field-wrapper + p ~ * h3 {
font-size: clamp(26px, 2.2vw, 40px);
font-weight: 800;
color: var(--cat-noir);
margin: 0 0 20px;
}
.dgs-account__content .woocommerce-address-fields__field-wrapper {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 24px;
}
.dgs-account__content .woocommerce-address-fields .form-row {
display: flex;
flex-direction: column;
gap: 5px;
margin: 0;
padding: 0;
width: 100%;
}
.dgs-account__content .woocommerce-address-fields .form-row label {
font-size: 16px;
font-weight: 700;
color: var(--cat-noir);
}
.dgs-account__content .woocommerce-address-fields .input-text,
.dgs-account__content .woocommerce-address-fields input[type="text"],
.dgs-account__content .woocommerce-address-fields input[type="tel"],
.dgs-account__content .woocommerce-address-fields input[type="email"],
.dgs-account__content .woocommerce-address-fields .select2-container .select2-selection,
.dgs-account__content .woocommerce-address-fields select {
width: 100%;
min-height: 60px;
height: 60px;
padding: 13px 30px;
background: var(--cat-gris-clair);
border: 0;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
color: var(--cat-noir);
box-sizing: border-box;
}
.dgs-account__content .woocommerce-address-fields .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 34px;
padding: 0;
color: var(--cat-noir);
}
.dgs-account__content .woocommerce-address-fields .select2-container--default .select2-selection--single .select2-selection__arrow {
top: 18px;
right: 18px;
}
.dgs-account__content .woocommerce-address-fields .input-text:focus,
.dgs-account__content .woocommerce-address-fields select:focus {
outline: 2px solid var(--cat-bleu);
}
/* ==========================================================================
Responsive — Commandes / Adresses
========================================================================== */
/* Tableau des commandes : passage en cartes empilées quand la colonne devient étroite. */
@media (max-width: 720px) {
.dgs-orders__table,
.dgs-orders__table tbody,
.dgs-orders__table tr,
.dgs-orders__table td {
display: block;
width: 100%;
}
.dgs-orders__table thead {
display: none;
}
.dgs-orders__table colgroup {
display: none;
}
.dgs-orders__row {
border: 1px solid #e6e6e6;
border-radius: 12px;
padding: 8px 18px;
margin-bottom: 16px;
}
.dgs-orders__table tbody td {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 0;
border: 0;
border-bottom: 1px solid #ececec;
text-align: right;
white-space: normal;
}
.dgs-orders__table tbody tr td:last-child {
border-bottom: 0;
}
.dgs-orders__table tbody tr:last-child td {
border-bottom: 1px solid #ececec;
}
.dgs-orders__table tbody tr:last-child td:last-child {
border-bottom: 0;
}
.dgs-orders__table tbody td::before {
content: attr(data-title);
font-weight: 600;
color: var(--cat-noir);
text-align: left;
}
.dgs-orders__facture {
text-align: right;
}
.dgs-orders__download {
justify-content: flex-end;
}
}
@media (max-width: 600px) {
.dgs-address-card {
padding: 24px;
}
.dgs-address-card__head {
align-items: flex-start;
}
.dgs-address-card__title {
flex: 1 1 auto;
min-width: 0;
}
.dgs-address-card__edit {
flex-shrink: 0;
}
.dgs-account__content .woocommerce-address-fields .input-text,
.dgs-account__content .woocommerce-address-fields select {
padding: 13px 20px;
}
}
/* ==========================================================================
Carnet d'adresses de livraison (plusieurs adresses + suppression)
========================================================================== */
.dgs-address-card__actions {
display: flex;
align-items: center;
gap: 20px;
flex-shrink: 0;
}
.dgs-account__content .dgs-address-card__delete {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 700;
line-height: 26px;
color: var(--cat-noir);
text-decoration: none;
white-space: nowrap;
transition: color 0.2s ease;
}
.dgs-account__content .dgs-address-card__delete:hover {
color: #d92d20;
}
.dgs-address-card__delete svg {
width: 20px;
height: 20px;
flex: 0 0 auto;
}
/* Formulaire d'ajout / édition d'une adresse (réutilise .dgs-account-form) */
.dgs-address-form select.dgs-field__input {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23272727' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 20px center;
padding-right: 50px;
}
.dgs-address-form__buttons {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.dgs-address-form__cancel {
font-size: 16px;
font-weight: 700;
line-height: 26px;
color: var(--cat-noir);
text-decoration: none;
}
.dgs-address-form__cancel:hover {
text-decoration: underline;
}
/* Sélecteur d'adresses enregistrées au checkout */
.dgs-checkout .dgs-ship-select {
display: flex;
flex-direction: column;
gap: 5px;
width: 100%;
max-width: 781px;
margin: 0 0 20px;
}
.dgs-checkout .dgs-ship-select select.dgs-field__input {
width: 100%;
height: 60px;
padding: 13px 30px;
background: var(--cat-gris-clair);
border: 0;
border-radius: 8px;
font-family: var(--cat-font);
font-size: 16px;
font-weight: 500;
color: var(--cat-noir);
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23272727' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 20px center;
padding-right: 50px;
}
@media (max-width: 600px) {
.dgs-address-card__head {
flex-wrap: wrap;
}
.dgs-address-card__title {
flex: 1 1 100%;
}
.dgs-address-card__actions {
gap: 24px;
}
}
/* ==========================================================================
Avis clients (fiche produit) — liste en lecture seule (dépôt = page dédiée)
========================================================================== */
.single-produit__avis {
max-width: 885px;
padding: 10px 0 60px;
}
.single-produit__avis .single-produit__desc-title {
margin-bottom: 24px;
}
.single-produit__avis-avg {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 24px;
font-size: 16px;
font-weight: 600;
color: var(--cat-noir);
}
.single-produit__avis-stars .star-rating,
.single-produit__avis-stars .star-rating span {
color: var(--cat-bleu);
}
/* Étoiles de notation : forcer la police d'icônes « star » (glyphes s/S = étoiles).
WooCommerce 10.9 impose la police « WooCommerce » qui ne mappe pas ces glyphes
→ les étoiles s'affichaient en « SSSSS » littéral. */
.star-rating,
.star-rating span,
.woocommerce .star-rating,
.woocommerce .star-rating span,
.single-produit__avis-stars .star-rating,
.single-produit__avis-stars .star-rating span {
font-family: "star" !important;
}
.single-produit__avis-items {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 20px;
}
.single-produit__avis-item {
background: var(--cat-gris-clair);
border-radius: 10px;
padding: 20px 24px;
}
.single-produit__avis-head {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 14px;
margin-bottom: 8px;
}
.single-produit__avis-head strong {
font-size: 16px;
font-weight: 700;
color: var(--cat-noir);
}
.single-produit__avis-date {
font-size: 13px;
color: var(--cat-gris-moyen);
}
.single-produit__avis-text p {
margin: 0;
font-size: 16px;
line-height: 26px;
color: var(--cat-noir);
}
.single-produit__avis-empty {
margin: 0;
font-size: 16px;
color: var(--cat-gris-moyen);
}
/* ==========================================================================
Parrainage : champ au checkout + onglet « Mon compte »
========================================================================== */
.dgs-parrain-field {
margin: 20px 0 0;
padding: 20px 24px;
background: var(--cat-gris-clair);
border-radius: 10px;
}
.dgs-parrain-field__title {
margin: 0 0 6px;
font-size: 16px;
font-weight: 700;
color: var(--cat-noir);
}
.dgs-parrain-field__hint {
margin: 0 0 12px;
font-size: 14px;
line-height: 20px;
color: var(--cat-noir);
}
.dgs-parrain-field input {
width: 100%;
max-width: 320px;
height: 50px;
padding: 0 18px;
border: 2px solid var(--cat-gris-moyen);
border-radius: 8px;
background: #fff;
font-family: var(--cat-font);
font-size: 15px;
letter-spacing: 1px;
text-transform: uppercase;
}
.dgs-parrainage__code {
font-size: 18px;
}
.dgs-parrainage__code strong {
display: inline-block;
margin-left: 8px;
padding: 4px 14px;
background: var(--cat-bleu-clair);
color: var(--cat-bleu-fonce);
border-radius: 100px;
letter-spacing: 2px;
}
.dgs-parrainage table.shop_table {
margin-top: 12px;
}
/* --------------------------------------------------------------------------
Demande de retour (Mon compte → détail d'une commande)
-------------------------------------------------------------------------- */
.dgs-retour {
margin-top: 30px;
}
.dgs-retour__form {
margin-top: 20px;
padding: 24px;
border: 1px solid var(--cat-gris-clair);
border-radius: 20px;
background: var(--cat-blanc);
}
.dgs-retour__title {
margin: 0 0 6px;
font-size: 22px;
font-weight: 700;
color: var(--cat-bleu-fonce);
}
.dgs-retour__intro {
margin: 0 0 18px;
color: var(--cat-gris-moyen);
}
.dgs-retour__row {
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 16px;
padding: 18px;
border: 1px solid var(--cat-gris-clair);
border-radius: 16px;
background: #fbfcfe;
}
.dgs-retour__field {
min-width: 0;
}
.dgs-retour__row .dgs-field__input {
width: 100%;
}
.dgs-retour__line {
display: flex;
gap: 14px;
}
.dgs-retour__field--qty {
flex: 0 0 190px;
}
.dgs-retour__field--motif {
flex: 1 1 auto;
}
.dgs-retour__field--qty .dgs-field__input {
max-width: 120px;
}
/* Aperçu du produit sélectionné (image + nom + réf + prix). */
.dgs-retour__preview {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 14px;
border-radius: 12px;
background: var(--cat-gris-clair);
}
.dgs-retour__preview-thumb {
flex: 0 0 auto;
width: 64px;
height: 64px;
border-radius: 8px;
background: #fff;
overflow: hidden;
}
.dgs-retour__preview-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
}
.dgs-retour__preview-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.dgs-retour__preview-name {
font-size: 16px;
font-weight: 700;
color: var(--cat-noir);
}
.dgs-retour__preview-ref {
font-size: 14px;
color: var(--cat-bleu);
}
.dgs-retour__preview-price {
font-size: 16px;
font-weight: 800;
color: var(--cat-bleu);
}
.dgs-retour__remove {
position: absolute;
top: 12px;
right: 12px;
width: 34px;
height: 34px;
border: 1px solid var(--cat-gris-clair);
border-radius: 50%;
background: var(--cat-blanc);
color: var(--cat-rouge);
font-size: 20px;
line-height: 1;
cursor: pointer;
transition: 0.2s;
z-index: 1;
}
.dgs-retour__remove:hover {
background: var(--cat-rouge);
color: var(--cat-blanc);
border-color: var(--cat-rouge);
}
/* Boutons de la demande de retour : style identique au CTA « Commander du gaz »
(.bouton-mise-en-avant a.plein) — pilule #61DBFF, texte #00356D, radius 60,
font 16px/500, hover bleu + blanc. */
.dgs-retour__toggle,
.dgs-retour__send {
padding: 15px 26px;
border: 0;
border-radius: 60px;
background: var(--cat-bleu-clair);
color: var(--cat-bleu-fonce);
font-size: 16px;
font-weight: 500;
line-height: 24px;
}
.dgs-retour__toggle:hover,
.dgs-retour__send:hover {
background: var(--cat-bleu);
color: #fff;
}
.dgs-retour__add {
display: inline-flex;
align-items: center;
margin: 4px 0 8px;
padding: 0;
border: 0;
background: none;
color: var(--cat-bleu);
font-size: 15px;
font-weight: 600;
cursor: pointer;
}
.dgs-retour__add:hover {
text-decoration: underline;
}
.dgs-retour__actions {
margin-top: 18px;
}
.dgs-retour__send[disabled] {
opacity: 0.55;
cursor: default;
}
.dgs-retour__feedback {
margin: 12px 0 0;
padding: 12px 16px;
border-radius: 12px;
font-weight: 600;
}
.dgs-retour__feedback.is-ok {
background: var(--cat-bleu-clair);
color: var(--cat-bleu-fonce);
}
.dgs-retour__feedback.is-error {
background: #fdecec;
color: var(--cat-rouge);
}
@media (max-width: 640px) {
.dgs-retour__line {
flex-wrap: wrap;
}
.dgs-retour__field--qty {
flex-basis: 100%;
}
}
/* --------------------------------------------------------------------------
Détail de commande (Mon compte / page « merci ») — ligne produit enrichie
(image + nom + quantité + référence) via order/order-details-item.php.
-------------------------------------------------------------------------- */
.dgs-order-item {
display: flex;
align-items: center;
gap: 16px;
}
.dgs-order-item__thumb {
flex: 0 0 auto;
width: 64px;
height: 64px;
border-radius: 8px;
background: #fff;
border: 1px solid var(--cat-gris-clair);
overflow: hidden;
}
.dgs-order-item__thumb img {
width: 100% !important;
height: 100% !important;
object-fit: contain;
padding: 4px;
box-sizing: border-box;
}
.dgs-order-item__info {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.dgs-order-item__name {
font-size: 16px;
font-weight: 700;
color: var(--cat-noir);
}
.dgs-order-item__name a {
color: inherit;
text-decoration: none;
}
.dgs-order-item__name a:hover {
color: var(--cat-bleu);
}
.dgs-order-item__name .product-quantity {
color: var(--cat-bleu);
font-weight: 700;
}
.dgs-order-item__ref {
font-size: 14px;
color: var(--cat-bleu);
}
/* -------------------------------------------------------------------------
* Checkout : case « J'ai lu et j'accepte les conditions générales » (CGV)
* (case native WooCommerce déplacée dans .dgs-terms-anchor par catalogue.js)
* ---------------------------------------------------------------------- */
.dgs-terms-anchor {
margin-top: 30px;
}
.dgs-terms-anchor .woocommerce-terms-and-conditions-wrapper .form-row {
margin: 0;
padding: 0;
}
.dgs-checkout .dgs-terms-anchor label.woocommerce-form__label-for-checkbox.checkbox {
display: flex;
align-items: center;
font-size: 16px;
line-height: 26px;
cursor: pointer;
}
.dgs-checkout .dgs-terms-anchor label.woocommerce-form__label-for-checkbox.checkbox input[type="checkbox"] {
width: 24px;
height: 24px;
flex: 0 0 24px;
margin: 0 20px 0 0;
accent-color: var(--cat-bleu);
}
.dgs-terms-anchor .woocommerce-terms-and-conditions-link {
color: var(--cat-bleu);
text-decoration: underline;
}
.dgs-terms-anchor .woocommerce-privacy-policy-text {
font-size: 14px;
color: #6b6b6b;
margin: 0 0 12px;
}
.dgs-terms-anchor .woocommerce-privacy-policy-text a {
color: var(--cat-bleu);
text-decoration: underline;
}