/* Variables de marque, ossature de l'application, barre d'outils
   DevisACE — GROUP ACE */

:root{
    /* Registre comptable : papier, encre, filets. Le noir reste à la
       plaquette (document.css), qui définit ses propres couleurs. */
    --bg:#f1f2f4;           /* le sous-main */
    --panel:#ffffff;        /* le papier */
    --panel2:#f6f7f9;       /* la zone tramée */
    --line:#e0e4e9;         /* le filet */
    --line-fort:#c3cad3;    /* le filet de séparation de colonne */
    --txt:#12151a;          /* l'encre */
    --white:#fff;
    --dim:#525a64;
    --faint:#8992a0;
    --cyan:#0e6f9e;         /* le cyan du logo, assombri pour tenir sur blanc */
    --scene:#dfe3e8;        /* fond de la zone d'aperçu, plus sourd que la feuille */
    --spectrum:linear-gradient(90deg,#7b1fa2,#4527a0,#1565c0,#0288d1,#29abe2,#26a69a,#7cb342,#c0ca33,#fdd835,#fb8c00,#f4511e,#e53935);
    /* Le même spectre à la verticale : un dégradé horizontal réduit à 4 px
       de large ne montrerait qu'une seule couleur. */
    --spectrum-v:linear-gradient(180deg,#7b1fa2,#4527a0,#1565c0,#0288d1,#29abe2,#26a69a,#7cb342,#c0ca33,#fdd835,#fb8c00,#f4511e,#e53935);
    --ui:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    /* Les chiffres s'alignent en colonne, comme sur un état comptable. */
    --chiffres:Consolas,"Cascadia Mono","SF Mono",ui-monospace,monospace;
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%}
  body{background:var(--bg);color:var(--txt);font:14.5px/1.5 var(--ui);-webkit-font-smoothing:antialiased}

  /* ---------- Chrome de l'application ---------- */
  .app{display:flex;flex-direction:column;height:100%}
  /* position:relative et la reserve a droite : le logo est ancre en haut a
     droite, hors du flux, pour rester en place meme quand la barre se replie
     sur deux lignes. */
  .bar{position:relative;display:flex;align-items:center;gap:9px;
    padding:9px 16px;background:var(--panel);
    border-bottom:1px solid var(--line-fort);flex:0 0 auto;flex-wrap:wrap}
  /* Le logo porte déjà le spectre : ce filet ferait double emploi juste à
     côté de lui. La tranche spectrale du panneau de saisie suffit. */
  .bar .rule{display:none}
  /* Le nom garde sa casse : « DevisACE » se lit mal tout en capitales. */
  .bar h1{margin:0;font-size:15px;letter-spacing:.01em;color:var(--txt);font-weight:700}
  .bar h1 small{display:block;letter-spacing:.06em;text-transform:none;color:var(--dim);font-weight:400;font-size:11px;margin-top:2px}
  .bar .grow{flex:1}
  /* Logo du cabinet, à l'extrémité droite de la barre. Il ferme la ligne
     sans concurrencer les commandes : discret, mais présent. */
  /* Le logo ouvre la barre. order:-1 le place en tête sans toucher au HTML,
     et il reste à sa place même quand la barre se replie sur deux lignes. */
  .bar .marque{order:-1;height:28px;width:auto;flex:0 0 auto;
    padding-right:13px;margin-right:2px;border-right:1px solid var(--line)}
  @media(max-width:760px){
    .bar .marque{height:24px;padding-right:10px}
  }
  button{font:inherit;font-size:12.5px;color:var(--txt);background:var(--panel);
    border:1px solid var(--line-fort);border-radius:2px;padding:6px 12px;cursor:pointer}
  button:hover{border-color:var(--txt);background:var(--panel2)}
  button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
  button.primary{background:var(--txt);color:#fff;border-color:var(--txt);font-weight:600}
  button.primary:hover{background:#2b3038;border-color:#2b3038}
  button.icon{padding:3px 9px;line-height:1;font-size:15px;color:var(--faint);border-radius:2px}
  button.icon:hover{color:#c0392b;border-color:#e0a9a2;background:#fdf2f0}

  .work{display:flex;flex:1;min-height:0}
  /* Panneau de saisie : plus large par défaut, et ajustable à la souris. */
  /* Tranche spectrale à gauche du panneau : la signature de la maison, posée
     une seule fois, à la manière du dos d'un classeur.
     background-attachment:fixed plutôt que border-image, qui ne couvre pas
     toute la hauteur d'un panneau qui défile. Le panneau étant collé au bord
     gauche de la fenêtre, la bande tombe exactement sur son arête. */
  .form{width:470px;flex:0 0 470px;min-width:0;overflow-y:auto;
    padding:0 0 70px 4px;
    background-color:var(--panel);
    background-image:var(--spectrum-v);
    background-repeat:no-repeat;
    background-size:4px 100%;
    background-attachment:fixed;
    background-position:left top;
    scrollbar-width:auto;scrollbar-color:#b3bcc7 var(--panel2)}
  /* Ascenseur franchement visible, plutôt que le filet gris par défaut. */
  .form::-webkit-scrollbar{width:13px}
  .form::-webkit-scrollbar-track{background:var(--panel2)}
  .form::-webkit-scrollbar-thumb{background:#b3bcc7;border-radius:7px;
    border:3px solid var(--panel2)}
  .form::-webkit-scrollbar-thumb:hover{background:#93a0ae}

  /* Poignée de séparation entre la saisie et l'aperçu. */
  .poignee{flex:0 0 7px;cursor:col-resize;background:var(--line);position:relative;
    transition:background .12s}
  .poignee::after{content:"";position:absolute;top:50%;left:2px;width:3px;height:34px;
    margin-top:-17px;border-radius:2px;background:#fff;opacity:.85}
  .poignee:hover,.poignee.actif{background:var(--cyan)}
  body.redimensionne{cursor:col-resize;user-select:none}
  /* Zone d'aperçu : gris neutre, pour que la feuille noire se détache. */
  .stage{flex:1;overflow:auto;padding:24px;background:var(--scene)}


  @media(max-width:900px){
    .work{flex-direction:column}
    .form{width:auto!important;flex:0 0 auto!important;border-right:0;
      border-bottom:1px solid var(--line);max-height:none;overflow:visible}
    .poignee{display:none}
  }

  #measure{position:absolute;left:-9999px;top:0;width:176mm;visibility:hidden}

/* Message bloquant d'authentification (compte non reconnu, rôle absent, etc.) */
#authMsg{margin:0;padding:14px 18px;background:#fdf6e3;border-bottom:1px solid #e3cf9a;
  color:#8a5a00;font-size:13px;line-height:1.5}
#authMsg[hidden]{display:none}