/* Bibliothèque de composants HeyLioo (lot 0 de l'audit) : classes .hl-*, rendues par application/static/ui/.
   Jetons uniquement (brand/tokens.css, mode sombre par brand/theme.css) ; aucune valeur de couleur, de taille de texte,
   de rayon ni d'ombre écrite ici. Équivalent iOS : ios/HeyLioo/DesignSystem/Components/HL*.swift.
   Pas encore chargée par application/index.html : les écrans migreront après validation de la galerie
   (application/static/ui/galerie.html). Contrôlée par application/tests/test_composants_ui.py. */

/* Jetons d'interface partagés avec iOS (DesignSystem/Tokens/Surfaces.swift) : sélection inversée en sombre,
   panneau encre relevé d'un cran (le fond sombre EST l'encre), texte posé sur le rouge d'erreur.
   --step-current / --step-current-on : puce de l'étape en cours (LevelSteps, Stepper, OrderSteps), un seul couple AA :
   blanc sur bleu 5,55:1 en clair, encre sur bleu clair 8,93:1 en sombre (D124, AV-007/009/010). */
:root{--selected-fill:var(--ink);--selected-text:var(--on-dark);--ink-panel:var(--ink);--ink-panel-line:transparent;--on-error:var(--on-dark);
  --step-current:var(--blue);--step-current-on:var(--on-dark);
  --logo-stage-light:var(--bg);--logo-stage-dark:var(--ink);
  --control-large:calc(var(--control) + var(--space-2));--radius-inner:calc(var(--radius-sm) - var(--space-1))}
:root[data-theme="dark"]{--selected-fill:var(--on-dark);--selected-text:var(--ink);--step-current:var(--blue-on-dark);--step-current-on:var(--ink);--ink-panel:var(--ink-3);--ink-panel-line:var(--ink-line);--on-error:var(--ink);--logo-stage-light:var(--on-dark)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--selected-fill:var(--on-dark);--selected-text:var(--ink);--step-current:var(--blue-on-dark);--step-current-on:var(--ink);--ink-panel:var(--ink-3);--ink-panel-line:var(--ink-line);--on-error:var(--ink);--logo-stage-light:var(--on-dark)}}

/* ——— Communs ——— */
.hl-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hl-icon{width:var(--space-5);height:var(--space-5);flex:none}
.hl-icon--sm{width:var(--space-4);height:var(--space-4)}
.hl-icon--lg{width:var(--space-6);height:var(--space-6)}
.hl-btn:focus-visible,.hl-icon-btn:focus-visible,.hl-chip:focus-visible,.hl-seg__item:focus-visible,.hl-swatch:focus-visible,.hl-pair:focus-visible,
.hl-row__main:focus-visible,.hl-field__input:focus-visible,.hl-check__input:focus-visible,.hl-switch__input:focus-visible,
.hl-colorfield__picker:focus-visible,.hl-section__more:focus-visible,.hl-nav__item:focus-visible,.hl-tabpanel:focus-visible,
.hl-logo__input:focus-visible+.hl-logo__choice .hl-logo__tile,.hl-file__input:focus-visible+.hl-file__drop{outline:3px solid var(--accent);outline-offset:3px}
.hl-spinner{width:var(--space-4);height:var(--space-4);border-radius:var(--radius-full);border:2px solid currentColor;border-right-color:transparent;
  animation:hl-tour 800ms linear infinite;flex:none}
.hl-spinner--lg{width:var(--space-8);height:var(--space-8);border-width:3px;color:var(--accent)}
@keyframes hl-tour{to{transform:rotate(1turn)}}
/* Focus posé par script (titre d'écran, zone principale, tabindex="-1") : aucun anneau, ni au chargement ni après un
   clic (D124, AV-075). Ces cibles ne sont pas atteignables au clavier : rien n'est perdu ; l'anneau :focus-visible des
   contrôles reste celui ci-dessus. :root relève la spécificité au-dessus des anneaux d'écran (.lioopage :focus-visible). */
:root [tabindex="-1"]:focus{outline:none}
:root :is(h1,h2,h3,h4,h5,h6,main,section,article,div,p)[tabindex="-1"]:focus{box-shadow:none}
@media (prefers-reduced-motion:reduce){.hl-spinner{animation-duration:2400ms}}

/* ——— Button ——— */
.hl-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control);
  padding:0 var(--space-5);border-radius:var(--radius-full);border:1px solid transparent;font:inherit;font-size:var(--fs-16);font-weight:600;
  line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;background:var(--blue);color:var(--on-dark);
  transition:background-color var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease)}
.hl-btn--s{min-height:var(--control);padding:0 var(--space-4);font-size:var(--fs-14)}
.hl-btn--l{min-height:var(--control-large);padding:0 var(--space-6)}
.hl-btn--block{display:flex;width:100%}
.hl-btn--primary:hover{background:var(--blue-hover)}
.hl-btn--secondary{background:var(--surface);color:var(--text);border-color:var(--line-strong)}
.hl-btn--secondary:hover{background:var(--bg-2)}
.hl-btn--ghost{background:transparent;color:var(--accent);padding:0 var(--space-3)}
.hl-btn--ghost:hover{background:var(--bg-2)}
.hl-btn--danger{background:var(--error);color:var(--on-error)}
.hl-btn--danger:hover{opacity:.9}
.hl-btn--lime{background:var(--lime);color:var(--ink)}
.hl-btn--lime:hover{opacity:.9}
.hl-btn:disabled,.hl-btn[aria-disabled="true"]{background:var(--bg-2);color:var(--text-2);border-color:transparent;cursor:not-allowed;opacity:1}
.hl-btn[aria-busy="true"]{cursor:progress}
.hl-btn--ghost:disabled{background:transparent}
.hl-btn .hl-icon{width:var(--space-5);height:var(--space-5)}
.hl-btn--s .hl-icon{width:var(--space-4);height:var(--space-4)}

/* ——— IconButton ——— */
.hl-icon-btn{position:relative;display:inline-grid;place-items:center;flex:none;width:var(--control);height:var(--control);padding:0;
  border-radius:var(--radius-full);border:1px solid var(--line-strong);background:var(--surface);color:var(--text);cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease)}
.hl-icon-btn:hover{background:var(--bg-2)}
.hl-icon-btn--s .hl-icon{width:var(--space-4);height:var(--space-4)}
/* D160 : code court à la place de l'icône (« EN », « FR ») ; même boîte, lien sans soulignement. */
a.hl-icon-btn{text-decoration:none}
.hl-icon-btn__glyph{font-size:var(--fs-14);font-weight:700;letter-spacing:.02em;line-height:1}
.hl-icon-btn--ghost{border-color:transparent;background:transparent;color:var(--text-2)}
.hl-icon-btn--primary{border-color:transparent;background:var(--blue);color:var(--on-dark)}
.hl-icon-btn--lime{border-color:transparent;background:var(--lime);color:var(--ink)}
.hl-icon-btn--primary:hover{background:var(--blue-hover)}
.hl-icon-btn--lime:hover{opacity:.9}
.hl-icon-btn:disabled{background:var(--bg-2);color:var(--text-2);border-color:transparent;cursor:not-allowed}
.hl-icon-btn[aria-pressed="true"]{background:var(--selected-fill);color:var(--selected-text);border-color:var(--selected-fill)}

/* ——— Champs : TextField, TextArea, Select, Combobox, ColorField ——— */
.hl-field{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.hl-field__label{font-size:var(--fs-14);font-weight:600;color:var(--text)}
.hl-field__req{color:var(--error)}
.hl-field__control{position:relative;display:flex;align-items:center;min-height:var(--control);border-radius:var(--radius-sm);
  border:1px solid var(--line-strong);background:var(--surface);color:var(--text);
  transition:border-color var(--dur-fast) var(--ease)}
.hl-field__control:hover{border-color:var(--text-2)}
.hl-field__control:focus-within{border-color:var(--accent)}
.hl-field__input{flex:1;min-width:0;align-self:stretch;min-height:var(--control);margin:-1px 0;padding:0 var(--space-3);border:0;
  border-radius:var(--radius-sm);background:transparent;color:inherit;font:inherit;font-size:var(--fs-16)}
.hl-field__input::placeholder{color:var(--text-2);opacity:1}
.hl-field__input--area{padding:var(--space-3);line-height:1.5;resize:vertical;min-height:calc(var(--control) * 2)}
.hl-field__input--select{appearance:none;padding-right:var(--space-10);cursor:pointer}
.hl-field__affix{padding:0 var(--space-3);color:var(--text-2);font-size:var(--fs-16);white-space:nowrap;align-self:stretch;display:flex;align-items:center;background:var(--bg-2)}
.hl-field__affix--prefix{border-right:1px solid var(--line-strong);border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.hl-field__affix--suffix{border-left:1px solid var(--line-strong);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.hl-field__chevron,.hl-field__lead{position:absolute;color:var(--text-2);pointer-events:none}
.hl-field__chevron{right:var(--space-3)}
.hl-field__lead{left:var(--space-3)}
.hl-field__lead~.hl-field__input{padding-left:var(--space-10)}
.hl-field__foot{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3)}
.hl-field__hint,.hl-field__error,.hl-field__count{margin:0;font-size:var(--fs-12);line-height:1.4;color:var(--text-2)}
.hl-field__hint{flex:1 1 60%}
.hl-field__error{flex:1 1 100%;order:-1;display:flex;gap:var(--space-1);align-items:center;color:var(--error);font-weight:600}
.hl-field__count{margin-left:auto;font-variant-numeric:tabular-nums}
.hl-field--error .hl-field__control{border-color:var(--error)}
.hl-field--disabled .hl-field__control{background:var(--bg-2);color:var(--text-2);border-color:var(--line)}
.hl-field--disabled .hl-field__input{cursor:not-allowed}

/* Combobox */
.hl-combobox{position:relative}
.hl-combobox__toggle{display:grid;place-items:center;align-self:stretch;width:var(--control);min-height:var(--control);margin:-1px 0;border:0;background:transparent;color:var(--text-2);cursor:pointer;border-radius:var(--radius-sm)}
.hl-combobox__list{position:absolute;z-index:20;top:100%;left:0;right:0;margin:var(--space-1) 0 0;padding:var(--space-1);list-style:none;
  max-height:calc(var(--control) * 6);overflow:auto;background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-md)}
.hl-combobox__option{display:flex;align-items:center;gap:var(--space-2);min-height:var(--control);padding:0 var(--space-3);border-radius:var(--radius-inner);
  cursor:pointer;color:var(--text);font-size:var(--fs-16)}
.hl-combobox__option[hidden]{display:none}
.hl-combobox__option small{color:var(--text-2);font-size:var(--fs-12)}
.hl-combobox__option .hl-icon{margin-left:auto;color:var(--accent);visibility:hidden}
.hl-combobox__option[aria-selected="true"] .hl-icon{visibility:visible}
.hl-combobox__option:hover,.hl-combobox__option--active{background:var(--bg-2)}
.hl-combobox__option--active{outline:2px solid var(--accent);outline-offset:-2px}
.hl-combobox__empty{position:absolute;z-index:20;top:100%;left:0;right:0;margin:var(--space-1) 0 0;padding:var(--space-3);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-sm);color:var(--text-2);font-size:var(--fs-14)}

