/* =====================================================================
   Quality summer quizz — identité OVHcloud
   Palette : #000E9C bleu profond (primaire), #59D2EF turquoise (accent),
   #122844 bleu nuit (texte), fond clair lumineux façon ovh.com.
   Esprit Wooclap / Kahoot : grandes cartes colorées, formes par option,
   gros chrono, podium animé.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap');

:root{
  --ovh-blue:#000E9C;       /* primaire */
  --ovh-blue-2:#0a1fd1;
  --ovh-turq:#59D2EF;       /* accent */
  --ovh-turq-deep:#1ba5c9;
  --ovh-night:#122844;      /* texte / fonds sombres */
  --ovh-night-2:#1c3a63;

  --ink:#122844;
  --muted:#5b6b82;
  --line:#e3e8f0;
  --bg:#f5f8fc;
  --card:#ffffff;
  --good:#16b981;
  --bad:#ef4444;
  --warn:#f59e0b;

  /* couleurs "façon Kahoot" pour les réponses (associées à des formes) */
  --c1:#e4365a;  /* rouge   - triangle */
  --c2:#1f7ae0;  /* bleu    - losange  */
  --c3:#f0a118;  /* ambre   - rond     */
  --c4:#1aab6b;  /* vert    - carré    */

  --radius:18px;
  --radius-sm:12px;
  --shadow:0 12px 32px -12px rgba(18,40,68,.22);
  --shadow-lg:0 24px 60px -20px rgba(0,14,156,.3);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:'Inter',system-ui,sans-serif;color:var(--ink);
  background:
    radial-gradient(1200px 600px at 85% -15%, rgba(89,210,239,.18), transparent 60%),
    radial-gradient(900px 600px at -5% 110%, rgba(0,14,156,.07), transparent 55%),
    var(--bg);
  min-height:100vh;line-height:1.5;
}
h1,h2,h3{margin:0;line-height:1.1;letter-spacing:-.02em;font-weight:800}
.mono{font-family:'Space Mono',monospace}
a{color:var(--ovh-blue);text-decoration:none;font-weight:600}
button{font-family:inherit}

.wrap{max-width:1060px;margin:0 auto;padding:26px 20px 80px}
.wrap-narrow{max-width:540px}

