/* ==========================================================================
   Crédit d'impôt 50 % — seconde série de propositions O -> Z (22/09/2026)
   Fichier neuf. Sert la vitrine interne
   preprod/credit-impot/propositions-2.html (démonstration des 13 propositions)
   ET les propositions retenues par Fabien pour le vrai site (N, O, S, U, V,
   W, Y, Z — cf. commentaires CI:debut/fin dans chaque page). P, Q, R, T, X
   restent vitrine seulement, jamais chargés sur une page publique.
   Toutes les classes sont préfixées `.ci2-` pour ne jamais entrer en
   collision avec credit-impot-blocs.css (proposition A -> M), credit-impot.css
   ni avec le reste du site. Ne redéfinit jamais --water/--spark/… (posées par
   style.css). Rien en ligne (CSP style-src 'self') : tout est ici.
   ========================================================================== */

/* ---------- utilitaires d'intégration (site réel) ---------- */
.ci2-section-pad{ margin-top:44px; margin-bottom:44px; }   /* jamais `margin:` : .wrap se centre par margin auto */

/* ---------- N. Démonstration du bandeau « façon cookies » (livrable 1) --- */
.ci2-n-frame{
  position:relative; min-height:220px;
  background:var(--paper-dim); border-radius:var(--radius);
  overflow:hidden; padding:18px;
}
.ci2-n-frame .ci-bandeau{
  position:absolute; left:16px; right:16px; bottom:16px;
  width:min(360px, calc(100% - 32px));
}
.ci2-n-replay{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:14px; padding:9px 16px; border-radius:999px;
  background:var(--ink); color:var(--paper); border:none;
  font-family:var(--body); font-weight:700; font-size:13.5px; cursor:pointer;
}
.ci2-n-replay:hover{ background:var(--water-dark); }

/* ---------- O. Mascotte qui parle (bulle BD) ---------- */
.ci2-mascot{
  display:flex; align-items:flex-end; gap:16px; max-width:520px;
}
.ci2-mascot img{
  flex:none; width:84px; height:84px; border-radius:50%;
  background:var(--foam); padding:8px; object-fit:contain;
}
.ci2-mascot-bubble{
  position:relative; background:var(--paper); border:1px solid var(--line);
  border-radius:18px; padding:14px 18px; box-shadow:var(--shadow);
  font-family:var(--body); font-weight:700; color:var(--ink); font-size:15px;
  line-height:1.4;
}
.ci2-mascot-bubble::before{
  content:""; position:absolute; left:-9px; bottom:18px;
  width:0; height:0; border:10px solid transparent;
  border-right-color:var(--paper); filter:drop-shadow(-1px 0 0 var(--line));
}
.ci2-mascot-bubble strong{ color:var(--water-dark); }

/* variante discrete (celle posee sur le site) : plus petite, calee a droite,
   sans ombre portee — un clin d'oeil en fin de section, pas un bloc a part */
.ci2-mascot--discret{ margin:28px 0 0 auto; max-width:440px; gap:10px; align-items:center; }
.ci2-mascot--discret img{ width:56px; height:56px; padding:5px; }
.ci2-mascot--discret .ci2-mascot-bubble{ font-size:13.5px; font-weight:600; padding:10px 14px; box-shadow:none; }
.ci2-mascot--discret .ci2-mascot-bubble::before{ bottom:50%; transform:translateY(50%); }
.ci2-mascot--discret .ci2-mascot-bubble a{ color:var(--water-dark); font-weight:800; text-underline-offset:2px; }

