/* =========================================================
   TEMPORA / TERRE DES ANGES — CSS GLOBAL (Beige + Doré)
   Utilise avec les sections HTML "tp-*" (Hero, Annonce, etc.)
   ========================================================= */

/* ---- Tokens ---- */
:root {
  --tp-bg-page: #f6f1ea;
  --tp-surface: #ffffff;
  --tp-muted: #f7f2ec;

  --tp-text: #2b2622;
  --tp-text-soft: #6b625c;

  --tp-accent: #b7924a;

  --tp-border: rgba(0, 0, 0, .08);
  --tp-shadow: 0 20px 60px rgba(0, 0, 0, .12);

  --tp-radius: 18px;
  --tp-max: 1120px;
}

/* ---- Base (protège contre le CSS Divi) ---- */
.tp-hero,
.tp-section {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--tp-text);
}

.tp-section {
  padding: 72px 0
}

.tp-container {
  max-width: var(--tp-max);
  margin: 0 auto;
  padding: 0 20px;
}

.tp-center {
  text-align: center
}

.tp-max-780 {
  max-width: 780px;
  margin: 0 auto
}

/* ---- Typography ---- */
.tp-h1,
.tp-h2 {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 12px;
}

.tp-h1 {
  font-size: clamp(2rem, 3vw, 3.2rem)
}

.tp-h2 {
  font-size: clamp(1.5rem, 2.2vw, 2.2rem)
}

.tp-h3 {
  font-weight: 650;
  font-size: 1.15rem;
  line-height: 1.25;
  margin: 0 0 10px;
}

.tp-p {
  margin: 0 0 14px
}

.tp-lead {
  font-size: 1.05rem;
  color: var(--tp-text-soft);
  margin: 0 0 14px
}

.tp-small {
  font-size: .95rem;
  color: var(--tp-text-soft);
  margin: 0 0 10px
}

/* ---- Surfaces / Boxes ---- */
.tp-surface {
  background: var(--tp-surface);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  box-shadow: var(--tp-shadow);
}

.tp-surface--padded {
  padding: 34px
}

.tp-box {
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
}

.tp-box--soft {
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .10);
  padding: 26px;
}

/* ---- Buttons ---- */
.tp-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.tp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--tp-border);
  text-decoration: none;
  font-weight: 650;
  background: var(--tp-surface);
  transition: .18s transform ease, .18s box-shadow ease, .18s opacity ease;
}

.tp-btn:hover {
  transform: translateY(-1px)
}

.tp-btn--primary {
  background: linear-gradient(180deg, rgba(183, 146, 74, .95), rgba(183, 146, 74, .85));
  color: #fff !important;
  border-color: rgba(0, 0, 0, .08);
  box-shadow: 0 16px 30px rgba(183, 146, 74, .25);
}

.tp-btn--ghost {
  background: transparent;
}

/* ---- Pill ---- */
.tp-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--tp-border);
  background: rgba(255, 255, 255, .90);
  color: var(--tp-text-soft);
  font-weight: 600;
  font-size: .92rem;
  margin-bottom: 14px;
}

.tp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tp-accent);
  box-shadow: 0 0 0 4px rgba(183, 146, 74, .18);
}

/* =========================================================
   SECTION 1 — HERO
   ========================================================= */
.tp-hero {
  position: relative;
  padding: 88px 0 40px;
}

/* Remplace l'image dans le CSS ci-dessous si tu veux (optionnel)
   Sinon, tu laisses ce fond + tu peux gérer via Divi section background.
*/
.tp-hero__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(246, 241, 234, .75), rgba(246, 241, 234, .92)),
    url("assets/hero-nature.jpg") center/cover no-repeat;
  filter: saturate(1.05);
}

.tp-hero .tp-container {
  position: relative
}

.tp-hero__card {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 28px;
  padding: 34px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .86);
  border: 1px solid var(--tp-border);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .14);
  backdrop-filter: blur(6px);
}

.tp-hero__subtitle {
  margin-top: 10px;
  font-size: 1.05rem;
  color: var(--tp-text-soft);
}

.tp-hero__note {
  margin-top: 18px
}

.tp-hero__portrait {
  align-self: center;
  justify-self: end;
  width: min(320px, 100%);
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--tp-border);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
  background: #fff;
  margin: 0;
}

.tp-hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================================
   SECTION 2 — ANNONCEMENT
   ========================================================= */
.tp-announcement {
  padding-top: 22px
}

.tp-announcement__box {
  max-width: 900px;
  margin: 0 auto;
}

