/* =====================================================================
   OBSCURA — Pages statiques (légal / contact)
   Mise en page « document » lisible + page contact éditoriale + habillage
   du formulaire Contact Form 7. Couleurs pleines (aucun dégradé), typo
   Cormorant Garamond / EB Garamond. Hérite des tokens d'obscura.css.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. EN-TÊTE COMMUN
   ------------------------------------------------------------------- */
.ob-page,
.ob-contact { position: relative; z-index: 1; }

.ob-page__head,
.ob-contact__head {
  text-align: center;
  padding: clamp(2.8rem, 7vw, 5.2rem) 0 clamp(1.6rem, 4vw, 2.4rem);
}
.ob-page__head .ob-kicker,
.ob-contact__head .ob-kicker { justify-content: center; }

.ob-page__title,
.ob-contact__title {
  font-size: clamp(2.2rem, 5.2vw, 3.8rem);
  line-height: 1.05;
  margin: .8rem 0 0;
}
.ob-page__lead,
.ob-contact__lead {
  max-width: 58ch;
  margin: 1.1rem auto 0;
  color: var(--ob-cream-dim);
  font-size: 1.06rem;
}
.ob-page__meta {
  margin: 1rem 0 0;
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ob-cream-mut);
}

/* Filet « étoile » plein (pas de dégradé) */
.ob-divider {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin: clamp(1.4rem, 3vw, 2.2rem) auto 0;
  width: min(420px, 70vw);
  color: var(--ob-gold);
}
.ob-divider::before,
.ob-divider::after { content: ""; height: 1px; flex: 1; background: var(--ob-line); }
.ob-divider__star { font-size: .9rem; line-height: 1; color: var(--ob-gold); }

/* ---------------------------------------------------------------------
   2. PAGE DOCUMENT (légal, à propos…)
   ------------------------------------------------------------------- */
.ob-page__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(1.4rem, 3vw, 2.4rem) 0 clamp(3rem, 7vw, 5rem);
  align-items: start;
}
.ob-page__layout.has-toc { grid-template-columns: 232px minmax(0, 1fr); }

/* Sommaire ancré */
.ob-toc {
  position: sticky; top: 96px;
  border-left: 1px solid var(--ob-line);
  padding-left: 1.2rem;
}
.ob-toc__label {
  font-family: var(--ob-font-body); font-weight: 600;
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ob-gold); margin: 0 0 1rem;
}
.ob-toc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ob-toc__list li.is-sub { padding-left: .9rem; }
.ob-toc a {
  color: var(--ob-cream-dim);
  font-size: .92rem; line-height: 1.4;
  display: block;
  transition: color .2s var(--ob-ease);
}
.ob-toc a:hover { color: var(--ob-gold); }

/* Corps du document : colonne lisible */
.ob-page__body {
  max-width: 72ch;
  font-size: 1.1rem;
  line-height: 1.85;
  color: var(--ob-cream);
}
.ob-page__layout:not(.has-toc) .ob-page__body { margin-inline: auto; }

.ob-page__body > :first-child { margin-top: 0; }
.ob-page__body p { margin: 0 0 1.3em; }
.ob-page__body h2,
.ob-page__body h3 {
  font-family: var(--ob-font-display);
  color: var(--ob-cream);
  line-height: 1.15;
  scroll-margin-top: 110px;
}
.ob-page__body h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); margin: 2.2em 0 .7em; }
.ob-page__body h3 {
  font-size: 1.32rem;
  margin: 1.9em 0 .6em;
  padding-left: 1rem;
  border-left: 2px solid var(--ob-gold);
}
.ob-page__body a { color: var(--ob-gold); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ob-page__body a:hover { color: var(--ob-gold-soft); }
.ob-page__body strong { color: var(--ob-cream); font-weight: 600; }

.ob-page__body ul,
.ob-page__body ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.ob-page__body li { margin: 0 0 .55em; }
.ob-page__body ul { list-style: none; padding-left: 0; }
.ob-page__body ul > li { position: relative; padding-left: 1.6em; }
.ob-page__body ul > li::before {
  content: "\2726"; position: absolute; left: 0; top: 0;
  color: var(--ob-gold); font-size: .8em; line-height: 1.9;
}

.ob-page__body blockquote {
  margin: 1.8em 0; padding: .4em 0 .4em 1.4em;
  border-left: 3px solid var(--ob-burgundy);
  color: var(--ob-cream-dim); font-style: italic;
  font-family: var(--ob-font-display); font-size: 1.22rem;
}
.ob-page__body hr { border: 0; height: 1px; background: var(--ob-line); margin: 2.4em 0; }
.ob-page__body table { width: 100%; border-collapse: collapse; margin: 0 0 1.6em; font-size: .98rem; }
.ob-page__body th, .ob-page__body td { text-align: left; padding: .7em .9em; border-bottom: 1px solid var(--ob-line); }
.ob-page__body th { color: var(--ob-gold); font-family: var(--ob-font-body); font-weight: 600; letter-spacing: .04em; }

/* ---------------------------------------------------------------------
   3. PAGE CONTACT
   ------------------------------------------------------------------- */
.ob-contact__grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(1.8rem, 4vw, 3.6rem);
  align-items: start;
  padding: clamp(1rem, 3vw, 2rem) 0 clamp(3rem, 7vw, 5rem);
}

