/* ============================================================================
   OFFRES · règles reprises TELLES QUELLES de abonnement.html (extraction automatique).
   But : garder exactement les cartes de prix que tu connais, icônes comprises, sans
   les redessiner. Ce fichier ne sert qu'à la page de refonte.
   Généré le 2026-09-12 · 104 règles.
   ============================================================================ */

/* Corps de page en Inter. Titres en Sora (police du site de référence Fraggell), gras serré. */
.ab-wrap,.ab-wrap p,.ab-lead,.ab-punch,.ab-pull,.cmp-punch,.cmp-note,.cmp-feat,.cmp-tbl,.ab-faq,.ab-anchor,.ab-note,.ab-band p{font-family:'Inter','Instrument Sans','Geist',system-ui,sans-serif;}
/* Les trois boutons occupent toute la largeur de leur carte et montent a 60 px :
   il restait de l'espace mort de chaque cote, et un bouton qui ne remplit pas sa
   carte se lit comme une option, pas comme l'action de la carte. */
.ab-btn{display:flex;width:100%;justify-content:center;align-items:center;gap:9px;border:0;border-radius:14px;min-height:60px;padding:0 22px;font-family:inherit;font-weight:800;font-size:1.06rem;line-height:1.15;text-align:center;white-space:nowrap;cursor:pointer;text-decoration:none;transition:filter .15s,transform .15s,box-shadow .15s;}
.ab-btn.gold{color:#2A1D02;background:repeating-linear-gradient(94deg,rgba(255,255,255,.05) 0 1px,rgba(90,60,10,.05) 1px 2px,transparent 2px 6px),radial-gradient(120% 84% at 22% 8%,rgba(255,255,255,.6),transparent 46%),linear-gradient(180deg,#FFF3C4 0%,#F1D47E 32%,#D5AD50 66%,#A97827 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -3px 6px rgba(120,80,20,.32),0 0 0 1px rgba(169,120,39,.55),0 12px 34px -10px rgba(0,0,0,.55),0 4px 12px rgba(0,0,0,.28);transition:transform .32s cubic-bezier(.2,.7,.2,1),box-shadow .32s ease,filter .32s ease;}
.ab-btn.gold:hover{transform:translateY(-2px);filter:brightness(1.09) saturate(1.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.72),inset 0 -3px 6px rgba(120,80,20,.3),0 0 0 1px rgba(169,120,39,.72),0 18px 44px -10px rgba(0,0,0,.62),0 4px 12px rgba(0,0,0,.28);}
.ab-btn.gold:active{transform:translateY(0);box-shadow:inset 0 2px 5px rgba(120,80,20,.4),0 0 0 1px rgba(169,120,39,.6),0 6px 18px -8px rgba(0,0,0,.5);}
.ab-btn.gold:focus-visible{outline:2px solid #FFF3C4;outline-offset:3px;}
/* ENCRE VERROUILLEE. `.rf a:hover{color:var(--c-text)}` pese (0,2,1) contre (0,2,0)
   pour `.ab-btn.gold` : au survol le libelle passait en #F0F0F0, clair sur or.
   Les cinq etats declarent la meme encre presque noire, donc seul le FOND
   (luminosite, halo, montee de 2 px) signale le survol. */
.rf .ab-btn.gold,
.rf .ab-btn.gold:link,
.rf .ab-btn.gold:visited,
.rf .ab-btn.gold:hover,
.rf .ab-btn.gold:focus-visible,
.rf .ab-btn.gold:active{color:#2A1D02;}
.rf .ab-btn.gold svg{stroke:currentColor;}
.ab-btn.ghost{color:#FFFFFF;background:rgba(126,157,255,.10);border:1px solid rgba(255,255,255,.20);}
.ab-btn:hover{filter:brightness(1.05);transform:translateY(-2px);}
.ab-btn:active{transform:translateY(0) scale(.99);}
.ab-btn:focus-visible,
.ab-demo-tab:focus-visible,
.ab-cf-nav:focus-visible,
.ab-cf-dots button:focus-visible,
.ab-3col button:focus-visible,
.ab-faq summary:focus-visible,
.dm-embed-open:focus-visible,
.dm-embed-unlock:focus-visible,
.dm-gate-cta:focus-visible,
.dm-gate-more:focus-visible{
  outline:3px solid #FFFFFF;
  outline-offset:4px;
}
.ab-btn.gold:focus-visible{
  outline-color:#FFF4C7;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -2px 3px rgba(150,100,25,.32),0 0 0 2px #2A1D02,0 0 0 5px #FFF4C7,0 0 28px rgba(250,217,127,.7);
}
.ab-note{font-size:.86rem;color:rgba(255,255,255,.5);margin-top:8px;}
.ab-eq .was{color:#8A93A6;text-decoration:line-through;text-decoration-color:rgba(255,155,155,.7);text-decoration-thickness:2px;}
.ab-note{margin:12px 0 0;color:#8A93A6;font-size:.8rem;text-align:center;line-height:1.5;}
.ab-price li .li-sub{display:block;color:#8A93A6;font-size:.86em;margin-top:2px;}
.ab-badge{white-space:nowrap;}
.ab-pct{display:inline-block;margin-left:8px;padding:3px 9px;border-radius:999px;font-family:'Instrument Sans','Geist',Inter,sans-serif;font-size:.72rem;font-weight:800;letter-spacing:.04em;color:#7BE6AC;background:rgba(116,230,172,.12);border:1px solid rgba(116,230,172,.35);vertical-align:middle;}
.ab-anchor{max-width:780px;margin:26px auto 0;padding:16px 20px;border:1px solid rgba(255,255,255,.11);border-left:3px solid #C9A961;border-radius:12px;background:rgba(16,26,56,.5);font-size:1rem;color:rgba(255,255,255,.8);line-height:1.65;}
.ab-anchor b{color:#FFFFFF;}
.ab-badge-spend{display:inline-block;padding:5px 12px;border-radius:999px;background:rgba(201,169,97,.14);border:1px solid rgba(201,169,97,.5);color:#F6E4A8;font-size:.78rem;font-weight:700;}
.ab-badge-reach{display:inline-block;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.25);color:rgba(255,255,255,.75);font-size:.78rem;font-weight:700;}
.ab-badge-ever{display:inline-block;padding:4px 11px;border-radius:999px;border:1px solid rgba(201,169,97,.55);background:rgba(201,169,97,.13);color:#F6E4A8;font-family:'Geist Mono','Geist',monospace;font-size:.66rem;font-weight:600;letter-spacing:.12em;}
.ab-badge-vague{display:inline-block;padding:4px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.06);color:rgba(255,255,255,.85);font-family:'Geist Mono','Geist',monospace;font-size:.66rem;font-weight:600;letter-spacing:.12em;}
.ab-cta-center .ab-btn{padding:17px 44px;font-size:1.06rem;}
/* Encadre a vie facon Pulsor */
.ab-scarce{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.12);border-radius:0;padding:26px 28px;position:relative;}
.ab-kbar2{font-family:'Geist Mono','Geist',monospace;font-size:.82rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#F6E4A8;margin-bottom:14px;text-align:center;}
.ab-krule2{position:relative;height:12px;margin:0 auto 22px;}
.ab-krule2::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,169,97,.55) 28%,rgba(201,169,97,.55) 72%,transparent);}
.ab-krule2::after{content:"";position:absolute;top:50%;left:50%;width:7px;height:7px;transform:translate(-50%,-50%) rotate(45deg);background:#C9A961;box-shadow:0 0 10px -1px rgba(201,169,97,.7);}
/* Barres cliquables du bloc proto */
.ab-bars>*{position:relative;display:block;width:100%;text-align:left;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);padding:12px 42px 12px 19px;font-size:.92rem;color:rgba(255,255,255,.85);font-family:inherit;line-height:1.5;}
.ab-bars>*::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#F6E4A8;}
.ab-bars button{cursor:pointer;transition:background .15s,border-color .15s,color .15s;}
.ab-bars button::after{content:"\2192";position:absolute;right:13px;top:50%;transform:translateY(-50%);font-weight:800;font-size:1.6rem;color:#C9A961;opacity:.65;transition:opacity .15s;}
.ab-bars button:hover{background:rgba(255,255,255,.09);color:#fff;}
.ab-bars button.on{background:rgba(201,169,97,.14);border-color:rgba(201,169,97,.55);color:#fff;}
.ab-bars button.on::after{opacity:1;}
/* Formules facon TrendTrack : CTA sous le prix, lignes iconisees */
.ab-eq{min-height:48px;display:flex;align-items:center;justify-content:center;}
.ab-prices .ab-btn{margin-top:14px;width:100%;}
.ab-feats{list-style:none;margin:4px 0 0;padding:0;text-align:left;}
/* `align-items:center` aligne l'icone sur le CENTRE du bloc de texte. Sur une
   seule ligne c'est exact ; sur deux, l'icone tombe entre les deux lignes et le
   premier mot passe au-dessus d'elle. On tient donc tout sur une ligne, et la
   regle de centrage redevient juste. */
.ab-feats li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.08);font-size:.95rem;color:rgba(255,255,255,.88);line-height:1.45;}
.ab-feats li:last-child{border-bottom:none;}
.ab-feats .ptxt{min-width:0;}
.ab-feats .ptxt small{display:block;font-size:.83rem;color:rgba(255,255,255,.5);margin-top:2px;}
.ab-feats .ptxt b{color:#fff;}
.pic{flex:none;width:31px;height:31px;border-radius:8px;background:rgba(201,169,97,.12);border:1px solid rgba(201,169,97,.32);display:flex;align-items:center;justify-content:center;}
.pic svg{width:16px;height:16px;stroke:#F6E4A8;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.pok{margin-left:auto;padding-left:10px;color:#7BE6AC;font-weight:800;font-size:1.05rem;flex:none;}
.pko{margin-left:auto;color:rgba(255,255,255,.35);font-weight:800;flex:none;}
.ab-feats li.off{opacity:.5;}
.ab-feats li.off .pic{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.15);}
.ab-feats li.off .pic svg{stroke:rgba(255,255,255,.55);}
.ab-feats li.bonus .pic{background:linear-gradient(180deg,#F6E4A8,#C9A961);border-color:transparent;}
.ab-feats li.bonus .pic svg{stroke:#0B0D12;}
.ab-feats li.bonus .ptxt b{color:#F6E4A8;}
/* Bouton petillant facon TrendTrack : glow neon + balayage lumineux */
.ab-btn.sparkle{position:relative;overflow:hidden;}
.ab-btn.sparkle>span{position:relative;z-index:2;display:inline-flex;align-items:center;}
.ab-btn.sparkle .sk-arw{margin-left:11px;transition:transform .2s;}
.ab-btn.sparkle .sk-arw svg{width:1.55em;height:1.55em;display:block;}
.ab-btn.sparkle:hover .sk-arw{transform:translateX(4px);}
/* Balayage discret : a .8 d'opacite il lavait le bouton en blanc et le libelle
   disparaissait. Le survol se signale par le fond, pas par un voile sur le texte. */
.ab-btn.sparkle::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(110deg,transparent 34%,rgba(255,255,255,.28) 48%,rgba(255,255,255,.16) 54%,transparent 68%);transform:translateX(-120%);pointer-events:none;}
.ab-btn.sparkle:hover::before{animation:skSweep .9s ease;}
@keyframes skSweep{0%{transform:translateX(-120%);}100%{transform:translateX(120%);}}
@media (prefers-reduced-motion:reduce){
  .ab-btn.sparkle,.ab-btn.sparkle::before{animation:none;}
}
.ab-amt b{font-weight:600;letter-spacing:-.02em;}
.ab-btn.ghost{font-family:'Geist Mono','Geist',monospace;text-transform:uppercase;font-size:.78rem;letter-spacing:.1em;}
.ab-proto-p{color:rgba(255,255,255,.72);line-height:1.75;font-size:1rem;margin:0 0 16px;text-align:left;}
.ab-proto-p b{color:#fff;}
.ab-bars{display:flex;flex-direction:column;gap:9px;margin-top:24px;}
.ab-bars div{position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);padding:13px 16px 13px 19px;font-size:1rem;line-height:1.55;color:rgba(255,255,255,.88);}
.ab-bars div::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#F6E4A8;}
/* Bloc rareté à vie */
.ab-scarce{max-width:760px;margin:24px auto 0;background:linear-gradient(180deg,rgba(232,104,60,.10),rgba(12,19,38,.5));border:1px solid rgba(232,104,60,.42);border-radius:14px;padding:18px 20px;text-align:left;font-size:.92rem;line-height:1.62;color:rgba(255,255,255,.8);}
.ab-scarce b{color:#F6E4A8;}
/* Pricing */
/* 1 080 px laissait 340 px par carte : la moitie des intitules passaient a la
   ligne, et un intitule sur deux lignes decale son icone par rapport au texte.
   1 280 px donne 407 px par carte, de quoi tenir chaque intitule sur UNE ligne. */
/* La grille sort du conteneur de page : `.wrap` plafonne a 1 152 px, ce qui ne
   laissait que 367 px par carte. La marge negative symetrique la recentre sur
   la fenetre, sans deplacer le titre ni le chapeau. Le `max-width` interne la
   borne, donc elle ne touche jamais les bords. */
.ab-prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;max-width:1280px;margin:54px auto 0;align-items:stretch;}
/* Base = MENSUEL (entrée sobre, bleu froid) */
.ab-price{position:relative;isolation:isolate;display:flex;flex-direction:column;padding:30px 24px 26px;border-radius:18px;background:radial-gradient(120% 80% at 50% -10%,rgba(229,196,110,.06),transparent 60%),linear-gradient(180deg,#101116,#08090B);border:1px solid rgba(255,255,255,.14);box-shadow:0 1px 0 rgba(234,240,255,.04) inset,0 18px 40px -26px rgba(3,7,20,.9);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,border-color .3s ease;}
/* liseré haut, teinté selon le tier */
.ab-price::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;border-radius:18px 18px 0 0;background:linear-gradient(90deg,transparent,rgba(126,157,255,.6),transparent);opacity:.6;z-index:2;}
.ab-price:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.20);box-shadow:0 1px 0 rgba(234,240,255,.06) inset,0 26px 58px -28px rgba(3,7,20,.95),0 0 40px -18px rgba(59,108,255,.3);}
/* ANNUEL — recommandé : or chaud, surélevé, halo doré */
.ab-price.best{background:radial-gradient(130% 90% at 50% -12%,rgba(229,196,110,.14),transparent 64%),linear-gradient(180deg,#16130b,#0A0906);border-color:rgba(229,196,110,.42);box-shadow:0 1px 0 rgba(246,228,168,.1) inset,0 26px 56px -26px rgba(0,0,0,.92),0 0 44px -18px rgba(229,196,110,.32);}
.ab-price.best::before{background:linear-gradient(90deg,transparent,#C9A961 20%,#F6E4A8 50%,#C9A961 80%,transparent);opacity:1;box-shadow:0 0 14px -2px rgba(246,228,168,.55);}
.ab-price.best:hover{transform:translateY(-4px);border-color:rgba(201,169,97,.72);box-shadow:0 1px 0 rgba(246,228,168,.14) inset,0 32px 66px -28px rgba(3,7,20,.95),0 0 60px -10px rgba(201,169,97,.55);}
/* À VIE — exclusif : cuivre/orange, halo braise */
.ab-price.life{background:linear-gradient(180deg,#101116,#08090B);border-color:rgba(255,255,255,.13);box-shadow:0 1px 0 rgba(234,240,255,.04) inset,0 18px 40px -26px rgba(0,0,0,.9);}
.ab-price.life::before{background:linear-gradient(90deg,transparent,#E8683C 22%,#FFB27A 50%,#E8683C 78%,transparent);opacity:1;box-shadow:0 0 14px -2px rgba(255,178,122,.5);}
.ab-price.life:hover{transform:translateY(-4px);border-color:rgba(232,104,60,.66);box-shadow:0 1px 0 rgba(255,178,122,.13) inset,0 28px 60px -28px rgba(3,7,20,.95),0 0 56px -12px rgba(232,104,60,.5);}
.ab-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);z-index:4;font-family:'Instrument Sans','Geist',Inter,sans-serif;font-size:.78rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#0B0D12;background:linear-gradient(180deg,#F6E4A8,#C9A961);border-radius:999px;padding:7px 16px;white-space:nowrap;box-shadow:0 6px 16px -8px rgba(0,0,0,.7);}
.ab-badge.scarce{background:rgba(20,22,28,.92);color:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.18);box-shadow:0 6px 16px -8px rgba(0,0,0,.7);}
.ab-plan{font-family:'Instrument Sans','Geist',Inter,sans-serif;font-weight:800;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);text-align:center;}
.ab-amt{margin:8px 0 2px;font-family:'Instrument Sans','Geist',Inter,sans-serif;font-weight:800;color:#FFFFFF;text-align:center;}
.ab-amt b{font-size:2.8rem;line-height:1;}
.ab-amt .per{font-size:1rem;color:#9BA7CC;font-weight:700;}
/* Separateur de milliers en boite : immunise contre le creneau negatif du nombre. */
.ab-amt b .mil{display:inline-block;width:.20em;letter-spacing:0;}
.ab-eq{font-size:.86rem;color:#9BA7CC;min-height:1.3em;text-align:center;}
.ab-eq .save{color:#7BE6AC;font-weight:700;}
.ab-div{border:0;height:0;width:100%;background:none;margin:16px 0 2px;}
.ab-price.best .ab-div,.ab-price.life .ab-div{background:none;}
.ab-price ul{list-style:none;margin:16px 0 20px;padding:0;display:flex;flex-direction:column;gap:9px;}
/* Cette regle vise les listes SIMPLES d'une carte (une coche verte, un texte),
   pas la liste a pastilles `.ab-feats`. Les deux selecteurs pesaient pareil et
   celui-ci arrivait apres : il ecrasait le centrage, la taille et l'interligne
   de `.ab-feats li`, et c'est lui qui collait l'intitule au-dessus de son icone.
   `:not(.ab-feats li)` le remet a sa place sans toucher a l'autre liste. */
.ab-price li:not(.ab-feats li){display:flex;gap:9px;align-items:flex-start;font-size:.9rem;color:rgba(255,255,255,.8);line-height:1.4;}
.ab-price li:not(.ab-feats li) svg{flex:0 0 auto;width:17px;height:17px;stroke:#7BE6AC;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;margin-top:1px;}
.ab-price .ab-btn{margin-top:14px;justify-content:center;width:100%;}
.ab-reassure{text-align:center;color:rgba(255,255,255,.5);font-size:.9rem;margin:42px auto 0;max-width:none;display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;}
.js .ab-contrast.reveal .ab-cbox,
.js .ab-zone.reveal .ab-price{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .55s ease,transform .65s cubic-bezier(.22,.61,.36,1);
}
.js .ab-contrast.reveal.in .ab-cbox,
.js .ab-zone.reveal.in .ab-price{opacity:1;transform:none;}
.js .ab-contrast.reveal.in .ab-cbox:nth-child(2),
.js .ab-zone.reveal.in .ab-price:nth-child(2){transition-delay:.1s;}
.js .ab-zone.reveal.in .ab-price:nth-child(3){transition-delay:.2s;}
.ab-copy,.ab-proto-p,.ab-cf-body>p,.ab-faq .a{text-wrap:pretty;}
@media(max-width:900px){
  .ab-prices{grid-template-columns:1fr;max-width:430px;gap:30px;}
  .ab-price.best,.ab-price.best:hover,.ab-price.life:hover,.ab-price:hover{transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .ab-grow-chips span,.js .ab-tools .ab-tool,.js section.reveal>.ab-kicker,.js section.reveal>.ab-title,.js section.reveal>.ab-sub,.js .ab-contrast.reveal .ab-cbox,.js .ab-zone.reveal .ab-price{opacity:1;transform:none;filter:none;transition:none;}
  .ab-tool,.ab-price,.ab-btn{transition:none;}
}

/* Carte annuelle : le rappel de facturation tient sur deux lignes decidees, pas
   sur une phrase qui se coupe la ou la largeur le veut. */
.ab-eq2{display:grid;gap:3px;justify-items:center;}
.ab-eq2 span{display:block;}