/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


/* Using em for your padding-left is going to ensure the padding scales in proportion to the font-size. */

.content {
    font-family: "Acumin", Sans-serif;
    font-size: 1.4rem;
	line-height: 1.2em;
    color: #B72AD8;
    padding-left: 0.25em;
	font-weight: 800;
    font-style: oblique;
}

@media only screen and (max-width: 767px) {
    .content {
        font-size: 2rem !important;
        padding-left: 0.25em;
    }
}

.outer {
    overflow: hidden;  !important;
}

.outer div {
    display: flex;
    gap: 1em;
    flex-direction: row;
    float: left;
	align-items: end;
}

.loop {
    white-space: nowrap;
    animation: loop-anim 15s linear infinite;
}

@media only screen and (max-width: 767px) {
    .loop {
        animation: loop-anim 3.5s linear infinite;
    }
}

@keyframes loop-anim {
    0% {
        margin-left: 0;
    }
    100% {
        margin-left: -50% /* This works because of the div between "outer" and "loop" */
    }
}


--------------------------------------


Adjustments and additional code 👇

/* An example of a media query for devices between 767 and 1024 pixels (tablets). Change out the pixel values to control the breakpoints. Target the correct class and make your changes. */

@media only screen and (min-width: 767px) and (max-width: 1024px) {
   .content {
        font-size: 2.25rem !important;
        padding-left: 0.25em;
    }
}


/* What your ''loop'' class should look like if you decide to reverse the direction. */

.loop {
    white-space: nowrap;
    animation: loop-anim 15s linear infinite;
    animation-direction: reverse;
}

@media only screen and (max-width: 767px) {
    .loop {
        animation: loop-anim 3.5s linear infinite;
        animation-direction: reverse;
    }
}




/* How to hide the horizontal overflow for a specific container. */

.container {
overflow-x: hidden;
}


/* How to hide the horizontal overflow for the entire website (add this under your admin bar - ''Customize'' - ''Additional CSS''. */

body {
    overflow-x: hidden;
}


.scroll-horizon-mobile {
    display: flex;
    overflow-x: auto; /* Active le scroll horizontal */
    overflow-y: hidden; /* Désactive le scroll vertical */
    gap: 20px; /* Espace entre les éléments */
    -webkit-overflow-scrolling: touch; /* Scroll fluide sur mobile */
    scrollbar-width: thin; /* Style moderne pour Firefox */
    scrollbar-color: #888 #f1f1f1; /* Couleur de la scrollbar (Firefox) */
}
/* Supprimer tout fond gris dans la table des variations */
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th.label,
.woocommerce div.product form.cart table.variations td.value,
.woocommerce div.product form.cart .woo-variation-items-wrapper {
  background-color: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Recentrer le bloc variation si décalé */
.woocommerce div.product form.cart .variations {
  margin-left: 0 !important;
}

/* Styliser le prix en bleu et en gras */
.woocommerce div.product span.price,
.woocommerce div.product p.price {
  color: #0134ff !important;
  font-weight: 700;
}
/* Bouton désactivé */
.woocommerce div.product form.cart .button.disabled {
  background-color: #000 !important;
  color: #fff !important;
  opacity: 0.4;
  cursor: not-allowed;
}

/* Bouton actif */
.woocommerce div.product form.cart .button {
  background-color: #0134ff !important;
  color: #fff !important;
  border: none;
  font-weight: 600;
}