/* ----------------------------------------------------------------------------
   Veille parlementaire sport — palette Sideline
   Bleu   #122549  (dominante, fonds, titres)
   Rouge  #DA4431  (accents, CTA)
   Crème  #EEE8D1  (arrière-plans)
   Vert   #66A266  (secondaire, validation)
   ---------------------------------------------------------------------------- */
:root {
  --sl-blue: #122549;
  --sl-red:  #DA4431;
  --sl-cream:#EEE8D1;
  --sl-green:#66A266;

  --accent:  var(--sl-blue);
  --accent-2:var(--sl-red);
  --bg:      var(--sl-cream);
  --card:    #ffffff;
  --fg:      #1b2235;
  --muted:   #5c6577;
  --line:    #dfd9c1;        /* séparateur crème un peu plus foncé */
  --radius:  10px;
  --font:    "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-title: "Montserrat", "Inter", "Segoe UI", Arial, sans-serif;
}

/* ----------------------------------------------------------------------------
   Typographie de titres — Montserrat, cohérente sur tout le site.
   H1/H2 : très gras (900) et legèrement condensée (letter-spacing négatif)
   pour le rendu "print-headline" demandé.
   H3/H4 : même famille, weights standard (laissés au défaut du contexte).
   ---------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-title);
}
h1 {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.4px;
  line-height: 1.2;
}
h2 {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.4px;
  line-height: 1.25;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  /* R36-D ter (2026-04-24) : interligne global du body resserré à 1.20
     (demande Cyril). Les H1 (1.2) et H2 (1.25) conservent leur
     line-height explicite ci-dessus — cette règle body ne les impacte
     donc pas. Idem pour les titres d'items (.items li a.title /
     .items li .title.no-link : 1.35) et les titres de cartes dossiers
     (.dosleg-card__title : 1.3). Seuls les paragraphes, listes, meta
     et autres éléments sans line-height explicite héritent de 1.20. */
  line-height: 1.20;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--sl-red); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1280px; margin: 0 auto; padding: 24px; }

/* ---------- Layout principal : central + sidebar ---------------------------
   Structure :
     <main class="container layout layout--split">
       <div class="layout-main"> … </div>
       <aside class="layout-side"> … </aside>
     </main>
   La grille bascule en 1 colonne sous 960px. Le contenu principal garde
   min-width:0 pour ne pas déborder des listes longues.
---------------------------------------------------------------------------- */
.layout {
  display: block;
}
.layout--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: start;
}
.layout-main {
  min-width: 0;
}
.layout-side {
  /* R43-H (2026-05-17) — Sidebar non-sticky : Cyril a remarqué que la
     partie basse de la sidebar était cachée quand celle-ci dépassait la
     hauteur du viewport (sticky au top + contenu trop long = bas
     invisible jusqu'à atteindre le bas du main).
     En non-sticky la sidebar scrolle naturellement avec le main, tout
     son contenu est accessible. */
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
@media (max-width: 960px) {
  .layout--split {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .layout-side {
    order: 2;
  }
}

/* ---------- Header -------------------------------------------------------- */
.site-header {
  background: var(--sl-blue);
  color: var(--sl-cream);
  border-bottom: 4px solid var(--sl-red);
}
.site-header .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding-top: 22px;
  padding-bottom: 18px;
}
.brand {
  color: var(--sl-cream);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}
.brand:hover { text-decoration: none; }
.brand-logo {
  /* R13-J (2026-04-21) : 54 → 90px pour plus de présence visuelle. */
  width: 90px;
  height: 90px;
  flex: 0 0 90px;
  object-fit: contain;
  display: block;
}
.brand-text { display: flex; flex-direction: column; }
.brand-kicker {
  font-size: 11px; letter-spacing: 3px; opacity: .85; font-weight: 600;
  font-family: var(--font-title);
}
.brand-title {
  /* R38-C (2026-04-24) : 22 → 26px (demande Cyril). */
  font-size: 26px; font-weight: 800; margin-top: 3px;
  font-family: var(--font-title);
  line-height: 1.1;
}
.brand-subtitle {
  /* R38-C (2026-04-24) : sous-titre "Sport & Olympisme" en 20px, même
     famille/couleur que .brand-title, poids identique. Aligné avec un
     petit espace vertical pour que les deux lignes respirent sans
     casser le rythme vertical du header. */
  font-size: 20px; font-weight: 800; margin-top: 1px;
  font-family: var(--font-title);
  line-height: 1.1;
}
.brand-tagline {
  font-size: 13px; font-style: italic; color: var(--sl-red);
  margin-top: 3px; font-weight: 500;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  width: 100%;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 10px;
}
.nav a {
  color: var(--sl-cream);
  opacity: .9;
  font-size: 13px;
  font-weight: 500;
  /* R13-J (2026-04-21) : padding homogène pour que le hover rouge
     (qui imite Rechercher) ait une surface cliquable cohérente.
     R15 (2026-04-22) : padding H réduit 10→5px pour que les 9 entrées
     + méta tiennent sur une ligne en viewport desktop standard. */
  padding: 4px 5px;
  border-radius: 4px;
}
/* R13-J : hover rouge (type Rechercher) sur tous les items nav sauf
   .nav-search lui-même (qui a son propre hover inverse). */
.nav a:not(.nav-search):hover {
  opacity: 1;
  color: #fff;
  text-decoration: none;
  background: var(--sl-red);
  border-bottom: 0;
}

/* R13-J : méta version/date dans le header, poussée à droite du menu nav. */
.nav .nav-meta {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  font-style: italic;
  color: rgba(238,232,209,0.75);
  text-align: right;
  line-height: 1.3;
  padding: 2px 4px;
}
.nav .nav-meta-line { margin: 0; padding: 0; }

/* ---------- Hamburger mobile (R21) ---------------------------------------- */
/* Bouton hamburger — masqué sur desktop */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 32px;
  height: 22px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
}
.nav-toggle-bar {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--sl-cream);
  border-radius: 2px;
  transition: opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(9.5px) rotate(45deg);
  transition: transform 0.2s;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-9.5px) rotate(-45deg);
  transition: transform 0.2s;
}

