/* Grignon · abonnement : feuille contextuelle (bas d'écran sur téléphone, carte centrée sur grand écran), badges « Complet »,
   carte « Mon abonnement » (Moi), écrans de retour. Couleurs du thème (clair et sombre) via les variables de l'appli. */

/* ---------- carte « Mon abonnement » (Moi) ---------- */
.abo-c-tete{display:flex;gap:14px;align-items:center}
.abo-c-ogre{flex:none;width:56px;height:56px;border-radius:50%;background:color-mix(in srgb,var(--ogre) 14%,var(--card));display:grid;place-items:center;overflow:hidden}
.abo-c-ogre svg{width:46px;height:46px}
.abo-carte h3{margin:0}
.abo-c-etat{margin:4px 0 0;display:flex;flex-direction:column;gap:4px}
.abo-c-etat b{font-family:var(--display);font-size:1.05rem}
.abo-c-txt{margin:12px 0 0;color:var(--soft);font-size:.95rem;line-height:1.45}
.abo-c-liste{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:.94rem}
.abo-c-liste li{display:flex;gap:10px;align-items:flex-start}
.abo-c-liste i{flex:none;margin-top:2px;color:var(--ogre-d)}
.abo-c-annul{display:flex;gap:8px;align-items:flex-start;margin:14px 0 0;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--sun) 16%,var(--card));font-size:.92rem}
.abo-carte.ko .abo-c-etat b{color:var(--ko-t,var(--ko))}
.abo-c-btn{margin:18px 0 0;display:flex;align-items:center;justify-content:center;gap:8px;font-size:1.02rem;padding:12px 14px}
.abo-c-btn+.abo-c-btn{margin-top:12px}
.abo-c-note{margin:10px 0 0;text-align:center;color:var(--soft);font-size:.86rem}
.abo-err{color:var(--ko-t,var(--ko));font-size:.92rem;margin:10px 0 0}
.abo-err:empty{display:none}

