/* ========================================================================== Global Auto Import — SITE PUBLIC (vitrine) -------------------------------------------------------------------------- Chargé après design-system.css, et uniquement par _PublicLayout. Fichier séparé volontairement : le back-office n'a aucune raison de payer le poids de ces styles, et la vitrine évolue à un rythme différent. Elle réutilise les mêmes tokens que le back-office — donc la même identité — mais avec une échelle typographique et des espacements plus généreux : un outil consulté toute la journée doit être dense, une vitrine doit respirer. Direction visuelle : "concessionnaire premium" plutôt que "SaaS générique" — un bleu plus clair et plus vif que celui du back-office, une display condensée à forte carrure (Big Shoulders) au lieu d'Inter partout, la vidéo d'agence en fond de hero. Tout est scopé sous .pub-body : le back-office garde sa propre teinte de bleu et sa typo intactes. ========================================================================== */ /* -------------------------- Display : Big Shoulders ---------------------- Fichier variable unique (axe wght complet) servi comme un font-face à plage de graisse — voir wwwroot/lib/fonts/fonts.css pour la convention Inter/Cairo déjà en place. Sous-ensemble latin uniquement : le repli sur Cairo est automatique pour l'arabe (Big Shoulders n'a pas de glyphes arabes). */ @font-face { font-family: 'Big Shoulders'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/lib/fonts/files/big-shoulders-latin-variable.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } .pub-body { background: var(--ta-bg); /* ---- Palette showroom (scopée : n'affecte jamais le back-office) ---- */ --pub-ink: #161412; /* noir chaud — pied de page, base du hero */ --pub-ink-2: #221E1A; /* surface sombre élevée */ --pub-blue: #FAA02E; /* accent — texte/icônes sur fond sombre ou clair */ --pub-blue-deep: #C78305; /* accent — fonds pleins (contraste texte blanc) */ --pub-blue-glow: #FBC55F; /* survols, lueurs, teintes claires */ --pub-line-dark: rgba(255, 255, 255, 0.12); /* Ré-accorde l'orange du design system sur une teinte plus claire/vive, partout où les ~67 vues du back-office lisent déjà la famille de jetons ta-brand et bs-primary. Comme ces propriétés sont posées directement sur , elles masquent la valeur héritée de :root sans toucher au thème clair/sombre ni au back-office (qui garde sa propre nuance d'orange). */ --ta-brand-50: #FFF3E0; --ta-brand-500: var(--pub-blue); --ta-brand-600: var(--pub-blue-deep); --ta-brand-700: #A06904; --bs-primary: var(--pub-blue); --bs-primary-rgb: 250, 160, 46; --bs-link-color: var(--pub-blue-deep); --bs-link-hover-color: var(--pub-blue); --bs-link-color-rgb: 199, 131, 5; --ta-ring: 0 0 0 4px rgba(250, 160, 46, 0.24); --pub-font-display: 'Big Shoulders', 'Cairo', var(--ta-font-sans); } /* Le badge de marque partagé (.ta-sidebar__mark, "TA") a une lueur bleue codée en dur dans design-system.css, calée sur le bleu du back-office — la reteinter ici pour suivre le bleu plus clair du site public. */ .pub-body .ta-sidebar__mark { box-shadow: 0 2px 8px rgba(250, 160, 46, 0.4); } .pub-container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--ta-space-5); } /* ------------------------------- En-tête -------------------------------- */ .pub-header { position: sticky; top: 0; z-index: var(--ta-z-topbar); background: color-mix(in srgb, var(--ta-surface) 90%, transparent); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--ta-border); } .pub-header__inner { display: flex; align-items: center; gap: var(--ta-space-5); min-height: 72px; position: relative; } .pub-brand { display: inline-flex; align-items: center; gap: var(--ta-space-3); text-decoration: none; color: var(--ta-text); flex-shrink: 0; } .pub-brand__name { font-family: var(--pub-font-display); font-weight: 700; font-size: var(--ta-text-2xl); letter-spacing: 0.01em; text-transform: uppercase; } .pub-header__actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--ta-space-2); } /* flex:1 + justify-content:center plutôt qu'une simple position entre la marque et les actions : le nav grandit pour occuper l'espace restant et se centre dedans, marque et actions restant chacune ancrées à leur bord. */ .pub-nav { display: flex; flex: 1 1 auto; justify-content: center; gap: var(--ta-space-1); } .pub-nav__link { padding: 0.5rem 0.875rem; border-radius: var(--ta-radius-md); color: var(--ta-text-muted); text-decoration: none; font-weight: 500; white-space: nowrap; transition: background var(--ta-dur-fast) var(--ta-ease), color var(--ta-dur-fast) var(--ta-ease); } .pub-nav__link:hover { background: var(--ta-surface-3); color: var(--ta-text); } .pub-nav__link.active { color: var(--ta-brand-600); background: var(--ta-brand-50); } /* Le seuil de repli (1399.98px, pas 991.98px comme un header back-office classique) est plus large qu'un header applicatif ordinaire : 6 liens de navigation + 3 boutons d'action (4 pour un client connecté, avec le bouton Déconnexion) + le nom de marque en Big Shoulders (plus large qu'Inter) ne tiennent plus sur une seule ligne avant ~1250-1300px — vérifié avec un vrai overflow horizontal à 1024px, puis encore limite à 1200px, avant ce correctif. Marge conservée volontairement plutôt que de recoller au pixel près à la limite mesurée. */ @media (max-width: 1399.98px) { .pub-nav { position: absolute; inset-inline: 0; top: 100%; flex-direction: column; background: var(--ta-surface); border-bottom: 1px solid var(--ta-border); padding: var(--ta-space-3); box-shadow: var(--ta-shadow-lg); display: none; } .pub-nav.is-open { display: flex; } } /* --------------------------------- Hero --------------------------------- Vidéo d'agence en fond, avec un voile "fumé" teinté bleu nuit par-dessus : sans ce voile un texte blanc perd toute lisibilité dès que la vidéo passe sur un plan clair. Le dégradé reste posé sur .pub-hero en repli — si la vidéo ne charge pas (réseau agence capricieux, lecture bloquée), le hero garde un fond correct plutôt qu'un rectangle vide. */ .pub-hero { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--pub-ink) 0%, var(--pub-ink-2) 55%, #33291A 100%); color: #fff; padding-block: clamp(3.5rem, 9vw, 7rem); } /* Sélecteurs à deux classes (.pub-hero .pub-hero__video) plutôt qu'une seule : la règle .pub-hero > * plus bas dans ce fichier pose position:relative et z-index:1 sur TOUS les enfants directs, y compris ces calques de fond — à spécificité égale (une classe), la règle la plus tardive dans le fichier gagnerait et casserait le positionnement absolu de la vidéo et du voile. */ .pub-hero .pub-hero__video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; } .pub-hero .pub-hero__scrim { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(10, 9, 8, 0.86) 0%, rgba(10, 9, 8, 0.58) 45%, rgba(10, 9, 8, 0.88) 100%), radial-gradient(900px 420px at 20% 10%, rgba(250, 160, 46, 0.30), transparent 65%); } .pub-hero > * { position: relative; z-index: 1; } /* ---- Signature : "plaque" façon plaque constructeur / étiquette VIN ---- Petits rectangles à filet fin et lettrage espacé, réutilisés pour l'eyebrow, les statistiques et les prix — l'idée d'une fiche technique automobile plutôt qu'un badge SaaS générique. */ .pub-plate { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.3rem 0.7rem; border-block: 1px solid rgba(255, 255, 255, 0.28); font-family: var(--ta-font-sans); font-size: var(--ta-text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pub-blue-glow); } .pub-hero__eyebrow { margin-bottom: var(--ta-space-6); color: rgba(255, 255, 255, 0.92); } .pub-hero__eyebrow i { color: var(--pub-blue-glow); } .pub-hero__title { /* design-system.css cible directement le tag h1 (color: var(--ta-text)) — une règle plus spécifique que l'héritage depuis .pub-hero, donc sans cet override le titre hérite d'une couleur sombre illisible sur fond nuit. */ color: #fff; font-family: var(--pub-font-display); font-size: clamp(2.4rem, 6.4vw, 4.4rem); font-weight: 800; line-height: 0.98; letter-spacing: -0.01em; margin: 0 0 var(--ta-space-4); max-width: 18ch; } .pub-hero__lead { font-size: clamp(1rem, 2vw, var(--ta-text-xl)); color: rgba(255, 255, 255, 0.72); max-width: 56ch; margin: 0 0 var(--ta-space-8); } .pub-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ta-space-3); } .pub-hero__stats { display: flex; flex-wrap: wrap; gap: var(--ta-space-8); margin-top: var(--ta-space-10); padding-top: var(--ta-space-6); border-top: 1px solid rgba(255, 255, 255, 0.14); } .pub-stat__value { font-family: var(--pub-font-display); font-size: var(--ta-text-4xl); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .pub-stat__label { font-size: var(--ta-text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.56); margin-top: 6px; } /* ---- Entrée orchestrée : le hero se lève en cascade au chargement, une seule fois — c'est le seul moment animé "automatique" de la page. ---- */ @keyframes pub-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .pub-hero__eyebrow, .pub-hero__title, .pub-hero__lead, .pub-hero__actions, .pub-hero__stats { animation: pub-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; } .pub-hero__title { animation-delay: 0.06s; } .pub-hero__lead { animation-delay: 0.14s; } .pub-hero__actions { animation-delay: 0.22s; } .pub-hero__stats { animation-delay: 0.30s; } @media (prefers-reduced-motion: reduce) { .pub-hero__eyebrow, .pub-hero__title, .pub-hero__lead, .pub-hero__actions, .pub-hero__stats { animation: none; } } /* ------------------------------- Sections ------------------------------- */ .pub-section { padding-block: clamp(3rem, 7vw, 5rem); } .pub-section--alt { background: var(--ta-surface); border-block: 1px solid var(--ta-border); } .pub-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ta-space-4); flex-wrap: wrap; margin-bottom: var(--ta-space-8); } .pub-section__title { font-family: var(--pub-font-display); font-size: clamp(1.9rem, 3.6vw, 2.75rem); font-weight: 800; line-height: 1.04; letter-spacing: 0; margin: 0; } .pub-section__sub { color: var(--ta-text-muted); margin: var(--ta-space-2) 0 0; } /* ---------------------------- Cartes service ---------------------------- */ .pub-service { position: relative; height: 100%; padding: var(--ta-space-6); background: var(--ta-surface); border: 1px solid var(--ta-border); border-top: 3px solid transparent; border-radius: var(--ta-radius-xl); transition: transform var(--ta-dur) var(--ta-ease-out), box-shadow var(--ta-dur) var(--ta-ease-out), border-top-color var(--ta-dur) var(--ta-ease-out); } .pub-service:hover { transform: translateY(-3px); box-shadow: var(--ta-shadow-lg); border-top-color: var(--pub-blue); } .pub-service__icon { width: 52px; height: 52px; border-radius: var(--ta-radius-lg); display: grid; place-items: center; font-size: var(--ta-text-xl); background: var(--ta-brand-50); color: var(--ta-brand-600); margin-bottom: var(--ta-space-4); } .pub-service__title { font-family: var(--pub-font-display); font-size: var(--ta-text-2xl); font-weight: 700; letter-spacing: 0.01em; margin: 0 0 var(--ta-space-2); } .pub-service__text { color: var(--ta-text-muted); margin: 0; } /* Étape numérotée du processus de location. */ .pub-step__num { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--ta-brand-500); color: #fff; margin-bottom: var(--ta-space-3); } /* ------------------------------ Pied de page ---------------------------- */ .pub-footer { background: var(--pub-ink); color: rgba(255, 255, 255, 0.72); padding-block: var(--ta-space-12) var(--ta-space-6); margin-top: var(--ta-space-16); } .pub-footer .pub-brand__name { color: #fff; } .pub-footer__title { font-size: var(--ta-text-sm); font-weight: 600; letter-spacing: var(--ta-tracking-wide); text-transform: uppercase; color: #fff; margin-bottom: var(--ta-space-4); } .pub-footer__text { color: rgba(255, 255, 255, 0.66); font-size: var(--ta-text-base); } .pub-footer__link { display: block; color: rgba(255, 255, 255, 0.66); text-decoration: none; padding: 3px 0; transition: color var(--ta-dur-fast) var(--ta-ease); } .pub-footer__link:hover { color: var(--pub-blue-glow); } .pub-footer a { color: rgba(255, 255, 255, 0.85); } .pub-footer a:hover { color: var(--pub-blue-glow); } .pub-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--ta-space-3); margin-top: var(--ta-space-10); padding-top: var(--ta-space-5); border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: var(--ta-text-sm); } /* ------------------- Cartes véhicule / modèle / occasion ---------------- .ta-vcard est un composant partagé avec le back-office (design-system.css). On ne le modifie pas : on affine seulement son rendu sous .pub-body, pour que l'étiquette de prix ressemble à une plaque tarifaire de concession plutôt qu'à une pastille sombre générique — sans rien changer côté admin. */ .pub-body .ta-vcard__price { background: var(--pub-ink); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--ta-radius-sm); font-family: var(--pub-font-display); font-size: var(--ta-text-md); font-weight: 700; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; } .pub-body .ta-vcard__title { font-family: var(--pub-font-display); font-size: var(--ta-text-lg); font-weight: 700; } /* -------------------------- WhatsApp flottant --------------------------- Placé en bas à droite (inversé en RTL) : en Algérie, WhatsApp est le canal de contact principal, il ne doit jamais être à plus d'un geste. */ .pub-wa-fab { position: fixed; inset-inline-end: var(--ta-space-5); bottom: var(--ta-space-5); width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #fff; font-size: 1.6rem; box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4); z-index: var(--ta-z-toast); text-decoration: none; transition: transform var(--ta-dur) var(--ta-ease-out); } .pub-wa-fab:hover { transform: scale(1.07); color: #fff; } @media (max-width: 575.98px) { .pub-wa-fab { width: 50px; height: 50px; font-size: 1.4rem; } .pub-hero__stats { gap: var(--ta-space-5); } .pub-hero__actions .btn { flex: 1; justify-content: center; } } /* ---------------------------- Révélation au scroll ----------------------- Un seul comportement de mouvement en dehors du hero : les sections entrent discrètement quand elles atteignent le viewport. pub-reveal.js bascule .is-visible via IntersectionObserver. Par défaut .pub-reveal est pleinement visible : le contenu ne doit jamais dépendre du JavaScript pour apparaître (progressive enhancement, cf. tamauto-ui.js). Seul pub-reveal.js — une fois confirmé actif — ajoute .pub-reveal-ready sur et bascule alors l'état caché/animé. */ html.pub-reveal-ready .pub-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } html.pub-reveal-ready .pub-reveal.is-visible { opacity: 1; transform: translateY(0); } html.pub-reveal-ready .pub-reveal-group .pub-reveal:nth-child(2) { transition-delay: 0.06s; } html.pub-reveal-ready .pub-reveal-group .pub-reveal:nth-child(3) { transition-delay: 0.12s; } html.pub-reveal-ready .pub-reveal-group .pub-reveal:nth-child(4) { transition-delay: 0.18s; } @media (prefers-reduced-motion: reduce) { html.pub-reveal-ready .pub-reveal { opacity: 1; transform: none; transition: none; } }