/* ==================================================
   Page Tarifs (studio Sauge & Soie)
   Palette du theme : fond #F7F5F1, texte #6E695F,
   vert sauge #BFCAB4 / #9CA986, filet #E3E7DC
   ================================================== */

/* Cette page n'a pas de menu mariage : petit en-tete et pied dedies */
.tarifs-topbar {
  padding: 22px 0;
  border-bottom: 1px solid #E3E7DC;
}
.tarifs-topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.tarifs-topbar img {
  height: 42px;
  width: auto;
  display: block;
}
.tarifs-topbar a.retour {
  font-size: 10.5pt;
  letter-spacing: .5px;
  color: #6E695F;
  text-decoration: none;
  border-bottom: 1px dashed #BFCAB4;
}
.tarifs-topbar a.retour:hover { color: #9CA986; }

/* --- En-tete --- */
.tarifs-hero {
  position: relative;
  overflow: hidden;
  padding: 60px 0 20px;
}
.tarifs-hero .sauge-corner {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 260px;
  opacity: .5;
  transform: rotate(8deg);
  pointer-events: none;
  z-index: 0;
}
.tarifs-hero h1 { position: relative; z-index: 1; }
.tarifs-hero { text-align: center; }
.tarifs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10pt;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #9CA986;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}
.tarifs-eyebrow::before { content: ""; width: 26px; height: 1px; background: #BFCAB4; }
.tarifs-hero .lede {
  max-width: 62ch;
  margin: 20px auto 0;
  font-size: 11.5pt;
  position: relative;
  z-index: 1;
}
.tarifs-hero .lede strong { color: #9CA986; }

/* --- Cartes de formule --- */
.offers-row { margin-top: 10px; }
.offer {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  margin-bottom: 40px;
}
.offer.is-featured { margin-top: -14px; }
.offer-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #9CA986;
  color: #F7F5F1;
  font-size: 8.5pt;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 16px;
  white-space: nowrap;
  z-index: 2;
}
.offer .form-wrapper { flex: 1; display: flex; flex-direction: column; margin-bottom: 0; }
.offer-eyebrow {
  font-size: 8.5pt;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #9CA986;
  margin-bottom: 8px;
}
.offer-name { margin-bottom: 6px !important; }
.offer-tagline {
  font-family: "Playfair Display", serif;
  font-style: italic;
  color: #6E695F;
  font-size: 11pt;
  line-height: 1.5;
  margin-bottom: 14px;
}
.offer-desc { font-size: 9.5pt; margin-bottom: 20px; }
.offer-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 16px 0;
  margin-bottom: 18px;
  border-top: 1px dashed #BFCAB4;
  border-bottom: 1px dashed #BFCAB4;
}
.offer-price .from { font-size: 8pt; letter-spacing: 1px; text-transform: uppercase; }
.offer-price .amount { font-family: "Playfair Display", serif; font-size: 26pt; color: #9CA986; }
.offer-price .amount sup { font-size: 11pt; }
.offer-intro { font-size: 9.7pt; font-weight: 500; color: #9CA986; letter-spacing: .3px; margin: 0 0 12px; }
.offer-list { list-style: none; margin: 0 0 24px; padding: 0; }
.offer-list li { position: relative; padding-left: 22px; font-size: 9.7pt; margin-bottom: 10px; }
.offer-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 7px;
  height: 7px;
  border-left: 1.4px solid #9CA986;
  border-bottom: 1.4px solid #9CA986;
  transform: translateY(-55%) rotate(-45deg);
}
.offer .btn-sage { margin-top: auto; align-self: center; }

/* --- Tableau comparatif --- */
.tarifs-table-wrap { border: 1px solid #E3E7DC; overflow-x: auto; margin-top: 10px; }
table.tarifs-table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 9.3pt; }
table.tarifs-table caption { caption-side: top; text-align: left; padding: 12px 16px; font-size: 8.5pt; color: #9a958b; }
table.tarifs-table th, table.tarifs-table td {
  padding: 13px 16px;
  border-bottom: 1px solid #E3E7DC;
  text-align: left;
  vertical-align: top;
}
table.tarifs-table thead th {
  font-family: "Playfair Display", serif;
  font-size: 11.5pt;
  font-weight: normal;
  color: #9CA986;
  background: #EEF0E8;
  white-space: nowrap;
}
table.tarifs-table thead th:first-child { background: transparent; }
table.tarifs-table tbody th { white-space: nowrap; font-weight: 500; color: #6E695F; }
table.tarifs-table tbody tr:nth-child(even) td,
table.tarifs-table tbody tr:nth-child(even) th { background: #FBFAF7; }
table.tarifs-table td.yes { color: #9CA986; font-weight: 500; }
/* « — » grise : le texte seulement (une opacite sur la case laissait voir le fond vert de la section a travers son fond) */
table.tarifs-table td.dim { color: #B5B1AB; }
/* ordinateur : chaque cellule tient sur une ligne (le tableau prend toute la largeur a partir de 1200 px, cf. pages/tarifs.php) ;
   en dessous, le texte revient a la ligne plutot que de faire defiler le tableau */
@media (min-width: 1200px) { table.tarifs-table td { white-space: nowrap; } }

/* --- Deroule en 4 etapes --- */
.process-row { margin-top: 10px; }
.process-step {
  border-left: 1px solid #BFCAB4;
  padding: 4px 20px 4px 20px;
  margin-bottom: 30px;
}
.process-step .num {
  font-family: "Playfair Display", serif;
  font-size: 20pt;
  color: #BFCAB4;
}
.process-step h3 { font-size: 12.5pt; margin: 8px 0 6px; }
.process-step p { font-size: 9.5pt; margin: 0; }

/* --- A la carte --- */
.addon-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px dashed #E3E7DC;
}
.addon-row .name { font-size: 10pt; color: #6E695F; }
.addon-row .note { display: block; font-size: 8.5pt; color: #9a958b; margin-top: 2px; }
.addon-row .price { font-family: "Playfair Display", serif; color: #9CA986; white-space: nowrap; margin-left: 12px; }

.tarifs-terms {
  margin-top: 26px;
  padding-left: 16px;
  border-left: 2px solid #BFCAB4;
  font-size: 9pt;
  color: #6E695F;
}
.tarifs-terms strong { color: #6E695F; }

/* --- FAQ : meme presentation que le reste du site (texte centre) --- */
section dl { max-width: 68ch; margin: 0; text-align: left; }
.faq-item { margin-bottom: 34px; }
.faq-item dt {
  font-family: "Playfair Display", serif;
  font-size: 14pt;
  color: #9CA986;
  margin-bottom: 8px;
}
.faq-item dd { margin: 0; }

/* --- Pied : carte de contact Pauline --- */
.tarifs-contact { padding: 20px 0 70px; }
.contact-card {
  --offset: 11px;
  --border-size: 1px;
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 30px 34px;
  background: #F7F5F1;
  border: 40px solid #F7F5F1;
  box-shadow: 0px 0px 25px 10px rgba(100, 100, 100, 0.12);
}
.contact-card > .h-lines { border-top-color: #BFCAB4; border-bottom-color: #BFCAB4; opacity: .5; }
.contact-card > .v-lines { border-left-color: #BFCAB4; border-right-color: #BFCAB4; opacity: .5; }
.contact-card .brand-mark { width: 64px; height: auto; margin: 0 auto 4px; display: block; position: relative; z-index: 1; }
.contact-card h2 { position: relative; z-index: 1; margin-bottom: 4px !important; }
.contact-card .role {
  position: relative; z-index: 1;
  font-size: 8.5pt; letter-spacing: 1.5px; text-transform: uppercase; color: #9CA986;
}
.contact-card .quote {
  position: relative; z-index: 1;
  font-family: "Playfair Display", serif;
  font-style: italic;
  color: #6E695F;
  margin: 20px 0;
  font-size: 11pt;
}
.contact-card .links { position: relative; z-index: 1; margin-bottom: 22px; font-size: 10pt; }
.contact-card .links a { display: block; color: #6E695F; text-decoration: none; margin-bottom: 4px; }
.contact-card .links a:hover { color: #9CA986; }
.contact-card .site { position: relative; z-index: 1; margin-top: 20px; font-size: 8.5pt; letter-spacing: 1.5px; text-transform: uppercase; color: #9CA986; }

@media (max-width: 767px) {
  .tarifs-topbar img { height: 34px; }
  .offer.is-featured { margin-top: 0; }
  .process-row .col-lg-3:not(:last-child) .process-step { margin-bottom: 24px; }
  .contact-card { border-width: 20px; padding: 30px 18px 26px; }
}

/* --- Bouton "Demander ce devis" : plus discret que le CTA principal du site --- */
.btn-sage-sm {
  padding: 8px 20px;
  font-size: 10pt;
  letter-spacing: 1px;
}
.btn-sage-sm::before {
  top: 5px;
  left: 5px;
  right: -5px;
  bottom: -5px;
}

/* --- Popup "Demander un devis" --- */
.devis-formule-label {
  font-size: 9.5pt;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #9CA986;
  margin-top: -8px;
  margin-bottom: 20px;
}
.devis-formule-label:empty { display: none; }

/* mention "express" sous les delais du tableau */
table.tarifs-table td small {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border: 1px solid #BFCAB4;
  font-size: 8.5pt;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #9CA986;
  white-space: nowrap;
}

/* --- Mobile : la feuille en haut a droite, en filigrane derriere l'accroche et le titre (comme sur l'accueil) ;
       le petit trait de l'accroche passe au-dessus du texte, centre comme le titre --- */
@media (max-width: 767px) {
  .tarifs-hero { padding-top: 10px; }
  .tarifs-hero .sauge-corner {
    width: 230px;
    right: -50px;
    opacity: .35;
  }
  .tarifs-eyebrow {
    display: block;
    text-align: center;
    max-width: 30ch;
    margin: 0 auto 18px;
    line-height: 1.6;
  }
  .tarifs-eyebrow::before {
    display: block;
    margin: 0 auto 10px;
  }
}
.offer-badge .fa-heart { font-size: .9em; margin-right: 3px; }   /* « Coup de cœur » */