/* ===========================================================================
   THEME WEB IAV pour argus.md.lu — DERIVE DE ~/Model, ne pas diverger a l'oeil
   ===========================================================================
   Source unique de la charte : ~/Model/web (tokens.css + pied-de-page.css) et
   le bandeau de JANUS (~/janus/static/css/janus.css). Reuni ici en UN fichier
   partage par toutes les pages publiques ARGUS (bandeau + pied + ancrage), pour
   ne pas refaire le style projet par projet. Le contenu propre a chaque page
   reste dans le <style> de la page ; seuls le bandeau, le pied et les couleurs
   viennent d'ici.

   Charte : bleu fonce #215387 (bandeau), bleu principal #2B6CB0 (liens/boutons),
   fond gris clair, pied « signature de maison » identique au courriel IAV.
   =========================================================================== */

:root {
  /* Couleurs — ~/Model/web/tokens.css (alignees sur iav.lu le 30/07/2026). */
  --iav-blue-dark: #215387;
  --iav-blue-primary: #2B6CB0;
  --iav-near-black: #1A202C;
  --iav-gray-text: #4A5568;
  --iav-gray-light: #718096;
  --iav-bg-light: #EDF2F7;
  --iav-bg-lighter: #F7FAFC;
  --iav-white: #FFFFFF;

  /* Pied — ~/Model/web/pied-de-page.css (teintes MESUREES, pas choisies a
     l'oeil : « depuis 2008 » 4,94:1, texte 5,18:1, liens 5,14:1 sur ce fond). */
  --iav-rouge-accent: #DA081C;
  --iav-pied-fond: #F7F9FC;
  --iav-pied-filet: #E3E9F0;
  --iav-pied-texte: #5A6B7F;
  --iav-pied-fort: #1B2733;

  /* Bandeau — GABARIT COMMUN aux deux surfaces (pages publiques argus.md.lu ET
     dashboard de controle :8091). Defini UNE SEULE FOIS : changer ces valeurs
     (dans les DEUX copies de ce fichier) realigne d'un coup public + dashboard,
     et JANUS pourra s'y brancher pareil plus tard. La hauteur est FIXE et le
     titre/sous-titre tiennent sur une ligne chacun (ellipse au besoin) -> le
     bandeau ne grandit jamais, meme hauteur desktop et mobile, meme quand le
     dashboard y loge ses onglets (ils defilent, ils ne passent pas dessous). */
  --iav-header-h: 60px;
  --iav-header-pad-x: 18px;
  --iav-logo-h: 34px;
  --iav-title-size: 17px;
  --iav-title-weight: 600;
  --iav-title-spacing: .06em;
  --iav-subtitle-size: 13px;
  --iav-title-lh: 1.2;          /* interligne du bloc titre+sous-titre (identique des deux cotes) */
  --iav-logo-gap: 12px;         /* espace entre le logo et le bloc texte */

  /* Pilule de navigation du bandeau : MEME apparence pour les onglets du dashboard
     (nav button) et le lien de navigation des pages publiques (.lien-coin). Une seule
     source de verite -> pas de style parallele. */
  --iav-pill-bg: rgba(255,255,255,.14);
  --iav-pill-bg-hover: rgba(255,255,255,.24);
  --iav-pill-border: rgba(255,255,255,.30);

  /* Typo — pile systeme, aucune webfont a charger. */
  --iav-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* ---------------------------------------------------------------------------
   ANCRAGE — le pied POUSSE en bas, jamais positionne (~/Model/web/pied-de-page.css)
   La page est une colonne d'au moins un ecran ; le contenu prend ce qui reste ;
   le pied est pousse dessous. min-height 100dvh APRES 100vh : sur mobile 100vh
   compte la barre d'adresse et un filet de pied glisserait sous le bord.
   --------------------------------------------------------------------------- */
body.iav {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--iav-bg-light);
  color: var(--iav-near-black);
  font-family: var(--iav-font-body);
}

/* ---------------------------------------------------------------------------
   BANDEAU — logo IAV blanc a gauche, nom de l'app + sous-titre (janus.css)
   --------------------------------------------------------------------------- */
