1171 lines
36 KiB
CSS
1171 lines
36 KiB
CSS
@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.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable.ttf") format("truetype");
|
|
unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-036F, U+0374-0375, U+037A-037E, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CE, U+03D0-0486, U+0488-0513, U+0E3F, U+102D, U+102F, U+1031, U+1D00-1DCA, U+1DFE-1E9B, U+1E9E, U+1EA0-1EF9, U+1F00-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2000-2010, U+2012-2022, U+2026, U+202F-2030, U+2032-2034, U+2039-203A, U+203C-203E, U+2044, U+205E-205F, U+2070-2071, U+2074-208E, U+2090-2094, U+2099, U+20A0-20B5, U+20B8-20BA, U+20DD, U+2105, U+2113, U+2116-2117, U+2120, U+2122, U+2126, U+212E, U+2132, U+214D-214E, U+2153-215F, U+2183-2184, U+2190-2199, U+21A8, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E-221F, U+2229, U+222B, U+2248, U+2260-2261, U+2264-2265, U+2302, U+2310, U+2320-2321, U+2460-2473, U+24EA-24F4, U+24FF-2500, U+2502, U+250C, U+2510, U+2514, U+2518, U+25A1, U+25AA-25AB, U+25CA-25CC, U+25CF, U+25E6, U+2600, U+263C, U+2669, U+2776-277F, U+2C60-2C6C, U+2C74-2C77, U+2E17, U+A717-A71A, U+A720-A721, U+F8FF, U+FB00-FB04, U+FB06, U+FE20-FE23, U+FEFF;
|
|
}
|
|
@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.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic.ttf") format("truetype");
|
|
unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-036F, U+0374-0375, U+037A-037E, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CE, U+03D0-0486, U+0488-0513, U+0E3F, U+102D, U+102F, U+1031, U+1D00-1DCA, U+1DFE-1E9B, U+1E9E, U+1EA0-1EF9, U+1F00-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2000-2010, U+2012-2022, U+2026, U+202F-2030, U+2032-2034, U+2039-203A, U+203C-203E, U+2044, U+205E-205F, U+2070-2071, U+2074-208E, U+2090-2094, U+2099, U+20A0-20B5, U+20B8-20BA, U+20DD, U+2105, U+2113, U+2116-2117, U+2120, U+2122, U+2126, U+212E, U+2132, U+214D-214E, U+2153-215F, U+2183-2184, U+2190-2199, U+21A8, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E-221F, U+2229, U+222B, U+2248, U+2260-2261, U+2264-2265, U+2302, U+2310, U+2320-2321, U+2460-2473, U+24EA-24F4, U+24FF-2500, U+2502, U+250C, U+2510, U+2514, U+2518, U+25A1, U+25AA-25AB, U+25CA-25CC, U+25CF, U+25E6, U+2600, U+263C, U+2669, U+2776-277F, U+2C60-2C6C, U+2C74-2C77, U+2E17, U+A717-A71A, U+A720-A721, U+F8FF, U+FB00-FB04, U+FB06, U+FE20-FE23, U+FEFF;
|
|
}
|
|
@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: #ffffff;
|
|
--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: #ebffb8;
|
|
--couleur-jaune-fond: rgb(235 255 184 / 80%);
|
|
--couleur-noir: #202020;
|
|
--couleur-fond: rgb(236 234 235 / 80%);
|
|
/* Polices */
|
|
--police-lato: "Lato", sans-serif;
|
|
--police-myriad: "Myriad", sans-serif;
|
|
/* Hauteurs de ligne */
|
|
--hauteur-ligne-classique: 1.5;
|
|
--hauteur-ligne-rapprochee: 1;
|
|
/* Espacements entre les lettres */
|
|
--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: 60px;
|
|
--menu-categories-produits-hauteur: 54.39px;
|
|
--pied-de-page-hauteur: calc(var(--espace-m) * 2 + 3lh);
|
|
--contenu-page-hauteur-minimale: calc(
|
|
100svh - var(--en-tete-hauteur) - var(--pied-de-page-hauteur)
|
|
- var(--menu-categories-produits-hauteur)
|
|
);
|
|
/* Espacements */
|
|
--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 */
|
|
}
|
|
|
|
/*
|
|
* 1. Utilise une couleur d'arrière-plan définie.
|
|
* 2. Utilise la couleur primaire du site.
|
|
*/
|
|
body {
|
|
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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|
|
/*
|
|
* 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;
|
|
font-family: Lato;
|
|
text-align: center;
|
|
letter-spacing: inherit;
|
|
}
|
|
button.bouton-case-pleine {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
button.bouton-case-pleine--blanc-sur-noir {
|
|
font-style: italic;
|
|
color: var(--couleur-blanc);
|
|
text-transform: uppercase;
|
|
letter-spacing: var(--espacement-inter-lettres-etendu-m);
|
|
background: var(--couleur-noir);
|
|
}
|
|
button:disabled, button[disabled] {
|
|
background: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%) 1px 0.5px/2px 2px;
|
|
}
|
|
|
|
input, select, textarea {
|
|
padding: var(--espace-xs);
|
|
background: var(--couleur-gris);
|
|
border: 1px solid var(--couleur-noir);
|
|
outline: 1px solid transparent;
|
|
transition: 0.2s background, 0.2s outline;
|
|
}
|
|
input:focus, input:focus-visible, select:focus, select:focus-visible, textarea:focus, textarea:focus-visible {
|
|
background: var(--couleur-jaune);
|
|
outline: 1px solid var(--couleur-noir);
|
|
}
|
|
input:disabled, input[disabled], select:disabled, select[disabled], textarea:disabled, textarea[disabled] {
|
|
cursor: not-allowed;
|
|
background: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%) 1px 0.5px/2px 2px;
|
|
}
|
|
|
|
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;
|
|
appearance: none;
|
|
border: 1px solid var(--couleur-noir);
|
|
transition: 0.2s background;
|
|
/*
|
|
* 1. Pour un alignement parfait du label avec la case à cocher.
|
|
*/
|
|
}
|
|
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: 15%;
|
|
left: 29%;
|
|
}
|
|
label:has(~ input[type=checkbox], ~ input[type=radio]), input[type=checkbox] + label, input[type=radio] + label {
|
|
padding-top: 1px; /* 1 */
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/*
|
|
* 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 */
|
|
outline: 1px solid transparent; /* 2 */
|
|
outline-offset: initial; /* 2 */
|
|
transition: 0.2s color, 0.2s font-weight, 0.2s background, 0.2s outline-color, 0.2s border-color, 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. */
|
|
/* Lien ressemblant visuellement à un bouton. */
|
|
/* Lien ressemblant à... un lien. */
|
|
/* Styles pour les liens par défaut */
|
|
}
|
|
a:focus, a:focus-visible {
|
|
outline-color: var(--lien-contour-couleur-focus);
|
|
}
|
|
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. */
|
|
/* 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. */
|
|
/* Change la couleur de l'arrière-plan pour marquer le survol. */
|
|
}
|
|
a.lien-bouton:focus, a.lien-bouton:focus-visible {
|
|
background: var(--lien-bouton-arriere-plan-couleur-survol);
|
|
}
|
|
a.lien-bouton:active {
|
|
border-color: var(--lien-bouton-arriere-plan-couleur-survol);
|
|
}
|
|
@media (hover: hover) {
|
|
a.lien-bouton:hover {
|
|
background: var(--lien-bouton-arriere-plan-couleur-survol);
|
|
}
|
|
}
|
|
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);
|
|
}
|
|
}
|
|
@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 */
|
|
}
|
|
|
|
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);
|
|
opacity: 0;
|
|
background-color: var(--couleur-gris);
|
|
border-bottom: 1px solid var(--couleur-noir);
|
|
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 {
|
|
/* Marges */
|
|
--en-tete-marges-internes-ligne: var(--espace-xl);
|
|
--en-tete-marges-internes-bloc: var(--espace-m);
|
|
/* Dimensions */
|
|
--en-tete-section-hauteur: var(--en-tete-hauteur);
|
|
--en-tete-logo-longueur: 80px;
|
|
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);
|
|
background: var(--couleur-gris);
|
|
border-bottom: 1px solid var(--couleur-noir);
|
|
/* TODO: Déplacer au sein d'un Composant ? */
|
|
}
|
|
#en-tete .logo {
|
|
width: var(--en-tete-logo-longueur);
|
|
}
|
|
#en-tete .logo picture, #en-tete .logo img {
|
|
background: transparent;
|
|
}
|
|
#en-tete .logo button {
|
|
display: block;
|
|
align-content: center;
|
|
}
|
|
#en-tete .menu-navigation {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
flex: 1;
|
|
font-size: 1.1rem;
|
|
text-align: center;
|
|
text-transform: lowercase;
|
|
/*
|
|
* 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 ul {
|
|
display: flex;
|
|
grid-column: 2;
|
|
flex-flow: row nowrap;
|
|
gap: var(--espace-m);
|
|
justify-content: space-between;
|
|
}
|
|
#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 a {
|
|
display: inline-block; /* 1 */
|
|
padding: var(--nav-entree-marges-internes-bloc) var(--nav-entree-marges-internes-ligne); /* 2 */
|
|
text-align: center; /* 4 */
|
|
}
|
|
#en-tete .menu-navigation__entree--courante {
|
|
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud.svg") center/auto 90% no-repeat;
|
|
}
|
|
@media (hover: hover) {
|
|
#en-tete .menu-navigation__entree:hover {
|
|
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud.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;
|
|
/*
|
|
* 1. Permet d'éviter un agrandissement de l'élément avec plus de 9 articles.
|
|
*/
|
|
}
|
|
#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, #en-tete .compte-panier[disabled] a:focus-within {
|
|
background: initial;
|
|
border: 1px solid var(--couleur-noir);
|
|
outline: 1px solid transparent;
|
|
}
|
|
#en-tete .compte-panier a {
|
|
min-width: 10ch; /* 1 */
|
|
font-size: 1.1rem;
|
|
text-transform: lowercase;
|
|
}
|
|
#en-tete .compte-panier a.lien-compte {
|
|
border-color: transparent;
|
|
}
|
|
#en-tete .compte-panier a[data-contient-articles=true] {
|
|
background: var(--couleur-jaune);
|
|
}
|
|
|
|
/*
|
|
* 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-hauteur: var(--menu-categories-produits-hauteur);
|
|
/* Marges */
|
|
--menu-section-marges-bloc-debut: var(--en-tete-hauteur); /* 1 */
|
|
--menu-entree-marges-internes-ligne: var(--espace-m);
|
|
margin-top: var(--menu-section-marges-bloc-debut); /* 1 */
|
|
/*
|
|
* 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);
|
|
/*
|
|
* 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.categorie-courante a {
|
|
color: var(--couleur-jaune);
|
|
}
|
|
#menu-categories-produits ul li:active a {
|
|
font-weight: 500;
|
|
}
|
|
#menu-categories-produits ul li a {
|
|
display: inline-block; /* 1 */
|
|
width: inherit; /* 2 */
|
|
padding: var(--menu-entree-marges-internes-ligne) 0;
|
|
outline: initial; /* 3 */
|
|
}
|
|
#menu-categories-produits ul li a:focus, #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-jaune);
|
|
outline: initial; /* 3 */
|
|
}
|
|
}
|
|
@media (width <= 900px) {
|
|
#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;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* 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 {
|
|
/* Positions */
|
|
--colonne-gauche-position-haut: var(--menu-categories-produits-hauteur);
|
|
/* Dimensions */
|
|
--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;
|
|
/* Marges */
|
|
--section-marges-externes-bloc-fin: 1rem;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
max-width: 100%;
|
|
}
|
|
.photos-produit > section {
|
|
position: relative;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
flex-grow: 1;
|
|
width: min(var(--colonne-photo-longueur-minimale), 100%);
|
|
}
|
|
.photos-produit > section.colonne-gauche {
|
|
position: sticky;
|
|
top: var(--colonne-gauche-position-haut);
|
|
height: var(--colonne-gauche-photo-hauteur);
|
|
}
|
|
.photos-produit > section.colonne-gauche figure, .photos-produit > section.colonne-gauche picture, .photos-produit > section.colonne-gauche img {
|
|
height: 100%;
|
|
}
|
|
.photos-produit > section.colonne-droite img {
|
|
max-height: var(--colonne-droite-photo-hauteur-minimale);
|
|
}
|
|
.photos-produit > section.colonne-droite figure picture img:only-child {
|
|
min-height: var(--colonne-droite-photo-hauteur-minimale);
|
|
max-height: var(--colonne-droite-photo-hauteur-minimale);
|
|
}
|
|
|
|
/*
|
|
* 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);
|
|
--aucun-produit-hauteur: var(--contenu-page-hauteur-minimale);
|
|
--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);
|
|
padding: var(--espace-m);
|
|
}
|
|
.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 .produit__illustration__principale {
|
|
display: block;
|
|
}
|
|
.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 picture {
|
|
position: relative;
|
|
}
|
|
.grille-produits article figure picture::before {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-gris.svg");
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: contain;
|
|
filter: opacity(0%);
|
|
animation: 1s test infinite alternate both linear;
|
|
}
|
|
.grille-produits article figure img {
|
|
position: inherit;
|
|
z-index: 3;
|
|
aspect-ratio: 9/16;
|
|
width: 100%;
|
|
max-height: 70vh;
|
|
object-fit: cover;
|
|
background: transparent;
|
|
}
|
|
.grille-produits article figure figcaption {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--espace-xl);
|
|
}
|
|
.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 {
|
|
filter: opacity(30%);
|
|
}
|
|
}
|
|
/*
|
|
* Boîte flottante avec les informations Produit, le sélecteur de variation et de quantité pour le
|
|
* Panier.
|
|
*
|
|
* 1. Flotte toujours en bas de la page et s'arrête avant les Produits de la même collection.
|
|
* 2. Conteneur existant pour que le flottement sticky fonctionne ; n'a pas de dimensions.
|
|
* 3. Permet de mieux discerner le texte sur le fond transparent.
|
|
*/
|
|
.informations-produit {
|
|
--boite-position-basse: var(--espace-m);
|
|
--boite-longueur: 70ch;
|
|
--section-marges-internes: var(--espace-m);
|
|
--onglet-marges-internes: var(--espace-xl);
|
|
position: sticky; /* 1 */
|
|
bottom: var(--boite-position-basse); /* 1 */
|
|
overflow: visible;
|
|
width: 0; /* 2 */
|
|
height: 0; /* 2 */
|
|
font-weight: 450; /* 3 */
|
|
/* Nom du Produit, sélecteur de variation et prix du Produit */
|
|
/* Bouton « Ajouter au Panier » */
|
|
}
|
|
.informations-produit__conteneur {
|
|
position: relative;
|
|
transform: translate(calc(50vw - var(--boite-longueur) / 2), -100%);
|
|
display: grid;
|
|
width: var(--boite-longueur);
|
|
max-width: var(--boite-longueur);
|
|
/*
|
|
* Définis les apparence et comportement de toutes les sections de la boîte.
|
|
*/
|
|
}
|
|
.informations-produit__conteneur > section {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
height: 100%;
|
|
padding: var(--section-marges-internes);
|
|
background: var(--couleur-blanc-fond);
|
|
}
|
|
.informations-produit__conteneur > section + section {
|
|
border-top: 1px solid var(--couleur-noir);
|
|
}
|
|
.informations-produit .onglets-details-produit {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
grid-template-rows: auto min-content;
|
|
padding: initial;
|
|
}
|
|
.informations-produit .onglets-details-produit > section {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
transform: translateY(-100%);
|
|
overflow-y: auto;
|
|
grid-column: span 3;
|
|
padding: var(--onglet-marges-internes);
|
|
visibility: visible;
|
|
opacity: 1;
|
|
background: inherit;
|
|
border-color: var(--couleur-noir);
|
|
border-style: solid;
|
|
border-width: 1px 1px 0;
|
|
transition: 0.2s opacity, 0.2s visibility;
|
|
}
|
|
.informations-produit .onglets-details-produit > section[hidden] {
|
|
display: initial !important;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
.informations-produit .onglets-details-produit > section ul {
|
|
list-style: disc;
|
|
list-style-position: inside;
|
|
}
|
|
.informations-produit .onglets-details-produit > section a {
|
|
text-decoration-color: var(--couleur-noir);
|
|
}
|
|
.informations-produit .onglets-details-produit > section > * + * {
|
|
margin-top: 1rem;
|
|
}
|
|
.informations-produit .onglets-details-produit > ul {
|
|
display: grid;
|
|
grid-column: span 3;
|
|
grid-row: 2;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
text-align: center;
|
|
text-transform: lowercase;
|
|
letter-spacing: var(--espacement-inter-lettres-etendu-m);
|
|
}
|
|
.informations-produit .onglets-details-produit > ul li {
|
|
width: 100%;
|
|
}
|
|
.informations-produit .onglets-details-produit > ul li:first-of-type a {
|
|
border-right-color: transparent;
|
|
}
|
|
.informations-produit .onglets-details-produit > ul li:last-of-type a {
|
|
border-left-color: transparent;
|
|
}
|
|
.informations-produit .onglets-details-produit > ul li a {
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: var(--espace-xs) 0;
|
|
border-top: 1px solid var(--couleur-noir);
|
|
border-right: 1px solid var(--couleur-noir);
|
|
border-left: 1px solid var(--couleur-noir);
|
|
/* Quand l'onglet est sélectionné */
|
|
}
|
|
.informations-produit .onglets-details-produit > ul li a[aria-selected=true] {
|
|
border-top-color: transparent;
|
|
}
|
|
.informations-produit .onglets-details-produit > ul li a:focus, .informations-produit .onglets-details-produit > ul li a:focus-visible {
|
|
outline-color: transparent;
|
|
}
|
|
.informations-produit .onglets-details-produit:has(section:not([hidden])) > ul li a:not([aria-selected=true]) {
|
|
border-top-color: var(--couleur-noir);
|
|
}
|
|
.informations-produit .selecteur-produit {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
column-gap: var(--espace-xl);
|
|
place-items: center;
|
|
justify-content: space-between;
|
|
font-size: 1.25rem;
|
|
font-weight: 500;
|
|
font-style: italic;
|
|
line-height: var(--hauteur-ligne-rapprochee);
|
|
border-color: var(--couleur-noir);
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
}
|
|
.informations-produit .selecteur-produit__nom {
|
|
font-weight: 500;
|
|
letter-spacing: var(--espacement-inter-lettres-etendu-m);
|
|
}
|
|
.informations-produit .selecteur-produit__selection-variation {
|
|
display: flex;
|
|
place-items: center;
|
|
font-weight: 400;
|
|
text-transform: lowercase;
|
|
/* Texte du sélecteur */
|
|
/* Conteneur des sélecteurs */
|
|
}
|
|
.informations-produit .selecteur-produit__selection-variation label {
|
|
height: 100%;
|
|
margin-right: 1ch;
|
|
}
|
|
.informations-produit .selecteur-produit__selection-variation__selecteurs {
|
|
position: relative;
|
|
/* Icône de flèche descendante */
|
|
}
|
|
.informations-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) {
|
|
.informations-produit .selecteur-produit__selection-variation__selecteurs:has(select:valid)::after {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@supports selector(:user-valid) {
|
|
.informations-produit .selecteur-produit__selection-variation__selecteurs:has(select:user-valid)::after {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.informations-produit .selecteur-produit__selection-variation select {
|
|
position: relative;
|
|
min-width: 4rem;
|
|
padding: var(--espace-s) var(--espace-xl);
|
|
text-align: center;
|
|
appearance: none;
|
|
background: var(--couleur-fond);
|
|
border: 1px solid var(--couleur-noir);
|
|
}
|
|
@supports selector(:user-valid) {
|
|
.informations-produit .selecteur-produit__selection-variation select:user-valid {
|
|
background: var(--couleur-jaune-fond);
|
|
}
|
|
}
|
|
.informations-produit .selecteur-produit__selection-variation option {
|
|
background: var(--couleur-fond);
|
|
}
|
|
.informations-produit .selecteur-produit__prix {
|
|
font-style: initial;
|
|
}
|
|
.informations-produit .actions-produit {
|
|
overflow: hidden;
|
|
padding: initial;
|
|
background: var(--couleur-jaune);
|
|
border-top: initial;
|
|
transition: 0.2s background;
|
|
/* Indique que le Bouton est désactivé en utilisant un fond gris */
|
|
}
|
|
.informations-produit .actions-produit:has(button[disabled]) {
|
|
background: var(--couleur-fond);
|
|
}
|
|
.informations-produit .actions-produit button {
|
|
height: initial;
|
|
padding: var(--section-marges-internes);
|
|
font-variation-settings: "wght" 400;
|
|
font-style: italic;
|
|
text-transform: uppercase;
|
|
letter-spacing: var(--espacement-inter-lettres-etendu-m);
|
|
transition: 0.2s font-variation-settings;
|
|
/* Change la casse de la police au survol quand le Bouton n'est pas désactivé */
|
|
}
|
|
@media (hover: hover) {
|
|
.informations-produit .actions-produit button:not([disabled]):hover {
|
|
font-variation-settings: "wght" 500;
|
|
}
|
|
}
|
|
@media (width <= 700px) {
|
|
.informations-produit {
|
|
--section-marges-internes: var(--espace-l);
|
|
--onglet-marges-internes: var(--espace-l);
|
|
position: relative;
|
|
bottom: var(--espace-xl);
|
|
width: min(var(--boite-longueur), 100%);
|
|
height: initial;
|
|
margin: auto;
|
|
}
|
|
.informations-produit__conteneur {
|
|
transform: initial;
|
|
width: initial;
|
|
max-width: initial;
|
|
border-right: initial;
|
|
border-left: initial;
|
|
}
|
|
}
|
|
|
|
.produits-similaires {
|
|
--carte-produit-longueur-minimale: 448px;
|
|
--carte-produit-longueur-maximale: 1000px;
|
|
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;
|
|
margin-top: var(--espace-m);
|
|
/* En-tête de la section */
|
|
}
|
|
.produits-similaires header {
|
|
grid-area: en-tete;
|
|
width: 100%;
|
|
padding: var(--espace-l) 0 var(--espace-m);
|
|
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);
|
|
padding: var(--espace-m);
|
|
}
|
|
.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);
|
|
}
|
|
.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 {
|
|
/* Marges */
|
|
--pied-de-page-marges-internes-bloc: var(--espace-m);
|
|
--pied-de-page-marges-internes-ligne: var(--espace-xl);
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
place-items: center;
|
|
max-width: 100vw;
|
|
height: var(--pied-de-page-hauteur);
|
|
padding: var(--pied-de-page-marges-internes-bloc) var(--pied-de-page-marges-internes-ligne);
|
|
background: var(--couleur-jaune);
|
|
border-top: 1px solid var(--couleur-noir);
|
|
}
|
|
#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 */
|