Design system
Couleurs, typographies, composants et règles d’usage du site Groupe DET. Référence pour le développement.
Logo
Redessiné en vectoriel à partir du fichier fourni, sans modification. Version sans signature dans l’en-tête, version complète en pied de page.
Zone de protection : la hauteur du point rouge autour du logo. Taille minimale : 96 px de large à l’écran.
Couleurs
Bleu foncé dominant, blanc pour respirer, rouge en accent uniquement, comme le prévoit le cahier des charges.
Couleur principale : logo, titres de marque, boutons secondaires, fonds forts.
Pied de page, barre supérieure, administration.
Uniquement « Demander un devis », le point du logo et les états actifs.
Fond principal, respiration.
Fond de section secondaire, panneaux.
Texte principal.
Texte secondaire, légendes.
Filets, bordures, séparateurs.
Typographie
Newsreader pour les titres (serif éditoriale, institutionnelle), Instrument Sans pour le texte et l’interface. Deux polices Google Fonts, gratuites.
Boutons et liens
Hauteur 52 px (42 px en petit format), coins 2 px. Le bouton rouge est réservé à la demande de devis.
Normal
Survol
Focus clavier
Petit format et fond sombre
Champs de formulaire
Libellé toujours visible au-dessus du champ, astérisque rouge pour les champs obligatoires, message d’erreur sous le champ.
Adresse e-mail invalide.
Onglets
Messages et notes
Confirmation, erreur, information et contenu provisoire.
Demande envoyée
Un e-mail de confirmation vous a été envoyé.
Envoi impossible
Vérifiez votre connexion puis réessayez.
Photographies et signature graphique
Photos d’illustration à lumière chaude : professionnels au travail, ouvrages, détails techniques. Elles sont signalées en pied de page et créditées dans les mentions légales. Si une image ne se charge pas, la « planche » à trame millimétrée prend le relais. La « cote » du dessin technique reste la signature graphique.
Image indisponible : Ingénieure consultant des plans sur le terrain
Image indisponible : Technicien installant un panneau solaireIcônes
Trait 1,5 px, 24 × 24, coins arrondis. Couleur Marine.
En-tête et méga-menu ouvert
Le méga-menu s’ouvre au survol ou au focus de « Expertises ». Le point rouge sous le menu indique la page en cours.
Quatre domaines complémentaires pour accompagner vos projets, du premier diagnostic au suivi.
Voir toutes les expertisesContact rapide, cookies, éléments flottants
Le bouton « Une question ? » est présent en bas à droite de toutes les pages et ouvre un panneau latéral. Le bandeau cookies apparaît en bas à gauche lors de la première visite.
Bouton de contact rapide
Une question ? Écrivez-nousBandeau cookies
Notes pour le développeur
Comportements, espacements et règles à respecter lors de l’intégration.
| Grille | Cadre 1440 px. Contenu 1240 px centré (marges 100 px). 12 colonnes, gouttière 24 px. Alignement à gauche. |
|---|---|
| Espacements | Base 8 px. Sections : 128 px (96 px pour les sections courtes). Titre de section → contenu : 64 px. |
| Points de rupture | Maquettes adaptatives : 1440 (référence), 1100 (menu plein écran), 1024 (grilles 4 → 2 colonnes), 860 (une colonne), 390 (mobile). Titres fluides avec clamp() : Display 44 → 84 px, H1 38 → 64 px, H2 32 → 48 px. |
| En-tête | Fixe et « intelligent » : se masque au défilement vers le bas, réapparaît au défilement vers le haut. Hauteur 88 px, barre supérieure 38 px masquée après 100 px de défilement. |
| Animations | Accueil : titre et chapô montent de 18 px (900 ms), photo révélée de haut en bas (1 200 ms) puis zoom lent 1 → 1,08 sur 24 s. Défilement : blocs qui apparaissent en fondu + 24 px (700 ms, décalage 90 ms entre éléments voisins). Grandes photos : parallaxe ± 7 %. Survols : zoom 1,05 des images de cartes, soulignement animé des liens, flèches qui avancent. Méga-menu : fondu + 6 px (220 ms). Changement de page : fondu 300 ms (View Transitions, repli JavaScript). Tout est désactivé si prefers-reduced-motion. |
| Règle du rouge | Le rouge est réservé à l’action « Demander un devis » (bouton), au point du logo et aux indicateurs actifs. Jamais en fond de section, jamais en texte courant. |
| Accessibilité | Contraste AA minimum (Marine sur blanc 11,3:1 ; Ardoise sur blanc 6,4:1 ; texte blanc sur bouton rouge 4,5:1). Focus visible : contour rouge 2 px décalé de 3 px. Champs : libellés toujours visibles, erreurs annoncées (aria-live) et liées au champ (aria-describedby). Images : texte alternatif obligatoire dans l’administration. |
| Images | Photos Pexels chargées depuis leur serveur pour la maquette : pour la mise en ligne, les télécharger, les héberger sur le site et les servir en WebP/AVIF, 2× pour l’écran, chargement différé hors du premier écran. Bandeau d’accueil : 2 880 × 1 200 px, poids cible < 250 Ko. À remplacer progressivement par les vraies photos de DET. |
| Contenus administrables | Textes de toutes les sections, coordonnées, domaines et prestations, images principales, actualités, réalisations, offres d’emploi, documents à télécharger. Les blocs « à venir » se masquent ou s’affichent selon qu’un contenu est renseigné. |
| Formulaires | Chaque envoi est transmis par e-mail à DET et enregistré dans l’administration. Anti-spam invisible (champ piège + jeton) ; reCAPTCHA en dernier recours. Validation à la sortie du champ et à l’envoi, messages en français. |