.fa-solid,.fa-regular,.fa,.fa-brands{display:inline-flex;vertical-align:middle}.fa-solid::before,.fa-regular::before,.fa::before,.fa-brands::before{content:'';display:inline-block;width:1em;height:1em;background:currentColor;vertical-align:-0.125em;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.fa-magnifying-glass::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20512%20512%27%3E%3Cpath%20d%3D%27M416%20208c0%2045.9-14.9%2088.3-40%20122.7L502.6%20457.4c12.5%2012.5%2012.5%2032.8%200%2045.3s-32.8%2012.5-45.3%200L330.7%20376c-34.4%2025.2-76.8%2040-122.7%2040C93.1%20416%200%20322.9%200%20208S93.1%200%20208%200S416%2093.1%20416%20208zM208%20352a144%20144%200%201%200%200-288%20144%20144%200%201%200%200%20288z%27%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20512%20512%27%3E%3Cpath%20d%3D%27M416%20208c0%2045.9-14.9%2088.3-40%20122.7L502.6%20457.4c12.5%2012.5%2012.5%2032.8%200%2045.3s-32.8%2012.5-45.3%200L330.7%20376c-34.4%2025.2-76.8%2040-122.7%2040C93.1%20416%200%20322.9%200%20208S93.1%200%20208%200S416%2093.1%20416%20208zM208%20352a144%20144%200%201%200%200-288%20144%20144%200%201%200%200%20288z%27%2F%3E%3C%2Fsvg%3E")}.fa-xmark::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20384%20512%27%3E%3Cpath%20d%3D%27M342.6%20150.6c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L192%20210.7%2086.6%20105.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3L146.7%20256%2041.4%20361.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200L192%20301.3%20297.4%20406.6c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3L237.3%20256%20342.6%20150.6z%27%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20384%20512%27%3E%3Cpath%20d%3D%27M342.6%20150.6c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L192%20210.7%2086.6%20105.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3L146.7%20256%2041.4%20361.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200L192%20301.3%20297.4%20406.6c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3L237.3%20256%20342.6%20150.6z%27%2F%3E%3C%2Fsvg%3E")}

