body {
margin: 0;
font-family: var(--bs-body-font-family);
font-size: var(--bs-body-font-size);
font-weight: var(--bs-body-font-weight);
line-height: var(--bs-body-line-height);
color: var(--bs-body-color);
text-align: var(--bs-body-text-align);
background-color: var(--bs-body-bg);
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
overflow-x: hidden;
}
html {
overflow-x: hidden;
width: 100%;
}
* {
box-sizing: border-box;
}
.main-footer {
background-color: white;
color: black;
}
:root {
--bs-blue: #0d6efd;
--bs-indigo: #6610f2;
--bs-purple: #6f42c1;
--bs-pink: #d63384;
--bs-red: #dc3545;
--bs-orange: #f4623a;
--bs-yellow: #ffc107;
--bs-green: #198754;
--bs-teal: #20c997;
--bs-cyan: #0dcaf0;
--bs-black: #000;
--bs-white: #fff;
--bs-gray: #6c757d;
--bs-gray-dark: #343a40;
--bs-gray-100: #f8f9fa;
--bs-gray-200: #e9ecef;
--bs-gray-300: #dee2e6;
--bs-gray-400: #ced4da;
--bs-gray-500: #adb5bd;
--bs-gray-600: #6c757d;
--bs-gray-700: #495057;
--bs-gray-800: #343a40;
--bs-gray-900: #212529;
--bs-primary: #f4623a;
--bs-secondary: #6c757d;
--bs-success: #198754;
--bs-info: #0dcaf0;
--bs-warning: #ffc107;
--bs-danger: #dc3545;
--bs-light: #f8f9fa;
--bs-dark: #212529;
--bs-primary-rgb: 244, 98, 58;
--bs-secondary-rgb: 108, 117, 125;
--bs-success-rgb: 25, 135, 84;
--bs-info-rgb: 13, 202, 240;
--bs-warning-rgb: 255, 193, 7;
--bs-danger-rgb: 220, 53, 69;
--bs-light-rgb: 248, 249, 250;
--bs-dark-rgb: 33, 37, 41;
--bs-white-rgb: 255, 255, 255;
--bs-black-rgb: 0, 0, 0;
--bs-body-color-rgb: 33, 37, 41;
--bs-body-bg-rgb: 255, 255, 255;
--bs-font-sans-serif: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
--bs-body-font-family: Merriweather, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
--bs-body-font-size: 1rem;
--bs-body-font-weight: 400;
--bs-body-line-height: 1.5;
--bs-body-color: #212529;
--bs-body-bg: #fff;
--bs-border-width: 1px;
--bs-border-style: solid;
--bs-border-color: #dee2e6;
--bs-border-color-translucent: rgba(0, 0, 0, 0.175);
--bs-border-radius: 0.375rem;
--bs-border-radius-sm: 0.25rem;
--bs-border-radius-lg: 0.5rem;
--bs-border-radius-xl: 1rem;
--bs-border-radius-2xl: 2rem;
--bs-border-radius-pill: 50rem;
--bs-link-color: #f4623a;
--bs-link-hover-color: #c34e2e;
--bs-code-color: #d63384;
--bs-highlight-bg: #fff3cd;
}
[data-bs-theme="dark"] {
color-scheme: dark;
--bs-body-color: #dee2e6;
--bs-body-color-rgb: 222, 226, 230;
--bs-body-bg: #212529;
--bs-body-bg-rgb: 33, 37, 41;
--bs-emphasis-color: #fff;
--bs-emphasis-color-rgb: 255, 255, 255;
--bs-secondary-color: rgba(222, 226, 230, 0.75);
--bs-secondary-color-rgb: 222, 226, 230;
--bs-secondary-bg: #343a40;
--bs-secondary-bg-rgb: 52, 58, 64;
--bs-tertiary-color: rgba(222, 226, 230, 0.5);
--bs-tertiary-color-rgb: 222, 226, 230;
--bs-tertiary-bg: #2b3035;
--bs-tertiary-bg-rgb: 43, 48, 53;
--bs-primary-text-emphasis: #f9a88b;
--bs-secondary-text-emphasis: #a7acb1;
--bs-success-text-emphasis: #75b798;
--bs-info-text-emphasis: #6edff6;
--bs-warning-text-emphasis: #ffda6a;
--bs-danger-text-emphasis: #ea868f;
--bs-light-text-emphasis: #f8f9fa;
--bs-dark-text-emphasis: #dee2e6;
--bs-primary-bg-subtle: #311316;
--bs-secondary-bg-subtle: #161719;
--bs-success-bg-subtle: #051b11;
--bs-info-bg-subtle: #032830;
--bs-warning-bg-subtle: #332701;
--bs-danger-bg-subtle: #2c0b0e;
--bs-light-bg-subtle: #343a40;
--bs-dark-bg-subtle: #1a1d20;
--bs-primary-border-subtle: #923a41;
--bs-secondary-border-subtle: #41464b;
--bs-success-border-subtle: #0f5132;
--bs-info-border-subtle: #087990;
--bs-warning-border-subtle: #997404;
--bs-danger-border-subtle: #842029;
--bs-light-border-subtle: #495057;
--bs-dark-border-subtle: #343a40;
--bs-heading-color: inherit;
--bs-link-color: #f9a88b;
--bs-link-hover-color: #faba9f;
--bs-link-color-rgb: 249, 168, 139;
--bs-link-hover-color-rgb: 250, 186, 159;
--bs-code-color: #e685b5;
--bs-border-color: #495057;
--bs-border-color-translucent: rgba(255, 255, 255, 0.15);
--bs-form-valid-color: #75b798;
--bs-form-valid-border-color: #75b798;
--bs-form-invalid-color: #ea868f;
--bs-form-invalid-border-color: #ea868f;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
a {
color: var(--bs-link-color);
text-decoration: underline;
}
a:hover {
color: var(--bs-link-hover-color);
}
a:not([href]):not([class]),
a:not([href]):not([class]):hover {
color: inherit;
text-decoration: none;
}
.text-body {
--bs-text-opacity: 1;
color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important;
}
.text-muted {
--bs-text-opacity: 1;
color: #6c757d !important;
}
.validation-message {
color: #e50000;
}
.invalid {
border-color: red;
}
.valid {
border-color: green;
}
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem;
color: white;
}
.blazor-error-boundary::after {
content: "An error has occurred."
}
.brand-shrink img {
filter: invert(100%) /* sepia(100%) saturate(500%) hue-rotate(330deg); */
}
#mainNav {
/*box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
background-color: #fff;*/
transition: background-color 0.2s ease;
}
/* Old navbar styles commented out to prevent conflict with new topbar design
#mainNav .navbar-brand {
font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-weight: 700;
color: #212529;
}
#mainNav .navbar-nav .nav-item .nav-link {
color: #6c757d;
font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-weight: 700;
font-size: 0.9rem;
padding: 0.75rem 0;
}
#mainNav .navbar-nav .nav-item .nav-link:hover,
#mainNav .navbar-nav .nav-item .nav-link:active {
color: #f4623a;
}
#mainNav .navbar-nav .nav-item .nav-link.active {
color: #f4623a !important;
}
@media (min-width: 992px) {
#mainNav {
box-shadow: none;
background-color: transparent;
}
#mainNav .navbar-brand {
color: rgba(255, 255, 255, 0.7);
}
#mainNav .navbar-brand:hover {
color: #fff;
}
#mainNav .navbar-nav .nav-item .nav-link {
color: rgba(255, 255, 255, 0.7);
padding: 0 1rem;
}
#mainNav .navbar-nav .nav-item .nav-link:hover {
color: #fff;
}
#mainNav .navbar-nav .nav-item:last-child .nav-link {
padding-right: 0;
}
#mainNav .brand-mark-image {
filter: invert(1);
}
#mainNav.navbar-shrink {
box-shadow: none;
background-color: transparent;
}
#mainNav.navbar-shrink .navbar-brand {
color: #212529;
}
#mainNav.navbar-shrink .navbar-brand:hover {
color: #f4623a;
}
#mainNav.navbar-shrink .navbar-nav .nav-item .nav-link {
color: #212529;
}
#mainNav.navbar-shrink .navbar-nav .nav-item .nav-link:hover {
color: #f4623a;
}
#mainNav.navbar-shrink .brand-mark-image {
filter: invert(0);
}
}
*/
header.masthead {
padding-top: 10rem;
padding-bottom: calc(10rem - 4.5rem);
background: linear-gradient(to bottom, rgba(92, 77, 66, 0.8) 0%, rgba(92, 77, 66, 0.8) 100%), url("/img/bg-masthead.webp");
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: cover;
}
header.masthead h1,
header.masthead .h1 {
font-size: 2.25rem;
}
@media (min-width: 992px) {
header.masthead {
min-height: 40rem;
padding-top: 4.5rem;
padding-bottom: 0;
}
header.masthead p {
font-size: 1.15rem;
}
header.masthead h1,
header.masthead .h1 {
font-size: 3rem;
}
}
@media (min-width: 1200px) {
header.masthead h1,
header.masthead .h1 {
font-size: 3.5rem;
}
}
#portfolio .container-fluid,
#portfolio .container-sm,
#portfolio .container-md,
#portfolio .container-lg,
#portfolio .container-xl,
#portfolio .container-xxl {
max-width: 1920px;
}
#portfolio .container-fluid .portfolio-box,
#portfolio .container-sm .portfolio-box,
#portfolio .container-md .portfolio-box,
#portfolio .container-lg .portfolio-box,
#portfolio .container-xl .portfolio-box,
#portfolio .container-xxl .portfolio-box {
position: relative;
display: block;
}
#portfolio .container-fluid .portfolio-box .portfolio-box-caption,
#portfolio .container-sm .portfolio-box .portfolio-box-caption,
#portfolio .container-md .portfolio-box .portfolio-box-caption,
#portfolio .container-lg .portfolio-box .portfolio-box-caption,
#portfolio .container-xl .portfolio-box .portfolio-box-caption,
#portfolio .container-xxl .portfolio-box .portfolio-box-caption {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
text-align: center;
opacity: 0;
color: #fff;
background: rgba(244, 98, 58, 0.9);
transition: opacity 0.25s ease;
text-align: center;
}
#portfolio .container-fluid .portfolio-box .portfolio-box-caption .project-category,
#portfolio .container-sm .portfolio-box .portfolio-box-caption .project-category,
#portfolio .container-md .portfolio-box .portfolio-box-caption .project-category,
#portfolio .container-lg .portfolio-box .portfolio-box-caption .project-category,
#portfolio .container-xl .portfolio-box .portfolio-box-caption .project-category,
#portfolio .container-xxl .portfolio-box .portfolio-box-caption .project-category {
font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
}
#portfolio .container-fluid .portfolio-box .portfolio-box-caption .project-name,
#portfolio .container-sm .portfolio-box .portfolio-box-caption .project-name,
#portfolio .container-md .portfolio-box .portfolio-box-caption .project-name,
#portfolio .container-lg .portfolio-box .portfolio-box-caption .project-name,
#portfolio .container-xl .portfolio-box .portfolio-box-caption .project-name,
#portfolio .container-xxl .portfolio-box .portfolio-box-caption .project-name {
font-size: 1.2rem;
}
#portfolio .container-fluid .portfolio-box:hover .portfolio-box-caption,
#portfolio .container-sm .portfolio-box:hover .portfolio-box-caption,
#portfolio .container-md .portfolio-box:hover .portfolio-box-caption,
#portfolio .container-lg .portfolio-box:hover .portfolio-box-caption,
#portfolio .container-xl .portfolio-box:hover .portfolio-box-caption,
#portfolio .container-xxl .portfolio-box:hover .portfolio-box-caption {
opacity: 1;
}
.page-section {
padding: 5rem 0;
}
@media (min-width: 992px) {
header.masthead>.container,
.page-section>.container,
.main-footer>.container {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
hr.divider {
height: 0.2rem;
max-width: 3.25rem;
margin: 1.5rem auto;
background-color: #f4623a;
opacity: 1;
}
hr.divider-light {
background-color: #fff;
}
.text-white-75 {
color: rgba(255, 255, 255, 0.75) !important;
}
.btn {
--bs-btn-padding-x: 0.75rem;
--bs-btn-padding-y: 0.375rem;
--bs-btn-font-family: Merriweather Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
--bs-btn-font-size: 1rem;
--bs-btn-font-weight: 400;
--bs-btn-line-height: 1.5;
--bs-btn-color: #212529;
--bs-btn-bg: transparent;
--bs-btn-border-width: 1px;
--bs-btn-border-color: transparent;
--bs-btn-border-radius: 0.375rem;
--bs-btn-hover-border-color: transparent;
--bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
--bs-btn-disabled-opacity: 0.65;
--bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
display: inline-block;
padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
font-family: var(--bs-btn-font-family);
font-size: var(--bs-btn-font-size);
font-weight: var(--bs-btn-font-weight);
line-height: var(--bs-btn-line-height);
color: var(--bs-btn-color);
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
border-radius: var(--bs-btn-border-radius);
background-color: var(--bs-btn-bg);
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
.btn {
transition: none;
}
}
.btn:hover {
color: var(--bs-btn-hover-color);
background-color: var(--bs-btn-hover-bg);
border-color: var(--bs-btn-hover-border-color);
}
.btn-check+.btn:hover {
color: var(--bs-btn-color);
background-color: var(--bs-btn-bg);
border-color: var(--bs-btn-border-color);
}
.btn:focus-visible {
color: var(--bs-btn-hover-color);
background-color: var(--bs-btn-hover-bg);
border-color: var(--bs-btn-hover-border-color);
outline: 0;
box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn-check:focus-visible+.btn {
border-color: var(--bs-btn-hover-border-color);
outline: 0;
box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn-check:checked+.btn,
:not(.btn-check)+.btn:active,
.btn:first-child:active,
.btn.active,
.btn.show {
color: var(--bs-btn-active-color);
background-color: var(--bs-btn-active-bg);
border-color: var(--bs-btn-active-border-color);
}
.btn-check:checked+.btn:focus-visible,
:not(.btn-check)+.btn:active:focus-visible,
.btn:first-child:active:focus-visible,
.btn.active:focus-visible,
.btn.show:focus-visible {
box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
color: var(--bs-btn-disabled-color);
pointer-events: none;
background-color: var(--bs-btn-disabled-bg);
border-color: var(--bs-btn-disabled-border-color);
opacity: var(--bs-btn-disabled-opacity);
}
.btn-primary {
--bs-btn-color: #fff;
--bs-btn-bg: #f4623a;
--bs-btn-border-color: #f4623a;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #cf5331;
--bs-btn-hover-border-color: #c34e2e;
--bs-btn-focus-shadow-rgb: 246, 122, 88;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #c34e2e;
--bs-btn-active-border-color: #b74a2c;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #f4623a;
--bs-btn-disabled-border-color: #f4623a;
}
.btn-secondary {
--bs-btn-color: #fff;
--bs-btn-bg: #6c757d;
--bs-btn-border-color: #6c757d;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #5c636a;
--bs-btn-hover-border-color: #565e64;
--bs-btn-focus-shadow-rgb: 130, 138, 145;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #565e64;
--bs-btn-active-border-color: #51585e;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #6c757d;
--bs-btn-disabled-border-color: #6c757d;
}
.btn-success {
--bs-btn-color: #fff;
--bs-btn-bg: #198754;
--bs-btn-border-color: #198754;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #157347;
--bs-btn-hover-border-color: #146c43;
--bs-btn-focus-shadow-rgb: 60, 153, 110;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #146c43;
--bs-btn-active-border-color: #13653f;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #198754;
--bs-btn-disabled-border-color: #198754;
}
.btn-info {
--bs-btn-color: #000;
--bs-btn-bg: #0dcaf0;
--bs-btn-border-color: #0dcaf0;
--bs-btn-hover-color: #000;
--bs-btn-hover-bg: #31d2f2;
--bs-btn-hover-border-color: #25cff2;
--bs-btn-focus-shadow-rgb: 11, 172, 204;
--bs-btn-active-color: #000;
--bs-btn-active-bg: #3dd5f3;
--bs-btn-active-border-color: #25cff2;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #000;
--bs-btn-disabled-bg: #0dcaf0;
--bs-btn-disabled-border-color: #0dcaf0;
}
.btn-warning {
--bs-btn-color: #000;
--bs-btn-bg: #ffc107;
--bs-btn-border-color: #ffc107;
--bs-btn-hover-color: #000;
--bs-btn-hover-bg: #ffca2c;
--bs-btn-hover-border-color: #ffc720;
--bs-btn-focus-shadow-rgb: 217, 164, 6;
--bs-btn-active-color: #000;
--bs-btn-active-bg: #ffcd39;
--bs-btn-active-border-color: #ffc720;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #000;
--bs-btn-disabled-bg: #ffc107;
--bs-btn-disabled-border-color: #ffc107;
}
.btn-danger {
--bs-btn-color: #fff;
--bs-btn-bg: #dc3545;
--bs-btn-border-color: #dc3545;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #bb2d3b;
--bs-btn-hover-border-color: #b02a37;
--bs-btn-focus-shadow-rgb: 225, 83, 97;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #b02a37;
--bs-btn-active-border-color: #a52834;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #dc3545;
--bs-btn-disabled-border-color: #dc3545;
}
.btn-light {
--bs-btn-color: #000;
--bs-btn-bg: #f8f9fa;
--bs-btn-border-color: #f8f9fa;
--bs-btn-hover-color: #000;
--bs-btn-hover-bg: #d3d4d5;
--bs-btn-hover-border-color: #c6c7c8;
--bs-btn-focus-shadow-rgb: 211, 212, 213;
--bs-btn-active-color: #000;
--bs-btn-active-bg: #c6c7c8;
--bs-btn-active-border-color: #babbbc;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #000;
--bs-btn-disabled-bg: #f8f9fa;
--bs-btn-disabled-border-color: #f8f9fa;
}
.btn-dark {
--bs-btn-color: #fff;
--bs-btn-bg: #212529;
--bs-btn-border-color: #212529;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #424649;
--bs-btn-hover-border-color: #373b3e;
--bs-btn-focus-shadow-rgb: 66, 70, 73;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #4d5154;
--bs-btn-active-border-color: #373b3e;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #212529;
--bs-btn-disabled-border-color: #212529;
}
.btn-outline-primary {
--bs-btn-color: #f4623a;
--bs-btn-border-color: #f4623a;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #f4623a;
--bs-btn-hover-border-color: #f4623a;
--bs-btn-focus-shadow-rgb: 244, 98, 58;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #f4623a;
--bs-btn-active-border-color: #f4623a;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #f4623a;
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: #f4623a;
--bs-gradient: none;
}
.btn-outline-secondary {
--bs-btn-color: #6c757d;
--bs-btn-border-color: #6c757d;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #6c757d;
--bs-btn-hover-border-color: #6c757d;
--bs-btn-focus-shadow-rgb: 108, 117, 125;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #6c757d;
--bs-btn-active-border-color: #6c757d;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #6c757d;
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: #6c757d;
--bs-gradient: none;
}
.btn-outline-success {
--bs-btn-color: #198754;
--bs-btn-border-color: #198754;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #198754;
--bs-btn-hover-border-color: #198754;
--bs-btn-focus-shadow-rgb: 25, 135, 84;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #198754;
--bs-btn-active-border-color: #198754;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #198754;
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: #198754;
--bs-gradient: none;
}
.btn-outline-info {
--bs-btn-color: #0dcaf0;
--bs-btn-border-color: #0dcaf0;
--bs-btn-hover-color: #000;
--bs-btn-hover-bg: #0dcaf0;
--bs-btn-hover-border-color: #0dcaf0;
--bs-btn-focus-shadow-rgb: 13, 202, 240;
--bs-btn-active-color: #000;
--bs-btn-active-bg: #0dcaf0;
--bs-btn-active-border-color: #0dcaf0;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #0dcaf0;
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: #0dcaf0;
--bs-gradient: none;
}
.btn-outline-warning {
--bs-btn-color: #ffc107;
--bs-btn-border-color: #ffc107;
--bs-btn-hover-color: #000;
--bs-btn-hover-bg: #ffc107;
--bs-btn-hover-border-color: #ffc107;
--bs-btn-focus-shadow-rgb: 255, 193, 7;
--bs-btn-active-color: #000;
--bs-btn-active-bg: #ffc107;
--bs-btn-active-border-color: #ffc107;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #ffc107;
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: #ffc107;
--bs-gradient: none;
}
.btn-outline-danger {
--bs-btn-color: #dc3545;
--bs-btn-border-color: #dc3545;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #dc3545;
--bs-btn-hover-border-color: #dc3545;
--bs-btn-focus-shadow-rgb: 220, 53, 69;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #dc3545;
--bs-btn-active-border-color: #dc3545;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #dc3545;
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: #dc3545;
--bs-gradient: none;
}
.btn-outline-light {
--bs-btn-color: #f8f9fa;
--bs-btn-border-color: #f8f9fa;
--bs-btn-hover-color: #000;
--bs-btn-hover-bg: #f8f9fa;
--bs-btn-hover-border-color: #f8f9fa;
--bs-btn-focus-shadow-rgb: 248, 249, 250;
--bs-btn-active-color: #000;
--bs-btn-active-bg: #f8f9fa;
--bs-btn-active-border-color: #f8f9fa;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #f8f9fa;
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: #f8f9fa;
--bs-gradient: none;
}
.btn-outline-dark {
--bs-btn-color: #212529;
--bs-btn-border-color: #212529;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #212529;
--bs-btn-hover-border-color: #212529;
--bs-btn-focus-shadow-rgb: 33, 37, 41;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #212529;
--bs-btn-active-border-color: #212529;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #212529;
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: #212529;
--bs-gradient: none;
}
.btn-link {
--bs-btn-font-weight: 400;
--bs-btn-color: var(--bs-link-color);
--bs-btn-bg: transparent;
--bs-btn-border-color: transparent;
--bs-btn-hover-color: var(--bs-link-hover-color);
--bs-btn-hover-border-color: transparent;
--bs-btn-active-color: var(--bs-link-hover-color);
--bs-btn-active-border-color: transparent;
--bs-btn-disabled-color: #6c757d;
--bs-btn-disabled-border-color: transparent;
--bs-btn-box-shadow: none;
--bs-btn-focus-shadow-rgb: 246, 122, 88;
text-decoration: underline;
}
.btn-link:focus-visible {
color: var(--bs-btn-color);
}
.btn-link:hover {
color: var(--bs-btn-hover-color);
}
.btn-lg,
.btn-group-lg>.btn {
--bs-btn-padding-y: 0.5rem;
--bs-btn-padding-x: 1rem;
--bs-btn-font-size: 1.25rem;
--bs-btn-border-radius: 0.5rem;
}
.btn-sm,
.btn-group-sm>.btn {
--bs-btn-padding-y: 0.25rem;
--bs-btn-padding-x: 0.5rem;
--bs-btn-font-size: 0.875rem;
--bs-btn-border-radius: 0.25rem;
}
.btn-xl {
padding: 1.25rem 2.25rem;
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
border: none;
border-radius: 10rem;
}
@font-face {
font-family: 'bootstrap-icons';
font-display: swap;
src: url('../lib/bootstrap-icons/font/fonts/bootstrap-icons.woff2?e34853135f9e39acf64315236852cd5a') format('woff2');
}
@font-face {
font-family: 'Font Awesome 7 Free';
font-display: swap;
font-style: normal;
font-weight: 900;
src: url('../lib/font-awesome/webfonts/fa-solid-900.woff2') format('woff2');
}
@font-face {
font-family: 'Font Awesome 7 Brands';
font-display: swap;
font-style: normal;
font-weight: 400;
src: url('../lib/font-awesome/webfonts/fa-brands-400.woff2') format('woff2');
}
:root {
--presentation-bg: #ffffff;
--presentation-surface: #ffffff;
--presentation-surface-strong: #f3f4f5;
--presentation-border: #dedfe2;
--presentation-border-strong: #c9ccd0;
--presentation-text: #202326;
--presentation-muted: #5d6169;
--presentation-blue: #bd421f;
--presentation-shadow: 0 24px 80px rgba(63, 67, 74, 0.08);
--presentation-shadow-soft: 0 16px 40px rgba(63, 67, 74, 0.06);
--presentation-radius-lg: 40px;
--presentation-radius-md: 28px;
--presentation-radius-sm: 18px;
--presentation-radius-pill: 9999px;
--bs-primary: #bd421f;
--bs-primary-rgb: 29, 98, 212;
--bs-link-color: #bd421f;
--bs-link-hover-color: #a6381a;
--bs-body-font-family: "Manrope", "Segoe UI", sans-serif;
--bs-font-sans-serif: "Manrope", "Segoe UI", sans-serif;
--bs-body-color: #202326;
--bs-body-bg: #ffffff;
}
html {
background: var(--presentation-bg);
}
body {
font-family: var(--bs-body-font-family);
color: var(--presentation-text);
background:
radial-gradient(circle at top left, rgba(244, 98, 58, 0.65), transparent 30%),
radial-gradient(circle at top right, rgba(244, 98, 58, 0.08), transparent 28%),
linear-gradient(180deg, #ffffff 0%, var(--presentation-bg) 100%);
}
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
.home-page {
position: relative;
padding-bottom: 3rem;
}
.btn-pill {
border-radius: var(--presentation-radius-pill);
padding-inline: 1.5rem;
}
.btn-dark,
.btn-outline-dark,
.btn-primary,
.btn-outline-primary {
border-radius: var(--presentation-radius-pill);
font-weight: 700;
letter-spacing: -0.01em;
box-shadow: none;
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.btn-dark {
--bs-btn-bg: #2f343b;
--bs-btn-border-color: #2f343b;
--bs-btn-hover-bg: #25292f;
--bs-btn-hover-border-color: #25292f;
--bs-btn-active-bg: #25292f;
--bs-btn-active-border-color: #25292f;
box-shadow: 0 12px 26px rgba(47, 52, 59, 0.18);
}
.btn-outline-dark {
--bs-btn-color: #2f343b;
--bs-btn-border-color: rgba(47, 52, 59, 0.18);
--bs-btn-hover-color: #2f343b;
--bs-btn-hover-bg: rgba(255, 255, 255, 0.76);
--bs-btn-hover-border-color: rgba(47, 52, 59, 0.24);
background: rgba(255, 255, 255, 0.65);
backdrop-filter: blur(12px);
}
.btn-primary {
--bs-btn-bg: var(--presentation-blue);
--bs-btn-border-color: var(--presentation-blue);
--bs-btn-hover-bg: #a6381a;
--bs-btn-hover-border-color: #a6381a;
}
.btn-outline-primary {
--bs-btn-color: var(--presentation-blue);
--bs-btn-border-color: rgba(244, 98, 58, 0.22);
--bs-btn-hover-bg: rgba(244, 98, 58, 0.08);
--bs-btn-hover-border-color: rgba(244, 98, 58, 0.3);
--bs-btn-hover-color: #a6381a;
background: rgba(255, 237, 231, 0.35);
}
.btn-dark:hover,
.btn-outline-dark:hover,
.btn-primary:hover,
.btn-outline-primary:hover {
transform: translateY(-1px);
}
#mainNav {
box-shadow: none;
background: transparent;
padding-top: 1rem;
padding-bottom: 1rem;
}
.presentation-topbar-shell {
padding: 0.75rem 1rem;
border: 1px solid rgba(222, 223, 226, 0.85);
border-radius: var(--presentation-radius-pill);
background: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(20px);
box-shadow: 0 10px 30px rgba(63, 67, 74, 0.06);
}
#mainNav.navbar-shrink .presentation-topbar-shell {
background: transparent;
box-shadow: none;
}
.brand-lockup {
display: inline-flex;
align-items: center;
gap: 0.85rem;
color: var(--presentation-text) !important;
}
.brand-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.7rem;
height: 2.7rem;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 12px 24px rgba(47, 52, 59, 0.18);
}
.brand-mark-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: filter 0.2s ease;
}
.brand-copy {
display: flex;
flex-direction: column;
line-height: 1.05;
}
.brand-name {
font-size: 1rem;
font-weight: 800;
letter-spacing: -0.03em;
}
.brand-tagline {
font-size: 0.72rem;
font-weight: 600;
color: var(--presentation-muted);
}
#mainNav .navbar-nav .nav-link {
color: var(--presentation-text);
font-family: var(--bs-body-font-family);
font-weight: 700;
font-size: 0.95rem;
padding: 0.5rem 0.9rem;
border-radius: 9999px;
}
#mainNav .navbar-nav .nav-link:hover,
#mainNav .navbar-nav .nav-link:active,
#mainNav .navbar-nav .nav-link.active {
color: var(--presentation-text);
background: rgba(255, 255, 255, 0.72);
}
.presentation-nav-cta {
display: flex;
align-items: center;
gap: 0.75rem;
}
.nav-github-link {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
color: var(--presentation-text);
opacity: 0.7;
transition: opacity 0.2s ease;
line-height: 1;
}
.nav-github-link:hover {
opacity: 1;
color: var(--presentation-text);
}
header.masthead {
min-height: unset;
padding-top: 9rem;
padding-bottom: 2.25rem;
background: transparent;
}
.hero-pill,
.blog-hero-pill {
display: inline-flex;
align-items: center;
gap: 0.8rem;
padding: 0.45rem 0.9rem;
margin-bottom: 1.5rem;
border: 1px solid rgba(222, 223, 226, 0.95);
border-radius: var(--presentation-radius-pill);
background: rgba(255, 255, 255, 0.82);
box-shadow: 0 12px 24px rgba(63, 67, 74, 0.05);
color: var(--presentation-text);
font-size: 0.95rem;
font-weight: 700;
}
.hero-pill-badge {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.6rem;
border-radius: var(--presentation-radius-pill);
background: rgba(244, 98, 58, 0.12);
color: var(--presentation-blue);
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
gap: 3rem;
align-items: center;
}
.hero-copy h1 {
margin: 0;
font-size: clamp(3.2rem, 8vw, 6.2rem);
line-height: 0.96;
letter-spacing: -0.06em;
font-weight: 800;
color: var(--presentation-text);
max-width: 12ch;
}
.hero-kicker,
.section-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--presentation-blue);
}
.hero-script {
font-family: "Caveat", cursive;
font-weight: 700;
font-size: 1.12em;
line-height: 0;
color: var(--presentation-blue);
white-space: nowrap;
}
.hero-lead,
.section-lead {
margin-top: 1.6rem;
font-size: 1.2rem;
line-height: 1.7;
color: var(--presentation-muted);
max-width: 42rem;
}
.section-body {
font-size: 1rem;
line-height: 1.8;
color: var(--presentation-muted);
max-width: 44rem;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 0.9rem;
margin-top: 2rem;
}
.hero-proof-list {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.5rem;
}
.hero-proof-list span,
.expertise-tags span {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.55rem 0.95rem;
border-radius: var(--presentation-radius-pill);
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(222, 223, 226, 0.95);
font-size: 0.92rem;
font-weight: 700;
color: var(--presentation-text);
box-shadow: 0 10px 24px rgba(63, 67, 74, 0.04);
}
.hero-visual {
position: relative;
min-height: 560px;
}
.hero-visual-card {
position: relative;
padding: 1rem;
border-radius: var(--presentation-radius-lg);
border: 1px solid rgba(222, 223, 226, 0.95);
background: rgba(255, 255, 255, 0.88);
box-shadow: var(--presentation-shadow);
overflow: hidden;
}
.hero-visual-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255, 237, 231, 0.4), transparent 32%);
pointer-events: none;
}
.hero-browser-bar {
display: flex;
gap: 0.45rem;
padding: 0.2rem 0.3rem 0.9rem;
}
.hero-browser-bar span {
width: 0.72rem;
height: 0.72rem;
border-radius: 50%;
background: rgba(63, 67, 74, 0.18);
}
.hero-visual-card img {
display: block;
width: 100%;
border-radius: calc(var(--presentation-radius-lg) - 10px);
border: 1px solid rgba(222, 223, 226, 0.85);
background: #fff;
position: relative;
z-index: 1;
}
.hero-visual-note {
position: absolute;
max-width: 240px;
padding: 1rem 1.1rem;
border-radius: 24px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(222, 223, 226, 0.95);
box-shadow: 0 14px 30px rgba(63, 67, 74, 0.08);
backdrop-filter: blur(14px);
z-index: 2;
}
.hero-visual-note-top {
top: 1.4rem;
right: -1rem;
}
.hero-visual-note-bottom {
left: -1rem;
bottom: 2rem;
}
.hero-note-label {
display: block;
margin-bottom: 0.35rem;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--presentation-blue);
}
.hero-visual-note strong {
font-size: 0.96rem;
line-height: 1.45;
color: var(--presentation-text);
}
.page-section {
padding: 4.5rem 0;
}
.masthead+.page-section {
padding-top: 2.75rem;
}
.section-shell,
.team-shell,
.contact-shell {
padding: clamp(1.6rem, 3vw, 3rem);
border-radius: var(--presentation-radius-lg);
border: 1px solid rgba(222, 223, 226, 0.95);
background: rgba(255, 255, 255, 0.78);
box-shadow: var(--presentation-shadow-soft);
backdrop-filter: blur(10px);
}
.section-shell-warm,
.contact-shell {
background:
radial-gradient(circle at top right, rgba(255, 237, 231, 0.45), transparent 32%),
radial-gradient(circle at bottom left, rgba(244, 98, 58, 0.55), transparent 34%),
rgba(255, 255, 255, 0.84);
}
.section-heading {
max-width: 48rem;
margin-bottom: 2.4rem;
}
.section-title-xl {
margin: 0;
font-size: clamp(2rem, 4vw, 3.8rem);
line-height: 1.02;
letter-spacing: -0.05em;
font-weight: 800;
color: var(--presentation-text);
}
.value-stack {
display: grid;
gap: 1rem;
}
.value-card,
.team-card,
.contact-form-card,
.contact-side-card,
.portfolio-project-card {
border-radius: var(--presentation-radius-md);
border: 1px solid rgba(222, 223, 226, 0.95);
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 16px 36px rgba(63, 67, 74, 0.05);
}
.value-card {
padding: 1.3rem 1.35rem;
}
.value-card-accent {
background: linear-gradient(180deg, rgba(255, 237, 231, 0.65), rgba(255, 255, 255, 0.9));
}
.value-card-index {
display: inline-flex;
margin-bottom: 0.65rem;
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--presentation-blue);
}
.value-card h3,
.portfolio-project-card h3,
.team-card h3 {
margin-bottom: 0.55rem;
font-size: 1.35rem;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--presentation-text);
}
.value-card p,
.portfolio-project-card p,
.team-card p,
.footer-copy {
margin-bottom: 0;
font-size: 1rem;
line-height: 1.7;
color: var(--presentation-muted);
}
.portfolio-stack {
display: grid;
gap: 1.5rem;
}
.portfolio-project-card {
display: grid;
grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
gap: 1.5rem;
padding: 1.4rem;
}
.portfolio-project-card-alt {
background: linear-gradient(180deg, rgba(244, 98, 58, 0.35), rgba(255, 255, 255, 0.82));
}
.portfolio-project-copy {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.8rem;
padding: 0.4rem;
}
.project-category {
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--presentation-blue);
}
.project-link,
.team-link {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin-top: 0.2rem;
font-size: 0.95rem;
font-weight: 800;
color: var(--presentation-text);
}
.project-link:hover,
.team-link:hover {
color: var(--presentation-blue);
}
.portfolio-media-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
align-items: stretch;
}
.portfolio-media-grid-three {
grid-template-columns: 1.2fr 1fr 0.72fr;
}
.portfolio-media-grid a {
display: block;
padding: 0.6rem;
border-radius: calc(var(--presentation-radius-md) - 8px);
border: 1px solid rgba(222, 223, 226, 0.95);
background: rgba(255, 255, 255, 0.92);
}
.portfolio-media-grid img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: calc(var(--presentation-radius-md) - 14px);
box-shadow: 0 10px 28px rgba(63, 67, 74, 0.08);
}
.media-mobile img {
object-fit: contain;
background: #fff;
}
.team-shell {
background: rgba(255, 255, 255, 0.65);
}
.expertise-tags {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.8rem;
margin-bottom: 2rem;
}
.expertise-dot {
width: 0.55rem;
height: 0.55rem;
border-radius: 50%;
background: var(--presentation-accent);
box-shadow: 0 0 0 0.2rem rgba(45, 125, 246, 0.12);
flex: 0 0 auto;
}
.ai-provider-tags {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.8rem;
margin: -0.6rem 0 2rem;
}
.ai-provider-chip {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.55rem 0.9rem;
border: 1px solid rgba(222, 223, 226, 0.95);
border-radius: 999px;
background: rgba(255, 255, 255, 0.72);
color: var(--presentation-text);
font-size: 0.9rem;
font-weight: 700;
box-shadow: 0 10px 24px rgba(63, 67, 74, 0.04);
}
.ai-provider-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.1rem;
font-size: 1rem;
line-height: 1;
flex-shrink: 0;
}
.ai-provider-icon-openai {
color: #111111;
}
.ai-provider-icon-anthropic {
color: #9a3412;
}
.ai-provider-icon-gemini {
color: #2563eb;
}
.ai-provider-icon-mistral {
color: #ea580c;
}
.ai-provider-icon-openrouter {
color: #bd421f;
}
.ai-provider-icon-hermes {
color: #4338ca;
}
.team-card {
overflow: hidden;
height: 100%;
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
.team-portrait-link {
display: block;
padding: 1rem 1rem 0;
}
.team-portrait {
width: 100%;
height: auto;
display: block;
border-radius: calc(var(--presentation-radius-md) - 8px);
border: 1px solid rgba(222, 223, 226, 0.95);
background: linear-gradient(180deg, rgba(244, 98, 58, 0.4), rgba(255, 255, 255, 0.7));
}
.team-card-body {
padding: 1.2rem 1.25rem 1.35rem;
}
.team-role {
margin-bottom: 0.8rem !important;
font-size: 0.92rem !important;
font-weight: 800 !important;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--presentation-blue) !important;
}
.contact-side-cards {
display: grid;
gap: 1rem;
margin-top: 2rem;
}
.contact-side-card {
display: grid;
gap: 1rem;
padding: 1rem 1.1rem;
color: var(--presentation-text);
}
.contact-side-card__info {
display: flex;
align-items: center;
gap: 1rem;
}
.contact-side-card-icon {
font-size: 1.25rem;
width: 3rem;
height: 3rem;
border-radius: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(244, 98, 58, 0.1);
color: var(--presentation-blue);
}
.contact-side-card-content > span {
display: block;
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--presentation-muted);
}
.contact-side-card strong {
display: block;
margin-top: 0.2rem;
font-size: 1rem;
color: var(--presentation-text);
}
.contact-side-card-content {
flex: 1;
min-width: 0;
}
.contact-side-card-line {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.85rem;
min-height: 2.2rem;
margin-top: 0.2rem;
}
.contact-phone-link {
display: inline-flex;
align-items: center;
color: var(--presentation-text);
font-size: 1rem;
font-weight: 700;
line-height: 1;
text-decoration: none;
}
.contact-side-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
margin-top: 0.15rem;
}
.contact-side-actions .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
min-height: 3.25rem;
padding-inline: 1rem;
}
.contact-side-actions .btn i {
display: inline-block;
width: auto;
height: auto;
border-radius: 0;
background: transparent;
color: currentColor;
font-size: 1.1rem;
line-height: 1;
}
.contact-side-actions .btn span {
display: inline;
color: currentColor;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
text-transform: none;
}
.contact-callback-button {
width: 100%;
border-color: #202326;
background: #202326;
color: #fff;
}
.contact-whatsapp-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
border-color: #13795b;
background: #13795b;
color: #fff;
text-decoration: none;
}
.contact-whatsapp-button:hover,
.contact-whatsapp-button:focus-visible {
border-color: #0d5f47;
background: #0d5f47;
color: #fff;
}
@media (max-width: 575.98px) {
.contact-side-actions {
grid-template-columns: 1fr;
}
}
.contact-form-card {
padding: 1.5rem;
background: rgba(255, 255, 255, 0.88);
}
.contact-form-card .form-control {
border-color: rgba(222, 223, 226, 0.95);
border-radius: 18px;
background: rgba(253, 247, 239, 0.58);
box-shadow: none;
}
.contact-form-card .form-control:focus {
border-color: rgba(244, 98, 58, 0.45);
box-shadow: 0 0 0 0.2rem rgba(244, 98, 58, 0.08);
background: #fff;
}
.contact-form-card .form-floating>label {
color: var(--presentation-muted) !important;
}
.contact-message-input {
height: 17.5rem !important;
}
@media (max-width: 767.98px) {
.contact-message-input {
height: 12.5rem !important;
}
}
.contact-success-state {
padding: 2rem 1rem;
border-radius: 22px;
background: linear-gradient(180deg, rgba(255, 237, 231, 0.45), rgba(255, 255, 255, 0.92));
color: var(--presentation-text);
}
.main-footer {
padding: 0 0 2.5rem;
background: transparent;
color: var(--presentation-text);
}
.main-footer-shell {
display: grid;
grid-template-columns: 1.2fr auto auto;
gap: 2rem;
padding: 1.5rem 1.6rem;
border: 1px solid rgba(222, 223, 226, 0.95);
border-radius: var(--presentation-radius-md);
background: rgba(255, 255, 255, 0.82);
box-shadow: var(--presentation-shadow-soft);
}
.footer-brand {
font-size: 1.2rem;
font-weight: 800;
letter-spacing: -0.03em;
margin-bottom: 0.6rem;
}
.footer-social-links {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 0.25rem;
}
.footer-social-link {
display: inline-flex;
align-items: center;
gap: 0.55rem;
color: var(--presentation-text);
font-weight: 700;
text-decoration: none;
}
.footer-social-link i {
font-size: 1rem;
}
.footer-social-link--linkedin i {
color: #0a66c2;
}
.footer-social-link--x i {
color: #fff;
}
.footer-social-link--youtube i {
color: #ff0000;
}
.footer-social-link:hover {
color: var(--presentation-blue);
}
.footer-links,
.footer-meta {
display: grid;
align-content: start;
gap: 0.45rem;
font-size: 0.95rem;
color: var(--presentation-muted);
}
.footer-links a,
.footer-meta a {
color: var(--presentation-text);
font-weight: 700;
}
.footer-links a:hover,
.footer-meta a:hover {
color: var(--presentation-blue);
}
@media (max-width: 1199.98px) {
.hero-grid,
.portfolio-project-card,
.main-footer-shell {
grid-template-columns: 1fr;
}
.hero-visual {
min-height: 0;
}
.hero-visual-note-top,
.hero-visual-note-bottom {
position: static;
max-width: none;
margin-top: 1rem;
}
}
@media (max-width: 991.98px) {
#mainNav {
padding-top: 0.75rem;
}
.presentation-topbar-shell {
padding: 0.85rem 1rem;
border-radius: 28px;
}
.presentation-nav-cta {
flex-direction: column;
align-items: stretch;
margin-top: 1rem;
}
#mainNav .navbar-nav .nav-link {
padding: 0.55rem 0.6rem 0.55rem 1.25rem;
}
#mainNav .navbar-nav {
margin-left: 0.55rem;
}
#mainNav:not(.agency-nav) .navbar-nav .nav-item .nav-link,
#mainNav:not(.agency-nav) .navbar-nav .nav-item .nav-link:hover,
#mainNav:not(.agency-nav) .navbar-nav .nav-item .nav-link:focus,
#mainNav:not(.agency-nav) .navbar-nav .nav-item .nav-link:active,
#mainNav:not(.agency-nav) .navbar-nav .nav-item .nav-link.active {
color: var(--presentation-text) !important;
}
#mainNav .navbar-nav .nav-item .nav-link {
transition: margin-left 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
#mainNav .navbar-nav .nav-item .nav-link:hover {
margin-left: 0.35rem;
}
header.masthead {
padding-top: 8rem;
min-height: auto;
padding-bottom: 1.5rem;
}
.hero-copy h1 {
max-width: none;
}
.portfolio-media-grid-three,
.portfolio-media-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 767.98px) {
.page-section {
padding: 3.2rem 0;
}
.masthead+.page-section {
padding-top: 2.2rem;
}
.hero-pill,
.blog-hero-pill {
font-size: 0.82rem;
flex-wrap: wrap;
}
.hero-actions,
.presentation-nav-cta {
width: 100%;
}
.hero-actions .btn,
.presentation-nav-cta .btn {
width: 100%;
}
.hero-proof-list,
.expertise-tags {
justify-content: flex-start;
}
.hero-visual-card,
.section-shell,
.team-shell,
.contact-shell,
.contact-form-card,
.main-footer-shell {
border-radius: 24px;
}
.contact-form-card {
padding: 1.2rem;
}
}
/* Services Section Hover Effects */
.services-section .value-card {
transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.28s ease;
will-change: transform, box-shadow;
}
.services-section .value-card:hover {
transform: translateY(-5px);
border-color: rgba(244, 98, 58, 0.35);
box-shadow: 0 20px 40px rgba(63, 67, 74, 0.08);
}
/* APPLIMAN — Du besoin au système. Shared public-site design tokens. */
@font-face { font-family: Manrope; src: url('/fonts/manrope-latin.woff2?v=3') format('woff2'); font-style: normal; font-weight: 400 800; font-display: swap; }
:root {
--agency-orange: #f4623a;
--agency-ink: #202326;
--agency-muted: #5d6169;
--agency-line: #dedfe2;
--agency-soft: #f3f4f5;
--presentation-bg: #fff;
--presentation-surface: #fff;
--presentation-surface-strong: var(--agency-soft);
--presentation-text: var(--agency-ink);
--presentation-muted: var(--agency-muted);
--presentation-border: var(--agency-line);
--presentation-border-strong: #c9ccd0;
--presentation-blue: #bd421f; /* Compatibility alias for existing components. */
--presentation-accent: #ffede7;
--presentation-shadow: 0 12px 32px rgb(32 35 38 / 7%);
--presentation-shadow-soft: none;
--presentation-radius-lg: 12px;
--presentation-radius-md: 10px;
--presentation-radius-sm: 6px;
--presentation-radius-pill: 6px;
--bs-primary: var(--agency-orange);
--bs-primary-rgb: 244,98,58;
--bs-primary-text-emphasis: #a6381a;
--bs-primary-bg-subtle: #ffede7;
--bs-primary-border-subtle: #e5b7a9;
--bs-link-color: #ad391b;
--bs-link-hover-color: #832b14;
--bs-body-color: var(--agency-ink);
--bs-body-bg: #fff;
--bs-body-font-family: Manrope, 'Segoe UI', sans-serif;
--bs-secondary-color: var(--agency-muted);
--bs-border-color: var(--agency-line);
}
html { scroll-padding-top: 7rem; background: #fff; }
body { background: #fff; color: var(--agency-ink); font-family: var(--bs-body-font-family); }
::selection { background: #ffd4c7; color: #202326; }
:focus-visible { outline: 3px solid #bd421f; outline-offset: 4px; }
input, textarea { caret-color: #bd421f; }
* { scrollbar-color: #858990 #f3f4f5; }
h1, h2, h3 { text-wrap: balance; letter-spacing: -.03em; }
p { text-wrap: pretty; }
a { text-underline-offset: .22em; }
main { min-width: 0; }
#main-content:focus { outline: none; }
.skip-link { position: fixed; z-index: 2000; left: 1rem; top: -5rem; padding: .8rem 1.2rem; background: white; color: #202326; }
.skip-link:focus { top: 1rem; }
.container.agency-container { max-width: 1440px; padding-inline: clamp(24px, 5.6vw, 86px); }
#mainNav.agency-nav, #mainNav.agency-nav.navbar-shrink { position: relative; padding: 1.1rem 0; background: var(--agency-ink); box-shadow: none; }
#mainNav.agency-nav .agency-container { max-width: 1536px; }
.agency-logo { display: block; width: clamp(205px, 19vw, 280px); height: auto; max-width: 100%; }
#mainNav .navbar-brand, #mainNav .navbar-brand img, #mainNav .brand-shrink img { filter: none; transform: none; margin: 0; }
#mainNav.agency-nav .navbar-nav .nav-link { color: #f5f5f6; background: transparent; padding: .7rem .85rem; font-size: .95rem; white-space: nowrap; font-weight: 500; }
#mainNav.agency-nav .navbar-nav .nav-link:hover, #mainNav.agency-nav .navbar-nav .nav-link.active { color: #ff9a7d; background: transparent; }
#mainNav .navbar-toggler { border-color: #777b80; padding: .6rem; }
#mainNav :focus-visible { outline-color: #ff9a7d; }
@media (max-width: 1199.98px) {
html, body { overflow-x: clip; }
#mainNav.agency-nav, #mainNav.agency-nav.navbar-shrink { position: sticky; top: 0; z-index: 1030; }
#mainNav.agency-nav .navbar-nav .nav-link { display: flex; align-items: center; gap: .75rem; }
#mainNav.agency-nav .nav-item-icon { width: 1.25rem; flex: 0 0 1.25rem; color: #ff9a7d; font-size: 1rem; text-align: center; }
}
.btn { border-radius: 6px; font-weight: 700; letter-spacing: -.01em; }
.btn-xl { text-transform: none; font-size: 1rem; padding: 1rem 1.4rem; }
.btn-primary, .agency-button, .blog-container .btn-primary {
--bs-btn-color: #202326; --bs-btn-bg: #f4623a; --bs-btn-border-color: #f4623a;
--bs-btn-hover-color: #202326; --bs-btn-hover-bg: #ff8b67; --bs-btn-hover-border-color: #ff8b67;
--bs-btn-active-color: #202326; --bs-btn-active-bg: #ee5931; --bs-btn-active-border-color: #ee5931;
--bs-btn-disabled-color: #202326; --bs-btn-disabled-bg: #f4b29e; --bs-btn-disabled-border-color: #f4b29e;
border-radius: 6px; box-shadow: none;
}
.agency-button { display: inline-flex; align-items: center; justify-content: center; gap: .9rem; padding: .95rem 1.5rem; font-size: .98rem; white-space: normal; }
.agency-github-link { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.45rem; line-height: 1; text-decoration: none; }
.agency-github-link:hover { color: #ff9a7d; }
.btn-dark, .btn-outline-dark, .btn-outline-primary { box-shadow: none; backdrop-filter: none; }
.btn-outline-primary { --bs-btn-color: #a6381a; --bs-btn-border-color: #bd421f; --bs-btn-hover-bg: #ffede7; --bs-btn-hover-color: #832b14; --bs-btn-hover-border-color: #a6381a; background: transparent; }
.btn-primary:hover, .btn-dark:hover, .btn-outline-dark:hover, .btn-outline-primary:hover { transform: none; }
.agency-hero { background: var(--agency-ink); color: #fff; padding: 2rem 0 1.6rem; }
.agency-hero .agency-container, .agency-expertise .agency-container { max-width: 1536px; }
.agency-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 2.4rem; align-items: center; }
.agency-hero-copy { min-width: 0; padding: 1.4rem 0 .2rem; }
.agency-eyebrow { color: #ff997c; font-size: .72rem; letter-spacing: .17em; font-weight: 700; text-transform: uppercase; margin: 0 0 2.1rem; }
.agency-hero h1 { font-size: clamp(2.5rem,4.2vw,4.05rem); font-weight: 800; line-height: 1.085; margin: 0; letter-spacing: -.035em; text-wrap: initial; }
.agency-hero-lead { font-size: clamp(1.05rem,1.5vw,1.42rem); line-height: 1.5; color: #e4e5e7; margin: 1.9rem 0 1.6rem; max-width: 47ch; }
.agency-principles { list-style: none; display: flex; flex-wrap: wrap; gap: .8rem 0; padding: 0; margin: 3.4rem 0 0; color: #e4e5e7; }
.agency-principles li { font-size: .64rem; letter-spacing: .17em; text-transform: uppercase; padding: 0 1.2rem; border-right: 1px solid #787d84; }
.agency-principles li:first-child { padding-left: 0; }
.agency-principles li:last-child { border: 0; padding-right: 0; }
.agent-journey { background: #fff; color: var(--agency-ink); border-radius: 7px; padding: 1.9rem 2.8rem 1.4rem; min-width: 0; }
.journey-caption { margin: 0 0 .5rem; font-size: .68rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.agent-journey h2 { font-weight: 800; font-size: clamp(1.75rem,2.8vw,2.65rem); line-height: 1.15; margin: 0 0 1.25rem; }
.journey-tabs { display: flex; border-bottom: 1px solid var(--agency-line); margin-bottom: 1.8rem; }
.journey-tab { border: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: .8rem .2rem 1rem; background: transparent; flex: 1; font: inherit; font-size: .92rem; color: var(--agency-muted); display: flex; align-items: center; justify-content: center; gap: .7rem; }
.journey-tab i { font-size: 1.4rem; }
.journey-tab.is-active { border-bottom-color: var(--agency-orange); color: var(--agency-ink); font-weight: 800; }
.journey-tab:hover { background: #fff5f1; }
.journey-steps { list-style: none; padding: 0; margin: 0; }
.journey-steps li { display: grid; grid-template-columns: 4.6rem minmax(0,1fr); gap: 1.2rem; position: relative; padding-bottom: 1.65rem; }
.journey-steps li:not(:last-child)::before { content: ''; position: absolute; top: 3.4rem; bottom: 0; left: 2.05rem; border-left: 1px solid var(--agency-orange); }
.journey-icon { display: grid; place-items: center; width: 4.1rem; height: 4.1rem; border: 1px solid var(--agency-line); border-radius: 8px; }
.journey-icon i { font-size: 1.8rem; }
.journey-steps h3 { font-size: 1.23rem; font-weight: 800; margin: .45rem 0 .25rem; }
.journey-steps p { color: var(--agency-muted); font-size: .95rem; line-height: 1.45; margin: 0; }
.journey-footnote { margin: 0; border-top: 1px solid var(--agency-line); padding-top: 1rem; font-size: .78rem; letter-spacing: .06em; color: var(--agency-muted); }
.agency-expertise { padding: 2.65rem 0 3.5rem; border-bottom: 1px solid var(--agency-line); }
.agency-expertise-grid { display: grid; grid-template-columns: 1.18fr .82fr; gap: 3rem; }
.agency-expertise h2 { margin: 0 0 1rem; font-size: clamp(2.1rem,3.9vw,3.7rem); font-weight: 800; line-height: 1.04; }
.agency-expertise p { color: var(--agency-muted); max-width: 60ch; font-size: 1.13rem; line-height: 1.5; }
.agency-expertise-list { list-style: none; margin: 0; padding: 0 0 0 3.4rem; border-left: 1px solid var(--agency-line); }
.agency-expertise-list li { padding-left: 2.8rem; position: relative; margin-bottom: 1.15rem; }
.agency-expertise-list li::before { content: ''; position: absolute; width: 1.5rem; height: 4px; background: var(--agency-orange); top: .65rem; left: 0; }
.agency-expertise-list h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: .3rem; }
.agency-expertise-list p { font-size: .95rem; margin: 0; }
/* Remaining public sections share the same restrained surface language. */
.home-page { padding-bottom: 0; }
.page-section { padding-block: 5rem; }
.page-section .container { max-width: 1440px; }
.hero-script { font-family: inherit; font-style: normal; font-weight: inherit; color: #a6381a; font-size: inherit; }
.section-title-xl { letter-spacing: -.03em; font-size: clamp(2rem,3.4vw,3.2rem); }
.section-shell, .section-shell-warm, .value-card, .project-card, .contact-shell, .team-card { background: #fff; box-shadow: none; }
.section-shell { padding: clamp(1.4rem,3.5vw,3rem); }
.value-card { border: 0; border-top: 1px solid var(--agency-line); border-radius: 0; padding-top: 1.5rem; }
.value-card:hover, .project-card:hover, .team-card:hover { transform: none; box-shadow: none; }
.section-eyebrow { color: #a6381a; letter-spacing: .08em; }
.service-icon { color: #bd421f; }
.section-shell-warm, .services-section, #how-we-work, #faq { background: #f3f4f5; }
.services-section .value-card { background: transparent; }
.google-reviews-section { background: #fff; }
.google-reviews-intro { max-width: 760px; margin: 0 auto 2.4rem; text-align: center; }
.google-reviews-brand { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.1rem; color: var(--agency-ink); font-size: 1.15rem; font-weight: 800; }
.google-reviews-brand svg { width: 1.65rem; height: 1.65rem; }
.google-reviews-intro .section-lead { margin-inline: auto; }
.google-reviews-content { max-width: 1180px; margin: 0 auto; }
.google-reviews-summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; border-block: 1px solid var(--agency-line); }
.google-reviews-rating { display: flex; align-items: center; gap: 1rem; }
.google-reviews-rating-value { color: var(--agency-ink); font-size: 2.5rem; line-height: 1; font-weight: 800; letter-spacing: -.04em; }
.google-reviews-rating-copy { margin: 0; color: var(--agency-muted); font-size: .88rem; }
.google-reviews-stars { display: inline-flex; gap: .18rem; color: #fbbc04; }
.google-reviews-stars i { font-size: .95rem; }
.google-review-meta .google-reviews-stars,
.google-review-meta .google-reviews-stars i { color: #fbbc04; }
.google-reviews-link { display: inline-flex; align-items: center; gap: .6rem; color: var(--bs-link-color); font-weight: 800; text-decoration: none; }
.google-reviews-link:hover { color: var(--bs-link-hover-color); text-decoration: underline; }
.google-reviews-link svg { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; }
.google-reviews-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.google-review-card { display: flex; min-width: 0; flex-direction: column; gap: 1.2rem; padding: 1.5rem; border: 1px solid var(--agency-line); border-radius: var(--presentation-radius-md); background: #fff; }
.google-review-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.google-review-author { display: flex; min-width: 0; align-items: center; gap: .8rem; }
.google-review-avatar { display: grid; width: 2.7rem; height: 2.7rem; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--agency-ink); color: #fff; font-size: .85rem; font-weight: 800; }
.google-review-author h3 { margin: 0; color: var(--agency-ink); font-size: 1rem; font-weight: 800; letter-spacing: -.015em; }
.google-review-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-top: .3rem; color: var(--agency-muted); font-size: .78rem; }
.google-review-google-mark { display: grid; width: 1.55rem; height: 1.55rem; flex: 0 0 auto; place-items: center; }
.google-review-google-mark svg { width: 100%; height: 100%; }
.google-review-comment { margin: 0; color: var(--agency-ink); font-size: .98rem; line-height: 1.7; white-space: pre-line; }
.google-review-reply { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--agency-line); color: var(--agency-muted); font-size: .86rem; line-height: 1.55; }
.google-review-reply strong { display: block; margin-bottom: .25rem; color: var(--agency-ink); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.google-reviews-status { max-width: 700px; margin: 0 auto; padding: 1.25rem 1.5rem; border: 1px solid var(--agency-line); color: var(--agency-muted); text-align: center; }
.google-reviews-status a { display: inline-block; margin-top: .35rem; }
.google-reviews-loading { color: var(--agency-muted); text-align: center; }
.google-reviews-loading .spinner-border { color: var(--agency-orange); }
.main-footer { padding: 3.5rem 0 2rem; background: #202326; color: #fff; border: 0; }
.main-footer .agency-logo { margin-bottom: 1.4rem; width: 250px; }
.main-footer .footer-copy, .main-footer .footer-meta { color: #c8cbd0; }
.main-footer a, .main-footer .footer-links a, .main-footer .footer-social-link { color: #fff; }
.main-footer a:hover { color: #ff9a7d; }
.main-footer .footer-social-link { background: transparent; border-color: #666b71; border-radius: 6px; }
.main-footer-shell { align-items: start; }
.form-control, .form-select { border-radius: 6px; border-color: #b6bbc1; }
.form-control::placeholder { color: #686d75; }
.form-control:focus, .form-select:focus { border-color: #bd421f; box-shadow: 0 0 0 3px rgb(244 98 58 / 18%); }
/* Agence IA: preserve the complete service, callback and booking flows. */
.ai-agency-page { --ai-ink: #202326; --ai-muted: #5d6169; --ai-blue: #bd421f; --ai-blue-text: #a6381a; --ai-surface: #fff; }
.ai-agency-page .ai-hero { background: #202326; padding: 3.5rem 0 4rem; }
.ai-agency-page .ai-hero-copy { color: #fff; }
.ai-agency-page .ai-hero h1 { color: #fff; }
.ai-agency-page .ai-hero h1 span { color: #ff9a7d; }
.ai-agency-page .ai-hero-lead, .ai-agency-page .ai-hero .ai-text-link { color: #d3d6da; }
.ai-agency-page .ai-offer-label { background: transparent; color: #e4e5e7; border-color: #676c74; border-radius: 6px; }
.ai-agency-page .ai-offer-label span { background: #f4623a; color: #202326; border-radius: 3px; }
.ai-agency-page .ai-hero-system { border-radius: 10px; box-shadow: none; border: 0; color: #202326; }
.ai-agency-page .ai-final-cta-shell { background: #f3f4f5; border-radius: 12px; }
.ai-agency-page .ai-architecture { background: #202326; }
.ai-agency-page .ai-architecture .ai-kicker { color: #ff9a7d; }
.ai-agency-page .ai-system-core-mark { background: #f4623a; color: #202326; }
/* Secondary routes, including documents and profile cards. */
.privacy-page, .tech-monitoring { padding-top: 3.5rem !important; }
.secondary-page-shell, .tech-monitoring-hero, .profile-shell, .login-shell { background: #fff; box-shadow: none; border-color: var(--agency-line); }
.secondary-page-title, .tech-monitoring-title { letter-spacing: -.03em; }
.agency-document { max-width: 1000px; padding: 3rem 1.5rem 5rem; line-height: 1.8; }
.agency-document h1 { margin-bottom: 1.5rem; }
.agency-document h2, .agency-document h3 { margin-top: 2rem; }
.agency-document img { max-width: 100%; height: auto; }
.vcard-page { padding-block: 3rem; }
.vcard-page .card { background: white; color: #202326; border-color: #dedfe2; border-radius: 12px; box-shadow: none; }
.error-container { background: #f3f4f5 !important; }
.error-container .error-icon { animation: none; }
.error-container .error-content { box-shadow: none; border-radius: 12px; }
/* Blog and all of its routes: reading surfaces remain light. */
.blog-container.blog-shell { max-width: 1440px; padding: 3.2rem clamp(24px,4vw,60px) 4rem; background: white; color: #202326; }
.blog-shell, .blog-shell * { --bs-body-bg: #fff; --bs-body-color: #202326; --bs-secondary-bg: #f3f4f5; --bs-tertiary-bg: #f3f4f5; --bs-border-color: #dedfe2; --bs-secondary-color: #5d6169; --bs-link-color: #ad391b; --bs-link-hover-color: #832b14; }
.blog-shell .blog-hero { padding: 0 0 2rem; border-bottom: 1px solid #dedfe2; }
.blog-shell .blog-hero-pill { background: transparent; border: 0; padding: 0; margin-bottom: 1.2rem; }
.blog-shell .blog-title { max-width: 19ch; font-size: clamp(2.5rem,4.2vw,4rem); letter-spacing: -.035em; }
.blog-shell .blog-section-block { padding: 0; border: 0; background: transparent; box-shadow: none; border-radius: 0; }
.blog-shell .sidebar-section, .blog-shell .blog-panel, .blog-shell .post-sidebar-related, .blog-shell .post-sidebar-tags, .blog-shell .sidebar .card { padding: 1.4rem; background: #f3f4f5; border: 0; border-radius: 8px; box-shadow: none; color: #202326; }
.blog-shell .featured-post, .blog-shell .post-card, .blog-shell .post-list-item { border-color: #dedfe2; border-radius: 8px; box-shadow: none; background: #fff; }
.blog-shell .featured-post:hover, .blog-shell .post-card:hover, .blog-shell .post-list-item:hover { box-shadow: none; transform: none; border-color: #bd421f; }
.blog-shell .post-card:hover .post-card-image img { transform: none; }
.blog-shell .featured-post-placeholder, .blog-shell .post-card-placeholder { background: #202326; }
.blog-shell .post-detail { padding: 0; background: #fff; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
.blog-shell .post-title { font-size: clamp(2rem,3.5vw,3.3rem); letter-spacing: -.03em; overflow-wrap: anywhere; }
.blog-shell .post-content { font-size: 1.05rem; line-height: 1.8; color: #202326; overflow-wrap: anywhere; }
.blog-shell .post-content h2 { margin-top: 2.5rem; font-size: 1.8rem; }
.blog-shell .post-content h3 { margin-top: 2rem; font-size: 1.45rem; }
.blog-shell .post-content a { color: #ad391b; text-decoration: underline; }
.blog-shell .post-content pre { overflow-x: auto; white-space: pre; max-width: 100%; }
.blog-shell .post-content table { display: block; overflow-x: auto; max-width: 100%; }
.blog-shell .post-content img { max-width: 100%; height: auto; }
.blog-shell .post-podcast-player { background: #f3f4f5; box-shadow: none; border-radius: 8px; }
.blog-shell .form-control, .blog-shell .form-select { color: #202326; background: #fff; border: 1px solid #b6bbc1; border-radius: 6px; }
.blog-shell .form-control:focus, .blog-shell .form-select:focus { border-color: #bd421f; box-shadow: 0 0 0 3px rgb(244 98 58 / 18%); }
.blog-shell .form-control::placeholder, .blog-shell .text-muted { color: #5d6169 !important; }
.blog-shell .toc-nav .nav-link.active { background: #ffede7; color: #832b14; }
.blog-shell .toc-nav .nav-link { line-height: 1.5 !important; padding-block: .3rem !important; }
.blog-shell .post-updated { color: #a6381a; }
.blog-shell .badge.bg-primary, .blog-shell .text-bg-primary { color: #202326 !important; }
.blog-shell .post-image-modal .modal-content { border-radius: 8px; }
@media (min-width: 1600px) { .agency-hero { padding-bottom: 2rem; } }
@media (max-width: 1199.98px) {
#mainNav .navbar-collapse { padding: 1.4rem 0 .5rem; }
#mainNav .navbar-collapse .agency-button { margin-top: 1rem; }
.agency-hero-grid { gap: 2rem; }
.agent-journey { padding: 1.6rem; }
.agency-principles { gap: .9rem; margin-top: 2rem; }
.agency-principles li { border: 0; padding: 0; }
.agency-expertise-grid { gap: 2rem; }
.agency-expertise-list { padding-left: 2rem; }
}
@media (max-width: 991.98px) {
.agency-hero-grid, .agency-expertise-grid { grid-template-columns: 1fr; }
.agency-hero { padding: 1rem 0 2.4rem; }
.agency-hero h1 { font-size: clamp(2.5rem,6vw,3.7rem); max-width: 20ch; }
.agency-hero-copy { padding: 1rem 0; }
.agency-eyebrow { margin-bottom: 1.4rem; }
.agency-hero-lead { font-size: 1.2rem; }
.agency-expertise-list { padding: 0; border: 0; }
.agency-expertise h2 { font-size: clamp(2.1rem,5.6vw,3rem); }
.ai-agency-page .ai-hero { padding-top: 2rem; }
.page-section { padding-block: 3rem; }
.google-reviews-summary { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 575.98px) {
.agency-logo { width: 210px; }
#mainNav.agency-nav { padding-block: 1rem; }
.agency-hero h1 { font-size: 2.5rem; line-height: 1.12; }
.agency-hero .agency-button { width: 100%; }
.agency-principles { gap: .9rem 1rem; }
.agent-journey { padding: 1.35rem; }
.agent-journey h2 { font-size: 1.8rem; }
.journey-tab { font-size: .78rem; gap: .4rem; }
.journey-tab i { font-size: 1.15rem; }
.journey-steps li { grid-template-columns: 2.7rem minmax(0,1fr); gap: 1rem; }
.journey-icon { width: 2.7rem; height: 2.7rem; border-radius: 5px; }
.journey-icon i { font-size: 1.3rem; }
.journey-steps li:not(:last-child)::before { top: 2.7rem; left: 1.3rem; }
.journey-steps h3 { margin-top: .1rem; }
.journey-steps p { font-size: .9rem; }
.journey-footnote { letter-spacing: .025em; }
.blog-shell .blog-hero-pill { display: block; }
.blog-shell .blog-hero-pill .hero-pill-badge { margin-bottom: .5rem; }
.blog-shell .featured-post-content { padding: 1.2rem; }
.blog-shell .post-detail { padding: 0; }
.main-footer-shell { gap: 2.3rem; }
.vcard-page { padding-top: 1rem; }
.google-reviews-grid { grid-template-columns: 1fr; }
.google-reviews-summary { padding-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* Corrections from desktop/mobile review. */
.os-repo-stack { grid-template-columns: minmax(0, 1fr); }
.os-repo-card { min-width: 0; box-shadow: none; background: #fff; }
.os-repo-meta { flex-wrap: wrap; }
.os-repo-name { overflow-wrap: anywhere; }
.os-repo-card:hover { transform: none; box-shadow: none; }
.vcard-page img { max-width: 100%; height: auto; }
.blog-shell .app-sidebar-icon { background: #ffede7; color: #a6381a; border-radius: 6px; box-shadow: none; }
.blog-shell .app-sidebar-icon i { color: #a6381a; }
.blog-shell .app-sidebar-card { background: transparent; border: 0; border-bottom: 1px solid #dedfe2; border-radius: 0; padding: .9rem 0; }
.blog-shell .app-sidebar-card:last-child { border-bottom: 0; }
.blog-shell .app-sidebar-card:hover, .blog-shell .app-sidebar-card:hover .app-sidebar-icon { transform: none; animation: none; }
.blog-shell .beta-badge { background: #ffede7; color: #832b14; }
.ai-agency-page .ai-hero h1 { font-size: clamp(2.6rem, 4.6vw, 4.4rem); max-width: 17ch; }
.ai-agency-page .ai-hero .btn-dark { --bs-btn-bg: #f4623a; --bs-btn-color: #202326; --bs-btn-border-color: #f4623a; --bs-btn-hover-bg: #ff8b67; --bs-btn-hover-color: #202326; --bs-btn-hover-border-color: #ff8b67; }
.blog-shell .breadcrumb { flex-wrap: wrap; }
.blog-shell .breadcrumb-item { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
/* Shared footer and blog icon contrast, including legacy stylesheet rules. */
.main-footer .main-footer-shell { background: transparent; border: 0; box-shadow: none; }
.blog-shell .app-sidebar-icon i, .blog-shell .app-sidebar-icon svg { color: #ad391b !important; }
.blog-shell .app-sidebar-icon img, .blog-shell .app-sidebar-icon svg { filter: none; }
body {
background-color: #2a2a2a;
}
:root {
--blog-surface: rgba(255, 255, 255, 0.04);
--blog-surface-2: rgba(255, 255, 255, 0.06);
--blog-border: rgba(255, 255, 255, 0.10);
--blog-radius: 14px;
--sidebar-border-color: rgba(0, 0, 0, 0.15);
}
.blog-container {
width: 100%;
padding-right: var(--bs-gutter-x, 0.75rem);
padding-left: var(--bs-gutter-x, 0.75rem);
padding-top: 90px;
margin-right: auto;
margin-left: auto;
margin-bottom: 20px;
color: #ffffff;
border-radius: 8px;
background-color: #1a1a1a;
}
.blog-container,
.blog-container * {
--bs-body-bg: #1a1a1a;
--bs-body-color: #ffffff;
--bs-secondary-bg: #2a2a2a;
--bs-tertiary-bg: #3a3a3a;
--bs-border-color: #3a3a3a;
--bs-secondary-color: #b0b0b0;
}
.blog-container .card {
background-color: #2a2a2a;
border-color: #3a3a3a;
color: #ffffff;
}
.blog-container .form-control,
.blog-container .form-select {
background-color: #2a2a2a;
border-color: #3a3a3a;
color: #ffffff;
}
.blog-container .form-control:focus,
.blog-container .form-select:focus {
background-color: #2a2a2a;
border-color: #f4623a;
color: #ffffff;
}
.blog-container .form-control::placeholder {
color: #6c757d;
}
.blog-container .text-muted {
color: #b0b0b0 !important;
}
@media (min-width: 576px) {
.blog-container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.blog-container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.blog-container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.blog-container {
max-width: 1140px;
}
}
@media (min-width: 1400px) {
.blog-container {
max-width: 1320px;
}
}
/* Blog Header */
.blog-header {
padding: 2rem 0;
text-align: center;
border-bottom: 2px solid #3a3a3a;
}
.blog-title {
font-size: 2.5rem;
font-weight: 700;
color: #f4623a;
margin-bottom: 0.5rem;
}
.blog-subtitle {
font-size: 1.1rem;
color: #b0b0b0;
margin-bottom: 0;
}
/* Sidebar Sections */
.sidebar-section {
background: #2a2a2a;
border: 1px solid #3a3a3a;
border-radius: 0.5rem;
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.blog-panel-title {
font-size: 1.25rem;
font-weight: 700;
color: #f4623a;
margin-bottom: 0.5rem;
border-bottom: 2px solid #f4623a;
padding-bottom: 0.5rem;
}
/* Application Cards in Sidebar */
.appliman-apps-sidebar {
display: flex;
flex-direction: column;
gap: 1rem;
}
.app-sidebar-card {
display: flex;
gap: 1rem;
padding: 1rem;
background: #1a1a1a;
border: 1px solid #3a3a3a;
border-radius: 0.5rem;
text-decoration: none;
color: inherit;
transition: all 0.3s ease;
position: relative;
}
.app-sidebar-card:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(244, 98, 58, 0.3);
border-color: #f4623a !important;
}
.app-sidebar-card:focus,
.app-sidebar-card:focus-visible {
outline: 2px solid #f4623a !important;
outline-offset: 2px;
border-color: #f4623a !important;
box-shadow: 0 0 0 3px rgba(244, 98, 58, 0.2) !important;
}
.app-sidebar-card:focus:not(:focus-visible) {
outline: none;
}
.app-sidebar-icon {
flex-shrink: 0;
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f4623a 0%, #c34e2e 100%);
border-radius: 0.5rem;
color: white !important;
font-size: 1.5rem;
}
.app-sidebar-icon img,
.app-sidebar-icon svg {
filter: brightness(0) invert(1);
}
.app-sidebar-icon i,
.app-sidebar-icon *,
.app-sidebar-icon::before,
.app-sidebar-icon::after {
color: white !important;
}
.app-sidebar-content {
flex: 1;
}
.app-sidebar-title {
font-size: 1rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 0.25rem;
}
.app-sidebar-description {
font-size: 0.85rem;
color: #b0b0b0;
line-height: 1.4;
margin-bottom: 0;
}
.app-sidebar-link {
flex-shrink: 0;
display: flex;
align-items: center;
color: #f4623a;
font-size: 1rem;
}
.app-sidebar-card:hover .app-sidebar-icon {
animation: pulse 0.5s ease;
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
/* Responsive Design */
@media (max-width: 768px) {
.blog-title {
font-size: 2rem;
}
.blog-subtitle {
font-size: 1rem;
}
.sidebar-section {
padding: 1rem;
}
.app-sidebar-card {
padding: 0.75rem;
}
.app-sidebar-icon {
width: 2.5rem;
height: 2.5rem;
font-size: 1.25rem;
}
}
/* Login Container */
.login-container {
min-height: calc(100vh - 90px);
padding: 2rem 0;
}
.login-container .card {
background: #2a2a2a;
border: 1px solid #3a3a3a;
color: #ffffff;
max-width: 500px;
}
@media (max-width: 768px) {
.login-container .card {
width: 95% !important;
}
}
.app-sidebar-icon {
width: 2.5rem;
height: 2.5rem;
font-size: 1.25rem;
}
.blog-topbar {
z-index: 1030;
backdrop-filter: blur(10px);
background: color-mix(in oklab, var(--bs-body-bg) 80%, transparent);
}
.blog-brand {
letter-spacing: 0.2px;
}
.blog-layout {
min-height: calc(100vh - 56px - 80px);
}
/* Post list cards */
.blog-post-card {
border: 1px solid var(--blog-border);
border-radius: var(--blog-radius);
background: var(--blog-surface);
padding: 1.1rem 1.1rem;
}
.blog-post-card:hover {
background: var(--blog-surface-2);
}
.blog-post-title a {
text-decoration: none;
}
.blog-post-title a:hover {
text-decoration: underline;
text-underline-offset: 0.2em;
}
/* Sidebar panels */
.blog-panel {
border: 1px solid var(--blog-border);
border-radius: var(--blog-radius);
background: var(--blog-surface);
padding: 1rem;
}
.blog-panel-title {
font-size: 0.85rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-secondary-color);
margin-bottom: 0.5rem;
}
#mainNav {
/*box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
background-color: #fff;*/
transition: background-color 0.2s ease;
}
/* Old navbar styles commented out to prevent conflict with new topbar design
#mainNav .navbar-brand {
font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-weight: 700;
color: #212529;
}
#mainNav .navbar-nav .nav-item .nav-link {
color: #6c757d;
font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-weight: 700;
font-size: 0.9rem;
padding: 0.75rem 0;
}
#mainNav .navbar-nav .nav-item .nav-link:hover,
#mainNav .navbar-nav .nav-item .nav-link:active {
color: #f4623a;
}
#mainNav .navbar-nav .nav-item .nav-link.active {
color: #f4623a !important;
}
@media (min-width: 992px) {
#mainNav {
box-shadow: none;
background-color: transparent;
}
#mainNav .navbar-brand {
color: rgba(255, 255, 255, 0.7);
}
#mainNav .navbar-brand:hover {
color: #fff;
}
#mainNav .navbar-nav .nav-item .nav-link {
color: rgba(255, 255, 255, 0.7);
padding: 0 1rem;
}
#mainNav .navbar-nav .nav-item .nav-link:hover {
color: #fff;
}
#mainNav .navbar-nav .nav-item:last-child .nav-link {
padding-right: 0;
}
#mainNav.navbar-shrink {
box-shadow: none;
background-color: transparent;
}
#mainNav.navbar-shrink .navbar-brand {
color: #212529;
}
#mainNav.navbar-shrink .navbar-brand:hover {
color: #f4623a;
}
#mainNav.navbar-shrink .navbar-nav .nav-item .nav-link {
color: #212529;
}
#mainNav.navbar-shrink .navbar-nav .nav-item .nav-link:hover {
color: #f4623a;
}
}
*/
.brand-shrink img {
filter: invert(100%) /* sepia(100%) saturate(500%) hue-rotate(330deg); */
}
aside .sidebar {
top: 100px !important;
align-self: flex-start !important;
}
.post-sidebar-tags {
position: relative;
z-index: 10 !important;
}
.sidebar-section.toc-sticky {
position: relative;
z-index: 10 !important;
}
/* Correction du gap pour la table des matières - réduction de l'espacement vertical */
.toc-nav .nav.nav-pills.flex-column {
gap: 0.125rem !important;
row-gap: 0.125rem !important;
}
.toc-nav .nav-link {
padding-top: 0.125rem !important;
padding-bottom: 0.125rem !important;
margin-bottom: 0 !important;
line-height: 1.2 !important;
}
body {
background:
radial-gradient(circle at top left, rgba(244, 98, 58, 0.5), transparent 28%),
radial-gradient(circle at top right, rgba(244, 98, 58, 0.07), transparent 24%),
linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
color: #202326;
}
.blog-container {
padding-top: 7.5rem;
padding-bottom: 3rem;
margin-bottom: 0;
color: #202326;
border-radius: 0;
background: transparent;
}
.blog-shell {
max-width: 1320px;
}
.blog-shell,
.blog-shell * {
--bs-body-bg: #ffffff;
--bs-body-color: #202326;
--bs-border-color: #dedfe2;
--bs-secondary-color: #5d6169;
--bs-link-color: #bd421f;
--bs-link-hover-color: #a6381a;
}
.blog-hero {
padding: 0.5rem 0 1rem;
}
.blog-header {
padding: 0;
text-align: left;
border-bottom: 0;
}
.blog-title {
max-width: 14ch;
font-size: clamp(2.4rem, 6vw, 4.6rem);
line-height: 1.02;
letter-spacing: -0.05em;
font-weight: 800;
color: #202326;
margin-bottom: 1rem;
}
.blog-subtitle {
max-width: 46rem;
font-size: 1.1rem;
line-height: 1.7;
color: #5d6169;
}
.blog-section-block {
padding: 1.5rem;
border-radius: 28px;
border: 1px solid rgba(222, 223, 226, 0.95);
background: rgba(255, 255, 255, 0.82);
box-shadow: 0 16px 36px rgba(63, 67, 74, 0.05);
}
.blog-container .section-title {
margin: 0;
font-size: 1.4rem;
font-weight: 800;
letter-spacing: -0.03em;
color: #202326;
}
.view-toggle .btn {
border-radius: 9999px;
padding-inline: 0.9rem;
}
.sidebar-section,
.blog-panel,
.post-sidebar-related,
.post-sidebar-tags,
.sidebar .card,
.blog-container .card {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(222, 223, 226, 0.95);
border-radius: 24px;
box-shadow: 0 12px 30px rgba(63, 67, 74, 0.04);
color: #202326;
}
.sidebar-section,
.blog-panel,
.post-sidebar-related,
.post-sidebar-tags,
.sidebar .card {
padding: 1.2rem;
}
.blog-panel-title,
.sidebar-title,
.toc-title,
.post-sidebar-tags .card-title {
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #bd421f;
border-bottom: 0;
padding-bottom: 0;
margin-bottom: 0.8rem;
}
.app-sidebar-card {
padding: 1rem;
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(222, 223, 226, 0.95);
border-radius: 22px;
box-shadow: 0 12px 30px rgba(63, 67, 74, 0.04);
}
.app-sidebar-card:hover {
transform: translateY(-2px);
box-shadow: 0 16px 34px rgba(63, 67, 74, 0.08);
border-color: rgba(244, 98, 58, 0.2) !important;
}
.app-sidebar-icon {
background: #ffede7;
border-radius: 18px;
}
.app-sidebar-title,
.related-post-title,
.blog-post-title a {
color: #202326;
font-weight: 800;
letter-spacing: -0.02em;
}
.app-sidebar-description,
.text-muted,
.text-body-secondary,
.related-post-item small {
color: #5d6169 !important;
}
.appliman-links-list {
display: grid;
gap: 0.55rem;
}
.appliman-sidebar-link {
display: inline-flex;
align-items: center;
color: #5d6169;
font-weight: 600;
text-decoration: none;
transition: color 0.2s ease, transform 0.2s ease;
}
.appliman-sidebar-link:hover {
color: #bd421f;
transform: translateX(2px);
}
.blog-post-card {
border: 1px solid rgba(222, 223, 226, 0.95);
border-radius: 24px;
background: rgba(255, 255, 255, 0.88);
padding: 1.1rem;
box-shadow: 0 12px 30px rgba(63, 67, 74, 0.04);
}
.blog-post-card:hover {
background: rgba(255, 255, 255, 0.94);
}
.post-detail {
padding: 1.5rem;
border-radius: 28px;
border: 1px solid rgba(222, 223, 226, 0.95);
background: rgba(255, 255, 255, 0.86);
box-shadow: 0 16px 36px rgba(63, 67, 74, 0.05);
}
.post-title {
font-size: clamp(2rem, 4vw, 3.4rem);
line-height: 1.04;
letter-spacing: -0.05em;
font-weight: 800;
color: #202326;
}
.post-subtitle,
.post-meta,
.post-content,
.post-content p,
.post-content li {
color: #5f6570;
}
.post-content h2,
.post-content h3,
.post-content h4 {
color: #202326;
font-weight: 800;
letter-spacing: -0.03em;
margin-top: 2rem;
}
.post-content a,
.related-post-item a {
color: #bd421f;
}
.post-footer {
border-top-color: rgba(222, 223, 226, 0.95) !important;
}
.blog-container .form-control,
.blog-container .form-select {
background: rgba(255, 255, 255, 0.82);
border-color: rgba(222, 223, 226, 0.95);
color: #202326;
border-radius: 18px;
box-shadow: none;
}
.blog-container .form-control:focus,
.blog-container .form-select:focus {
background: #fff;
border-color: rgba(244, 98, 58, 0.45);
color: #202326;
box-shadow: 0 0 0 0.2rem rgba(244, 98, 58, 0.08);
}
.blog-container .btn-primary {
--bs-btn-bg: #2f343b;
--bs-btn-border-color: #2f343b;
--bs-btn-hover-bg: #25292f;
--bs-btn-hover-border-color: #25292f;
border-radius: 9999px;
}
.view-toggle .btn-primary {
--bs-btn-color: #fff;
--bs-btn-hover-color: #fff;
--bs-btn-active-color: #fff;
color: #fff;
}
.blog-container .btn-outline-secondary {
--bs-btn-color: #202326;
--bs-btn-border-color: rgba(63, 67, 74, 0.14);
--bs-btn-hover-color: #202326;
--bs-btn-hover-bg: rgba(255, 255, 255, 0.85);
--bs-btn-hover-border-color: rgba(63, 67, 74, 0.2);
}
aside .sidebar {
top: 0 !important;
align-self: stretch !important;
}
@media (max-width: 1199.98px) {
.blog-title {
max-width: none;
}
}
@media (max-width: 767.98px) {
.blog-container {
padding-top: 6.8rem;
}
.blog-section-block,
.post-detail,
.sidebar-section,
.blog-panel,
.post-sidebar-related,
.post-sidebar-tags,
.sidebar .card {
padding: 1rem;
border-radius: 22px;
}
.blog-title {
font-size: 2.4rem;
}
}
/* Rendered Markdown content */
.post-content table {
width: 100%;
margin: 1.5rem 0;
border: 1px solid #c9ccd0;
border-collapse: collapse;
background: #ffffff;
}
.post-content th,
.post-content td {
padding: 0.75rem 0.9rem;
border: 1px solid #c9ccd0;
vertical-align: top;
text-align: start;
}
.post-content th {
color: #202326;
background: #f3f4f5;
font-weight: 700;
}
.post-content tbody tr:nth-child(even) td {
background: rgba(243, 244, 245, 0.42);
}
.post-content :is(h2, h3, h4)[id] {
scroll-margin-top: 7rem;
}
/* Bootstrap Scrollspy target */
.sidebar-section.toc-sticky .toc-nav {
max-height: min(65vh, 36rem);
padding-inline-end: 0.4rem;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
scrollbar-color: rgba(244, 98, 58, 0.42) rgba(222, 223, 226, 0.35);
scrollbar-width: thin;
}
.sidebar-section.toc-sticky .toc-nav::-webkit-scrollbar {
width: 0.5rem;
}
.sidebar-section.toc-sticky .toc-nav::-webkit-scrollbar-track {
background: rgba(222, 223, 226, 0.35);
border-radius: 9999px;
}
.sidebar-section.toc-sticky .toc-nav::-webkit-scrollbar-thumb {
background: rgba(244, 98, 58, 0.42);
border-radius: 9999px;
}
.sidebar-section.toc-sticky .toc-nav .nav-link.active {
color: #202326;
background: #ffede7;
font-weight: 700;
}
.sidebar-section.toc-sticky .toc-nav .nav-link:focus-visible {
outline: 2px solid #bd421f;
outline-offset: 2px;
}
/* Article image zoom */
.post-image-zoom-trigger {
cursor: zoom-in;
}
img.post-image-zoom-trigger {
transition: filter 160ms ease-out;
}
img.post-image-zoom-trigger:hover {
filter: brightness(0.96);
}
.post-image-zoom-trigger:focus-visible {
outline: 3px solid rgba(244, 98, 58, 0.72);
outline-offset: 4px;
}
.post-image-modal .modal-content {
color: #202326;
background: #ffffff;
border: 1px solid #dedfe2;
border-radius: 18px;
}
.post-image-modal .modal-header {
border-bottom-color: #dedfe2;
}
.post-image-modal-preview {
display: block;
width: auto;
max-width: 100%;
max-height: calc(100vh - 13rem);
height: auto;
margin-inline: auto;
object-fit: contain;
}
.post-image-modal-caption {
max-width: 70ch;
margin: 1rem auto 0;
color: #5d6169;
}
@media (max-width: 991.98px) {
.sidebar-section.toc-sticky .toc-nav {
max-height: min(60vh, 28rem);
}
}
/* Keep wide technical content scrollable inside its own region. */
.blog-main-grid > *, .post-detail, .post-card-content, .post-list-content, .sidebar {
min-width: 0;
}
.post-detail, .post-card-title, .post-list-title, .featured-post-title {
overflow-wrap: anywhere;
}
.post-detail pre, .post-detail .mermaid, .post-detail .table-responsive {
max-width: 100%;
overflow-x: auto;
}
.post-detail table {
display: block;
width: max-content;
max-width: 100%;
overflow-x: auto;
}
.post-detail img, .post-detail iframe, .post-detail svg {
max-width: 100%;
}
.post-detail img {
height: auto;
}
.post-card-image img, .post-list-image img, .featured-post-image img {
height: auto;
}
/* ========== CODE HIGHLIGHTING STYLES (Non-scoped for dynamic content) ========== */
/* Wrapper pour les blocs de code */
.code-block-wrapper {
position: relative;
margin: 1.5rem 0;
border-radius: 8px;
overflow: hidden;
background: #1e1e1e;
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* En-tête du bloc de code */
.code-block-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 1rem;
background: rgba(0, 0, 0, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
min-height: 2.5rem;
}
/* Nom du langage */
.code-block-language {
font-size: 0.75rem;
font-weight: 600;
color: #9cdcfe;
text-transform: uppercase;
letter-spacing: 0.08em;
flex-shrink: 0;
}
/* Bouton de copie */
.code-copy-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.35rem 0.65rem;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 6px;
color: #d4d4d4;
font-size: 0.75rem;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
flex-shrink: 0;
margin-left: auto;
}
.code-copy-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.3);
color: #ffffff;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.code-copy-btn:active {
transform: translateY(0);
box-shadow: none;
}
.code-copy-btn.copied {
background: rgba(76, 175, 80, 0.15);
border-color: rgba(76, 175, 80, 0.5);
color: #4caf50;
}
.code-copy-btn.copied:hover {
background: rgba(76, 175, 80, 0.2);
transform: translateY(-1px);
}
.code-copy-btn i {
font-size: 0.875rem;
}
.copy-text {
font-weight: 500;
font-size: 0.75rem;
letter-spacing: 0.02em;
}
/* Zone de code */
.code-block-wrapper pre {
margin: 0;
padding: 1rem;
background: transparent;
overflow-x: auto;
font-size: 0.875rem;
line-height: 1.6;
}
.code-block-wrapper code {
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
background: transparent;
padding: 0;
border-radius: 0;
color: #d4d4d4;
display: block;
white-space: pre;
overflow-wrap: normal;
word-break: normal;
}
/* Scrollbar personnalisée pour les blocs de code */
.code-block-wrapper pre::-webkit-scrollbar {
height: 8px;
}
.code-block-wrapper pre::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.2);
}
.code-block-wrapper pre::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 4px;
}
.code-block-wrapper pre::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.4);
}
/* Responsive */
@media (max-width: 767.98px) {
.code-block-wrapper {
margin: 1rem -1rem;
border-radius: 0;
border-left: none;
border-right: none;
}
.code-block-header {
padding: 0.4rem 0.75rem;
min-height: 2.25rem;
}
.code-block-language {
font-size: 0.7rem;
}
.code-copy-btn .copy-text {
display: none;
}
.code-copy-btn {
padding: 0.3rem 0.5rem;
min-width: 32px;
gap: 0;
}
.code-copy-btn i {
font-size: 0.875rem;
}
}
/* Support du thème clair */
[data-bs-theme="light"] .code-block-wrapper {
background: #f8f9fa;
border-color: #dee2e6;
}
[data-bs-theme="light"] .code-block-header {
background: rgba(0, 0, 0, 0.03);
border-bottom-color: #dee2e6;
}
[data-bs-theme="light"] .code-block-language {
color: #0066cc;
}
[data-bs-theme="light"] .code-copy-btn {
background: transparent;
border-color: rgba(0, 0, 0, 0.15);
color: #495057;
}
[data-bs-theme="light"] .code-copy-btn:hover {
background: rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.3);
color: #212529;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
[data-bs-theme="light"] .code-copy-btn.copied {
background: rgba(76, 175, 80, 0.1);
border-color: rgba(76, 175, 80, 0.4);
color: #2e7d32;
}
[data-bs-theme="light"] .code-copy-btn.copied:hover {
background: rgba(76, 175, 80, 0.15);
}
[data-bs-theme="light"] .code-block-wrapper code {
color: #212529;
}
/* Animation de chargement pour Prism */
@keyframes prism-loading {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
.code-block-wrapper code:not(.prism-highlighted) {
animation: prism-loading 1.5s ease-in-out infinite;
}
/* Animation pour le bouton copié */
@keyframes copy-success {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.code-copy-btn.copied {
animation: copy-success 0.3s ease-out;
}
/* ========== MERMAID DIAGRAMS ========== */
/* Wrapper pour les diagrammes Mermaid - similaire aux blocs de code */
.mermaid-wrapper {
position: relative;
margin: 1.5rem 0;
border-radius: 8px;
overflow: hidden;
background: #1e1e1e;
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* En-tête du diagramme Mermaid */
.mermaid-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 1rem;
background: rgba(0, 0, 0, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
min-height: 2.5rem;
}
/* Label du diagramme */
.mermaid-label {
font-size: 0.75rem;
font-weight: 600;
color: #9cdcfe;
text-transform: uppercase;
letter-spacing: 0.08em;
flex-shrink: 0;
}
/* Groupe de boutons dans l'en-tête */
.mermaid-buttons {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
}
/* Boutons de la barre d'outils Mermaid */
.mermaid-copy-btn,
.mermaid-fullscreen-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.35rem 0.65rem;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 6px;
color: #d4d4d4;
font-size: 0.75rem;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
flex-shrink: 0;
}
.mermaid-copy-btn:hover,
.mermaid-fullscreen-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.3);
color: #ffffff;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.mermaid-copy-btn:active,
.mermaid-fullscreen-btn:active {
transform: translateY(0);
box-shadow: none;
}
.mermaid-copy-btn.copied {
background: rgba(76, 175, 80, 0.15);
border-color: rgba(76, 175, 80, 0.5);
color: #4caf50;
}
.mermaid-copy-btn.copied:hover {
background: rgba(76, 175, 80, 0.2);
transform: translateY(-1px);
}
.mermaid-copy-btn i,
.mermaid-fullscreen-btn i {
font-size: 0.875rem;
}
.mermaid-copy-text,
.mermaid-fullscreen-text {
font-weight: 500;
font-size: 0.75rem;
letter-spacing: 0.02em;
}
/* Conteneur du diagramme */
.mermaid-content {
padding: 1.5rem;
background: transparent;
overflow-x: auto;
display: flex;
justify-content: center;
align-items: center;
}
.mermaid-wrapper.mermaid-rendered .mermaid-content {
padding: 1rem;
}
/* Diagrammes Mermaid avant rendu */
pre.mermaid {
background: transparent;
border: none;
color: #d4d4d4;
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
font-size: 0.875rem;
padding: 0;
margin: 0;
white-space: pre;
}
/* Conteneur du diagramme Mermaid rendu */
.mermaid-content div.mermaid {
width: 100%;
}
/* Diagrammes Mermaid après rendu */
.mermaid-content svg {
width: 100%;
max-width: 100%;
height: auto;
display: block;
}
/* Modal plein écran pour Mermaid */
.mermaid-fullscreen-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
z-index: 9999;
padding: 4rem 1rem 1rem 1rem;
overflow-y: auto;
overflow-x: hidden;
}
.mermaid-fullscreen-modal.active {
display: block;
}
.mermaid-fullscreen-content {
width: 100%;
min-height: 100%;
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
padding: 1rem 0;
}
.mermaid-fullscreen-content svg {
width: 100% !important;
height: auto !important;
max-width: none !important;
display: block;
transition: transform 0.2s ease;
cursor: zoom-in;
}
.mermaid-fullscreen-content svg.zoomed {
cursor: zoom-out;
}
/* Barre d'outils en plein écran */
.mermaid-fullscreen-toolbar {
position: fixed;
top: 1rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.5rem;
background: rgba(0, 0, 0, 0.8);
padding: 0.5rem;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(4px);
z-index: 10001;
}
.mermaid-fullscreen-zoom-btn {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 6px;
color: #ffffff;
font-size: 1rem;
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
.mermaid-fullscreen-zoom-btn:hover {
background: rgba(255, 255, 255, 0.2);
}
.mermaid-fullscreen-zoom-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.mermaid-fullscreen-zoom-level {
display: flex;
align-items: center;
color: #ffffff;
font-size: 0.875rem;
padding: 0 0.5rem;
min-width: 4rem;
justify-content: center;
}
.mermaid-fullscreen-close {
position: fixed;
top: 1rem;
right: 1rem;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 6px;
color: #ffffff;
font-size: 1.5rem;
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
backdrop-filter: blur(4px);
z-index: 10000;
}
.mermaid-fullscreen-close:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.1);
}
/* Erreur de rendu Mermaid */
pre.mermaid.mermaid-error {
color: #f44336;
padding: 1rem;
background: rgba(244, 67, 54, 0.1);
border: 1px solid rgba(244, 67, 54, 0.3);
border-radius: 4px;
font-size: 0.75rem;
max-height: 200px;
overflow: auto;
}
/* Alerte d'erreur Mermaid */
.mermaid-wrapper .alert {
font-size: 0.875rem;
}
.mermaid-wrapper details {
font-size: 0.75rem;
}
.mermaid-wrapper details summary {
padding: 0.5rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 4px;
}
.mermaid-wrapper details[open] summary {
margin-bottom: 0.5rem;
}
/* Thème clair pour Mermaid */
[data-bs-theme="light"] .mermaid-wrapper {
background: #f8f9fa;
border-color: #dee2e6;
}
[data-bs-theme="light"] .mermaid-header {
background: rgba(0, 0, 0, 0.03);
border-bottom-color: #dee2e6;
}
[data-bs-theme="light"] .mermaid-label {
color: #0066cc;
}
[data-bs-theme="light"] .mermaid-copy-btn,
[data-bs-theme="light"] .mermaid-fullscreen-btn {
background: transparent;
border-color: rgba(0, 0, 0, 0.15);
color: #495057;
}
[data-bs-theme="light"] .mermaid-copy-btn:hover,
[data-bs-theme="light"] .mermaid-fullscreen-btn:hover {
background: rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.3);
color: #212529;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
[data-bs-theme="light"] .mermaid-copy-btn.copied {
background: rgba(76, 175, 80, 0.1);
border-color: rgba(76, 175, 80, 0.4);
color: #2e7d32;
}
[data-bs-theme="light"] .mermaid-copy-btn.copied:hover {
background: rgba(76, 175, 80, 0.15);
}
[data-bs-theme="light"] pre.mermaid {
color: #212529;
}
[data-bs-theme="light"] pre.mermaid.mermaid-error {
color: #c62828;
background: rgba(198, 40, 40, 0.1);
border-color: rgba(198, 40, 40, 0.3);
}
[data-bs-theme="light"] .mermaid-fullscreen-modal {
background: rgba(255, 255, 255, 0.95);
}
[data-bs-theme="light"] .mermaid-fullscreen-toolbar {
background: rgba(255, 255, 255, 0.9);
border-color: rgba(0, 0, 0, 0.3);
}
[data-bs-theme="light"] .mermaid-fullscreen-zoom-btn {
background: rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.3);
color: #212529;
}
[data-bs-theme="light"] .mermaid-fullscreen-zoom-btn:hover {
background: rgba(0, 0, 0, 0.1);
}
[data-bs-theme="light"] .mermaid-fullscreen-zoom-level {
color: #212529;
}
[data-bs-theme="light"] .mermaid-fullscreen-close {
background: rgba(0, 0, 0, 0.1);
border-color: rgba(0, 0, 0, 0.3);
color: #212529;
}
[data-bs-theme="light"] .mermaid-fullscreen-close:hover {
background: rgba(0, 0, 0, 0.2);
}
/* Animation de chargement pour Mermaid */
@keyframes mermaid-pulse {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
pre.mermaid:not(.mermaid-rendered):not(.mermaid-error) {
animation: mermaid-pulse 1.5s ease-in-out infinite;
}
/* Responsive pour Mermaid */
@media (max-width: 767.98px) {
.mermaid-wrapper {
margin: 1rem -1rem;
border-radius: 0;
border-left: none;
border-right: none;
}
.mermaid-header {
padding: 0.4rem 0.75rem;
min-height: 2.25rem;
}
.mermaid-label {
font-size: 0.7rem;
}
.mermaid-content {
padding: 1rem;
}
.mermaid-wrapper.mermaid-rendered .mermaid-content {
padding: 0.75rem;
}
.mermaid-copy-btn .mermaid-copy-text,
.mermaid-fullscreen-btn .mermaid-fullscreen-text {
display: none;
}
.mermaid-copy-btn,
.mermaid-fullscreen-btn {
padding: 0.3rem 0.5rem;
min-width: 32px;
gap: 0;
}
.mermaid-copy-btn i,
.mermaid-fullscreen-btn i {
font-size: 0.875rem;
}
.mermaid-fullscreen-modal {
padding: 1rem;
}
.mermaid-fullscreen-toolbar {
top: 0.5rem;
padding: 0.4rem;
gap: 0.4rem;
}
.mermaid-fullscreen-zoom-btn {
width: 2rem;
height: 2rem;
font-size: 0.875rem;
}
.mermaid-fullscreen-zoom-level {
font-size: 0.75rem;
min-width: 3rem;
padding: 0 0.25rem;
}
.mermaid-fullscreen-close {
width: 2.5rem;
height: 2.5rem;
font-size: 1.25rem;
top: 0.5rem;
right: 0.5rem;
}
}
/* ========== YOUTUBE VIDEOS ========== */
/* Wrapper pour les vidéos YouTube avec ratio 16:9 */
.youtube-video-wrapper {
margin: 1.5rem 0;
width: 100%;
}
.youtube-video-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* Ratio 16:9 */
height: 0;
overflow: hidden;
border-radius: 8px;
background: #000;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.youtube-video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
border-radius: 8px;
}
/* Lien vers une chaîne YouTube */
.youtube-channel {
margin: 1.5rem 0;
padding: 1.25rem;
background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(255, 0, 0, 0.2);
}
.youtube-channel-link {
display: flex;
align-items: center;
gap: 0.75rem;
color: white !important;
text-decoration: none !important;
font-weight: 500;
font-size: 1rem;
transition: opacity 0.2s ease;
}
.youtube-channel-link:hover {
opacity: 0.9;
}
.youtube-icon {
width: 32px;
height: 32px;
flex-shrink: 0;
}
/* Thème clair */
[data-bs-theme="light"] .youtube-video-container {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* Responsive */
@media (max-width: 767.98px) {
.youtube-video-wrapper {
margin: 1rem -0.5rem;
}
.youtube-channel {
margin: 1rem -0.5rem;
border-radius: 4px;
}
}