/* ============================================================================
   P2R — Design system maison « Communauté »
   Inspiré de la maquette de référence : indigo + vert-menthe, blanc, arrondi,
   ombres douces. Couche posée par-dessus Bootstrap 5 (grille/responsive gardés).
   Organisation : 1.Tokens 2.Base 3.Layout 4.Composants 5.Décor 6.Utilities
   ============================================================================ */

/* Réinitialisation box-sizing : les pages autonomes (erreurs) ne chargent pas
   Bootstrap, on garantit donc un modèle de boîte cohérent partout. */
*, *::before, *::after { box-sizing: border-box; }

/* ── 1. TOKENS ─────────────────────────────────────────────────────────── */
:root {
    /* ═══ PALETTE CENTRALE — SOURCE UNIQUE DE VÉRITÉ ═══════════════════════
       Modifier une couleur ici la propage à TOUT le site (composants + Bootstrap). */
    --primary:   #008080;   /* teal — couleur de marque */
    --secondary: #424752;   /* gris sombre — accent / éléments secondaires */
    --success:   #2E7D32;   /* vert — validé / succès */
    --warning:   #C77800;   /* orange */
    --info:      #1E88E5;   /* bleu */
    --danger:    #C62828;   /* rouge — erreurs */
    --white:     #ffffff;   /* blanc — fond clair de base */

    /* Versions RGB (pour les fonds translucides rgba()) */
    --primary-rgb:   0, 128, 128;
    --secondary-rgb: 66, 71, 82;
    --success-rgb:   46, 125, 50;
    --warning-rgb:   199, 120, 0;
    --info-rgb:      30, 136, 229;
    --danger-rgb:    198, 40, 40;

    /* ═══ Tokens dérivés (le design system y fait référence) ══════════════ */
    --p2r-primary:       var(--primary);
    --p2r-primary-rgb:   var(--primary-rgb);
    --p2r-primary-dark:  #006a6a;
    --p2r-primary-soft:  rgba(var(--primary-rgb), .12);
    --p2r-accent:        var(--secondary);
    --p2r-accent-rgb:    var(--secondary-rgb);
    --p2r-accent-dark:   #2d3138;   /* gris plus sombre (accent hover) */
    --p2r-accent-soft:   rgba(var(--secondary-rgb), .1);
    --p2r-success:       var(--success);
    --p2r-success-soft:  rgba(var(--success-rgb), .14);
    --p2r-danger:        var(--danger);
    --p2r-danger-soft:   rgba(var(--danger-rgb), .12);
    --p2r-warning:       var(--warning);
    --p2r-warning-soft:  rgba(var(--warning-rgb), .15);
    --p2r-info:          var(--info);

    /* Neutres (fond blanc) */
    --p2r-ink:           #1e2333;
    --p2r-muted:         #8a90a6;
    --p2r-line:          #ecedf3;
    --p2r-surface:       #f4f5f8;   /* gris très clair neutre (surfaces, footer, code) */
    --p2r-bg:            var(--white);

    /* Typo / rayons */
    --p2r-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --p2r-r-sm: 8px; --p2r-r: 12px; --p2r-r-lg: 18px; --p2r-pill: 999px;

    /* Ombres */
    --p2r-shadow-sm: 0 1px 2px rgba(31,36,51,.05), 0 1px 3px rgba(31,36,51,.06);
    --p2r-shadow:    0 6px 22px rgba(31,36,51,.08);
    --p2r-shadow-lg: 0 16px 44px rgba(31,36,51,.13);

    /* ═══ Mapping Bootstrap → palette centrale ════════════════════════════ */
    --bs-primary: var(--primary);
    --bs-primary-rgb: var(--primary-rgb);
    --bs-secondary: var(--secondary);
    --bs-secondary-rgb: var(--secondary-rgb);
    --bs-success: var(--success);
    --bs-success-rgb: var(--success-rgb);
    --bs-warning: var(--warning);
    --bs-warning-rgb: var(--warning-rgb);
    --bs-info: var(--info);
    --bs-info-rgb: var(--info-rgb);
    --bs-danger: var(--danger);
    --bs-danger-rgb: var(--danger-rgb);
    --bs-body-bg: var(--white);
    --bs-body-color: var(--p2r-ink);
    --bs-border-color: var(--p2r-line);
    --bs-link-color: var(--primary);
    --bs-link-color-rgb: var(--primary-rgb);
    --bs-link-hover-color: var(--p2r-primary-dark);
}

/* ── 2. BASE ───────────────────────────────────────────────────────────── */
body {
    font-family: var(--p2r-font);
    background: var(--p2r-bg);
    color: var(--p2r-ink);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -.01em; color: var(--p2r-ink); }
a { color: var(--p2r-primary); text-decoration: none; }
a:hover { color: var(--p2r-primary-dark); }
.text-muted, small.text-muted { color: var(--p2r-muted) !important; }
hr { border-color: var(--p2r-line); opacity: 1; }

/* ── 3. LAYOUT ─────────────────────────────────────────────────────────── */

