/* tache-0003 - Vue Magic : formulaire a gauche, reseaux prevus a droite. */
.magic-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,320px);gap:18px;align-items:start}
.magic-main{display:grid;gap:12px}
.magic-title{margin:0;font:700 24px Manrope}
.magic-subtitle{margin:0;color:var(--muted)}
.magic-hint{color:var(--muted);font-size:12px;line-height:1.45}
/* n 2094 - Le choix des images de reference tient sur une ligne discrete :
   un lien et l'etat courant, au ton des autres indications de l'ecran. */
.magic-jeu-ligne{margin:0;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;font-size:12px;color:var(--muted)}
.magic-jeu-bouton{padding:0;border:0;background:none;color:var(--accent);font:inherit;text-decoration:underline;cursor:pointer}
.magic-jeu-etat{color:var(--muted)}
/* La boite de choix : un jeu entier, ou des photos piochees dans plusieurs. */
.jeux-selection-jeu{display:grid;gap:8px;padding:10px 0;border-top:1px solid var(--line)}
.jeux-selection-tete{display:flex;align-items:center;gap:8px;font-weight:700}
.jeux-selection-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}
.jeux-selection-photo{position:relative;display:block;cursor:pointer}
.jeux-selection-photo img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;border:2px solid transparent;display:block}
.jeux-selection-photo input{position:absolute;top:4px;left:4px;margin:0}
.jeux-selection-photo input:checked + img{border-color:var(--accent)}
.jeux-selection-compteur{font-size:12px;color:var(--muted)}
.magic-photos-status{margin:0;font-size:12px;color:var(--muted)}
.magic-photos-status.error{color:#f0a39e!important}
.magic-video-type{margin:6px 0}
.magic-video-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.magic-video-choices label{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border:1px solid var(--line);border-radius:8px;background:#16181d;color:var(--ink);font-size:15px;font-weight:700;cursor:pointer}
.magic-video-choices label:has(input:checked){border-color:var(--accent);background:#211d16}
.magic-social{position:sticky;top:18px;display:grid;gap:10px}
.magic-social h3{margin:0;font:700 17px Manrope}
.magic-platforms{display:grid;gap:8px}
/* `.composer-actions span` grise le texte d'accompagnement : le libelle du bouton ne doit pas en heriter. */
.magic-main .composer-actions button span{color:inherit;font-size:inherit}
.magic-platform small{margin-left:auto;color:var(--muted);font-size:11px}
/* n 1368/21-09 - Comptes a publier pour un reseau coche, en parite complete
   avec le modal "Diffuser partout" : une case par compte (plusieurs comptes
   possibles par reseau), visible, pas un reglage cache.
   n 1390/20-09 - `.magic-platform` (alias `.platform-option`) est en display:flex,
   pas grid : `grid-column:1/-1` n'y fait rien. Sans capot sur la ligne, la
   checklist reste flex-item au meme rang que la case/l'icone/le texte et se
   fait ecraser a quelques pixels par le partage de retrecissement (mesure :
   21px de large, nom de compte present dans le DOM mais invisible). Le passage
   a la ligne force (`flex-basis:100%` cote enfant, `flex-wrap:wrap` cote
   parent) est le contournement standard pour un item qui doit prendre toute
   la largeur SOUS une rangee flex, pas dedans.

   n 1390/20-09 (anomalie 57) - `flex:0 0 100%` donnait une base de 244px au
   conteneur, soit toute la largeur utile de la case reseau, SANS deduire sa
   propre marge gauche de 33px : la checklist sortait de 20px hors de la carte
   "Diffusion prevue", et `.platform-option{overflow:hidden}` coupait les noms
   longs au lieu de laisser voir le debord. La base flex l emporte sur `width`,
   donc le `calc` pose a cote ne servait a rien : c est la BASE qui doit porter
   le calcul. */
.magic-platform{flex-wrap:wrap}
.magic-platform .magic-account-checklist{flex:0 0 calc(100% - 33px);margin:8px 0 0 33px;width:calc(100% - 33px)}
@media(max-width:900px){.magic-layout{grid-template-columns:1fr}.magic-social{position:static}}