/* ============================================================================
   QZR vNext — Profil
   ----------------------------------------------------------------------------
   Strangler migration: scoped by [data-qz-skin="profil"]. Overrides legacy
   .profile-hub styles with vNext tokens. Requires vnext-tokens.css.
   ============================================================================ */

/* ── Container ───────────────────────────────────────────────────────────── */
[data-qz-skin="profil"] {
  background: var(--qz-screen);
  color: var(--qz-text);
  font-family: var(--qz-font);
  max-width: 560px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
[data-qz-skin="profil"] .profile-hub__hero {
  padding: 18px;
  border-radius: var(--qz-r-card);
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  box-shadow: none;
  overflow: visible;
}
[data-qz-skin="profil"] .profile-hub__hero::before { display: none; }

[data-qz-skin="profil"] .profile-hub__hero-grid {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Avatar */
[data-qz-skin="profil"] .profile-hub__avatar .user-picture-container,
[data-qz-skin="profil"] .profile-hub__avatar .no-picture-icon-container {
  box-shadow: none;
  border: 3px solid var(--qz-accent);
  /* La photo n'etait pas inscrite dans son anneau : l'`img` faisait la largeur
     du conteneur BORDURE COMPRISE, si bien qu'elle demarrait apres la bordure
     gauche et depassait d'autant a droite. Mesure : anneau de 31 a 135,
     image de 33 a 137 — deux pixels de decalage, d'ou le croissant clair
     visible a gauche du cercle. */
  overflow: hidden;
  box-sizing: border-box;
}
[data-qz-skin="profil"] .profile-hub__avatar .user-picture-container img {
  display: block;
  /* `!important` : `utilities.users.php` ecrit `style="width:104px;height:104px"`
     EN LIGNE sur l'image, et donne la meme taille au conteneur — qui, lui,
     porte une bordure. L'image occupait donc la boite BORDURE COMPRISE et
     debordait d'autant. Une declaration de feuille perd contre un style
     inline ; seul `!important` la remporte.

     Corrige ici et non a la source : le conteneur y recoit une largeur mais
     PAS de hauteur (elle est commentee dans le PHP), c'est donc l'image qui
     lui donne sa hauteur. Passer l'image en pourcentage a la source la ferait
     s'effondrer partout ailleurs. Le defaut de fond — meme taille pour le
     conteneur borde et son image — reste a traiter dans l'assistant partage. */
  width: 100% !important;
  height: 100% !important;
  border-radius: 50%;
  /* `cover` et non `fill` : une photo non carree etait etiree pour remplir le
     cercle. Elle est desormais recadree, sans deformation. */
  object-fit: cover;
}
[data-qz-skin="profil"] .profile-hub__avatar-fallback {
  width: 64px;
  height: 64px;
  font-size: 1.5rem;
  background: var(--qz-accent);
  color: var(--qz-on-accent);
}

/* Copy */
[data-qz-skin="profil"] .profile-hub__eyebrow {
  font-size: var(--qz-fs-xs);
  font-weight: var(--qz-fw-strong);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--qz-accent-ink);
}

[data-qz-skin="profil"] .profile-hub__title {
  font-size: 22px;
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
  line-height: 1.15;
}

[data-qz-skin="profil"] .profile-hub__subtitle {
  font-size: .85rem;
  color: var(--qz-muted);
  line-height: 1.4;
  margin: 0;
}

/* Meta pills */
[data-qz-skin="profil"] .profile-hub__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

[data-qz-skin="profil"] .profile-hub__meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--qz-r-pill);
  background: var(--qz-accent-soft);
  border: none;
  color: var(--qz-accent-ink);
  font-size: .76rem;
  font-weight: var(--qz-fw-strong);
  backdrop-filter: none;
}
[data-qz-skin="profil"] .profile-hub__meta-pill .fas {
  color: var(--qz-accent);
  font-size: .7rem;
}

