/*
Theme Name: ASHFALL RP
Theme URI: https://ashfall.srtg-rp.fr
Author: ASHFALL RP by SRTG
Description: Thème post-apocalyptique sur mesure pour le serveur FiveM ASHFALL RP : accueil personnalisable, actualités, galerie, pages du serveur.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: Tous droits réservés
Text Domain: ashfall
*/
@font-face{font-family:"Rubik Dirt";src:url(assets/fonts/rubik-dirt-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Special Elite";src:url(assets/fonts/special-elite-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Barlow";src:url(assets/fonts/barlow-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(assets/fonts/barlow-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(assets/fonts/barlow-condensed-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(assets/fonts/barlow-condensed-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}

:root{
  --char:#17120d;      /* bois brûlé */
  --soot:#231b14;      /* suie */
  --metal:#3d3027;     /* métal corrodé */
  --rust:#c0612a;      /* rouille vive */
  --rust-deep:#8a3f19;
  --ash:#9b948b;       /* cendre */
  --bone:#eadfc8;      /* os / papier */
  --hazard:#d9a43c;    /* jaune danger, usage rare */
  --display:"Rubik Dirt","Barlow Condensed",Impact,sans-serif;
  --head:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Barlow",system-ui,sans-serif;
  --note:"Special Elite","Courier New",monospace;
  --wrap:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  margin:0;background:var(--char);color:var(--bone);
  font:400 1.0625rem/1.65 var(--body);
  -webkit-font-smoothing:antialiased;
}
/* grain de fond */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#ash{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.page{position:relative;z-index:2}
img{max-width:100%;height:auto;display:block}
a{color:var(--rust)}
a:hover{color:var(--hazard)}
:focus-visible{outline:2px dashed var(--hazard);outline-offset:3px}
.wrap{width:min(var(--wrap),100% - 2.5rem);margin-inline:auto}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--bone);color:var(--char);padding:.5rem 1rem}

/* ---------- en-tête ---------- */
.top{
  position:sticky;top:0;z-index:20;
  background:linear-gradient(var(--char) 70%,transparent);
}
.top .wrap{display:flex;align-items:center;gap:1.5rem;padding:.6rem 0}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--bone)}
.brand img{width:52px;height:52px}
.brand span{font:800 1.35rem/1 var(--head);letter-spacing:.04em}
.nav{display:flex;gap:1.4rem;margin-left:auto;align-items:center}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1.4rem;align-items:center}
.nav li{margin:0}
.nav a{color:var(--ash);text-decoration:none;font:600 1.1rem var(--head);letter-spacing:.03em}
.nav a:hover,.nav a[aria-current=page]{color:var(--bone)}
.nav a[aria-current=page]{box-shadow:inset 0 -2px var(--rust)}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--metal);color:var(--bone);font:600 1rem var(--head);padding:.4rem .8rem;cursor:pointer}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font:800 1.2rem/1 var(--head);letter-spacing:.05em;text-decoration:none;
  padding:1rem 1.6rem;color:var(--char);background:var(--rust);
  clip-path:polygon(0 6%,4% 0,97% 3%,100% 18%,99% 92%,95% 100%,3% 97%,0 85%);
  transition:background .15s;
}
.btn:hover{background:var(--hazard);color:var(--char)}
.btn svg{width:1.3em;height:1.3em;fill:currentColor}
.btn.ghost{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 2px var(--metal);clip-path:none}
.btn.ghost:hover{box-shadow:inset 0 0 0 2px var(--rust);color:var(--bone);background:transparent}
.nav .btn{font-size:1rem;padding:.6rem 1rem;color:var(--char)}
.nav .btn:hover{color:var(--char)}

