/* HAVOCKS — page « Ma config » (/config, setup.php)
   Bandeau Gaming (photo du bureau facultative, fondue vers la gauche), « L'essentiel » en grandes cartes, puis le détail en deux
   colonnes. Sur téléphone, tout s'empile. Les photos de produits sont sur fond clair (comme les fiches des boutiques). */

/* ---- Bandeau ---- */
.subhero.setup-hero{ min-height:46vh; }
.setup-hero-texte{ max-width:600px; }
.setup-bureau{
  position:absolute; top:0; right:0; bottom:0; width:58%; height:100%; object-fit:cover; z-index:1;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 45%); mask-image:linear-gradient(90deg, transparent 0%, #000 45%);
  opacity:0.85;
}
@media (max-width:760px){
  .setup-bureau{ width:100%; opacity:0.35; -webkit-mask-image:none; mask-image:none; }
}

/* ---- Contenu ---- */
.setup-page{ padding:50px 8% 90px; }
.setup-vide{ color:var(--muted); }
.setup-essentiel{ margin-bottom:46px; }
.setup-essentiel .section-heading{ margin-bottom:18px; }

/* Photos : fond clair, image entière (contain), coins arrondis ; emplacement neutre sans photo. */
.setup-photo{ display:block; overflow:hidden; border-radius:10px; background:#F2F4F7; flex:none; }
.setup-photo img{ display:block; width:100%; height:100%; object-fit:contain; cursor:zoom-in; }
.setup-photo img:focus-visible{ outline:3px solid var(--game-2); outline-offset:-3px; }
.setup-photo-vide{ background:linear-gradient(160deg, rgba(123,47,247,0.35), rgba(0,194,209,0.18)); }

/* « L'essentiel » : grandes cartes */
/* 4 cartes sur une rangée, ou 2 x 2 : jamais 3 + 1 (une carte seule sur sa rangée ferait déséquilibré). */
.setup-cartes{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; }
@media (max-width:900px){ .setup-cartes{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.setup-carte{
  display:flex; flex-direction:column; gap:4px; padding:14px; border-radius:16px; min-width:0;
  border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.03);
}
.setup-carte .setup-photo{ width:100%; aspect-ratio:4 / 3; margin-bottom:10px; }
.setup-categorie{ color:var(--game-2); font-size:0.74rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; }
.setup-carte .setup-nom{ font-size:1.02rem; }

/* Noms (liens vers les produits), précision, étiquette « À venir » */
.setup-nom{ color:var(--white); font-weight:600; line-height:1.35; overflow-wrap:anywhere; }
a.setup-nom{ text-decoration:underline; text-decoration-color:rgba(0,194,209,0.55); text-underline-offset:3px; }
a.setup-nom:hover, a.setup-nom:focus-visible{ color:var(--game-2); }
.setup-externe{ margin-left:5px; font-size:0.85em; color:var(--game-2); }
.setup-details{ display:block; color:var(--muted); font-size:0.84rem; line-height:1.45; overflow-wrap:anywhere; }
.setup-avenir{
  display:inline-block; margin-left:4px; padding:1px 8px; border-radius:999px; vertical-align:2px;
  border:1px dashed var(--game-2); color:var(--game-2); font-size:0.72rem; font-weight:600; white-space:nowrap;
}

/* Détail en deux colonnes */
.setup-colonnes{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:34px; align-items:start; }
.setup-groupe + .setup-groupe{ margin-top:30px; }
.setup-colonnes.setup-colonnes-une{ grid-template-columns:minmax(0, 1fr); max-width:820px; }      /* tous les groupes dans la même colonne */
.setup-groupe-titre{ margin:0 0 12px; font-size:0.82rem; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:var(--muted); }
.setup-lignes{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.setup-ligne{
  display:grid; grid-template-columns:64px 130px minmax(0, 1fr); align-items:center; gap:14px; padding:9px 12px;
  border-radius:12px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.03);
}
.setup-ligne .setup-photo{ width:64px; height:48px; border-radius:8px; }
.setup-ligne-categorie{ color:var(--muted); font-size:0.84rem; overflow-wrap:anywhere; }
.setup-ligne-texte{ min-width:0; }
.setup-affilie{ margin:40px 0 0; color:var(--muted); font-size:0.82rem; }

@media (max-width:980px){
  .setup-colonnes{ grid-template-columns:minmax(0, 1fr); gap:30px; }
}
@media (max-width:520px){
  .setup-page{ padding:36px 6% 70px; }
  .setup-cartes{ gap:10px; }
  .setup-carte{ padding:10px; }
  .setup-ligne{ grid-template-columns:56px minmax(0, 1fr); gap:4px 12px; }
  .setup-ligne .setup-photo{ width:56px; height:44px; grid-row:span 2; }
  .setup-ligne-categorie{ font-size:0.76rem; }
}