@font-face { font-family: "Outfit"; font-weight: 300; font-display: swap; src: url("fonts/outfit-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 400; font-display: swap; src: url("fonts/outfit-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 500; font-display: swap; src: url("fonts/outfit-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 600; font-display: swap; src: url("fonts/outfit-latin-600-normal.woff2") format("woff2"); }
/* Plan d'atelier : noir pur, trait blanc fin, une idée par écran, colonnes de repère en fond.
   Seules couleurs de l'interface : les logos des réseaux choisis. Mode sombre uniquement (choix assumé). */
:root {
  --noir: #000000;
  --blanc: #f5f5f2;
  --gris: #8a8a86;          /* texte secondaire */
  --eteint: #3a3a38;        /* traits et contours inactifs */
  --bloc: #1c1c1b;          /* boutons secondaires, cartes */
  --trame: rgba(245, 245, 242, 0.09);
  --alerte: #f2c14e;        /* points à vérifier (seule couleur d'état) */
  --font: "Outfit", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
html, body { height: 100%; }
body {
  margin: 0; background: var(--noir); color: var(--blanc); font-family: var(--font); font-weight: 400;
  display: flex; justify-content: center; padding-inline: 16px; padding-block: 16px; box-sizing: border-box;
}
* { box-sizing: border-box; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--blanc); outline-offset: 3px; }

.phone {
  width: 100%; max-width: 400px; height: 100%; max-height: 840px; min-height: 600px; position: relative;
  border: 1px solid var(--eteint); border-radius: 32px; overflow: hidden; background: var(--noir);
}
@media (max-width: 480px) { body { padding: 0; } .phone { max-height: none; border: 0; border-radius: 0; } }
#trame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#app { position: absolute; inset: 0; display: flex; flex-direction: column; }

/* Mise en page commune : titre centré, pictogramme, texte court, boutons en bas */
.ecran { flex: 1; display: flex; flex-direction: column; padding: 18px 24px calc(22px + env(safe-area-inset-bottom, 0px)); min-height: 0; }
.haut { display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.retour { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--bloc); display: grid; place-items: center; }
.retour svg { width: 18px; height: 18px; }
.titre-haut { font-size: 17px; font-weight: 500; letter-spacing: .01em; text-align: center; flex: 1; }
.centre { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: safe center; text-align: center; gap: 18px; min-height: 0; }
h1 { font-weight: 500; font-size: 34px; line-height: 1.12; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
.texte { color: var(--blanc); opacity: .82; font-size: 16px; line-height: 1.5; margin: 0; max-width: 30ch; text-wrap: pretty; }
.picto { width: 92px; height: 92px; color: var(--blanc); }
.picto svg { width: 100%; height: 100%; }
.bas { display: grid; gap: 12px; padding-top: 16px; }
.btn {
  width: 100%; min-height: 58px; border-radius: 14px; border: 2px solid var(--blanc); background: var(--bloc);
  font-size: 18px; font-weight: 500; letter-spacing: .01em;
}
.btn:disabled { border-color: var(--eteint); color: var(--gris); cursor: not-allowed; }
.btn-second { width: 100%; min-height: 54px; border-radius: 14px; border: 0; background: var(--bloc); font-size: 17px; }
.points { display: flex; justify-content: center; gap: 12px; padding-top: 4px; }
.points span { width: 9px; height: 9px; border-radius: 50%; background: var(--eteint); }
.points span.on { background: var(--blanc); }

/* Accueil : le cercle vivant */
.accueil-nom { font-size: 22px; font-weight: 500; text-align: center; margin-top: 18px; }
.accueil-date { font-size: 14px; color: var(--gris); text-align: center; margin-top: 4px; }
.cercle-zone { flex: 1; display: grid; place-items: center; }
.cercle { width: min(72vw, 290px); aspect-ratio: 1; border-radius: 50%; border: 0; background: none; position: relative; }
.cercle-legende { font-size: 18px; text-align: center; margin-top: -6px; }
/* Invite à toucher : pictogramme et consigne au centre, et un écho qui part du centre comme une touche */
.cercle-contenu { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; pointer-events: none; }
.cercle-picto { width: 64px; height: 64px; }
.cercle-picto svg { width: 100%; height: 100%; }
.cercle-invite { font-size: 14px; line-height: 1.4; color: var(--gris); }
.cercle-onde { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 1.5px solid var(--blanc); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .cercle-onde { animation: touche 3.2s ease-out infinite 1s; } }
@keyframes touche { 0% { transform: scale(.6); opacity: .55; } 70%, 100% { transform: scale(3.6); opacity: 0; } }
.cercle:active .cercle-picto { transform: scale(.92); }
.ronds { display: flex; justify-content: center; gap: 22px; padding-top: 26px; }
.rond { display: grid; justify-items: center; gap: 7px; background: none; border: 0; font-size: 12px; color: var(--gris); }
.rond span { width: 58px; height: 58px; border-radius: 50%; background: var(--bloc); display: grid; place-items: center; color: var(--blanc); }
.rond svg { width: 24px; height: 24px; }

/* Photos */
.vignettes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; max-width: 290px; }
/* Les 4 emplacements sont toujours visibles : on voit combien de photos on peut encore ajouter */
.emplacement { aspect-ratio: 4/5; border-radius: 12px; border: 1.5px dashed var(--eteint); display: grid; place-items: center; color: var(--eteint); font-size: 22px; font-weight: 300; max-width: 100%; }
.compteur { margin: 0; font-size: 14px; color: var(--gris); font-variant-numeric: tabular-nums; }
.paire { display: flex; align-items: center; gap: 12px; }
.paire .ou { color: var(--gris); font-size: 14px; letter-spacing: .08em; }
.vignette { position: relative; aspect-ratio: 4/5; border-radius: 12px; overflow: hidden; border: 1px solid var(--eteint); max-width: 100%; }
.vignette img, .vignette video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vignette .x { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); font-size: 18px; line-height: 1; }
.ajout { aspect-ratio: 4/5; border-radius: 12px; border: 1.5px dashed var(--gris); background: rgba(28,28,27,.6); display: grid; place-content: center; justify-items: center; color: var(--blanc); gap: 8px; font-size: 14px; }
.ajout svg { width: 38px; height: 38px; }
/* Les deux façons d'ajouter des photos forment un seul bloc : le cercle, un trait « ou », la galerie */
.choix { display: flex; flex-direction: column; align-items: center; }
.lien-ou { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 6px 0; color: var(--gris); font-size: 14px; letter-spacing: .08em; }
.lien-ou i { width: 1.5px; height: 16px; background: var(--gris); }
.galerie { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; border: 1.5px solid var(--blanc); background: var(--bloc); font-size: 16px; }
.galerie svg { width: 22px; height: 22px; }
.ajout svg { width: 34px; height: 34px; }

/* Sujet : le micro est aussi un cercle vivant */
.micro { width: 200px; aspect-ratio: 1; border-radius: 50%; border: 0; background: none; position: relative; touch-action: none; user-select: none; -webkit-user-select: none; }
.micro .picto-micro { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.micro .picto-micro svg { width: 44px; height: 44px; }
.etat-micro { font-size: 15px; color: var(--gris); min-height: 1.4em; font-variant-numeric: tabular-nums; }
textarea { width: 100%; min-height: 120px; border: 1px solid var(--eteint); border-radius: 12px; padding: 14px; background: var(--bloc); resize: vertical; font-size: 16px; line-height: 1.45; text-align: left; }
.lien { background: none; border: 0; color: var(--blanc); text-decoration: underline; text-underline-offset: 4px; font-size: 15px; opacity: .85; }

/* Réseaux : tuiles façon modes */
.tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: 100%; }
.tuile { display: grid; justify-items: center; gap: 9px; background: none; border: 0; padding: 0; }
.tuile-cadre { width: 100%; aspect-ratio: 1; border-radius: 16px; border: 2px solid var(--eteint); display: grid; place-items: center; transition: border-color .2s; }
.tuile .logo { width: 44%; height: 44%; filter: grayscale(1) brightness(.55); opacity: .7; transition: filter .25s, opacity .25s; }
.tuile.on .tuile-cadre { border-color: var(--blanc); }
.tuile.on .logo { filter: none; opacity: 1; }
.tuile-nom { font-size: 14px; color: var(--gris); }
.tuile.on .tuile-nom { color: var(--blanc); }

/* Logos */
.logo { display: block; color: var(--blanc); }
.logo svg { width: 100%; height: 100%; display: block; }
.logo-instagram svg { transform: scale(.72); }
.logo-instagram { border-radius: 28%; padding: 0; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }

/* Création en cours */
.attente { width: 150px; height: 150px; position: relative; }
.attente svg { width: 100%; height: 100%; }
.attente .tour { transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) { .attente .tour { animation: tourne 6s linear infinite; } }
@keyframes tourne { to { transform: rotate(360deg); } }
.attente-ligne { font-size: 16px; opacity: .85; min-height: 1.5em; }

/* Vos posts */
.liste { flex: 1; overflow-y: auto; display: grid; gap: 14px; align-content: start; padding: 4px 0 8px; min-height: 0; }
.carte { border: 1px solid var(--eteint); border-radius: 16px; background: rgba(28,28,27,.85); padding: 14px; display: grid; gap: 12px; text-align: left; }
.carte.on { border-color: var(--blanc); }
.carte.off { opacity: .45; }
.carte-tete { display: flex; align-items: center; gap: 12px; }
.carte-tete .logo { width: 28px; height: 28px; flex: none; }
.carte-tete strong { flex: 1; font-weight: 500; font-size: 17px; }
.bascule { border: 1.5px solid var(--eteint); background: none; border-radius: 999px; padding: 7px 14px; font-size: 14px; color: var(--gris); }
.carte.on .bascule { border-color: var(--blanc); color: var(--blanc); }
.apercu { display: flex; gap: 12px; background: none; border: 0; padding: 0; text-align: left; width: 100%; }
.apercu img, .apercu video { width: 64px; height: 80px; border-radius: 8px; object-fit: cover; flex: none; }
.apercu p { margin: 0; font-size: 15px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; }
.verifier { color: var(--alerte); font-size: 14px; display: flex; gap: 8px; align-items: baseline; }
.verifier::before { content: "!"; font-weight: 600; border: 1.5px solid currentColor; border-radius: 50%; width: 18px; height: 18px; display: inline-grid; place-items: center; font-size: 11px; flex: none; }
.horaire { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--gris); flex-wrap: wrap; }
.horaire select { background: var(--noir); border: 1px solid var(--eteint); border-radius: 10px; padding: 7px 10px; color: var(--blanc); font-size: 14px; }
.meilleur { font-size: 13px; color: var(--blanc); border-bottom: 1px solid var(--blanc); }

/* Feuilles (aperçu, confirmation) */
.voile { position: absolute; inset: 0; background: rgba(0,0,0,.72); display: flex; align-items: flex-end; z-index: 5; }
.feuille { background: #0d0d0d; border-top: 1px solid var(--eteint); width: 100%; max-height: 92%; border-radius: 24px 24px 0 0; padding: 14px 22px calc(22px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 16px; overflow-y: auto; }
.poignee { width: 40px; height: 4px; border-radius: 2px; background: var(--eteint); margin: 0 auto; }
.feuille h2 { font-weight: 500; font-size: 24px; margin: 0; text-align: center; text-wrap: balance; }
.grande-image { width: 100%; max-width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 12px; }
.texte-post { white-space: pre-wrap; margin: 0; font-size: 16px; line-height: 1.55; }
mark { background: none; color: var(--alerte); border-bottom: 1.5px solid var(--alerte); }
.recap { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--eteint); }
.recap li { display: flex; align-items: center; gap: 12px; padding: 14px 2px; border-bottom: 1px solid var(--eteint); font-variant-numeric: tabular-nums; }
.recap .logo { width: 24px; height: 24px; flex: none; }
.recap span { flex: 1; }
.recap select { background: var(--noir); border: 1px solid var(--eteint); border-radius: 10px; padding: 7px 10px; color: var(--blanc); font-size: 14px; }

/* Mes posts */
.onglets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 6px; }
.onglet { min-height: 46px; border-radius: 12px; border: 1.5px solid var(--eteint); background: none; color: var(--gris); font-size: 16px; }
.onglet span { font-size: 13px; opacity: .7; margin-left: 4px; }
.onglet.on { border-color: var(--blanc); color: var(--blanc); background: var(--bloc); }
.ligne { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border-radius: 14px; border: 1px solid var(--eteint); background: rgba(28,28,27,.85); text-align: left; }
.ligne img { width: 52px; height: 64px; border-radius: 8px; object-fit: cover; flex: none; }
.ligne-corps { flex: 1; min-width: 0; display: grid; gap: 6px; }
.ligne-corps strong { font-weight: 500; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne-reseau, .ligne-date { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gris); font-variant-numeric: tabular-nums; }
.ligne-reseau .logo, .mini-logos .logo { width: 16px; height: 16px; }
.mini-logos { display: inline-flex; gap: 5px; }
.statut { font-size: 12px; border: 1px solid var(--blanc); border-radius: 999px; padding: 4px 9px; flex: none; }
.chiffre { display: grid; justify-items: end; font-size: 12px; color: var(--gris); flex: none; }
.chiffre b { font-size: 20px; font-weight: 500; color: var(--blanc); font-variant-numeric: tabular-nums; }
.grand-chiffre { display: grid; justify-items: center; gap: 2px; padding: 6px 0 4px; }
.grand-chiffre b { font-size: 46px; font-weight: 300; font-variant-numeric: tabular-nums; }
.grand-chiffre span { font-size: 14px; color: var(--gris); }
.bilan { border-top: 1px solid var(--eteint); padding-top: 14px; display: grid; gap: 12px; }
.bilan .logo { width: 24px; height: 24px; flex: none; }
.verdict { font-size: 13px; color: var(--gris); text-align: right; }
.verdict.haut { color: var(--blanc); }
.reglages { gap: 8px; }
.reglages h3 { margin: 14px 2px 0; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.reglage { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--eteint); background: rgba(28,28,27,.85); text-align: left; font-size: 16px; }
.reglage > span:first-child { flex: 1; min-width: 0; }
.reglage .valeur { color: var(--gris); font-size: 14px; text-align: right; max-width: 45%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reglage .valeur em { color: var(--alerte); font-style: normal; }
.reglage .chevron { color: var(--gris); font-size: 22px; line-height: 1; }
.reglage select { background: var(--noir); border: 1px solid var(--eteint); border-radius: 10px; padding: 7px 10px; color: var(--blanc); font-size: 14px; }
.reglage.danger, .btn-second.danger { color: #ff8a80; }
.interrupteur input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interrupteur i { width: 46px; height: 28px; border-radius: 999px; border: 1.5px solid var(--eteint); position: relative; flex: none; transition: border-color .2s; }
.interrupteur i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: var(--gris); transition: transform .2s, background .2s; }
.interrupteur input:checked + i { border-color: var(--blanc); }
.interrupteur input:checked + i::after { transform: translateX(18px); background: var(--blanc); }
.interrupteur input:focus-visible + i { outline: 2px solid var(--blanc); outline-offset: 3px; }
.fiche { margin: 0; display: grid; gap: 4px; }
.fiche dt { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin-top: 10px; }
.fiche dd { margin: 0; font-size: 15px; line-height: 1.5; }
.recap small { display: block; font-size: 13px; color: var(--gris); }
.etat { font-style: normal; font-size: 13px; color: var(--gris); }
.etat.ok { color: var(--blanc); }
.etat.expire { color: var(--alerte); }
.mini { border: 1.5px solid var(--blanc); background: none; border-radius: 999px; padding: 6px 12px; font-size: 13px; }
.initiale { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--blanc); display: grid; place-items: center; flex: none !important; font-size: 15px; }
.ico-btn { width: 20px; height: 20px; vertical-align: -4px; margin-right: 6px; }
.bilan-mois { border: 1px solid var(--eteint); border-radius: 16px; padding: 14px 14px 10px; margin-bottom: 6px; display: grid; gap: 10px; }
.bilan-mois .grand-chiffre b { font-size: 40px; }
.bilan-lignes { display: grid; gap: 8px; border-top: 1px solid var(--eteint); padding-top: 10px; }
.bilan-lignes span { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: var(--gris); }
.bilan-lignes strong { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; color: var(--blanc); text-align: right; min-width: 0; }
.bilan-lignes .logo { width: 18px; height: 18px; flex: none; }
.mesures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mesures span { display: grid; gap: 2px; font-size: 12px; color: var(--gris); }
.mesures b { font-size: 18px; font-weight: 500; color: var(--blanc); font-variant-numeric: tabular-nums; }
/* ---------- Finesse : Mes posts et Réglages en filets, sans blocs encadrés ---------- */
:root { --filet: rgba(245, 245, 242, 0.13); }
.liste.fine, .liste.reglages { gap: 0; }
.reglages h3 { margin: 26px 0 4px; font-size: 11px; font-weight: 400; letter-spacing: .16em; color: var(--gris); }
.reglages h3:first-child { margin-top: 8px; }
.reglage { min-height: 52px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--filet); border-radius: 0; background: none; font-size: 16px; font-weight: 300; }
.reglage .valeur { font-weight: 300; }
.reglage .chevron { font-weight: 200; font-size: 24px; }
.reglage select, .horaire select, .recap select { background: none; border: 0; border-bottom: 1px solid var(--eteint); border-radius: 0; padding: 4px 2px; font-weight: 300; }
.reglage.danger { border-bottom: 0; margin-top: 18px; font-weight: 300; }
.interrupteur i { width: 40px; height: 24px; border-width: 1px; }
.interrupteur i::after { top: 3px; left: 3px; width: 16px; height: 16px; }
.interrupteur input:checked + i::after { transform: translateX(16px); }
.onglets { display: flex; gap: 26px; margin: 18px 0 2px; border-bottom: 1px solid var(--filet); }
.onglet { min-height: 0; padding: 0 0 10px; border: 0; border-radius: 0; background: none; font-size: 16px; font-weight: 300; margin-bottom: -1px; border-bottom: 1.5px solid transparent; }
.onglet.on { background: none; border-bottom-color: var(--blanc); }
.ligne { padding: 14px 0; border: 0; border-bottom: 1px solid var(--filet); border-radius: 0; background: none; }
.ligne img { width: 44px; height: 54px; border-radius: 6px; }
.ligne-corps strong { font-weight: 400; }
.statut { border-color: var(--eteint); color: var(--gris); font-weight: 300; }
.chiffre b { font-weight: 300; }
.bilan-mois { border: 0; border-bottom: 1px solid var(--filet); border-radius: 0; padding: 18px 0 14px; margin: 0; }
.bilan-mois .grand-chiffre b, .grand-chiffre b { font-weight: 200; }
.bilan-lignes { border-top: 0; padding-top: 0; }
.bilan-lignes strong { font-weight: 400; }
.fiche dd { font-weight: 300; }
.mesures b { font-weight: 300; }

