@layer components{
/* ── Framework MX : tous les modals au niveau de l'Assistant (rail illustré + split) ──
   Généralise l'anatomie du wizard (.wizx-*) à l'ensemble des modals : rail gauche
   dégradé avec pastille, illustration SVG thémée, puces d'info, en-tête éditorial,
   contenu scrollable et footer d'actions cohérent. Le wizard lui-même reste sur .wizx-*. */

/* Carte : flex colonne, hauteur pilotée par le contenu, plafonnée à l'écran */
#modal.mx .modal-card{width:min(880px,calc(100vw - 28px));max-height:calc(100vh - 48px);
  display:flex;flex-direction:column;overflow:hidden}
#modal.mx.mx-sm .modal-card{width:min(720px,calc(100vw - 28px))}
#modal.mx.mx-lg .modal-card{width:min(1040px,calc(100vw - 28px))}
#modal.mx .modal-head{display:none}
#modal.mx .modal-body{flex:1;min-height:0;padding:0;display:flex}

.mxw{display:grid;grid-template-columns:264px 1fr;flex:1;min-height:0;min-width:0}
#modal.mx.mx-noside .mxw{grid-template-columns:1fr}
#modal.mx.mx-noside .mx-side{display:none}

/* Rail gauche - mêmes recettes que .wizx-side */
.mx-side{display:flex;flex-direction:column;gap:var(--sp-14);padding:var(--sp-22) var(--sp-20) var(--sp-16);border-right:1px solid var(--line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,var(--bg2)),var(--bg2) 58%);
  min-height:0;overflow:auto}
.mx-brand{display:flex;align-items:center;gap:var(--sp-10)}
.mx-logo{width:34px;height:34px;border-radius:var(--radius);display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-h));color:var(--on-solid);
  box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 35%,transparent)}
.mx-logo svg.ic{width:18px;height:18px}
.mx-bt{font-weight:var(--fw-bold);font-size:var(--fs-base);letter-spacing:-.01em}
.mx-bs{font-size:var(--fs-xs);color:var(--mut)}
.mx-art{margin:0 -2px}
.mx-art svg{width:100%;height:auto;display:block}
.mx-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-8)}
.mx-points li{display:flex;gap:var(--sp-8);align-items:flex-start;font-size:var(--fs-xs);color:var(--mut);line-height:1.45;min-width:0}
.mx-points li svg.ic{width:13px;height:13px;flex:none;margin-top:var(--sp-1);color:var(--accent)}
.mx-points li b{color:var(--txt);font-weight:var(--fw-strong)}
.mx-fill{flex:1}
.mx-reassure{display:flex;gap:var(--sp-6);align-items:flex-start;font-size:var(--fs-xs);color:var(--mut);line-height:1.45;
  margin:0;padding-top:var(--sp-12);border-top:1px solid var(--line2)}
.mx-reassure svg.ic{width:13px;height:13px;flex:none;margin-top:var(--sp-1)}

/* Zone principale - en-tête éditorial, contenu scrollable, footer sticky */
.mx-main{display:flex;flex-direction:column;min-height:0;min-width:0;position:relative}
.mx-close{position:absolute;top:14px;right:14px;z-index:2}
.mx-head{padding:var(--sp-24) var(--sp-28) var(--sp-4);flex:none}
.mx-eyebrow{font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.mx-head h3{margin:var(--sp-4) 0 var(--sp-6);font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:-.015em;padding-right:var(--sp-34)}
.mx-lead{margin:0;font-size:var(--fs-md);color:var(--mut);line-height:1.55;max-width:560px}
.mx-lead b{color:var(--txt);font-weight:var(--fw-strong)}
.mx-content{flex:1;min-height:120px;overflow:auto;padding:var(--sp-16) var(--sp-28) var(--sp-18)}
.mx-foot{display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-14) var(--sp-28);border-top:1px solid var(--line);
  background:var(--card);flex:none}
.mx-foot .sp{flex:1}
.mx-foot .primary svg.ic,.mx-foot .danger svg.ic{width:15px;height:15px;vertical-align:-2px;margin-right:var(--sp-4)}

/* Chargement standardisé (même habillage que l'état chargé : pas de saut visuel) */
.mx-loading{display:flex;align-items:center;justify-content:center;gap:var(--sp-10);min-height:160px;
  color:var(--mut);font-size:var(--fs-md)}

/* ── La vitrine de « Quoi ajouter ? » (le proprio, 2026-10-31 : « on garde les écrans, on change la composition ; moderne,
   propre, moins chargé ») : un rail libre et plus large, un titre et une phrase, puis trois écrans squelettes à la fois
   (09-projects.js, DH_PLANCHE et DH_VITRINE) posés en profondeur comme une photo produit : le large au fond, réduit et plus
   pâle, l'espace devant à gauche, le téléphone devant à droite. Quatre points paginent les quatre trios. Trait fin, aucune
   ombre (modales nettes), jetons du thème seulement. À droite, les deux choix perdent leur cadre : deux lignes, un filet. ── */
#modal.mx.mx-planche .mxw{grid-template-columns:380px 1fr}   /* compact (le proprio, 2026-10-31 : « trop grand les visuels ») */
.mx-side-libre{gap:var(--sp-16);padding:var(--sp-24) var(--sp-24) var(--sp-18);justify-content:space-between}
.planche-txt h4{margin:0 0 var(--sp-8);font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:-.02em;line-height:1.12}
.planche-txt p{margin:0;font-size:var(--fs-sm);color:var(--mut);line-height:1.55;max-width:30em}
/* ── Vitrine v2 (le proprio, 2026-10-31 : « encore plus parfait, plus moderne, innove, l'écran et la façon de les afficher ») :
   les écrans sont des appareils (barre d'état, encoche, couronne, pied de borne, planche de bord : dessinés dans le SVG,
   09-projects.js dhPlancheEcran) ; la scène est un plateau en perspective qui suit le curseur (--rx/--ry posés par
   dhVitrineSouris) et dérive lentement au repos ; un écran survolé passe devant, les autres s'estompent ; les trois noms
   sont des puces cliquables ; huit segments disent le temps du trio. Tout mouvement s'arrête sous « réduire les
   animations » (fin de ce bloc). Trait fin, aucune ombre, jetons du thème seulement. ── */
