### Large Card Styles (fr-card--lg) - CSS

Source: https://www.impots.gouv.fr/documentation/index

Defines styles for large card components, including content padding, title font sizes, icon sizes, and description margins. It also specifies layout for start, end, and footer sections, with adjustments for enlarged links or buttons.

```css
.fr-card--lg .fr-card__content {
  padding: 2.5rem;
}

.fr-card--lg .fr-card__title {
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.75rem;
}

.fr-card--lg .fr-card__title a::after,
.fr-card--lg .fr-card__title button::after {
  --icon-size: 1.5rem;
}

.fr-card--lg .fr-card__desc {
  font-size: 1rem;
  line-height: 1.5rem;
  margin-top: 1rem;
}

.fr-card--lg .fr-card__start {
  margin-bottom: 0.5rem;
}

.fr-card--lg .fr-card__start .fr-badges-group,
.fr-card--lg .fr-card__start .fr-tags-group {
  margin-bottom: 0.5rem;
}

.fr-card--lg .fr-card__start .fr-card__detail {
  margin-bottom: 1rem;
}

.fr-card--lg.fr-enlarge-link:not(.fr-card--no-icon) .fr-card__end,
.fr-card--lg.fr-enlarge-button:not(.fr-card--no-icon) .fr-card__end {
  margin-bottom: -4rem;
  min-height: 2.5rem;
  padding-right: 2.5rem;
}

.fr-card--lg.fr-enlarge-link:not(.fr-card--no-icon) .fr-card__content,
.fr-card--lg.fr-enlarge-button:not(.fr-card--no-icon) .fr-card__content {
  padding-bottom: 6.5rem;
}

.fr-card--lg.fr-enlarge-link:not(.fr-card--no-icon) .fr-card__title a::after,
.fr-card--lg.fr-enlarge-link:not(.fr-card--no-icon) .fr-card__title button::after,
.fr-card--lg.fr-enlarge-button:not(.fr-card--no-icon) .fr-card__title a::after,
.fr-card--lg.fr-enlarge-button:not(.fr-card--no-icon) .fr-card__title button::after {
  --icon-size: 2rem;
  right: 2.5rem;
  bottom: 2.5rem;
}

.fr-card--lg .fr-card__footer {
  padding: 0.5rem 2.5rem 2.5rem;
}
```

--------------------------------

### Card Styling (Download Variant Header)

Source: https://www.impots.gouv.fr/documentation/index

Sets a light grey background for the header of download cards that do not have a 'no-background' class.

```css
.fr-card--download:not(.fr-card--no-background) .fr-card__header {
    background-color: #f6f6f6;
  }
```

--------------------------------

### CSS Notice Component Styling

Source: https://www.impots.gouv.fr/documentation/index

Styles a generic notice component, including its body, title, and description. It defines spacing, background, and text colors using CSS variables. It also includes styles for a close button within the notice, featuring an icon.

```css
.fr-notice {
  position: relative;

  --title-spacing: 0;
  --text-spacing: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: var(--background-contrast-grey);
  color: var(--text-title-grey);
}

.fr-notice__body {
  position: relative;
  padding: 0 2.25rem 0 0;
}

.fr-notice__title {
  position: relative;
  margin-right: 0.25rem;
  font-weight: 700;
}

.fr-notice__title::before {
  --icon-size: 1.5rem;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
  background-color: currentColor;
  width: var(--icon-size);
  height: var(--icon-size);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  margin-right: 0.5rem;
}

.fr-notice__desc {
  margin-right: 0.25rem;
}

.fr-notice__title,
.fr-notice__desc {
  display: block;
}

.fr-notice__title,
.fr-notice__desc,
.fr-notice__link {
  font-size: 0.875rem;
  line-height: 1.5rem;
}

.fr-notice--no-icon .fr-notice__title::before {
  display: none;
}

.fr-notice .fr-btn--close {
  font-size: 0.875rem;
  line-height: 1.5rem;
  min-height: 2rem;
  padding: 0.25rem 0.75rem;
  overflow: hidden;
  white-space: nowrap;
  max-width: 2rem;
  max-height: 2rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  position: absolute;
  top: -0.25rem;
  right: 0;
  color: inherit;
}

.fr-notice .fr-btn--close::before {
  --icon-size: 1rem;
  margin-left: 0;
  margin-right: 0.5rem;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
  background-color: currentColor;
  width: var(--icon-size);
  height: var(--icon-size);
  -webkit-mask-size: 100% 100%;
```

--------------------------------

### Styling for Info Badges

Source: https://www.impots.gouv.fr/documentation/index

Sets the text and background colors for informational badges, and defines variables for their idle, hover, and active states, using a transparent idle state.

