/* design-tokens.css — design tokens + color schemes + font-face Reconstruit depuis le rendu de la démo FullStack Supplement. Les couleurs/typo principales sont surchargeables via le Customizer (voir snippets/css-settings.liquid). */ /* Polices */ /* Polices personnalisées */ @font-face { font-family: "custom_heading"; src: url("https://cdn.shopify.com/s/files/1/1014/7400/9430/files/inter_n7.02711e6b374660cfc7915d1afc1c204e633421e4.woff2?v=1774451122") format("woff2"); } @font-face { font-family: "custom_subheading"; src: url("https://cdn.shopify.com/s/files/1/1014/7400/9430/files/inter_n7.02711e6b374660cfc7915d1afc1c204e633421e4.woff2?v=1774451122") format("woff2"); } @font-face { font-family: "custom_body"; src: url("https://cdn.shopify.com/s/files/1/1014/7400/9430/files/GalanoGrotesqueRegular.woff2?v=1774449932") format("woff2"); } :root { /* Polices */ /* Polices personnalisées */ --font-heading--family: "custom_heading"; --font-heading--style: normal; --font-heading--weight: 600; --font-subheading--family: "custom_subheading"; --font-subheading--style: normal; --font-subheading--weight: 500; --font-body--family: "custom_body"; --font-body--style: normal; --font-body--weight: 400; /* Typographies */ --font-h1--family: var(--font-heading--family); --font-h1--style: var(--font-heading--style); --font-h1--weight: var(--font-heading--weight); --font-h1--size: 3.5rem; --font-h1--line-height: var(--line-height--heading-normal); --font-h1--letter-spacing: var(--letter-spacing--heading-normal); --font-h1--case: none; --font-h2--family: var(--font-heading--family); --font-h2--style: var(--font-heading--style); --font-h2--weight: var(--font-heading--weight); --font-h2--size: 2.5rem; --font-h2--line-height: var(--line-height--heading-normal); --font-h2--letter-spacing: var(--letter-spacing--heading-normal); --font-h2--case: none; --font-h3--family: var(--font-heading--family); --font-h3--style: var(--font-heading--style); --font-h3--weight: var(--font-heading--weight); --font-h3--size: 2.0rem; --font-h3--line-height: var(--line-height--heading-normal); --font-h3--letter-spacing: var(--letter-spacing--heading-normal); --font-h3--case: none; --font-h4--family: var(--font-subheading--family); --font-h4--style: var(--font-subheading--style); --font-h4--weight: var(--font-subheading--weight); --font-h4--size: 1.5rem; --font-h4--line-height: var(--line-height--heading-normal); --font-h4--letter-spacing: var(--letter-spacing--heading-normal); --font-h4--case: none; --font-h5--family: var(--font-subheading--family); --font-h5--style: var(--font-subheading--style); --font-h5--weight: var(--font-subheading--weight); --font-h5--size: 1.25rem; --font-h5--line-height: var(--line-height--heading-normal); --font-h5--letter-spacing: var(--letter-spacing--heading-normal); --font-h5--case: none; --font-h6--family: var(--font-subheading--family); --font-h6--style: var(--font-subheading--style); --font-h6--weight: var(--font-subheading--weight); --font-h6--size: 1.125rem; --font-h6--line-height: var(--line-height--heading-normal); --font-h6--letter-spacing: var(--letter-spacing--heading-normal); --font-h6--case: none; --font-body--size-small: 0.78125rem; --font-body--size: 0.875rem; --font-body--size-emphasized: 0.9375rem; --font-body--line-height: var(--line-height--body-normal); --font-body--letter-spacing: var(--letter-spacing--body-normal); @media (width < 750px) { --font-h1--size: 3.0rem; --font-h2--size: 2.0rem; --font-h3--size: 1.5rem; --font-h4--size: 1.25rem; --font-h5--size: 1.125rem; --font-h6--size: 1.0rem; --font-body--size-small: 0.78125rem; --font-body--size: 0.875rem; --font-body--size-emphasized: 0.875rem; } /* Général */ --small-multiplier: 0.7; /* utile recalculter la taille et l'arrondi des composants version petits (*--small)*/ --big-multiplier: 1.5; /* utile recalculter la taille et l'arrondi des composants version grands (*--big) */ --backdrop-opacity: 0.25; /* Mise en page */ --page-width: 1450px; --page-margin-desktop: 40px; --page-margin-mobile: 18px; /* Arrondis */ --inputs-border-radius: 8px; --checkbox-border-radius: calc(var(--inputs-border-radius) / 2); --badge-border-radius: 4px; --button-border-radius: 8px; --card-border-radius: 12px; /* Conteneurs */ --container-border-width: 1px; --card-padding: 15px; @media (width > 750px) { --card-padding: 30px; } /* Icônes */ --icon-fill: 0; --icon-weight: 200; --icon-size: 26; /* Boutons */ --button-font-size: 0.875rem; @media (width < 750px) { --button-font-size: 0.875rem; } --button-letter-spacing: 0.025rem; --button-padding-vertical: 10px; --button-padding-horizontal: 20px; --button-primary-border-width: 0px; --button-primary-font-weight: 400; --button-primary-text-transform: uppercase; --button-secondary-border-width: 1px; --button-secondary-font-weight: 400; --button-secondary-text-transform: uppercase; /* Badges */ --badge-letter-spacing: 0.05rem; --badge-padding-vertical: 10px; --badge-padding-horizontal: 20px; --badge-font-weight: 400; --badge-text-transform: default; --badge-primary-border-width: 0px; --badge-secondary-border-width: 0.5px; /* Letter-spacing */ --letter-spacing--heading-tight: -0.03em; --letter-spacing--heading-normal: 0; --letter-spacing--heading-loose: 0.03em; --letter-spacing--body-tight: -0.03em; --letter-spacing--body-normal: 0; --letter-spacing--body-loose: 0.03em; /* Line height */ --line-height--heading-tight: 1.15; --line-height--heading-normal: 1.25; --line-height--heading-loose: 1.35; --line-height--body-tight: 1.2; --line-height--body-normal: 1.4; --line-height--body-loose: 1.6; /* Animations */ --animation-speed: 0.25s; --animation-speed-medium: 0.15s; --animation-speed-fast: 0.1s; --animation-easing: ease-in-out; --animation-link-hover: opacity var(--animation-speed-medium) var(--animation-easing); --opacity-link-hover: 0.75; /* Séparateurs */ --separator-border-width: 0.5px; /* Marges */ --margin-xs: 0.33rem; --margin-sm: 0.5rem; --margin-md: 1rem; --margin-lg: 1.5rem; --margin-xl: 3rem; --margin-xxl: 5rem; /* Marges internes */ --padding-xxxs: 0.25rem; --padding-xxs: 0.33rem; --padding-xs: 0.5rem; --padding-sm: 0.75rem; --padding-md: 1rem; --padding-lg: 2.5rem; --padding-xl: 4rem; --padding-xxl: 6rem; /* Gaps */ --gap-xxs: 0.25rem; --gap-xs: 0.33rem; --gap-sm: 0.5rem; --gap-md: 1rem; --gap-lg: 2rem; --gap-xl: 3rem; /* Grilles */ --grid-gap-horizontal: var(--gap-xl); --grid-gap-vertical: var(--gap-lg); /* Tous les champs */ --inputs-min-height: 50px; --inputs-min-width: 120px; --inputs-font-size: 0.875rem; --inputs-border-width: 1px; --inputs-padding: 14px; /* Boutons de variantes */ --variant-button-min-height: 40px; --variant-button-min-width: 80px; --variant-button-font-size: 0.875rem; --variant-button-padding-vertical: 10px; --variant-button-padding-horizontal: 20px; --variant-button-border-width: 1px; /* Onglets */ --tab-button-min-height: 30px; --tab-button-min-width: 70px; --tab-button-font-size: 0.875rem; --tab-button-border-width: 1px; --tab-button-padding-vertical: 10px; --tab-button-padding-horizontal: 15px; /* Cases à cocher */ --checkbox-size: 20px; /* Pastilles de couleur */ --swatches-small-outline-offset: 1px; --swatches-outline-offset: 2px; --swatches-big-outline-offset: 3px; --swatches-size: 30px; --swatches-border-width: 1px; /* Popup */ --modal-shadow: 0px 4px 20px rgba(var(--color-shadow)); --modal-width: 42rem; --modal-max-height: 65dvh; /* Notifications Toast */ --toast-notification-icon-size: 24px; --toast-notification-min-width: 300px; --toast-notification-z-index: 10001; --toast-notification-background-color--error: #f9e7e7; --toast-notification-color--error: #9f3a38; --toast-notification-background-color--success: #f0f9eb; --toast-notification-color--success: #2d6a4f; --toast-notification-background-color--warning: #fff4e5; --toast-notification-color--warning: #7f5a1e; --toast-notification-background-color--info: #e6f7ff; --toast-notification-color--info: #1890ff; --toast-notification-transition-duration: 500ms; } :root, .color-scheme-1 { --color-background: rgba(255 254 251 / 1.0); --gradient-background: #fffefb; --color-foreground: rgba(32 31 31 / 1.0); --color-border: rgba(32 31 31 / 1.0); --color-stars-icons: rgba(32 31 31 / 1.0); --color-primary-button-text: rgba(255 255 255 / 1.0); --color-primary-button-background: rgba(32 31 31 / 1.0); --color-primary-button-border: rgba(32 31 31 / 1.0); --color-secondary-button-text: rgba(32 31 31 / 1.0); --color-secondary-button-background: rgba(255 255 255 / 1.0); --color-secondary-button-border: rgba(229 223 219 / 1.0); --color-primary-badge-text: rgba(0 0 0 / 1.0); --color-primary-badge-background: rgba(255 248 156 / 1.0); --color-primary-badge-border: rgba(255 248 156 / 1.0); --color-secondary-badge-text: rgba(32 31 31 / 1.0); --color-secondary-badge-background: rgba(251 245 247 / 1.0); --color-secondary-badge-border: rgba(251 245 247 / 1.0); --color-input-text: rgba(32 31 31 / 1.0); --color-input-border: rgba(0 0 0 / 0.13); --color-input-border-low-opacity: rgba(0 0 0/ 0.08); --color-input-background: rgba(255 255 255 / 1.0); --color-selected-input-text: rgba(32 31 31 / 1.0); --color-selected-input-border: rgba(32 31 31 / 1.0); --color-selected-input-border-low-opacity: rgba(32 31 31/ 0.08); --color-selected-input-background: rgba(255 255 255 / 1.0); --color-variant-background: rgba(255 255 255 / 1.0); --color-variant-border: rgba(0 0 0 / 0.13); --color-variant-text: rgba(32 31 31 / 1.0); --color-selected-variant-background: rgba(255 255 255 / 1.0); --color-selected-variant-border: rgba(32 31 31 / 1.0); --color-selected-variant-text: rgba(32 31 31 / 1.0); --color-tab-background: rgba(255 255 255 / 1.0); --color-tab-border: rgba(229 223 219 / 1.0); --color-tab-text: rgba(32 31 31 / 1.0); --color-selected-tab-background: rgba(255 255 255 / 1.0); --color-selected-tab-border: rgba(32 31 31 / 1.0); --color-selected-tab-text: rgba(32 31 31 / 1.0); --color-shadow: rgba(0, 0, 0, 0.25); --color-success: rgba(25, 135, 84, 1); --color-error: rgba(239, 68, 68, 1); } .color-scheme-2 { --color-background: rgba(250 246 243 / 1.0); --gradient-background: #faf6f3; --color-foreground: rgba(0 0 0 / 0.81); --color-border: rgba(0 0 0 / 0.19); --color-stars-icons: rgba(0 0 0 / 1.0); --color-primary-button-text: rgba(255 255 255 / 1.0); --color-primary-button-background: rgba(0 0 0 / 1.0); --color-primary-button-border: rgba(0 0 0 / 1.0); --color-secondary-button-text: rgba(0 0 0 / 1.0); --color-secondary-button-background: rgba(255 255 255 / 1.0); --color-secondary-button-border: rgba(229 223 219 / 1.0); --color-primary-badge-text: rgba(0 0 0 / 1.0); --color-primary-badge-background: rgba(255 248 156 / 1.0); --color-primary-badge-border: rgba(255 248 156 / 1.0); --color-secondary-badge-text: rgba(0 0 0 / 1.0); --color-secondary-badge-background: rgba(255 255 255 / 1.0); --color-secondary-badge-border: rgba(0 0 0 / 1.0); --color-input-text: rgba(0 0 0 / 1.0); --color-input-border: rgba(230 230 230 / 1.0); --color-input-border-low-opacity: rgba(230 230 230/ 0.08); --color-input-background: rgba(255 255 255 / 1.0); --color-selected-input-text: rgba(0 0 0 / 1.0); --color-selected-input-border: rgba(0 0 0 / 1.0); --color-selected-input-border-low-opacity: rgba(0 0 0/ 0.08); --color-selected-input-background: rgba(255 255 255 / 1.0); --color-variant-background: rgba(255 255 255 / 1.0); --color-variant-border: rgba(230 230 230 / 1.0); --color-variant-text: rgba(0 0 0 / 1.0); --color-selected-variant-background: rgba(255 255 255 / 1.0); --color-selected-variant-border: rgba(0 0 0 / 1.0); --color-selected-variant-text: rgba(37 37 37 / 1.0); --color-tab-background: rgba(255 255 255 / 1.0); --color-tab-border: rgba(230 230 230 / 1.0); --color-tab-text: rgba(0 0 0 / 1.0); --color-selected-tab-background: rgba(255 255 255 / 1.0); --color-selected-tab-border: rgba(0 0 0 / 1.0); --color-selected-tab-text: rgba(0 0 0 / 1.0); --color-shadow: rgba(0, 0, 0, 0.25); --color-success: rgba(25, 135, 84, 1); --color-error: rgba(239, 68, 68, 1); } .color-scheme-3 { --color-background: rgba(32 31 31 / 1.0); --gradient-background: #201f1f; --color-foreground: rgba(255 255 255 / 1.0); --color-border: rgba(255 255 255 / 0.31); --color-stars-icons: rgba(255 255 255 / 1.0); --color-primary-button-text: rgba(32 31 31 / 1.0); --color-primary-button-background: rgba(255 255 255 / 1.0); --color-primary-button-border: rgba(255 255 255 / 1.0); --color-secondary-button-text: rgba(255 255 255 / 1.0); --color-secondary-button-background: rgba(0 0 0 / 0.0); --color-secondary-button-border: rgba(255 255 255 / 1.0); --color-primary-badge-text: rgba(32 31 31 / 1.0); --color-primary-badge-background: rgba(255 255 255 / 1.0); --color-primary-badge-border: rgba(255 255 255 / 1.0); --color-secondary-badge-text: rgba(32 31 31 / 1.0); --color-secondary-badge-background: rgba(255 255 255 / 1.0); --color-secondary-badge-border: rgba(255 255 255 / 1.0); --color-input-text: rgba(255 255 255 / 1.0); --color-input-border: rgba(255 255 255 / 0.5); --color-input-border-low-opacity: rgba(255 255 255/ 0.08); --color-input-background: rgba(32 31 31 / 1.0); --color-selected-input-text: rgba(255 255 255 / 1.0); --color-selected-input-border: rgba(255 255 255 / 1.0); --color-selected-input-border-low-opacity: rgba(255 255 255/ 0.08); --color-selected-input-background: rgba(32 31 31 / 1.0); --color-variant-background: rgba(32 31 31 / 1.0); --color-variant-border: rgba(255 255 255 / 0.5); --color-variant-text: rgba(255 255 255 / 1.0); --color-selected-variant-background: rgba(32 31 31 / 1.0); --color-selected-variant-border: rgba(255 255 255 / 1.0); --color-selected-variant-text: rgba(255 255 255 / 1.0); --color-tab-background: rgba(32 31 31 / 1.0); --color-tab-border: rgba(255 255 255 / 1.0); --color-tab-text: rgba(255 255 255 / 1.0); --color-selected-tab-background: rgba(255 255 255 / 1.0); --color-selected-tab-border: rgba(255 255 255 / 1.0); --color-selected-tab-text: rgba(32 31 31 / 1.0); --color-shadow: rgba(0, 0, 0, 0.25); --color-success: rgba(25, 135, 84, 1); --color-error: rgba(239, 68, 68, 1); } .color-scheme-ffdce979-a7df-44bc-b489-96aab0aa9753 { --color-background: rgba(255 255 255 / 1.0); --gradient-background: #ffffff; --color-foreground: rgba(32 31 31 / 1.0); --color-border: rgba(32 31 31 / 1.0); --color-stars-icons: rgba(32 31 31 / 1.0); --color-primary-button-text: rgba(255 255 255 / 1.0); --color-primary-button-background: rgba(32 31 31 / 1.0); --color-primary-button-border: rgba(32 31 31 / 1.0); --color-secondary-button-text: rgba(32 31 31 / 1.0); --color-secondary-button-background: rgba(255 255 255 / 1.0); --color-secondary-button-border: rgba(0 0 0 / 0.13); --color-primary-badge-text: rgba(0 0 0 / 1.0); --color-primary-badge-background: rgba(255 248 156 / 1.0); --color-primary-badge-border: rgba(255 248 156 / 1.0); --color-secondary-badge-text: rgba(32 31 31 / 1.0); --color-secondary-badge-background: rgba(255 255 255 / 1.0); --color-secondary-badge-border: rgba(0 0 0 / 0.13); --color-input-text: rgba(32 31 31 / 1.0); --color-input-border: rgba(0 0 0 / 0.13); --color-input-border-low-opacity: rgba(0 0 0/ 0.08); --color-input-background: rgba(255 255 255 / 1.0); --color-selected-input-text: rgba(32 31 31 / 1.0); --color-selected-input-border: rgba(32 31 31 / 1.0); --color-selected-input-border-low-opacity: rgba(32 31 31/ 0.08); --color-selected-input-background: rgba(255 255 255 / 1.0); --color-variant-background: rgba(255 255 255 / 1.0); --color-variant-border: rgba(0 0 0 / 0.13); --color-variant-text: rgba(32 31 31 / 1.0); --color-selected-variant-background: rgba(255 255 255 / 1.0); --color-selected-variant-border: rgba(32 31 31 / 1.0); --color-selected-variant-text: rgba(32 31 31 / 1.0); --color-tab-background: rgba(255 255 255 / 1.0); --color-tab-border: rgba(0 0 0 / 0.13); --color-tab-text: rgba(32 31 31 / 1.0); --color-selected-tab-background: rgba(255 255 255 / 1.0); --color-selected-tab-border: rgba(32 31 31 / 1.0); --color-selected-tab-text: rgba(32 31 31 / 1.0); --color-shadow: rgba(0, 0, 0, 0.25); --color-success: rgba(25, 135, 84, 1); --color-error: rgba(239, 68, 68, 1); } .color-scheme-b6c37957-207c-448f-b902-0dfd4457ed99 { --color-background: rgba(255 254 251 / 1.0); --gradient-background: #fffefb; --color-foreground: rgba(32 31 31 / 1.0); --color-border: rgba(226 224 219 / 1.0); --color-stars-icons: rgba(32 31 31 / 1.0); --color-primary-button-text: rgba(255 255 255 / 1.0); --color-primary-button-background: rgba(32 31 31 / 1.0); --color-primary-button-border: rgba(32 31 31 / 1.0); --color-secondary-button-text: rgba(32 31 31 / 1.0); --color-secondary-button-background: rgba(255 255 255 / 1.0); --color-secondary-button-border: rgba(0 0 0 / 0.13); --color-primary-badge-text: rgba(0 0 0 / 1.0); --color-primary-badge-background: rgba(255 248 156 / 1.0); --color-primary-badge-border: rgba(255 248 156 / 1.0); --color-secondary-badge-text: rgba(32 31 31 / 1.0); --color-secondary-badge-background: rgba(251 245 247 / 1.0); --color-secondary-badge-border: rgba(251 245 247 / 1.0); --color-input-text: rgba(32 31 31 / 1.0); --color-input-border: rgba(0 0 0 / 0.13); --color-input-border-low-opacity: rgba(0 0 0/ 0.08); --color-input-background: rgba(255 255 255 / 1.0); --color-selected-input-text: rgba(32 31 31 / 1.0); --color-selected-input-border: rgba(32 31 31 / 1.0); --color-selected-input-border-low-opacity: rgba(32 31 31/ 0.08); --color-selected-input-background: rgba(255 255 255 / 1.0); --color-variant-background: rgba(255 255 255 / 1.0); --color-variant-border: rgba(0 0 0 / 0.13); --color-variant-text: rgba(32 31 31 / 1.0); --color-selected-variant-background: rgba(255 255 255 / 1.0); --color-selected-variant-border: rgba(32 31 31 / 1.0); --color-selected-variant-text: rgba(32 31 31 / 1.0); --color-tab-background: rgba(255 255 255 / 1.0); --color-tab-border: rgba(0 0 0 / 0.13); --color-tab-text: rgba(32 31 31 / 1.0); --color-selected-tab-background: rgba(255 255 255 / 1.0); --color-selected-tab-border: rgba(32 31 31 / 1.0); --color-selected-tab-text: rgba(32 31 31 / 1.0); --color-shadow: rgba(0, 0, 0, 0.25); --color-success: rgba(25, 135, 84, 1); --color-error: rgba(239, 68, 68, 1); } body, .color-scheme-1, .color-scheme-2, .color-scheme-3, .color-scheme-ffdce979-a7df-44bc-b489-96aab0aa9753, .color-scheme-b6c37957-207c-448f-b902-0dfd4457ed99 { color: var(--color-foreground); background: var(--gradient-background); } .section-header { position: sticky; top: 0; z-index: 4; background: inherit; } #shopify-block-AZFVNdHpJT2l5VFhQR__icon_with_text_HMm4JC .icon { font-size: 22px !important; height: 22px; } #shopify-block-ARXVJcjlRMnBOWnl0c__icon_with_text_RBbzzF .icon { font-size: 22px !important; height: 22px; } #shopify-block-ASkIzMCtpK1MybHUwb__icon_with_text_3ptUxb .icon { font-size: 22px !important; height: 22px; } #shopify-block-AU3M3Q0R6TSsweWFRY__icon_with_text_tX9pDm .icon { font-size: 22px !important; height: 22px; } #shopify-block-AbXFCbDRwMFkyVStuZ__icon_zkE6Tk { height: 38px; } #shopify-block-AbXFCbDRwMFkyVStuZ__icon_zkE6Tk .icon { font-size: 38px !important; } #shopify-block-AQ3JmMURlTWxDM2R6Y__icon_AfdFND { height: 38px; } #shopify-block-AQ3JmMURlTWxDM2R6Y__icon_AfdFND .icon { font-size: 38px !important; } #shopify-block-AYysxZ3dhNWRKUXJZV__icon_AAjyNT { height: 38px; } #shopify-block-AYysxZ3dhNWRKUXJZV__icon_AAjyNT .icon { font-size: 38px !important; } #shopify-block-AY05JSmY3SE0wTzRPW__icon_E78Wct { height: 38px; } #shopify-block-AY05JSmY3SE0wTzRPW__icon_E78Wct .icon { font-size: 38px !important; }