1452 lines
41 KiB
CSS
Executable file
1452 lines
41 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: #fff;
|
|
--couleur-blanc-fond: rgb(255 255 255 / 90%);
|
|
--couleur-gris: #eceaeb;
|
|
--couleur-gris-fonce: #808080;
|
|
--couleur-gris-fonce-fond: rgb(128 128 128 / 80%);
|
|
--couleur-bordeaux: #490918;
|
|
--couleur-bordeaux-fond: rgb(73 9 24 / 80%);
|
|
--couleur-jaune: #defdb5;
|
|
--couleur-jaune-fond: rgb(235 255 184 / 80%);
|
|
--couleur-noir: #202020;
|
|
--couleur-fond: rgb(236 234 235 / 80%);
|
|
/* 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 {
|
|
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-jaune); /* 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-jaune);
|
|
}
|
|
|
|
/* 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-kerning: normal;
|
|
font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures contextual;
|
|
-webkit-font-smoothing: antialiased; /* 2 */
|
|
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);
|
|
}
|
|
|
|
strong {
|
|
font-weight: 600;
|
|
}
|
|
|
|
em {
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Mixins Sass */
|
|
/*
|
|
* Réinitialisation des styles des <button>.
|
|
*/
|
|
button {
|
|
all: initial;
|
|
cursor: pointer;
|
|
box-sizing: border-box;
|
|
font-family: Lato;
|
|
text-align: center;
|
|
letter-spacing: inherit;
|
|
outline: 2px dashed transparent;
|
|
outline-offset: -2px;
|
|
transition: 0.2s background, 0.2s color, 0.2s outline-color;
|
|
}
|
|
button:not[disabled]:focus-visible {
|
|
z-index: 5;
|
|
outline-color: var(--couleur-noir);
|
|
}
|
|
button:not[disabled]:active {
|
|
color: var(--couleur-blanc) !important;
|
|
background: var(--couleur-noir) !important;
|
|
}
|
|
@media (hover: hover) {
|
|
button:not[disabled]:hover {
|
|
color: var(--couleur-noir);
|
|
background: var(--couleur-jaune);
|
|
}
|
|
}
|
|
button:disabled, button[disabled] {
|
|
background: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%) 1px 0.5px/2px 2px;
|
|
outline-color: transparent;
|
|
}
|
|
button.bouton-case-pleine {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
button.bouton-case-pleine.bouton-blanc-sur-noir {
|
|
font-style: italic;
|
|
text-transform: uppercase;
|
|
letter-spacing: var(--espacement-inter-lettres-etendu-m);
|
|
}
|
|
button.bouton-case-pleine.bouton-blanc-sur-noir:focus-visible {
|
|
color: var(--couleur-noir);
|
|
background: var(--couleur-jaune);
|
|
}
|
|
button.bouton-blanc-sur-noir {
|
|
color: var(--couleur-blanc);
|
|
background: var(--couleur-noir);
|
|
}
|
|
@media (hover: hover) {
|
|
button.bouton-fleche {
|
|
background: initial;
|
|
}
|
|
}
|
|
button.bouton-retour-haut {
|
|
position: fixed;
|
|
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-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: 0.6;
|
|
}
|
|
@media (hover: hover) {
|
|
button.bouton-retour-haut[data-actif]:hover {
|
|
opacity: 1;
|
|
background: var(--couleur-jaune-fond);
|
|
}
|
|
}
|
|
|
|
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-jaune);
|
|
background: var(--couleur-gris);
|
|
transition: 0.2s background;
|
|
}
|
|
input:focus-visible, input:focus-within, input:active, select:focus-visible, select:focus-within, select:active, textarea:focus-visible, textarea:focus-within, textarea:active {
|
|
z-index: 10;
|
|
outline: 2px dashed var(--couleur-noir);
|
|
}
|
|
input:disabled, input[disabled], select:disabled, select[disabled], textarea:disabled, textarea[disabled] {
|
|
background: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%) 1px 0.5px/2px 2px;
|
|
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 {
|
|
background: var(--couleur-jaune);
|
|
}
|
|
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 {
|
|
background: var(--couleur-jaune);
|
|
}
|
|
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(--couleur-jaune);
|
|
}
|
|
}
|
|
|
|
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-jaune); /* 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-jaune);
|
|
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-jaune);
|
|
background: var(--couleur-jaune);
|
|
}
|
|
@media (hover: hover) {
|
|
a.lien-lien:hover {
|
|
text-decoration-color: var(--couleur-jaune);
|
|
background: var(--couleur-jaune);
|
|
}
|
|
}
|
|
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 */
|
|
}
|
|
|
|
/* * 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-jaune);
|
|
}
|
|
.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-jaune);
|
|
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-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: 1;
|
|
}
|
|
}
|
|
@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);
|
|
}
|
|
#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.svg") center/auto 90% no-repeat;
|
|
}
|
|
#en-tete .menu-navigation__entree--courante {
|
|
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche.svg") center/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.svg") center/auto 90% no-repeat;
|
|
}
|
|
}
|
|
@media (width <= 1000px) {
|
|
#en-tete .menu-navigation#menu-navigation-en-tete {
|
|
display: none;
|
|
}
|
|
}
|
|
#en-tete .compte-panier {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
gap: 1rem;
|
|
place-items: center;
|
|
text-align: center;
|
|
}
|
|
#en-tete .compte-panier[disabled] {
|
|
background: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%) 1px 0.5px/2px 2px;
|
|
}
|
|
#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);
|
|
background: initial;
|
|
}
|
|
#en-tete .compte-panier a {
|
|
text-transform: lowercase;
|
|
padding-block: var(--espace-2xs);
|
|
padding-inline: var(--espace-s);
|
|
}
|
|
#en-tete .compte-panier a.lien-compte {
|
|
border-color: transparent;
|
|
}
|
|
#en-tete .compte-panier a[data-contient-articles=true] {
|
|
background: var(--couleur-jaune);
|
|
}
|
|
#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 (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.
|
|
*
|
|
* 1. Applique une marge supérieure égale à la hauteur de l'en-tête pour qu'elle puisse s'afficher
|
|
* correctement.
|
|
*/
|
|
#menu-categories-produits {
|
|
/* Dimensions */
|
|
--menu-entree-longueur-minimale: 13ch;
|
|
--menu-section-marges-bloc-debut: var(--en-tete-hauteur); /* 1 */
|
|
--menu-entree-marges-internes-ligne: var(--espace-m);
|
|
position: relative;
|
|
margin-top: var(--menu-section-marges-bloc-debut); /* 1 */
|
|
}
|
|
#menu-categories-produits[data-entrees-presentes-debut] svg:first-of-type {
|
|
opacity: 1;
|
|
}
|
|
#menu-categories-produits[data-entrees-presentes-fin] svg:last-of-type {
|
|
opacity: 1;
|
|
}
|
|
#menu-categories-produits svg {
|
|
pointer-events: none;
|
|
position: absolute;
|
|
bottom: calc(17.59px - 0.35rem);
|
|
width: 0.8rem;
|
|
height: 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;
|
|
/*
|
|
* 1. Force chaque entrée à occuper tout l'espace alloué par grid.
|
|
*/
|
|
}
|
|
#menu-categories-produits ul li {
|
|
width: 100%; /* 1 */
|
|
font-weight: 450;
|
|
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.categorie-courante a {
|
|
font-weight: 600;
|
|
color: var(--couleur-noir);
|
|
background: var(--couleur-jaune);
|
|
}
|
|
@media (hover: hover) {
|
|
#menu-categories-produits ul li.categorie-courante a:hover {
|
|
color: var(--couleur-noir);
|
|
}
|
|
}
|
|
#menu-categories-produits ul li {
|
|
/*
|
|
* 1. Permet de créer des marges verticales.
|
|
* 2. Hérite de la longueur du conteneur.
|
|
* 3. Surchargement de styles pour les liens.
|
|
*/
|
|
}
|
|
#menu-categories-produits ul li a {
|
|
display: inline-block; /* 1 */
|
|
width: inherit; /* 2 */
|
|
padding: var(--menu-entree-marges-internes-ligne) 0;
|
|
text-decoration: none;
|
|
outline: initial; /* 3 */
|
|
}
|
|
#menu-categories-produits ul li a:focus-visible {
|
|
color: var(--couleur-jaune);
|
|
outline: initial; /* 3 */
|
|
}
|
|
@media (hover: hover) {
|
|
#menu-categories-produits ul li a:hover {
|
|
color: var(--couleur-noir);
|
|
background: var(--couleur-jaune);
|
|
}
|
|
}
|
|
@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;
|
|
width: min(140px, 100%);
|
|
}
|
|
#menu-categories-produits ul li a {
|
|
width: 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 {
|
|
width: initial;
|
|
min-width: 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: 1;
|
|
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-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: 1;
|
|
}
|
|
}
|
|
/*
|
|
* 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__selection-variation {
|
|
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__selection-variation label {
|
|
margin-right: var(--espace-s);
|
|
}
|
|
.resume-produit .selecteur-produit__selection-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-fond);
|
|
}
|
|
@supports selector(:user-valid) {
|
|
.resume-produit .selecteur-produit__selection-variation select:user-valid {
|
|
background: var(--couleur-jaune-fond);
|
|
}
|
|
}
|
|
.resume-produit .selecteur-produit__selection-variation option {
|
|
background: var(--couleur-fond);
|
|
}
|
|
.resume-produit .selecteur-produit__selection-variation {
|
|
/* Conteneur des sélecteurs */
|
|
}
|
|
.resume-produit .selecteur-produit__selection-variation__selecteurs {
|
|
position: relative;
|
|
/* Icône de flèche descendante */
|
|
}
|
|
.resume-produit .selecteur-produit__selection-variation__selecteurs::after {
|
|
pointer-events: none;
|
|
content: " ";
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 0.4rem;
|
|
display: inline-block;
|
|
width: 0.9rem;
|
|
height: 0.9rem;
|
|
text-align: center;
|
|
visibility: visible;
|
|
opacity: 1;
|
|
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/arrow.svg") no-repeat;
|
|
transition: opacity 0.2s, visibility 0.2s;
|
|
}
|
|
@supports not selector(:user-valid) {
|
|
.resume-produit .selecteur-produit__selection-variation__selecteurs:has(select:valid)::after {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@supports selector(:user-valid) {
|
|
.resume-produit .selecteur-produit__selection-variation__selecteurs:has(select:user-valid)::after {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.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 {
|
|
flex-flow: column nowrap;
|
|
row-gap: var(--espace-inter-colonne);
|
|
}
|
|
.resume-produit .selecteur-produit__selection-variation 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 .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(--couleur-jaune);
|
|
transition: 0.2s background;
|
|
}
|
|
.details-produit__actions:has(button[disabled]) {
|
|
background: var(--couleur-fond);
|
|
}
|
|
.details-produit__actions button {
|
|
height: initial;
|
|
padding: var(--section-marges-internes);
|
|
font-style: italic;
|
|
text-transform: uppercase;
|
|
transition: 0.2s background, 0.2s font-weight;
|
|
}
|
|
@media (hover: hover) {
|
|
.details-produit__actions button:not([disabled]):hover {
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.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: 1;
|
|
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;
|
|
background: var(--couleur-jaune);
|
|
}
|
|
#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 */
|