/* ACCAAN Solutions - Nuages de mots
   Parti pris : la page EST le nuage. Pas de cadres, pas de cartes ; l'interface
   emprunte ses couleurs à la palette choisie et s'efface derrière les mots. */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/fonts/inter-400.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("/fonts/inter-500.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("/fonts/inter-600.woff") format("woff"); }
@font-face { font-family: "Inter Display"; font-weight: 700; font-display: swap; src: url("/fonts/inter-display-700.woff") format("woff"); }
@font-face { font-family: "Lora"; font-weight: 600; font-display: swap; src: url("/fonts/lora-600.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("/fonts/poppins-500.woff") format("woff"); }
@font-face { font-family: "Heros Cn"; font-weight: 700; font-display: swap; src: url("/fonts/heros-cn-700.woff") format("woff"); }

:root {
  /* Ces trois couleurs sont remplacées par la palette choisie (voir js/themes.js) */
  --fond: #F1F4F9;
  --encre: #101B33;
  --accent: #2747D8;
  /* Dérivées automatiquement */
  --brume: color-mix(in srgb, var(--encre) 62%, var(--fond));
  --trait: color-mix(in srgb, var(--encre) 13%, var(--fond));
  --voile: color-mix(in srgb, var(--encre) 5%, var(--fond));
  --courbe: cubic-bezier(.22, .8, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0; min-height: 100%;
  background: var(--fond); color: var(--encre);
  font: 400 15px/1.5 "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background-color .5s ease, color .5s ease;
}
h1, h2, p, ul, fieldset { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
ul { list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ───────── Éléments communs ───────── */
.marque { display: inline-flex; gap: .6em; align-items: baseline; text-decoration: none; white-space: nowrap; }
.marque strong { font-weight: 600; letter-spacing: .01em; }
.marque span { color: var(--brume); }

.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 20px; border-radius: 999px;
  background: var(--encre); color: var(--fond); font-weight: 500; white-space: nowrap;
  transition: opacity .2s, background-color .5s, color .5s;
}
.bouton:hover { opacity: .86; }
.bouton:disabled { opacity: .4; cursor: default; }
.discret { color: var(--brume); padding: 9px 2px; white-space: nowrap; transition: color .2s; }
.discret:hover, .discret[aria-expanded="true"] { color: var(--encre); }
.lien { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.champ {
  width: 100%; padding: 12px 14px; border: 0; border-radius: 12px;
  background: var(--voile); transition: background-color .5s;
}
.champ::placeholder { color: var(--brume); opacity: .8; }
.champ:focus-visible { outline-offset: 0; border-radius: 12px; }

.menu-ancre { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 220px; padding: 8px;
  background: var(--fond); border: 1px solid var(--trait); border-radius: 14px;
  box-shadow: 0 18px 50px -18px color-mix(in srgb, var(--encre) 45%, transparent);
}
.menu > button { display: block; width: 100%; padding: 9px 12px; border-radius: 8px; text-align: left; }
.menu > button:hover { background: var(--voile); }
.menu > button small { display: block; color: var(--brume); font-size: 13px; }

.message {
  position: fixed; left: 50%; bottom: 28px; z-index: 50; display: flex; gap: 14px; align-items: center;
  padding: 11px 20px; border-radius: 999px; background: var(--encre); color: var(--fond);
  transform: translate(-50%, 24px); opacity: 0; pointer-events: none; max-width: calc(100vw - 32px);
  transition: transform .35s var(--courbe), opacity .25s;
}
.message.visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.message .lien { color: inherit; font-weight: 500; }

/* ───────── Réglages ───────── */
.reglage { display: grid; gap: 8px; }
.reglage legend, .etiquette { display: block; color: var(--brume); font-size: 13px; padding: 0; margin-bottom: 8px; }
.options { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.option { cursor: pointer; }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option > span:not(.nuancier) {
  display: inline-block; padding: 2px 0 4px; color: var(--brume);
  border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.option:hover > span { color: var(--encre); }
.option input:checked + span:not(.nuancier) { color: var(--encre); border-bottom-color: var(--accent); }
.option input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.reglage-police .option > span { font-size: 17px; }
.reglage-police .options { gap: 6px 18px; }
.reglage-couleurs .options { gap: 10px; }
.nuancier {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  width: 46px; height: 30px; border-radius: 9px; border: 1px solid var(--trait);
  outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .2s;
}
.nuancier i { width: 7px; height: 7px; border-radius: 50%; }
.option input:checked + .nuancier { outline-color: var(--accent); }

.curseur { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: baseline; }
.curseur label { color: var(--brume); font-size: 13px; }
.curseur output { font-variant-numeric: tabular-nums; font-weight: 500; }
.curseur input { grid-column: 1 / -1; }
input[type="range"] { appearance: none; width: 100%; height: 18px; margin: 0; background: none; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--trait); border-radius: 2px; }
input[type="range"]::-moz-range-track { height: 2px; background: var(--trait); border-radius: 2px; }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; margin-top: -7px; border-radius: 50%; background: var(--encre); border: 0; }
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--encre); border: 0; }

.bascule { display: flex; gap: 12px; align-items: center; cursor: pointer; }
.bascule input { position: absolute; opacity: 0; }
.bascule i {
  flex: none; width: 34px; height: 20px; border-radius: 20px; background: var(--trait); position: relative; transition: background-color .25s;
}
.bascule i::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--fond); transition: transform .25s var(--courbe);
}
.bascule input:checked + i { background: var(--encre); }
.bascule input:checked + i::after { transform: translateX(14px); }
.bascule input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 3px; }
.bascule small { color: var(--brume); font-size: 13px; }

.pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.pastilles li, .pastille {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
  background: var(--voile); font-size: 14px;
}
button.pastille:hover { background: var(--trait); }
button.pastille::after { content: "×"; color: var(--brume); }

/* ───────── Le nuage ───────── */
.scene { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--fond); transition: background-color .5s; }
.nuage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-select: none; pointer-events: none; }
.nuage-groupe { transition: transform .8s var(--courbe); }
.nuage-groupe.sans-transition { transition: none; }
.mot {
  font-size: 100px; font-kerning: normal; text-rendering: geometricPrecision;
  transition: transform .8s var(--courbe), opacity .5s ease, fill .5s ease;
}
.nuage-interactif .mot { cursor: pointer; pointer-events: auto; }
.nuage-interactif .mot:hover { fill-opacity: .6; }

