/* ===================================================================
   LA FAÇON DE FAIRE DE 1PARRAINAGE, dans l'univers d'Ascendra.
   -------------------------------------------------------------------
   Demandé par Joris le 23 octobre 2026 : « prends la même façon de faire
   au niveau design que 1parrainage, tout en prenant la même DA que
   Ascendra, et je veux des boutons jolis avec des effets comme
   joris-dce.fr ». Ce fichier se charge APRÈS annuaire.css et le
   complète : ce qu'il redéclare gagne.

   CE QUI VIENT DE 1PARRAINAGE, ce sont des GESTES : la carte en trois
   colonnes (qui parle, l'annonce, le gros bouton), la page de marque
   avec son « offre du moment » et ses deux cadres, filleuls et
   parrains, l'accueil en tuiles de marques. Aucune de leurs couleurs :
   le bleu reste chez eux, l'orange aussi.

   CE QUI VIENT DE JORIS-DCE.FR, c'est la recette des boutons : une
   matière métal, un éclat en haut, une ombre profonde et courte, un
   relief au survol, et un reflet qui balaie une fois. Ici la matière est
   la sève verte d'Ascendra, tokens.css, et un vert vif porte de l'encre.
   =================================================================== */

/* ---------- Les boutons ---------- */

.an-bouton {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 50px; padding: 0 22px; gap: 10px;
  font: 800 1rem/1.2 var(--ff-titre); letter-spacing: -.005em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 10px 22px -14px rgba(4, 22, 11, .45);
  transition: transform var(--mv-court) var(--mv-courbe), filter var(--mv-court) var(--mv-courbe),
    border-color var(--mv-court) var(--mv-courbe), box-shadow var(--mv-court) var(--mv-courbe), background-color var(--mv-court) var(--mv-courbe);
}
.an-bouton:hover { transform: translateY(-2px); border-color: var(--accent-fonce); background: var(--surface); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 16px 28px -14px rgba(4, 22, 11, .5); }
.an-bouton:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 6px 14px -10px rgba(4, 22, 11, .4); }

/* Le reflet qui balaie, repris de joris-dce.fr : une bande claire penchée,
   hors du bouton au repos, qui le traverse une fois au survol. Il vit en
   pseudo élément SOUS le texte, isolé par z-index négatif, donc il ne
   touche jamais à la lisibilité. */
.an-bouton::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 30%; z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: translateX(-140%) skewX(-18deg); pointer-events: none;
}
.an-bouton:hover::after, .an-bouton:focus-visible::after { animation: an-reflet .7s var(--mv-courbe) 1; }
@keyframes an-reflet { to { transform: translateX(480%) skewX(-18deg); } }

.an-bouton--plein, .an .an-bouton--plein {
  color: var(--on-accent); border: 1px solid var(--matiere-line);
  background-color: var(--accent); background-image: var(--matiere-fond);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .32) inset, 0 14px 28px -16px rgba(4, 22, 11, .7);
}
.an-bouton--plein:hover { filter: brightness(1.06); background-color: var(--accent); background-image: var(--matiere-fond); border-color: var(--matiere-line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 18px 30px -16px rgba(4, 22, 11, .75); }
.an-bouton--plein::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); }
.an-bouton--plein svg { width: 20px; height: 20px; }

/* Sur l'encre de l'ouverture, un bouton clair à côté du bouton plein. */
.an-bouton--clair, .an-ouverture .an-bouton--clair { background: rgba(255, 255, 255, .08); border-color: rgba(190, 211, 201, .45); color: #f5f7f6; box-shadow: none; }
.an-bouton--clair:hover, .an-ouverture .an-bouton--clair:hover { background: rgba(255, 255, 255, .14); border-color: #8ff2bc; }
.an-ouverture-boutons { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 0; }
.an-ouverture .an-bouton--plein { box-shadow: 0 1px 0 rgba(255, 255, 255, .32) inset, 0 16px 32px -14px rgba(85, 230, 149, .55); }

.an-copier { transition: background-color var(--mv-court) var(--mv-courbe), color var(--mv-court) var(--mv-courbe); }
.an-copier:hover { background: var(--accent-fonce); color: var(--on-accent-fonce); }

.an-paquet { position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 10px 22px -16px rgba(4, 22, 11, .45); }
.an-paquet::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 30%; z-index: -1; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); transform: translateX(-140%) skewX(-18deg); pointer-events: none; }
.an-paquet:hover::after { animation: an-reflet .7s var(--mv-courbe) 1; }

/* ---------- La carte en trois colonnes ---------- */

