/* =====================================================================
   STYLE GLOBAL RAFFINÉ (site web) — inspiré des outils Meta (WhatsApp Manager / Business Suite) :
   police système nette, tailles sobres (14 px), graisses 400 / 600 / 700, textes gris-bleu, tableaux aérés.
   Chargé en DERNIER dans home/base.html : les règles de base (balises) passent après publier.css,
   les règles :where() (spécificité 0) laissent chaque page garder ses propres styles.
   ===================================================================== */

/* Police et couleurs de texte communes */
:root {
    --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, "Noto Sans", sans-serif;
    --raf-texte: #1c2b33;
    --raf-texte-2: #65676b;
    --raf-texte-3: #8a8d91;
    --raf-bordure: #e4e6eb;
    --raf-fond-doux: #f5f6f7;
    --raf-lien: #2563eb;
    --raf-rayon: 8px;
    /* Place réservée à la barre latérale gauche fixe (sidebar.css : 60 px, 50 px sur tablette) */
    --raf-barre: var(--sidebar-width, 60px);
}
@media (max-width: 768px) {
    :root {
        --raf-barre: 0px; /* barre latérale masquée sur mobile */
    }
}

/* Rendu des caractères plus fin (Mac, iPhone, navigateurs récents) */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body.site-body {
    font-family: var(--font-family-base);
    font-size: 14px;
    line-height: 1.45;
    color: var(--raf-texte);
}

/* Traduction du navigateur : les balises <font> ajoutées restent dans la phrase
   (base.css les mettait en « display: flex » centré → phrases coupées sur plusieurs lignes). */
font {
    display: inline !important;
    justify-content: normal !important;
}

/* Paragraphes : publier.css (chargé partout) les mettait à 16 px, et en gras sur mobile */
p {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

/* Titres sobres (les pages qui ont leurs propres titres les gardent) */
:where(h1) {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--raf-texte);
}
:where(h2) {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--raf-texte);
}
:where(h3) {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--raf-texte);
}
:where(h4, h5, h6) {
    font-size: 14px;
    font-weight: 600;
    color: var(--raf-texte);
}
:where(strong, b) {
    font-weight: 600;
}
:where(small) {
    font-size: 12px;
    color: var(--raf-texte-2);
}

/* Liens dans les phrases (paragraphes uniquement) : restent dans la ligne.
   Volontairement limité à p/small : ne pas toucher les <a> de listes (li) ni de tableaux (td),
   qui enveloppent souvent une image + un bloc (ex. liste des clients) et doivent rester en flex. */
:where(p, small) > a:not([class]) {
    display: inline;
    color: var(--raf-lien);
    text-decoration: none;
}
:where(p, small) > a:not([class]):hover {
    text-decoration: underline;
}

/* Champs de formulaire */
:where(input, select, textarea, button) {
    font-family: var(--font-family-base);
    font-size: 14px;
}
:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea)::placeholder {
    color: var(--raf-texte-3);
}

/* Tableaux aérés (style liste de modèles Meta) */
:where(table) {
    border-collapse: collapse;
}
:where(th) {
    font-size: 13px;
    font-weight: 600;
    color: var(--raf-texte);
    text-align: left;
}
:where(td) {
    font-size: 13px;
    color: var(--raf-texte);
}

/* Sélection de texte */
::selection {
    background: rgba(37, 99, 235, 0.16);
}

/* ---------------------------------------------------------------------
   PIED DE PAGE (base.css) : couleurs Meta, filet clair, textes plus fins
   --------------------------------------------------------------------- */
.site-footer {
    --footer-ink: #1c2b33;
    --footer-faux-black: #1c2b33;
    --footer-muted: #65676b;
    --footer-line: #e4e6eb;
    font-family: var(--font-family-base);
    background: #ffffff;
}
.site-footer .site-footer-brand {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
}
.site-footer .site-footer-tagline,
.site-footer .site-footer-apps-title {
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--raf-texte-2);
}
.site-footer .site-footer-heading {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--raf-texte);
}
.site-footer .site-footer-desc,
.site-footer .site-footer-contact p,
.site-footer .site-footer-pawapay-text,
.site-footer .site-footer-copy {
    color: var(--raf-texte-2);
    font-weight: 400;
    letter-spacing: 0;
}
.site-footer .site-footer-list a,
.site-footer .site-footer-contact a {
    font-size: 13px;
    font-weight: 400;
    color: var(--raf-texte);
}
.site-footer .site-footer-list a:hover,
.site-footer .site-footer-contact a:hover,
.site-footer .site-footer-pawapay-link:hover {
    color: var(--raf-lien);
    text-decoration: underline;
}
.site-footer .site-footer-pawapay-link {
    font-weight: 600;
}
.site-footer .site-footer-contact i {
    color: var(--raf-texte-2);
}