```css
.fr-badge--info {
  color: var(--text-default-info);
  background-color: var(--background-contrast-info);

  --idle: transparent;
  --hover: var(--background-contrast-info-hover);
  --active: var(--background-contrast-info-active);
}
```

--------------------------------

### CSS Layout and Utility Variables

Source: https://www.impots.gouv.fr/documentation/index

Sets fundamental CSS properties such as `box-sizing` to border-box for consistent element sizing, and defines variables for scrollbar width, ground element height, and various shadow effects.

```css
box-sizing: border-box;
  --scrollbar-width: 0;
  --ground: 0;
  --shadow-color: rgba(0, 0, 18, 0.16);
  --raised-shadow: 0 1px 3px var(--shadow-color);
  --overlap-shadow: 0 2px 6px var(--shadow-color);
  --lifted-shadow: 0 3px 9px var(--shadow-color);
```

--------------------------------

### Styling for Tooltip Components

Source: https://www.impots.gouv.fr/documentation/index

This CSS styles tooltip components in the France Design System, defining their outline, background, and padding for placed tooltips.

```css
.fr-tooltip {
  outline: 1px solid;
  background: canvas;
}

.fr-tooltip.fr-placement {
  padding: 0.5rem;
}
```

--------------------------------

### Card Detail and Description Font Styling

Source: https://www.impots.gouv.fr/documentation/index

Sets the font size and line height for card detail and description elements for consistent readability.

```css
.fr-card__detail,
  .fr-card__desc {
    font-size: 1rem;
    line-height: 1.5rem;
  }
```

--------------------------------

### Styling for Success Badges

Source: https://www.impots.gouv.fr/documentation/index

Configures the appearance of success badges with specific text and background colors, and sets variables for idle, hover, and active visual states.

```css
.fr-badge--success {
  color: var(--text-default-success);
  background-color: var(--background-contrast-success);

  --idle: transparent;
  --hover: var(--background-contrast-success-hover);
  --active: var(--background-contrast-success-active);
}
```

--------------------------------

### CSS: Styling Labels and Hints for Form Elements

Source: https://www.impots.gouv.fr/documentation/index

Defines styles for labels, hint texts, and messages associated with various form elements like uploads, selects, inputs, ranges, and fieldsets. It specifies color variables for default, disabled, error, success, and info states.

```css
.fr-upload-group--info label {
  color: var(--text-default-info);
}

.fr-select-group--disabled label,
.fr-select-group--disabled .fr-hint-text,
.fr-input-group--disabled label,
.fr-input-group--disabled .fr-hint-text,
.fr-range-group--disabled label,
.fr-range-group--disabled .fr-hint-text,
.fr-upload-group--disabled label,
.fr-upload-group--disabled .fr-hint-text {
  color: var(--text-disabled-grey);
}

.fr-label--error {
  color: var(--text-default-error);
}

.fr-label--success {
  color: var(--text-default-success);
}

.fr-label--info {
  color: var(--text-default-info);
}

.fr-label--disabled,
.fr-label--disabled .fr-hint-text {
  color: var(--text-disabled-grey);
}

.fr-hint-text,
.fr-message {
  color: var(--text-mention-grey);
}

.fr-message--error {
  color: var(--text-default-error);
}

.fr-message--valid {
  color: var(--text-default-success);
}

.fr-message--info {
  color: var(--text-default-info);
}
```

--------------------------------

### CSS: Apply padding on medium screens with fr-p-md-*

Source: https://www.impots.gouv.fr/documentation/index

These classes are used to apply padding to elements on medium screens and larger. They cover a range of padding values from 0 to 7rem. The 'fr' prefix indicates framework usage.

```css
.fr-p-md-17v {
    padding: 4.25rem !important;
  }

  .fr-p-md-18v,
  .fr-p-md-9w {
    padding: 4.5rem !important;
  }

  .fr-p-md-19v {
    padding: 4.75rem !important;
  }

  .fr-p-md-20v,
  .fr-p-md-10w {
    padding: 5rem !important;
  }

  .fr-p-md-21v {
    padding: 5.25rem !important;
  }

  .fr-p-md-22v,
  .fr-p-md-11w {
    padding: 5.5rem !important;
  }

  .fr-p-md-23v {
    padding: 5.75rem !important;
  }

  .fr-p-md-24v,
  .fr-p-md-12w {
    padding: 6rem !important;
  }

  .fr-p-md-25v {
    padding: 6.25rem !important;
  }

  .fr-p-md-26v,
  .fr-p-md-13w {
    padding: 6.5rem !important;
  }

  .fr-p-md-27v {
    padding: 6.75rem !important;
  }

  .fr-p-md-28v,
  .fr-p-md-14w {
    padding: 7rem !important;
  }
```

