/* =========================================================
   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); }

/* =========================================================
   BLOCS DE LA PAGE D'ACCUEIL (refonte complète)
   ========================================================= */

/* ---------- Éléments de base réutilisés ---------- */
.p17-eyebrow {
  color: var(--p17-accent) !important;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  margin: 0 0 14px;
}

.p17-h2 {
  font-size: clamp(1.9rem, 3vw, 2.9rem);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--p17-text);
  margin: 0 0 20px;
  max-width: 20ch;
}

.p17-h2 em { font-style: italic; color: var(--p17-accent); }

.p17-lead {
  font-size: 1.06rem;
  line-height: 1.8;
  color: var(--p17-text-soft);
  max-width: 58ch;
  margin: 0 0 30px;
}

.p17-head { text-align: center; margin-bottom: 54px; }
.p17-head .p17-h2 { margin-left: auto; margin-right: auto; max-width: 24ch; }
.p17-lead--center { margin-left: auto; margin-right: auto; text-align: center; }

/* Icônes : terracotta, toujours visibles */
.p17-ic { color: var(--p17-accent); flex: none; }

/* ---------- Boutons (version HTML maison) ---------- */
.p17-cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.p17-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--p17-accent); color: #FFF9F5 !important;
  border: 1px solid var(--p17-accent);
  padding: 14px 28px; border-radius: 999px;
  font-size: 15px; font-weight: 500; text-decoration: none;
  box-shadow: 0 6px 18px rgba(192,112,90,.22);
  transition: background .25s, transform .25s, box-shadow .25s;
}
.p17-btn:hover {
  background: var(--p17-accent-h); border-color: var(--p17-accent-h);
  transform: translateY(-2px); box-shadow: 0 10px 26px rgba(192,112,90,.3);
  color: #FFF9F5 !important;
}
.p17-btn--ghost {
  background: transparent; color: var(--p17-text) !important;
  border: 1px solid rgba(51,46,42,.22); box-shadow: none;
}
.p17-btn--ghost .p17-ic { color: var(--p17-accent); }
.p17-btn--ghost:hover {
  background: rgba(192,112,90,.06); border-color: var(--p17-accent);
  color: var(--p17-accent) !important; box-shadow: none;
}

/* =============== 2. DÉFINITION =============== */
.p17-def {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 72px;
  align-items: center;
}
.p17-def__img img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: 999px 999px 28px 28px;
  box-shadow: 0 24px 60px rgba(51,46,42,.16);
}

/* Les 3 piliers : Écouter / Comprendre / Dénouer */
.p17-pillars { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.p17-pillars li {
  display: grid;
  grid-template-columns: 52px 1fr;
  grid-template-rows: auto auto;
  column-gap: 18px;
  align-items: center;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--p17-line);
}
.p17-pillars li:last-child { border-bottom: none; padding-bottom: 0; }
.p17-pillars__ic {
  grid-row: 1 / 3;
  width: 52px; height: 52px; border-radius: 50%;
  background: #FFFFFF; border: 1px solid var(--p17-line);
  display: grid; place-items: center;
  box-shadow: var(--p17-shadow);
}
.p17-pillars strong {
  font-size: 1.02rem; font-weight: 600; color: var(--p17-text);
  align-self: end; line-height: 1.3;
}
.p17-pillars li > span:last-child {
  font-size: .94rem; line-height: 1.6; color: var(--p17-text-soft); align-self: start;
}

/* =============== 3. POUR QUI ? (cartes) =============== */
.p17-grid { display: grid; gap: 24px; }
.p17-grid--3 { grid-template-columns: repeat(3, 1fr); }

.p17-card {
  display: block;
  background: #FFFFFF;
  border: 1px solid var(--p17-line);
  border-radius: 20px;
  padding: 32px 30px 28px;
  text-decoration: none;
  box-shadow: var(--p17-shadow);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.p17-card:hover {
  transform: translateY(-5px);
  border-color: rgba(192,112,90,.35);
  box-shadow: 0 6px 16px rgba(51,46,42,.06), 0 24px 48px rgba(51,46,42,.10);
}
.p17-card__ic {
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 16px;
  background: rgba(192,112,90,.10);
  margin-bottom: 20px;
}
.p17-card__t {
  font-size: 1.2rem; font-weight: 600; color: var(--p17-text);
  margin: 0 0 10px; letter-spacing: -.01em;
}
.p17-card__d {
  font-size: .94rem; line-height: 1.65; color: var(--p17-text-soft); margin: 0 0 18px;
}
.p17-card__more {
  font-size: .86rem; font-weight: 600; color: var(--p17-accent);
  letter-spacing: .02em;
}

/* =============== 4. LE CABINET =============== */
.p17-cab {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 72px;
  align-items: center;
}
.p17-cab__img img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(51,46,42,.16);
}

/* Liste de faits (adresse / horaires / téléphone) */
.p17-facts { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 16px; }
.p17-facts li { display: flex; gap: 15px; align-items: flex-start; }
.p17-facts strong { display: block; color: var(--p17-text); font-weight: 600; font-size: .99rem; }
.p17-facts strong a { color: var(--p17-text) !important; text-decoration: none; }
.p17-facts strong a:hover { color: var(--p17-accent) !important; }
.p17-facts span { display: block; color: var(--p17-muted); font-size: .88rem; margin-top: 2px; }

/* =============== 5. SPÉCIALITÉS =============== */
.p17-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
/* Les deux dernières cartes occupent une ligne de 2 → équilibre visuel */
.p17-specs > :nth-child(4),
.p17-specs > :nth-child(5) { grid-column: span 1; }

.p17-spec {
  position: relative;
  background: #FFFFFF;
  border: 1px solid var(--p17-line);
  border-radius: 20px;
  padding: 34px 30px 28px;
  box-shadow: var(--p17-shadow);
  transition: transform .3s ease, box-shadow .3s ease;
}
.p17-spec:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(51,46,42,.06), 0 22px 46px rgba(51,46,42,.10);
}
.p17-spec__n {
  display: block;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  color: var(--p17-accent);
  margin-bottom: 14px;
}
.p17-spec__t {
  font-size: 1.22rem; font-weight: 600; color: var(--p17-text);
  margin: 0 0 12px; letter-spacing: -.01em;
}
.p17-spec__d {
  font-size: .93rem; line-height: 1.68; color: var(--p17-text-soft); margin: 0 0 20px;
}
.p17-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.p17-tags span {
  font-size: .76rem; font-weight: 500;
  color: var(--p17-text-soft);
  background: var(--p17-bg-2);
  border: 1px solid var(--p17-line);
  padding: 5px 11px; border-radius: 999px;
}

/* =============== 6. GALERIE DU SOIN =============== */
.p17-gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.p17-gal figure { margin: 0; }
.p17-gal img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 16px 44px rgba(51,46,42,.12);
  transition: transform .5s ease;
}
.p17-gal figure:hover img { transform: scale(1.02); }
/* La photo du milieu, légèrement décalée : la grille respire */
.p17-gal figure:nth-child(2) { transform: translateY(28px); }

/* =============== 7. TÉMOIGNAGES =============== */
.p17-reassure {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; margin-bottom: 48px;
}
.p17-reassure span {
  display: block;
  background: #FFFFFF;
  border: 1px solid var(--p17-line);
  border-radius: 18px;
  padding: 26px 26px 24px;
  box-shadow: var(--p17-shadow);
  color: var(--p17-muted); font-size: .89rem; line-height: 1.55;
}
.p17-reassure strong {
  display: block; color: var(--p17-text);
  font-size: 1.04rem; font-weight: 600; margin: 14px 0 5px;
}

/* Le widget d'avis Google : on le raccorde à la charte */
.p17-reviews .ti-widget { --ti-font-family: inherit; }
.p17-reviews .ti-widget-container,
.p17-reviews .ti-review-item {
  border-radius: 18px !important;
}

/* =============== 9. RENDEZ-VOUS + CONTACT =============== */
.p17-map {
  margin-top: 36px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--p17-line);
  box-shadow: var(--p17-shadow);
  line-height: 0;
}
.p17-map iframe { width: 100%; height: 300px; display: block; }

/* La carte formulaire */
.p17-formcard > .elementor-widget-wrap {
  background: #FFFFFF;
  border: 1px solid var(--p17-line);
  border-radius: 24px;
  padding: 40px 36px !important;
  box-shadow: 0 4px 14px rgba(51,46,42,.05), 0 22px 50px rgba(51,46,42,.09);
}
.p17-formtitle {
  font-size: 1.5rem; font-weight: 600; color: var(--p17-text);
  margin: 0 0 8px; letter-spacing: -.01em;
}
.p17-formsub {
  font-size: .93rem; color: var(--p17-text-soft); margin: 0 0 26px;
}

/* Contact Form 7 */
.p17-cf7 .wpcf7-form p { margin: 0 0 16px; }
.p17-cf7 .wpcf7-form label { display: block; }
.p17-cf7 input[type="text"], .p17-cf7 input[type="email"],
.p17-cf7 input[type="tel"], .p17-cf7 textarea {
  width: 100%;
}
.p17-cf7 textarea { min-height: 130px; resize: vertical; }
.p17-cf7 .wpcf7-submit {
  width: 100%;
  background: var(--p17-accent) !important;
  color: #FFF9F5 !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 15px 28px !important;
  font-weight: 500 !important;
  cursor: pointer;
}
.p17-cf7 .wpcf7-submit:hover { background: var(--p17-accent-h) !important; }

/* =============== PIED DE PAGE =============== */
.footer, .ohio-footer, footer.site-footer {
  background: var(--p17-bg-2) !important;
  border-top: 1px solid var(--p17-line);
  padding-top: 70px !important;
}
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5,
.ohio-footer h1, .ohio-footer h2, .ohio-footer h3, .ohio-footer h4, .ohio-footer h5,
.footer .widget-title, .ohio-footer .widget-title {
  color: var(--p17-text) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  margin-bottom: 18px !important;
}
.footer p, .footer li, .footer a, .footer span,
.ohio-footer p, .ohio-footer li, .ohio-footer a, .ohio-footer span {
  color: var(--p17-text-soft) !important;
  font-size: .93rem;
}
.footer a:hover, .ohio-footer a:hover { color: var(--p17-accent) !important; }
.footer img, .ohio-footer img { max-width: 190px; height: auto; }

/* =============== RESPONSIVE =============== */
@media (max-width: 1024px) {
  .p17-grid--3,
  .p17-specs,
  .p17-reassure { grid-template-columns: repeat(2, 1fr); }
  .p17-def, .p17-cab { grid-template-columns: 1fr; gap: 44px; }
  .p17-cab__img { order: 2; }
  .p17-def__img img, .p17-cab__img img { aspect-ratio: 16/11; border-radius: 24px; }
}

@media (max-width: 767px) {
  .p17-grid--3,
  .p17-specs,
  .p17-reassure,
  .p17-gal { grid-template-columns: 1fr; }
  .p17-gal figure:nth-child(2) { transform: none; }
  .p17-h2 { max-width: none; }
  .p17-cta-row { flex-direction: column; align-items: stretch; }
  .p17-btn { justify-content: center; }
  .p17-formcard > .elementor-widget-wrap { padding: 30px 22px !important; }
}

/* =========================================================
   PIED DE PAGE — le thème le sert en « dark section » :
   fond bleu et texte blanc. On reprend tout.
   ========================================================= */
footer.site-footer,
footer.site-footer.clb__dark_section {
  background: var(--p17-bg-2) !important;
  border-top: 1px solid var(--p17-line);
  padding-top: 72px !important;
}

/* Titres de colonnes */
footer.site-footer h1, footer.site-footer h2, footer.site-footer h3,
footer.site-footer h4, footer.site-footer h5, footer.site-footer h6,
footer.site-footer .widget-title,
footer.site-footer .widgettitle {
  color: var(--p17-text) !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  margin-bottom: 18px !important;
}

footer.site-footer p,
footer.site-footer li,
footer.site-footer span,
footer.site-footer div,
footer.site-footer a {
  color: var(--p17-text-soft) !important;
}

footer.site-footer a:hover { color: var(--p17-accent) !important; }

/* Le logo du footer est une image blanche → invisible sur fond sable.
   On la ramène en silhouette sombre. */
footer.site-footer img {
  filter: brightness(0) saturate(100%);
  opacity: .8;
  max-width: 175px;
  height: auto;
}

/* Bouton « Prendre RDV » du footer */
footer.site-footer .btn,
footer.site-footer .button,
footer.site-footer .ohio-button {
  background: var(--p17-accent) !important;
  border-color: var(--p17-accent) !important;
  color: #FFF9F5 !important;
  border-radius: 999px !important;
}
footer.site-footer .btn:hover,
footer.site-footer .ohio-button:hover {
  background: var(--p17-accent-h) !important;
  color: #FFF9F5 !important;
}

/* La barre de copyright : elle restait bleu canard */
.site-footer-copyright,
footer .site-footer-copyright,
.copyright {
  background: transparent !important;
  border-top: 1px solid var(--p17-line);
  margin-top: 54px;
  padding: 26px 0 !important;
}

.site-footer-copyright *,
.copyright * {
  color: var(--p17-muted) !important;
  font-size: .84rem !important;
}

/* =========================================================
   FORMULAIRE — étiquettes lisibles
   ========================================================= */
.p17-cf7 label {
  font-size: .84rem;
  font-weight: 600;
  color: var(--p17-text);
  letter-spacing: .01em;
}
.p17-cf7 label br { line-height: 2.1; }
.p17-cf7 select {
  width: 100%;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--p17-muted) 50%),
                    linear-gradient(135deg, var(--p17-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px !important;
}
.p17-cf7 .wpcf7-response-output {
  border-radius: 12px !important;
  border-width: 1px !important;
  font-size: .9rem;
  padding: 12px 16px !important;
}
.p17-cf7 .wpcf7-not-valid-tip { color: var(--p17-accent-h); font-size: .8rem; }

/* ---------- Contenu du pied de page ---------- */
.p17-f-adr strong { color: var(--p17-text) !important; font-weight: 600; font-size: 1rem; }
.p17-f-sub { font-size: .84rem !important; color: var(--p17-muted) !important; line-height: 1.6; }
.p17-f-link { color: var(--p17-accent) !important; font-weight: 600; font-size: .88rem; }

.p17-f-hours { list-style: none; margin: 0 0 16px; padding: 0; }
.p17-f-hours li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--p17-line);
  font-size: .89rem;
}
.p17-f-hours li:last-child { border-bottom: none; }
.p17-f-hours strong { color: var(--p17-text) !important; font-weight: 600; }

.p17-f-tel {
  display: inline-block;
  font-size: 1.28rem !important; font-weight: 600;
  color: var(--p17-text) !important;
  letter-spacing: .01em; margin-bottom: 6px;
}
.p17-f-tel:hover { color: var(--p17-accent) !important; }

.p17-btn--sm { padding: 11px 22px; font-size: 14px; }

.p17-f-nav { list-style: none; margin: 22px 0 0; padding: 0; }
.p17-f-nav li { padding: 6px 0; }
.p17-f-nav a { font-size: .89rem; }
.p17-f-nav a { display: inline-block; transition: transform .2s ease; }
.p17-f-nav a:hover { transform: translateX(4px); }

.p17-f-brand {
  font-size: 1.06rem !important; font-weight: 600;
  color: var(--p17-text) !important; margin-bottom: 12px !important;
}
.p17-f-brand span { color: var(--p17-muted) !important; font-weight: 400; font-size: .9rem; }

/* =========================================================
   CARTES ARTICLES — image et texte séparés (le widget du
   thème posait le titre en blanc à même la photo)
   ========================================================= */
.p17-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.p17-post {
  display: flex; flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--p17-line);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--p17-shadow);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.p17-post:hover {
  transform: translateY(-5px);
  border-color: rgba(192,112,90,.35);
  box-shadow: 0 6px 16px rgba(51,46,42,.06), 0 24px 48px rgba(51,46,42,.10);
}

.p17-post__img { position: relative; display: block; overflow: hidden; }
.p17-post__img img {
  width: 100%; aspect-ratio: 16/10; object-fit: cover;
  border-radius: 0 !important;
  display: block;
  transition: transform .6s ease;
}
.p17-post:hover .p17-post__img img { transform: scale(1.04); }

/* La catégorie : pastille terracotta, lisible quelle que soit la photo */
.p17-post__cat {
  position: absolute; left: 16px; bottom: 16px;
  background: var(--p17-accent);
  color: #FFF9F5;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 999px;
}

.p17-post__body { display: flex; flex-direction: column; padding: 24px 24px 26px; flex: 1; }

.p17-post__meta {
  font-size: .76rem; color: var(--p17-muted);
  letter-spacing: .04em; margin-bottom: 12px;
}

.p17-post__t {
  font-size: 1.12rem; font-weight: 600; line-height: 1.35;
  color: var(--p17-text); margin: 0 0 12px; letter-spacing: -.01em;
}

.p17-post__d {
  font-size: .91rem; line-height: 1.65;
  color: var(--p17-text-soft); margin-bottom: 20px; flex: 1;
}

.p17-post__more {
  font-size: .85rem; font-weight: 600; color: var(--p17-accent);
}

@media (max-width: 1024px) { .p17-posts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .p17-posts { grid-template-columns: 1fr; } }

/* =========================================================
   BOUTONS — correctifs
   Le thème appliquait `.button.btn-optional { color: brun }`
   (plus spécifique que ma règle) : texte brun sur terracotta,
   d'où l'aspect « foncé », et texte invisible au survol.
   ========================================================= */
a.button,
a.button.btn-optional,
a.button:hover,
a.button.btn-optional:hover,
a.button:focus,
a.button.btn-optional:focus,
.ohio-button:hover,
.elementor-button:hover,
.p17-btn:hover {
  color: #FFF9F5 !important;   /* le texte reste toujours lisible */
}

/* Boutons : plus fins, plus nets. On retire l'ombre colorée
   qui empâtait la forme et donnait cet aspect « lourd ». */
.btn, .button, .ohio-button, .elementor-button, .p17-btn,
button[type="submit"], input[type="submit"], .wpcf7-submit {
  box-shadow: none !important;
  font-weight: 500 !important;
  letter-spacing: .015em !important;
  border: 1px solid transparent !important;
  transition: background-color .22s ease, box-shadow .22s ease, transform .22s ease !important;
}

.btn:hover, .button:hover, .ohio-button:hover, .elementor-button:hover, .p17-btn:hover,
button[type="submit"]:hover, .wpcf7-submit:hover {
  background-color: var(--p17-accent-h) !important;
  border-color: var(--p17-accent-h) !important;
  transform: translateY(-1px) !important;
  /* une ombre discrète et neutre, pas un halo orange */
  box-shadow: 0 8px 20px rgba(51,46,42,.12) !important;
}

/* Bouton secondaire : contour fin, texte brun — élégant et sobre */
.p17-btn--ghost,
.p17-btn-ghost .elementor-button {
  background: transparent !important;
  color: var(--p17-text) !important;
  border: 1px solid rgba(51,46,42,.20) !important;
}
.p17-btn--ghost:hover,
.p17-btn-ghost .elementor-button:hover {
  background: rgba(192,112,90,.07) !important;
  border-color: var(--p17-accent) !important;
  color: var(--p17-accent) !important;
  transform: translateY(-1px);
  box-shadow: none !important;
}
.p17-btn--ghost:hover .p17-ic { color: var(--p17-accent); }

/* =========================================================
   CARTE MAPBOX
   ========================================================= */
.p17-map {
  position: relative;
  display: block;
  margin-top: 34px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--p17-line);
  box-shadow: var(--p17-shadow);
  line-height: 0;
}
.p17-map img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 0 !important;
  display: block;
  transition: transform .6s ease;
}
.p17-map:hover img { transform: scale(1.03); }

.p17-map__badge {
  position: absolute; right: 16px; bottom: 16px;
  background: rgba(251,247,242,.94);
  backdrop-filter: blur(6px);
  color: var(--p17-text) !important;
  font-size: .82rem; font-weight: 600;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--p17-line);
  line-height: 1;
}
.p17-map:hover .p17-map__badge { color: var(--p17-accent) !important; }

/* =========================================================
   PIED DE PAGE — plus compact
   ========================================================= */
footer.site-footer,
footer.site-footer.clb__dark_section {
  padding-top: 52px !important;
  padding-bottom: 0 !important;
}
footer.site-footer .widget,
footer.site-footer .widget_custom_html { margin-bottom: 0 !important; }

footer.site-footer .widget-title,
footer.site-footer .widgettitle { margin-bottom: 14px !important; }

footer.site-footer p { margin-bottom: 10px !important; line-height: 1.6 !important; }

