/* ========================================================================== variables.css — Réglages de la charte graphique du site migliore06.fr -------------------------------------------------------------------------- Ce fichier regroupe TOUS les réglages visuels du site : couleurs, polices, tailles de texte, espacements, arrondis, ombres, largeurs. Règle d'or : le reste du CSS (style.css) n'écrit jamais une couleur ou une police « en dur ». Il utilise uniquement les variables définies ici. → Pour changer une couleur sur tout le site, on la modifie ici, une seule fois. Comment ça marche : une variable s'écrit --nom-de-la-variable: valeur; et s'utilise ailleurs avec var(--nom-de-la-variable). ========================================================================== */ :root { /* ---------------------------------------------------------------------- 1. COULEURS DE LA CHARTE ---------------------------------------------------------------------- */ /* Bleu du logo (RVB 0,0,255). Réservé aux accents : titre « Nouvelle Carrosserie Migliore », logo, boutons, liens, bordures. Jamais en grand aplat (trop agressif à l'œil). */ --couleur-bleu-logo: #0000FF; /* Bleu foncé : titres secondaires, encarts, bandeaux. */ --couleur-bleu-fonce: #001A66; /* Bleu moyen : liens et effets au survol de la souris. */ --couleur-bleu-moyen: #3D5AFE; /* Anthracite : couleur du texte courant (plus doux que le noir pur). */ --couleur-anthracite: #23272F; /* Bleu logo éclairci (bleu logo à moitié transparent sur fond blanc) : sous-titre « - Carrossier Constructeur - », comme sur l'ancien site. */ --couleur-bleu-logo-clair: #8080FF; /* Gris clair : fond des sections alternées, pour rythmer la page. */ --couleur-gris-clair: #F2F3F6; /* Gris moyen : traits de séparation, bordures discrètes des cartes. */ --couleur-gris-bordure: #D9DCE3; /* Gris texte : textes secondaires (légendes, dates, mentions). */ --couleur-gris-texte: #5A6070; /* Fond principal de la page : blanc légèrement cassé (pas de blanc pur). */ --couleur-fond-page: #FAFAFA; /* Blanc pur : cartes et encarts, pour qu'ils ressortent du fond. */ --couleur-blanc: #FFFFFF; /* Vert : message « Votre demande a bien été envoyée » du formulaire. */ --couleur-message-succes: #1B7F3B; --couleur-fond-succes: #E6F4EA; /* Rouge : messages d'erreur du formulaire (champ oublié, etc.). */ --couleur-message-erreur: #B3261E; --couleur-fond-erreur: #FCE8E6; /* Fond des annonces « Informations importantes » (bleu très pâle). */ --couleur-fond-annonce: #EEF1FF; /* ---------------------------------------------------------------------- 2. POLICES DE CARACTÈRES Chaque police est suivie de « polices de secours » : si la première n'est pas disponible, le navigateur prend la suivante. ---------------------------------------------------------------------- */ /* Le site n'utilise que DEUX polices : 1. Impact : UNIQUEMENT pour le titre « Nouvelle Carrosserie Migliore » et son sous-titre « - Carrossier Constructeur - ». */ --police-titre-entreprise: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; /* 2. Police principale : TOUT le reste du site (menu, slogan, pied de page, titres de sections, texte courant…). Pour changer la police de tout le site, il suffit de modifier cette seule ligne. Exemples possibles (déjà présentes dans le dossier /polices/) : "Public Sans", "Segoe UI", Arial, sans-serif "Barlow Condensed", "Arial Narrow", Arial, sans-serif */ --police-principale: "Times New Roman", Times, Georgia, serif; /* Épaisseurs de police utilisées. */ --epaisseur-normale: 400; --epaisseur-semi-grasse: 600; --epaisseur-grasse: 700; /* ---------------------------------------------------------------------- 3. TAILLES DE TEXTE « rem » = taille relative au réglage du navigateur (1rem = 16 pixels en général). Si le visiteur agrandit le texte, tout suit. clamp(minimum, idéal, maximum) : la taille s'adapte à la largeur de l'écran (petite sur téléphone, grande sur ordinateur), entre deux bornes. ---------------------------------------------------------------------- */ --taille-texte-petit: 0.875rem; /* ~14 px : mentions, dates */ --taille-texte-normal: 1rem; /* ~16 px : texte courant */ --taille-texte-grand: 1.125rem; /* ~18 px : paragraphes d'introduction */ /* Bandeau du haut (tailles reprises de l'ancien site sur grand écran). */ --taille-titre-entreprise: clamp(1.75rem, 3.5vw, 2.5rem); /* ~40 px : « Nouvelle Carrosserie Migliore » */ --taille-sous-titre-entreprise: clamp(1.15rem, 2vw, 1.5625rem); /* ~25 px : « - Carrossier Constructeur - » */ --taille-menu: clamp(1rem, 1.15vw, 1.25rem); /* ~16 à 20 px : liens du menu (dans la bande bleue) */ --taille-slogan: clamp(1.05rem, 1.5vw, 1.25rem); /* ~20 px : slogan */ --taille-nom-coordonnees: 1.4rem; /* ~22 px : nom en Impact dans les coordonnées (page Contact) */ --taille-nom-pied-de-page: 1.4rem; /* ~22 px : nom en Impact dans le pied de page */ /* Reste du site. */ --taille-titre-page: clamp(2rem, 5vw, 3rem); /* grand titre d'une page */ --taille-titre-section: clamp(1.6rem, 3.5vw, 2.25rem); /* titre d'une section */ --taille-titre-carte: 1.35rem; --taille-titre-presentation: clamp(1.4rem, 1.85vw, 2.1rem); /* titre de la présentation de l'accueil : calculé pour tenir sur une seule ligne */ /* titre d'une carte ou d'un encart */ /* Hauteur de ligne : espace entre les lignes d'un paragraphe. */ --hauteur-ligne-texte: 1.6; --hauteur-ligne-titres: 1.15; /* ---------------------------------------------------------------------- 4. ESPACEMENTS (marges intérieures et extérieures) Une échelle unique, utilisée partout, pour un rendu régulier et aéré. ---------------------------------------------------------------------- */ --espace-minuscule: 0.125rem; /* ~2 px */ --espace-tres-petit: 0.25rem; /* ~4 px */ --espace-petit: 0.5rem; /* ~8 px */ --espace-moyen: 1rem; /* ~16 px */ --espace-grand: 1.5rem; /* ~24 px */ --espace-tres-grand: 2.5rem; /* ~40 px */ --espace-entre-sections: clamp(3rem, 8vw, 5rem); /* entre deux grandes sections */ /* ---------------------------------------------------------------------- 5. LARGEURS ET MISE EN PAGE ---------------------------------------------------------------------- */ /* ÉCHELLE DU SITE SUR LES GRANDS ÉCRANS. Tout le site est dimensionné en « rem » (multiples de la taille de base du texte). Sur un écran de bureau ou un portable, la taille de base reste de 16 px. Sur un grand écran (au-delà de 1707 px de large), elle grandit avec la largeur de l'écran : le site garde exactement les mêmes proportions qu'à 1707 px, en plus grand, au lieu de s'étaler avec un texte minuscule. À 2560 px, cela donne l'aspect d'un affichage à 150 % (taille de base 24 px, plafond). --largeur-reference-ecran : largeur à partir de laquelle on agrandit ; --taille-base-maximale : plafond (pour les écrans encore plus grands). */ --largeur-reference-ecran: 1707; --taille-base-maximale: 24px; /* Largeur maximale du contenu : au-delà, le contenu reste centré (évite des lignes de texte trop longues sur les grands écrans). */ --largeur-max-contenu: 75rem; /* ~1200 px */ /* Largeur maximale d'une colonne de texte (pages de texte comme les mentions légales) : environ 75 caractères par ligne, confortable à lire. */ --largeur-texte: 48rem; /* Page d'accueil : la partie haute est partagée entre le contenu principal et la colonne de droite. Le contenu prend N parts et la colonne 1 part : 3fr = colonne d'1/4 de la largeur (4fr = 1/5, 2fr = 1/3). La colonne ne descend jamais sous la largeur minimale (sinon trop étroite sur les ordinateurs portables). */ --parts-contenu-principal: 3fr; --largeur-min-colonne-droite: 16rem; /* ~256 px */ /* Largeur des images de la présentation de l'accueil, en part de la largeur de la présentation (« cqi » : 22cqi = 22 %). */ --largeur-image-dans-texte: 22cqi; /* Hauteur des logos des partenaires en bas des cartes « Nos aménagements ». */ --hauteur-logo-partenaire: 2.5rem; /* Marge sur les côtés de l'écran (surtout utile sur téléphone). */ --marge-cotes-ecran: 1rem; /* Largeur du bandeau du haut : 85 % de l'écran, centré (comme l'ancien site). */ --largeur-bandeau-haut: 85%; /* Hauteur de la bande bleue du bandeau du haut (celle du menu). */ --hauteur-bande-bleue-epaisse: 2.5rem; /* ~40 px : bande qui contient le menu */ /* Carrousel de la page d'accueil. */ --hauteur-photo-carrousel: 11.25rem; /* ~180 px : hauteur des photos (largeur automatique) */ --ecart-photos-carrousel: 0.625rem; /* ~10 px entre deux photos */ --duree-par-photo-carrousel: 6s; /* temps de passage d'une photo (plus grand = plus lent). La durée d'un tour complet est calculée d'après le nombre de photos (js/main.js) : la vitesse reste la même quel que soit le nombre de photos. */ /* Largeur des colonnes 1 et 3 du pied de page (identiques, pour que le nom de l'entreprise soit exactement au centre). Juste assez pour la ligne la plus longue (liens légaux + copyright). */ --largeur-cote-pied-de-page: 23rem; /* Hauteur des logos qui encadrent le bandeau du haut. */ --hauteur-logo-ncm: 5rem; /* ~80 px */ --hauteur-logo-utac: 2.125rem; /* ~34 px */ /* ---------------------------------------------------------------------- 6. ARRONDIS, BORDURES ET OMBRES ---------------------------------------------------------------------- */ --arrondi-petit: 4px; /* boutons, champs du formulaire */ --arrondi-moyen: 8px; /* cartes, encarts */ --epaisseur-bordure: 1px; --epaisseur-bordure-accent: 4px; /* liseré bleu sur le côté d'un encart */ --epaisseur-soulignement: 2px; /* contour de sélection au clavier */ --epaisseur-trait-menu: 3px; /* petit trait blanc sous la page active du menu */ --epaisseur-trait-pied-de-page: 2px; /* traits blancs entre les colonnes du pied de page */ /* Ombre légère sous les cartes blanches, pour les détacher du fond. */ --ombre-carte: 0 2px 8px rgba(0, 26, 102, 0.08); /* Ombre un peu plus marquée au survol d'une carte. */ --ombre-carte-survol: 0 6px 18px rgba(0, 26, 102, 0.15); /* ---------------------------------------------------------------------- 7. ANIMATIONS ---------------------------------------------------------------------- */ /* Durée des petits effets (changement de couleur au survol, etc.). */ --duree-transition: 0.2s; }