.vitrine{display:flex;flex-direction:column;gap:var(--sp-10);flex:1;min-height:0;justify-content:center}
.vit-scene{position:relative;width:92%;aspect-ratio:1/.8;max-height:250px;margin:0 auto;perspective:900px}
.vit-plateau{position:absolute;inset:0;pointer-events:none;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));animation:vit-derive 16s ease-in-out infinite alternate}
.vit-plateau.actif{animation:none}
.vit-place{position:absolute;display:block;pointer-events:auto;padding:0;border:0;background:transparent;cursor:pointer;transform-style:preserve-3d;border-radius:8px}   /* display:block : un bouton est inline-flex dans la DA et l'appareil se réduisait à sa caméra (banc du 31-10) */
.vit-place:focus{outline:none}
.vit-place:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
/* Trois appareils, toujours les mêmes (le proprio, 2026-10-31) : la fenêtre d'un navigateur Mac au fond, large et un peu en retrait ;
   un iPad devant à gauche ; un iPhone devant à droite. Les tailles se répondent : la fenêtre fait 84 % de la scène, l'iPad 50 %,
   l'iPhone 21 % ; les trois bas s'alignent sur deux lignes (fond en haut, les deux appareils au sol). */
.vit-fond{left:8%;top:0;width:84%;transform:translateZ(-40px) scale(.97);transform-origin:50% 0;opacity:.78}
.vit-gauche{left:0;bottom:5%;width:50%;transform:translateZ(0)}
.vit-droite{right:5%;bottom:0;width:21%;transform:translateZ(36px)}
.vit-gauche[data-cadre=borne]{width:31%;left:7%}   /* la borne est en portrait : un iPad debout, plus étroit */
/* Survolé (ou sa puce) : il avance et s'allume, les deux autres reculent dans la pénombre. */
.vit-place.vise{transform:translateZ(64px) scale(1.03);opacity:1;z-index:3}
.vit-fond.vise{transform:translateZ(24px) scale(1)}
.vitrine.vise .vit-place:not(.vise){opacity:.42}
.vit-app{display:block;position:relative;width:100%;box-sizing:border-box}
.vit-ecrans{display:block;position:relative;width:100%;overflow:hidden;background:var(--card)}
/* L'écran prend la forme de ce qu'il montre (data-cadre posé par dhVitrineTrio), l'appareil s'ajuste autour. */
.vit-place[data-cadre=web] .vit-ecrans,.vit-place[data-cadre=bureau] .vit-ecrans{aspect-ratio:100/64}
.vit-place[data-cadre=tv] .vit-ecrans{aspect-ratio:100/56}
.vit-place[data-cadre=voiture] .vit-ecrans{aspect-ratio:100/44}
.vit-place[data-cadre=tel] .vit-ecrans{aspect-ratio:40/72}
.vit-place[data-cadre=borne] .vit-ecrans{aspect-ratio:48/80}
.vit-ecran svg text{font-family:inherit}
.vit-ecran{position:absolute;inset:0;opacity:0;pointer-events:none;transform:translateY(8px)}
.vit-ecran.on{opacity:1;transform:none}
.vit-ecran svg{display:block;width:100%;height:100%;background:var(--card)}
/* La fenêtre Mac : barre à trois pastilles (les couleurs sont celles de l'objet lui-même, comme les photos : rouge, ambre, vert,
   adoucies), une adresse au milieu, l'écran dessous. */
