/* ============================================================
   PROFILE.CSS — Page profil client
   Dépend de theme.css.
   ============================================================ */

.profile-body{min-height:100dvh;}

/* ---------- Bouton "Accueil" (retour à la page principale) ---------- */
/* C'est lui, désormais, la tuile orange du bandeau : carré, sans libellé,
   au bord gauche, avec le nom du site collé juste après. La marque avait sa
   propre pastille au centre — deux tuiles orange dans la même barre se
   disputaient l'œil, et le bloc central se décalait au gré de la largeur de
   la zone compte. Une seule pastille, tout à gauche, plus rien ne bouge.
   Hauteur commune aux boutons du bandeau (--header-btn-h, vitrine.css). */
.profile-back{
  width:var(--header-btn-h); height:var(--header-btn-h); padding:0;
  flex-shrink:0; border-radius:11px;
  background:var(--accent-grad); border-color:transparent; color:#fff;
  box-shadow:var(--glow);
}
.profile-back:hover{filter:brightness(1.08); color:#fff; border-color:transparent;}
.profile-back svg{width:19px; height:19px;}
.profile-back span{display:none;}   /* le libellé reste dans l'aria-label */

/* ---------- Header simple (réutilise .site-header de vitrine) ---------- */
/* Bandeau en deux blocs : [retour + marque] à gauche, compte à droite. */
/* Pas de navigation ici : la grille de centrage de vitrine.css ne s'applique
   pas (son `:has(> .main-nav)` ne matche pas), on reste en flux flex. */
.profile-body .header-inner{justify-content:flex-start; gap:11px;}
.profile-body .header-inner > [data-ui-header]{margin-left:auto;}

/* La pastille de marque ferait doublon avec le bouton retour : on ne garde
   que le texte, resserré pour tenir dans la hauteur des boutons de droite. */
.profile-body .brand-mark{display:none;}
.profile-body .brand-name strong{font-size:14px;}
.profile-body .brand-name span{font-size:10px; letter-spacing:.9px;}

/* Sur mobile, la marque prendrait trop de place : la tuile suffit. */
@media (max-width:759px){
  .profile-body .brand-name{display:none;}
}

/* Le bandeau des pages profil / produits n'a AUCUNE règle propre pour la
   tuile du compte : elle est entièrement définie dans vitrine.css, donc
   strictement identique à celle de la page d'accueil. C'est voulu — toute
   surcharge locale ici recréerait l'écart de rendu entre les deux pages. */
.profile-main{padding:30px 0 60px;}
.profile-main .container{max-width:1040px;}

/* ---------- Bannière profil ---------- */
.profile-hero{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:24px; margin-bottom:22px; position:relative; overflow:hidden;
}
.profile-hero::before{
  content:""; position:absolute; right:-20%; top:-40%;
  width:340px; height:340px;
  background:radial-gradient(circle, var(--accent-soft) 0%, transparent 65%);
  pointer-events:none;
}
.profile-hero > *{position:relative; z-index:1;}
.profile-avatar{
  width:74px; height:74px; min-width:74px; max-width:74px;
  border-radius:20px; flex-shrink:0;
  background:var(--accent-grad); color:#fff; display:inline-grid; place-items:center;
  font-size:30px; font-weight:800; box-shadow:var(--glow);
  overflow:hidden; position:relative; box-sizing:border-box;
}
.profile-avatar.has-logo{background:var(--surface-2);}
.profile-avatar img{
  display:block; width:74px; height:74px; max-width:74px; max-height:74px;
  object-fit:cover; border-radius:inherit;
}
.profile-avatar.has-logo .profile-avatar-fallback{display:none;}
.profile-hero h1{margin:0; font-size:26px; font-weight:800; letter-spacing:-.5px; word-break:break-all;}
.profile-hero .p-meta{color:var(--muted); font-size:14px; margin-top:3px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.profile-hero .p-meta .sep{opacity:.5;}
.profile-badges{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap;}
.p-badge{
  display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700;
  padding:6px 12px; border-radius:var(--r-pill); border:1px solid transparent;
}
.p-badge svg{width:14px; height:14px;}
.p-badge.admin{background:var(--accent-soft); color:var(--accent);}
.p-badge.ok{background:var(--success-soft); color:var(--success);}

/* ---------- Layout 2 colonnes ---------- */
.profile-grid{display:grid; grid-template-columns:1fr; gap:18px;}
@media (min-width:900px){.profile-grid{grid-template-columns:1.7fr 1fr;}}

/* ---------- Carte générique ---------- */
.card-box{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:22px;
}
.card-box h2{
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.8px;
  color:var(--muted); margin:0 0 16px; display:flex; align-items:center; gap:8px;
}
.card-box h2 svg{width:15px; height:15px; color:var(--accent);}

/* ---------- Carte produit ---------- */
.product{
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md);
  padding:18px; margin-bottom:14px; transition:var(--t);
}
.product:last-child{margin-bottom:0;}
.product.locked{opacity:.6;}
.product-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap;}
.product-head h3{margin:0; font-size:17px; font-weight:700;}
.product-head .p-desc{font-size:13px; color:var(--muted); margin-top:3px;}
.product .p-tag{
  font-size:11px; font-weight:700; padding:4px 10px; border-radius:var(--r-pill);
}
.p-tag.on{background:var(--success-soft); color:var(--success);}
.p-tag.off{background:var(--danger-soft); color:var(--danger);}