.p17-f-logo {
  filter: none !important;      /* le logo du header est déjà lisible sur fond clair */
  opacity: 1 !important;
  max-width: 190px; height: auto;
  margin-bottom: 16px;
}
.p17-f-sub { font-size: .82rem !important; line-height: 1.55 !important; }

.p17-f-hours li { padding: 6px 0 !important; font-size: .85rem; }
.p17-f-tel { font-size: 1.16rem !important; }
.p17-f-nav { margin-top: 16px !important; }
.p17-f-nav li { padding: 4px 0 !important; }

.site-footer-copyright,
.copyright {
  margin-top: 36px !important;
  padding: 20px 0 !important;
}

/* =========================================================
   ⬛ SYSTÈME DE THÈME — deux palettes commutables
   Ce bloc vient en dernier : il gagne sur tout ce qui précède.

   Le thème Ohio pilote TOUTES ses couleurs (survols, liens,
   boutons, cartes) via --clb-color-primary, réglée sur l'ancien
   bleu #216882. C'est de là que venaient les survols bleu foncé.
   On rebranche ces variables sur notre accent : le thème suit.
   ========================================================= */

/* ---------- Palette TERRACOTTA (par défaut) ---------- */
:root {
  --p17-bg:        #FBF7F2;
  --p17-bg-2:      #F4EDE4;
  --p17-bg-3:      #EADFD1;
  --p17-text:      #332E2A;
  --p17-text-soft: #5C534B;
  --p17-muted:     #8A7F73;
  --p17-accent:    #C0705A;
  --p17-accent-h:  #A85D49;
  --p17-accent-soft: rgba(192,112,90,.09);
  --p17-on-accent: #FFF9F5;
  --p17-line:      rgba(51,46,42,.10);
}

/* ---------- Palette BLEUE (couleurs du logo) ---------- */
/* #307088 pétrole · #31B4E5 cyan · #85C7DC bleu clair */
:root[data-p17-theme="blue"] {
  --p17-bg:        #F9FBFC;
  --p17-bg-2:      #EDF4F7;
  --p17-bg-3:      #DCE9EF;
  --p17-text:      #1E2E36;
  --p17-text-soft: #4C5F69;
  --p17-muted:     #7B909B;
  --p17-accent:    #307088;   /* pétrole du logo */
  --p17-accent-h:  #245A6E;
  --p17-accent-soft: rgba(48,112,136,.09);
  --p17-on-accent: #F5FBFD;
  --p17-line:      rgba(30,46,54,.10);
}

/* ---------- On rebranche les variables du thème ---------- */
:root,
:root[data-p17-theme="blue"] {
  --clb-color-primary:      var(--p17-accent);
  --clb-color-primary-50:   var(--p17-accent-soft);
  --clb-color-secondary:    var(--p17-accent-h);
  --clb-color-button:       var(--p17-accent);
  --clb-color-button-hover: var(--p17-accent-h);
  --clb-color-link-hover:   var(--p17-accent);
}

/* Le thème retire --clb-color-button au survol (`:not(:hover)`),
   le fond retombait en blanc → texte blanc sur blanc. On la remet. */
.button:hover,
.button-group .button:hover,
.menu-optional .button-group .button:hover {
  --clb-color-button: var(--p17-accent-h);
  --clb-color-button-hover: var(--p17-accent-h);
}

/* Règle de sécurité : si un fond redevient blanc au survol,
   le texte passe en accent — jamais de blanc sur blanc. */
a.button:hover,
.ohio-button:hover,
.elementor-button:hover,
.p17-btn:hover {
  background-color: var(--p17-accent-h) !important;
  border-color: var(--p17-accent-h) !important;
  color: var(--p17-on-accent) !important;
}

.p17-btn--ghost:hover,
.p17-btn-ghost .elementor-button:hover {
  background-color: var(--p17-accent-soft) !important;
  border-color: var(--p17-accent) !important;
  color: var(--p17-accent) !important;
}

/* Survols de liens et de cartes : plus jamais de bleu canard */
a:hover,
.card:hover .card__title,
.p17-card:hover .p17-card__t,
.p17-post:hover .p17-post__t {
  color: var(--p17-accent);
}

.p17-card:hover,
.p17-post:hover,
.card:hover {
  border-color: var(--p17-accent) !important;
}

/* ---------- Les fonds suivent la palette ---------- */
body, .ohio-wrapper, main,
.p17-hero,
.elementor-section[style*="FBF7F2"],
.elementor-section[style*="rgb(251, 247, 242)"] {
  background-color: var(--p17-bg) !important;
}

.p17-s-pourqui, .p17-s-gal, .p17-s-rdv,
footer.site-footer,
.elementor-section[style*="F4EDE4"],
.elementor-section[style*="rgb(244, 237, 228)"] {
  background-color: var(--p17-bg-2) !important;
}

.p17-card, .p17-post, .p17-spec, .p17-reassure span,
.p17-pillars__ic, .p17-formcard > .elementor-widget-wrap,
input, textarea, select {
  background-color: #FFFFFF !important;
}

:root[data-p17-theme="blue"] .p17-card,
:root[data-p17-theme="blue"] .p17-post,
:root[data-p17-theme="blue"] .p17-spec,
:root[data-p17-theme="blue"] .p17-reassure span,
:root[data-p17-theme="blue"] .p17-formcard > .elementor-widget-wrap {
  background-color: #FFFFFF !important;
}

/* Le halo du hero suit lui aussi la palette */
.p17-hero::before {
  background: radial-gradient(circle, var(--p17-bg-3) 0%, transparent 66%);
  opacity: .55;
}

/* Le marqueur de la carte est terracotta : en thème bleu, on
   teinte légèrement l'image pour qu'elle ne jure pas. */
:root[data-p17-theme="blue"] .p17-map img { filter: hue-rotate(155deg) saturate(.85); }


/* =========================================================
   ⬛ AMBIANCES TYPOGRAPHIQUES
   Le client choisit une ambiance, pas une police.
   Chaque ambiance = un couple titre / texte cohérent.
   ========================================================= */

/* 1. DOUCEUR (défaut) — serif chaleureuse, presque manuscrite dans ses
      courbes, sur une grotesque très lisible. Rassurant, humain. */
:root,
:root[data-p17-font="douceur"] {
  --p17-font-display: "Fraunces", Georgia, serif;
  --p17-font-body:    "Inter", system-ui, sans-serif;
  --p17-display-weight: 300;
  --p17-display-tracking: -.02em;
}

/* 2. ÉDITORIAL — didone fine et haute, très « magazine ».
      Élégant, un peu distant. */
:root[data-p17-font="editorial"] {
  --p17-font-display: "Cormorant Garamond", Garamond, serif;
  --p17-font-body:    "Jost", system-ui, sans-serif;
  --p17-display-weight: 300;
  --p17-display-tracking: -.01em;
}

/* 3. MODERNE — géométrique partout, sans empattement.
      Net, contemporain, un peu clinique. */
:root[data-p17-font="moderne"] {
  --p17-font-display: "Outfit", system-ui, sans-serif;
  --p17-font-body:    "Outfit", system-ui, sans-serif;
  --p17-display-weight: 300;
  --p17-display-tracking: -.03em;
}

/* 4. CONFIANCE — serif de labeur, solide et posée, sur une sans neutre.
      Institutionnel, sérieux, médical. */
:root[data-p17-font="confiance"] {
  --p17-font-display: "Lora", Georgia, serif;
  --p17-font-body:    "Source Sans 3", system-ui, sans-serif;
  --p17-display-weight: 400;
  --p17-display-tracking: -.005em;
}

/* ---------- Application ---------- */
body,
p, li, span, div, a, input, textarea, select, button,
.p17-lead, .p17-card__d, .p17-spec__d, .p17-post__d {
  font-family: var(--p17-font-body) !important;
}

h1, h2, h3, h4, h5, h6,
.p17-h2, .p17-hero h1,
.p17-card__t, .p17-spec__t, .p17-post__t, .p17-formtitle,
.ohio-widget-heading__title, .headline {
  font-family: var(--p17-font-display) !important;
  letter-spacing: var(--p17-display-tracking) !important;
}

.p17-hero h1, .p17-h2 {
  font-weight: var(--p17-display-weight) !important;
}

/* Les surtitres, étiquettes et boutons restent en sans :
   une serif en petites capitales devient vite illisible. */
.p17-eyebrow, .p17-hero__eyebrow, .p17-hero__name,
.p17-tags span, .p17-post__cat, .p17-post__meta,
.btn, .button, .p17-btn, .elementor-button,
footer.site-footer .widget-title,
.p17-switch, .p17-switch * {
  font-family: var(--p17-font-body) !important;
  letter-spacing: .04em !important;
}

/* La Cormorant est très fine : on la remonte d'un cran pour rester lisible */
:root[data-p17-font="editorial"] .p17-hero h1 { font-size: clamp(2.8rem, 5.2vw, 4.8rem) !important; }
:root[data-p17-font="editorial"] .p17-h2      { font-size: clamp(2.1rem, 3.4vw, 3.2rem) !important; }


/* =========================================================
   ⬛ VOLET D'APPARENCE (staging uniquement)
   Une poignée discrète sur le bord droit, un panneau qui glisse.
   ========================================================= */
.p17-tab {
  position: fixed;
  right: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 99998;
  display: flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(12px);
  border: 1px solid var(--p17-line);
  border-right: none;
  border-radius: 10px 0 0 10px;
  padding: 11px 10px;
  cursor: pointer;
  color: var(--p17-text);
  box-shadow: -4px 0 20px rgba(0,0,0,.07);
  transition: transform .35s cubic-bezier(.4,0,.2,1), background .2s;
}
.p17-tab:hover { background: #fff; }
.p17-tab.is-open { transform: translateY(-50%) translateX(300px); }

.p17-tab__txt {
  writing-mode: vertical-rl;
  font: 600 10px/1 var(--p17-font-body, system-ui);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--p17-muted);
}

.p17-panel {
  position: fixed;
  right: 0; top: 0; bottom: 0;
  width: 300px;
  z-index: 99999;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(16px);
  border-left: 1px solid var(--p17-line);
  box-shadow: -12px 0 40px rgba(0,0,0,.10);
  padding: 22px 22px 26px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  font-family: var(--p17-font-body, system-ui);
}
.p17-panel.is-open { transform: translateX(0); }

.p17-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  font: 600 13px/1 var(--p17-font-body, system-ui);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--p17-text);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--p17-line);
  margin-bottom: 22px;
}
.p17-panel__x {
  all: unset; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--p17-muted);
  padding: 0 4px;
}
.p17-panel__x:hover { color: var(--p17-accent); }

.p17-panel__sec { margin-bottom: 26px; }
.p17-panel__sec h4 {
  font: 600 10px/1 var(--p17-font-body, system-ui) !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
  color: var(--p17-muted) !important;
  margin: 0 0 12px !important;
}

/* ---- Palettes ---- */
.p17-pals { display: grid; gap: 8px; }
.p17-pals button {
  all: unset; cursor: pointer;
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  border: 1px solid var(--p17-line) !important;
  border-radius: 11px;
  transition: border-color .2s, background .2s;
}
.p17-pals button:hover { background: rgba(0,0,0,.02); }
.p17-pals button i {
  width: 18px; height: 18px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  flex: none;
}
.p17-pals button em {
  font: 500 13px/1 var(--p17-font-body, system-ui);
  font-style: normal;
  color: var(--p17-text);
}
.p17-pals button[aria-pressed="true"] {
  border-color: var(--p17-accent) !important;
  background: var(--p17-accent-soft);
}

/* ---- Ambiances : chacune montre sa propre typo ---- */
.p17-fonts { display: grid; gap: 8px; }
.p17-fonts button {
  all: unset; cursor: pointer;
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--p17-line) !important;
  border-radius: 11px;
  transition: border-color .2s, background .2s;
}
.p17-fonts button:hover { background: rgba(0,0,0,.02); }
.p17-fonts button[aria-pressed="true"] {
  border-color: var(--p17-accent) !important;
  background: var(--p17-accent-soft);
}
.p17-fonts__prev {
  display: block;
  font-size: 21px; line-height: 1.15;
  color: var(--p17-text);
  margin-bottom: 5px;
}
.p17-fonts__n {
  display: block;
  font: 600 11px/1 var(--p17-font-body, system-ui);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--p17-accent);
  margin-bottom: 3px;
}
.p17-fonts__d {
  display: block;
  font: 400 11.5px/1.4 var(--p17-font-body, system-ui);
  color: var(--p17-muted);
}

.p17-panel__foot {
  font-size: 10.5px !important;
  line-height: 1.5 !important;
  color: var(--p17-muted) !important;
  padding-top: 16px;
  border-top: 1px solid var(--p17-line);
  margin: 0 !important;
}

@media (max-width: 600px) {
  .p17-panel { width: 84vw; }
  .p17-tab.is-open { transform: translateY(-50%) translateX(84vw); }
  .p17-tab__txt { display: none; }
}

/* La barre sociale du thème occupe déjà le milieu du bord droit :
   on descend la poignée pour ne pas la chevaucher. */
.p17-tab { top: auto; bottom: 28px; transform: none; }
.p17-tab.is-open { transform: translateX(300px); }

@media (max-width: 600px) {
  .p17-tab.is-open { transform: translateX(84vw); }
}

/* =========================================================
   ⬛ EN-TÊTE — version moderne
   Transparent en haut de page, condensé et opaque au défilement.
   ========================================================= */

header.header {
  height: auto !important;
  background: transparent !important;
  border-bottom: 1px solid transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: background .3s ease, box-shadow .3s ease,
              border-color .3s ease, padding .3s ease !important;
}

header.header .header-wrap-inner {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  transition: padding .3s ease;
}

