/* Projex Draw — feuille unique (aucune ressource externe). Mêmes couleurs que Calculs. */

:root {
  --fond: #f3f5f8;
  --carte: #ffffff;
  --bord: #e2e7ee;
  --bord-fort: #cfd6e0;
  --texte: #17202c;
  --texte-2: #4b5768;
  --texte-3: #7b8697;
  --accent: #1f5fd1;
  --accent-fonce: #1649a6;
  --accent-clair: #e9f0fd;
  --faible: #b25e00;
  --faible-fond: #fff3e0;
  --rayon: 12px;
  --police: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  display: flex; flex-direction: column;
  background: var(--fond);
  color: var(--texte);
  font: 14px/1.45 var(--police);
  font-variant-numeric: tabular-nums;
}
button, input, select { font: inherit; color: inherit; }

/* ---------- Barre du haut ---------- */
.barre {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 58px; padding: 0 16px;
  background: #fff;
  border-bottom: 1px solid var(--bord);
}
.marque { display: flex; align-items: center; gap: 10px; color: var(--texte); text-decoration: none; }
.marque-logo { display: block; }
.marque-texte { display: flex; flex-direction: column; font-weight: 700; font-size: 16px; line-height: 1.15; }
.marque-texte small { font-weight: 500; font-size: 12px; color: var(--texte-3); }
.actions { display: flex; align-items: center; gap: 8px; }