/* ——— Checkbox, Radio ——— */
/* La case elle-même mesure 44 × 44 (cible tactile, D124) ; le carré de 24 px est dessiné par ::before, la coche par ::after. */
.hl-check{display:flex;align-items:flex-start;gap:var(--space-2);min-height:var(--control)}
.hl-check__input{appearance:none;position:relative;flex:none;display:grid;place-items:center;width:var(--control);height:var(--control);margin:0;padding:0;
  border:0;border-radius:var(--radius-sm);background:transparent;cursor:pointer}
.hl-check__input::before{content:"";grid-area:1/1;box-sizing:border-box;width:var(--space-6);height:var(--space-6);border:2px solid var(--line-strong);
  border-radius:var(--radius-inner);background:var(--surface);transition:background-color var(--dur-fast) var(--ease)}
.hl-check__input:hover::before{border-color:var(--text-2)}
.hl-check__input:checked::before{background:var(--blue);border-color:var(--blue)}
.hl-check__input:checked::after{content:"";grid-area:1/1;width:var(--space-3);height:6px;margin-top:-3px;border:solid var(--on-dark);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.hl-check--radio .hl-check__input{border-radius:var(--radius-full)}
.hl-check--radio .hl-check__input::before{border-radius:var(--radius-full)}
.hl-check--radio .hl-check__input:checked::before{background:var(--surface);border:7px solid var(--blue)}
.hl-check--radio .hl-check__input:checked::after{display:none}
.hl-check__text{flex:1;min-width:0;overflow-wrap:break-word;padding:calc((var(--control) - 1.3em) / 2) 0;font-size:var(--fs-16);line-height:1.3;color:var(--text);cursor:pointer}
.hl-check__text small{display:block;margin-top:2px;font-size:var(--fs-14);color:var(--text-2)}
.hl-check--disabled{opacity:.55}
.hl-check--disabled :is(.hl-check__input,.hl-check__text){cursor:not-allowed}
.hl-radio-group{margin:0;padding:0;border:0;min-width:0}
.hl-radio-group>legend{padding:0;margin-bottom:var(--space-1)}
.hl-radio-group--inline .hl-radio-group__items{display:flex;flex-wrap:wrap;gap:0 var(--space-6)}

/* ——— Switch ——— */
/* L'interrupteur mesure 52 × 44 (cible tactile, D124) : rail de 28 px en ::before, pastille en ::after. */
.hl-switch{display:flex;align-items:center;gap:var(--space-3);min-height:var(--control)}
.hl-switch__text{flex:1;min-width:0;overflow-wrap:break-word;padding:var(--space-2) 0;font-size:var(--fs-16);line-height:1.3;color:var(--text);cursor:pointer}
.hl-switch__text small{display:block;margin-top:2px;font-size:var(--fs-14);color:var(--text-2)}
.hl-switch__input{appearance:none;position:relative;flex:none;width:calc(var(--space-12) + var(--space-1));height:var(--control);margin:0;padding:0;border:0;
  border-radius:var(--radius-full);background:transparent;cursor:pointer}
.hl-switch__input::before{content:"";position:absolute;left:0;right:0;top:calc((var(--control) - var(--space-6) - var(--space-1)) / 2);height:calc(var(--space-6) + var(--space-1));
  border-radius:var(--radius-full);background:var(--line-strong);transition:background-color var(--dur-fast) var(--ease)}
.hl-switch__input::after{content:"";position:absolute;top:calc((var(--control) - var(--space-6)) / 2);left:2px;width:var(--space-6);height:var(--space-6);border-radius:var(--radius-full);
  background:var(--surface);box-shadow:var(--shadow-sm);transition:transform var(--dur-fast) var(--ease)}
:root[data-theme="dark"] .hl-switch__input::after{background:var(--on-dark)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hl-switch__input::after{background:var(--on-dark)}}
.hl-switch__input:checked::before{background:var(--blue)}
.hl-switch__input:checked::after{transform:translateX(calc(var(--space-6) - var(--space-1)))}
.hl-switch--disabled{opacity:.55}
.hl-switch--disabled :is(.hl-switch__input,.hl-switch__text){cursor:not-allowed}

/* ——— Segmented et Tabs ——— */
.hl-seg{position:relative;display:inline-flex;max-width:100%;gap:2px;padding:var(--space-1);border-radius:var(--radius-sm);background:var(--bg-2);overflow-x:auto;scrollbar-width:none}
.hl-seg::-webkit-scrollbar{display:none}
.hl-seg--block{display:flex}
/* Segments de largeur égale, jamais plus étroits que leur libellé : un groupe trop long défile (sa ligne unique), aucun
   libellé ne chevauche le suivant (correctif commander-badge : « 10 badges25 badges… »). */
.hl-seg--block .hl-seg__item{flex:1 1 0;min-width:max-content}
.hl-seg__item{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);flex:none;min-height:var(--control);
  padding:0 var(--space-4);border:0;border-radius:var(--radius-inner);background:transparent;color:var(--text-2);font:inherit;font-size:var(--fs-14);
  font-weight:600;white-space:nowrap;cursor:pointer}
.hl-seg__item:hover{color:var(--text)}
.hl-seg__item[aria-pressed="true"],.hl-seg__item[aria-selected="true"]{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
.hl-seg__item:disabled{opacity:.5;cursor:not-allowed}
.hl-seg__count{font-variant-numeric:tabular-nums;color:var(--text-2);font-weight:700}
.hl-tabpanel{padding-top:var(--space-4)}

/* ——— ChipRow et Chip ——— */
.hl-chiprow{position:relative;display:flex;gap:var(--space-2);overflow-x:auto;scrollbar-width:none;padding:var(--space-1) 2px;scroll-padding:0 var(--space-4)}
.hl-chiprow::-webkit-scrollbar{display:none}
.hl-chip{position:relative;display:inline-flex;align-items:center;gap:var(--space-2);flex:none;min-height:var(--control);padding:0 var(--space-4);
  border-radius:var(--radius-full);border:1px solid var(--line-strong);background:var(--surface);color:var(--text);font:inherit;
  font-size:var(--fs-14);font-weight:600;text-decoration:none;white-space:nowrap;cursor:pointer}
.hl-chip:hover{border-color:var(--text-2)}
.hl-chip--error{color:var(--error)}
.hl-chip[aria-pressed="true"]{background:var(--selected-fill);border-color:var(--selected-fill);color:var(--selected-text)}
.hl-chip__count{font-weight:700;color:var(--text-2);font-variant-numeric:tabular-nums}
/* Compte d'une pastille d'erreur ou choisie : la couleur pleine de la pastille, jamais atténuée (AA, D124 AV-054). */
:is(.hl-chip--error,.hl-chip[aria-pressed="true"]) .hl-chip__count{color:inherit}
.hl-chip__check{display:none}
.hl-chip--choice[aria-pressed="true"] .hl-chip__check{display:block}
.hl-chip:disabled{opacity:.5;cursor:not-allowed}

/* ——— Pill (badge d'état) ——— */
.hl-pill{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px var(--space-2);border-radius:var(--radius-full);
  background:var(--bg-2);color:var(--text-2);font-size:var(--fs-12);font-weight:700;line-height:1.4;white-space:nowrap;vertical-align:middle}
.hl-pill::before{content:"";width:6px;height:6px;border-radius:var(--radius-full);background:currentColor}
.hl-pill--nodot::before{display:none}
.hl-pill--success{background:var(--success-bg);color:var(--success)}
.hl-pill--warning{background:var(--warning-bg);color:var(--warning)}
.hl-pill--error{background:var(--error-bg);color:var(--error)}
.hl-pill--info{background:var(--info-bg);color:var(--info)}
.hl-pill--lime{background:var(--lime);color:var(--ink)}
.hl-pill--ink{background:var(--selected-fill);color:var(--selected-text)}

/* ——— Verrous : ProTag, LockZone, LockCard, LockPreview ——— */
.hl-protag{position:relative;display:inline-flex;align-items:center;gap:var(--space-1);padding:1px var(--space-2);border-radius:var(--radius-full);
  font-size:var(--fs-12);font-weight:800;line-height:1.4;letter-spacing:.02em;white-space:nowrap;vertical-align:middle;
  background:var(--lime);color:var(--ink)}
.hl-protag .hl-icon{width:var(--space-3);height:var(--space-3)}
.hl-protag--equipe{background:var(--selected-fill);color:var(--selected-text)}
/* D46 : la pastille Équipe est le cadenas seul (le texte reste lu par les lecteurs d'écran). */
.hl-protag--icon{padding:var(--space-1);line-height:0}
/* Cadenas Équipe au trait, sans disque : il prend la couleur du texte qui l'entoure (lisible en clair, en sombre, sur
   une entrée de menu choisie ou sur le panneau encre d'une LockCard) (D124, AV-011). */
.hl-protag--equipe.hl-protag--icon{padding:0;background:transparent;color:inherit}
.hl-protag--equipe.hl-protag--icon .hl-icon{width:var(--space-4);height:var(--space-4)}
.hl-protag--delegation{background:var(--bg-2);color:var(--text);border:1px solid var(--line-strong)}
/* D74 : pastille interactive (cadenas « Délégation » qui ouvre la demande) : bouton de 44 px autour de la pastille. */
.hl-protag-btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;margin:0;border:0;
  background:none;color:inherit;font:inherit;cursor:pointer;text-decoration:none;vertical-align:middle;border-radius:var(--radius-full)}
.hl-protag-btn:hover .hl-protag{border-color:var(--text-2)}
.hl-protag-btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.hl-lockzone{position:relative;margin-top:var(--space-4);padding:var(--space-4);border-radius:var(--radius-md);border:2px dashed var(--line-strong)}
.hl-lockzone__tag{position:absolute;top:0;right:var(--space-4);transform:translateY(-50%);display:flex;align-items:center;gap:var(--space-2);
  padding:0 var(--space-2);background:var(--bg);font-size:var(--fs-12);font-weight:700;color:var(--text-2)}
.hl-lockzone__body{opacity:.5;filter:saturate(.6);user-select:none}
/* Icône à gauche, puis titre, texte et action empilés (jamais l'action collée au titre, D57, D124 AV-076). */
.hl-lockcard{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--space-3) var(--space-4);padding:var(--space-4);border-radius:var(--radius-md);
  background:var(--ink-panel);border:1px solid var(--ink-panel-line);color:var(--on-dark)}
.hl-lockcard__icon{display:grid;place-items:center;flex:none;width:var(--control);height:var(--control);border-radius:var(--radius-sm);background:var(--lime);color:var(--ink)}
.hl-lockcard__text{min-width:0;display:flex;flex-direction:column;gap:var(--space-1)}
.hl-lockcard__title{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font-size:var(--fs-16);font-weight:700;line-height:1.3;color:var(--on-dark);overflow-wrap:anywhere}
.hl-lockcard__text p{margin:0;font-size:var(--fs-14);line-height:1.4;color:var(--on-dark-2)}
.hl-lockcard__action{grid-column:2;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.hl-lockpreview{position:relative;display:grid;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.hl-lockpreview>*{grid-area:1/1}
.hl-lockpreview__sample{padding:var(--space-4);opacity:.45;filter:blur(3px) saturate(.6);user-select:none}
.hl-lockpreview__card{position:relative;z-index:1;align-self:center;justify-self:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);
  max-width:min(360px,calc(100% - var(--space-8)));margin:var(--space-6) var(--space-4);padding:var(--space-5);text-align:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-md)}