.vit-mac{border:.5px solid var(--line);border-radius:7px;overflow:hidden;background:var(--card)}
.vit-mac-barre{display:flex;align-items:center;gap:3.5px;height:14px;padding:0 7px;background:var(--card2);border-bottom:.5px solid var(--line)}
.vit-mac-barre i{width:5px;height:5px;border-radius:50%;background:#ff5f57;opacity:.9}
.vit-mac-barre i:nth-child(2){background:#febc2e}
.vit-mac-barre i:nth-child(3){background:#28c840}
.vit-url{margin:0 auto;transform:translateX(-10px);height:8px;line-height:8px;padding:0 12px;border-radius:4px;background:var(--card);border:.5px solid var(--line);font-size:5px;letter-spacing:.02em;color:var(--mut);white-space:nowrap}
/* L'iPad : bord noir fin et régulier, coins ronds, la caméra au milieu du bord haut. */
.vit-ipad{padding:4.5%;background:#101013;border:.5px solid color-mix(in srgb,var(--txt) 28%,transparent);border-radius:9px}
.vit-ipad::before{content:"";position:absolute;top:1.8%;left:50%;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:#2b2b31}
.vit-ipad .vit-ecrans{border-radius:3px}
/* L'iPhone : bord noir, grands coins ronds, les boutons sur les tranches ; l'encoche, la barre d'état et la barre d'accueil sont dans l'écran. */
.vit-iphone{padding:3.5%;background:#101013;border:.5px solid color-mix(in srgb,var(--txt) 28%,transparent);border-radius:16px}
.vit-iphone .vit-ecrans{border-radius:12px}
.vit-iphone::before,.vit-iphone::after{content:"";position:absolute;width:1.5px;border-radius:1px;background:#2b2b31}
.vit-iphone::before{left:-1.5px;top:20%;height:16%}
.vit-iphone::after{right:-1.5px;top:24%;height:11%}
/* Les trois noms : des puces ; celle de l'écran visé s'allume, la survoler vise l'écran. */
/* Une seule ligne, toujours : une puce qui passerait à la ligne pousserait la barre sous le pointeur (banc du 2026-10-31 : le
   segment cliqué laissait la troisième puce sous la souris, l'écran restait « visé ») ; les noms longs se coupent. */
.vit-puces{display:flex;justify-content:center;gap:var(--sp-4);flex-wrap:nowrap;min-height:1.6em}
.vit-puce{font:inherit;font-size:var(--fs-2xs);color:var(--mut);padding:2px 8px;border:0;border-radius:999px;background:transparent;cursor:pointer;line-height:1.5;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vit-puce.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.vit-puce:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Huit segments : celui du trio courant se remplit en cinq secondes (DH_VITRINE_PAS) ; figé au clic, il reste plein. */
.vit-barre{display:flex;justify-content:center;gap:4px;width:62%;margin:0 auto}
.vit-seg{position:relative;flex:1;height:3px;padding:0;border:0;border-radius:2px;background:var(--line);overflow:hidden;cursor:pointer}
.vit-seg-f{display:block;height:100%;width:0;background:var(--accent);border-radius:inherit}
.vit-seg.on .vit-seg-f.en-cours{animation:vit-remplir 5s linear forwards}
.vitrine.vise .vit-seg.on .vit-seg-f{animation-play-state:paused}
.vitrine.fige .vit-seg.on .vit-seg-f{animation:none;width:100%}
.vit-seg:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Les détails qui vivent, une fois par trio (les règles ne s'appliquent qu'à l'écran visible : l'animation repart à chaque tour) :
   la courbe se trace, les barres poussent, la notification glisse, le chiffre apparaît, les repères du plan battent. */
.vit-ecran.on .vit-trace{stroke-dasharray:1;stroke-dashoffset:1;animation:vit-trace 1.6s ease-out .3s forwards}
.vit-ecran.on .vit-arc{animation:vit-arc 1.4s ease-out .3s both}
.vit-ecran.on .vit-pousse{transform-box:fill-box;transform-origin:50% 100%;animation:vit-pousse .9s cubic-bezier(.2,.7,.2,1) .2s both}
.vit-ecran.on .vit-pousse-x{transform-box:fill-box;transform-origin:0 50%;animation:vit-pousse .9s cubic-bezier(.2,.7,.2,1) .3s both}
.vit-ecran.on .vit-glisse{animation:vit-glisse .8s ease-out .6s both}
.vit-ecran.on .vit-apparait{animation:vit-apparait .7s ease-out .4s both}
.vit-ecran.on .vit-pulse{transform-box:fill-box;transform-origin:center;animation:vit-pulse 2.4s ease-in-out infinite}
@keyframes vit-derive{from{transform:rotateX(2.5deg) rotateY(-4deg)}to{transform:rotateX(-2deg) rotateY(4deg)}}
@keyframes vit-remplir{from{width:0}to{width:100%}}
@keyframes vit-trace{to{stroke-dashoffset:0}}
@keyframes vit-arc{from{stroke-dasharray:0 1}to{stroke-dasharray:var(--p) 1}}
@keyframes vit-pousse{from{transform:scale(var(--sx,1),var(--sy,0))}to{transform:scale(1,1)}}
@keyframes vit-glisse{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@keyframes vit-apparait{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
@keyframes vit-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.45);opacity:.7}}
.vit-pousse-x{--sx:0;--sy:1}
/* « Réduire les animations » : le plateau ne bouge plus, rien ne se trace, la barre dit le trio sans le compter (la ronde elle-même
   s'arrête, dhVitrineLancer). */
@media (prefers-reduced-motion:reduce){
  .vit-plateau,.vit-plateau.actif{animation:none;transform:none}
  .vit-ecran.on :is(.vit-trace,.vit-arc,.vit-pousse,.vit-pousse-x,.vit-glisse,.vit-apparait,.vit-pulse){animation:none;stroke-dashoffset:0}
  .vit-seg.on .vit-seg-f{animation:none;width:100%}
}
/* Les deux choix, en lignes */
#modal.mx.mx-planche .mx-content{display:flex;flex-direction:column;justify-content:center}
#modal.mx.mx-sans-tete .mx-content{padding-top:var(--sp-24)}   /* sans tête éditoriale, le contenu respire sous la croix (fiche d'un groupe, 2026-10-31) */
#modal.mx.mx-sans-tete .mx-content{justify-content:flex-start}
/* « Que voulez-vous créer ? » (2026-11-06, le proprio : « améliorer l'UX et le design, style DA ») : la planche est partie, la
   fenêtre n'est plus que deux choix. Deux lignes calmes, sans cadre au repos : une tuile d'icône, le titre, ce que c'est, puis
   les exemples sur leur propre ligne (ils collaient à la phrase, « zéro.Par exemple »), et un chevron qui avance au survol. Le
   survol et le focus clavier dessinent la ligne entière ; le focus posé par openModal à l'ouverture ne dessine rien. */
#modal.mx .dh-nouveau{gap:var(--sp-4)}
#modal.mx .dh-nouveau .wiz-card{grid-template-areas:"ic t go" "ic d go";align-items:start;column-gap:var(--sp-16);
  padding:var(--sp-16) var(--sp-16) var(--sp-16) var(--sp-14);border:1px solid transparent;border-radius:var(--radius);background:transparent;
  transition:background-color .15s,border-color .15s}
#modal.mx .dh-nouveau .wiz-card+.wiz-card{position:relative}
#modal.mx .dh-nouveau .wiz-card+.wiz-card::before{content:"";position:absolute;left:var(--sp-14);right:var(--sp-14);top:calc(-1 * var(--sp-2) - 1px);border-top:1px solid var(--line2)}
#modal.mx .dh-nouveau .wiz-card:hover,#modal.mx .dh-nouveau .wiz-card:focus-visible{background:color-mix(in srgb,var(--accent) 5%,var(--card));border-color:color-mix(in srgb,var(--accent) 28%,var(--line))}
#modal.mx .dh-nouveau .wiz-card:hover::before,#modal.mx .dh-nouveau .wiz-card:hover+.wiz-card::before,
#modal.mx .dh-nouveau .wiz-card:focus-visible::before,#modal.mx .dh-nouveau .wiz-card:focus-visible+.wiz-card::before{opacity:0}
#modal.mx .dh-nouveau .wiz-card:focus{outline:none}
#modal.mx .dh-nouveau .wiz-card:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
#modal.mx .dh-nouveau .wiz-ic{width:40px;height:40px;border-radius:var(--radius);margin-top:2px}
#modal.mx .dh-nouveau .wiz-ic svg.ic{width:20px;height:20px}
#modal.mx .dh-nouveau .wiz-card-t{align-self:start;font-size:var(--fs-lg);font-weight:var(--fw-strong);letter-spacing:-.015em;color:var(--txt)}
#modal.mx .dh-nouveau .wiz-card-d{margin-top:var(--sp-2);color:var(--mut);line-height:1.5}
#modal.mx .dh-nouveau .wiz-card-ex{display:block;margin-top:var(--sp-8);font-size:var(--fs-xs);color:var(--mut2);line-height:1.5}
#modal.mx .dh-nouveau .wiz-card-go{align-self:center;font-size:0;gap:0;color:var(--mut2);opacity:1;transition:transform .15s,color .15s}
#modal.mx .dh-nouveau .wiz-card-go svg.ic{width:18px;height:18px}
#modal.mx .dh-nouveau .wiz-card:hover .wiz-card-go,#modal.mx .dh-nouveau .wiz-card:focus-visible .wiz-card-go{color:var(--accent);transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){ #modal.mx .dh-nouveau .wiz-card-go{transition:none;transform:none!important} }

/* Écran étroit : rail réduit en bandeau horizontal (brand seul), comme le wizard */
@media(max-width:880px){
  .mx-side-libre{flex-direction:column;align-items:stretch;gap:var(--sp-4)}
  #modal.mx.mx-planche .mxw{grid-template-columns:1fr}   /* la colonne du rail (380 px) rendait la fenêtre plus large que l'écran en 375 px */
  .mx-side-libre .vitrine{display:none}
  .planche-txt h4{font-size:var(--fs-lg)}
  #modal.mx .modal-card{width:calc(100vw - 16px);max-height:calc(100vh - 20px)}
  .mxw{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .mx-side{flex-direction:row;align-items:center;gap:var(--sp-14);border-right:0;border-bottom:1px solid var(--line);
    padding:var(--sp-12) var(--sp-16);overflow:visible}
  .mx-art,.mx-points,.mx-reassure,.mx-fill,.mx-bs{display:none}
  .mx-head{padding:var(--sp-18) var(--sp-20) var(--sp-4)}
  .mx-content{padding:var(--sp-14) var(--sp-20) var(--sp-14)}
  .mx-foot{padding:var(--sp-12) var(--sp-20)}
}

/* ── Confirmation (dhConfirm) : dialog empilable au-dessus de #modal ── */
#mx-confirm .mxc-card{width:min(440px,calc(100vw - 32px));background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-modal);box-shadow:var(--elev-1);padding:var(--sp-22) var(--sp-22) var(--sp-18);
  display:flex;flex-direction:column;gap:var(--sp-10)}
.mxc-badge{width:44px;height:44px;border-radius:var(--radius);display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-h));color:var(--on-solid);
  box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 30%,transparent)}
.mxc-badge svg.ic{width:21px;height:21px}
#mx-confirm .danger .mxc-badge{background:linear-gradient(135deg,var(--err),color-mix(in srgb,var(--err) 70%,#7f1d1d));
  box-shadow:0 4px 14px color-mix(in srgb,var(--err) 30%,transparent)}
.mxc-t{margin:var(--sp-2) 0 0;font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:-.01em}
.mxc-m{margin:0;font-size:var(--fs-md);color:var(--mut);line-height:1.55}
.mxc-m b,.mxc-m code{color:var(--txt)}
.mxc-d{font-size:var(--fs-sm);color:var(--mut);line-height:var(--lh-normal);border:1px solid var(--line2);border-radius:var(--radius-sm);
  background:var(--card2);padding:var(--sp-8) var(--sp-10)}
.mxc-choix{display:flex;width:100%;box-sizing:border-box}   /* dhPrompt à choix (2026-10-14) : le segmenté sur toute la largeur */
.mxc-choix .seg-theme{flex:1 1 0;justify-content:center;padding:var(--sp-6) var(--sp-8)}
.mxc-type label{display:block;font-size:var(--fs-sm);color:var(--mut);margin-bottom:var(--sp-6)}
.mxc-type label b{color:var(--txt)}
.mxc-type input{width:100%;font-family:var(--font-mono)}
.mxc-foot{display:flex;gap:var(--sp-10);justify-content:flex-end;margin-top:var(--sp-6)}

/* ── Complément PlanetHoster N0C - UI ── */
.ph-steps{display:flex;margin-bottom:var(--sp-18);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.ph-step{flex:1;padding:var(--sp-8) var(--sp-6) var(--sp-8);font-size:var(--fs-2xs);font-weight:var(--fw-strong);cursor:pointer;border:none;background:var(--card2);color:var(--mut);transition:background .15s,color .15s;line-height:1.3;text-align:center}
.ph-step:not(:last-child){border-right:1px solid var(--line)}
.ph-step:hover{background:var(--card);color:var(--txt)}
.ph-step.on{background:var(--accent);color:var(--on-solid)}
.ph-step-n{display:block;font-size:var(--fs-base);font-weight:var(--fw-bold);line-height:1.1;margin-bottom:var(--sp-2);opacity:.5}
.ph-step.on .ph-step-n{opacity:1}

.ph-sec{display:flex;align-items:center;gap:var(--sp-8);margin:var(--sp-16) 0 var(--sp-10);padding-bottom:var(--sp-8);border-bottom:1px solid var(--line2)}
.ph-sec:first-child{margin-top:0}
.ph-sec svg.ic{width:15px;height:15px;color:var(--accent);flex:none}
.ph-sec-t{font-weight:var(--fw-strong);font-size:var(--fs-md);color:var(--txt)}
.ph-sec-s{font-size:var(--fs-xs);color:var(--mut);margin-left:auto;max-width:52%;text-align:right;line-height:var(--lh-snug)}

.ph-label{display:block;font-size:var(--fs-sm);font-weight:var(--fw-strong);color:var(--mut);margin:var(--sp-10) 0 var(--sp-4);letter-spacing:.01em}
.ph-label:first-child{margin-top:0}
.ph-label .badge{margin-left:var(--sp-6);vertical-align:middle}
.ph-hint{font-size:var(--fs-xs);color:var(--mut2);margin:var(--sp-2) 0 var(--sp-8);line-height:1.45}

.ph-tip{background:color-mix(in srgb,var(--accent) 6%,var(--card2));border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));border-radius:var(--radius-sm);padding:var(--sp-8) var(--sp-12);font-size:var(--fs-sm);color:var(--mut);line-height:var(--lh-normal);margin-bottom:var(--sp-12)}
.ph-tip b{color:var(--txt);font-weight:var(--fw-strong)}
.ph-warn-tip{background:color-mix(in srgb,var(--warn) 8%,var(--card2));border:1px solid color-mix(in srgb,var(--warn) 22%,var(--line));border-radius:var(--radius-sm);padding:var(--sp-8) var(--sp-12);font-size:var(--fs-sm);color:var(--mut);line-height:var(--lh-normal);margin-bottom:var(--sp-12);display:flex;gap:var(--sp-8);align-items:flex-start}
.ph-warn-tip svg.ic{width:14px;height:14px;color:var(--warn);flex:none;margin-top:var(--sp-1)}

.ph-field-row{display:flex;gap:var(--sp-8);align-items:flex-end;margin-bottom:var(--sp-10)}
.ph-field-row>*{flex:1;min-width:0}
.ph-field-row>.flex-none{flex:none}

.ph-test-row{display:flex;align-items:center;gap:var(--sp-10);margin:var(--sp-10) 0}
.ph-test-out{font-size:var(--fs-sm);font-weight:var(--fw-strong);padding:var(--sp-2) var(--sp-8);border-radius:var(--radius-pill);flex:none}
.ph-test-out.ok{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok)}
.ph-test-out.err{background:color-mix(in srgb,var(--err) 12%,transparent);color:var(--err)}

