/* =========================================================
   Paris 17 Ostéo — Refonte « douceur & apaisement » 2026
   Pratique centrée sur le stress et les émotions :
   le site doit apaiser dès la première seconde.
   Couche de surcharge — aucun fichier du thème n'est modifié.
   ========================================================= */

:root {
  --p17-bg:        #FBF7F2;  /* blanc chaud — fond principal */
  --p17-bg-2:      #F4EDE4;  /* sable clair — sections alternées */
  --p17-bg-3:      #EADFD1;  /* sable soutenu — cartes */
  --p17-text:      #332E2A;  /* brun profond — texte */
  --p17-text-soft: #5C534B;  /* brun doux — paragraphes */
  --p17-muted:     #8A7F73;  /* taupe — surtitres, légendes */
  --p17-accent:    #C0705A;  /* terracotta — CTA, accents */
  --p17-accent-h:  #A85D49;  /* terracotta soutenu — hover */
  --p17-sage:      #93A98F;  /* vert sauge — apaisement, secondaire */
  --p17-line:      rgba(51,46,42,.10);
  --p17-shadow:    0 2px 8px rgba(51,46,42,.04), 0 12px 32px rgba(51,46,42,.06);
}

/* ---------- Fond global ---------- */
body,
.ohio-wrapper,
.site-content,
.content-wrapper,
main {
  background-color: var(--p17-bg) !important;
  color: var(--p17-text);
}

/* ---------- Typographie ---------- */
h1, h2, h3, h4, h5, h6,
.headline, .ohio-widget-heading__title {
  color: var(--p17-text) !important;
  letter-spacing: -.01em;
}

h1 { font-weight: 300; line-height: 1.08; }
h2 { font-weight: 300; line-height: 1.15; }
h3, h4 { font-weight: 500; }

p, li, .text-editor, .widget_text {
  color: var(--p17-text-soft);
  line-height: 1.75;
}

/* Surtitres : petites capitales taupe */
.ohio-widget-heading__caption,
.headline__caption,
.subheadline {
  color: var(--p17-muted) !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 11px !important;
  font-weight: 500;
}

/* ---------- Sections : l'ancien bleu canard devient sable ---------- */
[style*="216882"],
[style*="#216882"],
.clb__dark_section,
.elementor-section[style*="background-color: rgb(33, 104, 130)"] {
  background-color: var(--p17-bg-2) !important;
}

/* Le texte de ces sections repasse en brun (il était blanc sur bleu) */
.clb__dark_section h1, .clb__dark_section h2, .clb__dark_section h3,
.clb__dark_section h4, .clb__dark_section p, .clb__dark_section li,
.clb__dark_section .ohio-widget-heading__title {
  color: var(--p17-text) !important;
}
.clb__dark_section p { color: var(--p17-text-soft) !important; }

/* ---------- En-tête ---------- */
.ohio-header,
.header,
header.site-header {
  background-color: rgba(251,247,242,.88) !important;
  backdrop-filter: saturate(120%) blur(12px);
  -webkit-backdrop-filter: saturate(120%) blur(12px);
  border-bottom: 1px solid var(--p17-line);
}

.header a,
.ohio-header a,
.main-menu a,
.menu-item a { color: var(--p17-text) !important; }

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

/* ---------- Boutons ---------- */
.btn, .button, .ohio-button, .elementor-button,
button[type="submit"], input[type="submit"],
.wp-element-button, .single_add_to_cart_button {
  background-color: var(--p17-accent) !important;
  border-color: var(--p17-accent) !important;
  color: #FFF9F5 !important;
  border-radius: 999px !important;         /* pilule : plus doux, plus accueillant */
  font-weight: 500 !important;
  letter-spacing: .01em;
  padding: 14px 30px !important;
  box-shadow: 0 6px 18px rgba(192,112,90,.22);
  transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.btn:hover, .button:hover, .ohio-button:hover, .elementor-button:hover,
button[type="submit"]:hover, .single_add_to_cart_button:hover {
  background-color: var(--p17-accent-h) !important;
  border-color: var(--p17-accent-h) !important;
  color: #FFF9F5 !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(192,112,90,.28);
}

/* Bouton secondaire : contour discret, sans agressivité */
.p17-btn-ghost .elementor-button {
  background: transparent !important;
  border: 1px solid rgba(51,46,42,.22) !important;
  color: var(--p17-text) !important;
  box-shadow: none;
}

.p17-btn-ghost .elementor-button:hover {
  border-color: var(--p17-accent) !important;
  color: var(--p17-accent) !important;
  background: rgba(192,112,90,.06) !important;
  box-shadow: none;
}

/* ---------- Cartes ---------- */
.card, .ohio-widget-card, .post-card, .blog-card,
.wc-block-grid__product, li.product {
  background-color: #FFFFFF !important;
  border: 1px solid var(--p17-line) !important;
  border-radius: 18px !important;
  box-shadow: var(--p17-shadow);
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
}

.card:hover, .post-card:hover, li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(51,46,42,.06), 0 20px 44px rgba(51,46,42,.10);
}

