/* ============================================================
   mgba.ch — styles
   Tout vient du design system mgba. (brand/, copié dans /brand/
   au build) : /brand/tokens.css, chargée avant cette feuille,
   fournit les polices, les couleurs par rôle et par thème, les
   tailles fluides, les espacements et les rayons. Ici, aucune
   couleur, taille ni espacement en dur, et aucune variable du
   design system redéfinie : un besoin sans token se règle dans le
   design system (brand/BRAND.md, « Consommer le design system »).
   Deux polices sur le site : Newsreader pour les titres et ce qui
   porte une voix, Inter pour le contenu. Outfit n'existe que
   vectorisée, dans les logos SVG.
   ============================================================ */

/* Thème : tokens.css porte le clair par défaut et le sombre sous
   [data-theme="dark"] ; le script en tête de chaque page pose
   data-theme avant le premier affichage. color-scheme n'est pas une
   couleur : il dit au navigateur quel thème donner à ses propres
   éléments (barres de défilement, champs). */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* L'attribut hidden n'est qu'un display:none de la feuille par défaut du
   navigateur : la moindre règle display du site (le bouton de thème est en
   grid) l'emporte. Sans cette règle, le bouton resterait visible et inerte
   quand JavaScript est désactivé. */
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Mise en page : en-tête / scène centrale / pied ───────── */
/* La marge de page est fluide (page-margin) : pas de media query. */
.layout {
  min-height: 100%;
  max-width: var(--width-content);
  margin: 0 auto;
  padding-inline: var(--page-margin);
  display: flex;
  flex-direction: column;
}

.top-bar, .bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-6);
}

/* Pas de filet au-dessus du pied : la charte sépare par le fond ou
   l'espace, jamais par des traits. */
.bottom-bar { flex-wrap: wrap; }

.center-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--sp-7) var(--sp-8);
  max-width: var(--width-text);
}

/* ── En-tête ──────────────────────────────────────────────── */
/* Le logo (image SVG de la charte) existe en deux fichiers, un par fond :
   on affiche celui du thème actif. Hauteur logo-height : avec un rapport
   de 2,9, le logo seul fait 99 px de large, au-dessus du minimum de 96 px.
   Les logos des sous-marques sont bien plus larges (rapport ≈ 8) : la
   charte leur interdit de rétrécir (« mgbä. » resterait sous 96 px).
   C'est pourquoi le bouton de thème disparaît sur téléphone (plus bas).
   max-width n'est qu'un filet pour les écrans de moins de 320 px. */
.brand { display: block; min-width: 0; }
.brand-logo {
  display: block;
  height: var(--logo-height);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.brand-logo--dark { display: none; }
:root[data-theme="dark"] .brand-logo--light { display: none; }
:root[data-theme="dark"] .brand-logo--dark  { display: block; }

/* Menu des sous-marques : à droite du logo, avant le bouton de thème.
   Il liste les pages publiées sauf celle où l'on est (sur une page de
   service, le logo de la sous-marque dit déjà où l'on est). Sans flèche :
   ils ouvrent une page du site. Pas de burger : sur téléphone, la liste
   passe sous le logo.
   Au repos, en gris texte et sans soulignement : l'écho des noms de
   service des logos de sous-marque (mgbä. en encre, le service en gris).
   Dans un menu, c'est la position qui dit « lien », pas le trait. Au
   survol, l'état normal d'un lien : encre et soulignement 2 px. */
.top-bar { flex-wrap: wrap; }
.site-nav { margin-left: auto; }
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a,
.site-nav a:visited {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--color-text-muted);
  text-decoration-line: none;
  transition: color var(--duration-fast) var(--easing-standard);
}
/* :visited ci-dessus : sans lui, la règle générale a:visited (section
   Liens) remettrait en encre un lien déjà visité. Le survol vient après
   pour l'emporter sur les deux. */
.site-nav a:hover {
  color: var(--color-link);
  text-decoration-line: underline;
}
@media (max-width: 639px) { /* breakpoint-sm */
  .site-nav { flex-basis: 100%; margin-left: 0; }
}