/* État « défilé » : le header se resserre et devient lisible */
header.header.p17-scrolled {
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: saturate(160%) blur(16px) !important;
  -webkit-backdrop-filter: saturate(160%) blur(16px) !important;
  border-bottom-color: var(--p17-line) !important;
  box-shadow: 0 1px 24px rgba(51,46,42,.06) !important;
}
header.header.p17-scrolled .header-wrap-inner {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
header.header.p17-scrolled .branding img { height: 48px !important; }

/* ---------- Logo ---------- */
header .branding img {
  height: 62px !important;
  width: auto !important;
  max-width: none !important;
  transition: height .3s ease;
}

/* ---------- Le hamburger desktop est redondant : le menu est déjà là ---------- */
header .desktop-hamburger { display: none !important; }

/* ---------- Menu ---------- */
/* Les compteurs « 01 02 03 » au-dessus des entrées : bruit visuel */
header .nav.with-counters .menu-item > a::before,
header .nav .nav-item > a::before { display: none !important; content: none !important; }

header nav .menu > li > a,
header .nav .menu-item > a {
  font-family: var(--p17-font-body, system-ui) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  color: var(--p17-text) !important;
  padding: 8px 2px !important;
  position: relative;
}

/* Soulignement animé, qui pousse depuis la gauche */
header .nav .menu-item > a::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px; bottom: 0;
  height: 1.5px;
  background: var(--p17-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
header .nav .menu-item > a:hover::after,
header .nav .menu-item.current-menu-item > a::after,
header .nav .menu-item.current_page_item > a::after { transform: scaleX(1); }

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

/* Espacement respirant entre les entrées */
header .nav .menu > li { margin: 0 16px !important; }

/* ---------- Bouton d'action ---------- */
header .menu-optional .button-group .button {
  border-radius: 999px !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  background: var(--p17-accent) !important;
  border: 1px solid var(--p17-accent) !important;
  color: var(--p17-on-accent) !important;
  box-shadow: none !important;
  transition: background .22s ease, transform .22s ease, box-shadow .22s ease !important;
}
header .menu-optional .button-group .button:hover {
  background: var(--p17-accent-h) !important;
  border-color: var(--p17-accent-h) !important;
  color: var(--p17-on-accent) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(51,46,42,.14) !important;
}

/* ---------- Panier : l'icône suffit, le « 0.00 € » est du bruit ---------- */
header .menu-optional .cart-total,
header .menu-optional .woocommerce-Price-amount,
header .menu-optional .amount { display: none !important; }

header .menu-optional .icon-button {
  color: var(--p17-text) !important;
  transition: color .2s ease;
}
header .menu-optional .icon-button:hover { color: var(--p17-accent) !important; }

/* ---------- Le hero passe sous le header transparent ---------- */
.p17-hero { padding-top: 130px !important; }
@media (max-width: 767px) { .p17-hero { padding-top: 100px !important; } }

@media (max-width: 991px) {
  header .branding img { height: 50px !important; }
  header.header .header-wrap-inner { padding-top: 12px !important; padding-bottom: 12px !important; }
}

/* ---------- En-tête : correctifs de sélecteurs ----------
   Le thème utilise .nav-item / .menu-link (et non .menu-item),
   et génère les compteurs « 01 02 03 » via
   .nav.with-counters .nav-item > a > span::before. */

header .nav.with-counters .nav-item > a > span::before,
header .nav.with-counters .nav-item:not(.version) > a > span::before {
  content: none !important;
  display: none !important;
}

header .nav .nav-item > .menu-link {
  font-family: var(--p17-font-body, system-ui) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  color: var(--p17-text) !important;
  position: relative;
  padding: 6px 0 !important;
}

/* Soulignement animé */
header .nav .nav-item > .menu-link > span { position: relative; display: inline-block; }
header .nav .nav-item > .menu-link > span::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 1.5px;
  background: var(--p17-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
header .nav .nav-item > .menu-link:hover > span::after,
header .nav .nav-item.current-menu-item > .menu-link > span::after,
header .nav .nav-item.current_page_item > .menu-link > span::after { transform: scaleX(1); }

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

header .nav .menu > .nav-item { margin: 0 15px !important; }

/* ---------- Logo : dimensionnement (le thème le laissait à 100 px,
   d'où un en-tête de 106 px). Le SVG est en format portrait :
   on le contraint en hauteur, la largeur suit. ---------- */
header .branding .logo img,
header .branding img.svg-logo,
header a.branding-title img {
  height: 58px !important;
  max-height: 58px !important;
  width: auto !important;
  max-width: none !important;
  transition: height .3s ease, max-height .3s ease !important;
}

header.header.p17-scrolled .branding .logo img,
header.header.p17-scrolled .branding img.svg-logo {
  height: 44px !important;
  max-height: 44px !important;
}

@media (max-width: 991px) {
  header .branding .logo img,
  header .branding img.svg-logo { height: 46px !important; max-height: 46px !important; }
}

/* Pied de page */
footer.site-footer img.p17-f-logo {
  height: 74px !important;
  max-height: 74px !important;
  width: auto !important;
  max-width: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Fond du header condensé : plus opaque, pour rester lisible même
   si le navigateur ne gère pas backdrop-filter. */
header.header.p17-scrolled { background: rgba(255,255,255,.92) !important; }

/* Le conteneur .logo du thème impose une hauteur de 100 px et étire
   l'image : c'est lui qu'il faut contraindre, pas seulement l'img. */
header .branding .logo,
header .branding .logo.with-mobile {
  height: auto !important;
  max-height: none !important;
  line-height: 0 !important;
}

/* Le thème impose un `min-height: 100px` sur le logo — et min-height
   l'emporte sur height comme sur max-height. C'est LUI qui bloquait
   la hauteur de l'en-tête à 106 px. */
header .branding img,
header .branding .logo img,
header .branding img.svg-logo,
header .logo img, header .logo-sticky img, header .logo-mobile img {
  min-height: 0 !important;
  height: 58px !important;
  max-height: 58px !important;
  width: auto !important;
}

header.header.p17-scrolled .branding img,
header.header.p17-scrolled .branding .logo img {
  height: 44px !important;
  max-height: 44px !important;
}

@media (max-width: 991px) {
  header .branding img, header .branding .logo img {
    height: 46px !important; max-height: 46px !important;
  }
}

/* Compromis sur le logo portrait : 66 px pour que le nom reste lisible,
   et un en-tête resserré autour. Une déclinaison horizontale du logo
   permettrait un en-tête bien plus bas et plus élégant. */
header .branding img,
header .branding .logo img,
header .branding img.svg-logo {
  height: 66px !important;
  max-height: 66px !important;
}
header.header.p17-scrolled .branding img,
header.header.p17-scrolled .branding .logo img {
  height: 50px !important;
  max-height: 50px !important;
}

header.header .header-wrap-inner {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
header.header.p17-scrolled .header-wrap-inner {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Le hero repart juste sous l'en-tête */
.p17-hero { padding-top: 120px !important; }
@media (max-width: 767px) { .p17-hero { padding-top: 95px !important; } }

/* =========================================================
   EN-TÊTE — le logo est maintenant HORIZONTAL (1158×374).
   On peut enfin descendre à une barre basse et élégante :
   le nom reste lisible à 46 px de haut.
   ========================================================= */
header .branding img,
header .branding .logo img,
header .branding img.svg-logo,
header .logo img, header .logo-sticky img, header .logo-mobile img {
  min-height: 0 !important;          /* le thème imposait min-height: 100px */
  height: 46px !important;
  max-height: 46px !important;
  width: auto !important;
  max-width: none !important;
}

header.header.p17-scrolled .branding img,
header.header.p17-scrolled .branding .logo img {
  height: 38px !important;
  max-height: 38px !important;
}

@media (max-width: 991px) {
  header .branding img,
  header .branding .logo img { height: 38px !important; max-height: 38px !important; }
}

header.header .header-wrap-inner {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}
header.header.p17-scrolled .header-wrap-inner {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Le hero se recale sous un en-tête plus bas */
.p17-hero { padding-top: 100px !important; }
@media (max-width: 767px) { .p17-hero { padding-top: 80px !important; } }

/* Le panier est désormais coupé côté thème : plus besoin de le masquer en CSS.
   On garde une sécurité au cas où un autre gabarit le réinjecterait. */
header .menu-optional .cart-button-holder,
header .menu-optional .header-cart { display: none !important; }

/* Le logo est une image `inline` : elle traîne derrière elle l'espace
   réservé aux descendantes de la ligne de base, ce qui gonflait la barre
   d'une vingtaine de pixels sans raison. On passe en flex. */
header.header .header-wrap-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

header .branding,
header .branding .branding-title,
header .branding .logo {
  display: flex !important;
  align-items: center !important;
  line-height: 0 !important;
}

header .branding img { display: block !important; }

header .left-part, header .right-part { display: flex !important; align-items: center !important; }
header .menu-optional { display: flex !important; align-items: center !important; margin: 0 !important; }

/* Le thème fixait une hauteur en dur sur le conteneur de l'en-tête :
   la barre restait à 106 px quel que soit son contenu. */
header.header .header-wrap,
header.header .header-wrap-inner {
  height: auto !important;
  min-height: 0 !important;
}

/* Le logo doit garder son ratio d'origine (1158×374) et ne pas être
   servi via une vignette recadrée. */
header .branding img,
header .branding .logo img {
  object-fit: contain !important;
  aspect-ratio: 1158 / 374 !important;
  width: auto !important;
}

/* =========================================================
   ⬛ EN-TÊTE RECONSTRUIT
   [ menu gauche ]   [ LOGO centré ]   [ menu droit + tél + CTA ]
   ========================================================= */
header.header.p17-hdr-ready .header-wrap,
header.header.p17-hdr-ready .header-wrap-inner {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.p17-hdr {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  max-width: 1500px;
  margin: 0 auto;
  padding: 14px 40px;
  transition: padding .3s cubic-bezier(.4,0,.2,1);
}
header.header.p17-scrolled .p17-hdr { padding: 8px 40px; }

/* ---- Logo, au centre, enfin à une taille correcte ---- */
.p17-hdr__brand { display: flex; justify-content: center; }
.p17-hdr__brand .branding,
.p17-hdr__brand .branding-title,
.p17-hdr__brand .logo { display: flex !important; align-items: center; line-height: 0 !important; }

.p17-hdr__brand img {
  min-height: 0 !important;
  height: 68px !important;
  max-height: 68px !important;
  width: auto !important;
  max-width: none !important;
  display: block !important;
  transition: height .3s cubic-bezier(.4,0,.2,1) !important;
}
header.header.p17-scrolled .p17-hdr__brand img {
  height: 52px !important;
  max-height: 52px !important;
}

/* ---- Menus de part et d'autre ---- */
.p17-hdr__nav--left  { justify-self: start; }
.p17-hdr__right { display: flex; align-items: center; justify-content: flex-end; gap: 26px; }

.p17-hdr__menu {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.p17-hdr__menu > li { margin: 0 !important; position: relative; }

.p17-hdr__menu > li > a {
  display: inline-block;
  font-family: var(--p17-font-body, system-ui) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  color: var(--p17-text) !important;
  padding: 6px 0 !important;
  position: relative;
  white-space: nowrap;
}
/* Le thème numérotait les entrées (01, 02…) : on coupe */
.p17-hdr__menu > li > a > span::before { content: none !important; display: none !important; }

.p17-hdr__menu > li > a > span { position: relative; display: inline-block; }
.p17-hdr__menu > li > a > span::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -5px;
  height: 1.5px;
  background: var(--p17-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.p17-hdr__menu > li > a:hover > span::after,
.p17-hdr__menu > li.current-menu-item > a > span::after { transform: scaleX(1); }
.p17-hdr__menu > li > a:hover,
.p17-hdr__menu > li.current-menu-item > a { color: var(--p17-accent) !important; }

/* ---- Téléphone : lisible, hiérarchisé ---- */
.p17-hdr__tel {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 6px 4px;
  border-radius: 12px;
  transition: color .2s ease;
}
.p17-hdr__tel-ic {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--p17-accent-soft);
  color: var(--p17-accent);
  flex: none;
  transition: background .25s ease, transform .25s ease;
}
.p17-hdr__tel:hover .p17-hdr__tel-ic {
  background: var(--p17-accent);
  color: var(--p17-on-accent);
  transform: scale(1.06);
}
.p17-hdr__tel-txt { display: flex; flex-direction: column; line-height: 1.15; }
.p17-hdr__tel-txt small {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--p17-muted); margin-bottom: 3px;
}
.p17-hdr__tel-txt strong {
  font-size: 16px; font-weight: 600; letter-spacing: .01em;
  color: var(--p17-text);
  transition: color .2s ease;
}
.p17-hdr__tel:hover .p17-hdr__tel-txt strong { color: var(--p17-accent); }

/* ---- Le CTA : pilule, ombre douce, jamais de texte invisible ---- */
.p17-hdr__cta {
  display: inline-flex;
  align-items: center;
  background: var(--p17-accent);
  color: var(--p17-on-accent) !important;
  border: 1px solid var(--p17-accent);
  border-radius: 999px;
  padding: 13px 26px;
  font-family: var(--p17-font-body, system-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 6px 20px -6px rgba(51,46,42,.35);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.p17-hdr__cta:hover {
  background: var(--p17-accent-h);
  border-color: var(--p17-accent-h);
  color: var(--p17-on-accent) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -8px rgba(51,46,42,.45);
}

/* ---- Sous-menus (Pour-Qui ?) : on les laisse au thème, on les recale ---- */
.p17-hdr__menu .sub-menu,
.p17-hdr__menu ul {
  background: #fff !important;
  border: 1px solid var(--p17-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 40px rgba(51,46,42,.12) !important;
  padding: 10px !important;
}

/* ---- Responsive : sous 1200 px, on repasse en ligne simple ---- */
@media (max-width: 1200px) {
  .p17-hdr { grid-template-columns: auto 1fr; gap: 18px; padding: 12px 22px; }
  .p17-hdr__nav--left { display: none; }
  .p17-hdr__brand { justify-content: flex-start; }
  .p17-hdr__brand img { height: 50px !important; max-height: 50px !important; }
  .p17-hdr__tel-txt { display: none; }
}
@media (max-width: 900px) {
  .p17-hdr__nav--right { display: none; }
  .p17-hdr__cta { padding: 11px 18px; font-size: 13px; }
}

/* =========================================================
   HERO — resserré sous l'en-tête, moins haut
   ========================================================= */
.p17-hero {
  padding-top: 104px !important;   /* juste sous l'en-tête (84 px) */
  padding-bottom: 56px !important;
}
@media (max-width: 767px) {
  .p17-hero { padding-top: 84px !important; padding-bottom: 40px !important; }
}

/* L'image du hero : moins haute, cadrée sur le geste */
.p17-hero__portrait img {
  aspect-ratio: 5 / 5.4 !important;
  object-position: center 30% !important;
  max-height: 74vh;
}
@media (max-width: 767px) {
  .p17-hero__portrait img { aspect-ratio: 4 / 4 !important; }
}

/* =========================================================
   BLOC « DÉFINITION » — image à gauche, texte à droite.
   Le hero pose déjà son image à droite : deux images alignées
   du même côté créaient un effet de colonne bancale.
   ========================================================= */
.p17-def { grid-template-columns: .85fr 1.15fr; }
.p17-def__img  { order: 1; }
.p17-def__text { order: 2; }

@media (max-width: 1024px) {
  .p17-def { grid-template-columns: 1fr; }
  .p17-def__img  { order: 2; }
  .p17-def__text { order: 1; }
}

/* Et « Le cabinet » repasse image à droite, pour alterner proprement */
.p17-cab { grid-template-columns: 1.15fr .85fr; }
.p17-cab__img  { order: 2; }
.p17-cab__text { order: 1; }
@media (max-width: 1024px) {
  .p17-cab { grid-template-columns: 1fr; }
  .p17-cab__img  { order: 2; }
  .p17-cab__text { order: 1; }
}

/* =========================================================
   SURVOLS — correctif général
   Ohio pilote ses boutons par --clb-color-button et RETIRE la
   variable au survol (`:not(:hover)`) : le fond retombait en blanc
   sous un texte clair. On la redonne, sur tous les boutons.
   ========================================================= */
.button:hover, .btn:hover, .ohio-button:hover,
.elementor-button:hover, .wp-element-button:hover,
button[type="submit"]:hover, input[type="submit"]:hover,
.wpcf7-submit:hover, .single_add_to_cart_button:hover,
.button-group .button:hover, .menu-optional .button:hover,
footer .button:hover, footer .ohio-button:hover {
  --clb-color-button: var(--p17-accent-h);
  --clb-color-button-hover: var(--p17-accent-h);
  --clb-color-primary: var(--p17-accent-h);
  background-color: var(--p17-accent-h) !important;
  border-color: var(--p17-accent-h) !important;
  color: var(--p17-on-accent) !important;
}

/* Les enfants (span, i) héritent : sinon le libellé restait invisible */
.button:hover *, .btn:hover *, .ohio-button:hover *,
.elementor-button:hover *, .wpcf7-submit:hover *,
.button-group .button:hover * {
  color: inherit !important;
}

/* Boutons secondaires : fond clair → texte accent (jamais clair sur clair) */
.p17-btn--ghost:hover, .p17-btn--ghost:hover *,
.p17-btn-ghost .elementor-button:hover,
.p17-btn-ghost .elementor-button:hover * {
  background-color: var(--p17-accent-soft) !important;
  border-color: var(--p17-accent) !important;
  color: var(--p17-accent) !important;
}

/* ---------- Correctifs de l'en-tête reconstruit ---------- */

/* Le logo : sélecteur plus fort que la règle générique précédente */
header.header .p17-hdr__brand img,
header.header .p17-hdr__brand .logo img,
header.header .p17-hdr__brand .branding img {
  min-height: 0 !important;
  height: 68px !important;
  max-height: 68px !important;
  width: auto !important;
  max-width: none !important;
}
header.header.p17-scrolled .p17-hdr__brand img,
header.header.p17-scrolled .p17-hdr__brand .branding img {
  height: 52px !important;
  max-height: 52px !important;
}

/* En déplaçant les entrées, on a perdu le positionnement du sous-menu :
   il s'affichait dans le flux et faisait grimper l'en-tête à 288 px.
   On le repose nous-mêmes. */
.p17-hdr__menu > li { position: relative; }

.p17-hdr__menu > li > ul,
.p17-hdr__menu > li .sub-menu,
.p17-hdr__menu > li .mega-menu-content {
  position: absolute !important;
  top: calc(100% + 14px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-6px) !important;
  min-width: 260px !important;
  margin: 0 !important;
  list-style: none;
  background: #fff !important;
  border: 1px solid var(--p17-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 44px rgba(51,46,42,.13) !important;
  padding: 10px !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 60;
}

.p17-hdr__menu > li:hover > ul,
.p17-hdr__menu > li:hover .sub-menu,
.p17-hdr__menu > li:focus-within > ul {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) !important;
}

/* Zone tampon : le curseur peut descendre du parent vers le sous-menu */
.p17-hdr__menu > li::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 16px;
}

.p17-hdr__menu > li > ul li { margin: 0 !important; list-style: none; }
.p17-hdr__menu > li > ul a {
  display: block !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--p17-text) !important;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.p17-hdr__menu > li > ul a:hover {
  background: var(--p17-accent-soft) !important;
  color: var(--p17-accent) !important;
}
/* Pas de soulignement animé dans le sous-menu */
.p17-hdr__menu > li > ul a > span::after { display: none !important; }

/* L'indicateur de sous-menu */
.p17-hdr__menu > li.menu-item-has-children > a > span::before,
.p17-hdr__menu > li:has(ul) > a::after {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 7px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .5;
}

/* Le téléphone et le CTA s'empilaient : ils doivent s'aligner. */
.p17-hdr__actions {
  display: flex !important;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}
.p17-hdr__actions .p17-hdr__cta { margin: 0 !important; }

/* Un filet vertical discret entre le téléphone et le bouton */
.p17-hdr__actions::before {
  content: "";
  width: 1px;
  height: 26px;
  background: var(--p17-line);
  order: -1;
  margin-right: 4px;
}

@media (max-width: 1200px) { .p17-hdr__actions::before { display: none; } }

/* ---------- Indicateur de sous-menu : un seul chevron ----------
   Le thème injecte sa propre icône SVG, qui se superposait au chevron
   que j'ajoutais : on ne garde que le mien. */
.p17-hdr__menu > li > a i,
.p17-hdr__menu > li > a svg,
.p17-hdr__menu > li > a .icon,
.p17-hdr__menu > li > a .multi-level-indicator {
  display: none !important;
}
.p17-hdr__menu > li.menu-item-has-children > a > span::before { content: none !important; }

.p17-hdr__menu > li:has(ul) > a::after {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 8px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .45;
  transition: transform .25s ease, opacity .2s ease;
}
.p17-hdr__menu > li:has(ul):hover > a::after {
  opacity: 1;
  transform: rotate(225deg) translateY(1px);
}

/* ---------- HERO : moins haut ----------
   L'image occupait près de 75 % de la hauteur d'écran. */
.p17-hero { padding-top: 118px !important; padding-bottom: 48px !important; }

.p17-hero__portrait img {
  aspect-ratio: 5 / 4.6 !important;
  max-height: 60vh !important;
  object-position: center 28% !important;
  border-radius: 160px 160px 24px 24px !important;
}

@media (max-width: 767px) {
  .p17-hero { padding-top: 92px !important; padding-bottom: 36px !important; }
  .p17-hero__portrait img {
    aspect-ratio: 4 / 3.6 !important;
    max-height: 46vh !important;
    border-radius: 120px 120px 20px 20px !important;
  }
}

/* ---------- Dernier bouton avec du texte brun sur fond terracotta ----------
   Tout bouton plein porte désormais le texte clair, au repos comme au survol.
   Les boutons fantômes (fond transparent) gardent leur texte sombre. */
.button:not(.p17-btn--ghost):not(.p17-btn-ghost),
.button:not(.p17-btn--ghost):not(.p17-btn-ghost) *,
.btn-optional, .btn-optional *,
.ohio-button:not(.p17-btn--ghost),
.elementor-button:not(.p17-btn-ghost .elementor-button),
.wpcf7-submit, .wpcf7-submit *,
.p17-btn:not(.p17-btn--ghost),
.p17-btn:not(.p17-btn--ghost) *,
.p17-hdr__cta, .p17-hdr__cta * {
  color: var(--p17-on-accent) !important;
}

/* On réaffirme l'exception : fond clair → texte accent */
.p17-btn--ghost, .p17-btn--ghost *,
.p17-btn-ghost .elementor-button,
.p17-btn-ghost .elementor-button * {
  color: var(--p17-text) !important;
}
.p17-btn--ghost:hover, .p17-btn--ghost:hover *,
.p17-btn-ghost .elementor-button:hover,
.p17-btn-ghost .elementor-button:hover * {
  color: var(--p17-accent) !important;
}

/* =========================================================
   ⬛ AJUSTEMENTS FINAUX
   ========================================================= */

/* ---------- Accent assombri : contraste 3,5 → 4,6 (norme AA) ---------- */
:root {
  --p17-accent:      #B3624C;
  --p17-accent-h:    #9C5340;
  --p17-accent-soft: rgba(179,98,76,.10);
}
:root[data-p17-theme="blue"] {
  --p17-accent:      #2C6A80;
  --p17-accent-h:    #22566A;
  --p17-accent-soft: rgba(44,106,128,.10);
}

/* ---------- H1 : « Ostéopathe » / « à Paris 17 » ---------- */
.p17-hero h1 { text-wrap: balance; }
.p17-hero h1 br { display: block; content: ""; }
.p17-hero h1 em { display: inline-block; }

/* =========================================================
   BLOC « POUR QUI ? » — enrichi
   Pas de photo de nourrisson, d'enfant ni de femme enceinte dans les
   séries fournies : mélanger cartes-photo et cartes-icône aurait été
   bancal. On enrichit donc la structure plutôt que d'inventer des images.
   ========================================================= */
.p17-grid--3 { counter-reset: p17cible; gap: 20px; }

.p17-card {
  position: relative;
  padding: 34px 30px 30px;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
}

/* Numéro discret, en très grand, dans l'angle */
.p17-card::before {
  counter-increment: p17cible;
  content: "0" counter(p17cible);
  position: absolute;
  top: 16px; right: 22px;
  font-family: var(--p17-font-body, system-ui);
  font-size: 42px;
  font-weight: 600;
  line-height: 1;
  color: var(--p17-text);
  opacity: .05;
  letter-spacing: -.03em;
  transition: opacity .35s ease, color .35s ease;
  z-index: 0;
}
.p17-card:hover::before { opacity: .12; color: var(--p17-accent); }

/* Un liseré d'accent qui se déploie en haut de la carte */
.p17-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--p17-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
  z-index: 1;
}
.p17-card:hover::after { transform: scaleX(1); }

/* L'icône : sa pastille se remplit au survol */
.p17-card__ic {
  position: relative;
  z-index: 1;
  width: 58px; height: 58px;
  border-radius: 18px;
  background: var(--p17-accent-soft) !important;
  transition: background .3s ease, transform .3s ease;
}
.p17-card:hover .p17-card__ic {
  background: var(--p17-accent) !important;
  transform: translateY(-2px) rotate(-4deg);
}
.p17-card:hover .p17-card__ic .p17-ic { color: var(--p17-on-accent) !important; }

.p17-card__t {
  position: relative; z-index: 1;
  font-size: 1.28rem;
  margin-bottom: 11px;
}
.p17-card__d {
  position: relative; z-index: 1;
  min-height: 3.3em;              /* les cartes s'alignent malgré des textes inégaux */
}

/* « En savoir plus » : la flèche glisse */
.p17-card__more {
  position: relative; z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.p17-card__more::after {
  content: "→";
  display: inline-block;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.p17-card:hover .p17-card__more::after { transform: translateX(5px); }
/* La flèche du texte d'origine est masquée : on garde celle du pseudo-élément */
.p17-card__more { font-size: 0 !important; }
.p17-card__more::before {
  content: "En savoir plus";
  font-size: .87rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.p17-card__more::after { font-size: .95rem; }

.p17-card:hover {
  transform: translateY(-6px);
  border-color: var(--p17-accent) !important;
  box-shadow: 0 8px 20px rgba(51,46,42,.07), 0 28px 56px rgba(51,46,42,.12);
}

/* =========================================================
   ⬛ CARTES « POUR QUI ? » — révélation photo au survol
   Au repos : carte blanche, icône et texte sombres.
   Au survol : la photo apparaît sous un voile chaud, et TOUT
   le texte bascule en clair d'un bloc. Plus aucun élément ne
   peut se retrouver de la même couleur que son fond.
   ========================================================= */

.p17-card {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  background: #FFFFFF !important;
  border: 1px solid var(--p17-line) !important;
  border-radius: 22px !important;
  padding: 32px 28px 28px !important;
  min-height: 268px;
  text-decoration: none;
  box-shadow: var(--p17-shadow);
  transition: transform .4s cubic-bezier(.4,0,.2,1), box-shadow .4s ease, border-color .3s ease;
}

/* La photo, en fond, invisible au repos */
.p17-card__ph {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .5s ease, transform .8s cubic-bezier(.2,0,.2,1);
}
.p17-card__ph img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
  display: block;
}

/* Le voile : dégradé chaud, sombre en bas, pour que le texte tienne */
.p17-card__ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(35,28,24,.30) 0%, rgba(35,28,24,.72) 55%, rgba(28,22,19,.92) 100%),
    linear-gradient(120deg, rgba(179,98,76,.22), rgba(0,0,0,0) 60%);
}

.p17-card:hover .p17-card__ph { opacity: 1; transform: scale(1); }

/* ---- Harmonisation colorimétrique ----
   Les photos de l'ancien site sont froides, très éclairées, fond blanc.
   Celles du nouveau shooting sont chaudes, contrastées, en clair-obscur.
   Ce grade rapproche les premières des secondes : on désature, on réchauffe,
   on assombrit les hautes lumières et on remonte le contraste. */
.p17-card--old .p17-card__ph img {
  filter: saturate(.62) contrast(1.16) brightness(.80) sepia(.22) hue-rotate(-6deg);
}
/* Les photos du nouveau shooting n'ont besoin que d'un léger accord */
.p17-card:not(.p17-card--old) .p17-card__ph img {
  filter: saturate(.92) contrast(1.05);
}

/* ---- Le texte bascule en clair, d'un seul bloc ---- */
.p17-card__ic,
.p17-card__t,
.p17-card__d,
.p17-card__more { position: relative; z-index: 1; }

.p17-card__ic {
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: 16px;
  background: var(--p17-accent-soft) !important;
  margin-bottom: 20px;
  transition: background .35s ease, transform .35s ease;
}
.p17-card__ic .p17-ic { color: var(--p17-accent) !important; transition: color .35s ease; }

.p17-card:hover .p17-card__ic {
  background: rgba(255,255,255,.16) !important;
  backdrop-filter: blur(4px);
  transform: translateY(-2px);
}
.p17-card:hover .p17-card__ic .p17-ic { color: #FFF !important; }

.p17-card__t { font-size: 1.26rem; color: var(--p17-text); margin: 0 0 10px; transition: color .35s ease; }
.p17-card__d { font-size: .93rem; line-height: 1.6; color: var(--p17-text-soft); margin: 0 0 18px; min-height: 3.1em; transition: color .35s ease; }

.p17-card:hover .p17-card__t { color: #FFFFFF !important; }
.p17-card:hover .p17-card__d { color: rgba(255,255,255,.86) !important; }

/* « En savoir plus » + flèche */
.p17-card__more {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .87rem; font-weight: 600;
  color: var(--p17-accent);
  transition: color .35s ease;
}
.p17-card__more::after {
  content: "→";
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.p17-card:hover .p17-card__more { color: #FFFFFF !important; }
.p17-card:hover .p17-card__more::after { transform: translateX(6px); }

/* Numéro d'angle : il passe en blanc translucide sur la photo */
.p17-card::before {
  counter-increment: p17cible;
  content: "0" counter(p17cible);
  position: absolute;
  top: 16px; right: 22px;
  z-index: 1;
  font-family: var(--p17-font-body, system-ui);
  font-size: 42px; font-weight: 600; line-height: 1;
  letter-spacing: -.03em;
  color: var(--p17-text);
  opacity: .06;
  transition: opacity .35s ease, color .35s ease;
}
.p17-card:hover::before { color: #FFFFFF; opacity: .28; }

/* Le liseré d'accent en haut */
.p17-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 2;
  background: var(--p17-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.p17-card:hover::after { transform: scaleX(1); }

.p17-card:hover {
  transform: translateY(-6px);
  border-color: transparent !important;
  box-shadow: 0 10px 24px rgba(51,46,42,.10), 0 32px 64px rgba(51,46,42,.20);
}

/* Accessibilité : même rendu au focus clavier qu'au survol */
.p17-card:focus-visible { outline: 2px solid var(--p17-accent); outline-offset: 3px; }

/* =========================================================
   ⬛ MES SPÉCIALITÉS — d'après la maquette
   Numéro cerclé à gauche, pictogramme fin en haut à droite,
   titre en serif, étiquettes en pastilles. 3 cartes puis 2 centrées.
   ========================================================= */
.p17-s-specs { position: relative; overflow: hidden; }

/* Deux formes végétales très discrètes, en fond */
.p17-s-specs::before,
.p17-s-specs::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.p17-s-specs::before {
  top: -90px; left: -110px;
  width: 340px; height: 340px;
  background: radial-gradient(circle at 60% 60%, var(--p17-bg-3) 0%, transparent 68%);
  opacity: .8;
}
.p17-s-specs::after {
  bottom: -120px; right: -100px;
  width: 380px; height: 380px;
  background: radial-gradient(circle at 40% 40%, var(--p17-accent-soft) 0%, transparent 66%);
}
.p17-s-specs > .elementor-container { position: relative; z-index: 1; }

/* Un filet d'accent sous le titre de section */
.p17-head--rule .p17-h2 { margin-bottom: 22px; }
.p17-head--rule .p17-h2::after {
  content: "";
  display: block;
  width: 54px; height: 2px;
  margin: 20px auto 0;
  background: var(--p17-accent);
  border-radius: 2px;
}

/* ---------- Grille : 3 puis 2 centrées ---------- */
.p17-specs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
.p17-spec {
  flex: 0 1 calc(33.333% - 16px);
  min-width: 280px;
}

/* ---------- La carte ---------- */
.p17-spec {
  position: relative;
  background: #FFFFFF !important;
  border: 1px solid var(--p17-line) !important;
  border-radius: 20px !important;
  padding: 28px 30px 30px !important;
  box-shadow: 0 1px 3px rgba(51,46,42,.03), 0 14px 36px rgba(51,46,42,.07);
  transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease;
}
.p17-spec:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(51,46,42,.06), 0 26px 56px rgba(51,46,42,.13);
}

/* Ligne du haut : numéro cerclé ↔ pictogramme */
.p17-spec__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 22px;
}

.p17-spec__n {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--p17-accent);
  border-radius: 50%;
  font-family: var(--p17-font-body, system-ui);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--p17-accent);
  opacity: 0;                       /* remis à 1 ci-dessous : voir note */
  animation: none;
  opacity: 1;
  transition: background .3s ease, color .3s ease;
}
.p17-spec:hover .p17-spec__n {
  background: var(--p17-accent);
  color: var(--p17-on-accent);
}

/* Le pictogramme : trait fin, discret, il se réveille au survol */
.p17-spec__ic { display: block; line-height: 0; }
.p17-spec__ic .p17-ic {
  color: var(--p17-accent) !important;
  opacity: .42;
  transition: opacity .35s ease, transform .5s cubic-bezier(.4,0,.2,1);
}
.p17-spec:hover .p17-spec__ic .p17-ic {
  opacity: .95;
  transform: translateY(-2px) scale(1.04);
}

.p17-spec__t {
  font-family: var(--p17-font-display, serif) !important;
  font-size: 1.32rem !important;
  font-weight: 500 !important;
  color: var(--p17-text) !important;
  margin: 0 0 14px !important;
  letter-spacing: -.01em;
}

.p17-spec__d {
  font-size: .93rem !important;
  line-height: 1.7 !important;
  color: var(--p17-text-soft) !important;
  margin: 0 0 20px !important;
}

/* ---------- Étiquettes ---------- */
.p17-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.p17-tags span {
  font-family: var(--p17-font-body, system-ui);
  font-size: .78rem;
  font-weight: 500;
  color: var(--p17-text-soft);
  background: var(--p17-bg-2);
  border: 1px solid var(--p17-line);
  padding: 6px 13px;
  border-radius: 999px;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.p17-spec:hover .p17-tags span {
  background: var(--p17-accent-soft);
  border-color: rgba(179,98,76,.28);
  color: var(--p17-accent);
}

@media (max-width: 1024px) {
  .p17-spec { flex: 0 1 calc(50% - 12px); }
}
@media (max-width: 700px) {
  .p17-spec { flex: 1 1 100%; }
  .p17-s-specs::before, .p17-s-specs::after { display: none; }
}

/* =========================================================
   ⬛ PLEINE LARGEUR
   Le thème enferme le contenu dans un conteneur de 1344 px :
   les sections à fond coloré s'arrêtaient avant les bords,
   d'où l'effet « bloc dans un bloc ». On les fait déborder.
   ========================================================= */
.p17-s-specs,
.p17-s-pourqui,
.p17-s-temoignages,
.p17-s-gal,
.p17-s-rdv {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
}

/* Le contenu, lui, reste lisible : on l'élargit sans le laisser filer */
.p17-s-specs > .elementor-container,
.p17-s-pourqui > .elementor-container,
.p17-s-temoignages > .elementor-container,
.p17-s-gal > .elementor-container,
.p17-s-rdv > .elementor-container {
  max-width: 1420px !important;
  width: 100% !important;
  margin: 0 auto !important;
}

@media (max-width: 767px) {
  .p17-s-specs, .p17-s-pourqui, .p17-s-temoignages, .p17-s-gal, .p17-s-rdv {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Les icônes Healthicons sont des contours en aplat (viewBox 48) :
   pas de `stroke`, mais elles héritent bien de la couleur. */
.p17-ic[viewBox="0 0 48 48"] { fill: currentColor; }

/* =========================================================
   ⬛ TÉMOIGNAGES — d'après la maquette
   ========================================================= */
.p17-s-temoignages { position: relative; overflow: hidden; }
.p17-s-temoignages::before {
  content: "";
  position: absolute;
  top: -60px; left: -120px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle at 60% 55%, var(--p17-accent-soft) 0%, transparent 68%);
  pointer-events: none;
}
.p17-s-temoignages > .elementor-container { position: relative; z-index: 1; }

/* ---- Bandeau de réassurance : icône cerclée à gauche, texte à droite ---- */
.p17-reassure {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 56px;
}

.p17-reassure__item {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #FFFFFF;
  border: 1px solid var(--p17-line);
  border-radius: 20px;
  padding: 26px 28px;
  box-shadow: 0 1px 3px rgba(51,46,42,.03), 0 14px 34px rgba(51,46,42,.06);
  transition: transform .3s ease, box-shadow .3s ease;
}
.p17-reassure__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(51,46,42,.06), 0 24px 50px rgba(51,46,42,.11);
}

.p17-reassure__ic {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  flex: none;
  border: 1px solid rgba(179,98,76,.30);
  border-radius: 50%;
  background: var(--p17-accent-soft);
  transition: background .3s ease, border-color .3s ease;
}
.p17-reassure__ic .p17-ic { color: var(--p17-accent) !important; }
.p17-reassure__item:hover .p17-reassure__ic {
  background: var(--p17-accent);
  border-color: var(--p17-accent);
}
.p17-reassure__item:hover .p17-reassure__ic .p17-ic { color: var(--p17-on-accent) !important; }

.p17-reassure__txt { display: flex; flex-direction: column; }
.p17-reassure__txt strong {
  font-family: var(--p17-font-display, serif);
  font-size: 1.22rem;
  font-weight: 500;
  color: var(--p17-text);
  margin-bottom: 5px;
  letter-spacing: -.01em;
}
.p17-reassure__txt span {
  font-size: .9rem;
  line-height: 1.5;
  color: var(--p17-text-soft);
}

/* ---- Les avis Google (widget Trustindex) : on les raccorde à la charte ---- */
.p17-reviews .ti-widget.ti-goog .ti-review-item > .ti-inner,
.p17-reviews .ti-review-item .ti-inner {
  background: #FFFFFF !important;
  border: 1px solid var(--p17-line) !important;
  border-radius: 20px !important;
  padding: 26px 24px !important;
  box-shadow: 0 1px 3px rgba(51,46,42,.03), 0 14px 34px rgba(51,46,42,.07) !important;
  transition: transform .3s ease, box-shadow .3s ease;
}
.p17-reviews .ti-review-item:hover .ti-inner {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(51,46,42,.06), 0 24px 50px rgba(51,46,42,.12) !important;
}

.p17-reviews .ti-name,
.p17-reviews .ti-profile-name {
  font-family: var(--p17-font-display, serif) !important;
  font-size: 1.02rem !important;
  font-weight: 500 !important;
  color: var(--p17-text) !important;
}
.p17-reviews .ti-date {
  color: var(--p17-muted) !important;
  font-size: .8rem !important;
}
.p17-reviews .ti-review-text {
  color: var(--p17-text-soft) !important;
  font-size: .93rem !important;
  line-height: 1.7 !important;
}
.p17-reviews .ti-read-more a,
.p17-reviews .ti-read-more {
  color: var(--p17-accent) !important;
  font-weight: 600 !important;
  font-size: .86rem !important;
}
.p17-reviews .ti-profile-img img,
.p17-reviews .ti-profile-img {
  border-radius: 50% !important;
}
/* Les flèches de navigation du carrousel */
.p17-reviews .ti-next, .p17-reviews .ti-prev {
  background: #FFFFFF !important;
  border: 1px solid var(--p17-line) !important;
  border-radius: 50% !important;
  box-shadow: 0 6px 18px rgba(51,46,42,.10) !important;
  color: var(--p17-text) !important;
}
.p17-reviews .ti-next:hover, .p17-reviews .ti-prev:hover {
  border-color: var(--p17-accent) !important;
  color: var(--p17-accent) !important;
}

/* ---- La ligne de synthèse sous les avis ---- */
.p17-reviews-sum {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 38px;
  color: var(--p17-text-soft);
  font-size: .93rem;
}
.p17-reviews-sum::before,
.p17-reviews-sum::after {
  content: "";
  flex: 0 1 90px;
  height: 1px;
  background: var(--p17-line);
}
.p17-reviews-sum strong { color: var(--p17-text); font-weight: 600; }

@media (max-width: 900px) {
  .p17-reassure { grid-template-columns: 1fr; }
}

/* Neutralise l'ancienne règle du bandeau de réassurance (première version,
   où chaque `span` était lui-même une carte) : elle réenfermait le texte
   dans une boîte à l'intérieur de la carte. */
.p17-reassure > span,
.p17-reassure__txt span,
.p17-reassure__txt strong {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: block !important;
}
.p17-reassure__txt strong {
  font-family: var(--p17-font-display, serif) !important;
  font-size: 1.2rem !important;
  font-weight: 500 !important;
  color: var(--p17-text) !important;
  margin: 0 0 5px !important;
}
.p17-reassure__txt span {
  font-size: .9rem !important;
  line-height: 1.5 !important;
  color: var(--p17-text-soft) !important;
  margin: 0 !important;
}

/* L'icône de réassurance doit être ronde (une règle générique la carrait) */
.p17-reassure .p17-reassure__ic {
  border-radius: 50% !important;
  width: 64px !important;
  height: 64px !important;
}

/* =========================================================
   CORRECTIF — décalage vers la gauche
   Elementor étire déjà certaines sections (`elementor-section-stretched`)
   en leur posant un `left` en ligne. Mon débordement CSS ajoutait sa
   propre marge par-dessus : les deux se cumulaient, d'où ~400 px de
   décalage. On neutralise le `left` d'Elementor, la marge suffit.
   ========================================================= */
.p17-s-pourqui.elementor-section-stretched,
.p17-s-gal.elementor-section-stretched,
.p17-s-rdv.elementor-section-stretched,
.p17-s-specs.elementor-section-stretched,
.p17-s-temoignages.elementor-section-stretched,
.p17-hero.elementor-section-stretched {
  left: 0 !important;
  right: auto !important;
}

/* =========================================================
   CORRECTIF — icône décentrée dans son rond
   Le SVG est en `inline` : il traîne l'espace de la ligne de base.
   ========================================================= */
.p17-reassure__ic,
.p17-card__ic,
.p17-spec__n {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  padding: 0 !important;
}
.p17-reassure__ic svg,
.p17-card__ic svg {
  display: block !important;
  margin: 0 !important;
}

/* Les étoiles de la ligne de synthèse */
.p17-reviews-sum__stars {
  color: #FBBC05;
  letter-spacing: 1px;
  font-size: .95rem;
}

/* Le `left` d'Elementor résistait : on cible avec une spécificité plus forte
   (élément + classe). La marge négative suffit à faire déborder la section. */
section.p17-hero,
section.p17-s-pourqui,
section.p17-s-specs,
section.p17-s-gal,
section.p17-s-temoignages,
section.p17-s-rdv,
div.p17-hero,
div.p17-s-pourqui,
div.p17-s-specs,
div.p17-s-gal,
div.p17-s-temoignages,
div.p17-s-rdv {
  left: 0 !important;
  right: auto !important;
  position: relative !important;
}

/* =========================================================
   ⬛ ÉLÉMENTS DÉCORATIFS
   Les visuels fournis (branche au trait, forme organique avec feuillage).
   Ils remplacent les taches dégradées que j'avais improvisées.
   Le motif occupe le quart supérieur gauche de l'image : on cale donc
   le calque en haut à gauche et on le laisse déborder hors de la section.
   ========================================================= */

/* ---- Spécialités : la forme organique beige ---- */
.p17-s-specs::before {
  content: "";
  position: absolute;
  top: -70px;
  left: -90px;
  width: 620px;
  height: 465px;                     /* ratio 1448 × 1086 */
  background: url("https://www.paris17-osteo.fr/wp-content/uploads/2026/07/deco-forme.png")
              no-repeat top left / contain;
  opacity: .9;
  pointer-events: none;
  z-index: 0;
}

/* Un rappel très discret en bas à droite, pour équilibrer */
.p17-s-specs::after {
  content: "";
  position: absolute;
  bottom: -140px;
  right: -140px;
  width: 520px;
  height: 390px;
  background: url("https://www.paris17-osteo.fr/wp-content/uploads/2026/07/deco-branche.png")
              no-repeat top left / contain;
  transform: rotate(180deg);
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}

/* ---- Témoignages : la branche au trait ---- */
.p17-s-temoignages::before {
  content: "";
  position: absolute;
  top: -40px;
  left: -60px;
  width: 600px;
  height: 450px;
  background: url("https://www.paris17-osteo.fr/wp-content/uploads/2026/07/deco-branche.png")
              no-repeat top left / contain;
  opacity: .85;
  border-radius: 0;                  /* l'ancienne tache était un rond */
  pointer-events: none;
  z-index: 0;
}

/* La forme organique, en miroir à droite, en écho de la maquette */
.p17-s-temoignages::after {
  content: "";
  position: absolute;
  top: -60px;
  right: -120px;
  width: 480px;
  height: 360px;
  background: url("https://www.paris17-osteo.fr/wp-content/uploads/2026/07/deco-forme.png")
              no-repeat top left / contain;
  transform: scaleX(-1);
  opacity: .45;
  pointer-events: none;
  z-index: 0;
}

/* Le contenu passe toujours devant le décor */
.p17-s-specs > .elementor-container,
.p17-s-temoignages > .elementor-container { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .p17-s-specs::before, .p17-s-specs::after,
  .p17-s-temoignages::before, .p17-s-temoignages::after {
    width: 320px; height: 240px; opacity: .5;
  }
  .p17-s-specs::after, .p17-s-temoignages::after { display: none; }
}

/* Les décors débordaient trop hors du cadre : le motif (qui n'occupe que
   le quart supérieur gauche du PNG) se retrouvait presque entièrement
   coupé. On les ramène vers l'intérieur et on les agrandit. */
.p17-s-specs::before {
  top: -20px !important;
  left: 10px !important;
  width: 760px !important;
  height: 570px !important;
  opacity: 1 !important;
}

.p17-s-specs::after {
  bottom: -60px !important;
  right: -40px !important;
  width: 620px !important;
  height: 465px !important;
  opacity: .55 !important;
}

.p17-s-temoignages::before {
  top: 0 !important;
  left: 20px !important;
  width: 720px !important;
  height: 540px !important;
  opacity: .95 !important;
}

.p17-s-temoignages::after {
  top: -20px !important;
  right: -30px !important;
  width: 580px !important;
  height: 435px !important;
  opacity: .5 !important;
}

@media (max-width: 1400px) {
  .p17-s-specs::before,
  .p17-s-temoignages::before { width: 540px !important; height: 405px !important; left: 0 !important; }
  .p17-s-specs::after,
  .p17-s-temoignages::after  { width: 440px !important; height: 330px !important; }
}

@media (max-width: 900px) {
  .p17-s-specs::before,
  .p17-s-temoignages::before { width: 320px !important; height: 240px !important; opacity: .55 !important; }
  .p17-s-specs::after,
  .p17-s-temoignages::after  { display: none !important; }
}

/* =========================================================
   ⬛ CARTES ARTICLES — survol
   Les visuels de ces articles sont des banques d'images froides et
   très claires (draps blancs, nuages, spa vert d'eau) : la pastille
   terracotta s'y noyait, et le zoom au survol aggravait le tout.
   On les raccorde à la charte et on pose un voile qui redonne du relief.
   ========================================================= */

.p17-post__img {
  position: relative;
  overflow: hidden;
  display: block;
}

/* Même étalonnage chaud que les photos de l'ancien site */
.p17-post__img img {
  filter: saturate(.72) contrast(1.08) brightness(.94) sepia(.16) hue-rotate(-5deg);
  transition: transform .7s cubic-bezier(.2,0,.2,1), filter .4s ease;
}

/* Voile dégradé permanent : la pastille et le bas de l'image tiennent
   quelle que soit la photo. Il s'intensifie au survol. */
.p17-post__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(35,28,24,.04) 0%,
              rgba(35,28,24,.20) 55%,
              rgba(35,28,24,.55) 100%);
  transition: background .4s ease;
  pointer-events: none;
}

.p17-post:hover .p17-post__img img {
  transform: scale(1.05);
  filter: saturate(.85) contrast(1.10) brightness(.88) sepia(.12);
}
.p17-post:hover .p17-post__img::after {
  background: linear-gradient(180deg,
              rgba(35,28,24,.10) 0%,
              rgba(35,28,24,.38) 50%,
              rgba(35,28,24,.75) 100%);
}

/* La pastille de catégorie : au-dessus du voile, et lisible partout */
.p17-post__cat {
  z-index: 2;
  background: var(--p17-accent) !important;
  color: var(--p17-on-accent) !important;
  box-shadow: 0 4px 14px rgba(35,28,24,.30);
}

/* La carte au survol : on garde le fond blanc et le texte sombre —
   c'est l'image qui vit, pas le texte. Aucune couleur sur couleur. */
.p17-post:hover {
  transform: translateY(-6px);
  border-color: rgba(179,98,76,.35) !important;
  box-shadow: 0 8px 20px rgba(51,46,42,.07), 0 28px 56px rgba(51,46,42,.14);
}
.p17-post:hover .p17-post__t   { color: var(--p17-accent) !important; }
.p17-post:hover .p17-post__d   { color: var(--p17-text-soft) !important; }
.p17-post:hover .p17-post__meta{ color: var(--p17-muted) !important; }

/* La flèche du « Lire l'article » glisse */
.p17-post__more { display: inline-flex; align-items: center; gap: 7px; }
.p17-post__more::after {
  content: "→";
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.p17-post:hover .p17-post__more::after { transform: translateX(5px); }

/* =========================================================
   CARTES ARTICLES — correctif du survol
   Le voile posé en ::after sur le conteneur de l'image pouvait, si ce
   conteneur perdait son positionnement, s'ancrer sur la carte entière :
   la carte devenait brune, texte compris. On le supprime.
   La lisibilité est assurée autrement : l'image est étalonnée (donc plus
   sombre et plus chaude) et la pastille porte sa propre ombre.
   ========================================================= */
.p17-post__img::after,
.p17-post__img::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* La carte reste blanche et lisible, en toutes circonstances */
.p17-post,
.p17-post:hover,
.p17-post .p17-post__body,
.p17-post:hover .p17-post__body {
  background-color: #FFFFFF !important;
  background-image: none !important;
}

/* Les photos, harmonisées avec la charte (elles étaient froides et pâles) */
.p17-post__img img {
  filter: saturate(.75) contrast(1.10) brightness(.90) sepia(.14) hue-rotate(-5deg) !important;
  transition: transform .7s cubic-bezier(.2,0,.2,1), filter .4s ease !important;
}
.p17-post:hover .p17-post__img img {
  transform: scale(1.05) !important;
  filter: saturate(.88) contrast(1.12) brightness(.84) sepia(.10) !important;
}

/* La pastille de catégorie : lisible sur n'importe quelle photo */
.p17-post__cat {
  z-index: 2;
  background: var(--p17-accent) !important;
  color: var(--p17-on-accent) !important;
  box-shadow: 0 3px 14px rgba(35,28,24,.45) !important;
}

/* Le texte ne change que là où c'est utile */
.p17-post:hover .p17-post__t    { color: var(--p17-accent) !important; }
.p17-post:hover .p17-post__d    { color: var(--p17-text-soft) !important; }
.p17-post:hover .p17-post__meta { color: var(--p17-muted) !important; }
.p17-post:hover .p17-post__more { color: var(--p17-accent) !important; }

/* =========================================================
   ⬛ EN-TÊTE — rééquilibrage
   La colonne de droite porte le menu + le téléphone + le CTA : elle
   pesait bien plus lourd que la gauche, d'où le grand vide à gauche.
   On redistribue (4 entrées à gauche, 1 à droite) et on resserre.
   ========================================================= */
.p17-hdr {
  grid-template-columns: 1fr auto 1fr;
  gap: 32px;
  padding-left: 48px;
  padding-right: 48px;
}

/* Les deux menus se rapprochent du logo plutôt que de coller aux bords */
.p17-hdr__nav--left  { justify-self: end;   margin-right: 8px; }
.p17-hdr__nav--right { margin-right: auto; }

.p17-hdr__right {
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* le menu suit le logo… */
  gap: 24px;
}
.p17-hdr__actions { margin-left: auto; }   /* …et les actions filent à droite */

.p17-hdr__menu { gap: 24px; }

@media (max-width: 1500px) {
  .p17-hdr { padding-left: 28px; padding-right: 28px; gap: 22px; }
  .p17-hdr__menu { gap: 18px; }
}

/* =========================================================
   ⬛ PIED DE PAGE — quatre colonnes, dont Instagram
   ========================================================= */
footer.site-footer .p17-f-tel {
  display: inline-block;
  font-size: 1.24rem !important;
  font-weight: 600;
  color: var(--p17-text) !important;
  margin: 16px 0 14px;
}
footer.site-footer .p17-f-tel:hover { color: var(--p17-accent) !important; }

/* ---- Le flux Instagram ---- */
.p17-f-ig { margin-bottom: 14px; }

.p17-f-ig #sb_instagram,
.p17-f-ig .sbi_photo_wrap,
.p17-f-ig #sbi_images {
  padding: 0 !important;
  width: 100% !important;
}

.p17-f-ig #sbi_images { gap: 6px; }

.p17-f-ig .sbi_item {
  padding: 3px !important;
  border-radius: 0;
}

.p17-f-ig .sbi_photo {
  border-radius: 10px !important;
  overflow: hidden;
  filter: saturate(.85) contrast(1.04);
  transition: transform .35s cubic-bezier(.4,0,.2,1), filter .35s ease;
}
.p17-f-ig .sbi_photo:hover {
  transform: scale(1.05);
  filter: saturate(1) contrast(1.06);
}

/* On masque l'en-tête, le bouton et les erreurs du plugin :
   le footer doit rester sobre. */
.p17-f-ig #sbi_header,
.p17-f-ig #sbi_load,
.p17-f-ig .sbi_header_text,
.p17-f-ig .sb_instagram_error,
.p17-f-ig .sbi_missing { display: none !important; }

@media (max-width: 991px) {
  .p17-f-ig #sbi_images { max-width: 320px; }
}

/* =========================================================
   EN-TÊTE — disposition définitive
   La grille « 1fr auto 1fr » centrait le logo, mais la colonne de droite
   (menu + téléphone + CTA) remplissait tout son espace alors que celle de
   gauche non : tout le mou se voyait donc à gauche.
   On passe en flex « bords à bords », et le logo est centré en absolu :
   les deux extrémités touchent leur marge, le logo reste parfaitement au
   milieu de l'écran quoi qu'il arrive.
   ========================================================= */
.p17-hdr {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative;
  grid-template-columns: none !important;
  gap: 24px !important;
  padding-left: 44px !important;
  padding-right: 44px !important;
}

.p17-hdr__brand {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  pointer-events: auto;
}

.p17-hdr__nav--left {
  justify-self: auto !important;
  margin: 0 !important;
  /* la moitié de la largeur du logo, pour ne pas passer dessous */
  padding-right: 130px;
}

.p17-hdr__right {
  justify-content: flex-end !important;
  margin: 0 !important;
  padding-left: 130px;
  gap: 26px !important;
}
.p17-hdr__actions { margin-left: 0 !important; }

/* Sous 1500 px, le logo repasse à gauche : plus de place pour le menu */
@media (max-width: 1500px) {
  .p17-hdr__brand {
    position: static !important;
    transform: none !important;
    order: -1;
  }
  .p17-hdr__nav--left { padding-right: 0; }
  .p17-hdr__right { padding-left: 0; }
  .p17-hdr { justify-content: flex-start !important; }
  .p17-hdr__right { margin-left: auto !important; }
}

/* Le CTA de l'en-tête : texte blanc, au repos comme au survol.
   (Une règle du thème le teintait avec la couleur du texte courant.) */
header.header .p17-hdr__cta,
header.header .p17-hdr__cta:hover,
header.header .p17-hdr__cta:focus,
header.header .p17-hdr__cta *,
header.header .p17-hdr__cta:hover * {
  color: #FFFFFF !important;
}

/* =========================================================
   ⬛ BOUTONS — survol inversé
   Au repos : fond accent, texte blanc.
   Au survol : le bouton s'éclaircit et le texte passe en anthracite.
   (Anthracite sur fond accent serait illisible — on inverse donc le fond
   en même temps, ce qui donne un contraste franc et un effet net.)
   ========================================================= */
header.header .p17-hdr__cta:hover,
header.header .p17-hdr__cta:focus-visible,
.p17-btn:not(.p17-btn--ghost):hover,
a.button:hover,
.btn-optional:hover,
.ohio-button:not(.p17-btn--ghost):hover,
.elementor-button:hover,
.wpcf7-submit:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background-color: #FFFFFF !important;
  border-color: var(--p17-accent) !important;
  color: #2B2724 !important;              /* anthracite */
  box-shadow: 0 10px 26px rgba(51,46,42,.16) !important;
  transform: translateY(-2px);
}

/* Les enfants (span, icône) suivent */
header.header .p17-hdr__cta:hover *,
.p17-btn:not(.p17-btn--ghost):hover *,
a.button:hover *,
.btn-optional:hover *,
.elementor-button:hover *,
.wpcf7-submit:hover * {
  color: #2B2724 !important;
}

/* Les icônes à l'intérieur d'un bouton passent en accent au survol */
.p17-btn:not(.p17-btn--ghost):hover .p17-ic,
header.header .p17-hdr__cta:hover .p17-ic {
  color: var(--p17-accent) !important;
}

/* =========================================================
   ⬛ PAGE « MA PHILOSOPHIE »
   Le vert sauge (déjà dans la palette, jusqu'ici inutilisé) devient
   la couleur secondaire de la page, comme sur la maquette.
   ========================================================= */
:root { --p17-sage: #8B9E88; --p17-sage-d: #75886F; }
:root[data-p17-theme="blue"] { --p17-sage: #7E9AA3; --p17-sage-d: #67848E; }

.p17-s-ph-hero, .p17-s-ph-vision, .p17-s-ph-principes,
.p17-s-ph-approche, .p17-s-ph-parcours, .p17-s-ph-cta {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  left: 0 !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  position: relative;
  overflow: hidden;
}
.p17-s-ph-hero > .elementor-container,
.p17-s-ph-principes > .elementor-container,
.p17-s-ph-approche > .elementor-container,
.p17-s-ph-parcours > .elementor-container,
.p17-s-ph-cta > .elementor-container {
  max-width: 1320px !important;
  margin: 0 auto !important;
  position: relative;
  z-index: 1;
}
.p17-s-ph-vision { padding: 0 !important; }
.p17-s-ph-vision > .elementor-container { max-width: 100% !important; }

/* ---------- Ornement végétal ---------- */
.p17-ph-orn { display: block; margin: 18px 0 26px; color: var(--p17-accent); opacity: .55; }
.p17-ph-orn--center { margin: 0 auto 14px; width: fit-content; }

/* ---------- 1. HERO ---------- */
.p17-ph-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
}
.p17-ph-title {
  font-family: var(--p17-font-display, serif) !important;
  font-size: clamp(2.6rem, 4.4vw, 4rem) !important;
  font-weight: 300 !important;
  color: var(--p17-text) !important;
  margin: 0 !important;
  letter-spacing: -.02em;
}
.p17-ph-lead {
  font-family: var(--p17-font-display, serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  line-height: 1.6;
  color: var(--p17-text-soft);
  margin: 0 0 28px;
}
.p17-ph-intro {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--p17-text-soft);
  max-width: 44ch;
  margin: 0 0 32px;
}
.p17-ph-intro strong { color: var(--p17-text); font-weight: 600; }

/* Le portrait sur sa forme organique sauge */
.p17-ph-hero__img { position: relative; margin: 0; }
.p17-ph-hero__img::before {
  content: "";
  position: absolute;
  right: 6%;
  top: 8%;
  width: 78%;
  aspect-ratio: 1;
  background: var(--p17-sage);
  border-radius: 52% 48% 46% 54% / 50% 44% 56% 50%;
  opacity: .55;
  z-index: 0;
}
.p17-ph-hero__img img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 460px;
  margin-left: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
}

/* ---------- 2. MA VISION ---------- */
.p17-ph-vision { display: grid; grid-template-columns: 1fr 1fr; }
.p17-ph-vision__img { margin: 0; }
.p17-ph-vision__img img {
  width: 100%; height: 100%;
  min-height: 380px;
  object-fit: cover;
  border-radius: 0 !important;
  display: block;
}
.p17-ph-vision__panel {
  background: var(--p17-sage);
  color: #FFFFFF;
  padding: 70px 8% 70px 6%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.p17-ph-vision__ic {
  display: grid; place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  margin-bottom: 22px;
}
.p17-ph-vision__ic .p17-ic { color: #FFFFFF !important; }
.p17-ph-vision__panel h2 {
  font-family: var(--p17-font-display, serif) !important;
  font-size: 1.9rem !important;
  font-weight: 400 !important;
  color: #FFFFFF !important;
  margin: 0 0 16px !important;
}
.p17-ph-vision__panel p {
  color: rgba(255,255,255,.92) !important;
  font-size: 1rem;
  line-height: 1.8;
  max-width: 42ch;
  margin: 0;
}

/* ---------- 3. PRINCIPES ---------- */
.p17-ph-principes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
  margin-top: 20px;
}
.p17-ph-principe { text-align: center; }
.p17-ph-principe__ic {
  display: grid; place-items: center;
  width: 68px; height: 68px;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 1px solid var(--p17-line);
  background: #FFFFFF;
  box-shadow: 0 8px 22px rgba(51,46,42,.05);
}
.p17-ph-principe__ic .p17-ic { color: var(--p17-accent) !important; }
.p17-ph-principe h3 {
  font-family: var(--p17-font-body, system-ui) !important;
  font-size: .98rem !important;
  font-weight: 600 !important;
  color: var(--p17-text) !important;
  margin: 0 0 10px !important;
}
.p17-ph-principe p {
  font-size: .87rem;
  line-height: 1.65;
  color: var(--p17-text-soft);
  margin: 0;
}

/* ---------- 4. MON APPROCHE ---------- */
.p17-ph-appr {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  align-items: center;
  gap: 70px;
}
.p17-ph-appr__text p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--p17-text-soft);
  margin: 0 0 18px;
}
.p17-ph-appr__text strong { color: var(--p17-text); font-weight: 600; }

/* La photo dans une forme organique, comme sur la maquette */
.p17-ph-appr__img { margin: 0; position: relative; }
.p17-ph-appr__img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 58% 42% 46% 54% / 44% 50% 50% 56% !important;
  border: 1px solid rgba(179,98,76,.25);
  padding: 8px;
  background: transparent;
}

/* ---------- 5. DEPUIS 2020 / SPÉCIALITÉS ---------- */
.p17-ph-parcours {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 60px;
  align-items: center;
  background: var(--p17-bg-2);
  border-radius: 24px;
  padding: 54px 56px;
}
.p17-ph-parcours__left { text-align: center; border-right: 1px solid var(--p17-line); padding-right: 50px; }
.p17-ph-parcours__ic {
  display: grid; place-items: center;
  width: 62px; height: 62px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--p17-accent-soft);
}
.p17-ph-parcours__ic .p17-ic { color: var(--p17-accent) !important; }
.p17-ph-parcours h3 {
  font-family: var(--p17-font-display, serif) !important;
  font-size: 1.6rem !important;
  font-weight: 400 !important;
  color: var(--p17-text) !important;
  margin: 0 0 14px !important;
}
.p17-ph-parcours p { font-size: .93rem; line-height: 1.7; color: var(--p17-text-soft); margin: 0 0 12px; }
.p17-ph-parcours__zone strong { color: var(--p17-text); font-weight: 600; }

.p17-ph-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.p17-ph-liste li { display: flex; align-items: center; gap: 12px; }
.p17-ph-liste li .p17-ic { color: var(--p17-sage) !important; flex: none; }
.p17-ph-liste span { font-size: .95rem; color: var(--p17-text-soft); }

/* ---------- 6. CITATION + CTA ---------- */
.p17-ph-cta { text-align: center; }
.p17-ph-quote {
  font-family: var(--p17-font-display, serif);
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  font-weight: 300;
  line-height: 1.4;
  color: var(--p17-text);
  margin: 0 0 34px;
  letter-spacing: -.01em;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .p17-ph-hero, .p17-ph-vision, .p17-ph-appr { grid-template-columns: 1fr; gap: 40px; }
  .p17-ph-principes { grid-template-columns: repeat(2, 1fr); gap: 34px; }
  .p17-ph-hero__img img { margin: 0 auto; }
  .p17-ph-vision__panel { padding: 50px 30px; }
  .p17-ph-parcours { grid-template-columns: 1fr; padding: 40px 30px; }
  .p17-ph-parcours__left { border-right: none; border-bottom: 1px solid var(--p17-line); padding: 0 0 32px; }
}
@media (max-width: 700px) {
  .p17-ph-principes { grid-template-columns: 1fr; }
  .p17-s-ph-hero, .p17-s-ph-principes, .p17-s-ph-approche,
  .p17-s-ph-parcours, .p17-s-ph-cta { padding-left: 20px !important; padding-right: 20px !important; }
}

/* Le portrait du hero : la photo a un fond studio sombre, un rectangle
   net faisait tache sur la forme sauge. On lui donne une découpe organique
   et on recentre la forme derrière le sujet. */
.p17-ph-hero__img::before {
  right: 4%;
  top: 4%;
  width: 84%;
  opacity: .6;
}
.p17-ph-hero__img img {
  border-radius: 50% 50% 44% 56% / 46% 46% 54% 54% !important;
  -webkit-mask-image: none;
          mask-image: none;
  box-shadow: 0 26px 60px rgba(51,46,42,.18);
  object-position: center 15%;
}

/* « Ma vision » : la photo dictait la hauteur (1495 px !). On borne la
   bande et on laisse l'image se recadrer. */
.p17-ph-vision {
  min-height: 460px;
  max-height: 560px;
  align-items: stretch;
}
.p17-ph-vision__img { height: 100%; overflow: hidden; }
.p17-ph-vision__img img {
  height: 100% !important;
  max-height: 560px;
  min-height: 460px;
  object-fit: cover;
  object-position: center 42%;
}
.p17-ph-vision__panel { padding: 56px 7% !important; }

@media (max-width: 1024px) {
  .p17-ph-vision { max-height: none; min-height: 0; }
  .p17-ph-vision__img img { min-height: 300px; max-height: 380px; }
}

/* =========================================================
   « Ma philosophie » — hero avec portrait détouré
   Le PNG est transparent : plus besoin de cadre ni de masque.
   Le sujet se pose directement sur la forme sauge, comme la maquette.
   ========================================================= */
.p17-ph-hero__img--cut { position: relative; display: flex; justify-content: center; align-items: flex-end; }

/* La forme organique sauge, derrière le sujet */
.p17-ph-hero__img--cut::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 6%;
  transform: translateX(-50%);
  width: 74%;
  aspect-ratio: 1;
  background: var(--p17-sage);
  border-radius: 54% 46% 48% 52% / 50% 46% 54% 50%;
  opacity: .6;
  z-index: 0;
  right: auto;
}

/* Le portrait : aucune découpe, aucune ombre de cadre */
.p17-ph-hero__img--cut img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
  /* une ombre portée qui suit la silhouette, pas le cadre */
  filter: drop-shadow(0 26px 34px rgba(51,46,42,.22));
}

@media (max-width: 1024px) {
  .p17-ph-hero__img--cut img { max-width: 360px; }
  .p17-ph-hero__img--cut::before { width: 82%; top: 10%; }
}

/* =========================================================
   « Ma philosophie » — HERO, version fidèle à la maquette
   Le portrait est grand, calé en haut, et se fait couper par le bas de
   la section (il déborde sur la bande suivante). La forme sauge est plus
   petite et se tient derrière le buste, pas derrière la tête.
   ========================================================= */
.p17-s-ph-hero {
  overflow: hidden !important;
  padding-top: 70px !important;
  padding-bottom: 0 !important;
}

.p17-ph-hero {
  grid-template-columns: 1fr 1.05fr;
  align-items: center;
  gap: 40px;
  min-height: 560px;
}

/* Colonne texte : centrée verticalement, un peu resserrée */
.p17-ph-hero__text { padding-bottom: 70px; max-width: 480px; }
.p17-ph-title { font-size: clamp(2.3rem, 3.4vw, 3.2rem) !important; }
.p17-ph-lead  { font-size: clamp(1.05rem, 1.25vw, 1.25rem); margin-bottom: 24px; }
.p17-ph-intro { font-size: .95rem; margin-bottom: 28px; }

/* Colonne image : hauteur fixe, le portrait dépasse et se fait couper */
.p17-ph-hero__img--cut {
  position: relative;
  height: 560px;
  align-self: end;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: visible;      /* c'est la SECTION qui coupe, pas la colonne */
}

/* La forme sauge : plus petite, derrière le buste */
.p17-ph-hero__img--cut::before {
  content: "";
  position: absolute;
  left: 12%;
  top: 16%;
  transform: none;
  width: 58%;
  aspect-ratio: 1;
  background: var(--p17-sage);
  border-radius: 52% 48% 46% 54% / 50% 45% 55% 50%;
  opacity: .55;
  z-index: 0;
}

/* Le portrait : grand, tête en haut, jambes coupées par la section */
.p17-ph-hero__img--cut img {
  position: relative;
  z-index: 1;
  height: 700px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  filter: drop-shadow(0 22px 30px rgba(51,46,42,.18));
}

/* L'ornement végétal en haut à droite, comme sur la maquette */
.p17-s-ph-hero::after {
  content: "";
  position: absolute;
  top: -30px;
  right: -60px;
  width: 420px;
  height: 315px;
  background: url("https://www.paris17-osteo.fr/wp-content/uploads/2026/07/deco-branche.png")
              no-repeat top left / contain;
  transform: scaleX(-1);
  opacity: .35;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 1200px) {
  .p17-ph-hero__img--cut img { height: 580px !important; }
  .p17-ph-hero__img--cut { height: 470px; }
  .p17-ph-hero { min-height: 470px; }
}

@media (max-width: 1024px) {
  .p17-ph-hero { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .p17-ph-hero__text { padding-bottom: 30px; max-width: none; }
  .p17-ph-hero__img--cut { height: 440px; }
  .p17-ph-hero__img--cut img { height: 500px !important; }
  .p17-ph-hero__img--cut::before { left: 18%; width: 64%; }
  .p17-s-ph-hero::after { width: 240px; height: 180px; opacity: .22; }
}

/* =========================================================
   « Ma philosophie » — HERO, ajustements
   · portrait nettement plus grand
   · la forme sauge s'étale et vient mordre derrière le texte
   · le laurier au-dessus de Benjamin cède la place au logo, en filigrane
   ========================================================= */
.p17-s-ph-hero { padding-top: 60px !important; }

.p17-ph-hero {
  grid-template-columns: .95fr 1.15fr;
  min-height: 660px;
}
.p17-ph-hero__img--cut { height: 660px; }

/* Le portrait : plus imposant */
.p17-ph-hero__img--cut img {
  height: 840px !important;
  filter: drop-shadow(0 26px 36px rgba(51,46,42,.20));
}

/* La forme sauge : plus large, elle déborde vers la gauche et passe
   derrière le bloc de texte, comme demandé. */
.p17-ph-hero__img--cut::before {
  left: -34%;
  top: 8%;
  width: 108%;
  aspect-ratio: 1.08;
  opacity: .5;
  border-radius: 48% 52% 44% 56% / 52% 44% 56% 48%;
}

/* Le texte repasse au-dessus de la forme */
.p17-ph-hero__text { position: relative; z-index: 2; }

/* ---- Le logo en filigrane, à la place du laurier ---- */
.p17-s-ph-hero::after {
  content: "";
  position: absolute;
  top: 40px;
  right: 40px;
  width: 340px;
  height: 110px;
  background: url("https://www.paris17-osteo.fr/wp-content/uploads/2026/07/logo-benjamin-dahan-horizontal.png")
              no-repeat center right / contain;
  transform: none;
  opacity: .14;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 1200px) {
  .p17-ph-hero { min-height: 560px; }
  .p17-ph-hero__img--cut { height: 560px; }
  .p17-ph-hero__img--cut img { height: 700px !important; }
  .p17-s-ph-hero::after { width: 240px; height: 80px; }
}

@media (max-width: 1024px) {
  .p17-ph-hero__img--cut { height: 460px; }
  .p17-ph-hero__img--cut img { height: 540px !important; }
  .p17-ph-hero__img--cut::before { left: -10%; width: 90%; }
  .p17-s-ph-hero::after { opacity: .10; width: 180px; }
}

/* =========================================================
   « Ma philosophie » — HERO : recentrage
   Le sujet se retrouvait à droite, à moitié hors de la forme sauge.
   On centre la forme SUR le sujet, et on décale l'ensemble vers la
   gauche pour qu'il vienne mordre derrière le texte.
   Pas de drop-shadow : la maquette n'en a pas, et le filtre CSS
   empêchait par ailleurs toute vérification en capture.
   ========================================================= */
.p17-ph-hero__img--cut {
  justify-content: center;
  overflow: visible;
}

.p17-ph-hero__img--cut img {
  transform: translateX(-56px);
  filter: none !important;
}

.p17-ph-hero__img--cut::before {
  left: 50%;
  top: 5%;
  transform: translateX(calc(-50% - 56px));
  width: 104%;
  aspect-ratio: 1.02;
  opacity: .5;
  border-radius: 50% 50% 46% 54% / 52% 46% 54% 48%;
}

@media (max-width: 1200px) {
  .p17-ph-hero__img--cut img { transform: translateX(-30px); }
  .p17-ph-hero__img--cut::before { transform: translateX(calc(-50% - 30px)); width: 100%; }
}

@media (max-width: 1024px) {
  .p17-ph-hero__img--cut img { transform: none; }
  .p17-ph-hero__img--cut::before { transform: translateX(-50%); width: 88%; }
}

/* Décalage par marge plutôt que par `transform` : le résultat visuel est
   identique, mais sans créer de couche composite. */
.p17-ph-hero__img--cut img {
  transform: none !important;
  filter: none !important;
  margin-right: 112px !important;   /* pousse le sujet vers la gauche */
  margin-left: 0 !important;
}

.p17-ph-hero__img--cut::before {
  left: 2%;
  right: auto;
  top: 5%;
  transform: none;
  width: 96%;
  aspect-ratio: 1.02;
}

@media (max-width: 1200px) {
  .p17-ph-hero__img--cut img { margin-right: 60px !important; }
  .p17-ph-hero__img--cut::before { left: 4%; width: 92%; }
}
@media (max-width: 1024px) {
  .p17-ph-hero__img--cut img { margin-right: 0 !important; }
  .p17-ph-hero__img--cut::before { left: 6%; width: 88%; }
}

/* Le filigrane du hero « Ma philosophie » : seulement l'arbre du logo,
   en grand, plutôt que le logo complet avec son texte. */
.p17-s-ph-hero::after {
  background-image: url("https://www.paris17-osteo.fr/wp-content/uploads/2026/07/logo-arbre.png") !important;
  background-position: top right !important;
  background-size: contain !important;
  width: 420px !important;
  height: 470px !important;
  top: -20px !important;
  right: 10px !important;
  opacity: .10 !important;
}

@media (max-width: 1200px) {
  .p17-s-ph-hero::after { width: 280px !important; height: 314px !important; opacity: .08 !important; }
}
@media (max-width: 1024px) {
  .p17-s-ph-hero::after { width: 190px !important; height: 213px !important; opacity: .07 !important; }
}

/* Le filigrane est un logo bleu : plutôt qu'une rotation de teinte
   (qui laisse toujours traîner du bleu), on se sert du PNG comme MASQUE.
   L'arbre prend alors exactement la couleur de la forme sauge. */
.p17-s-ph-hero::after {
  background-image: none !important;
  background-color: var(--p17-sage) !important;
  -webkit-mask-image: url("https://www.paris17-osteo.fr/wp-content/uploads/2026/07/logo-arbre.png");
          mask-image: url("https://www.paris17-osteo.fr/wp-content/uploads/2026/07/logo-arbre.png");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: top right;
          mask-position: top right;
  -webkit-mask-size: contain;
          mask-size: contain;
  opacity: .30 !important;
}

/* Le filigrane : plus discret */
.p17-s-ph-hero::after { opacity: .16 !important; }

/* =========================================================
   « Ma vision » — d'après la maquette
   · le panneau vert est légèrement arrondi
   · l'icône est dans un rond BLANC, aligné avec le titre
   ========================================================= */
.p17-ph-vision {
  align-items: stretch;
  gap: 0;
}

.p17-ph-vision__img img { border-radius: 0 !important; }

.p17-ph-vision__panel {
  background: var(--p17-sage);
  border-radius: 28px 0 0 28px;      /* arrondi côté image, comme la maquette */
  padding: 56px 8% !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Icône + titre sur la même ligne */
.p17-ph-vision__head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}

.p17-ph-vision__ic {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 56px !important;
  height: 56px !important;
  flex: none;
  border-radius: 50% !important;
  background: #FFFFFF !important;      /* rond blanc */
  box-shadow: 0 6px 18px rgba(51,46,42,.10);
  margin: 0 !important;
}
.p17-ph-vision__ic .p17-ic { color: var(--p17-sage-d) !important; }

.p17-ph-vision__panel h2 { margin: 0 !important; }

@media (max-width: 1024px) {
  .p17-ph-vision__panel { border-radius: 0 0 28px 28px; padding: 44px 26px !important; }
}

/* =========================================================
   « Ma vision » — refonte d'après la capture de la maquette
   · vert olive foncé (et non le sauge clair du hero)
   · grande courbe convexe à gauche, qui mord dans la photo
   · rond de l'icône en crème, pas en blanc
   · la bande n'est pas collée au bord gauche
   ========================================================= */
:root { --p17-olive: #5F6C57; }
:root[data-p17-theme="blue"] { --p17-olive: #4E6670; }

.p17-s-ph-vision {
  padding: 0 !important;
  background: transparent !important;
}

.p17-ph-vision {
  grid-template-columns: 1.05fr .95fr;
  margin-left: 42px;              /* léger retrait à gauche, comme la maquette */
  margin-right: 0;
  align-items: stretch;
  overflow: visible;
}

.p17-ph-vision__img {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.p17-ph-vision__img img {
  border-radius: 0 !important;
  object-position: center 45%;
}

/* Le panneau : olive, et sa grande courbe déborde sur la photo */
.p17-ph-vision__panel {
  position: relative;
  z-index: 1;
  background: var(--p17-olive) !important;
  margin-left: -90px;                                   /* il mord dans l'image */
  padding: 64px 7% 64px 12% !important;
  border-radius: 260px 0 0 260px / 50% 0 0 50% !important;
}

/* Icône + titre sur la même ligne, rond crème */
.p17-ph-vision__head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 22px;
}
.p17-ph-vision__ic {
  width: 62px !important;
  height: 62px !important;
  border-radius: 50% !important;
  background: #EFE9E0 !important;                       /* crème, pas blanc */
  box-shadow: none;
  flex: none;
}
.p17-ph-vision__ic .p17-ic { color: var(--p17-olive) !important; }

.p17-ph-vision__panel h2 {
  font-size: 2.1rem !important;
  font-weight: 400 !important;
  color: #FFFFFF !important;
  margin: 0 !important;
}
.p17-ph-vision__panel p {
  color: rgba(255,255,255,.90) !important;
  line-height: 1.85;
  max-width: 40ch;
}

@media (max-width: 1024px) {
  .p17-ph-vision { grid-template-columns: 1fr; margin-left: 0; }
  .p17-ph-vision__panel {
    margin-left: 0;
    margin-top: -60px;
    padding: 60px 26px 44px !important;
    border-radius: 0 0 0 0 !important;
    border-top-left-radius: 60% 60px !important;
    border-top-right-radius: 60% 60px !important;
  }
}

/* La courbe était un demi-cercle (rayon 260 px) : bien trop marquée.
   La maquette n'a qu'un arc doux qui mord légèrement dans la photo. */
.p17-ph-vision__panel {
  border-radius: 90px 0 0 90px / 50% 0 0 50% !important;
  margin-left: -46px !important;
  padding: 60px 8% 60px 8% !important;
}

/* La photo file jusqu'au bord gauche, sans retrait */
.p17-ph-vision { margin-left: 0 !important; grid-template-columns: 1.1fr .9fr; }

@media (max-width: 1024px) {
  .p17-ph-vision__panel {
    margin-left: 0 !important;
    margin-top: -50px;
    border-radius: 0 !important;
    border-top-left-radius: 50% 50px !important;
    border-top-right-radius: 50% 50px !important;
    padding: 56px 26px 44px !important;
  }
}

/* =========================================================
   « Ma vision » — le liseré crème dans la courbe
   La courbe a un rayon de 90 px, mais le panneau ne mordait la photo
   que de 46 px : les 44 px restants de l'arc débordaient sur le fond
   crème de la section, d'où le liseré blanc.
   Règle : le chevauchement doit être SUPÉRIEUR au rayon de l'arc.
   ========================================================= */
.p17-ph-vision__panel {
  margin-left: -120px !important;      /* > 90 px de rayon : l'arc reste sur la photo */
  border-radius: 90px 0 0 90px / 50% 0 0 50% !important;
  padding: 60px 8% 60px calc(8% + 60px) !important;   /* on compense le décalage */
}

/* La photo occupe toute sa colonne, sans marge : plus de bord clair */
.p17-ph-vision {
  margin: 0 !important;
  grid-template-columns: 1.15fr .85fr;
  gap: 0 !important;
}
.p17-ph-vision__img {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0;
}
.p17-ph-vision__img img {
  display: block;
  width: 100% !important;
  border-radius: 0 !important;
}

/* Et la section elle-même ne laisse aucun filet clair autour de la bande */
.p17-s-ph-vision {
  padding: 0 !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  overflow: hidden !important;
}
.p17-s-ph-vision > .elementor-container {
  max-width: 100% !important;
  padding: 0 !important;
}
.p17-s-ph-vision .elementor-column,
.p17-s-ph-vision .elementor-widget-wrap,
.p17-s-ph-vision .elementor-widget-html,
.p17-s-ph-vision .elementor-widget-container {
  padding: 0 !important;
  margin: 0 !important;
}

@media (max-width: 1024px) {
  .p17-ph-vision__panel {
    margin-left: 0 !important;
    margin-top: -50px;
    border-radius: 0 !important;
    border-top-left-radius: 50% 50px !important;
    border-top-right-radius: 50% 50px !important;
    padding: 56px 26px 44px !important;
  }
}

/* =========================================================
   « Mon approche » — cadrage de la photo
   La photo est en portrait (2:3). Le cadre organique était en 4:3
   (paysage) : le recadrage n'en gardait qu'une bande, on ne voyait
   plus que l'épaule. On passe le cadre en portrait.
   ========================================================= */
.p17-ph-appr { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 60px; }

.p17-ph-appr__img img {
  aspect-ratio: 4 / 4.6 !important;      /* portrait : la photo entre presque entière */
  object-fit: cover !important;
  object-position: center 32% !important;
  border-radius: 52% 48% 46% 54% / 46% 50% 50% 54% !important;
  padding: 8px;
  border: 1px solid rgba(179,98,76,.22);
}

/* La phrase reprise de l'ancienne page, mise en exergue */
.p17-ph-appr__intro {
  font-size: 1.05rem !important;
  line-height: 1.75 !important;
  color: var(--p17-text) !important;
  padding-left: 18px;
  border-left: 2px solid var(--p17-accent);
  margin-bottom: 26px !important;
}

.p17-ph-appr .p17-cta-row { margin-top: 30px; }

@media (max-width: 1024px) {
  .p17-ph-appr { grid-template-columns: 1fr; }
  .p17-ph-appr__img img { aspect-ratio: 4 / 4 !important; }
}

/* =========================================================
   ⬛ PAGES « POUR QUI ? » — gabarit commun
   Six pages, une seule feuille : nourrisson, enfant, femme enceinte,
   adulte, sportif, sénior. Le contenu vient des pages d'origine.
   ========================================================= */
.p17-s-pq-hero, .p17-s-pq-comprendre, .p17-s-pq-indications, .p17-s-pq-cta {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  left: 0 !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  position: relative;
  overflow: hidden;
}
.p17-s-pq-hero > .elementor-container,
.p17-s-pq-comprendre > .elementor-container,
.p17-s-pq-indications > .elementor-container,
.p17-s-pq-cta > .elementor-container {
  max-width: 1320px !important;
  margin: 0 auto !important;
  position: relative;
  z-index: 1;
}

/* ---------- Hero ---------- */
.p17-pq-hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 64px;
  align-items: center;
}

.p17-pq-hero .p17-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.p17-pq-hero__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--p17-accent-soft);
}
.p17-pq-hero__ic .p17-ic { color: var(--p17-accent) !important; }

.p17-pq-title {
  font-family: var(--p17-font-display, serif) !important;
  font-size: clamp(2.1rem, 3.4vw, 3.1rem) !important;
  font-weight: 300 !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em;
  color: var(--p17-text) !important;
  margin: 0 0 22px !important;
}

.p17-pq-lead {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--p17-text-soft);
  margin: 0 0 32px;
  max-width: 50ch;
}

/* La photo, dans une forme organique */
.p17-pq-hero__img { margin: 0; }
.p17-pq-hero__img img {
  width: 100%;
  aspect-ratio: 4 / 4.4;
  object-fit: cover;
  object-position: center 35%;
  border-radius: 54% 46% 48% 52% / 48% 50% 50% 52% !important;
  box-shadow: 0 24px 60px rgba(51,46,42,.14);
}
/* Les photos de l'ancien site : même étalonnage chaud que partout ailleurs */
.p17-pq-hero__img--old img {
  filter: saturate(.70) contrast(1.10) brightness(.92) sepia(.16) hue-rotate(-5deg);
}

/* ---------- « Comprendre » ---------- */
.p17-pq-texte__corps {
  max-width: 74ch;
  margin: 0 auto;
}
.p17-pq-texte__corps p {
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--p17-text-soft);
  margin: 0 0 20px;
}

/* ---------- Indications ---------- */
.p17-inds {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.p17-ind {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: #FFFFFF;
  border: 1px solid var(--p17-line);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 1px 3px rgba(51,46,42,.03), 0 10px 26px rgba(51,46,42,.05);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.p17-ind:hover {
  transform: translateY(-3px);
  border-color: rgba(179,98,76,.3);
  box-shadow: 0 4px 12px rgba(51,46,42,.06), 0 18px 40px rgba(51,46,42,.09);
}

.p17-ind__n {
  flex: none;
  font-family: var(--p17-font-body, system-ui);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--p17-accent);
  padding-top: 3px;
  min-width: 22px;
}

.p17-ind strong {
  display: block;
  font-size: .99rem;
  font-weight: 600;
  color: var(--p17-text);
  margin-bottom: 5px;
  line-height: 1.35;
}
.p17-ind span:not(.p17-ind__n) {
  display: block;
  font-size: .91rem;
  line-height: 1.6;
  color: var(--p17-text-soft);
}
.p17-ind--simple strong { margin-bottom: 0; }

/* ---------- CTA final ---------- */
.p17-cta-row--center { justify-content: center; }

@media (max-width: 1024px) {
  .p17-pq-hero { grid-template-columns: 1fr; gap: 40px; }
  .p17-pq-hero__img { order: -1; }
  .p17-pq-hero__img img { aspect-ratio: 4 / 3.4; }
  .p17-inds { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .p17-s-pq-hero, .p17-s-pq-comprendre,
  .p17-s-pq-indications, .p17-s-pq-cta {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* =========================================================
   ⬛ PAGE CONTACT
   ========================================================= */
.p17-s-ct-hero, .p17-s-ct-corps, .p17-s-ct-lieu,
.p17-s-bl-hero, .p17-s-bl-liste {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  left: 0 !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  position: relative;
  overflow: hidden;
}
.p17-s-ct-hero > .elementor-container,
.p17-s-ct-corps > .elementor-container,
.p17-s-ct-lieu > .elementor-container,
.p17-s-bl-hero > .elementor-container,
.p17-s-bl-liste > .elementor-container {
  max-width: 1320px !important;
  margin: 0 auto !important;
}

/* ---------- Hero : le texte à gauche, une photo du cabinet à droite ---------- */
.p17-ct-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 60px;
}
.p17-ct-title {
  font-family: var(--p17-font-display, serif) !important;
  font-size: clamp(2.1rem, 3.4vw, 3.1rem) !important;
  font-weight: 300 !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em;
  color: var(--p17-text) !important;
  margin: 0 !important;
  max-width: 14ch;
  text-wrap: balance;
}
.p17-ct-lead {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--p17-text);
  opacity: .86;
  max-width: 46ch;
  margin: 0 0 32px;
}
.p17-ct-top__img {
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 6px 18px rgba(51,46,42,.06), 0 30px 60px rgba(51,46,42,.10);
}
.p17-ct-top__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Les trois raccourcis de contact */
.p17-ct-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.p17-ct-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--p17-line);
  border-radius: 20px;
  padding: 30px 28px;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(51,46,42,.03), 0 14px 34px rgba(51,46,42,.06);
}
/* Pas de hover sur ces cartes : elles restent stables. Seul le lien réagit. */
.p17-ct-card__more { transition: color .2s ease; }
.p17-ct-card:hover .p17-ct-card__more { color: var(--p17-accent-h); }
.p17-ct-card:focus-visible {
  outline: 2px solid var(--p17-accent);
  outline-offset: 3px;
}
.p17-ct-card__ic {
  display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px;
  border-radius: 16px;
  background: var(--p17-accent-soft);
  margin-bottom: 20px;
}
.p17-ct-card__ic .p17-ic { color: var(--p17-accent) !important; }
.p17-ct-card strong {
  font-family: var(--p17-font-display, serif);
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--p17-text);
  margin-bottom: 6px;
}
.p17-ct-card > span:not(.p17-ct-card__ic):not(.p17-ct-card__more) {
  font-size: .9rem;
  line-height: 1.55;
  color: var(--p17-text-soft);
  margin-bottom: 16px;
}
.p17-ct-card__more {
  margin-top: auto;
  font-size: .86rem;
  font-weight: 600;
  color: var(--p17-accent);
}

/* Infos + formulaire */
.p17-ct-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.p17-ct-form {
  background: #FFFFFF;
  border: 1px solid var(--p17-line);
  border-radius: 24px;
  padding: 40px 36px;
  box-shadow: 0 4px 14px rgba(51,46,42,.05), 0 22px 50px rgba(51,46,42,.09);
}

/* Le formulaire vit maintenant DANS la carte : plus rien à rattraper. */
.p17-cf7-slot { margin-top: 26px; }
.p17-cf7-slot .wpcf7 {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
}

/* =========================================================
   ⬛ PAGE L'OSTÉOPATHIE / BLOG
   ========================================================= */
.p17-bl-hero { text-align: center; }
.p17-bl-hero .p17-pq-title { margin-left: auto; margin-right: auto; }

.p17-bl-liste .p17-posts {
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

@media (max-width: 1024px) {
  .p17-ct-cards { grid-template-columns: 1fr; }
  .p17-ct-grid { grid-template-columns: 1fr; gap: 40px; }
  .p17-bl-liste .p17-posts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .p17-bl-liste .p17-posts { grid-template-columns: 1fr; }
  .p17-s-ct-hero, .p17-s-ct-corps, .p17-s-bl-hero, .p17-s-bl-liste {
    padding-left: 20px !important; padding-right: 20px !important;
  }
}

/* =========================================================
   ⬛ PAGES « POUR QUI ? » — gabarit d'après la maquette
   hero · 3 bénéfices · pourquoi consulter · indications · CTA
   ========================================================= */
.p17-s-q2-hero, .p17-s-q2-benefices, .p17-s-q2-pourquoi,
.p17-s-q2-indications, .p17-s-q2-cta,
.p17-s-q2-approfondir, .p17-s-q2-seance, .p17-s-q2-faq, .p17-s-q2-local {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  left: 0 !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  position: relative;
  overflow: hidden;
}
.p17-s-q2-hero > .elementor-container,
.p17-s-q2-benefices > .elementor-container,
.p17-s-q2-pourquoi > .elementor-container,
.p17-s-q2-indications > .elementor-container,
.p17-s-q2-cta > .elementor-container,
.p17-s-q2-approfondir > .elementor-container,
.p17-s-q2-seance > .elementor-container,
.p17-s-q2-faq > .elementor-container,
.p17-s-q2-local > .elementor-container {
  max-width: 1240px !important;
  margin: 0 auto !important;
  position: relative;
  z-index: 1;
}

/* Le filet terracotta sous les titres */
.p17-rule {
  display: block;
  width: 46px;
  height: 2px;
  background: var(--p17-accent);
  border-radius: 2px;
  margin: 22px 0 24px;
}
.p17-head--rule .p17-rule { margin-left: auto; margin-right: auto; }

/* Photos de l'ancien site : étalonnage chaud */
.p17-img--old img {
  filter: saturate(.72) contrast(1.08) brightness(.94) sepia(.14) hue-rotate(-5deg);
}

/* ---------- 1. HERO ---------- */
.p17-pq2-hero {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
}
.p17-pq2-title {
  font-family: var(--p17-font-display, serif) !important;
  font-size: clamp(2.4rem, 4vw, 3.6rem) !important;
  font-weight: 300 !important;
  line-height: 1.08 !important;
  letter-spacing: -.02em;
  color: var(--p17-text) !important;
  margin: 0 !important;
}
.p17-pq2-lead {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--p17-text-soft);
  margin: 0 0 30px;
}

/* La photo sur sa forme organique */
.p17-pq2-hero__img { position: relative; margin: 0; }
.p17-pq2-hero__img::before {
  content: "";
  position: absolute;
  inset: -6% -4% -6% 2%;
  background: var(--p17-bg-3);
  border-radius: 54% 46% 44% 56% / 48% 52% 48% 52%;
  opacity: .8;
  z-index: 0;
}
.p17-pq2-hero__img img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 3.2;
  object-fit: cover;
  object-position: center 32%;
  border-radius: 50% 50% 46% 54% / 46% 48% 52% 54% !important;
}

