/* ArchiXposed, variables et composants de base.
   À coller dans le code personnalisé de Systeme.io ou en tête des mini-applis HTML.
   Polices : https://fonts.google.com/specimen/Geist et https://fonts.google.com/specimen/Rubik */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@500;600;700&family=Rubik:wght@700&display=swap');

:root{
  --ax-cyan:#6CD9EA;          /* la touche allumée, seul accent */
  --ax-cyan-profond:#126B7D;  /* liens, annotations, traits sur clair */
  --ax-encre:#0B1215;         /* texte, fonds sombres */
  --ax-papier:#F5F9FA;        /* fonds clairs */
  --ax-eteinte:#E1E7EA;       /* touche au repos, sur clair */
  --ax-eteinte-sombre:#1E292D;/* touche au repos, sur sombre */
  --ax-champ:#7A8A90;         /* contour des champs (3,6:1) */
  --ax-texte:'Geist',Inter,system-ui,sans-serif;
  --ax-logo:'Rubik',sans-serif;
  /* la touche : biseau net, dessus en creux doux */
  --ax-touche-dessus:radial-gradient(ellipse 62% 58% at 50% 50%,#5CCDDF 0%,#6CD9EA 55%,#8BE4F1 100%);
  --ax-touche-biseau:linear-gradient(180deg,#B4F1F9 0%,#5ACADC 45%,#36A6BA 100%);
  --ax-lueur:0 8px 22px -6px rgba(108,217,234,.85);
}

/* Bouton principal : une touche cyan, lueur dessous, 1 px de course au clic */
.ax-bouton{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 22px;
  border-style:solid;border-color:transparent;border-width:3px 4px 5px;border-radius:10px;
  background:var(--ax-touche-dessus) padding-box,var(--ax-touche-biseau) border-box;
  box-shadow:var(--ax-lueur);font:700 16px var(--ax-texte);color:var(--ax-encre);cursor:pointer;
  transition:transform .1s ease,box-shadow .15s ease}
.ax-bouton:hover{transform:translateY(-1px);box-shadow:0 12px 30px -4px rgba(108,217,234,1)}
.ax-bouton:active{transform:translateY(1px);border-bottom-width:4px;box-shadow:0 2px 6px -2px rgba(108,217,234,.6)}

/* Bouton secondaire : touche éteinte */
.ax-bouton-secondaire{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 22px;
  border-style:solid;border-color:transparent;border-width:3px 4px 5px;border-radius:10px;
  background:linear-gradient(var(--ax-eteinte),var(--ax-eteinte)) padding-box,linear-gradient(180deg,#F7FAFB,#C3CDD2) border-box;
  font:700 16px var(--ax-texte);color:var(--ax-encre);cursor:pointer}

/* Mot allumé dans un titre */
.ax-touche{display:inline-block;padding:.02em .15em .03em;margin:0 .03em;border-radius:.24em;
  border-style:solid;border-color:transparent;border-width:.075em .085em .11em;
  background:var(--ax-touche-dessus) padding-box,var(--ax-touche-biseau) border-box;color:var(--ax-encre)}

/* Étiquette en capitales (annotations, séries) */
.ax-etiquette{font:600 12px var(--ax-texte);letter-spacing:.12em;text-transform:uppercase;color:var(--ax-cyan-profond);font-variant-numeric:tabular-nums}

/* Case de cartouche (encadré, point de vigilance) */
.ax-cartouche{border:1.5px solid var(--ax-encre);background:#fff}
.ax-cartouche>.ax-cartouche-tete{display:flex;border-bottom:1.5px solid var(--ax-encre)}
.ax-cartouche-tete>span{padding:6px 12px;font:600 11px var(--ax-texte);letter-spacing:.12em;color:var(--ax-cyan-profond)}
.ax-cartouche-tete>span+span{margin-left:auto;border-left:1.5px solid var(--ax-encre);color:var(--ax-encre)}
.ax-cartouche>.ax-cartouche-corps{padding:10px 14px}

/* Champs de formulaire */
.ax-champ{height:46px;padding:0 14px;border:1.5px solid var(--ax-champ);background:#fff;font:500 16px var(--ax-texte);color:var(--ax-encre)}
.ax-champ:focus{outline:none;border:2px solid var(--ax-cyan-profond)}