/* ==========================================================================
   RÉALISATIONS — neutre encre (#1B1233), texte #F6F0F2. La couleur vient des marques clientes.
   Pages projet (realisation-*.html) : le gabarit prend les couleurs de la marque.
   ========================================================================== */
.rl-hero{min-height:auto;padding:140px 0 40px}
.rl-hero-in{display:flex;flex-direction:column;gap:24px;width:100%;z-index:1}
.rl-hero .pg-title{font-size:clamp(3.4rem,10.4vw,10rem)}
.rl-hero .pg-title .sub{font-size:.2em;max-width:22ch;margin-top:.6em;font-weight:760;letter-spacing:-.012em}
.rl{padding-top:30px}
.rl-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 18px;border-radius:999px;border:1.5px solid #F6F0F2;background:transparent;color:#F6F0F2;font-weight:700;cursor:pointer;transition:background .3s,color .3s}
.chip i{width:12px;height:12px;border-radius:50%;border:1.5px solid #F6F0F2}
.chip[aria-pressed="true"]{background:#F6F0F2;color:#1B1233}
.chip:focus-visible{outline:3px solid #FFC4DA;outline-offset:3px}
.rgrid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-flow:dense;gap:18px}
.rt{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;background:var(--b-bg);color:var(--b-fg);min-height:340px;isolation:isolate}
.rt1{grid-column:span 7;grid-row:span 2;min-height:640px}.rt2{grid-column:span 5}.rt3{grid-column:span 5}.rt4{grid-column:span 4}.rt5{grid-column:span 8}
.rt.hide{display:none}
.rt figure{margin:0;flex:1;min-height:200px;position:relative;overflow:hidden}
.rt img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.rt:hover img,.rt:focus-visible img{transform:scale(1.07)}
.rt-wipe{position:absolute;inset:0;background:var(--b-acc);transform:translateY(101%);transition:transform .7s var(--ease);z-index:1}
.rt:hover .rt-wipe,.rt:focus-visible .rt-wipe{transform:translateY(62%)}
.rt-info{position:relative;z-index:2;padding:20px 24px 22px;background:var(--b-bg);color:var(--b-fg);display:flex;flex-direction:column;gap:6px}
.rt-svc{font-weight:700;font-size:.86rem}
.rt-name{font-family:var(--bf);font-weight:var(--bw,700);font-style:var(--bfs,normal);text-transform:var(--btt,none);letter-spacing:var(--b-ls,0);font-size:clamp(1.7rem,3vw,2.8rem);line-height:1}
.rt-tag{max-width:40ch}
.rt-go{font-weight:800;text-decoration:underline;text-underline-offset:4px;margin-top:4px}
.rl-empty{padding:30px 0;font-weight:700}
.rl-stage .blist button{color:#F6F0F2}
.rl-stage .blist button small{color:rgba(246,240,242,.82)}
.rl-stage .blist button[aria-selected="true"]{opacity:1}

/* ---------- pages projet : le gabarit prend les couleurs de la marque ---------- */
.pj-hero{min-height:auto;padding:130px 0 50px;overflow:hidden}
.pj-hero-in{width:100%;display:flex;flex-direction:column;gap:24px;z-index:1}
.pj-name{font-family:var(--bf);font-weight:var(--bw,700);font-style:var(--bfs,normal);text-transform:var(--btt,none);letter-spacing:var(--b-ls,0);font-size:clamp(3.2rem,10vw,9.6rem);line-height:.9}
.pj-tag{font-size:clamp(1.2rem,2.2vw,1.8rem);max-width:30ch;font-family:var(--bf);font-weight:var(--bw,700);font-style:var(--bfs,normal)}
.pj-cover{margin:10px 0 0;height:min(60vh,560px);border-radius:var(--r-xl);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.pj-cover img{width:100%;height:100%;object-fit:cover}
.pj-ctx{padding:70px 0 20px}
.pj-ctx p{font-family:var(--bf);font-weight:var(--bw,700);font-style:var(--bfs,normal);font-size:clamp(1.5rem,3vw,2.6rem);line-height:1.15;max-width:30ch}
.pj-3 li{display:grid;grid-template-columns:90px 1fr;gap:20px;padding:28px 0;border-top:2px solid currentColor}
.pj-3 li:last-child{border-bottom:2px solid currentColor}
.pj-3 .n{font-family:var(--bf);font-weight:var(--bw,700);font-size:3.6rem;line-height:.9;color:transparent;-webkit-text-stroke:2px currentColor}
.pj-3 h3{font-family:var(--bf);font-weight:var(--bw,700);font-style:var(--bfs,normal);text-transform:var(--btt,none);font-size:clamp(1.8rem,3.2vw,2.8rem);font-variation-settings:normal;margin-bottom:8px}
.pj-3 p,.pj-3 ul{max-width:52ch}
.pj-3 ul{list-style:disc;padding-left:1.2em}
.pj-gal{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(120px,14vw);gap:14px}
.pj-gal figure{margin:0;overflow:hidden;border-radius:var(--b-rad,16px);border:var(--b-bd,0);box-shadow:var(--b-sh,none)}
.pj-gal img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pj-gal figure:hover img{transform:scale(1.06)}
.pj-gal .a{grid-column:span 3;grid-row:span 2}.pj-gal .b{grid-column:span 3}.pj-gal .c{grid-column:span 2}.pj-gal .d{grid-column:span 1}.pj-gal .e{grid-column:span 3;grid-row:span 1}.pj-gal .f{grid-column:span 3}
.pj-quote{padding:70px 0}
.pj-quote blockquote{font-family:var(--bf);font-weight:var(--bw,700);font-style:var(--bfs,normal);font-size:clamp(1.9rem,4vw,3.6rem);line-height:1.08;max-width:24ch}
.pj-quote p{margin-top:18px;font-weight:700}
.pj-next{display:block;padding:60px 0 90px}
.pj-next a.big{font-family:var(--bf);font-weight:var(--bw,700);font-style:var(--bfs,normal);text-transform:var(--btt,none);font-size:clamp(2.6rem,7vw,6.6rem);line-height:.95;display:inline-block;transition:transform .5s var(--ease)}
.pj-next a.big:hover{transform:translateX(14px)}
.pj-next small{display:block;font-weight:700;margin-bottom:8px}

@media (max-width:1000px){
  .rgrid{grid-template-columns:repeat(2,1fr)}
  .rt1,.rt2,.rt3,.rt4,.rt5{grid-column:span 1;grid-row:auto;min-height:340px}
  .rt1{grid-column:span 2}.rt5{grid-column:span 2}
  .pj-gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(130px,34vw)}
  .pj-gal figure{grid-column:span 1!important;grid-row:auto!important}
  .pj-gal .a{grid-column:span 2!important}
}
@media (max-width:600px){.rgrid{grid-template-columns:1fr}.rt1,.rt5{grid-column:span 1}.pj-3 li{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.rt-wipe{display:none}}