/* === FREEMIUM / PAYWALL === */
/* Gating d'un onglet/section : la vraie page reste rendue mais FLOUTÉE et non interactive,
   et l'écran verrouillé se superpose par-dessus (aperçu "vraie page derrière le verrou").
   N'altère pas les états hidden internes -> restaurés tels quels au passage Premium. */
/* Panneau gaté : la vraie page reste rendue (floutée) comme teaser. La carte, elle, est centrée
   dans le VIEWPORT (position: fixed ci-dessous) -> pile au milieu de l'écran quel que soit
   l'emplacement du panneau (Budget plein onglet, Repro sous les sous-onglets). */
.prem-gated { position: relative; min-height: 60vh; }
.prem-gated > *:not(.prem-gate-screen) { filter: blur(2px); pointer-events: none; -webkit-user-select: none; user-select: none; }
/* Overlay FIXE plein viewport (modale) : centre la carte au milieu de l'écran de façon fiable,
   quel que soit l'emplacement/hauteur du panneau. La vraie page reste floutée derrière. */
/* z-index : au-dessus de la nav/contenu (1000) mais SOUS les vraies modales (.dlg = 1100) pour
   que le paywall/quota passe DEVANT la carte verrouillée quand on clique "Débloquer". */
/* Scrim commun aux dialogs .dlg (fond sombre + flou) : voir --scrim-bg / --scrim-blur (01-tokens.css).
   La vraie page reste floutée derrière (blur sur .prem-gated > *), le scrim l'assombrit uniformément. */
.prem-gate-screen { position: fixed; inset: 0; z-index: 1050; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: var(--scrim-bg); -webkit-backdrop-filter: blur(var(--scrim-blur)); backdrop-filter: blur(var(--scrim-blur)); }
.prem-gate-screen[hidden] { display: none; }
/* Croix pour sortir : ancrée sur la CARTE popup (pas l'overlay), coin haut-droit. */
.prem-gate-x { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 4; width: 1.8rem; height: 1.8rem;
  border-radius: 50%; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary);
  cursor: pointer; font-size: 0.95rem; line-height: 1; display: flex; align-items: center; justify-content: center; }
.prem-gate-x:hover { background: var(--bg-secondary); }

/* Réutilise .dlg / .dlg-panel (07-dialogs.css) + tokens. Dégradé repris du logo (diagonal),
   or = couleur Premium. */
:root { --logo-grad: linear-gradient(135deg, #2949e4, #7c3aed, #f97316, #facc15); --prem-gold: #f5c518; }

/* Badge Premium (pilule dégradée) + étoile sur les onglets. */
/* Marqueurs Premium (pastille, icône, tag) = JAUNE. Le dégradé est réservé aux CTA premium. */
.prem-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-title); font-weight: 700;
  font-size: 0.64rem; letter-spacing: 0.05em; text-transform: uppercase; color: #1a1205; background: var(--prem-gold);
  padding: 0.22rem 0.6rem; border-radius: var(--radius-pill); }
/* Étoile Premium : petite étoile OR pleine (sans fond), en notif coin haut-droit de l'onglet. */
[data-prem-badge] { position: relative; }
.prem-star { position: absolute; margin: 0; line-height: 1; font-size: 0.7rem; color: var(--prem-gold);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.35); pointer-events: none;
  font-variant-emoji: text; } /* force le rendu texte du ✦ (pas emoji) -> métriques stables cross-device */
/* Placement UNIFORME inline (à côté du libellé, légèrement remonté) : desktop nav + boutons
   "nouveau bac" (switcher desktop, sheet mobile). Mêmes valeurs pour un rendu cohérent. */
.topnav .navlink .prem-star,
.tanksw-add .prem-star,
.sheet-add .prem-star { position: static; margin-inline-start: 0.3rem; vertical-align: middle; font-size: 0.72rem; line-height: 1; }
/* Étoile ✦ en badge coin haut-droit EXTÉRIEUR (position:absolute héritée de .prem-star ci-dessus),
   partagée par 4 cibles au même placement : le "+" d'ajout de bac (.tank-add-inline), le bouton
   "Reproduction" (#hab-repro-btn), "Ajouter une photo" (.photo-add-btn) et le "+ Nouveau bac" de
   l'aperçu Mes bacs (.mb-add). Leurs conteneurs sont position:relative dans leurs fichiers respectifs
   (06-tanks.css pour .tank-add-inline et .mb-add, [data-prem-badge] ci-dessus, 16-photos.css) et sans
   overflow:hidden, donc le débord ne clippe pas. */