--------------------------------

### Styling for Warning Badges

Source: https://www.impots.gouv.fr/documentation/index

Establishes the styles for warning badges, specifying text and background colors and defining variables for interactive states (hover, active).

```css
.fr-badge--warning {
  color: var(--text-default-warning);
  background-color: var(--background-contrast-warning);

  --idle: transparent;
  --hover: var(--background-contrast-warning-hover);
  --active: var(--background-contrast-warning-active);
}
```

--------------------------------

### Styling for Blue Cumulus Badges

Source: https://www.impots.gouv.fr/documentation/index

Configures 'blue-cumulus' badges with specific text and background colors, and sets variables for their idle, hover, and active visual states.

```css
.fr-badge--blue-cumulus {
  color: var(--text-label-blue-cumulus);
  background-color: var(--background-contrast-blue-cumulus);

  --idle: transparent;
  --hover: var(--background-contrast-blue-cumulus-hover);
  --active: var(--background-contrast-blue-cumulus-active);
}
```

--------------------------------

### Responsive Grid Columns and Offsets (CSS)

Source: https://www.impots.gouv.fr/documentation/index

These CSS rules define flexible grid columns and their corresponding offsets for various screen sizes, particularly targeting the 'xl' breakpoint. They utilize the `calc()` function to ensure proportional spacing based on a 12-column grid system.

```css
.fr-col-xl-9:not(.fr-col-offset-xl-9--right) {
    margin-left: calc(900% / 12);
  }

  .fr-col-offset-xl-9--right {
    margin-right: calc(900% / 12);
  }

  .fr-col-xl-10 {
    flex: 0 0 calc(1000% / 12);
    width: calc(1000% / 12);
    max-width: calc(1000% / 12);
  }

  .fr-col-offset-xl-10:not(.fr-col-offset-xl-10--right) {
    margin-left: calc(1000% / 12);
  }

  .fr-col-offset-xl-10--right {
    margin-right: calc(1000% / 12);
  }

  .fr-col-xl-11 {
    flex: 0 0 calc(1100% / 12);
    width: calc(1100% / 12);
    max-width: calc(1100% / 12);
  }

  .fr-col-offset-xl-11:not(.fr-col-offset-xl-11--right) {
    margin-left: calc(1100% / 12);
  }

  .fr-col-offset-xl-11--right {
    margin-right: calc(1100% / 12);
  }

  .fr-col-xl-12 {
    flex: 0 0 calc(1200% / 12);
    width: calc(1200% / 12);
    max-width: calc(1200% / 12);
  }

  .fr-col-offset-xl-12:not(.fr-col-offset-xl-12--right) {
    margin-left: calc(1200% / 12);
  }

  .fr-col-offset-xl-12--right {
    margin-right: calc(1200% / 12);
  }
```

--------------------------------

### Download Card Styles (fr-card--download) - CSS

Source: https://www.impots.gouv.fr/documentation/index

Styles for download-specific cards, including aspect ratio for the header and positioning/sizing of the embedded image. It also defines the appearance and behavior of the download icon using SVG masks.

```css
.fr-card--download .fr-card__header {
  aspect-ratio: 16/9;
}

.fr-card--download .fr-card__header .fr-card__img {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  width: calc(100% - 1rem);
  height: calc(100% - 1rem);
}

.fr-card--download .fr-card__header .fr-card__img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.fr-card--download .fr-card__title a::after,
.fr-card--download .fr-card__title button::after {
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
  background-color: currentColor;
  width: var(--icon-size);
  height: var(--icon-size);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-image: url("icons/system/download-line.svg");
  mask-image: url("icons/system/download-line.svg");
  content: "";
}
```

--------------------------------

### CSS: Apply bottom padding on medium screens with fr-pb-md-*

Source: https://www.impots.gouv.fr/documentation/index

These classes are used to apply bottom padding to elements on medium screens and larger. They include classes for specific bottom padding values and shorthand for vertical padding.

