/**
 * ADEL SkinAI — styles du parcours de scan (front-end visiteur).
 *
 * Migré depuis le prototype adel-skinai-scan-flow.html.
 * Chargé via public/class-adel-skinai-public.php -> enqueue_styles().
 * Toutes les classes sont préfixées "as-" et namespacées sous
 * .adel-skinai-app pour ne jamais entrer en conflit avec le thème
 * WordPress actif sur adelcosmetic.com.
 *
 * NOTE : la pleine largeur d'écran doit être réglée côté Elementor
 * (Section > Layout > Content Width = Full Width, Padding = 0), PAS en
 * CSS ici. Une tentative de "full-bleed break-out" en CSS pur a été
 * essayée puis retirée : elle suppose que le conteneur parent n'a pas de
 * position/transform propre, ce qui n'est pas garanti dans une section
 * Elementor et a cassé la mise en page plutôt que de la corriger.
 */

  /* =====================================================
     ADEL SkinAI — design tokens
     Namespaced under .adel-skinai-app so nothing here can
     leak onto adelcosmetic.com if the two are ever mounted
     on the same page. No shared classnames, no global tag
     selectors outside the reset below.
  ===================================================== */
  :root{
    --ink:#17140f;
    --ink-soft:#2a241c;
    --cream:#efe6d4;
    --cream-soft:#f6f0e3;
    --gold:#c9a24b;
    --gold-deep:#a4802f;
    --line:rgba(255,255,255,0.28);
    --white-90:rgba(255,255,255,0.92);
    --white-70:rgba(255,255,255,0.72);
    --white-50:rgba(255,255,255,0.5);
    --white-35:rgba(255,255,255,0.35);
    --nav-glass:rgba(17,15,11,0.42);
    --panel:#15120d;
    --panel-line:rgba(255,255,255,0.1);
    --green:#7bd8a3;
    --green-deep:#2f9e63;
    --amber:#e0a94a;
    --amber-bg:rgba(224,169,74,0.14);
    --red:#e5686c;
    --red-bg:rgba(197,73,78,0.16);
    --red-line:rgba(229,104,108,0.55);
    --radius-pill:999px;
    --font-display:'Fraunces', serif;
    --font-sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }

  .adel-skinai-app, .adel-skinai-app *{
    box-sizing:border-box;
    margin:0;
    padding:0;
  }

  .adel-skinai-app{
    font-family:var(--font-sans);
    color:var(--white-90);
    background:var(--ink);
    min-height:100vh;
    width:100%;
    position:relative;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }

  .adel-skinai-app a{ color:inherit; text-decoration:none; }
  .adel-skinai-app button{ font-family:inherit; cursor:pointer; }

  .adel-skinai-app :focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
    border-radius:4px;
  }

  @media (prefers-reduced-motion: reduce){
    .adel-skinai-app *{
      animation-duration:0.01ms !important;
      transition-duration:0.01ms !important;
    }
  }

  /* ---------- Top bar (shared across screens) ---------- */
  .as-topbar{
    position:absolute;
    top:0; left:0; right:0;
    z-index:40;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 40px;
    background:rgba(24,21,17,0.78);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(255,255,255,0.08);
  }

  .as-brand{
    display:flex;
    align-items:center;
    gap:14px;
  }

  .as-home-link{
    width:38px;
    height:38px;
    border:1px solid var(--gold);
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--gold);
    background:rgba(201,162,75,0.08);
    transition:background 0.2s ease, transform 0.2s ease;
    flex-shrink:0;
  }
  .as-home-link:hover{ background:rgba(201,162,75,0.2); transform:translateY(-1px); }
  .as-home-link svg{ width:18px; height:18px; }

  .as-wordmark{
    display:flex;
    align-items:baseline;
    gap:10px;
    white-space:nowrap;
  }
  .as-wordmark__adel{
    font-family:var(--font-sans);
    font-weight:800;
    font-size:16px;
    letter-spacing:0.14em;
    color:var(--white-90);
  }
  .as-wordmark__divider{
    width:1px;
    height:14px;
    background:var(--white-35);
    display:inline-block;
  }
  .as-wordmark__product{
    font-family:var(--font-display);
    font-style:italic;
    font-weight:500;
    font-size:17px;
    color:var(--gold);
  }

  .as-signup{
    padding:11px 24px;
    border:1px solid var(--white-70);
    border-radius:var(--radius-pill);
    background:transparent;
    color:var(--white-90);
    font-size:13px;
    font-weight:600;
    letter-spacing:0.02em;
    transition:background 0.2s ease, color 0.2s ease;
  }
  .as-signup:hover{ background:var(--cream-soft); color:var(--ink); }

  /* ---------- Screen shell / transitions ---------- */
  .as-screen{
    display:none;
    position:relative;
    min-height:100vh;
    width:100%;
    overflow:hidden;
  }
  .as-screen.is-active{
    display:block;
    animation:asFade 0.45s ease;
  }
  @keyframes asFade{
    from{ opacity:0; }
    to{ opacity:1; }
  }

  /* ================= SCREEN 1 — HOME / HERO ================= */
  .as-hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:flex-end;
    background-image:url('../images/hero-model.jpg');
    background-size:cover;
    background-position:center 18%;
    background-color:#4a382c;
  }

  /* left-to-right vignette so the headline stays legible over the "photo" */
  .as-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(100deg, rgba(15,13,10,0.62) 0%, rgba(15,13,10,0.28) 38%, rgba(15,13,10,0) 62%);
    z-index:1;
  }

  /* rule-of-thirds scan grid, purely decorative framing cue */
  .as-scan-grid{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
  }
  .as-scan-grid span{
    position:absolute;
    background:var(--line);
  }
  .as-scan-grid .v1{ left:33.33%; top:0; bottom:0; width:1px; }
  .as-scan-grid .v2{ left:66.66%; top:0; bottom:0; width:1px; }
  .as-scan-grid .h1{ top:33.33%; left:0; right:0; height:1px; }
  .as-scan-grid .h2{ top:66.66%; left:0; right:0; height:1px; }

  .as-scan-dot{
    position:absolute;
    z-index:3;
    width:11px;
    height:11px;
    border-radius:50%;
    border:1.5px solid rgba(255,255,255,0.85);
    background:rgba(255,255,255,0.15);
    box-shadow:0 0 0 6px rgba(255,255,255,0.06);
  }
  .as-scan-dot--1{ top:16%; left:63%; }
  .as-scan-dot--2{ top:37%; left:71%; }
  .as-scan-dot--3{ top:56%; left:58%; }

  .as-photo-note{
    position:absolute;
    z-index:2;
    bottom:16px;
    left:16px;
    font-size:10px;
    letter-spacing:0.06em;
    color:rgba(255,255,255,0.4);
    border:1px dashed rgba(255,255,255,0.25);
    padding:4px 8px;
    border-radius:6px;
  }

  .as-hero__content{
    position:relative;
    z-index:5;
    max-width:520px;
    padding:0 40px 88px;
  }

  .as-eyebrow{
    font-size:12px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:600;
    margin-bottom:18px;
  }

  .as-headline{
    font-family:var(--font-sans);
    font-weight:800;
    font-size:44px;
    line-height:1.08;
    letter-spacing:-0.01em;
    color:#fff;
    margin-bottom:22px;
  }
  .as-headline em{
    font-family:var(--font-display);
    font-style:italic;
    font-weight:500;
  }

  .as-subtext{
    font-size:15px;
    line-height:1.6;
    color:var(--white-70);
    max-width:400px;
    margin-bottom:34px;
  }

  .as-cta{
    display:inline-flex;
    align-items:center;
    gap:14px;
    padding:8px 8px 8px 26px;
    background:var(--ink);
    border:1px solid rgba(255,255,255,0.15);
    border-radius:var(--radius-pill);
    color:#fff;
    font-size:14px;
    font-weight:600;
    transition:transform 0.2s ease, background 0.2s ease;
  }
  .as-cta:hover{ transform:translateY(-2px); background:#000; }
  .as-cta__icon{
    width:34px;
    height:34px;
    border-radius:50%;
    background:var(--gold);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
  .as-cta__icon svg{ width:15px; height:15px; }

  .as-badge{
    position:absolute;
    z-index:5;
    right:40px;
    bottom:40px;
    display:flex;
    align-items:center;
    gap:14px;
  }
  .as-badge__rank{
    font-family:var(--font-display);
    font-style:italic;
    font-weight:600;
    font-size:40px;
    color:#fff;
    line-height:1;
  }
  .as-badge__pill{
    display:flex;
    align-items:center;
    gap:10px;
    background:rgba(15,13,10,0.55);
    border:1px solid rgba(255,255,255,0.18);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    padding:10px 16px;
    border-radius:16px;
    font-size:11.5px;
    line-height:1.35;
    max-width:150px;
    color:var(--white-90);
  }

  /* ================= SCREEN 2 — CAPTURE GUIDE ================= */
  .as-capture{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background-image:url('../images/capture-model.jpg');
    background-size:cover;
    background-position:center 22%;
    background-color:#2c2823;
  }

  .as-capture::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:
      radial-gradient(90% 70% at 50% 8%, rgba(0,0,0,0.25), transparent 55%),
      linear-gradient(180deg, rgba(20,17,14,0.35) 0%, rgba(16,14,11,0.55) 45%, rgba(10,9,7,0.82) 100%);
  }

  .as-back{
    position:absolute;
    z-index:40;
    top:88px;
    left:32px;
    width:40px;
    height:40px;
    border-radius:50%;
    border:1px solid var(--white-50);
    background:rgba(255,255,255,0.06);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    transition:background 0.2s ease, transform 0.2s ease;
  }
  .as-back:hover{ background:rgba(255,255,255,0.16); transform:translateX(-2px); }
  .as-back svg{ width:16px; height:16px; }

  .as-capture__photo-note{
    position:absolute;
    z-index:1;
    bottom:16px;
    left:16px;
    font-size:10px;
    letter-spacing:0.06em;
    color:rgba(255,255,255,0.35);
    border:1px dashed rgba(255,255,255,0.2);
    padding:4px 8px;
    border-radius:6px;
  }

  .as-frame-ring{
    position:absolute;
    z-index:2;
    top:44%;
    left:50%;
    width:300px;
    height:360px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(closest-side, rgba(255,255,255,0.05), transparent 72%);
    filter:blur(2px);
    pointer-events:none;
  }

  .as-capture__body{
    position:relative;
    z-index:5;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:0 24px;
    max-width:420px;
  }

  .as-capture__eyebrow{
    font-size:11px;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--white-50);
    margin-bottom:18px;
  }

  .as-capture__title{
    font-family:var(--font-sans);
    font-weight:700;
    font-size:30px;
    color:#fff;
    margin-bottom:26px;
  }

  .as-capture__checklist{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:56px;
  }
  .as-capture__checklist li{
    font-size:16px;
    font-weight:400;
  }
  .as-capture__checklist li:nth-child(1){ color:var(--white-70); }
  .as-capture__checklist li:nth-child(2){ color:var(--white-50); }
  .as-capture__checklist li:nth-child(3){ color:var(--white-35); }
  .as-capture__checklist li:nth-child(4){ color:rgba(255,255,255,0.22); }

  .as-capture__actions{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:22px;
  }

  .as-btn-outline{
    padding:13px 28px;
    border:1px solid var(--white-70);
    border-radius:var(--radius-pill);
    background:transparent;
    color:#fff;
    font-size:14px;
    font-weight:600;
    transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    white-space:nowrap;
  }
  .as-btn-outline:hover{
    background:#fff;
    color:var(--ink);
    border-color:#fff;
  }

  .as-capture__legal{
    font-size:12px;
    color:var(--white-50);
  }
  .as-capture__legal a{
    color:var(--gold);
    text-decoration:underline;
    text-underline-offset:2px;
  }
  .as-capture__legal a:hover{ color:#fff; }

  /* ================= SCREEN 3 — IQM LIVE CAPTURE ================= */
  .as-iqm{
    position:relative;
    min-height:100vh;
    background:linear-gradient(180deg, #221d17 0%, #14110d 100%);
    padding-bottom:64px;
  }

  .as-stepper{
    position:absolute;
    top:26px;
    left:50%;
    transform:translateX(-50%);
    z-index:41;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .as-stepper__seg{
    height:6px;
    border-radius:3px;
    background:rgba(255,255,255,0.18);
  }
  .as-stepper__seg.is-current{
    width:34px;
    background:var(--gold);
  }
  .as-stepper__seg.is-done{
    width:6px;
    background:var(--gold-deep);
  }
  .as-stepper__seg:not(.is-current):not(.is-done){
    width:6px;
  }

  .as-iqm__back{
    position:absolute;
    z-index:40;
    top:88px;
    left:32px;
    width:40px;
    height:40px;
    border-radius:50%;
    border:1px solid var(--white-50);
    background:rgba(255,255,255,0.06);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    transition:background 0.2s ease, transform 0.2s ease;
  }
  .as-iqm__back:hover{ background:rgba(255,255,255,0.16); transform:translateX(-2px); }
  .as-iqm__back svg{ width:16px; height:16px; }

  .as-iqm__layout{
    display:grid;
    grid-template-columns:minmax(0,560px) minmax(0,360px);
    gap:48px;
    justify-content:center;
    align-items:start;
    padding:150px 40px 0;
    max-width:1080px;
    margin:0 auto;
  }

  .as-view{
    position:relative;
    border-radius:28px;
    overflow:hidden;
    aspect-ratio:4/4.6;
    background:
      linear-gradient(180deg, rgba(10,9,7,0.15) 0%, rgba(10,9,7,0.55) 100%),
      radial-gradient(120% 90% at 50% 15%, #6b625a, #2c2925 65%);
  }

  .as-view__note{
    position:absolute;
    z-index:1;
    top:14px;
    left:14px;
    font-size:10px;
    letter-spacing:0.06em;
    color:rgba(255,255,255,0.4);
    border:1px dashed rgba(255,255,255,0.25);
    padding:4px 8px;
    border-radius:6px;
  }

  .as-view__video,
  .as-view__still{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
    background:#1c1915;
  }
  .as-view__video{ transform:scaleX(-1); }

  .as-view__state{
    position:absolute;
    inset:0;
    z-index:6;
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:16px;
    text-align:center;
    padding:32px;
    background:rgba(12,10,8,0.78);
  }
  .as-view__state.is-visible{ display:flex; }
  .as-view__state-icon{
    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid var(--white-50);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .as-view__state-icon svg{ width:20px; height:20px; }
  .as-view__state-title{
    font-size:15px;
    font-weight:700;
    color:#fff;
  }
  .as-view__state-text{
    font-size:13px;
    line-height:1.5;
    color:var(--white-70);
    max-width:320px;
  }
  .as-view__state-actions{
    display:flex;
    gap:10px;
    margin-top:6px;
  }

  .as-view__corner{
    position:absolute;
    z-index:3;
    width:34px;
    height:34px;
    border:3px solid #fff;
    opacity:0.85;
  }
  .as-view__corner--tl{ top:20px; left:20px; border-right:none; border-bottom:none; border-top-left-radius:14px; }
  .as-view__corner--tr{ top:20px; right:20px; border-left:none; border-bottom:none; border-top-right-radius:14px; }
  .as-view__corner--bl{ bottom:20px; left:20px; border-right:none; border-top:none; border-bottom-left-radius:14px; }
  .as-view__corner--br{ bottom:20px; right:20px; border-left:none; border-top:none; border-bottom-right-radius:14px; }

  .as-view__guide{
    position:absolute;
    z-index:2;
    top:42%;
    left:50%;
    width:56%;
    aspect-ratio:1;
    transform:translate(-50%,-50%);
    border-radius:50%;
    border:2px dashed rgba(255,255,255,0.75);
  }

  .as-view__feedback{
    position:absolute;
    z-index:4;
    left:16px;
    right:16px;
    bottom:16px;
    background:rgba(12,10,8,0.62);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    border-radius:16px;
    padding:14px 18px;
    text-align:center;
    font-size:13px;
    line-height:1.5;
    color:var(--white-90);
  }

  .as-score{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding-top:6px;
  }

  .as-score__eyebrow{
    font-size:12px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:600;
    margin-bottom:18px;
  }

  .as-score__ring{
    position:relative;
    width:150px;
    height:150px;
    margin-bottom:30px;
  }
  .as-score__ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
  .as-score__ring-value{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-sans);
    font-weight:800;
    font-size:32px;
    color:var(--green);
  }

  .as-metrics{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:34px;
  }

  .as-metric{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 18px;
    border-radius:var(--radius-pill);
    border:1px solid rgba(201,162,75,0.4);
    background:rgba(201,162,75,0.06);
    font-size:13.5px;
    font-weight:500;
    color:var(--white-90);
  }
  .as-metric__value{
    font-weight:700;
    color:var(--gold);
  }
  .as-metric.is-warning{
    border-color:var(--red-line);
    background:var(--red-bg);
  }
  .as-metric.is-warning .as-metric__value{ color:var(--red); }
  .as-metric.is-warning .as-metric__label{ color:var(--red); }

  .as-metric__check{
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--green-deep);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
  .as-metric__check svg{ width:11px; height:11px; }

  .as-btn-primary{
    align-self:flex-end;
    padding:13px 30px;
    border:none;
    border-radius:var(--radius-pill);
    background:var(--gold);
    color:var(--ink);
    font-size:14px;
    font-weight:700;
    transition:background 0.2s ease, transform 0.2s ease;
  }
  .as-btn-primary:hover{ background:#dab55f; transform:translateY(-2px); }
  .as-btn-primary:disabled{
    background:rgba(201,162,75,0.25);
    color:rgba(255,255,255,0.4);
    cursor:not-allowed;
    transform:none;
  }
  .as-btn-primary:disabled:hover{ background:rgba(201,162,75,0.25); transform:none; }

  .as-btn-small{
    padding:9px 18px;
    border-radius:var(--radius-pill);
    font-size:12.5px;
    font-weight:600;
  }
  .as-btn-small.as-btn-outline{ border-color:var(--white-50); }
  .as-btn-small.as-btn-primary{ background:var(--gold); color:var(--ink); }

  /* =====================================================
     Éléments communs aux écrans 2-5 (fond sombre, back inline)
  ===================================================== */
  .as-analyse, .as-questionnaire, .as-triage, .as-rapport{
    position:relative;
    min-height:100vh;
    background:
      radial-gradient(90% 70% at 50% 8%, rgba(255,255,255,0.05), transparent 55%),
      linear-gradient(180deg, #2c2823 0%, #1c1915 100%);
    padding-bottom:80px;
  }
  .as-back-inline{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border-radius:50%;
    border:1px solid var(--white-35);
    background:rgba(255,255,255,0.06);
    color:#fff;
    cursor:pointer;
    margin-bottom:20px;
  }
  .as-back-inline svg{ width:16px; height:16px; }

  /* =====================================================
     Écran Analyse (Bloc 02)
  ===================================================== */
  .as-analyse__layout{
    display:grid;
    grid-template-columns:minmax(0,560px) minmax(0,360px);
    gap:48px;
    justify-content:center;
    align-items:start;
    padding:150px 40px 0;
    max-width:1080px;
    margin:0 auto;
  }
  .as-analyse__photo{
    position:relative;
    aspect-ratio:4/5;
    border-radius:28px;
    overflow:hidden;
    background:#3a332c;
  }
  .as-analyse__photo-img{ width:100%; height:100%; object-fit:cover; display:block; }
  .as-analyse__panel{ display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:12px; }
  .as-analyse__ring{ position:relative; width:150px; height:150px; margin:8px 0 18px; }
  .as-analyse__ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
  .as-analyse__ring-value{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding-top:6px; font-family:'Fraunces', serif; font-size:32px; font-weight:600; color:#fff; }
  .as-analyse__ring-label{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; padding-bottom:34px; font-size:11px; color:var(--white-50); }
  .as-analyse__caption{ font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--white-50); margin-bottom:14px; }
  .as-analyse__badges{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:28px; }
  .as-analyse__badge{
    padding:7px 14px;
    border-radius:var(--radius-pill);
    font-size:12px;
    font-weight:600;
    border:1px solid transparent;
  }
  .as-analyse__badge.is-confidence-high{ background:rgba(123,216,163,0.14); color:var(--green); border-color:rgba(123,216,163,0.4); }
  .as-analyse__badge.is-confidence-medium{ background:var(--amber-bg); color:var(--amber); border-color:rgba(224,169,74,0.4); }
  .as-analyse__badge.is-confidence-low{ background:var(--red-bg); color:var(--red); border-color:var(--red-line); }
  .as-analyse__badge.is-confidence-pending{ background:rgba(255,255,255,0.06); color:var(--white-50); border-color:var(--white-35); }

  /* =====================================================
     Écran Questionnaire (Bloc 03)
  ===================================================== */
  .as-questionnaire__layout{
    display:grid;
    grid-template-columns:300px minmax(0,1fr);
    gap:40px;
    max-width:1080px;
    margin:0 auto;
    padding:150px 40px 0;
    align-items:start;
  }
  .as-questionnaire__title{ font-family:'Fraunces', serif; font-size:22px; color:#fff; margin-bottom:10px; }
  .as-questionnaire__progress{ height:4px; border-radius:2px; background:rgba(255,255,255,0.1); overflow:hidden; margin-bottom:24px; }
  .as-questionnaire__progress span{ display:block; height:100%; background:linear-gradient(90deg, var(--green-deep), var(--gold)); }
  .as-rule-cards{ display:flex; flex-direction:column; gap:12px; }
  .as-rule-card{
    background:rgba(255,255,255,0.04);
    border:1px solid var(--white-35);
    border-radius:14px;
    padding:14px 16px;
    position:relative;
  }
  .as-rule-card__dot{ position:absolute; top:16px; right:16px; width:8px; height:8px; border-radius:50%; background:var(--amber); }
  .as-rule-card--positive .as-rule-card__dot{ background:var(--green); }
  .as-rule-card__label{ font-size:12.5px; font-weight:600; color:#fff; display:block; padding-right:20px; }
  .as-rule-card__metric{ display:flex; justify-content:space-between; margin-top:10px; font-size:12px; color:var(--white-70); }
  .as-rule-card__metric strong{ color:#fff; }
  .as-rule-card__bar{ height:4px; border-radius:2px; background:rgba(255,255,255,0.1); margin-top:6px; overflow:hidden; }
  .as-rule-card__bar span{ display:block; height:100%; background:var(--amber); }
  .as-rule-card__note{ font-size:11.5px; color:var(--white-50); margin-top:8px; line-height:1.5; }

  .as-questionnaire__main{ background:var(--cream); border-radius:24px; padding:40px; color:var(--ink); }
  .as-questionnaire__meta{ font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); opacity:0.6; margin-bottom:10px; }
  .as-questionnaire__question{ font-family:'Fraunces', serif; font-size:24px; font-weight:600; margin-bottom:28px; max-width:520px; }
  .as-questionnaire__options{ display:flex; flex-direction:column; gap:12px; margin-bottom:32px; }
  .as-radio-option{
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 18px;
    border:1.5px solid rgba(23,20,15,0.14);
    border-radius:var(--radius-pill);
    cursor:pointer;
    font-size:14px;
  }
  .as-radio-option input{ position:absolute; opacity:0; pointer-events:none; }
  .as-radio-option__dot{ width:18px; height:18px; border-radius:50%; border:1.5px solid rgba(23,20,15,0.3); flex:none; position:relative; }
  .as-radio-option input:checked + .as-radio-option__dot{ border-color:var(--gold-deep); }
  .as-radio-option input:checked + .as-radio-option__dot::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--gold-deep); }
  .as-questionnaire__nav{ display:flex; align-items:center; justify-content:flex-end; gap:14px; }
  .as-btn-round{
    width:44px; height:44px;
    border-radius:50%;
    border:1.5px solid rgba(23,20,15,0.14);
    background:transparent;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    color:var(--ink);
    margin-right:auto;
  }

  /* =====================================================
     Écran Triage (Bloc 04)
  ===================================================== */
  .as-triage__layout{
    display:grid;
    grid-template-columns:300px minmax(0,1fr);
    gap:40px;
    max-width:1080px;
    margin:0 auto;
    padding:150px 40px 0;
    align-items:start;
  }
  .as-triage__sidebar-eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--white-50); margin-bottom:16px; }
  .as-family-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
  .as-family-list__item{ position:relative; }
  .as-family-list__name{ font-size:12.5px; font-weight:600; color:var(--white-70); }
  .as-family-list__item.is-selected .as-family-list__name{ color:#fff; }
  .as-family-list__score{ float:right; font-size:12.5px; font-weight:700; color:#fff; }
  .as-family-list__bar{ display:block; clear:both; height:4px; border-radius:2px; background:rgba(255,255,255,0.1); margin-top:8px; overflow:hidden; }
  .as-family-list__bar span{ display:block; height:100%; background:var(--amber); }
  .as-family-list__item.is-selected .as-family-list__bar span{ background:var(--gold); }
  .as-family-list__item{ cursor:pointer; }

  .as-triage__main{ background:var(--cream); border-radius:24px; padding:40px; color:var(--ink); }
  .as-triage__level-badge{
    display:inline-block;
    padding:6px 14px;
    border-radius:var(--radius-pill);
    background:rgba(47,158,99,0.12);
    color:var(--green-deep);
    font-size:11.5px;
    font-weight:700;
    margin-bottom:18px;
  }
  .as-triage__family-title{ font-family:'Fraunces', serif; font-size:26px; font-weight:600; margin-bottom:6px; }
  .as-triage__family-subtitle{ font-size:13px; color:rgba(23,20,15,0.55); margin-bottom:24px; }
  .as-triage__metrics{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:24px; }
  .as-triage__metric-card{ background:rgba(23,20,15,0.04); border-radius:14px; padding:18px; }
  .as-triage__metric-label{ font-size:12px; color:rgba(23,20,15,0.55); margin-bottom:6px; }
  .as-triage__metric-value{ font-family:'Fraunces', serif; font-size:30px; font-weight:600; color:var(--gold-deep); }
  .as-triage__metric-confidence{ font-size:11px; color:rgba(23,20,15,0.45); margin-top:4px; }
  .as-triage__anticontradiction{
    background:var(--amber-bg);
    border:1px solid rgba(224,169,74,0.4);
    border-radius:14px;
    padding:16px 18px;
    margin-bottom:24px;
  }
  .as-triage__anticontradiction-title{ font-size:11px; font-weight:700; letter-spacing:0.05em; color:#8a6414; margin-bottom:6px; }
  .as-triage__anticontradiction-text{ font-size:12.5px; color:#5a4711; }
  .as-triage__nav{ display:flex; justify-content:flex-end; }

  /* =====================================================
     Écran Rapport (Bloc 05)
  ===================================================== */
  .as-rapport__actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:24px 40px 0;
    max-width:1200px;
    margin:0 auto;
    flex-wrap:wrap;
    gap:16px;
  }
  .as-rapport__actions .as-back-inline{ margin-bottom:0; }
  .as-rapport__actions-right{ display:flex; gap:10px; flex-wrap:wrap; }
  .as-btn-pill{
    padding:10px 18px;
    border-radius:var(--radius-pill);
    border:1px solid var(--white-35);
    background:rgba(255,255,255,0.05);
    color:#fff;
    font-size:12.5px;
    font-weight:600;
    cursor:pointer;
  }
  .as-btn-pill--gold{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
  .as-btn-pill--small{ padding:6px 14px; font-size:11.5px; }

  .as-rapport__summary{
    display:grid;
    grid-template-columns:minmax(0,340px) minmax(0,260px) minmax(0,260px);
    gap:32px;
    max-width:1200px;
    margin:0 auto;
    padding:32px 40px 0;
    align-items:start;
  }
  .as-rapport__photo{ position:relative; aspect-ratio:4/5; border-radius:20px; overflow:hidden; background:#3a332c; }
  .as-rapport__photo-img{ width:100%; height:100%; object-fit:cover; display:block; }
  .as-rapport__photo-marker{ position:absolute; width:14px; height:14px; border-radius:50%; background:rgba(123,216,163,0.85); border:2px solid #fff; transform:translate(-50%,-50%); }
  .as-rapport__photo-tag{
    position:absolute; bottom:14px; left:14px;
    background:rgba(20,17,14,0.7);
    color:#fff; font-size:11px; font-weight:600;
    padding:6px 12px; border-radius:var(--radius-pill);
  }
  .as-rapport__photo-nav{
    position:absolute; top:50%; transform:translateY(-50%);
    width:30px; height:30px; border-radius:50%;
    background:rgba(20,17,14,0.5); color:#fff; border:none;
    font-size:18px; line-height:1; cursor:pointer;
  }
  .as-rapport__photo-nav--prev{ left:10px; }
  .as-rapport__photo-nav--next{ right:10px; }
  .as-rapport__photo-dots{ position:absolute; bottom:14px; right:14px; display:flex; gap:5px; }
  .as-rapport__photo-dots span{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.4); }
  .as-rapport__photo-dots span.is-active{ background:#fff; }

  .as-rapport__global{ display:flex; flex-direction:column; align-items:center; text-align:center; }
  .as-score__ring--lg{ position:relative; width:130px; height:130px; margin-bottom:10px; }
  .as-score__ring--lg svg{ width:100%; height:100%; transform:rotate(-90deg); }
  .as-score__ring-value--dark{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Fraunces', serif; font-size:26px; font-weight:600; color:var(--ink-soft); }
  .as-rapport__global-label{ font-size:12px; color:var(--white-50); margin-bottom:20px; }
  .as-rapport__meta{ width:100%; }
  .as-rapport__meta-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--white-50); margin-top:12px; }
  .as-rapport__meta-value{ font-size:13px; font-weight:600; color:#fff; margin-top:2px; }

  .as-family-list--summary .as-family-list__item{ padding:10px 14px; background:rgba(255,255,255,0.04); border-radius:12px; margin-bottom:2px; opacity:0.55; }
  .as-family-list--summary .as-family-list__item.is-active-family{ opacity:1; border:1px solid rgba(224,169,74,0.4); }

  .as-rapport__scores{ max-width:1200px; margin:56px auto 0; padding:0 40px; }
  .as-rapport__section-title{ font-family:'Fraunces', serif; font-size:22px; color:#fff; margin-bottom:20px; }
  .as-rapport__section-title-pill{
    display:inline-block;
    font-family:'Inter', sans-serif;
    font-size:12px;
    font-weight:700;
    color:#fff;
    background:rgba(255,255,255,0.08);
    padding:8px 16px;
    border-radius:var(--radius-pill);
    margin-bottom:20px;
  }
  .as-scores-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; background:var(--cream); border-radius:24px; padding:32px; }
  .as-score-card{ padding:6px; }
  .as-score-card__label{ font-size:12.5px; color:rgba(23,20,15,0.6); margin-bottom:6px; }
  .as-score-card__value{ font-family:'Fraunces', serif; font-size:24px; font-weight:600; }
  .as-score-card__value.is-good{ color:var(--green-deep); }
  .as-score-card__value.is-concerning{ color:#b5791f; }
  .as-score-card__value.is-ok{ color:var(--ink-soft); }
  .as-score-card__bar{ height:4px; border-radius:2px; background:rgba(23,20,15,0.08); margin:8px 0; overflow:hidden; }
  .as-score-card__bar span.is-good{ display:block; height:100%; background:var(--green-deep); }
  .as-score-card__bar span.is-concerning{ display:block; height:100%; background:var(--amber); }
  .as-score-card__bar span.is-ok{ display:block; height:100%; background:var(--white-35); }
  .as-score-card__footer{ display:flex; align-items:center; justify-content:space-between; }
  .as-score-card__badge{ font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:var(--radius-pill); }
  .as-score-card__badge.is-good{ background:rgba(47,158,99,0.12); color:var(--green-deep); }
  .as-score-card__badge.is-concerning{ background:var(--amber-bg); color:#8a6414; }
  .as-score-card__badge.is-ok{ background:rgba(23,20,15,0.08); color:var(--ink-soft); }
  .as-score-card__trust{ font-size:10.5px; color:rgba(23,20,15,0.4); }

  .as-rapport__narrative{ max-width:1200px; margin:40px auto 0; padding:0 40px; }
  .as-finding{ background:var(--cream); border-radius:20px; padding:24px 28px; margin-bottom:14px; }
  .as-finding__zone{ font-size:14px; font-weight:700; color:var(--ink); }
  .as-finding__priority{ margin-left:10px; font-size:10.5px; font-weight:700; color:var(--gold-deep); background:rgba(201,162,75,0.14); padding:3px 10px; border-radius:var(--radius-pill); vertical-align:middle; }
  .as-finding__text{ font-size:13px; color:rgba(23,20,15,0.7); line-height:1.6; margin-top:10px; }
  .as-finding__avoid{ font-size:12.5px; color:#b5791f; font-weight:600; margin-top:10px; }

  .as-rapport__routine{ max-width:1200px; margin:40px auto 0; padding:0 40px; }
  .as-rapport__routine-header{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
  .as-rapport__routine-layout{ display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:24px; align-items:start; }
  .as-routine-products{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
  .as-routine-product{ background:var(--panel); border:1px solid var(--panel-line); border-radius:16px; padding:14px; text-align:center; }
  .as-routine-product__image{ aspect-ratio:1; border-radius:10px; background:linear-gradient(135deg, #2a241c, #14110d); margin-bottom:10px; }
  .as-routine-product__name{ font-size:12.5px; font-weight:600; color:#fff; margin-bottom:8px; }
  .as-routine-product__why{ font-size:11px; color:var(--gold); background:none; border:none; cursor:pointer; padding:0; }
  .as-routine-steps{ background:var(--panel); border:1px solid var(--panel-line); border-radius:16px; padding:20px; }
  .as-routine-steps__title{ font-size:12px; font-weight:700; color:#fff; margin-bottom:12px; }
  .as-routine-steps ol{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:10px; }
  .as-routine-steps li{ font-size:12px; color:var(--white-70); line-height:1.5; }

  /* ---------- Responsive ---------- */
  @media (max-width:720px){
    .as-topbar{ padding:18px 20px; }
    .as-wordmark__adel{ font-size:14px; letter-spacing:0.1em; }
    .as-hero__content{ padding:0 22px 64px; max-width:100%; }
    .as-headline{ font-size:32px; }
    .as-subtext{ max-width:100%; }
    .as-badge{ left:22px; right:22px; bottom:26px; }
    .as-badge__pill{ max-width:none; }
    .as-back{ left:20px; top:82px; }
    .as-capture__title{ font-size:26px; }
    .as-capture__actions{ flex-direction:column; width:100%; }
    .as-btn-outline{ width:100%; text-align:center; }
    .as-iqm__layout{ grid-template-columns:1fr; padding:140px 20px 0; gap:32px; }
    .as-iqm__back{ left:20px; top:82px; }
    .as-score{ align-items:stretch; }
    .as-score__ring{ align-self:center; }
    .as-btn-primary{ align-self:stretch; text-align:center; }

    .as-analyse__layout{ grid-template-columns:1fr; padding:140px 20px 0; gap:32px; }
    .as-questionnaire__layout,
    .as-triage__layout{ grid-template-columns:1fr; padding:140px 20px 0; gap:24px; }
    .as-questionnaire__main,
    .as-triage__main{ padding:26px; }
    .as-triage__metrics{ grid-template-columns:1fr; }

    .as-rapport__summary{ grid-template-columns:1fr; padding:24px 20px 0; }
    .as-rapport__actions{ padding:20px 20px 0; }
    .as-rapport__scores,
    .as-rapport__narrative,
    .as-rapport__routine{ padding:0 20px; }
    .as-scores-grid{ grid-template-columns:1fr 1fr; padding:22px; }
    .as-rapport__routine-layout{ grid-template-columns:1fr; }
    .as-routine-products{ grid-template-columns:1fr 1fr; }
  }