diff --git a/web/app/themes/haiku-atelier-2024/assets/css/main.css b/web/app/themes/haiku-atelier-2024/assets/css/main.css index 0a21c369..c07f8ab0 100644 --- a/web/app/themes/haiku-atelier-2024/assets/css/main.css +++ b/web/app/themes/haiku-atelier-2024/assets/css/main.css @@ -4,70 +4,90 @@ font-weight: 100; font-style: normal; font-display: swap; - src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100.ttf") format("truetype"); + src: + url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100.woff2") format("woff2"), + url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100.ttf") format("truetype"); } @font-face { font-family: Lato; font-weight: 100; font-style: italic; font-display: swap; - src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100italic.ttf") format("truetype"); + src: + url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100italic.woff2") format("woff2"), + url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100italic.ttf") format("truetype"); } @font-face { font-family: Lato; font-weight: 300; font-style: normal; font-display: swap; - src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300.ttf") format("truetype"); + src: + url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300.woff2") format("woff2"), + url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300.ttf") format("truetype"); } @font-face { font-family: Lato; font-weight: 300; font-style: italic; font-display: swap; - src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300italic.ttf") format("truetype"); + src: + url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300italic.woff2") format("woff2"), + url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300italic.ttf") format("truetype"); } @font-face { font-family: Lato; font-weight: 400; font-style: normal; font-display: swap; - src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-regular.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-regular.ttf") format("truetype"); + src: + url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-regular.woff2") format("woff2"), + url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-regular.ttf") format("truetype"); } @font-face { font-family: Lato; font-weight: 400; font-style: italic; font-display: swap; - src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-italic.ttf") format("truetype"); + src: + url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-italic.woff2") format("woff2"), + url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-italic.ttf") format("truetype"); } @font-face { font-family: Lato; font-weight: 700; font-style: normal; font-display: swap; - src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700.ttf") format("truetype"); + src: + url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700.woff2") format("woff2"), + url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700.ttf") format("truetype"); } @font-face { font-family: Lato; font-weight: 700; font-style: italic; font-display: swap; - src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700italic.ttf") format("truetype"); + src: + url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700italic.woff2") format("woff2"), + url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700italic.ttf") format("truetype"); } @font-face { font-family: Lato; font-weight: 900; font-style: normal; font-display: swap; - src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900.ttf") format("truetype"); + src: + url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900.woff2") format("woff2"), + url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900.ttf") format("truetype"); } @font-face { font-family: Lato; font-weight: 900; font-style: italic; font-display: swap; - src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900italic.ttf") format("truetype"); + src: + url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900italic.woff2") format("woff2"), + url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900italic.ttf") format("truetype"); } @font-face { font-family: Myriad; @@ -75,7 +95,9 @@ 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"); + 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; @@ -83,14 +105,16 @@ 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"); + 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-noir: #000; --couleur-gris: #eceaeb; - --couleur-jaune: #ebffb8; --couleur-bordeaux: #490918; + --couleur-jaune: #ebffb8; + --couleur-noir: #202020; /* Polices */ --police-lato: "Lato", sans-serif; --police-myriad: "Myriad", sans-serif; @@ -98,14 +122,14 @@ /** * 1. Utilise un meilleur modèle de boîte. - * 2. Rendu des polices pour Safari/iOS - * 3. Rendu plus précis du texte + * 2. Rendu spécifique du texte pour Safari/iOS. + * 3. Rendu plus précis du texte. */ html { box-sizing: border-box; /* 1 */ -webkit-font-smoothing: antialiased; /* 2 */ text-size-adjust: none; /* 2 */ - text-rendering: geometricprecision; + text-rendering: geometricprecision; /* 3 */ } /** @@ -124,29 +148,56 @@ html { } /** - * 1. Utilise une couleur d'arrière-plan définie + * 1. Utilise une couleur d'arrière-plan définie. + * 2. Force une hauteur minimale de page occupant l'intégralité de la vue du navigateur. */ body { + min-height: 100vh; /* 2 */ background: var(--couleur-gris); /* 1 */ } +/** + * Force l'héritage des styles pour ces éléments + */ +button, input, select, textarea { + font: inherit; +} + body { - font: 1rem/1.4 var(--police-lato) 0.5px; + font: 1rem/1.4 var(--police-myriad) 0.5px; color: var(--couleur-noir); } /** - * 1. Désactive la bordure. + * 1. Facilite l'usages des images. + * 2. Empêche les images de dépasser leur conteneur. + */ +img, picture { + display: block; /* 1 */ + max-width: 100%; /* 2 */ +} + +/** + * 1. Change la « bordure » de base. * 2. Ajoute un contour, qui sera colorisé au focus. - * 3. Anime le changement de couleur du bordure et du contour. + * 3. Anime le changement de couleur des texte, bordure et contour. */ a { /* Couleurs */ - --lien-contour-couleur-focus: var(--couleur-noir); - text-decoration: none; /* 1 */ + --lien-contour-couleur-focus: var(--couleur-noir); /* 1 */ + text-decoration: underline solid; /* 1 */ + text-decoration-color: transparent; /* 1 */ + text-decoration-skip-ink: auto; /* 1 */ outline: 1px solid transparent; /* 2 */ outline-offset: initial; /* 2 */ - transition: 0.2s outline-color, 0.2s border-color; /* 3 */ + 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. @@ -157,7 +208,7 @@ a:focus, a:focus-visible { } a.lien-bouton { /* Marges */ - --lien-bouton-marges-internes-bloc: 0.25rem; + --lien-bouton-marges-internes-bloc: 0.33rem; /* Couleurs */ --lien-bouton-arriere-plan-couleur-survol: var(--couleur-jaune); padding: var(--lien-bouton-marges-internes-bloc) 0; @@ -202,7 +253,8 @@ ul.avec-puce-cercle { } 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 */ + 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 */ } #en-tete { @@ -210,7 +262,7 @@ ul.avec-puce-cercle a { --en-tete-marges-internes-ligne: 2rem; --en-tete-marges-internes-bloc: 1rem; /* Dimensions */ - --en-tete-hauteur: 90px; + --en-tete-hauteur: 80px; --en-tete-logo-longueur: 120px; display: flex; flex-flow: row nowrap; @@ -245,7 +297,7 @@ ul.avec-puce-cercle a { display: flex; grid-column: 2; flex-flow: row nowrap; - gap: max(2rem, 8vw); + gap: max(2rem, 5vw); justify-content: space-between; } #en-tete .menu-navigation__entree { @@ -257,6 +309,7 @@ ul.avec-puce-cercle a { --liste-puce-cercle-lien-marges-internes-ligne-debut: calc(1rem + 1.5ch); /* 3 */ /* Dispositions */ --liste-puce-cercle-puce-position-horizontale: 3.5ch; /* 3 */ + transition: 0.2s background; } #en-tete .menu-navigation__entree a { display: inline-block; /* 1 */ @@ -268,48 +321,91 @@ ul.avec-puce-cercle a { background: var(--nav-entree-arriere-plan-couleur); } } -#en-tete .panier { - display: inline-flex; +#en-tete .compte-panier { + display: flex; flex-flow: row nowrap; - place-content: center; + gap: max(1rem, 2vw); place-items: center; text-align: center; + /** + * 1. Permet d'éviter un agrandissement de l'élément avec plus de 9 articles. + */ } -#en-tete .panier__lien { - min-width: 10ch; +#en-tete .compte-panier a { + min-width: 9ch; /* 1 */ + text-transform: lowercase; +} +#en-tete .compte-panier a.lien-compte { + text-decoration: underline solid; + text-decoration-color: transparent; + text-decoration-skip-ink: auto; + border-color: transparent; + text-decoration-skip: edges; +} +@media (hover: hover) { + #en-tete .compte-panier a.lien-compte:hover { + text-decoration-color: var(--couleur-noir); + } +} +#en-tete .compte-panier a[data-contient-articles=true] { + background: var(--couleur-jaune); } +#menu-categories-produits { + /* Dimensions */ + --menu-entree-longueur-minimale: 13ch; + /* Marges */ + --menu-entree-marges-internes-ligne: 1rem; + /** + * 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(21ch, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(var(--menu-entree-longueur-minimale), 1fr)); /* 1 */ place-items: center; + /** + * 1. Force chaque entrée à occuper tout l'espace alloué par grid. + */ } #menu-categories-produits ul li { - width: 100%; + width: 100%; /* 1 */ + font-weight: 450; font-style: italic; - color: white; + color: var(--couleur-gris); text-align: center; text-transform: uppercase; - background: black; + letter-spacing: 1px; + 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:active a { + font-weight: 500; } #menu-categories-produits ul li a { - display: inline-block; - width: inherit; - padding: 1rem 0; + display: inline-block; /* 1 */ + width: inherit; /* 2 */ + padding: var(--menu-entree-marges-internes-ligne) 0; border-right: 1px solid var(--couleur-gris); border-left: 1px solid var(--couleur-gris); - outline: initial; + outline: initial; /* 3 */ } #menu-categories-produits ul li a:focus, #menu-categories-produits ul li a:focus-visible { color: var(--couleur-jaune); - border-right-color: var(--couleur-jaune); - border-left-color: var(--couleur-jaune); - outline: initial; + outline: initial; /* 3 */ } @media (hover: hover) { #menu-categories-produits ul li a:hover { color: var(--couleur-jaune); - outline: initial; + outline: initial; /* 3 */ } } #menu-categories-produits ul li:first-of-type a { @@ -319,4 +415,33 @@ ul.avec-puce-cercle a { border-right: initial; } +#pied-de-page { + display: grid; + grid-template-columns: 1fr 1fr; + place-items: center; + align-self: end; + min-width: 100vw; + padding: 1rem 2rem; + line-height: 1.5; + background: var(--couleur-jaune); + border: 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; +} +@media (hover: hover) { + #pied-de-page a:hover { + text-decoration-color: var(--couleur-noir); + } +} + /*# sourceMappingURL=main.css.map */ diff --git a/web/app/themes/haiku-atelier-2024/assets/css/main.css.map b/web/app/themes/haiku-atelier-2024/assets/css/main.css.map index 38ede3e4..63980a3f 100644 --- a/web/app/themes/haiku-atelier-2024/assets/css/main.css.map +++ b/web/app/themes/haiku-atelier-2024/assets/css/main.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../../src/sass/base/polices/_lato.scss","../../src/sass/base/polices/_myriad.scss","../../src/sass/abstracts/_variables.scss","../../src/sass/base/_base.scss","../../src/sass/base/_typographie.scss","../../src/sass/base/elements/_liens.scss","../../src/sass/base/elements/_listes.scss","../../src/sass/layouts/_en-tete.scss","../../src/sass/layouts/_menu-categories-produits.scss"],"names":[],"mappings":";AAAA;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AChGJ;EACE;EACA;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA,KACE;;AChBJ;AACE;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;;;ACPF;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAGA;EACE;;;ACjCF;EACE;EACA;;;ACFF;AAAA;AAAA;AAAA;AAAA;AAKA;AACE;EACA;EAEA;EACA;EACA;EACA;AAEA;AAKA;AAAA;AAAA;;AAJA;EACE;;AAMF;AACE;EACA;AAEA;EACA;EAEA;EACA;AAEA;AAKA;AAKA;;AATA;EACE;;AAIF;EACE;;AAIF;EACE;IACE;;;;AC7CR;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAMA;AACE;EACA;AAEA;EACA;AAEA;EACA;;AAEA;EACE;EACA,qLAEkE;;;AC5BxE;AACE;EACA;EACA;AAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAMA;;AAJA;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;AAUA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AARA;EACE;EACA;EACA;EACA;EACA;;AAYF;AACE;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;IACE;;;AAMR;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AChFJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAUA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;IACE;IACA;;;AAMJ;EACE;;AAKF;EACE","file":"main.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../../src/sass/base/polices/_lato.scss","../../src/sass/base/polices/_myriad.scss","../../src/sass/abstracts/_variables.scss","../../src/sass/base/_base.scss","../../src/sass/base/_typographie.scss","../../src/sass/base/elements/_images.scss","../../src/sass/base/elements/_liens.scss","../../src/sass/base/elements/_listes.scss","../../src/sass/layouts/_en-tete.scss","../../src/sass/layouts/_menu-categories-produits.scss","../../src/sass/layouts/_pied-de-page.scss"],"names":[],"mappings":";AAAA;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AChGJ;EACE;EACA;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA,KACE;;AChBJ;AACE;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;;;ACPF;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAIA;EACE;EACA;;;AAGF;AAAA;AAAA;AAGA;EACE;;;AC1CF;EACE;EACA;;;ACFF;AAAA;AAAA;AAAA;AAIA;EACE;EACA;;;ACNF;AAAA;AAAA;AAAA;AAAA;AAKA;AACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA,YACE,kHAK4B;EAE9B;AAEA;AAKA;AAAA;AAAA;;AAJA;EACE;;AAMF;AACE;EACA;AAEA;EACA;EAEA;EACA;AAEA;AAKA;AAKA;;AATA;EACE;;AAIF;EACE;;AAIF;EACE;IACE;;;;ACvDR;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAMA;AACE;EACA;AAEA;EACA;AAEA;EACA;;AAEA;EACE;EACA,qLAEkE;;;AC5BxE;AACE;EACA;EACA;AAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAMA;;AAJA;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;AAUA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AARA;EACE;EACA;EACA;EACA;EACA;;AAYF;AACE;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EAEA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;IACE;;;AAMR;EACE;EACA;EACA;EACA;EACA;AAEA;AAAA;AAAA;;AAGA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;IACE;;;AAON;EACE;;;AC1GR;AACE;EACA;AAEA;EACA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAOA;EACE;EACA;EACA;AAEA;AAAA;AAAA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAMA;AAAA;AAAA;AAAA;AAAA;;AAJA;EACE;;AAQF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;IACE;IACA;;;AAKN;EACE;;AAGF;EACE;;;ACnER;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAIA;EACE;IACE","file":"main.css"} \ No newline at end of file diff --git a/web/app/themes/haiku-atelier-2024/assets/css/main.min.css b/web/app/themes/haiku-atelier-2024/assets/css/main.min.css index cab05fac..47b385e2 100644 --- a/web/app/themes/haiku-atelier-2024/assets/css/main.min.css +++ b/web/app/themes/haiku-atelier-2024/assets/css/main.min.css @@ -1,2 +1,2 @@ -@font-face{font-family:Lato;font-weight:100;font-style:normal;font-display:swap;src:url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100.woff2)format("woff2"),url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100.ttf)format("truetype")}@font-face{font-family:Lato;font-weight:100;font-style:italic;font-display:swap;src:url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100italic.woff2)format("woff2"),url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100italic.ttf)format("truetype")}@font-face{font-family:Lato;font-weight:300;font-style:normal;font-display:swap;src:url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300.woff2)format("woff2"),url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300.ttf)format("truetype")}@font-face{font-family:Lato;font-weight:300;font-style:italic;font-display:swap;src:url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300italic.woff2)format("woff2"),url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300italic.ttf)format("truetype")}@font-face{font-family:Lato;font-weight:400;font-style:normal;font-display:swap;src:url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-regular.woff2)format("woff2"),url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-regular.ttf)format("truetype")}@font-face{font-family:Lato;font-weight:400;font-style:italic;font-display:swap;src:url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-italic.woff2)format("woff2"),url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-italic.ttf)format("truetype")}@font-face{font-family:Lato;font-weight:700;font-style:normal;font-display:swap;src:url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700.woff2)format("woff2"),url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700.ttf)format("truetype")}@font-face{font-family:Lato;font-weight:700;font-style:italic;font-display:swap;src:url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700italic.woff2)format("woff2"),url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700italic.ttf)format("truetype")}@font-face{font-family:Lato;font-weight:900;font-style:normal;font-display:swap;src:url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900.woff2)format("woff2"),url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900.ttf)format("truetype")}@font-face{font-family:Lato;font-weight:900;font-style:italic;font-display:swap;src:url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900italic.woff2)format("woff2"),url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900italic.ttf)format("truetype")}@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{--couleur-noir:#000;--couleur-gris:#eceaeb;--couleur-jaune:#ebffb8;--couleur-bordeaux:#490918;--police-lato:"Lato",sans-serif;--police-myriad:"Myriad",sans-serif}html{box-sizing:border-box;-webkit-font-smoothing:antialiased;text-size-adjust:none;text-rendering:geometricprecision}*,:before,:after{box-sizing:inherit;font:inherit;color:inherit;margin:0;padding:0}body{background:var(--couleur-gris);font:1rem/1.4 var(--police-lato).5px;color:var(--couleur-noir)}a{--lien-contour-couleur-focus:var(--couleur-noir);outline-offset:initial;outline:1px solid #0000;text-decoration:none;transition:outline-color .2s,border-color .2s}a:focus,a:focus-visible{outline-color:var(--lien-contour-couleur-focus)}a.lien-bouton{--lien-bouton-marges-internes-bloc:.25rem;--lien-bouton-arriere-plan-couleur-survol:var(--couleur-jaune);padding:var(--lien-bouton-marges-internes-bloc)0;border:1px solid var(--couleur-noir)}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)}}ul{list-style:none}ul.avec-puce-cercle{--liste-puce-cercle-lien-marges-internes-ligne-debut:2ch;--liste-puce-cercle-puce-position-horizontale:1ch;--liste-puce-cercle-puce-taille:1.25ex}ul.avec-puce-cercle a{padding-left:var(--liste-puce-cercle-lien-marges-internes-ligne-debut);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)}#en-tete{--en-tete-marges-internes-ligne:2rem;--en-tete-marges-internes-bloc:1rem;--en-tete-hauteur:90px;--en-tete-logo-longueur:120px;height:var(--en-tete-hauteur);padding:var(--en-tete-marges-internes-bloc)var(--en-tete-marges-internes-ligne);background:var(--couleur-gris);border:1px solid var(--couleur-noir);flex-flow:row;justify-content:space-between;place-items:center;display:flex}#en-tete .logo{width:var(--en-tete-logo-longueur)}#en-tete .menu-navigation{text-align:center;text-transform:lowercase;flex:1;grid-template-columns:1fr auto 1fr;display:grid}#en-tete .menu-navigation ul{flex-flow:row;grid-column:2;justify-content:space-between;gap:max(2rem,8vw);display:flex}#en-tete .menu-navigation__entree{--nav-entree-arriere-plan-couleur:var(--couleur-jaune);--nav-entree-marges-internes-bloc:.33rem;--nav-entree-marges-internes-ligne:3rem;--liste-puce-cercle-lien-marges-internes-ligne-debut:calc(1rem + 1.5ch);--liste-puce-cercle-puce-position-horizontale:3.5ch}#en-tete .menu-navigation__entree a{padding:var(--nav-entree-marges-internes-bloc)var(--nav-entree-marges-internes-ligne);text-align:center;display:inline-block}@media (hover:hover){#en-tete .menu-navigation__entree:hover{background:var(--nav-entree-arriere-plan-couleur)}}#en-tete .panier{text-align:center;flex-flow:row;place-content:center;place-items:center;display:inline-flex}#en-tete .panier__lien{min-width:10ch}#menu-categories-produits ul{grid-template-columns:repeat(auto-fit,minmax(21ch,1fr));place-items:center;display:grid}#menu-categories-produits ul li{color:#fff;text-align:center;text-transform:uppercase;background:#000;width:100%;font-style:italic}#menu-categories-produits ul li a{width:inherit;border-right:1px solid var(--couleur-gris);border-left:1px solid var(--couleur-gris);outline:initial;padding:1rem 0;display:inline-block}#menu-categories-produits ul li a:focus,#menu-categories-produits ul li a:focus-visible{color:var(--couleur-jaune);border-right-color:var(--couleur-jaune);border-left-color:var(--couleur-jaune);outline:initial}@media (hover:hover){#menu-categories-produits ul li a:hover{color:var(--couleur-jaune);outline:initial}}#menu-categories-produits ul li:first-of-type a{border-left:initial}#menu-categories-produits ul li:last-of-type a{border-right:initial} +@font-face{font-family:Lato;font-weight:100;font-style:normal;font-display:swap;src:url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100.woff2)format("woff2"),url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100.ttf)format("truetype")}@font-face{font-family:Lato;font-weight:100;font-style:italic;font-display:swap;src:url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100italic.woff2)format("woff2"),url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100italic.ttf)format("truetype")}@font-face{font-family:Lato;font-weight:300;font-style:normal;font-display:swap;src:url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300.woff2)format("woff2"),url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300.ttf)format("truetype")}@font-face{font-family:Lato;font-weight:300;font-style:italic;font-display:swap;src:url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300italic.woff2)format("woff2"),url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300italic.ttf)format("truetype")}@font-face{font-family:Lato;font-weight:400;font-style:normal;font-display:swap;src:url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-regular.woff2)format("woff2"),url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-regular.ttf)format("truetype")}@font-face{font-family:Lato;font-weight:400;font-style:italic;font-display:swap;src:url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-italic.woff2)format("woff2"),url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-italic.ttf)format("truetype")}@font-face{font-family:Lato;font-weight:700;font-style:normal;font-display:swap;src:url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700.woff2)format("woff2"),url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700.ttf)format("truetype")}@font-face{font-family:Lato;font-weight:700;font-style:italic;font-display:swap;src:url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700italic.woff2)format("woff2"),url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700italic.ttf)format("truetype")}@font-face{font-family:Lato;font-weight:900;font-style:normal;font-display:swap;src:url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900.woff2)format("woff2"),url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900.ttf)format("truetype")}@font-face{font-family:Lato;font-weight:900;font-style:italic;font-display:swap;src:url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900italic.woff2)format("woff2"),url(/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900italic.ttf)format("truetype")}@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{--couleur-gris:#eceaeb;--couleur-bordeaux:#490918;--couleur-jaune:#ebffb8;--couleur-noir:#202020;--police-lato:"Lato",sans-serif;--police-myriad:"Myriad",sans-serif}html{box-sizing:border-box;-webkit-font-smoothing:antialiased;text-size-adjust:none;text-rendering:geometricprecision}*,:before,:after{box-sizing:inherit;font:inherit;color:inherit;margin:0;padding:0}body{background:var(--couleur-gris);min-height:100vh}button,input,select,textarea{font:inherit}body{font:1rem/1.4 var(--police-myriad).5px;color:var(--couleur-noir)}img,picture{max-width:100%;display:block}a{--lien-contour-couleur-focus:var(--couleur-noir);text-decoration-skip-ink:auto;outline-offset:initial;text-decoration-skip:edges;outline:1px solid #0000;text-decoration:underline #0000;transition:color .2s,font-weight .2s,background .2s,outline-color .2s,border-color .2s,text-decoration-color .2s}a:focus,a:focus-visible{outline-color:var(--lien-contour-couleur-focus)}a.lien-bouton{--lien-bouton-marges-internes-bloc:.33rem;--lien-bouton-arriere-plan-couleur-survol:var(--couleur-jaune);padding:var(--lien-bouton-marges-internes-bloc)0;border:1px solid var(--couleur-noir)}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)}}ul{list-style:none}ul.avec-puce-cercle{--liste-puce-cercle-lien-marges-internes-ligne-debut:2ch;--liste-puce-cercle-puce-position-horizontale:1ch;--liste-puce-cercle-puce-taille:1.25ex}ul.avec-puce-cercle a{padding-left:var(--liste-puce-cercle-lien-marges-internes-ligne-debut);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)}#en-tete{--en-tete-marges-internes-ligne:2rem;--en-tete-marges-internes-bloc:1rem;--en-tete-hauteur:80px;--en-tete-logo-longueur:120px;height:var(--en-tete-hauteur);padding:var(--en-tete-marges-internes-bloc)var(--en-tete-marges-internes-ligne);background:var(--couleur-gris);border:1px solid var(--couleur-noir);flex-flow:row;justify-content:space-between;place-items:center;display:flex}#en-tete .logo{width:var(--en-tete-logo-longueur)}#en-tete .menu-navigation{text-align:center;text-transform:lowercase;flex:1;grid-template-columns:1fr auto 1fr;display:grid}#en-tete .menu-navigation ul{flex-flow:row;grid-column:2;justify-content:space-between;gap:max(2rem,5vw);display:flex}#en-tete .menu-navigation__entree{--nav-entree-arriere-plan-couleur:var(--couleur-jaune);--nav-entree-marges-internes-bloc:.33rem;--nav-entree-marges-internes-ligne:3rem;--liste-puce-cercle-lien-marges-internes-ligne-debut:calc(1rem + 1.5ch);--liste-puce-cercle-puce-position-horizontale:3.5ch;transition:background .2s}#en-tete .menu-navigation__entree a{padding:var(--nav-entree-marges-internes-bloc)var(--nav-entree-marges-internes-ligne);text-align:center;display:inline-block}@media (hover:hover){#en-tete .menu-navigation__entree:hover{background:var(--nav-entree-arriere-plan-couleur)}}#en-tete .compte-panier{text-align:center;flex-flow:row;place-items:center;gap:max(1rem,2vw);display:flex}#en-tete .compte-panier a{text-transform:lowercase;min-width:9ch}#en-tete .compte-panier a.lien-compte{text-decoration-skip-ink:auto;text-decoration-skip:edges;border-color:#0000;text-decoration:underline #0000}@media (hover:hover){#en-tete .compte-panier a.lien-compte:hover{text-decoration-color:var(--couleur-noir)}}#en-tete .compte-panier a[data-contient-articles=true]{background:var(--couleur-jaune)}#menu-categories-produits{--menu-entree-longueur-minimale:13ch;--menu-entree-marges-internes-ligne:1rem}#menu-categories-produits ul{grid-template-columns:repeat(auto-fit,minmax(var(--menu-entree-longueur-minimale),1fr));place-items:center;display:grid}#menu-categories-produits ul li{color:var(--couleur-gris);text-align:center;text-transform:uppercase;letter-spacing:1px;background:var(--couleur-noir);width:100%;font-style:italic;font-weight:450}#menu-categories-produits ul li:active a{font-weight:500}#menu-categories-produits ul li a{width:inherit;padding:var(--menu-entree-marges-internes-ligne)0;border-right:1px solid var(--couleur-gris);border-left:1px solid var(--couleur-gris);outline:initial;display:inline-block}#menu-categories-produits ul li a:focus,#menu-categories-produits ul li a:focus-visible{color:var(--couleur-jaune);outline:initial}@media (hover:hover){#menu-categories-produits ul li a:hover{color:var(--couleur-jaune);outline:initial}}#menu-categories-produits ul li:first-of-type a{border-left:initial}#menu-categories-produits ul li:last-of-type a{border-right:initial}#pied-de-page{background:var(--couleur-jaune);border:1px solid var(--couleur-noir);grid-template-columns:1fr 1fr;align-self:end;place-items:center;min-width:100vw;padding:1rem 2rem;line-height:1.5;display:grid}#pied-de-page .zone-menu-navigation-secondaire{text-transform:lowercase;justify-self:start;width:100%;height:100%}#pied-de-page .zone-liens-reseaux-sociaux{text-align:right;justify-items:end;width:100%;height:100%}@media (hover:hover){#pied-de-page a:hover{text-decoration-color:var(--couleur-noir)}} /*# sourceMappingURL=web/app/themes/haiku-atelier-2024/assets/css/main.min.css.map */ diff --git a/web/app/themes/haiku-atelier-2024/assets/css/main.min.css.map b/web/app/themes/haiku-atelier-2024/assets/css/main.min.css.map index d271ac51..5432ab62 100644 --- a/web/app/themes/haiku-atelier-2024/assets/css/main.min.css.map +++ b/web/app/themes/haiku-atelier-2024/assets/css/main.min.css.map @@ -1 +1 @@ -{"version":3,"mappings":"AACA,iRAOA,6RAOA,iRAOA,6RAOA,yRAOA,uRAOA,iRAOA,6RAOA,iRAOA,6RAOA,2SAQA,yTAQA,wKAgBA,sHAcA,kFAWA,mGAcA,qKAYA,wEAGA,6MAWA,0GAGA,iFAGA,qBACE,+EAUF,mBASA,sKAQA,4QAKA,qYAiBA,kDAGA,4HAgBA,sHAOA,sSAUA,iKAKA,qBACE,2FAIF,6GAOA,sCAIA,qHAKA,mIAQA,yLAQA,kNAMA,qBACE,oFAKF,oEAGA","sources":["web/app/themes/haiku-atelier-2024/assets/css/main.css"],"sourcesContent":["@charset \"UTF-8\";\n@font-face {\n font-family: Lato;\n font-weight: 100;\n font-style: normal;\n font-display: swap;\n src: url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100.woff2\") format(\"woff2\"), url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100.ttf\") format(\"truetype\");\n}\n@font-face {\n font-family: Lato;\n font-weight: 100;\n font-style: italic;\n font-display: swap;\n src: url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100italic.woff2\") format(\"woff2\"), url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100italic.ttf\") format(\"truetype\");\n}\n@font-face {\n font-family: Lato;\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n src: url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300.woff2\") format(\"woff2\"), url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300.ttf\") format(\"truetype\");\n}\n@font-face {\n font-family: Lato;\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n src: url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300italic.woff2\") format(\"woff2\"), url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300italic.ttf\") format(\"truetype\");\n}\n@font-face {\n font-family: Lato;\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-regular.woff2\") format(\"woff2\"), url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-regular.ttf\") format(\"truetype\");\n}\n@font-face {\n font-family: Lato;\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n src: url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-italic.woff2\") format(\"woff2\"), url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-italic.ttf\") format(\"truetype\");\n}\n@font-face {\n font-family: Lato;\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700.woff2\") format(\"woff2\"), url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700.ttf\") format(\"truetype\");\n}\n@font-face {\n font-family: Lato;\n font-weight: 700;\n font-style: italic;\n font-display: swap;\n src: url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700italic.woff2\") format(\"woff2\"), url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700italic.ttf\") format(\"truetype\");\n}\n@font-face {\n font-family: Lato;\n font-weight: 900;\n font-style: normal;\n font-display: swap;\n src: url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900.woff2\") format(\"woff2\"), url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900.ttf\") format(\"truetype\");\n}\n@font-face {\n font-family: Lato;\n font-weight: 900;\n font-style: italic;\n font-display: swap;\n src: url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900italic.woff2\") format(\"woff2\"), url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900italic.ttf\") format(\"truetype\");\n}\n@font-face {\n font-family: Myriad;\n font-weight: 300 900;\n font-style: normal;\n font-display: swap;\n font-stretch: 70% 110%;\n 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\");\n}\n@font-face {\n font-family: Myriad;\n font-weight: 300 900;\n font-style: italic;\n font-display: swap;\n font-stretch: 70% 110%;\n 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\");\n}\n:root {\n /* Couleurs */\n --couleur-noir: #000;\n --couleur-gris: #eceaeb;\n --couleur-jaune: #ebffb8;\n --couleur-bordeaux: #490918;\n /* Polices */\n --police-lato: \"Lato\", sans-serif;\n --police-myriad: \"Myriad\", sans-serif;\n}\n\n/**\n * 1. Utilise un meilleur modèle de boîte.\n * 2. Rendu des polices pour Safari/iOS\n * 3. Rendu plus précis du texte\n */\nhtml {\n box-sizing: border-box; /* 1 */\n -webkit-font-smoothing: antialiased; /* 2 */\n text-size-adjust: none; /* 2 */\n text-rendering: geometricprecision;\n}\n\n/**\n * Réinitialise avec des styles par défaut plus simples.\n *\n * 1. Hérite du modèle de boîte du document par défaut.\n * 2. Pas de marges par défaut.\n * 3. Hérite par défaut des styles de texte et de couleur.\n */\n*, *::before, *::after {\n box-sizing: inherit; /* 1 */\n margin: 0; /* 2 */\n padding: 0; /* 2 */\n font: inherit; /* 3 */\n color: inherit; /* 3 */\n}\n\n/**\n * 1. Utilise une couleur d'arrière-plan définie\n */\nbody {\n background: var(--couleur-gris); /* 1 */\n}\n\nbody {\n font: 1rem/1.4 var(--police-lato) 0.5px;\n color: var(--couleur-noir);\n}\n\n/**\n * 1. Désactive la bordure.\n * 2. Ajoute un contour, qui sera colorisé au focus.\n * 3. Anime le changement de couleur du bordure et du contour.\n */\na {\n /* Couleurs */\n --lien-contour-couleur-focus: var(--couleur-noir);\n text-decoration: none; /* 1 */\n outline: 1px solid transparent; /* 2 */\n outline-offset: initial; /* 2 */\n transition: 0.2s outline-color, 0.2s border-color; /* 3 */\n /* Change les couleurs de l'arrière-plan et du contour pour marquer le focus. */\n /**\n * Lien ressemblant visuellement à un bouton.\n */\n}\na:focus, a:focus-visible {\n outline-color: var(--lien-contour-couleur-focus);\n}\na.lien-bouton {\n /* Marges */\n --lien-bouton-marges-internes-bloc: 0.25rem;\n /* Couleurs */\n --lien-bouton-arriere-plan-couleur-survol: var(--couleur-jaune);\n padding: var(--lien-bouton-marges-internes-bloc) 0;\n border: 1px solid var(--couleur-noir);\n /* Change la couleur de l'arrière-plan pour marquer le focus. */\n /* 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. */\n /* Change la couleur de l'arrière-plan pour marquer le survol. */\n}\na.lien-bouton:focus, a.lien-bouton:focus-visible {\n background: var(--lien-bouton-arriere-plan-couleur-survol);\n}\na.lien-bouton:active {\n border-color: var(--lien-bouton-arriere-plan-couleur-survol);\n}\n@media (hover: hover) {\n a.lien-bouton:hover {\n background: var(--lien-bouton-arriere-plan-couleur-survol);\n }\n}\n\n/**\n * Réinitialise les styles des listes non ordonnées.\n *\n * 1. Pas de puce.\n */\nul {\n list-style: none; /* 1 */\n /**\n * Utilise un SVG comme puce de liste via l'emploi d'un arrière-plan.\n *\n * 1. Ajoute de la marge interne pour que la puce ait de la place.\n * 2. Centre verticalement la puce et la dimensionne correctement.\n */\n}\nul.avec-puce-cercle {\n /* Marges */\n --liste-puce-cercle-lien-marges-internes-ligne-debut: 2ch;\n /* Dispositions */\n --liste-puce-cercle-puce-position-horizontale: 1ch;\n /* Tailles */\n --liste-puce-cercle-puce-taille: 1.25ex;\n}\nul.avec-puce-cercle a {\n padding-left: var(--liste-puce-cercle-lien-marges-internes-ligne-debut); /* 1 */\n 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 */\n}\n\n#en-tete {\n /* Marges */\n --en-tete-marges-internes-ligne: 2rem;\n --en-tete-marges-internes-bloc: 1rem;\n /* Dimensions */\n --en-tete-hauteur: 90px;\n --en-tete-logo-longueur: 120px;\n display: flex;\n flex-flow: row nowrap;\n place-items: center;\n justify-content: space-between;\n height: var(--en-tete-hauteur);\n padding: var(--en-tete-marges-internes-bloc) var(--en-tete-marges-internes-ligne);\n background: var(--couleur-gris);\n border: 1px solid var(--couleur-noir);\n /* TODO: Déplacer au sein d'un Composant ? */\n}\n#en-tete .logo {\n width: var(--en-tete-logo-longueur);\n}\n#en-tete .menu-navigation {\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n flex: 1;\n text-align: center;\n text-transform: lowercase;\n /**\n * Le conteneur d'une entrée du menu, nécessaire pour que le changement de couleur d'arrière-\n * plan au survol soit possible.\n *\n * 1. Passe en bloc en ligne pour pouvoir ajouter des marges internes en bloc.\n * 2. Augmente les marges internes pour créer des liens plus imposants.\n * 3. Corrige la disposition de la puce, étant donné les marges internes en ligne augmentées.\n * 4. Aligne le texte au centre.\n */\n}\n#en-tete .menu-navigation ul {\n display: flex;\n grid-column: 2;\n flex-flow: row nowrap;\n gap: max(2rem, 8vw);\n justify-content: space-between;\n}\n#en-tete .menu-navigation__entree {\n /* Couleurs */\n --nav-entree-arriere-plan-couleur: var(--couleur-jaune);\n /* Marges */\n --nav-entree-marges-internes-bloc: 0.33rem;\n --nav-entree-marges-internes-ligne: 3rem;\n --liste-puce-cercle-lien-marges-internes-ligne-debut: calc(1rem + 1.5ch); /* 3 */\n /* Dispositions */\n --liste-puce-cercle-puce-position-horizontale: 3.5ch; /* 3 */\n}\n#en-tete .menu-navigation__entree a {\n display: inline-block; /* 1 */\n padding: var(--nav-entree-marges-internes-bloc) var(--nav-entree-marges-internes-ligne); /* 2 */\n text-align: center; /* 4 */\n}\n@media (hover: hover) {\n #en-tete .menu-navigation__entree:hover {\n background: var(--nav-entree-arriere-plan-couleur);\n }\n}\n#en-tete .panier {\n display: inline-flex;\n flex-flow: row nowrap;\n place-content: center;\n place-items: center;\n text-align: center;\n}\n#en-tete .panier__lien {\n min-width: 10ch;\n}\n\n#menu-categories-produits ul {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(21ch, 1fr));\n place-items: center;\n}\n#menu-categories-produits ul li {\n width: 100%;\n font-style: italic;\n color: white;\n text-align: center;\n text-transform: uppercase;\n background: black;\n}\n#menu-categories-produits ul li a {\n display: inline-block;\n width: inherit;\n padding: 1rem 0;\n border-right: 1px solid var(--couleur-gris);\n border-left: 1px solid var(--couleur-gris);\n outline: initial;\n}\n#menu-categories-produits ul li a:focus, #menu-categories-produits ul li a:focus-visible {\n color: var(--couleur-jaune);\n border-right-color: var(--couleur-jaune);\n border-left-color: var(--couleur-jaune);\n outline: initial;\n}\n@media (hover: hover) {\n #menu-categories-produits ul li a:hover {\n color: var(--couleur-jaune);\n outline: initial;\n }\n}\n#menu-categories-produits ul li:first-of-type a {\n border-left: initial;\n}\n#menu-categories-produits ul li:last-of-type a {\n border-right: initial;\n}\n\n/*# sourceMappingURL=main.css.map */\n"],"names":[]} \ No newline at end of file +{"version":3,"mappings":"AACA,iRASA,6RASA,iRASA,6RASA,yRASA,uRASA,iRASA,6RASA,iRASA,6RASA,2SAUA,yTAUA,2KAgBA,sHAcA,kFAYA,qDAQA,0CAIA,sEASA,yCAUA,4SAqBA,wEAGA,6MAWA,0GAGA,iFAGA,qBACE,+EAUF,mBASA,sKAQA,4QAMA,qYAiBA,kDAGA,4HAgBA,sHAOA,gUAWA,iKAKA,qBACE,2FAIF,0GAUA,iEAIA,kJAOA,qBACE,uFAIF,uFAIA,wGAaA,qJAQA,oMAeA,yDAGA,4NAQA,mIAIA,qBACE,oFAKF,oEAGA,oEAIA,kNAWA,kHAMA,oGAMA,qBACE","sources":["web/app/themes/haiku-atelier-2024/assets/css/main.css"],"sourcesContent":["@charset \"UTF-8\";\n@font-face {\n font-family: Lato;\n font-weight: 100;\n font-style: normal;\n font-display: swap;\n src:\n url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100.woff2\") format(\"woff2\"),\n url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100.ttf\") format(\"truetype\");\n}\n@font-face {\n font-family: Lato;\n font-weight: 100;\n font-style: italic;\n font-display: swap;\n src:\n url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100italic.woff2\") format(\"woff2\"),\n url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-100italic.ttf\") format(\"truetype\");\n}\n@font-face {\n font-family: Lato;\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n src:\n url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300.woff2\") format(\"woff2\"),\n url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300.ttf\") format(\"truetype\");\n}\n@font-face {\n font-family: Lato;\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n src:\n url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300italic.woff2\") format(\"woff2\"),\n url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-300italic.ttf\") format(\"truetype\");\n}\n@font-face {\n font-family: Lato;\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src:\n url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-regular.woff2\") format(\"woff2\"),\n url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-regular.ttf\") format(\"truetype\");\n}\n@font-face {\n font-family: Lato;\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n src:\n url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-italic.woff2\") format(\"woff2\"),\n url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-italic.ttf\") format(\"truetype\");\n}\n@font-face {\n font-family: Lato;\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src:\n url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700.woff2\") format(\"woff2\"),\n url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700.ttf\") format(\"truetype\");\n}\n@font-face {\n font-family: Lato;\n font-weight: 700;\n font-style: italic;\n font-display: swap;\n src:\n url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700italic.woff2\") format(\"woff2\"),\n url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-700italic.ttf\") format(\"truetype\");\n}\n@font-face {\n font-family: Lato;\n font-weight: 900;\n font-style: normal;\n font-display: swap;\n src:\n url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900.woff2\") format(\"woff2\"),\n url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900.ttf\") format(\"truetype\");\n}\n@font-face {\n font-family: Lato;\n font-weight: 900;\n font-style: italic;\n font-display: swap;\n src:\n url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900italic.woff2\") format(\"woff2\"),\n url(\"/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-v24-latin-900italic.ttf\") format(\"truetype\");\n}\n@font-face {\n font-family: Myriad;\n font-weight: 300 900;\n font-style: normal;\n font-display: swap;\n font-stretch: 70% 110%;\n src:\n url(\"/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable.woff2\") format(\"woff2\"),\n url(\"/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable.ttf\") format(\"truetype\");\n}\n@font-face {\n font-family: Myriad;\n font-weight: 300 900;\n font-style: italic;\n font-display: swap;\n font-stretch: 70% 110%;\n src:\n url(\"/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable-italic.woff2\") format(\"woff2\"),\n url(\"/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable-italic.ttf\") format(\"truetype\");\n}\n:root {\n /* Couleurs */\n --couleur-gris: #eceaeb;\n --couleur-bordeaux: #490918;\n --couleur-jaune: #ebffb8;\n --couleur-noir: #202020;\n /* Polices */\n --police-lato: \"Lato\", sans-serif;\n --police-myriad: \"Myriad\", sans-serif;\n}\n\n/**\n * 1. Utilise un meilleur modèle de boîte.\n * 2. Rendu spécifique du texte pour Safari/iOS.\n * 3. Rendu plus précis du texte.\n */\nhtml {\n box-sizing: border-box; /* 1 */\n -webkit-font-smoothing: antialiased; /* 2 */\n text-size-adjust: none; /* 2 */\n text-rendering: geometricprecision; /* 3 */\n}\n\n/**\n * Réinitialise avec des styles par défaut plus simples.\n *\n * 1. Hérite du modèle de boîte du document par défaut.\n * 2. Pas de marges par défaut.\n * 3. Hérite par défaut des styles de texte et de couleur.\n */\n*, *::before, *::after {\n box-sizing: inherit; /* 1 */\n margin: 0; /* 2 */\n padding: 0; /* 2 */\n font: inherit; /* 3 */\n color: inherit; /* 3 */\n}\n\n/**\n * 1. Utilise une couleur d'arrière-plan définie.\n * 2. Force une hauteur minimale de page occupant l'intégralité de la vue du navigateur.\n */\nbody {\n min-height: 100vh; /* 2 */\n background: var(--couleur-gris); /* 1 */\n}\n\n/**\n * Force l'héritage des styles pour ces éléments\n */\nbutton, input, select, textarea {\n font: inherit;\n}\n\nbody {\n font: 1rem/1.4 var(--police-myriad) 0.5px;\n color: var(--couleur-noir);\n}\n\n/**\n * 1. Facilite l'usages des images.\n * 2. Empêche les images de dépasser leur conteneur.\n */\nimg, picture {\n display: block; /* 1 */\n max-width: 100%; /* 2 */\n}\n\n/**\n * 1. Change la « bordure » de base.\n * 2. Ajoute un contour, qui sera colorisé au focus.\n * 3. Anime le changement de couleur des texte, bordure et contour.\n */\na {\n /* Couleurs */\n --lien-contour-couleur-focus: var(--couleur-noir); /* 1 */\n text-decoration: underline solid; /* 1 */\n text-decoration-color: transparent; /* 1 */\n text-decoration-skip-ink: auto; /* 1 */\n outline: 1px solid transparent; /* 2 */\n outline-offset: initial; /* 2 */\n transition:\n 0.2s color,\n 0.2s font-weight,\n 0.2s background,\n 0.2s outline-color,\n 0.2s border-color,\n 0.2s text-decoration-color; /* 3 */\n text-decoration-skip: edges; /* 1 */\n /* Change les couleurs de l'arrière-plan et du contour pour marquer le focus. */\n /**\n * Lien ressemblant visuellement à un bouton.\n */\n}\na:focus, a:focus-visible {\n outline-color: var(--lien-contour-couleur-focus);\n}\na.lien-bouton {\n /* Marges */\n --lien-bouton-marges-internes-bloc: 0.33rem;\n /* Couleurs */\n --lien-bouton-arriere-plan-couleur-survol: var(--couleur-jaune);\n padding: var(--lien-bouton-marges-internes-bloc) 0;\n border: 1px solid var(--couleur-noir);\n /* Change la couleur de l'arrière-plan pour marquer le focus. */\n /* 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. */\n /* Change la couleur de l'arrière-plan pour marquer le survol. */\n}\na.lien-bouton:focus, a.lien-bouton:focus-visible {\n background: var(--lien-bouton-arriere-plan-couleur-survol);\n}\na.lien-bouton:active {\n border-color: var(--lien-bouton-arriere-plan-couleur-survol);\n}\n@media (hover: hover) {\n a.lien-bouton:hover {\n background: var(--lien-bouton-arriere-plan-couleur-survol);\n }\n}\n\n/**\n * Réinitialise les styles des listes non ordonnées.\n *\n * 1. Pas de puce.\n */\nul {\n list-style: none; /* 1 */\n /**\n * Utilise un SVG comme puce de liste via l'emploi d'un arrière-plan.\n *\n * 1. Ajoute de la marge interne pour que la puce ait de la place.\n * 2. Centre verticalement la puce et la dimensionne correctement.\n */\n}\nul.avec-puce-cercle {\n /* Marges */\n --liste-puce-cercle-lien-marges-internes-ligne-debut: 2ch;\n /* Dispositions */\n --liste-puce-cercle-puce-position-horizontale: 1ch;\n /* Tailles */\n --liste-puce-cercle-puce-taille: 1.25ex;\n}\nul.avec-puce-cercle a {\n padding-left: var(--liste-puce-cercle-lien-marges-internes-ligne-debut); /* 1 */\n background: no-repeat var(--liste-puce-cercle-puce-position-horizontale) center/var(--liste-puce-cercle-puce-taille)\n url(\"/app/themes/haiku-atelier-2024/assets/img/icons/dot.svg\"); /* 2 */\n}\n\n#en-tete {\n /* Marges */\n --en-tete-marges-internes-ligne: 2rem;\n --en-tete-marges-internes-bloc: 1rem;\n /* Dimensions */\n --en-tete-hauteur: 80px;\n --en-tete-logo-longueur: 120px;\n display: flex;\n flex-flow: row nowrap;\n place-items: center;\n justify-content: space-between;\n height: var(--en-tete-hauteur);\n padding: var(--en-tete-marges-internes-bloc) var(--en-tete-marges-internes-ligne);\n background: var(--couleur-gris);\n border: 1px solid var(--couleur-noir);\n /* TODO: Déplacer au sein d'un Composant ? */\n}\n#en-tete .logo {\n width: var(--en-tete-logo-longueur);\n}\n#en-tete .menu-navigation {\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n flex: 1;\n text-align: center;\n text-transform: lowercase;\n /**\n * Le conteneur d'une entrée du menu, nécessaire pour que le changement de couleur d'arrière-\n * plan au survol soit possible.\n *\n * 1. Passe en bloc en ligne pour pouvoir ajouter des marges internes en bloc.\n * 2. Augmente les marges internes pour créer des liens plus imposants.\n * 3. Corrige la disposition de la puce, étant donné les marges internes en ligne augmentées.\n * 4. Aligne le texte au centre.\n */\n}\n#en-tete .menu-navigation ul {\n display: flex;\n grid-column: 2;\n flex-flow: row nowrap;\n gap: max(2rem, 5vw);\n justify-content: space-between;\n}\n#en-tete .menu-navigation__entree {\n /* Couleurs */\n --nav-entree-arriere-plan-couleur: var(--couleur-jaune);\n /* Marges */\n --nav-entree-marges-internes-bloc: 0.33rem;\n --nav-entree-marges-internes-ligne: 3rem;\n --liste-puce-cercle-lien-marges-internes-ligne-debut: calc(1rem + 1.5ch); /* 3 */\n /* Dispositions */\n --liste-puce-cercle-puce-position-horizontale: 3.5ch; /* 3 */\n transition: 0.2s background;\n}\n#en-tete .menu-navigation__entree a {\n display: inline-block; /* 1 */\n padding: var(--nav-entree-marges-internes-bloc) var(--nav-entree-marges-internes-ligne); /* 2 */\n text-align: center; /* 4 */\n}\n@media (hover: hover) {\n #en-tete .menu-navigation__entree:hover {\n background: var(--nav-entree-arriere-plan-couleur);\n }\n}\n#en-tete .compte-panier {\n display: flex;\n flex-flow: row nowrap;\n gap: max(1rem, 2vw);\n place-items: center;\n text-align: center;\n /**\n * 1. Permet d'éviter un agrandissement de l'élément avec plus de 9 articles.\n */\n}\n#en-tete .compte-panier a {\n min-width: 9ch; /* 1 */\n text-transform: lowercase;\n}\n#en-tete .compte-panier a.lien-compte {\n text-decoration: underline solid;\n text-decoration-color: transparent;\n text-decoration-skip-ink: auto;\n border-color: transparent;\n text-decoration-skip: edges;\n}\n@media (hover: hover) {\n #en-tete .compte-panier a.lien-compte:hover {\n text-decoration-color: var(--couleur-noir);\n }\n}\n#en-tete .compte-panier a[data-contient-articles=true] {\n background: var(--couleur-jaune);\n}\n\n#menu-categories-produits {\n /* Dimensions */\n --menu-entree-longueur-minimale: 13ch;\n /* Marges */\n --menu-entree-marges-internes-ligne: 1rem;\n /**\n * Liste des Catégories de Produits.\n *\n * 1. Toutes les entrées font la même longueur, en respectant une contrainte de longueur\n * minimale. Elles se disposent de manière à occuper tout l'espace disponible sans aller à la\n * ligne.\n */\n}\n#menu-categories-produits ul {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(var(--menu-entree-longueur-minimale), 1fr)); /* 1 */\n place-items: center;\n /**\n * 1. Force chaque entrée à occuper tout l'espace alloué par grid.\n */\n}\n#menu-categories-produits ul li {\n width: 100%; /* 1 */\n font-weight: 450;\n font-style: italic;\n color: var(--couleur-gris);\n text-align: center;\n text-transform: uppercase;\n letter-spacing: 1px;\n background: var(--couleur-noir);\n /**\n * 1. Permet de créer des marges verticales.\n * 2. Hérite de la longueur du conteneur.\n * 3. Surchargement de styles pour les liens.\n */\n}\n#menu-categories-produits ul li:active a {\n font-weight: 500;\n}\n#menu-categories-produits ul li a {\n display: inline-block; /* 1 */\n width: inherit; /* 2 */\n padding: var(--menu-entree-marges-internes-ligne) 0;\n border-right: 1px solid var(--couleur-gris);\n border-left: 1px solid var(--couleur-gris);\n outline: initial; /* 3 */\n}\n#menu-categories-produits ul li a:focus, #menu-categories-produits ul li a:focus-visible {\n color: var(--couleur-jaune);\n outline: initial; /* 3 */\n}\n@media (hover: hover) {\n #menu-categories-produits ul li a:hover {\n color: var(--couleur-jaune);\n outline: initial; /* 3 */\n }\n}\n#menu-categories-produits ul li:first-of-type a {\n border-left: initial;\n}\n#menu-categories-produits ul li:last-of-type a {\n border-right: initial;\n}\n\n#pied-de-page {\n display: grid;\n grid-template-columns: 1fr 1fr;\n place-items: center;\n align-self: end;\n min-width: 100vw;\n padding: 1rem 2rem;\n line-height: 1.5;\n background: var(--couleur-jaune);\n border: 1px solid var(--couleur-noir);\n}\n#pied-de-page .zone-menu-navigation-secondaire {\n justify-self: start;\n width: 100%;\n height: 100%;\n text-transform: lowercase;\n}\n#pied-de-page .zone-liens-reseaux-sociaux {\n justify-items: end;\n width: 100%;\n height: 100%;\n text-align: right;\n}\n@media (hover: hover) {\n #pied-de-page a:hover {\n text-decoration-color: var(--couleur-noir);\n }\n}\n\n/*# sourceMappingURL=main.css.map */\n"],"names":[]} \ No newline at end of file diff --git a/web/app/themes/haiku-atelier-2024/src/sass/abstracts/_variables.scss b/web/app/themes/haiku-atelier-2024/src/sass/abstracts/_variables.scss index 0a0b4e41..912e97e5 100644 --- a/web/app/themes/haiku-atelier-2024/src/sass/abstracts/_variables.scss +++ b/web/app/themes/haiku-atelier-2024/src/sass/abstracts/_variables.scss @@ -2,10 +2,10 @@ :root { /* Couleurs */ - --couleur-noir: #000; --couleur-gris: #eceaeb; - --couleur-jaune: #ebffb8; --couleur-bordeaux: #490918; + --couleur-jaune: #ebffb8; + --couleur-noir: #202020; /* Polices */ --police-lato: "Lato", sans-serif; diff --git a/web/app/themes/haiku-atelier-2024/src/sass/base/_base.scss b/web/app/themes/haiku-atelier-2024/src/sass/base/_base.scss index 4747d35e..0efd27fa 100644 --- a/web/app/themes/haiku-atelier-2024/src/sass/base/_base.scss +++ b/web/app/themes/haiku-atelier-2024/src/sass/base/_base.scss @@ -4,14 +4,14 @@ /** * 1. Utilise un meilleur modèle de boîte. - * 2. Rendu des polices pour Safari/iOS - * 3. Rendu plus précis du texte + * 2. Rendu spécifique du texte pour Safari/iOS. + * 3. Rendu plus précis du texte. */ html { box-sizing: border-box; /* 1 */ -webkit-font-smoothing: antialiased; /* 2 */ text-size-adjust: none; /* 2 */ - text-rendering: geometricprecision; + text-rendering: geometricprecision; /* 3 */ } /** @@ -30,8 +30,17 @@ html { } /** - * 1. Utilise une couleur d'arrière-plan définie + * 1. Utilise une couleur d'arrière-plan définie. + * 2. Force une hauteur minimale de page occupant l'intégralité de la vue du navigateur. */ body { + min-height: 100vh; /* 2 */ background: var(--couleur-gris); /* 1 */ } + +/** + * Force l'héritage des styles pour ces éléments + */ +button, input, select, textarea { + font: inherit; +} diff --git a/web/app/themes/haiku-atelier-2024/src/sass/base/_typographie.scss b/web/app/themes/haiku-atelier-2024/src/sass/base/_typographie.scss index 56c7a464..263c3f3a 100644 --- a/web/app/themes/haiku-atelier-2024/src/sass/base/_typographie.scss +++ b/web/app/themes/haiku-atelier-2024/src/sass/base/_typographie.scss @@ -1,6 +1,6 @@ // Styles typographiques de base body { - font: 1rem/1.4 var(--police-lato) 0.5px; + font: 1rem/1.4 var(--police-myriad) 0.5px; color: var(--couleur-noir); } diff --git a/web/app/themes/haiku-atelier-2024/src/sass/base/elements/_images.scss b/web/app/themes/haiku-atelier-2024/src/sass/base/elements/_images.scss new file mode 100644 index 00000000..f51a1330 --- /dev/null +++ b/web/app/themes/haiku-atelier-2024/src/sass/base/elements/_images.scss @@ -0,0 +1,10 @@ +// Styles de base pour les images (, ). + +/** + * 1. Facilite l'usages des images. + * 2. Empêche les images de dépasser leur conteneur. + */ +img, picture { + display: block; /* 1 */ + max-width: 100%; /* 2 */ +} diff --git a/web/app/themes/haiku-atelier-2024/src/sass/base/elements/_liens.scss b/web/app/themes/haiku-atelier-2024/src/sass/base/elements/_liens.scss index 23fcb24c..25bdbd82 100644 --- a/web/app/themes/haiku-atelier-2024/src/sass/base/elements/_liens.scss +++ b/web/app/themes/haiku-atelier-2024/src/sass/base/elements/_liens.scss @@ -1,18 +1,28 @@ // Styles de base pour les liens (). /** - * 1. Désactive la bordure. + * 1. Change la « bordure » de base. * 2. Ajoute un contour, qui sera colorisé au focus. - * 3. Anime le changement de couleur du bordure et du contour. + * 3. Anime le changement de couleur des texte, bordure et contour. */ a { /* Couleurs */ - --lien-contour-couleur-focus: var(--couleur-noir); + --lien-contour-couleur-focus: var(--couleur-noir); /* 1 */ - text-decoration: none; /* 1 */ + text-decoration: underline solid; /* 1 */ + text-decoration-color: transparent; /* 1 */ + text-decoration-skip-ink: auto; /* 1 */ outline: 1px solid transparent; /* 2 */ outline-offset: initial; /* 2 */ - transition: 0.2s outline-color, 0.2s border-color; /* 3 */ + 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. */ &:focus, &:focus-visible { @@ -24,7 +34,7 @@ a { */ &.lien-bouton { /* Marges */ - --lien-bouton-marges-internes-bloc: 0.25rem; + --lien-bouton-marges-internes-bloc: 0.33rem; /* Couleurs */ --lien-bouton-arriere-plan-couleur-survol: var(--couleur-jaune); diff --git a/web/app/themes/haiku-atelier-2024/src/sass/layouts/_en-tete.scss b/web/app/themes/haiku-atelier-2024/src/sass/layouts/_en-tete.scss index 68c1bc5b..ccfb85f9 100644 --- a/web/app/themes/haiku-atelier-2024/src/sass/layouts/_en-tete.scss +++ b/web/app/themes/haiku-atelier-2024/src/sass/layouts/_en-tete.scss @@ -6,7 +6,7 @@ --en-tete-marges-internes-bloc: 1rem; /* Dimensions */ - --en-tete-hauteur: 90px; + --en-tete-hauteur: 80px; --en-tete-logo-longueur: 120px; display: flex; @@ -34,7 +34,7 @@ display: flex; grid-column: 2; flex-flow: row nowrap; - gap: max(2rem, 8vw); + gap: max(2rem, 5vw); justify-content: space-between; } @@ -59,6 +59,8 @@ /* Dispositions */ --liste-puce-cercle-puce-position-horizontale: 3.5ch; /* 3 */ + transition: 0.2s background; + a { display: inline-block; /* 1 */ padding: var(--nav-entree-marges-internes-bloc) var(--nav-entree-marges-internes-ligne); /* 2 */ @@ -73,15 +75,39 @@ } } - .panier { - display: inline-flex; + .compte-panier { + display: flex; flex-flow: row nowrap; - place-content: center; + gap: max(1rem, 2vw); place-items: center; text-align: center; - &__lien { - min-width: 10ch; + /** + * 1. Permet d'éviter un agrandissement de l'élément avec plus de 9 articles. + */ + a { + min-width: 9ch; /* 1 */ + text-transform: lowercase; + + &.lien-compte { + text-decoration: underline solid; + text-decoration-color: transparent; + text-decoration-skip-ink: auto; + border-color: transparent; + text-decoration-skip: edges; + + @media (hover: hover) { + &:hover { + text-decoration-color: var(--couleur-noir); + + // border-bottom-color: var(--couleur-noir); + } + } + } + + &[data-contient-articles="true"] { + background: var(--couleur-jaune); + } } } } diff --git a/web/app/themes/haiku-atelier-2024/src/sass/layouts/_menu-categories-produits.scss b/web/app/themes/haiku-atelier-2024/src/sass/layouts/_menu-categories-produits.scss index c9ec54a4..c18b54af 100644 --- a/web/app/themes/haiku-atelier-2024/src/sass/layouts/_menu-categories-produits.scss +++ b/web/app/themes/haiku-atelier-2024/src/sass/layouts/_menu-categories-produits.scss @@ -1,60 +1,73 @@ // Styles pour le menu des Catégories de Produits #menu-categories-produits { + /* Dimensions */ + --menu-entree-longueur-minimale: 13ch; + + /* Marges */ + --menu-entree-marges-internes-ligne: 1rem; + + /** + * 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. + */ ul { display: grid; - grid-template-columns: repeat(auto-fit, minmax(21ch, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(var(--menu-entree-longueur-minimale), 1fr)); /* 1 */ place-items: center; + /** + * 1. Force chaque entrée à occuper tout l'espace alloué par grid. + */ li { - width: 100%; + width: 100%; /* 1 */ + font-weight: 450; font-style: italic; - color: white; + color: var(--couleur-gris); text-align: center; text-transform: uppercase; - background: black; + letter-spacing: 1px; + background: var(--couleur-noir); - &:focus-within + li a { - // border-left-color: var(--couleur-jaune); - } - - &:has(+ li:focus-within) a { - // border-right-color: var(--couleur-jaune); + &:active a { + font-weight: 500; } + /** + * 1. Permet de créer des marges verticales. + * 2. Hérite de la longueur du conteneur. + * 3. Surchargement de styles pour les liens. + */ a { - display: inline-block; - width: inherit; - padding: 1rem 0; + display: inline-block; /* 1 */ + width: inherit; /* 2 */ + padding: var(--menu-entree-marges-internes-ligne) 0; border-right: 1px solid var(--couleur-gris); border-left: 1px solid var(--couleur-gris); - outline: initial; + outline: initial; /* 3 */ &:focus, &:focus-visible { color: var(--couleur-jaune); - border-right-color: var(--couleur-jaune); - border-left-color: var(--couleur-jaune); - outline: initial; + outline: initial; /* 3 */ } @media (hover: hover) { &:hover { color: var(--couleur-jaune); - outline: initial; + outline: initial; /* 3 */ } } } - &:first-of-type { - a { - border-left: initial; - } + &:first-of-type a { + border-left: initial; } - &:last-of-type { - a { - border-right: initial; - } + &:last-of-type a { + border-right: initial; } } } diff --git a/web/app/themes/haiku-atelier-2024/src/sass/main.scss b/web/app/themes/haiku-atelier-2024/src/sass/main.scss index e54e7849..1e3ec841 100644 --- a/web/app/themes/haiku-atelier-2024/src/sass/main.scss +++ b/web/app/themes/haiku-atelier-2024/src/sass/main.scss @@ -8,6 +8,7 @@ // 1.2 Éléments @use "base/elements/boutons" as boutons; +@use "base/elements/images" as images; @use "base/elements/liens" as liens; @use "base/elements/listes" as listes;