.ph-result{padding:var(--sp-10) var(--sp-12);border-radius:var(--radius-sm);font-size:var(--fs-md);font-weight:var(--fw-strong);margin-bottom:var(--sp-6);display:flex;align-items:center;gap:var(--sp-8)}
.ph-result.ok{background:color-mix(in srgb,var(--ok) 10%,var(--card2));color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 22%,var(--line))}
.ph-result.err{background:color-mix(in srgb,var(--err) 10%,var(--card2));color:var(--err);border:1px solid color-mix(in srgb,var(--err) 22%,var(--line))}

.ph-steps-out{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-8)}
.ph-step-row{display:flex;gap:var(--sp-10);align-items:baseline;font-size:var(--fs-sm);padding:var(--sp-4) var(--sp-8);border-radius:var(--radius-sm)}
.ph-step-row.s-ok{background:color-mix(in srgb,var(--ok) 8%,var(--card2))}
.ph-step-row.s-err{background:color-mix(in srgb,var(--err) 8%,var(--card2))}
.ph-step-row .si{font-size:var(--fs-md);width:15px;text-align:center;flex:none}
.ph-step-row.s-ok .si{color:var(--ok)}
.ph-step-row.s-err .si{color:var(--err)}
.ph-step-row.s-warn .si{color:var(--warn)}
.ph-step-row .sl{font-weight:var(--fw-strong);color:var(--txt);white-space:nowrap;flex:none}
.ph-step-row .sm{color:var(--mut);min-width:0;overflow:hidden;text-overflow:ellipsis}
.ph-step-row .sc{font-size:var(--fs-xs);color:var(--mut2);margin-left:auto;white-space:nowrap;flex:none}

