1614 lines
43 KiB
CSS
Executable file
1614 lines
43 KiB
CSS
Executable file
@charset "UTF-8";
|
|
@font-face {
|
|
font-family: Lato;
|
|
font-weight: 100 900;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
src:
|
|
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.woff2")
|
|
format(woff2) tech(variations),
|
|
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.woff2")
|
|
format("woff2-variations"),
|
|
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.woff2")
|
|
format("woff2"),
|
|
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.ttf")
|
|
format("truetype");
|
|
unicode-range:
|
|
U+0000-00FF,
|
|
U+0131,
|
|
U+0152-0153,
|
|
U+02BB-02BC,
|
|
U+02C6,
|
|
U+02DA,
|
|
U+02DC,
|
|
U+2000-206F,
|
|
U+2074,
|
|
U+20AC,
|
|
U+2122,
|
|
U+2191,
|
|
U+2193,
|
|
U+2212,
|
|
U+2215,
|
|
U+FEFF,
|
|
U+FFFD;
|
|
}
|
|
@font-face {
|
|
font-family: Lato;
|
|
font-weight: 100 900;
|
|
font-style: italic;
|
|
font-display: swap;
|
|
src:
|
|
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.woff2")
|
|
format(woff2) tech(variations),
|
|
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.woff2")
|
|
format("woff2-variations"),
|
|
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.woff2")
|
|
format("woff2"),
|
|
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.ttf")
|
|
format("truetype");
|
|
unicode-range:
|
|
U+0000-00FF,
|
|
U+0131,
|
|
U+0152-0153,
|
|
U+02BB-02BC,
|
|
U+02C6,
|
|
U+02DA,
|
|
U+02DC,
|
|
U+2000-206F,
|
|
U+2074,
|
|
U+20AC,
|
|
U+2122,
|
|
U+2191,
|
|
U+2193,
|
|
U+2212,
|
|
U+2215,
|
|
U+FEFF,
|
|
U+FFFD;
|
|
}
|
|
@font-face {
|
|
font-family: Myriad;
|
|
font-weight: 300 900;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
font-stretch: 70% 110%;
|
|
src:
|
|
url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable.woff2") format("woff2"),
|
|
url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable.ttf")
|
|
format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: Myriad;
|
|
font-weight: 300 900;
|
|
font-style: italic;
|
|
font-display: swap;
|
|
font-stretch: 70% 110%;
|
|
src:
|
|
url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable-italic.woff2")
|
|
format("woff2"),
|
|
url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable-italic.ttf")
|
|
format("truetype");
|
|
}
|
|
:root {
|
|
/* Couleurs */
|
|
--couleur-blanc: oklch(100% 0 0deg / 100%);
|
|
--couleur-blanc-fond: oklch(100% 0 0deg / 80%);
|
|
--couleur-gris: oklch(93.89% 0.0025 345.21deg / 100%);
|
|
--couleur-gris-fond: oklch(93.89% 0.0025 345.21deg / 80%);
|
|
--couleur-gris-fond-extra: oklch(93.89% 0.0025 345.21deg / 60%);
|
|
--couleur-gris-fonce: oklch(59.99% 0 0deg / 100%);
|
|
--couleur-gris-fonce-fond: oklch(59.99% 0 0deg / 80%);
|
|
--couleur-noir: oklch(24.35% 0 0deg / 100%);
|
|
/* Arrières-plan */
|
|
--arriere-plan-points: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%)
|
|
1px 0.5px/2px 2px;
|
|
/* Polices */
|
|
--police-lato: "Lato", sans-serif;
|
|
/* Hauteurs de ligne */
|
|
--hauteur-ligne-classique: 1.5;
|
|
--hauteur-ligne-moitie: 1.2;
|
|
--hauteur-ligne-compacte: 1.1;
|
|
--hauteur-ligne-rapprochee: 1;
|
|
/* Espacements entre les lettres */
|
|
--espacement-inter-lettres-rapproche-m: -1px;
|
|
--espacement-inter-lettres-rapproche-s: -0.5px;
|
|
--espacement-inter-lettres-etendu-s: 0.5px;
|
|
--espacement-inter-lettres-etendu-m: 1px;
|
|
--espacement-inter-lettres-etendu-l: 1.5px;
|
|
--espacement-inter-lettres-etendu-xl: 2px;
|
|
/* Dimensions */
|
|
--en-tete-hauteur: 61px;
|
|
--menu-categories-produits-hauteur: calc(var(--espace-m) * 2 + 1rlh);
|
|
--pied-de-page-hauteur: calc(0.8rem * 1.5 * 3 + var(--espace-s) * 2);
|
|
--contenu-page-hauteur-minimale-sans-categories: calc(
|
|
100svh - var(--en-tete-hauteur) - var(--pied-de-page-hauteur)
|
|
);
|
|
--contenu-page-hauteur-minimale-avec-categories: calc(
|
|
100svh - var(--en-tete-hauteur) - var(--pied-de-page-hauteur)
|
|
- var(--menu-categories-produits-hauteur)
|
|
);
|
|
/* Espacements */
|
|
--espace-2xs: 0.1rem;
|
|
--espace-xs: 0.25rem;
|
|
--espace-s: 0.5rem;
|
|
--espace-m: 1rem;
|
|
--espace-l: 1.25rem;
|
|
--espace-xl: 2rem;
|
|
}
|
|
|
|
/*
|
|
* 1. Utilise un meilleur modèle de boîte.
|
|
*/
|
|
html {
|
|
scrollbar-gutter: stable;
|
|
box-sizing: border-box; /* 1 */
|
|
}
|
|
|
|
/*
|
|
* Réinitialise avec des styles par défaut plus simples.
|
|
*
|
|
* 1. Hérite du modèle de boîte du document par défaut.
|
|
* 2. Pas de marges par défaut.
|
|
* 3. Hérite par défaut des styles de texte et de couleur.
|
|
*/
|
|
*, *::before, *::after {
|
|
box-sizing: inherit; /* 1 */
|
|
margin: 0; /* 2 */
|
|
padding: 0; /* 2 */
|
|
font: inherit; /* 3 */
|
|
color: inherit; /* 3 */
|
|
outline: 2px dashed transparent;
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
/* Réalise une Transition entre les pages */
|
|
@view-transition {
|
|
navigation: auto;
|
|
}
|
|
/*
|
|
* 1. Utilise une couleur d'arrière-plan définie.
|
|
* 2. Utilise la couleur primaire du site.
|
|
*/
|
|
body {
|
|
overscroll-behavior: none;
|
|
accent-color: var(--couleur-gris-fonce); /* 2 */
|
|
background: var(--couleur-gris); /* 1 */
|
|
}
|
|
|
|
/*
|
|
* 1. Force l'héritage des styles pour ces éléments.
|
|
*/
|
|
button, input, select, textarea {
|
|
font: inherit; /* 1 */
|
|
}
|
|
|
|
/*
|
|
* Change la couleur d'arrière-plan à la sélection du texte.
|
|
*/
|
|
*::selection {
|
|
background: var(--couleur-gris-fonce);
|
|
}
|
|
|
|
/* Cache tout élément avec l'attribut hidden */
|
|
[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Encadre en pointillé pour dénoter le focus. */
|
|
*:focus-visible {
|
|
outline-color: var(--couleur-noir);
|
|
transition: 0.2s outline-color;
|
|
}
|
|
|
|
/* Cache visuellement mais reste accessible par les lecteurs d'écran */
|
|
.visuellement-cache:not(:focus, :active, :focus-within) {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
width: 1px;
|
|
height: 1px;
|
|
white-space: nowrap;
|
|
clip-path: inset(50%);
|
|
}
|
|
|
|
/* Utilise un curseur approprié pour les Éléments désactivés */
|
|
[disabled] {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/*
|
|
* Désactive les animations pour les Utilisateurs n'en souhaitant pas.
|
|
*/
|
|
/* @media (prefers-reduced-motion) {
|
|
*, *::before, *::after {
|
|
scroll-behavior: auto !important;
|
|
transition: none !important;
|
|
animation-duration: 0s !important;
|
|
}
|
|
|
|
@view-transition {
|
|
navigation: none !important;
|
|
}
|
|
} */
|
|
/*
|
|
* 2. Rendu spécifique du texte pour Safari/iOS.
|
|
* 3. Rendu plus précis du texte.
|
|
*/
|
|
html {
|
|
font: 1rem/var(--hauteur-ligne-classique) Lato;
|
|
font-optical-sizing: auto;
|
|
font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures
|
|
contextual;
|
|
font-kerning: normal;
|
|
color: var(--couleur-noir);
|
|
text-decoration-skip-ink: auto;
|
|
text-size-adjust: none; /* 2 */
|
|
text-rendering: geometricprecision; /* 3 */
|
|
letter-spacing: var(--espacement-inter-lettres-etendu-s);
|
|
-webkit-font-smoothing: antialiased; /* 2 */
|
|
}
|
|
|
|
strong {
|
|
font-weight: 600;
|
|
}
|
|
|
|
em {
|
|
font-style: italic;
|
|
}
|
|
|
|
code {
|
|
font-family: monospace;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Mixins Sass */
|
|
/*
|
|
* Réinitialisation des styles des <button>.
|
|
*/
|
|
button {
|
|
all: initial;
|
|
cursor: pointer;
|
|
box-sizing: border-box;
|
|
font: inherit;
|
|
text-align: center;
|
|
letter-spacing: inherit;
|
|
outline: 2px dashed transparent;
|
|
outline-offset: -2px;
|
|
transition: 0.2s background, 0.2s font-weight, 0.2s color, 0.2s outline-color;
|
|
}
|
|
button:focus-visible {
|
|
z-index: 5;
|
|
outline-color: var(--couleur-noir);
|
|
}
|
|
button:active {
|
|
background: var(--arriere-plan-points);
|
|
}
|
|
button:disabled {
|
|
color: inherit;
|
|
background: var(--arriere-plan-points);
|
|
outline-color: transparent;
|
|
}
|
|
button {
|
|
/* Particularismes. */
|
|
}
|
|
button.bouton-case-pleine {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
@media (hover: hover) {
|
|
button.bouton-case-pleine:hover {
|
|
color: var(--couleur-noir);
|
|
background: var(--arriere-plan-points);
|
|
}
|
|
}
|
|
button.bouton-inverse {
|
|
color: var(--couleur-blanc);
|
|
background: var(--couleur-noir);
|
|
}
|
|
button.bouton-inverse:focus-visible {
|
|
outline-color: var(--couleur-blanc);
|
|
}
|
|
button.bouton-inverse:active {
|
|
color: var(--couleur-noir);
|
|
background: var(--arriere-plan-points);
|
|
}
|
|
button.bouton-inverse:disabled {
|
|
color: var(--couleur-blanc);
|
|
}
|
|
@media (hover: hover) {
|
|
button.bouton-inverse:hover {
|
|
color: var(--couleur-noir);
|
|
background: var(--arriere-plan-points);
|
|
}
|
|
}
|
|
button.bouton-retour-haut {
|
|
position: fixed;
|
|
z-index: 500;
|
|
right: var(--espace-xl);
|
|
bottom: calc(var(--espace-l) + var(--pied-de-page-hauteur));
|
|
transform: rotate(180deg);
|
|
padding: var(--espace-m);
|
|
border: 1px solid var(--couleur-noir);
|
|
border-radius: 100%;
|
|
visibility: hidden;
|
|
opacity: 0%;
|
|
background: var(--couleur-gris-fond);
|
|
box-shadow: initial;
|
|
transition: 0.2s background, 0.2s opacity, 0.2s visibility;
|
|
}
|
|
button.bouton-retour-haut img {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
background: transparent;
|
|
}
|
|
button.bouton-retour-haut[data-actif] {
|
|
visibility: visible;
|
|
opacity: 50%;
|
|
}
|
|
@media (hover: hover) {
|
|
button.bouton-retour-haut[data-actif]:hover {
|
|
opacity: 100%;
|
|
background: var(--couleur-gris-fond);
|
|
}
|
|
}
|
|
@media (hover: hover) {
|
|
button:hover {
|
|
color: var(--couleur-blanc);
|
|
background: var(--couleur-gris-fonce);
|
|
}
|
|
}
|
|
|
|
dialog {
|
|
z-index: 999;
|
|
flex-flow: column nowrap;
|
|
place-self: center center;
|
|
padding: var(--espace-l);
|
|
opacity: 0%;
|
|
background: var(--couleur-blanc);
|
|
transition: display 0.3s, opacity 0.3s, overlay 0.3s;
|
|
transition-behavior: allow-discrete;
|
|
}
|
|
dialog::backdrop {
|
|
background-color: transparent;
|
|
transition: background-color 0.3s, display 0.3s, overlay 0.3s;
|
|
transition-behavior: allow-discrete;
|
|
}
|
|
dialog:open {
|
|
display: flex;
|
|
opacity: 100%;
|
|
}
|
|
dialog:open::backdrop {
|
|
background-color: var(--couleur-gris-fond);
|
|
}
|
|
dialog * + * {
|
|
margin-block-start: var(--espace-m);
|
|
}
|
|
dialog p {
|
|
max-inline-size: 50ch;
|
|
}
|
|
dialog button {
|
|
align-self: end;
|
|
inline-size: fit-content;
|
|
padding: var(--espace-s);
|
|
}
|
|
|
|
@starting-style {
|
|
dialog:open {
|
|
opacity: 0%;
|
|
}
|
|
}
|
|
@starting-style {
|
|
dialog:open::backdrop {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
fieldset {
|
|
all: initial;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
margin-top: var(--espace-l);
|
|
font: inherit;
|
|
}
|
|
|
|
input, select, textarea {
|
|
padding: var(--espace-xs);
|
|
border: 1px solid var(--couleur-noir);
|
|
accent-color: var(--couleur-gris-fonce);
|
|
background: var(--couleur-gris);
|
|
transition: 0.2s background;
|
|
}
|
|
input:focus-visible,
|
|
input:focus-within,
|
|
select:focus-visible,
|
|
select:focus-within,
|
|
textarea:focus-visible,
|
|
textarea:focus-within {
|
|
z-index: 10;
|
|
outline: 2px dashed var(--couleur-noir);
|
|
}
|
|
input:active, select:active, textarea:active {
|
|
background: var(--arriere-plan-points);
|
|
}
|
|
input:disabled, select:disabled, textarea:disabled {
|
|
background: var(--arriere-plan-points);
|
|
outline-color: transparent;
|
|
}
|
|
|
|
input:is([type="email"], [type="text"], [type="tel"])::placeholder, textarea::placeholder {
|
|
text-transform: lowercase;
|
|
letter-spacing: var(--espacement-inter-lettres-etendu-s);
|
|
}
|
|
input:is([type="email"], [type="text"], [type="tel"])::selection, textarea::selection {
|
|
color: var(--couleur-blanc);
|
|
background: var(--couleur-noir);
|
|
}
|
|
input:is([type="email"], [type="text"], [type="tel"]):user-valid, textarea:user-valid {
|
|
font-weight: 500;
|
|
color: var(--couleur-noir);
|
|
background: var(--arriere-plan-points);
|
|
}
|
|
input:is([type="email"], [type="text"], [type="tel"]):user-invalid, textarea:user-invalid {
|
|
background: var(--couleur-gris);
|
|
}
|
|
|
|
input, label, select, textarea {
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type="checkbox"], input[type="radio"] {
|
|
width: var(--espace-l);
|
|
height: var(--espace-l);
|
|
padding: initial;
|
|
border: 1px solid var(--couleur-noir);
|
|
appearance: none;
|
|
transition: 0.2s background;
|
|
}
|
|
input[type="checkbox"]:checked, input[type="radio"]:checked {
|
|
color: var(--couleur-noir);
|
|
background: var(--arriere-plan-points);
|
|
}
|
|
input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {
|
|
content: "x";
|
|
position: relative;
|
|
bottom: 0.1rem;
|
|
left: 0.35rem;
|
|
}
|
|
@media (hover: hover) {
|
|
input[type="checkbox"]:checked:hover, input[type="radio"]:checked:hover {
|
|
color: var(--couleur-noir);
|
|
}
|
|
}
|
|
input[type="checkbox"]:not(:checked):user-valid, input[type="radio"]:not(:checked):user-valid {
|
|
background: initial;
|
|
}
|
|
input[type="checkbox"], input[type="radio"] {
|
|
/*
|
|
* 1. Pour un alignement parfait du label avec la case à cocher.
|
|
*/
|
|
}
|
|
label:has(~ input[type="checkbox"], ~ input[type="radio"]),
|
|
input[type="checkbox"] + label,
|
|
input[type="radio"] + label {
|
|
padding-top: 1px; /* 1 */
|
|
font-size: 0.9rem;
|
|
}
|
|
@media (hover: hover) {
|
|
input[type="checkbox"]:hover, input[type="radio"]:hover {
|
|
background: var(--arriere-plan-points);
|
|
}
|
|
}
|
|
|
|
input[type="radio"] {
|
|
border-radius: 100%;
|
|
appearance: initial;
|
|
}
|
|
input[type="radio"]:checked {
|
|
display: inline-flex;
|
|
place-content: center;
|
|
place-items: center;
|
|
}
|
|
input[type="radio"]:checked::before {
|
|
content: " ";
|
|
inset: initial;
|
|
display: inline-block;
|
|
width: calc(var(--espace-l) / 2);
|
|
height: calc(var(--espace-l) / 2);
|
|
border-radius: 100%;
|
|
background: var(--couleur-noir);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
textarea:hover {
|
|
color: var(--couleur-noir);
|
|
}
|
|
}
|
|
|
|
/*
|
|
* 1. Facilite l'usages des images.
|
|
* 2. Affiche les images dans l'intégralité de leur conteneur, en contrepartie d'un recoupage.
|
|
* 3. Arrière-plan jaune en attendant le chargement de l'image.
|
|
*/
|
|
img, picture {
|
|
display: block; /* 1 */
|
|
max-width: 100%; /* 2 */
|
|
}
|
|
|
|
img {
|
|
object-fit: cover; /* 2 */
|
|
background: var(--couleur-gris-fonce); /* 3 */
|
|
}
|
|
|
|
/*
|
|
* 1. Change la « bordure » de base.
|
|
* 2. Ajoute un contour, qui sera colorisé au focus.
|
|
* 3. Anime le changement de couleur des texte, bordure et contour.
|
|
*/
|
|
a {
|
|
/* Couleurs */
|
|
--lien-contour-couleur-focus: var(--couleur-noir); /* 1 */
|
|
text-decoration: underline; /* 1 */
|
|
text-decoration-color: transparent; /* 1 */
|
|
text-decoration-skip-ink: auto; /* 1 */
|
|
transition:
|
|
0.2s background,
|
|
0.2s border-color,
|
|
0.2s color,
|
|
0.2s font-weight,
|
|
0.2s outline-color,
|
|
0.2s letter-spacing,
|
|
0.2s text-decoration-color; /* 3 */
|
|
text-decoration-skip: edges; /* 1 */
|
|
/* Change les couleurs de l'arrière-plan et du contour pour marquer le focus. */
|
|
}
|
|
a:focus-visible {
|
|
outline-color: var(--lien-contour-couleur-focus);
|
|
}
|
|
a {
|
|
/* Lien ressemblant visuellement à un bouton. */
|
|
}
|
|
a.lien-bouton {
|
|
/* Marges */
|
|
--lien-bouton-marges-internes-bloc: var(--espace-xs);
|
|
--lien-bouton-marges-internes-ligne: var(--espace-m);
|
|
/* Couleurs */
|
|
--lien-bouton-arriere-plan-couleur-survol: var(--couleur-gris-fonce);
|
|
padding: var(--lien-bouton-marges-internes-bloc) var(--lien-bouton-marges-internes-ligne);
|
|
border: 1px solid var(--couleur-noir);
|
|
/* Change la couleur de l'arrière-plan pour marquer le focus. */
|
|
}
|
|
a.lien-bouton:focus-visible {
|
|
background: var(--lien-bouton-arriere-plan-couleur-survol);
|
|
}
|
|
a.lien-bouton {
|
|
/* Change la couleur de la bordure pour qu'elle se fonde dans l'arrière-plan, donnant l'illusion que la bordure se déplace vers l'extérieur. */
|
|
}
|
|
a.lien-bouton:active {
|
|
border-color: var(--lien-bouton-arriere-plan-couleur-survol);
|
|
}
|
|
a.lien-bouton {
|
|
/* Change la couleur de l'arrière-plan pour marquer le survol. */
|
|
}
|
|
@media (hover: hover) {
|
|
a.lien-bouton:hover {
|
|
background: var(--lien-bouton-arriere-plan-couleur-survol);
|
|
}
|
|
}
|
|
a {
|
|
/* Lien ressemblant à... un lien. */
|
|
}
|
|
a.lien-lien {
|
|
text-decoration: underline;
|
|
}
|
|
a.lien-lien:active {
|
|
text-decoration-color: var(--couleur-gris-fonce);
|
|
background: var(--couleur-gris-fonce);
|
|
}
|
|
@media (hover: hover) {
|
|
a.lien-lien:hover {
|
|
text-decoration-color: var(--couleur-gris-fonce);
|
|
background: var(--couleur-gris-fonce);
|
|
}
|
|
}
|
|
a {
|
|
/* Styles pour les liens par défaut */
|
|
}
|
|
@media (hover: hover) {
|
|
a:not([class]):hover {
|
|
text-decoration-color: var(--couleur-noir);
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Réinitialise les styles des listes non ordonnées.
|
|
*
|
|
* 1. Pas de puce.
|
|
*/
|
|
ul {
|
|
list-style: none; /* 1 */
|
|
/*
|
|
* Utilise un SVG comme puce de liste via l'emploi d'un arrière-plan.
|
|
*
|
|
* 1. Ajoute de la marge interne pour que la puce ait de la place.
|
|
* 2. Centre verticalement la puce et la dimensionne correctement.
|
|
*/
|
|
}
|
|
ul.avec-puce-cercle {
|
|
/* Marges */
|
|
--liste-puce-cercle-lien-marges-internes-ligne-debut: 2ch;
|
|
/* Dispositions */
|
|
--liste-puce-cercle-puce-position-horizontale: 1ch;
|
|
/* Tailles */
|
|
--liste-puce-cercle-puce-taille: 1.25ex;
|
|
}
|
|
ul.avec-puce-cercle a {
|
|
padding-left: var(--liste-puce-cercle-lien-marges-internes-ligne-debut); /* 1 */
|
|
background: no-repeat var(--liste-puce-cercle-puce-position-horizontale) center/var(
|
|
--liste-puce-cercle-puce-taille
|
|
) url("/app/themes/haiku-atelier-2024/assets/img/icons/dot.svg"); /* 2 */
|
|
}
|
|
|
|
video {
|
|
display: block;
|
|
inline-size: 100%;
|
|
min-inline-size: 100%;
|
|
block-size: 100%;
|
|
min-block-size: inherit;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* Styles pour un bandeau défilant. */
|
|
.bandeau {
|
|
overflow: hidden;
|
|
display: flex;
|
|
column-gap: var(--espace-m);
|
|
width: 100%;
|
|
border-top: 1px solid var(--couleur-noir);
|
|
font-style: italic;
|
|
color: var(--couleur-noir);
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
background: var(--couleur-gris-fonce);
|
|
}
|
|
.bandeau__conteneur {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
column-gap: var(--espace-m);
|
|
animation: marquee linear 15s infinite both;
|
|
}
|
|
.bandeau__conteneur *::selection {
|
|
color: var(--couleur-gris-fonce);
|
|
background: var(--couleur-noir);
|
|
}
|
|
.bandeau__conteneur p {
|
|
display: inline-block;
|
|
padding: var(--espace-s) 0;
|
|
}
|
|
.bandeau__conteneur p strong {
|
|
font-weight: 600;
|
|
}
|
|
@media (hover: hover) {
|
|
.bandeau:hover .bandeau__conteneur {
|
|
animation-play-state: paused;
|
|
}
|
|
}
|
|
|
|
@keyframes marquee {
|
|
from {
|
|
transform: translateX(0%);
|
|
}
|
|
to {
|
|
transform: translateX(-100%);
|
|
}
|
|
}
|
|
body:has(#menu-mobile:not([aria-hidden="true"])) {
|
|
touch-action: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#menu-mobile {
|
|
--menu-mobile-hauteur: calc(100svh - var(--en-tete-hauteur));
|
|
position: fixed;
|
|
z-index: 997;
|
|
inset: var(--en-tete-hauteur) 0 0 0;
|
|
overflow: hidden;
|
|
overscroll-behavior: contain;
|
|
display: flex;
|
|
width: 100vw;
|
|
height: var(--menu-mobile-hauteur);
|
|
/* stylelint-disable-next-line declaration-block-no-duplicate-properties -- Pour les navigateurs incompatibles. */
|
|
transition: display 400ms;
|
|
transition: display 400ms allow-discrete;
|
|
-webkit-overflow-scrolling: none;
|
|
}
|
|
#menu-mobile[aria-hidden="true"] {
|
|
display: none;
|
|
animation: fade-out 400ms both;
|
|
}
|
|
#menu-mobile[aria-hidden="true"] .menu-modale__fond {
|
|
animation: fade-out 400ms both;
|
|
}
|
|
#menu-mobile .menu-modale__fond {
|
|
position: fixed;
|
|
z-index: 998;
|
|
inset: var(--en-tete-hauteur) 0 0 0;
|
|
height: var(--menu-mobile-hauteur);
|
|
opacity: 0%;
|
|
background-color: var(--couleur-gris-fond);
|
|
animation: fade-in 400ms both;
|
|
}
|
|
#menu-mobile .menu-modale__conteneur {
|
|
position: relative;
|
|
z-index: 999;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
width: 100%;
|
|
height: fit-content;
|
|
padding: var(--espace-xl);
|
|
border-bottom: 1px solid var(--couleur-noir);
|
|
opacity: 0%;
|
|
background-color: var(--couleur-gris);
|
|
animation: fade-in 400ms 200ms both;
|
|
}
|
|
#menu-mobile .menu-modale__conteneur .menu-navigation {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
#menu-mobile .menu-modale__conteneur .menu-navigation ul {
|
|
grid-column: initial;
|
|
flex-flow: column nowrap;
|
|
place-items: center;
|
|
}
|
|
#menu-mobile .menu-modale__conteneur .menu-navigation ul > span {
|
|
width: fit-content;
|
|
}
|
|
#menu-mobile .menu-modale__conteneur .menu-navigation ul > span li a {
|
|
padding-top: var(--espace-m);
|
|
padding-bottom: var(--espace-m);
|
|
}
|
|
@media (width > 1000px) {
|
|
#menu-mobile {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
to {
|
|
opacity: 100%;
|
|
}
|
|
}
|
|
@keyframes fade-out {
|
|
to {
|
|
opacity: 0%;
|
|
}
|
|
}
|
|
@keyframes slide-in {
|
|
to {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
#en-tete {
|
|
--en-tete-marges-internes-ligne: var(--espace-xl);
|
|
--en-tete-marges-internes-bloc: var(--espace-m);
|
|
--en-tete-section-hauteur: var(--en-tete-hauteur);
|
|
--en-tete-logo-longueur: 160px;
|
|
position: fixed;
|
|
z-index: 60;
|
|
top: 0;
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
place-items: center;
|
|
justify-content: space-between;
|
|
min-width: 100vw;
|
|
max-width: 100vw;
|
|
height: var(--en-tete-hauteur);
|
|
padding: var(--en-tete-marges-internes-bloc) var(--en-tete-marges-internes-ligne);
|
|
border-bottom: 1px solid var(--couleur-noir);
|
|
background: var(--couleur-gris-fond-extra);
|
|
backdrop-filter: brightness(125%) blur(6px);
|
|
}
|
|
#en-tete picture, #en-tete img {
|
|
background: transparent;
|
|
}
|
|
#en-tete .logo {
|
|
width: var(--en-tete-logo-longueur);
|
|
}
|
|
#en-tete .logo img {
|
|
width: 100%;
|
|
height: 40px;
|
|
/* Décalage demandé par Manon. */
|
|
margin-left: -6px;
|
|
object-fit: contain;
|
|
image-rendering: crisp-edges;
|
|
shape-rendering: geometricprecision;
|
|
}
|
|
#en-tete {
|
|
/* TODO: Déplacer au sein d'un Composant ? */
|
|
}
|
|
#en-tete .menu-navigation {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
flex: 1;
|
|
font-size: 1.1rem;
|
|
text-align: center;
|
|
text-transform: lowercase;
|
|
}
|
|
#en-tete .menu-navigation ul {
|
|
display: flex;
|
|
grid-column: 2;
|
|
flex-flow: row nowrap;
|
|
gap: var(--espace-m);
|
|
justify-content: space-between;
|
|
}
|
|
#en-tete .menu-navigation {
|
|
/*
|
|
* Le conteneur d'une entrée du menu, nécessaire pour que le changement d'arrière-plan au
|
|
* survol soit possible.
|
|
*
|
|
* 1. Passe en bloc en ligne pour pouvoir ajouter des marges internes en bloc.
|
|
* 2. Augmente les marges internes pour créer des liens plus imposants.
|
|
* 3. Corrige la disposition de la puce, étant donné les marges internes en ligne augmentées.
|
|
* 4. Aligne le texte au centre.
|
|
*/
|
|
}
|
|
#en-tete .menu-navigation__entree {
|
|
/* Marges */
|
|
--nav-entree-marges-internes-bloc: var(--espace-xs);
|
|
--nav-entree-marges-internes-ligne: 3rem;
|
|
--liste-puce-cercle-lien-marges-internes-ligne-debut: calc(var(--espace-m) + 1.5ch); /* 3 */
|
|
/* Dispositions */
|
|
--liste-puce-cercle-puce-position-horizontale: 3.5ch; /* 3 */
|
|
}
|
|
#en-tete .menu-navigation__entree:has(a[aria-current="page"]) {
|
|
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg")
|
|
bottom/auto 90% no-repeat;
|
|
}
|
|
#en-tete .menu-navigation__entree--courante {
|
|
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg")
|
|
bottom/auto 90% no-repeat;
|
|
}
|
|
#en-tete .menu-navigation__entree a {
|
|
display: inline-block; /* 1 */
|
|
padding: var(--nav-entree-marges-internes-bloc) var(--nav-entree-marges-internes-ligne); /* 2 */
|
|
text-align: center; /* 4 */
|
|
}
|
|
@media (hover: hover) {
|
|
#en-tete .menu-navigation__entree:hover {
|
|
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg")
|
|
bottom/auto 90% no-repeat;
|
|
}
|
|
}
|
|
@media (width <= 1000px) {
|
|
#en-tete .menu-navigation#menu-navigation-en-tete {
|
|
display: none;
|
|
}
|
|
}
|
|
#en-tete {
|
|
/* * Bouton du compte de Produits dans le Panier. */
|
|
}
|
|
#en-tete .compte-panier {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
gap: 1rem;
|
|
place-items: center;
|
|
text-align: center;
|
|
}
|
|
#en-tete .compte-panier[disabled] {
|
|
background: var(--arriere-plan-points);
|
|
}
|
|
#en-tete .compte-panier[disabled] a:hover,
|
|
#en-tete .compte-panier[disabled] a:active,
|
|
#en-tete .compte-panier[disabled] a:focus-within {
|
|
border: 1px solid var(--couleur-noir);
|
|
}
|
|
#en-tete .compte-panier a {
|
|
padding-block: var(--espace-2xs);
|
|
padding-inline: var(--espace-s);
|
|
text-transform: lowercase;
|
|
background: transparent;
|
|
}
|
|
#en-tete .compte-panier a[data-contient-articles="true"] {
|
|
background: var(--couleur-gris-fond);
|
|
}
|
|
#en-tete .compte-panier a:hover, #en-tete .compte-panier a:focus-within {
|
|
color: var(--couleur-blanc);
|
|
background: var(--couleur-gris-fonce-fond);
|
|
}
|
|
#en-tete .compte-panier a:active {
|
|
color: var(--couleur-noir);
|
|
background: var(--arriere-plan-points);
|
|
}
|
|
#en-tete .conteneur {
|
|
display: flex;
|
|
column-gap: var(--espace-m);
|
|
}
|
|
#en-tete .bouton-menu-mobile {
|
|
--hauteur-bouton-menu: 22px;
|
|
display: none;
|
|
align-content: center;
|
|
}
|
|
#en-tete .bouton-menu-mobile img {
|
|
height: var(--hauteur-bouton-menu);
|
|
object-fit: contain;
|
|
image-rendering: crisp-edges;
|
|
shape-rendering: geometricprecision;
|
|
}
|
|
@media (hover: hover) {
|
|
#en-tete .bouton-menu-mobile:hover {
|
|
background: initial !important;
|
|
}
|
|
}
|
|
@media (width <= 1000px) {
|
|
#en-tete .bouton-menu-mobile {
|
|
display: block;
|
|
}
|
|
}
|
|
@media (width <= 600px) {
|
|
#en-tete {
|
|
--en-tete-marges-internes-ligne: var(--espace-l);
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Le menu avec les Catégories de Produits pour une navigation rapide.
|
|
*/
|
|
#menu-categories-produits {
|
|
/* Dimensions */
|
|
--menu-entree-longueur-minimale: 13ch;
|
|
--menu-section-marges-bloc-debut: var(--en-tete-hauteur);
|
|
--menu-entree-marges-internes-ligne: var(--espace-m);
|
|
position: relative;
|
|
margin-top: var(--menu-section-marges-bloc-debut);
|
|
}
|
|
#menu-categories-produits[data-entrees-presentes-debut] svg:first-of-type {
|
|
opacity: 100%;
|
|
}
|
|
#menu-categories-produits[data-entrees-presentes-fin] svg:last-of-type {
|
|
opacity: 100%;
|
|
}
|
|
#menu-categories-produits svg {
|
|
pointer-events: none;
|
|
position: absolute;
|
|
bottom: calc(17.59px - 0.35rem);
|
|
inline-size: 0.8rem;
|
|
block-size: 0.8rem;
|
|
opacity: 0%;
|
|
mix-blend-mode: exclusion;
|
|
shape-rendering: geometricprecision;
|
|
transition: 0.2s opacity;
|
|
}
|
|
#menu-categories-produits svg:first-of-type {
|
|
left: var(--espace-xs);
|
|
}
|
|
#menu-categories-produits svg:last-of-type {
|
|
right: var(--espace-xs);
|
|
}
|
|
@media (width > 600px) {
|
|
#menu-categories-produits svg {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
#menu-categories-produits {
|
|
/*
|
|
* Liste des Catégories de Produits.
|
|
*
|
|
* 1. Toutes les entrées font la même longueur, en respectant une contrainte de longueur
|
|
* minimale. Elles se disposent de manière à occuper tout l'espace disponible sans aller à la
|
|
* ligne.
|
|
*/
|
|
}
|
|
#menu-categories-produits ul {
|
|
display: grid;
|
|
grid-template-columns:
|
|
repeat(auto-fit, minmax(var(--menu-entree-longueur-minimale), 1fr)); /* 1 */
|
|
gap: 1px;
|
|
place-items: center;
|
|
}
|
|
#menu-categories-produits ul li {
|
|
inline-size: 100%;
|
|
font-weight: 500;
|
|
font-style: italic;
|
|
color: var(--couleur-gris);
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
letter-spacing: var(--espacement-inter-lettres-etendu-m);
|
|
background: var(--couleur-noir);
|
|
}
|
|
#menu-categories-produits ul li:hover {
|
|
background: var(--couleur-gris);
|
|
}
|
|
#menu-categories-produits ul li a {
|
|
display: inline-block;
|
|
inline-size: inherit;
|
|
padding: var(--menu-entree-marges-internes-ligne) 0;
|
|
text-decoration: none;
|
|
}
|
|
#menu-categories-produits ul li a:focus-visible {
|
|
outline-color: var(--couleur-blanc);
|
|
}
|
|
@media (hover: hover) {
|
|
#menu-categories-produits ul li a:hover {
|
|
color: var(--couleur-noir);
|
|
background: var(--arriere-plan-points);
|
|
}
|
|
}
|
|
#menu-categories-produits ul li.categorie-courante {
|
|
background: var(--couleur-gris);
|
|
}
|
|
#menu-categories-produits ul li.categorie-courante a {
|
|
font-weight: 600;
|
|
color: var(--couleur-noir);
|
|
background: var(--arriere-plan-points);
|
|
}
|
|
#menu-categories-produits ul li.categorie-courante a:focus-visible {
|
|
outline-color: var(--couleur-noir);
|
|
}
|
|
@media (hover: hover) {
|
|
#menu-categories-produits ul li.categorie-courante a:hover {
|
|
background: var(--arriere-plan-points);
|
|
}
|
|
}
|
|
@media (width <= 1000px) {
|
|
#menu-categories-produits ul {
|
|
--menu-entree-marges-internes-ligne: var(--espace-s);
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
font-size: 0.8rem;
|
|
}
|
|
#menu-categories-produits ul li {
|
|
flex-grow: 1;
|
|
inline-size: min(140px, 100%);
|
|
}
|
|
#menu-categories-produits ul li a {
|
|
inline-size: 100%;
|
|
border: initial;
|
|
}
|
|
}
|
|
@media (width <= 600px) {
|
|
#menu-categories-produits ul {
|
|
scrollbar-width: none;
|
|
overflow-x: scroll;
|
|
flex-flow: row nowrap;
|
|
}
|
|
#menu-categories-produits ul li {
|
|
inline-size: initial;
|
|
min-inline-size: 140px;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Les photos du Produit, étalées sur 2 colonnes : une pour la photo Produit, une pour les photos
|
|
* portées.
|
|
*
|
|
* La colonne de gauche ne contiendra qu'une photo, et restera fixe tout le long du défilement
|
|
* de la boîte. La colonne de droite contiendra plusieurs photos et défilera normalement, photo par * photo.
|
|
*/
|
|
.photos-produit {
|
|
--colonne-gauche-position-haut: var(--menu-categories-produits-hauteur);
|
|
--colonne-gauche-photo-hauteur: calc(100svh - var(--menu-categories-produits-hauteur));
|
|
--colonne-droite-photo-hauteur-minimale: calc(
|
|
100svh + var(--en-tete-hauteur) + var(--menu-categories-produits-hauteur)
|
|
);
|
|
--colonne-photo-longueur-minimale: 30rem;
|
|
--section-marges-externes-bloc-fin: 1rem;
|
|
position: relative;
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
max-width: 100%;
|
|
}
|
|
.photos-produit .colonne {
|
|
position: relative;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
flex-grow: 1;
|
|
width: min(var(--colonne-photo-longueur-minimale), 100%);
|
|
}
|
|
.photos-produit .colonne.colonne-gauche {
|
|
position: sticky;
|
|
top: var(--colonne-gauche-position-haut);
|
|
height: var(--colonne-gauche-photo-hauteur);
|
|
}
|
|
.photos-produit .colonne.colonne-gauche figure,
|
|
.photos-produit .colonne.colonne-gauche picture,
|
|
.photos-produit .colonne.colonne-gauche img {
|
|
height: 100%;
|
|
}
|
|
.photos-produit .colonne.colonne-droite img {
|
|
width: 100%;
|
|
max-height: var(--colonne-droite-photo-hauteur-minimale);
|
|
}
|
|
.photos-produit .colonne.colonne-droite figure picture img:only-child {
|
|
min-height: var(--colonne-droite-photo-hauteur-minimale);
|
|
max-height: var(--colonne-droite-photo-hauteur-minimale);
|
|
}
|
|
@media (width <= 60rem) {
|
|
.photos-produit {
|
|
--colonne-droite-photo-hauteur-minimale: var(--photo-hauteur-maximum);
|
|
--photo-longueur-maximum: calc(100% - var(--espace-xl));
|
|
/* --photo-hauteur-maximum: calc(100svh - var(--en-tete-hauteur) - 10vh); */
|
|
--photo-hauteur-maximum: calc(100svh - var(--en-tete-hauteur) - 87px);
|
|
scroll-behavior: smooth;
|
|
scrollbar-width: none;
|
|
scroll-snap-type: x mandatory;
|
|
overflow-x: scroll;
|
|
flex-flow: row nowrap;
|
|
width: fit-content;
|
|
max-width: initial;
|
|
}
|
|
.photos-produit::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.photos-produit .colonne {
|
|
scroll-snap-type: x mandatory;
|
|
width: 100%;
|
|
min-width: 100%;
|
|
}
|
|
.photos-produit .colonne figure {
|
|
scroll-snap-align: none center;
|
|
}
|
|
.photos-produit .colonne img {
|
|
max-height: var(--photo-hauteur-maximum);
|
|
}
|
|
.photos-produit .colonne.colonne-gauche {
|
|
position: initial;
|
|
min-width: var(--photo-longueur-maximum);
|
|
height: initial;
|
|
}
|
|
.photos-produit .colonne.colonne-droite {
|
|
flex-flow: row nowrap;
|
|
}
|
|
.photos-produit .colonne.colonne-droite figure {
|
|
flex-grow: 1;
|
|
min-width: var(--photo-longueur-maximum);
|
|
}
|
|
.photos-produit .colonne.colonne-droite:has(figure:only-child) {
|
|
min-width: var(--photo-longueur-maximum);
|
|
}
|
|
}
|
|
|
|
/*
|
|
* La Grille des Produits sous forme de Cartes.
|
|
*
|
|
* Les Cartes ont une taille minimale et occupent l'espace en ligne disponible jusqu'à l'occuper
|
|
* entièrement.
|
|
* Quand il n'y a plus d'espace disponible pour une nouvelle Carte à longueur minimale, celle-ci
|
|
* se dispose sur une nouvelle ligne.
|
|
*
|
|
* 1. Taille minimale avec un nombre magique pour une disposition sur 3 colonnes en 1920p.
|
|
* 2. Un espacement inter-carte avec une ombre permet des bordures se superposant (« border
|
|
* collapse »).
|
|
*/
|
|
.grille-produits {
|
|
--grille-produits-hauteur-minimale: var(--contenu-page-hauteur-minimale-avec-categories);
|
|
--aucun-produit-hauteur: var(--contenu-page-hauteur-minimale-avec-categories);
|
|
--carte-produit-longueur-minimale: 448px;
|
|
--carte-produit-longueur-maximale: 1000px;
|
|
display: grid;
|
|
grid-auto-rows: 1fr;
|
|
grid-template-columns:
|
|
repeat(auto-fit, minmax(var(--carte-produit-longueur-minimale), 1fr)); /* 1 */
|
|
gap: 1px; /* 2 */
|
|
min-height: var(--grille-produits-hauteur-minimale);
|
|
}
|
|
.grille-produits article {
|
|
max-width: var(--carte-produit-longueur-maximale);
|
|
box-shadow: 0 0 0 1px var(--couleur-noir); /* 2 */
|
|
}
|
|
.grille-produits article figure {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
row-gap: var(--espace-xl);
|
|
}
|
|
.grille-produits article figure a {
|
|
position: relative;
|
|
}
|
|
@media (hover: hover) {
|
|
.grille-produits article figure a:hover .produit__illustration__survol {
|
|
visibility: visible;
|
|
opacity: 100%;
|
|
transition: 0.3s opacity, 0.3s visibility;
|
|
}
|
|
}
|
|
.grille-produits article figure img {
|
|
position: inherit;
|
|
aspect-ratio: 9/16;
|
|
width: 100%;
|
|
max-height: 70vh;
|
|
object-fit: cover;
|
|
background: transparent;
|
|
}
|
|
.grille-produits article figure .produit__illustration__principale {
|
|
display: block;
|
|
}
|
|
.grille-produits article figure .produit__illustration__principale::before {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: -1;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0%;
|
|
background-image: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-gris.svg");
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 50%;
|
|
filter: opacity(20%);
|
|
animation: 1.5s 0.5s test infinite alternate both linear;
|
|
}
|
|
.grille-produits article figure .produit__illustration__principale img {
|
|
opacity: 0%;
|
|
transition: opacity 1s;
|
|
}
|
|
.grille-produits article figure .produit__illustration__survol {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
visibility: hidden;
|
|
opacity: 0%;
|
|
transition: 0.15s opacity, 0.15s visibility;
|
|
}
|
|
.grille-produits article figure .produit__illustration__survol img {
|
|
background: var(--couleur-gris-fond);
|
|
}
|
|
.grille-produits article figure figcaption {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--espace-xl);
|
|
padding: var(--espace-m);
|
|
}
|
|
.grille-produits article figure figcaption h3 {
|
|
font-style: italic;
|
|
letter-spacing: var(--espacement-inter-lettres-etendu-m);
|
|
}
|
|
.grille-produits article figure figcaption p {
|
|
font-weight: 500;
|
|
letter-spacing: var(--espacement-inter-lettres-rapproche-s);
|
|
}
|
|
.grille-produits__aucun-produit {
|
|
grid-column: span 3;
|
|
align-content: center;
|
|
min-height: var(--aucun-produit-hauteur);
|
|
text-align: center;
|
|
}
|
|
.grille-produits__aucun-produit p + p {
|
|
margin-top: var(--espace-l);
|
|
font-size: 1.25rem;
|
|
}
|
|
@media (width <= 700px) {
|
|
.grille-produits {
|
|
grid-template-columns: 100%;
|
|
}
|
|
.grille-produits article figure img {
|
|
max-height: 50svh;
|
|
}
|
|
}
|
|
|
|
@keyframes test {
|
|
to {
|
|
opacity: 100%;
|
|
}
|
|
}
|
|
/*
|
|
* Boîte flottante avec le nom du Produit, le sélecteur de variation et de quantité pour
|
|
* le Panier.
|
|
*/
|
|
.resume-produit {
|
|
--resume-position-basse: 0%;
|
|
--section-marges-internes: var(--espace-l);
|
|
--espace-inter-colonne: var(--espace-xl);
|
|
--resume-police-graisse: 500;
|
|
--resume-police-style: italic;
|
|
--resume-police-taille: var(--espace-l);
|
|
--resume-police-nom-taille: 1.33rem;
|
|
--resume-police-selecteur-graisse: 400;
|
|
--resume-police-selecteur-taille: var(--espace-m);
|
|
position: sticky;
|
|
bottom: var(--resume-position-basse);
|
|
/* Nom du Produit, sélecteur de variation et prix du Produit */
|
|
}
|
|
.resume-produit .selecteur-produit {
|
|
position: relative;
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
column-gap: var(--espace-inter-colonne);
|
|
place-items: center;
|
|
border-block: 1px solid var(--couleur-noir);
|
|
font-size: var(--resume-police-taille);
|
|
font-weight: var(--resume-police-graisse);
|
|
font-style: var(--resume-police-style);
|
|
line-height: var(--hauteur-ligne-compacte);
|
|
background: var(--couleur-blanc-fond);
|
|
}
|
|
.resume-produit .selecteur-produit > * {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
place-content: center;
|
|
place-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: var(--section-marges-internes);
|
|
}
|
|
.resume-produit .selecteur-produit > *:nth-child(2) {
|
|
border-inline-start: 1px solid var(--couleur-noir);
|
|
border-inline-end: 1px solid var(--couleur-noir);
|
|
}
|
|
.resume-produit .selecteur-produit__nom {
|
|
font-size: var(--resume-police-nom-taille);
|
|
}
|
|
.resume-produit .selecteur-produit__attribut-variation {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
gap: var(--espace-m) var(--espace-l);
|
|
font-size: var(--resume-police-selecteur-taille);
|
|
font-weight: var(--resume-police-selecteur-graisse);
|
|
text-transform: lowercase;
|
|
/* Texte du sélecteur */
|
|
}
|
|
.resume-produit .selecteur-produit__attribut-variation label {
|
|
margin-right: var(--espace-s);
|
|
}
|
|
.resume-produit .selecteur-produit__attribut-variation select {
|
|
position: relative;
|
|
padding: var(--espace-xs) var(--espace-l);
|
|
border: 1px solid var(--couleur-noir);
|
|
text-align: center;
|
|
letter-spacing: initial;
|
|
appearance: none;
|
|
background: var(--couleur-gris-fond);
|
|
}
|
|
@supports selector(:user-valid) {
|
|
.resume-produit .selecteur-produit__attribut-variation select:user-valid {
|
|
background: var(--couleur-gris-fond);
|
|
}
|
|
}
|
|
.resume-produit .selecteur-produit__attribut-variation option {
|
|
background: var(--couleur-gris-fond);
|
|
}
|
|
.resume-produit .selecteur-produit__attribut-variation {
|
|
/* Conteneur des sélecteurs */
|
|
}
|
|
.resume-produit .selecteur-produit__attribut-variation__selecteurs {
|
|
position: relative;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
gap: var(--espace-m);
|
|
place-content: center;
|
|
place-items: center;
|
|
}
|
|
.resume-produit .selecteur-produit__prix {
|
|
font-style: initial;
|
|
}
|
|
@media (width <= 800px) {
|
|
.resume-produit {
|
|
--section-marges-internes: var(--espace-m);
|
|
--espace-inter-colonne: var(--espace-m);
|
|
}
|
|
}
|
|
@media (width <= 700px) {
|
|
.resume-produit {
|
|
--resume-police-taille: var(--espace-m);
|
|
--resume-police-nom-taille: var(--espace-m);
|
|
--section-marges-internes: var(--espace-m);
|
|
--espace-inter-colonne: var(--espace-s);
|
|
}
|
|
}
|
|
@media (width <= 500px) {
|
|
.resume-produit .selecteur-produit__selection-variation-attribut {
|
|
flex-flow: column nowrap;
|
|
row-gap: var(--espace-inter-colonne);
|
|
}
|
|
.resume-produit .selecteur-produit__selection-variation-attribut h3 {
|
|
flex-basis: 100%;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Suite de paragraphes détaillant le produit, les conditions de livraison et les conseils d'entretien.
|
|
* Elle fait suite aux photos.
|
|
*/
|
|
.details-produit {
|
|
--bouton-marges-internes-bloc: var(--espace-l);
|
|
--espace-inter-lignes: var(--espace-l);
|
|
--espace-inter-texte: var(--espace-m);
|
|
--section-marges-internes: var(--espace-l);
|
|
--textuel-marges-internes-ligne: calc(var(--espace-l) * 2);
|
|
background-color: var(--couleur-blanc);
|
|
}
|
|
.details-produit__textes {
|
|
display: grid;
|
|
grid-auto-flow: row;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.details-produit__textes .section-textuelle:not(:last-of-type) {
|
|
border-block-end: 1px solid var(--couleur-noir);
|
|
}
|
|
.details-produit__textes
|
|
.section-textuelle:has(button[aria-expanded="false"])
|
|
.section-textuelle__contenu {
|
|
display: none;
|
|
}
|
|
.details-produit__textes .section-textuelle h3 {
|
|
line-height: var(--hauteur-ligne-rapprochee);
|
|
}
|
|
.details-produit__textes .section-textuelle h3 button {
|
|
display: inline-block;
|
|
width: 100%;
|
|
min-block-size: 1lh;
|
|
padding: var(--section-marges-internes);
|
|
text-align: start;
|
|
}
|
|
.details-produit__textes .section-textuelle h3 button:active {
|
|
background: var(--arriere-plan-points);
|
|
}
|
|
@media (hover: hover) {
|
|
.details-produit__textes .section-textuelle h3 button:hover {
|
|
color: inherit;
|
|
background: inherit;
|
|
}
|
|
}
|
|
.details-produit__textes .section-textuelle .section-textuelle__contenu {
|
|
padding-block-end: var(--section-marges-internes);
|
|
padding-inline: var(--textuel-marges-internes-ligne);
|
|
}
|
|
.details-produit__textes .section-textuelle .section-textuelle__contenu ul {
|
|
list-style: disc;
|
|
list-style-position: inside;
|
|
}
|
|
.details-produit__textes .section-textuelle .section-textuelle__contenu a {
|
|
text-decoration-color: var(--couleur-noir);
|
|
}
|
|
.details-produit__textes .section-textuelle .section-textuelle__contenu > * + * {
|
|
margin-top: var(--espace-inter-texte);
|
|
}
|
|
.details-produit__actions {
|
|
--section-marges-internes: var(--espace-l);
|
|
overflow: hidden;
|
|
border-block: 1px solid var(--couleur-noir);
|
|
background: var(--arriere-plan-points);
|
|
transition: 0.2s background;
|
|
}
|
|
.details-produit__actions:has(button[disabled]) {
|
|
background: var(--couleur-gris-fond);
|
|
}
|
|
.details-produit__actions button {
|
|
padding: var(--section-marges-internes);
|
|
font-style: italic;
|
|
text-transform: uppercase;
|
|
}
|
|
@media (hover: hover) {
|
|
.details-produit__actions button:not([disabled]):hover {
|
|
font-weight: 600;
|
|
color: var(--couleur-blanc);
|
|
background: var(--couleur-gris-fonce-fond);
|
|
}
|
|
}
|
|
|
|
.produits-similaires {
|
|
--carte-produit-longueur-minimale: 448px;
|
|
--carte-produit-longueur-maximale: 1000px;
|
|
--en-tete-flottante-hauteur: calc(1rem + var(--espace-l) * 2 + 1px);
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-areas: "en-tete en-tete en-tete" "produits produits produits";
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-template-rows: 1fr auto;
|
|
place-items: center;
|
|
/* En-tête de la section */
|
|
}
|
|
.produits-similaires header {
|
|
position: sticky;
|
|
z-index: 10;
|
|
top: var(--en-tete-flottante-hauteur);
|
|
grid-area: en-tete;
|
|
width: 100%;
|
|
padding: var(--espace-l) 0;
|
|
color: var(--couleur-blanc);
|
|
text-align: center;
|
|
background: var(--couleur-noir);
|
|
}
|
|
.produits-similaires header h2 {
|
|
font-style: italic;
|
|
line-height: var(--hauteur-ligne-rapprochee);
|
|
text-transform: uppercase;
|
|
letter-spacing: var(--espacement-inter-lettres-etendu-m);
|
|
}
|
|
.produits-similaires .grille-produits-similaires {
|
|
display: grid;
|
|
grid-area: produits;
|
|
grid-auto-rows: 1fr;
|
|
grid-template-columns: repeat(auto-fit, minmax(var(--carte-produit-longueur-minimale), 1fr));
|
|
gap: 1px;
|
|
width: 100%;
|
|
}
|
|
.produits-similaires .grille-produits-similaires article {
|
|
max-width: var(--carte-produit-longueur-maximale);
|
|
box-shadow: 0 0 0 1px var(--couleur-noir);
|
|
}
|
|
.produits-similaires .grille-produits-similaires article figure {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
row-gap: var(--espace-xl);
|
|
}
|
|
.produits-similaires .grille-produits-similaires article figure a {
|
|
position: relative;
|
|
}
|
|
@media (hover: hover) {
|
|
.produits-similaires
|
|
.grille-produits-similaires
|
|
article figure a:hover
|
|
.produit__illustration__survol {
|
|
visibility: visible;
|
|
opacity: 100%;
|
|
transition: 0.3s opacity, 0.3s visibility;
|
|
}
|
|
}
|
|
.produits-similaires .grille-produits-similaires article figure .produit__illustration__principale {
|
|
display: block;
|
|
}
|
|
.produits-similaires .grille-produits-similaires article figure .produit__illustration__survol {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
visibility: hidden;
|
|
opacity: 0%;
|
|
transition: 0.15s opacity, 0.15s visibility;
|
|
}
|
|
.produits-similaires .grille-produits-similaires article figure img {
|
|
aspect-ratio: 9/16;
|
|
width: 100%;
|
|
max-height: 70svh;
|
|
object-fit: cover;
|
|
}
|
|
.produits-similaires .grille-produits-similaires article figure figcaption {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--espace-xl);
|
|
padding: 0 var(--espace-m);
|
|
}
|
|
.produits-similaires .grille-produits-similaires article figure figcaption h3 {
|
|
font-style: italic;
|
|
letter-spacing: var(--espacement-inter-lettres-etendu-m);
|
|
}
|
|
.produits-similaires .grille-produits-similaires article figure figcaption p {
|
|
font-weight: 500;
|
|
letter-spacing: var(--espacement-inter-lettres-rapproche-s);
|
|
}
|
|
@media (width <= 700px) {
|
|
.produits-similaires .grille-produits-similaires {
|
|
grid-template-columns: 100%;
|
|
}
|
|
.produits-similaires .grille-produits-similaires article figure img {
|
|
max-height: 50svh;
|
|
}
|
|
}
|
|
|
|
#pied-de-page {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
place-items: center;
|
|
max-width: 100vw;
|
|
height: var(--pied-de-page-hauteur);
|
|
padding: var(--espace-s) var(--espace-m);
|
|
border-top: 1px solid var(--couleur-noir);
|
|
font-size: 0.8rem;
|
|
}
|
|
#pied-de-page .zone-menu-navigation-secondaire {
|
|
justify-self: start;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-transform: lowercase;
|
|
}
|
|
#pied-de-page .zone-liens-reseaux-sociaux {
|
|
justify-items: end;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: right;
|
|
}
|
|
|
|
/* # sourceMappingURL=main.css.map */
|