:root{
    /* Co-branding CIGRAC + SODISTRA */
    --sodistra-blue:#09285D;   /* bleu marine SODISTRA */
    --sodistra-blue-2:#164a94;
    --cigrac-orange:#E4440D;   /* orange CIGRAC */
    --cigrac-orange-2:#ff6a34;
    --cigrac-charcoal:#282F37; /* anthracite CIGRAC */
    --asphalt:#071B3D;         /* fond, dérivé du bleu SODISTRA */
    --panel:#0E2C52;
    --panel-2:#123a6b;
    --line:#234a7f;
    --orange:#E4440D;
    --orange-deep:#B8350A;
    --blue:#164a94;
    --yellow:#FFC53D;
    --concrete:#EAF0F6;
    --muted:#9DB3CC;
    --green:#38B36B;
    --display:'Oswald',Impact,'Arial Narrow',sans-serif;
    --body:'Inter',system-ui,sans-serif;
  }
  *{box-sizing:border-box}
  /* Un élément masqué par l'attribut hidden doit le rester, même si sa classe
     lui donne un display (block, flex…) : sinon la règle de classe l'emporte. */
  [hidden]{display:none !important}
  html,body{height:100%}
  body{
    margin:0;font-family:var(--body);color:var(--concrete);
    background:
      radial-gradient(1200px 600px at 15% -10%, rgba(22,74,148,.35) 0%, transparent 60%),
      radial-gradient(1000px 500px at 100% 120%, rgba(228,68,13,.14) 0%, transparent 55%),
      var(--asphalt);
    overflow:hidden;
    -webkit-font-smoothing:antialiased;
  }
  /* co-brand stripe : bleu SODISTRA → orange CIGRAC */
  .hazard{
    height:8px;width:100%;
    background:linear-gradient(90deg,var(--sodistra-blue-2) 0%,var(--sodistra-blue-2) 48%,var(--cigrac-orange) 52%,var(--cigrac-orange) 100%);
    opacity:.95;
  }
  .stage{
    position:fixed;inset:0;display:flex;flex-direction:column;
  }
  .brandbar{
    display:flex;align-items:center;gap:16px;padding:18px 40px;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .cobrand{display:flex;align-items:center;gap:14px}
  .logo-chip{background:#fff;border-radius:12px;padding:9px 16px;display:flex;align-items:center;
    box-shadow:0 6px 18px -8px rgba(0,0,0,.5)}
  .logo-chip img{height:clamp(30px,3.2vw,48px);width:auto;display:block}
  .cobrand .amp{font-family:var(--display);font-weight:600;font-size:22px;color:var(--muted)}
  .tagbadge{margin-left:auto;text-align:right}
  .kicker{
    font-family:var(--body);font-weight:700;font-size:13px;letter-spacing:3px;
    text-transform:uppercase;color:var(--concrete);
  }
  .kicker small{display:block;font-weight:600;font-size:11px;letter-spacing:3px;
    color:var(--cigrac-orange-2);margin-top:3px}
  .content{flex:1;position:relative;overflow:hidden}
  .screen{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    padding:32px 48px;opacity:0;pointer-events:none;transform:translateY(14px);
    transition:opacity .45s ease, transform .45s ease;
  }
  .screen.active{opacity:1;pointer-events:auto;transform:none}

  /* ---- ATTRACT ---- */
  /* Pas de position:relative ici : un sélecteur d'ID écraserait le
     position:absolute de .screen, l'écran perdrait son inset:0 et se
     réduirait à la hauteur de son contenu, collé en haut. `absolute`
     sert déjà de référence aux .floaties positionnées à l'intérieur. */
  #attract{flex-direction:column;text-align:center;cursor:pointer;overflow:hidden}
  #attract > *:not(.floaties){position:relative;z-index:1}
  .floaties{position:absolute;inset:0;pointer-events:none;z-index:0}
  .floatie{position:absolute;opacity:.14;animation:bob 6s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-20px) rotate(5deg)}}
  @media (prefers-reduced-motion:reduce){.floatie{animation:none}}
  .att-eyebrow .em, .pulse-cta .em{filter:none}
  .att-eyebrow{font-family:var(--body);font-weight:600;letter-spacing:6px;
    text-transform:uppercase;color:var(--muted);font-size:14px;margin-bottom:10px}
  .att-title{font-family:var(--display);font-weight:700;line-height:.92;
    font-size:clamp(52px,9vw,132px);text-wrap:balance;margin:0}
  .att-title .l1{color:var(--concrete)}
  .att-title .l2{color:var(--orange);display:block}
  .att-sub{max-width:720px;color:var(--muted);font-size:clamp(16px,1.8vw,22px);
    line-height:1.5;margin:22px auto 0}
  .pulse-cta{
    margin-top:46px;display:inline-flex;align-items:center;gap:14px;
    font-family:var(--display);font-weight:600;letter-spacing:3px;text-transform:uppercase;
    font-size:26px;color:var(--asphalt);background:var(--yellow);
    padding:20px 44px;border-radius:100px;animation:pulse 1.8s infinite ease-in-out;
  }
  @keyframes pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,197,61,.45)}
    50%{transform:scale(1.04);box-shadow:0 0 0 22px rgba(255,197,61,0)}}
  @media (prefers-reduced-motion:reduce){.pulse-cta{animation:none}}

  /* ---- generic panels ---- */
  .card{
    width:100%;max-width:920px;background:linear-gradient(180deg,var(--panel) 0%,rgba(22,39,61,.6) 100%);
    border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:40px 46px;
    box-shadow:0 30px 80px -30px rgba(0,0,0,.7);
  }
  .step{font-family:var(--body);font-weight:600;letter-spacing:3px;text-transform:uppercase;
    color:var(--orange);font-size:13px}
  h2.big{font-family:var(--display);font-weight:600;font-size:clamp(32px,4vw,52px);
    margin:8px 0 6px;line-height:1;text-wrap:balance}
  .lead{color:var(--muted);font-size:17px;margin:0 0 26px}

  /* ---- FORM ---- */
  .grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
  .field{display:flex;flex-direction:column;gap:8px}
  .field.full{grid-column:1/-1}
  label{font-size:13px;font-weight:600;letter-spacing:.5px;color:var(--concrete)}
  label .req{color:var(--orange)}
  input,select{
    font-family:var(--body);font-size:18px;color:var(--concrete);
    background:var(--asphalt);border:1.5px solid var(--line);border-radius:12px;
    padding:14px 16px;outline:none;transition:border-color .2s, box-shadow .2s;
  }
  input::placeholder{color:#5c738f}
  input:focus,select:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(245,130,32,.18)}
  select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%239DB3CC'><path d='M4 6l4 4 4-4'/></svg>");
    background-repeat:no-repeat;background-position:right 16px center}
  .err{color:#ff8f6b;font-size:13px;min-height:16px;margin-top:2px}

  .btn{
    font-family:var(--display);font-weight:600;letter-spacing:2px;text-transform:uppercase;
    font-size:22px;border:none;border-radius:100px;padding:18px 40px;cursor:pointer;
    transition:transform .12s ease, filter .2s ease;
  }
  .btn:active{transform:translateY(2px)}
  .btn-primary{background:linear-gradient(180deg,var(--orange),var(--orange-deep));color:#fff;
    box-shadow:0 12px 30px -10px rgba(245,130,32,.7)}
  .btn-primary:hover{filter:brightness(1.06)}
  .btn-ghost{background:transparent;color:var(--muted);border:1.5px solid var(--line)}
  .form-actions{display:flex;justify-content:flex-end;gap:14px;margin-top:30px}
  .consent{grid-column:1/-1;display:flex;align-items:flex-start;gap:12px;color:var(--muted);font-size:14px;line-height:1.4}
  .consent input{width:22px;height:22px;flex:none;accent-color:var(--orange)}

  /* ---- QUIZ ---- */
  .quiz-wrap{width:100%;max-width:960px}
  .progress{display:flex;gap:10px;margin-bottom:22px}
  .dot{flex:1;height:8px;border-radius:6px;background:var(--panel-2)}
  .dot.done{background:var(--green)}
  .dot.current{background:var(--orange)}
  .qtext{font-family:var(--display);font-weight:500;font-size:clamp(28px,3.6vw,44px);
    line-height:1.08;margin:6px 0 28px;text-wrap:balance}
  .answers{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .ans{
    text-align:left;font-family:var(--body);font-size:20px;font-weight:500;color:var(--concrete);
    background:var(--panel);border:1.5px solid var(--line);border-radius:14px;
    padding:20px 22px;cursor:pointer;transition:border-color .15s, background .15s, transform .1s;
    display:flex;align-items:center;gap:14px;
  }
  .ans:hover{border-color:var(--orange)}
  .ans .k{font-family:var(--display);font-weight:600;color:var(--orange);font-size:20px;
    width:34px;height:34px;flex:none;display:grid;place-items:center;
    border:1.5px solid var(--line);border-radius:8px}
  .ans.correct{border-color:var(--green);background:rgba(56,179,107,.14)}
  .ans.correct .k{border-color:var(--green);color:var(--green)}
  .ans.wrong{border-color:#ff8f6b;background:rgba(255,143,107,.12)}
  .ans.disabled{pointer-events:none;opacity:.55}
  .ans.disabled.correct,.ans.disabled.wrong{opacity:1}
  .fact{
    margin-top:24px;background:rgba(245,130,32,.10);border:1px solid rgba(245,130,32,.35);
    border-radius:14px;padding:18px 22px;display:none;gap:16px;align-items:center;
  }
  .fact.show{display:flex;animation:fadein .4s ease}
  @keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .fact .ico{font-family:var(--display);font-weight:700;font-size:34px;color:var(--yellow);flex:none}
  .fact p{margin:0;font-size:17px;line-height:1.45}
  .fact b{color:var(--yellow)}
  .quiz-next{margin-top:24px;display:flex;justify-content:flex-end}

  /* ---- WHEEL ---- */
  #wheel-screen .wheel-layout{
    width:100%;max-width:760px;display:flex;flex-direction:column;
    gap:30px;align-items:center;text-align:center;
  }
  .wheel-copy .step{margin-bottom:6px}
  .wheel-copy h2{margin-top:2px}
  .wheel-copy p{color:var(--muted);font-size:clamp(18px,2.4vw,24px);line-height:1.5;max-width:560px;margin:0 auto}
  .wheel-stage{position:relative;display:grid;place-items:center}
  .wheel-box{position:relative;width:min(82vw,60vh,760px);aspect-ratio:1}
  canvas{width:100%;height:100%;display:block;
    filter:drop-shadow(0 20px 40px rgba(0,0,0,.55))}
  .pointer{
    position:absolute;top:-6px;left:50%;transform:translateX(-50%);
    width:0;height:0;border-left:22px solid transparent;border-right:22px solid transparent;
    border-top:38px solid var(--yellow);z-index:3;
    filter:drop-shadow(0 4px 4px rgba(0,0,0,.4));
  }
  .hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:74px;height:74px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#fff,#d9dee6 60%,#aeb6c2);
    border:5px solid var(--asphalt);z-index:2;display:grid;place-items:center;
    font-family:var(--display);font-weight:700;color:var(--orange);font-size:32px;letter-spacing:1px}
  .spin-btn{margin-top:34px}
  .spin-btn:disabled{opacity:.5;cursor:not-allowed}

  /* ---- RESULT ---- */
  #result-screen{flex-direction:column;text-align:center}
  .rc-eyebrow{font-family:var(--body);font-weight:600;letter-spacing:5px;text-transform:uppercase;
    color:var(--green);font-size:15px}
  .prize-name{font-family:var(--display);font-weight:700;font-size:clamp(44px,7vw,96px);
    line-height:.95;margin:10px 0;color:var(--yellow);text-wrap:balance}
  .prize-sub{color:var(--muted);font-size:20px;max-width:640px;margin:0 auto}
  .again{margin-top:40px;display:flex;gap:16px;justify-content:center}

  .foot-note{color:#63799a;font-size:12px;letter-spacing:1px}


  /* ---- AJOUTS : état réseau, file d'attente, écrans utilitaires ---- */
  .netbadge{
    position:fixed;right:14px;bottom:14px;z-index:50;
    display:flex;align-items:center;gap:8px;
    padding:8px 14px;border-radius:999px;
    background:rgba(14,44,82,.9);border:1px solid var(--line);
    font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
    color:var(--muted);backdrop-filter:blur(6px);
    transition:opacity .3s ease;
  }
  .netbadge .dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none}
  .netbadge.online  .dot{background:var(--green);box-shadow:0 0 10px var(--green)}
  .netbadge.offline .dot{background:var(--yellow);box-shadow:0 0 10px var(--yellow)}
  .netbadge.offline{color:var(--yellow)}
  .netbadge .queue{
    background:var(--orange);color:#fff;border-radius:999px;
    padding:1px 8px;font-size:11px;
  }
  .netbadge .queue[hidden]{display:none}

  /* Écran « jeu fermé » */
  #closed-screen{flex-direction:column;text-align:center;gap:18px}
  #closed-screen .big{margin:0}
  #closed-screen .closed-msg{color:var(--muted);font-size:18px;max-width:640px;margin:0 auto}

  /* Bandeau lot épuisé sur l'écran résultat */
  .soldout-note{
    margin-top:10px;font-size:13px;color:var(--yellow);
  }

  /* Toast discret (synchro, erreurs) */
  .toast{
    position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);
    z-index:60;padding:12px 22px;border-radius:12px;
    background:var(--panel-2);border:1px solid var(--line);
    color:var(--concrete);font-size:14px;font-weight:600;
    opacity:0;pointer-events:none;transition:opacity .3s ease, transform .3s ease;
  }
  .toast.show{opacity:1;transform:translate(-50%,0)}

  /* Bouton d'administration discret sur l'écran d'accueil */
  .admin-dot{
    position:fixed;left:0;top:0;width:64px;height:64px;z-index:40;
    opacity:0;cursor:default;border:0;background:transparent;
  }

  @media print{ .netbadge,.toast,.admin-dot{display:none} }

  /* ================================================================
     HABILLAGE — relief, matière et animation
     ================================================================ */

  /* ---- Couche de confettis, au-dessus de tout mais non cliquable ---- */
  .confetti-layer{
    position:fixed;inset:0;z-index:70;pointer-events:none;
  }

  /* ---- ACCUEIL : roue fantôme et titre vivant ---- */
  #attract::before{
    content:"";
    position:absolute;left:50%;top:50%;
    /* 145vmax dépasse toujours la diagonale de l'écran : les rayons couvrent
       toute la surface, en portrait comme en paysage, sans bord visible. */
    width:145vmax;aspect-ratio:1;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:conic-gradient(
      from 0deg,
      rgba(228,68,13,.10) 0deg 45deg, transparent 45deg 90deg,
      rgba(22,74,148,.14) 90deg 135deg, transparent 135deg 180deg,
      rgba(255,197,61,.09) 180deg 225deg, transparent 225deg 270deg,
      rgba(228,68,13,.10) 270deg 315deg, transparent 315deg 360deg);
    animation:ghost-turn 48s linear infinite;
    pointer-events:none;z-index:0;
  }
  @keyframes ghost-turn{to{transform:translate(-50%,-50%) rotate(360deg)}}

  .att-title{position:relative}
  /* Reflet qui balaie le titre, discret et espacé. */
  .att-title .l2{
    background:linear-gradient(100deg,
      var(--cigrac-orange) 0%, var(--cigrac-orange) 38%,
      #ffb07a 47%, var(--cigrac-orange) 56%, var(--cigrac-orange) 100%);
    background-size:280% 100%;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    animation:sheen 7s ease-in-out infinite;
  }
  @keyframes sheen{
    0%,72%{background-position:120% 0}
    88%,100%{background-position:-40% 0}
  }

  .pulse-cta{
    box-shadow:0 10px 30px -10px rgba(255,197,61,.55);
    transition:transform .18s ease, box-shadow .18s ease;
  }
  #attract:active .pulse-cta{
    transform:scale(.97);
    box-shadow:0 6px 18px -10px rgba(255,197,61,.6);
  }

  /* ---- ROUE : socle, halo et pointeur qui tique ---- */
  .wheel-box{position:relative}
  .wheel-box::before{
    content:"";
    position:absolute;left:50%;top:50%;
    width:96%;aspect-ratio:1;transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,197,61,.16) 0%,transparent 68%);
    pointer-events:none;
    animation:halo 4.5s ease-in-out infinite;
  }
  @keyframes halo{50%{opacity:.45}}

  .pointer{
    filter:drop-shadow(0 4px 10px rgba(4,12,28,.7));
    transform-origin:50% 0;
    transition:transform .07s ease-out;
  }
  .wheel-box.ticking .pointer{transform:rotate(var(--kick,0deg))}

  .spin-btn{
    position:relative;overflow:hidden;
    transition:transform .16s ease, box-shadow .16s ease;
  }
  .spin-btn:not(:disabled):hover{transform:translateY(-2px)}
  .spin-btn:not(:disabled):active{transform:translateY(1px) scale(.99)}
  /* Éclat qui traverse le bouton pour attirer l'œil vers l'action. */
  .spin-btn:not(:disabled)::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.32) 50%,transparent 65%);
    transform:translateX(-120%);
    animation:glint 3.4s ease-in-out infinite;
  }
  @keyframes glint{0%,55%{transform:translateX(-120%)}80%,100%{transform:translateX(120%)}}
  .spin-btn:disabled::after{display:none}

  .prize-name{animation:prize-in .55s cubic-bezier(.2,1.3,.4,1) both}
  @keyframes prize-in{
    from{opacity:0;transform:translateY(16px) scale(.94)}
    to{opacity:1;transform:none}
  }

  /* ---- FORMULAIRE : repères d'étape plus lisibles ---- */
  .field input:focus,.field select:focus{
    outline:2px solid var(--cigrac-orange);outline-offset:2px;
  }
  .field input,.field select{transition:border-color .15s ease, background .15s ease}

  /* ---- Bouton de coupure du son, discret ---- */
  .sound-toggle{
    position:fixed;right:14px;top:14px;z-index:55;
    width:42px;height:42px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:rgba(14,44,82,.85);border:1px solid var(--line);
    color:var(--muted);font-size:17px;cursor:pointer;
    backdrop-filter:blur(6px);transition:color .15s ease, border-color .15s ease;
  }
  .sound-toggle:hover{color:var(--concrete);border-color:var(--cigrac-orange)}
  .sound-toggle:focus-visible{outline:2px solid var(--cigrac-orange);outline-offset:2px}

  @media (prefers-reduced-motion:reduce){
    #attract::before,.att-title .l2,.wheel-box::before,
    .spin-btn::after,.prize-name{
      animation:none;
    }
    .att-title .l2{color:var(--cigrac-orange);-webkit-text-fill-color:currentColor}
  }

  /* ================================================================
     ORIENTATION PORTRAIT — écran de stand dressé à la verticale
     Le manifeste ne force plus le paysage : l'application prend
     l'orientation réelle de l'écran, et la mise en page suit.
     ================================================================ */

  /* Sur Android en plein écran, 100vh peut dépasser la hauteur réellement
     visible ; dvh suit la zone effectivement affichée. */
  @supports (height: 100dvh){
    .stage{height:100dvh}
    .wheel-box{width:min(86vw,52dvh,1100px)}
  }

  @media (orientation:portrait){
    /* Beaucoup de hauteur, peu de largeur : on respire verticalement
       et la roue occupe toute la largeur utile. */
    .screen{padding:clamp(24px,4vh,64px) clamp(20px,5vw,56px)}

    .att-title{font-size:clamp(56px,11vw,150px)}
    .att-eyebrow{font-size:clamp(13px,1.8vw,20px);letter-spacing:5px}
    .att-sub{font-size:clamp(17px,2.4vw,28px);max-width:min(90vw,760px)}
    .pulse-cta{font-size:clamp(22px,3.4vw,40px);padding:clamp(18px,2.6vh,30px) clamp(34px,6vw,64px)}

    #wheel-screen .wheel-layout{max-width:min(92vw,900px);gap:clamp(20px,3vh,44px)}
    .wheel-box{width:min(88vw,46dvh,900px)}
    .wheel-copy p{font-size:clamp(17px,2.2vw,26px);max-width:min(88vw,640px)}

    .card{max-width:min(92vw,860px);padding:clamp(26px,3.4vh,44px) clamp(22px,4vw,48px)}
    .grid{grid-template-columns:1fr}

    .prize-name{font-size:clamp(38px,7vw,96px)}
  }

  /* Écran très haut (55" dressé) : on agrandit encore, l'affichage se lit de loin. */
  @media (orientation:portrait) and (min-width:900px){
    .att-eyebrow{font-size:22px}
    .att-sub{font-size:30px}
    .pulse-cta{font-size:42px}
    .wheel-copy p{font-size:28px}
    .step{font-size:20px}
    .field label{font-size:20px}
    .field input,.field select{font-size:26px;padding:18px 20px}
    .btn{font-size:24px;padding:20px 38px}
    .consent span{font-size:20px}
    .prize-sub{font-size:26px}
  }

  /* Le bouton de coupure du son flotte au-dessus de la barre de marque :
     on lui réserve sa place pour qu'il ne morde pas sur le nom du salon. */
  .brandbar{padding-right:78px}
  @media (orientation:portrait){
    .brandbar{padding:14px 74px 14px 20px;gap:10px}
    .kicker{font-size:12px;letter-spacing:2px}
    .logo-chip img{height:clamp(26px,4.4vw,44px)}
  }

  /* ================================================================
     QUESTIONNAIRE — une question par écran
     ================================================================ */
  #quiz-screen .quiz-wrap{max-width:min(94vw,980px)}
  /* Sans cet écart, la barre de progression se lit comme un soulignement de l'étape. */
  #quiz-screen .step{margin-bottom:16px}
  #quiz-screen .progress{margin-bottom:26px}
  .quiz-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}
  .quiz-brand{
    display:inline-block;padding:6px 14px;border-radius:999px;
    font-family:var(--body);font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;
    background:rgba(228,68,13,.16);color:var(--cigrac-orange-2);border:1px solid rgba(228,68,13,.45);
  }
  /* Chaque entreprise garde sa couleur : orange CIGRAC, bleu SODISTRA. */
  .quiz-brand[data-brand="sodistra"]{
    background:rgba(22,74,148,.28);color:#9cc0ff;border-color:rgba(22,74,148,.8);
  }
  .quiz-count{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
  #quiz-screen .qtext{margin:14px 0 26px}
  #quiz-screen .answers{grid-template-columns:1fr}
  .ans .t{flex:1}
  .ans:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

  /* La bonne réponse clignote en vert : trois éclats, puis reste allumée. */
  .ans.correct.blink{animation:clignote-vert .5s ease-in-out 3}
  @keyframes clignote-vert{
    0%,100%{background:rgba(56,179,107,.14);box-shadow:0 0 0 0 rgba(56,179,107,0)}
    50%{background:rgba(56,179,107,.55);box-shadow:0 0 0 6px rgba(56,179,107,.35)}
  }
  /* La mauvaise réponse choisie tremble brièvement. */
  .ans.wrong.shake{animation:secousse .42s ease}
  @keyframes secousse{
    0%,100%{transform:translateX(0)}
    20%{transform:translateX(-9px)} 40%{transform:translateX(8px)}
    60%{transform:translateX(-6px)} 80%{transform:translateX(4px)}
  }
  .ans.wrong .k{border-color:#ff8f6b;color:#ff8f6b}

  .fact.ok{background:rgba(56,179,107,.12);border-color:rgba(56,179,107,.5)}
  .fact.ok .ico{color:var(--green)}
  .fact.ko{background:rgba(255,143,107,.10);border-color:rgba(255,143,107,.45)}
  .fact.ko .ico{color:#ff8f6b}
  .fact.ok b{color:#9be8bb}
  .fact.ko b{color:#ffc2ad}
  .quiz-next .btn:disabled{opacity:.4;cursor:not-allowed}

  @media (prefers-reduced-motion:reduce){
    .ans.correct.blink,.ans.wrong.shake{animation:none}
  }

  /* Écran de résultat : photo du lot, entreprise qui l'offre, score du quiz. */
  .prize-img{
    display:block;margin:18px auto 6px;
    width:clamp(150px,22vw,300px);aspect-ratio:1;object-fit:cover;
    border-radius:24px;background:#fff;border:5px solid #fff;
    box-shadow:0 20px 50px -18px rgba(0,0,0,.7);
    animation:prize-in .55s cubic-bezier(.2,1.3,.4,1) both;
  }
  .prize-brand{
    margin:2px auto 10px;font-family:var(--body);font-weight:700;font-size:14px;
    letter-spacing:3px;text-transform:uppercase;color:var(--muted);
  }
  .quiz-score{
    margin:14px auto 0;display:inline-block;padding:7px 16px;border-radius:999px;
    background:rgba(255,255,255,.06);border:1px solid var(--line);
    color:var(--concrete);font-size:15px;font-weight:600;
  }

  @media (orientation:portrait){
    #quiz-screen .qtext{font-size:clamp(30px,5.4vw,64px)}
    .ans{font-size:clamp(20px,3vw,34px);padding:clamp(18px,2.2vh,30px) clamp(18px,3vw,30px)}
    .ans .k{width:clamp(34px,4.6vw,52px);height:clamp(34px,4.6vw,52px);font-size:clamp(18px,2.6vw,28px)}
    .fact p{font-size:clamp(16px,2.3vw,26px)}
    .quiz-brand{font-size:clamp(12px,1.7vw,18px)}
    .quiz-count{font-size:clamp(13px,1.8vw,20px)}
    .prize-img{width:clamp(180px,38vw,420px)}
  }

  /* ================================================================
     RESPONSIVE — téléphone, tablette, ordinateur (la borne reste inchangée)
     ================================================================ */

  /* Chaque écran défile si son contenu dépasse, au lieu d'être coupé en haut
     et en bas. Quand tout tient, les marges automatiques le recentrent :
     un centrage flex classique rognerait le haut dès que ça déborde. */
  .screen{
    flex-direction:column;justify-content:flex-start;align-items:center;
    overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  #form-screen > .card,#quiz-screen > .card,#wheel-screen > .wheel-layout{margin-block:auto;flex:none}
  /* Un champ a une largeur minimale implicite (~20 caractères) : sans ceci il
     déborde de sa colonne sur les écrans étroits. */
  .grid > *,.field{min-width:0}
  .field input,.field select{width:100%;min-width:0}
  #attract .att-eyebrow,#result-screen .rc-eyebrow,#closed-screen .big{margin-top:auto}
  #attract .pulse-cta,#result-screen .again,#closed-screen .closed-msg{margin-bottom:auto}
  /* Place pour l'indicateur réseau, qui flotte en bas à droite. */
  .screen{padding-bottom:max(56px,clamp(24px,4vh,64px))}

  /* ---- Portables et écrans larges peu hauts (1366 × 768…) ----
     Limité au paysage : la borne, en portrait, garde sa grande photo. */
  @media (orientation:landscape){
    .prize-img{width:clamp(130px,min(22vw,30dvh),300px)}
    .prize-name{font-size:clamp(38px,min(7vw,11dvh),96px)}
    .again{margin-top:clamp(18px,4dvh,40px)}
  }

  /* Roue à côté du texte dès que l'écran est plus large que haut : la hauteur
     ne suffit pas pour empiler le texte, le bouton et une roue lisible. */
  @media (orientation:landscape) and (min-width:700px){
    #wheel-screen .wheel-layout{
      max-width:1240px;display:grid;grid-template-columns:minmax(0,1fr) auto;
      align-items:center;gap:clamp(24px,4vw,64px);text-align:left;
    }
    #wheel-screen .wheel-copy p{margin:0}
    #wheel-screen .spin-btn{margin-top:clamp(16px,3dvh,34px)}
    .wheel-box{width:min(48vw,calc(100dvh - 210px),760px)}
  }

  @media (orientation:landscape) and (max-height:860px){
    .card{padding:clamp(18px,3dvh,36px) clamp(22px,3vw,44px)}
    .lead{margin-bottom:16px}
    .grid{gap:12px 20px}
    input,select{padding:11px 14px;font-size:16px}
    .form-actions{margin-top:18px}
    .qtext{font-size:clamp(22px,min(3.4vw,5.4dvh),44px)}
    #quiz-screen .step{margin-bottom:10px}
    #quiz-screen .progress{margin-bottom:14px}
    #quiz-screen .qtext{margin:8px 0 16px}
    .answers{gap:10px}
    .ans{padding:12px 18px;font-size:18px}
    .fact{margin-top:14px;padding:12px 18px}
    .fact p{font-size:15px}
    .quiz-next{margin-top:14px}
    .btn{font-size:19px;padding:14px 32px}
    h2.big{font-size:clamp(28px,min(4vw,7dvh),52px)}
  }

  /* ---- Téléphone à l'horizontale : très peu de hauteur ---- */
  @media (orientation:landscape) and (max-height:500px){
    .hazard{height:4px}
    .brandbar{padding:6px 64px 6px 16px}
    .logo-chip{padding:5px 10px;border-radius:9px}
    .logo-chip img{height:22px}
    .sound-toggle{top:6px;right:10px;width:34px;height:34px;font-size:14px}
    .screen{padding:12px 20px 48px}
    .att-eyebrow{font-size:11px;letter-spacing:3px;margin-bottom:4px}
    .att-title{font-size:clamp(34px,min(8vw,15dvh),80px)}
    .att-sub{font-size:14px;margin-top:8px}
    .pulse-cta{margin-top:14px;font-size:18px;padding:12px 30px}
    .floaties{display:none}
    .wheel-box{width:min(46vw,calc(100dvh - 90px))}
    .wheel-copy p{font-size:14px}
    .hub{width:48px;height:48px;font-size:22px;border-width:3px}
    .pointer{border-left-width:14px;border-right-width:14px;border-top-width:24px}
    .prize-img{width:min(24dvh,130px);margin-top:8px}
    .prize-sub{font-size:15px}
  }

  /* ---- Téléphone (et petite tablette) à la verticale ---- */
  @media (max-width:600px){
    /* En-tête : les deux logos suffisent, le nom du salon mangerait la place. */
    .tagbadge{display:none}
    .brandbar{padding:10px 60px 10px 14px;gap:8px}
    .cobrand{gap:8px}
    .logo-chip{padding:6px 10px;border-radius:9px}
    .logo-chip img{height:clamp(20px,6vw,28px)}
    .cobrand .amp{font-size:16px}
    .sound-toggle{top:9px;right:10px;width:36px;height:36px;font-size:15px}
    .hazard{height:5px}

    .screen{padding:18px 14px 64px}
    .card{padding:22px 18px;border-radius:18px}

    .att-eyebrow{font-size:11px;letter-spacing:3px}
    .att-title{font-size:clamp(46px,15vw,72px)}
    .att-sub{font-size:16px}
    .pulse-cta{font-size:19px;letter-spacing:2px;padding:16px 28px;margin-top:30px;white-space:nowrap}

    h2.big{font-size:clamp(28px,8.5vw,38px)}
    .lead{font-size:15px;margin-bottom:18px}
    .step{font-size:11px;letter-spacing:2px}
    label{font-size:13px}
    /* 16 px minimum : en dessous, iOS zoome sur le champ touché. */
    input,select{font-size:16px;padding:12px 14px}
    .grid{gap:12px}
    .consent{font-size:13px}
    .form-actions{flex-wrap:wrap;margin-top:20px}
    .form-actions .btn{flex:1 1 auto}
    .btn{font-size:17px;letter-spacing:1.5px;padding:14px 22px}

    #quiz-screen .qtext{font-size:clamp(24px,7vw,32px);margin:10px 0 18px}
    .quiz-brand{font-size:11px;padding:5px 10px}
    .quiz-count{font-size:12px}
    #quiz-screen .progress{gap:6px;margin-bottom:16px}
    .answers{gap:10px}
    .ans{font-size:16px;padding:13px 14px;gap:12px}
    .ans .k{width:30px;height:30px;font-size:16px}
    .fact{padding:12px 14px;gap:12px;margin-top:14px}
    .fact .ico{font-size:26px}
    .fact p{font-size:14px}
    .quiz-next{margin-top:16px}
    .quiz-next .btn{width:100%}

    #wheel-screen .wheel-layout{gap:16px}
    .wheel-copy p{font-size:15px}
    .spin-btn{margin-top:18px}
    .wheel-box{width:min(92vw,calc(100dvh - 330px),420px);min-width:250px}
    .hub{width:54px;height:54px;font-size:24px;border-width:4px}
    .pointer{border-left-width:16px;border-right-width:16px;border-top-width:28px}

    .rc-eyebrow{font-size:12px;letter-spacing:3px}
    .prize-img{width:clamp(140px,min(48vw,30dvh),220px);border-radius:18px;border-width:4px}
    .prize-name{font-size:clamp(34px,11vw,52px)}
    .prize-brand{font-size:12px}
    .prize-sub{font-size:16px}
    .quiz-score{font-size:13px}
    .again{margin-top:22px}

    .netbadge{right:10px;bottom:10px;padding:6px 10px;font-size:10px}
    .toast{max-width:calc(100vw - 28px);text-align:center}
  }

  /* Petit écran : l'indicateur réseau se réduit à sa pastille (et au compteur
     de fiches en attente), pour ne pas masquer les boutons du bas. */
  @media (max-width:600px),(orientation:landscape) and (max-height:500px){
    .netbadge{padding:7px;gap:6px}
    .netbadge .label{display:none}
  }

  /* Très petits téléphones (360 × 640 et moins). */
  @media (max-width:380px){
    .att-title{font-size:44px}
    .pulse-cta{font-size:17px;padding:14px 22px}
    .btn{font-size:16px;padding:13px 18px}
    .form-actions .btn{flex:1 1 100%}
  }