/* Passage 13 — ajouts du SITE aux gabarits iso paywall / abonnement / chat-apercu (le CSS des maquettes reste intact) :
   feuilles du bas « Avant de payer » et « Demande à un parent », messages d'état, boutons rendus cliquables sans changer leur rendu. */
:root{--creme:#F6F3E9;--encre:#173B2C;--encre-2:#3d4a44;--gris:#6b6a63;--ligne:#ddd3bf;--carte:#FCFAF4;--vert:#A6E36F;--vert-fonce:#4B8F2F;
  --orange:#FFB95E;--violet:#7768E8;--violet-fonce:#5A4BD1;--violet-clair:#ECEAFD;--rouge-clair:#FBE3E1;--toucher:48px}
:focus-visible{outline:3px solid #F6A53A;outline-offset:3px;border-radius:12px}
a{text-decoration:none}

/* éléments des maquettes devenus des boutons / liens : même rendu que la maquette */
.cmp button.col{background:none;border:0;color:inherit;font:inherit;width:100%;cursor:pointer}
button.cta,button.cta2{cursor:pointer}
button.par{display:block;width:100%;background:none;border:0;font-family:Inter,sans-serif;cursor:pointer;position:relative}
button.par:before,a.x:before,.f[role=button]:before{content:"";position:absolute;inset:-14px 0}   /* zone tactile ≥ 44 px, rendu inchangé */
a.x{position:relative}
.cta[disabled],.cta2[disabled],.nv[aria-disabled=true]{opacity:.6;cursor:default}
.cta[disabled]:after{animation:none}
a.lgo,a.rond{color:inherit}
a.lgo{color:#fff}
button.l,a.l{width:100%;background:none;border:0;border-bottom:1px solid #f0ead9;font-family:Inter,sans-serif;color:inherit;text-align:left;cursor:pointer}
.lg>:last-child{border-bottom:0}
button.nv{width:100%;color:#173B2C;cursor:pointer}
.f[role=button]{cursor:pointer}

/* messages d'état (paywall au tableau) */
.pw-info,.pw-erreur{position:relative;z-index:2;margin-top:12px;border-radius:14px;padding:10px 12px;font-size:14px;color:#fff}
.pw-info{background:rgba(166,227,111,.12);border:1.5px solid rgba(166,227,111,.5)}
.pw-erreur{background:rgba(217,83,79,.18);border:1.5px solid rgba(217,83,79,.6)}
.pw-pack{margin-top:16px;border-radius:18px;padding:14px;background:rgba(119,104,232,.18);border:2px solid #9a8df5}
.pw-pack b{font:900 20px Nunito;color:#fff;display:block}.pw-pack small{color:#d8d2ff;font-size:13px}
.pw-legal{margin-top:8px;font-size:11.5px;color:#bcd2ad;text-align:center;line-height:1.4}
.pw-pack,.pw-legal,.renon,.e-paywall .cta,.e-paywall .cta2,.e-paywall .par,.e-paywall .lock{position:relative;z-index:2}
.erreur-p{margin-top:12px;border-radius:14px;padding:10px 12px;background:var(--rouge-clair);color:#7a1f1b;font-size:14px}

/* case de renonciation (droit de rétractation) */
.renon{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:12.5px;line-height:1.35;color:#e8e4d6;cursor:pointer}
.renon input{appearance:none;-webkit-appearance:none;width:24px;height:24px;flex:none;border-radius:7px;border:2px solid rgba(244,241,230,.6);background:rgba(244,241,230,.08);display:grid;place-items:center;margin:0;cursor:pointer}
.renon input:checked{background:var(--vert);border-color:var(--vert)}
.renon input:checked:after{content:"";width:6px;height:11px;border:solid var(--encre);border-width:0 3px 3px 0;transform:rotate(45deg) translate(-1px,-1px)}
.renon.manque{animation:secoue .35s}.renon.manque input{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,185,94,.45)}
@keyframes secoue{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.renon.renon-clair{color:var(--encre);font-size:14px;margin:6px 0 14px}
.renon.renon-clair input{border-color:#b9ad93;background:#fff}

/* feuilles du bas (js/commun.js : [data-ouvre], voile, Échap) */
.voile{position:fixed;inset:0;background:rgba(20,41,35,.45);z-index:40;opacity:0;pointer-events:none;transition:opacity .2s}
.voile.ouvert{opacity:1;pointer-events:auto}
.feuille{position:fixed;left:0;right:0;bottom:0;z-index:41;max-width:440px;margin:0 auto;background:var(--creme);color:var(--encre);border-radius:24px 24px 0 0;padding:10px 20px calc(20px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px rgba(0,0,0,.18);transform:translateY(105%);max-height:88vh;overflow:auto;font-family:Inter,sans-serif;visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
.feuille.ouvert{transform:none;visibility:visible;transition:transform .25s ease}
.feuille .poignee{width:44px;height:5px;border-radius:5px;background:#d4cab5;margin:0 auto 12px}
.feuille h2{font:900 22px Nunito;margin-bottom:6px}
.feuille .sous-titre{color:var(--gris);font-size:14.5px;line-height:1.4;margin-bottom:8px}
.feuille .off-legal{font-size:12.5px;color:var(--gris);line-height:1.4;margin:4px 0 10px}
.feuille .erreur-p{margin:0 0 12px}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:var(--toucher);border-radius:24px;padding:12px 20px;font:800 18px Nunito;width:100%;text-align:center;color:var(--encre);cursor:pointer}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn-v{background:linear-gradient(180deg,#8a7cf0 0,var(--violet) 100%);border:2px solid var(--violet-fonce);color:#fff;box-shadow:0 8px 18px rgba(119,104,232,.32)}
.btn-t{background:none;border:0;color:var(--encre-2);font:600 14px Inter;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.btn .ic,.feuille .ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.choix-f{display:grid;gap:8px;margin:10px 0 12px}
.choix-f label{display:flex;align-items:center;gap:12px;border-radius:16px;padding:10px 12px;background:var(--carte);border:2px solid var(--ligne);cursor:pointer;min-height:var(--toucher)}
.choix-f input{accent-color:var(--violet);width:20px;height:20px}
.choix-f label:has(input:checked){background:var(--violet-clair);border-color:var(--violet)}
.choix-f b{font:900 16px Nunito;display:block}.choix-f small{font-size:12.5px;color:var(--gris)}
.partage{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.partage a,.partage button{display:flex;flex-direction:column;align-items:center;gap:6px;font:700 13px Inter;color:var(--encre);background:none;border:0;min-height:var(--toucher);cursor:pointer}
.partage .rd{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff}
.partage .rd .ic{width:22px;height:22px}
.message{background:#fff;border:2px dashed var(--ligne);border-radius:16px;padding:12px;font-size:14px;line-height:1.4;word-break:break-word}
.message .url{color:var(--violet-fonce);font-weight:700}
.attente{display:none;align-items:center;gap:10px;margin-top:12px;background:var(--violet-clair);border-radius:14px;padding:10px 12px;font-size:14px;font-weight:600;color:var(--violet-fonce)}
.attente.vu{display:flex}.attente .ic{width:18px;height:18px;animation:tourne 1s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cta:after,.attente .ic{animation:none}}
/* rond Chat : paiement pas encore ouvert ou Prof particulier déjà actif → « Revoir mes cours » (vert, jamais de cul-de-sac) */
.lgo.vert{background:linear-gradient(180deg,#c3ec96,#a6e36f);color:#173B2C;box-shadow:0 5px 0 #8cc957}
/* V5b : feuille « Ton adresse e-mail » (lien magique avant le paiement) */
.champ-mail{display:block;margin:12px 0 4px}.champ-mail span{display:block;font:800 13px Nunito;color:#5d675f;margin-bottom:6px}
.champ-mail input{width:100%;box-sizing:border-box;border:2px solid #e0d4b9;border-radius:14px;padding:13px 14px;font:700 16px Inter;color:#173B2C;background:#fff;outline:0}
.champ-mail input:focus{border-color:#8cc957}
#compte-2 .btn{margin-top:6px}

.compte-a{margin:4px 0 8px;font:900 15px Nunito;color:#2f7d3a;background:#e6f6d6;border-radius:12px;padding:9px 12px}