/*
 * USR Sorties — front-end styles.
 *
 * Two parts, in this order:
 *   1. The mockup's design system (tokens + components), scoped under
 *      `.usr-sorties` — the class `View::render()` wraps every screen
 *      in, so the plugin can never leak into (or be leaked into by) the
 *      surrounding theme.
 *   2. The "fiche de sortie" (spec §7) print stylesheet, kept in its own
 *      clearly-delimited section so it stays easy to find as the file
 *      grows.
 */

/* =====================================================================
 * Design system — ported verbatim from the mockup's design tokens and
 * components (docs/reference/maquette_gestion_des_sorties.html, lines
 * 14-247; design doc §9). Every selector is prefixed with `.usr-sorties`;
 * token values and rule bodies are otherwise unchanged from the mockup.
 *
 * Three deliberate departures from a literal copy, none of them a design
 * change — le rendu visé reste celui de la maquette :
 *   - `html{scroll-behavior:smooth}` is a whole-document concern that
 *     cannot be expressed under a wrapper div, so it is not ported.
 *   - `@keyframes fade` is renamed `usr-sorties-fade` so it cannot
 *     collide with an unrelated theme animation of the same name.
 *   - les règles de la fiche de sortie (`.fiche-head`, `.fiche .kv`) et le
 *     fond des `th` sont réécrits sans flexbox, sans grid et sans var()
 *     dans le raccourci `background` : la fiche est aussi mise en page par
 *     Dompdf, qui ne sait rien faire des trois. Voir la section « Fiche de
 *     sortie » plus bas.
 * ===================================================================== */

.usr-sorties {
    --slate: #1f2d3d;        /* bleu ardoise profond (nav, titres) */
    --slate-2: #33475b;      /* ardoise moyen */
    --glacier: #e8eef2;      /* fond glacier clair */
    --paper: #f6f8f9;        /* fond page */
    --card: #ffffff;
    --rock: #6b7785;         /* gris roche (texte secondaire) */
    --line: #d6dee4;         /* filets */
    --balise: #e0662b;       /* orange balise / accent secours */
    --balise-d: #c1541f;
    --pine: #2f6b4f;         /* vert sapin (validé / accepté) */
    --pine-bg: #e4efe9;
    --amber: #b8862a;        /* ambre (en attente) */
    --amber-bg: #f6eed9;
    --rouge: #a33a3a;        /* refus / annulation */
    --rouge-bg: #f3e2e2;
    --graph-bleu: #2b6ea3;   /* série de graphique : validé par la passe dataviz */
    --radius: 4px;
    --shadow: 0 1px 3px rgba(31,45,61,.10),0 1px 2px rgba(31,45,61,.06);
    --font-display: "Georgia","Times New Roman",serif;
    --font-body: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --font-mono: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;

    font-family: var(--font-body);
    color: var(--slate);
    line-height: 1.5;
    font-size: 15px;
}
.usr-sorties, .usr-sorties *{box-sizing:border-box;}
.usr-sorties h1, .usr-sorties h2, .usr-sorties h3, .usr-sorties h4{font-family:var(--font-display);font-weight:600;line-height:1.2;margin:0;}
.usr-sorties a{color:inherit;}

/* ---------- Bandeau maquette ---------- */
.usr-sorties .mockup-bar{
  background:var(--balise);color:#fff;font-size:12.5px;
  padding:6px 16px;text-align:center;letter-spacing:.03em;
  font-family:var(--font-mono);
}

