ref(styles) wip harmonisation des Boutons

web/app/themes/haiku-atelier-2024/assets/css/main.css

@@ -292,9 +292,12 @@ button {
 button.bouton-case-pleine {
   width: 100%;
   height: 100%;
+  font-style: italic;
+  text-transform: uppercase;
+  letter-spacing: var(--espacement-inter-lettres-etendu-m);
 }
 @media (hover: hover) {
-  button.bouton-case-pleine:hover {
+  button.bouton-case-pleine:not(:disabled):hover {
     color: var(--couleur-noir);
     background: var(--arriere-plan-points);
   }
@@ -314,7 +317,7 @@ button.bouton-inverse:disabled {
   color: var(--couleur-blanc);
 }
 @media (hover: hover) {
-  button.bouton-inverse:hover {
+  button.bouton-inverse:not(:disabled):hover {
     color: var(--couleur-noir);
     background: var(--arriere-plan-points);
   }
@@ -344,13 +347,13 @@ button.bouton-retour-haut[data-actif] {
   opacity: 50%;
 }
 @media (hover: hover) {
-  button.bouton-retour-haut[data-actif]:hover {
+  button.bouton-retour-haut[data-actif]:not(:disabled):hover {
     opacity: 100%;
     background: var(--couleur-gris-fond);
   }
 }
 @media (hover: hover) {
-  button:hover {
+  button:not(:disabled):hover {
     color: var(--couleur-blanc);
     background: var(--couleur-gris-fonce);
   }
@@ -462,8 +465,8 @@ input[type="checkbox"], input[type="radio"] {
   transition: 0.2s background;
 }
 input[type="checkbox"]:checked, input[type="radio"]:checked {
-  color: var(--couleur-blanc);
+  color: var(--couleur-noir);
-  background: var(--couleur-gris-fonce);
+  background: var(--arriere-plan-points);
 }
 input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {
   content: "x";
@@ -492,7 +495,7 @@ input[type="radio"] + label {
 }
 @media (hover: hover) {
   input[type="checkbox"]:hover, input[type="radio"]:hover {
-    background: var(--couleur-gris-fonce);
+    background: var(--arriere-plan-points);
   }
 }
 
@@ -1474,8 +1477,6 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
 }
 .details-produit__actions button {
   padding: var(--section-marges-internes);
-  font-style: italic;
-  text-transform: uppercase;
 }
 @media (hover: hover) {
   .details-produit__actions button:not([disabled]):hover {

web/app/themes/haiku-atelier-2024/assets/css/pages/page-boutique.css

@@ -4,12 +4,7 @@
   text-align: center;
 }
 #page-boutique .actions button {
-  height: initial;
-  margin: auto;
   padding: var(--espace-xl) 0;
-  font-style: italic;
-  text-transform: uppercase;
-  letter-spacing: var(--espacement-inter-lettres-etendu-m);
 }
 
 /* # sourceMappingURL=page-boutique.css.map */

web/app/themes/haiku-atelier-2024/assets/css/pages/page-boutique.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-boutique.scss"],"names":[],"mappings":"AAGE;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA","file":"page-boutique.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-boutique.scss"],"names":[],"mappings":"AAGE;EACE;EACA;EACA;;AAEA;EACE","file":"page-boutique.css"}

web/app/themes/haiku-atelier-2024/assets/css/pages/page-boutique.min.css

@@ -1 +1 @@
-#page-boutique .actions{text-align:center;align-content:center;width:100%}#page-boutique .actions button{height:initial;padding:var(--espace-xl) 0;text-transform:uppercase;letter-spacing:var(--espacement-inter-lettres-etendu-m);margin:auto;font-style:italic}
+#page-boutique .actions{text-align:center;align-content:center;width:100%}#page-boutique .actions button{padding:var(--espace-xl) 0}

web/app/themes/haiku-atelier-2024/assets/css/pages/page-panier.css

@@ -385,11 +385,23 @@
   text-align: center;
   text-transform: uppercase;
   letter-spacing: 2px;
-  background: var(--couleur-noir);
+  border-block: 1px solid var(--couleur-noir);
+  border-block-end: 0;
+  background: var(--arriere-plan-points);
+}
+#panneau-informations-client .panneau__pied-de-page:has(button[disabled]) {
+  background: var(--couleur-gris-fond);
 }
 #panneau-informations-client .panneau__pied-de-page button {
   padding: var(--espace-l) 0;
 }
+@media (hover: hover) {
+  #panneau-informations-client .panneau__pied-de-page button:not([disabled]):hover {
+    font-weight: 600;
+    color: var(--couleur-blanc);
+    background: var(--couleur-gris-fonce-fond);
+  }
+}
 @media (width <= 500px) {
   #panneau-informations-client .panneau__formulaires {
     padding: var(--espace-xl) 0;

web/app/themes/haiku-atelier-2024/assets/css/pages/page-panier.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/sass/layouts/_panneau-panier.scss","../../../src/sass/layouts/_panneau-informations-client.scss","../../../src/sass/pages/page-panier.scss"],"names":[],"mappings":";AAEA;EACE;;AAEA;EACE;;AAIF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAbJ;AAgBE;AAAA;AAAA;AAAA;;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AA9BN;AAkCE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAxCJ;AA2CE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAOR;EACE;EACA;EACA;EACA;AAEA;AAAA;AAAA;AAAA;;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;AAEA;AAAA;AAAA;;AAGA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAKA;EACE;;AAEA;EACE;;AAMR;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;IACE;;EAGF;IACE;;EAEA;IACE;;EAIJ;IACE;;EAGE;IACE;;EAKN;IACE;;;;ACpRN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIF;EAEE;EACA;EACA;EAGA;EAEA;EACA;;AAEA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAMN;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;;AAMR;EACE;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKN;EACE;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;IACE;;;;ACjKN;AAAA;AAAA;AAAA;AAIA;AACE;EACA;AAEA;EACA;EAEA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;AAGF;EACE","file":"page-panier.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/sass/layouts/_panneau-panier.scss","../../../src/sass/layouts/_panneau-informations-client.scss","../../../src/sass/pages/page-panier.scss"],"names":[],"mappings":";AAEA;EACE;;AAEA;EACE;;AAIF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAbJ;AAgBE;AAAA;AAAA;AAAA;;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AA9BN;AAkCE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAxCJ;AA2CE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAOR;EACE;EACA;EACA;EACA;AAEA;AAAA;AAAA;AAAA;;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;AAEA;AAAA;AAAA;;AAGA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAKA;EACE;;AAEA;EACE;;AAMR;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;IACE;;EAGF;IACE;;EAEA;IACE;;EAIJ;IACE;;EAGE;IACE;;EAKN;IACE;;;;ACpRN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIF;EAEE;EACA;EACA;EAGA;EAEA;EACA;;AAEA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAMN;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;;AAMR;EACE;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKN;EACE;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAGF;EACE;;AAGE;EACE;IACE;IACA;IACA;;;AAOV;EACE;IACE;;;;AClLN;AAAA;AAAA;AAAA;AAIA;AACE;EACA;AAEA;EACA;EAEA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;AAGF;EACE","file":"page-panier.css"}

web/app/themes/haiku-atelier-2024/src/sass/base/elements/_boutons.scss

@@ -31,13 +31,16 @@ button {
 
   /* Particularismes. */
 
-  // Bouton prenant toute l'espace disponible.
+  // Bouton occuputant tout l'espace disponible.
   &.bouton-case-pleine {
     width: 100%;
     height: 100%;
+    font-style: italic;
+    text-transform: uppercase;
+    letter-spacing: var(--espacement-inter-lettres-etendu-m);
 
     @media (hover: hover) {
-      &:hover {
+      &:not(:disabled):hover {
         color: var(--couleur-noir);
         background: var(--arriere-plan-points);
       }
@@ -63,7 +66,7 @@ button {
     }
 
     @media (hover: hover) {
-      &:hover {
+      &:not(:disabled):hover {
         color: var(--couleur-noir);
         background: var(--arriere-plan-points);
       }
@@ -97,7 +100,7 @@ button {
       opacity: 50%;
 
       @media (hover: hover) {
-        &:hover {
+        &:not(:disabled):hover {
           opacity: 100%;
           background: var(--couleur-gris-fond);
         }
@@ -106,7 +109,7 @@ button {
   }
 
   @media (hover: hover) {
-    &:hover {
+    &:not(:disabled):hover {
       color: var(--couleur-blanc);
       background: var(--couleur-gris-fonce);
     }

web/app/themes/haiku-atelier-2024/src/sass/base/elements/_formulaires.scss

@@ -66,8 +66,8 @@ input[type="checkbox"], input[type="radio"] {
   transition: 0.2s background;
 
   &:checked {
-    color: var(--couleur-blanc);
+    color: var(--couleur-noir);
-    background: var(--couleur-gris-fonce);
+    background: var(--arriere-plan-points);
 
     // TODO: Utiliser un SVG plutôt qu'un « x » ?
     &::before {
@@ -98,7 +98,7 @@ input[type="checkbox"], input[type="radio"] {
 
   @media (hover: hover) {
     &:hover {
-      background: var(--couleur-gris-fonce);
+      background: var(--arriere-plan-points);
     }
   }
 }

web/app/themes/haiku-atelier-2024/src/sass/layouts/_informations-produit.scss

@@ -216,17 +216,15 @@
     background: var(--arriere-plan-points);
     transition: 0.2s background;
 
-    // Indique un Bouton désactivé avec un fond gris en-dessous du fond à motif
+    // Indique un Bouton désactivé avec un fond gris en-dessous du fond à motif.
     &:has(button[disabled]) {
       background: var(--couleur-gris-fond);
     }
 
     button {
       padding: var(--section-marges-internes);
-      font-style: italic;
-      text-transform: uppercase;
 
-      // Change la casse de la police au survol quand le Bouton n'est pas désactivé
+      // Change la casse de la police au survol quand le Bouton n'est pas désactivé.
       &:not([disabled]) {
         @media (hover: hover) {
           &:hover {

web/app/themes/haiku-atelier-2024/src/sass/layouts/_panneau-informations-client.scss

@@ -155,10 +155,27 @@
     text-align: center;
     text-transform: uppercase;
     letter-spacing: 2px;
-    background: var(--couleur-noir);
+    border-block: 1px solid var(--couleur-noir);
+    border-block-end: 0;
+    background: var(--arriere-plan-points);
+
+    // Indique un Bouton désactivé avec un fond gris en-dessous du fond à motif
+    &:has(button[disabled]) {
+      background: var(--couleur-gris-fond);
+    }
 
     button {
       padding: var(--espace-l) 0;
+
+      &:not([disabled]) {
+        @media (hover: hover) {
+          &:hover {
+            font-weight: 600;
+            color: var(--couleur-blanc);
+            background: var(--couleur-gris-fonce-fond);
+          }
+        }
+      }
     }
   }
 

web/app/themes/haiku-atelier-2024/src/sass/pages/page-boutique.scss

@@ -7,12 +7,7 @@
     text-align: center;
 
     button {
-      height: initial;
-      margin: auto;
       padding: var(--espace-xl) 0;
-      font-style: italic;
-      text-transform: uppercase;
-      letter-spacing: var(--espacement-inter-lettres-etendu-m);
     }
   }
 }

web/app/themes/haiku-atelier-2024/views/parts/pages/panier/panneau-informations-client.twig

@@ -260,7 +260,7 @@
 
   <footer class="panneau__pied-de-page">
     <button
-      class="bouton-case-pleine bouton-inverse" form="formulaire-commande"
+      class="bouton-case-pleine" form="formulaire-commande"
       type="submit"
     >
       Calculate shipping