/* ---------- héro : le message du survivant ---------- */
.hero{min-height:calc(100svh - 72px);display:grid;align-items:center;padding:2rem 0 4rem}
.hero .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:3rem;align-items:center}
.hero-logo{filter:drop-shadow(0 20px 40px rgba(0,0,0,.6));animation:sway 9s ease-in-out infinite}
@keyframes sway{50%{transform:translateY(-8px) rotate(-.6deg)}}
.note{
  position:relative;background:var(--bone);color:#2a2019;
  padding:2.4rem 2.4rem 2rem;transform:rotate(1.2deg);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.8);
  font:1.05rem/1.6 var(--note);
  background-image:
    radial-gradient(ellipse at 85% 10%,rgba(138,63,25,.28),transparent 40%),
    radial-gradient(ellipse at 10% 95%,rgba(60,40,20,.25),transparent 45%),
    repeating-linear-gradient(transparent 0 1.55rem,rgba(80,60,40,.12) 1.55rem 1.6rem);
}
.note::before{ /* ruban adhésif */
  content:"";position:absolute;top:-14px;left:50%;width:120px;height:30px;transform:translateX(-50%) rotate(-3deg);
  background:rgba(217,164,60,.55);
}
.note h1{
  font:400 clamp(2rem,4.4vw,3.3rem)/1 var(--display);color:var(--rust-deep);margin:0 0 1rem;
}
.note p{margin:.0 0 .9rem}
.note .sign{font-size:1.3rem;margin-top:1.2rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}

/* ---------- sections ---------- */
section{padding:5.5rem 0}
.h2{font:800 clamp(2.2rem,5vw,3.6rem)/1 var(--head);margin:0 0 1.5rem;letter-spacing:.01em;text-wrap:balance}
.lead{font-size:1.25rem;max-width:62ch;color:#d8ccb4}
.measure{max-width:68ch}

.fallen{background:linear-gradient(180deg,transparent,var(--soot) 20%,var(--soot) 80%,transparent)}
.fallen .wrap{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:end}
.fallen .big{font:400 clamp(2.6rem,7vw,5.5rem)/.95 var(--display);color:var(--ash);margin:0}

/* liste de survie */
.program{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 3rem}
.program li{
  display:grid;grid-template-columns:2.4rem 1fr;gap:1rem;align-items:start;
  padding:1.3rem 0;border-top:1px solid var(--metal);
}
.program svg{width:2.2rem;height:2.2rem;stroke:var(--rust);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.program strong{display:block;font:800 1.45rem/1.15 var(--head);color:var(--bone)}
.program span{color:var(--ash)}

/* bande danger */
.tape{height:26px;background:repeating-linear-gradient(-45deg,var(--hazard) 0 22px,var(--char) 22px 44px);transform:rotate(-1.2deg);margin:1rem -2vw;opacity:.9}
.warn .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4rem}
.warn .h2{color:var(--hazard)}

/* galerie */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.8rem;margin-top:2rem}
.grid a{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--soot);border:1px solid var(--metal)}
.grid img{width:100%;height:100%;object-fit:cover;filter:sepia(.25) saturate(.85);transition:filter .2s,transform .3s}
.grid a:hover img{filter:none;transform:scale(1.03)}
.empty{border:1px dashed var(--metal);padding:3rem 2rem;text-align:center;color:var(--ash);font-family:var(--note);margin-top:2rem}
.lightbox{position:fixed;inset:0;background:rgba(10,7,5,.94);display:none;place-items:center;z-index:50;padding:2rem}
.lightbox.open{display:grid}
.lightbox img{max-height:82vh;width:auto;border:1px solid var(--metal)}
.lightbox p{text-align:center;color:var(--ash);margin:.8rem 0 0}
.lightbox button{position:absolute;background:none;border:0;color:var(--bone);font:800 2.2rem var(--head);cursor:pointer;padding:1rem}
.lb-close{top:.5rem;right:1rem}.lb-prev{left:.5rem;top:50%}.lb-next{right:.5rem;top:50%}