.tank-add-inline .prem-star,
#hab-repro-btn .prem-star,
.photo-add-btn .prem-star,
.mb-add .prem-star { top: -4px; inset-inline-end: -4px; font-size: 0.62rem; }
/* Bottom nav (mobile) : EXACTEMENT au même endroit que la notif d'alertes des bacs (.botnav .nav-badge). */
.botnav .navlink .prem-star { top: -3px; inset-inline-end: 4px; font-size: 0.66rem; }
/* Options de rappel Premium (1 j / 3 j) : étoile inline dans le segment. */
.seg .prem-star { position: static; margin-inline-start: 0.15rem; font-size: 0.62rem; }

/* Carte "feature verrouillée" : enfant normal, centrée par le flex de l'overlay (pas de transform). */
.prem-locked { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.7rem;
  padding: 1.6rem 1.4rem; width: min(22rem, calc(100vw - 2rem)); background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.prem-locked-ic { width: 3.4rem; height: 3.4rem; display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; border-radius: var(--radius-md); background: var(--bg-secondary); border: 1px solid var(--border); }
.prem-locked-title { font-family: var(--font-title); margin: 0.1rem 0 0; font-size: 1.2rem; }
.prem-locked-desc { margin: 0; color: var(--text-secondary); font-size: 0.92rem; line-height: 1.5; max-width: 30ch; }

/* Bouton Premium (dégradé diagonal du logo). */
.prem-unlock, .prem-cta { font-family: var(--font-title); font-weight: 600; font-size: 0.95rem; border: none;
  border-radius: var(--radius-md); padding: 0.75rem 1.4rem; cursor: pointer; color: #fff; background: var(--logo-grad); }
.prem-unlock:hover, .prem-cta:hover { filter: brightness(1.06); }
/* Reflet "shine" OR au survol — premium seulement (jamais les CTA bleus .pill-accent). */
.prem-unlock, .prem-cta { position: relative; overflow: hidden; }
.prem-unlock::after, .prem-cta::after { content: ""; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%); transform: translateX(-150%) skewX(-20deg); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .prem-unlock:hover::after, .prem-cta:hover::after { animation: prem-shine 1.2s ease; } }
/* transform (composité GPU) plutôt que left, pour un balayage fluide sans reflow. */
@keyframes prem-shine { from { transform: translateX(-150%) skewX(-20deg); } to { transform: translateX(250%) skewX(-20deg); } }
.prem-cta { width: 100%; margin: 0.2rem 0 0; }
.prem-linklater { background: none; border: none; color: var(--text-secondary); font: inherit; font-size: 0.85rem;
  cursor: pointer; padding: 0.2rem; }
.prem-linklater:hover { text-decoration: underline; }
/* Écran verrouillé : « plus tard » sous « Débloquer » resserré pour coller au pied du teaser (gap 0.4rem). */
.prem-locked .prem-linklater { margin-top: -0.2rem; }

/* Shell commun des pop-ups premium (paywall + quota) : colonne flex = CORPS scrollable (.prem-scroll)
   + PIED ÉPINGLÉ (.prem-foot). Le panneau lui-même ne scrolle plus (overflow:hidden) -> le CTA du
   pied reste TOUJOURS visible même si le comparatif + plans dépassent la hauteur (mobile / petit
   écran). Padding 0 : le contenu gère ses marges, le pied gère la safe-area du bas. gap:0 (on annule
   le gap hérité de .dlg-panel) car scroll et pied gèrent leur propre espacement. */
.prem-shell { width: min(560px, calc(100% - 2rem)); max-height: 92vh;
  display: flex; flex-direction: column; gap: 0; overflow: hidden; padding: 0; text-align: center; }
/* Croix des pop-ups premium : elle surplombe le CORPS scrollable (.prem-scroll). Fond sombre + flou
   pour masquer le comparatif qui défile derrière (sinon la colonne Premium ∞/✓ se télescope avec la
   croix, qui était transparente). Scopé à .prem-shell : ne touche PAS la croix en-tête des dialogs
   formulaire. z-index:2 = au-dessus du corps (ceinture-bretelles, elle est déjà absolute sur le panneau).
   --scrim-bg est sombre sur les 2 thèmes, donc on force un glyphe clair (comme la croix de la lightbox
   photo, 16-photos.css) : garder --text-secondary régresserait le contraste en thème clair. */
.prem-shell .dlg-close {
  z-index: 2;
  background: var(--scrim-bg, rgba(0, 0, 0, 0.55));
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* Corps scrollable : occupe la place restante, scrolle si le contenu dépasse. min-height:0 =
   indispensable pour qu'un enfant flex puisse rétrécir sous sa taille de contenu et donc scroller.
   gap 0.9rem = espacement entre sections (head/comparatif/plans/support/reassure), repris de .dlg-panel. */
.prem-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.9rem; }
/* Pied épinglé (hors scroll) : CTA principal (+ « plus tard » si présent) toujours visibles.
   border-top + fond opaque = séparation nette du corps qui scrolle ; padding bas = safe-area iOS. */
.prem-foot { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  padding: 0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--header-border);
  background: var(--bg-card); }
