/* ============================================================================ ALUPLEX SIGNALÉTIQUE - FEUILLE DE STYLE DE SITE ---------------------------------------------------------------------------- Version du 1er octobre 2026, deuxième état. Réécrite d'après la maquette, qui fait foi, puis complétée le même jour par un écart assumé à celle-ci, arbitré par Céline : la hauteur des boutons, ramenée à deux valeurs. Le contraste des aplats orange a été examiné le même jour et laissé en l'état. Les deux points sont documentés au point 5. SOURCE DES VALEURS Points 3, 4 et 5 du README du dossier d'intégration, qui décrivent `maquette-home-aluplex.html`. Aucune valeur n'est inventée ici : quand la maquette ne tranche pas, le commentaire le dit. OÙ LA POSER Dans le thème enfant child_cartzilla, chargée APRÈS la feuille du thème parent, afin que ses valeurs l'emportent. COMMENT S'EN SERVIR Aucun bloc, aucun gabarit, aucune page ne redéfinit une couleur, un angle ou un espacement en dur. Tous appellent les variables déclarées ici. C'est ce qui permettra de changer la charte en modifiant une ligne plutôt que six fichiers. ========================================================================== */ /* ============================================================================ 1. POLICES ---------------------------------------------------------------------------- Deux familles, et deux seulement. Quicksand porte les titres, Source Sans 3 le texte courant et les tableaux, où ses chiffres se distinguent nettement les uns des autres. Nos pages vivent de références comme NF X 08-070 : c'est ce qui a décidé du partage. ========================================================================== */ /* Intégration du 19/10/2026 : pas d'@import ici. Il enchaînait deux requêtes bloquantes avant le premier rendu. Quicksand est déjà chargée par le thème (réglage google_cz_font) ; Source Sans 3 est déclarée par un dans templates/index.tpl, préchargée. */ /* ============================================================================ 2. LES JETONS ========================================================================== */ :root{ /* --- Couleurs ----------------------------------------------------------- */ /* Règle de la maquette : l'orange est réservé aux actions d'achat, aux offres et au téléphone. La navigation est en bleu. */ --orange: #ec6201; /* actions d'achat, offres, téléphone, pictos */ --orange-clair: #ff8a3d; /* liens sur fond bleu, contraste 5,12 */ /* Pas de second orange pour les aplats. Un #c75301 avait été calculé le 01/10/2026 pour porter le contraste du blanc de 3,32 à 4,50 : écarté par Céline le même jour, l'assombrissement se voyant à l'écran. L'orange de marque est le seul orange des aplats. Voir le point 5. */ --bleu: #1e394e; /* menu, fonds sombres, titres */ --gris-carte: #f3f5f7; /* fonds de cartes */ --gris-bleu: #eef2f6; /* fond de l'offre flash */ --jaune: #ffc20e; /* étiquette « Offre du moment », usage unique */ --texte: #1d1f20; --fond: #ffffff; /* --- Familles ----------------------------------------------------------- */ --police-titre: Quicksand, system-ui, sans-serif; --police-lecture: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* --- Tailles ------------------------------------------------------------ */ --t-h1: 27px; /* bandeau d'accueil, sur 4 lignes */ --t-h2: 22px; /* univers, produits, logos, guides */ --t-h2-large: 26px; /* devis, secteurs, FAQ : la maquette donne 24 à 30 */ --t-h3: 18px; /* cartes : la maquette donne 17 à 20 */ --t-menu: 15px; --t-lecture: 16px; /* la maquette donne 14 à 16 selon le bloc */ --t-petit: 14px; --t-mention: 12px; /* ligne de précision de la réassurance */ --graisse-titre: 700; --graisse-menu: 600; --interligne-lecture: 1.55; /* la maquette donne 1,5 à 1,6 */ --interligne-titre: 1.15; /* --- Formes ------------------------------------------------------------- */ --angle: 14px; /* cartes et blocs */ --angle-bouton: 10px; /* boutons */ --angle-rond: 999px; /* recherche, onglets, pastilles */ --ombre-carte: 0 6px 24px rgba(30,57,78,.1); /* --- Mise en page ------------------------------------------------------- */ --largeur: 1280px; --marge-laterale: 40px; /* 32px pour le menu, voir point 2 du README */ /* --- Mesure de lecture, pour le blog et les pages CMS ------------------- */ /* La maquette ne tranche pas : elle ne porte pas de texte long. Valeur retenue d'après le relevé du 30/09/2026, voir le point 6. */ --mesure: 680px; /* --- Hauteurs de bouton ------------------------------------------------- */ /* Deux valeurs, pas cinq. Relevé du 01/10/2026 sur la maquette : elle en portait cinq, 32 px pour les cinq « Voir l'univers », 40 px pour le bouton du bandeau et « Tous les guides », 44 px dans la section Devis, 50 px pour l'offre de la quinzaine, et quatre boutons sans hauteur déclarée dans la section Produits. Céline a ramené la maquette à ces deux valeurs le même jour. Reste la section Produits, dont les quatre boutons héritent du thème parent : à contrôler à l'intégration. */ --h-bouton: 44px; /* tous les boutons, y compris ceux des cartes */ --h-bouton-grand: 50px; /* le bouton d'une offre mise en avant */ /* --- Accessibilité ------------------------------------------------------ */ --cible-tactile: 44px; --focus: 2px solid var(--orange); --focus-decalage: 2px; /* --- Ajouts de l'intégration des blocs, 19/10/2026 --------------------- */ /* Valeurs relevées sur la maquette, que la feuille ne déclarait pas encore. Les blocs de divioseo_prettyblocks n'emploient que des jetons. */ --marge-laterale-mobile: 16px; /* gouttière de la maquette 390 px */ --filet: #e2e6eb; /* filets et contours de cartes */ --texte-doux: #5b6670; /* précisions, familles, mentions */ --orange-teinte: #fdf1e8; /* survol des cartes univers */ --ombre-legere: 0 2px 10px rgba(30,57,78,.06); /* cartes guides au repos */ /* Sur fond bleu : cartes translucides, filets, texte secondaire, survol. */ --sur-bleu-carte: rgba(255,255,255,.06); --sur-bleu-filet: rgba(255,255,255,.14); --sur-bleu-texte: rgba(255,255,255,.82); --sur-bleu-orange: rgba(236,98,1,.16); /* Retours de recette du 20/10/2026 (maquette) */ --orange-survol: #c84f00; /* survol des boutons orange hors bandeau */ --sur-bleu-survol: rgba(255,255,255,.12); /* survol des cartes secteurs */ /* Cartes secteurs claires, retour du 10/11/2026 */ --secteur-fond: #e9eef2; /* zone texte des cartes secteurs */ --secteur-texte: #4d5a66; /* texte descriptif des cartes */ --secteur-filet: #c2ccd4; /* bordure des puces normatives */ } /* ============================================================================ 3. RÈGLES DE BASE ========================================================================== */ body{ font-family: var(--police-lecture); font-size: var(--t-lecture); line-height: var(--interligne-lecture); color: var(--texte); background: var(--fond); } h1, h2, h3, h4{ font-family: var(--police-titre); font-weight: var(--graisse-titre); line-height: var(--interligne-titre); color: var(--bleu); } h1{ font-size: var(--t-h1); } h2{ font-size: var(--t-h2); } h3{ font-size: var(--t-h3); } /* Les sections dont la maquette donne un titre plus grand. */ .bloc-devis h2, .bloc-secteurs h2, .bloc-faq h2{ font-size: var(--t-h2-large); } a{ color: var(--bleu); text-decoration: none; } a:hover{ color: var(--orange); } /* Sur fond sombre, le lien passe à l'orange clair : l'orange de marque n'y atteint que 3,61 de contraste, l'orange clair 5,12. */ .fond-sombre a, .texte-seo a{ color: var(--orange-clair); font-weight: 700; } .fond-sombre a:hover, .texte-seo a:hover{ color: var(--fond); text-decoration: underline; } /* ============================================================================ 4. MENU ========================================================================== */ .menu{ background: var(--bleu); font-size: var(--t-menu); font-weight: var(--graisse-menu); } .menu a{ color: var(--fond); } .menu a:hover{ color: var(--orange); } /* ============================================================================ 5. BOUTONS ---------------------------------------------------------------------------- QUELLE COULEUR POUR QUEL BOUTON. La règle de la maquette, appliquée par Céline le 01/10/2026 à la section Univers : l'orange porte l'achat, l'offre et le téléphone, le bleu porte la navigation. - Bouton d'achat ou de devis : aplat orange, libellé blanc, survol vers le bleu. « Demander un devis », « Ajouter au panier », « J'en profite », « Je commande mes plans ». - Bouton de navigation : aplat bleu, libellé blanc, survol vers l'orange. Les cinq « Voir l'univers » de la section Univers. Le contraste y est de 12,0, très au-dessus du seuil, alors qu'il n'était que de 3,32 quand ces boutons étaient orange. - Bouton secondaire : fond blanc, filet bleu. Le téléphone de la section Devis, « Tous les guides ». Un bouton de navigation posé dans une carte peut porter un rond de rappel orange, comme les cinq « Voir l'univers ». La flèche blanche y donne 3,33, au-dessus du seuil de 3,0 qui vaut pour un élément graphique. Au survol, les trois couleurs s'inversent : l'aplat passe du bleu à l'orange, le rond de l'orange au blanc, la flèche du blanc à l'orange, et la flèche orange sur le rond blanc donne de nouveau 3,33. Sans l'inversion du rond, celui-ci se confondrait avec l'aplat orange. Ne pas simplifier ce survol. UN ÉCART ASSUMÉ À LA MAQUETTE, arbitré par Céline le 01/10/2026 : la hauteur. Voir les jetons `--h-bouton` et `--h-bouton-grand` au point 2. Aucun bouton ne descend sous 44 px, pas même ceux posés dans une carte. POINT DE VIGILANCE MAINTENU, signalé sans être corrigé parce que la maquette fait foi : du texte blanc sur l'orange #ec6201 donne un contraste de 3,32. Le seuil WCAG AA est de 4,5 pour le texte courant et de 3,0 pour le grand texte et les composants. Un libellé de bouton y est donc conforme à partir de 18,66 px en gras, et non conforme en dessous ; ceux de la maquette sont en 15 px. Trois issues ont été calculées le 01/10/2026, les trois écartées par Céline : un orange assombri à #c75301, même teinte, contraste 4,50, écarté parce que l'assombrissement se voit ; un libellé #1d1f20 sur l'orange actuel, contraste 4,98, qui change l'allure de la page ; un libellé porté à 18,66 px en gras, qui grossit tous les boutons. La décision est donc de garder l'orange de marque et d'assumer l'écart, sur un site qui vend par ailleurs de la signalétique PMR. À rouvrir si un contrôle d'accessibilité est demandé. ========================================================================== */ .bouton, .btn-primary, .add-to-cart, button[data-button-action="add-to-cart"]{ font-family: var(--police-lecture); font-size: var(--t-petit); font-weight: 700; background: var(--orange); color: var(--fond); border: 0; border-radius: var(--angle-bouton); padding: 0 22px; height: var(--h-bouton); min-height: var(--cible-tactile); display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; } .bouton:hover, .btn-primary:hover, .add-to-cart:hover{ background: var(--bleu); color: var(--fond); } .bouton.secondaire, .btn-secondary{ background: var(--fond); color: var(--bleu); border: 1px solid var(--bleu); } .bouton.secondaire:hover{ background: var(--bleu); color: var(--fond); } /* Le bouton d'une offre mise en avant, et lui seul. La maquette le donne à 50 px dans l'offre de la quinzaine. */ .bouton--grand{ height: var(--h-bouton-grand); padding: 0 28px; font-size: var(--t-menu); } /* Les boutons posés dans une carte sont les premiers à être rognés quand la place manque. Relevé du 01/10/2026 : les cinq « Voir l'univers » mesuraient 32 px, soit 12 px sous la cible, alors qu'ils constituent le chemin principal vers les catégories. Corrigés dans la maquette le même jour. Cette règle est là pour que le cas ne se reproduise pas ailleurs. */ .carte .bouton, .carte .btn-primary, .carte .btn-secondary, .product-miniature .bouton{ height: var(--h-bouton); } /* Recherche, onglets et pastilles : bouts ronds. */ .recherche, .onglet, .pastille{ border-radius: var(--angle-rond); } .pastille{ background: var(--orange); color: var(--fond); } /* ============================================================================ 6. CARTES ========================================================================== */ .carte, .product-miniature, .js-product-miniature{ background: var(--gris-carte); border-radius: var(--angle); overflow: hidden; } .carte--avant, .carte:hover, .product-miniature:hover{ box-shadow: var(--ombre-carte); } .carte--flash{ background: var(--gris-bleu); border: 2px solid var(--orange); } .etiquette-offre{ background: var(--jaune); color: var(--texte); border-radius: var(--angle-rond); font-weight: 700; font-size: var(--t-mention); } /* Logos clients : légère mise à l'échelle au survol. */ .logo-client{ transition: transform .15s ease; } .logo-client:hover{ transform: scale(1.06); } /* ============================================================================ 7. PRIX ========================================================================== */ .price, .current-price span, .prix{ font-family: var(--police-lecture); font-weight: 700; color: var(--orange); font-variant-numeric: tabular-nums; } .prix-barre{ text-decoration: line-through; color: #6b7280; font-weight: 400; } /* ============================================================================ 8. TABLEAUX ---------------------------------------------------------------------------- La maquette ne porte pas de tableau : elle ne tranche donc pas ce style. Les valeurs ci-dessous emploient ses couleurs, rien d'autre. Le site n'a aujourd'hui aucun style de tableau, alors que les pages normatives en comptent jusqu'à sept. ========================================================================== */ table{ border-collapse: collapse; width: 100%; margin: 22px 0; font-size: 15px; } thead th{ background: var(--bleu); color: var(--fond); text-align: left; padding: 10px 12px; font-weight: 700; } td, tbody th{ border: 1px solid #dfe4e9; padding: 10px 12px; } tbody tr:nth-child(even){ background: var(--gris-carte); } td.nombre{ text-align: right; font-variant-numeric: tabular-nums; } /* Sur mobile, un tableau large défile. Jamais de min-width, qui casserait l'affichage. */ @media (max-width: 768px){ .table-defilante{ overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* ============================================================================ 9. LE BLOG ET LES PAGES CMS ---------------------------------------------------------------------------- Ne concerne pas la page d'accueil, et ne contredit donc pas la maquette. Relevé du 30/09/2026 : un article court sur environ 180 signes par ligne, une fiche produit sur 186, une page catégorie sur 122, contre 66 à l'optimum et 75 au maximum admis. Le défaut est dans le gabarit, jamais dans le contenu : il ne se corrige pas page par page mais ici, une fois. Le sélecteur de PrestaBlog est à confirmer dans l'inspecteur et à ajouter à la liste. ========================================================================== */ #prestablog .prestablog-content, .prestablog-content, .blog-content, #cms .page-content, .page-cms .rte{ max-width: var(--mesure); margin-left: auto; margin-right: auto; } /* Le tableau échappe à la contrainte : il en a besoin, le texte non. */ #prestablog .table-defilante, .page-cms .table-defilante{ max-width: none; } /* ============================================================================ 10. ACCESSIBILITÉ ========================================================================== */ /* Le site pose aujourd'hui outline:none, ce qui rend la navigation au clavier impossible à suivre. Sur un site qui vend de la signalétique PMR, c'est un défaut qu'on ne peut pas garder. */ :focus-visible{ outline: var(--focus); outline-offset: var(--focus-decalage); } /* Deux tiers des liens de liste mesurent moins de 40 px de haut. Sur mobile, cela produit des appuis manqués. */ .liste-liens a, .carte-corps li a, .pied li a{ display: flex; align-items: center; min-height: var(--cible-tactile); } img{ max-width: 100%; height: auto; } /* ============================================================================ 11. À AJOUTER PAR LA SUITE ---------------------------------------------------------------------------- Cette feuille est faite pour grandir. Par ordre d'utilité : le style des champs de formulaire, celui du fil d'Ariane, celui de la pagination des pages catégorie, les états de message, et les encadrés normatifs des articles. Chaque ajout suit la même règle : une valeur se déclare en jeton au point 2, et les règles l'appellent. Jamais de valeur en dur dans une règle. Et quand la maquette tranche, c'est elle qui tranche. ========================================================================== */