/* L'identité SECOND CERVEAU du front — or et violet (décision du propriétaire,
   28/09/2026 : « oui or et violet pour Second Cerveau, applique-le »), distincte
   de la charte DataTrail (violet seul, Cormorant + Inter), qui reste celle du
   site public de DataTrail. S'ajoute à `style.css`, juste après elle, et avant
   les feuilles d'écran. AUCUNE couleur ici : que les jetons de `style.css`
   (--accent violet, --or), dont les contrastes sont mesurés.

   Polices : Instrument Serif (titres, une seule graisse, romain et italique) et
   Manrope (texte, variable 200 à 800), hébergées ici, tirées de Google Fonts le
   28/09 — SIL Open Font License 1.1 (`polices/OFL.txt`). Deux sous-ensembles :
   `latin` (tout le français) et `latin-ext` (tiré seulement si un caractère de
   sa plage apparaît). */

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("polices/instrument-serif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("polices/instrument-serif-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("polices/instrument-serif-italique-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("polices/instrument-serif-italique-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("polices/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("polices/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* Les replis : une police système, le temps que la vraie arrive (`swap`).
   `local()` ne télécharge rien : la CSP n'a pas à le permettre. */
@font-face { font-family: "Instrument Serif repli"; src: local("Georgia"); size-adjust: 96%; }
@font-face { font-family: "Manrope repli"; src: local("Arial"); size-adjust: 104%; }

:root {
  --police-titre: "Instrument Serif", "Instrument Serif repli", Georgia, serif;
  --police-texte: "Manrope", "Manrope repli", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* --- l'échelle typographique ---------------------------------------------
   Instrument Serif n'a qu'une graisse : les titres restent en 400 (un gras
   simulé par le navigateur épaissirait mal le trait) et gagnent en taille ce
   qu'ils ne prennent pas en graisse. */

body { font-family: var(--police-texte); }

h1, h2, h3 {
  font-family: var(--police-titre);
  font-weight: 400;
  letter-spacing: -0.01em;
  /* Un nom d'entité de 80 caractères se coupe, il ne pousse pas la page. */
  overflow-wrap: anywhere;
}
h1 { font-size: 2.2rem; line-height: 1.1; margin: 0 0 6px; }
h2 { font-size: 1.55rem; line-height: 1.15; margin: 0 0 6px; }
h3 { font-size: 1.15rem; line-height: 1.25; margin: 0 0 4px; }

/* Les boutons et champs héritent déjà de `font: inherit` dans style.css ;
   le code garde sa chasse fixe. */

/* --- l'en-tête commun ------------------------------------------------------
   Mobile (375 px) : deux rangées.
     1. la marque (symbole + « Second Cerveau ») … « Se déconnecter »
     2. les écrans : Navigateur · Déposer · Réglages, en onglets égaux
   À partir de 720 px : une seule rangée, marque | écrans | sortir.
   L'ordre du DOM reste marque → écrans → sortir (celui qu'on lit et qu'on
   parcourt au clavier) ; seule la grille les place autrement à l'écran. */

.entete {
  background: var(--carte);
  border-bottom: 1px solid var(--trait);
}

.entete-dedans {
  max-width: 44rem;
  margin: 0 auto;
  padding: 6px var(--gouttiere) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "marque sortir"
    "ecrans ecrans";
  align-items: center;
  column-gap: 12px;
}

.entete-marque {
  grid-area: marque;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 48px;
  color: var(--or);            /* le symbole suit, en or : il est en currentColor */
  text-decoration: none;
}

/* ⚠ Le symbole est PROVISOIRE (`symbole-provisoire.svg`, lu par
   `front/entete.py`) : à remplacer par le logo définitif. Rien ici ne dépend
   de sa forme, seulement de sa boîte carrée. */
.entete-logo {
  flex: none;
  width: 34px;
  height: 34px;
}

.entete-nom {
  color: var(--encre);
  font-family: var(--police-titre);
  font-size: 1.55rem;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entete-sortir { grid-area: sortir; margin: 0; }
/* Le bouton garde les 44 px de haut de style.css : on ne rogne que sa
   largeur. */
.entete-sortir button { padding: 0 14px; font-size: 0.875rem; }

.entete-ecrans {
  grid-area: ecrans;
  display: flex;
  margin: 0 calc(-1 * var(--gouttiere));
  border-top: 1px solid var(--trait);
}

.entete-ecrans a {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 44 px : la cible tactile minimale, comme les boutons. */
  min-height: 44px;
  padding: 0 8px;
  color: var(--gris);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.entete-ecrans a:hover { color: var(--accent); }
.entete-ecrans a[aria-current="page"] {
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--or-vif);
}
.entete-ecrans a:focus-visible,
.entete-marque:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 6px;
}

/* En dessous de 360 px (vieux téléphones, zoom système), le nom et le bouton
   tiennent encore sur la rangée 1 en se serrant ; plus étroit encore, le nom
   se termine par « … » plutôt que de pousser la page. */
@media (max-width: 359px) {
  .entete-logo { width: 30px; height: 30px; }
  .entete-marque { gap: 8px; }
  .entete-nom { font-size: 1.15rem; }
  .entete-sortir button { padding: 0 10px; font-size: 0.8rem; }
}

/* Sans session (entrée, lien de connexion, panne) : la marque seule. */
.entete-dedans:not(:has(.entete-ecrans)) { padding-bottom: 6px; }

@media (min-width: 720px) {
  .entete-dedans {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "marque ecrans sortir";
    padding: 8px var(--gouttiere);
    column-gap: 24px;
  }
  .entete-ecrans {
    margin: 0;
    border-top: 0;
    justify-content: flex-end;
    gap: 4px;
  }
  .entete-ecrans a { flex: none; padding: 0 12px; }
}

/* --- le logo complet (symbole + « Datatrail Consulting ») -----------------
   Pour les grandes places seulement (page d'entrée, aperçu) : son texte fait
   ≈ 9 % du diamètre. À 40 px de haut il mesurerait 3,5 px — illisible ; c'est
   pourquoi l'en-tête prend le symbole seul et écrit le nom en vraie police. */
.logo-complet {
  display: block;
  width: 128px;
  height: 128px;
  margin: 8px auto 16px;
  color: var(--accent);
}