```css
.fr-pb-md-17v,
  .fr-py-md-17v {
    padding-bottom: 4.25rem !important;
  }

  .fr-pb-md-18v,
  .fr-pb-md-9w,
  .fr-py-md-18v,
  .fr-py-md-9w {
    padding-bottom: 4.5rem !important;
  }

  .fr-pb-md-19v,
  .fr-py-md-19v {
    padding-bottom: 4.75rem !important;
  }

  .fr-pb-md-20v,
  .fr-pb-md-10w,
  .fr-py-md-20v,
  .fr-py-md-10w {
    padding-bottom: 5rem !important;
  }

  .fr-pb-md-21v,
  .fr-py-md-21v {
    padding-bottom: 5.25rem !important;
  }

  .fr-pb-md-22v,
  .fr-pb-md-11w,
  .fr-py-md-22v,
  .fr-py-md-11w {
    padding-bottom: 5.5rem !important;
  }

  .fr-pb-md-23v,
  .fr-py-md-23v {
    padding-bottom: 5.75rem !important;
  }

  .fr-pb-md-24v,
  .fr-pb-md-12w,
  .fr-py-md-24v,
  .fr-py-md-12w {
    padding-bottom: 6rem !important;
  }

  .fr-pb-md-25v,
  .fr-py-md-25v {
    padding-bottom: 6.25rem !important;
  }

  .fr-pb-md-26v,
  .fr-pb-md-13w,
  .fr-py-md-26v,
  .fr-py-md-13w {
    padding-bottom: 6.5rem !important;
  }

  .fr-pb-md-27v,
  .fr-py-md-27v {
    padding-bottom: 6.75rem !important;
  }

  .fr-pb-md-28v,
  .fr-pb-md-14w,
  .fr-py-md-28v,
  .fr-py-md-14w {
    padding-bottom: 7rem !important;
  }
```

--------------------------------

### Styling for Connection Components

Source: https://www.impots.gouv.fr/documentation/index

This CSS styles the connection component and its variations in the France Design System. It includes styling for borders, line heights, and specific pseudo-elements for the 'plus' variant. It also styles links within connection groups.

```css
.fr-connect {
  border: 1px solid;
}

.fr-connect__login,
.fr-connect__brand {
  line-height: 1.1;
}

.fr-connect--plus::after {
  forced-color-adjust: none;
  color: buttontext;
}

.fr-connect-group .fr-connect + p a {
  text-decoration: underline;
  text-underline-offset: 5px;
}
```

--------------------------------

### Styling for Green Tilleul Verveine Badges

Source: https://www.impots.gouv.fr/documentation/index

Defines styles for badges with a 'green-tilleul-verveine' theme, setting text and background colors and hover/active states using CSS variables.

```css
.fr-badge--green-tilleul-verveine {
  color: var(--text-label-green-tilleul-verveine);
  background-color: var(--background-contrast-green-tilleul-verveine);

  --idle: transparent;
  --hover: var(--background-contrast-green-tilleul-verveine-hover);
  --active: var(--background-contrast-green-tilleul-verveine-active);
}
```

--------------------------------

### Styling for Green Menthe Badges

Source: https://www.impots.gouv.fr/documentation/index

Sets the text and background colors for 'green-menthe' badges, along with variables to manage their idle, hover, and active visual states.

```css
.fr-badge--green-menthe {
  color: var(--text-label-green-menthe);
  background-color: var(--background-contrast-green-menthe);

  --idle: transparent;
  --hover: var(--background-contrast-green-menthe-hover);
  --active: var(--background-contrast-green-menthe-active);
}
```

--------------------------------

### Card Styling (Grey and Shadow Variants)

Source: https://www.impots.gouv.fr/documentation/index

Defines background colors for grey cards and cards with shadows, including a combined style for grey cards with shadows.

```css
.fr-card--grey {
    background-color: #eee;
  }

  .fr-card--shadow {
    background-color: #fff;
  }

  .fr-card--shadow.fr-card--grey {
    background-color: #eee;
  }
```

--------------------------------

### Card Styling (Default and No Border)

Source: https://www.impots.gouv.fr/documentation/index

Sets the default background color for cards and applies a specific background image for cards that do not have the 'no-border' or 'shadow' class.

```css
.fr-card {
    background-color: #fff;
  }

  .fr-card:not(.fr-card--no-border):not(.fr-card--shadow) {
    background-image: linear-gradient(0deg, #ddd, #ddd), linear-gradient(0deg, #ddd, #ddd), linear-gradient(0deg, #ddd, #ddd), linear-gradient(0deg, #ddd, #ddd);
  }
```

--------------------------------

### Styling for New Badges

Source: https://www.impots.gouv.fr/documentation/index

Applies distinct text and background colors for 'new' badges, using specific variables for their idle, hover, and active states, including a yellow-moutarde theme.

```css
.fr-badge--new {
  color: var(--text-action-high-yellow-moutarde);
  background-color: var(--background-contrast-yellow-moutarde);

  --idle: transparent;
  --hover: var(--background-contrast-yellow-moutarde-hover);
  --active: var(--background-contrast-yellow-moutarde-active);
}
```

--------------------------------

### Small Card Styles (fr-card--sm) - CSS

