/* L'identité du front — direction C « Poche » (choisie par le propriétaire le 15/10/2026,
   `docs/front/maquettes-v3/c.html`). S'ajoute à `style.css`, juste après elle, et avant
   les feuilles d'écran. AUCUNE couleur ici : que les jetons `--sc-…` du thème choisi
   (`/theme.css`, `/apparence.css`, `front/themes.py`), dont les contrastes sont mesurés.

   Polices : Bricolage Grotesque (titres, heures, chiffres, 600–800) et Figtree (texte,
   400–600), hébergées ici (`../polices/`, tirées de Google Fonts le 15/10 : la CSP
   `font-src 'self'` interdit de les charger de chez Google) — SIL Open Font License 1.1
   (`polices/OFL.txt`, empreintes dans `polices/provenance.json`). Deux sous-ensembles :
   `latin` (tout le français) et `latin-ext` (tiré seulement si un caractère de sa plage
   apparaît). Jusqu'au 15/10 : Instrument Serif et Manrope (identité or et violet). */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../polices/bricolage-grotesque-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: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../polices/bricolage-grotesque-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-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../polices/figtree-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: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../polices/figtree-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-20C4, 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: "Bricolage repli"; src: local("Arial Black"), local("Arial"); size-adjust: 92%; }
@font-face { font-family: "Figtree repli"; src: local("Helvetica Neue"), local("Arial"); size-adjust: 98%; }

:root {
  --police-titre: "Bricolage Grotesque", "Bricolage repli", var(--sc-police-titre, system-ui), sans-serif;
  --police-texte: "Figtree", "Figtree repli", var(--sc-police-texte, system-ui), sans-serif;
  --largeur-barre: 252px;
}

/* --- l'échelle typographique ---------------------------------------------
   Bricolage est une grotesque expressive : les titres en 700–800, serrés. */

body {
  font-family: var(--police-texte);
  font-size: 15.5px;
  line-height: 1.5;
  background: var(--sc-fond);
  color: var(--sc-texte);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--police-titre);
  font-weight: 700;
  letter-spacing: -0.015em;
  /* Un nom d'entité de 80 caractères se coupe, il ne pousse pas la page. */
  overflow-wrap: anywhere;
}
h1 { font-size: 2.2rem; font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; margin: 0 0 6px; }
h2 { font-size: 1.3rem; line-height: 1.2; margin: 0 0 6px; }
h3 { font-size: 1.05rem; line-height: 1.3; margin: 0 0 4px; }

a { color: var(--sc-accent-encre); }

/* Le focus clavier : toujours visible, la même bague partout (jeton --sc-focus, ≥ 3:1
   sur tous les fonds). */
:focus-visible { outline: 2px solid var(--sc-focus); outline-offset: 2px; }

/* Le mouvement : rien ne bouge pour qui l'a demandé à son système. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* --- la coquille (15/10, C « Poche ») ---------------------------------------
     · téléphone (< 900 px) : en haut, la marque, la bascule, l'initiale, puis la
       recherche ; les écrans dans la BARRE DU BAS flottante (cinq, « + Déposer » au
       centre) ; la page est le cadre lui-même ;
     · ordinateur (≥ 900 px) : une BARRE LATÉRALE posée sur le cadre teinté (marque,
       recherche, récents en tuiles, les six écrans, toi en bas avec la bascule) ; le
       contenu dans une grande FEUILLE arrondie.
   L'ordre du DOM : marque → recherche → récents → écrans → toi, bascule, sortir
   (celui qu'on lit et qu'on parcourt au clavier). */

.entete { background: transparent; }

.entete-dedans {
  margin: 0 auto;
  padding: 10px var(--gouttiere) 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "marque bascule moi"
    "chercher chercher chercher";
  /* 30/10 — l'apparence vit dans le profil : la case « bascule » reste vide. */
  align-items: center;
  column-gap: 10px;
  row-gap: 8px;
}

.entete-marque {
  grid-area: marque;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 44px;
  color: var(--sc-texte);
  text-decoration: none;
}

