/* Pages Règles, Niveau, Payouts, Banque, Réglages. */

/* ---------- Puces génériques ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--line-strong); color: var(--ink-2); font-size: var(--t-sm); font-weight: 600; white-space: nowrap; }
.chip svg { width: 14px; height: 14px; }
.chip--accent { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }
.chip--accent svg { color: var(--accent); }
.btn--danger-ghost { border-color: transparent; background: transparent; color: var(--bad); }
.btn--danger-ghost:hover { background: var(--bad-soft); }

/* ========== RÈGLES ========== */
.rules-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.rstep { position: relative; padding: var(--sp-5); border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--highlight), var(--shadow-card); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); animation: view-in var(--dur) var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
.rstep__n { position: absolute; top: var(--sp-4); right: var(--sp-4); font-size: var(--t-sm); font-weight: 700; color: var(--faint); }
.rstep__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); margin-bottom: var(--sp-3); }
.rstep__icon svg { width: 20px; height: 20px; }
.rstep h3 { margin: 0 0 4px; font-size: var(--t-base); font-weight: 650; }
.rstep p { margin: 0; color: var(--muted); font-size: var(--t-sm); line-height: 1.45; }
.rstep:not(:last-child)::after { content: ""; position: absolute; top: 44px; right: -10px; width: 20px; height: 1px; background: var(--line-strong); z-index: 1; }

.ramp-card .chip { height: 28px; }
.ramp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.ramp__step { position: relative; padding: var(--sp-5); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--well); overflow: hidden; }
.ramp__step::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); opacity: calc(0.3 + var(--lvl, 1) * 0.1); }
.ramp__step--1 { --lvl: 1; } .ramp__step--2 { --lvl: 4; } .ramp__step--3 { --lvl: 7; background: var(--accent-soft); border-color: transparent; }
.ramp__tag { color: var(--muted); font-size: var(--t-2xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.ramp__value { display: block; margin: 8px 0 6px; font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.02em; }
.ramp__value small { margin-left: 5px; font-size: var(--t-sm); font-weight: 600; color: var(--muted); }
.ramp__step p { margin: 0; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.45; }
.ramp__note { display: flex; gap: 10px; margin: var(--sp-4) 0 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--ok-soft); color: var(--ink-2); font-size: var(--t-sm); line-height: 1.5; }
.ramp__note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--ok); }

.good { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.good li { display: flex; align-items: flex-start; gap: 12px; color: var(--ink-2); font-size: var(--t-base); line-height: 1.5; }
.good__tick { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--ok-soft); color: var(--ok); }
.good__tick svg { width: 13px; height: 13px; }

@media (max-width: 900px) { .rules-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rstep:not(:last-child)::after { display: none; } .ramp { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .rules-flow { grid-template-columns: 1fr; } }

/* ========== NIVEAU ========== */
.medal { position: relative; display: inline-grid; place-items: center; width: 56px; height: 56px; flex: none; }
.medal__disc { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(145deg, var(--from), var(--to)); color: #fff; box-shadow: inset 0 2px 4px rgba(255,255,255,.4), inset 0 -3px 6px rgba(0,0,0,.25), 0 8px 18px -8px var(--to); }
.medal__disc svg { width: 52%; height: 52%; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.medal__ribbon { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, var(--from) 40%, transparent); }
.medal--sm { width: 40px; height: 40px; }
.medal--lg { width: 96px; height: 96px; }
.medal--lg .medal__disc { box-shadow: inset 0 3px 6px rgba(255,255,255,.45), inset 0 -4px 10px rgba(0,0,0,.28), 0 16px 36px -14px var(--to); animation: medal-rise 600ms var(--ease) both; }
@keyframes medal-rise { from { transform: scale(.6) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }

.level-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-6) var(--sp-7); margin-bottom: var(--sp-4); }
.level-hero__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 120% at 12% 0%, var(--accent-soft), transparent 60%); }
.level-hero__body { position: relative; flex: 1; min-width: 0; }
.level-hero__eyebrow { color: var(--muted); font-size: var(--t-2xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.level-hero__name { margin: 4px 0 2px; font-size: var(--t-hero); font-weight: 700; letter-spacing: -0.03em; }
.level-hero__vol { margin: 0 0 var(--sp-4); font-size: var(--t-lg); font-weight: 650; }
.level-hero__vol span { color: var(--muted); font-size: var(--t-sm); font-weight: 500; }
.level-hero__max { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--accent-ink); font-weight: 600; }
.level-bar__track { height: 10px; border-radius: 99px; background: var(--chip); overflow: hidden; }
.level-bar__track span { display: block; width: var(--p); height: 100%; border-radius: 99px; background: var(--grad-brand); transform-origin: left; animation: grow-x 900ms var(--ease) both; }
.level-bar__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: 8px; color: var(--muted); font-size: var(--t-sm); }
.level-bar__meta strong { color: var(--ink); }

