html {
  scroll-behavior: smooth;
}
.bg-fizz-light-grey, .svg-fill-fizz-light-grey path {
  background-color: #f5f5fa !important;
  fill: #f5f5fa !important;
}
.bg-fizz-red, .svg-fill-fizz-red {
  background-color: #F05146 !important;
}
.bg-fizz-orange, .svg-fill-fizz-orange {
  background-color: #FFAE4D !important;
  color: #000 !important;
}
.container:has( .text-fullwidth:has( > h1 ) ), .container:has(.text-fullwidth):has(iframe) {
  max-width: unset;
}
.text-fullwidth:has(p[id] > span, > style:only-child, > script:only-child, .channels-catalog) {
  min-height: 0;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0;
}
.text-fullwidth:has( > h1 ), .text-fullwidth:not(:has(h1)):has([class*="-card"]) {
  flex: 100%;
  max-width: 100%;
}
p:last-child {
  margin-bottom: 0;
}
.small {
  font-size: 100%;
}
.hero * {
  z-index: 1!important;
}
.hero-transition-svg-container {
  //position: relative;
}
.paragraph--type--_0-50-hero-text:not(:has([class*="-card"])) .field--name-field-hero-image img:not([src*="svg"]) {
  //height: auto;
  //max-width: 600px;
  //max-height: fit-content;
}
.col-12:has([class*="field-wysiwyg"]:not([class*="top"]):not([class*="bottom"])):not(:has([class*="review"])) {
  display: flex;
  //align-items: center;
  justify-content: center;
}
.paragraph--type--_0-50-hero-text .field--name-field-hero-image img[src$=".svg"] {
  width: -webkit-fill-available;
  height: auto;
  max-width: 600px;
  max-height: 500px;
}
.text-50-text-50:has(img) .col-lg-5 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.text-50-text-50:not(:has(img)) .col-lg-5 {
  //padding: 0 !important;
  //margin-left: 0 !important;
}
.text-50-text-50:has(.stars) .row.w-100 {
  padding: 0 8px !important;
}
.field--name-field-image-small-spot img {
  max-height: 96px;
  width: auto;
}
h1 sup, .h1 sup {
  font-size: 50%; top: -0.75em;
}
.paragraph[class*="bg-"] a:not(.btn), .p-legalnotes a {
  color: inherit!important;
}
.dizz a.btn {
  text-decoration: none;
}
a.btn.btn-green, a.btn.btn-outline-dark, a.btn.btn-white {
    position: relative;
    z-index: 1;
}
h6.color-label {
  position: absolute;
  top: 0;
  margin: 0;
  padding: 4px 16px;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  border-top-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
h6.color-label {
  /*left: 0;*/
}
h6.preloved {
  /*background-color: #00AB61;*/
}
.tag {
    display: inline-block;
    top: 0;
    width: fit-content;
    z-index: 2 !important;
    padding: 0.5rem 1rem;
    border-radius: 6px;
}
.row .tag.corner.left {
	margin-left: 15px;
}
.row .tag.corner.right {
	margin-right: 15px;
}
.tag.corner.left {
    left: 0;
    border-radius: 16px 0px 16px 0px;
}
.tag.corner.right {
    right: 0;
    border-radius: 0px 16px 0px 16px;
}
.tag > span {
    font-family: "Roboto", sans-serif;
    font-size: .875rem;
    font-weight: 700;
}
.tag.small {
  padding: 4px 8px !important;
}
.tag.big span {
  font-size: 16px;
}
.card-bloc {
  border-radius: 16px;
  padding: 16px;
}
.dark-card {
    color: #fff !important;
    background-color: rgba(0, 0, 0, .3);
    border-radius: 16px;
    padding: 16px;
}
[class*="-card"]:not([class*="--"]):not(.paragraph--type--card, [class*="phone-card"], .card-deck, .no-card) {
  color: #000;
  border-radius: 16px;
  //padding: 16px;
  box-shadow: 0 0.063rem 0.25rem 0 rgba(25, 25, 25, 0.15);
  overflow: hidden;
}
[class*="-card"]:not([class*="--"]):not(.paragraph--type--card, [class*="phone-card"], .card-deck, .no-card) [class*="-card"]:not([class*="--"]):not(.paragraph--type--card, [class*="phone-card"], .card-deck, .no-card) {
  border-radius: 6px!important;
}
[class*="-card"]:not(.paragraph--type--card, [class*="phone-card"], .card-deck, .new) {
  padding: 16px;
}
[class*="-card"]:not([class*="--"]) > div[class*="text"]:not(:has([class*="hero-image"])) {
  /*padding-bottom: 16px !important;*/
}
.row:has( > .col-12:nth-child(2) .clearfix > svg, > .col-12:nth-child(2) .clearfix > p > img) .clearfix {
  height: auto;
}
.row .col-12.col-md-10.col-lg-4 > .clearfix.text-formatted:not(:has([class*="-card"])) > *:last-child:has(.btn, a.link-arrow) {
  margin-top: auto !important;
}
[class*="-card"]:not([class*="--"]):has(.align-self-end) {
  padding-bottom: 0;
}
[class*="-card"]:not([class*="--"]):has(.align-self-start) {
  padding-top: 0;
}
[class*="-card"]:not([class*="--"]) h3 {
  font-size: 1.75rem;
}
.cards-1 > [class*="-card"] {
  min-width: 600px;
  flex: 1;
}
.cards-2 > [class*="-card"] {
  min-width: 300px;
  flex: 1;
}
.cards-3 > [class*="-card"] {
  min-width: 270px;
  flex: 1;
}
.cards-4 > [class*="-card"] {
  min-width: 210px;
  flex: 1;
}
.cards-5 > [class*="-card"] {
  min-width: 170px;
  flex: 1;
}
.cards-6 > [class*="-card"] {
  min-width: 140px;
  flex: 1;
}
.white-card {
  background-color: #fff !important;
}
.grey-card, .gray-card {
  background-color: #F5F5FA;
}
.pink-card {
  background-color: #FFC6C6;
}
.beige-card {
  background-color: #f7f4f0;
}
.orange-card {
  background-color: #ffae4d;
}
.light-blue-card {
  background-color: #baeafa!important;
}
.yellow-card {
  background-color: #ffde1a;
}
.light-gray-card, .light-grey-card {
  background-color: #f5f5fa;
}
.black-card {
  background-color: #000!important;
  color: #fff !important;
}
.blue-card {
  background-color: #3259ed;
  color: #fff !important;
}
.dark-blue-card {
  background-color: #1A2C47;
  color: #fff !important;
}
.dark-green-card {
  background-color: #06473C;
  color: #fff !important;
}
.light-green-card {
	background-color: #DCFADE;
}
.mauve-card {
  background-color: #7f2374;
  color: #fff !important;
}
.purple-card {
  background-color: #560628;
  color: #fff !important;
}
.red-card {
  background-color: #f05146;
  color: #fff !important;
}
[class*="-wysiwyg-"]:has(> [class*="card"]) {
  height: 100%;
  width: 100%;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a, p a:not(.btn):not(.link-arrow) {
  text-decoration: underline;
}
.white-card h5 a {
  //text-decoration: none;
}
.small:has(> .field__item) {
  font-size: 100%;
}
.small.pb-50:has([class*="-card"]) {
  padding-bottom: 0px !important;
}
.bg-fizz-orange .accordion-item, .bg-fizz-red .accordion-item, .bg-fizz-light-grey .accordion-item, .bg-fizz-pink .accordion-item, .bg-fizz-light-blue .accordion-item {
  border-top: 1px solid #000;
}
@media screen and (min-width: 576px) {
  h1, .h1 {font-size: 3.28125rem;}
  h2, .h2 {font-size: 2.84375rem;} 
  h3, .h3, [class*="-card"]:not([class*="--"], [class*="phone-card"], .card-deck) h3 {font-size: 2.40625rem;}
  h4, .h4 {font-size: 1.53125rem;} 
  h5, .h5 {font-size: 1.203125rem;} 
  h6, .h6 {font-size: .984375rem;}
}
.divider-grey {
  border-top: solid 1px #707079;
}
.price {
  font-size: 32px;
  font-weight: 700;
  font-family: 'Bookmark';
  line-height: 24px;
}
.price.big {
  font-size: 40px;
  line-height: 36px;
}
.period {
  font-size: 16px;
  font-weight: 700;
  font-family: 'Bookmark';
  line-height: 13px;
}
















/* --- Styles de base pour les listes (UL) --- */
.key-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

/* --- Styles de base pour les éléments de liste (LI) --- */
.key-features li {
    position: relative; /* Nécessaire pour positionner l'icône de manière absolue */
    padding-left: 0; /* AUCUN espace par défaut pour l'icône */
    line-height: 1.5; /* Améliore la lisibilité du texte */
    flex-wrap: wrap; /* Permet au texte de passer à la ligne si l'espace est insuffisant */
}

.key-features.icon-black-check li,
.key-features.icon-green-circle-check li,
.key-features.icon-green-circle-number {
    padding-left: 30px;
}

/* Styles pour le contenu textuel de l'élément de liste */
.key-features li .list-item-content {
    flex-grow: 1; /* Permet au contenu textuel de prendre l'espace disponible */
}

/* --- Styles pour les icônes (pseudo-élément ::before) --- */
/* Propriétés génériques communes à toutes les icônes */
.key-features li::before {
    content: ''; /* Essentiel pour que le pseudo-élément soit visible */
    position: absolute;
    left: 0;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat; /* Empêche la répétition de l'icône */
    background-size: contain; /* S'assure que l'icône s'ajuste à la taille de son conteneur */
    background-position: center; /* Centre l'icône dans son espace */
    z-index: 1; /* Assure que l'icône est au-dessus du texte si nécessaire */

    /* ALIGNEMENT PAR DÉFAUT : AU CENTRE DU TEXTE */
    top: 50%;
    transform: translateY(-50%);
}

/* --- OPTIONS D'ALIGNEMENT VERTICAL DES ICÔNES --- */
/* Classe pour aligner l'icône avec la première ligne de texte */
.key-features.icon-align-top li::before {
    top: -2px; /* Ajustement pour aligner le haut de l'icône avec la première ligne de texte */
    transform: translateY(0); /* Supprime le décalage de centrage par défaut */
}
/* Ajustement spécifique pour le numéro dans le cercle lors de l'alignement en haut */
.key-features.icon-align-top li::after {
    top: 10px !important; /* Ajustement pour le numéro, forcé avec !important */
    transform: translateY(0); /* Supprime le décalage de centrage par défaut */
}

/* Classe pour aligner l'icône au centre du texte (comportement par défaut explicite) */
.key-features.icon-align-center li::before,
.key-features.icon-align-center li::after {
    top: 50%;
    transform: translateY(-50%);
}

/* --- AJUSTEMENTS SPÉCIFIQUES AUX TYPES D'ICÔNES ET LEUR ESPACEMENT --- */

/* Applique un padding-left pour créer l'espace de l'icône quand une classe d'icône est présente sur le LI ou l'UL */
.key-features li.icon-black-check,
.key-features.icon-black-check li,
.key-features li.icon-white-check,
.key-features.icon-white-check li,
.key-features li.icon-green-circle-check,
.key-features.icon-green-circle-check li,
.key-features li.icon-green-circle-number,
.key-features.icon-green-circle-number li,
.key-features li.icon-users,
.key-features.icon-users li,
.key-features li.icon-computer,
.key-features.icon-computer li,
.key-features li.icon-streaming,
.key-features.icon-streaming li,
.key-features li.icon-gaming,
.key-features.icon-gaming li,
.key-features li.icon-home,
.key-features.icon-home li {
    padding-left: 35px; /* Espace pour l'icône */
}

/* Ajustement de l'espacement entre les éléments de la liste (gap) selon le type d'icône */
/* Note: L'utilisation de !important peut créer des conflits si combinée avec les styles de gap de disposition. */
.key-features.icon-black-check,
.key-features.icon-white-check {
    gap: 5px !important; /* Réduit l'espacement pour les icônes de coche simples */
}
.key-features.icon-green-circle-check,
.key-features.icon-green-circle-number {
    gap: 10px !important; /* Augmente l'espacement pour les icônes de cercle */
}
/* Ajustements pour les nouvelles icônes appliquées aux LI ou UL */
.key-features.icon-users, .key-features .icon-users,
.key-features.icon-computer, .key-features .icon-computer,
.key-features.icon-streaming, .key-features .icon-streaming,
.key-features.icon-gaming, .key-features .icon-gaming,
.key-features.icon-home, .key-features .icon-home {
    gap: 8px !important; /* Exemple d'espacement pour ces icônes */
}


/* --- DÉFINITION DES ICÔNES SPÉCIFIQUES (IMAGES SVG ENCODÉES) --- */

/* Icône : Coche noire */
.key-features.icon-black-check li::before,
.key-features li.icon-black-check::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%23191919' fill-rule='evenodd' d='M4.70711 12.2929c-.39053-.3905-1.02369-.3905-1.41422 0-.39052.3905-.39052 1.0237 0 1.4142l5 5c.39053.3905 1.02369.3905 1.41422 0L20.7071 7.70711c.3905-.39053.3905-1.02369 0-1.41422-.3905-.39052-1.0237-.39052-1.4142 0L9 16.5858l-4.29289-4.2929Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* Icône : Coche blanche (le SVG fourni est identique à la coche noire, à modifier si la couleur doit changer) */
.key-features.icon-white-check li::before,
.key-features li.icon-white-check::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%23191919' fill-rule='evenodd' d='M4.70711 12.2929c-.39053-.3905-1.02369-.3905-1.41422 0-.39052.3905-.39052 1.0237 0 1.4142l5 5c.39053.3905 1.02369.3905 1.41422 0L20.7071 7.70711c.3905-.39053.3905-1.02369 0-1.41422-.3905-.39052-1.0237-.39052-1.4142 0L9 16.5858l-4.29289-4.2929Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* Icône : Cercle vert avec coche noire */
.key-features.icon-green-circle-check li::before,
.key-features li.icon-green-circle-check::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2300D672'/%3E%3Cpath fill='%23191919' fill-rule='evenodd' d='M7.138 12.195a.667.667 0 1 0-.943.943l3.334 3.333c.26.26.682.26.942 0l7.334-7.333a.667.667 0 1 0-.943-.943L10 15.057l-2.862-2.862Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* --- STYLES POUR LES LISTES NUMÉROTÉES AVEC CERCLE VERT (COMPTEURS CSS) --- */

/* 1. Initialise le compteur sur l'élément UL parent */
.key-features.icon-green-circle-number {
    counter-reset: list-item-counter; /* Nom du compteur */
}

/* 2. Affiche le cercle SVG (vide) via le pseudo-élément ::before */
.key-features.icon-green-circle-number li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2300D672'/%3E%3C/svg%3E");
}

/* 3. Incrémente et affiche le numéro via le pseudo-élément ::after */
.key-features.icon-green-circle-number li::after {
    content: counter(list-item-counter); /* Affiche la valeur du compteur */
    counter-increment: list-item-counter; /* Incrémente le compteur pour chaque LI */
    position: absolute;
    left: 0.5px; /* Ajustement fin pour aligner le numéro dans le cercle */
    width: 24px; /* Même taille que le cercle pour le centrage */
    height: 24px;
    text-align: center; /* Centre le numéro horizontalement */
    color: #191919; /* Couleur du numéro (noir) */
    font-size: 13px; /* Taille du numéro, ajustez au besoin */
    font-weight: bold; /* Pour le rendre bien visible */
    line-height: 24px; /* Aide au centrage vertical du texte dans sa boîte */
    z-index: 2; /* S'assure que le numéro est au-dessus du cercle */

    /* ALIGNEMENT PAR DÉFAUT : AU CENTRE DU CERCLE (peut être surchargé par les classes d'alignement) */
    top: 50%;
    transform: translate(0, -50%); /* Centrage vertical du numéro par rapport à son propre centre */
}

/* --- NOUVELLES ICÔNES (APPLIQUÉES DIRECTEMENT AUX LI OU UL) --- */
/* Icône : Users (Personnes) */
.key-features li.icon-users::before,
.key-features.icon-users li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 25 20'%3E%3Cpath fill='%23707079' fill-rule='evenodd' d='M9.40002 10c-2.76142 0-5-2.23858-5-5s2.23858-5 5-5C12.1614 0 14.4 2.23858 14.4 5s-2.2386 5-4.99998 5ZM18.4 19v-2c0-2.7614-2.2386-5-5-5H5.40002C2.6386 12 .400024 14.2386.400024 17v2c0 .5523.447716 1 .999996 1 .55229 0 1-.4477 1-1v-2c0-1.6569 1.34315-3 3-3H13.4c1.6569 0 3 1.3431 3 3v2c0 .5523.4477 1 1 1s1-.4477 1-1Zm6-2v2c0 .5523-.4477 1-1 1s-1-.4477-1-1v-1.9993c-.001-1.3671-.9262-2.5607-2.25-2.9025-.5347-.138-.8563-.6835-.7182-1.2182.138-.5347.6835-.8563 1.2182-.7182 2.2063.5696 3.7483 2.5589 3.75 4.8382ZM16.152 2.09875c1.3274.33988 2.2559 1.53599 2.2559 2.90625s-.9285 2.56637-2.2559 2.90625c-.535.13699-.8577.68176-.7207 1.21679.137.53502.6817.8577 1.2168.72071 2.2124-.56646 3.7598-2.55999 3.7598-4.84375S18.8605.727712 16.6481.16125c-.5351-.1369882-1.0798.185685-1.2168.720711-.137.535029.1857 1.079799.7207 1.216789ZM12.4 5c0 1.65685-1.3431 3-2.99998 3-1.65685 0-3-1.34315-3-3s1.34315-3 3-3C11.0569 2 12.4 3.34315 12.4 5Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* Icône : Ordinateur */
.key-features li.icon-computer::before,
.key-features.icon-computer li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 25 16'%3E%3Cpath fill='%23707079' fill-rule='evenodd' d='M2.60007 12.8095c0 .2892.21405.5238.47779.5238H.321891c-.035488 0-.069004.0176-.09217.0479-.023166.03-.033516.0704-.028341.1102C.20483 13.5164.56316 16 3.34428 16H21.056c2.7742 0 3.1374-2.4717 3.1428-2.5084l.0001-.0002c.0049-.0398-.0055-.0802-.0284-.1102-.0229-.0301-.0567-.0479-.0921-.0479h-2.7561c.2637 0 .4778-.2346.4778-.5238V.523841C21.8001.234681 21.586 0 21.3223 0H3.07786c-.26374 0-.47779.234681-.47779.523841V12.8095ZM4.27234 1.83344H20.1278v9.66646H4.27234V1.83344ZM13.7001 15.3333h-3v-.6666h3v.6666Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* Icône : Streaming */
.key-features li.icon-streaming::before,
.key-features.icon-streaming li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath stroke='%23707079' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 7H4c-1.10457 0-2 .89543-2 2v11c0 1.1046.89543 2 2 2h16c1.1046 0 2-.8954 2-2V9c0-1.10457-.8954-2-2-2Zm-3-5-5 5-5-5'/%3E%3C/svg%3E");
}