Source: https://www.impots.gouv.fr/documentation/index

Defines styles for small card components, including font sizes, line heights, padding, and icon sizes. It also handles specific styles for badges, tags, titles, descriptions, and footer elements within small cards, including responsive adjustments for enlarged links/buttons.

```css
.fr-card--sm .fr-card__content .fr-badge::before,
.fr-card--sm .fr-card__content .fr-badge::after {
  --icon-size: 0.75rem;
}

.fr-card--sm .fr-card__content .fr-tag {
  font-size: 0.75rem;
  line-height: 1.25rem;
  min-height: 1.5rem;
  padding: 0.125rem 0.5rem;
  border-radius: 0.75rem;
}

.fr-card--sm .fr-card__content .fr-tag::before,
.fr-card--sm .fr-card__content .fr-tag::after {
  --icon-size: 0.75rem;
}

.fr-card--sm .fr-card__title {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.5rem;
}

.fr-card--sm .fr-card__title a::after,
.fr-card--sm .fr-card__title button::after {
  --icon-size: 1rem;
}

.fr-card--sm .fr-card__desc {
  margin-top: 0.5rem;
}

.fr-card--sm .fr-card__start .fr-badges-group,
.fr-card--sm .fr-card__start .fr-tags-group {
  margin-bottom: 0;
}

.fr-card--sm .fr-card__start .fr-card__detail {
  margin-bottom: 0.5rem;
}

.fr-card--sm .fr-card__end {
  margin-top: 0.75rem;
  padding-top: 0.25rem;
  margin-top: 1.5rem;
  padding-top: 0.5rem;
}

.fr-card--sm.fr-enlarge-link:not(.fr-card--no-icon) .fr-card__end,
.fr-card--sm.fr-enlarge-button:not(.fr-card--no-icon) .fr-card__end {
  margin-bottom: -2rem;
  min-height: 1.25rem;
  padding-right: 1.5rem;
}

.fr-card--sm.fr-enlarge-link:not(.fr-card--no-icon) .fr-card__content,
.fr-card--sm.fr-enlarge-button:not(.fr-card--no-icon) .fr-card__content {
  padding-bottom: 3.5rem;
}

.fr-card--sm.fr-enlarge-link:not(.fr-card--no-icon) .fr-card__title a::after,
.fr-card--sm.fr-enlarge-link:not(.fr-card--no-icon) .fr-card__title button::after,
.fr-card--sm.fr-enlarge-button:not(.fr-card--no-icon) .fr-card__title a::after,
.fr-card--sm.fr-enlarge-button:not(.fr-card--no-icon) .fr-card__title button::after {
  --icon-size: 1rem;
  right: 1.5rem;
  bottom: 1.5rem;
}

.fr-card--sm .fr-card__footer {
  padding: 0.5rem 1.5rem 1.5rem;
}
```

--------------------------------

### Styling for Link Components

Source: https://www.impots.gouv.fr/documentation/index

This CSS styles various link components within the France Design System, including default links, disabled links, download links, and links within groups. It manages text decoration, pseudo-elements, and associated details.

```css
a.fr-link {
  text-decoration: underline;
  text-underline-offset: 5px;
}

a.fr-link:not([href])::before,
a.fr-link:not([href])::after {
  background-color: graytext;
}

.fr-links-group--download .fr-link::after,
.fr-link--download::after {
  forced-color-adjust: none;
  background-color: linktext;
}

.fr-links-group--download .fr-link .fr-link__detail,
.fr-link--download .fr-link__detail {
  color: canvastext;
}

.fr-links-group--download .fr-link:not([href]) .fr-link__detail,
.fr-link--download:not([href]) .fr-link__detail {
  color: graytext;
}

.fr-link--close::after {
  forced-color-adjust: none;
  background-color: buttontext;
}
```

--------------------------------

### Define Info Colors

Source: https://www.impots.gouv.fr/documentation/index

Defines CSS variables for the 'Info' color palette, including shades, hover, and active states. These are likely used for notifications, messages, or informational UI components.

```css
--info-950-100: #1d2437;
--info-950-100-hover: #3b4767;
--info-950-100-active: #4c5b83;
--info-425-625: #518fff;
--info-425-625-hover: #98b4ff;
--info-425-625-active: #b4c7ff;
--info-975-75: #171d2e;
```

--------------------------------

### FR Button with Account Icon (CSS)

Source: https://www.impots.gouv.fr/documentation/index

Defines styles for a button with an account icon, using CSS mask properties for icon display. Supports custom icon sizes via CSS variables.

