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 17830e6b..0eca78be 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,1077 +1,2 @@ -@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+0, U+D, U+20-7E, U+A0-36F, U+374-375, U+37A-37E, U+384-38A, U+38C, U+38E-3A1, U+3A3-3CE, U+3D0-486, U+488-513, U+E3F, 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+0, U+D, U+20-7E, U+A0-36F, U+374-375, U+37A-37E, U+384-38A, U+38C, U+38E-3A1, U+3A3-3CE, U+3D0-486, U+488-513, U+E3F, 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 { - --couleur-blanc: #fff; - --couleur-gris: #eceaeb; - --couleur-gris-fonce: gray; - --couleur-gris-fonce-fond: #808080cc; - --couleur-bordeaux: #490918; - --couleur-bordeaux-fond: #490918cc; - --couleur-jaune: #ebffb8; - --couleur-jaune-fond: #ebffb8cc; - --couleur-noir: #202020; - --couleur-fond: #eceaebcc; - --police-lato: "Lato", sans-serif; - --police-myriad: "Myriad", sans-serif; - --hauteur-ligne-classique: 1.5; - --hauteur-ligne-rapprochee: 1; - --espacement-inter-lettres-rapproche-s: -.5px; - --espacement-inter-lettres-etendu-s: .5px; - --espacement-inter-lettres-etendu-m: 1px; - --espacement-inter-lettres-etendu-l: 1.5px; - --espacement-inter-lettres-etendu-xl: 2px; - --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)); - --espace-xs: .25rem; - --espace-s: .5rem; - --espace-m: 1rem; - --espace-l: 1.25rem; - --espace-xl: 2rem; -} - -html { - box-sizing: border-box; -} - -*, :before, :after { - box-sizing: inherit; - font: inherit; - color: inherit; - margin: 0; - padding: 0; -} - -body { - accent-color: var(--couleur-jaune); - background: var(--couleur-gris); -} - -button, input, select, textarea { - font: inherit; -} - -::selection { - background: var(--couleur-jaune); -} - -[hidden] { - display: none !important; -} - -[disabled] { - cursor: not-allowed; -} - -@media (prefers-reduced-motion) { - *, :before, :after { - scroll-behavior: auto !important; - transition: none !important; - animation-duration: 0s !important; - } -} - -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; - color: var(--couleur-noir); - text-decoration-skip-ink: auto; - text-size-adjust: none; - text-rendering: geometricprecision; - letter-spacing: var(--espacement-inter-lettres-etendu-s); -} - -strong { - font-weight: 600; -} - -em { - font-style: italic; -} - -button { - all: initial; - cursor: pointer; - text-align: center; - letter-spacing: inherit; - font-family: Lato; -} - -button.bouton-case-pleine { - width: 100%; - height: 100%; -} - -button.bouton-case-pleine--blanc-sur-noir { - color: var(--couleur-blanc); - text-transform: uppercase; - letter-spacing: var(--espacement-inter-lettres-etendu-m); - background: var(--couleur-noir); - font-style: italic; -} - -button:disabled, button[disabled] { - background: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%) 1px .5px / 2px 2px; -} - -input, select, textarea { - padding: var(--espace-xs); - background: var(--couleur-gris); - border: 1px solid var(--couleur-noir); - outline: 1px solid #0000; - transition: background .2s, outline .2s; -} - -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 .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: background .2s; -} - -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; - font-size: .9rem; -} - -img, picture { - max-width: 100%; - display: block; -} - -img { - object-fit: cover; - background: var(--couleur-jaune); -} - -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: var(--espace-xs); - --lien-bouton-marges-internes-ligne: var(--espace-m); - --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); -} - -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); - } - - a:not([class]):hover { - text-decoration-color: var(--couleur-noir); - } -} - -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"); -} - -body:has(#menu-mobile:not([aria-hidden="true"])) { - touch-action: none; - overflow: hidden; -} - -#menu-mobile { - --menu-mobile-hauteur: calc(100svh - var(--en-tete-hauteur)); - z-index: 997; - inset: var(--en-tete-hauteur) 0 0 0; - overscroll-behavior: none; - height: var(--menu-mobile-hauteur); - transition: display .4s; - transition: display .4s allow-discrete; - -webkit-overflow-scrolling: none; - width: 100vw; - display: flex; - position: fixed; - overflow: hidden; -} - -#menu-mobile[aria-hidden="true"] { - animation: .4s both fade-out; - display: none; -} - -#menu-mobile[aria-hidden="true"] .menu-modale__fond { - animation: .4s both fade-out; -} - -#menu-mobile .menu-modale__fond { - z-index: 998; - inset: var(--en-tete-hauteur) 0 0 0; - height: var(--menu-mobile-hauteur); - opacity: 0; - background-color: var(--couleur-fond); - animation: .4s both fade-in; - position: fixed; -} - -#menu-mobile .menu-modale__conteneur { - z-index: 999; - padding: var(--espace-xl); - opacity: 0; - background-color: var(--couleur-gris); - border-bottom: 1px solid var(--couleur-noir); - flex-flow: column; - width: 100%; - height: fit-content; - animation: .4s .2s both fade-in; - display: flex; - position: relative; -} - -#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; - 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); -} - -@keyframes fade-in { - to { - opacity: 1; - } -} - -@keyframes fade-out { - to { - opacity: 0; - } -} - -@keyframes slide-in { - to { - transform: translateY(0); - } -} - -#en-tete { - --en-tete-marges-internes-ligne: var(--espace-xl); - --en-tete-marges-internes-bloc: var(--espace-m); - --en-tete-section-hauteur: var(--en-tete-hauteur); - --en-tete-logo-longueur: 80px; - z-index: 60; - 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); - flex-flow: row; - justify-content: space-between; - place-items: center; - min-width: 100vw; - max-width: 100vw; - display: flex; - position: fixed; - top: 0; -} - -#en-tete .logo { - width: var(--en-tete-logo-longueur); -} - -#en-tete .logo picture, #en-tete .logo img { - background: none; -} - -#en-tete .logo button { - align-content: center; - display: block; -} - -#en-tete .menu-navigation { - text-align: center; - text-transform: lowercase; - flex: 1; - grid-template-columns: 1fr auto 1fr; - font-size: 1.1rem; - display: grid; -} - -#en-tete .menu-navigation ul { - gap: var(--espace-m); - flex-flow: row; - grid-column: 2; - justify-content: space-between; - display: flex; -} - -#en-tete .menu-navigation__entree { - --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); - --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; -} - -#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 { - text-align: center; - flex-flow: row; - place-items: center; - gap: 1rem; - display: flex; -} - -#en-tete .compte-panier[disabled] { - background: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%) 1px .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 #0000; -} - -#en-tete .compte-panier a { - text-transform: lowercase; - min-width: 10ch; - font-size: 1.1rem; -} - -#en-tete .compte-panier a.lien-compte { - border-color: #0000; -} - -#en-tete .compte-panier a[data-contient-articles="true"] { - background: var(--couleur-jaune); -} - -#menu-categories-produits { - --menu-entree-longueur-minimale: 13ch; - --menu-section-hauteur: var(--menu-categories-produits-hauteur); - --menu-section-marges-bloc-debut: var(--en-tete-hauteur); - --menu-entree-marges-internes-ligne: var(--espace-m); - margin-top: var(--menu-section-marges-bloc-debut); -} - -#menu-categories-produits ul { - grid-template-columns: repeat(auto-fit, minmax(var(--menu-entree-longueur-minimale), 1fr)); - place-items: center; - gap: 1px; - display: grid; -} - -#menu-categories-produits ul li { - color: var(--couleur-gris); - text-align: center; - text-transform: uppercase; - letter-spacing: var(--espacement-inter-lettres-etendu-m); - background: var(--couleur-noir); - width: 100%; - font-style: italic; - font-weight: 450; -} - -#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 { - width: inherit; - padding: var(--menu-entree-marges-internes-ligne) 0; - 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; - } -} - -@media (width <= 900px) { - #menu-categories-produits ul { - --menu-entree-marges-internes-ligne: var(--espace-s); - flex-flow: wrap; - font-size: .9rem; - display: flex; - } - - #menu-categories-produits ul li { - flex-grow: 1; - width: min(140px, 100%); - } - - #menu-categories-produits ul li a { - border: initial; - width: 100%; - } -} - -.photos-produit { - --colonne-gauche-position-haut: var(--menu-categories-produits-hauteur); - --colonne-gauche-photo-hauteur: calc(100svh - var(--menu-categories-produits-hauteur)); - --colonne-droite-photo-hauteur-minimale: calc(100svh + var(--en-tete-hauteur) + var(--menu-categories-produits-hauteur)); - --colonne-photo-longueur-minimale: 30rem; - --section-marges-externes-bloc-fin: 1rem; - flex-flow: wrap; - max-width: 100%; - display: flex; -} - -.photos-produit > section { - width: min(var(--colonne-photo-longueur-minimale), 100%); - flex-flow: column; - flex-grow: 1; - display: flex; - position: relative; -} - -.photos-produit > section.colonne-gauche { - top: var(--colonne-gauche-position-haut); - height: var(--colonne-gauche-photo-hauteur); - position: sticky; -} - -.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 figure picture img:only-child { - min-height: var(--colonne-droite-photo-hauteur-minimale); - max-height: var(--colonne-droite-photo-hauteur-minimale); -} - -.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: 900px; - grid-auto-rows: 1fr; - grid-template-columns: repeat(auto-fit, minmax(var(--carte-produit-longueur-minimale), 1fr)); - min-height: var(--grille-produits-hauteur-minimale); - gap: 1px; - display: grid; -} - -.grille-produits article { - max-width: var(--carte-produit-longueur-maximale); - box-shadow: 0 0 0 1px var(--couleur-noir); -} - -.grille-produits article figure { - row-gap: var(--espace-xl); - padding: var(--espace-m); - flex-flow: column; - display: flex; -} - -.grille-produits article figure a { - position: relative; -} - -@media (hover: hover) { - .grille-produits article figure a:hover .produit__illustration__survol { - visibility: visible; - opacity: 1; - transition: opacity .3s, visibility .3s; - } -} - -.grille-produits article figure .produit__illustration__principale { - display: block; -} - -.grille-produits article figure .produit__illustration__survol { - visibility: hidden; - opacity: 0; - width: 100%; - height: 100%; - transition: opacity .15s, visibility .15s; - display: block; - position: absolute; - top: 0; - left: 0; -} - -.grille-produits article figure img { - aspect-ratio: 9 / 16; - object-fit: cover; - width: 100%; - max-height: 70vh; -} - -.grille-produits article figure figcaption { - margin-bottom: var(--espace-xl); - flex-flow: row; - justify-content: space-between; - display: flex; -} - -.grille-produits article figure figcaption h3 { - letter-spacing: var(--espacement-inter-lettres-etendu-m); - font-style: italic; -} - -.grille-produits article figure figcaption p { - letter-spacing: var(--espacement-inter-lettres-rapproche-s); - font-weight: 500; -} - -.grille-produits__aucun-produit { - min-height: var(--aucun-produit-hauteur); - text-align: center; - grid-column: span 3; - align-content: 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; - } -} - -.informations-produit { - --boite-couleur-fond: #ffffffe6; - --boite-position-basse: var(--espace-m); - --boite-longueur: 70ch; - --section-marges-internes: var(--espace-m); - bottom: var(--boite-position-basse); - width: 0; - height: 0; - position: sticky; - overflow: visible; -} - -.informations-produit__conteneur { - transform: translate(calc(50vw - var(--boite-longueur) / 2), -100%); - width: var(--boite-longueur); - max-width: var(--boite-longueur); - border: 1px solid var(--couleur-noir); - display: grid; -} - -.informations-produit__conteneur > section { - padding: var(--section-marges-internes); - background: var(--boite-couleur-fond); - flex-flow: row; - height: 100%; - display: flex; -} - -.informations-produit__conteneur > section + section { - border-top: 1px solid var(--couleur-noir); -} - -.informations-produit .onglets-details-produit { - padding: initial; - grid-template-rows: auto min-content; - grid-template-columns: repeat(3, minmax(0, 1fr)); - display: grid; -} - -.informations-produit .onglets-details-produit > section { - padding: var(--section-marges-internes); - grid-column: span 3; - font-weight: 350; - overflow-y: auto; -} - -.informations-produit .onglets-details-produit > section ul { - list-style: inside; -} - -.informations-produit .onglets-details-produit > section > * + * { - margin-top: 1lh; -} - -.informations-produit .onglets-details-produit > ul { - text-align: center; - text-transform: lowercase; - letter-spacing: var(--espacement-inter-lettres-etendu-m); - grid-area: 2 / span 3; - grid-template-columns: repeat(3, minmax(0, 1fr)); - display: grid; -} - -.informations-produit .onglets-details-produit > ul li { - width: 100%; -} - -.informations-produit .onglets-details-produit > ul li:first-of-type a, .informations-produit .onglets-details-produit > ul li:last-of-type a { - border-left-color: #0000; - border-right-color: #0000; -} - -.informations-produit .onglets-details-produit > ul li a { - padding: var(--espace-xs) 0; - border-top: 1px solid #0000; - border-right: 1px solid var(--couleur-noir); - border-left: 1px solid var(--couleur-noir); - width: 100%; - height: 100%; - display: inline-block; -} - -.informations-produit .onglets-details-produit > ul li a[aria-selected="true"] { - border-top-color: #0000; -} - -.informations-produit .onglets-details-produit > ul li a:focus, .informations-produit .onglets-details-produit > ul li a:focus-visible { - outline-color: #0000; -} - -.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 { - column-gap: var(--espace-xl); - font-style: italic; - font-weight: 500; - line-height: var(--hauteur-ligne-rapprochee); - flex-flow: row; - justify-content: space-between; - place-items: center; - display: flex; -} - -.informations-produit .selecteur-produit__nom { - letter-spacing: 1px; -} - -.informations-produit .selecteur-produit__selection-variation { - text-transform: lowercase; - place-items: center; - font-weight: 400; - display: flex; -} - -.informations-produit .selecteur-produit__selection-variation label { - height: 100%; - margin-right: 1ch; -} - -.informations-produit .selecteur-produit__selection-variation__selecteurs { - position: relative; -} - -.informations-produit .selecteur-produit__selection-variation__selecteurs:after { - pointer-events: none; - content: " "; - text-align: center; - visibility: visible; - opacity: 1; - background: url("/app/themes/haiku-atelier-2024/assets/img/icons/arrow.svg") no-repeat; - width: .9rem; - height: .9rem; - transition: opacity .2s, visibility .2s; - display: inline-block; - position: absolute; - top: 10px; - right: .4rem; -} - -@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 { - padding: var(--espace-s) var(--espace-xl); - text-align: center; - appearance: none; - border: 1px solid var(--couleur-noir); - background: #eceaebe6; - min-width: 4rem; - position: relative; -} - -@supports selector(:user-valid) { - .informations-produit .selecteur-produit__selection-variation select:user-valid { - background: #ebffb8e6; - } -} - -.informations-produit .selecteur-produit__selection-variation option { - background: #eceaebe6; -} - -.informations-produit .selecteur-produit__prix { - font-style: initial; -} - -.informations-produit .actions-produit { - padding: initial; - background: var(--couleur-jaune); - border-top: initial; - transition: background .2s; - overflow: hidden; -} - -.informations-produit .actions-produit:has(button[disabled]) { - background: #eceaebe6; -} - -.informations-produit .actions-produit button { - height: initial; - padding: var(--section-marges-internes); - font-variation-settings: "wght" 400; - text-transform: uppercase; - letter-spacing: var(--espacement-inter-lettres-etendu-m); - font-style: italic; - transition: font-variation-settings .2s; -} - -@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-xl); - bottom: initial; - width: initial; - height: initial; - position: relative; - } - - .informations-produit__conteneur { - transform: initial; - width: initial; - max-width: initial; - border-right: initial; - border-left: initial; - } -} - -@media (hover: hover) { - .selecteur-personnalise { - display: block !important; - } - - .selecteur-natif:focus + .selecteur-personnalise { - display: none !important; - } -} - -.produits-similaires { - --carte-produit-longueur-minimale: 448px; - margin-top: var(--espace-m); - grid-template-rows: 1fr auto; - grid-template-columns: repeat(3, 1fr); - grid-template-areas: "en-tete en-tete en-tete" - "produits produits produits"; - place-items: center; - display: grid; -} - -.produits-similaires header { - padding: var(--espace-l) 0 var(--espace-m); - color: var(--couleur-blanc); - text-align: center; - background: var(--couleur-noir); - grid-area: en-tete; - width: 100%; -} - -.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 { - grid-area: produits; - grid-auto-rows: 1fr; - grid-template-columns: repeat(auto-fit, minmax(var(--carte-produit-longueur-minimale), 1fr)); - gap: 1px; - width: 100%; - display: grid; -} - -.produits-similaires .grille-produits-similaires article { - box-shadow: 0 0 0 1px var(--couleur-noir); -} - -.produits-similaires .grille-produits-similaires article figure { - row-gap: var(--espace-xl); - padding: var(--espace-m); - flex-flow: column; - display: flex; -} - -.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: opacity .3s, visibility .3s; - } -} - -.produits-similaires .grille-produits-similaires article figure .produit__illustration__principale { - display: block; -} - -.produits-similaires .grille-produits-similaires article figure .produit__illustration__survol { - visibility: hidden; - opacity: 0; - width: 100%; - height: 100%; - transition: opacity .15s, visibility .15s; - display: block; - position: absolute; - top: 0; - left: 0; -} - -.produits-similaires .grille-produits-similaires article figure img { - aspect-ratio: 9 / 16; - object-fit: cover; - width: 100%; - max-height: 70svh; -} - -.produits-similaires .grille-produits-similaires article figure figcaption { - margin-bottom: var(--espace-xl); - flex-flow: row; - justify-content: space-between; - display: flex; -} - -.produits-similaires .grille-produits-similaires article figure figcaption h3 { - letter-spacing: var(--espacement-inter-lettres-etendu-m); - font-style: italic; -} - -.produits-similaires .grille-produits-similaires article figure figcaption p { - letter-spacing: var(--espacement-inter-lettres-rapproche-s); - font-weight: 500; -} - -@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 { - --pied-de-page-marges-internes-bloc: var(--espace-m); - --pied-de-page-marges-internes-ligne: var(--espace-xl); - 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); - grid-template-columns: 1fr 1fr; - place-items: center; - max-width: 100vw; - 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%; -} - +@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+0,U+D,U+20-7E,U+A0-36F,U+374-375,U+37A-37E,U+384-38A,U+38C,U+38E-3A1,U+3A3-3CE,U+3D0-486,U+488-513,U+E3F,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+0,U+D,U+20-7E,U+A0-36F,U+374-375,U+37A-37E,U+384-38A,U+38C,U+38E-3A1,U+3A3-3CE,U+3D0-486,U+488-513,U+E3F,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{--couleur-blanc:#fff;--couleur-gris:#eceaeb;--couleur-gris-fonce:gray;--couleur-gris-fonce-fond:#808080cc;--couleur-bordeaux:#490918;--couleur-bordeaux-fond:#490918cc;--couleur-jaune:#ebffb8;--couleur-jaune-fond:#ebffb8cc;--couleur-noir:#202020;--couleur-fond:#eceaebcc;--police-lato:"Lato",sans-serif;--police-myriad:"Myriad",sans-serif;--hauteur-ligne-classique:1.5;--hauteur-ligne-rapprochee:1;--espacement-inter-lettres-rapproche-s:-.5px;--espacement-inter-lettres-etendu-s:.5px;--espacement-inter-lettres-etendu-m:1px;--espacement-inter-lettres-etendu-l:1.5px;--espacement-inter-lettres-etendu-xl:2px;--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));--espace-xs:.25rem;--espace-s:.5rem;--espace-m:1rem;--espace-l:1.25rem;--espace-xl:2rem}html{box-sizing:border-box}*,:before,:after{box-sizing:inherit;font:inherit;color:inherit;margin:0;padding:0}body{accent-color:var(--couleur-jaune);background:var(--couleur-gris)}button,input,select,textarea{font:inherit}::selection{background:var(--couleur-jaune)}[hidden]{display:none!important}[disabled]{cursor:not-allowed}@media (prefers-reduced-motion){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation-duration:0s!important}}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;color:var(--couleur-noir);text-decoration-skip-ink:auto;text-size-adjust:none;text-rendering:geometricprecision;letter-spacing:var(--espacement-inter-lettres-etendu-s)}strong{font-weight:600}em{font-style:italic}button{all:initial;cursor:pointer;text-align:center;letter-spacing:inherit;font-family:Lato}button.bouton-case-pleine{width:100%;height:100%}button.bouton-case-pleine--blanc-sur-noir{color:var(--couleur-blanc);text-transform:uppercase;letter-spacing:var(--espacement-inter-lettres-etendu-m);background:var(--couleur-noir);font-style:italic}button:disabled,button[disabled]{background:repeating-conic-gradient(var(--couleur-noir)0% 25%,transparent 0% 100%)1px .5px/2px 2px}input,select,textarea{padding:var(--espace-xs);background:var(--couleur-gris);border:1px solid var(--couleur-noir);outline:1px solid #0000;transition:background .2s,outline .2s}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 .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:background .2s}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;font-size:.9rem}img,picture{max-width:100%;display:block}img{object-fit:cover;background:var(--couleur-jaune)}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:var(--espace-xs);--lien-bouton-marges-internes-ligne:var(--espace-m);--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)}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)}a:not([class]):hover{text-decoration-color:var(--couleur-noir)}}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)}body:has(#menu-mobile:not([aria-hidden=true])){touch-action:none;overflow:hidden}#menu-mobile{--menu-mobile-hauteur:calc(100svh - var(--en-tete-hauteur));z-index:997;inset:var(--en-tete-hauteur)0 0 0;overscroll-behavior:none;height:var(--menu-mobile-hauteur);transition:display .4s;transition:display .4s allow-discrete;-webkit-overflow-scrolling:none;width:100vw;display:flex;position:fixed;overflow:hidden}#menu-mobile[aria-hidden=true]{animation:.4s both fade-out;display:none}#menu-mobile[aria-hidden=true] .menu-modale__fond{animation:.4s both fade-out}#menu-mobile .menu-modale__fond{z-index:998;inset:var(--en-tete-hauteur)0 0 0;height:var(--menu-mobile-hauteur);opacity:0;background-color:var(--couleur-fond);animation:.4s both fade-in;position:fixed}#menu-mobile .menu-modale__conteneur{z-index:999;padding:var(--espace-xl);opacity:0;background-color:var(--couleur-gris);border-bottom:1px solid var(--couleur-noir);flex-flow:column;width:100%;height:fit-content;animation:.4s .2s both fade-in;display:flex;position:relative}#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;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)}@keyframes fade-in{to{opacity:1}}@keyframes fade-out{to{opacity:0}}@keyframes slide-in{to{transform:translateY(0)}}#en-tete{--en-tete-marges-internes-ligne:var(--espace-xl);--en-tete-marges-internes-bloc:var(--espace-m);--en-tete-section-hauteur:var(--en-tete-hauteur);--en-tete-logo-longueur:80px;z-index:60;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);flex-flow:row;justify-content:space-between;place-items:center;min-width:100vw;max-width:100vw;display:flex;position:fixed;top:0}#en-tete .logo{width:var(--en-tete-logo-longueur)}#en-tete .logo picture,#en-tete .logo img{background:0 0}#en-tete .logo button{align-content:center;display:block}#en-tete .menu-navigation{text-align:center;text-transform:lowercase;flex:1;grid-template-columns:1fr auto 1fr;font-size:1.1rem;display:grid}#en-tete .menu-navigation ul{gap:var(--espace-m);flex-flow:row;grid-column:2;justify-content:space-between;display:flex}#en-tete .menu-navigation__entree{--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);--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}#en-tete .menu-navigation__entree--courante{background:url(/app/themes/haiku-atelier-2024/assets/img/icons/cloud.svg) 50%/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) 50%/auto 90% no-repeat}}@media (width<=1000px){#en-tete .menu-navigation#menu-navigation-en-tete{display:none}}#en-tete .compte-panier{text-align:center;flex-flow:row;place-items:center;gap:1rem;display:flex}#en-tete .compte-panier[disabled]{background:repeating-conic-gradient(var(--couleur-noir)0% 25%,transparent 0% 100%)1px .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 #0000}#en-tete .compte-panier a{text-transform:lowercase;min-width:10ch;font-size:1.1rem}#en-tete .compte-panier a.lien-compte{border-color:#0000}#en-tete .compte-panier a[data-contient-articles=true]{background:var(--couleur-jaune)}#menu-categories-produits{--menu-entree-longueur-minimale:13ch;--menu-section-hauteur:var(--menu-categories-produits-hauteur);--menu-section-marges-bloc-debut:var(--en-tete-hauteur);--menu-entree-marges-internes-ligne:var(--espace-m);margin-top:var(--menu-section-marges-bloc-debut)}#menu-categories-produits ul{grid-template-columns:repeat(auto-fit,minmax(var(--menu-entree-longueur-minimale),1fr));place-items:center;gap:1px;display:grid}#menu-categories-produits ul li{color:var(--couleur-gris);text-align:center;text-transform:uppercase;letter-spacing:var(--espacement-inter-lettres-etendu-m);background:var(--couleur-noir);width:100%;font-style:italic;font-weight:450}#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{width:inherit;padding:var(--menu-entree-marges-internes-ligne)0;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}}@media (width<=900px){#menu-categories-produits ul{--menu-entree-marges-internes-ligne:var(--espace-s);flex-flow:wrap;font-size:.9rem;display:flex}#menu-categories-produits ul li{flex-grow:1;width:min(140px,100%)}#menu-categories-produits ul li a{border:initial;width:100%}}.photos-produit{--colonne-gauche-position-haut:var(--menu-categories-produits-hauteur);--colonne-gauche-photo-hauteur:calc(100svh - var(--menu-categories-produits-hauteur));--colonne-droite-photo-hauteur-minimale:calc(100svh + var(--en-tete-hauteur) + var(--menu-categories-produits-hauteur));--colonne-photo-longueur-minimale:30rem;--section-marges-externes-bloc-fin:1rem;flex-flow:wrap;max-width:100%;display:flex}.photos-produit>section{width:min(var(--colonne-photo-longueur-minimale),100%);flex-flow:column;flex-grow:1;display:flex;position:relative}.photos-produit>section.colonne-gauche{top:var(--colonne-gauche-position-haut);height:var(--colonne-gauche-photo-hauteur);position:sticky}.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 figure picture img:only-child{min-height:var(--colonne-droite-photo-hauteur-minimale);max-height:var(--colonne-droite-photo-hauteur-minimale)}.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:900px;grid-auto-rows:1fr;grid-template-columns:repeat(auto-fit,minmax(var(--carte-produit-longueur-minimale),1fr));min-height:var(--grille-produits-hauteur-minimale);gap:1px;display:grid}.grille-produits article{max-width:var(--carte-produit-longueur-maximale);box-shadow:0 0 0 1px var(--couleur-noir)}.grille-produits article figure{row-gap:var(--espace-xl);padding:var(--espace-m);flex-flow:column;display:flex}.grille-produits article figure a{position:relative}@media (hover:hover){.grille-produits article figure a:hover .produit__illustration__survol{visibility:visible;opacity:1;transition:opacity .3s,visibility .3s}}.grille-produits article figure .produit__illustration__principale{display:block}.grille-produits article figure .produit__illustration__survol{visibility:hidden;opacity:0;width:100%;height:100%;transition:opacity .15s,visibility .15s;display:block;position:absolute;top:0;left:0}.grille-produits article figure img{aspect-ratio:9/16;object-fit:cover;width:100%;max-height:70vh}.grille-produits article figure figcaption{margin-bottom:var(--espace-xl);flex-flow:row;justify-content:space-between;display:flex}.grille-produits article figure figcaption h3{letter-spacing:var(--espacement-inter-lettres-etendu-m);font-style:italic}.grille-produits article figure figcaption p{letter-spacing:var(--espacement-inter-lettres-rapproche-s);font-weight:500}.grille-produits__aucun-produit{min-height:var(--aucun-produit-hauteur);text-align:center;grid-column:span 3;align-content: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}}.informations-produit{--boite-couleur-fond:#ffffffe6;--boite-position-basse:var(--espace-m);--boite-longueur:70ch;--section-marges-internes:var(--espace-m);bottom:var(--boite-position-basse);width:0;height:0;position:sticky;overflow:visible}.informations-produit__conteneur{transform:translate(calc(50vw - var(--boite-longueur)/2),-100%);width:var(--boite-longueur);max-width:var(--boite-longueur);border:1px solid var(--couleur-noir);display:grid}.informations-produit__conteneur>section{padding:var(--section-marges-internes);background:var(--boite-couleur-fond);flex-flow:row;height:100%;display:flex}.informations-produit__conteneur>section+section{border-top:1px solid var(--couleur-noir)}.informations-produit .onglets-details-produit{padding:initial;grid-template-rows:auto min-content;grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.informations-produit .onglets-details-produit>section{padding:var(--section-marges-internes);grid-column:span 3;font-weight:350;overflow-y:auto}.informations-produit .onglets-details-produit>section ul{list-style:inside}.informations-produit .onglets-details-produit>section>*+*{margin-top:1lh}.informations-produit .onglets-details-produit>ul{text-align:center;text-transform:lowercase;letter-spacing:var(--espacement-inter-lettres-etendu-m);grid-area:2/span 3;grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.informations-produit .onglets-details-produit>ul li{width:100%}.informations-produit .onglets-details-produit>ul li:first-of-type a,.informations-produit .onglets-details-produit>ul li:last-of-type a{border-left-color:#0000;border-right-color:#0000}.informations-produit .onglets-details-produit>ul li a{padding:var(--espace-xs)0;border-top:1px solid #0000;border-right:1px solid var(--couleur-noir);border-left:1px solid var(--couleur-noir);width:100%;height:100%;display:inline-block}.informations-produit .onglets-details-produit>ul li a[aria-selected=true]{border-top-color:#0000}.informations-produit .onglets-details-produit>ul li a:focus,.informations-produit .onglets-details-produit>ul li a:focus-visible{outline-color:#0000}.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{column-gap:var(--espace-xl);font-style:italic;font-weight:500;line-height:var(--hauteur-ligne-rapprochee);flex-flow:row;justify-content:space-between;place-items:center;display:flex}.informations-produit .selecteur-produit__nom{letter-spacing:1px}.informations-produit .selecteur-produit__selection-variation{text-transform:lowercase;place-items:center;font-weight:400;display:flex}.informations-produit .selecteur-produit__selection-variation label{height:100%;margin-right:1ch}.informations-produit .selecteur-produit__selection-variation__selecteurs{position:relative}.informations-produit .selecteur-produit__selection-variation__selecteurs:after{pointer-events:none;content:" ";text-align:center;visibility:visible;opacity:1;background:url(/app/themes/haiku-atelier-2024/assets/img/icons/arrow.svg) no-repeat;width:.9rem;height:.9rem;transition:opacity .2s,visibility .2s;display:inline-block;position:absolute;top:10px;right:.4rem}@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{padding:var(--espace-s)var(--espace-xl);text-align:center;appearance:none;border:1px solid var(--couleur-noir);background:#eceaebe6;min-width:4rem;position:relative}@supports selector(:user-valid){.informations-produit .selecteur-produit__selection-variation select:user-valid{background:#ebffb8e6}}.informations-produit .selecteur-produit__selection-variation option{background:#eceaebe6}.informations-produit .selecteur-produit__prix{font-style:initial}.informations-produit .actions-produit{padding:initial;background:var(--couleur-jaune);border-top:initial;transition:background .2s;overflow:hidden}.informations-produit .actions-produit:has(button[disabled]){background:#eceaebe6}.informations-produit .actions-produit button{height:initial;padding:var(--section-marges-internes);font-variation-settings:"wght" 400;text-transform:uppercase;letter-spacing:var(--espacement-inter-lettres-etendu-m);font-style:italic;transition:font-variation-settings .2s}@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-xl);bottom:initial;width:initial;height:initial;position:relative}.informations-produit__conteneur{transform:initial;width:initial;max-width:initial;border-right:initial;border-left:initial}}@media (hover:hover){.selecteur-personnalise{display:block!important}.selecteur-natif:focus+.selecteur-personnalise{display:none!important}}.produits-similaires{--carte-produit-longueur-minimale:448px;margin-top:var(--espace-m);grid-template-rows:1fr auto;grid-template-columns:repeat(3,1fr);grid-template-areas:"en-tete en-tete en-tete""produits produits produits";place-items:center;display:grid}.produits-similaires header{padding:var(--espace-l)0 var(--espace-m);color:var(--couleur-blanc);text-align:center;background:var(--couleur-noir);grid-area:en-tete;width:100%}.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{grid-area:produits;grid-auto-rows:1fr;grid-template-columns:repeat(auto-fit,minmax(var(--carte-produit-longueur-minimale),1fr));gap:1px;width:100%;display:grid}.produits-similaires .grille-produits-similaires article{box-shadow:0 0 0 1px var(--couleur-noir)}.produits-similaires .grille-produits-similaires article figure{row-gap:var(--espace-xl);padding:var(--espace-m);flex-flow:column;display:flex}.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:opacity .3s,visibility .3s}}.produits-similaires .grille-produits-similaires article figure .produit__illustration__principale{display:block}.produits-similaires .grille-produits-similaires article figure .produit__illustration__survol{visibility:hidden;opacity:0;width:100%;height:100%;transition:opacity .15s,visibility .15s;display:block;position:absolute;top:0;left:0}.produits-similaires .grille-produits-similaires article figure img{aspect-ratio:9/16;object-fit:cover;width:100%;max-height:70svh}.produits-similaires .grille-produits-similaires article figure figcaption{margin-bottom:var(--espace-xl);flex-flow:row;justify-content:space-between;display:flex}.produits-similaires .grille-produits-similaires article figure figcaption h3{letter-spacing:var(--espacement-inter-lettres-etendu-m);font-style:italic}.produits-similaires .grille-produits-similaires article figure figcaption p{letter-spacing:var(--espacement-inter-lettres-rapproche-s);font-weight:500}@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{--pied-de-page-marges-internes-bloc:var(--espace-m);--pied-de-page-marges-internes-ligne:var(--espace-xl);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);grid-template-columns:1fr 1fr;place-items:center;max-width:100vw;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%} /*# 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 dd82f671..31e9712b 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;;;;;;;;;AAQA;;;;;;;;;AAQA;;;;;;;;;AAQA;;;;;;;;;AAQA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA;;;;AAWA;;;;;;;;AAYA;;;;;AAQA;;;;AAOA;;;;AAKA;;;;AAKA;;;;AAOA;EACE;;;;;;;AAUF;;;;;;;;;;;;;AAaA;;;;AAIA;;;;AAQA;;;;;;;;AAOA;;;;;AAIA;;;;;;;;AAOA;;;;AAIA;;;;;;;;AAOA;;;;;AAIA;;;;;AAKA;;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAIA;;;;AAIA;;;;;;;;;AAWA;;;;AAGA;;;;;;;AAMA;;;;;AAUA;;;;;AAKA;;;;;AAUA;;;;;;;;;;AAeA;;;;AAGA;;;;;;;;AAYA;;;;AAGA;;;;AAGA;EACE;;;;;AAIF;;;;AAGA;;;;;AAIA;EACE;;;;;EAMA;;;;;AAUF;;;;AASA;;;;;;AAQA;;;;;AAKA;;;;;AAKA;;;;;;;;;;;;;;;AAeA;;;;;AAIA;;;;AAGA;;;;;;;;;;AASA;;;;;;;;;;;;;;AAaA;;;;AAGA;;;;;;AAKA;;;;AAGA;;;;;AAKA;;;;;;AAKA;;;;;;AAKA;;;;;;AAKA;;;;;;;;;;;;;;;;;;;;AAsBA;;;;AAGA;;;;AAGA;;;;;AAIA;;;;;;;;;AAiBA;;;;;;;;AAOA;;;;;;;AAQA;;;;;;AAKA;;;;AAGA;EACE;;;;;AAIF;EACE;;;;;AAIF;;;;;;;;AAUA;;;;AAGA;;;;;;AAKA;;;;;;AAKA;;;;AAGA;;;;AAUA;;;;;;;;AAgBA;;;;;;;AASA;;;;;;;;;;;AAeA;;;;AAGA;;;;AAGA;;;;;;;AAMA;;;;;AAIA;EACE;;;;;;AAKF;EACE;;;;;;;EAMA;;;;;EAIA;;;;;;AAaF;;;;;;;;;;;AAeA;;;;;;;;AAOA;;;;;;AAKA;;;;AAGA;;;;;AAiBA;;;;;;;;;;;;AAYA;;;;;AAIA;;;;;;;AAMA;;;;AAGA;EACE;;;;;;;AAMF;;;;AAGA;;;;;;;;;;;;AAWA;;;;;;;AAMA;;;;;;;AAMA;;;;;AAIA;;;;;AAIA;;;;;;;AAMA;;;;;AAIA;EACE;;;;EAGA;;;;;AAYF;;;;;;;;;;;;AAaA;;;;;;;;AAUA;;;;;;;;AAOA;;;;AAGA;;;;;;;AAMA;;;;;;;AAMA;;;;AAIA;;;;AAGA;;;;;;;;;AASA;;;;AAGA;;;;;AAQA;;;;;;;;;;AAUA;;;;AAGA;;;;AAGA;;;;AAGA;;;;;;;;;;;AAUA;;;;AAGA;;;;;;;AAQA;;;;;AAIA;;;;AAIA;;;;;;;;;;;;;;;;AAeA;EACE;;;;;;AAKF;EACE;;;;;;AAKF;;;;;;;;;;AASA;EACE;;;;;AAIF;;;;AAGA;;;;AAGA;;;;;;;;AAQA;;;;AAGA;;;;;;;;;;AAUA;EACE;;;;;AAIF;EACE;;;;;;;;EAOA;;;;;;;;;AASF;EACE;;;;EAGA;;;;;AAIF;;;;;;;;;;;AAWA;;;;;;;;;AAQA;;;;;;;AAMA;;;;;;;;;AAQA;;;;AAGA;;;;;;;AAMA;;;;AAGA;EACE;;;;;;;AAMF;;;;AAGA;;;;;;;;;;;;AAWA;;;;;;;AAMA;;;;;;;AAMA;;;;;AAIA;;;;;AAIA;EACE;;;;EAGA;;;;;AAKF;;;;;;;;;;;;;AAaA;;;;;;;AAMA","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 900;\n font-style: normal;\n font-display: swap;\n 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\");\n 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;\n}\n@font-face {\n font-family: Lato;\n font-weight: 100 900;\n font-style: italic;\n font-display: swap;\n 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\");\n 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;\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-blanc: #ffffff;\n --couleur-gris: #eceaeb;\n --couleur-gris-fonce: #808080;\n --couleur-gris-fonce-fond: rgb(128 128 128 / 80%);\n --couleur-bordeaux: #490918;\n --couleur-bordeaux-fond: rgb(73 9 24 / 80%);\n --couleur-jaune: #ebffb8;\n --couleur-jaune-fond: rgb(235 255 184 / 80%);\n --couleur-noir: #202020;\n --couleur-fond: rgb(236 234 235 / 80%);\n /* Polices */\n --police-lato: \"Lato\", sans-serif;\n --police-myriad: \"Myriad\", sans-serif;\n /* Hauteurs de ligne */\n --hauteur-ligne-classique: 1.5;\n --hauteur-ligne-rapprochee: 1;\n /* Espacements entre les lettres */\n --espacement-inter-lettres-rapproche-s: -0.5px;\n --espacement-inter-lettres-etendu-s: 0.5px;\n --espacement-inter-lettres-etendu-m: 1px;\n --espacement-inter-lettres-etendu-l: 1.5px;\n --espacement-inter-lettres-etendu-xl: 2px;\n /* Dimensions */\n --en-tete-hauteur: 60px;\n --menu-categories-produits-hauteur: 54.39px;\n --pied-de-page-hauteur: calc(var(--espace-m) * 2 + 3lh);\n --contenu-page-hauteur-minimale: calc(\n 100svh - var(--en-tete-hauteur) - var(--pied-de-page-hauteur)\n - var(--menu-categories-produits-hauteur)\n );\n /* Espacements */\n --espace-xs: 0.25rem;\n --espace-s: 0.5rem;\n --espace-m: 1rem;\n --espace-l: 1.25rem;\n --espace-xl: 2rem;\n}\n\n/*\n * 1. Utilise un meilleur modèle de boîte.\n */\nhtml {\n box-sizing: border-box; /* 1 */\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. Utilise la couleur primaire du site.\n */\nbody {\n accent-color: var(--couleur-jaune); /* 2 */\n background: var(--couleur-gris); /* 1 */\n}\n\n/*\n * 1. Force l'héritage des styles pour ces éléments.\n */\nbutton, input, select, textarea {\n font: inherit; /* 1 */\n}\n\n/*\n * Change la couleur d'arrière-plan à la sélection du texte.\n */\n*::selection {\n background: var(--couleur-jaune);\n}\n\n/* Cache tout élément avec l'attribut hidden */\n[hidden] {\n display: none !important;\n}\n\n/* Utilise un curseur approprié pour les Éléments désactivés */\n[disabled] {\n cursor: not-allowed;\n}\n\n/*\n * Désactive les animations pour les Utilisateurs n'en souhaitant pas.\n */\n@media (prefers-reduced-motion) {\n *, *::before, *::after {\n scroll-behavior: auto !important;\n transition: none !important;\n animation-duration: 0s !important;\n }\n}\n/*\n * 2. Rendu spécifique du texte pour Safari/iOS.\n * 3. Rendu plus précis du texte.\n */\nhtml {\n font: 1rem/var(--hauteur-ligne-classique) Lato;\n font-optical-sizing: auto;\n font-kerning: normal;\n font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures contextual;\n -webkit-font-smoothing: antialiased; /* 2 */\n color: var(--couleur-noir);\n text-decoration-skip-ink: auto;\n text-size-adjust: none; /* 2 */\n text-rendering: geometricprecision; /* 3 */\n letter-spacing: var(--espacement-inter-lettres-etendu-s);\n}\n\nstrong {\n font-weight: 600;\n}\n\nem {\n font-style: italic;\n}\n\n/* Mixins Sass */\n/*\n * Réinitialisation des styles des \n // \n //\n // The browser acts as as if there is only one focusable element – the shadow\n // button. Our library should behave the same way.\n if (el.shadowRoot?.delegatesFocus)\n return false;\n return el.matches(focusableSelectors.join(',')) && !isHidden(el);\n};\n/**\n * Determine if an element can have focusable children. Useful for bailing out\n * early when walking the DOM tree.\n * @example\n * This div is inert, so none of its children can be focused, even though they\n * meet our criteria for what is focusable. Once we check the div, we can skip\n * the rest of the subtree.\n * ```html\n *
\n * \n * Link\n *
\n * ```\n */\nfunction canHaveFocusableChildren(el) {\n // The browser will never send focus into a Shadow DOM if the host element\n // has a negative tabindex. This applies to both slotted Light DOM Shadow DOM\n // children\n if (el.shadowRoot && el.getAttribute('tabindex') === '-1')\n return false;\n // Elemments matching this selector are either hidden entirely from the user,\n // or are visible but unavailable for interaction. Their descentants can never\n // receive focus.\n return !el.matches(':disabled,[hidden],[inert]');\n}\n/**\n * Get the active element, accounting for Shadow DOM subtrees.\n * @author Cory LaViska\n * @see: https://www.abeautifulsite.net/posts/finding-the-active-element-in-a-shadow-root/\n */\nfunction getActiveEl(root = document) {\n const activeEl = root.activeElement;\n if (!activeEl)\n return null;\n // If there’s a shadow root, recursively find the active element within it.\n // If the recursive call returns null, return the active element\n // of the top-level Document.\n if (activeEl.shadowRoot)\n return getActiveEl(activeEl.shadowRoot) || document.activeElement;\n // If not, we can just return the active element\n return activeEl;\n}\n/**\n * Trap the focus inside the given element\n */\nfunction trapTabKey(el, event) {\n const [firstFocusableEl, lastFocusableEl] = getFocusableEdges(el);\n // If there are no focusable children in the dialog, prevent the user from\n // tabbing out of it\n if (!firstFocusableEl)\n return event.preventDefault();\n const activeEl = getActiveEl();\n // If the SHIFT key is pressed while tabbing (moving backwards) and the\n // currently focused item is the first one, move the focus to the last\n // focusable item from the dialog element\n if (event.shiftKey && activeEl === firstFocusableEl) {\n // @ts-ignore: we know that `lastFocusableEl` is not null here\n lastFocusableEl.focus();\n event.preventDefault();\n }\n // If the SHIFT key is not pressed (moving forwards) and the currently focused\n // item is the last one, move the focus to the first focusable item from the\n // dialog element\n else if (!event.shiftKey && activeEl === lastFocusableEl) {\n firstFocusableEl.focus();\n event.preventDefault();\n }\n}\n/**\n * Find the closest element to the given element matching the given selector,\n * accounting for Shadow DOM subtrees.\n * @author Louis St-Amour\n * @see: https://stackoverflow.com/a/56105394\n */\nfunction closest(selector, base) {\n function from(el) {\n if (!el || el === document || el === window)\n return null;\n if (el.assignedSlot)\n el = el.assignedSlot;\n return (el.closest(selector) ||\n from(el.getRootNode().host));\n }\n return from(base);\n}\n\nconst SCOPE = 'data-a11y-dialog';\nclass A11yDialog {\n $el;\n id;\n previouslyFocused;\n shown;\n constructor(element) {\n this.$el = element;\n this.id = this.$el.getAttribute(SCOPE) || this.$el.id;\n this.previouslyFocused = null;\n this.shown = false;\n this.maintainFocus = this.maintainFocus.bind(this);\n this.bindKeypress = this.bindKeypress.bind(this);\n this.handleTriggerClicks = this.handleTriggerClicks.bind(this);\n this.show = this.show.bind(this);\n this.hide = this.hide.bind(this);\n this.$el.setAttribute('aria-hidden', 'true');\n this.$el.setAttribute('aria-modal', 'true');\n this.$el.setAttribute('tabindex', '-1');\n if (!this.$el.hasAttribute('role')) {\n this.$el.setAttribute('role', 'dialog');\n }\n document.addEventListener('click', this.handleTriggerClicks, true);\n }\n /**\n * Destroy the current instance (after making sure the dialog has been hidden)\n * and remove all associated listeners from dialog openers and closers\n */\n destroy() {\n // Dispatch a `destroy` event\n const destroyEvent = this.fire('destroy');\n // If the event was prevented, do not continue with the normal behavior\n if (destroyEvent.defaultPrevented)\n return this;\n // Hide the dialog to avoid destroying an open instance\n this.hide();\n // Remove the click event delegates for our openers and closers\n document.removeEventListener('click', this.handleTriggerClicks, true);\n // Clone and replace the dialog element to prevent memory leaks caused by\n // event listeners that the author might not have cleaned up.\n this.$el.replaceWith(this.$el.cloneNode(true));\n return this;\n }\n /**\n * Show the dialog element, trap the current focus within it, listen for some\n * specific key presses and fire all registered callbacks for `show` event\n */\n show(event) {\n // If the dialog is already open, abort\n if (this.shown)\n return this;\n // Dispatch a `show` event\n const showEvent = this.fire('show', event);\n // If the event was prevented, do not continue with the normal behavior\n if (showEvent.defaultPrevented)\n return this;\n // Keep a reference to the currently focused element to be able to restore\n // it later\n this.shown = true;\n this.$el.removeAttribute('aria-hidden');\n this.previouslyFocused = getActiveEl();\n // Due to a long lasting bug in Safari, clicking an interactive element\n // (like a +

Haïkus are short japanese poems written in three lines to capture the beauty of small details in the everyday life. @@ -195,8 +206,19 @@

+ +

Haiku Atelier creates minimalist and subtil jewelry with an edgy twist, trying to distillate some poetry through those small objects. @@ -210,8 +232,19 @@

+ +

After learning the art of jewelry making for two years in Paris, Manon Designere launched the brand Haiku, gleaning into the Japanese minimalist aesthetic. @@ -226,8 +259,19 @@

+ +

Here you can see some of the tools used at the studio.

From sketches to models, from soldering to polishing, the numerous steps behind each piece are what makes it @@ -241,8 +285,19 @@

+ +

We pay a lot of attention choosing the materials we work on: all of the pieces are made in 80% recycled sterling silver. @@ -260,8 +315,19 @@

+ +

We hope that those small objects will move you, as we are moved by the beauty hidden behind a ray of sunshine, a leaf falling from a branch, the smell of an old book, the song of birds before dawn... diff --git a/web/app/themes/haiku-atelier-2024/views/macros/images.twig b/web/app/themes/haiku-atelier-2024/views/macros/images.twig index 4516f694..8a5de00e 100644 --- a/web/app/themes/haiku-atelier-2024/views/macros/images.twig +++ b/web/app/themes/haiku-atelier-2024/views/macros/images.twig @@ -1,21 +1,27 @@ {% macro genere_source_img_multi_formats(rel_url, alt="", width, height, id="") %} {{ alt }} {# TODO: Utiliser un Menu WordPress #} + {# TODO: Utiliser des À L'INTÉRIEUR de

  • #}