/* Navbar blanche (≠ dark) */
.p2r-navbar {
    background: var(--p2r-bg);
    border-bottom: 1px solid var(--p2r-line);
    padding: .6rem 0;
}
.p2r-navbar .navbar-brand {
    font-weight: 800; font-size: 1.35rem; color: var(--p2r-primary);
    display: inline-flex; align-items: center; gap: .4rem;
}
/* Logo générique (badge) : contient soit le « P » de repli, soit l'image téléversée. */
.p2r-logo {
    width: 40px; height: 40px; border-radius: 11px; flex: none; overflow: hidden;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1rem; line-height: 1;
}
.p2r-logo > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Logo affiché comme IMAGE : pas de fond par défaut (l'image gère son propre fond,
   et les logos transparents ne sont plus posés sur le dégradé teal). */
.p2r-logo--img { background: none !important; }
/* Marque en texte (logo officiel pas encore livré) : hérite couleur/poids du contexte
   (navbar-brand, titre offcanvas, bandeau admin). */
.p2r-wordmark { font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
/* Marque de la page d'erreur : le nom en toutes lettres à la place du badge logo. */
.p2r-error-brand {
    display: inline-block; margin-bottom: 1.5rem; text-decoration: none;
    font-weight: 800; font-size: 1.6rem; letter-spacing: -.01em; color: var(--primary);
}
.p2r-navbar .navbar-brand .p2r-logo {
    width: 40px; height: 40px; border-radius: 11px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1rem;
}
.p2r-navbar .nav-link {
    color: var(--p2r-ink); font-weight: 600; padding: .5rem .9rem;
    border-bottom: 2px solid transparent;
}
.p2r-navbar .nav-link:hover { color: var(--p2r-primary); }
.p2r-navbar .nav-link.active {
    color: var(--p2r-primary); border-bottom-color: var(--p2r-primary);
}

/* Bouton hamburger (ouvre le menu glissant) — navbar publique & topbar admin */
.p2r-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--p2r-r);
    background: transparent; border: 1px solid var(--p2r-line); color: var(--p2r-ink);
    font-size: 1.25rem; cursor: pointer; transition: all .15s ease; flex: none;
}
.p2r-burger:hover { background: var(--p2r-primary-soft); border-color: var(--primary); color: var(--primary); }

/* Menu glissant (offcanvas) — animation smooth fournie par Bootstrap */
.p2r-offcanvas-nav { --bs-offcanvas-width: 280px; }
.p2r-offcanvas-nav .offcanvas-header,
.offcanvas .offcanvas-title .p2r-logo { color: var(--p2r-ink); }
.p2r-offcanvas-nav .offcanvas-header { border-bottom: 1px solid var(--p2r-line); }
.offcanvas .offcanvas-title .p2r-logo {
    width: 36px; height: 36px; border-radius: 10px; display: inline-flex;
    align-items: center; justify-content: center; font-weight: 800; font-size: .95rem;
    background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff;
}

/* Barre de recherche en pilule */
.p2r-search {
    display: flex; align-items: center; gap: .5rem;
    background: var(--p2r-surface); border: 1px solid var(--p2r-line);
    border-radius: var(--p2r-pill); padding: .35rem .9rem; min-width: 220px;
}
.p2r-search input {
    border: 0; background: transparent; outline: none; width: 100%;
    font-size: .9rem; color: var(--p2r-ink);
}
.p2r-search input::placeholder { color: var(--p2r-muted); }
/* Bouton « effacer » (croix) natif des champs de recherche : masqué — il ne
   correspond pas au thème. On le remplace par notre propre bouton .p2r-search-clear. */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* Bouton « effacer » CUSTOM, aux couleurs du thème. Visible seulement quand le
   champ contient du texte (via :placeholder-shown), masqué sinon. */
.p2r-search-clear {
    border: 0; background: transparent; color: var(--p2r-muted); cursor: pointer;
    display: none; align-items: center; justify-content: center;
    padding: 0; line-height: 0; font-size: 1rem; flex: none;
}
.p2r-search-clear .ti { display: block; vertical-align: 0; }
.p2r-search-clear:hover { color: var(--primary); }
input[type="search"]:not(:placeholder-shown) ~ .p2r-search-clear { display: inline-flex; }

/* Variante page recherche : croix ronde superposée à droite du champ. */
.p2r-search-field { position: relative; }
.p2r-search-field .form-control { padding-right: 2.4rem; }
.p2r-search-field .p2r-search-clear {
    position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
    width: 1.6rem; height: 1.6rem; border-radius: 50%; font-size: 1.05rem;
}
.p2r-search-field .p2r-search-clear:hover { background: var(--p2r-primary-soft); color: var(--primary); }

