/* Extrait de public/app-v1/accueil.html (styles en ligne de l'app).
   Copie, pas reference. Les blocs @media sont conserves TELS QUELS a la
   fin : les aplatir appliquerait les regles mobiles sur desktop. */
.ac-hello { margin: 6px 0 18px; }
.ac-hello h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.ac-hello p { margin-top: 6px; color: var(--text-muted, #8CA3BF); font-size: 14px; line-height: 1.5; }
.ac-section-label {
      font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .1em;
      text-transform: uppercase; color: var(--text-muted, #8CA3BF);
      margin: 30px 0 12px;
    }
.ac-score-card {
      border-radius: 22px;
      background: var(--bg-card, #0B1220);
      border: 1px solid var(--border-subtle, rgba(73,151,208,.12));
      box-shadow: 0 10px 30px rgba(0,0,0,.28);
      padding: 26px 28px; display: flex; align-items: center; gap: 32px;
    }
.ac-score-gaugecol { display: flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0; }
.ac-score-gauge { position: relative; width: 230px; height: 230px; }
.ac-score-gauge svg { width: 100%; height: 100%; display: block; }
.ac-gauge-fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--text-muted, #828EA3); }
.ac-gauge-fallback strong { font-size: 52px; font-weight: 800; letter-spacing: -.03em; color: var(--text-primary, #F5F7FA); }
.ac-score-sw { flex: 1; min-width: 0; align-self: center; }
.ac-score-sw .coach-an-chips { justify-content: flex-start; }
.ac-zee-say {
      display: flex; gap: 13px; align-items: flex-start;
      padding: 16px 18px; margin-bottom: 16px;
      border-radius: var(--radius-lg, 16px);
      background: linear-gradient(135deg, var(--primary-soft, rgba(73,151,208,.10)), transparent 62%), var(--bg-card, #0B1220);
      border: 1px solid var(--border-subtle, rgba(73,151,208,.14));
    }
.ac-zee-av {
      flex: none; width: 40px; height: 40px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: radial-gradient(circle at 50% 34%, rgba(73,151,208,.42), rgba(20,40,80,.5));
      border: 1px solid var(--border-strong, rgba(125,211,252,.4));
      box-shadow: 0 0 20px rgba(73,151,208,.28);
    }
.ac-zee-av img { width: 28px; height: 28px; object-fit: contain; }
.ac-zee-say b {
      display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em;
      text-transform: uppercase; color: var(--accent-cool, #7DD3FC); margin-bottom: 5px;
    }
.ac-zee-say > div { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary, #B4C0D2); }
.ac-bio-copy {
      position: absolute; top: 18px; right: 18px;
      display: inline-flex; align-items: center; gap: 6px;
      padding: 5px 11px; border-radius: var(--radius-pill, 9999px);
      background: rgba(3,7,18,.55); border: 1px solid var(--border-subtle, rgba(73,151,208,.16));
      color: var(--text-muted, #8CA3BF); font-size: 11.5px; font-weight: 700;
      transition: all 200ms var(--ease-out-expo, cubic-bezier(.16,1,.3,1));
    }
.ac-bio-copy svg { width: 13px; height: 13px; }
.ac-bio-copy em { font-style: normal; }
.ac-locked { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ac-lock-card {
      display: flex; flex-direction: column; align-items: flex-start;
      border-radius: var(--radius-xl, 18px);
      border: 1px solid var(--border-subtle, rgba(73,151,208,.18));
      /* Halo coloré en haut à gauche : la carte a une source de lumière au lieu
         d'être un rectangle plat. C'est ce qui la fait exister sur le fond noir. */
      background:
        radial-gradient(110% 78% at 12% 0%, rgba(73,151,208,.16), transparent 62%),
        linear-gradient(180deg, rgba(255,255,255,.04), transparent 46%),
        var(--bg-card, #0B1220);
      box-shadow: 0 8px 26px rgba(0,0,0,.28);
      padding: 20px 20px 18px; cursor: pointer; position: relative;
      overflow: hidden; isolation: isolate;
      text-align: left; text-decoration: none;
      font-family: inherit; color: var(--text-primary, #E5EEF8);
      transition: transform 260ms var(--ease-out-expo, cubic-bezier(.16,1,.3,1)),
                  border-color 260ms ease, box-shadow 260ms ease;
    }
.ac-lock-card::before {
      /* inset 0, pas -1px : la carte est en `overflow: hidden` pour le reflet,
         un debord serait rogne et le lisere invisible. z-index 2 pour passer
         AU-DESSUS de la bordure de la carte, sinon elle le masque. */
      content: ''; position: absolute; inset: 0; border-radius: inherit;
      padding: 1.5px; pointer-events: none; z-index: 2;
      background: conic-gradient(from var(--ac-neon),
        transparent 0deg, transparent 250deg,
        rgba(73,151,208,.5) 300deg, #7DD3FC 340deg, rgba(125,211,252,.5) 355deg,
        transparent 360deg);
      /* Le masque évide l'intérieur : il ne reste que le trait du contour. */
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
              mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude;
      animation: ac-neon-tour 16s linear infinite;
      opacity: .75; transition: opacity 300ms ease;
    }
.ac-lock-card:hover::before, .ac-lock-card:active::before { opacity: 1; }
.ac-lock-card:nth-child(2)::before { animation-delay: -3.2s; }
.ac-lock-card:nth-child(3)::before { animation-delay: -6.4s; }
.ac-lock-card:nth-child(4)::before { animation-delay: -9.6s; }
.ac-lock-card:nth-child(5)::before { animation-delay: -12.8s; }
.ac-lock-card::after {
      content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
      background: linear-gradient(115deg, transparent 38%, rgba(125,211,252,.10) 50%, transparent 62%);
      transform: translateX(-120%);
      transition: transform 720ms var(--ease-out-expo, cubic-bezier(.16,1,.3,1));
    }
.ac-lock-card > * { position: relative; z-index: 1; }
.ac-lock-card:hover, .ac-lock-card:active {
      border-color: var(--border-strong, rgba(125,211,252,.5));
      transform: translateY(-3px);
      box-shadow: 0 18px 44px rgba(0,0,0,.4), 0 0 54px rgba(73,151,208,.22);
    }
.ac-lock-card:hover::after { transform: translateX(120%); }
.ac-lock-ico {
      width: 46px; height: 46px; border-radius: var(--radius-md, 13px);
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(150deg, rgba(73,151,208,.26), rgba(125,211,252,.10));
      border: 1px solid var(--border-default, rgba(73,151,208,.28));
      color: var(--accent-cool, #7DD3FC);
      box-shadow: 0 0 26px rgba(73,151,208,.22), inset 0 1px 0 rgba(255,255,255,.10);
      transition: all 260ms var(--ease-out-expo, cubic-bezier(.16,1,.3,1));
    }
.ac-lock-ico svg { width: 22px; height: 22px; }
.ac-lock-card:hover .ac-lock-ico, .ac-lock-card:active .ac-lock-ico {
      transform: scale(1.06) rotate(-3deg);
      box-shadow: 0 0 36px rgba(125,211,252,.4), inset 0 1px 0 rgba(255,255,255,.16);
    }
.ac-lock-name { font-weight: 700; font-size: 15.5px; margin-top: 14px; letter-spacing: -.015em; }
.ac-lock-desc { font-size: 12.5px; color: var(--text-muted, #8CA3BF); margin-top: 5px; line-height: 1.5; }
.ac-lock-go {
      display: inline-flex; align-items: center; gap: 7px; margin-top: 15px;
      padding: 7px 14px; border-radius: 999px;
      font-size: 12.5px; font-weight: 700; color: var(--accent-cool, #7DD3FC);
      background: rgba(73,151,208,.12);
      border: 1px solid rgba(125,211,252,.24);
      transition: background 220ms ease, border-color 220ms ease, gap 220ms ease;
    }
.ac-lock-go svg { width: 14px; height: 14px; transition: transform 220ms ease; }
.ac-lock-card:hover .ac-lock-go, .ac-lock-card:active .ac-lock-go {
      background: rgba(73,151,208,.2); border-color: rgba(125,211,252,.5); gap: 10px;
    }
.ac-lock-card:hover .ac-lock-go svg { transform: translateX(2px); }
.ac-lock-pad {
      position: absolute; top: 16px; right: 16px; z-index: 1;
      width: 26px; height: 26px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      background: rgba(3,7,18,.55); border: 1px solid var(--border-subtle, rgba(73,151,208,.16));
      color: var(--text-muted, #8CA3BF);
      transition: color 240ms ease, border-color 240ms ease;
    }
.ac-lock-card:hover .ac-lock-pad { color: var(--accent-cool, #7DD3FC); border-color: rgba(125,211,252,.4); }
.ac-lock-pad svg { width: 13px; height: 13px; }
.ac-cta-banner {
      position: relative; overflow: hidden; isolation: isolate;
      margin-top: 26px; border-radius: var(--radius-xl, 18px);
      background: linear-gradient(135deg, var(--primary-soft, rgba(73,151,208,.16)), var(--accent-cool-soft, rgba(125,211,252,.12))), var(--bg-card, transparent);
      border: 1px solid var(--border-strong, rgba(125,211,252,.28));
      box-shadow: 0 16px 44px rgba(0,0,0,.34), 0 0 52px rgba(73,151,208,.14);
      padding: 28px 24px; text-align: center;
    }
.ac-cta-banner::after {
      content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
      background: linear-gradient(120deg, transparent 32%, rgba(125,211,252,.14) 50%, transparent 68%);
      transform: translateX(-100%);
      animation: ac-sweep 4s var(--ease-smooth, cubic-bezier(.25,.1,.25,1)) 900ms infinite;
    }
.ac-cta-banner > * { position: relative; z-index: 1; }
.ac-cta-banner h3 { margin: 0; font-size: 18px; font-weight: 800; }
.ac-cta-banner p { margin: 8px 0 16px; font-size: 13.5px; color: var(--text-secondary, #B9C7D8); line-height: 1.55; }
.ac-up {
      padding: 9px 16px; border-radius: var(--radius-md, 11px); border: none; cursor: pointer;
      font-family: inherit; font-weight: 700; font-size: 13.5px;
      background: var(--cta-gradient-bold, linear-gradient(135deg, #4997D0, #7DD3FC));
      color: var(--text-on-primary, #030712);
      transition: all 180ms var(--ease-out-expo, cubic-bezier(.16,1,.3,1));
    }
.ac-up:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(73,151,208,.4); }
.ac-cta-banner .ac-up { margin: 0 auto; padding: 13px 24px; font-size: 15px; }
.ac-up-top .ac-up-short { display: none; }
.ac-foot-card {
      width: 100%; border: none; text-align: left; cursor: pointer;
      display: flex; align-items: center; gap: 12px;
    }
.ac-pills {
      display: flex; flex-wrap: wrap; gap: 8px;
      margin: 22px 0 20px;
    }
.ac-pill {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 9px 15px; border-radius: var(--radius-md, 11px);
      border: 1px solid var(--border-subtle, rgba(73,151,208,.18));
      background: var(--bg-card, rgba(73,151,208,.05));
      color: var(--text-secondary, #B9C7D8);
      font-family: inherit; font-size: 13px; font-weight: 600;
      cursor: pointer; white-space: nowrap;
      transition: all 180ms var(--ease-out-expo, cubic-bezier(.16,1,.3,1));
    }
.ac-pill:hover { border-color: var(--border-strong, rgba(125,211,252,.5)); color: var(--text-primary, #E5EEF8); }
.ac-pill.active {
      background: var(--cta-gradient-bold, linear-gradient(135deg, #4997D0, #7DD3FC));
      border-color: transparent; color: var(--text-on-primary, #030712);
    }
.ac-pill-ico { font-size: 14px; }
.ac-panel { display: none; }
.ac-panel.active { display: block; animation: acPanelIn .3s cubic-bezier(.16,1,.3,1); }
.ac-panel .ac-section-label:first-child { margin-top: 2px; }
.ac-panel-cta {
      display: flex; align-items: center; justify-content: space-between;
      gap: 16px; flex-wrap: wrap;
      margin-top: 24px; padding: 16px 18px; border-radius: var(--radius-lg, 14px);
      background: linear-gradient(135deg, var(--primary-soft, rgba(73,151,208,.12)), var(--accent-cool-soft, rgba(125,211,252,.08))), var(--bg-card, transparent);
      border: 1px solid var(--border-default, rgba(125,211,252,.22));
    }
.ac-panel-cta span { flex: 1; min-width: 200px; font-size: 13px; line-height: 1.5; color: var(--text-secondary, #B9C7D8); }
.ac-panel-cta .ac-up { flex-shrink: 0; }
.ac-actions-big { display: flex; flex-direction: column; gap: 12px; }
.ac-actions-big .fn-check { padding: 16px 18px; border-radius: var(--radius-lg, 14px); background: var(--bg-card, #0B1220); border: 1px solid var(--border-default, rgba(125,211,252,.22)); }
.ac-actions-big .fn-check-box { width: 26px; height: 26px; font-size: 14px; }
.ac-actions-big .fn-check-title-txt { font-size: 15.5px; }
.ac-actions-big .fn-check-body span { font-size: 13.5px; line-height: 1.5; }

@media (max-width: 760px) {
      .ac-score-card { flex-direction: column; gap: 18px; padding: 22px 18px; }
      .ac-score-sw { width: 100%; }
      .ac-score-sw .coach-an-chips { justify-content: center; }
    }
@media (max-width: 560px) {
      .ac-bio-copy { position: static; margin-bottom: 12px; }
      #ac-main .fn-bio-angle { margin-right: 8px; }
    }
@media (prefers-reduced-motion: reduce) {
      .ac-lock-card::before { animation: none; opacity: .5; }
    }
@media (prefers-reduced-motion: reduce) { .ac-cta-banner::after { animation: none; opacity: .3; } }
@media (max-width: 720px) {
      .ac-up-top { padding: 8px 13px; font-size: 12.5px; }
      .ac-up-top .ac-up-long { display: none; }
      .ac-up-top .ac-up-short { display: inline; }
    }
@media (max-width: 560px) {
      .ac-locked { grid-template-columns: 1fr; }
    }
@media (max-width: 560px) {
      .ac-pills { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
      .ac-pill { flex-shrink: 0; }
      .ac-panel-cta { flex-direction: column; align-items: stretch; }
      .ac-panel-cta .ac-up { width: 100%; }
    }