```css
.fr-btn--account {
  font-size: 0.875rem;
  line-height: 1.5rem;
  min-height: 2rem;
  padding: 0.25rem 0.75rem;
  overflow: initial;
  max-width: 100%;
  max-height: none;
}

.fr-btn--account::before {
  --icon-size: 1rem;
  margin-left: -0.125rem;
  margin-right: 0.5rem;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
  background-color: currentColor;
  width: var(--icon-size);
  height: var(--icon-size);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-image: url("icons/user/account-circle-fill.svg");
  mask-image: url("icons/user/account-circle-fill.svg");
  content: "";
}
```

--------------------------------

### Styling for Blue Ecume Badges

Source: https://www.impots.gouv.fr/documentation/index

Applies styles for 'blue-ecume' badges, setting text and background colors and defining variables for their interactive states.

```css
.fr-badge--blue-ecume {
  color: var(--text-label-blue-ecume);
  background-color: var(--background-contrast-blue-ecume);

  --idle: transparent;
  --hover: var(--background-contrast-blue-ecume-hover);
  --active: var(--background-contrast-blue-ecume-active);
}
```

--------------------------------

### CSS: Apply top padding on medium screens with fr-pt-md-*

Source: https://www.impots.gouv.fr/documentation/index

These classes are used to apply top padding to elements on medium screens and larger. They include classes for specific top padding values and shorthand for vertical padding.

```css
.fr-pt-md-18v,
  .fr-pt-md-9w,
  .fr-py-md-18v,
  .fr-py-md-9w {
    padding-top: 4.5rem !important;
  }

  .fr-pt-md-19v,
  .fr-py-md-19v {
    padding-top: 4.75rem !important;
  }

  .fr-pt-md-20v,
  .fr-pt-md-10w,
  .fr-py-md-20v,
  .fr-py-md-10w {
    padding-top: 5rem !important;
  }

  .fr-pt-md-21v,
  .fr-py-md-21v {
    padding-top: 5.25rem !important;
  }

  .fr-pt-md-22v,
  .fr-pt-md-11w,
  .fr-py-md-22v,
  .fr-py-md-11w {
    padding-top: 5.5rem !important;
  }

  .fr-pt-md-23v,
  .fr-py-md-23v {
    padding-top: 5.75rem !important;
  }

  .fr-pt-md-24v,
  .fr-pt-md-12w,
  .fr-py-md-24v,
  .fr-py-md-12w {
    padding-top: 6rem !important;
  }

  .fr-pt-md-25v,
  .fr-py-md-25v {
    padding-top: 6.25rem !important;
  }

  .fr-pt-md-26v,
  .fr-pt-md-13w,
  .fr-py-md-26v,
  .fr-py-md-13w {
    padding-top: 6.5rem !important;
  }

  .fr-pt-md-27v,
  .fr-py-md-27v {
    padding-top: 6.75rem !important;
  }

  .fr-pt-md-28v,
  .fr-pt-md-14w,
  .fr-py-md-28v,
  .fr-py-md-14w {
    padding-top: 7rem !important;
  }
```

--------------------------------

### CSS: Apply right padding on medium screens with fr-pr-md-*

Source: https://www.impots.gouv.fr/documentation/index

These classes are used to apply right padding to elements on medium screens and larger. They include classes for specific right padding values and shorthand for horizontal padding.

```css
.fr-pr-md-18v,
  .fr-pr-md-9w,
  .fr-px-md-18v,
  .fr-px-md-9w {
    padding-right: 4.5rem !important;
  }

  .fr-pr-md-19v,
  .fr-px-md-19v {
    padding-right: 4.75rem !important;
  }

  .fr-pr-md-20v,
  .fr-pr-md-10w,
  .fr-px-md-20v,
  .fr-px-md-10w {
    padding-right: 5rem !important;
  }

  .fr-pr-md-21v,
  .fr-px-md-21v {
    padding-right: 5.25rem !important;
  }

  .fr-pr-md-22v,
  .fr-pr-md-11w,
  .fr-px-md-22v,
  .fr-px-md-11w {
    padding-right: 5.5rem !important;
  }

  .fr-pr-md-23v,
  .fr-px-md-23v {
    padding-right: 5.75rem !important;
  }

  .fr-pr-md-24v,
  .fr-pr-md-12w,
  .fr-px-md-24v,
  .fr-px-md-12w {
    padding-right: 6rem !important;
  }

  .fr-pr-md-25v,
  .fr-px-md-25v {
    padding-right: 6.25rem !important;
  }

  .fr-pr-md-26v,
  .fr-pr-md-13w,
  .fr-px-md-26v,
  .fr-px-md-13w {
    padding-right: 6.5rem !important;
  }

  .fr-pr-md-27v,
  .fr-px-md-27v {
    padding-right: 6.75rem !important;
  }

  .fr-pr-md-28v,
  .fr-pr-md-14w,
  .fr-px-md-28v,
  .fr-px-md-14w {
    padding-right: 7rem !important;
  }
```