/* --- topbar / brand --- */
.topbar{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.brand{display:flex;align-items:center;gap:13px;font-weight:900;font-size:19px;letter-spacing:-.02em;color:var(--ovh-night)}
.brand .mark{
  width:40px;height:40px;border-radius:11px;flex:none;position:relative;
  background:#fff url("logo-ovhcloud.svg") center/56% no-repeat;
  border:1px solid var(--line);
  box-shadow:0 8px 20px -8px rgba(0,14,156,.35);
}
.brand small{display:block;font-weight:500;font-size:11px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.spacer{flex:1}

/* --- cards / panels --- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.pad{padding:24px}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ovh-blue);font-weight:700;margin-bottom:8px}
.muted{color:var(--muted)}
.divider{height:1px;background:var(--line);margin:18px 0}

/* --- forms --- */
label.field{display:block;margin:14px 0}
label.field > span{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:600}
input[type=text],input[type=password],input[type=number],textarea,select{
  width:100%;background:#fff;border:1.5px solid var(--line);color:var(--ink);
  border-radius:var(--radius-sm);padding:12px 14px;font-size:15px;font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s;
}
input:focus,textarea:focus,select:focus{border-color:var(--ovh-blue);box-shadow:0 0 0 3px rgba(0,14,156,.12)}
textarea{resize:vertical;min-height:64px}

/* --- buttons --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  border:1.5px solid var(--line);background:#fff;color:var(--ink);
  padding:12px 20px;border-radius:var(--radius-sm);font-weight:700;font-size:14px;
  transition:transform .08s,background .15s,border-color .15s,box-shadow .15s}
.btn:hover{border-color:#c7d2e3;box-shadow:0 4px 12px -6px rgba(18,40,68,.2)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--ovh-turq);outline-offset:2px}
.btn.primary{background:linear-gradient(150deg,var(--ovh-blue),var(--ovh-blue-2));border:none;color:#fff;box-shadow:0 10px 24px -10px rgba(0,14,156,.7)}
.btn.primary:hover{filter:brightness(1.08);box-shadow:0 12px 28px -8px rgba(0,14,156,.8)}
.btn.accent{background:var(--ovh-turq);border:none;color:var(--ovh-night)}
.btn.accent:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ovh-blue)}
.btn.ghost:hover{background:rgba(0,14,156,.06);border-color:transparent}
.btn.danger{color:var(--bad);border-color:rgba(239,68,68,.4)}
.btn.danger:hover{background:rgba(239,68,68,.08)}
.btn.lg{padding:16px 28px;font-size:16px}
.btn.block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}

.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.grid{display:grid;gap:14px}

/* --- pills / tags --- */
.tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px;background:rgba(0,14,156,.08);color:var(--ovh-blue)}
.tag.turq{background:rgba(89,210,239,.22);color:var(--ovh-turq-deep)}

/* --- leaderboard --- */
.lb{display:flex;flex-direction:column;gap:9px}
.lb-row{display:flex;align-items:center;gap:13px;padding:13px 16px;border-radius:14px;background:#fff;border:1.5px solid var(--line);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),background .2s,border-color .2s}
.lb-row .rank{font-weight:900;width:30px;text-align:center;color:var(--muted);font-size:17px}
.lb-row .who{flex:1;font-weight:700}
.lb-row .pts{font-family:'Space Mono';font-weight:700;font-size:17px;color:var(--ovh-blue)}
.lb-row .streak{font-size:13px;color:var(--good);font-weight:700}
.lb-row.me{border-color:var(--ovh-blue);background:rgba(0,14,156,.05);box-shadow:0 0 0 3px rgba(0,14,156,.08)}
.lb-row.gold{background:linear-gradient(100deg,rgba(240,161,24,.16),#fff);border-color:rgba(240,161,24,.55)}
.lb-row.silver{background:linear-gradient(100deg,rgba(148,163,184,.18),#fff);border-color:rgba(148,163,184,.5)}
.lb-row.bronze{background:linear-gradient(100deg,rgba(205,127,72,.16),#fff);border-color:rgba(205,127,72,.5)}

/* --- big number / chrono --- */
.bignum{font-weight:900;font-size:clamp(46px,10vw,92px);line-height:1;letter-spacing:-.03em}
.timer-ring{position:relative;width:84px;height:84px}
.timer-ring svg{transform:rotate(-90deg)}
.timer-ring .t-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:26px;color:var(--ovh-night)}
.timer-bar{height:10px;border-radius:999px;background:#e8edf5;overflow:hidden}
.timer-bar > i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--good),var(--warn),var(--bad));transition:width 1s linear}

/* --- options grid "façon Kahoot" : grandes tuiles colorées + formes --- */
.opts{display:grid;gap:16px}
@media(min-width:680px){.opts.two{grid-template-columns:1fr 1fr}}
.opt{display:flex;align-items:center;gap:16px;text-align:left;cursor:pointer;padding:22px 24px;border-radius:18px;
  border:none;color:#fff;font-size:18px;font-weight:700;line-height:1.35;position:relative;
  min-height:78px;word-break:break-word;overflow-wrap:anywhere;
  transition:transform .1s,filter .15s,box-shadow .15s;box-shadow:0 8px 18px -10px rgba(18,40,68,.45)}
.opt > span:not(.shape):not(.check):not(.opt-bar):not(.opt-pct){flex:1;min-width:0}
.opt:hover{transform:translateY(-2px);filter:brightness(1.05)}
.opt:active{transform:translateY(0)}
.opt .shape{width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center}
.opt .shape svg{width:30px;height:30px;fill:#fff}
.opt:nth-child(4n+1){background:var(--c1)}
.opt:nth-child(4n+2){background:var(--c2)}
.opt:nth-child(4n+3){background:var(--c3)}
.opt:nth-child(4n+4){background:var(--c4)}
.opt.sel{box-shadow:0 0 0 4px #fff,0 0 0 7px var(--ovh-night);transform:translateY(-2px)}
.opt.dim{opacity:.4;filter:grayscale(.5)}
.opt .check{margin-left:auto;font-size:24px;opacity:0;transition:opacity .15s;flex:none}
.opt.sel .check{opacity:1}
.opt.correct{outline:4px solid var(--good);outline-offset:2px}
.opt.wrong{outline:4px solid var(--bad);outline-offset:2px;opacity:.6}

/* --- cloze --- */
.cloze-text{font-size:20px;line-height:2.2;color:var(--ink)}
.cloze-text .blank-inp{display:inline-block;width:140px;background:rgba(0,14,156,.05);border:none;border-bottom:2.5px solid var(--ovh-blue);
  color:var(--ovh-blue);font-weight:800;text-align:center;padding:5px 8px;font-family:inherit;border-radius:8px 8px 0 0;font-size:18px}
.cloze-text .blank-inp:focus{outline:none;background:rgba(89,210,239,.18)}

/* --- drag & drop --- */
.dnd-pool{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:18px;min-height:56px;padding:12px;border:2px dashed var(--line);border-radius:14px;background:#fbfcfe}
.chip{padding:12px 18px;border-radius:12px;background:linear-gradient(150deg,var(--ovh-blue),var(--ovh-blue-2));color:#fff;border:none;
  cursor:grab;font-weight:700;user-select:none;touch-action:none;box-shadow:0 6px 14px -8px rgba(0,14,156,.6)}
.chip.dragging{opacity:.5}
.dnd-targets{display:grid;gap:12px}
@media(min-width:560px){.dnd-targets{grid-template-columns:1fr 1fr}}
.target{border:2px solid var(--line);border-radius:14px;padding:16px;background:#fff;min-height:70px}
.target.over{border-color:var(--ovh-turq);background:rgba(89,210,239,.1)}
.target .t-label{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:10px;font-weight:700}
.target .slot{min-height:34px;display:flex;flex-wrap:wrap;gap:8px}
.target.correct{border-color:var(--good)}
.target.wrong{border-color:var(--bad)}

/* --- toast --- */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);opacity:0;
  background:var(--ovh-night);color:#fff;padding:13px 22px;border-radius:14px;box-shadow:var(--shadow-lg);
  transition:all .25s;z-index:50;font-weight:700;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.good{background:var(--good)} .toast.bad{background:var(--bad)}

/* --- code display --- */
.codebox{font-weight:900;font-size:clamp(46px,13vw,96px);letter-spacing:.14em;
  color:var(--ovh-blue);text-align:center;padding:8px 0}

/* --- waiting dots --- */
.waiting-dots{display:inline-flex;gap:6px;margin-top:8px}
.waiting-dots i{width:10px;height:10px;border-radius:50%;background:var(--ovh-turq);animation:bounce 1.2s infinite}
.waiting-dots i:nth-child(2){animation-delay:.15s}
.waiting-dots i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-9px);opacity:1}}

/* --- podium --- */
.podium{display:flex;align-items:flex-end;justify-content:center;gap:14px;margin:20px 0}
.podium .col{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;max-width:140px}
.podium .bar{width:100%;border-radius:14px 14px 0 0;display:flex;align-items:flex-start;justify-content:center;padding-top:12px;color:#fff;font-weight:900;font-size:24px;box-shadow:var(--shadow)}
.podium .p1 .bar{height:150px;background:linear-gradient(180deg,#f0a118,#d98a0a)}
.podium .p2 .bar{height:110px;background:linear-gradient(180deg,#94a3b8,#7d8ba0)}
.podium .p3 .bar{height:80px;background:linear-gradient(180deg,#cd7f48,#b56a36)}
.podium .nm{font-weight:800;font-size:15px;text-align:center}
.podium .sc{font-family:'Space Mono';color:var(--muted);font-weight:700;font-size:13px}
.podium .col{animation:rise .6s cubic-bezier(.2,1,.3,1) both}
.podium .p1{animation-delay:.3s}.podium .p2{animation-delay:.1s}.podium .p3{animation-delay:.2s}
@keyframes rise{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}

.hidden{display:none!important}
.center{text-align:center}
.pop{animation:pop .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{0%{transform:scale(.8);opacity:0}100%{transform:scale(1);opacity:1}}
.confetti-burst{animation:burst .6s ease}
@keyframes burst{0%{transform:scale(1.5);filter:saturate(2)}100%{transform:scale(1)}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* === Nouveaux types de questions === */
/* média d'énoncé */
.q-media{margin-bottom:16px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#000;position:relative}
.q-media img{width:100%;display:block}
.q-media iframe{width:100%;aspect-ratio:16/9;display:block;border:0}

/* curseur (range) */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:999px;
  background:linear-gradient(90deg,var(--ovh-turq),var(--ovh-blue));outline:none;margin:14px 0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;
  background:#fff;border:4px solid var(--ovh-blue);cursor:pointer;box-shadow:var(--shadow)}
input[type=range]::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:#fff;border:4px solid var(--ovh-blue);cursor:pointer}

/* aperçu animateur : track + repères */
.slider-track{position:relative;height:10px;border-radius:999px;margin:24px 0 8px;
  background:linear-gradient(90deg,var(--ovh-turq),var(--ovh-blue))}
.slider-target{position:absolute;top:50%;width:18px;height:18px;transform:translate(-50%,-50%);
  background:var(--good);border:3px solid #fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.slider-avg{position:absolute;top:50%;width:14px;height:14px;transform:translate(-50%,-50%);
  background:var(--ovh-night);border:2px solid #fff;border-radius:50%}

/* répartition des réponses (poll / QCM au reveal) */
.opt-bar{position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,.25);z-index:0}
.opt-pct{margin-left:auto;font-family:'Space Mono';font-weight:700;z-index:1}

/* nuage de mots */
.wordcloud{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;justify-content:center;
  padding:18px;line-height:1.3}
.wordcloud span{color:var(--ovh-blue);font-weight:700}
.wordcloud span:nth-child(3n+2){color:var(--ovh-turq-deep)}
.wordcloud span:nth-child(3n){color:var(--ovh-night)}

/* chip sélectionné (pinimage) */
.chip.sel{outline:3px solid var(--ovh-turq);outline-offset:2px}

/* === Vue joueur élargie (anti-écrasement) === */
.wrap-game{max-width:760px}
/* join et attente restent resserrés et centrés */
#p-join, #p-wait{max-width:520px;margin:0 auto}
/* le panneau question respire davantage */
#p-question .panel{padding:28px}
@media(min-width:680px){
  #p-question .panel{padding:34px 38px}
  #p-question #pPrompt{font-size:26px}
}
/* la question prend de la hauteur : le chrono reste en haut à droite */
#p-question{animation:none}

/* === Bonne réponse au reveal (joueur) === */
.reveal-solution{margin-top:4px}
.sol-box{background:rgba(0,14,156,.06);border:1.5px solid rgba(0,14,156,.18);border-radius:12px;
  padding:14px 16px;font-weight:600;color:var(--ovh-blue);line-height:1.6;text-align:left}

/* === Aperçu média dans l'éditeur (admin) === */
.media-preview{margin:6px 0 14px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#0b0e1a}
.media-preview img{width:100%;max-height:280px;object-fit:contain;display:block}
.media-preview iframe{width:100%;aspect-ratio:16/9;display:block;border:0}
.media-preview .muted{display:block;padding:14px;text-align:center}

/* =====================================================================
   THÈME ÉTÉ / PLAGE
   Surcharge des variables + ornements (soleil, ciel-mer, vaguelettes).
   Appliqué via la classe body.theme-summer. Lisibilité préservée :
   les ornements restent en arrière-plan, derrière le contenu.
   ===================================================================== */
body.theme-summer{
  --ovh-blue:#0a7ea4;        /* lagon profond (remplace le primaire) */
  --ovh-blue-2:#0d9bc4;
  --ovh-turq:#5fd0d8;        /* turquoise clair */
  --ovh-turq-deep:#13899a;
  --ovh-night:#0c3a4a;       /* bleu marin pour le texte */
  --ovh-night-2:#155066;

  --ink:#0c3a4a;
  --muted:#5a7886;
  --line:#e8dcc4;            /* sable clair pour les bordures */
  --bg:#fdf6e8;              /* sable très clair */
  --card:#fffdf8;            /* crème */
  --good:#1aab8a;
  --warn:#f5a623;

  /* tuiles de réponse : ambiance balnéaire mais contraste fort conservé */
  --c1:#ef6f5e;  /* corail */
  --c2:#2b9fd4;  /* mer */
  --c3:#f4a93c;  /* soleil */
  --c4:#28b487;  /* palmier */

  --shadow:0 12px 32px -12px rgba(12,58,74,.22);
  --shadow-lg:0 24px 60px -20px rgba(10,126,164,.32);

  /* dégradé ciel → mer → sable, fixé en fond */
  background:
    linear-gradient(180deg,
      #bfeaf5 0%,        /* ciel clair */
      #8fd9ec 16%,       /* ciel */
      #5cc3e0 30%,       /* mer haute */
      #cdeaf0 46%,       /* écume */
      #fdf6e8 60%) fixed,
    var(--bg);
  position:relative;
}
/* Soleil en haut à droite */
body.theme-summer::before{
  content:"";position:fixed;top:34px;right:40px;width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #ffe28a 0%, #ffd23f 55%, rgba(255,210,63,0) 72%);
  box-shadow:0 0 60px 20px rgba(255,210,63,.45);
  z-index:0;pointer-events:none;
}
/* Vaguelettes / sable en bas de page */
body.theme-summer::after{
  content:"";position:fixed;left:0;right:0;bottom:0;height:120px;z-index:0;pointer-events:none;
  background:
    radial-gradient(40px 18px at 30px 100px, rgba(255,255,255,.5) 50%, transparent 52%),
    radial-gradient(40px 18px at 120px 108px, rgba(255,255,255,.4) 50%, transparent 52%),
    linear-gradient(180deg, transparent 0%, #f3e3c0 70%, #e9d3a6 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 60%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 60%);
}
/* le contenu passe au-dessus des ornements */
body.theme-summer .wrap{position:relative;z-index:1}

/* topbar : petit palmier décoratif à côté de la marque */
body.theme-summer .brand::after{
  content:"🌴";font-size:20px;margin-left:2px;filter:saturate(1.1);
}
/* bandeau d'accueil plus chaleureux */
body.theme-summer .panel{backdrop-filter:saturate(1.05)}

/* le logo OVH reste lisible sur fond clair (inchangé) ;
   on renforce juste le halo de la carte d'accueil */
body.theme-summer .eyebrow{color:var(--ovh-turq-deep)}

/* respecte la préférence de mouvement réduit : ornements statiques (déjà le cas) */