/* ==========================================================================
   Paola Bolle — coach TDAH — feuille de style de l'INTERFACE D'ADMINISTRATION
   --------------------------------------------------------------------------
   Ce fichier habille tout le back-office du CRM (la partie privée) : la barre
   du haut « lanceur d'apps », la sidebar de navigation, les tableaux de
   données, les formulaires, les badges de statut, la vue calendrier et la page
   d'analytics maison (GA4). Il est chargé par crm/inc/header.php.

   CHARTE GRAPHIQUE « Paola » (clair, doux, chaleureux, arrondi, rassurant) :
     - Fond général CRÈME (#F7F2EA), panneaux/cartes BLANCS ou gris-bleu clair.
     - Bleu profond (#244F7A) : titres, éléments actifs, boutons pleins, liens.
     - Vert olive (#445D2A) : accents secondaires, en-têtes de section, survols.
     - Ocre doux (#C99A55) : accents chaleureux, badges, survols secondaires.
     - Rose peau (#E7A39A) : touches ponctuelles.
     - Texte courant en noir crayonné (#111) ; secondaire en brun-gris (#5F574A).
     - Coins ARRONDIS (10–16px), bordures fines translucides, ombres DOUCES.
     - Typographie : Poppins (titres) + Nunito (texte courant).
       (Les statuts gardent des teintes fonctionnelles vert/jaune/rouge — voir
        --ok / --warn / --err ci-dessous.)
   --------------------------------------------------------------------------
   :root = « variables CSS » (tokens de couleur). On définit une couleur une
   seule fois ici, puis on l'utilise partout via var(--nom). Les NOMS des tokens
   historiques sont conservés (--noir, --panel, --blanc…) : seules leurs VALEURS
   changent, pour repeindre toute l'interface en un point.
   ========================================================================== */
:root {
  /* Palette Paola (tokens nommés, réutilisables) */
  --creme: #F7F2EA;        /* fond général de l'interface */
  --bleu: #244F7A;         /* accent principal : titres, actifs, boutons pleins */
  --bleu-clair: #E8EEF3;   /* gris-bleu très clair : en-têtes de tableau, aplats doux */
  --olive: #445D2A;        /* accent secondaire : sections, survols */
  --ocre: #C99A55;         /* accent chaleureux : badges, survols secondaires */
  --rose: #E7A39A;         /* touches ponctuelles */
  --noir-crayon: #111111;  /* texte courant et contours */
  --ligne: rgba(17,17,17,.12);       /* bordure fine douce */
  --ligne-forte: rgba(17,17,17,.20); /* bordure un peu plus marquée */
  --ombre: 0 2px 10px rgba(17,17,17,.06); /* ombre douce « carnet » */

  /* Tokens historiques réaffectés (mêmes noms, nouvelles valeurs claires) */
  --noir: #F7F2EA;         /* ex fond noir → fond crème général */
  --panel: #FFFFFF;        /* ex #111 → fond des blocs/cartes/panneaux (blanc) */
  --gris-fonce: #E8EEF3;   /* ex #1A1A1A → survols et zones secondaires (gris-bleu clair) */
  --gris-moyen: #5F574A;   /* textes secondaires, libellés discrets (brun-gris lisible) */
  --gris-clair: #111111;   /* texte principal (noir crayonné) */
  --blanc: #244F7A;        /* ex blanc d'accent → bleu profond (titres, actifs, boutons) */
  /* Couleurs FONCTIONNELLES : réservées aux statuts et messages, lisibles sur clair */
  --ok: #3f7d3f;           /* vert : succès / gagné / payé / publié */
  --warn: #b7791f;         /* ocre foncé : en attente / brouillon / à traiter */
  --err: #c0392b;          /* rouge : erreur / perdu / annulé / suppression */
}
/* Réinitialisation (« reset ») des marges/espacements par défaut du navigateur.
   box-sizing:border-box = la largeur inclut bordure + padding (calculs simples). */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Réglages typographiques et de fond hérités par toute la page.
   min-height:100vh = le corps couvre au minimum toute la hauteur de l'écran. */
