/*
 * MÉMOIRES PRODUCT — A2.1-R1 — CLIENT DESIGN SYSTEM
 * Couche visuelle du portail client. Aucun comportement métier.
 */

:root{
  --mp-bg:#f5f7fb;
  --mp-surface:#ffffff;
  --mp-surface-soft:#f8fafc;
  --mp-surface-warm:#fffaf0;
  --mp-text:#17213f;
  --mp-muted:#65708b;
  --mp-soft:#8993a3;
  --mp-border:#dfe5ef;
  --mp-border-strong:#cfd8e6;
  --mp-primary:var(--client-primary,#0d2449);
  --mp-accent:var(--client-accent,#c79434);
  --mp-success:#08713c;
  --mp-success-bg:#e5f8eb;
  --mp-warning:#76520a;
  --mp-warning-bg:#fff1c9;
  --mp-danger:#a4232d;
  --mp-danger-bg:#fdeaea;
  --mp-info:#315caa;
  --mp-info-bg:#edf3ff;

  --mp-radius-xs:8px;
  --mp-radius-sm:12px;
  --mp-radius-md:16px;
  --mp-radius-lg:22px;
  --mp-radius-xl:28px;

  --mp-shadow-sm:0 2px 10px rgba(23,33,63,.04);
  --mp-shadow-md:0 12px 34px rgba(23,33,63,.07);
  --mp-shadow-lg:0 24px 70px rgba(23,33,63,.10);

  --mp-space-1:4px;
  --mp-space-2:8px;
  --mp-space-3:12px;
  --mp-space-4:16px;
  --mp-space-5:20px;
  --mp-space-6:24px;
  --mp-space-7:32px;
  --mp-space-8:40px;

  --mp-speed:160ms;
}

/* Base */
body.client-portal{
  background:
    radial-gradient(circle at 12% 0%, rgba(199,148,52,.065), transparent 30rem),
    linear-gradient(180deg,#f8fafc 0,#f5f7fb 38rem,#f5f7fb 100%);
  color:var(--mp-text);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.client-portal *,
body.client-portal *::before,
body.client-portal *::after{box-sizing:border-box}

body.client-portal a,
body.client-portal button,
body.client-portal input,
body.client-portal select,
body.client-portal textarea{
  transition:
    color var(--mp-speed) ease,
    background-color var(--mp-speed) ease,
    border-color var(--mp-speed) ease,
    box-shadow var(--mp-speed) ease,
    transform var(--mp-speed) ease;
}

body.client-portal :focus-visible{
  outline:3px solid color-mix(in srgb,var(--mp-primary) 30%,transparent);
  outline-offset:3px;
}

/* Header partagé — modernisation sans changer la navigation métier */
.client-top{
  min-height:72px;
  border-bottom:1px solid rgba(207,216,230,.78);
  background:rgba(255,255,255,.90);
  backdrop-filter:saturate(155%) blur(18px);
  -webkit-backdrop-filter:saturate(155%) blur(18px);
  box-shadow:0 1px 0 rgba(255,255,255,.8),0 8px 30px rgba(23,33,63,.025);
}

.client-top-inner{
  width:min(1360px,calc(100% - 40px));
  min-height:72px;
  gap:18px;
}

.client-mp-global{margin-right:6px!important}
.client-mp-global img{
  height:32px!important;
  max-width:158px!important;
  filter:none;
}

.client-brand{
  min-width:0!important;
  gap:8px;
  white-space:nowrap;
}
.client-brand strong{
  max-width:190px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--mp-text);
  font-size:.88rem;
  font-weight:780;
  letter-spacing:-.01em;
}

.client-main-nav{
  display:flex;
  align-items:center;
  gap:3px;
  padding:4px;
  border:1px solid rgba(223,229,239,.78);
  border-radius:14px;
  background:rgba(248,250,252,.82);
}

.client-main-nav a{
  min-height:36px;
  display:inline-flex;
  align-items:center;
  padding:0 10px!important;
  border-radius:10px!important;
  color:#536078!important;
  font-size:.78rem!important;
  font-weight:720!important;
  line-height:1!important;
  white-space:nowrap;
}

.client-main-nav a:hover{
  background:#fff!important;
  color:var(--mp-text)!important;
  box-shadow:var(--mp-shadow-sm);
}

.client-main-nav a.active{
  background:#fff!important;
  color:var(--mp-text)!important;
  box-shadow:0 1px 5px rgba(23,33,63,.07);
}
.client-main-nav a.active::after{display:none!important}

.client-account-button{
  min-height:40px;
  border:1px solid var(--mp-border)!important;
  background:#fff!important;
  box-shadow:var(--mp-shadow-sm);
}
.client-account-button:hover{
  border-color:var(--mp-border-strong)!important;
  box-shadow:var(--mp-shadow-md);
}
.client-account-menu{
  border-color:var(--mp-border)!important;
  border-radius:18px!important;
  box-shadow:var(--mp-shadow-lg)!important;
}

/* Conteneur */
.client-shell{
  width:min(1220px,calc(100% - 40px))!important;
  margin:36px auto 72px!important;
}

/* Titres et hiérarchie */
.client-page-head{
  align-items:flex-end;
  gap:24px;
  margin:0 0 24px!important;
}

.client-page-head h1{
  margin:5px 0 6px!important;
  max-width:850px;
  color:var(--mp-text);
  font-size:clamp(2rem,3.7vw,3.2rem)!important;
  line-height:1.03;
  letter-spacing:-.045em!important;
}

.client-page-head p{
  max-width:760px;
  color:var(--mp-muted)!important;
  font-size:.98rem;
}

.eyebrow{
  color:color-mix(in srgb,var(--mp-primary) 72%,var(--mp-accent))!important;
  font-size:.68rem!important;
  font-weight:850!important;
  letter-spacing:.12em!important;
  text-transform:uppercase;
}

.client-head-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

/* Cartes */
body.client-portal .card,
.client-kpis article,
.client-product-card,
.client-login-card,
.client-filter-bar{
  border:1px solid var(--mp-border)!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:var(--mp-shadow-sm)!important;
}

body.client-portal .card{
  border-radius:var(--mp-radius-lg)!important;
  padding:clamp(18px,2.2vw,26px)!important;
}

body.client-portal .card:hover{
  border-color:var(--mp-border-strong)!important;
}

.client-kpis{
  gap:12px!important;
  margin-bottom:18px!important;
}
.client-kpis article{
  min-height:118px;
  padding:18px!important;
  border-radius:18px!important;
}
.client-kpis span,
.client-kpis small{color:var(--mp-muted)!important}
.client-kpis strong{
  color:var(--mp-text);
  font-size:1.75rem!important;
  letter-spacing:-.035em;
}

/* Boutons */
body.client-portal .button,
body.client-portal button{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid transparent;
  border-radius:11px!important;
  padding:9px 14px!important;
  background:var(--mp-primary);
  color:#fff;
  font-size:.84rem;
  font-weight:780;
  line-height:1.2;
  text-decoration:none;
  box-shadow:0 4px 12px color-mix(in srgb,var(--mp-primary) 14%,transparent);
}

body.client-portal .button:hover,
body.client-portal button:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 8px 22px color-mix(in srgb,var(--mp-primary) 18%,transparent)!important;
}

body.client-portal .button.secondary,
body.client-portal button.secondary{
  border-color:var(--mp-border)!important;
  background:#fff!important;
  color:var(--mp-text)!important;
  box-shadow:var(--mp-shadow-sm)!important;
}
body.client-portal .button.secondary:hover,
body.client-portal button.secondary:hover{
  border-color:var(--mp-border-strong)!important;
  background:var(--mp-surface-soft)!important;
}

/* Formulaires */
body.client-portal input:not([type="checkbox"]):not([type="radio"]),
body.client-portal select,
body.client-portal textarea{
  min-height:44px;
  width:100%;
  border:1px solid var(--mp-border-strong)!important;
  border-radius:11px!important;
  background:#fff!important;
  color:var(--mp-text)!important;
  padding:10px 12px!important;
  font:inherit;
  box-shadow:inset 0 1px 2px rgba(23,33,63,.025);
}

body.client-portal textarea{min-height:110px;resize:vertical}

body.client-portal input:hover,
body.client-portal select:hover,
body.client-portal textarea:hover{
  border-color:#b8c5d8!important;
}

body.client-portal input:focus,
body.client-portal select:focus,
body.client-portal textarea:focus{
  border-color:color-mix(in srgb,var(--mp-primary) 55%,#b8c5d8)!important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--mp-primary) 9%,transparent)!important;
  outline:none;
}

body.client-portal label{
  color:#45536c;
  font-weight:720;
}

/* États */
body.client-portal .notice{
  border:1px solid color-mix(in srgb,var(--mp-success) 16%,var(--mp-border));
  border-radius:14px!important;
  background:var(--mp-success-bg)!important;
  color:var(--mp-success)!important;
  padding:13px 15px!important;
}

body.client-portal .alert{
  border:1px solid color-mix(in srgb,var(--mp-warning) 15%,var(--mp-border));
  border-radius:14px!important;
  background:var(--mp-warning-bg)!important;
  color:var(--mp-warning)!important;
  padding:13px 15px!important;
}
body.client-portal .alert.error{
  border-color:color-mix(in srgb,var(--mp-danger) 15%,var(--mp-border));
  background:var(--mp-danger-bg)!important;
  color:var(--mp-danger)!important;
}

/* Listes / données */
.client-detail-list>div{
  grid-template-columns:minmax(110px,150px) 1fr!important;
  gap:14px!important;
  padding:12px 0!important;
  border-bottom-color:#e8edf4!important;
}
.client-detail-list span{color:var(--mp-muted)!important}

.client-product-card{
  border-radius:20px!important;
  padding:20px!important;
}
.client-product-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--mp-shadow-md)!important;
}
.client-product-actions a{
  border:1px solid var(--mp-border);
  background:#fff!important;
  color:var(--mp-text)!important;
}

.client-filter-bar{
  border-radius:16px!important;
  padding:10px!important;
}

body.client-portal table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
body.client-portal table th{
  color:var(--mp-muted);
  font-size:.69rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
body.client-portal table th,
body.client-portal table td{
  border-bottom:1px solid #e8edf4;
  padding:11px 10px;
  vertical-align:top;
}

/* Liens */
.client-section-head>a,
.client-login-links a{
  color:var(--mp-primary)!important;
  text-underline-offset:3px;
}
.client-section-head>a:hover,
.client-login-links a:hover{text-decoration:underline!important}

/* Login / compte */
.client-login-card{
  border-radius:24px!important;
  box-shadow:var(--mp-shadow-lg)!important;
}
.client-account-avatar,
.client-account-button>span{
  background:linear-gradient(145deg,var(--mp-primary),color-mix(in srgb,var(--mp-primary) 78%,#335f9f))!important;
}

/* Footer */
.client-footer,
.client-page-footer{
  color:var(--mp-soft)!important;
}

/* Responsive — A2.1 ne change pas l'architecture de navigation */
@media(max-width:1120px){
  .client-top-inner{
    width:min(100% - 24px,1360px);
    flex-wrap:wrap;
    padding:10px 0;
  }
  .client-main-nav{
    order:3;
    width:100%;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:thin;
  }
  .client-shell{width:min(100% - 28px,1220px)!important;margin-top:28px!important}
}

@media(max-width:760px){
  .client-top{position:sticky;top:0}
  .client-top-inner{gap:10px}
  .client-mp-global img{height:27px!important;max-width:132px!important}
  .client-brand strong{max-width:145px;font-size:.8rem}
  .client-account-button small{display:none}
  .client-page-head{
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:14px!important;
  }
  .client-page-head h1{font-size:clamp(1.9rem,9vw,2.6rem)!important}
  .client-head-actions{width:100%;justify-content:flex-start}
  .client-head-actions .button{flex:1 1 auto}
  body.client-portal .card{border-radius:18px!important;padding:18px!important}
  .client-kpis,
  .client-products-grid,
  .client-quick-grid,
  .client-detail-grid,
  .client-dashboard-grid,
  .client-account-grid,
  .client-team-layout{
    grid-template-columns:1fr!important;
  }
  body.client-portal .button,
  body.client-portal button{min-height:44px}
}

@media(max-width:480px){
  .client-shell{width:min(100% - 20px,1220px)!important;margin-top:20px!important}
  .client-brand strong{display:none}
  .client-page-head h1{font-size:2rem!important}
}

@media(prefers-reduced-motion:reduce){
  body.client-portal *,
  body.client-portal *::before,
  body.client-portal *::after{
    scroll-behavior:auto!important;
    transition:none!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
  }
}


/* ==========================================================
   MÉMOIRES PRODUCT — A2.2-R2
   HARMONISATION VISUELLE AVEC /produits-v2/
   Référence : palette et langage visuel commercial V3.x
   ========================================================== */

:root{
  /* Palette de référence /produits-v2/ */
  --mp-product-navy:#24324d;
  --mp-product-navy2:#173e71;
  --mp-product-blue:#145ce6;
  --mp-product-blue2:#0d49ba;
  --mp-product-yellow:#ffc62c;
  --mp-product-ink:#101829;
  --mp-product-muted:#647086;
  --mp-product-paper:#f7f6f2;
  --mp-product-line:#dfe4ec;
  --mp-product-soft:#eef3fa;
  --mp-product-shadow:0 18px 50px rgba(25,40,70,.08);

  /* Réconciliation Design System client ↔ identité commerciale */
  --mp-bg:var(--mp-product-paper);
  --mp-text:var(--mp-product-ink);
  --mp-muted:var(--mp-product-muted);
  --mp-border:var(--mp-product-line);
  --mp-border-strong:#cfd7e5;
  --mp-primary:var(--mp-product-navy);
  --mp-accent:var(--mp-product-yellow);
  --mp-shadow-md:var(--mp-product-shadow);
  --mp-shadow-lg:0 24px 70px rgba(25,40,70,.12);
}

body.client-portal{
  background:
    radial-gradient(circle at 10% 0%, rgba(255,198,44,.065), transparent 30rem),
    linear-gradient(180deg,#faf9f6 0,var(--mp-product-paper) 31rem,var(--mp-product-paper) 100%);
  color:var(--mp-product-ink);
}

/* Header : même sobriété que produits-v2, sans encore changer l'architecture */
.client-top{
  background:rgba(255,255,255,.94);
  border-bottom:1px solid var(--mp-product-line);
  box-shadow:0 8px 28px rgba(25,40,70,.035);
}

.client-top-inner{max-width:1360px}

.client-main-nav{
  border-color:var(--mp-product-line);
  background:#f8f9fb;
}

.client-main-nav a{
  color:#59657a!important;
  font-weight:760!important;
}

.client-main-nav a:hover{
  color:var(--mp-product-ink)!important;
  background:#fff!important;
}

.client-main-nav a.active{
  color:var(--mp-product-navy)!important;
  background:#fff!important;
  box-shadow:0 2px 10px rgba(25,40,70,.07);
}

.client-main-nav a.active::after{
  display:block!important;
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:3px;
  height:2px;
  border-radius:999px;
  background:var(--mp-product-yellow);
}

/* Branding */
.client-brand strong{
  color:var(--mp-product-ink);
  font-weight:820;
}

.client-account-button>span,
.client-account-avatar{
  background:linear-gradient(145deg,var(--mp-product-navy2),var(--mp-product-blue2))!important;
}

.client-account-button{
  border-color:var(--mp-product-line)!important;
}

/* Hiérarchie éditoriale issue de produits-v2 */
.eyebrow{
  color:#b77900!important;
  font-weight:920!important;
  letter-spacing:.15em!important;
}

.client-page-head h1,
body.client-portal .card h1,
body.client-portal .card h2{
  color:var(--mp-product-ink);
}

.client-page-head h1{
  font-family:Georgia,"Times New Roman",serif;
  letter-spacing:-.04em!important;
}

/* Surfaces / panels */
body.client-portal .card,
.client-kpis article,
.client-product-card,
.client-filter-bar,
.client-login-card{
  border-color:var(--mp-product-line)!important;
  background:#fff!important;
  box-shadow:0 12px 34px rgba(25,40,70,.055)!important;
}

body.client-portal .card{
  border-radius:22px!important;
}

.client-kpis article{
  border-radius:18px!important;
}

.client-kpis strong{
  color:var(--mp-product-ink);
}

/* Dashboard : langage visuel du hero commercial */
.client-premium-copy{
  background:linear-gradient(135deg,#0f3261 0%,#2f679d 100%)!important;
  border-radius:30px!important;
  box-shadow:var(--mp-product-shadow)!important;
}

.client-premium-copy .eyebrow{
  color:var(--mp-product-yellow)!important;
  opacity:1!important;
}

.client-premium-copy h1{
  font-family:Georgia,"Times New Roman",serif;
  letter-spacing:-.045em!important;
}

.client-premium-copy p{
  color:#eef5ff!important;
}

.client-premium-score{
  background:linear-gradient(180deg,#fff9ec,#fff)!important;
  border-color:#eed8aa!important;
  border-radius:30px!important;
  box-shadow:0 14px 38px rgba(25,40,70,.045);
}

.client-premium-score span{color:#8b7653!important}
.client-premium-score strong{color:#b77900!important}
.client-premium-score small{color:#8a795e!important}

/* Actions du hero : bleu + blanc, l'or reste un accent */
.client-premium-copy .button{
  background:var(--mp-product-blue)!important;
  color:#fff!important;
  border-color:transparent!important;
  box-shadow:0 8px 22px rgba(20,92,230,.22)!important;
}
.client-premium-copy .button:hover{
  background:var(--mp-product-blue2)!important;
}
.client-premium-copy .button.secondary{
  background:#fff!important;
  color:#15223a!important;
  border-color:#fff!important;
  box-shadow:none!important;
}

/* Quick actions : même profondeur bleu nuit que le site commercial */
.client-quick-grid .client-quick,
.client-quick{
  background:linear-gradient(145deg,#173e71,#132f57)!important;
  border:1px solid rgba(255,255,255,.035);
  box-shadow:0 14px 36px rgba(25,40,70,.11)!important;
}

.client-quick:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 46px rgba(25,40,70,.16)!important;
}

.client-quick span{
  color:rgba(255,198,44,.72)!important;
  opacity:1!important;
}
.client-quick strong{color:#fff!important}
.client-quick small{color:rgba(238,245,255,.72)!important;opacity:1!important}

/* Graphe : or → bleu, signature produits-v2 */
.client-mini-chart span,
.client-bar-item span{
  background:linear-gradient(180deg,#b77900,#173e71)!important;
}

/* Catalogue */
.client-product-card{
  border-radius:20px!important;
}

.client-product-glyph{
  background:linear-gradient(145deg,#173e71,#0d49ba)!important;
  border-radius:12px!important;
}

.client-product-card h2{
  font-family:Georgia,"Times New Roman",serif;
  color:var(--mp-product-ink);
  letter-spacing:-.025em;
}

.client-product-actions a{
  border-color:var(--mp-product-line)!important;
  color:var(--mp-product-navy)!important;
}

/* Boutons opérationnels */
body.client-portal .button:not(.secondary),
body.client-portal button:not(.secondary):not(.danger){
  background:linear-gradient(180deg,var(--mp-product-blue),var(--mp-product-blue2));
  box-shadow:0 7px 18px rgba(20,92,230,.17);
}

body.client-portal .button:not(.secondary):hover,
body.client-portal button:not(.secondary):not(.danger):hover{
  box-shadow:0 10px 24px rgba(20,92,230,.24)!important;
}

/* Les boutons secondaires restent neutres comme sur le commercial */
body.client-portal .button.secondary,
body.client-portal button.secondary{
  background:#fff!important;
  color:var(--mp-product-ink)!important;
  border-color:var(--mp-product-line)!important;
}

/* Formulaires */
body.client-portal input:not([type="checkbox"]):not([type="radio"]),
body.client-portal select,
body.client-portal textarea{
  border-color:#cfd7e5!important;
  background:#fff!important;
}

body.client-portal input:focus,
body.client-portal select:focus,
body.client-portal textarea:focus{
  border-color:#8fb2ee!important;
  box-shadow:0 0 0 4px rgba(20,92,230,.08)!important;
}

/* Messages : plus sobres, conservant leurs fonctions */
body.client-portal .notice{
  border-color:#cce9d6!important;
  background:#e9f8ee!important;
  color:#0b6738!important;
}

body.client-portal .alert{
  border-color:#eed8aa!important;
  background:#fff3cf!important;
  color:#76520a!important;
}

/* Langues : harmonisation sans toucher à la logique */
.lang-summary>div,
.lang-pack,
.lang-item,
.lang-billing>div,
.lang-scheduled-box>div{
  border-color:var(--mp-product-line)!important;
  background:#fff!important;
}

.lang-pack.active{
  border-color:var(--mp-product-blue)!important;
  background:#f5f8ff!important;
  box-shadow:0 8px 24px rgba(20,92,230,.07);
}

.lang-note,
.lang-scheduled-banner{
  background:#fff3cf!important;
  color:#76520a!important;
}

.lang-ok{background:#e9f8ee!important;color:#0b6738!important}
.lang-error{background:#fde7e8!important;color:#9e1c27!important}

/* Tables */
body.client-portal table th{
  color:#647086;
}
body.client-portal table th,
body.client-portal table td{
  border-bottom-color:#e5e9ef;
}

/* Footer */
.client-footer,
.client-page-footer{
  color:#8190a6!important;
}

/* Mobile : conserver le caractère premium sans surcharger */
@media(max-width:760px){
  .client-premium-copy,
  .client-premium-score{
    border-radius:22px!important;
  }
  .client-premium-copy h1{
    font-size:clamp(2.55rem,13vw,4rem)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .client-quick:hover{transform:none}
}


/* ==========================================================
   MÉMOIRES PRODUCT — A2.3-R1
   NAVIGATION CLIENT SIMPLIFIÉE
   ========================================================== */

/* La barre principale ne porte plus que les destinations quotidiennes. */
.client-main-nav{
  gap:4px;
  overflow:visible;
}

.client-main-nav > a,
.client-nav-more > summary{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border:0;
  border-radius:10px;
  color:#59657a;
  background:transparent;
  font-size:.79rem;
  font-weight:760;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  list-style:none;
  user-select:none;
}

.client-nav-more > summary::-webkit-details-marker{display:none}
.client-nav-more > summary::marker{display:none}

.client-nav-more{
  position:relative;
}

.client-nav-more > summary{
  gap:7px;
}

.client-nav-more > summary::after{
  content:"⌄";
  color:#8190a6;
  font-size:.82rem;
  transform:translateY(-1px);
  transition:transform .16s ease;
}

.client-nav-more[open] > summary::after{
  transform:rotate(180deg) translateY(1px);
}

.client-nav-more > summary:hover,
.client-nav-more[open] > summary,
.client-nav-more:has(a.active) > summary{
  color:var(--mp-product-ink);
  background:#fff;
  box-shadow:0 2px 10px rgba(25,40,70,.07);
}

.client-nav-more:has(a.active) > summary::before{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:3px;
  height:2px;
  border-radius:999px;
  background:var(--mp-product-yellow);
}

.client-nav-more-menu{
  position:absolute;
  top:calc(100% + 9px);
  right:0;
  z-index:80;
  width:250px;
  padding:8px;
  border:1px solid var(--mp-product-line);
  border-radius:16px;
  background:rgba(255,255,255,.98);
  box-shadow:0 20px 55px rgba(25,40,70,.16);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.client-nav-more-menu a{
  min-height:40px;
  display:flex!important;
  align-items:center;
  width:100%;
  padding:0 11px!important;
  border-radius:10px!important;
  color:#4f5c70!important;
  text-decoration:none;
  font-size:.82rem!important;
  font-weight:720!important;
}

.client-nav-more-menu a:hover{
  background:var(--mp-product-soft)!important;
  color:var(--mp-product-ink)!important;
  box-shadow:none!important;
}

.client-nav-more-menu a.active{
  background:#fff7de!important;
  color:#6c4d00!important;
  box-shadow:none!important;
}

.client-nav-more-menu a.active::after{display:none!important}

/* Desktop : barre plus courte, respiration retrouvée. */
@media(min-width:1121px){
  .client-main-nav{
    flex:0 1 auto;
  }
}

/* Tablette : menu principal horizontal scrollable, sous-menu ancré. */
@media(max-width:1120px){
  .client-main-nav{
    order:3;
    width:100%;
    overflow-x:auto;
    overflow-y:visible;
    padding-bottom:5px;
  }

  .client-nav-more{
    flex:0 0 auto;
  }

  .client-nav-more-menu{
    position:fixed;
    top:auto;
    left:14px;
    right:14px;
    width:auto;
    margin-top:8px;
  }
}

/* Mobile : actions tactiles plus confortables. */
@media(max-width:760px){
  .client-main-nav > a,
  .client-nav-more > summary{
    min-height:42px;
    padding:0 13px;
  }

  .client-nav-more-menu a{
    min-height:44px;
  }
}

@media(prefers-reduced-motion:reduce){
  .client-nav-more > summary::after{transition:none}
}


/* ==========================================================
   MÉMOIRES PRODUCT — A2.3-R2
   LOGO SUR FOND BLEU FONCÉ + AGRANDISSEMENT
   ========================================================== */

.client-mp-global{
  margin-right:10px!important;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  padding:8px 14px!important;
  min-height:50px;
  border-radius:14px;
  background:var(--mp-product-navy,#24324d)!important;
  box-shadow:0 8px 22px rgba(25,40,70,.14);
}

.client-mp-global img{
  height:48px!important;
  max-width:237px!important;
  width:auto!important;
  display:block;
}

@media(max-width:1120px){
  .client-mp-global{
    padding:7px 12px!important;
    min-height:46px;
  }
  .client-mp-global img{
    height:44px!important;
    max-width:218px!important;
  }
}

@media(max-width:760px){
  .client-mp-global{
    padding:6px 10px!important;
    min-height:42px;
    border-radius:12px;
  }
  .client-mp-global img{
    height:40px!important;
    max-width:198px!important;
  }
}


/* ==========================================================
   MÉMOIRES PRODUCT — A2.3-R2.2
   HEADER BLEU GLOBAL — MÊME FOND QUE LE LOGO
   ========================================================== */

/* Le bandeau entier prend exactement le bleu du cartouche/logo. */
.client-top{
  background:var(--mp-product-navy,#24324d)!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 10px 28px rgba(20,32,55,.16)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

.client-top-inner{
  min-height:76px!important;
}

/* Le cartouche du logo se fond désormais dans le header. */
.client-mp-global{
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:6px 8px!important;
  min-height:58px!important;
}

.client-mp-global img{
  height:48px!important;
  max-width:237px!important;
  width:auto!important;
}

/* Identité client lisible sur fond sombre. */
.client-brand strong{
  color:#f7f6f2!important;
}

/* Navigation principale sombre, intégrée au bandeau. */
.client-main-nav{
  background:rgba(255,255,255,.07)!important;
  border-color:rgba(255,255,255,.14)!important;
  box-shadow:none!important;
}

.client-main-nav > a,
.client-nav-more > summary{
  color:rgba(247,246,242,.88)!important;
  background:transparent!important;
}

.client-main-nav > a:hover,
.client-nav-more > summary:hover,
.client-nav-more[open] > summary{
  color:#ffffff!important;
  background:rgba(255,255,255,.10)!important;
  box-shadow:none!important;
}

.client-main-nav > a.active,
.client-nav-more:has(a.active) > summary{
  color:#ffffff!important;
  background:rgba(255,255,255,.13)!important;
  box-shadow:none!important;
}

.client-main-nav > a.active::after,
.client-nav-more:has(a.active) > summary::before{
  background:var(--mp-product-yellow,#ffc62c)!important;
}

.client-nav-more > summary::after{
  color:rgba(247,246,242,.75)!important;
}

/* Le menu déroulant reste clair pour la lisibilité. */
.client-nav-more-menu{
  background:rgba(255,255,255,.99)!important;
  border-color:#dfe4ec!important;
  box-shadow:0 22px 60px rgba(20,32,55,.22)!important;
}

/* Bloc Compte intégré au même bandeau sombre. */
.client-account-button{
  background:rgba(255,255,255,.08)!important;
  border-color:rgba(255,255,255,.16)!important;
  color:#f7f6f2!important;
  box-shadow:none!important;
}

.client-account-button:hover{
  background:rgba(255,255,255,.13)!important;
  border-color:rgba(255,255,255,.24)!important;
  box-shadow:none!important;
}

.client-account-button small,
.client-account-button strong{
  color:#f7f6f2!important;
}

.client-account-button > span,
.client-account-avatar{
  background:var(--mp-product-blue,#145ce6)!important;
  color:#ffffff!important;
}

/* Responsive : même bandeau bleu, logo restant dominant mais contenu. */
@media(max-width:1120px){
  .client-top-inner{min-height:72px!important}
  .client-mp-global{padding:5px 6px!important;min-height:52px!important}
  .client-mp-global img{height:44px!important;max-width:218px!important}
  .client-main-nav{background:rgba(255,255,255,.06)!important}
}

@media(max-width:760px){
  .client-top-inner{min-height:66px!important}
  .client-mp-global{padding:4px 5px!important;min-height:48px!important}
  .client-mp-global img{height:40px!important;max-width:198px!important}
  .client-brand strong{color:#f7f6f2!important}
  .client-account-button{background:rgba(255,255,255,.08)!important}
}


/* ==========================================================
   MÉMOIRES PRODUCT — A2.4-R1
   DASHBOARD PLUS COMPACT ET PLUS OPÉRATIONNEL
   ========================================================== */

/* Le dashboard garde ses données et ses routes : seul le rythme visuel évolue. */
.client-premium-hero{
  grid-template-columns:minmax(0,1.55fr) minmax(220px,.45fr)!important;
  gap:16px!important;
  margin-bottom:14px!important;
}

.client-premium-copy{
  padding:28px 30px!important;
  border-radius:24px!important;
  min-height:290px;
}

.client-premium-copy h1{
  font-size:clamp(2.7rem,5vw,4.7rem)!important;
  line-height:.94!important;
  margin:8px 0 12px!important;
}

.client-premium-copy p{
  max-width:620px!important;
  font-size:.98rem!important;
  line-height:1.55!important;
}

.client-hero-actions{
  margin-top:18px!important;
  gap:8px!important;
}

.client-premium-score{
  padding:22px!important;
  border-radius:24px!important;
  min-height:290px;
}

.client-premium-score strong{
  font-size:3.65rem!important;
  margin:7px 0!important;
}

.client-premium-score span{
  font-size:.69rem!important;
}

.client-premium-score small{
  font-size:.84rem!important;
}

/* Les quatre chiffres clés deviennent la première lecture après le hero. */
.client-kpis.premium{
  gap:10px!important;
  margin-bottom:14px!important;
}

.client-kpis.premium article{
  min-height:96px!important;
  padding:15px 16px!important;
  border-radius:16px!important;
}

.client-kpis.premium article strong{
  font-size:1.6rem!important;
  margin:2px 0!important;
}

.client-kpis.premium article span{
  font-size:.8rem!important;
}

.client-kpis.premium article small{
  font-size:.74rem!important;
}

/* Activité + top produits : plus d'information dans moins de hauteur. */
.client-dashboard-grid{
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)!important;
  gap:14px!important;
  margin-bottom:14px!important;
}

.client-dashboard-grid > .card{
  padding:18px 20px!important;
  border-radius:20px!important;
}

.client-dashboard-grid .client-section-head{
  margin-bottom:6px!important;
}

.client-dashboard-grid .client-section-head h2{
  font-size:clamp(1.8rem,3vw,2.7rem)!important;
  line-height:1!important;
}

.client-mini-chart{
  height:175px!important;
  padding-top:20px!important;
}

.client-mini-chart>div{
  grid-template-rows:18px 1fr 20px!important;
}

.client-mini-chart span{
  width:64%!important;
}

.client-product-list.premium>a{
  padding:10px 2px!important;
  grid-template-columns:30px minmax(0,1fr) auto!important;
  gap:8px!important;
}

.client-product-list.premium>a:last-child{
  border-bottom:0!important;
}

.client-rank{
  width:25px!important;
  height:25px!important;
  font-size:.67rem!important;
}

/* Les actions rapides tiennent désormais sur une ligne desktop. */
.client-quick-grid{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:10px!important;
  margin-top:14px!important;
}

.client-quick-grid .client-quick{
  min-height:112px!important;
  padding:15px 16px!important;
  border-radius:17px!important;
}

.client-quick-grid .client-quick span{
  font-size:.63rem!important;
}

.client-quick-grid .client-quick strong{
  margin-top:21px!important;
  font-size:1.02rem!important;
  line-height:1.2!important;
}

.client-quick-grid .client-quick small{
  margin-top:3px!important;
  font-size:.74rem!important;
  line-height:1.35!important;
}

/* Tablette */
@media(max-width:1120px){
  .client-premium-hero{
    grid-template-columns:minmax(0,1.35fr) minmax(210px,.65fr)!important;
  }

  .client-quick-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

/* Mobile / petite tablette */
@media(max-width:760px){
  .client-premium-hero{
    grid-template-columns:1fr!important;
  }

  .client-premium-copy,
  .client-premium-score{
    min-height:auto;
  }

  .client-premium-copy{
    padding:24px!important;
  }

  .client-premium-copy h1{
    font-size:clamp(2.55rem,12vw,4rem)!important;
  }

  .client-premium-score{
    padding:20px!important;
  }

  .client-kpis.premium{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .client-dashboard-grid{
    grid-template-columns:1fr!important;
  }

  .client-quick-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:480px){
  .client-kpis.premium,
  .client-quick-grid{
    grid-template-columns:1fr!important;
  }

  .client-quick-grid .client-quick{
    min-height:92px!important;
  }

  .client-quick-grid .client-quick strong{
    margin-top:13px!important;
  }
}


/* ==========================================================
   MÉMOIRES PRODUCT — A2.5-R1
   CATALOGUE PRODUITS — DENSITÉ, LISIBILITÉ, ACTIONS
   ========================================================== */

/* En-tête de page plus resserré. */
.client-page-head{
  margin-bottom:18px!important;
}

/* Barre recherche / statut / filtre : une ligne claire, moins haute. */
.client-filter-bar{
  grid-template-columns:minmax(0,1fr) minmax(150px,180px) auto auto!important;
  gap:8px!important;
  padding:8px!important;
  margin-bottom:14px!important;
  border-radius:15px!important;
}

.client-filter-bar input,
.client-filter-bar select,
.client-filter-bar button{
  min-height:40px!important;
}

.client-filter-bar a{
  white-space:nowrap;
}

/* Grille : 3 cartes équilibrées sur desktop, densité légèrement renforcée. */
.client-products-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  align-items:stretch;
}

/* Carte produit plus compacte et structurée. */
.client-product-card{
  display:flex!important;
  flex-direction:column;
  min-width:0;
  height:100%;
  padding:16px!important;
  border-radius:18px!important;
}

.client-product-card-top{
  min-height:28px;
  gap:8px!important;
  font-size:.78rem;
}

/* Le pictogramme se rapproche du contenu. */
.client-product-glyph{
  width:38px!important;
  height:38px!important;
  margin-top:14px!important;
  border-radius:11px!important;
  font-size:.78rem;
  flex:0 0 auto;
}

/* Titres longs : plus compacts sans tronquer l'information. */
.client-product-card h2{
  margin:14px 0 6px!important;
  font-size:clamp(1.55rem,2.15vw,2.3rem)!important;
  line-height:.98!important;
  letter-spacing:-.035em!important;
  overflow-wrap:anywhere;
  word-break:normal;
  hyphens:auto;
  text-wrap:balance;
}

/* GTIN : une ligne lisible et stable. */
.client-product-card>code{
  display:block;
  width:100%;
  margin:0 0 8px!important;
  padding:4px 7px;
  border-radius:7px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.76rem;
  line-height:1.25;
  background:#f0eee8;
}

/* Description : moins d'espace mort. */
.client-product-card>p{
  min-height:0!important;
  margin:2px 0 6px!important;
  color:var(--mp-product-muted)!important;
  font-size:.82rem;
  line-height:1.45;
}

/* Actions : alignées en bas, plus légères, une ligne quand la largeur le permet. */
.client-product-actions{
  margin-top:auto!important;
  padding-top:12px;
  gap:6px!important;
  flex-wrap:nowrap!important;
}

.client-product-actions a{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 9px!important;
  border-radius:8px!important;
  font-size:.73rem!important;
  line-height:1!important;
  white-space:nowrap;
  flex:0 1 auto;
}

.client-product-actions a:hover{
  background:var(--mp-product-soft)!important;
  border-color:#b9c6d8!important;
  transform:translateY(-1px);
}

/* Tablette : deux cartes, actions autorisées à revenir à la ligne. */
@media(max-width:960px){
  .client-products-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .client-product-actions{
    flex-wrap:wrap!important;
  }
}

/* Mobile : recherche et cartes en colonne, actions confortables. */
@media(max-width:660px){
  .client-filter-bar{
    grid-template-columns:1fr!important;
    padding:10px!important;
  }

  .client-products-grid{
    grid-template-columns:1fr!important;
  }

  .client-product-card{
    padding:15px!important;
  }

  .client-product-card h2{
    font-size:clamp(1.65rem,9vw,2.15rem)!important;
  }

  .client-product-actions a{
    min-height:38px;
    padding:7px 10px!important;
    font-size:.76rem!important;
  }
}

/* ==========================================================
   MÉMOIRES PRODUCT — A2.6-R1
   STUDIO PRODUIT — DENSITÉ, HIÉRARCHIE, ACTIONS
   ========================================================== */

/* En-tête Studio : titre et trois actions sur une seule ligne quand l'espace le permet. */
body.client-portal:has(.studio-product-list) .client-page-head{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:18px!important;
  align-items:end!important;
  margin-bottom:14px!important;
}

body.client-portal:has(.studio-product-list) .client-head-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  flex-wrap:nowrap!important;
}

body.client-portal:has(.studio-product-list) .client-head-actions a,
body.client-portal:has(.studio-product-list) .client-head-actions button{
  min-height:38px!important;
  padding:8px 12px!important;
  border-radius:9px!important;
  white-space:nowrap!important;
  font-size:.77rem!important;
}

/* Mode démo : visible mais moins envahissant. */
.studio-demo-inline{
  margin:0 0 12px!important;
}

.studio-demo-strip{
  padding:12px 14px!important;
  border-radius:14px!important;
  border-color:rgba(199,148,52,.62)!important;
  background:linear-gradient(90deg,#fffaf0,#fffdf8)!important;
  box-shadow:0 6px 18px rgba(25,40,70,.025)!important;
}

.studio-demo-strip .eyebrow,
.studio-demo-strip strong{
  font-size:.7rem!important;
}

/* KPI : lecture immédiate, moins de hauteur. */
.studio-kpis{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  margin:0 0 12px!important;
}

.studio-kpis > *{
  min-height:84px!important;
  padding:13px 15px!important;
  border-radius:16px!important;
}

.studio-kpis strong{
  font-size:1.6rem!important;
  line-height:1!important;
}

.studio-kpis .eyebrow{
  font-size:.66rem!important;
}

/* Filtre Studio : trois zones réelles, sans colonne fantôme. */
.studio-filter.client-filter-bar,
.client-filter-bar.studio-filter{
  grid-template-columns:minmax(0,1fr) minmax(150px,180px) auto!important;
  gap:8px!important;
  padding:8px!important;
  margin-bottom:12px!important;
}

.studio-filter input,
.studio-filter select,
.studio-filter button{
  min-height:40px!important;
}

/* Liste produits : lignes plus denses mais sans supprimer d'information. */
.studio-product-list{
  display:grid!important;
  gap:10px!important;
  margin:0!important;
}

.studio-product-row{
  display:grid!important;
  grid-template-columns:66px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:14px!important;
  min-height:108px!important;
  padding:13px 14px!important;
  border-radius:18px!important;
  border:1px solid var(--mp-product-line,#dfe4ec)!important;
  background:#fff!important;
  box-shadow:0 7px 22px rgba(25,40,70,.045)!important;
}

.studio-product-row:hover{
  border-color:#c9d4e3!important;
  box-shadow:0 12px 30px rgba(25,40,70,.075)!important;
  transform:translateY(-1px);
}

.studio-product-thumb{
  width:58px!important;
  height:58px!important;
  min-width:58px!important;
  border-radius:14px!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:.82rem!important;
}

.studio-product-thumb img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
}

.studio-product-main{
  min-width:0!important;
}

.studio-product-main h2{
  margin:4px 0 3px!important;
  font-size:clamp(1.35rem,2.1vw,2rem)!important;
  line-height:1.02!important;
  letter-spacing:-.035em!important;
  text-wrap:balance;
  overflow-wrap:anywhere;
}

.studio-product-main > p{
  margin:2px 0!important;
  font-size:.79rem!important;
  line-height:1.4!important;
  color:var(--mp-product-muted,#6e7a90)!important;
}

.studio-product-meta{
  margin-top:5px!important;
  font-size:.72rem!important;
  line-height:1.35!important;
  color:#8b96a9!important;
}

.studio-status{
  display:inline-flex!important;
  align-items:center!important;
  min-height:23px!important;
  padding:3px 8px!important;
  border-radius:999px!important;
  font-size:.63rem!important;
  font-weight:850!important;
  letter-spacing:.06em!important;
  line-height:1!important;
  white-space:nowrap!important;
}

/* Les deux actions restent immédiatement disponibles. */
.studio-product-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  flex-wrap:nowrap!important;
}

.studio-product-actions a,
.studio-product-actions button{
  min-height:36px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:7px 11px!important;
  border-radius:9px!important;
  white-space:nowrap!important;
  font-size:.73rem!important;
  line-height:1!important;
}

/* Workflow : conserver les 3 étapes mais réduire l'espace perdu. */
.studio-workflow-help{
  margin-top:14px!important;
  padding:18px 20px!important;
  border-radius:20px!important;
}

.studio-workflow-help h2{
  margin:4px 0 12px!important;
  font-size:clamp(1.8rem,3vw,2.6rem)!important;
  line-height:1!important;
}

.studio-workflow-flow{
  gap:8px!important;
}

.studio-workflow-flow > *{
  min-height:92px!important;
}

.studio-workflow-flow .card,
.studio-workflow-flow article,
.studio-workflow-flow section{
  padding:12px!important;
  border-radius:14px!important;
}

.studio-workflow-flow strong{
  font-size:.78rem!important;
}

.studio-workflow-flow p,
.studio-workflow-flow small{
  font-size:.72rem!important;
  line-height:1.35!important;
}

/* Tablette */
@media(max-width:980px){
  body.client-portal:has(.studio-product-list) .client-page-head{
    grid-template-columns:1fr!important;
    align-items:start!important;
  }

  body.client-portal:has(.studio-product-list) .client-head-actions{
    justify-content:flex-start!important;
    flex-wrap:wrap!important;
  }

  .studio-product-row{
    grid-template-columns:58px minmax(0,1fr)!important;
  }

  .studio-product-actions{
    grid-column:2!important;
    justify-content:flex-start!important;
  }
}

/* Mobile */
@media(max-width:660px){
  .studio-kpis{
    grid-template-columns:1fr!important;
  }

  .studio-filter.client-filter-bar,
  .client-filter-bar.studio-filter{
    grid-template-columns:1fr!important;
  }

  .studio-product-row{
    grid-template-columns:52px minmax(0,1fr)!important;
    gap:10px!important;
    padding:12px!important;
  }

  .studio-product-thumb{
    width:52px!important;
    height:52px!important;
    min-width:52px!important;
  }

  .studio-product-main h2{
    font-size:clamp(1.25rem,7.5vw,1.7rem)!important;
  }

  .studio-product-actions{
    grid-column:1 / -1!important;
    justify-content:stretch!important;
  }

  .studio-product-actions a,
  .studio-product-actions button{
    flex:1 1 0!important;
    min-height:40px!important;
  }

  .studio-workflow-help{
    padding:15px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .studio-product-row:hover{transform:none}
}

/* ==========================================================
   MÉMOIRES PRODUCT — A2.6-R1.2
   CORRECTIF SÉLECTEUR WORKFLOW STUDIO
   ========================================================== */

body.client-portal .studio-filter select{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  min-height:40px!important;
  height:40px!important;
  padding:7px 34px 7px 11px!important;
  border:1px solid #cfd7e5!important;
  border-radius:10px!important;
  background:#fff!important;
  background-image:none!important;
  color:#24324d!important;
  font-family:inherit!important;
  font-size:.78rem!important;
  font-weight:700!important;
  line-height:1.2!important;
  box-shadow:none!important;
  text-shadow:none!important;
  transform:none!important;
  appearance:auto!important;
  -webkit-appearance:menulist!important;
  color-scheme:light!important;
}

body.client-portal .studio-filter select:hover{
  border-color:#b8c5d8!important;
  background:#fff!important;
  color:#24324d!important;
  transform:none!important;
  box-shadow:none!important;
}

body.client-portal .studio-filter select:focus{
  border-color:#8fb2ee!important;
  background:#fff!important;
  color:#24324d!important;
  box-shadow:0 0 0 4px rgba(20,92,230,.08)!important;
  outline:none!important;
  transform:none!important;
}

body.client-portal .studio-filter select option{
  background:#fff!important;
  color:#24324d!important;
  font-family:inherit!important;
  font-size:14px!important;
  font-weight:600!important;
  line-height:1.25!important;
  padding:5px 8px!important;
  text-shadow:none!important;
}

body.client-portal .studio-filter select option:checked{
  background:#eaf1ff!important;
  color:#173e71!important;
}

body.client-portal .studio-filter button{
  min-height:40px!important;
}

/* ==========================================================
   MÉMOIRES PRODUCT — A2.6-R1.3
   CORRECTIF VISUEL DU MENU WORKFLOW GÉNÉRÉ PAR selects-v9.6.1.js
   ========================================================== */

/*
 * Le <select> natif est masqué par selects-v9.6.1.js puis remplacé par :
 * .mp-select > .mp-select-trigger + .mp-select-list > .mp-select-option
 * R1.3 cible donc le vrai contrôle visible, et non plus le select natif.
 */
body.client-portal .studio-filter .mp-select{
  width:100%!important;
  min-width:0!important;
  position:relative!important;
}

body.client-portal .studio-filter .mp-select-trigger{
  width:100%!important;
  min-width:0!important;
  min-height:40px!important;
  height:40px!important;
  padding:7px 34px 7px 11px!important;
  border:1px solid #cfd7e5!important;
  border-radius:10px!important;
  background:#fff!important;
  color:#24324d!important;
  font-family:inherit!important;
  font-size:.78rem!important;
  font-weight:700!important;
  line-height:1.2!important;
  box-shadow:none!important;
  text-shadow:none!important;
  transform:none!important;
}

body.client-portal .studio-filter .mp-select-trigger:hover{
  background:#fff!important;
  color:#24324d!important;
  border-color:#b8c5d8!important;
  box-shadow:none!important;
  transform:none!important;
}

body.client-portal .studio-filter .mp-select-trigger:focus-visible,
body.client-portal .studio-filter .mp-select-trigger[aria-expanded="true"]{
  background:#fff!important;
  color:#24324d!important;
  border-color:#8fb2ee!important;
  box-shadow:0 0 0 4px rgba(20,92,230,.08)!important;
  outline:none!important;
  transform:none!important;
}

body.client-portal .studio-filter .mp-select-arrow{
  width:10px!important;
  height:10px!important;
  border-width:0 2px 2px 0!important;
  color:#52627c!important;
  opacity:.9!important;
}

body.client-portal .studio-filter .mp-select-list{
  position:absolute!important;
  z-index:10000!important;
  left:0!important;
  right:0!important;
  top:calc(100% + 6px)!important;
  display:block;
  max-height:250px!important;
  overflow:auto!important;
  padding:5px!important;
  border:1px solid #d6deea!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:0 14px 34px rgba(15,28,52,.16)!important;
}

body.client-portal .studio-filter .mp-select-list[hidden]{
  display:none!important;
}

body.client-portal .studio-filter .mp-select-option{
  width:100%!important;
  min-height:34px!important;
  height:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  margin:0!important;
  padding:7px 9px!important;
  border:0!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#24324d!important;
  font-family:inherit!important;
  font-size:.78rem!important;
  font-weight:650!important;
  line-height:1.2!important;
  text-align:left!important;
  box-shadow:none!important;
  text-shadow:none!important;
  transform:none!important;
}

body.client-portal .studio-filter .mp-select-option:hover,
body.client-portal .studio-filter .mp-select-option.is-active{
  background:#f1f5fb!important;
  color:#173e71!important;
  box-shadow:none!important;
  transform:none!important;
}

body.client-portal .studio-filter .mp-select-option[aria-selected="true"]{
  background:#eaf1ff!important;
  color:#173e71!important;
  font-weight:800!important;
}

body.client-portal .studio-filter .mp-select-option[aria-selected="true"]::after{
  color:#145ce6!important;
  font-size:.8rem!important;
}

/* ==========================================================
   MÉMOIRES PRODUCT — A2.6-R1.4
   CORRECTIF COULEUR OPTION SÉLECTIONNÉE DU WORKFLOW
   ========================================================== */
body.client-portal .studio-filter .mp-select-option[aria-selected="true"],
body.client-portal .studio-filter .mp-select-option[aria-selected="true"]:hover,
body.client-portal .studio-filter .mp-select-option[aria-selected="true"].is-active{
  background:#145ce6!important;
  color:#ffffff!important;
  border-color:#145ce6!important;
}

body.client-portal .studio-filter .mp-select-option[aria-selected="true"]::after,
body.client-portal .studio-filter .mp-select-option[aria-selected="true"]:hover::after,
body.client-portal .studio-filter .mp-select-option[aria-selected="true"].is-active::after{
  color:#ffffff!important;
}

/* MP-A27-R1-PRODUCT-EDITOR-START */
/*
 * A2.7-R1 — Fiche / édition Produit
 * Couche visuelle uniquement.
 * Aucun changement de données, routes, formulaires ou logique métier.
 */

/* En-tête éditeur : plus compact, actions mieux alignées */
.studio-edit-head{
  margin-bottom:12px!important;
}
.studio-edit-head h1{
  margin:4px 0 6px!important;
  font-size:clamp(2.15rem,4.2vw,3.55rem)!important;
  line-height:.98!important;
  letter-spacing:-.045em!important;
}
.studio-edit-head p{
  max-width:760px;
  margin:0!important;
  color:#6b778d!important;
  line-height:1.5!important;
}
.studio-edit-head .client-head-actions{
  gap:8px!important;
  align-items:center!important;
}

/* Navigation interne : barre compacte, stable et lisible */
.studio-tabs{
  position:sticky!important;
  top:76px!important;
  z-index:18!important;
  display:flex!important;
  gap:5px!important;
  margin:0 0 12px!important;
  padding:5px!important;
  border:1px solid #dbe3ef!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 8px 24px rgba(25,48,85,.06)!important;
  backdrop-filter:blur(12px);
}
.studio-tabs a{
  padding:7px 10px!important;
  border-radius:9px!important;
  font-size:.72rem!important;
  font-weight:850!important;
  color:#4b5a72!important;
}
.studio-tabs a:hover,
.studio-tabs a:focus-visible{
  background:#eef3fa!important;
  color:#173e71!important;
}

/* Grille principale : contenu large + colonne publication plus compacte */
.studio-editor-grid{
  grid-template-columns:minmax(0,1.62fr) minmax(286px,.58fr)!important;
  gap:14px!important;
  align-items:start!important;
}
.studio-editor-main{
  gap:12px!important;
}
.studio-editor-side{
  gap:12px!important;
  top:132px!important;
}

/* Cartes de l'éditeur seulement */
.studio-editor-grid > .studio-editor-main > .card,
.studio-editor-grid > .studio-editor-side > .card{
  padding:17px!important;
  border-radius:16px!important;
  border-color:#dce4ef!important;
  box-shadow:0 10px 28px rgba(29,52,84,.045)!important;
}
.studio-editor-grid .client-section-head{
  margin-bottom:12px!important;
}
.studio-editor-grid .client-section-head h2,
.studio-editor-grid > .studio-editor-main > .card > h2,
.studio-editor-grid > .studio-editor-side > .card > h2{
  margin-top:0!important;
  margin-bottom:10px!important;
  font-size:clamp(1.35rem,2vw,1.72rem)!important;
  line-height:1.05!important;
}

/* Formulaires : moins de hauteur perdue sans sacrifier la lisibilité */
.studio-editor-grid .form-two{
  gap:10px!important;
}
.studio-editor-grid label{
  gap:5px!important;
}
.studio-editor-grid input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.studio-editor-grid select,
.studio-editor-grid textarea{
  min-height:40px!important;
  padding:9px 11px!important;
  border-radius:10px!important;
}
.studio-editor-grid textarea{
  min-height:92px!important;
  resize:vertical!important;
}
.studio-editor-grid button,
.studio-editor-grid .button{
  min-height:38px!important;
  padding:9px 12px!important;
  border-radius:10px!important;
}

/* Onglets langues */
.studio-lang-tabs{
  gap:5px!important;
  margin-bottom:10px!important;
}
.studio-lang-tabs a{
  padding:6px 9px!important;
  border-radius:8px!important;
  font-size:.69rem!important;
}

/* Médias : 3 zones compactes sur desktop */
.studio-media-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  margin-bottom:12px!important;
}
.studio-media-grid > div{
  padding:11px!important;
  border-radius:13px!important;
}
.studio-media-grid strong{
  margin-bottom:7px!important;
}
.studio-media-grid input[type="file"]{
  margin-top:7px!important;
  font-size:.72rem!important;
}
.studio-media-grid audio,
.studio-media-grid video{
  margin:6px 0!important;
}
.studio-media-preview{
  height:132px!important;
  border-radius:10px!important;
}

/* Blocs personnalisés : densité et actions alignées */
.studio-block-list{
  gap:7px!important;
  margin-bottom:12px!important;
}
.studio-block-list article{
  padding:10px 11px!important;
  border-radius:12px!important;
  gap:10px!important;
}
.studio-block-actions{
  gap:5px!important;
  flex-shrink:0!important;
}
.studio-block-actions button,
.studio-block-actions .button{
  min-height:34px!important;
  padding:7px 9px!important;
}
.studio-block-form{
  padding-top:13px!important;
}

/* Publication : véritable panneau latéral */
.studio-publication-card{
  border-color:#e0c98f!important;
  background:linear-gradient(180deg,#fffaf0 0%,#fff 76%)!important;
}
.studio-publication-card form{
  margin-top:7px!important;
}
.studio-publication-card button{
  width:100%!important;
}
.studio-publication-facts{
  margin:10px 0!important;
}
.studio-publication-facts div{
  padding:8px 0!important;
}
.studio-publication-facts span{
  font-size:.61rem!important;
}
.studio-publication-facts code{
  font-size:.64rem!important;
}

/* Révisions */
.studio-revisions div{
  padding:7px 0!important;
}
.studio-revisions strong{
  font-size:.75rem!important;
}
.studio-revisions span{
  font-size:.67rem!important;
}
.studio-revisions small{
  font-size:.62rem!important;
}

/* Checkboxes : garder le libellé bien aligné */
.studio-editor-grid .check{
  gap:7px!important;
  margin-top:7px!important;
}

/* Tablette */
@media(max-width:1020px){
  .studio-tabs{
    top:72px!important;
    overflow-x:auto!important;
  }
  .studio-editor-grid{
    grid-template-columns:1fr!important;
  }
  .studio-editor-side{
    position:static!important;
  }
  .studio-media-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Mobile */
@media(max-width:680px){
  .studio-edit-head h1{
    font-size:2.1rem!important;
  }
  .studio-edit-head .client-head-actions{
    width:100%!important;
  }
  .studio-tabs{
    position:static!important;
    margin-bottom:10px!important;
  }
  .studio-editor-grid > .studio-editor-main > .card,
  .studio-editor-grid > .studio-editor-side > .card{
    padding:14px!important;
    border-radius:14px!important;
  }
  .studio-editor-grid .form-two,
  .studio-media-grid{
    grid-template-columns:1fr!important;
  }
  .studio-media-preview{
    height:180px!important;
  }
  .studio-block-list article{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
  .studio-block-actions{
    width:100%!important;
  }
}
/* MP-A27-R1-PRODUCT-EDITOR-END */

/* MP-A27-R11-PRODUCT-EDITOR-FINISH-START */
/*
 * A2.7-R1.1 — finition visuelle de la fiche Produit
 * - colonne latérale un peu plus large ;
 * - historique des révisions compact ;
 * - zones de texte moins hautes au repos ;
 * - aucune donnée ni action masquée.
 */

.studio-editor-grid{
  grid-template-columns:minmax(0,1.48fr) minmax(330px,.70fr)!important;
  gap:14px!important;
}
.studio-editor-side{
  gap:10px!important;
}
.studio-editor-side .card{
  padding:15px!important;
  border-radius:15px!important;
}
.studio-editor-side .card h2{
  margin:0 0 10px!important;
  font-size:1.58rem!important;
  line-height:1.02!important;
  letter-spacing:-.025em!important;
}
.studio-publication-card h2{
  font-size:1.88rem!important;
}
.studio-publication-facts{
  margin:8px 0!important;
}
.studio-publication-facts div{
  padding:7px 0!important;
}
.studio-publication-facts code{
  display:block!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
  font-size:.62rem!important;
  line-height:1.25!important;
}
.studio-editor-main textarea{
  height:104px!important;
  min-height:84px!important;
  max-height:360px!important;
  resize:vertical!important;
}
.studio-revisions{
  display:block!important;
  max-height:330px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-right:4px!important;
  scrollbar-width:thin;
  scrollbar-color:#b9c5d6 transparent;
}
.studio-revisions div{
  padding:6px 0!important;
  border-bottom:1px solid #e8edf4!important;
}
.studio-revisions div:last-child{
  border-bottom:0!important;
}
.studio-revisions strong{
  display:block!important;
  margin:0 0 1px!important;
  font-size:.67rem!important;
  line-height:1.18!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}
.studio-revisions span,
.studio-revisions small{
  display:inline!important;
  font-size:.58rem!important;
  line-height:1.2!important;
  color:#8a96a8!important;
}
.studio-editor-side button,
.studio-editor-side .button{
  min-height:36px!important;
  padding:8px 10px!important;
}
@media(max-width:1020px){
  .studio-editor-grid{
    grid-template-columns:1fr!important;
  }
  .studio-revisions{
    max-height:none!important;
    overflow:visible!important;
    padding-right:0!important;
  }
}
@media(max-width:680px){
  .studio-editor-main textarea{
    height:118px!important;
  }
}
/* MP-A27-R11-PRODUCT-EDITOR-FINISH-END */

/* MP-A28-R1-ANALYTICS-START */
/*
 * MÉMOIRES PRODUCT — A2.8-R1 — ANALYTICS
 * Modernisation visuelle de /client/analytics.php.
 * CSS uniquement : aucune requête, donnée, route ou logique métier n'est modifiée.
 */

/* En-tête : plus compact et mieux aligné avec le reste du portail. */
.analytics-business-head{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:18px!important;
  margin:0 0 14px!important;
}
.analytics-business-head h1{
  margin:4px 0 5px!important;
  font-size:clamp(2.25rem,3.6vw,3rem)!important;
  line-height:1!important;
  letter-spacing:-.045em!important;
}
.analytics-business-head p{
  margin:0!important;
  max-width:720px!important;
  color:var(--mp-muted)!important;
}
.analytics-business-head .client-head-actions{
  gap:8px!important;
  align-items:center!important;
}

/* KPI principaux : plus denses, sans réduire l'information. */
.business-kpis{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
  margin:0 0 12px!important;
}
.business-kpis > *{
  min-height:98px!important;
  padding:14px 15px!important;
  border-radius:16px!important;
}
.business-kpi-name{
  margin:0 0 7px!important;
  color:#78859a!important;
  font-size:.66rem!important;
  font-weight:850!important;
  letter-spacing:.09em!important;
  line-height:1.15!important;
  text-transform:uppercase!important;
}
.business-metric{
  min-width:0!important;
}
.business-metric strong,
.business-metric > b{
  font-size:1.72rem!important;
  line-height:1!important;
  letter-spacing:-.035em!important;
}
.business-trend{
  display:inline-flex!important;
  align-items:center!important;
  min-height:22px!important;
  margin-top:8px!important;
  padding:3px 8px!important;
  border-radius:999px!important;
  font-size:.66rem!important;
  font-weight:800!important;
  line-height:1.2!important;
}

/* Graphique quotidien : priorité à la lecture, moins de hauteur perdue. */
.business-chart-card{
  padding:18px 20px!important;
  border-radius:18px!important;
}
.business-chart-card h2{
  margin:3px 0 8px!important;
  font-size:clamp(2rem,3.1vw,2.65rem)!important;
  line-height:1.02!important;
  letter-spacing:-.04em!important;
}
.business-chart{
  min-height:250px!important;
}
.business-chart-bars{
  min-height:205px!important;
  height:205px!important;
  margin-top:4px!important;
}
.business-chart-day{
  min-width:0!important;
  font-size:.60rem!important;
  line-height:1.1!important;
}

/* Tableaux / classements : densité maîtrisée et lecture plus nette. */
.table-scroll{
  overflow:auto!important;
  border-radius:12px!important;
}
.business-table{
  width:100%!important;
  border-collapse:collapse!important;
}
.business-table th,
.business-table td{
  padding:8px 7px!important;
  line-height:1.25!important;
  vertical-align:middle!important;
}
.business-table th{
  color:#718097!important;
  font-size:.64rem!important;
  font-weight:850!important;
  letter-spacing:.07em!important;
  text-transform:uppercase!important;
}
.business-product-ranking{
  gap:0!important;
}
.business-product-ranking > *{
  padding-top:10px!important;
  padding-bottom:10px!important;
}

/* Les cartes Analytics utilisent les mêmes proportions que le portail A2. */
body.client-portal .business-chart-card,
body.client-portal .business-table,
body.client-portal .business-product-ranking{
  border-color:var(--mp-border)!important;
}

/* États vides : compacts mais visibles. */
.client-empty-state{
  padding:20px!important;
  border-radius:15px!important;
}

/* Les petits indicateurs du bas ne doivent pas redevenir hauts. */
body.client-portal .business-metric{
  min-height:90px!important;
  padding:14px!important;
  border-radius:16px!important;
}

/* Responsive */
@media(max-width:980px){
  .analytics-business-head{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
  .business-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .business-chart{
    min-height:235px!important;
  }
  .business-chart-bars{
    min-height:190px!important;
    height:190px!important;
  }
}

@media(max-width:680px){
  .analytics-business-head h1{
    font-size:2.15rem!important;
  }
  .analytics-business-head .client-head-actions{
    width:100%!important;
    justify-content:flex-start!important;
  }
  .business-kpis{
    grid-template-columns:1fr!important;
  }
  .business-kpis > *,
  body.client-portal .business-metric{
    min-height:82px!important;
  }
  .business-chart-card{
    padding:15px!important;
  }
  .business-chart-card h2{
    font-size:2rem!important;
  }
  .business-chart{
    min-height:215px!important;
  }
  .business-chart-bars{
    min-height:170px!important;
    height:170px!important;
  }
  .business-table th,
  .business-table td{
    padding:7px 6px!important;
  }
}
/* MP-A28-R1-ANALYTICS-END */

/* MEMOIRES_PRODUCT_A2_9_R1_QR_STUDIO_START */
/*
 * A2.9-R1 — QR Studio
 * CSS uniquement : aucune donnée, route, requête, génération QR ou logique métier modifiée.
 */

/* Sélection du produit : plus basse et plus directe. */
.client-qr-picker.card{
  padding:16px 18px!important;
  margin-bottom:16px!important;
}
.client-qr-picker label{
  margin:0 0 7px!important;
  font-size:.78rem!important;
  line-height:1.2!important;
}
.client-qr-picker select,
.client-qr-picker .mp-select-trigger{
  min-height:42px!important;
  padding-top:8px!important;
  padding-bottom:8px!important;
  font-size:.92rem!important;
  border-radius:11px!important;
}

/* Zone principale : aperçu dominant + réglages compacts. */
.qr-studio-grid{
  grid-template-columns:minmax(0,1fr) minmax(300px,360px)!important;
  gap:16px!important;
  align-items:start!important;
}
.qr-preview-card.card{
  padding:20px!important;
}
.qr-preview-card h1,
.qr-preview-card h2{
  line-height:1!important;
  letter-spacing:-.035em!important;
}
.qr-preview-card h2{
  font-size:clamp(2rem,3vw,2.75rem)!important;
  margin:0 0 8px!important;
}

/* QR : conserve toute la lisibilité mais évite de monopoliser la page. */
.qr-canvas{
  max-width:380px!important;
  margin:16px auto!important;
  padding:16px!important;
  border-radius:18px!important;
}
.qr-canvas img,
.qr-canvas canvas{
  max-width:100%!important;
  height:auto!important;
}

/* Digital Link et actions plus proches du QR. */
.qr-url-box{
  margin-top:12px!important;
  padding:10px 12px!important;
  border-radius:11px!important;
}
.qr-url-box span{
  margin-bottom:3px!important;
}
.qr-actions{
  gap:8px!important;
  margin-top:12px!important;
}
.qr-actions a,
.qr-actions button{
  min-height:38px!important;
  padding:9px 12px!important;
  border-radius:9px!important;
}

/* Panneau Export : plus compact, mais aucun réglage supprimé. */
.qr-settings.card{
  padding:20px!important;
  top:82px!important;
}
.qr-settings h1,
.qr-settings h2{
  line-height:1!important;
  letter-spacing:-.035em!important;
}
.qr-settings h2{
  font-size:2rem!important;
  margin:0 0 12px!important;
}
.qr-settings label{
  margin:8px 0 5px!important;
  font-size:.8rem!important;
  line-height:1.25!important;
}
.qr-settings select,
.qr-settings input[type="text"],
.qr-settings .mp-select-trigger{
  min-height:42px!important;
  padding-top:8px!important;
  padding-bottom:8px!important;
  border-radius:10px!important;
  font-size:.9rem!important;
}
.qr-settings p{
  margin-top:8px!important;
  margin-bottom:8px!important;
  line-height:1.45!important;
}

/* Les menus enrichis générés par le select restent compacts et lisibles. */
.client-qr-picker .mp-select-list,
.qr-settings .mp-select-list{
  border-radius:12px!important;
  padding:6px!important;
}
.client-qr-picker .mp-select-option,
.qr-settings .mp-select-option{
  min-height:40px!important;
  padding:8px 10px!important;
  font-size:.9rem!important;
  border-radius:8px!important;
}

/* Responsive : aucune perte d'information. */
@media(max-width:900px){
  .qr-studio-grid{
    grid-template-columns:1fr!important;
  }
  .qr-settings.card{
    position:static!important;
  }
  .qr-canvas{
    max-width:360px!important;
  }
}
@media(max-width:620px){
  .client-qr-picker.card,
  .qr-preview-card.card,
  .qr-settings.card{
    padding:14px!important;
  }
  .qr-canvas{
    max-width:100%!important;
    padding:12px!important;
  }
  .qr-actions{
    align-items:stretch!important;
  }
  .qr-actions a,
  .qr-actions button{
    flex:1 1 auto!important;
    text-align:center!important;
  }
}
/* MEMOIRES_PRODUCT_A2_9_R1_QR_STUDIO_END */

/* MP-A2.11-R1-TEAM-START */
/* Mémoires Product A2.11-R1 — Équipe : densité et lisibilité, CSS uniquement */
.client-team-layout{grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr);gap:14px;align-items:start;margin-bottom:14px}
.client-team-layout>.card{padding:18px}
.client-team-layout h2,.client-team-members h2,.client-pending-invites h2{margin-top:0}
.client-team-members{gap:8px}
.client-team-members article{grid-template-columns:38px minmax(0,1fr) auto minmax(118px,155px) auto;gap:9px;align-items:center;padding:10px 12px;border-radius:14px;min-width:0}
.client-team-avatar{width:36px;height:36px;border-radius:11px;font-size:.78rem}
.client-team-members article>div:nth-child(2){min-width:0}
.client-team-members article>div:nth-child(2) strong,.client-team-members article>div:nth-child(2) small,.client-team-members article>div:nth-child(2) em{overflow-wrap:anywhere}
.client-team-role-form{min-width:0}.client-team-role-form select{width:100%;min-height:38px;padding-top:7px;padding-bottom:7px}.client-self-role{line-height:1.3}
.client-pending-invites{gap:6px}.client-pending-invites article{gap:12px;padding:9px 0;min-width:0}.client-pending-invites article>*{min-width:0}
.client-invite-link{grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;margin-bottom:14px;padding:12px 14px;border-radius:14px}
.client-invite-link code{display:block;min-width:0;overflow-wrap:anywhere;word-break:break-word}
.client-role-guide{gap:7px;margin-top:16px;padding-top:14px}.client-role-guide div{grid-template-columns:105px minmax(0,1fr);gap:9px}
@media(max-width:980px){.client-team-layout{grid-template-columns:1fr}.client-team-members article{grid-template-columns:38px minmax(0,1fr) minmax(118px,155px) auto}.client-team-members article>:nth-child(3){grid-column:2/-1}}
@media(max-width:680px){.client-team-layout>.card{padding:15px}.client-team-members article{grid-template-columns:36px minmax(0,1fr);gap:8px 10px}.client-team-members article>:nth-child(n+3){grid-column:1/-1}.client-team-role-form select{min-height:42px}.client-pending-invites article{align-items:flex-start;flex-direction:column}.client-invite-link{grid-template-columns:1fr;align-items:stretch}.client-role-guide div{grid-template-columns:1fr;gap:2px}}
/* MP-A2.11-R1-TEAM-END */

/* MP-A2.11-R1.1-TEAM-VISUAL-START */
/*
 * Correctif visuel A2.11-R1.1.
 * Neutralise uniquement, pour Équipe, le breakpoint historique <=1050
 * qui faisait passer tous les formulaires membres sur une ligne complète,
 * et compacte les selects enrichis uniquement dans cette surface.
 */

/* Invitation + rôles : le moteur de selects global reste inchangé. */
.client-team-layout .mp-select-trigger,
.client-team-members .mp-select-trigger{
  min-height:42px;
  padding:8px 11px;
  border-radius:10px;
  font-size:14px!important;
  line-height:1.25;
  text-align:left;
}

.client-team-layout .mp-select-option,
.client-team-members .mp-select-option{
  min-height:38px;
  padding:8px 10px;
  border-radius:9px;
  font-size:14px!important;
  line-height:1.25;
}

.client-team-layout .mp-select-list,
.client-team-members .mp-select-list{
  padding:6px;
  border-radius:12px;
}

/* Éviter tout mot de rôle cassé verticalement. */
.client-self-role,
.client-team-role-form,
.client-team-role-form .mp-select,
.client-team-role-form .mp-select-value{
  min-width:0;
}

.client-self-role{
  white-space:nowrap;
  overflow-wrap:normal;
  word-break:normal;
}

/*
 * Le CSS historique applique à <=1050 :
 * .client-team-members article form{grid-column:2/-1}
 * On le neutralise explicitement et on place les actions sur une seconde
 * ligne compacte, sans toucher au HTML ni aux formulaires.
 */
@media (max-width:1050px) and (min-width:681px){
  .client-team-members article{
    grid-template-columns:38px minmax(0,1fr) auto!important;
    gap:8px 10px;
    align-items:center;
  }

  .client-team-members article > .client-team-avatar{
    grid-column:1;
    grid-row:1;
  }

  .client-team-members article > div:nth-child(2){
    grid-column:2;
    grid-row:1;
  }

  .client-team-members article > .qr-status{
    grid-column:3;
    grid-row:1;
    justify-self:end;
  }

  .client-team-members article > .client-self-role{
    grid-column:2 / 3!important;
    grid-row:2;
    justify-self:start;
    align-self:center;
  }

  .client-team-members article > form{
    grid-column:auto!important;
  }

  .client-team-members article > .client-team-role-form{
    grid-column:2 / 3!important;
    grid-row:2;
    width:min(190px,100%);
    justify-self:start;
  }

  .client-team-members article > form:not(.client-team-role-form){
    grid-column:3!important;
    grid-row:2;
    justify-self:end;
    width:auto;
  }

  .client-team-members article > form:not(.client-team-role-form) button{
    width:auto;
    min-width:108px;
  }
}

/* Mobile : une hiérarchie verticale propre, sans largeur forcée. */
@media (max-width:680px){
  .client-team-members article > form{
    grid-column:1 / -1!important;
    width:100%;
  }

  .client-team-members article > .client-team-role-form,
  .client-team-members article > .client-self-role{
    grid-column:1 / -1!important;
    grid-row:auto;
    width:100%;
    justify-self:stretch;
  }

  .client-team-members article > .client-self-role{
    white-space:normal;
  }

  .client-team-members article > form:not(.client-team-role-form){
    grid-column:1 / -1!important;
    grid-row:auto;
    justify-self:stretch;
  }

  .client-team-members article > form:not(.client-team-role-form) button{
    width:100%;
  }
}
/* MP-A2.11-R1.1-TEAM-VISUAL-END */

/* MEMOIRES PRODUCT A2.12-R1 OFFRE-USAGE START */
/*
 * A2.12-R1 — Offre & usage
 * Présentation uniquement. Aucun HTML, aucune route, aucune donnée métier modifiés.
 */

.client-page-head{
  gap:18px!important;
  margin-bottom:14px!important;
}
.client-page-head h1{
  margin-bottom:4px!important;
}
.client-head-actions{
  gap:8px!important;
  align-items:center!important;
  flex-wrap:wrap!important;
}

.plan-overview-card{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:0!important;
  padding:18px 22px!important;
  border-radius:18px!important;
  overflow:hidden!important;
}
.plan-overview-card > *{
  min-width:0!important;
  padding:0 16px!important;
  border-left:1px solid rgba(255,255,255,.14)!important;
}
.plan-overview-card > *:first-child{
  padding-left:0!important;
  border-left:0!important;
}
.plan-overview-card > *:last-child{
  padding-right:0!important;
}

.quota-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  margin-top:10px!important;
}
.quota-grid > *{
  min-width:0!important;
  padding:14px 16px!important;
  border-radius:16px!important;
}
.quota-card-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin-bottom:9px!important;
}
.quota-bar{
  height:7px!important;
  border-radius:999px!important;
  overflow:hidden!important;
}
.quota-unlimited{
  min-height:7px!important;
}

.plan-features{
  padding-top:2px!important;
}
.plan-feature-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:9px!important;
}
.plan-feature-grid > *{
  min-width:0!important;
  padding:13px 14px!important;
  border-radius:14px!important;
}

.quota-alert-card{
  padding:19px 22px!important;
  margin-top:0!important;
}
.quota-alert-card h2{
  font-size:clamp(1.65rem,2.6vw,2.25rem)!important;
  line-height:1.03!important;
  margin:.15em 0 .42em!important;
  max-width:900px!important;
}
.quota-alert-card p{
  max-width:980px!important;
  margin-bottom:0!important;
}

.business-privacy-note{
  padding:18px 22px!important;
  border-radius:18px!important;
}

@media (max-width:980px){
  .plan-overview-card{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    row-gap:16px!important;
  }
  .plan-overview-card > *{
    padding:0 14px!important;
  }
  .plan-overview-card > *:nth-child(odd){
    padding-left:0!important;
    border-left:0!important;
  }
  .quota-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .plan-feature-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:680px){
  .client-page-head{
    display:block!important;
  }
  .client-head-actions{
    margin-top:12px!important;
  }
  .client-head-actions > *{
    flex:1 1 auto!important;
  }
  .plan-overview-card{
    grid-template-columns:1fr!important;
    gap:12px!important;
    padding:16px!important;
  }
  .plan-overview-card > *{
    padding:12px 0 0!important;
    border-left:0!important;
    border-top:1px solid rgba(255,255,255,.14)!important;
  }
  .plan-overview-card > *:first-child{
    padding-top:0!important;
    border-top:0!important;
  }
  .quota-grid,
  .plan-feature-grid{
    grid-template-columns:1fr!important;
  }
  .quota-alert-card,
  .business-privacy-note{
    padding:16px!important;
  }
}
/* MEMOIRES PRODUCT A2.12-R1 OFFRE-USAGE END */

/* MEMOIRES PRODUCT A2.13-R1 ABONNEMENT START */
/*
 * A2.13-R1 — Abonnement
 * Présentation uniquement.
 * Aucun PHP, aucune route, aucun formulaire, aucune donnée,
 * aucun moteur Stripe et aucune logique de changement d'offre modifiés.
 */

@supports selector(.client-dashboard-grid:has(input[name="target_plan"])){

  /* Grille propre et strictement bornée à la page Abonnement. */
  body.client-portal .client-dashboard-grid:has(input[name="target_plan"]){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
    align-items:stretch!important;
    margin-bottom:12px!important;
  }

  body.client-portal .client-dashboard-grid:has(input[name="target_plan"]) > .card{
    min-width:0!important;
    padding:20px 22px!important;
    border-radius:18px!important;
    display:flex!important;
    flex-direction:column!important;
  }

  /* Offre actuelle : lecture immédiate sans ajouter d'information. */
  body.client-portal .client-dashboard-grid:has(input[name="target_plan"]) > .card:first-child{
    background:
      linear-gradient(180deg,rgba(13,36,73,.035),rgba(255,255,255,.98))!important;
    border-color:color-mix(in srgb,var(--mp-primary) 16%,var(--mp-border))!important;
  }

  body.client-portal .client-dashboard-grid:has(input[name="target_plan"]) > .card h2{
    margin:.2em 0 .35em!important;
    font-size:clamp(1.9rem,3vw,2.55rem)!important;
    line-height:.98!important;
    letter-spacing:-.04em!important;
  }

  /* Les montants sont importants, mais ne doivent pas dominer la page. */
  body.client-portal .client-dashboard-grid:has(input[name="target_plan"]) > .card > p[style*="font-size:2rem"]{
    margin:.18em 0 .55em!important;
    font-size:clamp(1.35rem,2.1vw,1.7rem)!important;
    line-height:1.15!important;
  }

  body.client-portal .client-dashboard-grid:has(input[name="target_plan"]) .client-detail-list{
    margin-top:auto!important;
  }

  body.client-portal .client-dashboard-grid:has(input[name="target_plan"]) .client-detail-list > div{
    grid-template-columns:minmax(105px,145px) 1fr!important;
    gap:12px!important;
    padding:9px 0!important;
  }

  body.client-portal .client-dashboard-grid:has(input[name="target_plan"]) .client-detail-list > div:last-child{
    border-bottom:0!important;
  }

  /* Encadré de changement réel plus compact, texte intégralement conservé. */
  body.client-portal .client-dashboard-grid:has(input[name="target_plan"]) .alert{
    margin:4px 0 10px!important;
    padding:10px 12px!important;
    border-radius:12px!important;
    font-size:.82rem!important;
    line-height:1.4!important;
  }

  /* Formulaire LIVE : confirmation et action restent clairement séparées. */
  body.client-portal .client-dashboard-grid:has(input[name="target_plan"]) form{
    margin-top:auto!important;
    display:grid!important;
    gap:9px!important;
  }

  body.client-portal .client-dashboard-grid:has(input[name="target_plan"]) form > label{
    display:grid!important;
    grid-template-columns:18px minmax(0,1fr)!important;
    gap:9px!important;
    align-items:start!important;
    margin:0!important;
    padding:10px 11px!important;
    border:1px solid var(--mp-border)!important;
    border-radius:12px!important;
    background:var(--mp-surface-soft)!important;
    font-size:.8rem!important;
    line-height:1.4!important;
  }

  body.client-portal .client-dashboard-grid:has(input[name="target_plan"]) input[name="confirm_live"]{
    width:16px!important;
    height:16px!important;
    margin:2px 0 0!important;
    accent-color:var(--mp-primary)!important;
  }

  body.client-portal .client-dashboard-grid:has(input[name="target_plan"]) form > button{
    width:100%!important;
    min-height:40px!important;
    margin:0!important;
  }

  /* Carte Sécurité juste sous la vraie grille Abonnement. */
  body.client-portal .client-dashboard-grid:has(input[name="target_plan"]) + .card{
    padding:15px 20px!important;
    border-radius:16px!important;
  }

  body.client-portal .client-dashboard-grid:has(input[name="target_plan"]) + .card p{
    margin:.35em 0 0!important;
    max-width:980px!important;
    color:var(--mp-muted)!important;
    font-size:.82rem!important;
    line-height:1.5!important;
  }

  @media (max-width:760px){
    body.client-portal .client-dashboard-grid:has(input[name="target_plan"]){
      grid-template-columns:1fr!important;
    }

    body.client-portal .client-dashboard-grid:has(input[name="target_plan"]) > .card{
      padding:18px!important;
    }

    body.client-portal .client-dashboard-grid:has(input[name="target_plan"]) .client-detail-list > div{
      grid-template-columns:1fr!important;
      gap:3px!important;
    }

    body.client-portal .client-dashboard-grid:has(input[name="target_plan"]) + .card{
      padding:15px 17px!important;
    }
  }
}
/* MEMOIRES PRODUCT A2.13-R1 ABONNEMENT END */

/* MEMOIRES PRODUCT A2.14-R1 FACTURATION START */
/*
 * A2.14-R1 — Facturation
 * Présentation uniquement.
 * /client/billing.php, données, formulaires, Stripe, SQL,
 * moteur V9.6.3 et routes restent strictement inchangés.
 */

@supports selector(body:has(.billing-summary-grid)){

  /* Toute la branche est bornée à la vraie surface Facturation active. */
  body.client-portal:has(.billing-summary-grid) .client-page-head{
    margin-bottom:12px!important;
  }

  body.client-portal:has(.billing-summary-grid) .client-page-head > div > p{
    max-width:760px!important;
  }

  body.client-portal:has(.billing-summary-grid) .subscription-badge{
    white-space:nowrap!important;
  }

  /* Résumé haut : quatre indicateurs lisibles sans hauteur inutile. */
  body.client-portal:has(.billing-summary-grid) .billing-summary-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:10px!important;
    margin-bottom:12px!important;
  }

  body.client-portal:has(.billing-summary-grid) .billing-summary-grid > .card{
    min-width:0!important;
    min-height:108px!important;
    padding:15px 17px!important;
    border-radius:16px!important;
  }

  body.client-portal:has(.billing-summary-grid) .billing-summary-grid > .card > span{
    margin-bottom:6px!important;
    font-size:.69rem!important;
    line-height:1.25!important;
    letter-spacing:.08em!important;
  }

  body.client-portal:has(.billing-summary-grid) .billing-summary-grid > .card > strong{
    font-size:1.12rem!important;
    line-height:1.18!important;
    overflow-wrap:anywhere!important;
  }

  body.client-portal:has(.billing-summary-grid) .billing-summary-grid > .card > small{
    margin-top:6px!important;
    line-height:1.35!important;
  }

  /* Aperçu prochaine facture + consommation : mêmes proportions. */
  body.client-portal:has(.billing-summary-grid) .billing-current{
    padding:18px 20px!important;
    border-radius:18px!important;
    margin-top:0!important;
  }

  body.client-portal:has(.billing-summary-grid) .billing-current h2{
    margin:.18em 0 .48em!important;
    font-size:clamp(1.9rem,3vw,2.55rem)!important;
    line-height:1!important;
    letter-spacing:-.035em!important;
  }

  body.client-portal:has(.billing-summary-grid) .billing-current-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
  }

  body.client-portal:has(.billing-summary-grid) .billing-current-grid > div{
    min-width:0!important;
    padding:11px 13px!important;
    border-radius:12px!important;
  }

  body.client-portal:has(.billing-summary-grid) .billing-current-grid > div span{
    font-size:.68rem!important;
    letter-spacing:.07em!important;
    line-height:1.25!important;
  }

  body.client-portal:has(.billing-summary-grid) .billing-current-grid > div strong{
    margin-top:4px!important;
    font-size:1rem!important;
    line-height:1.2!important;
  }

  body.client-portal:has(.billing-summary-grid) .billing-current .help{
    margin:10px 0 0!important;
    font-size:.78rem!important;
    line-height:1.45!important;
  }

  /* Carte du moyen de paiement : action conservée, densité améliorée. */
  body.client-portal:has(.billing-summary-grid) section.card:has(form[action="/client/payment-method.php"]){
    padding:18px 20px!important;
    border-radius:18px!important;
  }

  body.client-portal:has(.billing-summary-grid) section.card:has(form[action="/client/payment-method.php"]) h2{
    margin:.16em 0 .35em!important;
    font-size:clamp(1.8rem,2.8vw,2.35rem)!important;
    line-height:1.02!important;
  }

  body.client-portal:has(.billing-summary-grid) section.card:has(form[action="/client/payment-method.php"]) p{
    margin:.45em 0!important;
    max-width:900px!important;
  }

  body.client-portal:has(.billing-summary-grid) section.card:has(form[action="/client/payment-method.php"]) form{
    margin-top:10px!important;
  }

  body.client-portal:has(.billing-summary-grid) section.card:has(form[action="/client/payment-method.php"]) button{
    width:100%!important;
    min-height:40px!important;
    margin:0!important;
  }

  /* Factures : table conservée intégralement, mais moins haute. */
  body.client-portal:has(.billing-summary-grid) section.card:has(.business-table){
    padding:18px 20px!important;
    border-radius:18px!important;
  }

  body.client-portal:has(.billing-summary-grid) section.card:has(.business-table) h2{
    margin:.16em 0 .45em!important;
    font-size:clamp(1.8rem,2.8vw,2.35rem)!important;
    line-height:1.02!important;
  }

  body.client-portal:has(.billing-summary-grid) section.card:has(.business-table) .table-scroll{
    margin-top:4px!important;
  }

  body.client-portal:has(.billing-summary-grid) section.card:has(.business-table) .business-table th,
  body.client-portal:has(.billing-summary-grid) section.card:has(.business-table) .business-table td{
    padding:8px 9px!important;
    font-size:.78rem!important;
    line-height:1.35!important;
    vertical-align:middle!important;
  }

  body.client-portal:has(.billing-summary-grid) section.card:has(.business-table) .subscription-badge{
    font-size:.67rem!important;
  }

  /* Dernière carte : les deux accès restent visibles sans grand espace perdu. */
  body.client-portal:has(.billing-summary-grid) section.card:has(a[href="/client/abonnement.php"]):has(a[href="/client/usage.php"]){
    padding:16px 20px!important;
    border-radius:18px!important;
  }

  body.client-portal:has(.billing-summary-grid) section.card:has(a[href="/client/abonnement.php"]):has(a[href="/client/usage.php"]) h2{
    margin:.14em 0 .38em!important;
    font-size:clamp(1.75rem,2.7vw,2.25rem)!important;
    line-height:1.02!important;
  }

  body.client-portal:has(.billing-summary-grid) section.card:has(a[href="/client/abonnement.php"]):has(a[href="/client/usage.php"]) p{
    margin:0!important;
    display:flex!important;
    gap:8px!important;
    flex-wrap:wrap!important;
  }

  body.client-portal:has(.billing-summary-grid) section.card:has(a[href="/client/abonnement.php"]):has(a[href="/client/usage.php"]) .button{
    min-height:38px!important;
    display:inline-flex!important;
    align-items:center!important;
  }

  /* Messages éventuels de la page : conserver l'information, réduire la hauteur. */
  body.client-portal:has(.billing-summary-grid) > .notice,
  body.client-portal:has(.billing-summary-grid) > .alert{
    padding:11px 13px!important;
    margin:10px 0!important;
    border-radius:12px!important;
  }

  @media (max-width:980px){
    body.client-portal:has(.billing-summary-grid) .billing-summary-grid{
      grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
  }

  @media (max-width:680px){
    body.client-portal:has(.billing-summary-grid) .billing-summary-grid,
    body.client-portal:has(.billing-summary-grid) .billing-current-grid{
      grid-template-columns:1fr!important;
    }

    body.client-portal:has(.billing-summary-grid) .billing-summary-grid > .card,
    body.client-portal:has(.billing-summary-grid) .billing-current,
    body.client-portal:has(.billing-summary-grid) section.card:has(form[action="/client/payment-method.php"]),
    body.client-portal:has(.billing-summary-grid) section.card:has(.business-table),
    body.client-portal:has(.billing-summary-grid) section.card:has(a[href="/client/abonnement.php"]):has(a[href="/client/usage.php"]){
      padding:16px!important;
    }

    body.client-portal:has(.billing-summary-grid) section.card:has(.business-table) .business-table{
      min-width:640px!important;
    }
  }
}
/* MEMOIRES PRODUCT A2.14-R1 FACTURATION END */

/* MEMOIRES PRODUCT A2.16-R1 MON COMPTE START */
/*
 * A2.16-R1 — Mon compte
 * Présentation uniquement.
 * /client/account.php, formulaires, CSRF, mot de passe, sessions,
 * sécurité, SQL, routes et données restent strictement inchangés.
 */

@supports selector(body:has(.client-account-grid)){

  /* Branche strictement bornée à la vraie page Mon compte. */
  body.client-portal:has(.client-account-grid) .client-page-head{
    margin-bottom:12px!important;
    gap:16px!important;
  }

  body.client-portal:has(.client-account-grid) .client-page-head h1{
    margin:.08em 0 .12em!important;
    font-size:clamp(2.25rem,3.5vw,3.45rem)!important;
    line-height:1!important;
  }

  body.client-portal:has(.client-account-grid) .client-page-head p{
    max-width:760px!important;
    line-height:1.45!important;
  }

  /* Les quatre cartes principales restent en 2 colonnes, mais plus denses. */
  body.client-portal:has(.client-account-grid) .client-account-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
    margin-bottom:12px!important;
    align-items:stretch!important;
  }

  body.client-portal:has(.client-account-grid) .client-account-grid > .card{
    min-width:0!important;
    padding:17px 19px!important;
    border-radius:18px!important;
  }

  /* Identité : avatar et résumé plus compacts. */
  body.client-portal:has(.client-account-grid) .client-account-profile{
    gap:11px!important;
    margin-bottom:9px!important;
  }

  body.client-portal:has(.client-account-grid) .client-account-avatar{
    width:48px!important;
    height:48px!important;
    flex:0 0 48px!important;
    border-radius:14px!important;
    font-size:1.15rem!important;
  }

  body.client-portal:has(.client-account-grid) .client-account-profile h2{
    margin:0!important;
    font-size:clamp(1.7rem,2.5vw,2.15rem)!important;
    line-height:1!important;
    overflow-wrap:anywhere!important;
  }

  body.client-portal:has(.client-account-grid) .client-account-profile p{
    margin:3px 0 0!important;
    font-size:.77rem!important;
    line-height:1.35!important;
  }

  body.client-portal:has(.client-account-grid) .client-detail-list > div{
    grid-template-columns:105px minmax(0,1fr)!important;
    gap:10px!important;
    padding:7px 0!important;
  }

  body.client-portal:has(.client-account-grid) .client-detail-list span{
    font-size:.75rem!important;
    line-height:1.35!important;
  }

  body.client-portal:has(.client-account-grid) .client-detail-list strong{
    min-width:0!important;
    font-size:.79rem!important;
    line-height:1.35!important;
    overflow-wrap:anywhere!important;
  }

  /* Titres, textes et formulaires internes. */
  body.client-portal:has(.client-account-grid) .client-account-grid > .card .eyebrow{
    margin-bottom:5px!important;
  }

  body.client-portal:has(.client-account-grid) .client-account-grid > .card h2{
    margin:.08em 0 .42em!important;
    font-size:clamp(1.75rem,2.6vw,2.2rem)!important;
    line-height:1.02!important;
  }

  body.client-portal:has(.client-account-grid) .client-account-grid > .card p{
    margin:.42em 0!important;
    line-height:1.4!important;
  }

  body.client-portal:has(.client-account-grid) .client-account-grid form{
    gap:8px!important;
  }

  body.client-portal:has(.client-account-grid) .client-account-grid form label{
    margin:0!important;
    font-size:.76rem!important;
    line-height:1.25!important;
  }

  body.client-portal:has(.client-account-grid) .client-account-grid form input{
    min-width:0!important;
    min-height:40px!important;
    padding:8px 10px!important;
    border-radius:9px!important;
  }

  body.client-portal:has(.client-account-grid) .client-account-grid form button{
    min-height:40px!important;
    padding:8px 12px!important;
    border-radius:9px!important;
  }

  body.client-portal:has(.client-account-grid) .client-account-grid form .help,
  body.client-portal:has(.client-account-grid) .client-account-grid small{
    font-size:.70rem!important;
    line-height:1.35!important;
  }

  body.client-portal:has(.client-account-grid) .client-account-grid .button.secondary{
    min-height:34px!important;
    padding:7px 9px!important;
    font-size:.72rem!important;
    display:inline-flex!important;
    align-items:center!important;
  }

  /* Appareils connectés / Activité : même information, mais lecture horizontale desktop. */
  body.client-portal:has(.client-account-grid) .client-account-grid ~ .card{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    column-gap:18px!important;
    align-items:center!important;
    padding:15px 19px!important;
    margin-top:12px!important;
    border-radius:18px!important;
  }

  body.client-portal:has(.client-account-grid) .client-account-grid ~ .card > .eyebrow,
  body.client-portal:has(.client-account-grid) .client-account-grid ~ .card > h2,
  body.client-portal:has(.client-account-grid) .client-account-grid ~ .card > p:not(:has(.button)){
    grid-column:1!important;
  }

  body.client-portal:has(.client-account-grid) .client-account-grid ~ .card > .eyebrow{
    margin:0 0 3px!important;
  }

  body.client-portal:has(.client-account-grid) .client-account-grid ~ .card > h2{
    margin:.05em 0 .18em!important;
    font-size:clamp(1.75rem,2.6vw,2.2rem)!important;
    line-height:1.02!important;
  }

  body.client-portal:has(.client-account-grid) .client-account-grid ~ .card > p:not(:has(.button)){
    margin:.25em 0!important;
    max-width:760px!important;
    line-height:1.4!important;
  }

  body.client-portal:has(.client-account-grid) .client-account-grid ~ .card > p:has(.button){
    grid-column:2!important;
    grid-row:1 / span 3!important;
    margin:0!important;
    align-self:center!important;
  }

  body.client-portal:has(.client-account-grid) .client-account-grid ~ .card .button{
    min-height:36px!important;
    padding:8px 11px!important;
    display:inline-flex!important;
    align-items:center!important;
    white-space:nowrap!important;
  }

  @media (max-width:900px){
    body.client-portal:has(.client-account-grid) .client-account-grid{
      grid-template-columns:1fr!important;
    }

    body.client-portal:has(.client-account-grid) .client-account-grid ~ .card{
      display:block!important;
    }

    body.client-portal:has(.client-account-grid) .client-account-grid ~ .card > p:has(.button){
      margin-top:10px!important;
    }
  }

  @media (max-width:680px){
    body.client-portal:has(.client-account-grid) .client-page-head h1{
      font-size:clamp(2rem,10vw,2.65rem)!important;
    }

    body.client-portal:has(.client-account-grid) .client-account-grid > .card,
    body.client-portal:has(.client-account-grid) .client-account-grid ~ .card{
      padding:15px!important;
    }

    body.client-portal:has(.client-account-grid) .client-detail-list > div{
      grid-template-columns:1fr!important;
      gap:3px!important;
    }
  }
}
/* MEMOIRES PRODUCT A2.16-R1 MON COMPTE END */

/* MEMOIRES PRODUCT A2.17-R1 CONNEXION START */
/*
 * A2.17-R1 — Connexion
 * Présentation uniquement.
 * Ciblage volontairement borné au formulaire de connexion actuel :
 * autocomplete=username + autocomplete=current-password.
 * /client/login.php, bootstrap, H5/H6.2, CSRF, SQL, sessions et sécurité
 * restent strictement inchangés.
 */

@supports selector(body:has(.client-login-card form input[name="password"][autocomplete="current-password"])){

  /* Ne vise pas Invitation / mot de passe oublié / reset : seul login possède current-password. */
  body:has(.client-login-card form input[name="email"][autocomplete="username"])
      :has(.client-login-card form input[name="password"][autocomplete="current-password"])
      .client-login-wrap.premium{
    width:100%!important;
    max-width:none!important;
    min-height:calc(100svh - 150px)!important;
    margin:0 auto!important;
    padding:clamp(28px,5vh,64px) 20px!important;
    display:grid!important;
    place-items:center!important;
    background:
      radial-gradient(circle at 16% 12%,rgba(199,148,52,.11),transparent 30%),
      radial-gradient(circle at 84% 86%,rgba(13,36,73,.10),transparent 31%)!important;
  }

  body:has(.client-login-card form input[name="email"][autocomplete="username"])
      :has(.client-login-card form input[name="password"][autocomplete="current-password"])
      .client-login-card.premium{
    width:min(560px,100%)!important;
    margin:0 auto!important;
    padding:34px 38px 30px!important;
    border:1px solid #dfe5ee!important;
    border-radius:24px!important;
    box-shadow:0 24px 70px rgba(14,30,57,.12)!important;
  }

  body:has(.client-login-card form input[name="email"][autocomplete="username"])
      :has(.client-login-card form input[name="password"][autocomplete="current-password"])
      .client-login-brandmark{
    display:block!important;
    width:190px!important;
    max-width:52vw!important;
    height:50px!important;
    margin:0 0 15px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background-color:transparent!important;
    background-image:url("/assets/memoires-product-logo-dark-1200.png")!important;
    background-repeat:no-repeat!important;
    background-position:left center!important;
    background-size:contain!important;
    box-shadow:none!important;
    color:transparent!important;
    font-size:0!important;
    line-height:0!important;
    text-shadow:none!important;
    overflow:hidden!important;
  }

  body:has(.client-login-card form input[name="email"][autocomplete="username"])
      :has(.client-login-card form input[name="password"][autocomplete="current-password"])
      .client-login-card .eyebrow{
    margin-bottom:7px!important;
  }

  body:has(.client-login-card form input[name="email"][autocomplete="username"])
      :has(.client-login-card form input[name="password"][autocomplete="current-password"])
      .client-login-card h1{
    margin:.05em 0 .28em!important;
    font-size:clamp(2.15rem,4vw,2.75rem)!important;
    line-height:1.02!important;
  }

  body:has(.client-login-card form input[name="email"][autocomplete="username"])
      :has(.client-login-card form input[name="password"][autocomplete="current-password"])
      .client-login-card > p{
    margin:0 0 20px!important;
    max-width:470px!important;
    line-height:1.5!important;
  }

  body:has(.client-login-card form input[name="email"][autocomplete="username"])
      :has(.client-login-card form input[name="password"][autocomplete="current-password"])
      .client-login-card form{
    gap:10px!important;
  }

  body:has(.client-login-card form input[name="email"][autocomplete="username"])
      :has(.client-login-card form input[name="password"][autocomplete="current-password"])
      .client-login-card form label{
    margin:0!important;
    font-size:.78rem!important;
    line-height:1.25!important;
  }

  body:has(.client-login-card form input[name="email"][autocomplete="username"])
      :has(.client-login-card form input[name="password"][autocomplete="current-password"])
      .client-login-card form input:not([type="hidden"]){
    min-height:44px!important;
    padding:9px 11px!important;
    border-radius:9px!important;
    font-size:.92rem!important;
  }

  body:has(.client-login-card form input[name="email"][autocomplete="username"])
      :has(.client-login-card form input[name="password"][autocomplete="current-password"])
      .client-login-card form button{
    min-height:44px!important;
    margin-top:2px!important;
    padding:9px 14px!important;
    border-radius:9px!important;
  }

  body:has(.client-login-card form input[name="email"][autocomplete="username"])
      :has(.client-login-card form input[name="password"][autocomplete="current-password"])
      .client-login-card .alert{
    margin:0 0 12px!important;
    padding:10px 12px!important;
    border-radius:10px!important;
  }

  body:has(.client-login-card form input[name="email"][autocomplete="username"])
      :has(.client-login-card form input[name="password"][autocomplete="current-password"])
      .client-login-links{
    margin-top:12px!important;
    text-align:center!important;
  }

  body:has(.client-login-card form input[name="email"][autocomplete="username"])
      :has(.client-login-card form input[name="password"][autocomplete="current-password"])
      .client-login-card small{
    margin-top:13px!important;
    text-align:center!important;
    line-height:1.4!important;
  }

  @media(max-width:680px){
    body:has(.client-login-card form input[name="email"][autocomplete="username"])
        :has(.client-login-card form input[name="password"][autocomplete="current-password"])
        .client-login-wrap.premium{
      min-height:calc(100svh - 105px)!important;
      padding:20px 14px 28px!important;
    }

    body:has(.client-login-card form input[name="email"][autocomplete="username"])
        :has(.client-login-card form input[name="password"][autocomplete="current-password"])
        .client-login-card.premium{
      width:100%!important;
      padding:26px 22px 24px!important;
      border-radius:20px!important;
    }

    body:has(.client-login-card form input[name="email"][autocomplete="username"])
        :has(.client-login-card form input[name="password"][autocomplete="current-password"])
        .client-login-card h1{
      font-size:clamp(2rem,10vw,2.45rem)!important;
    }
  }
}
/* MEMOIRES PRODUCT A2.17-R1 CONNEXION END */

/* MEMOIRES PRODUCT A2.21-R1.11 LOGIN LOGO MOBILE CLONE FORGOT START */
@supports selector(body:has(.client-login-card form input[name="password"][autocomplete="current-password"])){
  @media(max-width:680px){
    body:has(.client-login-card form input[name="email"][autocomplete="username"])
        :has(.client-login-card form input[name="password"][autocomplete="current-password"])
        .client-login-brandmark{
      width:165px!important;
      max-width:60vw!important;
      height:44px!important;
      margin-bottom:13px!important;
    }
  }
}
/* MEMOIRES PRODUCT A2.21-R1.11 LOGIN LOGO MOBILE CLONE FORGOT END */

/* MEMOIRES PRODUCT A2.18-R1 FORGOT PASSWORD START */
/*
 * A2.18-R1 — Mot de passe oublié
 * Présentation uniquement.
 *
 * Ciblage borné à la carte client qui :
 * - contient un champ e-mail ;
 * - propose un retour vers /client/login.php ;
 * - ne contient aucun champ de type password.
 *
 * Ainsi A2.17-R1 Connexion reste exclu (current-password présent)
 * et reset-password reste exclu (champs password présents).
 * Aucun PHP, formulaire, CSRF, SQL, e-mail, jeton ou session n'est modifié.
 */

@supports selector(body:has(.client-login-card form input[name="email"])){

  body:has(.client-login-card form input[name="email"])
      :has(.client-login-links a[href="/client/login.php"])
      :not(:has(.client-login-card form input[type="password"]))
      .client-login-wrap.premium{
    width:100%!important;
    max-width:none!important;
    min-height:clamp(540px,calc(100svh - 185px),700px)!important;
    margin:0 auto!important;
    padding:30px 20px!important;
    display:grid!important;
    place-items:center!important;
    background:
      radial-gradient(circle at 16% 12%,rgba(199,148,52,.10),transparent 30%),
      radial-gradient(circle at 84% 86%,rgba(13,36,73,.09),transparent 31%)!important;
  }

  body:has(.client-login-card form input[name="email"])
      :has(.client-login-links a[href="/client/login.php"])
      :not(:has(.client-login-card form input[type="password"]))
      .client-login-card.premium{
    width:min(560px,100%)!important;
    margin:0 auto!important;
    padding:32px 38px 28px!important;
    border:1px solid #dfe5ee!important;
    border-radius:24px!important;
    box-shadow:0 22px 64px rgba(14,30,57,.11)!important;
  }

  body:has(.client-login-card form input[name="email"])
      :has(.client-login-links a[href="/client/login.php"])
      :not(:has(.client-login-card form input[type="password"]))
      .client-login-brandmark{
    width:50px!important;
    height:50px!important;
    border-radius:15px!important;
    margin-bottom:15px!important;
    font-size:1.25rem!important;
  }

  body:has(.client-login-card form input[name="email"])
      :has(.client-login-links a[href="/client/login.php"])
      :not(:has(.client-login-card form input[type="password"]))
      .client-login-card .eyebrow{
    margin-bottom:7px!important;
  }

  body:has(.client-login-card form input[name="email"])
      :has(.client-login-links a[href="/client/login.php"])
      :not(:has(.client-login-card form input[type="password"]))
      .client-login-card h1{
    margin:.05em 0 .28em!important;
    font-size:clamp(2.1rem,3.7vw,2.65rem)!important;
    line-height:1.03!important;
  }

  body:has(.client-login-card form input[name="email"])
      :has(.client-login-links a[href="/client/login.php"])
      :not(:has(.client-login-card form input[type="password"]))
      .client-login-card > p{
    line-height:1.5!important;
  }

  body:has(.client-login-card form input[name="email"])
      :has(.client-login-links a[href="/client/login.php"])
      :not(:has(.client-login-card form input[type="password"]))
      .client-login-card > p:not(:last-child){
    margin:0 0 18px!important;
    max-width:470px!important;
  }

  body:has(.client-login-card form input[name="email"])
      :has(.client-login-links a[href="/client/login.php"])
      :not(:has(.client-login-card form input[type="password"]))
      .client-login-card form{
    gap:10px!important;
  }

  body:has(.client-login-card form input[name="email"])
      :has(.client-login-links a[href="/client/login.php"])
      :not(:has(.client-login-card form input[type="password"]))
      .client-login-card form label{
    margin:0!important;
    font-size:.8rem!important;
    line-height:1.25!important;
  }

  body:has(.client-login-card form input[name="email"])
      :has(.client-login-links a[href="/client/login.php"])
      :not(:has(.client-login-card form input[type="password"]))
      .client-login-card form input:not([type="hidden"]){
    min-height:44px!important;
    padding:9px 11px!important;
    border-radius:9px!important;
    font-size:.94rem!important;
  }

  body:has(.client-login-card form input[name="email"])
      :has(.client-login-links a[href="/client/login.php"])
      :not(:has(.client-login-card form input[type="password"]))
      .client-login-card form button{
    min-height:44px!important;
    margin-top:2px!important;
    padding:9px 14px!important;
    border-radius:9px!important;
  }

  body:has(.client-login-card form input[name="email"])
      :has(.client-login-links a[href="/client/login.php"])
      :not(:has(.client-login-card form input[type="password"]))
      .client-login-card .alert{
    margin:0 0 12px!important;
    padding:10px 12px!important;
    border-radius:10px!important;
  }

  body:has(.client-login-card form input[name="email"])
      :has(.client-login-links a[href="/client/login.php"])
      :not(:has(.client-login-card form input[type="password"]))
      .client-login-links{
    margin-top:12px!important;
    text-align:center!important;
  }

  body:has(.client-login-card form input[name="email"])
      :has(.client-login-links a[href="/client/login.php"])
      :not(:has(.client-login-card form input[type="password"]))
      .client-login-card > p:last-child{
    margin:15px 0 0!important;
    text-align:left!important;
    line-height:1.45!important;
  }

  @media(max-width:680px){
    body:has(.client-login-card form input[name="email"])
        :has(.client-login-links a[href="/client/login.php"])
        :not(:has(.client-login-card form input[type="password"]))
        .client-login-wrap.premium{
      min-height:calc(100svh - 105px)!important;
      padding:20px 14px 28px!important;
    }

    body:has(.client-login-card form input[name="email"])
        :has(.client-login-links a[href="/client/login.php"])
        :not(:has(.client-login-card form input[type="password"]))
        .client-login-card.premium{
      width:100%!important;
      padding:26px 22px 24px!important;
      border-radius:20px!important;
    }

    body:has(.client-login-card form input[name="email"])
        :has(.client-login-links a[href="/client/login.php"])
        :not(:has(.client-login-card form input[type="password"]))
        .client-login-card h1{
      font-size:clamp(2rem,10vw,2.45rem)!important;
    }
  }
}
/* MEMOIRES PRODUCT A2.18-R1 FORGOT PASSWORD END */

/* MEMOIRES PRODUCT A2.18-R1.1 FORGOT PASSWORD LOGO START */
/*
 * A2.18-R1.1 — Mot de passe oublié — logo Mémoires Product
 * Correction visuelle uniquement.
 *
 * Remplace visuellement le monogramme "M" de .client-login-brandmark
 * par le logo officiel déjà présent dans /assets/.
 *
 * Aucun HTML/PHP, formulaire, CSRF, SQL, e-mail, jeton, session,
 * Stripe, OpenAI, webhook ou route n'est modifié.
 */

@supports selector(body:has(.client-login-card form input[name="email"])){

  body:has(.client-login-card form input[name="email"])
      :has(.client-login-links a[href="/client/login.php"])
      :not(:has(.client-login-card form input[type="password"]))
      .client-login-brandmark{
    display:block!important;
    width:190px!important;
    max-width:52vw!important;
    height:50px!important;
    margin:0 0 15px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background-color:transparent!important;
    background-image:url("/assets/memoires-product-logo-dark-1200.png")!important;
    background-repeat:no-repeat!important;
    background-position:left center!important;
    background-size:contain!important;
    box-shadow:none!important;
    color:transparent!important;
    font-size:0!important;
    line-height:0!important;
    text-shadow:none!important;
    overflow:hidden!important;
  }

  @media(max-width:680px){
    body:has(.client-login-card form input[name="email"])
        :has(.client-login-links a[href="/client/login.php"])
        :not(:has(.client-login-card form input[type="password"]))
        .client-login-brandmark{
      width:165px!important;
      max-width:60vw!important;
      height:44px!important;
      margin-bottom:13px!important;
    }
  }
}
/* MEMOIRES PRODUCT A2.18-R1.1 FORGOT PASSWORD LOGO END */

/* MEMOIRES PRODUCT A2.19-R1 RESET PASSWORD START */
/*
 * A2.19-R1 — Réinitialisation du mot de passe
 * Présentation CSS uniquement.
 *
 * Deux états de /client/reset-password.php sont ciblés :
 * - formulaire valide : champs password + confirm ;
 * - lien invalide/expiré : lien vers /client/forgot-password.php sans champ e-mail.
 *
 * Connexion est exclue car elle contient le champ e-mail.
 * Mot de passe oublié est exclu car il contient aussi le champ e-mail.
 *
 * Le monogramme "M" est remplacé visuellement par le logo officiel
 * /assets/memoires-product-logo-dark-1200.png.
 *
 * Aucun PHP, formulaire, CSRF, SQL, e-mail, jeton, session,
 * Stripe, OpenAI, webhook ou route n'est modifié.
 */

@supports selector(body:has(.client-login-card form input[name="password"])){

  body:is(
      :has(.client-login-card form input[name="password"]):has(.client-login-card form input[name="confirm"]),
      :has(.client-login-links a[href="/client/forgot-password.php"]):not(:has(.client-login-card form input[name="email"]))
    )
    .client-login-wrap.premium{
    width:100%!important;
    max-width:none!important;
    min-height:clamp(540px,calc(100svh - 185px),700px)!important;
    margin:0 auto!important;
    padding:30px 20px!important;
    display:grid!important;
    place-items:center!important;
    background:
      radial-gradient(circle at 16% 12%,rgba(199,148,52,.10),transparent 30%),
      radial-gradient(circle at 84% 86%,rgba(13,36,73,.09),transparent 31%)!important;
  }

  body:is(
      :has(.client-login-card form input[name="password"]):has(.client-login-card form input[name="confirm"]),
      :has(.client-login-links a[href="/client/forgot-password.php"]):not(:has(.client-login-card form input[name="email"]))
    )
    .client-login-card.premium{
    width:min(560px,100%)!important;
    margin:0 auto!important;
    padding:32px 38px 28px!important;
    border:1px solid #dfe5ee!important;
    border-radius:24px!important;
    box-shadow:0 22px 64px rgba(14,30,57,.11)!important;
  }

  body:is(
      :has(.client-login-card form input[name="password"]):has(.client-login-card form input[name="confirm"]),
      :has(.client-login-links a[href="/client/forgot-password.php"]):not(:has(.client-login-card form input[name="email"]))
    )
    .client-login-brandmark{
    display:block!important;
    width:190px!important;
    max-width:52vw!important;
    height:50px!important;
    margin:0 0 15px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background-color:transparent!important;
    background-image:url("/assets/memoires-product-logo-dark-1200.png")!important;
    background-repeat:no-repeat!important;
    background-position:left center!important;
    background-size:contain!important;
    box-shadow:none!important;
    color:transparent!important;
    font-size:0!important;
    line-height:0!important;
    text-shadow:none!important;
    overflow:hidden!important;
  }

  body:is(
      :has(.client-login-card form input[name="password"]):has(.client-login-card form input[name="confirm"]),
      :has(.client-login-links a[href="/client/forgot-password.php"]):not(:has(.client-login-card form input[name="email"]))
    )
    .client-login-card .eyebrow{
    margin-bottom:7px!important;
  }

  body:is(
      :has(.client-login-card form input[name="password"]):has(.client-login-card form input[name="confirm"]),
      :has(.client-login-links a[href="/client/forgot-password.php"]):not(:has(.client-login-card form input[name="email"]))
    )
    .client-login-card h1{
    margin:.05em 0 .28em!important;
    font-size:clamp(2.1rem,3.7vw,2.65rem)!important;
    line-height:1.03!important;
  }

  body:is(
      :has(.client-login-card form input[name="password"]):has(.client-login-card form input[name="confirm"]),
      :has(.client-login-links a[href="/client/forgot-password.php"]):not(:has(.client-login-card form input[name="email"]))
    )
    .client-login-card .alert{
    margin:0 0 14px!important;
    padding:12px 14px!important;
    border-radius:11px!important;
    line-height:1.42!important;
  }

  body:has(.client-login-card form input[name="password"])
      :has(.client-login-card form input[name="confirm"])
      .client-login-card form{
    gap:10px!important;
  }

  body:has(.client-login-card form input[name="password"])
      :has(.client-login-card form input[name="confirm"])
      .client-login-card form label{
    margin:0!important;
    font-size:.8rem!important;
    line-height:1.25!important;
  }

  body:has(.client-login-card form input[name="password"])
      :has(.client-login-card form input[name="confirm"])
      .client-login-card form input:not([type="hidden"]){
    min-height:44px!important;
    padding:9px 11px!important;
    border-radius:9px!important;
    font-size:.94rem!important;
  }

  body:has(.client-login-card form input[name="password"])
      :has(.client-login-card form input[name="confirm"])
      .client-login-card form button{
    min-height:44px!important;
    margin-top:2px!important;
    padding:9px 14px!important;
    border-radius:9px!important;
  }

  body:is(
      :has(.client-login-card form input[name="password"]):has(.client-login-card form input[name="confirm"]),
      :has(.client-login-links a[href="/client/forgot-password.php"]):not(:has(.client-login-card form input[name="email"]))
    )
    .client-login-links{
    margin-top:12px!important;
    text-align:center!important;
  }

  body:is(
      :has(.client-login-card form input[name="password"]):has(.client-login-card form input[name="confirm"]),
      :has(.client-login-links a[href="/client/forgot-password.php"]):not(:has(.client-login-card form input[name="email"]))
    )
    .client-login-card > p:last-child{
    margin:15px 0 0!important;
    line-height:1.45!important;
  }

  @media(max-width:680px){
    body:is(
        :has(.client-login-card form input[name="password"]):has(.client-login-card form input[name="confirm"]),
        :has(.client-login-links a[href="/client/forgot-password.php"]):not(:has(.client-login-card form input[name="email"]))
      )
      .client-login-wrap.premium{
      min-height:calc(100svh - 105px)!important;
      padding:20px 14px 28px!important;
    }

    body:is(
        :has(.client-login-card form input[name="password"]):has(.client-login-card form input[name="confirm"]),
        :has(.client-login-links a[href="/client/forgot-password.php"]):not(:has(.client-login-card form input[name="email"]))
      )
      .client-login-card.premium{
      width:100%!important;
      padding:26px 22px 24px!important;
      border-radius:20px!important;
    }

    body:is(
        :has(.client-login-card form input[name="password"]):has(.client-login-card form input[name="confirm"]),
        :has(.client-login-links a[href="/client/forgot-password.php"]):not(:has(.client-login-card form input[name="email"]))
      )
      .client-login-brandmark{
      width:165px!important;
      max-width:60vw!important;
      height:44px!important;
      margin-bottom:13px!important;
    }

    body:is(
        :has(.client-login-card form input[name="password"]):has(.client-login-card form input[name="confirm"]),
        :has(.client-login-links a[href="/client/forgot-password.php"]):not(:has(.client-login-card form input[name="email"]))
      )
      .client-login-card h1{
      font-size:clamp(2rem,10vw,2.45rem)!important;
    }
  }
}
/* MEMOIRES PRODUCT A2.19-R1 RESET PASSWORD END */

/* MEMOIRES PRODUCT A2.20-R1 ACTIVATION START */
/*
 * A2.20-R1 — Activation sécurisée
 * Présentation CSS uniquement.
 *
 * Deux états de /client/activation.php sont ciblés :
 * - invitation valide : formulaire password + password_confirm ;
 * - session d'activation absente/expirée : carte avec .bad et sans formulaire.
 *
 * Le logo officiel est ajouté visuellement dans la carte via CSS.
 * Le bandeau supérieur, le PHP, le formulaire, le CSRF, les invitations,
 * les sessions, les droits, les e-mails et les routes restent inchangés.
 */

@supports selector(body:has(.card > .eye)){

  body:is(
      :has(.card > .eye):has(.card form input[name="password"]):has(.card form input[name="password_confirm"]),
      :has(.card > .eye):has(.card > .bad):not(:has(.card form))
    )
    .card{
    width:min(560px,calc(100% - 28px))!important;
    max-width:560px!important;
    min-height:0!important;
    margin:clamp(54px,9vh,96px) auto!important;
    padding:32px 38px 28px!important;
    border:1px solid #dfe5ee!important;
    border-radius:24px!important;
    box-shadow:0 22px 64px rgba(14,30,57,.11)!important;
  }

  body:is(
      :has(.card > .eye):has(.card form input[name="password"]):has(.card form input[name="password_confirm"]),
      :has(.card > .eye):has(.card > .bad):not(:has(.card form))
    )
    .card::before{
    content:""!important;
    display:block!important;
    width:190px!important;
    max-width:52vw!important;
    height:50px!important;
    margin:0 0 15px!important;
    background-image:url("/assets/memoires-product-logo-dark-1200.png")!important;
    background-repeat:no-repeat!important;
    background-position:left center!important;
    background-size:contain!important;
  }

  body:is(
      :has(.card > .eye):has(.card form input[name="password"]):has(.card form input[name="password_confirm"]),
      :has(.card > .eye):has(.card > .bad):not(:has(.card form))
    )
    .card > .eye{
    margin:0 0 7px!important;
    font-size:.72rem!important;
    line-height:1.3!important;
    letter-spacing:.16em!important;
  }

  body:is(
      :has(.card > .eye):has(.card form input[name="password"]):has(.card form input[name="password_confirm"]),
      :has(.card > .eye):has(.card > .bad):not(:has(.card form))
    )
    .card h1{
    margin:.04em 0 .30em!important;
    font-size:clamp(2.1rem,3.7vw,2.65rem)!important;
    line-height:1.03!important;
    letter-spacing:-.025em!important;
  }

  body:is(
      :has(.card > .eye):has(.card form input[name="password"]):has(.card form input[name="password_confirm"]),
      :has(.card > .eye):has(.card > .bad):not(:has(.card form))
    )
    .card > .bad,
  body:is(
      :has(.card > .eye):has(.card form input[name="password"]):has(.card form input[name="password_confirm"]),
      :has(.card > .eye):has(.card > .bad):not(:has(.card form))
    )
    .card > .good,
  body:is(
      :has(.card > .eye):has(.card form input[name="password"]):has(.card form input[name="password_confirm"]),
      :has(.card > .eye):has(.card > .bad):not(:has(.card form))
    )
    .card > .info{
    margin:0 0 14px!important;
    padding:12px 14px!important;
    border-radius:11px!important;
    font-size:.95rem!important;
    line-height:1.42!important;
  }

  body:has(.card > .eye)
      :has(.card form input[name="password"])
      :has(.card form input[name="password_confirm"])
      .card form{
    display:grid!important;
    gap:10px!important;
    margin-top:14px!important;
  }

  body:has(.card > .eye)
      :has(.card form input[name="password"])
      :has(.card form input[name="password_confirm"])
      .card form label{
    margin:0!important;
    font-size:.8rem!important;
    line-height:1.25!important;
  }

  body:has(.card > .eye)
      :has(.card form input[name="password"])
      :has(.card form input[name="password_confirm"])
      .card form input:not([type="hidden"]){
    min-height:44px!important;
    padding:9px 11px!important;
    border-radius:9px!important;
    font-size:.94rem!important;
  }

  body:has(.card > .eye)
      :has(.card form input[name="password"])
      :has(.card form input[name="password_confirm"])
      .card form button{
    min-height:44px!important;
    margin-top:2px!important;
    padding:9px 14px!important;
    border-radius:9px!important;
  }

  body:is(
      :has(.card > .eye):has(.card form input[name="password"]):has(.card form input[name="password_confirm"]),
      :has(.card > .eye):has(.card > .bad):not(:has(.card form))
    )
    .card > .small,
  body:is(
      :has(.card > .eye):has(.card form input[name="password"]):has(.card form input[name="password_confirm"]),
      :has(.card > .eye):has(.card > .bad):not(:has(.card form))
    )
    .card small{
    display:block!important;
    margin:14px 0 0!important;
    line-height:1.45!important;
  }

  body:has(.card > .eye):has(.card > .bad):not(:has(.card form))
    .card .btn{
    display:block!important;
    width:max-content!important;
    max-width:100%!important;
    margin:12px auto 0!important;
  }

  @media(max-width:680px){
    body:is(
        :has(.card > .eye):has(.card form input[name="password"]):has(.card form input[name="password_confirm"]),
        :has(.card > .eye):has(.card > .bad):not(:has(.card form))
      )
      .card{
      width:calc(100% - 24px)!important;
      margin:24px auto 34px!important;
      padding:26px 22px 24px!important;
      border-radius:20px!important;
    }

    body:is(
        :has(.card > .eye):has(.card form input[name="password"]):has(.card form input[name="password_confirm"]),
        :has(.card > .eye):has(.card > .bad):not(:has(.card form))
      )
      .card::before{
      width:165px!important;
      max-width:60vw!important;
      height:44px!important;
      margin-bottom:13px!important;
    }

    body:is(
        :has(.card > .eye):has(.card form input[name="password"]):has(.card form input[name="password_confirm"]),
        :has(.card > .eye):has(.card > .bad):not(:has(.card form))
      )
      .card h1{
      font-size:clamp(2rem,10vw,2.45rem)!important;
    }
  }
}
/* MEMOIRES PRODUCT A2.20-R1 ACTIVATION END */

/* MEMOIRES PRODUCT A2.21-R1 APPAREILS CONNECTES START */
/*
 * A2.21-R1 — Appareils connectés
 * Présentation CSS uniquement.
 *
 * Ciblage borné à /client/security-sessions.php par son formulaire POST réel.
 * Aucun formulaire, aucune route, aucune révocation de session et aucun PHP
 * ne sont modifiés.
 */

@supports selector(body:has(form[action="/client/security-sessions.php"])){

  body:has(form[action="/client/security-sessions.php"]) .wrap{
    width:min(980px,calc(100% - 36px))!important;
    max-width:980px!important;
    margin:0 auto!important;
    padding-top:28px!important;
    padding-bottom:52px!important;
  }

  body:has(form[action="/client/security-sessions.php"]) .wrap > .card{
    margin:14px 0!important;
    padding:20px 22px!important;
    border-radius:18px!important;
    box-shadow:0 12px 34px rgba(14,30,57,.055)!important;
  }

  body:has(form[action="/client/security-sessions.php"]) .wrap > .card:first-child{
    padding:20px 22px 18px!important;
  }

  body:has(form[action="/client/security-sessions.php"]) .eyebrow{
    margin:0 0 7px!important;
    font-size:.68rem!important;
    line-height:1.2!important;
    letter-spacing:.17em!important;
  }

  body:has(form[action="/client/security-sessions.php"]) h1{
    margin:0 0 10px!important;
    font-size:clamp(2.65rem,5.2vw,4.05rem)!important;
    line-height:.98!important;
    letter-spacing:-.035em!important;
  }

  body:has(form[action="/client/security-sessions.php"]) h2{
    margin:0 0 10px!important;
    font-size:clamp(1.8rem,3.2vw,2.25rem)!important;
    line-height:1.03!important;
    letter-spacing:-.025em!important;
  }

  body:has(form[action="/client/security-sessions.php"]) .card p{
    margin:7px 0 0!important;
    line-height:1.45!important;
  }

  body:has(form[action="/client/security-sessions.php"]) .box{
    margin-top:10px!important;
    padding:13px 15px!important;
    border-radius:12px!important;
  }

  body:has(form[action="/client/security-sessions.php"]) .box p,
  body:has(form[action="/client/security-sessions.php"]) .box small{
    margin-top:4px!important;
    line-height:1.38!important;
  }

  body:has(form[action="/client/security-sessions.php"]) .button{
    min-height:40px!important;
    padding:8px 13px!important;
    border-radius:9px!important;
    line-height:1.2!important;
  }

  body:has(form[action="/client/security-sessions.php"]) form{
    margin:10px 0 0!important;
  }

  body:has(form[action="/client/security-sessions.php"]) form .button,
  body:has(form[action="/client/security-sessions.php"]) form button{
    width:100%!important;
    min-height:40px!important;
  }

  body:has(form[action="/client/security-sessions.php"]) .secondary{
    min-height:38px!important;
    padding:8px 12px!important;
  }

  body:has(form[action="/client/security-sessions.php"]) .bad{
    padding:11px 13px!important;
    border-radius:10px!important;
  }

  @media(max-width:680px){
    body:has(form[action="/client/security-sessions.php"]) .wrap{
      width:calc(100% - 24px)!important;
      padding-top:18px!important;
      padding-bottom:34px!important;
    }

    body:has(form[action="/client/security-sessions.php"]) .wrap > .card{
      margin:10px 0!important;
      padding:18px!important;
      border-radius:16px!important;
    }

    body:has(form[action="/client/security-sessions.php"]) h1{
      font-size:clamp(2.35rem,12vw,3.2rem)!important;
    }

    body:has(form[action="/client/security-sessions.php"]) h2{
      font-size:clamp(1.7rem,8vw,2.05rem)!important;
    }
  }
}
/* MEMOIRES PRODUCT A2.21-R1 APPAREILS CONNECTES END */

/* MEMOIRES PRODUCT A2.23-R1 SESSIONS SECURITE START */
/*
 * A2.23-R1 — Sessions de sécurité
 * Présentation uniquement.
 * La page /client/security-sessions.php, les actions revoke_one / revoke_others,
 * le CSRF, le registre H3, les sessions et les données restent inchangés.
 */

@supports selector(body:has(form[action="/client/security-sessions.php"])){

  /* Ciblage strict de la page Sessions : son formulaire d'action globale existe
     même lorsqu'aucun autre appareil n'est révocable. */
  body.client-portal:has(form[action="/client/security-sessions.php"] input[name="action"][value="revoke_others"]) .wrap > section.card{
    max-width:1100px!important;
    margin:0 auto 14px!important;
    border-radius:20px!important;
    padding:20px 24px!important;
  }

  /* Hero sécurité : même hiérarchie premium, moins de hauteur perdue. */
  body.client-portal:has(form[action="/client/security-sessions.php"] input[name="action"][value="revoke_others"]) .wrap > section.card:nth-of-type(1){
    padding-top:22px!important;
    padding-bottom:22px!important;
  }

  body.client-portal:has(form[action="/client/security-sessions.php"] input[name="action"][value="revoke_others"]) .wrap > section.card:nth-of-type(1) h1{
    margin:.08em 0 .18em!important;
    font-size:clamp(2.6rem,4.6vw,4.15rem)!important;
    line-height:.98!important;
    letter-spacing:-.025em!important;
  }

  body.client-portal:has(form[action="/client/security-sessions.php"] input[name="action"][value="revoke_others"]) .wrap > section.card:nth-of-type(1) > p{
    max-width:900px!important;
    margin:.4em 0 0!important;
    line-height:1.45!important;
  }

  /* Carte liste : titre compact. */
  body.client-portal:has(form[action="/client/security-sessions.php"] input[name="action"][value="revoke_others"]) .wrap > section.card:nth-of-type(2) h2,
  body.client-portal:has(form[action="/client/security-sessions.php"] input[name="action"][value="revoke_others"]) .wrap > section.card:nth-of-type(3) h2{
    margin:.08em 0 .42em!important;
    font-size:clamp(1.8rem,2.8vw,2.35rem)!important;
    line-height:1!important;
  }

  /* Le conteneur des appareils est déjà un grid inline : on ne change que son rythme. */
  body.client-portal:has(form[action="/client/security-sessions.php"] input[name="action"][value="revoke_others"]) .wrap > section.card:nth-of-type(2) > div[style*="display:grid"]{
    gap:10px!important;
  }

  /* Chaque session devient une ligne plus compacte, sans changer son contenu. */
  body.client-portal:has(form[action="/client/security-sessions.php"] input[name="action"][value="revoke_others"]) .wrap > section.card:nth-of-type(2) > div[style*="display:grid"] > div[style*="border:1px"]{
    padding:15px 17px!important;
    border-radius:14px!important;
  }

  body.client-portal:has(form[action="/client/security-sessions.php"] input[name="action"][value="revoke_others"]) .wrap > section.card:nth-of-type(2) div[style*="justify-content:space-between"]{
    gap:14px!important;
    align-items:center!important;
  }

  body.client-portal:has(form[action="/client/security-sessions.php"] input[name="action"][value="revoke_others"]) .wrap > section.card:nth-of-type(2) strong[style*="font-size:1.1rem"]{
    font-size:1rem!important;
  }

  body.client-portal:has(form[action="/client/security-sessions.php"] input[name="action"][value="revoke_others"]) .wrap > section.card:nth-of-type(2) div[style*="color:#66748d"]{
    font-size:.86rem!important;
    line-height:1.38!important;
  }

  /* Badge session courante : lisible mais discret. */
  body.client-portal:has(form[action="/client/security-sessions.php"] input[name="action"][value="revoke_others"]) .wrap > section.card:nth-of-type(2) span[style*="border-radius:999px"]{
    padding:4px 8px!important;
    font-size:.72rem!important;
  }

  /* Action sur un appareil : bouton compact, sans toucher au POST. */
  body.client-portal:has(form[action="/client/security-sessions.php"] input[name="action"][value="revoke_others"]) form[action="/client/security-sessions.php"]:has(input[name="action"][value="revoke_one"]) button{
    min-height:38px!important;
    width:auto!important;
    padding:8px 12px!important;
    border-radius:9px!important;
    white-space:nowrap!important;
    font-size:.82rem!important;
  }

  /* Action globale : plus courte et hiérarchisée ; comportement inchangé. */
  body.client-portal:has(form[action="/client/security-sessions.php"] input[name="action"][value="revoke_others"]) .wrap > section.card:nth-of-type(3){
    padding-top:18px!important;
    padding-bottom:18px!important;
  }

  body.client-portal:has(form[action="/client/security-sessions.php"] input[name="action"][value="revoke_others"]) .wrap > section.card:nth-of-type(3) > p:not(:has(.button)){
    margin:.35em 0 .75em!important;
    max-width:880px!important;
    line-height:1.42!important;
  }

  body.client-portal:has(form[action="/client/security-sessions.php"] input[name="action"][value="revoke_others"]) form[action="/client/security-sessions.php"]:has(input[name="action"][value="revoke_others"]) button{
    min-height:42px!important;
    border-radius:10px!important;
    padding:9px 14px!important;
  }

  body.client-portal:has(form[action="/client/security-sessions.php"] input[name="action"][value="revoke_others"]) .wrap > section.card:nth-of-type(3) > p:has(.button.secondary){
    margin:8px 0 0!important;
  }

  body.client-portal:has(form[action="/client/security-sessions.php"] input[name="action"][value="revoke_others"]) .wrap > section.card:nth-of-type(3) .button.secondary{
    min-height:36px!important;
    padding:7px 10px!important;
    display:inline-flex!important;
    align-items:center!important;
    font-size:.78rem!important;
  }

  @media (max-width:680px){
    body.client-portal:has(form[action="/client/security-sessions.php"] input[name="action"][value="revoke_others"]) .wrap > section.card{
      padding:17px!important;
      border-radius:17px!important;
      margin-bottom:11px!important;
    }

    body.client-portal:has(form[action="/client/security-sessions.php"] input[name="action"][value="revoke_others"]) .wrap > section.card:nth-of-type(1) h1{
      font-size:clamp(2.25rem,11vw,3rem)!important;
    }

    body.client-portal:has(form[action="/client/security-sessions.php"] input[name="action"][value="revoke_others"]) .wrap > section.card:nth-of-type(2) div[style*="justify-content:space-between"]{
      align-items:flex-start!important;
    }

    body.client-portal:has(form[action="/client/security-sessions.php"] input[name="action"][value="revoke_others"]) form[action="/client/security-sessions.php"]:has(input[name="action"][value="revoke_one"]){
      width:100%!important;
      margin-top:4px!important;
    }

    body.client-portal:has(form[action="/client/security-sessions.php"] input[name="action"][value="revoke_others"]) form[action="/client/security-sessions.php"]:has(input[name="action"][value="revoke_one"]) button{
      width:100%!important;
    }
  }
}
/* MEMOIRES PRODUCT A2.23-R1 SESSIONS SECURITE END */

/* MEMOIRES PRODUCT A2.24-R1 ACTIVITE SECURITE START */
/*
 * A2.24-R1 — Activité de sécurité
 * Présentation uniquement.
 * /client/security-activity.php, le journal H4, le registre H3,
 * les événements, les sessions et les données restent inchangés.
 */

@supports selector(body:has(.event)){
  /* Ciblage strict : la surface Activité est la seule page client cartographiée
     avec les classes .event + .stat + .grid dans cette séquence. */
  body.client-portal:has(.event):has(.stat):has(.grid) .wrap{
    max-width:1160px!important;
  }

  body.client-portal:has(.event):has(.stat):has(.grid) .wrap > section.card{
    max-width:1100px!important;
    margin:0 auto 14px!important;
    border-radius:20px!important;
    padding:20px 24px!important;
  }

  /* Hero sécurité : conserver le message de confidentialité tout en réduisant
     fortement la hauteur perdue observée avant A2.24-R1. */
  body.client-portal:has(.event):has(.stat):has(.grid) .wrap > section.card:first-of-type{
    padding-top:22px!important;
    padding-bottom:22px!important;
  }
  body.client-portal:has(.event):has(.stat):has(.grid) .wrap > section.card:first-of-type h1{
    margin:.08em 0 .2em!important;
    font-size:clamp(2.75rem,4.8vw,4.3rem)!important;
    line-height:.98!important;
    letter-spacing:-.03em!important;
  }
  body.client-portal:has(.event):has(.stat):has(.grid) .wrap > section.card:first-of-type > p{
    max-width:930px!important;
    margin:.45em 0 0!important;
    line-height:1.48!important;
  }

  /* Les 3 indicateurs 30 jours deviennent enfin un vrai bandeau de KPI. */
  body.client-portal:has(.event):has(.stat):has(.grid) .grid{
    max-width:1100px!important;
    margin:0 auto 14px!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:12px!important;
  }
  body.client-portal:has(.event):has(.stat):has(.grid) .grid > .stat{
    min-width:0!important;
    min-height:100px!important;
    margin:0!important;
    padding:16px 18px!important;
    border:1px solid #d7e0ec!important;
    border-radius:16px!important;
    background:#fff!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:5px!important;
    box-shadow:0 10px 28px rgba(22,39,70,.035)!important;
  }
  body.client-portal:has(.event):has(.stat):has(.grid) .grid > .stat > :first-child{
    color:#53627a!important;
    font-size:.84rem!important;
    line-height:1.25!important;
  }
  body.client-portal:has(.event):has(.stat):has(.grid) .grid > .stat .n,
  body.client-portal:has(.event):has(.stat):has(.grid) .grid > .stat > strong{
    color:#101d35!important;
    font-size:1.95rem!important;
    line-height:1!important;
    font-weight:800!important;
  }

  /* Journal : une ligne visuelle par événement, sans changer aucune donnée. */
  body.client-portal:has(.event):has(.stat):has(.grid) section.card:has(.event){
    padding-top:20px!important;
    padding-bottom:20px!important;
  }
  body.client-portal:has(.event):has(.stat):has(.grid) section.card:has(.event) h2{
    margin:.08em 0 .5em!important;
    font-size:clamp(1.9rem,3vw,2.5rem)!important;
    line-height:1!important;
  }
  body.client-portal:has(.event):has(.stat):has(.grid) section.card:has(.event) .event{
    display:grid!important;
    grid-template-columns:minmax(170px,1.05fr) minmax(125px,.72fr) minmax(190px,1.15fr) minmax(145px,.7fr)!important;
    gap:8px 16px!important;
    align-items:center!important;
    margin:0 0 8px!important;
    padding:12px 14px!important;
    border:1px solid #dce4ee!important;
    border-radius:12px!important;
    background:#fbfcfe!important;
  }
  body.client-portal:has(.event):has(.stat):has(.grid) section.card:has(.event) .event > *{
    min-width:0!important;
    margin:0!important;
    overflow-wrap:anywhere!important;
  }
  body.client-portal:has(.event):has(.stat):has(.grid) section.card:has(.event) .event > strong:first-child{
    color:#101d35!important;
    font-size:.95rem!important;
    line-height:1.25!important;
  }
  body.client-portal:has(.event):has(.stat):has(.grid) section.card:has(.event) .event .muted{
    color:#69778c!important;
    font-size:.84rem!important;
    line-height:1.35!important;
  }
  body.client-portal:has(.event):has(.stat):has(.grid) section.card:has(.event) .button{
    min-height:36px!important;
    padding:7px 11px!important;
    border-radius:9px!important;
    font-size:.78rem!important;
  }

  @media (max-width:900px){
    body.client-portal:has(.event):has(.stat):has(.grid) section.card:has(.event) .event{
      grid-template-columns:1fr 1fr!important;
    }
  }

  @media (max-width:680px){
    body.client-portal:has(.event):has(.stat):has(.grid) .wrap > section.card{
      padding:17px!important;
      border-radius:17px!important;
      margin-bottom:11px!important;
    }
    body.client-portal:has(.event):has(.stat):has(.grid) .wrap > section.card:first-of-type h1{
      font-size:clamp(2.3rem,11vw,3.15rem)!important;
    }
    body.client-portal:has(.event):has(.stat):has(.grid) .grid{
      grid-template-columns:1fr!important;
      gap:9px!important;
      margin-bottom:11px!important;
    }
    body.client-portal:has(.event):has(.stat):has(.grid) .grid > .stat{
      min-height:76px!important;
      padding:13px 15px!important;
    }
    body.client-portal:has(.event):has(.stat):has(.grid) .grid > .stat .n,
    body.client-portal:has(.event):has(.stat):has(.grid) .grid > .stat > strong{
      font-size:1.65rem!important;
    }
    body.client-portal:has(.event):has(.stat):has(.grid) section.card:has(.event) .event{
      grid-template-columns:1fr!important;
      gap:4px!important;
      padding:12px 13px!important;
    }
  }
}
/* MEMOIRES PRODUCT A2.24-R1 ACTIVITE SECURITE END */