--------------------------------

### FR Button with Briefcase Icon (CSS)

Source: https://www.impots.gouv.fr/documentation/index

Implements styling for a button displaying a briefcase icon, employing CSS masks for icon rendering. Icon size can be adjusted using CSS variables.

```css
.fr-btn--briefcase {
  font-size: 0.875rem;
  line-height: 1.5rem;
  min-height: 2rem;
  padding: 0.25rem 0.75rem;
  overflow: initial;
  max-width: 100%;
  max-height: none;
}

.fr-btn--briefcase::before {
  --icon-size: 1rem;
  margin-left: -0.125rem;
  margin-right: 0.5rem;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
  background-color: currentColor;
  width: var(--icon-size);
  height: var(--icon-size);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-image: url("icons/business/briefcase-fill.svg");
  mask-image: url("icons/business/briefcase-fill.svg");
  content: "";
}
```

--------------------------------

### CSS Styling for Link Focus States

Source: https://www.impots.gouv.fr/documentation/index

Defines consistent focus outlines for various interactive elements, including links, buttons, inputs, and more, using a solid blue outline for accessibility.

```css
a:focus,
button:focus,
input:focus,
input[type=checkbox]:focus + label::before,
input[type=radio]:focus + label::before,
input[type=button]:focus,
input[type=image]:focus,
input[type=reset]:focus,
input[type=submit]:focus,
select:focus,
textarea:focus,
[tabindex]:focus,
video:focus[controls],
audio:focus[controls],
[contenteditable]:not([contenteditable=false]):focus,
details:focus,
details > summary:first-of-type:focus {
  outline-offset: 2px;
  outline-width: 2px;
  outline-color: #0a76f6;
  outline-style: solid;
```

--------------------------------

### Styling for Green Archipel Badges

Source: https://www.impots.gouv.fr/documentation/index

Defines the styling for 'green-archipel' badges, including text and background colors, and variables for controlling hover and active appearances.

```css
.fr-badge--green-archipel {
  color: var(--text-label-green-archipel);
  background-color: var(--background-contrast-green-archipel);

  --idle: transparent;
  --hover: var(--background-contrast-green-archipel-hover);
  --active: var(--background-contrast-green-archipel-active);
}
```

--------------------------------

### Styling for Purple Glycine Badges

Source: https://www.impots.gouv.fr/documentation/index

Defines the styles for 'purple-glycine' badges, including text and background colors, and variables for managing hover and active appearances.

```css
.fr-badge--purple-glycine {
  color: var(--text-label-purple-glycine);
  background-color: var(--background-contrast-purple-glycine);

  --idle: transparent;
  --hover: var(--background-contrast-purple-glycine-hover);
  --active: var(--background-contrast-purple-glycine-active);
}
```

--------------------------------

### CSS Color Variables for Impots.gouv.fr

Source: https://www.impots.gouv.fr/documentation/index

Defines a comprehensive set of CSS custom properties (variables) for various color shades, including base colors, hover states, and active states, across different named color palettes like 'orange-terre-battue', 'brown-cafe-creme', 'brown-caramel', 'brown-opera', and 'beige-gris-galet'.