/* Bouton « remonter en haut » (flottant, apparaît au scroll) — site & admin */
.p2r-totop {
    position: fixed; right: 20px; bottom: 20px; z-index: 1040;
    width: 44px; height: 44px; border-radius: 50%; border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary); color: #fff; font-size: 1.35rem; cursor: pointer;
    box-shadow: var(--p2r-shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s, background .15s ease;
}
.p2r-totop.show { opacity: 1; visibility: visible; transform: translateY(0); }
.p2r-totop:hover { background: var(--p2r-primary-dark); color: #fff; }

/* ── Pages d'erreur (404, 403, 500…) — plein écran, centrées, autonomes ── */
.p2r-error-page {
    min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center;
    padding: 2.5rem 1.2rem; text-align: center; font-family: var(--p2r-font); color: var(--p2r-ink);
    background: var(--p2r-bg);
}
.p2r-error { max-width: 480px; width: 100%; margin: auto; display: flex; flex-direction: column; align-items: center; }
.p2r-error-logo { display: inline-flex; text-decoration: none; margin-bottom: 1.5rem; }
/* Illustration : disque décoratif + icône, teintés en couleur primaire */
.p2r-error-illu { position: relative; display: grid; place-items: center; width: 208px; height: 208px; color: var(--primary); margin-bottom: .2rem; }
.p2r-error-blob { position: absolute; inset: 0; width: 100%; height: 100%; }
.p2r-error-ico { position: relative; font-size: 5.4rem; line-height: 1; color: var(--primary); }
.p2r-error-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: .82rem; color: var(--primary); margin-bottom: .35rem; }
.p2r-error-title { font-size: 1.7rem; font-weight: 800; margin: 0 0 .6rem; color: var(--p2r-ink); }
.p2r-error-text { color: var(--p2r-muted); margin: 0 0 1.7rem; font-size: 1.02rem; line-height: 1.55; }
.p2r-error-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* Sidebar verticale (style maquette) */
.p2r-sidebar { display: flex; flex-direction: column; gap: .25rem; }
.p2r-sidebar a {
    display: flex; align-items: center; gap: .7rem;
    padding: .6rem .85rem; border-radius: var(--p2r-r);
    color: var(--p2r-ink); font-weight: 600; font-size: .95rem;
}
.p2r-sidebar a:hover { background: var(--p2r-surface); }
.p2r-sidebar a.active { background: var(--p2r-primary-soft); color: var(--p2r-primary); }
.p2r-sidebar a .p2r-ico {
    width: 26px; height: 26px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--p2r-surface); font-size: .8rem;
}
.p2r-sidebar a.active .p2r-ico { background: rgba(var(--p2r-primary-rgb), .18); }

/* ── 4. COMPOSANTS ─────────────────────────────────────────────────────── */

/* Cartes — UNE seule apparence partout (que ce soit .p2r-card ou .card Bootstrap) */
.p2r-card {
    background: var(--p2r-bg); border: 1px solid var(--p2r-line);
    border-radius: var(--p2r-r-lg); box-shadow: var(--p2r-shadow-sm);
    padding: 1.5rem;
}
.p2r-card-hover { transition: transform .15s ease, box-shadow .15s ease; }
.p2r-card-hover:hover { transform: translateY(-3px); box-shadow: var(--p2r-shadow); }

/* Les cartes Bootstrap (.card, card border-0 shadow-sm, etc.) adoptent EXACTEMENT
   le même style → cohérence « template payant » sans toucher chaque gabarit. */
.card {
    --bs-card-bg: var(--p2r-bg);
    --bs-card-color: var(--p2r-ink);
    --bs-card-border-color: var(--p2r-line);
    --bs-card-border-radius: var(--p2r-r-lg);
    --bs-card-inner-border-radius: calc(var(--p2r-r-lg) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-cap-color: var(--p2r-ink);
    --bs-card-spacer-y: 1.4rem; --bs-card-spacer-x: 1.4rem;
    box-shadow: var(--p2r-shadow-sm);
}
.card-header { border-bottom-color: var(--p2r-line); font-weight: 700; padding-bottom: .85rem; }
.card-footer { border-top-color: var(--p2r-line); background: transparent; }
/* Cartes cliquables (thèmes, contributions) : effet de survol homogène. */
.card-valeur, .contribution-card { transition: transform .15s ease, box-shadow .15s ease; }
.card-valeur:hover, .contribution-card:hover { transform: translateY(-3px); box-shadow: var(--p2r-shadow); }

/* Mise en évidence d'une contribution ciblée (arrivée via un lien #contrib-ID) */
@keyframes p2rFlash {
    0%   { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), .55); }
    70%  { box-shadow: 0 0 0 14px rgba(var(--primary-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0); }
}
.p2r-flash { animation: p2rFlash 1.5s ease-out 2; border-color: var(--primary) !important; }

/* ── Tableau générique du thème (.p2r-table) — à placer dans un .p2r-card p-0.
   Fonctionne en clair (public) ET en sombre (admin) via les tokens. ───────── */
.p2r-table { width: 100%; margin: 0; color: var(--p2r-ink); border-collapse: collapse; }
.p2r-table > thead > tr > th {
    background: var(--p2r-surface); color: var(--p2r-muted);
    font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em;
    padding: .8rem 1rem; border-bottom: 1px solid var(--p2r-line); white-space: nowrap; text-align: left;
}
.p2r-table > tbody > tr > td { padding: .85rem 1rem; border-bottom: 1px solid var(--p2r-line); vertical-align: middle; }
.p2r-table > tbody > tr:last-child > td { border-bottom: 0; }
.p2r-table > tbody > tr { transition: background .12s ease; }
.p2r-table > tbody > tr:hover { background: rgba(var(--primary-rgb), .05); }
.p2r-table .form-check-input { margin-top: 0; }
/* En-têtes triables (clic pour réordonner) */
.p2r-table .p2r-th-sort {
    display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
    color: inherit; text-decoration: none; cursor: pointer;
}
.p2r-table .p2r-th-sort:hover { color: var(--primary); }
.p2r-table .p2r-th-sort.active { color: var(--primary); }
.p2r-table th.text-center .p2r-th-sort { justify-content: center; }
.p2r-table th.text-end .p2r-th-sort { justify-content: flex-end; }