/* ---------- Images : rondeur et douceur ---------- */
.elementor-widget-image img,
.card img,
.wp-post-image {
  border-radius: 16px;
}

/* ---------- Accordéon / FAQ ---------- */
.ohio-accordion__item,
.elementor-accordion-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--p17-line) !important;
}

.ohio-accordion__title,
.elementor-tab-title,
.elementor-tab-title a { color: var(--p17-text) !important; }

.elementor-tab-content { color: var(--p17-text-soft) !important; }

/* ---------- Formulaires ---------- */
input[type="text"], input[type="email"], input[type="tel"],
input[type="search"], input[type="password"], textarea, select,
.wpcf7 input, .wpcf7 textarea {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(51,46,42,.16) !important;
  color: var(--p17-text) !important;
  border-radius: 12px !important;
  padding: 13px 16px !important;
}

input::placeholder, textarea::placeholder { color: rgba(51,46,42,.38) !important; }

input:focus, textarea:focus, select:focus {
  border-color: var(--p17-accent) !important;
  box-shadow: 0 0 0 3px rgba(192,112,90,.12) !important;
  outline: none !important;
}

/* ---------- Pied de page ---------- */
.footer, .ohio-footer, footer.site-footer {
  background-color: var(--p17-bg-2) !important;
  border-top: 1px solid var(--p17-line);
  color: var(--p17-text-soft);
}

.footer a, .ohio-footer a { color: var(--p17-text-soft) !important; }
.footer a:hover, .ohio-footer a:hover { color: var(--p17-accent) !important; }

/* ---------- Filets ---------- */
hr, .separator, .elementor-divider-separator {
  border-color: var(--p17-line) !important;
  background-color: var(--p17-line) !important;
}

/* =========================================================
   HERO — l'accueil du patient
   ========================================================= */
.p17-hero {
  background-color: var(--p17-bg) !important;
  position: relative;
  overflow: hidden;
}

/* Halo sable très doux, comme une lumière chaude qui entre */
.p17-hero::before {
  content: "";
  position: absolute;
  top: -10%; right: -6%;
  width: 62vw; height: 62vw;
  max-width: 900px; max-height: 900px;
  background: radial-gradient(circle, rgba(234,223,209,.75) 0%, rgba(251,247,242,0) 66%);
  pointer-events: none;
  z-index: 0;
}

.p17-hero > .elementor-container { position: relative; z-index: 1; }

.p17-hero .p17-hero__eyebrow {
  color: var(--p17-muted) !important;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: 11px !important;
  margin-bottom: 20px;
}

.p17-hero h1 {
  font-size: clamp(2.4rem, 4.6vw, 4.2rem) !important;
  font-weight: 300 !important;
  line-height: 1.06 !important;
  letter-spacing: -.02em;
  color: var(--p17-text) !important;
  margin: 0 0 10px;
}

/* L'accent terracotta, en italique : chaleur plutôt que démonstration */
.p17-hero h1 em {
  font-style: italic;
  color: var(--p17-accent);
}

.p17-hero .p17-hero__name {
  font-size: 13px !important;
  color: var(--p17-muted) !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 26px;
}

.p17-hero .p17-hero__lead p {
  font-size: clamp(1.02rem, 1.15vw, 1.18rem);
  line-height: 1.8;
  color: var(--p17-text-soft);
  max-width: 44ch;
  margin-bottom: 32px;
}

/* L'image du soin : ronde en haut, douce, jamais agressive */
.p17-hero__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 60% 40%;
  border-radius: 200px 200px 24px 24px;   /* arche : apaisant, organique */
  box-shadow: 0 20px 60px rgba(51,46,42,.14);
}

/* Barre de réassurance */
.p17-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid var(--p17-line);
}

.p17-hero__trust span {
  color: var(--p17-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.p17-hero__trust strong {
  display: block;
  color: var(--p17-text);
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 3px;
}

@media (max-width: 767px) {
  .p17-hero::before { display: none; }
  .p17-hero__trust { gap: 20px; }
  .p17-hero__portrait img {
    aspect-ratio: 1 / 1;
    border-radius: 140px 140px 20px 20px;
  }
}

/* ---------- Accessibilité ---------- */
a:focus-visible, button:focus-visible, .elementor-button:focus-visible {
  outline: 2px solid var(--p17-accent);
  outline-offset: 3px;
}

::selection { background: rgba(192,112,90,.22); color: var(--p17-text); }