/* Calame — l'atelier des symboles.
   Langage « mur » : des tuiles bord à bord (4 px), pas de cadres emboîtés, du vide entre les sections. */
body { display: grid; grid-template-rows: auto 1fr; height: 100vh; overflow: hidden; background: var(--papier-clair); }

/* ——— Barre ——— */
.barre {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 28px;
  padding: 22px 32px 18px;
  border-bottom: 1px solid var(--encre-pale);
}
.marque { display: flex; align-items: baseline; gap: 16px; }
.nom-jeu { font-weight: 300; font-size: 34px; line-height: 1; color: var(--encre); text-decoration: none; }
.etat-enregistre { margin: 0; justify-self: end; font-style: italic; font-size: 15px; color: var(--encre-douce); opacity: 0; }
.etat-enregistre.vu { animation: vu 2.2s var(--lent); }
@keyframes vu { 0% { opacity: 0; transform: translateY(3px); } 15% { opacity: 1; transform: none; } 70% { opacity: 1; } 100% { opacity: 0; } }
.actions { display: flex; gap: 26px; align-items: baseline; }
.action {
  position: relative; background: none; border: 0; padding: 4px 0; cursor: pointer;
  font-weight: 500; font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--encre); text-decoration: none;
}
.action::after { content: ""; position: absolute; left: 0; right: 0.3em; bottom: 0; height: 1px; background: var(--encre); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--lent); }
.action:hover::after, .action:focus-visible::after { transform: scaleX(1); }
.action.discret { color: var(--encre-douce); }

/* ——— Trois colonnes ——— */
.atelier { display: grid; grid-template-columns: 296px minmax(0, 1fr) 392px; min-height: 0; }
.colonne { overflow-y: auto; min-height: 0; padding: 30px 28px 60px; scrollbar-width: thin; scrollbar-color: rgba(var(--encre-rvb), 0.2) transparent; }
.liste { background: rgba(var(--encre-rvb), 0.035); }
.proprietes { background: rgba(var(--encre-rvb), 0.05); }
.centre { padding: 34px 48px 80px; }
.colonne > section + section { margin-top: 30px; }

.titre-section {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 12px;
  font-weight: 600; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--encre);
}
.compte { font-weight: 400; font-style: italic; font-size: 15px; letter-spacing: 0; color: var(--encre-douce); }
.aide-section { margin: -6px 0 12px; font-style: italic; font-size: 15px; line-height: 1.35; color: var(--encre-douce); }

/* ——— Le mur de tuiles ——— */
.mur { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.tuile {
  position: relative; aspect-ratio: 1;
  display: grid; place-items: center;
  background: rgba(var(--encre-rvb), 0.05); border: 0; padding: 0; cursor: pointer;
  transition: background 0.3s;
}
.tuile:hover { background: rgba(var(--encre-rvb), 0.09); }
.tuile .glyphe-c { pointer-events: none; }
.nom-tuile {
  position: absolute; left: 10px; bottom: 8px; right: 10px;
  font-weight: 500; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.marque-secret { position: absolute; top: 7px; right: 10px; font-style: italic; font-size: 13px; color: var(--encre-douce); }
.tuile.actif { background: var(--encre); color: var(--papier-clair); }
.tuile.actif .marque-secret { color: rgba(var(--clair-rvb), 0.6); }
.tuile.vide::after { content: ""; position: absolute; top: 9px; left: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--alerte); }
.tuile.nouveau { background: transparent; outline: 1px dashed rgba(var(--encre-rvb), 0.25); outline-offset: -1px; }
.tuile.nouveau:hover { background: rgba(var(--encre-rvb), 0.05); }
.plus { width: 22px; height: 22px; position: relative; }
.plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--encre); }
.plus::before { width: 22px; height: 1px; transform: translate(-50%, -50%); }
.plus::after { width: 1px; height: 22px; transform: translate(-50%, -50%); }

