/* Difficultés des pages longues (labo, version 2 du 15/11/2026) : le texte à gauche, l'animation à droite.
   Une animation lit comme un petit récit : la situation, la question, la réponse d'avant (fausse), celle d'aujourd'hui (juste).
   Gros caractères, peu d'éléments, couleurs sémantiques de la marque : rouge #E24B4A, vert #5DC75D.
   Le panneau reste sombre dans les deux thèmes, comme le schéma de fonctionnement. */

/* La difficulté : texte et animation côte à côte */
.cl-d-corps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,3.4vw,52px);align-items:start}
.cl-d-pile{display:grid;gap:22px}
.cl-d-pile p{margin:0;font:400 15.5px/1.65 var(--z-font-body);color:var(--z-text-secondary)}
.cl-d-pile .cl-d-l{margin:0 0 8px;font:600 11.5px/1.3 var(--z-font-ui);letter-spacing:.11em;text-transform:uppercase;color:var(--z-text-tertiary,var(--z-text-secondary))}
.cl-d-pile .cl-d-pour .cl-d-l{color:var(--cl-or-texte)}
.cl-d-pile .cl-d-pour p+p{font:500 15.5px/1.6 var(--z-font-ui);color:var(--z-text-primary)}
@media (max-width:1000px){.cl-d-corps{grid-template-columns:minmax(0,1fr)}.cl-d-corps .dq{max-width:620px}}

