/* Matières : les styles de la page (v1096, sortis de matieres.html sans rien changer) */
.refed{cursor:text;border-bottom:1px dashed transparent}.refed:hover{border-bottom-color:var(--ink3)}
:root{--bg:#EFEBE4;--card:#fff;--ink:#1E2322;--ink2:#5B6563;--ink3:#8E9794;--line:#DFD8CE;--line2:#EDE7DE;--acc:#3a7c88}
*{box-sizing:border-box;margin:0}
body{font-family:"IBM Plex Sans",system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;-webkit-font-smoothing:antialiased}
/* Tout ce qui se pose sur le bandeau prend sa couleur d'ici. Un thème à bandeau clair n'a
   qu'à redéfinir ces deux variables : sans cela, chaque bouton, chaque liste et chaque pastille
   gardait son blanc en dur, et l'un d'eux finissait toujours illisible. */
header{background:var(--hdr,#1E2322);color:var(--hdrink,#fff);padding:11px 16px;display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:20}
header .spacer{flex:1}
header button{font:inherit;background:transparent;color:var(--hdrink,#fff);border:1px solid var(--hdrline,rgba(255,255,255,.35));border-radius:999px;padding:5px 12px;cursor:pointer}
header button:hover{background:var(--hdrhov,rgba(255,255,255,.1))}
header .wm b{font-weight:800}
header .wm small{opacity:.62;font-weight:500;font-size:12px}
.bell{position:relative;width:32px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75)}
.helpq{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border-radius:50%;border:1.5px solid currentColor;font-weight:800;font-size:13px;line-height:1;cursor:pointer;color:var(--hdrink,#fff);opacity:.85;background:transparent}
.avbtn{width:30px;height:30px;flex:none;border-radius:50%;overflow:hidden;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font:inherit;font-size:13px;font-weight:700;border:1px solid var(--hdrline,rgba(255,255,255,.4));background:transparent;color:var(--hdrink,#fff)}
.avbtn:hover{border-color:rgba(255,255,255,.75)}
.avbtn img{width:100%;height:100%;object-fit:cover;display:block}
.appb{padding:5px 10px!important;font-size:14px;line-height:1}
/* Sur un téléphone le bandeau tient sur deux lignes. Ce qui sert à tout moment, quel que
   soit l'écran ouvert, tient sur la première, calé à droite là où le pouce arrive : compte,
   langue, applications, aide, nuit. Le choix du projet et le style ne servent qu'au moment
   où l'on change de projet ou d'humeur : ils descendent sur la seconde ligne. La coupure
   est explicite, avec un élément de largeur nulle, plutôt que laissée au hasard des
   largeurs de boutons, qui plaçait la coupure à un endroit différent selon le nom du projet. */
.hbreak{display:none}
/* La barre tenait sur deux lignes sur téléphone : projet et style descendaient sous la
   coupure. La règle commune (hub-ui.css) garde toutes les barres sur une seule rangée,
   et celle-ci ne passait donc plus à la ligne du tout : avec la messagerie et la cloche,
   le compte et le menu ☰ sortaient de l'écran. Elle suit la règle commune : une rangée,
   le nom de l'application sans son sous-titre, le projet qui se raccourcit, et le style
   qui vit dans le menu du compte. */
@media(max-width:880px){
 header .hbreak{display:none}
 #pjbox{flex:0 1 auto;min-width:0;max-width:none;margin:0}
 #pjbox .pjbtn{max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:700px){
 header .wm .su-sub,header .wm small{display:none}
 /* le nom de l'application ne prend que sa place ; le projet prend le reste, et se raccourcit */
 body header .wm,body header .wm>span{flex:0 0 auto;min-width:0;width:auto}
 body header{column-gap:6px}
 #pjbox{flex:1 1 auto;min-width:0}
 #pjbox .pjbtn{padding:6px 8px!important}
}
.fltbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 16px;border-bottom:1px solid var(--line2);background:var(--hov,#f0f0f3)}
.fltbar .lab{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3);margin-right:4px}
.fltbar .fchip i{margin-left:6px;font-style:normal;opacity:.7}
.menuwrap{position:relative}
.chmenu{position:absolute;right:0;top:calc(100% + 8px);background:#fff;color:var(--ink);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.24);padding:6px;min-width:238px;z-index:80;display:none}
.chmenu.on{display:block}
#appmenu{min-width:274px}
#appmenu a{white-space:nowrap}
.menu .grp,.chmenu .grp{margin-top:11px}
.chmenu a{display:block;padding:8px 12px;border-radius:8px;font-size:13px;color:var(--ink);cursor:pointer;text-decoration:none;white-space:nowrap}
.chmenu a:hover{background:var(--line2)}
.chmenu a.here{background:#1E2322;color:#fff;font-weight:600}
.chmenu .grp{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3);padding:9px 12px 3px}
.pjbox{position:relative}
.pjbtn{font:inherit;font-weight:600;background:transparent!important;color:var(--hdrink,#fff);border:0!important;border-radius:999px;padding:6px 14px!important;display:inline-flex;align-items:center;gap:9px;max-width:min(44vw,380px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;position:relative;text-align:left}
.pjbtn::after{content:"";position:static;flex:none;width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.7}
.pjmenu{position:absolute;top:calc(100% + 6px);left:0;min-width:100%;width:max-content;max-width:min(80vw,420px);background:#fff;color:var(--ink);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.22);padding:6px;z-index:60;display:none;max-height:70vh;overflow:auto}
.pjbox.open .pjmenu{display:block}
.pjmenu a{display:block;padding:8px 12px;border-radius:8px;font-size:13.5px;color:var(--ink);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pjmenu a:hover{background:var(--line2)}
.pjmenu a.on:hover,body.t-epure .pjmenu a.on:hover,body.t-epure .pjmenu a.on{background:#2a2e30;color:#fff}
.pjmenu a.on{background:#1E2322;color:#fff}
.pjmenu hr{border:0;border-top:1px solid var(--line);margin:6px 4px}
/* Mode nuit : la même palette que le portail, au caractère près, sinon passer d'une
   application à l'autre donne l'impression de changer de logiciel. */
body.nuit{--bg:#1c1f22;--card:#262a2e;--ink:#ece8e0;--ink2:#c8c3b9;--ink3:#8f938f;--line:#3b4045;--line2:#31363b;--acc:#3a7c88}
body.nuit header{background:#16191b}
body.nuit input,body.nuit select,body.nuit textarea{background:#1f2326;color:var(--ink);border-color:var(--line)}
body.nuit .btn{background:var(--card);color:var(--ink);border-color:var(--line)}
body.nuit .btn:hover{background:#31363b}
body.nuit .btn.pri{background:var(--acc);color:#fff;border-color:var(--acc)}
body.nuit .seg{background:var(--card);border-color:var(--line)}
body.nuit .seg button{color:var(--ink2)}
body.nuit .seg button.on{background:#ece8e0;color:#1c1f22}
body.nuit .chmenu,body.nuit .pjmenu,body.nuit .ctx,body.nuit .modal{background:#26292b;color:#e6e3dc}
body.nuit .chmenu a,body.nuit .pjmenu a,body.nuit .ctx button{color:#e6e3dc}
body.nuit .chmenu a:hover,body.nuit .pjmenu a:hover,body.nuit .ctx button:hover{background:#34383b}
body.nuit .chmenu a.here,body.nuit .pjmenu a.on{background:#ece8e0;color:#1c1f22}
body.nuit tr.sec td{background:#2e3338}
body.nuit tr.it:hover td{background:#2b3034}
body.nuit tr.it.sel td{background:#3a2b25}
/* En nuit, une cellule ne doit pas se dessiner comme un champ tant qu'on ne la touche pas :
   sinon la liste devient une grille de petites boîtes et se lit moins bien que de jour. */
body.nuit .ci{background:transparent;border-color:transparent}
body.nuit .ci:hover{border-color:var(--line)}
body.nuit .ci:focus{background:#1f2326;border-color:var(--acc)}
body.nuit .imptbl .ci{background:transparent}
body.nuit .hcard,body.nuit .gc,body.nuit .sugc,body.nuit .dayc{background:var(--card);border-color:var(--line)}
body.nuit .hph,body.nuit .gc .im,body.nuit .sugc .im{background-color:#30353a}
body.nuit .gc .imd{background:repeating-linear-gradient(45deg,#2b3034,#2b3034 8px,#31363b 8px,#31363b 16px)}
body.nuit .hchip{background:var(--line2);color:var(--ink2)}
body.nuit .hedit,body.nuit .hadd{background:rgba(38,42,46,.92);color:var(--ink)}
body.nuit .hadd.on{background:var(--acc);color:#fff}
body.nuit .busy{background:rgba(28,31,34,.75)}
body.nuit .tree .f:hover,body.nuit .tree .s:hover{background:var(--line2)}
body.nuit .tree .f.on{background:#ece8e0;color:#1c1f22}
body.nuit tfoot tr.gtot td{background:#16191b}
body.nuit .soon{border-color:var(--line)}
.shell{display:flex;align-items:stretch;min-height:calc(100vh - 52px)}
main{flex:1;min-width:0;padding:15px 22px 15px 18px}
nav.side{width:212px;flex:0 0 212px;background:var(--card);border-right:1px solid var(--line2);padding:10px 8px 14px;
 display:flex;flex-direction:column;gap:1px;position:sticky;top:52px;height:calc(100vh - 52px);overflow:auto;transition:margin-left .18s}
nav.side a{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:9px;font-size:13.5px;color:var(--ink);
 cursor:pointer;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
nav.side a:not(.on):hover{background:var(--line2)}
nav.side a.on{background:#1E2322;color:#fff;font-weight:600}
nav.side a .ic{width:16px;flex:0 0 16px;text-align:center;opacity:.75;font-size:13px}
/* Sans « min-width:0 », un enfant de flex refuse de rétrécir et l'ellipse ne s'applique
   jamais : un nom long débordait de la barre au lieu d'être coupé. */
nav.side a>span:not(.ic),nav.side a{min-width:0}
nav.side a.sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;line-height:1.9}
nav.side a.sub .ic{display:inline-block;vertical-align:-1px}
nav.side a .ct{margin-left:auto;font-size:11px;opacity:.6;font-weight:600}
nav.side .sgroup{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3);padding:14px 11px 3px;display:flex;align-items:center;gap:6px}
/* Une entrée en retrait sous sa rubrique : une planche appartient au groupe « Planches »,
   et le retrait le dit sans qu'il faille l'écrire. */
/* Le gris de l'entrée en retrait ne doit s'appliquer qu'aux entrées NON sélectionnées : cette
   règle venant après « a.on » et pesant le même poids, elle repeignait le texte de la planche
   ouverte en gris foncé sur le fond foncé de la sélection. La planche ouverte était donc une
   pastille noire vide, sans son nom. */
nav.side a.sub:not(.on){padding-left:26px;font-size:12.5px;color:var(--ink2)}
nav.side a.sub.on{padding-left:26px;font-size:12.5px}
nav.side a.sub .ic{opacity:.45;width:14px}
nav.side a.on .ic{opacity:.9}
.sgcfg{margin-left:auto;border:0;background:transparent;color:var(--ink3);cursor:pointer;font-size:12px;padding:0 2px;line-height:1;opacity:.6}
.sgcfg:hover{opacity:1;color:var(--ink)}
/* la page du projet : la photo en grand, puis ce qu'il y a dedans */
/* La photo suit la largeur de l'écran au lieu d'une hauteur fixe : sur un grand écran une
   bande de 250 px écrasait le cliché, sur un portable elle en prenait la moitié. */
.phero{position:relative;height:clamp(300px,32vw,480px);border-radius:14px;overflow:hidden;background:#3a3f42 center/cover no-repeat;
 margin-bottom:14px;display:flex;align-items:flex-end;box-shadow:0 1px 4px rgba(42,46,48,.06)}
/* Le voile ne couvre que le bas : sur une photo haute, un dégradé qui part du quart supérieur
   assombrit tout le cliché pour rendre lisibles trois lignes de texte. */
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 52%,rgba(18,20,22,.5) 74%,rgba(16,18,20,.88))}
.pin2{position:relative;z-index:2;padding:26px 30px;color:#fff}
.pin2 h1{font-size:clamp(27px,2.4vw,38px);font-weight:800;letter-spacing:-.01em;line-height:1.1}
.pin2 .pa{font-size:13px;color:rgba(255,255,255,.72);margin-top:3px}
.pin2 .pact{display:flex;gap:8px;margin-top:13px;flex-wrap:wrap}
.pin2 .btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff}
.pin2 .btn:hover{background:rgba(255,255,255,.22)}
.pin2 .btn.pri{background:var(--acc);border-color:var(--acc)}
.pkrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px;margin-bottom:14px}
.pk{background:var(--card);border-radius:13px;padding:15px 17px;box-shadow:0 1px 4px rgba(42,46,48,.06);transition:.14s}
.pk:hover{box-shadow:0 6px 18px rgba(42,46,48,.1)}
.pk .v{font-size:25px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.pk .l{font-size:12px;color:var(--ink2);margin-top:3px}
.pk .s{font-size:11px;color:var(--ink3);margin-top:2px}
nav.side .foot{margin-top:auto;padding:10px 11px 0;font-size:10.5px;color:var(--ink3);line-height:1.7;border-top:1px solid var(--line2)}
nav.side .foot a{padding:2px 0;font-size:11.5px;color:var(--ink3)}
nav.side .foot a:hover{background:transparent;color:var(--ink2)}
/* replier la barre : un carnet de 121 lignes mérite toute la largeur */
body.sidehide nav.side{margin-left:-212px}
.sidebg{display:none}
/* Le menu de gauche s'ouvre par un petit onglet collé au bord, comme dans le hub et dans
   Hub. Sur un téléphone tenu d'une main, le pouce atteint le bord de l'écran ; il
   n'atteint pas un bouton posé en haut à gauche du bandeau. L'onglet se déplace de haut en
   bas d'un glissement, et retient sa hauteur d'une application à l'autre. */
.burger{display:none;font:inherit;border:none;cursor:grab}
@media(max-width:900px){
 /* Le bandeau passe à deux lignes sur un téléphone : sa hauteur n'est pas connue d'avance.
    Le menu part donc du haut et c'est le script qui le descend sous le bandeau réel, plutôt
    qu'un « top: 52px » qui tombait au milieu du titre. */
 nav.side{position:fixed;left:0;top:0;bottom:0;z-index:60;margin-left:0;width:232px;
  transform:translateX(-100%);transition:transform .2s;box-shadow:8px 0 30px rgba(0,0,0,.25);
  background:var(--card);overflow-y:auto;padding-top:12px}
 nav.side.open{transform:none}
 /* L'onglet passe sous le bandeau : le bandeau ayant son propre plan, la feuille des
    applications qu'il contient ne pouvait pas passer par-dessus l'onglet, qui venait mordre
    sa première ligne. */
 .burger{display:block;position:fixed;left:0;top:118px;z-index:30;border-radius:0 10px 10px 0;
  background:#1E2322;color:var(--acc,#3a7c88);padding:12px 10px 12px 7px;font-size:15px;font-weight:700;
  line-height:1;box-shadow:2px 2px 12px rgba(0,0,0,.28);opacity:.92;touch-action:none}
 /* Le voile couvre la page, pas le bandeau : sinon le menu des applications, le compte et le
    thème deviennent intouchables tant que le tiroir est ouvert. Le bandeau passe donc
    au-dessus du voile, et le tiroir au-dessus des deux. */
 header{z-index:45}
 body.sideopen .sidebg{display:block;position:fixed;inset:0;background:rgba(20,22,24,.35);z-index:39}
 body.sidehide nav.side{transform:translateX(-100%)}
 /* Le menu des applications sortait de l'écran par la gauche : il est ancré à droite de son
    bouton, et sur deux lignes de bandeau ce bouton se retrouve à gauche. Sur téléphone il
    devient une feuille posée sous le bandeau, large comme l'écran moins deux marges. */
 .chmenu{position:fixed;left:8px;right:8px;top:auto;min-width:0;width:auto;max-height:70vh;overflow-y:auto}
 .chmenu a{white-space:normal}
}
#thbtn{width:auto;font:inherit;font-size:12px;padding:4px 8px;border-radius:999px;background:transparent;color:var(--hdrink,#fff);
 border:1px solid var(--hdrline,rgba(255,255,255,.35));cursor:pointer}
/* La liste déroulante d'un « select » est dessinée par le système, pas par la page : elle ne
   sait rien de nos variables. Écrire « color: var(--ink) » y peignait du texte presque blanc
   sur le fond blanc du système en thème sombre, et la liste devenait illisible. On y met donc
   des couleurs fixes, et l'on inverse explicitement pour les thèmes sombres. */
select option{color:#1E2322;background:#fff}
body.nuit select option,body.t-nuit select option{color:#e8e6e1;background:#232628}

/* ================= les styles =================
   Ce sont ceux du hub, repris trait pour trait plutôt que réinventés : un style qui ne se
   ressemble pas d'une application à l'autre n'est plus un style, c'est un accident. Les noms
   de classes diffèrent ici, le dessin non.

   Deux variables portent ce qui change le plus vite à l'oeil : --hdr pour le bandeau,
   --rad pour l'arrondi. */
:root{--hdr:#1E2322;--rad:14px;--hdrink:#fff;--hdrline:rgba(255,255,255,.35);--hdrhov:rgba(255,255,255,.1)}
header{background:var(--hdr)}
.card{border-radius:var(--rad)}

/* ---------- Calque : du papier calque, bandeau clair, trait fin ---------- */

/* ---------- Épuré : la clarté des sites Apple et Pixel. Beaucoup de blanc, des angles très arrondis,
   pas de traits durs, une seule couleur d'action, une typographie serrée et sombre. ---------- */
body.t-epure{--bg:#f5f5f7;--card:#ffffff;--ink:#1d1d1f;--ink2:#424245;--ink3:#86868b;
 --line:#e5e5ea;--line2:#f1f1f4;--acc:#3a7c88;--hov:#f0f0f3;--wash:#fafafb;--sel:#E4EEF0;--rad:14px;
 font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
 letter-spacing:-.011em}

/* ---------- Studio : l'entre-deux. Ni le noir de Classique, ni le blanc froid d'Épuré.
   Un gris chaud de papier, des encres profondes mais pas noires, des traits doux.
   Il reprend les formes d'Épuré (angles arrondis, chrome léger) et n'en change
   que la palette : le corps porte donc les deux classes. ---------- */
body.t-studio{--bg:#F1F0EC;--card:#FFFFFF;--ink:#262A2C;--ink2:#565E61;--ink3:#8D9499;
 --line:#E1DFD9;--line2:#EDEBE5;--acc:#3a7c88;--hov:#EDEBE6;--wash:#FAF9F6;--sel:#E4EEF0;--rad:12px;
 letter-spacing:-.005em}
body.t-studio .card{box-shadow:0 1px 2px rgba(38,42,44,.04),0 8px 22px -18px rgba(38,42,44,.30)}

body.t-epure h1,body.t-epure h2,body.t-epure h3,body.t-epure h4{letter-spacing:-.022em;font-weight:600}
body.t-epure .card,body.t-epure .hcard,body.t-epure .gc{border:0;border-radius:18px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.05)}
body.t-epure .kpi{border:0;border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 6px 18px rgba(0,0,0,.045)}
body.t-epure .modal{border:0;border-radius:20px;box-shadow:0 24px 64px rgba(0,0,0,.18)}
body.t-epure .btn,body.t-epure .rbtn{border-radius:980px;border-color:var(--line);font-weight:500}
body.t-epure .btn:hover,body.t-epure .rbtn:hover{background:var(--hov);border-color:#dcdce1}
body.t-epure .btn.pri{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:500}
body.t-epure .btn.pri:hover{background:#2f6a76;border-color:#2f6a76}
body.t-epure input,body.t-epure select,body.t-epure textarea{border-radius:12px;border-color:var(--line);background:var(--card)}
body.t-epure input:focus,body.t-epure select:focus,body.t-epure textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(65,123,116,.18);outline:0}
body.t-epure .seg{border-radius:980px;background:var(--hov);border:0;padding:2px}
body.t-epure .seg button{border-radius:980px;border:0;font-weight:500}
body.t-epure .seg button.on{background:var(--acc);color:#fff;font-weight:600;box-shadow:none}
body.t-epure .pill,body.t-epure .tag,body.t-epure .oc-tag,body.t-epure .chip,body.t-epure .st,body.t-epure .ct{border-radius:980px}
body.t-epure table th{background:transparent;border-bottom:1px solid var(--line);color:var(--ink3);font-weight:500;text-transform:none;letter-spacing:0}
body.t-epure table tr.tot td,body.t-epure table tr.tot th{background:transparent;border-top:1px solid var(--line)}
body.t-epure .hd{border-bottom:1px solid var(--line2)}
body.t-epure .sub{color:var(--ink3)}
body.t-epure .ico{border-radius:980px}
body.t-epure .swrow .sw i,body.t-epure .sw i{border-radius:980px}
body.t-epure table td{border-bottom:1px solid var(--line2)}
body.t-epure table td,body.t-epure table th{border-left:0;border-right:0}
body.t-epure .hint,body.t-epure .empty{border-radius:12px;color:var(--ink3)}
body.t-epure .menu,body.t-epure .ctx,body.t-epure .chmenu,body.t-epure .pjmenu{border-radius:14px;border:0;box-shadow:0 12px 40px rgba(0,0,0,.16)}
body.t-epure a{color:var(--ink)}
body.t-epure .rowlink{color:var(--ink)}
body.t-epure a:hover{color:var(--ink)}
body.t-epure{--hdr:rgba(255,255,255,.82);--hdrink:#1d1d1f;--hdrline:#e5e5ea;--hdrhov:#f0f0f3}
body.t-epure header{border-bottom:1px solid var(--line);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
body.t-epure .bell{color:var(--ink3)}
body.t-epure nav.side a{border-radius:10px;font-weight:500}
body.t-epure nav.side a.on{background:var(--sel);color:var(--acc);font-weight:600;box-shadow:none}

body.t-calque{--bg:#f7f5f0;--card:#fdfcf9;--ink:#26241f;--ink2:#565248;--ink3:#8f8a7f;
 --line:#d8d2c4;--line2:#eae5da;--acc:#35635E;--hdr:#f7f5f0;--rad:4px;
 --hdrink:#26241f;--hdrline:rgba(38,36,31,.38);--hdrhov:rgba(38,36,31,.07)}
body.t-calque header{border-bottom:1px solid var(--ink)}
body.t-calque .bell{color:rgba(38,36,31,.7)}
body.t-calque .card,body.t-calque .hcard,body.t-calque .gc{border:1px solid var(--line);box-shadow:none}
body.t-calque nav.side a,body.t-calque .seg,body.t-calque .btn,body.t-calque .fchip,
body.t-calque input,body.t-calque select,body.t-calque textarea{border-radius:3px}
body.t-calque nav.side a.on{background:transparent;color:#35635E;box-shadow:inset 0 0 0 1.2px #35635E;font-weight:600}
body.t-calque .seg button.on{background:#26241f;color:#fdfcf9}
body.t-calque .btn.pri{background:#35635E;border-color:#35635E;color:#fff}

/* ---------- Béton : gris de banche, angles vifs, ombre portée dure ---------- */
body.t-beton{--bg:#cfd0cd;--card:#e3e4e1;--ink:#141414;--ink2:#38393a;--ink3:#65676a;
 --line:#a4a6a3;--line2:#c3c5c2;--acc:#ff4f00;--hdr:#141414;--rad:0px}
body.t-beton .card,body.t-beton .hcard,body.t-beton .gc,body.t-beton .modal,body.t-beton .seg,
body.t-beton nav.side a,body.t-beton .btn,body.t-beton .chmenu,body.t-beton .pjmenu,body.t-beton .ctx,
body.t-beton input,body.t-beton select,body.t-beton textarea,body.t-beton .fchip,body.t-beton .hchip,
body.t-beton .pill,body.t-beton .avbtn,body.t-beton header button,body.t-beton .thb,
body.t-beton .hph,body.t-beton .pin,body.t-beton .im,body.t-beton .cim{border-radius:0}
body.t-beton .card{border:1.5px solid #141414;box-shadow:5px 5px 0 rgba(20,20,20,.85)}
body.t-beton .hcard,body.t-beton .gc{border:1.5px solid #141414;box-shadow:3px 3px 0 rgba(20,20,20,.85)}
body.t-beton .modal{border:1.5px solid #141414}
body.t-beton nav.side a.on{background:#141414;color:#ff4f00}
body.t-beton .seg button.on{background:#141414;color:#fff}
body.t-beton .btn.pri{background:#ff4f00;border-color:#141414;color:#141414;font-weight:700}
body.t-beton .sgroup{text-transform:uppercase;letter-spacing:.14em}
body.t-beton tr.sec td{background:#c3c5c2}

/* ---------- Riviera : sable et olive ---------- */
body.t-riviera{--bg:#f6f2e8;--card:#fffdf8;--ink:#2c3226;--ink2:#535a48;--ink3:#8b9080;
 --line:#e0dac6;--line2:#eee9da;--acc:#c4562e;--hdr:#3d4a33;--rad:14px}
body.t-riviera nav.side a.on{background:#3d4a33;color:#fffdf8}
body.t-riviera nav.side a:not(.on):hover{background:#efe9d8}
body.t-riviera .seg button.on{background:#3d4a33;color:#fff}
body.t-riviera .btn.pri{background:#c4562e;border-color:#c4562e;color:#fff}
body.t-riviera tr.sec td{background:#efe9d8}

/* ---------- Lagune : bleu-vert profond, tenu bas ---------- */
/* Un pétrole de fond de bassin, du papier légèrement verdi, un vert d'eau pour l'action.
   Sobre de près, reconnaissable de loin : c'est ce qu'aucun de nos blancs cassés n'était. */
body.t-lagune{--bg:#eaefee;--card:#fbfdfc;--ink:#16211f;--ink2:#3f4f4c;--ink3:#7d8d89;
 --line:#cfdcd8;--line2:#e2eae7;--acc:#0e7a6b;--hdr:#17332f;--rad:12px}
body.t-lagune nav.side a.on{background:#17332f;color:#eaefee}
body.t-lagune nav.side a:not(.on):hover{background:#dfe8e5}
body.t-lagune .seg button.on{background:#17332f;color:#fff}
body.t-lagune .btn.pri{background:#0e7a6b;border-color:#0e7a6b;color:#fff}
body.t-lagune .card,body.t-lagune .hcard,body.t-lagune .gc{box-shadow:0 2px 12px rgba(23,51,47,.09)}
body.t-lagune tr.sec td{background:#e0e9e6}
body.t-lagune .hchip.acc{background:#dff0ec;color:#0b5c51}


/* ---------- Nuit ---------- */
body.t-nuit{--bg:#191b1d;--card:#232628;--ink:#e8e6e1;--ink2:#b3b1ab;--ink3:#83817b;
 --line:#34383b;--line2:#2c2f31;--hdr:#101214}
body.t-nuit input,body.t-nuit select,body.t-nuit textarea{background:#2b2e31;color:var(--ink);border-color:#3d4144}
body.t-nuit .btn{background:#232628;color:var(--ink);border-color:#3d4144}
body.t-nuit .btn.pri{background:var(--acc,#3a7c88);border-color:var(--acc,#3a7c88);color:#fff}
body.t-nuit .seg{background:#232628;border-color:#3d4144}
body.t-nuit .seg button{color:var(--ink2)}
body.t-nuit .seg button.on{background:var(--acc,#3a7c88);color:#fff}
body.t-nuit .chmenu,body.t-nuit .pjmenu,body.t-nuit .ctx,body.t-nuit .modal{background:#232628;color:var(--ink);border-color:#3d4144}
body.t-nuit .chmenu a,body.t-nuit .pjmenu a,body.t-nuit .ctx button{color:var(--ink)}
body.t-nuit nav.side{background:#1f2224}
/* Blanc sur orange donne 3,1 pour 1 : c'est en dessous de ce qui se lit confortablement à
   treize pixels. L'encre foncée sur le même orange monte à près de 7 pour 1, et la sélection
   reste tout aussi visible. */
body.t-nuit nav.side a.on{background:var(--acc,#3a7c88);color:#16191b;font-weight:700}
body.t-nuit nav.side a.on .ic,body.t-nuit nav.side a.on .ct{color:#16191b;opacity:.8}
body.t-nuit nav.side a:not(.on):hover{background:#2c2f31}
body.t-nuit tr.sec td{background:#1E2322}body.t-nuit tr.it:hover td{background:#262a2c}
body.t-nuit .ci{background:transparent;border-color:transparent}
body.t-nuit .card,body.t-nuit .hcard,body.t-nuit .gc{box-shadow:0 2px 14px rgba(0,0,0,.5)}
body.t-nuit .hph,body.t-nuit .tim,body.t-nuit .cim,body.t-nuit .thb{background-color:#30353a}
body.t-nuit .fchip{background:#232628}
body.t-nuit .pbx{background:rgba(35,38,40,.92);color:var(--ink)}

.card{background:var(--card);border-radius:14px;box-shadow:0 1px 4px rgba(42,46,48,.06);margin-bottom:14px;overflow:hidden}
.hd{padding:11px 16px;border-bottom:1px solid var(--line2);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hd h2{font-size:15px;font-weight:700}
.hd .sub{font-size:12px;color:var(--ink3)}
.hd .spacer{flex:1}
.bd{padding:13px 16px}
label{display:block;font-size:11px;color:var(--ink3);margin:0 0 3px;text-transform:uppercase;letter-spacing:.04em}
input,select,textarea{width:100%;font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(244,101,48,.35);outline-offset:-1px}
.btn{font:inherit;padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;cursor:pointer;color:var(--ink);white-space:nowrap}
.btn:hover{background:var(--line2)}
.btn.pri{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
.btn.pri:hover{filter:brightness(1.06)}
.btn.sm{padding:4px 10px;font-size:12.5px}
.btn.dng{color:#9c3f3f}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.seg button{font:inherit;font-size:12.5px;border:0;background:transparent;padding:5px 11px;cursor:pointer;color:var(--ink2)}
.seg button.on{background:#1E2322;color:#fff;font-weight:600}
/* overflow-x seul fait apparaître aussi une barre verticale : la règle CSS force l'autre axe
   à « auto » dès qu'un axe n'est plus « visible ». D'où deux ascenseurs côte à côte, celui de
   la fenêtre et celui du tableau. On coupe le vertical, la page s'en charge déjà. */
.wrap{overflow-x:auto;overflow-y:hidden}
table{border-collapse:collapse;width:100%;min-width:1080px}
th,td{text-align:left;padding:5px 7px;border-bottom:1px solid var(--line2);font-size:13px;vertical-align:middle}
th{font-size:10.5px;text-transform:uppercase;letter-spacing:.045em;color:var(--ink3);font-weight:600;white-space:nowrap;position:sticky;top:0;background:var(--card);z-index:2;cursor:pointer;user-select:none}
th.plain{cursor:default}
th .ar{opacity:.5;font-size:9px}
tr.sec td{background:var(--hov,#f4f1ec);font-weight:700;font-size:12.5px;letter-spacing:.02em;padding:8px 7px;border-bottom:1px solid var(--line);cursor:default}   /* la bande de section suit le style : grise en Épuré, sable en Studio */
tr.it:hover td{background:#fbf9f6}
tr.it.sel td{background:#fdf1ec}
/* la barre d'insertion : invisible jusqu'à ce qu'on approche */
tr.insrow td{padding:0;border:0;height:0;position:relative}
.insbtn{position:absolute;left:50%;top:-9px;transform:translateX(-50%);width:20px;height:18px;border:1px solid var(--line);
 background:var(--card);color:var(--ink3);border-radius:999px;font-size:13px;line-height:1;cursor:pointer;padding:0;
 opacity:0;transition:.12s;z-index:3}
tr.insrow:hover .insbtn,tr.it:hover + tr.insrow .insbtn{opacity:1}
.insbtn:hover{background:var(--acc);color:#fff;border-color:var(--acc);opacity:1}
body.nuit .insbtn{background:var(--card)}
td.tot{text-align:right;font-weight:700;font-size:12px;white-space:nowrap;color:var(--ink2)}
tr.sec td.tot{color:var(--ink2)}
tfoot tr.gtot td{background:#1E2322;color:#fff;font-weight:700;font-size:12.5px;border:0;padding:9px 7px;position:sticky;bottom:0}
tfoot tr.gtot td.tot{color:#fff}
tfoot tr.gtot td.mg{color:rgba(255,255,255,.6);font-weight:500;font-size:11.5px;text-align:right}
tr.it td.ref{font-weight:700;font-size:12px;white-space:nowrap;color:var(--ink2)}
td.tiny{width:1px;white-space:nowrap}
/* Une case modifiable doit se voir sans qu'on ait à passer la souris dessus : sinon on ne sait
   pas où l'on peut écrire, et une case vide ressemble à une case interdite. Un trait discret
   sous chaque case suffit, il se renforce au survol et devient un vrai champ à la saisie. */
.ci{width:100%;border:1px solid transparent;border-bottom:1px solid var(--line2);background:transparent;border-radius:7px 7px 0 0;padding:4px 6px;font:inherit;font-size:13px;min-width:60px;transition:background .12s,border-color .12s}
.ci:hover{border-color:var(--line);background:rgba(0,0,0,.015);border-radius:7px}
.ci:focus{border-color:var(--acc);background:#fff;border-radius:7px}
.ci::placeholder{color:var(--ink3);opacity:.55}
body.nuit .ci{border-bottom-color:var(--line2)}
body.nuit .ci:hover{background:rgba(255,255,255,.04)}
.ci.num{text-align:right}
.ci.mut{color:var(--ink3)}
/* vue détaillée : la ligne devient une petite fiche, tous les champs visibles et modifiables */
table.dense{min-width:860px}
tr.it.full td{padding:10px 8px;border-bottom:1px solid var(--line)}
.thb{width:66px;height:50px;border-radius:8px;object-fit:cover;background:var(--line2);display:block;border:1px solid var(--line)}
span.thb.thd{border:1px dashed var(--line);cursor:pointer;
 background:repeating-linear-gradient(45deg,#f6f4f0,#f6f4f0 6px,#f1eee8 6px,#f1eee8 12px)}
.fullrow{display:flex;flex-direction:column;gap:9px;min-width:0}
/* Une ligne de la matériauthèque accepte une image lâchée dessus ; elle le dit au survol. */
tr.lrow{cursor:pointer}
tr.lrow.dz td{background:#fdf1ec;box-shadow:inset 0 0 0 1px var(--acc)}
tr.lrow:hover span.thb.thd{border-color:var(--acc)}
.fhead{display:flex;align-items:center;gap:9px;flex-wrap:nowrap;min-width:0}
.fhead .ref{font-size:12.5px;font-weight:800;color:var(--ink2);white-space:nowrap}
.rbtn{font:inherit;font-size:11px;padding:3px 9px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--ink2);cursor:pointer;white-space:nowrap;line-height:1.3}
.rbtn:hover{background:var(--hov,#EDE7DE)}
.prow{display:grid;grid-template-columns:28px 150px minmax(0,1fr) minmax(0,1.2fr);gap:6px 10px;align-items:center;padding:5px 0;border-bottom:1px solid var(--line2,#EDE7DE);font-size:13px}
.prow.phead{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);border-bottom:1px solid var(--line)}
.prow .plab{color:var(--ink2)}.prow .pcur{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.prow .pnew input{width:100%;padding:5px 8px;font-size:13px}
.prow.empty .plab,.prow.empty .pcur{opacity:.6}.prow .pchk input{width:16px;height:16px;margin:0}
/* les cases des profils : une ligne calme par champ, texte normal, pas le style des libellés de formulaire */
.modal label.pf,label.pf{display:flex !important;align-items:center;gap:12px;font-size:13px !important;text-transform:none !important;letter-spacing:0 !important;color:var(--ink3) !important;padding:8px 6px;border:0;border-bottom:1px solid var(--line2,#EDE7DE);border-radius:0;cursor:pointer;margin:0 !important;font-weight:400 !important;text-align:left;justify-content:flex-start;position:relative;user-select:none}
label.pf:hover{color:var(--ink) !important}label.pf input{position:absolute;opacity:0;width:0;height:0;margin:0}
label.pf::before{content:"";width:10px;height:10px;border-radius:50%;border:1.5px solid var(--ink3);flex:none;box-sizing:border-box;transition:background .12s,border-color .12s}
label.pf.on{color:var(--ink) !important}label.pf.on::before{background:var(--ink);border-color:var(--ink)}
body.nuit label.pf.on::before{background:var(--ink);border-color:var(--ink)}
.pfhd{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin:14px 0 6px}.rbtn.on{border-color:#3f66a0;color:#3f66a0}.rbtn .x{margin-left:6px;color:var(--ink3)}
.ftot{font-size:12.5px;font-weight:700;color:var(--ink2)}
/* La valeur d'abord, l'étiquette dessous et en petit : c'est la disposition d'une fiche
   produit, pas d'un formulaire. La bande occupe toute la largeur disponible, donc vingt champs
   tiennent sur deux rangées au lieu de quatre, et la ligne est deux fois moins haute. */
.fgrid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:9px 18px;width:100%}
.ff{min-width:0;display:flex;flex-direction:column-reverse;gap:0}
/* une adresse et une note sont longues : elles prennent deux colonnes plutôt que d'être coupées */
.ff.wide{grid-column:span 2}
@media(max-width:720px){.ff.wide{grid-column:span 1}}
.ff label{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3);margin:0 0 0 5px;line-height:1.5;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ff .ci{width:100%;min-width:0;font-size:12.5px;padding:1px 5px;border-radius:5px 5px 0 0;
 text-overflow:ellipsis}
.ff .ci:focus{text-overflow:clip}
.ff .ci:hover,.ff .ci:focus{border-radius:5px}
/* Une adresse web n'est pas une phrase : elle se lit mal en corps de texte, elle est longue, et
   la seule chose qu'on veuille en faire est de l'ouvrir. On la met donc en petit, on garde le
   début visible, et l'on pose une flèche à côté. La valeur elle-même n'est pas touchée. */
.ff.link{display:grid;grid-template-columns:1fr auto;grid-template-areas:"i b" "l l";align-items:center;column-gap:6px}
.ff.link .ci{grid-area:i;font-size:11.5px;color:var(--ink2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.01em}
.ff.link label{grid-area:l}
.ff.link .go{grid-area:b;border:1px solid var(--line);background:#fff;border-radius:7px;width:24px;height:22px;
 display:flex;align-items:center;justify-content:center;color:var(--ink3);cursor:pointer;font-size:11px;text-decoration:none;
 transition:.14s;flex:none}
.ff.link .go:hover{border-color:var(--acc);color:var(--acc)}
.ff.link .go.off{opacity:.35;pointer-events:none}
body.nuit .ff.link .go{background:var(--card)}
body.nuit tr.it.full td{border-bottom-color:var(--line)}
.th{width:34px;height:34px;border-radius:7px;object-fit:cover;background:var(--line2);display:block;border:1px solid var(--line)}
.thd{width:34px;height:34px;border-radius:7px;background:var(--line2);border:1px dashed var(--line);display:block}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap;border:1px solid transparent}
.pill.etude{background:#EDE7DE;color:#6b6f6d}
.pill.a_valider{background:#fdf0d8;color:#8a6a1e}
.pill.valide{background:#e4f1e8;color:#2e7d5b}
.pill.commande{background:#e6eef7;color:#3a5f8a}
.pill.pose{background:#e9e6f5;color:#544a86}
.pill.masque{background:#f4f4f4;color:#9b9b9b}
.grid{display:grid;gap:14px;padding:14px 16px}
.grid.sm{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.grid.md{grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
.grid.lg{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.gc{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;transition:.14s}
.gc:hover{box-shadow:0 6px 20px rgba(42,46,48,.11);transform:translateY(-1px)}
.gc.sel{border-color:var(--acc);box-shadow:0 0 0 2px rgba(244,101,48,.22)}
.gc .im{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--line2);display:block}
.gc .imd{width:100%;aspect-ratio:4/3;background:repeating-linear-gradient(45deg,#f6f4f0,#f6f4f0 8px,#f1eee8 8px,#f1eee8 16px);display:flex;align-items:center;justify-content:center;color:var(--ink3);font-size:11px}
.gc .in{padding:8px 10px 10px}
/* le compteur de projets : un produit reposé plusieurs fois se reconnaît d'un coup d'oeil,
   et l'infobulle donne les noms sans qu'il faille ouvrir la fiche */
.gc .nproj{position:absolute;top:7px;right:7px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;
 background:rgba(20,22,24,.82);color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;
 justify-content:center;letter-spacing:.02em;backdrop-filter:blur(3px)}
.gc .r{font-size:10.5px;font-weight:700;color:var(--acc);letter-spacing:.03em}
.gc .l{font-size:13px;font-weight:600;margin:1px 0 2px;line-height:1.25}
.gc .m{font-size:11.5px;color:var(--ink3);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grid.sm .gc .l{font-size:12px}.grid.sm .gc .in{padding:6px 8px 8px}
.gsec{padding:16px 16px 0;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--ink2)}
.fltbar{display:flex;align-items:center;gap:10px;padding:7px 16px;background:#fdf1ec;border-bottom:1px solid var(--line2);font-size:12.5px;font-weight:600;color:#96691e}
body.nuit .fltbar{background:#3a2b25;color:#e0b57a}
.btn.sm.on{background:#1E2322;color:#fff;border-color:#1E2322}
/* v1371 : la barre des lignes cochées flotte en bas de l'écran (Kristin, 12/10 : au bout d'une longue catégorie, elle
   restait sous la dernière ligne, hors de l'écran : on cochait, rien ne se montrait, on ne pouvait pas supprimer) */
.bulk{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);max-width:calc(100vw - 32px);box-sizing:border-box;background:#1E2322;color:#fff;padding:9px 14px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;z-index:250;border-radius:14px;box-shadow:0 10px 32px rgba(0,0,0,.28)}
#main .card:has(>.bulk){padding-bottom:70px}
.bulk .n{font-weight:700}
.bulk .btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}
.bulk .btn:hover{background:rgba(255,255,255,.2)}
#upd{display:none;position:fixed;left:50%;bottom:74px;transform:translateX(-50%);z-index:260;background:#1E2322;color:#fff;padding:10px 16px;border-radius:999px;font-size:13px;box-shadow:0 6px 24px rgba(0,0,0,.25);gap:12px;align-items:center;white-space:nowrap}
#upd.on{display:flex}
#upd b{color:#ffd9cc}
#upd button{background:var(--acc);color:#fff;border:0;border-radius:999px;padding:6px 12px;font-weight:700;cursor:pointer}
/* « pointer-events:none » laissait le message traverser : c'était juste tant qu'il n'y avait
   rien à en faire. Maintenant qu'il se copie, il se touche. */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#1E2322;color:#fff;border-radius:14px;
 padding:10px 18px;font-size:13px;opacity:0;transition:.25s;pointer-events:none;z-index:600;max-width:92vw;
 text-align:center;line-height:1.4;cursor:pointer;box-shadow:0 8px 26px rgba(0,0,0,.28)}
.toast.on{opacity:1;pointer-events:auto}
.toast.bad{background:#7a2f18}
.modal-bg{position:fixed;inset:0;background:rgba(30,28,24,.45);z-index:300;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:16px 8px}
.modal{background:#fff;border-radius:16px;max-width:760px;width:100%;padding:20px 22px 18px;margin:3vh 0 40px}
.netv:hover{border-color:var(--line) !important}.netv:focus{border-color:var(--acc,#3a7c88) !important;background:#fff !important;outline:0}
.modal h2{font-size:16px;margin-bottom:2px}
.modal .msub{font-size:12px;color:var(--ink3);margin-bottom:14px}
.mact{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.busy{position:fixed;inset:0;background:rgba(250,248,245,.72);z-index:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-size:13px;color:var(--ink2)}
.spin{width:26px;height:26px;border:2.5px solid var(--line);border-top-color:var(--acc);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.ctx{position:fixed;z-index:400;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.16);padding:5px;min-width:216px;font-size:13px}
.ctx button{display:block;width:100%;text-align:left;border:0;background:transparent;font:inherit;padding:7px 10px;border-radius:7px;color:var(--ink);cursor:pointer}
.ctx button:hover{background:var(--line2)}
.ctx button.dng{color:#9c3f3f}
.ctx hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.ctx .ttl{font-size:10.5px;color:var(--ink3);padding:4px 10px 2px;text-transform:uppercase;letter-spacing:.04em}
.empty{padding:40px 20px;text-align:center;color:var(--ink3);font-size:13px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:10px 12px}
.drop{outline:2px dashed var(--acc);outline-offset:-3px}
td.rowgrip{cursor:grab}td.rowgrip:active{cursor:grabbing}
.pj{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.pjc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 14px;cursor:pointer;transition:.14s}
.pjc:hover{box-shadow:0 6px 20px rgba(42,46,48,.1);transform:translateY(-1px)}
.pjc b{font-size:14px;display:block;margin-bottom:3px}
.pjc .m{font-size:12px;color:var(--ink3)}
.day{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:12px}
@media(max-width:900px){.day{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.day{grid-template-columns:1fr}main{padding:10px}}
.dayc{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.dayc .im{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--line2);display:block}
.dayc .in{padding:10px 12px 12px}
.dayc .k{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--acc);font-weight:700}
.dayc .l{font-size:14px;font-weight:700;margin:2px 0 4px}
.dayc .w{font-size:12px;color:var(--ink2);line-height:1.4}
/* accueil : le choix du projet, avec sa photo, comme sur le portail */
/* Les cartes gardent leur largeur au lieu de s'étirer pour remplir la ligne : une seule carte
   étirée sur toute la page laissait une bande vide et repoussait la suite d'un écran. Elles
   s'alignent à gauche et la section fait la hauteur de ce qu'elle contient, rien de plus. */
.hgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,300px));gap:16px;padding:15px 16px 18px;
 justify-content:start}
/* La liste des projets, elle, remplit la page : c'est une galerie, pas un encart. */
.hgrid.fill{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
/* Carnets et planches côte à côte tant que la place le permet, empilés ensuite. Chaque colonne
   se dimensionne sur son contenu, donc un seul carnet ne réserve pas une bande entière. */
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(430px,1fr));gap:14px;align-items:start;margin-bottom:14px}
.two>.card{margin:0}
/* Une carte que l'on déplace : elle s'efface pendant le glissement, et celle qu'on survole
   montre de quel côté la nouvelle va se poser. */
.hcard.drag{opacity:.35}
.hcard.over{outline:2px solid var(--acc);outline-offset:2px}
.hcard .grip{position:absolute;left:8px;top:8px;z-index:3;width:24px;height:24px;border-radius:7px;
 background:rgba(255,255,255,.92);color:var(--ink2);display:flex;align-items:center;justify-content:center;
 font-size:12px;cursor:grab;opacity:0;transition:.14s;box-shadow:0 1px 4px rgba(0,0,0,.16)}
.hcard{position:relative}
.hcard:hover .grip{opacity:1}
.hcard .grip:active{cursor:grabbing}
body.nuit .hcard .grip{background:rgba(40,44,48,.92);color:#e7e4de}
.hcard{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:box-shadow .16s,border-color .16s,transform .16s}
.hcard:hover{border-color:#b9b3a8;box-shadow:0 8px 24px rgba(0,0,0,.09);transform:translateY(-2px)}
.hph{aspect-ratio:3/2;min-height:150px;background:#e6e1d8 center/cover no-repeat;position:relative;display:flex;align-items:center;justify-content:center}
.hph>span.hini{font-size:34px;font-weight:800;color:#fff;letter-spacing:.04em;opacity:.9}
.hedit{position:absolute;left:10px;bottom:10px;font:inherit;font-size:11px;font-weight:600;border:0;border-radius:999px;padding:4px 11px;background:rgba(255,255,255,.9);color:var(--ink);cursor:pointer;opacity:0;transition:.15s}
.hcard:hover .hedit{opacity:1}
.hedit:hover{background:#fff}
/* Le commutateur « dans Matières » d'une vignette de projet. Il s'est appelé .hin un moment,
   le même nom que le panneau de texte du bandeau : la règle « position:absolute » arrachait
   le texte du bandeau et le collait en bas de page, en pastille blanche. */
/* Le bouton d'inscription du projet est sorti de la photo : posé dessus, il masquait l'image
   et sa couleur pleine jurait avec chaque cliché. Il vit maintenant dans la ligne de pastilles,
   discret quand le projet est déjà là, marqué quand il ne l'est pas. */
.hadd{font:inherit;font-size:11.5px;font-weight:600;border:1px solid var(--line);border-radius:999px;
 padding:3px 10px;background:transparent;color:var(--ink3);cursor:pointer;transition:.14s}
.hadd:hover{border-color:var(--ink3);color:var(--ink2)}
.hadd.on{border-color:transparent;background:var(--line2);color:var(--ink2)}
.hadd.on:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--acc);display:inline-block;margin-right:6px;vertical-align:1px}
/* La rangée du bas est collée au bas de la carte : sans cela une pastille de plus sur un
   projet décalait son bouton et les cartes ne s'alignaient plus entre elles. */
.hfoot{display:flex;margin-top:auto;padding-top:9px}
.hbadge{position:absolute;right:11px;top:11px;background:rgba(42,46,48,.86);color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:3px 10px;backdrop-filter:blur(3px)}
.hbody{padding:12px 14px 14px;display:flex;flex-direction:column;gap:7px;flex:1}
.hname{font-weight:700;font-size:15px;line-height:1.25}
.hsub{font-size:12px;color:var(--ink2);margin-top:-3px}
.hchips{display:flex;flex-wrap:wrap;gap:6px}
.hchip{font-size:11.5px;font-weight:600;border-radius:999px;padding:3px 10px;background:var(--line2);color:var(--ink2)}
.hchip.acc{background:#fdebd3;color:#96691e}
.hchip.ok{background:#e4f1e8;color:#2e7d5b}
.hchip.vide{background:transparent;border:1px dashed var(--line);color:var(--ink3)}
/* le bandeau du haut : le matériau du jour, en grand */
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:0;border-radius:14px;overflow:hidden;background:#1E2322;color:#fff;margin-bottom:14px;box-shadow:0 1px 4px rgba(42,46,48,.06)}
.hero.solo{grid-template-columns:1fr;background:#1E2322 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 40L40 0' stroke='%23ffffff' stroke-opacity='.045' stroke-width='9'/%3E%3C/svg%3E") repeat}
.hero.solo .hin{padding:24px 26px 22px}
@media(max-width:820px){.hero{grid-template-columns:1fr}}
.hero .him{min-height:250px;background:#3a3f42 center/cover no-repeat;position:relative}
.hero .hin{padding:22px 26px 20px;display:flex;flex-direction:column;justify-content:center;gap:9px}
.hero .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--acc);font-weight:700}
.hero h1{font-size:24px;line-height:1.15;font-weight:800;letter-spacing:-.01em}
.hero .w{font-size:13px;line-height:1.55;color:rgba(255,255,255,.76);max-width:44ch}
.hero .meta{font-size:11.5px;color:rgba(255,255,255,.5)}
.hero .act{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.hero .btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);color:#fff}
.hero .btn:hover{background:rgba(255,255,255,.2)}
.hero .btn.pri{background:var(--acc);border-color:var(--acc)}
.mhome{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:14px;align-items:start}
.mhome .hgrid.fill{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
@media(max-width:1200px){.mhome{grid-template-columns:1fr}}
.card.ls .hd{padding-bottom:10px}
.ls-b{padding:10px 14px 12px;border-top:1px solid var(--line2)}
.ls-h{display:flex;align-items:baseline;gap:8px;margin:0 0 6px;font-size:12.5px;flex-wrap:wrap}
.ls-h span{font-size:11px;color:var(--ink3)}
.ls-row{display:flex;align-items:center;gap:10px;padding:5px 4px;border-radius:9px;cursor:pointer}
.ls-row:hover{background:var(--hov,rgba(0,0,0,.04))}
.ls-im{flex:0 0 40px;height:40px;border-radius:8px;background:#ece8e1 center/cover no-repeat}
.ls-tx{flex:1;min-width:0}
.ls-l{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ls-s{font-size:11px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ls-d{flex:0 0 auto;font-size:11.5px;font-variant-numeric:tabular-nums;text-align:right}
.ls-mq{color:var(--ink3);font-size:11px}
.ls-lead{color:#8a5a14;background:#f6ecd9;border-radius:999px;padding:1px 8px;font-size:11px;white-space:nowrap}
.ls-ec{color:#9c3f3f;font-weight:600}
.ls-more{margin-top:4px;font-size:11.5px}.ls-more a{cursor:pointer;color:var(--acc)}
.ls-todo{display:flex;flex-direction:column;gap:2px}
.ls-todo a{cursor:pointer;font-size:12.5px;padding:4px;border-radius:8px;color:var(--ink)}
.ls-todo a:hover{background:var(--hov,rgba(0,0,0,.04))}.ls-todo b{font-variant-numeric:tabular-nums;margin-right:4px}
.ls-mail{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink2);text-decoration:none}
.sug{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;padding:14px 16px 16px}
.sugc{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.imw{position:relative}
.imgnav{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:26px;height:26px;border:0;border-radius:50%;background:rgba(255,255,255,.9);color:var(--ink);font-size:17px;line-height:1;cursor:pointer;opacity:0;transition:.15s;display:flex;align-items:center;justify-content:center;padding:0}
.imgnav.l{right:auto;left:6px}
.imw:hover .imgnav,.hero .him:hover .imgnav{opacity:1}
.imgnav:hover{background:#fff}
.illus{position:absolute;left:8px;bottom:8px;background:rgba(42,46,48,.78);color:#fff;font-size:10px;font-weight:600;border-radius:999px;padding:2px 8px;letter-spacing:.01em}
.illus.dark{left:14px;bottom:14px}
.sugc .im{width:100%;height:118px;object-fit:cover;background:repeating-linear-gradient(45deg,#f6f4f0,#f6f4f0 9px,#f1eee8 9px,#f1eee8 18px);
 background-size:cover;background-position:center;background-repeat:no-repeat;display:block}
.sugc[onclick]{cursor:pointer;transition:border-color .14s,box-shadow .14s,transform .14s}
.sugc[onclick]:hover{border-color:#b9b3a8;box-shadow:0 6px 18px rgba(0,0,0,.07);transform:translateY(-2px)}
.sugc .in{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.sugc .l{font-size:13.5px;font-weight:700;line-height:1.25}
.sugc .b{font-size:11.5px;color:var(--ink3)}
.sugc .w{font-size:12px;color:var(--ink2);line-height:1.45;flex:1}
.sugc .a{display:flex;gap:6px;margin-top:6px}
.soon{font-size:11px;color:var(--ink3);border:1px dashed var(--line);border-radius:999px;padding:2px 9px;display:inline-block}
.sugc a.btn{text-decoration:none;display:inline-block}

.fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px 20px;max-height:60vh;overflow:auto;padding-right:4px}
.fcol h4{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink3);margin:0 0 7px;font-weight:700}
.fchips{display:flex;flex-wrap:wrap;gap:6px}
.fchip{font:inherit;font-size:12px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;
 padding:4px 9px 4px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;max-width:100%}
.fchip:hover{background:var(--line2)}
.fchip.on{background:#1E2322;color:#fff;border-color:#1E2322}
.fchip i{font-style:normal;font-size:10.5px;opacity:.55;font-weight:700}
body.nuit .fchip{background:var(--card);color:var(--ink);border-color:var(--line)}
body.nuit .fchip.on{background:#ece8e0;color:#1c1f22;border-color:#ece8e0}
.aihd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line2)}
.conf{font-size:11px;font-weight:700;border-radius:999px;padding:3px 10px}
.conf.ok{background:#e4f1e8;color:#2e7d5b}.conf.mid{background:#fdf0d8;color:#8a6a1e}.conf.low{background:#fbe3e0;color:#9c3f3f}
.miss{font-size:11.5px;color:var(--ink3)}
.aiims{display:flex;flex-wrap:wrap;gap:7px;padding-bottom:4px;margin-bottom:12px;max-height:230px;overflow-y:auto}
.aiim{width:82px;height:62px;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer;flex:0 0 auto;background:var(--line2)}
.aiim.on{border-color:var(--acc)}
.impdz{border:2px dashed var(--line);border-radius:11px;padding:22px;text-align:center;color:var(--ink3);font-size:12.5px;cursor:pointer}
.impdz:hover{border-color:#c9c3b8}.impdz.drop{border-color:var(--acc);background:#fdf1ec}
.impwrap{max-height:46vh;overflow:auto;border:1px solid var(--line2);border-radius:11px}
.impsec{border-bottom:1px solid var(--line2)}.impsec:last-child{border-bottom:0}
.impck{display:flex;align-items:center;gap:8px;padding:8px 11px;background:#f4f1ec;font-size:12.5px;text-transform:none;letter-spacing:0;color:var(--ink);margin:0;cursor:pointer}
.impck input{width:15px;height:15px;padding:0}
.imptbl{width:100%;min-width:0;border-collapse:collapse}
.imptbl td{padding:2px 6px;border-bottom:1px solid var(--line2)}
.imptbl tr.low td{background:#fdf6f5}
.cf{font-size:10.5px;font-weight:700;color:var(--ink3)}.cf.low{color:#9c3f3f}.cf.mid{color:#8a6a1e}.cf.ok{color:#2e7d5b}
body.nuit .impck{background:#2e3338}body.nuit .imptbl tr.low td{background:#3a2b28}
body.nuit .impdz.drop{background:#3a2a22}
/* le mur : une grille dense, chaque image occupant une à trois colonnes et une à trois rangées */
/* Les rangées font huit pixels et chaque image en occupe autant qu'il faut pour garder ses
   proportions. Sans « stretch », la figure ne remplit pas les rangées qu'elle réserve et
   retombe à zéro : la photo étant en position absolue, il ne reste rien à mesurer. */
.pbwall{display:grid;gap:10px;padding:12px 16px 16px;grid-auto-rows:8px;align-items:stretch}
.pbwall.s{grid-template-columns:repeat(auto-fill,minmax(116px,1fr))}
.pbwall.m{grid-template-columns:repeat(auto-fill,minmax(172px,1fr))}
.pbwall.l{grid-template-columns:repeat(auto-fill,minmax(252px,1fr))}
/* Une rangée de catégories qui défile plutôt qu'une rangée qui se replie : à dix familles,
   le repli poussait les images trois lignes plus bas et l'on ne voyait plus la planche. */
.fbar{display:flex;gap:7px;padding:9px 16px;border-bottom:1px solid var(--line2);
 overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.fbar .fchip{flex:0 0 auto;white-space:nowrap}
.fbar::-webkit-scrollbar{height:6px}
.fbar::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.ilbar{padding:10px 16px 4px;display:flex;flex-direction:column;gap:7px;border-bottom:1px solid var(--line2)}
.ilrow{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;flex-wrap:nowrap}
.ilrow .fchip{flex:0 0 auto;white-space:nowrap}
.ilrow::-webkit-scrollbar{height:6px}
.ilrow::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.ilrow{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ilrow b{font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink3);width:66px;flex:0 0 66px}
.fchip .sw{width:11px;height:11px;border-radius:50%;border:1px solid rgba(0,0,0,.12);display:inline-block}
.sw.t-beige{background:#d9c8ab}.sw.t-terre{background:#a06844}.sw.t-gris{background:#9b9b98}
.sw.t-noir{background:#242628}.sw.t-blanc{background:#f2f0ec}.sw.t-bleu{background:#5b7f9e}
.sw.t-vert{background:#6f8a63}.sw.t-rouge{background:#a4514a}.sw.t-jaune{background:#d6b64e}
.sw.t-violet{background:#7d6b96}
/* La mosaïque d'aperçu : quatre images dans le cadre d'une carte, sans espace perdu. */
/* « align-items:center » vient de .hph : en grille, il réduit chaque case vide à zéro de haut,
   et la mosaïque disparaît en ne laissant que le fond. Il faut l'annuler explicitement. */
.hph.mos2,.hph.mos3,.hph.mos4{display:grid;gap:2px;background:var(--line2);align-items:stretch;justify-items:stretch}
.hph.mos2{grid-template-columns:1fr 1fr}
.hph.mos3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
.hph.mos3 i:first-child{grid-row:span 2}
.hph.mos4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.hph i{background:var(--line2) center/cover no-repeat;display:block;min-height:0;width:100%;height:100%;align-self:stretch;
 /* un liseré : sans lui, une photo de matière blanche se confond avec la case voisine et
    la mosaïque paraît trouée */
 box-shadow:inset 0 0 0 1px rgba(42,46,48,.07)}
/* ---------- la vue du maître d'ouvrage ----------
   Une ligne par matière, la photo à gauche, les deux boutons à droite. Rien à chercher, rien à
   déplier : on descend, on répond. Un avis déjà rendu se voit à la couleur du filet de gauche. */
.clist{padding:4px 16px 16px}
.cgrp{padding:16px 0 6px;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink2)}
.cli{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line2);border-left:3px solid transparent;padding-left:11px}
.cli.d-valide{border-left-color:#2e7d5b;background:linear-gradient(90deg,rgba(46,125,91,.05),transparent 30%)}
.cli.d-change{border-left-color:var(--acc);background:linear-gradient(90deg,rgba(196,98,45,.06),transparent 30%)}
.cim{width:104px;height:78px;flex:0 0 104px;border-radius:9px;background:var(--line2) center/cover no-repeat;cursor:zoom-in}
.cim.e{background:repeating-linear-gradient(45deg,#f6f4f0,#f6f4f0 7px,#f1eee8 7px,#f1eee8 14px);
 display:flex;align-items:center;justify-content:center;font-size:10.5px;color:var(--ink3);cursor:default}
.cin{flex:1;min-width:0}
.cin .cr{font-size:11px;font-weight:700;color:var(--ink3);letter-spacing:.03em}
.cin .cl{font-size:15px;font-weight:700;line-height:1.25;margin-top:1px}
.cin .cp{font-size:13px;color:var(--ink2)}
.cin .cm{font-size:12.5px;color:var(--ink2);margin-top:3px}
.cin .cn{font-size:12.5px;color:var(--ink2);margin-top:5px;line-height:1.5;border-left:2px solid var(--line);padding-left:8px}
.cin .cst{margin-top:7px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cin .cwhen{font-size:11.5px;color:var(--ink3)}
.cact{display:flex;flex-direction:column;gap:6px;flex:0 0 auto;align-items:stretch}
.cnote{font-size:13px;color:var(--ink2);line-height:1.55;background:var(--line2);border-radius:10px;padding:10px 13px;margin-bottom:9px}
.cnote.sm{font-size:12px;background:transparent;padding:0 2px 6px;color:var(--ink3)}
@media(max-width:700px){.cli{flex-wrap:wrap}.cact{flex-direction:row;width:100%}.cact .btn{flex:1}}
/* ---------- la liste des publications, côté agence ---------- */
.publist{max-height:52vh;overflow:auto;margin:4px 0 6px}
.pubrow{display:flex;gap:12px;align-items:center;padding:11px 4px;border-bottom:1px solid var(--line2)}
.pubrow.off{opacity:.5}
.pubrow .pv{font-size:12px;font-weight:800;color:var(--acc);width:44px;flex:0 0 44px}
.pubrow .pn{flex:1;min-width:0}
.pubrow .ps{font-size:11.5px;color:var(--ink3);margin-top:2px}
.pubrow .pb2{display:flex;gap:5px;flex-wrap:wrap;flex:0 0 auto}
.pubrow .pa{display:flex;gap:5px;flex:0 0 auto}
/* la pastille d'avis, sur le repère : verte validée, orange à revoir */
.adot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:5px;vertical-align:1px;background:var(--line)}
/* le verrou : discret sur la ligne, lisible d'un coup d'oeil sur la colonne des repères */
/* Le bandeau des commandes : il n'apparaît que lorsqu'il a quelque chose à dire, il est donc
   voyant sans être criard, et il se clique en entier. */
.acmd{display:flex;align-items:center;gap:9px;margin:0 0 12px;padding:9px 13px;border-radius:11px;cursor:pointer;
 background:#fff6ec;border:1px solid #f2c9a4;color:#7a4a1c;font-size:13px;transition:.14s}
.acmd:hover{background:#feefdf}
.acmd.late{background:#fdf0ec;border-color:#efb6a4;color:#8a3418}
.acmd .ic{font-size:14px;opacity:.75}
.acmd b{font-weight:600}
.acmd .sub{color:inherit;opacity:.72;font-size:12px}
.acmd .go{font-weight:600;font-size:12px;opacity:.85;white-space:nowrap}
body.nuit .acmd,body.t-nuit .acmd{background:#33281c;border-color:#5b452c;color:#f0d3ae}
body.nuit .acmd.late,body.t-nuit .acmd.late{background:#3a231b;border-color:#6a3a2a;color:#f3c6b4}
/* La date de commande sur la ligne : discrète tant qu'elle est loin, nette quand elle approche. */
.ocmd{display:inline-block;margin-left:5px;padding:1px 6px;border-radius:999px;font-size:11px;font-weight:600;
 background:var(--line2);color:var(--ink3);vertical-align:1px;white-space:nowrap;cursor:default}
.ocmd.soon{background:#fdeacf;color:#8a5a1c}
.ocmd.late{background:#f8d9cf;color:#9c3f1e}
body.nuit .ocmd.soon,body.t-nuit .ocmd.soon{background:#4a3a1e;color:#f0cf9d}
body.nuit .ocmd.late,body.t-nuit .ocmd.late{background:#50291d;color:#f2b9a3}
.histo{margin-top:12px;padding:9px 12px;border-radius:10px;background:var(--line2);font-size:12.5px;color:var(--ink2)}
.histo b{color:var(--ink)}
.histo .vx{color:var(--ink3);font-style:italic}
.histo.cher{background:#fdf0ec;color:#8a3418}
.histo .al{margin-top:4px;font-weight:600}
.cmdbloc{margin-top:12px;padding:10px 12px;border-radius:10px;border:1px solid var(--line)}
.cmdbloc .t{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3);margin-bottom:7px}
.cmdbloc .g{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cmdbloc .r{margin-top:9px;font-size:12.5px;color:var(--ink2)}
.cmdbloc .r.soon{color:#8a5a1c;font-weight:600}
.cmdbloc .r.late{color:#9c3f1e;font-weight:600}
.cmdbloc .s{margin-top:3px;font-size:11.5px;color:var(--ink3)}
/* Les prix posés : un tableau dense, une ligne par ouvrage, la source toujours à un clic. */
.conf{font-size:11px;padding:1px 7px;border-radius:999px;background:#e8f0ea;color:#2e6b4c;font-weight:600}
.conf.low{background:#f6e9e4;color:#9c5a3f}
.esttbl tr.low td{background:rgba(156,90,63,.05)}
.coefrow{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:4px}
.coef{background:var(--line2);border-radius:10px;padding:7px 12px}
.coef b{display:block;font-size:15px;color:var(--ink)}
.coef span{font-size:11px;color:var(--ink3)}
/* L'échantillon sur la ligne du carnet, et sa liste. */
.ech{display:inline-block;margin-left:4px;font-size:11px;vertical-align:1px;cursor:default}
.ech.att{color:#b07a2c}.ech.ok{color:#2e7d5b}.ech.neut{color:var(--ink3)}.ech.dng{color:#9c3f1e}
.urlko{display:inline-block;margin-left:4px;font-size:11px;color:#9c3f1e;vertical-align:1px;cursor:default}
.echlist{display:flex;flex-direction:column;gap:8px;padding:0 13px 14px}
.echc{border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;background:var(--card)}
.echc:hover{background:var(--line2)}
.echc.late{border-color:#e5b6a4}
.echc .t{display:flex;gap:10px;align-items:baseline}
.echc .t b{flex:1;min-width:0;font-size:13.5px}
.echc .st{font-size:11px;padding:1px 8px;border-radius:999px;background:var(--line2);color:var(--ink2);white-space:nowrap}
.echc .st.att{background:#fdeacf;color:#8a5a1c}
.echc .st.ok{background:#e8f0ea;color:#2e6b4c}
.echc .st.dng{background:#f8d9cf;color:#9c3f1e}
.echc .m{font-size:11.5px;color:var(--ink3);margin-top:3px}
.echc .m .sep{margin:0 5px;opacity:.55}
.pxlist{display:flex;flex-direction:column;gap:8px;padding:0 13px 14px}
.pxc{border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;background:var(--card)}
.pxc:active{background:var(--line2)}
.pxc .t{display:flex;gap:10px;align-items:baseline}
.pxc .t b{flex:1;min-width:0;font-size:13.5px;line-height:1.35}
.pxc .t .p{font-weight:700;font-size:14px;white-space:nowrap}
.pxc .t .p i{font-style:normal;font-weight:400;font-size:11px;color:var(--ink3)}
.pxc .m{font-size:11.5px;color:var(--ink3);margin-top:3px}
.pxc .m .sep{margin:0 5px;opacity:.55}
.pxc .l{margin-top:7px}
.pxtbl{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed;min-width:0}
.pxtbl th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3);
 padding:7px 8px;border-bottom:1px solid var(--line2);position:sticky;top:0;background:var(--card);z-index:1}
.pxtbl td{padding:7px 8px;border-bottom:1px solid var(--line2);vertical-align:top}
.pxtbl tr:hover td{background:var(--line2);cursor:pointer}
.pxtbl .num{text-align:right;white-space:nowrap}
.pxtbl .s{font-size:11.5px;color:var(--ink3)}
/* Sept colonnes dont quatre de chiffres. En largeur automatique le libellé prend tout et la
   dernière colonne sort du cadre : on fixe donc la répartition, et c'est le texte qui plie. */
.pxtbl th:nth-child(1){width:29%}
.pxtbl th:nth-child(2){width:13%}
.pxtbl th:nth-child(3){width:10%}
.pxtbl th:nth-child(4){width:12%}
.pxtbl th:nth-child(5){width:15%}
.pxtbl th:nth-child(6){width:8%}
.pxtbl th:nth-child(7){width:13%}
.pxtbl td{overflow-wrap:anywhere}
.pxtbl .num .s{white-space:normal}
.lien{font-size:11.5px;padding:2px 8px;border-radius:999px;background:#e8f0ea;color:#2e6b4c;white-space:nowrap}
.lien i{font-style:normal;opacity:.75}
.lien.off{background:var(--line2);color:var(--ink3)}
.estsum{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:12px 0 14px}
.estsum>div{background:var(--line2);border-radius:10px;padding:9px 12px}
.estsum b{display:block;font-size:17px;color:var(--ink)}
.estsum span{font-size:11.5px;color:var(--ink3)}
.estsum span.s2{display:block;font-size:11px;opacity:.8}
.estsum>div.mien{background:#e8f0ea}
.estsum>div.mien b{color:#2e6b4c}
.estsum>div.hot{background:#f6e9e4}
.estsum>div.hot b{color:#9c5a3f}
.avert{font-size:12.5px;line-height:1.5;color:#9c5a3f;background:#f6e9e4;border-radius:10px;padding:9px 12px;margin:0 0 14px}
.ecart{font-size:12px;color:var(--ink2)}
.ecart.hot{color:#9c5a3f;font-weight:700}
.pxc .m.paye{color:#2e6b4c}
.esttbl{width:100%;border-collapse:collapse;font-size:12.5px}
.esttbl th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3);padding:5px 8px;border-bottom:1px solid var(--line2)}
.esttbl td{padding:5px 8px;border-bottom:1px solid var(--line2)}
.esttbl .num{text-align:right}
.src{font-size:11px;padding:1px 7px;border-radius:999px;background:var(--line2);color:var(--ink2)}
.src.mem{background:#e8f0ea;color:#2e6b4c}
.src.no{background:#f6e9e4;color:#9c5a3f}
.lk{display:inline-block;margin-right:4px;color:var(--ink3);font-size:11px;vertical-align:1px;cursor:default}
.lk.bk{opacity:.55}
tr.it.lkd td{background:#f7f6f4}
tr.it.lkd.sel td{background:#fdf1ec}
tr.it.lkd .ref{color:var(--ink2)}
.ci.ro{border-bottom-color:transparent;color:var(--ink2);cursor:default}
.ci.ro:focus{background:transparent;border-color:transparent;outline:none}
.gc.lkd{background:#f7f6f4}
.gc.lkd .r{color:var(--ink2)}
body.t-nuit tr.it.lkd td,body.t-nuit .gc.lkd{background:rgba(255,255,255,.04)}
body.nuit tr.it.lkd td,body.nuit .gc.lkd{background:rgba(255,255,255,.04)}
.hd .btn.on{background:var(--acc);border-color:var(--acc);color:#fff}
.adot.ok{background:#2e7d5b}
.adot.dng{background:var(--acc)}
.pbgrp{padding:14px 16px 2px;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink2)}
.pbgrp span{font-weight:500;color:var(--ink3);text-transform:none;letter-spacing:0}
.pbgrp em{font-style:normal;font-weight:500;font-size:11px;text-transform:none;letter-spacing:0;color:var(--ink3);opacity:0;margin-left:9px;transition:.14s}
.pbgrp.dz{background:#fdf1ec;border-radius:9px;color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
#pbnewzone.dz{outline:2px dashed var(--acc);outline-offset:-5px}
.pbgrp.dz em{opacity:1;color:var(--acc)}
/* Les commandes d'une image restent discrètes jusqu'au survol, puis se posent en haut à droite. */
.pbtools{position:absolute;top:6px;right:6px;display:flex;gap:4px;opacity:0;transition:.14s;z-index:2}
.pbx.dng:hover{background:var(--acc);color:#fff}
/* la corbeille : une ligne par élément, la vignette, d'où il vient, et le temps qui lui reste */
.trash{max-height:52vh;overflow:auto;margin:6px 0}
.trow{display:flex;gap:11px;align-items:center;padding:9px 3px;border-bottom:1px solid var(--line2)}
.tim{width:56px;height:42px;flex:0 0 56px;border-radius:7px;background:var(--line2) center/cover no-repeat}
.tim.e{background:repeating-linear-gradient(45deg,#f6f4f0,#f6f4f0 5px,#f1eee8 5px,#f1eee8 10px);
 display:flex;align-items:center;justify-content:center;color:var(--ink3);font-size:15px}
.trow .tn{flex:1;min-width:0}
.trow .ts{font-size:11.5px;color:var(--ink3);margin-top:2px}
.pin:hover .pbtools{opacity:1}
#pbwall.drop{outline:2px dashed var(--acc);outline-offset:-6px;border-radius:12px}
.pbwall.drop{outline:2px dashed var(--acc);outline-offset:-6px;border-radius:12px}
.pin{position:relative;margin:0;border-radius:11px;overflow:hidden;background:var(--line2);cursor:pointer;transition:box-shadow .15s,transform .15s}
.pin:hover{box-shadow:0 8px 24px rgba(42,46,48,.16);transform:translateY(-1px)}
.pin.over{outline:2px solid var(--acc);outline-offset:-2px}
.pin.w2{grid-column:span 2}.pin.w3{grid-column:span 3}
.pin .pimg{position:absolute;inset:0;background:var(--line2) center/cover no-repeat}
.pin.cut .pimg{background-color:#fff;background-size:contain}
.pin.drag{opacity:.35}
.pin figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 9px 7px;font-size:11.5px;color:#fff;font-weight:600;
 background:linear-gradient(transparent,rgba(20,22,24,.72));opacity:0;transition:.15s;display:flex;gap:7px;align-items:baseline}
.pin figcaption span{font-weight:500;opacity:.72;font-size:10.5px}
.pin:hover figcaption{opacity:1}
.pbx{position:static;width:24px;height:24px;border:0;border-radius:50%;background:rgba(255,255,255,.92);
 color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;transition:.15s;padding:0;line-height:1;
 display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.pbx:hover{background:#fff;transform:scale(1.08)}
.pbdrop{grid-row:span 14;border:2px dashed var(--line);border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;
 text-align:center;color:var(--ink3);font-size:12px;cursor:pointer;padding:10px;line-height:1.5}
.pbdrop span{font-size:11px;opacity:.75}
.pbdrop:hover{border-color:var(--acc);color:var(--ink2)}
.pbcols{display:flex;gap:6px;margin-top:10px}
.pbcols span{width:34px;height:20px;border-radius:5px;border:1px solid var(--line)}
/* recadrage */
.cropwrap{position:relative;user-select:none;background:#EDE7DE;border-radius:11px;overflow:hidden;line-height:0}
.cropwrap img{width:100%;max-height:56vh;object-fit:contain;display:block;pointer-events:none}
.cropbox{position:absolute;border:2px solid #fff;box-shadow:0 0 0 9999px rgba(20,22,24,.45);cursor:move;border-radius:2px}
.cropbox .ch{position:absolute;width:13px;height:13px;background:#fff;border-radius:3px;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.cropbox .ch.nw{left:-7px;top:-7px;cursor:nwse-resize}.cropbox .ch.ne{right:-7px;top:-7px;cursor:nesw-resize}
.cropbox .ch.sw{left:-7px;bottom:-7px;cursor:nesw-resize}.cropbox .ch.se{right:-7px;bottom:-7px;cursor:nwse-resize}
body.nuit .pbdrop{border-color:var(--line)}
body.nuit .pin{background:var(--line2)}
.tree{font-size:13px}
.tree .f{padding:6px 10px;border-radius:8px;cursor:pointer;font-weight:600}
.tree .f:hover{background:var(--line2)}
.tree .f.on{background:#1E2322;color:#fff}
.tree .s{padding:4px 10px 4px 24px;border-radius:8px;cursor:pointer;color:var(--ink2);font-size:12.5px}
.tree .s:hover{background:var(--line2)}
.tree .s.on{background:var(--acc);color:#fff}
.sp{display:flex;gap:14px;align-items:flex-start}
.sp .l{width:212px;flex:0 0 212px;position:sticky;top:64px;max-height:calc(100vh - 90px);overflow:auto}
.sp .r{flex:1;min-width:0}
@media(max-width:820px){.sp{display:block}.sp .l{width:auto;position:static;max-height:none;margin-bottom:12px}}

/* signalétique de chantier pour les titres, chasse fixe pour ce qui se compte */
h1,h2,h3,h4,.hd h2,.sgroup,.seg button{font-family:"Barlow Semi Condensed","Arial Narrow",Arial,system-ui,sans-serif;letter-spacing:.005em}
h1,h2,h3,h4{font-weight:600}
.kpi .v,.num,.ct,td.num,.su-num{font-family:"Chivo Mono",ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}

/* ---------- replier le menu latéral : le même geste et la même mémoire partout ---------- */
.sidefold{position:fixed;left:212px;top:50%;transform:translateY(-50%);z-index:21;width:16px;height:44px;border:1px solid var(--line);border-left:0;border-radius:0 8px 8px 0;background:var(--card);color:var(--ink3);font-size:9px;cursor:pointer;padding:0;display:none;align-items:center;justify-content:center;box-shadow:2px 0 8px rgba(0,0,0,.06);transition:left .2s}
.sidefold:hover{color:var(--ink);background:var(--hov,#EDE7DE)}
@media(min-width:901px){.sidefold{display:flex}body.sidefolded .sidefold{left:0}}
/* Replié, le menu disparaissait : pour atteindre une autre page il fallait le
   rouvrir. Il se réduit maintenant à une colonne d'icônes large comme un doigt,
   comme dans Maquette, Métré, Temps, Direction et Transformation. Les intitulés
   restent en infobulle, et les libellés s'effacent par la taille de police, car
   ils sont écrits en texte nu à côté de l'icône, sans balise à masquer. */
@media(min-width:901px){
 body.sidefolded nav.side{width:54px;min-width:54px;flex:0 0 54px;padding-left:7px;padding-right:7px;overflow-x:hidden}
 body.sidefolded nav.side a,body.sidefolded nav.side button.sitem,body.sidefolded nav.side button.nv{
  font-size:0;justify-content:center;text-align:center;padding:9px 0;gap:0;white-space:nowrap}
 body.sidefolded nav.side .ic{font-size:15px;margin:0;flex:none}
 body.sidefolded nav.side .lb{display:none}
 body.sidefolded nav.side .dot{margin:0;flex:none}
 /* les intitulés de section deviennent un filet, les compléments s'effacent */
 body.sidefolded nav.side .sgroup{height:1px;padding:0;margin:9px 5px 8px;background:var(--line);
  text-indent:-9999px;overflow:hidden;border:0}
 body.sidefolded nav.side .sideents,body.sidefolded nav.side .navmore,
 body.sidefolded nav.side .sfoot,body.sidefolded nav.side .sidefoot,
 body.sidefolded nav.side .soon,body.sidefolded nav.side .sitem.sub{display:none}
 body.sidefolded .sidefold{left:54px}
}
body.nosidebar .sidefold{display:none!important}

/* Le sélecteur de style de l'en-tête suivait la règle sombre même en thème clair : blanc sur blanc.
   Cette règle passe en dernier, donc elle gagne quel que soit l'ordre des blocs au-dessus. */
body.t-epure header select,body.t-epure header .btn,body.t-epure header .avbtn,
body.t-epure .top select,body.t-epure .top .btn,body.t-epure .top .avbtn{color:var(--ink);border-color:var(--line);background:var(--card)}
body.t-epure header select:hover,body.t-epure .top select:hover{background:var(--hov,#EDE7DE)}

/* Sur un téléphone, l'en-tête doit garder son menu : les sélecteurs cèdent la place. */
@media(max-width:700px){
 header{padding:10px 12px;gap:8px}
 header .wordmark small{display:none}
 header select{min-width:0}
 header #projsel{flex:1 1 70px;max-width:150px;min-width:0;text-overflow:ellipsis}
 header .spacer{flex:1 1 auto;min-width:0}
 header .menuwrap{flex:none}
}
@media(max-width:520px){
 header #thbtn{display:none}
 header #projsel{max-width:120px}
}

/* l'extension du navigateur : d'où vient la fiche */
.extband{font-size:12.5px;line-height:1.45;color:var(--ink2);background:var(--bg2,#f4f2ee);border-radius:8px;padding:8px 11px;margin-bottom:12px}
.extband div{color:var(--ink3)}
.extlien{font-size:12px;color:var(--ink3);margin:-4px 0 10px}
/* v1301 : les commandes, et l'écart avec ce que le client a validé */
.cmdtot{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--ink2);padding-top:0}
.cmdgrp{border-top:1px solid var(--line,#e6e1d8);padding:6px 0 4px}
.cmdgh{display:flex;align-items:center;gap:10px;padding:8px 16px 4px}
.cmdgh .sub{font-size:12px;color:var(--ink3)}
.cmdgh .spacer{flex:1}
.cmdrow{display:flex;align-items:center;gap:12px;padding:8px 16px;border-radius:10px}
.cmdrow:hover{background:var(--bg2,#f6f4f0)}
.cmdrow.late{background:#fdf0ec}
.cmdth{width:42px;height:42px;border-radius:7px;object-fit:cover;flex:none;background:#ede7de}
.cmdth.e{display:inline-block}
.cmdin{flex:1;min-width:0;font-size:13px}
.cmdin .ref{font-weight:600;margin-right:4px}
.cmdm{font-size:12px;color:var(--ink3);display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:2px}
.cmdm .sep{color:var(--ink3);opacity:.6}
.cmdst{display:flex;flex:none;border:1px solid var(--line,#e6e1d8);border-radius:9px;overflow:hidden}
.cmdst button{border:0;background:transparent;font:inherit;font-size:11.5px;padding:5px 8px;cursor:pointer;color:var(--ink3);white-space:nowrap}
.cmdst button.on{background:#e7efe9;color:#2f5e45}
.cmdst button.cur{background:#3f7a5b;color:#fff;font-weight:600}
.cmdst button+button{border-left:1px solid var(--line,#e6e1d8)}
.cmdhist{margin-top:12px;font-size:12px;color:var(--ink2)}
.cmdhist summary{cursor:pointer;color:var(--ink3)}
.ecup{color:#a3361b;font-weight:600}
.ecdn{color:#2f6e4a;font-weight:600}
.cdelta{font-size:12px;font-weight:600;margin-top:3px}
.cdelta.up{color:#a3361b}
.cdelta.dn{color:#2f6e4a}
.ctot{display:flex;gap:16px;flex-wrap:wrap}
@media (max-width:700px){
 .cmdrow{flex-wrap:wrap}
 .cmdst{order:3;width:100%;overflow-x:auto}
 .cmdst button{flex:1}
}
/* la veille des pages produit (veille.js) */
.vei{display:inline-block;margin-left:4px;font-size:11px;font-weight:700;line-height:15px;min-width:15px;text-align:center;border-radius:8px;padding:0 3px;cursor:pointer;background:#feefdf;color:#8a5518}
.vei.partie,.vei.arrete{background:#fdf0ec;color:#a23a1d}
.vei-av{font-size:11.5px;opacity:.7}
td.vei-partie,td.vei-arrete{color:#a23a1d;font-weight:600}
td.vei-rupture,td.vei-prix{color:#8a5518;font-weight:600}
body.nuit .vei,body.t-nuit .vei{background:#33281c;color:#f0d3ae}
body.nuit .vei.partie,body.t-nuit .vei.partie,body.nuit .vei.arrete,body.t-nuit .vei.arrete{background:#3a231b;color:#f3c6b4}
/* v1305 : signer toute la sélection (signature.js) */
.sigask,.sigok,.sigat{display:flex;align-items:center;gap:12px;margin:12px 0 2px;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card)}
.sigask .sub,.sigok .sub,.sigat .sub{font-size:12px;color:var(--ink3);margin-top:2px}
.sigok{border-color:#bfd8c9;background:#f1f8f3}.sigok .ic{color:#2f7a4f;font-size:18px;font-weight:700}
.sigat{border-color:#ecd7b8;background:#fdf6ec}.sigat .ic{color:#8a5518;font-size:16px}
.sigsum{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;font-weight:600;margin:4px 0 8px}
.sigpadw{position:relative;margin-top:5px}
#sig_pad{width:100%;height:auto;aspect-ratio:560/170;display:block;border:1px dashed var(--line);border-radius:10px;background:#fff;touch-action:none;cursor:crosshair}
.sigeff{position:absolute;top:6px;right:6px}
.sigchk{display:flex;gap:8px;align-items:center;font-size:13px;margin:12px 0 4px;text-transform:none;letter-spacing:0;font-weight:500}
.sigchk input{width:16px;height:16px;padding:0;margin:0}
body.nuit .sigok{background:#1f2c25;border-color:#2f5a42}body.nuit .sigat{background:#2e2619;border-color:#5a4627}body.nuit #sig_pad{background:#f4f1ec}
/* v1320 : une section qui porte le nom d'une autre catégorie (« EQUIPEMENT » dans Éclairage) le dit sur son en-tête */
.secpiege{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;background:#fbe9c9;color:#8a4b0a;font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;vertical-align:middle}
/* v1321 : la case « Joindre les fiches techniques » de l'aperçu du PDF des fiches produit */
/* v1474 : l'aperçu du PDF, les réglages dans une colonne à droite, lisibles sans défiler ; sous l'aperçu sur un écran étroit */
.pvlay{display:block}
.pvif{display:block;width:100%;height:min(74vh,900px);border:1px solid var(--line);border-radius:10px;background:#fff}
.pvlay2{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start;margin-top:8px}
.pvside{display:flex;flex-direction:column;gap:12px;max-height:min(74vh,900px);overflow:auto}
.pvcard{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--card,#fff);display:flex;flex-direction:column;gap:10px}
.pvcardt{font-size:13px;font-weight:700;color:var(--ink)}
.pvft{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;text-transform:none;letter-spacing:0;color:var(--ink2);margin:0;cursor:pointer;line-height:1.35}
.pvft input{width:15px;height:15px;padding:0;margin:1px 0 0;flex:none}
.pvftm{font-size:11.5px;color:var(--ink3);line-height:1.4}.pvftm:empty{display:none}
.pvseg{display:flex;gap:0;border:1px solid var(--line);border-radius:999px;padding:2px;background:var(--bg,#f6f4f0)}
.pvseg:empty{display:none}
.pvseg .fchip{flex:1 1 0;display:flex;justify-content:center;align-items:center;border:0;background:transparent;border-radius:999px;padding:6px 8px;font-size:12.5px;text-align:center;white-space:normal;line-height:1.25}
.pvseg .fchip.on{background:var(--card,#fff);box-shadow:0 1px 3px rgba(0,0,0,.12);color:var(--ink);font-weight:600}
.pvseg .fchip[disabled]{opacity:.45;cursor:not-allowed}
.pvhub .pvf{display:flex;flex-direction:column;gap:4px;margin:0;font-size:12px;color:var(--ink3);text-transform:none;letter-spacing:0}
.pvhub .pvf input,.pvhub .pvf select{padding:7px 10px;font-size:13px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.pvhub .pvhdoc{display:none}.pvhub.docs .pvhdoc{display:flex}
.pvhubi{font-size:12px;color:var(--ink2);line-height:1.45}.pvhubi:empty{display:none}
.pvhubn{font-size:12px;color:var(--ink3);line-height:1.45}
.pvhub .pvgo{width:100%;justify-content:center;text-align:center;white-space:normal}
body.nuit .pvhub .pvf input,body.nuit .pvhub .pvf select,body.t-nuit .pvhub .pvf input,body.t-nuit .pvhub .pvf select{background:#1e2123;color:var(--ink)}
@media (max-width:900px){.pvlay2{grid-template-columns:1fr}.pvif{height:min(56vh,700px)}.pvside{max-height:none;overflow:visible}}
/* le motif de pose d'une finition (motif.js) */
.motw .motref{font-weight:400;color:var(--ink3);font-size:.8em;margin-left:6px}
.motg{display:grid;grid-template-columns:minmax(0,540px) minmax(0,1fr);gap:24px;margin-top:12px;align-items:start}
@media (max-width:860px){.motg{grid-template-columns:1fr}}
.mott{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3);margin:14px 0 6px}
.mott:first-child{margin-top:0}
.motpats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.motpat{border:1px solid var(--line);border-radius:10px;background:#fff;padding:5px;cursor:pointer;display:flex;flex-direction:column;align-items:stretch;gap:4px;font:inherit;color:var(--ink);min-width:0}
.motpat:hover{border-color:var(--ink3)}
.motpat canvas{width:100%;height:auto;border-radius:6px;display:block}
.motpat span{font-size:11px;line-height:1.25;text-align:center;min-height:2.5em;display:flex;align-items:center;justify-content:center}
.motpat.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.motl{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end}
.motw label.motc{display:flex;align-items:center;gap:6px;margin:0;text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--ink2,var(--ink));white-space:nowrap}
.motw label.motc span{color:var(--ink3)}
.motw label.motc input[type=number]{width:72px;padding:5px 7px}
.motw label.motc input[type=color]{width:34px;height:28px;padding:2px;border-radius:7px}
.motw label.motc input[type=range]{width:120px;padding:0;border:0}
.motw label.motc select{width:auto;padding:5px 7px}
.motw label.motc i{font-style:normal;color:var(--ink3);font-size:11.5px}
.motw label.motc b{font-weight:500;min-width:24px;text-align:right}
.motw label.motr1{display:flex;align-items:center;gap:7px;margin:4px 0;text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--ink)}
.motw label.motr1 input{width:auto;margin:0}
.motsrc{display:flex;gap:12px;align-items:flex-start}
.motsv{flex:0 0 84px;height:84px;border-radius:9px;background:#f6f4f0;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:10.5px;color:#8E9794;text-align:center}
.motsv img{width:100%;height:100%;object-fit:cover}
.motv{background:#f6f4f0;border-radius:12px;padding:12px;text-align:center;position:sticky;top:0}
.motv canvas{max-width:100%;max-height:52vh;border-radius:4px;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.motvi{font-size:12px;color:var(--ink3);margin-top:6px}
.motcartes{display:flex;gap:10px;margin:10px 0 4px;flex-wrap:wrap}
.motcartes figure{margin:0;text-align:center}
.motcartes canvas{width:96px;border-radius:5px;display:block;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.motcartes figcaption{font-size:11px;color:var(--ink3);margin-top:3px}
.motw .mact label.motr1{margin:0 6px 0 0}
.motia{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.motia input{flex:1;min-width:0;padding:6px 9px;font-size:12.5px}
.motia .btn{flex:none;white-space:nowrap}
.motsv.plus{flex-basis:120px;flex-wrap:wrap;gap:2px;background:none}
.motsv.plus img{width:59px;height:41px;border-radius:5px}
/* v1398 : le panneau latéral de l'extension (matieres?panneau=1) : ni en-tête ni menu, une colonne étroite */
html.panneau header,html.panneau .burger,html.panneau #side,html.panneau .sidebg{display:none!important}
html.panneau .shell{display:block}
html.panneau #main{margin:0!important;max-width:none;padding:10px 12px 90px}
html.panneau .pnlhd{display:flex;align-items:center;gap:8px;margin-bottom:8px}
html.panneau .pnlhd .btn{padding:5px 10px;font-size:12.5px}
html.panneau .pnlhd select{width:auto;padding:4px 8px;font-size:12px}
html.panneau .pnldest{background:var(--card,#fff);border:1px solid var(--line,#e4e1da);border-radius:12px;padding:10px;margin-bottom:12px}
html.panneau .pnldest label{display:block;margin:0 0 6px}
html.panneau .pnldest select{width:100%}
html.panneau .pnl2{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
html.panneau .pnlnote{font-size:12px;color:var(--ink2);margin-top:6px}
html.panneau .pnlvide,html.panneau .pnlfait{font-size:13px;color:var(--ink2);padding:14px 4px;line-height:1.5}
html.panneau .pnlfait b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}
html.panneau .pnlfait .btn{margin:10px 0}
html.panneau .pnlsrc{font-size:12px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:8px}
html.panneau #ai_out .fgrid{grid-template-columns:1fr 1fr!important}
html.panneau #ai_out .aiims{max-height:180px}
html.panneau #ai_out .aihd{flex-wrap:wrap}
html.panneau .pnlact{position:sticky;bottom:0;padding:10px 0;background:linear-gradient(transparent,var(--bg,#f6f5f2) 30%);display:flex;justify-content:flex-end}
html.panneau .pnlvu{box-shadow:0 0 0 3px rgba(65,123,116,.35);transition:box-shadow .3s}

/* ---------- les cartes (v1449) : la grande image, la fiche dessous, à remplir sur place ---------- */
.cgrid{display:grid;gap:16px;padding:14px 16px}
.cgrid.cs{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.cgrid.cm{grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.cgrid.cl{grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}
@media(max-width:520px){.cgrid.cs,.cgrid.cm,.cgrid.cl{grid-template-columns:1fr}}
.cc{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .14s}
.cc:hover{box-shadow:0 6px 20px rgba(42,46,48,.10)}
.cc.sel{border-color:var(--acc);box-shadow:0 0 0 2px rgba(244,101,48,.22)}
.cc.lkd{background:#f7f6f4}
.cimw{position:relative;aspect-ratio:4/3;background:#f6f4f0;cursor:pointer}
.cim{width:100%;height:100%;object-fit:contain;display:block}
.cimd{width:100%;height:100%;background:repeating-linear-gradient(45deg,#f6f4f0,#f6f4f0 8px,#f1eee8 8px,#f1eee8 16px);display:flex;align-items:center;justify-content:center;color:var(--ink3);font-size:11.5px}
.cimw.drop,.cc.drop .cimw{outline:2px dashed var(--acc);outline-offset:-6px}
.cck{position:absolute;top:9px;left:9px;width:17px!important;height:17px;padding:0!important;margin:0;opacity:0;transition:opacity .12s;cursor:pointer}
.cc:hover .cck,.cc.sel .cck{opacity:1}
@media(hover:none){.cck{opacity:1}}
.cst{position:absolute;top:8px;right:8px;cursor:pointer}
.cb{padding:9px 11px 12px;display:flex;flex-direction:column;gap:5px}
.chd{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-height:22px}
.chd .ref{font-size:12px;color:var(--acc);letter-spacing:.03em;white-space:nowrap}
.cc .clab{font-size:14.5px;font-weight:600;padding:3px 5px}
.cfs{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:6px 12px}
.cgrid.cs .cfs{grid-template-columns:1fr 1fr}
.cf{min-width:0;display:flex;flex-direction:column}
.cf.wide,.cf.cdim{grid-column:1/-1}
.cf label{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3);margin:0 0 0 5px;line-height:1.5}
.cf .ci{font-size:12.5px;padding:1px 5px;min-width:0}
.cf.link{position:relative}.cf.link .ci{padding-right:22px}
.cf.link .go{position:absolute;right:4px;bottom:3px;text-decoration:none;color:var(--ink3)}
.cf.link .go.off{opacity:.25;pointer-events:none}
.cdimr{display:flex;align-items:center;gap:3px}
.cdimr .ci{flex:1;width:auto}
.cdimr span,.cdimr em{font-size:11px;color:var(--ink3);font-style:normal}
.cqty .cdimr .ci:last-child{flex:0 0 52px}
#ipan textarea.cwrap{display:block;width:100%;resize:none;overflow:hidden;field-sizing:content;line-height:1.35;font-family:inherit;white-space:pre-wrap;overflow-wrap:anywhere;min-height:0}
#ipan .fgrid .fwide{grid-column:1/-1}
#ipan .flabr{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
#ipan .flabr .fgo{text-decoration:none;margin-bottom:3px;padding:2px 9px;font-size:11.5px}
.cc textarea.cwrap{display:block;width:100%;resize:none;overflow:hidden;field-sizing:content;line-height:1.35;font-family:inherit;white-space:pre-wrap;overflow-wrap:anywhere;min-height:0}
.cnote{resize:vertical;min-height:38px;line-height:1.4;font-family:inherit}
body.nuit .cc{background:var(--card);border-color:var(--line)}
body.nuit .cimw{background:#30353a}
body.nuit .cimd{background:repeating-linear-gradient(45deg,#2b3034,#2b3034 8px,#31363b 8px,#31363b 16px)}
body.nuit .cc.lkd,body.t-nuit .cc.lkd{background:rgba(255,255,255,.04)}
body.t-epure .cc{border:0;border-radius:18px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.05)}
body.t-beton .cc{border:1.5px solid #141414;box-shadow:3px 3px 0 rgba(20,20,20,.85)}
/* une carte se lit d'abord : les champs ne montrent leur cadre et leur texte d'attente qu'au survol ou en écrivant */
.cc .ci,body .cc .ci{border:1px solid transparent;border-bottom-color:var(--line2);background:transparent;box-shadow:none;border-radius:6px 6px 0 0}
.cc .ci:hover{border-color:var(--line);border-radius:6px}
.cc .ci:focus{border-color:var(--acc);background:#fff;border-radius:6px}
body.nuit .cc .ci:focus{background:#1f2326}
.cc .ci.ro,.cc .ci[readonly]{border-bottom-color:transparent}
.cc:not(:hover) .ci:not(:focus)::placeholder{opacity:0}
.cc .clab{border-bottom-color:transparent}

/* ---------- le volet de la fiche (v1452) : à droite de la liste, la liste reste visible et défile ---------- */
#ipan{flex:0 0 440px;width:440px;position:sticky;top:var(--iptop,52px);height:calc(100vh - var(--iptop,52px));overflow:auto;
 background:var(--card,#fff);border-left:1px solid var(--line);padding:16px 18px 18px;box-sizing:border-box;z-index:15}
#ipan .ipx{float:right;position:sticky;top:-8px;z-index:3;margin:-8px -8px 0 0;width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--ink3);font-size:21px;line-height:1;cursor:pointer}
#ipan .ipx:hover{background:var(--line2);color:var(--ink)}
#ipan .ipt{font-size:16px;margin:0 30px 2px 0;line-height:1.3}
#ipan .msub{font-size:12px;color:var(--ink3);margin-bottom:0}
/* v1475 : le titre de la fiche reste en haut du volet quand il défile (le × aussi) */
#ipan .ipthd{position:sticky;top:-16px;z-index:2;background:var(--card,#fff);margin:-16px -18px 12px;padding:16px 18px 10px;border-bottom:1px solid var(--line2)}
#ipan .fgrid{grid-template-columns:1fr 1fr}
#ipan .mact{position:sticky;bottom:-18px;background:var(--card,#fff);padding:12px 0 2px;margin-top:12px;border-top:1px solid var(--line2);flex-wrap:wrap;gap:6px}
#ipan #ipv{width:100%!important;max-width:100%;aspect-ratio:16/9!important;background-size:contain!important}
#ipan > .ipin > div[style*="display:flex"] > div:first-child{flex:1 1 100%!important}
#main tr.it.ipcur td{background:rgba(58,124,136,.08)}
#main tr.it.ipcur td:first-child{box-shadow:inset 3px 0 0 var(--acc)}
/* v1466 (Eric, 17/10 : « the card selected should have a color or something around it so we know what is selected ») :
   la carte ouverte dans le volet porte un anneau franc, quel que soit le thème (un contour : aucun thème ne le retire) */
#main .cc.ipcur,#main .gc.ipcur{border-color:var(--acc);outline:3px solid var(--acc);outline-offset:2px;box-shadow:0 0 0 7px rgba(58,124,136,.16),0 8px 22px rgba(42,46,48,.12)}
#main .cc.ipcur .chd{background:rgba(58,124,136,.09);border-radius:8px}
/* v1466 : la barre de la catégorie reste en haut quand la liste ou les cartes défilent ; la carte qui la porte coupe sans
   devenir un cadre qui défile (overflow:clip), sinon la barre ne pourrait pas rester collée */
#main .card.bk{overflow:clip}
@supports not (overflow:clip){#main .card.bk{overflow:visible}}
@media(min-width:701px){
 #main .card.bk>.hd{position:sticky;top:var(--hdtop,52px);z-index:12;background:var(--card,#fff);border-radius:var(--rad,14px) var(--rad,14px) 0 0}
 #main .card.bk>.hd.colle{box-shadow:0 6px 14px -8px rgba(42,46,48,.28);border-radius:0}
}
body.ipan-on main{min-width:0}
@media(max-width:900px){
 #ipan{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;height:76vh;border-left:0;border-top:1px solid var(--line);
  border-radius:16px 16px 0 0;box-shadow:0 -10px 34px rgba(0,0,0,.18);z-index:55}
 #ipan .fgrid{grid-template-columns:1fr 1fr}
}

/* v1479 : « Par le sens » (js/matieres/imagessens.js) : le bloc sous l'en-tête de la bibliothèque d'images, d'une catégorie, de la matériauthèque */
.matsens{padding:8px 16px 10px;border-bottom:1px solid var(--line2)}
.matsens h3{margin:0 0 8px;font-size:13px;font-weight:600}
.matsens h3 span{font-weight:400;color:var(--ink3);margin-left:6px}
.matsens .vi{font-size:12.5px;color:var(--ink3)}
.matsens .vi.ko,.matsens .ko{color:#b3412f}
.matsens .sensgrille{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:0 0 8px}
.matsens .sensc{border:1px solid var(--line);border-radius:12px;background:var(--card,#fff);padding:0 0 8px;text-align:left;cursor:pointer;font:inherit;color:var(--ink);overflow:hidden;display:flex;flex-direction:column;gap:3px;min-width:0}
.matsens .sensc:hover{border-color:var(--acc,#417b74);box-shadow:0 2px 10px rgba(0,0,0,.08)}
.matsens .sensc.pale{opacity:.62}.matsens .sensc.pale:hover{opacity:1}
.matsens .sensc .im{display:block;aspect-ratio:4/3;background:#EDE7DE center/cover no-repeat;border-bottom:1px solid var(--line2)}
.matsens .sensc b{font-size:12.5px;font-weight:600;padding:4px 9px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.matsens .sensc i{font-style:normal;font-size:11px;color:var(--ink3);padding:0 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.matsens .sensetat{margin-top:4px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.matsens .sensetat .lien{border:0;background:none;padding:0;font:inherit;font-size:12.5px;color:var(--acc,#417b74);text-decoration:underline;cursor:pointer}