/* ---------- En-tête club ---------- */
.usr-sorties header.club{
  background:var(--slate);color:#fff;padding:0 20px;
  position:sticky;top:0;z-index:50;box-shadow:var(--shadow);
}
.usr-sorties .club-inner{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:18px;height:60px;}
.usr-sorties .brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-size:19px;letter-spacing:.02em;}
.usr-sorties .brand .peak{color:var(--balise);font-size:22px;line-height:1;}
.usr-sorties .brand small{display:block;font-family:var(--font-mono);font-size:9.5px;color:#9fb0bf;letter-spacing:.14em;text-transform:uppercase;margin-top:1px;}
.usr-sorties .gps{margin-left:auto;font-family:var(--font-mono);font-size:10.5px;color:#8ea0b0;letter-spacing:.08em;text-align:right;}

/* ---------- Barre de contrôle maquette (rôle + nav) ---------- */
.usr-sorties .controls{
  background:var(--slate-2);border-top:1px solid rgba(255,255,255,.08);
  padding:10px 20px;position:sticky;top:60px;z-index:49;
}
.usr-sorties .controls-inner{max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;}
.usr-sorties .ctl-label{font-family:var(--font-mono);font-size:10.5px;color:#9fb0bf;text-transform:uppercase;letter-spacing:.1em;}
.usr-sorties .role-group{display:flex;flex-wrap:wrap;gap:5px;}
.usr-sorties .role-btn{
  background:transparent;color:#cdd8e0;border:1px solid rgba(255,255,255,.18);
  padding:5px 11px;border-radius:var(--radius);font-size:12.5px;cursor:pointer;
  font-family:var(--font-body);transition:.12s;
}
.usr-sorties .role-btn:hover{background:rgba(255,255,255,.08);}
.usr-sorties .role-btn.active{background:var(--balise);border-color:var(--balise);color:#fff;font-weight:600;}

.usr-sorties .screen-nav{background:var(--glacier);border-bottom:1px solid var(--line);padding:0 20px;position:sticky;top:113px;z-index:48;}
.usr-sorties .screen-nav-inner{max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;gap:2px;overflow-x:auto;}
.usr-sorties .nav-btn{
  background:transparent;border:none;border-bottom:2px solid transparent;
  padding:11px 13px;font-size:13px;cursor:pointer;color:var(--rock);white-space:nowrap;
  font-family:var(--font-body);transition:.12s;
}
.usr-sorties .nav-btn:hover{color:var(--slate);}
.usr-sorties .nav-btn.active{color:var(--slate);border-bottom-color:var(--balise);font-weight:600;}
.usr-sorties .nav-btn .n{font-family:var(--font-mono);font-size:10px;color:var(--balise);margin-right:5px;}

/* ---------- Zone d'écran ---------- */
.usr-sorties main{max-width:1120px;margin:0 auto;padding:26px 20px 70px;}
/* Sur le site, le <main> appartient au thème et englobe .usr-sorties : la
 * règle ci-dessus ne s'applique qu'à la maquette. On reporte donc le
 * dégagement bas (70px) sur le wrapper pour que le contenu ne colle pas
 * au footer. */
.usr-sorties{padding-bottom:70px;}
.usr-sorties .screen{display:none;animation:usr-sorties-fade .25s ease;}
.usr-sorties .screen.active{display:block;}
@keyframes usr-sorties-fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

.usr-sorties .screen-head{margin-bottom:20px;border-bottom:1px solid var(--line);padding-bottom:14px;}
.usr-sorties .eyebrow{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--balise);margin-bottom:7px;}
.usr-sorties .screen-head h2{font-size:25px;}
.usr-sorties .screen-head p{color:var(--rock);margin:7px 0 0;font-size:14px;max-width:70ch;}
.usr-sorties .role-hint{
  display:inline-block;margin-top:11px;font-size:12px;color:var(--rock);
  background:var(--glacier);border:1px solid var(--line);border-radius:var(--radius);
  padding:4px 10px;font-family:var(--font-mono);letter-spacing:.02em;
}

/* ---------- Cartes de sortie ---------- */
.usr-sorties .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px;}
.usr-sorties .sortie-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:.14s;}
.usr-sorties .sortie-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(31,45,61,.13);}
.usr-sorties .card-top{padding:13px 15px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.usr-sorties .date-block{text-align:center;flex-shrink:0;background:var(--slate);color:#fff;border-radius:var(--radius);padding:7px 10px;min-width:52px;}
.usr-sorties .date-block .d{font-family:var(--font-display);font-size:20px;line-height:1;}
.usr-sorties .date-block .m{font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;margin-top:2px;color:#b9c6d1;}
.usr-sorties .card-body{padding:13px 15px;flex:1;display:flex;flex-direction:column;}
.usr-sorties .card-body h3{font-size:16.5px;margin-bottom:8px;}
.usr-sorties .tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px;}
.usr-sorties .tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;padding:3px 7px;border-radius:2px;border:1px solid var(--line);color:var(--rock);background:var(--glacier);}
.usr-sorties .tag.act{background:var(--slate);color:#fff;border-color:var(--slate);}
.usr-sorties .card-meta{font-size:12.5px;color:var(--rock);margin-top:auto;display:flex;flex-direction:column;gap:3px;}
.usr-sorties .card-meta .row{display:flex;align-items:center;gap:6px;}
.usr-sorties .card-meta .ic{color:var(--balise);font-size:12px;width:14px;text-align:center;}

.usr-sorties .badge{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:2px;font-weight:600;}
.usr-sorties .badge.complete{background:var(--rouge-bg);color:var(--rouge);}
.usr-sorties .badge.open{background:var(--pine-bg);color:var(--pine);}
.usr-sorties .badge.attente{background:var(--amber-bg);color:var(--amber);}
.usr-sorties .badge.accepte{background:var(--pine-bg);color:var(--pine);}
.usr-sorties .badge.refuse{background:var(--rouge-bg);color:var(--rouge);}
.usr-sorties .badge.annulee{background:var(--rouge-bg);color:var(--rouge);}
.usr-sorties .badge.decouverte{background:#e7e0f0;color:#5b4a86;}
/* spec 2026-07-29 §4 : statut personnel « J'encadre » sur l'agenda. Teinte
   ardoise, distincte du vert (accepte), de l'ambre (attente) et du rouge
   (refuse/complete/annulee) ; paire codée en dur sur le modèle de
   .badge.decouverte, qui n'a pas non plus de variable dédiée. */
.usr-sorties .badge.encadre{background:#e3e8ee;color:var(--slate-2);}

/* spec 2026-07-29 §R2 : filtre par activité de l'agenda. Cases à cocher
   natives (pas le widget usr-multiselect) : le formulaire fonctionne sans JS
   et reste accessible au clavier et aux lecteurs d'écran. */
.usr-sorties .usr-filtre-activites{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-bottom:16px;}
.usr-sorties .usr-filtre-legende{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-2);}
.usr-sorties .usr-filtre-cases{display:flex;flex-wrap:wrap;gap:8px 16px;}
.usr-sorties .usr-filtre-cases label{display:inline-flex;align-items:center;gap:6px;cursor:pointer;}
.usr-sorties .usr-filtre-actions{display:flex;gap:8px;margin-left:auto;}
.usr-sorties .usr-filtre-encadrements select{width:auto;min-width:220px;}

/* ---------- Boutons ---------- */
.usr-sorties .btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--slate);background:var(--slate);color:#fff;padding:9px 16px;border-radius:var(--radius);font-size:13.5px;cursor:pointer;font-family:var(--font-body);transition:.12s;text-decoration:none;}
.usr-sorties .btn:hover{background:var(--slate-2);}
.usr-sorties .btn.accent{background:var(--balise);border-color:var(--balise);}
.usr-sorties .btn.accent:hover{background:var(--balise-d);}
.usr-sorties .btn.ghost{background:transparent;color:var(--slate);}
.usr-sorties .btn.ghost:hover{background:var(--glacier);}
.usr-sorties .btn.sm{padding:6px 11px;font-size:12.5px;}
.usr-sorties .btn.pine{background:var(--pine);border-color:var(--pine);}
.usr-sorties .btn.rouge{background:transparent;color:var(--rouge);border-color:var(--rouge);}
.usr-sorties .btn.rouge:hover{background:var(--rouge-bg);}
.usr-sorties .btn:disabled{opacity:.45;cursor:not-allowed;}

/* ---------- Détail sortie ---------- */
.usr-sorties .detail-wrap{display:grid;grid-template-columns:1fr 320px;gap:24px;}
@media(max-width:820px){.usr-sorties .detail-wrap{grid-template-columns:1fr;}}
.usr-sorties .panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:16px;}
.usr-sorties .panel h3{font-size:17px;margin-bottom:13px;padding-bottom:9px;border-bottom:1px solid var(--line);}
.usr-sorties .panel h3 .n{font-family:var(--font-mono);font-size:11px;color:var(--balise);margin-right:7px;}
.usr-sorties .kv{display:grid;grid-template-columns:130px 1fr;gap:8px 14px;font-size:14px;}
.usr-sorties .kv dt{color:var(--rock);font-size:12.5px;}
.usr-sorties .kv dd{margin:0;}
.usr-sorties .desc{font-size:14px;color:var(--slate-2);white-space:pre-line;}
.usr-sorties .aside .panel{position:sticky;top:170px;}
.usr-sorties .place-counter{text-align:center;padding:8px 0 4px;}
.usr-sorties .place-counter .big{font-family:var(--font-display);font-size:34px;color:var(--slate);}
.usr-sorties .place-counter .lbl{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--rock);}
.usr-sorties .waitline{font-size:12.5px;color:var(--rock);text-align:center;margin-top:8px;padding-top:10px;border-top:1px solid var(--line);}

