/* Unipraxis — Pages Essentielles (Shell) */
:root{
  --upx-blue:#12417A;
  --upx-gold:#DB9D4A;

  --upx-bg:#ffffff;
  --upx-surface:#ffffff;
  --upx-ink:#0f172a; /* slate-900 */
  --upx-muted:#475569; /* slate-600 */
  --upx-line:rgba(15,23,42,.10);

  --upx-radius:18px;
  --upx-shadow:0 10px 30px rgba(2,6,23,.10);
  --upx-shadow-soft:0 6px 18px rgba(2,6,23,.08);

  --upx-container: 1040px;
  --upx-pad: 18px;
}

@media (prefers-color-scheme: dark){
  :root{
    --upx-bg:#0b1220;
    --upx-surface:#0f1a2b;
    --upx-ink:#e5e7eb;
    --upx-muted:#a3b3c7;
    --upx-line:rgba(226,232,240,.10);
    --upx-shadow:0 10px 30px rgba(0,0,0,.35);
    --upx-shadow-soft:0 6px 18px rgba(0,0,0,.25);
  }
}

.upx-shell{
  background: var(--upx-bg);
  color: var(--upx-ink);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.upx-shell *{ box-sizing:border-box; }

.upx-wrap{
  width:100%;
  max-width: var(--upx-container);
  margin:0 auto;
  padding: 0 var(--upx-pad);
}

.upx-top{
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--upx-line);
}
@media (prefers-color-scheme: dark){
  .upx-top{
    background: linear-gradient(180deg, rgba(11,18,32,.92), rgba(11,18,32,.72));
  }
}
.upx-top__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 12px 0;
}
.upx-brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 0;
}
.upx-brand__logo{
  width:34px;height:34px;border-radius:12px;
  background: rgba(18,65,122,.14);
  display:grid; place-items:center;
  border: 1px solid rgba(18,65,122,.22);
}
.upx-brand__logo svg{ width:18px;height:18px; }
.upx-brand__txt{
  display:flex; flex-direction:column; min-width:0;
}
.upx-brand__name{
  font-weight:800; letter-spacing:.2px; line-height:1.05;
  font-size:14px;
}
.upx-brand__tag{
  font-size:12px; color: var(--upx-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.upx-nav{
  display:flex; align-items:center; gap:10px;
}
.upx-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700;
  padding: 10px 12px;
  border-radius: 999px;
  text-decoration:none;
  color: var(--upx-ink);
  border:1px solid var(--upx-line);
  background: var(--upx-surface);
  box-shadow: var(--upx-shadow-soft);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.upx-link:hover{ transform: translateY(-1px); border-color: rgba(18,65,122,.28); }
.upx-link:active{ transform: translateY(0); box-shadow:none; }

.upx-hero{
  padding: 22px 0 12px;
}
.upx-breadcrumb{
  font-size:12px; color: var(--upx-muted);
  margin: 10px 0 6px;
}
.upx-title{
  margin: 0;
  font-size: clamp(22px, 5.5vw, 34px);
  line-height:1.06;
  letter-spacing:-.3px;
}
.upx-sub{
  margin: 10px 0 0;
  color: var(--upx-muted);
  font-size: 15px;
  line-height:1.55;
  max-width: 70ch;
}

.upx-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 16px 0 34px;
}
@media(min-width: 860px){
  .upx-grid{
    grid-template-columns: 1.2fr .8fr;
    gap: 18px;
    padding: 18px 0 44px;
  }
}

.upx-card{
  background: var(--upx-surface);
  border: 1px solid var(--upx-line);
  border-radius: var(--upx-radius);
  box-shadow: var(--upx-shadow);
  overflow:hidden;
}
.upx-card__pad{
  padding: 16px;
}
@media(min-width: 640px){
  .upx-card__pad{ padding: 18px; }
}
.upx-card h2{
  margin: 0 0 10px;
  font-size: 16px;
  letter-spacing: -.1px;
}
.upx-card p{
  margin: 0 0 10px;
  color: var(--upx-muted);
  line-height:1.65;
  font-size: 14px;
}
.upx-card p:last-child{ margin-bottom:0; }
.upx-list{
  margin: 0;
  padding: 0 0 0 18px;
  color: var(--upx-muted);
  line-height:1.65;
  font-size: 14px;
}
.upx-list li{ margin: 6px 0; }

.upx-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 800;
  color: var(--upx-blue);
  background: rgba(18,65,122,.10);
  border: 1px solid rgba(18,65,122,.22);
}