body {
  background: var(--creme);
  color: var(--gris-clair);
  font-family: 'Nunito', 'Lato', system-ui, Arial, sans-serif; /* texte courant : Nunito */
  font-size: 15px;
  line-height: 1.6;   /* interligne confortable */
  min-height: 100vh;
}
/* Titres : Poppins (avec repli Nunito puis système). */
h1, h2, h3, .crm-wordmark, .crm-appname, .crm-head h1, .panel h2,
.app-tile .app-label, .stat b, .crm-logo span {
  font-family: 'Poppins', 'Nunito', system-ui, Arial, sans-serif;
}
/* Liens : bleu profond, soulignés seulement au survol. */
a { color: var(--bleu); text-decoration: none; }
a:hover { text-decoration: underline; }

/* .crm-shell = conteneur racine de toute l'interface (colonne verticale). */
.crm-shell { display: flex; flex-direction: column; min-height: 100vh; }

/* ==========================================================================
   BARRE DU HAUT CONTEXTUELLE (lanceur d'apps)
   Bandeau fixé en haut : logo/accueil, nom de l'app courante, liens utiles,
   puis une sous-barre d'onglets propres à l'app affichée.
   ========================================================================== */
/* position:sticky + top:0 = la barre reste collée en haut au défilement.
   z-index:30 = elle passe au-dessus du contenu. */
.crm-top { position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 1px solid var(--ligne); box-shadow: 0 1px 6px rgba(17,17,17,.04); }
/* Ligne principale : éléments alignés, centrés, 14px d'espace entre chacun. */
.crm-bar { display: flex; align-items: center; gap: 14px; padding: 12px 32px; }
.crm-home { display: inline-flex; color: var(--gris-moyen); }           /* bouton maison */
.crm-home svg { width: 20px; height: 20px; }
.crm-home:hover { color: var(--bleu); }
.crm-wordmark { font-weight: 700; letter-spacing: 0.02em; font-size: 0.9rem; color: var(--bleu); } /* marque */
.crm-wordmark:hover { text-decoration: none; }
.crm-sep { color: var(--gris-moyen); }                                  /* séparateur « / » */
.crm-appname { color: var(--bleu); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.02em; } /* nom de l'app en cours */
.crm-appname.muted { color: var(--gris-moyen); }                        /* variante grisée */
/* Espaceur élastique : pousse les liens utilitaires vers la droite. */
.crm-bar-spacer { flex: 1; }
.crm-utility { display: flex; gap: 18px; }                              /* liens utilitaires (droite) */
.crm-utility a { color: var(--gris-moyen); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em; }
.crm-utility a:hover { color: var(--bleu); text-decoration: none; }
/* Sous-barre d'onglets. overflow-x:auto = défilement horizontal si ça déborde. */
.crm-subbar { display: flex; gap: 4px; padding: 0 32px 4px; overflow-x: auto; }
/* Un onglet. white-space:nowrap = jamais coupé. Coins arrondis en haut. */
.crm-tab { padding: 11px 16px; white-space: nowrap; color: var(--gris-moyen); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em; border-radius: 10px 10px 0 0; border-bottom: 2px solid transparent; }
.crm-tab:hover { color: var(--olive); background: var(--bleu-clair); text-decoration: none; }
.crm-tab.active { color: var(--bleu); border-bottom-color: var(--bleu); } /* onglet actif : soulignement bleu */

/* ==========================================================================
   LANCEUR D'APPS (grille de tuiles du tableau de bord)
   ========================================================================== */
/* Grille automatique : colonnes de 150px min qui s'étirent (1fr). */
.launcher { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; margin-bottom: 34px; }
/* Titre de catégorie du lanceur : nom + petite pastille de couleur. */
.launcher-cat { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--olive); }
.launcher-cat .cat-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
/* Une tuile : carte arrondie blanche à contour doux, contenu centré et empilé.
   position:relative pour ancrer la micro-pastille de catégorie dans le coin. */