.tier-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.tier { display: flex; align-items: center; gap: var(--sp-3); padding: 12px 0; border-top: 1px solid var(--line); opacity: 0.55; }
.tier:first-child { border-top: 0; }
.tier.is-on { opacity: 1; }
.tier.is-current { opacity: 1; }
.tier__text { flex: 1; min-width: 0; }
.tier__text strong { display: block; font-weight: 650; }
.tier__text span { color: var(--muted); font-size: var(--t-sm); }
.tier__done { color: var(--ok); } .tier__lock { color: var(--faint); }
.tier__done svg, .tier__lock svg { width: 18px; height: 18px; }

.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-3); }
.badge { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: var(--sp-5) var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--well); text-align: center; }
.badge:not(.is-on) { opacity: 0.45; filter: grayscale(0.8); }
.badge.is-on { background: var(--card); }
.badge.is-latest { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.badge strong { font-size: var(--t-sm); font-weight: 650; }
.badge span { color: var(--muted); font-size: var(--t-xs); }
.badge__tick { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ok); color: #fff; }
.badge__tick svg { width: 12px; height: 12px; }

@media (max-width: 620px) { .level-hero { flex-direction: column; text-align: center; padding: var(--sp-6) var(--sp-5); } .level-bar__meta { flex-direction: column; gap: 2px; } }

/* ========== PAYOUTS ========== */
.payout-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-4); align-items: start; }
.payout-main { position: relative; overflow: hidden; padding: var(--sp-6); }
.payout-main__wash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 140% at 100% 0%, var(--accent-soft), transparent 60%); }
.payout-main__label { position: relative; color: var(--muted); font-size: var(--t-2xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.payout-main__amount { position: relative; margin: 6px 0 var(--sp-5); font-size: 2.6rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.payout-calc { position: relative; border: 0; border-radius: var(--r-md); background: var(--well); padding: 2px 16px; margin-bottom: var(--sp-5); }
.payout-calc__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 11px 0; color: var(--ink-2); font-size: var(--t-sm); }
.payout-calc__row + .payout-calc__row { border-top: 1px solid var(--line); }
.payout-calc__row--fee strong { color: var(--bad); }
.payout-calc__row--total { font-weight: 600; }
.payout-calc__row--total span { color: var(--ink); }
.payout-calc__row--total strong { font-size: var(--t-xl); letter-spacing: -0.02em; }
.payout-main__cta { position: relative; width: 100%; }

.payout-side { display: flex; flex-direction: column; gap: var(--sp-4); }
.payout-stat { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 20px; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.payout-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-card), 0 18px 40px -24px rgba(30, 50, 120, 0.3); }
.payout-stat__ic { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 13px; color: var(--t);
  background: linear-gradient(145deg, color-mix(in srgb, var(--t) 20%, transparent), color-mix(in srgb, var(--t) 7%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t) 24%, transparent), 0 8px 16px -10px color-mix(in srgb, var(--t) 60%, transparent); }
.payout-stat__ic svg { width: 20px; height: 20px; }
.payout-stat__body { min-width: 0; flex: 1 1 auto; }
.payout-stat__label { display: block; color: var(--muted); font-size: var(--t-xs); font-weight: 600; white-space: nowrap; }
.payout-stat strong { display: block; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; margin: 3px 0 2px; white-space: nowrap; }
.payout-stat__sub { display: block; color: var(--muted); font-size: var(--t-xs); }
.payout-stat__spark { flex: none; align-self: flex-end; color: var(--t); line-height: 0; margin-bottom: 2px; }
.payout-spark { display: block; }
/* Le mini-histogramme suit la largeur réelle de la colonne (barre latérale ouverte ou non). */
.payout-side { container-type: inline-size; }
@container (max-width: 340px) { .payout-stat__spark { display: none; } }
/* 681–960 px : 3 tuiles égales, icône au-dessus. Sous 680 px : une carte par ligne. */
@media (max-width: 960px) {
  .payout-grid { grid-template-columns: minmax(0, 1fr); }
  .payout-side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .payout-stat { flex-direction: column; align-items: flex-start; gap: 12px; }
  .payout-stat__spark { display: none; }
}
@media (max-width: 680px) {
  .payout-side { grid-template-columns: minmax(0, 1fr); }
  .payout-stat { flex-direction: row; align-items: center; gap: 14px; }
}
/* Le grand montant ne doit jamais être rogné, même au-delà de 10 000 €. */
@media (max-width: 420px) {
  .payout-main { padding: var(--sp-5); }
  .payout-main__amount { font-size: clamp(2rem, 10vw, 2.6rem); }
}
/* Historique : sur téléphone, Date | Net reçu | Statut (le brut et les frais sont dans la carte du haut). */
.payout-history .table td.num { white-space: nowrap; }
@media (max-width: 640px) {
  .payout-history .card__head { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .payout-history :is(.col-gross, .col-date) { display: none; }
  .payout-history .table :is(th, td) { padding-left: 8px; padding-right: 8px; }
  .payout-history .table :is(th, td):first-child { padding-left: var(--sp-4); }
  .payout-history .table :is(th, td):last-child { padding-right: var(--sp-4); }
}

/* ========== BANQUE ========== */
.bank-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--sp-6); padding: var(--sp-7); margin-bottom: var(--sp-4); }
.bank-hero__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 120% at 100% 20%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%); }
.bank-hero__text { position: relative; align-self: center; }
.bank-hero__eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); font-size: var(--t-xs); font-weight: 600; }
.bank-hero__eyebrow svg { width: 12px; height: 12px; }
.bank-hero__text h2 { margin: 14px 0 6px; font-size: var(--t-hero); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.bank-hero__text > p { margin: 0 0 var(--sp-5); max-width: 42ch; color: var(--ink-2); font-size: var(--t-base); line-height: 1.55; }
.bank-hero__visual { position: relative; min-height: 420px; display: flex; align-items: center; justify-content: center; }

/* Carte brandée */
.npcard { position: absolute; left: 0; top: 28px; z-index: 2; width: 300px; aspect-ratio: 1.585; padding: 20px; border-radius: 18px; color: #fff; overflow: hidden; transform: rotate(-7deg); box-shadow: 0 30px 60px -22px rgba(20,30,90,.7); background: linear-gradient(135deg, #2b4cff, #1430b8 55%, #0a1f7a); animation: card-in 700ms var(--ease) both; }
@keyframes card-in { from { opacity: 0; transform: rotate(-7deg) translateY(20px); } to { opacity: 1; transform: rotate(-7deg); } }
.npcard__shine { position: absolute; inset: 0; background: radial-gradient(60% 50% at 80% 0%, rgba(255,255,255,.3), transparent 60%); }
.npcard__top { position: relative; display: flex; align-items: center; justify-content: space-between; font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.04em; }
.npcard__top svg { width: 22px; height: 22px; opacity: .9; }
.npcard__net { font-weight: 600; opacity: .85; }
.npcard__chip { position: relative; display: block; width: 38px; height: 28px; margin: 18px 0 14px; border-radius: 7px; background: linear-gradient(135deg, #f4d58d, #c9a24a); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.npcard__num { position: relative; display: block; font-size: 1.15rem; letter-spacing: 0.12em; }
.npcard__bot { position: relative; display: flex; align-items: flex-end; gap: var(--sp-4); margin-top: 14px; }
.npcard__bot span { display: block; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; opacity: .7; }
.npcard__bot strong { font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.04em; }
.npcard__visa { margin-left: auto; font-size: var(--t-lg); font-style: italic; font-weight: 800; letter-spacing: 0.02em; }

/* iPhone */
.phone { position: relative; z-index: 1; width: 234px; height: 474px; margin-left: 150px; border-radius: 42px; padding: 11px; background: linear-gradient(160deg, #2a2d34, #0e0f12); box-shadow: 0 40px 70px -24px rgba(0,0,0,.6), inset 0 0 0 2px rgba(255,255,255,.06); animation: phone-in 800ms var(--ease) both; }
@keyframes phone-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.phone__side { position: absolute; left: -2px; width: 3px; border-radius: 3px; background: #2a2d34; }
.phone__side--l { top: 92px; height: 26px; box-shadow: 0 44px 0 #2a2d34, 0 84px 0 #2a2d34; }
.phone__side--r { left: auto; right: -2px; top: 120px; height: 52px; }
.phone__screen { position: relative; width: 100%; height: 100%; border-radius: 32px; overflow: hidden; background: var(--bg); }
.phone__island { position: absolute; top: 10px; left: 50%; translate: -50% 0; width: 76px; height: 20px; border-radius: 12px; background: #0a0b0d; z-index: 3; }
.bapp { height: 100%; padding: 34px 14px 14px; display: flex; flex-direction: column; gap: 11px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--bg)), var(--bg) 40%); overflow: hidden; }
.bapp__top { display: flex; align-items: center; justify-content: space-between; }
.bapp__hi { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.bapp__sub { display: block; font-size: 10px; color: var(--muted); }
.bapp__bell { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--card); color: var(--ink-2); }
.bapp__bell svg { width: 15px; height: 15px; }
.bapp__balance { display: flex; flex-direction: column; gap: 2px; }
.bapp__balance > span:first-child { font-size: 10px; color: var(--muted); }
.bapp__balance strong { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.bapp__balance strong small { font-size: 15px; color: var(--muted); }
.bapp__delta { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: var(--ok); }
.bapp__delta svg { width: 11px; height: 11px; }
.bapp__card { position: relative; border-radius: 14px; padding: 12px; color: #fff; background: linear-gradient(135deg, #2b4cff, #0a1f7a); box-shadow: 0 10px 20px -10px rgba(20,30,90,.8); }
.bapp__card-top { display: flex; align-items: center; justify-content: space-between; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; }
.bapp__card-top svg { width: 15px; height: 15px; opacity: .85; }
.bapp__chip { display: block; width: 26px; height: 19px; margin: 10px 0 8px; border-radius: 5px; background: linear-gradient(135deg, #f4d58d, #c9a24a); }
.bapp__num { font-size: 12px; letter-spacing: 0.1em; }
.bapp__card-bot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 10px; font-weight: 600; }
.bapp__card-bot b { font-style: italic; font-size: 13px; }
.bapp__acts { display: flex; justify-content: space-between; }
.bapp__act { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 9px; color: var(--ink-2); font-weight: 600; }
.bapp__act i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--card); color: var(--accent); border: 1px solid var(--line); }
.bapp__act i svg { width: 16px; height: 16px; }
.bapp__row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); font-size: 11px; font-weight: 600; color: var(--ink); }
.bapp__row b { margin-left: auto; color: var(--ok); }
.bapp__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }

.bank-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.perk { padding: var(--sp-5); animation: view-in var(--dur) var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
.perk__ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); margin-bottom: var(--sp-3); }
.perk__ic svg { width: 20px; height: 20px; }
.perk h3 { margin: 0 0 4px; font-size: var(--t-base); font-weight: 650; }
.perk p { margin: 0; color: var(--muted); font-size: var(--t-sm); line-height: 1.45; }

@media (max-width: 920px) {
  .bank-hero { grid-template-columns: 1fr; }
  .bank-hero__visual { min-height: 440px; margin-top: var(--sp-4); }
  .bank-perks { grid-template-columns: 1fr; }
}

/* ========== RÉGLAGES ========== */
.set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }
.set-body { display: flex; flex-direction: column; gap: var(--sp-4); padding-top: var(--sp-4); }
.set-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); align-items: end; }
.set-avatar { display: flex; align-items: center; gap: var(--sp-4); }
.set-avatar__pic { display: grid; place-items: center; width: 60px; height: 60px; flex: none; border-radius: 50%; background: var(--avatar-bg); color: var(--avatar-ink); font-size: var(--t-lg); font-weight: 700; }
.set-avatar .btn { height: 34px; }
.set-seg { width: 100%; }
.set-seg button { flex: 1; justify-content: center; display: inline-flex; align-items: center; gap: 6px; }
.set-seg button svg { width: 14px; height: 14px; }
.set-pane { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-4); animation: view-in var(--dur) var(--ease) both; }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--t-base); font-weight: 500; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; }
.toggle__track { position: relative; width: 42px; height: 24px; flex: none; border-radius: 999px; background: var(--chip); transition: background var(--dur-fast); }
.toggle__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform var(--dur-fast); }
.toggle input:checked + .toggle__track { background: var(--accent); }
.toggle input:checked + .toggle__track::after { transform: translateX(18px); }
.toggle input:focus-visible + .toggle__track { outline: 2px solid var(--accent); outline-offset: 2px; }
.set-body .btn { align-self: flex-start; }
@media (max-width: 900px) { .set-grid { grid-template-columns: 1fr; } }
/* Réglages : le sélecteur Banque US / RIB / Crypto et les paires de champs suivent la largeur réelle de la carte. */
.set-card { container: set-card / inline-size; }
@container set-card (max-width: 379px) {
  .set-seg button { padding: 0 8px; }
  .set-seg button svg { display: none; }
}
@container set-card (max-width: 339px) { .set-two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  .set-seg button { height: 40px; }
  .page-head > .btn, .set-body .btn { height: 40px; }
  .toggle { min-height: 40px; margin-block: -8px; }
}
/* Ordinateur : 2 colonnes sans trous (Profil + Sécurité à gauche, Payout + Notifications à droite). */
@media (min-width: 901px) {
  .set-grid { grid-template-areas: "profil payout" "secu payout" "secu notif"; }
  .set-grid > :nth-child(1) { grid-area: profil; }
  .set-grid > :nth-child(2) { grid-area: payout; }
  .set-grid > :nth-child(3) { grid-area: notif; }
  .set-grid > :nth-child(4) { grid-area: secu; }
}