/* Outil Sponsoring <-> Régie — HC Fribourg-Gottéron — styles communs
   Identité : bleu nuit et blanc, fond gris bleuté, statuts en couleur. */
:root {
  --noir: #0f2240;              /* bleu nuit (nom historique de la variable) */
  --noir-2: #1c3560;             /* survol des boutons noirs */
  --fond: #eef1f6;
  --surface: #ffffff;
  --surface-2: #f6f8fb;          /* zones secondaires, en-têtes de tableau */
  --texte: #111a2b;
  --texte-doux: #5a677b;
  --bordure: #dde3eb;
  --bordure-forte: #c2ccd9;
  --accent: var(--noir);
  --accent-texte: #ffffff;
  --selection: #e8edf4;          /* élément choisi (cases, onglets…) */
  --lien: #0b5cad;
  --ok: #1d7a44;       --ok-fond: #e4f3e9;
  --alerte: #955f00;   --alerte-fond: #fcefd4;
  --erreur: #b3261e;   --erreur-fond: #fbe6e4;
  --info: #0b5cad;     --info-fond: #e2eefb;
  --rayon: 10px;
  --rayon-petit: 7px;
  --ombre: 0 1px 2px rgba(15,34,64,.06), 0 4px 14px rgba(15,34,64,.06);
  --ombre-forte: 0 18px 50px rgba(8,18,36,.3);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-size: 15px; line-height: 1.5;
  color: var(--texte); background: var(--fond);
  -webkit-font-smoothing: antialiased;
}
h1 { font-size: 1.75rem; line-height: 1.2; font-weight: 800; letter-spacing: -.015em; margin: 0 0 .25rem; }
h2 { font-size: 1.15rem; font-weight: 700; margin: 0 0 .75rem; }
h3 { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
     color: var(--texte-doux); margin: 0 0 .6rem; }
p  { margin: 0 0 .75rem; }
a  { color: var(--lien); }
.doux { color: var(--texte-doux); }
.petit { font-size: .85rem; }
[hidden] { display: none !important; }
.surtitre { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
            color: var(--texte-doux); margin-bottom: .2rem; }

