/* Réalisations au niveau des gammes : légende posée sur la photo, ligne de détail, action « Découvrir ».
   Chargée après typescale.css, sur realisations.html seulement. */
.realisations-page .realisations{background:var(--paper)}
.realisations-page .realisation-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.realisations-page .realisation-card{position:relative;overflow:hidden;background:#1e1f1d}
.realisations-page .realisation-photo{background:#1e1f1d}
.realisations-page .realisation-photo img,
.realisations-page .realisation-card:nth-child(even) .realisation-photo img{height:auto;aspect-ratio:4/3;object-position:center;filter:none}
.realisations-page .realisation-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,#0000008c 78%,#000000b8);pointer-events:none}
.realisations-page .realisation-photo:focus-visible img{transform:scale(1.03);filter:none}@media (hover:hover) and (pointer:fine){.realisations-page .realisation-photo:hover img{transform:scale(1.03);filter:none}}

/* La légende est sur la photo ; les clics la traversent jusqu'au bouton. */
.realisations-page .realisation-card figcaption{position:absolute;left:28px;right:28px;bottom:26px;z-index:1;padding:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:6px 24px;color:#fff;pointer-events:none}
.realisations-page .realisation-card .realisation-kind{grid-column:1;grid-row:1;width:auto;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#ffffffc4}
.realisations-page .realisation-card :is(h2,h3){grid-column:1;grid-row:2;color:#fff;font-size:34px!important;line-height:1.15!important;letter-spacing:-.03em}
.realisations-page .realisation-summary{grid-column:1;grid-row:3;margin:4px 0 0;font-size:13px;line-height:1.6;color:#eee;max-width:46ch;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.realisations-page .realisation-grid:not(.is-filtered)>.realisation-card:nth-child(5n+1) .realisation-summary{-webkit-line-clamp:unset;display:block}
.realisations-page .realisation-more{grid-column:2;grid-row:2/4;align-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:8px;white-space:nowrap}
.realisations-page .realisation-more small{font-size:12px;color:#ffffffb8}
.realisations-page .realisation-more span{font-size:13px;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.realisations-page .realisation-card:focus-within .realisation-more span{text-decoration-thickness:2px}@media (hover:hover) and (pointer:fine){.realisations-page .realisation-card:hover .realisation-more span{text-decoration-thickness:2px}}

/* Projet vedette : une rangée entière, la photo à gauche, le texte à droite, sur le fond de la page. */
.realisations-page .realisation-grid:not(.is-filtered)>.realisation-card:nth-child(5n+1){grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);background:transparent;overflow:visible}
.realisations-page .realisation-grid:not(.is-filtered)>.realisation-card:nth-child(5n+1) .realisation-photo{overflow:hidden}
.realisations-page .realisation-grid:not(.is-filtered)>.realisation-card:nth-child(5n+1) figcaption{color:var(--ink,#302c28)}
.realisations-page .realisation-grid:not(.is-filtered)>.realisation-card:nth-child(5n+1) :is(h2,h3){color:var(--ink,#302c28)}
.realisations-page .realisation-grid:not(.is-filtered)>.realisation-card:nth-child(5n+1) .realisation-kind{color:#6b6a66}
.realisations-page .realisation-grid:not(.is-filtered)>.realisation-card:nth-child(5n+1) .realisation-more small{color:#6b6a66}
.realisations-page .realisation-grid:not(.is-filtered)>.realisation-card:nth-child(5n+1) .realisation-photo img{height:100%;min-height:520px;max-height:none;aspect-ratio:auto;object-position:center 62%}
.realisations-page .realisation-grid:not(.is-filtered)>.realisation-card:nth-child(5n+1) .realisation-photo:after{display:none}
.realisations-page .realisation-grid:not(.is-filtered)>.realisation-card:nth-child(5n+1) figcaption{position:static;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px;padding:20px 0 20px 52px;background:transparent;border-left:0}
.realisations-page .realisation-grid:not(.is-filtered)>.realisation-card:nth-child(5n+1) :is(h2,h3){font-size:42px!important}
.realisations-page .realisation-grid:not(.is-filtered)>.realisation-card:nth-child(5n+1) .realisation-kind{order:-1}
.realisations-page .realisation-grid:not(.is-filtered)>.realisation-card:nth-child(5n+1) .realisation-summary{font-size:15px;line-height:1.75;color:#55534f}
.realisations-page .realisation-grid:not(.is-filtered)>.realisation-card:nth-child(5n+1) .realisation-more{flex-direction:row;align-items:center;gap:18px;margin-top:14px}
/* Le cadrage de la cuisine bleue suit la pièce, en bas de la photo. */
.realisations-page .realisation-photo[data-realisation="bleu-profond-laiton"] img{object-position:center 76%!important}

@media(max-width:1100px){
  .realisations-page .realisation-card :is(h2,h3){font-size:28px!important}
  .realisations-page .realisation-grid:not(.is-filtered)>.realisation-card:nth-child(5n+1){grid-template-columns:minmax(0,1.3fr) minmax(260px,1fr)}
  .realisations-page .realisation-grid:not(.is-filtered)>.realisation-card:nth-child(5n+1) .realisation-photo img{min-height:440px}
  .realisations-page .realisation-grid:not(.is-filtered)>.realisation-card:nth-child(5n+1) figcaption{padding:10px 0 10px 36px}
  .realisations-page .realisation-grid:not(.is-filtered)>.realisation-card:nth-child(5n+1) :is(h2,h3){font-size:34px!important}
}
@media(max-width:760px){
  .realisations-page .realisation-grid{grid-template-columns:1fr;gap:20px}
  .realisations-page .realisation-photo img,
  .realisations-page .realisation-card:nth-child(even) .realisation-photo img{aspect-ratio:4/5}
  .realisations-page .realisation-card figcaption{left:20px;right:20px;bottom:20px;grid-template-columns:1fr}
  .realisations-page .realisation-card :is(h2,h3){font-size:26px!important}
  .realisations-page .realisation-more{grid-column:1;grid-row:4;flex-direction:row;align-items:center;gap:14px;margin-top:6px}
  .realisations-page .realisation-grid:not(.is-filtered)>.realisation-card:nth-child(5n+1){display:block}
  .realisations-page .realisation-grid:not(.is-filtered)>.realisation-card:nth-child(5n+1) .realisation-photo img{min-height:0;height:auto;aspect-ratio:4/3.4}
  .realisations-page .realisation-grid:not(.is-filtered)>.realisation-card:nth-child(5n+1) figcaption{padding:22px 0 8px}
  .realisations-page .realisation-grid:not(.is-filtered)>.realisation-card:nth-child(5n+1) :is(h2,h3){font-size:30px!important}
}
@media(prefers-reduced-motion:reduce){@media (hover:hover) and (pointer:fine){.realisations-page .realisation-photo:hover img{transform:none}}}

/* Vedette avec deuxième vue : le texte se pose sur la seconde photo, lisible grâce à un dégradé. */
.realisations-page .realisation-second{display:none}
.realisations-page .realisation-grid:not(.is-filtered)>.realisation-card.has-second:nth-child(5n+1){gap:12px}
.realisations-page .realisation-grid:not(.is-filtered)>.realisation-card.has-second:nth-child(5n+1) figcaption{position:relative;inset:auto;isolation:isolate;overflow:hidden;justify-content:flex-end;padding:40px 36px;color:#fff;pointer-events:auto;cursor:pointer}
.realisations-page .realisation-grid:not(.is-filtered)>.realisation-card.has-second:nth-child(5n+1) .realisation-second{display:block;position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.realisations-page .realisation-grid:not(.is-filtered)>.realisation-card.has-second:nth-child(5n+1) figcaption:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0000 15%,#00000059 45%,#000000c7 100%)}
@media (hover:hover) and (pointer:fine){.realisations-page .realisation-grid:not(.is-filtered)>.realisation-card.has-second:nth-child(5n+1) figcaption:hover .realisation-second{transform:scale(1.03)}}
.realisations-page .realisation-grid:not(.is-filtered)>.realisation-card.has-second:nth-child(5n+1) :is(h2,h3){color:#fff}
.realisations-page .realisation-grid:not(.is-filtered)>.realisation-card.has-second:nth-child(5n+1) .realisation-kind,
.realisations-page .realisation-grid:not(.is-filtered)>.realisation-card.has-second:nth-child(5n+1) .realisation-more small{color:#ffffffc4}
.realisations-page .realisation-grid:not(.is-filtered)>.realisation-card.has-second:nth-child(5n+1) .realisation-summary{color:#f0f0ec;font-size:14px;line-height:1.7;text-shadow:0 1px 8px #0006}
.realisations-page .realisation-grid:not(.is-filtered)>.realisation-card.has-second:nth-child(5n+1) :is(h2,h3){text-shadow:0 1px 12px #0005}
@media(max-width:760px){
  .realisations-page .realisation-grid:not(.is-filtered)>.realisation-card.has-second:nth-child(5n+1) figcaption{min-height:340px;padding:28px 20px;margin-top:10px}
}
@media(prefers-reduced-motion:reduce){.realisations-page .realisation-second{transition:none}}
.realisations-page .realisation-grid:not(.is-filtered)>.realisation-card.has-second:nth-child(5n+1) :is(h2,h3){font-size:clamp(28px,2.5vw,38px)!important}

/* Réalisations : reprendre le titre et les liens soulignés des gammes. */
.realisations-page .realisations{max-width:1720px;margin:auto;padding-top:64px}
.realisations-page .realisations-heading{margin-bottom:44px}
.realisations-page .realisations-heading h1{font:400 clamp(46px,5.2vw,76px)/1.08 var(--sans);letter-spacing:-.04em;max-width:14ch;margin:0}
.realisations-page .gallery-toolbar{border-top:0;border-bottom:1px solid var(--line);padding:0 0 14px;margin:0 0 24px}
.realisations-page .gallery-filters{display:flex;flex-wrap:wrap;gap:30px}
.realisations-page .gallery-filters button{display:inline-flex;align-items:center;min-height:44px;font:400 14px/1.6 var(--sans);padding:6px 0;border:0;border-bottom:1px solid transparent;background:transparent;color:var(--warm-muted)}
.realisations-page .gallery-filters button[aria-pressed=true]{background:transparent;color:var(--ink);border-bottom-color:currentColor}
@media(hover:hover) and (pointer:fine){
  .realisations-page .gallery-filters button:hover{color:var(--ink);border-bottom-color:transparent}
  .realisations-page .gallery-filters button[aria-pressed=true]:hover{background:transparent;color:var(--ink);border-bottom-color:currentColor}
}
@media(max-width:760px){
  .realisations-page .realisations{padding:40px 6% 60px}
  .realisations-page .realisations-heading{margin-bottom:28px}
  .realisations-page .realisations-heading h1{font-size:clamp(40px,10.5vw,58px)}
  .realisations-page .gallery-toolbar{gap:11px;padding:0 0 10px;margin-bottom:20px}
  .realisations-page .gallery-filters{gap:10px 22px}
  .realisations-page .gallery-filters button{font-size:13px;text-align:left}
}