section {
padding: 80px 0;
} .pourquoi-bulle-hero {
min-height: 70vh;
background: rgba(var(--theme-color-light-rgb), 0.2);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
padding: 0 0 30px;
padding-top: 150px;
background: linear-gradient(
180deg, rgba(255, 252, 243, 1) 85%, rgba(255, 255, 255, 1) 85%
);
}
.pourquoi-bulle-hero h1 {
font-family: var(--font-display);
font-weight: 500;
font-size: 18px;
line-height: 100%;
}
.pourquoi-bulle-hero h2 {
font-weight: 300;
font-size: 48px;
line-height: 52px;
}
section.pourquoi-bulle-hero .hero-content p {
line-height: 27px;
} section.pourquoi-bulle-hero.qui-sommes-nous-hero {
display: block;
}
.qui-sommes-nous-hero .grid {
gap: 150px;
grid-template-columns: 590px 1fr;
}
.qui-sommes-nous-hero a.btn.cta2 {
background: #EFE7D4;
border: none;
}
.qui-sommes-nous-hero img {
margin: auto;
} img.thomas {
position: absolute;
left: -10px;
top: 30px;
}
img.gregoire {
position: absolute;
right: 0;
top: 0px;
}
.canousconnait .container {
position: relative;
} .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;
}
.cequilfaut .grid {
gap: 110px;
}
.cequilfaut h3.mb-md {
font-family: var(--font-display);
font-weight: 500;
font-size: 21px;
line-height: 100%;
letter-spacing: 0%;
}
.cequilfaut .gauche p {
font-weight: 400;
font-size: 16px;
line-height: 18px;
letter-spacing: 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-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;
border-radius: 5px;
}
.case-beige li {
list-style: none;
} .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;
background: #FFFCF3;
}
.cell.label {
justify-content: flex-start;
text-align: left;
font-size: 18px;
}
.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);
background: transparent;
}
.bulle-col {
background: #F0EDE3;
border-radius: 12px 12px 0 0;
flex-direction: column;
gap: 8px;
}
.bulle-col-body {
background: #EFE7D4;
}
.bulle-logo svg {
width: 87px;
height: auto;
}
.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);
} .comparison-stacked {
display: none;
} @media (max-width: 1024px) {
.comparison-grid {
grid-template-columns: 140px repeat(4, 1fr);
column-gap: 16px;
}
.cell,
.col-header {
font-size: 16px;
padding: 12px 10px;
}
.col-header {
padding: 18px 10px 14px;
}
.bulle-logo svg {
width: 70px;
}
} @media (max-width: 768px) {
.comparison-grid {
display: none;
}
.comparison-stacked {
display: flex;
flex-direction: column;
gap: 24px;
}
.competitor-card {
background: #FFFCF3;
border-radius: 12px;
overflow: hidden;
}
.competitor-header {
padding: 20px 16px;
text-align: center;
font-weight: 600;
font-size: 18px;
border-bottom: 0.5px solid var(--color-border-tertiary);
}
.competitor-header.bulle {
background: #F0EDE3;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.competitor-header.bulle svg {
width: 70px;
height: auto;
}
.competitor-header.bulle .bulle-subtitle {
font-size: 11px;
letter-spacing: 0.08em;
color: #555;
text-transform: lowercase;
font-weight: 400;
}
.criterion-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 16px;
border-bottom: 0.5px solid var(--color-border-tertiary);
}
.criterion-row:last-child {
border-bottom: none;
}
.criterion-label {
font-size: 14px;
color: var(--color-text-secondary);
font-weight: 400;
}
.criterion-value {
font-size: 14px;
color: var(--color-text-primary);
font-weight: 500;
text-align: right;
}
.competitor-card.bulle .criterion-row {
background: #EFE7D4;
}
.competitor-card.bulle .criterion-value {
font-weight: 600;
}
.price-light {
color: var(--color-text-secondary);
}
}
@media (max-width: 480px) {
.comparison-stacked {
gap: 20px;
}
.competitor-header {
padding: 16px 12px;
font-size: 18px;
}
.competitor-header.bulle svg {
width: 60px;
}
.criterion-row {
padding: 16px;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.criterion-label {
font-size: 18px;
}
.criterion-value {
font-size: 16px;
text-align: left;
}
} .paragraphe .ponctuel-intro {
max-width: 550px !important;
}
.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;
position: relative;
}
.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: 24px 0;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
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: 24px;
font-weight: 500;
color: #fff;
line-height: 24px;
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;
margin-top: auto;
}
.ponctuel-card:hover .ponctuel-card-price {
display: block;
}
.ponctuel-card-price strong {
display: block;
font-size: 15px;
font-weight: 700;
} .ponctuel-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
margin-bottom: 20px;
opacity: 0;
transform: translateY(10px);
transition: all 0.4s ease;
justify-content: center;
}
.ponctuel-card:hover .ponctuel-tags,
.ponctuel-card-link:hover .ponctuel-tags {
opacity: 1;
transform: translateY(0);
}
.ponctuel-tag {
display: inline-block;
padding: 4px 12px;
background: transparent;
border: 1.5px solid #FFFFFF;
border-radius: 15px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 500;
color: #FFFFFF;
white-space: nowrap;
transition: all 0.3s ease;
}
.ponctuel-card:hover .ponctuel-tag:hover,
.ponctuel-card-link:hover .ponctuel-tag:hover {
background: #FFFFFF;
color: #2B2B2B;
} .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;
} span.arrow {
position: absolute;
bottom: 20px;
right: 20px;
opacity: 0;
transform: translateY(10px);
transition: all 0.4s ease;
}
.ponctuel-card:hover span.arrow {
opacity: 1;
} .mb-xl.bloc-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.mb-xl.bloc-head h2 {
margin: 0;
}
.titre {
max-width: 35%;
}
.bloc-head .paragraphe {
margin: 0;
} @media (max-width: 1024px) {
.ponctuel-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.ponctuel-tags {
gap: 6px;
margin-top: 12px;
margin-bottom: 16px;
}
.ponctuel-tag {
padding: 6px 12px;
font-size: 12px;
}
.ponctuel-overlay {
padding: 20px;
}
}
@media (max-width: 600px) {
.ponctuel-grid {
grid-template-columns: 1fr;
}
.ponctuel-image {
aspect-ratio: 4 / 3;
}
}
@media (max-width: 480px) {
.ponctuel-tag {
padding: 5px 10px;
font-size: 11px;
}
.ponctuel-overlay {
padding: 16px;
}
} section.raisondetre .container {
max-width: 895px;
}
.raisondetre-card {
position: relative;
text-align: center;
}
.raisondetre-card svg {
margin: -50px auto 30px;
z-index: 1;
position: relative;
}
.raisondetre-card h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 24px;
line-height: 100%;
}
.raisondetre-card p {
font-family: var(--font-body);
font-weight: 400;
font-size: 18px;
line-height: 100%;
} .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-6.png);
background-repeat: no-repeat;
background-position: left center;
background-size: auto 100%;
}
.solutions .flex {
gap: 20px;
}
.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%;
}
.banniere.ami-cta-band p {
font-family: var(--font-body);
font-weight: 400;
font-size: 18px;
line-height: 100%;
letter-spacing: 0%;
}
.banniere.ami-cta-band {
gap: 40px;
}
.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;
} .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;
} .encart-couleur .container {
color: #FF4B00;
}
.encart-couleur h2 {
color: #FF4B00;
font-weight: 500;
font-size: 24px;
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%;
}
.encart-couleur .grid {
grid-template-columns: 30% 1fr;
} @keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.solution-item {
opacity: 0;
animation: fadeInUp 0.6s ease-out forwards;
border-bottom: 1px solid var(--color-text);
margin-bottom: 10px;
padding: 20px 10px 0 0;
}
.solution-item:nth-child(1) { animation-delay: 0.1s; }
.solution-item:nth-child(2) { animation-delay: 0.2s; }
.solution-item:nth-child(3) { animation-delay: 0.3s; }
.solution-accordion {
max-width: 100%;
}
.solution-accordion.colonne-flexible {
margin-bottom: 50px;
}
.solution-question {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0;
background: none;
border: none;
cursor: pointer;
font-size: 1.125rem;
font-weight: 500;
color: #1e293b;
text-align: left;
transition: color 0.2s;
}
.solution-icon {
position: relative;
width: 36px;
height: 36px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.solution-icon .icon-plus  { display: block; }
.solution-icon .icon-minus { display: none; }
.solution-question.active .solution-icon .icon-plus  { display: none; }
.solution-question.active .solution-icon .icon-minus { display: block; }
.solution-icon svg {
transition: transform 0.3s ease;
position: absolute;
top: 0;
left: 0;
}
.solution-question:hover .solution-icon svg {
transform: scale(1.05);
}
.solution-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.solution-answer p {
font-weight: 400;
font-size: 18px;
line-height: 22px;
letter-spacing: 0%;
} .brand-content .droite {
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
}
.brand-content .grid {
background: #fff;
background-image: none;
padding: 0;
gap: 80px;
grid-template-columns: 500px 1fr;
}
.brand-content {
max-width: 1200px;
margin: auto;
} .article-solution .container.flex {
gap: 120px;
max-width: 1200px;
}
.colonne-fixe {
width: 390px;
flex-shrink: 0;
}
.colonne-flexible {
flex: 1;
}
.solution h2 {
font-family: var(--font-display);
font-weight: 300;
font-size: 38px;
line-height: 48px;
}
.solution .nineties {
font-weight: 700;
} .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 {
width: 51px;
height: 51px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50px;
}
.approche-icon img {
width: 25px;
height: 25px;
object-fit: contain;
}
.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;
} .votre-studio {
background: #FFFCF3;
}
.gregoire {
display: flex;
align-items: center;
flex-direction: column;
gap: 20px;
}
.thomas {
display: flex;
align-items: center;
flex-direction: column;
justify-content: flex-end;
gap: 20px;
}
.image-haut {
margin-bottom: 20px;
} .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;
}
section.py-3xl.montreenmain {
background-image: url(//www.bulle-studio.com/wp-content/uploads/2026/04/Vector-13.png);
background-position: center left;
background-repeat: no-repeat;
background-size: 29%;
} .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;
} .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;
} .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;
} .collab .container {
background: #FFFCF3;
border-radius: 15px;
padding: 0;
}
.collab .grid.grid-2 {
grid-template-columns: auto 1fr;
gap: 90px;
align-items: center;
}
.collab p.paragraphe.mb-xl {
margin-left: 0;
}
.collab p {
max-width: 90%;
margin-left: 0;
}
.parlons-bien .grid.grid-2.gap-3xl {
position: relative;
padding: 40px;
} .enquelquesmots .grid {
grid-template-columns: 1fr 538px;
gap: 100px;
}
.enquelquesmots .container {
max-width: 1200px;
}
.enquelquesmots .gauche {
padding-right: 40px;
}
.item-link {
background: rgb(239 231 212 / 20%);
padding: 30px 20px;
margin-bottom: 10px;
position: relative;
}
.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);
} span.nineties {
font-weight: 700;
font-size: 42px;
line-height: 48px;
} .contact-quisommesnous .container {
background-color: #FFFCF3;
background-image: url(//www.bulle-studio.com/wp-content/uploads/2026/04/Vector-14.png);
background-position: bottom right;
background-repeat: no-repeat;
}
.contact-qsn-grid {
display: grid;
grid-template-columns: auto 1fr;
gap: 60px;
align-items: center;
}
.contact-qsn-image {
border-radius: 16px;
overflow: hidden;
height: 380px;
background: #ddd;
}
.contact-qsn-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.contact-qsn-logo {
display: flex;
align-items: flex-end;
gap: 4px;
margin-bottom: 16px;
}
.contact-qsn-logo-sub {
font-size: 12px;
letter-spacing: 0.06em;
color: #555;
margin-bottom: 2px;
}
.contact-qsn-title {
font-size: clamp(22px, 3vw, 32px);
font-weight: 300;
margin-bottom: 16px;
font-family: var(--font-display);
}
.contact-qsn-texte {
font-size: 15px;
line-height: 1.7;
color: #444;
margin-bottom: 28px;
max-width: 420px;
}
.contact-qsn-deco {
position: absolute;
right: -20px;
bottom: -20px;
width: 120px;
opacity: 0.4;
pointer-events: none;
}
.contact-qsn-content {
position: relative;
}
.contact-qsn-content .paragraphe {
margin: 0;
} @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;
}
.inside {
padding: 20px;
}
img.thomas {
display: none;
}
img.gregoire {
display: none;
}
.case-beige {
margin-top: 10px;
}
.parlons-bien .grid.grid-2.gap-3xl {
padding: 20px;
}
}
@media (max-width: 480px) {
.process-card,
.tester-card {
padding: 20px;
}
.pourquoi-bulle-hero h1 {
font-size: 1.75rem;
}
.process-number {
font-size: 32px;
}
} .agence-marketing-hero {
background: linear-gradient(
180deg, rgba(255, 252, 243, 1) 85%, rgba(255, 255, 255, 1) 85%
) !important;
}
.agence-marketing-hero h1 {
font-family: var(--font-display);
font-weight: 300;
font-size: 42px;
line-height: 50px;
}
.agence-marketing-hero .grid {
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: flex-start;
padding-top: 40px;
}
.agence-marketing-hero .hero-image p {
font-size: 16px;
line-height: 26px;
color: #444;
} .content-marketing-section .gauche {
position: sticky;
top: 120px;
}
.benefit-list {
display: flex;
flex-direction: column;
gap: 32px;
}
.benefit-item {
display: flex;
gap: 20px;
align-items: flex-start;
}
.benefit-icon {
width: 44px;
height: 44px;
background: rgba(255, 75, 0, 0.08);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.benefit-item h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: 18px;
line-height: 24px;
margin-bottom: 6px;
color: var(--color-text);
}
.benefit-item p {
font-size: 16px;
line-height: 24px;
color: #555;
margin: 0;
} .checklist-verte {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.checklist-verte li {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--font-display);
font-weight: 600;
font-size: 18px;
line-height: 24px;
}
.checklist-verte li::before {
content: "";
display: block;
width: 22px;
height: 22px;
flex-shrink: 0;
background-color: #1B5E3F;
mask-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='11' fill='%23000'/%3E%3Cpath d='M9.5 16.5L4.5 11.5L5.91 10.09L9.5 13.67L16.09 7.08L17.5 8.5L9.5 16.5Z' fill='white'/%3E%3C/svg%3E");
mask-repeat: no-repeat;
mask-size: contain;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='11' fill='%23000'/%3E%3Cpath d='M9.5 16.5L4.5 11.5L5.91 10.09L9.5 13.67L16.09 7.08L17.5 8.5L9.5 16.5Z' fill='white'/%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
} .logos-clients {
display: flex;
gap: 24px;
align-items: center;
flex-wrap: wrap;
}
.logos-clients img {
height: 32px;
width: auto;
object-fit: contain;
filter: grayscale(1);
opacity: 0.6;
transition: opacity 0.2s, filter 0.2s;
}
.logos-clients img:hover {
opacity: 1;
filter: grayscale(0);
} .services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.service-card {
border: 1px solid #E8E4D8;
border-radius: 12px;
overflow: hidden;
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.service-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}
.service-card-inner {
padding: 32px 24px;
display: flex;
flex-direction: column;
height: 100%;
}
.service-card h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: 20px;
line-height: 26px;
margin-bottom: 10px;
color: var(--color-text);
}
.service-card > .service-card-inner > p {
font-size: 15px;
line-height: 22px;
color: #666;
margin-bottom: 20px;
}
.service-list {
list-style: none;
padding: 0;
margin: 0 0 24px;
flex: 1;
}
.service-list li {
font-size: 15px;
line-height: 22px;
padding: 8px 0;
border-bottom: 1px solid #F0EDE3;
color: #444;
display: flex;
align-items: center;
gap: 8px;
}
.service-list li::before {
content: "";
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #FF4B00;
flex-shrink: 0;
}
.service-list li:last-child {
border-bottom: none;
}
.service-price {
font-family: var(--font-display);
font-weight: 700;
font-size: 18px;
color: var(--color-text);
margin-bottom: 16px;
padding-top: 16px;
border-top: 2px solid #F0EDE3;
}
.service-price span {
font-weight: 400;
font-size: 14px;
color: #888;
} .profils-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.profil-card {
background: #fff;
border-radius: 12px;
padding: 36px 28px;
border: 1px solid #E8E4D8;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.profil-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}
.profil-icon {
width: 60px;
height: 60px;
background: #FFFCF3;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.profil-card h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: 18px;
line-height: 26px;
margin-bottom: 12px;
color: var(--color-text);
}
.profil-card p {
font-size: 15px;
line-height: 22px;
color: #666;
margin: 0;
} .pour-cela-fonctionne {
background: #FFF3EE;
border-left: 4px solid #FF4B00;
border-radius: 0 12px 12px 0;
padding: 28px 32px;
max-width: 700px;
margin: 0 auto;
}
.pour-cela-fonctionne h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: 18px;
color: #FF4B00;
margin-bottom: 12px;
}
.pour-cela-fonctionne p {
font-size: 15px;
line-height: 22px;
color: #444;
margin-bottom: 8px;
}
.pour-cela-fonctionne p:last-child {
margin-bottom: 0;
} .temoignage-featured {
max-width: 800px;
margin: 0 auto;
padding: 48px 60px;
background: #fff;
border-radius: 16px;
position: relative;
}
.temoignage-featured::before {
content: "\201C";
font-family: var(--font-display);
font-size: 120px;
line-height: 1;
color: #FF4B00;
opacity: 0.15;
position: absolute;
top: 0;
left: 30px;
pointer-events: none;
}
.temoignage-featured blockquote {
font-family: var(--font-display);
font-weight: 300;
font-size: 22px;
line-height: 34px;
color: var(--color-text);
margin: 0 0 24px;
border: none;
padding: 0;
position: relative;
z-index: 1;
}
.temoignage-featured cite {
font-family: var(--font-display);
font-weight: 600;
font-size: 16px;
color: #FF4B00;
font-style: normal;
} .blog-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.blog-card {
border-radius: 12px;
overflow: hidden;
background: #FFFCF3;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blog-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}
.blog-card-image {
aspect-ratio: 16 / 9;
overflow: hidden;
}
.blog-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.blog-card:hover .blog-card-image img {
transform: scale(1.04);
}
.blog-card-content {
padding: 20px;
}
.blog-card-cat {
display: inline-block;
font-family: var(--font-display);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #FF4B00;
margin-bottom: 8px;
}
.blog-card h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: 16px;
line-height: 22px;
margin-bottom: 8px;
}
.blog-card h3 a {
color: var(--color-text);
text-decoration: none;
}
.blog-card h3 a:hover {
color: #FF4B00;
}
.blog-card p {
font-size: 14px;
line-height: 20px;
color: #666;
margin: 0;
} .faq-accordion {
display: flex;
flex-direction: column;
gap: 0;
}
.faq-item {
border-bottom: 1px solid #E8E4D8;
padding: 20px 0 0;
}
.faq-question {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0 20px;
background: none;
border: none;
cursor: pointer;
font-family: var(--font-display);
font-size: 17px;
font-weight: 500;
color: var(--color-text);
text-align: left;
transition: color 0.2s;
gap: 16px;
}
.faq-question:hover {
color: #FF4B00;
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.faq-answer p {
font-size: 16px;
line-height: 24px;
color: #555;
padding-bottom: 20px;
margin: 0;
} .livre-blanc-section .grid {
background: transparent;
background-image: none;
padding: 0;
}
.livre-blanc-section img {
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
} @media (max-width: 1200px) {
.services-grid {
grid-template-columns: repeat(2, 1fr);
}
.blog-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 1024px) {
.agence-marketing-hero .grid {
grid-template-columns: 1fr;
gap: 40px;
}
.profils-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.agence-marketing-hero h1 {
font-size: 30px;
line-height: 38px;
}
.content-marketing-section .gauche {
position: static;
}
.services-grid {
grid-template-columns: 1fr;
}
.profils-grid {
grid-template-columns: 1fr;
}
.blog-grid {
grid-template-columns: 1fr;
}
.temoignage-featured {
padding: 32px 24px;
}
.temoignage-featured blockquote {
font-size: 18px;
line-height: 28px;
}
.logos-clients {
gap: 16px;
}
.pour-cela-fonctionne {
padding: 20px;
}
}
@media (max-width: 480px) {
.benefit-item {
gap: 14px;
}
.service-card-inner {
padding: 24px 18px;
}
.profil-card {
padding: 24px 20px;
}
}   .ami-h2-light {
font-family: var(--font-display);
font-weight: 300;
font-size: 38px;
line-height: 48px;
color: #2B2B2B;
margin: 0 0 20px;
} .ami-h2-nineties {
font-family: 'Behind The Nineties', var(--font-display);
font-weight: 700;
font-size: 42px;
line-height: 48px;
color: #2B2B2B;
margin: 0 0 20px;
} .ami-h3-light {
font-family: var(--font-display);
font-weight: 300;
font-size: 32px;
line-height: 42px;
color: #2B2B2B;
margin: 0 0 16px;
} .ami-h4-text {
font-family: var(--font-display);
font-weight: 500;
font-size: 21px;
line-height: 25px;
color: #2B2B2B;
display: block;
} .ami-section-white {
background: #FFFFFF;
} .ami-hero {
padding-top: 140px;
padding-bottom: 0;
background: #FFFFFF;
text-align: center;
}
.ami-hero .top-title {
display: block;
text-align: center;
margin-bottom: 16px;
}
.ami-hero-h1 {
font-family: var(--font-display);
font-weight: 300;
font-size: 48px;
line-height: 52px;
color: #2B2B2B;
text-align: center;
max-width: 791px;
margin: 0 auto 30px;
}
.ami-hero-intro {
max-width: 795px;
margin: 0 auto 50px;
text-align: center;
font-size: 18px;
line-height: 22px;
} .ami-hero-image {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 0;
}
.ami-hero-image img {
width: 100%;
height: 458px;
object-fit: cover;
border-radius: 15px;
display: block;
} .ami-cta-band {
gap: 40px;
border-radius: 5px;
gap: 170px;
}
.ami-cta-band p {
font-family: var(--font-display);
font-size: 18px;
line-height: 22px;
flex: 1;
text-align: left;
margin: 0;
} .ami-benefits {
display: flex;
flex-direction: column;
gap: 30px;
}
.ami-benefit.item-line h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 21px;
line-height: 25px;
color: #2B2B2B;
margin: 0 0 8px;
}
.ami-benefit.item-line p {
font-family: 'Albert Sans', var(--font-body);
font-weight: 400;
font-size: 16px;
line-height: 18px;
color: #2B2B2B;
margin: 0;
} .ami-img-rounded {
width: 100%;
border-radius: 15px;
display: block;
} .ami-logos-section {
padding: 40px 0;
background: #FFFFFF;
border-top: 1px solid #F0EDE3;
border-bottom: 1px solid #F0EDE3;
}
.ami-logos-row {
display: flex;
align-items: center;
justify-content: center;
gap: 60px;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
padding: 0 120px;
}
.ami-logos-row img {
height: 60px;
width: auto;
object-fit: contain;
filter: grayscale(0.2);
opacity: 0.8;
transition: opacity 0.2s;
}
.ami-logos-row img:hover { opacity: 1; } .ami-services-head {
display: grid;
grid-template-columns: 478px 1fr;
gap: 80px;
align-items: start;
margin-bottom: 50px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
} .ami-services-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.ami-services-scroll::-webkit-scrollbar { display: none; }
.ami-services-cards {
display: flex;
gap: 20px;
padding: 0 120px 40px;
align-items: flex-end;
min-width: max-content;
} .ami-service-card {
width: 285px;
flex-shrink: 0;
border-radius: 5px;
overflow: hidden;
}
.ami-service-img {
position: relative;
height: 365px;
background-size: cover;
background-position: center;
border-radius: 5px;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 20px;
} .ami-service-img::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1));
border-radius: 5px;
z-index: 0;
}
.ami-service-title {
font-family: var(--font-display);
font-weight: 500;
font-size: 24px;
line-height: 29px;
color: #FFFFFF;
text-align: center;
position: relative;
z-index: 1;
margin: 0;
} .ami-service-card--tall .ami-service-img {
height: 439px;
justify-content: space-between;
border-radius: 5px 5px 0 0;
}
.ami-service-body {
position: relative;
z-index: 1;
color: #FFFFFF;
}
.ami-service-body p,
.ami-service-body ul,
.ami-service-body li {
font-family: 'Albert Sans', var(--font-body);
font-size: 16px;
line-height: 18px;
color: #FFFFFF;
margin-bottom: 6px;
}
.ami-service-body ul { padding-left: 16px; margin: 8px 0; }
.ami-service-price {
display: block;
font-family: var(--font-display);
font-weight: 600;
font-size: 18px;
line-height: 22px;
color: #FFFFFF;
text-align: center;
margin-top: 12px;
}
.ami-service-price span {
font-weight: 400;
font-size: 14px;
} .ami-service-footer {
height: 73px;
background: #EFE7D4;
border-radius: 0 0 5px 5px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 18px;
font-family: 'Albert Sans', var(--font-body);
font-weight: 600;
font-size: 16px;
line-height: 19px;
color: #2B2B2B;
} .ami-profils {
display: flex;
flex-direction: column;
gap: 10px;
} .ami-profil-item.item-line {
background: #FFFCF3;
border-radius: 5px;
padding: 14px 30px 14px 30px;
overflow: hidden;
}
.page-template-page-agence-web-offshore .ami-profil-item.item-line {
background: #fff;
}
.ami-profil-item h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: 18px;
line-height: 22px;
color: #2B2B2B;
margin: 0 0 8px;
}
.ami-profil-item p {
font-family: 'Albert Sans', var(--font-body);
font-size: 18px;
line-height: 22px;
color: #2B2B2B;
margin: 0;
} .ami-fonctionne {
position: relative;
border: 1px solid #2B2B2B;
background: #FFFCF3;
} .ami-fonctionne::before,
.ami-fonctionne::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
background: #2B2B2B;
border-radius: 0;
}
.ami-fonctionne::before { top: -5px; left: -5px; box-shadow: calc(100% + 2px) 0 0 #2B2B2B; }
.ami-fonctionne::after  { bottom: -5px; left: -5px; box-shadow: calc(100% + 2px) 0 0 #2B2B2B; }
.ami-fonctionne-inner {
display: grid;
grid-template-columns: 300px 1fr;
gap: 60px;
padding: 40px 50px;
}
.ami-fonctionne-inner h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 24px;
line-height: 29px;
color: #2B2B2B;
margin: 0;
}
.ami-fonctionne-inner p {
font-family: 'Albert Sans', var(--font-body);
font-size: 18px;
line-height: 22px;
color: #2B2B2B;
margin: 0;
} .ami-portfolio-grid {
display: flex;
gap: 22px;
align-items: stretch;
max-width: 895px;
margin: auto;
}
.ami-portfolio-card {
flex: 1;
background: #FFFFFF;
box-shadow: 0px 2.7px 6.76px rgba(0,0,0,0.15);
border-radius: 5px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.ami-portfolio-card img {
height: 140px;
object-fit: cover;
}
.ami-portfolio-top {
padding: 21px 22px 16px;
flex: 1;
} .ami-portfolio-tag-dark {
background: transparent !important;
border: 1px solid #2B2B2B;
color: #2B2B2B;
border-radius: 50px;
padding: 4px 10px;
font-size: 12px;
font-weight: 500;
display: inline-flex;
margin-bottom: 12px;
}
.ami-portfolio-title {
font-family: var(--font-display);
color: #2B2B2B;
margin: 0 0 12px;
font-weight: 600;
font-style: SemiBold;
font-size: 18px;
line-height: 100%;
letter-spacing: 0%;
}
.ami-portfolio-top p {
font-family: 'Albert Sans', var(--font-body);
font-size: 16px;
line-height: 18px;
color: #2B2B2B;
margin: 0;
}
.ami-portfolio-img {
height: 184px;
background-size: cover;
background-position: center;
background-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
border-radius: 0 0 5px 5px;
flex-shrink: 0;
} .ami-reassurance-grid {
display: grid;
grid-template-columns: 490px 1fr;
gap: 60px;
align-items: start;
}
.ami-quote {
font-family: var(--font-display);
font-weight: 500;
font-size: 21px;
line-height: 25px;
color: #000000;
border: none;
padding: 0;
margin: 0 0 20px;
position: relative;
}
.ami-guillemet {
font-size: 20px;
font-weight: 700;
}
.ami-stars {
color: #F4C426;
font-size: 12px;
letter-spacing: 3px;
margin-bottom: 8px;
}
.ami-client-name {
font-family: var(--font-display);
font-weight: 600;
font-size: 18px;
line-height: 22px;
color: #000000;
margin: 0 0 4px;
}
.ami-dots {
display: flex;
gap: 15px;
margin: 16px 0;
}
.ami-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D9D9D9;
}
.ami-dot--active { background: #2B2B2B; } .ami-awards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.ami-awards-grid img {
width: 100%;
height: 134px;
object-fit: contain;
} .ami-qsn-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 120px;
display: flex;
align-items: flex-end;
gap: 0;
} .ami-qsn-panel {
flex: 1;
background: #FFFAEF;
border: 1px dashed #F4C426;
padding: 57px 60px;
position: relative;
} .ami-qsn-panel::before {
content: '';
position: absolute;
width: 10px;
height: 10px;
background: #F4C426;
top: -5px;
left: -5px;
box-shadow: calc(100% + 2px) 0 0 #F4C426, 0 calc(100% + 2px) 0 #F4C426, calc(100% + 2px) calc(100% + 2px) 0 #F4C426;
} .ami-qsn-panel.contact-qsn-content {
position: relative;
}
.ami-qsn-panel h2 { margin-bottom: 16px; }
.ami-qsn-panel h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 21px;
line-height: 25px;
margin-bottom: 16px;
} .ami-qsn-photo {
width: 256px;
flex-shrink: 0;
position: relative;
z-index: 2;
}
.ami-qsn-photo img { width: 100%; display: block; }
.ami-qsn-photo--thomas  { margin-right: -40px; }
.ami-qsn-photo--gregoire { margin-left: -40px; } .ami-loc-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 40px;
margin-bottom: 30px;
}
.ami-map {
width: 100%;
height: 239px;
border: 0;
border-radius: 15px;
display: block;
} .ami-cta-card {
background-color: #FFFCF3;
border-radius: 15px;
overflow: hidden;
display: grid;
grid-template-columns: 488px 1fr;
min-height: 333px;
background-image: url(https://www.bulle-studio.com/wp-content/uploads/2026/06/Vector-17.png);
background-repeat: no-repeat;
background-position: top right;
}
.ami-cta-card-img {
overflow: hidden;
}
.ami-cta-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px 0 0 5px;
display: block;
}
.ami-cta-card-content {
padding: 50px 60px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 16px;
} .ami-blog-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.ami-blog-item {
display: block;
padding: 14px 60px 14px 20px;
border-radius: 10px;
text-decoration: none;
position: relative;
min-height: 103px;
}
.ami-blog-cat {
display: block;
font-family: 'Albert Sans', var(--font-body);
font-size: 14px;
line-height: 16px;
font-weight: 300;
margin-bottom: 8px;
}
.ami-blog-item h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: 18px;
line-height: 22px;
margin: 0 0 6px;
}
.ami-blog-item p {
font-family: 'Albert Sans', var(--font-body);
font-size: 18px;
line-height: 22px;
margin: 0;
} .ami-faq-item {
box-sizing: border-box;
border: 0.5px solid #2B2B2B;
border-radius: 10px;
overflow: hidden;
margin-bottom: 10px;
} .ami-faq-item .solution-question {
padding: 20px;
border-bottom: none;
}
.ami-faq-item .solution-answer p {
padding: 0 20px 20px;
} .ami-faq-icon {
flex-shrink: 0;
} .ami-faq-btn.active .ami-faq-plus {
display: none;
} .ami-faq-item .solution-icon { display: none; } .d-block  { display: block; }
.mt-sm    { margin-top: 8px; }
.mt-lg    { margin-top: 24px; }
.m-0      { margin: 0; }
.items-start {align-items: flex-start;gap: 70px;} @media (max-width: 1200px) {
.ami-services-head { grid-template-columns: 1fr 1fr; padding: 0 40px; }
.ami-services-cards { padding: 0 40px 40px; }
.ami-logos-row { padding: 0 40px; }
.ami-hero-image { padding: 0 40px; }
}
@media (max-width: 1024px) {
.ami-hero-h1 { font-size: 36px; line-height: 42px; }
.ami-hero-image img { height: 320px; }
.ami-cta-band { flex-direction: column; text-align: center; }
.ami-cta-card { grid-template-columns: 1fr; }
.ami-cta-card-img { height: 280px; }
.ami-qsn-wrapper { padding: 0 40px; }
.ami-reassurance-grid { grid-template-columns: 1fr; }
.ami-fonctionne-inner { grid-template-columns: 1fr; gap: 20px; }
.ami-services-head { grid-template-columns: 1fr; }
.ami-loc-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 768px) {
.ami-hero-h1 { font-size: 28px; line-height: 36px; }
.ami-h2-light { font-size: 30px; line-height: 38px; }
.ami-hero-image { padding: 0 20px; }
.ami-hero-image img { height: 220px; }
.ami-portfolio-grid { flex-direction: column; }
.ami-blog-grid { grid-template-columns: 1fr; }
.ami-logos-row { gap: 24px; padding: 0 20px; }
.ami-logos-row img { height: 40px; }
.ami-qsn-photo { width: 140px; }
.ami-qsn-photo--thomas { margin-right: -20px; }
.ami-qsn-photo--gregoire { margin-left: -20px; }
.ami-qsn-panel { padding: 30px 24px; }
.ami-services-cards { padding: 0 20px 20px; }
.ami-service-card { width: 240px; }
.ami-fonctionne-inner { padding: 20px 24px; grid-template-columns: 1fr; gap: 16px; }
}  .awo-cta-band-blue {
background: #BFC4FF !important;
margin-top: -50px;
position: relative;
}
.awo-cta-band-blue p {
color: #3A39FF;
} .awo-btn-blue {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 18px;
background: #3A39FF;
color: #FFFFFF;
border: none;
border-radius: 100px;
font-family: 'Albert Sans', var(--font-body);
font-weight: 600;
font-size: 16px;
line-height: 19px;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
transition: background 0.2s;
}
.awo-btn-blue:hover { background: #2928e0; } .awo-btn-outline-blue {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 18px;
background: transparent;
color: #3A39FF;
border: 1px solid #3A39FF;
border-radius: 100px;
font-family: 'Albert Sans', var(--font-body);
font-weight: 600;
font-size: 18px;
line-height: 22px;
text-decoration: none;
cursor: pointer;
transition: background 0.2s;
}
.awo-btn-outline-blue:hover { background: #BFC4FF20; } .awo-keyfigures {
display: flex;
flex-direction: column;
gap: 20px;
}
.awo-kf-row {
display: flex;
gap: 20px;
} .awo-kf-card {
flex: 1;
min-height: 282px;
border-radius: 5px;
padding: 28px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
} .awo-kf-icon {
font-size: 40px;
line-height: 1;
display: block;
margin-bottom: 16px;
}
.awo-kf-card h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: 18px;
line-height: 22px;
margin: 0 0 12px;
}
.awo-kf-card p {
font-family: 'Albert Sans', var(--font-body);
font-size: 16px;
line-height: 18px;
margin: 0;
} .awo-kf-purple {
background: rgba(190, 154, 242, 0.1); }
.awo-kf-purple h3,
.awo-kf-purple p { color: #1A0088; }
.awo-kf-yellow {
background: rgba(244, 196, 38, 0.1); }
.awo-kf-yellow h3,
.awo-kf-yellow p { color: #F6BD00; }
.awo-kf-orange {
background: rgba(255, 192, 166, 0.1); }
.awo-kf-orange h3,
.awo-kf-orange p { color: #FF4B00; }
.awo-kf-blue {
background: rgba(191, 196, 255, 0.1); }
.awo-kf-blue h3,
.awo-kf-blue p { color: #3A39FF; } .awo-kf-image {
background-size: cover;
background-position: center;
position: relative;
}
.awo-kf-image::before {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.4);
border-radius: 5px;
z-index: 0;
}
.awo-kf-image h3,
.awo-kf-image p {
position: relative;
z-index: 1;
color: #fff !important;
} .awo-bulle-section {
background: #FFFCF3;
}
.awo-images-stack {
display: flex;
flex-direction: column;
gap: 20px;
}
.awo-img-top {
height: 252px;
object-fit: cover;
}
.awo-img-bottom {
height: 384px;
object-fit: cover;
} .awo-video-block {
background: #F5F5F5;
border-radius: 15px;
height: 512px;
display: flex;
align-items: center;
justify-content: center;
color: #999;
} .awo-tabs {
display: flex;
align-items: center;
justify-content: center;
gap: 25px;
margin-bottom: 24px;
}
.awo-tab {
padding: 12px 18px;
border-radius: 5px;
border: 1px solid #2B2B2B;
background: transparent;
cursor: pointer;
font-family: var(--font-display);
font-weight: 600;
font-size: 18px;
line-height: 22px;
color: #2B2B2B;
opacity: 0.5;
transition: all 0.2s;
}
.awo-tab--active {
background: #BFC4FF;
border-color: #BFC4FF;
color: #3A39FF;
opacity: 1;
}
.awo-tab:not(.awo-tab--active):hover {
opacity: 0.8;
} .awo-collab-card {
border-radius: 10px;
overflow: hidden;
}
.awo-collab-card--blue {
background: #FFFFFF; }
.awo-collab-inner {
display: grid;
grid-template-columns: 404px 1fr;
gap: 60px;
align-items: stretch;
padding: 40px;
}
.awo-collab-img img {
width: 100%;
height: 304px;
object-fit: cover;
border-radius: 5px;
}
.awo-collab-text h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 24px;
line-height: 29px;
color: #2B2B2B;
margin: 0 0 16px;
}
.awo-collab-text p {
font-family: 'Albert Sans', var(--font-body);
font-size: 18px;
line-height: 22px;
color: #2B2B2B;
margin: 0;
} .awo-tools-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
} .awo-tool-card {
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.awo-tool-header {
padding: 24px 24px 16px;
}
.awo-tool-logo {
height: 36px;
width: auto;
object-fit: contain;
display: block;
margin-bottom: 12px;
}
.awo-tool-desc {
font-family: 'Albert Sans', var(--font-body);
font-size: 16px;
line-height: 18px;
margin: 0;
}
.awo-tool-screenshot {
flex: 1;
overflow: hidden;
}
.awo-tool-screenshot img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
border-radius: 5px;
} .awo-tool-purple {
background: rgba(190, 154, 242, 0.2);
}
.awo-tool-yellow {
background: #EFE7D4;
}
.awo-tool-orange {
background: rgba(255, 192, 166, 0.2);
}
.awo-tool-blue {
background: rgba(191, 196, 255, 0.2);
} .ami-h4 {
font-family: var(--font-display);
font-weight: 500;
font-size: 21px;
line-height: 25px;
color: #2B2B2B;
}  @media (max-width: 1024px) {
.awo-kf-row { flex-wrap: wrap; }
.awo-kf-card { min-width: calc(50% - 10px); }
.awo-collab-inner { grid-template-columns: 1fr; gap: 30px; }
.awo-collab-img img { height: 220px; }
.awo-tools-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.awo-kf-row { flex-direction: column; }
.awo-kf-card { min-height: 200px; }
.awo-tabs { flex-wrap: wrap; gap: 10px; }
.awo-tab { font-size: 16px; padding: 10px 14px; }
.awo-images-stack .awo-img-top { height: 180px; }
.awo-images-stack .awo-img-bottom { height: 240px; }
}  .agm-comparison-wrap {
position: relative;
padding: 30px;
} .agm-corner {
position: absolute;
width: 10px;
height: 10px;
background: #2B2B2B;
border-radius: 0;
z-index: 2;
}
.agm-corner--tl { top: -5px;    left: -5px; }
.agm-corner--tr { top: -5px;    right: -5px; }
.agm-corner--bl { bottom: -5px; left: -5px; }
.agm-corner--br { bottom: -5px; right: -5px; } .agm-table {
width: 100%;
border-collapse: collapse;
} .agm-table-header {
background: #EFE7D4;
}
tr.agm-table-header th {padding-left: 40px;}
.agm-th {
padding: 14px 20px;
font-family: var(--font-display);
font-weight: 500;
font-size: 21px;
line-height: 25px;
color: #2B2B2B;
text-align: left;
}
.agm-th-criteria { width: 226px; }
.agm-th-country  { width: calc(50% - 113px); } .agm-table-row {
border-top: 1px solid rgba(43, 43, 43, 0.3);
}
.agm-td {
padding: 18px 20px;
font-family: 'Albert Sans', var(--font-body);
font-size: 18px;
line-height: 22px;
color: #2B2B2B;
vertical-align: top;
}
.agm-td-label {
font-family: var(--font-display);
font-weight: 600;
font-size: 18px;
line-height: 22px;
color: #2B2B2B;
} .agm-bullet {
display: flex;
align-items: flex-start;
gap: 8px;
margin-bottom: 6px;
font-size: 18px;
line-height: 22px;
color: #2B2B2B;
}
.agm-bullet:last-child { margin-bottom: 0; } .agm-bulle-encart {
background: #FFFCF3;
border-radius: 15px;
padding: 50px 60px;
display: grid;
grid-template-columns: 180px 1fr;
gap: 60px;
align-items: start;
position: relative;
overflow: hidden;
}
.agm-bulle-encart-logo img {
width: 100%;
height: auto;
object-fit: contain;
}
.agm-bulle-encart-content h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 21px;
line-height: 25px;
color: #2B2B2B;
margin: 0 0 16px;
} .agm-choix-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.agm-choix-item {
display: flex;
flex-direction: column;
gap: 12px;
justify-content: space-between;
}
.agm-choix-icon {
font-size: 48px;
line-height: 1;
display: block;
margin-bottom: 4px;
}
.agm-choix-item h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: 18px;
line-height: 22px;
color: #2B2B2B;
margin: 0;
}
.agm-choix-item p {
font-family: 'Albert Sans', var(--font-body);
font-size: 16px;
line-height: 18px;
color: #2B2B2B;
margin: 0;
} .agm-livreblanc .container {
background-color: #EFE7D4;
position: relative;
}
.agm-livreblanc-inner {
display: grid;
grid-template-columns: 1fr auto;
gap: 60px;
align-items: center;
max-width: 1195px;
margin: 0 auto;
}
.agm-livreblanc-content h2 {
margin-bottom: 16px;
}
.agm-livreblanc-img {
width: 300px;
flex-shrink: 0;
}
.agm-livreblanc-img img {
width: 30%;
height: auto;
object-fit: contain;
position: absolute;
top: 0;
right: 0;
}
p.paragraphe.ami {
font-family: var(--font-body);
font-weight: 400;
font-size: 18px;
line-height: 100%;
letter-spacing: 0%;
}
div#awo-tab-agm-ponctuel {
position: relative;
}
.article-card {
transition: transform var(--transition-base), box-shadow var(--transition-base);
height: 100%;
POSITION: RELATIVE;
}
.article-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.article-card h3 {
font-size: 1.125rem;
line-height: 1.4;
}
.article-card h3 a {
color: inherit;
text-decoration: none;
}
.article-card h3 a:hover {
color: var(--color-primary);
}
a.link-arrow {
position: absolute;
bottom: 20px;
right: 20px;
} .gap-md { gap: 16px; } @media (max-width: 1024px) {
.agm-table { font-size: 14px; }
.agm-th, .agm-td { padding: 12px 14px; font-size: 15px; }
.agm-th { font-size: 18px; }
.agm-choix-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
.agm-bulle-encart { grid-template-columns: 1fr; gap: 30px; padding: 40px; }
.agm-livreblanc-inner { grid-template-columns: 1fr; }
.agm-livreblanc-img { width: 200px; margin: 0 auto; }
}
@media (max-width: 768px) { .agm-comparison-wrap { overflow-x: auto; }
.agm-table { min-width: 600px; }
.agm-choix-grid { grid-template-columns: 1fr; }
.agm-th-criteria { width: 140px; }
.agm-bulle-encart { padding: 24px; }
}