reste un bloc, donc les
* liens s'empilent normalement. */
.cs-megamenu__link {
display: inline-block;
color: var(--cs-text-dark);
font-size: 0.9rem;
text-decoration: none;
}
.cs-megamenu__link:hover,
.cs-megamenu__link:focus-visible {
color: var(--cs-main-strong);
text-decoration: underline;
}
.cs-megamenu__link[aria-current="page"] {
color: var(--cs-main-strong);
font-weight: 600;
}
/* --- Zone de mise en avant -------------------------------------------------
* Bloc de 300x400 fourni par les données du menu (cf. le contrat dans l'en-tête
* du template). Avec un contenu lié, toute la zone est un lien unique : les
* textes et le bouton sont des `span`, ce qui évite d'imbriquer des liens. Sans
* contenu lié, la zone est un `div`, sans bouton : ces règles valent pour les deux.
*/
.cs-megamenu__feature {
position: relative;
display: block;
flex: 0 0 300px;
width: 300px;
height: 400px;
overflow: hidden;
text-decoration: none;
}
.cs-megamenu__feature-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Dégradé du bas vers le haut : il garantit la lisibilité des textes blancs,
* y compris sur une photo claire. Purement décoratif, donc hors du flux. */
.cs-megamenu__feature::after {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgb(0 0 0 / 50%), rgb(0 0 0 / 0%));
content: "";
pointer-events: none;
}
.cs-megamenu__feature-content {
position: absolute;
z-index: 1;
inset-inline: 0;
inset-block-end: 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
padding-inline: 1rem;
text-align: center;
}
.cs-megamenu__feature-title {
color: var(--cs-pure-white);
font-weight: 700;
font-size: 1.5rem;
line-height: 1.1;
text-transform: uppercase;
}
.cs-megamenu__feature-subtitle {
color: var(--cs-pure-white);
font-size: 1rem;
text-transform: uppercase;
}
/* Même traitement que .cs-hpc__btn du composeur d'accueil, pour que les appels
* à l'action de la boutique restent cohérents entre l'accueil et le menu. */
.cs-megamenu__feature-button {
margin-block-start: 0.75rem;
padding: 0.6rem 1.4rem;
background: var(--cs-secondary-strong);
color: var(--cs-pure-white);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
white-space: nowrap;
border-radius: 2px;
opacity: 0.88;
transition: background-color 0.15s ease;
}
.cs-megamenu__feature:hover .cs-megamenu__feature-button,
.cs-megamenu__feature:focus-visible .cs-megamenu__feature-button {
background: var(--cs-main-strong);
}
@media (prefers-reduced-motion: reduce) {
.cs-megamenu__feature-button {
transition: none;
}
}
/* ------------------------------------------------------------------------- *
* 7. Plan du site
*
* Les catégories de niveau 0 sont les catégories choisies dans le module
* chaussmartsitemap. Elles forment des titres compacts (20 px, graisse 600) en
* capitales, séparés du contenu par un filet gris. Les groupes, listes et liens descendants
* réutilisent directement les composants `.cs-megamenu__*` définis juste
* au-dessus, sans carte ni aplat supplémentaire.
* ------------------------------------------------------------------------- */
.cs-sitemap {
display: grid;
gap: clamp(1.5rem, 2.5vw, 2.25rem);
}
.cs-sitemap__section {
min-width: 0;
}
.cs-sitemap__title {
margin: 0 0 1.25rem;
padding-block-end: 0.5rem;
border-block-end: 1px solid var(--cs-border);
font-size: 1.25rem;
font-weight: 600;
line-height: 1.2;
}
.cs-sitemap__root-link {
display: block;
color: var(--cs-text-accent);
font-weight: inherit;
text-transform: uppercase;
text-decoration: none;
}
.cs-sitemap__root-link:hover,
.cs-sitemap__root-link:focus-visible {
color: var(--cs-main-strong);
text-decoration: none;
}
.cs-sitemap__root-link:focus-visible,
.cs-sitemap .cs-megamenu__group-title:focus-visible,
.cs-sitemap .cs-megamenu__link:focus-visible {
outline: 3px solid var(--cs-main-strong);
outline-offset: 3px;
}
.cs-sitemap__groups {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.5rem 2rem;
align-items: start;
padding-block: 0;
}
.cs-sitemap__group {
min-width: 0;
}
.cs-sitemap__group-heading {
margin: 0;
font-size: inherit;
}
/* Dans le mega menu, la pastille sort volontairement du flux. Sur le plan du
* site, elle reste dans la colonne : son bord gauche marque l'axe, tandis que
* le titre et ses liens partagent le même retrait. */
.cs-sitemap .cs-megamenu__group-title {
padding-inline-start: 0.85rem;
}
.cs-sitemap .cs-megamenu__group-title::before {
inset-inline-start: 0;
}
.cs-sitemap .cs-megamenu__list {
padding-inline-start: 0.85rem;
}
.cs-sitemap__section--link-only .cs-sitemap__title {
margin-block-end: 0;
}
@media (min-width: 576px) {
.cs-sitemap__groups {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 768px) {
.cs-sitemap__groups {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 992px) {
.cs-sitemap__groups {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
/* ------------------------------------------------------------------------- *
* Home — rythme vertical
* ------------------------------------------------------------------------- *
* Une seule respiration (--cs-home-gap, 40 px, #141), à toutes les largeurs :
* entre deux sections de la home, et entre la dernière section et le bloc
* newsletter. Deux exceptions à 20 px (--cs-home-gap-tight) : sous le header et
* sous le composeur. Elle est portée par la grille du thème
* (.page-content--home, gap de 2.5rem dans Hummingbird) et par le bas de la
* colonne centrale ; les sections (modules maison chaussmarthome*, composeur)
* n'ont ni marge ni padding vertical propre. Le padding haut du bloc
* newsletter, utile sur les autres pages, est retiré sur la home pour ne pas
* doubler l'écart.
*
* Couples sur-titre .cs-overline + titre : écart sur-titre → titre, taille et
* couleur du titre, écart entre l'en-tête et le contenu qu'il annonce, communs,
* à régler ici seulement (typographie du titre : « Titre et texte de bloc »,
* section 1). Les utilisent les raccourcis, les produits mis en avant, les
* largeurs, les zones promotionnelles, l'Introduction (chaussmarthome) et, pour
* l'écart sur-titre → titre, le bloc newsletter. Écart entre les cartes d'une
* section : --cs-home-grid-gap. */
:root {
--cs-home-gap: 2.5rem;
/* Exceptions : sous le header et sous le composeur, écart resserré. */
--cs-home-gap-tight: 1.25rem;
--cs-home-overline-gap: 0.375rem;
--cs-home-title-size: 1.75rem;
--cs-home-header-gap: 1.25rem;
--cs-home-grid-gap: 0.75rem;
}
@media (min-width: 992px) {
:root {
--cs-home-title-size: 2.5rem;
--cs-home-grid-gap: 18px;
}
}
/* En-têtes des sections : marges et titre communs. Les zones promo (colonne
* flex à gap) et l'Introduction règlent leurs marges à part. */
.cs-home-width__header,
.cs-home-shortcuts__header,
.cs-home-featured__header {
margin-bottom: var(--cs-home-header-gap);
}
.cs-home-width__overline,
.cs-home-shortcuts__overline,
.cs-home-featured__overline,
.cs-home-intro__overline {
margin: 0 0 var(--cs-home-overline-gap);
}
.cs-home-width__title,
.cs-home-shortcuts__title,
.cs-home-featured__title {
margin: 0;
}
.cs-home-width__title,
.cs-home-shortcuts__title,
.cs-home-featured__title,
.cs-home-promo__title,
.cs-home-intro__title {
font-size: var(--cs-home-title-size);
color: var(--cs-text-dark);
}
.page-content--home {
row-gap: var(--cs-home-gap);
margin-top: var(--cs-home-gap-tight);
}
/* Sous le composeur : la marge négative raccourcit sa rangée de la grille, le
* row-gap restant commun aux autres sections. */
.page-content--home > .cs-hpc {
margin-bottom: calc(var(--cs-home-gap-tight) - var(--cs-home-gap));
}
body#index #center-column {
padding-bottom: var(--cs-home-gap);
}
/* Gabarit horizontal commun, celui du composeur et de l'Introduction : 1300 px
* au plus, gouttières de 10 px, à toutes les largeurs. Le .container Bootstrap
* des autres sections plafonnait par paliers (960 px vers 1100 px de large),
* d'où des marges latérales plus grandes que celles du composeur. Le bloc
* newsletter suit ce gabarit sur la home seulement : ailleurs, il reste aligné
* sur le .container Bootstrap du contenu de la page. */
.cs-home-shortcuts > .container,
.cs-home-featured > .container,
.cs-home-promo > .container,
.cs-home-width > .container,
.cs-home-phone > .container,
body#index .cs-newsletter > .container {
max-width: 1300px;
padding-inline: 10px;
}
body#index .cs-newsletter {
padding-top: 0;
}
/* ------------------------------------------------------------------------- *
* Home — « Ne vous trompez plus de largeur » (chaussmarthomewidth, #128)
* ------------------------------------------------------------------------- *
* Cinq cartes G à M, chacune un seul lien vers sa catégorie (une carte sans
* catégorie est un --static : ni lien ni pulse). Empilées sous 992px,
* grille de 5 colonnes égales au-delà, cartes étirées à la hauteur de la plus
* haute (stretch de la grille + colonne flex) : le texte prend la place
* restante, donc « LARGEUR » et la pastille tombent sur la même ligne d'une
* carte à l'autre. Le titre réserve 2 lignes.
*
* Pulse : au survol, au focus clavier et au toucher (:active), la pastille
* émet un anneau qui s'élargit en s'estompant (box-shadow animé). Coupé avec
* prefers-reduced-motion.
*
* Carte partagée avec les raccourcis (section suivante) : fond tertiaire,
* bordure, rayon 20 / 22 px, focus en couleur principale. En-tête : « Home —
* rythme vertical ». */
.cs-home-width__card,
.cs-home-shortcuts__card {
display: flex;
flex-direction: column;
border: 1px solid var(--cs-border);
border-radius: 20px;
text-align: center;
text-decoration: none;
background: var(--bs-tertiary-bg);
}
a.cs-home-width__card:focus-visible,
.cs-home-shortcuts__card:focus-visible {
outline: 2px solid var(--cs-main-strong);
}
.cs-home-width__grid,
.cs-home-shortcuts__list,
.cs-home-promo__grid {
gap: var(--cs-home-grid-gap);
}
@media (min-width: 992px) {
.cs-home-width__card,
.cs-home-shortcuts__card {
border-radius: 22px;
}
}
.cs-home-width__grid {
display: flex;
flex-direction: column;
}
.cs-home-width__card {
align-items: center;
padding: 1.5rem 1.25rem;
color: var(--cs-text-accent);
}
a.cs-home-width__card:hover,
a.cs-home-width__card:focus-visible {
color: var(--cs-text-accent);
text-decoration: none;
}
a.cs-home-width__card:focus-visible {
outline-offset: 3px;
}
.cs-home-width__card-title {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.625rem;
font-size: 1.25rem;
line-height: 1.2;
text-transform: uppercase;
color: var(--cs-secondary-strong);
transition: color 0.2s ease;
}
/* Carte cliquable survolée ou au focus : le titre passe en couleur principale. */
a.cs-home-width__card:hover .cs-home-width__card-title,
a.cs-home-width__card:focus-visible .cs-home-width__card-title {
color: var(--cs-main-strong);
}
.cs-home-width__card-text {
flex-grow: 1;
margin-bottom: 1rem;
font-size: 0.875rem;
line-height: 1.45;
}
.cs-home-width__card-foot {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.cs-home-width__label {
font-size: 0.875rem;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
color: var(--cs-text-info);
}
.cs-home-width__letter {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 50%;
font-size: 1.75rem;
line-height: 1;
color: var(--cs-pure-white);
background: var(--cs-secondary-strong);
}
/* Anneau de 26px, rapide au départ puis ralenti (ease-out marqué) ; il
* s'éteint à 75 % du cycle, laissant une courte pause avant le suivant. */
@keyframes cs-home-width-pulse {
0% {
box-shadow: 0 0 0 0 color-mix(in srgb, var(--cs-secondary-strong) 60%, transparent);
}
75%,
100% {
box-shadow: 0 0 0 26px color-mix(in srgb, var(--cs-secondary-strong) 0%, transparent);
}
}
a.cs-home-width__card:hover .cs-home-width__letter,
a.cs-home-width__card:focus-visible .cs-home-width__letter,
a.cs-home-width__card:active .cs-home-width__letter {
animation: cs-home-width-pulse 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
a.cs-home-width__card:hover .cs-home-width__letter,
a.cs-home-width__card:focus-visible .cs-home-width__letter,
a.cs-home-width__card:active .cs-home-width__letter {
animation: none;
}
}
@media (min-width: 992px) {
.cs-home-width__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
}
.cs-home-width__card {
padding: 1.75rem 1.5rem;
}
.cs-home-width__card-title {
min-height: 2.4em;
margin-bottom: 0.75rem;
}
.cs-home-width__card-text {
margin-bottom: 1.25rem;
line-height: 1.4;
}
}
/* ------------------------------------------------------------------------- *
* Home — Raccourcis vers des catégories (chaussmarthomeshortcuts, #108)
* ------------------------------------------------------------------------- *
* Cartes au code des pages CMS (fond tertiaire, bordure, rayon 22px), chacune
* un seul lien vers sa catégorie ; miniature en option. Grille sans défilement
* horizontal : 2 colonnes en mobile, 3 dès 576px, 5 dès 992px, les raccourcis
* suivants passant à la ligne ; cartes d'une rangée à la même hauteur. Carte
* partagée avec les largeurs (section précédente) ; en-tête : « Home — rythme
* vertical ». */
.cs-home-shortcuts__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin: 0;
padding: 0;
list-style: none;
}
.cs-home-shortcuts__card {
height: 100%;
overflow: hidden;
color: var(--cs-text-dark);
transition: background-color 0.25s ease, border-color 0.25s ease;
}
/* Survol et focus : toute la carte passe au lilas (teinte de la couleur principale). */
.cs-home-shortcuts__card:hover,
.cs-home-shortcuts__card:focus-visible {
border-color: var(--cs-main-tint);
color: var(--cs-text-dark);
text-decoration: none;
background: var(--cs-main-tint);
}
.cs-home-shortcuts__card:focus-visible {
outline-offset: -2px;
}
.cs-home-shortcuts__media {
display: flex;
align-items: center;
justify-content: center;
height: 132px;
}
/* Fond blanc des miniatures fondu dans celui de la carte. */
.cs-home-shortcuts__img {
width: 118px;
height: 118px;
object-fit: contain;
mix-blend-mode: multiply;
transition: transform 0.4s ease;
}
.cs-home-shortcuts__card:hover .cs-home-shortcuts__img {
transform: scale(1.04);
}
.cs-home-shortcuts__body {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: center;
padding: 1rem 0.625rem;
}
/* Avec miniature, le texte suit l'image sans marge haute supplémentaire. */
.cs-home-shortcuts__media + .cs-home-shortcuts__body {
padding-top: 0;
}
.cs-home-shortcuts__name {
font-size: 1.1875rem;
line-height: 1.2;
letter-spacing: -0.02em;
}
.cs-home-shortcuts__subtitle {
margin-top: 0.25rem;
font-size: 0.875rem;
line-height: 1.35;
color: var(--cs-text-info);
}
@media (prefers-reduced-motion: reduce) {
.cs-home-shortcuts__card,
.cs-home-shortcuts__img {
transition: none;
}
.cs-home-shortcuts__card:hover .cs-home-shortcuts__img {
transform: none;
}
}
@media (min-width: 576px) {
.cs-home-shortcuts__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 992px) {
.cs-home-shortcuts__list {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.cs-home-shortcuts__media {
height: 196px;
}
.cs-home-shortcuts__img {
width: 176px;
height: 176px;
}
.cs-home-shortcuts__body {
padding: 1.5rem 1.25rem;
}
.cs-home-shortcuts__name {
font-size: 1.5rem;
}
.cs-home-shortcuts__subtitle {
font-size: 0.9375rem;
}
}
/* ------------------------------------------------------------------------- *
* Home — Mise en avant de produits (chaussmarthomefeatured, #109)
* ------------------------------------------------------------------------- *
* En-tête commun aux sections (« Home — rythme vertical »). Les produits
* gardent la miniature et la grille du thème (.products) au-delà de 768px ; en
* dessous, une seule ligne qui défile latéralement (scroll-snap), cartes de
* 72 % pour laisser deviner la suivante. */
@media (max-width: 767.98px) {
.cs-home-featured .products {
display: flex;
gap: 1rem;
padding-bottom: 0.5rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
}
.cs-home-featured .products > .product-miniature {
flex: 0 0 72%;
scroll-snap-align: start;
}
}
/* ------------------------------------------------------------------------- *
* Home — Deux zones promotionnelles (chaussmarthomepromo, #111)
* ------------------------------------------------------------------------- *
* Chaque zone : image de fond par boutique (--cs-home-promo-bg, posée par le
* template) sous le voile du bloc sombre partagé avec la newsletter (voile,
* texte blanc, survol du bouton, focus : voir « Bloc d'inscription à la
* newsletter ») ; sans image, le voile seul fait un aplat. Sur-titre et bouton
* en --cs-secondary-strong, code promo au style du bandeau top header
* (pointillés, gras, espacé). Empilées sous 992px, côte à côte au-delà ; une
* zone seule prend la largeur. Titre et texte : styles partagés (section 1). */
.cs-home-promo__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
.cs-home-promo__zone {
--cs-dark-panel-bg: var(--cs-home-promo-bg);
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 0.875rem;
min-height: 20rem;
padding: 2rem 1.5rem;
}
/* Sur-titre : style partagé .cs-overline (section 1) ; rose plutôt que la couleur
* principale, peu lisible sur le voile, comme le sur-titre de la newsletter.
* Les éléments de la zone sont espacés par le gap de la colonne (0.875rem) : les
* marges ramènent l'écart sur-titre → titre et en-tête → contenu aux valeurs
* communes de la home (--cs-home-*, « Home — rythme vertical »). */
.cs-home-promo__overline {
margin: 0 0 calc(var(--cs-home-overline-gap) - 0.875rem);
color: var(--cs-secondary-strong);
}
.cs-home-promo__title {
margin: 0 0 calc(var(--cs-home-header-gap) - 0.875rem);
color: inherit;
}
.cs-home-promo__text {
max-width: 34rem;
}
.cs-home-promo__code {
margin: 0;
font-size: 0.9375rem;
}
.cs-home-promo__code-value {
margin-left: 0.375rem;
padding: 0.125rem 0.5rem;
border: 1px dashed color-mix(in srgb, currentColor 60%, transparent);
border-radius: 3px;
font-weight: 700;
letter-spacing: 0.08em;
}
.cs-home-promo .btn.cs-home-promo__button {
margin-top: 0.375rem;
padding: 0.75rem 1.75rem;
}
@media (min-width: 992px) {
.cs-home-promo__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cs-home-promo__grid--single {
grid-template-columns: minmax(0, 1fr);
}
.cs-home-promo__zone {
min-height: 26rem;
padding: 3rem;
}
}