.app-tile { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 26px 14px; border: 1px solid var(--ligne); border-radius: 14px; background: var(--panel); color: var(--gris-clair); box-shadow: var(--ombre); transition: 0.2s; }
/* Micro-pastille de catégorie, coin haut-droit de chaque tuile. */
.app-tile .tile-dot { position: absolute; top: 10px; right: 10px; width: 7px; height: 7px; border-radius: 50%; opacity: 0.8; }
.app-tile:hover { border-color: var(--bleu); color: var(--bleu); text-decoration: none; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(36,79,122,.12); } /* survol : la tuile se soulève */
.app-tile .ico { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ligne); border-radius: 12px; background: var(--bleu-clair); color: var(--bleu); } /* pastille d'icône arrondie */
.app-tile:hover .ico { border-color: var(--bleu); background: var(--bleu); color: #fff; }
.app-tile .ico svg { width: 24px; height: 24px; }
.app-tile .app-label { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em; color: var(--bleu); } /* nom du module */
.app-tile .app-desc { font-size: 0.7rem; color: var(--gris-moyen); letter-spacing: 0.01em; } /* description */
/* Intitulé de section (« RACCOURCIS », « OUTILS »…). */
.crm-section { color: var(--olive); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 18px; }

/* ==========================================================================
   SIDEBAR (colonne de navigation latérale)
   ========================================================================== */
/* Largeur fixe 220px, ne se comprime jamais. */
.crm-side {
  width: 220px;
  flex-shrink: 0;
  border-right: 1px solid var(--ligne);
  background: #fff;
  padding: 26px 0;
  display: flex;
  flex-direction: column;   /* liens empilés verticalement */
  gap: 4px;
}
/* Bloc logo en tête de sidebar, séparé par un trait sous lui. */
.crm-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 22px 22px;
  border-bottom: 1px solid var(--ligne);
  margin-bottom: 18px;
}
.crm-logo img { height: 30px; }
.crm-logo span { font-weight: 700; line-height: 1.05; font-size: 0.9rem; color: var(--bleu); }
/* Un lien de menu. border-left transparent = réserve la place du trait actif. */
.crm-side a.nav-item {
  padding: 11px 22px;
  margin: 0 10px;
  border-radius: 10px;
  color: var(--gris-clair);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-left: 3px solid transparent;
}
.crm-side a.nav-item:hover { color: var(--olive); text-decoration: none; background: var(--bleu-clair); }
.crm-side a.nav-item.active { border-left-color: var(--bleu); color: var(--bleu); background: var(--bleu-clair); } /* page en cours : barre bleue à gauche */
/* Espaceur élastique : pousse le lien de déconnexion tout en bas. */
.crm-side .spacer { flex: 1; }
.crm-side .nav-item.muted { color: var(--gris-moyen); }
/* --- Sous-menus dépliables (accordéon) --- */
.crm-side .nav-group { display: flex; flex-direction: column; }
/* Titre cliquable d'un groupe (<button> stylé comme du texte). */
.crm-side .nav-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 15px 22px 6px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris-moyen);
}
.crm-side .nav-group-title:hover { color: var(--olive); }
/* Le chevron (flèche). transition:transform = rotation douce à l'ouverture. */
.crm-side .nav-group-title .chev { flex-shrink: 0; transition: transform 0.2s ease; opacity: 0.65; }
/* Groupe ouvert (.open) : le chevron pivote de 180°. */
.crm-side .nav-group.open .nav-group-title .chev { transform: rotate(180deg); }
.crm-side .nav-group-items { display: flex; flex-direction: column; }
/* Accordéon : si le groupe n'a pas .open, on masque ses sous-liens. */
.crm-side .nav-group:not(.open) .nav-group-items { display: none; }

/* ==========================================================================
   ZONE PRINCIPALE (contenu central de chaque page)
   ========================================================================== */
/* flex:1 = occupe l'espace restant. max-width + margin auto = contenu centré. */
.crm-main { flex: 1; padding: 40px 48px; max-width: 1240px; width: 100%; margin: 0 auto; }
/* En-tête de page : titre à gauche, actions à droite. */
.crm-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 34px; gap: 18px; flex-wrap: wrap; }
.crm-head h1 { color: var(--bleu); font-size: 1.5rem; font-weight: 700; letter-spacing: 0; }

/* ==========================================================================
   CARTES STATISTIQUES (chiffres-clés en haut des pages)
   ========================================================================== */
/* auto-fit = les colonnes s'étirent pour remplir toute la largeur. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; margin-bottom: 36px; }
.stat {
  border: 1px solid var(--ligne);
  border-radius: 14px;
  background: var(--panel);
  padding: 24px;
  box-shadow: var(--ombre);
}
.stat b { display: block; color: var(--bleu); font-size: 1.9rem; font-weight: 700; } /* le grand chiffre */
.stat span { color: var(--gris-moyen); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } /* son libellé */