/* Boutons (nos classes + reteinte Bootstrap) */
.p2r-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    font-weight: 600; border-radius: var(--p2r-pill); padding: .6rem 1.4rem;
    border: 1px solid transparent; cursor: pointer; transition: all .15s ease;
    text-decoration: none; line-height: 1.2;
}
.p2r-btn-primary { background: var(--p2r-primary); color: #fff; }
.p2r-btn-primary:hover { background: var(--p2r-primary-dark); color: #fff; }
.p2r-btn-accent { background: var(--p2r-accent); color: #fff; }
.p2r-btn-accent:hover { background: var(--p2r-accent-dark); color: #fff; }
.p2r-btn-ghost { background: var(--p2r-primary-soft); color: var(--p2r-primary); }
.p2r-btn-ghost:hover { background: rgba(var(--p2r-primary-rgb), .16); color: var(--p2r-primary-dark); }
.p2r-btn-outline { background: #fff; border-color: var(--p2r-line); color: var(--p2r-ink); }
.p2r-btn-outline:hover { border-color: var(--p2r-primary); color: var(--p2r-primary); }

/* Reteinte COMPLÈTE des boutons Bootstrap (toutes les variables d'état :
   bg/hover/ACTIVE/focus — sinon BS injecte son bleu #0d6efd en :active/:focus). */
/* Boutons : inline-flex centré → l'icône est TOUJOURS alignée verticalement
   avec le texte (l'espacement horizontal vient du markup). */
.btn {
    border-radius: var(--p2r-pill); font-weight: 600; --bs-btn-focus-shadow-rgb: var(--primary-rgb);
    display: inline-flex; align-items: center; justify-content: center;
}
.btn .ti { vertical-align: 0; }   /* en flex le vertical-align est inutile */
.btn-primary {
    --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--p2r-primary-dark); --bs-btn-hover-border-color: var(--p2r-primary-dark);
    --bs-btn-active-bg: var(--p2r-primary-dark); --bs-btn-active-border-color: var(--p2r-primary-dark);
    --bs-btn-focus-shadow-rgb: var(--primary-rgb);
}
.btn-success {
    --bs-btn-bg: var(--success); --bs-btn-border-color: var(--success);
    --bs-btn-hover-bg: #256528; --bs-btn-hover-border-color: #256528;
    --bs-btn-active-bg: #1f5421; --bs-btn-active-border-color: #1f5421;
    --bs-btn-focus-shadow-rgb: var(--success-rgb);
}
.btn-danger {
    --bs-btn-bg: var(--danger); --bs-btn-border-color: var(--danger);
    --bs-btn-hover-bg: #a82121; --bs-btn-hover-border-color: #a82121;
    --bs-btn-active-bg: #8e1c1c; --bs-btn-active-border-color: #8e1c1c;
    --bs-btn-focus-shadow-rgb: var(--danger-rgb);
}
.btn-warning {
    --bs-btn-bg: var(--warning); --bs-btn-border-color: var(--warning); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #a86600; --bs-btn-hover-border-color: #a86600; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #905700; --bs-btn-active-border-color: #905700; --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: var(--warning-rgb);
}
.btn-info {
    --bs-btn-bg: var(--info); --bs-btn-border-color: var(--info); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #1670c2; --bs-btn-hover-border-color: #1670c2; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #135fa6; --bs-btn-active-border-color: #135fa6; --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: var(--info-rgb);
}
.btn-secondary {
    --bs-btn-bg: var(--secondary); --bs-btn-border-color: var(--secondary);
    --bs-btn-hover-bg: var(--p2r-accent-dark); --bs-btn-hover-border-color: var(--p2r-accent-dark);
    --bs-btn-active-bg: var(--p2r-accent-dark); --bs-btn-active-border-color: var(--p2r-accent-dark);
    --bs-btn-focus-shadow-rgb: var(--secondary-rgb);
}
.btn-outline-primary, .btn-outline-secondary {
    --bs-btn-color: var(--primary); --bs-btn-border-color: var(--p2r-line);
    --bs-btn-hover-bg: var(--primary); --bs-btn-hover-border-color: var(--primary); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--primary); --bs-btn-active-border-color: var(--primary); --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: var(--primary-rgb);
}
.btn-outline-secondary { --bs-btn-color: var(--p2r-ink); }
.btn-outline-danger {
    --bs-btn-color: var(--danger); --bs-btn-border-color: var(--p2r-line);
    --bs-btn-hover-bg: var(--danger); --bs-btn-hover-border-color: var(--danger); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--danger); --bs-btn-active-border-color: var(--danger); --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: var(--danger-rgb);
}
.btn-outline-warning {
    --bs-btn-color: var(--warning); --bs-btn-border-color: var(--p2r-line);
    --bs-btn-hover-bg: var(--warning); --bs-btn-hover-border-color: var(--warning); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--warning); --bs-btn-active-border-color: var(--warning); --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: var(--warning-rgb);
}
.btn-outline-secondary {
    --bs-btn-color: var(--p2r-ink); --bs-btn-border-color: var(--p2r-line);
    --bs-btn-hover-bg: var(--p2r-surface); --bs-btn-hover-border-color: var(--p2r-line); --bs-btn-hover-color: var(--p2r-ink);
}

/* ── BADGES — un style par TYPE et par STATUT ──────────────────────────────
   Famille « pilule douce » : fond teinté clair + texte coloré + icône.
   • TYPE   : .p2r-badge-theme (thème) · .p2r-badge-count (compteurs)
   • STATUT : .p2r-badge-success (validé) · .p2r-badge-warning (en attente)
              .p2r-badge-danger (invalidé) · .p2r-badge-muted (info neutre) */
.p2r-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .78rem; font-weight: 600; padding: .3rem .75rem;
    border-radius: var(--p2r-pill); line-height: 1.1; white-space: nowrap;
}
.p2r-badge .ti { font-size: .9em; }
.p2r-badge-primary { background: var(--p2r-primary-soft); color: var(--p2r-primary); }
.p2r-badge-theme   { background: var(--p2r-primary-soft); color: var(--p2r-primary); }
.p2r-badge-success { background: var(--p2r-success-soft); color: var(--success); }
.p2r-badge-warning { background: var(--p2r-warning-soft); color: var(--warning); }
.p2r-badge-danger  { background: var(--p2r-danger-soft);  color: var(--danger); }
.p2r-badge-info    { background: rgba(var(--info-rgb), .12); color: var(--info); }
.p2r-badge-muted   { background: var(--p2r-surface); color: var(--p2r-muted); }
.p2r-badge-count   { background: var(--p2r-surface); color: var(--p2r-muted); }

