/* ========================================================================== ML Global Services — design system graphique/typographique Refonte complète : plus aucune photographie, tout repose sur la typographie, la couleur et le graphisme (carte-réseau en canvas, hairlines, numérotation). Navy + ambre, esprit "document de transport / signalétique", en cohérence avec l'activité (import-export, transit). SYNTHÈSE "Apple" (jury de 3 propositions) : base = système de tokens partagé avec pml-style.css (espacements --space-*, rayons --radius-*, easing/durées --ease-* et --duration-*) pour une grammaire de composants prévisible entre les deux marques, enrichi de : - la pile typographique système (-apple-system/SF Pro) sur titres ET corps, avec une voix MLGS ferme et resserrée (700/800, tracking négatif marqué) ; - une échelle ".display-1..6" en clamp() pour un rendu "hero" à la apple.com, y compris sur les DEUX classes réellement utilisées par les vues (.display-3 ET .display-4 — vérifié dans les gabarits) ; - des ombres douces et diffuses à 3 paliers + un palier "glow" ambre ; - un rayon pilule (--radius-pill) réservé aux boutons d'appel à l'action (jamais imposé au .btn Bootstrap générique, pour ne pas modifier des boutons hors-sujet comme .btn-light/.btn-dark) ; - le comblement d'un trou déjà présent dans le HTML actuel sans y toucher : .custom-input (formulaire de contact) n'avait aucune règle dédiée et retombait sur le bleu Bootstrap par défaut. Aucune variable ni sélecteur existant n'a été renommé ou supprimé. ========================================================================== */ :root { /* ---- Palette "Horizon" (pastel) ---- Remplace la palette grise temporaire par la première piste pastel validée par le client (bleu ciel poudré + touche abricot, sur papier ivoire). Mêmes noms de variables qu'avant — seules les valeurs changent — pour ne rien casser côté gabarits. Chaque paire texte/fond ci-dessous a été vérifiée au ratio de contraste WCAG AA (≥ 4.5:1), y compris le texte blanc sur --amber (bouton) et --amber lui-même en usage texte seul (icônes, liens, .num-marker). Le vert WhatsApp (#25D366) n'est pas concerné : repère de canal, pas un élément de marque MLGS. */ --ink: #2E3B45; /* encre ardoise — texte principal + fond sombre des hero/CTA */ --ink-2: #3D4C58; /* variante plus claire de l'encre — dégradés hero/CTA + hover du bouton sombre */ --paper: #F6F8F7; /* papier — fond de page */ --steel: #667077; /* texte atténué (.lead, .text-muted) */ --amber: #4A7787; /* ciel poudré (foncé) — boutons, icônes, sélection */ --amber-soft: #9FC6D6; /* ciel poudré (clair) — hover/outline, lien actif sur navbar sombre */ --amber-text: #4A7787; /* identique à --amber : déjà vérifié AA en texte seul sur papier */ --route: #A85D33; /* abricot foncé — touche chaude dans le dégradé des vignettes graphiques */ --line: #DCE4E6; /* liseré */ --card: #FFFFFF; --brand: #2E3B45; /* alias conservé pour compatibilité avec les vues existantes — aligné sur --ink */ /* ---- Typographie système (façon Apple : SF Pro / -apple-system) ---- */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Consolas, monospace; /* ---- Échelle d'espacement — rythme commun aux deux marques ---- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ /* ---- Rayons — 3 paliers communs + pilule pour les CTA ---- */ --radius-sm: 10px; /* boutons, champs, puces de dropdown */ --radius-md: 16px; /* cartes, dropdowns, tuiles graphiques */ --radius-lg: 22px; /* grandes surfaces (offcanvas, panneaux) */ --radius-pill: 980px; /* boutons d'appel à l'action, façon Apple */ /* ---- Mouvement — courbes et durées, identiques aux deux marques ---- */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; /* ---- Ombres — 3 paliers teintés navy, diffuses, + glow ambre ---- */ --shadow-sm: 0 1px 3px rgba(26, 26, 26, 0.05), 0 1px 2px rgba(26, 26, 26, 0.04); --shadow-md: 0 16px 36px rgba(26, 26, 26, 0.11), 0 3px 10px rgba(26, 26, 26, 0.06); --shadow-lg: 0 28px 60px rgba(26, 26, 26, 0.16), 0 8px 20px rgba(26, 26, 26, 0.08); --shadow-glow: 0 20px 48px rgba(26, 26, 26, 0.14), 0 0 0 1px rgba(77, 77, 77, 0.16); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.65; letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ::selection { background: var(--amber); color: #fff; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); } /* Échelle affinée par niveau : plus la taille grandit, plus le tracking se resserre et l'interlignage se tasse — voix "confiante/précise" propre à MLGS (à comparer à la voix plus légère/ouverte de PML). */ h1 { font-weight: 800; letter-spacing: -0.032em; line-height: 1.06; } h2 { font-weight: 800; letter-spacing: -0.028em; line-height: 1.1; } h3 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.18; } h4 { font-weight: 600; letter-spacing: -0.015em; line-height: 1.22; } h5, h6 { font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; } /* ============== ÉCHELLE "HERO" (titres Bootstrap display-*) ============== Non stylée auparavant en taille : héritait du poids 300 de Bootstrap. Portée à une échelle haute, très grasse, au tracking négatif serré — l'esprit "page produit Apple". Les gabarits utilisent RÉELLEMENT deux classes différentes selon la page (display-3 sur apropos/services/..., display-4 sur accueil/contact/realisations) : les deux sont donc couvertes ici et plus bas dans .hero-section. */ .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { font-family: var(--font-sans); font-weight: 800; line-height: 1.05; } .display-1 { font-size: clamp(3.25rem, 6.5vw, 5.25rem); letter-spacing: -0.035em; } .display-2 { font-size: clamp(2.9rem, 6vw, 4.6rem); letter-spacing: -0.033em; } .display-3 { font-size: clamp(2.6rem, 5.2vw, 4.1rem); letter-spacing: -0.03em; } .display-4 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); letter-spacing: -0.028em; line-height: 1.08; } .display-5 { font-size: clamp(1.85rem, 3.4vw, 2.6rem); font-weight: 700; letter-spacing: -0.024em; line-height: 1.12; } .display-6 { font-size: clamp(1.6rem, 2.8vw, 2.15rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; } .lead { font-weight: 400; line-height: 1.6; letter-spacing: -0.012em; color: var(--steel); } /* h1..h6 et .lead ci-dessus fixent une couleur explicite (var(--ink) / var(--steel)) : ça bat l'héritage de couleur, donc un titre ou un lead placé DANS un conteneur .text-white (ex. les blocs CTA "bg-gradient-primary text-white" en bas de chaque page service, ou le menu tiroir mobile) retombait en texte sombre sur fond sombre — quasi invisible, alors que .text-white n'était posé que sur la section, pas sur le titre lui-même. On rescope explicitement pour que ces titres suivent bien le blanc du conteneur. */ .text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6, .text-white .lead { color: inherit; } .badge { border-radius: var(--radius-pill); font-weight: 600; letter-spacing: 0.02em; } .text-brand { color: var(--ink) !important; } .text-accent { color: var(--amber) !important; } .text-muted { color: var(--steel) !important; } a { color: var(--ink); transition: color var(--duration-fast) var(--ease-standard); text-decoration-thickness: 1px; text-underline-offset: 2px; } /* Focus clavier visible, discret, cohérent avec l'identité ambre */ a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-link:focus-visible { outline: 2px solid var(--amber-soft); outline-offset: 3px; border-radius: var(--radius-sm); } .eyebrow { font-family: var(--font-sans); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber-text); } .rule { width: 60px; height: 2px; border-radius: 2px; background: var(--amber); margin: 20px 0; } .rule.mx-auto { margin-left: auto; margin-right: auto; } /* ============== UTILITY SPACING ============== */ .py-6 { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; } /* ============== HERO (page interne, sans photo) ============== */ .hero-section { background: linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 55%, var(--ink) 100%); color: #fff; position: relative; overflow: hidden; } .hero-section::before { content: ""; position: absolute; inset: 0; z-index: 2; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; } .hero-section .container-fluid, .hero-section .container { position: relative; z-index: 3; } /* Le vrai hero pousse la taille encore plus loin que l'échelle display-* générique ci-dessus : c'est la ligne d'accroche principale du site. Les deux classes réellement utilisées par les gabarits sont couvertes. */ .hero-section .display-3 { font-size: clamp(2.75rem, 6vw, 4.5rem); } .hero-section .display-4 { font-size: clamp(2.4rem, 5.4vw, 3.75rem); } @media (max-width: 768px) { .hero-section .display-3 { font-size: clamp(2.1rem, 9vw, 2.6rem); } .hero-section .display-4 { font-size: clamp(1.9rem, 8vw, 2.35rem); } } /* Photo hero plein écran de l'accueil : remplace l'ancienne carte-réseau animée en canvas, à la demande du client — les visiteurs doivent identifier l'entreprise et ses services au premier coup d'œil, comme sur les sites du secteur (restaurant → un plat, artisan → son métier en image). Version "plein écran" (pas de cadre/encart) : la photo occupe toute la largeur de la section, avec un dégradé sombre superposé pour garder le texte lisible et adoucir un arrière-plan de photo assez chargé. */ .hero-section--photo .hero-section__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; z-index: 0; } .hero-section--photo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, var(--ink) 0%, rgba(15,15,15,0.93) 28%, rgba(15,15,15,0.72) 52%, rgba(15,15,15,0.5) 100%); } /* Variante "texte centré" (Qui sommes-nous, Nos solutions, Nos réalisations, Contact) : contrairement à l'accueil (texte à gauche, photo visible à droite), le texte occupe ici toute la largeur du hero — un voile uniforme garde une lisibilité constante plutôt qu'un dégradé directionnel. */ .hero-section--photo.hero-section--center::after { background: rgba(12, 12, 12, 0.74); } /* La trame quadrillée ::before est pensée pour l'ancien fond dégradé plat (cf. plus haut) : superposée à une vraie photo, elle brouille l'image. On la désactive dès qu'un hero a une photo en fond. */ .hero-section--photo::before { display: none; } /* Plein écran, comme demandé : la photo (et son voile) occupe toute la hauteur visible au chargement, pas seulement une bande — dégagement sous la navbar flottante (position: fixed, transparente en haut de page) inclus, pour que le titre du hero ne passe jamais dessous. */ .hero-section--photo { min-height: 100vh; display: flex; align-items: center; padding-top: clamp(150px, 20vw, 210px); padding-bottom: clamp(64px, 9vw, 110px); } /* Indicateur de défilement : signale aux visiteurs qui découvrent le site qu'il y a du contenu sous le hero, et sert de raccourci cliquable vers la section suivante (cf. script en bas de layouts/app.blade.php). Toujours ancré en bas du hero, quelle que soit sa hauteur (plein écran ou bandeau court type "Mentions légales"). */ .hero-scroll-cue { position: absolute; left: 50%; bottom: var(--space-5); transform: translateX(-50%); z-index: 3; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1.5px solid rgba(255, 255, 255, 0.55); border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 1.15rem; line-height: 1; cursor: pointer; animation: hero-scroll-cue-bounce 2.2s ease-in-out infinite; transition: border-color var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); } .hero-scroll-cue:hover, .hero-scroll-cue:focus-visible { border-color: var(--amber); background: rgba(255, 255, 255, 0.16); color: var(--amber-soft); animation-play-state: paused; } .hero-scroll-cue:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; } @keyframes hero-scroll-cue-bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } } /* ============== SECTIONS ============== */ .section-alternate { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .bg-gradient-primary { background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%); } /* ============== CARDS ============== */ .card { transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); background: var(--card); } .hover-shadow:hover, .hover-lift:hover { box-shadow: var(--shadow-lg) !important; transform: translateY(-6px); border-color: var(--amber); } /* Icônes : marqueur graphique unique (cercle fin + accent ambre), pas de photo/pictogramme coloré */ .icon-circle { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: transparent; border: 1.5px solid var(--amber); color: var(--amber); flex-shrink: 0; transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out); } .icon-circle.icon-lg { width: 64px; height: 64px; font-size: 1.35rem; } /* Micro-interaction : l'icône respire légèrement quand la carte parente est survolée */ .hover-lift:hover .icon-circle, .hover-shadow:hover .icon-circle { transform: scale(1.08); border-color: var(--amber-soft); } .card .bi, .text-primary.fs-1, .text-primary.fs-2 { color: var(--amber) !important; } /* Numérotation façon manifeste (remplace les vignettes photo dans les listes de services) */ .num-marker { font-family: var(--font-mono); color: var(--amber-text); font-size: 0.85rem; letter-spacing: 0.06em; } /* Vignette graphique générique utilisée à la place d'une photo dans les cartes (dégradé + initiale/icône), pour les grilles de type "réalisations" */ .graphic-tile { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-md) var(--radius-md) 0 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(155deg, var(--ink) 0%, var(--ink-2) 60%, var(--route) 130%); color: rgba(255,255,255,0.85); font-size: 2.2rem; border-bottom: 1px solid var(--line); overflow: hidden; } /* La photo est dans un , élément inline sans hauteur propre : un simple width/height:100% sur l' ne se résout pas de façon fiable dans ce contexte (le flex-item picture ne "stretch" pas puisque align-items est en "center"), ce qui laissait apparaître le fond dégradé de la tuile en haut/bas des photos plus larges que 4/3. Le positionnement absolu force la photo à occuper toute la tuile, bord à bord, quel que soit son ratio. */ .graphic-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Recadrages ciblés : quelques photos très panoramiques ou en portrait serré laissent trop de vide (ciel, route) ou coupent le sujet une fois recadrées en 4/3 par défaut (centrage). On zoome/décale sur le sujet au cas par cas. */ .graphic-tile img[src$="location-camry.jpeg"] { transform: scale(1.15); transform-origin: 50% 58%; } .graphic-tile img[src$="hero-visa.jpeg"] { object-position: center 75%; } .graphic-tile img[src$="img9.jpeg"], .graphic-tile img[src$="img10.jpeg"] { object-position: center 20%; } .graphic-tile img[src$="hero-import-export.jpeg"] { transform: scale(1.45); transform-origin: 60% 45%; } .graphic-tile:not([style]) img[src$="about.jpeg"], .graphic-tile:not([style]) img[src$="img2.jpeg"] { transform: scale(1.1); transform-origin: 50% 55%; } .graphic-tile:not([style]) img[src$="img1.jpeg"] { transform: scale(1.1); transform-origin: 50% 50%; } .graphic-tile[style*="21/9"] img[src$="img1.jpeg"] { object-position: center 55%; } .graphic-tile img[src$="img4.jpeg"] { transform: scale(1.08); transform-origin: 50% 30%; } /* ============== NOS VALEURS — manifeste numéroté (accueil) ============== Remplace la grille à 4 colonnes qui laissait une 5e carte orpheline, décentrée, en bas de section. Ici : plus de cartes ni de grille du tout — une liste éditoriale empilée, séparée par des hairlines, avec un gros numéro mono (01-05) façon document de transport devant chaque valeur. Un simple empilement vertical se répartit naturellement quel que soit le nombre d'éléments : aucun risque de ligne orpheline, à aucun palier, aujourd'hui comme après une future modification de la liste. Chaque ligne porte en plus un liseré de couleur décoratif (le "spine"), uniformément --amber-soft, pour rythmer le manifeste sans nouvelle couleur ni texte coloré. Réutilise .icon-circle, .rule, --font-mono et la teinte de .num-marker déjà globaux ; aucune nouvelle variable CSS introduite. Accessibilité : le numéro (.values-manifest__num) et le liseré (.values-manifest__spine) sont purement graphiques et redondants avec l'ordre/le titre affichés juste à côté → aria-hidden côté HTML, dispensés des exigences de contraste (WCAG 1.4.3 texte décoratif / 1.4.11 objet graphique non requis à la compréhension). Le titre et la description restent sur les couples déjà vérifiés AA (var(--ink)/var(--steel) sur --paper/--card). */ .values-manifest__list { max-width: 900px; margin: 0 auto; border-top: 1px solid var(--line); } /* ≥ 992px : le format "liste empilée, colonne resserrée à 900px" laisse énormément de vide de part et d'autre à l'intérieur du .container — sur grand écran, la section bascule donc en 5 colonnes égales pleine largeur (un "tableau de manifeste" plutôt qu'une liste), sans jamais revenir à une grille Bootstrap à nombre de colonnes fixe (4, 3...) : repeat(5, 1fr) correspond exactement au nombre d'éléments, donc toujours pas de colonne orpheline, y compris si une valeur est ajoutée/retirée plus tard (la colonne se contente de s'élargir ou de se resserrer). En dessous de 992px, la liste empilée d'origine reste inchangée : elle se lisait déjà bien en une colonne. */ @media (min-width: 992px) { .values-manifest__list { max-width: none; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); border-top: none; } } .values-manifest__row { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: clamp(var(--space-4), 4vw, var(--space-6)); padding: var(--space-5) var(--space-4) var(--space-5) var(--space-6); border-bottom: 1px solid var(--line); overflow: hidden; transition: background-color var(--duration-base) var(--ease-out); } @media (min-width: 992px) { .values-manifest__row { grid-template-columns: 1fr; justify-items: center; row-gap: var(--space-3); text-align: center; padding: var(--space-6) var(--space-4) var(--space-5); border-bottom: none; border-right: 1px solid var(--line); } .values-manifest__row:last-child { border-right: none; } } .values-manifest__row:hover { background-color: color-mix(in srgb, var(--amber) 5%, transparent); } /* Liseré décoratif : une seule couleur pour les 5 lignes (--amber-soft), pour un rythme uniforme plutôt qu'un dégradé teinte par teinte. */ .values-manifest__spine { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--amber-soft); transition: width var(--duration-base) var(--ease-out); } .values-manifest__row:hover .values-manifest__spine { width: 7px; } /* En colonnes (≥992px), le liseré passe de vertical (bord gauche d'une ligne) à horizontal (bord haut d'une colonne) — même logique, autre axe. */ @media (min-width: 992px) { .values-manifest__spine { left: var(--space-5); right: var(--space-5); top: 0; bottom: auto; width: auto; height: 4px; } .values-manifest__row:hover .values-manifest__spine { width: auto; height: 7px; } } .values-manifest__marker { display: flex; align-items: center; gap: var(--space-3); } /* Gros numéro mono type "repère de manifeste" : discret au repos, s'affirme en couleur d'accent au survol de la ligne. */ .values-manifest__num { font-family: var(--font-mono); font-weight: 600; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); line-height: 1; font-variant-numeric: tabular-nums; min-width: 2ch; color: color-mix(in srgb, var(--ink) 55%, transparent); transition: color var(--duration-base) var(--ease-out); } .values-manifest__row:hover .values-manifest__num { color: var(--amber-text); } .values-manifest__row:hover .values-manifest__icon { transform: scale(1.08); border-color: var(--amber-soft); } .values-manifest__body { min-width: 0; } .values-manifest__title { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem); } .values-manifest__text { font-size: 0.95rem; } @media (min-width: 992px) { /* Numéro au-dessus de l'icône plutôt qu'à côté : lecture verticale naturelle d'une colonne, et le numéro se pose comme un en-tête de colonne façon repère de manifeste plutôt qu'un simple préfixe. */ .values-manifest__marker { flex-direction: column; gap: var(--space-2); } .values-manifest__num { min-width: 0; } .values-manifest__body { display: flex; flex-direction: column; align-items: center; } .values-manifest__title { font-size: 1.15rem; } .values-manifest__text { max-width: 22ch; } } @media (max-width: 420px) { .values-manifest__row { padding-left: var(--space-5); } .values-manifest__marker { gap: var(--space-2); } } /* ============== ACCESSIBILITÉ : LIEN D'ÉVITEMENT ============== */ /* Permet aux utilisateurs clavier de sauter directement au contenu sans traverser la navbar (dropdown "Nos solutions" + sélecteur de marque). */ .skip-link { position: absolute; top: -60px; left: 0.5rem; z-index: 2000; background: var(--ink); color: #ffffff !important; padding: 0.75rem 1.25rem; border-radius: var(--radius-sm); font-weight: 600; text-decoration: none; transition: top var(--duration-base, 0.2s) var(--ease-out, ease); } .skip-link:focus { top: 0.5rem; outline: 2px solid var(--amber); outline-offset: 2px; } /* ============== NAVBAR ============== */ /* Même ton que le haut du hero : pas de barre distincte, pas de flou/ombre, mais un fond plein pour rester lisible sur les pages sans hero sombre. */ .navbar.navbar-floating { background: var(--ink) !important; border-bottom: none; box-shadow: none !important; } /* Navbar "flottante" sur l'accueil : plus de bande solide séparée au-dessus du hero — elle se superpose directement à la photo (transparente), comme sur les sites vitrine classiques. Redevient pleine dès qu'on scrolle, pour rester lisible une fois qu'on quitte la photo. */ .navbar.navbar-floating.navbar-overlay { position: fixed; top: 0; left: 0; right: 0; background: transparent !important; transition: background-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); } .navbar.navbar-floating.navbar-overlay.is-scrolled { background: var(--ink) !important; box-shadow: var(--shadow-md) !important; } .navbar-brand { color: #ffffff !important; font-weight: 700; letter-spacing: -0.012em; } /* Chevron des menus déroulants ("Nos solutions", "Nos marques") toujours sur la même ligne que le libellé, à droite. */ .navbar-nav .nav-link.dropdown-toggle { display: inline-flex; align-items: center; white-space: nowrap; } .navbar-nav .nav-link.dropdown-toggle::after { flex-shrink: 0; margin-left: 0.4em; } .navbar-nav .nav-link { color: rgba(255,255,255,0.82) !important; font-weight: 500; letter-spacing: -0.006em; border-radius: var(--radius-pill); transition: color var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out); position: relative; } .navbar-nav .nav-link:hover { color: #ffffff !important; } /* Fond en pastille au survol (façon "sites vitrine" classiques) : exclu du lien Contact (déjà un bouton .btn-light à part entière) et du rond WhatsApp, qui ont chacun leur propre traitement. */ .navbar-nav .nav-link:not(.btn):not(.whatsapp-nav-link):hover { background-color: rgba(255,255,255,0.12); } /* Icône WhatsApp de la navbar : couleur/forme figées, pas de soulignement animé hérité de .nav-link (non pertinent pour un bouton rond). */ .navbar-nav .nav-link.whatsapp-nav-link, .navbar-nav .nav-link.whatsapp-nav-link:hover { color: #ffffff !important; } .navbar-nav .nav-link.whatsapp-nav-link::after { content: none; } .navbar-nav .nav-link.active, .navbar-nav .nav-link[aria-current="page"], .nav-link.active-page, .navbar-nav .nav-link.active-page { color: var(--amber-soft) !important; background: transparent; } /* Soulignement animé au survol : exclu des .dropdown-toggle ("Nos solutions", "Nos marques"), qui utilisent déjà ::after pour le petit chevron Bootstrap — un élément ne peut avoir qu'un seul ::after, les deux traitements ne peuvent donc pas coexister sur le même lien. */ .navbar-nav .nav-link:not(.dropdown-toggle)::after { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 50%; background-color: var(--amber-soft); transition: width var(--duration-base) var(--ease-out); transform: translateX(-50%); } .navbar-nav .nav-link:not(.dropdown-toggle):hover::after, .navbar-nav .nav-link.active-page:not(.dropdown-toggle)::after { width: 60%; } .dropdown-menu { background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); margin-top: 12px; padding: 0.5rem; } .dropdown-item { transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); border-radius: var(--radius-sm); margin: 2px 6px; width: calc(100% - 12px); } .dropdown-item:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); } /* Mega-menu "Nos solutions" : 2 colonnes thématiques plutôt qu'une longue liste verticale, pour rester scannable avec 7 solutions au catalogue. */ .dropdown-menu-solutions { min-width: 480px; } .dropdown-menu-solutions .dropdown-header { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; } .dropdown-item.active-page { background: color-mix(in srgb, var(--amber) 12%, transparent) !important; border-left: 3px solid var(--amber); padding-left: calc(1rem - 3px) !important; } .offcanvas .nav-link.active-page { background: rgba(255,255,255,0.12) !important; border-left: 3px solid var(--amber-soft) !important; padding-left: calc(1.5rem - 3px) !important; border-radius: var(--radius-sm); color: #ffffff !important; } /* ============== BOUTONS ============== */ /* .btn-modern / .btn-primary / .btn-amber reçoivent un rayon pilule façon Apple (CTA) : on cible volontairement les classes de marque existantes plutôt que le .btn Bootstrap générique, pour ne pas modifier des boutons hors-sujet (.btn-light/.btn-dark/.btn-outline-light déjà présents dans les vues, notamment côté PML) sans le vouloir. */ .btn-modern { border-radius: var(--radius-pill); padding: 14px 32px; font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.006em; transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); } .btn-modern:hover { transform: translateY(-3px) scale(1.01); box-shadow: var(--shadow-lg); } .btn-modern:active { transform: translateY(-1px) scale(0.98); } .btn-primary { background: var(--ink); border-color: var(--ink); border-radius: var(--radius-pill); transition: background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); } .btn-primary:hover { background: var(--ink-2); border-color: var(--ink-2); } .btn-amber { background: var(--amber); border-color: var(--amber); /* Blanc plutôt que le #1E1300 d'origine : ce texte sombre était calibré pour l'ambre chaud (#C97A24) et tombe à ~2:1 de contraste sur le gris #4D4D4D de la palette temporaire (voir palette grise en tête de fichier) — le bouton devenait quasi illisible, notamment désactivé (ex. "Suivant" du simulateur de devis). Le blanc reste lisible dans les deux palettes. */ color: #fff; border-radius: var(--radius-pill); transition: background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); } .btn-amber:hover { background: var(--amber-soft); border-color: var(--amber-soft); /* --amber-soft est le ciel pastel CLAIR (contrairement à --amber, plus foncé) : le texte blanc du bouton (état de base) n'y est plus lisible une fois survolé, donc on bascule sur l'encre foncée pour cet état. */ color: var(--ink); } /* ============== SIMULATEUR DE DEVIS EXPRESS (Import/Export) ============== */ /* Formulaire multi-étapes 100% client (pas de calcul de prix réel) : compose un message récapitulatif envoyé via WhatsApp ou repris par le formulaire de contact existant. Réutilise .custom-input pour rester cohérent avec le reste des formulaires du site. */ .quote-sim-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .quote-sim-progress { height: 6px; background: var(--line); border-radius: var(--radius-pill); overflow: hidden; } .quote-sim-progress-bar { height: 100%; background: var(--amber); border-radius: var(--radius-pill); transition: width var(--duration-base) var(--ease-out); } .btn-whatsapp-solid { background: #25D366; border: 1px solid #25D366; color: #fff; border-radius: var(--radius-pill); transition: background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); } .btn-whatsapp-solid:hover, .btn-whatsapp-solid:focus { background: #1DA851; border-color: #1DA851; color: #fff; } .btn-outline-ink { background: transparent; border: 1px solid var(--ink); color: var(--ink); border-radius: var(--radius-pill); transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); } .btn-outline-ink:hover, .btn-outline-ink:focus { background: var(--ink); color: #fff; } /* ============== FORMULAIRE DE CONTACT ============== */ /* .custom-input est déjà posé sur les champs du formulaire de contact (resources/views/contact.blade.php) mais n'avait jusqu'ici aucune règle dédiée dans cette feuille : les champs retombaient sur le bleu de focus par défaut de Bootstrap. On leur donne ici une finition cohérente avec la marque et le système de tokens. NB technique (vérifié dans le gabarit) : contact.blade.php contient encore un