/* ==========================================================================
   TABLEAUX DE DONNÉES (.tbl) — priorité à la LISIBILITÉ
   ========================================================================== */
/* border-collapse:collapse + border-radius/overflow = coins arrondis propres. */
.tbl { width: 100%; border-collapse: collapse; border: 1px solid var(--ligne); border-radius: 14px; overflow: hidden; background: var(--panel); box-shadow: var(--ombre); }
.tbl th, .tbl td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--ligne); vertical-align: middle; }
.tbl th { color: var(--bleu); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--bleu-clair); } /* en-tête sur aplat gris-bleu */
.tbl tbody tr:nth-child(even) td { background: #FBF8F2; } /* alternance très douce */
.tbl tr:hover td { background: #F1EADF; }   /* surlignage doux de la ligne survolée */
.tbl td.num { white-space: nowrap; }        /* colonnes de chiffres : jamais coupées */
/* Boutons/formulaires d'action dans une même cellule : espacés côte à côte. */
.tbl td form { display: inline-block; vertical-align: middle; }
.tbl td .btn + .btn, .tbl td form + .btn, .tbl td .btn + form, .tbl td form + form { margin-left: 10px; }

/* ==========================================================================
   BADGES DE STATUT (étiquettes d'état, pastilles arrondies)
   ========================================================================== */
.badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--ligne-forte);  /* état neutre par défaut : contour doux */
  color: var(--gris-moyen);
}
.badge.nouveau, .badge.devis, .badge.en_attente, .badge.brouillon { border-color: var(--warn); color: var(--warn); background: rgba(183,121,31,.08); } /* ocre : à traiter / en attente */
.badge.contacte, .badge.en_cours, .badge.invite { border-color: var(--bleu); color: var(--bleu); background: rgba(36,79,122,.08); }                    /* bleu : en cours */
.badge.gagne, .badge.livre, .badge.paye, .badge.actif, .badge.publie { border-color: var(--ok); color: var(--ok); background: rgba(63,125,63,.10); }    /* vert : abouti / positif */
.badge.perdu, .badge.annule, .badge.inactif, .badge.masque { border-color: var(--err); color: var(--err); background: rgba(192,57,43,.08); }             /* rouge : négatif / clos */

/* ==========================================================================
   FORMULAIRES (panneaux, grilles de champs, champs de saisie)
   ========================================================================== */
.panel { border: 1px solid var(--ligne); border-radius: 16px; background: var(--panel); padding: 30px; margin-bottom: 28px; box-shadow: var(--ombre); } /* bloc encadré d'un formulaire */
.panel h2 { color: var(--bleu); font-size: 1rem; font-weight: 700; letter-spacing: 0; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--ligne); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }        /* deux champs par ligne */
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }    /* trois champs par ligne */
.f { margin-bottom: 20px; }                                                 /* un bloc « champ » */
.f-large { grid-column: 1 / -1; }                                           /* champ pleine largeur */
.f label { display: block; color: var(--gris-moyen); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
/* Champs de saisie clairs, encadrés arrondis, texte foncé, focus bleu. */
.f input, .f select, .f textarea {
  width: 100%;
  background: #fff;
  border: 1px solid var(--ligne-forte);
  color: var(--gris-clair);
  font-family: inherit;
  font-size: 0.95rem;
  padding: 12px 14px;
  border-radius: 10px;
}
.f textarea { min-height: 100px; resize: vertical; }  /* zone de texte redimensionnable en hauteur */
/* Au focus : bordure bleue + léger halo doux. */
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(36,79,122,.12); }

/* ==========================================================================
   BOUTONS (.btn et ses variantes)
   Bouton plein bleu (texte crème) par défaut ; au survol il devient « creux ».
   ========================================================================== */
