/* GÉNÉRÉ par scripts/sync-guides-static.mjs depuis lib/guides/staticChrome.ts.
   Ne pas éditer ici : toute retouche est écrasée au prochain passage. */

/* ── Chrome de site injecté dans les guides (lib/guides/staticChrome.ts) ───── */
/* Poppins AUTO-HÉBERGÉE (BOU-31, 17 sept. 2026) — les 210 guides chargeaient la
   feuille Google Fonts (`<link href="https://fonts.googleapis.com/css2?family=Poppins…">`),
   que `style-src 'self' 'unsafe-inline'` (next.config.ts) bloque : les 210 pages + l'index
   rendaient donc en police de repli (Arial-like). Correction sans toucher la CSP, comme le
   reste de l'app (`Poppins` de `next/font/google` dans app/layout.tsx) : les 5 graisses
   utilisées par guides.css sont vendorisées ici (même source, même sous-ensemble latin —
   voir lib/cv/fonts pour le précédent) et servies en same-origin. Le retrait des deux
   `<link>` Google vit dans scripts/sync-guides-static.mjs, pas ici : voir GOOGLE_FONTS_LINK_RE.
   `font-display: swap` reproduit le `&display=swap` de l'ancien lien. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/poppins/poppins-latin-400.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/poppins/poppins-latin-500.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/poppins/poppins-latin-600.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/poppins/poppins-latin-700.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/poppins/poppins-latin-800.woff2) format('woff2'); }
.ej-guides-chrome { font-family: 'Poppins', Arial, sans-serif; }
.ej-snav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 0 56px; height: 64px;
  background: #FFFCF7;                    /* --color-background */
  border-bottom: 1px solid #f0eef4;       /* --color-border */
}
/* ⚠️ Tout ce qui porte une couleur de lien est préfixé par `.guides-body`.
   La feuille des guides pose `.guides-body a { color: var(--accent) }` (0,1,1) :
   un sélecteur de classe seul (0,1,0) PERD contre elle, et un sélecteur à égalité
   ne gagnerait que par l'ordre d'insertion — c'est-à-dire par accident. Le préfixe
   rend la victoire explicite. Repéré sur le bouton « Connexion », qui ressortait
   violet au lieu d'encre sombre. */
.guides-body .ej-snav-logo { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
/* Hauteur imposée, largeur libre : le ratio de l'asset (2.99:1) fait le reste. */
.guides-body .ej-logo-img { height: 24px; width: auto; display: block; }
.ej-snav-links { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.guides-body .ej-snav-links a { font-size: 13px; color: #3a2550; text-decoration: none; }  /* --color-text-body */
.guides-body .ej-snav-links a:hover { color: #7b6ade; }
.ej-snav-actions { display: flex; gap: 12px; align-items: center; }
/* Tailles alignées sur `.ej-snav .btn-outline`/`.btn-dark` (components/public/SiteNav.tsx) —
   mesurées 13px/8px 20px/font-weight 600 uniforme ici contre 12.5px/7px 16px (outline,
   weight 500) et 8px 16px (dark, weight 600) côté vrai en-tête : le guide avait sa propre
   taille, pas celle de l'app. */
.guides-body .ej-btn-outline, .guides-body .ej-btn-dark {
  display: inline-block; text-align: center; white-space: nowrap;
  border-radius: 999px; font-size: 12.5px; text-decoration: none;
}
.guides-body .ej-btn-outline { border: 1.5px solid #1b1222; color: #1b1222; padding: 7px 16px; font-weight: 500; }
.guides-body .ej-btn-dark { background: #1b1222; color: #fff; padding: 8px 16px; border: none; font-weight: 600; }
.ej-live {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 20px; font-size: 12.5px;
  background: #edeaf8;                    /* --color-section */
  color: #3a2550; text-align: center; flex-wrap: wrap;
}
.guides-body .ej-live a { color: #7b6ade; text-decoration: underline; }
.ej-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #7b6ade; flex-shrink: 0; }
.ej-live-sep { color: #6b7280; }          /* --color-text-muted */
@media (max-width: 880px) {
  .ej-snav { flex-wrap: wrap; height: auto; padding: 12px 20px; gap: 12px; }
  .ej-snav-links { order: 3; width: 100%; flex-wrap: wrap; gap: 14px 20px; }
  .ej-snav-actions { flex-wrap: wrap; }
}
/* Sous 560px, « Je publie une annonce — gratuit » ne tient plus sur une ligne à
   côté de « Connexion » : mesuré à 390px, il débordait du cadre. Les deux boutons
   passent en pleine largeur, se partagent la ligne et le libellé peut se replier
   plutôt que d'être coupé. */
@media (max-width: 560px) {
  .ej-snav-actions { width: 100%; }
  .guides-body .ej-btn-outline,
  .guides-body .ej-btn-dark {
    flex: 1 1 auto; white-space: normal; font-size: 12.5px; padding: 9px 14px;
  }
}

.ej-gfooter {
  background: #1b1222;                    /* --color-dark */
  color: rgba(255,255,255,0.7);
  padding: 64px 56px 36px;
  font-family: 'Poppins', Arial, sans-serif;
  margin-top: 64px;
}
.ej-gfooter .gf-top {
  max-width: 1260px; margin: 0 auto 56px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.4fr 1fr; gap: 32px;
}
.ej-gfooter .gf-tagline { font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.6; max-width: 260px; margin-top: 12px; }
.ej-gfooter .gf-col-title { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.3); margin-bottom: 18px; }
.ej-gfooter .gf-col ul { list-style: none; margin: 0; padding: 0; }
.ej-gfooter .gf-col li { margin-bottom: 12px; }
.ej-gfooter .gf-col a { font-size: 13px; color: rgba(255,255,255,0.6); text-decoration: none; }
.ej-gfooter .gf-col a:hover { color: #fff; }
.ej-gfooter .gf-bottom {
  max-width: 1160px; margin: 0 auto; display: flex; justify-content: space-between;
  align-items: center; gap: 16px; border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 28px; font-size: 12px; color: rgba(255,255,255,0.3);
}
.ej-gfooter .gf-social { display: flex; gap: 8px; flex-shrink: 0; }
/* Pastilles corail — #c05746 = --color-coral, la seconde couleur de la charte. */
.guides-body .ej-gfooter .gf-ig {
  width: 36px; height: 36px; border: 1px solid #c05746; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: #c05746; text-decoration: none; flex-shrink: 0;
}
@media (max-width: 1000px) {
  .ej-gfooter { padding: 56px 24px 32px; }
  .ej-gfooter .gf-top { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  .ej-gfooter .gf-top { grid-template-columns: 1fr; gap: 28px; }
  .ej-gfooter .gf-bottom { flex-direction: column; align-items: flex-start; }
}
/* ── fin du chrome injecté ─────────────────────────────────────────────────── */