/* ==========================================================================
   AquaClean77 — page « Paiement en CESU préfinancé ».

   Page sœur de credit-impot.html/.css : mêmes composants (hero campagne,
   frise d'étapes, cartes oui/non), classes propres préfixées .cesu- pour
   éviter toute collision. Rien n'est en attribut style= ni en <style>
   inline : la CSP du site (style-src 'self') l'interdirait en production.
   ========================================================================== */

/* ---------- hero campagne ---------- */
.cesu-hero{
  position:relative;
  background:var(--ink);
  color:var(--paper);
  overflow:hidden;
}
.cesu-hero-inner{position:relative; z-index:1;}
.cesu-hero .breadcrumb{color:rgba(244,247,251,0.7);}
.cesu-hero .breadcrumb [aria-current]{color:var(--paper);}
.cesu-hero .breadcrumb li + li::before{color:rgba(244,247,251,0.4);}

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

.cesu-hero-grid{
  display:grid; grid-template-columns:1.35fr 1fr; gap:32px; align-items:center;
  padding-top:6px;
}
@media (max-width:880px){
  .cesu-hero-grid{grid-template-columns:1fr; gap:26px;}
}
.cesu-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);
}
.cesu-hero-text h1 em{font-style:normal; color:var(--spark);}
.cesu-hero-text .page-baseline{color:var(--spark); margin-top:12px;}
.cesu-hero-text .lede{color:rgba(244,247,251,0.88); max-width:60ch;}
.cesu-hero-text .lede strong{color:var(--paper);}
.cesu-outline{border-color:rgba(244,247,251,0.55); color:var(--paper); background:transparent;}
.cesu-outline:hover{background:rgba(244,247,251,0.12); color:var(--paper);}

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

/* ---------- l'affiche : composition propre a la page CESU ----------
   Meme methode que .ci-poster (em, aspect-ratio, rotation legere annulee en
   prefers-reduced-motion), composition differente : bandeau "chèques CESU
   acceptés" + deux pastilles papier / e-CESU, sans dessiner de titre CESU
   ni de logo d'emetteur.
   ⚠️ Recomposée le 23/09/2026 SANS PHOTO (décision du propriétaire) : la
   proposition A est gardée, mais la photo de chantier a été retirée. Format
   raccourci (aspect-ratio) et carte recentrée verticalement, deux cercles
   décoratifs en dégradé (aux couleurs de la marque) remplissent l'espace
   qu'occupait la photo — fond, formes et typographie recomposés, pas
   simplement amputés. */
.cesu-poster{
  --pw:min(360px, 100%);
  position:relative; width:var(--pw); margin:0 auto;
  font-size:clamp(13px, 3.9vw, 16px);
  aspect-ratio:3 / 3.5;
  border-radius:22px; overflow:hidden;
  background:linear-gradient(180deg, #EAF5FD 0%, #D8EDF9 55%, #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){ .cesu-poster{ transform:none; } }

/* cercles décoratifs en dégradé, aux couleurs de la marque : ils remplissent
   la moitié basse de l'affiche que la photo occupait, sans rien représenter
   de figuratif (pas de logo, pas de document imité). */
.cesu-poster::before,
.cesu-poster::after{
  content:""; position:absolute; z-index:0; border-radius:50%; pointer-events:none;
}
.cesu-poster::before{
  width:62%; aspect-ratio:1; left:-20%; bottom:-12%;
  background:radial-gradient(circle at 38% 38%, rgba(31,90,168,.18), rgba(31,90,168,0) 72%);
}
.cesu-poster::after{
  width:48%; aspect-ratio:1; right:-14%; bottom:22%;
  background:radial-gradient(circle at 42% 42%, rgba(196,85,31,.15), rgba(196,85,31,0) 72%);
}

.cesu-poster-head{
  position:absolute; left:0; right:0; top:0; z-index:3;
  display:flex; align-items:center; gap:.4em; padding:.8em .9em 0;
}
.cesu-poster-mark{ width:3.4em; height:3.4em; flex:none; filter:drop-shadow(0 4px 6px rgba(14,39,66,.25)); }
.cesu-poster-word{
  font-family:var(--display); font-weight:600; font-size:1.45em; line-height:1;
  color:var(--water-dark); white-space:nowrap;
}
.cesu-poster-word span{ color:var(--water); }

.cesu-poster-main{
  position:absolute; left:0; right:0; top:50%; z-index:4;
  transform:translateY(-54%);
  display:flex; flex-direction:column; align-items:center;
}
.cesu-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.5em; 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);
}
.cesu-poster-card{
  display:flex; flex-direction:column; align-items:center;
  width:82%; padding:.65em .7em .75em;
  background:#fff; border-radius:14px;
  box-shadow:0 18px 30px -16px rgba(14,39,66,.55);
  text-align:center;
}
.cesu-poster-title{
  font-family:var(--display); font-weight:700; line-height:1.05;
  font-size:1.55em; color:var(--water-dark); letter-spacing:-.01em;
}
.cesu-poster-sub{
  font-family:var(--display); font-weight:500; font-size:.9em;
  color:var(--ink); margin-top:.25em;
}
.cesu-poster-tags{ display:flex; gap:.5em; margin-top:.6em; flex-wrap:wrap; justify-content:center; }
.cesu-poster-tag{
  padding:.28em .8em; border-radius:999px;
  background:var(--foam); color:var(--water-dark);
  font-weight:800; font-size:.68em; letter-spacing:.04em; text-transform:uppercase;
}