/* ---------------------------------------------------------------------
   BARRE LATÉRALE GAUCHE (sidebar.css) : sobre, comme le menu Meta
   --------------------------------------------------------------------- */
.left-sidebar {
    font-family: var(--font-family-base);
    background-color: #ffffff;
    box-shadow: none;
    border-right: 1px solid var(--raf-bordure);
}
.left-sidebar .sidebar-item {
    margin: 1px 6px;
    padding: 10px 12px;
    border-radius: var(--raf-rayon);
    color: var(--raf-texte);
    transition: background-color 0.15s ease;
}
.left-sidebar .sidebar-item a {
    color: var(--raf-texte);
}
.left-sidebar .sidebar-item i {
    font-size: 18px;
    color: var(--raf-texte);
    transition: none;
}
.left-sidebar .titre-item {
    font-size: 14px;
    font-weight: 500;
    color: var(--raf-texte);
}
/* Survol : léger fond gris, sans déplacement ni zoom */
.left-sidebar .sidebar-item:hover {
    background-color: #f2f4f6;
    transform: none;
}
.left-sidebar .sidebar-item:hover i {
    transform: none;
}
/* Élément actif : fond foncé (comme « Gérer les modèles ») */
.left-sidebar .sidebar-item.active {
    background-color: var(--raf-texte);
    box-shadow: none;
}
.left-sidebar .sidebar-item.active i,
.left-sidebar .sidebar-item.active a,
.left-sidebar .sidebar-item.active .titre-item {
    color: #ffffff;
    transform: none;
}
/* Pastille de notification plus fine */
.left-sidebar .sidebar-item .notifi {
    font-size: 9.5px;
    font-weight: 600;
    box-shadow: 0 0 0 2px #ffffff;
}
/* « Catalogue Boutique » : caché comme les autres libellés tant que la barre n'est pas ouverte */
.left-sidebar .catalogue-btn {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    overflow: hidden;
    transition: opacity 0.2s ease;
}
.left-sidebar:hover .catalogue-btn {
    opacity: 1;
}
/* Sous-menu catalogue */
.left-sidebar .catalogue-dropdown {
    background-color: #ffffff;
    border: 1px solid var(--raf-bordure);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.left-sidebar .catalogue-dropdown a {
    font-size: 13px;
    color: var(--raf-texte);
}
.left-sidebar .catalogue-dropdown a:hover {
    background-color: #f2f4f6;
    padding-left: 16px;
}
.left-sidebar .catalogue-dropdown p {
    font-size: 13px;
    font-weight: 400;
}
.left-sidebar::-webkit-scrollbar-thumb {
    background: #ced0d4;
}

/* ---------------------------------------------------------------------
   BARRE DU HAUT TRANSPARENTE (base.css) : verre dépoli, filet fin, sans ombre bleue
   --------------------------------------------------------------------- */
header.site-header,
.site-header {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    box-shadow: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.site-header .top-navbar {
    background: transparent;
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.site-header .sub-navbar-sync {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
}
/* Navigateurs sans flou : fond presque opaque pour rester lisible */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    header.site-header,
    .site-header {
        background: rgba(255, 255, 255, 0.96);
    }
}

/* Bouton panier flottant (partials/paicon.html) : inutile sur ordinateur (panier dans l'en-tête),
   il recouvrait le contenu. Sur mobile : plus petit et plus discret. */
@media (min-width: 769px) {
    .panier-flottant-link {
        display: none !important;
    }
}
@media (max-width: 768px) {
    .panier-flottant-link .compteur-flottants {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
}

/* Mobile : mêmes tailles, titres un peu plus petits */
@media (max-width: 768px) {
    p {
        font-size: 14px;
        font-weight: 400;
    }
    :where(h1) {
        font-size: 20px;
    }
    :where(h2) {
        font-size: 17px;
    }
}