/* ---------- 2. LES TROIS BÉNÉFICES ---------- */
.p17-benefs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.p17-benef { display: flex; align-items: center; gap: 18px; }
.p17-benef__ic {
  display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px;
  flex: none;
  border: 1px solid rgba(179,98,76,.35);
  border-radius: 50%;
  background: transparent;
}
.p17-benef__ic .p17-ic { color: var(--p17-accent) !important; }
.p17-benef strong {
  display: block;
  font-family: var(--p17-font-display, serif);
  font-size: 1.04rem;
  font-weight: 500;
  color: var(--p17-text);
  margin-bottom: 4px;
}
.p17-benef span {
  display: block;
  font-size: .87rem;
  line-height: 1.55;
  color: var(--p17-text-soft);
}

/* ---------- 3. POURQUOI CONSULTER ---------- */
.p17-pq2-why {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 64px;
  align-items: center;
}
.p17-pq2-why__img { margin: 0; }
.p17-pq2-why__img img {
  width: 100%;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  border-radius: 18px !important;
  box-shadow: 0 20px 50px rgba(51,46,42,.13);
}
.p17-pq2-why__text .p17-h2 { max-width: none; margin-bottom: 0; }
.p17-pq2-why__text p {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--p17-text-soft);
  margin: 0 0 18px;
}

