/* JPR Section Hubs Polish — /mouvement, /agir, /temoignages, /ressources, /actualites */
:root{
  --jpr-red:#d71920;
  --jpr-red-dark:#a90f15;
  --jpr-ink:#171717;
  --jpr-muted:#6f6f76;
  --jpr-paper:#fffaf7;
  --jpr-soft:#f7f1ee;
  --jpr-line:rgba(23,23,23,.10);
  --jpr-shadow:0 22px 60px rgba(23,23,23,.10);
  --jpr-radius:26px;
}
.jpr-section-polish{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 8% 10%, rgba(215,25,32,.09), transparent 32%),
    linear-gradient(180deg, #fffaf7 0%, #f7f1ee 100%) !important;
}
.jpr-section-polish:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(23,23,23,.035) 1px, transparent 1px),linear-gradient(90deg, rgba(23,23,23,.035) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.55), transparent 75%);
}
.jpr-section-polish>.container,.jpr-section-cta-polish>.container{position:relative;z-index:1;}
.jpr-section-polish h2,.jpr-section-polish h3{color:var(--jpr-ink);letter-spacing:-.035em;line-height:1.04;}
.jpr-section-polish h2:after,.jpr-section-polish .h4:after,.jpr-section-polish .h6:after{
  content:"";display:block;width:54px;height:4px;border-radius:999px;margin-top:.7rem;background:linear-gradient(90deg,var(--jpr-red),rgba(215,25,32,.12));
}
.jpr-section-polish .text-muted{color:var(--jpr-muted)!important;}
.jpr-section-polish .fs-5{line-height:1.72;}
.jpr-section-cta-polish{
  background:rgba(255,255,255,.88)!important;
  border-bottom:1px solid var(--jpr-line)!important;
  backdrop-filter:blur(16px);
  box-shadow:0 12px 30px rgba(23,23,23,.05);
}
.jpr-section-cta-polish .container>div{
  border:1px solid rgba(215,25,32,.10);
  border-radius:22px;
  padding:1rem 1.1rem;
  background:linear-gradient(135deg,#fff,rgba(255,250,247,.92));
}
.jpr-section-polish .card,
.jpr-section-polish .border.rounded-3,
.jpr-section-polish .border.rounded-4,
.jpr-section-polish .list-group,
.jpr-section-polish form{
  border:1px solid rgba(23,23,23,.08)!important;
  border-radius:var(--jpr-radius)!important;
  background:rgba(255,255,255,.92)!important;
  box-shadow:var(--jpr-shadow)!important;
}
.jpr-section-polish .card{transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;}
.jpr-section-polish .card:hover{transform:translateY(-4px);border-color:rgba(215,25,32,.22)!important;box-shadow:0 28px 70px rgba(23,23,23,.14)!important;}
.jpr-section-polish .card-body{padding:1.25rem 1.25rem 1.15rem;}
.jpr-section-polish .card-footer{padding-inline:1.25rem;background:transparent!important;}
.jpr-section-polish .list-group-item{
  border-color:rgba(23,23,23,.07)!important;
  background:transparent;
  transition:background .2s ease, transform .2s ease, color .2s ease;
}
.jpr-section-polish .list-group-item:hover{background:rgba(215,25,32,.055);transform:translateX(4px);}
.jpr-section-polish .list-group-item .fw-semibold{color:var(--jpr-ink);font-size:1.02rem;}
.jpr-section-polish .btn-danger,
.jpr-section-cta-polish .btn-danger{
  border-color:var(--jpr-red)!important;
  background:linear-gradient(135deg,var(--jpr-red),var(--jpr-red-dark))!important;
  color:#fff!important;
  box-shadow:0 14px 26px rgba(215,25,32,.22);
}
.jpr-section-polish .btn-outline-secondary,
.jpr-section-polish .btn-outline-dark,
.jpr-section-cta-polish .btn-outline-secondary{
  border-color:rgba(23,23,23,.18)!important;
  background:#fff!important;
  color:var(--jpr-ink)!important;
}
.jpr-section-polish .btn,.jpr-section-cta-polish .btn{border-radius:999px;font-weight:800;letter-spacing:-.015em;padding:.72rem 1.1rem;}
.jpr-section-polish a:not(.btn){color:var(--jpr-ink);}
.jpr-section-polish a:not(.btn):hover{color:var(--jpr-red);}
.jpr-section-polish .badge{border-radius:999px;padding:.45rem .65rem;font-weight:800;letter-spacing:-.01em;}
.jpr-section-polish .text-bg-dark{background:var(--jpr-ink)!important;}
.jpr-section-polish .text-bg-primary{background:var(--jpr-red)!important;}
.jpr-section-polish .text-bg-light{background:rgba(255,250,247,.95)!important;color:var(--jpr-ink)!important;}
.jpr-section-polish .alert{border-radius:22px;border:1px solid rgba(23,23,23,.08);box-shadow:0 14px 35px rgba(23,23,23,.07);}
.jpr-section-polish .form-control,.jpr-section-polish .form-select,
.jpr-section-temoignages .offcanvas .form-control,.jpr-section-temoignages .offcanvas .form-select{
  border-radius:16px;border:1px solid rgba(23,23,23,.14);padding:.82rem .95rem;box-shadow:none!important;
}
.jpr-section-polish .form-control:focus,.jpr-section-polish .form-select:focus,
.jpr-section-temoignages .offcanvas .form-control:focus,.jpr-section-temoignages .offcanvas .form-select:focus{
  border-color:rgba(215,25,32,.55);box-shadow:0 0 0 .22rem rgba(215,25,32,.10)!important;
}
.jpr-sticky-col>h2,.jpr-sticky-col>p,.jpr-sticky-col>.border{position:relative;}
.jpr-sticky-col>.border{overflow:hidden;}
.jpr-sticky-col>.border:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--jpr-red),var(--jpr-red-dark));}
.jpr-section-mouvement .col-lg-6{position:relative;}
.jpr-section-mouvement .col-lg-6>h2,.jpr-section-mouvement .col-lg-6>p{
  background:rgba(255,255,255,.9);border:1px solid rgba(23,23,23,.08);box-shadow:var(--jpr-shadow);padding:1.35rem;border-radius:var(--jpr-radius);
}
.jpr-section-mouvement .col-lg-6>h2{margin-bottom:0!important;border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0;padding-bottom:.25rem;}
.jpr-section-mouvement .col-lg-6>p{border-top-left-radius:0;border-top-right-radius:0;border-top:0;margin:0;}
.jpr-section-ressources .row.g-5.align-items-center.mb-4,
.jpr-section-actualites .row.mb-4{
  padding:1.25rem;border-radius:28px;background:rgba(255,255,255,.62);border:1px solid rgba(23,23,23,.07);box-shadow:0 18px 50px rgba(23,23,23,.06);
}
.jpr-section-temoignages .offcanvas{width:min(620px,100vw);background:#fffaf7;}
.jpr-section-temoignages .offcanvas-header{border-bottom:1px solid rgba(23,23,23,.09);background:#fff;}
.jpr-section-temoignages .offcanvas-title{font-weight:900;letter-spacing:-.04em;}
@media (max-width:767.98px){
  .jpr-section-polish{padding-top:2.4rem!important;padding-bottom:2.6rem!important;}
  .jpr-section-polish .row{--bs-gutter-y:1rem;}
  .jpr-section-polish .card-body{padding:1rem;}
  .jpr-section-cta-polish .container>div{border-radius:18px;padding:.85rem;}
  .jpr-section-polish .btn,.jpr-section-cta-polish .btn{width:100%;}
}
@media (prefers-reduced-motion:reduce){.jpr-section-polish .card,.jpr-section-polish .list-group-item{transition:none!important}.jpr-section-polish .card:hover,.jpr-section-polish .list-group-item:hover{transform:none!important}}

/* ==========================================================
   JPR Section spacing normalization — shared public pages
   Prevent Bootstrap .py-5 / template drift between Movement,
   Agir, Témoignages, Ressources, Actualités, Mon Cercle, etc.
   ========================================================== */
.jpr-uniform-hero{
  position:relative;
  padding:clamp(4.1rem,6.2vw,5.2rem) 0 clamp(3.1rem,5vw,4.2rem)!important;
  background:#fff!important;
  border-bottom:0!important;
}
.jpr-uniform-hero__accent{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg,#ff2b2b,#ff7a7a);
}
.jpr-uniform-hero__texture{
  position:absolute;
  inset:0;
  opacity:.04;
  mix-blend-mode:overlay;
  background-image:url('../img/noise.png');
}
.jpr-uniform-hero__title{
  margin:0 0 1.15rem!important;
  letter-spacing:-.035em!important;
  line-height:.98!important;
  color:#16191f!important;
}
.jpr-uniform-hero__subtitle{
  max-width:720px;
  margin:0!important;
  line-height:1.55!important;
  color:#6f7782!important;
}
.jpr-uniform-hero__fade{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:76px;
  pointer-events:none;
  background:linear-gradient(to bottom,transparent,#fff);
}

/* Same first-content rhythm on all polished section pages. */
.jpr-section-polish.py-5,
section.py-5.jpr-section-polish,
.jpr-section-polish{
  padding-top:clamp(2.85rem,4.4vw,3.75rem)!important;
  padding-bottom:clamp(3rem,4.8vw,4rem)!important;
}
.jpr-section-cta-polish .container{
  padding-top:1rem!important;
  padding-bottom:1rem!important;
}
.jpr-section-cta-polish + .jpr-section-polish{
  padding-top:clamp(2.45rem,3.6vw,3.15rem)!important;
}

/* Mon Cercle uses a dedicated wrapper; align it with the same rhythm. */
.jpr-circle-page{
  padding-top:clamp(2.85rem,4.4vw,3.75rem)!important;
  padding-bottom:clamp(3rem,4.8vw,4rem)!important;
}
.jpr-uniform-hero + .jpr-circle-page,
.jpr-uniform-hero + .jpr-section-polish,
.jpr-uniform-hero + .jpr-section-cta-polish{
  margin-top:0!important;
}

/* Remove accidental extra large gutters that make one page look taller than another. */
.jpr-section-polish .row.g-5,
.jpr-section-polish .row.g-lg-5{
  --bs-gutter-y:1.65rem;
}
.jpr-section-polish .row.mb-4,
.jpr-section-actualites .row.mb-4,
.jpr-section-ressources .row.g-5.align-items-center.mb-4{
  margin-bottom:clamp(1.35rem,2.4vw,2rem)!important;
}

@media (max-width:767.98px){
  .jpr-uniform-hero{
    padding:3.15rem 0 2.35rem!important;
  }
  .jpr-uniform-hero__title{
    margin-bottom:.85rem!important;
    line-height:1.02!important;
  }
  .jpr-uniform-hero__subtitle{
    max-width:100%;
    font-size:1rem!important;
    line-height:1.5!important;
  }
  .jpr-uniform-hero__fade{height:44px;}
  .jpr-section-polish.py-5,
  section.py-5.jpr-section-polish,
  .jpr-section-polish,
  .jpr-circle-page{
    padding-top:2.1rem!important;
    padding-bottom:2.4rem!important;
  }
  .jpr-section-cta-polish .container{
    padding-top:.75rem!important;
    padding-bottom:.75rem!important;
  }
  .jpr-section-cta-polish + .jpr-section-polish{
    padding-top:1.85rem!important;
  }
}

/* ==========================================================
   JPR 68 — Final public spacing grid
   Purpose: make Movement, Agir, Témoignages, Ressources,
   Actualités, Contact, Compte and Mon Cercle use the same
   predictable vertical rhythm instead of Bootstrap/template drift.
   ========================================================== */
:root{
  --jpr-public-hero-top: clamp(3.65rem, 5.15vw, 4.65rem);
  --jpr-public-hero-bottom: clamp(3.15rem, 4.45vw, 4rem);
  --jpr-public-section-top: clamp(3.05rem, 4.2vw, 3.85rem);
  --jpr-public-section-bottom: clamp(3.15rem, 4.6vw, 4.15rem);
  --jpr-public-cta-y: clamp(.85rem, 1.5vw, 1.15rem);
  --jpr-public-card-gap: clamp(1.4rem, 2.1vw, 1.95rem);
}
body .jpr-uniform-hero.position-relative,
body .jpr-uniform-hero{
  padding-top: var(--jpr-public-hero-top) !important;
  padding-bottom: var(--jpr-public-hero-bottom) !important;
  margin: 0 !important;
  min-height: 0 !important;
  display: block !important;
  background: #fff !important;
}
body .jpr-uniform-hero > .container{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body .jpr-uniform-hero__title{
  margin-top: 0 !important;
  margin-bottom: .95rem !important;
}
body .jpr-uniform-hero__subtitle{
  margin: 0 !important;
  max-width: 760px !important;
}
body .jpr-uniform-hero__fade{
  height: 46px !important;
  opacity: .72 !important;
}

/* First content region: one rhythm, regardless of py-5/bg-light/template. */
body .jpr-uniform-hero + .jpr-section-polish,
body .jpr-uniform-hero + section.py-5.jpr-section-polish,
body .jpr-uniform-hero + .jpr-circle-page,
body .jpr-uniform-hero + .jpr-contact-gateway,
body .jpr-uniform-hero + .jpr-account-auth,
body .jpr-uniform-hero + section.py-5,
body .jpr-uniform-hero + section.bg-light{
  margin-top: 0 !important;
}
body .jpr-section-polish,
body section.py-5.jpr-section-polish,
body .jpr-section-polish.py-5,
body .jpr-circle-page,
body .jpr-account-auth,
body .jpr-contact-gateway{
  padding-top: var(--jpr-public-section-top) !important;
  padding-bottom: var(--jpr-public-section-bottom) !important;
}

/* CTA strips under hero: compact, identical, and not a hidden extra section gap. */
body .jpr-section-cta-polish{
  margin: 0 !important;
  padding: 0 !important;
}
body .jpr-section-cta-polish > .container,
body .jpr-section-cta-polish .container.py-3,
body .jpr-section-cta-polish .container.py-md-4{
  padding-top: var(--jpr-public-cta-y) !important;
  padding-bottom: var(--jpr-public-cta-y) !important;
}
body .jpr-section-cta-polish + .jpr-section-polish,
body .jpr-section-cta-polish + section.py-5.jpr-section-polish{
  padding-top: var(--jpr-public-section-top) !important;
}

/* Normalize Bootstrap row gutters/margins that created page-to-page drift. */
body .jpr-section-polish > .container > .row:first-child,
body .jpr-circle-page > .container > *:first-child,
body .jpr-contact-gateway > .container > *:first-child,
body .jpr-account-auth > .container > *:first-child{
  margin-top: 0 !important;
}
body .jpr-section-polish .row.g-5,
body .jpr-section-polish .row.g-lg-5,
body .jpr-section-polish .row.g-4,
body .jpr-section-polish .row.g-lg-4{
  --bs-gutter-y: var(--jpr-public-card-gap) !important;
}
body .jpr-section-polish .row.mb-4,
body .jpr-section-actualites .row.mb-4,
body .jpr-section-ressources .row.g-5.align-items-center.mb-4{
  margin-bottom: var(--jpr-public-card-gap) !important;
}
body .jpr-section-polish .container,
body .jpr-circle-page .container,
body .jpr-contact-gateway .container,
body .jpr-account-auth .container{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

@media (max-width: 767.98px){
  :root{
    --jpr-public-hero-top: 2.45rem;
    --jpr-public-hero-bottom: 2.25rem;
    --jpr-public-section-top: 2.25rem;
    --jpr-public-section-bottom: 2.65rem;
    --jpr-public-cta-y: .78rem;
    --jpr-public-card-gap: 1.1rem;
  }
  body .jpr-uniform-hero__fade{height: 30px !important;}
  body .jpr-uniform-hero__title{margin-bottom:.72rem !important;}
  body .jpr-section-cta-polish .d-flex.flex-column.flex-md-row{
    gap: .75rem !important;
  }
}

/* ==========================================================
   JPR 68 — Public hero compact baseline final
   Align all public section headers to the same vertical rhythm.
   This removes the remaining visual drift where some pages kept
   large Bootstrap/section padding while Contact/Compte were compact.
   ========================================================== */
:root{
  --jpr-public-hero-top: clamp(.85rem, 1.45vw, 1.25rem);
  --jpr-public-hero-bottom: clamp(.20rem, .65vw, .55rem);
  --jpr-public-section-top: clamp(2.55rem, 3.65vw, 3.15rem);
  --jpr-public-section-bottom: clamp(3rem, 4.25vw, 3.85rem);
}
html body .jpr-uniform-hero,
html body section.jpr-uniform-hero.position-relative.overflow-hidden.bg-white{
  padding-top: var(--jpr-public-hero-top) !important;
  padding-bottom: var(--jpr-public-hero-bottom) !important;
  min-height: 0 !important;
  margin: 0 !important;
}
html body .jpr-uniform-hero > .container{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
html body .jpr-uniform-hero__title{
  margin-top: 0 !important;
  margin-bottom: .82rem !important;
  line-height: 1.02 !important;
}
html body .jpr-uniform-hero__subtitle{
  margin: 0 !important;
  max-width: 760px !important;
  line-height: 1.45 !important;
}
html body .jpr-uniform-hero__fade{
  height: 16px !important;
  opacity: .35 !important;
}
html body .jpr-uniform-hero + .jpr-section-polish,
html body .jpr-uniform-hero + section.py-5.jpr-section-polish,
html body .jpr-uniform-hero + .jpr-circle-page,
html body .jpr-uniform-hero + .jpr-contact-gateway,
html body .jpr-uniform-hero + .jpr-account-auth,
html body .jpr-uniform-hero + section.py-5,
html body .jpr-uniform-hero + section.bg-light{
  margin-top: 0 !important;
}
html body .jpr-section-polish,
html body section.py-5.jpr-section-polish,
html body .jpr-section-polish.py-5,
html body .jpr-circle-page,
html body .jpr-account-auth,
html body .jpr-contact-gateway{
  padding-top: var(--jpr-public-section-top) !important;
  padding-bottom: var(--jpr-public-section-bottom) !important;
}
@media (max-width: 767.98px){
  :root{
    --jpr-public-hero-top: .85rem;
    --jpr-public-hero-bottom: .35rem;
    --jpr-public-section-top: 2rem;
    --jpr-public-section-bottom: 2.5rem;
  }
  html body .jpr-uniform-hero__title{margin-bottom:.65rem !important;}
  html body .jpr-uniform-hero__fade{height: 10px !important;}
}

/* JPR Public UI spacing audit — final roomy baseline.
   Purpose: make public page heroes and first content sections visually consistent,
   using generous padding instead of shrinking the layout. */
html body{
  --jpr-public-hero-top: clamp(5.4rem, 7vw, 6.4rem) !important;
  --jpr-public-hero-bottom: clamp(5.1rem, 6.4vw, 6rem) !important;
  --jpr-public-section-top: clamp(4.35rem, 5.4vw, 5.15rem) !important;
  --jpr-public-section-bottom: clamp(4.6rem, 5.8vw, 5.5rem) !important;
  --jpr-public-card-gap: clamp(1.7rem, 2.25vw, 2.25rem) !important;
}

html body section.jpr-uniform-hero,
html body .jpr-uniform-hero,
html body section.jpr-uniform-hero.position-relative,
html body section.jpr-uniform-hero.position-relative.overflow-hidden.bg-white{
  min-height: 0 !important;
  padding-top: var(--jpr-public-hero-top) !important;
  padding-bottom: var(--jpr-public-hero-bottom) !important;
  margin: 0 !important;
  display: block !important;
  background: #fff !important;
}

html body .jpr-uniform-hero > .container{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

html body .jpr-uniform-hero__title,
html body .jpr-uniform-hero h1{
  margin-top: 0 !important;
  margin-bottom: clamp(1.05rem, 1.55vw, 1.45rem) !important;
  line-height: .98 !important;
}

html body .jpr-uniform-hero__subtitle,
html body .jpr-uniform-hero .lead{
  margin: 0 !important;
  max-width: 760px !important;
  line-height: 1.42 !important;
}

html body .jpr-uniform-hero__fade{
  height: clamp(3.8rem, 5.2vw, 4.8rem) !important;
  bottom: 0 !important;
}

/* Normalize the first public content block after the hero. */
html body .jpr-uniform-hero + section,
html body .jpr-uniform-hero + .jpr-section-polish,
html body .jpr-uniform-hero + section.py-5.jpr-section-polish,
html body .jpr-uniform-hero + .jpr-circle-page,
html body .jpr-uniform-hero + .jpr-contact-gateway,
html body .jpr-uniform-hero + .jpr-account-auth,
html body .jpr-uniform-hero + section.py-5,
html body .jpr-uniform-hero + section.bg-light{
  margin-top: 0 !important;
  padding-top: var(--jpr-public-section-top) !important;
  padding-bottom: var(--jpr-public-section-bottom) !important;
}

html body .jpr-section-polish > .container,
html body .jpr-circle-page > .container,
html body .jpr-contact-gateway > .container,
html body .jpr-account-auth > .container{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

html body .jpr-section-polish .row,
html body .jpr-circle-page .row,
html body .jpr-contact-gateway .row,
html body .jpr-account-auth .row{
  --bs-gutter-y: var(--jpr-public-card-gap) !important;
}

/* Contact previously looked like a separate visual system; give its first dark block
   the same relationship to the shared hero while keeping its dark design. */
html body .jpr-uniform-hero + .jpr-contact-gateway{
  border-top: 0 !important;
}

@media (max-width: 767.98px){
  html body{
    --jpr-public-hero-top: 3.4rem !important;
    --jpr-public-hero-bottom: 3.15rem !important;
    --jpr-public-section-top: 3rem !important;
    --jpr-public-section-bottom: 3.45rem !important;
    --jpr-public-card-gap: 1.25rem !important;
  }
  html body .jpr-uniform-hero__title,
  html body .jpr-uniform-hero h1{
    margin-bottom: .95rem !important;
    line-height: 1.02 !important;
  }
  html body .jpr-uniform-hero__subtitle,
  html body .jpr-uniform-hero .lead{
    line-height: 1.46 !important;
  }
  html body .jpr-uniform-hero__fade{
    height: 2.6rem !important;
  }
}