.bouton, .bouton-icone {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 12px;
  background: #fff; border: 1px solid var(--bord-fort); border-radius: 8px;
  cursor: pointer; white-space: nowrap; font-weight: 550;
}
.bouton:hover, .bouton-icone:hover { border-color: var(--accent); color: var(--accent-fonce); }
.bouton-plein { background: var(--accent); border-color: var(--accent); color: #fff; }
.bouton-plein:hover { background: var(--accent-fonce); color: #fff; }
.bouton-icone { width: 34px; padding: 0; font-size: 18px; }

.plus { position: relative; }
.plus summary { list-style: none; }
.plus summary::-webkit-details-marker { display: none; }
.plus-menu {
  position: absolute; right: 0; top: 40px; z-index: 30;
  display: flex; flex-direction: column; min-width: 250px; padding: 6px;
  background: #fff; border: 1px solid var(--bord); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(20, 30, 50, .12);
}
.plus-menu button, .plus-menu .fichier {
  display: block; padding: 9px 10px; text-align: left;
  background: none; border: 0; border-radius: 6px; cursor: pointer;
}
.plus-menu button:hover, .plus-menu .fichier:hover { background: var(--accent-clair); }
.fichier input { display: none; }

/* ---------- La page : cotes à gauche, dessin à droite ---------- */
.page { flex: 1; min-height: 0; display: grid; grid-template-columns: 330px 1fr; }

.gauche { min-height: 0; display: flex; flex-direction: column; background: #fff; border-right: 1px solid var(--bord); }
.ouvrages { flex: none; padding: 10px 12px; background: var(--accent-clair); border-bottom: 1px solid var(--bord); }
.ouv-ligne { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 8px; margin-bottom: 6px; font-weight: 600; color: var(--texte-2); }
.ouv-ligne select, .ouv-ligne input { width: 100%; height: 32px; padding: 0 8px; border: 1px solid var(--bord-fort); border-radius: 7px; background: #fff; font-weight: 500; color: var(--texte); }
.ouv-ligne input:focus, .ouv-ligne select:focus { outline: 2px solid #fff; border-color: var(--accent); }
.ouv-boutons { display: flex; gap: 6px; }
.ouv-boutons .bouton { flex: 1; height: 30px; padding: 0 6px; font-size: 13px; }
.bouton-danger:hover { border-color: #c62828; color: #c62828; }
.bouton:disabled { opacity: .45; cursor: default; border-color: var(--bord-fort); color: inherit; }
.ouv-etat { display: block; margin-top: 6px; color: var(--texte-3); font-size: 12px; }
.panneau { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px 40px; }
.groupe { border-bottom: 1px solid var(--bord); padding: 4px 0 8px; }
.groupe summary {
  padding: 8px 2px; cursor: pointer;
  font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-2);
}
.champ { display: grid; grid-template-columns: 1fr 128px; align-items: center; gap: 2px 8px; padding: 3px 2px; }
.champ-large { grid-template-columns: 1fr; }
.champ-nom { color: var(--texte); }
.champ-saisie { position: relative; display: block; }
.champ-saisie input {
  width: 100%; height: 32px; padding: 0 34px 0 8px;
  border: 1px solid var(--bord-fort); border-radius: 7px; background: #fff;
  text-align: right;
}
.champ-large .champ-saisie input { text-align: left; }
.champ-saisie select { width: 100%; height: 32px; padding: 0 8px; border: 1px solid var(--bord-fort); border-radius: 7px; background: #fff; }
.champ-saisie input:focus { outline: 2px solid var(--accent-clair); border-color: var(--accent); }
.champ-unite { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--texte-3); font-size: 12px; pointer-events: none; }
.champ-aide { grid-column: 1 / -1; color: var(--texte-3); font-size: 12px; }

.zone { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.outils {
  flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--bord);
}
.outils-sep { flex: 1; }
.choix { display: flex; align-items: center; gap: 8px; color: var(--texte-2); }
.choix select { height: 34px; padding: 0 8px; border: 1px solid var(--bord-fort); border-radius: 8px; background: #fff; }

.dessin { position: relative; flex: 1; min-height: 300px; background: #fff; }
#svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; user-select: none; }
.curseur {
  position: absolute; left: 10px; bottom: 8px;
  font-size: 12px; color: var(--texte-3); white-space: pre; pointer-events: none;
}

.bilan { flex: none; max-height: 34%; overflow: auto; padding: 8px 12px 12px; border-top: 1px solid var(--bord); }
.alerte { margin: 4px 0; padding: 6px 10px; border-radius: 8px; background: var(--faible-fond); color: var(--faible); font-weight: 550; }
.resume { margin: 4px 0 8px; color: var(--texte-2); }
.tableau { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--bord); border-radius: 8px; }
.tableau th, .tableau td { padding: 5px 8px; border-bottom: 1px solid var(--bord); text-align: right; white-space: nowrap; }
.tableau th { color: var(--texte-3); font-weight: 600; font-size: 12px; }
.tableau th:first-child, .tableau td:first-child { text-align: left; font-weight: 650; }

/* ---------- Le dessin ---------- */
#svg g { fill: none; stroke-linejoin: round; }
#svg line, #svg polygon, #svg polyline, #svg circle { vector-effect: non-scaling-stroke; stroke-width: 1.3px; }
#svg .c-tablier { stroke: #1f5fd1; fill: rgba(31, 95, 209, .10); }
#svg .c-culee, #svg .c-pile { stroke: #20303f; fill: rgba(32, 48, 63, .10); }
#svg .c-semelle { stroke: #9a5b00; fill: rgba(178, 94, 0, .08); }
#svg .c-pieu { stroke: #8a3ab9; fill: rgba(138, 58, 185, .10); }
#svg .c-axe { stroke: #c62828; stroke-dasharray: 18 4 3 4; }
#svg .c-cache { stroke: #7b8697; stroke-dasharray: 6 4; }
#svg .c-appareil { stroke: #c62828; fill: rgba(198, 40, 40, .12); }
#svg .c-axe line { stroke-width: .8px; }
#svg .c-tn { stroke: #17803d; }
#svg .c-tn line { stroke-width: 1.8px; }
#svg .c-cote { stroke: #7b8697; }
#svg .c-cote line { stroke-width: .8px; }
#svg text { font-family: Arial, Helvetica, sans-serif; stroke: none; }
#svg .c-cote_texte text { fill: #4b5768; }
#svg .c-texte text, #svg .c-titre text { fill: #17202c; font-weight: 700; }

/* ---------- Les vues, les onglets (cachés sur PC) ---------- */
.vues { display: flex; gap: 6px; }
.puce {
  height: 30px; padding: 0 11px; border: 1px solid var(--bord-fort); border-radius: 999px;
  background: #fff; cursor: pointer; white-space: nowrap; font-size: 13px; font-weight: 550;
}
.puce:hover { border-color: var(--accent); color: var(--accent-fonce); }
.titre-ouvrage, .seulement-tel, .onglets { display: none; }

/* ---------- Téléphone : une appli plein écran, trois onglets en bas ---------- */
@media (max-width: 820px) {
  body { height: 100dvh; overflow: hidden; }
  .barre { height: 52px; padding: 0 10px; gap: 8px; }
  .marque { min-width: 0; }
  .marque-texte { min-width: 0; font-size: 14px; white-space: nowrap; }
  .marque-logo { width: 28px; height: 28px; }
  .curseur { display: none; }
  .marque-texte .slogan { display: none; }
  .titre-ouvrage { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; color: var(--accent-fonce) !important; font-weight: 600 !important; }
  .actions { gap: 6px; }
  #b-svg, #b-imprimer { display: none; }
  .seulement-tel { display: block; }
  .actions .bouton { height: 36px; padding: 0 10px; }
  .plus-menu { position: fixed; right: 8px; top: 56px; left: 8px; min-width: 0; }
  .plus-menu button, .plus-menu .fichier { padding: 13px 12px; font-size: 15px; }

  .page { flex: 1; min-height: 0; display: block; position: relative; }
  .gauche, .zone { position: absolute; inset: 0; display: none; border: 0; }

  /* Dessin : plein écran */
  body.o-dessin .zone { display: flex; }
  body.o-dessin .bilan { display: none; }
  .outils { flex-wrap: nowrap; overflow-x: auto; padding: 8px 10px; gap: 6px; scrollbar-width: none; }
  .outils::-webkit-scrollbar { display: none; }
  .choix { flex: none; font-size: 0; gap: 0; }
  .choix select { font-size: 14px; height: 32px; }
  #z-moins, #z-plus { display: none; }
  .outils-sep { display: none; }
  #z-tout { flex: none; height: 30px; border-radius: 999px; font-size: 13px; }
  .vues { flex: none; }
  .dessin { min-height: 0; }

  /* Cotes : le dessin reste visible en haut pendant qu'on tape */
  body.o-cotes .zone { display: flex; bottom: auto; height: 36%; border-bottom: 1px solid var(--bord-fort); }
  body.o-cotes .outils, body.o-cotes .bilan { display: none; }
  body.o-cotes .gauche { display: flex; top: 36%; }
  .ouvrages { padding: 10px; }
  .panneau { padding: 4px 12px 30px; }
  .champ { grid-template-columns: 1fr 132px; padding: 5px 2px; }
  .champ-saisie input, .champ-saisie select, .ouv-ligne input, .ouv-ligne select { height: 40px; font-size: 16px; }
  .ouv-boutons .bouton { height: 36px; }
  .groupe summary { padding: 12px 2px; }

  /* Tableau */
  body.o-tableau .zone { display: flex; }
  body.o-tableau .outils, body.o-tableau .dessin { display: none; }
  body.o-tableau .bilan { flex: 1; max-height: none; border: 0; padding: 12px; }
  .tableau { display: block; overflow-x: auto; }
  .tableau th:first-child, .tableau td:first-child { position: sticky; left: 0; background: #fff; }

  .onglets {
    flex: none; display: grid; grid-template-columns: repeat(3, 1fr);
    padding-bottom: env(safe-area-inset-bottom);
    background: #fff; border-top: 1px solid var(--bord);
  }
  .onglets button {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    height: 58px; border: 0; background: none; color: var(--texte-3); font-size: 12px; font-weight: 600;
  }
  .onglets svg { width: 24px; height: 24px; fill: currentColor; }
  .onglets button.actif { color: var(--accent); }
  .pastille {
    position: absolute; top: 6px; left: calc(50% + 8px);
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--faible); color: #fff; font-size: 11px; line-height: 18px;
  }
}

/* ---------- Impression : le dessin seul, en paysage ---------- */
@page { size: A3 landscape; margin: 10mm; }
@media print {
  .barre, .gauche, .outils, .curseur, .onglets { display: none !important; }
  .zone { display: block !important; position: static !important; }
  body, .page, .zone { display: block; height: auto; }
  .dessin { height: 250mm; }
  .bilan { max-height: none; border: 0; }
}