.prem-head { padding: 1.3rem 1.3rem 1rem; background: radial-gradient(120% 90% at 50% 0%, rgba(124, 58, 237, 0.16), transparent 70%); }
.prem-head .prem-badge { margin-bottom: 0.55rem; }
.prem-h-title { display: block; font-family: var(--font-title); font-weight: 700; font-size: 1.3rem; }
.prem-h-tag { display: block; color: var(--text-secondary); font-size: 0.88rem; margin-top: 0.15rem; }

.prem-cmp { width: 100%; border-collapse: collapse; font-size: 0.85rem; border-top: 1px solid var(--header-border); }
.prem-cmp th, .prem-cmp td { padding: 0.55rem 0.9rem; text-align: center; border-bottom: 1px solid var(--header-border); }
.prem-cmp th { font-family: var(--font-title); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; }
.prem-cmp td:first-child, .prem-cmp th:first-child { text-align: start; color: var(--text-primary); }
.prem-cmp thead th:nth-child(2) { color: var(--text-secondary); }
.prem-cmp thead th:nth-child(3) { color: var(--prem-gold); }
.prem-cmp td:nth-child(3) { font-family: var(--font-title); font-weight: 600; background: rgba(245, 197, 24, 0.05); }
.prem-yes { color: var(--ok); font-weight: 700; }
.prem-no { color: var(--text-secondary); opacity: 0.6; }
/* Lignes quota mises en avant (1 bac / 20 photos -> illimité) : c'est le cœur de l'offre. */
.prem-cmp tr.hi td { background: rgba(245, 197, 24, 0.14); font-weight: 700; }
.prem-cmp tr.hi td:first-child { color: var(--text-primary); }
.prem-cmp tr.hi td:nth-child(2) { color: var(--bad, #ef4444); } /* limite Free bien visible */
.prem-cmp tr.hi td:nth-child(3) { color: var(--prem-gold); font-size: 1.35rem; line-height: 1; } /* illimité */

.prem-plans { display: flex; flex-direction: column; gap: 0.9rem; padding: 1rem 0.9rem 0.4rem; }
.prem-plan { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.7rem 0.9rem; cursor: pointer;
  background: transparent; color: var(--text-primary); text-align: start; }
.prem-plan.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-muted); }
/* Carte RECOMMANDÉE (annuel) : bordure OR, cohérente avec son badge OR, y compris sélectionnée
   (l'or prime sur le bleu de sélection pour cette carte ; les autres restent bleues si sélectionnées). */