.tp-price-pill {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(183, 146, 74, .12);
  border: 1px solid rgba(183, 146, 74, .25);
  color: var(--tp-text);
  font-weight: 750;
  margin: 8px 0 0;
}

/* =========================================================
   SECTION 3 — BIENVENUE
   ========================================================= */
.tp-grid-2 {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items: center;
}

.tp-media {
  border-radius: var(--tp-radius);
  overflow: hidden;
  border: 1px solid var(--tp-border);
  background: #fff;
  min-height: 260px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .10);
}

.tp-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================================
   SECTION 4 — SERVICES (cartes)
   ========================================================= */
.tp-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 22px;
}

.tp-card {
  padding: 18px 18px 16px;
  border-radius: 16px;
  border: 1px solid var(--tp-border);
  background: var(--tp-surface);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .06);
  transition: .18s transform ease, .18s box-shadow ease;
}

.tp-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .10);
}

.tp-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(183, 146, 74, .12);
  border: 1px solid rgba(183, 146, 74, .25);
  margin-bottom: 10px;
  font-weight: 900;
  color: var(--tp-accent);
}

.tp-card__link {
  display: inline-block;
  margin-top: 8px;
  color: var(--tp-accent);
  text-decoration: none;
  font-weight: 750;
}

.tp-card__link:hover {
  text-decoration: underline
}

.tp-services__note {
  margin-top: 18px;
}

/* =========================================================
   SECTION 5 — QUOTE
   ========================================================= */
.tp-quote__box {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.tp-blockquote {
  margin: 0
}

.tp-blockquote p {
  margin: 0 0 14px;
  font-size: 1.08rem;
  color: var(--tp-text);
}

.tp-quote__author {
  color: var(--tp-text-soft);
  font-weight: 650;
}

/* =========================================================
   SECTION 6 — CONTACT
   ========================================================= */
.tp-contact__lines {
  margin-top: 10px
}

.tp-contact__lines .tp-p {
  margin: 0 0 10px
}

.tp-map {
  overflow: hidden;
  min-height: 320px;
  background: var(--tp-muted);
}

.tp-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* =========================================================
   SECTION 7 — GAIA / MOON
   ========================================================= */
.tp-gaia {
  background: linear-gradient(180deg, rgba(247, 242, 236, .85), rgba(246, 241, 234, 1));
}

.tp-moon {
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--tp-border);
  background: rgba(255, 255, 255, .92);
}

.tp-moon__row {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 10px;
}

.tp-moon__circle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 40%, #d7c9b2 60%, #b7a690 100%);
  border: 1px solid var(--tp-border);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .10);
}

.tp-moon__title {
  font-weight: 800
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px) {
  .tp-hero__card {
    grid-template-columns: 1fr
  }

  .tp-hero__portrait {
    justify-self: start;
    width: min(360px, 100%)
  }

  .tp-grid-2 {
    grid-template-columns: 1fr
  }

  .tp-cards {
    grid-template-columns: repeat(2, 1fr)
  }

  .tp-section {
    padding: 56px 0
  }

  .tp-surface--padded {
    padding: 26px
  }
}

@media (max-width: 560px) {
  .tp-cards {
    grid-template-columns: 1fr
  }

  .tp-hero {
    padding: 70px 0 30px
  }

  .tp-hero__card {
    padding: 22px
  }

  .tp-surface--padded {
    padding: 22px
  }

  .tp-box--soft {
    padding: 20px
  }
}



/* =========================================================
   ABOUT PAGE — AJOUTS (À propos de moi)
   À coller À LA FIN de ton custom.css
   ========================================================= */

/* HERO de page (plus compact que le hero accueil) */
.tp-page-hero {
  position: relative;
  padding: 78px 0 34px;
}

.tp-page-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 10%, rgba(183, 146, 74, .18), transparent 40%),
    linear-gradient(180deg, rgba(246, 241, 234, .85), rgba(246, 241, 234, .95)),
    url("assets/about-hero.jpg") center/cover no-repeat;
  filter: saturate(1.05);
}

.tp-page-hero .tp-container {
  position: relative
}

.tp-page-hero__inner {
  border: 1px solid var(--tp-border);
  border-radius: 24px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .12);
  padding: 34px;
  text-align: center;
}

/* Breadcrumb */
.tp-breadcrumb {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: .95rem;
  color: var(--tp-text-soft);
  margin-bottom: 14px;
}

.tp-breadcrumb a {
  color: var(--tp-text-soft);
  text-decoration: none;
  font-weight: 650;
}

