/* ==========================================================================
   Aquaclean77 — paiement en CESU préfinancé, blocs de démonstration
   (23/09/2026). Vitrine interne uniquement : preprod/credit-impot/
   propositions-cesu.html. Toutes les classes sont préfixées `cesu2-` (sauf
   les `.vitrine-*` réutilisées telles quelles depuis credit-impot-blocs.css).
   Rien en ligne (CSP style-src 'self') : chaque variante est une classe.
   Palette : --water dominant, --spark réservé aux points chauds, --rust en
   secondaire, --ink en texte fort. Aucune couleur d'émetteur, aucun logo
   officiel : uniquement des formes décoratives neutres.
   ========================================================================== */

.cesu2-hidden{display:none !important;}

/* ---------- encadré « à confirmer » en tête de vitrine ---------- */
.cesu2-confirm{
  display:flex; gap:14px; align-items:flex-start;
  margin:0 0 40px; padding:18px 20px;
  background:var(--foam); border:1px solid var(--line);
  border-left:4px solid var(--rust);
  border-radius:var(--radius);
}
.cesu2-confirm svg{
  flex:none; width:26px; height:26px; margin-top:2px;
  color:var(--rust-dark); fill:none;
}
.cesu2-confirm h2{ margin:0 0 6px; font-size:17px; font-family:var(--display); }
.cesu2-confirm ol{ margin:0; padding-left:20px; color:var(--ink-soft); font-size:14.5px; line-height:1.55; }
.cesu2-confirm li + li{ margin-top:4px; }
.cesu2-confirm b{ color:var(--ink); }

/* ---------- A. Affiche vectorielle (façon story Instagram) ----------
   ⚠️ Recomposée le 23/09/2026 SANS PHOTO (décision du propriétaire) : voir
   paiement-cesu.css pour le même traitement sur la page réelle. */
.cesu2-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 58%, #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.4deg);
}
@media (prefers-reduced-motion: reduce){ .cesu2-poster{ transform:none; } }

.cesu2-poster::before,
.cesu2-poster::after{
  content:""; position:absolute; z-index:0; border-radius:50%; pointer-events:none;
}
.cesu2-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%);
}
.cesu2-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%);
}

.cesu2-poster-head{
  position:relative; z-index:3;
  display:flex; align-items:center; gap:.4em; padding:.9em .9em 0;
}
.cesu2-poster-mark{ width:3.2em; height:3.2em; flex:none; filter:drop-shadow(0 4px 6px rgba(14,39,66,.25)); }
.cesu2-poster-word{ font-family:var(--display); font-weight:600; font-size:1.3em; line-height:1; color:var(--water-dark); }
.cesu2-poster-word span{ color:var(--water); }

.cesu2-poster-main{
  position:relative; z-index:3; text-align:center;
  padding:.6em 1em 0;
  margin-top:.9em;
}
.cesu2-poster-eyebrow{
  display:inline-block; padding:.22em .8em; border-radius:999px;
  background:var(--spark); color:var(--ink);
  font-weight:800; font-size:.68em; letter-spacing:.05em; text-transform:uppercase;
}
.cesu2-poster-title{
  margin:.5em 0 0; font-family:var(--display); font-weight:700;
  font-size:1.55em; line-height:1.12; color:var(--water-dark);
}

/* forme de titre décorative — jamais un vrai chèque CESU, juste une carte
   crantée générique évoquant un titre de paiement, sans marque ni couleur
   d'émetteur */
.cesu2-poster-ticket{
  position:relative; z-index:2; margin:.85em auto 0; width:78%;
  background:#fff; border-radius:.5em;
  box-shadow:0 16px 28px -16px rgba(14,39,66,.5);
  padding:.55em .7em;
  display:flex; align-items:center; gap:.5em;
}
.cesu2-poster-ticket::before, .cesu2-poster-ticket::after{
  content:""; position:absolute; top:50%; width:.6em; height:.6em;
  margin-top:-.3em; border-radius:50%; background:linear-gradient(180deg, #EAF5FD 0%, #D8EDF9 46%, #fff 100%);
}
.cesu2-poster-ticket::before{ left:-.3em; }
.cesu2-poster-ticket::after{ right:-.3em; }
.cesu2-poster-ticket-band{
  flex:none; width:.5em; align-self:stretch; border-radius:.2em;
  background:repeating-linear-gradient(135deg, var(--water) 0 4px, var(--foam) 4px 8px);
}
.cesu2-poster-ticket-txt{ text-align:left; }
.cesu2-poster-ticket-txt strong{ display:block; font-family:var(--display); font-size:.92em; color:var(--ink); }
.cesu2-poster-ticket-txt span{ display:block; font-size:.68em; color:var(--ink-soft); }

.cesu2-poster-forms{
  margin:.7em auto 0; display:flex; justify-content:center; gap:.5em;
}
.cesu2-poster-forms span{
  padding:.28em .85em; border-radius:999px; background:var(--water);
  color:#fff; font-weight:800; font-size:.72em; letter-spacing:.02em;
}
.cesu2-poster-forms span:last-child{ background:var(--rust); }

.cesu2-poster-photo{
  position:absolute; left:6%; right:6%; bottom:16%; top:58%; z-index:1;
  border-radius:.9em; overflow:hidden;
}
.cesu2-poster-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cesu2-poster-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(216,237,249,0) 55%, rgba(14,39,66,.55) 100%);
}