/* Icône : Gaming */
.key-features li.icon-gaming::before,
.key-features.icon-gaming li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 25 24'%3E%3Cpath stroke='%23707079' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3.80005 18v-6c0-2.38695.94821-4.67613 2.63604-6.36396C8.12391 3.94821 10.4131 3 12.8 3c2.387 0 4.6762.94821 6.364 2.63604C20.8518 7.32387 21.8 9.61305 21.8 12v6'/%3E%3Cpath stroke='%23707079' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21.8 19c0 .5304-.2107 1.0391-.5857 1.4142-.3751.3751-.8838.5858-1.4143.5858h-1c-.5304 0-1.0391-.2107-1.4142-.5858-.375-.3751-.5858-.8838-.5858-1.4142v-3c0-.5304.2108-1.0391.5858-1.4142.3751-.3751.8838-.5858 1.4142-.5858h3v5ZM3.80005 19c0 .5304.21071 1.0391.58579 1.4142.37507.3751.88378.5858 1.41421.5858h1c.53043 0 1.03914-.2107 1.41421-.5858.37508-.3751.58579-.8838.58579-1.4142v-3c0-.5304-.21071-1.0391-.58579-1.4142C7.83919 14.2107 7.33048 14 6.80005 14h-3v5Z'/%3E%3C/svg%3E");
}