/* ⚠ Le symbole est PROVISOIRE (`symbole-provisoire.svg`, lu par `front/entete.py`) :
   posé, en couleur de surface, sur une pastille aux couleurs des rubriques (en
   attendant le logo définitif). */
.entete-logo {
  flex: none;
  width: 28px;
  height: 28px;
  padding: 4px;
  border-radius: 9px;
  color: var(--sc-surface);
  background: conic-gradient(from 200deg, var(--sc-rdv), var(--sc-attente), var(--sc-verif),
                             var(--sc-nuit), var(--sc-contenu), var(--sc-rdv));
}

.entete-nom {
  color: var(--sc-texte);
  font-family: var(--police-titre);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* La recherche unique : une personne, une entreprise, un projet. */
.entete-chercher { grid-area: chercher; margin: 0; min-width: 0; position: relative; }
.entete-chercher .loupe {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--sc-texte-2);
  pointer-events: none;
}
.entete-chercher input[type="search"] {
  width: 100%;
  min-height: 44px;
  padding: 8px 14px 8px 38px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--sc-texte);
  background: var(--sc-surface);
  border: 1px solid var(--sc-bordure-forte);
  border-radius: var(--sc-rayon-champ, 14px);
}
.entete-chercher input[type="search"]::placeholder { color: var(--sc-texte-3); opacity: 1; }
.entete-chercher input[type="search"]:focus { outline: 2px solid var(--sc-focus); outline-offset: 1px; }

/* Les récents (tuiles) et les six écrans : sur ordinateur seulement (la barre du bas
   porte les écrans sur téléphone). */
.entete-recents, .entete-ecrans, .entete-prenom, .entete-sortir { display: none; }

.entete-pied { display: contents; }

/* L'initiale du propriétaire : Réglages est derrière. */
.entete-moi {
  grid-area: moi;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sc-accent);
  color: var(--sc-accent-sur);
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}
.entete-moi .icone { width: 22px; height: 22px; }
.entete-moi[aria-current="page"] { outline: 2px solid var(--sc-focus); outline-offset: 2px; }

/* 06/10 — la bascule clair / sombre : un rond, à côté de l'initiale. Un seul des deux
   boutons se voit (les jetons --bascule-* de style.css / `/apparence.css`, servis selon
   le choix mémorisé : aucune ligne de script). */
.entete-apparence { grid-area: bascule; margin: 0; display: flex; }
.entete-apparence .bascule {
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--sc-surface);
  border: 0;
  box-shadow: var(--sc-ombre);
  color: var(--sc-texte);
}
.entete-apparence .bascule:hover { color: var(--sc-accent-encre); filter: none; }
.entete-apparence .bascule .icone { width: 20px; height: 20px; }
.entete-apparence .bascule-sombre { display: var(--bascule-sombre); }
.entete-apparence .bascule-clair { display: var(--bascule-clair); }
.entete-apparence .bascule:focus-visible { outline: 2px solid var(--sc-focus); outline-offset: 2px; }
.entete-sortir { grid-area: sortir; margin: 0; }
.entete-sortir button { padding: 0 14px; font-size: 0.875rem; }

.entete-ecrans a:focus-visible,
.entete-marque:focus-visible,
.entete-moi:focus-visible,
.entete-recents a:focus-visible,
.barre-bas a:focus-visible {
  outline: 2px solid var(--sc-focus);
  outline-offset: 2px;
  border-radius: var(--sc-rayon-pastille);
}

/* --- la barre du bas (téléphone) : flottante, cinq écrans, « + Déposer » au centre -- */
.barre-bas {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  padding: 6px;
  background: var(--sc-surface);
  border-radius: 28px;
  box-shadow: var(--sc-ombre-flottante);
}
.barre-bas a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: 4px 2px;
  color: var(--sc-texte-2);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  overflow: visible;
}
.barre-bas a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-bas .icone { width: 22px; height: 22px; flex: none; }
.barre-bas a[aria-current="page"] { color: var(--sc-accent-encre); font-weight: 700; }
/* « + Déposer » : le grand rond, qui déborde de la barre ; son nom reste pour le lecteur
   d'écran. */