.ph-svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);margin:var(--sp-4) 0 var(--sp-6)}
.ph-svc-btn{border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--sp-12) var(--sp-14);cursor:pointer;background:var(--card2);text-align:left;transition:border-color .15s,background .15s}
.ph-svc-btn:hover{border-color:var(--accent);background:var(--card)}
.ph-svc-btn svg.ic{width:18px;height:18px;color:var(--accent);margin-bottom:var(--sp-6);display:block}
.ph-svc-name{display:block;font-weight:var(--fw-strong);font-size:var(--fs-md);color:var(--txt)}
.ph-svc-desc{display:block;font-size:var(--fs-xs);color:var(--mut);margin-top:var(--sp-2);line-height:var(--lh-snug)}

.ph-list-item{display:flex;gap:var(--sp-8);align-items:center;padding:var(--sp-6) 0;border-bottom:1px solid var(--line2);font-size:var(--fs-md)}
.ph-list-item:last-child{border-bottom:0}
.ph-list-name{font-weight:var(--fw-strong);flex:none}
.ph-list-meta{font-size:var(--fs-xs);color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-list-sp{flex:1}

.ph-toggle-card{display:flex;align-items:flex-start;gap:var(--sp-12);padding:var(--sp-10) var(--sp-14);background:var(--card2);border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:var(--sp-12)}
.ph-toggle-card input[type=checkbox]{margin-top:var(--sp-2);flex:none}
.ph-toggle-card label{font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--txt);cursor:pointer;flex:1}
.ph-toggle-card .mini{flex:none;align-self:flex-start}
.ph-tc-sub{display:block;font-size:var(--fs-xs);color:var(--mut);margin-top:var(--sp-2);font-weight:var(--fw-regular)}

.ph-conn-dot{font-size:var(--fs-2xs);vertical-align:1px;pointer-events:none}