/* Colonne éditoriale */
.ob-contact__aside-lead {
  font-size: 1.14rem; line-height: 1.8; color: var(--ob-cream);
  margin: 0 0 2rem;
}
.ob-contact__channels { display: grid; gap: 1.4rem; margin: 0 0 2rem; }
.ob-contact__channel { display: grid; grid-template-columns: 40px 1fr; gap: 1rem; align-items: start; }
.ob-contact__channel-ico {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--ob-line); border-radius: 50%;
  color: var(--ob-gold); font-size: 1rem; flex: 0 0 auto;
}
.ob-contact__channel-label {
  display: block; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ob-cream-mut); margin: .25rem 0 .25rem;
}
.ob-contact__channel-value { color: var(--ob-cream); font-size: 1.04rem; }
.ob-contact__channel-value a { color: var(--ob-cream); }
.ob-contact__channel-value a:hover { color: var(--ob-gold); }

.ob-contact__note {
  border: 1px solid var(--ob-line);
  border-left: 2px solid var(--ob-gold);
  background: var(--ob-ink-2);
  padding: 1rem 1.2rem;
  color: var(--ob-cream-dim);
  font-size: .95rem;
}

/* Carte formulaire */
.ob-contact__card {
  background: var(--ob-ink-2);
  border: 1px solid var(--ob-line);
  border-radius: 10px;
  padding: clamp(1.6rem, 3.4vw, 2.8rem);
  box-shadow: var(--ob-shadow);
}
.ob-contact__card-title { font-size: 1.6rem; margin: 0 0 .3rem; }
.ob-contact__card-sub { color: var(--ob-cream-dim); font-size: .96rem; margin: 0 0 1.6rem; }

/* ---------------------------------------------------------------------
   4. HABILLAGE CONTACT FORM 7
   ------------------------------------------------------------------- */
.ob-contact .wpcf7 { margin: 0; }
.ob-contact .wpcf7-form p { margin: 0 0 1.1rem; }
.ob-contact .wpcf7-form label {
  display: block;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ob-cream-dim); font-weight: 600;
}
.ob-contact .wpcf7-form-control-wrap { display: block; margin-top: .5rem; }

.ob-contact .wpcf7-form input[type="text"],
.ob-contact .wpcf7-form input[type="email"],
.ob-contact .wpcf7-form input[type="tel"],
.ob-contact .wpcf7-form input[type="url"],
.ob-contact .wpcf7-form textarea,
.ob-contact .wpcf7-form select {
  width: 100%;
  background: var(--ob-ink) !important; /* prime le theming des champs Blocksy */
  border: 1px solid rgba(236,231,225,.22); /* hairline crème nettement visible sur fond sombre */
  border-radius: 8px;
  color: var(--ob-cream);
  font-family: var(--ob-font-body);
  font-size: 1.02rem;
  padding: .85rem 1.05rem;
  transition: border-color .2s var(--ob-ease), box-shadow .2s var(--ob-ease);
}
.ob-contact .wpcf7-form textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.ob-contact .wpcf7-form input::placeholder,
.ob-contact .wpcf7-form textarea::placeholder { color: var(--ob-cream-mut); }
.ob-contact .wpcf7-form input:hover,
.ob-contact .wpcf7-form textarea:hover,
.ob-contact .wpcf7-form select:hover { border-color: rgba(236,231,225,.40); }
.ob-contact .wpcf7-form input:focus,
.ob-contact .wpcf7-form textarea:focus,
.ob-contact .wpcf7-form select:focus {
  outline: none;
  border-color: var(--ob-gold);
  box-shadow: 0 0 0 3px rgba(201,162,90,.18);
}

/* Bouton d'envoi */
.ob-contact .wpcf7-form .wpcf7-submit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  margin-top: .4rem;
  font-family: var(--ob-font-body); font-weight: 600;
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  padding: 1rem 1.6rem; border-radius: 999px;
  background: var(--ob-burgundy) !important; /* prime le theming des boutons Blocksy */
  color: #fff;
  border: 1px solid var(--ob-burgundy); cursor: pointer;
  transition: background .25s var(--ob-ease), border-color .25s var(--ob-ease), transform .15s var(--ob-ease);
}
.ob-contact .wpcf7-form .wpcf7-submit:hover { background: var(--ob-burgundy-lt) !important; border-color: var(--ob-burgundy-lt); }
.ob-contact .wpcf7-form .wpcf7-submit:active { transform: translateY(1px); }
.ob-contact .wpcf7-spinner { background-color: var(--ob-gold); margin: 0 0 0 .8rem; }

/* Validation & réponses */
.ob-contact .wpcf7-not-valid-tip { color: var(--ob-burgundy-lt); font-size: .82rem; letter-spacing: 0; text-transform: none; margin-top: .4rem; }
.ob-contact .wpcf7-form input.wpcf7-not-valid,
.ob-contact .wpcf7-form textarea.wpcf7-not-valid { border-color: var(--ob-burgundy-lt); }
.ob-contact .wpcf7-response-output {
  margin: 1.4rem 0 0 !important;
  padding: .9rem 1.1rem !important;
  border-radius: 8px;
  border-width: 1px !important;
  font-size: .95rem;
}
.ob-contact .wpcf7-form.sent .wpcf7-response-output { border-color: var(--ob-gold) !important; color: var(--ob-gold-soft); }
.ob-contact .wpcf7-form.invalid .wpcf7-response-output,
.ob-contact .wpcf7-form.failed .wpcf7-response-output { border-color: var(--ob-burgundy-lt) !important; color: var(--ob-burgundy-lt); }

/* ---------------------------------------------------------------------
   5. RESPONSIVE
   ------------------------------------------------------------------- */
@media (max-width: 860px) {
  .ob-page__layout.has-toc { grid-template-columns: 1fr; }
  .ob-toc { position: static; border-left: 0; border-top: 1px solid var(--ob-line); padding: 1.2rem 0 0; }
  .ob-contact__grid { grid-template-columns: 1fr; }
  .ob-contact__card { order: -1; }
}