/* Icône : Home */
.key-features li.icon-home::before,
.key-features.icon-home li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 21 22'%3E%3Cpath fill='%23707079' d='M3.60004 22C1.94318 22 .600037 20.6569.600037 19V8c0-.30859.142472-.5999.386059-.78935L9.9861.210648c.3611-.2808639.8668-.2808639 1.2279 0l9 7.000002c.2436.18945.386.48076.386.78935v11c0 1.6569-1.3431 3-3 3H3.60004ZM10.6 2.26686 2.60004 8.48908V19c0 .5523.44771 1 1 1h3v-9c0-.5128.38604-.9355.88338-.9933L7.60004 10H13.6c.5523 0 1 .4477 1 1v9h3c.5523 0 1-.4477 1-1V8.48908l-8-6.22222ZM12.6 12H8.60004v8H12.6v-8Z'/%3E%3C/svg%3E");
}

/* --- OPTIONS DE PRÉSENTATION (à appliquer à la balise <ul>) --- */

/* Liste Verticale (Comportement par défaut des éléments de type bloc) */
.key-features.list-vertical {
    display: block;
}

/* Liste Horizontale (Flexbox) */
.key-features.list-horizontal {
    display: flex; /* Active Flexbox pour une disposition horizontale */
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne si l'espace est insuffisant */
    gap: 20px; /* Espacement entre les éléments */
    margin-bottom: 0; /* Pas de marge en bas si les éléments sont serrés */
    padding-bottom: 10px; /* Un peu de padding si les éléments wrappent */
}
.key-features.list-horizontal li {
    margin-bottom: 0; /* Supprime la marge verticale par défaut */
    padding-bottom: 5px; /* Un peu d'espace si le texte wrappe */
    flex-shrink: 0; /* Empêche les éléments de rétrécir trop */
    /* flex: 1 1 auto; /* Optionnel: pour que les éléments prennent de la place égale */
}