/* ── Summary cards ────────────────────────────────────────────────────────── */
[data-qz-skin="profil"] .profile-hub__summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 14px;
}

[data-qz-skin="profil"] .profile-hub__summary-card {
  min-height: 0;
  padding: 14px;
  border-radius: var(--qz-r-card);
  background: var(--qz-screen);
  border: 1px solid var(--qz-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}

[data-qz-skin="profil"] .profile-hub__summary-value {
  font-size: 1.15rem;
  font-weight: var(--qz-fw-strong);
  color: var(--qz-accent);
}

[data-qz-skin="profil"] .profile-hub__summary-label {
  font-size: .74rem;
  color: var(--qz-muted);
  font-weight: var(--qz-fw-strong);
}

/* ── Quick nav ────────────────────────────────────────────────────────────── */
[data-qz-skin="profil"] .profile-hub__quick-nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border-radius: var(--qz-r-card);
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  backdrop-filter: none;
  position: sticky;
  top: 8px;
  z-index: 3;
}

[data-qz-skin="profil"] .profile-hub__quick-nav .action-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: var(--qz-r-pill);
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
  font-size: .82rem;
  font-weight: var(--qz-fw-strong);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background var(--qz-dur-ui);
}
[data-qz-skin="profil"] .profile-hub__quick-nav .action-chip:hover {
  background: var(--qz-accent-mid);
  color: var(--qz-on-accent);
}

/* ── Settings section ─────────────────────────────────────────────────────── */
[data-qz-skin="profil"] .profile-hub__settings {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

[data-qz-skin="profil"] .profile-hub__section-eyebrow {
  font-size: var(--qz-fs-xs);
  font-weight: var(--qz-fw-strong);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--qz-accent-ink);
}

/* Accordion items */
[data-qz-skin="profil"] .profile-settings-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

[data-qz-skin="profil"] .profile-settings-accordion .accordion-item {
  border: 1px solid var(--qz-line) !important;
  border-radius: var(--qz-r-card) !important;
  background: var(--qz-surface) !important;
  box-shadow: none !important;
  overflow: hidden;
}

[data-qz-skin="profil"] .profile-settings-accordion .accordion-button {
  padding: 14px 16px;
  font-weight: var(--qz-fw-strong);
  font-size: .92rem;
  color: var(--qz-text) !important;
  background: var(--qz-surface) !important;
  box-shadow: none !important;
}

[data-qz-skin="profil"] .profile-settings-accordion .accordion-button:not(.collapsed) {
  color: var(--qz-accent-ink) !important;
  background: var(--qz-accent-soft) !important;
}

[data-qz-skin="profil"] .profile-settings-accordion .accordion-button:focus {
  box-shadow: var(--qz-focus-ring) !important;
}

[data-qz-skin="profil"] .profile-settings-accordion .accordion-button::after {
  filter: none;
}

[data-qz-skin="profil"] .profile-settings-accordion .accordion-body {
  padding: 16px;
  background: var(--qz-surface) !important;
  color: var(--qz-text);
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  [data-qz-skin="profil"] {
    padding: 12px 12px calc(12px + 64px);
  }
  [data-qz-skin="profil"] .profile-hub__hero { padding: 14px; }
  [data-qz-skin="profil"] .profile-hub__title { font-size: 20px; }
  [data-qz-skin="profil"] .profile-hub__summary-grid { gap: 8px; }
}

/* ── Separation Profil / Reglages (29.AOU.2026) ──────────────────────────────
   L'ecran compte melait une VITRINE et un PANNEAU DE CONFIGURATION : 83
   controles sur une page, au point de porter DEUX boutons pour descendre vers
   sa propre moitie. Les deux vues sont desormais deux routes, servies par le
   meme endpoint via `?vue=`. */

/* Rappel d'offre : une LECTURE compacte. La gestion (quotas, onglets,
   boutique) vit dans les reglages — la dupliquer ici aurait fait deux endroits
   ou lire la meme verite. */