/* Numéro de thème — pastille ronde pleine aux couleurs de marque */
.p2r-badge-num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.6rem; height: 1.6rem; padding: 0 .45rem;
    border-radius: var(--p2r-pill); background: var(--p2r-primary); color: #fff;
    font-size: .82rem; font-weight: 700; line-height: 1;
}
.p2r-badge-num.is-active { background: #fff; color: var(--p2r-primary); }

/* Reteinte des badges Bootstrap natifs (cohérence si .badge bg-* subsiste) */
.badge.bg-primary   { background: var(--primary) !important; }
.badge.bg-danger    { background: var(--danger) !important; }      /* rouge sémantique */
.badge.bg-secondary { background: var(--p2r-surface) !important; color: var(--p2r-muted) !important; }
.badge.bg-success   { background: var(--success) !important; }
.badge.bg-warning   { background: var(--warning) !important; color: #fff !important; }
.badge.bg-info      { background: var(--info) !important; }
.badge.bg-light     { background: var(--p2r-surface) !important; color: var(--p2r-ink) !important; }

/* Avatars */
.p2r-avatar {
    width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
    background: var(--p2r-primary-soft); color: var(--p2r-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; flex: none; position: relative;
}
/* Pastille « validé » sur l'avatar : coche SVG nette, parfaitement centrée,
   indépendante de la police système (≠ glyphe texte « ✓ » fin et mal aligné). */
.p2r-avatar-check::after {
    content: ""; position: absolute; right: -3px; bottom: -3px;
    width: 18px; height: 18px; border-radius: 50%;
    background:
        var(--success)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12 10 17 19 8'/%3E%3C/svg%3E")
        center / 11px 11px no-repeat;
    border: 2px solid var(--white);
    box-shadow: 0 1px 3px rgba(var(--success-rgb), .45);
}

/* Bouton « pouce » (like rond plein, comme la maquette) */
.p2r-pouce {
    width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--p2r-primary-soft); color: var(--p2r-primary);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem;
    transition: all .15s ease;
}
.p2r-pouce:hover { background: var(--p2r-primary); color: #fff; }
.p2r-pouce.is-active { background: var(--p2r-primary); color: #fff; }

/* Bloc de code */
.p2r-code, pre.p2r-code {
    background: var(--p2r-surface); border-radius: var(--p2r-r);
    padding: 1rem 1.1rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85rem; color: #3a3f51; overflow-x: auto;
}

/* ── Formulaires : TOUS les champs accordés au design ──────────────────── */
.form-label { color: var(--p2r-ink); font-weight: 600; margin-bottom: .35rem; }

/* Texte, email, password, number, search, textarea, select */
.form-control, .form-select {
    border-radius: var(--p2r-r); border: 1px solid var(--p2r-line);
    padding: .6rem .85rem; color: var(--p2r-ink); background-color: var(--white);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder { color: var(--p2r-muted); opacity: 1; }
.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .18);
}
.form-control:disabled, .form-select:disabled,
.form-control[readonly] { background-color: var(--p2r-surface); }

/* Cases à cocher & boutons radio */
.form-check-input {
    width: 1.15em; height: 1.15em; margin-top: .15em;
    border: 1.5px solid var(--p2r-muted); background-color: var(--white);
    cursor: pointer; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.form-check-input:checked {
    background-color: var(--primary); border-color: var(--primary);
}
.form-check-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .18);
}
.form-check-label { color: var(--p2r-ink); cursor: pointer; }

/* Interrupteur (switch) */
.form-switch .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }

/* Groupes d'input (pilule, préfixes) */
.input-group-text { background: var(--p2r-surface); border-color: var(--p2r-line); color: var(--p2r-muted); border-radius: var(--p2r-r); }

/* Sélecteur de fichier */
.form-control[type=file]::file-selector-button {
    background: var(--p2r-primary-soft); color: var(--primary); border: 0;
    border-radius: var(--p2r-pill); padding: .35rem .9rem; margin-right: .8rem; font-weight: 600; cursor: pointer;
}

/* Curseur (range) */
.form-range::-webkit-slider-thumb { background: var(--primary); }
.form-range::-moz-range-thumb { background: var(--primary); border: 0; }

/* États de validation */
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--danger); }
.form-control.is-valid, .form-select.is-valid { border-color: var(--success); }
.invalid-feedback { color: var(--danger); font-size: .85rem; }
.valid-feedback { color: var(--success); font-size: .85rem; }
/* Message d'erreur inline (validation JS) — placé juste sous le champ */
.p2r-field-error {
    color: var(--danger); font-size: .85rem; font-weight: 500;
    margin-top: .35rem; display: flex; align-items: center; gap: .35rem;
}
.p2r-field-error::before {
    content: "!"; flex: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--danger); color: #fff;
    font-size: .7rem; font-weight: 700; line-height: 16px; text-align: center;
}

