/* ============================================================================
   Coquille des pages PUBLIQUES de Knowdg (sans compte).
   ============================================================================

   POURQUOI CE FICHIER EXISTE
   `talent.css` portait ces règles avec, en tête, cette consigne : « À la
   troisième page publique, extraire — deux copies se surveillent, trois
   divergent. » Knowdg Academy est cette troisième page. Les règles de coquille
   sont donc sorties ici plutôt que recopiées une fois de plus.

   CE QU'IL CONTIENT, ET RIEN D'AUTRE
   L'en-tête collant (logo, sélecteur de langue, Connexion / Créer un compte),
   l'accroche centrée, la largeur de contenu, l'état vide et le pied de page.
   Tout ce qui est propre à un produit — cartes d'offres, filtres d'emploi,
   sections de l'Academy — reste dans la feuille de ce produit.

   COMMENT ON LE THÉMATISE
   Trois variables, et une seule à changer en pratique. Une page se peint en
   posant ses valeurs sur `body`, jamais en réécrivant les règles ci-dessous :

       body.academy-page { --pub-brand:#00875A; --pub-brand-dark:#023E2B; }

   Les valeurs par défaut sont le bleu Knowdg, parce que c'est la couleur du
   site et que l'exception doit être celle qui se déclare.

   CE QUI RESTE À FAIRE
   `Views/discover/index.php` garde sa propre copie de ces règles dans un
   `<style>` en ligne. Elle n'a pas été touchée ici : c'est la page publique la
   plus fréquentée, et son bloc est mêlé à des surcharges de `marketplace.css`
   qu'un déplacement mécanique casserait. À reprendre à froid.
   ========================================================================== */

:root {
    --pub-brand: #0077B6;
    --pub-brand-dark: #023e63;
    --pub-fond: #f4f7fb;
    --pub-bordure: #e8ecf2;
    --pub-texte: #1f2937;
    --pub-attenue: #6b7280;
}

body.pub-page {
    background: var(--pub-fond);
    margin: 0;
    color: var(--pub-texte);
}

/* ── En-tête ──────────────────────────────────────────────────────────────── */

.pub-header {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 12px 24px; background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
.pub-header .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.pub-header .brand a { text-decoration: none; display: flex; align-items: center; }
.pub-header .brand img { height: 34px; display: block; }

/* Le nom du produit à côté du logo. DEUX destinations volontairement
   différentes : le logo ramène à l'accueil du site, le mot ramène à l'accueil
   du produit. C'est la convention de toutes les marques à sous-produits, et
   c'est ce qui manquait quand le logo pointait sur la page courante. */
.pub-header .brand-suffix {
    font-weight: 700; color: var(--pub-brand-dark);
    font-size: 1.02rem; white-space: nowrap;
}
.pub-header a.brand-suffix:hover { color: var(--pub-brand); }

.pub-header .pub-actions { display: flex; align-items: center; gap: 10px; }
.pub-header .lang-mini { display: flex; gap: 2px; margin-right: 6px; }
.pub-header .lang-mini a {
    font-size: 11px; font-weight: 700; color: #9ca3af; text-decoration: none;
    padding: 3px 7px; border-radius: 8px;
}
.pub-header .lang-mini a.active { color: #fff; background: var(--pub-brand); }
.pub-header .btn { font-weight: 600; border-radius: 8px; }

/* ── Sélecteur de devise d'affichage ──────────────────────────────────────── */
/* Il vit dans les DEUX coquilles : `.pub-actions` de l'en-tête public et
   `.page-actions` du page-header connecté. Les règles sont donc écrites sans
   dépendre du parent, contrairement au sélecteur de langue juste au-dessus.

   Volontairement discret : c'est une préférence de lecture, pas une action. Il
   ne doit pas peser autant que « Créer un compte », et surtout pas donner à
   croire que les montants affichés changent de nature quand on y touche. */
.cur-switch { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.cur-switch > .fa-coins { font-size: 12px; color: #9ca3af; }
.cur-switch select {
    font-size: 12px; font-weight: 700; color: #475569;
    background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 8px;
    padding: 4px 22px 4px 8px; line-height: 1.4; cursor: pointer;
    max-width: 150px;
}
.cur-switch select:hover { border-color: #94a3b8; }
.cur-switch select:focus-visible { outline: 2px solid var(--pub-brand); outline-offset: 1px; }
.cur-switch noscript { display: inline-flex; }

/* Le libellé du sélecteur n'est visible que des lecteurs d'écran : à l'écran,
   l'icône de pièces et le code ISO suffisent, et « Afficher les montants en »
   doublerait la largeur de l'en-tête. */
.cur-switch .visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

body.dark-mode .cur-switch select { background: #1f2937; border-color: #374151; color: #e5e7eb; }


.pub-header .btn-outline-secondary { border-color: #cbd5e1; color: #334155; }
.pub-header .btn-outline-secondary:hover { background: #f1f5f9; color: #0f172a; }

/* Liens de navigation inter-produits (Offres, Academy, Découvrir). Ils vivent
   dans l'en-tête public parce qu'un visiteur arrivé par un moteur de recherche
   n'a, sinon, aucun chemin vers le reste du site. */
.pub-nav { display: flex; align-items: center; gap: 18px; }
.pub-nav a {
    font-size: .9rem; font-weight: 600; color: #475569; text-decoration: none;
    padding: 4px 2px; border-bottom: 2px solid transparent;
}
.pub-nav a:hover { color: var(--pub-brand); }
.pub-nav a.active { color: var(--pub-brand-dark); border-bottom-color: var(--pub-brand); }

/* ── Boutons de marque ────────────────────────────────────────────────────── */

.btn-brand { background: var(--pub-brand); color: #fff !important; border: none; }
.btn-brand:hover { background: var(--pub-brand-dark); color: #fff; }
.btn-brand-outline {
    background: transparent; color: var(--pub-brand) !important;
    border: 1px solid var(--pub-brand);
}
.btn-brand-outline:hover { background: var(--pub-brand); color: #fff !important; }

/* ── Corps ────────────────────────────────────────────────────────────────── */

.pub-hero { text-align: center; padding: 30px 20px 6px; }
.pub-hero h1 { font-weight: 800; color: var(--pub-brand-dark); margin-bottom: 8px; }
.pub-hero p { color: #4b5563; max-width: 640px; margin: 0 auto; }
.pub-hero .pub-hero-cta { margin-top: 14px; }

.pub-wrap { max-width: 1200px; margin: 0 auto; padding: 8px 24px 56px; }
.pub-empty { text-align: center; padding: 60px 20px; color: var(--pub-attenue); }
.pub-foot { padding: 2rem 1rem 3rem; font-size: .85rem; }

@media (max-width: 600px) {
    .pub-header { padding: 10px 14px; flex-wrap: wrap; }
    .pub-header .btn { padding: .35rem .6rem; font-size: .85rem; }
    .pub-header .brand-suffix { display: none; }
    .pub-nav { gap: 12px; font-size: .85rem; }
}