/* chassis.css — le chassis de l application.
   Extrait du <style> inline de public/index.html au lot 0 de la phase 4 :
   la SPA (/app) et la page historique (/) partagent la MEME feuille, sinon
   les deux divergent silencieusement pendant toute la duree du portage.
   Ne pas dupliquer : toute regle nouvelle vient ici. */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    /* ── LA PALETTE — point 3 des cinq points de maquillage ────────────
       « Le sombre signale un outil de développeur. » L'écran appartient au
       site du client, pas à l'outil : le châssis s'efface en clair, et les
       couleurs vives ne servent plus qu'aux actions.
       La barre d'action et le tiroir des sections étaient déjà en clair —
       c'est le reste du châssis qui suit. */
    :root {
      --bg: #f6f8fb;
      --surface: #ffffff;
      --surface2: #eef2f7;
      --border: #d8e0ea;
      --accent: #2563eb;
      --accent2: #1d4ed8;
      --text: #0f172a;
      --text-muted: #5a6784;
      --green: #16a34a;
      --red: #dc2626;
      --yellow: #ca8a04;
      --orange: #ea580c;
      --radius: 0.5rem;
      --radius-sm: 0.375rem;
      --radius-lg: 0.75rem;
    }
    html, body { height: 100%; font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); overflow: hidden; }

    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: var(--surface); }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--accent); }

    /* ── LOGIN OVERLAY ── */
    #login-overlay {
      display: flex; position: fixed; inset: 0;
      background: var(--bg); z-index: 9999;
      align-items: center; justify-content: center;
    }
    #login-overlay.hidden { display: none; }
    .login-box {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius-lg); padding: 2.5rem;
      width: 100%; max-width: 400px;
    }
    .login-logo { text-align: center; margin-bottom: 2rem; }
    .login-logo .logo-main { font-size: 1.6rem; font-weight: 700; color: var(--accent); }
    .login-logo .logo-sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.3rem; }
    .login-error {
      background: #FEF2F2; border: 1px solid #FCA5A5; color: #991B1B;
      padding: 0.75rem 1rem; border-radius: var(--radius); font-size: 0.85rem;
      margin-bottom: 1rem; display: none;
    }

    /* ── FORMS ── */
    .form-group { margin-bottom: 1.25rem; }
    .form-group label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.05em; }
    /* Les champs des panneaux de droite vivent dans .field-group, pas dans
       .form-group : sans cette seconde famille de selecteurs ils tombaient sur
       le rendu par defaut du navigateur — police a chasse fixe, sans bordure ni
       fond du theme. Cela touchait « Le texte affiche », le champ le plus
       utilise de tout l'editeur, et la zone de saisie du panneau IA.
       Volontairement `input[type=text]` et non `input` : un color-picker, un
       curseur ou une case a cocher vivent aussi dans un .field-group, et leur
       imposer width:100% + padding les casserait. */
    .form-group input, .form-group select, .form-group textarea,
    .field-group textarea, .field-group input[type=text] {
      width: 100%; background: var(--bg); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 0.65rem 0.9rem;
      color: var(--text); font-family: inherit; font-size: 0.9rem;
      transition: border-color 0.2s; outline: none;
    }
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus,
    .field-group textarea:focus, .field-group input[type=text]:focus { border-color: var(--accent); }
    .form-group select { cursor: pointer; }
    .form-group select option { background: var(--surface); }
    textarea { resize: vertical; min-height: 80px; }

    /* ── BOUTONS ── */
    .btn {
      display: inline-flex; align-items: center; gap: 0.4rem;
      padding: 0.6rem 1.1rem; border-radius: var(--radius-sm);
      font-size: 0.82rem; font-weight: 600; cursor: pointer; border: none;
      transition: all 0.2s; font-family: inherit; white-space: nowrap;
    }
    .btn:disabled { opacity: 0.5; pointer-events: none; }
    .btn-primary { background: var(--accent); color: #fff; }
    .btn-primary:hover { background: var(--accent2); }
    .btn-secondary { background: var(--surface2); color: var(--text); }
    .btn-secondary:hover { background: var(--border); }
    .btn-danger { background: var(--red); color: #fff; }
    .btn-danger:hover { background: #dc2626; }
    .btn-success { background: var(--green); color: #fff; }
    .btn-success:hover { background: #16a34a; }
    .btn-full { width: 100%; justify-content: center; }
    .btn-sm { padding: 0.35rem 0.7rem; font-size: 0.75rem; }
    .btn-icon { padding: 0.5rem; }

    /* ── NAVBAR ── */
    #navbar {
      position: fixed; top: 0; left: 0; right: 0; height: 50px;
      background: var(--surface); border-bottom: 1px solid var(--border);
      display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem;
      z-index: 100; flex-shrink: 0;
    }
    .nav-logo { font-size: 0.85rem; font-weight: 700; color: var(--accent); white-space: nowrap; margin-right: 0.25rem; }
    .nav-divider { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; }
    .nav-site-name { font-size: 0.82rem; color: var(--text); font-weight: 500; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* ── PASTILLE DE SOLDE ── le compteur ne quitte jamais l'écran ── */
    /* La classe sert aux barres qui ne sont pas la navbar — Mon espace passe
       par-dessus elle, et le compteur ne doit jamais quitter l'écran. */
    #pastille-solde, .pastille-solde {
      display: none; align-items: center; gap: 6px;
      background: var(--surface2); border: 1px solid var(--border); color: var(--text);
      font-family: inherit; font-size: 0.75rem; font-weight: 600;
      padding: 0.3rem 0.6rem; border-radius: 999px; cursor: pointer; white-space: nowrap;
    }
    #pastille-solde.visible, .pastille-solde.visible { display: flex; }
    #pastille-solde:hover { border-color: var(--accent); }
    .pastille-solde { cursor: default; }
    #pastille-solde .jeton, .pastille-solde .jeton {
      width: 15px; height: 15px; border-radius: 50%;
      background: var(--accent); color: #fff;
      font-size: 0.6rem; font-weight: 700; line-height: 15px; text-align: center;
    }
    .nav-spacer { flex: 1; }
    .ver-item {
      display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem;
      cursor: pointer; border-radius: var(--radius-sm); transition: background 0.15s;
      border-bottom: 1px solid var(--border);
    }
    .ver-item:last-child { border-bottom: none; }
    .ver-item:hover { background: var(--surface2); }
    .ver-num { font-size: 0.75rem; font-weight: 700; color: var(--accent); min-width: 28px; }
    .ver-info { flex: 1; }
    .ver-date { font-size: 0.72rem; color: var(--text); font-weight: 500; }
    .ver-note { font-size: 0.65rem; color: var(--text-muted); margin-top: 1px; }
    .ver-active { background: rgba(59,130,246,0.1); }
    .ver-empty { padding: 1rem; text-align: center; color: var(--text-muted); font-size: 0.8rem; }
    /* ── LE PANNEAU « CHOISIR UNE VERSION » — deux etages ──
       En haut on DEFAIT (une erreur), en dessous on REJOUE (une periode).
       Deux gestes voisins mais differents : les melanger, c'est le « Annuler »
       aveugle que le client ne comprenait pas. */
    .ver-gros {
      display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
      background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm);
      padding: 0.5rem; font-size: 0.74rem; font-weight: 600; font-family: inherit;
      color: var(--text); cursor: pointer;
    }
    .ver-gros:hover { border-color: var(--accent); color: var(--accent); }
    .ver-titre {
      font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
      color: var(--text-muted); padding: 0.5rem 0.6rem 0.3rem;
    }
    /* Le nom est saisi SUR PLACE : un champ deja la, pas une modale de plus. */
    .ver-nom {
      font-size: 0.66rem; color: var(--text); background: transparent; border: 1px solid transparent;
      border-radius: 4px; padding: 1px 3px; font-family: inherit; width: 100%; margin-top: 1px;
    }
    .ver-nom::placeholder { color: var(--text-muted); font-style: italic; }
    .ver-nom:hover { border-color: var(--border); }
    .ver-nom:focus { outline: none; border-color: var(--accent); background: var(--surface); }
    .ver-pastille {
      font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
      padding: 1px 5px; border-radius: 999px; background: rgba(22,163,74,0.12);
      color: var(--green); flex-shrink: 0; white-space: nowrap;
    }
    .ver-corbeille {
      background: none; border: none; color: var(--text-muted); cursor: pointer;
      padding: 3px; font-size: 13px; flex-shrink: 0; border-radius: 4px; line-height: 1;
    }
    .ver-corbeille:hover { color: var(--red); background: var(--surface2); }
    /* L'invite de montee en formule : une information, pas une alerte. Le
       client n'a rien casse — il a rempli ce que son offre lui donne. */
    #ver-plafond {
      margin: 0.3rem 4px 4px; padding: 0.6rem 0.7rem; border-radius: var(--radius-sm);
      background: var(--surface2); border: 1px solid var(--border);
    }
    .ver-plafond-txt { font-size: 0.7rem; color: var(--text-muted); line-height: 1.5; }
    .ver-plafond-lien {
      display: inline-block; margin-top: 0.35rem; font-size: 0.72rem; font-weight: 600;
      color: var(--accent); text-decoration: none;
    }
    .ver-plafond-lien:hover { text-decoration: underline; }
    .anim-item { padding:6px 8px;border-radius:4px;cursor:pointer;font-size:0.78rem;color:var(--text-muted);border:2px solid transparent;transition:border-color 0.15s;display:flex;align-items:center;gap:6px; }
    .anim-item:hover { background:var(--surface2);color:var(--text); }
    .anim-item.selected { border-color:var(--accent);color:var(--accent);background:rgba(59,130,246,0.1); }
    .anim-item .anim-demo { width:20px;height:20px;background:var(--accent);border-radius:3px;flex-shrink:0; }
    .icon-cell { display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:4px;cursor:pointer;font-size:14px;color:var(--text-muted);border:2px solid transparent;transition:all 0.15s; }
    .icon-cell:hover { background:var(--surface2);color:var(--text);border-color:var(--border); }
    .icon-cell.selected { border-color:var(--accent);color:var(--accent);background:rgba(59,130,246,0.1); }
    .responsive-group { display: flex; gap: 2px; background: var(--surface2); border-radius: var(--radius-sm); padding: 2px; }
    .resp-btn {
      padding: 0.35rem 0.5rem; border: none; background: transparent;
      color: var(--text-muted); cursor: pointer; border-radius: 4px;
      font-family: inherit; font-size: 0.72rem; transition: all 0.15s;
      display: flex; align-items: center; justify-content: center;
    }
    .resp-btn svg { display: block; }
    .resp-btn.active { background: var(--accent); color: #fff; }
    .resp-btn:hover:not(.active) { background: var(--border); color: var(--text); }

    /* ── LAYOUT PRINCIPAL ── */
    #app {
      display: flex; height: 100vh; padding-top: 50px;
    }

    /* ── SIDEBAR GAUCHE ── */
    #sidebar-left {
      width: 260px; min-width: 260px;
      background: var(--surface); border-right: 1px solid var(--border);
      display: flex; flex-direction: column; overflow: hidden;
      transition: width 0.25s ease, min-width 0.25s ease;
      position: relative;
    }
    #sidebar-left.collapsed { width: 0; min-width: 0; overflow: visible; }
    #sidebar-left.collapsed .sidebar-tabs,
    #sidebar-left.collapsed .sidebar-content { display: none; }
    #sidebar-left.collapsed .collapse-btn { right: -32px; }
    /* Creer un site est LA raison d'etre du produit : le bouton se tient
       au-dessus des onglets, donc visible quel que soit le panneau ouvert.
       Il vivait dans « Mes sites » — le user ne l'a pas trouve. */
    .creer-zone {
      padding: 0.6rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
    }
    #sidebar-left.collapsed .creer-zone { display: none; }
    .sidebar-tabs {
      display: flex; border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .s-tab {
      flex: 1; padding: 0.55rem 0.5rem; text-align: center;
      font-size: 0.75rem; font-weight: 600; cursor: pointer;
      color: var(--text-muted); border: none; background: transparent;
      font-family: inherit; transition: all 0.15s; border-bottom: 2px solid transparent;
    }
    .s-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
    .s-tab:hover:not(.active) { color: var(--text); background: var(--surface2); }
    .sidebar-content { flex: 1; overflow-y: auto; padding: 0.75rem; }
    .sidebar-panel { display: none; }
    .sidebar-panel.active { display: block; }

    /* ── COLLAPSE BUTTON ── */
    .collapse-btn {
      position: absolute; right: -16px; top: 50%; transform: translateY(-50%);
      width: 28px; height: 28px; background: var(--surface2); border: 1px solid var(--border);
      border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
      z-index: 20; color: var(--text-muted); font-size: 12px; transition: all 0.2s;
      box-shadow: 0 2px 6px rgba(15, 23, 42, 0.09);
    }
    .collapse-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-50%) scale(1.15); }

    /* ── CANVAS CENTRAL ── */
    #canvas {
      flex: 1; display: flex; flex-direction: column;
      /* Le pourtour du site du client : neutre, pour ne pas concurrencer
         ses propres couleurs. */
      background: var(--surface2); overflow: hidden; position: relative;
    }
    #canvas-wrapper {
      flex: 1; display: flex; align-items: stretch; justify-content: center;
      overflow: auto; padding: 0;
      background: repeating-linear-gradient(
        45deg, #0f172a 0, #0f172a 10px, #1e293b 10px, #1e293b 20px
      );
    }

    /* ── BARRE D'ACTION — elle se pose sur l'élément choisi ─────────────
       Étape 2 de la refonte : les réglages ne vivent plus à droite de
       l'écran, ils viennent à l'élément. Posée par-dessus l'iframe, dans le
       repère de #canvas. Elle ne doit JAMAIS recouvrir le site du client :
       au-dessus de l'élément, et dessous quand le haut manque de place. */
    #lw-outils {
      position: absolute; z-index: 30; display: none;
      align-items: center; gap: 3px;
      background: #0B1E4D; border-radius: 10px; padding: 5px;
      box-shadow: 0 10px 26px rgba(11, 30, 77, .34);
    }
    #lw-outils.visible { display: flex; }
    #lw-outils button {
      border: 0; background: transparent; color: #fff;
      padding: 7px 11px; border-radius: 7px;
      font-size: 13px; font-weight: 600; font-family: inherit;
      cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap;
    }
    #lw-outils button:hover { background: rgba(255, 255, 255, .14); }
    #lw-outils button.actif { background: rgba(255, 255, 255, .22); }
    #lw-outils button:disabled { opacity: .45; cursor: default; }
    #lw-outils button:disabled:hover { background: rgba(255, 255, 255, .22); }
    #lw-outils .lw-sep { width: 1px; height: 20px; background: rgba(255, 255, 255, .20); margin: 0 3px; }
    #lw-outils .lw-pastille { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid rgba(255, 255, 255, .55); }
    #lw-etiq {
      position: absolute; z-index: 29; display: none;
      background: #2563EB; color: #fff;
      font-size: 11px; font-weight: 600; letter-spacing: .02em;
      padding: 3px 8px; border-radius: 5px; pointer-events: none;
      box-shadow: 0 4px 12px rgba(11, 30, 77, .28);
    }
    #lw-etiq.visible { display: block; }

    /* ── TIROIR « AJOUTER UNE SECTION » ─────────────────────────────
       Étape 4 de la refonte. Le client ne cherche plus un onglet « Blocs »
       à droite : un seul bouton visible, et un tiroir qui montre la FORME
       de chaque section plutôt que son nom. En clair, comme la maquette —
       le sombre signale un outil de développeur. Le tiroir monte du bas et
       ne recouvre jamais plus des trois quarts de la page du client. */
    #lw-ajouter-section {
      position: absolute; z-index: 24; display: none;
      bottom: 22px; left: 50%; transform: translateX(-50%);
      align-items: center; gap: 8px;
      background: #0B1E4D; color: #fff; border: 0;
      padding: 12px 20px; border-radius: 10px;
      font-family: inherit; font-size: 13.5px; font-weight: 600;
      cursor: pointer; box-shadow: 0 8px 22px rgba(11, 30, 77, .34);
    }
    #lw-ajouter-section.visible { display: flex; }
    #lw-ajouter-section:hover { background: #14306B; }
    #lw-voile-tiroir {
      position: absolute; inset: 0; z-index: 31; display: none;
      background: rgba(11, 30, 77, .32);
    }
    #lw-voile-tiroir.visible { display: block; }
    #lw-tiroir {
      position: absolute; z-index: 32; display: none;
      left: 50%; transform: translateX(-50%); bottom: 0;
      width: min(940px, 94%); max-height: 78%; overflow: auto;
      background: #fff; color: #0B1E4D;
      border-radius: 16px 16px 0 0; padding: 22px 26px 28px;
      box-shadow: 0 -14px 44px rgba(11, 30, 77, .24);
    }
    #lw-tiroir.visible { display: block; }
    #lw-tiroir h2 { font-size: 19px; font-weight: 700; margin-bottom: 4px; }
    #lw-tiroir .lw-tiroir-sous { font-size: 13px; color: #5A6784; margin-bottom: 18px; }
    #lw-tiroir-fermer {
      position: absolute; top: 16px; right: 18px;
      width: 30px; height: 30px; border: 0; border-radius: 8px;
      background: #EEF1F6; color: #0B1E4D; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }
    #lw-tiroir-fermer:hover { background: #E1E6EF; }
    /* 190 px donne quatre colonnes : les dix sections tiennent en trois
       rangees, donc sous les yeux. A 210 px la dixieme passait sous le pli
       et personne ne pensait a faire defiler le tiroir. */
    #lw-tiroir-sections {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px;
    }
    .lw-sect {
      border: 1px solid #DDE3EC; border-radius: 12px; padding: 14px;
      background: #fff; text-align: left; cursor: pointer; font-family: inherit;
    }
    .lw-sect:hover { border-color: #2563EB; background: rgba(37, 99, 235, .03); }
    .lw-sect:disabled { opacity: .5; cursor: default; }
    /* Le dessin est fait de <span> : sans display explicite ils resteraient
       en ligne et la miniature s'écraserait à la hauteur d'un texte. */
    .lw-sect .lw-schema {
      height: 66px; border-radius: 7px; background: #F1F4F8;
      margin-bottom: 11px; padding: 11px;
      display: flex; flex-direction: column; gap: 5px; justify-content: center;
    }
    .lw-sect .lw-l { display: block; height: 7px; border-radius: 3px; background: #CFD7E3; }
    .lw-sect .lw-l.court { width: 46%; }
    .lw-sect .lw-l.moyen { width: 72%; }
    .lw-sect .lw-trio { display: flex; gap: 5px; flex: 1; align-items: stretch; }
    .lw-sect .lw-trio.lw-fin { flex: 0 0 9px; align-items: flex-end; }
    .lw-sect .lw-trio > span { flex: 1; background: #CFD7E3; border-radius: 4px; }
    .lw-sect b { display: block; font-size: 14px; font-weight: 600; margin-bottom: 2px; }
    .lw-sect .lw-desc { display: block; font-size: 12px; color: #5A6784; }

    #site-iframe {
      border: none; background: #fff;
      transition: width 0.3s ease;
      flex-shrink: 0;
      min-height: 100%;
    }
    #canvas-placeholder {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      height: 100%; color: var(--text-muted); gap: 1rem;
      font-size: 0.9rem;
    }
    #canvas-placeholder svg { opacity: 0.3; }
    #canvas-placeholder p { opacity: 0.5; }

    /* ── SIDEBAR DROITE ── */
    #sidebar-right {
      width: 300px; min-width: 300px;
      background: var(--surface); border-left: 1px solid var(--border);
      display: flex; flex-direction: column; overflow: hidden;
      transition: width 0.25s ease, min-width 0.25s ease;
      position: relative;
    }
    #sidebar-right.collapsed { width: 0; min-width: 0; overflow: visible; }
    #sidebar-right.collapsed .right-tabs,
    #sidebar-right.collapsed .right-content { display: none; }
    #sidebar-right.collapsed .collapse-btn-right { left: -32px; }
    .collapse-btn-right {
      position: absolute; left: -16px; top: 50%; transform: translateY(-50%);
      width: 28px; height: 28px; background: var(--surface2); border: 1px solid var(--border);
      border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
      z-index: 20; color: var(--text-muted); font-size: 12px; transition: all 0.2s;
      box-shadow: 0 2px 6px rgba(15, 23, 42, 0.09);
    }
    .collapse-btn-right:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-50%) scale(1.15); }

    /* ── BARRE DE RECHERCHE ── */
    .search-wrap { position: relative; margin-bottom: 0.6rem; }
    .search-wrap input { padding-left: 2rem; }
    .search-wrap .search-icon {
      position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%);
      color: var(--text-muted); pointer-events: none;
    }

    /* ── FILTRES CHIPS ── */
    .filter-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.65rem; }
    .chip {
      padding: 0.18rem 0.55rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 500;
      cursor: pointer; border: 1px solid var(--border); background: transparent;
      color: var(--text-muted); transition: all 0.15s; font-family: inherit;
    }
    .chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
    .chip:hover:not(.active) { border-color: var(--accent); color: var(--accent); }

    /* ── TEMPLATE CARDS ── */
    .tpl-card {
      background: var(--bg); border: 1px solid var(--border);
      border-radius: var(--radius); overflow: hidden; cursor: pointer;
      transition: all 0.2s; margin-bottom: 0.6rem;
    }
    .tpl-card:hover { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(59,130,246,0.2); }
    .tpl-preview-wrap { width: 100%; height: 100px; overflow: hidden; background: var(--surface2); position: relative; }
    .tpl-iframe {
      width: 200%; height: 200%; border: none; pointer-events: none;
      transform: scale(0.5); transform-origin: top left;
    }
    .tpl-info { padding: 0.5rem 0.65rem; }
    .tpl-name { font-size: 0.8rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tpl-meta { font-size: 0.7rem; color: var(--text-muted); display: flex; gap: 0.4rem; margin-top: 0.2rem; }
    .tag { background: var(--surface2); padding: 0.1rem 0.35rem; border-radius: 9999px; font-size: 0.65rem; }

    /* ── GALERIE PLEIN ÉCRAN — étape 3 de la refonte ───────────────────
       Le panneau de gauche montrait les modèles dans 250 px de large, avec
       un aperçu de 100 px de haut : on ne voyait rien. Ici la page entière
       sert à ça, et chaque modèle est montré en grand. */
    #galerie {
      /* Au-dessus du parcours (9000) : on y arrive aussi depuis son étape 3. */
      display: none; position: fixed; inset: 0; z-index: 9100;
      background: var(--bg); flex-direction: column;
    }
    #galerie.ouverte { display: flex; }
    .g-entete {
      display: flex; align-items: center; gap: 1.25rem;
      padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
    }
    .g-entete .logo-main { font-size: 1.05rem; font-weight: 700; color: var(--accent); }
    .g-titres { flex: 1; min-width: 0; }
    .g-titre { font-size: 1.05rem; font-weight: 700; }
    .g-sous { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.15rem; }
    .g-filtres {
      display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
      padding: 0.85rem 1.5rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
    }
    .g-filtres .search-wrap { width: 260px; margin: 0; }
    #gal-scroll { flex: 1; overflow-y: auto; padding: 1.5rem; }
    .g-grille {
      display: grid; gap: 1.25rem; max-width: 1400px; margin: 0 auto;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
    .g-carte {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius); overflow: hidden; cursor: pointer;
      text-align: left; padding: 0; font-family: inherit;
      transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    }
    .g-carte:hover {
      border-color: var(--accent); transform: translateY(-2px);
      box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
    }
    /* La carte est un <button> : ses enfants sont des <span>, donc inline par
       défaut — sans ce display:block l'aperçu se réduit à la hauteur du texte. */
    .g-apercu { display: block; width: 100%; height: 240px; overflow: hidden; background: var(--surface2); position: relative; }
    .g-apercu iframe {
      width: 320%; height: 320%; border: none; pointer-events: none;
      transform: scale(0.3125); transform-origin: top left;
    }
    .g-pied { display: block; padding: 0.75rem 0.9rem; }
    .g-nom { display: block; font-size: 0.92rem; font-weight: 600; color: var(--text); }
    .g-cat { display: block; font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem; }

    /* ── « VOS SITES » EN PLEINE PAGE — reliquat de l'étape 1 ──────────
       Ses sites vivaient dans un panneau de 250 px, en liste de texte. Ici
       il les VOIT, avec leur état : en ligne, ou brouillon. */
    #mes-sites {
      display: none; position: fixed; inset: 0; z-index: 9050;
      background: var(--bg); flex-direction: column;
    }
    #mes-sites.ouverte { display: flex; }
    #ms-scroll { flex: 1; overflow-y: auto; padding: 2rem 1.5rem 4rem; }
    .ms-centre { max-width: 1200px; margin: 0 auto; }
    .ms-grille {
      display: grid; gap: 1.25rem; margin-top: 1.75rem;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
    .ms-carte {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius); overflow: hidden; cursor: pointer;
      text-align: left; padding: 0; font-family: inherit; color: var(--text);
      transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    }
    .ms-carte:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12); }
    .ms-carte:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    /* Enfants d'un <button> : sans display explicite, l'aperçu s'écrase. */
    .ms-apercu { display: block; width: 100%; height: 190px; overflow: hidden; background: var(--surface2); position: relative; }
    .ms-apercu iframe { width: 320%; height: 320%; border: none; pointer-events: none; transform: scale(0.3125); transform-origin: top left; }
    .ms-pied { display: block; padding: 0.8rem 0.9rem; }
    .ms-nom { display: block; font-size: 0.95rem; font-weight: 600; }
    .ms-etat { display: flex; align-items: center; gap: 0.45rem; font-size: 0.76rem; color: var(--text-muted); margin-top: 0.3rem; }
    .ms-point { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
    .ms-point.gris { background: var(--text-muted); }
    .ms-suppr {
      position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2;
      opacity: 0; transition: opacity 0.15s;
    }
    .ms-carte:hover .ms-suppr { opacity: 1; }
    .ms-neuf {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 0.5rem; min-height: 260px; text-align: center; padding: 1.5rem;
      border: 2px dashed var(--border); background: none;
    }
    .ms-neuf:hover { border-color: var(--green); background: rgba(34,197,94,0.06); }
    .ms-rond {
      width: 44px; height: 44px; border-radius: 50%; display: flex;
      align-items: center; justify-content: center; background: var(--green); color: #fff;
    }
    .ms-neuf b { font-size: 0.95rem; }
    .ms-neuf span:last-child { font-size: 0.78rem; color: var(--text-muted); max-width: 220px; }

    /* ── L'ÉCRAN ÉCHEC — jamais un cul-de-sac ──────────────────────────
       Une génération qui rate laissait un toast rouge de trois secondes et
       un client seul devant un formulaire. Ici : la cause en français, ce
       qu'il n'a PAS payé, deux issues, et de quoi nous écrire. */
    #modal-echec { z-index: 9600; }
    #modal-echec .modal-box { width: 480px; }
    .echec-sceau {
      width: 42px; height: 42px; border-radius: 50%; margin-bottom: 0.9rem;
      display: flex; align-items: center; justify-content: center;
      background: rgba(239, 68, 68, 0.14); color: var(--red);
    }
    .echec-cause { font-size: 0.85rem; color: var(--text-muted); line-height: 1.55; }
    .echec-rassure {
      display: flex; gap: 0.6rem; align-items: flex-start;
      font-size: 0.82rem; line-height: 1.5; margin-top: 1rem;
      padding: 0.75rem 0.85rem; border-radius: var(--radius-sm);
      background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.35);
    }
    .echec-rassure svg { flex-shrink: 0; color: var(--green); margin-top: 0.1rem; }
    .echec-detail { margin-top: 1.1rem; font-size: 0.78rem; color: var(--text-muted); }
    .echec-detail summary { cursor: pointer; }
    .echec-detail code {
      display: block; margin-top: 0.6rem; padding: 0.6rem 0.7rem;
      background: var(--surface2); border-radius: var(--radius-sm);
      font-size: 0.72rem; color: var(--text); word-break: break-word;
    }

    /* ── LE CONSEIL GRATUIT — protéger la marge ET la patience ─────────
       Quand le client demande à l'IA une correction qu'il peut faire à la
       main en trois secondes, on l'arrête : c'est gratuit, et c'est plus
       rapide. Il garde le droit de passer outre. */
    #modal-conseil { z-index: 9600; }
    #modal-conseil .modal-box { width: 460px; }
    .conseil-quoi {
      font-size: 0.85rem; line-height: 1.55; padding: 0.7rem 0.8rem;
      background: var(--surface2); border-radius: var(--radius-sm);
      color: var(--text-muted); font-style: italic;
    }
    .conseil-comment { font-size: 0.85rem; line-height: 1.6; margin-top: 1rem; }

    /* ── L'ÉCRAN COÛT — avant CHAQUE action payante ────────────────────
       Le client doit savoir ce qu'il paie ET ce qu'il lui restera avant de
       cliquer, pas après. Au-dessus du parcours (9000) et de la galerie
       (9100) : il s'ouvre depuis les deux. */
    #modal-cout { z-index: 9500; }
    #modal-cout .modal-box { width: 460px; }
    .cout-ligne {
      display: flex; justify-content: space-between; gap: 1rem;
      font-size: 0.85rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border);
    }
    .cout-total {
      display: flex; justify-content: space-between; gap: 1rem;
      font-size: 0.95rem; font-weight: 700; padding: 0.75rem 0 1rem;
    }
    .cout-reste {
      display: flex; justify-content: space-between; gap: 1rem;
      font-size: 0.85rem; color: var(--text-muted);
      padding: 0.6rem 0.75rem; background: var(--surface2); border-radius: var(--radius-sm);
    }
    .cout-manque {
      font-size: 0.85rem; line-height: 1.5; color: var(--text);
      padding: 0.7rem 0.75rem; border-radius: var(--radius-sm);
      background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.35);
    }
    .cout-garantie { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; margin-top: 1rem; }
    .cout-nombre { font-variant-numeric: tabular-nums; white-space: nowrap; }
    /* Le choix de ne plus valider chaque achat : discret, en bas, jamais
       au-dessus des chiffres — c'est un réglage, pas la décision du moment.
       Zone de clic entière (label), pour le doigt autant que pour la souris. */
    .cout-silence {
      display: flex; align-items: center; gap: 0.55rem; cursor: pointer;
      font-size: 0.78rem; color: var(--text-muted); line-height: 1.4;
      margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--border);
    }
    .cout-silence input { width: 1rem; height: 1rem; flex: 0 0 auto; cursor: pointer; }

    /* ── MON ESPACE — étape 5 de la refonte ────────────────────────────
       Le solde seul est un chiffre à croire sur parole : le relevé ligne à
       ligne est ce qui rend vérifiable la promesse « débité à la réussite ».
       Rail à gauche, trois tuiles, puis le relevé avec le solde courant. */
    #espace {
      display: none; position: fixed; inset: 0; z-index: 9100;
      background: var(--bg); flex-direction: column;
    }
    #espace.ouverte { display: flex; }
    .esp-corps { flex: 1; display: flex; min-height: 0; }
    .esp-rail {
      width: 230px; flex-shrink: 0; border-right: 1px solid var(--border);
      padding: 1rem 0.75rem; overflow-y: auto;
    }
    .esp-rail button {
      display: flex; align-items: center; gap: 0.6rem; width: 100%;
      background: none; border: none; color: var(--text-muted);
      font-family: inherit; font-size: 0.82rem; text-align: left;
      padding: 0.5rem 0.65rem; border-radius: var(--radius-sm); cursor: pointer;
    }
    .esp-rail button:hover { background: var(--surface2); color: var(--text); }
    .esp-rail button.on { background: var(--surface2); color: var(--text); font-weight: 600; }
    /* Dans un <button>, les enfants sont inline : sans ça l'icône s'écrase. */
    .esp-rail button svg { flex-shrink: 0; display: block; }
    .esp-groupe {
      font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
      color: var(--text-muted); padding: 1.1rem 0.65rem 0.35rem;
    }
    .esp-scroll { flex: 1; overflow-y: auto; padding: 2rem 2rem 4rem; }
    .esp-centre { max-width: 900px; margin: 0 auto; }
    .esp-h1 { font-size: 1.5rem; font-weight: 700; }
    .esp-sous { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.25rem; }
    .esp-tuiles {
      display: grid; gap: 1rem; margin-top: 1.75rem;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    }
    .esp-tuile {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 1rem 1.1rem;
    }
    .esp-tuile-tete { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
    .esp-quoi { font-size: 0.78rem; color: var(--text-muted); }
    .esp-badge { font-size: 0.68rem; padding: 0.1rem 0.45rem; border-radius: 999px; background: var(--surface2); color: var(--text-muted); }
    .esp-badge.actif { background: rgba(34, 197, 94, 0.15); color: var(--green); }
    .esp-gros { font-size: 1.9rem; font-weight: 700; line-height: 1.15; margin-top: 0.4rem; }
    /* Un mot n'a pas besoin de la taille d'un nombre pour être lu. */
    .esp-gros.mot { font-size: 1.35rem; }
    .esp-apres { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.3rem; }
    .esp-lien {
      display: inline-block; margin-top: 0.85rem; padding: 0;
      background: none; border: none; font-family: inherit; font-size: 0.75rem;
      color: var(--accent); text-decoration: none; cursor: pointer;
    }
    .esp-lien:hover { text-decoration: underline; }
    .esp-bloc-titre { font-size: 0.9rem; font-weight: 600; margin: 2.25rem 0 0.75rem; }
    .esp-tableau { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
    .esp-tableau th {
      text-align: left; font-weight: 500; color: var(--text-muted);
      font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
      padding: 0 0.6rem 0.5rem; border-bottom: 1px solid var(--border);
    }
    .esp-tableau td { padding: 0.6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
    .esp-tableau .n, .esp-tableau th.n { text-align: right; white-space: nowrap; }
    .esp-tableau .n { font-variant-numeric: tabular-nums; }
    .esp-plus { color: var(--green); }
    .esp-note { display: block; font-size: 0.72rem; color: var(--text-muted); margin-top: 0.15rem; }
    .esp-vide {
      font-size: 0.8rem; color: var(--text-muted); line-height: 1.5;
      padding: 1.25rem; border: 1px dashed var(--border); border-radius: var(--radius);
    }
    .esp-aide { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; margin-top: 1rem; }
    /* La marge — écran interne, superadmin seulement. */
    .esp-marge-periodes { display: flex; gap: 0.4rem; margin-top: 1.25rem; flex-wrap: wrap; }
    .esp-marge-periodes .btn.on { background: var(--accent); color: #fff; border-color: var(--accent); }
    .esp-alerte {
      margin-top: 1.25rem; padding: 0.7rem 0.9rem; border-radius: var(--radius);
      background: rgba(220, 38, 38, 0.08); border: 1px solid rgba(220, 38, 38, 0.3);
      color: #b91c1c; font-size: 0.8rem; line-height: 1.5;
    }
    .esp-tableau tr.perte td { background: rgba(220, 38, 38, 0.06); }
    #esp-marge-corps .esp-tableau { margin-top: 1.75rem; }
    .esp-infos { margin-top: 1.5rem; }
    .esp-infos > div {
      display: flex; gap: 1rem; font-size: 0.85rem;
      padding: 0.75rem 0; border-bottom: 1px solid var(--border);
    }
    .esp-infos > div > span:first-child { width: 190px; flex-shrink: 0; color: var(--text-muted); }
    @media (max-width: 760px) {
      .esp-rail { width: 58px; padding: 1rem 0.35rem; }
      .esp-rail .esp-libelle, .esp-groupe { display: none; }
      .esp-rail button { justify-content: center; padding: 0.55rem 0; }
      .esp-scroll { padding: 1.25rem 1rem 3rem; }
    }

    /* ── PAGINATION ── */
    .pagination { display: flex; justify-content: center; align-items: center; gap: 0.5rem; padding: 0.5rem 0; }
    .pagination .pg-btn { padding: 0.3rem 0.6rem; font-size: 0.72rem; }
    .pagination .pg-info { font-size: 0.72rem; color: var(--text-muted); }

    /* ── SITE ITEMS ── */
    .site-item {
      background: var(--bg); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 0.65rem 0.75rem;
      cursor: pointer; transition: all 0.2s; margin-bottom: 0.5rem;
    }
    .site-item:hover { border-color: var(--accent); }
    .site-item-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
    .site-item-name { font-size: 0.82rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
    .site-item-meta { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.25rem; }

    /* ── TABS DROITS ── */
    .right-tabs {
      display: flex; gap: 0; border-bottom: 1px solid var(--border);
      flex-shrink: 0; overflow-x: auto;
    }
    .right-tabs::-webkit-scrollbar { height: 2px; }
    .r-tab {
      padding: 0.5rem 0.65rem; font-size: 0.72rem; font-weight: 600;
      cursor: pointer; color: var(--text-muted); border: none;
      background: transparent; font-family: inherit; transition: all 0.15s;
      white-space: nowrap; border-bottom: 2px solid transparent;
    }
    .r-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
    .r-tab:hover:not(.active) { color: var(--text); background: var(--surface2); }
    .right-content { flex: 1; overflow-y: auto; padding: 0.75rem; }
    .right-panel { display: none; }
    .right-panel.active { display: block; }

    /* ── ELEMENT INFO PANEL ── */
    .el-placeholder {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      height: 200px; color: var(--text-muted); text-align: center; gap: 0.75rem;
      font-size: 0.8rem;
    }
    .el-placeholder svg { opacity: 0.3; }
    .el-type-badge {
      display: inline-flex; align-items: center; gap: 0.4rem;
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: var(--radius-sm); padding: 0.35rem 0.65rem;
      font-size: 0.75rem; font-weight: 600; color: var(--text); margin-bottom: 0.75rem;
    }
    .field-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.35rem; }
    .field-group { margin-bottom: 0.85rem; }

    /* ── COLOR PICKER ── */
    .color-row { display: flex; align-items: center; gap: 0.5rem; }
    .color-swatch { width: 36px; height: 36px; border-radius: var(--radius-sm); border: 2px solid var(--border); cursor: pointer; padding: 0; flex-shrink: 0; }
    .color-hex { flex: 1; }
    .presets { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 0.4rem; }
    .preset {
      width: 24px; height: 24px; border-radius: 4px; cursor: pointer;
      border: 2px solid transparent; transition: border-color 0.15s;
    }
    .preset:hover { border-color: #fff; }

    /* ── PEXELS GRID ── */
    .pexels-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 0.4rem; }
    .pexels-img {
      width: 100%; height: 70px; object-fit: cover; border-radius: 4px;
      cursor: pointer; border: 2px solid transparent; transition: all 0.15s;
    }
    .pexels-img:hover { border-color: var(--accent); }
    .pexels-img.selected { border-color: var(--orange); }
    .pexels-loading { text-align: center; padding: 1rem; color: var(--text-muted); font-size: 0.75rem; grid-column: 1/-1; }

    /* ── SECTIONS BLOCS ── */
    .bloc-item {
      display: flex; align-items: center; gap: 0.6rem;
      padding: 0.6rem 0.65rem; background: var(--bg); border: 1px solid var(--border);
      border-radius: var(--radius-sm); cursor: pointer; transition: all 0.15s; margin-bottom: 0.4rem;
    }
    .bloc-item:hover { border-color: var(--accent); background: var(--surface2); }
    .bloc-icon { flex-shrink: 0; display: flex; color: var(--accent); }
    .bloc-info { flex: 1; }
    .bloc-name { font-size: 0.78rem; font-weight: 600; color: var(--text); }
    .bloc-desc { font-size: 0.68rem; color: var(--text-muted); margin-top: 0.1rem; }
    .bloc-add { padding: 0.25rem 0.5rem; font-size: 0.7rem; }

    /* ── IA PANEL ── */
    .ia-option {
      padding: 0.5rem 0.65rem; background: var(--bg); border: 1px solid var(--border);
      border-radius: var(--radius-sm); cursor: pointer; font-size: 0.78rem;
      color: var(--text-muted); transition: all 0.15s; margin-bottom: 0.3rem;
    }
    .ia-option:hover { border-color: var(--accent); color: var(--text); background: var(--surface2); }
    .ia-status {
      background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm);
      padding: 0.5rem 0.65rem; font-size: 0.75rem; color: var(--text-muted);
      margin-top: 0.5rem; display: none;
    }
    .ia-status.visible { display: block; }

    /* ── STYLES PANEL ── */
    .style-section { margin-bottom: 1rem; }
    /* Masque par defaut DANS LA FEUILLE : un `style="display:none"` en ligne
       battrait la classe qui doit le montrer. C'est le JS qui l'ouvre, quand le
       modele ne sait pas prendre la couleur choisie. */
    .avis-style { display: none; font-size: 0.72rem; line-height: 1.45; color: var(--text-muted); background: var(--surface-2, rgba(0,0,0,.04)); border-left: 2px solid var(--border); padding: 0.5rem 0.6rem; border-radius: 4px; margin-top: 0.5rem; }
    .style-section-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 0.5rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--border); }

    /* ── UPLOAD ── */
    .upload-btn {
      display: flex; align-items: center; justify-content: center; gap: 0.4rem;
      width: 100%; padding: 0.6rem; background: var(--surface2);
      border: 1px dashed var(--border); border-radius: var(--radius-sm);
      color: var(--text-muted); font-size: 0.75rem; font-weight: 600;
      cursor: pointer; font-family: inherit; transition: all 0.15s;
    }
    .upload-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; border-style: solid; }

    /* ── IMG PREVIEW ── */
    .img-preview-box {
      width: 100%; height: 100px; border-radius: var(--radius-sm);
      border: 1px solid var(--border); background: var(--surface2);
      overflow: hidden; margin-bottom: 0.5rem; position: relative;
    }
    .img-preview-box img { width: 100%; height: 100%; object-fit: cover; }
    .img-preview-box .no-img { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-muted); font-size: 0.75rem; }

    /* ── MODAL PUBLISH ── */
    .modal-overlay {
      display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.42);
      z-index: 1000; align-items: center; justify-content: center;
    }
    .modal-overlay.open { display: flex; }
    .modal-box {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius-lg); padding: 1.5rem; width: 400px; max-width: 90vw;
      animation: modalIn 0.2s ease;
    }
    @keyframes modalIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
    .modal-title { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 1rem; }
    .modal-footer { display: flex; gap: 0.5rem; margin-top: 1.25rem; }

    /* ── MODAL CRÉER SITE ── */
    .mini-modal-overlay {
      display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.42);
      z-index: 1001; align-items: center; justify-content: center;
    }
    .mini-modal-overlay.open { display: flex; }
    .mini-modal-box {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius-lg); padding: 1.5rem; width: 380px; max-width: 90vw;
      animation: modalIn 0.2s ease;
    }

    /* ── TOAST ── */
    #toast {
      position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
      padding: 0.65rem 1.2rem; font-size: 0.82rem; z-index: 9999;
      box-shadow: 0 4px 20px rgba(15, 23, 42, 0.18); display: none; align-items: center; gap: 0.5rem;
      max-width: 400px; text-align: center;
    }
    #toast.visible { display: flex; }
    #toast.success { border-color: var(--green); color: var(--green); }
    #toast.error { border-color: var(--red); color: var(--red); }
    #toast.info { border-color: var(--accent); color: var(--accent); }

    /* ── SPINNER ── */
    .spinner {
      width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3);
      border-top-color: #fff; border-radius: 50%;
      animation: spin 0.6s linear infinite; flex-shrink: 0;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── PROGRESS BAR SSE ── */
    #progress-overlay {
      display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5);
      z-index: 9990; align-items: center; justify-content: center;
    }
    #progress-overlay.open { display: flex; }
    .progress-box {
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
      padding: 2rem; width: 420px; max-width: 90vw; text-align: center;
    }
    .progress-title { font-size: 0.9rem; font-weight: 700; margin-bottom: 0.35rem; }
    /* Le nom de l'entreprise sous le titre : le client doit reconnaître SON
       site pendant qu'il attend, pas une barre anonyme. */
    .progress-qui { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 1rem; min-height: 1em; }
    .progress-bar { width: 100%; height: 6px; background: var(--surface2); border-radius: 3px; overflow: hidden; margin-bottom: 0.75rem; }
    .progress-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.3s; }
    .progress-step { font-size: 0.78rem; color: var(--text-muted); }
    /* « Vous pouvez fermer cet onglet » est VRAI : le serveur poursuit la
       construction et le site attend dans « Mes sites ». Personne ne le disait,
       et le client restait cloué devant sa barre pendant une minute. */
    .progress-patience {
      font-size: 0.75rem; color: var(--text-muted); line-height: 1.55;
      margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border);
    }
    .progress-patience b { color: var(--text); }

    /* ── MISC ── */
    .sep { height: 1px; background: var(--border); margin: 0.75rem 0; }
    .empty-state { text-align: center; color: var(--text-muted); font-size: 0.78rem; padding: 2rem 0; }
    .loading-dots::after { content: '...'; animation: dots 1s infinite; }
    @keyframes dots { 0%,100%{content:'.'} 50%{content:'...'} 75%{content:'...'} }
    .search-row { display: flex; gap: 0.4rem; margin-bottom: 0.5rem; }
    .search-row input { flex: 1; }


    /* ══════════════════════════════════════════════════════════
       ECRAN DE CONNEXION — protocole du parc (reference app.timbrami.eu)
       Vitrine photo a gauche, carte au bord de la photo, colonne des
       avantages a droite, pied Enerblade. Palette claire, portee par
       #login-overlay : l'application reste sombre.
       ══════════════════════════════════════════════════════════ */
    #login-overlay {
      --bifo: #1D3A8A; --bifo-2: #0B1E4D; --bifo-vivo: #2563EB;
      --encre: #12161C; --encre-2: #44506B; --encre-3: #7C879C;
      --clair: #F4F6FA; --rayure: #DCE2EE;
      display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
      background: var(--clair); color: var(--encre); overflow-y: auto;
    }
    #login-overlay .scena { flex: 1; display: grid; grid-template-columns: 1fr; min-height: 0; }
    @media (min-width: 1024px) { #login-overlay .scena { grid-template-columns: 1fr 1fr; } }

    #login-overlay .vetrina { display: none; }
    @media (min-width: 1024px) {
      #login-overlay .vetrina { display: block; position: relative; overflow: hidden; background: var(--bifo-2); }
    }
    #login-overlay .vetrina figure { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .9s ease-in-out; }
    #login-overlay .vetrina figure.attiva { opacity: 1; }
    #login-overlay .vetrina img { width: 100%; height: 100%; object-fit: cover; display: block; }
    #login-overlay .vetrina::before {
      content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background:
        linear-gradient(to bottom, rgba(11,30,77,.18) 0%, rgba(11,30,77,.24) 45%, rgba(8,22,58,.86) 100%),
        linear-gradient(120deg, rgba(29,58,138,.36), rgba(11,30,77,.12));
    }
    #login-overlay .vetrina-fondo {
      position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
      padding: 0 clamp(2rem,4vw,3.5rem) clamp(2.2rem,5vh,3.2rem);
    }
    #login-overlay .vetrina-slogan {
      margin: 0 0 1.1rem; font-size: clamp(1.45rem,2.1vw,2rem); font-weight: 600; line-height: 1.28;
      color: #fff; letter-spacing: -.015em; white-space: pre-line; text-shadow: 0 2px 16px rgba(0,0,0,.5);
    }
    #login-overlay .vetrina-punti { display: flex; gap: .55rem; }
    #login-overlay .vetrina-punti button {
      width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
      background: rgba(255,255,255,.38); transition: background .25s, transform .25s;
    }
    #login-overlay .vetrina-punti button:hover { background: rgba(255,255,255,.65); }
    #login-overlay .vetrina-punti button[aria-selected=true] { background: var(--bifo-vivo); transform: scale(1.15); }
    #login-overlay .vetrina-freccia {
      position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
      width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(4px); transition: background .2s;
    }
    #login-overlay .vetrina-freccia:hover { background: rgba(255,255,255,.3); }
    #login-overlay .vetrina-freccia svg { width: 20px; height: 20px; }
    #login-overlay .vetrina-freccia.prec { left: clamp(.8rem,1.6vw,1.6rem); }
    #login-overlay .vetrina-freccia.succ { right: clamp(.8rem,1.6vw,1.6rem); }
    #login-overlay .vetrina-firma {
      position: absolute; right: clamp(1rem,2vw,2rem); bottom: clamp(.6rem,1.5vh,1.2rem); z-index: 2;
      font-size: clamp(2.6rem,4.6vw,4rem); font-weight: 700; line-height: 1; letter-spacing: -.03em;
      color: rgba(255,255,255,.15); user-select: none; pointer-events: none;
    }
    @media (prefers-reduced-motion: reduce) { #login-overlay .vetrina figure { transition: none; } }

    #login-overlay .pannello { display: flex; align-items: center; justify-content: center; padding: 2rem 1.5rem; }
    #login-overlay .wrap { width: 100%; max-width: 400px; }
    @media (min-width: 1024px) {
      #login-overlay .pannello {
        display: grid; align-items: center; justify-content: start;
        grid-template-columns: minmax(330px,380px) minmax(230px,300px);
        gap: clamp(2rem,3.5vw,3.5rem); padding: 2rem clamp(1.5rem,3vw,3rem) 2rem clamp(2rem,3.5vw,3.5rem);
      }
      #login-overlay .wrap { max-width: none; }
    }

    #login-overlay .vantaggi { display: none; }
    @media (min-width: 1024px) { #login-overlay .vantaggi { display: block; } }
    #login-overlay .vantaggi-nome {
      display: flex; align-items: center; gap: .5rem; margin: 0 0 .4rem;
      font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; color: var(--bifo);
    }
    #login-overlay .vantaggi-nome svg { width: 22px; height: 22px; flex: 0 0 auto; color: #D4A017; }
    #login-overlay .vantaggi-sotto { margin: 0 0 1.3rem; font-size: .85rem; color: var(--encre-3); }
    #login-overlay .vantaggi ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
    #login-overlay .vantaggi li { font-size: .9rem; line-height: 1.5; color: var(--encre-2); }
    #login-overlay .vantaggi li b { display: block; margin-bottom: .15rem; font-weight: 600; color: var(--encre); }
    #login-overlay .vantaggi li::before {
      content: ''; display: block; width: 22px; height: 2px; margin-bottom: .55rem;
      background: var(--bifo-vivo); border-radius: 2px;
    }
    #login-overlay .vantaggi-prova {
      margin: 1.4rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rayure);
      font-size: .78rem; line-height: 1.45; color: var(--encre-3);
    }

    #login-overlay .card {
      background: #fff; border-radius: .875rem; padding: 2.4rem 2.2rem 2rem;
      box-shadow: 0 1px 2px rgba(15,25,60,.04), 0 12px 34px rgba(11,30,77,.10);
    }
    #login-overlay .marchio {
      display: block; text-align: center; font-size: 2.1rem; font-weight: 700;
      letter-spacing: -.04em; color: var(--bifo); line-height: 1;
    }
    #login-overlay .sub { text-align: center; font-size: .92rem; color: var(--encre-2); margin: .9rem 0 1.9rem; }
    #login-overlay form { display: flex; flex-direction: column; gap: 1.05rem; }
    #login-overlay .field { display: flex; flex-direction: column; gap: .4rem; }
    #login-overlay .field label { font-size: .82rem; font-weight: 600; color: var(--encre-2);
      text-transform: none; letter-spacing: 0; margin: 0; }
    #login-overlay .field input {
      width: 100%; height: 44px; padding: 0 .85rem; font-family: inherit; font-size: .98rem;
      color: var(--encre); background: #fff; border: 1px solid var(--rayure); border-radius: .5rem;
      transition: border-color .15s, box-shadow .15s;
    }
    #login-overlay .field input:focus { outline: none; border-color: var(--bifo-vivo); box-shadow: 0 0 0 3px rgba(37,99,235,.16); }
    #login-overlay .pw { position: relative; }
    #login-overlay .pw input { padding-right: 2.6rem; }
    #login-overlay .oeil {
      position: absolute; inset-block: 0; right: .5rem; display: flex; align-items: center;
      background: none; border: 0; cursor: pointer; color: var(--encre-3); padding: .25rem;
    }
    #login-overlay .oeil svg { width: 18px; height: 18px; }
    #login-overlay .oeil svg[hidden] { display: none; }
    #login-overlay .entrer {
      height: 46px; margin-top: .35rem; border: 0; border-radius: .5rem; cursor: pointer;
      font-family: inherit; font-size: 1rem; font-weight: 600; color: #fff;
      background: var(--bifo-vivo); transition: background .15s, transform .05s;
      display: flex; align-items: center; justify-content: center;
    }
    #login-overlay .entrer:hover { background: #1D4ED8; }
    #login-overlay .entrer:active { transform: translateY(1px); }
    #login-overlay .oublie { display: block; text-align: right; font-size: .85rem; color: var(--bifo); font-weight: 500; text-decoration: none; }
    #login-overlay .oublie:hover { text-decoration: underline; }
    #login-overlay .login-error {
      background: #FEF2F2; border: 1px solid #FCA5A5; color: #991B1B;
      padding: .7rem .85rem; border-radius: .5rem; font-size: .87rem; margin-bottom: 1rem; display: none;
    }
    #login-overlay .inscrire {
      margin: 1.4rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--rayure);
      text-align: center; font-size: .88rem; color: var(--encre-2);
    }
    #login-overlay .inscrire button {
      font: inherit; font-weight: 600; color: var(--bifo-vivo); background: none; border: 0;
      padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
    }

    /* Selecteur de langue — le francais est la source, l'italien s'y adosse. */
    #login-overlay .langues { display: flex; justify-content: center; gap: .35rem; margin-bottom: 1.2rem; }
    #login-overlay .langues button {
      font: inherit; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
      padding: .25rem .6rem; border-radius: .4rem; cursor: pointer;
      background: none; border: 1px solid var(--rayure); color: var(--encre-3);
    }
    #login-overlay .langues button.active { background: var(--bifo); border-color: var(--bifo); color: #fff; }

    #login-overlay .piede {
      min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
      gap: .4em 1.5em; padding: .75rem 1.2rem; text-align: center;
      background: var(--bifo-2); color: rgba(255,255,255,.58);
      font-size: .64rem; letter-spacing: .11em; text-transform: uppercase;
    }
    #login-overlay .piede a { color: rgba(255,255,255,.88); text-decoration: none; }
    #login-overlay .piede a:hover { text-decoration: underline; }
    #login-overlay .piede-riga { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4em; }
    #login-overlay .piede-legale { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .4em 1.2em; }

    #login-overlay .offre {
      border: 0; border-radius: .875rem; padding: 0; color: var(--encre); background: #fff;
      width: min(640px,92vw); max-height: 86vh; overflow: hidden;
      box-shadow: 0 24px 60px rgba(11,30,77,.35);
    }
    #login-overlay .offre::backdrop { background: rgba(8,22,58,.6); }
    #login-overlay .offre-testata {
      display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
      padding: 1.4rem 1.5rem 1rem;
    }
    #login-overlay .offre-testata h2 { margin: 0; font-size: 1.3rem; font-weight: 600; line-height: 1.25; }
    #login-overlay .offre-testata p { margin: .35rem 0 0; font-size: .92rem; color: var(--encre-2); }
    #login-overlay .offre-fermer {
      width: 34px; height: 34px; flex: 0 0 auto; border: 0; border-radius: 50%; cursor: pointer;
      background: var(--clair); color: var(--encre-2); font-size: 1.2rem; line-height: 1;
    }
    #login-overlay .offre-corps { padding: 0 1.5rem 1.5rem; overflow-y: auto; max-height: calc(86vh - 12rem); }
    #login-overlay .offre-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
    #login-overlay .offre-liste li { display: flex; gap: .65rem; align-items: flex-start; font-size: .93rem; line-height: 1.5; }
    #login-overlay .offre-liste b { display: block; font-weight: 600; }
    #login-overlay .offre-liste svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: .15rem; color: var(--bifo-vivo); }
    #login-overlay .offre-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
    #login-overlay .offre-actions a {
      flex: 1 1 12rem; height: 44px; display: flex; align-items: center; justify-content: center;
      border-radius: .5rem; font-weight: 600; font-size: .95rem; text-decoration: none;
    }
    #login-overlay .offre-actions .primaire { background: var(--bifo-vivo); color: #fff; }
    #login-overlay .offre-actions .primaire:hover { background: #1D4ED8; }
    #login-overlay .offre-actions .secondaire { background: var(--clair); color: var(--bifo); border: 1px solid var(--rayure); }

    /* ══════════════════════════════════════════════════════════
       MODE AVANCE — le jargon technique n'est pas supprime, il est
       range. Meme code, autre porte : usage interne uniquement.
       ══════════════════════════════════════════════════════════ */
    body:not(.mode-avance) .avance { display: none !important; }
    .avance-badge {
      font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em;
      background: var(--orange); color: #fff; padding: 0.1rem 0.3rem;
      border-radius: 0.2rem; margin-left: 0.4rem; vertical-align: middle;
    }

    /* Choix nommes : le client choisit un resultat, pas une valeur CSS */
    .choix-simple { display: flex; gap: 0.35rem; flex-wrap: wrap; }
    .choix-simple button {
      flex: 1; min-width: 70px; background: var(--surface2);
      border: 1px solid var(--border); color: var(--text);
      font: inherit; font-size: 0.75rem; padding: 0.4rem 0.5rem;
      border-radius: var(--radius-sm); cursor: pointer;
    }
    .choix-simple button:hover { border-color: var(--accent); }
    .choix-simple button.active { background: var(--accent); border-color: var(--accent); color: #fff; }

    .couple-typo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }
    .couple-typo button {
      text-align: left; padding: 0.5rem 0.6rem; background: var(--surface2);
      border: 1px solid var(--border); border-radius: var(--radius-sm);
      color: var(--text); cursor: pointer; font: inherit;
    }
    .couple-typo button:hover { border-color: var(--accent); }
    .couple-typo button.active { border-color: var(--accent); background: rgba(59,130,246,0.12); }
    .couple-typo .ct-nom { display: block; font-size: 0.78rem; font-weight: 600; }
    .couple-typo .ct-apercu { display: block; font-size: 0.95rem; margin-top: 0.1rem; color: var(--text-muted); }

    /* ══════════════════════════════════════════════════════════
       PARCOURS — l'entree du client. Plus aere et plus grand que
       l'editeur : ici on ne travaille pas, on repond a 4 questions.
       ══════════════════════════════════════════════════════════ */
    #parcours {
      display: none; position: fixed; inset: 0; z-index: 9000;
      background: var(--bg); flex-direction: column;
    }
    /* L'ecran historique ouvre le parcours par un `style.display` pose a la
       main ; la SPA le fait par une classe, comme « Vos sites »
       (`#mes-sites.ouverte`). Les deux ecrans partagent cette feuille pendant
       tout le portage : la regle sert la SPA et ne change rien a l'autre, qui
       ne pose jamais cette classe. */
    #parcours.ouverte { display: flex; }
    .p-entete {
      display: flex; align-items: center; justify-content: space-between;
      gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .p-entete .logo-main { font-size: 1.05rem; font-weight: 700; color: var(--accent); }
    .p-fil { display: flex; align-items: center; gap: 0.5rem; }
    .p-dot {
      width: 1.75rem; height: 1.75rem; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.75rem; font-weight: 600;
      background: var(--surface); color: var(--text-muted);
      border: 1px solid var(--border);
    }
    .p-dot.active { background: var(--accent); color: #fff; border-color: var(--accent); }
    .p-dot.done { background: var(--green); color: #fff; border-color: var(--green); }
    .p-fil .p-trait { width: 1.5rem; height: 1px; background: var(--border); }

    #parcours-scroll { flex: 1; overflow-y: auto; padding: 2rem 1.5rem 7rem; }
    .p-etape { max-width: 860px; margin: 0 auto; }
    .p-titre { font-size: 1.6rem; font-weight: 700; margin-bottom: 0.4rem; }
    .p-sous { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.75rem; }
    .p-bloc-titre {
      font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.05em; color: var(--text-muted);
      margin: 1.75rem 0 0.75rem;
    }
    .p-erreur {
      display: none; background: #FEF2F2; border: 1px solid #FCA5A5; color: #991B1B;
      padding: 0.7rem 1rem; border-radius: var(--radius); font-size: 0.85rem;
      margin-top: 1rem;
    }

    .p-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.6rem; }
    .p-card {
      display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem;
      background: var(--surface); border: 2px solid var(--border);
      border-radius: var(--radius); padding: 0.9rem;
      color: var(--text); font: inherit; text-align: left; cursor: pointer;
      transition: border-color 0.12s, background 0.12s;
    }
    .p-card:hover { border-color: var(--surface2); background: var(--surface2); }
    .p-card.selected { border-color: var(--accent); background: rgba(59,130,246,0.12); }
    .p-card-icon { display: flex; color: var(--accent); }
    .p-card-label { font-size: 0.85rem; font-weight: 600; }
    .p-card-desc { font-size: 0.75rem; color: var(--text-muted); }
    /* ── LA VIGNETTE D'AMBIANCE (étape 2) ─────────────────────────────
       Le haut du site que cette ambiance produit vraiment, rendu par le
       moteur (outils/vignettes.mjs). `height: auto` avec le ratio posé en
       attributs width/height : la grille garde sa place pendant que les dix
       images arrivent, au lieu de sauter sous le curseur. */
    .p-card-vignette {
      display: block; width: 100%; height: auto; aspect-ratio: 16 / 10;
      object-fit: cover; object-position: top;
      border-radius: calc(var(--radius) - 2px);
      background: var(--surface2); margin-bottom: 0.15rem;
    }
    /* ── LES DEUX DÉPARTS — étape 6 de la refonte ──────────────────────
       Un modèle qu'on habille, ou son activité racontée en trois phrases.
       Les deux mènent au même éditeur ; le client choisit par où entrer. */
    .p-departs { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .p-depart {
      display: block; text-align: left; cursor: pointer; font: inherit; color: var(--text);
      background: var(--surface); border: 2px solid var(--border);
      border-radius: var(--radius-lg); padding: 1.4rem;
      transition: border-color 0.15s, transform 0.15s;
    }
    .p-depart:hover { border-color: var(--accent); transform: translateY(-2px); }
    .p-depart-icone { display: block; color: var(--accent); margin-bottom: 0.8rem; }
    .p-depart-titre { display: block; font-size: 1.05rem; font-weight: 700; margin-bottom: 0.35rem; }
    .p-depart-desc { display: block; font-size: 0.83rem; color: var(--text-muted); line-height: 1.55; }
    .p-depart-gratuit {
      display: inline-block; margin-top: 0.9rem; font-size: 0.72rem; font-weight: 600;
      padding: 0.15rem 0.5rem; border-radius: 999px;
      background: rgba(34, 197, 94, 0.14); color: var(--green);
    }
    #p-description {
      width: 100%; min-height: 170px; resize: vertical; line-height: 1.6;
      background: var(--surface); border: 1px solid var(--border); color: var(--text);
      border-radius: var(--radius); padding: 0.9rem; font: inherit; font-size: 0.9rem;
    }
    #p-description:focus { outline: none; border-color: var(--accent); }
    .p-exemple { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.7rem; line-height: 1.55; }
    /* Ce que le petit modèle a compris — modifiable, parce qu'il se trompe. */
    .p-compris {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 1.1rem; margin-bottom: 1.25rem;
    }
    .p-compris-resume { font-size: 0.95rem; line-height: 1.6; margin-bottom: 1rem; }
    .p-compris-champs { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .p-question { margin-bottom: 1.25rem; max-width: 620px; }
    .p-question label { display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 0.4rem; }
    /* Sans largeur explicite, un input prend la taille de son placeholder :
       le champ se réduisait à quatre centimètres sous une question pleine
       largeur. Vu à l'écran, invisible dans le code. */
    .p-question input {
      width: 100%; box-sizing: border-box;
      background: var(--surface); border: 1px solid var(--border); color: var(--text);
      border-radius: var(--radius-sm); padding: 0.6rem 0.7rem; font: inherit; font-size: 0.88rem;
    }
    .p-question input:focus { outline: none; border-color: var(--accent); }
    .p-question .p-ex { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.35rem; }
    .p-gratuit-dit {
      display: flex; gap: 0.55rem; align-items: flex-start;
      font-size: 0.8rem; line-height: 1.5; margin-bottom: 1.5rem;
      padding: 0.7rem 0.8rem; border-radius: var(--radius-sm);
      background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3);
    }
    .p-gratuit-dit svg { flex-shrink: 0; color: var(--green); margin-top: 0.1rem; }

    .p-swatches { display: flex; gap: 0.25rem; }
    /* Le liseré est indispensable : sans lui, les ambiances sombres
       (Épuré #111827, Élégant #1f2937) disparaissent sur le fond. */
    .p-swatches i {
      width: 1.4rem; height: 1.4rem; border-radius: 0.3rem; display: block;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
    }

    .p-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; }
    #parcours .form-group { margin-bottom: 1rem; }
    #parcours .form-group label { text-transform: none; font-size: 0.8rem; letter-spacing: 0; }
    .p-aide { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.3rem; }

    .p-pastilles { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
    .p-pastille {
      width: 2.25rem; height: 2.25rem; border-radius: 50%;
      border: 3px solid transparent; cursor: pointer; padding: 0;
      box-shadow: 0 0 0 1px var(--border);
    }
    .p-pastille.selected { border-color: var(--text); }
    .p-couleur-libre {
      width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--border);
      border-radius: 0.4rem; background: none; cursor: pointer;
    }
    /* Quatre des dix ambiances ont une couleur qui ne figure PAS parmi les
       douze pastilles (ocre, bleu nuit, brun, noir). Depuis que la couleur suit
       l'ambiance, ces clients-là arrivaient devant une palette où rien n'était
       coché : c'est le carré de couleur libre qui porte alors leur teinte, et
       il doit le montrer. */
    .p-couleur-libre.selected { border: 3px solid var(--text); }

    #p-modeles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
    .p-modele {
      display: block; width: 100%; padding: 0; cursor: pointer; font: inherit; color: inherit;
      background: var(--surface); border: 2px solid var(--border);
      border-radius: var(--radius); overflow: hidden;
      transition: border-color 0.12s;
    }
    .p-modele:hover { border-color: var(--surface2); }
    .p-modele.selected { border-color: var(--accent); }
    .p-modele-frame {
      display: block; position: relative; height: 260px; overflow: hidden; background: #fff;
    }
    .p-modele-frame iframe {
      width: 1280px; height: 1040px; border: 0;
      transform: scale(0.25); transform-origin: top left;
      pointer-events: none;
    }
    .p-modele-pied {
      display: block; padding: 0.6rem 0.8rem; font-size: 0.8rem; font-weight: 600;
      border-top: 1px solid var(--border);
    }
    .p-loading { grid-column: 1/-1; text-align: center; color: var(--text-muted); padding: 3rem 0; font-size: 0.85rem; }

    .p-apercu-barre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
    .p-apercu-modes { display: flex; gap: 0.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.2rem; }
    .p-apercu-modes button {
      background: none; border: 0; color: var(--text-muted); font: inherit;
      font-size: 0.75rem; padding: 0.3rem 0.7rem; border-radius: var(--radius-sm); cursor: pointer;
    }
    .p-apercu-modes button.active { background: var(--accent); color: #fff; }
    #p-apercu-box {
      background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
      overflow: hidden; height: 60vh; margin: 0 auto; width: 100%;
      transition: width 0.15s;
    }
    #p-apercu-box.mobile { width: 390px; max-width: 100%; }
    #p-apercu-frame { width: 100%; height: 100%; border: 0; }
    #p-apercu-note { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.75rem; }

    .p-pied {
      position: absolute; bottom: 0; left: 0; right: 0;
      display: flex; align-items: center; justify-content: space-between; gap: 1rem;
      padding: 1rem 1.5rem; border-top: 1px solid var(--border);
      background: var(--bg);
    }
    .p-pied .btn { padding: 0.6rem 1.4rem; font-size: 0.9rem; }

    @media (max-width: 640px) {
      #parcours-scroll { padding: 1.25rem 1rem 7rem; }
      .p-titre { font-size: 1.25rem; }
      .p-grille { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    }