.hl-lockpreview__title{margin:0;font-size:var(--fs-16);font-weight:700;color:var(--text)}
.hl-lockpreview__card p{margin:0 0 var(--space-2);font-size:var(--fs-14);color:var(--text-2)}

/* ——— Section, CardList, Row ——— */
.hl-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-5)}
.hl-card:has(>.hl-cardlist:only-child){padding:0;overflow:hidden}
.hl-section{display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.hl-section__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);min-height:var(--control-small)}
.hl-section__title{margin:0;font-size:var(--fs-16);font-weight:700;color:var(--text)}
.hl-section__more{margin-left:auto;display:inline-flex;align-items:center;min-height:var(--control);font-size:var(--fs-14);font-weight:600;color:var(--accent);text-decoration:none}
.hl-section__head>.hl-btn{margin-left:auto}
.hl-section__foot{margin:0;padding:0 var(--space-1);font-size:var(--fs-12);color:var(--text-2)}
.hl-cardlist{margin:0;padding:0;list-style:none}
.hl-row+.hl-row{border-top:1px solid var(--line)}
.hl-row__main{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:calc(var(--control) + var(--space-4));padding:var(--space-3) var(--space-4);
  border:0;background:transparent;color:var(--text);font:inherit;text-align:left;text-decoration:none}
:is(a,button).hl-row__main{cursor:pointer}
:is(a,button).hl-row__main:hover{background:var(--bg-2)}
.hl-row__icon{display:grid;place-items:center;flex:none;width:calc(var(--control) - var(--space-1));height:calc(var(--control) - var(--space-1));border-radius:var(--radius-sm);background:var(--bg-2);color:var(--accent)}
.hl-row__icon--neutral{color:var(--text-2)}
.hl-row__icon--error{background:var(--error-bg);color:var(--error)}
.hl-row__icon--lime{background:var(--lime);color:var(--ink)}
.hl-row__text{flex:1;min-width:0;display:flex;flex-direction:column}
.hl-row__title{font-size:var(--fs-16);font-weight:600;overflow-wrap:anywhere}
.hl-row__subtitle{font-size:var(--fs-14);color:var(--text-2);overflow-wrap:anywhere}
.hl-row__value{font-size:var(--fs-14);color:var(--text-2);white-space:nowrap}
.hl-row__chevron{color:var(--text-2)}
/* Ligne à actions (Row.actions) : les boutons passent sous le texte quand la place manque, puis s'empilent en pleine
   largeur ; le texte garde une largeur minimale, il ne se coupe jamais lettre par lettre. */
.hl-row__main--actions{flex-wrap:wrap;row-gap:var(--space-2)}
.hl-row__main--actions>.hl-row__text{flex:1 1 calc(var(--control) * 5);min-width:calc(var(--control) * 3)}
.hl-row__actions{display:flex;flex-wrap:wrap;gap:var(--space-2);flex:0 1 auto;max-width:100%;margin-left:auto}
.hl-row__actions>.hl-btn{flex:1 1 auto}

/* ——— Dialog ——— */
.hl-dialog{width:min(100% - var(--space-8),520px);max-height:min(100% - var(--space-8),90vh);padding:0;border:0;border-radius:var(--radius-lg);
  background:var(--bg);color:var(--text);box-shadow:var(--shadow-lg)}
.hl-dialog--s{width:min(100% - var(--space-8),400px)}
.hl-dialog--l{width:min(100% - var(--space-8),720px)}
.hl-dialog::backdrop{background:var(--ink);opacity:.55}
.hl-dialog__body{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-8) var(--space-6) var(--space-6)}
.hl-dialog__title{margin:0;padding-right:var(--space-12);font-size:var(--fs-24);font-weight:700;line-height:1.2}
.hl-dialog__message{margin:0;font-size:var(--fs-16);color:var(--text-2)}
.hl-dialog__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-2)}
.hl-dialog__close{position:absolute;top:var(--space-3);right:var(--space-3)}

/* ——— Notice ——— */
.hl-notice{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);
  background:var(--info-bg);color:var(--text);font-size:var(--fs-14)}
.hl-notice--success{background:var(--success-bg)}
.hl-notice--warning{background:var(--warning-bg)}
.hl-notice--error{background:var(--error-bg)}
.hl-notice__text{flex:1 1 220px;min-width:0}
.hl-notice__text strong{display:block;font-weight:700}
.hl-notice__text p{margin:0}
.hl-notice__action{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}
/* D57 : bannière à action = titre, texte, puis l'action dessous, alignée à gauche (jamais collée au texte). */
.hl-notice--action{align-items:flex-start;flex-wrap:nowrap}
.hl-mark{display:grid;place-items:center;flex:none;align-self:flex-start;width:var(--space-6);height:var(--space-6);border-radius:var(--radius-full);
  background:var(--info);color:var(--surface);font-size:var(--fs-14);font-weight:800;line-height:1}
.hl-mark--success{background:var(--success)}
.hl-mark--warning{background:var(--warning)}
.hl-mark--error{background:var(--error)}
.hl-mark--neutral{background:var(--text-2)}
.hl-dialog__body>.hl-mark{width:var(--space-12);height:var(--space-12);font-size:var(--fs-24)}

/* ——— StateView ——— */
.hl-state{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-8) var(--space-4);text-align:center}
.hl-state__icon{display:grid;place-items:center;width:var(--space-12);height:var(--space-12);border-radius:var(--radius-full);background:var(--bg-2);color:var(--text-2)}
.hl-state--error .hl-state__icon{background:var(--error-bg);color:var(--error)}
.hl-state__title{margin:var(--space-2) 0 0;font-size:var(--fs-16);font-weight:700;color:var(--text)}
.hl-state__text{margin:0;max-width:44ch;font-size:var(--fs-14);color:var(--text-2)}
.hl-state__action{margin-top:var(--space-3)}

/* ——— KpiTile ——— */
.hl-kpi{display:flex;flex-direction:column;gap:2px;min-height:calc(var(--space-24) + var(--space-4));padding:var(--space-4);border-radius:var(--radius-md);
  background:var(--blue);color:var(--on-dark)}
.hl-kpi p{margin:0;color:inherit}
.hl-kpi__label{font-size:var(--fs-14);font-weight:600}
.hl-kpi__value{font-size:var(--fs-30);font-weight:800;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hl-kpi .hl-kpi__delta{margin-top:auto;font-size:var(--fs-12);font-weight:700;opacity:.9}
.hl-kpi--lime{background:var(--lime);color:var(--ink)}
.hl-kpi--ink{background:var(--ink-panel);border:1px solid var(--ink-panel-line)}

/* ——— Relation et mesures : Chip verrouillée, Row (detail, current), Avatar, QuickActionTile, Timeline, BarChart, Meter ——— */
.hl-chip--locked{color:var(--text-2);border-style:dashed}
.hl-chip--locked .hl-protag{margin-right:calc(var(--space-2) * -1)}
.hl-row--current>.hl-row__main{background:var(--info-bg)}
.hl-avatar{display:inline-grid;place-items:center;flex:none;width:var(--space-10);height:var(--space-10);border-radius:var(--radius-full);overflow:hidden;
  background:var(--bg-2);color:var(--text-2);font-size:var(--fs-14);font-weight:700;letter-spacing:.02em}
.hl-avatar img{width:100%;height:100%;object-fit:cover}
.hl-avatar--s{width:var(--space-8);height:var(--space-8);font-size:var(--fs-12)}
.hl-avatar--l{width:calc(var(--space-12) + var(--space-2));height:calc(var(--space-12) + var(--space-2));font-size:var(--fs-16)}
.hl-avatar--xl{width:calc(var(--space-16) + var(--space-5));height:calc(var(--space-16) + var(--space-5));font-size:var(--fs-30)}
.hl-avatar--t1{background:var(--info-bg);color:var(--info)}
.hl-avatar--t2{background:var(--success-bg);color:var(--success)}
.hl-avatar--t3{background:var(--warning-bg);color:var(--warning)}
.hl-avatar--t4{background:var(--bg-2);color:var(--text)}
.hl-avatar--t5{background:var(--error-bg);color:var(--error)}
.hl-qa-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2)}
.hl-qa{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);min-height:calc(var(--control) + var(--space-6) + var(--space-1));
  padding:var(--space-2);border-radius:var(--radius-md);border:1px solid var(--line-strong);background:var(--surface);color:var(--text);
  font:inherit;font-size:var(--fs-14);font-weight:600;text-align:center;text-decoration:none;cursor:pointer}