.an-carte {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "qui" "corps" "action";
  gap: 14px; padding: clamp(16px, 2.2vw, 22px);
}
.an-carte-qui { grid-area: qui; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "avatar nom" "avatar niveau" "avatar profil"; column-gap: 12px; row-gap: 2px; align-items: center; min-width: 0; }
.an-carte-qui .an-avatar { grid-area: avatar; width: 64px; height: 64px; font-size: 1.4rem; }
.an-carte-qui .an-avatar--grand img:not(:only-child) { width: 30px; height: 30px; right: -8px; bottom: -8px; }
.an-carte-qui .an-pseudo { grid-area: nom; padding-block: 11px; margin-block: -11px; font-size: 1.1rem; }
.an-carte-niveau { grid-area: niveau; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 14px; }
.an-carte-niveau svg { width: 15px; height: 15px; color: var(--accent-ink); }
.an-carte-lien-profil { grid-area: profil; justify-self: start; color: var(--accent-ink); font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent-line); padding-block: 12px; margin-block: -12px; }
.an-carte-lien-profil:hover { color: var(--text); }
.an-carte-corps { grid-area: corps; display: grid; gap: 10px; min-width: 0; }
.an-carte-action { grid-area: action; display: grid; }
.an-carte-action .an-profite { width: 100%; min-height: 54px; }
.an-carte-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; color: var(--faint); font-size: 14px; }
.an-carte-meta svg { width: 15px; height: 15px; }
.an-carte-boost { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-ink); font-weight: 800; }
.an-carte-boost svg { color: var(--accent-ink); }
.an-carte-chip { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); font-weight: 700; text-decoration: none; }
.an-carte-chip:hover { border-color: var(--accent-line); }
.an-carte--tete { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line), var(--shadow-sm); background: linear-gradient(180deg, var(--accent-wash), transparent 40%), var(--surface); }
.an-carte--ascendra { border-color: var(--accent-line); }
.an-avatar--logo { background: #08100e; }
.an-avatar--logo > img:only-child { position: static; width: 40px; height: 40px; filter: none; }

@media (min-width: 760px) {
  .an-carte { grid-template-columns: 150px minmax(0, 1fr) 190px; grid-template-areas: "qui corps action"; column-gap: 22px; align-items: center; }
  .an-carte-qui { grid-template-columns: minmax(0, 1fr); grid-template-areas: "avatar" "nom" "niveau" "profil"; justify-items: center; text-align: center; row-gap: 4px; }
  .an-carte-qui .an-avatar { width: 72px; height: 72px; font-size: 1.6rem; }
  .an-carte-qui .an-pseudo { max-width: 150px; }
  .an-carte-lien-profil { justify-self: center; }
  .an-carte-action { align-self: center; }
}

/* ---------- La page de marque ---------- */

.an-page-corps--une { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "liste" !important; max-width: 1020px; }
.an-page-corps--une .an-liste-zone { gap: 26px; }
.an-page-corps--une .an-pile { gap: 14px; }
.an-liste-tete { display: grid; gap: 6px; }
.an-liste-tete .an-section-titre { font-size: 1.4rem; text-transform: uppercase; letter-spacing: .02em; }

.an-qui-est { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.an-qui-est-logo { display: grid; justify-items: center; gap: 8px; padding: 14px; border-radius: var(--angle); border: 1px solid var(--line); background: var(--surface-2); }
.an-qui-est-logo img { width: 72px; height: 72px; object-fit: contain; border-radius: var(--angle-objet); }
.an-qui-est-logo a { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-ink); font-weight: 700; font-size: 14px; text-decoration: none; padding-block: 12px; margin-block: -12px; }
.an-qui-est-logo a svg { width: 15px; height: 15px; }
.an-qui-est h2 { margin: 0 0 8px; }
.an-qui-est p { margin: 0; color: var(--text); line-height: 1.6; }
@media (max-width: 639px) { .an-qui-est-logo { grid-template-columns: 56px minmax(0, 1fr); justify-items: start; align-items: center; column-gap: 14px; } .an-qui-est-logo img { width: 56px; height: 56px; } }
@media (min-width: 640px) { .an-qui-est { grid-template-columns: 160px minmax(0, 1fr); gap: 24px; } }

.an-offre { position: relative; margin-top: 10px; padding: clamp(26px, 3vw, 34px) clamp(16px, 2.4vw, 26px) clamp(18px, 2.4vw, 26px); border-radius: var(--angle); border: 1px solid var(--accent-line); background: var(--surface); box-shadow: var(--shadow); }
/* Le ruban « Offre du moment », à cheval sur le bord haut, comme chez eux :
   en sève, c'est l'un des deux emplois de la matière sur cette page avec le
   montant. Les boutons pleins, eux, la prennent aussi, et c'est voulu par
   Joris : ses boutons doivent se voir. */
.an-offre-ruban { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); margin: 0; padding: 7px 18px; border-radius: var(--angle-pilule);
  background-color: var(--accent); background-image: var(--matiere-fond); color: var(--on-accent); border: 1px solid var(--matiere-line);
  font: 800 14px/1.2 var(--ff-texte); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 8px 18px -10px rgba(4, 22, 11, .6); }