/* Sous-modules (RN-Tune) */
.submods{display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:8px;}
.submod{
  display:flex; align-items:center; gap:8px; padding:10px 12px;
  background:var(--bg); border:1px solid var(--border); border-radius:var(--r-sm);
  font-size:13px; font-weight:600;
}
.submod .dot{width:10px; height:10px; border-radius:50%; flex-shrink:0;}
.submod.on{color:var(--text);}
.submod.on .dot{background:var(--success);}
.submod.off{color:var(--muted);}
.submod.off .dot{background:var(--muted-2);}

.product-actions{margin-top:14px; display:flex; gap:8px; flex-wrap:wrap;}
.product-actions .btn{font-size:13px; padding:10px 16px;}

/* Message "aucun produit" */
.empty-products{
  text-align:center; padding:36px 20px; color:var(--muted); font-size:14px;
  border:1px dashed var(--border); border-radius:var(--r-md);
}
.empty-products svg{width:32px; height:32px; color:var(--muted-2); margin:0 auto 10px;}

/* ---------- Bloc infos / compte ---------- */
.info-row{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--border); flex-wrap:wrap;
}
.info-row:last-child{border-bottom:none;}
.info-row .k{font-size:13px; color:var(--muted); font-weight:600;}
.info-row .v{font-size:14px; color:var(--text); font-weight:600; word-break:break-all;}
.info-row .v.mono{font-family:var(--mono);}

/* Boutons du panneau compte */
.account-actions{display:flex; flex-direction:column; gap:10px; margin-top:18px;}
.account-actions .btn{justify-content:flex-start; width:100%;}
.account-actions .btn.danger{color:var(--danger); border-color:color-mix(in srgb,var(--danger) 35%,transparent);}
.account-actions .btn.danger:hover{background:var(--danger-soft); color:var(--danger);}

/* ---------- Demande d'accès ---------- */
.access-card .info{font-size:13px; color:var(--muted); margin:0 0 14px;}
.access-card .btn{width:100%; justify-content:center;}

/* ---------- Modales (modifier email / mot de passe) ---------- */
.modal{
  position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
  padding:24px; background:rgba(0,0,0,.6); backdrop-filter:blur(4px);
}
.modal.open{display:flex;}
.modal-card{
  width:100%; max-width:440px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-xl); padding:28px;
  box-shadow:var(--shadow-lg);
}
.modal-card h3{margin:0 0 4px; font-size:19px; font-weight:800;}
.modal-card .modal-sub{color:var(--muted); font-size:13px; margin-bottom:18px;}
.modal-card .actions{display:flex; gap:10px; margin-top:18px;}
.modal-card .actions .btn{flex:1; justify-content:center;}
.modal-card .btn-ghost{background:var(--surface-2);}
/* Lien d'action secondaire dans une modale (« Renvoyer un code ») */
.linkbtn{
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--accent); font-size:13px; font-weight:700;
  font-family:inherit; text-decoration:underline;
}
.linkbtn:hover{filter:brightness(1.15);}
.linkbtn[disabled]{color:var(--muted); cursor:default; text-decoration:none;}

/* ---------- Modale logo ---------- */
.logo-modal-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:6px 0 4px;}
.logo-preview{
  width:72px; height:72px; min-width:72px; max-width:72px;
  border-radius:var(--r-md); flex-shrink:0;
  background:var(--accent-grad); color:#fff; display:inline-grid; place-items:center;
  font-size:28px; font-weight:800; line-height:1; overflow:hidden;
  position:relative; border:1px solid var(--border); box-sizing:border-box;
}
.logo-preview img{
  display:block; width:72px; height:72px; max-width:72px; max-height:72px;
  object-fit:cover; border-radius:inherit;
}
.logo-preview.empty{
  font-size:11px; font-weight:700; letter-spacing:.5px; color:var(--muted);
  background:var(--surface-2); text-transform:uppercase;
}
.logo-modal-controls{display:flex; flex-direction:column; gap:8px; flex:1; min-width:160px;}
.logo-modal-controls .btn{justify-content:center;}
.logo-modal-controls .btn.danger{color:var(--danger); border-color:color-mix(in srgb,var(--danger) 35%,transparent);}
.logo-modal-controls .btn.danger:hover{background:var(--danger-soft); color:var(--danger);}
.logo-hint{font-size:12px; color:var(--muted-2); margin:10px 0 0;}

/* ---------- Messages inline (.msg — sinon définis dans auth.css) ---------- */
.msg{
  font-size:13px; font-weight:600; padding:10px 12px; border-radius:var(--r-sm);
  margin:12px 0 0; border:1px solid transparent;
}
.msg.error{background:var(--danger-soft); color:var(--danger); border-color:color-mix(in srgb,var(--danger) 35%,transparent);}
.msg.success{background:var(--success-soft); color:var(--success); border-color:color-mix(in srgb,var(--success) 35%,transparent);}
.msg.info{background:var(--info-soft,rgba(59,130,246,.16)); color:var(--info,#3B82F6); border-color:color-mix(in srgb,var(--info,#3B82F6) 35%,transparent);}

/* ---------- Toast (réutilise admin.css) ---------- */