.tp-breadcrumb a:hover {
  text-decoration: underline;
}

.tp-breadcrumb__sep {
  opacity: .65
}

/* About specifics */
.tp-about__cta {
  margin-top: 18px
}

.tp-about__media {
  min-height: 320px
}

.tp-about-highlights .tp-cards {
  margin-top: 18px
}

/* Lists inside cards */
.tp-list {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--tp-text);
}

.tp-list li {
  margin: 0 0 8px
}

/* CTA box */
.tp-about-cta__box {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.tp-about-cta__btns {
  justify-content: center;
}

/* Responsive tweaks */
@media (max-width: 980px) {
  .tp-page-hero__inner {
    padding: 26px
  }
}

@media (max-width: 560px) {
  .tp-page-hero {
    padding: 64px 0 28px
  }

  .tp-page-hero__inner {
    padding: 22px
  }
}


/* =========================================================
   CONTACT PAGE — AJOUTS
   À coller À LA FIN de custom.css
   ========================================================= */

.tp-contact-hero__btns {
  justify-content: center
}

.tp-contact-page .tp-grid-2 {
  align-items: start
}

.tp-contact-card a {
  color: var(--tp-text);
  text-decoration: none;
  font-weight: 700;
}

.tp-contact-card a:hover {
  text-decoration: underline;
}

.tp-hours {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--tp-border);
  background: rgba(183, 146, 74, .07);
}

.tp-hours__title {
  font-weight: 800;
  margin-bottom: 4px
}

.tp-divider {
  height: 1px;
  background: var(--tp-border);
  margin: 18px 0;
}

/* Grid photos accès */
.tp-access__grid {
  grid-template-columns: repeat(2, 1fr);
}

.tp-access__media {
  min-height: 260px
}

.tp-access__card {
  padding: 18px
}

/* =========================================================
   CONTACT FORM 7 — THEME (beige/doré)
   - Fonctionne si tu colles le shortcode CF7 dans un module Divi
   - Et aussi si tu utilises le markup tp-cf7 dans le formulaire CF7
   ========================================================= */

/* wrapper (si ton form contient <div class="tp-cf7">...) */
.tp-cf7 {
  margin-top: 14px;
}

.tp-cf7__row {
  margin-bottom: 14px;
}

.tp-cf7__row label {
  display: block;
  font-weight: 700;
  color: var(--tp-text);
  margin-bottom: 8px;
}

.tp-cf7__row--2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Inputs CF7 */
.tp-cf7 input[type="text"],
.tp-cf7 input[type="email"],
.tp-cf7 input[type="tel"],
.tp-cf7 select,
.tp-cf7 textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--tp-border);
  background: #fff;
  outline: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .05);
  font-family: inherit;
  color: var(--tp-text);
}

.tp-cf7 textarea {
  min-height: 140px;
  resize: vertical
}

.tp-cf7 input:focus,
.tp-cf7 select:focus,
.tp-cf7 textarea:focus {
  border-color: rgba(183, 146, 74, .55);
  box-shadow: 0 0 0 4px rgba(183, 146, 74, .14), 0 10px 24px rgba(0, 0, 0, .06);
}

/* Bouton submit CF7 */
.tp-cf7__actions {
  margin-top: 6px;
}

.tp-cf7 input[type="submit"],
.tp-cf7 .tp-cf7__submit {
  appearance: none;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 750;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(183, 146, 74, .95), rgba(183, 146, 74, .85));
  color: #fff;
  box-shadow: 0 16px 30px rgba(183, 146, 74, .25);
  transition: .18s transform ease, .18s box-shadow ease, .18s opacity ease;
}

.tp-cf7 input[type="submit"]:hover,
.tp-cf7 .tp-cf7__submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 40px rgba(183, 146, 74, .28);
}

/* Messages CF7 */
.tp-cf7 .wpcf7-response-output {
  margin: 14px 0 0 !important;
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid var(--tp-border) !important;
  background: rgba(255, 255, 255, .85);
}

.tp-cf7 .wpcf7-not-valid-tip {
  color: #b00020;
  font-size: .95rem;
  margin-top: 6px;
}

/* Responsive */
@media (max-width: 980px) {
  .tp-access__grid {
    grid-template-columns: 1fr
  }
}

@media (max-width: 560px) {
  .tp-cf7__row--2 {
    grid-template-columns: 1fr
  }
}


/* =========================================================
   HUILES ESSENTIELLES — AJOUTS
   À coller À LA FIN de custom.css
   ========================================================= */