.hl-qa:hover{border-color:var(--text-2)}
.hl-qa:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.hl-qa--lime{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.hl-qa--primary{background:var(--accent);border-color:var(--accent);color:var(--on-dark)}
.hl-qa:disabled{background:var(--bg-2);color:var(--text-2);border-color:var(--line);cursor:not-allowed}
.hl-qa--locked{color:var(--text-2);border-style:dashed;background:var(--surface)}
.hl-qa__label{overflow-wrap:anywhere;line-height:1.2}
.hl-timeline{margin:0;padding:0;list-style:none}
.hl-timeline__item{display:grid;grid-template-columns:calc(var(--space-6) + var(--space-1)) minmax(0,1fr) auto;gap:var(--space-3);align-items:center;padding:var(--space-2) 0;font-size:var(--fs-14)}
.hl-timeline__item+.hl-timeline__item{border-top:1px solid var(--line)}
.hl-timeline__icon{display:grid;place-items:center;width:calc(var(--space-6) + var(--space-1));height:calc(var(--space-6) + var(--space-1));border-radius:var(--radius-full);background:var(--bg-2);color:var(--accent)}
.hl-timeline__text{display:flex;flex-direction:column;min-width:0}
.hl-timeline__title{color:var(--text);overflow-wrap:anywhere}
.hl-timeline__detail,.hl-timeline__when,.hl-timeline__empty{color:var(--text-2);font-size:var(--fs-12)}
.hl-timeline__empty{margin:0}
.hl-chart__svg{display:block;width:100%;height:calc(var(--space-24) * 2)}
.hl-chart__grid{stroke:var(--line);stroke-width:1}
.hl-chart__bar--blue{fill:var(--blue)}
.hl-chart__bar--accent{fill:var(--accent)}
.hl-chart__bar--lime{fill:var(--lime)}
.hl-chart__axis{display:flex;justify-content:space-between;gap:var(--space-2);margin-top:var(--space-2);font-size:var(--fs-12);color:var(--text-2)}
.hl-chart__values{margin-top:var(--space-2);font-size:var(--fs-14);color:var(--text-2)}
.hl-chart__values summary{min-height:var(--control);display:flex;align-items:center;cursor:pointer;color:var(--accent);font-weight:600}
.hl-chart__values ul{margin:0;padding-left:var(--space-5);columns:2}
@media (max-width:420px){.hl-qa-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ——— FileField ——— */
.hl-file{position:relative;display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.hl-file__input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.hl-file__drop{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4);border:2px dashed var(--line-strong);border-radius:var(--radius-md);
  background:var(--surface);cursor:pointer;transition:border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease)}
.hl-file__drop:hover,.hl-file--over .hl-file__drop{border-color:var(--accent);background:var(--info-bg)}
.hl-file__mark{display:grid;place-items:center;flex:none;width:var(--space-12);height:var(--space-12);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--accent)}
.hl-file__text{display:flex;flex-wrap:wrap;column-gap:var(--space-1);font-size:var(--fs-16);color:var(--text)}
.hl-file__text b{font-weight:700;color:var(--accent)}
.hl-file__or{color:var(--text-2)}
.hl-file__text small{flex-basis:100%;font-size:var(--fs-12);color:var(--text-2)}
.hl-file__chosen{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
.hl-file__chosen[hidden]{display:none}
.hl-file__thumb{display:grid;place-items:center;flex:none;width:var(--space-10);height:var(--space-10);border-radius:var(--radius-inner);background:var(--bg-2);color:var(--text-2);overflow:hidden}
.hl-file__thumb img{max-width:100%;max-height:100%;object-fit:contain}
.hl-file__name{flex:1;min-width:0;font-size:var(--fs-14);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hl-file.hl-field--error .hl-file__drop{border-color:var(--error)}
.hl-file--disabled .hl-file__drop{opacity:.55;cursor:not-allowed}

/* ——— ColorSwatch, ColorPairs, ColorField ——— */
.hl-swatches,.hl-pairs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1)}
.hl-swatch{position:relative;flex:none;width:var(--control);height:var(--control);padding:0;border:0;background:transparent;cursor:pointer;border-radius:var(--radius-full)}
.hl-swatch::before{content:"";position:absolute;inset:5px;border-radius:var(--radius-full);background:var(--hl-swatch);border:1px solid var(--line-strong)}
.hl-swatch[aria-pressed="true"]::after,.hl-pair[aria-pressed="true"]::after{content:"";position:absolute;inset:1px;border-radius:inherit;border:2px solid var(--accent)}
.hl-swatch--custom::before{background:conic-gradient(var(--error) 0 16%,var(--warning-on-dark) 0 33%,var(--success) 0 50%,var(--blue-on-dark) 0 66%,var(--blue) 0 83%,var(--studio-clay) 0)}
.hl-pair{position:relative;flex:none;width:calc(var(--control) + var(--space-2));height:var(--control);padding:0;border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);background:var(--hl-pair-bg);color:var(--hl-pair-ink);font:inherit;font-size:var(--fs-16);font-weight:800;cursor:pointer}
.hl-pair[aria-pressed="true"]::after{inset:-5px;border-radius:calc(var(--radius-sm) + var(--space-1))}
/* Nuancier : l'élément mesure 44 × 44 (cible tactile, D124) ; la pastille de couleur de 32 px est dessinée dedans. */
.hl-colorfield__picker{box-sizing:border-box;flex:none;align-self:stretch;width:var(--control);min-height:var(--control);height:auto;margin:-1px 0 -1px -1px;
  padding:calc(var(--space-3) / 2);border:0;border-radius:var(--radius-sm);background:transparent;cursor:pointer}
.hl-colorfield__picker::-webkit-color-swatch-wrapper{padding:0}
.hl-colorfield__picker::-webkit-color-swatch{border:1px solid var(--line-strong);border-radius:var(--radius-inner)}
.hl-colorfield__picker::-moz-color-swatch{border:1px solid var(--line-strong);border-radius:var(--radius-inner)}
.hl-colorfield__hex{font-variant-numeric:tabular-nums;text-transform:uppercase;letter-spacing:.04em}
.hl-field__error[hidden]{display:none}

/* ——— LogoPicker ——— */
.hl-logopick{margin:0;padding:0;border:0;min-width:0}
.hl-logopick>legend{padding:0;margin-bottom:var(--space-2)}
.hl-logopick__row{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--space-24) + var(--space-2)),1fr));gap:var(--space-3);padding:var(--space-1) var(--space-1) var(--space-2)}
.hl-logo{position:relative;min-width:0}
.hl-logo__input{position:absolute;opacity:0;width:1px;height:1px}
.hl-logo__choice{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);cursor:pointer}
.hl-logo__tile{position:relative;display:grid;place-items:center;align-self:stretch;height:var(--space-16);border-radius:var(--radius-sm);
  background:var(--hl-logo-bg,var(--surface));color:var(--hl-logo-ink,var(--text-2));border:1px solid var(--line-strong)}
.hl-logo__tile>.hl-logoframe{position:absolute;inset:0;--hl-logoframe-pad:var(--space-2)}
/* Texte de remplacement (« Aucun ») : sur sa propre plaque, lisible quelle que soit la couleur de la face (AA, AV-066). */
.hl-logo__mark{padding:2px var(--space-2);border-radius:var(--radius-full);background:var(--surface);color:var(--text);font-size:var(--fs-12);font-weight:700}
.hl-logo__input:checked+.hl-logo__choice .hl-logo__tile{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:2px}
.hl-logo__input:disabled+.hl-logo__choice{cursor:not-allowed}
.hl-logo__cons{padding:0 var(--space-2);border-radius:var(--radius-full);background:var(--lime);color:var(--ink);font-size:var(--fs-12);font-weight:800;line-height:1.5}
/* ——— LogoFrame : cadre d'un logo, contenu (jamais rogné ni déformé), centré, marge intérieure ——— */
.hl-logoframe{position:relative;display:block;box-sizing:border-box;width:100%;height:100%;min-width:0;min-height:0;padding:var(--hl-logoframe-pad,0)}
.hl-logoframe>.hl-logoframe__img{display:block;box-sizing:border-box;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;object-position:center;border-radius:0}
.hl-logoframe--natural{display:flex;align-items:center;justify-content:center}
.hl-logoframe--natural>.hl-logoframe__img{width:auto;height:auto;max-width:100%;max-height:100%}
/* ——— LogoTile, LogoGrid (kit de logos, D76) : un aperçu sur le fond du type, logo sans tuile (160 × 64 au plus,
   ratio conservé, jamais agrandi), étoile « Principal » exclusive, confirmation de suppression dans la carte ——— */
.hl-logogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,calc(var(--space-24)*2 + var(--space-10))),1fr));gap:var(--space-4)}
.hl-logogrid__item{display:flex;min-width:0}
.hl-logogrid__drop{display:flex;min-width:0}
.hl-logogrid__drop .hl-file{flex:1}
.hl-logogrid__drop .hl-file__drop{flex:1;flex-direction:column;justify-content:center;text-align:center;min-height:calc(var(--space-24)*2 + var(--space-12))}
.hl-logogrid__drop .hl-file__text{justify-content:center}
.hl-logotile{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
.hl-logotile--main{border-color:var(--accent);outline:1px solid var(--accent);outline-offset:-2px}
.hl-logotile__stage{position:relative;display:flex;flex-direction:column;align-items:stretch;height:calc(var(--space-24) + var(--space-6));padding:var(--space-2) var(--space-5) var(--space-4);background:var(--logo-stage-light)}
.hl-logotile__band{display:flex;align-items:center;height:var(--space-6);flex:none}
.hl-logotile__box{flex:1;min-height:0;display:flex;justify-content:center}
.hl-logotile__box>.hl-logoframe{width:min(100%,calc(var(--space-16)*2.5));height:min(100%,var(--space-16))}
.hl-logotile__stage--dark{background:var(--logo-stage-dark)}
/* D125 : logo SVG recoloré, montré sur fond clair et sur fond foncé. */
.hl-logotile__stage--split{padding:var(--space-2) 0 0}
.hl-logotile__stage--split>.hl-logotile__band{padding:0 var(--space-4)}
.hl-logotile__panes{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr}
.hl-logotile__pane{display:flex;flex-direction:column;gap:var(--space-1);min-width:0;padding:var(--space-2) var(--space-3) var(--space-2);background:var(--logo-stage-light)}
.hl-logotile__pane--dark{background:var(--logo-stage-dark)}
.hl-logotile__pane .hl-logotile__box>.hl-logoframe{width:100%;height:min(100%,var(--space-12))}
.hl-logotile__cap{font-size:var(--fs-12);color:var(--text-2);text-align:center}
.hl-logotile__pane--dark .hl-logotile__cap{color:var(--on-dark)}
.hl-logotile__flag{margin:0}
.hl-logotile__main{padding:var(--space-1) var(--space-2);border-radius:var(--radius-full);background:var(--blue);color:var(--on-dark);
  font-size:var(--fs-12);font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1}
.hl-logotile__body{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3) var(--space-4) var(--space-4);flex:1}
.hl-logotile__row{display:flex;align-items:center;gap:var(--space-1);min-width:0}
.hl-logotile__name{flex:1;min-width:0;margin:0;font-size:var(--fs-16);font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hl-logotile__star[aria-pressed="true"]{background:transparent;border-color:transparent;color:var(--accent);--hl-icon-fill:currentColor}
.hl-logotile__meta{margin:0;font-size:var(--fs-12);color:var(--text-2);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.hl-logotile__confirm{display:flex;flex-direction:column;gap:var(--space-2)}
.hl-logotile__ask{margin:0;font-size:var(--fs-14);color:var(--text)}
.hl-logotile__ask span{display:block;font-size:var(--fs-12);color:var(--text-2)}
.hl-logotile__actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.hl-logo__label{font-size:var(--fs-14);font-weight:600;color:var(--text);line-height:1.3}
.hl-logo__label small{display:block;font-size:var(--fs-12);font-weight:400;color:var(--text-2)}

/* ——— ScreenHeader ——— */
.hl-screenhead{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-4)}
.hl-screenhead__text{flex:1 1 320px;min-width:0}
.hl-kicker{margin:0 0 var(--space-1);font-size:var(--fs-12);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-2)}
.hl-screenhead__title{margin:0;font-size:var(--fs-30);font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--text)}
.hl-screenhead__subtitle{margin:var(--space-1) 0 0;font-size:var(--fs-16);color:var(--text-2)}
.hl-screenhead__actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
/* D72 : « Terminé » (DoneButton) toujours en haut à droite, à côté du titre ; les actions passent dessous sur téléphone. */
.hl-screenhead--done{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:var(--space-3);row-gap:var(--space-3)}
.hl-screenhead--done .hl-screenhead__text{grid-column:1;grid-row:1}
.hl-screenhead--done .hl-screenhead__done{grid-column:2;grid-row:1}
.hl-screenhead--done .hl-screenhead__actions{grid-column:1 / -1;grid-row:2;align-items:center}
@media (min-width:900px){
  .hl-screenhead--done{grid-template-columns:minmax(0,1fr) auto auto;align-items:end}
  .hl-screenhead--done .hl-screenhead__actions{grid-column:2;grid-row:1;justify-content:flex-end}
  .hl-screenhead--done .hl-screenhead__done{grid-column:3;align-self:start}
}

