/* ==========================================================================
   finitions.css — page « Les finitions du béton ciré »
   (finitions-beton-cire.html). Même langage que applicateurs.css : surtitres
   gris, titres sobres, titres courts à filet, vraies photos (gros plans
   d'échantillons AdLucem, chantiers), alternance blanc / pierre. Aucune
   illustration dessinée.
   ========================================================================== */
.page-finitions{
  --fi-encre:#1C1916;--fi-texte:#4E4943;--fi-gris:#8C867E;--fi-ligne:rgba(28,25,22,.13);
  --fi-papier:#FFFFFF;--fi-pierre:#F4F1EC;--fi-pierre-2:#ECE7E0;
  --fi-max:1440px;--fi-marge:56px;--fi-gout:max(var(--fi-marge),(100% - var(--fi-max))/2);
  background:var(--fi-papier);color:var(--fi-encre);
}
/* header écrit dans la page (build-includes.ps1) : hauteur réservée dès le premier rendu */
.page-finitions #header-placeholder{min-height:60px}
@media (max-width:768px){.page-finitions #header-placeholder{min-height:75px}}

.fi a{color:inherit}
.fi p a{text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px;transition:opacity .25s}
.fi p a:hover{opacity:.6}
.fi h2,.fi h3{font-weight:400}
.fi p{font-weight:400}
.fi-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- blocs communs ---------- */
.fi-bloc{padding:clamp(72px,8vw,120px) var(--fi-gout)}
.fi-bloc--pierre{background:var(--fi-pierre)}
.fi-surtitre{margin:0 0 14px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--fi-gris)}
.fi-entete{max-width:74ch;margin-bottom:clamp(36px,4vw,56px)}
.fi-h2{margin:0;font-size:clamp(28px,2.8vw,42px);line-height:1.15;letter-spacing:-.01em}
.fi .fi-chapo-section{margin:18px 0 0;font-size:clamp(16px,1.2vw,18px);line-height:1.75;color:var(--fi-encre)}
.fi-bloc p{margin:14px 0 0;font-size:15.5px;line-height:1.85;color:var(--fi-texte)}
.fi-bloc p strong{font-weight:500;color:var(--fi-encre)}
.fi h3{margin:0;font-size:18.5px;line-height:1.3;color:var(--fi-encre)}
.fi-photo{margin:0;overflow:hidden;background:var(--fi-pierre)}
.fi-bloc--pierre .fi-photo{background:var(--fi-pierre-2)}
.fi-photo img{display:block;width:100%;height:auto}
.fi-legende{display:block;margin-top:12px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fi-gris)}
.fi-bouton{
  display:inline-block;padding:16px 26px;background:var(--fi-encre);color:#fff!important;border:1px solid var(--fi-encre)!important;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:background .25s,color .25s;
}
.fi-bouton:hover{background:transparent;color:var(--fi-encre)!important;opacity:1!important}
.fi-bouton--ligne{background:transparent;color:var(--fi-encre)!important}
.fi-bouton--ligne:hover{background:var(--fi-encre);color:#fff!important}
.fi-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px!important}
.fi p.fi-actions a{padding-bottom:16px}
.fi-note{max-width:74ch;margin-top:clamp(36px,3.6vw,52px)!important;padding-top:24px;border-top:1px solid var(--fi-ligne)}

/* ==========================================================================
   Hero : le titre à gauche, les trois finitions côte à côte à droite
   ========================================================================== */
.fi-hero{
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(36px,5vw,90px);align-items:end;
  padding:clamp(40px,5vw,80px) var(--fi-gout) clamp(56px,6vw,96px);background:var(--fi-pierre);
}
.fi-ariane{display:flex;flex-wrap:wrap;gap:10px;font-size:12.5px;letter-spacing:.04em;color:var(--fi-gris);margin-bottom:clamp(28px,4vw,56px)}
.fi-ariane a{text-decoration:none}
.fi-ariane a:hover{color:var(--fi-encre)}
.fi-titre{margin:0;font-weight:400;font-size:clamp(40px,4.8vw,76px);line-height:1.02;letter-spacing:-.02em;color:var(--fi-encre)}
.fi-titre__sous{display:block;margin-top:.3em;font-size:.44em;line-height:1.2;letter-spacing:-.005em;color:var(--fi-gris)}
.fi-chapo{margin:clamp(22px,2.4vw,32px) 0 0;max-width:52ch;font-size:clamp(16px,1.3vw,19px);line-height:1.7;color:var(--fi-texte)}