/* Hero variant */
.tp-oils-hero__bg {
  background:
    radial-gradient(circle at 20% 10%, rgba(183, 146, 74, .18), transparent 42%),
    linear-gradient(180deg, rgba(246, 241, 234, .86), rgba(246, 241, 234, .95)),
    url("assets/oils-hero.jpg") center/cover no-repeat;
}

.tp-oils-hero__btns {
  justify-content: center
}

.tp-oils-disclaimer {
  max-width: 860px;
  margin: 14px auto 0
}

/* Sommaire tags */
.tp-oils-tags {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.tp-tag {
  display: inline-flex;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--tp-border);
  background: rgba(255, 255, 255, .85);
  text-decoration: none;
  font-weight: 750;
  color: var(--tp-text);
  transition: .18s transform ease, .18s box-shadow ease;
}

.tp-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .08);
}

/* Accordéons */
.tp-oils-list .tp-container {
  display: grid;
  gap: 14px;
}

.tp-oil {
  border: 1px solid var(--tp-border);
  border-radius: 18px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .10);
  overflow: hidden;
}

.tp-oil__sum {
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .82));
}

.tp-oil__sum::-webkit-details-marker {
  display: none
}

.tp-oil__name {
  font-weight: 850;
  font-size: 1.05rem;
}

.tp-oil__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(183, 146, 74, .25);
  background: rgba(183, 146, 74, .10);
  color: var(--tp-text);
  font-weight: 750;
  font-size: .9rem;
  white-space: nowrap;
}

.tp-oil__body {
  padding: 18px;
  border-top: 1px solid var(--tp-border);
}

.tp-oil__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items: start;
}

.tp-oil__media {
  min-height: 260px
}

.tp-oil__actions {
  margin-top: 14px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Petit bloc note intro */
.tp-oils-note {
  margin-top: 16px
}

/* Responsive */
@media (max-width: 980px) {
  .tp-oil__grid {
    grid-template-columns: 1fr
  }

  .tp-oil__pill {
    display: none
  }
}

/* =========================================================
   FOOTER MINIMAL CENTRE — DARK (fond foncé, texte clair)
   ========================================================= */

.tp-footer-min {
  /*padding: 80px 20px; */
  background: #222222;
  /* border-top: 1px solid rgba(255, 255, 255, .08); */
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: #222222;
}

.tp-footer-min * {
  box-sizing: border-box;
}

.tp-footer-min__inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Logo (option: légère mise en valeur sur fond dark) */
.tp-footer-min__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.tp-footer-min__logo img {
  max-width: 320px;
  width: min(320px, 70vw);
  height: auto;
  display: block;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}

/* Text lines */
.tp-footer-min__contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

.tp-footer-min__line {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: rgba(242, 240, 236, .78);
}

/* Links */
.tp-footer-min__link {
  color: #f6d99a;
  /* doré clair sur fond dark */
  font-weight: 800;
  text-decoration: none;
}

.tp-footer-min__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Icons row */
.tp-footer-min__icons {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* Boutons ronds visibles */
.tp-footer-min__icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(246, 217, 154, .45);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35);

  color: #f6d99a;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;

  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

.tp-footer-min__icon:hover {
  transform: translateY(-1px);
  background: rgba(246, 217, 154, .16);
  border-color: rgba(246, 217, 154, .70);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .45);
}

/* Focus clavier (accessibilité) */
.tp-footer-min__icon:focus,
.tp-footer-min__link:focus {
  outline: 2px solid rgba(246, 217, 154, .75);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Mobile */
@media (max-width:560px) {
  .tp-footer-min {
    padding: 60px 16px;
  }

  .tp-footer-min__line {
    font-size: 13px;
  }
}

.footer-widget {
  margin: auto;
  text-align: center;
  display: flex;
  justify-content: center;
}

/* =========================================================
   MAP FIX — la carte doit remplir tout le bloc
   ========================================================= */

/* Le bloc qui entoure l'iframe */
.tp-map {
  padding: 0 !important;
  /* important: pas de padding */
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, .08);
  background: transparent;
  /* plus de "fond" visible */
  min-height: 380px;
  /* hauteur du bloc */
}

/* Si ton thème ajoute un wrapper à l'intérieur */
.tp-map>* {
  height: 100%;
}

/* L'iframe doit prendre toute la place */
.tp-map iframe {
  width: 100% !important;
  height: 100% !important;
  min-height: 380px;
  /* sécurité */
  border: 0 !important;
  display: block;
}