/* ---------- Tableaux ---------- */
.usr-sorties table{width:100%;border-collapse:collapse;font-size:13.5px;}
.usr-sorties th, .usr-sorties td{text-align:left;padding:9px 11px;border-bottom:1px solid var(--line);}
/* `background-color` et non le raccourci `background` : sur une cellule de
 * tableau, Dompdf ne résout pas var() dans le raccourci et ne peint alors
 * aucun fond — le tableau participants du PDF perdait ses en-têtes teintés.
 * Déclaration équivalente pour les navigateurs (rien ici ne pose d'image
 * de fond que le raccourci aurait réinitialisée). */
.usr-sorties th{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--rock);font-weight:600;background-color:var(--glacier);}
.usr-sorties tbody tr:hover{background:var(--glacier);}
.usr-sorties td .sub{color:var(--rock);font-size:12px;}
.usr-sorties .actions-cell{display:flex;gap:6px;flex-wrap:wrap;}
/* Responsive : les tableaux .stack deviennent des cartes empilées sur mobile */
@media(max-width:680px){
  .usr-sorties table.stack thead{display:none;}
  .usr-sorties table.stack, .usr-sorties table.stack tbody, .usr-sorties table.stack tr, .usr-sorties table.stack td{display:block;width:100%;}
  .usr-sorties table.stack tr{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;padding:6px 4px;background:#fff;}
  .usr-sorties table.stack td{border:none;padding:7px 12px;display:flex;justify-content:space-between;align-items:flex-start;gap:14px;text-align:right;}
  .usr-sorties table.stack td::before{content:attr(data-label);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--rock);text-align:left;flex-shrink:0;font-weight:600;}
  .usr-sorties table.stack td[data-label=""]::before,.usr-sorties table.stack td.actions-cell::before{content:none;}
  .usr-sorties table.stack td.actions-cell{justify-content:flex-start;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:4px;padding-top:11px;}
  .usr-sorties table.stack td.actions-cell .btn{flex:1;justify-content:center;min-width:120px;}
  .usr-sorties table.stack.params td{flex-direction:column;align-items:stretch;text-align:left;gap:5px;}
  .usr-sorties table.stack.params td::before{text-align:left;}
  .usr-sorties table.stack.params td input{width:100%;}
}

