@font-face { font-family: "League Spartan"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/leaguespartan-400-latin-ext.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "League Spartan"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/leaguespartan-400-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "League Spartan"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/leaguespartan-600-latin-ext.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "League Spartan"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/leaguespartan-600-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "League Spartan"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/leaguespartan-700-latin-ext.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "League Spartan"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/leaguespartan-700-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-400-latin-ext.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-400-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-500-latin-ext.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-500-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-600-latin-ext.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-600-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-700-latin-ext.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-700-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } .inter_8a594245-module__h1XLeG__variable { --font-inter: "Inter","Inter Fallback"; } .league_spartan_d6a1c2a5-module__7Zm4YW__variable { --font-league-spartan: "League Spartan","League Spartan Fallback"; } .roboto_ed9382f3-module__8fEdUq__variable { --font-roboto: "Inter"; } .satoshi_82035b21-module___on6DW__variable { --font-satoshi: "Inter"; } @layer properties { @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) { *, ::before, ::after, ::backdrop { --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scale-z: 1; --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-space-y-reverse: 0; --tw-divide-y-reverse: 0; --tw-border-style: solid; --tw-gradient-position: initial; --tw-gradient-from: #00000000; --tw-gradient-via: #00000000; --tw-gradient-to: #00000000; --tw-gradient-stops: initial; --tw-gradient-via-stops: initial; --tw-gradient-from-position: 0%; --tw-gradient-via-position: 50%; --tw-gradient-to-position: 100%; --tw-leading: initial; --tw-font-weight: initial; --tw-tracking: initial; --tw-shadow: 0 0 #00000000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #00000000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #00000000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #00000000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #00000000; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; --tw-grayscale: initial; --tw-hue-rotate: initial; --tw-invert: initial; --tw-opacity: initial; --tw-saturate: initial; --tw-sepia: initial; --tw-drop-shadow: initial; --tw-drop-shadow-color: initial; --tw-drop-shadow-alpha: 100%; --tw-drop-shadow-size: initial; --tw-backdrop-blur: initial; --tw-backdrop-brightness: initial; --tw-backdrop-contrast: initial; --tw-backdrop-grayscale: initial; --tw-backdrop-hue-rotate: initial; --tw-backdrop-invert: initial; --tw-backdrop-opacity: initial; --tw-backdrop-saturate: initial; --tw-backdrop-sepia: initial; --tw-duration: initial; --tw-ease: initial; } } } @layer theme { :root, :host { --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --color-red-50: #fcf8f4; --color-red-100: #f8f1e9; --color-red-300: #fa9315; --color-red-400: #cd7104; --color-red-500: #8e4f06; --color-red-900: #060401; --color-orange-50: #f7f6f5; --color-orange-200: #ffffff; --color-orange-600: #bbada2; --color-yellow-400: #bfb5a8; --color-green-50: #f7f8f5; --color-green-100: #eeefe9; --color-green-400: #b3b69b; --color-green-500: #a8aa8a; --color-green-600: #9a9c76; --color-emerald-400: #353231; --color-purple-400: #8e8c83; --color-pink-200: #f3e2d7; --color-gray-50: #fafafa; --color-gray-100: #f5f5f4; --color-gray-200: #e8e8e8; --color-gray-300: #a1a1a0; --color-gray-400: #6f6e6d; --color-gray-500: #404040; --color-gray-600: #222221; --color-gray-700: #0f0f0e; --color-gray-800: #000000; --color-gray-900: #000000; --color-black: #000; --color-white: #fff; --spacing: .25rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; --text-xs: .75rem; --text-xs--line-height: calc(1/.75); --text-sm: .875rem; --text-sm--line-height: calc(1.25/.875); --text-base: 1rem; --text-base--line-height: calc(1.5/1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75/1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75/1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2/1.5); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25/1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5/2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --tracking-tight: -.025em; --tracking-wide: .025em; --tracking-wider: .05em; --tracking-widest: .1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --shadow-lg: 0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a; --drop-shadow-sm: 0 1px 2px #00000026; --drop-shadow-lg: 0 4px 4px #00000026; --ease-out: cubic-bezier(0,0,.2,1); --ease-in-out: cubic-bezier(.4,0,.2,1); --animate-spin: spin 1s linear infinite; --animate-pulse: pulse 2s cubic-bezier(.4,0,.6,1)infinite; --blur-sm: 8px; --blur-xl: 24px; --blur-3xl: 64px; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4,0,.2,1); --default-font-family: var(--font-inter); --default-mono-font-family: var(--font-mono); --font-satoshi: var(--font-satoshi); } @supports (color:lab(0% 0 0)) { :root, :host { --color-red-50: lab(96.5005% 4.18508 1.52328); --color-red-100: lab(92.243% 10.2865 3.83865); --color-red-300: lab(76.5514% 36.422 15.5335); --color-red-400: lab(63.7053% 60.745 31.3109); --color-red-500: lab(55.4814% 75.0732 48.8528); --color-red-900: lab(28.5139% 44.5539 29.0463); --color-orange-50: lab(97.7008% 1.53735 5.90649); --color-orange-200: lab(88.4871% 9.94918 28.8378); --color-orange-600: lab(57.1026% 64.2584 89.8886); --color-yellow-400: lab(83.2664% 8.65132 106.895); --color-green-50: lab(98.1563% -5.60117 2.75915); --color-green-100: lab(96.1861% -13.8464 6.52365); --color-green-400: lab(78.503% -64.9265 39.7492); --color-green-500: lab(70.5521% -66.5147 45.8073); --color-green-600: lab(59.0978% -58.6621 41.2579); --color-emerald-400: lab(75.0771% -60.7313 19.4147); --color-purple-400: lab(63.6946% 47.6127 -59.2066); --color-pink-200: lab(87.4504% 19.6 -6.46662); --color-gray-50: lab(98.2596% -.247031 -.706708); --color-gray-100: lab(96.1596% -.0823438 -1.13575); --color-gray-200: lab(91.6229% -.159115 -2.26791); --color-gray-300: lab(85.1236% -.612259 -3.7138); --color-gray-400: lab(65.9269% -.832707 -8.17473); --color-gray-500: lab(47.7841% -.393182 -10.0268); --color-gray-600: lab(35.6337% -1.58697 -10.8425); --color-gray-700: lab(27.1134% -.956401 -12.3224); --color-gray-800: lab(16.1051% -1.18239 -11.7533); --color-gray-900: lab(8.11897% .811279 -12.254); } } } @layer base { *, ::after, ::before, ::backdrop { box-sizing: border-box; border: 0px solid; margin: 0px; padding: 0px; } ::file-selector-button { box-sizing: border-box; border: 0px solid; margin: 0px; padding: 0px; } html, :host { text-size-adjust: 100%; tab-size: 4; line-height: 1.5; font-family: var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings,normal); font-variation-settings: var(--default-font-variation-settings,normal); -webkit-tap-highlight-color: transparent; } hr { height: 0px; color: inherit; border-top-width: 1px; } abbr:where([title]) { text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace); font-feature-settings: var(--default-mono-font-feature-settings,normal); font-variation-settings: var(--default-mono-font-variation-settings,normal); font-size: 1em; } small { font-size: 80%; } sub, sup { vertical-align: baseline; font-size: 75%; line-height: 0; position: relative; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0px; border-color: inherit; border-collapse: collapse; } progress { vertical-align: baseline; } summary { display: list-item; } ol, ul, menu { list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { vertical-align: middle; display: block; } img, video { max-width: 100%; height: auto; } button, input, select, optgroup, textarea { font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: rgba(0, 0, 0, 0); border-radius: 0px; } ::file-selector-button { font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: rgba(0, 0, 0, 0); border-radius: 0px; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; } @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) { ::placeholder { color: currentcolor; } @supports (color:color-mix(in lab, red, red)) { ::placeholder { color: color-mix(currentcolor, transparent); } } } textarea { resize: vertical; } ::-webkit-search-decoration { appearance: none; } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0px; } ::-webkit-datetime-edit { padding-block: 0px; } ::-webkit-datetime-edit-year-field { padding-block: 0px; } ::-webkit-datetime-edit-month-field { padding-block: 0px; } ::-webkit-datetime-edit-day-field { padding-block: 0px; } ::-webkit-datetime-edit-hour-field { padding-block: 0px; } ::-webkit-datetime-edit-minute-field { padding-block: 0px; } ::-webkit-datetime-edit-second-field { padding-block: 0px; } ::-webkit-datetime-edit-millisecond-field { padding-block: 0px; } ::-webkit-datetime-edit-meridiem-field { padding-block: 0px; } ::-webkit-calendar-picker-indicator { line-height: 1; } button, input:where([type="button"], [type="reset"], [type="submit"]) { appearance: button; } ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button { height: auto; } ::-webkit-outer-spin-button { height: auto; } [hidden]:where(:not([hidden="until-found"])) { display: none !important; } } @layer components; @layer utilities { .pointer-events-none { pointer-events: none; } .absolute { position: absolute; } .fixed { position: fixed; } .relative { position: relative; } .inset-0 { inset: calc(var(--spacing)*0); } .top-\[36px\] { top: 36px; } .top-full { top: 100%; } .right-0 { right: calc(var(--spacing)*0); } .left-0 { left: calc(var(--spacing)*0); } .left-1\/2 { left: 50%; } .-z-10 { z-index: calc(-10); } .z-50 { z-index: 50; } .z-\[1\] { z-index: 1; } .mx-auto { margin-inline: auto; } .mt-3 { margin-top: calc(var(--spacing)*3); } .block { display: block; } .flex { display: flex; } .hidden { display: none; } .h-0 { height: calc(var(--spacing)*0); } .h-2 { height: calc(var(--spacing)*2); } .h-3\.5 { height: calc(var(--spacing)*3.5); } .h-5 { height: calc(var(--spacing)*5); } .h-10 { height: calc(var(--spacing)*10); } .w-0 { width: calc(var(--spacing)*0); } .w-2 { width: calc(var(--spacing)*2); } .w-3\.5 { width: calc(var(--spacing)*3.5); } .w-5 { width: calc(var(--spacing)*5); } .w-\[280px\] { width: 280px; } .max-w-\[1200px\] { max-width: 1200px; } .flex-shrink-0, .shrink-0 { flex-shrink: 0; } .-translate-x-1\/2 { --tw-translate-x: calc(calc(1/2*100%)*-1); translate: var(--tw-translate-x)var(--tw-translate-y); } .-translate-y-2 { --tw-translate-y: calc(var(--spacing)*-2); translate: var(--tw-translate-x)var(--tw-translate-y); } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-1 { gap: calc(var(--spacing)*1); } .gap-2 { gap: calc(var(--spacing)*2); } .gap-3 { gap: calc(var(--spacing)*3); } .overflow-hidden { overflow: hidden; } .scroll-smooth { scroll-behavior: smooth; } .rounded-full { border-radius: 3.40282e+38px; } .rounded-lg { border-radius: var(--radius-lg); } .rounded-xl { border-radius: var(--radius-xl); } .bg-\[radial-gradient\(circle\,rgba\(255\,211\,254\,1\)_0\%\,rgba\(253\,179\,249\,1\)_100\%\)\] { background-image: radial-gradient(circle, rgb(245, 227, 221) 0%, var(--hm-orange-barre-2) 100%); } .bg-\[radial-gradient\(circle_at_50\%_50\%\,rgba\(249\,173\,242\,0\.35\)_0\%\,rgba\(249\,173\,242\,0\.15\)_35\%\,transparent_65\%\)\] { background-image: radial-gradient(circle, rgb(from var(--hm-orange-barre) r g b / 0.35) 0%, rgb(from var(--hm-orange-barre) r g b / 0.15) 35%, rgba(0, 0, 0, 0) 65%); } .p-2 { padding: calc(var(--spacing)*2); } .px-3 { padding-inline: calc(var(--spacing)*3); } .px-4 { padding-inline: calc(var(--spacing)*4); } .px-5 { padding-inline: calc(var(--spacing)*5); } .px-6 { padding-inline: calc(var(--spacing)*6); } .py-2 { padding-block: calc(var(--spacing)*2); } .py-2\.5 { padding-block: calc(var(--spacing)*2.5); } .py-3 { padding-block: calc(var(--spacing)*3); } .font-sans { font-family: var(--font-inter); } .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading,var(--text-sm--line-height)); } .text-xs { font-size: var(--text-xs); line-height: var(--tw-leading,var(--text-xs--line-height)); } .text-\[14px\] { font-size: 14px; } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .font-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .font-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .tracking-tight { --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .whitespace-nowrap { white-space: nowrap; } .text-\[\#252422\] { color: var(--hm-clair-texte); } .text-\[\#252422\]\/50 { color: rgb(from var(--hm-clair-texte) r g b / 0.5); } .text-white { color: var(--color-white); } .text-white\/80 { color: rgba(255, 255, 255, 0.8); } @supports (color:color-mix(in lab, red, red)) { .text-white\/80 { color: color-mix(in oklab,var(--color-white)80%,transparent); } } .antialiased { -webkit-font-smoothing: antialiased; } .opacity-0 { opacity: 0; } .transition-all { transition-property: all; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); } .transition-colors { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); } .transition-transform { transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); } .duration-200 { --tw-duration: .2s; transition-duration: 0.2s; } .duration-300 { --tw-duration: .3s; transition-duration: 0.3s; } .duration-500 { --tw-duration: .5s; transition-duration: 0.5s; } @media (hover: hover) { .hover\:bg-\[\#eb5e28\]\/10:hover { background-color: rgb(from var(--hm-orange-barre) r g b / 0.1); } .hover\:bg-white\/10:hover { background-color: rgba(255, 255, 255, 0.1); } @supports (color:color-mix(in lab, red, red)) { .hover\:bg-white\/10:hover { background-color: color-mix(in oklab,var(--color-white)10%,transparent); } } .hover\:text-white:hover { color: var(--color-white); } .hover\:shadow-\[0_8px_32px_rgba\(249\,173\,242\,0\.25\)\]:hover { --tw-shadow: 0 8px 32px var(--tw-shadow-color,rgb(from var(--hm-orange-barre) r g b / 0.25098)); box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow); } } @media (min-width: 48rem) { .md\:flex { display: flex; } .md\:grid { display: grid; } .md\:hidden { display: none; } .md\:inline-flex { display: inline-flex; } .md\:grid-cols-\[1fr_auto_1fr\] { grid-template-columns: 1fr auto 1fr; } .md\:gap-4 { gap: calc(var(--spacing)*4); } .md\:justify-self-center { justify-self: center; } .md\:justify-self-end { justify-self: flex-end; } .md\:justify-self-start { justify-self: flex-start; } } } :root { --background: #252422; --background-deep: #252422; --background-darker: #252422; --background-card: #ffffff14; --background-card-hover: #ffffff1f; --background-white: #fff; --pink-soft: var(--hm-orange-barre); --primary: var(--hm-orange-barre); --primary-hover: #ca4e1e; --primary-foreground: #252422; --gold: #ccc5b9; --gold-hover: #beb7ab; --foreground: #f8f8f8; --foreground-muted: #f8f8f8b3; --foreground-subtle: #f8f8f880; --foreground-dark: #000000; --border: #ffffff1a; --border-subtle: #ffffff0f; --shadow-sm: 0 1px 2px 0 #00000026; --shadow-md: 0 4px 12px -2px #0000004d; --shadow-lg: 0 12px 24px -4px #00000066; --glow-rose: 0 4px 20px #eb5e2859; --glow-rose-hover: 0 6px 30px #eb5e288c; --radius-sm: .375rem; --radius-md: .5rem; --radius-lg: .75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px; --transition-fast: .15s cubic-bezier(.4,0,.2,1); --transition-base: .2s cubic-bezier(.4,0,.2,1); --transition-slow: .3s cubic-bezier(.4,0,.2,1); } html { scroll-behavior: smooth; overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--background); color: var(--foreground); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; overflow-x: clip; } h1, h2, h3 { font-family: var(--font-satoshi),var(--font-league-spartan),ui-sans-serif,system-ui,-apple-system,sans-serif; font-synthesis-weight: none; letter-spacing: -0.02em; text-wrap: balance; font-weight: 700; } h4, h5, h6 { letter-spacing: -0.02em; text-wrap: balance; font-weight: 600; } p { text-wrap: pretty; } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-up { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes scroll-left { 0% { transform: translate(0px); } 100% { transform: translate(-50%); } } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.5); } } @keyframes glow-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } .animate-pulse-dot { animation: 2s ease-in-out 0s infinite normal none running pulse-dot; } @media (prefers-reduced-motion: reduce) { .animate-fade-in, .animate-fade-up, .animate-scroll-left, .animate-pulse-dot, .animate-glow-pulse, .marquee-track, .testimonial-track, .maillage-track { opacity: 1 !important; animation: auto ease 0s 1 normal none running none !important; transform: none !important; } } .marquee-track { gap: 144px; width: max-content; animation: 25s linear 0s infinite normal none running scroll-left; display: flex; } .marquee-track:hover { animation-play-state: paused; } .nav-cta-pill { color: rgb(22, 22, 21); background: radial-gradient(circle, rgb(245, 227, 221) 0%, var(--hm-orange-barre-2) 100%); box-shadow: rgb(from var(--hm-orange-barre) r g b / 0.3) 0px 4px 20px; } .nav-cta-pill:hover { color: var(--hm-orange-barre); background: rgb(22, 22, 21); box-shadow: rgba(22, 22, 21, 0.5) 0px 6px 30px; } .nav-cta-dot { background-color: rgb(22, 22, 21); } .nav-cta-pill:hover .nav-cta-dot { background-color: var(--hm-orange-barre); animation: 0.6s ease-in-out 0s infinite normal none running dot-glow-fast; transform: scale(1.3); box-shadow: rgb(from var(--hm-orange-barre) r g b / 0.9) 0px 0px 8px, rgb(from var(--hm-orange-barre) r g b / 0.5) 0px 0px 20px; } @keyframes dot-glow-fast { 0%, 100% { opacity: 1; box-shadow: rgb(from var(--hm-orange-barre) r g b / 0.9) 0px 0px 8px, rgb(from var(--hm-orange-barre) r g b / 0.5) 0px 0px 20px; } 50% { opacity: 0.6; box-shadow: var(--hm-orange-barre) 0px 0px 14px, rgb(from var(--hm-orange-barre) r g b / 0.7) 0px 0px 28px; } } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } ::selection { background: var(--primary); color: var(--primary-foreground); } @media print { nav, footer, .marquee-track, .testimonial-track, .nav-cta-pill, [aria-hidden="true"] { display: none !important; } body { font-size: 12pt; color: rgb(0, 0, 0) !important; background: var(--hm-clair-surface) !important; } a { text-decoration: underline; color: rgb(0, 0, 0) !important; } a[href]::after { content: " (" attr(href)")"; color: rgb(85, 85, 85); font-size: 0.8em; } a[href^="#"]::after, a[href^="javascript:"]::after { content: ""; } } @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-rotate-x { syntax: "*"; inherits: false; } @property --tw-rotate-y { syntax: "*"; inherits: false; } @property --tw-rotate-z { syntax: "*"; inherits: false; } @property --tw-skew-x { syntax: "*"; inherits: false; } @property --tw-skew-y { syntax: "*"; inherits: false; } @property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-divide-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-gradient-position { syntax: "*"; inherits: false; } @property --tw-gradient-from { syntax: ""; inherits: false; initial-value: #00000000; } @property --tw-gradient-via { syntax: ""; inherits: false; initial-value: #00000000; } @property --tw-gradient-to { syntax: ""; inherits: false; initial-value: #00000000; } @property --tw-gradient-stops { syntax: "*"; inherits: false; } @property --tw-gradient-via-stops { syntax: "*"; inherits: false; } @property --tw-gradient-from-position { syntax: ""; inherits: false; initial-value: 0%; } @property --tw-gradient-via-position { syntax: ""; inherits: false; initial-value: 50%; } @property --tw-gradient-to-position { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-leading { syntax: "*"; inherits: false; } @property --tw-font-weight { syntax: "*"; inherits: false; } @property --tw-tracking { syntax: "*"; inherits: false; } @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #00000000; } @property --tw-shadow-color { syntax: "*"; inherits: false; } @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #00000000; } @property --tw-inset-shadow-color { syntax: "*"; inherits: false; } @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-ring-color { syntax: "*"; inherits: false; } @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #00000000; } @property --tw-inset-ring-color { syntax: "*"; inherits: false; } @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #00000000; } @property --tw-ring-inset { syntax: "*"; inherits: false; } @property --tw-ring-offset-width { syntax: ""; inherits: false; initial-value: 0; } @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #00000000; } @property --tw-blur { syntax: "*"; inherits: false; } @property --tw-brightness { syntax: "*"; inherits: false; } @property --tw-contrast { syntax: "*"; inherits: false; } @property --tw-grayscale { syntax: "*"; inherits: false; } @property --tw-hue-rotate { syntax: "*"; inherits: false; } @property --tw-invert { syntax: "*"; inherits: false; } @property --tw-opacity { syntax: "*"; inherits: false; } @property --tw-saturate { syntax: "*"; inherits: false; } @property --tw-sepia { syntax: "*"; inherits: false; } @property --tw-drop-shadow { syntax: "*"; inherits: false; } @property --tw-drop-shadow-color { syntax: "*"; inherits: false; } @property --tw-drop-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-drop-shadow-size { syntax: "*"; inherits: false; } @property --tw-backdrop-blur { syntax: "*"; inherits: false; } @property --tw-backdrop-brightness { syntax: "*"; inherits: false; } @property --tw-backdrop-contrast { syntax: "*"; inherits: false; } @property --tw-backdrop-grayscale { syntax: "*"; inherits: false; } @property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false; } @property --tw-backdrop-invert { syntax: "*"; inherits: false; } @property --tw-backdrop-opacity { syntax: "*"; inherits: false; } @property --tw-backdrop-saturate { syntax: "*"; inherits: false; } @property --tw-backdrop-sepia { syntax: "*"; inherits: false; } @property --tw-duration { syntax: "*"; inherits: false; } @property --tw-ease { syntax: "*"; inherits: false; } @keyframes spin { 100% { transform: rotate(360deg); } } @keyframes pulse { 50% { opacity: 0.5; } } .logo-texte { font-family: var(--font-league-spartan), system-ui, sans-serif; font-weight: 700; font-size: 1.5rem; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; color: var(--hm-logo-clair); } .logo-texte em { font-style: normal; color: var(--hm-orange-barre); } .bandeau-une { display: flex; align-items: center; gap: 1rem; overflow: hidden; padding-right: 1rem; color: var(--hm-clair-texte); } .bandeau-une .marquee-track { gap: 0px; } .une-libelle { flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; padding: 0.5rem 1rem; background: var(--hm-clair-texte); color: var(--hm-orange-barre); font-family: var(--font-league-spartan),system-ui,sans-serif; font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; } .une-piste { flex: 1 1 auto; overflow: hidden; padding-block: 0.5rem; mask-image: linear-gradient(to right, transparent 0px, black 3%, black 92%, transparent 100%); } .une-groupe { display: flex; align-items: center; gap: 0px; flex-shrink: 0; } .une-item { display: inline-flex; align-items: baseline; gap: 0.625rem; white-space: nowrap; text-decoration: none; color: inherit; padding-inline: 1.75rem; border-left: 1px solid rgb(from var(--hm-clair-texte) r g b / 0.28); } .une-item:hover .une-titre { text-decoration: underline; } .une-meta { font-variant-numeric: tabular-nums; opacity: 1; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; flex: 0 0 auto; } .une-titre { font-size: 0.8125rem; font-weight: 600; } @media (max-width: 47.99rem) { .une-libelle { display: none; } } :root { --noir: var(--hm-noir); --surface: var(--hm-surface); --surface-2: var(--hm-surface-2); --bord: rgba(255,255,255,.10); --bord-fort: rgba(255,255,255,.18); --texte: var(--hm-texte); --texte-2: var(--hm-texte-2); --orange: var(--hm-orange); --orange-vif: var(--hm-orange-vif); --sur-orange: var(--hm-sur-orange); --display: "League Spartan",Impact,"Haettenschweiler","Arial Narrow",sans-serif; --corps: Inter,"Segoe UI",system-ui,-apple-system,sans-serif; --conteneur: 1280px; --gouttiere: 32px; --rayon: 10px; --rayon-carte: 16px; } * { box-sizing: border-box; } html { scroll-padding-top: 7rem; } body { margin: 0px; color: var(--texte); font-family: var(--corps); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } main img, .pied img { max-width: 100%; display: block; } main a, .pied a { color: var(--orange-vif); text-decoration: none; } main a:hover, .pied a:hover { text-decoration: underline; } :focus-visible { outline: 3px solid var(--orange-vif); outline-offset: 3px; border-radius: 4px; } .conteneur { max-width: var(--conteneur); margin: 0px auto; padding: 0 var(--gouttiere); } h1, h2, h3 { margin: 0px; } .h2 { font-family: var(--display); font-size: clamp(2rem, 4.2vw, 3.25rem); text-transform: uppercase; letter-spacing: 0.01em; line-height: 1; } .surtitre { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--texte-2); font-weight: 600; margin-bottom: 1rem; } .surtitre::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); } .orange { color: var(--orange-vif); } .btn { display: inline-flex; align-items: center; gap: 0.6rem; height: 48px; padding: 0px 28px; border-radius: 999px; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.01em; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform 0.15s, background 0.15s, border-color 0.15s; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn-orange { background: var(--orange); color: var(--sur-orange); box-shadow: rgb(from var(--hm-orange) r g b / 0.3) 0px 4px 20px; } .btn-orange:hover { background: var(--orange-vif); } .btn-fantome { background: transparent; color: var(--texte); border-color: var(--bord-fort); } .btn-fantome:hover { border-color: var(--texte-2); background: rgba(255, 255, 255, 0.04); } .btn .fleche { font-size: 1.05em; line-height: 1; } .logo { display: flex; flex-direction: column; line-height: 1; text-decoration: none; color: var(--texte); } .logo:hover { text-decoration: none; } .logo b { font-family: var(--display); font-size: 1.45rem; letter-spacing: 0.02em; text-transform: uppercase; } .logo span { font-size: 0.6rem; letter-spacing: 0.42em; color: var(--texte-2); text-transform: uppercase; margin-top: 3px; } .hero { position: relative; isolation: isolate; overflow: hidden; padding: 0px 0px 24px; } .hero-media { position: absolute; top: 0px; left: 0px; width: 100%; z-index: -2; aspect-ratio: 1365 / 768; max-height: 820px; overflow: hidden; } .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; } .hero-media::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(to top, var(--hm-noir) 0%, rgb(from var(--hm-noir) r g b / 0.55) 14%, transparent 36%); } .hero-in { position: relative; min-height: min(56vw, 800px); display: flex; align-items: flex-end; padding-top: 190px; padding-bottom: 8px; } .hero-texte { max-width: 56ch; } .hero h1 { font-family: var(--display); font-size: clamp(2.1rem, 4.4vw, 3.5rem); text-transform: uppercase; line-height: 1; margin: 0px 0px 1.1rem; text-shadow: rgba(0, 0, 0, 0.65) 0px 2px 24px; } .hero p { color: var(--hm-texte-6); max-width: 52ch; margin: 0px 0px 1.9rem; text-shadow: rgba(0, 0, 0, 0.7) 0px 1px 12px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; } .badge-pill { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.1rem; background: var(--orange); color: var(--sur-orange); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 7px 16px; border-radius: 999px; } .stats { background: var(--surface); border-radius: var(--rayon-carte); margin-top: 48px; position: relative; } .stats-in { display: grid; grid-template-columns: repeat(4, 1fr); } .stat { padding: 40px 32px; border-right: 1px solid var(--bord); } .stat:last-child { border-right: 0px; } .stat b { display: block; font-family: var(--display); font-size: 3.1rem; line-height: 1; margin-bottom: 0.55rem; } .stat .lib { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texte); font-weight: 700; margin-bottom: 0.5rem; } .stat p { margin: 0px; color: var(--texte-2); font-size: 0.82rem; line-height: 1.5; } .stat.mise-en-avant b { color: var(--orange-vif); } section { padding: 88px 0px; } .entete-section { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2.5rem; } .lien-tout { color: var(--texte-2); font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.5rem; } .lien-tout:hover { color: var(--texte); } .grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .carte { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon-carte); overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.2s, transform 0.2s; } .carte:hover { border-color: rgb(from var(--hm-orange) r g b / 0.45); transform: translateY(-3px); } .carte-visuel { position: relative; aspect-ratio: 16 / 10; background: radial-gradient(70% 90% at 50% 115%, rgb(from var(--hm-orange) r g b / 0.3), transparent 65%), linear-gradient(160deg, var(--hm-surface-6), var(--hm-surface-5)); display: grid; place-items: center; } .carte-visuel svg { width: 78%; height: auto; opacity: 0.9; } .etiquette { position: absolute; left: 14px; top: 14px; background: rgb(from var(--hm-noir) r g b / 0.72); border: 1px solid var(--bord-fort); color: var(--texte); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(6px); } .carte-corps { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1 1 0%; } .carte-corps h3 { font-size: 1.06rem; line-height: 1.35; margin-bottom: 0.6rem; } .carte-corps h3 a { color: var(--texte); } .carte-corps h3 a:hover { color: var(--orange-vif); text-decoration: none; } .meta { color: var(--texte-2); font-size: 0.78rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--texte-2); display: inline-block; } .carte-corps .lire { margin-top: auto; padding-top: 18px; color: var(--orange-vif); font-weight: 600; font-size: 0.85rem; } .split { display: grid; grid-template-columns: minmax(0px, 420px) minmax(0px, 1fr); gap: 64px; align-items: start; } .split p { color: var(--texte-2); } .accordeon { display: flex; flex-direction: column; gap: 12px; } details { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon-carte); padding: 20px 22px; } details[open] { border-color: rgb(from var(--hm-orange) r g b / 0.35); } summary { display: flex; align-items: center; gap: 16px; cursor: pointer; list-style: none; font-weight: 600; font-size: 1rem; } summary::-webkit-details-marker { display: none; } .icone { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: rgb(from var(--hm-orange) r g b / 0.14); border: 1px solid rgb(from var(--hm-orange) r g b / 0.35); display: grid; place-items: center; color: var(--orange-vif); } .icone svg { width: 19px; height: 19px; } summary .plus { margin-left: auto; color: var(--texte-2); font-size: 1.35rem; line-height: 1; font-weight: 400; } details[open] summary .plus { color: var(--orange-vif); } details .contenu { color: var(--texte-2); padding: 14px 0px 2px 58px; font-size: 0.93rem; } .mosaique { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 16px; } .tuile { position: relative; aspect-ratio: 4 / 5; border-radius: var(--rayon-carte); overflow: hidden; background: linear-gradient(150deg, var(--hm-surface-3), var(--hm-surface-4)); border: 1px solid var(--bord); display: flex; align-items: flex-end; padding: 22px; } .tuile::after { content: ""; position: absolute; inset: 0px; background: radial-gradient(80% 60% at 50% 100%, rgb(from var(--hm-orange) r g b / 0.28), transparent 62%); } .tuile span { position: relative; z-index: 1; font-family: var(--display); font-size: 1.4rem; text-transform: uppercase; line-height: 1.05; } .tuile:first-child { aspect-ratio: auto; } .bloc-form { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon-carte); padding: 56px; } form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } label { display: block; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texte-2); margin-bottom: 8px; font-weight: 600; } input, textarea { width: 100%; background: var(--surface-2); color: var(--texte); border: 1px solid var(--bord-fort); border-radius: var(--rayon); padding: 13px 16px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 0.92rem; } input::placeholder, textarea::placeholder { color: var(--hm-texte-5); } input:focus, textarea:focus { border-color: var(--orange); outline: none; box-shadow: rgb(from var(--hm-orange) r g b / 0.22) 0px 0px 0px 3px; } form .btn { width: 100%; justify-content: center; grid-column: 1 / -1; } .atouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--bord); } .atout { display: flex; gap: 14px; align-items: flex-start; } .atout b { display: block; font-size: 0.92rem; margin-bottom: 3px; } .atout p { margin: 0px; font-size: 0.82rem; color: var(--texte-2); line-height: 1.5; } .pied { border-top: 1px solid var(--bord); padding: 64px 0px 32px; margin-top: 40px; } .pied-grille { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; } .pied h4 { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texte-2); margin: 0px 0px 16px; font-weight: 700; } .pied ul { list-style: none; margin: 0px; padding: 0px; display: flex; flex-direction: column; gap: 10px; } .pied ul a { color: var(--texte); font-size: 0.88rem; } .pied ul a:hover { color: var(--orange-vif); text-decoration: none; } .pied-bas { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--bord); color: var(--texte-2); font-size: 0.78rem; } @media (max-width: 1080px) { .split, .form-grille { grid-template-columns: 1fr; } .grille-3 { grid-template-columns: repeat(2, 1fr); } .mosaique { grid-template-columns: 1fr 1fr; } .stats-in { grid-template-columns: 1fr 1fr; } .stat:nth-child(2) { border-right: 0px; } .stat:nth-child(-n+2) { border-bottom: 1px solid var(--bord); } .logo b { white-space: nowrap; } } @media (max-width: 680px) { section { padding: 60px 0px; } .grille-3, .stats-in, form, .atouts, .pied-grille { grid-template-columns: 1fr; } .mosaique { grid-template-columns: 1fr 1fr; gap: 12px; } .tuile, .tuile:first-child { aspect-ratio: 1 / 1; padding: 16px; } .tuile span { font-size: 1.05rem; } details .contenu { padding-left: 0px; } .stat { border-right: 0px; border-bottom: 1px solid var(--bord); } .bloc-form { padding: 28px; } .entete-section { flex-direction: column; align-items: flex-start; } } @media (max-width: 1080px) { .hero-media { position: relative; inset: auto; } .hero-media img { height: auto; } .hero-media::after { inset: auto 0px 0px; height: 42%; background: linear-gradient(to top, var(--hm-noir) 0%, rgb(from var(--hm-noir) r g b / 0.55) 58%, transparent 100%); } .hero-in { min-height: 0px; display: block; padding-top: 30px; padding-bottom: 0px; } .hero h1, .hero p { text-shadow: none; } .hero p { color: var(--texte-2); } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } nav.fixed > div { background-color: rgb(from var(--hm-clair-texte) r g b / 0.72); backdrop-filter: saturate(1.5) blur(18px); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 9999px; box-shadow: rgba(0, 0, 0, 0.42) 0px 12px 38px; max-width: 1040px; padding: 8px 20px; } @supports (animation-timeline: scroll()) { @keyframes barre-au-defilement { 0% { background-color: transparent; backdrop-filter: saturate(1) blur(0px); border-color: rgba(255, 255, 255, 0); border-radius: 0px; box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px; max-width: 1200px; padding: 10px 24px; } } nav.fixed > div { animation-duration: auto; animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: both; animation-play-state: running; animation-name: barre-au-defilement; animation-timeline: scroll(root); animation-range: 0px 30px; } } .index-grille { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; margin-top: 2.4rem; } .index-marque h3 { font-family: var(--display); font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--orange-vif); margin: 0px 0px 0.9rem; } .index-marque ul { list-style: none; margin: 0px; padding: 0px; } .index-marque li { margin: 0px 0px 0.55rem; } .index-marque a { color: var(--texte); text-decoration: none; font-size: 0.94rem; border-bottom: 1px solid transparent; } .index-marque a:hover { border-bottom-color: var(--orange-vif); } @media (max-width: 1000px) { .index-grille { grid-template-columns: repeat(2, 1fr); gap: 22px; } } @media (max-width: 560px) { .index-grille { grid-template-columns: 1fr; } } main > section:nth-of-type(n+2) { background: var(--hm-clair); color: var(--hm-clair-texte); --texte: var(--hm-clair-texte); --texte-2: var(--hm-clair-texte-2); --bord: rgba(0,0,0,.12); --bord-fort: rgba(0,0,0,.20); --surface: var(--hm-clair-surface); --surface-2: var(--hm-clair-2); --orange-vif: var(--hm-clair-accent); } main > section:nth-of-type(2) { border-top: 1px solid rgba(0, 0, 0, 0.1); } main > section:nth-of-type(5) { border-bottom: 1px solid rgba(0, 0, 0, 0.1); } main > section:nth-of-type(n+2) a { color: inherit; } main > section:nth-of-type(n+2) .lire, main > section:nth-of-type(n+2) .lien-tout, main > section:nth-of-type(n+2) .surtitre { color: var(--orange-vif); } main > section:nth-of-type(n+2) .sep { background: rgba(0, 0, 0, 0.16); } main > section:nth-of-type(n+2) .carte, main > section:nth-of-type(n+2) details, main > section:nth-of-type(n+2) .bloc-form { background: var(--hm-clair-surface); border-color: rgba(0, 0, 0, 0.12); box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px, rgba(0, 0, 0, 0.22) 0px 10px 28px -14px; } main > section:nth-of-type(n+2) .icone { background: rgb(from var(--hm-orange) r g b / 0.12); color: var(--orange-vif); } main > section:nth-of-type(n+2) .tuile { background: linear-gradient(150deg, var(--hm-clair-surface), var(--hm-clair-bord)); border: 1px solid rgba(0, 0, 0, 0.1); } main > section:nth-of-type(n+2) .tuile::after { background: radial-gradient(80% 60% at 50% 100%, rgb(from var(--hm-orange) r g b / 0.26), transparent 62%); } main > section:nth-of-type(n+2) input, main > section:nth-of-type(n+2) textarea { background: var(--hm-clair-surface); border-color: rgba(0, 0, 0, 0.18); color: var(--hm-clair-texte); } main > section:nth-of-type(n+2) ::placeholder { color: var(--hm-texte-3); opacity: 1; } main > section:nth-of-type(n+2) .btn-orange { color: var(--hm-clair-texte); } main > section:nth-of-type(n+2) .carte-visuel { color: var(--hm-texte); } main > section:nth-of-type(n+2) .etiquette { color: var(--hm-texte); background: rgb(from var(--hm-noir) r g b / 0.72); border-color: rgba(255, 255, 255, 0.18); } main > section:nth-of-type(n+2) .carte, main > section:nth-of-type(n+2) details, main > section:nth-of-type(n+2) .bloc-form { background: var(--hm-surface); border: 1px solid rgb(from var(--hm-orange) r g b / 0.8); color: var(--hm-texte); box-shadow: rgba(0, 0, 0, 0.55) 0px 18px 40px -22px; } main > section:nth-of-type(n+2) .carte, main > section:nth-of-type(n+2) details, main > section:nth-of-type(n+2) .bloc-form { --texte: var(--hm-texte); --texte-2: var(--hm-texte-2); --bord: rgba(255,255,255,.10); --orange-vif: var(--hm-orange-vif); } main > section:nth-of-type(n+2) .carte h3, main > section:nth-of-type(n+2) .bloc-form h2, main > section:nth-of-type(n+2) summary { color: var(--hm-texte); } main > section:nth-of-type(n+2) .carte .meta, main > section:nth-of-type(n+2) .bloc-form p, main > section:nth-of-type(n+2) details p { color: var(--hm-texte-2); } main > section:nth-of-type(n+2) .carte .lire, main > section:nth-of-type(n+2) .tuile, main > section:nth-of-type(n+2) .tuile span { color: var(--hm-orange-vif); } main > section:nth-of-type(n+2) .tuile { background: linear-gradient(150deg, var(--hm-surface-3), var(--hm-surface-4)); border: 1px solid rgb(from var(--hm-orange) r g b / 0.8); } main > section:nth-of-type(n+2) .tuile::after { background: radial-gradient(80% 60% at 50% 100%, rgb(from var(--hm-orange) r g b / 0.28), transparent 62%); } main > section:nth-of-type(n+2) input, main > section:nth-of-type(n+2) textarea { background: var(--hm-surface-2); border-color: rgba(255, 255, 255, 0.14); color: var(--hm-texte); } main > section:nth-of-type(n+2) ::placeholder { color: var(--hm-texte-4); } /* --- Palette (ajoutee par outils/mettre-en-jetons.py) --- Le seul endroit ou une couleur de marque est ecrite. Un enfant de theme surcharge ces jetons dans son couleurs.css, charge apres. */ :root{ --hm-orange: #F2600C; --hm-orange-vif: #FF7A2E; --hm-sur-orange: #150A02; --hm-noir: #0A0A0B; --hm-surface: #141416; --hm-surface-2: #1B1B1E; --hm-surface-3: #26262A; --hm-surface-4: #0E0E10; --hm-surface-5: #101012; --hm-surface-6: #232326; --hm-texte: #F5F3F0; --hm-texte-2: #9A9793; --hm-texte-3: #8A8681; --hm-texte-4: #7C7975; --hm-texte-5: #6E6B68; --hm-texte-6: #C9C6C2; --hm-orange-barre: #eb5e28; --hm-orange-barre-2: #F55E28; --hm-logo-clair: #FFFCF2; --hm-clair: #F1EEE9; --hm-clair-2: #FAF8F5; --hm-clair-surface: #FFFFFF; --hm-clair-bord: #E2DAD0; --hm-clair-texte: #252422; --hm-clair-texte-2: #5C5954; --hm-clair-accent: #B84909; } /* --- Affranchissement de Next.js (ajoute par outils/construire-themes.py) --- */ /* Deux familles, deux jetons, et tout le reste pointe dessus. Comme pour les couleurs : un enfant qui veut d'autres polices redefinit ces deux lignes dans son apparence.css, et depose ses fichiers .woff2 dans son dossier avec les @font-face qui vont avec. Les noms qui suivent (--font-inter, --display, --corps) etaient declares plus haut dans la feuille : ce bloc arrive en dernier, donc il gagne. */ :root{ --hm-police-titre:"League Spartan","League Spartan Fallback"; --hm-police-texte:"Inter","Inter Fallback"; /* les noms poses par Next.js sur le , que WordPress n'emet pas */ --font-league-spartan:var(--hm-police-titre); --font-inter:var(--hm-police-texte); --font-roboto:var(--hm-police-texte); --font-satoshi:var(--hm-police-texte); /* les noms de la feuille Velaro. On garde les polices de secours derriere : si le fichier .woff2 manque, le texte reste lisible au lieu de sauter. */ --display:var(--hm-police-titre),Impact,"Haettenschweiler","Arial Narrow",sans-serif; --corps:var(--hm-police-texte),"Segoe UI",system-ui,-apple-system,sans-serif; } /* `antialiased` etait une classe utilitaire portee par le du modele. Elle change le rendu des glyphes, donc son absence se voit. */ body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} /* ================================================================ Pages autres que l'accueil (ajoute par outils/construire-themes.py) Article, page simple, liste, recherche, 404. ================================================================ */ /* --- Hero court ------------------------------------------------- Le hero de l'accueil porte une photo et `min-height:min(56vw,800px)`. Sans photo, cette hauteur laisse 700 px de vide. Le hero court refait son fond et sa hauteur au lieu de negocier avec `.hero-in`. Le retrait haut degage la barre de navigation, qui est `fixed` (36 px de bandeau + 12 + 56 + 12 = 116 px de gabarit). */ .hero-court{ padding:148px 0 58px; background: radial-gradient(60% 130% at 84% -10%, rgb(from var(--hm-orange) r g b / .14), transparent 62%), linear-gradient(180deg, var(--hm-surface-4), var(--hm-noir)); border-bottom:1px solid var(--bord); } .hero-court h1{ font-family:var(--display); font-size:clamp(1.9rem,3.6vw,3rem); text-transform:uppercase; line-height:1.02;letter-spacing:.005em; margin:0;max-width:22ch;text-shadow:none; } .hero-court .chapo{ color:var(--hm-texte-6);font-size:1.05rem;line-height:1.6; max-width:60ch;margin:1.15rem 0 0;text-shadow:none; } .hero-court .meta{margin-top:1.3rem} /* --- Fil d'Ariane ----------------------------------------------- */ .fil{ display:flex;flex-wrap:wrap;align-items:center;gap:.5rem; font-size:.78rem;color:var(--texte-2);margin-bottom:1.2rem; } .fil a{color:var(--texte-2)} .fil a:hover{color:var(--texte);text-decoration:none} .fil .sep{color:var(--orange);opacity:.9} .fil [aria-current]{color:var(--texte-2);opacity:.75} /* --- Corps d'article -------------------------------------------- Colonne calee a gauche, alignee sur le h1 du hero : le reste du site est aligne a gauche dans le meme conteneur, centrer le texte casserait cet aplomb. `ch` et pas `px` : la mesure suit la taille de police si le satellite en change dans son apparence.css. */ .article-corps{max-width:72ch} .article-corps > *:first-child{margin-top:0} .article-corps > *:last-child{margin-bottom:0} .article-corps p{ font-size:1.0625rem;line-height:1.75;color:var(--texte); margin:0 0 1.35em; } .article-corps h2{ font-family:var(--display);text-transform:uppercase; font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.06;letter-spacing:.01em; color:var(--texte);margin:3rem 0 1rem; } .article-corps h3{ font-family:var(--display);text-transform:uppercase; font-size:1.2rem;line-height:1.15;letter-spacing:.035em; color:var(--texte);margin:2.3rem 0 .8rem; } /* h4 reprend le vocabulaire de `.surtitre` : une etiquette, pas un titre. */ .article-corps h4{ font-family:var(--corps);font-size:.76rem;font-weight:700; text-transform:uppercase;letter-spacing:.16em; color:var(--orange-vif);margin:2.2rem 0 .7rem; } .article-corps strong,.article-corps b{font-weight:700;color:var(--texte)} .article-corps em,.article-corps i{font-style:italic} /* La bande claire impose `color:inherit` a tous ses liens (0,1,3). Le corps d'article a besoin de liens visibles : meme poids, ecrit plus bas dans la feuille, donc il passe devant. */ main section .article-corps a{ color:var(--orange-vif); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; } main section .article-corps a:hover{text-decoration-thickness:2px} .article-corps ul,.article-corps ol{margin:0 0 1.35em;padding-left:1.35rem} .article-corps ul{list-style:disc} .article-corps ol{list-style:decimal} .article-corps li{font-size:1.0625rem;line-height:1.7;color:var(--texte);margin-bottom:.5em} .article-corps li::marker{color:var(--orange);font-weight:700} .article-corps li > ul,.article-corps li > ol{margin:.5em 0 0} .article-corps blockquote{ margin:2rem 0;padding:.15rem 0 .15rem 1.6rem; border-left:3px solid var(--orange); } .article-corps blockquote p{font-size:1.15rem;line-height:1.6;margin-bottom:.6em} .article-corps blockquote p:last-child{margin-bottom:0} .article-corps cite{display:block;font-size:.85rem;color:var(--texte-2);font-style:normal} /* Tableau : un filet par ligne, l'entete en police de titre. Le conteneur defile horizontalement sur mobile plutot que d'ecraser les colonnes. */ .article-corps figure.wp-block-table,.article-corps .tableau{overflow-x:auto;margin:2rem 0} .article-corps table{ width:100%;border-collapse:collapse;font-size:.95rem; margin:2rem 0; } .article-corps figure.wp-block-table table,.article-corps .tableau table{margin:0} .article-corps th{ font-family:var(--display);text-transform:uppercase;letter-spacing:.1em; font-size:.74rem;color:var(--texte);text-align:left; padding:10px 14px;border-bottom:1px solid var(--bord-fort); } .article-corps td{ padding:11px 14px;border-bottom:1px solid var(--bord); color:var(--texte);vertical-align:top; } .article-corps tbody tr:last-child td{border-bottom:0} .article-corps img{border-radius:var(--rayon-carte);margin:2rem 0} .article-corps figure{margin:2rem 0} .article-corps figure img{margin:0} .article-corps figcaption{ font-size:.82rem;color:var(--texte-2);margin-top:.65rem;line-height:1.5; } /* `--bord` est un noir translucide dans la bande claire et un blanc translucide dans la bande sombre : c'est la seule teinte de fond qui marche des deux cotes sans etre redeclaree. */ .article-corps code,.article-corps kbd{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9em;background:var(--bord);border-radius:6px;padding:.12em .4em; } .article-corps pre{ background:var(--bord);border-radius:var(--rayon);padding:16px 18px; overflow-x:auto;margin:2rem 0;font-size:.9rem;line-height:1.6; } .article-corps pre code{background:none;padding:0} .article-corps hr{border:0;border-top:1px solid var(--bord);margin:3rem 0} /* --- Navigation entre articles ---------------------------------- */ .nav-article{ display:grid;grid-template-columns:1fr 1fr;gap:24px; margin-top:64px;padding-top:40px;border-top:1px solid var(--bord); } .nav-article .carte{padding:20px 22px} .nav-article .sens{ display:block;font-size:.7rem;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--orange-vif);margin-bottom:.55rem; } .nav-article .titre{ display:block;font-family:var(--display);text-transform:uppercase; font-size:1.05rem;line-height:1.2;color:var(--texte); } .nav-article a:hover{text-decoration:none} .nav-article a:hover .titre{color:var(--orange-vif)} .nav-article .suivant{text-align:right} /* --- Pagination des listes -------------------------------------- Sortie brute de `the_posts_pagination()` : le socle ne l'avait jamais rencontree, elle arrivait sans aucun style. */ .pagination{margin-top:56px} .pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .pagination .page-numbers{ display:inline-flex;align-items:center;justify-content:center; min-width:42px;height:42px;padding:0 12px;border-radius:999px; border:1px solid var(--bord);color:var(--texte); font-size:.9rem;font-weight:600; } .pagination a.page-numbers:hover{border-color:var(--orange);text-decoration:none} .pagination .page-numbers.current{ background:var(--orange);border-color:var(--orange);color:var(--sur-orange); } .pagination .page-numbers.dots{border-color:transparent} /* --- Formulaire de recherche ------------------------------------ Un `
` HTML, sans une ligne de JavaScript : la recherche est servie par WordPress au rechargement. */ .recherche{display:flex;gap:10px;max-width:44ch;margin-top:1.6rem} /* Deux largeurs heritees du socle a defaire, toutes deux posees pour son formulaire de contact, qui est une grille : `input,textarea{width:100%}` et `form .btn{width:100%}`. Dans une barre en flex, une largeur de 100 % devient la base flexible : le bouton prenait toute la ligne et le champ tombait a 34 px (mesure du 09/08). On rend au champ une base nulle et au bouton sa largeur de texte. */ .recherche input[type="search"]{flex:1 1 0;width:auto;min-width:0;height:48px} .recherche .btn{flex:0 0 auto;width:auto;grid-column:auto} /* --- Cartes de liste -------------------------------------------- `.carte-visuel` etait prevue pour un pictogramme SVG centre. Une image mise en avant WordPress doit, elle, remplir le cadre. */ .carte-visuel img{width:100%;height:100%;object-fit:cover;display:block} /* Un second titre de section dans la meme section : il lui faut l'air que le retrait de section donnait au premier. */ .entete-detachee{margin-top:64px} /* --- Page introuvable ------------------------------------------- */ .bloc-404{max-width:60ch} .bloc-404 p{font-size:1.05rem;line-height:1.7;color:var(--texte);margin:0 0 1.6rem} .bloc-404 .actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:2.6rem} /* Ce que WordPress cache aux yeux mais garde pour les lecteurs d'ecran. */ .screen-reader-text{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* --- Ecrans etroits --------------------------------------------- */ @media (max-width:1080px){ .hero-court{padding:126px 0 46px} .nav-article{margin-top:48px;padding-top:32px} } @media (max-width:680px){ .hero-court{padding:112px 0 38px} .hero-court h1{max-width:none} .article-corps h2{margin-top:2.4rem} .nav-article{grid-template-columns:1fr;gap:16px} .nav-article .suivant{text-align:left} .recherche{flex-direction:column;max-width:none} .recherche .btn{justify-content:center} } /* --- Hero sans photo (dossier vierge) --- */ .hero-media .hero-vide{ width:100%;aspect-ratio:1365/768; background: radial-gradient(70% 90% at 22% 18%, rgb(from var(--hm-orange) r g b / .16), transparent 60%), linear-gradient(160deg, var(--hm-surface-3), var(--hm-noir)); } /* --- Menus sans JavaScript ----------------------------------------------- Constat du 09/08, deux defauts herites de la conversion de la maquette : elle venait d'un rendu React dont le JS n'a pas suivi. 1. Le deroulant « Par modele » restait en `opacity:0` + `pointer-events:none`. Aucune regle de la feuille ne le rouvrait : verifie en cherchant `opacity-0` et `pointer-events-none` dans ce fichier, ils ne sont declares qu'une fois, sans contrepartie. Le bouton ne faisait rien. 2. Le bouton hamburger portait `aria-controls="mobile-menu"` alors qu'aucun `#mobile-menu` n'existait dans aucun fichier du theme. Or les liens du menu sont en `hidden md:flex` : SOUS 768 px, LE SITE N'AVAIT AUCUNE NAVIGATION. Sur une requete « voyant tableau de bord », c'est la majorite des visiteurs. Les deux sont reecrits en
/ : ouverture native au clic et au clavier, repli propre, zero ligne de JavaScript. La doctrine satellite interdit le JS, elle n'interdit pas un menu qui marche. A REPORTER DANS LE SOCLE : le defaut vient de hm-exemple, il touchera tous les satellites montes dessus. */ /* La feuille habille TOUS les
en carte de FAQ (voir plus haut : fond, bordure, arrondi 16 px, padding 20/22). Mesure a 390 px : le hamburger se retrouvait dans un pave noir de 86 x 82. Les deux menus sortent de cette regle, leur selecteur de classe passe devant. */ .menu-deroulant,.menu-mobile, .menu-deroulant[open],.menu-mobile[open]{ background:none;border:0;border-radius:0;padding:0;margin:0; } .menu-deroulant{position:relative} .menu-deroulant > summary{ display:flex;align-items:center;gap:.25rem; cursor:pointer;list-style:none; color:rgba(255,255,255,.8);transition:color .3s; /* Les trois lignes suivantes ne sont pas cosmetiques. La feuille habille TOUS les pour l'accordeon de la FAQ (1rem, 600, gap 16px) et ces valeurs passent devant les classes utilitaires portees par la balise. Sans elles, mesure du 09/08 : le declencheur passe de 14px/500 a 16px/600, il s'elargit de 114 a 125 px, et TOUTE la barre de navigation centree glisse de 5,5 px. Le remplacement du