/*
 * Thème partagé EFFIBLUE — palette, typographie, espacements et header
 * commun aux 6 outils (tools/*.html) et au portail (static/portal.css).
 *
 * Principe : ce fichier définit les VALEURS canoniques (--eff-*). Chaque
 * outil garde ses propres noms de variables historiques (--bg, --accent,
 * --s2, --a-dim, etc. — hérités de leurs six systèmes de design distincts)
 * mais les fait pointer vers ces valeurs via un bloc d'alias dans son
 * propre :root, plutôt que de réécrire des centaines de règles CSS
 * existantes. Ça centralise les couleurs/typo/espacements réellement
 * affichés sans réécrire chaque outil au risque d'une régression visuelle.
 */

:root{
  /* Couleurs de marque EFFIBLUE (brand book Elias Studio, juillet 2025) */
  --eff-color-bg:#f6f6f6;
  --eff-color-panel:#ffffff;
  --eff-color-panel-2:#f4f6fb;
  --eff-color-border:#dbe4f2;
  --eff-color-text:#1d2124;
  --eff-color-muted:#427e96;

  /* Accent = Bleu Ginestium officiel */
  --eff-color-accent:#2095d5;
  --eff-color-accent-2:#a4cbe3;
  --eff-color-accent-dim:rgba(32,149,213,.12);

  /* États sémantiques (le "bon" s'aligne sur le vert de marque, warn/bad restent des couleurs sémantiques pures hors charte) */
  --eff-color-good:#49da8d;
  --eff-color-warn:#f79009;
  --eff-color-bad:#f04438;

  /* Ombres / rayons */
  --eff-shadow:0 1px 2px rgba(29,33,36,.04), 0 6px 20px rgba(29,33,36,.06);
  --eff-shadow-sm:0 1px 2px rgba(29,33,36,.05);
  --eff-radius:10px;
  --eff-radius-sm:6px;
  --eff-radius-lg:14px;

  /* Typographie de marque : Roobert (licence Displaay requise, non fournie au dépôt) */
  --eff-font-sans:"Roobert","Segoe UI",Arial,sans-serif;
  --eff-font-mono:ui-monospace,Menlo,Consolas,monospace;
  --eff-font-size-h1:21px;
  --eff-font-size-h2:12px;
  --eff-font-size-body:13px;
  --eff-font-size-small:11.5px;

  /* Espacements (échelle 4px) */
  --eff-space-1:4px;
  --eff-space-2:8px;
  --eff-space-3:12px;
  --eff-space-4:16px;
  --eff-space-5:20px;
  --eff-space-6:24px;

  /* Géométrie du header partagé */
  --eff-header-logo-height:26px;
}

/* ---------- Header partagé (nav / logo centré / titre / actions) ---------- */

.tool-header{
  display:grid;
  grid-template-columns:minmax(90px,auto) 1fr minmax(90px,auto);
  align-items:center;
  gap:var(--eff-space-4);
  margin:0 0 var(--eff-space-4);
  padding-bottom:var(--eff-space-3);
  border-bottom:1px solid var(--eff-color-border);
}
.tool-header-nav{
  display:flex;
  align-items:center;
  min-height:32px;
}
.tool-header-brand{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:var(--eff-space-3);
  min-width:0;
  max-width:100%;
  text-align:left;
}
.tool-header-brand .tool-logo{
  height:var(--eff-header-logo-height);
  width:auto;
  max-width:100%;
  flex:0 1 auto;
  fill:var(--eff-color-text);
  display:block;
}
.tool-header-titles{min-width:0;}
.tool-header-titles h1{
  font-size:var(--eff-font-size-h1);
  font-weight:700;
  margin:0;
  letter-spacing:-.01em;
  line-height:1.3;
  /* Pas d'ellipsis : un titre japonais/anglais plus long que le français
     doit passer à la ligne plutôt que d'être tronqué (voir Lot 3, exigence
     "aucun caractère tronqué en japonais"). */
  overflow-wrap:break-word;
}
.tool-header-titles .tool-header-sub{
  color:var(--eff-color-muted);
  font-size:12px;
  margin:2px 0 0;
  line-height:1.35;
}
.tool-header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--eff-space-2);
  flex-wrap:wrap;
}

/* Lien "retour au catalogue" injecté par le serveur dans #effiblue-nav-slot
   (effiblue/usage.py: back_to_catalog_markup). En flux normal (pas de
   position:fixed) : il ne peut donc plus chevaucher le logo/titre. */
.effiblue-back-to-catalog{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border-radius:var(--eff-radius-sm);
  background:var(--eff-color-panel-2);
  color:var(--eff-color-text);
  border:1px solid var(--eff-color-border);
  font:600 12.5px/1.2 var(--eff-font-sans);
  text-decoration:none;
  white-space:nowrap;
  transition:background .15s ease, border-color .15s ease;
}
.effiblue-back-to-catalog:hover{
  background:#e8edf7;
  border-color:var(--eff-color-accent);
}

/* Bandeau de conformité "usage des contenus", injecté par le serveur juste
   après <body> sur chaque page outil (effiblue/usage.py:
   content_usage_notice_markup). Couleurs tirées des tokens --eff-color-*
   afin de s'adapter automatiquement à la palette (claire ou sombre) propre
   à chaque outil, comme .effiblue-back-to-catalog ci-dessus. */
.effiblue-content-notice{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:6px 10px;
  padding:7px 16px;
  margin:0 0 var(--eff-space-3);
  background:var(--eff-color-panel-2);
  border-bottom:1px solid var(--eff-color-warn);
  color:var(--eff-color-muted);
  font:600 11.5px/1.4 var(--eff-font-sans);
  text-align:center;
}
.effiblue-content-notice a{
  color:var(--eff-color-accent);
  text-decoration:underline;
  white-space:nowrap;
}
.effiblue-content-notice a:hover{
  color:var(--eff-color-accent-2);
}

/* Sélecteur de langue partagé (construit par static/effiblue-i18n.js) */
.eff-langbar{
  display:flex;
  gap:4px;
  background:var(--eff-color-panel);
  padding:4px;
  border-radius:9px;
  border:1px solid var(--eff-color-border);
  box-shadow:var(--eff-shadow-sm);
}
.eff-langbar .eff-langbtn{
  width:auto;
  margin:0;
  padding:5px 11px;
  font-size:11.5px;
  font-weight:600;
  background:transparent;
  color:var(--eff-color-muted);
  border:none;
  border-radius:6px;
  cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.eff-langbar .eff-langbtn:hover{background:var(--eff-color-panel-2); color:var(--eff-color-text);}
.eff-langbar .eff-langbtn.active{
  background:linear-gradient(135deg, var(--eff-color-accent), var(--eff-color-muted));
  color:#ffffff;
  box-shadow:0 2px 6px rgba(32,149,213,.25);
}

@media (max-width:720px){
  .tool-header{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
  }
  .tool-header-nav{justify-content:flex-start; width:100%;}
  .tool-header-actions{justify-content:center; width:100%;}
  .tool-header-brand{--eff-header-logo-height:20px;}
  .tool-header-titles{text-align:center;}
}