/* ---------- P. Onglet latéral collé au bord droit ---------- */
.ci2-tab-demo{
  position:relative; min-height:260px; background:var(--paper-dim);
  border-radius:var(--radius); overflow:hidden;
}
.ci2-tab{
  position:absolute; right:0; top:50%; transform:translateY(-50%) rotate(0);
  display:flex; align-items:center; gap:8px;
  background:var(--water); color:var(--paper); border:none;
  padding:12px 14px; border-radius:10px 0 0 10px;
  font-family:var(--display); font-weight:600; font-size:14px;
  cursor:pointer; writing-mode:vertical-rl; text-orientation:mixed;
}
.ci2-tab:hover{ background:var(--water-dark); }
.ci2-tab-panel{
  position:absolute; right:0; top:0; bottom:0; width:min(280px, 76%);
  background:var(--paper); border-left:1px solid var(--line);
  box-shadow:-16px 0 30px -20px rgba(14,39,66,0.45);
  padding:20px; transform:translateX(100%); transition:transform .28s ease;
}
.ci2-tab-panel.is-open{ transform:translateX(0); }
.ci2-tab-panel h4{ margin:0 0 8px; font-family:var(--display); }
.ci2-tab-panel p{ margin:0 0 14px; font-size:14px; color:var(--ink-soft); line-height:1.45; }
.ci2-tab-close{
  position:absolute; top:10px; right:10px; width:30px; height:30px;
  border:none; background:var(--paper-dim); border-radius:8px; cursor:pointer;
  color:var(--ink-soft);
}
.ci2-tab-close svg{ width:16px; height:16px; fill:none; pointer-events:none; }

