:root {
  --color1: #FFFFFF;
  --color2: #000000;
  --color3: #FFBB98;
  --color4: #fce5cc;
}

@font-face {
  font-family: "PlayfairDisplay";
  src: url(./fonts/PlayfairDisplay-VariableFont_wght.ttf) format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Cabin";
  src: url(./fonts/Cabin-VariableFont_wdth\,wght.ttf) format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Abril";
  src: url(./fonts/AbrilFatface-Regular.ttf) format('truetype');
  font-weight: 400;
  font-display: swap;
}

* {
  list-style: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* Styles historiques conservés pour les autres pages */
.containerPresentation { background-color: var(--color4); padding: 1% 3% 1% 3%; margin: 3%; text-align: center; border-radius: 15px; }
.containerPresentation1, .containerPresentation2, .containerPresentation3, .containerPresentation4 { margin-bottom: 3%; }
.containerPresentation1 h2 { font-size: 1.5rem; }
.containerPresentation2 h3, .containerPresentation3 h3, .containerPresentation4 p, .containerPresentation5 p { font-size: 1.2rem; }
.containerproprietairesheader { padding: 3% 10% 0 10%; text-align: center; }
.containerproprietairesheader h2 { margin:0% 5% 5% 5%; }
.section-how-do-we-work { background-color: var(--color1); padding: 5% 3% 1% 3%; text-align: center; }
.section-how-do-we-work .container { max-width: 1200px; margin: 0 auto; }
.section-how-do-we-work .row { display: flex; flex-wrap: wrap; justify-content: space-around; }
.section-how-do-we-work .col-lg-4 { flex: 1; min-width: 30%; margin-bottom: 2%; }
.section-how-do-we-work .icon-wrapper { width: 100px; height: 100px; margin: 0 auto 20px; background-color: var(--color1); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.section-how-do-we-work .icon { width: 60px; height: 60px; background-size: cover; background-position: center; }
.section-how-do-we-work h6 { font-size: 1.2rem; margin-bottom: 10px; font-family: "PlayfairDisplay", serif; color: var(--color2); }
.section-how-do-we-work p { font-size: 1rem; color: var(--color2); font-family: "Cabin", sans-serif; }
.tarifgrid { display: grid; grid-template-columns: 60% 40%; padding: 3% 3% 0 3%; }
.tarifcontainer { background: var(--color4); border-radius: 15px; text-align: center; padding: 5% 5% 0% 5%; box-shadow: 0px 3px 30px rgba(33, 34, 35, 0.3); }
.tarifcontainer h2 { font-size: 2rem; }
.tarifcontainer p { font-size: 1.3rem; }
.services-part { width: 100%; padding: 3%; }
.services { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; }
.service-column { flex: 1; min-width: 30%; margin: 1%; display: flex; flex-direction: column; }
.column-title { font-size: 1.2rem; margin-bottom: 10%; font-family: "PlayfairDisplay", serif; text-align: center; color: var(--color2); }
.service-category { margin-bottom: 3%; text-align: left; }
.service-title { font-size: 1rem; margin-bottom: 1%; font-family: "PlayfairDisplay", serif; text-align: left; cursor: pointer; position: relative; }
.service-title::after { content: '+'; position: absolute; right: 0; font-size: 1.2rem; font-weight: bold; }
.service-title.active::after { content: '-'; }
.service-list { list-style: none; padding: 0; display: none; }
.service-list.active { display: block; }
.service-list li { font-size: 0.9rem; color: var(--color2); font-family: "Cabin", sans-serif; margin-bottom: 1%; display: flex; align-items: center; }
.service-list li i { margin-right: 10px; color: var(--color3); font-size: 0.9; }
.containerprice { background: var(--color4); text-align: center; margin: 0 5% 3% 5%; min-height: 100px; border-radius: 20px; }
.containerprice p { font-size: 2rem; }
.pourquoilafamiliatitle { background: var(--color4); font-size: 1rem; margin: 3% 3% 0 3%; padding: 3% 3% 1% 3%; text-align: center; border-radius: 15px; box-shadow: 0px 3px 30px rgba(33, 34, 35, 0.3); }
.Pourquoilafamilia h2 { text-align: center; }
.Pourquoilafamiliaintro { text-align: center; margin-bottom: 5%; margin-top: 5%; }
.Pourquoilafamiliaintrotext { height: auto; display: flex; align-items: center; justify-content: center; margin: 5% 5% 0 5%; }
.Pourquoilafamiliaavantages { display: flex; width: 100%; justify-content: space-between; max-width: 1800px; padding: 3%; }
.Pourquoilafamiliaavantages h3 { font-size: 1.2rem; margin-bottom: 10px; font-family: "PlayfairDisplay", serif; color: var(--color2); text-align: center; }
.Pourquoilafamiliaavantages ul { font-size: 1rem; color: var(--color2); font-family: "Cabin", sans-serif; }
.Pourquoilafamiliaavantages .icon-wrapper { width: 100px; height: 100px; margin: 0 auto 20px; background-color: var(--color1); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.Pourquoilafamiliaavantages .icon { width: 60px; height: 60px; background-size: cover; background-position: center; }
.Pourquoilafamiliaavantages li { padding: 1.5%; padding-top: 5%; padding-bottom: 5%; }
.grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; margin: 5%; gap: 20px; }
.chiffrescles { grid-column: 1 / 2; grid-row: 1 / 2; }
.chiffrescleimg, .lieuxvisiterimg, .evenementsimg, .gastronomieimg { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.chiffrescleimg { grid-column: 2 / 3; grid-row: 1 / 2; background: url(./img/Batiments\ Aix.webp); background-position: center; background-size: cover; }
.lieuxvisiter { grid-column: 2 / 2; grid-row: 2 / 3; }
.lieuxvisiterimg { grid-column: 1 / 2; grid-row: 2 / 3; background: url(./img/saintevictoire.webp); background-position: center; background-size: cover; }
.evenements { grid-column: 1 / 2; grid-row: 3 / 4; }
.evenementsimg { grid-column: 2 / 3; grid-row: 3 / 4; background: url(./img/festival.webp); background-position: center; background-size: cover; }
.gastronomie { grid-column: 2 / 2; grid-row: 4 / 5; }
.gastronomieimg { grid-column: 1 / 2; grid-row: 4 / 5; background: url(./img/Calissons.avif); background-position: center; background-size: cover; }
.faq { background-color: var(--color4); padding: 3% 3%; text-align: center; }
.faq-header h2 { font-size: 1.5rem; margin-bottom: 3%; font-family: "PlayfairDisplay", serif; }
.faq-content { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: flex-start; gap: 2%; }
.faq-category { flex: 1 1 48%; margin-bottom: 3%; padding: 2%; border-radius: 10px; background-color: var(--color1); box-shadow: 0px 3px 30px rgba(33, 34, 35, 0.3); box-sizing: border-box; }
.faq-category-title { font-size: 1.2rem; margin-bottom: 1%; font-family: "PlayfairDisplay", serif; text-align: left; }
.faq-item { margin-bottom: 1%; padding: 1%; border-bottom: 1px solid var(--color2); }
.faq-item:last-child { border-bottom: none; }
.faq-question { font-size: 1rem; margin-bottom: 0.5%; font-family: "PlayfairDisplay", serif; cursor: pointer; position: relative; text-align: left; }
.faq-question::after { content: '+'; position: absolute; right: 0; font-size: 1.2rem; font-weight: bold; }
.faq-question.active::after { content: '-'; }
.faq-answer { font-size: 0.9rem; color: var(--color2); font-family: "Cabin", sans-serif; display: none; padding-top: 1%; text-align: left; }
.faq-answer.active { display: block; }
.aixenprovence h2, .aixenprovence h3 { text-align: center; padding: 3%; }
.aixenprovence p, .aixenprovence ul { padding: 3%; }
.aixenprovence li { display: list-item; font-size: 1REM; margin-bottom: 8px; color: #333; font-weight: 500; list-style-type: disc; list-style-position: inside; }
.aixenprovence img { background-position: center; background-size: cover; box-shadow: 0px 3px 30px rgba(33, 34, 35, 0.3); }
.contact { background: var(--color4); }
.nouscontactertitre { text-align: center; padding: 5%; }
footer { background-color: var(--color4); color: var(--color2); padding: 40px 0 0 0; text-align: center; font-family: "Cabin", sans-serif; }
.footer-content { display: flex; flex-wrap: wrap; justify-content: space-around; margin: 0 auto; max-width: 1200px; }
.footer-section { flex: 1; margin: 10px; min-width: 200px; }
.footer-section h3 { color: var(--color2); margin-bottom: 15px; font-size: 1.25em; font-family: "PlayfairDisplay", serif; }
.footer-section p, .footer-section ul { margin: 0; padding: 0; list-style: none; }
.footer-section ul li { margin: 10px 0; }
.footer-section ul li a { color: var(--color2); text-decoration: none; transition: color 0.3s; }
.footer-section ul li a:hover { color: var(--color3); }
.footer-section.social ul { display: flex; justify-content: center; }
.footer-section.social ul li { margin: 0 10px; }
.footer-section.social ul li a { font-size: 1.5em; color: var(--color2); transition: color 0.3s; }
.footer-section.social ul li a:hover { color: var(--color3); }
.footer-bottom { margin-top: 20px; padding: 10px 0; background-color: var(--color1); }
.footer-bottom p { margin: 0; font-size: 0.9em; font-family: "Cabin", sans-serif; }

/* Ajustements spécifiques de la refonte */
main .hero { width: min(88%, 1180px) !important; max-width: 1180px !important; padding-left: 0 !important; padding-right: 0 !important; }
main .section.alt.compact-bottom, main .section.dark.compact-bottom, main .section:has(.proof-layout), main #services.section, main #zones.section, main .section.dark:has(.grid) { min-height: 0 !important; height: auto !important; max-height: none !important; margin-bottom: 0 !important; overflow: hidden !important; }
main .section.alt.compact-bottom { padding-bottom: 46px !important; }
main .section.dark.compact-bottom { padding-top: 68px !important; padding-bottom: 46px !important; }
main .section:has(.proof-layout), main .section.alt:has(.photo-block), main #zones.section, main .section.dark:has(.grid) { padding-top: 58px !important; padding-bottom: 46px !important; }
main #services.section { padding-bottom: 50px !important; }
main .section.alt.compact-bottom .container, main .section.dark.compact-bottom .container, main .section:has(.proof-layout) .container, main #services .container, main #zones .container, main .section.dark:has(.grid) .container, main .section.alt:has(.photo-block) .container { min-height: 0 !important; height: auto !important; max-height: none !important; margin-bottom: 0 !important; padding-bottom: 0 !important; }
main .section.alt.compact-bottom .grid.four, main .section.dark.compact-bottom .grid.four { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-rows: none !important; grid-auto-rows: auto !important; grid-auto-flow: row !important; gap: 22px !important; margin: 32px 0 0 0 !important; padding: 0 !important; min-height: 0 !important; height: auto !important; max-height: none !important; align-items: stretch !important; }
main .proof-layout, main .section.alt:has(.photo-block) .split { align-items: start !important; margin-top: 28px !important; margin-bottom: 0 !important; min-height: 0 !important; height: auto !important; max-height: none !important; }
main .proof-layout .photo-block, main .section.alt:has(.photo-block) .photo-block { align-self: start !important; margin-top: 0 !important; min-height: 360px !important; }
main .proof-layout .grid.two, main .section.alt:has(.photo-block) .grid.two { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: none !important; grid-auto-rows: auto !important; grid-auto-flow: row !important; gap: 22px !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: auto !important; max-height: none !important; align-self: start !important; align-items: stretch !important; }
main #services .grid, main #zones .grid, main .section.dark:has(.grid) .grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: none !important; grid-auto-rows: auto !important; grid-auto-flow: row !important; gap: 22px !important; margin: 32px 0 0 0 !important; padding: 0 !important; min-height: 0 !important; height: auto !important; max-height: none !important; align-items: stretch !important; }
main .section.alt.compact-bottom .grid.four > .card, main .section.dark.compact-bottom .grid.four > .card, main .proof-layout .grid.two > .card, main #services .grid > .card, main .section.alt:has(.photo-block) .grid.two > .card, main #zones .grid > .card, main .section.dark:has(.grid) .grid > .card { min-height: 0 !important; height: auto !important; max-height: none !important; grid-row: auto !important; }
main .section.alt.compact-bottom + .section, main .section.dark.compact-bottom + .section.alt, main #services + .section.alt, main .section.alt:has(.photo-block) + .section, main #zones + .section.alt, main .section.dark:has(.grid) + .section { padding-top: 54px !important; margin-top: 0 !important; }
main .section.dark:has(.grid) .note { margin-top: 18px !important; }
main #contact { margin-bottom: 76px !important; position: relative !important; overflow: visible !important; }
main #contact::after { content: ""; position: absolute; left: 0; right: 0; bottom: -76px; height: 76px; background: #fff3e8; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(0,0,0,.05); }

/* Alignement des articles de blog refonte */
body .article-layout {
  width: min(88%, 1180px) !important;
  max-width: 1180px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body .article-hero .hero-inner {
  width: min(100%, 1180px) !important;
  max-width: 1180px !important;
}

/* Image spécifique de la vignette tarifs du blog */
.article-card.card-tarif .article-image {
  background-image: linear-gradient(180deg, rgba(32,32,32,.03), rgba(32,32,32,.22)), url("/img/cardinal/Arrangement%20minimaliste%20avec%20vases%20et%20cadre.png") !important;
}

@media (max-width: 980px) {
  main .section.alt.compact-bottom .grid.four, main .section.dark.compact-bottom .grid.four, main .proof-layout .grid.two, main #services .grid, main .section.alt:has(.photo-block) .grid.two, main #zones .grid, main .section.dark:has(.grid) .grid { grid-template-columns: 1fr !important; }
  body .article-layout { width: min(88%, 1180px) !important; }
}

@media (max-width: 939px) {
  .tarifgrid { grid-template-columns: 1fr; }
  .containerproprietairesheader { padding: 5%; }
  .services { flex-direction: column; align-items: center; }
  .service-column { min-width: 100%; margin: 0 0 2% 0; text-align: center; }
  .service-category { text-align: center; margin-bottom: 1%; }
  .column-title { margin-top: 3%; margin-bottom: 3%; }
  .service-title { text-align: center; }
  .Pourquoilafamiliaintro { grid-template-columns: 1fr; }
  .Pourquoilafamiliaavantages { flex-direction: column; align-items: center; }
  .Pourquoilafamiliaavantages li { padding: 0; text-align: center; }
  .faq-content { flex-direction: column; align-items: center; }
  .faq-category { width: 80%; }
  .grid { display: flex; flex-direction: column; align-items: center; }
  .chiffrescles, .chiffrescleimg, .lieuxvisiter, .lieuxvisiterimg, .evenements, .evenementsimg, .gastronomie, .gastronomieimg { width: 100%; margin-bottom: 20px; }
  .chiffrescles { order: 1; }
  .chiffrescleimg { order: 2; }
  .lieuxvisiter { order: 3; }
  .lieuxvisiterimg { order: 4; }
  .evenements { order: 5; }
  .evenementsimg { order: 6; }
  .gastronomie { order: 7; }
  .gastronomieimg { order: 8; }
  .chiffrescleimg, .lieuxvisiterimg, .evenementsimg, .gastronomieimg { height: 300px; }
}

/* Harmonisation de l'en-tête et du pied de page des articles du blog propriétaire */
body:has(.article-layout) header nav {
  background: #fffaf4 !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.02) !important;
  backdrop-filter: none !important;
  padding: 22px 6% !important;
  align-items: center !important;
}

body:has(.article-layout) header nav .brand {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  color: #202020 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  font-family: "PlayfairDisplay", Georgia, serif !important;
  font-size: 1.02rem !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
}

body:has(.article-layout) header nav .brand img {
  width: 62px !important;
  height: 62px !important;
  object-fit: contain !important;
}

body:has(.article-layout) header nav .menu-list ul {
  display: flex !important;
  align-items: center !important;
  gap: 26px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:has(.article-layout) header nav .menu-list li:has(> a[href="/gestion-location-saisonniere-aix-en-provence/"]) {
  display: none !important;
}

body:has(.article-layout) header nav .menu-list a {
  color: #202020 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  font-family: "Cabin", Arial, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  font-size: .86rem !important;
}

body:has(.article-layout) header nav .menu-list a[href="/conciergerie-airbnb-aix-en-provence/"],
body:has(.article-layout) header nav .menu-list a[href="/tarifs-conciergerie-airbnb-aix-en-provence/"],
body:has(.article-layout) header nav .menu-list a[href="/blog/"] {
  font-size: 0 !important;
}

body:has(.article-layout) header nav .menu-list a[href="/conciergerie-airbnb-aix-en-provence/"]::after {
  content: "CONCIERGERIE";
  font-size: .86rem !important;
}

body:has(.article-layout) header nav .menu-list a[href="/tarifs-conciergerie-airbnb-aix-en-provence/"]::after {
  content: "TARIFS";
  font-size: .86rem !important;
}

body:has(.article-layout) header nav .menu-list a[href="/blog/"]::after {
  content: "BLOG";
  font-size: .86rem !important;
}

body:has(.article-layout) header nav .nav-cta,
body:has(.article-layout) header nav .menu-list a[href="/estimation-revenus-airbnb-aix-en-provence/"] {
  background: #202020 !important;
  color: #fffaf4 !important;
  border-radius: 999px !important;
  padding: 15px 22px !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.16) !important;
  font-size: 0 !important;
}

body:has(.article-layout) header nav .nav-cta::after,
body:has(.article-layout) header nav .menu-list a[href="/estimation-revenus-airbnb-aix-en-provence/"]::after {
  content: "ESTIMER MES REVENUS";
  font-size: .86rem !important;
}

body:has(.article-layout) footer {
  background: #202020 !important;
  color: #fffaf4 !important;
  padding: 74px 6% 28px !important;
  text-align: center !important;
  font-family: "Cabin", Arial, sans-serif !important;
}

body:has(.article-layout) footer .footer-grid {
  max-width: 1180px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1.35fr 1fr 1fr 1fr !important;
  gap: 42px !important;
  align-items: start !important;
  text-align: center !important;
}

body:has(.article-layout) footer .footer-grid > div:first-child {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

body:has(.article-layout) footer .footer-logo {
  width: 126px !important;
  height: 126px !important;
  object-fit: contain !important;
  background: #ffffff !important;
  border-radius: 26px !important;
  padding: 18px !important;
  margin: 0 auto 20px !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.22) !important;
}

body:has(.article-layout) footer h3 {
  color: #fffaf4 !important;
  font-family: "PlayfairDisplay", Georgia, serif !important;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem) !important;
  line-height: 1.1 !important;
  margin: 0 0 18px !important;
}

body:has(.article-layout) footer .footer-grid > div:first-child h3 {
  font-size: 0 !important;
  margin-bottom: 18px !important;
}

body:has(.article-layout) footer .footer-grid > div:first-child h3::after {
  content: "La Familia";
  font-size: clamp(1.9rem, 2.8vw, 2.35rem) !important;
}

body:has(.article-layout) footer p,
body:has(.article-layout) footer li,
body:has(.article-layout) footer a {
  color: #f7dfcf !important;
  font-size: 1.02rem !important;
  line-height: 1.7 !important;
  text-decoration: none !important;
}

body:has(.article-layout) footer ul {
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  gap: 8px !important;
}

body:has(.article-layout) footer .footer-bottom {
  max-width: 1180px !important;
  margin: 34px auto 0 !important;
  padding-top: 22px !important;
  border-top: 1px solid rgba(255,255,255,.16) !important;
  background: transparent !important;
}

body:has(.article-layout) footer .footer-bottom p {
  font-size: 0 !important;
  margin: 0 !important;
}

body:has(.article-layout) footer .footer-bottom p::after {
  content: "© 2026 La Familia. Tous droits réservés.";
  font-size: .95rem !important;
  color: #f7dfcf !important;
}

@media (max-width: 980px) {
  body:has(.article-layout) header nav {
    padding: 16px 6% !important;
  }

  body:has(.article-layout) header nav .menu-list {
    top: 82px !important;
    background: #fffaf4 !important;
  }

  body:has(.article-layout) footer .footer-grid {
    grid-template-columns: 1fr !important;
  }
}