.bandeau {
  background: var(--iav-blue-dark);
  color: #fff;
  min-height: var(--iav-header-h);
  padding: 0 var(--iav-header-pad-x);
  display: flex;
  align-items: center;
  gap: var(--iav-logo-gap);
  flex-wrap: nowrap;
}
.bandeau .marque {
  display: flex; align-items: center; text-decoration: none;
  flex: none; min-height: 44px; min-width: 44px;
}
.bandeau .marque img {
  height: var(--iav-logo-h); width: auto; display: block;
}
.titre-bandeau { display: flex; flex-direction: column; line-height: var(--iav-title-lh); min-width: 0; }
.sous-marque {
  color: #fff; font-size: var(--iav-title-size); font-weight: var(--iav-title-weight);
  letter-spacing: var(--iav-title-spacing);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.slogan-bandeau {
  color: #C7DBF2; font-size: var(--iav-subtitle-size);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Lien discret pousse a droite (usage interne : « atelier »). */
/* Lien de navigation (atelier / accueil) : MEME pilule que les onglets du dashboard. */
.bandeau .lien-coin { margin-left: auto; flex: none;
  background: var(--iav-pill-bg); border: 1px solid var(--iav-pill-border); color: #fff;
  padding: 7px 13px; border-radius: 20px; font-size: 13px; text-decoration: none; white-space: nowrap; }
.bandeau .lien-coin:hover { background: var(--iav-pill-bg-hover); text-decoration: none; }

/* Zone de contenu centree : grandit pour remplir l'ecran, ne se comprime jamais
   sous sa hauteur reelle (`1 0 auto`, pas `1`). La largeur reste geree par la
   page (elle varie : 720 / 760 / 960). */
.contenu { flex: 1 0 auto; width: 100%; }

/* ---------------------------------------------------------------------------
   PIED — meme signature que le courriel IAV (~/Model/web/pied-de-page.css)
   --------------------------------------------------------------------------- */
.pied {
  display: flex; flex-direction: column; text-align: center;
  background: var(--iav-pied-fond);
  border-top: 1px solid var(--iav-pied-filet);
  padding: 12px 12px 24px;
  font-family: var(--iav-font-body);
  font-size: 10px; line-height: 1.6;
  color: var(--iav-pied-texte);
  /* 9 et non 12 : le blanc vu n'est pas la valeur CSS (les interlignes
     s'additionnent entre les deux lignes). Regle UNIQUE de l'espacement. */
  gap: 9px;
}
/* La couleur des liens du pied appartient a CETTE feuille, chargee la derniere :
   une feuille de composants posterieure avec `.pied a{color:inherit}` gagnerait
   a specificite egale et grisait les liens en silence (piege vecu, cf Model). */
/* Une page qui pose une barre d'actions FIXE en bas (l'installeur) le declare
   par `class="... avec-barre-actions"` sur <body>, sinon la barre recouvre les
   deux dernieres lignes du pied une fois la page defilee. Le pied lui rend la
   place. Declare, pas devine (`:has()` serait silencieux sur vieux navigateur). */
.avec-barre-actions .pied {
  padding-bottom: calc(24px + 74px + env(safe-area-inset-bottom));
}
.pied a { color: var(--iav-blue-primary); text-decoration: none; }
.pied a:hover, .pied a:focus { text-decoration: underline; }
.pied-signature { font-size: 11px; }
.pied-signature strong { color: var(--iav-pied-fort); }
.depuis { color: var(--iav-rouge-accent); font-weight: 700; }
/* Ligne 2 : discrete par la TAILLE et le POIDS, jamais par un gris delave
   (un #8A97A6 ne donnerait que 2,82:1). Elle garde la couleur du pied. */
.nom-de-code {
  letter-spacing: 1.2px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-style: dotted; cursor: help;
}

/* Le bandeau garde des dimensions CONSTANTES (variables --iav-header-*) a toutes
   les largeurs : desktop == mobile, et surtout public == dashboard. Plus de bump
   desktop du titre/padding, qui aurait fait diverger les deux surfaces. */