```css
--orange-terre-battue-950-100: #fee9e5;
  --orange-terre-battue-950-100-hover: #fdc6ba;
  --orange-terre-battue-950-100-active: #fcb09e;
  --orange-terre-battue-sun-370-moon-672: #755348;
  --orange-terre-battue-sun-370-moon-672-hover: #ab7b6b;
  --orange-terre-battue-sun-370-moon-672-active: #c68f7d;
  --orange-terre-battue-925-125: #fddfd8;
  --orange-terre-battue-925-125-hover: #fbb8a5;
  --orange-terre-terre-battue-925-125-active: #faa184;
  --orange-terre-battue-main-645: #e4794a;
  --orange-terre-battue-850-200: #fcc0b0;
  --brown-cafe-creme-975-75: #fbf6ed;
  --brown-cafe-creme-975-75-hover: #f2deb6;
  --brown-cafe-creme-975-75-active: #eacf91;
  --brown-cafe-creme-950-100: #f7ecdb;
  --brown-cafe-creme-950-100-hover: #edce94;
  --brown-cafe-creme-950-100-active: #dabd84;
  --brown-cafe-creme-sun-383-moon-885: #685c48;
  --brown-cafe-creme-sun-383-moon-885-hover: #97866a;
  --brown-cafe-creme-sun-383-moon-885-active: #ae9b7b;
  --brown-cafe-creme-925-125: #f4e3c7;
  --brown-cafe-creme-925-125-hover: #e1c386;
  --brown-cafe-creme-925-125-active: #ccb078;
  --brown-cafe-creme-main-782: #d1b781;
  --brown-cafe-creme-850-200: #e7ca8e;
  --brown-caramel-975-75: #fbf5f2;
  --brown-caramel-975-75-hover: #f1dbcf;
  --brown-caramel-975-75-active: #ecc9b5;
  --brown-caramel-950-100: #f7ebe5;
  --brown-caramel-950-100-hover: #eccbb9;
  --brown-caramel-950-100-active: #e6b79a;
  --brown-caramel-sun-425-moon-901: #845d48;
  --brown-caramel-sun-425-moon-901-hover: #bb8568;
  --brown-caramel-sun-425-moon-901-active: #d69978;
  --brown-caramel-925-125: #f3e2d9;
  --brown-caramel-925-125-hover: #e7bea6;
  --brown-caramel-925-125-active: #e1a982;
  --brown-caramel-main-648: #c08c65;
  --brown-caramel-850-200: #eac7b2;
  --brown-opera-975-75: #fbf5f2;
  --brown-opera-975-75-hover: #f1dbcf;
  --brown-opera-975-75-active: #ecc9b5;
  --brown-opera-950-100: #f7ece4;
  --brown-opera-950-100-hover: #eccdb3;
  --brown-opera-950-100-active: #e6ba90;
  --brown-opera-sun-395-moon-820: #745b47;
  --brown-opera-sun-395-moon-820-hover: #a78468;
  --brown-opera-sun-395-moon-820-active: #c09979;
  --brown-opera-925-125: #f3e2d7;
  --brown-opera-925-125-hover: #e7bfa0;
  --brown-opera-925-125-active: #deaa7e;
  --brown-opera-main-680: #bd987a;
  --brown-opera-850-200: #eac7ad;
  --beige-gris-galet-975-75: #f9f6f2;
  --beige-gris-galet-975-75-hover: #eadecd;
  --beige-gris-galet-975-75-active: #e1ceb1;
  --beige-gris-galet-950-100: #f3ede5;
  --beige-gris-galet-950-100-hover: #e1d0b5;
  --beige-gris-galet-950-100-active: #d1bea2;
  --beige-gris-galet-sun-407-moon-821: #6a6156;
  --beige-gris-galet-sun-407-moon-821-hover: #988b7c;
  --beige-gris-galet-sun-407-moon-821-active: #afa08f;
  --beige-gris-galet-925-125: #eee4d9;
  --beige-gris-galet-925-125-hover: #dbc3a4;
  --beige-gris-galet-925-125-active: #c6b094;
  --beige-gris-galet-main-702: #aea397;
  --beige-gris-galet-850-200: #e0cab0;
```

--------------------------------

### Define Warning Colors

Source: https://www.impots.gouv.fr/documentation/index

Defines CSS variables for the 'Warning' color palette, including different shades and states. These are used to alert users to potential issues or cautionary information.

```css
--warning-950-100: #361e19;
--warning-950-100-hover: #663d35;
--warning-950-100-active: #824f44;
--warning-425-625: #fc5d00;
--warning-425-625-hover: #ff8c73;
--warning-425-625-active: #ffa595;
--warning-975-75: #2d1814;
```

--------------------------------

### Checkbox Styling (Before State)

Source: https://www.impots.gouv.fr/documentation/index

Defines the background image for the 'before' state of checkboxes, using radial and linear gradients with CSS variables for colors and a data URI for an SVG.

```css
.fr-checkbox-group input[type=checkbox] + label::before {
    background-image: radial-gradient(at 5px 4px, transparent 4px, var(--border-action-high-blue-france) 4px, var(--border-action-high-blue-france) 5px, transparent 6px), linear-gradient(var(--border-action-high-blue-france), var(--border-action-high-blue-france)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--border-action-high-blue-france) 4px, var(--border-action-high-blue-france) 5px, transparent 6px), linear-gradient(var(--border-action-high-blue-france), var(--border-action-high-blue-france)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--border-action-high-blue-france) 4px, var(--border-action-high-blue-france) 5px, transparent 6px), linear-gradient(var(--border-action-high-blue-france), var(--border-action-high-blue-france)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--border-action-high-blue-france) 4px, var(--border-action-high-blue-france) 5px, transparent 6px), linear-gradient(var(--border-action-high-blue-france), var(--border-action-high-blue-france)), var(--data-uri-svg);
  }
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.