/* ---------- Q. Bandeau défilant type info-flash ---------- */
.ci2-ticker{
  position:relative; display:flex; align-items:center; gap:10px;
  background:var(--ink); color:var(--paper); border-radius:999px;
  padding:6px 8px 6px 14px; overflow:hidden;
  /* Le texte défilant est en white-space:nowrap : sans ce confinement, sa
     taille "min-content" (tout le texte sur une seule ligne) remonte à
     travers les ancêtres jusqu'à la grille .vitrine-list (colonne
     implicite en auto), qui s'élargit alors bien au-delà du viewport sur
     mobile — un `overflow:hidden` seul ne suffit pas à l'en empêcher. */
  contain:inline-size;
}
.ci2-ticker-label{
  flex:none; background:var(--spark); color:var(--ink); font-weight:800;
  font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  border-radius:999px; padding:5px 10px;
}
.ci2-ticker-track{
  flex:1; min-width:0; overflow:hidden; white-space:nowrap;
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ci2-ticker-track span{
  display:inline-block; padding-left:100%;
  animation:ci2-scroll 16s linear infinite;
  font-weight:700; font-size:14px;
}
.ci2-ticker.is-paused .ci2-ticker-track span{ animation-play-state:paused; }
@keyframes ci2-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }
@media (prefers-reduced-motion:reduce){
  .ci2-ticker-track span{ animation:none; padding-left:0; }
}
.ci2-ticker-pause{
  flex:none; width:28px; height:28px; border-radius:50%; border:none;
  background:rgba(244,247,251,0.14); color:var(--paper); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.ci2-ticker-pause svg{ width:14px; height:14px; fill:currentColor; pointer-events:none; }

/* ---------- R. Comparatif Sans / Avec avance immédiate ---------- */
.ci2-compare{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.ci2-compare-col{
  border-radius:var(--radius); padding:20px; border:1px solid var(--line);
}
.ci2-compare-col--sans{ background:var(--paper-dim); }
.ci2-compare-col--avec{ background:var(--foam); border-color:var(--water); }
.ci2-compare-col h4{ margin:0 0 14px; font-family:var(--display); font-size:16px; }
.ci2-compare-col--avec h4{ color:var(--water-dark); }
.ci2-compare-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ci2-compare-col li{ display:flex; align-items:flex-start; gap:8px; font-size:14px; line-height:1.4; }
.ci2-compare-col svg{ flex:none; width:18px; height:18px; margin-top:1px; }
.ci2-compare-col--sans svg{ color:var(--ink-soft); fill:none; }
.ci2-compare-col--avec svg{ color:var(--water-dark); fill:none; }
@media (max-width:600px){
  .ci2-compare{ grid-template-columns:1fr; }
}

/* ---------- S. Trois garanties en icônes ---------- */
.ci2-guarantees{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
}
.ci2-guarantee{
  text-align:center; padding:18px 12px; border-radius:var(--radius);
  background:var(--paper); border:1px solid var(--line);
}
.ci2-guarantee-icon{
  width:52px; height:52px; margin:0 auto 12px; border-radius:50%;
  background:var(--foam); display:flex; align-items:center; justify-content:center;
  color:var(--water-dark);
}
.ci2-guarantee-icon svg{ width:24px; height:24px; fill:none; }
.ci2-guarantee h4{ margin:0 0 6px; font-family:var(--display); font-size:14.5px; }
.ci2-guarantee p{ margin:0; font-size:13px; color:var(--ink-soft); line-height:1.4; }
@media (max-width:600px){
  .ci2-guarantees{ grid-template-columns:1fr; }
}

/* ---------- T. Mini-questionnaire « Suis-je concerné ? » ---------- */
.ci2-quiz{
  max-width:460px; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px;
}
.ci2-quiz h4{ margin:0 0 12px; font-family:var(--display); }
.ci2-quiz-item{
  display:flex; align-items:flex-start; gap:10px; padding:10px 8px;
  border-radius:10px; cursor:pointer;
}
.ci2-quiz-item:hover{ background:var(--paper-dim); }
.ci2-quiz-item input{ margin-top:3px; width:18px; height:18px; accent-color:var(--water); }
.ci2-quiz-item span{ font-size:14px; line-height:1.4; }
.ci2-quiz-result{
  margin:14px 0 0; padding:12px 14px; border-radius:10px;
  background:var(--paper-dim); font-size:13.5px; font-weight:700; color:var(--ink-soft);
}
.ci2-quiz-result.is-eligible{ background:var(--foam); color:var(--water-dark); }

/* ---------- U. Pastille header à côté du téléphone ---------- */
.ci2-header-demo{
  display:flex; align-items:center; justify-content:flex-end; gap:12px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 18px;
}
.ci2-header-pill{
  display:inline-flex; align-items:center; gap:5px;
  background:var(--spark); color:var(--ink); font-weight:800; font-size:12px;
  border-radius:999px; padding:5px 10px 5px 8px; text-decoration:none;
  white-space:nowrap; flex:none;
}
.ci2-header-pill svg{ width:13px; height:13px; flex:none; }
.ci2-header-pill:hover{ background:var(--spark-dark); }
.ci2-header-pill:focus-visible{ outline:2px solid var(--water-dark); outline-offset:2px; }
/* La pastille vit dans .nav-cta, qui disparaît déjà sous 821px (le tiroir la
   remplace, et la barre d'appel collante porte déjà la ligne credit d'impot
   J) : aucun réglage responsive propre n'est donc nécessaire ici, elle suit
   simplement le sort du reste de .nav-cta. */

/* ---------- V. Carte dans le menu burger mobile (tiroir) ---------- */
.ci2-drawer-demo{
  max-width:320px; background:var(--ink); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow);
}
.ci2-drawer-demo nav{ display:grid; gap:2px; margin-bottom:14px; }
.ci2-drawer-demo nav a{
  color:var(--paper); text-decoration:none; font-weight:700; font-size:14.5px;
  padding:10px 8px; border-radius:8px;
}
.ci2-drawer-demo nav a:hover{ background:rgba(244,247,251,0.08); }
.ci2-drawer-card{
  display:flex; align-items:center; gap:10px;
  background:var(--spark); color:var(--ink); border-radius:12px;
  padding:12px 14px; text-decoration:none; font-weight:700; font-size:13.5px;
}
.ci2-drawer-card svg{ flex:none; width:22px; height:22px; }

/* ---------- V (réel). Carte injectée dans le VRAI tiroir de main.js ----------
   Le tiroir de production (.nav-drawer) est clair, pas sombre comme la
   démonstration ci-dessus : variante propre, cohérente avec .nav-drawer-tel
   et .btn du même tiroir. Injectée par credit-impot-blocs-2.js, jamais par
   main.js (qu'on ne modifie pas). */
.ci2-drawer-real{
  display:flex; align-items:center; gap:10px;
  background:var(--foam); border:1px solid var(--water);
  border-radius:12px; padding:12px 14px; text-decoration:none;
  color:var(--water-dark); font-weight:800; font-size:13.5px; line-height:1.3;
}
.ci2-drawer-real svg{ flex:none; width:22px; height:22px; fill:none; }

/* ---------- W. Encart page de remerciement ---------- */
.ci2-merci{
  display:flex; align-items:center; gap:14px; max-width:520px;
  background:var(--foam); border-left:4px solid var(--water);
  border-radius:var(--radius); padding:16px 18px;
}
.ci2-merci svg{ flex:none; width:30px; height:30px; color:var(--water-dark); fill:none; }
.ci2-merci p{ margin:0; font-size:14px; line-height:1.45; color:var(--ink); }
.ci2-merci a{ color:var(--water-dark); font-weight:700; }

/* ---------- X. Section split photo + texte ---------- */
.ci2-split{
  display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch;
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
}
.ci2-split img{ width:100%; height:100%; object-fit:cover; display:block; min-height:220px; }
.ci2-split-copy{ padding:26px; display:flex; flex-direction:column; justify-content:center; background:var(--paper); }
.ci2-split-copy .ci2-eyebrow{
  display:inline-block; margin-bottom:8px; padding:4px 12px; border-radius:999px;
  background:var(--spark); color:var(--ink); font-weight:800; font-size:11.5px;
  width:fit-content; text-transform:uppercase; letter-spacing:.03em;
}
.ci2-split-copy h3{ margin:0 0 10px; }
.ci2-split-copy p{ margin:0; color:var(--ink-soft); font-size:14.5px; line-height:1.5; }
@media (max-width:640px){
  .ci2-split{ grid-template-columns:1fr; }
  .ci2-split img{ min-height:180px; }
}

/* ---------- Y. Bloc « chiffre géant » avec vague SVG ----------
   Hauteur mesurée + ombre pour qu'il ait l'air posé dans la page plutôt que
   collé dessus (retouche du 23/09/2026 : padding et clamp réduits, box-shadow
   ajoutée, border-radius inchangé — déjà celui des cartes du site). */
.ci2-giant{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:linear-gradient(135deg, var(--water-dark), var(--water));
  color:var(--paper); padding:38px 24px 50px; text-align:center;
  box-shadow:var(--shadow);
}
.ci2-giant-num{
  font-family:var(--display); font-weight:600; font-size:clamp(48px, 9vw, 84px);
  line-height:1; margin:0;
}
.ci2-giant-sub{ margin:8px 0 0; font-size:16px; font-weight:700; opacity:.92; }
.ci2-giant-note{ margin:10px 0 0; font-size:12.5px; font-weight:600; opacity:.78; }
.ci2-giant-wave{
  position:absolute; left:0; right:0; bottom:-2px; width:100%; height:auto;
  display:block;
}

/* ---------- Z. Modale d'accueil une seule fois ---------- */
.ci2-modal-demo{
  position:relative; min-height:260px; background:var(--paper-dim);
  border-radius:var(--radius); overflow:hidden;
}
.ci2-modal-open{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  padding:10px 18px; border-radius:999px; border:none; cursor:pointer;
  background:var(--ink); color:var(--paper); font-weight:700; font-family:var(--body);
}
.ci2-modal-overlay{
  position:absolute; inset:0; background:rgba(14,39,66,0.55);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.ci2-modal-overlay.is-open{ opacity:1; pointer-events:auto; }
.ci2-modal-box{
  background:var(--paper); border-radius:var(--radius); padding:24px;
  max-width:340px; text-align:center; box-shadow:var(--shadow);
  position:relative;
}
.ci2-modal-box img{ width:56px; height:56px; margin:0 auto 12px; display:block; }
.ci2-modal-box h4{ margin:0 0 8px; font-family:var(--display); }
.ci2-modal-box p{ margin:0 0 16px; font-size:14px; color:var(--ink-soft); line-height:1.45; }
.ci2-modal-close{
  position:absolute; top:10px; right:10px; width:30px; height:30px;
  border:none; background:var(--paper-dim); border-radius:8px; cursor:pointer; color:var(--ink-soft);
}
.ci2-modal-close svg{ width:16px; height:16px; fill:none; pointer-events:none; }
.ci2-modal-cta{
  display:inline-flex; padding:10px 20px; border-radius:999px;
  background:var(--spark); color:var(--ink); font-weight:700; text-decoration:none; font-size:14px;
}

/* ---------- utilitaires vitrine (dupliqués, préfixés ci2-) ---------- */
.ci2-todo-note{ margin:10px 0 0; font-size:12.5px; color:var(--ink-soft); font-style:italic; }