/* =========================================================
PAGE TARIFS
========================================================= */

.pricing-hero {
padding: 150px 0 90px;
background:
radial-gradient(circle at 85% 20%, rgba(49, 92, 117, .10), transparent 30%),
linear-gradient(180deg, #fff 0%, var(--cream) 100%);
}

.pricing-hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 70px;
align-items: center;
}

.pricing-hero-text {
max-width: 620px;
}

.pricing-hero-text h1 {
font-family: var(--font-title);
font-size: clamp(38px, 5vw, 62px);
line-height: 1.08;
margin: 15px 0 25px;
}

.pricing-hero-text p {
color: var(--gray);
font-size: 18px;
line-height: 1.8;
margin-bottom: 30px;
max-width: 560px;
}

.pricing-hero-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
}


/* Visuel */

.pricing-hero-visual {
display: flex;
justify-content: center;
}

.pricing-visual-card {
width: 100%;
max-width: 480px;
padding: 35px;
background: #fff;
border: 1px solid var(--gray-light);
border-radius: 25px;
box-shadow: 0 25px 60px rgba(61, 37, 25, .12);
transform: rotate(1deg);
}

.pricing-visual-top {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 25px;
border-bottom: 1px solid var(--gray-light);
}

.pricing-visual-top span {
font-size: 13px;
color: var(--gray);
}

.pricing-visual-top strong {
width: 38px;
height: 38px;
border-radius: 12px;
background: var(--blue-light);
color: var(--blue);
display: flex;
align-items: center;
justify-content: center;
}

.pricing-visual-line {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 15px;
padding: 24px 0;
border-bottom: 1px solid var(--gray-light);
}

.pricing-visual-line span {
font-size: 12px;
color: var(--gray);
}

.pricing-visual-line div {
height: 2px;
background: linear-gradient(
90deg,
var(--brown),
var(--blue)
);
}

.pricing-visual-line strong {
font-size: 12px;
color: var(--brown);
}

.pricing-visual-bottom {
padding-top: 25px;
}

.pricing-visual-bottom small {
color: var(--gray);
}


/* =========================================================
FORMULES
========================================================= */

.pricing-plans {
padding: 100px 0;
background: #fff;
}

.section-heading.centered {
text-align: center;
max-width: 700px;
margin: 0 auto;
}

.section-heading.centered h2 {
margin-left: auto;
margin-right: auto;
}

.section-heading.centered p {
margin-left: auto;
margin-right: auto;
}

.pricing-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 55px;
}

.pricing-card {
position: relative;
background: #fff;
border: 1px solid var(--gray-light);
border-radius: 22px;
padding: 32px 25px;
display: flex;
flex-direction: column;
transition: .3s ease;
}

.pricing-card:hover {
transform: translateY(-7px);
box-shadow: var(--shadow);
}

.pricing-card.featured {
border: 2px solid var(--brown);
box-shadow: 0 20px 50px rgba(91, 57, 38, .12);
}

.pricing-popular {
position: absolute;
top: -13px;
left: 50%;
transform: translateX(-50%);
background: var(--brown);
color: #fff;
padding: 7px 15px;
border-radius: 30px;
font-size: 9px;
font-weight: 800;
letter-spacing: .8px;
white-space: nowrap;
}

.pricing-label {
display: block;
color: var(--blue);
font-size: 10px;
font-weight: 800;
letter-spacing: 1px;
margin-bottom: 10px;
}

.pricing-card h3 {
font-family: var(--font-title);
font-size: 24px;
margin-bottom: 12px;
}

.pricing-card-top p {
color: var(--gray);
font-size: 13px;
line-height: 1.65;
min-height: 65px;
}

.pricing-price {
display: flex;
align-items: baseline;
gap: 6px;
margin: 28px 0 25px;
}

.pricing-price strong {
font-family: var(--font-title);
font-size: 30px;
color: var(--brown);
}

.pricing-price span {
color: var(--gray);
font-size: 12px;
font-weight: 600;
}

.custom-price {
display: flex;
flex-direction: column;
margin: 28px 0 25px;
}

.custom-price strong {
font-family: var(--font-title);
font-size: 29px;
color: var(--brown);
}

.custom-price span {
color: var(--gray);
font-size: 12px;
margin-top: 5px;
}

.pricing-features {
list-style: none;
padding: 0;
margin: 0 0 30px;
}

.pricing-features li {
padding: 10px 0;
border-bottom: 1px solid #eee9e5;
font-size: 12px;
color: #514b46;
}

.pricing-btn {
display: block;
text-align: center;
margin-top: auto;
padding: 13px 16px;
border-radius: 10px;
background: var(--brown);
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: 700;
transition: .3s ease;
}

.pricing-btn:hover {
background: var(--brown-dark);
}

.custom-pricing {
background: linear-gradient(
180deg,
#fff,
#f8f5f1
);
}


/* =========================================================
TARIFS À LA CARTE
========================================================= */

.individual-pricing {
padding: 100px 0;
background: var(--cream);
}

.individual-pricing .section-heading {
max-width: 650px;
}

.individual-pricing-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-top: 50px;
}

.individual-price-item {
background: #fff;
border: 1px solid var(--gray-light);
border-radius: 15px;
padding: 20px 22px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
transition: .25s ease;
}

