@font-face{
    font-family:"Archivo";
    src:url("archivo.woff2") format("woff2");
    font-weight:100 900; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:"Source Serif 4";
    src:url("source-serif-4.woff2") format("woff2");
    font-weight:200 900; font-style:normal; font-display:swap;
  }
  :root{
    color-scheme: dark;
    --fond:#0A1A2A;
    --panneau:#12314A;
    --creux:#0C2033;
    --ivoire:#EFE7D6;
    --doux:#A9BAC9;
    --laiton:#C9A227;
    --rouge:#E14434;
    --vert:#41A177;
    --trait:rgba(201,162,39,.30);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){ --fond:#081521; --panneau:#112E45; }
  }
  :root[data-theme="dark"]{ --fond:#081521; --panneau:#112E45; }

  *{ box-sizing:border-box; }
  img,video{ max-width:100%; height:auto; }
  html{ -webkit-text-size-adjust:100%; }
  body{
    margin:0;
    background:var(--fond);
    background-image:radial-gradient(120% 70% at 50% 0%, rgba(201,162,39,.10) 0%, rgba(10,26,42,0) 60%);
    color:var(--ivoire);
    font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
    font-size:16px;
    line-height:1.5;
    padding:clamp(14px,4vw,40px) clamp(12px,4vw,24px) 64px;
  }

  .panneau{
    max-width:44rem;
    margin:0 auto;
    background:var(--panneau);
    border:1px solid var(--trait);
    border-radius:0 0 14px 14px;
    padding:clamp(20px,5vw,44px);
    box-shadow:inset 0 1px 0 rgba(239,231,214,.10), 0 26px 60px -30px rgba(0,0,0,.9);
  }

  h1{
    font-weight:900;
    font-size:clamp(1.55rem,6.4vw,2.9rem);
    letter-spacing:-.028em;
    line-height:.95;
    margin:0 0 .5rem;
    text-align:center;
  }
  .plaque{
    height:1px;
    background:linear-gradient(90deg,rgba(201,162,39,0),var(--laiton),rgba(201,162,39,0));
    margin:0 0 1.1rem;
  }
  .intro{
    font-family:"Source Serif 4",Georgia,serif;
    font-size:1.03rem;
    line-height:1.65;
    color:var(--doux);
    max-width:56ch;
    margin:0 auto;
    text-align:center;
  }

  /* ---------- cadran ---------- */
  .cadran{ margin:clamp(22px,5vw,34px) 0 0; }
  .cadran svg{ display:block; width:100%; height:auto; max-width:420px; margin:0 auto; }
  #aiguille{
    transform-box:view-box;
    transform-origin:200px 200px;
    transform:rotate(-90deg);
    transition:transform .95s cubic-bezier(.22,.9,.24,1);
  }
  .lecture{
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:.55rem;
    width:fit-content;
    margin:-8px auto 0;
    padding:.35rem .9rem .4rem;
    background:var(--creux);
    border:1px solid var(--trait);
    border-radius:5px;
  }
  .lecture b{ font-size:1.5rem; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
  .lecture span{ font-size:.82rem; color:var(--doux); }

  /* ---------- questions ---------- */
  .questions{ margin-top:clamp(26px,6vw,40px); display:grid; gap:1.6rem; }
  .bloc[hidden]{ display:none; }
  .reveal{ animation:monte .45s cubic-bezier(.2,.8,.25,1) both; }
  @keyframes monte{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

  .bloc > p{
    margin:0 0 .7rem;
    font-size:1.06rem;
    font-weight:600;
    line-height:1.35;
    max-width:48ch;
  }
  .champ{ position:relative; }
  .champ::after{
    content:"";
    position:absolute; right:16px; top:50%; margin-top:-3px;
    border:6px solid transparent; border-top-color:var(--laiton);
    pointer-events:none;
  }
  select{
    appearance:none; -webkit-appearance:none;
    width:100%;
    font:inherit;
    font-weight:600;
    color:var(--ivoire);
    background:var(--creux);
    border:1px solid var(--trait);
    border-radius:7px;
    padding:.82rem 2.6rem .82rem 1rem;
    cursor:pointer;
    text-overflow:ellipsis;
  }
  select:hover{ border-color:var(--laiton); }
  select:focus-visible{ outline:2px solid var(--laiton); outline-offset:2px; }
  option{ background:#0C2033; color:#EFE7D6; }

  /* ---------- verdict ---------- */
  #verdict:empty{ display:none; }
  #verdict{
    margin-top:clamp(26px,6vw,38px);
    padding-top:clamp(22px,5vw,30px);
    border-top:1px solid var(--trait);
  }
  .mot{
    font-weight:900;
    font-size:clamp(2.6rem,14vw,6.4rem);
    line-height:.88;
    letter-spacing:-.045em;
    margin:0;
    color:var(--rouge);
    text-align:center;
  }
  .mot--vert{ color:var(--vert); font-size:clamp(1.7rem,6.6vw,2.9rem); letter-spacing:-.03em; line-height:1.05; text-align:center; }
  .mot--iban{ font-size:clamp(1.25rem,4.6vw,1.9rem); letter-spacing:-.02em; line-height:1.25; color:var(--ivoire); text-align:left; }
  .iban{ display:block; margin-top:.5rem; color:var(--laiton); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.92em; letter-spacing:.02em; }
  .minus{ font-size:.82rem; color:var(--doux); opacity:.75; margin:.6rem 0 0; }
  .meme{ display:block; width:100%; max-width:340px; height:auto; margin:0 auto; border:1px solid var(--trait); border-radius:4px; }
  .video{ display:block; width:100%; max-width:520px; height:auto; margin:0 auto; border:1px solid var(--trait); border-radius:4px; background:#000; }
  .video--sous{ margin-top:1.3rem; }
  .boutons{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.6rem; }
  .rejouer{
    font:inherit; font-weight:600; font-size:.92rem;
    color:var(--ivoire);
    background:transparent;
    border:1px solid var(--trait);
    border-radius:7px;
    padding:.6rem 1.1rem;
    cursor:pointer;
  }
  .rejouer:hover{ border-color:var(--laiton); color:var(--laiton); }
  .rejouer:focus-visible{ outline:2px solid var(--laiton); outline-offset:2px; }


  @media (prefers-reduced-motion: reduce){
    #aiguille{ transition:none; }
    .reveal{ animation:none; }
  }

  /* ---------- onglets ---------- */
  .onglets{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:.3rem;
    max-width:44rem;
    margin:0 auto;
    padding:0 clamp(10px,4vw,24px);
    position:relative;
    z-index:1;
  }
  .onglets a{
    font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
    font-size:.9rem;
    font-weight:600;
    color:var(--doux);
    text-decoration:none;
    padding:.6rem 1.05rem .65rem;
    background:var(--creux);
    border:1px solid var(--trait);
    border-bottom:none;
    border-radius:9px 9px 0 0;
    margin-bottom:-1px;
  }
  .onglets a:hover{ color:var(--ivoire); border-color:var(--laiton); }
  .onglets a:focus-visible{ outline:2px solid var(--laiton); outline-offset:2px; }
  .onglets a[aria-current]{ background:var(--panneau); color:var(--ivoire); border-top-color:var(--laiton); box-shadow:inset 0 2px 0 var(--laiton); }
  @media (max-width:430px){
    .onglets a{ font-size:.78rem; padding:.5rem .7rem .55rem; }
  }

  /* ---------- verdicts de la page blanchiment ---------- */
  .mot--avis{
    font-size:clamp(1.1rem,4.1vw,1.6rem);
    letter-spacing:-.005em;
    line-height:1.35;
    max-width:36ch;
    margin:0 auto;
  }
  .mot--moyen{ color:var(--ivoire); font-size:clamp(1.7rem,6.6vw,2.9rem); letter-spacing:-.03em; line-height:1.1; }
  .image{ display:block; width:100%; max-width:520px; height:auto; margin:1.3rem auto 0; border:1px solid var(--trait); border-radius:4px; }