/* ---------- Application (en plus de la maquette) ---------- */
.champ { width: 100%; min-height: 54px; border: 1px solid var(--eteint); border-radius: 12px; padding: 0 14px; background: var(--bloc); font-size: 17px; }
.message { position: absolute; left: 16px; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 9; background: #0d0d0d; border: 1px solid var(--alerte); color: var(--blanc); border-radius: 14px; padding: 14px 16px; font-size: 15px; line-height: 1.4; }
.bandeau { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--blanc); border-radius: 14px; background: var(--bloc); font-size: 15px; text-align: left; }
.bandeau span { flex: 1; }
.astuce { font-size: 14px; color: var(--gris); margin: 0; max-width: 32ch; line-height: 1.45; }
.simulation { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--alerte); text-align: center; }
.horaire input, .recap input { background: none; border: 0; border-bottom: 1px solid var(--eteint); padding: 4px 2px; color: var(--blanc); font-size: 14px; font-weight: 300; color-scheme: dark; }
.titre-epingle { font-weight: 500; margin: 0; }
.vignette-vide { width: 64px; height: 80px; border-radius: 8px; background: var(--bloc); flex: none; }
.format { font-size: 13px; color: var(--gris); margin-top: -4px; }
.pile { position: relative; flex: none; }
.pile b { position: absolute; right: 4px; bottom: 4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: rgba(0,0,0,.75); border: 1px solid var(--blanc); font-size: 12px; font-weight: 500; display: grid; place-items: center; }
.defile { display: flex; align-items: flex-start; flex-shrink: 0; min-height: 0; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -2px; }
.defile::-webkit-scrollbar { display: none; }
.defile > * { flex: 0 0 100%; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: 12px; scroll-snap-align: center; }
video.grande-image { background: #0d0d0d; }

/* Onboarding : une discussion */
.fil { flex: 1; overflow-y: auto; display: grid; gap: 12px; align-content: start; padding: 12px 0; min-height: 0; }
.bulle { max-width: 88%; padding: 12px 14px; border-radius: 16px; line-height: 1.5; white-space: pre-wrap; font-size: 15px; font-weight: 300; }
.bulle.assistant { justify-self: start; background: rgba(28,28,27,.92); border-bottom-left-radius: 4px; }
.bulle.dirigeant { justify-self: end; border: 1px solid var(--eteint); border-bottom-right-radius: 4px; background: var(--noir); }
.bulle b { display: block; font-weight: 500; margin: 8px 0 6px; }
.bulle b:first-child { margin-top: 0; }
.attente-bulle { color: var(--gris); }
.note { font-size: 12px; color: var(--gris); margin-top: 8px; white-space: normal; }
.versions { display: grid; gap: 10px; }
.version { text-align: left; border: 1px solid var(--blanc); border-radius: 14px; padding: 12px 14px; background: var(--bloc); white-space: pre-wrap; font-size: 14px; line-height: 1.45; font-weight: 300; }
.version b { font-weight: 500; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; }
.puce { border: 1px solid var(--eteint); border-radius: 999px; padding: 4px 10px; font-size: 13px; }
.saisie { display: flex; gap: 8px; align-items: flex-end; }
.saisie textarea { min-height: 52px; max-height: 140px; flex: 1; padding: 12px; }
.envoyer { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--blanc); background: var(--bloc); font-size: 26px; line-height: 1; flex: none; }
.envoyer:disabled { border-color: var(--eteint); color: var(--gris); }
.banque b { display: block; font-weight: 500; margin: 6px 0; }

