/* ============================================================
   SOLAR EDITORIAL - BASE PARTAGEE
   Fondations et composants communs a toutes les pages
   (accueil + etudes de cas). Charge APRES solar-editorial-tokens.css,
   dont il consomme les variables (--solar, --ink, etc.).
   ============================================================ */

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.5;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }

/* ---------- Focus clavier ---------- */
:focus-visible {
  outline: 2px solid var(--solar-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Lien d'evitement (accessibilite) ---------- */
.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  background: var(--ink);
  color: var(--cream);
  padding: 10px 16px;
  border-radius: 100px;
  font-size: 13px;
  transition: top .15s;
  z-index: 200;
}
.skip-link:focus { top: 12px; }

/* ---------- Accent serif italique (titres expressifs) ---------- */
.serif {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-style: italic;
  color: var(--solar);
  letter-spacing: -0.02em;
}

/* ---------- Navigation (conteneur commun) ---------- */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250,246,240,0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gray-light);
  padding: 16px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Sans gap, le lien de retour vient toucher la bascule de langue des que
     la largeur manque : space-between ne reserve rien quand il n'y a plus
     d'espace libre a distribuer. */
  gap: 20px;
}

/* Identite, presente sur toutes les pages : c'est le chemin du retour a
   l'accueil, y compris depuis une etude de cas ou le lien de retour mene
   ailleurs. Le point orange fait partie du nom. */
.nav-brand {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
}
.nav-brand::after { content: '.'; color: var(--solar); }

/* Regroupe l'identite et le lien de retour, sans quoi space-between
   pousserait le retour au centre de la nav au lieu de le poser a droite
   du nom. */
.nav-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Regroupe les elements de droite (bascule de langue + CTA) pour
   qu'ils restent colles ensemble plutot que centres dans la nav. */
.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Sous 600px, les quatre elements de la nav ne tiennent plus sur une ligne :
   le nom, le lien de retour et le CTA se coupaient en plein milieu d'un mot.
   Deux rangees franches valent mieux qu'une rangee en morceaux. */
@media (max-width: 600px) {
  /* padding-block seul : les pages reglent deja les marges laterales. */
  nav { flex-wrap: wrap; gap: 12px 16px; padding-block: 10px; }
  .nav-left { flex: 1 1 100%; }
  .nav-right { flex: 1 1 100%; justify-content: flex-end; }
  .nav-brand, .nav-back { white-space: nowrap; }
}

/* CTA de nav, partage entre l'accueil et les etudes de cas. */
.nav-cta {
  background: var(--solar-deep);
  color: var(--cream) !important;
  padding: 8px 16px;
  border-radius: 100px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  box-shadow: var(--shadow-interactive);
  transition: background-color .2s, box-shadow .2s, transform .2s;
}
.nav-cta:hover {
  background: var(--ink);
  color: var(--cream);
  box-shadow: var(--shadow-interactive-hover);
  transform: translateY(-1px);
}
.nav-cta:active { transform: translateY(0); box-shadow: var(--shadow-interactive); }

/* ---------- Bascule de langue FR/EN (partagee entre les pages) ---------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--gray-light);
  border-radius: 100px;
  overflow: hidden;
}
.lang-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 13px;
  color: var(--stone-deep);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color .2s, background-color .2s;
}
.lang-btn.active {
  background: var(--solar-deep);
  color: var(--cream);
}
.lang-btn:not(.active):hover { color: var(--ink); }

@media (max-width: 768px) {
  .lang-btn { padding: 6px 10px; font-size: 10px; }
}

/* ---------- Pastille de categorie (.case-tag) en mobile ---------- */
/* Sur les etudes de cas, le libelle est long ("Application mobile - Initiation
   a la LSF") et ne tient pas sur une ligne sous 560px : il faudrait descendre
   sous 9px pour y arriver, ce qui n'est pas lisible. On assume donc les deux
   lignes, mais sans le mot orphelin que produit le retour a la ligne par
   defaut (297px + 25px pour "LSF" seul). balance egalise les deux lignes,
   center evite que le texte flotte a gauche d'une pastille restee pleine
   largeur. Sans effet sur les pastilles courtes de l'accueil, qui tiennent
   deja sur une ligne. */
@media (max-width: 560px) {
  .case-tag { text-wrap: balance; text-align: center; }
}

/* ---------- Note discrete sur le contenu reste en francais ---------- */
.img-note {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--stone-deep);
  margin-top: 4px;
}

/* ---------- Mouvement reduit (respecte le reglage systeme) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}