ul { list-style: none; } .main { max-width: 75rem; padding: 3em 1.5em; } .main__heading { font-weight: 600; font-size: 2.25em; margin-bottom: 0.75em; text-align: center; color: #eceff1; } .cards { position: relative; } .cards__inner { display: flex; flex-wrap: wrap; gap: 2.5em; } .card { --flow-space: 0.5em; --hsl: var(--hue), var(--saturation), var(--lightness); flex: 1 1 14rem; padding: 1em 1.5em; /* Réduire le padding */ display: grid; grid-template-rows: auto auto auto 1fr; align-items: start; gap: 0.75em; /* Réduire l'espacement entre les éléments */ color: #eceff1; background-color: #2b2b2b; border: 1px solid #eceff133; border-radius: 15px; max-height: 20rem; /* Limiter la hauteur maximale */ } .card__heading { font-size: 1em; /* Réduire la taille de la police */ font-weight: 600; } .card__price { font-size: 1.5em; /* Réduire la taille de la police */ font-weight: 700; } .card__bullets { line-height: 1.2; /* Réduire l'interligne */ } .card__bullets li { font-size: 0.9em; /* Réduire la taille de la police */ } .cta { position: relative; display: inline-block; padding: 0.5em 1em; font-size: 1em; font-weight: bold; color: black; background-color: #f0f0f0; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s, color 0.3s; } /* Effet au survol */ .cta:hover { background-color: #333; color: white; } /* Évitez les duplications visuelles */ .card { position: relative; overflow: hidden; padding-bottom: 4.5em /* Assurez-vous que les éléments en dehors des limites ne sont pas visibles */ } .card .cta { position: static;
  margin-top: 1em; bottom: 1em; align-self: center;  width: auto;margin-left: 50%;
  margin-right: auto; transform: translateX(-50%); } .card:nth-child(1) { --hue: 221; --saturation: 79%; --lightness: 60%; background-image: url('../../icons/Screenshot_20240105_054822_Alibabacom.jpg?t=d4a81acd_75af_40ec_bd6b_d429b62f2e68'); /* Remplacez par le chemin de votre image */ background-size: cover; /* Ajuste l'image pour couvrir toute la carte */ background-position: center; /* Centre l'image */ background-color: #226fdb; /* Couleur de secours */ color: black; /* Couleur du texte */ font-weight: bold; /* Texte en gras */ font-size: 1.2em; /* Texte plus gros */ padding-bottom: 2em; /* Ajouter de l'espace en bas pour le bouton */ } .card:nth-child(1) .card__heading { white-space: nowrap; /* Empêche le retour à la ligne */ overflow: hidden; /* Cache le texte qui dépasse */ text-overflow: ellipsis; /* Ajoute des points de suspension si le texte est trop long */ margin: 0; /* Supprime toutes les marges */ } .card:nth-child(1) .card__price { margin: 0; /* Supprime toutes les marges */ padding: 0; /* Supprime tout padding */ } .card:nth-child(1) .card__bullets { margin: 0; /* Supprime toutes les marges */ padding: 0; /* Supprime tout padding */ } .card:nth-child(1) .card__bullets li { margin: 0; /* Supprime toutes les marges */ padding: 0; /* Supprime tout padding */ } .card:nth-child(1) .card__cta { white-space: nowrap; /* Empêche le retour à la ligne */ overflow: hidden; /* Cache le texte qui dépasse */ text-overflow: ellipsis; /* Ajoute des points de suspension si le texte est trop long */ margin-top: 1em; /* Ajouter une marge supérieure pour ajuster la position */ } .card:nth-child(2) { --hue: 0; --saturation: 0%; --lightness: 100%; background-image: url('../../icons/Screenshot_20240105_055355_Alibabacom.jpg?t=d4a81acd_75af_40ec_bd6b_d429b62f2e68'); background-size: cover; background-position: center; background-color: var(--highlight-color); color: black; font-weight: bold; font-size: 1.2em; padding-bottom: 2em; } .card:nth-child(2) .card__heading { white-space: nowrap; /* Empêche le retour à la ligne */ overflow: hidden; /* Cache le texte qui dépasse */ text-overflow: ellipsis; /* Ajoute des points de suspension si le texte est trop long */ margin: 0; /* Supprime toutes les marges */ } .card:nth-child(2) .card__price { margin: 0; /* Supprime toutes les marges */ padding: 0; /* Supprime tout padding */ } .card:nth-child(2) .card__bullets { margin: 0; /* Supprime toutes les marges */ padding: 0; /* Supprime tout padding */ } .card:nth-child(2) .card__bullets li { margin: 0; /* Supprime toutes les marges */ padding: 0; /* Supprime tout padding */ } .card:nth-child(2) .card__cta { white-space: nowrap; /* Empêche le retour à la ligne */ overflow: hidden; /* Cache le texte qui dépasse */ text-overflow: ellipsis; /* Ajoute des points de suspension si le texte est trop long */ margin-top: 1em; /* Ajouter une marge supérieure pour ajuster la position */ } .card:nth-child(3) { --hue: 207; --saturation: 89%; --lightness: 67%; background-image: url('../../icons/Porte-carte.jpg?t=d4a81acd_75af_40ec_bd6b_d429b62f2e68'); /* Remplacez par le chemin de votre image */ background-size: cover; /* Ajuste l'image pour couvrir toute la carte */ background-position: center; /* Centre l'image */ background-color: #226fdb; /* Couleur de secours */ color: black; /* Couleur du texte */ font-weight: bold; /* Texte en gras */ font-size: 1.2em; /* Texte plus gros */ padding-bottom: 2em; /* Ajouter de l'espace en bas pour le bouton */ } .card:nth-child(3) .card__heading, .card:nth-child(3) .card__price, .card:nth-child(3) .card__bullets { color: white; /* Couleur du texte en blanc */ background: rgba(0, 0, 0, 0.5); /* Ajout d'un fond noir avec transparence */ padding: 5px; /* Espace autour du texte pour éviter que le texte ne touche les bords */ } .card__bullets li::before { display: inline-block; content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='16' title='check' fill='%23000000'%3E%3Cpath d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z' /%3E%3C/svg%3E"); transform: translatey(0.25ch); margin-right: 1ch; color: black; /* Couleur du texte */ } /* Par défaut, le texte des cartes est en noir */ .card { color: black; } /* Au survol, les coches et le texte deviennent blancs */ .card:hover .card__bullets li::before, .card:hover .card__bullets li, .card:hover .card__heading, .card:hover .card__price, .card:hover .cta { color: white; /* Couleur du texte au survol */ } .card:hover .card__bullets li::before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='16' title='check' fill='%23ffffff'%3E%3Cpath d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z' /%3E%3C/svg%3E"); } .card:nth-child(3) .card__heading { margin-bottom: -1em; /* Ajustez la valeur selon vos besoins */ } .card__heading { font-size: 1.05em; font-weight: 600; } .card__price { font-size: 1.75em; font-weight: 700; } .flow > * + * { margin-top: var(--flow-space, 1.25em); } .cta { display: block; align-self: end; margin: 1em 0 0.5em 0; text-align: center; text-decoration: none; color: #fff; background-color: #0d0d0d; padding: 0.7em; border-radius: 10px; font-size: 1rem; font-weight: 600; } .overlay { position: absolute; inset: 0; pointer-events: none; user-select: none; opacity: var(--opacity, 1); /* Assurez-vous que l'opacité est à 1 pour voir l'effet */ -webkit-mask: radial-gradient( 25rem 25rem at var(--x) var(--y), rgba(34, 111, 219, 0.5) 1%, /* Utilisez une couleur bleue avec opacité */ transparent 50% ); mask: radial-gradient( 25rem 25rem at var(--x) var(--y), rgba(34, 111, 219, 0.5) 1%, /* Utilisez une couleur bleue avec opacité */ transparent 50% ); transition: 400ms mask ease; will-change: mask; } .overlay .card { background-color: hsla(var(--hsl), 0.15); border-color: hsla(var(--hsl), 1); box-shadow: 0 0 0 1px inset hsl(var(--hsl)); } .overlay .cta {margin-top: 1em; display: block; grid-row: -1; width: 100%; background-color: hsl(var(--hsl)); box-shadow: 0 0 0 1px hsl(var(--hsl)); } :not(.overlay) > .card { transition: 400ms background ease; will-change: background; } :not(.overlay) > .card:hover { --lightness: 95%; background: hsla(var(--hsl), 0.1); }
.comp_0{--waf-bg-color:rgba(0,0,0,1);flex-direction:column;}.comp_1{--wf-gutter-x:0px;flex-direction:row;}.comp_10{--wf-gutter-x:0px;flex-direction:row;}.comp_11{flex-direction:column;}.comp_11 > .wa_inner_col{display:flex;flex-direction:inherit;height:100%;}.comp_11 > .wa_inner_col > .wa_inner_col2{display:inherit;flex-direction:inherit;height:100%;justify-content:flex-start;}.comp_12{width:100%;}.comp_2{flex-direction:column;}.comp_2 > .wa_inner_col{display:flex;flex-direction:inherit;height:100%;}.comp_2 > .wa_inner_col > .wa_inner_col2{display:inherit;flex-direction:inherit;height:100%;justify-content:flex-start;}.comp_3{display:flex;width:100%;}.comp_3 .wa-image-wrap{aspect-ratio:1152/768;;box-sizing:content-box;cursor:pointer;overflow:hidden;position:relative;width:calc( min( 100% , 1152px) );}.comp_3 .wa-image-wrap > div{aspect-ratio:1152/768;;position:relative;width:100%;}.comp_3 .wa-image-wrap img{aspect-ratio:1152/768;;position:relative;vertical-align:top;width:100%;}.comp_4{flex-direction:column;}.comp_4 > .wa_inner_col{display:flex;flex-direction:inherit;height:100%;}.comp_4 > .wa_inner_col > .wa_inner_col2{display:inherit;flex-direction:inherit;height:100%;justify-content:flex-start;}.comp_5{display:flex;width:100%;}.comp_5 .wa-btn{background:linear-gradient(90deg,#226fdb 50%, #5a9ff6 59%);border-color:rgba(0,0,0,1);color:rgba(0,0,0,1);font-family:'Verdana';font-style:italic;font-weight:bolder;}.comp_5 .wa-btn.wa-btn .wa-btn-icon-vector svg{height:1em;width:auto;}.comp_5 .wa-btn.wa-btn.wa-btn-icon-left .wa-btn-icon-vector{margin-left:.5em;margin-right:.25em;}.comp_5 .wa-btn.wa-btn:active{border-color:rgba(0,0,0,1);color:rgba(0,0,0,1);}.comp_5 .wa-btn.wa-btn:hover{background:linear-gradient(90deg,#226fdb 50%, #5a9ff6 59%);border-color:rgba(0,0,0,1);color:rgba(0,0,0,1);}.comp_5 a{display:flex;text-decoration:none;}.comp_5 div{justify-content:center;}.comp_6{display:flex;width:100%;}.comp_6 .wa-btn{background:linear-gradient(90deg,#226fdb 50%, #5a9ff6 63%);border-color:rgba(0,0,0,1);color:rgba(0,0,0,1);font-family:'Verdana';font-style:italic;font-weight:bolder;}.comp_6 .wa-btn.wa-btn .wa-btn-icon-vector svg{height:1em;width:auto;}.comp_6 .wa-btn.wa-btn.wa-btn-icon-right .wa-btn-icon-vector{margin-left:.25em;margin-right:.5em;}.comp_6 .wa-btn.wa-btn:active{border-color:rgba(0,0,0,1);color:rgba(0,0,0,1);}.comp_6 .wa-btn.wa-btn:hover{background:linear-gradient(90deg,#226fdb 50%, #5a9ff6 63%);border-color:rgba(0,0,0,1);color:rgba(0,0,0,1);}.comp_6 a{display:flex;text-decoration:none;}.comp_6 div{justify-content:center;}.comp_7{flex-direction:column;}.comp_7 > .wa_inner_col{display:flex;flex-direction:inherit;height:100%;}.comp_7 > .wa_inner_col > .wa_inner_col2{display:inherit;flex-direction:inherit;height:100%;justify-content:flex-start;}.comp_8{display:flex;width:100%;}.comp_8 .wa-btn{background:linear-gradient(90deg,#226fdb 50%, #5a9ff6 58%);border-color:rgba(0,0,0,1);color:rgba(0,0,0,1);font-family:'Verdana';font-style:italic;font-weight:bolder;}.comp_8 .wa-btn.wa-btn .wa-btn-icon-vector svg{height:1em;width:auto;}.comp_8 .wa-btn.wa-btn.wa-btn-icon-left .wa-btn-icon-vector{margin-left:.5em;margin-right:.25em;}.comp_8 .wa-btn.wa-btn:active{border-color:rgba(0,0,0,1);color:rgba(0,0,0,1);}.comp_8 .wa-btn.wa-btn:hover{background:linear-gradient(90deg,#226fdb 50%, #5a9ff6 58%);border-color:rgba(0,0,0,1);color:rgba(0,0,0,1);}.comp_8 a{display:flex;text-decoration:none;}.comp_8 div{justify-content:center;}.comp_9{--waf-bg-color:rgba(0,0,0,1);flex-direction:column;}body{background-color:rgba(255,255,255,1);}.comp_0{display:flex;min-height:0px;padding-bottom:0rem;padding-left:0rem;padding-right:0rem;padding-top:4rem;}.comp_1{display:flex;margin-bottom:0px !important;margin-top:0px !important;}.comp_10{display:flex;margin-bottom:0px !important;margin-top:0px !important;}.comp_11{min-height:0px;padding-left:0rem;padding-right:0rem;}.comp_11 > .wa_inner_col{border:none;border-radius:0px;}.comp_11 > .wa_inner_col > .wa_inner_col2{gap:0px;margin-bottom:0rem;margin-left:0rem;margin-right:0rem;margin-top:0rem;}.comp_12{margin-bottom:0px;margin-top:0px;min-height:100px;}.comp_2{min-height:0px;padding-left:0rem;padding-right:0rem;}.comp_2 > .wa_inner_col{border:none;border-radius:0px;}.comp_2 > .wa_inner_col > .wa_inner_col2{gap:0px;margin-bottom:0rem;margin-left:0rem;margin-right:0rem;margin-top:0rem;}.comp_3{justify-content:center;margin-bottom:0px;margin-top:0px;}.comp_3 .wa-image-wrap{border:none;border-radius:0px;max-width:calc( min( 100% , 1152px) );}.comp_4{min-height:0px;padding-left:0rem;padding-right:0rem;}.comp_4 > .wa_inner_col{border:none;border-radius:0px;}.comp_4 > .wa_inner_col > .wa_inner_col2{gap:0px;margin-bottom:0rem;margin-left:0rem;margin-right:0rem;margin-top:0rem;}.comp_5{justify-content:flex-start;margin-bottom:0px;margin-top:10px;}.comp_5 .wa-btn{font-size:0.75em;}.comp_5 .wa-btn.wa-btn-rounded{border-radius:0.75em;}.comp_5 a{width:unset;}.comp_5 div{width:unset;}.comp_6{justify-content:flex-start;margin-bottom:0px;margin-top:70px;}.comp_6 .wa-btn{font-size:0.75em;}.comp_6 .wa-btn.wa-btn-rounded{border-radius:0.75em;}.comp_6 a{width:unset;}.comp_6 div{width:unset;}.comp_7{min-height:0px;padding-left:0rem;padding-right:0rem;}.comp_7 > .wa_inner_col{border:none;border-radius:0px;}.comp_7 > .wa_inner_col > .wa_inner_col2{gap:0px;margin-bottom:0rem;margin-left:0rem;margin-right:0rem;margin-top:0rem;}.comp_8{justify-content:flex-start;margin-bottom:0px;margin-top:65px;}.comp_8 .wa-btn{font-size:0.75em;}.comp_8 .wa-btn.wa-btn-rounded{border-radius:0.75em;}.comp_8 a{width:unset;}.comp_8 div{width:unset;}.comp_9{display:flex;min-height:0px;padding-bottom:36px;padding-left:0rem;padding-right:0rem;padding-top:5px;}body{background-image:url('');}@media (min-width:992px){.comp_0{display:flex;min-height:0px;padding-bottom:0rem;padding-left:0rem;padding-right:0rem;padding-top:4rem;}.comp_1{display:flex;margin-bottom:0px !important;margin-top:0px !important;}.comp_10{display:flex;margin-bottom:0px !important;margin-top:0px !important;}.comp_11{min-height:0px;padding-left:0rem;padding-right:0rem;}.comp_11 > .wa_inner_col{border:none;border-radius:0px;}.comp_11 > .wa_inner_col > .wa_inner_col2{gap:0px;margin-bottom:0rem;margin-left:0rem;margin-right:0rem;margin-top:0rem;}.comp_12{margin-bottom:0px;margin-top:0px;min-height:100px;}.comp_2{min-height:0px;padding-left:0rem;padding-right:0rem;}.comp_2 > .wa_inner_col{border:none;border-radius:0px;}.comp_2 > .wa_inner_col > .wa_inner_col2{gap:0px;margin-bottom:0rem;margin-left:0rem;margin-right:0rem;margin-top:0rem;}.comp_3{justify-content:center;margin-bottom:0px;margin-top:0px;}.comp_3 .wa-image-wrap{border:none;border-radius:0px;max-width:calc( min( 100% , 1152px) );}.comp_4{min-height:0px;padding-left:0rem;padding-right:0rem;}.comp_4 > .wa_inner_col{border:none;border-radius:0px;}.comp_4 > .wa_inner_col > .wa_inner_col2{gap:0px;margin-bottom:0rem;margin-left:0rem;margin-right:0rem;margin-top:0rem;}.comp_5{justify-content:flex-start;margin-bottom:0px;margin-top:10px;}.comp_5 .wa-btn{font-size:1.2em;}.comp_5 .wa-btn.wa-btn-rounded{border-radius:0.75em;}.comp_5 a{width:unset;}.comp_5 div{width:unset;}.comp_6{justify-content:center;margin-bottom:0px;margin-top:70px;}.comp_6 .wa-btn{font-size:1.2em;}.comp_6 .wa-btn.wa-btn-rounded{border-radius:0.75em;}.comp_6 a{width:unset;}.comp_6 div{width:unset;}.comp_7{min-height:0px;padding-left:0rem;padding-right:0rem;}.comp_7 > .wa_inner_col{border:none;border-radius:0px;}.comp_7 > .wa_inner_col > .wa_inner_col2{gap:0px;margin-bottom:0rem;margin-left:0rem;margin-right:0rem;margin-top:0rem;}.comp_8{justify-content:flex-start;margin-bottom:0px;margin-top:65px;}.comp_8 .wa-btn{font-size:1.2em;}.comp_8 .wa-btn.wa-btn-rounded{border-radius:0.75em;}.comp_8 a{width:unset;}.comp_8 div{width:unset;}.comp_9{display:flex;min-height:0px;padding-bottom:36px;padding-left:0rem;padding-right:0rem;padding-top:5px;}body{background-image:url('');}}