.scene-vide {
  position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 18px;
  padding: 24px; text-align: center; color: var(--brume);
}
.scene-vide p { max-width: 34ch; font-size: 17px; }
.astuce { position: absolute; left: 28px; bottom: 20px; color: var(--brume); font-size: 13px; transition: opacity .4s; }

/* ───────── Barre du haut ───────── */
.barre {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px;
  padding: 16px 28px; min-height: 68px;
}
.modes { display: flex; gap: 22px; margin-right: auto; }
.modes a { text-decoration: none; color: var(--brume); padding: 4px 0; border-bottom: 2px solid transparent; transition: color .2s; }
.modes a:hover { color: var(--encre); }
.modes a[aria-current="page"] { color: var(--encre); border-bottom-color: var(--accent); }
.actions { display: flex; align-items: center; gap: 22px; }

/* ───────── Atelier (nuage depuis un texte) ───────── */
.atelier { display: grid; grid-template-rows: auto 1fr; height: 100dvh; }
.atelier main { display: grid; grid-template-columns: 340px 1fr; min-height: 0; }
.panneau {
  display: flex; flex-direction: column; gap: 24px; padding: 8px 28px 32px; overflow-y: auto;
  border-right: 1px solid var(--trait); transition: border-color .5s;
}
.panneau textarea { min-height: 150px; height: 21vh; resize: vertical; line-height: 1.55; }
.sous-texte { display: flex; justify-content: space-between; gap: 12px; margin-top: -16px; font-size: 13px; color: var(--brume); }
#reglages { display: contents; }