[data-qz-skin="profil"] .profile-plan-rappel {
  /* `width: 100%` et non le seul etirement implicite : le parent `.profile-hub`
     est un conteneur flex, la section y etait donc dimensionnee par son
     contenu (mesure : 233 px dans 528 px de disponible). */
  position: relative;
  overflow: hidden;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--qz-2) var(--qz-3);
  padding: var(--qz-3) var(--qz-4);
  margin-bottom: var(--qz-4);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card);
  /* Le halo d'angle est une COUCHE DE FOND, pas un pseudo-element : tout
     element positionne hors de la boite — meme decale par `transform`, meme
     sous `overflow: hidden` — entre dans la zone de defilement et gonfle le
     `scrollWidth` (mesure : 566 pour 526 de large). Un `background-image` n'a
     aucune geometrie propre et ne peut donc pas fausser une sonde de
     debordement. */
  background:
    radial-gradient(190px 190px at calc(100% + 40px) calc(100% + 70px),
      color-mix(in srgb, var(--qz-accent) 20%, transparent) 0%,
      transparent 70%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--qz-accent) 9%, var(--qz-surface)) 0%,
      var(--qz-surface) 58%);
}
[data-qz-skin="profil"] .profile-plan-rappel.is-pro {
  border-color: color-mix(in srgb, var(--qz-accent) 34%, var(--qz-line));
  background:
    radial-gradient(190px 190px at calc(100% + 40px) calc(100% + 70px),
      color-mix(in srgb, var(--qz-accent) 30%, transparent) 0%,
      transparent 70%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--qz-accent) 20%, var(--qz-surface)) 0%,
      var(--qz-surface) 62%);
}

/* Medaille : c'est elle qui separe Pro de Gratuit d'un coup d'oeil. */
[data-qz-skin="profil"] .profile-plan-rappel__medal {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: var(--qz-r-card);
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
  font-size: 1.05rem;
}
[data-qz-skin="profil"] .profile-plan-rappel.is-pro .profile-plan-rappel__medal {
  background: var(--qz-accent);
  /* --qz-on-accent, pas --qz-surface : les themes safran et azur le passent
     deliberement a une encre foncee, leur accent etant trop clair pour du
     blanc (2.31:1 mesure dans vnext-tokens.css). */
  color: var(--qz-on-accent);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--qz-accent) 38%, transparent);
}

[data-qz-skin="profil"] .profile-plan-rappel__main {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
  /* `.profile-hub` centre son texte : sans cette remise a plat les trois
     lignes se centraient dans la colonne, loin de la medaille. */
  text-align: left;
}
[data-qz-skin="profil"] .profile-plan-rappel__eyebrow {
  font-size: var(--qz-fs-xs);
  font-weight: var(--qz-fw-strong);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--qz-muted);
}
[data-qz-skin="profil"] .profile-plan-rappel__name {
  font-size: var(--qz-fs-h3);
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
  line-height: 1.25;
}
[data-qz-skin="profil"] .profile-plan-rappel__meta {
  font-size: var(--qz-fs-sm);
  color: var(--qz-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-qz-skin="profil"] .profile-plan-rappel__side {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--qz-2);
  flex: none;
}
[data-qz-skin="profil"] .profile-plan-rappel__coins {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--qz-r-pill);
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  font-size: var(--qz-fs-sm);
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
[data-qz-skin="profil"] .profile-plan-rappel__coins .fa-gem { color: var(--qz-accent); }
[data-qz-skin="profil"] .profile-plan-rappel__manage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--qz-r-pill);
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
  font-size: var(--qz-fs-sm);
  font-weight: var(--qz-fw-strong);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--qz-dur-ui) ease, transform var(--qz-dur-ui) ease;
}
[data-qz-skin="profil"] .profile-plan-rappel__manage:hover,
[data-qz-skin="profil"] .profile-plan-rappel__manage:focus-visible {
  background: color-mix(in srgb, var(--qz-accent) 26%, var(--qz-surface));
  color: var(--qz-accent-ink);
}
[data-qz-skin="profil"] .profile-plan-rappel__manage:active { transform: scale(var(--qz-press-scale)); }
[data-qz-skin="profil"] .profile-plan-rappel__manage .fa-chevron-right { font-size: .72em; }

