/* PrintWearAI — port direct du CSS de "Configurateur 3D - standalone.html"
   (main branch GitHub). Inclut tous les composants : viewer chrome, panneaux,
   color picker, swatches, templates, patterns, teams, gradient editor,
   pantone modal, text editor, order bar, mockups, etc.
   Importé après le <style> inline pour overrider, et complété par un layer
   de mapping qui applique ces styles à nos classes legacy (.cprow → .sw,
   .pcard → .pat, .eli → .el-card, etc.). */

  :root {
    /* Sobre SaaS B2B — neutres clairs, un accent gris-bleu profond */
    --bg:         oklch(0.995 0.002 250);
    --bg-soft:    oklch(0.982 0.002 250);
    --bg-elev:    oklch(0.972 0.003 250);
    --bg-hover:   oklch(0.962 0.004 250);
    /* Le gris du panneau de droite. Volontairement en dehors de l'échelle
       ci-dessus : il doit se DÉTACHER, pas s'y fondre. */
    --bg-panneau: oklch(0.946 0.005 250);
    --line:       oklch(0.92 0.004 250);
    --line-soft:  oklch(0.95 0.003 250);
    --line-strong: oklch(0.86 0.005 250);
    --text:       oklch(0.22 0.008 250);
    --text-dim:   oklch(0.45 0.008 250);
    --text-mute:  oklch(0.62 0.006 250);
    --accent:     oklch(0.45 0.10 255);
    --accent-soft: oklch(0.45 0.10 255 / 0.08);
    --accent-line: oklch(0.45 0.10 255 / 0.25);
    --danger:     oklch(0.55 0.18 25);

    --radius:     8px;
    --radius-sm:  6px;
  }
  *,*::before,*::after { box-sizing: border-box; }
  html, body {
    margin:0; padding:0; height:100%;
    background:var(--bg); color:var(--text);
    font-family:'Manrope', system-ui, -apple-system, sans-serif;
    font-size:13px; line-height:1.45;
    -webkit-font-smoothing:antialiased;
  }
  .mono { font-family:'JetBrains Mono', ui-monospace, monospace; font-size:11px; letter-spacing:0.01em; }
  button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0; }
  button:focus-visible, [tabindex]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
  input, textarea { font:inherit; color:inherit; }
  ::-webkit-scrollbar { width:10px; height:10px; }
  ::-webkit-scrollbar-thumb { background: oklch(0.88 0.005 250); border-radius:5px; border:2px solid var(--bg); }
  ::-webkit-scrollbar-thumb:hover { background: oklch(0.78 0.005 250); }
  ::-webkit-scrollbar-track { background: transparent; }

  /* === App shell === */
  .app {
    display:grid;
    grid-template-rows: 52px 1fr 72px;
    grid-template-columns: 236px 1fr 380px;
    grid-template-areas:
      "top top top"
      "left center right"
      "order order order";
    height:100vh; width:100vw;
    overflow:hidden;
  }
  .topbar { grid-area: top; display:flex; align-items:center; gap:0; padding:0 16px; border-bottom:1px solid var(--line); background:var(--bg); }
  .left   { grid-area: left;   border-right:1px solid var(--line); background:var(--bg-soft); overflow:hidden; display:flex; flex-direction:column; }
  .center { grid-area: center; background: var(--bg); position:relative; overflow:hidden; }
  /* Le panneau de droite est celui où l'on TRAVAILLE : c'est là qu'on choisit
     la couleur, le motif, l'élément. Il partageait `--bg-soft` avec la
     colonne des zones, à 1,3 % de clarté du fond de la vue 3D — un écart que
     l'œil ne sépare pas, d'où un panneau qui se lit comme du blanc et ne se
     distingue de rien. Sa propre teinte, plus franche, le met en avant sans
     alourdir : les cartons blancs qu'il contient (le champ hexadécimal, le
     bouton actif du segment) ressortent alors comme des éléments posés
     dessus. La colonne des zones, elle, garde `--bg-soft` : elle sert à
     naviguer, pas à agir. */
  .right  { grid-area: right;  border-left:1px solid var(--line); background:var(--bg-panneau); overflow:hidden; display:flex; flex-direction:column; }
  .orderbar { grid-area: order; border-top:1px solid var(--line); background:var(--bg); display:flex; align-items:center; gap:16px; padding:0 18px; }

  /* === Top bar === */
  .brand { display:flex; align-items:center; gap:10px; padding-right:14px; margin-right:14px; border-right:1px solid var(--line); height:32px; flex-shrink:0; }
  .brand-mark {
    width:24px; height:24px; border-radius:6px;
    background: var(--text); color: var(--bg);
    display:grid; place-items:center; font-weight:700; font-size:12px;
  }
  .brand-name { font-weight:600; letter-spacing:-0.01em; font-size:13.5px; }
  .crumbs { display:flex; align-items:center; gap:8px; color:var(--text-mute); font-size:12.5px; min-width:0; overflow:hidden; }
  .crumbs .sep { color: oklch(0.85 0.005 250); }
  .crumbs .cur { color: var(--text); white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }

  /* Les raccourcis d'accès prennent le gris du panneau de droite, et EUX
     SEULS dans la barre : le reste (marque, sauvegarde, annuler, recentrer)
     reste sur le fond de la barre. Ce groupe et le panneau de droite sont la
     même chose vue en deux endroits — on choisit l'outil ici, on le règle
     là-bas ; leur donner la même couleur le dit sans un mot.
     Le rayon vaut celui d'un onglet plus la marge intérieure (8 + 3), sinon
     la pastille et les onglets ne sont pas concentriques et ça se voit.
     L'onglet actif garde --bg-elev, plus CLAIR que la pastille : il ressort
     donc en relief dessus, exactement comme le segment Uni/Dégradé ressort
     sur le panneau. */
  .tools {
    display:flex; align-items:center; gap:3px; margin-left:14px; flex-shrink:0;
    background:var(--bg-panneau); padding:3px; border-radius:11px;
  }
  .tool {
    display:flex; align-items:center; gap:7px;
    height:36px; padding:0 13px; border-radius:8px;
    color:var(--text-dim); transition: background .12s, color .12s;
    font-size:13.5px; font-weight:600;
  }
  .tool:hover { color:var(--text); background:var(--bg-elev); }
  .tool.active { color:var(--text); background:var(--bg-elev); }
  /* L'accès IA garde son identité : le dégradé violet→bleu qui signe l'IA
     partout ailleurs (bouton Générer, indicateur de génération). Même
     dégradé, même sens. Ciblé par l'attribut title — « IA » en français,
     « AI » en anglais — le bundle ne pose pas de classe par outil. */
  .tools .tool[title="IA"], .tools .tool[title="AI"] {
    background:linear-gradient(135deg,#7c3aed,#2563eb); color:#fff;
  }
  .tools .tool[title="IA"] .ico, .tools .tool[title="AI"] .ico { opacity:1; }
  .tools .tool[title="IA"]:hover, .tools .tool[title="AI"]:hover {
    color:#fff; background:linear-gradient(135deg,#7c3aed,#2563eb);
    filter:brightness(1.08);
  }
  .tools .tool[title="IA"].active, .tools .tool[title="AI"].active {
    color:#fff; background:linear-gradient(135deg,#7c3aed,#2563eb);
    box-shadow:0 3px 10px rgba(99,102,241,.35);
  }
  .tool .ico { width:16px; height:16px; opacity:.85; flex-shrink:0; }
  .tool .lbl { white-space:nowrap; }

  /* Annuler / Rétablir / Recentrer déplacés dans la topbar */

  /* Compact mode — hide labels as topbar tightens */
  @media (max-width: 1280px) {
    .crumbs { display: none; }
  }
  @media (max-width: 1100px) {
    .tool .lbl { display: none; }
    .tool { padding: 0 8px; }
    .brand-name { display: none; }
  }

  .topbar-spacer { flex:1; }
  .top-meta { display:flex; align-items:center; gap:8px; color:var(--text-mute); font-size:12px; }
  .top-meta .dot { width:5px; height:5px; border-radius:50%; background: oklch(0.65 0.16 145); }

  .top-btn {
    display:flex; align-items:center; gap:6px;
    height:30px; padding:0 11px; border-radius:6px;
    color:var(--text); border:1px solid var(--line);
    background: var(--bg); font-size:12.5px; font-weight:500;
    transition: border-color .12s, background .12s;
    flex-shrink:0;
  }
  .top-btn .lbl { white-space:nowrap; }
  @media (max-width: 1280px) {
    .top-btn .lbl { display: none; }
    .top-btn { padding: 0 8px; }
  }
  .top-btn:hover { background:var(--bg-elev); border-color:var(--line-strong); }
  .top-btn.primary {
    background:var(--text); color:var(--bg); border-color:var(--text);
  }
  .top-btn.primary:hover { background: oklch(0.32 0.008 250); border-color: oklch(0.32 0.008 250); }

  /* === Panels shared === */
  .panel-head {
    padding:11px 12px 8px;
    display:flex; align-items:center; justify-content:space-between;
  }
  .panel-head h3 {
    margin:0; font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--text-mute); font-weight:600;
  }
  .panel-head .actions { display:flex; gap:2px; }
  .icon-btn {
    width:22px; height:22px; border-radius:5px; display:grid; place-items:center;
    color:var(--text-mute);
  }
  .icon-btn:hover { background:var(--bg-elev); color:var(--text); }

  .panel-body { overflow:auto; flex:1; padding-bottom:8px; }
  .panel-foot { padding:10px 14px; border-top:1px solid var(--line); }

  /* === Left: Zones === */
  .search {
    margin: 2px 10px 6px; padding:5px 8px; height:28px;
    background: var(--bg); border:1px solid var(--line); border-radius:6px;
    display:flex; align-items:center; gap:7px;
  }
  .search input { flex:1; background:transparent; border:0; outline:0; color:var(--text); font-size:12px; }
  .search input::placeholder { color:var(--text-mute); }
  .search .kbd { color:var(--text-mute); font-family:'JetBrains Mono', monospace; font-size:10px; padding:0 4px; border-radius:3px; background:var(--bg-soft); border:1px solid var(--line); }

  .zone { padding: 0; }
  .zone-head {
    width:100%; display:flex; align-items:center; gap:6px;
    padding:6px 8px; color:var(--text);
    transition: background .1s;
    font-size:11.5px;
    border-radius: 0;
  }
  .zone-head:hover { background: var(--bg-elev); }
  .zone-chevron { width:12px; height:12px; transition: transform .15s; color:var(--text-mute); flex-shrink:0; }
  .zone.open .zone-chevron { transform: rotate(90deg); }
  .zone-name { font-weight:500; flex:1; text-align:left; }
  .zone-count { color:var(--text-mute); font-family:'JetBrains Mono', monospace; font-size:10px; }
  .zone-swatch {
    width:12px; height:12px; border-radius:3px;
    border:1px solid oklch(0 0 0 / 0.1); flex-shrink:0;
  }

  .zone-items { padding:1px 6px 6px 22px; display:flex; flex-direction:column; gap:1px; }
  .zone.collapsed .zone-items { display:none; }
  .zone-item {
    display:flex; align-items:center; gap:6px;
    padding:4px 6px; border-radius:5px;
    color:var(--text-dim); font-size:11px;
    transition: background .1s, color .1s;
    width:100%; text-align:left;
  }
  .zone-item:hover { background: var(--bg-elev); color:var(--text); }
  /* r524 : LE TEXTE RESTE NOIR. La couleur du marchand tient la bordure,
     le fond et les icônes — pas les mots : un accent clair rendait les
     libellés illisibles sur blanc. */
  .zone-item.selected { background: var(--accent-soft); color: var(--text); }
  .zone-item.selected .zone-item-ico { color: var(--accent); opacity:1; }
  .zone-item-ico { width:12px; height:12px; opacity:.6; flex-shrink:0; }
  .zone-item-name { flex:1; }
  .zone-item-vis {
    width:18px; height:18px; border-radius:3px; display:grid; place-items:center;
    color:var(--text-mute); opacity:0;
  }
  .zone-item:hover .zone-item-vis { opacity:1; }
  .zone-item-vis:hover { color:var(--text); background:var(--bg-soft); }
  .zone-item.hidden { opacity:.45; }
  .zone-item.hidden .zone-item-vis { opacity:1; }

  .zone-add {
    width:calc(100% - 24px); margin:4px 12px;
    padding:6px 8px;
    border:1px dashed var(--line-strong); border-radius:5px;
    color:var(--text-mute); font-size:11.5px;
    display:flex; align-items:center; gap:6px; justify-content:center;
    transition: border-color .12s, color .12s;
  }
  .zone-add:hover { border-color: var(--text-mute); color: var(--text); }

  /* === Center: 3D viewer === */
  .viewer-stage {
    position:absolute; inset:0;
    display:grid; place-items:center;
    perspective: 1600px;
    overflow:hidden;
  }
  .viewer-grid {
    position:absolute; inset:0;
    background-image:
      linear-gradient(oklch(0 0 0 / 0.025) 1px, transparent 1px),
      linear-gradient(90deg, oklch(0 0 0 / 0.025) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
    pointer-events:none;
  }
  /* Ombre au sol du viewer — DÉSACTIVÉE.
     C'est cette ellipse CSS qu'on prenait pour une ombre 3D : elle est
     peinte par la page, pas par la scène, ce qui explique qu'elle ait
     survécu à la suppression du plan de sol et du rendu mockup. Elle ne
     correspond à aucune lumière et la scène a désormais un environnement
     qui détache seul le vêtement du fond. Repasser display à block pour
     la rétablir. */
  .viewer-floor {
    display:none;
    position:absolute; left:50%; bottom:14%; transform:translateX(-50%);
    width:460px; height:40px; border-radius:50%;
    background: radial-gradient(ellipse, oklch(0 0 0 / 0.10), transparent 70%);
    filter: blur(8px); pointer-events:none;
  }

  .jersey-3d {
    width:380px; height:480px;
    transform-style: preserve-3d;
    transition: transform .7s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    position: relative;
  }
  .jersey-3d::after {
    content:"";
    position:absolute; left:50%; top:88%;
    width:70%; height:30px; transform: translate(-50%, 0) translateZ(-1px);
    border-radius:50%;
    background: radial-gradient(ellipse, oklch(0 0 0 / 0.10), transparent 70%);
    filter: blur(6px); pointer-events:none;
  }
  .jersey-face {
    position:absolute; inset:0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display:grid; place-items:center;
    transform: translateZ(0.01px);
  }
  .jersey-face.back { transform: rotateY(180deg) translateZ(0.01px); }

  .jersey-svg { width:100%; height:100%; }
  .jersey-zone { cursor:pointer; transition: filter .15s; }
  .jersey-zone:hover { filter: brightness(0.96); }
  .selected-outline {
    stroke: var(--accent);
    stroke-width: 2;
    stroke-dasharray: 4 3;
    fill: transparent;
    pointer-events: none;
    animation: dash 20s linear infinite;
  }
  @keyframes dash { to { stroke-dashoffset: -300; } }

  .jersey-text {
    fill: white; font-family:'Manrope'; font-weight:700;
    text-anchor:middle; user-select:none;
    paint-order: stroke; stroke: oklch(0 0 0 / 0.15); stroke-width: 0.5;
  }
  .jersey-text.dark { fill: oklch(0.22 0.008 250); stroke: transparent; }

  /* Viewer chrome */
  .viewer-top {
    position:absolute; top:14px; left:14px; right:14px;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    pointer-events:none;
  }
  .viewer-top > * { pointer-events:auto; }

  .vgroup {
    display:flex; gap:2px;
    background:var(--bg);
    border:1px solid var(--line);
    padding:3px; border-radius:7px;
  }
  .vbtn {
    height:26px; min-width:26px; padding:0 8px; border-radius:5px;
    display:flex; align-items:center; justify-content:center; gap:6px;
    color:var(--text-dim); font-size:11.5px; font-weight:500;
  }
  .vbtn:hover { background:var(--bg-elev); color:var(--text); }
  .vbtn.active { background:var(--bg-elev); color:var(--text); }
  .vbtn .ico { width:13px; height:13px; }

  .viewer-bottom {
    position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
    display:flex; gap:2px; align-items:center;
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:8px; padding:3px;
  }
  .vb-sep { width:1px; height:18px; background:var(--line); margin: 0 2px; }

  .viewer-readout {
    position:absolute; bottom:16px; right:16px;
    font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--text-mute);
    background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:6px 8px;
    line-height:1.7;
  }
  .viewer-readout .row { display:flex; gap:14px; justify-content:space-between; }
  .viewer-readout .v { color:var(--text); }

  .rotate-rail {
    position:absolute; left:16px; top:50%; transform:translateY(-50%);
    display:flex; flex-direction:column; gap:2px; align-items:center;
    background:var(--bg); border:1px solid var(--line); border-radius:7px; padding:3px;
  }

  /* face label badge */
  .face-badge {
    position:absolute; top:-30px; left:50%; transform:translateX(-50%);
    font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.1em;
    color:var(--text-mute);
    text-transform:uppercase;
  }

  /* === Right panel === */
  .rp-title { font-size:14px; font-weight:600; letter-spacing:-0.005em; display:flex; align-items:center; gap:8px; }
  .rp-title .ico { width:15px; height:15px; color:var(--text-mute); }
  .rp-subtitle { color:var(--text-mute); font-size:12px; margin-top:2px; }
  /* === Attente et vide ===
     Un panneau blanc pendant deux secondes se lit comme une panne. Des
     cartes grises qui respirent se lisent comme un chargement. C'est la même
     attente : ce n'est pas la même impression, et c'est là que se joue la
     lenteur RESSENTIE.
     Le décalage d'animation est posé par le composant (0,09 s par carte) :
     la vague qui en résulte se lit comme du travail en cours, là où un
     clignotement synchrone se lit comme un défaut d'affichage. */
  .squelette-grille { display:grid; gap:6px; }
  .squelette {
    border-radius:var(--radius-sm); border:1px solid var(--line-soft);
    background:linear-gradient(100deg,
      var(--bg-elev) 0%, var(--bg-elev) 38%,
      var(--bg) 50%,
      var(--bg-elev) 62%, var(--bg-elev) 100%);
    background-size:280% 100%;
    animation:squelette 1.25s ease-in-out infinite;
  }
  @keyframes squelette { 0% { background-position:130% 0; } 100% { background-position:-30% 0; } }
  /* Respecter ceux qui coupent les animations : le squelette garde son rôle
     — un carton gris à la place du contenu — sans la vague. */
  @media (prefers-reduced-motion: reduce) { .squelette { animation:none; } }

  /* Un panneau vide doit dire QUOI FAIRE. Sans ça il ne dit rien, et c'est
     exactement là que se perdent ceux qui arrivent pour la première fois. */
  .rien-ici {
    display:flex; flex-direction:column; align-items:center; text-align:center;
    padding:26px 18px; gap:3px;
    border:1px dashed var(--line-strong); border-radius:var(--radius);
    background:var(--bg);
  }
  .rien-ico { color:var(--text-mute); opacity:.55; margin-bottom:5px; }
  .rien-titre { font-size:13px; font-weight:600; color:var(--text); }
  .rien-texte { font-size:11.5px; color:var(--text-mute); line-height:1.5; max-width:30ch; }
  .rien-btn { margin-top:11px; height:32px; justify-content:center; padding:0 14px; }

  .rp-section { padding:14px 16px; border-bottom:1px solid var(--line); }
  .rp-section:last-child { border-bottom:0; }
  .rp-label {
    font-size:11.5px; color:var(--text-dim); margin-bottom:10px;
    display:flex; align-items:center; justify-content:space-between;
    font-weight:500;
  }
  .rp-label .reset { color:var(--text-mute); cursor:pointer; font-weight:400; }
  .rp-label .reset:hover { color:var(--text); }

  /* Color picker */
  .swatches { display:grid; grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); gap:5px; }
  .sw {
    aspect-ratio: 1; border-radius:5px;
    border:1px solid oklch(0 0 0 / 0.08); cursor:pointer; position:relative;
    transition: transform .1s;
  }
  .sw:hover { transform: scale(1.06); }
  .sw.selected { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--accent); }
  .sw.custom { background: conic-gradient(from 0deg, #d44, #d84, #cc4, #4c8, #4ac, #46c, #94c, #d44); }

  .channel { display:flex; align-items:center; gap:10px; margin-top:8px; }
  .channel label { width:14px; color:var(--text-mute); font-family:'JetBrains Mono', monospace; font-size:10px; }
  .channel input[type=range] { flex:1; }
  .channel .val { width:38px; text-align:right; color:var(--text); font-family:'JetBrains Mono', monospace; font-size:11px; }
  input[type=range] {
    -webkit-appearance:none; background:transparent; height:16px;
  }
  input[type=range]::-webkit-slider-runnable-track {
    height:3px; background: var(--line); border-radius:2px;
  }
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance:none; width:13px; height:13px; border-radius:50%;
    background: var(--bg); border:1px solid var(--line-strong); margin-top:-5px;
    box-shadow: 0 1px 2px oklch(0 0 0 / 0.1);
    cursor: pointer;
  }
  input[type=range]::-webkit-slider-thumb:hover { border-color: var(--accent); }

  /* Curseur CENTRÉ SUR ZÉRO (décalages X/Y d'un joueur) : sans repère, on
     ne sait pas où est le neutre — un cran au milieu le dit, et
     double-cliquer y ramène. Le trait est dans un habillage, pas dans la
     piste : les pseudo-éléments du range ne se superposent pas. */
  .rng0 { position:relative; flex:1; display:flex; align-items:center; min-width:0; }
  .rng0::before {
    content:""; position:absolute; left:50%; top:50%;
    width:1px; height:9px; margin-left:-0.5px; transform:translateY(-50%);
    background:var(--line-strong); pointer-events:none;
  }
  .rng0 input[type=range] { flex:1; min-width:0; position:relative; }
  /* Les réglages d'un joueur tiennent dans la colonne, quoi qu'il arrive :
     une boîte plus large que la liste débordait du panneau. */
  .joueur-reglages { box-sizing:border-box; width:100%; max-width:100%; overflow:hidden; }
  .joueur-reglages input[type=number] { box-sizing:border-box; max-width:100%; }

  .hex-row {
    display:flex; gap:8px; margin-top:12px;
    background:var(--bg); border:1px solid var(--line); border-radius:6px;
    padding:6px 10px; align-items:center;
  }
  .hex-row .sample { width:14px; height:14px; border-radius:3px; border:1px solid var(--line); flex-shrink:0; }
  .hex-row .hex-val { font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--text); flex:1; background:transparent; border:0; outline:0; }
  .hex-row .copy { color:var(--text-mute); }
  .hex-row .copy:hover { color:var(--text); }

  .seg { display:flex; background:var(--bg-elev); padding:2px; border-radius:6px; gap:1px; border:1px solid var(--line); }
  .seg button {
    flex:1; padding:5px 8px; border-radius:4px; font-size:11.5px;
    color:var(--text-dim); font-weight:500;
  }
  .seg button.active { background:var(--bg); color:var(--text); box-shadow: 0 1px 2px oklch(0 0 0 / 0.05); }

  /* Templates grid */
  .templates-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap:8px; }
  .tpl {
    aspect-ratio: 1 / 1; border-radius:7px;   /* au carré, comme les vignettes (400 × 400) : 3/3.6 laissait une bande blanche en haut (26/10) */ background:var(--bg); border:1px solid var(--line);
    position:relative; cursor:pointer; transition: border-color .12s; overflow:hidden;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    padding: 12px 8px 22px;
  }
  /* L'icône des onglets numérotés : cachée en desktop (le numéro suffit),
     montrée en mobile où TOUS les onglets doivent avoir leur pictogramme. */
  .tools .tool .ico-etape { display:none; }

  .tpl:hover { border-color: var(--line-strong); }
  .tpl.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .tpl-name { position:absolute; bottom:6px; left:8px; right:8px; font-size:10.5px; color:var(--text-dim); text-align:center; font-weight:500; }
  .tpl.selected .tpl-name { color: var(--text); }
  /* Une tuile qui a une photo, c'est la photo qui la remplit : sans la
     marge de la tuile. Le maillot est le sujet — l'afficher dans 60 px le
     réduisait à une pastille. `contain` et non `cover` : l'image est déjà
     recadrée au ras du maillot à la capture, la rogner une seconde fois
     couperait les manches. Le nom repasse par-dessus sur un voile dégradé
     pour rester lisible. */
  .tpl.has-photo { padding:0; }
  .tpl-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; }
  .tpl.has-photo .tpl-name {
    bottom:0; left:0; right:0; padding:16px 6px 5px; color:#fff;
    background: linear-gradient(to top, oklch(0 0 0 / 0.62), oklch(0 0 0 / 0));
    text-shadow: 0 1px 2px oklch(0 0 0 / 0.6);
  }
  .tpl.has-photo.selected .tpl-name { color:#fff; }
  .tpl svg { width:40px; height:40px; color: var(--text-dim); }
  .tpl.selected svg { color: var(--accent); }

  /* Lien croisé entre panneaux (Éléments ↔ Media) : une phrase cliquable
     sous l'état vide, pas un bouton qui rivalise avec l'action principale. */
  .lien-croise {
    display:block; margin:10px auto 0; background:none; border:0; cursor:pointer;
    font-size:11.5px; color:var(--text-dim); text-decoration:underline;
    text-underline-offset:3px;
  }
  .lien-croise:hover { color:var(--text); }

  /* Aperçu du motif dans la liste des zones : un carré de la trame même,
     pour reconnaître le motif posé sans le lire. */
  .zone-motif-vign {
    width:14px; height:14px; flex-shrink:0; border-radius:3px;
    border:1px solid var(--line); background-size:14px 14px; background-color:#fff;
  }

  /* Elements list */
  .el-cat { font-size:11px; color:var(--text-mute); padding: 4px 0 6px; font-weight:500; }
  .elements-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap:6px; }
  .el-card {
    aspect-ratio: 1; border-radius:6px; background:var(--bg); border:1px solid var(--line);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    color:var(--text-dim); cursor:pointer; transition: border-color .12s, color .12s;
    font-size:10.5px; font-weight:500;
  }
  .el-card:hover { border-color: var(--line-strong); color:var(--text); }
  .el-card .ico { width:16px; height:16px; }

  /* Patterns */
  .patterns-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap:6px; }
  .pat {
    aspect-ratio: 1; border-radius:6px; cursor:pointer; border:1px solid var(--line);
    transition: border-color .12s; overflow:hidden;
    position:relative; background:var(--bg);
  }
  .pat:hover { border-color: var(--line-strong); }
  .pat.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .pat-name { position:absolute; bottom:0; left:0; right:0; padding:3px 5px; font-size:9.5px; color:var(--text-dim); background:var(--bg); border-top:1px solid var(--line); font-weight:500; }
  .pat.selected .pat-name { color: var(--text); border-color: var(--accent-line); }

  /* Teams */
  .teams-list { display:flex; flex-direction:column; gap:4px; }
  .team {
    display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:6px;
    background:var(--bg); border:1px solid var(--line); cursor:pointer;
    transition: border-color .12s;
  }
  .team:hover { border-color: var(--line-strong); }
  .team.selected { border-color: var(--accent); }
  .team-swatch {
    width:30px; height:30px; border-radius:5px; flex-shrink:0;
    position:relative; overflow:hidden; border:1px solid oklch(0 0 0 / 0.08);
  }
  .team-info { flex:1; min-width:0; }
  .team-name { font-size:12.5px; font-weight:500; color:var(--text); }
  .team-sub { font-size:11px; color:var(--text-mute); }

  /* === Zone action toolbar (left panel header) === */
  .zone-toolbar {
    display:flex; gap:2px; padding: 4px 8px 8px;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
  }
  .zt-btn {
    flex:1; height:26px; border-radius:5px;
    display:flex; align-items:center; justify-content:center; gap:4px;
    color:var(--text-dim); font-size:10.5px; font-weight:500;
    border: 1px solid transparent;
  }
  .zt-btn:hover:not(:disabled) { background: var(--bg-elev); color: var(--text); border-color: var(--line); }
  .zt-btn:disabled { opacity: 0.35; cursor: not-allowed; }
  .zt-btn.danger:hover:not(:disabled) { color: var(--danger); border-color: oklch(0.55 0.18 25 / 0.3); }
  .zt-btn.active { background: var(--accent-soft); color: var(--text); border-color: var(--accent-line); }

  .zone-item.locked { opacity: 0.7; }

  /* === Modal overlay === */
  .modal-overlay {
    position: fixed; left: 0; right: 0; z-index: 100;
    top: var(--pwai-vp-top, 0px); height: var(--pwai-vp-h, 100vh);
    background: oklch(0 0 0 / 0.4);
    display: grid; place-items: center;
    padding: 32px;
    animation: fadeIn .15s ease-out;
  }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  .modal {
    width: 100%; max-width: 880px; max-height: 90vh;
    background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 24px 64px oklch(0 0 0 / 0.25);
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  .modal-head {
    padding: 14px 18px; border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: 12px;
  }
  .modal-head h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; flex: 1; }
  .modal-close {
    width: 28px; height: 28px; border-radius: 6px;
    display: grid; place-items: center; color: var(--text-mute);
  }
  .modal-close:hover { background: var(--bg-elev); color: var(--text); }
  .modal-body { flex: 1; overflow: hidden; display: flex; }
  .modal-side { width: 240px; border-right: 1px solid var(--line); padding: 14px; background: var(--bg-soft); overflow: auto; }
  .modal-main { flex: 1; padding: 16px 18px; overflow: auto; }

  /* Pantone modal */
  .pantone-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px;
  }
  .pantone-card {
    border-radius: 6px; border: 1px solid var(--line);
    background: var(--bg); cursor: pointer;
    overflow: hidden; transition: border-color .12s, transform .08s;
  }
  .pantone-card:hover { border-color: var(--line-strong); }
  .pantone-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .pantone-card .pc-swatch { height: 56px; }
  .pantone-card .pc-meta { padding: 5px 8px; }
  .pantone-card .pc-code { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text); font-weight: 600; }
  .pantone-card .pc-name { font-size: 10.5px; color: var(--text-mute); margin-top: 1px; }
  .pantone-card .pc-hex  { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--text-mute); margin-top: 1px; }

  /* Pantone modal — picker drop-zone */
  .pantone-tools {
    display: flex; flex-direction: column; gap: 12px;
  }
  .ptool-card {
    background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 10px;
  }
  .ptool-title { font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-bottom: 8px; }
  .img-drop {
    border: 1px dashed var(--line-strong); border-radius: 6px;
    height: 120px; display: grid; place-items: center;
    color: var(--text-mute); font-size: 11.5px; text-align: center; padding: 8px;
    cursor: pointer; transition: border-color .12s, color .12s, background .12s;
  }
  .img-drop:hover { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
  .picked-pixel-info {
    display: flex; align-items: center; gap: 8px; padding: 6px 8px;
    background: var(--bg-soft); border-radius: 6px; margin-top: 8px;
  }
  .picked-swatch { width: 28px; height: 28px; border-radius: 5px; border: 1px solid var(--line); flex-shrink: 0; }

  /* === Gradient editor refined === */
  .grad-editor {
    background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
    padding: 10px;
  }
  .grad-preview {
    height: 44px; border-radius: 6px; border: 1px solid var(--line);
    position: relative; overflow: hidden;
  }
  .grad-stop-dot {
    position: absolute; top: 50%; transform: translate(-50%, -50%);
    width: 20px; height: 20px; border-radius: 10px;
    border: 2px solid white; box-shadow: 0 0 0 1px oklch(0 0 0 / 0.25), 0 2px 4px oklch(0 0 0 / 0.2);
    cursor: ew-resize;
  }
  .grad-stop-dot.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft); }

  .grad-stops {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px;
  }
  .grad-stop-card {
    background: var(--bg-soft); border: 1px solid var(--line); border-radius: 6px;
    padding: 7px; cursor: pointer; transition: border-color .12s;
    display: flex; align-items: center; gap: 8px;
  }
  .grad-stop-card:hover { border-color: var(--line-strong); }
  .grad-stop-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .grad-stop-card .gs-num {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    color: var(--text-mute); width: 18px; flex-shrink: 0;
  }
  .grad-stop-card.active .gs-num { color: var(--text); }
  .grad-stop-card .gs-swatch { width: 22px; height: 22px; border-radius: 4px; border: 1px solid oklch(0 0 0 / 0.1); flex-shrink: 0; }
  .grad-stop-card .gs-info { flex: 1; min-width: 0; line-height: 1.2; }
  .grad-stop-card .gs-hex { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text); font-weight: 600; }
  .grad-stop-card .gs-name { font-size: 10px; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .angle-controls {
    display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center;
    margin-top: 10px;
  }
  .angle-dial {
    width: 56px; height: 56px; border-radius: 50%;
    border: 1px solid var(--line); position: relative;
    background: var(--bg-soft);
  }
  .angle-dial::before {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--text-mute); transform: translate(-50%, -50%);
  }
  .angle-indicator {
    position: absolute; left: 50%; top: 50%;
    width: 2px; height: 22px;
    background: var(--accent);
    transform-origin: 50% 0%;
    border-radius: 1px;
  }

  .preset-grad-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  }
  .preset-grad {
    aspect-ratio: 3 / 2; border-radius: 6px; border: 1px solid var(--line);
    cursor: pointer; transition: border-color .12s, transform .1s;
    position: relative; overflow: hidden;
  }
  .preset-grad:hover { border-color: var(--line-strong); transform: translateY(-1px); }
  .preset-grad.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .preset-grad .pg-name {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 3px 6px; font-size: 10px; font-weight: 500;
    color: white; background: linear-gradient(transparent, oklch(0 0 0 / 0.6));
    text-shadow: 0 1px 1px oklch(0 0 0 / 0.4);
  }

  /* === Text element editor === */
  .text-style-row {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  }
  .ts-btn {
    height: 28px; border-radius: 5px; border: 1px solid var(--line);
    background: var(--bg); color: var(--text-dim);
    display: grid; place-items: center; font-size: 12px;
    transition: border-color .1s, color .1s, background .1s;
  }
  .ts-btn:hover { border-color: var(--line-strong); color: var(--text); }
  .ts-btn.active { background: var(--accent-soft); color: var(--text); border-color: var(--accent-line); }

  .add-el-card {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 7px;
    background: var(--bg); border: 1px solid var(--line);
    cursor: pointer; transition: border-color .12s;
    width: 100%; text-align: left;
  }
  .add-el-card:hover { border-color: var(--accent); }
  /* « Ajouter » en tuiles illustrées (maquette 1) : deux colonnes, l'IA et les Motifs en pleine largeur */
  .ajout-tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ajout-tuile { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; border-radius: 10px; }
  /* « on a du mal à distinguer » (25/10) : un contour plus foncé autour de chaque case, et la vignette séparée du texte */
  .ajout-tuile { border-color: oklch(0.78 0.01 250); box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
  .ajout-tuile .at-vig { border-bottom: 1px solid oklch(0.86 0.01 250); }
  .ajout-tuile.large .at-vig { border-bottom: 0; border-right: 1px solid oklch(0.86 0.01 250); }
  .ajout-tuile:hover { border-color: var(--accent); }
  .ajout-tuile .at-vig { height: 74px; display: grid; place-items: center; position: relative; flex: none; }
  .ajout-tuile .at-tx { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px 10px; min-width: 0; }
  .ajout-tuile .ael-desc { font-size: 10.5px; line-height: 1.35; }
  .ajout-tuile .at-aa { font-size: 24px; font-weight: 800; letter-spacing: .02em; color: var(--text); }
  .ajout-tuile .at-num { font-size: 34px; font-weight: 800; line-height: 1; color: var(--text); }
  .ajout-tuile.large { grid-column: span 2; flex-direction: row; }
  .ajout-tuile.large .at-vig { width: 110px; height: auto; min-height: 70px; }
  .ajout-tuile.large .at-tx { justify-content: center; padding: 12px; }
  .ajout-tuile.grande .at-vig { width: 120px; min-height: 104px; }
  .ajout-tuile.grande .ael-name { font-size: 13.5px; }
  .ajout-tuile.grande .ael-desc { font-size: 11.5px; line-height: 1.45; margin-top: 3px; }
  .ael-ico {
    width: 30px; height: 30px; border-radius: 6px;
    display: grid; place-items: center; flex-shrink: 0;
  }
  .ael-ico svg { color: white; }
  .ael-meta { flex: 1; min-width: 0; }
  .ael-name { font-size: 12.5px; font-weight: 600; color: var(--text); }
  .ael-desc { font-size: 10.5px; color: var(--text-mute); margin-top: 1px; }

  .element-card {
    background: var(--bg); border: 1px solid var(--line); border-radius: 7px;
    padding: 10px; margin-bottom: 8px;
  }
  .element-card-active { outline:1.5px solid rgba(30,110,230,.75); outline-offset:1px; }
  .element-card-head {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  }
  .element-card-head .name {
    font-size: 12.5px; font-weight: 600; flex: 1;
  }
  .element-card-head .badge {
    font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
    color: var(--text-mute); background: var(--bg-soft);
    padding: 1px 5px; border-radius: 3px;
  }

  /* === Media library === */
  .media-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px;
  }
  .media-card {
    aspect-ratio: 1; border-radius: 6px; border: 1px solid var(--line);
    background: var(--bg); cursor: pointer; overflow: hidden;
    position: relative; transition: border-color .1s;
    display: grid; place-items: center;
  }
  .media-card:hover { border-color: var(--line-strong); }
  .media-card img, .media-card svg { max-width: 80%; max-height: 80%; object-fit: contain; }
  .media-card .del {
    position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 4px;
    background: var(--bg); border: 1px solid var(--line); display: grid; place-items: center;
    color: var(--text-mute); opacity: 0;
  }
  .media-card:hover .del { opacity: 1; }
  .media-card .del:hover { color: var(--danger); }

  .upload-zone {
    border: 1px dashed var(--line-strong); border-radius: 7px;
    padding: 18px 12px; text-align: center;
    cursor: pointer; transition: all .12s;
    color: var(--text-mute);
  }
  .upload-zone:hover { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
  .upload-zone .uz-title { font-size: 12.5px; font-weight: 500; color: var(--text); margin-bottom: 2px; }
  .upload-zone .uz-sub { font-size: 11px; }
  .roster-head {
    display:grid; grid-template-columns: 38px 1fr 56px 84px 22px 22px;   /* r963 : + genre */ gap:6px;
    padding:4px 6px 4px 6px; font-size:10px; color:var(--text-mute);
    font-family:'JetBrains Mono', monospace; text-transform:uppercase; letter-spacing:0.06em;
    border-bottom:1px solid var(--line);
  }
  .player-row {
    display:grid; grid-template-columns: 38px 1fr 56px 84px 22px 22px;   /* r963 : + genre */ gap:6px; align-items:center;
    padding:3px 6px; border-radius:5px; cursor:pointer;
    border:1px solid transparent;
  }
  .player-row:hover { background: var(--bg); }
  .player-row.active { background: var(--accent-soft); border-color: var(--accent-line); }
  .player-num input, .player-name input, .player-size select, .player-genre select {
    background: transparent; border: 1px solid transparent;
  }
  .player-row:hover .player-num input,
  .player-row:hover .player-name input,
  .player-row:hover .player-size select,
  .player-row:hover .player-genre select {
    background: var(--bg);
    border-color: var(--line);
  }
  .player-row.active .player-name input { color: var(--text); font-weight: 600; }
  .player-size { position:relative; }
  .player-size::after {
    content:""; position:absolute; right:7px; top:50%; transform:translateY(-2px);
    width:0; height:0; border-left:3px solid transparent; border-right:3px solid transparent;
    border-top:4px solid var(--text-mute); pointer-events:none;
  }
  .player-row .icon-btn { opacity: 0; }
  .player-row:hover .icon-btn { opacity: 0.7; }
  .player-row:hover .icon-btn:hover { opacity: 1; color: var(--danger); }

  /* AI */
  .ai-prompt {
    background:var(--bg); border:1px solid var(--line); border-radius:7px;
    padding:10px 12px; min-height:78px; color:var(--text); font:inherit;
    font-size:12.5px; resize:none; width:100%; line-height:1.5;
    transition: border-color .12s;
  }
  .ai-prompt:focus { outline:0; border-color:var(--accent); }
  .ai-suggest { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
  .ai-chip {
    padding:4px 9px; border-radius:999px; background:var(--bg);
    border:1px solid var(--line); color:var(--text-dim); font-size:11px; cursor:pointer;
    transition: border-color .12s, color .12s;
  }
  .ai-chip:hover { border-color: var(--text-mute); color: var(--text); }
  .ai-gen-btn {
    width:100%; margin-top:10px; height:32px; border-radius:7px;
    background: var(--text); color: var(--bg);
    font-weight:600; display:flex; align-items:center; justify-content:center; gap:6px;
    font-size:12.5px;
  }
  .ai-gen-btn:hover { background: oklch(0.32 0.008 250); }
  /* BOUTON GÉNÉRER COLLÉ EN BAS — sur ordinateur aussi.
     Le panneau IA s'allonge à chaque réglage (brief, créativité,
     historique, calage) : sur un écran court, le bouton sortait du
     champ et il fallait défiler pour lancer une génération qu'on venait
     tout juste de décrire. Il se colle donc au bas de .panel-body, qui
     est le conteneur qui défile.
     Il est enfant DIRECT du panneau, pas d'une .rp-section : « sticky »
     est borné par son parent, et tant qu'il vivait dans la section
     Consigne il décollait dès qu'on atteignait l'historique — donc
     précisément quand le panneau est long, le seul cas où coller sert. */
  .ai-gen-collant {
    position: sticky; bottom: 0; z-index: 5;
    margin: 0; padding: 10px 16px 12px;
    background: var(--bg-panneau);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 16px -12px rgba(0,0,0,.35);
  }
  .ai-gen-collant .ai-gen-btn { margin-top: 0; }

  /* INFO-BULLE D'EXEMPLE — le maillot au-dessus de l'étiquette.
     « Néon », « Optique », « Japonisant » ne disent rien tant qu'on n'a
     pas vu le résultat. La bulle est en position FIXE, donc calée sur la
     fenêtre : le panneau défile en overflow:auto et rognerait toute bulle
     posée en absolu à l'intérieur. Un cadre fixe sous la liste avait été
     essayé d'abord — mesuré à l'écran, il tombait hors champ, la liste
     faisant vingt-six puces sur dix rangs. */
  .dir-bulle {
    position: fixed; z-index: 100010;
    transform: translate(-50%, -100%);
    width: 260px; padding: 6px 6px 4px;
    border-radius: 10px; background: var(--bg-panneau, #fff);
    border: 1px solid var(--line); box-shadow: 0 10px 26px -8px rgba(0,0,0,.35);
    pointer-events: none;              /* jamais entre la souris et la puce */
  }
  .dir-bulle.dessous { transform: translate(-50%, 0); }
  .dir-bulle img {
    /* GROS PLAN SUR LE MOTIF, pas sur le vêtement. Une silhouette de
       t-shirt est la même pour les 24 directions : elle n'apprend rien.
       Les sources sont recadrées sur le torse depuis les originaux
       2028 px — pas étirées depuis une vignette — et le bandeau
       « printwearai » du mockup est retiré, sinon il mangeait un
       cinquième de la bulle. Le sujet remplissant déjà l'image, « cover »
       ne coupe rien d'utile et supprime les bandes vides. */
    width: 100%; height: 236px; object-fit: cover; display: block;
    border-radius: 6px; background: var(--bg-soft, #f4f5f7);
  }
  .dir-bulle-nom {
    display: block; text-align: center; padding-top: 4px;
    font-size: 11px; font-weight: 700; color: var(--text-dim);
  }
  /* La pointe : sans elle on ne sait pas de quelle puce parle la bulle
     quand deux voisines sont proches. */
  .dir-bulle::after {
    content: ""; position: absolute; left: 50%; margin-left: -6px;
    border: 6px solid transparent; border-top-color: var(--bg-panneau, #fff);
    bottom: -12px;
  }
  .dir-bulle.dessous::after {
    border-top-color: transparent; border-bottom-color: var(--bg-panneau, #fff);
    bottom: auto; top: -12px;
  }
  /* Mobile : le doigt cache le bas de l'écran, la bulle est un peu plus
     petite pour laisser voir la puce touchée. */
  body.rmob .dir-bulle { width: 216px; }
  body.rmob .dir-bulle img { height: 196px; }
  /* CTA « Créer avec l'IA » en tête du panneau Templates — même dégradé que
     le bouton IA de la barre, pour que les deux se répondent. */
  .ai-cta {
    width:100%; display:flex; align-items:center; gap:10px; text-align:left;
    padding:10px 12px; border-radius:9px; cursor:pointer; border:0;
    background:linear-gradient(135deg,#7c3aed,#2563eb); color:#fff;
    transition: filter .12s, transform .12s;
  }
  .ai-cta:hover { filter:brightness(1.08); }
  .ai-cta:active { transform:scale(.99); }
  .ai-cta-ico { display:grid; place-items:center; flex-shrink:0; }
  .ai-cta-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
  .ai-cta-txt b { font-size:12.5px; font-weight:700; }
  .ai-cta-txt small { font-size:10.5px; opacity:.85; }
  .ai-cta-fleche { flex-shrink:0; font-size:14px; opacity:.9; }

  .ai-history { margin-top:14px; display:flex; flex-direction:column; gap:4px; }
  .ai-thumb {
    display:flex; align-items:center; gap:9px; padding:6px; border-radius:6px;
    cursor:pointer; border:1px solid transparent;
  }
  .ai-thumb:hover { border-color: var(--line); background: var(--bg); }
  .ai-thumb-img { width:30px; height:30px; border-radius:4px; flex-shrink:0; border:1px solid var(--line); }
  .ai-thumb-txt { font-size:11.5px; color:var(--text); flex:1; line-height:1.35; min-width:0; }
  .ai-thumb-txt .desc { color:var(--text-mute); font-size:10.5px; margin-top:1px; }
  .ai-thumb-time { font-family:'JetBrains Mono', monospace; font-size:9.5px; color:var(--text-mute); flex-shrink:0; }

  /* Element prop editor */
  .prop-row { display:flex; align-items:center; gap:10px; padding:5px 0; }
  .prop-row > label { width:70px; color:var(--text-mute); font-size:11.5px; flex-shrink:0; }
  .prop-row .control { flex:1; display:flex; align-items:center; gap:6px; min-width:0; }
  /* TENIR DANS LA COLONNE. Un input range garde sa largeur intrinsèque
     (~130 px) tant qu'on ne lui impose pas de rétrécir : la rangée Position
     en aligne DEUX plus deux lettres dans ~200 px de large — elle débordait
     de la carte, et la carte du panneau. Même chose pour la rangée des
     graisses, cinq boutons d'un bloc : elle passe à la ligne au besoin. */
  .element-card .prop-row > label { width:60px; }
  .element-card .prop-row .control input[type=range] { flex:1 1 36px; min-width:30px; width:auto; }
  .element-card .input, .element-card select.input { width:100%; min-width:0; }
  .element-card .text-style-row { flex-wrap:wrap; }
  .element-card .prop-row .mono { flex-shrink:0; }
  /* === La boîte de réglages d'un élément, réorganisée en sections ===
     Typo / Dimensions / Placement / Style : un titre discret par groupe,
     un filet entre les groupes. Onze rangées d'affilée sans hiérarchie se
     lisaient comme un formulaire d'administration. */
  .ec-sec { border-top:1px solid var(--line-soft); margin-top:9px; padding-top:7px; }
  .ec-sec:first-of-type { border-top:0; margin-top:2px; }
  .ec-titre {
    font-size:9px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
    color:var(--text-mute); margin-bottom:3px;
  }
  /* Les DEUX dimensions en cm de tissu. Le curseur pilote la hauteur des
     lettres — la convention d'impression — mais l'œil juge la largeur du
     mot : il faut écrire les deux. */
  .ec-mesure {
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-size:10.5px; color:var(--text);
    background:var(--bg-elev); border:1px solid var(--line-soft);
    border-radius:6px; padding:4px 9px; margin:2px 0 6px;
    display:flex; align-items:center; gap:4px;
  }
  .ec-mesure .puce {
    font-size:8.5px; font-weight:700; color:var(--text-mute);
    border:1px solid var(--line-strong); border-radius:3px; padding:0 3px;
  }

  /* === Le parcours numéroté === Les quatre premières étapes portent leur
     numéro ; un trait sépare le chemin des outils d'appoint. Un menu de
     huit entrées égales se lit comme un menu — un chemin, comme un chemin. */
  .tool-num {
    width:16px; height:16px; border-radius:8px; flex-shrink:0;
    background:var(--line); color:var(--text-dim);
    font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:700;
    display:grid; place-items:center;
  }
  .tool.active .tool-num { background:var(--text); color:var(--bg); }
  .tools-sep { width:1px; height:18px; background:var(--line-strong); margin:0 5px; flex-shrink:0; }
  body.rmob .tool-num, body.rmob .tools-sep { display:none; }

  /* Une phrase sous une tête de panneau : dire ce que c'est, en une ligne. */
  .hint-panneau {
    font-size:10.5px; color:var(--text-mute); line-height:1.45;
    padding:0 12px 8px;
  }

  /* Une zone recouverte par le design reste CLIQUABLE : on y pose motifs,
     pictos et images. Le badge dit son état — un grisé verrouillé disait
     « cassé » et empêchait d'y déposer quoi que ce soit. */
  .zone-badge {
    font-size:8.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
    color:var(--text-mute); background:var(--bg-elev);
    border:1px solid var(--line-strong); border-radius:3px;
    padding:1px 4px; margin-left:6px; flex-shrink:0;
  }

  /* Barre de gauche : UNE liste hybride — calques du design en tête quand
     un design est appliqué, zones ensuite, zones recouvertes regroupées en
     fin. Le sélecteur Zones/Designs a disparu (bureau comme mobile). */

  /* === Guide de première ouverture === Le projecteur découpe la cible dans
     un voile sombre — un seul élément, l'ombre portée fait le voile. */
  .guide-fond { position:fixed; inset:0; z-index:100000; }
  .guide-fond.sans-spot { background:rgba(15,18,28,.55); }
  .guide-spot {
    position:fixed; border-radius:12px; pointer-events:none;
    box-shadow:0 0 0 9999px rgba(15,18,28,.55);
    transition:all .28s cubic-bezier(.4,0,.2,1);
  }
  .guide-bulle {
    position:fixed; width:300px; z-index:100001;
    background:var(--bg); border-radius:12px; padding:14px 16px;
    box-shadow:0 12px 40px rgba(0,0,0,.28);
    transition:left .28s cubic-bezier(.4,0,.2,1), top .28s cubic-bezier(.4,0,.2,1);
  }
  .guide-titre { font-weight:700; font-size:14px; margin-bottom:6px; }
  .guide-texte { font-size:12.5px; color:var(--text-dim); line-height:1.5; margin-bottom:12px; }
  .guide-pied { display:flex; justify-content:space-between; align-items:center; gap:8px; }
  .guide-pts { display:flex; gap:4px; }
  .guide-pts span { width:6px; height:6px; border-radius:3px; background:var(--line-strong); transition:all .2s; }
  .guide-pts span.on { background:var(--text); width:14px; }

  /* === Mode d'emploi complet (bouton ?) === L'accordéon garde UNE section
     ouverte : onze pavés dépliés feraient un mur de texte. */
  .aide-modal { max-width:560px; width:92vw; display:flex; flex-direction:column; max-height:82vh; }
  .aide-sous { padding:0 20px 10px; color:var(--text-mute); font-size:12px; }
  .aide-corps { overflow-y:auto; padding:0 14px 6px; flex:1; }
  .aide-sec { border:1px solid var(--line); border-radius:9px; margin-bottom:6px; background:var(--bg); }
  .aide-sec.ouverte { border-color:var(--line-strong); }
  .aide-sec-tete {
    width:100%; display:flex; justify-content:space-between; align-items:center;
    padding:9px 12px; font-size:12.5px; font-weight:600; color:var(--text);
    text-align:left; gap:8px;
  }
  .aide-sec-tete:hover { background:var(--bg-soft); border-radius:9px; }
  .aide-lignes { margin:0; padding:2px 14px 10px 26px; }
  .aide-lignes li { font-size:12px; color:var(--text-dim); line-height:1.55; margin-bottom:5px; }
  .aide-pied {
    display:flex; justify-content:space-between; gap:8px;
    padding:12px 20px; border-top:1px solid var(--line);
  }

  .input {
    background:var(--bg); border:1px solid var(--line); border-radius:5px;
    padding:5px 8px; color:var(--text); font:inherit; font-size:12px; width:100%;
    transition: border-color .12s;
  }
  .input:focus { outline:0; border-color:var(--accent); }
  .input.mono { font-family:'JetBrains Mono', monospace; font-size:11.5px; }

  /* Footer stats */
  .stat-row {
    padding: 8px 12px; border-top:1px solid var(--line);
    display:flex; gap:10px; align-items:center; flex-wrap:wrap;
    font-family:'JetBrains Mono', monospace; font-size:10px;
    color:var(--text-mute);
  }
  .stat-row .k { color:var(--text-mute); }
  .stat-row .v { color:var(--text); }

  /* === Order bar ===
     Trois groupes sur une même ligne médiane, séparés d'un filet :
     quantité · prix · actions. Une hauteur commune (--ob-h) pour le pas à
     pas, Devis et Commander ; les montants en chiffres tabulaires, pour
     qu'ils ne dansent pas quand la quantité change. */
  .orderbar { --ob-h: 40px; }
  .ob-section { display:flex; align-items:center; gap:10px; }
  .ob-sep { width:1px; height:28px; background:var(--line); flex:none; }
  .ob-label { font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.07em; font-weight:700; }
  .ob-achat { display:flex; align-items:center; gap:16px; min-width:0; }
  .ob-qty { gap:10px; }
  .orderbar .ob-qty .qty { height:var(--ob-h); padding:3px; border-radius:var(--radius); }
  .orderbar .ob-qty .qty button { width:32px; height:32px; border-radius:var(--radius-sm); }
  .orderbar .ob-qty .qty input { width:48px; font-variant-numeric:tabular-nums; -moz-appearance:textfield; appearance:textfield; }
  .orderbar .ob-qty .qty input::-webkit-outer-spin-button,
  .orderbar .ob-qty .qty input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
  .ob-actions { display:flex; align-items:center; gap:8px; }
  .orderbar .ob-actions .ob-btn { height:var(--ob-h); padding:0 16px; border-radius:var(--radius); font-size:13.5px; gap:8px; white-space:nowrap; background:var(--bg); color:var(--text); }
  .orderbar .ob-actions .ob-btn:hover { background:var(--bg-elev); }
  .ob-btn-label { display:inline-block; color:inherit; }
  /* Commander : le bouton qui compte. Plus haut que les autres, couleur
     chaude qui ne se confond avec rien d'autre dans la barre. */
  /* r524 : la couleur vient du marchand. --ac est posé par applyTenant
     (couleur d'accent du tenant) ; l'orange d'origine reste le repli du
     studio ouvert sans marchand. Le dégradé a disparu : une teinte que le
     marchand choisit ne se mélange pas avec une seconde qu'il n'a pas
     choisie. Fond = couleur principale, texte = couleur d'accent : c'est
     le couple que le marchand règle, on ne le réinvente pas. */
  /* LE LIBELLÉ SE LIT TOUJOURS. Le texte prenait --ac, qui vaut --accent
     tant qu'aucun marchand n'a posé d'accent propre : texte de la couleur
     du fond, « un rectangle bleu vide ». Le texte suit maintenant la
     couleur LISIBLE calculée sur le fond (--brand-on-primary, posée avec
     la couleur principale), blanc par défaut. */
  .ob-btn.primary.ob-cmd,
  .orderbar .ob-actions .ob-btn.primary.ob-cmd {
    height:var(--ob-h, 40px); padding:0 22px; font-size:14.5px; font-weight:800; border-radius:var(--radius, 8px); gap:8px;
    background: var(--accent, #ff6a00); border-color: transparent;
    color: var(--brand-on-primary, #fff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
  }
  .ob-btn.primary.ob-cmd .ob-cmd-label { color: inherit; opacity: 1; visibility: visible; }
  .ob-btn.primary.ob-cmd:hover,
  .orderbar .ob-actions .ob-btn.primary.ob-cmd:hover { background: var(--accent, #ff6a00); filter: brightness(1.08); border-color: transparent; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
  .ob-btn.primary.ob-cmd:disabled { opacity:.6; box-shadow:none; }
  body.rmob .app .orderbar .ob-achat { display:contents; }
  .ob-product { display:flex; align-items:center; gap:10px; }
  .ob-thumb { width:36px; height:36px; border-radius:6px; border:1px solid var(--line); display:grid; place-items:center; background:var(--bg-soft); }
  .ob-prod-name { font-size:13px; font-weight:600; color:var(--text); }
  .ob-prod-sub { font-size:11px; color:var(--text-mute); margin-top:1px; }

  .size-pick { display:flex; gap:1px; background:var(--bg-elev); border:1px solid var(--line); border-radius:6px; padding:2px; }
  .size-pick button {
    min-width:28px; height:24px; padding:0 6px; border-radius:4px;
    font-size:11px; font-weight:600; color:var(--text-dim);
    font-family:'JetBrains Mono', monospace;
  }
  .size-pick button:hover { color: var(--text); }
  .size-pick button.active { background:var(--bg); color:var(--text); box-shadow: 0 0 0 1px var(--accent); }

  .qty { display:flex; align-items:center; background:var(--bg-elev); border:1px solid var(--line); border-radius:6px; padding:2px; gap:1px; }
  .qty button { width:28px; height:28px; border-radius:4px; color:var(--text-mute); display:grid; place-items:center; }
  .qty button:hover { background:var(--bg); color:var(--text); }
  .qty input { width:46px; background:transparent; border:0; outline:0; text-align:center; color:var(--text); font:inherit; font-size:15px; font-weight:700; }

  /* Le prix : à gauche le détail (unitaire × quantité · HT, « Prix
     dégressifs », puis le palier suivant en clair), à droite le total.
     « HT » n'est pas une note de bas de page : c'est la nature du montant,
     écrit à côté du total, assez contrasté pour être lu sans le chercher. */
  .ob-price { display:flex; align-items:center; gap:14px; line-height:1.25; min-width:0; }
  /* Vérif. oct. 2026 : sur un écran de 1280 à 1366 px, le bloc d'achat se
     comprimait et le TOTAL passait sous le bouton « Devis » (« 264,0 »
     tronqué, ou caché en entier à 1280). L'achat garde sa largeur ; c'est
     le nom du produit, à gauche, qui se raccourcit (points de suite). */
  body:not(.rmob) .orderbar .ob-achat { flex-shrink:0; }
  body:not(.rmob) .orderbar .ob-product { min-width:0; overflow:hidden; }
  /* Plus étroit (portable à 125 % : 1024 px utiles) : on retire d'abord les
     étiquettes « Quantité / Taille » et le palier suivant, puis le détail
     du prix unitaire — le total HT et « Commander » restent toujours visibles. */
  @media (max-width:1279px) {
    body:not(.rmob) .orderbar .ob-label,
    body:not(.rmob) .orderbar .ob-palier-suivant { display:none; }
  }
  @media (max-width:1099px) {
    body:not(.rmob) .orderbar .ob-price .unit { display:none; }
  }
  .ob-price .unit { display:flex; flex-direction:column; align-items:flex-end; gap:3px; font-size:12px; color:var(--text-dim); }
  .ob-ligne { display:flex; align-items:center; gap:10px; }
  .ob-detail { white-space:nowrap; font-variant-numeric:tabular-nums; }
  .ob-detail b { color:var(--text-dim); font-weight:700; }
  .ob-forfait { margin-left:6px; }
  .ob-forfait button { border:0; background:none; color:var(--text-mute); cursor:pointer; font-size:12px; padding:0 3px; }
  .ob-palier-suivant { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--text); white-space:nowrap; font-variant-numeric:tabular-nums; }
  .ob-palier-suivant::before { content:""; width:6px; height:6px; border-radius:99px; background:var(--good); flex:none; }
  .ob-price .total { display:flex; align-items:baseline; gap:5px; color:var(--text); font-size:22px; font-weight:800; letter-spacing:-0.01em; white-space:nowrap; font-variant-numeric:tabular-nums; }
  .ob-ht { font-size:11px; font-weight:700; color:var(--text-dim); letter-spacing:.04em; }
  /* « Prix dégressifs » : un lien (i), plus une pastille. La liste des
     paliers s'ouvre juste au-dessus de la barre. */
  .ob-pal { position:relative; display:inline-flex; }
  .ob-paliers { display:inline-flex; align-items:center; gap:4px; border:0; background:none; padding:2px 5px; margin:-2px -5px; border-radius:var(--radius-sm); color:var(--text); font:inherit; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; text-decoration:underline dotted; text-underline-offset:3px; }
  .ob-paliers:hover, .ob-paliers[aria-expanded="true"] { background:var(--accent-soft); }
  .ob-paliers-recap { margin:0 0 0 8px; vertical-align:middle; }
  .ob-pal-pop { position:absolute; bottom:calc(100% + 14px); right:-10px; z-index:90; width:260px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 14px 36px oklch(0.2 0.01 250 / .18); padding:12px 12px 10px; text-align:left; color:var(--text); cursor:default; }
  .ob-pal-titre { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:6px; font-size:13px; font-weight:700; }
  .ob-pal-titre span { font-size:11px; font-weight:500; color:var(--text-mute); }
  .ob-pal-pop table { width:100%; border-collapse:collapse; font-size:12.5px; font-variant-numeric:tabular-nums; }
  .ob-pal-pop td { padding:6px 8px; border-top:1px solid var(--line-soft); color:var(--text-dim); }
  .ob-pal-pop td:last-child { text-align:right; font-weight:700; color:var(--text); }
  .ob-pal-pop tr.on td { background:var(--accent-soft); color:var(--text); font-weight:700; }
  .ob-pal-lien { margin-top:8px; border:0; background:none; padding:0; font:inherit; font-size:12px; font-weight:600; color:var(--text); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
  .ob-pal-lien:hover { color:var(--text-dim); }
  .pwai-prix-masques .orderbar .ob-price + .ob-sep { display:none; }

  .ob-spacer { flex:1; }
  .ob-btn {
    height:34px; padding:0 14px; border-radius:7px;
    display:flex; align-items:center; gap:7px; font-weight:600; font-size:12.5px;
    border:1px solid var(--line);
  }
  .ob-btn:hover { background:var(--bg-elev); }
  .ob-btn.primary { background: var(--accent); color: var(--brand-on-primary, #fff); border-color: var(--accent); }
  .ob-btn.primary:hover { background: oklch(0.40 0.10 255); border-color: oklch(0.40 0.10 255); }

  /* === Mockups panel === */
  .mockup-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap:8px; }
  .mockup-card {
    aspect-ratio: 4/3; border-radius:7px; cursor:pointer;
    border:1px solid var(--line); overflow:hidden; position:relative;
    background:var(--bg);
    transition: border-color .12s;
  }
  .mockup-card:hover { border-color: var(--line-strong); }
  .mockup-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .mockup-card .scene { position:absolute; inset:0; display:grid; place-items:center; }
  .mockup-card .label { position:absolute; bottom:0; left:0; right:0; padding:5px 8px; font-size:10.5px; color:var(--text); background:var(--bg); border-top:1px solid var(--line); font-weight:500; display:flex; justify-content:space-between; align-items:center; }
  .mockup-card.selected .label { color:var(--text); border-color:var(--accent-line); }
  .mockup-card .badge { font-size:9.5px; color:var(--text-mute); font-family:'JetBrains Mono', monospace; }

  /* Mockup scene styles applied to viewer */
  .center.mode-studio { background: linear-gradient(180deg, oklch(0.99 0.002 250), oklch(0.94 0.003 250)); }
  .center.mode-hanger .hanger-prop { display:block; }
  .center.mode-flat .jersey-3d { transform: rotate(8deg) scale(0.9) !important; transition: transform .5s; }
  .center.mode-flat .viewer-floor { display:none; }
  .center.mode-lifestyle { background: linear-gradient(180deg, oklch(0.93 0.012 235), oklch(0.97 0.005 235)); }
  .center.mode-darkbg { background: oklch(0.18 0.008 250); }
  .center.mode-darkbg .viewer-grid { background-image: linear-gradient(oklch(1 0 0 / 0.04) 1px, transparent 1px), linear-gradient(90deg, oklch(1 0 0 / 0.04) 1px, transparent 1px); }
  .center.mode-darkbg .face-badge, .center.mode-darkbg .viewer-readout { color: oklch(0.7 0.005 250); background: oklch(0.22 0.008 250); border-color: oklch(0.28 0.008 250); }

  .hanger-prop { display:none; position:absolute; left:50%; top:14%; transform:translateX(-50%); }
  .hanger-prop svg { color: var(--text-mute); }

/* ════════════════════════════════════════════════════════
   MAPPING : nos classes legacy → composants Standalone
   Applique les styles ci-dessus à notre structure existante.
════════════════════════════════════════════════════════ */

/* === Palette de couleurs (.pal .palc) → .swatches .sw === */
.pal{display:grid!important;grid-template-columns:repeat(8,1fr)!important;gap:5px!important;padding:0!important}
.palc{
  aspect-ratio:1!important;border-radius:5px!important;
  border:1px solid oklch(0 0 0 / 0.08)!important;cursor:pointer;position:relative;
  transition:transform .1s!important;box-shadow:none!important;
}
.palc:hover{transform:scale(1.06)!important;border-color:var(--line-strong)!important}

/* === Color picker row (.cprow) → .hex-row === */
.cprow{
  display:flex!important;align-items:center!important;gap:8px!important;
  background:var(--bg)!important;border:1px solid var(--line)!important;
  border-radius:6px!important;padding:6px 10px!important;cursor:pointer;
  transition:border-color .12s!important;box-shadow:none!important;
}
.cprow:hover{border-color:var(--line-strong)!important;background:var(--bg)!important;transform:none!important;box-shadow:none!important}
.cpsw{
  width:18px!important;height:18px!important;border-radius:4px!important;
  border:1px solid var(--line)!important;flex-shrink:0!important;box-shadow:none!important;
}
.cptxt{flex:1;min-width:0}
.cplbl{
  font-family:var(--mono)!important;font-size:10px!important;
  letter-spacing:.06em!important;text-transform:uppercase!important;
  color:var(--text-mute)!important;font-weight:600!important;margin-bottom:1px!important;
}
.cpval{
  font-family:var(--mono)!important;font-size:11.5px!important;
  color:var(--text)!important;font-weight:500!important;
}

/* === Pattern card (.pcard) → .pat === */
.pg{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:6px!important}
.pcard{
  aspect-ratio:1!important;border-radius:6px!important;cursor:pointer;
  border:1px solid var(--line)!important;overflow:hidden;position:relative;
  background:var(--bg)!important;transition:border-color .12s!important;
  box-shadow:none!important;
}
.pcard:hover{border-color:var(--line-strong)!important;transform:none!important;box-shadow:none!important}
.pcard.on{border-color:var(--accent)!important;box-shadow:0 0 0 1px var(--accent)!important}
.plbl{
  position:absolute!important;bottom:0;left:0;right:0;
  padding:3px 5px!important;font-size:9.5px!important;font-weight:500!important;
  color:var(--text-dim)!important;background:var(--bg)!important;
  border-top:1px solid var(--line)!important;backdrop-filter:none!important;
}
.pcard.on .plbl{color:var(--text)!important;border-color:var(--accent-line)!important}

/* === Element list (.eli) → .player-row / .team === */
.eli{
  display:flex!important;align-items:center!important;gap:10px!important;
  padding:7px 8px!important;border-radius:6px!important;
  background:var(--bg)!important;border:1px solid var(--line)!important;cursor:pointer;
  transition:border-color .12s!important;box-shadow:none!important;margin-bottom:4px!important;
}
.eli:hover:not(.on){border-color:var(--line-strong)!important;background:var(--bg)!important;transform:none!important;box-shadow:none!important}
.eli.on{
  border-color:var(--accent)!important;background:var(--accent-soft)!important;
  box-shadow:none!important;
}
.en{font-size:12.5px!important;font-weight:500!important;color:var(--text)!important;letter-spacing:0!important}
.ez{
  font-family:var(--mono)!important;font-size:9.5px!important;
  color:var(--text-mute)!important;background:var(--bg-soft)!important;
  padding:1px 5px!important;border-radius:3px!important;font-weight:500!important;
  text-transform:none!important;letter-spacing:0!important;
}
.ed{
  width:22px!important;height:22px!important;
  background:transparent!important;border-radius:5px!important;
  display:grid;place-items:center;color:var(--text-mute)!important;
  opacity:0;transition:opacity .1s,color .1s,background .1s;
}
.eli:hover .ed{opacity:.7}
.ed:hover{opacity:1!important;color:var(--danger)!important;background:var(--bg-soft)!important}

/* === Section labels (.sl) === */
.sl{
  font-family:var(--mono)!important;font-size:11px!important;font-weight:600!important;
  letter-spacing:.06em!important;text-transform:uppercase!important;
  color:var(--text-mute)!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  margin:0 0 10px!important;padding:0!important;gap:0!important;
}
.sl::before,.sl::after{display:none!important}

/* === Sliders globaux === */
input[type=range]{
  -webkit-appearance:none!important;appearance:none!important;
  background:transparent!important;height:16px!important;
}
input[type=range]::-webkit-slider-runnable-track{
  height:3px!important;background:var(--line)!important;border-radius:2px!important;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none!important;appearance:none!important;
  width:13px!important;height:13px!important;border-radius:50%!important;
  background:var(--bg)!important;border:1px solid var(--line-strong)!important;
  margin-top:-5px!important;box-shadow:0 1px 2px oklch(0 0 0 / 0.1)!important;
  cursor:pointer;
}
input[type=range]::-webkit-slider-thumb:hover{border-color:var(--accent)!important;transform:none!important}

/* === Inputs === */
.if,#pantoneSearch,#rcApiKey,#rctxt,#elHcm,#elWcm,#svgRotVal,#s2RotV,#gradAngleV{
  background:var(--bg)!important;border:1px solid var(--line)!important;
  border-radius:5px!important;padding:5px 8px!important;
  color:var(--text)!important;font-family:var(--font)!important;
  font-size:12px!important;outline:0!important;transition:border-color .12s!important;
  box-shadow:none!important;
}
.if:focus,#pantoneSearch:focus,#rcApiKey:focus,#rctxt:focus,#elHcm:focus,#elWcm:focus,#svgRotVal:focus,#s2RotV:focus,#gradAngleV:focus{
  border-color:var(--accent)!important;box-shadow:none!important;outline:0!important;
}

/* === Boutons génériques (.btn) === */
.btn{
  display:inline-flex!important;align-items:center;justify-content:center;gap:6px;
  height:30px!important;padding:0 11px!important;border-radius:6px!important;
  background:var(--bg)!important;color:var(--text)!important;
  border:1px solid var(--line)!important;
  font-family:var(--font)!important;font-size:12.5px!important;font-weight:500!important;
  letter-spacing:-.01em!important;cursor:pointer;
  transition:border-color .12s,background .12s!important;
  box-shadow:none!important;width:auto!important;margin-top:0!important;
}
.btn:hover{
  background:var(--bg-elev)!important;border-color:var(--line-strong)!important;
  transform:none!important;box-shadow:none!important;
}
.btn.ba{
  background:var(--text)!important;color:var(--bg)!important;border-color:var(--text)!important;
}
.btn.ba:hover{
  background:oklch(0.32 0.008 250)!important;border-color:oklch(0.32 0.008 250)!important;
}
.btn.bs{background:transparent!important;border:1px solid var(--line)!important;color:var(--text-dim)!important}
.btn.bs:hover{background:var(--bg-elev)!important;color:var(--text)!important}

/* === Bouton "Couleur précise" (#btnColorPrecise) === */
#btnColorPrecise{
  display:flex!important;align-items:center;justify-content:center;gap:8px;
  width:100%!important;height:32px!important;padding:0 12px!important;
  background:var(--text)!important;color:var(--bg)!important;
  border:1px solid var(--text)!important;border-radius:7px!important;
  font-family:var(--font)!important;font-size:12.5px!important;font-weight:600!important;
  letter-spacing:-.01em!important;cursor:pointer;
  transition:background .12s!important;box-shadow:none!important;
}
#btnColorPrecise:hover{
  background:oklch(0.32 0.008 250)!important;border-color:oklch(0.32 0.008 250)!important;
  transform:none!important;
}
.cp-precise-hint{
  margin-top:6px!important;text-align:center!important;
  font-family:var(--mono)!important;font-size:10px!important;
  color:var(--text-mute)!important;font-weight:500!important;
  letter-spacing:.04em!important;
}

/* === Order bar (#pricingPanel) → .orderbar === */
#pricingPanel{
  grid-area:order!important;
  border-top:1px solid var(--line)!important;
  background:var(--bg)!important;
  display:flex!important;align-items:center;gap:16px;padding:0 18px!important;
  height:56px!important;
}
.pp-card{
  display:flex!important;align-items:center;gap:16px;width:100%;height:100%;
  background:transparent!important;border:0!important;padding:0!important;
  flex-wrap:nowrap;overflow:hidden;box-shadow:none!important;
}
.pp-card > * + *{border-left:1px solid var(--line)!important;padding-left:16px!important}
.pp-section-qty,.pp-section-price,.pp-section-btns,.pp-section-order{
  display:flex!important;align-items:center;gap:10px;padding:0!important;height:100%;
}
.pp-section-qty .pp-label,.pp-section-price .pp-label{
  font-family:var(--mono)!important;font-size:10px!important;
  text-transform:uppercase!important;letter-spacing:.07em!important;
  color:var(--text-mute)!important;font-weight:600!important;margin:0!important;
}
.pp-price{
  font-family:var(--font)!important;font-size:16px!important;font-weight:700!important;
  color:var(--text)!important;letter-spacing:-.01em!important;
}
.pp-delivery{font-size:11px!important;color:var(--text-mute)!important}
.pp-delivery b{color:var(--text)!important;font-weight:600!important}
.pp-section-btns{margin-left:auto!important;border-left:0!important;padding-left:0!important}
.pp-btn{
  height:34px!important;padding:0 12px!important;border-radius:6px!important;
  background:var(--bg)!important;color:var(--text)!important;
  border:1px solid var(--line)!important;
  font-family:var(--font)!important;font-size:12.5px!important;font-weight:500!important;
  display:flex!important;align-items:center;gap:6px;
  transition:background .12s,border-color .12s!important;
}
.pp-btn:hover{background:var(--bg-elev)!important;border-color:var(--line-strong)!important;transform:none!important;color:var(--text)!important;box-shadow:none!important}
.pp-section-order{
  background:transparent!important;padding:0!important;border-left:1px solid var(--line)!important;padding-left:16px!important;
}
.pp-section-order:hover{filter:none!important;background:transparent!important}
.pp-btn-primary,.pp-btn-primary:hover{
  background:var(--accent)!important;color:#fff!important;
  border:1px solid var(--accent)!important;height:34px!important;
  padding:0 14px!important;border-radius:7px!important;
  font-size:12.5px!important;font-weight:600!important;
  display:flex!important;align-items:center;gap:7px;letter-spacing:-.01em!important;
}
.pp-btn-primary:hover{background:oklch(0.40 0.10 255)!important;border-color:oklch(0.40 0.10 255)!important}


/* ════════════════════════════════════════════════════════════════
   MOBILE — version simple, accessible, épurée.
   Canvas + maillot toujours visibles en haut. Zones & designs en
   bande horizontale scrollable. Outils en étapes (onglets icônes).
   ════════════════════════════════════════════════════════════════ */
/* Activé par body.rmob (posé par le script mobile de configurateur.html).
   Modèle : barres fixes + bottom-sheet. Le maillot/canvas reste TOUJOURS
   visible — le panneau outil s'ouvre PAR-DESSUS le bas, sans jamais
   recouvrir entièrement le maillot (il se recentre dans la bande libre). */
body.rmob{
  /* --rm-order à 58px : UNE rangée (quantité · total · Commander). Le
     détail du prix déplié fait grandir la barre vers le haut sans
     toucher cette réserve ; le reste vit dans le récapitulatif. */
  --rm-top:46px; --rm-tools:56px; --rm-order:58px; --rm-zones:50px;
  --rm-safe: env(safe-area-inset-bottom, 0px);
  --rm-safe-top: env(safe-area-inset-top, 0px);
  /* Barres TOUJOURS présentes en bas : onglets (tools) + zones. L'orderbar
     (prix + Commander) se place AU-DESSUS d'elles et se masque dès qu'un
     onglet (bottom-sheet) est ouvert. */
  --rm-bars: calc(var(--rm-tools) + var(--rm-zones) + var(--rm-safe));
  --rm-reserved: calc(var(--rm-bars) + var(--rm-order));
  /* Hauteur du bottom-sheet quand ouvert. Adaptative : on plafonne à 46vh
     MAIS on garantit toujours --rm-canvas-min de maillot visible au-dessus
     (sinon en paysage / petit écran le sheet mangerait tout le canvas).
     ⚠ --rm-sheet-open DOIT rester défini : plusieurs règles en dépendent
     (.center, .right, #rmobClose). Sans ça le sheet ne s'ouvre plus.
     Sheet ouvert → orderbar masquée → l'espace dispo est --rm-bars. */
  --rm-canvas-min:140px;
  --rm-sheet:46vh;
  --rm-sheet-open: min(var(--rm-sheet),
    calc(100dvh - var(--rm-top) - var(--rm-safe-top) - var(--rm-bars) - var(--rm-canvas-min)));
}
/* Sheet agrandi (poignée tirée vers le haut / tap) : prend toute la place
   dispo en laissant juste un aperçu du maillot. */
body.rmob.rsheet-max{
  --rm-canvas-min:96px;
  --rm-sheet-open: calc(100dvh - var(--rm-top) - var(--rm-safe-top) - var(--rm-bars) - var(--rm-canvas-min));
}
body.rmob #root > .app{ display:block !important; }

/* ── TOPBAR ── */
body.rmob .app .topbar{
  position:fixed; top:0; left:0; right:0;
  height:calc(var(--rm-top) + var(--rm-safe-top)); padding-top:var(--rm-safe-top);
  z-index:60; padding-left:10px; padding-right:10px; gap:8px;
  /* ⚠ PAS de backdrop-filter ici : il créerait un containing-block et
     piégerait .tools (enfant) dont le position:fixed;bottom:0 doit se
     référer à l'écran (barre d'onglets en bas), pas à la topbar. */
  background:#fff; border-bottom:1px solid var(--line);
}
body.rmob .app .topbar .brand{ margin:0; padding:0; border:0; }
body.rmob .app .topbar .top-meta,
body.rmob .app .topbar .topbar-spacer{ display:none !important; }
/* r664 : LES LIBELLÉS NE SONT PLUS EFFACÉS. « Pourquoi tu l'as enlevé,
   je ne t'ai jamais demandé. » r653 avait masqué .lbl pour faire tenir
   la ligne dans 390 px : un bouton sans mot n'est pas un bouton plus
   petit, c'est un bouton qu'on ne reconnaît plus. Les boutons se
   replient maintenant dans un menu, avec leurs mots. */
/* Contrôles viewer (undo/redo/recentrer) calés à droite de la topbar. */

/* ── ÉTAPES (outils) → barre d'onglets en bas ── */
body.rmob .app .topbar .tools{
  position:fixed; left:0; right:0; bottom:0; margin:0;
  height:calc(var(--rm-tools) + var(--rm-safe)); z-index:64;
  display:flex; align-items:stretch; gap:0;
  background:rgba(255,255,255,.97); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  /* Sur mobile, .tools n'est plus une pastille dans la barre du haut mais la
     barre d'onglets collée en bas : elle reprend donc son fond et ses angles
     droits. Sans ça, le rayon de la pastille arrondirait ses deux coins. */
  border-radius:0;
  padding:0 4px var(--rm-safe);
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
body.rmob .app .topbar .tools::-webkit-scrollbar{ display:none; }
body.rmob .app .topbar .tools .tool{
  position:relative; flex:0 0 auto; min-width:62px; height:auto; padding:7px 8px;
  flex-direction:column; gap:3px; justify-content:center; border-radius:0;
  color:var(--text-mute); font-size:9.5px; font-weight:600;
}
body.rmob .app .topbar .tools .tool .lbl{ display:block !important; white-space:nowrap; font-size:9.5px; }
body.rmob .app .topbar .tools .tool .ico{ width:19px; height:19px; opacity:1; }
body.rmob .app .topbar .tools .tool .ico-etape{ display:flex; }
body.rmob .app .topbar .tools .tool .ico-etape .ico{ width:19px; height:19px; }
/* L'IA EN AVANT : la barre d'onglets défile et l'IA, dernier onglet,
   n'existait pas à l'écran tant qu'on ne défilait pas. ÉPINGLÉE au bord
   droit (sticky dans le défilement horizontal), dégradé signature, un
   voile blanc derrière pour que les onglets glissent dessous proprement. */
body.rmob .app .topbar .tools .tool[title="IA"],
body.rmob .app .topbar .tools .tool[title="AI"]{
  position:sticky; right:0; z-index:3;
  border-radius:12px; padding:4px 10px;
  box-shadow:-8px 0 10px -6px rgba(0,0,0,.18), 0 0 0 3px #fff;
}

/* ── L'IA sur mobile : la consigne d'abord, Générer toujours sous le pouce ──
   Le panneau IA est long (consigne, guidage, définition, rendu, historique) :
   sur téléphone, le bouton Générer se trouvait à un ou deux écrans de
   défilement de la zone de saisie. Il est désormais COLLÉ en bas du
   panneau, et le bandeau de compte est en tête — on sait avant d'écrire
   s'il faut se connecter. */
body.rmob .app .right .rp-solde{ padding-top:10px; padding-bottom:0; }
body.rmob .app .right .ai-gen-btn{
  position:sticky; bottom:0; z-index:4;
  height:46px; font-size:14px; margin-top:12px;
  border-radius:10px;
  background:linear-gradient(135deg,#7c3aed,#2563eb); color:#fff;
  box-shadow:0 -10px 16px -8px rgba(0,0,0,.16), 0 2px 10px rgba(99,102,241,.35);
}
body.rmob .app .right .ai-gen-btn:disabled{ background:var(--line-strong); box-shadow:none; }
/* La zone de saisie mérite la place : c'est LE geste du panneau. */
body.rmob .app .right textarea{ min-height:96px; font-size:15px; line-height:1.45; }
body.rmob .app .topbar .tools .tool.active{ color:var(--text); background:transparent; }
body.rmob .app .topbar .tools .tool.active::after{
  content:''; position:absolute; top:0; left:14%; right:14%; height:2.5px;
  background:var(--accent); border-radius:0 0 3px 3px;
}
/* L'onglet IA garde son dégradé dans la barre du bas aussi. Il devient un
   petit bouton posé dans la barre (marge + rayon), et le trait d'onglet
   actif est retiré : un bloc en dégradé n'a pas besoin d'un soulignement
   pour se dire actif. */
body.rmob .app .topbar .tools .tool[title="IA"],
body.rmob .app .topbar .tools .tool[title="AI"]{
  background:linear-gradient(135deg,#7c3aed,#2563eb);
  color:#fff; border-radius:10px; margin:6px 3px;
}
body.rmob .app .topbar .tools .tool[title="IA"].active,
body.rmob .app .topbar .tools .tool[title="AI"].active{
  color:#fff; background:linear-gradient(135deg,#7c3aed,#2563eb);
}
body.rmob .app .topbar .tools .tool[title="IA"].active::after,
body.rmob .app .topbar .tools .tool[title="AI"].active::after{ display:none; }

/* ── CANVAS / MAILLOT — toujours visible ── */
body.rmob .app .center{
  position:fixed; left:0; right:0;
  top:calc(var(--rm-top) + var(--rm-safe-top)); bottom:var(--rm-reserved);
  z-index:10; background:var(--bg);
  transition:bottom .3s cubic-bezier(.32,.72,0,1);
}
body.rmob.rsheet .app .center{ bottom:calc(var(--rm-bars) + var(--rm-sheet-open)); }
/* #vw (canvas 3D déplacé dans #root par bridge.js) : neutralise la règle
   plein-écran de pwai-mobile.css (body.is-mobile #vw) → reste ancré dans
   .center, qui pilote sa taille (et donc la visibilité permanente du maillot). */
body.rmob #root .center #vw{
  position:absolute !important; inset:0 !important;
  top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
  width:100% !important; height:100% !important; z-index:1 !important;
}
/* Le glissement 1 doigt doit piloter la rotation/déplacement (via le pont
   touch→souris de pwai-mobile.js), pas le scroll/zoom du navigateur. */
body.rmob #root .center #vw,
body.rmob #root .center #vw canvas,
body.rmob #cvEl{ touch-action:none; }
body.rmob .app .center .viewer-readout,
body.rmob .app .center .hanger-prop{ display:none !important; }
body.rmob .app .center .viewer-top{ top:8px; left:8px; right:8px; }
body.rmob .app .center .vbtn{ height:30px; min-width:30px; }
/* LE RAIL COMMENCE SOUS L'EN-TÊTE, pas au milieu du vêtement.
   À 46 % de la hauteur il flottait en travers du maillot, juste là où
   on veut poser le doigt pour le tourner. Collé en haut de la zone de
   vue — donc immédiatement sous la barre du haut — il laisse tout le
   centre libre et reste à portée du pouce.
   `transform-origin` passe en haut à droite : sinon la réduction de
   8 % le décalerait vers le bas de son ancrage. */
body.rmob .app .center .rotate-rail{ left:auto; right:8px; top:8px; padding:2px; transform:scale(.92); transform-origin:right top; }

/* ── BARRE ZONES + DESIGNS — scroll horizontal, toujours visible ──
   Juste au-dessus des onglets (l'orderbar se place encore au-dessus). */
body.rmob .app .left{
  position:fixed; left:0; right:0;
  bottom:calc(var(--rm-tools) + var(--rm-safe));
  height:var(--rm-zones); z-index:62;
  border:0; border-top:1px solid var(--line);
  background:rgba(255,255,255,.96); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  display:block; overflow:hidden;
}
body.rmob .app .left .panel-head,
body.rmob .app .left .zone-toolbar,
body.rmob .app .left .stat-row,
/* La phrase d'explication AUSSI : la barre fait 50 px et masque ce qui
   dépasse — le texte les prenait à lui seul et repoussait les puces de
   zones hors du cadre. On voyait la consigne « cliquez une pièce », pas
   les pièces. Elle reste dans le panneau desktop, où il y a la place. */
body.rmob .app .left .hint-panneau{ display:none !important; }
body.rmob .app .left .panel-body{
  display:flex !important; flex-direction:row; align-items:center; gap:6px;
  height:var(--rm-zones); padding:0 8px; margin:0;
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
body.rmob .app .left .panel-body::-webkit-scrollbar{ display:none; }
/* Section "Designs" : wrapper inline-styled (non-.zone) → aplati en ligne */
body.rmob .app .left .panel-body > div:not(.zone){
  border:0 !important; margin:0 !important; padding:0 !important;
  display:flex !important; flex-direction:row !important; align-items:center; gap:6px;
  flex:0 0 auto;
}
body.rmob .app .left .panel-body > div:not(.zone) > div:first-child{
  padding:0 4px !important; font-size:9px !important; white-space:nowrap; flex:0 0 auto;
}
body.rmob .app .left .zone{ flex:0 0 auto; padding:0; }
body.rmob .app .left .zone-head{
  width:auto; padding:7px 11px; gap:7px; white-space:nowrap;
  border:1px solid var(--line); border-radius:999px; background:#fff;
}
body.rmob .app .left .zone-head.selected{ border-color:var(--accent); background:var(--accent-soft); }
body.rmob .app .left .zone-name{ font-size:12px !important; max-width:none; }
body.rmob .app .left .zone-items,
body.rmob .app .left .zone-count,
body.rmob .app .left .zone-head .zone-item-vis{ display:none !important; }

/* ── BARRE COMMANDE — compacte (prix + Commander) ──
   Placée AU-DESSUS des barres onglets + zones, et masquée dès qu'un
   onglet (bottom-sheet) est ouvert (le sheet prend sa place). */
/* La barre commerciale mobile en DEUX rangées : quantité + prix en haut,
   Devis + Commander côte à côte en bas. La hauteur suit le contenu
   (min-height) — la version à hauteur figée débordait sur téléphone
   réel : pastille par-dessus le canvas, total par-dessus les onglets.
   Et Devis était masqué (.ob-btn:not(.primary)) : la moitié du flux
   commercial n'existait pas sur mobile. */
body.rmob .app .orderbar{
  position:fixed; left:0; right:0;
  bottom:var(--rm-bars);
  height:auto; min-height:var(--rm-order); z-index:63;
  display:flex; flex-wrap:wrap; align-items:center; align-content:center;
  gap:6px 10px; padding:7px 10px calc(7px + 2px);
  background:#fff; border-top:1px solid var(--line);
  transition:opacity .2s ease;
}
/* LE CONTENU PASSE AU-DESSUS DE LA BARRE, IL NE LA FAIT PAS
   DISPARAÎTRE. Effacer la barre laissait son emplacement vide sous le
   panneau : de la place perdue, et le prix perdu de vue. Le panneau est
   déjà au-dessus d'elle dans l'empilement (z-index 70 contre 63) — il
   suffit de ne plus l'effacer. Là où le panneau s'arrête, la barre
   réapparaît d'elle-même ; là où il la recouvre, elle disparaît sous
   lui, sans laisser de trou. */
body.rmob.rsheet .app .orderbar{
  opacity:1; pointer-events:auto; visibility:visible;
}
/* TÉLÉPHONE : une barre compacte, collée en bas — quantité · total ·
   Commander. Taper le total déplie une rangée au-dessus (unitaire, palier
   suivant, « Prix dégressifs ») et fait apparaître Devis à côté de
   Commander. Commander ouvre d'abord le récapitulatif, qui porte aussi
   « Demander un devis » : le devis reste toujours à un geste. */
body.rmob .app .orderbar{ --ob-h:40px; }
body.rmob .app .orderbar .ob-product,
body.rmob .app .orderbar .ob-sep,
body.rmob .app .orderbar .ob-spacer{ display:none !important; }
body.rmob .app .orderbar .ob-actions{ display:contents; }
body.rmob .app .orderbar .ob-qty{ order:2; display:flex !important; gap:0; flex:0 0 auto; }
body.rmob .app .orderbar .ob-qty .ob-label{ display:none; }
body.rmob .app .orderbar .ob-price{ order:3; flex:1 1 0; min-width:0; flex-direction:column; align-items:flex-start; gap:0; cursor:pointer; }
body.rmob .app .orderbar .ob-price .total{ font-size:17px; align-items:center; gap:4px; }
body.rmob .app .orderbar .ob-price .unit{ display:none; }
/* Le bouton Devis reste dans le DOM (display:none) : le récapitulatif le
   re-clique programmatiquement. */
body.rmob .app .orderbar .ob-btn.primary{ order:5; flex:0 0 auto; min-width:108px; height:var(--ob-h); padding:0 14px; justify-content:center; display:flex !important; }
body.rmob .app .orderbar .ob-btn:not(.primary){ display:none !important; }
/* Déplié : le détail du prix prend toute la première rangée, le total à
   droite ; quantité, Devis et Commander passent dessous. */
body.rmob .app .orderbar.ob-ouverte .ob-price{ order:1; flex:1 1 100%; flex-direction:row; align-items:center; justify-content:space-between; gap:10px; padding-bottom:7px; border-bottom:1px solid var(--line-soft); }
body.rmob .app .orderbar.ob-ouverte .ob-price .unit{ display:flex; align-items:flex-start; min-width:0; }
body.rmob .app .orderbar.ob-ouverte .ob-ligne{ flex-wrap:wrap; gap:3px 10px; }
body.rmob .app .orderbar.ob-ouverte .ob-detail{ white-space:normal; }
body.rmob .app .orderbar.ob-ouverte .ob-btn:not(.primary){
  display:flex !important; order:4; flex:1 1 auto; height:var(--ob-h); justify-content:center;
}
body.rmob .app .orderbar.ob-ouverte .ob-btn.primary{ flex:1 1 auto; }
/* Les paliers, sur téléphone : accrochés à la barre, pleine largeur. */
body.rmob .app .orderbar .ob-pal{ position:static; }
body.rmob .app .orderbar .ob-pal-pop{ left:10px; right:10px; width:auto; bottom:calc(100% + 8px); }
.ob-chev{ display:none; }
body.rmob .ob-chev{
  display:inline-flex; margin-left:6px; vertical-align:1px;
  transform:rotate(-90deg); transition:transform .15s; color:var(--text-mute);
}
body.rmob .orderbar.ob-ouverte .ob-chev{ transform:rotate(90deg); }

/* Le récapitulatif : en mobile c'est un BOTTOM-SHEET pleine largeur —
   « un truc en plus grand » qui monte du bas, pas une petite boîte. */
.recap-ligne{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 0; border-bottom:1px solid var(--line); font-size:13.5px;
}
.recap-ligne > span:first-child{ color:var(--text-dim); flex-shrink:0; }
.recap-ligne b{ text-align:right; font-weight:650; min-width:0; }
.recap-ligne.recap-total{ border-bottom:0; }
.recap-ligne.recap-total b{ font-size:19px; letter-spacing:-0.01em; }
body.rmob .recap-fond{ align-items:flex-end; }
/* Récap ouvert → la barre s'efface : ses infos sont DANS le panneau,
   la voir dépasser dessous ferait un doublon. */
body.rmob .app.recap-ouvert .orderbar{ visibility:hidden; }
body.rmob .recap-sheet{
  width:100%; max-width:none; margin:0;
  border-radius:16px 16px 0 0;
  max-height:82dvh; overflow-y:auto;
}
body.rmob .recap-sheet .modal-pied .ob-btn{ flex:1; height:42px; justify-content:center; }
/* ── UN SEUL bandeau fixe ─────────────────────────────────────────
   Les zones ne sont un bandeau permanent nulle part ailleurs que dans
   l'outil Couleur : partout ailleurs on tape la pièce SUR le maillot.
   Hors Couleur, --rm-zones passe à 0 et tout le layout (canvas, sheet,
   barres) récupère la place tout seul — c'est la variable qui commande.

   Et pendant la MANIPULATION de la 3D (classe .manip3d posée au
   pointerdown sur le canvas), la barre prix se réduit au total et au
   bouton Commander : l'écran est au maillot pendant le geste. Le
   contenu se replie mais la hauteur ne bouge pas — un canvas qui se
   redimensionne en plein glissement, c'est une image qui saute. */
/* Le même retrait posé sur le BODY, pour les éléments qui vivent hors de
   .app — la poignée du panneau (#rmobClose) y est attachée et lisait
   encore --rm-zones à 50 px. */
body.rmob:not(.outil-color){
  --rm-zones: 0px;
  --rm-bars: calc(var(--rm-tools) + var(--rm-zones) + var(--rm-safe));
  --rm-reserved: calc(var(--rm-bars) + var(--rm-order));
  --rm-sheet-open: min(var(--rm-sheet),
    calc(100dvh - var(--rm-top) - var(--rm-safe-top) - var(--rm-bars) - var(--rm-canvas-min)));
}
body.rmob.rsheet-max:not(.outil-color){
  --rm-sheet-open: calc(100dvh - var(--rm-top) - var(--rm-safe-top) - var(--rm-bars) - var(--rm-canvas-min));
}
body.rmob .app:not(.tool-color){
  --rm-zones: 0px;
  /* Les dérivées DOIVENT être redéfinies ici : une variable calc() fige
     ses var() là où elle est définie (body.rmob) — changer --rm-zones
     plus bas ne la recalcule pas toute seule. */
  --rm-bars: calc(var(--rm-tools) + var(--rm-zones) + var(--rm-safe));
  --rm-reserved: calc(var(--rm-bars) + var(--rm-order));
  --rm-sheet-open: min(var(--rm-sheet),
    calc(100dvh - var(--rm-top) - var(--rm-safe-top) - var(--rm-bars) - var(--rm-canvas-min)));
}
body.rmob.rsheet-max .app:not(.tool-color){
  --rm-sheet-open: calc(100dvh - var(--rm-top) - var(--rm-safe-top) - var(--rm-bars) - var(--rm-canvas-min));
}
body.rmob .app:not(.tool-color) .left{ display:none; }
body.rmob .app.manip3d .orderbar .ob-product,
body.rmob .app.manip3d .orderbar .ob-section,
body.rmob .app.manip3d .orderbar .ob-sep,
body.rmob .app.manip3d .orderbar .qty,
body.rmob .app.manip3d .orderbar .ob-price .unit,
body.rmob .app.manip3d .orderbar .ob-btn:not(.primary){ display:none !important; }
/* Replié : une seule rangée compacte (total + Commander). */
body.rmob .app.manip3d .orderbar{ min-height:0; }
body.rmob .app.manip3d .orderbar .ob-price{ order:1; margin-left:0; }
body.rmob .app.manip3d .orderbar .ob-btn.primary{ flex:1 1 auto; }

/* Pas à pas compact mais tactile, à la hauteur des boutons. */
body.rmob .app .orderbar .ob-qty .qty{ height:var(--ob-h); padding:2px; }
body.rmob .app .orderbar .ob-qty .qty button{ width:28px; height:34px; }
body.rmob .app .orderbar .ob-qty .qty input{ width:28px; font-size:15px; }
body.rmob .app .orderbar .ob-price .ob-ht{ font-size:10px; }
body.rmob .app .orderbar .ob-price .unit{ font-size:12px; line-height:1.35; }

/* ── BOTTOM SHEET (panneau outil) — au-dessus des zones, à la place de
   l'orderbar masquée (donc ancré sur --rm-bars). ── */
body.rmob .app .right{
  position:fixed; left:0; right:0; bottom:var(--rm-bars);
  /* z-index AU-DESSUS des barres (zones 62 / order 63 / tools 64) : sinon
     les popups rendus DANS le sheet (createPortal absent) sont coincés dans
     son contexte d'empilement et peignent sous les barres. */
  height:0; max-height:var(--rm-sheet-open); z-index:70;
  border:0; border-radius:20px 20px 0 0; overflow:hidden;
  background:#fff; box-shadow:0 -12px 40px rgba(0,0,0,.16);
  transition:height .3s cubic-bezier(.32,.72,0,1);
}
body.rmob.rsheet .app .right{ height:var(--rm-sheet-open); }
body.rmob .app .right .panel-body{
  height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:14px 14px 20px;
}

/* ── CONTENU DES ONGLETS — light & simple ──
   Chaque panneau garde son contenu desktop mais : le sélecteur de mode
   (.seg) devient l'ÉTAPE collée en haut du sheet, les sections sont
   aérées, les cibles tactiles agrandies, les grilles denses allégées,
   et les nuanciers contextuels passent en strip horizontal. */
body.rmob .app .right .seg{
  position:sticky; top:-14px; z-index:6;
  margin:-14px -14px 12px; padding:9px 14px;
  border:0; border-bottom:1px solid var(--line); border-radius:0;
  background:#fff; gap:6px;
}
body.rmob .app .right .seg button{ height:38px; font-size:13px; border-radius:8px; font-weight:600; }
body.rmob .app .right .rp-section{ padding:12px 2px; }
body.rmob .app .right .rp-label{ font-size:11px; }
/* Nuanciers contextuels (couleurs récentes/famille) en strip horizontal */
body.rmob .app .right .swatches{
  display:flex !important; flex-wrap:nowrap; overflow-x:auto;
  gap:8px !important; padding-bottom:6px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
body.rmob .app .right .swatches::-webkit-scrollbar{ display:none; }
body.rmob .app .right .swatches .sw{
  flex:0 0 auto; width:34px !important; height:34px !important; border-radius:50% !important;
}
/* Palette principale + grilles denses : cartes plus grandes (tap-friendly) */
body.rmob .app .right .pal{ grid-template-columns:repeat(7,1fr) !important; gap:7px !important; }
body.rmob .app .right .templates-grid,
body.rmob .app .right .mockup-grid{ grid-template-columns:repeat(2,1fr) !important; gap:8px !important; }
body.rmob .app .right .patterns-grid,
body.rmob .app .right .elements-grid,
body.rmob .app .right .pg{ grid-template-columns:repeat(3,1fr) !important; gap:8px !important; }
/* Boutons / inputs tactiles */
body.rmob .app .right button:not(.seg button){ min-height:36px; }
body.rmob .app .right input[type=text],
body.rmob .app .right input[type=number],
body.rmob .app .right select,
body.rmob .app .right textarea{ min-height:38px; font-size:13px; }

/* ── POPUPS (Pantone, placement, qualité…) → feuilles bas d'écran ──
   Même logique que les onglets : ancrées en bas, coins arrondis, corps
   scrollable, panneaux empilés (plus de sidebar 240px à l'étroit). */
body.rmob .modal-overlay{ place-items:end center; padding:0; }
body.rmob .modal{
  width:100%; max-width:none; max-height:88dvh;
  border-radius:20px 20px 0 0; border-bottom:0;
  animation:rmSheetUp .28s cubic-bezier(.32,.72,0,1);
}
@keyframes rmSheetUp{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
body.rmob .modal-head{ position:sticky; top:0; z-index:2; background:var(--bg); padding:14px 16px; }
body.rmob .modal-body{
  flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
body.rmob .modal-side{
  width:auto; border-right:0; border-bottom:1px solid var(--line);
  overflow:visible; padding:12px 16px;
}
body.rmob .modal-main{ overflow:visible; padding:14px 16px; }
body.rmob .modal-close{ width:36px; height:36px; }

/* ── Poignée "fermer" au-dessus du sheet (hors #root → z-index élevé) ── */
#rmobClose{ display:none; }
body.rmob.rsheet #rmobClose{
  display:flex; align-items:center; justify-content:center;
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--rm-bars) + var(--rm-sheet-open)); z-index:100001;
  width:52px; height:22px; padding:0;
  background:#fff; border:1px solid var(--line); border-bottom:0;
  border-radius:12px 12px 0 0; box-shadow:0 -4px 12px rgba(0,0,0,.08);
}
#rmobClose span{ width:30px; height:4px; border-radius:999px; background:var(--text-mute); }

  /* La mention qui évite le litige : les cm affichés sont la taille de
     l'impression DEMANDÉE, l'écran la projette avec la perspective. */
  .ec-mesure .ec-note {
    margin-left:auto; font-size:8.5px; color:var(--text-mute);
    font-style:italic; letter-spacing:.02em;
  }

  /* Qualité d'impression sublimation : le verdict se lit à la couleur. */
  .ec-dpi.bonne   { border-color:#9ec9a0; color:#2c6e31; background:#f0f7f0; }
  .ec-dpi.moyenne { border-color:#d9c48a; color:#7a5d12; background:#faf6ea; }
  .ec-dpi.faible  { border-color:#d9a0a0; color:#8a2626; background:#faf0f0; }



/* ── Choix du tissu avant commande ────────────────────────────────
   Deux références du même vêtement ne diffèrent que par la matière :
   pour trancher, le client a besoin de la voir et de la lire, pas
   seulement d'en connaître le nom. */
.modal-pied {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 18px; border-top: 1px solid var(--bd, #e5e7eb);
}
.tissu-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.tissu-carte {
  display: flex; gap: 12px; text-align: left; padding: 12px; cursor: pointer; font: inherit; color: inherit;
  background: var(--bg2, #fff); border: 2px solid var(--bd, #e5e7eb); border-radius: 12px; transition: all .14s;
}
.tissu-carte:hover { border-color: var(--ac, #ff5a1f); }
.tissu-carte.on { border-color: var(--ac, #ff5a1f); box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.tissu-img {
  position: relative;
  flex: 0 0 86px; height: 86px; border-radius: 9px; overflow: hidden;
  background: var(--bg3, #f1f3f7); display: grid; place-items: center;
}
.tissu-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tissu-vide { font-size: 20px; font-weight: 800; color: var(--tx3, #9aa1ad); }
.tissu-txt { min-width: 0; flex: 1; }
.tissu-nom { font-size: 14px; font-weight: 800; }
.tissu-nom em { font-style: normal; font-weight: 600; color: var(--tx2, #667); }
.tissu-accroche { font-size: 12.5px; font-weight: 700; color: var(--text); margin-top: 3px; }
.tissu-compo { font-size: 11.5px; color: var(--tx2, #667); margin-top: 2px; }
.tissu-desc { font-size: 12px; line-height: 1.4; margin: 6px 0 0; color: var(--tx2, #667); }
.tissu-usage { font-size: 11.5px; color: var(--tx2, #667); margin-top: 4px; }
.tissu-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tissu-tags span {
  font-size: 10.5px; padding: 1px 7px; border-radius: 999px;
  background: var(--bg3, #f1f3f7); color: var(--tx2, #667);
}
.tissu-prix { margin-top: 8px; font-size: 15px; font-weight: 800; }
.tissu-prix small { font-size: 10.5px; font-weight: 600; color: var(--tx2, #667); }

/* ═══ r190 — LA COLONNE IA, DESSINÉE COMME UN PRODUIT APPLE ═══════
   « Revoir le design en profondeur de toute la barre IA, chaque
   section hyper bien organisée, facile, style Apple. » Les principes
   appliqués, pas le logo : chaque section devient une CARTE posée sur
   le fond du panneau (rayon large, ombre douce, filet cheveu) ; une
   typographie de titres nette ; des contrôles en pilules et en
   segments ; UNE couleur d'accent ; de l'air partout. Tout est scopé
   .ai-pane : le reste du configurateur ne bouge pas. */
.ai-pane { display:flex; flex-direction:column; min-height:100%; }
.ai-pane .rp-section {
  background:var(--bg);
  border:1px solid oklch(0 0 0 / 0.06);
  border-bottom:1px solid oklch(0 0 0 / 0.06);
  border-radius:16px;
  padding:16px;
  box-shadow:0 1px 2px oklch(0 0 0 / 0.04), 0 8px 24px oklch(0 0 0 / 0.03);
}
.ai-pane .rp-label {
  font-size:13px; font-weight:650; letter-spacing:-0.01em;
  color:var(--text); margin-bottom:10px;
}
.ai-pane .ai-prompt {
  width:100%; min-height:86px; resize:vertical;
  border:1px solid oklch(0 0 0 / 0.10); border-radius:12px;
  padding:11px 12px; font-size:13px; line-height:1.5;
  background:var(--bg-soft); color:var(--text);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.ai-pane .ai-prompt:focus {
  outline:none; background:var(--bg);
  border-color:var(--accent);
  box-shadow:0 0 0 3.5px var(--accent-soft);
}
/* Les boutons du panneau : pilules nettes, états francs, transitions
   courtes — jamais de bordure épaisse qui fait sauter la mise en page. */
.ai-pane button { transition:background .12s, color .12s, border-color .12s, transform .06s; }
.ai-pane button:active { transform:scale(0.985); }
/* Le bouton Générer : la seule action pleine du panneau. */
.ai-pane .rp-generer, .ai-pane button.generer {
  border-radius:980px !important;
  font-weight:650; letter-spacing:-0.01em;
}
/* L'historique : des vignettes en carte, coins doux. */
.ai-pane .ai-history img { border-radius:10px; }
/* Les fines lignes d'aide : plus claires, plus aérées. */
.ai-pane details summary { list-style:none; }
.ai-pane details summary::-webkit-details-marker { display:none; }
.ai-pane details summary::before { content:"›"; display:inline-block; margin-right:6px;
  transition:transform .15s; color:var(--text-mute); }
.ai-pane details[open] summary::before { transform:rotate(90deg); }
/* Le bouton Générer existant (.ai-gen-btn) prend la pilule pleine. */
.ai-pane .ai-gen-btn {
  border-radius:980px; font-weight:650; letter-spacing:-0.01em;
  box-shadow:0 1px 2px oklch(0 0 0 / 0.10), 0 6px 18px var(--accent-soft);
}
.ai-pane .ai-gen-collant { padding:4px 2px 0; }
/* r194 — un vrai anneau qui tourne pendant la recherche de pistes :
   le simple changement de libellé passait inaperçu, on croyait le
   bouton mort et on recliquait. */
.ai-spin {
  display:inline-block; width:12px; height:12px; vertical-align:-2px;
  border:2px solid currentColor; border-top-color:transparent;
  border-radius:50%; animation:ai-spin .7s linear infinite; margin-right:6px;
}
@keyframes ai-spin { to { transform:rotate(360deg); } }

/* ── 3D pleine largeur : la colonne Zones n'accompagne que l'onglet
   Couleur — partout ailleurs le maillot prend la place. ── */
.app.sans-zones { grid-template-columns: 0 1fr minmax(320px, 25%); }
.app.sans-zones .left { display: none; }

/* ── Écran d'accueil : une question, deux grands choix. ── */
.accueil-voile {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(12,14,20,.55); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
}
.accueil-carte {
  background: var(--bg, #fff); border-radius: 18px; padding: 34px 38px;
  max-width: 560px; width: calc(100% - 40px); text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.accueil-carte h2 { margin: 0 0 6px; font-size: 22px; }
.accueil-carte p  { margin: 0 0 22px; color: var(--text-dim, #667); font-size: 13.5px; }
.accueil-choix { display: flex; gap: 14px; }
.accueil-choix button {
  flex: 1; border: 1.5px solid var(--line, #dde); border-radius: 14px;
  background: var(--bg-soft, #f7f8fa); cursor: pointer; padding: 18px 14px;
  font-size: 14.5px; font-weight: 700; line-height: 1.35; color: inherit;
  transition: border-color .15s, transform .15s;
}
.accueil-choix button:hover { border-color: var(--accent, #1a72e8); transform: translateY(-2px); }
.accueil-choix .ico { font-size: 26px; display: block; margin-bottom: 8px; }
.accueil-choix small { display: block; font-weight: 500; color: var(--text-dim, #667); margin-top: 4px; font-size: 12px; }
.accueil-passer { margin-top: 16px; background: none; border: none; color: var(--text-mute, #99a); cursor: pointer; font-size: 12px; text-decoration: underline; }
@media (max-width: 560px) { .accueil-choix { flex-direction: column; } }
/* Le guide attend son tour : pas de bulle par-dessus l'écran d'accueil. */
.app.accueil-ouvert .guide-bulle, .app.accueil-ouvert .guide-spot { display: none; }

/* ── Pastilles de zones (panneau Colorier) ── */
.zone-chips { display:flex; flex-wrap:wrap; gap:6px; padding:2px 0 10px; }
.zone-chip {
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 11px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:var(--bg); color:var(--text-dim);
  font-size:12.5px; font-weight:600; transition:border-color .12s, color .12s;
}
.zone-chip:hover { border-color:var(--accent); color:var(--text); }
.zone-chip.on { border:1.5px solid var(--accent); background:var(--accent-soft); color:var(--text); }
.zc-sw { width:13px; height:13px; border-radius:50%; border:1px solid rgba(0,0,0,.15); }

/* ── Accès rapide en tête de panneau ── */
.acces-rapide { display:flex; gap:6px; flex-wrap:wrap; padding:0 0 10px; position:sticky; top:0; z-index:5; background:var(--bg-panneau); }
.acces-rapide button {
  border:1px solid var(--line); background:var(--bg); color:var(--text-dim);
  border-radius:7px; padding:5px 10px; font-size:11.5px; font-weight:600; cursor:pointer;
}
.acces-rapide button:hover { border-color:var(--accent); color:var(--text); }

/* ── Lisibilité (le test « 85 ans ») : planchers de taille et focus
   clavier. Les libellés à 9-10 px gris pâle éliminaient les yeux
   fatigués ; aucun élément n'annonçait le focus clavier. ── */
.rp-label { font-size: 12px; }
.hint-panneau { font-size: 12.5px; }
.ob-label { font-size: 11.5px; letter-spacing: .4px; }
.ael-desc { font-size: 11.5px; }
.zone-count, .ec-note { font-size: 11px; }
button:focus-visible, [role="button"]:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent, #1a72e8); outline-offset: 2px;
}
.accueil-choix .ico { color: var(--accent, #1a72e8); display: flex; justify-content: center; margin-bottom: 10px; }

/* Bouton « Recommencer » : présent mais discret — il détruit tout. */
.btn-reset-design { margin-left:10px; padding:5px 11px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:var(--bg); color:var(--text-dim);
  font-size:11.5px; font-weight:600; }
.btn-reset-design:hover { border-color:#e53935; color:#e53935; }

/* ══ MOBILE : LA POIGNÉE DE REDIMENSIONNEMENT N'A RIEN À FAIRE LÀ ══
   « Des fois, il reste la petite encoche qui permet de redimensionner
   la fenêtre. » C'est la poignée native des zones de texte, en bas à
   droite : sur un écran tactile elle ne sert à rien — on ne la saisit
   pas au doigt — et elle dépasse des cartes, où elle a tout l'air d'un
   défaut d'affichage. Les champs gardent leur hauteur, qui suit déjà
   leur contenu. */
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  textarea, .if, input[type="text"] { resize: none !important; }
}

/* ══ MODE APP : LES PIÈCES SE TOUCHENT ════════════════════════════
   Les lignes d'accordéon faisaient 34 px de haut, avec une pastille de
   couleur grosse comme un grain de riz : une cible de bureau, pilotée à
   la souris.
   Le gabarit retenu : 44 px est le minimum tenable pour un doigt, mais
   un minimum n'est pas un confort. Ce qu'on touche le plus souvent —
   choisir une pièce — mérite 72 px, et une pastille qu'on lit à bout de
   bras. Le reste des commandes de la feuille ne descend pas sous 44.
   Tout ceci ne vaut QUE sur téléphone : sur grand écran ces hauteurs
   mangeraient la colonne pour rien. */
.pieces-grille {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.piece-tuile {
  display: flex; align-items: center; gap: 11px;
  min-height: 72px !important; box-sizing: border-box;
  padding: 11px 12px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--bg); cursor: pointer; text-align: left; width: 100%;
  -webkit-tap-highlight-color: transparent;
}
.piece-tuile:active { background: var(--bg-soft); transform: scale(0.985); }
.piece-pastille {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  border: 1px solid rgba(0,0,0,.14); box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
}
.piece-texte { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.piece-nom {
  font-size: 14.5px; font-weight: 700; color: var(--text); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.piece-sous {
  font-size: 12px; color: var(--text-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Le retour : une cible pleine largeur, impossible à rater. */
.retour-pieces { width: 100%; justify-content: center; min-height: 48px; font-size: 14px; }
/* Une seule colonne quand les noms sont longs (« Emmanchure gauche »). */
@media (max-width: 380px) { .pieces-grille { grid-template-columns: 1fr; } }

/* ── LE PLANCHER TACTILE DE LA FEUILLE ──────────────────────────
   Relevé à 390 px : 48 cibles sous 44 px, beaucoup à 34. Ce sont des
   tailles de souris. On pose un plancher sur ce qui se touche dans le
   panneau — sans toucher aux pastilles de couleur, qui ont leur propre
   grille, ni aux vignettes de motifs, qui sont des images. */
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  /* Mesuré : borner aux .rp-section laissait passer cinq cibles de
     l'écran couleur (les onglets Uni/Dégradé à 38 px, le bouton
     principal à 36, la ligne hexadécimale à 17). Le sélecteur porte
     donc sur tout le panneau. */
  body.rmob .right button:not(.sw):not(.pat):not(.piece-tuile):not(.swatch):not(.copy),
  body.rmob .right select,
  body.rmob .right input:not([type=range]):not([type=color]):not([type=checkbox]) {
    min-height: 44px; font-size: 13.5px;
  }
  /* Le petit bouton « copier » de la valeur hexadécimale : il est
     minuscule par nature, on lui donne une vraie surface plutôt que de
     l'étirer. */
  body.rmob .right button.copy { min-width: 44px; min-height: 44px !important; height: 44px; }
  body.rmob .right .hex-val { min-height: 44px; display: flex; align-items: center; }
  /* Les curseurs : une piste qu'on attrape, pas un fil. */
  body.rmob .right input[type=range] { height: 32px; }
  /* Et plus rien sous 12 px : 31 textes l'étaient, certains à 9. */
  body.rmob .right .rp-label { font-size: 12px; }
}

/* ── LA BARRE QUI NE BOUGE PAS ────────────────────────────────────
   Sur l'écran d'une pièce, le retour et le choix uni/dégradé sont les
   deux commandes qu'on reprend sans arrêt. Les laisser défiler avec le
   reste obligeait à remonter toute la liste des palettes pour changer
   d'avis. Elles restent donc en haut, collées ; le contenu passe
   dessous. */
.barre-collante {
  position: sticky; top: 0; z-index: 12;
  display: flex; flex-direction: column; gap: 4px;
  padding: 7px 12px 6px; margin: 0 -12px;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
/* TROIS BOUTONS IDENTIQUES, SUR UNE LIGNE, ET FINE.
   La barre faisait 106 px de haut : un retour pleine largeur, les modes
   en dessous, le nom sur un troisième étage. Trois hauteurs pour trois
   commandes, sur un écran où chaque pixel de haut est du contenu en
   moins.
   Les trois — Pièces, Uni, Dégradé — sont maintenant de même taille et
   de même forme, en une rangée. `display:contents` sur le groupe des
   modes fait entrer ses deux boutons dans la même grille que le retour :
   sans lui, on aurait un bouton d'un côté et une paire de l'autre, et
   c'est exactement ce qui empêchait de les lire comme trois boutons. */
.ligne-barre { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 6px; }
.ligne-barre .seg { display: contents; }
.ligne-barre .retour-pieces,
.ligne-barre .seg button {
  width: 100%; min-width: 0; height: 40px; min-height: 40px !important;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 0 8px; margin: 0; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg);
  font-size: 13px; font-weight: 600; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Celui qui est actif se voit : c'est un choix, pas une décoration. */
.ligne-barre .seg button.active {
  background: var(--accent-soft); border-color: var(--accent); color: var(--text);
}
.ligne-barre .retour-pieces:active,
.ligne-barre .seg button:active { transform: scale(0.97); }
.nom-piece-barre {
  font-size: 11.5px; font-weight: 600; color: var(--text-mute);
  letter-spacing: .02em; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ══ LA LIGNE DES ZONES N'A PLUS DE RAISON D'ÊTRE ════════════════
   « Dos », « Manche gauche »… : elle doublait ce que le vêtement dit
   déjà — on touche la pièce en 3D — et depuis que « Colorier » ouvre
   ses pièces en tuiles, elle ne servait plus qu'à manger 50 px de haut.

   L'ORDRE DES DEUX AUTRES BARRES NE CHANGE PAS. Je l'avais inversé de
   ma propre initiative (onglets au-dessus de la commande) : ce n'était
   pas demandé, et l'inversion touchait tout le monde pour rien. Les
   onglets restent collés en bas, la barre de commande au-dessus
   d'eux, et elle s'efface quand un panneau s'ouvre — comme avant. */
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  body.rmob .app .zones,
  body.rmob .app.tool-color .zones { display: none !important; }
  body.rmob .app,
  body.rmob.rsheet .app {
    --rm-zones: 0px;
    /* ⚠ LES DÉRIVÉES DOIVENT ÊTRE RECALCULÉES ICI.
       Un calc() fige ses var() LÀ OÙ IL EST ÉCRIT : `--rm-bars` est
       défini sur body.rmob avec --rm-zones à 50 px, et mettre
       --rm-zones à 0 plus bas ne le refait pas. La barre disparaissait
       donc de l'écran mais gardait ses 50 px de réserve : une bande
       vide entre le bas du panneau et les onglets — le « rectangle
       gris » qu'on voit à la place de la barre de commande.
       Le fichier le disait déjà, deux fois, pour d'autres règles. Je
       ne l'ai pas lu. */
    --rm-bars: calc(var(--rm-tools) + var(--rm-safe));
    --rm-reserved: calc(var(--rm-bars) + var(--rm-order));
    --rm-sheet-open: min(var(--rm-sheet),
      calc(100dvh - var(--rm-top) - var(--rm-safe-top) - var(--rm-bars) - var(--rm-canvas-min)));
  }
  body.rmob.rsheet-max .app {
    --rm-sheet-open: calc(100dvh - var(--rm-top) - var(--rm-safe-top)
                          - var(--rm-bars) - var(--rm-canvas-min));
  }

}

/* Même effacement que pour une colonne ouverte : la barre de commande
   ne reste pas devant les réglages d'un élément. La classe est posée
   par la coquille mobile quand le panneau occupe réellement l'écran —
   le tap sur un onglet n'est pas le seul chemin. */

/* ══ LES ÉCRANS DE CHOIX, AU GABARIT DU TÉLÉPHONE ═════════════════
   Relevé à 390 px sur l'accueil : 18 cibles sous 44 px (« Passer »
   112×34, les boutons de la barre du haut 31×34), 12 textes sous 12 px,
   462 px à faire défiler. Ce sont les tout premiers écrans — celui qui
   s'y bat ne verra jamais le reste.

   Même gabarit que les panneaux : rien sous 44 px, rien sous 12 px de
   texte, et les grands choix en pleine largeur plutôt qu'en colonnes
   étroites. Sur grand écran, rien ne change. */
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  /* La carte d'accueil respire, et ses deux choix se superposent au
     lieu de se partager 390 px. */
  .accueil-carte { padding: 20px 16px; border-radius: 18px; }
  .accueil-carte h2 { font-size: 20px; line-height: 1.25; }
  .accueil-carte p { font-size: 14px; margin-bottom: 18px; }
  .accueil-choix { flex-direction: column; gap: 10px; }
  .accueil-choix button {
    min-height: 88px; padding: 16px; border-radius: 14px; font-size: 15px;
  }
  .accueil-choix .ico { margin-bottom: 6px; }
  .accueil-choix small { font-size: 12.5px; }
  /* « Passer » : un lien de 34 px devient une vraie cible. */
  /* Mesuré : min-height seul ne suffisait pas — la largeur suivait, la
     hauteur restait à 34. Une règle plus générale fixe la hauteur des
     boutons ; on la reprend. */
  .accueil-passer { min-height: 44px; height: 44px; font-size: 13.5px; padding: 0 12px; }

  /* La barre du haut : ses boutons faisaient 31×34. */
  body.rmob .app .topbar .top-btn,
  body.rmob .app .topbar button,
  /* Av / Ar / G / D et les icônes de la barre : la LARGEUR comptait
     autant que la hauteur — 28 px de large ne s'atteint pas mieux que
     28 de haut. */
  body.rmob .vbtn,
  body.rmob .app .vbtn,
  body.rmob .app .topbar .vbtn {
    min-width: 44px !important; width: auto; min-height: 44px !important; height: 44px; padding: 0 10px;
  }

  /* Les grilles de choix (sport, produit, coupe) : deux colonnes au
     plus, des vignettes qu'on touche sans viser. */
  body.rmob .choix-grille,
  body.rmob .cards-grid,
  body.rmob [class*="grille-choix"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px;
  }
  body.rmob .choix-grille > *,
  body.rmob .cards-grid > * { min-height: 96px; }

  /* Et le plancher de lisibilité, comme dans la feuille. */
  body.rmob #root small,
  body.rmob #root .hint,
  body.rmob #root .sub { font-size: 12px; }
}

/* ── LES OUTILS D'UN ÉLÉMENT : UNE LIGNE QUI GLISSE ───────────────
   Ils passaient à la ligne dès qu'ils étaient quatre ou cinq — deux ou
   trois rangs de boutons pris sur la hauteur, dans une feuille qui n'en
   a pas. Une seule rangée, qu'on fait défiler du doigt : la place
   gagnée revient au contenu. */
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  body.rmob .ec-outils-rangee {
    flex-wrap: nowrap !important;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    gap: 6px !important; padding: 4px 0 6px !important;
    /* Le dernier bouton ne doit pas coller au bord : on sent qu'il y a
       la suite. */
    scroll-padding-right: 16px;
  }
  body.rmob .ec-outils-rangee::-webkit-scrollbar { display: none; }
  body.rmob .ec-outils-rangee > * { flex: 0 0 auto; min-height: 44px; }
}

/* ── SUR TÉLÉPHONE, LA TAILLE SE RÈGLE AU DOIGT ───────────────────
   Un curseur et deux boutons ± pour changer une taille qu'on pince
   directement sur le vêtement : c'est de la place prise pour un geste
   que personne ne fait. Ils disparaissent — mais la MESURE reste. Elle,
   on ne peut pas la deviner : savoir qu'un logo fait 8,5 cm de large
   sur 6 de haut est ce qui décide d'imprimer ou de recommencer. */
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  body.rmob .ec-outil-taille .prop-row { display: none; }
  body.rmob .ec-outil-taille .ec-mesure { margin-top: 0; }
  /* Les boutons ± posés au-dessus de la barre d'outils suivent la même
     logique : on pince sur le maillot. Mais la ligne RESTE — elle porte
     la vignette et la mesure en centimètres, qui sont justement ce
     qu'on garde. */
  body.rmob .ec-taille-rapide .ts-btn { display: none !important; }
}

/* ── UNE COLONNE S'OUVRE PAR LE HAUT ──────────────────────────────
   Le contenu du panneau était centré verticalement : sur une feuille
   plus haute que lui, il flottait au milieu ; sur une feuille plus
   courte, ses premières lignes passaient AU-DESSUS du bord et on ne
   pouvait plus les atteindre — « on ne voit pas tout le contenu ». Un
   panneau se lit du haut vers le bas, toujours. */
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  body.rmob .app .right,
  body.rmob .app .right .panel-body {
    justify-content: flex-start !important;
    align-content: flex-start !important;
  }
}

/* ── LA BOÎTE D'OUTILS RÉDUIT LE VÊTEMENT, COMME UNE COLONNE ──────
   Elle est ancrée en bas sur écran étroit, en `position:fixed`, donc
   elle passait PAR-DESSUS le maillot au lieu de lui prendre de la
   place. Sa hauteur réelle est relevée par la coquille mobile
   (--rm-boite) : le canvas se recale dessus, exactement comme il le
   fait pour une colonne ouverte. */
/* Le canevas rend sa place à la boîte. La hauteur exacte vient de la
   surveillance (--rm-boite) ; à défaut, `:has()` applique un repli de
   46vh — la hauteur maximale que la boîte peut prendre. Mieux vaut un
   vêtement un peu trop réduit qu'un vêtement recouvert. */
body.rmob .app:has(.pwai-boite-reglages) .center,
body.rmob.rboite .app .center{
  bottom: calc(var(--rm-bars) + var(--rm-boite, 46vh)) !important;
}

/* La boîte d'outils d'un élément est ancrée en bas sur téléphone : sans
   empilement explicite, elle peignait SOUS la barre de commande (63) et
   ses derniers réglages devenaient inatteignables. Elle passe au même
   niveau que les colonnes. */
/* LA BOÎTE DE RÉGLAGES DEVANT LA BARRE DE COMMANDE — SANS LA DÉPLACER.
   La boîte porte un z-index de 100004 et la barre, à 63, passait quand
   même devant : un z-index ne vaut que dans son contexte d'empilement,
   et la boîte est rendue dans la zone de vue, qui a le sien (z-index:1).
   J'ai d'abord voulu la sortir de l'arbre par un portail vers <body> —
   et les boîtes ont tout simplement cessé de s'afficher. On ne déplace
   donc rien : on soulève la ZONE qui les contient, le temps qu'une
   boîte soit ouverte. Le drapeau `rboite` est déjà posé par la coquille
   mobile quand elle mesure la boîte ; il sert ici une seconde fois. */
/* On ne touche PAS au z-index de la boîte elle-même : elle porte déjà
   100004 en style en ligne, et le ramener à 70 ne ferait que
   l'abaisser. C'est la zone qui la contient qu'on soulève. */
/* LA BOÎTE EST RENDUE DANS LA BARRE DU HAUT — vérifié dans le bundle,
   pas supposé : son JSX est un enfant de `.topbar`, qui porte
   z-index:60 sur mobile. Ses 100004 ne valaient donc que PARMI les
   enfants de cette barre : tout le bloc restait sous la barre de
   commande, à 63. D'où les réglages coupés en deux par le prix.
   On soulève la barre du haut le temps qu'une boîte soit ouverte. Ses
   onglets, qui vivent aussi dedans, montent avec — sans conséquence :
   ils occupent le bas de l'écran, la barre de commande est au-dessus
   d'eux, les deux ne se recouvrent pas. */
/* Et on ne fait pas dépendre l'empilement d'un drapeau posé par du
   JavaScript : `:has()` le dit au navigateur directement, à l'instant
   où la boîte apparaît. Le drapeau `rboite` reste pour la hauteur du
   canevas, qui demande une mesure — pas pour ça. */
body.rmob .app .topbar:has(.pwai-boite-reglages){ z-index:66 !important; }
body.rmob.rboite .app .topbar{ z-index:66 !important; }
body.rmob.rboite .app .center{ z-index:65 !important; }
/* Lot 2 : LA FEUILLE DE RÉGLAGES PASSE DEVANT LE PANNEAU. Ouverte depuis
   « Ajouter », la boîte d'un texte restait sous la feuille du panneau
   (.right, z 70) : on n'en voyait que la barre ARC / CENTRER. La boîte
   s'ouvre maintenant dépliée ; la barre du haut qui la porte monte donc
   juste au-dessus du panneau le temps qu'elle est là, et la poignée du
   panneau (sur <body>) s'efface pour ne pas flotter sur ses réglages.
   Fermer la boîte rend le panneau tel quel. */
body.rmob .app .topbar:has(.pwai-boite-reglages.br-feuille){ z-index:71 !important; }
body.rmob:has(.app .topbar .pwai-boite-reglages.br-feuille) #rmobClose{ display:none !important; }

/* ══ OÙ POSER UN ÉLÉMENT — LA POP-UP D'EMPLACEMENTS ════════════════
   « Les pop-ups pour placer les éléments sont mal foutues, pas très
   design. » Une colonne : la question, les pièces en onglets, la pièce
   posée comme un objet au centre, des repères discrets. La scène a une
   hauteur FIXE : la fenêtre ne saute plus d'une pièce à l'autre (541 →
   494 px au bureau, 681 → 509 px au téléphone, avant).
   Une seule couleur d'interaction, --accent (la couleur du marchand). La
   couleur de la catégorie ne survit que dans la pastille du surtitre.
   Sur téléphone (body.rmob), la même fenêtre devient une feuille. */

/* Au-dessus de la boîte de réglages (100004) : « Changer de zone » ouvre
   ce sélecteur depuis la boîte, il doit passer devant elle. La classe
   .placement-picker est dans les exceptions du clic extérieur de la
   boîte : annuler en cliquant le voile ne la referme pas. */
.modal-overlay.placement-picker { z-index: 100005; }

.modal.modal-placement.pl-epure {
  /* Hauteur de la scène : 336 px, moins sur un écran bas (la fenêtre
     tient alors sans défiler). */
  --pl-h: clamp(220px, calc(100dvh - 380px), 336px);
  --pl-doux: var(--accent-soft);
  --pl-doux: color-mix(in oklch, var(--accent) 9%, transparent);
  --pl-anneau: var(--accent-line);
  --pl-anneau: color-mix(in oklch, var(--accent) 24%, transparent);
  width: min(600px, calc(100vw - 48px)); max-width: none;
  max-height: calc(100dvh - 48px);
  border-radius: 12px; border: 1px solid var(--line);
  box-shadow: 0 1px 2px oklch(0 0 0 / .05), 0 24px 64px oklch(0.2 0.02 250 / .20);
  animation: plEntree .2s cubic-bezier(.2, .8, .2, 1);
}
@keyframes plEntree { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }

/* ── En-tête : surtitre, question, consigne ── */
.pl-epure .pl-tete { position: relative; padding: 22px 64px 0 24px; flex: none; }
.pl-epure .pl-surtitre {
  display: flex; align-items: center; gap: 8px; min-height: 18px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-mute);
}
.pl-epure .pl-pastille {
  width: 18px; height: 18px; border-radius: 5px; flex: none;
  display: grid; place-items: center;
}
.pl-epure .pl-pastille svg { color: #fff; }
/* L'étapier de « Nom & numéro » : ① Numéro — ② Nom. */
.pl-epure .pl-etapes {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--text-mute); white-space: nowrap;
}
.pl-epure .pl-etape { display: inline-flex; align-items: center; gap: 5px; }
.pl-epure .pl-etape-rond {
  width: 16px; height: 16px; border-radius: 999px; box-sizing: border-box; flex: none;
  display: grid; place-items: center; font-size: 10px; font-weight: 700; line-height: 1;
  border: 1.5px solid var(--line-strong); color: var(--text-mute);
}
.pl-epure .pl-etape.en-cours { color: var(--text); }
.pl-epure .pl-etape.en-cours .pl-etape-rond,
.pl-epure .pl-etape.fait .pl-etape-rond { background: var(--accent); border-color: var(--accent); color: var(--brand-on-primary, #fff); }
.pl-epure .pl-etape.fait { color: var(--text-dim); }
.pl-epure .pl-etapes-trait { width: 14px; height: 1.5px; border-radius: 1px; background: var(--line-strong); }
.pl-epure .pl-titre {
  margin: 10px 0 0; font-size: 21px; line-height: 1.2; font-weight: 700;
  letter-spacing: -.02em; color: var(--text);
}
.pl-epure .pl-sous { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-dim); }
.pl-epure .pl-fermer {
  position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 999px; background: transparent; color: var(--text-dim);
  display: grid; place-items: center; cursor: pointer; transition: background .12s, color .12s;
}
.pl-epure .pl-fermer:hover { background: var(--bg-elev); color: var(--text); }
.pl-epure .pl-fermer:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pl-anneau); }

/* ── Corps ── */
.modal-placement.pl-epure .pl-corps {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
  padding: 18px 24px 0; overflow-y: auto; overflow-x: hidden;
}

/* ── Les pièces, en onglets ── */
.modal-placement.pl-epure .pl-rail-cadre {
  position: relative; flex: none; margin: 0 -24px;
  border-bottom: 1px solid var(--line);
}
.modal-placement.pl-epure .pl-rail {
  display: flex; gap: 2px; padding: 0 24px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  /* La rangée ne s'efface que du côté où il y a la suite. */
  --pl-gouttiere: 24px;
  -webkit-mask-image: linear-gradient(to right, var(--pl-fg, #000), #000 var(--pl-gouttiere), #000 calc(100% - var(--pl-fondu, 40px)), var(--pl-fd, #000));
          mask-image: linear-gradient(to right, var(--pl-fg, #000), #000 var(--pl-gouttiere), #000 calc(100% - var(--pl-fondu, 40px)), var(--pl-fd, #000));
}
.modal-placement.pl-epure .pl-rail-cadre.pl-g .pl-rail { --pl-fg: transparent; }
.modal-placement.pl-epure .pl-rail-cadre.pl-d .pl-rail { --pl-fd: transparent; --pl-fondu: 132px; }
.modal-placement.pl-epure .pl-rail::-webkit-scrollbar { display: none; }
/* Spécificité 0,5,0 : bat « body.rmob .app .topbar button » quand le
   sélecteur est rendu dans la barre du haut (Changer de zone, nom &
   numéro, bibliothèque) — même rendu que depuis la colonne. */
.modal.modal-placement.pl-epure .pl-rail > .pl-onglet {
  position: relative; flex: 0 0 96px; width: 96px; min-width: 0; height: auto; min-height: 0;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 2px 2px 12px; margin: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--text-dim); font: inherit; cursor: pointer;
}
.modal-placement.pl-epure .pl-onglet::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px;
  border-radius: 2px 2px 0 0; background: transparent; transition: background .15s;
}
.modal-placement.pl-epure .pl-onglet.on::after { background: var(--accent); }
.modal-placement.pl-epure .pl-vignette {
  width: 52px; height: 52px; border-radius: 10px; display: grid; place-items: center; box-sizing: border-box;
  background: var(--bg-soft); border: 1px solid var(--line);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.modal-placement.pl-epure .pl-vignette path {
  fill: var(--bg); stroke: var(--text-mute); stroke-width: 1.3px; transition: stroke .15s;
}
.modal-placement.pl-epure .pl-onglet:hover .pl-vignette { border-color: var(--line-strong); }
.modal-placement.pl-epure .pl-onglet:hover,
.modal-placement.pl-epure .pl-onglet.on { color: var(--text); }
.modal-placement.pl-epure .pl-onglet.on .pl-vignette { background: var(--pl-doux); border-color: var(--pl-anneau); }
.modal-placement.pl-epure .pl-onglet.on .pl-vignette path { stroke: var(--accent); }
.modal-placement.pl-epure .pl-onglet-nom {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
/* « Il est ici » : la pièce où se trouve l'élément qu'on déplace. Pas
   de texte en couleur d'accent (illisible quand le marchand l'a claire) :
   le mot reste sombre, un point d'accent le signale. */
.modal-placement.pl-epure .pl-onglet-ici {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: -4px; font-size: 10.5px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  color: var(--text-dim);
}
.modal-placement.pl-epure .pl-onglet-ici::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px; flex: none; background: var(--accent);
}
.modal-placement.pl-epure .pl-onglet:focus-visible { outline: none; }
.modal-placement.pl-epure .pl-onglet:focus-visible .pl-vignette { box-shadow: 0 0 0 3px var(--pl-anneau); }
/* « 6 autres pièces » : la suite, annoncée en clair. */
.modal.modal-placement.pl-epure .pl-suite {
  position: absolute; right: 12px; top: 16px; z-index: 1;
  display: inline-flex; align-items: center; gap: 2px;
  height: 26px; min-height: 0; min-width: 0; padding: 0 6px 0 10px; margin: 0;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--text-dim); font: inherit; font-size: 11.5px; font-weight: 600;
  box-shadow: 0 2px 8px oklch(0.3 0.02 250 / .10); cursor: pointer;
}
.modal.modal-placement.pl-epure .pl-suite:hover { color: var(--text); border-color: var(--pl-anneau); }

/* ── La scène : la pièce, posée comme un objet ── */
.modal-placement.pl-epure .pl-piece {
  position: relative; flex: none; margin: 18px 0 0; padding: 16px; box-sizing: border-box;
  height: calc(var(--pl-h) + 32px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  border-radius: 12px;
  background-color: var(--bg-soft);
  background-image: radial-gradient(oklch(0.5 0.01 250 / .10) 1px, transparent 1.2px);
  background-size: 16px 16px; background-position: 8px 8px;
}
.pl-epure .pl-scene {
  position: relative; flex: none;
  /* Les proportions EXACTES du viewBox : pas de bande vide, les repères
     se posent en % (voir PiecePlacement). */
  width: min(100%, calc(var(--pl-h) * var(--pl-ratio)));
  aspect-ratio: var(--pl-ratio);
}
/* Avec la rangée de repères nommés dessous, la pièce leur cède la place
   et ne garde que les points. */
.pl-epure .pl-avec-puces .pl-scene { width: min(100%, calc((var(--pl-h) - 60px) * var(--pl-ratio))); }
.pl-epure .pl-avec-puces .pl-repere .pl-etiquette { display: none; }
.pl-epure .pl-trace {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  overflow: visible; cursor: crosshair;
  filter: drop-shadow(0 1px 1px oklch(0.3 0.02 250 / .10)) drop-shadow(0 10px 22px oklch(0.3 0.02 250 / .12));
}
.pl-epure .pl-forme { fill: var(--bg); stroke: var(--line-strong); stroke-width: 1.25px; }
.pl-epure .pl-pli { stroke: var(--line-strong); stroke-width: 1.25px; }
.pl-epure .pl-axes line { stroke: var(--line-strong); fill: none; }
/* Bandes (BandesPopups) : emplacements conseillés en pointillé, bandes
   déjà posées en trait plein de leur couleur. */
.pl-epure .pl-bandes line { fill: none; pointer-events: none; }
.pl-epure .pl-bande-guide { stroke: var(--accent); opacity: .55; }
.pl-epure .pl-bande-posee { stroke-linecap: butt; opacity: .9; }
.pl-epure .pl-bande-bord { stroke: var(--line-strong); }

/* La légende des deux gestes, en coin (bureau seulement). */
.pl-epure .pl-legende-scene {
  position: absolute; left: 14px; top: 12px; z-index: 0; pointer-events: none;
  display: flex; flex-direction: column; gap: 5px;
  font-size: 11px; line-height: 1.2; color: var(--text-mute);
}
.pl-epure .pl-legende-scene span { display: inline-flex; align-items: center; gap: 7px; }
.pl-epure .pl-legende-scene i {
  width: 10px; height: 10px; border-radius: 999px; box-sizing: border-box; flex: none;
}
.pl-epure .pl-l-repere { background: var(--accent); border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--pl-anneau); }
.pl-epure .pl-l-libre { border: 1.5px dashed var(--accent); }

/* Repère : un point discret + une étiquette propre, taille fixe. */
.modal.modal-placement.pl-epure .pl-repere {
  position: absolute; z-index: 2; width: 28px; height: 28px; min-width: 0; min-height: 0; padding: 0; margin: 0;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  border: 0; border-radius: 999px; background: transparent; cursor: pointer; font: inherit;
}
.pl-epure .pl-point {
  display: block; width: 14px; height: 14px; border-radius: 999px; box-sizing: border-box; flex: none;
  background: var(--accent); border: 2.5px solid var(--bg);
  box-shadow: 0 0 0 1px var(--pl-anneau), 0 1px 4px oklch(0.2 0.02 250 / .28);
  transition: transform .15s, box-shadow .15s;
}
.pl-epure .pl-etiquette {
  position: absolute; top: 50%; left: calc(50% + 11px); transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; font-size: 11.5px; font-weight: 600; line-height: 1; letter-spacing: -.005em;
  color: var(--text); background: var(--bg); padding: 5px 9px; border-radius: 999px;
  box-shadow: 0 0 0 1px var(--line), 0 2px 6px oklch(0.3 0.02 250 / .08);
  transition: background .15s, color .15s, box-shadow .15s, opacity .15s;
}
.pl-epure .pl-a-gauche .pl-etiquette { left: auto; right: calc(50% + 11px); }
.pl-epure .pl-repere:focus-visible { outline: none; }
.pl-epure .pl-repere:focus-visible .pl-point,
.pl-epure .pl-repere:active .pl-point { transform: scale(1.2); box-shadow: 0 0 0 5px var(--pl-anneau), 0 1px 4px oklch(0.2 0.02 250 / .28); }
.pl-epure .pl-repere:focus-visible .pl-etiquette,
.pl-epure .pl-repere:active .pl-etiquette {
  background: var(--accent); color: var(--brand-on-primary, #fff); box-shadow: 0 0 0 1px var(--accent), 0 4px 12px oklch(0.3 0.02 250 / .16);
}
@media (hover: hover) {
  .pl-epure .pl-repere:hover { z-index: 3; }
  .pl-epure .pl-repere:hover .pl-point { transform: scale(1.2); box-shadow: 0 0 0 5px var(--pl-anneau), 0 1px 4px oklch(0.2 0.02 250 / .28); }
  .pl-epure .pl-repere:hover .pl-etiquette {
    background: var(--accent); color: var(--brand-on-primary, #fff); box-shadow: 0 0 0 1px var(--accent), 0 4px 12px oklch(0.3 0.02 250 / .16);
  }
}
/* Pièce très plate (ceinture) : étiquettes au survol seulement. */
.pl-epure .pl-plate .pl-etiquette { opacity: 0; }
.pl-epure .pl-plate .pl-repere:hover .pl-etiquette,
.pl-epure .pl-plate .pl-repere:focus-visible .pl-etiquette { opacity: 1; }

/* Le viseur du clic libre : un anneau pointillé, SOUS les repères, qui
   ne capte rien. */
.pl-epure .pl-fantome {
  position: absolute; z-index: 1; width: 26px; height: 26px; border-radius: 999px; box-sizing: border-box;
  transform: translate(-50%, -50%); pointer-events: none;
  border: 1.5px dashed var(--accent); background: var(--pl-doux);
}
.pl-epure .pl-fantome::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px;
  border-radius: 999px; background: var(--accent);
}
/* « Changer de zone » : la place actuelle de l'élément. Sur un repère,
   c'est le repère qui le dit (« Numéro (centre) ACTUEL ») ; ailleurs, un
   anneau à l'endroit exact. */
.pl-epure .pl-ici .pl-point { box-shadow: 0 0 0 4px var(--bg), 0 0 0 5.5px var(--text-mute), 0 1px 4px oklch(0.2 0.02 250 / .28); }
.pl-epure .pl-tag-ici {
  position: absolute; bottom: calc(100% + 3px); left: 10px;
  font-size: 9.5px; font-weight: 700; line-height: 1; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-dim);
}
.pl-epure .pl-a-gauche .pl-tag-ici { left: auto; right: 10px; }
.pl-epure .pl-actuel {
  position: absolute; z-index: 1; width: 22px; height: 22px; border-radius: 999px; box-sizing: border-box;
  transform: translate(-50%, -50%); pointer-events: none;
  border: 2px solid var(--text-mute); background: var(--bg);
}
.pl-epure .pl-actuel .pl-etiquette { font-weight: 600; color: var(--text-dim); }
.pl-epure .pl-actuel .pl-etiquette { left: calc(50% + 15px); }
.pl-epure .pl-actuel.pl-a-gauche .pl-etiquette { left: auto; right: calc(50% + 15px); }

/* Repères trop serrés pour un doigt : repris en boutons nommés. */
.pl-epure .pl-puces {
  flex: none; width: 100%; display: grid; gap: 6px;
  grid-template-columns: repeat(var(--pl-n, 3), minmax(0, 1fr));
}
.modal.modal-placement.pl-epure .pl-puce {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 46px; min-height: 46px; min-width: 0; padding: 0 6px; margin: 0;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
  color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.15;
  text-align: center; overflow: hidden; cursor: pointer;
}
.modal.modal-placement.pl-epure .pl-puce .pl-point { width: 12px; height: 12px; border-width: 2px; }
/* Quatre repères sur une rangée : le mot passe à la ligne, sans point. */
.pl-epure .pl-puces-4 .pl-puce .pl-point { display: none; }
.pl-epure .pl-puces-4 .pl-puce { font-size: 12px; }
/* Le devant a six tuiles (cœur, anti-cœur, centre poitrine, sponsor ventre, numéro, bas) : deux rangées de trois. */
.pl-epure .pl-puces[style*="--pl-n: 5"],
.pl-epure .pl-puces[style*="--pl-n: 6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.modal.modal-placement.pl-epure .pl-puce:active { background: var(--pl-doux); border-color: var(--pl-anneau); }

.pl-epure .pl-vide { margin: 0; font-size: 13px; color: var(--text-dim); text-align: center; }

/* ── Pied : la promesse « ajustable ensuite », et Annuler à sa place ── */
.modal-placement.pl-epure .pl-pied {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 24px 20px;
}
.pl-epure .pl-legende { min-width: 0; font-size: 12px; line-height: 1.4; color: var(--text-mute); }
.modal.modal-placement.pl-epure .pl-pied .pl-annuler {
  flex: none; justify-content: center; min-width: 104px; height: 36px; padding: 0 16px;
  background: var(--bg); color: var(--text); font-size: 13px;
}

/* Écran tactile sans la coquille mobile (tablette) : des cibles au doigt. */
@media (pointer: coarse) {
  .modal.modal-placement.pl-epure .pl-repere { width: 44px; height: 44px; }
}

/* ── Téléphone : une feuille en bas d'écran ── */
/* Rendus dans la barre du haut (nom & numéro, image de la bibliothèque),
   les sélecteurs héritaient de son étage : 60, sous la barre de commande
   (63) et les onglets (64) — le bas de la feuille et « Annuler »
   passaient dessous. On soulève la barre le temps du sélecteur, comme
   pour la boîte de réglages. */
body.rmob .app .topbar:has(.placement-picker){ z-index:66 !important; }
/* La scène prend ce que la feuille laisse (88 % de l'écran moins
   l'en-tête, les onglets et le pied), entre 190 px et la moitié de
   l'écran : la feuille garde la même hauteur d'une pièce à l'autre. */
body.rmob .modal.modal-placement.pl-epure {
  --pl-h: clamp(190px, calc(88dvh - 372px), 50dvh);
  width: 100%; max-width: none; max-height: 88dvh;
  border-radius: 20px 20px 0 0; border-bottom: 0;
  animation: rmSheetUp .28s cubic-bezier(.32, .72, 0, 1);
}
body.rmob .modal-placement.pl-epure .pl-tete { padding: 24px 60px 0 16px; }
/* La poignée : on lit « feuille », on sait qu'on peut la quitter. */
body.rmob .modal-placement.pl-epure .pl-tete::before {
  content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px;
  border-radius: 999px; background: var(--line-strong);
}
body.rmob .modal-placement.pl-epure .pl-titre { font-size: 19px; margin-top: 8px; }
body.rmob .modal-placement.pl-epure .pl-sous { font-size: 13px; }
body.rmob .modal.modal-placement.pl-epure .pl-fermer { top: 14px; right: 10px; width: 44px; height: 44px; padding: 0; }
body.rmob .modal-placement.pl-epure .pl-corps { padding: 14px 16px 0; }
body.rmob .modal-placement.pl-epure .pl-rail-cadre { margin: 0 -16px; }
body.rmob .modal-placement.pl-epure .pl-rail { padding: 0 16px; --pl-gouttiere: 16px; }
/* Quatre pièces tiennent dans 390 px ; au-delà, la rangée glisse. */
body.rmob .modal.modal-placement.pl-epure .pl-rail > .pl-onglet { flex: 1 0 76px; width: auto; padding: 2px 0 11px; }
/* Sur un écran plus étroit, le nom passe à la ligne plutôt que d'être
   coupé (« Manche gauc… »). */
body.rmob .modal-placement.pl-epure .pl-onglet-nom {
  font-size: 11.5px; letter-spacing: -.01em; white-space: normal; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
body.rmob .modal-placement.pl-epure .pl-vignette { width: 50px; height: 50px; }
body.rmob .modal.modal-placement.pl-epure .pl-suite { top: 15px; right: 8px; height: 28px; }
body.rmob .modal-placement.pl-epure .pl-piece { margin-top: 14px; padding: 12px; height: calc(var(--pl-h) + 24px); }
/* Le point se voit sous le doigt, la cible fait 44 px. */
body.rmob .modal.modal-placement.pl-epure .pl-repere { width: 44px; height: 44px; }
body.rmob .modal-placement.pl-epure .pl-repere .pl-point { width: 24px; height: 24px; border-width: 3.5px; }
body.rmob .modal-placement.pl-epure .pl-avec-puces .pl-repere .pl-point { width: 16px; height: 16px; border-width: 2.5px; }
body.rmob .modal-placement.pl-epure .pl-etiquette { font-size: 12.5px; padding: 6px 10px; }
body.rmob .modal-placement.pl-epure .pl-repere .pl-etiquette { left: calc(50% + 17px); }
body.rmob .modal-placement.pl-epure .pl-repere.pl-a-gauche .pl-etiquette { left: auto; right: calc(50% + 17px); }
body.rmob .modal-placement.pl-epure .pl-pied {
  flex-direction: column; align-items: stretch; gap: 10px;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
}
body.rmob .modal-placement.pl-epure .pl-legende { text-align: center; }
body.rmob .modal.modal-placement.pl-epure .pl-pied .pl-annuler { width: 100%; height: 46px; font-size: 14px; }


/* ══ LA BOÎTE DE RÉGLAGES — même vocabulaire ═══════════════════════
   Les styles en ligne de BoiteReglages passent ici (sauf la position et
   les coordonnées, calculées). Classe et position:fixed inchangées : la
   mesure --rm-boite et les règles :has() continuent de la trouver.
   · une poignée qu'on voit (six points) : la boîte se déplace ;
   · un titre court (« Numéro »), et dessous OÙ est l'élément —
     « ● Dos · Numéro (centre)  Changer › » — qui EST le bouton « Changer
     de zone » ;
   · des gestes de 14 px dans des boutons de 28 px (40 px au doigt). */
.pwai-boite-reglages {
  --pl-doux: var(--accent-soft);
  --pl-doux: color-mix(in oklch, var(--accent) 9%, transparent);
  --pl-anneau: var(--accent-line);
  --pl-anneau: color-mix(in oklch, var(--accent) 24%, transparent);
  z-index: 100004; width: 320px; max-height: 58vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 1px 2px oklch(0 0 0 / .06), 0 16px 40px oklch(0.25 0.02 250 / .16);
  animation: brEntree .16s ease-out;
}
@keyframes brEntree { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.pwai-boite-reglages .br-tete {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 6px; flex-shrink: 0;
  padding: 8px 8px 10px; border-bottom: 1px solid var(--line-soft);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.pwai-boite-reglages .br-tete:active { cursor: grabbing; }
.pwai-boite-reglages .br-poignee { flex: none; width: 14px; display: grid; place-items: center; color: var(--line-strong); transition: color .12s; }
.pwai-boite-reglages .br-tete:hover .br-poignee { color: var(--text-mute); }
.pwai-boite-reglages .br-titre {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; color: var(--text);
}
.pwai-boite-reglages .br-gestes { flex: none; display: flex; align-items: center; gap: 1px; }
.pwai-boite-reglages .br-geste {
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px;
  display: grid; place-items: center; background: transparent; color: var(--text-mute);
  cursor: pointer; transition: background .12s, color .12s;
}
.pwai-boite-reglages .br-geste:hover { background: var(--bg-elev); color: var(--text); }
/* Actif (verrouillé) : fond doux et anneau d'accent, l'icône reste sombre. */
.pwai-boite-reglages .br-geste.on { color: var(--text); background: var(--pl-doux); box-shadow: inset 0 0 0 1px var(--pl-anneau); }
.pwai-boite-reglages .br-sep { width: 1px; height: 16px; margin: 0 4px; background: var(--line); }
/* La ligne du lieu, sous le titre. */
.pwai-boite-reglages .br-lieu-ligne { flex: 0 0 100%; min-width: 0; padding-left: 22px; display: flex; }
.pwai-boite-reglages .br-lieu {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%;
  height: 26px; padding: 0 6px 0 9px; margin: 0; border: 0; border-radius: 999px;
  background: var(--bg-elev); color: var(--text-dim); font: inherit; font-size: 12px; font-weight: 600;
}
.pwai-boite-reglages .br-lieu-fixe { padding: 0 10px; }
.pwai-boite-reglages .br-lieu-point {
  width: 8px; height: 8px; border-radius: 999px; flex: none; box-sizing: border-box;
  border: 2px solid var(--accent); background: var(--bg);
}
.pwai-boite-reglages .br-lieu-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pwai-boite-reglages .br-lieu-verbe {
  flex: none; display: inline-flex; align-items: center; gap: 1px;
  padding-left: 8px; border-left: 1px solid var(--line-strong); color: var(--text); font-weight: 700;
}
button.br-lieu { cursor: pointer; transition: background .12s, color .12s; }
.pwai-boite-reglages button.br-lieu:hover { background: var(--pl-doux); color: var(--text); }
.pwai-boite-reglages button.br-lieu:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pl-doux), 0 0 0 1px var(--accent); }
.pwai-boite-reglages .br-corps { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 12px 12px; }
/* La police a sa ligne : son nom ne se tronque plus (« Osw… », « O.. »). */
.pwai-boite-reglages .pp-police { flex: 1 1 100% !important; }

/* Téléphone : feuille en bas, même rayon que les autres feuilles. */
.pwai-boite-reglages.br-feuille {
  width: auto; max-height: 56vh; border-radius: 20px 20px 0 0; border-bottom: 0;
  box-shadow: 0 -8px 32px oklch(0.25 0.02 250 / .14);
  animation: rmSheetUp .28s cubic-bezier(.32, .72, 0, 1);
}
.pwai-boite-reglages.br-feuille .br-tete { position: relative; padding: 18px 10px 10px 16px; cursor: default; }
.pwai-boite-reglages .br-poignee-barre {
  position: absolute; top: 7px; left: 50%; width: 36px; height: 4px; margin-left: -18px;
  border-radius: 999px; background: var(--line-strong);
}
.pwai-boite-reglages.br-feuille .br-titre { font-size: 15px; }
.pwai-boite-reglages.br-feuille .br-lieu-ligne { padding-left: 0; }
/* La boîte est rendue dans la barre du haut : la règle « .topbar button »
   (44 px, marge intérieure) est ramenée ici à la mesure de la boîte. */
body.rmob .app .topbar .pwai-boite-reglages.br-feuille .br-geste {
  width: 40px; height: 40px; min-width: 40px !important; min-height: 40px !important; padding: 0; border-radius: 10px;
}
body.rmob .app .topbar .pwai-boite-reglages .br-lieu {
  height: 32px; min-height: 0 !important; min-width: 0 !important; padding: 0 8px 0 12px; font-size: 13px;
}
.pwai-boite-reglages.br-feuille .br-corps { padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
/* LES OUTILS, EN UNE RANGÉE QUI TIENT. Au téléphone, la rangée glissait
   et coupait « Contour » au bord : une grille d'autant de colonnes que
   d'outils, l'icône au-dessus du mot, rien ne défile. */
body.rmob .pwai-boite-reglages .ec-outils-rangee {
  display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  overflow: visible !important; gap: 4px !important;
}
body.rmob .pwai-boite-reglages .ec-outils-rangee > .ts-btn {
  flex-direction: column; justify-content: center; gap: 4px !important;
  min-width: 0; min-height: 50px; padding: 6px 2px !important;
}
body.rmob .pwai-boite-reglages .ec-outils-rangee > .ts-btn > span {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px !important;
}

/* ══ LA BARRE DU HAUT, SUR UN TÉLÉPHONE ═══════════════════════════
   Relevé sur photo : « ↺ Recommencer » écrit en toutes lettres, coupé
   en plein mot, et par-dessus lui le bouton de fermeture rond du site
   hôte. Trois boutons larges plus un rond noir qui n'est pas à nous :
   ça ne tient pas dans 390 px, et personne ne peut viser juste.

   Les libellés disparaissent — les icônes suffisent, elles portent
   déjà leur infobulle — et la barre garde une réserve à droite pour le
   bouton de l'hôte, qu'on ne contrôle pas mais qu'on peut cesser de
   heurter. */
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  body.rmob .app .topbar .btn-reset-design .lbl { display: none; }
  body.rmob .app .topbar .btn-reset-design {
    margin-left: 6px; padding: 0; width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
  }
  /* La place du bouton de fermeture de l'hôte (rond, en haut à droite) :
     44 px de garde, plus la marge de sécurité de l'écran. */
  body.rmob .app .topbar { padding-right: calc(52px + env(safe-area-inset-right, 0px)); }
  /* Le nom de la marque ne pousse plus le reste hors de l'écran. */
  body.rmob .app .topbar .brand-name {
    max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  body.rmob .app .topbar .icon-btn { width: 44px !important; height: 44px !important; border-radius: 22px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   LES AUTRES COLONNES REPRENNENT LE PRINCIPE DE « COLORIER »   (r655)
   ══════════════════════════════════════════════════════════════════
   Mesuré à 390 px, feuille de 388 px de haut : Mockups 1130 px
   (2,9 écrans), Mon équipe 901 px (2,3), Ajouter 497 px (1,3).
   Colorier, lui, tient dans la feuille depuis qu'il a été coupé en
   deux écrans courts. On applique la même règle partout :

     — ce qui se CHOISIT est une grille de tuiles qu'on touche,
     — ce qui se RÈGLE est un second écran, avec un retour collé en
       haut,
     — aucun écran ne dépasse la feuille.

   Ce bloc est en FIN DE FICHIER : à spécificité égale, la dernière
   règle écrite gagne, et une media query n'ajoute aucune
   spécificité. Écrit plus haut, il serait inerte. */

/* ── La barre collante sert aussi aux panneaux à un seul bouton ──
   Sa grille de trois colonnes est faite pour « Pièces | Uni |
   Dégradé ». Quand il n'y a qu'un retour, un bouton large d'un tiers
   d'écran flotte tout seul : il reprend sa largeur naturelle. */
.ligne-barre:not(:has(.seg)) { grid-template-columns: auto 1fr; }

@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  /* ── « AJOUTER » : SIX CARTES EMPILÉES → UNE GRILLE DE TUILES ──
     Les cartes d'ajout étaient des lignes pleine largeur avec leur
     phrase d'explication : six lignes, 497 px, et la liste de ce qui
     est déjà posé passait sous le pli. En tuiles de deux colonnes, la
     phrase tombe (elle se lit une fois, pas dix) et tout l'écran de
     départ tient d'un coup d'œil. */
  body.rmob .ajout-grille {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
  }
  body.rmob .ajout-grille .add-el-card {
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: 7px; padding: 10px 10px 11px; border-radius: 12px;
    min-height: 92px;
  }
  body.rmob .ajout-grille .ael-ico { width: 34px; height: 34px; border-radius: 9px; }
  body.rmob .ajout-grille .ael-desc { display: none; }
  body.rmob .ajout-grille .ael-name { font-size: 13px; line-height: 1.25; }
  /* Le petit « + » de fin de ligne n'a plus de ligne où se poser. */
  body.rmob .ajout-grille .add-el-card > svg:last-child { display: none; }
  body.rmob .ajout-grille .ajout-tuile { padding: 0; gap: 0; min-height: 0; align-items: stretch; }
  body.rmob .ajout-grille .ajout-tuile.large { flex-direction: row; }
  body.rmob .ajout-grille .ajout-tuile.grande .ael-desc { display: block; }

  /* ── MOCKUPS : des vignettes qu'on touche ──
     Les cartes de scène faisaient la largeur d'un tiers de colonne
     dans une grille pensée pour un écran large. Deux colonnes, une
     vignette plus haute : on reconnaît le décor sans plisser les yeux
     et la cible fait plus de 44 px. */
  /* Dix-huit décors en grille, c'est six rangées : l'écran de choix
     faisait deux écrans à lui seul. En UNE LIGNE QUI DÉFILE, ils
     tiennent dans 110 px de haut et se parcourent au pouce — le geste
     naturel sur un téléphone. Les réglages, eux, sont sur l'autre
     écran : rien ne se perd. */
  body.rmob .app .right .mockup-grid {
    display: flex !important; grid-template-columns: none !important;
    gap: 8px !important; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-bottom: 2px; scroll-snap-type: x proximity;
  }
  body.rmob .app .right .mockup-grid::-webkit-scrollbar { display: none; }
  /* La vignette garde son ratio : c'est LUI qui lui donne sa hauteur.
     Son décor est en position absolue, inset:0 — sans ratio, la carte
     retombe à deux pixels de haut et la ligne devient un trait. */
  body.rmob .app .right .mockup-card {
    flex: 0 0 116px; width: 116px; aspect-ratio: 4/3;
    scroll-snap-align: start;
  }
  body.rmob .app .right .mockup-card .label { font-size: 11.5px; }

  /* ── LES PHRASES D'EXPLICATION SE LISENT UNE FOIS ──
     Chaque section porte son mode d'emploi : utile la première fois,
     c'est ensuite de la hauteur prise à ce qu'on vient faire. Sur
     téléphone elles s'effacent — l'écran, lui, reste. */
  body.rmob .app .right .hint-panneau { display: none; }

  /* ── MON ÉQUIPE : la liste des joueurs respire ──
     Le roster était plafonné à 240 px de haut et défilait DANS un
     panneau qui défilait déjà : deux ascenseurs imbriqués sur un
     téléphone, c'est un piège à doigt. L'effectif étant désormais
     seul sur son écran, il prend la place et ne défile plus qu'une
     fois. */
  /* (La liste plafonnée à 240 px n'existe plus : « Mon équipe » a une
     seule zone qui défile — voir le bloc MON ÉQUIPE — PARCOURS SIMPLE.) */
  body.rmob .player-row, body.rmob .roster-row { min-height: 44px; }

  /* Un second écran n'a pas d'en-tête : la barre collante le nomme.
     Sans ça, un espace vide s'ouvrait au-dessus du retour. */
  body.rmob .app .right .barre-collante { margin-top: 0; }
}

/* ── ASSISTANT IA : LES DEUX PORTES EN HAUT, LA CONSIGNE DESSOUS (r656) ──
   La zone de saisie commençait à 796 px du haut sur un écran de 844 :
   sous le pli, derrière le titre du panneau, le bandeau de compte,
   l'avertissement produit et la phrase d'explication. « C'est
   compliqué » — oui : quatre choses à traverser avant la seule qu'on
   vient faire, écrire.
   Les deux portes — Créer / Reproduire — sont collées en haut, comme le
   retour de Colorier. Ce qui explique s'efface : les deux boutons se
   comprennent seuls. Et la consigne devient assez grande pour qu'on
   voie ce qu'on écrit. */
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  body.rmob .app .right .portes-ia { grid-template-columns: 1fr 1fr; }
  body.rmob .app .right .portes-ia button {
    width: 100%; min-width: 0; height: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 8px !important; margin: 0; font-size: 12.5px; line-height: 1.15;
    text-align: center;
  }
  /* La phrase sous les portes disait ce que les portes disent déjà. */
  body.rmob .app .right .barre-collante + div[style*="text-mute"] { display: none; }
  body.rmob .app .right .ai-prompt { min-height: 120px; font-size: 15px; }
  /* Le bandeau de compte, descendu près de « Générer », n'a plus besoin
     de la place d'un en-tête. */
  body.rmob .app .right .rp-solde { padding-top: 4px; }
}

/* ── LA BARRE DU BAS EST CARRÉE, ET ELLE GLISSE D'UN SEUL TENANT (r657) ──
   « Le bouton Créer avec l'IA, ne le laisse pas fixe : tu le fais
   glisser avec tout. Et il faut que tout soit carré en bas, parce que
   là, il est arrondi, c'est dégueulasse. »
   L'onglet IA était épinglé — une pastille arrondie posée sur une barre
   d'onglets carrés, qui restait pendant que les autres défilaient. Il
   redevient un onglet comme les autres : pleine hauteur, angles droits,
   aucun décrochage. Il garde son dégradé — c'est lui qui le distingue,
   pas sa forme. */
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  body.rmob .app .topbar .tools .tool[title^="Créer avec"],
  body.rmob .app .topbar .tools .tool[title^="Create with"],
  body.rmob .app .topbar .tools .tool[title="IA"],
  body.rmob .app .topbar .tools .tool[title="AI"] {
    position: static !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    padding: 7px 10px !important;
  }
  /* Rien d'arrondi dans la barre du bas, ni la barre elle-même. */
  body.rmob .app .topbar .tools,
  body.rmob .app .topbar .tools .tool { border-radius: 0 !important; }
}

/* ── UNE POP-UP SE FERME AVEC SON PROPRE BOUTON (r657) ──
   « Il y a deux boutons qui se superposent pour la pop-up et pour le
   configurateur, et ça ferme le configurateur au lieu de fermer la
   pop-up. »
   En iframe, le site hôte pose SA croix dans l'angle haut-droit de la
   fenêtre. La croix de la pop-up tombait exactement dessous : le doigt
   touchait celle du dessus, et c'est tout le configurateur qui se
   fermait. L'en-tête de pop-up réserve donc la place du bouton de
   l'hôte, comme la barre du haut le fait déjà — sa croix se décale à
   gauche, les deux ne se touchent plus. */
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  body.rmob .pop-entete,
  body.rmob .modal-head {
    padding-right: calc(52px + env(safe-area-inset-right, 0px)) !important;
  }
  /* ── ET L'EN-TÊTE EST PLUS BAS DE PLAFOND ──
     « La pop-up, je crois qu'elle est pas mal, mais on peut réduire en
     haut ; le header, il est très gros. » Sur un téléphone, ces trois
     étages — titre, sous-titre, rangée d'étapes — mangeaient un sixième
     de la fenêtre avant le premier contenu. */
  body.rmob .pop-entete,
  body.rmob .modal-head { padding-top: 9px !important; padding-bottom: 9px !important; }
  body.rmob .pop-entete > div > div:first-child { font-size: 13.5px !important; }
  body.rmob .pop-entete > div > div:nth-child(2) { font-size: 11px !important; line-height: 1.35; }
  body.rmob .modal-head h2 { font-size: 13.5px; }
}

/* ── ASSISTANT IA : LA FENÊTRE DE TEXTE EST LA VEDETTE (r657) ──
   « Il faut mettre en avant la fenêtre avec le texte. » C'est le geste
   du panneau — tout le reste est décor. Elle sort de sa carte, prend la
   largeur, grandit, et son étiquette devient une ligne discrète au lieu
   d'un titre de section. */
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  body.rmob .app .right .ai-prompt {
    min-height: 168px !important; font-size: 16px !important; line-height: 1.45;
    padding: 12px 12px !important; border-radius: 14px;
    border: 1.5px solid var(--line-strong);
  }
  body.rmob .app .right .ai-prompt:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft, rgba(30,110,230,.14));
  }
  /* La section qui la porte ne l'encadre plus une deuxième fois. */
  body.rmob .app .right .rp-section:has(> .ai-prompt),
  body.rmob .app .right .rp-section:has(.ai-prompt) {
    background: transparent; border: 0; padding-left: 0; padding-right: 0;
  }
  body.rmob .app .right .rp-section:has(.ai-prompt) > .rp-label {
    font-size: 11px; letter-spacing: .04em; margin-bottom: 5px;
  }
}

/* ── LA BARRE DU HAUT NE PERD PLUS DE BOUTON (r663) ──
   « J'ai perdu mon espace client en haut. »
   Mesuré à 390 px, avec un client hôte connecté : la barre a besoin de
   478 px. Elle n'en a que 390, rien ne défile, et ce qui dépasse est
   simplement COUPÉ — le bouton « ? » sortait à x=394, hors de l'écran,
   et la réserve du bouton de l'hôte avec lui. Selon ce que le contexte
   ajoute (Mon espace, crédits IA, langue, changer de produit), c'est
   l'un ou l'autre qui tombe, sans prévenir.

   Deux règles, et le problème ne peut plus revenir : aucun bouton ne
   rétrécit (un bouton écrasé à 0 px n'est pas caché, il est perdu), et
   la barre défile quand elle déborde. On swipe, au pire — on ne perd
   plus rien. */
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  body.rmob .app .topbar {
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  body.rmob .app .topbar::-webkit-scrollbar { display: none; }
  body.rmob .app .topbar > * { flex-shrink: 0; }
  /* Les boutons de la barre gardent leur cible, comme « Recommencer »
     et les ronds : c'est ce qui manquait à .top-btn. */
  body.rmob .app .topbar .top-btn {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* La réserve du bouton de l'hôte ne peut pas être un padding sur un
     conteneur qui défile : elle défilerait avec. C'est un bloc en fin
     de barre — il tient la place, et il suit le contenu. */
  body.rmob .app .topbar { padding-right: 10px; padding-left: 6px; gap: 2px; }
  /* Sept ronds de 44 px, un logo et la réserve de l'hôte : à 8 px
     d'écart on dépassait de 118 px. L'écart entre deux cibles de 44 px
     n'a pas besoin d'être large — c'est la CIBLE qui compte, pas le
     vide autour. Les marges posées en style en ligne (6 px à droite de
     « Mon espace » et des crédits, 10 px à gauche du « ? ») s'ajoutaient
     par-dessus : sur un téléphone elles ne servent plus. */
  body.rmob .app .topbar .top-btn,
  body.rmob .app .topbar .icon-btn { margin-left: 0 !important; margin-right: 0 !important; }
  body.rmob .app .topbar > span[aria-hidden="true"]:last-child {
    width: calc(52px + env(safe-area-inset-right, 0px)) !important;
    margin-left: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   LE MENU DU HAUT, SUR TÉLÉPHONE                              (r664)
   ══════════════════════════════════════════════════════════════════
   « Il faut tout remettre : mon espace, l'IA, la langue et tout. Sur
   mobile, tu fais un menu hamburger avec tous ces trucs. »

   r653 avait effacé les libellés pour faire tenir sept boutons dans
   390 px. C'était la mauvaise réponse : un bouton sans mot n'est pas
   un bouton plus petit, c'est un bouton qu'on ne reconnaît plus — et
   « Mon espace » s'était perdu dans le lot.

   Ici, RIEN N'EST RETIRÉ du document. Les boutons sont tous là, dans
   l'ordre où ils ont toujours été ; sur téléphone ils se replient
   derrière un bouton menu, et se déplient en liste, pleine largeur,
   avec leurs mots. Le repli est purement visuel : le bouton de langue,
   injecté par le chargeur et non par React, entre dans le menu sans
   qu'on ait à le déplacer — c'est ce qui rend la chose sûre.

   Sur ORDINATEUR, la barre est exactement celle d'avant : le bouton
   menu n'existe pas. */
.top-burger { display: none; }
.tb-etat-mob { display: none; }

/* ══ LA BARRE DU HAUT, REMISE EN ORDRE ══════════════════════════════
   Gauche : marque + retour aux produits. Centre : nom du design et état
   de la sauvegarde. Droite : Sauvegarder (bouton principal), icônes,
   langue, compte. Une seule hauteur (36 px), un seul style. */
.topbar { gap: 0; }
.tb-gauche, .tb-centre, .tb-droite { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tb-gauche .brand { margin-right: 4px; }
.tb-centre { flex: 1 0 auto; justify-content: flex-start; padding: 0 16px; }   /* le nom du design, calé à gauche (25/10) */
.topbar .tb-centre ~ .topbar-spacer { display: none; }
.tb-droite { margin-right: 12px; padding-right: 12px; border-right: 1px solid var(--line); }
.tb-icone, .tb-compte, .tb-langue, .topbar .tb-droite .top-btn {
  height: 36px; border-radius: 8px; font-size: 13px; font-weight: 500;
  border: 1px solid var(--line); background: var(--bg); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; flex-shrink: 0; transition: background .12s, border-color .12s, color .12s;
}
/* « Changer de produit » : vignette + nom + action, toujours écrit. */
.tb-produit {
  height: 40px; max-width: 260px; padding: 0 10px 0 4px; gap: 8px; flex-shrink: 1; min-width: 0;
  display: inline-flex; align-items: center; cursor: pointer; text-align: left;
  border: 1px solid var(--line-strong, var(--line)); border-radius: 10px; background: var(--bg); color: var(--text);
  transition: background .12s, border-color .12s;
}
.tb-produit:hover { background: var(--bg-elev); border-color: var(--text-dim); }
.tb-produit:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.tb-produit-vign {
  width: 32px; height: 32px; border-radius: 7px; flex-shrink: 0; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; background: var(--bg-elev); color: var(--text-dim);
}
.tb-produit-vign img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tb-produit-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; overflow: hidden; line-height: 1.15; }
.tb-produit-nom { font-size: 11.5px; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-produit-act { font-size: 13px; font-weight: 600; white-space: nowrap; }
.tb-produit-chev { font-size: 11px; color: var(--text-dim); flex-shrink: 0; }
/* Sur ordinateur, « Changer de produit » vit en bas, sur le nom du produit
   (barre de commande) ; la puce du haut ne reste qu'au téléphone. */
body:not(.rmob) .app .topbar .tb-produit { display: none; }
.ob-changer { padding: 4px 12px 4px 4px; margin-left: -4px; border: 1px solid transparent; border-radius: 10px; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer; transition: background .12s, border-color .12s; max-width: 420px; min-width: 0; }
.ob-changer:hover { background: var(--bg-soft); border-color: var(--line); }
.ob-changer:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.ob-changer .ob-thumb { flex: none; overflow: hidden; }
.ob-changer .ob-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ob-prod-txt { display: flex; flex-direction: column; min-width: 0; }
.ob-prod-txt .ob-prod-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-prod-txt .ob-prod-sub { display: flex; gap: 8px; white-space: nowrap; overflow: hidden; }
.ob-changer-act { font-weight: 700; color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.ob-prod-ref { overflow: hidden; text-overflow: ellipsis; }
.topbar .tb-droite .top-btn { padding: 0 14px; }
.topbar .tb-droite .top-btn.primary { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 600; }
.topbar .tb-droite .top-btn.primary:hover { background: oklch(0.32 0.008 250); }
.topbar .tb-droite .top-btn .lbl { display: inline; }
.tb-icone { width: 36px; padding: 0; font-size: 15px; font-weight: 700; color: var(--text-dim); }
.tb-icone:hover, .tb-compte:hover, .topbar .tb-droite .top-btn:not(.primary):hover { background: var(--bg-elev); border-color: var(--line-strong); color: var(--text); }
.topbar .tb-droite .btn-reset-design { margin: 0; padding: 0; border-radius: 8px; font-size: 16px; }
.topbar .tb-droite .btn-reset-design:hover { border-color: #e53935; color: #e53935; }
.tb-compte { padding: 0 12px; }
.tb-compte.tb-avatar { width: 36px; padding: 0; border-radius: 50%; background: var(--bg-elev); }
.tb-langue { padding: 2px; gap: 2px; }
.tb-langue button {
  height: 30px; min-width: 32px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent;
  color: var(--text-dim); font: 600 12px/1 inherit; letter-spacing: .04em; cursor: pointer;
}
.tb-langue button.on { background: var(--text); color: var(--bg); }
.tb-nom {
  min-width: 60px; max-width: 280px; width: 22ch; height: 32px; padding: 0 8px; text-align: left;
  border: 1px solid transparent; border-radius: 6px; background: transparent;
  font: 600 13.5px/1 inherit; color: var(--text); text-overflow: ellipsis;
}
.tb-nom:hover { border-color: var(--line); }
.tb-nom:focus { outline: none; border-color: var(--line-strong); background: var(--bg); }
.tb-etat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-mute); white-space: nowrap; }
.tb-etat .dot, .tb-etat-mob { width: 6px; height: 6px; border-radius: 50%; background: oklch(0.65 0.16 145); flex-shrink: 0; }
.tb-etat-encours .dot, .tb-etat-mob.tb-etat-encours { background: oklch(0.75 0.15 75); animation: tbPulse 1s ease-in-out infinite; }
.tb-etat-erreur .dot, .tb-etat-mob.tb-etat-erreur { background: #e53935; }
@keyframes tbPulse { 50% { opacity: .35; } }
@media (max-width: 1560px) {
  .tb-compte:not(.tb-avatar) .lbl { display: none; }
  .tb-compte { width: 36px; padding: 0; }
  .tb-nom { width: 14ch; }
}
/* LES ONGLETS DU HAUT TIENNENT À L'ÉCRAN. À 1 440 px, « Mon équipe » et
   « Mockups » sortaient à droite : la barre, faite de blocs qui ne
   rétrécissaient jamais, mesurait 1 759 px. Sous 1 700 px, l'état de la
   sauvegarde ne garde que son point (le texte reste lu par les lecteurs
   d'écran), le bouton produit et le centre rétrécissent, les onglets se
   resserrent. Aucun bouton n'est retiré. */
/* 24/10 : l'onglet « Calques » en plus — à 1 920 px, « Exporter » sortait à droite : la barre se resserre plus tôt
   (les numéros des étapes restent : « pourquoi t'as enlevé les numéros ? »). */
@media (min-width: 861px) and (max-width: 2100px) {
  .topbar .tb-etat .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tb-nom { width: 12ch; }
  .top-btn { padding: 0 9px; }
  .tb-centre { padding: 0 8px; flex: 1 1 auto; min-width: 0; }
  .tb-gauche { flex-shrink: 1; min-width: 0; }
  .tool { padding: 0 8px; gap: 5px; }
  .tools { margin-left: 8px; }
  .tb-droite { margin-right: 8px; padding-right: 8px; }
}
@media (min-width: 861px) and (max-width: 1600px) {
  .topbar .brand-name { display: none; }   /* la marque garde son logo */
}
@media (min-width: 861px) and (max-width: 1439px) {
  .topbar .tb-produit-vign, .topbar .tool-num, .topbar .tools-sep { display: none; }
  .tool { padding: 0 7px; }
  .tb-gauche, .tb-droite { gap: 6px; }
}

/* ══ TÉLÉPHONE : flèche + logo + état + menu ; le reste dans un tiroir ══ */
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  body.rmob .app .topbar .tb-droite,
  body.rmob .app .topbar .tb-centre { display: none !important; }
  body.rmob .app .topbar .tb-gauche { gap: 2px; flex: 1 1 auto; min-width: 0; order: 0; }
  body.rmob .app .topbar .tb-gauche .brand { order: 2; min-width: 0; overflow: hidden; }
  /* Téléphone : la puce « Changer de produit » remplace la flèche seule,
     visible sans ouvrir le menu, 44 px de haut. */
  body.rmob .app .topbar .tb-produit { order: 3; height: 44px; max-width: none; margin-left: 8px; padding: 0 10px 0 12px; flex: 0 1 auto; }
  body.rmob .app .topbar .tb-produit-vign { display: none; }
  body.rmob .app .topbar .tb-produit-nom { display: none; }
  body.rmob .app .topbar .tb-produit-act { font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
  body.rmob .app .topbar .tb-etat-mob { display: block; margin: 0 6px; }
  body.rmob .app .topbar .top-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 44px; min-width: 44px; height: 44px; flex-shrink: 0;
    padding: 0 11px; border: 0; border-radius: 10px;
    background: transparent; cursor: pointer;
  }
  body.rmob .app .topbar .top-burger span {
    display: block; height: 2px; width: 100%; border-radius: 2px; background: var(--text);
  }
  body.rmob .app .topbar .topbar-spacer { display: none !important; }
}

/* Le tiroir : à droite, au-dessus de tout (y compris #rmobClose et la
   feuille du bas), fermé par un toucher dehors, la croix ou Échap. */
.tb-tiroir-fond {
  position: fixed; inset: 0; z-index: 100030; background: rgba(15,15,20,.38);
  animation: tbFondin .16s ease-out;
}
.tb-tiroir {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(86vw, 340px);
  display: flex; flex-direction: column; gap: 8px; overflow-y: auto;
  padding: calc(10px + env(safe-area-inset-top, 0px)) calc(14px + env(safe-area-inset-right, 0px))
           calc(16px + env(safe-area-inset-bottom, 0px)) 14px;
  background: var(--bg, #fff); box-shadow: -18px 0 40px -18px rgba(0,0,0,.35);
  animation: tbTiroirin .2s ease-out;
}
@keyframes tbFondin { from { opacity: 0; } }
@keyframes tbTiroirin { from { transform: translateX(100%); } }
.tb-tiroir-tete { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin-bottom: 4px; }
.tb-tiroir-marque { font-weight: 700; font-size: 15px; min-width: 0; }
.tb-tiroir-marque img { max-height: 28px; max-width: 160px; object-fit: contain; display: block; }
.tb-tiroir .tb-tiroir-x {
  width: 44px; height: 44px; min-width: 44px; border: 0; border-radius: 22px; background: var(--bg-elev, #f4f4f5);
  font-size: 24px; line-height: 1; color: var(--text); cursor: pointer;
}
.tb-tiroir .tb-ligne {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; height: auto; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft, #fafafa);
  color: var(--text); font-size: 15px; font-weight: 600; text-align: left; cursor: pointer;
}
.tb-tiroir .tb-ligne > span:nth-child(2) { flex: 1 1 auto; }
.tb-tiroir .tb-ligne-primaire { background: var(--text); color: var(--bg); border-color: var(--text); }
.tb-tiroir .tb-ligne-primaire .tb-etat { color: inherit; opacity: .75; font-weight: 500; }
.tb-tiroir .tb-ligne-danger { margin-top: auto; color: #c62828; background: transparent; }
.tb-tiroir .tb-ico-txt { width: 16px; text-align: center; font-weight: 700; }
.tb-tiroir .tb-ligne-langue { cursor: default; }
.tb-tiroir .tb-langue { height: 40px; border-radius: 10px; }
.tb-tiroir .tb-langue button { height: 34px; min-width: 44px; font-size: 13px; }

/* ═══ LES BANDES ═══════════════════════════════════════════════════
   Le bloc vit dans la pièce ouverte de Colorier. Rien de flottant :
   une bande se règle en regardant le maillot, pas une fenêtre. */
.bandes-bloc { margin-top: 10px; }
.bandes-bloc .rp-label .top-btn { padding: 3px 8px; font-size: 11px; }

.bande-ligne {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px 10px;
  margin-top: 8px;
  background: var(--bg);
}
/* DEUX RANGS, TOUJOURS. La colonne de réglages fait 250 px : sur un seul
   rang, « En travers » écrasait le nom et la référence Pantone se
   perdait dans les points de suspension. Le nom et la corbeille sur le
   premier rang, le sens sur le second — c'est lisible à toutes les
   largeurs, et ça évite une règle qui ne vaut qu'en dessous de 560. */
.bande-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bande-tete > .icon-btn { margin-left: auto; }
/* La pastille ouvre la pop-up Pantone, comme celle d'une pièce : même
   geste, même sélecteur, même référence en sortie. */
.bande-pastille {
  width: 28px; height: 28px; padding: 0; border: 1px solid var(--line-strong);
  border-radius: 7px; cursor: pointer; flex: none;
  box-shadow: inset 0 0 0 2px var(--bg);
}
.bande-pastille:hover { border-color: var(--accent); }
/* Le nom tient sur deux lignes : « Bande 1 », et dessous la référence
   qui partira à l'atelier. C'est elle qu'on relit avant de commander. */
.bande-nom {
  display: flex; flex-direction: column; line-height: 1.25;
  font-size: 12px; font-weight: 600; flex: 0 1 auto; min-width: 0;
}
.bande-pantone {
  font-size: 10.5px; font-weight: 500; color: var(--text-mute);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* Le sens pousse la corbeille au bout de la ligne : la suppression est
   au même endroit sur toutes les bandes, on ne la cherche pas. */
.bande-sens { display: flex; gap: 4px; width: 100%; order: 3; margin-top: 2px; }
.bande-sens .seg-btn { flex: 1; }
.bande-sens .seg-btn {
  padding: 4px 7px; font-size: 11px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg); color: var(--text-dim);
  /* Sans ça, « En travers » se casse en deux lignes dans la colonne de
     droite et la ligne d'en-tête double de hauteur. */
  white-space: nowrap;
}
/* Le nom cède la place avant les boutons : c'est lui qu'on peut tronquer
   sans rien perdre — « Bande 1 » se devine, « En travers » non. La coupe
   se fait sur les LIGNES, pas sur la colonne : sinon les deux lignes
   s'écrasent en une seule et la référence Pantone disparaît. */
.bande-nom > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bande-sens .seg-btn.on {
  border-color: var(--accent); background: var(--accent-soft);
  color: var(--text); font-weight: 600;
}

/* Sur un téléphone, la ligne d'en-tête tient sur deux rangs plutôt que
   de comprimer les boutons jusqu'à les rendre intouchables. */


/* ── Réglages d'une bande : des champs, pas des réglettes ──────────
   « Des réglages avec la réglette, c'est trop compliqué. » Un champ dit
   son nombre et son unité ; deux boutons l'avancent d'un cran connu. Sur
   un téléphone, le doigt ne couvre plus ce qu'il règle. */
.bande-champ {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 7px;
}
.bc-label { font-size: 11.5px; color: var(--text-dim); min-width: 0;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-ctrl {
  display: flex; align-items: center; gap: 0; flex: none;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  background: var(--bg);
}
/* 30 px de côté : la cible tactile recommandée, sans faire enfler la
   ligne. En dessous, on rate le bouton une fois sur trois. */
.bc-pm {
  width: 30px; height: 30px; border: none; background: none; cursor: pointer;
  font-size: 16px; line-height: 1; color: var(--text); flex: none;
}
.bc-pm:hover:not(:disabled) { background: var(--accent-soft); }
.bc-pm:disabled { opacity: .3; cursor: default; }
.bc-ctrl input {
  width: 44px; height: 30px; border: none; background: none; text-align: right;
  font-size: 12.5px; font-weight: 600; color: var(--text); padding: 0;
  -moz-appearance: textfield;
}
.bc-ctrl input::-webkit-outer-spin-button,
.bc-ctrl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bc-unite { font-size: 11px; color: var(--text-mute); padding: 0 6px 0 2px; }
/* La réglette sous le champ (demande d'Olivier : « les réglettes, c'est
   plus rapide, mais laisse une entrée de texte pour être précis »).
   Les −/+ et la saisie restent ; les trois disent le même nombre. */
.bande-champ { flex-wrap: wrap; row-gap: 2px; }
.bc-reglette {
  flex: 1 0 100%; width: 100%; height: 26px; margin: 0; padding: 0;
  accent-color: var(--accent); cursor: pointer; touch-action: pan-y;
  background: transparent;
}
.bc-reglette:disabled { opacity: .4; cursor: default; }

/* Une création enregistrée avant la séparation des bandes groupées. */
.bande-heritage {
  margin-top: 8px; padding: 7px 9px; border-radius: 8px;
  background: var(--accent-soft); font-size: 11px; color: var(--text-dim);
  line-height: 1.4;
}
.bande-heritage .ob-btn { margin-top: 5px; height: 24px; font-size: 11px; padding: 0 9px; }

/* Les deux entrées de la pipette : son propre design, ou l'écran. */
.pipette-sources { display: flex; gap: 6px; margin-bottom: 7px; }
.pipette-sources .ob-btn { flex: 1; height: 28px; font-size: 12px; padding: 0 8px; }
/* Et ses deux sorties : la couleur exacte, ou son Pantone. */
.pipette-sorties { display: flex; gap: 5px; flex: none; }
.pipette-sorties .ob-btn { height: 26px; padding: 0 9px; font-size: 11.5px; }

/* La pipette sur le vrai 3D : la fenêtre Pantone s'efface, ce bandeau
   dit quoi faire et comment revenir. */
.pipette-bandeau { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 1200;
  display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 14px;
  background: var(--panel, #fff); color: var(--text, #111); border: 1px solid var(--line, #ddd);
  border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.18); font-size: 13px; max-width: calc(100vw - 32px); }
.pipette-bandeau .ob-btn { height: 26px; padding: 0 9px; font-size: 12px; flex: none; }
body.rmob .pipette-bandeau { top: auto; bottom: 14px; }

/* ═══ MON ÉQUIPE — PARCOURS SIMPLE ════════════════════════════════
   (Charte : aucun TEXTE en couleur d'accent — elle vient du marchand et
   peut être claire. L'accent sert aux fonds, bords et repères ; le texte
   posé dessus prend --brand-on-primary.)
   Le panneau se lit de haut en bas, dans l'ordre où on le remplit :
   le RÉSUMÉ (combien, quelles tailles, combien ça coûte), puis trois
   étapes numérotées — 1 où imprimer, 2 les joueurs, 3 le style commun.
   Un joueur se modifie dans un VOLET qui prend la colonne : le maillot
   reste entièrement visible à côté. Coller une liste a son propre volet.
   Tout repose sur les variables du configurateur (--bg, --line, --text,
   --accent…) ; les trois couleurs d'état ci-dessous en dérivent. */
.eqp {
  --eqp-ok: oklch(0.56 0.13 150);
  --eqp-warn: oklch(0.50 0.11 62);
  --eqp-warn-line: oklch(0.74 0.13 72 / 0.6);
  --eqp-warn-soft: oklch(0.95 0.045 78);
  --eqp-danger-soft: oklch(0.55 0.18 25 / 0.07);
  --eqp-danger-line: oklch(0.55 0.18 25 / 0.32);
  --eqp-actif: color-mix(in oklch, var(--accent) 6%, var(--bg));
  --eqp-gut: 16px;
  display: flex; flex-direction: column; min-height: 100%;
  color: var(--text); font-size: 13px;
}
.eqp .ico { flex-shrink: 0; }
.eqp button { cursor: pointer; }
.eqp button:disabled { cursor: default; opacity: .45; }

/* ── En-tête : le titre, le club et la saison ───────────────────── */
.eqp-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px var(--eqp-gut) 8px; }
.eqp-tete .rp-title { font-size: 15px; font-weight: 700; }
.eqp-tete .rp-title .ico { color: var(--text-dim); }
.eqp-club { display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 30px; padding: 0 8px; margin-right: -8px;
  border-radius: 7px; font-size: 12.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eqp-club:hover { background: var(--bg-elev); color: var(--text); }
.eqp-club .ico { color: var(--text-mute); }
.eqp-club-edit { display: flex; align-items: flex-end; gap: 6px; flex: 1; justify-content: flex-end; }
.eqp-club-edit label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text-dim); }
.eqp-club-edit label:first-child { flex: 1; max-width: 140px; }
.eqp-club-edit label:nth-child(2) { width: 64px; }
.eqp-club-edit .input { height: 32px; font-size: 13px; }
.eqp-club-edit .ob-btn { height: 32px; }

/* ── Le résumé ──────────────────────────────────────────────────── */
.eqp-resume { margin: 0 var(--eqp-gut) 14px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 1px 2px oklch(0 0 0 / 0.04); }
.eqp-chiffres { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.eqp-gros { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--text); white-space: nowrap; }
.eqp-petit { font-size: 12px; color: var(--text-dim); margin-top: 2px; white-space: nowrap; }
.eqp-prix { text-align: right; }
.eqp-palier { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--text-dim); line-height: 1.35; }
.eqp-palier b { color: var(--text); }
.eqp-palier .ico { color: var(--text); }
.eqp-tailles { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.eqp-resume.vide { padding-top: 10px; padding-bottom: 10px; }
.eqp-resume.vide .eqp-gros { font-size: 17px; }
.eqp-flux { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 12px; }
.eqp-tailles-lbl { font-size: 12px; font-weight: 700; color: var(--text-dim); margin-right: -2px; }
.eqp-tg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 100%; }
.eqp-tg-g { font-size: 12.5px; color: var(--text-dim); margin-right: 2px; }
.eqp-tailles-tete { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; margin-bottom: 6px;
  font-size: 12px; font-weight: 700; color: var(--text-dim); cursor: default !important; }
.eqp-tailles-aide { margin-left: auto; font-weight: 500; color: var(--text-mute); }
.eqp-tailles-resume { margin-left: auto; font-weight: 500; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eqp-tailles-resume b { color: var(--text); }
.eqp-tl-grille { display: flex; flex-direction: column; gap: 4px; }
.eqp-tl { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 6px; }
.eqp-tl-g { font-size: 12.5px; color: var(--text-dim); }
.eqp-tl-vide { font-size: 12px; color: var(--text-mute); }
.eqp-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.eqp-pill { padding: 0; border-radius: 999px; }
.eqp-pill-in { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 3px 0 9px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg); font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; color: var(--text);
  transition: border-color .12s, background .12s; }
.eqp-pill-in b { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center;
  background: var(--bg-elev); font-size: 12px; font-weight: 700; }
.eqp-pill:hover .eqp-pill-in { border-color: var(--accent); }
.eqp-pill.on .eqp-pill-in { background: var(--accent); border-color: var(--accent); color: var(--brand-on-primary, #fff); }
.eqp-pill.on .eqp-pill-in b { background: oklch(1 0 0 / 0.22); }
.eqp-alertes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.eqp-alerte-n { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border-radius: 999px; flex-shrink: 0;
  background: var(--eqp-warn-soft); color: var(--eqp-warn); border: 1px solid var(--eqp-warn-line); font-size: 13px; font-weight: 700; }
.eqp-alerte { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; background: var(--eqp-warn-soft); color: var(--eqp-warn); border: 1px solid var(--eqp-warn-line); }
.eqp-alerte.danger { background: var(--eqp-danger-soft); color: var(--danger); border-color: var(--eqp-danger-line); }
.eqp-alerte.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px currentColor; }
.eqp-pret { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--eqp-ok); }

/* ── Les étapes ─────────────────────────────────────────────────── */
.eqp-etape { padding: 14px var(--eqp-gut); border-top: 1px solid var(--line); }
.eqp-etape.compacte { padding-top: 8px; padding-bottom: 8px; }
.eqp-etape.compacte .eqp-pastille { width: 22px; height: 22px; }
.eqp-etape-tete { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.eqp-pastille { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--line-strong); background: var(--bg); color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; }
.eqp-etape.fait .eqp-pastille { background: var(--eqp-ok); border-color: var(--eqp-ok); color: #fff; }
.eqp-etape.courante .eqp-pastille { background: var(--accent); border-color: var(--accent); color: var(--brand-on-primary, #fff); }
.eqp-etape.a-venir .eqp-pastille { border-style: dashed; color: var(--text-mute); }
.eqp-etape-titre { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.eqp-gris { font-weight: 500; color: var(--text-dim); font-size: 12.5px; }
.eqp-etape-titre small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--text-dim); line-height: 1.4; }
.eqp-etape.a-venir .eqp-etape-titre { color: var(--text-dim); }
.eqp-etape.a-venir .eqp-etape-titre small { color: var(--text-mute); }
.eqp-etape-corps { margin-top: 12px; padding-left: 34px; display: flex; flex-direction: column; gap: 6px; }
.eqp-large { width: 100%; justify-content: center; height: 38px; }
.eqp-lien { align-self: center; padding: 6px 8px; font-size: 12.5px; color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px; }
.eqp-lien:hover { color: var(--text); }
.eqp-compte { display: inline-grid; place-items: center; min-width: 24px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px;
  background: var(--bg-elev); border: 1px solid var(--line); font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; vertical-align: 1px; }
.eqp-coller { height: 32px; padding: 0 10px; font-size: 12.5px; }
.eqp-accent { border-color: var(--accent); color: var(--text); background: var(--bg); }
.eqp-accent:hover { background: var(--accent-soft) !important; }
.eqp-regles { display: flex; gap: 7px; align-items: flex-start; font-size: 12.5px; color: var(--text-dim); line-height: 1.45; margin-top: 4px; }
.eqp-regles .ico { margin-top: 2px; color: var(--text-mute); }
.eqp-etape-corps > .eqp-lien-reset { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; padding: 4px 0 0 20px; }

/* Invitation à coller une liste — tant que l'équipe est vide */
.eqp-invite { margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 1.5px dashed var(--accent-line);
  background: color-mix(in oklch, var(--accent) 4%, var(--bg)); display: flex; flex-direction: column; gap: 6px; }
.eqp-invite-titre { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; }
.eqp-invite-titre .ico { color: var(--text); }
.eqp-invite p { margin: 0; font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }
.eqp-invite-btns { display: flex; gap: 6px; margin-top: 4px; }
.eqp-invite-btns .ob-btn { flex: 1; justify-content: center; height: 36px; }
.eqp-ou { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; font-size: 12px; color: var(--text-mute); }
.eqp-ou::before, .eqp-ou::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ── La liste ───────────────────────────────────────────────────── */
.eqp-barre { position: sticky; top: 0; z-index: 6; margin: 10px calc(-1 * var(--eqp-gut)) 0; padding: 8px var(--eqp-gut) 8px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-panneau); display: flex; flex-direction: column; gap: 8px; }
.eqp-barre-l1 { display: flex; gap: 8px; }
.eqp-recherche { margin: 0 !important; flex: 1; min-width: 0; height: 36px !important; padding: 0 6px 0 10px !important; border-radius: 8px !important; cursor: text; }
.eqp-recherche:focus-within { border-color: var(--accent); }
.eqp-recherche .ico { color: var(--text-mute); }
.eqp-recherche input { font-size: 13px !important; min-width: 0; height: 100%; }
.eqp-x { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; color: var(--text-mute); }
.eqp-x:hover { background: var(--bg-elev); color: var(--text); }
.eqp-ajout { height: 36px; padding: 0 14px; }
.eqp-tout { width: 34px; flex-shrink: 0; margin-right: -8px; }
.eqp-coller-m { display: none !important; }
.eqp-filtre { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 4px 10px; border-radius: 8px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--text); font-size: 12.5px; }
.eqp-filtre button { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; color: var(--text); }
.eqp-filtre button:hover { background: var(--accent-soft); }
.eqp-tete-liste { display: grid; grid-template-columns: 34px 46px 1fr auto; align-items: center; gap: 0 4px;
  padding: 2px 30px 6px 0; border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 600; color: var(--text-dim); }
.eqp-tete-liste .d { text-align: right; }
.eqp-coches-n { color: var(--text); white-space: nowrap; }
.eqp-case { display: grid; place-items: center; align-self: stretch; cursor: pointer; }
.eqp-case input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }

.eqp-liste { list-style: none; margin: 0; padding: 8px 0 2px; display: flex; flex-direction: column; gap: 6px; }
.eqp-ligne { display: grid; grid-template-columns: 34px 1fr; background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  transition: border-color .12s, background .12s, box-shadow .12s; }
.eqp-ligne:hover { border-color: var(--line-strong); }
.eqp-ligne-btn { display: grid; grid-template-columns: 40px 1fr auto 16px; align-items: center; gap: 10px;
  min-height: 52px; padding: 8px 10px 8px 2px; text-align: left; border-radius: 0 10px 10px 0; }
.eqp-dossard { width: 40px; height: 32px; border-radius: 7px; display: grid; place-items: center;
  background: var(--bg-elev); border: 1px solid var(--line); font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; color: var(--text); }
.eqp-dossard.vide { background: transparent; border: 1.5px dashed var(--eqp-warn-line); color: var(--eqp-warn); }
.eqp-qui { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.eqp-nom { font-size: 13.5px; font-weight: 700; letter-spacing: .01em; line-height: 1.25; overflow-wrap: anywhere; }
.eqp-nom.vide { font-weight: 500; font-style: italic; color: var(--text-mute); }
.eqp-flags { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.eqp-flag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; line-height: 1.3; }
.eqp-flag.actif { color: var(--text); }
.eqp-flag.warn { color: var(--eqp-warn); }
.eqp-flag.danger { color: var(--danger); }
.eqp-flag.regle { color: var(--text-dim); font-weight: 500; }
.eqp-coupe { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; white-space: nowrap; }
.eqp-coupe b { font-family: 'JetBrains Mono', monospace; font-size: 13.5px; font-weight: 700; }
.eqp-coupe span { font-size: 12px; color: var(--text-dim); }
.eqp-chev { color: var(--text-mute); display: grid; place-items: center; }
.eqp-ligne:hover .eqp-chev { color: var(--text); }
.eqp-ligne.actif { border-color: var(--accent); background: var(--eqp-actif); box-shadow: inset 3px 0 0 var(--accent); }
.eqp-ligne.coche { border-color: var(--accent-line); background: color-mix(in oklch, var(--accent) 9%, var(--bg)); }
.eqp-ligne.actif.coche { border-color: var(--accent); }
.eqp-aucun { margin-top: 10px; padding: 18px 14px; text-align: center; border: 1px dashed var(--line-strong); border-radius: 12px;
  background: var(--bg); font-size: 13px; color: var(--text-dim); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.eqp-aucun b { color: var(--text); }
.eqp-aucun p { margin: 0; }
.eqp-ajout.seul { flex: 1; justify-content: center; }
.eqp-rien { margin-top: 10px; }

/* ── En bas : la barre des cochés et l'annulation ────────────────── */
.eqp-bas { position: sticky; bottom: 0; z-index: 9; margin-top: auto; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none; }
.eqp-bas > * { pointer-events: auto; }
.eqp-selection { position: relative; display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 12px;
  background: var(--text); color: var(--bg); box-shadow: 0 10px 28px rgba(0, 0, 0, .28); }
.eqp-sel-n { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; cursor: pointer; min-height: 36px; }
.eqp-sel-n input { width: 18px; height: 18px; margin: 0; accent-color: oklch(0.85 0.06 255); cursor: pointer; }
.eqp-sel-n b { font-size: 15px; }
.eqp-selection > button { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px; border-radius: 8px;
  border: 1px solid oklch(1 0 0 / 0.22); color: var(--bg); font-size: 12.5px; font-weight: 600; }
.eqp-selection > button:hover, .eqp-selection > button.on { background: oklch(1 0 0 / 0.12); }
.eqp-selection > button.danger { color: oklch(0.82 0.09 25); border-color: oklch(0.72 0.14 25 / 0.55); width: 38px; justify-content: center; padding: 0; }
.eqp-selection > button.nu { border-color: transparent; width: 34px; justify-content: center; padding: 0; color: oklch(1 0 0 / 0.75); }
.eqp-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); padding: 12px; border-radius: 12px; background: var(--bg); color: var(--text);
  border: 1px solid var(--line-strong); box-shadow: 0 12px 32px rgba(0, 0, 0, .22); }
.eqp-menu-titre { font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.eqp-menu .eqp-chips button { height: 34px; }
.eqp-menu-sous { font-size: 12px; font-weight: 600; color: var(--text-dim); margin: 10px 0 6px; }
.eqp-toast { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 12px; background: var(--text); color: var(--bg);
  font-size: 13px; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); }
.eqp-toast span { flex: 1; min-width: 0; }
.eqp-toast button { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px; border-radius: 8px;
  color: oklch(0.86 0.07 255); font-weight: 700; font-size: 13px; }
.eqp-toast button:hover { background: oklch(1 0 0 / 0.1); }

/* ── Le volet (un joueur, ou coller une liste) ──────────────────── */
.eqp-volet { background: var(--bg-panneau); animation: eqp-entre .18s ease-out; }
@keyframes eqp-entre { from { transform: translateX(14px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .eqp-volet { animation: none; } }
.eqp-volet-tete { position: sticky; top: 0; z-index: 7; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  padding: 8px 10px; background: var(--bg); border-bottom: 1px solid var(--line); }
.eqp-retour { justify-self: start; display: inline-flex; align-items: center; gap: 2px; height: 36px; padding: 0 12px 0 6px; border-radius: 8px;
  border: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.eqp-retour:hover { background: var(--bg-elev); }
.eqp-volet-pos { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-dim); white-space: nowrap; }
.eqp-oeil { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--text); }
.eqp-volet-pos b { color: var(--text); }
.eqp-nav { justify-self: end; display: flex; gap: 4px; }
.eqp-nav button { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--text-dim); }
.eqp-nav button:hover { background: var(--bg-elev); color: var(--text); }
.eqp-volet-corps { flex: 1; padding: 14px var(--eqp-gut) 18px; }
.eqp-volet-pied { position: sticky; bottom: 0; z-index: 7; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 10px 12px; background: var(--bg); border-top: 1px solid var(--line); }
.eqp-volet-pied .ob-btn { height: 38px; padding: 0 14px; }
.eqp-volet .eqp-bas { bottom: 59px; margin-top: 0; }
.eqp-suppr { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 8px; color: var(--danger);
  font-size: 13px; font-weight: 600; border: 1px solid transparent; }
.eqp-suppr:hover { background: var(--eqp-danger-soft); border-color: var(--eqp-danger-line); }

.eqp-lbl { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px;
  font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; }
.eqp-lbl small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text-mute); font-size: 12px; }
.eqp-compteur { font-family: 'JetBrains Mono', monospace; }
.eqp-compteur.trop { color: var(--eqp-warn) !important; font-weight: 700 !important; }
.eqp-champs { display: grid; grid-template-columns: 84px 1fr; gap: 10px; }
.eqp-f { display: flex; flex-direction: column; min-width: 0; }
.eqp-champs-sup { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.eqp-champs-sup .eqp-f:nth-child(odd):last-child { grid-column: 1 / -1; }
.eqp-noms-sup { display: block; font-size: 11.5px; font-weight: 500; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eqp-table .eqp-noms-sup { display: inline; }
.eqp-nom-sup { display: flex; align-items: center; gap: 8px; }
.eqp-nom-sup-lbl { flex: 1; min-width: 0; font-size: 13px; }
.eqp-nom-sup-lbl small { color: var(--text-mute); margin-left: 4px; }
.eqp-nom-sup.place .eqp-nom-sup-lbl small { color: var(--ok, #16a34a); }
.eqp-nb-noms { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--text-mute); margin-top: 4px; }
.eqp-nb-noms select { width: 72px; height: 30px; }
.eqp-noms-sup-lien { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; margin: 0 0 10px; padding: 4px 12px; font-size: 12.5px; background: none; border: 0; cursor: pointer; }
.eqp-noms-sup-lien svg { flex-shrink: 0; }
.eqp-export { margin: 4px 0 12px; }
.eqp-note-noms { margin-top: 8px; }
.eqp-champ { height: 42px; padding: 0 12px; border-radius: 8px; border-color: var(--line-strong); font-size: 16px !important; font-weight: 700; }
.eqp-champ:focus { box-shadow: 0 0 0 3px var(--accent-soft); }
.eqp-champ-num { text-align: center; font-family: 'JetBrains Mono', monospace; padding: 0 6px; }
.eqp-champ-nom { text-transform: uppercase; letter-spacing: .02em; }
.eqp-aide { display: flex; gap: 7px; align-items: flex-start; margin-top: 8px; font-size: 12.5px; line-height: 1.4; color: var(--text-dim); }
.eqp-aide .ico { margin-top: 2px; }
.eqp-aide.warn { color: var(--eqp-warn); }
.eqp-aide.danger { color: var(--danger); }
.eqp-groupe { margin-top: 18px; }
.eqp-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 3px; border-radius: 10px; background: var(--bg-elev); border: 1px solid var(--line); }
.eqp-seg button { height: 36px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--text-dim); }
.eqp-seg button:hover { color: var(--text); background: oklch(1 0 0 / 0.5); }
.eqp-seg button.on { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px oklch(0 0 0 / 0.12), 0 0 0 1.5px var(--accent); }
.eqp-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.eqp-chips.enfants { grid-template-columns: repeat(3, 1fr); }
.eqp-chips button { height: 38px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--bg);
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: var(--text); }
.eqp-chips button:hover { border-color: var(--accent); }
.eqp-chips button.on { background: var(--accent); border-color: var(--accent); color: var(--brand-on-primary, #fff); }

.eqp-ajuster { margin-top: 20px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.eqp-ajuster.ouvert { border-color: var(--line-strong); }
.eqp-ajuster-tete { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; text-align: left; color: var(--text-dim); }
.eqp-ajuster-tete:hover { background: var(--bg-soft); }
.eqp-ajuster-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--bg-elev); color: var(--text-dim); }
.eqp-ajuster-titre { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--text); }
.eqp-ajuster-titre small { display: block; font-size: 12px; font-weight: 500; color: var(--text-dim); }
.eqp-badge { padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--text); border: 1px solid var(--accent-line);
  font-size: 12px; font-weight: 700; }
.eqp-ajuster-corps { padding: 0 12px 12px; border-top: 1px solid var(--line); }
.eqp-aj { padding: 12px 0 10px; border-bottom: 1px dashed var(--line); }
.eqp-aj-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.eqp-aj-tete b { font-size: 13px; }
.eqp-aj-tete .eqp-gris { font-size: 12px; }
.eqp-mini-btn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.eqp-mini-btn:hover:not(:disabled) { background: var(--bg-elev); color: var(--text); }
/* Deux rangées, au bureau comme au téléphone : le volet n'a que ~240 px
   utiles, le pas « − 6 cm + » ne tient pas entre le libellé et « à lui ». */
.eqp-aj-ligne { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "l o" "r r"; align-items: center; column-gap: 8px; row-gap: 2px; min-height: 38px; font-size: 12.5px; color: var(--text-dim); }
.eqp-aj-ligne > span:first-child { grid-area: l; }
.eqp-aj-ligne > output, .eqp-aj-ligne > .eqp-commun { grid-area: o; }
.eqp-aj-ligne > .eqp-rng, .eqp-aj-ligne > .eqp-pas { grid-area: r; }
.eqp-aj-ligne > .eqp-pas { margin-bottom: 4px; }
.eqp-aj-ligne output { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text); min-width: 54px; text-align: right; white-space: nowrap; }
.eqp-pas { display: inline-flex; align-items: center; justify-self: start; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; background: var(--bg); }
.eqp-pas button { width: 32px; height: 32px; display: grid; place-items: center; color: var(--text-dim); }
.eqp-pas button:hover { background: var(--bg-elev); color: var(--text); }
.eqp-unite { padding: 0 8px 0 0; font-size: 12px; color: var(--text-mute); border-right: 1px solid var(--line); align-self: stretch; display: grid; place-items: center; }
.eqp-pas input { width: 42px; border-right: 0 !important; height: 32px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); outline: 0; text-align: center;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; background: var(--bg); -moz-appearance: textfield; appearance: textfield; }
.eqp-pas input::-webkit-inner-spin-button, .eqp-pas input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.eqp-pas input::placeholder { color: var(--text-mute); font-weight: 500; }
.eqp-aj-ligne output.eqp-commun { font-family: inherit; font-size: 12px; color: var(--text-mute); }
.eqp-rng { position: relative; display: flex; align-items: center; min-width: 0; }
.eqp-rng::before { content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 12px; margin-left: -1px; transform: translateY(-50%);
  background: var(--line-strong); border-radius: 1px; pointer-events: none; }
.eqp input.eqp-range[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; position: relative; margin: 0; }
.eqp input.eqp-range[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--line-strong); }
.eqp input.eqp-range[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--accent); box-shadow: 0 1px 3px oklch(0 0 0 / 0.18); cursor: pointer; }
.eqp-check { display: flex; align-items: flex-start; gap: 9px; padding: 8px 0 2px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
.eqp-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
.eqp-check small { display: block; margin-top: 1px; font-size: 12px; font-weight: 500; color: var(--text-dim); }
.eqp-note { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 10px; padding: 9px 10px; border-radius: 8px;
  background: var(--bg-soft); border: 1px solid var(--line-soft); font-size: 12.5px; line-height: 1.45; color: var(--text-dim); }
.eqp-note .ico { margin-top: 1px; color: var(--text-mute); }
.eqp-note b { color: var(--text); }

/* ── Coller une liste ───────────────────────────────────────────── */
.eqp-colonnes { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 4px; margin: 12px 0 6px; }
.eqp-colonnes span { padding: 4px 0; text-align: center; border-radius: 6px; background: var(--bg); border: 1px solid var(--line);
  font-size: 12px; font-weight: 700; color: var(--text-dim); }
.eqp-colle textarea { display: block; width: 100%; min-height: 150px; white-space: pre; overflow-x: auto; padding: 10px 12px; border-radius: 10px; border: 1.5px dashed var(--line-strong);
  background: var(--bg); color: var(--text); font-family: 'JetBrains Mono', monospace; font-size: 12.5px; line-height: 1.65; resize: vertical; tab-size: 8; }
.eqp-colle textarea:focus { outline: 0; border-style: solid; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.eqp-colle textarea::placeholder { color: var(--text-mute); }
.eqp-fichiers { display: flex; gap: 6px; margin-top: 8px; }
.eqp-fichiers .ob-btn { flex: 1; justify-content: center; font-size: 12.5px; }
.eqp-table-wrap { margin-top: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); overflow: hidden; }
.eqp-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.eqp-table th { padding: 6px 8px; text-align: left; background: var(--bg-soft); border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 700; color: var(--text-dim); }
.eqp-table td { padding: 7px 8px; border-top: 1px solid var(--line-soft); vertical-align: top; }
.eqp-table tr:first-child td { border-top: 0; }
.eqp-table td.n, .eqp-table td.t { font-family: 'JetBrains Mono', monospace; font-weight: 700; white-space: nowrap; }
.eqp-table td.nm { font-weight: 700; overflow-wrap: anywhere; }
.eqp-table tr.a-note td { background: var(--eqp-warn-soft); }
.eqp-table tr.note td { border-top: 0; padding-top: 0; color: var(--eqp-warn); font-size: 12px; font-weight: 600;
  background: var(--eqp-warn-soft); }
.eqp-table tr.ignore td { color: var(--text-mute); font-size: 12px; }
.eqp-table tr.ignore .mono { font-size: 12px; }
.eqp-mode { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.eqp-radio { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; }
.eqp-radio input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); flex-shrink: 0; }
.eqp-radio b { font-size: 13px; }
.eqp-radio small { display: block; font-size: 12px; color: var(--text-dim); margin-top: 1px; }
.eqp-radio.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.eqp-volet .eqp-groupe > .eqp-etape-tete { margin-bottom: 0; }

/* ═══ TÉLÉPHONE ═══════════════════════════════════════════════════
   La feuille du bas : fond blanc, gouttière de 14 px, et RIEN sous
   44 px qui se touche. Les champs passent à 16 px : en dessous, iOS
   zoome la page au moment de taper. */
body.rmob .app .right .panel-body:has(.eqp) { padding: 0 !important; }
body.rmob .eqp { --eqp-gut: 14px; --eqp-actif: color-mix(in oklch, var(--accent) 7%, #fff); background: #fff; }
body.rmob .eqp-volet { background: #fff; }
body.rmob .eqp-tete { padding-top: 12px; padding-bottom: 8px; }
body.rmob .eqp-club { height: 44px; min-height: 44px; font-size: 13px !important; }
body.rmob .eqp-resume { margin-bottom: 12px; background: var(--bg-soft); padding: 12px; }
body.rmob .eqp-gros { font-size: 20px; }
body.rmob .eqp-tailles-tete { min-height: 44px !important; margin: -6px 0 -6px; font-size: 13px !important; cursor: pointer !important; }
body.rmob .eqp-tailles.replie .eqp-tailles-tete { margin-bottom: -10px; }
body.rmob .eqp-pill { min-height: 44px !important; }
body.rmob .eqp-pill-in { height: 30px; font-size: 13px; }
body.rmob .eqp-alerte { min-height: 44px !important; height: 44px; padding: 0 14px; font-size: 13px !important; }
body.rmob .eqp-etape { padding: 12px var(--eqp-gut); }
body.rmob .eqp-etape-corps { padding-left: 0; }
body.rmob .eqp-large, body.rmob .eqp-coller { min-height: 44px !important; }
body.rmob .eqp-barre { background: #fff; margin-top: 8px; }
body.rmob .eqp-recherche { height: 44px !important; }
body.rmob .eqp-recherche input { font-size: 16px !important; min-height: 0 !important; }
body.rmob .eqp-ajout { min-height: 44px !important; }
body.rmob .eqp-tete-liste { grid-template-columns: 44px 46px 1fr auto; padding-bottom: 4px; font-size: 12.5px; }
body.rmob .eqp-liste { gap: 6px; }
body.rmob .eqp-ligne { grid-template-columns: 44px 1fr; }
body.rmob .eqp-case input { width: 22px; height: 22px; }
body.rmob .eqp-ligne-btn { min-height: 58px !important; padding-left: 0; font-size: 13px !important; }
body.rmob .eqp-nom { font-size: 14.5px; }
body.rmob .eqp-flag { font-size: 12.5px; }
body.rmob .eqp-coupe b { font-size: 14px; }
body.rmob .eqp-coupe span { font-size: 12.5px; }
body.rmob .eqp-volet-tete { padding: 6px 8px; }
body.rmob .eqp-retour, body.rmob .eqp-nav button { min-height: 44px !important; height: 44px; }
body.rmob .eqp-nav button { width: 44px; }
body.rmob .eqp-champ { height: 48px; min-height: 48px !important; }
body.rmob .eqp-seg button, body.rmob .eqp-chips button { min-height: 44px !important; height: 44px; font-size: 13.5px !important; }
body.rmob .eqp-mini-btn { min-height: 44px !important; }
body.rmob .eqp-pas button { width: 44px; height: 44px; min-height: 44px !important; }
body.rmob .eqp-pas input { height: 44px; min-height: 44px !important; width: 54px; font-size: 16px !important; }
body.rmob .eqp-aj-ligne { row-gap: 0; }
body.rmob .eqp input.eqp-range[type=range] { height: 44px !important; }
body.rmob .eqp input.eqp-range[type=range]::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -12px; }
body.rmob .eqp-check { min-height: 44px; align-items: center; }
body.rmob .eqp-check input { width: 22px; height: 22px; }
body.rmob .eqp-volet-pied { padding: 8px 12px; }
body.rmob .eqp-volet-pied .ob-btn, body.rmob .eqp-suppr { min-height: 44px !important; height: 44px; }
body.rmob .eqp-volet .eqp-bas { bottom: 61px; }
body.rmob .eqp-selection > button { min-height: 44px !important; height: 44px; }
body.rmob .eqp-selection > button.danger { width: 44px; }
body.rmob .eqp-selection > button.nu { width: 44px; }
body.rmob .eqp-toast button { min-height: 44px !important; }
body.rmob .eqp-x { min-height: 36px !important; width: 36px; height: 36px; }
body.rmob .eqp-filtre button { min-height: 36px !important; width: 36px; height: 36px; }
body.rmob .eqp-invite-btns .ob-btn, body.rmob .eqp-fichiers .ob-btn { min-height: 44px !important; }
body.rmob .app .right .eqp-colle textarea { font-size: 16px; min-height: 160px; line-height: 1.6; }
body.rmob .eqp-radio { min-height: 52px; }
body.rmob .eqp-radio input { width: 22px; height: 22px; }
body.rmob .eqp-lien { min-height: 44px !important; }
body.rmob .eqp-club-edit .input { height: 44px; font-size: 16px !important; }

/* Le club et la saison : dans l'en-tête sur ordinateur, en pied de panneau sur téléphone. */
.eqp-club-bas { display: none; }
body.rmob .eqp-tete { display: none; }
body.rmob .eqp-club-bas { display: flex; justify-content: center; padding: 4px var(--eqp-gut) 12px; border-top: 1px solid var(--line); }
body.rmob .eqp-club-bas .eqp-club { margin: 0; }
body.rmob .eqp-club-bas .eqp-club-edit { justify-content: stretch; }
body.rmob .eqp-club-bas .eqp-club-edit label:first-child { max-width: none; }
body.rmob .eqp-resume { margin-top: 12px; }
body.rmob .eqp.pose .eqp-etape.fait { display: none; }
body.rmob .eqp.pose .eqp-joueurs { border-top: 0; padding-top: 0; }
body.rmob .eqp.pose .eqp-joueurs-tete { display: none; }
body.rmob .eqp-joueurs.petite .eqp-coller-m { display: none !important; }
body.rmob .eqp-coller-m { display: inline-flex !important; height: 44px; padding: 0 12px; }
body.rmob .eqp-tout { display: none; }
body.rmob .eqp-barre { margin-top: 0; }
body.rmob .eqp-barre-l1 { gap: 6px; }
body.rmob .eqp-ajout { padding: 0 12px; }
body.rmob .eqp-sel-n { min-height: 44px; }
body.rmob .eqp-sel-n input { width: 22px; height: 22px; }
body.rmob .eqp-tailles-tete { gap: 6px; }
body.rmob .eqp-tailles-lbl { font-size: 13px; }
body.rmob .eqp-tailles-resume { font-size: 13px; }
body.rmob .eqp-palier { margin-top: 10px; }
body.rmob .eqp-flux { gap: 2px 10px; }
body.rmob .eqp-unite { font-size: 13px; }
body.rmob .eqp-oeil { width: 28px; height: 28px; }
body.rmob .eqp-gros { font-size: 19px; }
body.rmob .eqp-tailles { margin-top: 8px; padding-top: 4px; }
body.rmob .eqp-tailles.replie .eqp-tailles-tete { margin-bottom: -8px; }
body.rmob .eqp.pose .eqp-etape .eqp-pastille { display: none; }
body.rmob .eqp-etape-corps > .eqp-lien-reset { padding-left: 20px; }
.eqp-coupe-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Ajouts de la réalisation (greffes) ────────────────────────────
   Ligne : la taille et la coupe sont un bouton à part (correction sur
   place), le chevron ouvre le volet comme le nom. */
.eqp-ligne { grid-template-columns: 34px 1fr auto 26px; align-items: stretch; }
.eqp-ligne-btn { grid-template-columns: 40px 1fr; padding-right: 4px; border-radius: 0; min-width: 0; }
.eqp-ligne-btn:focus-visible, .eqp-coupe:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
button.eqp-coupe { align-self: center; justify-content: center; padding: 4px 8px; margin: 4px 0; border-radius: 8px; border: 1px solid transparent; }
button.eqp-coupe:hover, button.eqp-coupe.on { border-color: var(--line-strong); background: var(--bg-soft); }
button.eqp-chev { border-radius: 0 10px 10px 0; }
.eqp-rapide { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 12px; border-top: 1px dashed var(--line); }
.eqp-rapide .eqp-chips button { height: 34px; }
.eqp-ligne.halo { animation: eqp-halo 1.6s ease-out; }
@keyframes eqp-halo { 0% { box-shadow: 0 0 0 4px var(--accent-line); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .eqp-ligne.halo { animation: none; } }
.eqp-barre-vide { flex: 1; align-self: center; font-size: 12px; color: var(--text-mute); }
/* Ajout rapide : Nº · nom · Ajouter */
.eqp-ajout-rapide { display: grid; grid-template-columns: 58px 1fr auto; gap: 6px; margin: 0; }
.eqp-ajout-rapide .input { height: 36px; border-radius: 8px; font-size: 13px; padding: 0 10px; min-width: 0; }
.eqp-ar-num { text-align: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; padding: 0 4px !important; }
.eqp-ar-nom { font-weight: 600; text-transform: uppercase; }
.eqp-ar-nom::placeholder { text-transform: none; font-weight: 500; }
.eqp-filtre small { display: block; font-size: 12px; color: var(--text-dim); margin-top: 1px; }
.eqp-astuce { font-size: 12px !important; color: var(--text-mute) !important; }
.eqp-alerte.regle { background: var(--bg); color: var(--text-dim); border-color: var(--line-strong); }
.eqp-menu-note { margin-top: 10px; font-size: 12px; color: var(--text-dim); }
.eqp-police-ref:empty { display: none; }
.eqp-police-ref { padding: 12px var(--eqp-gut) 0; }
.eqp-club-txt { overflow: hidden; text-overflow: ellipsis; }
.eqp:focus { outline: 0; }
/* Le lecteur « Sur le maillot ‹ Nº 7 · DUPONT › » : feuilleter sans ouvrir de volet. */
.eqp-lecteur { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg);
  border: 1px solid var(--line-strong); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.eqp-lecteur-nav { width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; color: var(--text-dim); }
.eqp-lecteur-nav:hover { background: var(--bg-elev); color: var(--text); }
.eqp-lecteur-qui { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 6px;
  border-radius: 8px; font-size: 12.5px; color: var(--text-dim); white-space: nowrap; }
button.eqp-lecteur-qui:hover { background: var(--bg-soft); }
.eqp-lecteur-qui .ico { color: var(--text); }
.eqp-lecteur-qui b { color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.eqp-lecteur.vide .eqp-lecteur-qui .ico { color: var(--text-mute); }
.eqp-lecteur-afficher { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 12px; border-radius: 8px;
  color: var(--text); font-weight: 700; font-size: 12.5px; }
.eqp-lecteur-afficher:hover { background: var(--accent-soft); }
/* Clavier du numéro au téléphone : chiffres, ou lettres (12BIS). */
.eqp-abc { height: 22px; padding: 0 6px; border-radius: 5px; border: 1px solid var(--line-strong); background: var(--bg);
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: var(--text-dim); letter-spacing: 0; }

body.rmob .eqp-ligne { grid-template-columns: 44px 1fr auto 30px; }
body.rmob .eqp-ligne-btn { padding-right: 2px; }
body.rmob button.eqp-coupe { min-height: 44px !important; margin: 4px 0; padding: 4px 6px; }
body.rmob button.eqp-chev { min-height: 44px !important; }
body.rmob .eqp-rapide .eqp-chips button, body.rmob .eqp-rapide .eqp-seg button { min-height: 44px !important; height: 44px; }
body.rmob .eqp-ajout-rapide { grid-template-columns: 64px 1fr auto; }
body.rmob .eqp-ajout-rapide .input { height: 44px; min-height: 44px !important; font-size: 16px !important; }
body.rmob .eqp-lecteur-nav, body.rmob .eqp-lecteur-qui, body.rmob .eqp-lecteur-afficher { min-height: 44px !important; height: 44px; }
body.rmob .eqp-lecteur-nav { width: 44px; }
body.rmob .eqp-abc { min-height: 30px !important; height: 30px; padding: 0 10px; font-size: 12px !important; }
body.rmob .eqp-champ-num { font-size: 16px !important; }
body.rmob .app .right .eqp-champ { font-size: 16px !important; }
/* Les barres collées (recherche en haut, cochés / Annuler / lecteur en bas)
   ne doivent pas cacher la ligne qu'on fait défiler jusqu'à elles. */
.app .right .panel-body:has(.eqp) { scroll-padding-top: 64px; scroll-padding-bottom: 76px; }

/* ═══ Bandes posées : rangée de puces (Éléments et boîte de réglages) ═══ */
.bandes-posees { margin-top: 8px; min-width: 0; }
.bandes-posees .bp-liste { display: flex; flex-wrap: wrap; gap: 4px; }
.bandes-posees .bp-puce { display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 4px 8px; border-radius: 6px; font-size: 11.5px; cursor: pointer; line-height: 1.2;
  border: 1px solid var(--line); background: var(--bg); color: var(--text); text-align: left; }
.bandes-posees .bp-puce.on { border: 1.5px solid var(--accent); }
.bandes-posees .bp-ajout { color: var(--text-mute); border-style: dashed; }
.bandes-posees .bp-pastille { flex: none; width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,.15); }
.pwai-boite-reglages .bandes-seule { padding: 0; border: 0; }
.pwai-boite-reglages .bandes-posees { border-top: 1px solid var(--line); padding-top: 6px; }

/* ── Bandes et formes : le choix de la forme ───────────────────────── */
.formes-grille { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 4px 0 6px; }
.forme-choix { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px;
  border: 1px solid var(--border, rgba(0,0,0,.12)); border-radius: 8px; background: transparent;
  color: var(--text-dim, #555); font-size: 9.5px; line-height: 1.1; cursor: pointer; min-width: 0; }
.forme-choix span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forme-choix.on { border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); box-shadow: inset 0 0 0 1px var(--accent, #2563eb); }
.forme-contour { margin-top: 2px; }
.forme-mode { display: flex; gap: 6px; margin-top: 8px; }
.forme-mode .seg-btn { display: inline-flex; align-items: center; gap: 5px; }
.bp-puce svg { flex: none; }

/* ── « Créer avec l'IA » dans la grammaire de l'onglet Équipe ──────
   « J'aime beaucoup comment tu as fait la colonne Équipe. Revois la
   colonne Créer avec l'IA dans le même délire. » Le panneau réutilise
   .eqp, .eqp-tete, .eqp-etape, .eqp-pastille, .eqp-seg, .eqp-compte et
   .eqp-aide : seules les pièces propres à l'IA sont décrites ici. */
.ai-pane > .ia-eqp { flex: 1; }
.ia-eqp .ia-version { color: var(--text-mute); font-size: 11.5px; }
.ia-solde { margin: 0 var(--eqp-gut) 12px; }
.ia-solde:empty { display: none; }
.ia-solde > div:last-child { margin-bottom: 0 !important; }
.ia-solde > div { border-radius: 10px !important; padding: 10px 12px !important; }
.ia-solde-bas { margin-top: 12px; }
.ia-portes { padding: 0 var(--eqp-gut); }
.ia-portes:empty { display: none; }
.ia-intro { padding: 0 var(--eqp-gut) 12px; font-size: 12.5px; line-height: 1.45; color: var(--text-dim); }
.ia-repro { padding: 0 var(--eqp-gut) 14px; display: flex; flex-direction: column; gap: 10px; }
.ia-eqp .ia-seg { grid-template-columns: 1fr 1fr; }
.ia-eqp .ia-seg button { padding: 0 6px; }
.ia-eqp .eqp-etape-corps { gap: 8px; }
.ia-eqp .eqp-etape-corps > .ai-prompt { margin: 0; }
.ia-eqp .ia-options > div:first-child { margin-top: 0 !important; }
.ia-eqp .ia-corps { margin-top: 12px; }
.ia-eqp .ia-ajuster .eqp-pastille, .ia-eqp .ia-creations .eqp-pastille { color: var(--text-dim); }
.ia-histo { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: 13px; font-weight: 600; text-align: left;
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.04); }
.ia-histo:hover { border-color: var(--accent); }
.ia-histo > span:nth-child(2) > div { margin-top: 1px; }
.ia-vide { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px;
  border: 1.5px dashed var(--line-strong); color: var(--text-dim); font-size: 12.5px; line-height: 1.4; }
.ia-vide .ico { color: var(--text-mute); }
.ia-eqp .ai-gen-collant { margin-top: auto; padding: 10px var(--eqp-gut) 12px; }
.ia-eqp .ai-gen-collant .ai-gen-btn { height: 40px; border-radius: 8px; font-size: 13.5px; font-weight: 700;
  background: var(--accent); color: var(--brand-on-primary, #fff); box-shadow: none; }
.ia-eqp .ai-gen-collant .ai-gen-btn:hover:not(:disabled) { background: oklch(0.40 0.10 255); }
.ia-eqp .ai-gen-collant .ai-gen-btn:disabled { opacity: .45; cursor: default; }
.ia-eqp .ia-blocage { margin-top: 8px; font-size: 12px; }
body.rmob .app .right .ia-intro { display: none; }
body.rmob .app .right .ia-eqp .ai-gen-btn { height: 46px; border-radius: 10px; font-size: 14px;
  background: linear-gradient(135deg,#7c3aed,#2563eb); color: #fff; }
body.rmob .app .right .ia-eqp .ai-gen-btn:disabled { background: var(--line-strong); opacity: 1; }
body.rmob .ia-eqp .ia-solde { margin-left: var(--eqp-gut); margin-right: var(--eqp-gut); }
/* Sur téléphone, la consigne doit rester sous le pli : le style se lit
   dans son segment, sa phrase d'aide reste sur ordinateur. */
body.rmob .ia-eqp .ia-style { padding-top: 10px; padding-bottom: 10px; }
body.rmob .ia-eqp .ia-style .eqp-etape-titre small { display: none; }
body.rmob .ia-eqp .ia-style .eqp-etape-corps { margin-top: 8px; }

/* ── IA SUR TÉLÉPHONE : UN ÉCRAN PAR ÉTAPE ─────────────────────────── */
.ia-eqp .ia-masque { display: none !important; }
.ia-assist { padding: 10px var(--eqp-gut, 14px) 4px; display: flex; flex-direction: column; gap: 10px; }
.ia-assist-vues { display: flex; gap: 6px; overflow-x: auto; }
.ia-assist-vues button { flex: 1 0 auto; height: 32px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--line); background: var(--bg); color: var(--text-dim); cursor: pointer; white-space: nowrap; }
.ia-assist-vues button.on { border: 1.5px solid var(--accent); background: var(--accent-soft); color: var(--text); }
.ia-assist-prog { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ia-assist-etape { font-size: 11.5px; color: var(--text-mute); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.ia-assist-etape b { display: block; font-size: 15px; color: var(--text); text-transform: none; letter-spacing: -.01em; margin-top: 2px; }
.ia-assist-points { display: flex; gap: 5px; }
.ia-assist-points i { width: 22px; height: 5px; border-radius: 3px; background: var(--line); }
.ia-assist-points i.fait { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.ia-assist-points i.on { background: var(--accent); }
.ia-assist-retour { align-self: flex-start; background: none; border: 0; padding: 4px 0; color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; }
.ia-assist-nav { display: flex; align-items: center; gap: 8px; padding: 6px var(--eqp-gut, 14px) 14px; }
.ia-assist-nav > :first-child { margin-right: auto; }
.ia-assist-nav button { height: 40px; padding: 0 16px; border-radius: 8px; font-size: 13.5px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg); color: var(--text); }
.ia-assist-nav .ia-assist-passer { border-color: transparent; color: var(--text-dim); text-decoration: underline; }
.ia-assist-nav .ia-assist-suiv { background: var(--accent); border-color: var(--accent); color: var(--brand-on-primary, #fff); min-width: 120px; }
.ia-assist-nav .ia-assist-suiv:disabled { opacity: .45; cursor: default; }
.ia-recap-ligne { display: grid; grid-template-columns: 90px 1fr auto; gap: 8px; align-items: baseline; width: 100%; text-align: left;
  padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: 13px; cursor: pointer; }
.ia-recap-l { color: var(--text-mute); font-size: 12px; font-weight: 600; }
.ia-recap-v { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ia-recap-m { color: var(--text-dim); text-decoration: underline; font-size: 12px; font-weight: 600; }
.ia-eqp.ia-sans-gen > .ai-gen-collant { display: none !important; }

/* ── IA SUR TÉLÉPHONE : Retour / Suivant TOUJOURS À L'ÉCRAN ──────────
   Sur un petit téléphone, la consigne et les pistes poussaient Retour /
   Suivant sous le pli du panneau : la barre colle au bas de la zone qui
   défile ; la marge négative mange le padding bas de .panel-body. */
body.rmob .app .right .ia-assist-nav {
  position: sticky; bottom: 0; z-index: 6;
  margin: 0 -14px -20px; padding: 8px calc(var(--eqp-gut, 14px) + 14px) 12px;
  background: var(--bg-panneau, #fff); border-top: 1px solid var(--line);
}
/* Écran final : la barre Générer devient fixe au bas du panneau et le
   panneau réserve exactement sa hauteur (--ia-gen-h, mesurée) — le
   récapitulatif ne passe plus dessous. Le panneau prend la grande
   hauteur pour que le récapitulatif tienne d'un coup d'œil. */
body.rmob.ia-final, body.rmob.ia-final .app {
  --rm-canvas-min: 96px;
  --rm-sheet-open: calc(100dvh - var(--rm-top) - var(--rm-safe-top) - var(--rm-bars) - var(--rm-canvas-min));
}
body.rmob.ia-final .app .right .ia-eqp > .ai-gen-collant {
  position: fixed; left: 0; right: 0; bottom: var(--rm-bars); z-index: 72;
}
body.rmob.ia-final .app .right .panel-body { padding-bottom: calc(var(--ia-gen-h, 90px) + 12px); }
body.rmob.ia-final .app .right .ia-assist-nav { position: static; margin: 0; padding: 6px var(--eqp-gut, 14px) 4px; border-top: 0; }

/* ── CLAVIER À L'ÉCRAN (body.clavier, posé par pwaiClavierMobile) ────
   Le panneau devient toute la partie visible de l'écran (--vvh depuis
   visualViewport, --vv-top pour iOS qui fait glisser la vue) : la vue
   3D, la barre du haut et les onglets du bas passent dessous le temps
   de la saisie. Au blur, body.clavier tombe et tout revient. */
body.rmob .app .right input[type=text], body.rmob .app .right input[type=number],
body.rmob .app .right input[type=email], body.rmob .app .right input[type=search],
body.rmob .app .right input[type=tel], body.rmob .app .right input:not([type]),
body.rmob .app .right select, body.rmob .app .right textarea,
body.rmob .app .right .ai-prompt { font-size: 16px; } /* < 16px : iOS zoome la page au focus */
body.rmob.clavier .app .right {
  top: var(--vv-top, 0px); bottom: auto; height: var(--vvh, 50vh) !important; max-height: none;
  border-radius: 0; z-index: 100005; transition: none;
}
body.rmob.clavier #rmobClose { display: none; }
body.rmob.clavier .app .right .panel-body { padding-top: 8px; overscroll-behavior: contain; }
/* Étape 2 de l'assistant : on garde le titre d'étape, la consigne et
   Retour / Suivant ; la consigne prend la place restante. */
body.rmob.clavier .ia-eqp .ia-assist-vues,
body.rmob.clavier .ia-eqp .ia-solde,
body.rmob.clavier .ia-eqp .ia-etape .eqp-etape-tete { display: none !important; }
body.rmob.clavier .ia-eqp .ia-assist { padding-top: 0; }
body.rmob.clavier .ia-eqp .ia-etape { padding-top: 6px; }
body.rmob.clavier .ia-eqp .ia-etape .eqp-etape-corps { margin-top: 0; }
body.rmob.clavier .app .right .ia-eqp .ai-prompt {
  min-height: 90px; height: max(90px, calc(var(--vvh, 300px) - 175px)); resize: none;
}

/* ══ LES AUTRES COLONNES SUR TÉLÉPHONE ═══════════════════════════════
   Même grammaire que Équipe et IA : cibles de 44 px au moins, rien qui
   déborde à droite, la commande principale toujours à portée du pouce.
   Tout est sous body.rmob : le bureau ne bouge pas. */

/* La poignée de la feuille (#rmobClose, z 100001, sur body) passait
   PAR-DESSUS les pop-ups ouvertes depuis la feuille (« Où poser le
   texte ? », bandes, Pantone…) : leur z-index vit dans celui de .right
   (70), donc sous elle. Une pop-up ouverte = pas de poignée. */
body.rmob:has(.app .right .modal-overlay:not([style*="display: none"])) #rmobClose { display: none !important; }
/* Même règle, en général : TOUTE fenêtre posée par-dessus — l'accueil
   « Créez votre maillot / Create your jersey », les voiles, les modales
   portées sur <body>, les voiles plein écran en position fixe —
   cache la poignée. Elle ne flotte plus sur une carte qu'elle ne ferme pas. */
body.rmob:has(.accueil-voile, .app.accueil-ouvert, .pol-voile,
              .modal-overlay:not([style*="display: none"]),
              [aria-modal="true"],
              [style*="position: fixed"][style*="inset: 0"],
              [style*="position: fixed"][style*="--pwai-vp-h"]) #rmobClose { display: none !important; }

/* COLORIER — les tuiles de pièces débordaient : une grille en 1fr 1fr
   ne descend pas sous la largeur de « PANTONE Cool Gray 1 C ». */
body.rmob .pieces-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 380px) { body.rmob .pieces-grille { grid-template-columns: minmax(0, 1fr); } }
body.rmob .piece-tuile { min-width: 0; }
/* « Manche droite » se lit en entier, sur deux lignes s'il le faut. */
body.rmob .piece-nom { white-space: normal; overflow-wrap: anywhere; }
/* COLORIER, une pièce — la rangée de pastilles filait à droite sans
   barre ni indice (scrollbar masquée) : les rouges, oranges, verts…
   n'étaient atteignables qu'en devinant le geste. Elle passe en grille
   qui se replie : toutes les couleurs à l'écran, cibles de 40 px. */
body.rmob .app .right .swatches{
  display:grid !important; grid-template-columns:repeat(auto-fill, minmax(40px, 1fr));
  overflow:visible; flex-wrap:wrap; gap:8px !important; padding-bottom:2px;
}
body.rmob .app .right .swatches .sw{
  width:auto !important; height:auto !important; aspect-ratio:1; min-height:40px;
}
/* La barre Pièces / Uni / Dégradé (et Décor des mockups) : 44, pas 40. */
body.rmob .ligne-barre .retour-pieces,
body.rmob .ligne-barre .seg button { height: 44px; min-height: 44px !important; font-size: 14px; }

/* MODÈLE — les trois onglets tiennent sur une ligne, sans « pré- /
   réglées » coupé en deux étages. */
body.rmob .app .right .rp-section > .seg:not([style*="wrap"]) > button {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; font-size: 13.5px; min-width: 0;
}
/* Palettes : une ligne qu'on touche, nom à gauche ; les codes
   hexadécimaux sont un détail technique, le nuancier suffit. */
body.rmob .app .right .team { min-height: 56px; padding: 8px 12px; border-radius: 12px; gap: 12px; text-align: left; }
body.rmob .app .right .team-swatch { width: 40px; height: 40px; border-radius: 9px; }
body.rmob .app .right .team-name { font-size: 15px; font-weight: 600; text-align: left; }
body.rmob .app .right .team-sub { font-size: 12px; text-align: left; font-family: inherit !important; }
body.rmob .app .right .team-sub .hex-mob { display: none; }
body.rmob .app .right .teams-list { gap: 8px; }

/* MOTIFS — « ← Retour aux éléments » était un lien de 20 px perdu au
   milieu : c'est maintenant la barre de retour, collée en haut. */
body.rmob .app .right .panel-body > .lien-croise:first-child {
  position: sticky; top: 0; z-index: 12; display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 48px; margin: 0 0 8px !important; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg); color: var(--text); font-size: 14.5px; font-weight: 600; text-decoration: none;
}

/* MOCKUPS, écran « Format et export » : la case à cocher faisait 13 px
   et le curseur 16 ; Résolution se lit au-dessus de ses boutons ; le
   bouton Exporter reste en bas de la feuille. */
body.rmob .app .right .mk-export .prop-row { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
body.rmob .app .right .mk-export .prop-row > label { width: auto; }
body.rmob .app .right .mk-export .prop-row .control { display: flex; align-items: center; gap: 10px; width: 100%; }
body.rmob .app .right .mk-export input[type=range] { flex: 1; height: 44px !important; }
body.rmob .app .right .mk-export input[type=color] { width: 44px !important; height: 44px !important; }
body.rmob .app .right .mk-ov-ligne { display: flex !important; align-items: center; justify-content: space-between; min-height: 48px; cursor: pointer; font-size: 14px; }
body.rmob .app .right .mk-ov-ligne input[type=checkbox] { width: 24px; height: 24px; margin: 0; }
body.rmob .app .right .mk-export-actions {
  position: sticky; bottom: 0; z-index: 12; background: var(--bg);
  padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line);
}
body.rmob .app .right .mk-export-actions .ai-gen-btn { height: 48px; font-size: 15px; }
/* Libellé court d'onglet, sur téléphone seulement. */
.seg-court { display: none; }
body.rmob .seg-long { display: none; }
body.rmob .seg-court { display: inline; }

/* ── Couleurs du maillot : la pipette dans la colonne ─────────────── */
.couleurs-maillot { margin: 0 0 10px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.couleurs-maillot .cm-titre { display: flex; align-items: center; justify-content: flex-start; gap: 5px; margin-bottom: 2px; }
.couleurs-maillot .cm-aide { font-size: 11.5px; color: var(--text-mute); margin-bottom: 7px; }
.couleurs-maillot.compact .cm-aide { display: none; }
.couleurs-maillot .cm-grille { display: flex; flex-wrap: wrap; gap: 8px; }
.couleurs-maillot .cm-pastille { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 49px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--text-mute); }
.couleurs-maillot .cm-teinte { display: block; width: 42px; height: 42px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); transition: transform .12s; }
.couleurs-maillot .cm-pastille:hover .cm-teinte { transform: scale(1.06); }
.couleurs-maillot .cm-pastille.selected .cm-teinte { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent, #2563eb); }
.couleurs-maillot .cm-ref { font-size: 9.5px; line-height: 1.1; max-width: 49px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.rmob .couleurs-maillot .cm-teinte { width: 46px; height: 46px; }
body.rmob .couleurs-maillot .cm-pastille { width: 53px; }

/* Barre du haut : Sauvegarder n'est plus qu'une icône (l'état reste
   écrit à côté du nom du design). Recommencer vit sur la vue 3D, au pied
   du rail, avec la même confirmation. */
.topbar .tb-droite .top-btn.primary.tb-save {
  width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 9px;
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.topbar .tb-droite .top-btn.primary.tb-save:hover { background: oklch(0.38 0.10 255); border-color: oklch(0.38 0.10 255); }
.rotate-rail .vbtn-reset { font-size: 15px; font-weight: 700; color: var(--text-dim); }
.rotate-rail .vbtn-reset:hover { color: #e53935; }
body.rmob .app .center .rotate-rail .vbtn-reset { width: 48px; height: 48px; min-width: 48px; font-size: 19px; }

/* ══ LES BOÎTES DE RÉGLAGES, REDESSINÉES ══════════════════════════════
   « Toutes les pop-up outils, refais-les correctement, mieux
     visuellement, parce que là c'est un bordel. »
   Une seule grammaire pour toutes les boîtes (bande, forme, bordure,
   texte, nom / numéro, image, calque), au bureau comme en feuille :
   · en-tête : l'icône du genre, le nom, la puce du lieu, fermer au coin,
     puis la barre des gestes — icône ET nom, rangés toujours pareil ;
   · le corps en SECTIONS titrées, dans un ordre fixe porté par
     data-ordre : Contenu 1 · Couleur 2 · Forme / Dimensions 3 ·
     Position 4 · Placement 5 · Avancé 6 · le reste 9 ;
   · un seul champ chiffré (− valeur unité +), une seule ligne de
     couleur (pastille · Pantone · hex), des choix segmentés.
   Les couleurs sont celles de l'application (--accent, --line…). */
.pwai-boite-reglages { width: 372px; max-height: min(800px, calc(100vh - 100px)); }
.pwai-boite-reglages .br-tete {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center;
  column-gap: 10px; row-gap: 10px; padding: 10px 0 0; border-bottom: 1px solid var(--line);
}
.pwai-boite-reglages .br-type {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; overflow: hidden;
  background: var(--pl-doux); color: var(--accent); box-shadow: inset 0 0 0 1px var(--pl-anneau);
}
.pwai-boite-reglages .br-type-img { width: 100%; height: 100%; object-fit: contain; background: var(--bg-elev); }
.pwai-boite-reglages .br-titres { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pwai-boite-reglages .br-titre { font-size: 14.5px; font-weight: 700; line-height: 1.2; max-width: 100%; flex: none; }
.pwai-boite-reglages .br-lieu-ligne { flex: none; padding-left: 0; max-width: 100%; }
.pwai-boite-reglages .br-lieu { height: 24px; font-size: 11.5px; }
.pwai-boite-reglages .br-fermer { align-self: start; width: 32px; height: 32px; margin-right: 8px; }
.pwai-boite-reglages .br-tete > .br-poignee { margin-left: 8px; }
/* La barre des gestes : pleine largeur, chaque geste son icône et son nom. */
.pwai-boite-reglages .br-gestes {
  grid-column: 1 / -1; display: flex; align-items: stretch; gap: 2px;
  margin: 0; padding: 4px 8px; border-top: 1px solid var(--line-soft); background: var(--bg-soft);
}
.pwai-boite-reglages .br-geste-lib {
  flex: 1 1 0; min-width: 0; width: auto; height: auto; min-height: 44px; padding: 5px 2px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 8px;
  color: var(--text-dim);
}
.pwai-boite-reglages .br-geste-nom {
  max-width: 100%; font-size: 9.5px; font-weight: 600; line-height: 1.1; text-align: center;
  overflow: hidden; white-space: normal; overflow-wrap: normal; letter-spacing: -.01em;
}
.pwai-boite-reglages .br-geste-lib:hover { background: var(--bg); color: var(--text); box-shadow: 0 0 0 1px var(--line); }
.pwai-boite-reglages .br-geste-lib.on { color: var(--accent); background: var(--bg); box-shadow: inset 0 0 0 1px var(--pl-anneau); }
.pwai-boite-reglages .br-danger:hover { color: var(--danger); box-shadow: 0 0 0 1px color-mix(in oklch, var(--danger) 35%, transparent); }
.pwai-boite-reglages .br-sep { align-self: center; width: 1px; height: 26px; margin: 0; flex: none; }

/* Le corps : une colonne de sections, rangées par data-ordre. Les
   enveloppes des cartes s'effacent (display: contents) pour que la
   section « Placement » de la boîte se range entre les leurs. */
.pwai-boite-reglages .br-corps { display: flex; flex-direction: column; padding: 0 14px 14px; }
.pwai-boite-reglages .rg-carte,
.pwai-boite-reglages .bandes-seule,
.pwai-boite-reglages .rg-nu,
.pwai-boite-reglages .texte-lie,
.pwai-boite-reglages .br-corps > div[class=""],
.pwai-boite-reglages .br-corps > div:not([class]) { display: contents; }
.pwai-boite-reglages .br-corps > * { order: 8; }
.pwai-boite-reglages .bandes-posees { order: 9; }
.pwai-boite-reglages [data-ordre="1"] { order: 1; }
.pwai-boite-reglages [data-ordre="2"] { order: 2; }
.pwai-boite-reglages [data-ordre="3"] { order: 3; }
.pwai-boite-reglages [data-ordre="4"] { order: 4; }
.pwai-boite-reglages [data-ordre="5"], .pwai-boite-reglages .pwai-aligner { order: 5; }
.pwai-boite-reglages [data-ordre="6"] { order: 6; }
.pwai-boite-reglages [data-ordre="7"] { order: 7; }

.rg-sec { padding: 12px 0 14px; border-top: 1px solid var(--line); }
.pwai-boite-reglages .br-corps > .rg-sec:first-child,
.pwai-boite-reglages .rg-sec[data-ordre="1"] { border-top: 0; }
.rg-titre {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 0;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-mute);
}
.rg-titre-txt { flex: 1; min-width: 0; }
.rg-titre-btn {
  width: 100%; min-height: 36px; margin: -6px 0 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim);
  border-radius: 6px;
}
.rg-titre-btn:hover { color: var(--text); }
.rg-repli:not(.rg-deplie) { padding-bottom: 6px; }
.rg-repli:not(.rg-deplie) .rg-titre-btn { margin-bottom: 0; }
.rg-corps { display: flex; flex-direction: column; gap: 8px; }
.rg-sous { font-size: 11.5px; font-weight: 600; color: var(--text-dim); margin-top: 2px; }
.rg-aide { font-size: 11px; line-height: 1.45; color: var(--text-mute); font-weight: 400; text-transform: none; letter-spacing: 0; }
.rg-note-action { display: flex; align-items: center; gap: 10px; }
.rg-note-action .rg-aide { flex: 1; }
.rg-btn, .rg-lien {
  flex: none; height: 32px; padding: 0 12px; border-radius: 8px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); font: inherit; font-size: 12px; font-weight: 600;
}
.rg-btn:hover, .rg-lien:hover { border-color: var(--accent); background: var(--pl-doux, var(--accent-soft)); }
.rg-lien { border-color: transparent; background: none; color: var(--text-dim); padding: 0 8px; }
.rg-case { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; cursor: pointer; line-height: 1.35; }
.rg-case input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }
.rg-case > span { display: flex; flex-direction: column; gap: 2px; }

/* Le champ chiffré : libellé à gauche, − valeur unité + à droite. */
.pwai-boite-reglages .bande-champ { margin-top: 0; min-height: 36px; gap: 12px; }
.pwai-boite-reglages .bc-label { font-size: 12.5px; color: var(--text); white-space: normal; line-height: 1.25; flex: 1; }
.pwai-boite-reglages .bc-ctrl { height: 36px; border-color: var(--line-strong); border-radius: 9px; background: var(--bg); }
.pwai-boite-reglages .bc-ctrl:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--pl-doux); }
.pwai-boite-reglages .bc-pm { width: 34px; height: 34px; font-size: 17px; color: var(--text-dim); }
.pwai-boite-reglages .bc-pm:hover:not(:disabled) { color: var(--text); }
.pwai-boite-reglages .bc-ctrl input { width: 52px; height: 34px; font-size: 13px; font-variant-numeric: tabular-nums; }
.pwai-boite-reglages .bc-unite { width: 26px; flex: none; font-size: 11.5px; padding: 0 2px 0 3px; }
.pwai-boite-reglages .bc-off { opacity: .5; }

/* La ligne de couleur : pastille · nom Pantone · hex · › */
.rg-couleur-ligne { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rg-couleur {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 10px 0 6px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg); color: var(--text);
  cursor: pointer; text-align: left; font: inherit; transition: border-color .12s, box-shadow .12s;
}
.rg-couleur:hover:not(:disabled) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--pl-doux, var(--accent-soft)); }
.rg-couleur:disabled { opacity: .5; cursor: default; }
.rg-pastille { flex: none; width: 32px; height: 32px; border-radius: 7px; box-shadow: inset 0 0 0 1px oklch(0 0 0 / .14); }
.rg-couleur-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.rg-couleur-label { font-size: 11px; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rg-couleur-nom { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rg-hex { flex: none; font-size: 10.5px; color: var(--text-mute); }

/* Les choix segmentés : un rail, l'option active en relief. */
.pwai-boite-reglages .rg-seg {
  display: flex; gap: 2px; width: 100%; margin: 0; padding: 3px; order: initial;
  border-radius: 10px; background: var(--bg-elev); box-shadow: inset 0 0 0 1px var(--line);
}
.pwai-boite-reglages .rg-seg .seg-btn {
  flex: 1 1 0; min-width: 0; height: 32px; padding: 0 6px; border: 0; border-radius: 8px; background: transparent;
  font-size: 12px; font-weight: 600; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis;
}
.pwai-boite-reglages .rg-seg .seg-btn:hover:not(.on) { color: var(--text); background: color-mix(in oklch, var(--bg) 60%, transparent); }
.pwai-boite-reglages .rg-seg .seg-btn.on {
  background: var(--bg); color: var(--text); border: 0;
  box-shadow: 0 1px 2px oklch(0 0 0 / .08), 0 0 0 1px var(--pl-anneau);
}

/* L'aperçu de la bande, en coupe. */
.rg-apercu { position: relative; border-radius: 10px; padding: 4px 6px 6px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); }
.rg-apercu svg { display: block; }
.rg-apercu-sens { position: absolute; left: 12px; bottom: 6px; font-size: 10px; font-weight: 600; color: var(--text-mute);
  background: var(--bg); padding: 1px 6px; border-radius: 999px; box-shadow: 0 0 0 1px var(--line); }
.pwai-boite-reglages .bande-rayures { display: flex; flex-direction: column; gap: 8px; }
.pwai-boite-reglages .bande-rayure { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px; background: var(--bg-soft); }
.pwai-boite-reglages .bande-rayure .bande-champ { min-height: 32px; }
.pwai-boite-reglages .bande-rayure .bc-label { color: var(--text-dim); font-size: 12px; }
.pwai-boite-reglages .bande-ligne { border: 0; padding: 0; margin: 0; background: none; }
.pwai-boite-reglages .forme-contour { display: block; }

/* Les formes : une grille de vignettes. */
.pwai-boite-reglages .formes-grille { margin: 0; gap: 6px; }
.pwai-boite-reglages .forme-choix { min-height: 52px; padding: 6px 2px; gap: 4px; border-color: var(--line); border-radius: 9px; font-size: 10px; }
.pwai-boite-reglages .forme-choix:hover { border-color: var(--line-strong); color: var(--text); }
.pwai-boite-reglages .forme-choix.on { border-color: var(--accent); background: var(--pl-doux); color: var(--text); box-shadow: 0 0 0 1px var(--accent); }

/* Les bandes et formes posées : en bas, une rangée de puces. */
.pwai-boite-reglages .bandes-posees { border-top: 1px solid var(--line); padding-top: 12px; }
.pwai-boite-reglages .bandes-posees .rp-label { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 8px; }
.pwai-boite-reglages .bandes-posees .bp-liste { gap: 6px; }
.pwai-boite-reglages .bandes-posees .bp-puce { min-height: 32px; padding: 4px 10px; border-radius: 999px; font-size: 12px; }
.pwai-boite-reglages .bandes-posees .bp-puce.on { box-shadow: 0 0 0 1px var(--accent); border-color: var(--accent); background: var(--pl-doux); }

/* ── Au téléphone : la même boîte, en feuille, tout au doigt (44 px). */
.pwai-boite-reglages.br-feuille { width: auto; max-height: 70vh; }
.pwai-boite-reglages.br-feuille .br-tete { padding: 20px 0 0; grid-template-columns: auto minmax(0, 1fr) auto; }
.pwai-boite-reglages.br-feuille .br-type { margin-left: 14px; }
.pwai-boite-reglages.br-feuille .br-titre { font-size: 16px; }
.pwai-boite-reglages.br-feuille .br-corps { padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
.pwai-boite-reglages.br-feuille .br-gestes { padding: 4px 8px; }
body.rmob .pwai-boite-reglages .br-geste.br-geste-lib { width: auto !important; height: auto !important; min-width: 0 !important; min-height: 52px !important; padding: 6px 2px !important; }
body.rmob .pwai-boite-reglages .br-fermer { width: 44px !important; height: 44px !important; }
body.rmob .pwai-boite-reglages .br-geste-nom { font-size: 9.5px; }
body.rmob .pwai-boite-reglages .br-gestes { gap: 0; padding: 4px 2px; }
body.rmob .pwai-boite-reglages .bande-champ { min-height: 44px; }
body.rmob .pwai-boite-reglages .bc-ctrl { height: 44px; }
body.rmob .pwai-boite-reglages .bc-pm { width: 44px !important; height: 44px !important; }
body.rmob .pwai-boite-reglages .bc-ctrl input { width: 58px; height: 42px; }
body.rmob .pwai-boite-reglages .bc-label { font-size: 14px; }
body.rmob .pwai-boite-reglages .rg-couleur { height: 52px; }
body.rmob .pwai-boite-reglages .rg-seg .seg-btn { height: 40px !important; min-height: 40px !important; font-size: 13px; }
body.rmob .pwai-boite-reglages .rg-titre-btn { min-height: 44px !important; }
body.rmob .pwai-boite-reglages .rg-btn { height: 44px; }
body.rmob .pwai-boite-reglages .forme-choix { min-height: 60px; }
body.rmob .pwai-boite-reglages .bandes-posees .bp-puce { min-height: 40px; }
.pwai-boite-reglages .forme-contour { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
.rg-lien-droite { align-self: flex-end; height: 28px; }
.rg-compte { font-size: 11px; color: var(--text-mute); letter-spacing: 0; }
.rg-apercu-degrade { height: 28px; border-radius: 8px; box-shadow: inset 0 0 0 1px oklch(0 0 0 / .12); }
/* L'ÉDITEUR DE DÉGRADÉ (EditeurDegrade) — le même partout : pièces, design, bandes, bordures.
   La barre (toucher = ajouter une couleur), les points dessous (glisser = déplacer),
   puis le point choisi : couleur, position, retirer. */
.dg-editeur { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 8px; }
.dg-zone { position: relative; padding: 0 11px; touch-action: none; user-select: none; -webkit-user-select: none; }
.dg-barre { height: 30px; border-radius: 8px; cursor: copy; box-shadow: inset 0 0 0 1px oklch(0 0 0 / .14); }
.dg-piste { position: relative; height: 26px; }
.dg-point { position: absolute; top: 2px; width: 22px; height: 22px; margin-left: -11px; padding: 0; border: 0; background: transparent; cursor: grab; touch-action: none; }
.dg-point::before { content: ""; position: absolute; left: 50%; top: -6px; margin-left: -5px; border: 5px solid transparent; border-bottom: 6px solid var(--line-strong, #9aa0a8); border-top: 0; }
.dg-point-teinte { position: absolute; inset: 2px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px oklch(0 0 0 / .3), 0 1px 3px oklch(0 0 0 / .25); }
.dg-point.on .dg-point-teinte { box-shadow: 0 0 0 2px var(--accent, #2563eb), 0 0 0 5px var(--accent-soft, rgba(37,99,235,.2)); }
.dg-point.on::before { border-bottom-color: var(--accent, #2563eb); }
.dg-point:active { cursor: grabbing; }
.dg-point:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 2px; border-radius: 50%; }
.dg-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dg-btn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg, #fff); color: var(--text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.dg-btn:hover:not(:disabled) { border-color: var(--line-strong, #9aa0a8); }
.dg-btn:disabled { opacity: .45; cursor: default; }
.dg-compte { margin-left: auto; font-size: 11px; color: var(--text-mute); }
.dg-choisi { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft, #f7f7f9); }
.dg-choisi-tete { display: flex; align-items: center; gap: 8px; }
.dg-choisi-teinte { width: 18px; height: 18px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px oklch(0 0 0 / .2); }
.dg-choisi-nom { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 650; color: var(--text); }
.dg-retirer { height: 28px; }
body.rmob .dg-barre { height: 36px; }
body.rmob .dg-piste { height: 34px; }
body.rmob .dg-point { width: 34px; height: 34px; margin-left: -17px; top: 0; }
body.rmob .dg-point-teinte { inset: 6px; }
body.rmob .dg-btn { height: 40px; }
.pwai-boite-reglages .bordure-places { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.pwai-boite-reglages .bordure-dans { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--line); }
.rg-case-ligne { display: flex; align-items: center; gap: 8px; }
.rg-case-ligne .rg-case { flex: 1; }
.rg-case-ligne .rg-lien { height: 28px; }
.pwai-boite-reglages .bordure-liste { display: flex; flex-direction: column; gap: 6px; }
.pwai-boite-reglages .bordure-ligne { display: flex !important; align-items: center; gap: 4px; width: 100%; min-height: 40px; padding: 4px 4px 4px 10px !important; border-radius: 10px !important; }
.pwai-boite-reglages .bordure-ligne .bordure-ouvrir { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; font: inherit; font-size: 12.5px; }
.pwai-boite-reglages .bordure-ligne .icon-btn { width: 30px; height: 30px; display: grid; place-items: center; }
.pwai-boite-reglages .bordure-liste .bp-ajout { align-self: flex-start; min-height: 32px; padding: 4px 12px; border-radius: 999px; }
.pwai-boite-reglages .bp-pastille { flex: none; width: 14px; height: 14px; border-radius: 4px; border: 1px solid oklch(0 0 0 / .15); }

.pwai-boite-reglages .pwai-aligner { display: flex; flex-direction: column; gap: 8px; padding: 0; margin: 0; border: 0; }
.alg-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.pwai-boite-reglages .alg-grille .ts-btn, .pwai-boite-reglages .rg-boutons .ts-btn, .pwai-boite-reglages .rg-boutons .ob-btn {
  min-height: 34px; padding: 4px 8px; border-radius: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rg-boutons { display: flex; flex-wrap: wrap; gap: 4px; }
.pwai-boite-reglages .alg-champ input { -moz-appearance: textfield; appearance: textfield; text-align: right; border: 0; background: none; padding: 0; }
.rg-resume { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-mute); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.rg-sous-bloc { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.rg-sous-bloc + .rg-sous-bloc { border-top: 1px dashed var(--line); padding-top: 10px; }
.pwai-boite-reglages .ec-outil-corps { display: flex; flex-direction: column; gap: 8px; border: 0 !important; padding: 0 !important; margin: 0 !important; }
.pwai-boite-reglages .ec-outil-corps .prop-row { padding: 0; }
.pwai-boite-reglages .ec-mesure { margin: 2px 0 0; }
.pwai-boite-reglages .source-roster { margin: 0 !important; }
body.rmob .pwai-boite-reglages .alg-grille .ts-btn, body.rmob .pwai-boite-reglages .rg-boutons .ts-btn, body.rmob .pwai-boite-reglages .rg-boutons .ob-btn { min-height: 44px; }
/* Découper / Calques : le même champ chiffré que les boîtes. */
.dc-champ .bande-champ { margin-top: 4px; gap: 12px; }
.dc-champ .bc-label { font-size: 12.5px; color: var(--text); flex: 1; }
.dc-champ .bc-ctrl { height: 36px; border-color: var(--line-strong); border-radius: 9px; }
.dc-champ .bc-pm { width: 34px; height: 34px; }
/* ═══ LA BARRE D'OUTILS DES BOÎTES DE RÉGLAGES ═══════════════════════
   « Avoir des accès rapides, des boutons pour chaque outil. » Un bouton
   par outil (icône + nom court), sous l'en-tête ; un seul outil dessiné
   à la fois, juste dessous. Les actions rapides (arc ∩ — ∪, centrer)
   restent sous la barre, toujours à un clic. Au téléphone, la barre
   défile sur le côté, d'un doigt. */
.pwai-boite-reglages .br-onglets {
  flex: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 3px;
  padding: 6px 8px; border-bottom: 1px solid var(--line-soft); background: var(--bg);
}
.pwai-boite-reglages .br-onglet {
  min-width: 0; min-height: 44px; padding: 4px 2px 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; border-radius: 8px; background: transparent; color: var(--text-dim); cursor: pointer; font: inherit;
  transition: background .12s, color .12s, box-shadow .12s;
}
.pwai-boite-reglages .br-onglet:hover { background: var(--bg-soft); color: var(--text); }
.pwai-boite-reglages .br-onglet.on { background: var(--pl-doux); color: var(--accent); box-shadow: inset 0 0 0 1px var(--pl-anneau); }
.pwai-boite-reglages .br-onglet-ico { height: 16px; display: grid; place-items: center; font-size: 13px; font-weight: 700; line-height: 1; }
.pwai-boite-reglages .br-onglet-nom { max-width: 100%; font-size: 10px; font-weight: 600; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pwai-boite-reglages .br-rapides {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 12px;
  border-bottom: 1px solid var(--line-soft); background: var(--bg-soft);
}
.pwai-boite-reglages .br-rapides:empty { display: none; }
.pwai-boite-reglages .br-rapide-groupe { display: inline-flex; align-items: center; gap: 3px; }
.pwai-boite-reglages .br-rapide-nom { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-mute); margin-right: 3px; }
.pwai-boite-reglages .br-rapide {
  min-width: 34px; height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line-strong);
  background: var(--bg); color: var(--text); font: inherit; font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer;
}
.pwai-boite-reglages .br-rapide:hover:not(:disabled) { border-color: var(--accent); }
.pwai-boite-reglages .br-rapide.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pwai-boite-reglages .br-rapide:disabled { opacity: .45; cursor: default; }
.pwai-boite-reglages .rg-onglet-corps { border-top: 0; padding-top: 10px; }
.pwai-boite-reglages .rg-titre-mini { margin-bottom: 4px; }
.pwai-boite-reglages.br-feuille .br-onglets {
  display: flex; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 6px 10px;
}
.pwai-boite-reglages.br-feuille .br-onglets::-webkit-scrollbar { display: none; }
.pwai-boite-reglages.br-feuille .br-onglet { flex: 0 0 auto; min-width: 60px; max-width: none; padding: 4px 8px 3px; }
.pwai-boite-reglages.br-feuille .br-onglet-nom { overflow: visible; }
.pwai-boite-reglages.br-feuille .br-rapides { padding: 6px 16px; }

/* ══ BOÎTE DE RÉGLAGES : PLUS BASSE, ET REDIMENSIONNABLE ═══════════
   Bureau : la boîte se tire par son coin (resize natif), sa taille est
   retenue par genre de boîte. Barre d'outils resserrée. */
.pwai-boite-reglages.br-redim { resize: both; min-width: 280px; min-height: 160px; max-width: calc(100vw - 16px); }
.pwai-boite-reglages .br-onglets { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 2px; padding: 4px 6px; }
.pwai-boite-reglages .br-onglet { min-height: 36px; padding: 3px 2px 2px; gap: 2px; }
.pwai-boite-reglages .br-onglet-nom { font-size: 9.5px; }
.pwai-boite-reglages .br-rapides { padding: 4px 10px; gap: 4px 10px; }
.pwai-boite-reglages .br-rapide { height: 26px; min-width: 30px; }

/* Téléphone : une seule rangée qui défile, icônes et mots plus petits ;
   repliée, la feuille ne garde que l'en-tête, les outils et les actions
   rapides (≈ ¼ d'écran) — le maillot au-dessus reste libre au doigt. */
.pwai-boite-reglages.br-feuille { max-height: 48vh; }
.pwai-boite-reglages.br-feuille .br-tete { padding-top: 14px; row-gap: 4px; }
.pwai-boite-reglages.br-feuille .br-poignee-barre { top: 0; height: 14px; width: 64px; margin-left: -32px; background: none; cursor: pointer; touch-action: none; }
.pwai-boite-reglages.br-feuille .br-poignee-barre::after { content: ""; position: absolute; left: 14px; right: 14px; top: 5px; height: 4px; border-radius: 999px; background: var(--line-strong); }
.pwai-boite-reglages.br-feuille .br-gestes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.pwai-boite-reglages.br-feuille .br-gestes::-webkit-scrollbar { display: none; }
body.rmob .pwai-boite-reglages .br-geste.br-geste-lib { min-height: 40px !important; flex: 0 0 auto; padding: 3px 6px !important; }
body.rmob .app .topbar .pwai-boite-reglages.br-feuille .br-fermer { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; }
.pwai-boite-reglages.br-feuille .br-onglets { flex-wrap: nowrap; padding: 3px 8px; gap: 2px; }
.pwai-boite-reglages.br-feuille .br-onglet { min-width: 52px; min-height: 40px; padding: 3px 6px 2px; }
.pwai-boite-reglages.br-feuille .br-onglet-ico svg { width: 14px; height: 14px; }
.pwai-boite-reglages.br-feuille.br-replie .br-corps { display: none; }
.pwai-boite-reglages.br-feuille.br-replie { max-height: 28vh; padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ══ BOÎTE « SIMPLE » : sections claires, aide d'une ligne, avancé replié ══
   (BrSection, BrPlus, BrPrincipal — bundle). Réutilisable par toute boîte,
   et hors de la boîte : panneaux de la colonne (.rp-br), éditeur de
   retouche (.pwai-decoupe), fenêtres (.pwai-dialogue). :is() garde la
   spécificité d'avant (une classe) : la boîte des motifs ne bouge pas. */
:is(.pwai-boite-reglages, .rp-br, .pwai-decoupe, .pwai-dialogue) .br-sec { padding: 8px 0; border-top: 1px solid var(--line); }
:is(.pwai-boite-reglages, .rp-br, .pwai-decoupe, .pwai-dialogue) .br-sec:first-child { border-top: 0; padding-top: 2px; }
:is(.pwai-boite-reglages, .rp-br, .pwai-decoupe, .pwai-dialogue) .br-sec-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
:is(.pwai-boite-reglages, .rp-br, .pwai-decoupe, .pwai-dialogue) .br-sec-titre { font-size: 12.5px; font-weight: 700; color: var(--text); }
:is(.pwai-boite-reglages, .rp-br, .pwai-decoupe, .pwai-dialogue) .br-sec-val { font-size: 11.5px; font-weight: 600; color: var(--text); }
:is(.pwai-boite-reglages, .rp-br, .pwai-decoupe, .pwai-dialogue) .br-aide { font-size: 11.5px; line-height: 1.4; color: var(--text-mute); margin: 0 0 6px; }
:is(.pwai-boite-reglages, .rp-br, .pwai-decoupe, .pwai-dialogue) .br-choix-liste { display: flex; flex-wrap: wrap; gap: 6px; }
:is(.pwai-boite-reglages, .rp-br, .pwai-decoupe, .pwai-dialogue) .br-choix { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; font-size: 12px; cursor: pointer; border: 1px solid var(--line); background: var(--bg); color: var(--text-dim); }
:is(.pwai-boite-reglages, .rp-br, .pwai-decoupe, .pwai-dialogue) .br-choix.on { border: 1.5px solid var(--accent); background: var(--accent-soft, #fff0e8); color: var(--text); font-weight: 700; }
:is(.pwai-boite-reglages, .rp-br, .pwai-decoupe, .pwai-dialogue) .br-choix input { margin: 0; accent-color: var(--accent); }
:is(.pwai-boite-reglages, .rp-br, .pwai-decoupe, .pwai-dialogue) .br-choix-ligne { border: 0; padding: 2px 0; background: none; font-weight: 600; color: var(--text); }
:is(.pwai-boite-reglages, .rp-br, .pwai-decoupe, .pwai-dialogue) .br-plus { border-top: 1px solid var(--line); padding-top: 4px; }
:is(.pwai-boite-reglages, .rp-br, .pwai-decoupe, .pwai-dialogue) .br-plus-btn { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 0; background: none; border: 0; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-dim); text-align: left; }
:is(.pwai-boite-reglages, .rp-br, .pwai-decoupe, .pwai-dialogue) .br-plus.on .br-plus-btn { color: var(--text); }
:is(.pwai-boite-reglages, .rp-br, .pwai-decoupe, .pwai-dialogue) .br-plus-corps .br-sec:first-child { border-top: 0; }
:is(.pwai-boite-reglages, .rp-br, .pwai-decoupe, .pwai-dialogue) .br-principal { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; }
:is(.pwai-boite-reglages, .rp-br, .pwai-decoupe, .pwai-dialogue) .br-principal-btn { width: 100%; padding: 8px 12px; border-radius: 8px; border: 0; background: var(--accent); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; }
.pwai-boite-reglages .mot-nuancier { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.pwai-boite-reglages .mot-ico { display: inline-block; width: 18px; height: 18px; border-radius: 4px; background-color: #F8FAFC; background-size: 9px 9px; background-repeat: repeat; border: 1px solid var(--line); }
/* Pièces communes (Aide, ChoixCouleur, BarreActions, Gestes, Dialogue). */
.br-aide-plus { padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.br-aide-long { margin-top: 4px; }
.choix-couleur { display: flex; flex-direction: column; gap: 6px; }
.choix-couleur .couleurs-maillot, .choix-couleur .rp-label { margin-bottom: 0; }
.cc-nuancier { display: flex; gap: 4px; flex-wrap: wrap; }
.cc-sw, .cc-tout { width: 22px; height: 22px; border-radius: 5px; padding: 0; cursor: pointer; border: 1px solid rgba(0,0,0,.12); flex: none; }
.cc-sw.selected { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--accent); }
.cc-tout { display: inline-flex; align-items: center; justify-content: center; border-color: rgba(0,0,0,.15);
  background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.cc-tout span { color: #fff; font-weight: 700; font-size: 14px; line-height: 1; text-shadow: 0 0 2px rgba(0,0,0,.7); }
:is(.pwai-boite-reglages, .rp-br, .pwai-decoupe, .pwai-dialogue) .br-actions-ligne { display: flex; gap: 8px; }
:is(.pwai-boite-reglages, .rp-br, .pwai-decoupe, .pwai-dialogue) .br-actions-ligne .br-principal-btn { flex: 1; width: auto; }
:is(.pwai-boite-reglages, .rp-br, .pwai-decoupe, .pwai-dialogue) .br-secondaire-btn { flex: none; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line-strong, var(--line)); background: var(--bg); color: var(--text); font-weight: 600; font-size: 13px; cursor: pointer; }
:is(.pwai-boite-reglages, .rp-br, .pwai-decoupe, .pwai-dialogue) .br-principal-btn:disabled { opacity: .45; cursor: default; }
.br-geste-plus { position: relative; display: inline-flex; }
.br-geste-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; min-width: 190px; display: flex; flex-direction: column; padding: 4px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.18); }
.br-geste-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 0; border-radius: 7px; background: none; color: var(--text); font-size: 12.5px; text-align: left; cursor: pointer; }
.br-geste-item:hover { background: var(--bg-soft); }
.br-geste-item.on { background: var(--pl-doux, var(--bg-soft)); font-weight: 700; }
.br-geste-item.br-danger:hover { color: var(--danger, #c62828); }
/* Lot 2 — le cadre de toutes les boîtes : Dupliquer, Supprimer, « ⋯ » ; la
   boîte texte / nom / numéro en sections (Texte, Police, Taille, Couleur,
   Courbe, Place), le reste sous « Plus de réglages ». */
.pwai-boite-reglages .br-gestes-simples > .br-geste-plus { flex: 1 1 0; min-width: 0; display: flex; }
.pwai-boite-reglages .br-gestes-simples > .br-geste-plus > .br-geste-lib { flex: 1 1 auto; }
.pwai-boite-reglages.br-feuille .br-gestes.br-gestes-simples { overflow: visible; }
body.rmob .pwai-boite-reglages .br-gestes-simples .br-geste.br-geste-lib { flex: 1 1 0 !important; }
.pwai-boite-reglages .br-geste-menu .br-geste-nom { font-size: 12.5px; font-weight: 500; text-align: left; white-space: nowrap; }
.br-police-ligne { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.br-police-ligne > :first-child { flex: 1 1 140px; min-width: 0; }
.br-coche { display: flex; align-items: center; gap: 8px; font-size: 12px; margin: 4px 0; cursor: pointer; line-height: 1.35; }
.br-coche input { margin: 0; accent-color: var(--accent); flex: none; }
.br-coche-accent { padding: 6px 8px; border: 1px solid rgba(255,106,0,.45); border-radius: 8px; background: rgba(255,106,0,.06); }
.br-texte .rg-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.br-texte .rg-seg .rg-seg-btn { flex: 1 1 auto; }
.br-texte .br-sec-val .ec-mesure { display: inline; margin: 0; font-size: 11.5px; color: var(--text-dim); }
.br-place .rg-boutons { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.br-place .rg-boutons .ts-btn { flex: 1 1 auto; }
.cc-bouton { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
/* Équipe : le décalage par joueur en champ ± (le libellé est déjà écrit au-dessus). */
.eqp-aj-ligne > .eqp-champ { grid-area: r; min-width: 0; }
.eqp-champ .bande-champ { margin: 0 0 4px; }
/* Lot 3 — la boîte Image et les boîtes Bandes / formes / bordures, en
   sections, sans onglets ; « Plus de réglages » replié ; Terminé. */
.br-image .br-sec-val .ec-dpi { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 2px 8px; border: 1px solid; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.br-image .br-sec-val .ec-mesure:not(.ec-dpi) { display: inline; margin: 0; font-size: 11.5px; color: var(--text-dim); }
.ec-dpi-point { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.pwai-boite-reglages .br-large { width: 100%; min-height: 36px; justify-content: center; font-size: 12.5px; font-weight: 600; }
.pwai-boite-reglages .br-corps .br-sec .rg-boutons { margin: 4px 0; }
.pwai-boite-reglages .br-corps .br-sec > .bande-champ + .bande-champ { margin-top: 6px; }
.pwai-boite-reglages .br-corps .br-sec .rg-apercu, .pwai-boite-reglages .br-corps .br-sec .bande-rayures, .pwai-boite-reglages .br-corps .br-sec .rg-apercu-degrade { margin-bottom: 8px; }
.pwai-boite-reglages .br-corps .br-sec .forme-contour { margin-top: 6px; }
.pwai-boite-reglages .br-corps .br-sec .forme-contour .rg-lien { margin-top: 4px; }
.pwai-boite-reglages .br-corps .br-sec .bordure-dans { display: flex; flex-direction: column; gap: 8px; }
.pwai-boite-reglages .br-corps .br-sec .bande-rayure { margin-bottom: 6px; }
.pwai-boite-reglages .br-corps .br-plus .bandes-posees { border-top: 0; padding-top: 2px; margin-top: 0; }
.pwai-boite-reglages .br-corps .br-plus .bandes-posees .rp-label { display: none; }
.br-image .rg-boutons .ts-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; flex: 1 1 auto; }
.eqp-champ .bc-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eqp-champ .bc-ctrl { margin-left: auto; }
.pwai-dialogue .modal-head { align-items: flex-start; }
.pwai-dialogue-titres { flex: 1; min-width: 0; }
.pwai-dialogue-titres h2 { margin: 0; }
.pwai-dialogue-sous { font-size: 12px; color: var(--text-mute); margin-top: 2px; }
.pwai-dialogue-large { width: min(860px, calc(100vw - 24px)); }
.pwai-dialogue-pied { padding: 0 18px 14px; }
/* La ligne de résumé du motif choisi, dans le panneau Motifs. */
.mot-resume { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-top: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-soft); }
.mot-resume-pastille { width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(0,0,0,.15); flex: none; }
.mot-resume-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: 12px; line-height: 1.3; }
.mot-resume-sous { color: var(--text-mute); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mot-resume-btn { display: inline-flex; align-items: center; gap: 4px; flex: none; }

/* Lot 4 — Colorier : la pièce ouverte et les couleurs du design en sections
   (Couleur → Couleur unie ou dégradé → Dégradés tout faits), « Plus de
   réglages » replié, un bouton Terminé ; les 35 teintes rapides en grille. */
.colorier-br .cc-nuancier { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
.colorier-br .cc-sw, .colorier-br .cc-nuancier .cc-tout { width: auto; height: auto; aspect-ratio: 1; min-height: 22px; }
.colorier-br .grad-stops { margin: 2px 0 8px; }
.colorier-br .grad-stop-card { font: inherit; color: inherit; text-align: left; width: 100%; }
.colorier-br .grad-stop-card .gs-hex { font-family: inherit; font-size: 11.5px; }
.colorier-br .grad-stop-card .gs-name { font-size: 10.5px; }
.colorier-br .seg button { flex: 1 1 0; }
.colorier-br .grad-editor { padding: 8px; }
.colorier-br .br-plus-corps .btn { display: flex; align-items: center; gap: 6px; }
.colorier-fin .br-principal { margin-top: 0; }
body.rmob .colorier-br .cc-sw, body.rmob .colorier-br .cc-nuancier .cc-tout { min-height: 30px; }
body.rmob .app .right .colorier-br .seg { position: static; margin: 0; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-elev); }
/* ══ BOÎTES DE RÉGLAGES : LE RAIL D'OUTILS (maquette C, une colonne) ══
   « Tout déplié, trop de texte, des fonctions derrière Plus. » En-tête :
   l'icône, le nom, la puce du lieu, Dupliquer, Supprimer, fermer. Dessous,
   à gauche, le rail (un bouton par outil : icône + mot court) ; à droite,
   SEULEMENT l'onglet choisi, sur UNE colonne. Un onglet peut réunir
   plusieurs outils (Taille : hauteur, largeur, espace), chacun sous un
   petit titre. La hauteur suit le contenu, jusqu'au bas de l'écran
   (BoiteReglages pose max-height), jamais plus basse que le rail ; ce
   qui dépasse défile à droite. Au téléphone, le rail devient la grille
   d'onglets en bas de la feuille. */
.pwai-boite-reglages { width: 460px; }
.pwai-boite-reglages .br-tete { grid-template-columns: auto auto minmax(0, 1fr) auto auto; row-gap: 0; padding: 5px 0; }
.pwai-boite-reglages .br-tete > .br-gestes { grid-column: auto; margin: 0; padding: 0; gap: 2px; border-top: 0; background: none; }
.pwai-boite-reglages .br-tete > .br-gestes .br-geste-lib { flex: none; width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 8px; }
.pwai-boite-reglages .br-tete > .br-gestes .br-geste-nom { display: none; }
.pwai-boite-reglages .br-tete > .br-fermer { align-self: center; margin-left: 2px; border-left: 0; }
.pwai-boite-reglages .br-cadre { flex: 1; min-height: 0; display: flex; }
.pwai-boite-reglages .br-rail {
  flex: none; width: 68px; display: flex; flex-direction: column; gap: 1px; padding: 4px;
  border-right: 1px solid var(--line-soft); background: var(--bg-soft); overflow-y: auto; scrollbar-width: none;
}
.pwai-boite-reglages .br-rail::-webkit-scrollbar { display: none; }
.pwai-boite-reglages .br-rail-btn {
  position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 40px; padding: 3px 2px; border: 0; border-radius: 8px; background: transparent; color: var(--text-dim);
  font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; transition: background .12s, color .12s;
}
.pwai-boite-reglages .br-rail-btn:hover { background: var(--bg-hover); color: var(--text); }
.pwai-boite-reglages .br-rail-btn.on { background: var(--pl-doux); color: var(--accent); box-shadow: inset 0 0 0 1px var(--pl-anneau); }
.pwai-boite-reglages .br-rail-ico { position: relative; display: grid; place-items: center; height: 18px; }
.pwai-boite-reglages .br-rail-val { position: absolute; top: -3px; right: -8px; width: 9px; height: 9px; border-radius: 3px; box-shadow: 0 0 0 1.5px var(--bg), inset 0 0 0 1px oklch(0 0 0 / .18); }
.pwai-boite-reglages .br-rail-nom { max-width: 100%; line-height: 1.3; padding-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pwai-boite-reglages .br-cadre > .br-corps { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; padding: 0 10px 10px; }
.pwai-boite-reglages .br-texte, .pwai-boite-reglages .br-image, .pwai-boite-reglages [data-pwai-motif-boite],
.pwai-boite-reglages .bande-ligne, .pwai-boite-reglages .bandes-bloc, .pwai-boite-reglages .bordure-bloc,
.pwai-boite-reglages .texte-lie, .pwai-boite-reglages .element-card, .pwai-boite-reglages .police-ia-hote { display: contents; }
/* L'outil choisi : son titre (icône + nom), puis ses réglages, un par ligne. */
.pwai-boite-reglages .br-outil { flex: none; display: flex; flex-direction: column; gap: 6px; min-height: 0; order: 1; padding-top: 8px; }
.pwai-boite-reglages .br-outil-suite { order: 2; margin-top: 4px; padding-top: 0; }
/* Plusieurs outils dans un onglet : un petit titre, un filet — pas de grand vide. */
.pwai-boite-reglages .br-outil-groupe + .br-outil-groupe { margin-top: 4px; border-top: 1px solid var(--line-soft); }
.pwai-boite-reglages .br-outil-sous { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-mute); }
.pwai-boite-reglages .br-outil-sous svg { color: var(--accent); }
.pwai-boite-reglages .br-outil-titre { display: flex; align-items: center; gap: 8px; padding: 12px 0 0; font-size: 13px; font-weight: 700; color: var(--text); }
.pwai-boite-reglages .br-outil-ico { display: grid; color: var(--accent); }
.pwai-boite-reglages .br-outil-corps { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.pwai-boite-reglages .br-outil .br-sec { display: flex; flex-direction: column; gap: 6px; padding: 0; margin: 0; border: 0; }
.pwai-boite-reglages .br-outil .bande-champ, .pwai-boite-reglages .br-outil .alg-champ { margin: 0; }
.pwai-boite-reglages .br-outil .rg-sous { margin: 2px 0 -2px; display: flex; align-items: center; gap: 6px; }
.pwai-boite-reglages .br-outil .choix-couleur { gap: 6px; }
/* Police : la liste a sa propre hauteur et défile seule (la boîte n'a
   plus de hauteur fixe à remplir). */
.pwai-boite-reglages .pp-police.pp-en-ligne { flex: none !important; height: min(300px, 44vh); min-height: 0; display: flex; flex-direction: column; }
.pwai-boite-reglages .pp-en-ligne .pol-panneau { flex: 1; min-height: 0; }
/* Une ligne = un réglage : le nom à gauche, la valeur ou le contrôle à droite. */
.pwai-boite-reglages .br-ligne { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
.pwai-boite-reglages .br-ligne-nom { font-size: 12.5px; color: var(--text); }
.pwai-boite-reglages .br-lecture { margin: 0; padding: 5px 9px; border-radius: 7px; background: var(--bg-elev); font-size: 12px; color: var(--text-dim); }
.pwai-boite-reglages .br-pile { display: flex; flex-direction: column; gap: 6px; }
.pwai-boite-reglages .br-pile select { width: 100%; height: 36px; }
.pwai-boite-reglages .br-champ-texte { width: 100%; min-height: 36px; font-size: 15px; font-weight: 700; padding: 5px 10px; }
.pwai-boite-reglages .br-large { width: 100%; min-height: 36px; justify-content: center; }
/* Les choix d'une même famille (places, miroir, formes, pièces, gestes du
   calque) : des tuiles, trois par rangée — jamais une colonne de liens. */
.pwai-boite-reglages .br-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.pwai-boite-reglages .br-liste .br-tuile {
  width: auto; min-width: 0; min-height: 50px; margin: 0; padding: 4px 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--text); text-align: center;
  font: inherit; font-size: 11px; font-weight: 600; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; cursor: pointer;
}
.pwai-boite-reglages .br-liste .br-tuile:hover:not(:disabled) { border-color: var(--line-strong); background: var(--bg-soft); }
.pwai-boite-reglages .br-liste .br-tuile.on, .pwai-boite-reglages .br-liste .br-tuile.active { border-color: var(--accent); background: var(--pl-doux); color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pwai-boite-reglages .br-liste .br-tuile:disabled { opacity: .45; cursor: default; }
.pwai-boite-reglages .br-tuile-pic { color: var(--text-mute); flex: none; }
.pwai-boite-reglages .br-tuile-ico { font-size: 18px; line-height: 1; color: var(--text-dim); }
.pwai-boite-reglages .br-liste .br-tuile svg { flex: none; }
.pwai-boite-reglages .br-liste label.br-tuile { position: relative; padding-top: 18px; }
.pwai-boite-reglages .br-liste label.br-tuile input { position: absolute; top: 6px; left: 6px; margin: 0; }
.pwai-boite-reglages .formes-grille.br-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Bordure de col, onglet Finitions : le bout dessiné dans sa tuile, le ⓘ des emmanchures. */
.pwai-boite-reglages .bordure-bouts, .pwai-boite-reglages .bordure-styles { margin: 4px 0 8px; }
.pwai-boite-reglages .br-liste .br-tuile.on svg.bf-pic { color: var(--accent); }
.pwai-boite-reglages .bf-info { cursor: help; color: var(--text-mute); font-weight: 400; }
.pwai-boite-reglages .bf-cote { margin-top: 6px; }
/* Finitions de col : l'ouverture — le schéma du col vu de dessus, le repère sur la 3D. */
.pwai-boite-reglages .bordure-ouverture { margin: 4px 0 8px; }
.pwai-boite-reglages .bordure-ouverture .br-tuile { min-height: 38px; }
.pwai-boite-reglages .bf-schema { display: block; width: 100%; max-width: 220px; height: auto; margin: 6px auto 2px; cursor: pointer; user-select: none; }
.bf-repere3d { position: absolute; z-index: 6; width: 22px; height: 22px; margin: -11px 0 0 -11px; padding: 0; border-radius: 50%;
  border: 3px solid var(--accent, #6d28d9); background: rgba(255,255,255,.92); box-shadow: 0 1px 4px rgba(0,0,0,.45); cursor: grab; touch-action: none; }
.bf-repere3d.on { cursor: grabbing; transform: scale(1.15); }
.pwai-boite-reglages .formes-grille.br-liste .forme-choix { font-size: 11px; }
.pwai-boite-reglages .br-calque-gestes.br-liste .br-calque-btn { padding: 6px 4px; }
/* Police : deux par rangée, le nom écrit dans sa police (lisible à cette largeur). */
.pwai-boite-reglages .pol-en-ligne .pol-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; align-content: start; }
.pwai-boite-reglages .pol-en-ligne .pol-titre, .pwai-boite-reglages .pol-en-ligne .pol-vide { grid-column: 1 / -1; }
.pwai-boite-reglages .pol-en-ligne .pol-ligne { min-height: 46px; padding: 4px 8px; border: 1px solid var(--line-soft); justify-content: center; text-align: center; }
.pwai-boite-reglages .pol-en-ligne .pol-ligne.on { border-color: var(--accent); }
.pwai-boite-reglages .pol-en-ligne .pol-nom { font-size: 17px; text-align: center; }
.pwai-boite-reglages .pol-en-ligne .pol-abc, .pwai-boite-reglages .pol-en-ligne .pol-coche { display: none; }
.pwai-boite-reglages .br-graisses { width: auto; flex: none; }
.pwai-boite-reglages .rg-seg .br-graisse { flex: none; width: 36px; font-size: 15px; font-family: 'Manrope', system-ui, sans-serif; }
.pwai-boite-reglages .br-inerte { opacity: .45; }
.pwai-boite-reglages .br-inerte .br-graisse { display: grid; place-items: center; height: 32px; }
.pwai-boite-reglages .alg-rang .alg-btn { flex: 1 1 0; min-width: 0; height: 32px; padding: 0 4px; border: 0; border-radius: 8px; background: transparent; font-size: 12px; font-weight: 600; color: var(--text-dim); }
.pwai-boite-reglages .alg-rang .alg-btn:hover:not(:disabled) { background: var(--bg); color: var(--text); }
.pwai-boite-reglages .br-parties .seg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.pwai-boite-reglages .br-partie-pastille { width: 12px; height: 12px; border-radius: 4px; flex: none; box-shadow: inset 0 0 0 1px oklch(0 0 0 / .18); }
.pwai-boite-reglages .br-calque-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left; }
.pwai-boite-reglages .br-calque-btn:hover { border-color: var(--accent); }
.pwai-boite-reglages .br-calque-btn.on { background: var(--pl-doux); border-color: var(--pl-anneau); color: var(--accent); }
.pwai-boite-reglages .br-outil .bandes-posees { border-top: 0; padding-top: 0; }
.pwai-boite-reglages .br-outil .bandes-posees .bp-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pwai-boite-reglages .br-outil .bandes-posees .bp-puce { width: auto; min-width: 0; justify-content: flex-start; border-radius: 8px; text-align: left; white-space: normal; }
.pwai-boite-reglages .br-outil .forme-contour { gap: 8px; }
.pwai-boite-reglages .br-verrou { order: 0; margin: 10px 0 0; font-size: 12px; }
.pwai-boite-reglages .br-outil .police-ia { display: flex; flex-direction: column; gap: 8px; }
/* ── Téléphone : la grille d'outils en bas de la feuille, hauteur fixe. */
.pwai-boite-reglages.br-feuille { height: auto; max-height: 60vh; }
.pwai-boite-reglages.br-feuille.br-replie { height: auto; }
.pwai-boite-reglages.br-feuille .br-tete { grid-template-columns: auto minmax(0, 1fr) auto auto; padding-bottom: 8px; }
.pwai-boite-reglages.br-feuille .br-cadre { flex-direction: column-reverse; }
.pwai-boite-reglages.br-feuille .br-rail {
  width: auto; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; overflow: visible;
  border-right: 0; border-top: 1px solid var(--line-soft); padding: 6px 6px calc(8px + env(safe-area-inset-bottom, 0px));
}
body.rmob .pwai-boite-reglages .br-rail-btn { min-height: 52px !important; min-width: 0 !important; height: auto !important; width: auto !important; padding: 4px 2px !important; font-size: 10.5px; }
.pwai-boite-reglages.br-feuille .br-outil-titre { display: none; }
.pwai-boite-reglages.br-feuille .br-cadre > .br-corps { padding: 2px 14px 10px; }
.pwai-boite-reglages.br-feuille .br-outil-sous { min-height: 0; }
.pwai-boite-reglages.br-feuille .pp-police.pp-en-ligne { height: min(260px, 32vh); }
.pwai-boite-reglages.br-feuille.br-replie .br-cadre > .br-corps { display: none; }
body.rmob .pwai-boite-reglages .br-tete > .br-gestes .br-geste.br-geste-lib { width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 0 !important; flex: none !important; }
.pwai-boite-reglages .br-tete .br-lieu-verbe { font-size: 0; gap: 0; padding-left: 4px; border-left: 0; }
/* Couleur dans une boîte : le bouton Pantone, puis UNE rangée — les
   couleurs du produit en petites pastilles, quelques récentes au bout. */
.couleurs-maillot.cm-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; border: 0; background: none; }
.couleurs-maillot.cm-ligne .cm-ligne-nom { flex: none; margin-right: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-mute); }
.couleurs-maillot.cm-ligne .cm-mini { flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; cursor: pointer; box-shadow: inset 0 0 0 1px oklch(0 0 0 / .18); }
.couleurs-maillot.cm-ligne .cm-mini.selected { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--accent); }
.couleurs-maillot.cm-ligne .cm-recente { width: 18px; height: 18px; border-radius: 5px; }
.couleurs-maillot.cm-ligne .cm-sep { width: 1px; height: 18px; margin: 0 2px; background: var(--line); }
body.rmob .couleurs-maillot.cm-ligne .cm-mini { width: 40px; height: 40px; border-radius: 9px; }
body.rmob .couleurs-maillot.cm-ligne .cm-recente { width: 32px; height: 32px; }
/* Les contours d'un texte : une ligne par contour, de la lettre vers l'extérieur. */
.ct-contours { display: flex; flex-direction: column; gap: 6px; }
.ct-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ct-ligne { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 3px 4px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--bg); }
.ct-ligne.ct-tire { opacity: .5; }
.ct-poignee { flex: none; width: 10px; font-size: 11px; line-height: 1; letter-spacing: -2px; color: var(--text-mute); cursor: grab; user-select: none; }
.ct-pastille { flex: none; display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 6px 0 3px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg-soft); cursor: pointer; font: inherit; color: var(--text); max-width: 108px; }
.ct-pastille:hover { border-color: var(--accent); }
.ct-teinte { flex: none; width: 22px; height: 22px; border-radius: 5px; box-shadow: inset 0 0 0 1px oklch(0 0 0 / .2); }
.ct-ref { font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-ligne .bande-champ { flex: 1 1 auto; min-width: 0; margin: 0; }
.ct-ligne .bande-champ .bc-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ct-ligne .bande-champ input { width: 44px; }
.ct-ordre { flex: none; display: flex; gap: 2px; }
.ct-btn { flex: none; width: 26px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text-dim); font: inherit; font-size: 13px; cursor: pointer; }
.ct-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.ct-btn:disabled { opacity: .35; cursor: default; }
.ct-retirer { font-size: 16px; }
.ct-vide { font-size: 12px; color: var(--text-mute); }
.ct-ajouter { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px dashed var(--line-strong); border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ct-ajouter:hover:not(:disabled) { border-color: var(--accent); background: var(--bg-soft); }
.ct-ajouter:disabled { opacity: .45; cursor: default; }
/* Téléphone : une ligne par contour, cibles de 40 px — la pastille sans
   son code (il est dans l'infobulle et dans le nuancier), un champ resserré. */
body.rmob .ct-poignee, body.rmob .ct-ref { display: none; }
body.rmob .ct-ligne { gap: 3px; padding: 2px 3px; }
body.rmob .ct-pastille { width: 44px; height: 40px; padding: 0; justify-content: center; }
body.rmob .ct-teinte { width: 26px; height: 26px; }
body.rmob .pwai-boite-reglages .ct-ligne .bc-ctrl input { width: 40px; }
body.rmob .pwai-boite-reglages .ct-ligne .bc-unite { font-size: 10px; }
body.rmob .ct-btn { width: 40px; height: 40px; }
body.rmob .ct-ajouter { min-height: 40px; }
/* Modèle › Design : les deux portes vers l'IA, juste après « Sans design ».
   Reconnaissables comme de l'IA sans être kitsch : tuile claire, contour large
   au dégradé violet → bleu (la signature IA du configurateur), icône au même
   dégradé, mention « IA » discrète. Pas d'animation ni de paillettes. */
.templates-grid .tpl.tpl-ia { gap: 8px; padding: 10px 8px 34px; border: 2.5px solid transparent;
  background: linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(135deg,#7c3aed,#2563eb) border-box;
  transition: box-shadow .15s; }
.templates-grid .tpl.tpl-ia .tpl-ia-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; color: #fff;
  background: linear-gradient(135deg,#7c3aed,#2563eb); }
.templates-grid .tpl.tpl-ia .tpl-ia-ico svg { width: 20px; height: 20px; color: #fff; }
.templates-grid .tpl.tpl-ia .tpl-ia-badge { position: absolute; top: 6px; right: 7px; font-size: 9px; font-weight: 700; letter-spacing: .08em; color: #7c3aed; }
.templates-grid .tpl.tpl-ia .tpl-name { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.templates-grid .tpl.tpl-ia .tpl-name b { font-size: 11px; font-weight: 700; color: var(--text); }
.templates-grid .tpl.tpl-ia .tpl-sous { font-size: 10px; color: var(--text-mute); }
.templates-grid .tpl.tpl-ia:hover { box-shadow: 0 4px 14px oklch(0.5 0.2 285 / .18); }
.templates-grid .tpl.tpl-ia:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }

/* ═══ « CRÉER AVEC L'IA » EN SEPT ÉTAPES ════════════════════════════════
   Idée → Univers → Créativité → Couleurs → Logos → Images → Récap. Une
   barre de vues, sept pastilles, une étape à la fois, et une barre
   collante qui ne porte que « Générer mon design ». Même parcours sur
   ordinateur et sur téléphone. */
.ia-7 .ia-gris { color: var(--text-mute); }
.ia-7 > .ia-vues, .ia-7 > .ia-pastilles-etapes { margin-left: var(--eqp-gut, 14px); margin-right: var(--eqp-gut, 14px); }
.ia-7 > .ia-etape-v, .ia-7 > .ia-repro { padding: 0 var(--eqp-gut, 14px) 16px; }
.ia-7 .ia-vues { display: flex; gap: 2px; padding: 3px; margin-top: 2px; margin-bottom: 12px; border-radius: 10px; background: var(--bg-elev); border: 1px solid var(--line); }
.ia-7 .ia-vues button { flex: 1; min-height: 34px; padding: 6px 8px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-dim); display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.ia-7 .ia-vues button.on { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px oklch(0.2 0.01 250 / .12); }
.ia-7 .ia-vue-n { font-size: 11px; color: var(--text-mute); font-weight: 700; }
.ia-7 .ia-pastilles-etapes { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.ia-7 .ia-pt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 0 1px; cursor: pointer; font: inherit; min-width: 0; }
.ia-7 .ia-pt + .ia-pt::before { content: ""; position: absolute; top: 13px; right: 50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.ia-7 .ia-pt.fait + .ia-pt::before, .ia-7 .ia-pt.fait + .ia-pt.on::before { background: var(--good); }
.ia-7 .ia-pt-rond { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; background: var(--bg); border: 1.5px solid var(--line-strong); color: var(--text-dim); }
.ia-7 .ia-pt.fac .ia-pt-rond { border-style: dashed; }
.ia-7 .ia-pt.fait .ia-pt-rond { background: var(--good); border: 1.5px solid var(--good); color: #fff; }
.ia-7 .ia-pt.on .ia-pt-rond { background: var(--accent); border: 1.5px solid var(--accent); color: var(--brand-on-primary, #fff); box-shadow: 0 0 0 3px var(--accent-soft); }
.ia-7 .ia-pt-nom { font-size: 10px; letter-spacing: -0.01em; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ia-7 .ia-pt.on .ia-pt-nom { color: var(--text); font-weight: 700; }
.ia-7 .ia-e-tete { margin: 2px 0 10px; }
.ia-7 .ia-e-sur { display: flex; align-items: center; gap: 8px; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); }
.ia-7 .ia-e-fac { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 11px; padding: 1px 8px; border: 1px dashed var(--line-strong); border-radius: 99px; }
.ia-7 .ia-e-titre { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); margin-top: 4px; }
.ia-7 .ia-e-aide { font-size: 12.5px; line-height: 1.45; color: var(--text-dim); margin-top: 3px; }
.ia-7 .ia-e-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.ia-7 .ia-e-nav-d { display: flex; gap: 8px; }
.ia-7 .ia-e-nav button { min-height: 36px; padding: 0 14px; border-radius: 99px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); }
.ia-7 .ia-e-nav .ia-passer { border-color: transparent; color: var(--text-dim); background: none; }
.ia-7 .ia-e-nav .ia-suiv { border: 1.5px solid var(--text); }
.ia-7 .ia-e-nav button:disabled { opacity: .45; cursor: default; }
.ia-7 .ai-prompt { min-height: 110px; }
.ia-7 .ia-compte { text-align: right; font-size: 11px; color: var(--text-mute); margin-top: 2px; }
.ia-7 .ia-exemples { margin-top: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: 8px 10px; }
.ia-7 .ia-exemples summary { font-size: 12.5px; font-weight: 700; cursor: pointer; color: var(--text); }
.ia-7 .ia-exemples-c { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin-top: 6px; }
.ia-7 .ia-exemple { margin-top: 4px; }
.ia-7 .ia-avert { margin-top: 8px; padding: 8px 10px; border-radius: 8px; font-size: 12px; line-height: 1.4; background: #fff5e5; border: 1px solid #f0ddb8; color: #8a5a06; }
/* Univers */
.ia-7 .ia-familles { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 8px; scrollbar-width: none; }
.ia-7 .ia-familles button { flex: none; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--bg); font: inherit; font-size: 12px; font-weight: 600; color: var(--text); cursor: pointer; }
.ia-7 .ia-univers-compte { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.ia-7 .ia-famille { margin-top: 10px; scroll-margin-top: 8px; }
.ia-7 .ia-famille-titre { font-size: 13px; font-weight: 700; color: var(--text); }
.ia-7 .ia-famille-aide { font-size: 11.5px; color: var(--text-mute); margin: 1px 0 6px; }
.ia-7 .ia-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.ia-7 .ia-tuile { position: relative; padding: 0; border-radius: 9px; overflow: hidden; aspect-ratio: 16 / 11; cursor: pointer; border: 1px solid var(--line);
  background: var(--bg-soft); color: #fff; font: inherit; font-size: 10.5px; font-weight: 600; line-height: 1.25; text-align: center; }
.ia-7 .ia-tuile.on { border: 2.5px solid var(--accent); font-weight: 800; }
.ia-7 .ia-tuile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ia-7 .ia-tuile-nom { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 4px 4px; background: linear-gradient(transparent, oklch(0 0 0 / 0.72)); text-shadow: 0 1px 2px oklch(0 0 0 / 0.6); }
.ia-7 .ia-tuile-libre { border-style: dashed; color: var(--text); font-size: 12px; font-weight: 700; }
.ia-7 .ia-tuile-libre.on { border-style: solid; background: var(--accent-soft); }
.ia-7 .ia-tuile-libre-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px; }
/* Créativité */
.ia-7 .ia-crea-rail { display: flex; justify-content: space-between; position: relative; margin: 6px 4px 2px; }
.ia-7 .ia-crea-rail::before { content: ""; position: absolute; left: 14px; right: 14px; top: 15px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--line)); }
.ia-7 .ia-crea-pt { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.ia-7 .ia-crea-rond { width: 32px; height: 32px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px;
  background: var(--bg); border: 2px solid var(--line-strong); color: var(--text-dim); }
.ia-7 .ia-crea-pt.avant .ia-crea-rond { border-color: var(--accent); color: var(--text); }
.ia-7 .ia-crea-pt.on .ia-crea-rond { background: var(--accent); border-color: var(--accent); color: var(--brand-on-primary, #fff); box-shadow: 0 0 0 4px var(--accent-soft); }
.ia-7 .ia-crea-nom { font-size: 11px; color: var(--text-dim); }
.ia-7 .ia-crea-pt.on .ia-crea-nom { color: var(--text); font-weight: 700; }
.ia-7 .ia-crea-bornes { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-mute); margin: 2px 0 10px; }
.ia-7 .ia-crea-cartes { display: flex; flex-direction: column; gap: 8px; }
.ia-7 .ia-crea-carte { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg); font: inherit; color: var(--text); }
.ia-7 .ia-crea-carte.on { border: 1.5px solid var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ia-7 .ia-crea-num { flex: none; width: 26px; height: 26px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; background: var(--bg-elev); color: var(--text-dim); }
.ia-7 .ia-crea-carte.on .ia-crea-num { background: var(--accent); color: var(--brand-on-primary, #fff); }
.ia-7 .ia-crea-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ia-7 .ia-crea-titre { font-size: 13.5px; }
.ia-7 .ia-crea-court { font-size: 12.5px; color: var(--text-dim); }
.ia-7 .ia-crea-long { display: flex; flex-direction: column; gap: 5px; margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--line); font-size: 12px; line-height: 1.45; color: var(--text-dim); }
.ia-7 .ia-crea-long b { color: var(--text); }
.ia-7 .ia-crea-barres { flex: none; display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; margin-top: 4px; }
.ia-7 .ia-crea-barres i { width: 4px; border-radius: 2px; background: var(--line-strong); }
.ia-7 .ia-crea-barres i:nth-child(1) { height: 5px; } .ia-7 .ia-crea-barres i:nth-child(2) { height: 8px; } .ia-7 .ia-crea-barres i:nth-child(3) { height: 11px; }
.ia-7 .ia-crea-barres i:nth-child(4) { height: 14px; } .ia-7 .ia-crea-barres i:nth-child(5) { height: 16px; }
.ia-7 .ia-crea-barres i.on { background: var(--accent); }
/* Couleurs, logos, images */
.ia-7 .ia-sous-titre { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.ia-7 .ia-teintes { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.ia-7 .ia-pastilles { display: grid; grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); gap: 6px; margin-bottom: 8px; }
.ia-7 .ia-champ { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); font: inherit; font-size: 12px; background: var(--bg); color: var(--text); }
.ia-7 .ia-depot { display: flex; align-items: center; justify-content: center; text-align: center; border: 2px dashed var(--line-strong); border-radius: 14px; padding: 18px 14px; cursor: pointer; background: var(--bg); transition: border-color .15s; }
.ia-7 .ia-depot.survol { border-color: var(--accent); }
.ia-7 .ia-depot-texte { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--text); }
.ia-7 .ia-depot-texte span { font-size: 11.5px; color: var(--text-mute); }
.ia-7 .ia-note { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; margin-top: 8px; border-left: 3px solid var(--line-strong); padding-left: 8px; }
.ia-7 .ia-logos { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ia-7 .ia-logo { position: relative; display: inline-flex; }
.ia-7 .ia-logo img { width: 60px; height: 60px; object-fit: contain; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-soft); }
.ia-7 .ia-logo button, .ia-7 .ia-image-x { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 99px; border: 1px solid var(--line); background: var(--bg); color: var(--text-dim); font-size: 13px; line-height: 1; cursor: pointer; padding: 0; }
.ia-7 .ia-images { display: flex; flex-direction: column; gap: 8px; }
.ia-7 .ia-image { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.ia-7 .ia-image > img { width: 58px; height: 58px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); flex: none; }
.ia-7 .ia-image-c { flex: 1; min-width: 0; }
.ia-7 .ia-image-nom { font-size: 12px; color: var(--text-dim); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-7 .ia-roles { display: flex; flex-wrap: wrap; gap: 4px; }
.ia-7 .ia-roles button { padding: 3px 9px; border-radius: 99px; font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; border: 1px solid var(--line); background: var(--bg); color: var(--text-dim); }
.ia-7 .ia-roles button.on { border: 1.5px solid var(--text); color: var(--text); background: var(--bg-elev); }
.ia-7 .ia-bouton-l { align-self: flex-start; padding: 7px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--bg); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text); }
.ia-7 .ia-niveau-ligne { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 12px; background: var(--accent-soft); border: 1px solid var(--accent-line); font-size: 12px; line-height: 1.45; color: var(--text); }
.ia-7 .ia-niveau-rond { flex: none; width: 22px; height: 22px; border-radius: 99px; background: var(--accent); color: var(--brand-on-primary, #fff); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11.5px; }
.ia-7 .ia-case { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; font-size: 12px; line-height: 1.4; }
.ia-7 .ia-case > span { display: flex; flex-direction: column; gap: 2px; }
.ia-7 .ia-lien { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
/* Récapitulatif */
.ia-7 .ia-recap-lignes { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); overflow: hidden; margin-bottom: 12px; }
.ia-7 .ia-recap-ligne { display: grid; grid-template-columns: 22px 78px 1fr auto; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: 0; border-top: 1px solid var(--line); background: none; font: inherit; text-align: left; cursor: pointer; color: var(--text); }
.ia-7 .ia-recap-ligne:first-child { border-top: 0; }
.ia-7 .ia-recap-n { width: 20px; height: 20px; border-radius: 99px; background: var(--bg-elev); font-size: 11px; font-weight: 700; color: var(--text-dim); display: inline-flex; align-items: center; justify-content: center; }
.ia-7 .ia-recap-l { font-size: 12.5px; font-weight: 700; }
.ia-7 .ia-recap-v { font-size: 12px; color: var(--text-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 5px; }
.ia-7 .ia-recap-m { font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ia-7 .ia-recap-ronds { display: inline-flex; gap: 2px; flex: none; }
.ia-7 .ia-recap-ronds i { width: 12px; height: 12px; border-radius: 99px; box-shadow: inset 0 0 0 1px oklch(0 0 0 / .2); }
.ia-7 .ia-pistes-btn { width: 100%; padding: 11px 0; border-radius: 12px; cursor: pointer; border: 1.5px solid var(--accent); background: var(--accent-soft); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; }
.ia-7 .ia-pistes-btn:disabled { opacity: .55; cursor: default; }
.ia-7 .ia-pistes-cartes { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.ia-7 .ai-piste-carte { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); }
.ia-7 .ai-piste-tete { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); }
.ia-7 .ai-piste-tete span { width: 22px; height: 22px; border-radius: 99px; background: var(--accent-soft); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.ia-7 .ai-piste-carte textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); font: inherit; font-size: 12.5px; line-height: 1.5; resize: vertical; color: var(--text); background: var(--bg-soft); }
.ia-7 .ai-piste-carte button { align-self: flex-start; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--bg); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; color: var(--text); }
.ia-7 .ia-bloc { margin-top: 12px; }
.ia-7 .ia-segment { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--bg-elev); border: 1px solid var(--line); }
.ia-7 .ia-segment button { flex: 1; padding: 6px 4px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-dim); cursor: pointer; }
.ia-7 .ia-segment button.on { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px oklch(0.2 0.01 250 / .12); }
.ia-7 .pwai-gf-choix { margin-top: 12px; }
.ia-7 .ia-liens-bas { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; }
.ia-7 .ia-repro .ia-portes { display: flex; margin: 8px 0 10px; }
.ia-7 .ia-repro .ia-portes button { flex: 1; padding: 9px 6px; border-radius: 10px; font: inherit; font-size: 12.5px; font-weight: 700; border: 1.5px solid var(--accent); background: var(--accent-soft); color: var(--text); }
.ia-7 .ia-retour { font-size: 12.5px; }
.ia-7 > .ai-gen-collant .ai-gen-btn:disabled { opacity: .55; }
body.rmob .ia-7 .ia-pt-nom { font-size: 9.5px; }
body.rmob .ia-7 .ia-pt-rond { width: 24px; height: 24px; }
body.rmob .ia-7 .ia-pt + .ia-pt::before { top: 12px; }
body.rmob .ia-7 .ia-e-nav button { min-height: 44px; }
body.rmob .ia-7 .ia-recap-ligne { grid-template-columns: 22px 64px 1fr auto; min-height: 44px; }
body.rmob .ia-7 .ia-tuiles { grid-template-columns: repeat(3, 1fr); }

/* « Recréer ce logo » (boîte image) et « Recréer un logo net » (Créer avec l'IA, étape 5) — core/logo-recreer.js */
.lr-bloc { display: flex; flex-direction: column; gap: 6px; }
.lr-msg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border-radius: 8px; font-size: 12px; line-height: 1.4;
  border: 1px solid var(--line); background: var(--bg-soft, var(--bg)); color: var(--text-dim); }
.lr-msg.ok { border-left: 3px solid var(--ok, #16a34a); color: var(--text); }
.lr-msg.avert { border-left: 3px solid #d08a0c; color: var(--text); }
.lr-msg.err { border-left: 3px solid var(--danger); color: var(--text); }
.lr-msg em { color: var(--text-dim); }
.lr-spin { width: 14px; height: 14px; border-width: 2px; margin: 0; flex: none; }
.lr-apercu { display: block; max-width: 100%; max-height: 120px; object-fit: contain; border-radius: 6px; border: 1px solid var(--line);
  background: repeating-conic-gradient(#0000000d 0 25%, transparent 0 50%) 0 0 / 12px 12px; }
.lr-choix { display: flex; flex-wrap: wrap; gap: 6px; }
.lr-lien { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lr-logos { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; }
.lr-ligne { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; }
.lr-ligne-tete { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; }
.lr-ligne-tete img { width: 32px; height: 32px; object-fit: contain; border-radius: 6px; flex: none;
  background: repeating-conic-gradient(#0000000d 0 25%, transparent 0 50%) 0 0 / 8px 8px; }
.lr-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-nom b { font-weight: 600; color: var(--ok, #16a34a); }
.lr-gestes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ia-7 .lr-gestes .lr-btn { width: auto; flex: 1 1 auto; padding: 8px 12px; font-size: 12.5px; }

/* Panneau couleur d'une pièce (oct. 2026) : « Couleur unie / Dégradé » tout
   en haut, plus de nuancier rapide (la ligne de couleur ouvre Pantone),
   et la case damier « Laisser transparent » parmi les couleurs du produit. */
.colorier-br .colorier-modes-haut { padding: 0 0 10px; }
.colorier-br .colorier-modes-haut .seg { width: 100%; }
.colorier-br .cc-nuancier { grid-template-columns: repeat(auto-fill, minmax(16px, 1fr)); gap: 3px; }
.colorier-br .cc-sw, .colorier-br .cc-nuancier .cc-tout { min-height: 16px; border-radius: 4px; }
.colorier-br .cc-nuancier .cc-tout span { font-size: 11px; }
.cc-transparent { background-color: #fff;
  background-image: linear-gradient(45deg,#c9c9c9 25%,transparent 25%,transparent 75%,#c9c9c9 75%), linear-gradient(45deg,#c9c9c9 25%,transparent 25%,transparent 75%,#c9c9c9 75%);
  background-size: 8px 8px; background-position: 0 0, 4px 4px; }
body.rmob .colorier-br .cc-nuancier { grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); }

/* Boîte texte : le champ se lit comme LA case où l'on modifie le texte. */
.br-champ-texte-titre { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; margin: 0 0 6px; color: var(--text); font-size: 12px; }
.br-champ-texte-titre svg { align-self: center; color: var(--accent); }
.br-champ-texte-titre span { color: var(--text-mute); font-size: 11px; }
.pwai-boite-reglages .br-champ-texte { border: 1.5px solid var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 12%, transparent); min-height: 42px; }

/* Bandes et formes : ce qu'on peut poser, en grandes cases illustrées,
   puis le choix de la forme. */
.ajout-bandes { display: flex; flex-direction: column; gap: 10px; }
.ajout-cases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ajout-cases[hidden] { display: none; }
.ajout-case { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px 9px; border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--bg); color: var(--text); cursor: pointer; text-align: center; transition: border-color .12s, box-shadow .12s; }
.ajout-case:hover { border-color: var(--line-strong); }
.ajout-case.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 14%, transparent); }
.ajout-case b { font-size: 12.5px; font-weight: 700; margin-top: 2px; }
.ajout-case small { font-size: 10.5px; color: var(--text-mute); line-height: 1.25; }
.ajout-vignette { display: block; }
.ajout-formes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ajout-formes-titre { flex-basis: 100%; font-size: 12px; font-weight: 700; color: var(--text); }
.ajout-forme { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 62px; padding: 6px 2px 5px; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--text); cursor: pointer; }
.ajout-forme span { font-size: 10px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ajout-forme.on { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent) 14%, transparent); }
body.rmob .ajout-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }


/* LES CHAMPS CHIFFRÉS DES BOÎTES, EN COMPACT : l'intitulé en petit au-dessus,
   la commande dessous, et les champs voisins côte à côte (Hauteur · Largeur
   des lettres, Entre les lettres · Entre les lignes) ; ils passent à la
   ligne d'eux-mêmes quand la boîte est étroite. Le reste de la section
   (titres, aides, boutons) garde toute la largeur. */
.pwai-boite-reglages .br-outil .br-sec:has(> .bande-champ) { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; }
/* Deux sections voisines faites d'un seul champ (Entre les lettres, Entre
   les lignes) : côte à côte elles aussi. */
.pwai-boite-reglages .br-outil-corps:has(> .br-sec > .bande-champ:only-child) { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; column-gap: 10px; }
.pwai-boite-reglages .br-outil-corps:has(> .br-sec > .bande-champ:only-child) > * { flex: 1 1 100%; min-width: 0; }
.pwai-boite-reglages .br-outil-corps > .br-sec:has(> .bande-champ:only-child) { flex: 0 0 auto; }
.pwai-boite-reglages .br-outil .br-sec:has(> .bande-champ) > * { flex: 1 1 100%; min-width: 0; }
/* « Un plus, un moins et un chiffre, c'est pas un truc aussi grand » : chaque champ garde
   une petite largeur fixe, les voisins se rangent côte à côte (plus d'étirement sur la colonne). */
.pwai-boite-reglages .br-outil .br-sec > .bande-champ { flex: 0 0 auto; width: 132px; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 3px; min-height: 0; margin: 0; }
.pwai-boite-reglages .br-corps .br-outil .br-sec > .bande-champ + .bande-champ { margin-top: 0; }
.pwai-boite-reglages .br-outil .br-sec > .bande-champ .bc-label { flex: none; font-size: 10.5px; font-weight: 600; color: var(--text-mute); white-space: normal; overflow: visible; line-height: 1.25; }
.pwai-boite-reglages .br-outil .br-sec > .bande-champ .bc-ctrl { width: 100%; height: 32px; }
.pwai-boite-reglages .br-outil .br-sec > .bande-champ .bc-ctrl input { flex: 1; width: auto; min-width: 36px; height: 30px; }
.pwai-boite-reglages .br-outil .br-sec > .bande-champ .bc-pm { width: 30px; height: 30px; }
.pwai-boite-reglages .br-outil .br-sec > .bande-champ .bc-ctrl input { min-width: 0; }

/* Noms trop longs : « Taille libre » / « Largeur limitée », une ligne d'explication sous chaque choix. */
.pwai-boite-reglages .br-largeur-choix .br-tuile { flex-direction: column; gap: 2px; padding: 8px 6px; text-align: center; }
.pwai-boite-reglages .br-largeur-choix .br-tuile-sous { font-size: 10.5px; font-weight: 500; color: var(--text-mute); line-height: 1.25; white-space: normal; }
.pwai-boite-reglages .br-largeur-choix .br-tuile.on .br-tuile-sous { color: var(--text-dim); }

/* Créer avec l'IA : la barre du bas suit l'étape — Retour / Passer / Suivant, puis Générer au Récap.
   Le pied de chaque étape (mêmes boutons) s'efface : un seul endroit pour avancer. */
.ia-7 .ia-e-nav { display: none; }
.ia-eqp .ai-gen-collant.ia-gen-etapes { display: flex; flex-direction: column; gap: 6px; }
.ia-eqp .ia-gen-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ia-eqp .ia-gen-nav .ia-e-nav-d { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ia-eqp .ia-gen-nav .ia-prec, .ia-eqp .ia-gen-nav .ia-passer { height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); color: var(--text); font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; }
.ia-eqp .ia-gen-nav .ia-suiv-gros { width: auto; min-width: 120px; padding: 0 18px; margin: 0; }
.ia-eqp .ia-gen-direct { align-self: center; border: 0; background: none; color: var(--text-dim); font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.ia-eqp .ia-gen-direct:disabled { opacity: .5; cursor: default; }

/* « Sélectionnez votre couleur » au-dessus du bouton Pantone (sans grille de pastilles). */
.choix-couleur .cc-selection { margin: 0 0 6px; }

/* ── BANDE, FORME, LISERÉ : DES ONGLETS COMPACTS ──
   « Tu prends des énormes réglages. Garde tous les réglages, mais ça doit
   être plus compact. » Dans ces boîtes (.br-explique : l'onglet ouvert a
   sa phrase), les outils et leurs sections s'effacent (display: contents) :
   le corps de l'onglet est UNE grille souple. Les champs chiffrés s'y
   rangent par trois, côte à côte ; le reste (couleur, listes, segments)
   prend la ligne. En haut, une seule phrase ; en bas, « Ensuite → » en une
   ligne discrète. */
.pwai-boite-reglages .br-explique > .br-corps { flex-direction: row; flex-wrap: wrap; align-content: flex-start; align-items: flex-end; gap: 8px; padding-top: 8px; }
.pwai-boite-reglages .br-explique .br-outil, .pwai-boite-reglages .br-explique .br-outil-corps, .pwai-boite-reglages .br-explique .br-outil .br-sec,
.pwai-boite-reglages .br-explique .bande-espace, .pwai-boite-reglages .br-explique .forme-contour { display: contents !important; }   /* plus fort que les règles « un seul champ » (:has) */
.pwai-boite-reglages .br-explique > .br-corps :is(.br-sec, .br-outil-corps, .bande-espace, .forme-contour) > * { flex: 1 1 100%; min-width: 0; margin: 0; }
/* Chaque champ « − chiffre + » : l'intitulé en petit au-dessus, trois par
   rangée (deux au téléphone, où les ± font 44 px). */
.pwai-boite-reglages .br-explique > .br-corps .bande-champ { flex: 0 0 calc((100% - 16px) / 3) !important; width: auto; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 3px; min-height: 0; margin: 0; }
.pwai-boite-reglages .br-explique > .br-corps .bande-champ .bc-label { flex: none; font-size: 10.5px; font-weight: 600; color: var(--text-mute); white-space: normal; overflow: visible; line-height: 1.25; }
.pwai-boite-reglages .br-explique > .br-corps .bande-champ .bc-ctrl { width: 100%; height: 32px; }
.pwai-boite-reglages .br-explique > .br-corps .bande-champ .bc-ctrl input { flex: 1; width: auto; min-width: 0; height: 30px; padding: 0 2px; font-size: 13px; }
.pwai-boite-reglages .br-explique > .br-corps .bande-champ .bc-pm { flex: none; width: 26px; height: 30px; }
body.rmob .pwai-boite-reglages .br-explique > .br-corps .bande-champ { flex-basis: calc((100% - 8px) / 2) !important; }
/* Champs en colonne (libellé dessus) : la réglette reste une ligne fine sous le champ. */
.pwai-boite-reglages .br-outil .br-sec > .bande-champ,
.pwai-boite-reglages .br-explique > .br-corps .bande-champ { flex-wrap: nowrap; }
.pwai-boite-reglages .br-outil .br-sec > .bande-champ .bc-reglette,
.pwai-boite-reglages .br-explique > .br-corps .bande-champ .bc-reglette { flex: none; height: 24px; }
body.rmob .pwai-boite-reglages .br-explique > .br-corps .bande-champ .bc-ctrl { height: 44px; }
body.rmob .pwai-boite-reglages .br-explique > .br-corps .bande-champ .bc-ctrl input { height: 42px; font-size: 15px; }
.pwai-boite-reglages .br-explique > .br-corps :is(.br-sec, .forme-contour) > .br-court { flex: 0 0 auto; width: auto; height: 32px; padding: 0 12px; }
.pwai-boite-reglages .br-explique > .br-corps .forme-contour > .choix-couleur { flex: 1 1 160px; }
.pwai-boite-reglages .br-explique > .br-corps .br-sec > .rg-seg[data-rg-seg="sens"] { flex: 0 0 auto; width: auto; }
.pwai-boite-reglages .br-explique > .br-corps .br-sous-grille { order: 5; }
.pwai-boite-reglages .br-onglet-tete { order: 0; flex: 1 1 100%; margin: 0; overflow-wrap: anywhere; }
.pwai-boite-reglages .br-onglet-titre { color: var(--text); font-weight: 700; }
.pwai-boite-reglages .br-ensuite { order: 9; flex: 1 1 100%; display: flex; justify-content: flex-end; align-items: baseline; gap: 5px; margin-top: 2px; padding: 4px 0;
  border: 0; background: none; font: inherit; font-size: 12px; color: var(--text-mute); cursor: pointer; }
.pwai-boite-reglages .br-ensuite:hover { color: var(--text); }
.pwai-boite-reglages .br-ensuite-txt { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
/* Couleur : le nombre de rayures et Uni / Dégradé sur une ligne. */
.pwai-boite-reglages .br-segs { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.pwai-boite-reglages .br-seg-mini { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pwai-boite-reglages .br-mini-label { font-size: 10.5px; font-weight: 600; color: var(--text-mute); line-height: 1.25; }
/* La ligne « Où » : la pièce en petit, le lieu, « Changer de place ». */
.pwai-boite-reglages .br-ou { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 9px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); }
.pwai-boite-reglages .br-ou-pic { flex: none; display: block; width: 24px; height: 28px; }
.pwai-boite-reglages .br-ou-lieu { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--text); line-height: 1.25; overflow-wrap: anywhere; }
.pwai-boite-reglages .br-ou-changer { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
/* Le sens : un petit segment, le dessin à côté du mot. */
.pwai-boite-reglages .rg-seg[data-rg-seg="sens"] .seg-btn { flex: 0 0 auto; height: 28px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.pwai-boite-reglages .br-sens-pic { flex: none; width: 16px; height: 16px; }
.pwai-boite-reglages .rg-seg[data-rg-seg="sens"] .seg-btn.on svg.br-sens-pic { color: var(--accent); }
/* Liseré : les places en deux colonnes. */
.pwai-boite-reglages .br-explique .bordure-places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; }
/* Le rail : « Taille et position » sur deux lignes plutôt que coupé. */
.pwai-boite-reglages .br-explique .br-rail-nom { white-space: normal; text-align: center; line-height: 1.15; overflow: visible; }
body.rmob .pwai-boite-reglages .br-ou-changer { height: 36px; }
body.rmob .pwai-boite-reglages .br-seg-mini { flex-basis: 100%; }
body.rmob .pwai-boite-reglages .br-explique > .br-corps .br-sec > .rg-seg[data-rg-seg="sens"] .seg-btn { height: 36px; }

/* ═══ r1727 : « TA COMMANDE » EN ÉTAPES (AvantCommande, .ac-*) ═══════════
   Tissu → Tailles (si l'équipe est vide) → Finaliser. Une question par
   écran, le bouton principal toujours au même endroit en bas à droite. */
.ac-modal { width: 100%; max-width: min(960px, calc(100vw - 32px)); min-height: min(620px, 88vh); box-sizing: border-box; display: flex; flex-direction: column; max-height: 92vh; }
.ac-head h2 { font-size: 17px; }
.ac-etapes { display: flex; gap: 6px; list-style: none; margin: 0; padding: 10px 18px 0; flex-wrap: wrap; }
.ac-etape button { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line, #e5e7eb); background: var(--bg, #fff);
  color: var(--text-dim, #5b616b); border-radius: 999px; padding: 5px 12px 5px 5px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ac-etape button:disabled { cursor: not-allowed; opacity: .55; }
.ac-num { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--line, #e5e7eb); color: var(--text, #111); font-size: 11px; font-weight: 800; }
.ac-etape.on button { border-color: var(--accent, #16a34a); color: var(--text, #111); }
.ac-etape.on .ac-num { background: var(--accent, #16a34a); color: #fff; }
.ac-etape.fait .ac-num { background: var(--accent-soft, #e8f7ee); color: var(--accent, #16a34a); }
.ac-corps { display: block !important; padding: 14px 18px 16px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.ac-titre { margin: 2px 0 4px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.ac-aide { margin: 0 0 12px; font-size: 12.5px; color: var(--text-dim, #5b616b); }
.ac-sous { margin: 16px 0 7px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim, #5b616b); }

.ac-tissus { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px 14px; }
/* Version 4 : le coupon de tissu à bords crantés, posé comme un échantillon ; le choix en noir. */
.ac-tissu { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 6px 4px 10px; border: 0; background: none;
  color: var(--text, #111); cursor: pointer; font: inherit; border-radius: 14px; }
.ac-coupon { position: relative; display: block; width: 170px; height: 170px; max-width: 100%; background: #eef0f3;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.18));
  clip-path: polygon(0% 4%,4% 0%,8% 4%,12% 0%,16% 4%,20% 0%,24% 4%,28% 0%,32% 4%,36% 0%,40% 4%,44% 0%,48% 4%,52% 0%,56% 4%,60% 0%,64% 4%,68% 0%,72% 4%,76% 0%,80% 4%,84% 0%,88% 4%,92% 0%,96% 4%,100% 0%,100% 100%,0% 100%);
  transition: transform .15s; }
.ac-tissu:hover .ac-coupon { transform: translateY(-2px); }
.ac-coupon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.ac-tissu-vide { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 22px; color: #9aa1ab; }
.ac-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #c9cdd3; margin-top: 4px; }
.ac-tissu.on .ac-radio { background: var(--text, #111); border-color: var(--text, #111); box-shadow: inset 0 0 0 4px var(--bg, #fff); }
.ac-tissu-nom { font-weight: 800; font-size: 17px; }
.ac-tissu.on .ac-tissu-nom { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.ac-tissu-accroche { font-size: 12.5px; color: var(--text-dim, #5b616b); }
.ac-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.ac-tags span { font-size: 11px; font-weight: 600; border: 1px solid var(--line, #e5e7eb); border-radius: 999px; padding: 2px 8px; color: var(--text-dim, #5b616b); }
.ac-tissu-prix { margin-top: 2px; font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; }
.ac-tissu-prix small { font-weight: 600; font-size: 12px; color: var(--text-dim, #5b616b); }
.ac-tissu:focus-visible { outline: 2px solid var(--text, #111); outline-offset: 2px; }
.ac-tailles-recap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 10px; }
.ac-tailles-total { font-weight: 800; font-size: 14px; margin-right: 4px; }
.ac-puce-taille { border: 1px solid var(--line, #e5e7eb); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; color: var(--text-dim, #5b616b); font-variant-numeric: tabular-nums; }
.ac-puce-taille b { color: var(--text, #111); }
.ac-joueurs { border: 1px solid var(--line, #e5e7eb); border-radius: 12px; max-height: 42vh; overflow-y: auto; }
.ac-joueur { display: grid; grid-template-columns: 54px minmax(0, 1fr) 78px 104px 58px 28px; gap: 6px; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--line, #e5e7eb); font-size: 13px; }
.ac-joueur:last-child { border-bottom: 0; }
.ac-joueur-tete { position: sticky; top: 0; z-index: 1; background: var(--bg, #fff); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-mute, #8a9099); padding-top: 8px; padding-bottom: 6px; }
.ac-champ { width: 100%; min-width: 0; box-sizing: border-box; height: 34px; border: 1px solid var(--line, #e5e7eb); border-radius: 8px; padding: 0 8px; font: inherit; color: var(--text, #111); background: var(--bg, #fff); }
.ac-champ:focus { outline: 2px solid var(--text, #111); outline-offset: -1px; }
.ac-joueur-num { font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.ac-joueur-nom { font-weight: 600; }
.ac-joueur-qte { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; padding: 0 4px; }
.ac-joueur-x { width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--text-mute, #8a9099); cursor: pointer; font-size: 13px; }
.ac-joueur-x:hover:not(:disabled) { background: var(--line, #e5e7eb); color: var(--text, #111); }
.ac-joueur-x:disabled { opacity: .3; cursor: default; }
.ac-joueurs-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ac-comp-boite { overflow-x: auto; border: 1px solid var(--line, #e5e7eb); border-radius: 12px; }
.ac-comp { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 420px; }
.ac-comp th, .ac-comp td { padding: 7px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line, #e5e7eb); }
.ac-comp tr:last-child th, .ac-comp tr:last-child td { border-bottom: 0; }
.ac-comp thead th { font-size: 13px; font-weight: 800; }
.ac-comp tbody th { width: 110px; font-weight: 600; color: var(--text-dim, #5b616b); white-space: nowrap; }
.ac-comp .on { background: var(--accent-soft, #e8f7ee); }
.ac-comp-prix { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

.ac-tailles { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.ac-taille { border: 1px solid var(--line, #e5e7eb); border-radius: 12px; padding: 8px 6px; text-align: center; background: var(--bg, #fff); }
.ac-taille.on { border: 1.5px solid var(--accent, #16a34a); background: var(--accent-soft, #e8f7ee); }
.ac-taille-nom { font-weight: 800; font-size: 13.5px; margin-bottom: 6px; }
.ac-taille-pm { display: flex; align-items: center; justify-content: center; gap: 4px; }
.ac-taille-pm button { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line, #e5e7eb); background: var(--bg, #fff); color: var(--text, #111); cursor: pointer; font-size: 15px; line-height: 1; }
.ac-taille-pm input { width: 32px; text-align: center; border: 1px solid var(--line, #e5e7eb); border-radius: 8px; background: var(--bg, #fff); color: var(--text, #111); font-size: 13px; padding: 3px 0; }
.ac-total { margin-top: 10px; font-size: 12.5px; color: var(--text, #111); font-weight: 600; }
.ac-total span { font-weight: 400; color: var(--text-dim, #5b616b); }
.ac-total.ko { color: #c0392b; }

.ac-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ac-pack { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 14px 14px 12px; border: 1.5px solid var(--line, #e5e7eb); border-radius: 14px;
  background: var(--bg, #fff); color: var(--text, #111); cursor: pointer; font: inherit; transition: border-color .15s, box-shadow .15s; }
.ac-pack:hover { border-color: #c9cdd3; }
.ac-pack.on { border-color: var(--text, #111); box-shadow: 0 0 0 1px var(--text, #111); }
.ac-pack-haut { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.ac-pack-nom { font-weight: 800; font-size: 14px; }
.ac-pack-radio { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #c9cdd3; box-sizing: border-box; }
.ac-pack.on .ac-pack-radio, .ac-pack-non.on .ac-pack-radio { background: var(--text, #111); border-color: var(--text, #111); box-shadow: inset 0 0 0 4px var(--bg, #fff); }
.ac-pack-prix { font-weight: 800; font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ac-pack-prix small { font-size: 12px; font-weight: 600; color: var(--text-dim, #5b616b); }
.ac-pack-desc { font-size: 12.5px; color: var(--text-dim, #5b616b); line-height: 1.4; padding-bottom: 6px; border-bottom: 1px solid var(--line, #e5e7eb); }
.ac-pack-inclus { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; line-height: 1.35; }
.ac-pack-li { position: relative; padding-left: 20px; }
.ac-pack-li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 800; }
.ac-pack-non { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px; padding: 11px 14px; border: 1.5px solid var(--line, #e5e7eb); border-radius: 12px;
  background: var(--bg, #fff); color: var(--text, #111); cursor: pointer; font: inherit; font-weight: 700; font-size: 13.5px; text-align: left; }
.ac-pack-non.on { border-color: var(--text, #111); }
.ac-consignes { width: 100%; box-sizing: border-box; margin-top: 8px; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line, #e5e7eb);
  background: var(--bg, #fff); color: var(--text, #111); font: inherit; font-size: 12.5px; resize: vertical; }

.ac-recap { margin-top: 6px; }
.ac-recap-l { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 7px 0; border-bottom: 1px solid var(--line, #e5e7eb); font-size: 13px; }
.ac-recap-l > span { width: 90px; color: var(--text-dim, #5b616b); }
.ac-recap-l b { flex: 1 1 200px; min-width: 0; }
.ac-recap-l small { color: var(--text-mute, #8a9099); }
.ac-lien { border: 0; background: none; padding: 0; color: var(--accent, #16a34a); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: underline; }
.ac-bat { margin: 10px 0 0; font-size: 12px; color: var(--text-mute, #8a9099); line-height: 1.5; }
.ac-pied { justify-content: space-between; }
body.rmob .ac-modal { max-height: 94vh; min-height: 0; border-radius: 14px 14px 0 0; }
@media (max-width: 560px) {
  .ac-tissus { grid-template-columns: 1fr 1fr; gap: 12px 8px; }
  .ac-coupon { width: 130px; height: 130px; }
  .ac-tissu-accroche, .ac-tags { display: none; }
  .ac-joueur { grid-template-columns: 46px minmax(0, 1fr) minmax(0, 1fr) 50px 26px; grid-template-areas: "num nom nom qte x" "taille taille coupe coupe coupe"; }
  .ac-joueur > :nth-child(1) { grid-area: num; } .ac-joueur > :nth-child(2) { grid-area: nom; } .ac-joueur > :nth-child(3) { grid-area: taille; }
  .ac-joueur > :nth-child(4) { grid-area: coupe; } .ac-joueur > :nth-child(5) { grid-area: qte; } .ac-joueur > :nth-child(6) { grid-area: x; }
  .ac-joueur-tete { display: none; }
  .ac-recap-l > span { width: 100%; }
}


/* ══ LA CROIX DU STUDIO (#pwaiCroix) ═══════════════════════════════
   Dans la barre, tout à droite (après « Exporter »), même hauteur et même
   bordure que les boutons de .tb-droite. Cachée par défaut : elle n'existe
   que dans une iframe ou un onglet ouvert par un site revendeur
   (html.pwai-croix, posé par configurateur.html). Sur téléphone la barre
   défile quand elle déborde : la croix reste collée au bord droit. */
.tb-croix { display: none; }
html.pwai-croix .topbar .tb-croix {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; margin-left: 10px; padding: 0;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text);
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
html.pwai-croix .topbar .tb-croix:hover { background: var(--bg-elev); border-color: var(--line-strong); }
html.pwai-croix .topbar .tb-croix:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  html.pwai-croix body.rmob .app .topbar .tb-croix {
    order: 99; width: 44px; height: 44px; min-width: 44px; margin-left: 4px;
    position: sticky; right: 0; z-index: 2; border-radius: 10px;
  }
}

/* La confirmation de sortie : la fenêtre du studio, au-dessus de tout. */
#pwaiSortie {
  position: fixed; inset: 0; z-index: 100050; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(15,15,20,.45);
}
#pwaiSortie .ps-boite {
  width: 100%; max-width: 380px; padding: 22px 20px 18px; border-radius: 14px;
  background: var(--bg, #fff); color: var(--text, #111); box-shadow: 0 18px 50px rgba(0,0,0,.25);
  font-family: inherit;
}
#pwaiSortie p { margin: 0 0 18px; font-size: 16px; font-weight: 600; line-height: 1.35; }
#pwaiSortie .ps-actions { display: flex; gap: 10px; justify-content: flex-end; }
#pwaiSortie button {
  min-width: 96px; min-height: 40px; padding: 0 16px; border-radius: 9px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line-strong, #d4d4d4); background: var(--bg, #fff); color: var(--text, #111);
}
#pwaiSortie button[data-r="oui"] { border-color: var(--text, #111); background: var(--text, #111); color: var(--bg, #fff); }

/* ══ COLORIER : LA BOÎTE DE LA PIÈCE (maquette « Main », oct. 2026) ══════
   Le nuancier Pantone complet DANS la boîte (plus de pop-up), petites cases
   sur 7 colonnes avec leur référence, dans une zone qui défile ; l'éditeur
   de dégradé compact (➕ / 🗑, roue de 32 px, degré tapé) ; « Réglages »
   toujours en vue. */
.colorier-br .clr-val { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; }
.colorier-br .clr-val-teinte { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px oklch(0 0 0 / .2); }
.colorier-br .couleurs-maillot.cm-ligne { margin: 4px 0 8px; }
.dg-compact { gap: 6px; margin: 0; }
.dg-compact .dg-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dg-compact .dg-titre { font-size: 12.5px; font-weight: 650; color: var(--text); }
.dg-compact .dg-compte { margin: 0; }
.dg-compact .dg-aide { font-size: 11.5px; color: var(--text-mute); }
.dg-compact .dg-barre { height: 24px; }
.dg-compact .dg-piste { height: 22px; }
.dg-choisi-ligne, .dg-sens { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dg-choisi-lib { flex: none; font-size: 11.5px; color: var(--text-mute); }
.dg-choisi-ligne .dg-choisi-teinte { width: 16px; height: 16px; border-radius: 4px; }
.dg-choisi-ref { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--text); }
.dg-ico { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0; border-radius: 7px; border: 1px solid var(--line); background: var(--bg, #fff); color: var(--text); cursor: pointer; }
.dg-ico:hover:not(:disabled) { border-color: var(--line-strong, #9aa0a8); }
.dg-ico:disabled { opacity: .4; cursor: default; }
.dg-ico.dg-retirer:hover:not(:disabled) { color: #c0262d; }
.dg-roue { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; touch-action: none; box-shadow: inset 0 0 0 1px oklch(0 0 0 / .2), 0 0 0 1px var(--line); }
.dg-roue:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dg-roue::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px #1b1d29; }
.dg-roue-aiguille { position: absolute; left: 50%; top: 2px; width: 2px; height: 14px; margin-left: -1px; border-radius: 1px; background: #fff; box-shadow: 0 0 0 1px #1b1d29; transform-origin: 50% 14px; }
.dg-degres { display: inline-flex; align-items: center; gap: 2px; flex: none; height: 28px; padding: 0 6px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg, #fff); font-size: 12px; color: var(--text-mute); }
.dg-degres input { width: 38px; border: 0; outline: 0; background: transparent; font: inherit; font-weight: 600; color: var(--text); text-align: right; -moz-appearance: textfield; }
.dg-degres input::-webkit-outer-spin-button, .dg-degres input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dg-sens .dg-choisi-lib { margin-right: auto; }
.clr-onglets { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; margin: 0 0 6px; border-radius: 8px; background: var(--bg-soft, #f2f3f6); }
.clr-onglets button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 28px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-mute); cursor: pointer; }
.clr-onglets button.on { background: var(--bg, #fff); color: var(--text); box-shadow: 0 1px 2px oklch(0 0 0 / .12); }
.clr-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: max-content; gap: 8px; align-content: start; height: 250px; overflow-y: auto; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg, #fff); }
.clr-preset { display: block; min-width: 0; padding: 0; border: 1.5px solid var(--line); border-radius: 9px; background: var(--bg, #fff); overflow: hidden; text-align: left; font: inherit; cursor: pointer; }
.clr-preset:hover { border-color: var(--line-strong, #9aa0a8); }
.clr-preset.selected { border-color: var(--accent); }
.clr-preset-bande { display: block; height: 30px; }
.clr-preset-nom { display: block; padding: 5px 8px; font-size: 11px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nua-boite { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg, #fff); }
.nua-cherche { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; border-bottom: 1px solid var(--line); color: var(--text-mute); }
.nua-cherche input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 12.5px; color: var(--text); }
.nua-compte { flex: none; font-size: 10.5px; color: var(--text-mute); white-space: nowrap; }
.nua-defile { height: 250px; overflow-y: auto; padding: 4px 8px 8px; overscroll-behavior: contain; }
.nua-gnom { position: sticky; top: -4px; z-index: 1; padding: 6px 0 4px; background: var(--bg, #fff); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-mute); }
.nua-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px 4px; }
.nua-case { min-width: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.nua-teinte { display: block; height: 26px; border-radius: 5px; box-shadow: inset 0 0 0 1px oklch(0 0 0 / .14); }
.nua-case:hover .nua-teinte { box-shadow: inset 0 0 0 1px oklch(0 0 0 / .14), 0 0 0 2px var(--line-strong, #9aa0a8); }
.nua-case.on .nua-teinte { box-shadow: 0 0 0 2px var(--bg, #fff), 0 0 0 3.5px var(--accent); }
.nua-ref { display: block; margin-top: 2px; font-size: 8.5px; line-height: 1.1; color: var(--text-dim, #3f4352); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nua-vide { padding: 30px 8px; text-align: center; font-size: 12px; color: var(--text-mute); }
.clr-reglages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.clr-reglage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; height: 50px; padding: 4px 0; border: 1px solid var(--line); border-radius: 9px; background: var(--bg, #fff); font: inherit; font-size: 9.5px; letter-spacing: -.02em; font-weight: 600; color: var(--text); cursor: pointer; }
.clr-reglage span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clr-reglage:hover:not(:disabled) { border-color: var(--line-strong, #9aa0a8); }
.clr-reglage:disabled { opacity: .4; cursor: default; }
.clr-reglage.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.clr-damier { display: block; width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px oklch(0 0 0 / .2); }
.clr-diese { font-size: 15px; font-weight: 700; line-height: 16px; }
.clr-outil { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft, #f7f7f9); }
.clr-outil .hex-row { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg, #fff); }
.clr-pipette-toile { width: 100%; border: 1px solid var(--line); border-radius: 6px; cursor: crosshair; display: block; }
.clr-aide { font-size: 11.5px; color: var(--text-mute); }
.clr-sorties { margin: 0; }
body.rmob .nua-teinte { height: 32px; }
body.rmob .nua-ref { font-size: 9px; }
body.rmob .dg-ico, body.rmob .dg-degres { height: 36px; }
body.rmob .dg-ico { width: 36px; }
body.rmob .dg-roue { width: 36px; height: 36px; }
body.rmob .dg-roue-aiguille { height: 16px; transform-origin: 50% 16px; }
body.rmob .clr-reglage { height: 56px; }

/* ═══ TROIS ONGLETS : CONTENU · STYLE · PLACE (24/10, maquette 1 + 5) ═══
   La barre des trois onglets sous l'en-tête ; dessous, sur une colonne, les
   outils de l'onglet, chacun sous son petit titre (les rares repliés). */
.pwai-boite-reglages { width: 380px; }
.pwai-boite-reglages .br-cadre.br-cadre3 { flex-direction: column; }
.pwai-boite-reglages .br-onglets3 {
  flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px;
  margin: 0 10px 2px; padding: 3px; border-radius: 11px; background: var(--bg-soft); border: 1px solid var(--line-soft);
}
.pwai-boite-reglages .br-onglet3 {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 6px;
  border: 0; border-radius: 8px; background: transparent; color: var(--text-dim); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  transition: background .12s, color .12s;
}
.pwai-boite-reglages .br-onglet3:hover { color: var(--text); background: var(--bg-hover); }
.pwai-boite-reglages .br-onglet3.on { background: var(--bg); color: var(--accent); box-shadow: 0 1px 3px oklch(0 0 0 / .12), inset 0 0 0 1px var(--pl-anneau); }
.pwai-boite-reglages .br-onglet3-val { width: 10px; height: 10px; border-radius: 3px; box-shadow: 0 0 0 1.5px var(--bg), inset 0 0 0 1px oklch(0 0 0 / .18); flex: none; }
.pwai-boite-reglages .br-cadre3 > .br-corps { padding: 0 12px 12px; }
.pwai-boite-reglages .br-outil3 { gap: 6px; padding: 10px 0 2px; }
.pwai-boite-reglages .br-outil3 + .br-outil3:not(.br-outil-suite) { border-top: 1px solid var(--line-soft); }
.pwai-boite-reglages .br-outil3-tete {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 0; border: 0; background: none; text-align: left;
  font: inherit; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-mute);
}
.pwai-boite-reglages .br-outil3-tete svg { color: var(--accent); flex: none; }
.pwai-boite-reglages button.br-outil3-tete { cursor: pointer; min-height: 26px; }
.pwai-boite-reglages button.br-outil3-tete:hover { color: var(--text); }
.pwai-boite-reglages .br-outil3.br-plie { padding-bottom: 4px; }
.pwai-boite-reglages.br-feuille .br-onglets3 { margin: 0 12px 4px; }
.pwai-boite-reglages.br-feuille.br-replie .br-onglet3.on { background: transparent; box-shadow: none; color: var(--text-dim); }
.pwai-boite-reglages .br-liste.br-paliers { gap: 4px; }
.pwai-boite-reglages .br-liste .br-tuile.br-palier { min-height: 48px; font-size: 10.5px; gap: 1px; }
.pwai-boite-reglages .br-liste .br-tuile.br-palier svg { color: var(--text-dim); }
.pwai-boite-reglages .br-liste .br-tuile.br-palier.on svg { color: var(--accent); }


/* Maquette 1 + 5, au plus près : le champ du texte au-dessus des onglets, des onglets soulignés, des
   titres de section en clair, un pied « Ensuite → » + Terminé, des vignettes en grille. */
.pwai-boite-reglages { width: 356px; }
.pwai-boite-reglages .br-haut3:empty { display: none; }
.pwai-boite-reglages .br-haut3 { flex: none; padding: 8px 12px 0; }
.pwai-boite-reglages .br-haut3 .br-texte-haut { padding: 0 !important; }
.pwai-boite-reglages .br-haut3 .br-texte-haut > label > span { display: none !important; }
.pwai-boite-reglages .br-haut3 .br-texte-haut > div { margin-top: 3px !important; font-size: 11px !important; }
.pwai-boite-reglages .br-haut3 .br-texte-haut-aide:not([data-lie]) { display: none; }
.pwai-boite-reglages .br-haut3 .br-champ-texte { font-size: 17px !important; font-weight: 700; min-height: 44px; }
.pwai-boite-reglages .br-onglets3 {
  margin: 8px 0 0; padding: 0; border: 0; border-radius: 0; background: none; gap: 0;
  border-bottom: 1px solid var(--line);
}
.pwai-boite-reglages .br-onglet3 {
  min-height: 38px; border-radius: 0; background: none !important; box-shadow: none !important; font-size: 13.5px; color: var(--text-mute);
  border-bottom: 2.5px solid transparent; margin-bottom: -1px;
}
.pwai-boite-reglages .br-onglet3 svg { display: none; }
.pwai-boite-reglages .br-onglet3:hover { color: var(--text); }
.pwai-boite-reglages .br-onglet3.on { color: var(--text); border-bottom-color: var(--accent); }
.pwai-boite-reglages .br-outil3 { padding: 12px 0 4px; gap: 8px; }
.pwai-boite-reglages .br-outil3-tete { font-size: 13.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text); }
.pwai-boite-reglages .br-outil3 > .br-outil-aide { margin-top: -4px; font-size: 11.5px; color: var(--text-mute); }
.pwai-boite-reglages .br-outil3 .rg-sous { font-size: 12px; font-weight: 600; color: var(--text-dim); text-transform: none; letter-spacing: 0; }
.pwai-boite-reglages .br-pied3 {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px;
  border-top: 1px solid var(--line); background: var(--bg-soft);
}
.pwai-boite-reglages .br-pied3-suite { border: 0; background: none; padding: 4px 0; font: inherit; font-size: 12.5px; color: var(--text-mute); cursor: pointer; }
.pwai-boite-reglages .br-pied3-suite b { color: var(--text-dim); }
.pwai-boite-reglages .br-pied3-suite:hover, .pwai-boite-reglages .br-pied3-suite:hover b { color: var(--text); text-decoration: underline; }
.pwai-boite-reglages .br-pied3-fini {
  border: 0; border-radius: 9px; padding: 8px 16px; background: var(--accent); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.pwai-boite-reglages .br-pied3-fini:hover { filter: brightness(1.08); }
/* les places : quatre par rangée, comme la maquette */
.pwai-boite-reglages .br-place .br-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pwai-boite-reglages .br-place .br-liste .br-tuile { min-height: 60px; font-size: 10.5px; }
/* « Ce texte vient de » en vignettes */
.pwai-boite-reglages .br-source .br-source-tuile { min-height: 62px; gap: 3px; }
.pwai-boite-reglages .br-source-ex { font-size: 14px; font-weight: 800; letter-spacing: .02em; font-stretch: condensed; color: var(--text); }
.pwai-boite-reglages .br-source-tuile.on .br-source-ex { color: var(--text); }
/* l'épaisseur des lettres : des tuiles « A » */
.pwai-boite-reglages .br-graisses { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; flex: 1; background: none; padding: 0; }
.pwai-boite-reglages .br-graisses .br-graisse { min-height: 40px; font-size: 18px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); }
.pwai-boite-reglages .br-graisses .br-graisse.on { border-color: var(--accent); background: var(--pl-doux); color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* Casse, Épaisseur, Courbe, Aligner… : le nom au-dessus, les choix en tuiles sur toute la largeur. */
.pwai-boite-reglages .br-outil3 .br-ligne:has(> .rg-seg) { flex-direction: column; align-items: stretch; gap: 6px; }
.pwai-boite-reglages .br-outil3 .br-ligne > .br-ligne-nom { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.pwai-boite-reglages .br-outil3 .rg-seg { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; width: 100%; padding: 0; background: none; border: 0; box-shadow: none; }
.pwai-boite-reglages .br-outil3 .rg-seg .rg-seg-btn {
  width: auto; min-width: 0; min-height: 38px; padding: 4px 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg);
  font-size: 11.5px; line-height: 1.2; white-space: normal; text-align: center; justify-content: center;
}
.pwai-boite-reglages .br-outil3 .rg-seg .rg-seg-btn.on { border-color: var(--accent); background: var(--pl-doux); box-shadow: 0 0 0 1px var(--accent); }
.pwai-boite-reglages .br-outil3 .br-graisses .br-graisse { font-size: 18px; min-height: 40px; }
.pwai-boite-reglages .pol-puces3 { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 6px; }
.pwai-boite-reglages .pol-puce3 { border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; background: var(--bg); font: inherit; font-size: 12px; font-weight: 600; color: var(--text-dim); cursor: pointer; }
.pwai-boite-reglages .pol-puce3.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Maquette 1 + 5 : le titre de section et son indication, les vignettes (dessin, nom, valeur). */
.pwai-boite-reglages .br-outil3-nu { padding-top: 4px; border-top: 0 !important; }
.pwai-boite-reglages .br-outil3-nu .br-outil-corps { gap: 8px; }
.pwai-boite-reglages .br-outil3-nu .br-sec { gap: 7px !important; }
.pwai-boite-reglages .br-st { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 8px 0 0; }
.pwai-boite-reglages .br-st > b { font-size: 13.5px; font-weight: 700; color: var(--text); }
.pwai-boite-reglages .br-st-i { font-size: 11.5px; font-weight: 500; color: var(--text-mute); text-align: right; text-transform: none; letter-spacing: 0; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pwai-boite-reglages .br-outil3 + .br-outil3-nu { border-top: 0; }
.pwai-boite-reglages .br-outil3-nu + .br-outil3-nu .br-st:first-child { border-top: 1px solid var(--line-soft); padding-top: 12px; }
.pwai-boite-reglages .br-liste.br-vg { gap: 5px; }
.pwai-boite-reglages .br-liste .br-tuile.br-vgb { min-height: 58px; gap: 2px; padding: 6px 3px; border-radius: 10px; }
.pwai-boite-reglages .br-vgb-pic { display: grid; place-items: center; min-height: 24px; color: var(--text); line-height: 1; }
.pwai-boite-reglages .br-vgb-nom { font-size: 11px; font-weight: 600; line-height: 1.2; }
.pwai-boite-reglages .br-vgb-sous { font-size: 10px; font-weight: 500; color: var(--text-mute); line-height: 1.2; }
.pwai-boite-reglages .br-liste .br-tuile.br-vgb.on .br-vgb-pic { color: var(--text); }
.pwai-boite-reglages .br-liste .br-tuile.br-vgb.on .br-vgb-sous { color: var(--text-dim); }
.pwai-boite-reglages .br-liste .br-tuile.br-vgb:disabled { opacity: .45; }
.pwai-boite-reglages .br-lien { align-self: flex-start; border: 0; background: none; padding: 2px 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-dim); text-decoration: underline; cursor: pointer; }
.pwai-boite-reglages .br-autre-piece .br-tuile-ico { font-size: 16px; }
.pwai-boite-reglages .br-place .br-liste .br-tuile { gap: 3px; }
.pwai-boite-reglages .pwai-aligner .br-vg .br-vgb { min-height: 54px; }
.pwai-boite-reglages .br-source-ex { font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.pwai-boite-reglages .br-qualite { cursor: default !important; }
.pwai-boite-reglages .br-qualite:not(.on) { opacity: .55; }
.pwai-boite-reglages .br-qualite-point { width: 10px; height: 10px; border-radius: 50%; background: #9aa0aa; }
.pwai-boite-reglages .br-qualite-point.q0, .pwai-boite-reglages .br-qualite-point.q1 { background: #16a34a; }
.pwai-boite-reglages .br-qualite-point.q2 { background: #d97706; }
.pwai-boite-reglages .br-qualite-point.q3 { background: #dc2626; }
.pwai-boite-reglages .br-vgb-carre { display: block; border-radius: 3px; background: currentColor; opacity: .75; }
.pwai-boite-reglages .br-miroir-pic { font-size: 15px; font-weight: 800; }

.pwai-boite-reglages .br-logo-var { display: flex; align-items: center; justify-content: center; width: 46px; height: 30px; padding: 3px; border-radius: 6px; }
.pwai-boite-reglages .logo-marque-boite { display: contents; }

/* ⑤ ⑥ ⑨ outils de couleur, nuancier du club (25/10) */
.club-nuancier { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.club-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; }
.club-ajout { border: 1px dashed var(--line-strong); background: none; border-radius: 7px; padding: 3px 8px; font-size: 11.5px; cursor: pointer; color: var(--text); }
.club-pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.club-pastille-l { position: relative; }
.club-pastille { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-strong); cursor: pointer; padding: 0; }
.club-pastille.on { box-shadow: 0 0 0 2px var(--accent); }
.club-retirer { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%; border: 0; background: var(--text); color: var(--bg); font-size: 11px; line-height: 16px; padding: 0; cursor: pointer; display: none; }
.club-pastille-l:hover .club-retirer { display: block; }
.club-aide { font-size: 11.5px; color: var(--text-mute); margin-top: 6px; }
.outc-btns { display: grid; gap: 6px; }
.outc-btn { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); cursor: pointer; font-size: 12.5px; text-align: left; }
.outc-btn:hover { border-color: var(--accent); }
/* « trois petites boîtes l'une à côté de l'autre au lieu de trois lignes » (25/10) */
.outc-btns { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.outc-btn { flex-direction: column; justify-content: center; text-align: center; gap: 6px; padding: 10px 4px; min-height: 62px; font-size: 11.5px; line-height: 1.2; }
.outc-btn svg { flex: none; }

.outc-voile { position: fixed; inset: 0; z-index: 100010; background: rgba(0,0,0,.4); display: grid; place-items: center; }
.outc-fen { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; background: var(--bg, #fff); color: var(--text); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.outc-tete { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg, #fff); }
.outc-tete button { border: 0; background: none; font-size: 15px; cursor: pointer; color: var(--text); }
.outc-corps { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.outc-aide { font-size: 12px; color: var(--text-mute); line-height: 1.45; }
.outc-lab { font-size: 12px; font-weight: 600; }
.outc-pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.outc-pastille { display: inline-block; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-strong); cursor: pointer; padding: 0; }
.outc-pastille.on { box-shadow: 0 0 0 2px var(--accent); }
.outc-choisir { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--text); cursor: pointer; font-size: 12.5px; }
.outc-go { padding: 9px 14px; border-radius: 9px; border: 0; background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; }
.outc-go:disabled { opacity: .45; cursor: default; }
.outc-msg { font-size: 12.5px; }
.outc-rac { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.outc-rac-tete { display: flex; justify-content: space-between; font-size: 12.5px; }
.outc-score { font-size: 11.5px; padding: 1px 8px; border-radius: 99px; background: #fde8e8; color: #9b1c1c; }
.outc-score.bon { background: #def7ec; color: #03543f; }
.outc-bande { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-mute); }
.outc-bande > div { display: flex; height: 18px; border-radius: 4px; overflow: hidden; border: 1px solid var(--line); }
.outc-bande i { flex: 1; }
.outc-var { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.outc-var.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.outc-var-tete { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; }
.outc-var-go { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); padding: 4px 10px; font-size: 12px; cursor: pointer; }
.outc-var-go:disabled { border-color: var(--accent); color: var(--accent); cursor: default; }
.outc-var-bandes { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; color: var(--text-mute); }
.outc-bande-v { display: flex; height: 22px; border-radius: 5px; overflow: hidden; border: 1px solid var(--line); }
.outc-bande-v i { flex: 1; }
.eqp-apercu { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 16px; font-size: 12px; }
.eqp-apercu button { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); padding: 5px 9px; font-size: 12px; cursor: pointer; }
.eqp-apercu button.on { border-color: var(--accent); }

/* Étape 1 de l'onglet Équipe : numéro, nom, autres noms — cases côte à côte (25/10) */
.eqp-placer-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; width: 100%; }
.eqp-placer-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 62px; padding: 10px 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 500; line-height: 1.2; text-align: center; }
.eqp-placer-btn:hover { border-color: var(--line-strong, #d2d5da); background: var(--bg-soft, #f7f8f9); }
.eqp-placer-btn.primary { border-color: var(--accent, #2c4d85); box-shadow: inset 0 0 0 1px var(--accent, #2c4d85); }
.eqp-placer-btn.pose { background: var(--bg-soft, #f7f8f9); }
.eqp-placer-btn.pose span::before { content: "✓ "; color: #16a34a; font-weight: 700; }
body.rmob .eqp-placer-btn { min-height: 64px !important; }

/* Mode devis (FLARE) : le bouton Devis se cache, Commander devient Enregistrer */
.ob-btn[hidden] { display: none !important; }
/* Taille et coupe, barre du bas (26/10) : le panneau n'avait aucun style — son texte se répandait dans la barre */
.ob-taille { position: relative; }
.ob-taille-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.ob-taille-btn:hover { border-color: var(--line-strong, #d2d5da); }
.ob-taille-pop { position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 60; width: 320px; max-width: calc(100vw - 24px); box-sizing: border-box; padding: 14px; background: var(--bg, #fcfcfd); border: 1px solid var(--line, #e2e4e8); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.16); display: flex; flex-direction: column; gap: 6px; text-align: left; white-space: normal; }
.ob-taille-titre { font-size: 12.5px; font-weight: 600; color: var(--text); margin-top: 4px; }
.ob-taille-aide { font-size: 11.5px; color: var(--text-dim, #5b6068); line-height: 1.4; }
.ob-coupes, .ob-taille-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 2px 0 4px; }
.ob-taille-grille { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ob-coupe, .ob-taille-nom { height: 30px; padding: 0 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-coupe.on, .ob-taille-nom.on { border-color: var(--accent, #2c4d85); box-shadow: inset 0 0 0 1px var(--accent, #2c4d85); font-weight: 600; }
.ob-taille-plusieurs { font-size: 11.5px; color: var(--text-dim, #5b6068); line-height: 1.4; padding-top: 6px; border-top: 1px solid var(--line, #e2e4e8); }
.ob-taille-plusieurs .lien-croise { display: block; margin-top: 4px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 12px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.ob-taille-pied { display: flex; justify-content: flex-end; margin-top: 4px; }
/* ══ POP-UPS DE COULEUR ET DE PLACEMENT SUR TÉLÉPHONE ═══════════════
   « Les pop-ups de couleur et de placement doivent être vraiment bien
   faites sur mobile. » Tout est sous body.rmob : le bureau ne bouge pas.

   LA BIBLIOTHÈQUE PANTONE devient une feuille quasi plein écran :
   · l'en-tête reste en haut, croix de 44 px ;
   · la correspondance hex et la pipette, ramassées en deux cartes basses
     (elles prenaient tout l'écran, la liste commençait sous le pli) ;
   · la recherche COLLE en haut de la liste quand on défile, en 16 px
     (en dessous, iOS zoome la page au focus) ;
   · la liste est une grille de grandes pastilles, trois par rangée, le
     code dessous ;
   · clavier ouvert (body.clavier, pwaiClavierMobile écoute aussi la
     recherche Pantone) : la feuille prend la partie visible de l'écran
     (--vvh), les outils s'effacent, la recherche est en tête, juste
     sous l'en-tête, et les résultats défilent dessous. */
body.rmob .modal-close{ width:44px; height:44px; min-width:44px; border-radius:10px; flex:none; }
body.rmob .modal-overlay:has(.modal-pantone){ padding-top:env(safe-area-inset-top, 0px); }
body.rmob .modal.modal-pantone{
  height:calc(var(--pwai-vp-h, 100dvh) - 10px - env(safe-area-inset-top, 0px));
  max-height:none; display:flex; flex-direction:column;
}
body.rmob .modal-pantone .modal-head{ flex:none; padding:10px 6px 10px 16px; gap:8px; }
body.rmob .modal-pantone .modal-head h2{ font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.rmob .modal-pantone .modal-head > .mono{ display:none; } /* le compte est déjà dans la recherche */
body.rmob .modal-pantone .modal-body{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
body.rmob .modal-pantone .modal-side{ padding:10px 12px; }
body.rmob .modal-pantone .pantone-tools{ gap:8px; }
body.rmob .modal-pantone .ptool-card{ padding:8px 10px 10px; border-radius:10px; }
body.rmob .modal-pantone .ptool-title{ font-size:11px; margin-bottom:6px; }
body.rmob .modal-pantone .hex-row{ height:44px; }
body.rmob .modal-pantone .hex-row .hex-val{ font-size:16px !important; height:100%; min-width:0; }
body.rmob .modal-pantone .pipette-sources{ display:grid; grid-template-columns:repeat(auto-fit, minmax(0, 1fr)); gap:8px; }
body.rmob .modal-pantone .pipette-sources .ob-btn{ min-height:44px; height:auto; justify-content:center; font-size:13.5px; white-space:nowrap; }
body.rmob .modal-pantone .img-drop{ height:auto; min-height:48px; margin-top:8px; padding:8px 12px; border-radius:10px; font-size:13px; }
body.rmob .modal-pantone .img-drop > div{ display:flex; align-items:center; gap:10px; text-align:left; }
body.rmob .modal-pantone .img-drop > div > div:first-child{ margin:0 !important; }
body.rmob .modal-pantone .picked-pixel-info{ flex-wrap:wrap; padding:8px; }
body.rmob .modal-pantone .picked-pixel-info .ob-btn{ min-height:44px; height:44px !important; padding:0 14px !important; font-size:14px !important; }
body.rmob .modal-pantone .pipette-sorties{ display:flex; gap:6px; }
body.rmob .modal-pantone .modal-main{ padding:0 12px calc(16px + env(safe-area-inset-bottom, 0px)); }
body.rmob .modal-pantone .modal-main > .search{
  position:sticky; top:0; z-index:3; height:48px !important; margin:0 -12px 10px !important;
  padding:0 14px; border-radius:0; border-width:0 0 1px; background:var(--bg);
  box-shadow:0 6px 10px -8px oklch(0 0 0 / .18);
}
body.rmob .modal-pantone .modal-main > .search input{ font-size:16px !important; height:100%; min-width:0; }
body.rmob .modal-pantone .modal-main > .search .mono{ font-size:12px; color:var(--text-mute); }
body.rmob .modal-pantone .pantone-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
body.rmob .modal-pantone .pantone-card{ border-radius:10px; }
body.rmob .modal-pantone .pantone-card .pc-swatch{ height:auto; aspect-ratio:4 / 3; }
body.rmob .modal-pantone .pantone-card .pc-meta{ padding:5px 7px 6px; }
body.rmob .modal-pantone .pantone-card .pc-code{ font-size:11px; line-height:1.25; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; min-height:2.5em; overflow-wrap:anywhere; }
body.rmob .modal-pantone .pantone-card .pc-name{ display:none; }
body.rmob .modal-pantone .pantone-card .pc-hex{ display:none; }
body.rmob .modal-pantone .pantone-card:active{ transform:scale(.97); }
/* Clavier ouvert : la feuille = la partie visible ; les outils laissent la place. */
body.rmob.clavier .modal-overlay:has(.modal-pantone){
  top:var(--vv-top, 0px); bottom:auto; height:var(--vvh, 50vh); padding:0;
}
body.rmob.clavier .modal.modal-pantone{ height:var(--vvh, 50vh); border-radius:0; animation:none; }
body.rmob.clavier .modal-pantone .modal-side{ display:none; }
body.rmob.clavier .modal-pantone .modal-head{ padding-top:4px; padding-bottom:4px; }

/* LE SÉLECTEUR D'EMPLACEMENT (Épure) : sur un téléphone bas (667 px), la
   feuille prend presque tout l'écran plutôt que 88 % ; la légende et
   « Annuler » se partagent une rangée (deux rangées mangeaient la place
   des repères) ; les onglets de pièces sont plus hauts au doigt. */
body.rmob .modal-overlay.placement-picker{ padding-top:env(safe-area-inset-top, 0px); }
body.rmob .modal.modal-placement.pl-epure{
  max-height:calc(var(--pwai-vp-h, 100dvh) - 10px - env(safe-area-inset-top, 0px));
  --pl-h: clamp(200px, calc(100dvh - 400px), 50dvh);
}
body.rmob .modal-placement.pl-epure .pl-pied{
  flex-direction:row; align-items:center; gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--line-soft, var(--line));
}
body.rmob .modal-placement.pl-epure .pl-legende{ flex:1; text-align:left; font-size:12px; }
body.rmob .modal.modal-placement.pl-epure .pl-pied .pl-annuler{ flex:none; width:auto; min-width:120px; height:46px; }
body.rmob .modal.modal-placement.pl-epure .pl-rail > .pl-onglet{ min-height:88px; }
@media (max-height: 700px){
  body.rmob .modal-placement.pl-epure .pl-tete{ padding-top:20px; }
  body.rmob .modal-placement.pl-epure .pl-titre{ font-size:18px; margin-top:4px; }
  body.rmob .modal-placement.pl-epure .pl-sous{ font-size:12.5px; margin-top:4px; }
  body.rmob .modal-placement.pl-epure .pl-corps{ padding-top:10px; }
  body.rmob .modal-placement.pl-epure .pl-vignette{ width:46px; height:46px; }
  body.rmob .modal-placement.pl-epure .pl-piece{ margin-top:10px; }
}
/* Une pop-up rendue dans la barre du haut (sélecteur d'emplacement du
   nom & numéro, nuancier ouvert depuis la boîte de réglages) héritait de
   son étage, 66 : la feuille du panneau (.right, 70) passait PAR-DESSUS
   — « Où poser le nom ? » à moitié caché sous l'effectif. Le temps de la
   pop-up, la barre monte au-dessus de tout. */
body.rmob .app .topbar:has(.modal-overlay){ z-index:100002 !important; }
/* La poignée de la feuille flottait au-dessus de la boîte de réglages
   (elle ne la ferme pas) : boîte ouverte = pas de poignée. */
body.rmob:has(.pwai-boite-reglages) #rmobClose{ display:none !important; }
/* Dans la boîte de réglages, au doigt : chaque geste, pastille de
   couleur et bouton ± fait 44 px de côté (ils faisaient 22 à 30 px de
   large — on touchait le voisin). */
body.rmob .pwai-boite-reglages .br-geste{ width:44px !important; height:44px !important; min-width:44px !important; min-height:44px !important; padding:0 !important; border-radius:10px; }
body.rmob .pwai-boite-reglages .bande-pastille{ width:44px !important; height:44px !important; min-width:44px !important; border-radius:10px; flex:none; }
body.rmob .pwai-boite-reglages .icon-btn{ min-width:44px !important; min-height:44px !important; }
body.rmob .pwai-boite-reglages .bc-pm{ min-width:44px !important; min-height:44px !important; font-size:20px; }
body.rmob .pwai-boite-reglages input[type=text], body.rmob .pwai-boite-reglages input[type=number],
body.rmob .pwai-boite-reglages input:not([type]), body.rmob .pwai-boite-reglages textarea{ font-size:16px !important; }
body.rmob .pwai-boite-reglages input[type=range]{ height:32px; }
/* Cinq repères ou plus (bandes : Poitrine, Diagonale, Ventre, Verticale,
   Bas) : sur une rangée de 375 px, les mots étaient coupés (« iagonal »).
   Trois par rangée, le mot entier ; la scène garde sa taille, la carte
   grandit d'une rangée (le corps défile, le pied reste en place). */
body.rmob .modal-placement.pl-epure .pl-puces[style*="--pl-n: 5"],
body.rmob .modal-placement.pl-epure .pl-puces[style*="--pl-n: 6"]{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
body.rmob .modal-placement.pl-epure .pl-piece:has(.pl-puces[style*="--pl-n: 5"]),
body.rmob .modal-placement.pl-epure .pl-piece:has(.pl-puces[style*="--pl-n: 6"]){ height:auto; min-height:calc(var(--pl-h) + 24px); }
body.rmob .modal.modal-placement.pl-epure .pl-puce{ font-size:12.5px; }




body.rmob .pwai-boite-reglages .br-outil .br-sec > .bande-champ { width: 160px; }