.an-offre-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; color: var(--muted); font-size: 14px; }
.an-offre-compte { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text); }
.an-offre-compte svg { width: 16px; height: 16px; color: var(--accent-ink); }
.an-note { display: inline-flex; align-items: center; gap: 8px; }
.an-note b { color: var(--text); }
.an-etoiles { position: relative; display: inline-block; font-size: 1.05rem; line-height: 1; letter-spacing: .1em; color: var(--etoile-vide); }
.an-etoiles-pleines { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--etoile); }
.an-offre-titre { margin: 16px 0 0; text-align: center; font: 800 clamp(1.25rem, 3.2vw, 1.7rem)/1.25 var(--ff-titre); letter-spacing: -.015em; color: var(--text); text-wrap: balance; }
.an-offre-titre .en-seve { font-size: 1.15em; }
.an-offre-deux { display: grid; gap: 14px; margin-top: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .an-offre-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.an-cadre { position: relative; display: grid; gap: 10px; align-content: start; padding: 18px 18px 18px; border-radius: var(--angle); border: 1px solid var(--line); background: var(--surface); min-width: 0; }
.an-cadre::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; border-radius: var(--angle) var(--angle) 0 0; background: var(--accent); }
.an-cadre--parrains::before { background: var(--line-strong); }
.an-cadre h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: 800 14px/1.3 var(--ff-texte); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.an-cadre--parrains h3 { color: var(--muted); }
.an-cadre h3 svg { width: 18px; height: 18px; }
.an-cadre p { margin: 0; color: var(--text); line-height: 1.55; }
.an-cadre-gain strong { font-size: 1.15rem; color: var(--accent-ink); }
.an-cadre-bonus { padding: 10px 12px; border-radius: var(--angle); background: var(--accent-wash); border: 1px dashed var(--accent-line); font-size: .95rem; }
.an-cadre-etapes { margin: 0; padding: 0 0 0 20px; display: grid; gap: 6px; color: var(--text); line-height: 1.5; }
.an-cadre-etapes li::marker { color: var(--accent-ink); font-weight: 800; }
.an-cadre-risque { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--angle); background: var(--warn-wash); border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent); color: var(--warn); font-size: 14px; font-weight: 600; }
.an-cadre-risque svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; }
.an-cadre-reco { color: var(--muted); font-size: .95rem; }
.an-cadre .an-bouton { margin-top: 4px; }

/* ---------- L'accueil ---------- */

.an-tuiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.an-tuile { display: grid; justify-items: center; gap: 6px; height: 100%; padding: 16px 10px 14px; text-align: center; text-decoration: none; color: var(--text);
  border-radius: var(--angle); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm);
  transition: transform var(--mv-court) var(--mv-courbe), border-color var(--mv-court) var(--mv-courbe), box-shadow var(--mv-court) var(--mv-courbe); }
.an-tuile:hover { transform: translateY(-3px); border-color: var(--accent-line); box-shadow: var(--shadow); }
.an-tuile:focus-visible { outline: 3px solid var(--accent-fonce); outline-offset: 2px; }
.an-tuile-logo { display: grid; place-items: center; width: 56px; height: 56px; padding: 6px; border-radius: var(--angle-objet); background: var(--surface-2); border: 1px solid var(--line); font: 800 1.1rem var(--ff-titre); color: var(--muted); }
.an-tuile-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.an-tuile-nom { font: 800 .95rem/1.25 var(--ff-titre); color: var(--text); overflow-wrap: anywhere; }
.an-tuile-gain { font: 800 1.05rem/1.2 var(--ff-titre); color: var(--accent-ink); overflow-wrap: anywhere; }
.an-tuile-gain--vide { color: var(--faint); font-weight: 600; font-size: .9rem; }
.an-tuile-parrains { color: var(--faint); font-size: 14px; line-height: 1.3; }
.an-comment h2 { margin-bottom: 14px; }
.an-pas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.an-pas li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; color: var(--text); line-height: 1.55; }
.an-pas li i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font: 800 1.05rem var(--ff-titre); font-style: normal;
  background-color: var(--accent); background-image: var(--matiere-fond); color: var(--on-accent); border: 1px solid var(--matiere-line); }
@media (min-width: 760px) { .an-pas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .an-pas li { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } }
.an-pas strong { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .an-bouton:hover::after, .an-paquet:hover::after, .an-bouton:focus-visible::after { animation: none; }
  .an-bouton, .an-tuile, .an-paquet { transition: none; }
}
@media (forced-colors: active) { .an-bouton::after, .an-paquet::after { display: none; } .an-pas li i, .an-offre-ruban { background: Highlight; color: HighlightText; } }