/* 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}}
/* n 2147 lot A (D-T-153) - « Plus d'options » : la creation complete (le pas a pas),
   ouverte depuis Magic. Une tuile discrete sous le bouton principal, pas un second appel. */
.magic-plus-options{margin:2px 0 0}
.magic-plus-options-bouton{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:1px dashed var(--line);border-radius:10px;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.magic-plus-options-bouton:hover,.magic-plus-options-bouton:focus-visible{border-style:solid;border-color:var(--accent)}
.magic-plus-options-bouton > span{display:grid;gap:2px;flex:1;min-width:0}
.magic-plus-options-bouton strong{font-size:14px}
.magic-plus-options-bouton small{color:var(--muted);font-size:12px;line-height:1.4}
.magic-plus-options-bouton > i,.magic-plus-options-bouton > svg{flex:none;width:18px;height:18px;color:var(--accent)}
/* Les comptes connectes du panneau de droite d'une chanson : une colonne, la largeur du panneau. */
.version-workspace-comptes-connectes{display:grid;gap:8px;margin-top:6px;padding-top:10px;border-top:1px solid var(--line)}
.version-workspace-comptes-titre{margin:0;font:700 13px Manrope;color:var(--muted)}
.version-workspace-comptes-connectes .connection-list{display:grid;grid-template-columns:1fr!important;gap:8px}
/* n 2181 (D-T-153) - dans le panneau, un bouton (libelle + logos) ; la liste vit dans une fenetre. */
.version-workspace-comptes-bouton{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin-top:6px;min-height:42px;padding:8px 14px;border-radius:999px}
.version-workspace-comptes-libelle{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.version-workspace-comptes-logos{display:inline-flex;align-items:center;gap:4px;flex:none}
.version-workspace-comptes-logos:empty{display:none}
.version-workspace-comptes-logos .platform-symbol{display:inline-grid;place-items:center;width:20px;height:20px}
.version-workspace-comptes-logos .platform-symbol img,.version-workspace-comptes-logos .platform-symbol svg{width:18px;height:18px}
.comptes-connectes-dialog{width:min(520px,calc(100vw - 28px))}
.comptes-connectes-dialog .profile-card{text-align:left;max-height:calc(100vh - 60px);overflow:auto}
.comptes-connectes-dialog .version-workspace-comptes-connectes{margin-top:12px;padding-top:0;border-top:0}
.comptes-connectes-dialog .regen-actions{position:sticky;z-index:3;bottom:-30px;display:flex;justify-content:flex-end;margin:16px -30px -30px;padding:14px 30px;background:#111318;border-top:1px solid var(--line)}
/* n 2147 lot B (D-T-142) - Paysage, vertical ou les deux : trois pastilles, la forme dessinee
   a cote du mot. Memes reglages dans Magic et dans Create (peindreChoixFormats). */
.choix-formats{margin:6px 0;padding:0;border:0;min-width:0}
.choix-formats legend{padding:0;margin-bottom:8px;font-weight:700}
.choix-formats-pastilles{display:flex;flex-wrap:wrap;gap:8px}
.choix-format{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);font-size:14px;font-weight:700;cursor:pointer}
.choix-format input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.choix-format:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--bg))}
.choix-format:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.choix-format-forme{display:inline-block;flex:none;border:2px solid currentColor;border-radius:3px;opacity:.75}
.choix-format-paysage .choix-format-forme{width:22px;height:13px}
.choix-format-vertical .choix-format-forme{width:12px;height:20px}
.choix-format-both .choix-format-forme{width:22px;height:13px;margin-right:8px;box-shadow:8px 4px 0 -2px var(--bg),8px 4px 0 0 currentColor}
/* n 2147 lot C - LA ZONE D'AJOUT DE PHOTOS. Elle remplace le bouton natif gris
   (« Choose Files / No file chosen »). Le champ natif reste dans la zone, invisible
   mais vivant : un clic ou un toucher sur la zone l'ouvre, et le glisser-deposer
   l'alimente. Toutes les couleurs viennent des variables du theme de l'edition. */
