/* ==========================================================================
   AquaClean77 — page « Crédit d'impôt 50 % + avance immédiate ».

   Chargée APRES style.css et pages.css : elle reprend les memes variables
   de couleur, les memes polices, le meme rayon — mais cette page est une
   page de campagne, plus visuelle que le reste du site (bulles d'eau en
   SVG, gros chiffres, cartes). Rien n'est en attribut style= ni en <style>
   inline : la CSP du site (style-src 'self') l'interdirait en production.
   ========================================================================== */

/* ---------- hero campagne ----------
   Fond bleu nuit avec des bulles d'eau en SVG, la pastille -50% en jaune
   façon tampon/sticker en vis-a-vis du texte. */
.ci-hero{
  position:relative;
  background:var(--ink);
  color:var(--paper);
  overflow:hidden;
}
.ci-hero-inner{position:relative; z-index:1;}
.ci-hero .breadcrumb{color:rgba(244,247,251,0.7);}
.ci-hero .breadcrumb [aria-current]{color:var(--paper);}
.ci-hero .breadcrumb li + li::before{color:rgba(244,247,251,0.4);}

.ci-bubbles{position:absolute; inset:0; z-index:0; pointer-events:none;}
.ci-bubbles svg{
  position:absolute; fill:none; stroke:rgba(244,247,251,0.14); stroke-width:1.6;
}
.ci-bubbles svg:nth-child(1){width:180px; height:180px; top:-60px; right:6%;}
.ci-bubbles svg:nth-child(2){width:90px; height:90px; top:40%; right:26%; stroke:rgba(242,208,64,0.18);}
.ci-bubbles svg:nth-child(3){width:120px; height:120px; bottom:-40px; left:4%;}
.ci-bubbles svg:nth-child(4){width:56px; height:56px; top:18%; left:20%; stroke:rgba(31,90,168,0.4);}

.ci-hero-grid{
  display:grid; grid-template-columns:1.35fr 1fr; gap:32px; align-items:center;
  padding-top:6px;
}
@media (max-width:880px){
  .ci-hero-grid{grid-template-columns:1fr; gap:26px;}
}
.ci-hero-text h1{
  font-family:var(--display); font-weight:600;
  font-size:clamp(30px, 5vw, 48px); line-height:1.06;
  margin:14px 0 0; color:var(--paper);
}
.ci-hero-text h1 em{font-style:normal; color:var(--spark);}
.ci-hero-text .page-baseline{color:var(--spark); margin-top:12px;}
.ci-hero-text .lede{color:rgba(244,247,251,0.88); max-width:60ch;}
.ci-hero-text .lede strong{color:var(--paper);}
.ci-outline{border-color:rgba(244,247,251,0.55); color:var(--paper); background:transparent;}
.ci-outline:hover{background:rgba(244,247,251,0.12); color:var(--paper);}

.ci-hero-poster{display:flex; justify-content:center;}

/* ---------- frise "comment ca marche" ---------- */
.ci-steps{
  list-style:none; margin:28px 0 0; padding:0; counter-reset:none;
  display:grid; gap:20px; grid-template-columns:repeat(4, 1fr);
  position:relative;
}
@media (max-width:980px){ .ci-steps{grid-template-columns:repeat(2, 1fr);} }
@media (max-width:560px){ .ci-steps{grid-template-columns:1fr;} }
.ci-step{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 18px 20px; box-shadow:var(--shadow);
}
.ci-step-num{
  position:absolute; top:-12px; left:18px;
  width:28px; height:28px; border-radius:50%;
  background:var(--water); color:#fff;
  font-family:var(--display); font-weight:600; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.ci-step-icon{
  width:40px; height:40px; border-radius:11px; background:var(--foam);
  display:grid; place-items:center; margin-top:8px;
}
.ci-step-icon svg{width:21px; height:21px; stroke:var(--water); fill:none;}
.ci-step h3{
  font-family:var(--display); font-weight:500; font-size:17px; margin:14px 0 6px;
}
.ci-step p{margin:0; color:var(--ink-soft); font-size:14.5px;}
.ci-steps-note{margin:18px 0 0; font-size:14px; color:var(--ink-soft); max-width:70ch;}

.ci-compare{
  display:grid; gap:16px; margin-top:26px;
  grid-template-columns:repeat(2, 1fr);
}
@media (max-width:680px){ .ci-compare{grid-template-columns:1fr;} }
.ci-compare-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px;
}
.ci-compare-card-accent{border-color:var(--spark-dark); background:var(--foam);}
.ci-compare-tag{
  display:inline-block; font-family:var(--mono); font-weight:700; font-size:12px;
  letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:8px;
}
.ci-compare-tag-accent{color:var(--water-dark);}
.ci-compare-card p{margin:0; font-size:15.5px; color:var(--ink);}