/* ───────── En direct : création d'une session ───────── */
.colonne { max-width: 620px; margin: 0 auto; padding: 7vh 28px 80px; display: grid; gap: 40px; }
.titre {
  font: 700 clamp(2rem, 5vw, 3.2rem)/1.06 "Inter Display", "Inter", sans-serif; letter-spacing: -.03em; text-wrap: balance;
}
.chapo { margin-top: 18px; color: var(--brume); font-size: 17px; max-width: 46ch; }
.formulaire { display: grid; gap: 26px; }
.formulaire label.bloc { display: grid; gap: 8px; }
.formulaire .champ { font-size: 17px; padding: 15px 16px; }
.formulaire .bouton { justify-self: start; padding: 12px 26px; font-size: 16px; }
.erreur { color: #C4321F; }
.recentes h2 { font-size: 13px; font-weight: 400; color: var(--brume); margin-bottom: 6px; }
.recentes li { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid var(--trait); }
.recentes li a { flex: 1; min-width: 0; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recentes li a:hover { color: var(--accent); }
.recentes code { font: 500 14px "Inter", sans-serif; letter-spacing: .08em; color: var(--brume); }

/* ───────── En direct : écran de présentation ───────── */
.ecran { display: grid; grid-template-rows: auto 1fr auto; height: 100dvh; overflow: hidden; }
.ecran-tete { display: flex; align-items: flex-start; gap: 28px; padding: 26px 36px 0; }
.ecran-tete .marque { font-size: 14px; }
.question {
  margin-top: 6px; max-width: 62vw;
  font: 700 clamp(1.5rem, 3.1vw, 3rem)/1.1 "Inter Display", "Inter", sans-serif; letter-spacing: -.025em; text-wrap: balance;
}
.ecran-tete .actions { margin-left: auto; transition: opacity .4s; }
.ecran.repos .ecran-tete .actions { opacity: 0; pointer-events: none; }
.ecran.repos { cursor: none; }
.ecran-pied { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 0 36px 26px; }
.acces { display: flex; align-items: center; gap: 16px; transition: opacity .4s; }
.acces img { width: 92px; height: 92px; border-radius: 10px; display: block; }
.acces span, .compteurs { color: var(--brume); }
.acces strong { display: block; font: 500 clamp(1.1rem, 1.7vw, 1.6rem)/1.2 "Inter", sans-serif; }
.acces strong b { font-weight: 600; color: var(--accent); letter-spacing: .04em; }
.ecran.sans-acces .acces, .ecran.attente .acces { opacity: 0; pointer-events: none; }
.compteurs { font-variant-numeric: tabular-nums; text-align: right; }
.pause { color: var(--accent); font-weight: 500; }

.invitation {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 22px; text-align: center;
  opacity: 0; pointer-events: none; transform: scale(.96); transition: opacity .5s, transform .6s var(--courbe);
}
.ecran.attente .invitation { opacity: 1; transform: none; pointer-events: auto; }
.invitation img { width: min(34vh, 300px); height: min(34vh, 300px); border-radius: 18px; }
.invitation p { color: var(--brume); font-size: clamp(1rem, 1.5vw, 1.3rem); }
.invitation strong { font: 600 clamp(1.6rem, 3.4vw, 3rem)/1.1 "Inter Display", "Inter", sans-serif; letter-spacing: -.01em; }
.invitation strong b { color: var(--accent); letter-spacing: .04em; }

.menu.large { width: 340px; padding: 22px; display: grid; gap: 24px; max-height: calc(100dvh - 120px); overflow-y: auto; }
.menu.large label.bloc { display: grid; gap: 0; }
.pas { display: flex; align-items: center; gap: 14px; }
.pas button { width: 30px; height: 30px; border-radius: 50%; background: var(--voile); font-size: 17px; line-height: 1; }
.pas button:hover { background: var(--trait); }
.pas output { min-width: 1.5ch; text-align: center; font-weight: 500; font-variant-numeric: tabular-nums; }

.bulle {
  position: fixed; z-index: 30; transform: translate(-50%, -100%); padding: 6px;
  background: var(--encre); color: var(--fond); border-radius: 999px; white-space: nowrap;
  box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--encre) 60%, transparent);
}
.bulle button { padding: 6px 14px; font-weight: 500; }