/* ---------- 4. INDICATIONS ---------- */
.p17-panel {
  background: var(--p17-bg-2);
  border-radius: 28px;
  padding: 58px 48px 52px;
}
.p17-panel .p17-head { margin-bottom: 40px; }

.p17-indcs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.p17-indc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  background: #FFFFFF;
  border: 1px solid var(--p17-line);
  border-radius: 14px;
  padding: 26px 14px;
  min-height: 132px;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.p17-indc:hover {
  transform: translateY(-4px);
  border-color: rgba(179,98,76,.35);
  box-shadow: 0 14px 34px rgba(51,46,42,.09);
}
.p17-indc__ic { display: flex; align-items: center; justify-content: center; }
.p17-indc__ic .p17-ic { color: var(--p17-accent) !important; }
.p17-indc__t {
  font-size: .87rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--p17-text);
}

/* La liste complète, repliée : le texte d'origine reste indexable */
.p17-indall {
  margin-top: 34px;
  border-top: 1px solid var(--p17-line);
  padding-top: 22px;
}
.p17-indall summary {
  cursor: pointer;
  font-size: .9rem;
  font-weight: 600;
  color: var(--p17-accent);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.p17-indall summary::-webkit-details-marker { display: none; }
.p17-indall summary::after {
  content: "↓";
  transition: transform .25s ease;
}
.p17-indall[open] summary::after { transform: rotate(180deg); }
.p17-indall ul {
  margin: 20px 0 0;
  padding: 0 0 0 20px;
  columns: 2;
  column-gap: 40px;
}
.p17-indall li {
  font-size: .9rem;
  line-height: 1.6;
  color: var(--p17-text-soft);
  margin-bottom: 12px;
  break-inside: avoid;
}

/* ---------- 5. CARTE CTA ---------- */
.p17-ctacard {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 48px;
  align-items: center;
  background: var(--p17-bg-2);
  border-radius: 28px;
  padding: 24px;
}
.p17-ctacard__img { margin: 0; }
.p17-ctacard__img img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 18px !important;
}
.p17-ctacard__text { padding-right: 40px; }
.p17-ctacard__text .p17-h2 { margin-bottom: 0; max-width: 16ch; }
.p17-ctacard__text p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--p17-text-soft);
  margin: 0 0 26px;
  max-width: 40ch;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .p17-indcs { grid-template-columns: repeat(3, 1fr); }
  .p17-benefs { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 900px) {
  .p17-pq2-hero, .p17-pq2-why, .p17-ctacard { grid-template-columns: 1fr; gap: 36px; }
  .p17-pq2-hero__img { order: -1; }
  .p17-ctacard__text { padding-right: 0; }
  .p17-indall ul { columns: 1; }
}
@media (max-width: 600px) {
  .p17-indcs { grid-template-columns: repeat(2, 1fr); }
  .p17-panel { padding: 40px 20px; }
  .p17-s-q2-hero, .p17-s-q2-benefices, .p17-s-q2-pourquoi,
  .p17-s-q2-indications, .p17-s-q2-cta {
    padding-left: 20px !important; padding-right: 20px !important;
  }
}