/* Sous 420 px les trois colonnes ne tiennent plus : la rangee d'actions passe
   dessous, alignee sur le texte plutot que sur la medaille. */
@media (max-width: 419.98px) {
  [data-qz-skin="profil"] .profile-plan-rappel {
    grid-template-columns: auto minmax(0, 1fr);
  }
  [data-qz-skin="profil"] .profile-plan-rappel__side {
    grid-column: 2 / -1;
    justify-content: space-between;
  }
}

/* Les deux liens de bascule entre les vues. */
[data-qz-skin="profil"] .profile-hub__to-settings,
[data-qz-skin="profil"] .profile-hub__to-profile {
  display: inline-flex;
  align-items: center;
  gap: var(--qz-2);
  margin: var(--qz-4) 0 var(--qz-2);
  text-decoration: none;
}
[data-qz-skin="profil"] .profile-hub__to-settings { width: 100%; justify-content: center; }

/* ── Listview du profil ──────────────────────────────────────────────────────
   Remplace les cartes en grille : elles tenaient mal sur mobile (hauteur
   dictee par le contenu, deux boutons empiles a l'interieur, un eyebrow qui
   repetait le titre). Chaque entree est une RANGEE pleine largeur a hauteur
   maitrisee, sur le modele de `.profile-hub__to-settings`. */
[data-qz-skin="profil"] .profile-hub__modules {
  display: flex;
  flex-direction: column;
  gap: var(--qz-2);
}
[data-qz-skin="profil"] .profile-hub__row {
  display: flex;
  align-items: center;
  gap: var(--qz-3);
  width: 100%;
  /* min-height plutot que height : une rangee doit pouvoir grandir si le
     sous-titre passe a deux lignes, sans jamais descendre sous ce plancher. */
  min-height: 62px;
  padding: var(--qz-2) var(--qz-4);
  text-align: left;
  text-decoration: none;
}
[data-qz-skin="profil"] .profile-hub__row-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--qz-r-control);
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
  font-size: 1rem;
}
/* `min-width: 0` : sans lui un sous-titre long refuse de se retrecir et pousse
   la valeur et le chevron hors de la rangee. */
[data-qz-skin="profil"] .profile-hub__row-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
/* Hierarchie : le titre doit peser PLUS que son sous-titre. Deux pieges se
   combinaient pour produire l'inverse. La rangee est un `.btn-ux`, qui pose
   `font-weight: 800` sur l'element — le sous-titre, qui ne declarait rien,
   heritait donc de 800. Et `--qz-fw-strong` ne vaut pas 800 mais 500 : le
   titre, en le declarant, se retrouvait PLUS LEGER que son propre sous-titre
   (mesure : titre 500, sous-titre 800). Les deux graisses sont desormais
   posees explicitement, sans dependre ni de l'heritage ni d'un jeton dont le
   nom laisse croire a une valeur lourde. */
[data-qz-skin="profil"] .profile-hub__row-title {
  font-size: var(--qz-fs-body);
  font-weight: 700;
  color: var(--qz-text);
  line-height: 1.25;
}
[data-qz-skin="profil"] .profile-hub__row-sub {
  font-size: var(--qz-fs-sm);
  font-weight: 500;
  color: var(--qz-muted);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-qz-skin="profil"] .profile-hub__row-val {
  flex: 0 0 auto;
  font-size: var(--qz-fs-sm);
  font-weight: var(--qz-fw-strong);
  color: var(--qz-accent-ink);
  white-space: nowrap;
}
[data-qz-skin="profil"] .profile-hub__row-chev {
  flex: 0 0 auto;
  font-size: var(--qz-fs-sm);
  color: var(--qz-muted);
}