/* ═══ LE LANGAGE CTA — SOURCE UNIQUE (extraction du 27 août 2026, feu du
   propriétaire ; le plan de phase 4 la prévoyait dès l'origine).
   Toute surface qui pose un bouton de l'univers charge CE fichier :
   le teasing, /soutenir (le tiroir n'injecte plus que sa feuille propre),
   /compte, et le banc. Structure : base .ctac (cadre, fond, texture madras,
   lumière, texte, griffures, rangée, barre wide) · les QUATRE néons madras
   (vert confirmation et transaction, bleu rejoindre et participer, or compte et identité et par défaut, rouge créer et mener — règle de la charte du 20 septembre 2026) · l'attente
   (la comète, le cyclone et ses matières) · les LED.
   LE MADRAS ET L'ATTENTE (direction artistique, 24 août 2026) : la texture
   vit cachée au repos, se révèle au survol, à l'appui ET PENDANT L'ATTENTE
   — jamais un comportement réservé au seul survol de la souris.
   Lueurs en box-shadow, jamais en filter (garde : outils/recette/lueurs.mjs). ═══ */

.ctac-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:100%;margin:0 auto}
.ctac{--cut:10px;position:relative;width:100%;min-width:0;min-height:126px;display:flex;align-items:center;justify-content:center;gap:15px;
  padding:18px 20px;cursor:pointer;text-decoration:none;background:transparent;border:none;text-align:left;
  transition:transform .2s ease,filter .3s ease}
.ctac-frame,.ctac-fill,.ctac-tex,.ctac-light{position:absolute;
  border-radius:14px}
.ctac-frame{inset:0;z-index:0}
.ctac-fill{inset:1px;background:linear-gradient(160deg,#0a0d18 0%,#05070f 72%)}
.ctac-tex{inset:1px;opacity:0;transition:opacity .4s ease;pointer-events:none;
  background-size:cover;background-position:center top;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,.5) 52%,rgba(0,0,0,.14) 82%,transparent);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,.5) 52%,rgba(0,0,0,.14) 82%,transparent)}
.ctac-light{inset:1px;opacity:0;transition:opacity .4s ease;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.04) 38%,transparent 62%)}.ctac:active .ctac-tex{opacity:.72}.ctac:active .ctac-light{opacity:1}.ctac:active{transform:translateY(-2px)}
.ctac-tx{position:relative;z-index:2;display:flex;flex-direction:column;gap:6px;min-width:0}
.ctac-tx b{font-family:'Cinzel',var(--serif);font-weight:700;text-transform:uppercase;color:#fff;
  font-size:clamp(13px,3.4vw,19px);line-height:1.22;letter-spacing:.02em;text-shadow:0 1px 6px rgba(0,0,0,.55)}
.ctac-tx em{font-style:normal;font-family:var(--sans);font-size:clamp(11px,2.8vw,14px);font-weight:600}
.ctac-claws{position:absolute;right:14px;bottom:9px;width:46px;height:34px;z-index:2;background:currentColor;
  -webkit-mask:url("/assets/textures/griffure.webp") center/132% 165% no-repeat;mask:url("/assets/textures/griffure.webp") center/132% 165% no-repeat}
.ctac-claws::after{content:"";position:absolute;inset:0;background:currentColor;
  -webkit-mask:inherit;mask:inherit}
