/* ============ Comportement double nav SFEL ============ * Effet « transformation » : les deux navs occupent le haut de l'écran et se * fondent l'une dans l'autre au scroll (crossfade + léger drift), comme si la * barre transparente devenait la barre blanche. * .nav1 : transparente, dans le flux — s'estompe dès que l'on scrolle (>10px). * .nav2 : blanche, figée en haut — invisible au repos, se matérialise sur place. * Classe sfel-scrolled posée sur par sfel-header.js. * Règles neutralisées dans l'éditeur Elementor pour pouvoir éditer les navs. */ body:not(.elementor-editor-active) .nav1 { position: relative; z-index: 90; transition: opacity .45s ease, transform .45s ease; } body:not(.elementor-editor-active).sfel-scrolled .nav1 { opacity: 0; transform: translateY(-8px); pointer-events: none; } body:not(.elementor-editor-active) .nav2 { position: fixed !important; top: 0; left: 0; right: 0; width: 100%; z-index: 999; opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity .45s ease, transform .45s ease, box-shadow .45s ease; } body:not(.elementor-editor-active).sfel-scrolled .nav2 { opacity: 1; transform: translateY(0); pointer-events: auto; box-shadow: 0 2px 18px rgba(0, 0, 0, .10); } /* Compenser la barre admin WP connecté */ body.admin-bar:not(.elementor-editor-active) .nav2 { top: 32px; } @media (max-width: 782px) { body.admin-bar:not(.elementor-editor-active) .nav2 { top: 46px; } } /* ============ Pagination des archives (WP natif + Elementor : .page-numbers) ============ */ .navigation.pagination,.elementor-pagination{border-top:1px solid #E7E7EB;padding-top:26px;margin-top:44px} .navigation.pagination .nav-links,.elementor-pagination{display:flex;align-items:center;justify-content:center;gap:26px;font-family:'Inter',sans-serif;font-size:16px} .navigation.pagination{width:100%} .navigation.pagination h2.screen-reader-text{position:absolute;clip:rect(0,0,0,0)} a.page-numbers,span.page-numbers{color:#44546A;text-decoration:none;line-height:1;padding:6px 2px;transition:color .15s} a.page-numbers:hover{color:#194B9B} span.page-numbers.current{color:#194B9B;font-weight:600} span.page-numbers.dots{color:#44546A} .navigation.pagination .page-numbers.prev,.elementor-pagination .page-numbers.prev{margin-right:auto !important} .navigation.pagination .page-numbers.next,.elementor-pagination .page-numbers.next{margin-left:auto !important} .page-numbers.prev::before{content:"\f060";font-family:"Font Awesome 5 Free";font-weight:900;font-size:.85em;margin-right:10px} .page-numbers.next::after{content:"\f061";font-family:"Font Awesome 5 Free";font-weight:900;font-size:.85em;margin-left:10px} @media(max-width:600px){.navigation.pagination .nav-links,.elementor-pagination{gap:14px;font-size:15px}} /* ============ Hover des boutons (.primary-btn / .secondary-btn / .tertiary-btn) ============ * La flèche ↗ sort de la pastille par le haut-droite et revient par le bas-gauche. * Tout se passe dans la pastille (overflow hidden) — les couleurs restent gérées * par les réglages hover de chaque bouton dans Elementor. */ .primary-btn .elementor-button-icon, .secondary-btn .elementor-button-icon, .tertiary-btn .elementor-button-icon{overflow:hidden;border-radius:50%} .primary-btn .elementor-button-icon svg, .secondary-btn .elementor-button-icon svg, .tertiary-btn .elementor-button-icon svg{display:block} @keyframes sfel-btn-arrow{ 0%{transform:translate(0,0);opacity:1} 45%{transform:translate(220%,-220%);opacity:0} 50%{transform:translate(-220%,220%);opacity:0} 100%{transform:translate(0,0);opacity:1} } .primary-btn .elementor-button:hover .elementor-button-icon svg, .secondary-btn .elementor-button:hover .elementor-button-icon svg, .tertiary-btn .elementor-button:hover .elementor-button-icon svg{ animation:sfel-btn-arrow .5s cubic-bezier(.22,.61,.36,1) } @media (prefers-reduced-motion:reduce){ .primary-btn .elementor-button:hover .elementor-button-icon svg, .secondary-btn .elementor-button:hover .elementor-button-icon svg, .tertiary-btn .elementor-button:hover .elementor-button-icon svg{animation:none} } /* Slider de logos de la home : défilement continu façon marquee (autoplay delay 0 + transition 5000ms + timing linéaire) */ .elementor-element-ec04801 .swiper-wrapper{transition-timing-function:linear !important} /* sfel-marquee : même effet réutilisable sur n'importe quel carrousel via sa classe CSS */ .sfel-marquee .swiper-wrapper{transition-timing-function:linear !important} /* Accessibilité : lien Palmsquare du footer identifiable */ [data-elementor-id="52"] a[href*="palmsquare"]{text-decoration:underline !important;color:#fff !important} /* ============ Soulignement animé (boutons .outline + liens du footer) ============ * La barre utilise currentColor : elle suit automatiquement la couleur du texte * (blanche sur fond sombre, #00060F sur fond clair). */ @keyframes sfel-bar{ 0%{transform:scaleX(1);transform-origin:right} 45%{transform:scaleX(0);transform-origin:right} 46%{transform:scaleX(0);transform-origin:left} 100%{transform:scaleX(1);transform-origin:left} } /* Boutons outline : la barre existe au repos → elle s'efface vers la droite puis revient de la gauche */ .outline a.elementor-button{position:relative;border-bottom-color:transparent !important} .outline a.elementor-button::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px; background:currentColor;transform:scaleX(1);transform-origin:right;pointer-events:none} .outline a.elementor-button:hover::after{animation:sfel-bar .45s cubic-bezier(.22,.61,.36,1)} /* Liens du footer : le est un conteneur flex pleine largeur → la barre se pose * sur le SPAN du texte pour épouser sa largeur (mécanique différente des boutons * .outline, où la barre remplace une vraie bordure sur l'élément). */ [data-elementor-id="52"] .elementor-icon-list-item a, [data-elementor-id="52"] .elementor-icon-list-item a:hover{text-decoration:none !important} [data-elementor-id="52"] .elementor-icon-list-item a .elementor-icon-list-text{position:relative;display:inline-block} [data-elementor-id="52"] .elementor-icon-list-item a .elementor-icon-list-text::after{ content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px; background:currentColor;transform:scaleX(0);transform-origin:right;pointer-events:none; transition:transform .3s cubic-bezier(.22,.61,.36,1)} [data-elementor-id="52"] .elementor-icon-list-item a:hover .elementor-icon-list-text::after{transform:scaleX(1);transform-origin:left} @media (prefers-reduced-motion:reduce){ .outline a.elementor-button:hover::after{animation:none} [data-elementor-id="52"] .elementor-icon-list-item a .elementor-icon-list-text::after{transition:none} } /* ============ Cards produit : texte bleu au survol ============ * Cible le modèle de boucle « Card produit » (.elementor-301) : couvre le catalogue * filtrable ET tous les autres emplacements (produits liés, carrousels, loop grids). * .sfel-item est ajouté en sécurité pour le wrapper cliquable du catalogue. */ .elementor-301 .elementor-widget-theme-post-title, .elementor-301 .elementor-widget-theme-post-title *, .elementor-301 .elementor-widget-post-info, .elementor-301 .elementor-widget-post-info *{transition:color .2s ease} .elementor-301:hover .elementor-widget-theme-post-title, .elementor-301:hover .elementor-widget-theme-post-title *, .elementor-301:hover .elementor-widget-post-info, .elementor-301:hover .elementor-widget-post-info *, .sfel-item:hover .elementor-widget-theme-post-title, .sfel-item:hover .elementor-widget-theme-post-title *, .sfel-item:hover .elementor-widget-post-info, .sfel-item:hover .elementor-widget-post-info *{color:#194B9B !important} /* ============ Soulignement du menu principal (remplace le pointeur « fondu » d'Elementor) ============ * Elementor pose une barre pleine largeur de l'item (donc plus large que le mot) qui apparaît en fondu. * On la ramène à la largeur du contenu, on la remonte sous le texte et on la fait se dessiner * depuis la gauche — même langage que les liens du footer. Vaut aussi pour la page courante. */ .elementor-nav-menu--main .elementor-item::after{ left:10px !important;right:10px !important;bottom:8px !important; height:1px !important;width:auto !important; opacity:1 !important; transform:scaleX(0);transform-origin:right; transition:transform .3s cubic-bezier(.22,.61,.36,1) !important} .elementor-nav-menu--main .elementor-item:hover::after, .elementor-nav-menu--main .elementor-item:focus::after, .elementor-nav-menu--main .elementor-item.elementor-item-active::after, .elementor-nav-menu--main .elementor-item.highlighted::after{transform:scaleX(1);transform-origin:left} /* la barre du haut (pointeur « double ligne ») reste neutralisée */ .elementor-nav-menu--main .elementor-item::before{display:none !important} @media (prefers-reduced-motion:reduce){.elementor-nav-menu--main .elementor-item::after{transition:none !important}} /* ============ Éléments à bascule (accordéons, FAQ, onglets) : aucune animation d'apparition ============ * Le contenu est masqué tant que l'élément est fermé : l'observateur de scroll ne se déclenche * jamais dessus, le contenu resterait invisible ou apparaîtrait en retard à l'ouverture. */ .elementor-accordion .sfel-reveal, .elementor-toggle .sfel-reveal, .elementor-tab-content .sfel-reveal, .e-n-accordion .sfel-reveal, .e-n-accordion-item .sfel-reveal, .sfel-acc .sfel-reveal, details .sfel-reveal{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important} /* ============ Recherche : message quand rien ne correspond ============ * Rendu dans la div « rien trouvé » du loop grid (voir sfel-recherche.php). * Le soulignement des liens reprend l'animation sfel-bar des boutons .outline. */ .sfel-search-vide{grid-column:1/-1;text-align:center;padding:72px 20px 80px;font-family:'Inter',sans-serif} .sfel-search-vide .t{font-family:circular,'Circular Std','Inter',sans-serif;font-weight:500;font-size:26px;line-height:1.25;color:#00060F;margin:0 0 14px;overflow-wrap:anywhere} .sfel-search-vide .t em{font-style:normal;color:#194B9B} .sfel-search-vide .d{font-size:16px;line-height:1.6;color:#10131E;max-width:520px;margin:0 auto 32px} .sfel-search-vide .a{display:flex;flex-wrap:wrap;gap:16px 36px;justify-content:center} .sfel-search-vide .a a{position:relative;font-size:16px;line-height:1.4;color:#194B9B;text-decoration:none} .sfel-search-vide .a a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(1);transform-origin:right;pointer-events:none} .sfel-search-vide .a a:hover::after{animation:sfel-bar .45s cubic-bezier(.22,.61,.36,1)} @media (max-width:767px){ .sfel-search-vide{padding:48px 16px 56px} .sfel-search-vide .t{font-size:22px} .sfel-search-vide .a{flex-direction:column;align-items:center;gap:18px} }