.barre-bas a.deposer .icone {
  width: 54px;
  height: 54px;
  padding: 14px;
  margin-top: -26px;
  border-radius: 50%;
  background: var(--sc-depot);
  color: var(--sc-depot-sur);
  box-shadow: var(--sc-ombre-flottante);
}
.barre-bas a.deposer span {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.barre-bas a.deposer[aria-current="page"] .icone { outline: 2px solid var(--sc-focus); outline-offset: 2px; }
/* Rien ne doit passer SOUS la barre : la page lui laisse sa hauteur. */
body:has(.barre-bas) { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

/* En dessous de 360 px (vieux téléphones, zoom système), le nom se serre ;
   plus étroit encore, il se termine par « … » plutôt que de pousser la page. */
@media (max-width: 359px) {
  .entete-logo { width: 26px; height: 26px; }
  .entete-marque { gap: 8px; }
  .entete-nom { font-size: 1rem; }
}

/* Sans session (entrée, lien de connexion, panne) : la marque seule. */
.entete-dedans:not(:has(.entete-ecrans)) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "marque";
  max-width: 44rem;
}

@media (min-width: 900px) {
  .barre-bas { display: none; }
  body:has(.barre-bas) { padding-bottom: 0; }

  /* La barre latérale, fixe, sur le cadre. */
  body:has(.entete-ecrans) { padding-left: var(--largeur-barre); }
  body:has(.entete-ecrans) > .entete {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--largeur-barre);
    overflow-y: auto;
    z-index: 5;
  }
  .entete-dedans:has(.entete-ecrans) {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 100%;
    padding: 18px 12px 18px 14px;
  }
  .entete-dedans:has(.entete-ecrans) .entete-marque { padding: 4px 8px 12px; }
  .entete-dedans:has(.entete-ecrans) .entete-chercher { margin-bottom: 10px; }
  .entete-dedans:has(.entete-ecrans) .entete-chercher input[type="search"] {
    background: var(--sc-surface-2);
    border-color: transparent;
    box-shadow: inset 0 0 0 1px var(--sc-bordure-forte);
    font-size: 0.88rem;
  }

  .entete-recents {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 14px;
  }
  .tuile-recente {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    min-width: 0;
    aspect-ratio: 1.15;
    padding: 6px 4px;
    border-radius: var(--sc-rayon-champ);
    text-decoration: none;
    text-align: center;
  }
  .tuile-recente .sigle { font: 700 15px/1 var(--police-titre); }
  .tuile-recente .nom {
    max-width: 100%;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--sc-texte-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tuile-recente.personne { background: var(--sc-attente-doux); color: var(--sc-attente-encre); }
  .tuile-recente.projet { background: var(--sc-rdv-doux); color: var(--sc-rdv-encre); }
  .tuile-recente.organisation { background: var(--sc-nuit-doux); color: var(--sc-nuit-encre); }

  .entete-ecrans { display: flex; flex-direction: column; gap: 2px; }
  .entete-ecrans a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: var(--sc-rayon-pastille);
    color: var(--sc-texte-2);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
  }
  .entete-ecrans .icone { width: 18px; height: 18px; flex: none; }
  .entete-ecrans a:hover { background: color-mix(in srgb, var(--sc-surface) 60%, transparent); color: var(--sc-texte); }
  .entete-ecrans a[aria-current="page"] {
    background: var(--sc-surface);
    color: var(--sc-texte);
    font-weight: 600;
    box-shadow: var(--sc-ombre);
  }
  /* 17/10 — les sous-entrées d'un écran (« Ma méthode », « Tes modèles » sous Projets) : en retrait,
     plus petites ; la sous-entrée de la page affichée est allumée comme une entrée. */
  .entete-sous-ecrans { display: flex; flex-direction: column; gap: 2px; margin: 0 0 4px; }
  .entete-ecrans .entete-sous-ecrans a { min-height: 34px; padding-left: 42px; font-size: 0.88rem; }

  .entete-pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: auto;
    padding: 14px 8px 0;
  }
  .entete-moi { width: 36px; height: 36px; font-size: 0.8rem; }
  .entete-prenom { display: block; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .entete-apparence { margin-left: auto; }
  .entete-apparence .bascule { width: 40px; height: 40px; min-height: 40px; }
  .entete-sortir { display: block; flex-basis: 100%; }
  .entete-sortir button, .entete-sortir button.discret { min-height: 36px; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--sc-texte-2); font-weight: 500; }
  .entete-sortir button:hover { color: var(--sc-texte); text-decoration: underline; }

  /* La grande feuille : le contenu de chaque écran. */
  body:has(.entete-ecrans) > main {
    max-width: none;
    min-height: calc(100vh - 20px);
    margin: 10px 10px 10px 0;
    padding: 30px max(34px, calc((100% - 56rem) / 2)) 48px;
    background: var(--sc-surface);
    border-radius: var(--sc-rayon-feuille, 26px);
    box-shadow: var(--sc-ombre);
  }
  body:has(.entete-ecrans) > main.ecran { padding: 30px 34px 48px; }
}