.upx-kpi{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.upx-kpi__item{
  border-radius: 14px;
  border: 1px solid var(--upx-line);
  padding: 12px;
  background: var(--upx-surface);
}
.upx-kpi__n{
  font-weight: 900;
  letter-spacing: -.2px;
  font-size: 18px;
}
.upx-kpi__t{
  color: var(--upx-muted);
  font-size: 12px;
  margin-top: 4px;
}

.upx-form{
  display:grid;
  gap: 10px;
}
.upx-field label{
  display:block;
  font-size: 12px;
  color: var(--upx-muted);
  font-weight: 800;
  margin: 0 0 6px;
}
.upx-field input,
.upx-field textarea{
  width:100%;
  border-radius: 14px;
  border: 1px solid var(--upx-line);
  background: color-mix(in srgb, var(--upx-surface) 90%, transparent);
  color: var(--upx-ink);
  padding: 12px 12px;
  font-size: 16px; /* avoid iOS zoom */
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.upx-field textarea{ min-height: 120px; resize: vertical; }
.upx-field input:focus,
.upx-field textarea:focus{
  border-color: rgba(18,65,122,.45);
  box-shadow: 0 0 0 4px rgba(18,65,122,.18);
}

.upx-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height: 44px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(18,65,122,.28);
  background: linear-gradient(135deg, color-mix(in srgb, var(--upx-blue) 92%, #000 0%), color-mix(in srgb, var(--upx-blue) 75%, #000 0%));
  color: #fff;
  text-decoration:none;
  font-weight: 900;
  cursor:pointer;
  transition: transform .16s ease, filter .16s ease;
}
.upx-btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.upx-btn:active{ transform: translateY(0); filter: brightness(.98); }

.upx-note{
  border-radius: 14px;
  border: 1px dashed rgba(219,157,74,.45);
  background: rgba(219,157,74,.10);
  padding: 12px;
  color: var(--upx-muted);
  font-size: 13px;
  line-height:1.6;
}

.upx-footer{
  padding: 18px 0 28px;
  border-top: 1px solid var(--upx-line);
  color: var(--upx-muted);
  font-size: 12px;
}
.upx-footer a{ color: inherit; font-weight: 800; text-decoration: none; }
.upx-footer a:hover{ text-decoration: underline; }

@media (prefers-reduced-motion: no-preference){
  .upx-grid__main .upx-card,
  .upx-grid__side .upx-card{
    animation: upxFadeUp .28s ease both;
  }
  .upx-grid__main .upx-card:nth-of-type(2){ animation-delay: .04s; }
  .upx-grid__main .upx-card:nth-of-type(3){ animation-delay: .08s; }
  .upx-grid__main .upx-card:nth-of-type(4){ animation-delay: .12s; }
  .upx-grid__side .upx-card{ animation-delay: .06s; }
  @keyframes upxFadeUp{
    from{ opacity:0; transform: translateY(6px); }
    to{ opacity:1; transform: translateY(0); }
  }
}


/* ------------------------------------------------------------------
 * v0.1.1 — Intégration dans le thème (header/footer) + lisibilité
 * ------------------------------------------------------------------ */
body.upx-pls-shell{
  background: var(--upx-bg);
  color: var(--upx-ink);
}

/* Wrapper principal */
.upx-lite{ padding: 22px 0 40px; }
@media (min-width: 900px){
  .upx-lite{ padding: 28px 0 54px; }
}

/* Hero row + nav */
.upx-hero__row{
  display:flex;
  flex-direction: column;
  gap: 14px;
}
.upx-hero__nav{ display:flex; justify-content:flex-start; }
@media (min-width: 900px){
  .upx-hero__row{ flex-direction: row; align-items:flex-end; justify-content:space-between; gap: 18px; }
  .upx-hero__nav{ justify-content:flex-end; }
}

.upx-lite-nav{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.upx-lite-nav__a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 40px;
  padding: 10px 12px;
  border-radius: 999px;
  text-decoration:none;
  font-size: 13px;
  font-weight: 800;
  color: var(--upx-ink);
  border: 1px solid var(--upx-line);
  background: var(--upx-surface);
  box-shadow: var(--upx-shadow-soft);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.upx-lite-nav__a:hover{ transform: translateY(-1px); border-color: rgba(18,65,122,.28); }
.upx-lite-nav__a:active{ transform: translateY(0); box-shadow:none; }
.upx-lite-nav__a.is-active{
  border-color: rgba(18,65,122,.30);
  background: color-mix(in srgb, var(--upx-blue) 10%, var(--upx-surface));
}

/* Notes (feedback formulaire) */
.upx-note--ok{
  border-style: solid;
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.10);
  color: var(--upx-ink);
  margin-bottom: 12px;
}
.upx-note--bad{
  border-style: solid;
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.10);
  color: var(--upx-ink);
  margin-bottom: 12px;
}


/* --- CTA row (phone/whatsapp) --- */
.upx-cta-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.upx-btn--ghost{background:transparent;border:1px solid rgba(255,255,255,.16);color:#fff}
.upx-btn--ghost:hover{border-color:rgba(255,255,255,.28);transform:translateY(-1px)}
.upx-btn--wa{background:rgba(45,206,95,.14);border:1px solid rgba(45,206,95,.35);color:#fff}
.upx-btn--wa:hover{border-color:rgba(45,206,95,.55);transform:translateY(-1px)}
.upx-btn--mini{padding:10px 12px;min-width:auto}