/* =========================================================
   ⬛ PAGE « L'OSTÉOPATHIE » (le blog)
   hero · article à la une · grille · CTA
   ========================================================= */
.p17-s-bl2-hero, .p17-s-bl2-une, .p17-s-bl2-grille, .p17-s-bl2-cta {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  left: 0 !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  position: relative;
  overflow: hidden;
}
.p17-s-bl2-hero > .elementor-container,
.p17-s-bl2-une > .elementor-container,
.p17-s-bl2-grille > .elementor-container,
.p17-s-bl2-cta > .elementor-container {
  max-width: 1240px !important;
  margin: 0 auto !important;
  position: relative;
  z-index: 1;
}

/* ---------- Hero ---------- */
.p17-bl2-hero { text-align: center; }
.p17-bl2-hero .p17-pq2-title { margin-left: auto; margin-right: auto; }
.p17-bl2-hero .p17-rule { margin: 22px auto 26px; }

/* Le filigrane de l'arbre, comme sur « Ma philosophie » */
.p17-s-bl2-hero::after {
  content: "";
  position: absolute;
  top: -40px; right: 20px;
  width: 320px; height: 358px;
  background-color: var(--p17-accent);
  -webkit-mask: url("https://www.paris17-osteo.fr/wp-content/uploads/2026/07/logo-arbre.png")
                no-repeat top right / contain;
          mask: url("https://www.paris17-osteo.fr/wp-content/uploads/2026/07/logo-arbre.png")
                no-repeat top right / contain;
  opacity: .07;
  pointer-events: none;
  z-index: 0;
}

