/* ============================================================
   Marque Dermo Laser — jetons et bandeau
   AchatDermo · feuille chargée EN PREMIER par toutes les pages

   Deux choses, et rien d'autre :
     1. la palette et les ombres, sous forme de variables ;
     2. le bandeau de marque (.entete), logo compris.

   Elle ne pose aucun style sur `body`, `table` ou les champs de
   saisie : c'est le rôle d'`ecrans.css` et des feuilles de page.
   Une feuille qui redéfinirait la même chose deux fois est
   exactement ce que cette extraction supprime.

   ORDRE DE CHARGEMENT — `marque.css` PUIS `ecrans.css` puis le
   <style> de la page. `ecrans.css` ne déclare plus de palette :
   une page qui oublierait ce lien perdrait toutes ses couleurs.

   Couleur d'enseigne : #cc895e, celle du bandeau de
   DermoDashboard. Les deux outils s'utilisent le même jour, sur
   le même téléphone : leurs en-têtes doivent être identiques.

   Le bandeau écrit son titre en Cormorant Garamond. Une page qui
   l'adopte charge la police (fonts.googleapis.com, déjà autorisé
   par la CSP) ; sans elle, Georgia prend le relais sans casse.
   ============================================================ */

:root {
  /* Enseigne */
  --terre:#cc895e;          /* la couleur Dermo Laser, fonds et filets */
  --terre-fonce:#a86a45;    /* icônes et aplats sur fond pâle */
  --terre-pale:#f7e8dd;     /* pastilles d'icône */
  --terre-voile:#fdf5ef;    /* voile de fond, à peine teinté */
  /* Terre cuite lisible en petit corps : #a86a45 plafonne à 4,36:1,
     sous le seuil AA de 4,5 exigé pour du texte de 12 px. */
  --terre-texte:#8f5734;
  /* `--accent` est le nom historique de la couleur d'enseigne dans
     ecrans.css et les pages de saisie. Conservé tant qu'elles l'emploient. */
  --accent:var(--terre);

  /* Fonds et texte */
  --navy:#1a2744;
  --cream:#faf7f4;
  --line:#e6ded7;
  --text:#24303f;
  --muted:#6b7787;

  /* États */
  --erreur:#a8322a;
  --ok:#2f6b46;
  --alerte:#8a5a00;

  /* Polices — Cormorant Garamond pour les titres, DM Sans pour tout le reste,
     le couple déjà en service sur DermoDashboard et les pages publiques. */
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'DM Sans', system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Largeur du contenu. Chaque écran la redéfinit sur `body` si sa page est
     plus étroite — le comptage tient en 46rem, le référentiel en demande 68. */
  --largeur:64rem;

  /* Reliefs */
  --ombre:0 1px 2px rgba(26,39,68,.04), 0 8px 24px rgba(26,39,68,.05);
  --ombre-forte:0 2px 4px rgba(26,39,68,.06), 0 14px 32px rgba(26,39,68,.10);
}

/* Le focus reste visible partout : une réserve se saisit parfois au clavier,
   et la tabulation est le seul repère de qui n'utilise pas la souris. */
:focus-visible { outline:2px solid var(--terre); outline-offset:2px; border-radius:.25rem; }

/* ── Bandeau de marque ──────────────────────────────────────────
   <header class="entete">
     <div class="entete-inner">
       <a class="marque" href="index.html">
       <span class="marque-logo" role="img" aria-label="Dermo Laser"></span>
       <span class="marque-nom">AchatDermo</span></a>
       <button class="btn-deco">Se déconnecter</button>
     </div>
   </header>                                                        */
.entete { position:sticky; top:0; z-index:10; background:var(--terre); color:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.06); }
.entete-inner { max-width:var(--largeur); margin:0 auto; padding:.75rem 1.5rem;
  min-height:2.75rem;  /* hauteur tenue même sans bouton, cf. la connexion */
  display:flex; align-items:center; justify-content:space-between; gap:1rem; }
/* Sur les écrans autres que l'accueil, la marque est le lien de retour. */
.marque { display:flex; align-items:center; gap:.75rem; min-width:0; overflow:hidden;
  text-decoration:none; color:inherit; }
.marque-logo { display:block; height:28px; aspect-ratio:3132/599;  /* viewBox du SVG */
  flex-shrink:1; min-width:0; transform:translateZ(0);
  background:url("https://www.dropbox.com/scl/fi/d5gipnjjzf5rxncttmd19/Logo-PSD-300-DPI-file-sans-Lyon.svg?rlkey=f66t9e5sknctltx5lr2lfbvay&raw=1")
    left center / contain no-repeat;
  /* Le fichier est noir : renversé en blanc pour le bandeau terre cuite. */
  filter:brightness(0) invert(1); }