/* Le panneau */
.dq{--r:#e24b4a;--v:#5dc75d;--or:#f5b81e;position:relative;display:grid;gap:12px;margin:0;padding:22px clamp(16px,2.2vw,24px) 18px;border-radius:20px;overflow:hidden;background:radial-gradient(ellipse at 50% 0%,rgba(245,184,30,.09),transparent 60%),#121110;border:1px solid rgba(245,184,30,.32);color:#f2ede5;font-family:var(--z-font-ui)}
.dq p,.dq ul{margin:0}
.dq ul{padding:0;list-style:none}
.dq-i{width:16px;height:16px;flex:none}
.dq-l{display:block;margin-bottom:4px;font:600 11.5px/1.3 var(--z-font-ui);letter-spacing:.1em;text-transform:uppercase;color:#a39b8d}

/* 1. La situation */
.dq-situ{padding:14px 16px;border-radius:14px;background:#1d1a16;border:1px solid #352f26}
.dq-fait{font:400 16px/1.55 var(--z-font-ui);color:#e6dfd2}
.dq-fait b{font-weight:700;color:#fff;white-space:nowrap}
.dq-fait q{quotes:"« " " »";font-weight:700;color:#fff;white-space:nowrap}

/* 2. La question */
.dq-q{padding:4px 2px 2px;font:400 clamp(1.3rem,2vw,1.55rem)/1.2 var(--z-font-serif);color:#fff;text-wrap:balance}

/* 3 et 4. Les deux réponses */
.dq-rep{display:grid;gap:9px;padding:14px 16px 15px;border-radius:14px;background:#191714;border:1.5px solid #322d25;transition:border-color .4s,background-color .4s}
.dq-quand{display:flex;align-items:center;gap:8px;font:700 12px/1 var(--z-font-ui);letter-spacing:.12em;text-transform:uppercase;color:#cfc7b9}
.dq-quand i{width:9px;height:9px;border-radius:50%;background:var(--r)}
.dq-ap .dq-quand i{background:var(--v)}
.dq-rep.x{border-color:rgba(226,75,74,.75);background:linear-gradient(180deg,rgba(226,75,74,.10),rgba(226,75,74,.04)),#191714}
.dq-rep.v{border-color:rgba(93,199,93,.75);background:linear-gradient(180deg,rgba(93,199,93,.10),rgba(93,199,93,.04)),#191714}
.dq-ligne{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dq-reponse{font:400 clamp(1.25rem,1.9vw,1.45rem)/1.2 var(--z-font-serif);color:#fff}
.dq-gros{font-size:clamp(1.9rem,3vw,2.3rem);font-variant-numeric:tabular-nums;line-height:1}
.dq-rep.x .dq-reponse{color:#ffb3b1}
.dq-detail{font:500 14px/1.45 var(--z-font-ui);color:#b8b0a2}
.dq-effet{font:500 15px/1.5 var(--z-font-ui);color:#efe8dc}
.dq-effet .dq-l{margin-bottom:3px}
.dq-effet-x{padding-top:9px;border-top:1px solid rgba(226,75,74,.3)}
.dq-effet-x .dq-l{color:#ff9e9c}
.dq-effet-v{padding-top:9px;border-top:1px solid rgba(93,199,93,.3)}
.dq-effet-v .dq-l{color:#9be59b}

/* Tampons : la croix rouge et la coche verte */
.dq-tampon{display:inline-flex;align-items:center;gap:7px;flex:none;padding:6px 13px 6px 6px;border-radius:999px;font:700 14px/1 var(--z-font-ui);white-space:nowrap}
.dq-tampon .dq-i{width:22px;height:22px;padding:4px;border-radius:50%;box-sizing:border-box;color:#fff;stroke-width:3.2}
.dq-tampon-x{background:rgba(226,75,74,.16);border:1px solid rgba(226,75,74,.75);color:#ff9e9c}
.dq-tampon-x .dq-i{background:var(--r)}
.dq-tampon-v{background:rgba(93,199,93,.14);border:1px solid rgba(93,199,93,.7);color:#a6eba6}
.dq-tampon-v .dq-i{background:var(--v);color:#0e1a0e}

/* La preuve (payeur) : le compte, puis ce qu'on sait de lui */
.dq-preuve{display:flex;align-items:flex-start;gap:9px;padding:9px 12px;border-radius:10px;background:rgba(245,184,30,.08);border:1px solid rgba(245,184,30,.45);font:500 14.5px/1.45 var(--z-font-ui);color:#f2ede5}
.dq-preuve .dq-i{margin-top:2px;color:var(--or)}
.dq-preuve b{font-weight:700;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}

/* Le calcul (Mollie) */
.dq-calcul{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;font:600 15px/1 var(--z-font-ui);color:#8f877a}
.dq-calcul span{padding:6px 9px;border-radius:8px;background:#24201b;border:1px solid #3d362b;color:#f2ede5;font-variant-numeric:tabular-nums;white-space:nowrap}
.dq-calcul .dq-en-trop{position:relative;background:rgba(226,75,74,.16);border-color:rgba(226,75,74,.8);color:#ffb3b1}
.dq-calcul .dq-total{background:rgba(93,199,93,.13);border-color:rgba(93,199,93,.7);color:#c4f3c4}

/* La jauge (paiement en plusieurs fois) */
.dq-jauge{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px}
.dq-barre{grid-column:1/-1;position:relative;height:10px;border-radius:999px;background:#2c2721;overflow:hidden}
.dq-barre i{position:absolute;inset:0 auto 0 0;width:50%;border-radius:inherit;background:var(--or)}
.dq-jauge-t{font:500 14px/1.3 var(--z-font-ui);color:#d9d1c3}
.dq-jauge-t b{color:#fff}
.dq-relance{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:rgba(245,184,30,.12);border:1px solid rgba(245,184,30,.5);font:600 13px/1 var(--z-font-ui);color:#f8d77d;white-space:nowrap}
.dq-relance .dq-i{width:14px;height:14px}

/* La TVA */
.dq-tva{display:grid;gap:7px}
.dq-tva li{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding:9px 10px 9px 12px;border-radius:10px;background:#211e19;border:1px solid #37312a}
.dq-tva b{font:700 14px/1.2 var(--z-font-ui);color:#fff}
.dq-tva span{font:500 14.5px/1.3 var(--z-font-ui);color:#efe8dc}
.dq-tva small{display:flex;align-items:center;gap:6px;margin-top:3px;font:500 12.5px/1.35 var(--z-font-ui);color:#b8b0a2}
.dq-tva .dq-tampon{padding:4px 10px 4px 4px;font-size:12.5px}
.dq-tva .dq-tampon .dq-i{width:18px;height:18px;padding:3px}
.dq-rep.x .dq-tva span{color:#ffb3b1}
.dq-vies img{width:15px;height:11px;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.6)}

/* Rejouer */
.dq-rejouer{justify-self:end;display:inline-flex;align-items:center;gap:7px;margin-top:2px;padding:7px 12px;border-radius:999px;border:1px solid #3d362b;background:transparent;color:#cfc7b9;font:600 13px/1 var(--z-font-ui);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .4s,color .2s,border-color .2s}
.dq-rejouer .dq-i{width:14px;height:14px}
.dq-rejouer:hover{color:#fff;border-color:#6a604f}
.dq-rejouer:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.dq-fin .dq-rejouer{opacity:1;pointer-events:auto}
.dq:not(.dq-js) .dq-rejouer{display:none}

/* L'animation : chaque élément apparaît à son étape, les tampons arrivent comme un coup de tampon */
.dq-js [data-t]{opacity:0;transform:translateY(12px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.dq-js [data-t].on{opacity:1;transform:none}
.dq-js .dq-tampon[data-t]{transform:scale(1.8) rotate(-10deg)}
.dq-js .dq-tampon[data-t].on{transform:scale(1) rotate(0deg);transition:opacity .2s ease,transform .5s cubic-bezier(.34,1.5,.64,1)}
.dq-js .dq-barre i{width:0;transition:width 1.2s cubic-bezier(.22,1,.36,1) .3s}
.dq-js .dq-jauge.on .dq-barre i{width:50%}
.dq-js .dq-rep.x .dq-en-trop{box-shadow:0 0 0 4px rgba(226,75,74,.18)}

/* Petits écrans */
@media (max-width:560px){
  .dq{padding:18px 14px 14px;border-radius:16px}
  .dq-ligne{align-items:flex-start}
  .dq-tva li{grid-template-columns:minmax(0,1fr) auto}
  .dq-tva li>span:not(.dq-tampon){grid-column:1/-1;grid-row:2}
  .dq-tva li>.dq-tampon{grid-column:2;grid-row:1;justify-self:end}
}
@media (prefers-reduced-motion:reduce){.dq *{transition:none!important;animation:none!important}}