/**
 * FICHE-PAIE.FR - Bloc d'abonnement à la page LinkedIn showcase
 *
 * Composant du partial templates/partials/linkedin-follow.php.
 * Chargé conditionnellement par templates/layouts/main.php sur les routes
 * blog et métier uniquement.
 *
 * Deux variantes :
 *   .linkedin-follow            variante pleine (articles de blog)
 *   .linkedin-follow--compact   variante atténuée (fiches métier)
 *
 * Conventions : nommage BEM (aligné sur metier-fiche__*), variables de
 * public/design-system/tokens.css consommées avec valeurs de repli.
 * Ni dégradé, ni ombre portée, ni !important.
 *
 * @copyright 2025-2026 Purple Telecom EURL
 * @license   Proprietary - All Rights Reserved
 * @since     2026-07-27
 */

/* =====================================================
   VARIABLES LOCALES
   ===================================================== */
:root {
    --linkedin-follow-bleu:      var(--gp-bleu-marine, #1e3760);
    --linkedin-follow-turquoise: var(--gp-turquoise,   #5ec5c8);
    --linkedin-follow-gris:      var(--gp-gris,        #6b7280);
    /* Bleu LinkedIn officiel : réservé au bouton plein de la variante pleine. */
    --linkedin-follow-bleu-marque: #0a66c2;
    --linkedin-follow-radius: 8px;
}

/* =====================================================
   CONTENEUR DE LARGEUR (articles de blog)
   Le partial est inséré APRÈS le conteneur de l'article
   (echo $blogArticleContent) : il porte donc sa propre
   largeur, alignée sur .article-layout (blog.css).
   ===================================================== */
.linkedin-follow-conteneur {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

/* =====================================================
   BLOC — VARIANTE PLEINE (blog)
   Bordure sur un seul côté : pas de coins arrondis.
   ===================================================== */
.linkedin-follow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px 24px;
    border-left: 4px solid var(--linkedin-follow-turquoise);
    border-radius: 0;
    background-color: var(--gp-fond-pale, #f8fafc);
}

.linkedin-follow__texte {
    flex: 1 1 320px;
    min-width: 0;
}

.linkedin-follow__titre {
    margin: 0 0 6px;
    color: var(--linkedin-follow-bleu);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
}

.linkedin-follow__sous-titre {
    margin: 0;
    color: var(--linkedin-follow-gris);
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* =====================================================
   BOUTON — plein, bleu LinkedIn (variante pleine)
   ===================================================== */
.linkedin-follow__bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 10px 20px;
    border: 1px solid var(--linkedin-follow-bleu-marque);
    border-radius: var(--linkedin-follow-radius);
    background-color: var(--linkedin-follow-bleu-marque);
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.linkedin-follow__bouton:hover {
    background-color: #004182;
    border-color: #004182;
    color: #ffffff;
}

.linkedin-follow__bouton:focus-visible {
    outline: 2px solid var(--linkedin-follow-bleu);
    outline-offset: 2px;
}

.linkedin-follow__logo {
    flex-shrink: 0;
}

/* =====================================================
   BLOC — VARIANTE COMPACTE (fiches métier)
   Page transactionnelle : bordure complète discrète,
   coins arrondis, aucun titre, bouton contour.
   ===================================================== */
.linkedin-follow--compact {
    gap: 16px;
    margin: 24px 0;
    padding: 14px 18px;
    border: 1px solid var(--gp-bordure, #e5e7eb);
    border-left: 1px solid var(--gp-bordure, #e5e7eb);
    border-radius: var(--linkedin-follow-radius);
    background-color: transparent;
}

.linkedin-follow--compact .linkedin-follow__texte {
    margin: 0;
    color: var(--linkedin-follow-gris);
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* =====================================================
   BOUTON — contour bleu marine (variante compacte)
   ===================================================== */
.linkedin-follow__bouton--contour {
    padding: 9px 18px;
    border: 1px solid var(--linkedin-follow-bleu);
    background-color: transparent;
    color: var(--linkedin-follow-bleu);
    font-weight: 600;
}

.linkedin-follow__bouton--contour:hover {
    background-color: var(--linkedin-follow-bleu);
    border-color: var(--linkedin-follow-bleu);
    color: #ffffff;
}

.linkedin-follow__bouton--contour:focus-visible {
    outline: 2px solid var(--linkedin-follow-bleu);
    outline-offset: 2px;
}

/* =====================================================
   RESPONSIVE — empilement sous 640 px
   Zone de clic confortable : hauteur minimale 44 px.
   ===================================================== */
@media (max-width: 640px) {
    .linkedin-follow {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 18px 16px;
    }

    .linkedin-follow--compact {
        padding: 16px;
    }

    /* En colonne, la base de 320 px porterait sur la HAUTEUR du bloc de
       texte : on revient à une hauteur dictée par le contenu. */
    .linkedin-follow__texte {
        flex: 0 1 auto;
    }

    .linkedin-follow__bouton {
        width: 100%;
        min-height: 44px;
        padding: 12px 20px;
    }

    .linkedin-follow-conteneur {
        padding: 0 15px 30px;
    }
}