/* ——— SaveStatus (D72) : enregistrement automatique, discret ——— */
.hl-sourced{display:grid;gap:var(--space-1);min-width:0}
.hl-sourced__value{margin:0;font-size:var(--fs-16);font-weight:600;color:var(--text);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.hl-sourced__missing{display:flex;align-items:flex-start;gap:var(--space-2);margin:0;font-size:var(--fs-14);color:var(--text)}
.hl-sourced__source{margin:0;font-size:var(--fs-12);color:var(--text-2)}
.hl-sourced__link{justify-self:start;display:inline-flex;align-items:center;min-height:var(--control);font-size:var(--fs-14);font-weight:600;color:var(--accent)}
.hl-savestatus{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);min-height:var(--space-6);
  font-size:var(--fs-14);font-weight:600;color:var(--text-2)}
.hl-savestatus .hl-spinner{width:var(--space-3);height:var(--space-3)}
.hl-savestatus--saved .hl-icon{color:var(--success)}
.hl-savestatus--error{color:var(--error)}
.hl-savestatus--error .hl-btn{margin-left:calc(var(--space-1) * -1)}

/* ——— AppShell (vue 00) : menu clair, groupes titrés, barre du haut ; sous 860 px, barre mobile et TabBar ——— */
/* Largeur du menu déclarée comme longueur : la colonne et son fond suivent ensemble le repli (aucune saccade). */
@property --hl-shell-nav{syntax:'<length>';inherits:true;initial-value:0px}
.hl-shell{position:relative;container:hl-shell/inline-size;min-height:100vh;background:var(--bg);color:var(--text);
  --hl-on-light:block;--hl-on-dark:none}
:root[data-theme="dark"] .hl-shell{--hl-on-light:none;--hl-on-dark:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hl-shell{--hl-on-light:none;--hl-on-dark:block}}
.hl-shell__frame{display:grid;grid-template-columns:minmax(0,1fr);min-height:100vh}
.hl-shell__nav{position:sticky;top:0;display:flex;flex-direction:column;gap:var(--space-2);height:100vh;padding:var(--space-4) var(--space-3);
  background:var(--surface);border-right:1px solid var(--line);color:var(--text)}
.hl-shell__brand{flex:none}
/* Tête du menu : logo HeyLioo (texte, encre en clair et blanc en sombre ; symbole maillon replié) et bouton de repli. */
.hl-shell__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);flex:none;min-height:var(--control);padding-left:var(--space-2)}
.hl-shell__logo{display:inline-flex;align-items:center;min-width:0;min-height:var(--control);padding:0 var(--space-1);border-radius:var(--radius-sm)}
.hl-shell__logo-text{width:calc(var(--space-16) * 2 + var(--space-3));max-width:100%;height:auto}
.hl-shell__logo-icon{width:var(--space-12);height:auto}
.hl-shell__logo--light{display:var(--hl-on-light)}
.hl-shell__logo--dark{display:var(--hl-on-dark)}
.hl-shell:not(.hl-shell--rail) .hl-shell__logo-icon,.hl-shell--rail .hl-shell__logo-text{display:none}
.hl-shell__logo:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.hl-shell__toggle .hl-icon{transition:transform var(--dur-slow) var(--ease)}
/* Infobulle du rail : posée par monterAppShell à droite de l'entrée survolée ou focalisée, hors de la liste qui défile. */
.hl-shell__tip{--hl-tip-x:0px;--hl-tip-y:0px;position:absolute;z-index:40;top:var(--hl-tip-y);left:calc(var(--hl-tip-x) + var(--space-2));transform:translateY(-50%);
  padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);background:var(--selected-fill);color:var(--selected-text);box-shadow:var(--shadow-md);
  font-size:var(--fs-12);font-weight:600;white-space:nowrap;pointer-events:none}
.hl-shell__tip[hidden]{display:none}
.hl-shell__scroll{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:2px}
.hl-shell__scroll::-webkit-scrollbar{display:none}
/* La liste défile : ses blocs gardent leur hauteur (sinon les intertitres repliés en filet, overflow:hidden, et les
   derniers groupes — outils HeyLioo, Production — se tassent à zéro quand le menu manque de place). */
.hl-shell__scroll>*{flex-shrink:0}
.hl-shell__foot{flex:none;display:flex;flex-direction:column;gap:2px;padding-top:var(--space-2);border-top:1px solid var(--line)}
.hl-nav{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.hl-nav__group{margin:var(--space-3) 0 var(--space-1);padding:0 var(--space-3);font-size:var(--fs-12);font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text-2)}
.hl-nav__item{display:flex;align-items:center;gap:var(--space-2);min-height:var(--control);padding:0 var(--space-2) 0 var(--space-3);border-radius:var(--radius-sm);
  color:var(--text);font-size:var(--fs-14);font-weight:600;text-decoration:none;white-space:nowrap}
.hl-nav__item .hl-icon{color:var(--text-2)}
.hl-nav__item:hover{background:var(--bg-2)}
.hl-nav__item--current,.hl-nav__item--current:hover{background:var(--selected-fill);color:var(--selected-text)}
.hl-nav__item--current .hl-icon{color:var(--selected-text)}
.hl-nav__label{min-width:0;overflow:hidden;text-overflow:ellipsis}
.hl-nav__count{margin-left:auto;font-size:var(--fs-12);font-weight:700;color:var(--text-2);font-variant-numeric:tabular-nums}
.hl-nav__item--current .hl-nav__count{color:inherit}
.hl-nav__item .hl-protag{margin-left:auto}
.hl-nav__count+.hl-protag{margin-left:var(--space-2)}
.hl-nav__item:focus-visible,.hl-tabbar__item:focus-visible,.hl-topbar a:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.hl-shell__body{display:flex;flex-direction:column;min-width:0}
.hl-topbar{display:flex;align-items:center;gap:var(--space-3);min-height:var(--space-16);padding:0 var(--space-8);
  border-bottom:1px solid var(--line);background:var(--bg)}
.hl-topbar__crumb{display:flex;align-items:center;gap:var(--space-2);margin:0;min-width:0;font-size:var(--fs-14);color:var(--text-2)}
.hl-topbar__crumb strong{color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl-topbar__actions{display:flex;align-items:center;gap:var(--space-2);margin-left:auto}
.hl-mtop{display:none}
.hl-shell__main{display:flex;flex-direction:column;gap:var(--space-6);flex:1;min-width:0;padding:var(--space-8);outline:0}
.hl-tabbar{display:none}
@container hl-shell (min-width:860px){
  /* La colonne du menu garde sa surface sur toute la hauteur, menu collant ou non (pages longues). */
  .hl-shell__frame{--hl-shell-nav:calc(var(--space-16) * 4);grid-template-columns:var(--hl-shell-nav) minmax(0,1fr);
    background:linear-gradient(to right,var(--surface) calc(var(--hl-shell-nav) - 1px),var(--line) 0 var(--hl-shell-nav),transparent 0)}
  /* La largeur ne s'anime que sur un repli ou un dépli demandé (classe posée par monterAppShell le temps du geste) :
     sinon chaque nouvelle évaluation de la requête de conteneur (redimensionnement de la fenêtre, capture pleine page)
     repartait de la valeur initiale de --hl-shell-nav (0) et montrait un menu à demi ouvert (« ORGA », « [ »). */
  .hl-shell--anim .hl-shell__frame{transition:--hl-shell-nav var(--dur-slow) var(--ease)}
  /* Rail (menu replié) : icônes centrées (cible 64 × 44), libellés lus mais masqués, intertitres en filet, verrous et
     compteurs sous l'icône, organisation et personne réduites à leur avatar (data-hl-rail). */
  /* Pendant l'animation de la colonne, rien du menu (libellés du pied, nom d'organisation) ne déborde sur le contenu. */
  .hl-shell__nav{overflow-x:clip}
  .hl-shell--rail .hl-shell__frame{--hl-shell-nav:calc(var(--space-16) + var(--space-6))}
  .hl-shell--rail .hl-shell__head{flex-direction:column;gap:var(--space-1);padding-left:0}
  .hl-shell--rail .hl-shell__toggle .hl-icon{transform:rotate(180deg)}
  .hl-shell--rail .hl-nav__item{flex-direction:column;justify-content:center;gap:2px;padding:var(--space-1) 0}
  .hl-shell--rail .hl-nav__item .hl-protag,.hl-shell--rail .hl-nav__count,.hl-shell--rail .hl-nav__count+.hl-protag{margin:0}
  /* Verrou ou compteur sous l'icône : l'entrée s'allonge et s'écarte de la suivante (rien de collé). */
  .hl-shell--rail .hl-nav__item:has(.hl-protag,.hl-nav__count){gap:var(--space-1);padding-bottom:var(--space-2);margin-bottom:var(--space-1)}
  .hl-shell--rail .hl-nav__count{line-height:1}
  .hl-shell--rail .hl-protag--delegation>[aria-hidden="true"]{display:none}
  .hl-shell--rail .hl-protag--delegation{padding:var(--space-1);line-height:0}
  .hl-shell--rail :is(.hl-nav__label,[data-hl-rail="sr"]){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .hl-shell--rail .hl-nav__group{height:1px;margin:var(--space-3) var(--space-2) var(--space-2);padding:0;overflow:hidden;color:transparent;background:var(--line)}
  .hl-shell--rail [data-hl-rail="hide"]{display:none}
}
@media (prefers-reduced-motion:reduce){.hl-shell--anim .hl-shell__frame,.hl-shell__toggle .hl-icon{transition:none}}
@container hl-shell (max-width:859px){
  .hl-shell__nav,.hl-topbar{display:none}
  .hl-mtop{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--space-3);min-height:var(--space-16);padding:var(--space-2) var(--space-4);
    background:var(--bg);border-bottom:1px solid var(--line)}
  .hl-mtop__title{flex:1;min-width:0;font-size:var(--fs-16);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hl-mtop__actions{display:flex;align-items:center;gap:var(--space-2)}
  .hl-shell__main{padding:var(--space-4) var(--space-4) var(--space-6)}
  .hl-tabbar{position:sticky;bottom:var(--space-3);z-index:30;display:flex;margin:0 var(--space-3) var(--space-3);align-items:center;justify-content:space-around;
    min-height:var(--space-16);padding:var(--space-1) var(--space-2);border-radius:var(--radius-full);background:var(--surface);
    border:1px solid var(--line);box-shadow:var(--shadow-md)}
  .hl-tabbar__item{display:flex;flex:1 1 0;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:var(--control);
    border-radius:var(--radius-full);color:var(--text-2);font-size:var(--fs-12);font-weight:600;text-decoration:none;white-space:nowrap}
  .hl-tabbar__item span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .hl-tabbar__item[aria-current="page"]{color:var(--accent)}
  .hl-tabbar__item--primary{flex:0 0 auto;padding:0 var(--space-1)}
  .hl-tabbar__qr{display:grid;place-items:center;width:var(--space-16);height:var(--space-16);margin-top:calc(-1 * var(--space-6));border-radius:var(--radius-full);
    background:var(--lime);color:var(--ink);box-shadow:var(--shadow-md)}
  .hl-tabbar__qr .hl-icon{width:var(--space-6);height:var(--space-6)}
}

/* ————— Équipe et offre (lot 6) : Meter, TokenSlots, OfferCard, DangerZone, EmailPreview ————— */
.hl-meter{display:flex;flex-direction:column;gap:var(--space-3)}
.hl-meter__top{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-2) var(--space-3)}
.hl-meter__value{font-size:var(--fs-30);font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hl-meter__label{color:var(--text-2);font-size:var(--fs-14)}
.hl-meter__action{margin-left:auto}
.hl-meter__track{height:var(--space-2);border-radius:var(--radius-full);background:var(--bg-2);overflow:hidden}
.hl-meter__fill{display:block;height:100%;width:var(--hl-meter);background:var(--blue);border-radius:var(--radius-full)}
/* Variante compact (lot 5) : barre fine seule, sous le titre d'une Row. */
.hl-meter--compact{display:block;margin-top:var(--space-1)}
.hl-meter--compact .hl-meter__track{height:6px}
@media (max-width:700px){.hl-meter__action{margin-left:0;width:100%}.hl-meter__action .hl-btn{width:100%}}
.hl-tokens{display:inline-flex;align-items:center;gap:var(--space-3)}
.hl-tokens__slots{display:inline-flex;gap:var(--space-1)}
.hl-tokens__slot{width:var(--space-5);height:var(--space-5);border-radius:var(--radius-sm);background:var(--bg-2);border:1px solid var(--line-strong)}
.hl-tokens__slot--on{background:var(--lime);border-color:var(--line)}
.hl-tokens__text{font-size:var(--fs-14);color:var(--text-2);font-variant-numeric:tabular-nums}
.hl-offercard{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-6);border-radius:var(--radius-lg);
  background:var(--ink-panel);border:1px solid var(--ink-panel-line);color:var(--on-dark)}
.hl-offercard__ring{position:absolute;right:calc(var(--space-10) * -1);top:calc(var(--space-10) * -1);width:calc(var(--space-24) * 2);height:calc(var(--space-24) * 2);
  border-radius:var(--radius-full);border:var(--space-6) solid var(--lime);opacity:.16;pointer-events:none}
.hl-offercard__level{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font-size:var(--fs-14);color:var(--on-dark-2)}
.hl-offercard__title{margin:0;font-size:var(--fs-30);font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--on-dark)}
.hl-offercard__price{margin:0;font-size:var(--fs-16);color:var(--on-dark-2)}
.hl-offercard__price b{font-size:var(--fs-24);font-weight:700;color:var(--on-dark)}
.hl-offercard__facts{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-5);margin:var(--space-2) 0 0;padding:0;list-style:none;font-size:var(--fs-14);color:var(--on-dark-2)}
.hl-offercard__actions{position:relative;display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}
@media (max-width:700px){.hl-offercard__title{font-size:var(--fs-24)}}
.hl-danger{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);padding:var(--space-4);border:1px solid var(--error-bg);border-radius:var(--radius-md);background:var(--surface)}
.hl-danger__text{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:var(--space-1)}
.hl-danger__text small{font-size:var(--fs-14);color:var(--text-2)}
.hl-mailprev{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4);border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface)}
.hl-mailprev__from{font-size:var(--fs-12);color:var(--text-2)}
.hl-mailprev__subject{font-size:var(--fs-14);line-height:1.35}
.hl-mailprev__text{margin:0;font-size:var(--fs-14);color:var(--text-2)}
.hl-mailprev__button{align-self:flex-start;pointer-events:none}
/* ——— ProductIcon, ProductTitle (D58) : icône du produit puis son nom, sur une ligne ——— */
.hl-product-title{display:inline-flex;align-items:center;gap:var(--space-2);margin:0;font:inherit;font-weight:700;line-height:1.2;white-space:nowrap}
.hl-product-title .hl-icon{color:var(--accent)}