/* Responsive */
@media (max-width: 980px) {
  .tp-map {
    min-height: 320px;
  }

  .tp-map iframe {
    min-height: 320px;
  }
}


/* =========================================================
   RENDEZ-VOUS — AJOUTS
   À coller à la fin de custom.css
   ========================================================= */

/* Hero variant */
.tp-rdv-hero__bg {
  background:
    radial-gradient(circle at 20% 10%, rgba(183, 146, 74, .18), transparent 42%),
    linear-gradient(180deg, rgba(246, 241, 234, .86), rgba(246, 241, 234, .95)),
    url("assets/rdv-hero.jpg") center/cover no-repeat;
}

.tp-rdv-hero__btns {
  justify-content: center
}

.tp-rdv-hero__inner {
  padding: 34px
}

/* Layout */
.tp-rdv__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items: start;
}

/* Contact card */
.tp-rdv__contactCard {
  margin-top: 18px;
  border: 1px solid var(--tp-border);
  border-radius: 18px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .08);
  padding: 18px;
}

.tp-rdv__lines {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.tp-rdv__line {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: start;
}

.tp-rdv__badge {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(183, 146, 74, .12);
  border: 1px solid rgba(183, 146, 74, .25);
  color: var(--tp-accent);
  font-size: 14px;
}

.tp-rdv__link {
  color: var(--tp-text);
  text-decoration: none;
  font-weight: 800;
}

.tp-rdv__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tp-rdv__btns {
  margin-top: 14px
}

/* Side */
.tp-rdv__side {
  display: grid;
  gap: 12px;
}

.tp-rdv__mapHead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 6px 2px 0;
}

.tp-rdv__miniTitle {
  font-weight: 900
}

.tp-rdv__miniSub {
  color: var(--tp-text-soft);
  font-weight: 700
}

/* MAP FULL BLOCK (fix “moitié vide”) */
.tp-rdv__map.tp-map {
  padding: 0 !important;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--tp-border);
  background: transparent;
  min-height: 360px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .10);
}

.tp-rdv__map.tp-map iframe {
  width: 100% !important;
  height: 100% !important;
  min-height: 360px;
  border: 0 !important;
  display: block;
}

/* Zoom box */
.tp-rdv__zoomBox {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--tp-border);
  background: rgba(183, 146, 74, .07);
}

.tp-rdv__zoomIcon {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .80);
  border: 1px solid rgba(183, 146, 74, .25);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .06);
}

.tp-rdv__zoomTitle {
  font-weight: 900
}

/* Responsive */
@media (max-width: 980px) {
  .tp-rdv__grid {
    grid-template-columns: 1fr
  }

  .tp-rdv__map.tp-map {
    min-height: 320px
  }

  .tp-rdv__map.tp-map iframe {
    min-height: 320px
  }
}

/* =========================================================
   RENDEZ-VOUS — PHOTOS DU CABINET (2 images)
   ========================================================= */

.tp-cabinet-photos__grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.tp-cabinet-photos__card {
  margin: 0;
  border-radius: 18px;
  border: 1px solid var(--tp-border);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .08);
  overflow: hidden;
}

.tp-cabinet-photos__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  /* change si tu veux (ex: 4/3) */
  background: var(--tp-muted);
}

.tp-cabinet-photos__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tp-cabinet-photos__caption {
  padding: 12px 14px;
  margin: 0;
  color: var(--tp-text-soft);
}

/* Responsive */
@media (max-width: 980px) {
  .tp-cabinet-photos__grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   LIVRE D’OR — GWOLLE GUESTBOOK (style beige/doré premium)
   Colle à la fin de custom.css
   ========================================================= */

/* Hero simple (si tu veux un hero) */
.tp-gbook-hero {
  padding: 86px 0 28px;
}

.tp-gbook-hero .tp-container {
  max-width: var(--tp-max, 1120px);
  margin: 0 auto;
  padding: 0 20px;
}

/* Wrapper section */
.tp-gbook-wrap {
  padding: 60px 0;
}

/* Cible large : Gwolle a parfois des classes différentes selon versions/thèmes */
.gwolle-gb,
.gwolle_gb,
.gwolle-gb-read,
.gwolle-gb-write {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--tp-text, #2b2622);
}

/* Met le guestbook dans une "surface" visuelle */
.tp-gbook-wrap .gwolle-gb,
.tp-gbook-wrap .gwolle_gb,
.tp-gbook-wrap .gwolle-gb-read,
.tp-gbook-wrap .gwolle-gb-write {
  background: rgba(255, 255, 255, .86);
  border: 1px solid var(--tp-border, rgba(0, 0, 0, .08));
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .10);
  padding: 22px;
}