/* ---------- L'article à la une ---------- */
.p17-bl2-une .p17-eyebrow { margin-bottom: 22px; }

.p17-feat {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 0;
  background: #FFFFFF;
  border: 1px solid var(--p17-line);
  border-radius: 24px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(51,46,42,.04), 0 20px 50px rgba(51,46,42,.08);
  transition: transform .35s ease, box-shadow .35s ease;
}
.p17-feat:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(51,46,42,.07), 0 30px 66px rgba(51,46,42,.14);
}

.p17-feat__img { display: block; overflow: hidden; }
.p17-feat__img img {
  width: 100%; height: 100%;
  min-height: 340px;
  object-fit: cover;
  border-radius: 0 !important;
  display: block;
  /* les visuels des articles sont des banques d'images froides : on les raccorde */
  filter: saturate(.75) contrast(1.08) brightness(.92) sepia(.14) hue-rotate(-5deg);
  transition: transform .7s cubic-bezier(.2,0,.2,1);
}
.p17-feat:hover .p17-feat__img img { transform: scale(1.04); }

.p17-feat__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 44px 44px 40px;
}
.p17-feat__top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.p17-feat__cat {
  background: var(--p17-accent);
  color: var(--p17-on-accent);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 999px;
}
.p17-feat__meta {
  font-size: .8rem;
  color: var(--p17-muted);
}
.p17-feat__t {
  font-family: var(--p17-font-display, serif) !important;
  font-size: clamp(1.5rem, 2.1vw, 2rem) !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  color: var(--p17-text) !important;
  margin: 0 0 16px !important;
  transition: color .3s ease;
}
.p17-feat:hover .p17-feat__t { color: var(--p17-accent) !important; }
.p17-feat__d {
  font-size: .97rem;
  line-height: 1.75;
  color: var(--p17-text-soft);
  margin-bottom: 24px;
}
.p17-feat__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--p17-accent);
}
.p17-feat__more::after {
  content: "→";
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.p17-feat:hover .p17-feat__more::after { transform: translateX(6px); }

/* ---------- La grille ---------- */
.p17-bl2-grille .p17-head { margin-bottom: 44px; }
.p17-bl2-grille .p17-posts {
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

@media (max-width: 1024px) {
  .p17-feat { grid-template-columns: 1fr; }
  .p17-feat__img img { min-height: 240px; }
  .p17-feat__body { padding: 34px 28px; }
  .p17-bl2-grille .p17-posts { grid-template-columns: repeat(2, 1fr); }
  .p17-s-bl2-hero::after { width: 190px; height: 213px; opacity: .05; }
}
@media (max-width: 700px) {
  .p17-bl2-grille .p17-posts { grid-template-columns: 1fr; }
  .p17-s-bl2-hero, .p17-s-bl2-une, .p17-s-bl2-grille, .p17-s-bl2-cta {
    padding-left: 20px !important; padding-right: 20px !important;
  }
}

/* L'article à la une : plus d'effet au survol.
   Seule la flèche du « Lire l'article » bouge encore — c'est l'affordance
   minimale pour signaler que la carte est cliquable. */
.p17-feat:hover {
  transform: none !important;
  box-shadow: 0 2px 6px rgba(51,46,42,.04), 0 20px 50px rgba(51,46,42,.08) !important;
}
.p17-feat:hover .p17-feat__img img {
  transform: none !important;
  filter: saturate(.75) contrast(1.08) brightness(.92) sepia(.14) hue-rotate(-5deg) !important;
}
.p17-feat:hover .p17-feat__t {
  color: var(--p17-text) !important;
}
.p17-feat .p17-feat__img img { transition: none !important; }
.p17-feat { transition: none !important; }

/* La flèche reste animée */
.p17-feat:hover .p17-feat__more { color: var(--p17-accent) !important; }
.p17-feat:hover .p17-feat__more::after { transform: translateX(6px); }

/* =========================================================
   ICÔNES — centrage et équilibre optique
   · le centrage flex des pastilles était écrasé par une règle du thème
   · les Healthicons (estomac, grossesse) sont des contours PLEINS :
     à taille égale ils pèsent plus lourd que les Tabler au trait.
     On les réduit légèrement pour rétablir l'équilibre.
   ========================================================= */
.p17-benef__ic,
.p17-indc__ic,
.p17-ct-card__ic,
.p17-pq-hero__ic,
.p17-ph-principe__ic,
.p17-ph-parcours__ic,
.p17-ph-vision__ic,
.p17-card__ic,
.p17-reassure__ic,
.p17-hdr__tel-ic {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

.p17-benef__ic > svg,
.p17-indc__ic > svg,
.p17-ct-card__ic > svg,
.p17-pq-hero__ic > svg,
.p17-ph-principe__ic > svg,
.p17-ph-parcours__ic > svg,
.p17-ph-vision__ic > svg,
.p17-card__ic > svg,
.p17-reassure__ic > svg {
  display: block !important;
  margin: 0 !important;
  flex: none;
}

/* Les icônes en aplat (viewBox 48) : un cran plus petites pour peser
   autant que les icônes au trait qui les entourent. */
.p17-indc__ic > svg[viewBox="0 0 48 48"] { width: 26px !important; height: 26px !important; }
.p17-benef__ic > svg[viewBox="0 0 48 48"] { width: 23px !important; height: 23px !important; }
.p17-pq-hero__ic > svg[viewBox="0 0 48 48"] { width: 23px !important; height: 23px !important; }
.p17-card__ic > svg[viewBox="0 0 48 48"] { width: 23px !important; height: 23px !important; }
.p17-spec__ic > svg[viewBox="0 0 48 48"] { width: 40px !important; height: 40px !important; }

/* =========================================================
   ⬛ CONTENU SEO — déroulé de séance · FAQ · ancrage local
   Du texte long, lisible : mesure courte, interlignage généreux.
   ========================================================= */
.p17-seo {
  max-width: 780px;
  margin: 0 auto;
}
.p17-seo .p17-h2 { margin: 0; text-wrap: balance; }
.p17-seo p {
  margin: 0 0 20px;
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--p17-text);
  opacity: .88;
}
.p17-seo p:last-child { margin-bottom: 0; }
.p17-seo strong { font-weight: 600; opacity: 1; }

/* « Ce qu'il faut savoir » : le texte d'origine, sur deux colonnes */
.p17-seo--cols { max-width: 1080px; }
.p17-seo--cols .p17-seo__cols {
  columns: 2;
  column-gap: 56px;
}
.p17-seo--cols .p17-seo__cols p { break-inside: avoid; }

/* ---------- FAQ ---------- */
.p17-faq {
  max-width: 820px;
  margin: 0 auto;
}
.p17-faq .p17-head { margin-bottom: 36px; }
.p17-faq__item {
  border-bottom: 1px solid rgba(51, 46, 42, .12);
}
.p17-faq__item:first-of-type { border-top: 1px solid rgba(51, 46, 42, .12); }

.p17-faq__item summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 44px 24px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--p17-font-display, inherit);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--p17-text);
  transition: color .2s ease;
}
.p17-faq__item summary:hover { color: var(--p17-accent); }
.p17-faq__item summary:focus-visible {
  outline: 2px solid var(--p17-accent);
  outline-offset: 3px;
}
.p17-faq__item summary::-webkit-details-marker { display: none; }

/* Deux traits superposés : le vertical pivote et disparaît sous l'horizontal,
   le « + » devient un « − ». Animation de transform seule, jamais de layout. */
.p17-faq__item summary::before,
.p17-faq__item summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--p17-accent);
  border-radius: 2px;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.p17-faq__item summary::before { transform: translateY(-50%); }
.p17-faq__item summary::after  { transform: translateY(-50%) rotate(90deg); }
.p17-faq__item[open] summary::after { transform: translateY(-50%) rotate(0deg); }
.p17-faq__item > div {
  padding: 0 4px 26px;
}
.p17-faq__item > div p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--p17-text);
  opacity: .84;
  max-width: 68ch;
}
.p17-faq__item > div strong { font-weight: 600; opacity: 1; }

@media (max-width: 900px) {
  .p17-seo--cols .p17-seo__cols { columns: 1; }
  .p17-faq__item summary { font-size: 1.0625rem; padding: 20px 2px; }
  .p17-seo p, .p17-faq__item > div p { font-size: 1rem; }
}

/* =========================================================
   ⬛ CONTACT — la plaque de la porte et la bande « Le lieu »
   ========================================================= */

.p17-ct-infos .p17-map { margin-top: 30px; display: block; }

/* ---------- La bande « Le lieu » ---------- */
.p17-ct-lieu .p17-head { margin-bottom: 48px; }
.p17-ct-gal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.p17-ct-gal figure {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  box-shadow: 0 4px 14px rgba(51,46,42,.05), 0 22px 46px rgba(51,46,42,.08);
}
.p17-ct-gal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* La photo du milieu descend un peu : la bande respire, elle ne s'aligne pas au cordeau. */
.p17-ct-gal figure:nth-child(2) { transform: translateY(28px); }

@media (max-width: 1024px) {
  .p17-ct-top { grid-template-columns: 1fr; gap: 40px; }
  .p17-ct-title { max-width: 100%; }
  .p17-ct-lead { max-width: 100%; }
  .p17-ct-top__img { aspect-ratio: 16 / 10; }
  .p17-ct-gal { grid-template-columns: 1fr; gap: 18px; }
  .p17-ct-gal figure { aspect-ratio: 16 / 10; }
  .p17-ct-gal figure:nth-child(2) { transform: none; }
}

/* =========================================================
   ⬛ PAGE PRENDRE RENDEZ-VOUS
   Deux voies, une seule mise en avant : celle qui aboutit sans lui.
   ========================================================= */