/* ——— RangeSlider (D5 : taille du logo) : curseur et sa valeur ——— */
.hl-range__row{display:flex;align-items:center;gap:var(--space-3);min-height:var(--control)}
.hl-range__input{flex:1 1 auto;min-width:0;height:var(--control);margin:0;accent-color:var(--accent);cursor:pointer;background:transparent}
.hl-range__input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.hl-range__value{flex:none;min-width:4.5em;text-align:right;font-size:var(--fs-14);font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}
.hl-field--disabled .hl-range__input{cursor:not-allowed;opacity:.55}

/* ——— FacePicker (D39) : le contour de sélection est posé sur le SVG du support, au rayon réel du format (ISO 3,17 mm :
   20,32 u sur 548,79 × 346,2 u ; LiooPass 16 pt sur 358 × 448), au même écart tout autour ——— */
.hl-facepick{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-2);width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.hl-facepick:disabled{cursor:default}
.hl-facepick__caption{font-size:var(--fs-12);font-weight:700;color:var(--text-2)}
.hl-facepick[aria-pressed="true"] .hl-facepick__caption{color:var(--text)}
.hl-facepick__face{display:block;line-height:0}
.hl-facepick__face svg{display:block;width:100%;height:auto;outline:3px solid transparent;outline-offset:5px;transition:outline-color var(--dur-fast) var(--ease)}
.hl-facepick--card .hl-facepick__face svg{border-radius:3.7027%/5.8694%}
.hl-facepick--badge .hl-facepick__face svg{border-radius:5.8694%/3.7027%}
.hl-facepick--qr .hl-facepick__face svg{border-radius:5.8694%}
.hl-facepick--pass .hl-facepick__face svg{border-radius:4.4693%/3.5714%}
.hl-facepick--pass-classic .hl-facepick__face svg{border-radius:4.4693%/3.6697%}
.hl-facepick[aria-pressed="true"] .hl-facepick__face svg{outline-color:var(--accent)}
/* Focus clavier : l'anneau commun, autour de la légende et de la face (distinct du contour de sélection). */
.hl-facepick:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:var(--radius-sm)}
@media (prefers-reduced-motion:reduce){.hl-facepick__face svg{transition:none}}

/* ——— Stepper (LiooBrand) : étapes faites, en cours, à venir ——— */
.hl-stepper{display:flex;flex-direction:column;gap:var(--space-1);margin:0;padding:0;list-style:none}
.hl-stepper__btn{display:flex;align-items:center;gap:var(--space-3);width:100%;min-width:var(--control);min-height:var(--control);padding:0 var(--space-3);border:0;
  border-radius:var(--radius-sm);background:none;color:var(--text-2);font:inherit;font-size:var(--fs-14);font-weight:600;text-align:left}
button.hl-stepper__btn{cursor:pointer}
button.hl-stepper__btn:hover{background:var(--bg-2)}
.hl-stepper__btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.hl-stepper__dot{display:inline-grid;place-items:center;flex:none;width:var(--space-6);height:var(--space-6);border-radius:var(--radius-full);
  border:2px solid var(--line-strong);font-size:var(--fs-12);font-weight:700;color:var(--text-2)}
.hl-stepper__step--current .hl-stepper__btn{background:var(--bg-2);color:var(--text)}
.hl-stepper__step--current .hl-stepper__dot{border-color:var(--step-current);background:var(--step-current);color:var(--step-current-on)}
.hl-stepper__step--done .hl-stepper__dot{border-color:var(--success);background:var(--success-bg);color:var(--success)}
.hl-stepper--disabled{opacity:.55}
@media (max-width:700px){
  .hl-stepper{flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:var(--space-2)}
  .hl-stepper__step{flex:none}
  .hl-stepper__btn{justify-content:center;padding:0 var(--space-2)}
  .hl-stepper__step:not(.hl-stepper__step--current) .hl-stepper__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* ——— Commande (lot 7) : OrderSteps (suivi en sept étapes), OrderProgress (barre compacte), QuantityStepper ——— */
.hl-ordersteps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.hl-ordersteps__step{position:relative;display:grid;grid-template-columns:var(--space-6) minmax(0,1fr);gap:var(--space-3);padding:0 0 var(--space-4)}
.hl-ordersteps__step:last-child{padding-bottom:0}
/* Filet vertical entre deux puces : plein jusqu'à l'étape en cours, pâle ensuite. */
.hl-ordersteps__step:not(:last-child)::before{content:"";position:absolute;left:calc(var(--space-6) / 2 - 1px);top:var(--space-6);bottom:0;width:2px;background:var(--line)}
.hl-ordersteps__step--done:not(:last-child)::before{background:var(--success)}
.hl-ordersteps__dot{display:inline-grid;place-items:center;width:var(--space-6);height:var(--space-6);border-radius:var(--radius-full);
  border:2px solid var(--line-strong);background:var(--surface);font-size:var(--fs-12);font-weight:700;color:var(--text-2)}
.hl-ordersteps__step--done .hl-ordersteps__dot{border-color:var(--success);background:var(--success-bg);color:var(--success)}
.hl-ordersteps__step--current .hl-ordersteps__dot{border-color:var(--step-current);background:var(--step-current);color:var(--step-current-on)}
.hl-ordersteps__text{display:flex;flex-direction:column;gap:var(--space-1);min-width:0;padding-top:2px}
.hl-ordersteps__label{font-size:var(--fs-14);font-weight:700;color:var(--text)}
.hl-ordersteps__step--next .hl-ordersteps__label{color:var(--text-2);font-weight:600}
.hl-ordersteps__detail{font-size:var(--fs-12);color:var(--text-2);overflow-wrap:anywhere}
.hl-ordersteps__extra{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-1)}
.hl-orderbar{display:inline-flex;gap:3px;width:calc(var(--space-6) * 4);max-width:100%}
.hl-orderbar__seg{flex:1;height:6px;border-radius:var(--radius-full);background:var(--line)}
.hl-orderbar__seg--done{background:var(--success)}
.hl-orderbar__seg--current{background:var(--step-current)}
.hl-qty{display:inline-flex;align-items:center;gap:var(--space-1);padding:3px;border:1px solid var(--line-strong);border-radius:var(--radius-full);background:var(--surface)}
.hl-qty__value{min-width:calc(var(--space-6) + var(--space-3));text-align:center;font-size:var(--fs-16);font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}

/* ——— StudioTile (hub LiooStudio, D44) ——— */
.hl-studiotile{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md)}
.hl-studiotile__visual{display:flex;align-items:center;justify-content:center;gap:var(--space-3);min-height:calc(var(--control) * 4);padding:var(--space-4);background:var(--bg-2)}
.hl-studiotile__visual>*{flex:0 1 auto;min-width:0}
.hl-studiotile__body{display:flex;flex-direction:column;gap:var(--space-2);flex:1;padding:var(--space-4)}
.hl-studiotile__head{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;min-height:var(--space-6);color:var(--text)}
.hl-studiotile__body>.hl-pill{align-self:flex-start;max-width:100%}
.hl-studiotile__text{margin:0;font-size:var(--fs-14);color:var(--text-2)}
.hl-studiotile__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:auto;padding-top:var(--space-1)}
@media (max-width:700px){
  .hl-studiotile{flex-direction:row}
  .hl-studiotile__visual{flex:none;flex-direction:column;width:calc(var(--control) * 2.7);min-height:0;padding:var(--space-2);gap:var(--space-2)}
  .hl-studiotile__body{min-width:0;padding:var(--space-3)}
  .hl-studiotile__text{display:none}
}