@media (max-width: 640px) {
  /* Logo centré au-dessus du titre */
  .brand {
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
  }
  .brand-logo {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
  }
  .brand-text {
    align-items: center;
  }
  /* R38-C (2026-04-24) : ajustement mobile — on réduit légèrement les
     deux lignes de titre pour éviter le débordement sur iPhone SE / XS. */
  .brand-title { font-size: 22px; }
  .brand-subtitle { font-size: 17px; }

  /* Affiche le bouton hamburger */
  .site-header .container {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  .brand {
    flex: 1 1 auto;
    flex-direction: row;
    text-align: left;
    align-items: center;
  }
  .brand-text { align-items: flex-start; }
  .nav-toggle { display: flex; }

  /* Nav masquée par défaut sur mobile */
  .nav {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    background: rgba(0,0,0,0.15);
    border-radius: 6px;
    padding: 10px 12px;
    gap: 4px;
  }
  .nav.nav--open {
    display: flex;
  }
  .nav a {
    font-size: 15px;
    padding: 6px 8px;
    width: 100%;
  }
  .nav .nav-meta {
    margin-left: 0;
    text-align: left;
    padding: 6px 8px 2px;
  }
}

/* ---------- Home ---------------------------------------------------------- */
/* H3 d'accueil (sous-titre de positionnement) */
.home .page-intro {
  margin: 8px 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  color: var(--sl-blue);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
}

.home .content h2 {
  color: var(--sl-blue);
  border-left: 4px solid var(--sl-red);
  padding: 2px 0 2px 12px;
  margin-top: 40px;
  margin-bottom: 14px;
  /* font-size / font-weight / letter-spacing : hérités de la règle h2 globale
     (28/22 px Montserrat 900, letter-spacing -0.4) */
}
.home .content h3 {
  font-size: 17px;
  color: var(--sl-blue);
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  margin-top: 28px;
}
.home .content h3 a { color: inherit; }
.home .content h3 a:hover { color: var(--sl-red); text-decoration: none; }

/* Liste d'items (markdown -> ul générique) */
.home .content ul {
  list-style: none; padding: 0; margin: 8px 0;
}
.home .content ul li {
  padding: 6px 0 7px;
  border-bottom: 1px solid var(--line);
}
.home .content ul li:last-child { border-bottom: none; }
.home .content ul li a { font-family: var(--font-title); color: var(--sl-blue); font-weight: 600; }
.home .content ul li a:hover { color: var(--sl-red); text-decoration: none; }
.home .content ul li small {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
  font-style: italic;
  line-height: 1.45;
}
.home .content p em { color: var(--muted); }

/* ---------- Badge chambre (AN / Sénat) : inline, coloré -------------- */
/* Base : gris neutre pour valeurs inconnues (Elysee, Matignon, ministères). */
.chamber {
  display: inline-block;
  background: var(--muted);
  color: #fff;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  vertical-align: middle;
}
/* AN (Assemblée nationale) : bleu clair lumineux, plus lisible sur fond crème
   et plus distinct du bleu foncé Sideline utilisé pour les titres. */
.chamber[data-chamber="AN"] {
  background: #20acd9;
  color: #fff;
}
/* Sénat : violet (R13-G 2026-04-21, demande Cyril) — remplace l'ancien
   vert lime, contraste plus élégant avec le bleu AN. */
.chamber[data-chamber="Senat"],
.chamber[data-chamber="Sénat"] {
  background: #a85c9e;
  color: #fff;
}
/* R13-G : MinSports — doré (demande Cyril). Avant : gris --muted par défaut. */
.chamber[data-chamber="MinSports"] {
  background: #d7b800;
  color: #1b2235;
}

/* ----------------------------------------------------------------------- */
/* R25-E (2026-04-23) — Palette couleurs fixes par chamber.
   Avant : seuls AN / Senat / MinSports avaient une couleur dédiée, tout
   le reste retombait sur --muted (gris). Cyril veut des couleurs fixes
   pour chaque badge afin d'améliorer la lisibilité des listings denses.
   Choix visuel :
     * Gouvernement & ministères : gamme bleu marine / marine foncé
       (couleur institutionnelle), nuancée par département.
     * Autorités (AAI + hautes juridictions) : teintes chaudes et
       bordeaux pour trancher avec le gouvernement (rôle contre-pouvoir).
     * Opérateurs publics sport : palette orange / rouge vif (énergie).
     * Mouvement sportif : bleu olympique + paralympique + vert FDSF.
     * JORF / Alpes2030 : vert foncé + bleu montagne.
   Les valeurs peuvent être ajustées plus tard (demande explicite Cyril :
   "Les couleurs doivent être fixées, je les changeraient ensuite"). */

/* ---- Gouvernement ---- */
.chamber[data-chamber="Matignon"]        { background: #1b3b6f; color: #fff; }
.chamber[data-chamber="Elysee"]          { background: #0e2d5a; color: #fff; }
.chamber[data-chamber="MinARMEES"]       { background: #2c5f2d; color: #fff; }
.chamber[data-chamber="MinJUSTICE"]      { background: #7b1e1e; color: #fff; }
.chamber[data-chamber="MinINTERIEUR"]    { background: #424651; color: #fff; }
.chamber[data-chamber="MinCULTURE"]      { background: #b34a6f; color: #fff; }
.chamber[data-chamber="MinEDUCATION"]    { background: #1e5aa8; color: #fff; }
.chamber[data-chamber="MinECO"]          { background: #0d7b68; color: #fff; }
.chamber[data-chamber="MinSANTE"]        { background: #6a4e9e; color: #fff; }
.chamber[data-chamber="MinTRAVAIL"]      { background: #d46b08; color: #fff; }
.chamber[data-chamber="MinAFFAIRES"]     { background: #4a7a96; color: #fff; }
.chamber[data-chamber="MinESR"]          { background: #805ad5; color: #fff; }
.chamber[data-chamber="MinCOHESION"]     { background: #8a4e45; color: #fff; }

/* ---- Autorités administratives indépendantes + hautes juridictions ---- */
.chamber[data-chamber="ARCOM"]           { background: #e56b1f; color: #fff; }
.chamber[data-chamber="ANJ"]             { background: #c3174d; color: #fff; }
.chamber[data-chamber="AdlC"]            { background: #2d5f7f; color: #fff; }
.chamber[data-chamber="CE"]              { background: #314b82; color: #fff; }
.chamber[data-chamber="CC"]              { background: #8b1f3f; color: #fff; }
.chamber[data-chamber="DDD"]             { background: #1d7355; color: #fff; }
.chamber[data-chamber="CourComptes"]     { background: #4a3f2c; color: #fff; }

/* ---- Opérateurs publics sport (ANS, INSEP, INJEP, AFLD) ---- */
.chamber[data-chamber="AFLD"]            { background: #c84a4a; color: #fff; }
.chamber[data-chamber="ANS"]             { background: #eb5f28; color: #fff; }
.chamber[data-chamber="INJEP"]           { background: #008478; color: #fff; }
.chamber[data-chamber="INSEP"]           { background: #e6005b; color: #fff; }

/* ---- Mouvement sportif (CNOSF, CPSF, FDSF) ---- */
.chamber[data-chamber="CNOSF"]           { background: #0055a4; color: #fff; }
.chamber[data-chamber="CPSF"]            { background: #3e7bb7; color: #fff; }
.chamber[data-chamber="FDSF"]            { background: #00a651; color: #fff; }

/* ---- Autres (Alpes2030 COJOP, JORF) ---- */
.chamber[data-chamber="Alpes2030"]       { background: #6c8bc4; color: #fff; }
.chamber[data-chamber="JORF"]            { background: #0d6b40; color: #fff; }

/* ---------- Badge statut procédural (dossiers législatifs) -------------- */
/* Affiche l'étape de navette du dossier : "1ère lecture · commission",
   "CMP", "promulgation", etc. Complète le badge chambre, placé juste après.
   R13-E (2026-04-21) : fond doré + texte crème gras (demande user).
   Le flag promulgated garde un vert distinct pour signaler l'aboutissement. */
.status {
  display: inline-block;
  background: #C9A227;           /* doré Sideline (ambre soutenu) */
  color: #FFF8E1;                /* crème clair pour contraste max */
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  vertical-align: middle;
  margin-left: 2px;
}
.status.status-promulgated {
  background: var(--sl-green);
  color: #fff;
}

/* Méta : la méta-line est sous le titre, mais chambre · date · auteur · tags
   sont TOUS sur la même ligne (wrap naturel si la fenêtre est étroite). */
.item-meta {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 4px;
  margin-left: 0;
  line-height: 1.7;
}
.item-meta .meta-main,
.item-meta .meta-tags {
  display: inline;
}
/* Séparateur visuel entre la meta-main et les tags quand les deux sont
   présents. Pas de séparateur pour un éventuel espace vide. */
.item-meta .meta-tags:not(:empty)::before {
  content: " · ";
  color: var(--muted);
  margin: 0 2px;
}
/* UX-C (2026-04-21) : les dates sont la seule information qui porte la
   couleur rouge Sideline — rouge + gras pour bien les repérer dans la liste.
   Les mots-clés ci-dessous passent en italique/gras sans couleur (ni fond
   ni police) pour ne plus concurrencer visuellement les dates. */
.item-meta .date {
  color: var(--sl-red);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* R42-CK (2026-05-15) — Onglets Question / Réponse sur /items/questions/.
   3 chips d'action sous chaque card : Question / Réponse / Voir sur AN ou Sénat.
   Click sur une chip déplie le panel correspondant ; chip déjà active = ferme.
   Si le texte de la question n'est pas disponible (cas CSV Sénat léger
   sans corps), la chip Question est en aria-disabled et inerte. */
.qa-tabs {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 10px;
}
.qa-chip {
  background: #f1f5f9; color: var(--sl-blue, #122549);
  border: 1.5px solid #cbd5e1;
  padding: 5px 12px; border-radius: 14px;
  font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
  display: inline-flex; align-items: center; gap: 4px;
  text-decoration: none;
  font-family: var(--font, inherit);
}
.qa-chip:hover { background: #dbeafe; border-color: var(--sl-blue, #122549); }
.qa-chip[aria-pressed="true"] {
  background: var(--sl-blue, #122549); color: white;
  border-color: var(--sl-blue, #122549);
}
.qa-chip[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; background: #f8fafc;
}
.qa-chip[aria-disabled="true"]:hover { background: #f8fafc; border-color: #cbd5e1; }
.qa-chip--source {
  background: white; border-color: var(--sl-red, #DA4431);
  color: var(--sl-red, #DA4431);
}
.qa-chip--source:hover {
  background: var(--sl-red, #DA4431); color: white;
  border-color: var(--sl-red, #DA4431);
}
/* R42-CK : variante mini de la chip source — utilisée en inline dans la
   home Markdown (à côté du lien titre interne pour permettre la sortie
   vers AN/Sénat). Plus discrète que la chip pleine taille du listing. */
.qa-chip--mini {
  font-size: 11px; padding: 2px 8px; border-radius: 10px;
  margin-left: 6px; vertical-align: middle;
  border-width: 1px;
}

/* R42-CL (2026-05-15) — Variante « external » : utilisée pour les
   questions au gouvernement où la chip Question/Réponse ne déplie
   PAS un panel mais ouvre directement la fiche AN/Sénat (la réponse
   est une vidéo/CR sur le site officiel, sans texte propre côté
   open data). Visuellement neutre (bleu charte) mais signale le
   départ externe via le caret ↗ dans le label. */
.qa-chip--external {
  background: white; border-color: var(--sl-blue, #122549);
  color: var(--sl-blue, #122549);
}
.qa-chip--external:hover {
  background: var(--sl-blue, #122549); color: white;
}

/* R42-CL (2026-05-15) — Hover très léger sur la card question entière.
   Teinte grisée neutre (Cyril 2026-05-15 : « pas de couleur tape-à-l'œil
   — juste un changement de teinte »). On utilise un gris très clair
   #f1f5f9 (slate-100) qui ne concurrence pas la chambre / la chip
   couleur. Transition douce 0.18s. Le padding/margin négatif élargit
   la zone visible du hover pour englober toute la card (au lieu du
   strict <li> qui se limitait au content). */
.listing--questions .listing-item {
  transition: background-color 0.18s ease-out;
  border-radius: 6px;
  padding: 4px 8px;
  margin: 2px -8px;
}
.listing--questions .listing-item:hover {
  background-color: #f1f5f9;
}

/* R42-CO (2026-05-15) — Grid 2 colonnes auteur | titre : auteur fixe
   en colonne gauche (largeur naturelle = `auto`), titre en colonne
   droite (`1fr` = prend tout l'espace restant). Garantit l'alignement
   vertical du titre quel que soit l'auteur. Cyril a remonté qu'avant
   le titre wrappait sous le séparateur « | » sur certains items et
   restait à droite sur d'autres (incohérent). */
.qq-row-title {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0;
  align-items: baseline;
}
.qq-row-title__auteur {
  white-space: nowrap;
}
.qq-row-title__titre {
  /* Le titre prend la colonne droite ; wrap interne si trop long. */
}
/* Sur mobile très étroit : on bascule en colonne unique (auteur ligne 1,
   titre ligne 2) pour éviter que la grid ne tasse l'auteur. */
@media (max-width: 540px) {
  .qq-row-title {
    grid-template-columns: 1fr;
  }
}

/* R42-CL : double date question→réponse pour les items dont la réponse
   est publiée (date_reponse != date_question). Permet de voir d'un
   coup d'œil le délai de réponse + signale que l'item ressurgit dans
   la fenêtre 1 an parce que la réponse est récente. */
.date-pair {
  display: inline-flex; gap: 5px; align-items: center;
  font-size: 12px;
}
.date-pair__q { color: var(--muted, #5c6577); }
.date-pair__q time { color: inherit; font-weight: 600; }
.date-pair__sep { color: #cbd5e1; font-weight: 700; }
.date-pair__r { color: var(--sl-red, #DA4431); font-weight: 700; }
.date-pair__r .date {
  /* On hérite déjà du rouge — on force juste le poids et un léger
     fond pour signaler « actualité récente : réponse publiée ». */
  background: #fff5f5;
  padding: 1px 5px;
  border-radius: 3px;
}
.qa-panel {
  margin-top: 10px; padding: 14px 16px;
  background: #fafbfc; border-radius: 8px;
  border-left: 3px solid var(--sl-blue, #122549);
  font-size: 13px; line-height: 1.55; color: #1f2937;
}
.qa-panel__content p { margin: 0 0 8px; }
.qa-panel__content p:last-child { margin-bottom: 0; }
.qa-empty {
  color: #64748b; font-style: italic; padding: 4px 0;
}
.qa-empty--reponse {
  color: #92400e; background: #fef3c7;
  padding: 8px 12px; border-radius: 6px; font-style: normal;
}
.qa-empty a { color: var(--sl-blue, #122549); }
/* R42-CK : highlight de la card ciblée par anchor #q-<uid> depuis un
   lien interne (home / autres listings). Subtil pour signaler la
   navigation sans bloquer la lecture. */
.listing-item--highlighted {
  animation: qa-highlight 1.6s ease-out;
}
@keyframes qa-highlight {
  0%   { background: #fef3c7; }
  100% { background: transparent; }
}

/* R42-CI (2026-05-15) — Badge « 📅 À reprogrammer » affiché en lieu et
   place de la date pour un item agenda dont la séance a été reportée
   par l'AN sans nouvelle date communiquée. Couleur orange charte
   (cohérent avec les états "conditionnels" du parcours législatif) +
   léger fond pour distinguer de la date rouge des séances confirmées. */
.item-meta .date--reporte {
  color: #92400e;
  background: #fef3c7;
  padding: 1px 7px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2px;
}

/* ---------- Tags mots-clés (home + listing + détail) -------------------- */
/* UX-C (2026-04-21) — refonte : retrait de la couleur de fond et de la
   couleur de police (réservées aux dates). Les mots-clés conservent juste
   leur empreinte typographique : italique + gras. Les variantes par famille
   data-family sont conservées pour compatibilité DOM mais n'influent plus
   sur le rendu visuel. */
.kw-list {
  display: inline;
  margin: 0;
  line-height: 1.9;
}
.kw-tag {
  display: inline-block;
  background: transparent;
  /* R13-G (2026-04-21) : teinte terracotta demandée par Cyril — contraste
     avec la palette principale (bleu/rouge/crème) sans écraser le texte. */
  color: #8E5A44;
  padding: 0 4px 0 0;
  font-size: 12px;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0;
  /* R13-G : margin supprimée (était 0 2px 0 0). Cyril veut un enchaînement
     plus serré, le séparateur " | " porte déjà l'écart visuel. */
  margin: 0;
  white-space: nowrap;
  vertical-align: baseline;
}
/* Retire tout background des anciens variants data-family (rendu uniforme). */
.kw-tag[data-family] { background: transparent; color: #8E5A44; }
/* Séparateur visuel léger entre mots-clés : barre verticale (R13-B).
   R13-G : margin-left 0 (était -2px pour compenser le margin supprimé
   ci-dessus). */
.kw-tag + .kw-tag::before {
  content: " | ";
  font-style: normal;
  font-weight: 400;
  color: var(--muted);
  margin-left: 0;
}

.snippet-inline {
  color: var(--muted);
  font-style: italic;
  font-size: 13px;
  margin-top: 6px;
  padding-left: 10px;
  border-left: 2px solid var(--line);
}

/* ---------- Listing (liste catégorie) ------------------------------------ */
.listing h1 {
  color: var(--sl-blue);
  font-family: var(--font-title);
}
.listing .intro { color: var(--muted); margin-bottom: 18px; }
.items { list-style: none; padding: 0; margin: 12px 0; }
.items li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.items li a.title {
  font-family: var(--font-title);
  font-weight: 600;
  color: var(--sl-blue);
  font-size: 15.5px;
  /* R36-D (2026-04-24) : léger resserrement des caractères + réduction
     d'interligne sur les titres d'occurrences (demande Cyril). Ne
     concerne QUE les titres d'items, pas les titres de catégorie ni
     les H1/H2 de page. */
  letter-spacing: -0.2px;
  line-height: 1.35;
}
.items li a.title:hover { color: var(--sl-red); text-decoration: none; }
/* Item sans URL publique (ex : réunions AN) : rendu titre en texte simple */
.items li .title.no-link {
  font-family: var(--font-title);
  font-weight: 600;
  color: var(--sl-blue);
  font-size: 15.5px;
  display: inline-block;
  letter-spacing: -0.2px;
  line-height: 1.35;
}
.items .meta {
  color: var(--muted); font-size: 12.5px;
  display: block; margin-top: 4px;
}
.items .snippet-inline {
  color: var(--muted);
  font-style: italic;
  font-size: 13px;
  margin-top: 6px;
  padding-left: 10px;
  border-left: 2px solid var(--line);
}

/* ---------- Page détail (item) ------------------------------------------- */
.breadcrumb {
  font-size: 13px; color: var(--muted); margin-bottom: 16px;
}
.breadcrumb a { color: var(--sl-blue); }
.breadcrumb a:hover { color: var(--sl-red); }

.item h1 {
  color: var(--sl-blue);
  font-family: var(--font-title);
  margin-top: 0;
}
.item .meta { color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.item .meta > * { margin-right: 10px; }
/* .item .chamber hérite de la règle globale .chamber[data-chamber="..."] */

.item .snippet {
  background: #fff;
  border-left: 4px solid var(--sl-red);
  color: #2a2f3d;
  font-size: 16px;
  font-style: italic;
  margin: 18px 0;
  padding: 14px 18px;
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: 0 1px 2px rgba(18,37,73,0.04);
}

.item .kw-block {
  background: rgba(218,68,49,0.06);
  border: 1px solid rgba(218,68,49,0.2);
  padding: 10px 14px;
  border-radius: var(--radius);
  margin: 16px 0 20px;
}
.item .kw-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--sl-red);
  margin-bottom: 6px;
}
.item .tags { list-style: none; padding: 0; margin: 0; }
.item .tags li {
  display: inline-block;
  background: var(--sl-red);
  color: #fff;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  margin: 3px 4px 3px 0;
}

.item .btn {
  display: inline-block;
  background: var(--sl-blue);
  color: var(--sl-cream) !important;
  padding: 10px 18px;
  border-radius: 6px;
  margin-top: 18px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: 2px solid var(--sl-blue);
  transition: background .15s, color .15s, border-color .15s;
}
.item .btn:hover {
  text-decoration: none;
  background: var(--sl-red);
  border-color: var(--sl-red);
  color: #fff !important;
}

/* ---------- Lien auteur (Questions) ---------------------------------- */
.auteur-link {
  color: var(--sl-blue);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  font-weight: 500;
}
.auteur-link:hover {
  color: var(--sl-red);
  text-decoration-style: solid;
}
.auteur-line {
  margin: 2px 0 14px;
  color: var(--muted);
  font-size: 13.5px;
}
.auteur-line .auteur-link,
.auteur-line .auteur-name {
  color: var(--sl-blue);
  font-weight: 600;
}
.auteur-groupe {
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
  margin-left: 4px;
}
/* R23-B (2026-04-23) : curseur d'aide quand le tooltip libellé long
   (title="…") est présent — indique visuellement qu'il y a plus d'info
   au hover. Géré via l'attribut [title] pour ne pas s'afficher sur les
   items Sénat / legacy sans libellé long. */
.auteur-groupe[title] {
  cursor: help;
  border-bottom: 1px dotted var(--muted);
}

/* R23-C (2026-04-23) : portrait parlementaire.
   R23-C4 (2026-04-23) : agrandi à 56x56 avec border-radius 8 pour
   matcher visuellement les logos AN/Senat des cartes dossiers
   législatifs (.dosleg-card__icon). Le <li> parent est passé en
   flex horizontal via .listing-item (colonne gauche photo + body).
   Format carré arrondi demandé par Cyril (border-radius 8px, pas round
   pour éviter l'effet "pastille"). */
.auteur-photo {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
  background: var(--sl-grey-100, #eee);
  /* Petit contour pour lisibilité sur fond clair */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.auteur-photo-lg {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  margin-right: 14px;
}

/* R23-C4 (2026-04-23) : layout deux colonnes pour les items de listing
   (amendements, questions, communiqués, agenda, CR…). Même structure
   visuelle que .dosleg-card (photo/logo en colonne gauche 56x56, body
   à droite). Si .listing-item__photo n'est pas présent (pas de photo
   dispo pour l'item), le body prend toute la largeur naturellement.
   Si la photo 404 côté navigateur, onerror masque .listing-item__photo
   (display:none), même comportement. */
.listing .items > li.listing-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.listing-item__photo {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
}
.listing-item__photo .auteur-photo {
  margin: 0;
}
.listing-item__body {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---------- Pagination inline (listings) ----------------------------- */
.pagination-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 22px 0 6px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.pagination-inline a,
.pagination-inline span {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  text-decoration: none;
  color: var(--sl-blue);
}
.pagination-inline a:hover {
  background: var(--sl-blue);
  color: #fff;
}
.pagination-inline .pg-num {
  min-width: 28px;
  text-align: center;
}
.pagination-inline .pg-current {
  background: var(--sl-red);
  color: #fff;
  font-weight: 700;
}
.pagination-inline .pg-disabled {
  color: #b8bcc8;
}
.pagination-inline .pg-gap {
  color: var(--muted);
  padding: 4px 2px;
}
.pagination-inline .pg-info {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
}
@media (max-width: 640px) {
  .pagination-inline .pg-info { display: none; }
}

/* ---------- Sidebar : cards modulaires (recherche + agenda) -----------
   La sidebar est maintenant gérée par layouts/_default/baseof.html et
   apparaît sur toutes les pages (grille 2 colonnes plus haut). Chaque
   module est une card autonome.
*/
.side-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px 14px;
  box-shadow: 0 1px 3px rgba(18, 37, 73, 0.05);
}

/* R13-J (2026-04-21) : le bloc méta (date MAJ + version) a été déplacé
   dans le header (.nav .nav-meta). .side-meta reste comme no-op pour
   ne pas casser les anciens builds. */
.side-meta { display: none; }

/* R17 (2026-04-22) : module image-only "Sideline Conseil" dans la sidebar.
   Hérite de .side-card pour la bordure + border-radius identiques au module
   Recherche. On annule le padding et on ajoute overflow:hidden pour que
   l'image épouse les angles arrondis. display:block pour que l'ancre prenne
   toute la largeur du module. */
.side-card--brand {
  display: block;
  padding: 0;
  overflow: hidden;
  line-height: 0;               /* supprime le gap inline-block sous l'img */
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.side-card--brand:hover,
.side-card--brand:focus-visible {
  box-shadow: 0 2px 8px rgba(18, 37, 73, 0.12);
  transform: translateY(-1px);
}
.side-card--brand img {
  display: block;
  width: 100%;
  height: auto;
}

/* R42-D (2026-05-10) — Module sidebar « Suivre sur LinkedIn ».
   Charte alignée sur la card Recherche : fond bleu marine #11264b,
   texte crème, Montserrat 900 (extrabold) — demande Cyril. Le bouton
   garde les couleurs LinkedIn officielles (#0A66C2) pour rester
   reconnaissable sur fond foncé. */
.side-card--follow {
  background: #11264b;
  color: var(--sl-cream);
  border-color: #11264b;
  text-align: left;
}
.side-follow-text {
  /* R42-D-quater : margin bottom 0 — le bouton est inline avec le texte
     donc plus besoin d'espace en dessous (gain de hauteur sur le module). */
  margin: 0;
  font-family: var(--font-title), "Montserrat", sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: -0.1px;
  line-height: 1.35;
  color: var(--sl-cream);
}
/* R42-D-ter (2026-05-10) — Bouton custom « Suivre » inline juste après
   le texte d'accroche. Couleurs LinkedIn officielles (#0A66C2 / #004182
   au hover) pour la reconnaissance visuelle, Montserrat 900. Inline-flex
   pour l'alignement icône+label.
   R42-V (2026-05-11) : border-radius fixé à 5px sur demande explicite
   de Cyril — entre l'arrondi pill button d'origine (999px R42-D) et la
   valeur token sidebar (var(--radius) = 10px de R42-K). 5px = arrondi
   discret, visuellement plus compact. */
.side-follow-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
  margin-left: 8px;
  background: #0A66C2;
  color: #ffffff;
  padding: 5px 12px;
  border-radius: 5px;
  font-family: var(--font-title), "Montserrat", sans-serif;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.2px;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.side-follow-btn:hover,
.side-follow-btn:focus-visible {
  background: #004182;
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-1px);
}
.side-follow-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.side-follow-label {
  /* hérite parent — placeholder pour overrides futurs */
}

/* Module recherche dans la sidebar.
   R13-G : plus de gradient (demande Cyril) — fond bleu Sideline uni,
   police crème pour cohérence avec le header.
   R22+ (2026-04-23) : fond ajusté à #11264b (bleu marine plus profond
   que le --sl-blue d'origine) sur demande Cyril. Border + bouton
   alignés sur la même teinte pour conserver l'harmonie visuelle. */
.side-card--search {
  background: #11264b;
  color: var(--sl-cream);
  border-color: #11264b;
}
.side-card--search .side-title {
  color: var(--sl-cream);
}
.side-card--search .side-caption {
  color: rgba(238, 232, 209, 0.75);
}
.side-search {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.side-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: var(--font);
  font-size: 13px;
  background: #fff;
  color: var(--fg);
}
.side-search input[type="search"]:focus {
  outline: 2px solid var(--sl-blue);
  outline-offset: 1px;
  border-color: var(--sl-blue);
}
.side-search button {
  flex: 0 0 36px;
  border: 0;
  border-radius: 6px;
  /* R22+ (2026-04-23) : aligné sur le nouveau fond carte #11264b. */
  background: #11264b;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.side-search button:hover {
  background: var(--sl-red);
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.side-title {
  margin: 0;
  color: var(--sl-blue);
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.2px;
}
.side-caption {
  margin: 2px 0 10px;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}
.side-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.side-item {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  /* R17 (2026-04-22) : centre verticalement la pastille date (courte) par
     rapport au corps titre + cartouche (multi-lignes). Avant, la date
     collait en haut du <li>, mauvaise lisibilité quand le titre fait 3+
     lignes. align-items:center est appliqué à chaque cellule de la grille. */
  align-items: center;
}
.side-item:last-child { border-bottom: 0; }
.side-date time {
  display: inline-block;
  /* R13-G (2026-04-21) : date en fond rouge Sideline (demande Cyril) —
     plus distinctive que l'ancien bleu, cohérent avec la barre
     horizontale rouge sous le header. */
  background: var(--sl-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 3px 0;
  width: 100%;
  text-align: center;
  border-radius: 4px;
}
/* R13-M (2026-04-21) : chamber + titre vraiment inline (flex baseline),
   pas de retour chariot entre les deux. Le titre garde son line-clamp 3
   pour ne pas déborder. */
/* R19-D (2026-04-23) : plus de flex — le badge chambre coule INLINE avec
   le texte du titre (comme un run de texte HTML). line-clamp 3 est porté
   sur .side-body pour tronquer l'ensemble sans jamais casser ligne 1 entre
   le badge et le début du titre. Le badge utilise vertical-align:baseline
   + un padding-y symétrique pour rester aligné sur la ligne de base du titre. */
.side-body {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--fg);
}
.side-body .chamber {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  margin-right: 5px;
  vertical-align: baseline;
}
.side-title-link {
  color: var(--sl-blue);
}
.side-title-link:hover { color: var(--sl-red); }
.side-title-text { color: var(--fg); }
.side-more {
  margin: 10px 0 0;
  text-align: right;
  font-size: 12px;
}
.side-more a { color: var(--sl-blue); font-weight: 600; }
.side-more a:hover { color: var(--sl-red); }
.side-empty {
  color: var(--muted);
  font-style: italic;
  font-size: 13px;
  margin: 6px 0;
}

/* ---------- Listings : Agenda (À venir / Passé) & Comptes rendus ------- */
.empty-state {
  color: var(--muted);
  font-style: italic;
  padding: 10px 0;
}
.agenda-section,
.cr-chamber {
  margin: 22px 0 8px;
  color: var(--sl-blue);
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.2px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--sl-red);
}
.cr-chamber[data-chamber="AN"] { border-bottom-color: var(--sl-blue); }

/* R23-E (2026-04-23) — logo chambre SVG sur la liste des CR (remplace
   le badge texte .chamber sur `comptes_rendus/list.html`). Le logo est
   un carré 22x22 avec un leger border-radius et un filet discret pour
   se detacher sur fond creme. Fallback gracieux : si l'asset 404 (ne
   devrait pas arriver avec les SVG locaux), onerror masque l'img et on
   retombe visuellement sur la date (l'info reste dans le h2.cr-chamber
   de la section). */
.chamber-logo {
  display: inline-block;
  width: 22px;
  height: 22px;
  vertical-align: middle;
  object-fit: contain;
  border-radius: 3px;
  background: #fff;
  padding: 1px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  margin-right: 2px;
}

/* R23-H (2026-04-23) — Filtre par famille de source (5 boutons) en
   tete des listings agenda et communiques. `data-family-source` porte
   le slug de famille sur chaque <li> ; le JS bascule visibility.
   Etat actif : aria-pressed="true" -> fond accent. */
.source-family-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 16px 0;
  padding: 4px 0;
}
.source-family-filter .sff-btn {
  font-family: var(--font);
  font-size: 13px;
  padding: 4px 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  border-radius: 999px;
  cursor: pointer;
  color: var(--text);
  transition: background 120ms ease, border-color 120ms ease;
}
.source-family-filter .sff-btn:hover {
  border-color: rgba(0, 0, 0, 0.24);
}
.source-family-filter .sff-btn[aria-pressed="true"] {
  background: var(--accent, #2b5fa8);
  border-color: var(--accent, #2b5fa8);
  color: #fff;
}
.section-count {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  margin-left: 6px;
  font-family: var(--font);
}
.cr-list { margin-top: 6px; }
.cr-item { }
.cr-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.cr-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--muted);
  color: #fff;
  flex: 0 0 auto;
}
.cr-badge-analytique { background: var(--sl-green); }
.cr-badge-integral   { background: var(--sl-blue); }

/* ---------- Listing : Comptes rendus (R36-N layout carte, R38-D filtres)
   Les `.cr-card` partagent les règles `.dosleg-card` (box, flex, icon,
   body, title, deposit, kws, snippet). R38-D : plus de cartouche
   analytique/intégral demandé par Cyril — les règles `.cr-card__type`
   ont été retirées. À la place, on expose `.cr-card__commission` pour
   les CR hebdomadaires de commission Sénat (R37-A/R38-E). */
.cr-card__commission {
  margin: 2px 0 6px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  font-style: italic;
}
/* R39-H (2026-04-25) — raison du match (bypass organe / flux complet)
   exposée quand l'item n'a pas de keyword thématique visible. Tag
   discret en italique grisé pour signaler "ce CR n'a pas de keyword
   sport explicite mais matche via le périmètre de la commission". */
.cr-card__match-reason,
.match-reason-inline {
  margin: 2px 0 6px;
  font-size: 12.5px;
  color: var(--muted);
  font-style: italic;
  opacity: 0.85;
}

/* R38-D (2026-04-24) — filtres checkboxes sur /items/comptes_rendus/.
   Deux groupes indépendants (chambre × type) présentés côte à côte,
   empilés en vertical sur mobile. Pas d'accent visuel fort pour rester
   cohérent avec le ton sobre du listing.
   R39-F (2026-04-25) : espacement augmenté entre groupes (Cyril) +
   bandeau qui sert de référence largeur pour les cards CR (.cr-list
   reprend la même width via 100% du container parent). */
.cr-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 56px; /* R39-F : 24 → 56 entre groupes Chambre / Type */
  margin: 14px 0 18px;
  padding: 12px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
/* R39-F (2026-04-25) — sur la page CR, on aligne la largeur des cards
   sur celle du bandeau de filtres : les deux occupent 100% de
   `.layout-main` qui est le container parent. Côté `.dosleg-card`
   l'élément <li> a déjà `width:100%` via le `<ul>`, mais on
   confirme explicitement pour éviter les surprises de marge. */
.comptes-rendus .cr-list {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}
.comptes-rendus .cr-list .dosleg-card {
  margin-left: 0;
  margin-right: 0;
}
.cr-filter-group {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}
.cr-filter-group legend {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 13px;
  color: var(--fg);
  margin-right: 8px;
  padding: 0;
}
.cr-filter-group label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--fg);
  user-select: none;
}
.cr-filter-group input[type="checkbox"] {
  accent-color: var(--sl-blue);
  width: 15px;
  height: 15px;
  cursor: pointer;
}
@media (max-width: 640px) {
  .cr-filters { flex-direction: column; gap: 10px; }
}

/* ---------- Listing : Dossiers législatifs (maquette type AN) ---------- */
.dosleg-list .dosleg-card {
  display: flex;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px 16px;
  margin: 14px 0;
  box-shadow: 0 1px 3px rgba(18, 37, 73, 0.04);
}
/* R19-A (2026-04-23) : fond transparent — les PNG officiels AN/Sénat
   portent déjà leur fond institutionnel. Le background coloré de R13-M
   a été retiré à la demande de Cyril. */
.dosleg-card__icon {
  flex: 0 0 56px;
  height: 56px;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dosleg-card__icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.dosleg-card__body {
  flex: 1 1 auto;
  min-width: 0;
}
.dosleg-card__title {
  margin: 0 0 4px;
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  /* R36-D bis (2026-04-24) : Cyril ne veut pas de serrage supplémentaire
     sur ce sélecteur parce que le template rend un <h2> ici. On revient
     aux valeurs de la maquette d'origine (letter-spacing -0.2px, inchangé
     depuis la mise en place du layout cards). Le resserrement demandé en
     R36-D s'applique aux titres d'items plats (.items li a.title et
     .items li .title.no-link) qui sont des <a>/<span>, pas des H2. */
  letter-spacing: -0.2px;
}
.dosleg-card__title a {
  color: var(--sl-blue);
  text-decoration: none;
}
.dosleg-card__title a:hover {
  color: var(--sl-red);
  text-decoration: underline;
}
.dosleg-card__type {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--fg);
  margin: 4px 0 6px;
}
.dosleg-card__deposit {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 4px;
}
/* UX-C : date de dépôt/promulgation en rouge + gras, comme les autres dates. */
.dosleg-card__deposit time {
  color: var(--sl-red);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* R13-E (2026-04-21) : même traitement que .status (fond doré + crème gras)
   pour que les cartes dossiers législatifs soient visuellement cohérentes
   avec la home et la liste. Le flag promulgated passe en vert pour
   signaler l'aboutissement législatif. */
.dosleg-card__status {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 10px;
  background: #C9A227;
  color: #FFF8E1;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2px;
  border-radius: 4px;
}
.dosleg-card__status--promulgated {
  background: var(--sl-green);
  color: #fff;
}
.dosleg-card__kws {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.dosleg-card .snippet-inline {
  margin-top: 8px;
}
.dosleg-card__links {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 18px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.dosleg-card__cta,
.dosleg-card__detail {
  font-size: 13px;
  font-weight: 700;
  color: var(--sl-blue);
  text-decoration: none;
}
.dosleg-card__cta:hover,
.dosleg-card__detail:hover {
  color: var(--sl-red);
  text-decoration: underline;
}
.dosleg-card__detail {
  color: var(--muted);
  font-weight: 600;
}
@media (max-width: 640px) {
  /* R36-C (2026-04-24) : en mobile on garde le logo à gauche et le titre
     à droite (row) plutôt que de basculer en column, qui envoyait le titre
     en dessous du logo et cassait la lecture. Cyril a remonté le
     désalignement le 2026-04-24. On réduit juste le gap et la taille du
     logo pour économiser de la largeur. */
  .dosleg-list .dosleg-card {
    flex-direction: row;
    gap: 12px;
    padding: 14px 14px 12px;
  }
  .dosleg-card__icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    align-self: flex-start;
  }
  .dosleg-card__title {
    font-size: 15.5px;
  }
  .dosleg-card__links {
    justify-content: flex-start;
  }
}

/* ---------- Accueil : thématiques repliables -------------------------- */
.cat-fold {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 10px 0;
  padding: 0;
}
.cat-fold > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--font-title);
}
.cat-fold > summary::-webkit-details-marker { display: none; }
.cat-fold > summary::before {
  content: "▸";
  color: var(--sl-red);
  font-size: 14px;
  transition: transform .15s;
  display: inline-block;
}
.cat-fold[open] > summary::before {
  transform: rotate(90deg);
}
.cat-label {
  font-weight: 800;
  font-size: 17px;
  color: var(--sl-blue);
}
.cat-count {
  background: var(--sl-red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 12px;
  font-family: var(--font);
  letter-spacing: 0.3px;
}
.cat-window {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--font);
  font-style: italic;
}
.cat-all {
  margin-left: auto;
  font-size: 12px;
  font-family: var(--font);
  color: var(--sl-blue);
  text-decoration: none;
  font-weight: 600;
}
.cat-all:hover { color: var(--sl-red); }
.cat-fold > ul,
.cat-fold > p {
  padding: 0 18px 14px 18px;
  margin: 0;
}

/* R41-AF (2026-05-09) — Lien « Voir les XX items dans <catégorie> » en
   pied de chaque section thématique : bold weight 900 (demande Cyril).
   Spécificité préfixée pour battre `.home .content ul li a { color:
   sl-blue }` qui mettait sinon le lien en bleu standard. */
.home .content .cat-fold > p.cat-fold__see-all,
.cat-fold > p.cat-fold__see-all {
  margin: 0;
  padding: 8px 18px 18px;
  border-top: 1px dashed var(--line);
}
.home .content .cat-fold > p.cat-fold__see-all > a,
.cat-fold > p.cat-fold__see-all > a {
  font-family: var(--font-title);
  font-weight: 900;
  font-size: 14px;
  color: var(--sl-blue);
  letter-spacing: -0.2px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.home .content .cat-fold > p.cat-fold__see-all > a:hover,
.cat-fold > p.cat-fold__see-all > a:hover {
  color: var(--sl-red);
  text-decoration: none;
}
.cat-fold__see-all-icon {
  display: inline-block;
  font-size: 16px;
  color: var(--sl-red);
  transform: translateY(0);
  transition: transform .15s ease;
}
.cat-fold > p.cat-fold__see-all > a:hover .cat-fold__see-all-icon {
  transform: translateX(3px);
}
/* Items dépliés dans une thématique : padding interne L/R 18px pour
   éviter que les titres/tags touchent le bord de la carte. Spécificité
   renforcée (.home .content .cat-fold …) pour battre `.home .content ul li`
   qui sans ça annule le padding. */
.home .content .cat-fold > ul li,
.cat-fold > ul li {
  padding-left: 18px;
  padding-right: 18px;
  overflow-wrap: anywhere;
}
/* Tags mots-clés en ligne avec meta-main (cohérent avec listings). */
.home .content .cat-fold > ul li .item-meta .meta-main,
.home .content .cat-fold > ul li .item-meta .meta-tags,
.home .content ul li .item-meta .meta-main,
.home .content ul li .item-meta .meta-tags {
  display: inline;
}

/* ---------- Accueil : section Dernières 24 h (compact, sans tags) --------- */
.recent-24 ul,
.recent-24 > ul {
  margin: 0;
  padding-left: 20px;
}
/* R41-J (2026-05-07) — interligne réduit, padding minimal pour densifier
   l'affichage. Le badge chambre est désormais inline DEVANT le titre. */
.recent-24 ul li {
  padding: 2px 0;
  margin: 0;
  border-bottom: 1px dashed var(--line);
  line-height: 1.25;
}
.recent-24 ul li:last-child { border-bottom: 0; }
.recent-24 .kw-tag { display: none; }
.recent-24 .snippet-inline { display: none; }
/* Badge chambre inline devant le titre : marge à droite pour respirer */
.recent-24 .chamber {
  margin-right: 6px;
  vertical-align: baseline;
}
/* Repli des occurrences au-delà de 5 : <details> sobre, pas de chevron
   custom (laisse le navigateur gérer). Marge top pour séparer la zone
   visible du contenu plié. */
.recent-24 .recent-24-fold {
  margin-top: 6px;
}
.recent-24 .recent-24-fold > summary {
  list-style: none;
  cursor: pointer;
  padding: 4px 0;
  font-size: 13px;
  color: var(--accent-2);
  font-weight: 600;
}
.recent-24 .recent-24-fold > summary::-webkit-details-marker { display: none; }
.recent-24 .recent-24-fold > summary:hover { text-decoration: underline; }
.recent-24 .recent-24-fold[open] > summary { margin-bottom: 4px; }

/* ---------- Dossier législatif : timeline procédurale --------------------- */
.dosleg-timeline {
  margin: 24px 0 28px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.dosleg-timeline h2 {
  margin: 0 0 4px 0;
  color: var(--sl-blue);
  font-size: 18px;
}
.dosleg-timeline .timeline-caption {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 18px 0;
}
.timeline {
  list-style: none;
  padding: 0 0 0 22px;
  margin: 0;
  position: relative;
  border-left: 2px solid var(--line);
}
.timeline-step {
  position: relative;
  padding: 0 0 18px 16px;
}
.timeline-step:last-child { padding-bottom: 0; }
.timeline-marker {
  position: absolute;
  left: -27px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sl-blue);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--sl-blue);
}
.timeline-step[data-institution="Sénat"] .timeline-marker {
  background: var(--sl-red);
  box-shadow: 0 0 0 2px var(--sl-red);
}
.timeline-step--promulgation .timeline-marker {
  background: var(--sl-green);
  box-shadow: 0 0 0 2px var(--sl-green);
  width: 14px;
  height: 14px;
  top: 3px;
  left: -28px;
}
.timeline-step--promulgation {
  background: rgba(102,162,102,0.08);
  border-radius: 6px;
  padding: 6px 10px 8px 16px;
}
.timeline-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 2px;
}
.timeline-date {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--sl-blue);
}
.timeline-inst {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  background: var(--sl-blue);
  color: #fff;
}
.timeline-inst[data-inst="Sénat"] { background: var(--sl-red); }
.timeline-inst[data-inst="CMP"]   { background: #7b5ea0; }
.timeline-inst[data-inst="JORF"]  { background: var(--sl-green); }
.timeline-stage {
  font-style: italic;
  color: var(--muted);
}
.timeline-lib {
  color: var(--fg);
  font-size: 14px;
  line-height: 1.45;
}
.timeline-step--promulgation .timeline-lib {
  font-weight: 700;
  color: #2c5f2c;
}
.timeline-code {
  margin-top: 2px;
  font-size: 11px;
  color: #8891a3;
  font-family: "SFMono-Regular", "Menlo", Consolas, monospace;
  letter-spacing: 0.2px;
}

/* ---------- Footer -------------------------------------------------------- */
.site-footer {
  background: var(--sl-blue);
  border-top: 4px solid var(--sl-red);
  color: var(--sl-cream);
  font-size: 13px;
  padding: 20px 0;
  margin-top: 60px;
}
.site-footer a { color: var(--sl-cream); text-decoration: underline; }
.site-footer a:hover { color: #fff; }
.site-footer .small { font-size: 11px; opacity: .7; }

/* R42-E (2026-05-10) — Footer 2 colonnes : main à gauche, partage à droite.
   Sur mobile (<720px) les colonnes empilent. */
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.site-footer__main {
  flex: 1 1 auto;
  min-width: 0;
}
.site-footer__main p { margin: 0 0 6px; }
.site-footer__share {
  flex: 0 0 auto;
  text-align: right;
}
.site-footer__share-title {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  opacity: 0.85;
}
/* R42-AH (2026-05-11) — Liste générique partagée header + footer (extraite
   du partial share_links.html). Justification = flex-end pour rester collé
   au bord droit aussi bien dans le footer que dans le header. */
.share-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.share-list li { margin: 0; }

/* Boutons de partage : ronds, fond blanc semi-transparent, icône claire,
   couleur de marque au hover. */
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--sl-cream);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.share-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}
.share-btn:hover,
.share-btn:focus-visible {
  transform: translateY(-1px);
  text-decoration: none;
}
/* Couleurs de marque au hover */
.share-btn--facebook:hover,
.share-btn--facebook:focus-visible { background: #1877F2; color: #fff; }
.share-btn--x:hover,
.share-btn--x:focus-visible { background: #000000; color: #fff; }
.share-btn--linkedin:hover,
.share-btn--linkedin:focus-visible { background: #0A66C2; color: #fff; }
.share-btn--mail:hover,
.share-btn--mail:focus-visible { background: var(--sl-red); color: #fff; }

@media (max-width: 720px) {
  .site-footer__share { width: 100%; text-align: left; }
  .site-footer__share .share-list { justify-content: flex-start; }
}

/* R42-AH (2026-05-11) — Bloc partage en haut à droite du header (copie du
   footer), demande Cyril : « également visible en haut à droite dans le
   header sans changer la hauteur du header, aligné horizontalement avec
   sa position dans le footer ».
   - position: absolute pour ne PAS modifier la hauteur du header.
   - right: 24px = padding container, donc même X que le bloc footer.
   - top: 22px = padding-top du container, soit à la même ligne que le
     logo (visuellement collé en haut à droite).
   - Masqué sous 720px (mobile / nav repliée en hamburger). */
.site-header .container { position: relative; }
.site-header__share {
  position: absolute;
  top: 22px;
  right: 24px;
  z-index: 2;
}
@media (max-width: 720px) {
  .site-header__share { display: none; }
}

/* ---------- Page Recherche ----------------------------------------------- */
.search-page h1 {
  color: var(--sl-blue);
  margin: 6px 0 10px;
}
.search-page .page-intro {
  color: var(--muted);
  margin: 0 0 18px;
  font-size: 14px;
}
.search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px 200px;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: 0 1px 3px rgba(18,37,73,0.05);
}
@media (max-width: 720px) {
  .search-form { grid-template-columns: 1fr; }
}
.search-form input[type="search"],
.search-form select {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: var(--font);
  font-size: 14px;
  background: #fff;
  color: var(--fg);
}
.search-form input[type="search"]:focus,
.search-form select:focus {
  outline: 2px solid var(--sl-blue);
  outline-offset: 1px;
  border-color: var(--sl-blue);
}
.search-status {
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
  margin: 14px 2px 8px;
}
.search-results {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.search-result {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px 10px;
  box-shadow: 0 1px 2px rgba(18,37,73,0.04);
}
.search-result .search-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  flex-wrap: wrap;
}
.search-result .search-cat {
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700;
  font-size: 10.5px;
  color: var(--sl-blue);
}
.search-result .search-title {
  margin: 4px 0 6px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.3;
}
.search-result .search-title a {
  color: var(--sl-blue);
}
.search-result .search-title a:hover { color: var(--sl-red); }
.search-result .search-snippet {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 6px;
  line-height: 1.5;
}
.search-result .search-kws {
  margin-top: 4px;
}
.search-more {
  color: var(--muted);
  font-style: italic;
  font-size: 13px;
  text-align: center;
  padding: 12px;
  background: rgba(218,68,49,0.05);
  border-radius: var(--radius);
}

/* Lien recherche dans le header (accent subtil) */
.nav a.nav-search {
  background: var(--sl-red);
  /* R15 (2026-04-22) : padding H aligné sur les autres entrées (5px)
     pour conserver une hauteur visuelle homogène après la refonte. */
  padding: 4px 5px;
  border-radius: 4px;
  opacity: 1;
}
.nav a.nav-search:hover {
  background: #fff;
  color: var(--sl-blue);
  border-bottom: 0;
}

/* R41-W (2026-05-09) — Lien « Spécial PPL Sport pro » dans le menu :
   accent vert (sl-green) pour signaler une page temporaire dédiée à un
   suivi spécifique. Hover rouge (sl-red) comme les autres liens. */
.nav a.nav-special {
  background: var(--sl-green);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: 1;
  font-weight: 700;
}
.nav a.nav-special:hover {
  background: var(--sl-red);
  color: #fff;
  border-bottom: 0;
}

/* R13-J (2026-04-21) : agenda — chambre + titre inline sur la même ligne
   (demande Cyril patch 5).
   R19-E (2026-04-23) : on abandonne flex pour un flux inline. Avec flex +
   flex-wrap, quand le titre ne rentre pas il saute à la ligne ENTIÈREMENT
   sous le badge, créant une ligne 1 "MinSports" + ligne 2 titre. En inline,
   le badge reste collé au début du titre et la suite du titre wrappe
   naturellement sans laisser de blanc sous le badge. */
.agenda-row {
  display: block;
  font-size: 16px;
  line-height: 1.4;
}
.agenda-row .chamber {
  display: inline-block;
  margin-right: 10px;
  vertical-align: baseline;
}
.agenda-row .title {
  display: inline;
}

/* R13-J (2026-04-21) : cartouche blanc arrondi pour chaque occurrence
   dans les pages de listing (questions, amendements, comptes-rendus,
   publications, agenda, JORF, dossiers_legislatifs). Demande Cyril :
   "même largeur d'un fond blanc borduré avec angles arrondis" comme
   les thématiques de la home, mais sans menu dépliable. */
.listing .items > li {
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 0 0 12px;
  box-shadow: 0 1px 3px rgba(18, 37, 73, 0.04);
}
.listing .items { padding-left: 0; }
.listing .items .title {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 700;
  color: var(--sl-blue);
}
.listing .items .title:hover { color: var(--sl-red); }

/* R13-J : date en gras + format long "JJ mois complet AAAA" (demande Cyril).
   Appliqué à toutes les pages de listing. */
.item-meta time.date,
.listing .items .date,
.home .content .date {
  font-weight: 700;
  color: var(--sl-red);
}

/* R13-J : auteur question inline dans le titre, même taille de police.
   Placé AVANT le titre via .auteur-inline.
   R13-L : barre verticale séparateur .auteur-sep entre auteur et titre. */
.auteur-inline {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 600;
  color: var(--sl-blue);
}
.auteur-inline:hover { color: var(--sl-red); }
.auteur-sep {
  color: var(--muted);
  font-weight: 400;
  margin: 0 4px;
}

/* R13-J : chip sort amendement — couleurs sémantiques par valeur.
   - rejeté / irrecevable : rouge / noir
   - adopté : vert
   - non soutenu : gris
   - autre (en discussion, etc.) : bleu Sideline */
.sort-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #fff;
  background: var(--sl-blue);
  margin-left: 4px;
  vertical-align: middle;
}
.sort-chip[data-sort="rejete"],
.sort-chip[data-sort="rejetee"],
.sort-chip[data-sort="rejets"] { background: var(--sl-red); }
.sort-chip[data-sort="adopte"],
.sort-chip[data-sort="adoptee"] { background: var(--sl-green); }
.sort-chip[data-sort="non-soutenu"],
.sort-chip[data-sort="non-soutenue"] { background: var(--muted); }
.sort-chip[data-sort="irrecevable"] { background: #1a1a1a; }
.sort-chip[data-sort="retire"],
.sort-chip[data-sort="retiree"] { background: #8a1a1a; }

/* R13-J : badge "Retiré" pour les dossiers législatifs abandonnés. */
.status[data-status="retire"],
.status.status-retire { background: #8a1a1a; color: #fff; }

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width: 640px) {
  .container { padding: 16px; }
  .site-header .container { flex-direction: column; align-items: flex-start; }
  .nav a:first-child { margin-left: 0; }
  .nav .nav-meta { margin-left: 0; text-align: left; width: 100%; }
  h1 { font-size: 24px; letter-spacing: -0.3px; }
  h2 { font-size: 19px; letter-spacing: -0.3px; }
}

/* ---------- Bannière consentement cookies (GA4) ---------------------------- */
#consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--sl-blue);
  color: #fff;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 -2px 12px rgba(0,0,0,.18);
}
#consent-banner p {
  margin: 0;
  flex: 1 1 260px;
  color: #fff;
}
#consent-banner a {
  color: var(--sl-cream);
  text-decoration: underline;
}
.consent-btn {
  flex-shrink: 0;
  border: none;
  border-radius: 6px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s;
}
.consent-btn:hover { opacity: .85; }
.consent-btn--accept {
  background: var(--sl-red);
  color: #fff;
}
.consent-btn--refuse {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.5);
}
@media (max-width: 640px) {
  #consent-banner { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ============================================================================
   R41-M (2026-05-07) — Module Spécial PPL Sport professionnel
   ============================================================================ */

/* ---------- Accueil : ligne du haut (24h + carte PPL côte à côte) ----------
   R41-N : grid 2/1 (66/33) quand la carte spéciale est présente, 100% sinon.
   Grid plutôt que flex pour gérer proprement les colonnes étroites (la
   colonne main du layout--split peut tomber à ~600px sur écran moyen).
   Les enfants ont min-width: 0 pour autoriser le shrink des contenus longs.
*/
.home .content > .home-row-top--with-special {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
  /* R41-O : align-items: start → la carte spéciale prend la hauteur de
     son contenu, pas celle de la colonne 24h voisine (demande Cyril). */
  align-items: start;
  margin: 0 0 24px;
}
.home-row-top--with-special > .home-col-recent {
  min-width: 0;
}
.home-row-top--with-special > .home-col-recent > h2 {
  margin-top: 0;
}
@media (max-width: 720px) {
  .home .content > .home-row-top--with-special {
    grid-template-columns: 1fr;
  }
}

/* R43-Y.b (2026-05-20) — REVERT du bloc R43-Y (3 modules tiers harmonisés).
   Cyril : « Finalement n'égalise pas la hauteur. Remets dernières
   publications dans son ancien format (sidebar) et le module dernières
   24h prend 2/3 du main ». Retour au layout R41-N (home-row-top--with-special
   2fr 1fr 66/33) défini juste au-dessus. CSS R43-Y retiré pour propreté
   (les classes .home-top-tier / .home-tier-card ne sont plus émises). */

/* ============================================================================
   R43-Y.c (2026-05-20) — Module « Actualité des dernières 24 h » sur la home
   ============================================================================
   Cyril : « le module dernières actualités des 24h, pouvait lui garder son
   nouvel affichage, qui doit être inspiré voir presque copié (sauf que fond
   blanc et couleur de police bleue plutot que l'inverse) du module
   "dernières publications" de la colonne de droite, sauf qu'il est plus
   large. Mais ca doit être les mêmes polices (taille et graisse) et même
   css pour les <UL> et les <LI> ».

   Implémentation : on RÉUTILISE les classes existantes du module sidebar
   publications (`side-card`, `side-card--ppl__head`, `side-card--ppl__kicker`,
   `side-list`, `side-item`, `side-date`, `side-body`, `side-title-link`,
   `side-chamber`) — c'est ce qui garantit que les polices, paddings et
   layout `<ul>`/`<li>` sont strictement identiques (cf. lignes ~979 et
   ~1138-1230 plus haut). Le seul override est la classe variant
   `.side-card--home-recent` qui définit le contraste inversé : fond
   blanc (= défaut .side-card) + texte bleu (= défaut .side-title) +
   kicker rouge (= défaut .side-card--ppl__kicker, inchangé) — la grosse
   différence avec sidebar publications est qu'on N'utilise PAS la classe
   `.side-card--ppl` qui forcerait le fond bleu marine + texte blanc.

   La largeur supplémentaire est donnée par le layout grid 2fr/1fr du
   `.home-row-top--with-special` parent (cf. ligne ~2258), donc rien de
   spécifique à ajouter ici côté largeur — le module s'étire naturellement
   sur la colonne 66% gauche.
   ============================================================================ */
.side-card--home-recent {
  /* fond blanc + bordure légère déjà fournis par .side-card de base */
  background: #fff;
  color: var(--fg);
}
/* R43-Y.d (2026-05-20) — Harmonisation visuelle avec `.special-ppl-card`
   à droite. Cyril : « le cartouche '24h' devient 'Aujourd'hui',
   positionné au-dessus du titre, reprend le CSS du cartouche 'Spécial'.
   Le titre reprend le CSS du titre 'PPL Sport professionnel' sauf
   couleur+background. En dessous : une ligne rouge identique à celle
   sous 'PPL Sport professionnel' ».

   On override les classes héritées de sidebar pubs pour qu'elles
   matchent strictement `.special-ppl-card__head/__kicker/__title` :
   - .side-card--ppl__head → block (pas flex) + border-bottom rouge 2px
     + padding-bottom 8px (identique à .special-ppl-card__head)
   - .side-card--ppl__kicker → font-size 11px, padding 2px 8px,
     letter-spacing 1.2px, margin-bottom 6px (identique à
     .special-ppl-card__kicker)
   - .side-title → font-size 18px, font-weight 800, letter-spacing -0.3px,
     margin 0 (identique à .special-ppl-card__title sauf color qui reste
     en var(--sl-blue) et background qui reste transparent — c'est l'esprit
     « inversé » du module).
*/
.side-card--home-recent .side-card--ppl__head {
  display: block;
  border-bottom: 2px solid var(--sl-red);
  padding-bottom: 8px;
  margin-bottom: 8px;
}
.side-card--home-recent .side-card--ppl__kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  background: var(--sl-red);
  color: #fff;
  padding: 2px 8px;
  border-radius: 3px;
  margin-bottom: 6px;
}
/* R43-Y.e (2026-05-20) — Spécificité plus forte (.home .content
   .side-card--home-recent .side-title) pour battre la règle
   `.home .content h3 { font-size: 17px; border-bottom: 1px solid
   var(--line); padding-bottom: 6px; margin-top: 28px; }` (spécificité
   0,2,1) qui imposait un border-bottom doré-crème (--line: #dfd9c1)
   sous le titre et empêchait l'alignement avec `.special-ppl-card__title`.
   On enforce explicitement border: 0, padding: 0, margin: 0 — c'est
   ce que `.special-ppl-card__title` fait aussi (cf. ligne ~2440). */
.home .content .side-card--home-recent .side-title,
.side-card--home-recent .side-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin: 0;
  padding: 0;
  border: 0;       /* annule border-bottom doré-crème hérité de .home .content h3 */
  background: transparent;
  font-family: var(--font-title);
  /* color: var(--sl-blue) reste hérité du .side-title par défaut. */
}
/* R43-Y.e (2026-05-20) — Le sous-titre "N nouveautés aujourd'hui" est
   désormais DANS le head (AVANT la ligne rouge), avec le CSS de
   `.special-ppl-card__sub` (Cyril : « même police (style, graisse,
   padding, margin, et couleur) que 'Proposition de loi n° 1560 ....',
   ce qui signifie que ce ne sera plus italique »). Couleur dorée
   conservée (préférence Cyril R43-Y.d) — le cream var(--sl-cream)
   du PPL est invisible sur fond blanc, on garde donc #b8860b qui
   joue le même rôle visuel (teinte chaude subtile) sur fond clair. */
.side-card--home-recent .side-caption {
  font-style: normal;            /* plus italic */
  color: #b8860b;
  font-weight: 700;              /* identique à .special-ppl-card__sub */
  font-size: 12px;
  margin: 4px 0 0;               /* margin-top: 4px comme .special-ppl-card__sub */
  padding: 0;
}
/* Items côté home-recent : pas de fond gris pâle (on garde le fond blanc
   transparent comme sur le module side-card "défaut" non-ppl, avec juste
   un border-bottom dashed entre items). Hérite tout du `.side-item` global. */
.side-card--home-recent .side-list .side-item {
  background: transparent;
  /* border-bottom dashed est déjà sur .side-item par défaut */
}
/* Cohérence avec le sidebar publications (cf. .side-card--ppl .side-title-link
   color: var(--fg)) : ici on garde le bleu Sideline pour le titre + hover rouge,
   c'est l'identité « lien » naturelle du module. */
.side-card--home-recent .side-title-link { color: var(--sl-blue); }
.side-card--home-recent .side-title-link:hover { color: var(--sl-red); }
/* Dropdown <details> pour le repli des items 6-10. Style discret cohérent
   avec le reste de la card. */
.side-card--home-recent .side-fold {
  margin-top: 8px;
}
.side-card--home-recent .side-fold > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--sl-blue);
  padding: 6px 8px;
  background: #f3f4f6;
  border-radius: 4px;
  font-weight: 600;
  list-style: none;
}
.side-card--home-recent .side-fold > summary::-webkit-details-marker { display: none; }
.side-card--home-recent .side-fold > summary:hover { background: #e5e7eb; }
.side-card--home-recent .side-fold[open] > summary { margin-bottom: 6px; }
.side-card--home-recent .side-fold > ul.side-list { margin-top: 0; }

/* ---------- Carte « Spécial PPL » (accueil) -------------------------------- */
.special-ppl-card {
  flex: 0 1 38%;
  min-width: 280px;
  background: var(--sl-blue);
  color: #fff;
  border-radius: var(--radius);
  padding: 18px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 2px 10px rgba(18, 37, 73, .12);
}
.special-ppl-card__head { border-bottom: 2px solid var(--sl-red); padding-bottom: 8px; }
.special-ppl-card__kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  background: var(--sl-red);
  color: #fff;
  padding: 2px 8px;
  border-radius: 3px;
  margin-bottom: 6px;
}
/* h3 dans .home .content reçoit color: var(--sl-blue) — on override en blanc
   pour la carte spéciale (la spécificité .special-ppl-card .special-ppl-card__title
   bat le sélecteur global .home .content h3). */
.home .content .special-ppl-card .special-ppl-card__title,
.special-ppl-card__title {
  font-size: 18px;
  font-weight: 800;
  color: #fff !important;
  margin: 0;
  font-family: var(--font-title);
  letter-spacing: -0.3px;
  border: 0;          /* annule border-bottom hérité de .home .content h3 */
  padding: 0;
  background: transparent;
}
/* R42-AS (2026-05-11) — Le titre est désormais un <a> vers la page
   /ppl-sport-professionnel/. On garde la couleur blanche du h3 parent,
   y compris au hover/focus/visited (demande Cyril : aucune variation
   de couleur). Cursor pointer pour l'affordance. */
.special-ppl-card__title-link,
.special-ppl-card__title-link:link,
.special-ppl-card__title-link:visited,
.special-ppl-card__title-link:hover,
.special-ppl-card__title-link:focus,
.special-ppl-card__title-link:active {
  color: #fff !important;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
}
.special-ppl-card__sub {
  font-size: 12px;
  color: var(--sl-cream);
  opacity: 1;
  font-weight: 700;   /* R41-N : sous-titre en bold (demande Cyril) */
  margin-top: 4px;
}
.special-ppl-card__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* R41-V/AA/AB (2026-05-09) : padding UNIFORME sur tous les items blancs
   (next + link + cta).
   IMPORTANT — sélecteur préfixé `.home .content .special-ppl-card …`
   (spécificité 0,4,1) pour BATTRE la règle globale
   `.home .content ul li { padding: 6px 0 7px }` (0,3,0) qui écrasait
   nos paddings dans le contexte de l'accueil et faisait coller le texte
   du `--next` au bord gauche (alors que `--link` avait son padding
   réel sur le `<a>` enfant, ce qui donnait l'effet de désalignement). */
.home .content .special-ppl-card .special-ppl-card__item,
.special-ppl-card .special-ppl-card__item {
  background: #fff;
  color: var(--fg);
  border-radius: 6px;
  padding: 8px 12px;
  border-bottom: 0;       /* annule la bordure héritée de .home .content ul li */
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.special-ppl-card__item .lbl,
.special-ppl-card__item .val {
  margin: 0;
  padding: 0;
}
/* Labels (font 12 / weight 900 / doré) — demande Cyril R41-V */
.special-ppl-card__item .lbl {
  font-size: 12px;
  letter-spacing: 0;
  color: #c9a14a;
  font-weight: 900;
}
.special-ppl-card__item .val {
  line-height: 1.3;
}
/* R41-T (2026-05-09) : prochaine échéance en bleu marine (sl-blue) plutôt
   qu'en rouge — le rouge tranchait avec le fond bleu de la carte et créait
   un point d'attention dissonant. */
.special-ppl-card__item--next .val {
  color: var(--sl-blue);
  font-weight: 600;
  font-size: 13px;
}
/* R41-V (2026-05-09) : cartouche date « JJ/MM » rouge/blanc (style
   sidebar agenda) + préfixe « Commission » / « Séance publique » en bold.
   R42-H (2026-05-10) : terminologie alignée — « publique » (officiel AN/Sénat). */
.special-ppl-card__item--next .val .date-pill {
  display: inline-block;
  background: var(--sl-red);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 4px;
  margin-right: 6px;
  vertical-align: 1px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .3px;
}
/* R42-DC (2026-05-17) — Badge « REP » (Reporté) substitué à la date
   quand l'item agenda a été masqué par les filtres orphan/etat
   (raw._postponed). Gris foncé pour distinguer du badge rouge JJ/MM
   normal — signal que l'événement n'a plus de date confirmée. */
.special-ppl-card__item--next .val .date-pill--postponed {
  background: #6c757d;
  letter-spacing: .5px;
}
.special-ppl-card__item--next .val .kind-prefix {
  display: inline-block;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .5px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--sl-blue);
  color: #fff;
  margin-right: 6px;
  vertical-align: 1px;
}
/* R41-AG : Séance publique (bleu) vs Commission (vert) */
.special-ppl-card__item--next .val .kind-prefix--seance {
  background: var(--sl-blue);
}
.special-ppl-card__item--next .val .kind-prefix--commission {
  background: var(--sl-green);
}
/* R41-T : line-clamp 4 lignes max pour le titre de l'échéance, avec
   ellipsis. Évite de tronquer dur au caractère. */
.special-ppl-card__item .lc-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}
/* R41-T : lien explicite « Voir tous les amendements » sous les compteurs.
   R41-AE (2026-05-09) : sélecteur préfixé `.home .content .special-ppl-card`
   (spécif 0,4,1) — sinon la règle de base `.special-ppl-card__item`
   (préfixée elle aussi pour la même raison) écrase `background: transparent`
   et impose `#fff`. Cyril : le CTA doit être sur fond bleu (carte) pas
   blanc. Idem pour le padding qui doit annuler le 8/12 du --item. */
.home .content .special-ppl-card .special-ppl-card__item--cta,
.special-ppl-card .special-ppl-card__item--cta {
  background: transparent;
  padding: 4px 12px 0;
}
/* R41-AB (2026-05-09) : sélecteur remonté en spécificité (0,4,1) pour
   battre `.home .content ul li a { color: sl-blue }` (0,3,0) qui passait
   le lien en bleu sur fond bleu (invisible). Cyril : blanc en normal,
   rouge au survol. */
.home .content .special-ppl-card .special-ppl-card__item--cta > a,
.special-ppl-card .special-ppl-card__item--cta > a {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  padding: 4px 0;
}
.home .content .special-ppl-card .special-ppl-card__item--cta > a:hover,
.special-ppl-card .special-ppl-card__item--cta > a:hover {
  color: var(--sl-red);
  text-decoration: underline;
}
/* R41-P : items cliquables (Amendements commission/séance → page dédiée).
   R41-AE (2026-05-09) : sélecteur préfixé pour battre la règle de base
   `.special-ppl-card__item { padding: 8px 12px }` qui ajoutait 12px de
   padding sur le `<li>`, doublant avec le 12px du `<a>` → décalage +12px
   par rapport à --next. La règle est `padding: 0` sur le `<li>` et le
   padding visuel uniquement sur le `<a>` enfant. */
.home .content .special-ppl-card .special-ppl-card__item--link,
.special-ppl-card .special-ppl-card__item--link {
  padding: 0;
}
.home .content .special-ppl-card .special-ppl-card__item--link > a,
.special-ppl-card .special-ppl-card__item--link > a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
  transition: background .15s;
}
.special-ppl-card__item--link > a:hover {
  background: var(--sl-cream);
}
.special-ppl-card__item--link > a:hover .val {
  color: var(--sl-red);
}
.special-ppl-card__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.special-ppl-card__btn,
.special-ppl-card__link {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 4px;
  text-decoration: none;
}
.special-ppl-card__btn {
  background: var(--sl-red);
  color: #fff;
}
.special-ppl-card__btn:hover { opacity: .9; }
.special-ppl-card__link {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.4);
}
.special-ppl-card__link:hover { background: rgba(255,255,255,.22); }

/* ---------- Sidebar : bloc « PPL Sport Pro » ------------------------------- */
.side-card--ppl {
  background: var(--sl-blue);
  color: #fff;
}
.side-card--ppl .side-title { color: #fff; margin-top: 0; }
.side-card--ppl .side-caption { color: var(--sl-cream); }
.side-card--ppl__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.side-card--ppl__kicker {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  background: var(--sl-red);
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
}
.side-card--ppl .side-list .side-item {
  background: #fff;
  color: var(--fg);
  border-radius: 4px;
  padding: 6px 8px;
  margin-bottom: 6px;
}
.side-card--ppl .side-date { color: var(--muted); font-size: 11px; }
.side-card--ppl .side-auteur {
  font-weight: 600;
  color: var(--accent);
  font-size: 12px;
  margin-right: 4px;
}
.side-card--ppl .side-title-link { color: var(--fg); text-decoration: none; }
.side-card--ppl .side-title-link:hover { color: var(--sl-red); }
.side-card--ppl .side-more a { color: var(--sl-cream); }

/* ---------- Page dédiée /ppl-sport-professionnel/ -------------------------- */
.ppl-page {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 32px;
  margin: 12px 0;
}
.ppl-page__header {
  border-bottom: 3px solid var(--sl-red);
  padding-bottom: 16px;
  margin-bottom: 22px;
}
.ppl-page__kicker {
  display: inline-block;
  background: var(--sl-blue);
  color: #fff;
  font-size: 11px;
  letter-spacing: 1.2px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 3px;
  margin-bottom: 8px;
}
.ppl-page__header h1 {
  margin: 4px 0 8px;
  font-size: 28px;
  letter-spacing: -0.5px;
}
.ppl-page__lead {
  font-size: 15px;
  color: var(--fg);
  line-height: 1.55;
  margin: 0 0 14px;
}
.ppl-page__links { display: flex; gap: 8px; flex-wrap: wrap; }
.ppl-page__btn {
  display: inline-block;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 5px;
  background: #fff;
  color: var(--accent);
  border: 1px solid var(--accent);
  text-decoration: none;
}
.ppl-page__btn:hover { background: var(--accent); color: #fff; }
.ppl-page__btn--primary {
  background: var(--accent);
  color: #fff;
}
.ppl-page__btn--primary:hover { background: var(--sl-red); border-color: var(--sl-red); }

/* R41-W (2026-05-09) : bouton « Télécharger la liasse PDF » */
.ppl-amdt-liasse {
  margin: 14px 0 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.ppl-page__btn--liasse {
  background: var(--sl-green);
  color: #fff;
  border-color: var(--sl-green);
  font-weight: 700;
}
.ppl-page__btn--liasse:hover {
  background: var(--sl-red);
  color: #fff;
  border-color: var(--sl-red);
}
.ppl-amdt-liasse__hint {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

.ppl-page__section { margin-top: 28px; }
.ppl-page__section h2 {
  font-size: 19px;
  margin: 0 0 12px;
  border-left: 4px solid var(--sl-red);
  padding-left: 10px;
}

/* R41-N : sections amendements en <details> dépliables (page dédiée). */
details.ppl-fold { padding: 0; }
details.ppl-fold > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}
details.ppl-fold > summary::-webkit-details-marker { display: none; }
details.ppl-fold > summary::before {
  content: "▶";
  font-size: 11px;
  color: var(--sl-red);
  transition: transform 0.2s;
  flex: 0 0 auto;
}
details.ppl-fold[open] > summary::before { transform: rotate(90deg); }
details.ppl-fold > summary > h2 {
  display: inline-block;
  margin: 0;
}
details.ppl-fold > summary:hover > h2 { color: var(--sl-red); }
details.ppl-fold[open] > .ppl-amdt-grid,
details.ppl-fold[open] > p {
  margin-top: 14px;
}

/* Timeline étapes */
.ppl-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ppl-timeline__item {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14px;
  flex-wrap: wrap;
}
.ppl-timeline__item:last-child { border-bottom: 0; }
.ppl-timeline__date {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  min-width: 80px;
}
.ppl-timeline__item a { color: var(--accent); text-decoration: none; }
.ppl-timeline__item a:hover { text-decoration: underline; }
/* R41-T/AG : préfixe « Séance publique » / « Commission » devant le label,
   rendu en cartouche coloré inline avec le titre. R41-AG (2026-05-09) :
   chaque kind a sa propre couleur de fond (sl-blue pour Séance publique,
   sl-green pour Commission) — visuellement distinct comme les chambres. */
.ppl-timeline__kind {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  flex: 0 0 auto;
}
/* Couleur dédiée pour Séance publique (bleu marine) vs Commission (vert) */
.ppl-timeline__kind--seance,
.ppl-timeline__kind[data-kind="seance"] { background: var(--sl-blue); }
.ppl-timeline__kind--commission,
.ppl-timeline__kind[data-kind="commission"] { background: var(--sl-green); }

/* R42-G (2026-05-10) : extension du fix mobile R41-AP au desktop —
   demande Cyril « passer en inline des cartouches l'occurrence,
   plutôt qu'à côté, pour que le titre aille à la ligne sous les
   cartouches AN ou Commission ». Le label prend toute la largeur
   restante (flex-basis 100%) et passe en wrap → systématiquement
   sur la 2e ligne, sous les cartouches (date + chambre + kind).
   Avant : `flex: 1 1 0` posait le titre dans une colonne étroite à
   droite des cartouches, lisibilité dégradée. La media query mobile
   R41-AP est supprimée (devenue obsolète, comportement unifié). */
.ppl-timeline__label {
  flex: 1 1 100%;
  min-width: 0;
  color: var(--fg);
  word-wrap: break-word;
}
.ppl-timeline__more {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

/* R41-T : ligne overview 50/50 (Étapes / Rapporteurs) */
.ppl-row-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 24px;
}
.ppl-overview-col { margin-top: 0; }
.ppl-overview-col h2 { margin-top: 0; }
@media (max-width: 720px) {
  .ppl-row-overview { grid-template-columns: 1fr; }
}

/* R41-T : module Rapporteurs */
.ppl-rapporteurs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ppl-rapporteur {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}
.ppl-rapporteur:last-child { border-bottom: 0; }
.ppl-rapporteur__photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--line);
  flex-shrink: 0;
  background: var(--bg);
}
.ppl-rapporteur__name {
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.3;
}
.ppl-rapporteur__name:hover { color: var(--sl-red); }
.ppl-rapporteur__groupe {
  color: var(--muted);
  font-weight: 400;
  font-size: 12px;
  margin-left: 4px;
}

/* Amendements 2 colonnes */
.ppl-amdt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 720px) {
  .ppl-amdt-grid { grid-template-columns: 1fr; }
}
.ppl-amdt-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ppl-amdt-card__head {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.ppl-amdt-card__auteur { color: var(--accent); font-weight: 600; }
.ppl-amdt-card__groupe { color: var(--muted); }
.ppl-amdt-card__date { margin-left: auto; }
.ppl-amdt-card__title {
  color: var(--fg);
  font-weight: 600;
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.4;
}
.ppl-amdt-card__title:hover { color: var(--sl-red); }
.ppl-amdt-card__status {
  font-size: 11px;
  padding: 2px 6px;
  background: var(--accent);
  color: #fff;
  border-radius: 3px;
  align-self: flex-start;
}

/* R41-P : extrait du corps de l'amendement (≤ 400 chars). */
.ppl-amdt-card__extract {
  margin: 4px 0 2px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--fg);
  font-style: italic;
  background: rgba(255,255,255,.6);
  border-left: 2px solid var(--line);
  padding: 4px 8px;
  border-radius: 0 4px 4px 0;
}

/* R41-P : badge de sort (« adopté », « rejeté », etc.). Couleur
   dépendante de la valeur via classes modificateurs. */
.ppl-amdt-card__sort {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--muted);
  color: #fff;
}
.ppl-amdt-card__sort--adopte,
.ppl-amdt-card__sort--adopté { background: var(--sl-green); }
.ppl-amdt-card__sort--rejete,
.ppl-amdt-card__sort--rejeté { background: var(--sl-red); }
.ppl-amdt-card__sort--retire,
.ppl-amdt-card__sort--retiré { background: var(--muted); }
.ppl-amdt-card__sort--irrecevable { background: #8e3a2e; }
.ppl-amdt-card__sort--tombe,
.ppl-amdt-card__sort--tombé { background: #6c757d; }

/* R41-P : widget de filtre par sort. */
.ppl-amdt-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 12px 0 14px;
  padding: 8px 10px;
  background: var(--bg);
  border-radius: 6px;
  border: 1px solid var(--line);
}
.ppl-amdt-filter__label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  margin-right: 4px;
}
.ppl-amdt-filter__btn {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--fg);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background .15s, color .15s, border-color .15s;
}
.ppl-amdt-filter__btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.ppl-amdt-filter__btn.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
/* R41-S : boutons « vides » (compteur 0) — affichés grisés mais
   toujours présents pour montrer l'éventail de filtres possibles. */
.ppl-amdt-filter__btn.is-empty {
  opacity: .5;
  cursor: default;
}
.ppl-amdt-filter__btn.is-empty:hover {
  border-color: var(--line);
  color: var(--fg);
}

/* R41-Q : sub-heading par article (page dédiée). */
.ppl-article-group { margin: 18px 0 10px; }
.ppl-article-group:first-of-type { margin-top: 8px; }
.ppl-article-heading {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--accent);
  margin: 0 0 8px;
  padding: 4px 8px;
  background: var(--bg);
  border-left: 3px solid var(--sl-red);
  border-radius: 0 4px 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ppl-article-heading__count {
  color: var(--muted);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

/* R41-X (2026-05-09) : bouton cliquable sur le label d'article quand
   le texte est disponible. Hover discret, chevron qui pivote à l'ouverture. */
.ppl-article-toggle {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: inherit;
  text-transform: inherit;
}
.ppl-article-toggle:hover { color: var(--sl-red); }
.ppl-article-toggle__label {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.ppl-article-toggle__icon {
  font-size: 11px;
  color: var(--sl-red);
  transition: transform .2s;
  display: inline-block;
}
.ppl-article-toggle.is-open .ppl-article-toggle__icon {
  transform: rotate(180deg);
}
.ppl-article-label { display: inline-block; }

/* R41-AH (2026-05-09) — Lien secondaire « Consulter le texte de
   l'article » à côté du compteur. Italique + casse normale + couleur
   discrète, pour qu'il soit identifiable comme un lien sans concurrencer
   visuellement le label principal de l'article. Hover rouge comme le
   bouton principal. */
.ppl-article-toggle--secondary {
  font-style: italic;
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  margin-left: 4px;
}
.ppl-article-toggle--secondary em {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  font-style: italic;
}
.ppl-article-toggle--secondary:hover {
  color: var(--sl-red);
}
.ppl-article-toggle--secondary.is-open em {
  text-decoration: none;
}

/* R41-X : bloc texte de l'article déplié sous le H3. */
.ppl-article-text {
  margin: -4px 0 14px;
  border-left: 3px solid var(--accent);
  background: #fbfaf3;
  border-radius: 0 6px 6px 0;
}
.ppl-article-text[hidden] { display: none; }
.ppl-article-text__inner {
  padding: 12px 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg);
}
.ppl-article-text__inner p { margin: 0 0 8px; }
.ppl-article-text__inner p:last-child { margin-bottom: 0; }
.ppl-article-text__src {
  font-size: 11.5px;
  color: var(--muted);
  font-style: italic;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--line);
}
.ppl-article-text__src a { color: var(--accent); }

/* Liste comptes rendus liés */
.ppl-list { list-style: none; margin: 0; padding: 0; }
.ppl-list li {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13.5px;
}
.ppl-list li:last-child { border-bottom: 0; }
.ppl-list__date { color: var(--muted); font-size: 12px; min-width: 80px; }
.ppl-list a { color: var(--accent); text-decoration: none; }
.ppl-list a:hover { text-decoration: underline; }