/* ── cap:infra - panneau « Tes serveurs & sites » ── */
.inf-intro{display:flex;gap:var(--sp-8);align-items:flex-start;
  background:color-mix(in srgb,var(--accent) 6%,var(--card2));
  border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));border-radius:var(--radius-sm);
  padding:var(--sp-10) var(--sp-12);font-size:var(--fs-sm);color:var(--mut);line-height:var(--lh-normal);margin-bottom:var(--sp-16)}
.inf-intro svg.ic{width:15px;height:15px;color:var(--accent);flex:none;margin-top:var(--sp-1)}
.inf-intro b{color:var(--txt);font-weight:var(--fw-strong)}

.inf-empty{text-align:center;color:var(--mut);font-size:var(--fs-sm);line-height:1.55;
  padding:var(--sp-26) var(--sp-18);border:1px dashed var(--line);border-radius:var(--radius);background:var(--card2)}
.inf-empty svg.ic{width:26px;height:26px;color:var(--mut2);margin-bottom:var(--sp-8)}
.inf-empty b{color:var(--txt)}
.inf-empty b:first-of-type{display:block;font-size:var(--fs-md);margin-bottom:var(--sp-4)}

/* Carte par nœud : en-tête + tuiles de stats + liste de sites */
.inf-node{border:1px solid var(--line);border-radius:var(--radius);background:var(--card2);
  overflow:hidden;margin-bottom:var(--sp-14)}
.inf-node:last-child{margin-bottom:0}
.inf-node.off{opacity:.92}
.inf-node-head{display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-12) var(--sp-14)}
.inf-node-id{display:flex;align-items:center;gap:var(--sp-10);flex:1;min-width:0}
.inf-node-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--ok);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}
.inf-node-dot.down{background:var(--err);box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 22%,transparent)}
.inf-node-name{font-weight:var(--fw-bold);font-size:var(--fs-base);letter-spacing:-.01em;color:var(--txt)}
.inf-node-sub{font-size:var(--fs-xs);color:var(--mut);font-family:var(--font-mono);margin-top:var(--sp-2)}
.inf-node-rm,.inf-node-ed{flex:none}

.inf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-1);background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.inf-stat{background:var(--card);padding:var(--sp-8) var(--sp-10);text-align:center}
.inf-stat-v{display:block;font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--txt);letter-spacing:var(--ls-tight);line-height:1.1}
.inf-stat-k{display:block;font-size:var(--fs-2xs);font-weight:var(--fw-strong);letter-spacing:.04em;text-transform:uppercase;color:var(--mut);margin-top:var(--sp-2)}

.inf-sites{padding:var(--sp-2) var(--sp-14) var(--sp-8)}
.inf-site{display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-8) 0;border-top:1px solid var(--line2)}
.inf-site:first-child{border-top:0}
.inf-site-main{flex:1;min-width:0}
.inf-site-name{font-weight:var(--fw-strong);font-size:var(--fs-md);color:var(--txt)}
.inf-site-meta{display:block;font-size:var(--fs-xs);color:var(--mut);margin-top:var(--sp-2)}
.inf-site-actions{display:flex;align-items:center;gap:var(--sp-6);flex:none}
.inf-act{display:grid;place-items:center;width:30px;height:30px;padding:0}
.inf-act svg.ic{width:15px;height:15px}
.inf-site-none{color:var(--mut2);font-size:var(--fs-sm);padding:var(--sp-10) 0 var(--sp-4);line-height:var(--lh-normal)}

.inf-down{display:flex;align-items:center;gap:var(--sp-6);font-size:var(--fs-xs);color:var(--err);
  padding:0 var(--sp-14) var(--sp-12);line-height:1.4}
.inf-down svg.ic{width:14px;height:14px;flex:none}

.inf-legend{display:flex;flex-wrap:wrap;gap:var(--sp-6) var(--sp-16);margin-top:var(--sp-14);padding-top:var(--sp-12);
  border-top:1px solid var(--line2);font-size:var(--fs-xs);color:var(--mut)}
.inf-legend span{display:flex;align-items:center;gap:var(--sp-4)}
.inf-legend svg.ic{width:13px;height:13px;color:var(--mut2)}
.inf-legend b{color:var(--txt);font-weight:var(--fw-strong)}

/* ── Deploy Modal - rapport post-déploiement ── */
.dm-url{font-size:var(--fs-xs);color:var(--mut);font-family:var(--font-mono);word-break:break-all;display:block;margin-top:var(--sp-2)}
.dm-close-btn:disabled{opacity:.4;cursor:not-allowed}
.dm-report{margin-top:var(--sp-20);padding-top:var(--sp-18);border-top:1px solid var(--line)}
/* Header résultat */
.dm-rhead{display:flex;align-items:center;gap:var(--sp-12);padding-bottom:var(--sp-16);border-bottom:1px solid var(--line);margin-bottom:var(--sp-16)}
.dm-rhead-icon{width:38px;height:38px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:var(--fs-lg);flex:none}
.dm-rhead-icon.ok{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok)}
.dm-rhead-icon.err{background:color-mix(in srgb,var(--err) 12%,transparent);color:var(--err)}
.dm-rhead-t{font-size:var(--fs-base);font-weight:var(--fw-strong);line-height:1.25;color:var(--fg)}
.dm-rhead-msg{font-size:var(--fs-xs);color:var(--mut);margin-top:var(--sp-2);font-family:var(--font-mono);word-break:break-all}
/* Grille métriques */
.dm-metrics2{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-1);
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:var(--sp-14)}
.dm-m2{background:var(--card,var(--bg));padding:var(--sp-10) var(--sp-8);text-align:center}
.dm-mk2{display:block;font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:.07em;text-transform:uppercase;color:var(--mut);margin-bottom:var(--sp-4)}
.dm-mv2{font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--fg);letter-spacing:-.025em;display:block;line-height:var(--lh-flat)}
.dm-mv2.ok{color:var(--ok)}
.dm-mv2.err{color:var(--err)}
/* Snapshot row */
.dm-snap-row{display:flex;align-items:center;gap:var(--sp-8);padding:var(--sp-8) var(--sp-12);
  background:var(--bg2);border-radius:var(--radius);margin-bottom:var(--sp-14)}