.p17-s-rdv-hero, .p17-s-rdv-voies, .p17-s-rdv-freins,
.p17-s-rdv-engag, .p17-s-rdv-fin {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  left: 0 !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  position: relative;
  overflow: hidden;
}
.p17-s-rdv-hero > .elementor-container,
.p17-s-rdv-voies > .elementor-container,
.p17-s-rdv-freins > .elementor-container,
.p17-s-rdv-engag > .elementor-container,
.p17-s-rdv-fin > .elementor-container {
  max-width: 1240px !important;
  margin: 0 auto !important;
}

/* ---------- Hero ---------- */
.p17-rdv-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.p17-rdv-hero__img {
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 6px 18px rgba(51,46,42,.06), 0 30px 60px rgba(51,46,42,.10);
}
.p17-rdv-hero__img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* ---------- Les deux voies ---------- */
.p17-voies {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
}
.p17-voie {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--p17-line);
  border-radius: 24px;
  padding: 40px 36px 34px;
  box-shadow: 0 2px 6px rgba(51,46,42,.03), 0 18px 40px rgba(51,46,42,.06);
}
/* La voie qui aboutit sans lui porte l'accent : liseré plein, ombre plus large. */
.p17-voie--primaire {
  border-color: rgba(179,98,76,.30);
  box-shadow: 0 4px 12px rgba(179,98,76,.07), 0 26px 56px rgba(51,46,42,.10);
}
.p17-voie__ic {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  border-radius: 18px;
  background: var(--p17-bg-2);
  color: var(--p17-accent);
  margin-bottom: 26px;
}
/* Une règle globale colore .p17-ic en terracotta directement sur le <svg> :
   hériter du parent ne suffit pas, il faut viser le svg. */
.p17-voie--primaire .p17-voie__ic { background: var(--p17-accent); }
.p17-voie--primaire .p17-voie__ic svg,
.p17-voie--primaire .p17-voie__ic .p17-ic {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}
.p17-voie__t {
  font-family: var(--p17-font-display, serif) !important;
  font-size: 1.75rem !important;
  font-weight: 300 !important;
  color: var(--p17-text) !important;
  margin: 0 0 14px !important;
}
.p17-voie__d {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--p17-text);
  opacity: .84;
  margin: 0 0 26px;
}
.p17-voie__l {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  border-top: 1px solid var(--p17-line);
}
.p17-voie__l li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--p17-line);
  font-size: .9375rem;
  color: var(--p17-text);
  opacity: .82;
}
.p17-voie__l svg { flex: 0 0 auto; color: var(--p17-accent); }

/* Le bouton est poussé en bas : les deux cartes s'alignent quoi qu'il arrive. */
.p17-voie__cta {
  margin-top: auto;
  width: 100%;
  justify-content: center;
  text-align: center;
}
.p17-voie__note {
  margin: 14px 0 0;
  font-size: .8125rem;
  line-height: 1.5;
  text-align: center;
  color: var(--p17-text);
  opacity: .6;
}

/* ---------- Les trois freins ---------- */
.p17-freins {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.p17-frein {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.p17-frein__ic {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--p17-bg-2);
  color: var(--p17-accent);
  margin-bottom: 6px;
}
.p17-frein strong {
  font-family: var(--p17-font-display, serif);
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--p17-text);
}
.p17-frein span:last-child {
  font-size: .9375rem;
  line-height: 1.75;
  color: var(--p17-text);
  opacity: .78;
}

/* ---------- Le dernier appel ---------- */
.p17-rdv-fin {
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
}
.p17-rdv-fin .p17-rule { margin-left: auto; margin-right: auto; }
.p17-rdv-fin p {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--p17-text);
  opacity: .84;
  margin: 0 0 32px;
}

@media (max-width: 1024px) {
  .p17-rdv-hero { grid-template-columns: 1fr; gap: 40px; }
  .p17-rdv-hero__img { aspect-ratio: 16 / 10; }
  .p17-voies { grid-template-columns: 1fr; }
  .p17-freins { grid-template-columns: 1fr; gap: 34px; }
}

/* ---------- L'engagement de réservation ----------
   Ni caché ni menaçant : un encart sobre, lisible, à hauteur d'œil avant
   le dernier appel à réserver.
   Pas de liseré latéral : la pastille à icône et le fond teinté suffisent
   à le détacher. */
.p17-engag {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  max-width: 860px;
  margin: 0 auto;
  padding: 26px 30px;
  background: var(--p17-bg-2);
  border: 1px solid var(--p17-line);
  border-radius: 16px;
}
.p17-engag__ic {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: #FFFFFF;
  color: var(--p17-accent);
}
.p17-engag__txt > strong {
  display: block;
  font-family: var(--p17-font-display, serif);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--p17-text);
  margin-bottom: 8px;
}
.p17-engag__txt p {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.75;
  color: var(--p17-text);
  opacity: .82;
}
.p17-engag__txt p strong { font-weight: 600; opacity: 1; }

@media (max-width: 700px) {
  .p17-engag { flex-direction: column; gap: 16px; padding: 22px 22px; }
}

/* =========================================================
   ⬛ ARTICLE — template single (p17/single.php)
   Éditorial, large, aéré. Colonne de texte lisible + colonne latérale
   collante (sommaire + rendez-vous) qui occupe les côtés.
   ========================================================= */
.p17-art {
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 40px 8px;
}

/* ---------- En-tête, centré et aéré ---------- */
.p17-art__hd { margin-bottom: 48px; }
.p17-art__back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--p17-font-body, system-ui);
  font-size: 14px; color: var(--p17-muted) !important;
  text-decoration: none; margin-bottom: 40px;
  transition: color .2s, gap .2s;
}
.p17-art__back:hover { color: var(--p17-accent) !important; gap: 12px; }

.p17-art__hd-in { max-width: 800px; margin: 0 auto; text-align: center; }

.p17-art__cat {
  display: inline-block;
  font-family: var(--p17-font-body, system-ui);
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--p17-accent) !important; text-decoration: none;
  padding: 6px 15px; border-radius: 999px; background: rgba(192,112,90,.09);
  margin-bottom: 22px;
}
.p17-art__cat:hover { background: rgba(192,112,90,.16); }

.p17-art__title {
  font-family: var(--p17-font-display) !important;
  font-size: clamp(2.2rem, 4.6vw, 3.5rem) !important;
  font-weight: 400 !important; line-height: 1.1 !important;
  letter-spacing: -.015em; color: var(--p17-text) !important;
  margin: 0 0 26px !important; text-wrap: balance;
}
.p17-art__meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--p17-font-body, system-ui);
  font-size: 14px; color: var(--p17-muted);
}
.p17-art__meta strong { color: var(--p17-text-soft); font-weight: 600; }
.p17-art__dot { opacity: .5; }

/* ---------- Image à la une, pleine largeur, JAMAIS tuilée ---------- */
.p17-art__cover {
  margin: 0 0 60px;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: var(--p17-shadow);
}
.p17-art__cover img {
  display: block; width: 100%; height: auto;
  max-height: 540px; object-fit: cover;
  background: var(--p17-bg-2);
}

/* ---------- Deux colonnes : texte + colonne latérale ---------- */
.p17-art__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 316px;
  gap: 72px;
  align-items: start;
}

.p17-art__body {
  font-family: var(--p17-font-body, system-ui);
  font-size: 1.09rem; line-height: 1.9; color: var(--p17-text-soft);
}
.p17-art__body > p { margin: 0 0 26px; max-width: 70ch; text-wrap: pretty; }
.p17-art__body strong { color: var(--p17-text); font-weight: 600; }
.p17-art__body a {
  color: var(--p17-accent); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.p17-art__body a:hover { color: var(--p17-accent-h); }
.p17-art__body > h2:first-child { margin-top: 0 !important; }
.p17-art__body h2 {
  font-family: var(--p17-font-display) !important;
  font-size: clamp(1.7rem, 3vw, 2.2rem) !important;
  font-weight: 400 !important; line-height: 1.2 !important;
  color: var(--p17-text) !important;
  margin: 56px 0 22px !important; scroll-margin-top: 100px; text-wrap: balance;
}
.p17-art__body h3 {
  font-family: var(--p17-font-display) !important;
  font-size: 1.45rem !important; font-weight: 500 !important;
  color: var(--p17-text) !important; margin: 42px 0 16px !important;
}
.p17-art__body ul, .p17-art__body ol { margin: 0 0 28px; padding-left: 4px; max-width: 68ch; }
.p17-art__body li { position: relative; list-style: none; padding-left: 30px; margin-bottom: 13px; line-height: 1.75; }
.p17-art__body ul li::before { content: ""; position: absolute; left: 6px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--p17-sage); }
.p17-art__body ol { counter-reset: p17li; }
.p17-art__body ol li { counter-increment: p17li; }
.p17-art__body ol li::before {
  content: counter(p17li); position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(192,112,90,.12); color: var(--p17-accent);
  font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center;
}
.p17-art__body blockquote {
  margin: 40px 0; padding: 6px 0 6px 30px;
  border-left: 2px solid var(--p17-accent);
  font-family: var(--p17-font-display); font-size: 1.5rem; line-height: 1.5;
  color: var(--p17-text); font-style: italic;
}
.p17-art__body img { max-width: 100%; height: auto; border-radius: 18px; margin: 14px 0 34px; }

/* Le CTA glissé dans le fil */
.p17-art__inline {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin: 44px 0; padding: 26px 30px;
  background: var(--p17-bg-2); border: 1px solid var(--p17-line); border-radius: 20px;
}
.p17-art__inline strong { display: block; font-family: var(--p17-font-display); font-size: 1.25rem; color: var(--p17-text); margin-bottom: 4px; }
.p17-art__inline span { font-size: 14px; color: var(--p17-text-soft); }

/* ---------- La colonne latérale collante ---------- */
.p17-art__aside-stick { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 26px; }

.p17-toc { border-left: 1px solid var(--p17-line); padding-left: 22px; }
.p17-toc__k {
  font-family: var(--p17-font-body, system-ui);
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--p17-muted); margin: 0 0 14px;
}
.p17-toc ul { list-style: none; margin: 0; padding: 0; }
.p17-toc li { margin-bottom: 11px; }
.p17-toc a {
  font-family: var(--p17-font-body, system-ui);
  font-size: 14px; line-height: 1.4; color: var(--p17-text-soft) !important;
  text-decoration: none; transition: color .2s;
}
.p17-toc a:hover { color: var(--p17-accent) !important; }

.p17-art__card {
  background: linear-gradient(160deg, #F6EBE4, #EFE0D3);
  border-radius: 24px; padding: 28px 26px;
}
.p17-art__card-k {
  font-family: var(--p17-font-body, system-ui);
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--p17-accent); margin: 0 0 10px;
}
.p17-art__card-t { font-family: var(--p17-font-display); font-size: 1.45rem; line-height: 1.2; color: var(--p17-text); margin: 0 0 12px; }
.p17-art__card-d { font-size: 14px; line-height: 1.65; color: var(--p17-text-soft); margin: 0 0 20px; }
.p17-art__card .p17-btn { width: 100%; justify-content: center; }
.p17-art__tel {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--p17-font-display); font-size: 1.15rem;
  color: var(--p17-text) !important; text-decoration: none;
}
.p17-art__tel svg { color: var(--p17-accent); }
.p17-art__card .p17-art__tel { margin: 14px 0 0; justify-content: center; width: 100%; }
.p17-art__card-rev { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(51,46,42,.10); }

/* ---------- Bande finale, pleine largeur ---------- */
.p17-art__band {
  width: 100vw; max-width: 100vw; position: relative;
  margin: 88px 0 0; margin-left: calc(50% - 50vw); left: 0;
  background: var(--p17-text);
  padding: 72px 40px;
}
.p17-art__band-in {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center;
}
.p17-art__band h2 { font-family: var(--p17-font-display) !important; font-size: clamp(1.8rem,3.4vw,2.6rem) !important; font-weight: 400 !important; color: #FBF7F2 !important; margin: 0 0 12px !important; }
.p17-art__band p { margin: 0; font-size: 16px; line-height: 1.7; color: rgba(251,247,242,.72); max-width: 48ch; }
.p17-art__band-act { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.p17-art__band .p17-art__tel { color: #FBF7F2 !important; }
.p17-art__band .p17-art__tel svg { color: var(--p17-accent); }

/* ---------- Articles liés ---------- */
.p17-art__related {
  width: 100vw; max-width: 100vw; position: relative;
  margin: 0; margin-left: calc(50% - 50vw); left: 0;
  background: var(--p17-bg-2);
  padding: 80px 40px 96px;
}
.p17-art__related-in { max-width: 1240px; margin: 0 auto; }
.p17-art__related-k { font-family: var(--p17-font-body, system-ui); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--p17-accent); margin: 0 0 10px; }
.p17-art__related-h { font-family: var(--p17-font-display) !important; font-size: clamp(1.6rem, 3vw, 2.2rem) !important; font-weight: 400 !important; color: var(--p17-text) !important; margin: 0 0 44px !important; }

@media (max-width: 980px) {
  .p17-art__main { grid-template-columns: 1fr; gap: 40px; }
  /* La colonne latérale passe sous le texte et ne colle plus. */
  .p17-art__aside-stick { position: static; flex-direction: column; }
  .p17-toc { display: none; } /* le sommaire n'a de sens qu'en colonne */
}
@media (max-width: 720px) {
  .p17-art { padding: 36px 20px 0; }
  .p17-art__band-in { grid-template-columns: 1fr; gap: 26px; }
  .p17-art__inline { flex-direction: column; align-items: stretch; }
  .p17-art__inline .p17-btn { justify-content: center; }
  .p17-art__related { padding: 56px 20px 64px; }
}

/* ═══ INDICATEUR DE DÉFILEMENT ════════════════════════════════════════
   Posé au bas du héros de chaque page. Ce n'est pas un ornement : sur des
   pages longues, il dit au lecteur qu'il reste du contenu sous la ligne
   de flottaison, et il est cliquable — il fait descendre à la section
   suivante.
   Le mouvement va vers le bas parce qu'il désigne la direction du geste
   attendu. C'est la seule raison de l'animer. */
.p17-scroll{
  position:absolute; left:0; bottom:16px;
  display:inline-flex; flex-direction:column; align-items:flex-start; gap:9px;
  text-decoration:none; color:inherit; z-index:3;
  opacity:.72; transition:opacity .45s ease;
}
.p17-scroll:hover{ opacity:1; }
.p17-scroll[data-parti]{ opacity:0; pointer-events:none; }

.p17-scroll__t{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:500; white-space:nowrap;
}

/* Un filet où descend un segment clair : la direction est lisible sans
   flèche, et sans le rebond qui traîne sur la moitié des sites. */
.p17-scroll__l{
  position:relative; width:2px; height:52px; overflow:hidden; border-radius:2px;
}
.p17-scroll__l::before{
  content:''; position:absolute; inset:0; background:currentColor; opacity:.16;
}
.p17-scroll__l::after{
  content:''; position:absolute; left:0; right:0; top:0; height:40%;
  background:var(--p17-accent, currentColor); opacity:1;
  animation:p17-coule 2.4s cubic-bezier(.45,0,.25,1) infinite;
}
@keyframes p17-coule{
  0%   { transform:translateY(-100%); }
  60%  { transform:translateY(250%); }
  100% { transform:translateY(250%); }
}

@media(max-width:768px){
  .p17-scroll{ bottom:14px; }
  .p17-scroll__l{ height:34px; }
  .p17-scroll__t{ font-size:.64rem; letter-spacing:.1em; }
}

/* Le mouvement est une aide, pas une condition : sans lui l'indicateur
   reste lisible et cliquable. Le CSS du site n'avait aucune règle
   prefers-reduced-motion — celle-ci est la première. */
@media(prefers-reduced-motion:reduce){
  .p17-scroll{ transition:none; }
  .p17-scroll__l::after{ animation:none; transform:translateY(60%); }
}

/* ═══ POSITIONNEMENT : la méthode ═════════════════════════════════════
   Première version : une colonne de 760 px dans une section de 1344 —
   le contenu dérivait à gauche et laissait 584 px de vide à droite.
   Les deux sections sont maintenant en deux colonnes, comme le reste
   de la page. */

/* ── une douleur a rarement une seule cause ── */
.p17-cause{
  display:grid; grid-template-columns:1fr; gap:clamp(28px,3.5vw,56px);
  align-items:center;
}
@media(min-width:900px){ .p17-cause{ grid-template-columns:1.05fr .95fr; } }
.p17-cause__t h2{ max-width:15ch; }
.p17-cause__t .p17-lead{ margin:14px 0 18px; max-width:42ch; }
.p17-cause__t p{ font-size:.98rem; line-height:1.8; color:var(--p17-text-soft); max-width:52ch; }

.p17-cause__z{
  background:var(--p17-bg-2); border:1px solid var(--p17-line);
  border-radius:24px; padding:32px 30px;
}
.p17-cause__k{
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--p17-accent); margin:0 0 18px; font-weight:600;
}
.p17-cause__zones{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:9px;
}
.p17-cause__zones li{
  padding:9px 17px; border-radius:999px;
  border:1px solid var(--p17-line); background:#fff;
  font-size:.92rem; color:var(--p17-text);
}

/* ── le déroulé d'un suivi ──
   Les numéros sont légitimes : c'est une vraie séquence, et l'ordre porte
   l'information. Ce n'est pas un décor. */
.p17-suivi{
  display:grid; grid-template-columns:1fr; gap:clamp(30px,4vw,60px);
  align-items:start;
}
@media(min-width:900px){
  .p17-suivi{ grid-template-columns:.9fr 1.1fr; }
  .p17-suivi__t{ position:sticky; top:110px; }
}
.p17-suivi__t h2{ max-width:14ch; }
.p17-suivi__t .p17-lead{ margin:14px 0 0; max-width:40ch; }

.p17-etapes{ list-style:none; margin:0; padding:0; counter-reset:e; }
.p17-etapes li{ counter-increment:e; position:relative; padding:0 0 26px 56px; }
.p17-etapes li::before{
  content:counter(e); position:absolute; left:0; top:-2px;
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--p17-accent-soft); color:var(--p17-accent);
  font-size:.86rem; font-weight:600;
}
/* le filet qui relie les étapes : la progression est le sujet */
.p17-etapes li::after{
  content:''; position:absolute; left:17px; top:34px; bottom:6px;
  width:1px; background:var(--p17-line);
}
.p17-etapes li:last-child{ padding-bottom:0; }
.p17-etapes li:last-child::after{ display:none; }
.p17-etapes b{ display:block; color:var(--p17-text); font-weight:600; margin-bottom:4px; }
.p17-etapes span{ display:block; font-size:.93rem; line-height:1.7; color:var(--p17-text-soft); }
.p17-etapes--fin::before{ background:var(--p17-accent) !important; color:#fff !important; }
.p17-etapes--fin b{ color:var(--p17-accent); }

/* ── combien de séances ── */
.p17-combien{
  margin-top:28px; padding:26px 28px; border-radius:20px;
  background:var(--p17-bg-2); border:1px solid var(--p17-line);
}
.p17-combien h3{
  font-family:var(--p17-font-display, serif); font-size:1.3rem; font-weight:400;
  color:var(--p17-text); margin:0 0 12px;
}
.p17-combien p{ font-size:.93rem; line-height:1.75; color:var(--p17-text-soft); margin:0 0 12px; }
.p17-combien p:last-child{ margin-bottom:0; }
.p17-combien b{ color:var(--p17-text); font-weight:600; }

@media(max-width:700px){
  .p17-cause__z{ padding:26px 22px; }
  .p17-combien{ padding:22px 20px; }
  .p17-etapes li{ padding-left:46px; }
}

/* ── formes graphiques des sections ajoutées ─────────────────────────
   Propres à Paris 17 : convergence (plusieurs causes -> un point) et
   progression décroissante (le suivi s'arrête). currentColor pour que
   le tracé suive la variante de palette active. */
.p17-conv, .p17-prog{ color: var(--p17-accent); }
.p17-conv svg, .p17-prog svg{ display: block; width: 100%; height: auto; overflow: hidden; }

.p17-conv{ margin: clamp(26px, 3vw, 38px) 0 0; max-width: 480px; }
.p17-conv__l{
  font-family: var(--p17-font-body); font-size: 13px; letter-spacing: .02em;
  fill: var(--p17-text-soft, #5B6670);
}

.p17-prog{ margin: clamp(24px, 2.8vw, 34px) 0 0; max-width: 470px; }
.p17-prog__l{
  font-family: var(--p17-font-body); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; fill: var(--p17-text-soft, #5B6670);
}

@media(max-width: 900px){
  .p17-conv__l{ font-size: 15px; }
  .p17-prog__l{ font-size: 14px; }
}