/* Styles propres aux écrans « creation-medias-connexion » de l’interface /v2.
   Portée : écran de connexion (#authGate), vue « launch » (Créer avec l’IA,
   Refaire un site existant) et vue « media » (Photos et fichiers). */

/* -------------------------------------------------------------------------
   Connexion : panneau de présentation clair + formulaire
   ------------------------------------------------------------------------- */
.auth-gate {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  place-items: stretch;
  gap: 0;
  padding: 0;
  overflow-y: auto;
  color: var(--ink);
  background: var(--surface);
}
.auth-brand {
  position: relative;
  display: flex;
  max-width: none;
  min-height: 100%;
  flex-direction: column;
  gap: 32px;
  padding: clamp(28px, 4.5vw, 56px) clamp(28px, 5vw, 72px);
  overflow: hidden;
  color: var(--ink);
  background: var(--surface-2);
  border-right: 1px solid var(--line);
}
.auth-brand-head { display: flex; align-items: center; gap: 10px; }
.auth-brand-head strong { margin: 0; color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.auth-brand-head strong b { color: inherit; font-weight: inherit; }
.auth-brand .brand-mark { width: 34px; height: 34px; border-radius: var(--radius-sm); color: #fff; background: var(--blue); font-size: 17px; }
.auth-pitch { max-width: 520px; margin-top: auto; }
.auth-brand .auth-pitch-title {
  margin: 0 0 12px;
  color: var(--ink);
  max-width: 13em;
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.auth-brand .auth-pitch p:not(.auth-pitch-title) { max-width: 42ch; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }

/* Esquisse d’un site : des formes neutres, jamais de faux contenu. */
.auth-sketch {
  position: relative;
  display: grid;
  gap: 10px;
  width: min(420px, 100%);
  padding: 0 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.auth-sketch > div, .auth-sketch-tag { animation: auth-assemble .24s var(--ease-out) both; }
.auth-sketch-bar { display: flex; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.auth-sketch-bar i { display: none; }
.auth-sketch-bar span { width: 46%; height: 8px; border-radius: var(--radius-pill); background: var(--surface-3); }
.auth-sketch-menu { display: flex; gap: 8px; padding: 0 16px; animation-delay: .06s !important; }
.auth-sketch-menu span { width: 54px; height: 16px; border-radius: var(--radius-pill); background: var(--surface-3); }
.auth-sketch-menu span:first-child { background: var(--blue-soft); }
.auth-sketch-hero { display: grid; gap: 8px; margin: 0 16px; padding: 20px 18px; border-radius: var(--radius); background: var(--blue); animation-delay: .12s !important; }
.auth-sketch-hero span { height: 12px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .92); }
.auth-sketch-hero span:first-child { width: 72%; height: 16px; }
.auth-sketch-hero span:nth-child(2) { width: 50%; background: rgba(255, 255, 255, .55); }
.auth-sketch-hero em { width: 84px; height: 22px; margin-top: 4px; border-radius: var(--radius-xs); background: #fff; }
.auth-sketch-cards { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; padding: 0 16px; animation-delay: .18s !important; }
.auth-sketch-cards span { height: 46px; border-radius: var(--radius-sm); background: var(--surface-3); }
.auth-sketch-cards span:nth-child(3) { display: none; }
.auth-sketch-tag {
  position: absolute;
  right: -12px;
  top: 52px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--blue-strong);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  font-size: 12px;
  font-weight: 600;
  animation-delay: .3s !important;
}
@keyframes auth-assemble { from { opacity: 0; transform: translateY(6px); } }

.auth-promises { display: grid; gap: 12px; max-width: 46ch; margin: 0; padding: 0; list-style: none; }
.auth-promises li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.auth-promises svg { width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Tant que l’écran de connexion est affiché, la page derrière ne défile pas. */
body:has(> .auth-gate:not(.authenticated)) { overflow: hidden; }

/* Colonne du formulaire */
.auth-side {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 4vw, 56px);
  background: var(--surface);
}
.auth-gate .auth-loading { color: var(--muted); }
.auth-gate .auth-spinner { border-color: var(--line); border-top-color: var(--blue); }
.auth-card {
  gap: 18px;
  width: min(380px, 100%);
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.auth-card .kicker { display: none; }
.auth-card h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -.025em; }
.auth-card > p#authSubtitle { max-width: 65ch; margin: -10px 0 4px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.auth-field { display: grid; gap: 6px; }
.auth-field[hidden] { display: none; }
.auth-card .auth-field > span, .auth-card .auth-field label, .auth-field-row label { color: var(--ink); font-size: 13.5px; font-weight: 600; }
.auth-field-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.auth-card input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface); font-size: 15px; transition: border-color var(--dur-2) var(--ease-soft), box-shadow var(--dur-2) var(--ease-soft); }
.auth-card input:hover { border-color: var(--line-hover); }
.auth-card input:focus-visible { outline: 0; border-color: var(--blue); box-shadow: var(--focus-ring); }
.auth-card input[aria-invalid="true"] { border-color: var(--red); background: var(--surface); }
.auth-card input[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--red); }
/* Erreur en ligne sous le champ. */
.auth-error { display: flex; align-items: flex-start; gap: 6px; color: var(--red-strong); font-size: 13px; font-weight: 500; line-height: 1.4; }
.auth-error[hidden] { display: none; }
.auth-error::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 3.5v4' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='7' cy='10.2' r='.9' fill='%23fff'/%3E%3C/svg%3E") center / 14px no-repeat; }
.auth-input-wrap { position: relative; }
.auth-input-wrap input { padding-right: 104px; }
.auth-reveal {
  position: absolute;
  top: 5px;
  right: 5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-soft), color var(--dur-2) var(--ease-soft);
}
.auth-reveal:hover { color: var(--ink); background: var(--surface-3); }
.auth-reveal:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.auth-reveal svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.auth-reveal[aria-pressed="true"] { color: var(--blue-strong); }
.auth-hint { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.auth-card[data-mode="login"] .auth-hint { display: none; }
.auth-inline-link, .auth-links button {
  min-height: 32px;
  padding: 2px 0;
  border: 0;
  color: var(--blue-strong);
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--blue) 35%, transparent);
  text-underline-offset: 3px;
  cursor: pointer;
}
.auth-inline-link:hover, .auth-links button:hover { text-decoration-color: currentColor; }
.auth-inline-link:focus-visible, .auth-links button:focus-visible { outline: 0; border-radius: var(--radius-xs); box-shadow: var(--focus-ring); }
.auth-inline-link[hidden] { display: none; }
.auth-card .button.primary { width: 100%; height: 48px; margin-top: 2px; font-size: 15px; }
.auth-card .button.primary[aria-busy="true"] { cursor: progress; opacity: .8; }

