@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Montserrat:wght@500;600;700;800&display=swap');

:root{
  --jp-navy:#062443;
  --jp-blue:#0b6f8a;
  --jp-cyan:#1597aa;
  --jp-orange:#f36c21;
  --jp-green:#4caf5b;
  --jp-bordeaux:#9a285f;
  --jp-greta:#2b7e9e;
  --jp-bg:#f5f9fb;
  --jp-text:#092b49;
  --jp-muted:#617486;
  --jp-line:#dbe6ec;
  --jp-white:#fff;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--jp-text);
  background:var(--jp-bg);
  font-family:'Montserrat',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}

.jp-top{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 80% 15%,rgba(255,255,255,.14),transparent 24%),
    linear-gradient(120deg,var(--jp-navy) 0%,#07556d 58%,var(--jp-cyan) 100%);
  color:#fff;
}
.jp-top::after{
  content:"";
  position:absolute;
  width:390px;height:390px;
  right:-140px;bottom:-250px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
}
.jp-header{
  position:relative;z-index:2;
  max-width:1500px;
  margin:auto;
  min-height:92px;
  padding:12px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.jp-brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.jp-logo-box{
  width:142px;height:78px;
  padding:4px 10px;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  border-radius:0 0 4px 4px;
  box-shadow:0 8px 22px rgba(0,0,0,.13);
}
.jp-logo-box img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.jp-brand-text{display:flex;flex-direction:column;gap:2px}
.jp-brand-text strong{font-size:15px;letter-spacing:.01em}
.jp-brand-text span{font-size:12px;color:rgba(255,255,255,.83)}
.jp-nav{display:flex;gap:22px;align-items:center;font-size:13px;font-weight:700}
.jp-nav a{text-decoration:none;color:#fff;opacity:.9}
.jp-nav a:hover{opacity:1;color:#dffaff}

.jp-hero{
  position:relative;z-index:1;
  max-width:1500px;
  margin:auto;
  padding:30px 28px 40px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:24px;
  align-items:end;
}
.jp-eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:#b8f2f6;margin-bottom:4px}
.jp-hand{font-family:'Caveat',cursive;font-weight:700;font-size:35px;line-height:1;color:#fff;margin:0 0 0 80px;transform:rotate(-1deg)}
.jp-hero h1{font-size:clamp(30px,4vw,52px);line-height:1.04;margin:5px 0 9px;letter-spacing:-.035em}
.jp-hero p{max-width:850px;margin:0;color:rgba(255,255,255,.9);font-size:15px;line-height:1.55}
.jp-hero-chip{
  align-self:center;
  padding:10px 15px;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.10);
  border-radius:999px;
  font-size:12px;font-weight:700;
  backdrop-filter:blur(8px);
}

.jp-main{max-width:1500px;margin:auto;padding:26px 28px 40px}
.jp-intro-row{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:15px}
.jp-section-kicker{font-size:10px;color:var(--jp-cyan);font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:3px}
.jp-section-title{margin:0;font-size:28px;line-height:1.1;letter-spacing:-.025em}
.jp-section-copy{margin:5px 0 0;color:var(--jp-muted);font-size:13px;line-height:1.45}

.jp-oauth{
  margin:0 0 22px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:13px 16px;
  border:1px solid #c9e3eb;
  border-left:5px solid var(--jp-cyan);
  border-radius:14px;
  background:#eefafd;
}
.jp-oauth strong{display:block;font-size:14px;margin-bottom:2px}
.jp-oauth p{margin:0;color:var(--jp-muted);font-size:11px;line-height:1.35}
.jp-oauth a{flex:none;text-decoration:none;color:#fff;background:var(--jp-cyan);font-size:12px;font-weight:800;padding:10px 15px;border-radius:9px;box-shadow:0 7px 16px rgba(21,151,170,.2)}

.jp-family{margin-top:19px}
.jp-family-head{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.jp-family-dot{width:9px;height:9px;border-radius:50%}
.jp-family h2{font-size:17px;margin:0;letter-spacing:-.015em}
.jp-family-line{height:1px;flex:1;background:var(--jp-line)}
.jp-family--prebac .jp-family-dot{background:var(--jp-green)}
.jp-family--bts .jp-family-dot{background:var(--jp-orange)}
.jp-family--post .jp-family-dot{background:var(--jp-bordeaux)}

.jp-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px}
.jp-card{
  position:relative;
  min-width:0;
  background:#fff;
  border:1px solid var(--jp-line);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 7px 20px rgba(6,36,67,.065);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.jp-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(6,36,67,.12)}
.jp-card a{display:block;height:100%;text-decoration:none}
.jp-card-media{
  position:relative;
  height:116px;
  overflow:hidden;
  background:linear-gradient(135deg,#d8eef3,#f4fbfc);
}
.jp-card-media img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .3s ease}
.jp-card:hover .jp-card-media img{transform:scale(1.035)}
.jp-card-placeholder{height:100%;display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:800;color:rgba(255,255,255,.9)}
.jp-family--prebac .jp-card-placeholder{background:linear-gradient(135deg,#3f9d50,#7bc67e)}
.jp-family--post .jp-card-placeholder{background:linear-gradient(135deg,#74204e,#b54882)}
.jp-card-badge{
  position:absolute;left:9px;bottom:8px;
  border-radius:999px;padding:4px 8px;
  color:#fff;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.035em;
  box-shadow:0 3px 10px rgba(0,0,0,.18)
}
.jp-family--prebac .jp-card-badge{background:var(--jp-green)}
.jp-family--bts .jp-card-badge{background:var(--jp-orange)}
.jp-family--post .jp-card-badge{background:var(--jp-bordeaux)}
.jp-card-body{padding:11px 12px 12px;min-height:105px;display:flex;flex-direction:column}
.jp-card-short{font-size:14px;font-weight:800;line-height:1.2;margin-bottom:4px;color:var(--jp-text)}
.jp-card-full{font-size:10.5px;line-height:1.35;color:var(--jp-muted);margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.jp-card-action{margin-top:auto;font-size:10px;font-weight:800}
.jp-family--prebac .jp-card-action{color:var(--jp-green)}
.jp-family--bts .jp-card-action{color:var(--jp-orange)}
.jp-family--post .jp-card-action{color:var(--jp-bordeaux)}
.jp-card-action::after{content:"  →"}

.jp-footer{background:var(--jp-navy);color:rgba(255,255,255,.76);padding:18px 28px;font-size:11px}
.jp-footer-inner{max-width:1500px;margin:auto;display:flex;justify-content:space-between;gap:20px;align-items:center}
.jp-footer a{color:#fff;text-decoration:none;margin-left:15px}

@media(max-width:1100px){.jp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.jp-nav{display:none}}
@media(max-width:720px){
  .jp-header{padding:8px 16px;min-height:74px}.jp-logo-box{width:112px;height:62px}.jp-brand-text{display:none}
  .jp-hero{padding:22px 16px 28px;grid-template-columns:1fr}.jp-hand{margin-left:20px;font-size:29px}.jp-hero-chip{display:none}
  .jp-main{padding:21px 14px 30px}.jp-intro-row{align-items:start}.jp-section-title{font-size:23px}
  .jp-oauth{align-items:flex-start;flex-direction:column}.jp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .jp-card-media{height:105px}.jp-footer-inner{flex-direction:column;text-align:center}.jp-footer a{margin:0 7px}
}
@media(max-width:420px){.jp-grid{grid-template-columns:1fr 1fr}.jp-card-body{padding:9px}.jp-card-short{font-size:12.5px}.jp-card-full{font-size:9.5px}}

/* Framework JP 9.0 — données synchronisées depuis WordPress */
.jp-card.is-framework-synced {
  border-top-color: var(--jp-card-accent, #0f809b);
}
.jp-card.is-framework-synced .jp-card-badge {
  background: var(--jp-card-accent, #0f809b);
  color: #fff;
}
.jp-card.is-framework-synced .jp-card-action {
  color: var(--jp-card-accent, #0f809b);
}
.jp-card-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Framework JP 9.1 — cartes synchronisées avec WordPress. */


/* ==========================================================
   ACCÈS ADMINISTRATEURS — LIEN DISCRET EN BAS DE PAGE
   ========================================================== */

.jp-admin-access {
  display: flex;
  justify-content: center;
  margin: 54px auto 8px;
  padding-top: 20px;
  border-top: 1px solid var(--jp-line);
}

.jp-admin-access a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 8px;
  color: #75838d;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  opacity: .58;
  transition:
    opacity .2s ease,
    color .2s ease,
    background .2s ease;
}

.jp-admin-access a:hover,
.jp-admin-access a:focus-visible {
  color: var(--jp-navy);
  background: #edf2f4;
  opacity: 1;
}

.jp-admin-access-icon {
  display: inline-flex;
  width: 15px;
  height: 15px;
}

.jp-admin-access-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}