/* ——— LevelSteps (LiooPage, D17) : l'essentiel, LiooStudio, le style avancé ——— */
.hl-levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(var(--control) * 5)),1fr));gap:var(--space-2);margin:0;padding:0;list-style:none}
.hl-levels__item{display:flex;align-items:flex-start;gap:var(--space-3);min-width:0;padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.hl-levels__item--current{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:-1px}
.hl-levels__dot{display:inline-grid;place-items:center;flex:none;width:var(--space-6);height:var(--space-6);border-radius:var(--radius-full);background:var(--bg-2);color:var(--text-2);font-size:var(--fs-12);font-weight:700}
.hl-levels__item--done .hl-levels__dot{background:var(--success-bg);color:var(--success)}
.hl-levels__item--current .hl-levels__dot{background:var(--step-current);color:var(--step-current-on)}
.hl-levels__text{display:flex;flex-direction:column;flex:1;min-width:0}
.hl-levels__title{font-size:var(--fs-14);font-weight:700;color:var(--text);overflow-wrap:anywhere}
.hl-levels__detail{font-size:var(--fs-12);color:var(--text-2);overflow-wrap:anywhere}
/* Pastille d'offre sous le titre et la phrase, dans la colonne du texte : jamais posée sur le titre (AV-005, AV-006). */
.hl-levels__tag{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);margin-top:var(--space-1)}
@media (max-width:700px){.hl-levels__detail{display:none}.hl-levels__item{align-items:center;padding:var(--space-2) var(--space-3)}}

/* ——— Accordion : section repliable avec résumé ——— */
.hl-accordion{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden}
.hl-accordion__head{display:flex;align-items:center;gap:var(--space-3);min-height:calc(var(--control) + var(--space-4));padding:var(--space-3) var(--space-4);cursor:pointer;list-style:none}
.hl-accordion__head::-webkit-details-marker{display:none}
.hl-accordion__head:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:var(--radius-md)}
.hl-accordion__text{display:flex;flex-direction:column;flex:1;min-width:0}
.hl-accordion__title{margin:0;font-size:var(--fs-16);font-weight:700;color:var(--text)}
.hl-accordion__subtitle{overflow:hidden;font-size:var(--fs-14);color:var(--text-2);text-overflow:ellipsis;white-space:nowrap}
.hl-accordion__chevron{flex:none;color:var(--text-2);transition:transform var(--dur-fast) var(--ease)}
.hl-accordion[open] .hl-accordion__chevron{transform:rotate(180deg)}
.hl-accordion__body{display:flex;flex-direction:column;gap:var(--space-4);padding:0 var(--space-4) var(--space-5)}
@media (prefers-reduced-motion:reduce){.hl-accordion__chevron{transition:none}}

/* ——— LayoutChoice : disposition et son mini-plan ——— */
.hl-layouts{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--control) * 2.3),1fr));gap:var(--space-2)}
.hl-layout{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-2);min-width:0;padding:var(--space-2);border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--surface);color:var(--text);font:inherit;font-size:var(--fs-14);font-weight:600;text-align:left;cursor:pointer}
.hl-layout:hover{border-color:var(--line-strong)}
.hl-layout[aria-pressed="true"]{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:-1px}
.hl-layout:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.hl-layout:disabled{cursor:default}
.hl-layout__art{display:grid;place-items:center;padding:var(--space-2);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--accent)}
.hl-layout__art svg{width:100%;height:auto;max-height:calc(var(--control) * 1.4)}
.hl-layout__label{overflow-wrap:anywhere;hyphens:auto;text-align:center}

/* ——— PaletteChoice : palette nommée, trois pastilles ——— */
.hl-palettes{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.hl-palette{display:flex;align-items:center;gap:var(--space-3);min-height:var(--control);max-width:100%;padding:var(--space-2) var(--space-3) var(--space-2) var(--space-2);border:1px solid var(--line);
  border-radius:var(--radius-md);background:var(--surface);color:var(--text);font:inherit;text-align:left;cursor:pointer}
.hl-palette[aria-pressed="true"]{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:-1px}
.hl-palette:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.hl-palette:disabled{cursor:default}
.hl-palette__dots{display:flex;flex:none}
.hl-palette__dots i{width:var(--space-6);height:var(--space-6);margin-left:calc(var(--space-2) * -1);border-radius:var(--radius-full);background:var(--hl-dot);border:2px solid var(--surface)}
.hl-palette__dots i:first-child{margin-left:0}
.hl-palette__text{display:flex;flex-direction:column;min-width:0}
.hl-palette__name{font-size:var(--fs-14);font-weight:600}
.hl-palette__sub{font-size:var(--fs-12);color:var(--text-2)}

/* ——— PagePreview : la page dans un téléphone ou un navigateur (elle garde ses couleurs) ——— */
.hl-preview{display:flex;justify-content:center;margin:0;width:100%}
.hl-preview__frame{position:relative;width:100%;border-radius:var(--radius-lg);background:var(--ink);padding:var(--space-2);box-shadow:var(--shadow-lg)}
.hl-preview--mobile .hl-preview__frame{max-width:calc(var(--control) * 8.6);border-radius:var(--radius-device);padding:var(--space-3)}
.hl-preview__screen{position:relative;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;aspect-ratio:16/10;border-radius:var(--radius-md);background:var(--surface);color-scheme:light}
.hl-preview__screen::-webkit-scrollbar{display:none}
/* Téléphone : les proportions d'un vrai appareil (390 × 844) ; le cadre ne s'allonge pas, la page défile dedans. */
.hl-preview--mobile .hl-preview__screen{aspect-ratio:390/844;border-radius:calc(var(--radius-device) - var(--space-3))}
.hl-preview__bar{display:flex;align-items:center;gap:var(--space-1);padding:0 var(--space-2) var(--space-2)}
.hl-preview__bar i{width:var(--space-2);height:var(--space-2);border-radius:var(--radius-full);background:var(--ink-3)}
.hl-preview__address{flex:1;min-width:0;overflow:hidden;color:var(--on-dark-2);font-size:var(--fs-12);text-align:center;text-overflow:ellipsis;white-space:nowrap}
.hl-preview__ribbon{position:absolute;z-index:3;top:var(--space-4);right:calc(var(--space-10) * -1);padding:var(--space-1) var(--space-12);transform:rotate(35deg);
  background:var(--lime);color:var(--ink);font-size:var(--fs-12);font-weight:800;letter-spacing:.04em;box-shadow:var(--shadow-sm);pointer-events:none}
/* Aperçu ordinateur : la page est composée à 2,5 fois la largeur du cadre puis réduite, comme sur un grand écran. */
.hl-preview--desktop .hl-preview__screen>*{zoom:.4}

/* Médias de la LiooPage (lot 10B) : VideoFacade, GalleryField, DocumentField. */
/* Vidéo (D113) : façade = lien vers la plateforme ; vignette générée aux couleurs de la page (--hl-video-*, posées par
   lioostudio.css sur une LiooPage), sinon encre et citron. 16:9, ou 9:16 (TikTok, reels, Shorts) centré et borné. */
.hl-video{--hl-video-bg:var(--ink);--hl-video-on:var(--on-dark);--hl-video-accent:var(--lime);--hl-video-accent-on:var(--ink);--hl-video-text:var(--text);--hl-video-muted:var(--text-2);--hl-video-focus:var(--blue);margin:0;width:100%;align-self:stretch;min-width:0;display:flex;flex-direction:column;gap:var(--space-2)}
.hl-video__stage{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius-sm);overflow:hidden;background:var(--hl-video-bg);color:var(--hl-video-on)}
.hl-video--portrait .hl-video__stage{aspect-ratio:9/16;max-width:min(100%,340px);margin-inline:auto}
.hl-video--portrait .hl-video__caption{max-width:min(100%,340px);margin-inline:auto;width:100%}
.hl-video__play{all:unset;box-sizing:border-box;position:absolute;inset:0;border-radius:inherit;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);cursor:pointer;text-align:center;min-height:44px}
/* Anneau sur la scène (qui rogne son contenu), du dessin commun : 3 px, décalé de 3 px. */
.hl-video__stage:has(.hl-video__play:focus-visible){outline:3px solid var(--hl-video-focus);outline-offset:3px;overflow:visible}
.hl-video__stage:has(.hl-video__play:focus-visible) .hl-video__play{overflow:hidden}
.hl-video__play[aria-disabled=true]{cursor:default}
.hl-video__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hl-video__generated{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:var(--space-2);padding:var(--space-4);text-align:left;background:var(--hl-video-bg);color:var(--hl-video-on)}
.hl-video__brand{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--fs-14);font-weight:700}
.hl-video__gtitle{font-size:var(--fs-16);font-weight:700;line-height:1.25;max-width:100%;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hl-video__mark{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:var(--radius-full);background:var(--hl-video-accent);color:var(--hl-video-accent-on);--hl-icon-fill:var(--hl-video-accent-on);box-shadow:var(--shadow-sm)}
.hl-video__caption{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-3);font-size:var(--fs-14);line-height:1.4;color:var(--hl-video-text);min-width:0}
.hl-video__platform{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--fs-12);font-weight:700;color:var(--hl-video-muted)}
.hl-video__title{font-weight:600;overflow-wrap:anywhere;min-width:0}
.hl-video__frame{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:inherit}
/* Éditeur : liste de vidéos (VideoListField). */
.hl-videolist{display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.hl-videolist__list{display:flex;flex-direction:column;gap:var(--space-3);margin:0;padding:0;list-style:none}
.hl-videolist__item{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);min-width:0}
.hl-videolist__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.hl-videolist__num{flex:1;margin:0;font-weight:700;font-size:var(--fs-14);color:var(--text)}
.hl-videolist__platform{order:3;flex-basis:100%;min-width:0}
.hl-videolist__platform:empty{display:none}
.hl-videolist__preview{max-width:360px;width:100%}
.hl-videolist__preview .hl-video--portrait :is(.hl-video__stage,.hl-video__caption){max-width:180px;margin-inline:0}
@media (prefers-reduced-motion:no-preference){.hl-video__mark{transition:transform .15s}.hl-video__play:hover .hl-video__mark{transform:scale(1.06)}}
.hl-gallery,.hl-docs{display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.hl-gallery__count{font-weight:500;color:var(--text-2)}
.hl-gallery__list,.hl-docs__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.hl-gallery__item,.hl-docs__item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
.hl-gallery__thumb{width:64px;height:64px;object-fit:cover;border-radius:var(--radius-inner);align-self:center;background:var(--bg-2)}
.hl-docs__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-inner);background:var(--info-bg);color:var(--accent);align-self:center}
.hl-gallery__tools,.hl-docs__tools{display:flex;gap:var(--space-1);align-self:center}
@media (max-width:480px){.hl-gallery__item,.hl-docs__item{grid-template-columns:auto minmax(0,1fr)}.hl-gallery__tools,.hl-docs__tools{grid-column:1/-1;justify-content:flex-end}}

