/* La Configuration de la solution : le panneau droit, redessiné d'après la maquette du proprio (2026-10-14, brouillon
   Figma : « plus moderne, design, compact, minimaliste »). Une carte qui flotte sur le fond du rendu ; un en-tête compact
   (l'icône du type, le nom, les gestes en tuiles) ; des onglets en texte, le choisi sur une pastille ; des titres de
   section sans majuscules ni filets ; des champs pleins et gris, sans bordure, leur libellé en puce à l'intérieur ; des
   bascules au choix en accent plein ; les côtés sur une colonne de quatre ; la grille d'alignement en points.
   Une feuille à part (48-cms.css tient sous 650 lignes) ; jetons seulement, les trois états du thème viennent d'eux. */
@layer modules{

  /* Les jetons viennent de la feuille partagée des panneaux du Studio (37b-studio-panneaux.css, CDC_STUDIO_DA, 2026-10-20) : le CMS en
     est la référence, les autres apps les lisent ; les changer là change le CMS avec elles. */
  .cms{ --cms-champ:var(--studio-champ); --cms-champ-fort:var(--studio-champ-fort); --cms-droite-l:var(--studio-droite-l); --cms-gauche-l:var(--studio-gauche-l); }

  /* ── La carte : au-dessus de 900 px, le panneau flotte sur le fond du rendu, qui passe sous lui. ── */
  @media (min-width:901px){
    .cms{ grid-template-columns:minmax(0,1fr); position:relative; }
    .cms-centre{ padding-inline-start:calc(var(--cms-gauche-l) + var(--sp-24) + var(--sp-12)); padding-inline-end:calc(var(--cms-droite-l) + var(--sp-24) + var(--sp-12)); }
    /* 2026-10-17 (le proprio : « déplacer la vue comme dans Figma » ; « le header de la fenêtre du rendu passe au-dessus du panneau
       de droite ») : sur une vue, le centre est une scène qui ne défile plus : le cadre y est centré sans garde (un cadre plus
       grand déborde autant des deux côtés) et se déplace par CMS.pan ; il fait sa propre pile (z-index 0), sa barre d'adresse
       (--cms-z-barre) ne passe donc plus devant les panneaux. La barre du bas flotte, centrée sous l'espace libre. */
    .cms-centre:has(> .cms-apercu){ position:relative; overflow:hidden; justify-content:center; padding-block-end:calc(var(--cms-h) + var(--sp-20) * 2 + var(--sp-12)); }
    .cms-centre:has(> .cms-apercu) > .cms-apercu{ margin:0; align-self:center; z-index:var(--cms-z-scene); }
    .cms-centre:has(> .cms-apercu) > .cms-barre{ position:absolute; z-index:var(--cms-z-scene-barre); bottom:var(--sp-20); inset-inline-start:calc(var(--cms-gauche-l) + var(--sp-24) + var(--sp-12)); inset-inline-end:calc(var(--cms-droite-l) + var(--sp-24) + var(--sp-12)); width:max-content; margin-inline:auto; }
    .cms-centre.cms-pan-pret, .cms-centre.cms-pan-pret *{ cursor:grab !important; } .cms-centre.cms-pan-actif, .cms-centre.cms-pan-actif *{ cursor:grabbing !important; user-select:none; }
    /* 2026-10-24 (CDC_DA_COMMUNE, « idem pour l'app Interface ») : les panneaux flottent toujours sur le centre, qui leur
       réserve sa place, mais collés au bord et pleine hauteur comme ceux du Tableur et du Document (le retrait est le jeton
       --studio-retrait de 37b, à 0 ; 12 px et une carte arrondie avant). */
    .cms-droite{ position:absolute; inset-block:var(--studio-retrait); inset-inline-end:var(--studio-retrait); width:var(--cms-droite-l); box-sizing:border-box; z-index:var(--cms-z-sous-menu);
      padding:var(--sp-8); border:0; border-inline-start:1px solid var(--line2); border-radius:0; background:var(--card); }
    /* Le panneau gauche, même carte (proprio, 2026-10-15 : « même DA que le panneau de droite ») : flottant, mêmes marges, même
       retrait, mêmes titres (sans majuscules ni gris) ; son pied collant suit le retrait de la carte et ses coins. */
    .cms-gauche{ --cms-pad:var(--sp-8); position:absolute; inset-block:var(--studio-retrait); inset-inline-start:var(--studio-retrait); width:var(--cms-gauche-l); box-sizing:border-box; z-index:var(--cms-z-sous-menu); padding:var(--sp-8); border:0; border-inline-end:1px solid var(--line2); border-radius:0; background:var(--card); }
    .cms-gauche .cms-g-titre{ font-size:var(--fs-sm); color:var(--txt); text-transform:none; letter-spacing:0; }
    /* Les lignes du menu de gauche (les vues, les calques, le sommaire) soulignent leur libellé au survol, comme le panneau du
       Studio ; leur fond de survol reste (CDC_LOT2_DIVERS P1, 2026-11-04). */
    .cms-gauche :is(.cms-vue, .cms-g-ligne, .cms-sommaire-l, .cms-bloc-ligne, .cms-g-onglets .cms-onglet):hover{ text-decoration:underline; text-underline-offset:3px; }
    .cms-gauche .cms-g-pied{ border-radius:0; }
    /* La bascule en tête (Pages, Composants, Script), pleine largeur, comme les onglets du panneau droit. */
    /* 2026-10-17 (le proprio : « fais le même design, et sans les icônes, que le menu horizontal du panneau de droite : Style,
       Contenu, Événements ») : les onglets de la fenêtre sont dessinés comme ceux de l'inspecteur (.cms-droite .cms-insp-onglets) :
       un filet sous la rangée, le choisi en gras souligné de l'accent ; le nom reste affiché même sur un écran étroit (sans icône,
       le cacher ne laisserait rien). */
    .cms-gauche .cms-g-onglets{ display:flex; width:100%; height:auto; box-sizing:border-box; gap:0; margin-bottom:var(--sp-8); padding:0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; }
    .cms-gauche .cms-g-onglets .cms-onglet{ flex:1 1 auto; min-width:0; justify-content:center; height:var(--outils-h); padding:0 var(--sp-6); border-radius:0; background:transparent; box-shadow:none; color:var(--mut); font-size:var(--fs-sm); font-weight:var(--fw-regular); overflow:hidden; }
    .cms-gauche .cms-g-onglets .cms-onglet:hover{ background:transparent; color:var(--txt); }
    .cms-gauche .cms-g-onglets .cms-onglet.on, .cms-gauche .cms-g-onglets .cms-onglet.on:hover{ background:transparent; color:var(--txt); font-weight:var(--fw-medium); box-shadow:inset 0 -2px 0 var(--cms-accent); }
    .cms-gauche .cms-g-onglets .cms-onglet > span{ display:inline; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .cms-gauche .cms-g-bascule{ margin-bottom:var(--sp-10); } .cms-gauche .cms-g-bascule .cms-seg{ display:flex; width:100%; box-sizing:border-box; align-self:stretch; } .cms-gauche .cms-g-bascule .cms-seg-bt{ flex:1; min-width:0; padding:0 var(--sp-4); font-size:var(--fs-xs); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }   /* quatre choix sur 260 px : les libellés ne se chevauchent pas */
  }

  /* ── L'en-tête : le retour en petit, l'icône du type en tuile, le nom, le moteur, les gestes en tuiles à droite. ── */
  /* (2026-11-04, VAGUE_UI_MODIF2 D1 : l'en-tête, les onglets, les titres de section, les champs et les bascules de ce panneau
     vivent dans la feuille partagée 37b-studio-panneaux.css, § 4, sous des noms neutres que le Design lit aussi ; ne restent
     ici que les pièces propres à l'Interface.) */
  /* L'en-tête épuré (maquette du proprio, 2026-10-15) : « ‹ la vue » en gris, le nom en gras, les gestes en icônes nues. */
  
  .cms-droite .cms-insp-tete .cms-d-retour{ flex:0 1 auto; min-width:0; height:28px; margin:0; padding:0 var(--sp-2) 0 0; border:0; background:transparent; color:var(--mut); font-size:var(--fs-sm); }
  .cms-droite .cms-insp-tete .cms-d-retour > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cms-droite .cms-insp-tete .cms-d-retour:hover{ color:var(--txt); }
  
  
  
  
  

  /* ── Les onglets (maquette du proprio, 2026-10-15) : du texte sur une ligne de fond, le choisi en gras, souligné d'accent. ── */
  
  
  

  /* ── Les sections : un titre en gras, sans majuscules ni filet ; de l'air entre elles. ── */
  .cms-droite .cms-inspecteur .cms-style, .cms-droite .cms-style .cms-bloc-style-sec{ border-top:0; }
  .cms-droite .cms-style .cms-bloc-style-sec{ padding:var(--sp-6) 0 var(--sp-8); }
  .cms-droite .cms-style .cms-bloc-style-sec.replie{ padding:var(--sp-4) 0; } .cms-droite .cms-bloc-style-sec.replie .cms-sec-ligne{ margin-bottom:0; }   /* repliées, les sections se serrent (proprio, 2026-10-15) */
  
  .cms-droite .cms-insp-contenu{ margin-top:0; padding-top:var(--sp-4); border-top:0; }
  .cms-droite .cms-style-grille{ gap:var(--sp-8) var(--sp-6); }
  .cms-droite .cms-style-sep{ grid-column:1 / -1; width:100%; margin:var(--sp-4) 0; border:0; border-top:0.5px solid var(--line); }   /* entre deux familles de réglages (2026-10-15) */
  
  .cms-droite .cms-champ{ margin-bottom:var(--sp-8); }

  /* ── Les champs : pleins, gris, sans bordure ; le focus en anneau. ── */
  
  

  /* ── Les bascules : un rail gris, le choix en accent plein. ── */
  
  
  
  
  /* Une bascule d'icônes (l'alignement du bloc) tient sur une ligne : ses boutons se partagent la largeur (proprio, 2026-10-14). */
  .cms-droite .cms-bascule:has(> .a-icone){ flex-wrap:nowrap; width:100%; box-sizing:border-box; } .cms-droite .cms-bascule:has(> .a-icone) > .cms-bascule-bt{ flex:1 1 0; min-width:0; padding:0; }

  /* Une bascule de mots en pleine ligne (la Position : Normale, Relative, Absolue, Fixe) tient sur une ligne, ses boutons à parts égales (proprio, 2026-10-14). */
  .cms-droite .cms-style-case.plein > .cms-champ > .cms-bascule{ flex-wrap:nowrap; width:100%; box-sizing:border-box; } .cms-droite .cms-style-case.plein > .cms-champ > .cms-bascule > .cms-bascule-bt{ flex:1 1 0; min-width:0; padding-inline:var(--sp-4); }

  /* ── Une mesure : la bascule de ses mots, puis le nombre et l'unité (le curseur se tait). ── */
  .cms-droite .cms-mesure{ gap:var(--sp-4); width:100%; } .cms-droite .cms-mesure > .cms-bascule{ display:flex; width:100%; box-sizing:border-box; } .cms-droite .cms-mesure > .cms-bascule .cms-bascule-bt{ flex:1 1 0; }
  .cms-droite .cms-mesure-saisie{ gap:var(--sp-4); } .cms-droite .cms-mesure-saisie input[type="range"]{ display:none; }
  .cms-droite .cms-mesure-saisie input[type="number"]{ flex:1 1 auto; width:auto; min-width:48px; height:26px; }
  .cms-droite .cms-mesure-saisie > :is(select, .dhsel){ flex:none; width:64px; } .cms-droite .cms-mesure-saisie select{ height:26px; }   /* l'unité garde sa taille, le nombre prend le reste */
  .cms-droite .cms-bascule-bt{ white-space:nowrap; }

  /* ── Les états (Normal, Survol, Focus ; proprio, 2026-10-15) : une bascule sur toute la ligne, au-dessus des sections. ── */
  .cms-droite .cms-etats{ margin:0 0 var(--sp-8); } .cms-droite .cms-etats > .cms-bascule{ display:flex; flex-wrap:nowrap; width:100%; box-sizing:border-box; } .cms-droite .cms-etats > .cms-bascule > .cms-bascule-bt{ flex:1 1 0; min-width:0; }
  .cms-droite .cms-etats > .cms-rupture{ margin:var(--sp-6) 0 0; }
  /* CDC_ETATS E1 : « [pseudo ▾] » = le bouton de la pseudo-classe courante et sa flèche, soudés ; le menu des pseudo-classes
     sous la flèche ; Style › Événement : la liste des événements de style, un choisi. */
  .cms-droite .cms-etat-pseudo-grp{ position:relative; display:flex; flex:1 1 0; min-width:0; } .cms-droite .cms-etat-pseudo-grp > .cms-bascule-bt:first-child{ flex:1 1 0; min-width:0; }
  .cms-droite .cms-etat-fleche{ flex:0 0 auto; min-width:24px; padding:0 var(--sp-2); } .cms-droite .cms-etat-fleche svg.ic{ width:12px; height:12px; }
  .cms-droite .cms-etat-menu{ position:absolute; top:calc(100% + var(--sp-4)); right:0; z-index:var(--cms-z-menu); min-width:220px; max-height:320px; overflow:auto; padding:var(--sp-4); border:1px solid var(--line); border-radius:var(--radius); background:var(--card); box-shadow:var(--cms-ombre-menu); display:flex; flex-direction:column; gap:var(--sp-2); }
  .cms-droite .cms-etat-menu-l{ display:flex; justify-content:space-between; align-items:center; gap:var(--sp-8); width:100%; padding:var(--sp-4) 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-droite .cms-etat-menu-l:hover, .cms-droite .cms-etat-menu-l.on{ background:var(--cms-champ); } .cms-droite .cms-etat-menu-l code{ font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--mut); }
  .cms-droite .cms-etat-evs{ display:flex; flex-direction:column; gap:var(--sp-4); margin-top:var(--sp-6); } .cms-droite .cms-etat-ev{ display:flex; align-items:center; gap:var(--sp-6); } .cms-droite .cms-etat-ev > span:first-child{ flex:1; min-width:0; }

  /* ── La section Texte compacte (maquette du proprio, 2026-10-15) : deux commandes par ligne, sans libellé visible. ── */
  .cms-droite .cms-style-case.compact :is(.cms-design-champ > span[id$="-lib"], .cms-design-champ > label > span){ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  /* Une même hauteur pour toutes (capture du proprio, 2026-10-15 : lignes décalées) : le libellé caché ne garde aucune place,
     chaque commande fait 28 px, alignée en haut de sa case. */
  .cms-droite .cms-style-case.compact .cms-design-champ > label{ display:contents; } .cms-droite .cms-style-case.compact .cms-design-champ{ gap:0; margin:0; min-height:0; }
  .cms-droite .cms-style-grille:has(> .compact){ row-gap:var(--sp-4); }   /* « réduit les espacements » (proprio, 2026-10-15) */
  .cms-droite .cms-style-case.compact :is(select, .dhsel-trigger, .cms-dim, .cms-bascule){ height:28px; min-height:28px; box-sizing:border-box; }
  .cms-droite .cms-style-case.compact .dhsel-trigger{ padding-block:0; } .cms-droite .cms-style-case.compact .cms-bascule{ align-items:center; } .cms-droite .cms-style-case.compact .cms-bascule-bt{ height:24px; }

  /* ── La fiche d'un script (CDC_SCRIPTS S3 ; redessinée le 2026-10-17, proprio : « mieux faire ça visuellement ») : une frise.
     « Quand » puis « Que fait-il ? », chacun avec sa pastille sur un fil ; chaque étape a son jalon (son numéro) sur le fil et ses
     gestes au survol ; les déclencheurs et les actions en cartes douces, les branches en retrait accentué ; les ajouts en
     pastilles discrètes sur une ligne. Un orphelin en couleur d'alerte. ── */
  .cms-droite .cms-script-fiche .cms-inter{ margin:var(--sp-8) 0 var(--sp-4); }
  .cms-droite .cms-sc-flux{ display:flex; flex-direction:column; gap:var(--sp-14); margin-top:var(--sp-10); }
  .cms-droite .cms-sc-bloc{ position:relative; display:flex; flex-direction:column; gap:var(--sp-6); padding-left:var(--sp-28); }
  .cms-droite .cms-sc-bloc::before{ content:''; position:absolute; left:11px; top:24px; bottom:calc(var(--sp-14) * -1); width:1px; background:var(--line); } .cms-droite .cms-sc-bloc:last-child::before{ bottom:var(--sp-4); }
  .cms-droite .cms-sc-section{ position:relative; display:flex; align-items:center; min-height:24px; margin:0; font-size:var(--fs-sm); font-weight:var(--fw-strong); text-transform:none; letter-spacing:0; color:var(--txt); }
  .cms-droite .cms-sc-pastille{ position:absolute; left:-28px; top:0; display:grid; place-items:center; width:24px; height:24px; border-radius:var(--radius-pill); background:color-mix(in srgb, var(--cms-accent) 12%, var(--card)); color:var(--cms-accent-texte); } .cms-droite .cms-sc-pastille svg.ic{ width:13px; height:13px; }
  .cms-droite .cms-script-dec{ display:flex; flex-direction:column; gap:var(--sp-4); padding:var(--sp-6) var(--sp-8); border:1px solid var(--line2); border-radius:var(--radius-sm); background:var(--card); font-size:var(--fs-sm); } .cms-droite .cms-script-dec + .cms-script-dec{ margin-top:var(--sp-2); }
  .cms-droite .cms-script-dec.a-completer{ border-color:var(--warn); } .cms-droite .cms-script-dec.orphelin{ border-color:var(--err); } .cms-droite .cms-sc-aide{ font-size:var(--fs-xs); color:var(--warn); } .cms-droite .cms-script-dec.orphelin .cms-sc-aide{ color:var(--err); }
  /* P11 : la signature d'un script appelable : ( #a #b + ) */
  .cms-droite .cms-sc-params{ display:flex; align-items:center; gap:var(--sp-6); padding:var(--sp-6) var(--sp-8); border:1px dashed var(--line); border-radius:var(--radius-sm); }
  .cms-droite .cms-sc-sig{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4); flex:1; min-width:0; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--mut); } .cms-droite .cms-sc-param-neuf{ flex:1 1 70px; min-width:60px; height:24px; font-family:var(--font-mono); font-size:var(--fs-xs); }
  /* Une phrase : son mot (Quand, sur, Si, Alors…) petit et discret, puis ses menus. */
  .cms-droite .cms-sc-ligne{ display:flex; align-items:center; gap:var(--sp-6); } .cms-droite .cms-sc-ligne > :is(select, .dhsel, input){ flex:1 1 60px; min-width:0; } .cms-droite .cms-sc-ligne > .cms-insp-bt{ flex:none; }
  .cms-droite .cms-sc-creux{ flex:none; min-width:34px; } .cms-droite .cms-sc-mot{ flex:none; min-width:34px; font-size:var(--fs-xs); font-weight:var(--fw-strong); color:var(--mut); }
  /* Les ajouts : des pastilles discrètes (un +, un mot), qui s'allument au survol. */
  .cms-droite .cms-sc-ajouts{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4); }
  .cms-droite .cms-sc-ajout{ display:inline-flex; align-items:center; gap:var(--sp-4); height:26px; padding:0 var(--sp-8); border:1px dashed var(--line); border-radius:var(--radius-pill); background:transparent; color:var(--mut); font:inherit; font-size:var(--fs-xs); font-weight:var(--fw-medium); cursor:pointer; }
  .cms-droite .cms-sc-ajout:hover:not(:disabled), .cms-droite .cms-sc-ajout:focus-visible{ border-style:solid; border-color:var(--cms-accent); color:var(--cms-accent-texte); background:color-mix(in srgb, var(--cms-accent) 6%, var(--card)); outline:none; } .cms-droite .cms-sc-ajout:disabled{ opacity:.45; cursor:default; } .cms-droite .cms-sc-ajout svg.ic{ width:12px; height:12px; }
  .cms-droite .cms-sc-ajouts > .btn.ghost{ height:26px; border-color:transparent; background:transparent; color:var(--mut); font-size:var(--fs-xs); } .cms-droite .cms-sc-ajouts > .btn.ghost:hover{ color:var(--txt); background:var(--cms-champ); }
  .cms-droite .cms-sc-plus{ flex:0 1 auto; width:auto; height:26px; padding:0 var(--sp-8); border-radius:var(--radius-pill); font-size:var(--fs-xs); color:var(--mut); }
  .cms-droite .cms-sc-vide{ margin:0; font-size:var(--fs-xs); color:var(--mut); } .cms-droite .cms-sc-branche-tete{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); }
  /* Une étape : une carte, son numéro en jalon sur le fil ; monter, descendre, retirer paraissent au survol (et au clavier). */
  .cms-droite .cms-sc-etapes{ display:flex; flex-direction:column; gap:var(--sp-8); }
  .cms-droite .cms-sc-etape{ position:relative; display:flex; flex-direction:column; gap:var(--sp-6); padding:var(--sp-8) var(--sp-10) var(--sp-10); border:1px solid var(--line2); border-radius:var(--radius); background:var(--card); }
  .cms-droite .cms-sc-tete{ display:flex; align-items:center; gap:var(--sp-2); min-height:24px; } .cms-droite .cms-sc-titre{ flex:1; font-size:var(--fs-sm); font-weight:var(--fw-strong); }
  .cms-droite .cms-sc-jalon{ position:absolute; left:-25px; top:var(--sp-10); width:18px; height:18px; display:grid; place-items:center; border-radius:var(--radius-pill); background:var(--card); box-shadow:0 0 0 1px var(--line); font-size:var(--fs-xs); font-weight:var(--fw-strong); color:var(--mut); } .cms-droite .cms-sc-jalon svg.ic{ width:11px; height:11px; }
  .cms-droite .cms-sc-etape.repete .cms-sc-jalon{ color:var(--cms-accent-texte); box-shadow:0 0 0 1px var(--cms-accent); }
  .cms-droite .cms-sc-tete > .cms-insp-bt{ opacity:0; } .cms-droite .cms-sc-etape:hover .cms-sc-tete > .cms-insp-bt, .cms-droite .cms-sc-etape:focus-within .cms-sc-tete > .cms-insp-bt{ opacity:1; }
  .cms-droite .cms-sc-si{ display:flex; flex-direction:column; gap:var(--sp-4); padding:var(--sp-6) var(--sp-8); border-radius:var(--radius-sm); background:var(--cms-champ); }
  .cms-droite .cms-sc-branche{ display:flex; flex-direction:column; gap:var(--sp-4); padding-left:var(--sp-8); border-left:2px solid var(--cms-accent); } .cms-droite .cms-sc-branche[data-branche="sinon"]{ border-left-color:var(--line); }
  .cms-droite .cms-sc-branche-tete .cms-sc-mot{ text-transform:uppercase; letter-spacing:.04em; color:var(--cms-accent-texte); } .cms-droite .cms-sc-branche[data-branche="sinon"] .cms-sc-branche-tete .cms-sc-mot{ color:var(--mut); }
  .cms-droite .cms-sc-action{ display:flex; flex-direction:column; gap:var(--sp-4); padding:var(--sp-6) var(--sp-8); border-radius:var(--radius-sm); background:var(--cms-champ); } .cms-droite .cms-sc-champs{ display:flex; flex-direction:column; gap:var(--sp-4); padding-left:var(--sp-2); }
  .cms-droite .cms-sc-code{ margin-top:var(--sp-12); padding-top:var(--sp-8); border-top:1px solid var(--line2); } .cms-droite .cms-sc-code summary{ cursor:pointer; font-size:var(--fs-xs); color:var(--mut); } .cms-droite .cms-sc-code pre{ margin:var(--sp-6) 0 0; padding:var(--sp-10) var(--sp-12); border-radius:var(--radius-sm); background:var(--code-bg); color:var(--code-fg); font-family:var(--font-mono); font-size:var(--fs-xs); line-height:1.6; white-space:pre-wrap; }

  .cms-droite .cms-sc-code-action > textarea.cms-code-js{ min-height:64px; margin-top:var(--sp-4); } .cms-droite .cms-sc-code-etat{ display:inline-flex; align-items:center; gap:var(--sp-6); flex:1; }   /* S6 : l'étape Code */
  /* CDC_SCRIPTS_2 P6 : le verdict d'une expression, ses jetons à insérer, la fiche des variables. */
  .cms-droite .cms-sc-aide-expr{ flex-wrap:wrap; gap:var(--sp-4) var(--sp-8); margin-bottom:var(--sp-6); } .cms-droite .cms-sc-verdict{ flex:1 1 auto; min-width:0; font-size:var(--fs-xs); color:var(--mut); }
  .cms-droite .cms-sc-jetons > summary{ font-size:var(--fs-xs); color:var(--mut); cursor:pointer; } .cms-droite .cms-sc-jetons[open]{ flex-basis:100%; display:flex; flex-wrap:wrap; gap:var(--sp-4); }
  .cms-droite .cms-sc-jeton{ padding:var(--sp-2) var(--sp-6); border:1px solid var(--line2); border-radius:var(--radius-sm); background:var(--card); color:var(--txt); font-family:var(--font-mono); font-size:var(--fs-xs); cursor:pointer; } .cms-droite .cms-sc-jeton:hover{ border-color:var(--cms-accent); }
  .cms-droite .cms-vars{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-8); } .cms-droite .cms-var{ padding:var(--sp-8); border:1px solid var(--line2); border-radius:var(--radius-sm); }
  .cms-droite .cms-sc-expr{ flex:1 1 auto; min-width:0; font-family:var(--font-mono); font-size:var(--fs-xs); }   /* CDC_SCRIPTS_2 P2 : une expression se lit en chasse fixe */
  /* CDC_SCRIPTS_2 P1 : les cibles d'une action, au-delà de la première, en jetons ; « Ajouter une cible » dessous. */
  .cms-droite .cms-cibles{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4); margin-top:var(--sp-4); }
  .cms-droite .cms-cible-jeton{ display:inline-flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-8); border-radius:var(--radius-pill); background:var(--cms-champ); font-size:var(--fs-xs); color:var(--txt); }
  .cms-droite .cms-cible-retirer{ display:grid; place-items:center; width:18px; height:18px; padding:0; border:0; border-radius:var(--radius-pill); background:transparent; color:var(--mut); cursor:pointer; } .cms-droite .cms-cible-retirer:hover{ background:var(--line2); color:var(--txt); } .cms-droite .cms-cible-retirer svg.ic{ width:11px; height:11px; }
  .cms-droite .cms-cible-ajouter{ flex:1 1 140px; min-width:0; font-size:var(--fs-xs); }
  /* ── Publication (2026-10-16, proprio) : la vue en vignette à gauche du texte, 80 px, haute comme le texte, inerte ; une page de 1024 px réduite. ── */
  .cms-droite .cms-publication-split{ display:grid; grid-template-columns:80px minmax(0,1fr); gap:var(--sp-10); align-items:stretch; align-content:start; margin-bottom:var(--sp-8); }   /* align-content:start : la rangée reste haute comme le texte même quand le parent étire la grille (capture du 2026-10-16) */ .cms-droite .cms-publication-split > div > p:first-child{ margin-top:0; }
  .cms-droite .cms-publication-vignette{ position:relative; overflow:hidden; border:1px solid var(--line2); border-radius:var(--radius-xs); background:var(--card); pointer-events:none; }
  .cms-droite .cms-publication-scene{ position:absolute; top:0; left:0; width:1280%; transform:scale(.078125); transform-origin:0 0; }
  /* ── Les modèles (T2) : une galerie de cartes dans le panneau gauche, la vignette rendue en direct et réduite, inerte. ── */
  .cms-gauche .cms-modeles-filtre{ margin:0 0 var(--sp-8); } .cms-gauche .cms-modeles{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-8); }
  .cms-gauche .cms-modele-carte{ border:1px solid var(--line2); border-radius:var(--radius-sm); background:var(--card); overflow:hidden; } .cms-gauche .cms-modele-carte.manque{ border-color:color-mix(in srgb, var(--warn) 50%, var(--line)); }
  .cms-gauche .cms-modele-vignette-bt{ display:block; width:100%; padding:0; border:0; background:var(--cms-champ); cursor:zoom-in; } .cms-gauche .cms-modele-carte.grand .cms-modele-vignette-bt{ cursor:zoom-out; }
  .cms-gauche .cms-modele-vignette{ position:relative; height:72px; overflow:hidden; pointer-events:none; } .cms-gauche .cms-modele-carte.grand .cms-modele-vignette{ height:220px; }
  .cms-gauche .cms-modele-scene{ position:absolute; top:0; left:0; width:400%; transform:scale(.25); transform-origin:0 0; } .cms-gauche .cms-modele-carte.grand .cms-modele-scene{ width:200%; transform:scale(.5); }
  .cms-gauche .cms-modele-vignette.bloc .cms-modele-scene{ padding:var(--sp-16); } .cms-gauche .cms-modele-vide{ display:block; padding:var(--sp-8); font-size:var(--fs-xs); color:var(--mut); }
  .cms-gauche .cms-modele-corps{ display:flex; flex-direction:column; gap:var(--sp-4); padding:var(--sp-6) var(--sp-8) var(--sp-8); } .cms-gauche .cms-modele-tete{ display:flex; align-items:center; gap:var(--sp-6); }
  .cms-gauche .cms-modele-nom{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-sm); font-weight:var(--fw-strong); } .cms-gauche .cms-modele-genre{ flex:none; padding:0 var(--sp-6); border-radius:var(--radius-pill); background:var(--cms-champ); font-size:var(--fs-xs); color:var(--mut); }
  .cms-gauche .cms-modele-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-6); font-size:var(--fs-xs); color:var(--mut); } .cms-gauche .cms-modele-manque{ display:inline-flex; align-items:center; gap:var(--sp-2); color:var(--warn); } .cms-gauche .cms-modele-manque svg.ic{ width:12px; height:12px; }

  /* ── Play (S5) : le journal des scripts sous l'aperçu, « Simuler », les valeurs à forcer. ── */
  .cms-play{ margin-top:var(--sp-8); padding:var(--sp-8); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card); } .cms-play-tete{ display:flex; align-items:center; gap:var(--sp-6); flex-wrap:wrap; } .cms-play-tete > h3{ flex:1; margin:0; }
  .cms-play-simuler > select{ height:28px; } .cms-journal{ margin:var(--sp-6) 0 0; padding:0; list-style:none; max-height:160px; overflow:auto; font-family:var(--font-mono); font-size:var(--fs-xs); line-height:1.6; }
  .cms-journal li{ padding:var(--sp-2) 0; border-top:1px solid var(--line2); } .cms-journal li.erreur{ color:var(--err); } .cms-journal time{ color:var(--mut); margin-right:var(--sp-6); } .cms-journal-vide{ color:var(--mut); }
  .cms-play-valeurs{ margin-top:var(--sp-6); } .cms-play-valeurs summary{ cursor:pointer; font-size:var(--fs-xs); color:var(--mut); } .cms-play-grille{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:var(--sp-6); margin-top:var(--sp-6); }

  /* ── Les côtés : quatre lignes, le libellé en puce dans le champ (on la tire pour changer la valeur). ── */
  .cms-droite .cms-cotes-champs{ grid-template-columns:1fr; gap:var(--sp-4); }
  .cms-droite .cms-cotes.deux .cms-cotes-champs{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:var(--sp-6); align-items:start; }   /* le décalage : haut, bas | gauche, droite */
  .cms-droite label.cms-cote{ height:26px; padding:0 var(--sp-6) 0 var(--sp-2); border:0; background:var(--cms-champ); }
  .cms-droite label.cms-cote:focus-within{ box-shadow:none; outline:2px solid var(--focus-anneau); }
  /* Chaque colonne de côtés dans un seul cadre, un filet de 0,5 px entre eux (Marge, Retrait, Décalage ; proprio, 2026-10-14). */
  .cms-droite .cms-cotes-col{ display:flex; flex-direction:column; min-width:0; border-radius:var(--radius-sm); background:var(--cms-champ); }
  .cms-droite .cms-cotes-col > label.cms-cote{ border-radius:0; background:transparent; } .cms-droite .cms-cotes-col > label.cms-cote + label.cms-cote{ border-top:0.5px solid var(--line); } .cms-droite .cms-cotes-col > label.cms-cote:focus-within{ outline-offset:-2px; }
  .cms-droite label.cms-cote > .cms-cote-puce{ flex:none; padding:0 var(--sp-4); border-radius:var(--radius-xs); background:var(--cms-champ); color:var(--txt); font-weight:var(--fw-strong); font-size:var(--fs-xs); line-height:18px; cursor:ew-resize   /* fond léger : 4,2:1 en sombre sur le fond fort (K17) */; user-select:none; }

  /* ── Les dimensions (proprio, 2026-10-14) : un bloc, deux colonnes (largeur, hauteur), leurs bornes dessous ; le nombre
     et l'unité dans une même case grise, un mot choisi prend la case ; le débordement en interrupteur sur une ligne. ── */
  .cms-droite .cms-dims{ display:flex; flex-direction:column; gap:var(--sp-4); }
  .cms-droite .cms-dims-titre{ font-size:var(--fs-xs); color:var(--txt); }
  .cms-droite .cms-dims-grille{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--sp-4) var(--sp-6); }
  .cms-droite .cms-dims-tete{ font-size:var(--fs-xs); color:var(--mut); }
  .cms-droite .cms-dim{ display:flex; align-items:center; gap:var(--sp-2); min-width:0; height:26px; padding:0 var(--sp-2); box-sizing:border-box; border-radius:var(--radius-sm); background:var(--cms-champ); }
  .cms-droite .cms-dim:focus-within{ outline:2px solid var(--focus-anneau); }
  .cms-droite .cms-dim > input{ flex:1 1 auto; width:auto; min-width:0; height:24px; padding:0 var(--sp-4); background:transparent; }
  .cms-droite .cms-dim > input:focus-visible{ outline:0; }
  .cms-droite .cms-dims-col{ display:flex; flex-direction:column; min-width:0; border-radius:var(--radius-sm); background:var(--cms-champ); }   /* une colonne, un cadre ; un filet entre ses lignes */
  .cms-droite .cms-dims-col > .cms-dim{ border-radius:0; background:transparent; } .cms-droite .cms-dims-col > .cms-dim + .cms-dim{ border-top:0.5px solid var(--line); } .cms-droite .cms-dims-col > .cms-dim:focus-within{ outline-offset:-2px; }
  .cms-droite :is(.cms-dim, label.cms-cote) > input{ appearance:textfield; } .cms-droite :is(.cms-dim, label.cms-cote) > input::-webkit-inner-spin-button{ display:none; }   /* les flèches du nombre mangeaient « Aucune » */
  .cms-droite :is(.cms-dim, label.cms-cote) > :is(select, .dhsel){ flex:none; width:auto; min-width:0; } .cms-droite label.cms-cote :is(select, .dhsel-trigger){ height:24px; background:transparent; color:var(--txt); font-size:var(--fs-xs); } .cms-droite :is(.cms-dim, label.cms-cote) .dhsel-trigger{ --dhs-px:var(--sp-2); --dhs-py:0; --dhs-gap:var(--sp-2); --dhs-caret:12px; } .cms-droite :is(.cms-dim:not(.mot), label.cms-cote) .dhsel-label{ flex:none; overflow:visible; }   /* l'unité ne prend que sa place */ .cms-droite .cms-dim :is(select, .dhsel-trigger){ height:24px; background:transparent; color:var(--txt); font-size:var(--fs-xs); }
  .cms-droite .cms-dim.mot > input{ display:none; } .cms-droite .cms-dim.mot > :is(select, .dhsel){ flex:1 1 auto; width:auto; }
  .cms-droite .cms-dim-puce{ flex:none; padding:0 var(--sp-4); border-radius:var(--radius-xs); background:var(--cms-champ-fort); color:var(--txt); font-size:var(--fs-xs); line-height:18px; }   /* --mut sur ce gris : 4,2:1 en sombre (banc K17, 2026-10-14) */
  /* Un interrupteur sur une ligne : le libellé, l'état écrit, l'interrupteur (le débordement, « Bloc fixe ou absolu »). */
  .cms-droite .cms-inter{ display:flex; align-items:center; gap:var(--sp-6); min-height:26px; font-size:var(--fs-xs); }
  .cms-droite .cms-inter > span:first-child{ flex:1 1 auto; min-width:0; color:var(--txt); } .cms-droite .cms-inter-etat{ color:var(--mut); white-space:nowrap; }
  .cms-droite .cms-inter .switch{ width:32px; height:18px; } .cms-droite .cms-inter .switch-kn{ top:1px; left:1px; width:14px; height:14px; } .cms-droite .cms-inter .switch.on .switch-kn{ left:15px; }

  /* ── L'onglet Code (maquette du proprio, 2026-10-15) : le CSS du bloc et de son survol dans un seul cadre sombre, chacun
     sous son sélecteur ; le HTML en lecture, dans le même habit. ── */
  .cms-droite .cms-code-css{ display:flex; flex-direction:column; gap:var(--sp-6); padding:var(--sp-8) 0; border-radius:var(--radius-sm); background:var(--code-bg); }
  .cms-droite .cms-code-regle{ display:flex; flex-direction:column; } .cms-droite .cms-code-sel{ padding:0 var(--sp-12); color:var(--code-fg); font-family:var(--font-mono); font-size:var(--fs-xs); line-height:1.6; }
  .cms-droite .cms-code-css .cms-css-boite{ border:0; background:transparent; } .cms-droite .cms-code-css .cms-css-boite :is(.cms-css-coul, textarea.cms-css){ padding-block:0; padding-inline:var(--sp-24) var(--sp-12); min-height:0; }
  .cms-droite textarea.cms-code-js{ width:100%; box-sizing:border-box; min-height:96px; padding:var(--sp-10) var(--sp-12); border:0; border-radius:var(--radius-sm); background:var(--code-bg); color:var(--code-fg); font-family:var(--font-mono); font-size:var(--fs-xs); line-height:1.6; white-space:pre; resize:vertical; }
  .cms-droite .cms-code-js-pied{ align-items:center; gap:var(--sp-8); margin-top:var(--sp-6); } .cms-droite .cms-code-js-etat{ display:inline-flex; align-items:center; gap:var(--sp-4); flex:1; font-size:var(--fs-xs); color:var(--txt); } .cms-droite .cms-code-js-etat svg.ic{ width:14px; height:14px; color:var(--warn); } .cms-droite .cms-code-js-etat.relu svg.ic{ color:var(--ok); }   /* le texte garde l'encre (contraste), l'icône dit l'état */
  .cms-droite .cms-code-html{ margin:0; max-height:240px; overflow:auto; padding:var(--sp-10) var(--sp-12); border-radius:var(--radius-sm); background:var(--code-bg); color:var(--code-fg); font-family:var(--font-mono); font-size:var(--fs-xs); line-height:1.6; white-space:pre; }

  /* ── Les pastilles : une rangée de ronds, le champ libre en gris à droite. ── */
  .cms-droite .cms-pastilles{ gap:var(--sp-4); align-items:center; }
  /* Maquette du proprio (2026-10-15, « Fond et opacité ») : des ronds de 24 px sans cadre (un anneau à peine visible tient les
     couleurs claires), le rond libre avec sa petite pastille à chevron, l'opacité en texte nu à droite. */
  .cms-droite .cms-pastilles{ gap:var(--sp-4); } .cms-droite .cms-pastille{ width:20px; height:20px; border:0;   /* « un peu plus petit, moins d'écart » (proprio, 2026-10-16) */ box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--txt) 10%, transparent); }
  .cms-droite .cms-pastille.aucune{ box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--txt) 30%, transparent); }
  .cms-droite .cms-pastilles .cms-hex{ flex:1; min-width:64px; height:24px; border:0; background:var(--cms-champ); }
  /* La couleur libre à dégradé (CDC_DEGRADES L3) : le bouton du sélecteur de h12s prend la place du code, gris comme les champs ;
     il s'entoure d'accent quand la valeur du bloc est la sienne (une couleur ou un dégradé choisis au sélecteur). */
  /* Un rond comme les autres pastilles (proprio, 2026-10-15) : la couleur ou le dégradé choisis le remplissent ; tant
     qu'aucun ne l'est, un cercle chromatique dit « une couleur à vous ». Avant que h12s arrive, le champ natif a la même forme. */
  .cms-droite .cms-pastilles .cms-libre{ position:relative; display:inline-flex; flex:none; } .cms-droite .cms-libre :is(.h12s-color, .cms-libre-natif){ width:24px; min-width:0; height:24px; padding:0; border:0; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--txt) 10%, transparent); border-radius:var(--radius-pill); background:transparent; overflow:hidden; }
  .cms-droite .cms-libre-badge{ position:absolute; right:-3px; bottom:-3px; display:grid; place-items:center; width:12px; height:12px; border-radius:var(--radius-pill); background:var(--card); color:var(--txt); box-shadow:0 0 0 1px color-mix(in srgb, var(--txt) 15%, transparent); pointer-events:none; } .cms-droite .cms-libre-badge svg.ic{ width:9px; height:9px; }
  .cms-droite .cms-libre .h12s-hex{ display:none; } .cms-droite .cms-libre .h12s-sw{ width:100%; height:100%; flex-basis:100%; border-radius:var(--radius-pill); box-shadow:none; } .cms-droite .cms-libre.on .h12s-color{ outline:2px solid var(--cms-accent); outline-offset:2px; }
  .cms-droite .cms-libre:not(.on) .h12s-sw{ position:relative; } .cms-droite .cms-libre:not(.on) .h12s-sw::after{ content:''; position:absolute; inset:0; border-radius:inherit; background:conic-gradient(red, yellow, lime, aqua, blue, magenta, red); }   /* par-dessus la couleur en ligne du moteur, sans !important (cliquet da) */ .cms-droite .cms-libre-natif::-webkit-color-swatch-wrapper{ padding:0; } .cms-droite .cms-libre-natif::-webkit-color-swatch{ border:0; border-radius:var(--radius-pill); }
  /* Les couleurs et l'opacité sur une ligne : l'opacité, compacte, à droite. */
  .cms-droite .cms-couleur-ligne{ display:flex; align-items:flex-end; gap:var(--sp-8); } .cms-droite .cms-couleur-ligne > .cms-style-case:first-child{ flex:1 1 auto; min-width:0; } .cms-droite .cms-couleur-ligne > .cms-style-case + .cms-style-case{ flex:none; width:auto; }
  .cms-droite .cms-couleur-ligne > .cms-style-case + .cms-style-case :is(.cms-design-champ > label > span, .cms-design-champ > span[id$="-lib"]){ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  #cms-droite .cms-couleur-ligne > .cms-style-case + .cms-style-case :is(.cms-design-champ, .dhsel){ margin:0; padding:0; gap:0; min-height:0; } #cms-droite .cms-couleur-ligne > .cms-style-case + .cms-style-case .cms-design-champ > label{ display:contents; }
  #cms-droite .cms-couleur-ligne > .cms-style-case + .cms-style-case :is(.dhsel-trigger, select){ height:24px; min-height:0; margin:0; padding:0 0 0 var(--sp-4); border:0; box-shadow:none; background:transparent; color:var(--txt); font-size:var(--fs-sm); line-height:24px; text-align:right; }   /* l'opacité en texte nu, à hauteur des ronds : l'identifiant l'emporte sur la règle générale des champs (son :is() pèse lourd) */
  #cms-droite .cms-couleur-ligne > .cms-style-case + .cms-style-case .dhsel-trigger .dhsel-label{ flex:none; }

  /* ── La grille d'alignement : neuf points dans un carré gris, le choisi en trait d'accent. ── */
  .cms-droite .cms-grille{ grid-template-columns:repeat(3, 26px); grid-template-rows:repeat(3, 24px); width:max-content; box-sizing:border-box; border:0; border-radius:var(--radius-sm); background:var(--cms-champ); }
  .cms-droite .cms-grille-pt i{ width:6px; height:6px; } .cms-droite .cms-grille-pt.on i{ width:18px; height:6px; }

  /* ── Étroit : le panneau reprend sa place sous le rendu. ── */
  @media (max-width:900px){ .cms-droite .cms-insp-tete{ flex-wrap:wrap; } }
  /* Les scripts d'un bloc, sous ses événements (2026-10-17) : une ligne par script, son nom puis son rôle, comme une carte calme. */
  .cms-droite .cms-ev-scripts{ margin-top:var(--sp-14); padding-top:var(--sp-10); border-top:1px solid var(--line2); }
  .cms-droite .cms-ev-sc-liste{ display:flex; flex-direction:column; gap:var(--sp-4); margin:0; padding:0; list-style:none; }
  .cms-droite .cms-ev-sc{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-2); width:100%; padding:var(--sp-6) var(--sp-8); border:1px solid var(--line2); border-radius:var(--radius-sm); background:var(--card); color:var(--txt); font:inherit; text-align:left; cursor:pointer; }
  .cms-droite .cms-ev-sc:hover, .cms-droite .cms-ev-sc:focus-visible{ border-color:var(--cms-accent); }
  .cms-droite .cms-ev-sc.inactif{ opacity:.6; }
  .cms-droite .cms-ev-sc-nom{ display:flex; align-items:center; gap:var(--sp-6); font-size:var(--fs-sm); font-weight:var(--fw-medium); } .cms-droite .cms-ev-sc-nom svg{ width:14px; height:14px; color:var(--cms-accent); flex:none; }
  .cms-droite .cms-ev-sc-role{ font-size:var(--fs-xs); color:var(--mut); }
  /* CDC_SCRIPTS_2 P15 : une étape serveur (un filet d'accent à gauche) ; la pastille « sur le serveur » d'une action de moteur. */
  .cms-droite .cms-sc-serveur{ border-left:2px solid var(--cms-accent); padding-left:var(--sp-8); }
  .cms-droite .cms-sc-cote{ flex:none; padding:var(--sp-1) var(--sp-6); border-radius:var(--radius-pill); background:color-mix(in srgb, var(--cms-accent) 14%, transparent); color:var(--txt); font-size:var(--fs-xs); white-space:nowrap; }
  /* 2026-10-17 : la librairie des modèles, une modale dans la fenêtre ; ses cartes en grille. */
  .cms-librairie{ width:min(960px, calc(100vw - var(--sp-48))); max-height:calc(100vh - var(--sp-64)); padding:0; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); color:var(--txt); box-shadow:var(--shadow-lg, var(--shadow)); }
  .cms-librairie[open]{ display:flex; flex-direction:column; }
  .cms-librairie .cms-lib-tete{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-8); padding:var(--sp-12) var(--sp-16); border-bottom:1px solid var(--line2); }
  .cms-librairie .cms-lib-tete .cms-d-titre{ margin:0; }
  .cms-librairie .cms-lib-corps{ padding:var(--sp-16); overflow:auto; min-height:0; }
  .cms-librairie .cms-modeles-filtre{ margin:0 0 var(--sp-12); }
  .cms-librairie .cms-modeles{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:var(--sp-12); margin:0; padding:0; list-style:none; }
  .cms-palette-tete .cms-palette-lib{ margin-inline-start:auto; flex:none; }
  /* 2026-10-17 : la carte d'écran (cms-ecran-sel : cms-ecran est déjà la carte d'un écran dans Paramètres), toute cliquable, sur une ligne (le proprio : « plus compact, minimaliste », « retire l'icône ») :
     le nom, l'adresse en chasse fixe, le point de l'accès (son nom au survol), le chevron ; le « + » à part.
     Le sélecteur maison est posé dessus, invisible (sa liste s'ouvre sous la carte, à sa largeur). */
  .cms-gauche .cms-ecran-sel{ --ecran-teinte:var(--cms-accent); position:relative; display:flex; align-items:center; gap:var(--sp-8); height:var(--cms-h); box-sizing:border-box; margin-bottom:var(--sp-8); padding:0 var(--sp-2) 0 var(--sp-10); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card); }
  .cms-gauche .cms-ecran-sel[data-acces="connecte"]{ --ecran-teinte:var(--ok); } .cms-gauche .cms-ecran-sel[data-acces="admin"]{ --ecran-teinte:var(--warn); }
  .cms-gauche .cms-ecran-sel:hover{ border-color:color-mix(in srgb, var(--ecran-teinte) 40%, var(--line)); }
  .cms-gauche .cms-ecran-sel:focus-within{ border-color:var(--ecran-teinte); }
  .cms-gauche .cms-ecran-txt{ display:flex; align-items:baseline; gap:var(--sp-6); flex:1; min-width:0; }
  .cms-gauche .cms-ecran-nom{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-sm); font-weight:var(--fw-strong); color:var(--txt); }
  .cms-gauche .cms-ecran-adr{ flex:none; max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--mut); }
  .cms-gauche .cms-ecran-point{ flex:none; width:var(--sp-6); height:var(--sp-6); border-radius:var(--radius-pill); background:var(--ecran-teinte); }
  .cms-gauche .cms-ecran-chev{ display:grid; place-items:center; flex:none; color:var(--mut); } .cms-gauche .cms-ecran-chev svg.ic{ width:13px; height:13px; }
  .cms-gauche .cms-ecran-sel .cms-ecran-choix{ position:absolute; inset:0 calc(var(--cms-h-c) + var(--sp-4)) 0 0; z-index:var(--cms-z-ecran-choix); margin:0; }
  .cms-gauche .cms-ecran-sel .cms-ecran-choix :is(.dhsel, .dhsel-trigger, select){ width:100%; height:100%; margin:0; }
  .cms-gauche .cms-ecran-sel .cms-ecran-choix :is(.dhsel-trigger, select){ opacity:0; cursor:pointer; }
  /* CDC_SOLUTIONS S3 (2026-10-19) : la carte de la solution, au-dessus des onglets, du même dessin que celle de l'écran ; un bouton entier. */
  .cms-gauche .cms-sol-sel{ width:100%; font:inherit; font-size:var(--fs-md); text-align:start; cursor:pointer; }
  .cms-gauche .cms-sol-lib{ flex:none; font-size:var(--fs-xs); color:var(--mut); }
  .cms-gauche .cms-sol-etat{ flex:none; padding:0 var(--sp-6); border-radius:var(--radius-pill); font-size:var(--fs-xs); color:var(--mut); background:var(--hover); }
  .cms-gauche .cms-sol-etat[data-serv="1"]{ color:var(--ok); background:color-mix(in srgb, var(--ok) 12%, transparent); }
  .cms-gauche .cms-sol-bande{ margin:0 0 var(--sp-8); font-size:var(--fs-xs); line-height:1.4; color:var(--mut); }
  /* CDC_PUBLICATION P2 : le bouton Publier du bandeau, et la fenêtre Publier (dans #modal, hors de .cms). */
  .cms-tete-publier{ gap:var(--sp-6); } .cms-tete-publier svg.ic{ width:14px; height:14px; }
  @media (max-width:900px){ .cms-tete-publier{ padding:0 var(--sp-6); } .cms-tete-publier > span{ display:none; } }   /* comme Discussions : l'icône seule sur un écran étroit (banc 375 px du 2026-10-19) */
  .cms-pub-phrase{ margin:0 0 var(--sp-12); color:var(--mut); }
  .cms-pub-envs{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:var(--sp-8); margin-bottom:var(--sp-12); }
  .cms-pub-env{ display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:var(--sp-4); min-width:0; padding:var(--sp-10) var(--sp-12); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card); font:inherit; text-align:start; color:var(--txt); cursor:pointer; }
  .cms-pub-env:hover{ border-color:color-mix(in srgb, var(--cms-accent) 40%, var(--line)); }
  .cms-pub-env.on{ border-color:var(--cms-accent); box-shadow:0 0 0 1px var(--cms-accent); }
  .cms-pub-env-nom{ font-weight:var(--fw-strong); } .cms-pub-env-type{ font-weight:var(--fw-regular); font-size:var(--fs-xs); color:var(--mut); }
  .cms-pub-env-site{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--mut); }
  .cms-pub-env-ligne{ font-size:var(--fs-xs); color:var(--mut); }
  .cms-pub-neuf{ border-style:dashed; }
  /* CDC_APPSTUDIO_MODIF I13 (PUB6) : relier un domaine à l'environnement choisi, sous ses cartes. */
  .cms-pub-dom{ display:grid; gap:var(--sp-6); margin:0 0 var(--sp-12); padding-top:var(--sp-10); border-top:1px solid var(--line); }
  .cms-pub-dom-actuel{ margin:0; font-size:var(--fs-sm); color:var(--mut); overflow-wrap:anywhere; }
  .cms-pub-dom-ligne{ display:flex; gap:var(--sp-6); align-items:center; } .cms-pub-dom-ligne input{ flex:1; min-width:0; }
  .cms-pub-dom-recs{ margin:0; padding:0; list-style:none; } .cms-pub-dom-recs li{ display:flex; gap:var(--sp-8); align-items:center; font-size:var(--fs-xs); }
  .cms-pub-dom-verdict{ display:flex; gap:var(--sp-6); align-items:center; margin:0; font-size:var(--fs-sm); color:var(--warn); }
  .cms-pub-dom-verdict[data-verdict="conforme"]{ color:var(--ok); } .cms-pub-dom-verdict svg.ic{ width:14px; height:14px; flex:none; }
  /* CDC_SOLUTIONS S5 : la liste des différences entre deux solutions. */
  .cms-cmp{ margin:0; padding-inline-start:var(--sp-16); display:grid; gap:var(--sp-4); }
  .cms-cmp [data-change="ajoute"]{ color:var(--ok); } .cms-cmp [data-change="retire"]{ color:var(--err, var(--warn)); }
  .cms-gauche .cms-sol-lien{ padding:0; border:0; background:none; font:inherit; color:var(--cms-accent); text-decoration:underline; cursor:pointer; }
  .cms-gauche .cms-ecran-plus{ position:relative; z-index:var(--cms-z-ecran-plus); flex:none; width:var(--cms-h-c); height:var(--cms-h-c); }
  /* ── L'orientation et le cadre tiré (2026-10-17, le proprio : « vertical ou horizontal pour Smartphone et Tablette » ; « en bas
     à droite et sur les côtés, redimensionner la fenêtre du rendu à la main »). Les bords sont posés DEHORS du cadre (le cadre
     laisse donc déborder, ses coins arrondis portés par ses enfants), pour ne jamais couvrir l'ascenseur de la page ; leur
     épaisseur est divisée par le zoom (le cadre est zoomé) : 8 px d'écran à tout zoom. Sous 900 px, pas de bords : la page défile. ── */
  .cms-ap-orient{ display:flex; gap:var(--sp-2); margin-top:var(--sp-4); padding:var(--sp-6) var(--sp-4) 0; border-top:1px solid var(--line); }
  .cms-ap-orient .cms-ap-app{ flex:1; justify-content:center; } .cms-ap-orient .cms-ap-app:disabled{ opacity:.45; cursor:default; }
  .cms-ap-largeur.cms-ap-hauteur{ margin-top:0; border-top:0; }
  .cms-cadre-bord, .cms-cadre-taille{ display:none; }
  @media (min-width:901px){
    .cms-centre:has(> .cms-apercu) > .cms-apercu{ overflow:visible; }
    .cms-centre:has(> .cms-apercu) > .cms-apercu > :first-child{ border-start-start-radius:inherit; border-start-end-radius:inherit; }
    .cms-centre:has(> .cms-apercu) > .cms-apercu > .cms-ap-page{ border-end-start-radius:inherit; border-end-end-radius:inherit; }
    .cms-centre:has(> .cms-apercu) .cms-cadre-bord{ --t:calc(8px / var(--cms-zoom, 1)); display:block; position:absolute; z-index:var(--cms-z-cadre-bord); }
    .cms-cadre-bord[data-cms-cadre-bord="e"], .cms-cadre-bord[data-cms-cadre-bord="w"]{ top:0; bottom:0; width:var(--t); cursor:ew-resize; }
    .cms-cadre-bord[data-cms-cadre-bord="e"]{ right:calc(var(--t) * -1); } .cms-cadre-bord[data-cms-cadre-bord="w"]{ left:calc(var(--t) * -1); }
    .cms-cadre-bord[data-cms-cadre-bord="s"]{ left:0; right:0; bottom:calc(var(--t) * -1); height:var(--t); cursor:ns-resize; }
    .cms-cadre-bord:is([data-cms-cadre-bord="se"], [data-cms-cadre-bord="sw"]){ bottom:calc(var(--t) * -1.5); width:calc(var(--t) * 2); height:calc(var(--t) * 2); z-index:var(--cms-z-cadre-coin); }
    .cms-cadre-bord[data-cms-cadre-bord="se"]{ right:calc(var(--t) * -1.5); cursor:nwse-resize; } .cms-cadre-bord[data-cms-cadre-bord="sw"]{ left:calc(var(--t) * -1.5); cursor:nesw-resize; }
    /* La prise : une pilule au milieu de chaque bord, un angle aux coins ; elle paraît quand le pointeur approche du bord (à 20 px,
       cmsCadreBordsProches), pleine sur le bord survolé ou tenu. */
    .cms-cadre-bord::after{ content:""; position:absolute; opacity:0; background:var(--cms-accent); border-radius:var(--radius-pill); }
    .cms-cadre-bord:is([data-cms-cadre-bord="e"], [data-cms-cadre-bord="w"])::after{ top:50%; left:50%; width:calc(var(--t) / 2); height:calc(var(--t) * 5); translate:-50% -50%; }
    .cms-cadre-bord[data-cms-cadre-bord="s"]::after{ top:50%; left:50%; width:calc(var(--t) * 5); height:calc(var(--t) / 2); translate:-50% -50%; }
    .cms-cadre-bord:is([data-cms-cadre-bord="se"], [data-cms-cadre-bord="sw"])::after{ inset:calc(var(--t) / 2); border-radius:var(--radius-none); background:none; border:solid var(--cms-accent); border-width:0 calc(var(--t) / 3.5) calc(var(--t) / 3.5) 0; }
    .cms-cadre-bord[data-cms-cadre-bord="sw"]::after{ border-width:0 0 calc(var(--t) / 3.5) calc(var(--t) / 3.5); }
    .cms-centre:has(> .cms-apercu) > .cms-apercu .cms-cadre-bord.proche::after{ opacity:.55; }
    .cms-centre:has(> .cms-apercu) > .cms-apercu .cms-cadre-bord:is(:hover, .tire)::after{ opacity:1; }
    .cms-centre:has(> .cms-apercu) .cms-cadre-taille{ --t:calc(1px / var(--cms-zoom, 1)); display:block; position:absolute; z-index:var(--cms-z-cadre-coin); top:calc(100% + var(--t) * 14); left:50%; translate:-50% 0;
      padding:calc(var(--t) * 3) calc(var(--t) * 8); border-radius:var(--radius-pill); background:var(--cms-accent-plein); color:var(--on-solid); font-size:calc(var(--t) * 12); font-weight:var(--fw-strong); font-variant-numeric:tabular-nums; white-space:nowrap; pointer-events:none; }
  }
}