/* ---- Menu latéral ---- */
:root { --largeur-menu: 248px; }
.menu-lateral {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--largeur-menu); z-index: 25;
  display: flex; flex-direction: column; gap: 1.5rem;
  padding: 1.25rem .9rem 1rem; background: var(--noir); color: #fff;
  border-right: 3px solid #fff; box-shadow: 1px 0 0 var(--noir);
  overflow-y: auto;
}
body.avec-menu main { margin-left: calc(var(--largeur-menu) + max(0px, (100vw - var(--largeur-menu) - 1240px) / 2)); }
.menu-lateral .marque { padding: 0 .35rem .25rem; }
.menu-lateral nav { display: grid; gap: 1.25rem; flex: 1; align-content: start; }
.menu-titre {
  font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em;
  color: #8a9ab3; padding: 0 .65rem .45rem;
}
.menu-rubrique a {
  display: flex; align-items: center; gap: .7rem; padding: .6rem .65rem; border-radius: 8px;
  color: #c5d0e0; text-decoration: none; font-weight: 600; font-size: .93rem;
}
.menu-rubrique a + a { margin-top: .15rem; }
.menu-rubrique a:hover { color: #fff; background: rgba(255,255,255,.07); }
.menu-rubrique a.actif { color: var(--noir); background: #fff; }
.menu-rubrique a > span:first-of-type { flex: 1; }
.menu-compteur {
  min-width: 1.4rem; height: 1.4rem; padding: 0 .4rem; border-radius: 999px;
  display: inline-grid; place-items: center; font-size: .74rem; font-weight: 800;
  background: #3b82f6; color: #fff;
}
.menu-rubrique a.actif .menu-compteur { background: var(--noir); }
/* Produits : une page par produit, rangées par catégorie */
.menu-tous-produits > summary {
  display: flex; align-items: center; gap: .7rem; padding: .6rem .65rem; border-radius: 8px; cursor: pointer;
  color: #c5d0e0; font-weight: 600; font-size: .93rem; list-style: none; margin-top: .15rem;
}
.menu-tous-produits > summary::-webkit-details-marker { display: none; }
.menu-tous-produits > summary::before { content: '▸'; width: 18px; text-align: center; font-size: .75rem; color: #8a9ab3; transition: transform .12s; }
.menu-tous-produits[open] > summary::before { transform: rotate(90deg); }
.menu-tous-produits > summary:hover { color: #fff; background: rgba(255,255,255,.07); }
.menu-tous-produits > summary > span:first-of-type { flex: 1; }
.menu-liste-produits { padding-left: .4rem; }
.menu-groupe summary {
  display: flex; align-items: center; gap: .5rem; padding: .5rem .65rem; border-radius: 8px; cursor: pointer;
  color: #c5d0e0; font-weight: 600; font-size: .9rem; list-style: none; margin-top: .15rem;
}
.menu-groupe summary::-webkit-details-marker { display: none; }
.menu-groupe summary::before { content: '▸'; font-size: .7rem; color: #8a9ab3; transition: transform .12s; }
.menu-groupe[open] summary::before { transform: rotate(90deg); }
.menu-groupe summary:hover { color: #fff; background: rgba(255,255,255,.07); }
.menu-groupe summary > span:first-of-type { flex: 1; }
.menu-nb { font-size: .72rem; color: #8a9ab3; }
.menu-rubrique a.menu-produit { padding: .38rem .65rem .38rem 1.9rem; font-size: .86rem; font-weight: 500; margin-top: .1rem; }
.menu-rubrique > a.menu-produit { padding-left: 1.9rem; }
.menu-groupe .menu-produit { border-left: 1px solid rgba(255,255,255,.12); margin-left: .95rem; border-radius: 0 8px 8px 0; padding-left: .9rem !important; }
.menu-groupe[open] { padding-bottom: .2rem; }
.menu-compte {
  border-top: 1px solid rgba(255,255,255,.12); padding: 1rem .35rem 0; display: grid; gap: .35rem;
}
.menu-utilisateur { display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem; }
.menu-utilisateur strong { display: block; font-size: .9rem; }
.menu-utilisateur small { color: #98a7bf; font-size: .78rem; }
.avatar-clair { background: #fff !important; color: var(--noir) !important; }
.menu-compte a, .lien-menu {
  font: inherit; font-size: .86rem; color: #aebbd0; text-decoration: none; text-align: left;
  background: none; border: 0; padding: .2rem 0; cursor: pointer;
}
.menu-compte a:hover, .lien-menu:hover { color: #fff; text-decoration: underline; }
.menu-version { display: block; margin-top: .5rem; font-size: .7rem; color: #8a9ab3; }
.barre-mobile, .voile-menu { display: none; }

.marque { display: flex; align-items: center; gap: .65rem; color: #fff; text-decoration: none; }
.marque-logo {
  position: relative; width: 42px; height: 42px; border-radius: 9px; flex: none;
  background: #fff; color: var(--noir); display: grid; place-items: center;
  font-size: .62rem; font-weight: 900; letter-spacing: .04em; overflow: hidden;
}
/* logo sur fond blanc : un peu de marge pour que le triangle ne touche pas les bords */
.marque-logo img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px);
                   object-fit: contain; background: #fff; }
.marque-texte { display: flex; flex-direction: column; line-height: 1.15; }
.marque-texte strong { font-size: .98rem; letter-spacing: .01em; }
.marque-texte small { font-size: .74rem; color: #aebbd0; letter-spacing: .04em; text-transform: uppercase; }
/* ---- Mise en page ---- */
main { max-width: 1240px; margin: 0 auto; padding: 2rem 2rem 4rem; }
main.centre { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem; }
.titre-page { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
  margin-bottom: 1.5rem; flex-wrap: wrap; }
.titre-page p { margin: 0; }
.carte {
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 1.35rem;
}
.carte + .carte { margin-top: 1rem; }
.etroite { width: 100%; max-width: 420px; }
.moyenne { max-width: 820px; margin: 0 auto; }

/* Carte de connexion */
.carte-connexion { padding: 0; overflow: hidden; }
.carte-connexion .bandeau {
  background: var(--noir); color: #fff; padding: 1.5rem 1.5rem 1.25rem; border-bottom: 3px solid #fff;
  box-shadow: 0 1px 0 var(--noir); display: flex; align-items: center; gap: .9rem;
}
.carte-connexion .bandeau .marque-logo { width: 64px; height: 64px; font-size: .8rem; border-radius: 12px; }
.carte-connexion .bandeau h1 { font-size: 1.3rem; margin: 0; color: #fff; }
.carte-connexion .bandeau p { margin: 0; color: #aebbd0; font-size: .85rem; }
.carte-connexion .contenu { padding: 1.5rem; }

/* ---- Formulaires ---- */
label { display: block; font-weight: 600; margin-bottom: .35rem; }
.champ { margin-bottom: 1.15rem; position: relative; }
.aide { font-size: .85rem; color: var(--texte-doux); margin-top: .3rem; }
input[type=text], input[type=email], input[type=date], input[type=search], input[type=password],
input[type=number], input[type=time], select, textarea {
  width: 100%; padding: .6rem .75rem; font: inherit; color: inherit;
  border: 1px solid var(--bordure-forte); border-radius: var(--rayon-petit); background: #fff;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--noir); box-shadow: 0 0 0 3px rgba(15,34,64,.16);
}
textarea { min-height: 90px; resize: vertical; }
.choix { display: flex; flex-wrap: wrap; gap: .45rem; }
.choix label {
  font-weight: 500; margin: 0; display: flex; align-items: center; gap: .45rem;
  padding: .45rem .8rem; border: 1px solid var(--bordure-forte); border-radius: 999px; cursor: pointer;
  background: #fff; transition: background .12s, border-color .12s;
}
.choix label:hover { border-color: var(--texte-doux); }
.choix label:has(input:checked) { border-color: var(--noir); background: var(--noir); color: #fff; }
.choix input { margin: 0; accent-color: var(--noir); }
.choix label:has(input:checked) input { accent-color: #fff; }
.choix-compact label { padding: .28rem .65rem; font-size: .86rem; }

/* ---- Boutons ---- */
.btn {
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .6rem 1.1rem; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--bordure-forte); border-radius: var(--rayon-petit); background: #fff; color: var(--texte);
  transition: background .12s, border-color .12s;
}
.btn:hover { border-color: var(--texte); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-principal { background: var(--noir); color: #fff; border-color: var(--noir); }
.btn-principal:hover { background: var(--noir-2); border-color: var(--noir-2); }
.btn-discret { background: transparent; border-color: transparent; font-weight: 500; color: var(--texte-doux); }
.btn-discret.btn-danger { color: var(--erreur); }
.btn-discret.btn-danger:hover { background: var(--erreur-fond); }
.btn-discret:hover { border-color: var(--bordure-forte); color: var(--texte); }
.btn-large { width: 100%; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; margin-top: 1rem; }

/* ---- Badges ---- */
.badge {
  display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .55rem; border-radius: 999px;
  font-size: .76rem; font-weight: 700; white-space: nowrap; background: #e8edf4; color: var(--texte);
}
.statut-nouvelle { background: var(--info-fond); color: var(--info); }
.statut-en_cours { background: var(--alerte-fond); color: var(--alerte); }
.statut-question { background: var(--erreur-fond); color: var(--erreur); }
.statut-traitee  { background: var(--ok-fond); color: var(--ok); }
.badge-match, .badge-a-venir { background: var(--alerte-fond); color: var(--alerte); }
.badge-son { background: var(--info-fond); color: var(--info); }
.badge::before { content: none; }
.statut-nouvelle::before, .statut-en_cours::before, .statut-question::before, .statut-traitee::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}

/* ---- Messages ---- */
.message { padding: .75rem .95rem; border-radius: var(--rayon-petit); margin-bottom: 1rem; font-size: .92rem; }
.message-ok { background: var(--ok-fond); color: var(--ok); }
.message-erreur { background: var(--erreur-fond); color: var(--erreur); }
.message-info { background: var(--info-fond); color: var(--info); }

#notifications { position: fixed; bottom: 1rem; right: 1rem; display: grid; gap: .5rem; z-index: 60; }
.notification {
  padding: .75rem 1rem; border-radius: var(--rayon-petit); box-shadow: var(--ombre-forte); max-width: 360px;
  background: var(--noir); color: #fff; border-left: 4px solid #4cc27a; font-weight: 500;
}
.notification-erreur { border-left-color: #ff6b5e; }

/* ---- Recherche de sponsor ---- */
.suggestions {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 10; margin-top: 4px;
  background: #fff; border: 1px solid var(--bordure); border-radius: var(--rayon-petit); box-shadow: var(--ombre-forte);
  max-height: 280px; overflow: auto;
}
.suggestions button {
  display: block; width: 100%; text-align: left; padding: .6rem .8rem; border: 0; background: none;
  font: inherit; cursor: pointer;
}
.suggestions button:hover, .suggestions button:focus { background: var(--surface-2); outline: none; }
.suggestions .nouveau { border-top: 1px solid var(--bordure); color: var(--texte); font-weight: 700; }
.selection {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding: .6rem .6rem .6rem .9rem; border: 1px solid var(--noir); border-radius: var(--rayon-petit); background: var(--surface-2);
}

/* ---- Formulaire de demande en étapes ---- */
.etape { margin-bottom: 1rem; }
.etape + .etape { margin-top: 0; }
.etape-titre { display: flex; align-items: center; gap: .65rem; font-size: 1.05rem; margin-bottom: 1rem; }
.etape-num {
  width: 28px; height: 28px; border-radius: 50%; background: var(--noir); color: #fff; flex: none;
  display: grid; place-items: center; font-size: .85rem; font-weight: 800;
}
.etape-titre .doux { font-weight: 500; font-size: .85rem; }
.barre-envoi {
  position: sticky; bottom: 0; z-index: 15; margin-top: 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .8rem 1rem; background: var(--noir); color: #fff; border-radius: var(--rayon);
  box-shadow: var(--ombre-forte);
}
.barre-envoi .btn-principal { background: #fff; color: var(--noir); border-color: #fff; }
.barre-envoi .btn-principal:hover { background: #e3e9f2; }
.barre-envoi #resume-envoi { color: #d3dce8; font-size: .9rem; }

/* ---- Produits (choix) ---- */
.outils-produits { display: flex; gap: .6rem; margin-bottom: .75rem; flex-wrap: wrap; }
.outils-produits input[type=search] { flex: 1; min-width: 200px; }
.selection-produits { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .75rem; }
.puce {
  display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .3rem .22rem .65rem;
  background: var(--noir); color: #fff; border-radius: 999px; font-size: .84rem; font-weight: 600;
}
.puce button {
  border: 0; background: rgba(255,255,255,.18); color: #fff; width: 20px; height: 20px; border-radius: 50%;
  cursor: pointer; font-size: .8rem; line-height: 1; display: grid; place-items: center; padding: 0;
}
.puce button:hover { background: rgba(255,255,255,.35); }
.groupes-produits { display: grid; gap: .45rem; }
.groupes-produits details {
  border: 1px solid var(--bordure); border-radius: var(--rayon-petit); background: #fff;
}
.groupes-produits details[open] { border-color: var(--bordure-forte); }
.groupes-produits summary {
  padding: .6rem .85rem; cursor: pointer; font-weight: 700; display: flex; justify-content: space-between;
  align-items: center; gap: .5rem; list-style: none;
}
.groupes-produits summary::-webkit-details-marker { display: none; }
.groupes-produits summary::before { content: '▸'; color: var(--texte-doux); margin-right: .1rem; transition: transform .12s; }
.groupes-produits details[open] summary::before { transform: rotate(90deg); }
.groupes-produits summary > span:first-child { flex: 1; }
.groupes-produits .liste { padding: 0 .85rem .85rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.groupes-produits .liste label {
  font-weight: 500; margin: 0; display: flex; align-items: center; gap: .4rem;
  padding: .32rem .7rem; border: 1px solid var(--bordure-forte); border-radius: 999px; cursor: pointer; font-size: .88rem;
}
.groupes-produits .liste label:hover { border-color: var(--texte-doux); }
.groupes-produits .liste label:has(input:checked) { border-color: var(--noir); background: var(--noir); color: #fff; }
.groupes-produits .liste input { accent-color: var(--noir); margin: 0; }
.compte-coches { background: var(--noir); color: #fff; }

/* ---- Détails par produit ---- */
.details-produits { display: grid; gap: .8rem; }
.detail-produit {
  border: 1px solid var(--bordure); border-radius: var(--rayon); background: #fff; padding: 1rem 1.1rem;
  box-shadow: inset 4px 0 0 var(--noir);
}
.detail-entete { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin-bottom: .75rem; }
.detail-entete strong { font-size: 1.02rem; margin-right: .25rem; }
.detail-entete .description { flex-basis: 100%; }
.matchs-produit { margin-top: .6rem; padding: .65rem .75rem; background: var(--surface-2); border-radius: var(--rayon-petit); }
.matchs-produit .aide { margin: 0 0 .4rem; }
.champ-ligne { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .7rem; }
.champ-ligne label { margin: 0; }
.champ-ligne .etiquette { font-weight: 700; font-size: .88rem; min-width: 95px; }
.grille-remarques { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.grille-remarques .bloc-texte { padding: .45rem .65rem; min-height: 2.4rem; }
.titre-bloc { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
              color: var(--texte-doux); margin-bottom: .3rem; }

/* ---- Fichiers ---- */
.zone-depot {
  border: 2px dashed var(--bordure-forte); border-radius: var(--rayon); padding: 1.25rem; text-align: center;
  color: var(--texte-doux); cursor: pointer; background: var(--surface-2); transition: background .12s, border-color .12s;
}
.zone-depot:hover { border-color: var(--texte-doux); }
.zone-depot.survol { border-color: var(--noir); background: #e3e9f2; }
.zone-compacte { padding: .6rem .8rem; font-size: .88rem; margin-top: .35rem; }
.fichiers-produit { margin-top: .8rem; }
.fichiers-produit .liste-fichiers { margin-top: .35rem; }
.fichier-attendu + .fichier-attendu { margin-top: .6rem; }
.liste-fichiers { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .35rem; }
.liste-fichiers li {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding: .45rem .5rem .45rem .7rem; border: 1px solid var(--bordure); border-radius: var(--rayon-petit);
  font-size: .9rem; background: #fff; min-width: 0;
}
.liste-fichiers li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.liste-fichiers li > span::before { content: '📄 '; }
.liste-fichiers .btn { padding: .25rem .6rem; font-size: .84rem; flex: none; }
.liste-documents li > span { white-space: normal; overflow-wrap: anywhere; flex: 1; }

/* ---- Liste des demandes ---- */
.filtres { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.filtres input[type=search] { max-width: 300px; }
.filtres select { width: auto; }
.filtres .case { font-weight: 500; display: flex; gap: .4rem; align-items: center; margin: 0; font-size: .9rem; }
.onglets { display: flex; gap: .25rem; flex-wrap: wrap; background: #e1e7ef; padding: .25rem; border-radius: 999px; }
.onglets button {
  padding: .42rem .9rem; border: 0; border-radius: 999px; background: transparent;
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; color: var(--texte-doux);
  display: inline-flex; align-items: center; gap: .4rem;
}
.onglets button:hover { color: var(--texte); }
.onglets button.actif { background: var(--noir); color: #fff; }
.onglets .compte {
  min-width: 1.4rem; padding: 0 .35rem; height: 1.4rem; border-radius: 999px; font-size: .75rem;
  display: inline-grid; place-items: center; background: rgba(0,0,0,.08);
}
.onglets button.actif .compte { background: rgba(255,255,255,.2); }

.tableau-conteneur { overflow-x: auto; }
table.tableau { width: 100%; border-collapse: collapse; background: var(--surface); }
.tableau th, .tableau td { text-align: left; padding: .75rem .9rem; border-bottom: 1px solid var(--bordure); vertical-align: middle; }
.tableau th { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--texte-doux);
              background: var(--surface-2); font-weight: 700; }
.tableau tbody tr { cursor: pointer; transition: background .1s; }
.tableau tbody tr:hover { background: var(--surface-2); }
.tableau tbody tr:last-child td { border-bottom: 0; }
.tableau tbody tr.selectionnee { background: #e8edf4; }
.vide { padding: 2.5rem; text-align: center; color: var(--texte-doux); }
.tableau.non-cliquable tbody tr { cursor: default; }
.tableau.non-cliquable tbody tr:hover { background: none; }
.tableau tr.passe td { color: var(--texte-doux); }
.tableau tr.ligne-erreur td { color: var(--erreur); background: var(--erreur-fond); }
/* Ligne de demande : liseré de couleur selon le statut */
.tableau tr[class*="ligne-"] td:first-child { box-shadow: inset 4px 0 0 transparent; }
.tableau tr.ligne-nouvelle td:first-child { box-shadow: inset 4px 0 0 var(--info); }
.tableau tr.ligne-en_cours td:first-child { box-shadow: inset 4px 0 0 #e0a100; }
.tableau tr.ligne-question td:first-child { box-shadow: inset 4px 0 0 var(--erreur); }
.tableau tr.ligne-traitee td:first-child { box-shadow: inset 4px 0 0 #7fc79a; }
.tableau tr.ligne-traitee { color: var(--texte-doux); }
.demande-sponsor { font-weight: 700; font-size: 1rem; color: var(--texte); }
.tableau tr.ligne-nouvelle .demande-sponsor::after {
  content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--info);
  margin-left: .4rem; vertical-align: middle;
}
.demande-sous { font-size: .84rem; color: var(--texte-doux); margin-top: .15rem; }
.puces-produits { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .35rem; }
.puce-produit { font-size: .76rem; padding: .08rem .5rem; border-radius: 999px; background: #e8edf4; color: var(--texte); white-space: nowrap; }
.anciennete { font-size: .85rem; white-space: nowrap; }
.anciennete.en-retard { color: var(--alerte); font-weight: 700; }
.personnes { display: flex; align-items: center; gap: .2rem; }
.avatar {
  width: 28px; height: 28px; border-radius: 50%; background: #d8e0ea; color: var(--texte);
  display: inline-grid; place-items: center; font-size: .7rem; font-weight: 800; flex: none;
}
.avatar-regie { background: var(--noir); color: #fff; }
.fleche { color: var(--texte-doux); font-size: .8rem; }

/* ---- Fiches produit ---- */
.lien-retour { display: inline-block; margin-bottom: .75rem; font-size: .9rem; font-weight: 600; text-decoration: none; }
.lien-retour:hover { text-decoration: underline; }
.liens-a-ajouter { display: flex; flex-wrap: wrap; gap: .4rem; }
.puce-lien {
  display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .45rem .35rem .8rem; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--bordure-forte); color: var(--texte); text-decoration: none; font-weight: 600; font-size: .9rem;
}
.puce-lien:hover { border-color: var(--noir); }
.categorie-produits { margin-bottom: 1.5rem; }
.grille-produits { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem; }
.carte-produit {
  display: flex; flex-direction: column; gap: .3rem; padding: .85rem 1rem; text-decoration: none; color: var(--texte);
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre);
  transition: border-color .12s, transform .12s;
}
.carte-produit:hover { border-color: var(--noir); transform: translateY(-1px); }
.carte-produit.a-traiter { box-shadow: inset 4px 0 0 var(--info), var(--ombre); }
.carte-produit .pied-carte { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: auto; padding-top: .35rem; }
.carte-attente { box-shadow: inset 4px 0 0 var(--info); }
.rangee-libre td { background: var(--surface-2); }
/* Fiches produit en onglets (comme les feuilles d'un classeur Excel) */
.onglets-produits { display: flex; gap: .3rem; overflow-x: auto; position: sticky; top: 0; z-index: 15;
  margin: .25rem 0 1.5rem; padding: .7rem 0 0; background: var(--fond); border-bottom: 3px solid var(--noir);
  scrollbar-width: thin; }
.onglet-produit { flex: none; display: flex; align-items: center; gap: .4rem; padding: .7rem 1.1rem;
  border-radius: 10px 10px 0 0; background: #d6dde8; color: var(--texte); text-decoration: none;
  font-size: .98rem; font-weight: 600; white-space: nowrap; border: 1px solid #c4cedb; border-bottom: 0; }
.onglet-produit:hover { background: #c6d0de; }
.onglet-produit.debut-categorie { margin-left: .8rem; }
.onglet-produit:first-child { margin-left: 0; }
.onglet-produit.actif { background: var(--noir); border-color: var(--noir); color: #fff; font-weight: 700; }
.onglet-produit .menu-compteur { margin-left: .1rem; }
@media (max-width: 860px) {
  .onglets-produits { position: static; margin-top: 0; }
}

/* En local : sur quelle base on travaille (base de test / vraie base) */
.bandeau-base { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 60;
  padding: .4rem 1rem; border-radius: 999px; font-size: .8rem; font-weight: 700; letter-spacing: .02em;
  box-shadow: var(--ombre-forte); pointer-events: none; white-space: nowrap; max-width: calc(100vw - 24px);
  overflow: hidden; text-overflow: ellipsis; }
.bandeau-test { background: #e0a100; color: #1d1600; }
.bandeau-prod { background: var(--erreur); color: #fff; }
body:has(.bandeau-test) { box-shadow: inset 0 4px 0 #e0a100; }

/* Fiche produit : sponsors au match dont les matchs sont passés */
.bloc-passes { margin-top: 1rem; padding: 0; overflow: hidden; }
.bloc-passes > summary { cursor: pointer; padding: .8rem 1.1rem; }
.bloc-passes[open] > summary { border-bottom: 1px solid var(--bordure); }
.bloc-passes tbody td { color: var(--texte-doux); }

/* Importer des dossiers */
.exemple-dossier { background: var(--surface-2); border: 1px solid var(--bordure); border-radius: 8px;
  padding: .6rem .8rem; margin: 0 0 .8rem; white-space: pre-wrap; overflow-x: auto; }
.barre-progression { height: 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--bordure);
  overflow: hidden; margin: .5rem 0; }
.barre-progression > div { height: 100%; width: 0; background: var(--ok); transition: width .2s; }

/* Match du jour */
.bilan-match { font-size: 1.05rem; margin-bottom: 1rem; }
.bilan-a-faire { box-shadow: inset 5px 0 0 #e0a100, var(--ombre); }
.bilan-pret { box-shadow: inset 5px 0 0 var(--ok), var(--ombre); }
.bilan-pret strong { color: var(--ok); }
.bloc-notes { margin-bottom: 1.25rem; box-shadow: inset 5px 0 0 var(--noir), var(--ombre); }
.bloc-notes h3 { margin-top: 0; }
.notes-match { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.note { display: flex; align-items: flex-start; gap: .6rem; padding: .45rem 0; border-top: 1px solid var(--bordure); }
.note:first-child { border-top: 0; }
.note input[type=checkbox] { width: 20px; height: 20px; margin: .1rem 0 0; accent-color: var(--ok); flex: none; cursor: pointer; }
.note-icone { width: 20px; text-align: center; flex: none; }
.note-texte { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.note-info .note-texte { font-weight: 600; }
.note.est-fait .note-texte { text-decoration: line-through; opacity: .55; }
.note .btn { flex: none; padding: .15rem .45rem; }
.ajout-note { display: flex; gap: .5rem; margin-top: .8rem; flex-wrap: wrap; }
.ajout-note input { flex: 1; min-width: 200px; }
.lien-demandes-attente { display: block; text-decoration: none; color: inherit; margin-bottom: 1.25rem;
  box-shadow: inset 5px 0 0 var(--info), var(--ombre); }
.lien-demandes-attente:hover { border-color: var(--noir); }
.groupe-colosseo { padding: .4rem 0; }
.groupe-colosseo + .groupe-colosseo { margin-top: .75rem; }
.groupe-titre { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--texte-doux); padding: .5rem 1.1rem .3rem; }
.changement { display: flex; gap: .8rem; align-items: flex-start; padding: .7rem 1.1rem; border-top: 1px solid var(--bordure); }
.changement-icone { font-size: 1.1rem; line-height: 1.4; flex: none; }
.changement-texte { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.changement-verbe { font-weight: 700; }
.changement-ajouter .changement-verbe { color: var(--ok); }
.changement-enlever .changement-verbe { color: var(--erreur); }
.changement-visuel .changement-verbe { color: var(--info); }
.changement-demande { background: var(--info-fond); }
.changement-demande .changement-verbe { color: var(--info); }
.changement-actions { display: flex; align-items: center; gap: .5rem; flex: none; }
.case-fait { display: flex; align-items: center; gap: .35rem; margin: 0; font-weight: 600; cursor: pointer; white-space: nowrap; }
.case-fait input { width: 20px; height: 20px; accent-color: var(--ok); }
.changement.est-fait { background: var(--surface-2); }
.changement.est-fait .changement-texte { opacity: .55; }
.changement.est-fait .changement-verbe { text-decoration: line-through; }
.groupe-playlist { padding: .8rem 1.1rem; }
.groupe-playlist + .groupe-playlist { margin-top: .5rem; }
.groupe-playlist summary { cursor: pointer; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.playlist { margin: .7rem 0 0; padding-left: 1.6rem; display: grid; gap: .25rem; }
.playlist li.nouveau { font-weight: 600; }
.playlist li.nouveau::marker { color: #e0a100; }
@media (max-width: 640px) {
  .changement { flex-wrap: wrap; }
  .changement-actions { width: 100%; justify-content: flex-end; }
}

.tableau tr.rangee-titre { cursor: default; }
.tableau tr.rangee-titre td { background: var(--surface-2); font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--texte-doux); padding-top: 1rem; }
/* Fiche produit : diffusions modifiables sur place */
.tableau-diffusions tr.non-validee td { background: #f6f7f9; color: var(--texte-doux); }
.tableau-diffusions tr.non-validee td:first-child { box-shadow: inset 4px 0 0 var(--bordure-forte); }
.tableau-diffusions tr.desactivee td { background: var(--erreur-fond); }
.tableau-diffusions tr.desactivee td:first-child { box-shadow: inset 4px 0 0 var(--erreur); }
/* État d'une diffusion : à l'écran / pas à l'écran / désactivé (+ visuel attendu) */
.cellule-etat { display: inline-flex; align-items: center; gap: .45rem; margin: 0; font-weight: 500; cursor: pointer; white-space: nowrap; }
.etat { display: inline-block; font-size: .8rem; font-weight: 700; white-space: nowrap; border-radius: 999px; padding: .08rem .5rem; }
.etat-ecran { background: var(--ok-fond); color: var(--ok); }
.etat-non { background: #ececf0; color: var(--texte-doux); }
.etat-desactive { background: var(--erreur-fond); color: var(--erreur); }
.etat-attente { background: var(--alerte-fond); color: var(--alerte); }
.cellule-etat + .etat { margin-top: .3rem; }
td .etat-attente { display: inline-block; }
.tableau-diffusions tr.rangee-slides td { background: var(--info-fond); }
.tableau-diffusions tr.rangee-slides td:first-child { box-shadow: inset 4px 0 0 var(--info); }
.ligne-desactivation { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .8rem; }
.case-validee { width: 18px; height: 18px; accent-color: var(--ok); cursor: pointer; }
.case-validee:disabled { cursor: default; }
.remarque-ligne {
  min-height: 0; min-width: 180px; padding: .3rem .5rem; font-size: .85rem; resize: vertical;
  border-color: transparent; background: transparent;
}
.remarque-ligne:hover { border-color: var(--bordure-forte); background: #fff; }
.remarque-ligne:focus { background: #fff; }
.case-grande { display: flex; align-items: flex-start; gap: .6rem; margin: 0; font-weight: 500; cursor: pointer; }
.case-grande input { width: 20px; height: 20px; margin-top: .1rem; accent-color: var(--ok); flex: none; }
.suivi-produit {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem .8rem; align-items: center;
  margin: -.2rem 0 .7rem; padding: .4rem .65rem; border-radius: var(--rayon-petit);
  background: var(--info-fond); color: var(--info); font-size: .84rem; font-weight: 600;
}
.suivi-produit.fait { background: var(--ok-fond); color: var(--ok); }
.suivi-produit a { color: inherit; }
.actions-attente { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem;
                   padding-top: .8rem; border-top: 1px solid var(--bordure); }
.actions-attente .espace { flex: 1; }
.visuel-infos { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .2rem; }
.compte-empl { margin-left: .4rem; padding: .05rem .5rem; border-radius: 999px; background: var(--alerte-fond); color: var(--alerte); }
.compte-empl.ok { background: var(--ok-fond); color: var(--ok); }
.plan-empl { display: grid; gap: .8rem; margin-top: .5rem; }
.anneau-titre { font-weight: 700; font-size: .85rem; margin-bottom: .3rem; }
.anneau-zones { display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.zone-nom { font-size: .68rem; font-weight: 700; letter-spacing: .05em; color: var(--texte-doux); margin-bottom: .2rem; }
.cases { display: flex; flex-wrap: wrap; gap: 3px; }
.case-empl {
  width: 26px; height: 22px; padding: 0; border-radius: 4px; font: inherit; font-size: .62rem; font-weight: 700;
  border: 1px solid var(--bordure-forte); background: #fff; color: var(--texte-doux); cursor: pointer;
  display: inline-grid; place-items: center;
}
.case-empl.libre:hover { border-color: var(--noir); color: var(--noir); }
.case-empl.choisi { background: var(--noir); border-color: var(--noir); color: #fff; }
.case-empl.occupe { background: #cfd8e4; border-color: #cfd8e4; color: #6b788c; cursor: not-allowed; }
.case-empl.reserve { background: repeating-linear-gradient(45deg, #e8edf4 0 4px, #d5dde8 4px 8px); color: #8a96a8; cursor: not-allowed; }
.legende-empl { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; font-size: .8rem; color: var(--texte-doux); }
.legende-empl .case-empl { width: 16px; height: 14px; cursor: default; }

/* ---- Par match ---- */
.liste-matchs { display: grid; gap: .75rem; }
.liste-matchs .carte + .carte { margin-top: 0; }
.carte-match { padding: 1rem 1.15rem; }
.carte-match.sans-vente { box-shadow: none; background: var(--surface-2); }
.entete-match { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.date-match {
  width: 52px; flex: none; text-align: center; border-radius: var(--rayon-petit); overflow: hidden;
  border: 1px solid var(--bordure-forte); background: #fff; line-height: 1.1;
}
.date-match .jour { display: block; font-size: 1.3rem; font-weight: 800; padding: .2rem 0 .05rem; }
.date-match .mois { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
                    background: var(--noir); color: #fff; padding: .12rem 0; }
.infos-match { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
.infos-match strong { font-size: 1.05rem; }
.compteurs-match { display: flex; gap: .35rem; flex-wrap: wrap; }
.lignes-match { list-style: none; margin: .8rem 0 0; padding: 0; border-top: 1px solid var(--bordure); }
.lignes-match li {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: .3rem .8rem; align-items: center;
  padding: .5rem 0; border-bottom: 1px solid var(--bordure); font-size: .92rem;
}
.lignes-match li:last-child { border-bottom: 0; padding-bottom: 0; }
.lignes-match li.en-attente { color: var(--info); }
.produit-match { font-weight: 600; color: var(--texte); text-decoration: none; }
.produit-match:hover { text-decoration: underline; }
.details-match { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.details-match a.badge { text-decoration: none; }
@media (max-width: 640px) {
  .lignes-match li { grid-template-columns: 1fr auto; }
  .lignes-match .sponsor-match { grid-column: 1; grid-row: 2; color: var(--texte-doux); font-size: .85rem; }
  .lignes-match .details-match { grid-row: 1 / span 2; grid-column: 2; }
}

/* ---- Calendrier ---- */
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .75rem; }
code { background: #e8edf4; padding: .05rem .3rem; border-radius: 4px; font-size: .88em; }

/* ---- Fenêtres ---- */
.fenetre {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 40;
  width: min(1060px, calc(100vw - 2rem)); max-height: calc(100vh - 2.5rem);
  background: var(--fond); border-radius: 14px; box-shadow: var(--ombre-forte);
  display: flex; flex-direction: column; overflow: hidden;
}
.fenetre[hidden] { display: none; }
.fenetre-petite { width: min(480px, calc(100vw - 2rem)); background: var(--surface); }
.fenetre-entete {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  padding: 1.1rem 1.4rem; background: var(--noir); color: #fff;
}
.fenetre-entete h2 { color: #fff; font-size: 1.35rem; margin: 0; }
.fenetre-entete .doux { color: #aebbd0; }
.fenetre-entete .btn-discret { color: #d3dce8; font-size: 1.1rem; padding: .3rem .6rem; }
.fenetre-entete .btn-discret:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.fenetre-entete .surtitre { color: #98a7bf; }
.fenetre-corps { padding: 1.25rem 1.4rem; overflow: auto; flex: 1; }
.fenetre-pied {
  display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; align-items: center;
  padding: .8rem 1.4rem; background: var(--surface); border-top: 1px solid var(--bordure);
}
.fenetre-pied .indication { margin-right: auto; font-size: .85rem; color: var(--texte-doux); }
.fenetre dl { display: grid; grid-template-columns: 1fr; gap: .1rem; margin: 0; }
.fenetre dt { color: var(--texte-doux); font-size: .78rem; font-weight: 600; margin-top: .6rem; }
.fenetre dt:first-child { margin-top: 0; }
.fenetre dd { margin: 0; font-weight: 500; }
.bloc-texte { white-space: pre-wrap; background: var(--surface-2); border: 1px solid var(--bordure);
              border-radius: var(--rayon-petit); padding: .6rem .75rem; }
.voile { position: fixed; inset: 0; background: rgba(8,18,36,.55); z-index: 30; backdrop-filter: blur(2px); }
body.fenetre-ouverte { overflow: hidden; }

/* Détail d'une demande : colonne principale + colonne d'infos */
.detail-grille { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 1.25rem; align-items: start; }
.detail-section { margin-bottom: 1.4rem; }
.detail-section:last-child { margin-bottom: 0; }
.detail-cote { display: grid; gap: 1rem; }
.encart { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 1rem 1.1rem; }
.encart-regie { box-shadow: inset 4px 0 0 var(--noir); }

/* Historique d'une demande */
.historique { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--bordure); }
.historique li { position: relative; padding: 0 0 .85rem .3rem; font-size: .9rem; }
.historique li:last-child { padding-bottom: 0; }
.historique li::before { content: ''; position: absolute; left: calc(-1rem - 6px); top: .38rem;
  width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--noir); }
.historique .quand { color: var(--texte-doux); font-size: .8rem; }
.historique .bloc-texte { margin-top: .3rem; font-size: .88rem; }

.lien-bouton { background: none; border: 0; padding: 0; font: inherit; color: var(--lien); cursor: pointer; text-decoration: underline; }
.bas-formulaire { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; font-size: .9rem; }

/* ---- Téléphone ---- */
@media (max-width: 860px) {
  .detail-grille { grid-template-columns: 1fr; }
  /* menu en tiroir derrière ☰ */
  body.avec-menu main { margin-left: auto; }
  .menu-lateral { transform: translateX(-105%); transition: transform .2s ease; z-index: 35; border-right: 0; }
  body.menu-ouvert .menu-lateral { transform: none; box-shadow: var(--ombre-forte); }
  .voile-menu { display: block; position: fixed; inset: 0; background: rgba(8,18,36,.55); z-index: 34; }
  .voile-menu[hidden] { display: none; }
  .barre-mobile {
    display: flex; align-items: center; gap: .75rem; position: sticky; top: 0; z-index: 20;
    padding: .5rem 1rem; background: var(--noir); border-bottom: 3px solid #fff; box-shadow: 0 1px 0 var(--noir);
  }
  .barre-mobile .marque-logo { width: 32px; height: 32px; font-size: .55rem; }
  .btn-menu { background: none; border: 0; color: #fff; font-size: 1.4rem; line-height: 1; padding: .25rem .4rem; cursor: pointer; }
}
@media (max-width: 640px) {
  main { padding: 1.1rem 1rem 3rem; }
  h1 { font-size: 1.45rem; }
  .fenetre { top: 0; left: 0; transform: none; width: 100vw; max-height: none; height: 100%; border-radius: 0; }
  .fenetre-corps, .fenetre-entete, .fenetre-pied { padding-left: 1rem; padding-right: 1rem; }
  .fenetre-pied .indication { flex-basis: 100%; }
  .fenetre-pied .btn { flex: 1; }
  .grille-remarques { grid-template-columns: 1fr; }
  .tableau .col-optionnelle { display: none; }
  .tableau th, .tableau td { padding: .7rem .75rem; }
  .onglets { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .filtres input[type=search] { max-width: none; }
  .barre-envoi { margin-left: -1rem; margin-right: -1rem; border-radius: 0; }
  .barre-envoi .btn { flex: 1; }
  .carte { padding: 1.1rem; }
}