.individual-price-item:hover {
transform: translateX(4px);
box-shadow: 0 10px 30px rgba(61, 37, 25, .07);
}

.individual-price-item div {
display: flex;
flex-direction: column;
gap: 5px;
}

.individual-price-item strong {
font-family: var(--font-title);
font-size: 14px;
}

.individual-price-item span {
color: var(--gray);
font-size: 11px;
}

.individual-price-item b {
color: var(--brown);
font-family: var(--font-title);
font-size: 13px;
white-space: nowrap;
}


/* =========================================================
VALEURS
========================================================= */

.pricing-values {
padding: 100px 0;
background: #fff;
}

.pricing-values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
margin-top: 50px;
}

.pricing-value {
text-align: center;
padding: 35px 25px;
border: 1px solid var(--gray-light);
border-radius: 20px;
}

.pricing-value-icon {
width: 52px;
height: 52px;
margin: 0 auto 20px;
border-radius: 15px;
background: var(--blue-light);
color: var(--blue);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 800;
}

.pricing-value h3 {
font-family: var(--font-title);
margin-bottom: 10px;
}

.pricing-value p {
color: var(--gray);
font-size: 13px;
line-height: 1.7;
}


/* =========================================================
FAQ
========================================================= */

.pricing-faq {
padding: 100px 0;
background: var(--cream);
}

.faq-list {
max-width: 850px;
margin: 50px auto 0;
}

.faq-item {
background: #fff;
border: 1px solid var(--gray-light);
border-radius: 15px;
margin-bottom: 12px;
overflow: hidden;
}

.faq-item summary {
cursor: pointer;
padding: 22px 25px;
font-family: var(--font-title);
font-size: 14px;
font-weight: 700;
list-style: none;
position: relative;
padding-right: 55px;
}

.faq-item summary::-webkit-details-marker {
display: none;
}

.faq-item summary::after {
content: "+";
position: absolute;
right: 22px;
top: 50%;
transform: translateY(-50%);
width: 27px;
height: 27px;
border-radius: 8px;
background: var(--blue-light);
color: var(--blue);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}

.faq-item[open] summary::after {
content: "−";
}

.faq-item p {
padding: 0 25px 22px;
color: var(--gray);
font-size: 13px;
line-height: 1.75;
}


/* =========================================================
CTA TARIFS
========================================================= */

.pricing-cta {
padding: 100px 0;
background: #fff;
}

.pricing-cta-box {
padding: 55px 60px;
border-radius: 28px;
background:
linear-gradient(
135deg,
var(--brown-dark),
var(--brown)
);
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
gap: 40px;
overflow: hidden;
position: relative;
}

.pricing-cta-box::after {
content: "JD";
position: absolute;
right: 20px;
bottom: -75px;
font-family: var(--font-title);
font-size: 190px;
font-weight: 900;
opacity: .06;
}

.pricing-cta-box > div {
position: relative;
z-index: 1;
}

.pricing-cta-box h2 {
font-family: var(--font-title);
font-size: 32px;
margin: 10px 0;
}

.pricing-cta-box p {
opacity: .8;
line-height: 1.7;
}

.section-eyebrow.light {
color: #dceaf0;
}

.pricing-cta-box .btn {
position: relative;
z-index: 2;
flex-shrink: 0;
}


/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

.pricing-grid {
grid-template-columns: repeat(2, 1fr);
}

.pricing-hero-content {
gap: 45px;
}
}


@media (max-width: 760px) {

.pricing-hero {
padding: 120px 0 70px;
}

.pricing-hero-content {
grid-template-columns: 1fr;
gap: 45px;
}

.pricing-hero-text h1 {
font-size: 40px;
}

.pricing-hero-text p {
font-size: 16px;
}

.pricing-visual-card {
transform: none;
}

.pricing-grid {
grid-template-columns: 1fr;
gap: 25px;
}

.pricing-card {
padding: 30px 24px;
}

.pricing-card-top p {
min-height: auto;
}

.individual-pricing-grid {
grid-template-columns: 1fr;
}

.pricing-values-grid {
grid-template-columns: 1fr;
}

.pricing-cta-box {
padding: 40px 25px;
flex-direction: column;
align-items: flex-start;
}
}


@media (max-width: 420px) {

.pricing-hero-text h1 {
font-size: 34px;
}

.pricing-visual-card {
padding: 25px 20px;
}

.pricing-visual-line {
gap: 9px;
}

.pricing-visual-line span,
.pricing-visual-line strong {
font-size: 10px;
}

.individual-price-item {
align-items: flex-start;
flex-direction: column;
gap: 10px;
}

.individual-price-item b {
font-size: 14px;
}

.pricing-cta-box h2 {
font-size: 27px;
}
}
/* ===== CORRECTIFS PAGE TARIFS ===== */
.pricing-hero { padding-top: 90px; }

/* Annule les règles de la grille d'offres de l'accueil */
.pricing-grid { max-width: none; }

/* Texte lisible sur fond marron */
.pricing-cta-box .eyebrow,
.pricing-cta-box .section-label,
.section-eyebrow.light { color: #dceaf0; }

@media (max-width: 760px) {
  .pricing-hero { padding-top: 60px; }
  .pricing-grid { max-width: 550px; margin-left: auto; margin-right: auto; }
}