.cesu-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);
}

/* ---------- cartes "qui en a" ---------- */
.cesu-source-grid{
  list-style:none; margin:26px 0 0; padding:0;
  display:grid; gap:18px; grid-template-columns:repeat(4, 1fr);
}
@media (max-width:980px){ .cesu-source-grid{grid-template-columns:repeat(2, 1fr);} }
@media (max-width:560px){ .cesu-source-grid{grid-template-columns:1fr;} }
.cesu-source-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 18px 18px; box-shadow:var(--shadow);
}
.cesu-source-icon{
  width:40px; height:40px; border-radius:11px; background:var(--foam);
  display:grid; place-items:center;
}
.cesu-source-icon svg{width:21px; height:21px; stroke:var(--water); fill:none;}
.cesu-source-card h3{
  font-family:var(--display); font-weight:500; font-size:16.5px; margin:14px 0 6px;
}
.cesu-source-card p{margin:0; color:var(--ink-soft); font-size:14.5px;}
.cesu-source-note{margin:20px 0 0; font-weight:600; color:var(--ink); max-width:70ch;}

/* ---------- frise "comment ca se passe" ---------- */
.cesu-steps{
  list-style:none; margin:28px 0 0; padding:0;
  display:grid; gap:20px; grid-template-columns:repeat(4, 1fr);
  position:relative;
}
@media (max-width:980px){ .cesu-steps{grid-template-columns:repeat(2, 1fr);} }
@media (max-width:560px){ .cesu-steps{grid-template-columns:1fr;} }
.cesu-step{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 18px 20px; box-shadow:var(--shadow);
}
.cesu-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;
}
.cesu-step-icon{
  width:40px; height:40px; border-radius:11px; background:var(--foam);
  display:grid; place-items:center; margin-top:8px;
}
.cesu-step-icon svg{width:21px; height:21px; stroke:var(--water); fill:none;}
.cesu-step h3{
  font-family:var(--display); font-weight:500; font-size:17px; margin:14px 0 6px;
}
.cesu-step p{margin:0; color:var(--ink-soft); font-size:14.5px;}

/* ---------- papier / e-CESU ---------- */
.cesu-compare{
  display:grid; gap:16px; margin-top:26px;
  grid-template-columns:repeat(2, 1fr);
}
@media (max-width:680px){ .cesu-compare{grid-template-columns:1fr;} }
.cesu-compare-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px;
}
.cesu-compare-card-accent{border-color:var(--spark-dark); background:var(--foam);}
.cesu-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:10px;
}
.cesu-compare-tag-accent{color:var(--water-dark);}
.cesu-compare-card .checklist{margin-top:0;}
.cesu-compare-note{margin:18px 0 0; font-size:14px; color:var(--ink-soft); max-width:70ch;}

/* ---------- eligibilite ---------- */
.cesu-elig-grid{
  display:grid; gap:20px; margin-top:26px;
  grid-template-columns:repeat(2, 1fr);
}
@media (max-width:780px){ .cesu-elig-grid{grid-template-columns:1fr;} }
.cesu-elig-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 24px 22px; box-shadow:var(--shadow);
}
.cesu-elig-card h3{
  font-family:var(--display); font-weight:500; font-size:19px; margin:0 0 14px;
}
.cesu-elig-yes h3{color:var(--water-dark);}
.cesu-elig-no h3{color:var(--rust-dark);}
.cesu-elig-card .checklist{margin-top:0;}
.cesu-crosslist{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.cesu-crosslist li{
  display:flex; gap:10px; align-items:flex-start; font-size:16px; color:var(--ink);
}
.cesu-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;
}
.cesu-elig-caveat{
  font-weight:600; color:var(--ink);
  margin-top:20px; padding-top:16px; border-top:1px solid var(--line);
}

/* ---------- et le credit d'impot ---------- */
.cesu-ci-box{
  margin-top:20px; max-width:74ch;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 24px;
}
.cesu-ci-box p{margin:0 0 12px; color:var(--ink-soft); font-size:15.5px;}
.cesu-ci-box p:last-child{margin-bottom:0;}
.cesu-ci-box strong{color:var(--ink);}
.cesu-ci-link{font-weight:600;}

/* ---------- confiance ---------- */
.cesu-trust{background:var(--paper-dim); padding:38px 0 8px;}
.cesu-trust-inner{
  display:grid; gap:18px; grid-template-columns:repeat(4, 1fr);
  padding-bottom:8px;
}
@media (max-width:880px){ .cesu-trust-inner{grid-template-columns:repeat(2, 1fr);} }
@media (max-width:480px){ .cesu-trust-inner{grid-template-columns:1fr;} }
.cesu-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);
}
.cesu-trust-item svg{width:24px; height:24px; stroke:var(--water); flex:none;}

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