/* La Métamorphose : l’arbre des 643, la grille magnétique, les blocs dans la Charte.
   Par-dessus tokens.css, composants.css et atlas.css. Couleurs, rayons, espaces : les jetons. */
.entete-meta, #repetitions, .atelier-meta > .date-chapitre, .atelier-meta > .grand-mot { text-align: center; }
.entete-meta > .chapeau, #repetitions > .chapeau, #repetitions > .note-source { margin-inline: auto; }
.titre-meta { font-size: clamp(36px, 9.5vw, 160px); overflow-wrap: anywhere; }

/* la réparation : une barre par famille, à l’échelle de la plus grande */
.barres-familles { list-style: none; margin: var(--espace-7) auto 0; padding: 0; max-width: 900px; display: grid; gap: var(--espace-2); text-align: left; }
.barres-familles li { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) 48px; gap: var(--espace-3); align-items: center; }
.barres-familles b { font-size: 16px; font-weight: 600; }
.barres-familles .piste { height: 18px; border-radius: var(--rayon-xs); background: var(--doux); overflow: hidden; }
.barres-familles .plein { display: block; height: 100%; border-radius: var(--rayon-xs); background: var(--encre); }
.barres-familles li.a-part .plein { background: var(--trait-2); }
.barres-familles span.n { font-size: 15px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .barres-familles li { grid-template-columns: minmax(0, 1fr) 40px; } .barres-familles .piste { grid-column: 1 / -1; grid-row: 2; } }

/* la barre d’outils */
.barre-outils { display: flex; flex-wrap: wrap; gap: var(--espace-2) var(--espace-3); align-items: center; justify-content: center; margin: var(--espace-7) 0 var(--espace-5); }
.compte { margin: 0; font-size: 15px; font-weight: 600; color: var(--encre-2); min-width: 120px; }