.prem-plan.is-reco-card { border-color: var(--prem-gold); }
.prem-plan.is-reco-card.sel { border-color: var(--prem-gold); box-shadow: 0 0 0 2px rgba(245, 197, 24, 0.3); }
.prem-plan-l { display: flex; flex-direction: column; }
.prem-plan-name { font-family: var(--font-title); font-weight: 600; font-size: 0.95rem; }
.prem-plan-sub { color: var(--text-secondary); font-size: 0.76rem; margin-top: 0.05rem; }
.prem-plan-price { font-family: var(--font-title); font-weight: 700; font-size: 1rem; white-space: nowrap; }
.prem-plan-per { font-weight: 400; color: var(--text-secondary); font-size: 0.72rem; }
.prem-tag { position: absolute; top: -0.55rem; inset-inline-start: 0.9rem; font-size: 0.6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; padding: 0.1rem 0.5rem; border-radius: var(--radius-pill); }
.prem-tag.pop { color: #fff; background: var(--accent); }
.prem-tag.life { color: #1a1205; background: var(--prem-gold); }
/* Badge de plan PARTAGÉ landing + paywall (ce fichier est chargé par les deux). Positionné en haut-gauche
   de la carte (position:relative sur .lp-plan / .prem-plan). « Recommandé » = BLEU plein (couleur de marque),
   « Deal / -55% » = OR plein écriture noire (lisible, ne vibre pas). Le dégradé reste RÉSERVÉ au CTA.
   Un seul endroit à changer -> landing et paywall bougent ensemble. */
.plan-badge { position: absolute; top: -0.6rem; inset-inline-start: 0.9rem; display: inline-flex; align-items: center;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; border-radius: var(--radius-pill); padding: 0.16rem 0.6rem; z-index: 1; }
.plan-badge.is-reco { color: #1a1205; background: var(--prem-gold); }  /* Recommandé = OR (premium) */
.plan-badge.is-deal { color: #fff; background: var(--accent); }        /* Deal -55% = BLEU (accent) */
/* Paywall = liste VERTICALE : le haut est le point focal -> annuel reste 1er (ordre DOM) partout, desktop
   comme mobile. Le « recommandé au milieu » ne vaut que pour la landing (grille 3 colonnes horizontale). */
/* Lifetime en promo dans le paywall : prix régulier barré en gris avant le prix courant. */
.prem-plan-old { color: var(--text-secondary); text-decoration: line-through; font-weight: 600; font-size: 0.82rem; }

/* CTA dans le pied : pleine largeur du pied (les 0.9rem de padding latéral donnent le même retrait
   qu'avant). margin 0 : l'espacement vertical est géré par le padding/gap du pied. */
.prem-foot .prem-cta { width: 100%; margin: 0; }
.prem-support { padding: 0.5rem 0.9rem 0.2rem; color: var(--prem-gold); font-family: var(--font-title); font-weight: 600; font-size: 0.82rem; }
.prem-reassure { padding: 0 0.9rem; color: var(--text-secondary); font-size: 0.73rem; line-height: 1.4; }

/* Pop-up quota : teaser feature (emoji/titre/desc) centré dans le shell commun. Réutilise
   .prem-locked-ic/.prem-locked-title/.prem-locked-desc (mêmes que l'écran verrouillé). */
.prem-teaser { display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  padding: 1.6rem 1.3rem 0.2rem; text-align: center; }

/* Toggle admin (dev) dans le header : visible uniquement pour les comptes admin (JS). */
.admin-toggle { font-family: var(--font-title); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.05em;
  text-transform: uppercase; cursor: pointer; border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 0.24rem 0.6rem; background: var(--bg-secondary); color: var(--text-secondary); line-height: 1; }
.admin-toggle.is-prem { border-color: transparent; color: #1a1205; background: var(--prem-gold); }
.admin-toggle[hidden] { display: none; }

/* Statut du plan dans le footer du drawer (V4). Premium = icône dorée + libellé + date ; Free = features + CTA dégradé. */
.plan-status { margin: 0; }
.plan-status.prem { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.plan-ic-gold { width: 30px; height: 30px; border-radius: 8px; background: var(--prem-gold); color: #1a1205;
  display: flex; align-items: center; justify-content: center; font-size: 0.95rem; flex: 0 0 auto; }
.plan-body { min-width: 0; }
.plan-t { font-family: var(--font-title); font-weight: 700; font-size: 0.82rem; }
.plan-d { color: var(--text-secondary); font-size: 0.72rem; margin-top: 0.05rem; line-height: 1.3; }
.plan-status.free { display: flex; flex-direction: column; gap: 0.55rem; }
.plan-cta-d { color: var(--text-secondary); font-size: 0.75rem; line-height: 1.35; }
.plan-status.free .plan-cta { margin: 0; padding: 0.55rem 0.7rem; font-size: 0.85rem; }