/* ==========================================================================
   Aquaclean 77 — l'affiche « 50 % de crédit d'impôt » (classes .ci-poster*).
   Fichier a part : elle est posee sur l'accueil ET sur /credit-impot, et
   credit-impot-blocs.css ne doit pas etre charge sur /credit-impot (ses
   .ci-step entreraient en collision avec ceux de la page).
   ========================================================================== */
/* ---------- L'affiche : equivalent net du visuel de la story ----------
   Meme composition que le visuel publie par Vincent (logo, « Nouveaute ! »,
   gros 50 %, avant/apres d'une allee, slogan, adresse du site), mais
   reconstruite en HTML/CSS : texte vectoriel, vraies photos du site, nette
   a toutes les tailles. Tout est en em : l'affiche s'agrandit d'un bloc. */
.ci-poster{
  --pw:min(360px, 100%);
  position:relative; width:var(--pw); margin:0 auto;
  font-size:clamp(13px, 3.9vw, 16px);
  aspect-ratio:3 / 4.1;
  border-radius:22px; overflow:hidden;
  background:linear-gradient(180deg, #EAF5FD 0%, #D8EDF9 44%, #fff 100%);
  color:var(--ink);
  box-shadow:0 30px 60px -24px rgba(0,0,0,0.55), 0 0 0 6px rgba(255,255,255,0.9);
  transform:rotate(1.5deg);
}
@media (prefers-reduced-motion: reduce){ .ci-poster{ transform:none; } }

.ci-poster-head{
  position:absolute; left:0; right:0; top:0; z-index:3;
  display:flex; align-items:center; gap:.4em; padding:.8em .9em 0;
}
.ci-poster-mark{ width:3.4em; height:3.4em; flex:none; filter:drop-shadow(0 4px 6px rgba(14,39,66,.25)); }
.ci-poster-word{
  font-family:var(--display); font-weight:600; font-size:1.45em; line-height:1;
  color:var(--water-dark); white-space:nowrap;
}
.ci-poster-word span{ color:var(--water); }
.ci-poster-hand{
  margin-left:auto; max-width:7.5em; text-align:right;
  font-family:var(--display); font-weight:500; font-style:italic;
  font-size:.78em; line-height:1.15; color:var(--water-dark);
  transform:rotate(-6deg);
}

.ci-poster-photos{ position:absolute; left:0; right:0; top:38%; bottom:19%; z-index:1; }
.ci-poster-photos picture, .ci-poster-photos img{ position:absolute; inset:0; width:100%; height:100%; }
.ci-poster-photos img{ object-fit:cover; }
/* coupe en biais, comme sur la story : l'avant a gauche, l'apres a droite */
.ci-poster-apres{ clip-path:polygon(58% 0, 100% 0, 100% 100%, 40% 100%); }
.ci-poster-avant{ clip-path:polygon(0 0, 58% 0, 40% 100%, 0 100%); }
.ci-poster-photos::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, #D8EDF9 0%, rgba(216,237,249,0) 34%);
}
.ci-poster-lbl{
  position:absolute; bottom:.7em; z-index:2;
  padding:.2em .7em; border-radius:6px;
  font-weight:800; font-size:.72em; letter-spacing:.06em; text-transform:uppercase;
}
.ci-poster-lbl--avant{ left:.8em; background:var(--ink); color:#fff; }
.ci-poster-lbl--apres{ right:.8em; background:var(--water); color:#fff; }
.ci-poster-arrow{
  position:absolute; left:34%; bottom:24%; z-index:2; width:4.2em; height:auto;
  stroke:#fff; filter:drop-shadow(0 2px 3px rgba(14,39,66,.5));
}

.ci-poster-main{
  position:absolute; left:0; right:0; top:19%; z-index:4;
  display:flex; flex-direction:column; align-items:center;
}
.ci-poster-brush{
  position:relative; z-index:2;
  padding:.18em .8em .24em; margin-bottom:-.35em;
  background:var(--water); color:#fff;
  font-family:var(--display); font-weight:600; font-size:1.7em; line-height:1;
  text-transform:uppercase; letter-spacing:.01em;
  transform:rotate(-4deg) skewX(-6deg);
  border-radius:.18em .5em .22em .6em;
  box-shadow:0 8px 16px -8px rgba(14,39,66,.6);
}
.ci-poster-card{
  display:flex; flex-direction:column; align-items:center;
  width:74%; padding:.6em .6em .7em;
  background:#fff; border-radius:14px;
  box-shadow:0 18px 30px -16px rgba(14,39,66,.55);
  text-align:center;
}
.ci-poster-num{
  font-family:var(--display); font-weight:700; line-height:.9;
  font-size:4.6em; color:var(--water-dark); letter-spacing:-.02em;
}
.ci-poster-num small{ font-size:.55em; vertical-align:.45em; margin-left:.02em; }
.ci-poster-ci{
  font-family:var(--display); font-weight:600; font-size:1.02em;
  text-transform:uppercase; color:var(--ink); margin-top:.1em;
}
.ci-poster-ai{
  margin-top:.45em; padding:.28em .8em; border-radius:999px;
  background:var(--foam); color:var(--water-dark);
  font-weight:800; font-size:.7em; letter-spacing:.05em; text-transform:uppercase;
}

.ci-poster-slogan{
  position:absolute; left:0; right:0; bottom:8.2%; z-index:3; margin:0;
  text-align:center; font-family:var(--display); font-weight:500; font-style:italic;
  font-size:.95em; line-height:1.2; color:var(--water-dark);
}