/* --- le logo complet (symbole + « Datatrail Consulting ») -----------------
   Pour les grandes places seulement (page d'entrée, aperçu). */
.logo-complet {
  display: block;
  width: 128px;
  height: 128px;
  margin: 8px auto 16px;
  color: var(--sc-accent-encre);
}

/* --- 30/10 — le profil (un `details`, sans script) et « ＋ Déposer » sous la recherche -------------------- */
.entete-profil { grid-area: moi; position: relative; justify-self: end; }
.entete-profil > summary { list-style: none; cursor: pointer; }
.entete-profil > summary::-webkit-details-marker { display: none; }
.entete-profil-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 230px;
  display: flex; flex-direction: column; gap: 2px; padding: 10px;
  background: var(--sc-surface); color: var(--sc-texte);
  border-radius: var(--sc-rayon-champ, 14px); box-shadow: var(--sc-ombre-flottante);
}
.entete-profil-menu > a { padding: 9px 10px; border-radius: var(--sc-rayon-pastille); color: var(--sc-texte); text-decoration: none; }
.entete-profil-menu > a:hover { background: var(--sc-surface-2); }
.entete-profil-menu > a[aria-current="page"] { font-weight: 600; }
.entete-profil-apparence { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 10px; color: var(--sc-texte-2); }
.entete-profil-menu .entete-apparence { margin: 0; }
.entete-profil-menu .entete-sortir { display: block; padding: 4px 10px; }
.entete-deposer { display: none; }
.sous-ecran .progression { margin-left: 6px; font-size: 0.8rem; color: var(--sc-texte-3); }
.entete-ecrans .entete-sous-ecrans a.discrete { opacity: 0.6; }

@media (min-width: 900px) {
  .entete-profil { justify-self: stretch; width: 100%; }
  .entete-profil > summary { display: flex; align-items: center; gap: 10px; width: 100%; height: auto; border-radius: var(--sc-rayon-pastille); background: transparent; color: var(--sc-texte); padding: 4px; }
  .entete-profil > summary > span[aria-hidden], .entete-profil > summary > .icone { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--sc-accent); color: var(--sc-accent-sur); flex: none; }
  .entete-profil-menu { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; }
  .entete-profil-menu .seulement-telephone { display: none; }
  .entete-deposer {
    /* La barre centre ses enfants : sans `stretch`, la pilule se réduit à son mot et le colle à ses bords. */
    align-self: stretch;
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 0 0 12px;
    padding: 0 16px;
    border-radius: var(--sc-rayon-pastille); background: var(--sc-accent); color: var(--sc-accent-sur);
    font-weight: 600; text-decoration: none; box-shadow: var(--sc-ombre);
  }
  .entete-deposer .icone { width: 18px; height: 18px; }
  .entete-deposer[aria-current="page"] { outline: 2px solid var(--sc-focus); outline-offset: 2px; }
}