.marque-nom { font-family:'Cormorant Garamond', Georgia, serif;
  font-size:1.375rem; font-weight:600; letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Porté par un <button> à l'accueil, par un <a> ailleurs. */
.btn-deco { flex-shrink:0; display:inline-flex; align-items:center; text-decoration:none;
  background:transparent; color:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.35); border-radius:.5rem;
  padding:.5rem .875rem; min-height:40px; font-family:inherit; font-size:.8125rem;
  font-weight:500; cursor:pointer; transition:background .15s, border-color .15s; }
.btn-deco:hover { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.6); color:#fff; }

/* ── Titre de page ──────────────────────────────────────────────
   Sous le bandeau : ce qu'on fait ici, et rien d'autre. Le lien de
   retour vit dans le bandeau, pas dans le sous-titre.

     <div class="page-tete"><div class="page-tete-inner">
       <h1>Achat direct</h1>
       <p class="sous">Facture sans bon de commande</p>
     </div></div>                                                    */
.page-tete { background:linear-gradient(180deg,#fff 0%, var(--terre-voile) 100%);
  border-bottom:1px solid var(--line); }
.page-tete-inner { max-width:var(--largeur); margin:0 auto; padding:1.375rem 1.5rem; }
.page-tete h1 { margin:0; font-family:var(--serif); font-size:1.875rem;
  font-weight:600; line-height:1.15; color:var(--navy); }
.page-tete .sous { margin:.3125rem 0 0; font-size:.9375rem; color:var(--muted); }

/* Rangée d'outils propres à l'écran — centre, date, compteur. Sur fond clair :
   les libellés sont lisibles sans opacité, les champs portent une bordure. */
.page-tete .outils { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .875rem;
  margin-top:.875rem; font-size:.875rem; color:var(--muted); }
.page-tete .outils label { font-weight:600; color:var(--navy); }
/* Le centre n'est pas le libellé d'un champ : il se lit comme une étiquette,
   sans quoi « Lyon Date du comptage » se lit d'une traite. */
.page-tete .outils .centre { padding:.1875rem .5rem; border-radius:999px;
  background:var(--terre-pale); color:var(--terre-texte); font-weight:600; }
.page-tete .outils input, .page-tete .outils select {
  min-height:40px; padding:.375rem .625rem; font-family:inherit; font-size:1rem;
  color:var(--text); background:#fff; border:1px solid var(--line); border-radius:.5rem; }

/* Écrans de saisie : le titre s'efface, la barre d'outils prime. Le comptage
   se fait debout dans une réserve — chaque pixel vertical est du défilement
   en moins. */
.page-tete.compacte .page-tete-inner { padding:.875rem 1.5rem; }
.page-tete.compacte h1 { font-size:1.375rem; }
.page-tete.compacte .outils { margin-top:.625rem; gap:.375rem .75rem; font-size:.8125rem; }
.page-tete.compacte .outils input, .page-tete.compacte .outils select {
  min-height:38px; padding:.25rem .5rem; font-size:.9375rem; }

@media (max-width:1024px) { .entete-inner, .page-tete-inner { max-width:none; } }
@media (max-width:480px) {
  .page-tete-inner { padding:1.125rem .875rem; }
  .page-tete h1 { font-size:1.5rem; }
  /* Cette barre reste sous les yeux pendant tout le comptage : chaque pixel
     qu'elle prend est du défilement en plus, debout dans une réserve. */
  .page-tete.compacte .page-tete-inner { padding:.5rem .875rem .625rem; }
  .page-tete.compacte h1 { font-size:1.0625rem; }
  .page-tete.compacte .outils { margin-top:.4375rem; gap:.3125rem .625rem; }
}

/* Sous 480 px, le nom de l'outil et le bouton se disputent la largeur :
   constaté à 390 px, le bouton passait par-dessus le titre. */
@media (max-width:480px) {
  .entete-inner { padding:.625rem .875rem; gap:.625rem; }
  .marque { gap:.5rem; }
  .marque-logo { height:21px; }
  .marque-nom { font-size:1.0625rem; }
  .btn-deco { min-height:44px; padding:.5rem .625rem; font-size:.75rem; }
}

@media (prefers-reduced-motion:reduce) {
  .btn-deco { transition:none; }
}