/* ---------- Formulaire ---------- */
.usr-sorties .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px 18px;}
@media(max-width:640px){.usr-sorties .form-grid{grid-template-columns:1fr;}}
.usr-sorties .field{display:flex;flex-direction:column;gap:5px;}
.usr-sorties .field.full{grid-column:1/-1;}
.usr-sorties .field label{font-size:12.5px;color:var(--slate-2);font-weight:600;}
.usr-sorties .field label .req{color:var(--balise);}
.usr-sorties .field .help{font-size:11.5px;color:var(--rock);}
/* spec 2026-08-20 : le motif de retrait manquant. Rouge ET gras : la
   couleur seule ne dirait rien en vision daltonienne. */
.usr-sorties .field .help.erreur{color:var(--rouge);font-weight:600;}
.usr-sorties input, .usr-sorties select, .usr-sorties textarea{font-family:var(--font-body);font-size:14px;padding:9px 11px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--slate);width:100%;}
.usr-sorties input:focus, .usr-sorties select:focus, .usr-sorties textarea:focus{outline:2px solid var(--balise);outline-offset:-1px;border-color:var(--balise);}
.usr-sorties textarea{resize:vertical;min-height:90px;}
.usr-sorties .checkbox-row{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;}
.usr-sorties .checkbox-row input{width:auto;margin-top:3px;}
.usr-sorties fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:15px;margin:0;}
.usr-sorties fieldset legend{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--balise);padding:0 7px;}

/* ---------- Multi-select avec recherche (co-encadrants) ---------- */
.usr-sorties .usr-multiselect{position:relative;}
.usr-sorties .usr-multiselect-control{display:flex;flex-wrap:wrap;gap:5px;align-items:center;padding:5px 7px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;cursor:text;}
.usr-sorties .usr-multiselect-control:focus-within{outline:2px solid var(--balise);outline-offset:-1px;border-color:var(--balise);}
.usr-sorties .usr-multiselect-control input{flex:1;min-width:120px;width:auto;border:none;padding:5px 4px;}
.usr-sorties .usr-multiselect-control input:focus{outline:none;}
.usr-sorties .usr-multiselect-chip{display:inline-flex;align-items:center;gap:6px;background:var(--glacier);border:1px solid var(--line);border-radius:var(--radius);padding:3px 6px 3px 9px;font-size:13px;}
.usr-sorties .usr-multiselect-remove{border:none;background:none;color:var(--rock);font-size:15px;line-height:1;cursor:pointer;padding:0 2px;}
.usr-sorties .usr-multiselect-remove:hover{color:var(--rouge);}
.usr-sorties .usr-multiselect-list{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 3px);margin:0;padding:4px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);max-height:220px;overflow-y:auto;}
.usr-sorties .usr-multiselect-option{padding:7px 9px;border-radius:var(--radius);font-size:13.5px;cursor:pointer;}
.usr-sorties .usr-multiselect-option:hover,.usr-sorties .usr-multiselect-option.is-highlighted{background:var(--glacier);}
.usr-sorties .usr-multiselect-empty{padding:7px 9px;font-size:13px;color:var(--rock);}