/* Équipe et Organisation (lot 10B) : fenêtre à formulaire, message en plusieurs paragraphes, liste à puces, erreur
   de formulaire. */
.hl-dialog__form{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.hl-dialog__message p{margin:0}
.hl-dialog__message p+p{margin-top:var(--space-2)}
.hl-bullets{display:flex;flex-direction:column;gap:var(--space-2);margin:0;padding:0 0 0 var(--space-5);list-style:disc;font-size:var(--fs-14);color:var(--text)}
.hl-bullets li{padding-left:var(--space-1);overflow-wrap:anywhere}
.hl-bullets li::marker{color:var(--text-2)}
.hl-formerror{margin:0;padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);background:var(--error-bg);color:var(--error);font-size:var(--fs-14);font-weight:600;overflow-wrap:anywhere}
.hl-formerror:empty{display:none}
.hl-avatar--logo{border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--line)}
.hl-avatar--logo>.hl-logoframe{--hl-logoframe-pad:12%}
/* Très grands caractères (lot 10B) : un libellé de bouton trop long pour sa colonne passe à la ligne au lieu de déborder. */
.hl-btn{max-width:100%}
.hl-btn__label{white-space:normal;overflow-wrap:break-word;min-width:0}
.hl-screenhead__title,.hl-dialog__title,.hl-section__title{overflow-wrap:break-word;hyphens:auto}

/* ——— Cibles tactiles (D124) : chaque contrôle .hl-* mesure lui-même au moins 44 × 44 px (--control), à toutes les
   largeurs et pointeur fin compris ; pas de zone élargie invisible (::after), qui ne change pas la boîte de l'élément.
   Le pointeur grossier (doigt) le garantit une seconde fois, au cas où un écran tenterait de compacter un contrôle. ——— */
/* AppShell : l'avatar « Mon compte » de la barre du haut (posé par l'écran dans l'emplacement d'actions) est une cible. */
.hl-topbar__actions>a,.hl-mtop__actions>a{min-width:var(--control);min-height:var(--control)}
/* Libellé très court (« OK », « 1 ») : la largeur ne descend pas non plus sous 44 px. */
:is(.hl-btn,.hl-chip,.hl-seg__item){min-width:var(--control)}
@media (pointer:coarse){
  :is(.hl-btn,.hl-chip,.hl-seg__item,.hl-field__input,.hl-combobox__toggle,.hl-stepper__btn,.hl-nav__item,.hl-qa,.hl-palette,.hl-section__more,.hl-sourced__link){min-height:var(--control)}
  :is(.hl-icon-btn,.hl-swatch,.hl-check__input,.hl-colorfield__picker,.hl-protag-btn){min-width:var(--control);min-height:var(--control)}
  :is(.hl-stepper__btn,.hl-switch__input,.hl-chip,.hl-seg__item,.hl-btn){min-width:var(--control)}
  .hl-switch__input{height:var(--control)}
}
/* ——— CarouselField et HoursField (lot G, D128, D131 ; static/ui/medias.js) ——— */
.hl-carousel,.hl-hours{display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.hl-carousel__list,.hl-hours__week,.hl-hours__ranges,.hl-hours__closures{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.hl-carousel__item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
.hl-carousel__thumb{width:96px;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-inner);background:var(--bg-2)}
.hl-carousel__fields{display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.hl-carousel__tools,.hl-hours__tools{display:flex;gap:var(--space-1);align-self:center}
.hl-hours__day{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);min-width:0}
.hl-hours__range{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) auto;align-items:end;gap:var(--space-2)}
.hl-hours__closure{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,2fr) auto;align-items:start;gap:var(--space-2);padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
.hl-hours__actions{display:flex;flex-wrap:wrap;align-items:end;gap:var(--space-2)}
@media (max-width:480px){
  .hl-carousel__item{grid-template-columns:auto minmax(0,1fr)}
  .hl-carousel__tools{grid-column:1/-1;justify-content:flex-end}
  .hl-hours__closure{grid-template-columns:minmax(0,1fr) auto}
  .hl-hours__closure>.hl-field{grid-column:1}
  .hl-hours__closure>.hl-hours__tools{grid-column:2;grid-row:1}
}

/* ——— Personnalisation (lot B, audit du 18/10/2026, D145 ; static/ui/personnalisation.js) ———
   EditorHeader, SaveBar, LanguageTabs, BrandSourceTag, ReapplyBrandDialog, SupportStage, LogoColorPicker, SettingRow,
   LockNote : les mêmes pour l'éditeur de page, le hub, les configurateurs, le LiooPass, LiooBrand, les cartes papier et
   la Mise en page commune. */
.hl-editorhead{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:var(--space-3);row-gap:var(--space-3);min-width:0}
.hl-editorhead__text{grid-column:1;grid-row:1;min-width:0}
.hl-editorhead__title{margin:0;font-size:var(--fs-30);font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--text);overflow-wrap:break-word;hyphens:auto}
.hl-editorhead__subtitle{margin:var(--space-1) 0 0;font-size:var(--fs-16);color:var(--text-2)}
.hl-editorhead__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-2);min-width:0}
.hl-editorhead__bar{grid-column:1 / -1;grid-row:2;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);min-width:0}
.hl-editorhead__actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.hl-editorhead__done{grid-column:2;grid-row:1}
@media (min-width:900px){
  .hl-editorhead{grid-template-columns:minmax(0,1fr) auto}
  .hl-editorhead--done{grid-template-columns:minmax(0,1fr) auto auto}
  .hl-editorhead__bar{grid-column:2;grid-row:1;justify-content:flex-end;align-self:center}
  .hl-editorhead__done{grid-column:3}
}
.hl-savebar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);min-width:0}
.hl-savebar__status{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);min-height:var(--space-6)}
.hl-savebar__pending{font-size:var(--fs-14);font-weight:600;color:var(--text)}
/* Place réservée dans l'en-tête : « Enregistré · 3 modifications non publiées » ne repousse ni le titre ni le lien quand
   l'état change (aucun saut de défilement pendant la saisie). */
.hl-editorhead .hl-savebar__status{min-width:min(100%,22rem);justify-content:flex-end}
.hl-editorhead .hl-savebar__pending{white-space:nowrap}
.hl-savebar__pending::before{content:'·';margin-right:var(--space-2);color:var(--text-2)}
.hl-langtabs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);min-width:0}
.hl-langtabs>.hl-tabs{max-width:100%}
.hl-langtabs__extra{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.hl-brandsource{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-3);min-width:0}
.hl-brandsource__link{display:inline-flex;align-items:center;gap:var(--space-1);min-height:var(--control);font-size:var(--fs-14);font-weight:600;color:var(--accent)}
.hl-reapply__lead,.hl-reapply__scope,.hl-reapply__kept{margin:0 0 var(--space-3);font-size:var(--fs-14);color:var(--text)}
.hl-reapply__kept{color:var(--text-2)}
.hl-dialog .hl-bullets{margin-bottom:var(--space-3)}
.hl-stage{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.hl-stage--sticky{position:sticky;top:var(--space-5)}
.hl-stage__switch{display:none}
.hl-stage__switch>.hl-seg{width:100%}
.hl-stage__scene{display:flex;flex-direction:column;align-items:center;gap:var(--space-5);padding:var(--space-6);border-radius:var(--radius-lg);background:var(--bg-2);min-width:0}
.hl-stage__scene .hl-facepick{max-width:35rem}
/* Colonne collante : les deux faces, la note et la barre du prix tiennent dans la hauteur d'un écran d'ordinateur. */
.hl-stage__scene--card .hl-facepick{max-width:min(26rem,calc((100vh - 18rem) * .78))}
.hl-stage__scene--badge{flex-direction:row;justify-content:center;align-items:flex-start}
.hl-stage__scene--badge .hl-facepick{max-width:15rem}
.hl-stage__scene--pass{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:flex-start}
.hl-stage__scene--pass .hl-facepick{flex:1 1 11rem;max-width:14rem}
.hl-stage__scene--board{gap:var(--space-3);padding:var(--space-4);align-items:stretch}
.hl-stage__note{display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin:0;font-size:var(--fs-14);color:var(--text-2);text-align:center}
.hl-stage__bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.hl-stage__price{flex:1 1 12rem;min-width:0;font-size:var(--fs-14);font-weight:600;color:var(--text)}
.hl-stage__bar>.hl-btn{flex:1 1 auto}
@media (max-width:900px){
  .hl-stage--sticky{position:static}
  .hl-stage__scene{padding:var(--space-4) var(--space-3);border-radius:var(--radius-md)}
  .hl-stage--flip .hl-stage__switch{display:flex}
  .hl-stage--flip .hl-stage__scene .hl-facepick:not([data-shown]){display:none}
  .hl-stage__scene--badge .hl-facepick,.hl-stage__scene--pass .hl-facepick{max-width:14rem}
}
.hl-logocolor{display:grid;gap:var(--space-3);min-width:0}
.hl-logocolor__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.hl-logocolor__hint{margin:0;font-size:var(--fs-14);color:var(--text-2)}
/* D153 : rangées « Icône » et « Texte » du mode deux couleurs. */
.hl-logocolor__part{display:grid;gap:var(--space-2);min-width:0}
.hl-logocolor__label{font-size:var(--fs-14);font-weight:600;color:var(--text)}
.hl-logocolor__hint .hl-pill{vertical-align:middle}
.hl-setting{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-4);min-width:0}
.hl-setting__text{flex:1 1 12rem;min-width:0}
.hl-setting__label{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font-size:var(--fs-14);font-weight:600;color:var(--text)}
.hl-setting__hint{margin:var(--space-1) 0 0;font-size:var(--fs-12);color:var(--text-2)}
.hl-setting__control{flex:0 1 auto;min-width:0;max-width:100%}
/* Lots F et G (D145) : barre des designs d'un support, champs visibles des supports imprimés. */
.hl-designbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-3) var(--space-4);min-width:0}
.hl-designbar>.hl-field{flex:1 1 16rem;min-width:min(100%,16rem)}
.hl-designbar__one{display:flex;flex-direction:column;gap:var(--space-1);flex:1 1 12rem;min-width:0}
.hl-designbar__label{font-size:var(--fs-14);font-weight:600;color:var(--text)}
.hl-designbar__name{font-size:var(--fs-16);color:var(--text);overflow-wrap:anywhere}
.hl-designbar__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);min-height:var(--control)}
.hl-designbar__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.hl-designbar__hint{flex:1 1 100%;margin:0;font-size:var(--fs-12);color:var(--text-2)}
.hl-fields{display:grid;gap:var(--space-1);min-width:0}
.hl-fields__note{margin:var(--space-2) 0 0;font-size:var(--fs-14);color:var(--text-2)}
.hl-locknote{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:0;font-size:var(--fs-14);color:var(--text-2)}
.hl-locknote__text{flex:1 1 12rem;min-width:0}
.hl-logocolor>.hl-pill{justify-self:start}