/* La Configuration de la solution (80-cms.js) : la fenêtre à trois colonnes qui configure une solution.
   Réécrite par composant le 2026-10-14 (CDC_CONFIGURATION_SOLUTION_2, M1) ; avant, l'ordre était celui des lots.
   Jetons seulement : les trois états du thème (N20) viennent d'eux ; les seules teintes propres sont celles du code
   (--code-*, 01-tokens). Propriétés logiques (inline-start/end) : l'arabe inverse les colonnes sans rien changer.
   Vit dans la fenêtre plein écran (#dhapp, 46-appwin.css), dont l'hôte est une grille à une rangée en 1fr.

   Sommaire
     1. Jetons du module          5. Le centre : rendu façon navigateur     9. Paramètres de la solution
     2. Fenêtre et colonnes       6. La barre du bas et ses menus          10. Design
     3. Contrôles communs         7. Le dessin des blocs                   11. États vides, transitions, fiche
     4. Le panneau gauche         8. Le panneau droit                      12. Étroit (900, 600, 480 px)       */
@layer modules{

  /* ── 1. Jetons du module ──────────────────────────────────────────────────────────────────────────────────────────
     Deux hauteurs de contrôle seulement (D2) : --cms-h (contrôle courant) et --cms-h-c (compact : panneau droit, barre
     du rendu). L'accent : tel quel (cadres, teintes), en aplat sous une encre blanche, en texte (F2, 01-tokens).
     --radius-md et --shadow-md ne sont PAS des jetons fantômes : m14r les pose dans le rendu (le rayon « doux » de la
     création) ; le repli de l'atelier vaut tant qu'aucun moteur ne les pose. La densité Confort agrandit le tout. */
  .cms{ --cms-h:var(--outils-h);   /* CDC_DA_COMMUNE § 6 (2026-10-24) : 28 px comme toute la DA ; 32 px avant */
     --cms-h-c:28px; --cms-pad:var(--sp-14);
    /* L'accent des apps de la DA commune (22c, par --studio-* de 37b), plus le violet de l'atelier (CDC_DA_COMMUNE, 2026-10-24) :
       le cadre de survol, la ligne choisie et le bouton principal suivent un changement fait dans 22c. */
    --cms-accent:var(--studio-accent); --cms-accent-plein:var(--studio-accent-plein); --cms-accent-texte:var(--studio-accent);
    --cms-ombre-menu:var(--elev-2, var(--shadow)); --cms-dur:var(--dur-1); --cms-dur-l:var(--dur-2);
    --ap-ecart:12px; --ap-bouton-retrait:8px 14px;   /* le dessin peint comme la page publiée (M9), pas à la densité de l'atelier */
    --cms-z-menu:30; --cms-z-barre:20; --cms-z-onglets:19; --cms-z-insertion:15; --cms-z-sous-menu:8; --cms-z-sug:3; --cms-z-fantome-texte:2;
    --cms-z-scene:0; --cms-z-scene-barre:1; --cms-z-ecran-choix:1; --cms-z-ecran-plus:2; --cms-z-cadre-bord:2; --cms-z-cadre-coin:3; }   /* piles de 49-cms-inspecteur.css, en jetons le 2026-10-25 : les lots du 17-10 les avaient écrites en dur */
  .cms[data-densite="confort"]{ --cms-h:36px; --cms-h-c:32px; --cms-pad:var(--sp-18); }

  /* ── 2. Fenêtre et colonnes ───────────────────────────────────────────────────────────────────────────────────── */
  .cms{ display:grid; grid-template-columns:260px minmax(0,1fr) 300px; height:100%; min-height:0; background:var(--bg); color:var(--txt); }
  .cms-gauche, .cms-droite{ overflow:auto; min-height:0; background:var(--card); padding:var(--cms-pad); } .cms-gauche{ border-inline-end:1px solid var(--line); }
  .cms-droite{ border-inline-start:1px solid var(--line); }
  .cms-centre{ overflow:auto; min-height:0; padding:var(--sp-20); display:flex; flex-direction:column; gap:var(--sp-12); } .cms-centre > *{ flex-shrink:0; }
  .cms-attente{ display:grid; place-items:center; height:100%; grid-column:1 / -1; }
  /* Les onglets de la barre de la fenêtre : le rail de l'en-tête de l'app (.view-toggle, 03-layout.css), 34 et 26 px,
     ceux de l'en-tête, hors des deux hauteurs du module (la barre est celle de l'app). */
  .dhapp-body.cms-tete-hote{ grid-template-rows:auto minmax(0,1fr); } .cms-tete .cms-qualite{ height:28px; gap:var(--sp-8); margin-inline-start:var(--sp-4); padding:0 var(--sp-12) 0 var(--sp-10); border:0; border-radius:var(--radius-sm); background:var(--chrome-bg); color:var(--chrome-ink); font-size:var(--fs-sm); font-weight:var(--fw-medium); } .cms-tete .cms-qualite:not(.ok){ background:color-mix(in srgb, var(--warn) 16%, var(--card)); color:var(--txt); } .cms-tete .cms-qualite:hover{ background:color-mix(in srgb, var(--chrome-ink) 12%, var(--chrome-bg)); } .cms-tete .cms-qualite:not(.ok):hover{ background:color-mix(in srgb, var(--warn) 26%, var(--card)); }   /* 2026-10-17 (le proprio : « revoir le design de cette pastille jaune ») : le dessin du témoin voisin */ .cms-tete .cms-tete-etat{ display:flex; flex-wrap:nowrap; align-items:center; gap:var(--sp-4); } @media (max-width:640px){ .cms-tete{ flex-wrap:wrap; row-gap:var(--sp-4); } .cms-tete .bandeau-menu{ padding:0 var(--sp-6); } }   /* 2026-10-17 : le bandeau à menus (80-cms-tete.js), DA du Tableur */
  .cms-onglets{ display:inline-flex; align-items:center; gap:var(--sp-4); height:34px; box-sizing:border-box; padding:var(--sp-4);
    border-radius:calc(var(--radius-sm) + var(--sp-2)); background:var(--chrome-bg); }
  .cms-onglet{ display:inline-flex; align-items:center; gap:var(--sp-6); height:26px; padding:0 var(--sp-10); border:0; border-radius:calc(var(--radius-sm) - var(--sp-2));
    background:transparent; color:var(--chrome-ink); font-size:var(--fs-sm); font-weight:var(--fw-label); cursor:pointer; white-space:nowrap; }
  .cms-onglet:hover{ background:color-mix(in srgb, var(--chrome-ink) 9%, transparent); }
  .cms-onglet.on, .cms-onglet.on:hover{ background:var(--on-solid); color:var(--accent-h); box-shadow:var(--shadow-sm); }
  .cms-onglet svg.ic{ width:15px; height:15px; opacity:.8; color:currentColor; } .cms-onglet.on svg.ic{ opacity:1; }
  .cms-barre-repli{ grid-column:1 / -1; padding:var(--sp-8) var(--sp-14); border-bottom:1px solid var(--line); background:var(--card); }   /* hors fenêtre, les onglets en tête */

  /* ── 3. Contrôles communs ─────────────────────────────────────────────────────────────────────────────────────────
     Champs, bascule (le seul contrôle segmenté, D3), cartes, menus, étiquettes. Le sélecteur générique d'un champ texte
     passe par :where() : sa spécificité reste basse, un champ particulier le règle sans rustine d'identifiant. */
  .cms-champ{ display:flex; flex-direction:column; gap:var(--sp-4); margin-bottom:var(--sp-12); } .cms-champ > span{ font-size:var(--fs-xs); font-weight:var(--fw-strong); color:var(--mut); }
  .cms-champ small{ font-size:var(--fs-xs); color:var(--mut); }
  .cms-champ input:where(:not([type="checkbox"]):not([type="color"]):not([type="range"])), .cms-champ select, .cms-design-champ select{
    width:100%; height:var(--cms-h); box-sizing:border-box; padding:0 var(--sp-8); border:1px solid var(--line); border-radius:var(--radius-sm);
    background:var(--bg); color:var(--txt); font:inherit; font-size:var(--fs-sm); }
  .cms-droite :is(.cms-champ input:where(:not([type="checkbox"]):not([type="color"]):not([type="range"])), .cms-champ select, .cms-design-champ select){ height:var(--cms-h-c); }
  .cms-champ textarea, .cms-bloc-reglages textarea{ width:100%; box-sizing:border-box; padding:var(--sp-6) var(--sp-8); border:1px solid var(--line); border-radius:var(--radius-sm);
    background:var(--bg); color:var(--txt); font:inherit; font-size:var(--fs-sm); resize:vertical; }
  .cms-champ input:where(:not([type="checkbox"]):not([type="color"]):not([type="range"])):focus, .cms-champ textarea:focus, .cms-moteurs-barre input:focus{
    outline:2px solid var(--focus-anneau); outline-offset:1px; border-color:var(--cms-accent-texte); }
  .cms-champ input[readonly]{ color:var(--mut); } .cms-champ .cms-coche input[type="checkbox"]{ width:16px; height:16px; padding:0; }
  .cms-champ-prefixe{ display:flex; align-items:center; gap:var(--sp-4); } .cms-champ-prefixe > span{ color:var(--mut); font-family:var(--font-mono); }
  .cms-champ .cms-design-refus{ color:var(--err); font-weight:var(--fw-strong); line-height:var(--lh-normal); }   /* rouge, pas le gris de « small » */
  .cms-d-note{ margin:0; font-size:var(--fs-xs); color:var(--mut); line-height:var(--lh-normal); } .cms-d-note + .cms-champ{ margin-top:var(--sp-12); }
  .cms-coches{ display:flex; flex-direction:column; gap:var(--sp-4); }
  .cms-coche{ display:flex; align-items:center; gap:var(--sp-8); padding:var(--sp-2) 0; font-size:var(--fs-sm); color:var(--txt); cursor:pointer; }
  .cms-coche input{ width:16px; height:16px; margin:0; accent-color:var(--cms-accent); flex:none; }
  .cms-coche > span{ display:inline-flex; align-items:center; gap:var(--sp-6); min-width:0; } .cms-coche svg.ic{ width:14px; height:14px; color:var(--mut2); flex:none; }
  /* La bascule et le contrôle segmenté (.cms-seg, D3) : un rail, des boutons côte à côte, le choisi sur une pastille. */
  :is(.cms-bascule, .cms-seg){ display:inline-flex; align-self:flex-start; gap:var(--sp-2); padding:var(--sp-2); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); }
  :is(.cms-bascule-bt, .cms-seg-bt){ display:grid; place-items:center; min-width:36px; height:var(--cms-h-c); padding:0 var(--sp-8); border:0; border-radius:var(--radius-xs);
    background:transparent; color:var(--mut); font:inherit; font-size:var(--fs-sm); cursor:pointer; }
  :is(.cms-bascule-bt, .cms-seg-bt):hover{ color:var(--txt); background:var(--line2); } :is(.cms-bascule-bt, .cms-seg-bt).on{ background:var(--card); color:var(--cms-accent-texte); box-shadow:var(--shadow-sm); }
  :where(.cms, .cms-onglets) :where(button, a[href], summary, select, [tabindex="0"], [role="tab"]):focus-visible{ outline:2px solid var(--focus-anneau); outline-offset:1px; }   /* M14 : un anneau partout ; une règle propre le précise */
  :is(.cms-bascule-bt, .cms-seg-bt):focus-visible{ outline:2px solid var(--focus-anneau); outline-offset:1px; } .cms-bascule-bt svg.ic{ width:18px; height:18px; }
  /* Les cartes : écrans, livrables, installations, moteurs, sections du Design, mini-aperçu, événements. */
  :is(.cms-ecran, .cms-livrable, .cms-inst, .cms-moteur, .cms-design-sec, .cms-mini, .cms-ev){ box-sizing:border-box; border:1px solid var(--line); border-radius:var(--radius);
    background:var(--card); color:var(--txt); }
  :is(.cms-ecran, .cms-livrable, .cms-moteur):hover{ border-color:var(--mut2); }
  :is(.cms-ecran, .cms-livrable, .cms-moteur).on{ border-color:var(--cms-accent-texte); box-shadow:0 0 0 1px var(--cms-accent-texte) inset; }
  /* Les menus : barre du bas, adresse du rendu, palette ; une même carte, une même ombre. */
  :is(.cms-barre-menu-in, .cms-ap-url-menu, .cms-ap-palette){ box-sizing:border-box; border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
    color:var(--txt); box-shadow:var(--cms-ombre-menu); }
  /* Les étiquettes en capitales, et les titres de section (même casse, à l'encre du texte). */
  :is(.cms-ecran-choix > span, .cms-g-titre, .cms-palette-sous){ font-size:var(--fs-xs); font-weight:var(--fw-strong); color:var(--mut);
    text-transform:uppercase; letter-spacing:var(--ls-wide); }
  .cms-bloc-r-titre{ margin:0 0 var(--sp-8); font-size:var(--fs-xs); font-weight:var(--fw-bold); color:var(--txt); text-transform:uppercase; letter-spacing:var(--ls-wide); }
  .cms-d-sous{ margin:var(--sp-16) 0 var(--sp-6); padding-top:var(--sp-12); border-top:1px solid var(--line); font-size:var(--fs-sm); font-weight:var(--fw-bold); }
  .cms-d-titre{ margin:0 0 var(--sp-12); font-size:var(--fs-sm); font-weight:var(--fw-strong); }
  .cms-d-actes{ display:flex; flex-direction:column; gap:var(--sp-6); margin-top:var(--sp-16); padding-top:var(--sp-12); border-top:1px solid var(--line2); }
  .cms-d-actes .btn{ justify-content:center; } .cms-sep{ margin:var(--sp-20) 0; border:0; border-top:1px solid var(--line); }
  /* F8 : l'échec de lecture des moteurs, dit en tête du centre. */
  .cms-alerte{ display:flex; align-items:center; gap:var(--sp-10); margin:0 0 var(--sp-12); padding:var(--sp-10) var(--sp-12); border:1px solid color-mix(in srgb, var(--err) 45%, var(--line));
    border-radius:var(--radius-sm); background:color-mix(in srgb, var(--err) 8%, var(--card)); color:var(--txt); font-size:var(--fs-sm); }
  .cms-alerte p{ flex:1 1 auto; margin:0; } .cms-alerte svg.ic{ width:16px; height:16px; flex:none; color:var(--err); }

  /* M3 : le message d'une action (6 s, « Annuler »), en bas de la fenêtre ; les versions gardées du plan. */
  .cms{ position:relative; }
  .cms-message{ position:absolute; inset-inline-start:50%; bottom:calc(var(--cms-h) + var(--sp-40)); z-index:var(--cms-z-menu); display:flex; align-items:center; gap:var(--sp-10); max-width:min(520px, calc(100% - 32px));
    padding:var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-14); border-radius:var(--radius); background:var(--txt); color:var(--bg); font-size:var(--fs-sm); box-shadow:var(--cms-ombre-menu);
    transform:translate(-50%, 12px); opacity:0; pointer-events:none; transition:opacity var(--cms-dur-l) ease, transform var(--cms-dur-l) ease; }
  .cms-message.ouvert{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
  .cms-message-bt{ display:inline-flex; align-items:center; gap:var(--sp-6); height:var(--cms-h-c); padding:0 var(--sp-10); border:0; border-radius:var(--radius-sm);
    background:color-mix(in srgb, var(--bg) 16%, transparent); color:var(--bg); font:inherit; font-weight:var(--fw-strong); cursor:pointer; }
  .cms-message-bt:hover{ background:color-mix(in srgb, var(--bg) 26%, transparent); }
  /* M7 : l'aide des raccourcis, la table elle-même rangée par groupe. */
  .cms-aide-fond{ position:absolute; inset:0; z-index:var(--cms-z-menu); display:grid; place-items:center; padding:var(--sp-20); background:color-mix(in srgb, var(--txt) 24%, transparent); }
  .cms-aide{ width:min(720px, 100%); max-height:min(80vh, 100%); overflow:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); box-shadow:var(--cms-ombre-menu); } .cms-aide-tete{ position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; padding:var(--sp-12) var(--sp-16); border-bottom:1px solid var(--line); background:var(--card); } .cms-aide-tete h2{ margin:0; font-size:var(--fs-sm); }
  .cms-aide-corps{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:var(--sp-4) var(--sp-24); padding:var(--sp-12) var(--sp-16); } .cms-aide-corps h3{ margin:var(--sp-8) 0 var(--sp-4); font-size:var(--fs-xs); color:var(--mut); text-transform:uppercase; letter-spacing:var(--ls-wide); } .cms-aide-corps ul{ list-style:none; margin:0; padding:0; }
  .cms-aide-corps li{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-12); min-height:var(--cms-h-c); font-size:var(--fs-sm); border-bottom:1px solid var(--line2); } .cms-touches{ display:inline-flex; align-items:center; gap:var(--sp-2); flex:none; color:var(--mut); font-size:var(--fs-xs); }
  .cms-touches kbd{ min-width:1.6em; padding:0 var(--sp-4); border:1px solid var(--line); border-bottom-width:2px; border-radius:var(--radius-xs); background:var(--bg); color:var(--txt); font:inherit; font-size:var(--fs-xs); text-align:center; }
  .cms-message-bt svg.ic{ width:14px; height:14px; } .cms-histoire{ display:inline-flex; gap:var(--sp-2); margin-inline-start:auto; }
  .cms-versions{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-4); }
  .cms-version{ display:flex; align-items:center; gap:var(--sp-12); min-height:var(--cms-h); padding:0 var(--sp-4) 0 var(--sp-12); border:1px solid var(--line); border-radius:var(--radius-sm);
    background:var(--card); font-size:var(--fs-sm); }
  .cms-version-n{ font-weight:var(--fw-strong); min-width:7em; } .cms-version-quand{ color:var(--mut); }
  .cms-version-taille{ margin-inline-start:auto; color:var(--mut2); font-size:var(--fs-xs); font-variant-numeric:tabular-nums; }

  /* ── 4. Le panneau gauche (M4, D6) ──────────────────────────────────────────────────────────────────────────────
     Il suit l'onglet : Pages puis Calques dans l'Éditeur (des lignes sans cadre, comme un arbre de calques), un sommaire
     dans Paramètres et Design. Le pied (état, Annuler, Rétablir, densité) colle en bas du panneau. Un dépôt se montre par
     un trait d'accent (avant, après) ou un fond teinté (dans un groupe), jamais par une ombre. */
  .cms-gauche{ display:flex; flex-direction:column; padding-bottom:0; overflow-anchor:none; }   /* l'ancrage du navigateur décalait le défilement à chaque rendu (M10) */ .cms-g-sec + .cms-g-sec{ margin-top:var(--sp-14); padding-top:var(--sp-10); border-top:1px solid var(--line2); }
  .cms-g-tete{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6); min-height:var(--cms-h-c); margin-bottom:var(--sp-6); } .cms-g-titre{ margin:0; }
  .cms-g-bt{ display:grid; place-items:center; width:var(--cms-h-c); height:var(--cms-h-c); padding:0; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--mut); cursor:pointer; }
  .cms-g-bt:hover:not(:disabled){ background:var(--line2); color:var(--txt); } .cms-g-bt:disabled{ opacity:.4; cursor:default; } .cms-g-bt svg.ic{ width:16px; height:16px; }
  .cms-ecran-choix{ display:flex; flex-direction:column; gap:var(--sp-4); }
  .cms-vues-vide{ margin:var(--sp-8) 0 0; font-size:var(--fs-xs); color:var(--mut); line-height:var(--lh-normal); } .cms-arbre{ list-style:none; margin:0; padding:0; }
  .cms-g-ligne{ display:flex; align-items:center; gap:var(--sp-2); padding-inline-start:calc(var(--niveau, 0) * var(--sp-12)); }
  .cms-g-pli{ display:grid; place-items:center; flex:none; width:16px; height:16px; padding:0; border:0; border-radius:var(--radius-xs); background:transparent; color:var(--mut2); cursor:pointer; }
  button.cms-g-pli:hover{ background:var(--line); color:var(--txt); } .cms-g-pli svg.ic{ width:12px; height:12px; }
  .cms-vue{ position:relative; flex:1; min-width:0; display:flex; align-items:center; gap:var(--sp-6); min-height:var(--cms-h-c); box-sizing:border-box; padding:0 var(--sp-6); text-align:start;
    border:0; border-radius:var(--radius-sm); background:transparent; color:var(--txt); font-size:var(--fs-sm); cursor:pointer; }
  .cms-vue:hover{ background:var(--line2); } .cms-vue.on{ background:var(--studio-accent-doux); color:var(--txt); }   /* la ligne choisie de la DA commune */
  .cms-vue-num{ flex:none; min-width:1.4em; color:var(--mut2); font-variant-numeric:tabular-nums; } .cms-vue.on .cms-vue-num{ color:var(--mut); }
  .cms-vue-nom{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* Calques : icône du bloc, nom, puis cadenas et œil (au survol, ou toujours quand ils agissent). */
  .cms-blocs{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
  .cms-bloc-ligne{ position:relative; display:flex; align-items:center; gap:var(--sp-4); min-height:var(--cms-h-c); box-sizing:border-box; padding:0 var(--sp-2) 0 calc(var(--sp-2) + var(--niveau, 0) * var(--sp-12));
    border-radius:var(--radius-sm); font-size:var(--fs-sm); cursor:pointer; }
  .cms-bloc-ligne:hover, .cms-bloc-ligne.survol-calque{ background:var(--line2); } .cms-bloc-ligne.on{ background:color-mix(in srgb, var(--cms-accent) 16%, transparent); }
  .cms-bloc-ligne:focus-visible{ outline:2px solid var(--focus-anneau); outline-offset:-2px; } :is(.cms-bloc-ligne, .cms-vue).prise{ opacity:.5; }
  .cms-bloc-ligne.absent .cms-bloc-nom{ color:var(--mut); } .cms-bloc-ligne.groupe .cms-bloc-nom{ font-weight:var(--fw-strong); }
  .cms-bloc-ligne.masque :is(.cms-bloc-nom, .cms-calque-ic){ opacity:.45; }
  .cms-calque-ic{ display:flex; flex:none; color:var(--mut2); } .cms-calque-ic svg.ic{ width:14px; height:14px; } .cms-bloc-ligne.on .cms-calque-ic{ color:var(--cms-accent-texte); }
  .cms-calque-bt{ display:grid; place-items:center; width:22px; height:22px; padding:0; border:0; border-radius:var(--radius-xs); background:transparent; color:var(--mut); cursor:pointer; opacity:0; }
  .cms-bloc-ligne:is(:hover, :focus-within, .on) .cms-calque-bt, .cms-calque-bt.actif{ opacity:1; } .cms-calque-bt:hover{ background:var(--line); color:var(--txt); } .cms-calque-bt svg.ic{ width:13px; height:13px; }
  [data-depot]::before{ content:''; position:absolute; inset-inline:0; height:2px; border-radius:var(--radius-xs); background:var(--cms-accent); pointer-events:none; }
  [data-depot="avant"]::before{ top:-1px; } [data-depot="apres"]::before{ bottom:-1px; } [data-depot="dans"]::before{ display:none; }
  [data-depot="dans"]{ background:color-mix(in srgb, var(--cms-accent) 22%, transparent); }
  .cms input.cms-g-renommer{ flex:1; min-width:0; height:22px; padding:0 var(--sp-4); border:1px solid var(--cms-accent-texte); border-radius:var(--radius-xs);
    background:var(--card); color:var(--txt); font:inherit; font-size:var(--fs-sm); box-shadow:none; outline:none; }
  .cms-g-aide{ display:block; margin-top:var(--sp-6); font-size:var(--fs-xs); color:var(--mut); line-height:var(--lh-normal); }
  /* Les sommaires de Paramètres et de Design. */
  .cms-sommaire{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
  .cms-sommaire-l{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-8); width:100%; min-height:var(--cms-h-c); padding:0 var(--sp-8); border:0;
    border-radius:var(--radius-sm); background:transparent; color:var(--txt); font:inherit; font-size:var(--fs-sm); text-align:start; cursor:pointer; }
  .cms-sommaire-l:hover{ background:var(--line2); } .cms-sommaire-l.on{ background:color-mix(in srgb, var(--cms-accent) 14%, var(--card)); }
  .cms-sommaire-n{ min-width:1.6em; padding:0 var(--sp-6); border-radius:var(--radius-pill); background:var(--line2); color:var(--mut); font-size:var(--fs-xs); text-align:center; font-variant-numeric:tabular-nums; }
  /* Le pied : l'état en pastille (un point de couleur, un mot ; la phrase entière au survol et aux lecteurs d'écran). */
  .cms-g-pied{ position:sticky; bottom:0; margin:auto calc(-1 * var(--cms-pad)) 0; padding:var(--sp-8) var(--cms-pad) var(--sp-10); background:var(--card); border-top:1px solid var(--line2); }
  .cms-etat-plan{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-6); font-size:var(--fs-xs); color:var(--mut); line-height:var(--lh-normal); }
  .cms-etat-pastille{ display:inline-flex; align-items:center; gap:var(--sp-6); height:22px; padding:0 var(--sp-8); border-radius:var(--radius-pill); background:var(--line2); color:var(--txt); }
  .cms-etat-point{ width:7px; height:7px; border-radius:50%; background:var(--ok); }
  :is([data-etat="encours"], [data-etat="lecture"]) .cms-etat-point{ background:var(--warn); } :is([data-etat="neuf"], [data-etat="migre"]) .cms-etat-point{ background:var(--mut2); }
  :is([data-etat="conflit"], [data-etat="erreur"]) .cms-etat-point{ background:var(--err); } :is([data-etat="conflit"], [data-etat="erreur"]) .cms-etat-texte{ font-weight:var(--fw-strong); }

  /* ── 5. Le centre : le rendu façon navigateur ─────────────────────────────────────────────────────────────────────
     Le rendu tient toute la hauteur que la barre du bas laisse ; sa barre d'adresse reste en haut ; la page est la
     « fenêtre » du site dessiné (immobile, un bloc fixe y reste), .cms-ap-defile défile dedans, sous un ascenseur posé
     par-dessus (la barre native cachée). Le zoom : CSS zoom sur le cadre (80-cms.js, cmsZoomAppliquer). */
  .cms-apercu{ position:relative; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); color:var(--txt); box-shadow:var(--shadow-sm); overflow:hidden; }
  .cms-centre > .cms-apercu{ flex:none; box-sizing:border-box; width:var(--cms-cadre-l, 1440px); height:var(--cms-cadre-h, 900px); margin:auto; display:flex; flex-direction:column; zoom:var(--cms-zoom, 1); }   /* le cadre de l'appareil, centré dans l'espace libre (2026-10-17) */ .cms-centre > .cms-apercu > .cms-ap-barre{ flex:none; }
  .cms-centre > .cms-apercu > .cms-ap-page{ flex:1 1 auto; min-height:0; overflow:hidden; }
  .cms-apercu[data-appareil="mobile"] .cms-ap-colonnes{ grid-template-columns:1fr; }
  /* La barre façon Safari : trois colonnes, l'adresse au centre quel que soit le reste ; ses flèches et son rechargement
     sont floutés en édition (proprio : « ils apparaissent en Play »), pâles en Live quand ils n'ont rien à faire. */
  .cms-ap-barre{ position:relative; z-index:var(--cms-z-barre); display:grid; grid-template-columns:1fr minmax(0,2.4fr) 1fr; gap:var(--sp-10); padding:var(--sp-8) var(--sp-12);
    border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--card2) 70%, var(--card)); }
  .cms-ap-safari-g{ display:flex; align-items:center; gap:var(--sp-6); min-width:0; } .cms-ap-safari-c{ position:relative; display:flex; justify-content:center; min-width:0; }
  .cms-ap-safari-d{ display:flex; align-items:center; justify-content:flex-end; gap:var(--sp-2); min-width:0; color:var(--mut2); }
  .cms-ap-feu{ width:12px; height:12px; flex:none; border-radius:var(--radius-pill); background:color-mix(in srgb, var(--mut2) 45%, transparent); }
  .cms-ap-safari-nav{ display:inline-flex; gap:var(--sp-2); margin-inline-start:var(--sp-10); color:var(--mut2); }
  .cms-ap-safari-bt{ display:inline-grid; place-items:center; width:var(--cms-h-c); height:var(--cms-h-c); padding:0; border:0; border-radius:var(--radius-xs);
    background:transparent; color:var(--mut2); cursor:pointer; transition:opacity var(--cms-dur-l) ease, filter var(--cms-dur-l) ease, background-color var(--cms-dur) ease, color var(--cms-dur) ease; }
  .cms-ap-safari-bt svg.ic{ width:15px; height:15px; } .cms-ap-safari-bt:disabled{ filter:blur(2.5px); cursor:default; }
  .cms-ap-safari.live .cms-ap-safari-bt:not(:disabled), .cms-ap-safari .cms-ap-onglet-plus{ color:var(--txt); }
  .cms-ap-safari.live .cms-ap-safari-bt:not(:disabled):hover, .cms-ap-safari .cms-ap-onglet-plus:hover{ background:var(--line2); }
  .cms-ap-safari.live .cms-ap-safari-bt:disabled{ filter:none; opacity:.35; }
  /* L'adresse est un bouton : au clic, le menu des vues de l'écran, dessous (§ 3 pour la carte du menu). */
  .cms-ap-url{ display:block; width:100%; max-width:440px; height:var(--cms-h-c); box-sizing:border-box; padding:0 var(--sp-12); border:1px solid transparent; border-radius:var(--radius-sm);
    background:color-mix(in srgb, var(--txt) 7%, var(--card)); text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-family:var(--fontes-sans, inherit); font-size:var(--fs-xs); color:var(--txt); cursor:pointer; transition:background-color var(--cms-dur) ease, border-color var(--cms-dur) ease, box-shadow var(--cms-dur) ease; }
  .cms-ap-url svg.ic{ width:11px; height:11px; margin-inline-end:var(--sp-6); vertical-align:-1px; color:var(--mut2); }   /* le cadenas */
  .cms-ap-url:hover{ background:color-mix(in srgb, var(--txt) 10%, var(--card)); }
  .cms-ap-url.ouvert, .cms-ap-url:focus-visible{ outline:none; background:var(--card); border-color:color-mix(in srgb, var(--cms-accent) 55%, transparent);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--cms-accent) 18%, transparent); }
  .cms-ap-url-menu{ position:absolute; top:calc(100% + var(--sp-6)); left:50%; transform:translateX(-50%); z-index:var(--cms-z-menu); width:min(440px, 100%); min-width:260px;
    padding:var(--sp-6); font-family:var(--fontes-sans, inherit); font-size:var(--fs-sm); text-align:start; }
  .cms-ap-url-champ{ display:flex; align-items:center; gap:var(--sp-6); padding:0 var(--sp-8); border-radius:var(--radius-sm); background:color-mix(in srgb, var(--txt) 6%, var(--card)); }
  .cms-ap-url-champ svg.ic{ width:13px; height:13px; color:var(--mut2); flex:none; }
  .cms-ap-url-champ input{ flex:1 1 auto; min-width:0; height:var(--cms-h-c); border:0; background:transparent; color:var(--txt); font:inherit; outline:none; }
  .cms-ap-url-sur{ margin:var(--sp-8) var(--sp-8) var(--sp-4); font-size:var(--fs-xs); font-weight:var(--fw-strong); color:var(--mut); }
  .cms-ap-url-liste{ list-style:none; margin:0; padding:0; max-height:300px; overflow:auto; }
  .cms-ap-url-item{ display:flex; align-items:center; gap:var(--sp-8); padding:var(--sp-6) var(--sp-8); padding-inline-start:calc(var(--sp-8) + var(--prof, 0) * 16px); border-radius:var(--radius-sm); cursor:pointer; }
  .cms-ap-url-item svg.ic{ width:14px; height:14px; flex:none; color:var(--mut2); } .cms-ap-url-nom{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cms-ap-url-adr{ margin-inline-start:auto; padding-inline-start:var(--sp-10); color:var(--mut); font-size:var(--fs-xs); white-space:nowrap; }
  .cms-ap-url-item:is(.on, :hover){ background:var(--studio-accent-doux); color:var(--txt); }
  .cms-ap-url-item.courante .cms-ap-url-nom{ font-weight:var(--fw-strong); } .cms-ap-url-vide{ padding:var(--sp-10) var(--sp-8); color:var(--mut); }
  /* Les onglets du navigateur dessiné, en Éditeur comme en Play : sous la barre dès deux, égaux, l'actif plus clair. */
  .cms-ap-onglets{ position:relative; z-index:var(--cms-z-onglets); display:flex; gap:var(--sp-4); padding:var(--sp-6) var(--sp-8);
    border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--card2) 70%, var(--card)); }
  .cms-ap-onglet{ position:relative; display:flex; align-items:center; justify-content:center; flex:1 1 0; min-width:0; height:var(--cms-h-c); padding:0 var(--sp-24);
    border-radius:var(--radius-sm); background:color-mix(in srgb, var(--txt) 6%, transparent); color:var(--mut); font-family:var(--fontes-sans, inherit); font-size:var(--fs-xs);
    cursor:pointer; transition:background-color var(--cms-dur) ease, color var(--cms-dur) ease; }
  .cms-ap-onglet:hover{ background:color-mix(in srgb, var(--txt) 10%, transparent); color:var(--txt); }
  .cms-ap-onglet.on{ background:var(--card); color:var(--txt); font-weight:var(--fw-label); box-shadow:var(--shadow-sm); }
  .cms-ap-onglet-nom{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cms-ap-onglet-x{ position:absolute; inset-inline-start:var(--sp-4); top:50%; transform:translateY(-50%); display:grid; place-items:center; width:18px; height:18px; padding:0; border:0;
    border-radius:var(--radius-xs); background:transparent; color:var(--mut); opacity:0; cursor:pointer; transition:opacity var(--cms-dur) ease, background-color var(--cms-dur) ease; }
  .cms-ap-onglet:hover .cms-ap-onglet-x, .cms-ap-onglet-x:focus-visible{ opacity:1; } .cms-ap-onglet-x:hover{ background:var(--line2); color:var(--txt); }
  .cms-ap-onglet-x svg.ic{ width:11px; height:11px; }
  /* La page dessinée, son défilement et son ascenseur. */
  .cms-ap-page{ position:relative; display:flex; flex-direction:column; min-height:420px; font-family:var(--fontes-sans, inherit); contain:layout; }
  .cms-ap-defile{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; overflow:auto; scrollbar-width:none; } .cms-ap-defile::-webkit-scrollbar{ display:none; }
  .cms-ap-defile > .cms-ap-corps{ flex:1 0 auto; }
  .cms-ap-corps{ flex:1; padding:var(--page-retrait, var(--sp-24) var(--sp-20)); }   /* le retrait de la page, réglable */
  .cms-ap-ascenseur{ position:absolute; top:2px; bottom:2px; inset-inline-end:2px; z-index:var(--cms-z-menu); width:11px; pointer-events:none; opacity:0; transition:opacity var(--cms-dur-l) ease; }
  .cms-ap-ascenseur[hidden]{ display:none; } .cms-ap-page:hover > .cms-ap-ascenseur, .cms-ap-ascenseur.actif, .cms-ap-ascenseur.tenu{ opacity:1; }
  .cms-ap-ascenseur-pouce{ display:block; width:6px; margin-inline-start:auto; border-radius:var(--radius-pill); pointer-events:auto;
    background:color-mix(in srgb, var(--txt) 38%, transparent); transition:width var(--cms-dur) ease, background-color var(--cms-dur) ease; }
  .cms-ap-ascenseur-pouce:hover, .cms-ap-ascenseur.tenu > .cms-ap-ascenseur-pouce{ width:9px; background:color-mix(in srgb, var(--txt) 55%, transparent); }
  .cms-ap-pied{ padding:var(--sp-10) var(--sp-20); border-top:1px solid var(--line2); font-size:var(--fs-xs); color:var(--mut); }
  /* Le fond du centre : un confort de l'éditeur, gardé dans le navigateur ; « Clair » et « Sombre » fixes (F10). */
  .cms-centre[data-fond="clair"], .cms-fond-pastille[data-fond="clair"]{ background:var(--toile-claire); }
  .cms-centre[data-fond="sombre"], .cms-fond-pastille[data-fond="sombre"]{ background:var(--toile-sombre); }
  .cms-centre[data-fond="points"], .cms-fond-pastille[data-fond="points"]{ background-color:var(--bg);
    background-image:radial-gradient(circle, color-mix(in srgb, var(--txt) 24%, transparent) 1px, transparent 1.6px); background-size:16px 16px; }
  .cms-centre[data-fond="grille"], .cms-fond-pastille[data-fond="grille"]{ background-color:var(--bg); background-size:24px 24px;
    background-image:linear-gradient(color-mix(in srgb, var(--txt) 9%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--txt) 9%, transparent) 1px, transparent 1px); }
  .cms-centre[data-fond="perso"], .cms-fond-pastille[data-fond="perso"]{ background:var(--cms-fond-perso); }
  .cms-fond-pastille{ display:inline-block; width:14px; height:14px; flex:none; border:1px solid var(--line); border-radius:var(--radius-pill); background:var(--bg); }
  .cms-fond-pastille[data-fond="points"]{ background-size:4px 4px; } .cms-fond-pastille[data-fond="grille"]{ background-size:5px 5px; }

  /* ── 6. La barre du bas et ses menus ──────────────────────────────────────────────────────────────────────────────
     Une pilule centrée ; chaque bouton ouvre au-dessus de lui son sous-menu, au survol, au clavier (focus) ou au clic
     (.ouvert) ; la palette d'Ajouter jamais au seul focus (Échap la ferme et rend le focus au bouton). Un pont invisible
     (le retrait bas du sous-menu) garde le survol entre le bouton et le menu. */
  .cms-centre > .cms-barre{ align-self:center; display:inline-flex; flex-wrap:nowrap; align-items:center; gap:var(--sp-2); padding:var(--sp-4);
    border:1px solid var(--line); border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow-sm); }
  .cms-barre-item{ position:relative; }
  .cms-barre-bt{ display:inline-flex; align-items:center; gap:var(--sp-6); height:var(--cms-h); padding:0 var(--sp-12); border:0; border-radius:var(--radius-sm);
    background:transparent; color:var(--txt); font:inherit; font-size:var(--fs-sm); font-weight:var(--fw-label); white-space:nowrap; cursor:pointer; }
  .cms-barre-bt:hover, .cms-barre-item:not(.cms-ap-ajout):focus-within > .cms-barre-bt, .cms-barre-item.ouvert > .cms-barre-bt{ background:var(--line2); }
  .cms-barre-bt.primaire{ background:var(--cms-accent-plein); color:var(--on-solid); }
  .cms-barre-bt.primaire:hover, .cms-barre-item.ouvert > .cms-barre-bt.primaire{ background:color-mix(in srgb, var(--cms-accent-plein) 88%, var(--txt)); }
  .cms-barre-bt svg.ic{ width:15px; height:15px; flex:none; } .cms-barre.live #cms-barre-ajout{ display:none; }
  /* 2026-10-16 : à l'étage de la barre, jamais sous les règles ni les panneaux (même étage, posés après : la palette élargie
     en deux colonnes y perdait sa colonne gauche, prouvé par le banc). */
  .cms-barre-menu{ position:absolute; bottom:100%; left:50%; transform:translateX(-50%); z-index:var(--cms-z-barre); padding-bottom:var(--sp-8);
    visibility:hidden; opacity:0; pointer-events:none; transition:opacity var(--cms-dur) ease, visibility 0s linear var(--cms-dur); }
  .cms-barre-item:hover > .cms-barre-menu, .cms-barre-item:not(.cms-ap-ajout):focus-within > .cms-barre-menu, .cms-barre-item.ouvert > .cms-barre-menu{
    visibility:visible; opacity:1; pointer-events:auto; transition:opacity var(--cms-dur) ease; }
  .cms-barre-menu-in{ display:flex; flex-direction:column; gap:var(--sp-2); min-width:210px; padding:var(--sp-6); }
  .cms-barre-menu-in kbd{ margin-inline-start:auto; padding-inline-start:var(--sp-12); font:inherit; font-size:var(--fs-xs); color:var(--mut); }
  .cms-barre-filet{ margin:var(--sp-4) 0; border:0; border-top:1px solid var(--line); }
  /* Un choix d'un sous-menu (appareil, thème, zoom, fond), et, hors menu, le filtre des moteurs en bascule. */
  .cms-ap-app{ display:inline-flex; align-items:center; justify-content:flex-start; gap:var(--sp-8); width:100%; min-height:var(--cms-h-c); padding:0 var(--sp-10); border:0;
    border-radius:var(--radius-sm); background:transparent; color:var(--txt); font:inherit; font-size:var(--fs-sm); cursor:pointer; }
  .cms-ap-app:hover{ background:var(--line2); } .cms-ap-app.on{ background:color-mix(in srgb, var(--cms-accent) 12%, transparent); color:var(--cms-accent-texte); font-weight:var(--fw-strong); }
  .cms-ap-app svg.ic{ width:14px; height:14px; }
  .cms-ap-largeur{ display:flex; align-items:center; gap:var(--sp-6); margin-top:var(--sp-4); padding:var(--sp-6) var(--sp-10) var(--sp-2); border-top:1px solid var(--line); font-size:var(--fs-xs); color:var(--mut); }
  .cms-ap-largeur input{ width:80px; height:var(--cms-h-c); box-sizing:border-box; padding:0 var(--sp-6); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); color:var(--txt); font:inherit; font-size:var(--fs-sm); }
  /* La palette des blocs (dans le sous-menu d'Ajouter), 2026-10-16 (proprio : « plus large, prêt pour beaucoup plus de blocs ») :
     une tête (titre, recherche), un rail de rayons (Tout, un par moteur, Composants), des sections de tuiles verticales sur
     quatre colonnes, titres collants ; la corbeille d'un composant dans le coin, au survol. */
  .cms-ap-palette{ width:min(680px, 92vw); max-height:min(72vh, 640px); display:flex; flex-direction:column; overflow:hidden; padding:0; } .cms-ap-palette .cms-d-sous{ margin:0; padding:0; border-top:0; }
  .cms-ap-palette-cible{ margin:0; padding:var(--sp-8) var(--sp-14) 0; font-size:var(--fs-xs); color:var(--mut); }
  .cms-palette{ display:flex; flex-direction:column; min-height:0; } .cms-palette:not([data-etat="blocs"]){ padding:var(--sp-12) var(--sp-14); }
  .cms-palette-tete{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-12); padding:var(--sp-10) var(--sp-14); border-bottom:1px solid var(--line); }
  .cms-palette-champ{ display:flex; align-items:center; gap:var(--sp-6); width:min(260px, 50%); height:var(--cms-h-c); box-sizing:border-box; padding:0 var(--sp-8); border-radius:var(--radius-sm); background:var(--cms-champ); color:var(--mut); } .cms-palette-champ svg.ic{ width:14px; height:14px; flex:none; }
  .cms-palette-champ input{ flex:1; min-width:0; border:0; background:transparent; color:var(--txt); font:inherit; font-size:var(--fs-sm); outline:none; }
  .cms-palette-corps{ display:grid; grid-template-columns:150px minmax(0,1fr); flex:1; min-height:0; }
  .cms-palette-rayons{ display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-10) var(--sp-8); border-right:1px solid var(--line); overflow:auto; }
  .cms-palette-rayon-bt{ display:block; width:100%; padding:var(--sp-6) var(--sp-10); border:0; border-radius:var(--radius-sm); background:transparent; color:var(--mut); font:inherit; font-size:var(--fs-sm); text-align:start; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cms-palette-rayon-bt:hover, .cms-palette-rayon-bt:focus-visible{ color:var(--txt); background:var(--cms-champ); outline:none; } .cms-palette-rayon-bt.on{ color:var(--cms-accent-texte); background:color-mix(in srgb, var(--cms-accent) 10%, var(--card)); font-weight:var(--fw-strong); }
  .cms-palette-grille{ overflow:auto; padding:0 var(--sp-14) var(--sp-14); } .cms-palette-rayon{ padding-top:var(--sp-4); } .cms-palette-sous{ position:sticky; top:0; z-index:var(--cms-z-sug); margin:0; padding:var(--sp-8) 0 var(--sp-6); background:var(--card); }
  .cms-palette-liste{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--sp-6); } .cms-palette-liste li{ display:block; min-width:0; }
  .cms-palette-bloc{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-6); width:100%; min-height:76px; box-sizing:border-box; padding:var(--sp-8) var(--sp-6); border:1px solid var(--line2); border-radius:var(--radius-sm); background:var(--card); color:var(--txt); font:inherit; font-size:var(--fs-sm); text-align:center; cursor:grab; }
  .cms-palette-bloc:hover, .cms-palette-bloc:focus-visible{ border-color:var(--cms-accent); background:color-mix(in srgb, var(--cms-accent) 6%, var(--card)); outline:none; } .cms-palette-bloc:active{ cursor:grabbing; }
  .cms-palette-ic{ display:grid; place-items:center; flex:none; width:32px; height:32px; border-radius:var(--radius-sm); background:var(--cms-champ); color:var(--mut); } .cms-palette-ic.accent{ color:var(--cms-accent-texte); background:color-mix(in srgb, var(--cms-accent) 10%, var(--card)); } .cms-palette-ic svg.ic{ width:16px; height:16px; }
  .cms-palette-nom{ max-width:100%; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-height:1.25; }
  .cms-palette-installer{ display:flex; flex-wrap:wrap; gap:var(--sp-6); margin-top:var(--sp-8); } .cms-palette-comp{ position:relative; }
  .cms-palette-suppr{ position:absolute; top:var(--sp-4); right:var(--sp-4); display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--mut); opacity:0; cursor:pointer; }
  .cms-palette-comp:hover > .cms-palette-suppr, .cms-palette-suppr:focus-visible{ opacity:1; } .cms-palette-suppr:hover{ color:var(--danger, var(--txt)); background:var(--line2); } .cms-palette-suppr svg.ic{ width:14px; height:14px; }

  /* ── 7. Le dessin des blocs ───────────────────────────────────────────────────────────────────────────────────────
     Les variables --bloc-* que le moteur du style déclare (m14r), avec un repli neutre. Un enfant ne reçoit pas les
     variables du bloc qui le porte (remises à zéro ici, ses propres valeurs les reposent en ligne) ; il lit les --parent-*
     que son groupe lui passe. Le cadre d'édition est un ::after à angles droits, à l'accent de l'ATELIER. */
  .cms-ap-composee{ position:relative; display:flex; flex-direction:column; gap:var(--ap-ecart); user-select:none; -webkit-user-select:none; }
  .cms-ap-composee :is(.cms-ap-p, .cms-ap-cta){ margin:0; }
  .cms-ap-composee .cms-ap-b{ position:var(--bloc-placement, relative); inset:var(--bloc-inset, auto); z-index:var(--bloc-z, auto); box-sizing:border-box; outline:none; cursor:pointer;
    overflow:var(--bloc-debord, visible); align-self:var(--parent-self, var(--bloc-self, stretch)); text-align:var(--bloc-align, start);
    width:var(--bloc-largeur, auto); max-width:min(100%, var(--bloc-largeur-max, 100%)); min-width:var(--bloc-largeur-min, auto);
    height:var(--bloc-hauteur, auto); min-height:var(--bloc-hauteur-min, 0px); max-height:var(--bloc-hauteur-max, none);
    display:flex; flex-direction:column; justify-content:var(--bloc-contenu-v, flex-start);
    margin:var(--bloc-marge, 0px); padding:var(--bloc-retrait, var(--bloc-padding, 0px));
    background:var(--bloc-fond-image, linear-gradient(transparent, transparent)) var(--bloc-fond-clip, border-box), var(--bloc-fond-photo, linear-gradient(transparent, transparent)) center / var(--bloc-fond-taille, cover) var(--bloc-fond-repete, no-repeat) var(--bloc-fond-clip, border-box), var(--bloc-bordure-degrade, linear-gradient(transparent, transparent)) border-box; color:var(--bloc-couleur, var(--txt)); opacity:var(--bloc-opacite, 1); box-shadow:var(--bloc-ombre, none);   /* le remplissage en image, l'image de fond dessous (m14r 1.40.0, I5), la bordure en dégradé (1.30.0) */
    border:var(--bloc-bordure-largeur, 0px) solid var(--bloc-bordure-couleur, color-mix(in srgb, var(--txt) 20%, transparent)); border-radius:var(--bloc-rayon, var(--radius-sm));
    font-size:var(--bloc-taille, inherit); font-weight:var(--bloc-graisse, inherit); line-height:var(--bloc-interligne, inherit);
    letter-spacing:var(--bloc-interlettrage, normal); text-transform:var(--bloc-casse, none); font-family:var(--bloc-police, inherit); font-style:var(--bloc-italique, normal); text-decoration-line:var(--bloc-souligne,) var(--bloc-barre,); filter:var(--bloc-flou,) var(--bloc-luminosite,); backdrop-filter:var(--bloc-flou-arriere, none); mix-blend-mode:var(--bloc-fusion, normal); }   /* I3 (STY9) : les filtres de m14r.css */
  .cms-ap-composee .cms-ap-b::after{ content:''; position:absolute; inset:0; border:1.5px solid transparent; border-radius:var(--radius-none, 0); pointer-events:none; transition:border-color var(--cms-dur); }
  #cms-ap-composee > .cms-ap-b:hover::after, .cms-ap-composee .cms-ap-groupe.ouvert > .cms-ap-b:hover::after, .cms-ap-composee .cms-ap-b.on::after, .cms-ap-composee .cms-ap-b.survol-calque::after,
  .cms-ap-composee .cms-ap-b:focus-visible::after{ border-color:var(--cms-accent); }
  .cms-ap-composee .cms-ap-b[data-cms-masque]{ display:none; }   /* M4 : masqué dans les Calques, absent du seul dessin de l'Éditeur */
  .cms-ap-composee .cms-ap-groupe.ouvert:has(> .cms-ap-b:hover):not(.on)::after{ border-color:transparent; }   /* un groupe ouvert se tait, ses blocs se survolent */
  .cms-ap-composee .cms-ap-b:focus-visible{ box-shadow:var(--bloc-ombre, none); border-radius:var(--bloc-rayon, var(--radius-sm)); }
  .cms-ap-composee .cms-ap-b .cms-ap-h2{ font-size:var(--bloc-taille, var(--fs-xl)); font-weight:var(--bloc-graisse, var(--fw-strong)); font-family:var(--bloc-police, var(--fontes-titres, var(--fontes-sans, inherit))); }
  .cms-ap-composee .cms-ap-b .cms-ap-p{ color:var(--bloc-couleur, var(--mut)); } .cms-ap-composee .cms-ap-b .cms-ap-long{ color:var(--bloc-couleur, var(--txt)); } .cms-ap-composee .cms-ap-b :where(.cms-ap-h2, .cms-ap-p){ background-image:var(--bloc-texte-degrade, none); -webkit-background-clip:var(--bloc-texte-clip, border-box); background-clip:var(--bloc-texte-clip, border-box); -webkit-text-fill-color:var(--bloc-texte-remplissage, currentcolor); translate:0 var(--bloc-texte-decale, 0px); scale:var(--bloc-texte-echelle, 1); transform-origin:left center; }   /* le texte en dégradé, l'indice, l'exposant (m14r 1.30.0, 1.31.0) */
  .cms-ap-composee .cms-ap-b > .cms-ap-cta{ align-self:var(--bloc-contenu-h, flex-start); }
  .cms-ap-composee .cms-ap-b .cms-ap-cta{ font-size:var(--bloc-taille, var(--fs-sm)); font-weight:var(--bloc-graisse, var(--fw-strong)); }
  .cms-ap-composee .cms-ap-b .cms-ap-b{ --bloc-self:initial; --bloc-largeur:initial; --bloc-align:initial; --bloc-contenu-v:initial; --bloc-contenu-h:initial;
    --bloc-marge:initial; --bloc-retrait:initial; --bloc-padding:initial; --bloc-fond:initial; --bloc-couleur:initial; --bloc-bordure-largeur:initial;
    --bloc-bordure-couleur:initial; --bloc-rayon:initial; --bloc-hauteur:initial; --bloc-hauteur-min:initial; --bloc-hauteur-max:initial; --bloc-largeur-min:initial;
    --bloc-largeur-max:initial; --bloc-opacite:initial; --bloc-ombre:initial; --bloc-taille:initial; --bloc-graisse:initial; --bloc-interligne:initial;
    --bloc-interlettrage:initial; --bloc-casse:initial; --bloc-remplit:initial; --bloc-base:initial; --parent-pousse:initial; --parent-base:initial; --parent-self:initial;
    --bloc-debord:initial; --bloc-reserve:initial; --survol-fond:initial; --survol-encre:initial; --survol-couleur:initial; --survol-ombre:initial; --survol-echelle:initial; --bloc-fond-image:initial; --bloc-fond-photo:initial; --bloc-fond-taille:initial; --bloc-fond-repete:initial; --bloc-fond-clip:initial; --bloc-bordure-degrade:initial; --bloc-texte-degrade:initial; --bloc-texte-clip:initial; --bloc-texte-remplissage:initial; --bloc-police:initial; --bloc-italique:initial; --bloc-souligne:initial; --bloc-barre:initial; --bloc-texte-decale:initial; --bloc-texte-echelle:initial;
    --bloc-placement:initial; --bloc-inset:initial; --bloc-z:initial; --apparition:initial; --apparition-duree:initial; --bloc-flou:initial; --bloc-luminosite:initial; --bloc-flou-arriere:initial; --bloc-fusion:initial; --bloc-etendue:initial; --parent-accroche:initial;
    flex-grow:calc(var(--parent-pousse, 0) * var(--bloc-remplit, 0)); flex-basis:var(--bloc-base, auto); min-width:var(--bloc-largeur-min, 0px); grid-column:var(--bloc-etendue, auto); scroll-snap-align:var(--parent-accroche, none); }
  /* Les groupes, l'auto layout de Figma ; 48 px au plus bas pour le seul groupe VIDE (qu'il reste visible et cliquable). */
  .cms-ap-composee .cms-ap-groupe{ flex-direction:var(--groupe-dir, column); justify-content:var(--groupe-justify, flex-start); align-items:var(--groupe-items, stretch);
    gap:var(--groupe-espace, 16px); flex-wrap:var(--groupe-retour, nowrap); display:var(--groupe-affichage, flex); grid-template-columns:var(--groupe-colonnes, none); grid-template-rows:var(--groupe-rangees, none); scroll-snap-type:var(--groupe-accroche, none); }   /* I2 : grille, accroche */
  .cms-ap-composee .cms-ap-groupe.vide{ min-height:var(--bloc-hauteur-min, var(--bloc-hauteur, 48px)); align-items:center; justify-content:center; border:1px dashed color-mix(in srgb, var(--txt) 30%, transparent); }
  .cms-ap-groupe-vide{ display:inline-flex; align-items:center; gap:var(--sp-6); padding:var(--sp-6) var(--sp-10); border:0; border-radius:var(--radius-sm);
    background:transparent; color:var(--mut); font:inherit; font-size:var(--fs-sm); cursor:pointer; }
  .cms-ap-groupe-vide:hover{ color:var(--cms-accent-texte); background:color-mix(in srgb, var(--cms-accent) 8%, transparent); } .cms-ap-groupe-vide svg.ic{ width:14px; height:14px; }
  /* Glisser un bloc : la copie translucide suit la souris, la place quittée en pointillé, la ligne d'insertion à l'accent ;
     un bloc absolu ou fixe se déplace là où on le lâche ; pendant le glisser, les cadres de survol se taisent. */
  .cms-ap-composee .cms-ap-b:is(.cms-ap-deplace, .cms-ap-tenu){ cursor:grabbing; }
  .cms-ap-composee .cms-ap-b.cms-ap-deplace, .cms-ap-composee.en-glisse :is(.cms-ap-b, .cms-ap-b::after){ transition:none; }
  .cms-ap-fantome-boite{ position:absolute; left:0; top:0; z-index:var(--cms-z-barre); pointer-events:none; will-change:transform; }
  .cms-ap-composee .cms-ap-fantome{ margin:0; opacity:.88; overflow:hidden; box-shadow:var(--cms-ombre-menu), 0 0 0 1px color-mix(in srgb, var(--cms-accent) 40%, transparent); }
  .cms-ap-composee .cms-ap-fantome::after{ display:none; } .cms-ap-composee .cms-ap-b.cms-ap-glisse{ opacity:.3; }
  .cms-ap-composee .cms-ap-b.cms-ap-glisse::after{ border:2px dashed color-mix(in srgb, var(--cms-accent) 60%, transparent); }
  .cms-ap-composee.en-glisse .cms-ap-b:not(.cms-ap-glisse):not(.cible)::after{ border-color:transparent; }
  .cms-ap-composee .cms-ap-groupe.cible{ background:color-mix(in srgb, var(--cms-accent) 10%, var(--bloc-fond, transparent)); }
  .cms-ap-composee .cms-ap-groupe.cible::after{ border-color:var(--cms-accent); }
  .cms-ap-insertion{ position:absolute; z-index:var(--cms-z-insertion); display:none; border-radius:var(--radius-pill); background:var(--cms-accent); pointer-events:none;
    box-shadow:0 0 0 2px color-mix(in srgb, var(--cms-accent) 25%, transparent); }
  html.cms-saisi, html.cms-saisi #cms *{ cursor:grabbing; }
  /* Le texte d'un bloc choisi se modifie dans le dessin : sélectionnable, curseur de texte, une place cliquable même vide,
     ni contour ni anneau (le cadre du bloc suffit). */
  .cms-ap-composee [data-cms-edit]{ user-select:text; -webkit-user-select:text; cursor:text; outline:none; min-width:1ch; min-height:1lh; caret-color:var(--cms-accent); }
  .cms-ap-composee [data-cms-edit]:is(:focus, :focus-visible){ outline:none; box-shadow:none; }
  .cms-ap-composee [data-cms-edit]:empty::before{ content:attr(aria-label); color:var(--mut); opacity:.6; }
  :is(#cms-ap-composee, .cms-ap-groupe.ouvert) > .cms-ap-b:not(.cms-ap-groupe) :is(.cms-ap-h2, .cms-ap-p, .cms-ap-cta-bloc){ cursor:text; }
  /* Un bloc bouton : la zone reste nue, le style peint le bouton (fond, encre, bordure, coins, ombre, retrait). */
  .cms-ap-composee .cms-ap-b.a-bouton, .cms-ap-composee .cms-ap-b.a-bouton:focus-visible{ background:transparent; border-width:0; box-shadow:none; padding:0; }
  .cms-ap-composee .cms-ap-b.a-bouton > .cms-ap-cta{ background:var(--bloc-fond-image, linear-gradient(var(--color-primary, var(--accent)), var(--color-primary, var(--accent)))) var(--bloc-fond-clip, border-box), var(--bloc-bordure-degrade, linear-gradient(transparent, transparent)) border-box; color:var(--bloc-couleur, var(--bloc-encre, var(--ap-encre, var(--on-solid))));
    border:var(--bloc-bordure-largeur, 0px) solid var(--bloc-bordure-couleur, transparent); border-radius:var(--bloc-rayon, var(--radius-md, var(--radius-sm)));
    box-shadow:var(--bloc-ombre, none); padding:var(--bloc-retrait, var(--ap-bouton-retrait)); }
  /* Le HTML libre rendu dans un cadre isolé (non choisi, le clic passe au bloc) ; la cale d'un bloc qui garde sa place. */
  .cms-ap-rendu{ display:block; width:100%; height:0; border:0; background:transparent; color-scheme:normal; pointer-events:none; }
  .cms-ap-composee .cms-ap-b.on > .cms-ap-rendu{ pointer-events:auto; } .cms-ap-reserve{ flex:none; max-width:100%; pointer-events:none; }
  /* Ce que les blocs dessinent (d'après les TYPES de leurs champs), et le dessin d'une vue vide. */
  .cms-ap-h2{ margin:0; font-family:var(--fontes-titres, var(--fontes-sans, inherit)); font-size:var(--fs-xl); font-weight:var(--fw-strong); }
  .cms-ap-p{ margin:0 0 var(--sp-16); color:var(--mut); } .cms-ap-long, .cms-ap-colonnes .cms-ap-p{ white-space:pre-line; } .cms-ap-long{ color:var(--txt); }
  .cms-ap-colonnes{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-12); }
  .cms-ap-cta{ display:inline-flex; align-items:center; margin:0 0 var(--sp-16); padding:var(--sp-8) var(--sp-14); border-radius:var(--radius-md, var(--radius-sm));
    background:var(--color-primary, var(--accent)); color:var(--ap-encre, var(--on-solid)); font-size:var(--fs-sm); font-weight:var(--fw-strong); }
  .cms-ap-image{ margin:0; display:grid; place-items:center; gap:var(--sp-6); min-height:120px; border-radius:var(--radius-md, var(--radius-sm));
    background:color-mix(in srgb, var(--mut2) 14%, transparent); color:var(--mut); font-size:var(--fs-xs); }
  .cms-ap-image svg.ic{ width:28px; height:28px; } .cms-ap-absent{ height:auto; min-height:48px; padding:var(--sp-8); text-decoration:line-through; color:var(--warn); border-color:var(--warn); }
  .cms-ap-fil{ margin-bottom:var(--sp-8); font-size:var(--fs-xs); color:var(--mut); }
  .cms-ap-bloc{ height:72px; display:grid; place-items:center; border:1px dashed var(--line); border-radius:var(--radius-md, var(--radius-sm)); color:var(--mut2); font-size:var(--fs-xs); }
  /* M6 : l'état vide d'une vue, les poignées, les mesures (Alt), les guides de l'aimant, le lasso, le « + » d'insertion, la grille au zoom fort. */
  .cms-ap-vide.cms-ap-bloc{ height:auto; display:flex; flex-direction:column; align-items:center; gap:var(--sp-6); padding:var(--sp-24) var(--sp-16); text-align:center; } .cms-ap-vide-t{ margin:0; font-size:var(--fs-sm); font-weight:var(--fw-strong); color:var(--txt); } .cms-ap-vide .cms-ap-p{ margin:0; }
  .cms-ap-vide-actes{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-8); margin-top:var(--sp-6); } .cms-ap-vide .cms-ap-cta{ margin:0; border:0; font:inherit; cursor:pointer; } .cms-ap-vide :is(.cms-ap-cta, .cms-ap-vide-bt) svg.ic{ width:14px; height:14px; margin-inline-end:var(--sp-4); }
  .cms-ap-vide-bt{ display:inline-flex; align-items:center; padding:var(--sp-8) var(--sp-14); border:1px solid var(--line); border-radius:var(--radius-md, var(--radius-sm)); background:transparent; color:var(--txt); font:inherit; cursor:pointer; } .cms-ap-vide-bt:disabled{ opacity:.45; cursor:default; }
  .cms-poignee{ position:absolute; z-index:var(--cms-z-insertion); width:8px; height:8px; box-sizing:border-box; border:1.5px solid var(--cms-accent); border-radius:var(--radius-xs); background:var(--card); }
  .cms-poignee[data-cms-poignee="e"]{ top:calc(50% - 4px); right:-5px; cursor:ew-resize; } .cms-poignee[data-cms-poignee="s"]{ left:calc(50% - 4px); bottom:-5px; cursor:ns-resize; } .cms-poignee[data-cms-poignee="se"]{ right:-5px; bottom:-5px; cursor:nwse-resize; }
  .cms-poignee-val, .cms-ecart b{ position:absolute; z-index:var(--cms-z-insertion); padding:0 var(--sp-4); border-radius:var(--radius-xs); background:var(--cms-accent-plein); color:var(--on-solid); font-size:var(--fs-xs); font-weight:var(--fw-strong); white-space:nowrap; pointer-events:none; } .cms-poignee-val{ right:0; bottom:calc(100% + 4px); }
  .cms-ecarts{ position:absolute; inset:0; pointer-events:none; z-index:var(--cms-z-insertion); } .cms-ecart{ position:absolute; height:0; border-top:1px dashed var(--cms-accent); } .cms-ecart.v{ width:0; border-top:0; border-left:1px dashed var(--cms-accent); } .cms-ecart b{ left:50%; top:2px; transform:translateX(-50%); } .cms-ecart.v b{ top:50%; left:4px; transform:translateY(-50%); }
  .cms-guide{ position:absolute; left:0; right:0; height:0; border-top:1px solid var(--err); pointer-events:none; z-index:var(--cms-z-insertion); } .cms-guide.v{ top:0; bottom:0; right:auto; width:0; border-top:0; border-left:1px solid var(--err); }
  .cms-lasso{ position:absolute; z-index:var(--cms-z-insertion); border:1px solid var(--cms-accent); background:color-mix(in srgb, var(--cms-accent) 10%, transparent); pointer-events:none; } .cms-ap-composee .cms-ap-b.lasso::after{ border-color:var(--cms-accent); }
  .cms-ap-inserer{ position:absolute; z-index:var(--cms-z-insertion); display:grid; place-items:center; width:20px; height:20px; transform:translate(-50%, -50%); padding:0; border:0; border-radius:50%; background:var(--cms-accent-plein); color:var(--on-solid); box-shadow:var(--shadow-sm); cursor:pointer; } .cms-ap-inserer svg.ic{ width:12px; height:12px; }
  .cms-centre[data-grille] .cms-ap-corps{ background-image:linear-gradient(color-mix(in srgb, var(--cms-accent) 12%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--cms-accent) 12%, transparent) 1px, transparent 1px); background-size:4px 4px; }
  /* Le mode Live : la page se vit, sans cadre ni main d'édition ; les événements jouent (survol en :hover, lien). */
  .cms-apercu.live .cms-ap-composee .cms-ap-b::after{ display:none; } .cms-apercu.live .cms-ap-composee .cms-ap-b{ cursor:auto; }
  .cms-apercu.live .cms-ap-rendu{ pointer-events:auto; } .cms-apercu.live .cms-ap-groupe.vide{ border-color:transparent; }
  .cms-apercu.live .cms-ap-groupe-vide{ visibility:hidden; } .cms-apercu.live a.cms-ap-cta{ text-decoration:none; cursor:pointer; }
  .cms-apercu.live .cms-ap-composee .cms-ap-b.a-survol, .cms-apercu.live .cms-ap-composee .cms-ap-b.a-survol.a-bouton > .cms-ap-cta{
    transition:background-color var(--cms-dur-l) ease, color var(--cms-dur-l) ease, box-shadow var(--cms-dur-l) ease, transform var(--cms-dur-l) ease; }
  .cms-apercu.live .cms-ap-composee .cms-ap-b.a-survol:not(.a-bouton):hover, .cms-ap-composee .cms-ap-b.a-survol.etat-survol:not(.a-bouton){ background:var(--survol-fond, var(--bloc-fond, transparent));
    box-shadow:var(--survol-ombre, var(--bloc-ombre, none)); transform:scale(var(--survol-echelle, 1)); }
  :is(.cms-apercu.live .cms-ap-composee .cms-ap-b.a-survol:not(.a-bouton):hover, .cms-ap-composee .cms-ap-b.a-survol.etat-survol:not(.a-bouton)) :is(.cms-ap-h2, .cms-ap-long){ color:var(--survol-couleur, var(--bloc-couleur, var(--txt))); }
  .cms-apercu.live .cms-ap-composee .cms-ap-b.a-survol:not(.a-bouton):hover .cms-ap-p:not(.cms-ap-long){ color:var(--survol-couleur, var(--bloc-couleur, var(--mut))); }
  .cms-apercu.live .cms-ap-composee .cms-ap-b.a-survol.a-bouton:hover > .cms-ap-cta, .cms-ap-composee .cms-ap-b.a-survol.a-bouton.etat-survol > .cms-ap-cta{ background:var(--survol-fond, var(--bloc-fond, var(--color-primary, var(--accent))));
    color:var(--survol-couleur, var(--survol-encre, var(--bloc-couleur, var(--bloc-encre, var(--ap-encre, var(--on-solid))))));
    box-shadow:var(--survol-ombre, var(--bloc-ombre, none)); transform:scale(var(--survol-echelle, 1)); }

  /* ── 8. Le panneau droit ──────────────────────────────────────────────────────────────────────────────────────────
     La vue (nom, adresse, page, publication, blocs) ; ou l'inspecteur d'un bloc : retour, nom, onglets Contenu, Style,
     Code, Événements. Compact : --cms-h-c. */
  .cms-d-vide{ margin:0; font-size:var(--fs-sm); color:var(--mut); }
  .cms-d-dans{ font-size:var(--fs-sm); color:var(--txt); } .cms-d-dans code{ font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--mut); }
  .cms-d-reflexe{ line-height:var(--lh-normal); }
  .cms-d-retour{ display:inline-flex; align-items:center; gap:var(--sp-4); max-width:100%; height:var(--cms-h-c); margin:0 0 var(--sp-12); padding:0 var(--sp-8) 0 var(--sp-4);
    border:0; border-radius:var(--radius-xs); background:transparent; color:var(--mut); font:inherit; font-size:var(--fs-sm); cursor:pointer; }
  .cms-d-retour:hover{ background:var(--line2); color:var(--txt); } .cms-d-retour svg.ic{ width:14px; height:14px; flex:none; }
  .cms-d-retour span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* M5 : l'en-tête compact (icône, nom renommable, moteur), les gestes en icônes, les onglets segmentés sans troncature. */
  .cms-insp-tete{ display:flex; align-items:center; gap:var(--sp-8); } .cms-insp-noms{ min-width:0; flex:1; }
  .cms-inspecteur .cms-d-titre{ margin:0; font-size:var(--fs-base, var(--fs-sm)); }
  .cms-insp-nom{ display:block; max-width:100%; padding:0 var(--sp-4); margin-inline-start:calc(-1 * var(--sp-4)); border:0; border-radius:var(--radius-xs); background:transparent; color:var(--txt);
    font:inherit; font-weight:var(--fw-strong); text-align:start; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:text; } .cms-insp-nom:hover{ background:var(--line2); }
  .cms-insp-moteur{ margin:0; font-size:var(--fs-xs); color:var(--mut); }
  .cms-insp-actes{ display:flex; align-items:center; gap:var(--sp-2); margin:var(--sp-10) 0 0; padding:var(--sp-4) 0; border-block:1px solid var(--line2); }
  .cms-insp-bt{ display:grid; place-items:center; flex:none; width:var(--cms-h-c); height:var(--cms-h-c); padding:0; border:0; border-radius:var(--radius-xs); background:transparent; color:var(--mut); cursor:pointer; }
  .cms-insp-bt:hover:not(:disabled){ background:var(--line2); color:var(--txt); } .cms-insp-bt.danger:hover:not(:disabled){ color:var(--err); } .cms-insp-bt:disabled{ opacity:.35; cursor:default; } .cms-insp-bt svg.ic{ width:15px; height:15px; }
  .cms-insp-espace{ flex:1; } .cms-insp-filet{ width:1px; height:16px; margin:0 var(--sp-2); background:var(--line); }
  .cms-insp-onglets{ display:flex; align-self:stretch; width:100%; box-sizing:border-box; margin:var(--sp-12) 0 var(--sp-4); }
  .cms-insp-onglets .cms-seg-bt{ flex:1 1 auto; min-width:max-content; padding:0 var(--sp-4); font-size:var(--fs-xs); font-weight:var(--fw-label); white-space:nowrap; }
  .cms-insp-contenu{ margin-top:var(--sp-12); padding:var(--sp-12) 0; border-top:1px solid var(--line); }
  .cms-bloc-reglages{ margin-top:var(--sp-12); padding:var(--sp-12); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); }
  .cms-bloc-reglages textarea{ background:var(--card); }
  .cms-inspecteur .cms-bloc-reglages{ margin-top:var(--sp-12); padding:0; border:0; background:transparent; } .cms-inspecteur .cms-insp-contenu .cms-bloc-reglages{ margin-top:0; }
  .cms-danger .cms-d-sous{ color:var(--err); } .cms-d-ligne{ flex-direction:row; flex-wrap:wrap; margin-top:var(--sp-10); padding-top:0; border-top:0; }
  /* Le Style, rangé comme le panneau de Figma : une section par titre, les petites listes deux par ligne. */
  .cms-inspecteur .cms-style{ margin-top:0; border-top:1px solid var(--line); }
  .cms-style .cms-bloc-style-sec{ padding:var(--sp-10) 0; border-top:1px solid var(--line); } .cms-style .cms-bloc-style-sec:first-child{ border-top:0; } .cms-style .cms-bloc-style-sec.replie{ padding-bottom:var(--sp-4); }
  .cms-sec-ligne{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6); margin-bottom:var(--sp-6); } .cms-sec-ligne .cms-bloc-r-titre{ margin:0; }
  .cms-sec-pli{ display:inline-flex; align-items:center; gap:var(--sp-4); padding:0; border:0; background:transparent; color:inherit; font:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer; } .cms-sec-pli svg.ic{ width:12px; height:12px; color:var(--mut2); }
  .cms-rupture{ display:flex; align-items:flex-start; gap:var(--sp-6); margin:0 0 var(--sp-8); padding:var(--sp-6) var(--sp-8); border-radius:var(--radius-sm); background:color-mix(in srgb, var(--cms-accent) 12%, transparent); color:var(--txt); font-size:var(--fs-xs); line-height:var(--lh-normal); } .cms-rupture svg.ic{ width:14px; height:14px; flex:none; color:var(--cms-accent-texte); }
  .cms-style-case.surcharge{ position:relative; } .cms-surcharge{ position:absolute; top:var(--sp-2); right:0; width:16px; height:16px; padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer; } .cms-surcharge::before{ content:''; display:block; width:7px; height:7px; margin:auto; border-radius:50%; background:var(--cms-accent); } .cms-surcharge:hover::before{ background:var(--err); }
  .cms-mixte{ display:inline-block; margin-bottom:var(--sp-2); padding:0 var(--sp-6); border-radius:var(--radius-pill); background:var(--line2); color:var(--mut); font-size:var(--fs-xs); font-weight:var(--fw-strong); }
  .cms-style-grille{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); }
  .cms-style-case .cms-bascule{ display:flex; flex-wrap:wrap; max-width:100%; box-sizing:border-box; } .cms-style-case .cms-bascule-bt{ flex:1 1 auto; min-width:0; padding:0 var(--sp-6); font-size:var(--fs-xs); }   /* M5 : cinq libellés tiennent dans 300 px */
  .cms-style-case{ min-width:0; } .cms-style-case.plein{ grid-column:1 / -1; } .cms-style-case .cms-champ{ margin:0; } .cms-style-pied{ padding-top:var(--sp-12); border-top:1px solid var(--line); }
  .cms-design-champ label{ display:block; } .cms-design-champ label > span{ font-size:var(--fs-xs); font-weight:var(--fw-strong); color:var(--mut); }
  .cms-design-champ label.cms-bool{ display:flex; align-items:center; gap:var(--sp-8); margin:0; }   /* une case reste une ligne */
  .cms-design-champ label.cms-bool > span{ font-size:var(--fs-sm); font-weight:var(--fw-regular); color:var(--txt); }
  /* Une mesure : les mots et « Fixe » en bascule, puis curseur, nombre et unité. */
  .cms-mesure{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-8); } .cms-mesure-saisie{ display:flex; align-items:center; gap:var(--sp-8); width:100%; }
  .cms-mesure-saisie input[type="range"]{ flex:1; min-width:0; margin:0; accent-color:var(--cms-accent); }
  .cms-mesure-saisie input[type="number"]{ flex:none; width:76px; padding:0 var(--sp-6); font-variant-numeric:tabular-nums; } .cms-mesure-saisie select{ flex:none; width:68px; }
  .cms-mesure-u{ flex:none; color:var(--mut); font-size:var(--fs-sm); }
  /* Les pastilles de couleur (28 px), le choisi cerné ; « aucune » barrée ; la libre porte le sélecteur et le code. */
  .cms-pastilles{ display:flex; flex-wrap:wrap; gap:var(--sp-8); }
  .cms-pastille{ width:var(--cms-h-c); height:var(--cms-h-c); padding:0; border:1px solid color-mix(in srgb, var(--txt) 22%, transparent); border-radius:var(--radius-pill);
    background:var(--pastille, var(--card)); cursor:pointer; }
  .cms-pastille.on{ outline:2px solid var(--cms-accent); outline-offset:2px; }
  .cms-pastille:focus-visible, .cms-pastille.libre:focus-within{ outline:2px solid var(--focus-anneau); outline-offset:2px; }
  .cms-pastille.libre{ position:relative; display:inline-grid; place-items:center; color:var(--mut); overflow:hidden; box-sizing:border-box; }
  .cms-pastille.libre svg.ic{ width:14px; height:14px; pointer-events:none; }
  .cms-pastille-pipette{ position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; opacity:0; cursor:pointer; }
  .cms-pastille.aucune{ background:linear-gradient(to top right, transparent calc(50% - 1px), var(--mut) calc(50% - 1px), var(--mut) calc(50% + 1px), transparent calc(50% + 1px)), var(--card); }
  .cms-pastilles .cms-hex{ width:84px; height:var(--cms-h-c); box-sizing:border-box; margin-inline-start:var(--sp-4); padding:0 var(--sp-8); border:1px solid var(--line); border-radius:var(--radius-sm);
    background:var(--bg); color:var(--txt); font-family:var(--font-mono); font-size:var(--fs-xs); align-self:center; }
  .cms-pastilles .cms-hex:focus{ outline:none; border-color:var(--cms-accent); }
  /* La grille d'alignement : neuf points, le choisi en trait d'accent. */
  .cms-grille{ display:grid; grid-template-columns:repeat(3, 28px); grid-template-rows:repeat(3, 24px); width:max-content; padding:var(--sp-4);
    border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); }
  .cms-grille-pt{ display:grid; place-items:center; padding:0; border:0; border-radius:var(--radius-xs); background:transparent; cursor:pointer; }
  .cms-grille-pt i{ width:4px; height:4px; border-radius:var(--radius-pill); background:color-mix(in srgb, var(--txt) 35%, transparent); } .cms-grille-pt:hover{ background:var(--line2); }
  .cms-grille-pt:hover i{ background:var(--txt); } .cms-grille-pt.on i{ width:14px; background:var(--cms-accent); }
  .cms-grille-pt:focus-visible{ outline:2px solid var(--focus-anneau); outline-offset:-1px; }
  /* Les côtés d'un espace, comme dans Figma : des champs à icône sur deux colonnes, le bouton des côtés à droite. */
  .cms-cotes{ display:flex; align-items:flex-start; gap:var(--sp-6); } .cms-cotes-champs{ flex:1; display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6); min-width:0; }
  .cms-droite label.cms-cote{ display:flex; align-items:center; gap:var(--sp-2); height:var(--cms-h-c); box-sizing:border-box; margin:0; padding:0 var(--sp-6) 0 var(--sp-2);
    border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); }
  .cms-droite label.cms-cote > span{ font-size:inherit; font-weight:inherit; } .cms-cote:focus-within{ border-color:var(--cms-accent-texte); box-shadow:0 0 0 1px var(--cms-accent-texte) inset; }
  .cms-droite .cms-cote input[type="number"]{ flex:1; min-width:0; width:100%; height:24px; padding:0; border:0; background:transparent; box-shadow:none; color:var(--txt);
    font:inherit; font-size:var(--fs-sm); font-variant-numeric:tabular-nums; }
  .cms-droite .cms-cote input[type="number"]:focus{ outline:none; box-shadow:none; }
  body.cms-glisse-cote, body.cms-glisse-cote *{ cursor:ew-resize; user-select:none; }
  /* Le nom d'un bloc (Calques), ses boutons d'action, le contenu d'un groupe. */
  .cms-bloc-nom{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cms-bloc-absent{ color:var(--warn); font-size:var(--fs-xs); font-weight:var(--fw-strong); } .cms-bloc-actes{ display:flex; gap:var(--sp-2); flex:none; }
  .cms-bloc-bt{ display:grid; place-items:center; width:var(--cms-h-c); height:var(--cms-h-c); padding:0; border:0; border-radius:var(--radius-xs); background:transparent; color:var(--mut); cursor:pointer; }
  .cms-bloc-bt:hover:not(:disabled){ background:var(--line2); color:var(--txt); } .cms-bloc-bt.danger:hover:not(:disabled){ color:var(--err); }
  .cms-bloc-bt:disabled{ opacity:.35; cursor:default; } .cms-bloc-bt svg.ic{ width:14px; height:14px; }
  .cms-multi-liste{ margin:var(--sp-8) 0 var(--sp-12); padding-inline-start:var(--sp-16); color:var(--txt); font-size:var(--fs-sm); }
  .cms-groupe-enfants{ list-style:none; margin:0 0 var(--sp-10); padding:0; display:flex; flex-direction:column; gap:var(--sp-2); }
  .cms-groupe-enfant{ display:flex; align-items:center; gap:var(--sp-6); width:100%; min-height:var(--cms-h-c); box-sizing:border-box; padding:0 var(--sp-8); border:1px solid var(--line);
    border-radius:var(--radius-sm); background:var(--bg); color:var(--txt); font:inherit; font-size:var(--fs-sm); text-align:start; cursor:pointer; }
  .cms-groupe-enfant:hover{ border-color:var(--cms-accent-texte); } .cms-groupe-enfant.groupe{ font-weight:var(--fw-strong); }
  .cms-groupe-enfant svg.ic{ width:14px; height:14px; color:var(--mut2); flex:none; }
  /* La bande d'une copie de composant. */
  .cms-composant-bande{ margin:var(--sp-8) 0 var(--sp-4); padding:var(--sp-8) var(--sp-10); border:1px solid color-mix(in srgb, var(--cms-accent) 35%, var(--line));
    border-radius:var(--radius); background:color-mix(in srgb, var(--cms-accent) 6%, var(--card)); }
  /* M13 : la pastille du contrôle du plan (barre de la fenêtre) et sa liste. */
  .cms-qualite{ display:inline-flex; align-items:center; gap:var(--sp-4); height:var(--cms-h-c); margin-inline-start:var(--sp-8); padding:0 var(--sp-8); border:1px solid color-mix(in srgb, var(--warn) 50%, var(--line)); border-radius:var(--radius-pill); background:color-mix(in srgb, var(--warn) 12%, transparent); color:var(--txt); font:inherit; font-size:var(--fs-xs); cursor:pointer; } .cms-qualite.ok{ border-color:var(--line); background:transparent; color:var(--mut); } .cms-qualite svg.ic{ width:13px; height:13px; }
  .cms-qualite-liste{ position:absolute; top:var(--sp-8); right:var(--sp-8); z-index:var(--cms-z-menu); width:min(440px, calc(100% - 32px)); max-height:60vh; overflow:auto; padding:var(--sp-8); border:1px solid var(--line); border-radius:var(--radius); background:var(--card); box-shadow:var(--cms-ombre-menu); } .cms-qualite-liste ul{ list-style:none; margin:0; padding:0; } .cms-qualite-l{ display:block; width:100%; padding:var(--sp-6) var(--sp-8); border:0; border-radius:var(--radius-sm); background:transparent; color:var(--txt); font:inherit; font-size:var(--fs-sm); text-align:start; cursor:pointer; } .cms-qualite-l:hover{ background:var(--line2); }
  /* M12 : l'apparition en Play (les images clés de la page publiée, m14r.css), un bloc masqué par un événement, la pastille des événements. */
  @media (prefers-reduced-motion:no-preference){ .cms-apercu.live .cms-ap-composee .cms-ap-b{ animation:var(--apparition, none) var(--apparition-duree, var(--cms-dur-l)) ease-out both; } @supports (animation-timeline: view()){ .cms-apercu.live .cms-ap-composee .cms-ap-b{ animation-timeline:view(); animation-range:entry 0% cover 25%; } } }
  @keyframes ap-fondu{ from{ opacity:0; } } @keyframes ap-glisse-haut{ from{ opacity:0; transform:translateY(24px); } } @keyframes ap-glisse-gauche{ from{ opacity:0; transform:translateX(32px); } } @keyframes ap-zoom{ from{ opacity:0; transform:scale(.92); } }
  .cms-ap-composee .cms-ap-b[hidden]{ display:none; } .cms-ap-composee .cms-ap-b[data-a-ev]::before{ content:''; position:absolute; top:var(--sp-4); right:var(--sp-4); z-index:var(--cms-z-insertion); width:7px; height:7px; border-radius:50%; background:var(--warn); pointer-events:none; } .cms-calque-ev{ display:flex; color:var(--warn); } .cms-calque-ev svg.ic{ width:12px; height:12px; }
  .cms-style-partage{ margin-bottom:var(--sp-8); padding-bottom:var(--sp-8); border-bottom:1px solid var(--line2); } .cms-style-ligne{ display:flex; align-items:center; gap:var(--sp-2); } .cms-style-ligne > .cms-sommaire-l{ flex:1; min-width:0; } .cms-styles-liste{ margin-top:var(--sp-16); } .cms-g-sous{ margin:0 0 var(--sp-6); font-size:var(--fs-xs); font-weight:var(--fw-strong); color:var(--txt); } .cms-style-partage-nom{ display:inline-flex; align-items:center; gap:var(--sp-4); flex:1; min-width:0; font-size:var(--fs-sm); font-weight:var(--fw-strong); }   /* M11 ; la librairie sous les Composants, le bandeau du bloc (2026-10-14) */ .cms-sommaire-l.inactif{ opacity:.55; } .cms-sommaire-l.orphelin > .cms-sommaire-n{ color:var(--err); }   /* S3 : un script inactif, un orphelin */
  .cms-composant-bande.edition{ border-color:var(--cms-accent-texte); } .cms-composant-mode{ margin:var(--sp-6) 0 0; font-size:var(--fs-xs); color:var(--mut); } .cms-composant-expo{ margin-top:var(--sp-6); font-size:var(--fs-sm); } .cms-composant-expo summary{ cursor:pointer; color:var(--mut); font-size:var(--fs-xs); }   /* M10, compacté le 2026-10-15 */
  .cms-composant-tete{ display:flex; align-items:center; gap:var(--sp-4); color:var(--cms-accent-texte); font-weight:var(--fw-strong); font-size:var(--fs-sm); } .cms-composant-actes{ display:inline-flex; gap:0; margin-inline-start:var(--sp-2); } :is(.cms-composant-actes, .cms-composant-ligne) > .cms-insp-bt{ width:24px; height:24px; } :is(.cms-composant-actes, .cms-composant-ligne) > .cms-insp-bt:hover{ background:var(--cms-champ); color:var(--txt); }
  .cms-composant-tete svg.ic{ width:14px; height:14px; flex:none; } .cms-composant-nom{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cms-composant-ligne{ display:flex; align-items:center; gap:var(--sp-4); margin-top:var(--sp-6); } .cms-composant-ligne > .cms-composant-variante{ flex:1; min-width:0; margin:0; }
  .cms-composant-n{ margin-inline-start:auto; color:var(--mut); font-size:var(--fs-xs); font-weight:var(--fw-label); white-space:nowrap; }
  .cms-composant-bande .cms-d-note{ margin:var(--sp-4) 0 0; } .cms-composant-ecart{ display:flex; align-items:center; gap:var(--sp-6); margin-top:var(--sp-8); padding-top:var(--sp-6); border-top:1px solid var(--line2); font-size:var(--fs-xs); color:var(--mut); } .cms-composant-ecart{ flex-wrap:wrap; } .cms-composant-ecart > span{ flex:1 0 100%; }
  /* Le code CSS d'un bloc, comme un éditeur de code : fond sombre dans les deux thèmes (--code-*), la saisie transparente
     sur sa copie colorée ; mêmes police, retrait et pas. Sélecteurs appuyés (.cms-css-boite textarea.cms-css) : les règles
     des textarea du panneau posaient un fond opaque, le code coloré disparaissait dessous. */
  .cms-css-boite{ position:relative; border:1px solid var(--code-bord); border-radius:var(--radius-sm); background:var(--code-bg); transition:border-color var(--cms-dur) ease, box-shadow var(--cms-dur) ease; }
  .cms-css-boite:focus-within{ border-color:var(--cms-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--cms-accent) 22%, transparent); }
  .cms-css-boite .cms-css-coul, .cms-css-boite textarea.cms-css, .cms-css-fantome, .cms-css-sug{ font-family:var(--font-mono); font-size:var(--fs-xs); line-height:1.55; }
  .cms-css-boite .cms-css-coul, .cms-css-boite textarea.cms-css{ margin:0; box-sizing:border-box; padding:var(--sp-10) var(--sp-12); border:0; letter-spacing:0; tab-size:2;
    white-space:pre; word-wrap:normal; overflow-wrap:normal; }
  .cms-css-boite .cms-css-coul{ position:absolute; inset:0; overflow:hidden; pointer-events:none; color:var(--code-fg); background:transparent; }
  .cms-css-coul code{ display:block; font:inherit; color:inherit; background:none; padding:0; }
  .cms-css-boite textarea.cms-css{ position:relative; display:block; width:100%; min-height:120px; border-radius:var(--radius-sm); resize:vertical; overflow:auto; background:transparent;
    color:transparent; -webkit-text-fill-color:transparent; caret-color:var(--code-curseur); scrollbar-width:thin; scrollbar-color:var(--code-bord) transparent; }
  .cms-css-boite textarea.cms-css:focus{ outline:none; border-color:transparent; }
  .cms-css::placeholder{ color:var(--code-com); -webkit-text-fill-color:var(--code-com); } .cms-css::selection{ background:color-mix(in srgb, var(--code-prop) 30%, transparent); }
  .cms-css.sur-couleur{ cursor:pointer; } .cms-css-champ .cms-d-note{ display:block; margin-top:var(--sp-6); }
  .cms-c-prop{ color:var(--code-prop); } .cms-c-num{ color:var(--code-num); } .cms-c-fn{ color:var(--code-fn); } .cms-c-var{ color:var(--code-var); }
  .cms-c-mot, .cms-c-chaine{ color:var(--code-mot); } .cms-c-imp{ color:var(--code-imp); } .cms-c-ponct{ color:var(--code-ponct); } .cms-c-com{ color:var(--code-com); }   /* ni gras ni italique : le pas exact */
  .cms-c-faute{ color:var(--code-fg); text-decoration:underline wavy var(--code-faute); text-underline-offset:3px; }
  .cms-c-couleur.lue{ background:var(--teinte); box-shadow:0 0 0 2px var(--teinte); border-radius:var(--radius-xs); color:var(--code-curseur); }   /* l'ombre, pas un retrait : le pas reste */
  .cms-c-couleur.lue.claire{ color:var(--code-bg); } .cms-c-couleur.lue *{ color:inherit; } .cms-c-couleur.lue.survol{ box-shadow:0 0 0 2px var(--teinte), 0 0 0 3px var(--code-curseur); }
  .cms-css-pipette{ position:absolute; width:1px; height:1px; padding:0; border:0; opacity:0; pointer-events:none; }
  .cms-css-fantome{ position:absolute; z-index:var(--cms-z-fantome-texte); pointer-events:none; white-space:pre; color:var(--code-com); }
  .cms-css-sug{ position:absolute; z-index:var(--cms-z-sug); min-width:170px; max-width:calc(100% - 8px); margin:0; padding:var(--sp-4); list-style:none;
    border:1px solid var(--code-bord); border-radius:var(--radius-sm); background:var(--code-ligne); box-shadow:var(--cms-ombre-menu); color:var(--code-fg); }
  .cms-css-sug li{ padding:3px var(--sp-8); border-radius:var(--radius-xs); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
  .cms-css-sug li b{ color:var(--code-prop); font-weight:inherit; } .cms-css-sug li:is(.on, :hover){ background:color-mix(in srgb, var(--code-prop) 20%, transparent); color:var(--code-curseur); }
  /* Les événements : une carte par événement (déclencheur, action, champs). */
  .cms-evs{ display:flex; flex-direction:column; gap:var(--sp-10); margin-bottom:var(--sp-10); } .cms-ev{ padding:var(--sp-10); } .cms-ev-tete{ display:flex; align-items:center; gap:var(--sp-8); }
  .cms-ev-num{ display:grid; place-items:center; width:22px; height:22px; flex:none; border-radius:var(--radius-pill); background:color-mix(in srgb, var(--cms-accent) 14%, transparent);
    color:var(--cms-accent-texte); font-size:var(--fs-xs); font-weight:var(--fw-strong); }
  .cms-ev-quand{ flex:1 1 auto; min-width:0; }
  .cms-ev-quand select, .cms-ev-action select{ width:100%; height:var(--cms-h-c); padding:0 var(--sp-8); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card);
    color:var(--txt); font:inherit; font-size:var(--fs-sm); }
  .cms-ev-action{ margin-top:var(--sp-8); } .cms-ev-champs{ margin-top:var(--sp-4); }
  .cms-ev-real{ margin:var(--sp-6) 0 0; font-size:var(--fs-xs); color:var(--mut); } .cms-ev-aucune{ margin:var(--sp-8) 0 0; }
  /* La publication d'une vue (K16). */
  .cms-publication-etat{ display:flex; align-items:center; gap:var(--sp-6); margin:var(--sp-4) 0 var(--sp-6); font-size:var(--fs-sm); color:var(--mut); }
  .cms-publication-etat.on{ color:var(--ok); font-weight:var(--fw-strong); } .cms-publication-etat svg.ic{ width:14px; height:14px; }
  .cms-droite .cms-moteur-refus{ margin:var(--sp-8) 0 0; color:var(--err); font-size:var(--fs-sm); font-weight:var(--fw-strong); line-height:var(--lh-normal); }   /* un retrait refusé */

  /* ── 9. Paramètres de la solution ─────────────────────────────────────────────────────────────────────────────── */
  .cms-sec-tete h2{ margin:0 0 var(--sp-4); font-size:var(--fs-lg); font-weight:var(--fw-strong); }
  .cms-sec-tete p{ margin:0 0 var(--sp-14); color:var(--mut); max-width:60ch; line-height:var(--lh-normal); }
  .cms-ecrans, .cms-livrables, .cms-moteurs{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:var(--sp-10); }
  .cms-ecran, .cms-inst{ display:flex; align-items:flex-start; gap:var(--sp-10); padding:var(--sp-12); text-align:start; } .cms-ecran{ min-height:88px; cursor:pointer; }
  .cms-ecran-ic{ display:flex; flex:none; width:var(--cms-h); height:var(--cms-h); align-items:center; justify-content:center; border-radius:var(--radius-sm); background:var(--card2); color:var(--cms-accent-texte); }
  .cms-ecran-ic svg.ic{ width:16px; height:16px; } .cms-ecran-corps{ display:flex; flex-direction:column; gap:var(--sp-2); min-width:0; padding-inline-end:var(--sp-8); }
  .cms-ecran-nom{ font-weight:var(--fw-strong); } .cms-ecran-desc{ font-size:var(--fs-sm); color:var(--mut); line-height:var(--lh-normal); }
  .cms-ecran-meta{ margin-top:var(--sp-4); font-size:var(--fs-xs); color:var(--mut); } .cms-ecran-meta code{ font-family:var(--font-mono); color:var(--txt); }
  .cms-ecran-socle, .cms-inst-type{ padding:1px var(--sp-6); border:1px solid var(--line2); border-radius:var(--radius-pill); font-size:var(--fs-2xs); color:var(--mut); }
  .cms-ecran-socle{ align-self:flex-start; margin-top:var(--sp-6); }
  .cms-ecran-ajouter{ align-items:center; justify-content:center; gap:var(--sp-6); border-style:dashed; color:var(--mut); font-weight:var(--fw-strong); }
  .cms-ecran-ajouter svg.ic{ width:15px; height:15px; } .cms-ecran-ajouter:hover{ color:var(--cms-accent-texte); border-color:var(--cms-accent-texte); }
  .cms-ecran-livr{ margin-top:var(--sp-4); font-size:var(--fs-xs); color:var(--warn); }
  /* Livrables : des cartes à cocher ; cochée, la carte dit qui fabrique le livrable (K6). */
  .cms-livrable{ display:flex; align-items:center; gap:var(--sp-10); width:100%; min-height:var(--cms-h); padding:var(--sp-10) var(--sp-12); text-align:start; font-size:var(--fs-sm); cursor:pointer; }
  .cms-livrable-coche{ display:flex; flex:none; width:18px; height:18px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:var(--radius-xs); background:var(--bg); color:var(--on-solid); }
  .cms-livrable.on .cms-livrable-coche{ background:var(--cms-accent-plein); border-color:var(--cms-accent-plein); } .cms-livrable-coche svg.ic{ width:12px; height:12px; }
  .cms-livrable-ic{ display:flex; flex:none; color:var(--mut2); } .cms-livrable-ic svg.ic{ width:16px; height:16px; }
  .cms-livrable.on .cms-livrable-ic{ color:var(--cms-accent-texte); } .cms-livrable-nom{ min-width:0; } .cms-livrable-carte{ display:flex; flex-direction:column; gap:var(--sp-6); }
  .cms-livrable-etat{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-6); padding:0 var(--sp-4); font-size:var(--fs-xs); color:var(--mut); }
  .cms-livrable-etat[data-etat="fabrique"]{ color:var(--ok); font-weight:var(--fw-strong); } .cms-livrable-etat svg.ic{ width:13px; height:13px; }
  /* Installation : des cartes en lecture, une pastille d'état ; la dernière mise en ligne, ses liens (rien ne se déploie d'ici, N25). */
  .cms-inst{ min-height:80px; } .cms-inst-tete{ display:flex; align-items:baseline; gap:var(--sp-6); flex-wrap:wrap; }
  .cms-inst .cms-ecran-meta::before{ content:''; display:inline-block; width:7px; height:7px; margin-inline-end:var(--sp-6); vertical-align:middle; border-radius:var(--radius-pill); background:var(--mut2); }
  .cms-inst[data-teinte="ok"] .cms-ecran-meta::before{ background:var(--ok); } .cms-inst[data-teinte="actif"] .cms-ecran-meta::before{ background:var(--info); }
  .cms-inst[data-teinte="attention"] .cms-ecran-meta::before{ background:var(--warn); } .cms-inst[data-teinte="erreur"] .cms-ecran-meta::before{ background:var(--err); }
  .cms-inst-mel{ display:block; margin-top:var(--sp-6); font-size:var(--fs-xs); color:var(--mut); } .cms-inst-mel[data-resultat="ok"]{ color:var(--ok); }
  .cms-inst-mel[data-resultat="ko"]{ color:var(--err); font-weight:var(--fw-strong); }
  .cms-inst-actes{ display:flex; flex-wrap:wrap; gap:var(--sp-6); margin-top:var(--sp-8); } .cms-inst-actes .btn svg.ic{ width:13px; height:13px; }
  /* Moteurs : la recherche, le filtre (une bascule, D3), les cartes du catalogue ; un retouché se voit (K8). */
  .cms-moteurs-barre{ display:flex; align-items:center; gap:var(--sp-10); margin-bottom:var(--sp-12); }
  .cms-moteurs-barre input{ flex:1; min-width:0; max-width:360px; height:var(--cms-h); box-sizing:border-box; padding:0 var(--sp-10); border:1px solid var(--line); border-radius:var(--radius-sm);
    background:var(--card); color:var(--txt); font:inherit; font-size:var(--fs-sm); }
  .cms-moteurs-n{ font-size:var(--fs-xs); color:var(--mut); } .cms-moteurs-filtre{ margin-inline-start:auto; }
  .cms-moteur{ display:flex; flex-direction:column; align-items:stretch; gap:var(--sp-4); padding:var(--sp-10) var(--sp-12); text-align:start; cursor:pointer; }
  .cms-moteur-tete{ display:flex; align-items:baseline; gap:var(--sp-6); flex-wrap:wrap; } .cms-moteur-nom{ font-weight:var(--fw-strong); }
  .cms-moteur-id{ font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--mut); } .cms-moteur-version{ margin-inline-start:auto; font-size:var(--fs-xs); color:var(--mut2); }
  .cms-moteur-tagline{ font-size:var(--fs-sm); color:var(--mut); line-height:var(--lh-normal); }
  .cms-moteur-pose{ display:inline-flex; align-items:center; gap:var(--sp-4); font-size:var(--fs-xs); font-weight:var(--fw-strong); color:var(--ok); }
  .cms-moteur-pose svg.ic{ width:13px; height:13px; } .cms-moteur .cms-moteur-pose{ margin-top:var(--sp-4); }
  .cms-moteur-sync:is([data-etat="retouche"], [data-etat="non_jugeable"]){ color:var(--warn); font-weight:var(--fw-strong); }

  /* ── 10. Design ───────────────────────────────────────────────────────────────────────────────────────────────── */
  .cms-design-secs{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:var(--sp-12); }
  .cms-design-sec{ padding:var(--sp-14); } .cms-design-sec h3{ margin:0 0 var(--sp-10); font-size:var(--fs-md); font-weight:var(--fw-strong); }
  .cms-design-sa{ color:var(--mut); } .cms-couleur{ display:flex; align-items:center; gap:var(--sp-8); }
  .cms-couleur input[type="color"]{ flex:none; width:var(--cms-h); height:var(--cms-h); box-sizing:border-box; padding:var(--sp-2); border:1px solid var(--line); border-radius:var(--radius-sm);
    background:var(--bg); cursor:pointer; }   /* la pipette : hors de la règle de largeur des champs, qui écrasait le code hexadécimal */
  .cms-couleur input[type="text"]{ flex:1; min-width:0; font-family:var(--font-mono); }
  .cms-vdesign-liste{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-6); } .cms-vdesign-l{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) minmax(0,1fr) auto; align-items:center; gap:var(--sp-6); } .cms-vdesign-l code{ color:var(--mut); font-size:var(--fs-xs); } .cms-vdesign-l .cms-design-refus{ grid-column:1 / -1; } .cms-vdesign-pastille{ flex:none; width:14px; height:14px; border-radius:50%; border:1px solid var(--line); }   /* I3 (STY5) : la liste des variables de design */
  .cms-harmonies{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-4); font-size:var(--fs-xs); color:var(--txt); }
  .cms-harmonies code{ font-family:var(--font-mono); }
  .cms-mini{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-6); padding:var(--sp-12); font-family:var(--fontes-sans, inherit); }
  .cms-mini-marque{ font-size:var(--fs-xs); font-weight:var(--fw-strong); color:var(--mut); font-family:var(--fontes-titres, var(--fontes-sans, inherit)); }
  .cms-mini-titre{ font-size:var(--fs-lg); font-weight:var(--fw-strong); font-family:var(--fontes-titres, var(--fontes-sans, inherit)); }
  .cms-mini-texte{ font-size:var(--fs-sm); color:var(--mut); } .cms-mini .cms-ap-cta{ margin:var(--sp-4) 0 0; }
  /* La relecture des feuilles de la création (K11). */
  .cms-relecture-barre{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-10); flex-wrap:wrap; }
  .cms-relecture-resume{ font-size:var(--fs-sm); color:var(--ok); font-weight:var(--fw-strong); } .cms-relecture-resume.ko{ color:var(--err); }
  .cms-relecture-liste{ list-style:none; margin:var(--sp-12) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--sp-6); }
  .cms-relecture-ecart{ display:flex; flex-direction:column; gap:var(--sp-4); padding:var(--sp-8) var(--sp-12); border:1px solid var(--line); border-inline-start:3px solid var(--warn);
    border-radius:var(--radius-sm); background:var(--card); font-size:var(--fs-sm); }
  .cms-relecture-ecart[data-severite="erreur"]{ border-inline-start-color:var(--err); }
  .cms-relecture-tete{ display:flex; gap:var(--sp-8); flex-wrap:wrap; align-items:baseline; } .cms-relecture-ou{ color:var(--mut); font-size:var(--fs-xs); }
  .cms-relecture-extrait{ font-size:var(--fs-xs); color:var(--txt); overflow-wrap:anywhere; } .cms-relecture-conseil{ font-size:var(--fs-xs); color:var(--mut); }

  /* ── 11. États vides, transitions, la fiche ───────────────────────────────────────────────────────────────────── */
  .cms-vide{ margin:auto; max-width:420px; text-align:center; color:var(--mut); } .cms-vide h2{ margin:0 0 var(--sp-4); color:var(--txt); font-size:var(--fs-lg); } .cms-vide p{ margin:0 0 var(--sp-4); }
  .cms-vide-ic{ display:flex; justify-content:center; margin-bottom:var(--sp-10); color:var(--mut2); } .cms-vide-ic svg.ic{ width:28px; height:28px; }
  /* Les effets de survol et de choix glissent (proprio, 2026-10-13 : « une impression de réactivité ») ; le dessin de
     l'aperçu n'en a pas (ses couleurs suivent le Design sans délai, K13), sauf le cadre. Rien si le poste demande moins
     d'animations. */
  @media (prefers-reduced-motion:no-preference){
    :is(.cms-onglet, .cms-d-retour, .cms-bascule-bt, .cms-groupe-enfant, .cms-ap-groupe-vide, .cms-pastille, .cms-grille-pt, .cms-cote, .cms-sommaire-l,
      .cms-vue, .cms-ap-app, .cms-ecran, .cms-livrable, .cms-livrable-coche, .cms-palette-bloc, .cms-bloc-ligne, .cms-bloc-bt, .cms-calque-bt, .cms-moteur, .cms-ap-composee .cms-ap-b,
      .cms-coche input, .cms-barre-bt){ transition:background-color var(--cms-dur, var(--dur-1)) ease, border-color var(--cms-dur, var(--dur-1)) ease, color var(--cms-dur, var(--dur-1)) ease, box-shadow var(--cms-dur, var(--dur-1)) ease, filter var(--cms-dur, var(--dur-1)) ease; }   /* les onglets vivent hors de .cms (barre de l'app) : le repli */
    #cms :is(.btn, .cms-champ input, .cms-champ select, .cms-champ textarea, .cms-bloc-reglages textarea){ transition:background-color var(--cms-dur) ease, border-color var(--cms-dur) ease, outline-color var(--cms-dur) ease; }
  }
  /* Le bouton de la fiche, sous « Vue d'ensemble » (12-studio.js) : pas un onglet, une fenêtre ; il se distingue par son cadre. */
  .studio-body .snav .sni-atelier svg.ic{ color:var(--accent); }   /* 2026-10-16 : les ateliers du groupe Studio, mêmes lignes que les onglets, l'icône accent */

  /* ── 12. Étroit ───────────────────────────────────────────────────────────────────────────────────────────────────
     900 px : les trois colonnes se suivent ; c'est la fenêtre (.dhapp-body) qui défile, les colonnes prennent leur
     hauteur de contenu. 600 px : la barre du bas en icônes (libellés lus par les lecteurs d'écran), ses menus centrés sur
     elle. 480 px : la barre Safari sans ses feux, le menu d'adresse dans l'écran. */
  @media (max-width:900px){
    .cms{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; height:auto; min-height:100%; align-self:start; }
    .cms-gauche, .cms-centre, .cms-droite{ overflow:visible; min-height:auto; }
    .cms-gauche{ border-inline-end:0; border-bottom:1px solid var(--line); } .cms-droite{ border-inline-start:0; border-top:1px solid var(--line); }
    .cms-centre{ padding:var(--sp-14); } .cms-ap-page{ min-height:0; } .cms-centre > .cms-apercu{ flex:none; height:auto; } .cms-centre > .cms-apercu > .cms-ap-page, .cms-ap-defile{ overflow:visible; }
    .cms-onglet > span{ display:none; }   /* l'icône seule ; le nom reste dit par aria-label et title */
    .cms-onglet{ padding:0 var(--sp-8); } .cms-barre-item:first-child > .cms-barre-menu{ left:0; transform:none; }
    .cms-barre-item:last-child > .cms-barre-menu{ left:auto; right:0; transform:none; }
  }
  @media (max-width:600px){
    .cms-qualite{ margin-inline-start:var(--sp-4); padding:0 var(--sp-6); }   /* M13 ; depuis le 2026-10-17 sans icône, le texte reste */
    .cms-centre > .cms-barre{ position:relative; } .cms-barre .cms-barre-item{ position:static; } .cms-barre .cms-barre-item > .cms-barre-menu{ left:50%; right:auto; transform:translateX(-50%); }
    .cms-barre-bt > span:not(.cms-fond-pastille){ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .cms-barre-bt{ padding:0 var(--sp-10); }
  }
  @media (max-width:480px){
    .cms-ap-feu{ display:none; } .cms-ap-safari-nav{ margin-inline-start:0; } .cms-ap-url-menu{ min-width:0; width:min(440px, calc(100vw - 32px)); }
  }
}