/* Titres internes (souvent h3) */
.gwolle-gb h2,
.gwolle-gb h3,
.gwolle_gb h2,
.gwolle_gb h3,
.gwolle-gb-write h3,
.gwolle-gb-read h3 {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}

/* ====== FORMULAIRE ====== */
.gwolle-gb-write form,
.gwolle_gb form {
  margin: 0;
}

.gwolle-gb-write label,
.gwolle_gb label {
  font-weight: 800;
  display: block;
  margin: 10px 0 6px;
  color: var(--tp-text, #2b2622);
}

/* Inputs / textarea / select */
.gwolle-gb-write input[type="text"],
.gwolle-gb-write input[type="email"],
.gwolle-gb-write input[type="url"],
.gwolle-gb-write input[type="tel"],
.gwolle-gb-write select,
.gwolle-gb-write textarea,
.gwolle_gb input[type="text"],
.gwolle_gb input[type="email"],
.gwolle_gb input[type="url"],
.gwolle_gb input[type="tel"],
.gwolle_gb select,
.gwolle_gb textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--tp-border, rgba(0, 0, 0, .08));
  background: #fff;
  color: var(--tp-text, #2b2622);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .05);
  outline: none;
}

.gwolle-gb-write textarea,
.gwolle_gb textarea {
  min-height: 140px;
  resize: vertical;
}

.gwolle-gb-write input:focus,
.gwolle-gb-write select:focus,
.gwolle-gb-write textarea:focus,
.gwolle_gb input:focus,
.gwolle_gb select:focus,
.gwolle_gb textarea:focus {
  border-color: rgba(183, 146, 74, .55);
  box-shadow: 0 0 0 4px rgba(183, 146, 74, .14), 0 10px 24px rgba(0, 0, 0, .06);
}

/* Bouton envoyer */
.gwolle-gb-write input[type="submit"],
.gwolle-gb-write button,
.gwolle_gb input[type="submit"],
.gwolle_gb button {
  appearance: none;
  border: 1px solid rgba(0, 0, 0, .10);
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 850;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(183, 146, 74, .95), rgba(183, 146, 74, .85));
  color: #fff;
  box-shadow: 0 16px 30px rgba(183, 146, 74, .25);
  transition: .18s transform ease, .18s box-shadow ease;
}

.gwolle-gb-write input[type="submit"]:hover,
.gwolle-gb-write button:hover,
.gwolle_gb input[type="submit"]:hover,
.gwolle_gb button:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 40px rgba(183, 146, 74, .28);
}

/* Messages de validation/erreur */
.gwolle-gb .gwolle_gb_notice,
.gwolle_gb .gwolle_gb_notice,
.gwolle-gb .error,
.gwolle_gb .error {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--tp-border, rgba(0, 0, 0, .08));
  background: rgba(255, 255, 255, .85);
}

/* ====== LISTE DES ENTRÉES ====== */
/* classes vues souvent : .gb-entry / .gwolle-gb-entry etc => on couvre large */
.gwolle-gb .gb-entry,
.gwolle_gb .gb-entry,
.gwolle-gb .gwolle-gb-entry,
.gwolle_gb .gwolle-gb-entry {
  border: 1px solid var(--tp-border, rgba(0, 0, 0, .08));
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .06);
  padding: 16px 16px 14px;
  margin: 14px 0;
}