/* Le thème charge Bootstrap 3 : fond, couleur et curseur sont explicites,
 * on ne compte sur aucun défaut (cf. la note .modal ci-dessous). */
.usr-sorties .usr-multiselect.is-disabled .usr-multiselect-control{background:var(--glacier);color:var(--rock);border-color:var(--line);cursor:not-allowed;}
.usr-sorties .usr-multiselect.is-disabled .usr-multiselect-control input{background:transparent;color:var(--rock);cursor:not-allowed;}

/* ---------- Graphiques de synthèse (palette arrêtée par la passe
 * dataviz du lot, cf. plan Task 2 Step 6 — elle REMPLACE celle de la
 * spec §4.2) ----------
 * Préfixés `usr-graph-` et jamais dépendants d'un héritage depuis
 * `.panel` : le Bootstrap 3 du thème écrase toute propriété non
 * redéfinie sur `.panel`/`.btn`.
 *
 * Pourquoi pas --pine pour « effectuées » : --pine contre --rouge donne
 * ΔE 5,5 en deutéranopie, sous la bande plancher 6-8, donc illisible pour
 * un daltonien — et saturer le vert aggrave le score. Le triplet retenu
 * (bleu / ambre / rouge) passe les six contrôles en toutes paires, pire
 * ΔE 16,3. --pine garde sa sémantique « validé » ailleurs dans le module,
 * il ne sert simplement plus aux graphiques.
 *
 * Pourquoi les mois à venir sont en CONTOUR et non en teinte atténuée :
 * une opacité de .45 fait tomber l'écart ambre/rouge à ΔE 11,6 en vision
 * normale, sous le plancher de 15 — les deux séries deviennent
 * indiscernables. Le contour garde la teinte à pleine force et ajoute un
 * encodage non chromatique (creux = pas encore advenu).
 */
.usr-sorties .usr-graph{margin:0 0 22px;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);}
.usr-sorties .usr-graph-svg{display:block;width:100%;height:220px;}
.usr-sorties .usr-graph-barre.usr-graph-effectuees{fill:var(--graph-bleu);}
.usr-sorties .usr-graph-barre.usr-graph-annulees{fill:var(--rouge);}
.usr-sorties .usr-graph-barre.usr-graph-a-venir{fill:var(--amber);}
.usr-sorties .usr-graph-barre.usr-graph-participants{fill:var(--graph-bleu);}
.usr-sorties .usr-graph-futur .usr-graph-barre.usr-graph-effectuees{fill:none;stroke:var(--graph-bleu);}
.usr-sorties .usr-graph-futur .usr-graph-barre.usr-graph-annulees{fill:none;stroke:var(--rouge);}
.usr-sorties .usr-graph-futur .usr-graph-barre.usr-graph-a-venir{fill:none;stroke:var(--amber);}
.usr-sorties .usr-graph-futur .usr-graph-barre.usr-graph-participants{fill:none;stroke:var(--graph-bleu);}
.usr-sorties .usr-graph-futur .usr-graph-barre{stroke-width:2;}
.usr-sorties .usr-graph-abscisse{fill:var(--rock);font-family:var(--font-mono);font-size:11px;}
.usr-sorties .usr-graph-legende{display:flex;flex-wrap:wrap;gap:14px;margin:10px 0 0;padding:0;list-style:none;font-size:12.5px;color:var(--rock);}
.usr-sorties .usr-graph-legende-item{display:flex;align-items:center;gap:6px;}
.usr-sorties .usr-graph-puce{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--line);}
.usr-sorties .usr-graph-puce.usr-graph-effectuees{background:var(--graph-bleu);}
.usr-sorties .usr-graph-puce.usr-graph-annulees{background:var(--rouge);}
.usr-sorties .usr-graph-puce.usr-graph-a-venir{background:var(--amber);}
.usr-sorties .usr-graph-puce.usr-graph-participants{background:var(--graph-bleu);}
.usr-sorties .usr-graph-chiffres{margin-top:12px;font-size:13px;}
.usr-sorties .usr-graph-chiffres summary{cursor:pointer;color:var(--rock);}
.usr-sorties .usr-graph-note{font-size:12.5px;color:var(--rock);margin:6px 0 0;}
.usr-sorties .usr-graph-selecteur{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px;font-size:13px;}