/* Message du service : erreur (rouge) ou confirmation (vert). Vide = invisible. */
.auth-card .auth-message {
  display: flex;
  gap: 10px;
  min-height: 0;
  margin: 0;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--red) 28%, var(--line));
  border-radius: var(--radius-sm);
  color: var(--red-strong) !important;
  background: var(--surface-red);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
}
.auth-card .auth-message::before { content: "!"; display: grid; flex: none; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; color: #fff; background: var(--red); font-size: 12px; font-weight: 700; }
.auth-card .auth-message[data-tone="info"] { border-color: color-mix(in srgb, var(--green) 28%, var(--line)); color: var(--green) !important; background: var(--surface-green); }
.auth-card .auth-message[data-tone="info"]::before { content: "✓"; background: var(--green); }
.auth-card .auth-message:empty { display: none; }

.auth-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.auth-switch { margin: 0; color: var(--muted); font-size: 13.5px; text-align: center; }
.auth-switch:has(> button[hidden]) { display: none; }
.auth-links > button[hidden] { display: none; }
.auth-footnote { margin: 0; color: var(--muted); font-size: 12.5px; text-align: center; }
.auth-footnote a { color: var(--blue-strong); font-weight: 600; }
.auth-gate .auth-loading, .auth-gate .auth-card, .auth-gate .auth-footnote { grid-column: auto; }
.auth-gate:not(.unauthenticated) .auth-footnote { display: none; }

@media (max-width: 1080px) {
  .auth-gate { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .auth-sketch { display: none; }
}
@media (max-width: 760px) {
  .auth-gate { display: flex; flex-direction: column; align-content: stretch; gap: 0; padding: 0; }
  .auth-brand { min-height: 0; flex: none; gap: 14px; padding: 18px 20px 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .auth-pitch { margin-top: 2px; }
  .auth-brand .auth-pitch-title { display: block; margin: 0; font-size: 22px; }
  .auth-brand .auth-pitch p:not(.auth-pitch-title), .auth-promises { display: none; }
  .auth-side { flex: 1; justify-content: flex-start; padding: 24px 20px 32px; }
  .auth-card h1 { font-size: 24px; }
  .auth-inline-link, .auth-links button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-sketch > div, .auth-sketch-tag { animation: none; }
}

/* -------------------------------------------------------------------------
   Démarrage (boot.js pose html[data-boot] avant le premier affichage)
   - "gate" : chargement neutre (logo et « Chargement… »), puis le formulaire
     seulement quand le serveur confirme l’absence de session ;
   - "app" : session connue, squelette de l’espace à la place de la connexion ;
   - "leaving" : le squelette s’efface (160 ms) ; "done" : espace affiché.
   ------------------------------------------------------------------------- */
.auth-gate:is(.checking, .error) { grid-template-columns: minmax(0, 1fr); }
.auth-gate:is(.checking, .error) .auth-brand { display: none; }
.auth-gate .auth-loading .brand-mark, .auth-boot-error .brand-mark { width: 40px; height: 40px; border-radius: var(--radius-sm); color: #fff; background: var(--blue); font-size: 19px; font-weight: 700; }
.auth-gate .auth-loading .auth-spinner { width: 22px; height: 22px; border-width: 2px; }
.auth-gate .auth-loading p { font-size: 14px; }
.auth-boot-error { display: none; justify-items: center; gap: 14px; max-width: 42ch; color: var(--ink-2); text-align: center; }
.auth-gate.error .auth-boot-error { display: grid; }
.auth-boot-error p { margin: 0; font-size: 15px; line-height: 1.5; }
html[data-boot="app"] .auth-gate, html[data-boot="leaving"] .auth-gate { display: none; }

.boot-skeleton { display: none; }
html:is([data-boot="app"], [data-boot="leaving"]) .boot-skeleton {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  overflow: hidden;
  background: var(--canvas);
}
html[data-boot="leaving"] .boot-skeleton { opacity: 0; pointer-events: none; transition: opacity 160ms var(--ease-out); }
html:is([data-boot="app"], [data-boot="leaving"]) body { overflow: hidden; }
/* Même forme que la coque « Atelier calme » : menu à plat sur --canvas, barre du haut de 56 px,
   contenu aligné à gauche ; tableau de bord en deux colonnes (lignes + aperçu du site). */
.boot-sk-sidebar { display: flex; flex-direction: column; gap: 12px; padding: 12px 10px 14px; background: var(--canvas); border-right: 1px solid var(--line); }
.boot-sk-brand { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 8px; color: var(--ink); }
.boot-sk-brand .brand-mark { width: 20px; height: 20px; border-radius: 5px; background: var(--ink); font-size: 11.5px; font-weight: 650; }
.boot-sk-brand .brand-copy { font-size: 14px; }
.boot-sk-picker { width: 60%; height: 14px; min-height: 0; margin: 14px 8px 8px; }
.boot-sk-nav { display: grid; gap: 18px; padding: 6px 10px; }
.boot-sk-nav .skeleton { height: 12px; min-height: 0; }
.boot-sk-nav .skeleton:nth-child(odd) { width: 70%; }
.boot-sk-nav .skeleton:nth-child(even) { width: 54%; }
.boot-sk-content { display: flex; min-width: 0; flex-direction: column; }
.boot-sk-topbar { display: flex; flex: none; align-items: center; gap: 12px; height: var(--topbar-height); padding: 0 16px 0 32px; background: var(--canvas); border-bottom: 1px solid var(--line); }
.boot-sk-crumbs { width: 200px; height: 12px; min-height: 0; }
.boot-sk-spacer { flex: 1; }
.boot-sk-search { width: 84px; height: 28px; min-height: 0; border-radius: var(--radius-sm); }
.boot-sk-avatar { width: 26px; height: 26px; min-height: 0; border-radius: 50%; }
.boot-sk-main { display: grid; align-content: start; gap: 32px; width: 100%; max-width: calc(var(--content-max) + 80px); margin-inline: 0; padding: 32px 40px 64px; }
.boot-sk-heading { display: grid; gap: 8px; }
.boot-sk-heading .is-title { width: min(280px, 60%); height: 26px; }
.boot-sk-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.boot-sk-col { display: grid; align-content: start; gap: 14px; }
.boot-sk-label { width: 120px; height: 14px; min-height: 0; }
.boot-sk-rows { display: grid; border-top: 1px solid var(--line); }
.boot-sk-rows .skeleton { width: 72%; height: 12px; min-height: 0; margin: 18px 8px; }
.boot-sk-rows .skeleton:nth-child(2) { width: 58%; }
.boot-sk-field { height: 42px; min-height: 0; margin-bottom: 8px; border-radius: var(--radius-sm); }
.boot-sk-preview { aspect-ratio: 3 / 4; min-height: 0; border-radius: var(--radius); }
.boot-sk-line { width: 50%; height: 12px; min-height: 0; }
.boot-sk-line.is-short { width: 70%; }
.boot-sk-aside { display: none; }
/* Tableau de bord : deux colonnes, travail à gauche et aperçu à droite. */
html[data-boot-screen="dashboard"] .boot-sk-grid { grid-template-columns: minmax(0, 1fr) var(--preview-width); }
html[data-boot-screen="dashboard"] .boot-sk-aside { display: grid; }
@media (max-width: 1100px) {
  html[data-boot-screen="dashboard"] .boot-sk-grid { grid-template-columns: minmax(0, 1fr); }
  .boot-sk-preview { aspect-ratio: 16 / 10; }
}

.boot-sk-editor { display: none; }
html[data-boot-screen="editor"] .boot-skeleton { grid-template-columns: minmax(0, 1fr); }
html[data-boot-screen="editor"] :is(.boot-sk-sidebar, .boot-sk-topbar, .boot-sk-main, .boot-sk-bottom) { display: none; }
html[data-boot-screen="editor"] .boot-sk-editor { display: grid; flex: 1; grid-template-columns: 250px minmax(0, 1fr); grid-template-rows: 62px minmax(0, 1fr); }
.boot-sk-editor-bar { display: flex; grid-column: 1 / -1; align-items: center; gap: 12px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.boot-sk-editor-bar .skeleton { width: 120px; height: 34px; min-height: 0; border-radius: var(--radius-sm); }
.boot-sk-editor-bar .skeleton:first-child { width: 180px; }
.boot-sk-editor-side { display: grid; align-content: start; gap: 10px; padding: 16px 14px; background: var(--surface); border-right: 1px solid var(--line); }
.boot-sk-editor-side .skeleton { height: 44px; border-radius: var(--radius-sm); }
.boot-sk-editor-canvas { display: grid; align-content: start; justify-items: center; padding: 80px 32px; }
.boot-sk-editor-canvas .skeleton.is-card { width: min(560px, 100%); min-height: 300px; }
@media (max-width: 860px) {
  html[data-boot-screen="editor"] .boot-sk-editor { grid-template-columns: minmax(0, 1fr); }
  .boot-sk-editor-side { display: none; }
  .boot-sk-editor-canvas { padding: 32px 16px; }
}
.boot-sk-bottom { display: none; }
@media (max-width: 860px) {
  html:is([data-boot="app"], [data-boot="leaving"]) .boot-skeleton { grid-template-columns: minmax(0, 1fr); }
  .boot-sk-sidebar { display: none; }
  .boot-sk-topbar { padding: 0 12px 0 16px; }
  .boot-sk-search { display: none; }
  .boot-sk-main { padding: 18px 16px 96px; }
  html[data-boot-screen="dashboard"] .boot-sk-grid { grid-template-columns: minmax(0, 1fr); }
  html:not([data-boot-screen="editor"]) .boot-sk-bottom { position: fixed; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; height: var(--bottom-nav-height); padding: 22px 24px calc(22px + env(safe-area-inset-bottom, 0px)); background: var(--canvas); border-top: 1px solid var(--line); }
  .boot-sk-bottom .skeleton { min-height: 0; border-radius: var(--radius-sm); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-boot="leaving"] .boot-skeleton { transition: none; }
}

/* -------------------------------------------------------------------------
   Créer mon site — vue « launch »
   ------------------------------------------------------------------------- */
.launch-view .heading-actions { flex-wrap: wrap; justify-content: flex-end; }
.launch-view .heading-actions .state[hidden] { display: none; }
.launch-view .launch-mode-switch { margin: 0 0 20px; }
.launch-view .launch-mode-switch button.active { color: var(--blue-strong); }
.launch-view .create-layout { max-width: 1280px; margin: 0; align-items: start; }
.launch-view .create-layout[hidden] { display: none; }

/* Étapes du parcours */
.launch-stepper { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.launch-stepper li { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.launch-stepper li > span { display: grid; grid-row: span 2; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--muted); background: var(--surface-2); font-weight: 800; }
.launch-stepper strong { font-size: 14px; }
.launch-stepper small { color: var(--muted); font-size: 12.5px; }
.launch-stepper li[aria-current="step"] { border-color: var(--blue); box-shadow: inset 0 -3px 0 var(--blue); }
.launch-stepper li[aria-current="step"] > span { color: #fff; background: var(--blue); }
.launch-stepper li.done > span { color: #fff; background: var(--green); font-size: 0; }
.launch-stepper li.done > span::before { content: "✓"; font-size: 15px; }

/* Brief */
.launch-view .create-brief .panel-heading, .launch-view .create-plan .panel-heading { min-height: 0; padding: 0 0 14px; }
.launch-view .create-brief h2, .launch-view .create-plan h2 { font-size: 19px; }
.brief-intro { max-width: 60ch; margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.launch-view .brief-input { color: var(--ink); font-size: 13.5px; }
.launch-view .brief-input textarea { min-height: 150px; color: var(--ink); background: var(--surface); border-color: var(--line-strong); }
.brief-examples { margin-top: 18px; }
.brief-examples-title { margin: 0 0 10px; color: var(--ink); font-size: 13.5px; font-weight: 700; }
.launch-view .brief-suggestions { margin: 0 0 20px; }
.launch-view .brief-suggestions button { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 650; }
.launch-view .brief-suggestions button svg { width: 16px; height: 16px; color: var(--blue); }

/* Colonne IA */
.launch-view .create-plan { position: sticky; top: 12px; }
.launch-view .create-plan .ai-tag { margin-bottom: 6px; }
.launch-view .generated-outline { margin: 4px 0 16px; padding: 0; list-style: none; }
.launch-view .generated-outline li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.launch-view .generated-outline li:last-child { border-bottom: 0; }
.launch-view .generated-outline li > svg { width: 34px; height: 34px; padding: 8px; border-radius: var(--radius-sm); color: var(--violet); background: var(--surface-violet); }
.launch-view .generated-outline strong, .launch-view .generated-outline small { display: block; grid-column: auto; margin: 0; }
.launch-view .generated-outline small { margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.launch-view .create-plan .generation-note { margin-bottom: 14px; }
.launch-view #generateSite { width: 100%; }
.create-layout:not([data-stage="brief"]) #generatedOutline,
.create-layout:not([data-stage="brief"]) .brief-safety { display: none; }

/* Plan proposé : pleine largeur, le brief passe dessous. */
.create-layout[data-stage="proposal"] { grid-template-columns: minmax(0, 1fr); }
.create-layout[data-stage="proposal"] .create-plan { position: static; order: 0; }
.create-layout[data-stage="proposal"] .create-brief { order: 1; }
.launch-view .ai-proposal-preview { margin: 0 0 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.launch-view .ai-proposal-preview #briefProposalSummary { display: grid; gap: 16px; margin: 16px 0; }
.plan-head h3 { margin: 8px 0 4px; font-size: 22px; letter-spacing: -.01em; }
.plan-head p { max-width: 75ch; margin: 0; color: var(--muted) !important; font-size: 14.5px; line-height: 1.55; }
.plan-count { margin: 0; font-weight: 700; }
.plan-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border-radius: var(--radius-sm); color: #fff; background: var(--navy); }
.plan-menu-label { color: #b9c7e2 !important; font-size: 12px; font-weight: 750; }
.plan-menu ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.plan-menu li { padding: 4px 11px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .14); font-size: 13px; font-weight: 700; }
.plan-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.plan-page { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.plan-page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 10px; }
.plan-page-head strong { font-size: 15px; }
.plan-path { color: var(--muted); font: 600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.plan-sections { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.plan-sections li { display: grid; gap: 1px; padding: 7px 9px; border-radius: var(--radius-xs); background: var(--surface); font-size: 13px; }
.plan-section-type { color: var(--violet) !important; font-size: 11.5px; font-weight: 800; }
.plan-section-title { color: var(--ink) !important; }
.plan-style { display: flex; align-items: center; gap: 12px; }
.plan-style strong, .plan-style small { display: block; }
.plan-swatch { width: 40px; height: 40px; flex: none; border: 1px solid var(--line); border-radius: var(--radius); }
.plan-features strong { display: block; margin-bottom: 4px; }
.plan-features ul { margin: 0; padding-left: 20px; color: var(--ink); }
.plan-limits { align-items: flex-start; }
.plan-limits > svg { flex: none; width: 20px; color: var(--amber); }
.plan-limits strong { display: block; color: var(--ink); }
.plan-limits ul { margin: 4px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; }
.plan-style strong { color: var(--ink) !important; }
.plan-style small { color: var(--muted) !important; }
.plan-data .proposal-data-summary { padding: 0 0 12px; overflow-wrap: anywhere; }
.launch-view .proposal-mode { margin: 0 0 14px; padding: 0; border: 0; }
.launch-view .proposal-mode legend { margin-bottom: 8px; padding: 0; font-weight: 750; }
.launch-view .proposal-mode .choice { flex-direction: row; align-items: flex-start; gap: 10px; }
.launch-view .proposal-mode .choice:has(input:checked) { border-color: var(--blue); background: var(--surface-blue); }
.launch-view .proposal-mode .choice:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.launch-view .proposal-mode .choice input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--blue); }
.launch-view .proposal-mode .choice strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.launch-view .proposal-mode .choice small { display: block; margin-top: 3px; line-height: 1.45; }
.launch-view .brief-proposal-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* Refaire un site existant */
.import-question { margin: 0 0 12px; font-size: 18px; }
.launch-view .source-picker { margin-bottom: 14px; }
.launch-view .source-option strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.launch-view .source-option small { font-size: 13px; }
.launch-view .source-address { display: grid; gap: 8px; margin: 14px 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.launch-view .source-address[hidden] { display: none; }
.launch-view .source-address > label { font-weight: 750; }
.launch-view .source-address > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.launch-view .source-address > div > svg { width: 18px; color: var(--muted); }
.launch-view .source-address input { flex: 1 1 220px; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.source-honesty { display: flex; gap: 8px; margin: 2px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); color: #6b4300; background: var(--surface-amber); font-size: 13px; line-height: 1.45; }
.source-honesty::before { content: "i"; display: grid; flex: none; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; background: var(--amber); font: 800 12px/1 Georgia, serif; }
.launch-view .upload-zone small { max-width: 52ch; }
.launch-view .detected-panel[hidden] { display: none; }
.project-preview-pending { display: flex; flex-direction: column; }
.project-preview-empty { display: grid; flex: 1; place-items: center; align-content: center; gap: 6px; min-height: 160px; padding: 18px; color: var(--muted); background: var(--surface-2); text-align: center; }
.project-preview-empty svg { width: 24px; color: var(--blue); }
.project-preview-empty strong { color: var(--ink); }
.project-preview-empty span { font-size: 13px; line-height: 1.45; }
.launch-view .diagnostic-title .ai-tag { margin-bottom: 4px; }

@media (max-width: 1100px) {
  .launch-view .create-layout { grid-template-columns: minmax(0, 1fr); }
  .launch-view .create-plan { position: static; }
}
@media (max-width: 720px) {
  .launch-stepper { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .launch-stepper li:not([aria-current="step"]) small { display: none; }
  .launch-view .launch-mode-switch { width: 100%; }
  .launch-view .launch-mode-switch button { flex: 1 1 0; justify-content: center; padding: 0 8px; white-space: normal; text-align: center; }
  .launch-view .heading-actions { justify-content: flex-start; }
  .launch-view .create-brief, .launch-view .create-plan { padding: 16px; }
  .launch-view .brief-file-row { flex-wrap: wrap; }
  .launch-view .brief-proposal-actions { flex-direction: column-reverse; }
  .launch-view .brief-proposal-actions .button { flex: none; width: 100%; justify-content: center; }
}
.launch-view .uploaded-file.empty-file { display: none; }
.launch-view .source-option { min-height: 92px; }

/* -------------------------------------------------------------------------
   Photos et fichiers — vue « media »
   ------------------------------------------------------------------------- */
.media-view .media-heading-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.media-heading-upload { display: inline-flex; }
.media-heading-upload[hidden], .media-view [data-media-choose][hidden], [data-media-upload-zone][hidden] { display: none !important; }
.media-view .page-heading p:not(.eyebrow) { max-width: 62ch; }
.media-next-step { max-width: 1180px; margin: 0 0 16px; }
.media-next-step[hidden], .media-readonly[hidden] { display: none; }
.media-next-step .ns-icon { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: var(--radius); color: var(--blue); background: var(--surface); }
.media-next-step .ns-icon svg { width: 20px; }
.media-next-step .ns-text span { display: block; margin-top: 2px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.media-readonly { max-width: 1180px; margin: 0 0 16px; align-items: flex-start; }
.media-readonly > svg { flex: none; width: 20px; color: var(--blue); }
.media-readonly strong, .media-readonly small { display: block; }
.media-view .media-library-shell { max-width: 1180px; margin: 0; }
.media-view .media-upload-card { min-height: 0; padding: 22px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface-2); transition: border-color var(--dur-2) var(--ease-soft), background-color var(--dur-2) var(--ease-soft); }
.media-view .media-upload-card:hover, .media-view .media-upload-card.dragging, .media-view .media-upload-card.is-dragover { border-color: var(--blue); background: var(--surface-blue); }
.media-view .media-upload-card > span { max-width: 56ch; color: var(--muted); font-size: 13px; line-height: 1.45; }
.media-view .media-upload-card strong { font-size: 15px; }
.media-view .media-upload-card small { font-size: 12.5px; }
.media-view .media-library-toolbar { margin-top: 24px; }
.media-view .media-library-toolbar h2 { margin: 0; font-size: 17px; }
.media-view .media-library-toolbar > span { font-size: 13px; }
.media-view .media-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.media-view .media-card { border-radius: var(--radius); }
.media-view .media-select { cursor: default; }
.media-view .media-card-overlay { display: none; }
.media-card-info > small { font-size: 12px !important; }
.media-card-info > strong { font-size: 13.5px !important; }
.media-card-info label { color: var(--ink) !important; font-size: 12.5px !important; }
.media-card-info input { min-height: 36px !important; font-size: 13.5px; }
@media (max-width: 860px), (pointer: coarse) { .media-card-info input { min-height: 44px !important; } }
.media-card-info input:disabled { color: var(--muted); background: var(--surface-2); }
.media-card-actions .icon-button { width: 34px !important; height: 34px !important; }
.media-card-actions .badge { white-space: normal; }
.media-empty { padding: 28px 16px; }
.media-empty svg { width: 32px !important; height: 32px; color: var(--blue) !important; }
.media-empty strong { font-size: 15px !important; }
.media-empty span { max-width: 46ch; color: var(--muted); font-size: 13.5px !important; line-height: 1.45; }
.media-empty .button { margin-top: 6px; }

@media (max-width: 720px) {
  .media-view .media-heading-actions { justify-content: flex-start; }
  .media-view .media-library-shell { padding: 14px; }
  .media-view .media-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .media-next-step .button { width: 100%; justify-content: center; }
}

/* Refonte : prochaine étape sans dégradé, cartes à filet sans ombre, état vide composé. */
.media-view .next-step { border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line)); background: var(--surface-blue); box-shadow: none; }
.media-view .next-step .ns-icon { border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line)); box-shadow: none; }
.media-view .media-library-shell { border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: none; }
.media-view .media-library-toolbar h2 { font-weight: 600; letter-spacing: -.01em; }
.media-view .media-library-toolbar > span { font-variant-numeric: tabular-nums; }
.media-view .media-upload-card strong, .media-empty strong { font-weight: 600 !important; }
.media-empty svg { color: var(--muted) !important; }
.media-view .media-card { border: 1px solid var(--line); box-shadow: none; }

/* Reprendre un site existant : icônes neutres, pas de couleur décorative. */
.launch-view .source-option :is(.icon-tile, .source-icon) { color: var(--ink-2) !important; background: var(--surface-3) !important; }
.launch-view .source-option.active :is(.icon-tile, .source-icon), .launch-view .source-option[aria-checked="true"] :is(.icon-tile, .source-icon) { color: var(--blue-strong) !important; background: var(--surface-blue) !important; }
.source-honesty { color: var(--ink-2); }
/* Bibliothèque vide et zone d’envoi visible : la zone suffit, pas de second état vide en dessous. */
.media-view .media-library-shell:has([data-media-upload-zone]:not([hidden])):has(.media-empty svg.lucide-image) :is(.media-library-toolbar, .media-empty) { display: none; }
.media-view .media-skel { aspect-ratio: 4 / 3; border-radius: var(--radius); }
/* La zone d’envoi et la grille se posent sur le fond : pas de carte autour (pas de carte dans une carte). */
.media-view .media-library-shell { padding: 0; border: 0; border-radius: 0; background: transparent; }

/* =========================================================================
   « Atelier calme » : « J’ai déjà un site » (import) et connexion.
   Limité à .launch-view et #authGate : ni l’éditeur ni l’écran des médias.
   ========================================================================= */
/* Origine du site : une liste de lignes à choisir, pas trois cartes. */
.launch-view .import-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-9); align-items: start; }
.launch-view .import-main { gap: var(--space-6); }
.launch-view .import-question { margin: 0 0 var(--space-3); color: var(--ink); font-size: var(--text-lg); font-weight: 600; letter-spacing: var(--tracking-snug); }
.launch-view .source-picker { grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; border-top: 1px solid var(--line); }
.launch-view .source-option { grid-template-columns: 16px minmax(0, 1fr) 18px; gap: var(--space-3); min-height: 56px; padding: 10px 8px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; text-align: left; transition: background-color var(--dur-2) var(--ease-soft); }
.launch-view .source-option:hover { background: var(--row-hover); }
.launch-view .source-option:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.launch-view .source-option.active { padding: 10px 8px; border: 0; border-bottom: 1px solid var(--line); background: var(--surface-2); box-shadow: inset var(--accent-bar) 0 0 var(--blue); }
.launch-view .source-option :is(.icon-tile, .source-icon),
.launch-view .source-option.active :is(.icon-tile, .source-icon) { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 0; color: var(--muted) !important; background: none !important; }
.launch-view .source-option .source-icon svg { width: 16px; height: 16px; }
.launch-view .source-option > span:nth-child(2) { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.launch-view .source-option strong { font-size: var(--text-md); font-weight: 500; }
.launch-view .source-option.active strong { font-weight: 600; }
.launch-view .source-option strong .badge { color: var(--muted); font-size: var(--text-xs); font-weight: 500; }
.launch-view .source-option strong .badge::before { content: none; }
.launch-view .source-option small { color: var(--muted); font-size: var(--text-sm); }
.launch-view .source-option > svg { width: 18px; height: 18px; color: var(--line-hover); }
.launch-view .source-option.active > svg { color: var(--ink); fill: none; }

/* Zone de dépôt : un cadre pointillé neutre, sans pastille ni fond bleu. */
.launch-view .upload-zone { grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); min-height: 0; padding: var(--space-5); border: 1px dashed var(--line-hover); border-radius: var(--radius); background: transparent; }
.launch-view .upload-zone.drag-active, .launch-view .upload-zone:focus-visible { border-color: var(--blue); background: var(--surface-2); outline: 0; }
.launch-view .upload-icon { width: 20px; height: 20px; border-radius: 0; color: var(--muted); background: none; }
.launch-view .upload-icon svg { width: 18px; height: 18px; }
.launch-view .upload-zone > div:nth-of-type(1) { align-items: flex-start; }
.launch-view .upload-zone > div:nth-of-type(1) strong { font-weight: 600; }
.launch-view .upload-zone > div:nth-of-type(1) > span { color: var(--muted); }
.launch-view .upload-zone .upload-select { width: auto; margin-top: var(--space-2); }
.launch-view .upload-zone :is(.uploaded-file, .archive-inspection) { grid-column: 1 / -1; }
.launch-view .source-address { padding: 0; border: 0; border-radius: 0; background: transparent; }
.launch-view .source-address > label { color: var(--ink); font-size: var(--text-sm); font-weight: 500; }
.launch-view .source-address input { border-radius: var(--field-radius); }
.launch-view .source-honesty { padding: 0; color: var(--muted); background: transparent; }
.launch-view .source-honesty::before { content: none; }

/* Colonne « Ce que nous vérifions » : posée sur le fond, filet à gauche. */
.launch-view .diagnostic-panel { min-height: 0; padding: 0 0 0 var(--space-6); border: 0; border-left: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.launch-view .diagnostic-panel.ai-mark { border-left: 1px solid var(--line) !important; }
.launch-view .diagnostic-title { gap: 0; padding-bottom: var(--space-3); }
.launch-view .diagnostic-pulse { display: none; }
.launch-view .diagnostic-title h2 { margin: 0; font-size: var(--text-lg); font-weight: 600; letter-spacing: var(--tracking-snug); }
.launch-view .diagnostic-title p { font-size: var(--text-sm); }
.launch-view .diagnostic-step { grid-template-columns: 16px minmax(0, 1fr) auto; gap: var(--space-3); min-height: 52px; }
.launch-view .diagnostic-step > span { width: 16px; height: 16px; border-radius: 0; color: var(--muted); background: none; }
.launch-view .diagnostic-step > span svg { width: 16px; height: 16px; }
.launch-view .diagnostic-step strong { font-size: var(--text-md); font-weight: 500; }
.launch-view .diagnostic-step small { font-size: var(--text-xs); }
.launch-view .diagnostic-step b { font-size: var(--text-xs); font-weight: 500; }
.launch-view .diagnostic-step.running > span { color: var(--blue); background: none; }
.launch-view .diagnostic-step.complete > span { color: var(--green); background: none; }
.launch-view .diagnostic-step.warning > span { color: var(--amber); background: none; }
.launch-view .diagnostic-progress > span { height: 2px; border-radius: 0; background: var(--line); }
.launch-view .diagnostic-result { padding: var(--space-4) 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.launch-view .diagnostic-facts > div { padding: 0; background: transparent; }
.launch-view .diagnostic-facts dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.launch-view .sovereign-note { grid-template-columns: 16px 1fr; align-items: start; padding: var(--space-3) 0 0; border-top: 1px solid var(--line); border-radius: 0; color: var(--ink-2); background: transparent; }
.launch-view .sovereign-note > svg { width: 16px; height: 16px; margin-top: 2px; color: var(--muted); }
.launch-view .sovereign-note strong { font-size: var(--text-sm); font-weight: 500; }
.launch-view :is(.detected-panel, .runtime-plan) { padding: var(--space-5) 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.launch-view :is(.detected-panel, .runtime-plan) .panel-heading { padding: 0 0 var(--space-3); border: 0; }
.launch-view :is(.detected-panel, .runtime-plan) .kicker { display: none; }
@media (max-width: 1100px) {
  .launch-view .import-layout { grid-template-columns: minmax(0, 1fr); }
  .launch-view .diagnostic-panel, .launch-view .diagnostic-panel.ai-mark { padding: var(--space-6) 0 0; border-left: 0 !important; border-top: 1px solid var(--line); }
}
@media (max-width: 720px) {
  .launch-view .source-option { min-height: var(--touch-min); }
  .launch-view .upload-zone { padding: var(--space-4); }
  .launch-view .upload-zone .upload-select { width: 100%; justify-content: center; min-height: var(--touch-min); }
}

/* Connexion : marque en encre, esquisse neutre, liens calmes. */
.auth-gate .auth-brand { background: var(--canvas); }
.auth-gate .auth-brand .brand-mark { width: 28px; height: 28px; border-radius: var(--radius-sm); color: #fff; background: var(--ink); font-size: 14px; }
.auth-gate .auth-sketch { border-radius: var(--radius); box-shadow: var(--shadow-preview); }
.auth-gate .auth-sketch-menu span, .auth-gate .auth-sketch-bar span, .auth-gate .auth-sketch-hero span, .auth-gate .auth-sketch-hero em { border-radius: 3px; }
.auth-gate .auth-sketch-menu span:first-child { background: var(--line-strong); }
.auth-gate .auth-sketch-hero { background: var(--surface-3); }
.auth-gate .auth-sketch-hero span { background: var(--line-hover); }
.auth-gate .auth-sketch-hero span:nth-child(2) { background: var(--line-strong); }
.auth-gate .auth-sketch-hero em { background: var(--ink); }
.auth-gate .auth-sketch-tag { right: 16px; top: 12px; padding: 0; border: 0; border-radius: 0; color: var(--muted); background: none; box-shadow: none; font-size: var(--text-xs); font-weight: 500; }
.auth-gate .auth-promises li { font-size: var(--text-sm); }
.auth-gate .auth-promises svg { width: 16px; height: 16px; margin-top: 2px; stroke: var(--muted); }
.auth-gate .auth-promises li { grid-template-columns: 16px minmax(0, 1fr); }
.auth-gate .auth-card h1 { font-size: var(--text-3xl); font-weight: 600; letter-spacing: -.02em; }
.auth-gate .auth-card .auth-field label, .auth-gate .auth-field-row label { font-size: var(--text-sm); font-weight: 500; }
.auth-gate .auth-card input { height: 44px; border-radius: var(--field-radius); }
.auth-gate .auth-card .button.primary { height: 44px; font-size: var(--text-md); }
.auth-gate :is(.auth-inline-link, .auth-links button) { font-size: var(--text-sm); font-weight: 500; text-decoration: none; }
.auth-gate :is(.auth-inline-link, .auth-links button):hover { color: var(--ink); text-decoration: underline; text-decoration-color: currentColor; }
.auth-gate .auth-footnote a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-hover); }
.auth-gate .auth-footnote a:hover { color: var(--ink); }
.auth-gate .auth-card .auth-message { border-radius: var(--radius-sm); }
@media (max-width: 760px) {
  .auth-gate :is(.auth-inline-link, .auth-links button) { min-height: var(--touch-min); }
}

/* =========================================================================
   « Atelier calme » : Photos et fichiers (vue « media »).
   Grille de vignettes sans cadre, zone d’envoi discrète, détail à droite.
   Limité à .media-view : la photothèque de l’éditeur (#mediaModal) ne change pas.
   ========================================================================= */
.media-view > .media-page { max-width: var(--content-max); margin-inline: 0; }
.media-view .media-heading { margin: 0; }
.media-view .media-heading-actions { justify-content: flex-end; gap: var(--space-3); }
.media-view .media-next-line, .media-view .media-readonly-line { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
.media-view .media-next-line strong { color: var(--ink); font-weight: 600; }
.media-view .media-next-line .at-link { margin-left: 4px; }
.media-view :is(.media-next-line, .media-readonly-line)[hidden] { display: none; }
.media-view .media-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: var(--space-9); max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.media-view .media-layout:not(:has(.media-detail:not([hidden]))) { grid-template-columns: minmax(0, 1fr); }
.media-view .media-main { display: grid; align-content: start; gap: var(--space-4); min-width: 0; }
/* Zone d’envoi : une bande en pointillés, sans icône ni fond bleu. */
.media-view .media-upload-card { display: grid; justify-items: start; gap: 6px; min-height: 0; padding: var(--space-4) var(--space-5); border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--muted); background: transparent; text-align: left; box-shadow: none; }
.media-view .media-upload-card:hover { border-color: var(--line-hover); background: transparent; }
.media-view .media-upload-card.drag-over { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 4%, transparent); box-shadow: none; }
.media-view .media-drop-text { margin: 0; color: var(--ink-2); font-size: var(--text-md); line-height: 1.5; }
.media-view .media-drop-text .media-heading-upload { display: inline; }
.media-view .media-drop-text .at-link { min-height: 0; font-size: inherit; vertical-align: baseline; }
.media-view .media-drop-hint { color: var(--muted); font-size: var(--text-sm); }
.media-view .media-upload-card small { min-height: 0; font-size: var(--text-xs); }
.media-view .media-upload-card small:empty { display: none; }
.media-view .media-upload-progress { width: min(420px, 100%); height: 4px; background: var(--surface-3); }
.media-view .media-upload-progress span { background: var(--ink); }
.media-view .media-library-toolbar { display: flex; align-items: baseline; gap: var(--space-3); margin: var(--space-2) 0 0; padding: 0; border: 0; }
.media-view .media-library-toolbar h2 { margin: 0; color: var(--ink); font-size: var(--text-lg); font-weight: 600; letter-spacing: var(--tracking-snug); }
.media-view .media-library-toolbar > span { color: var(--muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.media-view .media-library-toolbar .at-link { margin-left: auto; }
.media-view .media-error { margin: 0; color: var(--red); font-size: var(--text-sm); }
/* Vignettes : l’image, le nom, un état en texte. */
.media-view .media-grid.media-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: var(--space-5) var(--space-4); }
.media-view .media-thumb { display: grid; gap: 4px; min-width: 0; padding: 0; border: 0; color: inherit; background: none; font: inherit; text-align: left; cursor: pointer; }
.media-view .media-thumb-image { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow var(--dur-2) var(--ease-soft); }
.media-view .media-thumb-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-view .media-thumb:hover .media-thumb-image { box-shadow: inset 0 0 0 1px var(--line-hover); }
.media-view .media-thumb.is-selected .media-thumb-image { box-shadow: 0 0 0 2px var(--blue); }
.media-view .media-thumb:focus-visible { outline: none; }
.media-view .media-thumb:focus-visible .media-thumb-image { box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--blue); }
.media-view .media-thumb-name { overflow: hidden; color: var(--ink); font-size: var(--text-sm); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.media-view .media-thumb-meta { color: var(--muted); font-size: var(--text-xs); }
.media-view .media-thumb.is-selected .media-thumb-name { font-weight: 600; }
.media-view .media-grid .media-skel { display: block; aspect-ratio: 4 / 3; min-height: 0; border-radius: var(--radius-sm); }
.media-view .media-grid:not(.media-thumbs) { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: var(--space-4); }
.media-view .media-empty-line { grid-column: 1 / -1; padding: 0; }
/* Bibliothèque vide : la zone d’envoi et la phrase suffisent, pas de titre « Vos photos » au-dessus du vide. */
.media-view .media-main:has(.media-empty-line) .media-library-toolbar { display: none; }
/* Détail de la photo choisie : posé sur le fond, collant en haut. */
.media-view .media-detail { position: sticky; top: var(--space-6); display: grid; gap: var(--space-3); min-width: 0; }
.media-view .media-detail[hidden] { display: none; }
.media-view .media-detail-image { overflow: hidden; border-radius: var(--radius); background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); }
.media-view .media-detail-image img { display: block; width: 100%; max-height: 260px; object-fit: contain; }
.media-view .media-detail-head { display: grid; gap: 2px; }
.media-view .media-detail-head h2 { margin: 0; overflow: hidden; color: var(--ink); font-size: var(--text-md); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.media-view .media-detail-head p { margin: 0 0 4px; color: var(--muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.media-view .media-detail-field { display: grid; gap: 6px; color: var(--ink); font-size: var(--text-sm); font-weight: 500; }
.media-view .media-detail-field input { width: 100%; min-height: var(--control-md); padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--field-radius); color: var(--ink); background: var(--surface); font: inherit; font-weight: 400; }
.media-view .media-detail-field input:hover:not(:disabled, :focus) { border-color: var(--line-hover); }
.media-view .media-detail-field input:focus-visible { border-color: var(--blue); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 20%, transparent); }
.media-view .media-detail-field input:disabled { background: transparent; }
.media-view .media-detail-help { margin: -4px 0 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.45; }
.media-view .media-detail-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.media-view .media-detail-delete { color: var(--red); }
@media (max-width: 860px) {
  .media-view .media-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .media-view .media-detail { position: static; padding-top: var(--space-5); border-top: 1px solid var(--line); }
  .media-view .media-grid.media-thumbs { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--space-4) var(--space-3); }
}
@media (max-width: 720px) {
  .media-view .media-heading-actions { justify-content: flex-start; }
  .media-view .media-library-shell { padding: 0; }
}
@media (prefers-reduced-motion: reduce) { .media-view .media-thumb-image { transition: none; } }

/* =========================================================================
   « Nouveau site » : densité et réactivité (passe 3).
   Préfixe #view-launch : passe devant parcours.css et components.css, chargés
   après ce fichier, sans toucher au tableau de bord ni aux autres écrans.
   ========================================================================= */
/* Une seule colonne, alignée à gauche : retour, titre, onglets et parcours
   commencent au même bord, quelle que soit l’étape. */
#view-launch { --launch-col-start: 0px; }
#view-launch > * { max-width: var(--content-max); margin-inline: 0; }
#view-launch > .launch-cancel { margin: 0 0 4px -6px; }
#view-launch > .launch-mode-switch { margin: 0 0 var(--space-6); }
#view-launch.pc-from-quick > .launch-mode-switch { display: none; }
#view-launch > .page-heading { margin-bottom: var(--space-5); }
#view-launch .heading-actions .button { flex: 0 0 auto; width: auto; }

/* Quatre questions : le choix du type occupe la largeur, les champs restent courts. */
#view-launch:not(.pc-detailed) > .pc-quick { max-width: var(--content-max); }
/* Neuf types : une, deux puis trois colonnes (3 × 3, sans ligne orpheline). */
#view-launch .pc-quick-step .pc-type-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { #view-launch .pc-quick-step .pc-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1240px) { #view-launch .pc-quick-step .pc-type-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#view-launch .pc-quick-step :is(.pc-quick-input, .pc-quick-hint, .pc-quick-chips, .pc-quick-field-error) { max-width: 680px; }
#view-launch .pc-style-grid { max-width: 960px; }
#view-launch .pc-quick-actions { margin-top: var(--space-6); padding-top: var(--space-4); }
/* Pas de filet ni de vide quand la question n’a aucun bouton (le choix avance d’un clic). */
#view-launch .pc-quick-actions:not(:has(> .button:not([hidden]))) { display: none; }
#view-launch .pc-quick-alt { margin-top: var(--space-4); }

/* Étapes « Votre activité / Le plan / Votre site » : une ligne de texte, sans pastille. */
#view-launch .launch-stepper { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); padding-bottom: var(--space-3); }
#view-launch .launch-stepper li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; row-gap: 0; align-items: baseline; padding: 0; border: 0; background: transparent; box-shadow: none; }
#view-launch .launch-stepper li > span { display: block; grid-row: auto; width: auto; height: auto; }
#view-launch .launch-stepper li > small { grid-column: 2; }
#view-launch .launch-stepper li.done > span::before { content: "✓"; }

/* Description libre : texte saisi en graisse normale, exemples en boutons à angle doux. */
#view-launch .brief-input textarea { font-weight: 400; }
#view-launch .brief-input textarea::placeholder { font-weight: 400; }
#view-launch .brief-suggestions button { border-radius: var(--radius-sm); }
#view-launch .create-plan .ai-tag { display: none; }
#view-launch .create-plan .panel-heading { padding-bottom: var(--space-2); }

/* Préparation du plan : pas de pastille animée, un texte et une barre fine. */
#view-launch .brief-generation-wait { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4) 0; }
#view-launch .generation-orbit { display: none; }
#view-launch .brief-generation-meter { grid-column: 1 / -1; }

/* « Créer un site » (site vide) : libellés et aides au poids normal. */
#siteModal .site-modal-body label { color: var(--ink); font-size: 13px; font-weight: 500; }
#siteModal .site-modal-body .field-help { color: var(--muted); font-size: 12.5px; font-weight: 400; line-height: 1.45; }
#siteModal .site-quota-callout { padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 13px; }
#siteModal .site-quota-callout svg { display: none; }

/* « J’ai déjà un site » : la question touche la liste, les icônes suivent la première ligne. */
#view-launch .import-main { gap: var(--space-5); }
#view-launch .import-question { margin: 0 0 var(--space-2); }
#view-launch .source-option { align-items: start; min-height: 0; }
#view-launch .source-option :is(.source-icon, > svg) { margin-top: 2px; }
#view-launch .source-option strong .badge { padding: 0; border: 0; background: none; }
/* Dépôt Git ou adresse : pas de zone de dépôt, le champ d’adresse suffit. */
#view-launch .import-main:has([data-import-source="git"].active, [data-import-source="url"].active) .upload-zone { padding: 0; border: 0; }
#view-launch .import-main:has([data-import-source="git"].active, [data-import-source="url"].active) .upload-zone > :is(.upload-icon, div:nth-of-type(1)) { display: none; }
#view-launch .import-main:has([data-import-source="git"].active, [data-import-source="url"].active) .upload-zone:has(.uploaded-file.empty-file):not(:has(.archive-inspection:not([hidden]))) { display: none; }
#view-launch .source-address { gap: var(--space-2); margin: 0; }
#view-launch .source-honesty { font-weight: 400; line-height: 1.5; }
/* Liste « Ce que nous vérifions » : une ligne courte par contrôle. */
#view-launch .diagnostic-steps { gap: 0; }
#view-launch .diagnostic-step { min-height: 40px; padding-block: 6px; }
#view-launch .diagnostic-step:not(.running, .complete, .warning) small { display: none; }
#view-launch .diagnostic-step b { color: var(--muted); }

@media (max-width: 1100px) {
  #view-launch .create-plan { position: static; }
}
@media (max-width: 720px) {
  #view-launch > .page-heading { gap: var(--space-3); margin-bottom: var(--space-4); }
  #view-launch .heading-actions .button { min-height: var(--touch-min); padding-inline: 12px; }
  #view-launch .launch-stepper { gap: var(--space-2); }
  #view-launch .launch-stepper li > small { display: none; }
  #view-launch .launch-stepper strong { font-size: 13px; line-height: 1.3; }
  /* Sur téléphone, le bouton « Proposer mon plan » suit directement la description. */
  #view-launch .create-layout[data-stage="brief"] #generatedOutline { display: none; }
  /* Pas de glisser-déposer au doigt : le bouton suffit, sans cadre pointillé. */
  #view-launch .upload-zone { grid-template-columns: minmax(0, 1fr); padding: 0; border: 0; }
  #view-launch .upload-zone .upload-icon { display: none; }
  #view-launch .import-main { gap: var(--space-4); }
  #view-launch .sovereign-note { display: none; }
}

/* Plan proposé (étape de confirmation) : une page de relecture posée sur le fond,
   sans bandeau sombre, sans cartes teintées ni étiquettes colorées. */
#view-launch .create-layout[data-stage="proposal"] .create-plan { padding: 0; border: 0 !important; }
#view-launch .create-layout[data-stage="proposal"] .create-plan > .panel-heading { display: none; }
#view-launch #briefProposalResult > .generation-note { padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
#view-launch .ai-proposal-preview #briefProposalSummary { gap: var(--space-5); margin: var(--space-5) 0; }
#view-launch .plan-head p { max-width: 70ch; }
#view-launch .plan-name-field { max-width: 560px; margin: 0 0 var(--space-3); }
#view-launch .plan-name-field > span { font-size: 13px; font-weight: 500; }
#view-launch .plan-name-field input { width: 100%; min-width: 0; font-size: 17px; font-weight: 600; }
#view-launch .plan-count { color: var(--muted); font-size: 13px; font-weight: 500; }
#view-launch .plan-menu { gap: 4px 12px; padding: 0; border: 0; border-radius: 0; color: var(--ink); background: transparent; }
#view-launch .plan-menu-label { color: var(--muted) !important; font-size: 13px; font-weight: 500; }
#view-launch .plan-menu ul { gap: 4px 0; }
#view-launch .plan-menu li { padding: 0; border-radius: 0; background: none; font-size: 14px; font-weight: 500; }
#view-launch .plan-menu li + li::before { content: "·"; margin: 0 8px; color: var(--muted); }
#view-launch .plan-pages { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--space-4) var(--space-6); }
#view-launch .plan-page { padding: var(--space-3) 0 0; border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; background: transparent; }
#view-launch .plan-page-head .badge { padding: 0; border: 0; color: var(--muted); background: none; font-size: 12.5px; font-weight: 500; }
#view-launch .plan-page-head .badge::before { content: none; }
#view-launch .plan-sections { gap: 0; }
#view-launch .plan-sections li { padding: 6px 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
#view-launch .plan-sections li:last-child { border-bottom: 0; }
#view-launch .plan-section-type { color: var(--muted) !important; font-size: 12px; font-weight: 500; }
#view-launch .plan-swatch { width: 28px; height: 28px; border-radius: var(--radius-sm); }
#view-launch .plan-features strong { font-size: 14px; font-weight: 600; }
#view-launch .plan-limits { padding: 0; border: 0; border-radius: 0; background: transparent; }
#view-launch .plan-limits > svg { width: 16px; height: 16px; margin-top: 2px; }
#view-launch .plan-limits strong { font-weight: 600; }
#view-launch .proposal-mode-simple { margin: var(--space-3) 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink-2); font-size: 13.5px; }
#view-launch .proposal-mode-simple svg { width: 16px; height: 16px; color: var(--muted); }
#view-launch.pc-from-quick .create-layout[data-stage="proposal"] .brief-proposal-actions { margin: var(--space-4) 0 0; padding: 12px 0; background: var(--canvas); }
#view-launch .source-address > div { padding: 0; border: 0; background: transparent; box-shadow: none; }
#view-launch .source-address input, #view-launch .source-address input::placeholder { font-weight: 400; }
#view-launch .pc-style-sample { height: 150px; min-height: 0; aspect-ratio: auto; }
@media (max-width: 1100px) {
  #view-launch .import-layout { gap: var(--space-6); }
}
@media (max-width: 720px) {
  #view-launch .pc-style-sample { height: auto; }
  #view-launch .source-address > div > .button { flex: 1 1 100%; justify-content: center; }
}