/* Hero clair (≠ bandeau noir). Remplace `bg-dark text-white` dans les templates :
   le CSS reteinte le texte interne + ajoute les formes décoratives d'angle. */
.p2r-hero {
    position: relative; overflow: hidden; color: var(--p2r-ink);
    background: linear-gradient(180deg, var(--p2r-primary-soft) 0%, var(--white) 100%);
    border-bottom: 1px solid var(--p2r-line);
}
.p2r-hero > .container { position: relative; z-index: 1; }
.p2r-hero h1, .p2r-hero h2, .p2r-hero h3, .p2r-hero .h1, .p2r-hero .h4 { color: var(--p2r-ink); }
.p2r-hero .text-white, .p2r-hero .text-white-50 { color: var(--p2r-muted) !important; }
.p2r-hero .text-danger { color: var(--p2r-primary) !important; }     /* sur-titres (eyebrow) */
.p2r-hero .breadcrumb-item a, .p2r-hero .breadcrumb-item.active { color: var(--p2r-muted) !important; }
.p2r-hero .btn-outline-light {
    --bs-btn-color: var(--p2r-ink); --bs-btn-border-color: var(--p2r-line);
    --bs-btn-hover-bg: var(--p2r-surface); --bs-btn-hover-color: var(--p2r-ink); --bs-btn-hover-border-color: var(--p2r-line);
}
.p2r-hero .p2r-eyebrow {
    color: var(--p2r-primary); font-weight: 700; text-transform: uppercase;
    letter-spacing: .12em; font-size: .8rem;
}
/* Formes décoratives d'angle (discrètes) — automatiques sur chaque hero */
.p2r-hero::before {
    content: ""; position: absolute; top: -45px; right: -35px;
    width: 160px; height: 160px; border-radius: 40px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    transform: rotate(20deg); opacity: .12; pointer-events: none;
}
.p2r-hero::after {
    content: ""; position: absolute; bottom: -55px; left: -45px;
    width: 180px; height: 95px; border-radius: var(--p2r-pill);
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    transform: rotate(-15deg); opacity: .15; pointer-events: none;
}

/* ── 5. DÉCOR (formes géométriques d'angle) ────────────────────────────── */
.p2r-deco { position: absolute; z-index: 0; pointer-events: none; filter: blur(.5px); opacity: .9; }
.p2r-deco-1 {
    top: -40px; right: -30px; width: 150px; height: 150px; border-radius: 38px;
    background: linear-gradient(135deg, var(--primary), var(--secondary)); transform: rotate(20deg); opacity: .14;
}
.p2r-deco-2 {
    bottom: -50px; left: -40px; width: 170px; height: 90px; border-radius: var(--p2r-pill);
    background: linear-gradient(135deg, var(--secondary), var(--primary)); transform: rotate(-15deg); opacity: .16;
}
.p2r-hero > .container { position: relative; z-index: 1; }

/* ── 6. UTILITIES ──────────────────────────────────────────────────────── */
.p2r-surface { background: var(--p2r-surface); }
.p2r-soft    { background: var(--p2r-primary-soft); }
.p2r-shadow  { box-shadow: var(--p2r-shadow); }
.p2r-meta    { color: var(--p2r-muted); font-size: .85rem; }
.p2r-divider { border-top: 1px solid var(--p2r-line); }

/* ── 7. LAYOUT GLOBAL — sticky footer (footer collé en bas, pages courtes) ─ */
html, body { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }
footer { flex-shrink: 0; }

/* Cartes « thème » (accueil / liste) */
.card-valeur { transition: transform .15s ease, box-shadow .15s ease; }
.card-valeur:hover { transform: translateY(-3px); box-shadow: var(--p2r-shadow); }

/* ── 8. TOASTS (façon site : carte blanche, icône ronde, accent sémantique) ─ */
#toast-container {
    position: fixed; top: 18px; right: 18px; z-index: 1100;
    display: flex; flex-direction: column; gap: 12px;
    max-width: 380px; width: calc(100% - 36px);
}
.p2r-toast {
    position: relative; display: block;
    background: var(--white); color: var(--p2r-ink);
    border: 1px solid var(--p2r-line); border-left: 4px solid var(--p2r-muted);
    border-radius: var(--p2r-r); box-shadow: var(--p2r-shadow-lg);
    padding: 14px 38px 14px 52px;
    font-size: .92rem; line-height: 1.4; font-weight: 500;
    opacity: 0; transform: translateX(28px);
    transition: opacity .3s ease, transform .3s ease;
}
.p2r-toast.show { opacity: 1; transform: translateX(0); }
.p2r-toast::before {
    content: ""; position: absolute; left: 14px; top: 50%; margin-top: -13px;
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .85rem; font-weight: 700; background: var(--p2r-muted);
}
.p2r-toast-success { border-left-color: var(--success); }
.p2r-toast-success::before { content: "✓"; background: var(--success); }
.p2r-toast-danger  { border-left-color: var(--danger); }
.p2r-toast-danger::before  { content: "✕"; background: var(--danger); }
.p2r-toast-warning { border-left-color: var(--warning); }
.p2r-toast-warning::before { content: "!"; background: var(--warning); }
.p2r-toast-info    { border-left-color: var(--info); }
.p2r-toast-info::before    { content: "i"; background: var(--info); }
.p2r-toast-close {
    position: absolute; top: 8px; right: 10px;
    background: none; border: 0; color: var(--p2r-muted); cursor: pointer;
    font-size: 1.15rem; line-height: 1; padding: 0; opacity: .65;
}
.p2r-toast-close:hover { opacity: 1; color: var(--p2r-ink); }

