/** * Carousel Styles - Desktop uniquement * * Styles pour les carousels produits et transmission. * Inclut les animations décoratives (nuages, montgolfière). * * Extrait de sections.css v0.0.101 lors du split Phase 5. * * @package UneAutreVoix * @author Horizon Signature * @copyright 2026 Horizon Signature * @license Proprietary * @version 0.1.0 * * @changelog * 0.1.0 — Passage en preprod * 0.0.27 - carousel-transmission .carousel-slide-content : align-items center (centrage vertical colonnes) * 0.0.26 - carousel-slide-content : align-items center → flex-start * - carousel-slide-left : margin-top 5vh → 15vh * 0.0.25 - Fix saut après animation entrée carousel-transmission : keyframes dédié dont le to * correspond à l'état CSS final translateX(0) (l'animation partagée finissait à * translateX(-5vh) alors que la règle .active transmission override à translateX(0)) * 0.0.24 - E5 : transition: all → propriétés spécifiques sur .carousel-arrow * - background et color sont les seules propriétés animées au hover * 0.0.23 - E4 : suppression classes .carousel-bg-* (.carousel-bg-green, -blue, -pink, -gold, -text) * - Centralisées dans style.css * 0.0.22 - Suppression violation opacity sur état hover dot inactif * - .carousel-dots .dot:hover : opacity 0.7 supprimée * 0.0.21 - Montgolfière carousel-transmission : derrière livres + -10% taille * - z-index 2 → 0 (derrière images des livres) * - width 18vh → 16.2vh (-10% taille) * - Plus simple CSS-only, JS de contre-translate supprimé * 0.0.20 - Carousel fond coloré : z-index 0 au lieu de -1 * 0.0.19 - Refactoring : renommage classe carousel-pink-background → carousel-color-background * 0.0.18 - Carousel-produits : réduction délai image unique pour équilibrer * - Image unique : délai 1s → 0.75s * - Compense le fait que 2ème image reste visible jusqu'à 1.25s * - Temps vide perçu identique entre 1 et 2 images * 0.0.17 - Carousel-produits : adaptation délai entrée selon nombre d'images * - Image unique : délai = var(--image-exit-duration) = 1s * - Produits 2 images : délai = var(--image-enter-delay) = 1s * - Temps total identique entre slides (1 ou 2 images) * - Plus de temps mort pour produits simples * 0.0.16 - Carousel-produits : fix timing animations pour éviter chevauchement * - --image-exit-duration : 0.5s → 1s (durée sortie doublée) * - --image-enter-delay : 0.5s → 1s (nouvelles images attendent sortie complète) * - Délai sortie 2ème image : 0.5s → 0.25s (plus rapproché) * - Délai entrée 2ème image : 0.5s (inchangé) * - Timeline : 0-1.25s sortie, 1s-2s entrée (pas de chevauchement) * 0.0.15 - Carousel-produits : ajustement position verticale deuxième image * - Deuxième image : bottom -2.5vh (au lieu de -5vh) * - Remontée de 2.5vh pour meilleur alignement * 0.0.14 - Carousel-produits : ajout délai sortie deuxième image * - Deuxième image : transition-delay 0.5s sur sortie * - Séquence cohérente entrée/sortie avec décalage entre images * - Première image sort immédiatement, deuxième suit 0.5s après * 0.0.13 - Carousel-produits : utilisation variable --ease-smooth * - Remplacement cubic-bezier en dur par var(--ease-smooth) * - Cohérence avec système de variables CSS du thème * - Courbe cubic-bezier(0.25, 0.46, 0.45, 0.94) pour slides * 0.0.12 - Carousel-produits : amélioration animations images * - ENTRÉE : depuis la droite (inchangé) * - SORTIE : vers la gauche (translateX(-15vh) au repos) * - Courbe organique : cubic-bezier(0.4, 0.0, 0.2, 1) Material Design * - Délai entre 2 images : 0.5s (au lieu de 0.2s) * - Transitions plus fluides et naturelles * - États initiaux définis pour sortie cohérente * 0.0.11 - Carousel-produits : ajustement décalage image unique à 15vh * - Image unique : margin-left 15vh (ajustement depuis 20vh) * - Décalage +5vh depuis base 10vh (au lieu de +10vh) * - Meilleur équilibre visuel * 0.0.10 - Carousel-produits : augmentation décalage image unique * - Image unique : margin-left 20vh (au lieu de 10vh) * - Décalage supplémentaire pour meilleur positionnement * 0.0.9 - Carousel-produits : fix définitif image unique avec :only-child * - Image unique (.carousel-product-image:only-child) : styles identiques première variation * - Annulation complète des styles :last-child pour :only-child * - Position relative, 50vh × 50vh, margin-left 10vh * - Sélecteur :last-child:not(:only-child) pour limiter aux cas 2+ images * - Fix Imagify avec :not(:only-child) * - Animation :only-child déjà existante (slideInFromRight) * - Suppression règle :has() inutile * 0.0.8 - Carousel-produits : fix affichage image unique (produit simple) * - Image unique : mêmes styles que première variation (width: 50vh, margin-left: 10vh) * - Wrapper : justify-content flex-start pour alignement à gauche * - Sélecteur :has(> .carousel-product-image) pour détecter image unique * - Fix Imagify : width 50vh sur img et picture * - Résout bug affichage incohérent pour produits simples * 0.0.7 - Carousel-produits : fix largeur images = hauteur (format carré) * - Première image : width: 50vh (au lieu de auto) * - Deuxième image : width: 40vh (au lieu de auto) * - Fix Imagify : largeur forcée sur img et picture * - Correction taille images pour proportions cohérentes * 0.0.6 - Carousel-produits : décalage deuxième image droite et bas * - Deuxième image : décalage +10vh vers la droite (left: calc(50% + 10vh)) * - Deuxième image : décalage +5vh vers le bas (bottom: -5vh) * - Amélioration profondeur et dynamisme de la superposition * 0.0.5 - Carousel-produits : ajustement positionnement et taille images * - Première image : décalage +10vh vers la droite (margin-left: 10vh) * - Deuxième image : augmentation taille +25% (32vh → 40vh, soit 80% de 50vh) * - Deuxième image : alignement en bas (bottom: 0) avec l'image principale * - Amélioration équilibre visuel et superposition * 0.0.4 - Carousel-produits : alignement et centrage des images superposées * - Première image : alignée à gauche (justify-content: flex-start) * - Deuxième image : centrée (left: 50%, transform: translateX(-50%)) * - Nouvelle animation slideInFromRightCentered pour maintenir le centrage * - Amélioration de la composition visuelle * 0.0.3 - Carousel-produits : design superposé pour 2 variations * - Première image (plus chère) : 50vh, z-index 1, derrière, translateX(-5vh) * - Deuxième image : 32vh (64% de la première), z-index 2, devant, right -3vh * - Animation décalée dans le temps (+0.2s) pour la seconde image * - Fixes Imagify pour forcer hauteur correcte sur les deux images * - Sélecteur :only-child pour images uniques (produits simples) * 0.0.2 - Carousel-produits : support images multiples pour produits variables * - Conteneur .carousel-images-container avec flexbox horizontal * - Gap entre images : var(--spacing-md) (3vh) * - Largeur max par image : 33% (3 images visibles simultanément) * - Alignement centré et responsive * 0.0.1 - Extraction depuis sections.css (v0.0.101) * - Styles carousels produits et transmission * - Animations décoratives (nuages, montgolfière) * - Navigation (dots, flèches) * - Keyframes et @property definitions */ /* ============================================================================ Carousel Models - Desktop uniquement (≥1201px) ========================================================================== */ @media (min-width: 1201px) { /* ======================================================================== Modèle Carrousel Produits ======================================================================== */ .section-model-carousel-produits .carousel-main-title, .section-model-carousel-transmission .carousel-main-title { font-family: var(--font-h2-large-family); font-size: var(--font-h2-large-size); font-weight: var(--font-h2-large-weight); line-height: var(--line-height-tight); margin: 0 0 -12.5vh 0; width: 50%; position: relative; z-index: 2; } .section-model-carousel-produits .uav-carousel-wrapper, .section-model-carousel-transmission .uav-carousel-wrapper { --slide-transition: 1500ms; --image-exit-duration: 1s; --image-enter-duration: 1s; --image-enter-delay: 1s; position: relative; z-index: 1; width: 100%; overflow: visible; } /* Slides */ .section-model-carousel-produits .uav-carousel-slide, .section-model-carousel-transmission .uav-carousel-slide { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; z-index: 1; transition: opacity var(--slide-transition) ease-in-out; pointer-events: none; } .section-model-carousel-produits .uav-carousel-slide.active { position: relative; opacity: 1; z-index: 2; pointer-events: auto; } .section-model-carousel-transmission .uav-carousel-slide.active { position: relative; opacity: 1; z-index: auto; /* Pas de contexte de stacking pour permettre z-index sur images */ pointer-events: auto; } /* Contenu du slide */ .section-model-carousel-produits .carousel-slide-content, .section-model-carousel-transmission .carousel-slide-content { display: flex; flex-direction: row; align-items: flex-start; gap: 0; width: 100%; } /* Colonne gauche : contenu texte */ .section-model-carousel-produits .carousel-slide-left, .section-model-carousel-transmission .carousel-slide-left { display: flex; flex-direction: column; gap: var(--spacing-sm); justify-content: center; flex: 1; margin-top: 15vh; } .section-model-carousel-produits .carousel-slide-title, .section-model-carousel-transmission .carousel-slide-title { font-family: var(--font-h3-family); font-size: var(--font-h3-size); font-weight: var(--font-h3-weight); line-height: var(--font-h3-line-height); margin: 0; width: 70vh; } .section-model-carousel-produits .carousel-slide-text, .section-model-carousel-transmission .carousel-slide-text { font-family: var(--font-body-family); font-size: var(--font-text-size); font-weight: var(--font-text-weight); line-height: var(--line-height-comfortable); } /* Colonne droite : image avec conteneur rose */ .section-model-carousel-produits .carousel-slide-right, .section-model-carousel-transmission .carousel-slide-right { position: relative; display: flex; align-items: flex-start; justify-content: flex-start; flex: 1; } /* Styles spécifiques carousel-transmission : colonnes en flex column */ .section-model-carousel-transmission .carousel-slide-content { gap: 0; align-items: center; } .section-model-carousel-transmission .carousel-slide-left { flex: 0 0 50%; margin-top: 0; flex-direction: column; gap: var(--spacing-md); } .section-model-carousel-transmission .carousel-slide-right { flex: 0 0 50%; flex-direction: column; gap: var(--spacing-md); } /* Masquer les flèches de navigation pour carousel-transmission */ .section-model-carousel-transmission .carousel-arrow { display: none; } .section-model-carousel-produits .carousel-image-wrapper, .section-model-carousel-transmission .carousel-image-wrapper { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; } /* Double images superposées pour carousel-transmission */ .section-model-carousel-transmission .carousel-images-dual { gap: 0; position: relative; min-height: 50vh; /* Hauteur minimale pour contenir les images */ justify-content: flex-start; /* Aligner à gauche au lieu de center */ } /* Image principale : 66% largeur, alignée gauche, premier plan */ .section-model-carousel-transmission .carousel-image-item:first-child { width: 66%; z-index: 3; position: relative; align-self: center; /* Centrage vertical */ } /* Image secondaire : 50% largeur, alignée droite, arrière-plan */ .section-model-carousel-transmission .carousel-image-item:last-child { width: 50%; z-index: 1; position: absolute; right: 0; top: 50%; /* Centrage vertical */ transform: translateY(-50%); } /* Hauteur libre pour les images du carousel-transmission */ .section-model-carousel-transmission .carousel-image-item .carousel-product-image { height: auto; max-height: 75vh; will-change: transform; /* Optimisation pour animation rotation */ transition: opacity var(--image-exit-duration) ease; /* Désactiver transition sur transform pour rotation fluide */ } /* Ombre portée sur l'image principale (suit la forme du PNG transparent) */ .section-model-carousel-transmission .carousel-image-item:first-child .carousel-product-image { filter: drop-shadow(1.5vh 0.75vh 2vh rgba(0, 0, 0, 0.3)); } /* Ombre portée sur l'image secondaire (plus légère car en arrière-plan) */ .section-model-carousel-transmission .carousel-image-item:last-child .carousel-product-image { filter: drop-shadow(1.5vh 0.75vh 2vh rgba(0, 0, 0, 0.15)); } /* Nuage Or - Image décorative fixe au premier plan */ .section-model-carousel-transmission .carousel-nuage-or { position: absolute; left: -20vh; top: -10vh; z-index: 10; pointer-events: none; /* Ne pas bloquer les interactions avec le carousel */ } .section-model-carousel-transmission .carousel-nuage-or .carousel-nuage-image { display: block; width: 45vh; height: auto; } /* Nuage Rose - Image décorative fixe en arrière-plan */ .section-model-carousel-transmission .carousel-nuage-rose { position: absolute; right: 50%; /* Aligné à droite de la colonne gauche (50% de largeur) */ bottom: 0; z-index: 0; /* Derrière les images */ pointer-events: none; /* Animation de flottement douce et lente (sans rotation) */ animation: rose-horizontal 23s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate, rose-vertical 17s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate, rose-pulsation 19s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate; transform: translateX(calc(15vh + var(--rose-x))) translateY(var(--rose-y)) scale(var(--rose-scale)); will-change: transform; } .section-model-carousel-transmission .carousel-nuage-rose .carousel-nuage-image { display: block; width: 35vh; height: auto; } /* Nuage Vert - Image décorative fixe en arrière-plan, bas à gauche */ .section-model-carousel-transmission .carousel-nuage-vert { position: absolute; left: -15vh; bottom: -5vh; z-index: 0; /* Derrière les images */ pointer-events: none; /* Animation de flottement douce (sans rotation, rythmes très différents du rose) */ animation: vert-horizontal 13s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate, vert-vertical 11s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate, vert-pulsation 7s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate; transform: translateX(var(--vert-x)) translateY(var(--vert-y)) scale(var(--vert-scale)); will-change: transform; } .section-model-carousel-transmission .carousel-nuage-vert .carousel-nuage-image { display: block; width: 30vh; height: auto; } /* Custom properties pour animation nuage rose */ @property --rose-x { syntax: ''; inherits: false; initial-value: 0vh; } @property --rose-y { syntax: ''; inherits: false; initial-value: 0vh; } @property --rose-rotate { syntax: ''; inherits: false; initial-value: 0deg; } @property --rose-scale { syntax: ''; inherits: false; initial-value: 1; } /* Custom properties pour animation nuage vert */ @property --vert-x { syntax: ''; inherits: false; initial-value: 0vh; } @property --vert-y { syntax: ''; inherits: false; initial-value: 0vh; } @property --vert-rotate { syntax: ''; inherits: false; initial-value: 0deg; } @property --vert-scale { syntax: ''; inherits: false; initial-value: 1; } /* Montgolfière - Image décorative fixe, derrière les livres */ /* Note : propriétés CSS individuelles (translate/rotate/scale) à la place de @property + transform() pour éviter le bug Safari de calcul des painted bounds. Safari calcule les bounds sur initial-value (0) des @property, ce qui entraîne un culling de l'élément quand sa position initiale est hors du scroll visible. */ .section-model-carousel-transmission .carousel-montgolfiere { position: absolute; right: 50%; /* Aligné au bord droit de la colonne gauche (50% de largeur) */ top: -15vh; z-index: 0; /* Derrière les images des livres */ pointer-events: none; /* Ne gêne pas les interactions */ animation: mtg-drift 23s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate, mtg-rotation 11s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite alternate, mtg-pulsation 19s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate; will-change: translate, rotate, scale; } .section-model-carousel-transmission .carousel-montgolfiere .carousel-nuage-image { display: block; width: 16.2vh; /* 18vh - 10% */ height: auto; } /* Keyframes pour animation montgolfière (propriétés individuelles CSS) */ @keyframes mtg-drift { 0% { translate: 15vh -2.5vh; } /* Départ : droite + haut */ 30% { translate: 0vh -1vh; } 65% { translate: -30vh 1.25vh; } /* Ralentissement */ 100% { translate: -45vh 5vh; } /* Arrivée : gauche + bas */ } @keyframes mtg-rotation { 0% { rotate: -2deg; } 35% { rotate: 1.5deg; } 70% { rotate: -1deg; } 100% { rotate: 2deg; } } @keyframes mtg-pulsation { 0% { scale: 1; } 50% { scale: 1.1; } 100% { scale: 1.2; } } /* Keyframes pour animation nuage rose (flottement doux, sans rotation) */ @keyframes rose-horizontal { 0% { --rose-x: -0.5vh; } /* Très léger mouvement horizontal */ 50% { --rose-x: 0vh; } 100% { --rose-x: 1vh; } } @keyframes rose-vertical { 0% { --rose-y: -1.5vh; } 40% { --rose-y: 0vh; } 100% { --rose-y: 2vh; } } @keyframes rose-pulsation { 0% { --rose-scale: 1; } 60% { --rose-scale: 1.015; } 100% { --rose-scale: 1.03; } } /* Keyframes pour animation nuage vert (flottement doux, rythmes différents, sans rotation) */ @keyframes vert-horizontal { 0% { --vert-x: -0.3vh; } /* Très très léger mouvement horizontal */ 60% { --vert-x: 0.2vh; } 100% { --vert-x: 0.5vh; } } @keyframes vert-vertical { 0% { --vert-y: -1vh; } 35% { --vert-y: 0.3vh; } 100% { --vert-y: 1.2vh; } } @keyframes vert-pulsation { 0% { --vert-scale: 1; } 45% { --vert-scale: 1.02; } 100% { --vert-scale: 1.04; } } /* Conteneur coloré derrière l'image */ .section-model-carousel-produits .carousel-color-background, .section-model-carousel-transmission .carousel-color-background { position: absolute; top: 17.5vh; right: 0; width: 95%; height: 25vh; z-index: 0; } /* Image produit */ .section-model-carousel-produits .carousel-product-image, .section-model-carousel-transmission .carousel-product-image { position: relative; max-width: 100%; height: 50vh; width: auto; object-fit: contain; display: block; z-index: 1; opacity: 0; transition: opacity var(--image-exit-duration) ease, transform var(--image-exit-duration) ease; } /* Taille spécifique pour carousel-transmission */ .section-model-carousel-transmission .carousel-product-image { height: 75vh; } /* Fix Imagify : forcer height sur img dans picture pour carousel-produits */ .section-model-carousel-produits .carousel-product-image img, .section-model-carousel-produits picture img { height: 50vh; width: auto; max-width: 100%; object-fit: contain; } /* Conteneur pour images multiples superposées (produits variables) */ .section-model-carousel-produits .carousel-images-container { position: relative; width: 100%; min-height: 50vh; display: flex; align-items: center; justify-content: flex-start; /* Alignement à gauche pour la première image */ } /* Première variation (la plus chère) : grande image avec décalage droit */ .section-model-carousel-produits .carousel-images-container .carousel-product-image:first-child { position: relative; height: 50vh; width: 50vh; /* Largeur = hauteur pour format carré */ margin-left: 10vh; /* Décalage de 10vh vers la droite */ z-index: 1; opacity: 0; transform: translateX(-15vh); /* État initial : sortie vers la gauche */ transition: opacity var(--image-exit-duration) var(--ease-smooth), transform var(--image-exit-duration) var(--ease-smooth); } /* Fix Imagify pour première image */ .section-model-carousel-produits .carousel-images-container .carousel-product-image:first-child img, .section-model-carousel-produits .carousel-images-container picture:first-child img { height: 50vh; width: 50vh; } /* Image unique (produit simple ou 1 seule variation) : annuler styles de :last-child */ .section-model-carousel-produits .carousel-images-container .carousel-product-image:only-child { position: relative; /* Pas absolute */ height: 50vh; /* Même taille que première variation */ width: 50vh; margin-left: 15vh; /* Décalage modéré pour image unique */ left: auto; /* Annuler left de :last-child */ bottom: auto; /* Annuler bottom de :last-child */ transform: translateX(-15vh); /* État initial : sortie vers la gauche */ z-index: 1; opacity: 0; transition: opacity var(--image-exit-duration) var(--ease-smooth), transform var(--image-exit-duration) var(--ease-smooth); } .section-model-carousel-produits .carousel-images-container .carousel-product-image:only-child img, .section-model-carousel-produits .carousel-images-container picture:only-child img { height: 50vh; width: 50vh; } /* Deuxième variation : image moyenne décalée droite et bas (uniquement si 2+ images) */ .section-model-carousel-produits .carousel-images-container .carousel-product-image:last-child:not(:only-child) { position: absolute; height: 40vh; /* 80% de 50vh (32vh * 1.25) */ width: 40vh; /* Largeur = hauteur pour format carré */ left: calc(50% + 10vh); /* Centré + décalage 10vh vers la droite */ bottom: -2.5vh; /* Décalage 2.5vh vers le bas */ transform: translateX(calc(-50% - 15vh)); /* État initial : sortie vers la gauche en maintenant centrage */ z-index: 2; opacity: 0; transition: opacity var(--image-exit-duration) var(--ease-smooth) 0.25s, transform var(--image-exit-duration) var(--ease-smooth) 0.25s; } /* Fix Imagify pour deuxième image (uniquement si 2+ images) */ .section-model-carousel-produits .carousel-images-container .carousel-product-image:last-child:not(:only-child) img, .section-model-carousel-produits .carousel-images-container picture:last-child:not(:only-child) img { height: 40vh; width: 40vh; } /* Animation image : entrée depuis la droite */ @keyframes slideInFromRight { from { transform: translateX(10vh); opacity: 0; } to { transform: translateX(-5vh); opacity: 1; } } /* État final : slide actif → images visibles à leur position de repos. Pas d'animation ici pour ne pas bloquer l'affichage au chargement. */ .section-model-carousel-produits .uav-carousel-slide.active .carousel-product-image:only-child, .section-model-carousel-transmission .uav-carousel-slide.active .carousel-product-image { opacity: 1; transform: translateX(-5vh); } .section-model-carousel-produits .uav-carousel-slide.active .carousel-images-container .carousel-product-image:first-child { opacity: 1; transform: translateX(-5vh); } .section-model-carousel-produits .uav-carousel-slide.active .carousel-images-container .carousel-product-image:last-child:not(:only-child) { opacity: 1; transform: translateX(-50%); } /* Animation image transmission : to=translateX(0) pour correspondre à l'état CSS final. L'animation partagée (slideInFromRight) finit à translateX(-5vh), différent de la position de repos transmission (translateX(0)) → saut visible. Keyframe dédié. */ @keyframes slideInFromRightTransmission { from { transform: translateX(10vh); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* Animation entrée : uniquement lors d'une navigation (classe is-entering ajoutée par JS). Au chargement, les images apparaissent directement à leur position finale. */ .section-model-carousel-produits .uav-carousel-slide.is-entering .carousel-product-image:only-child { animation: slideInFromRight var(--image-enter-duration) var(--ease-smooth) 0.75s backwards; } .section-model-carousel-transmission .uav-carousel-slide.is-entering .carousel-image-item:first-child .carousel-product-image { animation: slideInFromRightTransmission var(--image-enter-duration) var(--ease-smooth) 0.75s backwards; } .section-model-carousel-transmission .uav-carousel-slide.is-entering .carousel-image-item:last-child .carousel-product-image { animation: slideInFromRightTransmission var(--image-enter-duration) var(--ease-smooth) 0.95s backwards; } .section-model-carousel-produits .uav-carousel-slide.is-entering .carousel-images-container .carousel-product-image:first-child { animation: slideInFromRight var(--image-enter-duration) var(--ease-smooth) var(--image-enter-delay) backwards; } .section-model-carousel-produits .uav-carousel-slide.is-entering .carousel-images-container .carousel-product-image:last-child:not(:only-child) { animation: slideInFromRightCentered var(--image-enter-duration) var(--ease-smooth) calc(var(--image-enter-delay) + 0.5s) backwards; } /* Animation spécifique pour image centrée */ @keyframes slideInFromRightCentered { from { transform: translateX(calc(-50% + 10vh)); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } } /* Position spécifique pour carousel-transmission */ .section-model-carousel-transmission .uav-carousel-slide.active .carousel-product-image { transform: translateX(0); } /* Points de navigation */ .section-model-carousel-produits .carousel-dots, .section-model-carousel-transmission .carousel-dots { position: absolute; top: calc(100% + 1vh); left: 50%; transform: translateX(-50%); display: flex; gap: var(--spacing-xs); z-index: 10; } .section-model-carousel-produits .carousel-dots .dot, .section-model-carousel-transmission .carousel-dots .dot { width: 0.8vh; height: 0.8vh; border-radius: 50%; background: var(--color-text); opacity: 0.4; cursor: pointer; transition: opacity var(--transition-normal) ease; border: var(--border-thin) solid transparent; } .section-model-carousel-produits .carousel-dots .dot.active, .section-model-carousel-transmission .carousel-dots .dot.active { opacity: 1; border-color: var(--color-text); } /* Flèches de navigation */ .section-model-carousel-produits .carousel-arrow, .section-model-carousel-transmission .carousel-arrow { position: absolute; top: 44.5vh; width: 4vh; height: 4vh; padding: var(--spacing-2xs); background: transparent; color: var(--color-text); border: var(--border-normal) solid var(--color-text); border-radius: 50%; cursor: pointer; font-size: var(--text-size-l); line-height: var(--line-height-tight); z-index: 10; transition: background var(--transition-normal) ease, color var(--transition-normal) ease; display: flex; align-items: center; justify-content: center; } .section-model-carousel-produits .carousel-arrow:hover, .section-model-carousel-transmission .carousel-arrow:hover { background: var(--color-text); color: var(--color-background); } .section-model-carousel-produits .carousel-arrow-prev, .section-model-carousel-transmission .carousel-arrow-prev { right: 5vh; } .section-model-carousel-produits .carousel-arrow-next, .section-model-carousel-transmission .carousel-arrow-next { right: 0; } .section-model-carousel-produits .carousel-arrow span, .section-model-carousel-transmission .carousel-arrow span { display: block; margin-top: -0.3vh; } }