/* ───────── En direct : page du participant ───────── */
.participer main { max-width: 560px; margin: 0 auto; padding: 22px 22px 0; min-height: 100dvh; display: flex; flex-direction: column; gap: 22px; }
.participer .marque { font-size: 14px; }
.participer .question { font-size: clamp(1.6rem, 7vw, 2.4rem); max-width: none; margin: 4px 0 0; }
.envoi { display: flex; gap: 10px; }
.envoi .champ { font-size: 18px; padding: 15px 18px; border-radius: 999px; }
.envoi .champ:focus-visible { border-radius: 999px; }
.envoi .bouton { padding: 0 24px; font-size: 16px; }
.etat { color: var(--brume); min-height: 1.5em; margin-top: -8px; }
.participer .scene { flex: 1; min-height: 44vh; margin: 0 -22px; }

/* ───────── Petits écrans ───────── */
@media (max-width: 860px) {
  .barre { padding: 14px 18px; gap: 10px 20px; }
  .barre .actions { width: 100%; justify-content: space-between; }
  .atelier { height: auto; min-height: 100dvh; }
  .atelier main { grid-template-columns: 1fr; }
  .atelier .scene { height: 58vh; order: -1; }
  .panneau { border-right: 0; border-top: 1px solid var(--trait); padding: 24px 18px 40px; overflow: visible; }
  .panneau textarea { height: 180px; }
  .astuce { left: 18px; bottom: 10px; }
  .ecran-tete, .ecran-pied { padding-left: 18px; padding-right: 18px; }
  .ecran-tete { flex-wrap: wrap; }
  .acces img { width: 64px; height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; }
}

@media print {
  .barre, .panneau, .ecran-tete .actions, .astuce, .message { display: none !important; }
  .atelier main { grid-template-columns: 1fr; }
}

.menu.large .lien { justify-self: start; }
.introuvable { grid-column: 1 / -1; grid-row: 1 / -1; }
.liens { display: grid; gap: 10px; justify-items: start; }

/* ───────── Comptes : connexion, mon compte, utilisateurs ───────── */
.menu > a { display: block; padding: 9px 12px; border-radius: 8px; text-decoration: none; }
.menu > a:hover { background: var(--voile); }
.menu > a small { display: block; color: var(--brume); font-size: 13px; }
.compte > .discret { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; }
.colonne.etroite { max-width: 440px; }
.note { color: var(--brume); font-size: 14px; max-width: 46ch; }
.sous-titre { font: 600 18px/1.3 "Inter", sans-serif; margin: 0; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.utilisateurs { display: grid; gap: 26px; padding-top: 34px; border-top: 1px solid var(--trait); }
.roles { margin: 0; display: grid; gap: 6px; }
.roles div { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; }
.roles dt { font-weight: 500; }
.roles dd { margin: 0; color: var(--brume); }
.lignes li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 0; border-top: 1px solid var(--trait); }
.lignes .qui { flex: 1; min-width: 9em; display: grid; gap: 2px; }
.lignes .qui a { text-decoration: none; font-weight: 500; }
.lignes .qui a:hover { color: var(--accent); }
.lignes code { font: 500 14px "Inter", sans-serif; letter-spacing: .08em; color: var(--brume); }
.lignes .discret { padding: 4px 2px; }
.lignes .qui small { color: var(--brume); font-size: 13px; }
.champ.compact { width: auto; padding: 8px 12px; border-radius: 10px; }
.avis { padding: 14px 18px; border-radius: 12px; background: var(--voile); border-left: 3px solid var(--accent); }
.avis code { font: 500 15px ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .02em; }
.recentes li { flex-wrap: wrap; }
.recentes li .discret { padding: 0 2px; }
.lien.danger { color: #C4321F; }
@media (max-width: 560px) { .duo { grid-template-columns: 1fr; } .roles div { grid-template-columns: 1fr; gap: 0; } }