/* ══ Espace structure — refonte du 18/09/2026 ══════════════════════════════════
   Même langage que la vitrine (equidesk.app) et les pages publiques (public-v2.css) :
   Archivo pour le texte, IBM Plex Mono pour les étiquettes et les chiffres, marine
   et bleu ciel, angles droits, filets fins, pas d'ombre.

   Tout est sous .esp2, posé par PortalLayout sur l'en-tête et la coque de la zone
   connectée — espace structure ET espace cavalier (18/09, soir). L'admin ne change pas.

   Ce qui disparaît : les liserés colorés à gauche des cartes (5 px vert / ambre /
   bleu). La couleur d'état reste, mais sur le chiffre et un petit carré devant
   l'étiquette — là où l'œil lit, pas sur le bord de la carte.
   Ce qui reste : le bouton principal en marine (décision du 05/09), la coque en « L »
   marine (en-tête + rail) de l'app desktop. */

.esp2 {
  --e-navy: #0F1B36; --e-sky: #3B82F6; --e-sky-ink: #2563EB; --e-sky-soft: #93C5FD;
  --e-ink: #0E1726; --e-ink-2: #3E4A5E; --e-ink-3: #6B7486; --e-rule: #D9DEE6; --e-paper: #F6F7F9;
  --e-warn: #B45309; --e-ok: #166534; --e-err: #C8362F;
  --e-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --e-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
html[dir='rtl'] .esp2 { --e-display: 'Tajawal', 'Archivo', Arial, sans-serif; --e-mono: 'Tajawal', 'IBM Plex Mono', monospace; }
html[dir='rtl'] .esp2 * { letter-spacing: 0 !important; }

/* ── En-tête et rail ─────────────────────────────────────────────── */
.site-header.esp2 .wordmark { font-family: var(--e-display); font-weight: 700; letter-spacing: -.01em; }
.site-header.esp2 .compte-nom { font-family: var(--e-display); font-weight: 600; }
.portal-shell.esp2 .portal-rail, .portal-shell.esp2 .rail-item { font-family: var(--e-display); }
.portal-shell.esp2 .rail-item { font-size: 14px; }
.portal-shell.esp2 .rail-group { font-family: var(--e-mono); }

/* ── Contenu ─────────────────────────────────────────────────────── */
.portal-shell.esp2 .site-main { font-family: var(--e-display); color: var(--e-ink); background: transparent; }
/* Le fond gris couvre toute la largeur à côté du rail : peint sur .site-main (max 1120 px,
   centré), il laissait deux bandes blanches. La coque garde son dégradé marine pour le
   rail ; seule la couleur de fond, dessous, change. Spécificité (0,4,0) : elle doit battre
   les règles du rail replié et de l'arabe, (0,3,1). */
:root .portal-shell.esp2.esp2 { background-color: var(--e-paper); }

.esp2 .page-head { margin: 0 0 28px; padding-bottom: 20px; border-bottom: 1px solid var(--e-rule); }
.esp2 .page-head h1, .esp2 .page h1 {
  font-family: var(--e-display); font-weight: 700; font-size: clamp(28px, 3vw, 36px);
  line-height: 1.08; letter-spacing: -.02em; color: var(--e-ink); margin: 0;
}
.esp2 .page-head .sub, .esp2 .page > .sub { margin-top: 10px; font-size: 15px; color: var(--e-ink-2); max-width: 70ch; }
.esp2 .back-link { font: 500 13px/1.4 var(--e-mono); color: var(--e-sky-ink); }
.esp2 .back-row, .esp2 .page > .back-link { display: inline-block; margin-bottom: 14px; }

/* Étiquettes : Plex Mono en capitales, comme la vitrine. */
.esp2 .eyebrow, .esp2 .kpi-label {
  font: 500 12px/1.3 var(--e-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--e-ink-3);
}
.esp2 .eyebrow-accent { color: var(--e-sky-ink); }
.esp2 .section-title {
  font: 500 12px/1.3 var(--e-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--e-ink-2); margin: 40px 0 12px;
}
.esp2 .section-title .meta { font: inherit; color: var(--e-ink-3); }
.esp2 .title-row { align-items: baseline; }

/* Cartes : filet fin, pas d'ombre, pas de liseré d'état. */
.esp2 .card, .esp2 .kpi-card, .esp2 .data-list {
  border: 1px solid var(--e-rule); box-shadow: none; border-radius: 0;
}
.esp2 .card-accent-ok, .esp2 .card-accent-warn, .esp2 .card-accent-err,
.esp2 .kpi-card, .esp2 .kpi-green, .esp2 .kpi-orange, .esp2 .kpi-red, .esp2 .kpi-purple {
  border-inline-start: 1px solid var(--e-rule);
}
.esp2 a.card:hover, .esp2 .kpi-card.card-link:hover { border-color: var(--e-ink-2); }

/* KPI : chiffre en Plex Mono, l'état porté par la couleur du chiffre et un carré. */
.esp2 .kpi-grid { gap: 12px; margin: 20px 0; }
.esp2 .kpi-card { padding: 22px 24px; background: #fff; }
.esp2 .kpi-card .eyebrow { color: var(--e-ink-3); letter-spacing: .1em; display: flex; align-items: center; gap: 8px; }
.esp2 .kpi-card .stat-value, .esp2 .kpi-card .kpi-value {
  font: 500 40px/1 var(--e-mono); letter-spacing: -.02em; color: var(--e-ink); margin: 16px 0 10px;
}
.esp2 .kpi-card .sub { font-size: 14px; color: var(--e-ink-2); }
.esp2 .kpi-card .kpi-ic { color: var(--e-ink-3); }
.esp2 .kpi-card.kpi-orange .eyebrow::before, .esp2 .kpi-card.kpi-red .eyebrow::before {
  content: ""; width: 8px; height: 8px; background: currentColor; flex: none;
}
.esp2 .kpi-card.kpi-orange .eyebrow, .esp2 .kpi-card.kpi-orange .stat-value, .esp2 .kpi-card.kpi-orange .kpi-ic { color: var(--e-warn); }
.esp2 .kpi-card.kpi-red .eyebrow, .esp2 .kpi-card.kpi-red .stat-value, .esp2 .kpi-card.kpi-red .kpi-ic { color: var(--e-err); }
.esp2 .kpi-delta { font: 500 12px/1 var(--e-mono); border-radius: 0; }

/* Prochain concours : la carte du cockpit. */
.esp2 .prochain { padding: 28px; }
.esp2 .prochain-titre { font-family: var(--e-display); font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin: 10px 0 8px; }
.esp2 .prochain .sub { font: 500 13px/1.5 var(--e-mono); color: var(--e-ink-2); letter-spacing: .02em; }
.esp2 .anneau-fond { stroke: #E6EAF0; }
.esp2 .anneau-n { font-family: var(--e-mono); font-weight: 500; fill: var(--e-ink); }
.esp2 .anneau-l { font-family: var(--e-mono); fill: var(--e-ink-3); }
.esp2 .anneau-legende { font-size: 14px; }
.esp2 .anneau-legende b { font-family: var(--e-mono); font-weight: 500; }
.esp2 .anneau-vide { width: 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 132px;
  border: 1px dashed var(--e-rule); color: var(--e-ink-3); font: 500 12px/1.3 var(--e-mono); text-transform: uppercase; letter-spacing: .08em; text-align: center; padding: 12px; }

/* Listes : lignes nettes, dates et chiffres en Plex Mono. */
.esp2 .data-row { padding: 16px 20px; }
.esp2 .data-row .title { font-size: 15px; font-weight: 600; }
.esp2 .data-row .meta { font: 400 12.5px/1.5 var(--e-mono); color: var(--e-ink-3); }
.esp2 .data-list .data-row:hover { background: var(--e-paper); }

/* Pastilles et badges : rectangles, plus de gélules. */
.esp2 .pill, .esp2 .badge {
  border-radius: 0; font: 600 12px/1 var(--e-display); padding: 6px 9px; letter-spacing: 0;
}
.esp2 .pill-ok { background: #E8F5EC; color: var(--e-ok); }
.esp2 .pill-warn { background: #FDF3E4; color: var(--e-warn); }
.esp2 .pill-err { background: #FCECEB; color: var(--e-err); }
.esp2 .pill-info { background: #EAF1FE; color: var(--e-sky-ink); }
.esp2 .pill-neutral { background: #EEF0F4; color: var(--e-ink-2); }

/* Boutons : marine plein (principal) / contour encre (secondaire), 44 px. */
.esp2 .btn { font-family: var(--e-display); font-weight: 600; min-height: 44px; padding-inline: 18px; border-radius: 0; }
.esp2 .btn:hover:not(:disabled) { transform: none; box-shadow: none; filter: none; }
.esp2 .btn-accent, .esp2 .btn-primary { background: var(--e-navy); border: 1px solid var(--e-navy); }
.esp2 .btn-accent:hover:not(:disabled), .esp2 .btn-primary:hover:not(:disabled) { background: #1B2B52; }
.esp2 .btn-outline { border-color: var(--e-ink); color: var(--e-ink); }
.esp2 .btn-outline:hover:not(:disabled) { background: var(--e-ink); color: #fff; }
.esp2 .btn-mini { min-height: 34px; padding-inline: 12px; font-size: 13px; }

/* Onglets et filtres. */
.esp2 .chip { border-radius: 0; font-family: var(--e-display); font-weight: 600; }
.esp2 .chip .n { font-family: var(--e-mono); }

/* Tableaux : en-tête marine en Plex Mono, chiffres alignés. */
.esp2 .table thead th, .esp2 .data-table thead th {
  font: 500 12px/1.2 var(--e-mono); letter-spacing: .08em; text-transform: uppercase; padding: 13px 12px;
}
.esp2 .table td { font-size: 14px; padding: 14px 12px; font-variant-numeric: tabular-nums; }
.esp2 .table td .meta, .esp2 .table .montant { font-family: var(--e-mono); }

/* Alertes et champs. */
.esp2 .alert { border-radius: 0; }
.esp2 .field-input, .esp2 .field-select { border-radius: 0; font-family: var(--e-display); }
.esp2 .field-input:focus, .esp2 .field-select:focus { outline: 2px solid var(--e-sky); outline-offset: -1px; }
.esp2 .mono, .esp2 code { font-family: var(--e-mono); }

@media (max-width: 720px) {
  .esp2 .kpi-card .stat-value { font-size: 34px; }
  .esp2 .prochain { padding: 20px; }
}

/* ══ En-tête ═══════════════════════════════════════════════════════════
   Même marine que le rail : l'en-tête (navy-900 translucide) et le rail (navy-600)
   formaient un « L » en deux tons. Un seul ton, séparé par un filet. */
.site-header.esp2.sombre {
  background: var(--e-navy); backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 1px solid #22335A;
}
.site-header.esp2 .inner { padding-block: 12px; }
.site-header.esp2 .wordmark { font-size: 19px; }
.site-header.esp2 .compte-menu > summary {
  padding: 5px 12px 5px 5px; gap: 12px; border: 1px solid rgba(255, 255, 255, .16);
}
.site-header.esp2 .compte-menu > summary:hover, .site-header.esp2 .compte-menu[open] > summary {
  border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .04);
}
.site-header.esp2 .compte-nom { font-size: 14px; }
.site-header.esp2 .avatar { width: 32px; height: 32px; font-family: var(--e-mono); font-weight: 500; }
/* Menu déroulant : il flotte au-dessus du contenu, il a donc droit à une ombre. */
.site-header.esp2 .compte-liste {
  min-width: 260px; border: 1px solid var(--e-rule); font-family: var(--e-display);
  box-shadow: 0 16px 40px rgba(15, 27, 54, .18);
}
.site-header.esp2 .compte-entete { padding: 16px; gap: 4px; }
.site-header.esp2 .compte-entete strong { font-size: 15px; font-weight: 700; color: var(--e-ink); }
.site-header.esp2 .compte-entete .meta { font: 400 12px/1.4 var(--e-mono); color: var(--e-ink-3); }
.site-header.esp2 .compte-langue { padding: 12px 16px; }
.site-header.esp2 .compte-langue .meta { font: 500 11px/1 var(--e-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--e-ink-3); }
.site-header.esp2 .compte-langue .lang-switch-item { font-family: var(--e-mono); font-weight: 600; }
.site-header.esp2 .compte-langue .lang-switch-item.active { background: var(--e-navy); color: #fff; }
.site-header.esp2 .compte-liste a { padding: 12px 16px; font-size: 14px; color: var(--e-ink); }
.site-header.esp2 .compte-liste a:hover { background: var(--e-paper); }
.site-header.esp2 .compte-liste a.danger { color: var(--e-err); }

/* ══ Rail ══════════════════════════════════════════════════════════════ */
.portal-shell.esp2 .portal-rail { background: var(--e-navy); padding: 20px 12px 40px; }
.portal-shell.esp2 .rail-group {
  font: 500 11px/1 var(--e-mono); letter-spacing: .14em; color: #6F82AD; margin: 26px 0 8px; padding: 0 12px;
}
.portal-shell.esp2 .rail-item {
  margin-bottom: 2px; padding: 11px 12px; gap: 12px;
  font-size: 14px; font-weight: 500; color: #B6C3E2;
  border-inline-start: 2px solid transparent;
}
.portal-shell.esp2 .rail-item svg { width: 18px; height: 18px; opacity: .85; }
.portal-shell.esp2 .rail-item:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.portal-shell.esp2 .rail-item.is-active {
  background: rgba(59, 130, 246, .16); color: #fff; font-weight: 600; border-inline-start-color: var(--e-sky);
}
.portal-shell.esp2 .rail-item.is-active svg { opacity: 1; color: var(--e-sky-soft); }
.portal-shell.esp2 .rail-badge {
  border-radius: 0; font: 500 11px/1.6 var(--e-mono); padding: 0 6px; min-width: 20px;
  background: #1E2C4D; color: #B6C3E2;
}
.portal-shell.esp2 .rail-badge.attn { background: var(--e-sky); color: #fff; }
.portal-shell.esp2 .rail-replier {
  border-top-color: #22335A; font: 500 12px/1 var(--e-mono); letter-spacing: .06em; color: #6F82AD;
}
@media (min-width: 901px) {
  .rail-replie:checked ~ .portal-shell.esp2 .rail-item { padding: 12px 0; }
}

/* ══ Cartes ════════════════════════════════════════════════════════════ */
.esp2 .card { padding: 28px; background: #fff; }
.esp2 .card h2, .esp2 .card h3 { font-family: var(--e-display); font-weight: 700; letter-spacing: -.01em; color: var(--e-ink); }
.esp2 .card h2 { font-size: 22px; }
.esp2 .card h3 { font-size: 18px; }
/* Cartes-liens : à plat, comme la vitrine — le filet fonce, rien ne se soulève. */
.esp2 a.card, .esp2 .card-link { transition: border-color .15s ease, background .15s ease; }
.esp2 a.card:hover, .esp2 .card-link:hover { transform: none; box-shadow: none; border-color: var(--e-ink-2); }
.esp2 .data-row.card-link:hover { background: var(--e-paper); }
/* Bloc mis en avant (« Bien démarrer ») : un fond ciel pâle, sans liseré. */
.esp2 .card-highlight { background: #F3F7FF; border: 1px solid #C9DBFB; border-inline-start: 1px solid #C9DBFB; }
.esp2 .card-highlight .data-row { background: transparent; padding-inline: 0; border-bottom-color: #DCE7FC; }
.esp2 .step-link { color: var(--e-ink); }
.esp2 .step-link:hover { color: var(--e-sky-ink); }
.esp2 .card-reveal { animation-duration: .24s; }
/* Offres d'abonnement. */
.esp2 .offer-card { border: 1px solid var(--e-rule); border-radius: 0; box-shadow: none; padding: 24px; background: #fff; }
.esp2 .offer-card.featured { border: 2px solid var(--e-ink); }
.esp2 .offer-card .name { font-family: var(--e-display); font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.esp2 .offer-card .desc { font-size: 14px; color: var(--e-ink-2); }
/* États vides : cadre pointillé et mention en Plex Mono. */
.esp2 .empty-state { border: 1px dashed #C4CCD8; background: transparent; }
.esp2 .empty-state svg { color: #9AA6BA; }
.esp2 .empty-state .strong { font-size: 17px; }
/* Formulaires. */
.esp2 .field-label { font: 600 13px/1.3 var(--e-display); color: var(--e-ink-2); margin-bottom: 8px; }
.esp2 .field-input, .esp2 .field-select { min-height: 44px; border: 1px solid #C4CCD8; font-size: 15px; }
.esp2 .field-input:hover, .esp2 .field-select:hover { border-color: var(--e-ink-3); }

/* ══ Clôture des engagements (accueil + détail concours) ══════════════════ */
.esp2 .cloture {
  display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 7px 10px;
  font: 500 13px/1.3 var(--e-mono); background: #EEF2F8; color: var(--e-ink-2);
}
.esp2 .cloture::before { content: ""; width: 8px; height: 8px; background: currentColor; flex: none; }
.esp2 .cloture.is-urgent { background: #FDF3E4; color: var(--e-warn); }
.esp2 .cloture.is-close { background: #EEF0F4; color: var(--e-ink-3); }

/* ══ Détail d'un concours : bandeau d'identité + chiffres ═════════════════ */
.esp2 .concours-bandeau {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap;
  padding: 28px 30px; background: var(--e-navy); color: #fff;
}
.esp2 .cb-identite { display: flex; gap: 20px; align-items: flex-start; min-width: 0; }
.esp2 .cb-logo { width: 64px; height: 64px; object-fit: contain; background: #fff; padding: 6px; flex: none; }
.esp2 .cb-texte { min-width: 0; }
.esp2 .cb-etat { display: flex; align-items: center; gap: 12px; margin: 0; font: 500 12px/1 var(--e-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--e-sky-soft); }
.esp2 .cb-pastille { padding: 5px 8px; letter-spacing: .08em; }
.esp2 .cb-pastille.is-publie { background: rgba(59, 130, 246, .22); color: #fff; }
.esp2 .cb-pastille.is-brouillon { background: rgba(255, 255, 255, .1); color: #C9D3E6; }
.esp2 .concours-bandeau h1 { color: #fff; margin: 12px 0 0; font-size: clamp(26px, 3vw, 36px); }
.esp2 .cb-meta { margin: 10px 0 0; font: 500 13px/1.5 var(--e-mono); color: #C9D3E6; }
.esp2 .concours-bandeau .cloture { background: rgba(255, 255, 255, .08); color: #fff; }
.esp2 .concours-bandeau .cloture.is-urgent { background: #FDF3E4; color: var(--e-warn); }
.esp2 .concours-bandeau .cloture.is-close { color: #C9D3E6; }
.esp2 .cb-public {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .35); color: #fff; font-weight: 600; text-decoration: none;
}
.esp2 .cb-public:hover { background: #fff; color: var(--e-navy); }
.esp2 .cb-chiffres {
  display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 24px;
  border: 1px solid var(--e-rule); border-top: 0; background: #fff;
}
.esp2 .cb-chiffres > div { padding: 16px 24px; border-inline-start: 1px solid var(--e-rule); }
.esp2 .cb-chiffres > div:first-child { border-inline-start: 0; }
.esp2 .cb-chiffres span { display: block; font: 500 11px/1 var(--e-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--e-ink-3); }
.esp2 .cb-chiffres b { display: block; margin-top: 10px; font: 500 28px/1 var(--e-mono); color: var(--e-ink); }
.esp2 .cb-chiffres .is-attn b { color: var(--e-warn); }
@media (max-width: 720px) {
  .esp2 .concours-bandeau { padding: 22px 18px; }
  .esp2 .cb-logo { width: 48px; height: 48px; }
  .esp2 .cb-chiffres { grid-template-columns: repeat(2, 1fr); }
  .esp2 .cb-chiffres > div:nth-child(3) { border-inline-start: 0; }
  .esp2 .cb-chiffres > div:nth-child(n+3) { border-top: 1px solid var(--e-rule); }
}

/* ══ Page Accréditations : choix du concours ══════════════════════════════ */
.esp2 .accr-choix { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.esp2 .accr-choix a {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; min-width: 200px;
  background: #fff; border: 1px solid var(--e-rule); color: var(--e-ink); text-decoration: none;
}
.esp2 .accr-choix a small { font: 500 12px/1.2 var(--e-mono); color: var(--e-ink-3); }
.esp2 .accr-choix a:hover { border-color: var(--e-ink-2); }
.esp2 .accr-choix a.actif { background: var(--e-navy); border-color: var(--e-navy); color: #fff; }
.esp2 .accr-choix a.actif small { color: var(--e-sky-soft); }

/* ══ Liste des concours : date en bloc ═══════════════════════════════════ */
.esp2 .concours-ligne { gap: 20px; align-items: center; }
.esp2 .cl-date {
  flex: none; width: 60px; height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--e-navy); color: #fff;
}
.esp2 .cl-jour { font: 500 24px/1 var(--e-mono); }
.esp2 .cl-mois { margin-top: 4px; font: 500 11px/1 var(--e-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--e-sky-soft); }
.esp2 .concours-ligne .title { font-size: 17px; }
.esp2 .cloture--ligne { margin-top: 8px; padding: 5px 8px; font-size: 12px; }

/* ══ Abonnement : carte de licence ═══════════════════════════════════════ */
.esp2 .licence-carte { padding: 0; }
.esp2 .lc-haut { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; padding: 28px; }
.esp2 .lc-formule { margin: 10px 0 0; font: 700 28px/1.1 var(--e-display); letter-spacing: -.02em; color: var(--e-ink); }
.esp2 .lc-echeance { text-align: end; }
.esp2 .lc-echeance span { display: block; font: 500 11px/1 var(--e-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--e-ink-3); }
.esp2 .lc-echeance b { display: block; margin-top: 8px; font: 500 24px/1 var(--e-mono); color: var(--e-ink); }
.esp2 .lc-echeance small { display: inline-block; margin-top: 8px; font: 500 12px/1 var(--e-mono); color: var(--e-ink-3); }
.esp2 .licence-carte.is-bientot .lc-echeance small { padding: 5px 8px; background: #FDF3E4; color: var(--e-warn); }
.esp2 .lc-code {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 28px;
  border-top: 1px solid var(--e-rule); background: var(--e-paper);
}
.esp2 .lc-code span { font: 500 11px/1 var(--e-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--e-ink-3); }
.esp2 .lc-code code { font: 500 17px/1 var(--e-mono); letter-spacing: .06em; color: var(--e-ink); user-select: all; }
.esp2 .lc-code .btn { margin-inline-start: auto; }
@media (max-width: 720px) { .esp2 .lc-echeance { text-align: start; } .esp2 .lc-code .btn { margin-inline-start: 0; } }

/* ══ Titres de cartes (onglets du concours, structure) ═══════════════════
   Les cartes s'ouvraient sur un « text-sm strong » de 13 px : un titre qui ne se
   distinguait pas du texte. */
.esp2 .card > p.text-sm.strong, .esp2 .card > .title-row > p.text-sm.strong,
.esp2 .card > .row-flex > .grow > .text-sm.strong, .esp2 .card > .row-flex > .grow-1 > p.text-sm.strong {
  font: 700 18px/1.25 var(--e-display); letter-spacing: -.01em; color: var(--e-ink); margin: 0 0 6px;
}
.esp2 .card > p.meta.text-sm, .esp2 .card > .row-flex p.meta.text-sm { font-size: 14px; line-height: 1.55; color: var(--e-ink-2); max-width: 75ch; }
.esp2 .card + .card { margin-top: 16px; }
.esp2 details > summary.link { color: var(--e-sky-ink); font-weight: 600; cursor: pointer; }
.esp2 .ep-forfait-montant { font-family: var(--e-mono); }
.esp2 .fee-input { max-width: 140px; font-family: var(--e-mono); }

/* ══ Onglets de page (détail concours) ═════════════════════════════════════
   Une barre blanche, soudée à la bande de chiffres ; sur téléphone elle défile
   au doigt au lieu de passer sur deux lignes. */
.esp2 .page-tabs {
  flex-wrap: nowrap; overflow-x: auto; gap: 0; margin: 0 0 24px; background: #fff;
  border: 1px solid var(--e-rule); border-top: 0; scrollbar-width: none;
}
.esp2 .page-tabs::-webkit-scrollbar { display: none; }
.esp2 .cb-chiffres + .page-tabs { margin-top: -24px; }
.esp2 .page-tab {
  padding: 15px 20px; font: 500 14px/1 var(--e-display); color: var(--e-ink-2);
  border-bottom: 3px solid transparent; margin-bottom: 0;
}
.esp2 .page-tab:hover { color: var(--e-ink); background: var(--e-paper); }
.esp2 .page-tab.is-active { color: var(--e-ink); font-weight: 700; border-bottom-color: var(--e-navy); }

/* ══ Sens de lecture ═══════════════════════════════════════════════════════
   Les flèches de navigation (← retour, → aller) sont des caractères : en arabe elles
   pointaient à contresens. Elles se retournent avec la page. */
html[dir='rtl'] .esp2 .fleche { display: inline-block; transform: scaleX(-1); }
.esp2 .logo-actions { display: flex; gap: 8px; flex: none; }

/* ══ Traitement groupé des engagements ═══════════════════════════════════
   La barre colle en haut à l'écran pendant qu'on coche plus bas dans la liste. */
.esp2 .barre-groupee {
  position: sticky; top: 72px; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: -28px -28px 20px; padding: 12px 28px; background: var(--e-navy); color: #fff;
}
.esp2 .bg-compte { font: 500 13px/1 var(--e-mono); letter-spacing: .04em; margin-inline-end: 8px; }
.esp2 .bg-progression { font: 500 13px/1 var(--e-mono); color: var(--e-sky-soft); }
.esp2 .barre-groupee .btn-accent { background: var(--e-sky); border-color: var(--e-sky); }
.esp2 .barre-groupee .btn-accent:hover:not(:disabled) { background: #2563EB; }
.esp2 .barre-groupee .btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.esp2 .barre-groupee .btn-outline:hover:not(:disabled) { background: #fff; color: var(--e-navy); }
.esp2 .bg-annuler {
  margin-inline-start: auto; background: none; border: 0; padding: 6px 0; cursor: pointer;
  font: 500 13px/1 var(--e-mono); color: #C9D3E6; text-decoration: underline; text-underline-offset: 3px;
}
.esp2 .bg-annuler:hover { color: #fff; }
.esp2 .table .col-choix { width: 40px; text-align: center; padding-inline: 8px; }
.esp2 .table .col-choix input { width: 18px; height: 18px; accent-color: var(--e-navy); cursor: pointer; }
.esp2 .table tr.is-selection td { background: #EEF4FF; }
@media (max-width: 720px) { .esp2 .barre-groupee { top: 64px; } }

/* ══ Visite vétérinaire ══════════════════════════════════════════════════
   Un verdict par cheval en un toucher : trois boutons collés, l'actif prend la
   couleur de son sens (vert accepté, ambre à représenter, rouge refusé). Pensé pour
   une tablette tenue près des boxes : cibles de 40 px. */
.esp2 .visite-chiffres { margin-bottom: 0; border-top: 1px solid var(--e-rule); }
.esp2 .cb-chiffres .is-err b { color: var(--e-err); }
.esp2 .verdicts { display: inline-flex; border: 1px solid var(--e-rule); }
.esp2 .verdict-btn {
  min-height: 40px; padding: 0 12px; border: 0; border-inline-start: 1px solid var(--e-rule);
  background: #fff; color: var(--e-ink-2); font: 600 13px/1 var(--e-display); cursor: pointer; white-space: nowrap;
}
.esp2 .verdict-btn:first-child { border-inline-start: 0; }
.esp2 .verdict-btn:hover:not(:disabled) { background: var(--e-paper); color: var(--e-ink); }
.esp2 .verdict-btn.v-Accepte.is-actif { background: var(--e-ok); color: #fff; }
.esp2 .verdict-btn.v-ARepresenter.is-actif { background: var(--e-warn); color: #fff; }
.esp2 .verdict-btn.v-Refuse.is-actif { background: var(--e-err); color: #fff; }
.esp2 .verdict-btn:focus-visible { outline: 2px solid var(--e-sky); outline-offset: -2px; }
.esp2 tr.verdict-Refuse td { background: #FDF5F4; }
.esp2 tr.verdict-ARepresenter td { background: #FEF9F0; }
.esp2 .visite-liste { padding: 0; }
.esp2 .visite-liste .table-scroll { margin: 0; }

/* ══ Espace cavalier ══════════════════════════════════════════════════════
   Mes engagements : UNE pastille (le statut), puis des lignes secondaires — paiement,
   visite véto, tardif — au lieu de trois pastilles empilées (retour Sofiane 18/09). */
/* Heure de passage publiée (19/09) : le repère du cavalier le jour J. */
.esp2 .passage { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.esp2 .passage-heure { font: 700 18px/1 var(--e-mono); color: var(--e-navy, #1A2E5C); letter-spacing: .02em; }
.esp2 .statut-sec { margin-top: 8px; font: 500 12px/1.3 var(--e-mono); display: flex; align-items: center; gap: 6px; justify-content: center; color: var(--e-ink-2); }
.esp2 .statut-sec::before { content: ""; width: 6px; height: 6px; flex: none; background: currentColor; }
.esp2 .statut-sec.is-ok { color: var(--e-ok); }
.esp2 .statut-sec.is-warn { color: var(--e-warn); }
.esp2 .statut-sec.is-err { color: var(--e-err); }
.esp2 .table .td-resultat .strong { font: 500 16px/1.1 var(--e-mono); }
.esp2 .table .tr-section td { background: var(--e-paper); color: var(--e-ink-2); font: 500 11px/1.2 var(--e-mono); letter-spacing: .12em; }
.esp2 .table .tr-passe td { color: var(--e-ink-3); }
.esp2 .table .tr-passe .strong { color: var(--e-ink-2); }
.esp2 .motif-refus, .esp2 .aide-statut { font-family: var(--e-display); }
.esp2 .link-btn { color: var(--e-sky-ink); font-family: var(--e-display); }
/* Page d'engagement : liste des épreuves, onglets par jour. */
.esp2 .ep-list { border-color: var(--e-rule); }
.esp2 .ep-num { font: 600 13px/1 var(--e-mono); border-radius: 0; }
.esp2 .ep-name { font-family: var(--e-display); font-size: 15px; }
.esp2 .ep-meta, .esp2 .ep-fee, .esp2 .ep-time, .esp2 .ep-h { font-family: var(--e-mono); font-weight: 500; }
.esp2 .ep-day-full { font: 500 12px/1.3 var(--e-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--e-ink-2); }
.esp2 .ep-cal-day { border: 1px solid var(--e-rule); border-radius: 0; background: #fff; }
.esp2 .ep-cal-day .dow, .esp2 .ep-cal-day .cnt { font-family: var(--e-mono); }
.esp2 .ep-cal-day .dnum { font: 500 22px/1 var(--e-mono); }
.esp2 .recap-bar { font-family: var(--e-display); }
.esp2 .recap-bar .btn-accent { background: var(--e-sky); border-color: var(--e-sky); }
.esp2 .cc__note { font: 500 12px/1.3 var(--e-mono); color: var(--e-ink-3); }
@media (max-width: 640px) {
  .esp2 .statut-sec { justify-content: flex-start; }
  .esp2 .table--cards tr { border-color: var(--e-rule); }
  .esp2 .table--cards td[data-label]::before { font: 500 10px/1.4 var(--e-mono); letter-spacing: .1em; color: var(--e-ink-3); }
  .esp2 .table--cards .td-titre { background: var(--e-paper); }
}

/* ══ Accueil « jour de concours » ═════════════════════════════════════════ */
.esp2 .journee { border: 1px solid var(--e-rule); background: #fff; }
.esp2 .journee-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 24px; border-bottom: 1px solid var(--e-rule); }
.esp2 .journee-point { display: inline-block; width: 8px; height: 8px; margin-inline-end: 8px; background: var(--e-sky); animation: cj-pouls 1.6s ease-in-out infinite; vertical-align: middle; }
@keyframes cj-pouls { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .esp2 .journee-point { animation: none; } }
.esp2 .journee-piste { display: grid; grid-template-columns: 1fr auto auto; gap: 24px; align-items: center; padding: 22px 24px; background: var(--e-navy); color: #fff; }
.esp2 .journee-piste .eyebrow { color: var(--e-sky-soft); }
.esp2 .journee-nom { margin: 8px 0 0; font: 700 22px/1.15 var(--e-display); letter-spacing: -.015em; }
.esp2 .journee-avancement { min-width: 150px; }
.esp2 .journee-avancement b { display: block; font: 500 32px/1 var(--e-mono); }
.esp2 .journee-avancement b small { font-size: 16px; color: #C9D3E6; }
.esp2 .journee-avancement span { font: 500 11px/1 var(--e-mono); letter-spacing: .1em; text-transform: uppercase; color: #C9D3E6; }
.esp2 .journee-avancement .jauge { margin-top: 10px; height: 4px; background: rgba(255,255,255,.18); }
.esp2 .journee-avancement .jauge-remplie { height: 100%; background: var(--e-sky); }
.esp2 .journee-piste .btn-outline { border-color: rgba(255,255,255,.4); color: #fff; background: transparent; }
.esp2 .journee-piste .btn-outline:hover { background: #fff; color: var(--e-navy); }
.esp2 .journee-liste { padding: 6px 24px 10px; }
.esp2 .journee-ligne { display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--e-rule); font-size: 14px; }
.esp2 .journee-ligne:last-child { border-bottom: 0; }
.esp2 .journee-heure { font: 500 15px/1 var(--e-mono); }
.esp2 .journee-etat { font: 500 12px/1 var(--e-mono); color: var(--e-ink-3); white-space: nowrap; }
.esp2 .journee-ligne.is-direct .journee-etat { color: var(--e-sky-ink); }
.esp2 .journee-ligne.is-finie { color: var(--e-ink-3); }
.esp2 .journee-ligne.is-finie .journee-etat { color: var(--e-ok); }
@media (max-width: 720px) {
  .esp2 .journee-piste { grid-template-columns: 1fr; gap: 14px; padding: 18px; }
  .esp2 .journee-liste { padding-inline: 18px; }
}

/* ══ Barre du bas (téléphone) ═══════════════════════════════════════════════ */
.barre-mobile { display: none; }
@media (max-width: 900px) {
  .barre-mobile {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
    background: var(--e-navy, #0F1B36); border-top: 1px solid #22335A;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .barre-mobile a {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 4px 8px; color: #B6C3E2; text-decoration: none;
    font: 500 11px/1 var(--e-display, sans-serif); border-top: 2px solid transparent;
  }
  .barre-mobile a svg { width: 22px; height: 22px; }
  .barre-mobile a.is-active { color: #fff; border-top-color: var(--e-sky, #3B82F6); }
  .barre-mobile .bm-badge {
    position: absolute; top: 6px; inset-inline-start: calc(50% + 6px); min-width: 16px; padding: 0 4px;
    background: var(--e-sky, #3B82F6); color: #fff; font: 600 10px/16px var(--e-mono, monospace); text-align: center;
  }
  /* Le contenu et le pied ne passent pas sous la barre. */
  .portal-shell.esp2 .site-main { padding-bottom: 84px; }
  .portal-shell + .site-footer { padding-bottom: 76px; }
}