/* Impression : le graphique est décoratif, les chiffres sont la donnée. */
@media print {
    .usr-sorties .usr-graph-chiffres{display:block;}
    .usr-sorties .usr-graph-chiffres[open] summary{display:none;}
}

/* ---------- Fiche de sortie (écran, hors impression — voir plus bas) ----------
 * La fiche est le seul écran rendu par trois moteurs : le navigateur, son
 * moteur d'impression, et Dompdf (téléchargement PDF). Dompdf 3.x ne sait
 * mettre en page ni flexbox ni grid — il les rétrograde en `block`
 * (Css/Style.php::_compute_display) — et la fiche doit sortir à
 * l'identique partout. Ses deux mises en page à deux colonnes s'écrivent
 * donc en `table` (bandeau) et en float (grille libellé/valeur), compris
 * des trois. Le reste du design system garde flex et grid : aucun autre
 * écran ne passe par Dompdf.
 */
.usr-sorties .fiche{background:#fff;border:1px solid var(--slate);border-radius:var(--radius);max-width:760px;margin:0 auto;box-shadow:var(--shadow);}
.usr-sorties .fiche-head{background:var(--slate);color:#fff;padding:16px 22px;display:table;width:100%;}
.usr-sorties .fiche-head .t{display:table-cell;vertical-align:middle;font-family:var(--font-display);font-size:18px;}
/* La cellule ne porte que l'alignement : `width:1%` + `nowrap` la réduit à
 * son contenu, poussant le titre sur toute la largeur restante. Le cadre du
 * tampon est sur le span, sinon il s'étirerait à la hauteur de la ligne. */
.usr-sorties .fiche-head .stamp{display:table-cell;vertical-align:middle;text-align:right;width:1%;white-space:nowrap;}
.usr-sorties .fiche-head .stamp span{display:inline-block;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;border:1px solid rgba(255,255,255,.4);padding:4px 8px;border-radius:2px;}
.usr-sorties .fiche-body{padding:22px;}
.usr-sorties .fiche-sec{margin-bottom:20px;}
.usr-sorties .fiche-sec h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--balise);margin-bottom:9px;padding-bottom:5px;border-bottom:1px solid var(--line);}
/* Équivalent float de `grid-template-columns:180px 1fr` + `gap:8px 14px`
 * hérité de `.usr-sorties .kv` : libellé sur 180px, valeur à 194px. La
 * marge basse négative reprend les 8px que la dernière ligne porte
 * désormais et que `gap` ne mettait qu'entre les lignes ; la marge haute
 * reste celle du navigateur, pour ne pas décaler le rythme vertical. */
.usr-sorties .fiche .kv{display:block;font-size:13.5px;margin-bottom:-8px;}
.usr-sorties .fiche .kv dt{float:left;clear:left;width:180px;margin-bottom:8px;}
.usr-sorties .fiche .kv dd{margin:0 0 8px 194px;}
/* Le dernier libellé flotte encore quand il est plus haut que sa valeur :
 * sans ce clearfix il déborderait sous la section suivante. */