/* les trois gros plans en bandes verticales : un clic fait affleurer la finition
   au bas des blocs .fi-fond (finitions.js), le lien dessous mène à sa section */
.fi-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);margin:0;padding:0;list-style:none}
.fi-trio__choix{display:block;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.fi-trio__choix:focus-visible{outline:2px solid var(--fi-encre);outline-offset:6px}
.fi-trio .fi-photo{display:block;aspect-ratio:3/5;background:var(--fi-pierre-2);transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s ease}
.fi-trio img{height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.fi-trio__choix:hover img,.fi-trio__choix:focus-visible img{transform:scale(1.04)}
/* finition choisie : sa bande se soulève, comme la teinte choisie des pages par pièce */
.fi-trio__choix[aria-pressed=true] .fi-photo{transform:translateY(-10px);box-shadow:0 22px 14px -14px rgba(29,29,27,.55)}
.fi-trio__nom{display:block;margin-top:14px;font-size:17px;line-height:1.3;color:var(--fi-encre)}
.fi-trio__ligne{display:block;margin-top:4px;font-size:13px;line-height:1.5;color:var(--fi-texte)}
.fi-trio__choix:hover .fi-trio__nom,.fi-trio__choix[aria-pressed=true] .fi-trio__nom{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.fi-trio__lien{display:inline-block;margin-top:10px;font-size:12px;letter-spacing:.04em;color:var(--fi-gris);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px;transition:color .25s}
.fi-trio__lien::after{content:" ↓"}
.fi-trio__lien:hover{color:var(--fi-encre)}
.fi-trio__etat{margin:clamp(18px,2vw,26px) 0 0;min-height:1.7em;font-size:13px;line-height:1.7;color:var(--fi-gris)}
.fi-trio__retirer{margin-left:12px;padding:0 0 1px;border:0;border-bottom:1px solid currentColor;background:none;color:var(--fi-encre);font:inherit;cursor:pointer}

/* ==========================================================================
   Une section par finition : gros plan + texte, puis la finition en situation
   ========================================================================== */
.fi-finition{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,5vw,90px);align-items:center}
.fi-finition--inverse{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.fi-finition--inverse .fi-finition__visuel{order:2}
.fi-gros-plan .fi-photo{aspect-ratio:1/1}
.fi-gros-plan .fi-photo img{height:100%;object-fit:cover}
.fi-finition__texte .fi-h2{max-width:20ch}

.fi-situation{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,4vw,64px);align-items:end;margin-top:clamp(56px,6vw,96px)}
.fi-situation--inverse{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.fi-situation--inverse > .fi-photo{grid-column:2}
/* bloc inversé : la fiche passe à gauche de la photo */
.fi-situation--inverse > .fi-realisation{grid-column:1;grid-row:1}
.fi-situation .fi-photo{aspect-ratio:1200/724}
.fi-situation .fi-photo img{height:100%;object-fit:cover}
.fi-realisation h3{max-width:24ch}
.fi-realisation__infos{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 18px;margin:20px 0 0;padding-top:18px;border-top:1px solid var(--fi-ligne);font-size:14px;line-height:1.6}
.fi-realisation__infos dt{color:var(--fi-gris)}
.fi-realisation__infos dd{margin:0;color:var(--fi-encre)}
.fi-realisation .fi-suite a::after{content:" →"}

/* ==========================================================================
   Le geste : photo + texte côte à côte
   ========================================================================== */
.fi-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(36px,5vw,90px);align-items:center}
.fi-duo__texte .fi-h2{max-width:22ch}

/* ==========================================================================
   Articles courts à filet
   ========================================================================== */
.fi-articles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3vw,52px)}
.fi-articles h3::before{content:"";display:block;width:36px;height:2px;margin-bottom:16px;background:var(--fi-encre)}
.fi-articles p{margin-top:12px}

/* ==========================================================================
   Effets métal et pierre : les vignettes du nuancier
   ========================================================================== */
