/* ===========================================================================
   Le bandeau d'une page d'outil.

   Ces règles vivaient dans tools/assets/css/outils.css, et cela suffisait tant
   que chaque page écrivait son bandeau à la main : les neuf pages qui en
   avaient un chargeaient aussi la feuille. Le bandeau est maintenant fabriqué
   par php/outils_bandeau.php pour TOUTE page d'outil — y compris le Créateur
   de CV, qui a son propre habillage et ne charge ni la charte ni la feuille
   des outils. Il y sortait donc nu : une tuile minuscule, un lien souligné et
   du texte à la file.

   Charger les deux grandes feuilles sur cette page aurait rhabillé tout le
   studio au passage. Le bandeau emporte donc ses règles, et php/outil_acces.php
   les ajoute aux feuilles de la page — comme il pose déjà la teinte et retire
   la barre de navigation. Un outil ajouté demain est habillé sans qu'on y
   pense, quelle que soit la coquille sur laquelle il est bâti.

   Deux précautions pour que les neuf pages existantes ne bougent pas d'un
   pixel :

     • les valeurs sont celles d'origine, à l'identique, y compris la seule
       règle responsive (760 px) ;

     • les jetons de la charte sont lus par un alias privé — « --bd-surface:
       var(--surface, …) ». Là où la charte est chargée, c'est elle qui parle
       et le repli ne sert jamais ; là où elle ne l'est pas, le repli prend le
       relais. Déclarer « --surface » ici aurait au contraire écrasé la charte
       sur les pages qui l'ont.

   Tout est cadré sous .outilhead : rien ne peut déborder sur la page qui
   l'accueille.
   =========================================================================== */

/* La charte pose « * { box-sizing: border-box } » et tout ce qui suit le
   suppose : sans elle, la largeur du bandeau s'ajoutait a ses gouttieres et il
   depassait de quatre-vingts pixels a droite. Cadre sur le bandeau, donc vrai
   partout, y compris la ou la charte n'est pas chargee. */
.outilhead,
.outilhead *,
.outilhead *::before,
.outilhead *::after {
  box-sizing: border-box;
}

.outilhead {
  --bd-surface: var(--surface, #fafafa);
  --bd-line: var(--line, #d7d8db);
  --bd-text: var(--text, #231f20);
  --bd-text-2: var(--text-2, #55585f);
  --bd-accent: var(--accent, #4d6fb3);
  --bd-radius: var(--r-control, 10px);
  --bd-maxw: var(--maxw, 1320px);
  --bd-gut: var(--gut, clamp(1rem, 3.2vw, 2.5rem));
  --bd-display: var(--font-display, "Bricolage Grotesque", "Radio Canada Big",
    "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif);

  background: var(--bd-surface);
  border-bottom: 1px solid var(--bd-line);
}

/* Le thème sombre d'une page sans charte. Seuls les REPLIS changent : là où la
   charte est chargée, ses propres valeurs sombres continuent de gagner. */
html[data-theme="dark"] .outilhead {
  --bd-surface: var(--surface, #1e1f21);
  --bd-line: var(--line, #2d3139);
  --bd-text: var(--text, #fafafa);
  --bd-text-2: var(--text-2, #a8adb6);
  --bd-accent: var(--accent, #85a3e0);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .outilhead {
    --bd-surface: var(--surface, #1e1f21);
    --bd-line: var(--line, #2d3139);
    --bd-text: var(--text, #fafafa);
    --bd-text-2: var(--text-2, #a8adb6);
    --bd-accent: var(--accent, #85a3e0);
  }
}

.outilhead__inner {
  position: relative;
  width: 100%;
  max-width: var(--bd-maxw);
  margin-inline: auto;
  padding: 3rem var(--bd-gut) 1.6rem;
  display: flex;
  gap: 1.2rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.outilhead__id {
  display: flex;
  gap: 1.1rem;
  align-items: center;
  min-width: 0;
}

.outilhead__txt {
  min-width: 0;
}

/* Les marges sont écrites en entier plutôt qu'à moitié : la charte remet
   titres et paragraphes à zéro, une page qui ne la charge pas laisse au
   navigateur ses marges par défaut — et le bandeau s'y disloquait. */
.outilhead__kicker {
  font-family: var(--bd-display);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bd-accent);
  margin: 0 0 .25rem;
}

/* Le titre reprend, à l'identique, ce que la charte donne à ses h1 : même
   police, même graisse, même approche, même interligne. Sur une page qui la
   charge, cela ne change rien ; sur une page qui ne la charge pas, le titre
   ressemble enfin à celui des autres outils. */
.outilhead__nom {
  font-family: var(--bd-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.2rem);
  letter-spacing: -.02em;
  line-height: 1.14;
  color: var(--bd-text);
  margin: 0;
}

.outilhead__lead {
  color: var(--bd-text-2);
  font-size: .95rem;
  max-width: 60ch;
  margin: .3rem 0 0;
}

/* ---- la flèche de retour --------------------------------------------------
   .backlink appartient à la charte. On en reprend ici la part dont le bandeau
   a besoin, sous son propre toit : sur une page qui charge la charte, les deux
   disent la même chose ; sur une page qui ne la charge pas, celle-ci suffit. */
.outilhead .backlink {
  position: absolute;
  top: 1.1rem;
  left: var(--bd-gut);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  color: var(--bd-text-2);
  text-decoration: none;
}

.outilhead .backlink:hover {
  color: var(--bd-accent);
}

/* ---- la tuile ------------------------------------------------------------- */
.outilhead .logo {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--bd-radius);
  border: 1px solid var(--bd-line);
  background: var(--bd-surface);
}

.outilhead .logo--84 {
  width: 84px;
  height: 84px;
}

.outilhead .logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 0;
}

/* Lettrage et pictogramme blancs quel que soit le thème : la teinte de l'outil
   est calibrée pour rester assez sombre dans les deux. */
.outilhead .logo__mono {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-family: var(--bd-display);
  font-weight: 700;
  letter-spacing: -.04em;
  font-size: 1.8rem;
  color: #fff;
}

.outilhead .logo__mono svg {
  width: 52%;
  height: 52%;
  display: block;
}

@media (max-width: 760px) {
  .outilhead__inner {
    padding: 3rem var(--bd-gut) 1.3rem;
  }
}

/* A l'impression, le bandeau disparait. C'est de l'habillage de site : il dit
   ou l'on est et comment revenir, ce qui n'a aucun sens sur une feuille. Le
   Createur de CV le rend evident — son bandeau se serait imprime en tete du
   CV — mais la regle vaut pour tous : on imprime le travail, pas la page qui
   le porte. */
@media print {
  .outilhead {
    display: none !important;
  }
}