/* Listes sur X Colonnes (CSS Grid) */
.key-features.list-columns {
    display: grid; /* Active CSS Grid pour une disposition en colonnes */
    gap: 20px; /* Espacement entre les colonnes et les lignes */
    margin-bottom: 0;
}
.key-features.list-columns li {
    margin-bottom: 0; /* Supprime la marge verticale des éléments de liste */
}
/* 1 colonne */
.key-features.list-col-1 {
    grid-template-columns: 1fr; /* Une seule colonne */
}
/* 2 colonnes */
.key-features.list-col-2 {
    grid-template-columns: repeat(2, 1fr); /* Deux colonnes de largeur égale */
}
/* 3 colonnes */
.key-features.list-col-3 {
    grid-template-columns: repeat(3, 1fr); /* Trois colonnes de largeur égale */
}

/* Liste Adaptative (Colonnes Automatiques avec CSS Grid) */
.key-features.list-auto-columns {
    display: grid;
    gap: 20px; /* Espacement entre les éléments */
    /* Les colonnes s'ajusteront automatiquement pour contenir au moins des éléments de 250px */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.key-features.list-auto-columns li {
    margin-bottom: 0; /* Supprime la marge verticale par défaut */
}

/* Liste Responsive (Horizontal/Vertical selon l'écran avec Media Queries) */
/* Par défaut, la liste est verticale */
.key-features.list-responsive {
    display: block;
}
/* Ajustements de marge spécifiques pour les listes responsives avec des icônes */
.key-features.list-responsive.icon-black-check,
.key-features.list-responsive.icon-white-check {
    margin-bottom: 5px;
}
.key-features.list-responsive.icon-green-circle-number li,
.key-features.list-responsive.icon-green-circle-check li {
    margin-bottom: 10px;
}
/* Au-delà d'une certaine largeur d'écran, passe en horizontal */
@media (min-width: 768px) { /* Par exemple, pour les tablettes et plus grands */
    .key-features.list-responsive {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }
    .key-features.list-responsive li {
        margin-bottom: 0;
    }
}


























.block-system-main-block ul.horizontal {
  display: flex;
}

.key-features .feature {
    align-items: center;
}
.key-features .feature svg {
    min-width: 24px;
    min-height: 24px;
}
.key-features .feature .content {
    margin-left: .25rem;
}

.block-system-main-block ul.top li {
  align-items: flex-start;
}
ul.green-dots {
    flex-direction: column;
    display: flex;
    margin-bottom: 10px;
    font-weight: bold;
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
}
ul.green-dots li {
    list-style-type: none;
    display: flex;
    margin-bottom: 10px;
}
ul.green-dots li svg {
    flex: none;
    margin-right: 10px;
}
.block-system-main-block ul[class*="bullets"] {
  margin-left: 0;
  padding-left: 0;
  list-style-type: none;
}
.block-system-main-block ul[class*="bullets"] li {
  display: flex;
  align-items: center;
  padding-left: 0px;
  margin-bottom: 10px;
  font-weight: bold;
}
.block-system-main-block ul.top[class*="bullets"] li {
    align-items: flex-start;
}
.block-system-main-block ul[class*="bullets"] li > div {
    margin-left: 10px;
}
.block-system-main-block ul.green-checkmark-bullets li::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle cx="12" cy="12" r="12" fill="%2300D672"/><path fill="%23191919" fill-rule="evenodd" d="M7.138 12.195a.667.667 0 1 0-.943.943l3.334 3.333c.26.26.682.26.942 0l7.334-7.333a.667.667 0 1 0-.943-.943L10 15.057l-2.862-2.862Z" clip-rule="evenodd"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}

