/* =====================================================================
   Variante d'essai « défilement » de la page Réalisations
   Chargée UNIQUEMENT par template-realisations-27.php : aucun impact
   sur le site en place. Mêmes variables de couleur que style.css.
   ===================================================================== */

.r27{background:var(--paper);color:var(--ink)}
.r27-wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}

/* --- retour --- */
.r27-back{padding:130px 0 0}
.r27-back a{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--smoke);transition:color .25s var(--ease)}
.r27-back a:hover{color:var(--ink)}

/* --- en-tête de projet --- */
.r27-head{padding:44px 0 56px}
.r27-head h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,5.2vw,4.1rem);line-height:1.08;letter-spacing:-.015em;max-width:16ch}
.r27-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0;margin-top:52px;border-top:1px solid var(--stone)}
.r27-facts li{padding:26px 26px 26px 0;border-right:1px solid var(--stone)}
.r27-facts li:last-child{border-right:none}
.r27-facts span{display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--smoke);margin-bottom:10px}
.r27-facts strong{display:block;font-weight:400;font-size:.98rem;line-height:1.5}

/* --- images : plein cadre, jamais rognées (filigrane dans la photo) --- */
.r27-hero img,.r27-photos img{width:100%;height:auto}
.r27-hero{margin:0}
.r27-photos{display:flex;flex-direction:column;gap:clamp(18px,3.4vw,44px);margin-top:clamp(18px,3.4vw,44px)}
.r27-photos figure{margin:0}

/* --- texte d'intention --- */
.r27-text{padding:clamp(64px,9vw,120px) 0}
.r27-text .r27-wrap{max-width:860px}
.r27-text .kicker{margin-bottom:22px}
.r27-text p:last-child{font-family:var(--serif);font-weight:300;font-size:clamp(1.15rem,2.1vw,1.6rem);line-height:1.62;color:var(--ink-2)}

/* --- projet suivant --- */
.r27-next{margin-top:clamp(70px,9vw,130px);border-top:1px solid var(--stone);background:var(--paper-alt)}
.r27-next a{display:flex;flex-direction:column;gap:12px;padding:clamp(48px,7vw,88px) 0}
.r27-next span{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--smoke)}
.r27-next strong{font-family:var(--serif);font-weight:300;font-size:clamp(1.7rem,4vw,3rem);line-height:1.1;transition:opacity .25s var(--ease)}
.r27-next a:hover strong{opacity:.55}

/* --- sommaire --- */
.r27-intro{padding:150px 0 clamp(48px,7vw,88px)}
.r27-intro h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.3rem,5.6vw,4.4rem);line-height:1.06;letter-spacing:-.015em;margin:14px 0 22px}
.r27-intro h1 em{font-style:italic}
.r27-intro p:last-child{max-width:56ch;color:var(--ink-soft)}
.r27-list{display:flex;flex-direction:column;gap:clamp(40px,6vw,90px)}
.r27-card figure{margin:0;overflow:hidden}
.r27-card img{width:100%;height:auto;transition:transform .9s var(--ease)}
.r27-card:hover img{transform:scale(1.02)}
.r27-card-cap{display:flex;align-items:baseline;gap:22px;padding-top:20px;flex-wrap:wrap}
.r27-card-cap .num{font-size:.72rem;letter-spacing:.2em;color:var(--smoke)}
.r27-card-cap h2{font-family:var(--serif);font-weight:300;font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.2}
.r27-card-cap .more{margin-left:auto;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--smoke);transition:color .25s var(--ease)}
.r27-card:hover .more{color:var(--ink)}

@media (max-width:760px){
  .r27-back{padding-top:104px}
  .r27-facts li{border-right:none;border-bottom:1px solid var(--stone);padding:20px 0}
  .r27-facts li:last-child{border-bottom:none}
  .r27-card-cap .more{margin-left:0;width:100%}
}