/* Code Rouge : thème clair (html[data-theme="clair"]). Le thème sombre reste la référence ; ici, on redéfinit les
   couleurs de base puis on ajuste les composants. Les objets du décor (téléphones, appels, conversations, terminal,
   rouleau de chiffres, alarme) restent sombres, comme de vrais appareils. */

html[data-theme="clair"] {
  color-scheme: light;
  --noir: #F4F3F0; --blanc: #141414;
  --g10: #262626; --g20: #3a3a3a; --g30: #555; --g50: #6b6b6b; --g60: #8f8f8f; --g70: #dcdcd8; --g80: #ececea; --g85: #fff;
  --verre: rgba(255, 255, 255, .82); --verre-fort: rgba(255, 255, 255, .96);
  --trait: rgba(0, 0, 0, .09); --trait-fort: rgba(0, 0, 0, .18);
  --ombre: 0 18px 40px -24px rgba(0, 0, 0, .35);
}

/* Décors qui restent sombres : on y rétablit la palette du thème sombre */
html[data-theme="clair"] :is(.telephone, .appel, .chat, .terminal, .rouleau, .explosion) {
  --blanc: #fff; --g10: #E5E5E5; --g20: #CCCCCC; --g30: #B2B2B2; --g50: #7F7F7F; --g60: #3A3A3A; --g70: #2A2A2A;
  --g80: #1F1F1F; --g85: #161616; --trait: rgba(255, 255, 255, .09); --trait-fort: rgba(255, 255, 255, .18);
  color: #fff;
}
html[data-theme="clair"] .terminal { background: #111; }

/* Fond */
html[data-theme="clair"] body { background: var(--noir); scrollbar-color: #c4c4c0 var(--noir); }
html[data-theme="clair"] .fond-grille { background-image: linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px); }
html[data-theme="clair"] .fond-halo { background: radial-gradient(closest-side, rgba(225, 6, 0, .14), transparent); }
html[data-theme="clair"] body.alerte-temps .fond-halo { background: radial-gradient(closest-side, rgba(225, 6, 0, .28), transparent); }
html[data-theme="clair"] .titre-jeu { text-shadow: none; }
html[data-theme="clair"] .titre-jeu .rouge { text-shadow: 0 0 30px rgba(225, 6, 0, .25); }

/* Barre du haut */
html[data-theme="clair"] #hud { background: rgba(255, 255, 255, .8); }
html[data-theme="clair"] .hud-salles li.faite { color: var(--blanc); background: rgba(0, 0, 0, .06); }
html[data-theme="clair"] .hud-code span { background: #fff; }
html[data-theme="clair"] .hud-code span.trouve { color: var(--rouge); background: #fff1f0; }

/* Boutons et panneaux */
html[data-theme="clair"] .btn.secondaire { background: #fff; color: var(--blanc); }
html[data-theme="clair"] .btn.secondaire:hover:not(:disabled) { background: var(--g80); }
html[data-theme="clair"] .btn.clair { border: 1px solid #cfcfcb; }
html[data-theme="clair"] :is(.medaille, .salle-icone, .prochaine-icone, .appel-icone, .vocal-bouton) { color: #fff; }
html[data-theme="clair"] :is(.astuce, .compteur, .avertissement) { background: rgba(0, 0, 0, .04); }
html[data-theme="clair"] .porte-icone { background: rgba(0, 0, 0, .05); }
html[data-theme="clair"] .porte.ouverte .porte-icone { color: #fff; }
html[data-theme="clair"] .porte.faite .porte-icone { color: var(--blanc); }
html[data-theme="clair"] .porte-chiffre { background: var(--blanc); color: #fff; }
html[data-theme="clair"] .code-partiel { color: var(--blanc); }
html[data-theme="clair"] .rouleau { background: linear-gradient(180deg, rgba(225, 6, 0, .35), #111 30%, #111 70%, rgba(225, 6, 0, .35)); }

/* Questions et corrections */
html[data-theme="clair"] .question h3 { color: var(--blanc); }
html[data-theme="clair"] .option { color: var(--blanc); }
html[data-theme="clair"] .option.bonne { border-color: var(--blanc); background: rgba(0, 0, 0, .05); }
html[data-theme="clair"] .option.bonne .option-lettre { background: var(--blanc); border-color: var(--blanc); color: #fff; }
html[data-theme="clair"] .option.mauvaise .option-lettre { color: #fff; }
html[data-theme="clair"] .correction.ok { border-color: rgba(0, 0, 0, .2); background: rgba(0, 0, 0, .03); }
html[data-theme="clair"] .indices li { color: #fff; }

/* Bureau, enquêtes, tri */
html[data-theme="clair"] .jauge-selection i { background: rgba(0, 0, 0, .08); }
html[data-theme="clair"] .liste-bilan em { background: rgba(0, 0, 0, .07); }
html[data-theme="clair"] .liste-bilan li.manque em, html[data-theme="clair"] .liste-bilan li.faux em { color: #fff; }
html[data-theme="clair"] .illustration { stroke: rgba(20, 20, 20, .85); }
html[data-theme="clair"] .vocal-lecteur { background: rgba(0, 0, 0, .05); }
html[data-theme="clair"] .ondes i { background: rgba(0, 0, 0, .25); }
html[data-theme="clair"] .vocal.joue .ondes i { background: var(--blanc); }
html[data-theme="clair"] .carte-tri { background: #fff; }
html[data-theme="clair"] .carte-tri.bon { border-color: var(--blanc); }
html[data-theme="clair"] .carte-tri.faux { background: #fff1f0; }
html[data-theme="clair"] .bac { color: var(--blanc); }
html[data-theme="clair"] .bac.actif { color: #fff; }
html[data-theme="clair"] .bac.juste { outline-color: var(--blanc); }

/* Atelier, code, bilan */
html[data-theme="clair"] .barre.force-fort > i { background: var(--blanc); box-shadow: none; }
html[data-theme="clair"] .case-code { background: #fff; color: var(--blanc); }
html[data-theme="clair"] .anneau-fond { stroke: rgba(0, 0, 0, .08); }
html[data-theme="clair"] .erreurs .bonne { color: var(--blanc); }
html[data-theme="clair"] .chargeur { border-color: rgba(0, 0, 0, .1); border-top-color: var(--rouge); }

/* Interrupteur de thème */
.bouton-theme { background: none; border: 1px solid var(--trait); color: var(--g30); border-radius: 8px; width: 34px; height: 34px;
  display: grid; place-items: center; cursor: pointer; }
.bouton-theme:hover { color: var(--blanc); border-color: var(--trait-fort); }
.bouton-theme .icone { width: 18px; height: 18px; }
#theme-flottant { position: fixed; top: 14px; right: 14px; z-index: 25; background: var(--verre); backdrop-filter: blur(8px); }
body.en-jeu #theme-flottant { display: none; }

/* Très petits écrans (téléphones) : la barre du haut et le plan doivent tenir sans débordement */
@media (max-width: 560px) {
  .plan { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: .4rem; }
  .porte { min-height: 92px; padding: .55rem .45rem; }
  .porte-icone { width: 30px; height: 30px; border-radius: 8px; }
  .porte-icone .icone { width: 16px; height: 16px; }
  .porte-titre { font-size: .7rem; overflow-wrap: break-word; hyphens: auto; }
  .porte-heure { font-size: .62rem; }
  .porte-chiffre { min-width: 22px; height: 22px; font-size: .8rem; top: .4rem; right: .4rem; }
  #hud { gap: .4rem; padding: .5rem 10px; }
  .hud-salles { display: none; }
  .hud-code { margin-left: auto; }
  .hud-code span { width: 18px; height: 24px; font-size: .78rem; }
  .hud-chrono { font-size: 1.1rem; min-width: 3.8ch; }
  .bouton-son, #hud .bouton-theme { width: 30px; height: 30px; }
}
@media (max-width: 440px) {
  .plan { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* ===== Illustrations (aplats + trait) ===== */
.illustration { --ill-trait: rgba(255, 255, 255, .82); --ill-fond: #2b2b2e; --ill-gris: #45454a; --ill-ecran: #0d0d0f;
  --ill-papier: #f3f2ee; --ill-decor: rgba(255, 255, 255, .045); --ill-ombre: rgba(0, 0, 0, .45);
  stroke: var(--ill-trait); stroke-width: 2.2; opacity: 1 !important; }
.illustration .d { fill: var(--ill-decor); stroke: none; }
.illustration .o { fill: var(--ill-ombre); stroke: none; }
.illustration .p { fill: var(--ill-fond); }
.illustration .g { fill: var(--ill-gris); }
.illustration .e { fill: var(--ill-ecran); }
.illustration .w { fill: var(--ill-papier); }
.illustration .t { stroke: #a2a2a6; stroke-width: 3; }
.illustration .rf { fill: var(--rouge); stroke: none; }
.illustration .r { stroke: var(--rouge); fill: none; }
.illustration text { stroke: none; font-family: system-ui, "Segoe UI", sans-serif; font-weight: 700; }
.illustration .tx { fill: #222; }
.illustration .tb { fill: #fff; }
.illustration .tt { fill: var(--ill-trait); }
.illustration .tr { fill: var(--rouge); }
.situation .illustration { max-width: 260px; }
html[data-theme="clair"] .illustration { --ill-trait: #1c1c1c; --ill-fond: #e4e3de; --ill-gris: #c9c8c2; --ill-ecran: #1b1b1e;
  --ill-papier: #fff; --ill-decor: rgba(225, 6, 0, .06); --ill-ombre: rgba(0, 0, 0, .09); stroke: var(--ill-trait); }

/* ===== Smartphone : appel en cours et messagerie vocale ===== */
.telephone.smartphone { width: min(320px, 100%); min-height: 610px; display: flex; flex-direction: column; padding: 12px 14px 20px;
  border-radius: 46px; border: 10px solid #121214; background: linear-gradient(180deg, #1c1c21, #0b0b0e 70%);
  box-shadow: 0 0 0 2px #2e2e33, 0 30px 70px -28px rgba(0, 0, 0, .7); color: #fff; position: relative; }
.smartphone .tel-encoche { top: 8px; width: 98px; height: 27px; border-radius: 15px; background: #000; }
.tel-barre { display: flex; justify-content: space-between; align-items: center; padding: 2px 16px 0; font: 600 .76rem var(--texte); color: #e6e6ea; height: 22px; }
.tel-reseau { letter-spacing: .02em; font-size: .7rem; }
.ecran-appel { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 1.5rem 0 1rem; }
.appel-photo { width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; margin-bottom: .7rem;
  background: linear-gradient(135deg, #55555c, #26262b); font: 600 2.1rem var(--titre); color: #fff;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .04), 0 0 0 16px rgba(255, 255, 255, .02); }
.appel-nom { font: 600 1.15rem/1.3 var(--texte); max-width: 95%; }
.appel-numero { color: #9b9ba3; font-size: .85rem; margin-top: .15rem; }
.appel-chrono { color: #d4d4da; font-size: .9rem; font-variant-numeric: tabular-nums; margin-top: .25rem; }
.soustitres { flex: 1; display: flex; flex-direction: column; background: rgba(255, 255, 255, .06); border-radius: 20px; padding: .75rem; min-height: 190px; }
.soustitres-titre { margin: 0 0 .55rem; font: 700 .64rem var(--texte); letter-spacing: .1em; text-transform: uppercase; color: #ff5b55; }
.soustitres .fil { flex: 1; max-height: 270px; }
.soustitres .msg { font-size: .86rem; padding: .55rem .8rem; max-width: 93%; }
.soustitres .msg.lui { background: rgba(255, 255, 255, .09); }
.appel-touches { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; margin: 1rem 0 .9rem; }
.touche { display: flex; flex-direction: column; align-items: center; gap: .35rem; font-size: .68rem; color: #c4c4ca; }
.touche i { width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 255, 255, .12); display: grid; place-items: center; }
.touche .icone { width: 21px; height: 21px; stroke: #fff; }
.raccrocher { align-self: center; width: 62px; height: 62px; border-radius: 50%; background: var(--rouge); display: grid; place-items: center;
  box-shadow: 0 10px 26px -8px rgba(225, 6, 0, .9); color: #fff; }
.raccrocher .icone { width: 27px; height: 27px; transform: rotate(135deg); }
.messagerie-vocale { margin-top: 1.4rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.mv-titre { font: 700 1.55rem var(--texte); margin: 0; }
.mv-contexte { color: #b9b9c0; font-size: .9rem; margin: 0; line-height: 1.5; }
.smartphone .vocal { background: rgba(255, 255, 255, .07); border-radius: 18px; padding: .85rem; margin: 0; }
.smartphone .vocal-lecteur { background: rgba(255, 255, 255, .08); }
.smartphone .ondes i { background: rgba(255, 255, 255, .35); }
.smartphone .vocal.joue .ondes i { background: #fff; }
.smartphone .transcription { color: #e2e2e6; }
.smartphone .lien-discret { color: #a9a9b0; }
.smartphone .discret { color: #9b9ba3; }
html[data-theme="clair"] .smartphone .vocal-lecteur { background: rgba(255, 255, 255, .08); }
html[data-theme="clair"] .smartphone .ondes i { background: rgba(255, 255, 255, .35); }
html[data-theme="clair"] .smartphone .vocal.joue .ondes i { background: #fff; }
.soustitres .fil { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }
@media (max-width: 860px) {
  .telephone.smartphone { min-height: 0; border-radius: 40px; }
  .ecran-appel { margin: 1rem 0 .8rem; }
  .appel-photo { width: 66px; height: 66px; font-size: 1.6rem; }
  .soustitres { min-height: 0; }
  .soustitres .fil { max-height: 210px; }
  .appel-touches { margin: .8rem 0 .7rem; }
  .touche i { width: 44px; height: 44px; }
  .raccrocher { width: 54px; height: 54px; }
}