.block-system-main-block ul.green-number-bullets li::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  transform: translateY(70%);
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%2212%22%20fill=%22%2300D672%22/%3E%3Cpath%20d=%22M13.482%207.026V17h-1.968V9.296l-2.366.752V8.496l4.123-1.47h.211Z%22%20fill=%22%23191919%22/%3E%3C/svg%3E');
  background-size: contain;
  background-repeat: no-repeat;
}
.block-system-main-block ul.green-number-bullets li:nth-child(2)::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%2212%22%20fill=%22%2300D672%22/%3E%3Cpath%20d=%22M15.492%2015.462V17H8.684v-1.313l3.22-3.452c.323-.36.578-.676.765-.95.187-.278.321-.526.403-.745a1.76%201.76%200%200%200%20.13-.636c0-.3-.05-.558-.15-.772a1.12%201.12%200%200%200-.445-.506c-.191-.119-.428-.178-.71-.178-.301%200-.561.073-.78.219a1.392%201.392%200%200%200-.492.608c-.11.26-.164.554-.164.882H8.485c0-.592.142-1.135.424-1.627a3.108%203.108%200%200%201%201.196-1.182c.515-.297%201.126-.445%201.832-.445.698%200%201.286.114%201.764.342.483.223.848.547%201.094.97.25.42.376.921.376%201.505%200%20.328-.053.65-.157.964a4.35%204.35%200%200%201-.451.93%207.485%207.485%200%200%201-.698.929c-.273.314-.576.64-.909.978l-1.73%201.94h4.266Z%22%20fill=%22%23191919%22/%3E%3C/svg%3E');
}
.block-system-main-block ul.green-number-bullets li:nth-child(3)::before {
  background-image: url('data:image/svg+xml,%3Csvg%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%2212%22%20fill=%22%2300D672%22/%3E%3Cpath%20d=%22M10.7002%2011.1689H11.7529C12.0902%2011.1689%2012.3682%2011.112%2012.5869%2010.998C12.8057%2010.8796%2012.9674%2010.7155%2013.0723%2010.5059C13.1816%2010.2917%2013.2363%2010.0433%2013.2363%209.76074C13.2363%209.50553%2013.1862%209.27995%2013.0859%209.08398C12.9902%208.88346%2012.8421%208.72852%2012.6416%208.61914C12.4411%208.50521%2012.1882%208.44824%2011.8828%208.44824C11.6413%208.44824%2011.418%208.49609%2011.2129%208.5918C11.0078%208.6875%2010.8438%208.82194%2010.7207%208.99512C10.5977%209.16829%2010.5361%209.37793%2010.5361%209.62402H8.56055C8.56055%209.07715%208.70638%208.60091%208.99805%208.19531C9.29427%207.78971%209.69076%207.47298%2010.1875%207.24512C10.6842%207.01725%2011.2311%206.90332%2011.8281%206.90332C12.5026%206.90332%2013.0928%207.0127%2013.5986%207.23145C14.1045%207.44564%2014.4987%207.76237%2014.7812%208.18164C15.0638%208.60091%2015.2051%209.12044%2015.2051%209.74023C15.2051%2010.0547%2015.1322%2010.36%2014.9863%2010.6562C14.8405%2010.9479%2014.6309%2011.2122%2014.3574%2011.4492C14.0885%2011.6816%2013.7604%2011.8685%2013.373%2012.0098C12.9857%2012.1465%2012.5505%2012.2148%2012.0674%2012.2148H10.7002V11.1689ZM10.7002%2012.666V11.6475H12.0674C12.6097%2011.6475%2013.0859%2011.709%2013.4961%2011.832C13.9062%2011.9551%2014.2503%2012.1328%2014.5283%2012.3652C14.8063%2012.5931%2015.016%2012.8643%2015.1572%2013.1787C15.2985%2013.4886%2015.3691%2013.8327%2015.3691%2014.2109C15.3691%2014.6758%2015.2803%2015.0905%2015.1025%2015.4551C14.9248%2015.8151%2014.6742%2016.1204%2014.3506%2016.3711C14.0316%2016.6217%2013.6579%2016.8132%2013.2295%2016.9453C12.8011%2017.0729%2012.334%2017.1367%2011.8281%2017.1367C11.4089%2017.1367%2010.9964%2017.0798%2010.5908%2016.9658C10.1898%2016.8473%209.8252%2016.6719%209.49707%2016.4395C9.1735%2016.2025%208.91374%2015.9062%208.71777%2015.5508C8.52637%2015.1908%208.43066%2014.7646%208.43066%2014.2725H10.4062C10.4062%2014.5277%2010.4701%2014.7555%2010.5977%2014.9561C10.7253%2015.1566%2010.9007%2015.3138%2011.124%2015.4277C11.3519%2015.5417%2011.6048%2015.5986%2011.8828%2015.5986C12.1973%2015.5986%2012.4661%2015.5417%2012.6895%2015.4277C12.9173%2015.3092%2013.0905%2015.1452%2013.209%2014.9355C13.332%2014.7214%2013.3936%2014.473%2013.3936%2014.1904C13.3936%2013.8258%2013.3275%2013.5342%2013.1953%2013.3154C13.0632%2013.0921%2012.874%2012.9281%2012.6279%2012.8232C12.3818%2012.7184%2012.0902%2012.666%2011.7529%2012.666H10.7002Z%22%20fill=%22%23191919%22/%3E%3C/svg%3E');
}
.block-system-main-block ul.green-number-bullets li:nth-child(4)::before {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20fill=%22none%22%20viewBox=%220%200%2024%2024%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%2212%22%20fill=%22%2300D672%22/%3E%3Cpath%20fill=%22%23191919%22%20d=%22M15.6562%2013.2812v1.545H8.48535l-.0957-1.1963%204.14945-6.58302h1.5654l-1.6953%202.83691-2.0645%203.39741h5.3115Zm-1.1279-6.23432V17h-1.9687V7.04688h1.9687Z%22/%3E%3C/svg%3E');
}
.block-system-main-block ul.green-number-bullets li:nth-child(5)::before {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20fill=%22none%22%20viewBox=%220%200%2024%2024%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%2212%22%20fill=%22%2300D672%22/%3E%3Cpath%20fill=%22%23191919%22%20d=%22m10.5361%2012.4678-1.57223-.376.56738-5.04492H15.123v1.59277h-3.9716l-.2461%202.20805c.1321-.0775.3327-.1595.6015-.2461.2689-.0912.5697-.1368.9024-.1368.4831%200%20.9114.0752%201.2851.2256.3737.1504.6905.3692.9502.6563.2644.2871.4649.638.6016%201.0527.1367.4147.2051.8841.2051%201.4082%200%20.4421-.0684.8636-.2051%201.2647-.1367.3965-.3441.7519-.6221%201.0664-.278.3099-.6266.5537-1.0459.7314-.4192.1778-.916.2666-1.4902.2666-.4284%200-.8431-.0638-1.2441-.1914-.3965-.1276-.7543-.3167-1.07329-.5674-.31446-.2506-.56739-.5537-.75879-.9091-.18685-.3601-.28483-.7702-.29395-1.2305h1.95513c.0273.2825.1002.5263.2187.7314.123.2005.2848.3555.4854.4649.2005.1093.4352.164.7041.164.2506%200%20.4648-.0478.6425-.1435.1778-.0957.3213-.2279.4307-.3965.1094-.1732.1891-.3737.2393-.6016.0546-.2324.082-.483.082-.7519%200-.2689-.0319-.5127-.0957-.7315-.0638-.2187-.1618-.4078-.294-.5674-.1321-.1595-.3007-.2825-.5058-.3691-.2005-.0866-.4352-.1299-.7041-.1299-.3646%200-.6472.057-.8477.1709-.1959.114-.36.2438-.4922.3897Z%22/%3E%3C/svg%3E');
}
.block-system-main-block ul.green-number-bullets li:nth-child(6)::before {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20fill=%22none%22%20viewBox=%220%200%2024%2024%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%2212%22%20fill=%22%2300D672%22/%3E%3Cpath%20fill=%22%23191919%22%20d=%22M13.7627%206.94434h.2871V8.5166h-.1162c-.5195%200-.9821.07748-1.3877.23242-.4056.15495-.7497.37598-1.0322.66309-.278.28255-.4922.62439-.6426%201.02539-.1458.401-.2188.8499-.2188%201.3467v1.6543c0%20.3554.0342.6699.1026.9433.0729.2689.1754.4945.3076.6768.1367.1777.2962.3122.4785.4033.1823.0866.3874.1299.6152.1299.2142%200%20.4079-.0456.5811-.1367.1777-.0912.3281-.2188.4512-.3828.1276-.1687.2233-.3646.2871-.5879.0683-.2279.1025-.4763.1025-.7451%200-.2689-.0342-.5173-.1025-.7452-.0638-.2278-.1595-.4238-.2871-.5879-.1276-.1686-.2826-.2985-.4649-.3896-.1823-.0911-.3873-.1367-.6152-.1367-.3099%200-.5833.0729-.8203.2187-.2324.1413-.4147.3236-.5469.5469-.1322.2233-.2028.458-.2119.7041l-.59473-.3828c.01367-.3509.08663-.6836.21873-.998.1367-.3145.3236-.5925.5606-.834.2415-.2461.5309-.4375.8681-.5743.3373-.1412.7178-.2119%201.1416-.2119.4649%200%20.8728.0889%201.2237.2666.3554.1778.6517.4216.8886.7315.237.3099.4148.6676.5332%201.0732.1185.4056.1778.8386.1778%201.2989%200%20.483-.0798.9319-.2393%201.3466-.1549.4147-.3805.777-.6767%201.0869-.2917.3099-.6426.5515-1.0528.7247-.4101.1731-.8704.2597-1.3808.2597-.5287%200-1.0095-.0957-1.4424-.2871-.4284-.196-.79754-.4694-1.10744-.8203-.30989-.3509-.54915-.7679-.71777-1.251-.16407-.4831-.2461-1.0117-.2461-1.5859v-.7656c0-.8021.11621-1.5358.34864-2.2012.23698-.66994.57649-1.24871%201.01857-1.73634.442-.49219.9752-.87272%201.5996-1.1416.6243-.26888%201.3284-.40332%202.1123-.40332Z%22/%3E%3C/svg%3E');
}
.block-system-main-block ul.small-icons li::before {
    width: 16px;
    height: 16px;
}

