/* =========================================================================== Symbio3D — thème public. Direction : charte historique du site WordPress (relevée le 21/07/2026 sur www.symbio3d.com). Vert #60B339 sur alternance de fonds clairs et sombres, Montserrat pour les titres, titres verts en graisse moyenne. La direction précédente (« atelier technique », signature de strates) a été remplacée sur décision de Florian — motif esthétique. Voir docs/superpowers/specs/2026-07-21-theme-public-charte-historique-design.md ======================================================================== */ :root { /* Variables globales du kit Elementor de l'ancien site. Le kit les definissait sur le selecteur `.elementor-kit-12406` — classe que notre ne porte pas — et uniquement dans legacy-pages.css, absente des pages non-legacy. Toutes les regles de la coquille (chargee partout) qui font `var(--e-global-*)` resolvaient donc dans le vide, et l'en-tete changeait d'aspect selon que legacy-pages.css etait chargee ou non. On redeclare le kit ici, sur :root et donc sur tout le site, pour un rendu identique partout. Les @font-face (Montserrat, Lato) sont deja dans legacy-shell.css, elle aussi partout. */ --e-global-color-primary: #3D3D3D; --e-global-color-secondary: #3D3D3D; --e-global-color-text: #3D3D3D; --e-global-color-accent: #61CE70; --e-global-color-d970559: #3D3D3D; --e-global-color-3611b5c: #60B339; --e-global-color-eab9c9f: #E5E5E5; --e-global-typography-primary-font-family: "Montserrat"; --e-global-typography-primary-font-weight: 600; --e-global-typography-secondary-font-family: "Montserrat Alternates"; --e-global-typography-secondary-font-weight: 400; --e-global-typography-text-font-family: "Lato"; --e-global-typography-text-font-weight: 400; --e-global-typography-accent-font-family: "Montserrat"; --e-global-typography-accent-font-weight: 500; /* Couleurs */ --green: #60B339; --green-bright: #7ECB4F; /* #3d7a26 : 5,24:1 avec du blanc ET sur du blanc. Une seule valeur couvre donc le fond des boutons (texte blanc dessus) et la couleur des titres sur fond clair. Valeur deja retenue par l'admin au lot 1 (--btn-primary-bg), ou #60B339 sous du blanc ne donnait que 2,62:1. */ --green-deep: #3d7a26; --ink: #141414; --ink-soft: #1e1e1e; --paper: #ffffff; --surface-alt: #fafafa; --text: #2b2b2b; /* #6f6f6f = 5,0:1 sur blanc. L'ancien site utilise #777 (4,48:1), sous le seuil AA de 4,5:1 : l'écart est invisible, la conformité ne l'est pas. */ --muted: #6f6f6f; --line: #e4e7e2; --danger: #c0392b; /* Conserves de la charte precedente : ~24 regles du tunnel de commande, du panier et de l'espace client les referencent encore, et ces ecrans sont hors du perimetre de ce lot. Un var() non resolu sur une propriete heritee (color, font-family) retombe sur la valeur du parent : sans ces deux lignes, les textes secondaires perdent leur gris et .mono sa chasse fixe. */ --steel: #5f6b60; --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; /* Typo */ --font-brand: Montserrat, system-ui, sans-serif; --font-body: Lato, system-ui, sans-serif; /* Rythme */ --container: 1120px; --radius: 3px; --section-pad: clamp(3rem, 7vw, 5.5rem); } /* --- Coquille importee (en-tete / pied WordPress) ------------------------ */ /* La coquille est chargee sur TOUTES les pages, mais le menu et le corps du pied heritaient leur police du : sur les pages importees, theme.css (bare `body{font-family}`) la fixait ; ailleurs (configurateur, tunnel), non, et l'en-tete changeait d'aspect. theme.css reste volontairement hors des ecrans de l'app (selecteurs nus). On fixe donc la police de la coquille explicitement, sur des selecteurs de classe, pour un rendu identique partout : Montserrat pour la navigation et les titres, Lato pour le texte du pied. */ .elementor-location-header, .elementor-location-header .elementor-item, .elementor-location-header .elementor-sub-item, .elementor-location-footer h1, .elementor-location-footer h2, .elementor-location-footer h3, .elementor-location-footer h4 { font-family: "Montserrat", sans-serif; } .elementor-location-footer { font-family: "Lato", sans-serif; } /* Sous-menus deroulants. Elementor ouvrait ses menus via SmartMenus (jQuery), que l'application n'embarque pas : le sous-menu (deja stylé et positionne par le CSS Elementor) restait en display:none. On l'ouvre en CSS pur, au survol ET au focus clavier (accessibilite : le sous-menu s'ouvre a la tabulation, ce que l'ancien site ne permettait pas). */ .elementor-location-header .menu-item-has-children:hover > .sub-menu, .elementor-location-header .menu-item-has-children:focus-within > .sub-menu { display: block; } /* Elementor impose width: var(--width) = 100% (soit la largeur de l'item parent, 156px) au deroulant, alors que ses entrees sont en nowrap (« Impression 3D – PEEK PEI ULTEM » fait 239px) : le texte debordait du fond gris. On laisse le sous-menu prendre la largeur de son contenu. !important car la regle d'Elementor est plus specifique (verifie au navigateur : 156px sans, 267px avec). */ .elementor-location-header .sub-menu { width: max-content !important; } /* Bouton « Imprimer en ligne » de l'en-tete : son conteneur Elementor (.elementor-element-51f41680, colonne flex, hauteur auto) porte un padding-top:10px / padding-bottom:0 : la boite (55px) colle exactement au bouton (45px) plus ce padding, donc justify-content n'a aucun espace libre a redistribuer — la 1re passe (justify-content seul) n'avait donc rien change (verifie au navigateur). En retirant le padding-top asymetrique, la boite se resserre exactement sur le bouton (45px) et l'alignement du header (align-items:center) le recentre alors sur le meme axe que le logo (mesure : centre du bouton = centre du logo, 120.2px des deux cotes). justify-content garde en filet si un autre ecran laissait un residu d'espace libre. Fait dans site.css (dernier mot sur la coquille), jamais dans legacy-shell.css (regenere par l'import, la regle serait perdue). */ .elementor-element-51f41680 { padding-top: 0; justify-content: center; } /* Mobile (<=767px) : bouton « Imprimer en ligne » en haut a droite, hamburger juste en dessous (demande Florian, 31/07/2026). Par defaut (legacy-shell.css, regenere par l'import) le conteneur du bouton (.elementor-element-51f41680) porte width:100% et un order de flex par defaut (0), donc il retombe seul sur une 2e ligne PLEINE LARGEUR sous logo+hamburger (qui, eux, ont order:-99999). On lui donne un order intermediaire (-99998) et une largeur au contenu pour qu'il rejoigne la 1re ligne, colle a droite (margin-left:auto) ; le widget du hamburger (.elementor-element-bfb5314, order:-99997) passe alors seul sur la 2e ligne (flex-basis:100% force le retour a la ligne) ou son icone reste collee au meme bord droit (regle heritee elementor-nav-menu__text-align-aside). Verifie au navigateur (Claude in Chrome sur preprod) : bords droits du bouton et du hamburger alignes au pixel pres, tiroir de menu toujours fonctionnel. */ @media (max-width: 767px) { .elementor-element-51f41680 { order: -99998; width: auto; flex-grow: 0; margin-left: auto; /* Espace demande au-dessus du bouton (31/07/2026) : padding-top plutot que margin-top pour agrandir la boite du conteneur (justify-content: center du bloc precedent centre alors le bouton dans cet espace en plus, au lieu de le pousser hors du flex). */ padding-top: 15px; /* Bouton colle au bord droit complet (meme demande) : le conteneur heritait 28px de padding-right (legacy-shell.css, pousse le bouton depuis son propre bord) PLUS le padding-right:3% du bloc-ligne parent .elementor-element-3abb80a8 (.e-con-inner, garde-fou d'ecart general du header) : on annule les deux — 28px localement, -3% pour compenser le parent (meme pourcentage que legacy-shell.css, a garder synchrone si Elementor le change lors d'un reimport). Le hamburger juste en dessous garde lui son propre retrait : seul le bouton etait demande. */ padding-right: 0; margin-right: -3%; } .elementor-element-bfb5314 { order: -99997; flex-basis: 100%; width: 100%; max-width: 100%; } } /* Etapes numerotees (widget Unlimited Elements "Shape Bullets", pages /services : accompagnement, a-la-demande, prototypage, en-serie, stocks) : l'icone (loupe, camion...) se superposait au titre de l'etape. Cause : Elementor genere le CSS de mise en page de ce greffon en