/* ============================================================
   BOOK PORTFOLIO — Styles spécifiques à
   book-realisations-sites-internet.php
============================================================ */

#reas{padding:160px 44px 60px;background:var(--dk);color:#fff}
#reas .wrap{max-width:1360px;margin:0 auto}

/* Hero court */
.rea-head{text-align:center;margin-bottom:40px}
.rea-head .sl{display:inline-block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--g);background:rgba(145,239,25,.08);padding:6px 14px;border-radius:50px;margin-bottom:18px}
.rea-head h1{font-family:'Outfit',sans-serif;font-size:56px;font-weight:800;line-height:1.1;margin:0 0 12px}
.rea-head h1 em{font-style:normal;color:var(--g)}
.rea-head p{font-size:16px;color:var(--ltm);margin:0}

/* Filtres */
.rea-filters{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:44px}
.rea-filter{background:transparent;border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.78);font-family:'Figtree',sans-serif;font-size:13px;font-weight:600;padding:9px 18px;border-radius:50px;cursor:pointer;transition:all .2s;letter-spacing:.02em}
.rea-filter:hover{border-color:var(--g);color:#fff}
.rea-filter.active{background:var(--g);border-color:var(--g);color:#050505}

/* Grille portfolio */
.rea-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rea-card{position:relative;aspect-ratio:600/338;border-radius:14px;overflow:hidden;background:#0a0a0a;text-decoration:none;display:block;opacity:0;transform:translateY(30px)}
.rea-card.in{opacity:1;transform:translateY(0);transition:opacity .7s cubic-bezier(.22,.68,0,1.2),transform .7s cubic-bezier(.22,.68,0,1.2)}
.rea-card.in:hover{transform:translateY(-6px);transition:transform .4s cubic-bezier(.22,.68,0,1.2)}
.rea-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.68,0,1.2),filter .3s}
.rea-card:hover img{transform:scale(1.08);filter:brightness(.55)}
.rea-card::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.85) 100%);z-index:1}
.rea-card:hover::before{background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.85) 100%)}

/* Badge type */
.rea-type{position:absolute;top:14px;left:14px;background:rgba(145,239,25,.92);color:#050505;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;border-radius:50px;z-index:3;backdrop-filter:blur(6px)}

/* Infos carte */
.rea-info{position:absolute;left:22px;right:22px;bottom:22px;z-index:2;color:#fff;transition:transform .35s cubic-bezier(.22,.68,0,1.2)}
.rea-name{font-family:'Outfit',sans-serif;font-size:22px;font-weight:700;line-height:1.2;margin-bottom:4px;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.rea-city{font-size:13px;color:rgba(255,255,255,.75);letter-spacing:.02em;margin-bottom:6px}
.rea-hook{font-size:13px;color:var(--g);font-weight:600;line-height:1.35;max-width:92%;text-shadow:0 2px 10px rgba(0,0,0,.6)}

/* Bouton révélé au hover */
.rea-btn{position:absolute;inset-inline:22px;bottom:-50px;z-index:3;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--g);color:#050505;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:12px 18px;border-radius:50px;opacity:0;transition:bottom .35s cubic-bezier(.22,.68,0,1.2),opacity .3s}
.rea-card:hover .rea-btn{bottom:22px;opacity:1}
.rea-card:hover .rea-info{transform:translateY(-58px)}

/* Filtre — hidden */
.rea-card.hidden{display:none}

/* Empty state */
.rea-empty{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--ltm);font-size:15px}

/* CTA bas */
.rea-cta{text-align:center;margin-top:70px;padding:44px 30px;background:linear-gradient(135deg,#151515 0%,#0f0f0f 100%);border:1px solid rgba(145,239,25,.18);border-radius:20px}
.rea-cta h2{font-family:'Outfit',sans-serif;font-size:30px;font-weight:800;margin:0 0 22px}
.rea-cta h2 em{font-style:normal;color:var(--g)}
.rea-cta .btn-main{display:inline-flex;align-items:center;gap:10px;background:var(--g);color:#050505;font-weight:700;padding:14px 30px;border-radius:50px;text-decoration:none;border:2px solid var(--g);transition:all .2s;font-size:14px;text-transform:uppercase;letter-spacing:.06em}
.rea-cta .btn-main:hover{background:transparent;color:var(--g)}

/* Bloc SEO bas */
.rea-seo{max-width:860px;margin:70px auto 0;padding:0 10px;color:rgba(255,255,255,.72);font-size:15px;line-height:1.75}
.rea-seo h2{font-family:'Outfit',sans-serif;font-size:22px;font-weight:700;color:#fff;margin:0 0 18px;text-align:center}
.rea-seo p{margin:0 0 14px}
.rea-seo a{color:var(--g);text-decoration:none}
.rea-seo a:hover{text-decoration:underline}

@media(max-width:1100px){.rea-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){
  #reas{padding:130px 18px 50px}
  .rea-head h1{font-size:38px}
  .rea-grid{grid-template-columns:1fr;gap:14px}
  .rea-cta h2{font-size:24px}
  .rea-seo{margin-top:50px;font-size:14px}
  .rea-seo h2{font-size:19px}
}