/* ============ Réalisations — fiches éditoriales ============
   Une réalisation devient une grande carte de projet : informations à gauche,
   photographie à droite. Le style reprend la respiration et les angles doux
   de la référence client, tout en conservant les tokens Acloud.
*/

.realisations-page{background:var(--fond)}
.realisations-gallery{background:var(--fond)}

/* ---------- Les cartes ---------- */
.real-list{display:grid;gap:clamp(26px,4.2vw,64px)}
.real-card{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
  height:clamp(390px,39vw,590px);
  overflow:hidden;
  background:var(--fond);
  border:1px solid color-mix(in srgb,var(--camel) 8%,var(--ligne));
  border-radius:16px;
  box-shadow:0 18px 50px -40px rgba(38,38,42,.35);
}
.real-card-copy{
  display:grid;
  min-width:0;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:clamp(24px,3vw,44px);
  overflow:hidden;
  padding:clamp(28px,4.5vw,72px);
}
.real-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.real-pill{
  display:inline-flex;
  align-items:center;
  min-height:48px;
  padding:10px 22px;
  border:1px solid var(--camel);
  border-radius:12px;
  background:var(--camel);
  color:var(--creme);
  font-size:12px;
  font-weight:600;
  letter-spacing:.24em;
  line-height:1;
  text-transform:uppercase;
}
.real-pill-clair{background:var(--creme);border-color:var(--ligne);color:var(--camel-fonce)}
.real-card-heading{align-self:center;min-width:0}
.real-kicker{
  display:block;
  margin-bottom:18px;
  color:color-mix(in srgb,var(--camel-fonce) 64%,var(--gris));
  font-size:clamp(12px,1vw,15px);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.real-card-heading h2{
  max-width:12ch;
  color:var(--noir);
  font-size:clamp(35px,4.8vw,74px);
  line-height:.98;
  overflow-wrap:anywhere;
}
.real-location{
  margin-top:22px;
  color:color-mix(in srgb,var(--camel-fonce) 76%,var(--gris));
  font-size:clamp(13px,1.2vw,18px);
  letter-spacing:.22em;
  line-height:1.35;
  text-transform:uppercase;
}
.real-open{
  align-self:flex-start;
  margin:0;
  padding:0;
  border:0;
  background:none;
  color:var(--camel-fonce);
  cursor:pointer;
  font:500 clamp(15px,1.3vw,20px)/1.3 var(--f-body);
  text-align:left;
  transition:color 180ms ease-out;
}
@media(hover:hover) and (pointer:fine){
  .real-open:hover{color:var(--noir)}
}
.real-open:focus-visible{outline:2px solid var(--noir);outline-offset:5px}
.real-card-media{
  position:relative;
  display:block;
  min-width:0;
  min-height:100%;
  padding:0;
  overflow:hidden;
  border:0;
  background:var(--ligne);
  cursor:pointer;
}
.real-card-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.72) 12%,rgba(255,255,255,.28) 28%,transparent 52%)}
.real-card:nth-child(even) .real-card-media::after{
  background:linear-gradient(270deg,#fff 0%,rgba(255,255,255,.72) 12%,rgba(255,255,255,.28) 28%,transparent 52%)}
.real-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 700ms var(--out),filter 700ms ease-out;
}
@media(hover:hover) and (pointer:fine){.real-card-media:hover img{transform:scale(1.035);filter:saturate(1.04)}}
.real-card-media:focus-visible{outline:3px solid var(--camel);outline-offset:-8px}

/* Une carte sur deux inverse le sens de lecture, comme une série éditoriale.
   Texte aligné à droite avec elle (retour 18/09) : la pastille, le kicker,
   le titre et le lien suivent tous le même bord que la photo. */
.real-card:nth-child(even) .real-card-copy{order:2;justify-items:end;text-align:right}
.real-card:nth-child(even) .real-card-media{order:1}
.real-card:nth-child(even) .real-meta{justify-content:flex-end}

/* Témoignages : même bandeau animé que sur la home. */
.realisations-testimonials .real-tm{margin-top:clamp(32px,3.6vw,56px)}
.realisations-testimonials .real-tm .tm-grid{gap:clamp(20px,2.4vw,28px)}
.realisations-testimonials .real-tm .tm{
  background:var(--fond);
  border:1px solid var(--ligne);
  border-radius:16px;
  padding:clamp(26px,2.4vw,34px);
}
.realisations-testimonials .real-tm .tm::before{position:static;display:block;font-size:40px;opacity:.5}
.realisations-testimonials .real-tm .tm blockquote{margin-top:14px}
.realisations-testimonials .real-tm .tm .ph-av{border:0;background:var(--bleu)}
.realisations-testimonials .real-tm .tm:nth-child(2) .ph-av{background:var(--camel)}
.realisations-testimonials .real-tm .tm:nth-child(3) .ph-av{background:var(--noir)}

/* ---------- La carte ouverte ---------- */
.bento-vue{
  width:min(1280px,92vw);
  max-height:92dvh;
  overflow:auto;
  margin:auto;
  padding:0;
  border:0;
  border-radius:16px;
  background:none;
  color:#fff;
}
.bento-vue:focus,.bento-vue:focus-visible{outline:none}
.bento-vue::backdrop{background:rgba(20,18,16,.62);backdrop-filter:blur(3px)}
.bento-vue-cadre{
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:16px;
  background:var(--noir);
}
.bento-vue-piste{position:relative;flex:none;height:min(62dvh,760px);overflow:hidden;border-radius:16px 16px 0 0}
.bento-vue-piste img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;
  background:var(--noir);
}
.bento-vue-piste.is-changing img{border-radius:0;will-change:transform}
.bento-vue-controles{
  position:absolute;
  top:20px;
  right:20px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:12px;
  background:rgba(38,38,42,.85);
  color:#fff;
}
.bento-vue-nav{
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:inherit;
  cursor:pointer;
  font:500 18px/1 var(--f-body);
  transition:background 160ms ease-out,transform 160ms ease-out;
}
.bento-vue-nav:hover{background:rgba(255,255,255,.16);transform:scale(1.04)}
.bento-vue-nav:focus{outline:none}
.bento-vue-nav:focus-visible{background:var(--camel)}
.bento-vue-compteur{min-width:42px;text-align:center;font-size:12px;letter-spacing:.08em}
.bento-vue-txt{
  position:relative;
  right:0;
  bottom:0;
  left:0;
  padding:clamp(20px,3vw,34px) clamp(24px,4vw,44px);
  border-radius:0 0 16px 16px;
  background:var(--creme);
  box-shadow:inset 0 3px 0 var(--camel);
  color:var(--noir);
}
.bento-vue-txt h2{margin:2px 0 10px;color:var(--camel-fonce);font-size:clamp(20px,3vw,28px)}
.bento-vue-txt p{max-width:62ch;margin:8px 0 0;color:#3F444B;font-size:clamp(13.5px,1.4vw,14.5px)}
.bento-vue-txt p b{color:var(--camel-fonce)}
.bento-d-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.bento-tag{color:var(--camel);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.bento-ville{color:#3F444B;font-size:13px}
.bento-vue-txt .muted,.bento-vue-txt .muted b{color:rgba(63,68,75,.55);font-style:italic}
.bento-vue-txt .muted b{color:var(--camel-fonce)}
.bento-tr{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.pill{padding:9px 16px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap}
.pill-avant{background:var(--ciel);color:#2C4A5E}
.pill-apres{background:var(--noir);color:#fff}
.pill.muted{background:rgba(38,38,42,.08);color:rgba(63,68,75,.55);font-style:italic;font-weight:500}

/* ---------- Responsive ---------- */
@media(max-width:760px){
  .real-card{
    grid-template-columns:1fr;
    grid-template-rows:1fr 40%;
    height:clamp(600px,155vw,740px);
    border-radius:16px;
  }
  .real-card-copy{min-height:0;padding:28px}
  .real-card-heading h2{max-width:10ch;font-size:clamp(38px,11vw,58px)}
  .real-card:nth-child(even) .real-card-copy{order:1}
  .real-card:nth-child(even) .real-card-media{order:2}
  .real-card-media{height:auto;min-height:0}
  .real-card-media img{height:100%}
  .bento-vue{width:92vw;max-height:86vh;overflow:auto;border-radius:16px}
  .bento-vue-cadre{aspect-ratio:auto;display:flex;flex-direction:column;border-radius:16px}
  .bento-vue-piste{height:auto;aspect-ratio:4/3}
  .bento-vue-piste img{height:100%;border-radius:0}
  .bento-vue-controles{top:14px;right:14px}
  .bento-vue-txt{position:static;padding:22px 22px 26px;border-radius:0 0 16px 16px;background:var(--creme)}
  .bento-vue-txt h2{font-size:22px}
  .bento-vue-txt p{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  .real-card-media img{transition:none}
  .real-card-media:hover img{transform:none;filter:none}
}