/* ========================================================================== SYNCXELL — correctif de mise en page (ordinateurs portables et petits écrans) Chargé en dernier. Fichier neuf : le CSS est mis en cache 30 jours (.htaccess) et les URL ne sont pas versionnées, donc un nouveau fichier s'applique tout de suite, y compris pour les visiteurs déjà venus. Cause principale : le guide v4 a changé les balises de titres (h4 → h3,

→

) pour l'accessibilité. Les sélecteurs du thème ne s'appliquent plus et ces titres héritent de la taille de base h3 (32/42 px). ========================================================================== */ /* ── 1. Marges latérales : le contenu ne touche plus le bord de l'écran ───── */ @media (min-width: 992px) and (max-width: 1439px) { .prt-row > .container, .prt-page-title-row .container, .site-main .container { padding-left: 40px; padding-right: 40px; } #site-header-menu .container-fluid, .top_bar.prt-topbar-wrapper .container-fluid { padding-left: 40px !important; padding-right: 40px !important; } .home-page .hero-section .hero-slide > .container { padding-left: 40px; padding-right: 40px; } footer.widget-footer .container-fluid { padding-left: 40px; padding-right: 40px; } } @media (min-width: 1440px) and (max-width: 1699px) { footer.widget-footer .container-fluid { padding-left: 60px; padding-right: 60px; } } /* ── 2. Menu : un panneau ouvert ne recouvre plus les autres entrées ──────── */ @media (min-width: 1200px) { /* Le thème ne fixe « top » qu'au survol : à la sortie, le panneau remontait par-dessus la barre, gardait le survol et restait ouvert. */ nav.main-menu ul.menu li.mega-menu-item > ul.mega-submenu, nav.main-menu ul.menu li.mega-menu-item:hover > ul.mega-submenu, nav.main-menu ul.menu li.mega-menu-item.sx-open > ul.mega-submenu { top: 100%; margin-top: 0; } nav.main-menu ul.menu li.mega-menu-item > ul.mega-submenu { pointer-events: none; } nav.main-menu ul.menu li.mega-menu-item:hover > ul.mega-submenu, nav.main-menu ul.menu li.mega-menu-item.sx-open > ul.mega-submenu { pointer-events: auto; } /* Survoler une autre entrée masque un panneau ouvert au clic. */ nav.main-menu ul.menu:hover > li.sx-open:not(:hover) > ul.mega-submenu { visibility: hidden; opacity: 0; pointer-events: none; } /* Le panneau reste dans l'écran sur les petits portables. */ nav.main-menu ul.menu li ul.mega-submenu.sx-mega-2col { max-width: calc(100vw - 340px); } } /* ── 3. Footer ───────────────────────────────────────────────────────────── */ /* Le thème met chaque lien à 50 % : combiné aux 2 colonnes CSS, cela donnait 4 colonnes étroites et des mots qui se chevauchent. */ .widget-area .widget_nav_menu .menu-footer-link.style1.sx-footer-2col li, ul.menu-footer-link.sx-footer-2col li { display: block; width: auto; margin-bottom: 10px; line-height: 1.4; break-inside: avoid; } ul.sx-footer-2col { column-gap: 24px; } .section-footer .footer-widget-box, .section-footer .widget-area { min-width: 0; } .footer-logo img { margin-left: 0; } .sx-footer-tagline { margin-left: 0 !important; } .footer .social-icons { margin-left: 0; } @media (min-width: 1200px) and (max-width: 1699px) { .section-footer .row > .widget-area:nth-child(1) { flex: 0 0 23%; max-width: 23%; } .section-footer .row > .widget-area:nth-child(2) { flex: 0 0 37%; max-width: 37%; } .section-footer .row > .widget-area:nth-child(3) { flex: 0 0 17%; max-width: 17%; } .section-footer .row > .widget-area:nth-child(4) { flex: 0 0 23%; max-width: 23%; } } @media (min-width: 992px) and (max-width: 1199px) { .section-footer .row { row-gap: 32px; } .section-footer .row > .widget-area:nth-child(1) { flex: 0 0 32%; max-width: 32%; } .section-footer .row > .widget-area:nth-child(2) { flex: 0 0 68%; max-width: 68%; } .section-footer .row > .widget-area:nth-child(3) { flex: 0 0 50%; max-width: 50%; } .section-footer .row > .widget-area:nth-child(4) { flex: 0 0 50%; max-width: 50%; } } /* Coordonnées : icône à gauche, texte aligné, e-mail sur une ligne */ .footer .prt-about-footer p { display: flex; align-items: flex-start; gap: 10px; } .footer .prt-about-footer p .footer-contact-icon { flex: 0 0 auto; margin: 4px 0 0; top: 0; } .footer .prt-about-footer p a { overflow-wrap: anywhere; } .footer-contactbox { padding-left: 24px; padding-right: 24px; } /* Newsletter : mention sous le champ, pas à côté */ .widget-form .newsletter-form { display: flow-root; } .widget-form .mailchimp-inputbox { width: 100%; float: none; } .widget-form .sx-newsletter-consent { clear: both; margin-top: 10px; } .widget-footer-form-block .widget-pre-title h2 { line-height: 1.3; } @media (min-width: 992px) and (max-width: 1199px) { .widget-footer-form-block { padding: 36px 32px; } .sx-newsletter-sub { font-size: 19px; } } /* Barre du bas */ .bottom-footer .copyright { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; } .bottom-footer .cpy-text { flex: 1 1 340px; min-width: 0; } .bottom-footer .cpy-text { text-align: left; } .bottom-footer .cpy-text p { width: auto; } .bottom-footer .footer-nav-menu { flex: 0 1 auto; margin: 0; } .sx-footer-ids a { overflow-wrap: anywhere; } /* ── 4. Titres : tailles rétablies là où le thème ne s'applique plus ──────── */ .title-box .page-title-heading h1 { font-size: clamp(34px, 4.3vw, 60px); line-height: 1.16; } .sx-why-tile h3, .sx-about-card h2, .sx-about-card h3, .sx-svc-card-title, .sx-svc .sx-svc-h2, .sx-svc .sx-svc-subhead, .sx-pe-card h3, .sx-pe-page .sx-pe-h2, .sx-pe-page .sx-pe-h3, .sx-pe-steps h3, .sx-pe-contact h2, .sx-ent-block h2, .sx-pp-project-title, .sx-pp-subtitle, .sx-pp-contracts h2, .sx-cs-card-title, .sx-rfq-h2, .sx-quote-area h3, .sx-blog-bottom-title, .sx-blog-body h2, .sx-blog-body h3, .sx-gh-codes h3, .sx-gh-panel-title, .sx-faq-title, .sx-company-facts h2, .sx-more-services-title, .legal-page .site-main h2, .sx-contact-subheading, .sx-tech-card .featured-title h3, .sx-service-card .service-title h3 { line-height: 1.35; } .sx-why-tile h3 { font-weight: 600; } /* Blocs titres + texte sur fond sombre (Partenaire, About…) */ .prt-featured-content .prt-featured-title h3 { font-size: 18px; line-height: 1.35; margin: 0; } /* ── 5. Cartes « étude de cas » (accueil) ────────────────────────────────── */ .prt-featured-postbox.style1 .prt-featured-overly { padding: 22px 22px; margin: -44px 16px 0; align-items: flex-start; gap: 12px; } .prt-featured-postbox.style1 .prt-featured-content-box { flex: 1 1 auto; min-width: 0; } .prt-featured-postbox.style1 .prt-featured-overly .prt-featured-title h3 { margin: 0; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.35; font-weight: 500; color: var(--base-headingfont-color); } .prt-featured-postbox.style1 .prt-featured-overly .prt-featured-title h3 a { color: inherit; } .prt-featured-postbox.style1 .prt-featured-overly .prt-featured-title h3 a:hover { color: var(--base-skin); } .prt-featured-postbox.style1 .prt-featured-readmore-btn { flex: 0 0 auto; } .prt-featured-postbox.style1 .prt-featured-readmore-btn a { width: 44px; height: 44px; line-height: 52px; } .prt-featured-postbox.style1 .prt-featured-readmore-btn a i { font-size: 24px; } /* Le résultat de la mission était écrit en blanc sur la carte blanche. */ .prt-featured-postbox.style1 .sx-cs-result { color: var(--base-bodyfont-color); font-size: 14px; line-height: 1.5; margin: 8px 0 0; } /* Images : plus de recadrage qui coupe les schémas (hauteur fixe 280/220 px) */ .prt-featured-postbox .featured-thumbnail img, .featured-imagebox-post:not(.style4) .featured-thumbnail img { height: auto !important; aspect-ratio: 1200 / 630; object-fit: cover !important; } /* Cartes d'un même carrousel à la même hauteur */ .portfolio-section .slick-track, .blog-section .slick-track { display: flex; } .portfolio-section .slick-slide, .blog-section .slick-slide { height: auto; } .portfolio-section .slick-slide > div, .blog-section .slick-slide > div, .portfolio-section .prt-box-col-wrapper, .blog-section .prt-box-col-wrapper { height: 100%; } .prt-featured-postbox.style1, .prt-featured-postbox.style1 .prt-featured-post-item { height: 100%; display: flex; flex-direction: column; } .prt-featured-postbox.style1 .prt-featured-overly { flex: 1 1 auto; } .blog-section .slick-slide .featured-imagebox-post { height: calc(100% - 15px); } /* ── 6. Grilles de cartes : même hauteur sur une rangée ──────────────────── */ .row > [class*="col-"]:has(> .sx-service-card) { display: flex; } .sx-service-card { display: flex !important; align-items: stretch; flex: 1 1 auto; width: 100%; min-height: 0; } .sx-service-card .service-iconbox-inner { display: flex !important; flex-direction: column; flex: 1 1 auto; width: 100%; } .sx-service-card .service-content-box { display: flex !important; flex-direction: column; flex: 1 1 auto; } .sx-service-card .prt-bottom-buttonbox { margin-top: auto !important; } .row > [class*="col-"]:has(> .prt-fid.style3) { display: flex; } .prt-fid.style3 { flex: 1 1 auto; width: 100%; } .row:has(> .prt-stepbox) { align-items: stretch; } .prt-stepbox > .prt-stepbox-style2 { height: 100%; } .prt-stepbox-style2 .prt-stepbox-content { height: 100%; } .sx-why-tile { height: calc(100% - 24px); } /* Image d'accueil « About » centrée sur la hauteur du texte */ .row > [class*="col-"]:has(.sx-home-about-img) { align-self: center; } /* ── 7. Boutons : le texte ne casse plus la forme du bouton ──────────────── */ a.prt-btn, button.prt-btn { display: inline-block; } @media (min-width: 576px) { a.prt-btn, button.prt-btn { white-space: nowrap; } } .sx-cta-buttons .prt-btn, .prt-btn-waprre .prt-btn { text-align: center; } /* ── 8. Écrans 992–1199 px : bloc en menu burger, contenu resserré ───────── */ @media (min-width: 992px) and (max-width: 1199px) { .home-page .hero-section .section-title .sx-hero-tagline { font-size: clamp(1.9rem, 3.6vw, 42px); } .prt-fid.style3 .prt-fid-contents .sx-stat-value span { font-size: 42px; line-height: 48px; } .prt-fid.style3 .prt-fid-contents .sx-stat-label { font-size: 15px; line-height: 22px; } } /* ── 9. Filtres et onglets : le thème met tout