/* Déclic Pascaline — site fixes on top of the Femia theme. Bump ?v= on redeploy.

   The fabricated / non-verified demo content (hero stat counters, pricing tiers,
   testimonials 3–6, testimonial avatars, demo phone, dead social links) used to
   be hidden here with display:none. Hidden markup is still crawlable, so it was
   DELETED for real before go-live — see clone/strip-hidden.py. Nothing to hide. */

/* long localized menu labels must not wrap */
#menu-primary-menu > li > a { white-space: nowrap; }

/* ============================================================
   blog-core pages (.dp-*) — on-brand article + listing layout.
   Cream #F7F3EC, teal #2F6F73, Inter (inherited from the theme).
   ============================================================ */
.dp-wrap { max-width: 1180px; margin: 0 auto; padding: 64px 24px 80px; color: #2b2b2b; }

/* --- article --- */
.dp-article { max-width: 760px; margin: 0 auto; }
.dp-breadcrumb { font-size: 14px; color: #7a7a7a; margin-bottom: 28px; }
.dp-breadcrumb a { color: #2F6F73; text-decoration: none; }
.dp-breadcrumb span { color: #9a9a9a; }
.dp-cat { color: #2F6F73; font-weight: 600; font-size: 14px; letter-spacing: .04em;
  text-transform: uppercase; margin: 0 0 10px; }
.dp-title { font-size: clamp(30px, 4vw, 44px); line-height: 1.12; margin: 0 0 18px; color: #1c2b2b; }
.dp-lede { font-size: 19px; line-height: 1.55; color: #555; margin: 0 0 18px; }
.dp-meta { font-size: 14px; color: #8a8a8a; margin: 0 0 32px; }
.dp-hero { width: 100%; height: auto; border-radius: 16px; margin: 0 0 40px; display: block; }
.dp-body { font-size: 17px; line-height: 1.75; }
.dp-body h2 { font-size: 26px; line-height: 1.25; margin: 44px 0 14px; color: #1c2b2b; }
.dp-body h3 { font-size: 21px; margin: 32px 0 10px; color: #234; }
.dp-body p { margin: 0 0 18px; }
.dp-body a { color: #2F6F73; text-underline-offset: 3px; }
.dp-body ul, .dp-body ol { margin: 0 0 20px; padding-left: 24px; }
.dp-body li { margin: 0 0 8px; }
.dp-body blockquote { margin: 28px 0; padding: 16px 24px; border-left: 4px solid #2F6F73;
  background: #F7F3EC; border-radius: 0 10px 10px 0; font-style: italic; color: #3a3a3a; }
.dp-body img { max-width: 100%; height: auto; border-radius: 12px; }
.dp-back { margin-top: 48px; }
.dp-back a { color: #2F6F73; text-decoration: none; font-weight: 600; }

/* --- listing --- */
.dp-list-hero { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.dp-list-hero .dp-crumb { font-size: 14px; color: #7a7a7a; margin: 0 0 14px; }
.dp-list-hero h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.1; margin: 0 0 16px; color: #1c2b2b; }
.dp-list-hero p { font-size: 18px; color: #555; margin: 0; }
.dp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 900px) { .dp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .dp-grid { grid-template-columns: 1fr; } }
.dp-card { display: flex; flex-direction: column; background: #fff; border-radius: 16px;
  overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 2px 14px rgba(0,0,0,.05);
  transition: transform .18s ease, box-shadow .18s ease; }
.dp-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,.10); }
.dp-card-img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }
.dp-card-body { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 10px; }
.dp-card-cat { color: #2F6F73; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.dp-card-title { font-size: 19px; line-height: 1.3; margin: 0; color: #1c2b2b; }
.dp-card-desc { font-size: 15px; line-height: 1.55; color: #666; margin: 0; }
.dp-card-more { margin-top: 6px; color: #2F6F73; font-weight: 600; font-size: 15px; }
.dp-pager { display: flex; justify-content: center; align-items: center; gap: 28px; margin-top: 56px; }
.dp-pager a { color: #2F6F73; font-weight: 600; text-decoration: none; }
.dp-pageno { color: #8a8a8a; font-size: 14px; }

/* home blog teaser: equal-height cards, readmore aligned to the bottom */
.jkit-posts { align-items: stretch !important; }
.jkit-posts .jkit-post { height: 100%; display: flex; flex-direction: column; }
.jkit-posts .jkit-postblock-content { flex: 1 1 auto; display: flex; flex-direction: column; }
.jkit-posts .jkit-post-meta-bottom { margin-top: auto; }

/* dedicated contact section (above the footer) with embedded OpnForm */
.dp-contact-section { background: #F7F3EC; padding: 84px 24px 96px; }
.dp-contact-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.dp-contact-eyebrow { color: #2F6F73; font-weight: 600; font-size: 14px; letter-spacing: .08em;
  margin: 0 0 12px; }
.dp-contact-title { font-size: clamp(28px, 4vw, 40px); line-height: 1.15; color: #1c2b2b; margin: 0 0 14px; }
.dp-contact-sub { font-size: 17px; line-height: 1.6; color: #555; margin: 0 0 36px; }
.dp-contactform { background: #fff; border-radius: 18px; padding: 14px 26px;
  box-shadow: 0 6px 30px rgba(0,0,0,.07); text-align: left; }
.dp-contactform iframe { width: 100%; height: 380px; border: 0; display: block; background: transparent; }
@media (max-width: 600px) { .dp-contactform iframe { height: 440px; } .dp-contact-section { padding: 60px 18px 72px; } }

/* client feedback r3: the hero carries 4 module badges, not 2 (positions only —
   the card styling still comes from .elementor-element-1c5a1925 in post-36.css) */
.elementor-36 .elementor-element.dp-badge { top: auto; bottom: auto; }
body:not(.rtl) .elementor-36 .elementor-element.dp-badge { left: auto; right: auto; }
.elementor-36 .elementor-element.dp-badge--m1 { top: 1rem; }
body:not(.rtl) .elementor-36 .elementor-element.dp-badge--m1 { left: 1rem; }
.elementor-36 .elementor-element.dp-badge--m2 { top: 1rem; }
body:not(.rtl) .elementor-36 .elementor-element.dp-badge--m2 { right: 1rem; }
.elementor-36 .elementor-element.dp-badge--m3 { bottom: 30%; }
body:not(.rtl) .elementor-36 .elementor-element.dp-badge--m3 { right: 1rem; }
.elementor-36 .elementor-element.dp-badge--m4 { bottom: 1.5rem; }
body:not(.rtl) .elementor-36 .elementor-element.dp-badge--m4 { left: 1rem; }

/* r3: her À propos is now multi-paragraph — Elementor's text-editor <p> has no bottom margin */
.elementor-36 .elementor-element-51aabe62 p + p { margin-top: 1em; }

/* 2026-08-05 — deliberately override Elementor's reduced-motion kill-switch (operator decision).
   elementor/assets/css/frontend.min.css ships:
       @media (prefers-reduced-motion:reduce){ .animated{ animation:none!important } }
   iOS reports `reduce` for EVERY device in Low Power Mode, not only for visitors who asked for
   it, so that rule silently killed every entrance animation on most phones while desktop looked
   fine. The only motion on this site is a 1.25s fade-up: no parallax, no autoplay, nothing
   vestibular-triggering. Accepted trade-off: a visitor who genuinely set the preference still
   gets the fades.
   `animation:none` also clears animation-name and duration, so both must be restored. Only two
   names are in use (fadeInUp x53, fadeIn x7). .animated.fadeInUp (0,2,0) beats .animated (0,1,0)
   regardless of load order; the duration mirrors Elementor's own .animated{animation-duration:1.25s}. */
@media (prefers-reduced-motion: reduce) {
  .animated { animation-duration: 1.25s !important; }
  .animated.fadeInUp { animation-name: fadeInUp !important; }
  .animated.fadeIn { animation-name: fadeIn !important; }
  html { scroll-behavior: smooth; }
}

/* r6 (2026-08-11) — témoignages vidéo (OpnForm #86).
   Five 9:16 Shorts. The poster is a local JPEG and the YouTube iframe is built only on
   click (custom-temoignages.js), so an idle visitor sends nothing to youtube.com.
   Plain dp- markup, like every block added since r2 — these classes are ours, nothing
   in Elementor or the theme claims them, so (0,2,0) under .dp-vtem is enough. It is
   there to beat the theme's element-level ul/li/blockquote/button rules, not Elementor.
   Card skin (bg, border, radius, hover shadow) mirrors .elementor-element-2dd98829 in
   post-36.css so the video cards and the two written cards read as one set. */
.dp-vtem { width: 100%; }
/* r7: flex-wrap rather than a fixed column count, because the number of videos is not
   fixed — a 6th (Widad's) is announced and she has 8 participantes filmées. A grid with
   `repeat(N, 1fr)` would need editing for each arrival and leaves a left-aligned hole on
   the last row; wrapping and centring absorbs any count. Measured at the 1240px
   container: 5 cards -> 237px each, 6 cards -> 193px each, both on a single row. */
.dp-vtem .dp-vtem-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 24px;
  list-style: none; margin: 0; padding: 0;
}
.dp-vtem .dp-vtem-card {
  flex: 1 1 180px; max-width: 240px;
  list-style: none; margin: 0; display: flex; flex-direction: column; gap: 12px;
  background: #f7f3ec; border: 1px solid #00000008; border-radius: 8px;
  padding: 12px 12px 18px;
}
.dp-vtem .dp-vtem-card:hover { box-shadow: 0 5px 20px 0 rgba(221, 126, 124, .1); }

/* the poster button and the iframe that replaces it must occupy the same box, or the
   card jumps by ~370px at the moment of the click */
.dp-vtem .dp-vtem-play,
.dp-vtem .dp-vtem-frame {
  display: block; width: 100%; aspect-ratio: 9 / 16;
  border: 0; border-radius: 6px; overflow: hidden; background: #1c2b2b;
}
.dp-vtem .dp-vtem-play {
  position: relative; padding: 0; margin: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none; font: inherit; color: inherit;
}
.dp-vtem .dp-vtem-play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-vtem .dp-vtem-play::after {   /* darken top and bottom so the mark and duration hold */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,.42) 100%);
}
.dp-vtem .dp-vtem-icon {
  position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.92);
  color: #2F6F73; display: flex; align-items: center; justify-content: center;
  transition: transform .18s ease, background-color .18s ease;
}
.dp-vtem .dp-vtem-icon svg { width: 20px; height: 20px; margin-left: 3px; fill: currentColor; }
.dp-vtem .dp-vtem-play:hover .dp-vtem-icon,
.dp-vtem .dp-vtem-play:focus-visible .dp-vtem-icon {
  transform: translate(-50%, -50%) scale(1.08); background: #fff;
}
.dp-vtem .dp-vtem-dur {
  position: absolute; z-index: 1; right: 8px; bottom: 8px;
  background: rgba(0,0,0,.68); color: #fff; font-size: 12px; font-weight: 600;
  padding: 2px 6px; border-radius: 4px; font-variant-numeric: tabular-nums;
}
.dp-vtem .dp-vtem-quote {
  margin: 0; padding: 0; border: 0; background: none;
  font-size: 14px; line-height: 1.5; font-style: italic; color: #1c2b2b;
}
.dp-vtem .dp-vtem-src {   /* auto-top pins the formation to the bottom of an uneven card */
  margin: auto 0 0; font-size: 12px; font-weight: 600; color: #2F6F73;
}
/* basis, not column count: 3 per row on tablet, 2 on phone, whatever the card count */
@media (max-width: 1024px) {
  .dp-vtem .dp-vtem-card { flex: 1 1 calc((100% - 48px) / 3); max-width: none; }
}
@media (max-width: 640px) {
  .dp-vtem .dp-vtem-grid { gap: 16px; }
  .dp-vtem .dp-vtem-card { flex: 1 1 calc((100% - 16px) / 2); max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .dp-vtem .dp-vtem-icon { transition: none; } }

/* r7 (2026-08-11) — le crédit d'Oussama Belbecir dans « À propos » (OpnForm #81).
   Not a client testimonial: her own trainer vouching for her, so it is deliberately
   styled apart from the .dp-vtem cards — a rule and an accent bar, no card, no stars.
   It closes her bio and hands over to the « En savoir plus » button. */
.dp-credential {
  margin: 4px 0 0; padding: 4px 0 4px 20px;
  border-left: 3px solid #2F6F73;
}
.dp-credential .dp-credential-quote {
  margin: 0; padding: 0; border: 0; background: none;
  font-style: italic; font-size: 15px; line-height: 1.6; color: #1c2b2b;
}
.dp-credential .dp-credential-by {
  margin-top: 12px; display: flex; flex-direction: column; gap: 1px;
}
.dp-credential .dp-credential-name { font-weight: 700; font-size: 15px; color: #1c2b2b; }
.dp-credential .dp-credential-role { font-size: 13px; color: #2F6F73; }

/* r7: with the anonymous « Participante » card removed, the written-testimonial grid
   holds a single card. Left in Elementor's repeat(3, 1fr) it sat alone in the left
   third with two empty columns beside it. auto-fit collapses the empty tracks and
   justify-content centres what remains, so the row stays balanced at 1, 2 or 3 cards
   (she may still send a replacement for the one we removed).
   (0,3,0) to match Elementor's own selector in post-36.css, which custom-fixes.css
   is loaded after. */
.elementor-36 .elementor-element.elementor-element-302b83 {
  --e-con-grid-template-columns: repeat(auto-fit, minmax(280px, 400px));
  justify-content: center;
}

/* r9 (2026-08-12) — « À propos » (f97158a) is a grid of three tracks
   (0.75fr 0.9fr 0.75fr) but holds only two children: the bio and the portrait. The third
   track was always empty, so the whole section sat in the left two thirds with a dead
   column on the right. Two tracks, the text slightly wider than the image since the bio is
   a long read. Desktop only: post-36.css already collapses this grid to one column at
   1024px and below, and those rules live in media queries, which add no specificity — an
   unscoped override here would win over them and force two columns on phones. */
@media (min-width: 1025px) {
  .elementor-36 .elementor-element.elementor-element-f97158a {
    --e-con-grid-template-columns: 1.1fr 0.9fr;
  }
}