@media screen and (max-width: 767px) {
  .paragraph_spacing {
    padding-top: 0px;
  }
  .card-deck .card-body {
    width: unset !important;
    max-width: unset !important;
  }
  .paragraph—type—_0-50-hero-text .field—type-image img, .wizard-center img:last-child  {
   max-height: fit-content;
    width: 75%;
  }
  .hero-transition-svg-container {
    display: none;
  }
  .field__item .col-12:last-child:not(:has([class*="-card"])), .field__item .col-6:not(.col-12):nth-last-child(-n+2) {
    margin-bottom: 0 !important;
  }
  .paragraph--type--_0-50-hero-text-and-baby-wizard .wizard-center {
    margin-top: 24px;
  }
  /* add spacing under the rabbit hole ( front page ) */
  .field__item:has(.field__item #rabbit-hole) + .field__item + .field__item .field--name-field-reactions .field--name-field-strips > .field__item > .paragraph {
    padding-top: 32px;
	}
}
@media (min-width: 768px) {
  .text-50-text-50:has(img) .col-lg-5:not(:has(img)) {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
}
@media (min-width: 992px) {

  .block-system-main-block ul.auto {
    display: flex;
  }
  .block-system-main-block ul.auto li:not(:first-child) {
      /* padding-left: 20px !important; */
  }
  .block-system-main-block ul.auto li {
      margin-bottom: 0px;
  }
}
@media (max-width: 1199px) { 
	#baby-wizard-mobile .baby-wizard-mobile-content, #baby-wizard-mobile .total, .marketing-block-bb, .marketing-block-bb + * {
      /*width: 470px;*/
      /*margin-left: auto!important;*/
      /*margin-right: auto!important;*/
      /*margin-bottom: 16px;*/
  }
  
}