/* ── 9. ANTI-FUITE des couleurs Bootstrap par défaut (#0d6efd & co) ─────────
   On force TOUS les composants Bootstrap à utiliser la palette centrale, pour
   qu'aucune couleur hors-palette (le bleu BS) n'apparaisse en focus/actif. */
:root { --bs-focus-ring-color: rgba(var(--primary-rgb), .25); }
::selection { background: rgba(var(--primary-rgb), .2); }

/* Halo de focus clavier — toujours teal (liens, boutons, pagination) */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.page-link:focus, .nav-link:focus-visible {
    outline: 2px solid rgba(var(--primary-rgb), .55); outline-offset: 1px;
}
/* Les champs de formulaire ont déjà leur halo box-shadow teal : on retire le
   contour natif (le liseré noir/bleu du navigateur) pour éviter le double bord. */
.form-control:focus, .form-select:focus, .form-check-input:focus,
.form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible {
    outline: none;
}

/* Pagination */
.pagination {
    --bs-pagination-color: var(--primary);
    --bs-pagination-hover-color: var(--p2r-primary-dark);
    --bs-pagination-hover-bg: var(--p2r-primary-soft);
    --bs-pagination-focus-color: var(--p2r-primary-dark);
    --bs-pagination-focus-bg: var(--p2r-primary-soft);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--primary-rgb), .25);
    --bs-pagination-active-bg: var(--primary);
    --bs-pagination-active-border-color: var(--primary);
    --bs-pagination-border-color: var(--p2r-line);
}
.page-link { border-radius: var(--p2r-r-sm); }

/* Nav, onglets, pills, list-group, dropdown */
.nav { --bs-nav-link-color: var(--p2r-ink); --bs-nav-link-hover-color: var(--primary); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--primary); --bs-nav-pills-link-active-color: #fff; }
.nav-tabs { --bs-nav-tabs-link-active-color: var(--primary); }
.list-group {
    --bs-list-group-active-bg: var(--primary); --bs-list-group-active-border-color: var(--primary);
    --bs-list-group-action-active-bg: var(--p2r-surface);
    --bs-list-group-color: var(--p2r-ink); --bs-list-group-border-color: var(--p2r-line);
}
.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--primary);
    --bs-dropdown-link-hover-bg: var(--p2r-surface);
    --bs-dropdown-border-color: var(--p2r-line); --bs-dropdown-border-radius: var(--p2r-r);
}

/* Accordéon, progress, spinner */
.accordion {
    --bs-accordion-active-color: var(--primary);
    --bs-accordion-active-bg: var(--p2r-primary-soft);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--primary-rgb), .25);
    --bs-accordion-border-color: var(--p2r-line);
}
.progress { --bs-progress-bar-bg: var(--primary); }
.spinner-border, .spinner-grow { color: var(--primary); }

