/* ========================================================================== OxiTheme - Theme "Oximoron" (refonte 2026) Jetons de design issus de la maquette : accent violet, polices Sora (texte) et JetBrains Mono (libelles techniques). Deux palettes : sombre par defaut, claire via [data-theme="light"] pose sur par oxi-theme.js. ========================================================================== */ /* Palette sombre : theme par defaut (aucun attribut = sombre). */ :root, [data-theme="dark"] { /* --- Fonds --- */ --oxi-fond: #0a0710; --oxi-fond-alt: #0d0914; --oxi-carte: #100b1a; --oxi-fond-flou: rgba(10, 7, 16, .82); --oxi-champ: #0d0914; /* --- Bordures --- */ --oxi-bordure: #1e1528; --oxi-bordure-forte: #2c2038; --oxi-bordure-fine: #17101f; /* --- Textes --- */ --oxi-texte: #e9e4f2; --oxi-texte-fort: #f2eefa; --oxi-texte-doux: #b8aecb; --oxi-texte-faible: #a79cbd; --oxi-texte-moyen: #9d92b3; --oxi-texte-mono: #8b7fa3; --oxi-texte-tres-faible: #6d6383; --oxi-texte-copyright: #4e4661; /* --- Accent --- */ --oxi-accent: #8b3dff; --oxi-accent-clair: #c9a7ff; --oxi-accent-tres-clair: #efe3ff; --oxi-accent-sombre: #6b2fd6; --oxi-accent-fond: #150c26; --oxi-accent-texte: #d5bcff; --oxi-sur-accent: #fff; --oxi-accent-rgb: 139, 61, 255; --oxi-lien-rgb: 201, 167, 255; --oxi-accent-glow: 0 0 32px rgba(139, 61, 255, .45); --oxi-accent-glow-fort: 0 0 44px rgba(139, 61, 255, .6); --oxi-halo-teinte: rgba(139, 61, 255, .22); --oxi-filet: #2a1d3d; --oxi-filet-lueur: rgba(139, 61, 255, .38); --oxi-carte-lueur: 0 0 22px -8px rgba(139, 61, 255, .45); --oxi-voile-bandeau: linear-gradient(to top, rgba(10, 7, 16, .96), rgba(10, 7, 16, .15)); --oxi-visuel-halo: 0 28px 60px -22px rgba(139, 61, 255, .65), 0 0 90px -30px rgba(139, 61, 255, .5); --oxi-visuel-halo-fort: 0 34px 70px -18px rgba(139, 61, 255, .85), 0 0 110px -26px rgba(139, 61, 255, .7); --oxi-visuel-reflet: rgba(255, 255, 255, .16); } /* Palette claire : appliquee par le selecteur de theme. */ [data-theme="light"] { --oxi-fond: #f7f5fa; --oxi-fond-alt: #efecf4; --oxi-carte: #ffffff; --oxi-fond-flou: rgba(247, 245, 250, .85); --oxi-champ: #fbfafd; --oxi-bordure: #e2dcec; --oxi-bordure-forte: #d8d0e6; --oxi-bordure-fine: #ece7f3; --oxi-texte: #241f30; --oxi-texte-fort: #15111e; --oxi-texte-doux: #4d4560; --oxi-texte-faible: #4d4560; --oxi-texte-moyen: #5c5470; --oxi-texte-mono: #6f6683; --oxi-texte-tres-faible: #6f6683; --oxi-texte-copyright: #9a92a8; --oxi-accent: #7c2bff; --oxi-accent-clair: #5a1fd6; --oxi-accent-tres-clair: #2f0d78; --oxi-accent-sombre: #c3a3ff; --oxi-accent-fond: #f1e9ff; --oxi-accent-texte: #5a1fd6; --oxi-sur-accent: #fff; --oxi-accent-rgb: 124, 43, 255; --oxi-lien-rgb: 90, 31, 214; --oxi-accent-glow: 0 6px 20px rgba(124, 43, 255, .28); --oxi-accent-glow-fort: 0 8px 26px rgba(124, 43, 255, .38); --oxi-halo-teinte: rgba(124, 43, 255, .14); --oxi-filet: #ddd3ee; --oxi-filet-lueur: rgba(124, 43, 255, .22); --oxi-carte-lueur: 0 4px 18px -10px rgba(124, 43, 255, .35); --oxi-voile-bandeau: linear-gradient(to top, rgba(247, 245, 250, .96), rgba(247, 245, 250, .15)); --oxi-visuel-halo: 0 26px 50px -24px rgba(124, 43, 255, .42), 0 0 70px -34px rgba(124, 43, 255, .3); --oxi-visuel-halo-fort: 0 32px 60px -20px rgba(124, 43, 255, .55), 0 0 90px -28px rgba(124, 43, 255, .4); --oxi-visuel-reflet: rgba(255, 255, 255, .55); } :root { /* --- Rythme --- */ --oxi-largeur-max: 1240px; --oxi-marge-h: clamp(20px, 4vw, 40px); --oxi-rayon: 14px; /* --- Polices --- */ --oxi-police: "Sora", system-ui, -apple-system, sans-serif; --oxi-police-mono: "JetBrains Mono", ui-monospace, monospace; } /* -------------------------------------------------------------------------- Alignement de Bootstrap sur le theme Oxi : on branche ses variables sur les notres plutot que de lutter contre ses classes (l'admin continue de fonctionner, et suit automatiquement le basculement clair / sombre). -------------------------------------------------------------------------- */ :root { --bs-body-bg: var(--oxi-fond); --bs-body-color: var(--oxi-texte); --bs-emphasis-color: var(--oxi-texte-fort); --bs-secondary-color: var(--oxi-texte-faible); --bs-border-color: var(--oxi-bordure); --bs-body-font-family: var(--oxi-police); --bs-primary: var(--oxi-accent); --bs-primary-rgb: var(--oxi-accent-rgb); --bs-link-color: var(--oxi-accent-clair); --bs-link-color-rgb: var(--oxi-lien-rgb); --bs-link-hover-color: var(--oxi-accent-tres-clair); --bs-card-bg: var(--oxi-carte); --bs-tertiary-bg: var(--oxi-fond-alt); /* Variantes "emphasis" et "subtle" de Bootstrap 5.3 : sans elles, des classes comme .text-primary-emphasis retombent sur le bleu de son theme sombre. */ --bs-primary-text-emphasis: var(--oxi-accent-clair); --bs-primary-bg-subtle: var(--oxi-accent-fond); --bs-primary-border-subtle: var(--oxi-accent-sombre); --bs-secondary-text-emphasis: var(--oxi-texte-moyen); --bs-secondary-bg-subtle: var(--oxi-fond-alt); --bs-secondary-border-subtle: var(--oxi-bordure); } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ html { scroll-behavior: smooth; /* Les halos decoratifs debordent volontairement : on les rogne ici. 'clip' plutot que 'hidden' pour ne pas casser le sticky de l'en-tete. */ overflow-x: clip; /* Compense la hauteur de l'en-tete collante lors des sauts d'ancre */ scroll-padding-top: 90px; } body { margin: 0; background: var(--oxi-fond); color: var(--oxi-texte); font-family: var(--oxi-police); font-weight: 400; /* 'clip' et non 'hidden' : 'hidden' forcerait overflow-y a 'auto', ferait du body un conteneur de defilement et neutraliserait tous les position:sticky de la page. 'clip' rogne les halos sans creer de conteneur de defilement. */ overflow-x: clip; } a { color: var(--oxi-accent-clair); text-decoration: none; } a:hover { color: var(--oxi-accent-tres-clair); } ::selection { background: var(--oxi-accent); color: var(--oxi-sur-accent); } /* -------------------------------------------------------------------------- Structure de page -------------------------------------------------------------------------- */ .oxi-section { max-width: var(--oxi-largeur-max); margin: 0 auto; padding: 0 var(--oxi-marge-h) var(--oxi-marge-h); } /* Petit titre de section en capitales espacees */ .oxi-titre-section { margin: 0 0 clamp(28px, 4vw, 44px); padding-top: 28px; border-top: 1px solid var(--oxi-bordure); font-family: var(--oxi-police-mono); font-size: 15px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--oxi-texte-mono); } .oxi-titre-section--sans-trait { border-top: 0; padding-top: 0; } .oxi-titre-section em { font-style: normal; color: var(--oxi-accent-clair); } /* Libelle mono (sur-titre, meta) */ .oxi-mono { font-family: var(--oxi-police-mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--oxi-texte-mono); } .oxi-mono--accent { color: var(--oxi-accent); } /* Halo violet decoratif */ .oxi-halo { position: absolute; border-radius: 50%; background: radial-gradient(circle, var(--oxi-halo-teinte), transparent 62%); pointer-events: none; z-index: 0; } /* -------------------------------------------------------------------------- En-tete -------------------------------------------------------------------------- */ .oxi-entete { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px var(--oxi-marge-h); background: var(--oxi-fond-flou); backdrop-filter: blur(14px); border-bottom: 1px solid var(--oxi-bordure); } .oxi-entete__marque { display: flex; align-items: center; gap: 12px; } .oxi-entete__marque img { width: 28px; height: 28px; object-fit: contain; display: block; } .oxi-entete__marque span { font-family: var(--oxi-police-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--oxi-texte-mono); } .oxi-nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px); flex-wrap: wrap; font-size: 14px; } .oxi-nav a { color: var(--oxi-texte-doux); } .oxi-nav a:hover { color: var(--oxi-texte-fort); } /* -------------------------------------------------------------------------- Boutons -------------------------------------------------------------------------- */ .oxi-btn { display: inline-block; padding: 14px 26px; border-radius: 999px; font-size: 15px; font-weight: 500; border: 1px solid transparent; transition: border-color .15s ease, color .15s ease, box-shadow .15s ease; } .oxi-btn--plein { background: var(--oxi-accent); color: var(--oxi-sur-accent); box-shadow: var(--oxi-accent-glow); } .oxi-btn--plein:hover { color: var(--oxi-sur-accent); box-shadow: var(--oxi-accent-glow-fort); } .oxi-btn--contour { border-color: var(--oxi-bordure-forte); color: var(--oxi-texte-doux); } .oxi-btn--contour:hover { border-color: var(--oxi-accent-sombre); color: var(--oxi-accent-tres-clair); } /* Version compacte utilisee dans la barre de navigation. Selecteur renforce : .oxi-nav a est plus specifique que .oxi-btn--nav seul. */ .oxi-nav a.oxi-btn--nav, .oxi-btn--nav { padding: 9px 18px; font-size: 13px; border-color: var(--oxi-accent-sombre); background: var(--oxi-accent-fond); color: var(--oxi-accent-texte); } .oxi-nav a.oxi-btn--nav:hover, .oxi-btn--nav:hover { color: var(--oxi-accent-tres-clair); } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .oxi-hero { position: relative; max-width: var(--oxi-largeur-max); margin: 0 auto; padding: clamp(56px, 9vw, 120px) var(--oxi-marge-h) clamp(56px, 7vw, 96px); } .oxi-hero__grille { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(32px, 5vw, 64px); align-items: end; } .oxi-hero__titre { font-size: clamp(28px, 4.5vw, 40px); line-height: 1.02; font-weight: 600; letter-spacing: -.03em; margin: 0 0 28px; text-wrap: balance; } .oxi-hero__accroche { font-size: clamp(15px, 1.5vw, 20px); line-height: 1.5; color: var(--oxi-texte-doux); max-width: 600px; margin: 0 0 40px; text-wrap: pretty; } .oxi-hero__actions { /* Grille a une seule colonne dimensionnee sur le bouton le plus large : les deux boutons sont empiles et de largeur identique, ce qui equilibre la hauteur de la colonne gauche avec l'aside de droite. */ display: grid; grid-template-columns: max-content; justify-content: start; gap: 14px; } .oxi-hero__actions .oxi-btn { text-align: center; } .oxi-hero__aside { display: flex; flex-direction: column; gap: 22px; border-left: 1px solid var(--oxi-bordure); padding-left: 32px; } .oxi-hero__portraits { display: flex; gap: 14px; align-items: center; } .oxi-hero__portrait { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; filter: grayscale(.35); } .oxi-hero__portrait--logo { width: 96px; height: 96px; object-fit: contain; filter: none; } .oxi-chiffres { display: flex; flex-direction: column; gap: 16px; font-family: var(--oxi-police-mono); font-size: 12px; color: var(--oxi-texte-mono); letter-spacing: .06em; } .oxi-chiffres strong { display: block; font-family: var(--oxi-police); font-size: 30px; font-weight: 600; color: var(--oxi-texte); letter-spacing: -.02em; } /* -------------------------------------------------------------------------- Colonnes de texte (bloc Presentation / Oximoron) -------------------------------------------------------------------------- */ .oxi-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; align-items: start; } .oxi-texte-riche { font-size: 17px; line-height: 1.7; color: var(--oxi-texte-faible); text-wrap: pretty; } .oxi-texte-riche > *:first-child { margin-top: 0; } .oxi-texte-riche > *:last-child { margin-bottom: 0; } .oxi-texte-riche h1, .oxi-texte-riche h2, .oxi-texte-riche h3 { color: var(--oxi-texte-fort); font-weight: 600; letter-spacing: -.02em; margin: 32px 0 14px; } .oxi-texte-riche h1 { font-size: 30px; } .oxi-texte-riche h2 { font-size: 24px; margin-left: 0; } .oxi-texte-riche h3 { font-size: 19px; } .oxi-texte-riche img { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--oxi-bordure); } .oxi-texte-riche code { font-family: var(--oxi-police-mono); font-size: .9em; background: var(--oxi-carte); border: 1px solid var(--oxi-bordure); border-radius: 5px; padding: 2px 6px; color: var(--oxi-accent-clair); } .oxi-texte-riche pre { background: var(--oxi-carte); border: 1px solid var(--oxi-bordure); border-radius: var(--oxi-rayon); padding: 18px 20px; overflow-x: auto; } .oxi-texte-riche pre code { border: 0; padding: 0; background: none; } .oxi-texte-riche blockquote { margin: 24px 0; padding-left: 22px; border-left: 2px solid var(--oxi-accent-sombre); color: var(--oxi-texte-doux); font-style: italic; } .oxi-texte-riche hr { border: 0; border-top: 1px solid var(--oxi-bordure); margin: 32px 0; } .oxi-texte-riche table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; } .oxi-texte-riche th, .oxi-texte-riche td { border: 1px solid var(--oxi-bordure); padding: 10px 14px; text-align: left; } .oxi-texte-riche th { background: var(--oxi-fond-alt); color: var(--oxi-texte-fort); font-weight: 600; } /* -------------------------------------------------------------------------- Grille de projets -------------------------------------------------------------------------- */ .oxi-grille-projets { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .oxi-projet { display: flex; flex-direction: column; background: var(--oxi-carte); border: 1px solid var(--oxi-bordure); border-radius: var(--oxi-rayon); overflow: hidden; transition: border-color .15s ease, transform .15s ease; } .oxi-projet:hover { border-color: var(--oxi-accent-sombre); transform: translateY(-2px); } .oxi-projet__visuel { aspect-ratio: 16 / 10; overflow: hidden; background: var(--oxi-fond-alt); } .oxi-projet__visuel img { width: 100%; height: 100%; object-fit: cover; display: block; } .oxi-projet__corps { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; } .oxi-projet__tag { font-family: var(--oxi-police-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--oxi-accent); } .oxi-projet__nom { margin: 0; font-size: 18px; font-weight: 600; color: var(--oxi-texte-fort); } .oxi-projet__desc { margin: 0; font-size: 14px; line-height: 1.5; color: var(--oxi-texte-moyen); text-wrap: pretty; } .oxi-lien-tout { display: inline-block; margin-top: 28px; font-family: var(--oxi-police-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--oxi-accent-clair); } /* -------------------------------------------------------------------------- Bandeau "Pourquoi oximoron ?" -------------------------------------------------------------------------- */ .oxi-duo { border-top: 1px solid var(--oxi-bordure); padding-top: 44px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4.5vw, 56px); align-items: start; } .oxi-duo__titre { margin: 0; font-size: clamp(26px, 3.5vw, 36px); font-weight: 600; letter-spacing: -.025em; text-wrap: balance; } /* -------------------------------------------------------------------------- Pied de page -------------------------------------------------------------------------- */ .oxi-pied { border-top: 1px solid var(--oxi-bordure); padding: clamp(48px, 7vw, 80px) var(--oxi-marge-h) 60px; } .oxi-pied__contenu { max-width: var(--oxi-largeur-max); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; align-items: flex-end; } .oxi-pied__titre { font-size: clamp(28px, 4.5vw, 44px); font-weight: 600; letter-spacing: -.02em; margin: 0 0 24px; max-width: 520px; text-wrap: balance; } .oxi-pied__liens { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--oxi-texte-mono); } .oxi-pied__liens a { color: var(--oxi-texte-mono); } .oxi-pied__liens a:hover { color: var(--oxi-accent-tres-clair); } .oxi-pied__copyright { margin-top: 14px; font-family: var(--oxi-police-mono); font-size: 11px; letter-spacing: .14em; color: var(--oxi-texte-copyright); } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 900px) { .oxi-hero__grille, .oxi-duo { grid-template-columns: minmax(0, 1fr); align-items: start; } .oxi-hero__aside { border-left: 0; border-top: 1px solid var(--oxi-bordure); padding-left: 0; padding-top: 28px; } .oxi-chiffres { flex-direction: row; flex-wrap: wrap; gap: 28px; } } @media (max-width: 600px) { .oxi-entete { padding: 14px var(--oxi-marge-h); } .oxi-nav { gap: 14px; font-size: 13px; width: 100%; } .oxi-grille-projets { grid-template-columns: minmax(0, 1fr); } } /* -------------------------------------------------------------------------- Bascule de theme clair / sombre -------------------------------------------------------------------------- */ .oxi-bascule-theme { border: 1px solid var(--oxi-bordure); background: transparent; color: var(--oxi-texte-mono); width: 34px; height: 34px; border-radius: 999px; cursor: pointer; font-family: var(--oxi-police-mono); font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; flex: none; padding: 0; transition: border-color .15s ease, color .15s ease; } .oxi-bascule-theme:hover { border-color: var(--oxi-accent-sombre); color: var(--oxi-accent-tres-clair); } /* -------------------------------------------------------------------------- En-tete de section avec lien aligne a droite -------------------------------------------------------------------------- */ .oxi-entete-section { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-top: 1px solid var(--oxi-bordure); padding-top: 28px; margin-bottom: clamp(28px, 4vw, 44px); } .oxi-entete-section .oxi-titre-section { border-top: 0; padding-top: 0; margin: 0; } .oxi-entete-section__lien { font-size: 14px; white-space: nowrap; } /* -------------------------------------------------------------------------- Liste compacte (petits projets & autres) -------------------------------------------------------------------------- */ .oxi-grille-compacte { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; } .oxi-compact { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; background: var(--oxi-fond-alt); border: 1px solid var(--oxi-bordure-fine); border-radius: 12px; color: var(--oxi-texte-doux); transition: border-color .15s ease; } .oxi-compact:hover { border-color: var(--oxi-accent-sombre); color: var(--oxi-texte-fort); } .oxi-compact img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex: none; } .oxi-compact__textes { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .oxi-compact__nom { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .oxi-compact__tag { font-family: var(--oxi-police-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--oxi-texte-mono); } /* -------------------------------------------------------------------------- Bandeau illustre (section Oximoron) -------------------------------------------------------------------------- */ .oxi-bandeau { position: relative; border: 1px solid var(--oxi-bordure); border-radius: 16px; overflow: hidden; min-height: 320px; margin-bottom: 24px; } .oxi-bandeau__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; } .oxi-bandeau__contenu { position: relative; padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; justify-content: flex-end; min-height: 320px; box-sizing: border-box; background: var(--oxi-voile-bandeau); } .oxi-bandeau__titre { margin: 0 0 10px; font-size: clamp(24px, 3.5vw, 34px); font-weight: 600; letter-spacing: -.02em; } /* -------------------------------------------------------------------------- Formulaire (page Contact) -------------------------------------------------------------------------- */ .oxi-fiche { background: var(--oxi-carte); border: 1px solid var(--oxi-bordure); border-radius: 18px; overflow: hidden; } .oxi-fiche__entete { padding: 20px clamp(20px, 3vw, 32px); border-bottom: 1px solid var(--oxi-bordure); background: var(--oxi-fond-alt); } .oxi-fiche__entete h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--oxi-texte-fort); } .oxi-fiche__corps { padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 22px; } .oxi-champ { display: flex; flex-direction: column; gap: 9px; } .oxi-champ__libelle { font-family: var(--oxi-police-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--oxi-texte-mono); } .oxi-champ input, .oxi-champ textarea { background: var(--oxi-champ); border: 1px solid var(--oxi-bordure-forte); border-radius: 10px; padding: 14px 16px; font-size: 16px; font-family: inherit; line-height: 1.55; color: var(--oxi-texte); width: 100%; box-sizing: border-box; } .oxi-champ textarea { resize: vertical; } .oxi-champ input::placeholder, .oxi-champ textarea::placeholder { color: var(--oxi-texte-copyright); } .oxi-champ input:focus, .oxi-champ textarea:focus { outline: none; border-color: var(--oxi-accent); box-shadow: none; } .oxi-champ__erreur { font-size: 13px; color: #ff6b81; } .oxi-envoi { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 4px; } .oxi-envoi__note { font-size: 13px; color: var(--oxi-texte-mono); } .oxi-btn--soumettre { border: none; padding: 15px 30px; font-family: inherit; cursor: pointer; } .oxi-btn--soumettre:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; } /* Message d'etat (succes / erreur) */ .oxi-alerte { border-radius: 10px; padding: 14px 18px; font-size: 15px; border: 1px solid var(--oxi-bordure); background: var(--oxi-fond-alt); } .oxi-alerte--succes { border-color: rgba(60, 200, 130, .5); color: #4fd1a0; } .oxi-alerte--erreur { border-color: rgba(255, 107, 129, .5); color: #ff8095; } /* Liste cle / valeur (coordonnees) */ .oxi-infos { display: flex; flex-direction: column; border-top: 1px solid var(--oxi-bordure); } .oxi-infos__ligne { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--oxi-bordure-fine); } .oxi-infos__cle { font-family: var(--oxi-police-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--oxi-texte-mono); } .oxi-infos__valeur { font-size: 15px; color: var(--oxi-texte-doux); text-align: right; } /* Pastilles de liens */ .oxi-pastilles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .oxi-pastille { border: 1px solid var(--oxi-bordure-forte); border-radius: 999px; padding: 9px 16px; font-size: 14px; color: var(--oxi-texte-doux); transition: border-color .15s ease, color .15s ease; } .oxi-pastille:hover { border-color: var(--oxi-accent-sombre); color: var(--oxi-accent-tres-clair); } /* Grille de la page Contact : texte a gauche, formulaire a droite */ .oxi-contact { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 72px); align-items: start; } /* Pied allege (pages secondaires) */ .oxi-pied--simple { padding: 48px var(--oxi-marge-h); } .oxi-pied--simple .oxi-pied__contenu { align-items: center; gap: 24px; } @media (max-width: 900px) { .oxi-contact { grid-template-columns: minmax(0, 1fr); } } /* -------------------------------------------------------------------------- Cartes de texte issues du Markdown (section Oximoron) -------------------------------------------------------------------------- */ .oxi-cartes-texte { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: start; } .oxi-carte-texte { padding: 32px; background: var(--oxi-carte); border: 1px solid var(--oxi-bordure); border-radius: var(--oxi-rayon); font-size: 16px; line-height: 1.65; } /* Le premier titre du Markdown sert de titre de carte. */ .oxi-carte-texte h1, .oxi-carte-texte h2, .oxi-carte-texte h3 { font-size: 20px; margin: 24px 0 14px; } .oxi-carte-texte > h1:first-child, .oxi-carte-texte > h2:first-child, .oxi-carte-texte > h3:first-child { margin-top: 0; } .oxi-carte-texte p { margin: 0 0 14px; } /* Une liste de liens s'affiche en pastilles plutot qu'en puces. */ .oxi-carte-texte ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; padding: 0; } .oxi-carte-texte ul li { margin: 0; } .oxi-carte-texte ul li a { display: inline-block; border: 1px solid var(--oxi-bordure-forte); border-radius: 999px; padding: 7px 14px; font-size: 13px; line-height: 1.2; color: var(--oxi-texte-doux); transition: border-color .15s ease, color .15s ease; } .oxi-carte-texte ul li a:hover { border-color: var(--oxi-accent-sombre); color: var(--oxi-accent-tres-clair); } /* Bloc « Pourquoi oximoron ? » : sous les trois cartes, en italique comme la maquette. */ .oxi-duo--pourquoi { margin-top: clamp(40px, 6vw, 64px); } .oxi-texte-riche--italique { font-style: italic; } .oxi-texte-riche--italique strong, .oxi-texte-riche--italique em { font-style: normal; font-weight: 400; color: var(--oxi-texte-doux); } /* -------------------------------------------------------------------------- Page de detail d'une realisation -------------------------------------------------------------------------- */ .oxi-produit { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 56px); align-items: center; } /* Visuel du hero produit : liseré dégradé (le padding de 1px laisse voir le fond), halo violet, et légère perspective qui se redresse au survol. */ .oxi-produit__visuel { position: relative; padding: 1px; border-radius: 16px; overflow: hidden; background: linear-gradient(140deg, var(--oxi-accent) 0%, var(--oxi-bordure) 38%, var(--oxi-bordure) 62%, var(--oxi-accent-sombre) 100%); box-shadow: var(--oxi-visuel-halo); transform: perspective(1400px) rotateY(-7deg) rotateX(2deg) scale(.985); transition: transform .6s cubic-bezier(.2, .7, .3, 1), box-shadow .6s ease; } .oxi-produit__visuel img { width: 100%; display: block; border-radius: 15px; } /* Reflet diagonal, hors de l'image au repos, qui la balaie au survol. */ .oxi-produit__visuel::after { content: ""; position: absolute; inset: 0; border-radius: 15px; pointer-events: none; background: linear-gradient(105deg, transparent 35%, var(--oxi-visuel-reflet) 50%, transparent 65%); transform: translateX(-130%); transition: transform 0s linear .15s; } .oxi-produit__visuel:hover { transform: perspective(1400px) rotateY(0) rotateX(0) translateY(-6px) scale(1); box-shadow: var(--oxi-visuel-halo-fort); } .oxi-produit__visuel:hover::after { transform: translateX(130%); transition: transform 1s cubic-bezier(.3, .5, .3, 1) .15s; } /* Respect du réglage système : plus de perspective ni de balayage. */ @media (prefers-reduced-motion: reduce) { .oxi-produit__visuel, .oxi-produit__visuel:hover { transform: none; transition: box-shadow .3s ease; } .oxi-produit__visuel::after { display: none; } } /* Bandeau de meta-informations pleine largeur */ .oxi-meta { border-top: 1px solid var(--oxi-bordure); border-bottom: 1px solid var(--oxi-bordure); background: var(--oxi-fond-alt); margin-bottom: clamp(48px, 7vw, 80px); } .oxi-meta__grille { max-width: var(--oxi-largeur-max); margin: 0 auto; display: grid; /* auto-fit : les cases non renseignees ne sont pas rendues, la grille se reajuste au lieu de laisser un trou. */ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .oxi-meta__case { padding: 26px clamp(18px, 2.6vw, 32px); border-right: 1px solid var(--oxi-bordure-fine); display: flex; flex-direction: column; gap: 8px; min-width: 0; } .oxi-meta__case:last-child { border-right: 0; } .oxi-meta__cle { font-family: var(--oxi-police-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--oxi-texte-tres-faible); } .oxi-meta__valeur { font-size: 17px; color: var(--oxi-texte); overflow-wrap: anywhere; } /* Lien d'edition, discret dans la barre de navigation */ .oxi-nav a.oxi-lien-edition { font-size: 15px; line-height: 1; opacity: .45; text-decoration: none; } .oxi-nav a.oxi-lien-edition:hover { opacity: 1; } /* Contenu genere par les templates : on neutralise les fonds clairs herites de Bootstrap pour que les blocs suivent le theme. */ .oxi-contenu-projet .card { background: var(--oxi-carte); border-color: var(--oxi-bordure); margin-top: 32px; margin-bottom: 32px; } .oxi-contenu-projet .card-header, .oxi-contenu-projet .card-footer { background: var(--oxi-fond-alt); border-color: var(--oxi-bordure); color: var(--oxi-texte-fort); } .oxi-contenu-projet .bg-light, .oxi-contenu-projet .bg-white { background: var(--oxi-carte) !important; color: var(--oxi-texte); } .oxi-contenu-projet .text-dark, .oxi-contenu-projet .text-black { color: var(--oxi-texte) !important; } .oxi-contenu-projet .text-muted, .oxi-contenu-projet .text-secondary { color: var(--oxi-texte-moyen) !important; } .oxi-contenu-projet img { max-width: 100%; height: auto; } /* Legendes sous les vignettes : les templates les portent en .text-primary-emphasis, mais l'accent violet est trop present pour un simple libelle. On repasse sur le gris "texte secondaire", lisible dans les deux themes. Le !important repond a celui de l'utilitaire Bootstrap. */ .oxi-contenu-projet .text-primary-emphasis { color: var(--oxi-texte-moyen) !important; } .oxi-contenu-projet .Ombre { filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .55)); } @media (max-width: 900px) { .oxi-produit { grid-template-columns: minmax(0, 1fr); } .oxi-meta__grille { grid-template-columns: repeat(2, 1fr); } .oxi-meta__case:nth-child(2n) { border-right: 0; } .oxi-meta__case:nth-child(-n+2) { border-bottom: 1px solid var(--oxi-bordure-fine); } } @media (max-width: 520px) { .oxi-meta__grille { grid-template-columns: minmax(0, 1fr); } .oxi-meta__case { border-right: 0; border-bottom: 1px solid var(--oxi-bordure-fine); } .oxi-meta__case:last-child { border-bottom: 0; } } /* ========================================================================== Administration Les ecrans d'admin restent en Bootstrap : on aligne ici les surfaces claires qu'il pose en dur et que les variables ne couvrent pas. ========================================================================== */ /* Barre de titre des ecrans d'admin : meme traitement que l'en-tete publique. */ .navbar.bg-dark { background: var(--oxi-fond-flou) !important; backdrop-filter: blur(14px); border-bottom: 1px solid var(--oxi-bordure) !important; } .navbar.bg-dark .navbar-brand { color: var(--oxi-texte-fort); font-weight: 600; letter-spacing: -.01em; } /* Surfaces claires de Bootstrap, partout dans le site. */ .bg-light, .bg-white, .table-light { background-color: var(--oxi-fond-alt) !important; color: var(--oxi-texte); } /* Champs de saisie : Bootstrap les laisse tres clairs dans certains contextes. */ .form-control, .form-select { background-color: var(--oxi-champ); border-color: var(--oxi-bordure-forte); color: var(--oxi-texte); } .form-control:focus, .form-select:focus { background-color: var(--oxi-champ); border-color: var(--oxi-accent); color: var(--oxi-texte); box-shadow: 0 0 0 .2rem rgba(var(--oxi-accent-rgb), .25); } .form-control::placeholder { color: var(--oxi-texte-copyright); } /* Bloc de l'editeur de page (partial _OxiBloc). */ .oxi-admin-bloc { background: var(--oxi-carte); border-color: var(--oxi-accent-sombre) !important; border-radius: 10px; overflow: hidden; } .oxi-admin-bloc .bg-primary { background: var(--oxi-accent) !important; } .oxi-admin-bloc__elements { background: var(--oxi-fond-alt); border-color: var(--oxi-bordure) !important; border-radius: 8px; overflow: hidden; } .oxi-admin-bloc__elements .bg-secondary { background: var(--oxi-bordure-forte) !important; } /* Vignette de couverture : le fond blanc jure avec le reste. */ .TxtCouvertureImg { background: var(--oxi-fond-alt) !important; border-color: var(--oxi-bordure) !important; } /* Separateur horizontal par defaut de Bootstrap, trop pale sur fond sombre. */ hr { border-top-color: var(--oxi-bordure); opacity: 1; } /* ========================================================================== Blocs de contenu issus des templates (page de detail d'une realisation) Ces classes sont utilisees par les templates Handlebars stockes en base. ========================================================================== */ /* Intitule de section, facon maquette : mono, capitales, filet superieur. */ .oxi-tpl-titre { margin: 0 0 clamp(24px, 3.5vw, 40px); padding-top: 28px; border-top: 1px solid var(--oxi-bordure); font-family: var(--oxi-police-mono); font-size: 15px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--oxi-texte-mono); } /* --- Grille de fonctionnalites numerotees --------------------------------- */ .oxi-tpl-fonctions { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; /* La numerotation 01, 02... est calculee par le CSS : rien a saisir. */ counter-reset: oxi-fonction; } .oxi-tpl-fonction { position: relative; padding: 28px; background: var(--oxi-carte); border: 1px solid var(--oxi-bordure); border-radius: var(--oxi-rayon); display: flex; flex-direction: column; gap: 12px; } .oxi-tpl-fonction::before { counter-increment: oxi-fonction; content: counter(oxi-fonction, decimal-leading-zero); font-family: var(--oxi-police-mono); font-size: 12px; color: var(--oxi-accent); } .oxi-tpl-fonction__titre { margin: 0; font-size: 19px; font-weight: 600; color: var(--oxi-texte-fort); } .oxi-tpl-fonction__texte { margin: 0; font-size: 15px; line-height: 1.6; color: var(--oxi-texte-moyen); text-wrap: pretty; } /* --- Citation ------------------------------------------------------------- */ .oxi-tpl-citation { /* Les marges negatives annulent le padding de la section : le bandeau occupe toute la largeur du conteneur, comme dans la maquette. */ margin: clamp(48px, 6vw, 72px) calc(-1 * var(--oxi-marge-h)); padding: clamp(48px, 6vw, 80px) var(--oxi-marge-h); border-top: 1px solid var(--oxi-bordure); border-bottom: 1px solid var(--oxi-bordure); background: var(--oxi-fond-alt); } .oxi-tpl-citation__texte { max-width: 900px; margin: 0 auto; font-size: clamp(22px, 3vw, 32px); line-height: 1.35; font-weight: 300; letter-spacing: -.02em; color: var(--oxi-texte); text-wrap: pretty; } .oxi-tpl-citation__texte p { margin: 0; } .oxi-tpl-citation__auteur { max-width: 900px; margin: 24px auto 0; font-family: var(--oxi-police-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--oxi-texte-mono); } /* --- Stack (pastilles) + points techniques (liste) ------------------------ */ .oxi-tpl-technique { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 56px); align-items: start; } .oxi-tpl-pastilles { display: flex; flex-wrap: wrap; gap: 10px; } .oxi-tpl-pastille { border: 1px solid var(--oxi-bordure-forte); border-radius: 999px; padding: 9px 16px; font-size: 14px; color: var(--oxi-texte-doux); } .oxi-tpl-points { display: flex; flex-direction: column; } .oxi-tpl-point { padding: 16px 0; border-bottom: 1px solid var(--oxi-bordure-fine); font-size: 16px; line-height: 1.55; color: var(--oxi-texte-doux); text-wrap: pretty; } @media (max-width: 800px) { .oxi-tpl-technique { grid-template-columns: minmax(0, 1fr); } } /* Bouton de fin de page, centre (page de detail). */ .oxi-fin-page { display: flex; justify-content: center; padding-top: clamp(24px, 4vw, 40px); padding-bottom: clamp(48px, 7vw, 80px); } /* ========================================================================== Filets de separation entre blocs Un trait de 1px disparait sur les ecrans peu contrastes. On le teinte legerement et on pose une lueur violette dessus, via un pseudo-element plaque sur la bordure : l'epaisseur du trait ne change pas. ========================================================================== */ .oxi-titre-section, .oxi-tpl-titre, .oxi-entete-section, .oxi-duo, .oxi-infos, .oxi-meta, .oxi-tpl-citation, .oxi-pied { position: relative; border-top-color: var(--oxi-filet); } .oxi-meta, .oxi-tpl-citation { border-bottom-color: var(--oxi-filet); } .oxi-titre-section::before, .oxi-tpl-titre::before, .oxi-entete-section::before, .oxi-duo::before, .oxi-infos::before, .oxi-meta::before, .oxi-tpl-citation::before, .oxi-pied::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; box-shadow: 0 0 9px 1px var(--oxi-filet-lueur); pointer-events: none; } /* Lueur symetrique sur les blocs qui ont aussi une bordure basse. */ .oxi-meta::after, .oxi-tpl-citation::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; box-shadow: 0 0 9px 1px var(--oxi-filet-lueur); pointer-events: none; } /* Titres dont la bordure a ete retiree : pas de lueur non plus. */ .oxi-titre-section--sans-trait::before, .oxi-entete-section .oxi-titre-section::before { display: none; } /* Filets fins internes (lignes de liste) : simplement un peu plus lisibles, une lueur sur chaque ligne serait trop chargee. */ .oxi-infos__ligne, .oxi-tpl-point, .oxi-meta__case { border-color: var(--oxi-filet); } /* ========================================================================== Contours du contenu projet Meme constat que pour les filets : les bordures de cartes se voient mal. Ici ce sont de vraies boites, une box-shadow suffit, sans pseudo-element. ========================================================================== */ .oxi-contenu-projet .card, .oxi-tpl-fonction, .oxi-tpl-citation__texte + .oxi-tpl-citation__auteur { border-color: var(--oxi-filet); } .oxi-contenu-projet .card, .oxi-tpl-fonction { box-shadow: var(--oxi-carte-lueur); } /* Separations internes d'une carte : en-tete et pied. */ .oxi-contenu-projet .card-header, .oxi-contenu-projet .card-footer { border-color: var(--oxi-filet); } /* Filets internes du contenu genere : listes, tableaux, citations Markdown. */ .oxi-contenu-projet hr, .oxi-texte-riche hr { border-top-color: var(--oxi-filet); } .oxi-contenu-projet th, .oxi-contenu-projet td, .oxi-texte-riche th, .oxi-texte-riche td { border-color: var(--oxi-filet); } .oxi-contenu-projet blockquote, .oxi-texte-riche blockquote { border-left-color: var(--oxi-accent-sombre); } /* Pastilles de la stack : meme traitement discret que les cartes. */ .oxi-tpl-pastille { border-color: var(--oxi-filet); } /* -------------------------------------------------------------------------- Panneau des medias (ecran de modification d'une realisation) Le panneau suit le defilement au lieu d'etre fixe : il reste dans sa colonne et ne peut plus se retrouver colle en bas. La zone de depot est sortie du defilement pour rester atteignable meme avec beaucoup d'images. -------------------------------------------------------------------------- */ .oxi-admin-medias { position: sticky; top: 80px; display: flex; flex-direction: column; max-height: calc(100vh - 100px); background: var(--oxi-carte); border: 1px solid var(--oxi-accent-sombre); border-radius: 10px; overflow: hidden; } .oxi-admin-medias__depot { flex: 0 0 auto; padding: 10px; background: var(--oxi-fond-alt); border-bottom: 1px solid var(--oxi-bordure); } .oxi-admin-medias__liste { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 4px; align-content: flex-start; gap: 4px; } /* Le panneau perd son interet en colonne etroite : il redevient un bloc normal. */ @media (max-width: 992px) { .oxi-admin-medias { position: static; max-height: none; } .oxi-admin-medias__liste { max-height: 60vh; } }