.theme-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit; /* un bouton ne reprend pas la police de la page */
  cursor: pointer;
}
.theme-toggle:hover { color: var(--color-text); }

/* Sur téléphone (sous breakpoint-sm, 640 px), pas de bouton de thème :
   le thème suit le réglage du téléphone (voir theme.js), et le logo de
   sous-marque garde toute la largeur. */
@media (max-width: 639px) {
  .theme-toggle { display: none; }
}

/* ── Scène centrale ───────────────────────────────────────── */
/* Deux espacements seulement, nettement différents : « Je suis… » est
   collé à la conviction (sp-3, il l'introduit), les trois temps s'en
   détachent (sp-7). Des écarts presque égaux se liraient comme une
   erreur d'alignement. */
.role-line {
  margin: 0 0 var(--sp-3);
  font-size: var(--text-lg);
  line-height: var(--lh-sm);
  color: var(--color-text-muted);
  min-height: 1lh; /* la ligne ne s'effondre pas quand le mot est effacé */
}

.role { color: var(--color-text); }

/* Le point final du rôle : un caractère ordinaire, dans la couleur du mot. */
.role-stop { color: var(--color-text); }

/* Curseur de frappe : composant Caret du design system. Terracotta
   (color-caret), seul signe de couleur de l'accueil, écho du point du logo.
   Clignote allumé la moitié du temps, sans fondu. */
.cursor {
  display: inline-block;
  width: var(--caret-width);
  height: var(--caret-height);
  margin-left: var(--caret-gap);
  vertical-align: var(--caret-baseline);
  background: var(--color-caret);
  animation: blink var(--duration-blink) steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* La conviction : niveau Display de la charte. */
.manifesto {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-display);
  line-height: var(--lh-display);
  text-wrap: balance;
}

/* Le comment : trois temps, un par ligne, plus discrets que la conviction
   (niveau Titre 3, en texte secondaire). */
.manifesto-how {
  margin: var(--sp-7) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  color: var(--color-text-muted);
}
.manifesto-how span { display: block; text-wrap: pretty; }
.manifesto-how span + span { margin-top: var(--sp-2); }

/* ── Pages de services (/coaching/, /consulting/) ─────────── */
/* Une colonne de texte qui se lit de haut en bas et mène à une seule
   action : écrire. L'en-tête porte le logo de la sous-marque (voir
   l'en-tête plus haut). */
.offer {
  flex: 1;
  max-width: var(--width-text);
  padding-block: var(--sp-7) var(--sp-9);
}

.offer-label {
  margin: 0 0 var(--sp-3);
  font-size: var(--text-lg);
  line-height: var(--lh-sm);
  color: var(--color-text-muted);
}

.offer h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-h1);
  line-height: var(--lh-h1);
  text-wrap: balance;
}

.offer-lead {
  margin: var(--sp-5) 0 0;
  font-size: var(--text-lg);
  text-wrap: pretty;
}

/* Les terrains (consulting) ou les trois temps (coaching) : titre en
   Newsreader (la voix), texte en Inter (le contenu). */
.offer-steps { margin-top: var(--sp-8); }
.offer-steps section + section { margin-top: var(--sp-6); }
.offer-steps h2 {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
}
.offer-steps p { margin: 0; text-wrap: pretty; }

/* Terrains (consulting), sur ordinateur : l'étiquette à gauche, la
   situation à droite. Le connaisseur parcourt la colonne des étiquettes,
   le néophyte lit les situations. Sur téléphone, tout reste empilé. */
@media (min-width: 640px) { /* breakpoint-sm */
  .offer-steps--terrains section {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: var(--sp-5);
    align-items: baseline;
  }
  .offer-steps--terrains h2 { margin: 0; }
}