.accord { display: flex; gap: 10px; align-items: flex-start; text-align: left; font-size: 14px; color: var(--gris); line-height: 1.45; }
.accord input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--blanc); }
.accord a { color: var(--blanc); }
.essai { font-size: 13px; color: var(--gris); text-align: center; margin-top: 6px; }
.essai.fini { color: var(--alerte); }
a.reglage { color: inherit; text-decoration: none; }
.champ.code { text-align: center; font-size: 26px; letter-spacing: .3em; font-variant-numeric: tabular-nums; }

/* Dictée */
.dictee { display: flex; align-items: center; gap: 10px; }
.dictee.grande { flex-direction: column; gap: 8px; }
.dicter { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--blanc); background: var(--bloc); display: grid; place-items: center; flex: none; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.dicter svg { width: 24px; height: 24px; pointer-events: none; }
.dicter.grand { width: 170px; height: 170px; border: 0; background: none; }
.dicter.grand svg { width: 44px; height: 44px; }
.dicter.ecoute:not(.grand) { background: var(--blanc); color: var(--noir); }
.etat-dictee { font-size: 14px; color: var(--gris); min-height: 1.3em; font-variant-numeric: tabular-nums; text-align: center; }
.saisie .dictee { align-self: flex-end; }
.horaire-choix { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.horaire-choix select { background: none; border: 0; border-bottom: 1px solid var(--eteint); padding: 4px 2px; color: var(--blanc); font-size: 14px; font-weight: 300; }