.magic-photos-bloc{display:grid;gap:8px}
.magic-photos-titre{font-weight:700}
.magic-photos-zone{position:relative;display:flex;align-items:center;gap:14px;min-height:92px;padding:16px 18px;border:1.5px dashed color-mix(in srgb,var(--accent) 55%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--accent) 6%,var(--bg));color:var(--ink);cursor:pointer;transition:border-color .15s,background-color .15s}
.magic-photos-zone:hover,.magic-photos-zone.survol,.magic-photos-zone:focus-within{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--bg))}
.magic-photos-zone.survol{border-style:solid}
.magic-photos-zone:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.magic-photos-entree{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:0}
.magic-photos-icone{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:12px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);pointer-events:none}
.magic-photos-icone svg{width:24px;height:24px}
.magic-photos-appel{display:grid;gap:3px;flex:1;min-width:0;pointer-events:none}
.magic-photos-appel strong{font-size:15px}
.magic-photos-appel small{color:var(--muted);font-size:13px}
.magic-photos-doigt{display:none}
@media (hover:none) and (pointer:coarse){.magic-photos-souris{display:none}.magic-photos-doigt{display:inline}}
.magic-photos-compteur{flex:none;padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--muted);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;pointer-events:none}
.magic-photos-zone.a-des-photos .magic-photos-compteur{border-color:var(--accent);color:var(--ink)}
.magic-photos-compteur.error{border-color:#f0a39e!important;color:#f0a39e!important}
/* Le compteur de la zone dit deja « 3 / 6 » : la ligne d'etat ne se montre que pour une erreur,
   et reste lue par les lecteurs d'ecran (role="status"). */
.magic-photos-status:not(.error){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.magic-photos-vignettes{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}
.magic-photos-vignettes:empty{display:none!important}
.magic-photos-vignettes .library-chip{display:block}
.magic-photos-vignettes .library-chip img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:var(--panel)}
.magic-photos-vignettes .library-chip button{top:6px;right:6px;width:24px;height:24px;border:0;border-radius:999px;background:rgba(0,0,0,.65);color:#fff;font-size:16px;line-height:24px;cursor:pointer}
.magic-photos-vignettes .library-chip button:hover,.magic-photos-vignettes .library-chip button:focus-visible{background:var(--accent);color:var(--bg)}
@media(max-width:600px){.magic-photos-zone{min-height:84px;padding:14px}.magic-photos-icone{width:42px;height:42px}.magic-photos-vignettes{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Dans le panneau etroit, le composant des Parametres se resserre : meme contenu, cartes compactes. */
.version-workspace-comptes-connectes .connection{min-height:0!important;min-width:0;gap:8px;padding:12px!important;box-shadow:none!important}
.version-workspace-comptes-connectes .connection-top{flex-wrap:wrap;gap:6px}
.version-workspace-comptes-connectes .connection h3{font-size:15px!important}
.version-workspace-comptes-connectes .connection p{font-size:13px}
.version-workspace-comptes-connectes .connection small:empty,.version-workspace-comptes-connectes .connection p + small{display:none}
.version-workspace-comptes-connectes .connection-actions button{min-height:36px;font-size:13px}
/* n 2162 - la pastille d'ambiance d'un evenement (Halloween...) : une pastille ronde a cocher, aux couleurs du theme. */
.magic-ambiance{margin:6px 0}
.magic-ambiance-choices{display:flex;flex-wrap:wrap;gap:8px}
.magic-ambiance-pastille{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);font-size:15px;font-weight:700;cursor:pointer}
.magic-ambiance-pastille input{accent-color:var(--accent);margin:0}
.magic-ambiance-pastille img{width:20px;height:20px;flex:none}
.magic-ambiance-pastille:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,var(--bg))}
.magic-ambiance-pastille:focus-within{outline:2px solid var(--accent);outline-offset:2px}
/* n 2181 - LES COMPTES CONNECTES DU PANNEAU DE DROITE (n 2147 lot A) ONT LA MISE EN FORME DES PARAMETRES.
   Ces regles sont celles de styles.css sous #view-connections, recopiees pour le panneau : la vue
   Connexions est protegee par les revues TikTok et Meta ouvertes (D-T-135, config/revues-en-cours.json),
   donc styles.css ne peut pas etre touche. A la fermeture des revues, les fusionner en :is(...) la-bas.
   test/n2181-comptes-panneau-style.test.ts refuse une regle presente d'un seul cote. */
.version-workspace-comptes-connectes .connection-accounts{position:relative;z-index:1;margin:2px 0 0!important;gap:8px!important;}
.version-workspace-comptes-connectes .connection-account{
  display:grid!important;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:7px!important;width:100%;min-width:0;
  padding:9px;border:1px solid rgba(255,255,255,.075);border-radius:16px;background:rgba(0,0,0,.22);font-size:13px!important;
}
.version-workspace-comptes-connectes .connection-account.is-primary{border-color:rgba(216,168,78,.32);background:linear-gradient(135deg,rgba(216,168,78,.12),rgba(255,255,255,.025));}
.version-workspace-comptes-connectes .connection-account-copy{min-width:0;overflow:hidden;display:grid!important;gap:2px;}
.version-workspace-comptes-connectes .connection-account-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none!important;color:#fff4dc;font-weight:800!important;}
.version-workspace-comptes-connectes .connection-account-email{display:block;min-width:0;overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere;color:#f2d287!important;font-size:12.5px!important;font-weight:800!important;line-height:1.35!important;}
.version-workspace-comptes-connectes .connection-account-badge{white-space:nowrap;font-size:9px!important;font-weight:900;letter-spacing:.13em;color:#171107;background:linear-gradient(135deg,#f5d88b,#d8a84e);border:0!important;padding:5px 7px!important;opacity:1!important;box-shadow:0 8px 18px rgba(216,168,78,.18);}
.version-workspace-comptes-connectes .connection-account-action{margin:0!important;min-height:30px!important;padding:7px 9px!important;border-radius:999px!important;font-size:11px!important;font-weight:850!important;line-height:1!important;white-space:nowrap;}
.version-workspace-comptes-connectes .connection-account-action:first-of-type{border-color:rgba(216,168,78,.26)!important;color:#f2d287!important;background:rgba(216,168,78,.08)!important;}
.version-workspace-comptes-connectes .connection-account-action:last-of-type{border-color:rgba(255,255,255,.1)!important;color:rgba(244,241,232,.72)!important;background:rgba(255,255,255,.035)!important;}
.version-workspace-comptes-connectes .connection-account-edit{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;border-color:rgba(216,168,78,.34)!important;color:#efd591!important;background:rgba(216,168,78,.08)!important;}
.version-workspace-comptes-connectes .connection-account-edit svg{width:13px!important;height:13px!important;}
.version-workspace-comptes-connectes .connection-account-remove{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;border-color:rgba(255,104,104,.34)!important;color:#ffb7b7!important;background:rgba(255,78,78,.08)!important;}
.version-workspace-comptes-connectes .connection-account-remove svg{width:13px!important;height:13px!important;}
.version-workspace-comptes-connectes .connection-actions{position:relative;z-index:1;margin-top:auto!important;display:grid!important;grid-template-columns:1fr;gap:8px!important;}
.version-workspace-comptes-connectes .connection-actions button{width:100%;min-width:0;min-height:40px!important;border-radius:999px!important;font-weight:850!important;letter-spacing:-.01em;}
.version-workspace-comptes-connectes .connection-actions .primary,.version-workspace-comptes-connectes .connection-primary{
  border:0!important;color:#160f05!important;background:linear-gradient(135deg,#fff0b6,#d8a84e 58%,#9f722b)!important;
  box-shadow:0 14px 30px rgba(216,168,78,.24)!important;
}
.version-workspace-comptes-connectes .connection-actions .secondary{border-color:rgba(216,168,78,.22)!important;background:rgba(255,255,255,.035)!important;color:#f2d287!important;}
.version-workspace-comptes-connectes .connection-actions .connection-locked{border-color:rgba(216,168,78,.38)!important;background:linear-gradient(135deg,rgba(216,168,78,.16),rgba(0,0,0,.28))!important;color:#ffe4a3!important;box-shadow:inset 0 0 0 1px rgba(255,227,161,.08)!important;}
.version-workspace-comptes-connectes .connection-actions .secondary:last-child:not(:only-child){color:rgba(244,241,232,.76)!important;border-color:rgba(255,255,255,.1)!important;background:rgba(0,0,0,.2)!important;}
.version-workspace-comptes-connectes .connection button:hover,.version-workspace-comptes-connectes .connection button:focus-visible{transform:translateY(-1px);border-color:rgba(216,168,78,.48)!important;box-shadow:0 14px 28px rgba(0,0,0,.24),0 0 0 1px rgba(216,168,78,.12)!important;}

/* Le panneau est une colonne etroite quelle que soit la largeur de l'ecran : disposition telephone. */
.version-workspace-comptes-connectes .connection-account{grid-template-columns:minmax(0,1fr) auto!important;gap:7px 6px!important;}
.version-workspace-comptes-connectes .connection-account-copy{grid-column:1/-1;}
.version-workspace-comptes-connectes .connection-account-badge{grid-column:2/3;justify-self:end;}
.version-workspace-comptes-connectes .connection-account-action:first-of-type{grid-column:1/2;justify-self:start;}
.version-workspace-comptes-connectes .connection-account-action:last-of-type{grid-column:2/3;justify-self:end;}
/* n 2400 (10/10) : en Gold, les boutons « Video type » et les lignes des reseaux
   gardaient le fond sombre ecrit en dur ci-dessus (#16181d, #211d16) sous l encre
   sombre de Gold : texte noir sur noir, contraste 1,04:1 mesure dans Chrome. Ils
   prennent les surfaces claires de Gold ; Noir ne change pas. */
:root[data-theme="gold"] .magic-video-choices label,
:root[data-theme="gold"] .magic-platform{background:var(--panel)!important;color:var(--ink)!important}
:root[data-theme="gold"] .magic-video-choices label:has(input:checked),
:root[data-theme="gold"] .magic-platform:has(input:checked){background:color-mix(in srgb,var(--accent) 16%,var(--panel))!important}
:root[data-theme="gold"] .magic-platform span{color:var(--ink)!important}
:root[data-theme="gold"] .greeting-title p{color:var(--muted)!important}