/* Fenêtre « application plein écran » (#dhapp, cf. 78-appwin.js).
   Les cartes de la section Application ouvrent leur atelier PAR-DESSUS l'app.
   <dialog>.showModal() met la fenêtre dans le top layer : pas de z-index ici.
   Le socle (06-components.css) donne déjà à tout dialog fond transparent,
   marges auto et le voile ::backdrop - on ne reprend que ce qui diffère. */
@layer modules{
  .dhapp{ width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; padding:0; }

  .dhapp-w{
    /* minmax(0,1fr) : une colonne en auto prenait la largeur minimale de la barre, et à 375 px des outils posés dans
       la barre élargissaient toute la fenêtre (vu le 2026-10-11). */
    display:grid; grid-template-rows:auto 1fr; grid-template-columns:minmax(0,1fr);
    height:100%; min-height:0;
    background:var(--bg); color:var(--txt);
  }

  /* Barre de titre : la MÊME que l'en-tête de l'app (proprio, 2026-10-11 : « le header doit être de la même taille que
     celui de l'app principale »). Mêmes termes que 03-layout.css : hauteur --hh-bar (contrôle ou marque + deux paddings
     + le filet), padding-block --sp-8, 18 px de côté, fond --header-bg flouté, filet --line. Changer l'en-tête change
     donc ces fenêtres aussi. */
  .dhapp-bar{
    display:flex; align-items:center; gap:var(--sp-14); min-width:0;
    box-sizing:border-box; height:var(--hh-bar);
    padding-block:var(--sp-8); padding-inline:var(--sp-18);
    border-bottom:1px solid var(--line); background:var(--header-bg); backdrop-filter:blur(10px);
  }
  /* L'icône de l'atelier dans une tuile, la recette de la marque (.brand-mark) : 5 % d'accent, filet d'un demi-pixel. */
  .dhapp-ic{ display:grid; place-items:center; flex:none; box-sizing:border-box;
    width:var(--hh-brand); height:var(--hh-brand); border-radius:var(--radius); color:var(--accent);
    border:.5px solid color-mix(in srgb,color-mix(in srgb,var(--accent) 14%,var(--line)) 45%,transparent);
    background:color-mix(in srgb,var(--accent) 5%,var(--card)); }
  .dhapp-ic svg{ width:18px; height:18px; }
  /* Le titre, au corps du nom de l'app (header h1) ; il cède la place avant les outils et la croix (375 px). */
  .dhapp-t{ font-size:var(--fs-lg); font-weight:var(--fw-bold); letter-spacing:var(--ls-tight); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dhapp-sub{ font-size:var(--fs-sm); color:var(--mut); flex:1; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dhapp-sub::before{ content:'·'; margin-right:var(--sp-8); color:var(--mut2); }

  /* Les outils qu'un module pose dans la barre (opts.barre de 78-appwin.js) : entre le sous-titre et la croix. */
  .dhapp-outils{ display:flex; align-items:center; gap:var(--sp-8); flex:none; }
  .dhapp-outils:empty{ display:none; }
  /* Un module qui dessine son propre en-tête (le Tableur, maquette du 2026-10-16) efface la barre de titre : 39-edition.js
     pose la classe quand son éditeur est ouvert, la retire au retour à la bibliothèque, 78-appwin.js à la fermeture. */
  .dhapp.dhapp-sans-barre .dhapp-bar{ display:none; }
  .dhapp.dhapp-sans-barre .dhapp-w{ grid-template-rows:minmax(0,1fr); }

  /* La croix : un bouton carré de l'en-tête (34 px, rayon --hsq de 7 px). Celle des modals depuis le 2026-11-04 (le proprio,
     2026-11-02, VAGUE_UI_MODIF2 F1, D3, Q2 au défaut) : ni fond ni filet au repos, le fond léger des modals au survol
     (--line2, celui de .icon:hover, 03-layout) ; elle était sur le fond --chrome-bg des autres boutons de l'en-tête. */
  .dhapp-x{
    display:flex; align-items:center; justify-content:center; flex:none;
    width:34px; height:34px; padding:0; cursor:pointer;
    border:0; border-radius:var(--radius-sm);   /* 7 px, le --hsq de l'en-tête ; en jeton pour la famille da */
    background:transparent; color:var(--chrome-ink);
  }
  @media (prefers-reduced-motion:no-preference){ .dhapp-x{ transition:background-color .15s ease, color .15s ease; } }
  .dhapp-x:hover{ color:var(--chrome-ink); background:var(--line2); }
  .dhapp-x svg{ width:15px; height:15px; }

  /* Hôte du module. Une seule rangée en 1fr : un module court (la bibliothèque,
     un éditeur) OCCUPE toute la hauteur au lieu de flotter en haut, un module
     long défile. Les ateliers qui n'ont pas de marge à eux demandent `pad`. */
  .dhapp-body{ display:grid; grid-template-rows:minmax(0,1fr); min-height:0; overflow:auto; }
  .dhapp-body > *{ min-width:0; }
  .dhapp-body.pad{ padding:var(--sp-16) var(--sp-20); }
  /* La silhouette d'une app du Studio est plein cadre, comme l'écran qui la remplacera (l'Entreprise, 11-business.css). */
  .dhapp-body.pad:has(> .sqk-app){ padding:0; }

  /* La bibliothèque Édition est dimensionnée pour un onglet : son hôte d'éditeur
     s'arrête à sa hauteur minimale (.ed-editor.full : 600px) et laisse un vide
     sous lui. En plein écran, l'éditeur DOIT remplir la fenêtre - on ne corrige
     que dans cette surface, la mise en page de l'onglet ne bouge pas. */
  .dhapp-body .ed-body{ display:flex; flex-direction:column; min-height:0; }
  .dhapp-body .ed-editor{ flex:1; min-height:0; }
  /* Dernier maillon : la racine de l'éditeur lui-même (.cide, .esh, l'éditeur de
     texte…) s'arrête à SA hauteur minimale. On l'étire sur son hôte. */
  .dhapp-body .ed-editor-host{ display:flex; flex-direction:column; }
  .dhapp-body .ed-editor-host > *{ flex:1; min-height:0; }

  .dhapp-wait{
    display:flex; align-items:center; justify-content:center; gap:var(--sp-10);
    height:100%; color:var(--mut); font-size:var(--fs-md);
  }

  /* L'animation d'ouverture du socle (translate+scale) déforme une surface
     plein écran : on ne garde que le fondu. */
  @media (prefers-reduced-motion:no-preference){
    dialog.dhapp[open]{ animation:dhappin .16s ease; }
    @keyframes dhappin{ from{ opacity:0 } to{ opacity:1 } }
  }
  /* CDC_PUBLICATION P4 (2026-10-19) : une application du Studio, en plein écran dans son cadre (12c-apps-studio.js). */
  .app-studio-cadre{ display:block; width:100%; height:100%; border:0; background:var(--card); }
}

/* ── Les applications web du Studio (78b-apps-web.js, 2026-10-19) : la page occupe toute la fenêtre ; la barre d'outils
   (précédent, suivant, recharger, l'adresse, l'onglet, Modifier, Retirer) se pose dans la barre de la fenêtre. ── */
@layer modules{
  .aw-hote{ display:flex; min-height:0; height:100%; padding:0; overflow:hidden; }
  .aw-vue{ flex:1; width:100%; height:100%; border:0; background:var(--paper); display:flex; }
  .aw-barre{ display:flex; align-items:center; gap:var(--sp-6); }
  .aw-adresse{ width:clamp(180px,30vw,520px); height:30px; padding:0 var(--sp-10); border:1px solid var(--line); border-radius:var(--radius-pill);
    background:var(--card2); color:var(--txt); font-size:var(--fs-sm); font-family:var(--font-mono,monospace); }
  .aw-adresse[readonly]{ color:var(--mut); cursor:default; }
  .aw-refus{ margin:auto; max-width:440px; padding:var(--sp-24); text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--sp-8); }
  .aw-refus>svg{ width:32px; height:32px; color:var(--mut2); }
  .aw-refus-t{ margin:0; font-weight:var(--fw-strong); color:var(--txt); }
  /* L'icône du site visé dans sa tuile du Studio (2026-10-19), à la taille des icônes voisines. */
  .sni img.aw-ico{ width:15px; height:15px; flex:none; border-radius:var(--radius-xs); object-fit:contain; }
  @media (max-width:640px){ .aw-adresse{ display:none; } }
}

/* ══ Thème des applications et compléments (2026-10-25) ══ En « Couleur d'application », la fenêtre d'une application prend
   la couleur de celle qui y est ouverte (data-app-couleur, posé par dhAppCouleur, 78-appwin.js), l'écran d'un complément
   la sienne (--app-c, son manifeste), et les icônes du panneau du Studio aussi. Les dérivés de l'accent sont recalculés ici :
   à la racine, ils ont été figés sur l'accent d'Hdplio. Depuis le 2026-11-04 (VAGUE_UI_MODIF U1, D1), c'est le seul mode :
   la racine porte toujours data-theme-apps="app" (03-settings.js) ; les règles du mode « Par défaut » et l'aperçu du réglage
   sont retirés. Les sélecteurs gardent l'attribut, pour qu'un retour arrière ne soit qu'une ligne de 03-settings.js. */
@layer overrides{
  html[data-theme-apps="app"] [data-app-couleur]{
    --accent-h:color-mix(in srgb,var(--accent) 82%,#000); --link:color-mix(in srgb,var(--accent) 72%,#fff);
    --accent-texte:color-mix(in srgb,var(--accent) 72%,#fff); --accent-plein:color-mix(in srgb,var(--accent) 82%,#000); --focus-anneau:var(--accent);
    /* le bleu du choix des apps à document (22c-studio-outils.css) suit aussi : plus clair en sombre, comme le sien */
    --outils-accent:color-mix(in srgb,var(--accent) 72%,#fff);
    --outils-accent-doux:color-mix(in srgb,var(--outils-accent) 18%,var(--card)); --outils-accent-filet:color-mix(in srgb,var(--outils-accent) 45%,var(--line));
    /* Les jetons du Studio (37b) qui en dérivent, figés eux aussi à la racine : sans eux, les onglets du Design et de
       l'Interface restaient bleus dans une fenêtre à la couleur de l'app (vu au banc design_ui, 2026-11-04). */
    --studio-accent:var(--outils-accent); --studio-accent-plein:var(--outils-accent); --studio-accent-doux:var(--outils-accent-doux)}
  html[data-theme-apps="app"][data-theme="light"] [data-app-couleur]{--link:var(--accent-h);--accent-texte:var(--accent);--accent-plein:var(--accent);--outils-accent:var(--accent);
    --studio-accent:var(--accent);--studio-accent-plein:var(--accent)}
  html[data-theme-apps="app"] [data-app-couleur="dossiers"]{--accent:var(--app-dossiers)}
  html[data-theme-apps="app"] [data-app-couleur="document"]{--accent:var(--app-document)}
  html[data-theme-apps="app"] [data-app-couleur="tableau"]{--accent:var(--app-tableau)}
  html[data-theme-apps="app"] [data-app-couleur="design"]{--accent:var(--app-design)}
  html[data-theme-apps="app"] [data-app-couleur="3d"]{--accent:var(--app-3d)}
  html[data-theme-apps="app"] [data-app-couleur="video"]{--accent:var(--app-video)}
  html[data-theme-apps="app"] [data-app-couleur="audio"]{--accent:var(--app-audio)}
  html[data-theme-apps="app"] [data-app-couleur="entreprise"]{--accent:var(--app-entreprise)}
  html[data-theme-apps="app"] [data-app-couleur="interface"]{--accent:var(--app-interface)}
  html[data-theme-apps="app"] [data-app-couleur="apercu"]{--accent:var(--app-apercu)}
  html[data-theme-apps="app"] [data-app-couleur="presentation"]{--accent:var(--app-presentation)}
  html[data-theme-apps="app"] [data-app-couleur="code"]{--accent:var(--app-code)}
  html[data-theme-apps="app"] [data-app-couleur="plan"]{--accent:var(--app-plan)}
  html[data-theme-apps="app"] [data-app-couleur="calendrier"]{--accent:var(--app-calendrier)}
  html[data-theme-apps="app"] [data-app-couleur="cmp"]{--accent:var(--app-c,var(--accent))}
  /* Les icônes du panneau du Studio */
  html[data-theme-apps="app"] nav.snav :is(#tab-dossiers) svg.ic{color:var(--app-dossiers)}
  html[data-theme-apps="app"] nav.snav #snav-cms svg.ic{color:var(--app-interface)}
  html[data-theme-apps="app"] nav.snav #snav-texte svg.ic{color:var(--app-document)}
  html[data-theme-apps="app"] nav.snav #snav-tableur svg.ic{color:var(--app-tableau)}
  html[data-theme-apps="app"] nav.snav #snav-image svg.ic{color:var(--app-design)}
  html[data-theme-apps="app"] nav.snav #snav-3d svg.ic{color:var(--app-3d)}
  html[data-theme-apps="app"] nav.snav #snav-video svg.ic{color:var(--app-video)}
  html[data-theme-apps="app"] nav.snav #snav-audio svg.ic{color:var(--app-audio)}
  html[data-theme-apps="app"] nav.snav #snav-business svg.ic{color:var(--app-entreprise)}
  html[data-theme-apps="app"] nav.snav #tab-render svg.ic{color:var(--app-apercu)}
  /* Un complément : sa pastille à sa couleur. */
  html[data-theme-apps="app"] .sni .sni-pic{color:var(--app-c,var(--accent))}
}