/* Theme Name: Hello-Child Theme URI: https://ricracandco.com/wp-content/themes/hello-child/ Template: hello-elementor Author: Elementor Team Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators. Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready Version: 3.3.0.1740178074 Updated: 2025-02-21 23:47:54 */ /*

= font-family: "Aclonica", Sans-serif; font-size: 44px; font-weight: 300; text-transform: none; font-style: normal; text-decoration: none;*/ /*

= color: rgb(131, 155, 136); font-family: Poppins, sans-serif; font-size: 40px; font-weight: 500;*/ /*HEADER-Logo-menu*/ /* au dessus de la Tablette */ /* Media query pour les écrans de 1000px et plus */ @media (min-width: 1000px) { #menu-item-27 .hfe-menu-item:hover { color:green; -webkit-transform: rotate(-25deg); /* Pour Safari et Chrome anciens */ -moz-transform: rotate(-25deg); /* Pour Firefox ancien */ -ms-transform: rotate(-25deg); /* Pour Internet Explorer 9 */ -o-transform: rotate(-25deg); /* Pour Opera ancien */ transform: rotate(-25deg); /* Standard, pour les navigateurs modernes */ } #menu-item-31 a.hfe-menu-item:hover{ color:green; -webkit-transform: rotate(-25deg); /* Pour Safari et Chrome anciens */ -moz-transform: rotate(-25deg); /* Pour Firefox ancien */ -ms-transform: rotate(-25deg); /* Pour Internet Explorer 9 */ -o-transform: rotate(-25deg); /* Pour Opera ancien */ transform: rotate(-25deg); /* Standard, pour les navigateurs modernes */ } #menu-item-28 a.hfe-menu-item:hover { color:green; -webkit-transform: rotate(-25deg); /* Pour Safari et Chrome anciens */ -moz-transform: rotate(-25deg); /* Pour Firefox ancien */ -ms-transform: rotate(-25deg); /* Pour Internet Explorer 9 */ -o-transform: rotate(-25deg); /* Pour Opera ancien */ transform: rotate(-25deg); /* Standard, pour les navigateurs modernes */ } #menu-item-30 a.hfe-menu-item:hover { color:green; -webkit-transform: rotate(-25deg); /* Pour Safari et Chrome anciens */ -moz-transform: rotate(-25deg); /* Pour Firefox ancien */ -ms-transform: rotate(-25deg); /* Pour Internet Explorer 9 */ -o-transform: rotate(-25deg); /* Pour Opera ancien */ transform: rotate(-25deg); /* Standard, pour les navigateurs modernes */ } /*BOUTON DU MENU*/ /* au dessus de la Tablette */ #menu-item-29 a.hfe-menu-item.elementor-button { background-color: white; color: black; /* Optionnel : change la couleur du texte pour qu'il soit visible sur le fond blanc */ font-size: 105%; } #menu-item-29 a.hfe-menu-item.elementor-button:hover{ color:green; -webkit-transform: rotate(-25deg); /* Pour Safari et Chrome anciens */ -moz-transform: rotate(-25deg); /* Pour Firefox ancien */ -ms-transform: rotate(-25deg); /* Pour Internet Explorer 9 */ -o-transform: rotate(-25deg); /* Pour Opera ancien */ transform: rotate(-25deg); /* Standard, pour les navigateurs modernes */ } /*bouton actif*/ #menu-item-29.current-menu-item a.hfe-menu-item.elementor-button{ background-color: white; color:green; } /* SOUS MENU BOUTIQUE-PANIER */ ul.sub-menu { background: white; border-radius: 17px; border: 4px solid #61ce70 !important; padding:0px 10px 0px 10px; background-clip: padding-box; box-sizing: border-box; } .hfe-nav-menu__layout-horizontal .hfe-nav-menu .sub-menu { box-shadow: none !important; z-index: -1; } /* Assure-toi que ton background rouge a un z-index suffisant pour être visible */ .elementor-32 .elementor-element.elementor-element-a4e4af6 .menu-item a.hfe-sub-menu-item { display: block; position: relative; } } /*HAMBURGER*/ .hfe-nav-menu-icon svg { width: 100px; height: auto; background-color: rgb(238,255,236); padding: 20%; border-radius: 4px; } /*FIN DU BOUTON DU MENU*/ /*FIN DU HEADER-Logo-MENU*/ /*PAGE-2R-FAMILY*/ /* Styles au survol du conteneur commun de ( SERVICE ) (.elementor-2 .elementor-element.elementor-element-68b76e1.e-con) */ /* Quand la souris survole le conteneur, change la couleur du texte */ .elementor-2 .elementor-element.elementor-element-68b76e1.e-con:hover .elementor-element.elementor-element-aa01ae8 .elementor-heading-title a { color: #61ce70; } /* Quand la souris survole le conteneur, applique la bordure de l'image */ .elementor-2 .elementor-element.elementor-element-68b76e1.e-con:hover .elementor-element.elementor-element-5b37d55 img { border-style: solid; border-color: #61ce70; /* La couleur verte de la bordure */ border-width: 4px; /* Raccourci pour 4px 4px 4px 4px */ border-radius: 20px; } /* Styles au survol du conteneur commun de ( CONTACT ) */ .elementor-2 .elementor-element.elementor-element-52ad22f.e-con:hover .elementor-element.elementor-element-d64f9a8 .elementor-heading-title a { color: #61ce70; } /* Quand la souris survole le conteneur, applique la bordure de l'image */ .elementor-2 .elementor-element.elementor-element-52ad22f.e-con:hover .elementor-element.elementor-element-c6b1350 img { border-style: solid; border-color: #61ce70; border-width: 4px; border-radius: 20px; } /* --- Styles au survol du conteneur commun (BOUTIQUE ) (81c3855) --- */ /* Quand la souris survole le conteneur, change la couleur du texte */ .elementor-2 .elementor-element.elementor-element-81c3855.e-con:hover .elementor-element.elementor-element-6f65672 .elementor-heading-title a { color: #61ce70; /* La couleur verte au survol */ } /* Quand la souris survole le conteneur, applique la bordure de l'image */ .elementor-2 .elementor-element.elementor-element-81c3855.e-con:hover .elementor-element.elementor-element-7c1c260 img { border-style: solid; border-color: #61ce70; /* La couleur verte de la bordure */ border-width: 4px; /* Épaisseur de la bordure */ border-radius: 20px; /* Arrondi des coins de la bordure */ } /*FIN PAGE 2R CREA*/ /*PAGE INFO-LEGALES PARTICULIERS*/ .e-link-in-bio__ctas .e-link-in-bio__cta:hover{ color: white; } .e-link-in-bio__ctas .e-link-in-bio__cta.is-type-button :hover{ border:1px black solid; color:black; background-color: rgb(238,255,236); font-family: roboto; font-size: 16px; font-weight: 600; } /*FIN PAGE INFO-LEGALES PARTICULIERS*/ /*Page contact*/ /*BOUTON*/ div.wpforms-container-full input[type=submit]:not(:hover):not(:active), div.wpforms-container-full button[type=submit]:not(:hover):not(:active), div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active), .wp-core-ui div.wpforms-container-full input[type=submit]:not(:hover):not(:active), .wp-core-ui div.wpforms-container-full button[type=submit]:not(:hover):not(:active), .wp-core-ui div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active) { background-color: green; } div.wpforms-container-full input[type=submit]:not(:active), div.wpforms-container-full button[type=submit]:not(:active), div.wpforms-container-full .wpforms-page-button:not(:active), .wp-core-ui div.wpforms-container-full input[type=submit]:not(:active), .wp-core-ui div.wpforms-container-full button[type=submit]:not(:active), .wp-core-ui div.wpforms-container-full .wpforms-page-button:not(:active) { background-color: white; border: 4px solid green; color: black; } div.wpforms-container-full input[type=submit]:hover, div.wpforms-container-full button[type=submit]:hover, div.wpforms-container-full .wpforms-page-button:hover, .wp-core-ui div.wpforms-container-full input[type=submit]:hover, .wp-core-ui div.wpforms-container-full button[type=submit]:hover, .wp-core-ui div.wpforms-container-full .wpforms-page-button:hover { background-color: white !important; /* Ajout de !important */ } #wpforms-submit-1496:hover { background-color: white !important; /* Ajout de !important */ } div.wpforms-container-full input[type=submit]:hover, div.wpforms-container-full input[type=submit]:active, div.wpforms-container-full button[type=submit]:hover, div.wpforms-container-full button[type=submit]:active, div.wpforms-container-full .wpforms-page-button:hover, div.wpforms-container-full .wpforms-page-button:active, .wp-core-ui div.wpforms-container-full input[type=submit]:hover, .wp-core-ui div.wpforms-container-full input[type=submit]:active, .wp-core-ui div.wpforms-container-full button[type=submit]:hover, .wp-core-ui div.wpforms-container-full button[type=submit]:active, .wp-core-ui div.wpforms-container-full .wpforms-page-button:hover, .wp-core-ui div.wpforms-container-full .wpforms-page-button:active { background-color: white !important; /* Remplacement du dégradé par un fond blanc */ } /*Page contact*/ /*FORMULAIRE*/ div.wpforms-container-full input[type=date], div.wpforms-container-full input[type=datetime], div.wpforms-container-full input[type=datetime-local], div.wpforms-container-full input[type=email], div.wpforms-container-full input[type=month], div.wpforms-container-full input[type=number], div.wpforms-container-full input[type=password], div.wpforms-container-full input[type=range], div.wpforms-container-full input[type=search], div.wpforms-container-full input[type=tel], div.wpforms-container-full input[type=text], div.wpforms-container-full input[type=time], div.wpforms-container-full input[type=url], div.wpforms-container-full input[type=week], div.wpforms-container-full select, div.wpforms-container-full textarea, .wp-core-ui div.wpforms-container-full input[type=date], .wp-core-ui div.wpforms-container-full input[type=datetime], .wp-core-ui div.wpforms-container-full input[type=datetime-local], .wp-core-ui div.wpforms-container-full input[type=email], .wp-core-ui div.wpforms-container-full input[type=month], .wp-core-ui div.wpforms-container-full input[type=number], .wp-core-ui div.wpforms-container-full input[type=password], .wp-core-ui div.wpforms-container-full input[type=range], .wp-core-ui div.wpforms-container-full input[type=search], .wp-core-ui div.wpforms-container-full input[type=tel], .wp-core-ui div.wpforms-container-full input[type=text], .wp-core-ui div.wpforms-container-full input[type=time], .wp-core-ui div.wpforms-container-full input[type=url], .wp-core-ui div.wpforms-container-full input[type=week], .wp-core-ui div.wpforms-container-full select, .wp-core-ui div.wpforms-container-full textarea{ border:3px solid green; } /*TEXTE DU MENU DÉROULANT*/ #wpforms-1496-field_4{ color:green; font-weight: bolder; } /*Flèche vers le bas du menu déroulant*/ div.wpforms-container-full select, div.wpforms-container-full select:disabled, .wp-core-ui div.wpforms-container-full select, .wp-core-ui div.wpforms-container-full select:disabled { appearance: none; /* Supprime l'apparence par défaut du navigateur */ -webkit-appearance: none; /* Pour les navigateurs basés sur WebKit */ -moz-appearance: none; /* Pour Firefox */ padding-right: 20px; /* Espace pour la flèche */ background-image: url('data:image/svg+xml;utf8,▼'); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px; } /*FIN PAGE CONTACT*/ /*PAGE BOOK*/ /* CSS pour les éléments de galerie (adapté à la structure avec le lien ) */ /* Cible le conteneur principal de l'élément de galerie */ .eael-gallery-grid-item { /* Assurez-vous que cet élément a un positionnement si des enfants absolus en ont besoin */ position: relative; /* overflow: hidden; /* Peut être nécessaire si l'overlay dépasse */ */ } /* Cible l'élément lien à l'intérieur de l'élément de galerie */ /* On va attacher l'overlay ::before à cet élément */ .eael-gallery-grid-item > a { position: relative; /* **Indispensable** : Positionne le pseudo-élément ::before par rapport à ce lien */ display: block; /* Important pour que le lien contienne correctement ses enfants (image et légende) */ text-decoration: none; /* Enlève le soulignement par défaut des liens si présent */ color: inherit; /* Hérite la couleur du texte */ } /* Styles du pseudo-élément ::before qui crée l'overlay, attaché au lien */ .eael-gallery-grid-item > a::before { content: ''; /* Nécessaire pour créer le pseudo-élément */ position: absolute; /* Permet de le positionner précisément sur le lien */ top: 0; right: 0; bottom: 0; left: 0; background-color: green; /* La couleur verte de l'overlay */ opacity: 0; /* L'overlay est invisible par défaut */ transition: opacity 0.3s ease-in-out; /* Transition douce pour l'apparition */ z-index: 2; /* **Important** : Place l'overlay au-dessus de l'image (qui aura z-index 1) */ pointer-events: none; /* Permet de cliquer sur le lien malgré l'overlay */ } /* --- Règles de survol --- */ /* Fait apparaître l'overlay vert lorsque le conteneur principal (.eael-gallery-grid-item) est survolé */ /* Ou vous pourriez aussi utiliser .eael-gallery-grid-item > a:hover::before { opacity: 0.5; } */ .eael-gallery-grid-item:hover > a::before { opacity: 0.5; /* Rend l'overlay semi-transparent au survol (ajustez si besoin) */ } /* Styles pour l'image - Assurez-vous qu'elle est en dessous de l'overlay */ /* Ciblez l'image à l'intérieur du conteneur de l'image (qui est dans le lien a) */ .eael-gallery-grid-item .gallery-item-thumbnail-wrap img { display: block; width: 100%; height: auto; position: relative; /* Nécessaire pour que la propriété z-index fonctionne */ z-index: 1; /* **Important** : S'assure que l'image est en-dessous de l'overlay (z-index: 2) */ } /* Styles pour le conteneur de la légende - Ajustez son z-index s'il doit être au-dessus de l'overlay */ .gallery-item-caption-wrap.caption-style-card { /* Si la légende doit être visible au-dessus de l'overlay */ position: relative; /* Nécessaire pour z-index */ z-index: 3; /* **Important** : Mettez au-dessus de l'overlay (z-index: 2) */ /* Conservez vos autres styles pour la légende (fond, texte, etc.) */ transition: background-color 0.3s ease-in-out; /* Transition pour le fond de la légende */ } /* Optionnel : Si vous voulez que le fond de la légende change aussi au survol de l'élément complet */ .eael-gallery-grid-item:hover .gallery-item-caption-wrap.caption-style-card { background-color: green !important; /* Change le fond de la légende au survol */ } /* Si le contenu intérieur de la légende (.gallery-item-caption-over) a besoin d'être au-dessus */ .gallery-item-caption-wrap.caption-style-card .gallery-item-caption-over { position: relative; /* Nécessaire pour z-index */ z-index: 4; /* **Important** : Mettez plus haut que la légende elle-même si besoin */ } /* FIN PAGE BOOK */ /* BASIQUE GALLERY SLIDESHOW-CACHER LA DESCRIPTION ET TITRE*/ .elementor-slideshow__footer, .elementor-slideshow__description, .elementor-slideshow__title { display: none !important; } /* BASIQUE GALLERY SLIDESHOW-FLECHE DE NAVIGATION GAUCHE ET DROITE*/ .elementor-element .swiper .elementor-swiper-button svg, .elementor-element .swiper~.elementor-swiper-button svg, .elementor-lightbox .swiper .elementor-swiper-button svg, .elementor-lightbox .swiper~.elementor-swiper-button svg { fill: hsla(128, 92%, 33%, 0.9) !important; height: 60px !important; width: 60px !important; } /*PAGE ARTISTE*/ /*BASIQUE-GALERY HOVER*/ .elementor-1851 .elementor-element.elementor-element-31fea37 .gallery-item a img:hover{ border-style: solid; border-width: 4px 4px 4px 4px; border-color:rgb(131, 155, 136); border-radius: 60px 60px 60px 60px; } /*FIN PAGE ARTISTE*/ /*PAGE-STUDIO-MODE*/ /*HOMMES-COMBATTANTS-BASIQUE-GALERY HOVER*/ .elementor-1577 .elementor-element.elementor-element-b106d36 .gallery a img:hover{ border-style: solid; border-width: 4px 4px 4px 4px; border-color:rgb(131, 155, 136); border-radius: 60px 60px 60px 60px; } /*PAGE-STUDIO-MODE*/ /*FEMMES-COMBATTANTES-BASIQUE-GALERY HOVER*/ .elementor-1577 .elementor-element.elementor-element-54339e2 .gallery a img:hover{ border-style: solid; border-width: 4px 4px 4px 4px; border-color:rgb(131, 155, 136); border-radius: 60px 60px 60px 60px; } /*PAGE-STUDIO-MODE*/ /*LIGHT-PAINTING-BASIQUE-GALERY HOVER*/ .elementor-1577 .elementor-element.elementor-element-41d6383 .gallery-item a img:hover{ border-style: solid; border-width: 4px 4px 4px 4px; border-color:rgb(131, 155, 136); border-radius: 60px 60px 60px 60px; } /*PAGE-STUDIO-MODE*/ /*FASHION-VICTIME-BASIQUE-GALERY HOVER*/ .elementor-1577 .elementor-element.elementor-element-334e1d5 .gallery-item a img:hover{ border-style: solid; border-width: 4px 4px 4px 4px; border-color:rgb(131, 155, 136); border-radius: 60px 60px 60px 60px; } /*PAGE-STUDIO-MODE*/ /*MODEE-BASIQUE-GALERY HOVER*/ .elementor-1577 .elementor-element.elementor-element-fd9ff04 a img:hover{ border-style: solid; border-width: 4px 4px 4px 4px; border-color:rgb(131, 155, 136); border-radius: 60px 60px 60px 60px; } /*FIN-PAGE-STUDIO-MODE*/ /* BASIQUE GALLERY a image GENERAL*/ .elementor-image-gallery .gallery-item a img{ border-style: solid; border-width:4px 4px 4px 4px; border-color:#61CE70; border-radius:20px 20px 20px 20px; } /* BASIQUE GALLERY hover a image GENERAL*/ .elementor-image-gallery .gallery-item a img:hover{ border-style: solid; border-width:4px 4px 4px 4px; border-color:rgb(131, 155, 136); border-radius:60px 60px 60px 60px; } /*PAGE ENTREPRISE POUR LES HOVERS DES BASIQUES GALERY*/ /*PHOTOGRAPHIES CULINAIRE*/ .elementor-1402 .elementor-element.elementor-element-bab3bad .gallery-item a img:hover{ border-style: solid; border-width: 4px 4px 4px 4px; border-color:rgb(131, 155, 136); border-radius: 60px 60px 60px 60px; } /*PAGE ENTREPRISE POUR LES HOVERS DES BASIQUES GALERY*/ /*MAGASIN*/ /*.elementor-1402 .elementor-element.elementor-element-a43d7fd .gallery-item img a img:hover{ border-style: solid; border-width:4px 4px 4px 4px; border-color:rgb(131, 155, 136); border-radius:60px 60px 60px 60px; }*/ /*PAGE ENTREPRISE POUR LES HOVERS DES BASIQUES GALERY*/ /*RESTAURATION*/ .elementor-1402 .elementor-element.elementor-element-7fd2ec8 .gallery-item a img:hover{ border-style: solid; border-width:4px 4px 4px 4px; border-color:rgb(131, 155, 136); border-radius:60px 60px 60px 60px; } /*FIN PAGE ENTREPRISE*/ /*PAGE REPORTAGE POUR LES HOVERS DES BASIQUES GALERY*/ /*REPORTAGE-PHOTO*/ .elementor-1458 .elementor-element.elementor-element-ff6595b a img:hover { border-style: solid; border-width:4px 4px 4px 4px; border-color:rgb(131, 155, 136); border-radius:60px 60px 60px 60px; } /*FIN-PAGE-REPORTAGE*/ /*JABMRNVP*/ /*KAIA-KIIK*/ .elementor-813 .elementor-element.elementor-element-e51ad2b { background-color: blue; } .elementor-element-d0bf201 img{ transition: transform 0.3s ease; /* Ajout d'une transition pour un effet plus doux */ } .elementor-element-d0bf201 img.animate-on-scroll { animation: imgAnimation 14s linear infinite;/*durée de la rotation en secondes*/ } @keyframes imgAnimation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /*JABMRNVP*/ /*BIG-FACE-RACHEL*/ .elementor-813 .elementor-element.elementor-element-1be0757 img.wp-image-809{ transition: transform 0.3s ease; /* Ajout d'une transition pour un effet plus doux */ } .elementor-813 .elementor-element.elementor-element-1be0757 img.wp-image-809.animate-on-scroll { animation: imgAnimation 5s linear infinite; } @keyframes imgAnimation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /*LES CHIENS EN HOVER*/ .elementor-813 .elementor-element.elementor-element-92beb71:hover, .elementor-813 .elementor-element.elementor-element-5e0ec86.e-con:hover, .elementor-813 .elementor-element.elementor-element-cbbf1e0:hover{ background-position-y:-316px; } /*JABMRNVP*/ /*PETIT-CHIEN*/ .elementor-813 .elementor-element.elementor-element-5e0ec86.e-con { float:left; background-image: url('https://2r-family.com/wp-content/uploads/2025/03/sprite-petit-chien.png'); width: 316px; height: 316px; background-repeat: no-repeat; margin-right: 3px; } .elementor-813 .elementor-element.elementor-element-92beb71 { float:left; background-image: url('https://2r-family.com.com/wp-content/uploads/2025/03/sprite-moyen-chien.png'); width: 316px; height: 316px; background-repeat: no-repeat; margin-right: 3px; } .elementor-813 .elementor-element.elementor-element-cbbf1e0{ float:left; background-image: url('https://2r-family.com/wp-content/uploads/2025/03/sprite-grand-chien.png'); width: 316px; height: 316px; background-repeat: no-repeat; margin-right: 3px; } /*JABMRNVP*/ /*Défilement-texte*/ .elementor-813 .elementor-element.elementor-element-5aa6e0c { overflow: hidden; width: 100%; } .elementor-813 .elementor-element.elementor-element-5aa6e0c .elementor-heading-title { display: inline-block; padding-left: 100%; animation: scroll-left 10s linear infinite; white-space: nowrap; } @keyframes scroll-left { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } } :/*SLIDER 3D RACHEL*/ @import url('https://fonts.cdnfonts.com/css/ica-rubrik-black'); @import url('https://fonts.cdnfonts.com/css/poppins'); .banner{ width: 100%; height: 100vh; text-align: center; overflow: hidden; position: relative; } .banner .slider{ position: absolute; width: 200px; height: 250px; top: -40%; left: calc(50% - 100px); transform-style: preserve-3d; transform: perspective(1000px); animation: autoRun 20s linear infinite; z-index: 2; } @keyframes autoRun{ from{ transform: perspective(1000px) rotateX(-16deg) rotateY(0deg); }to{ transform: perspective(1000px) rotateX(-16deg) rotateY(360deg); } } .banner .slider .item{ position: absolute; inset: 0 0 0 0; transform: rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg)) translateZ(550px); } .banner .slider .item img{ width: 100%; height: auto; } .banner .content{ position: absolute; top: 0px; left: 50%; transform: translateX(-50%); width: min(1400px, 100vw); height: max-content; padding-bottom: 100px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; z-index: 1; } .banner .content h3{ font-family: 'ICA Rubrik'; font-size: 200px; line-height: 1em; color: #25283B; position: relative; text-align: center; } .banner .content h3::after{ position: absolute; inset: 0 0 0 0; content: attr(data-content); z-index: 2; -webkit-text-stroke: 2px #d2d2d2; -moz-text-stroke: 2px #d2d2d2; color: transparent; } .banner .content .author{ text-align: right; max-width: 200px; } .banner .content h2{ font-size: 3em; } .banner .content .model{ background-image: url(https://2r-family.com/wp-content/uploads/2025/06/eglise.jpg); width: 100%; height: 75vh; position: absolute; bottom: 0; left: 0; background-size: 15%; background-repeat: no-repeat; background-position: top center; z-index: 1; } @media screen and (max-width: 1023px) { .banner .slider{ width: 160px; height: 200px; left: calc(50% - 80px); } .banner .slider .item{ transform: rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg)) translateZ(300px); } .banner .content h3{ text-align: center; width: 100%; text-shadow: 0 10px 20px #000; font-size: 7em; } .banner .content .author{ color: #fff; padding: 20px; text-shadow: 0 10px 20px #000; z-index: 2; max-width: unset; width: 100%; text-align: center; padding: 0 30px; } } @media screen and (max-width: 767px) { .banner .slider{ width: 100px; height: 150px; left: calc(50% - 50px); } .banner .slider .item{ transform: rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg)) translateZ(180px); } .banner .content h3{ font-size: 5em; } } /*JABMRNVP*/ /*FIN-Défilement-texte*/