.pile { display: flex; flex-direction: column; gap: 4px; }
.ligne {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 54px; padding: 6px 14px 6px 8px;
  background: rgba(var(--encre-rvb), 0.05); border: 0; cursor: pointer; text-align: left;
  transition: background 0.3s;
}
.ligne:hover { background: rgba(var(--encre-rvb), 0.09); }
.ligne.actif { background: var(--encre); color: var(--papier-clair); }
.ligne.nouveau { background: transparent; outline: 1px dashed rgba(var(--encre-rvb), 0.25); outline-offset: -1px; justify-content: center; }
.mini-suite { display: flex; align-items: center; }
.nom-ligne { font-style: italic; font-size: 17px; }
.tuile-ligne {
  width: 100%; padding: 16px 14px; text-align: left; cursor: pointer;
  background: rgba(var(--encre-rvb), 0.05); border: 0;
  font-weight: 600; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
}
.tuile-ligne:hover { background: rgba(var(--encre-rvb), 0.09); }
.tuile-ligne.actif { background: var(--encre); color: var(--papier-clair); }

/* ——— Centre ——— */
.tete-centre { margin-bottom: 26px; max-width: 760px; }
.nom-grand { margin: 0 0 6px; font-weight: 300; font-size: 58px; line-height: 1; }
.nom-grand[style]::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 18px; border-radius: 50%; background: var(--c); vertical-align: middle; transform: translateY(-6px); }
.vide-centre { margin-top: 30vh; text-align: center; }
.zone-pad { display: grid; grid-template-columns: minmax(260px, 460px) minmax(220px, 1fr); gap: 4px; margin-bottom: 34px; max-width: 900px; }
.feuille { position: relative; background: var(--feuille); box-shadow: inset 0 0 0 1px rgba(var(--encre-rvb), 0.08); }
.pad { display: block; width: 100%; aspect-ratio: 1; cursor: crosshair; touch-action: none; }
.pad-actions { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; gap: 4px; }
.bouton {
  padding: 10px 16px; cursor: pointer;
  background: rgba(var(--encre-rvb), 0.06); border: 0;
  font-weight: 600; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  transition: background 0.3s, color 0.3s, opacity 0.3s;
}
.bouton:hover { background: rgba(var(--encre-rvb), 0.12); }
.bouton.plein { background: var(--encre); color: var(--papier-clair); }
.bouton.plein:hover { background: var(--encre-fort); }
.bouton:disabled { opacity: 0.3; cursor: default; }
.bouton.danger { background: transparent; color: var(--rouge); padding-left: 0; }
.bouton.danger:hover { color: var(--rouge-fort); background: transparent; }

.lecture { background: rgba(var(--encre-rvb), 0.04); padding: 22px 22px 18px; min-height: 100%; }
.lecture:empty::before { content: "Ce que le jeu lit s'affiche ici, juste après le tracé."; font-style: italic; font-size: 16px; color: var(--encre-douce); }
.verdict { display: flex; align-items: center; gap: 10px; margin: 6px 0 18px; font-weight: 300; font-size: 34px; line-height: 1; }
.verdict.rate { font-style: italic; font-size: 24px; color: var(--encre-douce); }
.barres { display: flex; flex-direction: column; gap: 10px; }
.barre-lecture { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 10px; font-size: 15px; }
.nom-barre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.piste { position: relative; height: 6px; background: rgba(var(--encre-rvb), 0.08); }
.rempli { position: absolute; left: 0; top: 0; bottom: 0; }
.seuil { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; background: var(--encre); }
.note { margin: 14px 0 0; font-style: italic; font-size: 14px; color: var(--encre-douce); }
.alerte { margin: 10px 0 14px; padding-left: 12px; border-left: 2px solid var(--alerte); font-style: italic; font-size: 16px; line-height: 1.35; color: var(--alerte-texte); max-width: 640px; }

.mur.exemples, .mur.palette-symboles { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); max-width: 900px; }
.tuile.exemple { cursor: default; }
.tuile .retirer, .retirer-survol {
  position: absolute; top: 6px; right: 8px; opacity: 0;
  background: none; border: 0; cursor: pointer; padding: 2px;
  font-style: italic; font-size: 14px; color: var(--rouge); transition: opacity 0.25s;
}
.tuile:hover .retirer, .tuile:hover .retirer-survol { opacity: 1; }
.suite-grande { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; min-height: 134px; margin-bottom: 18px; }
.tuile.grande { width: 134px; }
.fil { width: 34px; height: 1px; background: var(--encre); opacity: 0.5; }