/* Nom/date (souvent petits blocs) */
.gwolle-gb .gb-author,
.gwolle_gb .gb-author,
.gwolle-gb .gb-date,
.gwolle_gb .gb-date {
  color: var(--tp-text-soft, #6b625c);
  font-weight: 750;
  font-size: .95rem;
}

/* Contenu */
.gwolle-gb .gb-content,
.gwolle_gb .gb-content,
.gwolle-gb .gb-entry-content,
.gwolle_gb .gb-entry-content {
  color: var(--tp-text, #2b2622);
  line-height: 1.7;
  margin-top: 10px;
}

/* Pagination / liens */
.gwolle-gb a,
.gwolle_gb a {
  color: var(--tp-accent, #b7924a);
  font-weight: 800;
  text-decoration: none;
}

.gwolle-gb a:hover,
.gwolle_gb a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Espace entre form et entries (si tout est sur la même page) */
.gwolle-gb-write {
  margin-bottom: 22px;
}

/* Responsive */
@media (max-width: 980px) {

  .tp-gbook-wrap .gwolle-gb,
  .tp-gbook-wrap .gwolle_gb,
  .tp-gbook-wrap .gwolle-gb-read,
  .tp-gbook-wrap .gwolle-gb-write {
    padding: 18px;
  }
}

/* =========================================================
   GWOLLE — FORCE STYLE BOUTON "Écrire un nouveau message"
   (Divi/UA override)
   ========================================================= */

/* Le bouton est souvent un input.button dans .gwolle-gb-write-button */
div.gwolle-gb div.gwolle-gb-write-button input[type="button"].button,
div.gwolle-gb div.gwolle-gb-write-button button.button,
div.gwolle-gb div.gwolle-gb-write-button a.button {
  float: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 12px 18px !important;
  border-radius: 999px !important;

  border: 1px solid rgba(0, 0, 0, .10) !important;
  background: linear-gradient(180deg, rgba(183, 146, 74, .95), rgba(183, 146, 74, .85)) !important;
  color: #fff !important;

  font-weight: 850 !important;
  line-height: 1 !important;
  text-decoration: none !important;

  box-shadow: 0 16px 30px rgba(183, 146, 74, .25) !important;
  cursor: pointer !important;

  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease !important;
}

div.gwolle-gb div.gwolle-gb-write-button input[type="button"].button:hover,
div.gwolle-gb div.gwolle-gb-write-button button.button:hover,
div.gwolle-gb div.gwolle-gb-write-button a.button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 20px 40px rgba(183, 146, 74, .30) !important;
  filter: saturate(1.05) !important;
}

div.gwolle-gb div.gwolle-gb-write-button input[type="button"].button:active,
div.gwolle-gb div.gwolle-gb-write-button button.button:active,
div.gwolle-gb div.gwolle-gb-write-button a.button:active {
  transform: translateY(0) !important;
  box-shadow: 0 12px 24px rgba(183, 146, 74, .22) !important;
  opacity: .95 !important;
}

div.gwolle-gb div.gwolle-gb-write-button input[type="button"].button:focus,
div.gwolle-gb div.gwolle-gb-write-button input[type="button"].button:focus-visible,
div.gwolle-gb div.gwolle-gb-write-button button.button:focus,
div.gwolle-gb div.gwolle-gb-write-button button.button:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 4px rgba(183, 146, 74, .18) !important,
    0 16px 30px rgba(183, 146, 74, .25) !important;
}

/* Mobile : bouton pleine largeur */
@media (max-width: 560px) {

  div.gwolle-gb div.gwolle-gb-write-button input[type="button"].button,
  div.gwolle-gb div.gwolle-gb-write-button button.button,
  div.gwolle-gb div.gwolle-gb-write-button a.button {
    width: 100% !important;
  }
}

/* =========================================================
   ACCOMPAGNEMENTS — page liste + sous-pages
   ========================================================= */

.tp-offers-hero__bg {
  background:
    radial-gradient(circle at 18% 12%, rgba(183, 146, 74, .18), transparent 44%),
    linear-gradient(180deg, rgba(246, 241, 234, .92), rgba(246, 241, 234, .98));
}

/* cards layout amélioré */
.tp-offers__grid {
  grid-template-columns: repeat(3, 1fr);
}

.tp-offer .tp-small {
  margin-top: 4px
}

/* sous-page */
.tp-service__grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  align-items: start;
}

.tp-service__box {
  border: 1px solid var(--tp-border);
  border-radius: 18px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .08);
  padding: 18px;
}

.tp-service__boxTitle {
  font-weight: 900;
  margin-bottom: 10px;
}

.tp-service__note {
  margin-top: 14px;
  border: 1px solid var(--tp-border);
  border-radius: 18px;
  background: rgba(183, 146, 74, .07);
  padding: 14px;
}

/* listes propres */
.tp-list {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--tp-text);
}

.tp-list li {
  margin: 8px 0
}

.tp-list--ol {
  padding-left: 20px
}

/* responsive */
@media (max-width: 980px) {
  .tp-offers__grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .tp-service__grid {
    grid-template-columns: 1fr
  }
}

@media (max-width: 560px) {
  .tp-offers__grid {
    grid-template-columns: 1fr
  }
}


/* =========================================================
   JOURNEES CANALISATIONS — Programme 2026 (cards)
   ========================================================= */

.tp-program {
  margin-top: 12px;
  display: grid;
  gap: 12px;
}