/* ---------- marques discrètes sur les points d'entrée réservés ---------- */
#hGrig{position:relative}
.abo-cad{position:absolute;top:-30px;left:50%;margin-left:14px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--sun);color:#3A2A00;border:2px solid var(--sheet,var(--card));font-size:.75rem;pointer-events:none}
.abo-badge{display:inline-flex;align-items:center;gap:4px;vertical-align:2px;margin-left:4px;padding:1px 8px 1px 6px;border-radius:999px;font-family:var(--body);font-size:.7rem;font-weight:800;letter-spacing:.02em;
  background:color-mix(in srgb,var(--sun) 22%,var(--card));color:var(--warn-t,#8A5A00);border:1px solid color-mix(in srgb,var(--sun) 45%,var(--line));white-space:nowrap}
.abo-badge i{font-size:.75rem}
.abo-cad-mini{display:inline-grid;place-items:center;width:20px;height:20px;margin-left:6px;border-radius:50%;background:var(--sun);color:#3A2A00;font-size:.65rem;vertical-align:1px}
.abo-teaser-t{display:flex!important;align-items:center;gap:6px;margin-top:4px;color:var(--warn-t,#8A5A00)!important;font-weight:700}

/* bandeau de l'aperçu (dev) */
.abo-apercu{position:fixed;z-index:950;left:50%;transform:translateX(-50%);top:calc(6px + env(safe-area-inset-top,0px));display:inline-flex;align-items:center;gap:6px;max-width:calc(100vw - 32px);
  padding:5px 12px;border-radius:999px;background:var(--ink);color:var(--paper,#fff);font-size:.78rem;font-weight:800;text-decoration:none;box-shadow:0 4px 12px rgba(0,0,0,.2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- la feuille ---------- */
html.abo-ouvert{overflow:hidden}
.abo-voile{position:fixed;inset:0;z-index:1000;background:rgba(20,18,30,.55);display:flex;align-items:flex-end;justify-content:center;padding:16px 0 0;animation:abo-fondu .2s ease-out}
.abo-feuille{position:relative;width:100%;max-width:480px;max-height:calc(100dvh - 16px);overflow:auto;background:var(--sheet,var(--card));color:var(--ink);border-radius:28px 28px 0 0;
  padding:24px 20px calc(24px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 30px rgba(0,0,0,.25);outline:none;overscroll-behavior:contain;animation:abo-monte .28s cubic-bezier(.2,.8,.2,1)}
@media (min-width:560px){.abo-voile{align-items:center;padding:16px}.abo-feuille{border-radius:28px;padding:28px 28px 26px;max-height:calc(100dvh - 32px)}}
@keyframes abo-monte{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@keyframes abo-fondu{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.abo-voile,.abo-feuille{animation:none}}
.abo-x{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;border:0;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink);display:grid;place-items:center;z-index:1}
.abo-retour{position:absolute;top:14px;left:12px;border:0;background:none;color:var(--soft);font-weight:800;display:inline-flex;align-items:center;gap:6px;padding:10px 8px;min-height:44px}

/* héros : Grignon en grand, halo vert, pastille du geste */
.abo-heros{position:relative;width:128px;height:128px;margin:4px auto 10px}
.abo-halo{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--ogre) 30%,var(--card)) 0%,color-mix(in srgb,var(--ogre) 10%,var(--card)) 62%,transparent 72%)}
.abo-tete{position:absolute;inset:14px;display:block}
.abo-tete svg{width:100%;height:100%;display:block}
.abo-pastille{position:absolute;right:2px;bottom:6px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:1.15rem;background:var(--ogre-d);color:#fff;border:3px solid var(--sheet,var(--card));box-shadow:0 3px 8px rgba(0,0,0,.15)}
.ctx-copie .abo-pastille,.ctx-langues .abo-pastille{background:var(--sky,#1F78B8)}
.ctx-groupes .abo-pastille{background:#2F8A4A}
.merci .abo-pastille{background:var(--sun);color:#3A2A00}

.abo-kicker{display:flex;justify-content:center;align-items:center;gap:6px;margin:0 0 6px;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ogre-d)}
.abo-feuille h2{text-align:center;font-size:1.38rem;line-height:1.25;margin:0 8px 10px;text-wrap:balance}
.abo-lead{text-align:center;color:var(--soft);margin:0 4px 20px;line-height:1.45}
.abo-sous{font-weight:800;margin:4px 0 10px}

.abo-av{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:12px}
.abo-av li{display:flex;align-items:center;gap:12px;line-height:1.35}
.abo-av .ic{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--ogre) 16%,var(--card));color:var(--ogre-d)}
.abo-av li:first-child{font-weight:800}

.abo-confiance{display:flex;gap:10px;align-items:flex-start;margin:0 0 18px;padding:12px 14px;border-radius:16px;background:color-mix(in srgb,var(--sky,#1F78B8) 9%,var(--card));font-size:.9rem;line-height:1.4}
.abo-confiance i{flex:none;margin-top:2px;color:var(--info-t,#2471AE)}

.abo-prix{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;padding:14px;border-radius:18px;border:2px solid color-mix(in srgb,var(--ogre) 45%,var(--line));background:color-mix(in srgb,var(--ogre) 8%,var(--card));margin:0 0 16px}
.abo-prix b{font-family:var(--display);font-size:1.35rem}
.abo-prix span{color:var(--soft);font-size:.92rem}

/* frise de l'essai : aujourd'hui → avant le 7e jour → jour 7 */
.abo-frise{list-style:none;margin:0 0 22px;padding:0 4px;display:flex;flex-direction:column}
.abo-frise li{position:relative;display:flex;gap:12px;padding:0 0 14px}
.abo-frise li:last-child{padding-bottom:0}
.abo-frise li:not(:last-child)::before{content:"";position:absolute;left:15px;top:32px;bottom:2px;width:2px;background:var(--line)}
.abo-frise .pt{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:.85rem;background:var(--card);border:2px solid var(--line);color:var(--soft)}
.abo-frise li.ok .pt{background:var(--ogre-d);border-color:var(--ogre-d);color:#fff}
.abo-frise .tx{display:flex;flex-direction:column;gap:2px;padding-top:4px}
.abo-frise .tx b{font-size:.96rem}
.abo-frise .tx small{color:var(--soft);font-size:.88rem;line-height:1.35}

.abo-go{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:0;font-size:1.08rem;padding:14px 16px}
.abo-go.charge{opacity:.7}
.abo-go[disabled]{opacity:.55}
.abo-plus-tard{display:block;margin:12px auto 0;border:0;background:none;color:var(--soft);font-weight:800;padding:12px 16px;min-height:44px}
.abo-gratuit{margin:18px 0 0;border:1.5px solid var(--line);border-radius:16px;padding:10px 14px}
.abo-gratuit summary{cursor:pointer;font-weight:800;color:var(--soft)}
.abo-gratuit ul{list-style:none;margin:10px 0 2px;padding:0;display:flex;flex-direction:column;gap:8px;font-size:.94rem}
.abo-gratuit li{display:flex;gap:8px;align-items:flex-start}.abo-gratuit li i{color:var(--ok);margin-top:3px}

/* étape 2 : un parent valide, ou le lien */
.abo-feuille:has(.abo-retour) .abo-heros{margin-top:30px}
.abo-parent{margin:0 0 6px}
.abo-adulte{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;font-size:.92rem;line-height:1.4}
.abo-adulte i{flex:none;margin-top:2px;color:var(--info-t,#2471AE)}
.abo-case{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:16px;margin:0 0 16px;background:color-mix(in srgb,var(--sky,#1F78B8) 10%,var(--card));border:2px solid color-mix(in srgb,var(--sky,#1F78B8) 30%,var(--line));cursor:pointer;line-height:1.4}
.abo-case input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--ogre-d)}
.abo-stripe{text-align:center;font-size:.82rem;color:var(--soft);margin:10px 0 0}
.abo-retract{font-size:.82rem;color:var(--soft);margin:14px 0 6px;line-height:1.4}
.abo-liens{font-size:.86rem;margin:0}.abo-liens a{color:var(--info-t,var(--sky))}
.abo-ou{display:flex;align-items:center;gap:12px;margin:20px 0 16px;color:var(--soft);font-size:.86rem;font-weight:800}
.abo-ou::before,.abo-ou::after{content:"";flex:1;height:1.5px;background:var(--line)}
.abo-lien p{display:flex;flex-direction:column;gap:4px;margin:0 0 12px;line-height:1.4}
.abo-lien p span{color:var(--soft);font-size:.92rem}
.abo-lien .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:0}
.abo-ok{margin:10px 0 0;text-align:center;font-weight:700;color:var(--ok-t,#1B7A40);font-size:.92rem}
.abo-ok:empty{display:none}
.abo-lien-url{display:block;width:100%;margin:8px 0 0;padding:10px;border-radius:12px;border:2px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:.82rem}

/* retour du paiement : quoi essayer en premier */
.abo-essayer{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:10px}
.abo-essayer li{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;border:1.5px solid var(--line);background:var(--card)}
.abo-essayer .n{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:800;background:var(--ogre-d);color:#fff}
.abo-essayer .ic{flex:none;color:var(--ogre-d)}
.abo-feuille>.btn:last-child{width:100%;margin:0}
.abo-roue{width:36px;height:36px;margin:6px auto 4px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--ogre);animation:abo-tourne 1s linear infinite}
@keyframes abo-tourne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.abo-roue{animation-duration:3s}}

/* sombre : verts plus clairs pour le texte et les icônes */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .abo-av .ic,:root:not([data-theme="light"]) .abo-kicker,:root:not([data-theme="light"]) .abo-c-liste i,:root:not([data-theme="light"]) .abo-essayer .ic{color:var(--ogre)}}
:root[data-theme="dark"] .abo-av .ic,:root[data-theme="dark"] .abo-kicker,:root[data-theme="dark"] .abo-c-liste i,:root[data-theme="dark"] .abo-essayer .ic{color:var(--ogre)}

/* petits écrans (320 px) */
@media (max-width:360px){.abo-feuille{padding-left:16px;padding-right:16px}.abo-heros{width:108px;height:108px}.abo-feuille h2{font-size:1.24rem;margin:0 4px 8px}.abo-pastille{width:36px;height:36px;font-size:1rem}}

/* bouton principal toujours visible en bas de la feuille (étape 1), « Plus tard » juste dessous, jamais caché */
.abo-pied{position:sticky;bottom:calc(-24px - env(safe-area-inset-bottom,0px));margin:18px -20px calc(-24px - env(safe-area-inset-bottom,0px));padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px));
  background:var(--sheet,var(--card));border-top:1.5px solid var(--line);box-shadow:0 -8px 18px rgba(0,0,0,.06);z-index:2}
.abo-pied .abo-plus-tard{margin-top:4px}
@media (min-width:560px){.abo-pied{bottom:-26px;margin:18px -28px -26px;padding:14px 28px 12px}}
@media (max-width:360px){.abo-pied{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}}

/* ---------- quotas gratuits : ligne discrète dans le chat, indication sur la création de quiz du défi ---------- */
.abo-essai{margin:0;padding:8px 20px 6px;font-size:.86rem;line-height:1.4;color:var(--soft);text-align:center;text-wrap:balance}
.abo-essai i{display:inline-block;vertical-align:-3px;margin-right:6px;color:var(--ogre-d)}
.abo-defi{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:.88rem;font-weight:700;line-height:1.35;color:var(--ogre-d)}
.abo-defi.fini{color:var(--soft);font-weight:600}
.abo-defi i{flex:none}