.usr-sorties .fiche .kv::after{content:"";display:block;clear:both;}
.usr-sorties .secours-box{background:var(--rouge-bg);border:1px solid #e3c4c4;border-radius:var(--radius);padding:13px 15px;}
.usr-sorties .secours-box .l{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;border-bottom:1px dotted #d9bcbc;}
.usr-sorties .secours-box .l:last-child{border-bottom:none;}
.usr-sorties .secours-box .l .num{font-family:var(--font-mono);font-weight:600;color:var(--rouge);}
.usr-sorties .emergency-112{text-align:center;font-family:var(--font-display);font-size:19px;color:var(--rouge);margin-top:10px;font-weight:700;}

/* ---------- Divers ---------- */
.usr-sorties .info-note{background:var(--glacier);border-left:3px solid var(--balise);padding:11px 15px;font-size:13px;color:var(--slate-2);border-radius:0 var(--radius) var(--radius) 0;margin-bottom:18px;}
.usr-sorties .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:22px;}
.usr-sorties .stat-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;}
.usr-sorties .stat-card .num{font-family:var(--font-display);font-size:32px;color:var(--slate);}
.usr-sorties .stat-card .lbl{font-size:12.5px;color:var(--rock);margin-top:3px;}
.usr-sorties .stat-card .act{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--balise);margin-bottom:8px;}
.usr-sorties .bar-row{display:flex;align-items:center;gap:12px;margin-bottom:9px;font-size:13px;}
.usr-sorties .bar-row .name{width:130px;flex-shrink:0;}
.usr-sorties .bar-track{flex:1;background:var(--glacier);border-radius:2px;height:20px;overflow:hidden;}
.usr-sorties .bar-fill{height:100%;background:var(--slate);display:flex;align-items:center;padding-left:8px;color:#fff;font-size:11px;font-family:var(--font-mono);}
.usr-sorties .bar-fill.b2{background:var(--balise);}
.usr-sorties .hidden-anon{display:none;}
.usr-sorties .pj-list{display:flex;flex-direction:column;gap:8px;}
.usr-sorties .pj-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--slate);font-size:13.5px;transition:.12s;}
.usr-sorties .pj-item:hover{background:var(--glacier);border-color:var(--balise);}
.usr-sorties .pj-ic{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.05em;padding:4px 6px;border-radius:2px;color:#fff;flex-shrink:0;}
.usr-sorties .pj-ic.pdf{background:var(--rouge);}
.usr-sorties .pj-ic.img{background:var(--pine);}
.usr-sorties .only-note{font-size:12px;color:var(--rock);font-style:italic;margin-top:4px;}
/* `.req` n'était stylé que dans un label de formulaire (.field label .req) ;
   l'astérisque « colonne obligatoire » du tableau d'en-têtes de l'écran
   d'import vit dans un <td>, d'où cette règle générale. La règle plus
   spécifique du formulaire reste prioritaire et n'est pas modifiée. */
.usr-sorties .req{color:var(--balise);}
/* Bootstrap 3 du thème colore <code> en rose sur fond rose ; on redéfinit
   pour que les en-têtes littéraux de l'écran d'import restent lisibles
   (voir la collision décrite dans les notes de thème). */
.usr-sorties code{font-family:var(--font-mono);font-size:12.5px;background:var(--glacier);color:var(--slate);padding:2px 5px;border-radius:2px;}
.usr-sorties .role-only{display:none;}
.usr-sorties .crumb{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--rock);margin-bottom:14px;font-family:var(--font-mono);}
.usr-sorties .crumb a{color:var(--balise);text-decoration:none;cursor:pointer;}
.usr-sorties .crumb a:hover{text-decoration:underline;}
.usr-sorties .crumb .sep{color:var(--line);}
.usr-sorties .demo-toggle{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--font-mono);font-size:11px;color:var(--rock);background:#fbf3ec;border:1px dashed var(--balise);border-radius:var(--radius);padding:8px 12px;margin-bottom:14px;}
.usr-sorties .dt-btn{font-family:var(--font-body);font-size:12px;padding:4px 10px;border:1px solid var(--line);background:#fff;border-radius:var(--radius);cursor:pointer;color:var(--rock);}
.usr-sorties .dt-btn.active{background:var(--balise);border-color:var(--balise);color:#fff;font-weight:600;}
.usr-sorties .modal-overlay{position:fixed;inset:0;background:rgba(31,45,61,.55);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;}
/* display/position/overflow explicites : le thème charge Bootstrap, dont
 * `.modal{display:none;position:fixed;overflow:hidden}` masquerait sinon
 * la boîte (l'overlay s'affiche mais la modale reste invisible). */
.usr-sorties .modal{display:block;position:relative;overflow:visible;background:#fff;border-radius:var(--radius);max-width:440px;width:100%;padding:24px;box-shadow:0 8px 30px rgba(0,0,0,.25);}
.usr-sorties .modal h3{font-size:19px;margin-bottom:12px;}
.usr-sorties .modal p{font-size:14px;color:var(--slate-2);margin:0 0 10px;}
.usr-sorties .modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap;}
.usr-sorties footer.mk{max-width:1120px;margin:0 auto;padding:20px;border-top:1px solid var(--line);color:var(--rock);font-size:12px;font-family:var(--font-mono);letter-spacing:.03em;}

/* =====================================================================
 * Fiche de sortie — barre d'actions et impression (spec §7.4 ; design
 * 2026-07-28-fiche-style-site). Le rendu écran de la carte vient du
 * design system ci-dessus (.fiche, .fiche-head, .fiche-body, .fiche-sec,
 * .kv) : l'impression sort le même rendu que l'écran.
 * ===================================================================== */

/* Barre d'actions au-dessus de la carte, alignée sur sa largeur (760px).
 * Deux actions : télécharger le PDF, l'envoyer par mail. L'impression se
 * fait sur ce PDF — il n'y a plus de bouton « Imprimer ». */
.usr-sorties .usr-fiche-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 760px;
    margin: 0 auto 20px;
}

.usr-sorties .usr-fiche-flash {
    flex-basis: 100%;
    font-weight: bold;
    margin: 0;
}

/* Dates de la sortie : première ligne du corps de la carte, discrète. */
.usr-sorties .usr-fiche-dates {
    margin: 0 0 18px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: .03em;
    color: var(--rock);
}

/* Document autonome (le PDF) : le wrapper est l'enfant direct du <body>
 * nu — fond papier + dégagement pour que la carte ne colle pas aux bords.
 * Sans effet sur la vue intégrée, où le thème s'interpose. */
body > .usr-sorties {
    background: var(--paper);
    padding: 24px;
}

/* Ce bloc gouverne aussi le PDF : FicheController cale Dompdf sur le média
 * « print » (setDefaultMediaType), pour que le téléchargement sorte le
 * rendu d'impression et non le rendu écran. */
@media print {
    /* Nothing interactive belongs on the printed/handed-over page: the
     * référent only needs the safety data, never the app's own controls. */
    .no-print,
    .usr-fiche-actions {
        display: none !important;
    }

    /* Marges de page explicites : sans elles, chaque moteur applique les
     * siennes et la fiche imprimée ne cadre pas comme le PDF. */
    @page {
        margin: 12mm;
    }

    body {
        margin: 0;
    }

    /* Une fiche à trente participants déborde sur plusieurs pages : aucune
     * ligne ne doit être coupée en deux — un nom séparé de son numéro de
     * licence n'a plus de valeur pour les secours. Dompdf ne coupe déjà
     * pas les lignes ; les navigateurs, si. (La répétition des en-têtes de
     * colonnes, elle, est acquise des deux côtés : `table-header-group`
     * est le défaut de `thead`.) */
    .usr-sorties .fiche table tr {
        page-break-inside: avoid;
    }

    body > .usr-sorties {
        background: #fff;
        padding: 0;
    }

    /* Bandeau ardoise et fonds imprimés tels qu'affichés (spec §2). */
    .usr-sorties .fiche,
    .usr-sorties .fiche * {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .usr-sorties .fiche {
        max-width: none;
        box-shadow: none;
    }
}

/* ---------- Champ à copier (lot 2026-09-07) ---------- */
/* Le champ occupe la largeur restante, le bouton garde sa taille : sans
   min-width:0 sur l'input, un flex item refuse de passer sous sa largeur
   intrinsèque et le bouton déborde du panneau. */
.usr-sorties .copy-field{display:flex;align-items:stretch;gap:6px;}
.usr-sorties .copy-field input{flex:1 1 auto;min-width:0;}
.usr-sorties .btn.copy-btn{flex:0 0 auto;padding:0 10px;justify-content:center;}
/* L'échange d'icônes est piloté ici, par la classe `copie` que pose le JS,
   et non par l'attribut `hidden` : `hidden` est une propriété de
   HTMLElement, pas de SVGElement — `svg.hidden = true` pose une propriété
   JS sans effet et laisse les deux icônes visibles. */
.usr-sorties .btn.copy-btn svg{display:block;}
.usr-sorties .btn.copy-btn [data-usr-copier-ok]{display:none;}
.usr-sorties .btn.copy-btn.copie [data-usr-copier-icone]{display:none;}
.usr-sorties .btn.copy-btn.copie [data-usr-copier-ok]{display:block;}
.usr-sorties .btn.copy-btn.copie{color:var(--pine);border-color:var(--pine);}
/* `.help[data-usr-...]` et non `[data-usr-...]` seul : `.field .help`
   pose déjà `color:var(--rock)` avec une spécificité supérieure, et le
   message serait resté gris au lieu de reprendre le vert de la coche. */
.usr-sorties .help[data-usr-copier-message]{min-height:1.2em;color:var(--pine);font-weight:600;}
.usr-sorties .help[data-usr-copier-message]:empty{min-height:0;}
/* Source de copie sans champ visible (e-mails des inscrits, lot 2026-09-11) :
   hors écran et non `display:none`, sinon le repli `select()` +
   `execCommand('copy')` n'a rien à sélectionner. */
.usr-sorties .copy-source{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;}
.usr-sorties .panel-bandeau{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.usr-sorties .panel-bandeau-outils{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;}