/* Identité du site. Bootstrap 5.3 fournit la grille et les composants ; ce fichier fournit tout le reste : couleurs, typographie, surfaces. Le site est sombre en permanence (`data-bs-theme="dark"` sur ) : on travaille sur des vidéos, et un fond clair fatigue à côté des aperçus. */ /* --- Polices, servies depuis le site : aucune requête vers un tiers, ce que la CSP interdit de toute façon. Space Grotesk porte les titres, Inter le texte courant. --------------------------------------------------------- */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/space-grotesk-latin.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/inter-v12-latin-300.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-v12-latin-regular.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-v12-latin-500.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/inter-v12-latin-700.woff2') format('woff2'); } /* --- Jetons ------------------------------------------------------------- */ :root { --cm-bg: #0b0b0e; --cm-surface: #131318; --cm-line: #26262f; --cm-text: #e7e8ec; --cm-muted: #9b9ca6; --cm-brand: #ccf94f; /* le vert des sous-titres « neon », signature du produit */ --cm-brand-dim: #b1dd33; --cm-nav-h: 4.5rem; } [data-bs-theme='dark'] { --bs-body-bg: var(--cm-bg); --bs-body-color: var(--cm-text); --bs-emphasis-color: #fff; --bs-secondary-color: var(--cm-muted); --bs-secondary-color-rgb: 155, 156, 166; --bs-secondary-bg: var(--cm-surface); --bs-tertiary-bg: #101015; --bs-border-color: var(--cm-line); --bs-border-color-translucent: var(--cm-line); --bs-link-color: var(--cm-brand); --bs-link-hover-color: var(--cm-brand-dim); /* Bootstrap 5.3 colore les liens avec la variante -rgb (il y applique une opacité) : sans ces deux-là, les liens restent au bleu du navigateur. */ --bs-link-color-rgb: 204, 249, 79; --bs-link-hover-color-rgb: 177, 221, 51; --bs-focus-ring-color: rgba(204, 249, 79, .35); --bs-body-font-family: 'Inter', system-ui, sans-serif; --bs-border-radius: .5rem; --bs-border-radius-sm: .25rem; } /* --- Typographie -------------------------------------------------------- */ h1, h2, h3, .h1, .h2, .h3, .navbar-brand, .display-4 { font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif; letter-spacing: -.02em; } /* Sans ça une accroche de deux lignes se coupe n'importe où : la seconde ligne se retrouve avec un mot isolé. */ h1, .display-4 { text-wrap: balance; } /* `.text-secondary` ne lit pas `--bs-secondary-color` mais `--bs-secondary-rgb`, qui est la couleur de thème « secondary » — celle des pastilles. La toucher déteindrait sur les badges, donc on corrige l'utilitaire seul : le gris de Bootstrap tombe à 4,2:1 sur ce fond, sous le seuil AA de 4,5:1. */ .text-secondary { color: var(--cm-muted) !important; } /* Blanc sur le gris moyen de Bootstrap, en gras 12 px, passe sous 4,5:1 : la pastille devient sombre et le texte clair. */ .badge.text-bg-secondary { background-color: #2b2b34 !important; color: var(--cm-text) !important; } /* Les chiffres de quota, de durée et de taille sont alignés en colonne dans les listes : sans chasse fixe, ils dansent d'une ligne à l'autre. */ .badge, .table, .list-group .small { font-variant-numeric: tabular-nums; } /* --- Barre de navigation ------------------------------------------------ */ .navbar { --bs-navbar-padding-y: 1rem; --bs-navbar-color: var(--cm-muted); --bs-navbar-hover-color: var(--cm-text); --bs-navbar-active-color: var(--cm-brand); background-color: rgba(11, 11, 14, .88); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; } /* Posée par chrome.js dès qu'on défile : la barre se détache du contenu qui passe dessous, sans ombre portée. */ .navbar.scrolled { border-bottom-color: var(--cm-line); } .navbar-brand { color: var(--cm-text); font-weight: 700; } .navbar-brand svg { color: var(--cm-brand); } /* La barre est en position fixe : sans ce décalage, le titre de chaque page passe dessous. */ main { padding-top: var(--cm-nav-h); } /* Une ancre visée depuis un lien interne ne doit pas se retrouver sous la barre. */ html { scroll-padding-top: var(--cm-nav-h); } /* --- Surfaces ----------------------------------------------------------- */ .card { --bs-card-bg: var(--cm-surface); --bs-card-border-color: var(--cm-line); --bs-card-cap-bg: transparent; } .list-group { --bs-list-group-bg: transparent; --bs-list-group-border-color: var(--cm-line); --bs-list-group-action-hover-bg: #191920; --bs-list-group-action-hover-color: var(--cm-text); } /* Une liste posée dans une carte s'aligne sur le titre de cette carte, sinon les deux se décalent de 8 px et la colonne paraît bancale. */ .card .list-group-item { --bs-list-group-item-padding-x: 1.5rem; } /* La barre d'avancement est la seule chose qui bouge sur la page d'un traitement : elle porte la couleur du site, pas le bleu de Bootstrap. */ .progress { --bs-progress-bg: #1c1c23; } .progress-bar { background-color: var(--cm-brand); } .progress-bar.bg-danger { background-color: var(--bs-danger) !important; } .site-footer { border-top: 1px solid var(--cm-line); color: var(--cm-muted); } /* --- Actions ------------------------------------------------------------ */ .btn { font-weight: 500; } .btn-primary { --bs-btn-bg: var(--cm-brand); --bs-btn-border-color: var(--cm-brand); --bs-btn-color: var(--cm-bg); --bs-btn-hover-bg: var(--cm-brand-dim); --bs-btn-hover-border-color: var(--cm-brand-dim); --bs-btn-hover-color: var(--cm-bg); --bs-btn-active-bg: var(--cm-brand-dim); --bs-btn-active-border-color: var(--cm-brand-dim); --bs-btn-active-color: var(--cm-bg); --bs-btn-disabled-bg: var(--cm-brand); --bs-btn-disabled-border-color: var(--cm-brand); --bs-btn-disabled-color: var(--cm-bg); font-weight: 600; } .btn-outline-primary { --bs-btn-color: var(--cm-brand); --bs-btn-border-color: #3f4a1f; --bs-btn-hover-bg: var(--cm-brand); --bs-btn-hover-border-color: var(--cm-brand); --bs-btn-hover-color: var(--cm-bg); --bs-btn-active-bg: var(--cm-brand); --bs-btn-active-border-color: var(--cm-brand); --bs-btn-active-color: var(--cm-bg); } .text-bg-primary { background-color: var(--cm-brand) !important; color: var(--cm-bg) !important; } /* --- Formulaires -------------------------------------------------------- */ .form-control:focus, .form-select:focus { border-color: var(--cm-brand-dim); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); } .form-range::-webkit-slider-thumb { background-color: var(--cm-brand); } .form-range::-moz-range-thumb { background-color: var(--cm-brand); } /* Le rail par défaut du thème sombre est à deux points du fond de la carte : on ne voyait que la pastille, sans savoir où elle pouvait aller. */ .form-range::-webkit-slider-runnable-track { background-color: var(--cm-line); } .form-range::-moz-range-track { background-color: var(--cm-line); } /* --- Aperçu du montage (page d'accueil) --------------------------------- Une maquette en CSS, pas une image : elle montre le format 9:16, la vidéo source en haut, le gameplay en bas et la bande de sous-titres au milieu. */ .clip-mock { aspect-ratio: 9 / 16; /* Sans largeur explicite, la maquette est un élément flex sans contenu : elle s'écrase à zéro et le ratio n'a plus rien à mettre en forme. */ width: 100%; max-width: 260px; border: 1px solid var(--cm-line); border-radius: 1rem; overflow: hidden; display: grid; grid-template-rows: 1fr 1fr; position: relative; background: var(--cm-surface); } .clip-mock-src { background: linear-gradient(150deg, #2b2b3a, #14141c 70%); display: grid; place-items: center; } /* Le triangle de lecture dit « vidéo » sans avoir à charger une vidéo. */ .clip-mock-src::after { content: ''; border-style: solid; border-width: .7rem 0 .7rem 1.2rem; border-color: transparent transparent transparent rgba(255, 255, 255, .35); } /* Les diagonales évoquent le gameplay défilant sous le clip. */ .clip-mock-game { background: repeating-linear-gradient(115deg, #1a2418 0 14px, #141c13 14px 28px); } .clip-mock-subs { position: absolute; inset: auto .5rem 40%; text-align: center; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: .9rem; letter-spacing: .02em; color: var(--cm-brand); text-shadow: 0 0 12px rgba(204, 249, 79, .55); } .clip-mock-ratio { position: absolute; top: .5rem; right: .5rem; font-size: .7rem; padding: .1rem .4rem; border-radius: .25rem; background: rgba(0, 0, 0, .55); color: var(--cm-muted); } /* --- Étapes de la page d'accueil --------------------------------------- Une bande numérotée plutôt que quatre cartes : les étapes se lisent comme une suite, pas comme quatre produits au choix. */ .steps { counter-reset: etape; border-top: 1px solid var(--cm-line); } .step { counter-increment: etape; border-bottom: 1px solid var(--cm-line); padding: 1.25rem 0; display: flex; gap: 1.25rem; align-items: baseline; } .step::before { content: counter(etape, decimal-leading-zero); font-family: 'Space Grotesk', sans-serif; color: var(--cm-brand); font-weight: 700; min-width: 2.5rem; } /* Les onglets restent au bleu de Bootstrap sans ça, et les onglets inactifs ressortent autant que l'actif puisqu'ils héritent de la couleur des liens. */ .nav-pills { --bs-nav-pills-link-active-bg: var(--cm-brand); --bs-nav-pills-link-active-color: var(--cm-bg); --bs-nav-link-color: var(--cm-muted); --bs-nav-link-hover-color: var(--cm-text); } /* --- Compteurs du back office ------------------------------------------- Une bande de chiffres, pas une mosaïque de cartes : ce sont des valeurs à lire d'un coup d'œil, aucune n'est cliquable. */ .stats { display: flex; flex-wrap: wrap; gap: 2rem 2.5rem; padding: 1.25rem 1.5rem; border: 1px solid var(--cm-line); border-radius: var(--bs-border-radius); background: var(--cm-surface); } .stat-n { font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } .stat-l { font-size: .8rem; color: var(--cm-muted); } /* --- Divers ------------------------------------------------------------- */ /* Un clip est vertical (9:16) : sans plafond il occuperait toute la hauteur de l'écran dans la liste. */ .clip-preview { max-width: 160px; } /* Les URL YouTube et les noms de clips sont longs et sans espaces : ils pousseraient la mise en page en largeur sur mobile. */ .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* Un message vide ne doit pas laisser un cadre d'alerte vide à l'écran. */ .msg:empty { display: none !important; } /* Le tableau des segments déborde en largeur sur mobile : il défile dans sa propre boîte plutôt que d'élargir la page. */ .table-scroll { overflow-x: auto; } /* Deux mouvements, et seulement deux : la carte se détache au survol, le bouton s'enfonce au clic. Tout le reste est immobile. */ .card, .btn { transition: border-color .15s ease-out, transform .1s ease-out, background-color .15s ease-out; } /* Un liseré en ombre interne plutôt qu'une bordure : la ligne ne se décale pas de deux pixels au passage de la souris. */ .list-group-item-action:hover { box-shadow: inset 2px 0 0 var(--cm-brand); } .btn:active { transform: translateY(1px); } @media (prefers-reduced-motion: reduce) { .card, .btn { transition: none; } .btn:active { transform: none; } html { scroll-behavior: auto; } }