.fi-effets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,5vw,90px)}
.fi-effets__liste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1vw,16px);margin-top:24px}
.fi-effets figure{margin:0}
.fi-effets .fi-photo{aspect-ratio:1/1}
.fi-effets .fi-photo img{height:100%;object-fit:cover}
.fi-effets figcaption{margin-top:10px;font-size:13px;line-height:1.4;color:var(--fi-texte)}

/* ==========================================================================
   Fin de page : contact + liens vers les autres pages du béton ciré
   ========================================================================== */
.fi-liens{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:14px;margin-top:clamp(50px,5vw,82px)}
.fi-lien{
  display:flex;flex-direction:column;justify-content:space-between;gap:28px;
  min-height:152px;padding:24px;border:1px solid rgba(28,25,22,.16);text-decoration:none;
  transition:background .3s,border-color .3s;
}
.fi-lien:hover{background:rgba(28,25,22,.035);border-color:var(--fi-encre)}
.fi-lien__cle{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fi-gris)}
.fi-lien__titre{display:block;margin-top:11px;font-size:19px;line-height:1.25;color:var(--fi-encre)}
.fi-lien__go{font-size:12px;letter-spacing:.1em;color:var(--fi-texte)}

/* ==========================================================================
   Finition choisie dans le hero : son gros plan affleure au bas des blocs
   .fi-fond, sur la hauteur de leur marge basse (environ 20 % du bloc), et se
   dissout très vite vers le haut. Le contenu reste sur le fond d'origine.
   Les couches sont créées par finitions.js (une par finition et par bloc) ;
   sans script la page reste neutre.
   ========================================================================== */
.fi-fond{--fi-bande:clamp(110px,10.5vw,152px);position:relative;isolation:isolate;padding-bottom:var(--fi-bande)}
.fi-fond__matiere{position:absolute;left:0;right:0;bottom:0;height:var(--fi-bande);z-index:-1;overflow:hidden;pointer-events:none}
.fi-fond__couche{
  position:absolute;inset:0;background-position:center;background-size:max(100%,700px) auto;
  -webkit-mask-image:linear-gradient(to top,#000 0,#000 40%,rgba(0,0,0,.4) 72%,transparent 100%);
  mask-image:linear-gradient(to top,#000 0,#000 40%,rgba(0,0,0,.4) 72%,transparent 100%);
  opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform 1.2s cubic-bezier(.22,1,.36,1);
}
.fi[data-finition=tendu] .fi-fond__couche[data-finition=tendu],
.fi[data-finition=nuage] .fi-fond__couche[data-finition=nuage],
.fi[data-finition=quartze] .fi-fond__couche[data-finition=quartze]{opacity:1;transform:none}
.fi-fond__legende{position:absolute;right:var(--fi-gout);bottom:16px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(28,25,22,.8);opacity:0;transition:opacity .6s ease}
.fi[data-finition] .fi-fond__legende{opacity:1}
@media (prefers-reduced-motion:reduce){
  .fi-fond__couche,.fi-fond__legende,.fi-trio .fi-photo,.fi-trio img{transition:none}
  .fi-fond__couche{transform:none}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1100px){
  .fi-hero{grid-template-columns:1fr;align-items:start}
  .fi-hero__finitions{max-width:640px}
  .fi-finition,.fi-finition--inverse{grid-template-columns:1fr}
  .fi-finition--inverse .fi-finition__visuel{order:0}
  .fi-finition__visuel{max-width:560px}
  .fi-situation,.fi-situation--inverse{grid-template-columns:1fr}
  .fi-situation--inverse > .fi-photo{grid-column:auto}
  .fi-situation--inverse > .fi-realisation{grid-row:auto}
  .fi-duo{grid-template-columns:1fr}
  .fi-articles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fi-effets{grid-template-columns:1fr}
}
@media (max-width:760px){
  .page-finitions{--fi-marge:22px}
  .fi-articles{grid-template-columns:1fr}
  .fi-trio__nom{font-size:15px}
  .fi-trio__ligne{font-size:12px}
}
@media (max-width:520px){
  .fi-actions .fi-bouton{width:100%;text-align:center}
  .fi-effets__liste{grid-template-columns:repeat(2,minmax(0,1fr))}
}