.cesu2-poster-slogan{
  position:absolute; left:0; right:0; bottom:7.5%; z-index:3; margin:0;
  text-align:center; font-family:var(--display); font-weight:500; font-style:italic;
  font-size:.92em; line-height:1.2; color:#fff;
  text-shadow:0 2px 6px rgba(14,39,66,.6);
}
.cesu2-poster-url{
  position:absolute; left:50%; bottom:2.2%; z-index:3; transform:translateX(-50%);
  padding:.3em 1.1em; border-radius:999px;
  background:#fff; color:var(--water-dark);
  font-weight:800; font-size:.82em; white-space:nowrap;
}

/* ---------- B. Bannière pleine largeur sobre ---------- */
.cesu2-banner{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:22px 26px; border-radius:var(--radius);
  background:var(--water); color:#fff;
}
.cesu2-banner-icon{
  flex:none; width:46px; height:46px; border-radius:12px;
  background:rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center;
}
.cesu2-banner-icon svg{ width:24px; height:24px; color:#fff; fill:none; }
.cesu2-banner-copy{ flex:1; min-width:220px; }
.cesu2-banner-copy h3{ margin:0 0 4px; font-family:var(--display); font-size:19px; color:#fff; }
.cesu2-banner-copy p{ margin:0; font-size:14px; color:rgba(255,255,255,.88); }
.cesu2-banner a.btn{ flex:none; }
.cesu2-banner .btn-primary{ background:var(--spark); color:var(--ink); }
.cesu2-banner .btn-primary:hover{ background:var(--spark-dark); }
@media (max-width:560px){
  .cesu2-banner{ padding:18px; }
}

/* ---------- C. Cartes « Qui vous en donne ? » ---------- */
.cesu2-donors{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:12px;
}
.cesu2-donor{
  padding:16px 12px; text-align:center; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
}
.cesu2-donor-icon{
  width:40px; height:40px; margin:0 auto 10px; border-radius:50%;
  background:var(--foam); display:flex; align-items:center; justify-content:center;
}
.cesu2-donor-icon svg{ width:20px; height:20px; color:var(--water-dark); fill:none; }
.cesu2-donor h4{ margin:0; font-family:var(--display); font-size:13.5px; line-height:1.3; }
@media (max-width:760px){
  .cesu2-donors{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:480px){
  .cesu2-donors{ grid-template-columns:repeat(2, 1fr); }
}

/* ---------- D. Papier / e-CESU côte à côte ---------- */
.cesu2-forms2{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.cesu2-form2{
  padding:20px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.cesu2-form2-ticket{
  width:100%; height:2.4em; border-radius:.5em; margin-bottom:14px;
  display:flex; align-items:center; gap:.5em; padding:0 .6em;
  background:var(--paper-dim); border:1px dashed var(--line);
}
.cesu2-form2-ticket span{
  flex:1; height:.5em; border-radius:999px; background:var(--foam);
}
.cesu2-form2-ticket span:first-child{ flex:none; width:1.6em; height:1.6em; border-radius:.35em; background:var(--water); }
.cesu2-form2--e .cesu2-form2-ticket span:first-child{ background:var(--rust); }
.cesu2-form2 h4{ margin:0 0 6px; font-family:var(--display); font-size:16px; }
.cesu2-form2 p{ margin:0; font-size:13.5px; color:var(--ink-soft); line-height:1.5; }
@media (max-width:600px){
  .cesu2-forms2{ grid-template-columns:1fr; }
}

/* ---------- E. Frise des 4 étapes ---------- */
.cesu2-steps{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;
  counter-reset:cesu2-step;
}
.cesu2-step{
  position:relative; padding:16px 14px 14px; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
}
.cesu2-step::before{
  counter-increment:cesu2-step; content:counter(cesu2-step);
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; margin-bottom:10px; border-radius:50%;
  background:var(--water); color:#fff; font-family:var(--display); font-weight:700; font-size:14px;
}
.cesu2-step h4{ margin:0 0 4px; font-family:var(--display); font-size:15px; }
.cesu2-step p{ margin:0; font-size:13px; color:var(--ink-soft); line-height:1.45; }
@media (max-width:760px){
  .cesu2-steps{ grid-template-columns:1fr 1fr; }
}
@media (max-width:480px){
  .cesu2-steps{ grid-template-columns:1fr; }
}

/* ---------- F. Étiquette sur carte de service ----------
   Même gabarit de pastille que .ci-tag-eligible (seule la couleur diffère) : les
   deux cohabitent désormais côte à côte dans .card-tag-row, CESU d'abord. */
.cesu2-tag{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:999px;
  background:var(--water); color:#fff;
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.02em;
  white-space:nowrap;
}

/* ---------- G. Encart formulaire de rappel ---------- */
.cesu2-form-aside{
  padding:18px 20px; background:var(--foam); border-radius:var(--radius);
}
.cesu2-form-aside h4{ margin:0 0 6px; font-family:var(--display); font-size:16px; }
.cesu2-form-aside p{ margin:0 0 10px; font-size:13.5px; color:var(--ink-soft); line-height:1.5; }
.cesu2-form-aside a{ font-weight:700; color:var(--water-dark); text-decoration:underline; text-underline-offset:2px; }

/* ---------- H. Barre d'appel mobile + tiroir de menu ---------- */
.cesu2-phone-frame{ max-width:360px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.cesu2-sticky-line{
  display:block; padding:8px 14px; text-align:center;
  background:var(--rust); color:#fff;
  font-weight:800; font-size:12.5px; text-decoration:none;
}
.cesu2-sticky-demo{ position:static; }
.cesu2-hint-gap{ margin-top:22px; }

/* ---------- H1 (réel) — ligne CESU dans la VRAIE barre d'appel mobile ----------
   Remplace .ci-sticky-line sur les deux pages qui la portent (nettoyage
   haute-pression et Val d'Europe) : même gabarit que credit-impot-blocs.css,
   jamais les deux lignes ensemble sur la même page. */
@media (max-width:820px){
  .sticky-call .cesu2-sticky-line{
    display:block;
    flex:0 0 calc(100% + 2 * var(--gut));
    margin:-12px calc(-1 * var(--gut)) 0;
  }
}
@media (max-width:820px) and (max-height:460px) and (orientation:landscape){
  .sticky-call .cesu2-sticky-line{ display:none; }
}

/* ---------- H2 (réel) — carte jumelée dans le VRAI tiroir de menu ----------
   credit-impot-blocs-2.js injecte déjà .ci2-drawer-real en tête de
   .nav-drawer-foot ; cesu-blocs.js lui accole .cesu2-drawer-real juste après,
   pour que les deux se lisent comme UNE carte à deux lignes plutôt que deux
   cartes distinctes (le gap:10px du conteneur est annulé par la marge
   négative ci-dessous). */
.nav-drawer-foot .ci2-drawer-real.cesu2-drawer-jumelee{
  border-bottom-left-radius:0; border-bottom-right-radius:0;
}
.nav-drawer-foot .cesu2-drawer-real{
  display:flex; align-items:center; gap:10px;
  margin-top:-10px;
  background:var(--foam); border:1px solid var(--water);
  border-top:1px dashed var(--line);
  border-top-left-radius:0; border-top-right-radius:0;
  border-radius:0 0 12px 12px;
  padding:10px 14px 11px; text-decoration:none;
  color:var(--rust-dark); font-weight:800; font-size:12.5px; line-height:1.3;
}
.nav-drawer-foot .cesu2-drawer-real svg{ flex:none; width:18px; height:18px; fill:none; }

.cesu2-drawer-demo{
  max-width:340px; padding:18px; border-radius:var(--radius);
  background:var(--ink); color:var(--paper);
}
.cesu2-drawer-demo nav{ display:grid; gap:2px; margin-bottom:14px; }
.cesu2-drawer-demo nav a{
  padding:10px 8px; border-radius:8px; color:rgba(244,247,251,0.85);
  text-decoration:none; font-weight:600; font-size:14px;
}
.cesu2-drawer-demo nav a:hover{ background:rgba(244,247,251,0.08); }
.cesu2-drawer-card{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:10px;
  background:rgba(244,247,251,0.08); color:var(--paper);
  text-decoration:none; font-weight:700; font-size:13.5px; line-height:1.35;
}
.cesu2-drawer-card svg{ flex:none; width:20px; height:20px; color:var(--spark); fill:none; }

/* ---------- I. Bloc FAQ ---------- */
/* reprend .faq / details natif de pages.css, aucune classe supplémentaire nécessaire */

/* ---------- J. Bandeau façon cookies — variante CESU (démonstration) ---------- */
.cesu2-cookie-frame{ position:relative; min-height:190px; }
.cesu2-cookie{
  position:relative; z-index:1;
  display:flex; align-items:flex-start; gap:12px;
  max-width:380px; padding:16px 14px 16px 16px;
  background:var(--paper); border:1px solid var(--line);
  border-left:4px solid var(--rust);
  border-radius:var(--radius);
  box-shadow:0 20px 44px -18px rgba(14,39,66,0.5);
  animation:cesu2-cookie-entree .32s ease-out both;
}
@keyframes cesu2-cookie-entree{
  from{opacity:0; transform:translateY(14px);}
  to{opacity:1; transform:none;}
}
.cesu2-cookie[hidden]{ display:none; }
.cesu2-cookie-mark{
  flex:none; width:40px; height:40px; border-radius:10px;
  background:var(--foam); display:flex; align-items:center; justify-content:center;
}
.cesu2-cookie-mark svg{ width:20px; height:20px; color:var(--water-dark); fill:none; }
.cesu2-cookie-corps{ flex:1; min-width:0; }
.cesu2-cookie-titre{ margin:0 0 4px; font-family:var(--display); font-weight:600; font-size:16px; color:var(--ink); }
.cesu2-cookie-texte{ margin:0 0 12px; font-size:13.5px; line-height:1.45; color:var(--ink-soft); }
.cesu2-cookie-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.cesu2-cookie-voir, .cesu2-cookie-plustard{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; font-weight:700; font-size:13px; line-height:1;
  padding:9px 15px; cursor:pointer; border:1px solid transparent;
}
.cesu2-cookie-voir{ background:var(--spark); color:var(--ink); text-decoration:none; }
.cesu2-cookie-voir:hover{ background:var(--spark-dark); }
.cesu2-cookie-plustard{ background:transparent; color:var(--ink-soft); border-color:var(--line); }
.cesu2-cookie-plustard:hover{ background:var(--paper-dim); color:var(--ink); }
.cesu2-cookie-fermer{
  flex:none; margin:-4px -2px 0 0; width:30px; height:30px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; border-radius:9px; color:var(--ink-soft); cursor:pointer;
}
.cesu2-cookie-fermer:hover{ background:var(--paper-dim); color:var(--ink); }
.cesu2-cookie-fermer svg{ width:15px; height:15px; fill:none; pointer-events:none; }
.cesu2-cookie-replay{
  margin-top:14px; padding:9px 16px; border-radius:999px;
  background:var(--ink); color:#fff; border:none; font-weight:700; font-size:13px; cursor:pointer;
}

/* ---------- K. Encart « à dire au moment du devis » ---------- */
.cesu2-devis-note{
  display:flex; gap:12px; padding:16px 18px;
  background:#fff; border:1px solid var(--line);
  border-left:4px solid var(--water); border-radius:var(--radius); box-shadow:var(--shadow);
}
.cesu2-devis-note svg{ flex:none; width:24px; height:24px; margin-top:2px; color:var(--water-dark); fill:none; }
.cesu2-devis-note h4{ margin:0 0 4px; font-family:var(--display); font-size:15.5px; }
.cesu2-devis-note p{ margin:0; font-size:13.5px; color:var(--ink-soft); line-height:1.5; }


/* ---------- M. Badge discret dans le hero ---------- */
.cesu2-hero-badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 13px; border-radius:999px;
  background:rgba(255,255,255,.14); color:#fff;
  font-size:12.5px; font-weight:700;
}
.cesu2-hero-badge svg{ flex:none; width:14px; height:14px; color:var(--spark); fill:none; }
.cesu2-hero-demo{
  padding:34px 26px; border-radius:var(--radius);
  background:linear-gradient(135deg, var(--water-dark), var(--water));
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
}
.cesu2-hero-demo h3{ margin:0; color:#fff; font-family:var(--display); font-size:22px; }

/* ---------- N. Éligibilité / lien avec le crédit d'impôt ---------- */
.cesu2-eligibility{
  padding:20px 22px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.cesu2-eligibility h4{ margin:0 0 10px; font-family:var(--display); font-size:16px; }
.cesu2-eligibility ul{ margin:0 0 14px; padding:0; list-style:none; display:grid; gap:8px; }
.cesu2-eligibility li{ display:flex; gap:8px; align-items:flex-start; font-size:13.5px; color:var(--ink-soft); line-height:1.5; }
.cesu2-eligibility svg{ flex:none; width:18px; height:18px; margin-top:1px; color:var(--water-dark); fill:none; }
.cesu2-eligibility p{ margin:0; padding-top:12px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-soft); line-height:1.5; }
.cesu2-eligibility p strong{ color:var(--ink); }