.dm-snap-ic{font-size:var(--fs-md);color:var(--mut);flex:none}
.dm-snap-lbl{font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:.07em;text-transform:uppercase;color:var(--mut);flex:none}
.dm-snap-val{font-size:var(--fs-xs);font-family:var(--font-mono);font-weight:var(--fw-strong);color:var(--fg);word-break:break-all}
/* Erreur dépliable */
.dm-err-det{margin-top:var(--sp-12);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.dm-err-det summary{padding:var(--sp-8) var(--sp-12);cursor:pointer;font-size:var(--fs-sm);font-weight:var(--fw-strong);background:var(--bg2);color:var(--mut)}
.dm-err-det summary:hover{background:var(--bg3,var(--bg2))}
.dm-err-det pre{margin:0;padding:var(--sp-12) var(--sp-14);font-size:var(--fs-xs);background:var(--bg);overflow:auto;max-height:160px;white-space:pre-wrap;word-break:break-all;color:var(--err)}
/* Bannière mise à jour disponible */
.dm-update-banner{display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-10) var(--sp-14);
  border-radius:var(--radius);background:color-mix(in srgb,var(--accent) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);margin-top:var(--sp-16)}
.dm-update-ic{font-size:var(--fs-base);flex:none;animation:dmBlink 2.2s ease-in-out infinite}
@keyframes dmBlink{0%,100%{opacity:.55}50%{opacity:1}}
.dm-update-txt{flex:1;min-width:0}
.dm-update-t{font-size:var(--fs-sm);font-weight:var(--fw-strong);color:var(--fg)}
.dm-update-s{font-size:var(--fs-xs);color:var(--mut);margin-top:var(--sp-2)}

/* ── Aide-mémoire raccourcis clavier (lot U4) ── */
.dh-kbd-table{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
.dh-kbd-table td{padding:var(--sp-6) var(--sp-10);border-bottom:1px solid var(--line)}
.dh-kbd-table tr:last-child td{border-bottom:none}
.dh-kbd-table td:first-child{white-space:nowrap;width:1%}
.dh-kbd-table kbd{display:inline-block;min-width:22px;padding:var(--sp-2) var(--sp-6);text-align:center;
  font:12px/1.4 var(--font-mono,ui-monospace,Menlo,monospace);color:var(--txt);
  background:var(--bg);border:1px solid var(--line);border-bottom-width:2px;border-radius:var(--radius-sm)}

/* ── Palette de commandes ⌘K (lot U4) ── */
.dhpal-overlay{position:fixed;inset:0;z-index:var(--z-popover,10000);background:rgba(0,0,0,.42);
  display:flex;align-items:flex-start;justify-content:center;padding-top:14vh;backdrop-filter:blur(2px)}
.dhpal{width:min(560px,92vw);background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius,10px);box-shadow:var(--elev-2);overflow:hidden}
.dhpal-input{width:100%;box-sizing:border-box;padding:var(--sp-14) var(--sp-16);font-size:var(--fs-base);color:var(--txt);
  background:transparent;border:none;border-bottom:1px solid var(--line);outline:none}
.dhpal-list{max-height:min(46vh,420px);overflow:auto;padding:var(--sp-6)}
.dhpal-row{display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-8) var(--sp-10);border-radius:var(--radius-sm,8px);
  font-size:var(--fs-md);color:var(--txt);cursor:pointer}
