/** * replica-tweaks.css * * Surcharges locales appliqu�es PAR-DESSUS les feuilles WordPress/Elementor. * Charg� en dernier dans le pour avoir la plus haute priorit�. * * Table des mati�res : * 1. Variables CSS ? kit Elementor (Montserrat partout) * 2. Reset layout ? marges / padding z�ro, structure flex du wrapper * 3. Accueil ? alignement hero + menu sans espace parasite * 4. Typographie ? Montserrat universel, exclusion ic�nes FA / eicons * 5. Ic�nes FA 5 ? restauration police correcte (Free + Brands) * 6. Barre progress ? position fixe, z-index * 7. Performance ? content-visibility, images, font-display * 8. Accessibilit� ? skip-nav, sr-only, focus-visible */ /* ??????????????????????????????????????????????????????????????????? * 1. VARIABLES CSS ? kit Elementor * Les feuilles post-8.css et post-9601.css de petitpelican.fr * �crasent ces variables avec Roboto/Cabin ; on les r�-�crit ici. * ??????????????????????????????????????????????????????????????????? */ :root { --e-global-color-primary: #28419a; --e-global-color-secondary: #edf0f6; --e-global-color-text: #dfaa2c; --e-global-color-accent: #f6f5f0; --e-global-color-2bf3379: #040405; --e-global-typography-primary-font-family: "Montserrat", sans-serif; --e-global-typography-secondary-font-family: "Montserrat", sans-serif; --e-global-typography-text-font-family: "Montserrat", sans-serif; --e-global-typography-accent-font-family: "Montserrat", sans-serif; --e-global-typography-primary-font-weight: 600; --e-global-typography-text-font-weight: 400; } /* M�me r�-�criture sur le s�lecteur Elementor Kit (plus haute sp�cificit�) */ body#neve_body.elementor-kit-8 { --e-global-typography-primary-font-family: "Montserrat", sans-serif; --e-global-typography-secondary-font-family: "Montserrat", sans-serif; --e-global-typography-text-font-family: "Montserrat", sans-serif; --e-global-typography-accent-font-family: "Montserrat", sans-serif; } /* ??????????????????????????????????????????????????????????????????? * 2. RESET LAYOUT ? marges / padding, structure flex * ??????????????????????????????????????????????????????????????????? */ html { margin: 0 !important; padding: 0 !important; scroll-padding-top: 0; background-color: #f6f5f0; height: 100%; } body#neve_body { margin: 0 !important; padding: 0 0 6px 0 !important; min-height: 100vh; min-height: 100svh; min-height: 100dvh; box-sizing: border-box; height: 100%; font-family: "Montserrat", var(--nv-fallback-ff, Helvetica, Arial, sans-serif); /* Ligne de 6 px noire en bas de page ? signature graphique du site */ background: linear-gradient( to bottom, #ffffff 0, #ffffff calc(100% - 6px), #040405 calc(100% - 6px) ) !important; } /* Wrapper flex : pousse le footer vers le bas (sticky footer) */ .wrapper { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; min-height: 100dvh; gap: 0; margin: 0; padding: 0; } /* Le contenu principal prend tout l'espace disponible */ main#content.neve-main, .neve-main { flex: 1 0 auto; padding-top: 0 !important; margin-top: 0 !important; margin-bottom: 0; display: block; } .page .neve-main, .home .neve-main { padding-left: 0; padding-right: 0; } header.header, #header-grid.hfg_header { margin-bottom: 0; } #mysticky-nav { margin-top: 0; margin-bottom: 0; } /* Pas de marge blanche sous le dernier bloc Elementor (fond noir) */ body#neve_body .elementor-page .neve-main .elementor > .elementor-top-section:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* ??????????????????????????????????????????????????????????????????? * 3. ACCUEIL ? alignement hero + menu (page-d'accueil sp�cifique) * ??????????????????????????????????????????????????????????????????? */ body.home#neve_body .wrapper { margin: 0 !important; padding: 0 !important; } body.home#neve_body .wrapper > *:first-child, body.home#neve_body header.header, body.home#neve_body #mysticky-nav, body.home#neve_body main#content.neve-main { margin-top: 0 !important; padding-top: 0 !important; } body.home#neve_body .neve-main > .elementor.elementor-9601, body.home#neve_body .elementor-9601 > .elementor-top-section:first-child, body.home#neve_body .elementor-9601 > .elementor-top-section:first-child > .elementor-container { margin: 0 !important; padding-top: 0 !important; padding-block-start: 0 !important; } body.home#neve_body .elementor-9601 .elementor-element-98963c2 > .elementor-element-populated, body.home#neve_body .elementor-9601 .elementor-element-6939df8 > .elementor-element-populated { padding-top: 0 !important; padding-block-start: 0 !important; } /* Sections hero desktop + mobile */ body.home#neve_body .elementor-9601 .elementor-element-86ed15a, body.home#neve_body .elementor-9601 .elementor-element-4152f17 { padding: 0 !important; margin: 0 !important; } body.home#neve_body .header--row.header-main .header--row-inner, body.home#neve_body .header--row.header-main .container { margin-top: 0 !important; padding-top: 0 !important; } /* Coller le contenu Elementor sous le menu (toutes pages) */ body#neve_body .neve-main > .elementor:first-of-type, body#neve_body .neve-main > .elementor:first-of-type > .elementor-top-section:first-child { margin-top: 0 !important; padding-top: 0 !important; } .elementor.elementor-9601 > .elementor-top-section.elementor-element-86ed15a { margin-top: 0 !important; padding: 0 !important; } .elementor.elementor-9601 > .elementor-top-section.elementor-element-86ed15a > .elementor-container { padding-top: 0 !important; max-width: none; } .elementor-9601 .elementor-element-98963c2 > .elementor-element-populated { padding-top: 0 !important; } /* �vite le micro-espace sous les images hero (baseline inline) */ .elementor-9601 .elementor-element-86ed15a .elementor-widget-image img, .elementor-9601 .elementor-element-4152f17 .elementor-widget-image img { display: block; vertical-align: bottom; max-width: 100%; height: auto; } /* ??????????????????????????????????????????????????????????????????? * 4. TYPOGRAPHIE ? Montserrat universel * * Cible tous les conteneurs de texte Elementor + balises s�mantiques. * Les ic�nes (FA / eicons) sont explicitement exclues. * Les poids sont d�finis par les feuilles post-XXXX.css d'Elementor ? * on ne les surcharge PAS ici. * ??????????????????????????????????????????????????????????????????? */ body#neve_body .neve-main p, body#neve_body .neve-main h1, body#neve_body .neve-main h2, body#neve_body .neve-main h3, body#neve_body .neve-main h4, body#neve_body .neve-main h5, body#neve_body .neve-main h6, body#neve_body .neve-main li, body#neve_body .neve-main a, body#neve_body .neve-main span:not([class*="fa-"]):not([class*="eicon-"]):not(.fa), body#neve_body .entry-content p, body#neve_body .entry-content li, body#neve_body .elementor-widget-text-editor, body#neve_body .elementor-widget-text-editor p, body#neve_body .elementor-widget-heading .elementor-heading-title, body#neve_body .elementor-widget-counter .elementor-counter-number, body#neve_body .elementor-widget-counter .elementor-counter-title, body#neve_body .elementor .elementor-button, body#neve_body .elementor a.elementor-button, body#neve_body .elementor-widget-icon-list .elementor-icon-list-text, body#neve_body .elementor-widget-image-box .elementor-image-box-title, body#neve_body .elementor-widget-image-box .elementor-image-box-description p, body#neve_body .elementor-widget-icon-box .elementor-icon-box-title, body#neve_body .elementor-widget-icon-box .elementor-icon-box-description p { font-family: "Montserrat", sans-serif !important; } /* ??????????????????????????????????????????????????????????????????? * 5. IC�NES FONT AWESOME 5 * * Noms valides FA5 Free : * "Font Awesome 5 Free" ? solid (weight 900) + regular (weight 400) * "Font Awesome 5 Brands" ? brands (weight 400) * ??????????????????????????????????????????????????????????????????? */ body#neve_body .neve-main i.fas, body#neve_body .neve-main i.far, body#neve_body .neve-main i[class*="fa-"] { font-family: "Font Awesome 5 Free" !important; } body#neve_body .neve-main i.fas { font-weight: 900 !important; } body#neve_body .neve-main i.far { font-weight: 400 !important; } body#neve_body .neve-main i.fab, body#neve_body .neve-main i[class*="fa-"][class*="brand"] { font-family: "Font Awesome 5 Brands" !important; font-weight: 400 !important; } /* ??????????????????????????????????????????????????????????????????? * 6. BARRE DE PROGRESSION (Catch Scroll Progress Bar) * ??????????????????????????????????????????????????????????????????? */ progress.catchProgressbar { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important; z-index: 99989 !important; margin: 0 !important; height: 6px !important; } /* ??????????????????????????????????????????????????????????????????? * 7. PERFORMANCE * ??????????????????????????????????????????????????????????????????? */ /* * content-visibility: auto * Saute le rendu des sections hors-�cran ? main thread lib�r� ? ? INP. * contain-intrinsic-size r�serve une hauteur pour �viter le saut de scroll. */ body#neve_body .elementor-top-section:not(:first-child) { content-visibility: auto; contain-intrinsic-size: 0 600px; } /* * �vite le layout shift (CLS) : si width/height sont pr�sents dans le HTML, * le navigateur r�serve l'espace avant que l'image soit charg�e. */ body#neve_body img[width][height] { height: auto; } /* * Placeholder gris sur les images lazy ? �vite le "flash blanc" * pendant le chargement (meilleur CLS per�u). */ body#neve_body img[loading="lazy"] { background-color: #f0f0f0; } /* ??????????????????????????????????????????????????????????????????? * 8. ACCESSIBILIT� ? navigation clavier * ??????????????????????????????????????????????????????????????????? */ /* * Lien d'�vitement (skip navigation) * Visuellement cach� hors focus ; appara�t quand l'utilisateur clavier * appuie sur Tab d�s l'arriv�e sur la page. */ .skip-nav { position: absolute; top: -200px; left: 50%; transform: translateX(-50%); z-index: 100000; padding: 12px 28px; background: var(--e-global-color-primary, #28419a); color: #fff; font-family: "Montserrat", sans-serif; font-size: 15px; font-weight: 600; text-decoration: none; border-radius: 0 0 6px 6px; white-space: nowrap; transition: top 0.15s ease; } .skip-nav:focus, .skip-nav:focus-visible { top: 0; outline: 3px solid #fff; outline-offset: 2px; } /* * Classe utilitaire sr-only * Accessible aux technologies d'assistance, invisible visuellement. * Conforme WCAG 2.1 technique C7. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* * Focus visible ? WCAG 2.4.7 / 2.4.11 * Remplace l'outline par d�faut (souvent invisible) par un contour * contrast� utilisant la couleur primaire du kit Elementor. * :focus-visible �vite l'affichage du focus au clic souris. */ body#neve_body a:focus-visible, body#neve_body button:focus-visible, body#neve_body [role="button"]:focus-visible, body#neve_body input:focus-visible, body#neve_body select:focus-visible, body#neve_body textarea:focus-visible, body#neve_body [tabindex]:focus-visible { outline: 3px solid var(--e-global-color-primary, #28419a); outline-offset: 3px; border-radius: 2px; } /* Boutons et liens Elementor */ body#neve_body .elementor-button:focus-visible, body#neve_body .elementor-widget a:focus-visible { outline: 3px solid var(--e-global-color-primary, #28419a); outline-offset: 4px; } /* Items de menu */ body#neve_body .nav-menu-item a:focus-visible, body#neve_body #mega-menu-wrap a:focus-visible { outline: 2px solid var(--e-global-color-primary, #28419a); outline-offset: 2px; border-radius: 2px; } /* Champ de recherche Neve */ body#neve_body .nv-search-form-wrap input:focus-visible { outline: 2px solid var(--e-global-color-primary, #28419a); outline-offset: 0; }