section {
padding: 80px 0;
} .tarifs-hero {
min-height: 70vh;
background: rgb(239 231 212 / 20%);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
padding: 0 0 30px;
padding-top: 130px;
padding-bottom: 0;
}
.hero-content {
padding-top: 80px;
}
.tarifs-hero h2 {
font-weight: 300;
font-size: 48px;
line-height: 52px;
}
.tarifs-hero h1 {
font-family: var(--font-display);
font-weight: 500;
font-size: 18px;
line-height: 100%;
}
.tarifs-hero .hero-content > *:nth-child(3) {
font-family: var(--font-display);
font-weight: 500;
font-style: Medium;
font-size: 18px;
line-height: 27px;
letter-spacing: 0%;
}
img.thomas {
position: absolute;
left: -10px;
top: 30px;
}
.canousconnait .container {
position: relative;
}
img.gregoire {
position: absolute;
right: 0;
top: 0px;
}
li#menu-item-486 {
background-color: var(--theme-color);
border-radius: 100px;
background-color: var(--color-primary);
border-radius: 100px;
} .pour-vous-section .image-text-bloc {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.pour-vous-section .image-text-bloc img {
width: 100%;
border-radius: 12px;
}
.pour-vous-section .text-content {
display: flex;
flex-direction: column;
justify-content: center;
}
.pour-vous-section .text-content h3 {
font-family: Bricolage Grotesque;
font-weight: 600;
font-size: 24px;
margin-bottom: 1rem;
}
.pour-vous-section .text-content p {
font-size: 16px;
line-height: 1.6;
} .comparison-wrap {
padding: 1rem 0 2rem;
font-family: var(--font-body);
}
.comparison-grid {
display: grid;
grid-template-columns: 160px repeat(4, 1fr);
gap: 0;
column-gap: 20px;
}
.cell {
padding: 14px 12px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 18px;
color: var(--color-text-primary);
border-bottom: 0.5px solid var(--color-border-tertiary);
font-weight: 400;
}
.cell.label {
justify-content: flex-start;
text-align: left;
font-size: 18px;
border-bottom: 0.5px solid var(--color-border-tertiary);
font-weight: 400;
}
.col-header {
font-weight: 600;
font-size: 18px;
padding: 20px 12px 16px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.col-header.empty {
border-bottom: 0.5px solid var(--color-border-tertiary);
}
.bulle-col {
background: #F0EDE3;
border-radius: 12px 12px 0 0;
}
.cell {
background: #FFFCF3;
}
.empty {
background: transparent;
}
.bulle-col-body {
background: #EFE7D4;
}
.bulle-col-last {
background: #F0EDE3;
border-radius: 0 0 12px 12px;
border-bottom: none !important;
}
.bulle-header {
border-radius: 12px 12px 0 0;
flex-direction: column;
gap: 2px;
padding: 20px 12px 16px;
border-bottom: 0.5px solid rgba(0,0,0,0.08);
}
.bulle-logo {
font-size: 20px;
font-weight: 800;
letter-spacing: -0.5px;
color: #1a1a1a;
line-height: 1;
}
.bulle-logo span {
font-style: italic;
}
.bulle-subtitle {
font-size: 11px;
letter-spacing: 0.08em;
color: #555;
text-transform: lowercase;
}
.bulle-val {
font-weight: 600;
color: #1a1a1a;
}
.price-light { color: var(--color-text-secondary); }
.row-alt { background: var(--color-background-secondary); }
.row-alt .bulle-col-body { background: #E8E4D9; } .partenaire-section .partenaire-image {
position: relative;
}
.partenaire-section .partenaire-image img {
width: 100%;
max-width: 500px;
border-radius: 50%;
aspect-ratio: 1;
object-fit: cover;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
.partenaire-section .partenaire-content h2 {
font-family: var(--font-display);
font-weight: 300;
font-size: 38px;
line-height: 48px;
}
.partenaire-section .partenaire-content p {
font-size: 16px;
line-height: 1.6;
}
.montreenmain {
padding-top: 30px;
padding-bottom: 30px;
} .methodologie-section {
background: var(--theme-color-light);
}
.methodo-accordion {
max-width: 900px;
margin: 0 auto;
}
.methodo-item {
border: 0.5px solid var(--color-text);
margin-bottom: 10px;
border-radius: 10px;
padding: 20px;
background: #fff;
}
.methodo-question {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0;
background: none;
border: none;
cursor: pointer;
text-align: left;
transition: color 0.2s;
}
.methodo-question span {
font-family: Bricolage Grotesque;
font-weight: 600;
font-size: 18px;
}
.methodo-question:hover,
.methodo-question.active {
color: var(--theme-color);
}
.methodo-icon {
position: relative;
width: 36px;
height: 36px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.methodo-icon .icon-plus {
display: block;
}
.methodo-icon .icon-minus {
display: none;
}
.methodo-question.active .methodo-icon .icon-plus {
display: none;
}
.methodo-question.active .methodo-icon .icon-minus {
display: block;
}
.methodo-icon svg {
transition: transform 0.3s ease;
position: absolute;
top: 0;
left: 0;
}
.methodo-question:hover .methodo-icon svg {
transform: scale(1.05);
}
.methodo-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.methodo-answer p {
font-family: var(--font-body);
font-weight: 400;
font-size: 16px;
line-height: 18px;
padding-top: 1rem;
} .approche-card {
background: #FFFCF3;
padding: 30px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 40px;
}
span.step {
font-family: var(--font-display);
font-weight: 300;
font-size: 48px;
line-height: 52px;
letter-spacing: 0%;
text-align: right;
vertical-align: middle;
position: absolute;
right: 30px;
top: 20px;
}
.approche-icon img {
width: 25px;
height: 25px;
object-fit: contain;
}
.approche-icon {
width: 51px;
height: 51px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50px;
}
.approche-card h3.mb-sm {
font-weight: 600;
font-size: 18px;
line-height: 100%;
letter-spacing: 0%;
vertical-align: middle;
}
.approche-card p {
font-weight: 400;
font-size: 16px;
line-height: 18px;
letter-spacing: 0%;
vertical-align: middle;
}
.banniere {
background-color: #EFE7D4;
}
.banniere p.m-0 {
font-family: var(--font-display);
font-weight: 500;
font-size: 21px;
line-height: 100%;
letter-spacing: 0%;
} .encart-couleur .container {
color: #FF4B00;
}
.encart-couleur h2 {
color: #FF4B00;
font-weight: 500;
font-style: Medium;
font-size: 24px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
section.encart-couleur .container {padding: 30px 50px;}
.encart-couleur p, .encart-couleur ul {
font-family: var(--font-body);
font-weight: 400;
font-size: 18px;
line-height: 22px;
letter-spacing: 0%;
} .faire-plus-section .faire-plus-content h2 {
font-family: var(--font-display);
font-weight: 300;
font-size: 38px;
line-height: 48px;
}
.faire-plus-section .faire-plus-content p {
font-size: 16px;
line-height: 1.6;
}
.faire-plus-liste {
list-style: none;
padding: 0;
margin: 2rem 0;
}
.faire-plus-liste li {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
}
.faire-plus-liste li::before {
content: "";
width: 11px;
height: 11px;
background: var(--theme-color);
border-radius: 50%;
flex-shrink: 0;
}
.changer-dapproche .item-line {
background-color: #FFFCF3;
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: 10px;
}
.changer-dapproche h3.mb-0 {
font-family: Bricolage Grotesque;
font-weight: 500;
font-style: Medium;
font-size: 21px;
line-height: 100%;
letter-spacing: 0%;
}
.item-line {
border-left: 2px solid var(--color-primary);
padding-left: 30px;
}
section.cequilfaut.changer-dapproche {
background-image: url(//www.bulle-studio.com/wp-content/uploads/2026/04/simplicite.jpg);
background-size: 40%;
background-repeat: no-repeat;
background-position: right;
}
.case-beige {
max-width: 426px;
margin: auto;
background-color: #EFE7D4;
padding: 20px;
text-align: left;
font-family: Bricolage Grotesque;
font-weight: 400;
font-size: 18px;
line-height: 24px;
letter-spacing: 0%;
margin-top: -50px;
position: relative;
}
span.nineties {
font-weight: 700;
font-size: 42px;
line-height: 48px;
}
.case-beige li {
list-style: none;
} .inside {
position: relative;
max-width: 804px;
margin: auto;
padding: 50px 130px 100px 130px;
}
.conseil-section {
background: #1B5E3F;
color: #fff;
}
.conseil-section h2 {
font-family: var(--font-display);
font-weight: 300;
font-size: 38px;
line-height: 48px;
color: #fff;
}
.conseil-section p {
font-size: 16px;
line-height: 1.6;
color: #fff;
}
.conseil-liste {
list-style: none;
padding: 0;
margin: 2rem 0;
}
.conseil-liste li {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
color: #fff;
}
.conseil-section img {
width: 100%;
border-radius: 12px;
}
.conseil-section .btn {
background: #F4C426;
color: #1B5E3F;
border: none;
}
.conseil-section .btn:hover {
background: #E5B520;
} .checkmark-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
} .banniere-jaune {
background: #EFE7D4;
padding: 2rem 0;
}
.banniere-jaune p {
font-family: var(--font-display);
font-weight: 500;
font-size: 21px;
line-height: 100%;
margin: 0;
} .tester-section .tester-cards {
max-width: 900px;
margin: 0 auto;
}
.tester-card {
background: var(--theme-color-light);
padding: 40px;
border-radius: 12px;
text-align: left;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tester-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.tester-card h3 {
font-family: Bricolage Grotesque;
font-weight: 600;
font-size: 21px;
margin-bottom: 1rem;
}
.tester-card p {
font-size: 16px;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.tester-card .btn {
background: var(--theme-color);
color: #fff;
}
.tester-card .btn-outline {
border-color: var(--theme-color);
color: var(--theme-color);
background: transparent;
} .solutions .gauche {
padding: 0;
}
.solutions .grid {
align-items: center;
background-color: #FFFCF3;
justify-content: space-between;
grid-auto-flow: column;
padding: 30px 80px;
background-image: url(//www.bulle-studio.com/wp-content/uploads/2026/04/Vector-12.png);
background-repeat: no-repeat;
background-position: left center;
background-size: auto 100%;
gap: 180px;
}
.solutions .flex {
gap: 20px;
}
.pratique-card li {
font-family: Bricolage Grotesque;
font-weight: 600;
font-size: 18px;
line-height: 100%;
letter-spacing: 0%;
margin-bottom: 20px;
}
.pratique-card ul, .encart-couleur ul {
list-style: none;
padding-left: 0;
}
.pratique-card ul li, .encart-couleur ul li {
display: flex;
align-items: flex-start; gap: 10px;
}
.pratique-card ul li::before, .encart-couleur ul li:before {
content: "";
display: block;
width: 18px;
height: 18px;
flex-shrink: 0;
background-color: #FF4B00; 
mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.0263 2.07714C14.1507 1.28571 11.4502 2.40815 9.11837 4.70365C7.5779 1.80195 5.36667 -0.119619 3.37281 0.00579378C0.563677 0.182029 -0.750404 4.35148 0.437593 9.31909C1.62559 14.2867 4.8661 18.1704 7.67528 17.9942C7.68982 17.9935 7.70409 17.9917 7.71824 17.9905C10.3101 18.1603 13.8129 15.6879 16.0731 11.9087C18.6608 7.58179 18.6394 3.17984 16.0258 2.07704Z' fill='%23000'/%3E%3C/svg%3E") !important;
mask-repeat: no-repeat;
mask-size: contain;
-webkit-mask-image: url(//www.bulle-studio.com/wp-content/themes/bulle-studio-theme-optimized/assets/css/...);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
}
.enquelquesmots .grid {grid-template-columns: 1fr 692px;}
.enquelquesmots .container {max-width: 1200px;}
.item-link {
background: #EFE7D4;
padding: 30px 20px;
margin-bottom: 10px;
}
.item-link p {
color: var(--color-text);
margin: 0;
font-family: var(--font-display);
font-weight: 600;
font-size: 18px;
line-height: 100%;
vertical-align: middle;
}
.item-link svg {
position: absolute;
right: 30px;
top: 25px;
}
.item-link path {
fill: var(--color-text);
}
.item-link {
position: relative;
}
.enquelquesmots .gauche {
padding-right: 40px;
} .inclus-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px 80px;
}
.inclus-icon {
margin-bottom: 20px;
height: 56px;
display: flex;
align-items: flex-end;
}
.inclus-icon img {
max-height: 56px;
width: auto;
display: block;
}
.inclus-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 18px;
margin-bottom: 10px;
}
.inclus-desc {
font-family: Albert Sans;
font-weight: 400;
font-size: 16px;
line-height: 18px;
letter-spacing: 0%;
}
@media (max-width: 768px) {
.inclus-grid {
grid-template-columns: 1fr;
gap: 36px;
}
.inclus-desc {
max-width: 100%;
}
} .ponctuel-intro {
font-size: 15px;
line-height: 1.7;
color: #555;
max-width: 560px;
margin: 0 auto;
}
.ponctuel-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-top: 40px;
align-items: start;
}
.ponctuel-card {
border-radius: 12px;
overflow: hidden;
cursor: pointer;
background: transparent;
} .ponctuel-image {
position: relative;
aspect-ratio: 3 / 4;
overflow: hidden;
}
.ponctuel-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.ponctuel-card:hover img {
transform: scale(1.04);
} .ponctuel-overlay {
position: absolute;
inset: 0;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
background: rgba(30, 30, 30, 0.25);
transition: background 0.3s ease;
}
.ponctuel-card:hover .ponctuel-overlay {
background: rgba(30, 30, 30, 0.62);
} .ponctuel-card-title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
color: #fff;
line-height: 1.15;
text-align: center;
width: 100%;
margin-bottom: 0;
} .ponctuel-card-desc {
display: none;
color: #fff;
font-size: 13px;
line-height: 1.55;
margin: 0;
flex: 1;
padding-top: 12px;
}
.ponctuel-card:hover .ponctuel-card-desc {
display: block;
} .ponctuel-card-price {
display: none;
color: #fff;
font-size: 13px;
line-height: 1.5;
margin: 0;
}
.ponctuel-card:hover .ponctuel-card-price {
display: block;
}
.ponctuel-card-price strong {
display: block;
font-size: 15px;
font-weight: 700;
} .ponctuel-cta {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
background: #EFE7D4;
font-size: 14px;
font-weight: 600;
font-family: var(--font-display);
border-top: 1px solid rgba(255, 255, 255, 0.15);
display: hidden;
opacity: 0;
transition: opacity 0.2s ease;
color: var(--color-text);
}
.ponctuel-card:hover .ponctuel-cta {
visibility: visible;
opacity: 1;
} @media (max-width: 1024px) {
.ponctuel-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.ponctuel-grid {
grid-template-columns: 1fr;
}
.ponctuel-image {
aspect-ratio: 4 / 3;
}
}  .regie-ligne-1 {
display: grid;
grid-template-columns: 55% 1fr 1fr;
gap: 16px;
margin-bottom: 16px;
align-items: start;
}
.regie-gauche {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-right: 100px;
}
.regie-gauche .btn + .btn {
margin-top: 12px;
} .regie-ligne-2 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
margin-left: calc(33.333% + 8px); }
.regie-card {
background: var(--theme-color-light);
border-radius: 12px;
padding: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 24px;
background: #FFFCF3;
min-height: 300px;
}
.regie-card-title {
font-family: var(--font-display);
margin-bottom: 10px;
color: var(--color-text);
font-weight: 600;
font-size: 18px;
line-height: 100%;
letter-spacing: 0%;
}
.regie-card-desc {
margin: 0;
font-family: var(--font-body);
font-weight: 400;
font-size: 16px;
line-height: 18px;
letter-spacing: 0%;
}
.regie-card-price-label {
color: #555;
margin: 0 0 2px;
font-family: var(--font-body);
font-weight: 400;
font-size: 16px;
line-height: 18px;
letter-spacing: 0%;
}
.regie-card-price {
color: var(--color-text);
margin: 0 0 6px;
font-family: var(--font-display);
font-weight: 600;
font-size: 18px;
line-height: 100%;
letter-spacing: 0%;
margin-bottom: 10px;
}
.regie-card-frais {
color: #555;
margin: 0 0 2px;
font-family: var(--font-body);
font-weight: 400;
font-size: 16px;
line-height: 18px;
letter-spacing: 0%;
}
.regie-ligne-1 .regie-card {
margin-top: 200px;
} @media (max-width: 1024px) {
.regie-ligne-1 {
grid-template-columns: 1fr 1fr;
}
.regie-gauche {
grid-column: 1 / -1;
padding-right: 0;
}
.regie-ligne-2 {
margin-left: 0;
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 600px) {
.regie-ligne-1,
.regie-ligne-2 {
grid-template-columns: 1fr;
}
.regie-ligne-2 {
margin-left: 0;
}
} .temoignages-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.temoignage-stars svg path {
fill: #F4C426;
} .temoignages-carousel {
position: relative;
min-height: 320px;
}
.temoignage-slide {
display: none;
animation: temoinFadeIn 0.4s ease;
}
.temoignage-slide.active {
display: block;
}
@keyframes temoinFadeIn {
from { opacity: 0; transform: translateY(6px); }
to   { opacity: 1; transform: translateY(0); }
}
.temoignage-quote-open,
.temoignage-quote-close {
font-size: 48px;
line-height: 1;
color: var(--color-text);
font-family: Georgia, serif;
}
.temoignage-quote-open { margin-bottom: 12px; }
.temoignage-quote-close {
text-align: right;
margin-top: 8px;
}
.temoignage-texte {
font-size: 20px;
font-weight: 600;
line-height: 1.5;
color: var(--color-text);
margin: 0;
}
.temoignage-stars {
display: flex;
gap: 4px;
margin: 20px 0 8px;
}
.temoignage-stars svg {
width: 20px;
height: 20px;
color: var(--theme-color);
}
.temoignage-auteur {
font-size: 15px;
line-height: 1.5;
color: var(--color-text);
margin: 0;
} .temoignage-dots {
display: flex;
gap: 8px;
margin-top: 24px;
}
.temoignage-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #ccc;
cursor: pointer;
transition: background 0.2s;
}
.temoignage-dot.active {
background: var(--color-text);
} .badges-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
align-items: center;
justify-items: center;
}
.badge-item img {
width: 100%;
max-width: 130px;
height: auto;
display: block;
} @media (max-width: 1024px) {
.temoignages-layout {
grid-template-columns: 1fr;
gap: 48px;
}
.badges-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 480px) {
.badges-grid {
grid-template-columns: repeat(2, 1fr);
}
.temoignage-texte {
font-size: 17px;
}
} .carousel-offres {
position: relative;
} .carousel-tabs {
display: flex;
justify-content: center;
gap: 1rem;
}
.carousel-tab {
background: #fff;
border: 2px solid #e2e8f0;
border-radius: 12px;
padding: 0.875rem 2rem;
font-size: 1.125rem;
font-weight: 600;
color: #64748b;
cursor: pointer;
transition: all 0.3s;
}
.carousel-tab:hover {
border-color: #cbd5e1;
color: #475569;
}
.carousel-tab.active {
background: var(--theme-color-light);
color: var(--theme-color);
} .carousel-slides-wrapper {
position: relative;
min-height: 400px;
}
.carousel-slide {
display: none;
opacity: 0;
transition: opacity 0.5s ease;
}
.carousel-slide.active {
display: block;
opacity: 1;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .slide-content {
background: #fff;
border-radius: 16px;
padding: 3rem;
display: flex;
gap: 3rem;
position: relative;
flex-direction: row;
justify-content: center;
}
.slide-content::before {
top: -6px;
left: -6px;
}
.slide-content::after {
top: -6px;
right: -6px;
}
.carousel-slides-wrapper::before {
left: 3rem;
}
.carousel-slides-wrapper::after {
right: 3rem;
} .slide-image {
flex: 0 0 45%;
border-radius: 12px;
overflow: hidden;
height: 300px;
max-width: 400px;
}
.slide-image img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
} .slide-text {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
padding-top: 20px;
padding-bottom: 20px;
max-width: 430px;
}
.slide-title {
font-weight: 500;
font-size: 24px;
line-height: 100%;
letter-spacing: 0%;
}
.slide-description {font-weight: 400;font-size: 18px;line-height: 100%;letter-spacing: 0%;}
.slide-btn {
display: inline-block;
background: transparent;
border: 2px solid var(--theme-color);
border-radius: 50px;
padding: 12px 18px;
font-size: 1rem;
font-weight: 600;
color: var(--theme-color);
text-decoration: none;
transition: all 0.3s;
margin-left: 0 !important;
}
.slide-btn:hover {
background: var(--theme-color-light);
color: var(--theme-color);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
} .carousel-dots {
display: flex;
justify-content: center;
gap: 0.75rem;
}
.carousel-dots .dot {
width: 8px;
height: 8px;
background: #cbd5e1;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s;
}
.carousel-dots .dot:hover {
background: #94a3b8;
}
.carousel-dots .dot.active {
background: #1e293b;
border-radius: 6px;
} @media (max-width: 1024px) {
.slide-content {
flex-direction: column;
padding: 2rem;
}
.slide-image {
flex: 0 0 auto;
width: 100%;
max-width: 500px;
}
.slide-title {
font-size: 1.75rem;
}
.slide-description {
font-size: 1rem;
}
}
@media (max-width: 768px) {
.carousel-tabs {
flex-wrap: wrap;
gap: 0.75rem;
}
.carousel-tab {
font-size: 1rem;
padding: 0.75rem 1.5rem;
}
.slide-content {
padding: 1.5rem;
}
.slide-title {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.slide-description {
font-size: 0.9375rem;
margin-bottom: 1.5rem;
}
.carousel-slides-wrapper::before,
.carousel-slides-wrapper::after {
display: none;
}
}
@media (max-width: 480px) {
.carousel-tab {
flex: 1 1 auto;
min-width: 100px;
padding: 0.625rem 1rem;
font-size: 0.9375rem;
}
} @media (max-width: 1024px) {
.pourquoi-bulle-hero h1 {
font-size: 2.5rem;
}
.process-card h3,
.pour-vous-section .text-content h3 {
font-size: 20px;
}
.grid-4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.pourquoi-bulle-hero h1 {
font-size: 2rem;
}
.grid-2,
.grid-4 {
grid-template-columns: 1fr;
}
.pour-vous-section .grid-2:nth-child(even) {
direction: ltr;
}
.partenaire-section .partenaire-image img {
max-width: 350px;
margin: 0 auto;
display: block;
}
.faq-pourquoi-bulle .article-faq .container.flex {
flex-direction: column;
gap: 3rem;
}
.faq-pourquoi-bulle .colonne-fixe {
width: 100%;
}
.process-number {
font-size: 36px;
}
.tester-card {
padding: 30px;
}
}
@media (max-width: 480px) {
.process-card,
.tester-card {
padding: 20px;
}
.pourquoi-bulle-hero h1 {
font-size: 1.75rem;
}
.process-number {
font-size: 32px;
}
} .faq-accordion {
max-width: 100%;
}
.faq-item {
border: 0.5px solid var(--color-text);
margin-bottom: 10px;
border-radius: 10px;
padding: 20px;
}
.faq-question {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0;
background: none;
border: none;
cursor: pointer;
text-align: left;
transition: color 0.2s;
font-family: Bricolage Grotesque;
font-weight: 600;
font-size: 18px;
line-height: 100%;
letter-spacing: 0%;
}
.faq-question:hover {
color: var(--theme-color);
}
.faq-question.active {
color: var(--color-primary);
} .faq-icon {
position: relative;
width: 36px;
height: 36px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
} .faq-icon .icon-plus {
display: block;
}
.faq-icon .icon-minus {
display: none;
} .faq-question.active .faq-icon .icon-plus {
display: none;
}
.faq-question.active .faq-icon .icon-minus {
display: block;
} .faq-icon svg {
transition: transform 0.3s ease;
position: absolute;
top: 0;
left: 0;
}
.faq-question:hover .faq-icon svg {
transform: scale(1.05);
} .faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.faq-answer p {
font-family: var(--font-body);
font-weight: 400;
font-size: 16px;
line-height: 18px;
letter-spacing: 0%;
}
.article-faq .container.flex {
gap: 120px;
max-width: 1200px;
}
.colonne-fixe {
width: 390px;
flex-shrink: 0; 
}
.colonne-flexible {
flex: 1; 
}
.faq h2 {
font-family: var(--font-display);
font-weight: 300;
font-size: 38px;
line-height: 48px;
}
.faq .nineties {
font-weight: 700;
} .carousel-offres {
position: relative;
} .carousel-tabs {
display: flex;
justify-content: center;
gap: 1rem;
}
.carousel-tab {
background: #fff;
border: 2px solid #e2e8f0;
border-radius: 12px;
padding: 0.875rem 2rem;
font-size: 1.125rem;
font-weight: 600;
color: #64748b;
cursor: pointer;
transition: all 0.3s;
}
.carousel-tab:hover {
border-color: #cbd5e1;
color: #475569;
}
.carousel-tab.active {
background: var(--theme-color-light);
color: var(--theme-color);
} .carousel-slides-wrapper {
position: relative;
min-height: 400px;
}
.carousel-slide {
display: none;
opacity: 0;
transition: opacity 0.5s ease;
}
.carousel-slide.active {
display: block;
opacity: 1;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .slide-content {
background: #fff;
border-radius: 16px;
padding: 3rem;
display: flex;
gap: 3rem;
position: relative;
flex-direction: row;
justify-content: center;
}
.slide-content::before {
top: -6px;
left: -6px;
}
.slide-content::after {
top: -6px;
right: -6px;
}
.carousel-slides-wrapper::before {
left: 3rem;
}
.carousel-slides-wrapper::after {
right: 3rem;
} .slide-image {
flex: 0 0 45%;
border-radius: 12px;
overflow: hidden;
height: 300px;
max-width: 400px;
}
.slide-image img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
} .slide-text {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding-top: 20px;
padding-bottom: 20px;
max-width: 430px;
}
.slide-title {
font-weight: 500;
font-size: 24px;
line-height: 100%;
letter-spacing: 0%;
}
.slide-description {font-weight: 400;font-size: 18px;line-height: 100%;letter-spacing: 0%;}
.slide-btn {
display: inline-block;
background: transparent;
border: 2px solid var(--theme-color);
border-radius: 50px;
padding: 12px 18px;
font-size: 1rem;
font-weight: 600;
color: var(--theme-color);
text-decoration: none;
transition: all 0.3s;
margin-left: 0 !important;
}
.slide-btn:hover {
background: var(--theme-color-light);
color: var(--theme-color);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
} .carousel-dots {
display: flex;
justify-content: center;
gap: 0.75rem;
}
.carousel-dots .dot {
width: 8px;
height: 8px;
background: #cbd5e1;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s;
}
.carousel-dots .dot:hover {
background: #94a3b8;
}
.carousel-dots .dot.active {
background: #1e293b;
border-radius: 6px;
} @media (max-width: 1024px) {
.slide-content {
flex-direction: column;
padding: 2rem;
}
.slide-image {
flex: 0 0 auto;
width: 100%;
max-width: 500px;
}
.slide-title {
font-size: 1.75rem;
}
.slide-description {
font-size: 1rem;
}
}
@media (max-width: 768px) {
.carousel-tabs {
flex-wrap: wrap;
gap: 0.75rem;
}
.carousel-tab {
font-size: 1rem;
padding: 0.75rem 1.5rem;
}
.slide-content {
padding: 1.5rem;
}
.slide-title {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.slide-description {
font-size: 0.9375rem;
margin-bottom: 1.5rem;
}
.carousel-slides-wrapper::before,
.carousel-slides-wrapper::after {
display: none;
}
}
@media (max-width: 480px) {
.carousel-tab {
flex: 1 1 auto;
min-width: 100px;
padding: 0.625rem 1rem;
font-size: 0.9375rem;
}
}  .tarifs-tabs-wrap {
display: flex;
justify-content: center;
gap: 30px;
margin: 32px auto 48px;
}
.tarifs-tab {
padding: 12px 28px;
font-size: 18px;
font-weight: 500;
cursor: pointer;
border: 1px solid var(--color-text);
background: transparent;
color: hsl(0deg 0% 16.86% / 60%);
font-family: var(--font-display);
transition: background 0.2s, color 0.2s;
white-space: nowrap;
border-radius: 5px;
}
.tarifs-tab:first-child {
}
.tarifs-tab:last-child {
}
.tarifs-tab.active {
background: #EFE7D4;
color: var(--color-text);
} .tarifs-panel {
display: none;
}
.tarifs-panel.active {
display: block;
animation: tarifsIn 0.3s ease;
}
@keyframes tarifsIn {
from { opacity: 0; transform: translateY(8px); }
to   { opacity: 1; transform: translateY(0); }
} .tarifs-cards-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
align-items: start;
} .tarifs-card {
background: #FFFCF3;
border-radius: 12px;
overflow: hidden;
}
.tarifs-card-spacer {
height: 44px; BACKGROUND: #fff;
}
.tarifs-popular-banner {
background: #F6BD00;
text-align: center;
font-size: 14px;
font-weight: 600;
padding: 10px;
color: #1a1a1a;
}
.tarifs-card-body {
padding: 28px;
position: relative;
padding-top: 50px;
}
.tarifs-badge {
display: inline-block;
border: 1px solid var(--color-text);
border-radius: 99px;
padding: 4px 12px;
margin-bottom: 14px;
position: absolute;
right: 20px;
font-family: Bricolage Grotesque;
font-weight: 500;
font-style: Medium;
font-size: 12px;
line-height: 14px;
letter-spacing: 0%;
top: 20px;
}
.tarifs-card-name {
margin-bottom: 6px;
font-family: var(--font-display);
font-weight: 500;
font-size: 24px;
line-height: 100%;
letter-spacing: 0%;
}
.tarifs-card-desc {
margin-bottom: 20px;
font-family: var(--font-display);
font-weight: 400;
font-size: 18px;
line-height: 100%;
letter-spacing: 0%;
}
.tarifs-section-label {
margin-bottom: 10px;
color: var(--color-text);
font-family: var(--font-body);
font-weight: 500;
font-size: 14px;
line-height: 18px;
letter-spacing: 0%;
margin-bottom: 20px;
margin-top: 50px;
} .tarifs-feature-list {
list-style: none;
padding: 0;
margin-bottom: 14px;
}
.tarifs-feature-list li {
display: flex;
align-items: flex-start;
gap: 9px;
margin-bottom: 7px;
color: var(--color-text);
font-family: Albert Sans;
font-weight: 400;
font-size: 16px;
line-height: 18px;
letter-spacing: 0%;
}
.tarifs-feature-list li.disabled {
color: #aaa;
}
.tarifs-icon-heart {
font-size: 13px;
flex-shrink: 0;
line-height: 16px;
}
.tarifs-icon-check,
.tarifs-icon-cross {
width: 18px;
height: 18px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.tarifs-icon-check {
background: var(--theme-color);
}
.tarifs-icon-cross {
background: #e85d5d;
}
.tarifs-icon-check svg,
.tarifs-icon-cross svg {
width: 10px;
height: 10px;
} .tarifs-addon {
display: inline-block;
background: #EFE7D4;
font-size: 14px;
padding: 4px 12px;
color: #555;
margin-bottom: 24px;
font-family: var(--font-body);
margin-top: 10px;
} .tarifs-price {
font-size: 38px;
font-weight: 700;
line-height: 1;
margin-bottom: 18px;
font-family: var(--font-nineties);
}
.tarifs-price span {
font-size: 32px;
font-weight: 400;
font-family: var(--font-display);
} .tarifs-cta-btn {
display: inline-block;
border: 1px solid var(--color-text);
border-radius: 99px;
padding: 11px 24px;
background: transparent;
color: var(--color-text);
text-decoration: none;
margin-bottom: 28px;
transition: background 0.15s, color 0.15s;
font-family: Albert Sans;
font-weight: 600;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
}
.tarifs-cta-btn:hover {
background: var(--color-text);
color: #fff;
} .tarifs-divider {
border: none;
border-top: 1px solid var(--color-text);
margin: 4px 0 24px;
} .tarifs-footer-bar {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
border-top: 1.5px solid #ddd;
padding-top: 28px;
margin-top: 32px;
}
.tarifs-footer-btn {
padding: 16px;
border-radius: 99px;
background: var(--color-text);
color: #fff;
font-size: 15px;
font-weight: 600;
text-align: center;
text-decoration: none;
font-family: var(--font-body);
transition: opacity 0.15s;
}
.tarifs-footer-btn:hover {
opacity: 0.85;
color: #fff;
}
.externalisation .container {
background: #EFE7D4;
border-radius: 15px;
padding-left: 0;
}
.externalisation .grid.grid-2 {
grid-template-columns: auto 1fr;
gap: 90px;
align-items: center;
}
.externalisation p.paragraphe.mb-xl {
margin-left: 0;
} .faq-main {
padding: 80px 0;
}
.faq-layout {
display: grid;
grid-template-columns: 390px 1fr;
gap: 120px;
max-width: 1200px;
} .faq-sidebar {
position: sticky;
top: 120px;
align-self: start;
}
.faq-sidebar h2 {
font-family: var(--font-display);
font-weight: 300;
font-size: 38px;
line-height: 48px;
margin-bottom: 32px;
color: var(--color-text);
} .faq-menu {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 32px;
}
.faq-tab {
width: 100%;
text-align: left;
padding: 16px 20px;
font-family: var(--font-display);
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
border: none;
border-bottom: 1px solid #EFE7D4;
background: transparent;
}
.faq-tab:hover {
background: #EFE7D4;
border-color: #EFE7D4;
}
.faq-tab.active {
background: #EFE7D4;
color: var(--text-color);
font-weight: 600;
border-radius: 5px;
}
.btn-contact-faq {
width: 100%;
text-align: center;
} .faq-content {
position: relative;
}
.faq-category {
display: none;
animation: fadeIn 0.4s ease;
}
.faq-category.active {
display: block;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
} @media (max-width: 768px) {
.tarifs-cards-grid {
grid-template-columns: 1fr;
}
.tarifs-footer-bar {
grid-template-columns: 1fr;
}
.tarifs-tab {
font-size: 13px;
padding: 10px 16px;
}
.tarifs-price {
font-size: 36px;
}
.regie-ligne-1 .regie-card {
margin-top: 5px;
}
.faq-layout {
grid-template-columns: 1fr;
}
.faq-sidebar {
position: relative;
}
section.faq-main {
padding-top: 0 !important;
}
}