.tp-program__card {
  border: 1px solid var(--tp-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .06);
  padding: 14px 14px 12px;
}

.tp-program__date {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(183, 146, 74, .12);
  border: 1px solid rgba(183, 146, 74, .25);
  font-weight: 850;
  color: var(--tp-text);
  font-size: .92rem;
  margin-bottom: 10px;
}

.tp-program__title {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.25;
}

.tp-program__dates {
  margin: 10px 0 0;
  padding-left: 18px;
}

.tp-program__dates li {
  margin: 6px 0;
}

/* Carte "cycle" un peu mise en avant */
.tp-program__card--series {
  background: rgba(183, 146, 74, .06);
  border-color: rgba(183, 146, 74, .22);
}





/* =========================================================
   DIVI MENU (base) — SIMPLE underline hover + active
   ========================================================= */

/* Couleurs (modifie si tu veux) */
:root {
  --menu-color: #2b2622;
  /* couleur texte normal */
  --menu-accent: #b08a57;
  /* couleur hover + active (doré doux) */
  --menu-underline: 2px;
  /* épaisseur souligné */
  --menu-underline-offset: 5px;
  /* distance sous le texte */
}

#top-menu li {
  padding-right: 5px !important;
}

/* Links du menu principal */
#top-menu>li>a {
  color: var(--menu-color) !important;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .2px;
  padding: 12px 10px !important;

  /* important: pas de fond, pas d’arrondi */
  background: transparent !important;
  border-radius: 0 !important;

  position: relative;
  transition: color .15s ease;
}

/* Souligné (invisible par défaut) */
#top-menu>li>a:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--menu-underline-offset);
  height: var(--menu-underline);
  background: var(--menu-accent);
  opacity: 0;
  transform: scaleX(0.6);
  transform-origin: center;
  transition: opacity .15s ease, transform .18s ease;
}

/* Hover */
#top-menu>li>a:hover {
  color: var(--menu-accent) !important;
}

#top-menu>li>a:hover:before {
  opacity: 1;
  transform: scaleX(1);
}

/* Actif (page courante) */
#top-menu>li.current-menu-item>a,
#top-menu>li.current_page_item>a,
#top-menu>li.current-menu-ancestor>a {
  color: var(--menu-accent) !important;
}

#top-menu>li.current-menu-item>a:before,
#top-menu>li.current_page_item>a:before,
#top-menu>li.current-menu-ancestor>a:before {
  opacity: 1;
  transform: scaleX(1);
}

/* Retire les effets Divi par défaut (ligne / background) */
#top-menu li a:hover,
#top-menu li.current-menu-item>a {
  background: transparent !important;
}

/* Dropdown: on ne touche presque à rien, juste on évite les paddings énormes */
#top-menu li ul.sub-menu li a {
  padding: 10px 12px !important;
  font-weight: 600;
  color: var(--menu-color) !important;
}

#top-menu li ul.sub-menu li a:hover {
  color: var(--menu-accent) !important;
}

/* Mobile menu: même logique (couleur + souligné simple) */
#mobile_menu li a {
  color: var(--menu-color) !important;
  font-weight: 600;
}

#mobile_menu li.current-menu-item>a,
#mobile_menu li a:hover {
  color: var(--menu-accent) !important;
}

/* ===== Fix taille logo + hauteur header (Divi menu de base) ===== */

/* Hauteur du header */
#main-header .container {
  min-height: 64px !important;
  /* ajuste si tu veux 60 / 68 */
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Taille du logo */
#logo {
  max-height: 40px !important;
  /* <- principal */
  height: auto !important;
  width: auto !important;
}

/* Empêche Divi de forcer une hauteur bizarre */
#main-header #logo {
  transform: none !important;
}

/* Mobile */
@media (max-width: 980px) {
  #main-header .container {
    min-height: 58px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  #logo {
    max-height: 34px !important;
  }
}

#et-top-navigation {
  margin-bottom: 15px;
  margin-top: -10px;
}


/* Flèche dropdown ("chapeau") alignée à droite dans l'item */
#top-menu > li.menu-item-has-children{
  position: relative;
}

#top-menu > li.menu-item-has-children > a{
  padding-right: 28px !important; /* espace pour la flèche à droite */
}

#top-menu > li.menu-item-has-children > a:first-child:after{
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-55%) !important;
  margin-left: 0 !important;

  font-size: 12px !important;
  opacity: .7;
}

#top-menu.nav li ul.sub-menu {
  border-top: 3px var(--menu-accent) solid !important;
}