/* Alerts → teintes de la palette */
.alert-primary { --bs-alert-color: var(--p2r-primary-dark); --bs-alert-bg: var(--p2r-primary-soft); --bs-alert-border-color: rgba(var(--primary-rgb), .25); }
.alert-success { --bs-alert-color: #1f5421; --bs-alert-bg: var(--p2r-success-soft); --bs-alert-border-color: rgba(var(--success-rgb), .25); }
.alert-danger  { --bs-alert-color: #8e1c1c; --bs-alert-bg: var(--p2r-danger-soft); --bs-alert-border-color: rgba(var(--danger-rgb), .25); }
.alert-warning { --bs-alert-color: #905700; --bs-alert-bg: var(--p2r-warning-soft); --bs-alert-border-color: rgba(var(--warning-rgb), .25); }
.alert-info    { --bs-alert-color: #135fa6; --bs-alert-bg: rgba(var(--info-rgb), .1); --bs-alert-border-color: rgba(var(--info-rgb), .25); }
.alert-light   { --bs-alert-bg: var(--p2r-surface); --bs-alert-border-color: var(--p2r-line); --bs-alert-color: var(--p2r-ink); }

/* Liens texte génériques (text-primary / text-danger reteintés) */
.link-primary, .text-primary { color: var(--primary) !important; }
.bg-primary { background-color: var(--primary) !important; }

/* ── 10. SMOOTH — transitions de page, fade, loader ────────────────────── */
@view-transition { navigation: auto; }            /* cross-fade natif entre pages (Chrome/Edge) */
html { scroll-behavior: smooth; }
::view-transition-old(root) { animation: p2rFadeOut .18s ease both; }
::view-transition-new(root) { animation: p2rFadeIn .28s ease both; }
@keyframes p2rFadeIn  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes p2rFadeOut { from { opacity: 1; } to { opacity: 0; } }
/* Apparition douce du contenu (fallback navigateurs sans View Transitions) */
main { animation: p2rFadeIn .35s ease both; }
/* Barre de chargement en haut */
#p2r-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0; opacity: 0; z-index: 2000;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 0 3px 3px 0; transition: width .25s ease, opacity .35s ease;
    box-shadow: 0 0 8px rgba(var(--primary-rgb), .5);
}
#p2r-progress.active { opacity: 1; }
/* Transitions douces sur les éléments interactifs */
.btn, .p2r-btn, .nav-link, .p2r-card-hover, .card-valeur, .p2r-pouce,
.form-control, .form-select, .list-group-item, .page-link { transition: all .15s ease; }

/* ── 11. SELECT premium + Tom Select (dropdown custom accordé palette) ──── */
.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%23008080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
    background-position: right .9rem center; background-size: 14px;
    padding-right: 2.6rem; cursor: pointer; font-weight: 500;
}
.form-select:hover { border-color: var(--primary); }
/* Tom Select */
.ts-wrapper { font-family: var(--p2r-font); }
/* Tom Select recopie la classe du <select> (.form-select / -sm) sur le .ts-wrapper :
   cela dessine un 2e cadre + chevron PAR-DESSUS le .ts-control → double cadre.
   On neutralise complètement le wrapper ; seul le .ts-control intérieur est stylé. */
.ts-wrapper.form-select, .ts-wrapper.form-select-sm {
    padding: 0 !important; border: 0 !important; border-radius: 0 !important;
    background: none !important; background-image: none !important;
    box-shadow: none !important; height: auto !important; min-height: 0 !important;
}
.ts-control {
    border-radius: var(--p2r-r) !important; border: 1px solid var(--p2r-line) !important;
    padding: .55rem 2.4rem .55rem .85rem !important; box-shadow: none !important;
    background: var(--white) !important; color: var(--p2r-ink); min-height: auto; cursor: pointer;
}
/* Le contrôle Tom Select est un <div> focusable : le navigateur lui dessine un
   contour noir/bleu par défaut. On le supprime, seul notre halo teal reste. */
.ts-control:focus, .ts-control:focus-visible { outline: none !important; }
.ts-wrapper.focus .ts-control,
.ts-wrapper.dropdown-active .ts-control {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .18) !important;
    outline: none !important;
    border-radius: var(--p2r-r) !important;   /* coins arrondis conservés même ouvert */
}
/* État invalide reflété sur le contrôle Tom Select (cohérent avec .is-invalid) */
.ts-control.is-invalid {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px rgba(var(--danger-rgb), .15) !important;
}
.ts-wrapper.single .ts-control::after {
    content: '' !important; position: absolute !important; pointer-events: none;
    top: 50% !important; right: 13px !important; margin-top: -3px !important; left: auto !important;
    display: block !important; background: none !important;
    width: 0 !important; height: 0 !important;
    border: 5px solid transparent !important; border-top-color: currentColor !important;
    opacity: .8;
}
.ts-dropdown {
    border-radius: var(--p2r-r) !important; border: 1px solid var(--p2r-line) !important;
    box-shadow: var(--p2r-shadow-lg) !important; overflow: hidden; margin-top: 6px !important; padding: 6px;
}
.ts-dropdown .option {
    border-radius: var(--p2r-r-sm); padding: .55rem .75rem; color: var(--p2r-ink); font-size: .95rem;
}
.ts-dropdown .option.active { background: var(--p2r-primary-soft) !important; color: var(--primary) !important; }
.ts-dropdown .option:hover  { background: var(--p2r-surface); }
.ts-dropdown .optgroup-header, .ts-dropdown .no-results { color: var(--p2r-muted); }

/* Variante compacte (-sm) : MÊME gabarit que les champs/boutons -sm → tout s'aligne */
.ts-wrapper.form-select-sm .ts-control {
    padding: .42rem 2rem .42rem .7rem !important; font-size: .88rem;
    border-radius: var(--p2r-r-sm) !important; min-height: 0 !important;
}
.ts-wrapper.form-select-sm.focus .ts-control,
.ts-wrapper.form-select-sm.dropdown-active .ts-control { border-radius: var(--p2r-r-sm) !important; }
.ts-wrapper.form-select-sm.single .ts-control::after { right: 11px; }
/* Liste plafonnée → tient à l'écran et autorise l'ouverture vers le haut */
.ts-dropdown .ts-dropdown-content { max-height: 260px; }
/* Barre d'actions en lot (collée en bas) : le menu s'ouvre vers le HAUT */
.p2r-bulkbar, .p2r-bulkbar .p2r-card { overflow: visible; }
.p2r-bulkbar .ts-dropdown { top: auto !important; bottom: calc(100% + 6px) !important; margin: 0 !important; }

/* ── 12. ICÔNES (Tabler) ───────────────────────────────────────────────── */
/* Icônes : alignées au MILIEU du texte (≠ l'ancien -.125em qui les décalait
   vers le bas). Dans les conteneurs flex (boutons, badges, sidebar) c'est ignoré
   et le centrage vient d'align-items: center. */
.ti { vertical-align: middle; line-height: 1; display: inline-block; }
.p2r-pouce .ti { vertical-align: 0; }