.btn {
  display: inline-block;
  border: 1px solid var(--bleu);
  background: var(--bleu);
  color: var(--creme);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 12px 26px;
  cursor: pointer;
  transition: 0.2s;
}
.btn:hover { background: #fff; color: var(--bleu); text-decoration: none; box-shadow: var(--ombre); } /* survol : bouton clair */
.btn.ghost { background: transparent; color: var(--bleu); }         /* variante « fantôme » : creux */
.btn.ghost:hover { background: var(--bleu); color: var(--creme); }  /* …et plein au survol */
.btn.danger { border-color: var(--err); color: var(--err); background: transparent; } /* action destructrice */
.btn.danger:hover { background: var(--err); color: #fff; }
.btn.sm { padding: 8px 15px; font-size: 0.72rem; }                  /* version compacte */
/* Rangée de boutons : espacement régulier, passe à la ligne si besoin. */
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ==========================================================================
   MESSAGES « FLASH » (bandeaux de confirmation / d'erreur)
   ========================================================================== */
.flash { padding: 12px 16px; margin-bottom: 20px; border: 1px solid; border-radius: 12px; font-size: 0.9rem; font-weight: 600; }
.flash.ok { border-color: var(--ok); color: var(--ok); background: rgba(63,125,63,.08); }   /* succès (vert) */
.flash.err { border-color: var(--err); color: var(--err); background: rgba(192,57,43,.06); } /* erreur (rouge) */

/* ==========================================================================
   PAGE DE CONNEXION (login)
   ========================================================================== */
/* Boîte centrée verticalement et horizontalement dans la fenêtre. */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-box { width: 100%; max-width: 380px; border: 1px solid var(--ligne); border-radius: 18px; padding: 40px 34px; background: var(--panel); box-shadow: 0 10px 30px rgba(17,17,17,.08); }
.login-box .crm-logo { border: none; padding: 0 0 24px; margin: 0; justify-content: center; } /* logo recentré */

/* ==========================================================================
   NOTES (annotations horodatées dans les fiches)
   ========================================================================== */
.note { border-left: 3px solid var(--ocre); border-radius: 0 10px 10px 0; padding: 10px 14px; margin-bottom: 10px; background: var(--bleu-clair); } /* filet ocre à gauche */
.note time { color: var(--gris-moyen); font-size: 0.72rem; display: block; margin-bottom: 4px; }       /* date de la note */

/* ==========================================================================
   UTILITAIRES (petites classes réutilisables)
   ========================================================================== */
.muted { color: var(--gris-moyen); }        /* texte atténué */
.right { text-align: right; }               /* aligner à droite */
.mb { margin-bottom: 24px; }                /* marge basse standard */
.inline-form { display: inline; }           /* formulaire en ligne */

/* Vignette d'aperçu (miniature d'image), coins arrondis. */
.thumb { width: 70px; height: 46px; object-fit: cover; border: 1px solid var(--ligne); border-radius: 8px; display: block; }

/* ==========================================================================
   RESPONSIVE — ADAPTATION AUX PETITS ÉCRANS (tablettes / mobiles)
   ========================================================================== */
@media (max-width: 900px) {
  .crm-bar { padding: 10px 16px; gap: 10px; }
  .crm-utility { gap: 12px; }
  .crm-utility a[target="_blank"] { display: none; }   /* on masque les liens externes */
  .crm-subbar { padding: 0 16px 4px; }
  .crm-main { padding: 20px 16px; }
  .launcher { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; } /* tuiles plus petites */
  .grid2, .grid3 { grid-template-columns: 1fr; }        /* formulaires : une seule colonne */
  .tbl { display: block; overflow-x: auto; }            /* tableaux : défilement horizontal */
}

/* ==========================================================================
   VUE CALENDRIER MENSUELLE (agenda)
   ========================================================================== */
/* table-layout:fixed = colonnes de largeur égale. min-width = défilement sous 680px. */
.cal { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 680px; border-radius: 14px; overflow: hidden; border: 1px solid var(--ligne); background: var(--panel); }
.cal th { padding: 8px 4px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bleu); background: var(--bleu-clair); text-align: center; border: 1px solid var(--ligne); } /* noms des jours */
/* Cases de jour : contenu collé en haut, hauteur fixe pour un quadrillage régulier. */
.cal td { border: 1px solid var(--ligne); vertical-align: top; height: 92px; width: 14.28%; padding: 3px 4px 5px; }
.cal td.autre { background: #FBF8F2; }            /* jours d'un autre mois : très léger fond */
.cal td.autre .jour-num { color: #B8AE9E; }       /* leur numéro est estompé */
.cal td.aujourdhui { background: rgba(201,154,85,.14); } /* la case du jour actuel : voile ocre */
.cal .jour-num { font-size: 0.76rem; color: var(--gris-clair); font-weight: 700; }
.cal td.aujourdhui .jour-num { color: var(--ocre); }
.cal .cal-add { color: var(--gris-moyen); text-decoration: none; font-size: 1.05rem; line-height: 1; padding: 0 4px; } /* bouton « + » */
.cal .cal-add:hover { color: var(--bleu); }
/* Pastille d'événement : titre sur une ligne, tronqué « … », filet coloré à gauche. */
.cal .ev { display: block; font-size: 0.68rem; line-height: 1.3; padding: 2px 6px; margin-top: 3px; border-radius: 6px; background: var(--bleu-clair); border-left: 3px solid var(--bleu); color: var(--gris-clair); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.cal .ev:hover { background: #dde7f0; color: var(--bleu); }

/* ==========================================================================
   BARRE DE PROGRESSION DES TÉLÉVERSEMENTS (upload de fichiers, admin)
   ========================================================================== */
.up-bar{margin-top:14px;display:none} /* masquée par défaut ; le JS l'affiche pendant l'envoi */
.up-track{height:10px;background:var(--bleu-clair);border:1px solid var(--ligne);border-radius:999px;overflow:hidden} /* rail de la barre */
/* La partie remplie : largeur augmentée en JS, remplissage bleu, animée en douceur. */
.up-fill{height:100%;width:0;background:var(--bleu);transition:width .2s ease}
.up-txt{margin-top:6px;font-size:12px;color:var(--gris-moyen)} /* texte « x % / y Mo » */

/* Journal « logs » des paquets pendant le téléversement (rendu « terminal » clair). */
.up-log{
  margin-top:8px;max-height:150px;overflow:auto;
  background:#FBF8F2;border:1px solid var(--ligne);border-radius:10px;
  padding:8px 10px;
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  font-size:11px;line-height:1.55;color:var(--gris-clair);
  white-space:pre-wrap;word-break:break-word;
}

/* ==========================================================================
   ANALYTICS (interface maison branchée sur l'API GA4)
   ========================================================================== */
.ga-periods { display: flex; gap: 6px; flex-wrap: wrap; }             /* boutons de période (7j, 30j…) */
.btn.active { border-color: var(--bleu); color: var(--creme); background: var(--bleu); } /* période sélectionnée : bouton plein */
.ga-chart { width: 100%; height: auto; display: block; margin-top: 4px; } /* graphique (SVG) responsive */
.ga-legend { display: flex; gap: 20px; margin-bottom: 6px; font-size: 0.72rem; color: var(--gris-moyen); text-transform: uppercase; letter-spacing: 0.06em; }
.ga-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } /* pastille de légende */
.ga-legend .dot-w { background: var(--bleu); }        /* série principale (cette période) */
.ga-legend .dot-g { background: var(--ocre); }        /* série secondaire (période précédente) */
/* Mini-barre horizontale (ex. répartition par source). */
.ga-bar { display: block; height: 6px; border-radius: 999px; background: var(--bleu-clair); margin-top: 7px; }
.ga-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--bleu); }

/* ==========================================================================
   SUITE DE PRODUCTION — barre « projet » commune (Scénario, Découpage,
   Storyboard, Feuille de service). Rendue par inc/production.php.
   ========================================================================== */
.prod-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.prod-picker { display: flex; align-items: center; gap: 8px; }
.prod-picker label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gris-moyen); }
.prod-picker select { background: #fff; color: var(--gris-clair); border: 1px solid var(--ligne-forte); border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 0.9rem; }
/* Bouton « Ouvrir ». Le [hidden] doit toujours gagner. */
.prod-picker-go { background: var(--bleu); color: var(--creme); border: 1px solid var(--bleu); border-radius: 10px; padding: 8px 16px; font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; }
.prod-picker-go[hidden] { display: none !important; }
.prod-picker-empty { color: var(--warn); font-size: 0.82rem; }
.prod-bar-projet { font-weight: 700; color: var(--bleu); }
.prod-hint { color: var(--gris-moyen); }
.prod-choose { margin: 30px 0; }
.prod-choose-hint { color: var(--gris-clair); margin-bottom: 10px; }