:root{
  --anthracite:#1F2A33;
  --anthracite-clair:#2C3A45;
  --orange:#E8710A;
  --orange-clair:#FFF1E3;
  --vert:#1B7A5A;
  --rouge:#C0392B;
  --bleu:#1F6FB2;
  --fond:#F2F4F6;
  --carte:#FFFFFF;
  --trait:#DFE4E9;
  --texte:#1F2A33;
  --texte-doux:#65727C;
  --rayon:14px;
  --ombre:0 1px 2px rgba(31,42,51,.06), 0 8px 24px rgba(31,42,51,.06);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--fond); color:var(--texte);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.45;
}
h1,h2,h3{margin:0 0 .6rem}
h1{font-size:1.45rem}
h2{font-size:1.1rem}
h3{font-size:.95rem}

/* ---------- Barre du haut ---------- */
.topbar{
  background:var(--anthracite); color:#fff; padding:.7rem 1.2rem .1rem;
  position:sticky; top:0; z-index:20;
}
.marque{display:flex; align-items:center; gap:.75rem; margin-bottom:.6rem}
.marque-carre{
  width:40px;height:40px;border-radius:11px;background:var(--orange);
  display:grid;place-items:center;font-weight:700;letter-spacing:.5px
}
.marque-nom{font-weight:700; font-size:1.05rem}
.marque-sous{font-size:.78rem; color:#A9B6C0}
.onglets{display:flex; gap:.25rem; overflow-x:auto}
.onglet{
  background:none;border:0;color:#A9B6C0;padding:.55rem .9rem;cursor:pointer;
  border-radius:10px 10px 0 0; font-size:.9rem; white-space:nowrap; font-family:inherit
}
.onglet:hover{color:#fff}
.onglet.actif{background:var(--fond); color:var(--anthracite); font-weight:600}

/* ---------- Structure ---------- */
main{padding:1.2rem; max-width:1180px; margin:0 auto}
.carte{
  background:var(--carte); border:1px solid var(--trait); border-radius:var(--rayon);
  padding:1rem 1.1rem; box-shadow:var(--ombre); margin-bottom:1rem
}
.entete-vue{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; flex-wrap:wrap}
.grille{display:grid; gap:1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.doux{color:var(--texte-doux); font-size:.85rem}
.vide{padding:2rem; text-align:center; color:var(--texte-doux)}

/* ---------- Boutons ---------- */
button, .btn{font-family:inherit; font-size:.9rem}
.btn{
  border:1px solid var(--trait); background:#fff; color:var(--texte);
  padding:.5rem .9rem; border-radius:999px; cursor:pointer; white-space:nowrap
}
.btn:hover{background:#F7F9FA}
.btn-plein{background:var(--orange); border-color:var(--orange); color:#fff; font-weight:600}
.btn-plein:hover{background:#CE6208}
.btn-sombre{background:var(--anthracite); border-color:var(--anthracite); color:#fff}
.btn-danger{color:var(--rouge); border-color:#E9C4BF}
.btn-danger:hover{background:#FDF3F2}
.btn-min{padding:.28rem .6rem; font-size:.8rem}

/* ---------- Champs ---------- */
label{display:block; font-size:.78rem; color:var(--texte-doux); margin-bottom:.25rem}
input,select,textarea{
  width:100%; padding:.5rem .65rem; border:1px solid var(--trait); border-radius:10px;
  font-family:inherit; font-size:.9rem; background:#fff; color:var(--texte)
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--orange-clair); border-color:var(--orange)}
.champ{margin-bottom:.8rem}
.ligne-champs{display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
input[type=number]{text-align:right}

/* ---------- Tableaux ---------- */
table{width:100%; border-collapse:collapse; font-size:.88rem}
th{text-align:left; font-size:.74rem; text-transform:uppercase; letter-spacing:.4px; color:var(--texte-doux); font-weight:600; padding:.45rem .5rem; border-bottom:1px solid var(--trait)}
td{padding:.5rem; border-bottom:1px solid #EDF0F2; vertical-align:middle}
tr:last-child td{border-bottom:0}
.num{text-align:right; font-variant-numeric:tabular-nums}
.tbl-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* ---------- Pastilles ---------- */
.pastille{
  display:inline-block; padding:.16rem .6rem; border-radius:999px; font-size:.74rem; font-weight:600;
  background:#EEF1F4; color:var(--texte-doux)
}
/* Dans un tableau, une pastille ne se coupe jamais en deux lignes */
td .pastille, th .pastille{white-space:nowrap}
/* Un message d'erreur, lui, se lit sur plusieurs lignes */
.message-erreur{display:block; padding:.5rem .8rem; border-radius:12px; font-size:.85rem;
  font-weight:600; background:#FBEAE8; color:var(--rouge);
  white-space:normal; overflow-wrap:break-word; margin-bottom:.8rem}
.p-orange{background:var(--orange-clair); color:#A24E05}
.p-vert{background:#E3F3EE; color:var(--vert)}
.p-bleu{background:#E6F0F9; color:var(--bleu)}
.p-rouge{background:#FBEAE8; color:var(--rouge)}
.p-gris{background:#ECEFF1; color:#5B6B73}

/* ---------- Indicateurs ---------- */
.kpi{background:var(--carte); border:1px solid var(--trait); border-radius:var(--rayon); padding:.9rem 1rem; box-shadow:var(--ombre)}
.kpi-val{font-size:1.55rem; font-weight:700; font-variant-numeric:tabular-nums}
.kpi-lib{font-size:.78rem; color:var(--texte-doux)}

/* ---------- Récapitulatif devis ---------- */
.recap div{display:flex; justify-content:space-between; gap:1rem; padding:.32rem 0; font-size:.9rem}
.recap .val{flex:0 0 auto; white-space:nowrap}
.recap .sep{border-top:1px solid var(--trait); margin:.4rem 0; padding:0}
.recap .fort{font-weight:700; font-size:1.05rem}
.recap .val{font-variant-numeric:tabular-nums}
/* Pompe à chaleur : valeurs longues (machine, loi d'eau) qui passent à la ligne sur téléphone */
.pac-recap .val{white-space:normal; flex:1 1 auto; min-width:0; text-align:right; overflow-wrap:anywhere}
.pac-recap span:first-child{flex:0 1 auto}

/* ---------- Checklist ---------- */
.check{display:flex; align-items:flex-start; gap:.6rem; padding:.45rem 0; border-bottom:1px solid #EDF0F2}
.check:last-child{border-bottom:0}
.check input{width:18px; height:18px; margin-top:.15rem; flex:0 0 auto; accent-color:var(--orange)}
.check-txt{font-size:.88rem; display:block}
.check-note{font-size:.76rem; color:var(--texte-doux); display:block; margin-top:.1rem}

/* ---------- Modale ---------- */
.modale-fond{position:fixed; inset:0; background:rgba(31,42,51,.45); display:grid; place-items:center; padding:1rem; z-index:40}
.modale-fond[hidden]{display:none}
/* « display:flex » de .check l'emportait sur l'attribut hidden : la case des tarifs
   restait affichée pour un associé. Corrigé le 28/10/2026. */
.check[hidden], .champ[hidden]{display:none}
.modale{background:#fff; border-radius:18px; padding:1.2rem; width:min(640px,100%); max-height:88vh; overflow:auto; box-shadow:0 24px 60px rgba(0,0,0,.25)}
.modale-pied{display:flex; gap:.5rem; justify-content:flex-end; margin-top:1rem}

/* ---------- Impression ---------- */
@media print{
  .topbar,.onglets,.no-print{display:none !important}
  body{background:#fff}
  main{padding:0; max-width:none}
  .carte{box-shadow:none; border:0; page-break-inside:avoid}
  .modale-fond{position:static; background:none; padding:0}
  .modale{box-shadow:none; max-height:none; width:100%}
}

/* Référence réglementaire sous une étape */
.ref{font-size:.74rem; color:var(--bleu); text-decoration:none; border-bottom:1px dotted var(--bleu)}
.ref:hover{color:var(--orange); border-color:var(--orange)}

/* ---------- Audit ---------- */
.q{padding:.8rem 0; border-bottom:1px solid #EDF0F2}
.q:last-child{border-bottom:0}
.q-lib{font-weight:600; margin-bottom:.15rem}
.q-aide{font-size:.8rem; color:var(--texte-doux); margin-bottom:.45rem}
.q-rep{max-width:560px}
.choix{display:flex; flex-wrap:wrap; gap:.4rem}
.choix label{display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--trait);
  border-radius:999px; padding:.32rem .75rem; cursor:pointer; font-size:.86rem;
  color:var(--texte); margin:0; background:#fff}
.choix label:hover{background:#F7F9FA}
.choix input{width:auto; margin:0; accent-color:var(--orange)}
.choix label.sel{border-color:var(--orange); background:var(--orange-clair); font-weight:600}
.jauge{height:9px; background:#EEF1F4; border-radius:99px; overflow:hidden}
.jauge div{height:9px; border-radius:99px}
.jauge-barre{background:var(--orange); transition:width .2s}
.note{font-size:1.9rem; font-weight:700; line-height:1; font-variant-numeric:tabular-nums}
.alerte{display:flex; gap:.6rem; padding:.5rem 0; border-bottom:1px solid #EDF0F2}
.alerte:last-child{border-bottom:0}
.puce{width:9px;height:9px;border-radius:99px;margin-top:.42rem;flex:0 0 auto}

/* ===========================================================
   Écrans étroits : téléphone et tablette en portrait
   =========================================================== */
@media (max-width: 820px){
  main{padding:.8rem}
  .carte{padding:.85rem .9rem; border-radius:12px}
  h1{font-size:1.25rem}
  .entete-vue{gap:.6rem}
  .kpi-val{font-size:1.3rem}
  .note{font-size:1.5rem}

  /* Tous les onglets restent visibles : ils passent à la ligne plutôt que de sortir de l'écran */
  .onglets{flex-wrap:wrap; overflow:visible; gap:.3rem; padding-bottom:.35rem}
  .onglet{padding:.45rem .75rem; font-size:.85rem; border-radius:10px}
  .onglet.actif{box-shadow:0 2px 0 var(--orange) inset}

  /* Le bandeau d'état passe sous le nom, en petit */
  #etatSync{margin-left:0 !important; font-size:.7rem !important; padding:.12rem .5rem !important}
  .marque{flex-wrap:wrap}

  /* Confort tactile : cibles plus hautes, texte assez grand pour ne pas déclencher le zoom */
  input, select, textarea{font-size:16px; padding:.6rem .7rem}
  .btn{padding:.55rem 1rem}
  .btn-min{padding:.4rem .8rem; font-size:.85rem}
  .choix label{padding:.45rem .9rem}
  .check input{width:22px; height:22px}
}

/* Le tableau du devis devient une pile de fiches sur téléphone */
@media (max-width: 620px){
  /* Nos tableaux n'ont pas de thead : la ligne d'en-têtes est la première ligne */
  .tbl-cartes thead{display:none}
  .tbl-cartes th{display:none}
  .tbl-cartes tr:first-child{border:0; padding:0; margin:0}
  .tbl-cartes, .tbl-cartes tbody, .tbl-cartes tr, .tbl-cartes td{display:block; width:100%}
  .tbl-cartes tr{border:1px solid var(--trait); border-radius:12px; padding:.6rem; margin-bottom:.6rem}
  .tbl-cartes td{border:0; padding:.22rem 0; display:flex; justify-content:space-between; gap:1rem; align-items:center}
  .tbl-cartes td::before{content:attr(data-libelle); color:var(--texte-doux); font-size:.78rem; flex:0 0 auto}
  .tbl-cartes td:first-child{display:block}
  .tbl-cartes td:first-child::before{display:none}
  .tbl-cartes td.num{text-align:right}
  .tbl-cartes input{max-width:150px}
}

/* Impression : toujours en tableau, jamais en fiches */
@media print{
  .tbl-cartes thead{display:table-header-group}
  .tbl-cartes th{display:table-cell}
  .tbl-cartes{display:table} .tbl-cartes tbody{display:table-row-group}
  .tbl-cartes tr{display:table-row; border:0; padding:0}
  .tbl-cartes td{display:table-cell; padding:.5rem}
  .tbl-cartes td::before{display:none}
}

/* ===========================================================
   iPhone : encoche, bords arrondis, et rien qui dépasse
   =========================================================== */
html, body{max-width:100%; overflow-x:hidden}
body{
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
.topbar{
  padding-top:calc(.7rem + env(safe-area-inset-top));
  padding-left:calc(1.2rem + env(safe-area-inset-left));
  padding-right:calc(1.2rem + env(safe-area-inset-right));
}
main{padding-bottom:calc(1.2rem + env(safe-area-inset-bottom))}

/* Une image, un tableau ou une fenêtre ne débordent jamais de l'écran */
img, canvas, video{max-width:100%; height:auto}
.carte, .kpi, .modale{max-width:100%}
input, select, textarea{max-width:100%}
pre, textarea{white-space:pre-wrap; word-break:break-word}
.doux, .check-note{overflow-wrap:anywhere}
td, th{overflow-wrap:break-word}

@media (max-width: 700px){
  /* Les largeurs minimales prévues pour un écran large sont levées */
  [style*="min-width"]{min-width:0 !important}
  .recap{min-width:0 !important}
  .entete-vue{flex-direction:column; align-items:stretch}
  .entete-vue > div{width:100%}
  .entete-vue [style*="text-align:right"]{text-align:left !important}
  .grille.g2, .grille.g4{grid-template-columns:1fr}
  .modale{padding:.9rem; border-radius:14px}
  .modale-pied{flex-wrap:wrap}
  .modale-pied .btn{flex:1}
  /* Les deux blocs de signature des documents passent l'un sous l'autre */
  .doc-signatures{flex-direction:column}
}

@media (max-width: 380px){
  /* Trop étroit pour tenir le libellé et trois pastilles sur la même ligne */
  .tbl-cartes td[data-libelle="Contexte"]{display:block}
  .tbl-cartes td[data-libelle="Contexte"]::before{display:block; margin-bottom:.25rem}
  main{padding:.6rem}
  .carte{padding:.7rem}
  h1{font-size:1.15rem}
  .btn{padding:.5rem .8rem; font-size:.86rem}
  .choix label{font-size:.82rem; padding:.4rem .7rem}
}

/* Un bouton qui porte une phrase peut aller à la ligne : sinon il pousse la page.

   « anywhere » est proscrit ici, et ce n'est pas un détail de style : cette
   valeur autorise le navigateur à couper N'IMPORTE OÙ, donc la largeur
   minimale du bouton devient celle d'UNE LETTRE. Dans une rangée serrée, les
   boutons se compriment jusque-là et le texte tombe en colonne, une lettre par
   ligne. C'est ce qui s'est produit sur la barre du dossier photos.
   « break-word » coupe aussi les mots trop longs, mais réserve au bouton la
   largeur de son mot le plus long. Même remède que pour les tableaux. */
.btn-texte{white-space:normal; line-height:1.35; text-align:left; height:auto; overflow-wrap:break-word}

/* Une rangée de boutons doit pouvoir passer à la ligne.
   Beaucoup de rangées sont écrites en style direct « display:flex » sans
   préciser le retour à la ligne : sur un téléphone, le quatrième bouton
   n'entre pas et toute la rangée s'écrase. On le corrige ici une fois pour
   toutes, plutôt qu'à cinquante-six endroits. */
[style*="display:flex"]{flex-wrap:wrap}
.barre-actions{display:flex; flex-wrap:wrap; gap:.5rem}
.barre-actions > .btn{flex:0 1 auto}
.choix label{max-width:100%; white-space:normal; text-align:left}

/* Champs modifiables : on doit voir au premier coup d'oeil qu'ils se saisissent */
.tbl-cartes input[type=number]{background:#FFF; border-color:#C9D2D9}
.tbl-cartes input[readonly]{border-style:dashed}
@media (max-width: 620px){
  .tbl-cartes td[data-libelle="Total de la ligne"]{
    border-top:1px solid var(--trait); margin-top:.35rem; padding-top:.45rem; font-size:1.02rem}
  .tbl-cartes td:first-child{font-weight:600; margin-bottom:.35rem}
}

/* En mode fiches, la cellule Quantité empile son champ et son bouton :
   sinon le champ se retrouve écrasé et le nombre tronqué. */
@media (max-width: 620px){
  .tbl-cartes td[data-libelle="Quantité"]{flex-wrap:wrap; align-items:center}
  .tbl-cartes td[data-libelle="Quantité"] > div{flex:1 1 auto; justify-content:flex-end}
  .tbl-cartes td[data-libelle="Quantité"] input{min-width:96px; max-width:none !important; flex:1 1 auto}
  .tbl-cartes td[data-libelle="Quantité"] > .btn{flex:1 1 100%; margin-top:.4rem}
}

/* ===========================================================
   Tableaux sur téléphone — plus jamais de colonnes écrasées
   Deux comportements, selon le tableau :
   - ceux marqués « tbl-cartes » deviennent une pile de fiches ;
   - tous les autres gardent leur forme de tableau et défilent
     horizontalement dans leur cadre, sans jamais couper les mots.
   =========================================================== */
/* Quelle que soit la taille de l'écran : un tableau garde sa largeur
   naturelle et c'est son cadre qui défile. Jamais de colonne écrasée. */
.tbl-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.tbl-scroll > table{width:auto; min-width:100%}
table td, table th{overflow-wrap:normal; word-break:normal; hyphens:none}
table th{min-width:4.5rem}
table td{min-width:4.5rem}
table td.num, table th.num{min-width:5.5rem; white-space:nowrap}

@media (max-width: 620px){
  /* Les tableaux des documents imprimables ne sont pas dans un cadre :
     ils deviennent eux-mêmes le cadre qui défile. */
  .doc table, #zoneImpression table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch}

  /* En fiches, la fiche occupe toute la largeur : plus de largeur minimale */
  .tbl-scroll > table.tbl-cartes{width:100%; min-width:0}
  .tbl-cartes td, .tbl-cartes th{min-width:0}
  .tbl-cartes td{overflow-wrap:break-word}

  /* En fiches : la ligne de titre porte le libellé de l'ouvrage ou du chantier */
  .tbl-cartes td.td-titre{display:block; font-weight:600; margin-bottom:.35rem}
  .tbl-cartes td.td-titre::before{display:none}
  .tbl-cartes td.td-titre input{max-width:none; width:100%}
  /* Les boutons d'action passent en bas de la fiche, sur toute la largeur */
  .tbl-cartes td.td-actions{display:flex; flex-wrap:wrap; gap:.4rem; justify-content:flex-start;
    margin-top:.5rem; padding-top:.5rem; border-top:1px solid var(--trait)}
  .tbl-cartes td.td-actions::before{display:none}
  .tbl-cartes td.td-actions .btn{flex:1 1 auto}
  /* Le détail des coûts n'a pas sa place sur un petit écran : il reste
     accessible par le bouton Composition. */
  .masq-mob{display:none !important}

  /* Les pastilles de contexte restent d'un seul tenant et se serrent au besoin */
  .tbl-cartes td[data-libelle="Contexte"]{flex-wrap:wrap; justify-content:flex-end; row-gap:.35rem}
  .tbl-cartes td[data-libelle="Contexte"] .pastille{white-space:nowrap; padding:.2rem .55rem; font-size:.74rem}
}

/* À l'impression, tout redevient un vrai tableau, tenu dans la largeur de la page */
@media print{
  .masq-mob{display:table-cell !important}
  .tbl-cartes td.td-titre, .tbl-cartes td.td-actions{display:table-cell}
  .doc table, #zoneImpression table{display:table}
  .tbl-scroll{overflow:visible}
  .tbl-scroll > table, table{width:100%; min-width:0}
  table td, table th{min-width:0; overflow-wrap:break-word}
  table td.num, table th.num{min-width:0}
}

/* ===========================================================
   D'où vient ce chiffre
   Un chiffre expliqué se signale discrètement et s'ouvre au clic.
   =========================================================== */
.chiffre{cursor:pointer; border-bottom:1px dotted var(--bleu); padding-bottom:1px}
.chiffre:hover{color:var(--orange); border-color:var(--orange)}

.expl{border:1px solid var(--trait); border-radius:12px; padding:.5rem .8rem; margin-bottom:.8rem}
.expl-fam{font-size:.74rem; text-transform:uppercase; letter-spacing:.4px; color:var(--texte-doux);
  font-weight:600; margin:.6rem 0 .2rem}
.expl-fam:first-child{margin-top:0}
.expl-ligne{display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding:.28rem 0; border-bottom:1px solid #F2F5F7}
.expl-ligne:last-child{border-bottom:0}
.expl-lib{flex:1 1 auto}
.expl-calc{display:block; font-size:.78rem; color:var(--texte-doux); font-variant-numeric:tabular-nums}
.expl-note{display:block; font-size:.76rem; color:var(--texte-doux); font-style:italic}
.expl-val{flex:0 0 auto; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right}
.expl-total{font-weight:600; border-top:1px solid var(--trait); border-bottom:0; margin-top:.2rem}
.expl-doux, .expl-doux .expl-val{color:var(--texte-doux)}
.expl-resultat{display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  background:var(--orange-clair, #FDF0E4); border-radius:12px; padding:.6rem .8rem;
  font-weight:700; font-size:1.05rem; margin-bottom:.9rem}
.expl-regle{background:#F7F9FA; border-radius:12px; padding:.7rem .8rem; font-size:.85rem; line-height:1.55}
.expl-regle-titre{font-weight:600; margin-bottom:.25rem}
.expl-source{margin-top:.4rem; font-size:.8rem; color:var(--texte-doux)}

@media (max-width: 620px){
  .expl-ligne{flex-wrap:wrap; row-gap:.15rem}
  .expl-val{width:100%; text-align:right}
}
@media print{
  .chiffre{border-bottom:0}
  .expl, .expl-regle, .expl-resultat{break-inside:avoid}
}

/* ===========================================================
   Espace du chef d'équipe
   =========================================================== */
.etapes{display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1rem}
.etape{
  border:1px solid var(--trait); background:#FFF; color:var(--texte);
  border-radius:12px; padding:.5rem .9rem; font-size:.9rem; font-weight:600;
  cursor:pointer; display:inline-flex; align-items:center; gap:.4rem
}
.etape:hover{border-color:var(--orange)}
.etape.actif{background:var(--orange); color:#FFF; border-color:var(--orange)}
.etape-nb{
  font-size:.74rem; font-weight:600; background:#EEF1F4; color:var(--texte-doux);
  border-radius:99px; padding:.05rem .45rem
}
.etape.actif .etape-nb{background:rgba(255,255,255,.25); color:#FFF}

.tache-faite{opacity:.62}
.tache-faite .pastille{opacity:.7}

/* ---------- Photos ---------- */
.galerie{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:.8rem}
.vignette{margin:0; border:1px solid var(--trait); border-radius:12px; overflow:hidden; background:#FFF}
/* La zone qui ouvre la photo : une hauteur minimale même vide, sinon il n'y
   a rien à toucher tant que l'image n'a pas chargé. */
.vignette-image{cursor:pointer; min-height:96px; background:#EDF1F4; display:block}
.vignette-image:focus-visible{outline:3px solid var(--orange); outline-offset:-3px}
.vignette img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:#EEF1F4; cursor:zoom-in
}
.vignette figcaption{padding:.5rem .6rem; font-size:.82rem; display:flex; flex-direction:column; gap:.15rem}
.photo-grande{border-radius:12px; overflow:hidden; background:#EEF1F4}
.photo-grande img{width:100%; display:block; max-height:60vh; object-fit:contain}

.dossiers{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:.8rem}
.dossier{
  border:1px solid var(--trait); border-radius:14px; background:#FFF; padding:0 0 .6rem;
  text-align:left; cursor:pointer; overflow:hidden; font:inherit; color:inherit
}
.dossier:hover{border-color:var(--orange)}
.dossier-vue{background:#EEF1F4; aspect-ratio:4/3}
.dossier-vue img{width:100%; height:100%; object-fit:cover; display:block}
.dossier-nom{font-weight:600; padding:.5rem .7rem 0}
.dossier .doux{padding:0 .7rem; font-size:.78rem}

/* ---------- Commentaires ---------- */
.commentaire{
  border-left:3px solid var(--trait); padding:.4rem .7rem; margin-bottom:.5rem;
  background:#F7F9FA; border-radius:0 10px 10px 0
}
.commentaire.du-bureau{border-left-color:var(--orange); background:var(--orange-clair)}
.commentaire-tete{font-size:.8rem; font-weight:600; margin-bottom:.15rem}

@media (max-width: 620px){
  .etapes{gap:.3rem}
  .etape{padding:.45rem .7rem; font-size:.84rem}
  .galerie{grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:.5rem}
  .dossiers{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:.5rem}
}
@media print{
  .etapes{display:none}
  .galerie{grid-template-columns:repeat(2, 1fr)}
  .vignette{break-inside:avoid}
}

/* Les photos sous une tâche sont plus petites : elles accompagnent, elles ne dominent pas */
.galerie-tache{grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:.5rem}
.galerie-tache .vignette figcaption{padding:.35rem .5rem; font-size:.76rem}

/* Une pastille rouge sur l'onglet du fil : elle dit qu'on a manqué quelque
   chose, ce qu'un simple compteur gris ne dit pas. */
.etape-nb.nouveau{background:var(--rouge); color:#FFF; font-weight:700}

/* ---------- Photos des chantiers de référence, dans le mémoire ----------
   Petites et alignées : elles appuient le texte, elles ne le remplacent pas.
   Un acheteur qui feuillette doit voir l'ouvrage fini sans que la page se
   transforme en album. */
.refs-photos{display:flex; flex-direction:column; gap:.9rem; margin-top:.8rem}
.ref-chantier{break-inside:avoid}
.ref-titre{font-weight:700; font-size:.92rem; margin-bottom:.35rem}
.ref-photos{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:.6rem}
.ref-photo{margin:0; border:1px solid var(--trait); border-radius:8px; overflow:hidden; background:#FFF}
.ref-photo img{width:100%; height:110px; object-fit:cover; display:block}
.ref-photo figcaption{padding:.3rem .45rem; font-size:.74rem; color:var(--texte-doux)}
@media print{
  .ref-photos{grid-template-columns:repeat(3, 1fr)}
  .ref-photo img{height:80px}
}

/* ---------- Groupes de photos repliables ----------
   L'en-tête occupe toute la largeur et se touche facilement avec un gant :
   c'est la cible la plus utilisée de cet écran. */
.groupe-photos{padding:0}
.groupe-photos > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center;
  gap:.6rem; padding:.85rem 1rem; user-select:none}
.groupe-photos > summary::-webkit-details-marker{display:none}
.groupe-photos > summary::before{
  content:''; flex:none; width:0; height:0;
  border-left:7px solid var(--texte-doux);
  border-top:5px solid transparent; border-bottom:5px solid transparent;
  transition:transform .15s ease}
.groupe-photos[open] > summary::before{transform:rotate(90deg)}
.groupe-photos > summary:hover{background:#F7F9FA}
.groupe-titre{font-weight:700; font-size:1.02rem; flex:1}
.groupe-nb{background:#EDF1F4; color:var(--texte-doux); border-radius:99px;
  padding:.1rem .55rem; font-size:.82rem; font-weight:600; flex:none}
.groupe-photos[open] > summary{border-bottom:1px solid var(--trait)}
.groupe-photos > .galerie{padding:.9rem 1rem 1rem}
@media print{
  /* À l'impression, tout est déplié : un dossier remis au client ne se plie pas. */
  .groupe-photos > .galerie{display:grid !important}
  .groupe-photos > summary::before{display:none}
}

/* ---------- Le fil du chantier ----------
   Les messages du bureau se distinguent de ceux du chantier par leur fond,
   et un message réservé au bureau porte en plus un liseré bleu et sa
   mention : sur un écran partagé, on doit savoir d'un coup d'oeil que ce
   qu'on lit n'est pas destiné à tout le monde. */
.fil{display:flex; flex-direction:column; gap:.6rem; max-height:56vh; overflow-y:auto;
     padding-right:.2rem}
.fil-msg{background:#F7F9FA; border:1px solid var(--trait); border-radius:12px;
         padding:.6rem .75rem}
.fil-msg.du-bureau{background:#F2F7FB}
.fil-msg.reserve{border-left:4px solid #1F6FB2}
.fil-tete{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem;
          font-size:.82rem; margin-bottom:.2rem}
.fil-texte{white-space:pre-wrap; overflow-wrap:break-word}
.fil audio{max-width:100%}

/* ---------- Observation dite ----------

   Sur un chantier, tout le monde ne lit pas et n'écrit pas. Le bouton qui
   déclenche la parole doit donc se reconnaître SANS lire son libellé : une
   grosse pastille rouge au repos — la convention de l'enregistrement, comprise
   partout — et un carré blanc pendant qu'il enregistre, l'autre convention.
   Le libellé reste écrit à côté pour ceux qui lisent : on n'enlève rien.
   Aucun pictogramme : des formes, de la couleur, et de la taille. */
.btn-dire{background:var(--rouge); border-color:var(--rouge); color:#FFF;
  font-weight:600; display:inline-flex; align-items:center; gap:.45rem}
.btn-dire::before{content:''; display:inline-block; width:12px; height:12px;
  border-radius:99px; background:#FFF; flex:none}
.btn-dire:hover{background:#A8291B; border-color:#A8291B}
.btn-dire-grand{font-size:1.05rem; padding:.75rem 1.3rem; border-radius:99px}
.btn-dire-grand::before{width:16px; height:16px}

/* Pendant l'enregistrement : la pastille devient un carré, et elle bat.
   Deux signes au lieu d'un, pour qui ne distingue pas bien les couleurs. */
.btn-dire.enregistre::before{border-radius:2px; animation:pulseVocal 1s infinite}

/* Une photo qui porte une observation dite doit se repérer d'un coup d'oeil
   dans une galerie de deux cents images : un bouton vert, la couleur de ce
   qu'on peut écouter, et un triangle de lecture — forme, pas pictogramme. */
.btn-ecouter{background:var(--vert); border-color:var(--vert); color:#FFF;
  font-weight:600; display:inline-flex; align-items:center; gap:.4rem}
.btn-ecouter::before{content:''; display:inline-block; width:0; height:0; flex:none;
  border-left:9px solid #FFF; border-top:6px solid transparent;
  border-bottom:6px solid transparent}
.btn-ecouter:hover{background:#12604C; border-color:#12604C}
.marque-dite{color:var(--vert); font-weight:600}

/* La rangée sous une vignette : parler passe avant écrire */
.barre-vignette{display:flex; flex-wrap:wrap; align-items:center;
  gap:.35rem; margin-top:.4rem}
.vocal-grand{margin-top:.9rem}
.vocal-etat{font-size:.76rem}

.vocal{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-top:.5rem}
/* Ces règles précèdent l'arrivée du bouton « Dire » : on les écarte de lui,
   sinon leur spécificité plus forte le repeindrait en orange sur fond blanc
   et lui rendrait sa pastille ronde pendant l'enregistrement. */
.vocal .btn:not(.btn-dire){border-color:var(--orange); color:var(--orange)}
.vocal .btn:not(.btn-dire).enregistre{background:var(--rouge); border-color:var(--rouge); color:#FFF}
.vocal .btn:not(.btn-dire).enregistre::before{
  content:''; display:inline-block; width:10px; height:10px; border-radius:99px;
  background:#FFF; margin-right:.5rem; animation:pulseVocal 1s infinite
}
@keyframes pulseVocal{0%,100%{opacity:1} 50%{opacity:.25}}
.commentaire audio{max-width:100%}

/* ---------- Les images des panneaux ----------
   Elles viennent du cours de signalisation temporaire de FORMENERGIE : le chef
   d'équipe reconnaît sur son téléphone ce qu'on lui a montré en salle. */
.panneau{display:inline-flex; align-items:center; justify-content:center; position:relative}
.panneau img{display:block; width:100%; height:auto}
.panneau-moyen{width:62px}
.panneau-petit{width:40px}
.panneau-grand{width:96px}

/* Un panneau dont l'image manque garde son code écrit : sur un sujet
   réglementaire, mieux vaut un repère nu qu'un dessin approximatif. */
.panneau-absent{display:inline-flex; align-items:center; justify-content:center;
  min-width:56px; padding:.3rem .5rem; border:2px solid var(--anthracite);
  border-radius:6px; background:#FFF; font-weight:700; font-size:.85rem; color:var(--anthracite)}
.panneau-valeur{position:absolute; right:-4px; bottom:-4px; background:var(--anthracite);
  color:#FFF; border-radius:99px; font-size:.68rem; font-weight:700; padding:.05rem .32rem}
.panneau-absent .panneau-valeur{position:static; margin-left:.25rem}
.td-panneau{text-align:center}

/* ---------- Schéma de balisage ---------- */
.schema-balisage{border:1px solid var(--trait); border-radius:12px; padding:.5rem;
  background:#FFF; margin-bottom:.9rem; overflow-x:auto}
.schema-balisage svg{min-width:520px; display:block}

/* Le plan garde le rapport d'un A4 couché : ce qu'on voit à l'écran est ce
   qui sortira de l'imprimante. */
.plan-a4 svg{min-width:680px}

@media print{
  /* Le plan de balisage s'imprime seul, en paysage, sur une page entière. */
  @page{size:A4 landscape; margin:8mm}
  .plan-a4{border:0; padding:0; margin:0; overflow:visible; break-inside:avoid}
  .plan-a4 svg{min-width:0; width:100%; height:auto}
}

/* ===========================================================
   Mémoire technique
   Ce qui reste à compléter doit sauter aux yeux, à l'écran comme
   à l'impression : un mémoire remis avec un trou se voit.
   =========================================================== */
.memoire h2{margin-top:1.6rem; padding-bottom:.3rem; border-bottom:2px solid var(--orange)}
.memoire h3{margin-top:1rem; margin-bottom:.3rem}
.memoire p{margin:.4rem 0}
.memoire ul, .memoire ol{margin:.3rem 0 .3rem 1.2rem; padding:0}
.memoire li{margin-bottom:.25rem}
.mem-sommaire{columns:2; column-gap:2rem}
.mem-rubrique{break-inside:auto; page-break-inside:auto}
.mem-tache{margin-bottom:.9rem; break-inside:avoid; page-break-inside:avoid}
.mem-sous{margin:.3rem 0 .3rem .3rem}
.mem-sous ol{margin-top:.15rem}
.mem-criteres{
  background:var(--orange-clair); border-radius:12px; padding:.8rem 1rem; margin:1rem 0;
  line-height:1.6
}
.a-completer{
  background:#FFF3CD; color:#8A6100; padding:.05rem .4rem; border-radius:6px;
  font-weight:600; border-bottom:2px dotted #C89A00
}
.doc-tete{display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.2rem}
.doc-logo{max-height:70px; max-width:180px; object-fit:contain}
@media (max-width: 620px){
  .mem-sommaire{columns:1}
}
@media print{
  .memoire h2{page-break-after:avoid}
  .a-completer{background:#FFF3CD !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
}

/* ---------- Galeries dans les documents ---------- */
.galerie-doc{grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:.7rem; margin:.6rem 0 1rem}
.galerie-doc.grande{grid-template-columns:repeat(auto-fill, minmax(300px, 1fr))}
.galerie-doc .vignette img{cursor:default; aspect-ratio:4/3}
.galerie-doc .vignette figcaption{padding:.4rem .55rem; font-size:.78rem}
.fiche-reference .chapeau{font-size:1.05rem; line-height:1.6; margin:.8rem 0 1.2rem}
.fiche-reference h2{margin-top:1.4rem; padding-bottom:.25rem; border-bottom:2px solid var(--orange)}

@media print{
  /* Une photographie ne doit jamais se couper entre deux pages */
  .galerie-doc .vignette{break-inside:avoid; page-break-inside:avoid}
  .galerie-doc{grid-template-columns:repeat(3, 1fr)}
  .galerie-doc.grande{grid-template-columns:repeat(2, 1fr)}
}

/* Une observation dite déjà entendue : le repère s'éteint, il ne réclame plus */
.marque-lue{color:var(--texte-doux); font-weight:400}

/* ===========================================================
   OUTILS DE CALCUL DU TECHNICIEN (calculs.js)
   Un téléphone au bord de l'unité extérieure : gros champs,
   16 px au moins pour que l'iPhone ne zoome pas, une carte par outil.
   =========================================================== */
.calc-carte{padding:0; overflow:hidden}
.calc-titre{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  gap:.8rem; padding:1rem 1.1rem; font-weight:700; font-size:1.02rem; min-height:56px}
.calc-titre::-webkit-details-marker{display:none}
.calc-titre::after{content:"+"; flex:0 0 auto; font-size:1.3rem; font-weight:400; color:var(--texte-doux); margin-left:.2rem}
.calc-carte[open] > .calc-titre::after{content:"−"}
.calc-titre-txt{flex:1 1 auto}
.calc-apercu{flex:0 0 auto; color:var(--vert); font-variant-numeric:tabular-nums; white-space:nowrap}
.calc-corps{padding:0 1.1rem 1.1rem}
.calc-champs{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:.7rem 1rem}
.calc-champ{display:flex; flex-direction:column; gap:.25rem; min-width:0}
.calc-lib{font-weight:600; font-size:.88rem}
.calc-saisie{display:flex; align-items:center; gap:.4rem}
.calc-saisie input{flex:1 1 auto; min-width:0; font-size:18px; min-height:48px; text-align:right;
  font-variant-numeric:tabular-nums}
.calc-champ select{font-size:16px; min-height:48px; width:100%}
.calc-unite{flex:0 0 auto; color:var(--texte-doux); font-size:.9rem; min-width:2.2rem}
.calc-signe{flex:0 0 auto; min-width:48px; min-height:48px; font-size:1.1rem; padding:0}
.calc-aide{font-size:.78rem; color:var(--texte-doux); line-height:1.35}
.calc-res{margin-top:1rem; border-radius:var(--rayon); background:#EEF6F3; padding:.9rem 1rem}
.calc-res-vide{background:#F7F9FA; color:var(--texte-doux)}
.calc-res-lib{font-size:.85rem; color:var(--texte-doux); font-weight:600}
.calc-res-val{font-size:2rem; font-weight:800; color:var(--vert); line-height:1.15; margin:.15rem 0 .5rem;
  font-variant-numeric:tabular-nums; overflow-wrap:break-word}
.calc-res-unite{font-size:1.05rem; font-weight:600}
.calc-alerte{margin-top:.5rem; padding:.5rem .7rem; border-radius:10px; font-size:.88rem; border-left:4px solid}
.calc-alerte-ok{background:#E3F3EE; border-color:var(--vert)}
.calc-alerte-attention{background:#FDEDEB; border-color:var(--rouge)}
.calc-alerte-info{background:#EAF2FA; border-color:var(--bleu)}
.calc-detail{margin-top:.7rem; font-size:.82rem; line-height:1.5}
.calc-detail-titre{font-weight:700; margin-bottom:.2rem}
.calc-detail-ligne{font-variant-numeric:tabular-nums; overflow-wrap:break-word; padding:.1rem 0}
.calc-source{margin-top:.5rem; font-size:.78rem; color:var(--texte-doux); overflow-wrap:break-word}
.calc-source a{color:var(--bleu)}
.calc-notice{margin-top:.4rem; font-size:.82rem; font-weight:700}
#calcImpression{display:none}
.calc-doc h2{margin-top:1.2rem; padding-bottom:.2rem; border-bottom:2px solid var(--vert)}
.calc-doc table{width:100%; border-collapse:collapse; font-size:.85rem; margin-bottom:.4rem}
.calc-doc td, .calc-doc th{border-bottom:1px solid var(--trait); padding:.3rem .4rem; text-align:left}
@media print{
  body.impr-calc #ecran > *:not(#calcImpression){display:none !important}
  body.impr-calc #calcImpression{display:block}
  .calc-doc-outil{break-inside:avoid; page-break-inside:avoid}
  .calc-res{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}
@media (max-width: 620px){
  .calc-champs{grid-template-columns:1fr}
  .calc-corps{padding:0 .85rem .9rem}
  .calc-titre{padding:.9rem .85rem}
}

/* ---------- Guide des modes opératoires (impression) ---------- */
.guide-technicien h2{margin:1.4rem 0 .6rem}
.guide-couverture{text-align:center; padding:2rem 0 1.5rem; border-bottom:2px solid var(--orange, #E8710A); margin-bottom:1rem}
.guide-couverture h1{font-size:1.8rem; margin:.6rem 0 .3rem}
.guide-logo{max-height:80px; max-width:200px; object-fit:contain}
.guide-entreprise{font-weight:700; font-size:1.05rem}
.guide-sous{font-size:1.05rem; margin-bottom:.4rem}
.guide-regle{margin:.35rem 0; line-height:1.45}
.guide-sommaire li{margin:.2rem 0}
.guide-ouvrage{border:1px solid #D8DEE4; border-radius:10px; padding:.8rem 1rem; margin:.7rem 0; break-inside:avoid; page-break-inside:avoid}
.guide-ouvrage-tete{display:flex; gap:.6rem; align-items:baseline; flex-wrap:wrap}
.guide-code{font-weight:700; font-size:.85rem; padding:.1rem .5rem; border-radius:99px; background:#F1F3F5}
.guide-lib{font-weight:700; font-size:1.02rem}
.guide-meta{font-size:.82rem; margin:.25rem 0 .4rem}
.guide-volet h4{margin:.5rem 0 .2rem; font-size:.9rem}
.guide-volet ul, .guide-volet ol{margin:0; padding-left:1.3rem}
.guide-volet li{margin:.12rem 0; line-height:1.4}
.guide-cases{list-style:none; padding-left:.2rem !important}
.guide-cases li{position:relative; padding-left:1.4rem}
.guide-cases li::before{content:""; position:absolute; left:0; top:.2rem; width:.8rem; height:.8rem; border:1.5px solid #333; border-radius:2px}
.guide-secu{background:#FFF4E5; border-radius:8px; padding:.3rem .7rem .5rem; margin-top:.5rem}
.guide-pied{margin-top:1.5rem; font-size:.8rem}
@media print{
  .guide-famille{break-before:page; page-break-before:always}
  .guide-ouvrage{border-color:#999}
}
.guide-pour{display:inline-block; font-size:.72rem; padding:0 .45rem; border-radius:99px; background:#EEF3F8; color:#1F4E79; margin-left:.2rem}
.guide-source{font-size:.78rem; color:#5B6770; margin-top:.15rem; word-break:break-word}
.guide-admin h3{margin:1rem 0 .4rem}
.guide-calendrier{width:100%; border-collapse:collapse}
.guide-calendrier td, .guide-calendrier th{border:1px solid #D8DEE4; padding:.4rem .6rem; text-align:left; vertical-align:top}

/* ---------- Planning de chantier ---------- */
.plan-onglets{display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 .8rem}
.plan-pilule{border:1px solid var(--trait); background:#fff; color:var(--texte); border-radius:999px;
  padding:.45rem .9rem; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:.35rem}
.plan-pilule.actif{background:var(--anthracite); border-color:var(--anthracite); color:#fff}
.plan-badge{background:var(--orange); color:#fff; border-radius:999px; font-size:.72rem; padding:.05rem .45rem}
.plan-message{display:flex; gap:.8rem; align-items:center; justify-content:space-between; flex-wrap:wrap; border-left:4px solid var(--vert)}
.plan-ok{color:var(--vert)}
.plan-lien{background:none; border:0; padding:0; font:inherit; font-weight:700; color:var(--bleu); cursor:pointer; text-align:left}
.plan-grille{width:100%; border-collapse:collapse; min-width:980px}
.plan-grille th, .plan-grille td{border:1px solid #E1E6EB; vertical-align:top; padding:.35rem; font-size:.85rem}
.plan-grille th{background:#F6F8FA; text-align:left}
.plan-tech{min-width:150px}
.plan-charge-cel{white-space:nowrap; font-size:.8rem}
.plan-aff{border-radius:8px; padding:.3rem .45rem; margin:.2rem 0; cursor:pointer; background:#EEF3F8; border-left:4px solid #1F6FB2}
.plan-aff strong{display:block; font-size:.82rem}
.plan-aff span{display:block; font-size:.75rem; color:#4A5560}
.plan-aff-alerte{outline:2px solid #E0A04A; outline-offset:-1px}
.plan-aff-rouge{outline-color:var(--rouge)}
.plan-pose{border-left-color:#D86000}.plan-mes{border-left-color:#187860}.plan-visite{border-left-color:#7A5AF8}
.plan-entretien{border-left-color:#1F6FB2}.plan-depannage{border-left-color:#C0392B}.plan-autre{border-left-color:#8A949E}
.plan-absence{background:#EEF0F2; color:#4A5560; border-radius:8px; padding:.3rem .45rem; font-size:.8rem; font-weight:600; cursor:pointer; margin:.2rem 0}
.plan-sans > div{margin:.3rem 0}
.plan-coche{display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; font-weight:400; margin:.25rem 0}
.plan-coche input{width:auto; margin:0}
.plan-inline{display:inline-flex; align-items:center; gap:.4rem; margin:0; font-weight:600}
.plan-alerte{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; padding:.5rem .6rem; margin:.35rem 0; border-radius:10px; background:#FFF7EC}
.plan-alerte > span:nth-child(2){flex:1 1 240px}
.plan-alerte-rouge{background:#FBEAE8}
.plan-tournee-tete{display:flex; justify-content:space-between; align-items:flex-start; gap:.8rem; flex-wrap:wrap; margin-bottom:.5rem}
.plan-tournee-corps{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:1rem; align-items:start}
.plan-arrets{list-style:none; padding:0; margin:0}
.plan-arret{display:flex; gap:.6rem; align-items:flex-start; padding:.55rem .5rem; border-left:4px solid #8A949E;
  background:#F8FAFB; border-radius:8px; margin:.35rem 0}
.plan-arret-depot{border-left-color:var(--anthracite); background:#fff; border:1px dashed var(--trait)}
.plan-arret-txt{flex:1 1 auto; min-width:0}
.plan-arret-act{display:flex; gap:.3rem; flex-wrap:wrap}
.plan-arret-act .btn{padding:.35rem .6rem; font-size:.8rem}
.plan-trajet{font-size:.75rem; color:var(--texte-doux); margin-bottom:.15rem}
.plan-num{flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:var(--anthracite); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:.85rem}
.plan-proche{display:flex; justify-content:space-between; align-items:center; gap:.6rem; flex-wrap:wrap;
  padding:.45rem 0; border-bottom:1px solid #EDF0F2}
.plan-proche:last-child{border-bottom:0}
.plan-schema{width:100%; max-width:320px; height:auto; background:#F6F8FA; border-radius:12px; border:1px solid var(--trait)}
.plan-schema-trait{fill:none; stroke:#1F6FB2; stroke-width:2; stroke-linejoin:round; opacity:.7}
.plan-schema-arret{fill:#E8710A; stroke:#fff; stroke-width:2}
.plan-schema-depot{fill:#1F2A33}
.plan-schema-txt{fill:#fff; font-size:10px; font-weight:700; text-anchor:middle; font-family:inherit}
.plan-schema-echelle{stroke:#1F2A33; stroke-width:2}
.plan-schema-legende{fill:#4A5560; font-size:9px; font-family:inherit}
.plan-table{width:100%; border-collapse:collapse}
.plan-table th, .plan-table td{padding:.5rem; border-bottom:1px solid #EDF0F2; text-align:left; vertical-align:top}
.plan-barre{height:10px; background:#EDF0F2; border-radius:999px; overflow:hidden; min-width:110px}
.plan-barre-plein{height:100%; border-radius:999px}
.plan-barre-vert{background:var(--vert)}.plan-barre-orange{background:#E0A04A}.plan-barre-rouge{background:var(--rouge)}
.plan-barre-txt{font-size:.78rem; color:var(--texte-doux); margin-top:.2rem; white-space:nowrap}
.plan-jours{display:flex; flex-wrap:wrap; gap:.35rem}
.plan-retire{background:none; border:0; color:inherit; cursor:pointer; font-size:.9rem; padding:0 .1rem}
/* Le téléphone du technicien : gros boutons, gros textes */
.plan-terrain{border-left:4px solid #8A949E; padding:.7rem .8rem; margin:.7rem 0; background:#F8FAFB; border-radius:12px}
.plan-terrain-tete{display:flex; gap:.6rem; align-items:center}
.plan-terrain-nom{font-size:1.1rem; font-weight:700; margin:.4rem 0 .2rem}
.plan-terrain-adr{display:block; font-size:1rem; margin-bottom:.4rem}
.plan-tournee a.btn{text-decoration:none}
.plan-gros{display:flex; justify-content:center; align-items:center; width:100%; min-height:48px; font-size:1rem; margin:.45rem 0; text-decoration:none}
.plan-aujourdhui{border:2px solid var(--orange)}
.plan-absence-terrain{background:#EEF0F2; font-weight:600}
@media (max-width: 760px){
  .plan-tournee-corps{grid-template-columns:1fr}
  .plan-arret{flex-wrap:wrap}
  .plan-arret-act{width:100%; padding-left:34px}
}
/* Impression du planning : seule la feuille sort */
.plan-impr{display:none}
.plan-papier{font-size:10pt; color:#000}
.plan-papier-tete{display:flex; justify-content:space-between; border-bottom:2px solid #000; padding-bottom:.3rem; margin-bottom:.5rem}
.plan-papier-table{width:100%; border-collapse:collapse}
.plan-papier-table th, .plan-papier-table td{border:1px solid #888; padding:4px; vertical-align:top; text-align:left; font-size:9pt}
.plan-papier-aff{margin-bottom:4px; padding-bottom:3px; border-bottom:1px dotted #aaa}
.plan-papier-aff:last-child{border-bottom:0}
.plan-papier-pied{margin-top:.5rem; font-size:8pt; color:#444}
.plan-saut{break-after:page; page-break-after:always}
@media print{
  .plan-impr{display:block}
  .plan-impr:empty{display:none}
  .plan-papier-table tr{break-inside:avoid; page-break-inside:avoid}
}
.seulement-print{display:none}
@media print{ .seulement-print{display:block} }

/* ---------- Mode d'emploi de l'administrateur (impression) ---------- */
.me-doc p{margin:.45rem 0; line-height:1.5}
.me-intro{margin:1rem 0 .5rem; line-height:1.55}
.me-partie{margin-top:.6rem; padding-bottom:.3rem; border-bottom:2px solid var(--orange, #E8710A)}
.me-section{margin:1.3rem 0 .45rem; font-size:1.05rem; break-after:avoid; page-break-after:avoid}
.me-sommaire-partie{margin:.7rem 0 .2rem}
.me-sommaire-liste{list-style:none; padding-left:.4rem; margin:0}
.me-num{display:inline-block; min-width:2.6rem; font-weight:700; color:var(--texte-doux, #65727C)}
.me-etapes{margin:.4rem 0 .6rem; padding-left:1.5rem}
.me-etapes li{margin:.25rem 0; line-height:1.45}
.me-liste{margin:0; padding-left:1.1rem}
.me-liste li{margin:.15rem 0}
.me-table{margin:.5rem 0 .8rem; font-size:.92rem}
.me-table td{line-height:1.4}
.me-code{font-family:ui-monospace, Menlo, Consolas, monospace; font-size:.85em; background:#F1F3F5;
  border-radius:4px; padding:.05rem .3rem; word-break:break-all}
.me-encadre{border-radius:10px; padding:.55rem .85rem; margin:.6rem 0 .9rem; line-height:1.45;
  break-inside:avoid; page-break-inside:avoid; -webkit-print-color-adjust:exact; print-color-adjust:exact}
.me-encadre-titre{font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.2rem}
.me-savoir{background:#EEF3F8; border-left:4px solid #1F6FB2}
.me-savoir .me-encadre-titre{color:#1F4E79}
.me-attention{background:#FFF4E5; border-left:4px solid #C0492E}
.me-attention .me-encadre-titre{color:#9A3412}

/* Une pièce imprimée depuis un écran qui n'a pas de zone d'impression :
   la zone est posée à part, et seule elle sort à l'imprimante. */
.zone-impression-volante{display:none}
@media print{
  body.impr-piece > *:not(.zone-impression-volante){display:none !important}
  body.impr-piece > .zone-impression-volante{display:block !important}
}

/* ===========================================================
   Dimensionnement pièce par pièce (dimensionnement.js)
   Téléphone d'abord : les champs passent sur deux colonnes, puis
   une seule ; aucune hauteur liée à la fenêtre (Safari).
   =========================================================== */
.dim-pieces{display:grid; gap:.8rem}
.dim-piece{border:1px solid var(--trait); border-radius:12px; padding:.75rem; background:#FBFCFD}
.dim-champs{display:grid; gap:.55rem .7rem; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); align-items:end}
.dim-champs-larges{grid-template-columns:repeat(auto-fit, minmax(240px, 1fr))}
.dim-champs input, .dim-champs select{font-size:16px; width:100%}
.dim-piece-actions{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-top:.7rem}
.dim-retenue{display:flex; gap:.4rem; align-items:center; margin:0 auto 0 0; font-size:.9rem; color:var(--texte)}
.dim-retenue input{width:22px; height:22px; accent-color:var(--orange)}
.dim-resultats{display:grid; gap:.8rem; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr))}
.dim-res-piece{border:1px solid var(--trait); border-radius:12px; padding:.75rem}
.dim-res-piece details summary{cursor:pointer}
.dim-terrain-piece + .dim-terrain-piece{margin-top:.8rem}
.carte .dim-terrain-piece{padding-top:.2rem}
.barre-pieces{display:flex; gap:.4rem 1rem; align-items:center; flex-wrap:wrap; margin:.2rem 0 .7rem}

/* Le devis regroupé par pièce : une ligne de titre et de sous-total par pièce */
.ligne-groupe, .ligne-groupe td{background:var(--orange-clair); font-weight:600}
.groupe-entete{display:flex; justify-content:space-between; gap:.3rem 1rem; flex-wrap:wrap}
.piece-ligne{display:flex; align-items:center; gap:.4rem; margin:.35rem 0 0; font-size:.78rem}
.piece-ligne select{width:auto; max-width:100%; padding:.3rem .5rem; font-size:16px; font-weight:400}
.ligne-sous-total td{border-top:1px solid var(--trait); color:var(--texte-doux)}

@media (max-width: 700px){
  .dim-champs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .dim-champs-larges{grid-template-columns:minmax(0,1fr)}
  .dim-resultats{grid-template-columns:1fr}
  .dim-piece-actions .btn{flex:1 1 auto}
}
@media (max-width: 340px){
  .dim-champs{grid-template-columns:1fr}
}

/* ===========================================================
   Métiers du chantier et électricité de la maison (electricite.js)
   Ajouté le 06/10/2026. Cases de 22 px, champs de 16 px (Safari ne
   zoome pas), aucune hauteur liée à la fenêtre.
   =========================================================== */
.elc-metiers{display:grid; gap:0 1rem; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); margin-bottom:.4rem}
.elc-metier{border-bottom:0; align-items:center}
.elc-metier input{width:22px; height:22px}
.elc-bientot .check-txt{color:var(--texte-doux)}
.metiers-assistants{display:flex; gap:.5rem; flex-wrap:wrap; margin:.3rem 0 .5rem}
.elc-questions{margin-top:.7rem; padding-top:.6rem; border-top:1px dashed var(--trait)}
.elc-q-titre{font-weight:600; font-size:.9rem; margin-bottom:.35rem}
.elc-cases{display:grid; gap:.2rem .8rem; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr))}
.elc-case{display:flex; gap:.5rem; align-items:center; font-size:.92rem; padding:.3rem 0; min-height:40px; color:var(--texte)}
.elc-case input{width:22px; height:22px; flex:0 0 auto; accent-color:var(--orange)}
.elc-marque{display:inline-block; font-size:.72rem; font-weight:600; padding:0 .4rem; border-radius:999px; white-space:nowrap}
.elc-v{background:#E3F2EC; color:var(--vert)}
.elc-nv{background:var(--orange-clair); color:#9A4A05}
.elc-explication{color:#9A4A05; font-size:.82rem}
.elc-schema td, .elc-schema th{vertical-align:top}
.elc-champs{grid-template-columns:repeat(auto-fill, minmax(190px, 1fr))}
@media (max-width: 700px){
  .elc-champs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .elc-cases{grid-template-columns:1fr}
  .elc-metiers{grid-template-columns:1fr}
  .metiers-assistants .btn{flex:1 1 100%; white-space:normal}
}
@media (max-width: 620px){
  .elc-schema.tbl-cartes td[data-libelle="Désignation"]{display:block}
  .elc-schema.tbl-cartes td[data-libelle="Désignation"]::before{display:block; margin-bottom:.2rem}
}
@media (max-width: 340px){
  .elc-champs{grid-template-columns:1fr}
}

/* ---------- Prix par fournisseur (fournisseurs.js) ---------- */
.fo-prix{display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.35rem}
.fo-puce{display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:.3rem; padding:.2rem .55rem;
  border:1px solid var(--trait); border-radius:999px; background:#fff; color:var(--texte);
  font:inherit; font-size:.78rem; cursor:pointer; text-align:left; max-width:100%}
.fo-puce strong{font-weight:500}
.fo-puce.fo-retenu{border-color:var(--texte); font-weight:700}
.fo-puce.fo-retenu strong{font-weight:800}
.fo-puce.fo-ancien{background:#FFF1E3; border-color:#F2B27A; color:#8A4304}
.fo-date{color:var(--texte-doux); font-size:.72rem}
.fo-puce.fo-ancien .fo-date{color:#8A4304}
.fo-ecart{font-size:.72rem; font-weight:600}
.fo-ancien-texte{color:#8A4304; font-size:.75rem}
.fo-alerte{background:#FFF1E3; color:#7A3B03; border-radius:10px; padding:.5rem .7rem}
.fo-alerte ul{margin:.2rem 0 0 1rem; padding:0}
input.fo-douteux{border-color:#E8710A; background:#FFF1E3}
.fo-modes{display:flex; gap:.5rem; flex-wrap:wrap; margin:.2rem 0 .9rem}
.fo-liste-f{display:flex; flex-wrap:wrap; gap:.4rem}
.fo-liste-f .pastille{display:inline-flex; align-items:center; gap:.25rem}
.fo-retirer{border:0; background:transparent; color:var(--texte-doux); cursor:pointer; font:inherit;
  padding:.1rem .3rem; min-width:28px; min-height:28px}
.fo-barre{padding-top:.7rem; padding-bottom:.7rem}
@media (max-width: 700px){
  .fo-puce{font-size:.85rem; padding:.35rem .65rem}
  .fo-retirer{min-width:36px; min-height:36px}
}

/* Ligne tapée à la main (28/10/2026) */
.ligne-main{margin-top:.8rem;padding:.8rem;border:1px dashed var(--bord, #d6dde2);border-radius:12px;background:#FFFBF2}
.ligne-main-titre{font-weight:700;margin-bottom:.5rem}
.ligne-main-champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.5rem;margin-bottom:.6rem}
.ligne-main-champs .lm-des{grid-column:1/-1}
.ligne-main-champs label{display:flex;flex-direction:column;gap:.2rem;font-size:.85rem}

/* ===== Mode simple (28/10/2026) : gros caractères, gros boutons ===== */
.btn-mode-simple{margin-left:.5rem;white-space:nowrap}
.simple{max-width:760px;margin:0 auto;font-size:1.15rem}
.simple-titre{font-size:1.9rem;margin:.4rem 0 .6rem}
.simple-sous{font-size:1rem;margin-bottom:1rem}
.simple-gros{display:block;width:100%;font-size:1.25rem;font-weight:700;padding:1rem 1.2rem;border-radius:16px;border:2px solid var(--bord,#d6dde2);background:#fff;cursor:pointer;margin:.7rem 0}
.simple-gros.simple-plein{background:var(--accent,#E8710A);border-color:var(--accent,#E8710A);color:#fff}
.simple-gros:disabled{opacity:.45}
.simple-retour{font-size:1.1rem;font-weight:700;background:none;border:0;color:var(--accent,#E8710A);padding:.4rem 0;cursor:pointer}
.simple-carte{display:flex;flex-direction:column;gap:.25rem;width:100%;text-align:left;background:#fff;border:2px solid var(--bord,#d6dde2);border-radius:16px;padding:1rem;margin:.6rem 0;cursor:pointer;font:inherit}
.simple-carte-nom{font-size:1.3rem;font-weight:800}
.simple-carte-adr{color:#5B6B73}
.simple-carte-bas{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-top:.3rem}
.simple-vide{padding:1.2rem;text-align:center;color:#5B6B73;background:#fff;border-radius:14px}
.simple-champ{display:flex;flex-direction:column;gap:.35rem;font-weight:700;margin:.8rem 0}
.simple-champ input{font-size:1.25rem;padding:.85rem 1rem;border-radius:14px;border:2px solid var(--bord,#d6dde2)}
.simple-choix{display:flex;flex-wrap:wrap;gap:.5rem}
.simple-choix button{font:inherit;font-size:1.05rem;font-weight:700;padding:.75rem 1rem;border-radius:999px;border:2px solid var(--bord,#d6dde2);background:#fff;cursor:pointer}
.simple-choix button.on{background:#1F2A33;border-color:#1F2A33;color:#fff}
.simple-statuts button.on.st-accepte{background:#187860;border-color:#187860}
.simple-statuts button.on.st-refuse{background:#C0392B;border-color:#C0392B}
.simple-statuts button.on.st-sansuite{background:#7A868E;border-color:#7A868E}
.simple-statuts button.on.st-envoye{background:#1F6FB2;border-color:#1F6FB2}
.simple-bloc{background:#fff;border-radius:16px;padding:.8rem 1rem;margin:.8rem 0;border:1px solid var(--bord,#e3e8eb)}
.simple-propositions{display:flex;flex-direction:column;gap:.4rem}
.simple-prop{display:flex;justify-content:space-between;align-items:center;gap:.8rem;text-align:left;font:inherit;font-size:1.05rem;padding:.8rem 1rem;border-radius:14px;border:2px solid #CFE6DD;background:#F2FAF7;cursor:pointer}
.simple-main{margin-top:.8rem;padding:.8rem;border:2px dashed var(--bord,#d6dde2);border-radius:14px;background:#FFFBF2}
.simple-main-titre{font-weight:700;margin-bottom:.5rem}
.simple-main-champs{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.simple-main-champs label{display:flex;flex-direction:column;gap:.25rem;font-size:.95rem;font-weight:700}
.simple-main-champs input{font-size:1.2rem;padding:.7rem;border-radius:12px;border:2px solid var(--bord,#d6dde2);min-width:0}
.simple-ligne{padding:.8rem 0;border-bottom:1px solid #eef1f3}
.simple-ligne:last-child{border-bottom:0}
.simple-ligne-des{font-weight:800;font-size:1.15rem;margin-bottom:.5rem}
.simple-ligne-chiffres{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem}
.simple-qte{display:flex;align-items:center;gap:.4rem}
.simple-qte button{width:48px;height:48px;font-size:1.6rem;font-weight:800;border-radius:12px;border:2px solid var(--bord,#d6dde2);background:#fff;cursor:pointer}
.simple-qte input{width:70px;font-size:1.25rem;text-align:center;padding:.55rem;border-radius:12px;border:2px solid var(--bord,#d6dde2)}
.simple-pu{display:flex;flex-direction:column;font-size:.85rem;font-weight:700}
.simple-pu input{width:120px;font-size:1.15rem;padding:.55rem;border-radius:12px;border:2px solid var(--bord,#d6dde2)}
.simple-total{font-size:1.25rem;margin-left:auto}
.simple-suppr{width:44px;height:44px;border-radius:12px;border:2px solid #F0C9C4;background:#FBEAE8;color:#C0392B;font-size:1.2rem;cursor:pointer}
.simple-totaux div{display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:.4rem 0;flex-wrap:wrap}
.simple-tva{display:inline-flex;margin-left:.4rem}
.simple-tva button{padding:.4rem .7rem;font-size:.95rem}
.simple-ttc{font-size:1.5rem;border-top:2px solid #1F2A33;margin-top:.3rem}
.simple-msg{color:#C0392B;font-weight:700;min-height:1.2rem}
@media (max-width:520px){.simple-main-champs{grid-template-columns:1fr 1fr}.simple-main-champs label:last-child{grid-column:1/-1}.simple-total{margin-left:0}}

/* La messagerie de l'équipe (28/10/2026) */
.mess-conv{display:flex; justify-content:space-between; align-items:center; gap:.6rem; width:100%;
  text-align:left; background:var(--fond, #F6F8FA); border:1px solid #E3E8EC; border-radius:14px;
  padding:.7rem .9rem; margin:.3rem 0; font:inherit; color:inherit; cursor:pointer}
.mess-conv:hover{border-color:var(--orange)}
.mess-nb{display:inline-block; margin-left:.35rem; min-width:1.2rem; padding:0 .35rem; border-radius:999px;
  background:var(--rouge, #C0392B); color:#FFF; font-size:.72rem; font-weight:700; line-height:1.2rem; text-align:center}

/* Un bouton qui se lit comme un lien, dans une ligne de texte (28/10/2026) */
.btn-lien{background:none; border:0; padding:0; font:inherit; color:var(--orange); text-decoration:underline; cursor:pointer}
.simple-prix{display:flex; gap:.5rem; flex-wrap:wrap; align-items:flex-end}
.simple-prix label{display:flex; flex-direction:column; font-size:.82rem; color:var(--doux, #5B6770)}
.simple-prix input{max-width:120px}

/* Les dossiers des fournisseurs (28/10/2026) */
.df-dossier{min-height:auto; padding:.8rem}
.df-dossier.actif{border-color:var(--orange); box-shadow:0 0 0 2px var(--orange-clair)}

/* La comparaison des fournisseurs, article par article (28/10/2026) */
.cmp-four{display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; margin:.35rem 0 .2rem; font-size:.85rem}
.cmp-chip{border:1px solid #D5DCE1; background:#FFF; border-radius:999px; padding:.25rem .65rem; font:inherit; color:inherit; cursor:pointer; text-align:left}
.cmp-chip small{color:var(--doux, #5B6770); margin-left:.2rem}
.cmp-chip.on{border-color:var(--vert); background:#E3F3EE}
.cmp-moins{color:var(--vert); font-weight:600}

/* Les pages photographiées d'un devis fournisseur (28/10/2026) */
.df-pages{display:flex; flex-wrap:wrap; gap:.5rem}
.df-page{position:relative; width:84px; text-align:center; font-size:.75rem; color:var(--doux, #5B6770)}
.df-page img, .df-page-pdf{display:block; width:84px; height:110px; object-fit:cover; border:1px solid #D5DCE1; border-radius:8px; background:#FFF}
.df-page-pdf{display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--rouge)}
.df-page-x{position:absolute; top:-6px; right:-6px; width:24px; height:24px; border-radius:50%; border:1px solid #D5DCE1; background:#FFF; cursor:pointer; line-height:1; padding:0}

.cmp-chip.vide{border-style:dashed; color:var(--doux, #5B6770)}
.cmp-chip.vide.on{border-style:solid; color:inherit}

/* Les devis fournisseurs d'un chantier, sur son devis (28/10/2026) */
.of-offre{border:1px solid #E3E8EC; border-radius:14px; padding:.6rem .8rem; margin:.5rem 0; background:#FFF}
.of-tete{margin-bottom:.35rem}
.of-ligne{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; padding:.45rem 0; border-top:1px solid #EDF0F2}
.of-des{flex:1 1 220px}
.of-ailleurs{font-size:.82rem; margin-top:.15rem}
.of-prix{white-space:nowrap}

.of-details summary{cursor:pointer; color:var(--orange); font-weight:600; padding:.3rem 0}

/* Une ligne lue « à vérifier » (28/10/2026) */
.fo-doute{color:#9A3412; background:#FFF4E5; border-radius:8px; padding:.25rem .5rem; font-size:.82rem; margin-top:.2rem}
.of-a-verifier{background:#FFFBF5}
.of-a-verifier .of-des input{width:100%}
.of-champ{display:flex; flex-direction:column; font-size:.78rem; color:var(--doux, #5B6770)}
.of-champ input{max-width:100px}

/* Les photos de la visite technique, sur le devis (28/10/2026) */
.visite-photos{display:flex; flex-wrap:wrap; gap:.5rem; margin:.4rem 0}
.visite-photo{padding:0; border:1px solid #D5DCE1; border-radius:10px; overflow:hidden; background:#FFF; cursor:pointer; width:96px; height:96px}
.visite-photo img{width:100%; height:100%; object-fit:cover; display:block}

.of-corresp{display:block; font-size:.78rem; color:var(--doux, #5B6770); margin-top:.25rem}
.of-corresp select{display:block; max-width:100%; font-size:.85rem; margin-top:.1rem}

/* Le contrôle technique du devis (28/10/2026) */
.ctl-remarque{border-top:1px solid #EDF0F2; padding:.5rem 0}

/* La fiche équipement sous une ligne (28/10/2026) */
.equip-ligne{margin:.3rem 0; display:flex; flex-wrap:wrap; gap:.35rem; align-items:center}
.equip-ligne .fo-doute{width:100%}

/* Le DPE du logement (28/10/2026) */
.dpe-bloc{border-top:1px solid #EDF0F2; margin-top:.6rem; padding-top:.6rem}
.dpe-classe{display:inline-block; min-width:1.6rem; text-align:center; border-radius:6px; color:#FFF; font-weight:800; padding:.05rem .35rem; text-shadow:0 0 2px rgba(0,0,0,.35)}

/* L'éligibilité aux aides (28/10/2026) */
.elig-questions{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:.5rem .9rem; margin:.4rem 0}
.elig-q{display:flex; flex-direction:column; gap:.2rem; font-size:.88rem}
.elig-q .simple-choix button{font-size:.85rem; padding:.3rem .6rem}
.elig-faire{margin:.25rem 0 0 1.1rem; font-size:.85rem}

.dim-res-liaison{margin:.4rem 0; font-size:.88rem; display:flex; flex-wrap:wrap; gap:.35rem; align-items:center}
.dim-res-liaison select{width:auto}

/* La lecture de notice (28/10/2026) */
.notice-bloc{border:1px dashed #C9D2D9; border-radius:12px; padding:.6rem .8rem; margin:.4rem 0 .7rem}
.notice-lu{margin-top:.5rem}
.notice-valeurs{display:flex; flex-wrap:wrap; gap:.3rem .9rem; font-size:.88rem; margin:.3rem 0 .5rem}

/* Le détail d'une désignation : fiche équipement et fournitures référencées (28/10/2026) */
.desig-detail{font-size:.8em; color:#3A4650; margin-top:.15rem; line-height:1.35}
.desig-detail div::before{content:"– "; color:#8A96A0}

/* Le choix de la marque et du modèle (28/10/2026) */
.kit-liste{display:flex; flex-direction:column; gap:.4rem}
.kit-choix{display:flex; flex-direction:column; align-items:flex-start; gap:.1rem; text-align:left; border:1px solid #D5DCE1; border-radius:12px; padding:.55rem .75rem; background:#FFF; font:inherit; cursor:pointer}
.kit-choix:hover{border-color:var(--orange)}
.kit-cat{margin-top:.9rem; padding-top:.7rem; border-top:1px solid #E3E8EC; display:flex; flex-direction:column; gap:.4rem}
.kit-cat input{width:100%; box-sizing:border-box; font-size:16px}
#modale .kit-liste{max-height:22rem; overflow-y:auto}

/* Fournitures par marque (28/10/2026) */
.pm-marque{border:1px solid #E3E8EC; border-radius:12px; padding:.3rem .6rem; margin-bottom:.35rem; background:#FFF}
.pm-marque summary{cursor:pointer; padding:.25rem 0}
.pm-art{display:flex; justify-content:space-between; gap:.6rem; width:100%; text-align:left; border:0; border-top:1px solid #F0F2F4; background:none; padding:.45rem .2rem; font:inherit; cursor:pointer}
.pm-art:hover{background:#FFF7EE}
.pm-art strong{white-space:nowrap}

/* Les trois blocs du devis en création (28/10/2026) */
.simple-bloc-titre{font-family:'Righteous',sans-serif; font-size:1.05rem; color:var(--orange,#D86000); margin:1rem 0 .3rem; padding-bottom:.2rem; border-bottom:2px solid #F3E2D3}
.simple-bloc-titre:first-child{margin-top:.2rem}
.simple-remplace{display:flex; justify-content:space-between; align-items:center; gap:.6rem; background:#FFF4E5; border:1px solid #F5C58A; border-radius:12px; padding:.6rem .8rem; margin-bottom:.5rem}
.ligne-sous-groupe td{padding:.25rem .5rem; color:#55606A; border-bottom:1px solid #EEE}

/* Les puces de la barre de recherche (28/10/2026) */
.pm-puces{display:flex; gap:.35rem; overflow-x:auto; padding:.45rem 0 .1rem; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.pm-puces::-webkit-scrollbar{display:none}
.pm-puce{flex:0 0 auto; border:1px solid #D5DCE1; background:#FFF; border-radius:999px; padding:.35rem .8rem; font:inherit; font-size:.9rem; font-weight:600; color:#2B3640; cursor:pointer}
.pm-puce.on{background:#187860; border-color:#187860; color:#FFF}
.pm-puces-marques .pm-puce{font-weight:500}
.pm-puces-marques .pm-puce.on{background:#D86000; border-color:#D86000}

/* La composition d'une ligne, dans le détail des prix (28/10/2026) */
.compo{border:1px solid #E3E8EC; border-radius:12px; padding:.6rem .7rem; margin-bottom:.8rem; background:#FAFBFC}
.compo-ligne{display:flex; align-items:center; gap:.4rem; padding:.3rem 0; border-top:1px solid #EEF1F3}
.compo-des{flex:1; min-width:0}
.compo-q{width:64px; text-align:right; font-size:16px}
.compo-suppr{border:1px solid #F1C2BC; background:#FFF5F4; color:#B42318; border-radius:10px; width:36px; height:36px; font-size:1rem; cursor:pointer}
.compo-ajout{margin-top:.5rem}
.compo-ajout input#compoTexte{width:100%; box-sizing:border-box; font-size:16px}
.compo-libre{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-top:.4rem}

/* Chaque ligne du devis bien détachée des autres (28/10/2026) : Aziz veut
   « une séparation des lignes beaucoup plus flagrante ». */
.simple-ligne{background:#FFF; border:1px solid #D5DCE1; border-left:6px solid #187860; border-radius:14px; padding:.9rem 1rem; margin:0 0 .9rem; box-shadow:0 1px 3px rgba(16,24,40,.07)}
.simple-ligne:last-child{border-bottom:1px solid #D5DCE1}
.simple-ligne.simple-mo{border-left-color:#D86000}
body.theme-dark .simple-ligne{background:#1E2329; border-color:#3A424B; border-left-color:#2FA383}
.tbl-cartes tr:not(.ligne-groupe):not(:first-child) td{border-bottom:2px solid #D5DCE1}
.tbl-cartes tr.ligne-groupe td{background:#F2F7F5; border-top:2px solid #187860}
.ligne-groupe td strong{font-size:1.02rem}
.simple-ligne.bloc-mat{border-left-color:#1F6FB2}
.simple-ligne.bloc-serv{border-left-color:#D86000}

/* D'où vient un article lu sur un devis fournisseur (28/10/2026) */
.origine-art{display:inline-block; font-size:.78rem; font-weight:600; color:#1F6FB2; background:#EAF2FA; border-radius:999px; padding:.05rem .55rem; margin-left:.3rem; vertical-align:middle}

/* Des lignes plus basses, sans vide à droite (28/10/2026) : Aziz trouve les
   lignes « trop hautes, avec trop de vide sur la droite ». Les boutons d'une
   ligne se rangent côte à côte ; les alertes passent dessous, sur toute la
   largeur ; sur un grand écran les chiffres se mettent à droite. */
.sl-outils{display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .4rem; margin:.25rem 0 .45rem}
.sl-outils .equip-ligne{display:contents}
.sl-outils > .cmp-four{flex-basis:100%; margin:0}
.sl-outils .cmp-chip{order:10; margin:0}
.sl-outils .equip-ligne > span.doux, .sl-outils .equip-ligne > .desig-detail{order:15; flex-basis:100%; margin:0}
.sl-outils .fo-doute{order:20; flex-basis:100%; margin:0}
.simple-ligne{padding:.7rem .9rem; margin-bottom:.6rem}
.simple-ligne-des{font-size:1.05rem; margin-bottom:.25rem}
.simple-ligne .simple-qte button{width:40px; height:40px; font-size:1.3rem}
.simple-ligne .simple-qte input{width:60px; font-size:1.1rem; padding:.4rem}
.simple-ligne .simple-prix input{padding:.4rem .5rem}
/* Grand écran (tablette en paysage, ordinateur) : le devis prend la largeur */
@media (min-width:1000px){
  .simple{max-width:1120px}
}
.sl-outils .cmp-chip{font-size:.88rem; padding:.3rem .75rem; line-height:1.3}
.sl-outils .cmp-four .cmp-chip{font-size:.82rem}

/* ===========================================================
   LE DEVIS IMPRIMÉ (28/10/2026)
   =========================================================== */
.devis-doc{--dv:#0B6FB8; font-size:.86rem; color:#1F2A33; line-height:1.4}
.devis-doc .dv-tete{display:flex; justify-content:space-between; align-items:stretch; gap:1.5rem; padding-bottom:.9rem; border-bottom:3px solid var(--dv); margin-bottom:1rem}
.devis-doc .dv-ent{display:flex; gap:.9rem; align-items:flex-start}
.devis-doc .dv-logo{max-width:120px; max-height:80px; object-fit:contain}
.devis-doc .dv-ent-nom{font-size:1.25rem; font-weight:800; letter-spacing:.02em}
.devis-doc .dv-ent-coord{color:#55606A; font-size:.8rem; line-height:1.45}
.devis-doc .dv-titre{text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:.1rem}
.devis-doc .dv-mot{font-size:1.9rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--dv); line-height:1}
.devis-doc .dv-ref{font-weight:700; font-size:1rem}
.devis-doc .dv-dates{color:#55606A; font-size:.8rem}
.devis-doc .dv-visite{margin-top:.3rem; border:1.5px solid #1F2A33; border-radius:6px; padding:.1rem .5rem; font-weight:700; font-size:.8rem}
.devis-doc .dv-parties{display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-bottom:1rem}
.devis-doc .dv-cadre{border:1px solid #D5DCE1; border-radius:8px; padding:.55rem .75rem; line-height:1.45}
.devis-doc .dv-etiq{font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--dv); margin-bottom:.15rem}
.devis-doc .dv-table{width:100%; border-collapse:collapse}
.devis-doc .dv-table th{background:#1F2A33; color:#FFF; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; padding:.45rem .5rem; text-align:left; font-weight:700}
.devis-doc .dv-table th.num{text-align:right}
.devis-doc .dv-table td{padding:.45rem .5rem; vertical-align:top; border-bottom:1px solid #E3E8EC}
.devis-doc .dv-table td.num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.devis-doc .dv-table tr{page-break-inside:avoid; break-inside:avoid}
.devis-doc .dv-partie td{background:#EAF4FB; border-bottom:2px solid var(--dv); padding:.9rem .5rem .3rem; font-weight:800; font-size:.92rem; text-transform:uppercase; letter-spacing:.04em; color:#1F2A33}
.devis-doc .dv-num{display:inline-block; min-width:1.4rem; height:1.4rem; line-height:1.4rem; text-align:center; border-radius:50%; background:var(--dv); color:#FFF; font-size:.75rem; margin-right:.5rem}
.devis-doc .dv-sous-total td{border-bottom:0; text-align:right; font-weight:700; color:#55606A; font-size:.8rem; padding-top:.3rem}
.devis-doc .dv-lib{font-weight:600}
.devis-doc .dv-equip .dv-lib{font-weight:800}
.devis-doc .ligne-mo td{background:none}
.devis-doc .eq-fiche{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.4rem .9rem; margin:.4rem 0 .1rem; padding:.5rem .65rem; background:#F6F8F9; border-left:3px solid var(--dv); border-radius:4px; font-size:.76rem}
.devis-doc .eq-fiche div{display:flex; flex-direction:column; min-width:0}
.devis-doc .eq-fiche span{color:#6B7680; font-size:.66rem; text-transform:uppercase; letter-spacing:.05em}
.devis-doc .eq-fiche strong{font-weight:700; overflow-wrap:anywhere}
.devis-doc .desig-detail{font-size:.76rem; color:#55606A}
.devis-doc .dv-bas{display:flex; justify-content:flex-end; margin-top:.9rem; page-break-inside:avoid; break-inside:avoid}
.devis-doc .dv-totaux{min-width:300px}
.devis-doc .dv-totaux div{display:flex; justify-content:space-between; gap:1rem; padding:.25rem .6rem; font-variant-numeric:tabular-nums}
.devis-doc .dv-ttc{background:var(--dv); color:#FFF; font-weight:800; font-size:1.1rem; border-radius:6px; margin:.3rem 0; padding:.45rem .6rem !important}
.devis-doc .dv-acompte{font-size:.8rem; color:#55606A}
.devis-doc .dv-signatures{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.2rem; page-break-inside:avoid; break-inside:avoid; font-size:.8rem}
.devis-doc .dv-sign{border:1px solid #C9D1D7; border-radius:8px; height:80px; margin-top:.4rem}
.devis-doc .dv-mentions{margin-top:1.2rem; padding-top:.7rem; border-top:1px solid #D5DCE1; color:#55606A; font-size:.72rem; line-height:1.5}
@media print{
  .devis-doc .dv-table th{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  .devis-doc .dv-ttc, .devis-doc .dv-num, .devis-doc .eq-fiche{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  .devis-doc .dv-table thead{display:table-header-group}
}
@media (max-width:600px){ .devis-doc .dv-parties, .devis-doc .dv-signatures{grid-template-columns:1fr} .devis-doc .eq-fiche{grid-template-columns:1fr} }

/* La comparaison des modèles en tableau (28/10/2026) */
.modale.modale-large{width:min(1180px,100%)}
.kit-tab-zone{overflow:auto; max-height:28rem; border:1px solid #E3E8EC; border-radius:10px}
.kit-tab{width:100%; border-collapse:collapse; font-size:.85rem}
.kit-tab th{position:sticky; top:0; background:#1F2A33; color:#FFF; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; padding:.45rem .5rem; text-align:left; white-space:nowrap; z-index:1}
.kit-tab th.num, .kit-tab td.num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.kit-tab td{padding:.4rem .5rem; border-bottom:1px solid #EEF1F3; vertical-align:middle}
.kit-tab tbody tr{cursor:pointer}
.kit-tab tbody tr:hover{background:#FFF7EE}
.kit-tab tbody tr:has(input:checked){background:#EAF6F1}
.kit-tab tr.actuel td:first-child{box-shadow:inset 3px 0 0 #187860}
.kit-tab input[type=radio]{width:20px; height:20px; accent-color:#187860}

/* Le détail sur toute la largeur, et rien de coupé entre deux pages (28/10/2026) */
.devis-doc .dv-bloc{break-inside:avoid; page-break-inside:avoid}
.devis-doc .dv-avec-det td{border-bottom:0; padding-bottom:.15rem}
.devis-doc .dv-det td{padding:0 .5rem .5rem; border-bottom:1px solid #E3E8EC}
.devis-doc .dv-suite{display:flex; flex-wrap:wrap; gap:.1rem .4rem}
.devis-doc .dv-suite span + span::before{content:"·"; margin-right:.4rem; color:#9AA5AE}
.devis-doc .desig-detail.dv-suite div::before, .devis-doc .dv-suite span::after{content:none}
.devis-doc .eq-fiche{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); margin-top:.2rem}

/* La recherche des caractéristiques par l'IA (28/10/2026) */
.eq-ia{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .6rem; margin:0 0 .7rem; padding:.55rem .7rem; border:1px dashed #C9D1D7; border-radius:10px}
.eq-ia #eqIaRes{flex-basis:100%}
.eq-ia-ok{background:#EAF6F1; border-radius:8px; padding:.4rem .6rem; font-size:.85rem}
input.eq-rempli{background:#F2FAF6; border-color:#187860}

/* La marge d'une ligne, modifiable (28/10/2026) */
.simple-prix .simple-marge input{max-width:80px}
.marge-ligne input{width:62px; padding:.1rem .25rem; font-size:.78rem; text-align:right}

/* Le fichier clients (29/10/2026) */
.cli-sugg{display:flex; flex-direction:column; gap:.3rem; margin:-.2rem 0 .6rem}
.cli-sugg-ligne{display:flex; flex-direction:column; align-items:flex-start; text-align:left; border:1px solid #D5DCE1; border-radius:10px; padding:.45rem .65rem; background:#FFF; font:inherit; cursor:pointer}
.cli-sugg-ligne:hover{border-color:#D86000}
.cli-ok{background:#EAF6F1; border-radius:8px; padding:.4rem .6rem; font-size:.88rem; margin:-.2rem 0 .6rem}
.cli-liste{display:flex; flex-direction:column; gap:.5rem}
.cli-carte{display:flex; justify-content:space-between; align-items:center; gap:.8rem; border:1px solid #D5DCE1; border-radius:12px; padding:.6rem .8rem; background:#FFF}
.cli-boutons{display:flex; gap:.4rem; flex-wrap:wrap; justify-content:flex-end}
.pm-plus{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .6rem; padding:.4rem .2rem .2rem; border-top:1px solid #F0F2F4}

/* L'image et le récapitulatif de l'équipement (29/10/2026) */
.eq-image-bloc{display:flex; gap:.8rem; align-items:center; margin:0 0 .7rem; padding:.55rem .7rem; border:1px solid #E3E8EC; border-radius:10px}
.eq-image-bloc img{width:96px; height:96px; object-fit:contain; background:#FFF; border-radius:8px; border:1px solid #EEF1F3}
.eq-fiche-img{display:flex; gap:.7rem; align-items:flex-start}
.eq-fiche-img > img{width:110px; height:110px; object-fit:contain; flex:0 0 auto; background:#FFF; border:1px solid #EEF1F3; border-radius:6px}
.eq-fiche-img > .eq-fiche{flex:1; min-width:0}
.eq-recap{order:15; flex-basis:100%; margin:.2rem 0}
.eq-recap .eq-fiche{display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:.35rem .8rem; padding:.5rem .65rem; background:#F6F8F9; border-left:3px solid #187860; border-radius:6px; font-size:.8rem}
.eq-recap .eq-fiche div{display:flex; flex-direction:column; min-width:0}
.eq-recap .eq-fiche span{color:#6B7680; font-size:.68rem; text-transform:uppercase; letter-spacing:.04em}
.eq-recap .eq-fiche strong{overflow-wrap:anywhere}
.eq-recap .eq-fiche-img > img{width:90px; height:90px}

/* Réunir des lignes en un forfait (29/10/2026) */
.grp-barre{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:0 0 .7rem}
.grp-actif{background:#FFF4E5; border:1px solid #F5C58A; border-radius:12px; padding:.5rem .7rem}
.grp-case{display:inline-flex; align-items:center; gap:.35rem; order:5; font-size:.88rem; font-weight:700; color:#D86000; border:1.5px solid #F5C58A; border-radius:999px; padding:.25rem .7rem; background:#FFF8EF; cursor:pointer}
.grp-case input{width:18px; height:18px; accent-color:#D86000}
.grp-actif{position:sticky; top:.5rem; z-index:5; box-shadow:0 4px 14px rgba(16,24,40,.12)}
.grp-champ{display:flex; flex-direction:column; font-size:.78rem; color:#55606A; flex:1 1 260px}
.grp-champ input{font-size:16px; padding:.4rem .55rem}
.grp-prix{flex:0 1 160px}

/* La désignation modifiable sur place (29/10/2026) */
textarea.lib-ligne{display:block; width:100%; box-sizing:border-box; font:inherit; font-weight:800; color:inherit; background:transparent; border:1px dashed transparent; border-radius:8px; padding:.15rem .3rem; margin:-.15rem -.3rem; resize:none; field-sizing:content; min-height:1.6em; overflow:hidden}
textarea.lib-ligne:hover{border-color:#D5DCE1; background:#FAFBFC}
textarea.lib-ligne:focus{outline:none; border-color:#D86000; background:#FFF}
.td-titre textarea.lib-ligne{font-weight:600}

/* Le devis en bleu frigorifique (29/10/2026) */
.devis-doc .dv-table th{background:#0A3D62}
.devis-doc .dv-partie td{color:#0A3D62}
.devis-doc .eq-fiche{background:#F1F7FC}
.devis-doc .dv-cadre{border-color:#C9DDEE}
.devis-doc .ligne-sous-groupe td{color:#0A3D62}

/* Une partie du devis d'un seul tenant à l'impression (29/10/2026) */
.devis-doc .dv-section{break-inside:avoid; page-break-inside:avoid}
.devis-doc .dv-avec-det{break-after:avoid; page-break-after:avoid}
.devis-doc .dv-partie{break-after:avoid; page-break-after:avoid}

/* Comparer des appareils (29/10/2026) */
.kit-tab input[type=checkbox]{width:20px; height:20px; accent-color:#0B6FB8}
.cmp-app td{min-width:150px}
.cmp-app td.cmp-mieux{background:#E6F4EC; font-weight:700; color:#0F5132}
.cmp-app tbody tr{cursor:default}
.kit-tab-zone:has(.cmp-app){max-height:none}

/* Les notes de 1 à 5 du comparateur (29/10/2026) */
.note-points{display:inline-flex; gap:3px; vertical-align:middle; margin-left:.35rem}
.note-points i{width:9px; height:9px; border-radius:50%; background:#E3E8EC; display:inline-block}
.note-vert i.plein{background:#1E9E5A}
.note-bleu i.plein{background:#0B6FB8}
.note-rouge i.plein{background:#D64545}
.note-legende .note-points{margin:0 .2rem 0 .5rem}
.jauge-globale{height:10px; border-radius:999px; background:#E3E8EC; overflow:hidden; margin-bottom:.2rem}
.jauge-globale span{display:block; height:100%; border-radius:999px}
.jauge-globale.note-vert span{background:#1E9E5A}
.jauge-globale.note-bleu span{background:#0B6FB8}
.jauge-globale.note-rouge span{background:#D64545}
.cmp-globale td{background:#F6F9FC}

input.compo-pu{width:80px; text-align:right; font-size:16px; padding:.15rem .3rem}
input[readonly]{background:#F3F5F7; color:#55606A}

/* Le barème du comparateur (29/10/2026) */
.bareme{margin:0 0 .6rem; border:1px solid #E3E8EC; border-radius:10px; padding:.4rem .7rem; background:#FAFBFC}
.bareme summary{cursor:pointer; font-weight:700; color:#0B6FB8}
.bareme-tab{width:100%; border-collapse:collapse; font-size:.85rem; margin-top:.4rem}
.bareme-tab td{padding:.3rem .4rem; border-top:1px solid #EEF1F3; vertical-align:top}
.bareme-tab td:first-child{font-weight:700; white-space:nowrap; width:1%}

/* Une police plus petite pour le devis et la facture (29/10/2026) */
.devis-doc{font-size:.76rem; line-height:1.35}
.devis-doc .dv-ent-nom{font-size:1.1rem}
.devis-doc .dv-mot{font-size:1.6rem}
.devis-doc .dv-table th{font-size:.64rem; padding:.35rem .45rem}
.devis-doc .dv-table td{padding:.32rem .45rem}
.devis-doc .dv-partie td{font-size:.82rem; padding:.6rem .45rem .25rem}
.devis-doc .desig-detail{font-size:.7rem}
.devis-doc .eq-fiche{font-size:.7rem; padding:.35rem .5rem}
.devis-doc .dv-ttc{font-size:1rem}
.devis-doc .dv-mentions{font-size:.66rem}
.devis-doc .dv-bloc{break-inside:avoid; page-break-inside:avoid}

/* Blocs du devis qui s'ouvrent et se ferment comme des fenêtres (29/10/2026) */
.bloc-plier{display:flex; align-items:center; gap:.6rem; width:100%; min-height:44px; padding:.35rem .2rem; background:none; border:0;
  font:inherit; color:inherit; text-align:left; cursor:pointer; flex-wrap:wrap}
.bloc-plier .bp-fleche{width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:8px solid currentColor;
  transition:transform .15s; flex:none}
.bloc-plier.ferme .bp-fleche{transform:rotate(-90deg)}
.bloc-plier .bp-titre{font-weight:700; font-size:1.02rem}
.bloc-plier .bp-info{margin-left:auto; font-family:'Mulish',sans-serif; font-size:.85rem; font-weight:600; color:var(--doux,#5B6770)}
.bloc-plier .bp-action{font-family:'Mulish',sans-serif; font-size:.8rem; font-weight:700; border:1px solid currentColor; border-radius:999px; padding:.15rem .7rem}
.simple-bloc-titre .bloc-plier .bp-titre{font-family:'Righteous',sans-serif; font-weight:400}
.fam-coche{display:flex; align-items:flex-start; gap:.55rem; padding:.5rem .6rem; border:1px solid var(--trait); border-radius:10px; margin-bottom:.3rem; cursor:pointer; min-height:44px; box-sizing:border-box}
.fam-coche input{width:20px; height:20px; flex:none; margin-top:.1rem}
.fam-coche.on{border-color:#187860; background:#F2F7F5}

/* Garantie du fabricant relevée, sous la case de la fiche équipement (29/10/2026) */
.gar-aide{margin-top:.4rem; padding:.5rem .7rem; border:1px solid var(--trait); border-radius:10px; background:#F4F8FB; font-size:.85rem; display:grid; gap:.2rem}

/* Onglets Catalogues / Comparer de la bibliothèque (29/10/2026) */
.cat-onglets, .cmpb-modes{display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.7rem}
.cat-onglets button, .cmpb-modes button{font:inherit; font-weight:700; min-height:44px; padding:.4rem 1rem; border-radius:999px; border:1px solid var(--trait); background:#fff; color:inherit; cursor:pointer}
.cat-onglets button{font-family:'Righteous',sans-serif; font-weight:400; font-size:1.05rem}
.cat-onglets button.on, .cmpb-modes button.on{background:#187860; border-color:#187860; color:#fff}
.cmpb-ctx{display:flex; gap:.6rem; flex-wrap:wrap; align-items:flex-end; margin-bottom:.7rem; padding:.6rem .7rem; border:1px solid var(--trait); border-radius:12px; background:#F4F8FB}
.cmpb-ctx > div{display:flex; flex-direction:column; gap:.2rem; min-width:0}
.cmpb-ctx select{max-width:100%; font-size:16px}
.cmpb-ajout{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:.8rem; margin-bottom:.6rem}
.cmpb-col{display:flex; flex-direction:column; gap:.4rem; min-width:0; padding:.6rem .7rem; border:1px solid var(--trait); border-radius:12px}
.cmpb-res{display:flex; flex-direction:column; gap:.25rem; max-height:320px; overflow:auto}
.cmpb-res button{display:grid; grid-template-columns:1fr auto; gap:.1rem .5rem; text-align:left; font:inherit; padding:.45rem .6rem; min-height:44px; border:1px solid var(--trait); border-radius:10px; background:#fff; cursor:pointer}
.cmpb-res button .doux{grid-column:1}
.cmpb-res button .cmpb-plus{grid-column:2; grid-row:1 / span 2; align-self:center; font-weight:700; color:#187860; font-size:1.2rem}
.cmpb-res button:disabled{opacity:.55; cursor:default}
.cmpb-marques{display:flex; gap:.3rem; flex-wrap:wrap}
.cmpb-marques .cmp-chip.on{background:#187860; border-color:#187860; color:#fff}
.cmpb-sel{display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; margin:.4rem 0 .6rem}
.cmpb-pill{display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .3rem .2rem .7rem; border-radius:999px; background:#E8F2EE; border:1px solid #187860; font-size:.85rem}
.cmpb-pill button{border:0; background:none; font:inherit; cursor:pointer; min-width:32px; min-height:32px}
.cmpb-res button{flex:none}
.cmpb-col .btn{white-space:normal; height:auto; text-align:center}

/* Calculs : l'appareil cherché dans la bibliothèque, l'explication des tables (29/10/2026) */
.calc-app{grid-column:1 / -1}
.calc-app-choisi{padding:.45rem .6rem; border:1px solid #187860; border-radius:10px; background:#F2F7F5; margin-bottom:.35rem}
.calc-app-liste{display:flex; flex-direction:column; gap:.2rem; max-height:300px; overflow:auto; margin-top:.35rem; border:1px solid var(--trait); border-radius:10px; padding:.3rem}
.calc-app-groupe{font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--doux,#5B6770); margin:.35rem .2rem .1rem}
.calc-app-item{flex:none; display:flex; flex-direction:column; align-items:flex-start; gap:.05rem; text-align:left; font:inherit; min-height:44px; padding:.35rem .55rem; border:1px solid transparent; border-radius:8px; background:#fff; cursor:pointer}
.calc-app-item:hover{background:#F4F8FB}
.calc-app-item.on{border-color:#187860; background:#E8F2EE}
.calc-app-item .doux{font-size:.78rem}
.calc-expl{margin-top:.3rem; font-size:.85rem}
.calc-expl summary{cursor:pointer; color:#0B6FB8; font-weight:600; min-height:32px; display:flex; align-items:center}
.calc-expl div{padding:.4rem .6rem; background:#F4F8FB; border-radius:8px; line-height:1.45}

/* Fiche d'un article du catalogue (29/10/2026) */
.cat-ligne{cursor:pointer}
.cat-ligne:hover td{background:#F4F8FB}
.cat-fiche{display:grid; grid-template-columns:minmax(200px, 280px) 1fr; gap:1rem; align-items:start}
@media (max-width:700px){ .cat-fiche{grid-template-columns:1fr} }
.cat-fiche-img{display:flex; flex-direction:column; gap:.4rem; align-items:flex-start}
.cat-fiche-img img{width:100%; max-width:280px; border:1px solid var(--trait); border-radius:12px; background:#fff}
.cat-fiche-sans{width:100%; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; border:1px dashed var(--trait); border-radius:12px; color:var(--doux,#5B6770); font-size:.85rem}
.cat-fiche-tab{width:100%; border-collapse:collapse; font-size:.9rem}
.cat-fiche-tab th{text-align:left; font-weight:600; color:var(--doux,#5B6770); padding:.3rem .5rem .3rem 0; width:42%; vertical-align:top}
.cat-fiche-tab td{padding:.3rem 0; border-bottom:1px solid #EEF1F3}

/* Comparateur : lire les notes (29/10/2026) */
.cmp-lecture{margin:.2rem 0 .6rem; padding:.5rem .7rem; border-radius:10px; background:#F4F8FB; font-size:.88rem; line-height:1.5}
.cmp-app thead th{vertical-align:bottom}
.cmp-col-marque{display:block; font-size:.95rem}
.cmp-col-modele{display:block; font-size:.72rem; font-weight:500; text-transform:none; letter-spacing:0; opacity:.85; margin-top:.15rem}
.cmp-app td.cmp-meilleur{background:#E6F4EC}

/* Choisir un appareil selon le besoin (29/10/2026) */
.bs-form{display:flex; flex-direction:column; gap:.6rem; padding:.7rem; border:1px solid var(--trait); border-radius:12px; margin-bottom:.6rem}
.bs-ligne{display:flex; flex-wrap:wrap; gap:.6rem}
.bs-champ{display:flex; flex-direction:column; gap:.2rem; min-width:0; flex:1 1 150px}
.bs-champ label{font-size:.82rem; font-weight:600}
.bs-champ input{font-size:16px; min-height:44px; box-sizing:border-box}
.bs-aide{font-size:.75rem; color:var(--doux,#5B6770)}
.bs-choix{display:flex; flex-wrap:wrap; gap:.3rem}
.bs-choix button{font:inherit; font-size:.9rem; min-height:44px; padding:.3rem .8rem; border-radius:999px; border:1px solid var(--trait); background:#fff; cursor:pointer}
.bs-choix button.on{background:#187860; border-color:#187860; color:#fff; font-weight:700}
.bs-plus summary{cursor:pointer; font-weight:700; color:#0B6FB8; min-height:36px; display:flex; align-items:center}
.bs-plus[open]{display:flex; flex-direction:column; gap:.6rem}
.bs-note{font-size:.85rem; padding:.4rem .6rem; background:#F4F8FB; border-radius:8px; margin-bottom:.3rem}
.bs-res-tete{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:.6rem 0 .4rem}
.bs-res{display:flex; flex-direction:column; gap:.3rem; max-height:520px; overflow:auto}
.bs-item{display:flex; gap:.6rem; align-items:flex-start; padding:.5rem .6rem; border:1px solid var(--trait); border-radius:10px; cursor:pointer; flex:none}
.bs-item.on{border-color:#187860; background:#F2F7F5}
.bs-item input{width:20px; height:20px; flex:none; margin-top:.15rem}
.bs-item-corps{display:flex; flex-direction:column; gap:.15rem; min-width:0}
.bs-item-nom{font-weight:700}
.bs-item-info{font-size:.85rem}
.bs-ecart{font-weight:700; color:#187860}
.bs-ecart.haut{color:#B54708}
.bs-alerte{font-size:.78rem; color:#B54708}
.bs-form > .bs-champ, .bs-plus > .bs-champ{flex:none}

.fam-marque{font-weight:700; margin:.6rem 0 .25rem; padding-bottom:.15rem; border-bottom:2px solid #E3E8EC}

/* Historique d'un client (29/10/2026) */
.cli-ouvrir{cursor:pointer}
.cli-ouvrir:hover strong{text-decoration:underline}
.cli-chiffres{display:flex; flex-wrap:wrap; gap:.6rem}
.cli-chiffres > div{flex:1 1 160px; padding:.5rem .7rem; border:1px solid var(--trait); border-radius:10px; display:flex; flex-direction:column}
.cli-chiffres span{font-size:.78rem; color:var(--doux,#5B6770)}
.cli-histo{width:100%; border-collapse:collapse; font-size:.88rem}
.cli-histo th{text-align:left; font-size:.75rem; color:var(--doux,#5B6770); padding:.3rem .4rem; border-bottom:2px solid #E3E8EC}
.cli-histo td{padding:.4rem; border-bottom:1px solid #EEF1F3; vertical-align:top}
.cli-histo .num{text-align:right; white-space:nowrap}
.cli-annulee td{color:var(--doux,#5B6770); text-decoration:line-through}
.cli-annulee td:last-child, .cli-annulee td:first-child{text-decoration:none}

.fam-modele{display:inline-block; font-size:.8rem; font-weight:700; color:#0B6FB8; background:#EAF3FB; border-radius:6px; padding:0 .35rem; margin-left:.2rem}

.fam-marque-bloc{border:1px solid var(--trait); border-radius:10px; margin-bottom:.35rem; padding:0 .5rem}
.fam-marque-bloc > summary.fam-marque{cursor:pointer; list-style:none; display:flex; align-items:center; gap:.4rem; min-height:44px; margin:0; border-bottom:0}
.fam-marque-bloc > summary.fam-marque::-webkit-details-marker{display:none}
.fam-marque-bloc > summary.fam-marque::before{content:''; width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:8px solid currentColor; transition:transform .15s}
.fam-marque-bloc[open] > summary.fam-marque::before{transform:rotate(90deg)}
.fam-marque-bloc[open]{padding-bottom:.4rem}

/* Produit ajouté depuis un lien internet (29/10/2026) */
.lien-fiche{display:flex; flex-direction:column; gap:.5rem; margin-top:.4rem}
.lien-img{max-width:180px; border:1px solid var(--trait); border-radius:10px; background:#fff}
.lien-carac{margin:.2rem 0; padding-left:1.2rem; font-size:.88rem}
.lien-ok{padding:.45rem .6rem; border-radius:8px; background:#E6F4EC; color:#14532D; font-size:.88rem}
.lien-doublons{padding:.5rem .6rem; border-radius:8px; background:#FFF4E5; border:1px solid #F5C27A; display:flex; flex-direction:column; gap:.35rem}
.lien-doublon{display:flex; gap:.5rem; align-items:center; justify-content:space-between; flex-wrap:wrap; font-size:.88rem}

.fam-cat{margin:.3rem 0 .2rem; border-top:1px dashed var(--trait); padding-top:.3rem}
.fam-cat > summary{cursor:pointer; font-weight:600; color:#0B6FB8; min-height:40px; display:flex; align-items:center; flex-wrap:wrap; gap:.2rem}

/* Stock (29/10/2026) */
.stock-res{display:flex; flex-direction:column; gap:.2rem; margin:.4rem 0}
.stock-res button{display:flex; justify-content:space-between; gap:.5rem; text-align:left; font:inherit; min-height:44px; padding:.35rem .6rem; border:1px solid var(--trait); border-radius:8px; background:#fff; cursor:pointer}

.simple.simple-lecture{max-width:1120px}

/* Catalogues : filtres et tri des colonnes (29/10/2026) */
.cat-filtres{display:flex; flex-wrap:wrap; gap:.5rem .8rem; align-items:flex-end; margin-bottom:.5rem; padding:.5rem .6rem; border:1px solid var(--trait); border-radius:10px; background:#F7F9FA}
.cat-filtres > label:not(.check){display:flex; flex-direction:column; gap:.15rem; font-size:.78rem; font-weight:600}
.cat-filtres input:not([type=checkbox]){width:6.5rem; font-size:16px; min-height:40px; box-sizing:border-box}
.cat-filtres select{font-size:16px; min-height:40px}
.kit-tab th.cat-th{cursor:pointer; white-space:nowrap; user-select:none}
.kit-tab th.cat-th:hover{text-decoration:underline}

.cat-ens{font-size:.75rem; font-weight:700; color:#0B6FB8; margin-top:.15rem}

/* Les fenêtres du devis repliables (29/10/2026) */
.pliable > .pli-tete .pli-titre, .pliable > .pli-titre{cursor:pointer; display:flex; align-items:center; gap:.5rem; min-height:44px; margin-top:0}
.pli-titre::before{content:''; flex:none; width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:8px solid currentColor; transform:rotate(90deg); transition:transform .15s}
.pliable.plie .pli-titre::before{transform:rotate(0)}
.pliable.plie > :not(.pli-tete){display:none !important}
.pliable.plie{padding-bottom:.4rem}
.pliable.plie > .pli-tete{margin-bottom:0 !important}

/* Comparer deux devis (29/10/2026) */
.cd-choix{display:flex; flex-direction:column; gap:.25rem; margin-bottom:.6rem}
.cd-choix select{font-size:16px; min-height:44px; max-width:100%}
.cd-tete{display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-bottom:.5rem}
.cd-tete > div{display:flex; flex-direction:column; padding:.4rem .6rem; border:1px solid var(--trait); border-radius:10px}
.cd-explication{margin:.7rem 0; padding:.6rem .8rem; border-radius:10px; background:#F4F8FB; display:flex; flex-direction:column; gap:.25rem}