wip

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

@@ -252,6 +252,11 @@ em {
   font-style: italic;
 }
 
+code {
+  font-family: monospace;
+  font-size: 0.9rem;
+}
+
 /* Mixins Sass */
 /*
  * Réinitialisation des styles des <button>.
@@ -339,6 +344,50 @@ button.bouton-retour-haut[data-actif] {
   }
 }
 
+dialog {
+  z-index: 999;
+  flex-flow: column nowrap;
+  place-self: center center;
+  padding: var(--espace-l);
+  opacity: 0;
+  background: white;
+  transition: display 0.3s, opacity 0.3s, overlay 0.3s;
+  transition-behavior: allow-discrete;
+}
+dialog::backdrop {
+  background-color: transparent;
+  transition: background-color 0.3s, display 0.3s, overlay 0.3s;
+  transition-behavior: allow-discrete;
+}
+dialog:open {
+  display: flex;
+  opacity: 1;
+}
+dialog:open::backdrop {
+  background-color: var(--couleur-fond);
+}
+dialog * + * {
+  margin-block-start: var(--espace-m);
+}
+dialog p {
+  max-inline-size: 50ch;
+}
+dialog button {
+  align-self: end;
+  inline-size: fit-content;
+  padding: var(--espace-s);
+}
+
+@starting-style {
+  dialog:open {
+    opacity: 0;
+  }
+}
+@starting-style {
+  dialog:open::backdrop {
+    background-color: transparent;
+  }
+}
 fieldset {
   all: initial;
   display: flex;
@@ -587,6 +636,15 @@ ul.avec-puce-cercle a {
   ) url("/app/themes/haiku-atelier-2024/assets/img/icons/dot.svg"); /* 2 */
 }
 
+video {
+  display: block;
+  inline-size: 100%;
+  min-inline-size: 100%;
+  block-size: 100%;
+  min-block-size: inherit;
+  object-fit: cover;
+}
+
 /* * Styles pour un bandeau défilant. */
 .bandeau {
   overflow: hidden;
@@ -1537,7 +1595,6 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
   padding: var(--espace-s) var(--espace-m);
   border-top: 1px solid var(--couleur-noir);
   font-size: 0.8rem;
-  background: var(--couleur-jaune);
 }
 #pied-de-page .zone-menu-navigation-secondaire {
   justify-self: start;