/* ---- variante REJOINDRE (opt-in) : bleu — pilotée par l'Apparence CMS (rôle Rejoindre) ---- */
.ctac-join .ctac-frame{background:linear-gradient(180deg,#5a9fe0,#2653a8 58%,#0B3D91);opacity:.7}
.ctac-join .ctac-fill{box-shadow:inset 0 0 26px -8px rgba(46,118,255,.4),inset 0 14px 30px -18px rgba(46,118,255,.5)}
.ctac-join .ctac-tex{background-image:var(--lg-madras,url("/assets/textures/madras-neutral.webp"));background-color:#0B3D91;background-blend-mode:multiply}
.ctac-join .ctac-fill{box-shadow:inset 0 0 26px -8px rgba(46,118,255,.35),0 0 8px rgba(46,118,255,.4),0 6px 18px rgba(0,0,0,.6);transition:box-shadow .3s ease}.ctac-join:active .ctac-fill{box-shadow:inset 0 0 26px -8px rgba(46,118,255,.35),0 0 14px rgba(80,150,255,.7),0 8px 22px rgba(0,0,0,.6)}.ctac-join:active .ctac-frame{opacity:1}
.ctac-join .ctac-tx em{color:#7cc0ff}
.ctac-join .ctac-claws{color:#4da3ff}
.ctac-wide{--cut:7px;grid-column:1 / -1;min-height:58px;justify-content:center;padding:9px 18px;gap:13px}
.ctac-wide .ctac-tx{gap:3px}
.ctac-wide .ctac-tx b{font-size:clamp(14px,3.6vw,18px)}
.ctac-wide .ctac-claws{width:54px;height:40px;right:22px;bottom:auto;top:50%;transform:translateY(-50%)}
@media(max-width:640px){
  .ctac-row{gap:12px}
  .ctac-wide{min-height:54px;padding:8px 14px}
  .ctac-wide .ctac-claws{width:44px;height:32px;right:12px;bottom:auto;top:50%}}

.ctac,.att-vert{--att-vif:47,191,114;--att-clair:122,240,183}
.ctac-pay{--att-vif:47,191,114;--att-clair:122,240,183}
.ctac-join,.att-bleu{--att-vif:46,118,255;--att-clair:124,192,255}
.ctac-login,.att-jaune{--att-vif:214,162,30;--att-clair:246,220,154}
.att-rouge{--att-vif:255,59,22;--att-clair:255,154,134}
.ctac-att{position:absolute;inset:-3px;border-radius:17px;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .12s ease}
.ctac-att i{position:absolute;top:50%;left:50%;width:130%;aspect-ratio:1;transform:translate(-50%,-50%);background:conic-gradient(from 0deg,transparent 0 54%,rgba(var(--att-vif),.45) 70%,rgba(var(--att-clair),.9) 79%,#fff 84%,rgba(var(--att-clair),.9) 89%,rgba(var(--att-vif),.45) 95%,transparent 100%)}
.is-attente .ctac-att{opacity:1;box-shadow:0 0 15px 1px rgba(var(--att-vif),.5),0 0 34px 7px rgba(var(--att-vif),.2)}
.is-attente .ctac-att i{animation:ctacComete .44s linear infinite}
@keyframes ctacComete{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* ALTERNATIVE « le cyclone balaye » (.att-cyclone) : deux coeurs opposes,
   plus rapides, et la matiere du role emportee vers le bouton — feuilles
   au vert, fumee doree au jaune, gouttes d'eau au bleu, gouttes de sang
   au rouge. Marquage : <span class="ctac-balai"><b style="--dx:..;--dy:..;
   --d:..;--a:.."></b>...</span> dans le CTA. */
.att-cyclone .ctac-att i{background:conic-gradient(from 0deg,transparent 0 4%,rgba(var(--att-vif),.4) 12%,rgba(var(--att-clair),.85) 18%,#fff 22%,rgba(var(--att-clair),.85) 26%,rgba(var(--att-vif),.4) 34%,transparent 44%,transparent 54%,rgba(var(--att-vif),.35) 62%,rgba(255,255,255,.9) 70%,rgba(var(--att-vif),.35) 78%,transparent 88%)}
.is-attente.att-cyclone .ctac-att i{animation-duration:.34s}
.ctac-balai{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .12s ease}
.is-attente.att-cyclone .ctac-balai{opacity:1}
.ctac-balai b{position:absolute;left:50%;top:50%;opacity:0}
.is-attente.att-cyclone .ctac-balai b{animation:ctacBalai .62s ease-in infinite;animation-delay:var(--d,0s)}
@keyframes ctacBalai{0%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(0) scale(1)}18%{opacity:.9}100%{opacity:0;transform:translate(calc(-50% + var(--dx) * .34),calc(-50% + var(--dy) * .34)) rotate(220deg) scale(.4)}}
@keyframes ctacFumee{0%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.45)}22%{opacity:.7}100%{opacity:0;transform:translate(calc(-50% + var(--dx) * .28),calc(-50% + var(--dy) * .28)) scale(1.6)}}
@keyframes ctacGoutte{0%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--a,0deg)) scale(1)}18%{opacity:.95}100%{opacity:0;transform:translate(calc(-50% + var(--dx) * .3),calc(-50% + var(--dy) * .3)) rotate(var(--a,0deg)) scale(.55)}}
/* vert : les feuilles d'atoumo de la bibliotheque de l'univers */
.ctac-pay .ctac-balai b,.att-vert .ctac-balai b{width:11px;height:11px;background:linear-gradient(180deg,#eafff4,rgb(var(--att-clair)));-webkit-mask:url(/assets/icones/feuille.svg) center/contain no-repeat;mask:url(/assets/icones/feuille.svg) center/contain no-repeat}
/* jaune : la fumee magique doree — elle enfle et se dissipe, sans tourner */
.ctac-login .ctac-balai b,.att-jaune .ctac-balai b{width:15px;height:15px;border-radius:50%;background:radial-gradient(circle,rgba(var(--att-clair),.9) 0%,rgba(var(--att-vif),.35) 55%,transparent 72%)}
.is-attente.att-cyclone.ctac-login .ctac-balai b,.is-attente.att-cyclone.att-jaune .ctac-balai b{animation-name:ctacFumee}
/* bleu : gouttes d'eau lumineuses — la pointe suit le sens du balayage */
.ctac-join .ctac-balai b,.att-bleu .ctac-balai b{width:7px;height:11px;border-radius:50% 50% 48% 48%/62% 62% 38% 38%;background:linear-gradient(180deg,#fff,rgb(var(--att-clair)));box-shadow:0 0 7px 1px rgba(var(--att-vif),.65)}
/* rouge : gouttes de sang, tres fines */
.att-rouge .ctac-balai b{width:3px;height:12px;border-radius:60% 60% 50% 50%/72% 72% 28% 28%;background:linear-gradient(180deg,rgb(var(--att-clair)),#B00018)}
.is-attente.att-cyclone.ctac-join .ctac-balai b,.is-attente.att-cyclone.att-bleu .ctac-balai b,.is-attente.att-cyclone.att-rouge .ctac-balai b{animation-name:ctacGoutte}
@media(prefers-reduced-motion:reduce){.is-attente .ctac-att i{animation:none;background:radial-gradient(circle,transparent 52%,rgba(var(--att-clair),.5) 72%)}.ctac-balai{display:none}}

/* ── l'accueil unique : la question du genre (icônes en masque — l'encre
   suit l'état), la reconnaissance qui scintille, le filet du code ── */
.cx-etiquette{margin:16px 0 8px;font-family:var(--serif);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--or-soft)}
.cx-etiquette small{display:block;margin-top:3px;font-family:var(--script);font-style:italic;font-size:13px;letter-spacing:0;text-transform:none;color:var(--ink-dim)}
.cx-genres{display:flex;gap:10px}
.cx-genre{flex:1;display:grid;place-items:center;min-height:52px;border-radius:12px;border:1px solid var(--line-soft);background:rgba(7,8,18,.5);color:var(--ink-dim);cursor:pointer;padding:0}
.cx-genre i{display:block;width:26px;height:26px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.cx-genre.is-on{border-color:var(--or-soft);color:var(--or-soft);background:rgba(214,162,30,.12);box-shadow:0 0 10px -2px rgba(232,196,94,.6)}
.cx-reconnu{margin:16px 0 0;padding:12px 14px;border-radius:12px;border:1px solid rgba(246,220,154,.85);background:linear-gradient(180deg,rgba(214,162,30,.18),rgba(214,162,30,.06));font-family:var(--script);font-style:italic;font-size:15.5px;line-height:1.45;color:var(--ink);animation:cxScintille 2.4s ease-in-out infinite;text-align:left}
@keyframes cxScintille{0%,100%{box-shadow:0 0 10px 0 rgba(232,196,94,.35)}50%{box-shadow:0 0 20px 4px rgba(232,196,94,.6)}}
@media(prefers-reduced-motion:reduce){.cx-reconnu{animation:none;box-shadow:0 0 14px 2px rgba(232,196,94,.45)}}
.cx-filet8{display:block;margin:14px auto 0;max-width:34ch;text-align:center;line-height:1.5}
/* le choix des packs, la surprise gardée : pastilles de noms, intention au ⓘ,
   pouvoir et valeur au tap — jamais d'illustration avant l'ouverture */
.cx-pack{position:relative;padding:14px 14px 12px;border-radius:14px;border:1px solid var(--line-soft);background:rgba(7,8,18,.45);margin:0 0 10px;transition:border-color .2s,box-shadow .2s,background .2s;text-align:left;width:100%}
.cx-pack.is-on{border-color:var(--or-soft);box-shadow:0 0 12px -2px rgba(232,196,94,.7);background:rgba(214,162,30,.10)}
.cx-pack-tete{display:flex;align-items:center;gap:10px}
.cx-pack-coche{flex:none;width:20px;height:20px;border-radius:50%;border:1px solid rgba(214,162,30,.6);background:rgba(7,8,18,.6);display:grid;place-items:center}
.cx-pack.is-on .cx-pack-coche::after{content:"";width:10px;height:10px;border-radius:50%;background:linear-gradient(180deg,#f0d27a,#c79422)}
.cx-pack-nom{flex:1;font-family:var(--serif);font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--or-soft)}
.cx-pack-n{font-size:11px;color:var(--ink-dim);text-transform:none;letter-spacing:0}
.cx-pack-info{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid rgba(214,162,30,.45);background:none;color:var(--or-soft);font:600 13px var(--serif);cursor:pointer}
.cx-pack-intention{display:none;margin:10px 0 0;padding:8px 10px;border-left:2px solid var(--or-soft);font-family:var(--script);font-style:italic;font-size:15px;color:rgba(202,189,163,.98)}
.cx-pack.is-info .cx-pack-intention{display:block}
.cx-roles{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cx-role{padding:7px 11px;border-radius:99px;border:1px solid rgba(214,162,30,.35);background:rgba(7,8,18,.5);color:var(--ink);font:600 12px var(--sans);cursor:pointer}
.cx-role.is-on{border-color:var(--or-soft);background:rgba(214,162,30,.14)}
.cx-pouvoir{display:none;margin:8px 0 0;font-size:12.5px;line-height:1.5;color:rgba(202,189,163,.95);text-align:left}
.cx-pouvoir b{color:var(--or-soft);font-weight:600}
.cx-pouvoir i{font-style:normal;color:var(--ink-dim);font-size:11.5px}
.cx-pouvoir.is-on{display:block}
.cx-valeur{margin:10px 0 0;text-align:right;font-size:11px;color:var(--ink-dim)}
.cx-valeur b{color:var(--or-soft);font-weight:600}

/* le madras s'affiche quand la comète tourne — l'œil s'attarde, la texture est là */
.is-attente .ctac-tex{opacity:.72}

/* ── le néon VERT — la confirmation et la transaction (le bouton qui encaisse, tout écran ou courrier qui confirme) ── */
.ctac.is-locked{opacity:.5}
.ctac-pay .ctac-frame{background:linear-gradient(180deg,#5fd2a0,#1d8a5c 58%,#0A4A30);opacity:.75}
.ctac-pay .ctac-fill{box-shadow:inset 0 0 26px -8px rgba(0,170,105,.4),inset 0 14px 30px -18px rgba(0,170,105,.5),0 0 8px rgba(0,195,120,.4),0 6px 18px rgba(0,0,0,.6);transition:box-shadow .3s ease}
.ctac-pay .ctac-tex{background-image:url("/assets/textures/madras-neutral.webp");background-color:#0A7A4D;background-blend-mode:multiply}
.ctac-pay:active .ctac-fill{box-shadow:inset 0 0 26px -8px rgba(0,170,105,.4),inset 0 14px 30px -18px rgba(0,170,105,.5),0 0 14px rgba(90,230,160,.7),0 8px 22px rgba(0,0,0,.6)}
.ctac-pay:active .ctac-frame{opacity:1}
.ctac-pay .ctac-tx em{color:#4ddfa0}
.ctac-pay .ctac-claws{color:#2fbf72}
.ctac-pay .led-dot{background:radial-gradient(circle at 40% 35%,#fff 0%,#eafff4 42%,#a9f0cd 70%,#12A066 100%);animation:ctacPayLed 2.4s ease-in-out infinite}
@keyframes ctacPayLed{0%,100%{box-shadow:0 0 7px 2px rgba(214,255,236,.7),0 0 16px 4px rgba(46,210,135,.4)}50%{box-shadow:0 0 11px 3px rgba(235,255,246,.95),0 0 26px 8px rgba(46,210,135,.7)}}

/* ── la LED — l'objet lumineux commun (bleu Rejoindre par défaut, vert au paiement) ── */
.led-dot{display:block;width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fff 0%,#eaf2ff 42%,#a9c8f0 70%,#1252A0 100%);
  animation:ledPulse 2.8s ease-in-out infinite}
@keyframes ledPulse{
  0%,100%{box-shadow:0 0 7px 2px rgba(214,230,255,.7),0 0 16px 4px rgba(46,118,255,.4)}
  50%{box-shadow:0 0 11px 3px rgba(235,244,255,.95),0 0 26px 8px rgba(46,118,255,.7)}}

/* ── le néon OR — le compte, l'identité (la dorure du SITE : teasing et
   /soutenir, copies identiques). Le module du compte garde SA dorure
   locale (guide du banc — plus claire) : divergence CONNUE, à
   harmoniser un jour sur arbitrage du propriétaire, jamais en douce. ── */
.ctac-login .ctac-frame{background:linear-gradient(180deg,#d8b866,#b3842f 58%,#8a5c14);opacity:.7}
.ctac-login .ctac-fill{box-shadow:inset 0 0 26px -8px rgba(214,162,30,.34),inset 0 14px 30px -18px rgba(216,154,34,.34),0 0 10px rgba(214,162,30,.5),0 6px 18px rgba(0,0,0,.6);transition:box-shadow .3s ease}
.ctac-login .ctac-tex{background-image:url("/assets/textures/madras-neutral.webp");background-color:#d6a21e;background-blend-mode:multiply}.ctac-login:active .ctac-fill{box-shadow:inset 0 0 26px -8px rgba(214,162,30,.34),inset 0 14px 30px -18px rgba(216,154,34,.34),0 0 14px rgba(232,196,94,.7),0 0 22px rgba(214,162,30,.4),0 8px 22px rgba(0,0,0,.6)}.ctac-login:active .ctac-frame{opacity:1}

/* le survol n'existe pas au doigt (doctrine du 24 août — la texture ne
   se révèle jamais par un état que le pouce ne produit pas) : tous les
   survols vivent sous cette garde, comme /soutenir le faisait déjà */
@media(hover:hover){
.ctac:hover .ctac-tex{opacity:.72}
.ctac:hover .ctac-light{opacity:1}
.ctac:hover{transform:translateY(-2px)}
.ctac-join:hover .ctac-fill{box-shadow:inset 0 0 26px -8px rgba(46,118,255,.35),0 0 14px rgba(80,150,255,.7),0 8px 22px rgba(0,0,0,.6)}
.ctac-join:hover .ctac-frame{opacity:1}
.ctac-pay:hover .ctac-fill{box-shadow:inset 0 0 26px -8px rgba(0,170,105,.4),inset 0 14px 30px -18px rgba(0,170,105,.5),0 0 14px rgba(90,230,160,.7),0 8px 22px rgba(0,0,0,.6)}
.ctac-pay:hover .ctac-frame{opacity:1}
.ctac-login:hover .ctac-fill{box-shadow:inset 0 0 26px -8px rgba(214,162,30,.34),inset 0 14px 30px -18px rgba(216,154,34,.34),0 0 14px rgba(232,196,94,.7),0 0 22px rgba(214,162,30,.4),0 8px 22px rgba(0,0,0,.6)}
.ctac-login:hover .ctac-frame{opacity:1}
}