/* ============================================================================
 *  do-marque.css — apparence de la plaque de marque (DO.marque.enTete)
 * ----------------------------------------------------------------------------
 *  Feuille SEPAREE, et non un ajout a do-layout.css, pour une raison precise :
 *  la premiere page qui en a besoin est le SOMMAIRE (index.html), qui ne charge
 *  volontairement pas l'ossature do-layout (il a sa propre mise en page et doit
 *  s'afficher instantanement). Une page qui veut la plaque charge donc cette
 *  feuille seule ; l'apparence reste ecrite UNE fois, ici, et nulle part
 *  ailleurs (regle du socle : jamais deux copies d'un meme rendu).
 *
 *      <link rel="stylesheet" href="/html_do/do-marque.css">
 *      <script src="/html_do/do-marque.js"></script>
 *
 *  Le fond de la PLAQUE et la COULEUR DU LOGO sont poses en style en ligne par
 *  DO.marque.enTete() (ils viennent de Marques.json, donc de la donnee) : tout
 *  le reste est ici.
 *
 *  LE LOGO DE L'APPLICATION — UN SEUL FICHIER, TEINTE PAR LA MARQUE (2026-09-10)
 *  `marques/d-office.svg` porte le monogramme officiel Despinasse (les 4 D
 *  imbriques), extrait tel quel du fichier d'identite : aucun redessin. Il est
 *  pose en MASQUE CSS et non en <img>, et c'est tout l'interet : un <img> ne se
 *  teinte pas, il aurait fallu dix fichiers, un par societe — donc dix dessins a
 *  refaire au premier changement d'identite. En masque, la couleur est
 *  `currentColor`, que `enTete()` pose depuis la marque. Un seul dessin.
 * ========================================================================= */

.do-marque{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px;
  min-width:88px; height:66px; padding:7px 14px;
  border:1px solid var(--line); border-radius:12px;
  box-shadow:0 1px 2px rgba(63,62,62,.05);
  flex:none;
}

/* Le monogramme. `background:currentColor` + masque : la couleur vient de la
   marque (style en ligne de .do-marque), le dessin du fichier. */
.do-marque-pict{
  display:block; width:26px; height:35px; flex:none;
  background:currentColor;
  -webkit-mask:url("/html_do/marques/d-office.svg") no-repeat center/contain;
          mask:url("/html_do/marques/d-office.svg") no-repeat center/contain;
}

/* Le mot-signe « D-Office », sous le monogramme : capitales de la charte (§5),
   lettres espacees, jamais un dessin. Il herite de `color`, comme le monogramme
   — les deux moities du logo ne peuvent donc pas diverger. */
.do-marque-mot{
  font-family:var(--display); font-weight:600; font-size:11.5px;
  letter-spacing:1.4px; color:inherit; white-space:nowrap; line-height:1;
}

/* Identite a confirmer (Marques.json : "provisoire": true) : un pointille dit
   que ce n'est pas encore la vraie identite de la societe, sans crier. */
.do-marque[data-provisoire]{ border-style:dashed }

/* Pastille « Apercu <marque> ✕ » posee par DO.marque.apercuIndiquer() sur CHAQUE page
   quand un apercu suit la navigation. En bas a GAUCHE : le coin bas-droit est deja
   partage par le bouton « ↑ Haut » et le repere de fraicheur (regle d'or n°13).
   Elle doit se voir sans etre criarde : un habillage complet du portail qui survit a
   la navigation et qu'on aurait oublie serait pris pour une panne le lendemain. */
.do-apercu{
  position:fixed; bottom:6px; left:8px; z-index:2147482000;
  font:600 10.5px/1.5 'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  letter-spacing:.2px; padding:3px 9px; border-radius:20px; cursor:pointer;
  color:var(--sur-bande,#fcf8f5); background:var(--bande,#4b433d);
  border:1px solid rgba(252,248,245,.28); opacity:.9; user-select:none;
}
.do-apercu:hover{ opacity:1 }
@media print{ .do-apercu{ display:none } }

@media (max-width:720px){
  .do-marque{ height:54px; min-width:66px; padding:5px 11px; gap:3px }
  .do-marque-pict{ width:21px; height:28px }
  .do-marque-mot{ font-size:10px; letter-spacing:1.1px }
}