/* ===================================================== SIGNORE PLAST — DESIGN SYSTEM Industrial Premium / B2B Moderne PHASE 2 — Fondations CSS (socle visuel) Ce fichier définit le système de design complet : variables, typographie, boutons, cards, badges, sections, containers, formulaires, focus, responsive, micro-interactions. Chargé EN DERNIER (après style.css, said.css, sp-foundations.css). Toutes les couleurs proviennent de l'identité SIGNORE PLAST. Aucun contenu / structure / texte / URL n'est modifié. Aucun élément .banniersignore (HERO) n'est touché ici. CONTRAT DE COUCHE - sp-foundations.css : variables de couleurs (--sp-*), base html/body, surcharges appliquées aux pages existantes. - sp-design-system.css : TOKENS SANS CONFLIT + COMPOSANTS RÉUTILISABLES (nouveaux, non appliqués au HTML actuel). CRITÈRE de non-régression : ce fichier ne REDEFINIT JAMAIS un token --sp-* déjà déclaré par sp-foundations.css (couleurs, radius, ombres, fonts, focus, transition). Il n'ajoute QUE des tokens inédits et référence les tokens existants. ===================================================== */ /* ===================================================== 1. TOKENS ADDITIONNELS (aucun token sp-foundations n'est redéfini : couleurs, radius, ombres, fonts, focus et transition viennent de sp-foundations.css). ===================================================== */ :root { /* --- SPACING (échelle 4px — nouvelle) --- */ --sp-space-1: 0.25rem; /* 4px */ --sp-space-2: 0.5rem; /* 8px */ --sp-space-3: 0.75rem; /* 12px */ --sp-space-4: 1rem; /* 16px */ --sp-space-5: 1.5rem; /* 24px */ --sp-space-6: 2rem; /* 32px */ --sp-space-8: 3rem; /* 48px */ --sp-space-10: 4rem; /* 64px */ --sp-space-12: 5rem; /* 80px */ --sp-space-16: 8rem; /* 128px */ /* --- RADIUS additionnel (radius-sm/md/lg/pill viennent de sp-foundations.css : 8 / 14 / 20 px, pill 50rem) --- */ --sp-radius-xl: 24px; /* --- SHADOWS additionnel (sm/md/lg viennent de sp-foundations.css) --- */ --sp-shadow-xs: 0 1px 2px rgba(16, 16, 16, 0.04); /* --- TRANSITIONS (--sp-transition vient de sp-foundations.css : 0.22s cubic-bezier) --- */ --sp-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --sp-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1); /* --- FOCUS additionnel (--sp-focus-ring vient de sp-foundations.css) --- */ --sp-focus-ring-accent: 0 0 0 3px rgba(254, 27, 36, 0.25); /* --- Échelle typographique responsive (nouvelle) --- */ --sp-text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem); --sp-text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem); --sp-text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem); --sp-text-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); --sp-text-xl: clamp(1.1875rem, 1rem + 0.8vw, 1.5rem); --sp-text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem); --sp-text-3xl: clamp(1.875rem, 1.5rem + 2vw, 2.75rem); /* --- Poids --- */ --sp-weight-regular: 400; --sp-weight-medium: 500; --sp-weight-semibold: 600; --sp-weight-bold: 700; /* --- Interlignes --- */ --sp-leading-tight: 1.2; --sp-leading-snug: 1.35; --sp-leading-normal: 1.6; --sp-leading-relaxed: 1.75; /* --- Z-INDEX --- */ --sp-z-dropdown: 1000; --sp-z-sticky: 1020; --sp-z-fixed: 1030; --sp-z-modal-backdrop: 1040; --sp-z-modal: 1050; --sp-z-popover: 1060; --sp-z-tooltip: 1070; } /* ===================================================== 2. TYPOGRAPHIE ===================================================== Échelle cohérente, hiérarchie claire, responsive. Les styles existants (h1, h2, h3, p) dans style.css et sp-foundations.css restent actifs. Ces classes ajoutent un vocabulaire réutilisable. */ /* --- Titres de section --- */ .sp-title { font-family: var(--sp-font-heading); font-size: var(--sp-text-2xl); font-weight: var(--sp-weight-bold); line-height: var(--sp-leading-tight); letter-spacing: -0.015em; color: var(--sp-text); } .sp-title--center { text-align: center; } .sp-title--light { color: var(--sp-text-body); } .sp-title--accent { color: var(--sp-accent); } .sp-title--primary { color: var(--sp-primary); } .sp-title--dark { color: var(--sp-dark); } .sp-title--white { color: #ffffff; } /* --- Sous-titres --- */ .sp-subtitle { font-family: var(--sp-font-body); font-size: var(--sp-text-lg); font-weight: var(--sp-weight-medium); line-height: var(--sp-leading-snug); color: var(--sp-muted); } .sp-subtitle--center { text-align: center; } .sp-subtitle--dark { color: var(--sp-text-body); } /* --- Corps de texte --- */ .sp-body { font-family: var(--sp-font-body); font-size: var(--sp-text-base); font-weight: var(--sp-weight-regular); line-height: var(--sp-leading-relaxed); color: var(--sp-text-body); } .sp-body--muted { color: var(--sp-muted); } .sp-body--dark { color: var(--sp-text); } /* --- Texte technique --- */ .sp-text-tech { font-family: var(--sp-font-tech); font-size: var(--sp-text-sm); line-height: var(--sp-leading-normal); color: var(--sp-text-body); } /* --- Petits textes --- */ .sp-caption { font-size: var(--sp-text-xs); line-height: 1.5; color: var(--sp-muted); } .sp-overline { font-size: var(--sp-text-xs); font-weight: var(--sp-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sp-muted); } /* --- Ligne décorative sous titre --- */ .sp-title-underline { position: relative; display: inline-block; padding-bottom: var(--sp-space-4); } .sp-title-underline::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 48px; height: 3px; border-radius: var(--sp-radius-pill); background-color: var(--sp-primary); } /* ===================================================== 3. BOUTONS ===================================================== Système de boutons cohérent et réutilisable. Le bouton principal utilise l'identité rouge SIGNORE PLAST. Le bleu reste disponible pour les actions secondaires. Composants : - .btn-sp (base) - .btn-sp-primary (rouge CTA principal) - .btn-sp-secondary (bleu primaire) - .btn-sp-outline (outline bleu) - .btn-sp-outline-accent (outline rouge) - .btn-sp-ghost (transparent) - .btn-sp-dark (fond sombre) - .btn-sp-icon (bouton icone circulaire) - .btn-sp--sm (petit) - .btn-sp--lg (grand) - .btn-sp--full (pleine largeur) */ .btn-sp { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-space-2); min-height: 48px; padding: 0.75rem 1.75rem; border: 2px solid transparent; border-radius: var(--sp-radius-pill); font-family: var(--sp-font-heading); font-size: var(--sp-text-sm); font-weight: var(--sp-weight-semibold); line-height: 1; letter-spacing: 0.01em; text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer; transition: background-color var(--sp-transition), border-color var(--sp-transition), color var(--sp-transition), box-shadow var(--sp-transition), transform var(--sp-transition-fast); -webkit-user-select: none; user-select: none; } .btn-sp:focus-visible { outline: none; box-shadow: var(--sp-focus-ring); } .btn-sp:active { transform: translateY(1px); } .btn-sp:disabled, .btn-sp[disabled] { cursor: not-allowed; opacity: 0.55; pointer-events: none; } /* --- Primaire (rouge SIGNORE PLAST) --- */ .btn-sp-primary { background-color: var(--sp-accent); border-color: var(--sp-accent); color: #ffffff; } .btn-sp-primary:hover { background-color: var(--sp-accent-dark); border-color: var(--sp-accent-dark); color: #ffffff; box-shadow: 0 8px 20px -8px rgba(254, 27, 36, 0.5); } .btn-sp-primary:focus-visible { box-shadow: var(--sp-focus-ring-accent); } /* --- Secondaire (bleu SIGNORE PLAST) --- */ .btn-sp-secondary { background-color: var(--sp-primary-dark); border-color: var(--sp-primary-dark); color: #ffffff; } .btn-sp-secondary:hover { background-color: var(--sp-primary-dark); border-color: var(--sp-primary-dark); color: #ffffff; box-shadow: 0 8px 20px -8px rgba(2, 134, 250, 0.5); } /* --- Outline (bleu) --- */ .btn-sp-outline { background-color: transparent; border-color: var(--sp-primary); color: var(--sp-primary-dark); } .btn-sp-outline:hover { background-color: var(--sp-primary-dark); color: #ffffff; } /* --- Outline accent (rouge) --- */ .btn-sp-outline-accent { background-color: transparent; border-color: var(--sp-accent); color: var(--sp-accent); } .btn-sp-outline-accent:hover { background-color: var(--sp-accent); color: #ffffff; } /* --- Ghost (transparent) --- */ .btn-sp-ghost { background-color: transparent; border-color: transparent; color: var(--sp-primary-dark); } .btn-sp-ghost:hover { background-color: var(--sp-primary-soft); color: var(--sp-primary-dark); } /* --- Dark (fond sombre) --- */ .btn-sp-dark { background-color: var(--sp-dark); border-color: var(--sp-dark); color: #ffffff; } .btn-sp-dark:hover { background-color: var(--sp-dark-2); border-color: var(--sp-dark-2); color: #ffffff; box-shadow: 0 8px 20px -8px rgba(16, 16, 16, 0.3); } /* --- Icon (circulaire) --- */ .btn-sp-icon { min-height: 44px; min-width: 44px; padding: 0; border-radius: 50%; } /* --- Tailles --- */ .btn-sp--sm { min-height: 40px; padding: 0.5rem 1.25rem; font-size: var(--sp-text-xs); } .btn-sp--lg { min-height: 56px; padding: 1rem 2.25rem; font-size: var(--sp-text-base); } .btn-sp--full { width: 100%; } /* --- Avec icône --- */ .btn-sp .mdi { font-size: 1.15em; line-height: 1; } .btn-sp--lg .mdi { font-size: 1.25em; } /* ===================================================== 4. CARDS ===================================================== Composant carte réutilisable pour produits, contenus, features, etc. Composants : - .card-sp (base) - .card-sp__image (zone image) - .card-sp__body (zone contenu) - .card-sp__title (titre) - .card-sp__text (texte descriptif) - .card-sp__cta (bouton/lien CTA) - .card-sp__badge (badge positionné) - .card-sp--horizontal (layout horizontal) */ .card-sp { position: relative; display: flex; flex-direction: column; background-color: var(--sp-bg); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); overflow: hidden; box-shadow: var(--sp-shadow-xs); transition: box-shadow var(--sp-transition), transform var(--sp-transition), border-color var(--sp-transition); } .card-sp:hover { box-shadow: var(--sp-shadow-md); transform: translateY(-3px); border-color: var(--sp-border-soft); } .card-sp__image { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background-color: var(--sp-bg-soft); } .card-sp__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--sp-transition-slow); } .card-sp:hover .card-sp__image img { transform: scale(1.02); } .card-sp__body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-space-5); } .card-sp__title { font-family: var(--sp-font-heading); font-size: var(--sp-text-base); font-weight: var(--sp-weight-semibold); line-height: var(--sp-leading-snug); color: var(--sp-text); margin-bottom: var(--sp-space-2); } .card-sp__text { font-size: var(--sp-text-sm); line-height: var(--sp-leading-normal); color: var(--sp-muted); margin-bottom: var(--sp-space-4); flex: 1; } .card-sp__cta { display: inline-flex; align-items: center; gap: var(--sp-space-2); font-size: var(--sp-text-sm); font-weight: var(--sp-weight-semibold); color: var(--sp-accent); text-decoration: none; transition: color var(--sp-transition-fast); } .card-sp__cta:hover { color: var(--sp-accent-dark); } .card-sp__cta .mdi { font-size: 1.1em; transition: transform var(--sp-transition-fast); } .card-sp__cta:hover .mdi { transform: translateX(3px); } /* --- Badge sur carte --- */ .card-sp__badge { position: absolute; top: var(--sp-space-3); right: var(--sp-space-3); z-index: 1; } /* --- Variante horizontale --- */ .card-sp--horizontal { flex-direction: row; } .card-sp--horizontal .card-sp__image { flex: 0 0 40%; aspect-ratio: auto; } .card-sp--horizontal .card-sp__body { flex: 1; } /* --- Bordure colorée en bas (rappel identité) --- */ .card-sp--accent-border { border-bottom: 3px solid var(--sp-accent); } .card-sp--primary-border { border-bottom: 3px solid var(--sp-primary); } /* ===================================================== 5. BADGES ===================================================== Badges réutilisables pour statuts, labels, etc. Composants : - .badge-sp (base) - .badge-sp--stock (en stock / vert) - .badge-sp--promo (promo / rouge) - .badge-sp--new (nouveau / bleu) - .badge-sp--info (info / gris) - .badge-sp--pill (forme pilule) */ .badge-sp { display: inline-flex; align-items: center; gap: var(--sp-space-1); padding: 0.3em 0.75em; font-size: var(--sp-text-xs); font-weight: var(--sp-weight-semibold); line-height: 1; border-radius: var(--sp-radius-sm); white-space: nowrap; letter-spacing: 0.01em; } .badge-sp--stock { background-color: rgba(91, 179, 0, 0.12); color: var(--sp-success-dark); } .badge-sp--promo { background-color: var(--sp-accent-soft); color: var(--sp-accent-dark); } .badge-sp--new { background-color: var(--sp-primary-soft); color: var(--sp-primary-dark); } .badge-sp--info { background-color: var(--sp-bg-soft); color: var(--sp-muted); } .badge-sp--pill { border-radius: var(--sp-radius-pill); } .badge-sp .mdi { font-size: 0.85em; } /* ===================================================== 6. SECTIONS ===================================================== Système de sections pour créer de l'espace et de la respiration entre les blocs de contenu. Composants : - .section-sp (base) - .section-sp--soft (fond gris doux) - .section-sp--dark (fond sombre) - .section-sp--hero (section hero) - .section-sp__header (titre + sous-titre) - .section-sp__title (titre de section) - .section-sp__subtitle (sous-titre) */ .section-sp { padding: var(--sp-space-12) 0; } .section-sp--soft { background-color: var(--sp-bg-soft); } .section-sp--dark { background-color: var(--sp-dark); color: #ffffff; } .section-sp--dark .section-sp__title { color: #ffffff; } .section-sp--dark .section-sp__subtitle { color: rgba(255, 255, 255, 0.7); } .section-sp--hero { padding: var(--sp-space-16) 0; } .section-sp__header { text-align: center; margin-bottom: var(--sp-space-10); } .section-sp__header .section-sp__title { margin-bottom: var(--sp-space-3); } .section-sp__title { font-family: var(--sp-font-heading); font-size: var(--sp-text-2xl); font-weight: var(--sp-weight-bold); line-height: var(--sp-leading-tight); letter-spacing: -0.01em; color: var(--sp-text); } .section-sp__subtitle { font-size: var(--sp-text-lg); color: var(--sp-muted); max-width: 640px; margin-left: auto; margin-right: auto; } /* --- Responsive sections --- */ @media (max-width: 767.98px) { .section-sp { padding: var(--sp-space-8) 0; } .section-sp--hero { padding: var(--sp-space-10) 0; } .section-sp__header { margin-bottom: var(--sp-space-6); } } /* ===================================================== 7. CONTAINERS ===================================================== Conteneurs de contenu alignés avec le design system. Travaille avec le grid Bootstrap existant. Composants : - .sp-container (conteneur principal) - .sp-container--narrow (conteneur étroit) - .sp-container--wide (conteneur large) - .sp-container--full (pleine largeur avec padding) */ .sp-container { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: var(--sp-space-5); padding-right: var(--sp-space-5); } .sp-container--narrow { max-width: 800px; } .sp-container--wide { max-width: 1400px; } .sp-container--full { max-width: none; padding-left: var(--sp-space-5); padding-right: var(--sp-space-5); } /* --- Grille de contenu --- */ .sp-grid { display: grid; gap: var(--sp-space-5); } .sp-grid--2 { grid-template-columns: repeat(2, 1fr); } .sp-grid--3 { grid-template-columns: repeat(3, 1fr); } .sp-grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1199.98px) { .sp-home-products__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1199.98px) { .sp-home-products__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 991.98px) { .sp-grid--4 { grid-template-columns: repeat(2, 1fr); } .sp-grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .sp-grid--4, .sp-grid--3, .sp-grid--2 { grid-template-columns: 1fr; } } /* ===================================================== 8. FORMULAIRES ===================================================== Système de formulaires moderne et confortable. Travaille par-dessus les classes Bootstrap existantes. Composants : - .form-sp__group (groupe de champ) - .form-sp__label (libellé) - .form-sp__input (champ texte) - .form-sp__textarea (zone texte) - .form-sp__select (select) - .form-sp__helper (aide sous champ) - .form-sp__error (message d'erreur) - .form-sp__row (ligne de champs) */ .form-sp__group { margin-bottom: var(--sp-space-5); } .form-sp__label { display: block; font-size: var(--sp-text-sm); font-weight: var(--sp-weight-medium); line-height: 1.4; color: var(--sp-text); margin-bottom: var(--sp-space-2); } .form-sp__label--required::after { content: " *"; color: var(--sp-accent); } .form-sp__input, .form-sp__textarea, .form-sp__select { display: block; width: 100%; min-height: 48px; padding: 0.7rem 1rem; border: 1.5px solid var(--sp-border); border-radius: var(--sp-radius-sm); background-color: var(--sp-bg); color: var(--sp-text); font-family: var(--sp-font-body); font-size: var(--sp-text-base); line-height: 1.5; transition: border-color var(--sp-transition-fast), box-shadow var(--sp-transition-fast); -webkit-appearance: none; appearance: none; } .form-sp__input::placeholder, .form-sp__textarea::placeholder { color: var(--sp-muted); } .form-sp__input:hover, .form-sp__textarea:hover, .form-sp__select:hover { border-color: rgba(16, 16, 16, 0.2); } .form-sp__input:focus, .form-sp__textarea:focus, .form-sp__select:focus { outline: none; border-color: var(--sp-primary); box-shadow: var(--sp-focus-ring); } .form-sp__textarea { min-height: 120px; resize: vertical; line-height: 1.6; } .form-sp__select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23747b86' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; } .form-sp__helper { font-size: var(--sp-text-xs); color: var(--sp-muted); margin-top: var(--sp-space-1); line-height: 1.4; } .form-sp__error { font-size: var(--sp-text-xs); color: var(--sp-accent-dark); margin-top: var(--sp-space-1); line-height: 1.4; } .form-sp__input.sp-has-error, .form-sp__textarea.sp-has-error, .form-sp__select.sp-has-error { border-color: var(--sp-accent); box-shadow: var(--sp-focus-ring-accent); } .form-sp__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-space-4); } @media (max-width: 575.98px) { .form-sp__row { grid-template-columns: 1fr; } } /* --- Respect prefers-reduced-motion --- */ @media (prefers-reduced-motion: reduce) { .form-sp__input, .form-sp__textarea, .form-sp__select { transition: none; } } /* ===================================================== 9. FOCUS ACCESSIBLE ===================================================== Cohérence du focus visible sur tous les éléments interactifs. Ne supprime pas les comportements clavier existants. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--sp-focus-ring); } /* Les éléments dont le focus est déjà géré proprement gardent un ring accentué pour l'action rouge */ .btn-sp:focus-visible, .card-sp__cta:focus-visible { outline: none; box-shadow: var(--sp-focus-ring); } /* Skip-to-content (à ajouter dans le HTML header) */ .sp-skip-link { position: absolute; top: -100%; left: var(--sp-space-4); z-index: 9999; padding: var(--sp-space-3) var(--sp-space-5); background-color: var(--sp-dark); color: #ffffff; font-weight: var(--sp-weight-semibold); text-decoration: none; border-radius: 0 0 var(--sp-radius-sm) var(--sp-radius-sm); transition: top var(--sp-transition-fast); } .sp-skip-link:focus { top: 0; } /* ===================================================== 10. RESPONSIVE FOUNDATIONS ===================================================== Utilities responsive pour les composants du design system. Travaille avec le grid Bootstrap existant. Breakpoints normalisés : - 576px (mobile → grand mobile) - 768px (mobile → tablette) - 992px (tablette → desktop) - 1200px (desktop → large) */ /* --- Visibilité responsive --- */ .sp-hide-mobile { display: block; } .sp-hide-desktop { display: none; } @media (max-width: 991.98px) { .sp-hide-mobile { display: none !important; } .sp-hide-desktop { display: block !important; } } /* --- Padding responsive --- */ .sp-py-responsive { padding-top: var(--sp-space-10); padding-bottom: var(--sp-space-10); } @media (max-width: 767.98px) { .sp-py-responsive { padding-top: var(--sp-space-6); padding-bottom: var(--sp-space-6); } } /* --- Gap responsive --- */ .sp-gap-responsive { gap: var(--sp-space-6); } @media (max-width: 767.98px) { .sp-gap-responsive { gap: var(--sp-space-4); } } /* --- Texte responsive --- */ .sp-text-responsive-center { text-align: center; } @media (max-width: 767.98px) { .sp-text-responsive-center { text-align: left; } } /* ===================================================== 11. MICRO-INTERACTIONS ===================================================== Subtiles améliorations d'interaction. INTERDIT : parallaxe, curseur custom, animations permanentes, gros zoom, gradients animés. */ /* --- Transitions de base sur les éléments interactifs --- */ a, button, .btn-sp, .card-sp, .card-sp__cta, .nav-link { transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } /* --- Respect prefers-reduced-motion --- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .card-sp:hover { transform: none; } } /* ===================================================== 12. UTILITIES COMPLÉMENTAIRES ===================================================== Petites classes utilitaires pour le design system. */ /* --- Espacement --- */ .sp-mt-0 { margin-top: 0; } .sp-mt-2 { margin-top: var(--sp-space-2); } .sp-mt-4 { margin-top: var(--sp-space-4); } .sp-mt-6 { margin-top: var(--sp-space-6); } .sp-mt-8 { margin-top: var(--sp-space-8); } .sp-mb-0 { margin-bottom: 0; } .sp-mb-2 { margin-bottom: var(--sp-space-2); } .sp-mb-4 { margin-bottom: var(--sp-space-4); } .sp-mb-6 { margin-bottom: var(--sp-space-6); } .sp-mb-8 { margin-bottom: var(--sp-space-8); } .sp-pt-0 { padding-top: 0; } .sp-pt-4 { padding-top: var(--sp-space-4); } .sp-pt-6 { padding-top: var(--sp-space-6); } .sp-pb-0 { padding-bottom: 0; } .sp-pb-4 { padding-bottom: var(--sp-space-4); } .sp-pb-6 { padding-bottom: var(--sp-space-6); } /* --- Alignement --- */ .sp-text-center { text-align: center; } .sp-text-left { text-align: left; } .sp-text-right { text-align: right; } /* --- Flex --- */ .sp-flex { display: flex; } .sp-flex-center { display: flex; align-items: center; justify-content: center; } .sp-flex-between { display: flex; align-items: center; justify-content: space-between; } .sp-flex-col { display: flex; flex-direction: column; } .sp-flex-wrap { flex-wrap: wrap; } .sp-gap-2 { gap: var(--sp-space-2); } .sp-gap-3 { gap: var(--sp-space-3); } .sp-gap-4 { gap: var(--sp-space-4); } .sp-gap-6 { gap: var(--sp-space-6); } /* --- Largeur --- */ .sp-w-full { width: 100%; } .sp-max-w-content { max-width: 720px; margin-left: auto; margin-right: auto; } /* --- Bordure --- */ .sp-border-top { border-top: 1px solid var(--sp-border); } .sp-border-bottom { border-bottom: 1px solid var(--sp-border); } /* --- Ombre --- */ .sp-shadow-none { box-shadow: none; } .sp-shadow-sm { box-shadow: var(--sp-shadow-sm); } .sp-shadow-md { box-shadow: var(--sp-shadow-md); } .sp-shadow-lg { box-shadow: var(--sp-shadow-lg); } /* --- Background --- */ .sp-bg-white { background-color: var(--sp-bg); } .sp-bg-soft { background-color: var(--sp-bg-soft); } .sp-bg-dark { background-color: var(--sp-dark); } /* --- Couleur --- */ .sp-color-primary { color: var(--sp-primary-dark); } .sp-color-accent { color: var(--sp-accent); } .sp-color-muted { color: var(--sp-muted); } .sp-color-white { color: #ffffff; } .sp-color-dark { color: var(--sp-dark); } /* --- Visually hidden (screen readers) --- */ .sp-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; } /* ===================================================== 13. FICHE PRODUIT (produit.php) — PHASE 3 ===================================================== Refonte UX/UI de la fiche produit B2B. Composants scopés à la page produit (via .sp-product-page). Aucune classe legacy modifiée ; aucun composant du design system existant n'est re-défini. Les tokens proviennent de sp-foundations.css et de ce fichier. */ /* --- Breadcrumb --- */ .sp-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-space-1); padding: var(--sp-space-5) 0 var(--sp-space-2); margin: 0; list-style: none; font-size: var(--sp-text-xs); } .sp-breadcrumb__item { display: inline-flex; align-items: center; } .sp-breadcrumb__item + .sp-breadcrumb__item::before { content: "\203A"; margin: 0 var(--sp-space-2); color: var(--sp-muted); } .sp-breadcrumb__link { color: var(--sp-primary-dark); text-decoration: none; padding: var(--sp-space-1) 0; } .sp-breadcrumb__link:hover, .sp-breadcrumb__link:focus { color: var(--sp-primary-dark); text-decoration: underline; } .sp-breadcrumb__current { color: var(--sp-muted); font-weight: var(--sp-weight-medium); } /* --- Hero produit : grille 2 colonnes --- */ .sp-product-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--sp-space-8); align-items: start; padding: var(--sp-space-4) 0 var(--sp-space-8); } /* Cadre image produit */ .sp-product-media { display: flex; align-items: center; justify-content: center; min-height: 340px; padding: var(--sp-space-5); background-color: var(--sp-bg); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg); box-shadow: var(--sp-shadow-sm); } .sp-product-media img { width: 100%; height: auto; max-height: 460px; object-fit: contain; } /* Colonne informations */ .sp-product-info { min-width: 0; } .sp-product__availability { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-space-2); margin: 0 0 var(--sp-space-4); } .sp-product__availability-label { text-transform: uppercase; letter-spacing: 0.04em; } /* --- Caractéristiques clés (Référence / Catégorie) --- */ .sp-feature-list { margin: var(--sp-space-5) 0 0; } .sp-feature-list__row { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: var(--sp-space-3); padding: var(--sp-space-3) 0; border-top: 1px solid var(--sp-border); } .sp-feature-list__row:last-child { border-bottom: 1px solid var(--sp-border); } .sp-feature-list__term { font-size: var(--sp-text-sm); font-weight: var(--sp-weight-semibold); color: var(--sp-text); } .sp-feature-list__desc { margin: 0; font-size: var(--sp-text-sm); color: var(--sp-text-body); } /* --- Actions CTA --- */ .sp-product__actions { display: flex; flex-wrap: wrap; gap: var(--sp-space-3); margin-top: var(--sp-space-6); } /* --- Réassurance (informations réelles du site) --- */ .sp-product__trust { display: flex; flex-wrap: wrap; gap: var(--sp-space-4) var(--sp-space-6); margin: var(--sp-space-5) 0 0; padding: 0; list-style: none; } .sp-product__trust-item { display: inline-flex; align-items: center; gap: var(--sp-space-2); font-size: var(--sp-text-sm); color: var(--sp-muted); } .sp-product__trust-item .mdi { color: var(--sp-primary); font-size: 1.1em; } .sp-product__trust-item a { color: var(--sp-text-body); text-decoration: none; } .sp-product__trust-item a:hover, .sp-product__trust-item a:focus { color: var(--sp-primary-dark); text-decoration: underline; } /* --- Barre CTA fixe mobile --- */ .sp-stickybar { display: none; } @media (max-width: 767.98px) { .sp-stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--sp-z-sticky); display: flex; gap: var(--sp-space-2); padding: var(--sp-space-3) var(--sp-space-4) calc(var(--sp-space-3) + env(safe-area-inset-bottom)); background-color: var(--sp-bg); border-top: 1px solid var(--sp-border); box-shadow: 0 -6px 18px -10px rgba(16, 16, 16, 0.18); } body:has(.sp-product-page) { padding-bottom: calc(76px + env(safe-area-inset-bottom)); } .sp-stickybtn { flex: 1; min-height: 52px; padding: 0.75rem 1rem; font-size: var(--sp-text-sm); white-space: normal; } } /* --- Responsive hero / zone info --- */ @media (max-width: 767.98px) { .sp-product-hero { grid-template-columns: 1fr; gap: var(--sp-space-5); padding: var(--sp-space-2) 0 var(--sp-space-6); } .sp-product-media { min-height: 0; padding: var(--sp-space-4); } .sp-product-media img { max-height: 320px; } } /* --- Mouvement réduit --- */ @media (prefers-reduced-motion: reduce) { .sp-product-media, .sp-stickybar, .sp-breadcrumb__link { transition: none; } } /* ===================================================== 14. CATALOGUE (produits.php) — PHASE 4 ===================================================== Refonte UI/UX de la page liste des produits : breadcrumb, navigation des familles, grille responsive et cartes alignees (titres complets, resume garde indexable). SCOPING : .sp-catalog-page — classe presente UNIQUEMENT sur produits.php. index.php conserve produits_sectionList.php et sa grille PHASE 02 (non concernee, aucun impact). Aucun composant existant re-defini : la carte repose sur .cartsignore (PHASE 02 de sp-foundations), etendue ici uniquement pour le contexte grille de la page catalogue. ===================================================== */ /* --- Navigation familles (ancres existantes #produits/#accessoires) --- */ .sp-catalog-page .sp-catalog-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-space-3); margin: clamp(1.25rem, 3.5vw, 2rem) 0 clamp(0.5rem, 1.5vw, 1rem); } .sp-catalog-page .sp-catalog-nav__link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.5rem 1.4rem; border: 1.5px solid var(--sp-border); border-radius: var(--sp-radius-pill); background-color: var(--sp-surface); color: var(--sp-text); font-size: var(--sp-text-xs); font-weight: var(--sp-weight-medium); letter-spacing: 0.04em; text-decoration: none; transition: border-color var(--sp-transition-fast), color var(--sp-transition-fast), background-color var(--sp-transition-fast); } .sp-catalog-page .sp-catalog-nav__link:hover, .sp-catalog-page .sp-catalog-nav__link:focus { border-color: var(--sp-primary); color: var(--sp-primary-dark); background-color: var(--sp-bg-soft); } .sp-catalog-page .sp-catalog-nav__link:focus-visible { outline: 2px solid var(--sp-primary); outline-offset: 2px; } /* --- Grille catalogue : 4 / 3 / 2 / 1 colonnes --- */ .sp-catalog-page .sp-catalog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2rem); } @media (max-width: 1199.98px) { .sp-catalog-page .sp-catalog-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 991.98px) { .sp-catalog-page .sp-catalog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .sp-catalog-page .sp-catalog-grid { grid-template-columns: 1fr; } } /* --- Cartes : pleine hauteur, carte studio, alignement bas --- */ .sp-catalog-card { display: flex; flex-direction: column; height: 100%; margin-bottom: 0; border: 1px solid var(--sp-border-soft); border-radius: var(--sp-radius-md); overflow: hidden; background: #ffffff; text-align: left; transition: transform var(--sp-transition), box-shadow var(--sp-transition), border-color var(--sp-transition); } .sp-catalog-card:hover, .sp-catalog-card:focus-within { transform: translateY(-4px); box-shadow: var(--sp-shadow-lg); border-color: var(--sp-border); } .sp-catalog-card__media { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3; padding: 0; background-color: #ffffff; border-bottom: 1px solid var(--sp-border-soft); overflow: hidden; } .sp-catalog-card__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; padding: 0.75rem; } .sp-catalog-card__placeholder { display: flex; align-items: center; justify-content: center; width: 100%; padding: 0.75rem; font-size: var(--sp-text-sm); color: var(--sp-muted); } .sp-catalog-card__body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1 1 auto; align-items: flex-start; } .sp-catalog-card__cat { display: block; font-size: var(--sp-text-xs); font-weight: var(--sp-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sp-primary-dark); margin-bottom: 0.5rem; } .sp-catalog-card__title { font-family: var(--sp-font-heading); font-size: 1.0625rem; line-height: 1.3; font-weight: var(--sp-weight-semibold); color: var(--sp-text); text-align: left; margin: 0 0 0.5rem; } .sp-catalog-card__text { display: block; -webkit-box-orient: vertical; font-size: 0.925rem; color: var(--sp-muted); text-align: left; margin-bottom: 1rem; } /* CTA carte : aligné en bas, langage Design System */ .sp-catalog-card__link { margin-top: auto; display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: var(--sp-weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--sp-primary-dark); text-decoration: none; padding-top: 0.5rem; } .sp-catalog-card__link .mdi { transition: transform var(--sp-transition-fast); } .sp-catalog-card:hover .sp-catalog-card__link .mdi, .sp-catalog-card:focus-within .sp-catalog-card__link .mdi { transform: translateX(3px); } .sp-catalog-card__link:hover, .sp-catalog-card__link:focus { color: var(--sp-primary); text-decoration: underline; } .sp-catalog-card__link:focus-visible { outline: 2px solid var(--sp-primary); outline-offset: 2px; border-radius: var(--sp-radius-sm); } /* --- Mouvement réduit (cartes) --- */ @media (prefers-reduced-motion: reduce) { .sp-catalog-card, .sp-catalog-card:hover, .sp-catalog-card:focus-within, .sp-catalog-card .sp-catalog-card__link .mdi { transform: none; transition: none; } } /* ===================================================== 15. RECHERCHE & FILTRES CATALOGUE — PHASE 5 ===================================================== Panneau recherche + famille + compteur/réinitialisation, et état « aucun résultat ». Compacité : le panneau est volontairement sobre (pas d'occupation de l'écran). SCOPING : .sp-catalog-page (produits.php uniquement). ===================================================== */ .sp-catalog-page .sp-catalog-tools { padding: var(--sp-space-5); margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem); background-color: var(--sp-bg-soft); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg); } .sp-catalog-page .sp-catalog-search__label { display: block; margin-bottom: var(--sp-space-2); font-size: var(--sp-text-sm); font-weight: var(--sp-weight-medium); color: var(--sp-text); } .sp-catalog-page .sp-catalog-search__row { display: flex; align-items: stretch; gap: var(--sp-space-3); } .sp-catalog-page .sp-catalog-search__input { flex: 1 1 320px; min-width: 150px; } .sp-catalog-page .sp-catalog-search .btn-sp { flex: 0 0 auto; min-height: 48px; } /* Pills familles : alignés à gauche dans le panneau (pas de grand margin) */ .sp-catalog-page .sp-catalog-tools .sp-catalog-nav { justify-content: flex-start; margin: var(--sp-space-4) 0 0; } /* Famille active (même identité que le CTA principal : rouge + blanc). PHASE 17 — correctif WCAG : le blanc sur --sp-accent (#fe1b24) ne donnait que 3.89:1 pour ce texte de 13 px, sous le minimum AA de 4.5:1. Bascule sur --sp-accent-dark (#d50f1c) : 5.36:1, meme identité rouge que le CTA principal, aucun token redefini. */ .sp-catalog-page .sp-catalog-nav__link.is-active, .sp-catalog-page .sp-catalog-nav__link.is-active:hover, .sp-catalog-page .sp-catalog-nav__link.is-active:focus { background-color: var(--sp-accent-dark); border-color: var(--sp-accent-dark); color: #ffffff; } /* Compteur + réinitialisation */ .sp-catalog-page .sp-catalog-tools__meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-space-3); margin-top: var(--sp-space-4); padding-top: var(--sp-space-4); border-top: 1px solid var(--sp-border-soft); } .sp-catalog-page .sp-catalog-count { font-size: var(--sp-text-sm); font-weight: var(--sp-weight-medium); color: var(--sp-text-body); } /* État « aucun résultat » : neutre, pas de contenu SEO inventé */ .sp-catalog-page .sp-catalog-empty { text-align: center; padding: clamp(2.5rem, 6vw, 4rem) var(--sp-space-5); border: 1px dashed var(--sp-border); border-radius: var(--sp-radius-lg); background-color: var(--sp-surface); } .sp-catalog-page .sp-catalog-empty__title { font-family: var(--sp-font-heading); font-size: var(--sp-text-xl); font-weight: var(--sp-weight-semibold); color: var(--sp-text); margin-bottom: var(--sp-space-2); } .sp-catalog-page .sp-catalog-empty__text { color: var(--sp-muted); margin-bottom: var(--sp-space-5); } /* --- Mobile : recherche empilée, bouton pleine largeur --- */ @media (max-width: 575.98px) { .sp-catalog-page .sp-catalog-tools { padding: var(--sp-space-4); } .sp-catalog-page .sp-catalog-search__row { flex-direction: column; align-items: stretch; } .sp-catalog-page .sp-catalog-search .btn-sp { width: 100%; } .sp-catalog-page .sp-catalog-tools .sp-catalog-nav { justify-content: flex-start; } } /* ========================================================= PHASE 6 — Breadcrumb & Footer Mobile ========================================================= Affinement cible du fil d'Ariane (.sp-breadcrumb) et du pied de page (.footersignore) : - contraste AA de la page courante du breadcrumb ; - robustesse anti-debordement pour intitules longs ; - contraste AA du lien actif du footer (token existant). Aucune palette ajoutee, aucune URL modifiee, aucun contenu duplique. La structure ""nav aria-label"" du catalogue a ete alignee sur celle de la fiche produit (accessibilite). ========================================================= */ /* --- Breadcrumb : page courante + lisible (AA) --- Avant : --sp-muted (#747b86) sur fond clair = 4.27:1 (< 4.50 AA). Apres : token existant --sp-text-body (#3f596c) = 7.35:1. Le lien (--sp-primary-dark) reste la seule reference bleue ; la page courante reste la seule avec graisse 500. */ .sp-breadcrumb__current { color: var(--sp-text-body); } /* --- Breadcrumb : robustesse avec intitules longs (flex min-width:0 + divise les mots : aucun overflow horizontal, meme pour un titre non coupe sur un seul mot). */ .sp-breadcrumb__item { min-width: 0; } .sp-breadcrumb__current { max-width: 100%; overflow-wrap: break-word; } /* ========================================================= PHASE 11 — Fiabilite B2B (produit.php) ========================================================= 1) Etat "produit introuvable" (HTTP 404) : bloc centre avec actions claires vers le catalogue et l'accueil. Tokens et classes existants uniquement. 2) Onglets Description / Fiche technique : semantique ARIA (role/aria-selected/aria-controls/tabpanel) portee par le HTML ; Bootstrap 4.4 synchronise aria-selected ; le roving tabindex et l'activation clavier sont geres par js/script.js. Aucun style d'onglet existant n'est modifie. 3) Disponibilite : plus aucun badge "En stock" (aucune donnee de stock en base) ; texte simple "sur devis". Aucun style ajoute pour ce composant. */ .sp-404__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-space-3); } /* ========================================================= PHASE 9 — Accessibilite AA par ECHANGE DE TOKENS ========================================================= Meme logique que sp-foundations.css (aucun token palette modifie) : echange des usages texte qui echouaient l'AA. Mesures (WCAG relative luminance) : - --sp-primary sur blanc = 4.17:1 (< 4.5 texte normal) -> echange vers --sp-primary-dark (#016ece) : 6.40:1 AA - blanc sur --sp-primary = 4.17:1 (< 4.5) -> fonds pleins passes sur --sp-primary-dark : 6.40:1 AA - --sp-muted-2 (#9a9899) = 3.16:1 (< AA) -> --sp-muted (#747b86) : 5.10:1 AA Echanges operes (ce fichier / sp-design-system.css) : - .btn-sp-secondary (fond+filet) -> --sp-primary-dark - .btn-sp-outline (texte) -> --sp-primary-dark (filet conserve : 4.17:1 >= 3:1 composants non-texte OK) - .btn-sp-outline:hover (fond) -> --sp-primary-dark - .btn-sp-ghost (texte) -> --sp-primary-dark - .sp-color-primary (utilitaire texte) -> --sp-primary-dark - placeholders .form-sp et separateur .sp-breadcrumb (::before) : --sp-muted-2 -> --sp-muted - .sp-breadcrumb__link:focus / .sp-product__trust-item a:hover/:focus / .sp-catalog-nav__link:hover/:focus : --sp-primary -> --sp-primary-dark Conformes deja : .btn-sp-primary (blanc sur --sp-accent = 4.55:1 AA), titres grands (3:1), icones (>= 3:1). */ /* ========================================================= PHASE 13 — PRODUITS ASSOCIÉS (produit.php) ========================================================= La section "Produits associés" réutilise la grille et les cartes catalogue (.sp-catalog-grid / .cartsignore) pour rester fidèle au Design System. Ce bloc aligne la grille sur la section .sp-related (produit.php) à la même grille que .sp-catalog-page. Aucun composant, token ou couleur nouveau — duplication minimale des media queries du catalogue pour assurer 4/3/2/1 colonnes. */ /* --- Grille associés : même comportement que catalogue --- */ .sp-product-page .sp-related .sp-catalog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2rem); } @media (max-width: 1199.98px) { .sp-product-page .sp-related .sp-catalog-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 991.98px) { .sp-product-page .sp-related .sp-catalog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .sp-product-page .sp-related .sp-catalog-grid { grid-template-columns: 1fr; } } /* --- Cartes : pleine hauteur et alignées (reprise catalogue) --- */ .sp-product-page .sp-related .sp-catalog-grid .sp-catalog-card { display: flex; flex-direction: column; height: 100%; margin-bottom: 0; } /* ========================================================= 17. PHASE 03 — HEADER / TOPBAR / NAVIGATION / FOOTER Identité « Industrial Premium / Modern B2B ». Refonte header.php + footer.php (marquage dédié .sp-*). La base visuelle est livrée par sp-foundations.css (PHASE 07/08) via les classes conservées (.bartop, #myHeader, #navbarTogglerDemo02, .btnsignore) ; ce bloc complète l'assemblage (topbar, footer, bouton retour en haut). Bootstrap 4.4.1 intact : collapse mobile + modale #fomrModalDevis inchangés. ========================================================= */ /* ---------- 17.1 TOPBAR : assemblage premium ---------- */ .sp-topbar__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; column-gap: 1.5rem; row-gap: 0.25rem; min-height: 44px; padding: 0.35rem 0; } .sp-topbar__links { display: inline-flex; align-items: center; flex-wrap: wrap; column-gap: 1.5rem; row-gap: 0.15rem; } .sp-topbar__link { column-gap: 0.5rem; color: rgba(255, 255, 255, 0.86); font-weight: 500; } .sp-topbar__info { display: inline-flex; align-items: center; column-gap: 0.5rem; color: rgba(255, 255, 255, 0.66); white-space: nowrap; } @media (max-width: 767.98px) { .sp-topbar__inner { justify-content: center; } .sp-topbar__info { display: none; } } /* ---------- 17.2 NAVBAR : logo & CTA ---------- */ .sp-navbar .container { flex-wrap: nowrap; } /* Menu aligné à droite (demande client : navigation plaquée à droite). sp-foundations.css met flex-grow:1 + justify-content:flex-end sur l'ID #navbarTogglerDemo02 : le collapse remplit toute la largeur mais son contenu restait collé à gauche. Ici on neutralise flex-grow pour que margin-left:auto plaque réellement nav + CTA à droite. */ @media (min-width: 992px) { #navbarTogglerDemo02 { flex-grow: 0; margin-left: auto; justify-content: flex-end; } } .sp-navbar__brand img { display: block; width: 122px; height: auto; margin: 0; } @media (max-width: 991.98px) { .sp-navbar__brand img { width: 104px; } } /* CTA devis du header : icône alignée dans le flux flex. La mise en forme (pilule rouge) vient de .btnsignore. */ .sp-navbar__cta { display: inline-flex; align-items: center; justify-content: center; column-gap: 0.5rem; min-height: 48px; margin-left: 0; } .sp-navbar__cta .mdi { font-size: 1.15rem; line-height: 1; } /* ---------- 17.3 FOOTER PREMIUM (Industrial B2B) ---------- */ .sp-footer { background-color: var(--sp-dark); color: rgba(255, 255, 255, 0.82); border-top: 3px solid var(--sp-primary); } .sp-footer a { color: rgba(255, 255, 255, 0.82); text-decoration: none; transition: color var(--sp-transition); } .sp-footer a:hover, .sp-footer a:focus { color: #ffffff; text-decoration: none; } .sp-footer a:focus-visible { outline: 2px solid var(--sp-primary-light); outline-offset: 2px; } /* --- Bloc principal --- */ .sp-footer__main { padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(2.25rem, 4vw, 3rem); } .sp-footer__grid { row-gap: 2.5rem; } .sp-footer__brand .sp-footer__logo { display: block; max-width: 176px; height: auto; margin-bottom: 1.25rem; } .sp-footer__tagline { max-width: 30ch; margin-bottom: 0; color: rgba(255, 255, 255, 0.92); font-size: 1rem; font-weight: 600; line-height: 1.55; } /* --- Titres de colonnes --- */ .sp-footer__title { margin-bottom: 1.25rem; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(255, 255, 255, 0.14); color: #ffffff; font-size: 1rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; } /* --- Listes --- */ .sp-footer__list { margin: 0; padding: 0; list-style: none; } .sp-footer__list li { margin-bottom: 0.5rem; } .sp-footer__list a { display: inline-block; padding: 0.15rem 0; line-height: 1.5; } .sp-footer__list a.footerlinkactive { color: var(--sp-primary-light); font-weight: 600; } /* --- Bloc contact : icônes + micro-hiérarchie --- */ .sp-footer__list--contact li { margin-bottom: 1rem; } .sp-footer__contact-row { display: flex; align-items: flex-start; column-gap: 0.8rem; } .sp-footer__contact-row > .mdi { flex: none; margin-top: 0.15rem; color: var(--sp-primary-light); font-size: 1.2rem; line-height: 1.4; } .sp-footer__contact-body { display: block; } .sp-footer__contact-label { display: block; margin-bottom: 0.1rem; color: rgba(255, 255, 255, 0.55); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .sp-footer__contact-link { display: inline-block; word-break: break-word; } .sp-footer__contact-link--plain { color: rgba(255, 255, 255, 0.9); line-height: 1.5; } /* --- Barre inférieure --- */ .sp-footer__bottom { padding: 1rem 0; background-color: var(--sp-dark-2); border-top: 1px solid rgba(255, 255, 255, 0.1); } .sp-footer__bottom-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; column-gap: 1.5rem; row-gap: 0.4rem; font-size: var(--sp-text-xs); } .sp-footer__copy { color: rgba(255, 255, 255, 0.72); } .sp-footer__sub { color: rgba(255, 255, 255, 0.5); } /* ---------- 17.4 RETOUR EN HAUT (back-to-top) ---------- */ .sp-backtop { position: fixed; right: 1.25rem; bottom: 1.5rem; z-index: var(--sp-z-sticky); display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--sp-border); border-radius: 50%; background-color: #ffffff; color: var(--sp-text); box-shadow: var(--sp-shadow-md); opacity: 0; visibility: hidden; transform: translateY(10px); cursor: pointer; transition: opacity var(--sp-transition), visibility var(--sp-transition), transform var(--sp-transition), background-color var(--sp-transition), color var(--sp-transition); } .sp-backtop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .sp-backtop:hover, .sp-backtop:focus { background-color: var(--sp-primary-dark); border-color: var(--sp-primary-dark); color: #ffffff; } .sp-backtop:focus-visible { outline: 2px solid var(--sp-primary); outline-offset: 2px; } .sp-backtop .mdi { font-size: 1.4rem; line-height: 1; } /* Ne chevauche pas la barre CTA fixe mobile des fiches produit */ @media (max-width: 767.98px) { body:has(.sp-stickybar) .sp-backtop { bottom: calc(84px + env(safe-area-inset-bottom)); } } /* --- Mouvement réduit --- */ @media (prefers-reduced-motion: reduce) { .sp-topbar a, .sp-topbar__link, .sp-footer a, .sp-backtop { transition: none; } } /* ========================================================= PHASE 04 — HOMEPAGE PREMIUM INDUSTRIEL (index.php) ========================================================= Refonte de la page d'accueil : nouveau héro (fond sombre, image d'atelier réelle img/seige.*), bandeau partenaires réel, section à propos, vidéo (modale existante #myModal), produits/accessoires dynamiques (produits_sectionList.php, cartes .sp-catalog-card scopes HOME), bande CTA finale et contact épuré. Tokens du design system uniquement, aucune nouvelle palette. Bootstrap 4.4 intact. ========================================================= */ /* --- Eyebrow (sur-titre de section) --- */ .sp-eyebrow { display: inline-flex; align-items: center; gap: 0.625rem; font-family: var(--sp-font-marker); font-size: 0.8125rem; font-weight: var(--sp-weight-semibold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sp-accent); margin: 0 0 0.75rem; } .sp-eyebrow::before { content: ""; width: 1.75rem; height: 2px; border-radius: 2px; background-color: var(--sp-accent); } .sp-eyebrow--light { color: var(--sp-primary-light); } .sp-eyebrow--light::before { background-color: var(--sp-primary-light); } /* --- Héro accueil --- */ .sp-hero { background-color: var(--sp-dark); background-image: radial-gradient(1100px 520px at 85% -10%, rgba(2, 134, 250, 0.16), transparent 62%), radial-gradient(760px 420px at -10% 110%, rgba(254, 27, 36, 0.10), transparent 60%); color: #ffffff; padding: clamp(4rem, 7vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem); } .sp-hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; } .sp-hero__eyebrow { color: var(--sp-primary-light); } .sp-hero__eyebrow::before { background-color: var(--sp-primary-light); } .sp-hero__title { font-family: var(--sp-font-heading); font-size: clamp(2.35rem, 4.6vw, 3.75rem); line-height: 1.08; letter-spacing: -0.02em; font-weight: var(--sp-weight-bold); color: #ffffff; text-align: left; margin: 0 0 1.25rem; } .sp-hero__accent--red { color: var(--sp-accent); } .sp-hero__accent--blue { color: var(--sp-primary-light); } .sp-hero__lead { font-size: var(--sp-text-lg); line-height: var(--sp-leading-normal); color: rgba(255, 255, 255, 0.82); max-width: 34rem; margin: 0 0 1.75rem; } .sp-hero__actions { display: flex; flex-wrap: wrap; gap: 0.875rem; } .sp-hero__actions .sp-hero__btn { min-height: 52px; padding: 0.875rem 1.875rem; } .sp-hero__points { list-style: none; display: grid; gap: 0.5rem; margin: 1.75rem 0 0; padding: 0; } .sp-hero__points li { display: flex; align-items: center; gap: 0.5rem; color: rgba(255, 255, 255, 0.86); font-size: 0.9375rem; } .sp-hero__points .mdi { color: var(--sp-accent); font-size: 1.1rem; } .sp-hero__frame { position: relative; margin: 0; } .sp-hero__frame::before { content: ""; position: absolute; inset: -14px 14px 14px -14px; border: 2px solid var(--sp-primary); border-radius: var(--sp-radius-lg); opacity: 0.55; } .sp-hero__img { position: relative; display: block; width: 100%; max-width: 470px; margin-left: auto; border-radius: var(--sp-radius-lg); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 34px 70px -28px rgba(0, 0, 0, 0.6); } /* --- PHASE 11 — Héro : composition produits PVC premium --- */ .sp-hero__products { position: relative; margin: 0; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(0.75rem, 1.5vw, 1.25rem); max-width: 470px; margin-left: auto; align-items: start; } .sp-hero__products__main, .sp-hero__products__card { position: relative; display: flex; flex-direction: column; background-color: #ffffff; border-radius: var(--sp-radius-lg); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 34px 70px -28px rgba(0, 0, 0, 0.6); overflow: hidden; } .sp-hero__products__media { position: relative; flex: 0 1 auto; width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background-color: #ffffff; overflow: hidden; } .sp-hero__products__img { display: block; width: 100%; height: 100%; object-fit: contain; } .sp-hero__products__label { flex: 0 0 auto; padding: 0.625rem 0.75rem 0.75rem; font-size: 0.6875rem; line-height: 1.35; letter-spacing: 0.06em; text-transform: uppercase; font-weight: var(--sp-weight-semibold); color: var(--sp-text); border-top: 1px solid var(--sp-border-soft); background-color: #ffffff; } .sp-hero__products__side { display: flex; flex-direction: column; gap: clamp(0.75rem, 1.5vw, 1.25rem); min-height: 0; } .sp-hero__products__main .sp-hero__products__label { color: var(--sp-accent-dark); } .sp-hero__products__main .sp-hero__products__label::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: var(--sp-accent); margin-right: 0.5rem; vertical-align: middle; } /* Le cadre décoratif décalé du héro (frame::before) se superposerait aux cartes produits : on le neutralise pour la composition. */ .sp-hero__frame.sp-hero__products::before { content: none; } /* --- Bandeau partenaires (logos réels) --- */ .sp-home-partners { background-color: #ffffff; border-bottom: 1px solid var(--sp-border-soft); padding: 0.625rem 0; overflow: hidden; display: none; } .sp-home-partners .scroll-left { margin-bottom: 0; height: auto; } /* --- Section À propos --- */ .sp-home-about { background-color: #ffffff; } .sp-home-about__media { margin: 0 0 1.5rem; } .sp-home-about__img { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; border-radius: var(--sp-radius-lg); box-shadow: var(--sp-shadow-lg); } .sp-home-about__title { font-family: var(--sp-font-heading); font-size: var(--sp-text-3xl); line-height: var(--sp-leading-tight); letter-spacing: -0.01em; font-weight: var(--sp-weight-bold); color: var(--sp-text); text-align: left; margin: 0 0 1.25rem; } .sp-home-about__text { color: var(--sp-text-body); line-height: var(--sp-leading-relaxed); margin-bottom: 1rem; } .sp-home-about__cta { margin-top: 0.5rem; } /* --- Section savoir-faire / vidéo --- */ .sp-home-video__title { font-family: var(--sp-font-heading); font-size: var(--sp-text-3xl); font-weight: var(--sp-weight-bold); color: #ffffff; letter-spacing: -0.01em; margin-bottom: 0.5rem; } .sp-home-video__sub { color: rgba(255, 255, 255, 0.72); max-width: 640px; margin: 0 auto clamp(1.5rem, 3vw, 2.25rem); } .sp-home-video__slide .sp-home-video__play { position: relative; display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; } .sp-home-video__slide img { display: block; width: 100%; } .sp-home-video__playicon { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: rgba(255, 255, 255, 0.94); color: var(--sp-accent); box-shadow: var(--sp-shadow-md); transition: transform var(--sp-transition-fast), background-color var(--sp-transition); } .sp-home-video__playicon .mdi { font-size: 2rem; margin-left: 0.2rem; } .sp-home-video__play:hover .sp-home-video__playicon, .sp-home-video__play:focus-visible .sp-home-video__playicon { background-color: #ffffff; transform: scale(1.07); } .sp-home-video__play:focus-visible { outline: 2px solid var(--sp-primary-light); outline-offset: 3px; border-radius: var(--sp-radius-lg); } /* --- Produits / accessoires (HOME) --- */ .sp-home-products__section { padding: clamp(3rem, 7vw, 5rem) 0; } .sp-home-products__section--soft { background-color: var(--sp-bg-soft); margin-top: clamp(2.5rem, 6vw, 4rem); } .sp-home-products__title { font-family: var(--sp-font-heading); font-size: var(--sp-text-2xl); font-weight: var(--sp-weight-bold); letter-spacing: -0.01em; color: var(--sp-text); text-align: center; margin: 0 0 clamp(1.5rem, 4vw, 2.5rem); } .sp-home-products__title::after { content: ""; display: block; width: 56px; height: 3px; border-radius: 2px; background-color: var(--sp-accent); margin: 0.75rem auto 0; } .sp-home-products__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); } .sp-home-products__grid .sp-catalog-card { height: 100%; } .sp-home-products__more { display: flex; justify-content: center; margin-top: 2rem; } /* --- Bande CTA finale --- */ .sp-home-cta { background-color: var(--sp-dark); background-image: radial-gradient(820px 360px at 50% 120%, rgba(2, 134, 250, 0.18), transparent 70%); color: #ffffff; text-align: center; padding: clamp(3rem, 7vw, 5rem) 0; } .sp-home-cta__title { font-family: var(--sp-font-heading); font-size: var(--sp-text-3xl); font-weight: var(--sp-weight-bold); color: #ffffff; letter-spacing: -0.01em; margin-bottom: 0.75rem; } .sp-home-cta__text { color: rgba(255, 255, 255, 0.8); max-width: 640px; margin: 0 auto clamp(1.5rem, 4vw, 2rem); } /* --- Contact --- */ /* PHASE 18 : le titre de section du Contact est desormais un H2 (.sp-home-contact__title) et son sous-titre un H3 classe (.sp-home-contact__side__title) ; l'ancienne regle `.sp-home-contact h3` (22 px, rouge, majuscules) capturait ce nouveau H3 et annulait l'echelle unifiee — elle est donc supprimee. formContact/contactform.php ne contient aucun heading (verifie), rien n'autre n'etait concerne. */ .sp-home-contact__side h4, .sp-home-contact__side__title { font-family: var(--sp-font-heading); font-size: 1.375rem; line-height: var(--sp-leading-snug); font-weight: var(--sp-weight-semibold); color: var(--sp-text); margin-bottom: 1.25rem; } .sp-home-contact__phone a { font-family: var(--sp-font-heading); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: var(--sp-weight-bold); color: var(--sp-primary-dark); text-decoration: none; } .sp-home-contact__phone a:hover, .sp-home-contact__phone a:focus { color: var(--sp-primary); } .sp-home-contact__list { list-style: none; margin: 1.5rem 0 0; padding: 0; } .sp-home-contact__item { display: flex; align-items: flex-start; gap: 0.75rem; color: var(--sp-text-body); line-height: var(--sp-leading-normal); margin-bottom: 0.9rem; } .sp-home-contact__item a { color: var(--sp-primary-dark); text-decoration: none; } .sp-home-contact__item a:hover, .sp-home-contact__item a:focus { color: var(--sp-primary); text-decoration: underline; } .sp-home-contact__item .mdi { font-size: 1.35rem; color: var(--sp-accent); } /* --- Zone mots-clés (SEO) --- */ .sp-home-seo { padding: 1.5rem 0 2.5rem; } .sp-home-seo p { font-size: 0.8125rem; line-height: 1.8; text-align: center; color: var(--sp-muted); margin: 0; } /* --- Responsive HOME --- */ @media (max-width: 991.98px) { .sp-hero__inner { grid-template-columns: 1fr; } .sp-hero__frame { max-width: 420px; margin: 0 auto; } .sp-hero__products { max-width: 460px; margin: 0 auto; } .sp-home-products__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767.98px) { .sp-hero { padding: 3rem 0; } .sp-hero__actions { flex-direction: column; align-items: stretch; } .sp-home-products__grid { grid-template-columns: repeat(2, 1fr); } .sp-home-contact__side { margin-top: 2.5rem; } } @media (max-width: 575.98px) { .sp-hero__title { font-size: 2.15rem; } .sp-hero__products { grid-template-columns: 1fr; } .sp-hero__products__side { display: grid; grid-template-columns: repeat(2, 1fr); } .sp-home-products__grid { grid-template-columns: 1fr; } .sp-home-about__title { font-size: 1.75rem; } .sp-home-video__title, .sp-home-cta__title { font-size: 1.75rem; } } /* --- Mouvement réduit HOME --- */ @media (prefers-reduced-motion: reduce) { .sp-home-partners .logozone { animation: none !important; width: auto; flex-wrap: wrap; justify-content: center; } .sp-home-products__grid .sp-catalog-card:hover, .sp-home-products__grid .sp-catalog-card:focus-within { transform: none; } .sp-hero__img, .sp-home-about__img, .sp-home-video__playicon { transition: none; } } /* ===================================================== PHASE 05 — PAGE INTRO CATALOGUE (produits.php) ===================================================== Introduction de la page catalogue : bandeau sombre aligné sur l'identité « Industrial Premium » de la homepage (eyebrow / H1 / lead — même logique que le héro Phase 04). Aucun token, aucune couleur ni composant ajouté. ===================================================== */ .sp-page-intro { background-color: var(--sp-dark); background-image: radial-gradient(900px 420px at 85% -20%, rgba(2, 134, 250, 0.16), transparent 60%), radial-gradient(620px 360px at -10% 120%, rgba(254, 27, 36, 0.10), transparent 60%); color: #ffffff; padding: clamp(3.5rem, 6vw, 7rem) 0; margin-bottom: clamp(1.25rem, 3vw, 2rem); text-align: center; } .sp-page-intro__title { font-family: var(--sp-font-heading); font-size: clamp(2.125rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; font-weight: var(--sp-weight-bold); color: #ffffff; margin: 0 0 0.75rem; } .sp-page-intro__lead { font-size: var(--sp-text-lg); line-height: var(--sp-leading-normal); color: rgba(255, 255, 255, 0.82); max-width: 44rem; margin: 0 auto; } @media (prefers-reduced-motion: reduce) { .sp-page-intro { transition: none; } } /* ===================================================== PHASE 13 — MODALE « DEMANDE DE DEVIS » (#fomrModalDevis) ===================================================== Optimisation UX du formulaire rendu par formDevis/devisform.php : gabarit resserré (header compact, champs 54px, Produit/Quantité 50/50 au desktop et empilés ≤ 575), toasts vides masqués, neutralisation des restes legacy de style.css (padding latéral 100px, margin-left 13 %, .modal décalé à width:90 %), focus visible bleu marque sur champs et actions. Déclarations scopées .fomrModal → aucun impact sur les autres modales, le header ni la page contact. ===================================================== */ /* 13.1 — GABARIT : largeur cible raisonnable (le legacy forçait 800px). */ .fomrModal .modal-dialog { max-width: 680px; } /* 13.2 — ENTÊTE COMPACT : titre aligné à gauche, bouton fermer intégré au flux (le legacy le plaçait en absolute et centrait via 13 %). */ .fomrModal .modal-header { padding: 1.25rem 1.5rem 1.05rem; align-items: center; } .fomrModal .modal-title { margin-left: 0; text-align: left; } .fomrModal .modal-header .close { position: static; right: auto; top: auto; z-index: auto; font-size: 1.75rem; line-height: 1; padding: 0.25rem; color: var(--sp-muted); opacity: 1; transition: color var(--sp-transition); } .fomrModal .modal-header .close:hover { color: var(--sp-text); } /* 13.3 — CORPS : padding propre du formulaire au lieu du legacy 30px ajouté au padding 15px du .container Bootstrap. */ .fomrModal .modal-body .container { padding-left: 0; padding-right: 0; } .fomrModal .modal-body form { padding: 1.5rem 1.5rem 0.75rem; } /* 13.4 — TOASTS : masqués tant qu'aucun message n'est affiché (Bootstrap 4 les laisse à opacity:0 → constante ~35px au-dessus du formulaire). Rétablis en display block lorsqu'ils sont .show. */ .fomrModal .toast:not(.showing):not(.show) { display: none; } .fomrModal .toast.show { display: block; } /* 13.5 — CHAMPS : hauteurs cibles et suppression du margin-bottom legacy « .modal-body input { margin-bottom: 20px } » : l'espace vertical vient du .form-group, pas d'un cumul des deux. */ .fomrModal .modal-body form .form-control { min-height: 54px; padding: 0.65rem 0.95rem; font-size: 0.95rem; } .fomrModal .modal-body form textarea.form-control { min-height: 8.25rem; /* ~132px */ resize: vertical; } .fomrModal .modal-body form input, .fomrModal .modal-body form textarea, .fomrModal .modal-body form select { margin-bottom: 0; } .fomrModal .modal-body form .form-group { margin-bottom: 1rem; } /* 13.6 — CHAMPS PRODUIT / QUANTITÉ : 50/50 ≥ 576, empilés en dessous. */ .fomrModal .modal-body form .row { margin-left: -0.75rem; margin-right: -0.75rem; } .fomrModal .modal-body form .row .col-lg-6 { flex: 0 0 50%; max-width: 50%; padding-left: 0.75rem; padding-right: 0.75rem; } @media (max-width: 575.98px) { .fomrModal .modal-body form .row { margin-left: 0; margin-right: 0; } .fomrModal .modal-body form .row .col-lg-6 { flex: 0 0 100%; max-width: 100%; padding-left: 0; padding-right: 0; } } /* 13.7 — PIED : boutons alignés à droite, seconde action en pilule neutre cohérente avec l'action principale (46px). */ .fomrModal .modal-footer { padding: 1.1rem 1.5rem 1.25rem; gap: 0.75rem; } .fomrModal .modal-footer .btn.btncloseform.btn-secondary { min-height: 46px; padding: 0.6rem 1.6rem; border-radius: var(--sp-radius-pill); border: 2px solid var(--sp-border); background-color: #ffffff; color: var(--sp-text-body); font-weight: 600; } .fomrModal .modal-footer .btn.btncloseform.btn-secondary:hover { background-color: var(--sp-bg-soft); border-color: var(--sp-border-strong); } /* 13.8 — FOCUS VISIBLE (WCAG 2.4.7) sur champs et actions. */ .fomrModal .modal-body form .form-control:focus { outline: none; border-color: var(--sp-primary); box-shadow: var(--sp-focus-ring); } .fomrModal .modal-footer button:focus-visible { outline: none; box-shadow: var(--sp-focus-ring); } /* 13.9 — RESPONSIVE ≤ 770 : neutralise le décalage legacy de l'overlay « .modal { width: 90 %; margin-left: 3 % } » et l'en-tête sans padding. */ @media (max-width: 769.98px) { .fomrModal.modal { width: 100%; margin-left: 0; } .fomrModal .modal-header { padding: 1rem 1.25rem 0.9rem; } .fomrModal .modal-title { padding: 0; } } /* ===================================================== PHASE 14 — SECTION « À PROPOS » : STYLE ÉLÉGANT (index.php — .sp-home-about « Une expertise au service de vos projets ») ===================================================== Retouche purement cosmétique, SANS changement de markup (aucun

ni

ni attribut modifié) et SANS changement backend. Styles scopés sous .sp-home-about afin de ne toucher ni au header, ni au pied de page, ni aux autres modales. On réutilise exclusivement les tokens vérifiés de sp-foundations.css / sp-design-system.css. Le bloc se contente d'enrichir : eyebrow (filet + lettrage), titre (filet décoratif), paragraphes (corps, justification douce, ligatures, retrait de première ligne) et CTA. ===================================================== */ /* 14.1 — Eyebrow : filet décoratif avant + lettrage aéré */ .sp-home-about .sp-eyebrow { display: inline-flex; align-items: center; gap: 0.625rem; letter-spacing: 0.16em; color: var(--sp-accent); } .sp-home-about .sp-eyebrow::before { content: ""; width: 1.75rem; height: 2px; border-radius: var(--sp-radius-pill); background-color: var(--sp-accent); flex: 0 0 auto; } /* 14.2 — Titre : filet décoratif sous le titre */ .sp-home-about__title { position: relative; padding-bottom: 1.25rem; } .sp-home-about__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 3.5rem; height: 3px; border-radius: var(--sp-radius-pill); background-color: var(--sp-accent); } /* 14.3 — Paragraphes : corps élégant, lecture confortable */ .sp-home-about__text { color: var(--sp-text-body); font-size: var(--sp-text-base); line-height: var(--sp-leading-relaxed); font-weight: var(--sp-weight-regular); letter-spacing: 0.005em; margin-bottom: 1.15rem; } /* 14.4 — Premier paragraphe en exergue (plus grand, plus aéré) */ .sp-home-about__text:first-of-type { font-size: var(--sp-text-lg); line-height: var(--sp-leading-normal); color: var(--sp-text); font-weight: var(--sp-weight-semibold); } /* ========================================================================== PHASE 14 - SYSTEME DE VISUELS ABSTRAITS HOME (append CSS pur, 14.5) -------------------------------------------------------------------------- Scope : .sp-home-visual (package de presentation des visuels abtraits industriels inseres dans les sections editoriales de la home). Reutilise EXCLUSIVEMENT les tokens sp-foundations / sp-design-system (--sp-primary, --sp-accent, --sp-bg-soft, --sp-radius-*, --sp-shadow-*, --sp-leading-*, --sp-gutter-*). Aucun nouveau emoji/graphique en dur. Aucune regle ne touche header/footer/hero/backend. Decortatif : les figures sont aria-hidden, images alt="" decoratives. Rythme : alternance VISUEL/TEXTE selon la section (via l ordre DOM ; ce fichier ne fait qu habiller le package .sp-home-visual). ========================================================================== */ /* 14.5.1 - Conteneur figure du visuel : proportions 16:9, coins doux */ .sp-home-visual { display: block; margin: 0; border-radius: var(--sp-radius-lg); overflow: hidden; background: var(--sp-bg-soft); box-shadow: var(--sp-shadow-sm); } .sp-home-visual__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; } /* 14.5.2 - Emplacement du visuel dans chaque grande section (alternance) */ .sp-home-about__visual { order: 2; } /* TEXTE | VISUEL */ .sp-home-products__visual { order: 2; } /* TEXTE | VISUEL */ .sp-home-partners__visual { order: 1; } /* VISUEL | TEXTE */ /* 14.5.3 - Grille de section : 2 colonnes texte+visuel si la section l utilise */ .sp-home-about, .sp-home-products, .sp-home-partners { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-gutter-lg); align-items: center; } /* 14.5.4 - Responsive : une colonne, visuel en tete sous 992px */ @media (max-width: 991.98px) { .sp-home-about, .sp-home-products, .sp-home-partners { grid-template-columns: 1fr; } .sp-home-about__visual, .sp-home-products__visual, .sp-home-partners__visual { order: 0; margin-bottom: var(--sp-gutter-md); } .sp-home-visual__img { max-height: 340px; } } .sp-home-sec { position: relative; padding: clamp(3.5rem, 8vw, 7rem) 0; } .sp-home-sec--soft { background-color: var(--sp-bg-soft); } .sp-home-sec--dark { background-color: var(--sp-dark); color: #ffffff; } .sp-home-sec--top-line { border-top: 1px solid var(--sp-border-soft); } .sp-home-head { display: grid; gap: 0.85rem; max-width: 64ch; margin-bottom: clamp(2rem, 4.5vw, 3.5rem); } .sp-home-head--center { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; } .sp-home-head--wide { max-width: 80ch; } .sp-home-head__marker { display: inline-flex; align-items: center; gap: 0.75rem; font-family: var(--sp-font-tech); font-size: 0.75rem; font-weight: var(--sp-weight-semibold); letter-spacing: 0.22em; text-transform: uppercase; color: var(--sp-primary-dark); } .sp-home-head__marker::before { content: ""; width: 2.25rem; height: 2px; background-color: var(--sp-accent); } .sp-home-head--center .sp-home-head__marker::before { display: none; } .sp-home-head__title { font-family: var(--sp-font-heading); font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.1; letter-spacing: -0.025em; font-weight: var(--sp-weight-bold); color: var(--sp-text); margin: 0; } .sp-home-head__text { font-size: var(--sp-text-lg); line-height: var(--sp-leading-normal); color: var(--sp-text-body); max-width: 62ch; margin: 0; } .sp-home-head--center .sp-home-head__text { margin-left: auto; margin-right: auto; } .sp-home-sec--dark .sp-home-head__title { color: #ffffff; } .sp-home-sec--dark .sp-home-head__text { color: rgba(255, 255, 255, 0.78); } .sp-home-sec--dark .sp-home-head__marker { color: var(--sp-primary-light); } .sp-home-split { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .sp-home-split--media-first .sp-home-split__body { order: 2; } .sp-home-split__body { display: grid; gap: 1.15rem; align-content: center; } .sp-home-split__title { font-family: var(--sp-font-heading); font-size: clamp(1.75rem, 3.1vw, 2.6rem); line-height: 1.12; letter-spacing: -0.02em; font-weight: var(--sp-weight-bold); color: var(--sp-text); margin: 0; } .sp-home-split__text { font-size: var(--sp-text-base); line-height: var(--sp-leading-relaxed); color: var(--sp-text-body); margin: 0; max-width: 58ch; } .sp-home-split__lead { font-size: var(--sp-text-lg); line-height: var(--sp-leading-normal); color: var(--sp-text); font-weight: var(--sp-weight-medium); margin: 0; max-width: 58ch; } .sp-home-sec--dark .sp-home-split__title { color: #ffffff; } .sp-home-sec--dark .sp-home-split__text { color: rgba(255, 255, 255, 0.76); } .sp-home-sec--dark .sp-home-split__lead { color: rgba(255, 255, 255, 0.92); } .sp-home-media { position: relative; margin: 0; border-radius: var(--sp-radius-lg); overflow: hidden; background-color: var(--sp-bg-soft); box-shadow: var(--sp-shadow-md); } .sp-home-media__img { display: block; width: 100%; height: auto; } .sp-home-media::after { content: ""; position: absolute; right: 14px; bottom: 14px; width: 54px; height: 4px; background-color: var(--sp-accent); border-radius: var(--sp-radius-pill); } .sp-home-band { margin: 0 auto clamp(2rem, 4vw, 3rem); border-radius: var(--sp-radius-lg); overflow: hidden; background-color: var(--sp-bg-soft); box-shadow: var(--sp-shadow-sm); } .sp-home-band__img { display: block; width: 100%; height: auto; } .sp-home-expertise__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 4.5vw, 4rem); align-items: center; } .sp-home-expertise__list { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; } .sp-home-expertise__item { position: relative; padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1.25rem, 2.2vw, 2rem); background-color: #ffffff; border: 1px solid var(--sp-border-soft); border-left: 3px solid var(--sp-primary); border-radius: var(--sp-radius-md); transition: transform var(--sp-transition), border-color var(--sp-transition), box-shadow var(--sp-transition); } .sp-home-expertise__item:nth-child(2) { border-left-color: var(--sp-accent); } .sp-home-expertise__item:hover { transform: translateY(-3px); border-color: var(--sp-border-strong); box-shadow: var(--sp-shadow-md); } .sp-home-expertise__num { display: block; font-family: var(--sp-font-tech); font-size: 0.75rem; font-weight: var(--sp-weight-semibold); letter-spacing: 0.2em; color: var(--sp-primary-dark); margin-bottom: 0.4rem; } .sp-home-expertise__title { font-family: var(--sp-font-heading); font-size: var(--sp-text-xl); line-height: var(--sp-leading-snug); font-weight: var(--sp-weight-semibold); color: var(--sp-text); margin: 0 0 0.4rem; } .sp-home-expertise__text { font-size: var(--sp-text-base); line-height: var(--sp-leading-normal); color: var(--sp-text-body); margin: 0; } .sp-home-process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); position: relative; } .sp-home-process::before { content: ""; position: absolute; top: 1.6rem; left: 3.2rem; right: 3.2rem; height: 1px; background-color: var(--sp-border); } .sp-home-process__step { position: relative; padding-top: 3.75rem; } .sp-home-process__num { position: absolute; top: 0; left: 0; width: 3.2rem; height: 3.2rem; display: grid; place-items: center; border-radius: 50%; background-color: #ffffff; border: 1px solid var(--sp-border-strong); color: var(--sp-primary-dark); font-family: var(--sp-font-tech); font-size: 0.875rem; font-weight: var(--sp-weight-semibold); z-index: 1; } .sp-home-process__num::after { content: ""; position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%; background-color: var(--sp-accent); } .sp-home-process__title { font-family: var(--sp-font-heading); font-size: var(--sp-text-lg); line-height: var(--sp-leading-snug); font-weight: var(--sp-weight-semibold); color: var(--sp-text); margin: 0 0 0.4rem; } .sp-home-process__text { font-size: var(--sp-text-base); line-height: var(--sp-leading-normal); color: var(--sp-text-body); margin: 0; } .sp-home-sec--dark .sp-home-process::before { background-color: rgba(255, 255, 255, 0.18); } .sp-home-sec--dark .sp-home-process__num { background-color: var(--sp-dark-2); border-color: rgba(255, 255, 255, 0.28); color: #ffffff; } .sp-home-sec--dark .sp-home-process__title { color: #ffffff; } .sp-home-sec--dark .sp-home-process__text { color: rgba(255, 255, 255, 0.72); } .sp-home-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.6vw, 2rem); } .sp-home-app { display: flex; flex-direction: column; height: 100%; background-color: #ffffff; border: 1px solid var(--sp-border-soft); border-radius: var(--sp-radius-lg); overflow: hidden; transition: transform var(--sp-transition), box-shadow var(--sp-transition), border-color var(--sp-transition); } .sp-home-app:hover { transform: translateY(-4px); box-shadow: var(--sp-shadow-lg); border-color: var(--sp-border); } .sp-home-app__media { position: relative; aspect-ratio: 3 / 2; background-color: var(--sp-bg-soft); border-bottom: 1px solid var(--sp-border-soft); overflow: hidden; } .sp-home-app__img { display: block; width: 100%; height: 100%; object-fit: cover; } .sp-home-app__body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.35rem 1.4rem 1.6rem; flex: 1 1 auto; } .sp-home-app__index { font-family: var(--sp-font-tech); font-size: 0.75rem; font-weight: var(--sp-weight-semibold); letter-spacing: 0.18em; color: var(--sp-accent); } .sp-home-app__title { font-family: var(--sp-font-heading); font-size: var(--sp-text-xl); line-height: var(--sp-leading-snug); font-weight: var(--sp-weight-semibold); color: var(--sp-text); margin: 0; } .sp-home-app__text { font-size: var(--sp-text-base); line-height: var(--sp-leading-normal); color: var(--sp-text-body); margin: 0; } .sp-home-quality__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; } .sp-home-quality__list li { display: flex; align-items: flex-start; gap: 0.7rem; font-size: var(--sp-text-base); line-height: var(--sp-leading-normal); color: var(--sp-text-body); } .sp-home-quality__list .mdi { flex: 0 0 auto; font-size: 1.25rem; color: var(--sp-accent); margin-top: 0.1rem; } .sp-home-network { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 4.5vw, 4rem); align-items: center; } .sp-home-network__logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .sp-home-network__logo { display: grid; place-items: center; min-height: 128px; padding: 1.5rem; background-color: #ffffff; border: 1px solid var(--sp-border-soft); border-radius: var(--sp-radius-lg); transition: border-color var(--sp-transition), box-shadow var(--sp-transition); } .sp-home-network__logo img { max-width: 100%; max-height: 58px; width: auto; filter: grayscale(1); opacity: 0.72; transition: filter var(--sp-transition), opacity var(--sp-transition); } .sp-home-network__logo:hover { border-color: var(--sp-primary); box-shadow: var(--sp-shadow-sm); } .sp-home-network__logo:hover img, .sp-home-network__logo:focus-within img { filter: none; opacity: 1; } .sp-home-why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2.6vw, 2rem); } .sp-home-why__item { border-top: 2px solid var(--sp-border); padding-top: 1.25rem; transition: border-color var(--sp-transition); } .sp-home-why__item:hover { border-top-color: var(--sp-accent); } .sp-home-why__num { display: block; font-family: var(--sp-font-tech); font-size: 0.8125rem; font-weight: var(--sp-weight-semibold); letter-spacing: 0.16em; color: var(--sp-primary-dark); margin-bottom: 0.55rem; } .sp-home-why__title { font-family: var(--sp-font-heading); font-size: var(--sp-text-lg); line-height: var(--sp-leading-snug); font-weight: var(--sp-weight-semibold); color: var(--sp-text); margin: 0 0 0.45rem; } .sp-home-why__text { font-size: var(--sp-text-base); line-height: var(--sp-leading-normal); color: var(--sp-text-body); margin: 0; } .sp-home-cta__media { margin: 0 auto clamp(1.75rem, 4vw, 2.75rem); border-radius: var(--sp-radius-lg); overflow: hidden; box-shadow: 0 30px 60px -32px rgba(0, 0, 0, 0.65); } .sp-home-cta__media img { display: block; width: 100%; height: auto; } .sp-home-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.875rem; } .sp-home-works { padding: clamp(2.5rem, 6vw, 4.5rem) 0 0; } .sp-home-solutions__lists > .sp-home-products__section:first-child { border-top: 1px solid var(--sp-border-soft); } .sp-home-works__title { font-family: var(--sp-font-heading); font-size: var(--sp-text-2xl); font-weight: var(--sp-weight-bold); color: #ffffff; margin: 0 0 0.5rem; } .sp-home-works__sub { color: rgba(255, 255, 255, 0.72); max-width: 640px; margin: 0; } @media (max-width: 1199.98px) { .sp-home-process { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; } .sp-home-process::before { display: none; } } @media (max-width: 991.98px) { .sp-home-split, .sp-home-expertise__grid, .sp-home-network { grid-template-columns: 1fr; } .sp-home-split--media-first .sp-home-split__body { order: 0; } .sp-home-apps { grid-template-columns: 1fr; } .sp-home-why { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; } .sp-home-split__text, .sp-home-split__lead { max-width: none; } } @media (max-width: 575.98px) { .sp-home-process, .sp-home-why { grid-template-columns: 1fr; } .sp-home-network__logos { grid-template-columns: 1fr; } .sp-home-cta__actions .btn-sp { width: 100%; } } @media (prefers-reduced-motion: reduce) { .sp-home-expertise__item, .sp-home-app, .sp-home-network__logo img, .sp-home-why__item { transform: none; transition: none; } } /* PHASE 17 — CORRECTIFS ACCESSIBILITE (contraste mesure) 1. Bande ateliers : voile sombre degrade sur l'image d'arriere-plan (img/zonevideos.png, aplat bleu #0D89FF mesure a 3.48:1 avec du blanc) pour garantir le contraste du titre, de l'eyebrow et du sous-titre. Le voile s'efface avant le slider pour preservation des photographies. 2. Boutons outline sur fonds sombres (hero + CTA final) : le texte passe en blanc (le bleu du design system ne montait qu'a 3.18:1 sur --sp-dark). */ .sp-home-video { position: relative; isolation: isolate; background-color: var(--sp-dark); } .sp-home-video::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(180deg, rgba(24, 33, 46, 0.92) 0%, rgba(24, 33, 46, 0.86) 30%, rgba(24, 33, 46, 0.55) 44%, rgba(24, 33, 46, 0) 62%); } .sp-home-video > * { position: relative; z-index: 1; } .sp-hero .btn-sp-outline, .sp-home-cta .btn-sp-outline { border-color: rgba(255, 255, 255, 0.6); color: #ffffff; } .sp-hero .btn-sp-outline:hover, .sp-hero .btn-sp-outline:focus-visible, .sp-home-cta .btn-sp-outline:hover, .sp-home-cta .btn-sp-outline:focus-visible { background-color: #ffffff; border-color: #ffffff; color: var(--sp-dark); } /* PHASE 17 — CORRECTIFS WCAG SUR COMPOSANTS PARTAGES Mesures releveees dans Chrome (aucune estimation) : - blanc sur --sp-accent (#fe1b24) = 3.89:1 (< 4.5 AA) - --sp-accent (#fe1b24) sur blanc = 3.61:1 (< 4.5 AA) - --sp-muted (#747b86) sur blanc = 4.27:1 (< 4.5 AA) Ces valeurs invalident les notes "4.55:1" et "5.10:1" ecrites dans ce fichier aux phases 12 ; les mesures navigateur font foi. Corrections avec tokens DEJA DECLARES par sp-foundations.css, sans nouvelle couleur et sans redefinition de token : - --sp-accent-dark (#d50f1c) : 5.36:1 avec le blanc et sur blanc -> boutons rouges (design system, header, contact) - --sp-text-body (#3f596c) : 7.35:1 sur blanc -> textes secondaires (carte catalogue, zone mots-cles) Ces composants sont partages (header, catalogue, fiche produit, formulaire de contact) : le correctif est donc global, comme le demande initial (accessibilite AA). Le bouton de la modale de devis (.fomrModal .btnbox button) est deja en --sp-primary-dark depuis la phase 15 : 5.09:1, non modifie. */ .btn-sp-primary { background-color: var(--sp-accent-dark); border-color: var(--sp-accent-dark); } .btn-sp-primary:hover { background-color: var(--sp-accent-dark); border-color: var(--sp-accent-dark); } .btn-sp-outline-accent { border-color: var(--sp-accent-dark); color: var(--sp-accent-dark); } .btn-sp-outline-accent:hover { background-color: var(--sp-accent-dark); border-color: var(--sp-accent-dark); } .sp-navbar__cta { background-color: var(--sp-accent-dark); border-color: var(--sp-accent-dark); } .contactzone #btnSendContact { background-color: var(--sp-accent-dark); border-color: var(--sp-accent-dark); } .contactzone #btnSendContact:hover, .contactzone #btnSendContact:focus, .contactzone #btnSendContact:active { background-color: var(--sp-accent-dark); border-color: var(--sp-accent-dark); } .sp-catalog-card__text { color: var(--sp-text-body); } .sp-home-seo p { color: var(--sp-text-body); } /* ========================================================= PHASE 17 — BOUTON WHATSAPP Numero : +212 660 371 474, deja affiche dans le topbar, le pied de page, la section Contact et le JSON-LD de la page d'accueil (aucune donnee inventee). Couleur : vert WhatsApp vif demande par le client (#0ccb4d). Sur ce fond, le BLANC ne vaut que 2.17:1 — tres en dessous du minimum AA de 4.5:1 — le texte et l'icone passent donc en vert quasi noir #0d2b12 : 7.05:1. Mesures navigateur : #0d2b12 sur #0ccb4d = 7.05:1 (bouton) #0d2b12 sur #0bb544 = 5.62:1 (survol / focus) Couleur locale : aucun token redefini, la palette existante (--sp-primary, --sp-accent, ...) est intacte. ========================================================= */ .sp-whatsapp { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background-color: #0ccb4d; color: #0d2b12; text-decoration: none; box-shadow: var(--sp-shadow-md); transition: background-color var(--sp-transition), color var(--sp-transition), transform var(--sp-transition); } .sp-whatsapp:hover, .sp-whatsapp:focus { background-color: #0bb544; color: #0d2b12; text-decoration: none; } .sp-whatsapp:focus-visible { outline: 2px solid var(--sp-primary); outline-offset: 2px; } .sp-whatsapp .mdi { font-size: 1.6rem; line-height: 1; } /* Variante flottante : presente sur toutes les pages (footer.php). Empilee au-dessus du bouton de retour en haut (46 px) pour ne jamais le recouvrir. */ .sp-whatsapp--float { position: fixed; right: 1.25rem; bottom: calc(1.5rem + 46px + 0.75rem); z-index: var(--sp-z-sticky); width: 52px; height: 52px; border-radius: 50%; } /* Fiche produit mobile : la barre CTA fixe (sp-stickybar) occupe 84 px, le bouton WhatsApp reste au-dessus d'elle aussi. */ @media (max-width: 767.98px) { body:has(.sp-stickybar) .sp-whatsapp--float { bottom: calc(84px + 52px + 0.75rem + env(safe-area-inset-bottom)); } } /* Variante integree dans la section Contact de la homepage. */ .sp-home-contact__wa { margin: 1.5rem 0 0; } .sp-whatsapp--inline { min-height: 48px; padding: 0 1.75rem; border-radius: var(--sp-radius-pill); font-weight: 600; } @media (prefers-reduced-motion: reduce) { .sp-whatsapp { transition: none; } } /* Puce verte pour l'icone WhatsApp dans le topbar, le pied de page et la liste de la section Contact : meme vert que le bouton (#0ccb4d), icone vert quasi noir (#0d2b12) = 7.05:1, tres au-dessus du minimum de 3:1 exige pour un element non textuel. Le selecteur passe en `span.mdi...` pour primer sur les tailles d'icone des blocs (`.sp-footer__contact-row > .mdi`, etc.). */ span.mdi.sp-whatsapp__chip { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background-color: #0ccb4d; color: #0d2b12; font-size: 1rem; line-height: 1; } span.mdi.sp-whatsapp__chip--sm { width: 1.3rem; height: 1.3rem; font-size: 0.85rem; } /* Le libelle « WhatsApp » du topbar ne doit pas se couper. */ .sp-topbar__link--wa { white-space: nowrap; } /* ========================================================= PHASE 18 — POLISH VISUEL HOMEPAGE Constat : audit mesure dans Chrome (1440 px et 390 px) avant modification. La homepage etait techniquement valide mais visuellement irreguliere : - 4 echelles differentes pour un H2 de section (49,6 / 44 / 41,6 / 32 px) et 3 pour un H3 (24 / 20 / 22) ; - respiration verticale irreguliere : les espaces entre sections allaient de 160 a 274 px a 1440 px (112 / 80 / 50 px de padding selon le bloc) ; - visuels abstraits de rapports differents : 4:3, 3:2, 3:1, 2,855:1, 2,4:1 ; - les deux CTA « VOIR PLUS » jumeaux n'etaient pas de la meme couleur (bleu vs rouge) ; - les logos partenaires avaient un survol couleur alors qu'ils ne sont pas cliquables ; - les boutons --lg n'avaient pas la meme hauteur dans le hero (52 px) et ailleurs (56 px) ; - le titre de la section Contact etait un H3 et son sous-titre un H4 (hierarchie de titres incorrecte) ; - deux figures de bande portaient un margin-top en attribut style inline. Regle appliquee : aucune nouvelle couleur (tokens existants uniquement), aucune modification de structure de section, de contenu, de lien ou de comportement. Les blocs Phase 17 ci-dessus restent intacts ; ce bloc ne fait que normaliser echelles, rythme vertical, ratios d'images et details de surface. Les recadrages `cover` verifies : les marges internes des SVG (au moins 6,7 % / 10 % de la toile) sont superieures au recadrage (5,6 % pour les medias, 2,4 % pour la bande solutions) — aucun element de dessin n'est coupe. ========================================================= */ :root { /* Rythme vertical unique de la homepage. */ --sp-home-section-pad: clamp(3.5rem, 8vw, 7rem); /* Echelle de titre unique : H2 de section, puis H2 de cloture. */ --sp-home-title: clamp(2rem, 3vw, 2.75rem); --sp-home-title-dark: clamp(2.25rem, 3.4vw, 3.25rem); /* Ecarts de surface homogenes. */ --sp-home-surface-pad: clamp(1.25rem, 2vw, 1.5rem); } /* --- 1. Hiérarchie typographique : un H2, une échelle --- */ .sp-home-head__title, .sp-home-split__title, .sp-home-products__title { font-family: var(--sp-font-heading); font-size: var(--sp-home-title); line-height: 1.1; letter-spacing: -0.025em; font-weight: var(--sp-weight-bold); } /* `.articlezone h2` (style.css et sp-foundations.css) impose un interlignage positif de 0,02em : ce selecteur legacy est plus specifique (0,1,1) et l'emportait sur la regle ci-dessus. */ .sp-home-video .sp-home-works__title { font-family: var(--sp-font-heading); font-size: var(--sp-home-title); line-height: 1.1; letter-spacing: -0.025em; font-weight: var(--sp-weight-bold); color: #ffffff; } .sp-home-head__title, .sp-home-split__title, .sp-home-products__title { color: var(--sp-text); } /* Le hero reste le seul H1 de la page : son titre n'est pas touche par cette regle (il n'a pas la classe .sp-home-*). */ /* H3 de sous-élément : une seule taille sur toute la homepage. */ .sp-home-expertise__title, .sp-home-process__title, .sp-home-app__title, .sp-home-why__title, .sp-home-contact__side__title { font-size: var(--sp-text-xl); line-height: var(--sp-leading-snug); font-weight: var(--sp-weight-semibold); } /* Titre de la section Contact : H2aligne sur les autres sections. */ .sp-home-contact__title { font-family: var(--sp-font-heading); font-size: var(--sp-home-title); line-height: 1.1; letter-spacing: -0.025em; font-weight: var(--sp-weight-bold); color: var(--sp-text); text-align: center; margin: 0 0 clamp(1.5rem, 3vw, 2rem); } .sp-home-contact__title::after { content: ""; display: block; width: 56px; height: 3px; border-radius: 2px; background-color: var(--sp-primary); margin: 0.85rem auto 0; } /* CTA final : le seul titre volontairement plus grand (role de cloture), meme famille et meme interlignage que les H2. */ .sp-home-cta__title { font-size: var(--sp-home-title-dark); line-height: 1.1; letter-spacing: -0.025em; margin-bottom: 0.9rem; } /* `.contactzone h3` (sp-foundations.css:1366, regle Phase 16 ecrite pour l'ancien titre de zone) est plus specifique (0,1,1) que `.sp-home-contact__side__title` (0,1,0) : il imposait 44 px, centré, bleu nuit, plus un filet de 56 px. Il vise maintenant le sous-titre, qui doit suivre l'echelle H3 de la homepage. */ .sp-home-contact .sp-home-contact__side__title { font-family: var(--sp-font-heading); font-size: var(--sp-text-xl); line-height: var(--sp-leading-snug); font-weight: var(--sp-weight-semibold); letter-spacing: normal; color: var(--sp-text); text-align: left; margin: 0 0 0.85rem; } .sp-home-contact .sp-home-contact__side__title::after { display: none; } /* --- 2. Marqueurs de section homogenes --- */ .sp-home-head__marker, .sp-home-video .sp-eyebrow { font-size: 0.75rem; letter-spacing: 0.2em; } .sp-home-head__marker::before, .sp-home-video .sp-eyebrow::before { width: 2rem; height: 2px; border-radius: 2px; background-color: currentColor; } .sp-home-head--center .sp-home-head__marker::before { display: block; } /* Variante centree : trait a gauche ET a droite, meme longueur, pour que le marqueur reste symetrique au-dessus du titre. */ .sp-home-head--center .sp-home-head__marker::after { content: ""; width: 2rem; height: 2px; border-radius: 2px; background-color: currentColor; } /* --- 3. Respiration verticale : un seul rythme --- */ .sp-home-sec, .sp-home-products__section, .sp-home-video, .sp-home-cta, .sp-home-contact { margin-top: 0; padding-top: var(--sp-home-section-pad); padding-bottom: var(--sp-home-section-pad); } /* Le bloc Accessoires etait le seul a ajouter 64 px de marge en plus de son padding : la separation visuele reste assuree par le fond doux et par la regle haute du bloc precedent. */ .sp-home-products__section--soft { margin-top: 0; } /* La bande n'ajoute plus de marge basse : l'espacement vers la section suivante est assure par le padding de section. */ .sp-home-band { margin: 0 auto; } .sp-home-band--spaced { margin-top: clamp(2.5rem, 5vw, 4rem); } /* Le bloc titre de la bande ateliers ne doublait plus le padding de sa section. */ .sp-home-works { padding: 0; } /* --- 4. Visuels : un seul rapport par famille --- */ /* Medias abstraits : 3/2 partout (identique aux cartes Applications). Les SVG 4:3 perdent 5,6 % de hauteur, dans leurs marges internes. */ .sp-home-media { aspect-ratio: 3 / 2; } .sp-home-media__img { height: 100%; object-fit: cover; } /* Bandes : 3/1 partout, donc exactement la meme hauteur pour les trois illustrations (elle variait de 432 a 454 px). */ .sp-home-band { aspect-ratio: 3 / 1; } .sp-home-band__img { height: 100%; object-fit: cover; } /* --- 5. Cartes et surfaces : alignement et coherence --- */ /* Les trois blocs Expertise avaient des hauteurs differentes (200 / 200 / 175 px) : ranges de grille a hauteur egale. */ .sp-home-expertise__list { grid-auto-rows: 1fr; } /* Les surfaces de la homepage passent de 20 px a 14 px (--sp-radius-md, le rayon des boutons) : meme famille de courbure dans toute l'interface, et une lecture plus technique que le grand arrondi SaaS. */ .sp-home-expertise__item, .sp-home-app { border-radius: var(--sp-radius-md); } .sp-home-products__grid .sp-catalog-card { border-radius: var(--sp-radius-md); border-color: var(--sp-border-soft); } /* Micro-interaction de survol (spec 16) : leger soulèvement de 2 px, bordure renforcee, image agrandie de 3 %. Aucune rotation, aucun 3D, aucun zoom marque. L'etat de survol lui-meme est defini sans media query : il doit rester sobre meme quand l'animation est coupee. L'ombre heritee du systeme de cartes (--sp-shadow-lg, 0 28px 55px) est explicitement remplacee ici, car ce volume d'ombre est exclu par la direction artistique. Seul le caractere anime est conditionne a no-preference. */ .sp-home-products__grid .sp-catalog-card:hover, .sp-home-products__grid .sp-catalog-card:focus-within { transform: translateY(-2px); border-color: var(--sp-border-strong); box-shadow: 0 6px 18px rgba(24, 33, 46, 0.07); } @media (prefers-reduced-motion: no-preference) { .sp-home-products__grid .sp-catalog-card { transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .sp-home-products__grid .sp-catalog-card__img { transition: transform 220ms ease; } .sp-home-products__grid .sp-catalog-card:hover .sp-catalog-card__img, .sp-home-products__grid .sp-catalog-card:focus-within .sp-catalog-card__img { transform: scale(1.03); } } .sp-home-app__body { padding: var(--sp-home-surface-pad); gap: 0.55rem; } /* --- 6. Qualité : lecture institutionnelle --- */ /* La liste devient un encart blanc a filets, aligne sur les autres surfaces de la homepage (memes tokens, meme rayon). */ .sp-home-quality__list { gap: 0; padding: clamp(1.25rem, 2vw, 1.75rem); background-color: #ffffff; border: 1px solid var(--sp-border-soft); border-radius: var(--sp-radius-md); } .sp-home-quality__list li { padding: 0.85rem 0; } .sp-home-quality__list li + li { border-top: 1px solid var(--sp-border-soft); } .sp-home-quality__list li:first-child { padding-top: 0; } .sp-home-quality__list li:last-child { padding-bottom: 0; } .sp-home-quality__list .mdi { margin-top: 0.05rem; } /* --- 7. Partenaires : discrets et alignes --- */ /* Les logos ne sont pas cliquables : plus de survol couleur (induit une interaction inexistante), seule la legibilite en niveaux de gris est conservee. */ .sp-home-network__logo { min-height: 104px; padding: 1.25rem; transition: none; } .sp-home-network__logo:hover { border-color: var(--sp-border-soft); box-shadow: none; } .sp-home-network__logos { gap: 1.25rem; } .sp-home-network__logo img { max-height: 52px; object-fit: contain; } /* PHASE 18 — contraste mesure : --sp-accent (#fe1b24) sur blanc vaut 3,89:1, sous le minimum AA de 4,5:1 pour ce numero de section en 12 px. Bascule sur le token deja declare --sp-accent-dark : 5,36:1 (meme correction que les boutons rouges et le libelle de categorie des cartes). */ .sp-home-app__index { color: var(--sp-accent-dark); } /* Le visuel ne occupe plus toute la largeur (1296 px) : il repasse sous la zone de texte et le bloc respire. */ .sp-home-cta__media { max-width: 1040px; margin: 0 auto clamp(1.75rem, 4vw, 2.75rem); } /* --- 9. Boutons : hauteur unique --- */ /* Le hero gardait une hauteur de 52 px contre 56 px partout ailleurs : la regle speciale est supprimee, les boutons hero heredent de .btn-sp--lg. */ .sp-hero__actions .sp-hero__btn { min-height: 56px; padding: 1rem 2.25rem; } /* --- 10. Ancres sous l'en-tete collant --- */ .sp-home-sec[id], .sp-home-products__section[id], .sp-home-contact[id] { scroll-margin-top: 6rem; } /* --- 10 bis. Process : reglette verticale sur petit ecran --- */ /* La ligne horizontale du process est masquee sous 1200 px. En colonne unique elle serait de toute facon illisible : on la remplace par une reglette verticale qui relie les quatre reperes. Le texte decale vers la droite pour que le filet reste dans la gouttiere et ne traverse jamais le texte. */ @media (max-width: 575.98px) { .sp-home-process { gap: 0; } .sp-home-process__step { padding-top: 3.5rem; padding-left: 4.4rem; padding-bottom: 1.75rem; } .sp-home-process__step:not(:last-child)::after { content: ""; position: absolute; left: 1.6rem; top: 3.2rem; bottom: 0; width: 1px; background-color: var(--sp-border); } .sp-home-sec--dark .sp-home-process__step:not(:last-child)::after { background-color: rgba(255, 255, 255, 0.18); } } /* --- 11. Nettoyage des attributs style inline --- */ /* Les deux figures de bande portaient un margin-top en ligne ; il est desormais porte par .sp-home-band--spaced. */ /* ===================================================== PHASE 21 — DESCRIPTION ET FICHE TECHNIQUE (produit.php) Rendu structure en tableau Bootstrap 4.4.1 pour les informations reellement tabulaires du produit. Contraintes respectees : aucun degrade, aucune ombre portee, aucune animation, aucun 3D, un seul accent (--sp-accent) et un seul bleu (--sp-primary). Les couleurs proviennent exclusivement des tokens existants : rien de nouveau n'est declare. Les tableaux sont poses sur le panneau .tabproduit .tab-content, deja peint en --sp-bg-soft : ils restent donc en blanc (--sp-surface) pour rester lisibles et presenter un contraste sobre plutot qu'un aplat colore. ===================================================== */ /* --- 1. Conteneur commun des deux onglets --- */ .sp-desc > *:first-child { margin-top: 0; } .sp-desc > *:last-child { margin-bottom: 0; } /* --- 2. Texte redige --- */ .sp-desc__text { margin: 0 0 var(--sp-space-4); font-size: var(--sp-text-base); line-height: var(--sp-leading-relaxed); color: var(--sp-text-body); } .sp-desc__text--empty { color: var(--sp-muted); font-style: italic; } /* --- 3. Sous-titre de section (intitule issu du texte) --- */ .sp-desc__subtitle { margin: var(--sp-space-5) 0 var(--sp-space-3); font-family: var(--sp-font-heading); font-size: var(--sp-text-xs); font-weight: var(--sp-weight-semibold); line-height: var(--sp-leading-snug); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sp-text); } /* --- 4. Liste de description Un filet lateral remplace la puce : sobre, et surtout aucun marqueur graphique ne double les symboles deja presents dans le texte source (id=14). --- */ .sp-desc__list { margin: 0 0 var(--sp-space-4); padding: 0 0 0 var(--sp-space-4); list-style: none; border-left: 2px solid var(--sp-accent-soft); } .sp-desc__list > li { position: relative; margin: 0 0 var(--sp-space-2); padding: 0; font-size: var(--sp-text-base); line-height: var(--sp-leading-normal); color: var(--sp-text-body); } .sp-desc__list > li:last-child { margin-bottom: 0; } /* Variante interne a une cellule de tableau : pas de filet lateral (la colonne joue deja ce role), un simple espacement et un filet fin entre les entrees. */ .sp-desc__list--sub { margin: 0; padding: 0; border-left: 0; list-style: none; } .sp-desc__list--sub > li { position: relative; margin: 0; padding: var(--sp-space-2) 0 var(--sp-space-2) var(--sp-space-4); border-left: 1px solid var(--sp-border); font-size: var(--sp-text-sm); line-height: var(--sp-leading-normal); color: var(--sp-text-body); } .sp-desc__list--sub > li + li { border-top: 1px solid var(--sp-border-soft); } /* --- 4b. Tableaux saisis dans le backoffice (Phase 22) L'administrateur peut inserer un tableau HTML libre dans la description detaillee ou dans la fiche technique. Ces regles lui donnent le meme aspect que les tableaux produits automatiquement par le parseur de la Phase 21, sans avoir a saisir de classe au moment de l'ecriture. Les couleurs et les espacements reprennent exactement les variables du design system (--sp-surface, --sp-border, --sp-bg-soft, --sp-text, --sp-text-body) : un tableau saisi a la main ne doit pas avoir une autre apparence qu'un tableau genere. */ .sp-desc > table { width: 100%; margin: 0 0 var(--sp-space-4); color: var(--sp-text-body); background-color: var(--sp-surface); border: 1px solid var(--sp-border); border-collapse: collapse; } .sp-desc > table caption { padding: 0 0 var(--sp-space-2); font-size: var(--sp-text-xs); color: var(--sp-muted); text-align: left; } .sp-desc > table th, .sp-desc > table td { padding: 0.9rem 1rem; border-top: 1px solid var(--sp-border); vertical-align: top; font-size: var(--sp-text-sm); line-height: var(--sp-leading-snug); overflow-wrap: break-word; word-break: normal; } .sp-desc > table thead th { border-top: 0; border-bottom: 1px solid var(--sp-border); background-color: var(--sp-bg-soft); font-family: var(--sp-font-heading); font-size: var(--sp-text-xs); font-weight: var(--sp-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; text-align: left; color: var(--sp-text); } /* Un tableau peut etre place dans une div, par exemple pour le rendre defilable : on ne filtre que les tableaux de premier niveau, qui restent dans le conteneur .sp-desc. */ .sp-desc > table th, .sp-desc > table td { text-align: left; } .sp-desc > table tbody tr:nth-child(even) td { background-color: var(--sp-bg-soft); } /* Une cellule peut contenir une liste ou plusieurs paragraphes : on neutralise les marges qui creeraient un decalage. */ .sp-desc > table td > *:first-child { margin-top: 0; } .sp-desc > table td > *:last-child { margin-bottom: 0; } .sp-desc > table ul, .sp-desc > table ol { margin: 0; padding-left: var(--sp-space-5); } /* Sur petit ecran, un tableau large ne doit pas deborder de la fiche : il devient defilable horizontalement. */ @media (max-width: 575.98px) { .sp-desc > table { display: block; overflow-x: auto; white-space: nowrap; } .sp-desc > table th, .sp-desc > table td { white-space: normal; min-width: 130px; } } /* --- 5. Tableaux produit Classes Bootstrap : .table, .table-responsive. Classes SIGNORE PLAST : .sp-tech-table (fiche technique) et .sp-product-info-table (description). --- */ .sp-tech-table-wrap, .sp-product-info-table-wrap { margin: 0 0 var(--sp-space-4); background-color: var(--sp-surface); border: 1px solid var(--sp-border); } .sp-tech-table, .sp-product-info-table { /* 40 % pour le libelle, 60 % pour la valeur. */ margin: 0; color: var(--sp-text-body); background-color: var(--sp-surface); table-layout: fixed; border-collapse: collapse; } .sp-tech-table th, .sp-tech-table td, .sp-product-info-table th, .sp-product-info-table td { padding: 0.9rem 1rem; vertical-align: middle; border-top: 1px solid var(--sp-border); font-size: var(--sp-text-sm); line-height: var(--sp-leading-snug); overflow-wrap: break-word; word-break: normal; } /* Colonne des libelles : 40 %, fond tres legerement different, texte plus fort. */ .sp-tech-table th[scope="row"], .sp-product-info-table th[scope="row"] { width: 40%; font-weight: var(--sp-weight-semibold); color: var(--sp-text); background-color: var(--sp-primary-softer); border-right: 1px solid var(--sp-border); } .sp-tech-table td, .sp-product-info-table td { width: 60%; font-weight: var(--sp-weight-regular); color: var(--sp-text-body); } /* En-tete discret : pas de gros bloc colore. */ .sp-tech-table thead th { padding-top: 0.75rem; padding-bottom: 0.75rem; border-top: 0; border-bottom: 1px solid var(--sp-border); border-right: 0; background-color: var(--sp-bg-soft); font-family: var(--sp-font-heading); font-size: var(--sp-text-xs); font-weight: var(--sp-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sp-text); } .sp-tech-table thead th[scope="col"]:first-child { width: 40%; } /* Ligne de donnee isolee, conservee sur toute la largeur lorsqu'aucun deux-points n'existe dans la donnee source (id=3 : "Baguettes d'angle en plastique PVC", etc.). Aucun couple n'est invente pour la completer. */ .sp-tech-table__row--note > td, .sp-product-info-table__row--note > td { font-weight: var(--sp-weight-medium); color: var(--sp-text); background-color: var(--sp-surface); border-right: 0; } /* --- 6. Mobile : les deux colonnes sont conservees, seul le resserrement change. Aucune largeur en pixels fixe, donc aucun debordement horizontal possible. --- */ @media (max-width: 767.98px) { .sp-desc__text, .sp-desc__list > li { font-size: var(--sp-text-sm); } .sp-tech-table th, .sp-tech-table td, .sp-product-info-table th, .sp-product-info-table td { padding: 0.7rem 0.75rem; font-size: var(--sp-text-xs); } .sp-tech-table th[scope="row"], .sp-product-info-table th[scope="row"] { width: 38%; } .sp-tech-table td, .sp-product-info-table td { width: 62%; } .sp-tech-table thead th[scope="col"]:first-child { width: 38%; } } /* Sous 380 px, une valeur tres courte (unite, reference) peut forcer la colonne de libelles a devenir trop etroite : on reduit encore le padding plutot que de laisser filer. */ @media (max-width: 380px) { .sp-tech-table th, .sp-tech-table td, .sp-product-info-table th, .sp-product-info-table td { padding: 0.6rem 0.6rem; } } /* PHASE 24 - Espace entre fiche technique et CTA */ .sp-product-page .sp-product-stack #fichetechnique { margin-bottom: clamp(3rem, 6vw, 3.5rem); } @media (max-width: 767.98px) { .sp-product-page .sp-product-stack #fichetechnique { margin-bottom: clamp(2rem, 5vw, 2.5rem); } }