/* GamingSecrets Tutoriels & DIY — V31.57.0 */

body.page-template-page-tutoriels-diy,
body.page-template-page-tutoriels-diy-php{
 background:
  radial-gradient(circle at 18% 10%,rgba(196,18,48,.1),transparent 28rem),
  linear-gradient(180deg,#07080c 0,#090a0f 42%,#06070a 100%);
}

.gs-diy-page{
 --diy-red:#e52b46;
 --diy-red-dark:#8f1026;
 --diy-amber:#d8a33a;
 --diy-steel:#86a7be;
 --diy-violet:#a982db;
 --diy-green:#6da889;
 --diy-line:rgba(255,255,255,.105);
 width:min(1240px,calc(100% - 36px));
 margin:0 auto;
 padding:36px 0 76px;
 color:#f5f3f4;
}

.gs-diy-page a:focus-visible,
.gs-diy-page button:focus-visible,
.gs-diy-page input:focus-visible{
 outline:3px solid #fff;
 outline-offset:3px;
}

.gs-diy-hero{
 position:relative;
 isolation:isolate;
 display:grid;
 grid-template-columns:minmax(0,1.15fr) minmax(310px,.85fr);
 gap:42px;
 min-height:440px;
 padding:58px clamp(34px,5vw,72px);
 overflow:hidden;
 border:1px solid rgba(229,43,70,.33);
 border-radius:26px;
 background:
  linear-gradient(100deg,rgba(8,9,13,.98) 0,rgba(9,10,14,.94) 54%,rgba(14,12,14,.78) 100%),
  repeating-linear-gradient(0deg,transparent 0 29px,rgba(255,255,255,.026) 29px 30px),
  linear-gradient(135deg,#14151a,#08090d);
 box-shadow:0 30px 80px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.035);
}

.gs-diy-hero::before{
 content:"";
 position:absolute;
 z-index:-1;
 inset:0 auto 0 0;
 width:7px;
 background:linear-gradient(180deg,#ff5065,var(--diy-red) 55%,#650b1d);
 box-shadow:16px 0 40px rgba(229,43,70,.18);
}

.gs-diy-hero::after{
 content:"";
 position:absolute;
 z-index:-1;
 right:-74px;
 bottom:-95px;
 width:430px;
 height:220px;
 opacity:.22;
 transform:rotate(-9deg);
 background:repeating-linear-gradient(135deg,var(--diy-red) 0 12px,transparent 12px 26px);
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 38%);
 mask-image:linear-gradient(90deg,transparent,#000 38%);
}

.gs-diy-hero-copy{
 position:relative;
 z-index:1;
 align-self:center;
}

.gs-diy-kicker,
.gs-diy-section-kicker{
 display:block;
 color:#ff6679;
 font-size:12px;
 font-weight:900;
 letter-spacing:.19em;
 line-height:1.25;
 text-transform:uppercase;
}

.gs-diy-kicker span{color:rgba(255,255,255,.34);padding:0 6px}

.gs-diy-hero h1{
 max-width:740px;
 margin:13px 0 18px;
 color:#fff;
 font-family:var(--gs-brand-heading,'Bebas Neue',Impact,sans-serif);
 font-size:clamp(58px,7vw,104px);
 font-weight:400;
 letter-spacing:.005em;
 line-height:.86;
 text-transform:uppercase;
}

.gs-diy-hero h1 span{color:#ff6073}

.gs-diy-hero-copy>p{
 max-width:700px;
 color:rgba(255,255,255,.72);
 font-size:clamp(17px,1.45vw,21px);
 line-height:1.55;
}

.gs-diy-hero-actions{
 display:flex;
 flex-wrap:wrap;
 gap:12px;
 margin-top:28px;
}

.gs-diy-primary-button,
.gs-diy-secondary-button{
 display:inline-flex;
 min-height:48px;
 align-items:center;
 justify-content:center;
 padding:0 22px;
 border-radius:11px;
 color:#fff;
 font-size:14px;
 font-weight:900;
 text-decoration:none;
 transition:transform .16s ease,border-color .16s ease,background .16s ease;
}

.gs-diy-primary-button{
 border:1px solid #ff5b70;
 background:linear-gradient(135deg,#ef344d,#b40e2b);
 box-shadow:0 13px 30px rgba(196,18,48,.22),inset 0 1px rgba(255,255,255,.24);
}

.gs-diy-secondary-button{
 border:1px solid rgba(255,255,255,.14);
 background:rgba(255,255,255,.035);
 color:rgba(255,255,255,.86);
}

.gs-diy-primary-button:hover,
.gs-diy-secondary-button:hover{transform:translateY(-2px);color:#fff}
.gs-diy-secondary-button:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.07)}

.gs-diy-hero-board{
 position:relative;
 align-self:center;
 padding:14px;
 border:1px solid rgba(255,255,255,.15);
 border-radius:17px 17px 6px 17px;
 background:linear-gradient(155deg,rgba(30,31,36,.95),rgba(8,9,12,.98));
 box-shadow:18px 24px 60px rgba(0,0,0,.45),inset 0 0 0 4px rgba(0,0,0,.22);
 transform:rotate(1.2deg);
}

.gs-diy-hero-board::before,
.gs-diy-hero-board::after{
 content:"";
 position:absolute;
 width:9px;
 height:9px;
 border-radius:50%;
 background:#050608;
 box-shadow:inset 0 1px 1px rgba(255,255,255,.16);
}

.gs-diy-hero-board::before{top:10px;left:10px}
.gs-diy-hero-board::after{right:10px;bottom:10px}

.gs-diy-board-top{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:12px;
 min-height:42px;
 padding:0 17px;
 border-bottom:1px solid rgba(255,255,255,.09);
 color:rgba(255,255,255,.48);
 font-size:10px;
 font-weight:900;
 letter-spacing:.17em;
}

.gs-diy-board-top b{
 display:flex;
 align-items:center;
 gap:7px;
 color:#f4c15b;
 font-size:9px;
}

.gs-diy-board-top b::before{
 content:"";
 width:6px;
 height:6px;
 border-radius:50%;
 background:#f4c15b;
 box-shadow:0 0 12px rgba(244,193,91,.65);
}

.gs-diy-board-main{
 display:grid;
 gap:4px;
 padding:29px 17px 31px;
 background:
  linear-gradient(90deg,rgba(229,43,70,.13),transparent 60%),
  repeating-linear-gradient(0deg,transparent 0 20px,rgba(255,255,255,.025) 20px 21px);
}

.gs-diy-board-main strong{
 font-family:var(--gs-brand-heading,'Bebas Neue',Impact,sans-serif);
 font-size:clamp(38px,4vw,56px);
 font-weight:400;
 letter-spacing:.04em;
 line-height:.92;
}

.gs-diy-board-main strong:nth-child(2){color:#ff5368}
.gs-diy-board-main strong:nth-child(3){color:rgba(255,255,255,.4)}

.gs-diy-board-status{
 display:flex;
 align-items:center;
 gap:9px;
 padding:13px 17px 8px;
 color:rgba(255,255,255,.55);
 font-size:10px;
 font-weight:800;
 letter-spacing:.08em;
 text-transform:uppercase;
}

.gs-diy-board-status i{width:7px;height:7px;border-radius:50%;background:#60ad83;box-shadow:0 0 13px rgba(96,173,131,.7)}
.gs-diy-board-status em{margin-left:auto;color:rgba(255,255,255,.24);font-style:normal}

.gs-diy-workshops,
.gs-diy-browser{margin-top:58px}

.gs-diy-section-head,
.gs-diy-results-head{
 display:flex;
 align-items:end;
 justify-content:space-between;
 gap:28px;
 margin-bottom:22px;
}

.gs-diy-section-head h2,
.gs-diy-results-head h2,
.gs-diy-safety h2{
 margin:5px 0 0;
 color:#fff;
 font-family:var(--gs-brand-heading,'Bebas Neue',Impact,sans-serif);
 font-size:clamp(36px,4vw,56px);
 font-weight:400;
 letter-spacing:.02em;
 line-height:1;
 text-transform:uppercase;
}

.gs-diy-section-head>p{
 max-width:540px;
 color:rgba(255,255,255,.53);
 font-size:14px;
 line-height:1.55;
}

.gs-diy-workshop-grid{
 display:grid;
 grid-template-columns:repeat(5,minmax(0,1fr));
 gap:12px;
}

.gs-diy-workshop-card{
 --diy-accent:var(--diy-red);
 position:relative;
 display:flex;
 min-height:216px;
 flex-direction:column;
 padding:20px 17px 17px;
 overflow:hidden;
 border:1px solid var(--diy-line);
 border-radius:16px;
 background:linear-gradient(155deg,rgba(24,25,30,.97),rgba(10,11,15,.98));
 color:#fff;
 text-decoration:none;
 box-shadow:inset 0 1px rgba(255,255,255,.028);
 transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.gs-diy-workshop-card::before{
 content:"";
 position:absolute;
 inset:0 0 auto;
 height:3px;
 background:var(--diy-accent);
 box-shadow:0 0 20px color-mix(in srgb,var(--diy-accent) 50%,transparent);
}

.gs-diy-workshop-card::after{
 content:"";
 position:absolute;
 right:-22px;
 bottom:-34px;
 width:105px;
 height:105px;
 border:18px solid color-mix(in srgb,var(--diy-accent) 9%,transparent);
 border-radius:50%;
}

.gs-diy-workshop-card.is-steel{--diy-accent:var(--diy-steel)}
.gs-diy-workshop-card.is-amber{--diy-accent:var(--diy-amber)}
.gs-diy-workshop-card.is-violet{--diy-accent:var(--diy-violet)}
.gs-diy-workshop-card.is-green{--diy-accent:var(--diy-green)}

.gs-diy-workshop-card:hover,
.gs-diy-workshop-card.is-active{
 transform:translateY(-4px);
 border-color:color-mix(in srgb,var(--diy-accent) 55%,rgba(255,255,255,.1));
 box-shadow:0 18px 38px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.04);
 color:#fff;
}

.gs-diy-workshop-number{
 position:absolute;
 top:14px;
 right:14px;
 color:color-mix(in srgb,var(--diy-accent) 70%,#fff);
 font-family:var(--gs-brand-heading,'Bebas Neue',Impact,sans-serif);
 font-size:32px;
 line-height:1;
 opacity:.66;
}

.gs-diy-workshop-label{
 color:var(--diy-accent);
 font-size:9px;
 font-weight:900;
 letter-spacing:.17em;
 text-transform:uppercase;
}

.gs-diy-workshop-card strong{
 position:relative;
 z-index:1;
 max-width:145px;
 margin-top:34px;
 font-size:17px;
 line-height:1.14;
}

.gs-diy-workshop-card small{
 position:relative;
 z-index:1;
 margin-top:9px;
 color:rgba(255,255,255,.48);
 font-size:11px;
 line-height:1.35;
}

.gs-diy-workshop-count{
 position:relative;
 z-index:1;
 margin-top:auto;
 padding-top:18px;
 color:rgba(255,255,255,.65);
 font-size:9px;
 font-weight:800;
 letter-spacing:.04em;
 text-transform:uppercase;
}

.gs-diy-browser{
 padding:24px;
 border:1px solid rgba(255,255,255,.085);
 border-radius:22px;
 background:rgba(14,15,19,.88);
 box-shadow:0 28px 70px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.025);
}

.gs-diy-browser-top{
 display:grid;
 grid-template-columns:minmax(0,1fr) minmax(280px,380px);
 gap:20px;
 align-items:center;
 padding-bottom:22px;
 border-bottom:1px solid rgba(255,255,255,.075);
}

.gs-diy-filter-list{display:flex;flex-wrap:wrap;gap:7px}

.gs-diy-filter{
 display:inline-flex;
 min-height:37px;
 align-items:center;
 padding:0 13px;
 border:1px solid rgba(255,255,255,.09);
 border-radius:999px;
 background:rgba(255,255,255,.025);
 color:rgba(255,255,255,.62);
 font-size:11px;
 font-weight:800;
 text-decoration:none;
}

.gs-diy-filter:hover,
.gs-diy-filter.is-active{
 border-color:rgba(255,81,101,.46);
 background:rgba(196,18,48,.15);
 color:#fff;
}

.gs-diy-search{
 display:grid;
 grid-template-columns:minmax(0,1fr) auto;
 padding:4px;
 border:1px solid rgba(255,255,255,.11);
 border-radius:12px;
 background:#08090c;
}

.gs-diy-search input{
 min-width:0;
 height:40px;
 padding:0 12px;
 border:0;
 background:transparent;
 color:#fff;
 font:600 12px/1.2 'Outfit',sans-serif;
}

.gs-diy-search input::placeholder{color:rgba(255,255,255,.34)}

.gs-diy-search button{
 padding:0 15px;
 border:0;
 border-radius:8px;
 background:#bd1733;
 color:#fff;
 font:800 11px/1 'Outfit',sans-serif;
 cursor:pointer;
}

.gs-diy-results-head{margin:28px 0 20px}
.gs-diy-results-head h2{font-size:42px}

.gs-diy-results-count{
 flex:0 0 auto;
 padding:8px 11px;
 border:1px solid rgba(255,255,255,.08);
 border-radius:9px;
 color:rgba(255,255,255,.46);
 font-size:10px;
 font-weight:800;
 letter-spacing:.06em;
 text-transform:uppercase;
}

.gs-diy-tutorial-grid{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:16px;
}

.gs-diy-tutorial-card{
 --diy-card-accent:var(--diy-red);
 min-width:0;
 overflow:hidden;
 border:1px solid rgba(255,255,255,.085);
 border-radius:16px;
 background:#0b0c10;
 transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.gs-diy-tutorial-card.is-steel{--diy-card-accent:var(--diy-steel)}
.gs-diy-tutorial-card.is-amber{--diy-card-accent:var(--diy-amber)}
.gs-diy-tutorial-card.is-violet{--diy-card-accent:var(--diy-violet)}
.gs-diy-tutorial-card.is-green{--diy-card-accent:var(--diy-green)}

.gs-diy-tutorial-card:hover{
 transform:translateY(-4px);
 border-color:color-mix(in srgb,var(--diy-card-accent) 48%,rgba(255,255,255,.08));
 box-shadow:0 20px 38px rgba(0,0,0,.28);
}

.gs-diy-tutorial-link{display:block;height:100%;color:#fff;text-decoration:none}

.gs-diy-tutorial-media{
 position:relative;
 aspect-ratio:16/9;
 overflow:hidden;
 background:
  linear-gradient(135deg,color-mix(in srgb,var(--diy-card-accent) 16%,#111217),#090a0d 65%),
  #0c0d11;
}

.gs-diy-tutorial-media::after{
 content:"";
 position:absolute;
 inset:auto 0 0;
 height:42%;
 background:linear-gradient(transparent,rgba(5,6,8,.78));
 pointer-events:none;
}

.gs-diy-tutorial-media img{
 display:block;
 width:100%;
 height:100%;
 object-fit:cover;
 transition:transform .35s ease;
}

.gs-diy-tutorial-card:hover .gs-diy-tutorial-media img{transform:scale(1.035)}

.gs-diy-tutorial-placeholder{
 position:absolute;
 inset:0;
 display:grid;
 place-items:center;
 color:color-mix(in srgb,var(--diy-card-accent) 80%,#fff);
}

.gs-diy-tutorial-placeholder::before{
 content:"";
 position:absolute;
 width:132px;
 height:132px;
 border:22px solid color-mix(in srgb,var(--diy-card-accent) 12%,transparent);
 border-radius:50%;
}

.gs-diy-tutorial-placeholder b{
 font-family:var(--gs-brand-heading,'Bebas Neue',Impact,sans-serif);
 font-size:64px;
 font-weight:400;
 line-height:1;
}

.gs-diy-tutorial-placeholder i{
 position:absolute;
 right:13px;
 bottom:12px;
 color:rgba(255,255,255,.22);
 font-size:8px;
 font-style:normal;
 font-weight:900;
 letter-spacing:.18em;
}

.gs-diy-tutorial-category{
 position:absolute;
 z-index:2;
 left:13px;
 bottom:11px;
 padding:6px 8px;
 border:1px solid color-mix(in srgb,var(--diy-card-accent) 38%,transparent);
 border-radius:7px;
 background:rgba(6,7,10,.82);
 color:#fff;
 font-size:9px;
 font-weight:900;
 letter-spacing:.05em;
 text-transform:uppercase;
 backdrop-filter:blur(8px);
}

.gs-diy-tutorial-body{display:flex;min-height:230px;flex-direction:column;padding:18px}

.gs-diy-tutorial-body h3{
 color:#fff;
 font-size:19px;
 line-height:1.2;
}

.gs-diy-tutorial-body p{
 margin-top:10px;
 color:rgba(255,255,255,.52);
 font-size:13px;
 line-height:1.5;
}

.gs-diy-tutorial-meta{
 display:flex;
 flex-wrap:wrap;
 gap:7px 13px;
 margin-top:16px;
 color:rgba(255,255,255,.35);
 font-size:9px;
 font-weight:800;
 letter-spacing:.055em;
 text-transform:uppercase;
}

.gs-diy-tutorial-meta span+span::before{content:"";display:inline-block;width:3px;height:3px;margin:0 8px 2px 0;border-radius:50%;background:var(--diy-card-accent)}

.gs-diy-tutorial-cta{
 display:inline-flex;
 align-items:center;
 gap:8px;
 margin-top:auto;
 padding-top:18px;
 color:color-mix(in srgb,var(--diy-card-accent) 70%,#fff);
 font-size:11px;
 font-weight:900;
 text-transform:uppercase;
}

.gs-diy-tutorial-cta::after{content:"›";font-size:18px;line-height:1}

.gs-diy-empty{
 display:grid;
 justify-items:center;
 padding:58px 22px;
 border:1px dashed rgba(255,255,255,.12);
 border-radius:16px;
 background:rgba(255,255,255,.018);
 text-align:center;
}

.gs-diy-empty>span{color:#ff5b70;font-size:10px;font-weight:900;letter-spacing:.19em}
.gs-diy-empty h3{margin-top:10px;color:#fff;font-size:20px}
.gs-diy-empty p{max-width:560px;margin-top:9px;color:rgba(255,255,255,.48);font-size:13px;line-height:1.5}
.gs-diy-empty a{margin-top:18px;color:#fff;font-size:12px;font-weight:900}

.gs-diy-pagination{
 display:flex;
 flex-wrap:wrap;
 justify-content:center;
 gap:6px;
 margin-top:28px;
}

.gs-diy-pagination a,
.gs-diy-pagination .current{
 display:grid;
 min-width:38px;
 min-height:38px;
 place-items:center;
 padding:0 10px;
 border:1px solid rgba(255,255,255,.1);
 border-radius:9px;
 background:rgba(255,255,255,.025);
 color:rgba(255,255,255,.67);
 font-size:11px;
 font-weight:800;
 text-decoration:none;
}

.gs-diy-pagination .current{border-color:#e52b46;background:#b7122e;color:#fff}

.gs-diy-safety{
 display:grid;
 grid-template-columns:auto minmax(0,1fr) auto;
 gap:22px;
 align-items:center;
 margin-top:24px;
 padding:25px 28px;
 border:1px solid rgba(216,163,58,.25);
 border-radius:18px;
 background:
  linear-gradient(90deg,rgba(216,163,58,.075),transparent 45%),
  rgba(14,15,18,.9);
}

.gs-diy-safety-code{
 display:grid;
 width:68px;
 height:68px;
 place-items:center;
 border:1px solid rgba(216,163,58,.32);
 border-radius:50%;
 color:#e9ba5a;
 font-size:9px;
 font-weight:900;
 letter-spacing:.1em;
}

.gs-diy-safety h2{font-size:30px}
.gs-diy-safety p{max-width:700px;margin-top:6px;color:rgba(255,255,255,.5);font-size:12px;line-height:1.5}
.gs-diy-safety>a{padding:11px 15px;border:1px solid rgba(255,255,255,.12);border-radius:9px;color:#fff;font-size:11px;font-weight:900;text-decoration:none;white-space:nowrap}

@media (max-width:1050px){
 .gs-diy-hero{grid-template-columns:minmax(0,1fr) minmax(270px,.72fr);gap:25px;padding-inline:42px}
 .gs-diy-workshop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .gs-diy-workshop-card:nth-child(4),.gs-diy-workshop-card:nth-child(5){min-height:190px}
 .gs-diy-tutorial-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:760px){
 .gs-diy-page{width:min(100% - 24px,680px);padding:18px 0 52px}
 .gs-diy-hero{grid-template-columns:1fr;gap:28px;min-height:0;padding:38px 28px 28px;border-radius:20px}
 .gs-diy-hero h1{font-size:clamp(58px,18vw,82px)}
 .gs-diy-hero-copy>p{font-size:16px}
 .gs-diy-hero-board{width:min(100%,430px);transform:none}
 .gs-diy-board-main{padding-block:22px}
 .gs-diy-board-main strong{font-size:39px}
 .gs-diy-workshops,.gs-diy-browser{margin-top:40px}
 .gs-diy-section-head,.gs-diy-results-head{display:block}
 .gs-diy-section-head>p{margin-top:12px}
 .gs-diy-workshop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .gs-diy-workshop-card{min-height:188px;padding:17px 14px 14px}
 .gs-diy-workshop-card:last-child{grid-column:1/-1;min-height:160px}
 .gs-diy-workshop-card strong{margin-top:29px;font-size:15px}
 .gs-diy-browser{padding:16px;border-radius:18px}
 .gs-diy-browser-top{grid-template-columns:1fr;gap:14px}
 .gs-diy-filter-list{gap:6px}
 .gs-diy-filter{min-height:34px;padding-inline:11px;font-size:10px}
 .gs-diy-search{grid-template-columns:minmax(0,1fr) auto}
 .gs-diy-results-head{position:relative;padding-right:90px}
 .gs-diy-results-head h2{font-size:36px}
 .gs-diy-results-count{position:absolute;top:0;right:0}
 .gs-diy-tutorial-grid{grid-template-columns:1fr}
 .gs-diy-tutorial-body{min-height:210px}
 .gs-diy-safety{grid-template-columns:auto minmax(0,1fr);gap:16px;padding:20px}
 .gs-diy-safety>a{grid-column:1/-1;text-align:center}
}

@media (max-width:420px){
 .gs-diy-page{width:calc(100% - 18px)}
 .gs-diy-hero{padding:32px 20px 22px}
 .gs-diy-kicker{font-size:10px}
 .gs-diy-hero h1{font-size:57px}
 .gs-diy-hero-actions{display:grid}
 .gs-diy-primary-button,.gs-diy-secondary-button{width:100%}
 .gs-diy-board-main strong{font-size:34px}
 .gs-diy-workshop-card{min-height:174px}
 .gs-diy-workshop-card strong{max-width:120px;font-size:14px}
 .gs-diy-workshop-card small{font-size:10px}
 .gs-diy-browser{padding:13px}
 .gs-diy-search input{font-size:11px}
 .gs-diy-search button{padding-inline:11px}
 .gs-diy-results-head{padding-right:0}
 .gs-diy-results-count{position:static;display:inline-flex;margin-top:10px}
 .gs-diy-safety-code{width:54px;height:54px}
 .gs-diy-safety h2{font-size:26px}
}

@media (prefers-reduced-motion:reduce){
 .gs-diy-page *{scroll-behavior:auto!important;transition:none!important}
}