/* ===========================================================================
   socle-ui.css · le langage visuel commun aux neuf applications.
   Chargé par chaque application AVANT son propre <style>, pour que les règles
   locales gardent la priorité pendant la migration, écran par écran.

   Tout est préfixé « su- » : rien ici ne peut écraser une classe existante.
   Les couleurs propres à chaque application (--ink, --line, --card…) ne sont
   pas touchées ; le jeu ci-dessous vit à côté, le temps de la bascule.
   =========================================================================== */

:root{
  /* fond kraft, surfaces, encres */
  --su-paper:#EFEBE4;
  --su-card:#FFFFFF;
  --su-card2:#F7F4EF;
  --su-ink:#1E2322;
  --su-ink2:#5B6563;
  --su-ink3:#8E9794;
  --su-line:#DFD8CE;
  --su-line2:#EDE7DE;

  /* crayon de marquage : un seul accent, partout */
  --su-accent:#3a7c88;
  --su-accent-soft:#E4EEF0;
  --su-on-accent:#FFFFFF;

  /* sémantique : indépendante de l'accent */
  --su-pass:#2F7D5B;
  --su-fail:#BF3B2E;
  --su-na:#8E9794;
  --su-warn:#96691E;
  --su-pass-soft:#E6F1EB;
  --su-fail-soft:#FBE7E4;

  --su-shadow:0 1px 2px rgba(30,35,34,.05),0 8px 24px -16px rgba(30,35,34,.25);
  --su-radius:15px;
  --su-radius-sm:11px;

  /* la signalétique de chantier pour les titres et les étiquettes,
     une linéale humaniste pour le texte, une chasse fixe pour ce qui s'aligne */
  --su-display:"Barlow Semi Condensed","Arial Narrow",Arial,system-ui,sans-serif;
  --su-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --su-mono:"Chivo Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

/* Le thème sombre suit le thème choisi dans l'application, jamais le réglage de
   l'appareil.
   Il l'a suivi, et c'était un défaut : un téléphone en mode sombre faisait
   basculer les jetons de cette feuille pendant que l'application, restée en
   thème clair, gardait ses fonds blancs. L'encre partagée passait à #EDE9E3 sur
   du blanc, et les entrées du menu ☰ devenaient illisibles. Les dix
   applications posent leur thème sur le corps de la page : c'est ce choix, et
   lui seul, qui fait foi. */
body.t-nuit,body.dark,.su-dark{
  --su-paper:#131615; --su-card:#1B1F1E; --su-card2:#222725;
  --su-ink:#EDE9E3; --su-ink2:#A6AFAC; --su-ink3:#767F7C;
  --su-line:#2E3432; --su-line2:#252A29;
  --su-accent:#7FB3BC; --su-accent-soft:#17332F;
  --su-pass:#55A57E; --su-fail:#E0655A; --su-na:#767F7C;
  --su-pass-soft:#1B2C24; --su-fail-soft:#3A2320;
  --su-shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -16px rgba(0,0,0,.8);
}

/* ---------- titres, étiquettes, chiffres ---------- */
.su-h{font-family:var(--su-display);font-weight:600;letter-spacing:.005em;line-height:1.15;margin:0}
.su-h1{font-size:26px} .su-h2{font-size:19px} .su-h3{font-size:16px}
.su-lab{
  font-family:var(--su-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:11.5px;color:var(--su-ink3);margin:0;
}
.su-num{font-family:var(--su-mono);font-weight:600;font-variant-numeric:tabular-nums}
.su-muted{color:var(--su-ink3)}

/* ---------- surfaces ---------- */
.su-card{
  background:var(--su-card);border:1px solid var(--su-line);
  border-radius:var(--su-radius);box-shadow:var(--su-shadow);
}
.su-flat{background:var(--su-card);border:1px solid var(--su-line);border-radius:var(--su-radius)}

/* ---------- boutons ---------- */
.su-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:44px;padding:10px 15px;border-radius:var(--su-radius-sm);
  border:1px solid var(--su-line);background:transparent;color:var(--su-ink2);
  font-family:var(--su-body);font-size:14px;cursor:pointer;
}
.su-btn:focus-visible{outline:2px solid var(--su-accent);outline-offset:2px}
.su-btn--pri{
  background:var(--su-accent);border-color:var(--su-accent);color:var(--su-on-accent);
  font-family:var(--su-display);font-weight:600;font-size:16px;letter-spacing:.02em;
}
.su-btn--block{width:100%}
.su-btn--quiet{border-color:transparent;color:var(--su-ink3)}

/* ---------- sélecteur à trois positions : un verdict, pas trois boutons ---------- */
.su-seg{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid var(--su-line);border-radius:var(--su-radius-sm);overflow:hidden;
}
.su-seg>button{
  padding:11px 4px;border:0;border-right:1px solid var(--su-line);
  background:var(--su-card);color:var(--su-ink2);cursor:pointer;
  font-family:var(--su-display);font-weight:600;font-size:14px;letter-spacing:.03em;
}
.su-seg>button:last-child{border-right:0}
.su-seg>button:focus-visible{outline:2px solid var(--su-accent);outline-offset:-3px}
.su-seg>button.on{color:#fff}
.su-seg>button.on.su-p{background:var(--su-pass)}
.su-seg>button.on.su-f{background:var(--su-fail)}
.su-seg>button.on.su-n{background:var(--su-na)}

/* ---------- listes de sections ---------- */
.su-list{border:1px solid var(--su-line);border-radius:var(--su-radius);overflow:hidden}
.su-row{
  display:flex;align-items:center;gap:12px;padding:13px 14px;
  background:var(--su-card);border-bottom:1px solid var(--su-line2);cursor:pointer;
}
.su-row:last-child{border-bottom:0}
.su-row:focus-visible{outline:2px solid var(--su-accent);outline-offset:-2px}
.su-row>b{flex:1 1 auto;min-width:0;font-size:14.5px;font-weight:500}
.su-ico{
  width:34px;height:34px;border-radius:10px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:var(--su-card2);color:var(--su-ink2);
}
.su-ct{font-family:var(--su-mono);font-size:12px;font-weight:600;color:var(--su-ink3);font-variant-numeric:tabular-nums}
.su-ct--hot{color:var(--su-accent)}

/* ---------- raccourcis ---------- */
.su-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.su-tile{
  border:1px solid var(--su-line);border-radius:var(--su-radius);background:var(--su-card);
  padding:13px 9px 11px;display:flex;flex-direction:column;align-items:center;gap:8px;
  text-align:center;color:inherit;cursor:pointer;
}
.su-tile:focus-visible{outline:2px solid var(--su-accent);outline-offset:2px}
.su-tile>span{
  width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--su-accent-soft);color:var(--su-accent);
}
.su-tile>b{font-family:var(--su-display);font-weight:600;font-size:13.5px;line-height:1.2}
.su-tile--pri{background:var(--su-accent);border-color:var(--su-accent)}
.su-tile--pri>span{background:rgba(255,255,255,.18);color:#fff}
.su-tile--pri>b{color:#fff}

/* ---------- étiquettes ---------- */
.su-tag{
  display:inline-block;font-family:var(--su-display);font-size:11.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:6px;
  background:var(--su-card2);color:var(--su-ink2);
}
.su-tag--q{background:var(--su-accent-soft);color:var(--su-accent)}
.su-tag--late{background:var(--su-fail-soft);color:var(--su-fail)}
.su-tag--ok{background:var(--su-pass-soft);color:var(--su-pass)}

/* ---------- bande de photos ---------- */
.su-strip{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.su-strip::-webkit-scrollbar{display:none}
.su-shot{
  width:76px;height:76px;border-radius:var(--su-radius-sm);flex:0 0 auto;
  position:relative;overflow:hidden;border:1px solid var(--su-line);cursor:pointer;
}
.su-shot>img{width:100%;height:100%;object-fit:cover;display:block}
.su-shot>.su-rm{
  position:absolute;top:4px;right:4px;width:19px;height:19px;border-radius:50%;
  background:rgba(22,25,24,.72);color:#fff;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;
}
.su-addshot{
  width:76px;height:76px;border-radius:var(--su-radius-sm);flex:0 0 auto;cursor:pointer;
  border:1px dashed var(--su-line);background:transparent;color:var(--su-ink3);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-family:var(--su-display);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;
}

/* ---------- barre du bas ---------- */
/* l'onglet Croquis est un vrai lien : même habit, sans le soulignement */
.su-tabs>a{text-decoration:none;color:inherit}
.su-tabs{
  display:grid;border-top:1px solid var(--su-line2);background:var(--su-card);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.su-tabs>button,.su-tabs>a{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:9px 4px 11px;border:0;background:transparent;color:var(--su-ink3);cursor:pointer;
  font-family:var(--su-display);font-size:11.5px;font-weight:600;letter-spacing:.03em;
}
.su-tabs>button.on,.su-tabs>a.on{color:var(--su-accent)}
.su-tabs>button:focus-visible,.su-tabs>a:focus-visible{outline:2px solid var(--su-accent);outline-offset:-3px}

/* ---------- rien ne doit dépasser sur un téléphone ---------- */
@media (max-width:700px){
  .su-card,.su-flat,.su-list{max-width:100%}
  .su-quick{gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .su-btn,.su-row,.su-tile,.su-tabs>button,.su-tabs>a{transition:none!important}
}

/* ===========================================================================
   Tableaux repliés en fiches sous 700 px.
   Posé par socle-mobile.js, qui ajoute la classe et les intitulés de colonne.
   Un tableau de bureau reste un tableau ; sur un téléphone il devient une
   pile de fiches lisibles, sans défilement latéral.
   =========================================================================== */
@media (max-width:700px){

  table.su-mt{
    display:block; width:100%;
    min-width:0 !important; max-width:100%;
    table-layout:auto; border-collapse:separate; border-spacing:0;
    background:transparent;
  }
  table.su-mt>thead{display:none}
  table.su-mt tr[data-hrow]{display:none}
  table.su-mt>tbody,table.su-mt>tfoot{display:block;width:auto}

  table.su-mt tr{
    display:block; width:auto;
    background:var(--su-card);
    border:1px solid var(--su-line);
    border-radius:var(--su-radius-sm);
    padding:10px 12px; margin:0 0 8px;
  }

  /* une ligne de fiche : intitule a gauche, valeur a droite, sur une seule ligne.
     Empiler l'un sous l'autre doublait la hauteur et rendait la liste
     interminable a faire defiler. */
  table.su-mt td{
    display:flex; align-items:baseline; justify-content:space-between; gap:12px;
    width:auto !important; min-width:0 !important; max-width:100%;
    padding:4px 0; border:0;
    text-align:right !important; white-space:normal;
    font-size:13.5px; line-height:1.3; color:var(--su-ink);
  }
  table.su-mt td+td{border-top:1px solid var(--su-line2)}
  table.su-mt td:empty{display:none}

  table.su-mt td[data-l]:before{
    content:attr(data-l); flex:0 0 auto; text-align:left;
    font-family:var(--su-display); font-size:10.5px; font-weight:600;
    text-transform:uppercase; letter-spacing:.08em;
    color:var(--su-ink3); white-space:nowrap;
  }

  /* la cellule qui identifie la ligne : c'est le titre de la fiche */
  table.su-mt td[data-t]{
    display:block; text-align:left !important;
    font-size:15.5px; line-height:1.28; font-weight:600; color:var(--su-ink);
    padding:0 0 7px; border-top:0;
  }
  table.su-mt td[data-t]:before{display:none}
  table.su-mt td[data-t]+td{border-top:0}

  /* un texte long ne tient pas en face de son intitule : il repasse dessous */
  table.su-mt td.su-long{display:block; text-align:left !important}
  table.su-mt td.su-long:before{display:block; margin-bottom:1px}

  /* intertitres de section (th au milieu du corps) */
  table.su-mt tr[data-sec]{
    background:transparent; border:0; border-radius:0;
    padding:14px 2px 4px; margin:0;
  }
  table.su-mt tr[data-sec] th{
    display:block; width:auto; text-align:left; padding:0; border:0;
    font-family:var(--su-display); font-size:11px; font-weight:600;
    text-transform:uppercase; letter-spacing:.09em; color:var(--su-ink3);
  }

  /* les cellules d'action gardent leurs boutons en ligne */
  table.su-mt td:has(button),table.su-mt td:has(a.btn),
  table.su-mt td:has(select),table.su-mt td:has(input),table.su-mt td:has(textarea){
    flex-wrap:wrap; align-items:center; gap:6px; padding-top:7px;
  }
  table.su-mt td:has(select),table.su-mt td:has(input),table.su-mt td:has(textarea){
    display:block; text-align:left !important;
  }
  table.su-mt td:has(select):before,table.su-mt td:has(input):before,table.su-mt td:has(textarea):before{
    display:block; margin-bottom:3px;
  }
  table.su-mt td select,table.su-mt td input,table.su-mt td textarea{max-width:100%}

  /* le conteneur n'a plus rien à faire défiler latéralement */
  .wrap:has(>table.su-mt),.tblwrap:has(>table.su-mt),
  .card:has(>table.su-mt),.scroll:has(>table.su-mt){overflow-x:visible}

  /* grilles de bureau à largeur forcée : elles passent en une colonne */
  .g-grid{grid-template-columns:1fr !important; min-width:0 !important}
}

/* ===========================================================================
   Barre du bas et allègement de l'en-tête sur téléphone.
   Posée par socle-mobile.js à partir de la navigation de chaque application.
   =========================================================================== */
@media (max-width:700px){

  nav.su-tabs.su-fixed{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:var(--su-card);
    border-top:1px solid var(--su-line);
    box-shadow:0 -1px 14px -6px rgba(30,35,34,.28);
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  nav.su-tabs.su-fixed>button,nav.su-tabs.su-fixed>a{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    min-height:56px; padding:8px 3px 9px;
    border:0; background:transparent; cursor:pointer;
    color:var(--su-ink3);
    font-family:var(--su-display); font-weight:600; letter-spacing:.02em;
    -webkit-tap-highlight-color:transparent;
  }
  nav.su-tabs.su-fixed>button>svg,nav.su-tabs.su-fixed>a>svg{width:22px;height:22px;flex:0 0 auto}
  nav.su-tabs.su-fixed>button>i,nav.su-tabs.su-fixed>a>i{
    font-style:normal; font-size:10.5px; line-height:1.1;
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  nav.su-tabs.su-fixed>button.on,nav.su-tabs.su-fixed>a.on{color:var(--su-accent)}
  nav.su-tabs.su-fixed>button:active,nav.su-tabs.su-fixed>a:active{background:var(--hov,var(--su-card2))}

  /* la place prise par la barre, pour que rien ne se cache dessous */
  body.su-hastabs{padding-bottom:calc(60px + env(safe-area-inset-bottom,0)) !important}
  body.su-hastabs .burger{bottom:auto}

  /* la navigation d'origine fait double emploi une fois la barre posée */
  body.su-hastabs #mnav,
  body.su-hastabs nav.nav,
  body.su-hastabs>.tabs{display:none !important}

  /* En-tête étroit : on ne garde que ce qui sert d'un pouce, et le reste
     vit dans le menu. « Signaler » y est déjà, posé par socle-mobile.js ;
     il restait pourtant dans la barre du Hub et pas dans celle du portail,
     faute de place, si bien que les deux barres ne se ressemblaient plus.
     Il en sort partout : une seule règle, le même résultat sur chaque page. */
  /* Pilotage n'a pas de <header> : sa barre est « .top-in ». Sans elle dans
     la liste, la règle ne s'y appliquait pas et sa barre restait la seule à
     porter l'aide et « Signaler » sur un téléphone. */
  header .helpq,       .top-in .helpq,
  header .su-helpq,    .top-in .su-helpq,
  header #fbbtn,       .top-in #fbbtn,
  header .su-fbbtn,    .top-in .su-fbbtn,
  header select.thsel, .top-in select.thsel{display:none !important}
  header{gap:8px}
}

/* ---------- en-têtes de carte pliés (posé par socle-mobile.js) ---------- */
@media (max-width:700px){
  .su-more{display:none;flex:1 0 100%;flex-wrap:wrap;gap:7px;align-items:center}
  .su-open>.su-more{display:flex}
  .su-moretog{flex:0 0 auto;letter-spacing:.08em;line-height:1}
  .hd{flex-wrap:wrap}
}

/* ---------- petit sélecteur à deux ou trois positions, dans un menu ---------- */
.su-seg2{display:inline-flex;border:1px solid var(--su-line);border-radius:9px;overflow:hidden;width:100%}
.su-seg2>button{
  flex:1 1 0;min-width:0;padding:8px 6px;border:0;border-right:1px solid var(--su-line);
  background:transparent;color:var(--su-ink2);cursor:pointer;
  font-family:var(--su-display);font-weight:600;font-size:13px;white-space:nowrap;
}
.su-seg2>button:last-child{border-right:0}
.su-seg2>button.on{background:var(--acc,var(--su-accent));color:#fff}
/* une coche, pour qu'on voie sans hesiter lequel est actif */
.su-seg2>button.on:before{content:"✓ ";font-weight:700}

/* ---------- l'onglet de repli du menu latéral ----------
   Il était dessiné comme une pastille posée sur le fond, avec son ombre :
   là où la barre n'avait pas de bord, il flottait au milieu de rien.
   Il devient une languette discrète prise dans le bord, sans ombre. */
/* Elle était discrète au point d'être introuvable : blanche sur blanc, opacité .75,
   14 px de large. Elle prend la couleur d'accent, comme la languette du téléphone,
   et de quoi être visée. Discrète ne doit pas vouloir dire invisible. */
/* Retour à la couleur de l'interface : l'accent en pleine surface faisait tache.
   Ce qui la rendait introuvable n'était pas sa couleur mais son absence de contour
   sur un fond de la même valeur. Elle garde donc le fond de la carte, avec un bord
   franc et un chevron lisible, et reste petite. */
button.sidefold{
  width:13px;height:38px;
  border:1px solid var(--su-line,#d9d5cd);border-left:0;
  border-radius:0 6px 6px 0;
  background:var(--sel,var(--su-accent-soft,#E4EEF0));color:var(--acc,var(--su-accent,#3a7c88));
  font-size:11px;font-weight:700;line-height:1;font-family:var(--su-body);
  box-shadow:1px 1px 5px rgba(0,0,0,.07);
  opacity:1;transition:filter .15s,color .15s;
}
button.sidefold:hover{color:var(--acc,var(--su-accent,#3a7c88));filter:brightness(.94)}
/* La même languette, prise dans le bord gauche du panneau de droite (le petit
   calendrier des échéances). Elle portait la couleur de la carte sur une carte
   blanche : personne ne la trouvait. « body » devant, sinon la règle de la page,
   plus loin dans la cascade et de même poids, reprend la main. */
/* Elle était posée à left:-16px, donc à l'extérieur du panneau. Or le panneau est
   une carte en overflow:hidden : elle était découpée et n'apparaissait jamais.
   Elle se range à l'intérieur du bord gauche, arrondie du bon côté. */
body button.sidefold.tkfold{
  border:1px solid var(--su-line,#d9d5cd);border-left:0;
  border-radius:0 6px 6px 0;
  background:var(--sel,var(--su-accent-soft,#E4EEF0));color:var(--acc,var(--su-accent,#3a7c88));
  width:13px;height:38px;left:0;top:18px;font-size:11px;font-weight:700;
  box-shadow:1px 1px 5px rgba(0,0,0,.07);opacity:1;
}
body button.sidefold.tkfold:hover{color:var(--acc,var(--su-accent,#3a7c88));filter:brightness(.94)}
button.sidefold:focus-visible{opacity:1;outline:2px solid var(--su-accent);outline-offset:1px}

/* ---------- le titre de l'application ----------
   Quatre implantations differentes existaient : 15, 18, 24 et 26 px, et le nom
   de l'application n'apparaissait pas toujours. On les aligne toutes ici. */
.wordmark,.logo,header .wm,header .wm>span{
  font-family:var(--su-display) !important;font-weight:700 !important;
  font-size:20px !important;letter-spacing:-.02em !important;line-height:1.1;
  display:inline-flex;align-items:baseline;gap:7px !important;
  margin:0 !important;flex:0 0 auto !important;min-width:176px;
}
header .wm b,.su-mark{font-weight:700 !important}
/* La même place dans les neuf applications : une barre de 54 px, le titre calé à 16 px du bord. */
header,.top>.top-in{
  min-height:54px;box-sizing:border-box;align-items:center !important;
  padding-top:0 !important;padding-bottom:0 !important;padding-left:16px !important;padding-right:16px !important;
}
@media (max-width:700px){header,.top>.top-in{min-height:50px;padding-left:12px !important;padding-right:12px !important}}
.wordmark>small,.logo>small,#hdtab{
  font-family:var(--su-body);font-weight:600;
  font-size:11px !important;letter-spacing:.1em;text-transform:uppercase;
  color:var(--su-ink3);margin:0 !important;white-space:nowrap;
}
/* Chantier et Matieres posent la taille en attribut : il faut la meme force */
.su-mark{font-family:var(--su-display);font-weight:700;font-size:20px;letter-spacing:-.02em}
/* ---------- le mot « hub. » ----------
   Le mot Hub des en-têtes devient « hub. » en Space Grotesk, dans la couleur de l'icône
   d'onglet de l'application : chaque application a la sienne, le mot la suit.
   socle-mobile.js fait l'échange et pose data-su-app sur <html> ; la police est servie
   avec le site (space-grotesk-600.woff2), rien ne vient d'ailleurs. */
@font-face{font-family:"Space Grotesk";font-weight:600;font-style:normal;font-display:swap;src:url("space-grotesk-600.woff2") format("woff2")}
.su-hub{font-family:"Space Grotesk",var(--su-display),sans-serif !important;font-weight:600 !important;
  font-size:21px !important;letter-spacing:-.03em !important;line-height:1;text-transform:none !important;
  color:var(--su-hub,#426e74) !important}
@media (max-width:700px){.su-hub{font-size:19px !important}}
:root{--su-hub:#426e74;--su-hub-nuit:#8fc3ca}
:root[data-su-app="ch"]{--su-hub:#2E7048;--su-hub-nuit:#7fc79a}
:root[data-su-app="pg"]{--su-hub:#E76130;--su-hub-nuit:#f5c0ac}
:root[data-su-app="ca"]{--su-hub:#C9764F;--su-hub-nuit:#e9c8b9}
:root[data-su-app="me"]{--su-hub:#3D5E8C;--su-hub-nuit:#9db4d4}
:root[data-su-app="ma"]{--su-hub:#6b7a80;--su-hub-nuit:#d3dbde}
:root[data-su-app="pi"]{--su-hub:#6D2E46;--su-hub-nuit:#bd9c9c}
:root[data-su-app="te"]{--su-hub:#5A4A94;--su-hub-nuit:#bdb7d4}
:root[data-su-app="so"]{--su-hub:#A67C1B;--su-hub-nuit:#d9c48a}
:root[data-su-app="di"]{--su-hub:#23304A;--su-hub-nuit:#E3B44B}
body.nuit .su-hub{color:var(--su-hub-nuit,#5AA0AB) !important}
@media (max-width:700px){
  .wordmark,.logo,.su-mark{font-size:18px !important}
  .wordmark>small,.logo>small,#hdtab{font-size:10px !important}
}

/* ---------- le menu ☰, identique dans les neuf applications ----------
   Rempli par socle-mobile.js. Les applications gardaient chacune sa mise en
   forme : intitulés de groupe de tailles différentes, espacements différents. */
/* Les intitulés de groupe étaient en --su-ink3 : du gris clair, en capitales,
   en 10,5 px. Trois fois de quoi être illisible. --su-ink2 les ramène à un
   contraste correct sans les faire passer devant les entrées elles-mêmes. */
#appmenu .grp{
  font-family:var(--su-body);font-weight:700;font-size:10.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--su-ink2);
  padding:13px 14px 5px;
}
#appmenu .grp:first-child{padding-top:11px}
#appmenu>a{
  display:block;padding:9px 14px;text-decoration:none;
  font-family:var(--su-body);font-size:14px;line-height:1.3;
  color:var(--su-ink);cursor:pointer;
}
#appmenu>a:hover{background:var(--hov,var(--su-card2))}
#appmenu>a,#appmenu>a>span{opacity:1}
/* le menu ne dépasse jamais l'écran : sur une tablette il se coupait au tiers et rien ne défilait */
#appmenu{max-height:calc(100vh - 64px);overflow-y:auto;overscroll-behavior:contain;min-width:290px}
#appmenu>a>span{white-space:nowrap}
/* un petit trait d'icône devant chaque entrée, gris, 15 px : un repère, pas un décor */
#appmenu>a{display:flex;align-items:center;gap:10px}
#appmenu>a>svg{width:15px;height:15px;flex:none;color:var(--su-ink3);stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#appmenu>a.here>svg{color:var(--su-accent)}

/* Les icônes du menu ☰ sont recopiées dans le menu latéral, qui se replie en
   colonne d'icônes. Le trait et le vide viennent d'ici : sans eux, un cercle
   ou un carré part en aplat noir, et la colonne devient une suite de taches. */
nav.side a .ic>svg,nav.side button.nv .ic>svg{
  stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
#appmenu>a.here{font-weight:600;background:var(--su-accent-soft);color:var(--su-accent)}
#appmenu>a:focus-visible{outline:2px solid var(--su-accent);outline-offset:-2px}

/* ---------- la fenêtre d'aide du bouton « ? » (posée par socle-mobile.js) ---------- */
.su-aide{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(30,35,34,.42);
}
.su-aide-boite{
  background:var(--su-card);color:var(--su-ink);
  border:1px solid var(--su-line);border-radius:var(--su-radius);
  box-shadow:0 18px 50px rgba(0,0,0,.22);
  max-width:540px;width:100%;max-height:80vh;overflow:auto;padding:20px 22px;
  font-family:var(--su-body);
}
.su-aide-boite h2{font-family:var(--su-display);font-size:18px;margin:0 0 8px;letter-spacing:-.01em}
.su-aide-boite p{margin:0 0 12px;font-size:13.5px;line-height:1.55;color:var(--su-ink2)}
.su-aide-boite ol{margin:0;padding-left:20px}
.su-aide-boite li{font-size:13.5px;line-height:1.55;margin:6px 0}
.su-aide-pied{display:flex;justify-content:flex-end;margin-top:16px}
.su-helpq{
  width:34px;height:34px;min-width:34px;flex:0 0 auto;border-radius:50%;
  border:1px solid var(--su-line);background:transparent;color:inherit;
  font:inherit;font-size:14px;cursor:pointer;line-height:1;
}
/* Signaler : même famille que le « ? », posé juste après lui dans chaque en-tête. */
.su-fbbtn{
  height:34px;flex:0 0 auto;border-radius:999px;padding:0 13px;
  border:1px solid var(--su-line);background:transparent;color:inherit;
  font:inherit;font-size:13px;cursor:pointer;line-height:1;white-space:nowrap;
}
.su-fbbtn:hover{border-color:var(--su-accent);color:var(--su-accent)}
@media(max-width:700px){ .su-fbbtn{padding:0 9px;font-size:12px} }

/* ---------- logos clients clairs sur les styles clairs ----------
   La classe est posée par socle-mobile.js après lecture de l'image.
   Classique a un en-tête sombre : rien à faire, la règle ne s'y applique pas. */
/* Logo clair et gris : on le retourne. Il devient sombre, garde sa forme et se
   passe du cadre, qui lui donnait l'air d'un autocollant collé sur la page. */
body.t-epure img.su-logo-inv,
body.t-studio img.su-logo-inv{ filter:invert(1); mix-blend-mode:normal; background:none; padding:0 }

/* Logo clair mais coloré : le retourner fausserait ses couleurs, on lui rend le
   fond sombre pour lequel il a été dessiné. */
body.t-epure img.su-logo-clair,
body.t-studio img.su-logo-clair{
  background:#1E2322;
  padding:4px 9px;
  border-radius:7px;
  box-sizing:content-box;
}

/* ---------- matériauthèque : standards de l'agence et gamme de budget ---------- */
.libstar{
  position:absolute;top:7px;left:7px;z-index:2;
  width:26px;height:26px;border-radius:50%;
  border:1px solid var(--su-line);background:rgba(255,255,255,.92);
  color:var(--su-ink3);font-size:14px;line-height:1;cursor:pointer;padding:0;
}
.libstar:hover{color:var(--su-accent)}
.libstar.on{color:#C08A1E;border-color:#E3CE9A;background:#FFF8E8}
td .libstar{position:static;width:22px;height:22px;font-size:13px;background:transparent;border-color:transparent}
.gc{position:relative}
.gc.std{box-shadow:inset 0 0 0 2px #E3CE9A}
.libgam{
  display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.04em;
  padding:2px 7px;border-radius:5px;white-space:nowrap;vertical-align:middle;
}
.gc>.libgam{position:absolute;top:7px;right:7px;z-index:2}
.libgam.g-eco{background:#E6F1EB;color:#2F7D5B}
.libgam.g-courant{background:#EDEBE5;color:#5B6563}
.libgam.g-haut{background:#EFE6F3;color:#6A4B86}

/* ---------- logo client sur les styles clairs ----------
   Le portail retourne les logos et les fond en « screen » pour qu'ils tiennent
   sur l'en-tête noir de Classique. Épuré et Studio ont un en-tête clair : ce
   traitement y lave l'image et ne laisse qu'un rectangle gris. On l'annule, et
   la plaque sombre posée plus haut redonne son fond aux logos blancs. */
body.t-epure #brandlogo.inv,
body.t-studio #brandlogo.inv,
body.t-epure #brandlogo.inv.bw,
body.t-studio #brandlogo.inv.bw{
  filter:none;
  mix-blend-mode:normal;
}

/* ---------- Administration : la grille personnes × projets ---------- */
/* La grille : une colonne par projet, toutes de la même largeur, et le nom du
   projet écrit verticalement juste au-dessus de sa case. Le tableau prend la
   largeur de son contenu et non celle de l'écran, sinon la colonne des noms
   avale la place et les cases partent à droite, loin de leur titre. */
.admtbl{width:auto;min-width:0}
.admtbl th.admv{
  width:36px;min-width:36px;max-width:36px;
  padding:7px 0 9px;height:156px;vertical-align:bottom;text-align:center}
.admtbl th.admv>span{
  writing-mode:vertical-rl;transform:rotate(180deg);
  display:inline-block;max-height:140px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:11.5px;font-weight:600;letter-spacing:.03em;
  color:var(--su-ink2,#565E61);text-transform:none}
.admtbl td.admc{text-align:center;width:36px;min-width:36px;max-width:36px;padding:9px 0}
.admtbl td.admc input[type=checkbox]{width:16px;height:16px;margin:0;cursor:pointer;vertical-align:middle}
.admtbl th.admn,.admtbl td.admn{
  text-align:center;width:52px;min-width:52px;
  font-family:var(--su-mono);font-weight:600;color:var(--su-ink3)}
.admtbl th.admn{writing-mode:horizontal-tb;font-size:11px;vertical-align:bottom;padding-bottom:11px}
.admtbl td.admnom{white-space:nowrap;padding-right:22px}
.admtbl .admno{color:var(--su-line);font-size:14px}
.admtbl td,.admtbl th{vertical-align:middle}
.admtbl tr:hover td{background:var(--hov,var(--su-card2,#FAF9F6))}

/* ---------- module fermé par le profil ---------- */
#su-ferme{
  position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;
  background:var(--su-bg,#F1F0EC);padding:24px;
}
#su-ferme .su-fbox{
  max-width:430px;text-align:center;background:var(--su-card,#fff);
  border:1px solid var(--su-line,#E1DFD9);border-radius:14px;padding:26px 24px;
  box-shadow:0 10px 40px rgba(0,0,0,.08);
}
#su-ferme h2{margin:0 0 8px;font-size:19px;letter-spacing:-.01em}
#su-ferme p{margin:0 0 14px;font-size:14px;color:var(--su-ink2,#565E61);line-height:1.5}
#su-ferme .su-flinks{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 14px}
#su-ferme .su-flinks a{
  font-size:13px;font-weight:600;text-decoration:none;padding:8px 14px;border-radius:999px;
  border:1px solid var(--su-line,#E1DFD9);color:var(--su-ink,#262A2C);background:transparent;
}
#su-ferme .su-flinks a:hover{border-color:var(--su-accent,var(--acc,#3a7c88));color:var(--su-accent,var(--acc,#3a7c88))}
#su-ferme .su-fsmall{font-size:11.5px;color:var(--su-ink3,#8D9499);margin:0}

/* ---------- administration : profils et modules ---------- */
.admseg{margin-right:8px}
.pflist{padding:12px 17px 4px;display:flex;flex-direction:column;gap:9px}
.pfcard{border:1px solid var(--su-line2,var(--su-line,#EDE7DE));border-radius:11px;background:var(--su-card,#fff);overflow:hidden}
.pfcard.open{border-color:var(--su-accent,var(--acc,#3a7c88));box-shadow:0 2px 14px rgba(0,0,0,.05)}
/* Le fond était sur le contenu et le titre restait blanc : la barre ressemblait
   à du contenu et le contenu à une barre. C'est l'inverse. Le titre porte le
   fond, le contenu reste blanc dessous. */
.pfhd{display:flex;align-items:center;justify-content:space-between;gap:14px;
      padding:12px 14px;cursor:pointer;
      background:color-mix(in srgb,var(--su-ink,#262A2C) 4%,transparent)}
/* Un en-tête qui ne se replie pas s'éclairait quand même au survol : la carte
   promettait un geste qu'elle ne tenait pas. Le survol suit ce qui est cliquable. */
.pfhd:not(.pfstatic):hover{background:color-mix(in srgb,var(--su-ink,#262A2C) 8%,transparent)}
.pfhd.pfstatic{cursor:default}
.pfhd b{font-size:14.5px;letter-spacing:-.005em}
.pfmeta{display:flex;align-items:center;gap:14px;font-size:11.5px;color:var(--su-ink3,#8D9499);white-space:nowrap}
.pfch{font-size:13px;color:var(--su-ink2,#565E61)}
.pfbody{padding:10px 14px 14px;border-top:1px solid var(--su-line,#E1DFD9);background:var(--su-card,#fff)}
.pfgrp{margin-top:12px}
.pfgt{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--su-ink2,#565E61);
      font-weight:700;margin-bottom:8px;padding-bottom:5px;border-bottom:1px solid var(--su-line2,#EDE7DE)}
.pfmod{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;margin:0 7px 7px 0;
       padding:7px 12px;border:1px solid var(--su-line,#E1DFD9);border-radius:999px;cursor:pointer;
       background:transparent;color:var(--su-ink2,#565E61)}
.pfmod.on{border-color:var(--su-accent,var(--acc,#3a7c88));color:var(--su-accent,var(--acc,#3a7c88));
          background:color-mix(in srgb,var(--su-accent,var(--acc,#3a7c88)) 8%,transparent);font-weight:600}
.pfmod input{margin:0}
.pfrow{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:12.5px}
.pfrow label{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--su-ink3,#8D9499);font-weight:600}
.pfact{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;
       padding-top:12px;border-top:1px solid var(--su-line,#E1DFD9)}
@media(max-width:700px){
 .pfhd{flex-direction:column;align-items:flex-start;gap:6px}
 .pfmeta{flex-wrap:wrap;gap:10px}
 .pfmod{width:100%;margin-right:0}
}

/* ---------- plus de bleu système ----------
   Les cases à cocher, les curseurs, les sélecteurs de date et la surbrillance
   du texte prennent le bleu du navigateur tant qu'on ne dit rien. accent-color
   s'hérite : posé sur la racine, il descend partout, y compris dans les
   fenêtres que les applications dessinent elles-mêmes. */
html,body,input,select,textarea{ accent-color: var(--acc, var(--su-accent, #3a7c88)); }

::selection{ background: var(--su-accent-soft,#E4EEF0); color: var(--su-ink,#262A2C); }

/* L'anneau de mise au point du clavier, bleu lui aussi par défaut. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible,
[contenteditable]:focus-visible{
  outline: 2px solid var(--acc, var(--su-accent,var(--acc,#3a7c88)));
  outline-offset: 2px;
}
input:focus, select:focus, textarea:focus{ border-color: var(--acc, var(--su-accent,var(--acc,#3a7c88))) }

/* ---------- administration : projets et profils côte à côte ---------- */
.admdeux{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:start}
.admdeux .admcol{min-width:0;padding-bottom:4px}
.admdeux .admcol+.admcol{border-left:1px solid var(--su-line,#E1DFD9)}
/* Tout était à la même hauteur : titre de colonne, carte, contenu de carte,
   même fond, même bordure. Trois niveaux se distinguent désormais. Le titre de
   colonne devient une bande tenue en haut, la carte garde son trait, et le
   contenu ouvert passe sur un fond légèrement teinté : on voit d'un coup d'œil
   ce qui contient quoi. */
.admct{
  display:flex;align-items:baseline;gap:9px;padding:11px 15px;
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--su-ink,#262A2C);
  background:color-mix(in srgb,var(--su-ink,#262A2C) 4%,transparent);border-bottom:1px solid var(--su-line,#E1DFD9);
  position:sticky;top:0;z-index:2;
}
.admct span{font-size:11.5px;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--su-ink3,#8D9499)}
.admdeux .pflist{padding:8px 15px 0}
@media(max-width:980px){
  .admdeux{grid-template-columns:1fr}
  .admdeux .admcol+.admcol{border-left:0;border-top:1px solid var(--su-line,#E1DFD9);margin-top:6px}
}

/* ---------- Signaler : la fenêtre de retour ---------- */
#su-retour{position:fixed;inset:0;z-index:9500;background:rgba(28,27,25,.38);
  display:flex;align-items:flex-start;justify-content:center;padding:60px 16px;overflow:auto}
.su-rt-box{background:var(--su-card,#fff);color:var(--su-ink,#262A2C);width:min(720px,100%);
  border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.22);padding:18px 20px 16px}
.su-rt-hd{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.su-rt-hd b{font-size:17px}
.su-rt-hd span{font-size:12.5px;color:var(--su-ink3,#8D9499);flex:1}
.su-rt-x{border:0;background:transparent;font-size:15px;cursor:pointer;color:var(--su-ink3,#8D9499);padding:2px 6px;border-radius:6px}
.su-rt-x:hover{background:var(--hov,var(--su-card2,#F7F4EF));color:var(--su-ink,#262A2C)}
#su-rt-txt{width:100%;min-height:200px;resize:vertical;font:inherit;font-size:14.5px;line-height:1.5;
  padding:12px 14px;border:1px solid var(--su-line,#E1DFD9);border-radius:11px;background:var(--su-card,#fff);color:inherit}
#su-rt-txt:focus{outline:0;border-color:var(--su-accent,var(--acc,#3a7c88));box-shadow:0 0 0 3px rgba(65,123,116,.16)}
#su-rt-txt.su-rt-vide{border-color:#BF3B2E;box-shadow:0 0 0 3px rgba(191,59,46,.15)}
.su-rt-imgs{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.su-rt-im{position:relative;width:118px;height:80px;border-radius:9px;overflow:hidden;border:1px solid var(--su-line,#E1DFD9);background:#eee}
.su-rt-im img{width:100%;height:100%;object-fit:cover;display:block}
.su-rt-im button{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;border:0;
  background:rgba(0,0,0,.6);color:#fff;font-size:11px;cursor:pointer;line-height:20px;padding:0}
.su-rt-add{width:118px;height:80px;border:1px dashed var(--su-line,#E1DFD9);border-radius:9px;display:flex;
  align-items:center;justify-content:center;cursor:pointer;color:var(--su-ink3,#8D9499);font-size:22px}
.su-rt-add:hover{border-color:var(--su-accent,var(--acc,#3a7c88));color:var(--su-accent,var(--acc,#3a7c88))}
.su-rt-add input{display:none}
.su-rt-ft{display:flex;align-items:center;gap:12px;margin-top:12px}
.su-rt-ctx{font-size:11.5px;color:var(--su-ink3,#8D9499);flex:1;font-family:var(--su-mono)}
.su-rt-send{border:0;background:var(--su-accent,var(--acc,#3a7c88));color:#fff;font:inherit;font-weight:600;font-size:14px;
  padding:10px 22px;border-radius:999px;cursor:pointer}
.su-rt-send:hover{background:#2f6a76}
.su-rt-send:disabled{opacity:.6;cursor:default}
.su-rt-merci{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 10px 16px;text-align:center}
.su-rt-merci b{font-size:18px}
.su-rt-merci span{color:var(--su-ink2,#565E61);font-size:14px;margin-bottom:8px}
@media(max-width:700px){ #su-retour{padding:14px 10px} .su-rt-box{padding:14px} #su-rt-txt{min-height:160px} }

/* ---------- retours (Hub, Administration) ---------- */
.pfcard.retnew{border-left:3px solid var(--su-accent,var(--acc,#3a7c88))}
.retst{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:#EDEBE5;color:#5B6563}
.retst.st-nouveau{background:var(--su-accent-soft,#E4EEF0);color:var(--su-accent,var(--acc,#3a7c88))}
.retst.st-traite{background:#E6F1EB;color:#2F7D5B}
.retst.st-ecarte{background:#F1F0EC;color:#8D9499}
.rettxt{white-space:pre-wrap;font-size:14px;line-height:1.55;padding:12px 0 4px}
.retimgs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.retimgs img{height:120px;max-width:220px;object-fit:cover;border-radius:8px;border:1px solid var(--su-line,#E1DFD9);cursor:zoom-in}
.admcol.admseul{padding:0 0 6px}
.gcard .gset{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px;padding:4px 14px 10px;border-top:1px solid var(--su-line2,#EDE7DE)}
.gcard .gset label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--su-ink3,#8D9499);margin:0}
.gcard .gset label>span{letter-spacing:.07em;text-transform:uppercase;font-weight:600;font-size:9.5px}
.gcard .gset select{width:100%;min-width:0}
@media(max-width:700px){ .gcard .gset{grid-template-columns:1fr 1fr} }

/* ---------- la cloche partagée ---------- */
.su-bell{position:relative;width:34px;height:34px;min-width:34px;flex:0 0 auto;border-radius:50%;
  border:1px solid var(--su-line);background:transparent;color:inherit;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;padding:0}
.su-bell i{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 5px;border-radius:999px;
  background:var(--su-accent,var(--acc,#3a7c88));color:#fff;font:700 10px/17px var(--su-body);font-style:normal;text-align:center}
.su-bell.hasnew{border-color:var(--su-accent,var(--acc,#3a7c88))}
#su-bellpanel{position:fixed;z-index:9400;width:min(380px,92vw);max-height:70vh;overflow:auto;
  background:var(--su-card,#fff);color:var(--su-ink,#262A2C);border:1px solid var(--su-line,#E1DFD9);
  border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.16)}
.su-bl-hd{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 8px;font-size:13px}
.su-bl-hd a{font-size:11.5px;color:var(--su-ink3,#8D9499);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.su-bl-it{display:block;padding:10px 14px;border-top:1px solid var(--su-line2,#EDE7DE);cursor:pointer;color:inherit;text-decoration:none}
.su-bl-it:hover{background:var(--hov,var(--su-card2,#F7F4EF))}
.su-bl-it b{display:block;font-size:13px;font-weight:600}
.su-bl-it span{display:block;font-size:12px;color:var(--su-ink2,#565E61);margin-top:2px;line-height:1.4}
.su-bl-it small{display:block;font-size:10.5px;color:var(--su-ink3,#8D9499);margin-top:3px}
#su-bellpanel .su-bl-it.su-nonlu{border-left:3px solid var(--su-accent,var(--acc,#3a7c88))}
/* Les applications ont leurs propres classes « new », « badge », etc. : le panneau ne doit
   rien en hériter. Tout ce qui compte est redit ici, avec l'identifiant en tête. */
#su-bellpanel .su-bl-it{background:transparent;border-radius:0;width:auto;margin:0;box-shadow:none;font-weight:400;text-transform:none;letter-spacing:0}
#su-bellpanel .su-bl-it:hover{background:var(--hov,var(--su-card2,#F7F4EF))}
.su-bl-vide{padding:22px 14px;font-size:13px;color:var(--su-ink3,#8D9499);text-align:center}



/* ---------- le choix du style, le même dans toutes les barres ----------
   Chaque application l'habillait à sa façon : petit avec un triangle dans le
   Hub, plus grand avec la flèche du navigateur dans le portail. Une seule
   forme, qui prend la couleur de la barre où elle se trouve. */
html body header select#thbtn#thbtn, html body .top-in select#thbtn#thbtn{
  -webkit-appearance:none;appearance:none;width:auto;max-width:170px;height:30px;margin:0;
  padding:0 28px 0 12px;border-radius:999px;cursor:pointer;
  font:inherit;font-size:12px;font-weight:500;line-height:28px;color:inherit;
  border:1px solid color-mix(in srgb, currentColor 26%, transparent);
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a8f93' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 11px center/10px 6px}
html body header select#thbtn#thbtn option, html body .top-in select#thbtn#thbtn option{color:#1c1f22;background:#fff}
/* Sur téléphone, le style reste dans la barre, réduit à un rond : la lune le
   jour, le soleil la nuit. Un toucher ouvre la liste du téléphone, Nuit comprise.
   La police reste à 16 px pour que l'iPhone ne zoome pas en ouvrant la liste. */
@media (max-width:700px){
 html body header select#thbtn#thbtn, html body .top-in select#thbtn#thbtn{
  display:inline-block!important;width:34px!important;min-width:34px!important;max-width:34px!important;height:34px;flex:0 0 auto;padding:0;border-radius:50%;
  font-size:16px;color:transparent;text-indent:60px;overflow:hidden;white-space:nowrap;
  border:1px solid var(--su-line,color-mix(in srgb, currentColor 26%, transparent));
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8f93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z'/%3E%3C/svg%3E") no-repeat center/17px 17px}
 html body.nuit header select#thbtn#thbtn, html body.nuit .top-in select#thbtn#thbtn{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9ced2' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E")}
}

/* ---------- la messagerie partagée : la bulle et son panneau ---------- */
.su-chat{position:relative;width:34px;height:34px;min-width:34px;flex:0 0 auto;border-radius:50%;
  border:1px solid var(--su-line);background:transparent;color:inherit;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;padding:0;margin:0}
.su-chat i{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 5px;border-radius:999px;
  background:var(--su-accent,var(--acc,#3a7c88));color:#fff;font:700 10px/17px var(--su-body);font-style:normal;text-align:center}
.su-chat.hasnew{border-color:var(--su-accent,var(--acc,#3a7c88))}
@media(max-width:700px){.su-chat.su-chat-carnet,.su-bell.su-bell-carnet{display:none}}
#su-chatpanel{position:fixed;z-index:9450;width:min(400px,94vw);height:min(620px,78vh);display:flex;flex-direction:column;
  background:var(--su-card,#fff);color:var(--su-ink,#262A2C);border:1px solid var(--su-line,#E1DFD9);
  border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.18);overflow:hidden;font:400 13px/1.4 var(--su-body,system-ui,sans-serif);text-align:left}
#su-chatpanel.su-fdrop{outline:2px dashed var(--su-accent,var(--acc,#3a7c88));outline-offset:-6px}
#su-chatpanel.su-fdrop .su-fm{background:var(--su-accent-soft,#E4EEF0)}
#su-chatpanel.su-plein{inset:0;width:auto;height:auto;border-radius:0;border:0;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
#su-chatpanel *{box-sizing:border-box}
#su-chatpanel button{font:inherit;color:inherit;margin:0;box-shadow:none;text-transform:none;letter-spacing:0;min-height:0;width:auto}
#su-chatpanel .su-fh{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--su-line2,#EDE7DE);flex:0 0 auto}
#su-chatpanel .su-fh>b{font-size:14px}
#su-chatpanel .su-fsp{flex:1}
#su-chatpanel .su-fht{flex:1;min-width:0;display:flex;flex-direction:column}
#su-chatpanel .su-fht b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#su-chatpanel .su-fht small{font-size:11.5px;color:var(--su-ink3,#8D9499);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#su-chatpanel .su-fx{border:0;background:none;cursor:pointer;font-size:18px;line-height:1;padding:4px 6px;border-radius:8px;color:var(--su-ink2,#565E61);display:inline-flex;align-items:center}
#su-chatpanel .su-fx:hover{background:var(--su-card2,#F7F4EF)}
#su-chatpanel .su-fret{font-size:22px;padding:0 6px 2px}
#su-chatpanel .su-fbtn{border:1px solid var(--su-line,#E1DFD9);background:var(--su-card,#fff);border-radius:999px;padding:6px 12px;cursor:pointer;font-size:12.5px;font-weight:600}
#su-chatpanel .su-fbtn.su-fpri{background:var(--su-accent,var(--acc,#3a7c88));border-color:var(--su-accent,var(--acc,#3a7c88));color:#fff}
#su-chatpanel .su-fbtn[disabled]{opacity:.45;cursor:default}
#su-chatpanel .su-fl{flex:1;overflow:auto;min-height:0}
#su-chatpanel .su-fc{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--su-line2,#EDE7DE);cursor:pointer}
#su-chatpanel .su-fc:hover{background:var(--su-card2,#F7F4EF)}
#su-chatpanel .su-fct{flex:1;min-width:0;display:flex;flex-direction:column}
#su-chatpanel .su-fct b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#su-chatpanel .su-fnl .su-fct b{font-weight:700}
#su-chatpanel .su-fct small{font-size:12px;color:var(--su-ink3,#8D9499);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#su-chatpanel .su-fct small em{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.03em;color:var(--su-ink2,#565E61);background:var(--su-card2,#F2EEE8);border-radius:5px;padding:0 5px;margin-right:4px}
#su-chatpanel .su-fcm{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:0 0 auto}
#su-chatpanel .su-fcm small{font-size:11px;color:var(--su-ink3,#8D9499)}
#su-chatpanel .su-fn{min-width:18px;height:18px;border-radius:9px;background:var(--su-accent,var(--acc,#3a7c88));color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
#su-chatpanel .su-fn.su-fnm{background:var(--su-ink3,#8D9499)}
#su-chatpanel .su-fa{flex:0 0 32px;width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700}
#su-chatpanel .su-fa.su-fg{background:var(--su-card2,#EDE7DE);color:var(--su-ink2,#565E61)}
#su-chatpanel .su-fv{padding:28px 16px;text-align:center;color:var(--su-ink3,#8D9499);font-size:12.5px}
#su-chatpanel .su-fm{flex:1;overflow:auto;min-height:0;padding:8px 12px 12px;background:var(--su-paper,#F4F1EC)}
#su-chatpanel .su-fj,#su-chatpanel .su-fnv{text-align:center;margin:10px 0 6px;font-size:11px;color:var(--su-ink3,#8D9499)}
#su-chatpanel .su-fj span{background:var(--su-card,#fff);border-radius:999px;padding:2px 10px}
#su-chatpanel .su-fnv{border-top:1px solid #d9a441;line-height:0;margin:14px 0}
#su-chatpanel .su-fnv span{background:var(--su-paper,#F4F1EC);color:#8a5a14;padding:0 8px;font-weight:600}
#su-chatpanel .su-fb{display:flex;gap:7px;align-items:flex-end;margin:4px 0;max-width:88%}
#su-chatpanel .su-fb .su-fa{flex-basis:26px;width:26px;height:26px;font-size:10px}
#su-chatpanel .su-fb.su-fmi{margin-left:auto;flex-direction:row-reverse}
#su-chatpanel .su-fbb{background:var(--su-card,#fff);border-radius:14px;border-bottom-left-radius:4px;padding:6px 10px 4px;min-width:0;box-shadow:0 1px 1px rgba(0,0,0,.05)}
#su-chatpanel .su-fmi .su-fbb{background:var(--su-accent-soft,#dcecee);border-bottom-left-radius:14px;border-bottom-right-radius:4px}
#su-chatpanel .su-fret2{font-style:italic;color:var(--su-ink3,#8D9499);font-size:12px}
#su-chatpanel .su-fqui{font-size:11.5px;font-weight:600;margin-bottom:1px}
#su-chatpanel .su-ftx{font-size:13.5px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
#su-chatpanel .su-ftx a{color:var(--su-accent,var(--acc,#3a7c88))}
#su-chatpanel .su-fq{font-size:12px;color:var(--su-ink2,#565E61);border-left:3px solid var(--su-accent,var(--acc,#3a7c88));background:rgba(0,0,0,.04);border-radius:6px;padding:3px 7px;margin:3px 0 5px;max-height:3.2em;overflow:hidden}
#su-chatpanel .su-ffs{display:flex;flex-wrap:wrap;gap:5px;margin:3px 0}
#su-chatpanel .su-fimg{max-width:220px;max-height:200px;min-width:60px;min-height:40px;border-radius:10px;display:block;object-fit:cover;background:var(--su-line2,#EDE7DE)}
#su-chatpanel .su-ff{font-size:12.5px;color:var(--su-accent,var(--acc,#3a7c88))}
#su-chatpanel .su-ffait{font-size:11.5px;color:#1e6f48;font-weight:600;margin-top:2px}
#su-chatpanel .su-fhr{display:flex;align-items:center;justify-content:flex-end;gap:3px;font-size:10.5px;color:var(--su-ink3,#8D9499);margin-top:1px}
#su-chatpanel .su-fdots{border:0;background:none;cursor:pointer;font-size:13px;line-height:1;padding:0 3px;color:var(--su-ink3,#8D9499)}
#su-chatpanel .su-ftk{border:0;background:none;cursor:pointer;padding:0 2px;margin-left:4px;color:var(--su-ink3,#8D9499);display:inline-flex;align-items:center;vertical-align:middle;opacity:0;transition:opacity .12s}
#su-chatpanel .su-fb:hover .su-ftk,#su-chatpanel .su-ftk:focus-visible{opacity:1}
#su-chatpanel .su-ftk:hover{color:var(--su-accent,#3b7a80)}
@media (hover:none){#su-chatpanel .su-ftk{opacity:.75}}
#su-chatpanel .su-fac{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;padding-top:5px;border-top:1px solid var(--su-line2,#EDE7DE)}
#su-chatpanel .su-fac button{border:1px solid var(--su-line,#E1DFD9);background:var(--su-card,#fff);border-radius:999px;padding:3px 9px;font-size:11.5px;cursor:pointer}
/* les boutons d'action et la ligne de l'heure ne se sélectionnent pas : un clic un peu appuyé
   laissait une lettre surlignée en bleu dans « En faire une tâche » */
#su-chatpanel .su-fac,#su-chatpanel .su-fhr{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#su-chatpanel .su-fac button.su-fdg{color:#9c3f3f}
#su-chatpanel .su-fco{border-top:1px solid var(--su-line2,#EDE7DE);padding:8px 10px;flex:0 0 auto;background:var(--su-card,#fff)}
#su-chatpanel .su-fr{display:flex;align-items:flex-end;gap:6px}
#su-chatpanel textarea{flex:1;resize:none;min-height:36px;max-height:140px;padding:8px 12px;border-radius:18px;border:1px solid var(--su-line,#E1DFD9);background:var(--su-card,#fff);color:inherit;font:inherit;font-size:13.5px;line-height:1.4;margin:0;width:auto;box-shadow:none}
#su-chatpanel .su-fph{height:36px;cursor:pointer;margin:0}
#su-chatpanel .su-fenv{height:36px;width:42px;padding:0;display:inline-flex;align-items:center;justify-content:center}
#su-chatpanel .su-frep{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--su-ink2,#565E61);background:rgba(0,0,0,.04);border-left:3px solid var(--su-accent,var(--acc,#3a7c88));border-radius:6px;padding:3px 7px;margin-bottom:6px}
#su-chatpanel .su-frep span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#su-chatpanel .su-fpj{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
#su-chatpanel .su-fpj span{display:inline-flex;align-items:center;gap:3px;border:1px solid var(--su-line,#E1DFD9);border-radius:8px;padding:3px;font-size:12px}
#su-chatpanel .su-fpj img{width:52px;height:52px;object-fit:cover;border-radius:6px}
#su-chatpanel .su-fnw{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-bottom:1px solid var(--su-line2,#EDE7DE)}
#su-chatpanel .su-fnw label{display:flex;flex-direction:column;gap:3px;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--su-ink3,#8D9499);margin:0}
#su-chatpanel .su-fnw select,#su-chatpanel .su-fnw input{width:100%;padding:7px 10px;border-radius:9px;border:1px solid var(--su-line,#E1DFD9);background:var(--su-card,#fff);color:inherit;font:inherit;font-size:13px;text-transform:none;letter-spacing:0;margin:0}
#su-chatpanel .su-fg2{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--su-line2,#EDE7DE);cursor:pointer;margin:0;font-size:13px;text-transform:none;letter-spacing:0;color:inherit}
#su-chatpanel .su-fg2 input{width:auto;margin:0}
#su-chatpanel .su-fg2 span{display:flex;flex-direction:column;min-width:0}
#su-chatpanel .su-fg2 small{color:var(--su-ink3,#8D9499);font-size:11.5px}
#su-chatpanel .su-finv{flex:0 0 auto;border-top:1px solid var(--su-line2,#EDE7DE);padding:8px 12px;font-size:11.5px;color:var(--su-ink3,#8D9499)}
#su-chatpanel .su-finv a{color:var(--su-accent,var(--acc,#3a7c88));cursor:pointer;text-decoration:underline;text-underline-offset:2px}

/* ---------- la fenêtre « votre retour a été traité » ---------- */
#su-notifpop{position:fixed;inset:0;z-index:9600;background:rgba(28,27,25,.42);display:flex;align-items:center;justify-content:center;padding:20px}
.su-np-box{background:var(--su-card,#fff);color:var(--su-ink,#262A2C);width:min(520px,100%);border-radius:16px;
  box-shadow:0 24px 64px rgba(0,0,0,.25);padding:22px 24px 18px;border-top:5px solid var(--su-accent,var(--acc,#3a7c88))}
.su-np-hd{font-size:19px;font-weight:700;margin-bottom:12px}
.su-np-it{padding:10px 0;border-top:1px solid var(--su-line2,#EDE7DE)}
.su-np-it:first-of-type{border-top:0}
.su-np-it b{display:block;font-size:14px;margin-bottom:3px}
.su-np-it p{margin:0;font-size:14.5px;line-height:1.55;color:var(--su-ink2,#565E61)}
.su-np-it a{display:inline-block;margin-top:6px;font-size:13px;color:var(--su-accent,var(--acc,#3a7c88));font-weight:600}
.su-np-ft{display:flex;justify-content:flex-end;margin-top:14px}

/* ---------- style Terracotta : les formes d'Épuré, la palette chaude d'Aethos ---------- */
body.t-epure.t-terre{--acc:#c9764f;--sel:#F6E6DC;--su-accent:#c9764f;--su-accent-soft:#F6E6DC}
body.t-terre .btn.pri:hover{background:#b8633d!important}

/* ---------- traduire la sélection ---------- */
.su-trbtn{position:fixed;z-index:9500;font:600 12px/1 var(--su-body);padding:7px 12px;border-radius:999px;border:0;
  background:var(--su-ink,#262A2C);color:#fff;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.su-trbtn:hover{background:var(--su-accent,#3a7c88)}
#su-trpop{position:fixed;right:18px;bottom:18px;z-index:9550;width:min(460px,92vw);max-height:60vh;overflow:auto;
  background:var(--su-card,#fff);color:var(--su-ink,#262A2C);border:1px solid var(--su-line,#E1DFD9);border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.18);padding:12px 14px 12px;font-size:13.5px;line-height:1.55}
#su-trpop .su-tr-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
#su-trpop .su-tr-x{cursor:pointer;color:var(--su-ink3,#8D9499);padding:2px 6px}
#su-trpop .su-tr-body{white-space:pre-wrap;word-break:break-word}
#su-trpop .su-tr-ft{display:flex;justify-content:flex-end;margin-top:10px}

/* ---------- tri des retours par l'assistant (Hub, Administration) ---------- */
.rettag{display:inline-block;font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--su-line2,#EDE7DE);color:var(--su-ink2,#565E61);margin-right:4px;white-space:nowrap}
.rettag.rt-bug{background:#F6DCDC;color:#8C2F2F}.rettag.rt-idee{background:#E4EEF0;color:#2C5F68}.rettag.rt-question{background:#F3EAD2;color:#7A5B12}.rettag.rt-donnees{background:#E8E3F1;color:#4F3E7A}
.rettag.rt-dbl{background:#FBE9D6;color:#8A4B10;max-width:280px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.rettag.prop{border:1px dashed var(--su-accent,#3a7c88);background:transparent;color:var(--su-accent,#3a7c88)}
.rettri{margin-top:10px;padding:9px 12px;border-radius:9px;background:var(--su-card2,#F7F4EF);font-size:12.5px;line-height:1.5}
.rettri.prop{border:1px dashed var(--su-accent,#3a7c88);background:transparent}
.rettri-l{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-bottom:4px}
.rettri-r{color:var(--su-ink,#262A2C)}
.rettri-rep{margin-top:5px;color:var(--su-ink2,#565E61)}.rettri-rep span{font-weight:600;color:var(--su-ink3,#8D9499)}

/* ---------- demander à l'agence (Hub) ---------- */
.helpq.askq{margin-right:4px}
.asko-a{margin-top:12px;padding:12px 14px;border-radius:10px;background:var(--su-card2,#F7F4EF);font-size:13.5px;line-height:1.6;max-height:50vh;overflow:auto}

/* Crédit des fonds de carte : obligatoire (OpenStreetMap, CARTO, Esri), mais discret. */
.leaflet-control-attribution{font-size:8.5px!important;line-height:1.3!important;color:#777!important;background:rgba(255,255,255,.55)!important;padding:1px 5px!important;margin:0!important;border-radius:6px 0 0 0;opacity:.55;transition:opacity .15s}
.leaflet-control-attribution a{color:#777!important;text-decoration:none}
.leaflet-container:hover .leaflet-control-attribution{opacity:.9}

/* Recherche partout */
#su-search{position:fixed;inset:0;z-index:9600;background:rgba(20,22,24,.42);display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px 16px}
.su-s-box{width:min(720px,100%);max-height:80vh;display:flex;flex-direction:column;background:var(--su-card,#fff);color:var(--su-ink,#262A2C);border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.28);overflow:hidden}
.su-s-top{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--su-line,#E1DFD9);color:var(--su-ink3,#8D9499)}
.su-s-top input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:15px var(--su-body,inherit);color:var(--su-ink,#262A2C);padding:6px 0}
.su-s-ask{font:600 12.5px var(--su-body,inherit);border:0;border-radius:999px;padding:7px 13px;background:var(--su-accent,var(--acc,#3a7c88));color:#fff;cursor:pointer;white-space:nowrap}
.su-s-x{border:0;background:transparent;color:var(--su-ink3,#8D9499);font:22px/1 system-ui;cursor:pointer;padding:0 2px}
.su-s-res{overflow:auto;padding:6px 6px 10px}
.su-s-hint{padding:14px 12px;font-size:13px;color:var(--su-ink3,#8D9499);line-height:1.5}
.su-s-grp{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--su-ink3,#8D9499);padding:12px 12px 4px}
.su-s-it{display:flex;align-items:baseline;gap:10px;padding:8px 12px;border-radius:9px;color:inherit;text-decoration:none}
.su-s-it:hover,.su-s-it:focus{background:var(--su-hov,var(--hov,#F3F1EC));outline:0}
.su-s-l{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.su-s-s{font-size:11.5px;color:var(--su-ink3,#8D9499);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none;max-width:45%}
.su-s-rep{margin:8px 8px 4px;padding:12px 14px;border-radius:12px;background:var(--su-soft,#E4EEF0)}
.su-s-repk{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--su-ink3,#8D9499);margin-bottom:6px}
.su-s-reptx{font-size:13.5px;line-height:1.5}
@media(max-width:600px){#su-search{padding:0}.su-s-box{max-height:100vh;border-radius:0}.su-s-ask{padding:7px 9px}}
.su-bell.su-ask{font:600 15px/1 var(--su-body,inherit);color:var(--su-accent,var(--acc,#3a7c88));border-color:var(--su-accent,var(--acc,#3a7c88))}

/* Le champ de recherche reprenait le cadre et l'anneau que chaque application pose
   sur ses <input> : un liseré collé au texte, sans marge. Il redevient un simple
   champ posé dans la fenêtre, avec de quoi respirer à gauche. */
#su-search .su-s-top input#su-sq{
  flex:1;min-width:0;border:0;outline:0;box-shadow:none;background:transparent;
  border-radius:0;font:15px var(--su-body,inherit);color:var(--su-ink,#262A2C);
  padding:6px 6px 6px 2px;text-overflow:ellipsis;
}
#su-search .su-s-top{gap:12px}

/* ---------- le menu ☰ sur un téléphone ----------
   Il s'ancrait sur le bouton lui-même : large de 290 px et tiré vers la gauche depuis
   un bouton placé au tiers de l'écran, il sortait de la fenêtre et ses libellés
   arrivaient coupés en plein mot (« ared space », « ies from plans »).
   Il s'ancre maintenant sur l'en-tête et prend la largeur disponible, comme un tiroir.
   La règle porte « body » devant pour passer devant les min-width posées page par page. */
@media(max-width:700px){
 /* selon l'application, la barre du haut est un <header> ou un div .top : on rend
    les deux positionnables, et on retire l'ancrage du seul enrobage qui porte ce menu. */
 /* … et « relative » décollait la barre au défilement dans toutes les applications sauf
    Chantier, qui la recollait de son côté. Collée pour tout le monde : « sticky » positionne
    aussi bien le menu ☰ que « relative ». Un « overflow-x:hidden » sur html ou body empêche
    le collage ; « clip » coupe pareil sans casser sticky. */
 body header,body .top{position:sticky;top:0;z-index:30}
 html,body{overflow-x:clip}
 /* la langue se change dans le panneau du compte (avatar) : sur téléphone le bouton EN / FR de la barre libère sa place */
 body #langbtn{display:none}
 body .menuwrap:has(> #appmenu){position:static}
 body #appmenu{
  left:12px;right:12px;width:auto;min-width:0;max-width:none;
  max-height:calc(100vh - 120px);overflow-y:auto;overscroll-behavior:contain;
 }
 body #appmenu>a>span{white-space:normal}
 /* Le choix du projet souffrait exactement du même mal : la liste s'accrochait au
    bouton « Mes projets », posé au milieu de la barre, et partait vers la gauche
    jusqu'à sortir de l'écran. « IFOCAP » s'y lisait « CAP », « BARBIZON » « BIZON ».
    Elle s'accroche maintenant à la barre, comme le menu ☰. */
 body .pjbox{position:static}
 body .pjmenu{left:12px;right:12px;width:auto;min-width:0;max-width:none;
  max-height:min(70vh,calc(100vh - 140px));overflow:auto;overscroll-behavior:contain}
 body .pjmenu a{white-space:normal}
}

/* ---------- la barre du haut sur un téléphone ----------
   Elle passait à la ligne : le nom de l'application et quatre boutons en haut,
   Signaler, le compte et le menu ☰ renvoyés sur une deuxième rangée, à gauche,
   loin des autres. Tout tient sur une seule rangée si le sous-titre de
   l'application s'efface et si les écarts se resserrent : les sept commandes
   restent alors groupées à droite, là où le pouce les attend. */
@media(max-width:880px){
 body .top-in,body header{flex-wrap:nowrap}
 body .top-in{gap:6px}
 body .top-in>.logo,body header .wordmark{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 body .top-in>.spacer,body header .spacer{flex:1 1 0;min-width:0}
 /* chaque commande garde sa taille, aucune ne se comprime en ovale */
 body .top-in>.io,body .top-in>.menuwrap,body .top-in>button,
 body header>.io,body header>.menuwrap,body header>button{flex:none}
 body #syncst{display:none}
 /* .hbrk servait à forcer un retour à la ligne dans la barre ; sans retour à la
    ligne, elle reste un bloc de 388 px poussé hors de l'écran. */
 body header .hbrk,body .top-in .hbrk{display:none}
}
/* le sous-titre de l'application ne s'efface que quand la place manque vraiment */
@media(max-width:560px){
 body .logosub{display:none}
 /* Le nom du projet n'avait pas de laisse : sur un téléphone il poussait le dernier
    bouton de la barre (les applications) hors de l'écran. */
 body header .pjbtn,body .top-in .pjbtn{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:430px){
 body .top-in{gap:4px}
 body #qsel,body header #projsel{max-width:96px}
 body header .pjbtn,body .top-in .pjbtn{max-width:104px}
}

/* ---------- la languette qui ouvre le menu latéral ----------
   Chaque style la repeignait à sa façon : en Épuré elle devenait blanche sur blanc
   et on ne la trouvait plus. Elle garde désormais la couleur d'accent quel que soit
   le style, avec de quoi la voir et de quoi la viser au pouce. */
@media(max-width:880px){
 body .burger{
  background:var(--su-card,#fff) !important;
  color:var(--su-ink2,#5b5f63) !important;
  border:1px solid var(--su-line,#d9d5cd) !important;border-left:0 !important;
  width:auto;min-width:18px;
  padding:11px 6px 11px 4px !important;
  font-size:12px;font-weight:700;line-height:1;
  border-radius:0 9px 9px 0 !important;
  box-shadow:1px 1px 6px rgba(0,0,0,.10) !important;
  opacity:1 !important;
 }
 body .burger:active{filter:brightness(1.15)}
}


/* ===========================================================================
   Le mode nuit, pour toutes les applications

   Il n'existait que dans le hub et dans Pilotage, qui portaient chacun une
   trentaine de règles recopiées. Les autres applications n'avaient rien : le
   style « Nuit » y donnait un écran clair avec quelques pièces sombres.

   Tout passe par les variables communes, donc il suffit de les redéfinir ici
   pour que les douze applications s'assombrissent ensemble. Les règles qui
   suivent ne rattrapent que ce qui est écrit en dur ailleurs.
   =========================================================================== */
body.t-nuit{--hov:#2c2f31;--sel:#3a3f43;--wash:#26292c;--bg:#191b1d;--card:#232628;
 --ink:#e8e6e1;--ink2:#b3b1ab;--ink3:#83817b;--line:#34383b;--line2:#2c2f31;
 --ok:#5abf8a;--okbg:#1e3228;--warn:#d9a75a;--warnbg:#372e1c;--neut:#9a958d;--neutbg:#2c2f31;
 color-scheme:dark}
body.t-nuit header,body.t-nuit .top{background:#101214;border-color:#34383b}
body.t-nuit input,body.t-nuit select,body.t-nuit textarea{background:#2b2e31;color:var(--ink);border-color:#3d4144}
body.t-nuit input::placeholder,body.t-nuit textarea::placeholder{color:#7d7b76}
body.t-nuit .btn,body.t-nuit button.btn{background:#2b2e31;color:var(--ink);border-color:#3d4144}
body.t-nuit .btn:hover{background:#34383b}
body.t-nuit .btn.pri{background:var(--acc,#3a7c88);color:#fff;border-color:var(--acc,#3a7c88)}
body.t-nuit .card,body.t-nuit .box,body.t-nuit .modal{background:var(--card);border-color:var(--line)}
body.t-nuit table th{background:#26292c;color:var(--ink2)}
body.t-nuit table td,body.t-nuit table th{border-color:var(--line2)}
body.t-nuit tr:hover td{background:#2c2f31}
body.t-nuit a{color:var(--acc,#6fb3bf)}
body.t-nuit .su-tabs{background:#101214;border-color:#34383b}
body.t-nuit .su-tabs button,body.t-nuit .su-tabs a{color:var(--ink3)}
body.t-nuit .su-tabs button.on,body.t-nuit .su-tabs a.on{color:var(--ink)}
body.t-nuit img:not([src*=".svg"]){filter:brightness(.92)}

/* ---------- les alertes sur l'appareil, au pied de la cloche ---------- */
.su-push{display:flex;flex-direction:column;gap:3px;padding:10px 14px 12px;border-top:1px solid var(--su-line,#e4e1da)}
.su-push-l{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;cursor:pointer;margin:0}
.su-push-sw{position:relative;width:36px;height:21px;flex:0 0 36px}
.su-push-sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.su-push-sw i{position:absolute;inset:0;border-radius:999px;background:color-mix(in srgb,currentColor 22%,transparent);transition:background .15s}
.su-push-sw i::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.su-push-sw input:checked+i{background:var(--su-accent,#2f6f6a)}
.su-push-sw input:checked+i::after{transform:translateX(15px)}
.su-push-sw input:disabled+i{opacity:.45}
.su-push-st{font-size:11.5px;line-height:1.35;color:var(--su-ink3,#8D9499);padding-left:46px}
.su-push-essai{margin:4px 0 0 46px;border:1px solid var(--su-line,#dcd8d0);background:transparent;color:inherit;border-radius:999px;padding:3px 11px;font:inherit;font-size:11.5px;cursor:pointer;align-self:flex-start}.su-push-essai:disabled{opacity:.5;cursor:default}
#su-bellpanel .su-push{position:sticky;bottom:0;background:var(--su-card,#fff);z-index:1}
/* Le rond du style a rejoint la barre du téléphone : sur les plus petits écrans
   (360 px), on resserre les boutons pour que le menu ☰ reste visible. */
@media (max-width:380px){
 html body header, html body .top>.top-in{column-gap:5px!important}
 html body header>#helpbtn, html body header>#ver{display:none!important}
}
html body .su-push label.su-push-l{text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;color:inherit;margin:0;padding:0}

/* messagerie : « Lu » sous mon dernier message, et les trois points de qui écrit */
#su-chatpanel .su-flu{font-size:11px;color:var(--su-ink3,#8D9499);text-align:right;margin:-3px 4px 6px;-webkit-user-select:none;user-select:none}
#su-chatpanel .su-flu.su-flu-ok{color:var(--su-accent,#3b7a80)}
#su-chatpanel .su-ftape{display:flex;align-items:flex-end;gap:6px;margin:4px 0 6px}
#su-chatpanel .su-ftape small{font-size:11px;color:var(--su-ink3,#8D9499);margin-bottom:6px}
#su-chatpanel .su-fdots3{display:inline-flex;gap:4px;align-items:center;background:var(--su-card,#fff);border-radius:14px;padding:10px 12px}
#su-chatpanel .su-fdots3 i{width:6px;height:6px;border-radius:50%;background:var(--su-ink3,#8D9499);opacity:.35;animation:su-fdot 1.2s infinite ease-in-out}
#su-chatpanel .su-fdots3 i:nth-child(2){animation-delay:.18s}
#su-chatpanel .su-fdots3 i:nth-child(3){animation-delay:.36s}
@keyframes su-fdot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){#su-chatpanel .su-fdots3 i{animation:none;opacity:.7}}

/* ---------- le compte, le même partout (socle-mobile.js, window.suCompte) ---------- */
#su-compte .su-c-fond{position:fixed;inset:0;background:rgba(30,28,24,.38);z-index:80}
#su-compte .su-c-pan{position:fixed;z-index:81;top:calc(var(--hdr-h,54px) + 8px);right:10px;width:360px;max-width:calc(100vw - 20px);max-height:calc(100vh - var(--hdr-h,54px) - 20px);
  display:flex;flex-direction:column;background:var(--su-card,#fff);color:var(--su-ink,#262A2C);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.22);font-family:var(--su-body,system-ui,sans-serif);font-size:13.5px}
#su-compte .su-c-tete{display:flex;align-items:center;gap:11px;padding:14px 14px 10px;border-bottom:1px solid var(--su-line2,#EDE7DE)}
#su-compte .su-c-av{width:38px;height:38px;border-radius:50%;overflow:hidden;flex:none;display:inline-flex;align-items:center;justify-content:center;background:#2a2e30;color:#fff;font-weight:700;font-size:13px}
#su-compte .su-c-av img{width:100%;height:100%;object-fit:cover}
#su-compte .su-c-qui{flex:1;min-width:0;line-height:1.25}#su-compte .su-c-qui b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#su-compte .su-c-qui small{display:block;font-size:11.5px;color:var(--su-ink3,#8D9499);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#su-compte .su-c-x{border:0;background:transparent;font-size:15px;color:var(--su-ink3,#8D9499);cursor:pointer;padding:6px}
#su-compte .su-c-corps{overflow:auto;padding:4px 14px 10px;flex:1;min-height:0}
#su-compte .su-c-sec{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--su-ink3,#8D9499);font-weight:600;margin:12px 0 5px 2px}
#su-compte .su-c-grp{border:1px solid var(--su-line2,#EDE7DE);border-radius:12px;padding:0 12px}
#su-compte .su-c-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--su-line2,#EDE7DE);margin:0;font-weight:400;font-size:13.5px;color:inherit;text-transform:none;letter-spacing:0;width:100%;box-sizing:border-box}
#su-compte .su-c-grp>.su-c-row:first-child{border-top:0}
#su-compte .su-c-row>span:first-child{flex:1 1 auto;min-width:0}#su-compte .su-c-row>span small{display:block;font-size:11.5px;color:var(--su-ink3,#8D9499)}
#su-compte .su-c-row input,#su-compte .su-c-row select{flex:0 0 55%;max-width:55%;margin:0;padding:6px 9px;font:inherit;font-size:13px;border:1px solid var(--su-line,#DDD6CB);border-radius:8px;background:var(--su-card2,#fff);color:inherit;box-sizing:border-box}
#su-compte .su-c-btns{flex-wrap:wrap;justify-content:flex-start;gap:6px}
#su-compte .su-c-b{font:inherit;font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:999px;border:1px solid var(--su-line,#DDD6CB);background:var(--su-card,#fff);color:inherit;cursor:pointer}
#su-compte .su-c-pri{background:var(--su-accent,#3a7c88);border-color:var(--su-accent,#3a7c88);color:#fff;margin-left:auto}
#su-compte .su-c-lien{background:transparent;border-left:0;border-right:0;border-bottom:0;text-align:left;cursor:pointer;font:inherit}
#su-compte .su-c-lien:hover{color:var(--su-accent,#3a7c88)}
#su-compte .su-c-full{display:block}#su-compte .su-c-full.su-push{margin:0;padding:9px 0;border:0;border-top:1px solid var(--su-line2,#EDE7DE)}
#su-compte .su-c-sw{cursor:pointer}
#su-compte .su-c-pied{padding:10px 14px 12px;border-top:1px solid var(--su-line2,#EDE7DE);display:flex;justify-content:flex-end}
body.nuit #su-compte .su-c-pan{background:#23272a;color:#ece8e0}
@media(max-width:700px){#su-compte .su-c-pan{top:auto;right:0;left:0;bottom:0;width:auto;max-width:none;border-radius:18px 18px 0 0;max-height:calc(100vh - 60px);padding-bottom:env(safe-area-inset-bottom)}
 #su-compte .su-c-row input,#su-compte .su-c-row select{flex-basis:50%;max-width:50%}}

/* Le style de l'interface et le compte vivent dans le panneau de l'avatar (window.suCompte) :
   les sélecteurs de style des barres et les anciens menus du compte n'ont plus lieu d'être. */
html body header select#thbtn,html body .top-in select#thbtn{display:none!important}
#usermenu{display:none!important}