.dhpal-row svg.ic{width:16px;height:16px;flex:none;color:var(--mut)}
.dhpal-row.active{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.dhpal-row.active svg.ic{color:var(--accent)}
.dhpal-lbl{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dhpal-hint{flex:none;font-size:var(--fs-xs);color:var(--mut2)}
.dhpal-empty{padding:var(--sp-18);text-align:center;color:var(--mut);font-size:var(--fs-md)}
.dhpal-foot{display:flex;gap:var(--sp-14);padding:var(--sp-8) var(--sp-14);border-top:1px solid var(--line);
  font-size:var(--fs-xs);color:var(--mut2)}

/* ── Validation inline des formulaires (dhFieldError, 08-toast-modal.js) ── */
.field-err{font-size:var(--fs-sm);color:var(--err);margin-top:var(--sp-4)}
[aria-invalid="true"]{border-color:var(--err)!important}

}

/* ══ Modales nettes (le proprio, 2026-10-25) ══ « Retire le flou derrière le modal, et la possibilité de faire défiler le contenu
   d'Hdplio (on reste concentré sur le modal) ; retire le box-shadow du modal ; dans les modals, toutes les interactions (survol,
   clic) en 0 s pour la réactivité ; les bordures à 0,5 px ; éviter les ombres (l'icône en haut à gauche, à la création d'un
   dossier) ». En couche overrides : la règle vaut pour chaque modale, quel que soit le module qui l'a dessinée. La fenêtre des
   applications (#dhapp, plein écran) garde ses propres traits : c'est un espace de travail, pas une modale de dialogue.
   L'anneau de focus (:focus-visible) garde son ombre : c'est un repère d'accessibilité, pas un décor. */
@layer overrides{
  dialog::backdrop{backdrop-filter:none}
  /* 2026-10-30 (le proprio, sur capture) : l'en-tête fixe paraissait AU-DESSUS du voile de « Éditer le projet », net et blanc
     pendant que tout le reste était voilé. Le dialog est bien dans la couche du dessus (elementFromPoint le dit), mais le
     compositeur peint l'en-tête, couche à part (backdrop-filter, position fixe), par-dessus le ::backdrop. Retirer le flou
     a suffi dans Chrome 152 et 156 ; pas dans Arc 1.169 (Chromium 155, GPU), vérifié sur l'écran du proprio le 2026-10-31
     après rechargement forcé. On ne dépend donc plus de l'ordre du compositeur : l'en-tête porte son propre voile (::after,
     même couleur que le ::backdrop), et le ::backdrop s'arrête sous la barre (dégradé à partir de --hh-bar) pour que les
     navigateurs qui peignent juste ne voilent pas l'en-tête deux fois. Prouvé identique au rendu d'avant dans Chrome 156
     avec GPU, page défilante. */
  html:has(dialog[open]:modal) body>header{backdrop-filter:none;-webkit-backdrop-filter:none}
  html:has(dialog[open]:modal) body>header::after{content:'';position:absolute;inset:0 0 -1px;background:var(--backdrop);pointer-events:none;z-index:999}
  dialog::backdrop{background:linear-gradient(to bottom,transparent var(--hh-bar,0px),var(--backdrop) var(--hh-bar,0px))}
  /* Les onglets d'une fiche (Identité, Dossiers, Patrimoine, Conformité, Flotte) : aucun arrondi, ni au repos, ni au survol, ni au focus
     (le proprio, 2026-10-31) ; en couche overrides pour passer devant le rayon que tout bouton reçoit ailleurs. */
  #modal .gsh-tab,#modal .gsh-tab:hover,#modal .gsh-tab:focus,#modal .gsh-tab:focus-visible,#modal .gsh-tab.on{border-radius:0}
  html:has(dialog[open]:modal){overflow:hidden}
  html:has(dialog[open]:modal) body{overflow:hidden}
  dialog[open]:not(#dhapp) :not(:focus-visible),dialog[open]:not(#dhapp){box-shadow:none}
  dialog[open]:not(#dhapp) *,dialog[open]:not(#dhapp) *::before,dialog[open]:not(#dhapp) *::after{transition-duration:0s}
  /* La vitrine de « Quoi ajouter ? » (composition A, 2026-10-31) : le passage d'un trio d'écrans au suivant se fond en 400 ms.
     Exception assumée à « zéro transition dans les modales » (25-10) : ce n'est pas la réponse à un geste, c'est une scène qui
     vit toute seule ; révocable en retirant cette règle (le changement devient net). */
  #modal .vit-ecran{transition:opacity .4s ease,transform .4s ease;transition-duration:.4s}
  /* v2 (2026-10-31) : chaque écran entre par sa profondeur (le fond, puis la gauche, puis la droite), le plateau suit le curseur
     sans à-coup, un écran visé avance en 300 ms. Même exception assumée, même levée. */
  #modal .vit-gauche .vit-ecran.on{transition-delay:.12s}
  #modal .vit-droite .vit-ecran.on{transition-delay:.24s}
  #modal .vit-plateau.actif{transition:transform .5s ease;transition-duration:.5s}
  #modal .vit-place{transition:transform .3s ease,opacity .3s ease;transition-duration:.3s}
  #modal .vit-puce{transition:color .2s,background-color .2s;transition-duration:.2s}
  @media (prefers-reduced-motion:reduce){ #modal :is(.vit-ecran,.vit-plateau.actif,.vit-place,.vit-puce){transition-duration:0s;transition-delay:0s} }
  dialog[open]:not(#dhapp) *{border-width:.5px}
  dialog[open]:not(#dhapp) :is(.modal-card,.mx,.mxc-card){border-width:.5px}
  /* Point K (le proprio, 2026-10-28) : « retirer la bordure du bouton fermer en haut à droite de tous les modals d'Hdplio ».
     Les modales posent leur croix sous plusieurs noms (le kit mx, l'assistant, les fenêtres du Studio, celles qui la nomment
     seulement par son libellé ou son geste) : le filet devient transparent, la taille ne bouge pas, le survol garde son fond. */
  dialog[open] :is(.mx-close,.wizx-close,.esh-dlg-close,.dm-close-btn,.icons-detail-close,.dsc-nl-close,[data-fermer],
    button[aria-label="Fermer"],button[aria-label="Close"],button[title="Fermer"],button[title="Close"],button.icon[onclick*=".close()"]),
  dialog[open] :is(.mx-close,.wizx-close,.esh-dlg-close,.dm-close-btn,button[aria-label="Fermer"],button[aria-label="Close"]):hover{border-color:transparent}
}

/* Paramètres d'un environnement (10-environments.js, refait le 2026-11-01) : sans rail illustré ; une barre d'onglets
   soulignée, puis une section à la fois, coiffée d'un titre et d'une phrase d'usage. */
@layer overrides{
  #modal .evm{display:flex;flex-direction:column;gap:var(--sp-16)}
  #modal .evm-nav{display:flex;gap:var(--sp-2);border-bottom:1px solid var(--line);margin:calc(-1 * var(--sp-4)) 0 0;overflow-x:auto;scrollbar-width:none}
  #modal .evm-tab{border:0;border-radius:0;background:none;box-shadow:none;padding:var(--sp-8) var(--sp-12);font-size:var(--fs-sm);
    font-weight:var(--fw-medium);color:var(--mut);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
  #modal .evm-tab:hover{color:var(--txt);background:none}
  #modal .evm-tab.on{color:var(--txt);border-bottom-color:var(--accent)}
  #modal .evm-sec{display:flex;flex-direction:column;gap:var(--sp-12);min-height:250px}   /* la fenêtre ne saute pas d'un onglet à l'autre */
  #modal .evm-sec[hidden],#modal .evm-mode[hidden]{display:none}
  #modal .evm-mode{display:flex;flex-direction:column;gap:var(--sp-12)}
  #modal .evm-sec .field{margin:0}
  #modal .evm-sec-tete h4{margin:0 0 var(--sp-2);font-size:var(--fs-md);font-weight:var(--fw-strong)}
  #modal .evm-sec-tete p{margin:0;font-size:var(--fs-sm);color:var(--mut);line-height:1.45}
  #modal .evm-vide{margin:0;font-size:var(--fs-sm);color:var(--mut)}
}