/* =========================================================================
   BRAND-MARK — Composant logo officiel Menuiseries d'Artois
   =========================================================================
   Pattern standard SOMA : barre verte signature + wordmark SVG inline.
   Source de verite : TICKET-HOMOGENEISATION-LOGO-WORDMARK.md
   Decisions design gravees dans cerveau/BRAND.md.

   Usage :
     <div class="brand-mark" aria-label="Menuiseries d'Artois.">
       <svg class="brand-wordmark" viewBox="0 14 280 91" xmlns="http://www.w3.org/2000/svg">
         <text x="0" y="56" font-family="Lato,Helvetica Neue,Arial,sans-serif"
               font-weight="700" font-size="32" letter-spacing="-1.2"
               fill="var(--text,#0F1A17)">Menuiseries</text>
         <text x="0" y="89" font-family="Lato,Helvetica Neue,Arial,sans-serif"
               font-weight="700" font-size="32" letter-spacing="-1.2"
               fill="var(--green,#2FBF7A)">d'Artois.</text>
       </svg>
     </div>

   Variantes : .brand-mark--sm (24px) / .brand-mark--lg (48px)
   Dimensions canoniques §0.7.2 SOMA-FINITION (DR-055)
   ========================================================================= */

.brand-mark{
  display:flex; align-items:center; gap:8px;
  flex:0 0 auto;
}
.brand-mark::before{
  content:""; flex:0 0 auto;
  width:6px; height:32px;
  background:var(--green, #2FBF7A);
  border-radius:3px;
}
.brand-mark .brand-wordmark{
  height:32px; width:116px; flex:0 0 auto;
  display:block;
}

/* Variante small — headers modales, drawers secondaires */
.brand-mark--sm::before{
  width:4px; height:24px;
}
.brand-mark--sm .brand-wordmark{
  height:24px; width:88px;
}

/* Variante large — login, loader, splash */
.brand-mark--lg::before{
  width:8px; height:48px;
}
.brand-mark--lg .brand-wordmark{
  height:48px;
}

/* Variante white — fond sombre (login, overlay) */
.brand-mark--white .brand-wordmark text:first-child{
  fill:#fff;
}