/* Témoignage : citation en Newsreader, nom en Inter. */
.offer-quote { margin: var(--sp-8) 0 0; }
.offer-quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
}
.offer-quote figcaption {
  margin-top: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Le bandeau du passage à l'action : « Travailler ensemble » et l'appel
   à écrire, sur le fond alterné (la charte sépare par le fond, jamais
   par un trait). Il occupe toute la largeur de l'écran alors que le texte
   reste dans sa colonne : border-image peint le fond jusqu'aux bords sans
   élargir la page (aucun défilement horizontal). */
.offer-band {
  margin-top: var(--sp-8);
  padding-block: var(--sp-8);
  border-image: linear-gradient(var(--color-surface-alt), var(--color-surface-alt)) fill 0 / 0 / 0 100vw;
}
.offer:has(.offer-band) { padding-block-end: 0; }

/* Les façons de travailler ensemble : une liste courte, la forme en
   gras, puis ce qu'elle recouvre. */
.offer-ways { margin: 0; }
.offer-ways ul { margin: 0; padding: 0; list-style: none; }
.offer-ways li { text-wrap: pretty; }
.offer-ways li + li { margin-top: var(--sp-3); }
.offer-ways strong { font-weight: var(--weight-semibold); }

/* L'appel final : la seule action principale de la page. */
.offer-cta { margin-top: var(--sp-8); }
.offer-ways h2,
.offer-cta h2 {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
}
.offer-cta p { margin: 0 0 var(--sp-5); text-wrap: pretty; }

/* Bouton primaire de la charte : pilule de 44 px, texte blanc sur
   terracotta (4,6:1), terracotta foncé au survol (5,3:1), valables sur
   les deux thèmes. */
.button-primary,
.button-primary:visited {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--button-padding-inline);
  border-radius: var(--radius-pill);
  background: var(--color-action);
  color: var(--color-on-action);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.button-primary:hover {
  color: var(--color-on-action);
  background: var(--color-action-hover);
}

/* ── Liens ────────────────────────────────────────────────── */
/* Charte (composant Link) : texte dans la couleur du texte, souligné
   1 px en gris ; au survol, le trait passe à 2 px dans la couleur du
   texte. Le soulignement est le seul signe d'un lien : il reste toujours.
   Un lien fléché porte son texte dans .link-text, seul souligné : le
   trait s'arrête sous le mot, pas sous l'espace ni sous la flèche. */
a, a .link-text {
  color: var(--color-link);
  text-decoration-line: underline;
  text-decoration-thickness: var(--link-underline);
  text-decoration-color: var(--color-link-underline);
  text-underline-offset: var(--link-underline-offset);
  transition: text-decoration-color var(--duration-fast) var(--easing-standard);
}
a:visited { color: var(--color-link); }
a:has(.link-text) { text-decoration-line: none; }
a:hover, a:hover .link-text {
  text-decoration-thickness: var(--link-underline-hover);
  text-decoration-color: var(--color-link);
}

/* Flèche ↗ (le lien sort du site : terracotta au survol, une petite
   action) ou ↓ (il descend dans la page). Elle glisse de 2 px dans sa
   direction ; inline-block pour que transform s'applique. */
.link-arrow {
  display: inline-block;
  transition:
    transform var(--duration-fast) var(--easing-standard),
    color var(--duration-fast) var(--easing-standard);
}
a:hover .link-arrow {
  color: var(--color-link-arrow-hover);
  transform: translate(var(--link-arrow-shift), calc(-1 * var(--link-arrow-shift)));
}
a:hover .link-arrow--down {
  color: var(--color-link);
  transform: translateY(var(--link-arrow-shift));
}

/* Le logo est un lien, mais une image : pas de soulignement. */
a.brand { text-decoration: none; }

/* ── Liens du pied de page ────────────────────────────────── */
.contact-area, .social-area {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
}

/* Zone cliquable de 44 px au moins, sans changer la ligne de texte. */
.link-item {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

/* ── Focus clavier ────────────────────────────────────────── */
/* Anneau 2 px à la couleur de focus (bleu de Prusse, crème sur fond
   sombre), décalé de 2 px, sur tout élément interactif. */
a:focus-visible, button:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-focus);
}
/* Le bouton garde sa forme de pilule : l'anneau en épouse le contour. */
.button-primary:focus-visible { border-radius: var(--radius-pill); }

@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
  a, a .link-text, .link-arrow { transition: none; }
  a:hover .link-arrow { transform: none; }
}