/* ——— Propriétés ——— */
.champ-nom { display: block; }
.champ-nom input {
  width: 100%; padding: 2px 0 8px;
  background: transparent; border: 0; border-bottom: 1px solid rgba(var(--encre-rvb), 0.3);
  font: 300 32px var(--serif); color: var(--encre);
}
.champ-nom input:focus { outline: none; border-bottom-color: var(--encre); }

.nuancier { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.nuance { aspect-ratio: 1; border: 0; padding: 0; cursor: pointer; background: var(--c); position: relative; }
.nuance.actif::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: var(--papier-clair); }
.nuance.libre { display: block; background: conic-gradient(from 90deg, #d9826b, #e3c46a, #9cc48a, #8cc1d4, #b9a3d6, #c96f8a, #d9826b); }
.nuance.libre input { opacity: 0; width: 100%; height: 100%; cursor: pointer; }

.curseur { display: block; margin: 0 0 14px; }
.ligne-curseur { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.nom-curseur { font-size: 16px; }
.curseur output { font-style: italic; font-size: 17px; }
.aide-curseur { display: block; margin-top: 2px; font-style: italic; font-size: 14px; line-height: 1.3; color: var(--encre-douce); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: rgba(var(--encre-rvb), 0.4); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; margin-top: -6px; border-radius: 50%; background: var(--encre); border: 0; }
input[type="range"]::-moz-range-track { height: 1px; background: rgba(var(--encre-rvb), 0.4); }
input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--encre); border: 0; }
input[type="range"]:focus { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(var(--encre-rvb), 0.15); }

.ligne-bascule { margin: 0 0 14px; }
.bascule { display: flex; width: 100%; justify-content: space-between; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.interrupteur { width: 34px; height: 18px; border: 1px solid rgba(var(--encre-rvb), 0.45); border-radius: 9px; position: relative; transition: background 0.3s; }
.interrupteur::after { content: ""; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--encre); transition: transform 0.35s var(--lent); }
.bascule.oui .interrupteur { background: var(--encre); }
.bascule.oui .interrupteur::after { background: var(--papier-clair); transform: translateX(16px); }

.segmente { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.segmente button { padding: 10px 10px; background: rgba(var(--encre-rvb), 0.05); border: 0; cursor: pointer; font-size: 15px; line-height: 1.2; text-align: left; transition: background 0.3s; }
.segmente button:hover { background: rgba(var(--encre-rvb), 0.1); }
.segmente button.actif { background: var(--encre); color: var(--papier-clair); }
.champ-options { margin: 0 0 14px; }
.champ-options .nom-curseur { display: block; margin-bottom: 6px; }

.effets { display: flex; flex-direction: column; gap: 4px; }
.effet { background: rgba(var(--clair-rvb), 0.75); padding: 14px 16px 4px; }
.effet.modif { background: rgba(var(--clair-rvb), 0.45); box-shadow: inset 3px 0 0 var(--encre); }
.tete-effet { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.tete-effet .retirer { background: none; border: 0; cursor: pointer; font-style: italic; font-size: 15px; color: var(--rouge); }
select.type-effet {
  -webkit-appearance: none; appearance: none;
  background: transparent; border: 0; border-bottom: 1px solid rgba(var(--encre-rvb), 0.3); padding: 2px 22px 4px 0;
  font: 400 21px var(--serif); color: var(--encre); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--encre) 50%), linear-gradient(135deg, var(--encre) 50%, transparent 50%);
  background-position: right 6px top 55%, right 1px top 55%; background-size: 5px 5px; background-repeat: no-repeat;
}
select.type-effet:focus { outline: none; border-bottom-color: var(--encre); }
.effets > select.type-effet { margin-top: 10px; font-size: 17px; font-style: italic; color: var(--encre-douce); border-bottom-style: dashed; }
.fin-panneau { padding-top: 10px; }

@media (max-width: 1180px) {
  .atelier { grid-template-columns: 240px minmax(0, 1fr) 340px; }
  .zone-pad { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  body { height: auto; overflow: auto; }
  .barre { grid-template-columns: 1fr; padding: 16px; gap: 8px; }
  .actions { flex-wrap: wrap; gap: 14px; }
  .atelier { grid-template-columns: 1fr; }
  .colonne { overflow: visible; padding: 22px 16px; }
}
.ligne.nouveau .nom-ligne { font-size: 15px; }

.action.theme { display: inline-flex; align-items: center; gap: 9px; }

.logique { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.logique li { padding: 10px 12px; background: rgba(var(--encre-rvb), 0.05); font-size: 16px; line-height: 1.35; }
.logique b { display: block; font-weight: 600; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 2px; }

/* l'édition à plusieurs */
.barre { grid-template-columns: auto auto 1fr auto; }
.presents { margin: 0; font-style: italic; font-size: 15px; color: var(--encre-douce); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etat-enregistre.fixe { opacity: 1; animation: none; }
.action.nom { font-style: italic; text-transform: none; letter-spacing: 0.02em; font-size: 15px; font-weight: 400; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tuile .present {
  position: absolute; top: 6px; right: 6px; max-width: calc(100% - 12px);
  padding: 1px 7px; background: var(--alerte); color: #fbf6ee;
  font-size: 12px; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.historique { margin-top: 4px; }
.version { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(var(--encre-rvb), 0.05); }
.version .quand { font-size: 15px; }
.version .qui { font-style: italic; font-size: 14px; color: var(--encre-douce); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bandeau-anciens { display: flex; align-items: center; gap: 4px; padding: 10px 32px; background: rgba(var(--encre-rvb), 0.07); border-bottom: 1px solid var(--encre-pale); }
.bandeau-anciens p { flex: 1; margin: 0; font-style: italic; font-size: 16px; }
body { grid-template-rows: auto auto 1fr; }
body:not(:has(.bandeau-anciens)) { grid-template-rows: auto 1fr; }

/* 17/10 — commentaires de l'autrice : plus de panneau pour un symbole, un bloc « Effet » en mots */
.atelier.sans-panneau { grid-template-columns: 296px minmax(0, 1fr); }
.atelier.sans-panneau .proprietes { display: none; }
.centre { padding-top: 30px; }
.zone-pad { max-width: 1000px; grid-template-columns: minmax(260px, 460px) minmax(260px, 1fr); }
.colonne-droite { display: flex; flex-direction: column; gap: 4px; min-height: 100%; }
.colonne-droite .lecture { min-height: 0; flex: 0 0 auto; }
.bloc-effet { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 200px; padding: 18px 22px 14px; background: rgba(var(--encre-rvb), 0.04); }
.tete-bloc { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tete-bloc .titre-section { margin: 0 0 10px; }
.texte-effet {
  flex: 1 1 auto; width: 100%; min-height: 150px; resize: vertical; padding: 0;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 29px, rgba(var(--encre-rvb), 0.12) 29px, rgba(var(--encre-rvb), 0.12) 30px);
  border: 0; outline: none;
  font: italic 400 19px/30px var(--serif); color: var(--encre);
}
.texte-effet::placeholder { color: var(--encre-douce); }
.badge-branche { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--encre-douce); }
.badge-branche.vide { visibility: hidden; }
.badge-branche .prise { position: relative; width: 16px; height: 10px; border: 1.5px solid currentColor; border-radius: 2px 5px 5px 2px; }
.badge-branche .prise::before, .badge-branche .prise::after { content: ""; position: absolute; left: -6px; width: 5px; height: 1.5px; background: currentColor; }
.badge-branche .prise::before { top: 1.5px; } .badge-branche .prise::after { bottom: 1.5px; }
.badge-branche.branche { color: var(--encre); }
.badge-branche.branche .prise { background: currentColor; }
.badge-branche.attente .prise::before, .badge-branche.attente .prise::after { left: -9px; }
.rempli { background: var(--encre); }
.tuile .suppr {
  position: absolute; top: 4px; right: 6px; width: 22px; height: 22px; display: grid; place-items: center;
  font-size: 18px; line-height: 1; color: var(--encre-douce); opacity: 0; transition: opacity 0.2s, color 0.2s; cursor: pointer;
}
.tuile:hover .suppr, .tuile.actif .suppr { opacity: 1; }
.tuile .suppr:hover { color: var(--rouge); }
.tuile.actif .suppr { color: rgba(var(--papier-rvb), 0.7); }
.tuile .present { right: auto; left: 6px; }
/* la tuile choisie : le symbole est à l'encre, la tuile ne peut plus être pleine d'encre */
.tuile.actif { background: rgba(var(--encre-rvb), 0.13); color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--encre); }
.tuile.actif .suppr { color: var(--encre-douce); }
.tuile.actif .marque-secret { color: var(--encre-douce); }

/* 17/10 (commentaires) : les tracés gardés en colonne, tout à droite ; le nom s'écrit sur la tuile */
.zone-pad { max-width: none; grid-template-columns: minmax(260px, 460px) minmax(260px, 1fr) 124px; }
.colonne-traces { display: flex; flex-direction: column; min-height: 0; max-height: 100%; }
.colonne-traces .titre-section { margin: 0 0 8px; flex-wrap: wrap; row-gap: 2px; }
.colonne-traces .alerte { font-size: 14px; }
.pile-traces { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; min-height: 0; max-height: 460px; scrollbar-width: thin; }
.pile-traces .tuile.exemple { flex: 0 0 auto; width: 100%; }
input.nom-tuile {
  position: absolute; left: 6px; right: 26px; bottom: 6px; width: auto; padding: 2px 4px;
  background: transparent; border: 0; border-bottom: 1px solid transparent; outline: none;
  font: 500 11px var(--serif); letter-spacing: 0.2em; text-transform: uppercase; color: inherit;
  cursor: text; transition: border-color 0.2s, background 0.2s;
}
.tuile:hover input.nom-tuile { border-bottom-color: rgba(var(--encre-rvb), 0.25); }
input.nom-tuile:focus { border-bottom-color: var(--encre); background: rgba(var(--papier-rvb), 0.6); text-transform: none; letter-spacing: 0.04em; font-size: 14px; }

/* 17/10 (commentaires d'UA) : plus de barre de défilement — la molette fait toujours défiler */
.colonne, .pile-traces { scrollbar-width: none; }
.colonne::-webkit-scrollbar, .pile-traces::-webkit-scrollbar { display: none; }

/* 17/10 : le rendu des effets, choisi sur des aperçus animés */
.bloc-rendu { margin-top: 22px; display: flex; flex-direction: column; gap: 16px; }
.ligne-rendu .titre-section { margin: 0 0 8px; }
.tuiles-rendu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tuile-rendu { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 4px; padding: 4px; border-radius: 3px; outline: 1px solid transparent; transition: outline-color 0.2s, background 0.2s; }
.tuile-rendu:hover { background: rgba(var(--encre-rvb), 0.04); }
.tuile-rendu.actif { outline: 1.5px solid var(--encre); background: rgba(var(--encre-rvb), 0.05); }
.tuile-rendu:focus-visible { outline: 1.5px dashed var(--encre); }
.apercu-rendu { width: 100%; aspect-ratio: 4 / 3; display: block; border-radius: 2px; }
.nom-rendu { font: 500 12px var(--serif); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.75; text-align: center; }
.tuile-rendu.actif .nom-rendu { opacity: 1; }

/* 17/10 : un symbole peut être retiré du jeu (interrupteur en haut à gauche de sa tuile) */
.tuile .interrupteur { position: absolute; left: 7px; top: 7px; width: 22px; height: 12px; border-radius: 6px; cursor: pointer;
  border: 1px solid rgba(var(--encre-rvb), 0.45); background: transparent; transition: background 0.2s, border-color 0.2s; }
.tuile .interrupteur .bouton-int { position: absolute; top: 1px; left: 1px; width: 8px; height: 8px; border-radius: 50%; background: rgba(var(--encre-rvb), 0.45); transition: transform 0.2s, background 0.2s; }
.tuile .interrupteur.on { background: rgba(var(--encre-rvb), 0.85); border-color: rgba(var(--encre-rvb), 0.85); }
.tuile .interrupteur.on .bouton-int { transform: translateX(10px); background: var(--papier-ton, #f3eee5); }
.tuile .interrupteur:focus-visible { outline: 1.5px dashed var(--encre); outline-offset: 2px; }
.tuile.eteint canvas { opacity: 0.28; }
.tuile.eteint input.nom-tuile { opacity: 0.5; text-decoration: line-through; }