/* appel final */
.final{text-align:center;padding:7rem 0 6rem}
.final p{font-size:1.25rem;color:#d8ccb4;max-width:56ch;margin:0 auto 1rem}
.final .shout{font:400 clamp(2.4rem,7vw,5.6rem)/.95 var(--display);text-wrap:balance;color:var(--rust);margin:1.5rem 0 1rem}
.final .tag{font-family:var(--note);color:var(--ash)}

/* pages intérieures */
.page-head{padding:4rem 0 1rem}
.page-head h1{font:400 clamp(2.6rem,7vw,5rem)/1 var(--display);color:var(--bone);margin:0 0 1rem}
.content{padding:2rem 0 6rem}
.content h2{font:800 2rem/1.1 var(--head);margin:3rem 0 1rem;color:var(--bone)}
.content h3{font:800 1.4rem var(--head);margin:2rem 0 .5rem}
.content p,.content li{color:#d8ccb4}
.steps{list-style:none;counter-reset:s;padding:0;margin:2rem 0;max-width:760px}
.steps li{counter-increment:s;position:relative;padding:0 0 2.2rem 4.5rem;border-left:2px solid var(--metal);margin-left:1.4rem}
.steps li:last-child{border-color:transparent}
.steps li::before{
  content:counter(s);position:absolute;left:-1.45rem;top:-.3rem;width:2.8rem;height:2.8rem;display:grid;place-items:center;
  background:var(--rust);color:var(--char);font:800 1.5rem var(--head);
}
.steps strong{display:block;font:800 1.5rem/1.2 var(--head);color:var(--bone);margin-bottom:.3rem}
.panel{background:var(--soot);border-left:4px solid var(--rust);padding:1.5rem 1.8rem;margin:2rem 0;max-width:760px}
.panel p:last-child{margin-bottom:0}

/* pied de page */
.foot{border-top:1px solid var(--metal);padding:3rem 0 2rem;background:var(--char);color:var(--ash);font-size:.95rem}
.foot .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:center}
.foot img{width:72px}
.social{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:flex-end}
.social a{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--metal);color:var(--ash)}
.social a:hover{border-color:var(--rust);color:var(--bone)}
.social svg{width:20px;height:20px;fill:currentColor}
.foot-links{display:flex;gap:1.2rem;flex-wrap:wrap}
.foot-links a{color:var(--ash)}
.foot small{display:block;margin-top:.4rem}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero .wrap,.fallen .wrap,.warn .wrap{grid-template-columns:1fr;gap:2rem}
  .hero-logo{max-width:260px;margin:0 auto}
  .program{grid-template-columns:1fr}
  .foot .wrap{grid-template-columns:1fr;text-align:center;justify-items:center}
  .social,.foot-links{justify-content:center}
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--char);border-bottom:1px solid var(--metal);padding:.5rem 1.25rem 1rem}
  .nav.open{display:flex}
  .nav ul{flex-direction:column;align-items:stretch;gap:0}
  .nav a{display:block;padding:.7rem 0}
  .nav .btn{justify-content:center;margin-top:.5rem}
  .top .wrap{position:relative}
}
@media (max-width:520px){
  .note{padding:2rem 1.4rem 1.6rem;transform:none}
  section{padding:4rem 0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- contenus WordPress ---------- */
.entry{max-width:72ch}
.entry.wide{max-width:none}
.entry > *{margin-top:0;margin-bottom:1.2rem}
.entry h2{font:800 2rem/1.1 var(--head);margin:2.8rem 0 1rem;color:var(--bone)}
.entry h3{font:800 1.45rem/1.2 var(--head);margin:2rem 0 .6rem;color:var(--bone)}
.entry h4{font:600 1.2rem var(--head);margin:1.6rem 0 .4rem}
.entry p,.entry li{color:#d8ccb4}
.entry ul,.entry ol{padding-left:1.4rem}
.entry li{margin-bottom:.4rem}
.entry strong{color:var(--bone)}
.entry blockquote,.entry .wp-block-quote{border-left:4px solid var(--rust);background:var(--soot);margin-left:0;padding:1.2rem 1.6rem;font-family:var(--note)}
.entry blockquote p:last-child{margin-bottom:0}
.entry hr,.entry .wp-block-separator{border:0;height:1px;background:var(--metal);margin:2.5rem 0}
.entry img{border:1px solid var(--metal)}
.entry figcaption{color:var(--ash);font-size:.9rem;text-align:center}
.entry table{border-collapse:collapse;width:100%}
.entry th,.entry td{border:1px solid var(--metal);padding:.6rem .8rem;text-align:left}
.entry th{background:var(--soot);font-family:var(--head)}
.entry .wp-block-button__link{
  display:inline-flex;align-items:center;font:800 1.15rem/1 var(--head);letter-spacing:.05em;text-decoration:none;
  padding:1rem 1.6rem;color:var(--char);background:var(--rust);border-radius:0;
  clip-path:polygon(0 6%,4% 0,97% 3%,100% 18%,99% 92%,95% 100%,3% 97%,0 85%);
}
.entry .wp-block-button__link:hover{background:var(--hazard);color:var(--char)}
.entry .is-style-outline .wp-block-button__link{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 2px var(--metal);clip-path:none}
.entry .wp-block-buttons{display:flex;gap:1rem;flex-wrap:wrap}
.alignwide{max-width:none}
.aligncenter{margin-inline:auto;text-align:center}
.has-text-align-center{text-align:center}
/* encadré : style de paragraphe/groupe */
.entry .is-style-encadre{background:var(--soot);border-left:4px solid var(--rust);padding:1.4rem 1.8rem}
/* liste en étapes numérotées */
.entry ol.is-style-etapes{list-style:none;counter-reset:s;padding:0;margin:2rem 0}
.entry ol.is-style-etapes > li{counter-increment:s;position:relative;padding:0 0 2.2rem 4.5rem;border-left:2px solid var(--metal);margin:0 0 0 1.4rem}
.entry ol.is-style-etapes > li:last-child{border-color:transparent}
.entry ol.is-style-etapes > li::before{
  content:counter(s);position:absolute;left:-1.45rem;top:-.3rem;width:2.8rem;height:2.8rem;display:grid;place-items:center;
  background:var(--rust);color:var(--char);font:800 1.5rem var(--head);
}
.entry ol.is-style-etapes > li strong:first-child{display:block;font:800 1.5rem/1.2 var(--head);color:var(--bone);margin-bottom:.3rem}
/* galerie WordPress */
.entry .wp-block-gallery{gap:.8rem!important;max-width:none}
.entry .wp-block-gallery img{border:1px solid var(--metal);filter:sepia(.25) saturate(.85);cursor:zoom-in;transition:filter .2s}
.entry .wp-block-gallery img:hover{filter:none}
.entry:has(.wp-block-gallery){max-width:none}

/* actualités */
.news{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2.5rem 2rem;margin-top:2rem}
.news article{border-top:3px solid var(--rust);padding-top:1rem}
.news .thumb{display:block;aspect-ratio:16/9;overflow:hidden;margin-bottom:1rem;border:1px solid var(--metal);background:var(--soot)}
.news .thumb img{width:100%;height:100%;object-fit:cover}
.news h2,.news h3{font:800 1.6rem/1.15 var(--head);margin:.3rem 0 .6rem}
.news h2 a,.news h3 a{color:var(--bone);text-decoration:none}
.news h2 a:hover,.news h3 a:hover{color:var(--rust)}
.news p{color:var(--ash);margin:0 0 .8rem}
.date{font-family:var(--note);color:var(--ash);font-size:.95rem}
.more{font:600 1.05rem var(--head);color:var(--rust);text-decoration:none}
.post-cover{margin:0 0 2.5rem;border:1px solid var(--metal);max-width:1000px}
.pager{display:flex;justify-content:space-between;gap:1rem;margin-top:3rem;font:600 1.1rem var(--head)}
.pager a{text-decoration:none}
.nav-links{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:3rem}
.nav-links .page-numbers{padding:.4rem .8rem;border:1px solid var(--metal);color:var(--bone);text-decoration:none;font-family:var(--head)}
.nav-links .current{background:var(--rust);color:var(--char);border-color:var(--rust)}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.foot-links ul{list-style:none;margin:0;padding:0;display:flex;gap:1.2rem;flex-wrap:wrap}
@media (max-width:900px){.foot-links ul{justify-content:center}}
/* galerie : grille régulière quelle que soit la mise en page choisie dans l'éditeur */
.entry .wp-block-gallery.has-nested-images{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.8rem!important}
.entry .wp-block-gallery.has-nested-images figure.wp-block-image{width:auto!important;margin:0!important;aspect-ratio:16/10}
.entry .wp-block-gallery.has-nested-images figure.wp-block-image img{width:100%!important;height:100%!important;object-fit:cover}
/* actu sans image : vignette au logo */
.news .thumb.no-img{display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,var(--metal),var(--soot) 70%)}
.news .thumb.no-img img{width:40%;height:auto;object-fit:contain;border:0}