/* l’arbre à gauche, la grille à droite */
.plan { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--espace-5); align-items: start; }
@media (max-width: 900px) { .plan { grid-template-columns: minmax(0, 1fr); } }
.arbre { position: sticky; top: 104px; display: grid; gap: var(--espace-3); max-height: calc(100vh - 210px); overflow: auto; padding: var(--espace-3); border-radius: var(--rayon-lg); background: var(--carte); border: 1px solid var(--trait); }
@media (max-width: 900px) { .arbre { position: static; max-height: 420px; } }
.arbre-titre { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.arbre-titre span { font-size: 14px; font-weight: 500; color: var(--encre-3); }
.arbre .champ { height: 44px; font-size: 15px; }
.familles { display: grid; gap: 2px; }
.famille > summary { display: flex; align-items: center; gap: var(--espace-2); min-height: 44px; padding: 0 var(--espace-2); border-radius: var(--rayon-sm); font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; }
.famille > summary::-webkit-details-marker { display: none; }
.famille > summary::before { content: ''; width: 0; height: 0; border-left: 6px solid var(--encre); border-top: 5px solid transparent; border-bottom: 5px solid transparent; transition: transform .15s; flex: none; }
.famille[open] > summary::before { transform: rotate(90deg); }
.famille > summary:hover { background: var(--doux); }
.famille > summary small { margin-left: auto; font-size: 13px; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.pastille-famille { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(11,11,12,.25); }
.fragments { list-style: none; margin: 0 0 var(--espace-2); padding: 0 0 0 var(--espace-4); display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.fragments li { min-width: 0; }
.fragment { display: flex; align-items: center; gap: var(--espace-2); width: 100%; min-height: 40px; padding: 0 var(--espace-2); border: 1px solid transparent; border-radius: var(--rayon-sm); background: transparent; color: var(--encre); font: inherit; font-size: 14px; text-align: left; cursor: grab; touch-action: none; user-select: none; }
.fragment:hover { background: var(--doux); border-color: var(--trait); }
.fragment span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fragment small { flex: none; font-size: 12px; font-weight: 600; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.fragment.place::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--encre); flex: none; }

/* la grille magnétique : 12 colonnes, des rangées de 72px, les cases dessinées en pointillé */
.zone { min-width: 0; }
.vide-grille { margin: 0; }
.grille-aimantee { --col: 12; --rang: 72px; --ecart: 12px; position: relative; display: grid; grid-template-columns: repeat(var(--col), minmax(0, 1fr)); grid-auto-rows: var(--rang); gap: var(--ecart); min-height: 480px; padding: var(--ecart); border-radius: var(--rayon-xl); background-color: var(--papier);
  background-image: radial-gradient(circle, var(--trait-2) 1.5px, transparent 1.6px); background-size: calc((100% - var(--ecart)) / var(--col)) calc(var(--rang) + var(--ecart)); background-position: calc(var(--ecart) / 2) calc(var(--ecart) / 2); }
@media (max-width: 900px) { .zone { overflow-x: auto; padding-bottom: var(--espace-2); } .grille-aimantee { min-width: 760px; } }
.zone { position: relative; }
.aimant { border-radius: var(--rayon-md); border: 2px dashed var(--encre); background: rgba(11,11,12,.06); pointer-events: none; z-index: 1; }
.aimant.refus { border-color: var(--erreur); background: rgba(163,18,42,.06); }
.aide { margin: var(--espace-3) 0 0; font-size: 14px; color: var(--encre-3); text-align: center; }
.vide-grille { grid-column: 1 / -1; grid-row: 2 / span 3; align-self: center; text-align: center; color: var(--encre-3); font-size: 17px; pointer-events: none; }

/* un bloc : la Charte, en petit */
.bloc { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0; overflow: hidden; padding: var(--espace-3); border-radius: var(--rayon-md); background: var(--carte); border: 1px solid var(--trait); box-shadow: 0 1px 0 var(--trait); transition: box-shadow .2s, transform .2s; }
.bloc:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }
.bloc.leve { box-shadow: var(--ombre-menu); transform: scale(1.01); opacity: .35; }
.bloc .poignee { position: absolute; inset: 0; cursor: grab; touch-action: none; z-index: 0; }
.bloc > *:not(.poignee) { position: relative; z-index: 1; pointer-events: none; }
.bloc .sur { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-3); display: flex; align-items: center; gap: 6px; }
.bloc h4 { margin: 0; font-size: clamp(16px, 1.5vw, 22px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; }
.bloc p.role { margin: 0; font-size: 14px; line-height: 1.4; color: var(--encre-2); }
.bloc .meta { margin: auto 0 0; font-size: 12px; font-weight: 600; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.bloc .puces { margin: 0; gap: 4px; }
.bloc .puces li { font-size: 12px; padding: 3px 8px; }
.bloc.brique h4 { font-size: clamp(22px, 2.4vw, 34px); }
.bloc.sombre { background: var(--encre); border-color: var(--encre); color: var(--blanc); }
.bloc.sombre .sur, .bloc.sombre .meta { color: var(--blanc-3); }
.bloc.sombre p.role { color: var(--blanc-2); }
.bloc.sombre .puces li { background: transparent; border-color: rgba(255,255,255,.3); color: var(--blanc); }
.bloc.photo, .bloc.visuel { color: var(--blanc); border: 0; background: #111; }
.apercu-achevement .bloc.photo { background: #111 url('../media/union-camille-gabriel.jpg') center 40% / cover; }
.bloc > img.fond-bloc { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.bloc.photo::after, .bloc.visuel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.18)); z-index: 0; pointer-events: none; }
.bloc.photo .sur, .bloc.photo .meta, .bloc.visuel .sur { color: rgba(255,255,255,.8); }
.bloc.photo p.role { color: rgba(255,255,255,.88); }
.bloc.photo .puces li { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); color: #fff; }
.bloc.nacre { background: var(--carte); }
.bloc.nacre .orbe-bloc { position: absolute; right: -40px; top: -40px; width: 220px; height: 220px; border-radius: 50%; background: var(--nacre); opacity: .9; z-index: 0; pointer-events: none; }
.bloc.grille { background-color: var(--carte); background-image: linear-gradient(var(--trait) 1px, transparent 1px), linear-gradient(90deg, var(--trait) 1px, transparent 1px); background-size: 14px 14px; }
.bloc.grille h4, .bloc.grille p.role { background: var(--carte); align-self: flex-start; padding-right: 6px; }
.fantome { position: fixed; z-index: 90; pointer-events: none; padding: 10px 14px; border-radius: var(--rayon-sm); background: var(--encre); color: var(--blanc); font-size: 14px; font-weight: 600; box-shadow: var(--ombre-menu); max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) { .bloc, .famille > summary::before { transition: none; } }

/* le visuel posé : une section, ou une une (le titre en grand, en blanc, comme les bandeaux de la chronologie) */
.texte-visuel { margin-top: auto; }
.bloc.visuel h4 { color: var(--blanc); font-size: clamp(20px, 2.2vw, 34px); }
.bloc.visuel.une { justify-content: center; text-align: center; }
.bloc.visuel.une .texte-visuel { margin: auto 0; }
.bloc.visuel.une .sur { justify-content: center; }
.bloc.visuel.une h4 { font-size: clamp(34px, 6vw, 96px); line-height: .95; letter-spacing: -0.035em; }
.bloc.visuel.une::after { background: linear-gradient(rgba(0,0,0,.22), rgba(0,0,0,.5)); }

/* l’étude : ce que le fragment raconte, selon la place qu’on lui donne */
.bloc .etude { display: grid; gap: 4px; }
.bloc .etude p { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--encre-2); }
.bloc .etude .sens { font-weight: 500; color: var(--encre); }
.bloc .etude .lien-voisins { font-size: 12px; font-weight: 600; color: var(--encre-3); }
.bloc.petit .etude, .bloc.petit p.role, .bloc.petit .puces, .bloc.moyen .etude .sens, .bloc.moyen .etude .lien-voisins, .bloc.moyen .puces { display: none; }
.bloc.groupe.grand h4 { font-size: clamp(22px, 2.4vw, 34px); }
.bloc.sombre .etude p, .bloc.photo .etude p { color: var(--blanc-2); }
.bloc.sombre .etude .sens, .bloc.photo .etude .sens { color: var(--blanc); }

/* le bloc choisi : un contour, quatre coins pour l’agrandir */
.bloc.choisi { outline: 2px solid var(--encre); outline-offset: 3px; box-shadow: var(--ombre-menu); }
.bloc.sombre.choisi, .bloc.photo.choisi, .bloc.visuel.choisi { outline-color: var(--nacre-lilas); }
.bloc > .coin { position: absolute; z-index: 3; width: 40px; height: 40px; pointer-events: auto; touch-action: none; }
.bloc > .coin::after { content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--carte); border: 2px solid var(--encre); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.coin-nw { left: 0; top: 0; cursor: nwse-resize; } .coin-nw::after { left: 5px; top: 5px; }
.coin-ne { right: 0; top: 0; cursor: nesw-resize; } .coin-ne::after { right: 5px; top: 5px; }
.coin-sw { left: 0; bottom: 0; cursor: nesw-resize; } .coin-sw::after { left: 5px; bottom: 5px; }
.coin-se { right: 0; bottom: 0; cursor: nwse-resize; } .coin-se::after { right: 5px; bottom: 5px; }

/* la barre d’actions, posée sous le bloc choisi */
.barre-bloc { position: absolute; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: min(100%, 720px); padding: 6px; border-radius: var(--rayon-dock); background: var(--carte); border: 1px solid var(--trait); box-shadow: var(--ombre-dock); }
.barre-bloc[hidden] { display: none; }
.barre-bloc .barre-nom { margin: 0 6px; font-size: 14px; font-weight: 600; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-bloc .barre-nom small { font-weight: 500; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.barre-bloc button { min-height: 40px; padding: 0 12px; border-radius: var(--rayon-sm); border: 1px solid var(--trait-2); background: var(--carte); color: var(--encre); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.barre-bloc button:hover { background: var(--doux); }
.barre-bloc button[data-act="retirer"] { border-color: transparent; color: var(--erreur); }

/* la fiche : l’étude complète du bloc choisi */
.fiche-bloc { margin-top: var(--espace-6); padding: var(--espace-5); border-radius: var(--rayon-carte); background: var(--carte); border: 1px solid var(--trait); text-align: left; }
.fiche-bloc[hidden] { display: none; }
.fiche-bloc .surtitre { display: flex; align-items: center; gap: 8px; }
.fiche-bloc .titre { margin: 6px 0 12px; }
.fiche-bloc p { margin: 8px 0 0; max-width: 70ch; font-size: 16px; line-height: 1.5; color: var(--encre-2); }
.etude-liste { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0 0 8px; }
.etude-liste div { display: grid; gap: 2px; }
.etude-liste dt { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-3); }
.etude-liste dd { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* les visuels dans l’arbre : des vignettes */
.fragments.vignettes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding-left: 0; }
.fragment.vignette { flex-direction: column; align-items: stretch; gap: 4px; min-height: 0; padding: 4px; border-color: var(--trait); }
.fragment.vignette img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; pointer-events: none; -webkit-user-drag: none; }
.fragment.vignette span { font-size: 12.5px; font-weight: 600; }
.fragment.vignette { position: relative; }
.fragment.vignette.place::after { position: absolute; top: 10px; right: 10px; background: var(--carte); box-shadow: 0 0 0 2px var(--encre); }
.barre-titre { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-3); margin-right: 4px; }
.barre-seconde { margin-top: 0; }

/* l’achèvement dans « Demain » (index) : la même composition, en aperçu */
.apercu-achevement { --col: 12; display: grid; grid-template-columns: repeat(var(--col), minmax(0, 1fr)); grid-auto-rows: 64px; gap: 8px; max-width: 1100px; margin: var(--espace-7) auto 0; text-align: left; }
@media (max-width: 720px) { .apercu-achevement { --col: 1; grid-auto-rows: auto; } .apercu-achevement > * { grid-column: 1 / -1 !important; grid-row: auto !important; } }
.apercu-achevement .bloc { padding: var(--espace-3); }
.apercu-achevement .bloc.carte, .apercu-achevement .bloc.grille { background-color: #1b1b1a; background-image: none; border-color: #3a3a38; color: var(--blanc); }
.apercu-achevement .bloc.carte .sur, .apercu-achevement .bloc.carte .meta, .apercu-achevement .bloc.grille .sur, .apercu-achevement .bloc.grille .meta { color: var(--blanc-3); }
.apercu-achevement .bloc.carte p.role, .apercu-achevement .bloc.grille p.role { color: var(--blanc-2); background: none; }
.apercu-achevement .bloc.grille h4 { background: none; }
.apercu-achevement .bloc.nacre { color: var(--encre); }
.apercu-achevement .bloc.sombre { border-color: #3a3a38; }
.lien-metamorphose { margin-top: var(--espace-6); display: flex; justify-content: center; }
.lien-metamorphose .bouton { background: var(--blanc); color: var(--encre); border-color: var(--blanc); }

/* ---------- les modules vivants (js/modules.js) : la Charte en petit, champs et calendrier du design system ---------- */
.bloc.module { padding: 0; overflow: hidden; }
.bloc.module .poignee { inset: 0 0 auto 0; height: 64px; }
.bloc.module > .module { pointer-events: none; display: flex; flex-direction: column; min-height: 0; height: 100%; }
.tete-module { padding: var(--espace-3) var(--espace-3) var(--espace-2); pointer-events: none; display: grid; gap: 2px; }
.tete-module h4 { margin: 0; }
.corps-module { pointer-events: auto; flex: 1; min-height: 0; overflow: auto; padding: 0 var(--espace-3) var(--espace-3); display: grid; align-content: start; gap: var(--espace-2); }
.corps-module .champ { height: 40px; font-size: 14px; padding: 0 10px; border-radius: var(--rayon-sm); min-width: 0; }
.corps-module .bouton { height: 40px; padding: 0 14px; font-size: 14px; border-radius: var(--rayon-sm); justify-content: center; }
.corps-module .opt { height: 32px; min-width: 0; padding: 0 10px; font-size: 13px; }
.form-mod { display: grid; gap: 6px; margin-top: 4px; }
.ligne-mod { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.liste-mod { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.liste-mod li { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 4px 4px 10px; border-radius: var(--rayon-sm); background: var(--doux); font-size: 14px; }
.liste-mod li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.liste-mod time { flex: none; font-size: 12px; font-weight: 600; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.liste-mod b { font-variant-numeric: tabular-nums; font-size: 13px; }
.liste-mod .auto { background: var(--carte); box-shadow: inset 0 0 0 1px var(--trait); }
.liste-mod small { font-size: 12px; color: var(--encre-3); }
.timeline-mod li { flex-wrap: wrap; }
.suppr { flex: none; width: 40px; height: 32px; border: 0; border-radius: var(--rayon-sm); background: transparent; color: var(--encre-3); font: inherit; font-size: 18px; cursor: pointer; }
.suppr:hover { background: var(--papier); color: var(--erreur); }
.etiquette-mod { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border-radius: var(--rayon-xs); background: var(--info-remplie); color: var(--encre); }
.note-mod, .vide-mod { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--encre-2); }
.vide-mod { color: var(--encre-3); }
.flux { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: var(--rayon-pilule); font-size: 11px; font-weight: 600; color: var(--encre); background: linear-gradient(90deg, var(--nacre-ciel), var(--nacre-menthe), var(--nacre-rose), var(--nacre-lilas)); }
.cal-mod { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal-mod .cal-jsem { font-size: 11px; }
.cal-mod .cal-j { height: 30px; font-size: 13px; border-radius: 8px; }
.cal-mod .cal-j.libre { box-shadow: none; }
.cal-mod .cal-j.auj { box-shadow: inset 0 -3px 0 var(--orbe-ecoute); }
.corps-module .cal-tete { justify-content: space-between; } .corps-module .cal-tete b { min-width: 0; font-size: 15px; }
.corps-module .cal-legende { font-size: 12px; gap: 10px; } .corps-module .cal-legende i { width: 12px; height: 12px; }
.table-mod { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.table-mod th, .table-mod td { padding: 6px 4px; text-align: left; border-bottom: 1px solid var(--trait); }
.table-mod td:last-child, .table-mod th:last-child { text-align: right; white-space: nowrap; }
.table-mod thead th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-3); }
.table-mod td small { display: block; font-size: 11.5px; color: var(--encre-3); }
.table-mod tfoot th, .table-mod tfoot td { border-bottom: 0; font-size: 16px; font-weight: 700; }
.compteur-mod { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .compteur-mod b { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .compteur-mod span { font-size: 13px; color: var(--encre-2); }
.jauge-mod { height: 10px; border-radius: var(--rayon-pilule); background: var(--papier); overflow: hidden; }
.jauge-mod span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--orbe-lecture-1), var(--orbe-lecture-2), var(--libre), var(--orbe-grand-1)); }
.rep-oui { background: var(--encre); color: var(--blanc); border-color: var(--encre); }
.rep-non { color: var(--prise); text-decoration: line-through; }
.pastille-famille.arc { background: conic-gradient(var(--orbe-lecture-1), var(--orbe-lecture-2), var(--libre), var(--orbe-grand-1), var(--orbe-grand-2), var(--nacre-rose), var(--orbe-ecoute), var(--orbe-lecture-1)); }
.fragment.module-frag small { font-weight: 500; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- la lumière : un arc-en-ciel fait le tour des blocs reliés, et court sur le fil qui les joint ---------- */
@property --tour { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.bloc.relie { border-color: transparent; }
.bloc.relie::before { content: ''; position: absolute; inset: 0; z-index: 4; border-radius: inherit; padding: 2.5px; pointer-events: none;
  background: conic-gradient(from var(--tour), var(--orbe-lecture-1), var(--orbe-lecture-2), var(--libre), var(--orbe-grand-1), var(--orbe-grand-2), var(--nacre-rose), var(--orbe-ecoute), var(--orbe-lecture-1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: tour-arc 4s linear infinite; }
.bloc.relie { box-shadow: 0 0 0 1px rgba(164,107,255,.12), 0 10px 40px -8px rgba(79,123,255,.35); }
@keyframes tour-arc { to { --tour: 360deg; } }
.fils { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; overflow: visible; }
.fil { fill: none; stroke: url(#arc-fil); stroke-width: 2; stroke-opacity: .45; stroke-dasharray: 2 6; stroke-linecap: round; }
.fil-lumiere { fill: none; stroke: url(#arc-fil); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 36 900; filter: drop-shadow(0 0 6px rgba(164,107,255,.7)); animation: court 2.6s linear infinite; }
@keyframes court { from { stroke-dashoffset: 936; } to { stroke-dashoffset: 0; } }
.bloc.a-relier { cursor: copy; outline: 2px dashed var(--orbe-ecoute); outline-offset: 3px; }
.arc-btn { background: linear-gradient(var(--carte), var(--carte)) padding-box, conic-gradient(var(--orbe-lecture-1), var(--orbe-lecture-2), var(--libre), var(--orbe-grand-1), var(--nacre-rose), var(--orbe-ecoute), var(--orbe-lecture-1)) border-box !important; border: 2px solid transparent !important; }
.barre-aide { margin: 0 6px; font-size: 14px; color: var(--encre-2); }

/* ---------- la fusion : un seul bloc, les parties côte à côte, une couture de lumière entre elles ---------- */
.bloc.fusion { padding: 0; }
.bloc.fusion .poignee { inset: 0 0 auto 0; height: 64px; }
.fusion-panes { display: flex; height: 100%; min-height: 0; pointer-events: none; }
.fusion-panes .pane { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: var(--espace-3); overflow: hidden; }
.fusion-panes .pane.module { padding: 0; }
.fusion-panes .pane > .module { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.fusion-panes .pane.sombre { background: var(--encre); color: var(--blanc); }
.fusion-panes .pane > *:not(.module):not(img) { pointer-events: none; }
.fusion-panes .pane > img.fond-bloc { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.fusion-panes .pane.photo, .fusion-panes .pane.visuel { color: var(--blanc); }
.fusion-panes .pane.photo > *:not(img), .fusion-panes .pane.visuel > *:not(img) { position: relative; z-index: 1; }
.couture { flex: none; width: 2px; background: linear-gradient(var(--orbe-lecture-1), var(--libre), var(--orbe-grand-1), var(--nacre-rose), var(--orbe-ecoute)); background-size: 100% 300%; animation: couture 3s linear infinite; }
@keyframes couture { from { background-position: 0 0; } to { background-position: 0 300%; } }

/* ---------- les réglages de l’image dans la barre ---------- */
.reglages-image { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 14px; padding: 8px 6px 4px; border-top: 1px solid var(--trait); }
.reglages-image label { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 8px; font-size: 13px; font-weight: 600; }
.reglages-image label span { color: var(--encre-2); }
.reglages-image output { justify-self: end; font-variant-numeric: tabular-nums; }
.reglages-image input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--encre); min-height: 24px; }
.reglages-image select.champ { grid-column: 1 / -1; height: 40px; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .bloc.relie::before, .fil-lumiere, .couture { animation: none; } }

/* ---------- les recettes, les couches, le plan B, la musique, la galerie, les missions, l’impression ---------- */
.select-recettes { width: auto; height: 44px; font-size: 15px; max-width: 260px; }
.importer-recette { cursor: pointer; }
.couches-mod, .mode-mod { display: flex; flex-wrap: wrap; gap: 4px; }
.couches-mod .opt[aria-pressed="true"], .mode-mod .opt[aria-pressed="true"] { background: var(--encre); color: var(--blanc); border-color: var(--encre); }
.timeline-mod li { border-left: 3px solid var(--trait-2); }
.timeline-mod li.couche-invites { border-left-color: var(--nacre-rose); } .timeline-mod li.couche-budget { border-left-color: var(--orbe-grand-1); } .timeline-mod li.couche-musique { border-left-color: var(--orbe-ecoute); }
.plan-b { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--encre-2); }
.plan-b b { font-weight: 700; }
.titre-piece { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-3); }
.creneaux-mod { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.creneau { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); }
.galerie-mod { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.galerie-mod li { position: relative; aspect-ratio: 1; border-radius: var(--rayon-sm); overflow: hidden; }
.galerie-mod img { width: 100%; height: 100%; object-fit: cover; }
.galerie-mod .suppr { position: absolute; top: 2px; right: 2px; background: rgba(255,255,255,.85); }
.depot-mod { cursor: pointer; }
.liste-mod li.faite span { text-decoration: line-through; color: var(--encre-3); }
.liste-mod input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--encre); flex: none; }
@media print {
  html.impression body * { visibility: hidden !important; }
  html.impression .module.a-imprimer, html.impression .module.a-imprimer * { visibility: visible !important; }
  html.impression .module.a-imprimer { position: fixed; inset: 0; padding: 24mm; background: #fff; color: #000; }
  html.impression .module.a-imprimer form, html.impression .module.a-imprimer .mode-mod, html.impression .module.a-imprimer .suppr { display: none !important; }
}

/* ---------- Le + : la demande lue par le moteur, traduite en fragments (js/traducteur.js) ---------- */
.plus-meta > .chapeau { margin-inline: auto; }
.plus-saisie, .plus-meta > .resume, .plus-propositions, .plus-meta > .actions, .plus-meta > .note-source { max-width: 820px; margin-inline: auto; text-align: left; }
.plus-saisie { display: grid; gap: var(--espace-3); margin-top: var(--espace-6); }
.plus-meta .actions { display: flex; flex-wrap: wrap; gap: var(--espace-3); align-items: center; }
.plus-meta > .actions { margin-top: var(--espace-5); }
.plus-meta > .resume { margin-top: var(--espace-6); font-size: 17px; font-weight: 600; }
.plus-propositions { list-style: none; padding: 0; display: grid; gap: var(--espace-4); margin-top: var(--espace-4); }
.plus-etape { padding: var(--espace-5); border-radius: var(--rayon-carte); background: var(--carte); border: 1px solid var(--trait); }
.plus-etape .surtitre { margin: 0; text-transform: none; }
.plus-phrase { margin: 6px 0 var(--espace-3); font-size: 20px; font-weight: 600; line-height: 1.3; }
.plus-etape .non-dit { color: var(--encre-3); margin: var(--espace-2) 0 0; }
.plus-etape .manque { margin-top: var(--espace-4); padding: var(--espace-3) var(--espace-4); border-radius: var(--rayon-md); background: var(--fond); border: 1px solid var(--trait); }
.plus-etape .manque p { margin: 0; }
.plus-blocs { border: 0; padding: 0; margin: var(--espace-4) 0 0; display: grid; gap: var(--espace-2); }
.plus-blocs legend { padding: 0; margin-bottom: var(--espace-2); font-weight: 600; }
.plus-choix { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; border-radius: var(--rayon-md); border: 1px solid var(--trait-2); cursor: pointer; }
.plus-choix input { width: 20px; height: 20px; flex: none; accent-color: var(--encre); }
.plus-choix span { display: grid; }
.plus-choix small { color: var(--encre-3); font-size: 13px; }
.plus-choix:focus-within { outline: 2px solid var(--encre); outline-offset: 2px; }
.plus-deja { margin: 0; color: var(--encre-3); font-size: 14px; }
.bloc .a-completer { order: -1; align-self: flex-start; position: relative; z-index: 1; flex: none; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--fond); color: var(--encre); border: 1px solid var(--trait-2); pointer-events: none; }
.fiche-demandes { margin-top: var(--espace-5); padding-top: var(--espace-4); border-top: 1px solid var(--trait); }
.fiche-demandes .opt { margin-top: var(--espace-3); }
.bloc.module .a-completer { margin: 10px 0 -4px 12px; }

/* Publier : la version publique d’une composition, préparée ici, ajoutée au dépôt par une personne */
.publier-meta > .publier-resultat { max-width: 820px; margin: var(--espace-5) auto 0; text-align: left; display: grid; gap: var(--espace-4); }
.publier-resultat code { overflow-wrap: anywhere; }
.publier-apercu { margin: var(--espace-3) 0 0; max-height: 360px; overflow: auto; padding: var(--espace-4); border-radius: var(--rayon-md); background: var(--fond); border: 1px solid var(--trait); font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.publier-resultat summary { cursor: pointer; font-weight: 600; min-height: 40px; display: flex; align-items: center; }

/* Une création publiée, en lecture seule (creation.html) */
.creation-meta > .creation-etat { max-width: 820px; margin: var(--espace-5) auto 0; }
.creation-zone { margin-top: var(--espace-6); }
.creation-grille .bloc { cursor: default; }
.creation-pied { max-width: 820px; margin: var(--espace-7) auto 0; text-align: left; display: grid; gap: var(--espace-4); }
.creation-pied code { overflow-wrap: anywhere; }
.creation-grille { text-align: left; }
.creation-pied code { font-size: 14px; }