/* ---------- eligibilite ---------- */
.ci-elig-grid{
  display:grid; gap:20px; margin-top:26px;
  grid-template-columns:repeat(2, 1fr);
}
@media (max-width:780px){ .ci-elig-grid{grid-template-columns:1fr;} }
.ci-elig-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 24px 22px; box-shadow:var(--shadow);
}
.ci-elig-card h3{
  font-family:var(--display); font-weight:500; font-size:19px; margin:0 0 14px;
}
.ci-elig-yes h3{color:var(--water-dark);}
.ci-elig-no h3{color:var(--rust-dark);}
.ci-elig-card .checklist{margin-top:0;}
.ci-crosslist{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.ci-crosslist li{
  display:flex; gap:10px; align-items:flex-start; font-size:16px; color:var(--ink);
}
.ci-crosslist li::before{
  content:""; flex:0 0 20px; height:20px; margin-top:2px; border-radius:50%;
  background:#F7E4DA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4551F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E") center/12px no-repeat;
}
.ci-elig-caveat{
  font-weight:600; color:var(--ink);
  margin-top:20px; padding-top:16px; border-top:1px solid var(--line);
}

/* ---------- quiz ---------- */
.ci-quiz{
  margin-top:30px;
  background:var(--foam); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px clamp(18px, 4vw, 30px) 24px;
}
.ci-quiz-title{
  font-family:var(--display); font-weight:500; font-size:18px; margin:0 0 18px;
}
.ci-quiz-question{
  font-size:16.5px; font-weight:600; color:var(--ink); margin:0 0 16px;
}
.ci-quiz-actions{display:flex; flex-wrap:wrap; gap:12px;}
.ci-quiz-btn{background:#fff;}
.ci-quiz-progress{
  margin:18px 0 0; font-size:13px; color:var(--ink-soft);
  font-family:var(--mono); letter-spacing:0.02em;
}
.ci-quiz-result{
  border-top:1px solid rgba(14,39,66,0.14); padding-top:18px; margin-top:4px;
}
.ci-quiz-result-text{
  font-family:var(--display); font-weight:500; font-size:18px; margin:0 0 16px;
  color:var(--ink);
}
.ci-quiz-result.is-ok .ci-quiz-result-text{color:var(--water-dark);}
.ci-quiz-result.is-ko .ci-quiz-result-text{color:var(--rust-dark);}

/* ---------- plafonds ---------- */
.ci-plafond{
  margin-top:20px; max-width:74ch;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 24px;
}
.ci-plafond p{margin:0 0 12px; color:var(--ink-soft); font-size:15.5px;}
.ci-plafond p:last-child{margin-bottom:0;}
.ci-plafond strong{color:var(--ink);}

/* ---------- confiance ---------- */
.ci-trust{background:var(--paper-dim); padding:38px 0 8px;}
.ci-trust-inner{
  display:grid; gap:18px; grid-template-columns:repeat(4, 1fr);
  padding-bottom:8px;
}
@media (max-width:880px){ .ci-trust-inner{grid-template-columns:repeat(2, 1fr);} }
@media (max-width:480px){ .ci-trust-inner{grid-template-columns:1fr;} }
.ci-trust-item{
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; font-size:14.5px; font-weight:600; color:var(--ink);
}
.ci-trust-item svg{width:24px; height:24px; stroke:var(--water); flex:none;}
.ci-trust .todo{margin-top:22px; margin-bottom:0;}

/* ---------- mention legale courte du bandeau final ---------- */
.ci-legal-mention{
  margin-top:18px; font-size:12.5px; color:rgba(244,247,251,0.62);
  max-width:56ch;
}