/* textes.lexxika.com — look inspired by the current site: blue #1a85c3, orange #d16412, navy #00456d, cream #fff6f0.
   Accessibility (validated): anything carrying TEXT uses --action (orange buttons), --blue-surface (blue bands) or --link (blue text);
   --blue and --orange stay for decoration only (bars, borders, hover tints).
   Fonts: Montserrat (display), Hind (text, buttons, menu). */
:root {
  --blue: #1a85c3; --blue-surface: #1879b1; --link: #0170b9; --orange: #d16412; --orange-dark: #ab4a00;
  --action: #b5520a; --action-dark: #8f4000; --hover: var(--action); --navy: #00456d;
  --cream: #fff6f0; --grey: #f2f3f5; --ink: #282828; --text: #4b4f58; --muted: #6b7280; --line: #e1e4e8; --bg: #fff;
  --display: Montserrat, system-ui, sans-serif; --body: Hind, system-ui, -apple-system, "Segoe UI", sans-serif;
  --header-h: 70px; --zone-gap: 50px; --title-gap: 45px; --section-gap: 150px;
}
* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + 12px); }
body { margin: 0; font: 400 16px/1.55 var(--body); color: var(--ink); background: var(--bg); }
a { color: var(--link); text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.25; color: var(--ink); }
[hidden] { display: none !important; }

/* ---- Header ---- */
.site-header { position: sticky; top: 0; z-index: 60; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 max(24px, calc((100vw - 1200px) / 2)); background: #fff; border-bottom: 1px solid var(--line); }
body.text-page .site-header, body.search-page .site-header { border-bottom-color: var(--orange); }
.brand img { display: block; height: 38px; width: auto; }
.site-header nav { display: flex; height: 100%; }
.site-header nav a { display: flex; align-items: center; padding: 0 20px; font: 500 14px/1 var(--body); text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 3px solid transparent; margin-top: 3px; }
.site-header nav a:hover { color: var(--hover); }
.site-header nav a[aria-current] { color: var(--hover); border-bottom-color: var(--hover); }  /* page courante : orange, comme au survol */
/* « Connexion » : un bouton orange plein, pour se distinguer des liens du menu (il devient le lien « Mon espace » une fois connecté) */
.site-header nav a.nav-login { align-self: center; margin: 0 0 0 14px; padding: calc(9px + .125em) 18px calc(9px - .125em); border: 0; border-radius: 2px; background: var(--action); color: #fff; transition: background .15s; }
.site-header nav a.nav-login:hover { background: var(--action-dark); color: #fff; }

/* ---- Buttons, inputs ---- */
button, .button { padding: calc(10px + .125em) 18px calc(10px - .125em); border: 0; border-radius: 2px; background: var(--action); color: #fff; font: 500 16px/1.2 var(--body); cursor: pointer; text-decoration: none; display: inline-block; transition: background .15s; }
button:hover, .button:hover { background: var(--action-dark); }
.button-ghost { background: transparent; color: var(--action); border: 1px solid var(--action); }
.button-ghost:hover { background: var(--action); color: #fff; }
input[type=search], input[type=text] { font: 400 16px var(--body); color: var(--ink); background: var(--grey); border: 1px solid transparent; border-radius: 2px; padding: 10px 12px; width: 100%; }
input:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.searchbox { display: flex; max-width: 900px; margin: 0 auto; }
.searchbox input { flex: 1; min-width: 0; }
.searchbox button { border-radius: 0 2px 2px 0; }

/* ---- Home ---- */
.hero { position: relative; display: flex; align-items: center; justify-content: center; min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); background: #6bb7d9 center / cover no-repeat; text-align: center; padding: 40px 16px; }
.hero::before { content: ""; position: absolute; inset: 0; background: rgba(82, 176, 216, .53); }
.hero > div { position: relative; width: min(100%, 1180px); }
.hero .eyebrow { font: 500 18px var(--display); color: #fff; margin: 0 0 6px; }
.hero h1 { font: 700 clamp(30px, 4.2vw, 45px)/1.15 var(--display); color: #fff; margin: 0 0 28px; text-shadow: 0 1px 6px rgba(0,0,0,.18); }
.hero .searchbox { max-width: none; }
.hero .searchbox input { font-size: 18px; padding: 14px 16px; }
.hero .searchbox button { font-size: 18px; padding: .25em 24px 0; }

.section { max-width: 1200px; margin-left: auto; margin-right: auto; padding: 0 10px; }
/* Titre de section (modèle M05) : Montserrat 600 35px, trait bleu 3px sur 25 % de la largeur, à 15px sous le titre */
.section-title, .section h2 { margin: 0; font: 600 35px/45.5px var(--display); text-align: center; color: var(--ink); }
.section-title::after, .section h2::after { content: ""; display: block; width: 25%; height: 3px; background: var(--blue); margin: 15px auto var(--title-gap); }
/* a title alone in its zone (e.g. above the promo band): the zone gap already provides the space */
.section > .section-title:only-child::after { margin-bottom: 0; }
.disciplines { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.disciplines a { display: flex; align-items: center; min-height: 72px; padding: 8px 20px; text-decoration: none; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 2px; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.disciplines a:hover { border-left-color: var(--orange); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.disciplines h3 { margin: 0; font: 500 1.15rem var(--body); }

/* ---- Blue banner (search + text pages) ---- */
.banner { background: var(--blue-surface); color: #fff; text-align: center; padding: 60px 16px 30px; }
.banner .eyebrow { font: 400 18px var(--body); margin: 0; opacity: .95; }
.banner h1, .banner h2 { color: #fff; font: 700 clamp(24px, 3vw, 34px)/1.2 var(--display); margin: 2px 0 18px; }
.banner h1::after, .banner h2::after { content: ""; display: block; width: 90px; height: 2px; background: var(--orange); margin: 10px auto 0; }
.banner .searchbox input { background: var(--grey); }

/* ---- Cards (results, popular) ---- */
.card { padding: 15px 0; }
.card h3 { margin: 0 0 4px; font: 600 1.05rem/1.35 var(--body); }
.card h3 a { color: var(--link); }
.card h3 a:hover { color: var(--hover); }
.meta { margin: 0; color: var(--muted); font-size: .88rem; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.status { font-weight: 600; }
.status-abrogé, .status-périmé { color: #a33a3a; }
.snippet { color: var(--text); font-size: .92rem; margin: 6px 0 0; }
mark { background: #ffe58a; color: #000; padding: 0 1px; } mark.current { background: #ff9f43; }

/* ---- Search page ---- */
body.search-page { background: var(--grey); }
.search-layout { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.results { background: #fff; border-radius: 3px; padding: 50px clamp(24px, 4.3vw, 60px) 80px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.filters fieldset { border: 0; padding: 0; margin: 14px 0; }
.filters legend { font: 600 .95rem var(--body); color: var(--ink); padding: 0; margin-bottom: 4px; }
.filters label { display: block; padding: 2px 0; font-size: .92rem; }
.filters .count { color: var(--muted); }
.filters .scroll { max-height: 18rem; overflow: auto; }
.filters .two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.filters .dates { display: flex; align-items: flex-end; gap: 8px; }
.filters .dates input { width: 7.6rem; padding: 8px; font-size: .9rem; }
.filters .actions-row { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 14px; }
.results h1 { font: 700 1.6rem var(--display); margin: 0 0 4px; }
.results h2 { font: 500 1.05rem var(--body); color: var(--text); margin: 0 0 4px; }
.empty .searchbox { margin: 12px 0 24px; }

/* ---- Text page ---- */
body.text-page { background: var(--grey); }
.text-layout { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: start; position: relative; overflow-x: clip; }
.sidebar { width: 300px; padding: 18px 16px; position: sticky; top: var(--header-h); max-height: calc(100vh - var(--header-h)); overflow: auto; background: #fff; font-size: .9rem; transition: margin .2s, transform .2s; }
.sidebar-left { border-right: 1px solid var(--orange); }
.sidebar-right { border-left: 1px solid var(--orange); border-bottom: 1px solid var(--orange); }
.sidebar-left.hide_sidebar { margin-left: -300px; }
.sidebar-right.hide_sidebar_right { margin-right: -300px; }
.sidebar h4 { margin: 18px 0 8px; font: 600 1.25rem var(--body); color: var(--ink); }
.sidebar h6 { margin: 12px 0 4px; font: 600 .95rem var(--body); color: var(--ink); }
.sidebar > h4:first-child { margin-top: 0; }
.slider { position: sticky; top: 45vh; width: 22px; height: 64px; padding: 0; background: var(--action); color: #fff; border-radius: 0 6px 6px 0; align-self: start; font-size: 14px; }
.slider-right { border-radius: 6px 0 0 6px; }
.document { background: #fff; padding: 28px 64px 80px; margin: 24px auto; max-width: 900px; width: calc(100% - 32px); border-radius: 3px; box-shadow: 0 2px 16px rgba(0, 0, 0, .14), 0 1px 3px rgba(0, 0, 0, .08); }
.breadcrumb { color: var(--muted); font-size: .88rem; margin: 0 0 6px; }
.document h1 { font: 700 1.7rem/1.25 var(--display); margin: 0 0 16px; }
.meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 24px; margin: 16px 0; padding: 14px 16px; background: var(--grey); border-radius: 3px; }
.meta-grid dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.meta-grid dd { margin: 0; font-weight: 500; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 14px 0; align-items: center; }
.accordion { border: 1px solid var(--line); border-radius: 3px; margin: 8px 0; padding: 8px 14px; }
.accordion summary { cursor: pointer; font-weight: 600; color: var(--link); }
.legal-text { font: 400 16px/1.47 var(--body); color: var(--ink); }
.legal-text :is(h1, h2, h3, h4, h5, h6) { font-family: var(--body); color: var(--ink); }
/* Exception à la règle « titres en noir » : les titres du texte de loi (h1 à h6 et paragraphes heading_7 à heading_9) sont en bleu, plus lisibles dans un long texte */
.legal-text :is(h1, h2, h3, h4, h5, h6, p.heading_7, p.heading_8, p.heading_9) { color: var(--link); }
/* Taille des titres : calculée pour chaque texte selon le nombre de niveaux utilisés (voir heading_scale) et passée en variables --hs-N ; le dernier niveau vaut toujours 1em */
.legal-text h1 { font-size: var(--hs-1, 1.6em); } .legal-text h2 { font-size: var(--hs-2, 1.35em); } .legal-text h3 { font-size: var(--hs-3, 1.2em); }
.legal-text h4 { font-size: var(--hs-4, 1.1em); } .legal-text h5 { font-size: var(--hs-5, 1.05em); } .legal-text h6 { font-size: var(--hs-6, 1em); }
.legal-text :is(p.heading_7, p.heading_8, p.heading_9) { font-weight: 700; line-height: 1.35; }
.legal-text p.heading_7 { font-size: var(--hs-7, 1em); } .legal-text p.heading_8 { font-size: var(--hs-8, 1em); } .legal-text p.heading_9 { font-size: var(--hs-9, 1em); }
.legal-text table { border-collapse: collapse; max-width: 100%; display: block; overflow-x: auto; }
.legal-text td, .legal-text th { border: 1px solid var(--line); padding: 4px 8px; }
.notice { background: var(--cream); padding: 12px 16px; border-radius: 3px; }
.linked-documents h2 { font: 700 1.3rem var(--display); color: var(--ink); }
.linked-document-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.doc-actions { display: flex; gap: 14px; align-items: center; }
.find { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.find input { flex: 1; }
.find button { padding: 8px 12px; }
.find small { width: 100%; color: var(--muted); }
.sidebar .promo { position: relative; margin: 20px 0 0; padding: 18px 16px; color: #fff; background: #ab4a00 url("/static/img/promo.jpg") center / cover; border-radius: 3px; overflow: hidden; }
.sidebar .promo::before { content: ""; position: absolute; inset: 0; background: rgba(171, 74, 0, .85); }
.sidebar .promo > * { position: relative; }
.sidebar .promo h2 { color: #fff; font: 600 .95rem/1.35 var(--display); margin: 0 0 12px; }
.sidebar .promo .button { font-size: .85rem; text-transform: uppercase; border: 1px solid #fff; }

/* ---- Table of contents ---- */
.toc-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.toc-head h4 { margin: 0 auto 0 0; }
.pill { padding: calc(3px + .125em) 10px calc(3px - .125em); font-size: .78rem; border-radius: 3px; }
.pill-alt { background: var(--link); } .pill-alt:hover { background: var(--navy); }
.toc { padding-left: 0; list-style: none; margin: 0; }
.toc li { position: relative; margin: 1px 0; }
.toc a { display: block; padding: 2px 4px; border-radius: 3px; text-decoration: none; line-height: 1.35; font-size: .82rem; color: var(--link); }
.toc .lvl2 { padding-left: 12px; } .toc .lvl3 { padding-left: 24px; } .toc .lvl4 { padding-left: 36px; }
.toc a:hover { color: var(--hover); }
.toc li.current > a { background: color-mix(in srgb, var(--blue) 16%, transparent); font-weight: 600; box-shadow: inset 3px 0 0 var(--orange); }
.toc li.flash > a { animation: flash 1.2s ease-out; }
@keyframes flash { from { background: #ffd27a; } to { background: transparent; } }
.toc-toggle { position: absolute; left: 0; top: 1px; width: 18px; height: 18px; padding: 0; line-height: 16px; font-size: 14px; border-radius: 3px; background: transparent; color: var(--action); }
.toc-toggle:hover { background: var(--cream); }
.toc.tree li { padding-left: 16px; }
.toc.tree li.lvl3 { padding-left: 28px; } .toc.tree li.lvl4 { padding-left: 40px; }
.toc.tree li.lvl3 .toc-toggle { left: 12px; } .toc.tree li.lvl4 .toc-toggle { left: 24px; }

/* ---- Back to top, mobile bar ---- */
#to-top { position: fixed; right: 18px; bottom: 18px; width: 46px; height: 46px; border-radius: 50%; padding: 0; font-size: 22px; box-shadow: 0 2px 8px rgba(0,0,0,.25); z-index: 30; }
.text-layout:has(.sidebar-right:not(.hide_sidebar_right)) ~ #to-top { right: 318px; }
.mobile-bar { display: none; }
#drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 70; }

/* ---- Footer ---- */
.site-footer { background: var(--navy); color: #cfe3f0; margin-top: 0; padding: 40px 24px 16px; font-size: .92rem; }
.site-footer a { color: #cfe3f0; } .site-footer a:hover { color: #fff; }
.site-footer strong { color: #fff; font: 600 1.05rem var(--display); display: block; margin: 0 0 8px; }
.site-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 32px; max-width: 1200px; margin: 0 auto; }
.site-footer ul { list-style: none; padding: 0; margin: 0 0 16px; } .site-footer li { margin: 4px 0; }
.footer-logo { display: block; margin-bottom: 12px; }
.copy { text-align: center; opacity: .75; border-top: 1px solid rgba(255,255,255,.15); margin: 28px auto 0; padding-top: 14px; max-width: 1200px; }
.narrow { max-width: 900px; margin: 0 auto; padding: 24px 16px; }
.notfound .searchbox { margin-top: 16px; }

@media (max-width: 900px) {
  :root { --header-h: 58px; }
  .site-header { padding: 0 12px; gap: 8px; }
  .brand img { height: 30px; }
  .site-header nav { overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .site-header nav a { padding: 0 10px; font-size: 12px; }
  .site-header nav a.nav-login { order: -1; margin: 0 6px 0 0; padding: calc(7px + .125em) 12px calc(7px - .125em); }  /* le menu défile : le bouton passe en premier pour rester visible */
  .search-layout { padding: 0 8px; }
  .site-footer .cols { grid-template-columns: 1fr; }
  .mobile-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; background: #fff; border-top: 1px solid var(--line); padding: 8px; gap: 8px; }
  .mobile-bar button { flex: 1; padding: calc(12px + .125em) 12px calc(12px - .125em); }
  body.text-page { padding-bottom: 64px; }
  .text-layout { display: block; }
  .document { padding: 18px 16px 28px; margin: 12px 8px; width: auto; }
  .document h1 { font-size: 1.35rem; }
  .meta-grid { grid-template-columns: 1fr 1fr; gap: 6px 16px; }
  .sidebar { position: fixed !important; top: 0; bottom: 0; z-index: 80; width: min(88vw, 360px) !important; max-height: none !important; margin: 0 !important; padding-bottom: 80px; box-shadow: 0 0 24px rgba(0,0,0,.35); transform: translateX(-105%); }
  .sidebar-right { right: 0; left: auto; transform: translateX(105%); }
  .sidebar-left { left: 0; }
  .sidebar.open { transform: translateX(0) !important; }
  .slider { display: none; }
  #to-top, .text-layout:has(.sidebar-right:not(.hide_sidebar_right)) ~ #to-top { right: 14px; bottom: 76px; }
}
@media print {
  .site-header, .site-footer, .sidebar, .slider, .actions, .linked-documents, .accordion, .banner, .info-band, #to-top, .mobile-bar { display: none !important; }
  body { background: #fff; } .text-layout { display: block; } .document { box-shadow: none; padding: 0; max-width: none; margin: 0; width: auto; }
}

/* Home hero fills the screen exactly (header excluded), on every device, like a search-engine landing page */
.hero { padding-bottom: 72px; }
.hero-more { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(255,255,255,.18); text-decoration: none; font-size: 22px; animation: nudge 2.2s ease-in-out infinite; }
.hero-more:hover { background: rgba(255,255,255,.32); }
@keyframes nudge { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
@media (prefers-reduced-motion: reduce) { .hero-more { animation: none; } }

@media (max-width: 520px) {
  .searchbox { flex-direction: column; gap: 8px; }
  .searchbox button { border-radius: 2px; padding: calc(12px + .125em) 12px calc(12px - .125em); }
  .hero .searchbox button { padding: calc(12px + .125em) 12px calc(12px - .125em); }
}

/* ---- Zones: every block of a page is a "zone", separated by --zone-gap ---- */
.zone + .zone, .site-footer { margin-top: var(--zone-gap); }

/* ---- Modèle « Bandeau d'information » (info_band) ----
   Valeurs relevées sur le site actuel : fond #fff6f0, padding 60/80, conteneur 1200, colonne titre 393,
   barre orange 4px autour du TITRE seul, sous-titre au-dessus (Montserrat 20/600), texte Hind 16/24.75 en 2 colonnes de 378. */
.info-band { background: var(--cream); padding: 60px 24px 80px; }
.info-band .inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 393px) minmax(0, 1fr); align-items: start; }
.info-band .head { padding: 11px 0; }
.info-band .subtitle { margin: 0 0 0 34px; font: 600 20px/24px var(--display); color: #565656; }
.info-band .title { margin: 0; border-left: 4px solid var(--orange); padding-left: 30px; font: 600 35px/1.3 var(--display); color: var(--ink); }
.info-band .text { display: grid; grid-template-columns: repeat(2, minmax(0, 378px)); gap: 0 16px; font: 400 16px/1.547 var(--body); color: var(--ink); }
.info-band .text p { margin: 0; }
.info-band .text a { color: var(--link); font-weight: 600; }
.info-band .text a:hover, .info-band .text a:focus-visible { color: var(--hover); }
.info-band.compact { padding: 10px 16px; }
.info-band.compact .inner { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 0 24px; align-items: center; }
.info-band.compact .head { padding: 0; }
.info-band.compact .subtitle { display: none; }
.info-band.compact .title { border-left-width: 3px; padding-left: 12px; font-size: 1rem; line-height: 1.3; }
.info-band.compact .text { font-size: .8rem; line-height: 1.45; gap: 4px 24px; }
@media (max-width: 900px) {
  .info-band { padding: 50px 10px; }
  .info-band .inner, .info-band.compact .inner { grid-template-columns: 1fr; }
  .info-band .head { padding: 0 0 29px; }
  .info-band .subtitle { margin-left: 14px; font-size: 15px; line-height: 18px; }
  .info-band .title { padding-left: 10px; font-size: 25px; line-height: 32.5px; }
  .info-band .text { grid-template-columns: 1fr; gap: 23px; padding-bottom: 23px; font-size: 14px; line-height: 1.61; }
  .info-band.compact { padding: 10px 12px; }
  .info-band.compact .head { padding: 0 0 6px; }
  .info-band.compact .title { font-size: 1rem; line-height: 1.3; }
  .info-band.compact .text { gap: 6px; font-size: .75rem; line-height: 1.45; }
}

/* ---- Catalogue des modèles (/modeles) ---- */
.catalogue-page { max-width: 1100px; margin: 0 auto; padding: 32px 16px 64px; }
.catalogue-page h1 { font: 700 2rem var(--display); margin: 0 0 8px; }
.catalogue-page .lead { color: var(--text); max-width: 760px; }
.toc-models { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 8px; }
.toc-models a { text-decoration: none; background: var(--grey); border-radius: 3px; padding: 4px 10px; font-size: .88rem; color: var(--ink); }
.toc-models a:hover { background: var(--cream); } .toc-models b { color: var(--action); }
.model { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.model h2 { font: 600 1.35rem var(--display); margin: 0 0 6px; }
.model .badge { display: inline-block; background: var(--navy); color: #fff; font: 600 .8rem var(--body); padding: 2px 8px; border-radius: 3px; vertical-align: middle; }
.model-desc { margin: 4px 0; max-width: 860px; }
.model-meta { display: flex; flex-wrap: wrap; gap: 4px 24px; color: var(--muted); font-size: .85rem; margin: 4px 0 14px; }
.model-meta code { background: var(--grey); padding: 1px 6px; border-radius: 3px; }
.model-demo { border: 1px dashed #b9c4cf; border-radius: 4px; overflow: hidden; background: #fff; }
.model-demo .hero { min-height: 340px; padding-bottom: 24px; } .model-demo .hero-more { display: none; }
.model-demo .section { padding-top: 20px; padding-bottom: 8px; }
.model-demo .info-band, .model-demo .banner, .model-demo .promo-box { margin: 24px auto; width: calc(100% - 48px); }
.model-demo > p { margin: 14px; }
.model-demo .accordion { margin: 10px 14px; }

/* ---- Charte graphique (/charte) ---- */
.charte .chap { font: 700 1.6rem var(--display); margin: 56px 0 8px; padding-top: 20px; border-top: 1px solid var(--line); }
.charte h3 { font: 600 1.05rem var(--body); color: var(--ink); margin: 24px 0 8px; }
.small-note { color: var(--muted); font-size: .9rem; margin: 0 0 10px; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.swatch { display: flex; flex-direction: column; gap: 3px; font-size: .9rem; }
.swatch .chip-color { height: 64px; border-radius: 3px; border: 1px solid rgba(0,0,0,.12); }
.swatch small { color: var(--muted); line-height: 1.35; }
.swatch code, .charte code { background: var(--grey); padding: 0 5px; border-radius: 3px; font-size: .82rem; }
.tag { display: inline-block; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; padding: 1px 7px; border-radius: 999px; width: fit-content; }
.tag-actuel { background: var(--grey); color: var(--text); }
.tag-proposé { background: #fde7d3; color: #8f4000; font-weight: 600; }
table.spec { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.spec th, table.spec td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.spec .sample { display: inline-block; padding: 6px 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,.1); }
table.spec .ok { color: #1f7a46; font-weight: 600; } table.spec .ko { color: #a33a3a; font-weight: 600; }
.specimen { padding: 14px 0; border-bottom: 1px solid var(--line); }
.spec-sample { color: var(--ink); }
.spec-meta { margin: 4px 0 0; color: var(--muted); font-size: .85rem; }
.rules { max-width: 860px; line-height: 1.6; }

.tag-appliqué { background: #dff3e6; color: #16603a; font-weight: 600; }

/* ---- /charte-graphique: before / after comparisons ---- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 10px 0 6px; }
.compare > div { border: 1px solid var(--line); border-radius: 4px; padding: 14px; background: #fff; }
.compare h4 { margin: 0 0 10px; font: 600 .85rem var(--body); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.compare .ratio { margin: 10px 0 0; font-size: .85rem; color: var(--muted); }
.compare .ratio b.ok { color: #1f7a46; } .compare .ratio b.ko { color: #a33a3a; }
.mini-banner { padding: 16px; text-align: center; color: #fff; border-radius: 3px; }
.mini-banner .eyebrow { margin: 0; font: 400 18px var(--body); } .mini-banner .t { margin: 2px 0 0; font: 700 24px var(--display); }
.menu-demo { display: flex; align-items: center; height: 56px; border: 1px solid var(--line); border-radius: 3px; padding: 0 8px; background: #fff; }
.menu-demo a { padding: 0 18px; font: 500 14px/1 var(--body); text-transform: uppercase; color: var(--ink); text-decoration: none; }
@media (max-width: 700px) { .compare { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
  :root { --title-gap: 30px; --section-gap: 100px; }
  .section-title, .section h2 { font-size: 20px; line-height: 26px; }
  .section-title::after, .section h2::after { height: 3px; }
}

/* ---- Modèles « Carte de texte de loi » (law_card) et « Étiquette de discipline » (discipline_tag) ----
   Valeurs relevées sur le site actuel : carte blanche, ombre 0 2px 8px rgba(0,0,0,.19), padding 18/18/20,
   étiquette Hind 14px majuscules (padding 2/5/1, angles 4px), titre Hind 600 16/20.8, méta 14px avec icônes 12px bleues. */
.law-grid { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; align-items: start; }  /* each card keeps its own height: shorter when there is no reference/date */
.law-card { background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--accent, var(--line)); border-radius: 3px; padding: 15px 18px 15px 16px; display: flex; flex-direction: column; }  /* like a line of the search results, but boxed */
.dtag { display: inline-block; padding: 2px 5px 1px; border-radius: 4px; background: var(--tag, #1879b1); color: #fff; font: 400 14px/1.6 var(--body); text-transform: uppercase; text-decoration: none; transition: background .15s; }
.dtag:hover, .dtag:focus-visible { background: var(--tag-hover, #0f4d70); color: #fff; }
.law-title { margin: 0 0 4px; font: 600 1.05rem/1.35 var(--body); color: var(--ink); }
.law-title a { color: var(--link); }
.law-title a:hover { color: var(--hover); }
.law-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; font-size: 14px; line-height: 1.5; color: var(--text); }
.law-meta .ico { width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; color: var(--blue); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 767px) { .law-grid { grid-template-columns: 1fr; } }

/* ---- Modèle « Bandeau promotionnel » (promo_band) : cadre arrondi, photo + voile bleu, texte à gauche ----
   Valeurs relevées sur le site actuel : 1200px, rayon 25px, ombre 0 0 30px .15, voile #1a85c3 à 56 %, marge 100px (40/20/60 sur mobile). */
.promo-box { position: relative; max-width: 1200px; margin-left: auto; margin-right: auto; padding: 100px; border-radius: 25px; overflow: hidden; color: #fff;
  background: #4f9fcf url("/static/img/promo.jpg") center / cover; box-shadow: 0 0 30px rgba(0, 0, 0, .15); }
.promo-box::before { content: ""; position: absolute; inset: 0; background: rgba(26, 133, 195, .56); }
.promo-box > * { position: relative; }
.promo-icon { position: absolute; left: 91px; top: 91px; width: 70px; height: 70px; padding: 9px; color: rgba(255, 255, 255, .49); }
.promo-box h2 { margin: 29px 0 0; color: #fff; font: 600 35px/45.5px var(--display); }
.promo-box h2::after { content: ""; display: block; width: 250px; height: 2px; background: var(--orange); margin: 14px 0 35px; }
.promo-box p { margin: 0; font-size: 18px; line-height: 24.75px; }
.promo-box .checks { list-style: none; margin: 0; padding: 0; font-size: 18px; line-height: 24.75px; }
.promo-box .checks li { position: relative; padding-left: 23px; }
.promo-box .checks li::before { content: "\2713"; position: absolute; left: 0; color: #7ed321; font-weight: 700; }
.promo-box .button { display: block; margin-top: 30px; padding: calc(12px + .125em) 24px calc(12px - .125em); border-radius: 3px; text-align: center; text-transform: uppercase; font: 700 18px/18px var(--body); }
@media (max-width: 767px) {
  .promo-box { padding: 40px 20px 60px; margin-left: 10px; margin-right: 10px; }
  .promo-icon { left: 13px; top: 33px; width: 55px; height: 55px; padding: 7px; }
  .promo-box h2 { margin-top: 17px; font-size: 20px; line-height: 26px; }
  .promo-box h2::after { width: 83px; margin: 15px 0 30px; }
  .promo-box p, .promo-box .checks { font-size: 16px; }
}

/* ---- Rythme entre les grandes sections (accueil) : plus d'air que l'écart standard entre zones ---- */
.section + .zone, .promo-box + .zone { margin-top: var(--section-gap); }
.home .info-band + .zone { margin-top: var(--section-gap); }
.home + .site-footer { margin-top: var(--section-gap); }
.section:has(> .section-title:only-child) + .zone { margin-top: var(--title-gap); }  /* titre seul au-dessus d'un bloc : l'espace est celui du titre */

/* ---- Icône « deux feuillets » devant le surtitre (zone de recherche d'accueil, bandeaux bleus), inclinée au hasard ---- */
.eyebrow-text { position: relative; display: inline-block; }
.eyebrow-icon { position: absolute; left: -28px; top: -27px; width: 40px; height: 40px; padding: 5px; color: rgba(255, 255, 255, .38); pointer-events: none; }
.hero .eyebrow, .banner .eyebrow { font: 400 20px/24px var(--body); color: #fff; }
.banner .eyebrow-icon { top: -23px; width: 49px; height: 49px; padding: 6px; }
@media (max-width: 767px) { .eyebrow-icon { width: 34px; height: 34px; left: -22px; top: -20px; padding: 4px; } .banner .eyebrow-icon { width: 38px; height: 38px; top: -18px; } }

/* ---- Panneau de filtres de la page de recherche (modèle « filters_panel ») ----
   Fixé au bord gauche de l'écran, sous l'en-tête ; s'ouvre et se ferme avec la languette orange ; reste en place au défilement.
   Grand écran : la page se décale pour ne rien masquer. Petit écran : le panneau recouvre la page (fond assombri). */
body.search-page { --filters-w: 360px; --filters-offset: 0px; --panel-time: .5s; --panel-ease: cubic-bezier(.22, .61, .36, 1); }
@media (min-width: 1101px) { body.search-page.filters-open { --filters-offset: var(--filters-w); } }
.page-shift { padding-left: var(--filters-offset); transition: padding-left var(--panel-time) var(--panel-ease); }
body.search-page .site-footer { padding-left: calc(24px + var(--filters-offset)); transition: padding-left var(--panel-time) var(--panel-ease); }
body.no-anim *, body.no-anim { transition: none !important; }

.filters-panel { position: fixed; z-index: 55; left: 0; top: var(--header-h); bottom: 0; width: var(--filters-w); max-width: 100vw;
  background: #fff; border-right: 1px solid var(--orange); transform: translateX(-100%); transition: transform var(--panel-time) var(--panel-ease), box-shadow var(--panel-time) var(--panel-ease); will-change: transform; }
body.filters-open .filters-panel { transform: none; }
.filters-scroll { height: 100%; overflow-y: auto; padding: 22px 22px 40px; scrollbar-width: thin; }
.filters-title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 600 24px/1.2 var(--display); color: var(--ink); }
.filters-title svg { flex: none; width: 34px; height: 34px; }
.filters .scroll { max-height: 19.5rem; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
.filters-notes { margin: 26px 0 4px; font: 600 1.05rem var(--body); color: var(--ink); }
.filters-notes-text { margin: 0; font-size: .82rem; color: var(--muted); }
.filters-tab { align-content: center; gap: 9px; position: absolute; left: 100%; top: 120px; width: 40px; height: 79px; padding: 0; border-radius: 0 6px 6px 0; display: grid; place-items: center; box-shadow: 2px 2px 6px rgba(0,0,0,.18); }
.filters-tab svg { width: 26px; height: 26px; }
#filters-backdrop { display: none; }
@media (max-width: 1100px) {
  .filters-panel { z-index: 90; width: min(88vw, 360px); box-shadow: 0 0 24px rgba(0,0,0,.3); }
  body.filters-open .filters-panel .filters-tab { left: 100%; }
  #filters-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 80; opacity: 0; visibility: hidden;
    transition: opacity var(--panel-time) var(--panel-ease), visibility 0s linear var(--panel-time); }
  body.filters-open #filters-backdrop { opacity: 1; visibility: visible; transition-delay: 0s; }
}
@media print { .filters-panel, #filters-backdrop { display: none !important; } .page-shift, body.search-page .site-footer { padding-left: 0; } }

/* ---- Colonne « Mon espace » de la page de recherche : symétrique du panneau de filtres, à droite ---- */
body.search-page { --mine-w: 300px; --mine-offset: 0px; }
@media (min-width: 1101px) { body.search-page.mine-open { --mine-offset: var(--mine-w); } }
.page-shift { padding-right: var(--mine-offset); transition: padding-left var(--panel-time) var(--panel-ease), padding-right var(--panel-time) var(--panel-ease); }
body.search-page .site-footer { padding-right: calc(24px + var(--mine-offset)); transition: padding-left var(--panel-time) var(--panel-ease), padding-right var(--panel-time) var(--panel-ease); }
.mine-panel { position: fixed; z-index: 55; right: 0; top: var(--header-h); bottom: 0; width: var(--mine-w); max-width: 100vw; background: #fff; border-left: 1px solid var(--orange);
  transform: translateX(100%); transition: transform var(--panel-time) var(--panel-ease), box-shadow var(--panel-time) var(--panel-ease); will-change: transform; }
body.mine-open .mine-panel { transform: none; }
.mine-scroll { height: 100%; overflow-y: auto; padding: 22px 20px 40px; scrollbar-width: thin; }
.mine-tab { left: auto; right: 100%; border-radius: 6px 0 0 6px; box-shadow: -2px 2px 6px rgba(0,0,0,.18); }
.mine-tab .chevron { box-sizing: content-box; width: 16px; height: 16px; justify-self: center; transition: transform .2s ease; }
body.filters-open .mine-panel .mine-tab .chevron { transform: none; }  /* the tab shares the filters tab style: only this column drives its arrow */
body.mine-open .mine-panel .mine-tab .chevron, body.filters-open.mine-open .mine-panel .mine-tab .chevron { transform: rotate(180deg); }
.mine-title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 600 24px/1.2 var(--display); color: var(--ink); }
.mine-title svg { flex: none; width: 30px; height: 30px; }
.mine-links, .mine-list { margin: 0 0 18px; padding: 0; list-style: none; }
.mine-links a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 500; }
.mine-links a:hover { color: var(--link); }
.mine-panel .side-label { margin: 0 0 6px; font: 600 16px/1.3 var(--display); color: var(--ink); }
.mine-list li + li { margin-top: 2px; }
.mine-list a { display: block; padding: 4px 0; overflow: hidden; font-size: .92rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.mine-list small { color: var(--muted); }
.mine-panel .side-links { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--muted); }
#mine-backdrop { display: none; }
@media (max-width: 1100px) {
  .mine-panel { z-index: 90; width: min(88vw, 320px); box-shadow: 0 0 24px rgba(0,0,0,.3); }
  #mine-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 80; opacity: 0; visibility: hidden;
    transition: opacity var(--panel-time) var(--panel-ease), visibility 0s linear var(--panel-time); }
  body.mine-open #mine-backdrop { opacity: 1; visibility: visible; transition-delay: 0s; }
}
@media print { .mine-panel, #mine-backdrop { display: none !important; } .page-shift, body.search-page .site-footer { padding-right: 0; } }
@media (prefers-reduced-motion: reduce) { .mine-panel, #mine-backdrop { transition: none !important; } }

@media (prefers-reduced-motion: reduce) { .filters-panel, .page-shift, body.search-page .site-footer, #filters-backdrop { transition: none !important; } }

/* ---- Recherche : barre de résultats, pagination, champs du panneau (référence, date, inclure/exclure, sauvegardes) ---- */
.results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin: 0 0 10px; padding-bottom: 10px; }
.count-line { margin: 0; color: var(--text); font-weight: 500; }
.results-controls { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.results-controls label { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--muted); }
.results-controls select { font: 400 .9rem var(--body); color: var(--ink); background: var(--grey); border: 1px solid transparent; border-radius: 2px; padding: 6px 8px; }
.pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin: 28px 0 4px; }
.pagination a, .pagination span { min-width: 38px; height: 38px; padding: .2em 10px 0; display: inline-grid; place-items: center; border-radius: 2px; text-decoration: none; font-size: .95rem; }
.pagination a { background: var(--grey); color: var(--ink); }
.pagination a:hover { background: #fff; color: var(--hover); box-shadow: inset 0 0 0 2px var(--hover); }  /* contour + texte orange : net, et distinct de la page courante (fond plein) */
.pagination .current { background: var(--action); color: #fff; font-weight: 600; }
.pagination .off { color: #b8bec9; background: transparent; }
.pagination .gap { min-width: 20px; padding: 0; color: var(--muted); }

.filters input[type=text] { padding: 8px 10px; font-size: .92rem; }
.filters .hint { margin: 6px 0 0; font-size: .78rem; line-height: 1.35; color: var(--muted); }
.filters .field-error { margin: 6px 0 0; font-size: .82rem; color: #a33a3a; font-weight: 500; }
.facet-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 6px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.seg label { display: block; margin: 0; padding: 0; font-size: .8rem; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span, .seg label { padding: 3px 10px; color: var(--text); background: #fff; }
.seg label:has(input:checked) { background: var(--link); color: #fff; }
.seg label:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 1px; }
@media (max-width: 767px) { .results-bar { align-items: flex-start; } }

/* ---- Modèle « Sélecteur à fenêtre » (picker) : un bouton qui résume la sélection et ouvre la liste complète ---- */
.pick-row { display: flex; gap: 6px; align-items: stretch; }
.pick-btn { flex: 1; text-align: left; padding: 9px 12px; background: var(--grey); color: var(--ink); border: 1px solid transparent; border-radius: 2px; font: 400 .95rem var(--body); position: relative; }
.pick-btn::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); }
.pick-btn:hover { background: #e8eaee; color: var(--ink); }
.pick-clear { padding: 0 11px; background: var(--grey); color: var(--muted); border-radius: 2px; font-size: .9rem; }
.pick-clear:hover { background: #f3d6d6; color: #a33a3a; }
.pick-summary { margin: 5px 2px 0; font-size: .8rem; line-height: 1.35; color: var(--text); overflow-wrap: anywhere; }
.pick-dialog { border: 0; border-radius: 6px; padding: 0; width: min(92vw, 580px); max-height: 88vh; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); color: var(--ink); }
.pick-dialog::backdrop { background: rgba(0, 0, 0, .5); }
.pick-box { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; max-height: 88vh; }
.pick-box h3 { margin: 0; font: 600 1.3rem var(--display); color: var(--ink); }
.pick-mode { display: flex; gap: 18px; }
.pick-mode label { font-size: .95rem; cursor: pointer; }
.pick-filter { padding: 8px 10px; font-size: .92rem; }
.pick-list { display: grid; gap: 2px 18px; overflow-y: auto; min-height: 90px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; max-height: 46vh; }
.pick-list.cols-2 { grid-template-columns: 1fr 1fr; }
.pick-list label { display: block; padding: 3px 0; font-size: .95rem; cursor: pointer; }
.pick-list label[hidden] { display: none; }
.pick-list .count { color: var(--muted); }
.pick-dialog .hint { margin: 0; font-size: .8rem; color: var(--muted); }
.pick-quick { display: flex; gap: 8px; }
.pick-secondary { padding: 6px 12px; font-size: .85rem; background: var(--grey); color: var(--ink); }
.pick-secondary:hover { background: #e8eaee; color: var(--ink); }
.pick-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
@media (max-width: 520px) { .pick-list.cols-2 { grid-template-columns: 1fr; } .pick-box { padding: 16px; } }

.filters .hint-tip { display: inline-block; margin-top: 3px; color: #7b8494; }

/* ---- Champ de recherche par mots-clés tout en haut du panneau de filtres (page de recherche) ---- */
.panel-search { display: flex; margin: 0 0 20px; }
.panel-search input { flex: 1; min-width: 0; padding: 11px 12px; font-size: 1rem; border-radius: 2px 0 0 2px; }
.panel-search button { flex: none; width: 46px; padding: 0; border-radius: 0 2px 2px 0; display: grid; place-items: center; }
.panel-search svg { width: 22px; height: 22px; }
.filters .panel-search input[type=search] { background: var(--grey); }

/* ---- Bandeau bleu de la page de recherche : titre des résultats, nombre de textes, tri et « par page » ---- */
.banner .banner-extra { margin-top: 4px; }
.banner .results-bar { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; padding: 0; border: 0; }
.banner .results-controls { justify-content: center; gap: 10px 22px; }
.banner .results-controls label { color: #fff; font-size: .95rem; }
.banner .results-controls select { background: #fff; color: var(--ink); border-radius: 2px; padding: 7px 10px; }

/* Tri et « par page » : en haut à droite de la liste (le titre et le nombre de textes sont dans le bandeau bleu) */
.results .results-bar { justify-content: space-between; margin: 0 0 6px; padding-bottom: 12px; }

.sidebar > h3 a { color: var(--link); }
.sidebar > h3 a:hover { color: var(--hover); }

/* La carte des résultats remonte sur le bandeau crème (effet de l'original : marge -30px, ombre fine) */
body.search-page { --card-overlap: 30px; }
body.search-page .search-layout { margin-top: calc(var(--card-overlap) * -1); }
body.search-page .results { position: relative; z-index: 1; box-shadow: 0 0 4px rgba(0, 0, 0, .5); }

/* Le bandeau bleu et le bandeau d'information forment un seul bloc : aucun écart entre les deux */
.banner + .info-band { margin-top: 0; }


@media (max-width: 767px) { .banner { padding-top: 44px; } }

/* Ligne du haut de la liste : « ← Précédent » | nombre de textes (centré) | tri et « par page », avec un séparateur vertical de chaque côté du nombre */
.results .results-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0; }
.results .results-bar .back-link { padding-right: 20px; font-size: .95rem; white-space: nowrap; }
.results .results-bar .count-line { text-align: center; padding: 5px 20px; min-height: 30px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.results .results-bar .results-controls { padding-left: 20px; }
@media (max-width: 767px) {
  .results .results-bar { grid-template-columns: 1fr; gap: 8px; }
  .results .results-bar .back-link { padding-right: 0; }
  .results .results-bar .count-line { text-align: left; padding: 0; min-height: 0; border: 0; }
  .results .results-bar .results-controls { padding-left: 0; }
}

/* Ligne de résultat : date avec l'icône de calendrier bleue de l'original */
.date-chip { display: inline-block; white-space: nowrap; }  /* inline, so its baseline is the baseline of the date text */
.meta .ico { width: 14px; height: 14px; margin-right: 6px; color: var(--blue); flex: none; vertical-align: -2px; }

/* Lignes de résultat : étiquettes de discipline aux couleurs normées, alignées sur la date */
.card .meta { gap: 6px 14px; align-items: baseline; }  /* date and tags share one text baseline */
.card .meta .dtag { font-size: 12px; line-height: 1.5; }
.card .meta .dtag { position: relative; top: -1px; }  /* petit coup de pouce vers le haut : l étiquette paraît plus centrée sur la date */

/* « ← Précédent » : pas de soulignement ; au survol (et au clavier) la couleur passe à l'orange d'action, bien visible, et la flèche glisse vers la gauche */
.back-link { text-decoration: none; transition: color .18s ease; }
.back-link .arrow { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; transition: transform .18s ease; }  /* chevron du site, comme sur la languette des filtres */
.back-link:hover, .back-link:focus-visible { color: var(--hover); }
.back-link:hover .arrow, .back-link:focus-visible .arrow { transform: translateX(-4px); }
@media (prefers-reduced-motion: reduce) { .back-link, .back-link .arrow { transition: none; } }

/* ---- Survol harmonisé ----
   Liens textuels : la couleur passe à l'orange d'action (--hover), sans jamais gagner de soulignement.
   Boutons : fond plus foncé. Surfaces cliquables (tuiles) : filet orange. Fond foncé (pied de page) : blanc. */
.card h3 a, .law-title a, .site-header nav a, .toc a, .sidebar > h3 a, .back-link, .info-band .text a, .breadcrumb a, .doc-actions a, .legal-text a, .accordion a { transition: color .15s ease; }
.breadcrumb a:hover, .doc-actions a:hover, .legal-text a:hover, .accordion a:hover { color: var(--hover); }
@media (prefers-reduced-motion: reduce) { .card h3 a, .law-title a, .site-header nav a, .toc a, .sidebar > h3 a, .back-link, .info-band .text a { transition: none; } }

/* ---- Éléments cliquables ----
   Sans soulignement, la couleur est ce qui désigne un lien : tout texte cliquable est bleu (--link) au repos et orange (--hover)
   au survol. Dans un texte courant (texte de loi, conditions d'utilisation) il est en plus en gras, pour ne pas dépendre de la
   couleur seule. Le menu, le pied de page, la pagination, les boutons et les étiquettes ont leur propre apparence. */
.legal-text a { font-weight: 600; }

/* Haut du panneau : « Rechercher » + la barre, puis « Affiner la recherche » avant les filtres */
.panel-search + .filters-title { margin-top: 28px; }
.filters-title:first-child { margin-top: 0; }

/* Réinitialiser (à contour) et Appliquer (plein) ont exactement la même hauteur */
.filters .actions-row > .button, .filters .actions-row > button { box-sizing: border-box; height: 42px; display: inline-flex; align-items: center; justify-content: center; }

/* Un seul trait horizontal dans la liste : sous la rangée « Précédent | nombre | Tri » (aucun entre les résultats) */
.results .results-bar { border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 8px; }

@media (max-width: 767px) { .results { padding: 28px 16px 48px; } }

/* Indicateur « PDF » (liste de recherche) : seulement quand le texte n'a pas de version HTML */
.html-flag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; line-height: 1.5; font-weight: 600; color: var(--muted); }
.html-flag { position: relative; top: 4px; }  /* centré sur la date et l étiquette */
.html-flag svg { width: 15px; height: 15px; flex: none; position: relative; top: -1px; }  /* l icône garde sa place, seul le mot descend */

/* Languette des filtres : la loupe, puis un chevron qui indique l'action (› ouvrir, ‹ fermer) */
.filters-tab .chevron { box-sizing: content-box; width: 16px; height: 16px; justify-self: center; transition: transform .2s ease; }
body.filters-open .filters-tab .chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .filters-tab .chevron { transition: none; } }
/* Trait fin entre la loupe et le chevron : sur la loupe, car le chevron se retourne et emporterait son trait */
.filters-tab > svg:first-child { box-sizing: content-box; padding-bottom: 9px; border-bottom: 1px solid rgb(255 255 255 / .55); }

/* ---- Sommaire, mis en forme comme l original (titre sur sa ligne, boutons dessous : la colonne ne fait que 300 px) ----
   Titre avec son icône, deux boutons, un trait fin, puis la liste : texte 15 px, interligne confortable, retrait de 11 px par niveau. */
.toc-head { gap: 6px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.toc-head h4 { display: flex; align-items: center; gap: 8px; font: 600 24px/1.2 var(--display); color: var(--ink); margin: 0 0 4px; flex: 1 0 100%; }
.toc-icon { width: 26px; height: 26px; flex: none; color: var(--ink); }
.toc-head .pill { font: 600 13px/1 var(--display); padding: calc(6px + .125em) 11px calc(6px - .125em); border-radius: 4px; }
.toc li { margin: 4px 0; }
.toc a { font-size: 14px; line-height: 1.5; padding: 1px 4px; }
.toc .lvl2 { padding-left: 0; } .toc .lvl3 { padding-left: 11px; } .toc .lvl4 { padding-left: 22px; }
.toc.tree li { padding-left: 18px; } .toc.tree li.lvl3 { padding-left: 29px; } .toc.tree li.lvl4 { padding-left: 40px; }
.toc.tree li.lvl3 .toc-toggle { left: 11px; } .toc.tree li.lvl4 .toc-toggle { left: 22px; }
/* Barre de défilement de la colonne : curseur gris arrondi et petites flèches haut / bas */
.sidebar { scrollbar-width: thin; scrollbar-color: #8c8c8c #fff; }
.sidebar::-webkit-scrollbar { width: 14px; }
.sidebar::-webkit-scrollbar-track { background: #fff; }
.sidebar::-webkit-scrollbar-thumb { background: #8c8c8c; border-radius: 7px; border: 2px solid #fff; }
.sidebar::-webkit-scrollbar-button:single-button { height: 14px; background: #fff center / 10px no-repeat; }
.sidebar::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 8l4-6 4 6z' fill='%238c8c8c'/%3E%3C/svg%3E"); }
.sidebar::-webkit-scrollbar-button:single-button:vertical:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 2l4 6 4-6z' fill='%238c8c8c'/%3E%3C/svg%3E"); }

/* Titre atteint depuis le sommaire : surligné quelques secondes puis le surlignage s'estompe */
.toc-hit { border-radius: 3px; animation: toc-hit 2.6s ease-out; }
@keyframes toc-hit {
  0%, 35% { background: #ffd27a; box-shadow: 0 0 0 8px #ffd27a; }
  100%    { background: transparent; box-shadow: 0 0 0 8px transparent; }
}
@media (prefers-reduced-motion: reduce) { .toc-hit { animation: none; background: #ffd27a; box-shadow: 0 0 0 8px #ffd27a; } }

/* Entrée du sommaire : un peu d'air entre la barre orange et le texte (le retrait du texte ne bouge pas en mode liste) */
.toc a { padding-left: 10px; }
.toc:not(.tree) a { margin-left: -6px; }
.toc.tree li { padding-left: 12px; } .toc.tree li.lvl3 { padding-left: 23px; } .toc.tree li.lvl4 { padding-left: 34px; }

/* En-tête du sommaire comme l'original : titre à gauche, les deux boutons arrondis à droite, sur une seule ligne */
.sidebar-left { padding-inline: 12px; }
.toc-head { flex-wrap: nowrap; gap: 6px; }
.toc-head h4 { flex: 1 1 auto; margin: 0; font-size: 20px; gap: 6px; white-space: nowrap; }
.toc-icon { width: 22px; height: 22px; }
.toc-head .pill { flex: none; font-size: 12px; padding: calc(7px + .125em) 9px calc(7px - .125em); border-radius: 5px; }
/* Colonne du sommaire un peu plus large (345 px) pour que le titre et les deux boutons tiennent sur la même ligne */
.sidebar-left { width: var(--lw, 345px); }
.sidebar-left.hide_sidebar { margin-left: calc(var(--lw, 345px) * -1); }

/* Niveaux 5 à 9 du sommaire (h5, h6, puis les paragraphes heading_7 à heading_9) : retrait de plus en plus serré pour rester lisible */
.toc .lvl5 { padding-left: 30px; } .toc .lvl6 { padding-left: 36px; } .toc .lvl7 { padding-left: 42px; } .toc .lvl8 { padding-left: 48px; } .toc .lvl9 { padding-left: 54px; }
.toc.tree li.lvl5 { padding-left: 41px; } .toc.tree li.lvl6 { padding-left: 47px; } .toc.tree li.lvl7 { padding-left: 53px; } .toc.tree li.lvl8 { padding-left: 59px; } .toc.tree li.lvl9 { padding-left: 65px; }
.toc.tree li.lvl5 .toc-toggle { left: 29px; } .toc.tree li.lvl6 .toc-toggle { left: 35px; } .toc.tree li.lvl7 .toc-toggle { left: 41px; } .toc.tree li.lvl8 .toc-toggle { left: 47px; } .toc.tree li.lvl9 .toc-toggle { left: 53px; }
/* Colonne du sommaire : elle prend toute la hauteur de l'écran (sous l'en-tête), avec une grande marge en bas pour que la fin de la liste ne colle pas au bord */
@media (min-width: 901px) { .sidebar-left { height: calc(100vh - var(--header-h)); padding-bottom: 100px; } }

/* Languette du sommaire : l'icône du sommaire, un trait fin, puis le chevron qui indique l'action (‹ fermer, › ouvrir) - comme celle des filtres */
.slider-left { width: 36px; height: 79px; display: grid; align-content: center; justify-items: center; gap: 9px; box-shadow: 2px 2px 6px rgba(0,0,0,.18); }
.slider-left .slider-icon { box-sizing: content-box; width: 22px; height: 22px; padding-bottom: 9px; border-bottom: 1px solid rgb(255 255 255 / .55); }
.slider-left .chevron { width: 16px; height: 16px; transition: transform .2s ease; }
.sidebar-left.hide_sidebar + .slider-left .chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .slider-left .chevron { transition: none; } }

/* ---- Sommaire fixe (écrans larges) ----
   La colonne du sommaire est collée au bord gauche de la fenêtre, juste sous le menu, PAR-DESSUS le bandeau et les conditions d'utilisation :
   elle ne bouge plus quand on fait défiler la page. Elle sort de la mise en page, donc le texte laisse sa place avec une marge à gauche. */
@media (min-width: 901px) {
  .text-layout { grid-template-columns: minmax(0, 1fr) auto auto; padding-left: 0; transition: padding-left .2s; }
  .text-layout:has(.sidebar-left:not(.hide_sidebar)) { padding-left: var(--lw, 345px); }
  .sidebar-left { position: fixed; top: var(--header-h); left: 0; bottom: 0; z-index: 50; height: auto; max-height: none; margin: 0; }
  .sidebar-left.hide_sidebar { margin: 0; transform: translateX(-100%); }
  .slider-left { position: fixed; top: calc(100vh / 3 - 40px); left: var(--lw, 345px); z-index: 51; transition: left .2s; }
  .sidebar-left.hide_sidebar + .slider-left { left: 0; }
}

/* La liste du sommaire défile dans la colonne, sous son en-tête, et s'arrête au-dessus du bas (trait fin, puis de l'espace) : plus lisible que de la laisser filer jusqu'au bord */
.sidebar-left { display: flex; flex-direction: column; overflow: hidden; }
.sidebar-left .toc-head { flex: none; }
.sidebar-left .toc { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.sidebar-left .toc { scrollbar-width: thin; scrollbar-color: #8c8c8c #fff; }
.sidebar-left .toc::-webkit-scrollbar { width: 14px; }
.sidebar-left .toc::-webkit-scrollbar-track { background: #fff; }
.sidebar-left .toc::-webkit-scrollbar-thumb { background: #8c8c8c; border-radius: 7px; border: 2px solid #fff; }
.sidebar-left .toc::-webkit-scrollbar-button:single-button { height: 14px; background: #fff center / 10px no-repeat; }
.sidebar-left .toc::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 8l4-6 4 6z' fill='%238c8c8c'/%3E%3C/svg%3E"); }
.sidebar-left .toc::-webkit-scrollbar-button:single-button:vertical:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 2l4 6 4-6z' fill='%238c8c8c'/%3E%3C/svg%3E"); }

/* A- / A+ : taille du texte du sommaire, en bas à droite, juste après la liste (14 px par défaut, mémorisée) */
.toc a { font-size: var(--toc-fs, 14px); }
.toc-font { flex: none; display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.toc-font button { min-width: 40px; height: 32px; padding: calc(0px + .125em) 8px 0; background: var(--grey); color: var(--ink); border-radius: 4px; font: 600 14px/1 var(--display); }
.toc-font button:hover:not(:disabled) { background: #fff; color: var(--hover); box-shadow: inset 0 0 0 2px var(--hover); }
.toc-font button:disabled { color: #b8bec9; cursor: default; }
/* L'espace entre les entrées suit la taille du texte (A- / A+) : en em plutôt qu'en pixels, il rétrécit avec la police */
.toc li { margin: 0; font-size: var(--toc-fs, 14px); }
.toc li + li { margin-top: .25em; }
.toc a { font-size: 1em; line-height: 1.4; padding-top: .05em; padding-bottom: .05em; }

/* Sommaire : largeur réglable en glissant son bord droit (la largeur est portée par --lw sur .text-layout) */
.resizer { position: absolute; top: 0; bottom: 0; width: 8px; cursor: col-resize; touch-action: none; z-index: 2; }
.resizer-left { right: 0; }
.resizer::after { content: ""; position: absolute; left: 2px; top: 50%; width: 3px; height: 44px; margin-top: -22px; border-radius: 2px; background: var(--line); transition: background .15s; }
.resizer:hover::after, .resizer:focus-visible::after, body.resizing .resizer::after { background: var(--hover); }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing .text-layout, body.resizing .sidebar-left, body.resizing .slider-left { transition: none; }
@media (max-width: 900px) { .resizer { display: none; } }
@media print { .resizer { display: none; } }
/* Le sommaire fixe recouvre la gauche du bandeau bleu et des conditions : on les décale pour que leur contenu reste centré dans la partie visible */
@media (min-width: 901px) {
  body.text-page:has(.sidebar-left:not(.hide_sidebar)) :is(.banner, .info-band) { padding-left: calc(var(--lw, 345px) + 16px); }
  body.text-page :is(.banner, .info-band) { transition: padding-left .2s; }
  body.resizing :is(.banner, .info-band) { transition: none; }
}

/* ---- Bandeau publicitaire (M09) : entre l'en-tête bleu et les conditions d'utilisation de la page d'un texte ---- */
.strip-wrap { padding: 10px 70px; margin-top: 0; }
.promo-strip { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 32px; max-width: 1180px; min-height: 320px; margin: 0 auto; padding: 72px 48px 72px 88px; color: #fff; overflow: hidden;
  background: #ab4a00 url("/static/img/promo.jpg") center / cover; border: 2px solid var(--orange); border-left: 22px solid var(--orange); box-shadow: 0 0 40px rgba(0, 0, 0, .12); }
.promo-strip::before { content: ""; position: absolute; inset: 0; background: rgba(171, 74, 0, .5); }
.promo-strip > * { position: relative; }
.strip-icon { position: absolute; left: -38px; top: -30px; width: 56px; height: 56px; padding: 8px; color: rgba(255, 255, 255, .5); }  /* accrochée au début de la phrase : elle la suit où qu'elle soit */
.promo-strip h2 { position: relative; }
.promo-strip h2 { margin: 0; color: #fff; text-shadow: 0 1px 8px rgba(80, 30, 0, .45); font: 600 clamp(18px, 1.6vw, 24px)/1.45 var(--display); }
.promo-strip h2::after { content: ""; display: block; width: min(370px, 60%); height: 2px; background: rgba(255, 255, 255, .7); margin-top: 48px; }
.promo-strip .button { padding: calc(12px + .125em) 28px calc(12px - .125em); border: 1px solid #fff; border-radius: 3px; text-transform: uppercase; font: 700 17px/1 var(--body); white-space: nowrap; }
@media (max-width: 900px) { .strip-wrap { padding: 28px 12px; } .promo-strip { grid-template-columns: 1fr; padding: 56px 20px 32px 28px; border-left-width: 12px; } .strip-icon { left: -6px; top: -48px; width: 44px; height: 44px; } .promo-strip h2::after { margin-top: 24px; } }
@media (min-width: 901px) {
  body.text-page:has(.sidebar-left:not(.hide_sidebar)) .strip-wrap { padding-left: calc(var(--lw, 345px) + 70px); }
  body.text-page .strip-wrap { transition: padding .2s; }
  body.resizing .strip-wrap { transition: none; }
}
@media print { .strip-wrap { display: none; } }
/* Bandeau bleu, publicité et conditions d'utilisation : leur contenu est centré sur la même zone que le texte principal.
   À gauche, la colonne du sommaire (si elle est ouverte) ; à droite, la languette de la colonne de recherche (22 px) et la colonne elle-même (300 px) si elle est ouverte. */
@media (min-width: 901px) {
  body.text-page :is(.banner, .info-band) { padding-left: 16px; padding-right: 38px; transition: padding .2s; }
  body.text-page:has(.sidebar-left:not(.hide_sidebar)) :is(.banner, .info-band) { padding-left: calc(var(--lw, 345px) + 16px); }
  body.text-page:has(.sidebar-right:not(.hide_sidebar_right)) :is(.banner, .info-band) { padding-right: 338px; }
  body.text-page .strip-wrap { padding-left: 70px; padding-right: 92px; }
  body.text-page:has(.sidebar-left:not(.hide_sidebar)) .strip-wrap { padding-left: calc(var(--lw, 345px) + 70px); }
  body.text-page:has(.sidebar-right:not(.hide_sidebar_right)) .strip-wrap { padding-right: 392px; }
  body.resizing :is(.banner, .info-band, .strip-wrap) { transition: none; }
}
/* Page d'un texte : le cadre blanc du texte (et la colonne de recherche) empiète sur le bas du bandeau des conditions d'utilisation, comme sur la page de recherche */
body.text-page .info-band + .text-layout { margin-top: calc(var(--card-overlap, 30px) * -1); }
body.text-page .info-band + .text-layout .document { margin-top: 0; }
@media (min-width: 901px) { body.text-page .info-band + .text-layout .sidebar-right { margin-top: var(--card-overlap, 30px); } }

/* « Précédent » en haut du cadre blanc du texte, souligné d'un fin trait orange */
.doc-back { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 22px; padding-bottom: 14px; border-bottom: 1px solid var(--orange); }
.doc-back .print-button { padding: calc(8px + .125em) 16px calc(8px - .125em); font-size: .9rem; }
.doc-back .back-link { font-size: 1.05rem; }
@media print { .doc-back { display: none; } }

/* En-tête du texte : statut + disciplines (étiquettes), titre, puis une ligne d'informations sans cadre gris (libellé discret au-dessus de la valeur, traits fins entre les blocs) */
.status-dot { display: inline-flex; align-items: center; gap: 7px; }
.status-dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #8c8c8c; flex: none; }
.status-dot.status-en-vigueur::before { background: #2e7d32; }
.status-dot.status-abrogé, .status-dot.status-périmé { color: #a33a3a; }
.status-dot.status-abrogé::before, .status-dot.status-périmé::before { background: #a33a3a; }
.meta-line dd.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.meta-line > .meta-wide { flex: 1 0 100%; padding: 12px 0 0; border-top: 1px solid var(--line); }
.meta-line dd.history { font-weight: 400; font-size: .95rem; line-height: 1.5; }
.meta-line dd.history > :first-child { margin-top: 0; } .meta-line dd.history > :last-child { margin-bottom: 0; }
.meta-line { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 4px 0 20px; padding: 14px 0 0; border-top: 1px solid var(--line); }
.meta-line dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.meta-line dd { margin: 2px 0 0; font-weight: 600; }
@media (max-width: 900px) { .meta-line { gap: 12px 28px; } }

/* Séparateur entre les informations (et les actions) et le début du texte, avec de l'air de chaque côté */
.doc-sep { border: 0; border-top: 1px solid var(--line); margin: 28px 0 40px; }
@media print { .doc-sep { display: none; } }

/* ---- Sommaire dans la page, juste avant le texte : un cadre avec l'en-tête (titre, Hiérarchique, Masquer) et la liste qui défile ---- */
.page-toc { margin: 0; padding: 18px 20px 4px; border: 1px solid #8c8c8c; border-radius: 3px; }
.page-toc .toc-head h2 { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; margin: 0; font: 600 24px/1.2 var(--display); color: var(--ink); }
.page-toc .toc-head { flex-wrap: nowrap; }
.page-toc .toc { --toc-fs: 16px; max-height: 440px; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: #8c8c8c #fff; }
.page-toc .toc[hidden] { display: none; }
.page-toc .toc::-webkit-scrollbar { width: 14px; }
.page-toc .toc::-webkit-scrollbar-track { background: #fff; }
.page-toc .toc::-webkit-scrollbar-thumb { background: #8c8c8c; border-radius: 7px; border: 2px solid #fff; }
.page-toc .toc::-webkit-scrollbar-button:single-button { height: 14px; background: #fff center / 10px no-repeat; }
.page-toc .toc::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 8l4-6 4 6z' fill='%238c8c8c'/%3E%3C/svg%3E"); }
.page-toc .toc::-webkit-scrollbar-button:single-button:vertical:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 2l4 6 4-6z' fill='%238c8c8c'/%3E%3C/svg%3E"); }
@media print { .page-toc { display: none; } }

/* Barre sous la liste du sommaire de la page : on la tire vers le bas ou vers le haut pour changer la hauteur de la liste */
.v-grip { position: relative; height: 22px; margin: 4px -20px 0; cursor: row-resize; touch-action: none; }
.v-grip::after { content: ""; position: absolute; left: 50%; top: 9px; width: 56px; height: 4px; margin-left: -28px; border-radius: 2px; background: var(--line); transition: background .15s; }
.v-grip:hover::after, .v-grip:focus-visible::after, body.resizing-v .v-grip::after { background: var(--hover); }
body.resizing-v { cursor: row-resize; user-select: none; }
.v-grip[hidden] { display: none; }
@media print { .v-grip { display: none; } }

/* Texte de loi : un paragraphe garde un petit espace, un article (paragraphe « Art. ») un peu plus - les paragraphes vides de la source sont retirés à l'affichage */
.legal-text p { margin: .6em 0; }
.legal-text p.art { margin-top: 1.5em; }
.legal-text > :first-child, .legal-text > p.art:first-child { margin-top: 0; }
/* Titres de niveau 2 : une grande marge au-dessus, pour les faire ressortir du texte précédent (en em : elle suit la taille calculée du titre) */
.legal-text h2 { margin-top: 1.9em; }

/* Sommaire en mode hiérarchique : le bouton +/- a sa place à gauche et l'entrée (avec sa barre orange quand elle est en cours) commence après lui,
   au lieu de se chevaucher. Le bouton est à 0 / 11 / 22 px... selon le niveau ; le texte commence 22 px plus loin. */
.toc.tree li.lvl2 { padding-left: 22px; } .toc.tree li.lvl3 { padding-left: 33px; } .toc.tree li.lvl4 { padding-left: 44px; } .toc.tree li.lvl5 { padding-left: 51px; } .toc.tree li.lvl6 { padding-left: 57px; } .toc.tree li.lvl7 { padding-left: 63px; } .toc.tree li.lvl8 { padding-left: 69px; } .toc.tree li.lvl9 { padding-left: 75px; }
/* Titres du texte de loi : peu d'espace sous le titre (il annonce ce qui suit), un peu plus au-dessus ; le niveau 2 garde sa grande marge du dessus */
.legal-text :is(h1, h2, h3, h4, h5, h6) { margin-bottom: .3em; }
.legal-text :is(h3, h4, h5, h6) { margin-top: .8em; }
.legal-text :is(p.heading_7, p.heading_8, p.heading_9) { margin: .8em 0 .3em; }

/* ---- Notes de bas de texte « ((...)) » : une pastille « notes » dans le texte, la note s'ouvre dans une fenêtre ---- */
.legal-text .note-tag { margin: 0 .3em 0 .4em; padding: .125em 9px 0; border: 0; border-radius: 999px; background: var(--link); color: #fff; font: 600 .72em/1.7 var(--body); text-transform: uppercase; letter-spacing: .04em; vertical-align: .12em; cursor: pointer; }
.legal-text .note-tag:hover, .legal-text .note-tag:focus-visible { background: var(--hover); color: #fff; }
.note-dialog { width: min(560px, calc(100vw - 32px)); padding: 24px 26px 18px; border: 0; border-radius: 4px; box-shadow: 0 10px 40px rgba(0, 0, 0, .3); font: 400 16px/1.5 var(--body); color: var(--ink); }
.note-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.note-dialog .note-body { max-height: 60vh; overflow-y: auto; }
.note-dialog form { display: flex; justify-content: flex-end; margin-top: 16px; }
@media print { .note-tag { display: none; } .note-content[hidden] { display: inline; } .note-content::before { content: "(("; } .note-content::after { content: "))"; } .note-dialog { display: none; } }
.note-dialog .note-title { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font: 600 22px/1.2 var(--display); color: var(--ink); }

/* ---- Colonne de droite : « Nouvelle recherche » et « Rechercher dans le document » ---- */
.sidebar-right .side-title { display: flex; align-items: center; gap: 12px; margin: 26px 0 14px; font: 600 22px/1.2 var(--display); color: var(--ink); }
.sidebar-right > .side-title:first-child { margin-top: 0; }
.side-icon { width: 34px; height: 34px; flex: none; color: var(--ink); }
.sidebar-right .side-label { margin: 0 0 6px; font: 600 16px/1.3 var(--display); color: var(--ink); }
.sidebar-right .searchbox { max-width: none; margin: 0 0 4px; }
.sidebar-right .searchbox input { padding: 10px 12px; font-size: .95rem; }
.sidebar-right .searchbox button { padding: calc(10px + .125em) 14px calc(10px - .125em); font-size: .95rem; }
.find .find-step { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 3px; }
.find .find-step .chevron { width: 18px; height: 18px; }
.find .find-step-next .chevron { transform: rotate(180deg); }
.find .find-step:disabled { background: var(--grey); color: #b8bec9; cursor: default; }
/* Languette de droite : loupe, trait fin, puis chevron (› pour fermer, ‹ pour ouvrir), comme celle des filtres et celle du sommaire */
.slider-right { width: 36px; height: 79px; display: grid; align-content: center; justify-items: center; gap: 9px; box-shadow: -2px 2px 6px rgba(0,0,0,.18); }
.slider-right .slider-icon { box-sizing: content-box; width: 22px; height: 22px; padding-bottom: 9px; border-bottom: 1px solid rgb(255 255 255 / .55); }
.slider-right .chevron { width: 16px; height: 16px; transform: rotate(180deg); transition: transform .2s ease; }
.slider-right:not(.is-open) .chevron { transform: none; }
@media (prefers-reduced-motion: reduce) { .slider-right .chevron { transition: none; } }

/* Titres de la colonne de droite à la taille de celui du sommaire (20 px, icône de 22 px) ; « Nouvelle recherche » : bouton avec la loupe au lieu du mot */
.sidebar-right .side-title { gap: 8px; font-size: 20px; }
.side-icon { width: 22px; height: 22px; }
.sidebar-right .searchbox-icon button { flex: none; width: 46px; padding: 0; display: grid; place-items: center; }
.sidebar-right .searchbox-icon button svg { width: 22px; height: 22px; }
/* Languette de droite : elle reste au niveau du cadre de la colonne (110 px sous son bord haut, comme sur l original ; la colonne garde une grande marge en bas), au repos comme quand la colonne se fige sous le menu */
@media (min-width: 901px) {
  .slider-right { top: calc(var(--header-h) + 110px); margin-top: calc(var(--card-overlap, 30px) + 110px); }
  .sidebar-right { padding-bottom: 90px; }
}

/* Recherche par mot-clé : option « Mot entier » et rappel des règles */
.find .find-opt { display: flex; align-items: center; gap: 6px; width: 100%; padding: 0; font-size: .9rem; color: var(--ink); cursor: pointer; }
.find .find-opt input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--link); }
.find .find-hint { font-size: .8rem; line-height: 1.35; }

/* Liste cliquable des passages trouvés, sous la barre de recherche par mot-clé */
.find .find-results { width: 100%; max-height: 280px; margin: 2px 0 4px; padding: 0; overflow-y: auto; list-style: none; border: 1px solid var(--line); border-radius: 3px; background: #fff; }
.find-results[hidden] { display: none; }
.find-results li + li { border-top: 1px solid var(--line); }
.find .find-hit { display: block; width: 100%; padding: 8px 10px 8px 12px; border: 0; border-left: 3px solid transparent; border-radius: 0; background: #fff; color: var(--ink); text-align: left; font: 400 .85rem/1.4 var(--body); cursor: pointer; }
.find .find-hit:hover, .find .find-hit:focus-visible { background: var(--grey); color: var(--ink); }
.find .find-hit.active { border-left-color: var(--orange); background: color-mix(in srgb, var(--blue) 10%, #fff); }
.find-where { display: block; margin-bottom: 2px; font: 600 .78rem/1.3 var(--display); color: var(--link); }
.find-excerpt mark { background: #ffe58a; color: #000; padding: 0 1px; }
.find-more { padding: 8px 10px; font-size: .8rem; color: var(--muted); }

/* Bouton « i » : explication d'une fonction, à côté de son titre */
.info-btn { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 6px; padding: .125em 0 0; border-radius: 50%; background: var(--link); color: #fff; font: 700 13px/1 var(--display); vertical-align: 1px; cursor: pointer; }
.info-btn:hover, .info-btn:focus-visible { background: var(--hover); }
.help-body ul { margin: 0; padding-left: 20px; }
.help-body li + li { margin-top: 8px; }
@media print { .info-btn, #help-dialog { display: none; } }

/* La pastille « notes » montrée dans l'aide : même aspect que celle du texte, mais ce n'est pas un bouton */
.note-tag-static { display: inline-block; margin: 0 .15em; padding: .125em 9px 0; border-radius: 999px; background: var(--link); color: #fff; font: 600 .72em/1.7 var(--body); text-transform: uppercase; letter-spacing: .04em; vertical-align: .12em; cursor: default; }

/* ---- Impression d'un texte : texte plus petit, vraies marges, le même en-tête avec le logo sur chaque page ----
   La marge de la feuille est à zéro, ce qui supprime l'en-tête et le pied de page ajoutés par le navigateur (date, titre, adresse). Les marges sont refaites
   par le cadre du texte, dont le remplissage est répété sur chaque page (box-decoration-break), et l'en-tête de Lexxika est fixe : il revient sur chaque page. */
.print-header { display: none; }
@page { size: A4; margin: 0; }
@media print {
  .print-header { display: flex; position: fixed; top: 9mm; left: 16mm; right: 16mm; z-index: 5; align-items: center; justify-content: space-between; padding-bottom: 2.5mm; border-bottom: 0.3mm solid #999; font: 400 9pt var(--body); color: #444; background: #fff; }
  .print-header img { height: 9mm; width: auto; }
  .document { padding: 26mm 16mm 18mm !important; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  .page-toc + .doc-sep { display: none; }
  .text-layout { padding: 0 !important; margin: 0 !important; }
  .document h1 { font-size: 19pt; margin: 0 0 4mm; }
  .meta-line { margin: 0 0 3mm; padding-top: 3mm; gap: 3mm 10mm; font-size: 9.5pt; }
  .meta-line dd.history { font-size: 9pt; }
  .doc-sep { display: block; margin: 6mm 0 8mm; border-top: 0.3mm solid #999; }
  .legal-text { font-size: 10.5pt; line-height: 1.4; }
  .legal-text p { margin: .4em 0; }
  .legal-text p.art { margin-top: 1.1em; }
  .legal-text :is(h1, h2, h3, h4, h5, h6, p.heading_7, p.heading_8, p.heading_9) { break-after: avoid; }
  .legal-text h2 { margin-top: 1.3em; }
  .legal-text table { font-size: 9.5pt; }
}

@media print { .print-where { text-align: right; line-height: 1.35; } .print-date { font-size: 8pt; color: #666; } }

/* ---- Pied de page : quatre colonnes comme l'original (marque, Menu, Horaires, Informations légales) ---- */
.site-footer { color: #fff; padding: 100px 6% 28px; font-size: 1rem; line-height: 1.95; }
.site-footer a, .site-footer a:hover { color: #fff; }
.site-footer .cols { grid-template-columns: 2.1fr 1fr 1.9fr 1.7fr; gap: 0 40px; max-width: none; }
.site-footer strong { font: 700 1.5rem/1.3 var(--display); margin: 0 0 24px; }
.site-footer .cols > div:first-child { padding-right: 40px; }
.site-footer p { margin: 0 0 1.6em; }
.footer-logo { margin: 0 auto 26px; }
.site-footer ul { margin: 0; } .site-footer li { margin: 0 0 4px; line-height: 1.7; }
.site-footer .copy { border-top: 0; opacity: 1; max-width: none; margin: 90px 0 0; padding-top: 0; }
@media (max-width: 900px) { .site-footer { padding: 48px 20px 24px; } .site-footer .cols > div { margin-bottom: 28px; } .site-footer .copy { margin-top: 24px; } }

/* ---- Reprendre la lecture ---- */
.resume-bar { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 10px 14px; background: #eaf4fb; border-left: 4px solid var(--blue); border-radius: 3px; color: var(--ink); font-size: .95rem; }
.resume-text { flex: 1; min-width: 0; }
.resume-go { flex: none; padding: calc(7px + .125em) 14px calc(7px - .125em); font-size: .9rem; }
.resume-close { flex: none; width: 32px; height: 32px; border: 0; background: transparent; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.resume-close:hover { color: var(--action); }
@media (max-width: 600px) { .resume-bar { flex-wrap: wrap; } }
@media print { .resume-bar { display: none; } }
.site-footer strong { font: 600 1.4rem/1.3 var(--body); }
.site-footer .cols { grid-template-columns: 2.4fr 1fr 1.9fr 1.6fr; }
.site-footer .cols { grid-template-columns: 392fr 159fr 333fr 263fr; }
.site-footer .cols > div:first-child { padding-right: 0; }
@media (max-width: 900px) { .site-footer .cols { grid-template-columns: 1fr; } }
/* Le contenu du pied de page est limité en largeur et centré, comme celui de l'en-tête */
.site-footer { padding-left: 24px; padding-right: 24px; }
.site-footer .cols, .site-footer .copy { max-width: 1200px; margin-left: auto; margin-right: auto; }
.site-footer .cols { grid-template-columns: 2.3fr 1fr 1.8fr 1.6fr; gap: 0 48px; }
body.search-page .site-footer { padding-left: calc(24px + var(--filters-offset)); }
/* Pied de page d'après la capture de l'original (affichée à 2000 px : conteneur de 1476 px, texte de 14 px) */
.site-footer { font-size: 14px; line-height: 26px; padding: 100px 24px 14px; }
.site-footer .cols, .site-footer .copy { width: 100%; max-width: 1476px; }
.site-footer .cols { grid-template-columns: 464fr 213fr 400fr 399fr; gap: 0; }
.site-footer .cols > div:first-child { padding-right: 110px; }
.site-footer strong { font: 600 18px/26px var(--body); margin: 0 0 22px; }
.site-footer p { margin: 0 0 26px; }
.site-footer li { margin: 0 0 6px; line-height: 26px; }
.footer-logo { width: 106px; height: auto; margin: 0 auto 28px; }
.site-footer .copy { margin-top: 140px; }
@media (max-width: 900px) { .site-footer .cols { grid-template-columns: 1fr; } .site-footer .cols > div:first-child { padding-right: 0; } }
.site-footer { font-size: 15px; padding-top: 104px; padding-bottom: 8px; }
.site-footer strong { font-size: 19px; }
.footer-logo { width: 120px; }
.site-footer .cols > div:first-child { padding-right: 120px; }
.site-footer .cols > div:nth-child(3) { padding-right: 60px; }
.site-footer .cols > div:nth-child(4) { padding-right: 170px; }
@media (max-width: 900px) { .site-footer .cols > div { padding-right: 0 !important; } }

.doc-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* Orange = appel à l'action. Le bouton PDF est bleu, comme « Ouvrir ci-dessous » ; « Imprimer le Texte » reste orange */
.doc-tools #buttonPDF { background: var(--link); }
.doc-tools #buttonPDF:hover, .doc-tools #buttonPDF:focus-visible { background: var(--navy); }
/* Boutons « Voir le PDF associé » placés dans le corps de certains textes : bleus aussi */
.legal-text button:not(.note-tag) { background: var(--link); color: #fff; }
.legal-text button:not(.note-tag):hover, .legal-text button:not(.note-tag):focus-visible { background: var(--navy); }

/* ---- Colonne de recherche fixe (écrans larges) : comme le sommaire, elle reste collée au bord droit, sous le menu, quand on défile.
   Sa languette est placée un peu plus haut que celle du sommaire (qui est au tiers de l'écran), pour qu'elles ne se chevauchent pas sur un petit écran. ---- */
@media (min-width: 901px) {
  .text-layout { transition: padding .2s; }
  .text-layout:has(.sidebar-right:not(.hide_sidebar_right)) { padding-right: 300px; }
  .sidebar-right { position: fixed; top: var(--header-h); right: 0; bottom: 0; z-index: 50; height: auto; max-height: none; margin: 0 !important; padding-bottom: 90px; overflow-y: auto; }
  .sidebar-right.hide_sidebar_right { transform: translateX(100%); }
  body.text-page .info-band + .text-layout .sidebar-right { margin-top: 0 !important; }
  .slider-right { position: fixed; top: max(calc(var(--header-h) + 12px), calc(100vh / 3 - 140px)); margin-top: 0; right: 300px; z-index: 51; transition: right .2s; }
  .slider-right { right: 300px; }
  .text-layout:not(:has(.sidebar-right:not(.hide_sidebar_right))) .slider-right { right: 0; }  /* no column open: the tabs sit on the edge of the screen */
  #sidebar_slider_espace { top: max(calc(var(--header-h) + 107px), calc(100vh / 3 - 45px)); }  /* under the tab of the search */
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) { .text-layout, .slider-right { transition: none; } }

/* Boutons « Hiérarchique » / « Masquer » / « Me situer » : même arrondi que les autres boutons du site */
.toc-head .pill { border-radius: 2px; }

/* ---- Signalements des lecteurs : fenêtre, bouton au survol du texte, bouton de la colonne de droite ---- */
.note-dialog .report-form { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 12px; margin-top: 0; }
.report-form label { display: grid; gap: 4px; font: 600 14px/1.3 var(--display); color: var(--ink); }
.report-form select, .report-form textarea, .report-form input[type=text], .report-form input[type=url], .report-form input[type=email] { font: 400 16px var(--body); color: var(--ink); background: var(--grey); border: 1px solid transparent; border-radius: 2px; padding: 10px 12px; width: 100%; }
.report-form textarea { resize: vertical; }
.report-where { margin: 0; font-size: .9rem; color: var(--muted); }
.report-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.report-status { min-height: 1.4em; margin: 0; font-size: .95rem; }
.report-status.report-ok { color: #1c6b34; font-weight: 600; } .report-status.report-error { color: #b3261e; font-weight: 600; }
.report-actions { display: flex; justify-content: flex-end; gap: 10px; }
.report-cancel { background: var(--grey); color: var(--ink); } .report-cancel:hover { background: var(--line); }
.ctx-menu { position: fixed; z-index: 70; min-width: 220px; max-width: 320px; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 6px 24px rgba(0, 0, 0, .22); font: 400 .92rem/1.3 var(--body); }
.ctx-menu button { display: block; width: 100%; padding: 8px 12px; border-radius: 3px; background: none; color: var(--ink); font: inherit; text-align: left; }
.ctx-menu button:hover, .ctx-menu button:focus-visible { background: var(--grey); color: var(--hover); outline: none; }
.ctx-menu .ctx-hint { margin: 4px 0 2px; padding: 6px 12px 2px; border-top: 1px solid var(--line); font-size: .75rem; color: var(--muted); }
.sidebar-right .side-check, .mine-panel .side-check { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); cursor: pointer; }
.sidebar-right .side-check input, .mine-panel .side-check input { width: 14px; height: 14px; margin: 0; accent-color: var(--link); }
.sidebar-right .side-report { margin-top: 70px; padding-top: 14px; border-top: 1px solid var(--line); }
.sidebar-right .side-link { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; background: none; color: var(--link); font: 400 .9rem/1.3 var(--body); transition: color .15s ease; }
.sidebar-right .side-link svg { width: 15px; height: 15px; }
.sidebar-right .side-link:hover { background: none; color: var(--hover); }
.notice .report-open { margin-left: 8px; vertical-align: baseline; }
@media print { .ctx-menu, .report-dialog, .sidebar-right .side-report { display: none !important; } }

/* ---- Page de l'équipe : /admin/signalements ---- */
.admin-reports { max-width: 900px; margin: 24px auto 80px; padding: 0 16px; }
.admin-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 12px; }
.admin-bar label { display: grid; gap: 4px; font: 600 14px/1.3 var(--display); }
.admin-bar input, .admin-bar select, .admin-actions select, .admin-actions input { font: 400 15px var(--body); padding: 8px 10px; border: 1px solid var(--line); border-radius: 2px; background: #fff; }
.admin-card { margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 3px; background: #fff; }
.admin-card-head { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; }
.admin-tag { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--grey); font-size: .8rem; }
.admin-meta { margin: 4px 0; color: var(--muted); font-size: .88rem; }
.admin-card blockquote { margin: 8px 0; padding: 6px 12px; border-left: 3px solid var(--line); color: var(--muted); font-size: .9rem; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .admin-actions input { flex: 1; min-width: 160px; }

/* ---- Comptes : connexion, « Mon espace », favoris et recherches enregistrées ---- */
.link-button { padding: 0; background: none; color: var(--link); font: inherit; cursor: pointer; transition: color .15s ease; }
.link-button:hover { background: none; color: var(--hover); }
.link-button.danger { color: #b3261e; } .link-button.danger:hover { color: #8c1d18; }
.account { max-width: 560px; }
/* Page de connexion : image plein écran (les mêmes que l'accueil, avec le même voile bleu) et une carte centrée */
.login-stage { position: relative; display: grid; place-items: center; min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); padding: 40px 16px; background: #6bb7d9 center / cover no-repeat; }
.login-stage::before { content: ""; position: absolute; inset: 0; background: rgba(82, 176, 216, .53); }
.login-card { position: relative; width: min(100%, 460px); padding: 38px 38px 32px; border-radius: 4px; background: #fff; box-shadow: 0 12px 40px rgba(0, 40, 70, .28); }
.login-card h1 { margin: 0 0 12px; font: 700 28px/1.2 var(--display); }
.login-lead { margin: 0 0 18px; color: var(--text); }
.login-perks { margin: 0 0 22px; padding: 0; list-style: none; }
.login-perks li { position: relative; padding: 5px 0 5px 28px; font-size: .95rem; color: var(--ink); }
.login-perks li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 12px; height: 7px; border-left: 2.5px solid var(--link); border-bottom: 2.5px solid var(--link); transform: rotate(-45deg); }
.login-form { margin-top: 0; }
.login-form input[type=email] { padding: 13px 14px; font-size: 1.05rem; }
.login-form button, .login-button { width: 100%; padding: calc(13px + .125em) 18px calc(13px - .125em); text-align: center; font-size: 1.05rem; }
.login-icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 0 16px; border-radius: 50%; background: #e8f3fb; color: var(--link); }
.login-icon svg { width: 28px; height: 28px; }
.login-card .account-ok { margin: 0 0 14px; }
.login-note { margin: 0 0 8px; font-size: .9rem; color: var(--muted); }
@media (max-width: 520px) { .login-card { padding: 28px 22px 24px; } .login-card h1 { font-size: 24px; } }
.account-form { display: grid; gap: 14px; margin-top: 18px; }
.account-form label { display: grid; gap: 4px; font: 600 14px/1.3 var(--display); }
.account-form input[type=email] { font: 400 16px var(--body); color: var(--ink); background: var(--grey); border: 1px solid transparent; border-radius: 2px; padding: 10px 12px; width: 100%; }
.account-form button { justify-self: start; }
.account-ok { padding: 12px 14px; border-left: 3px solid #1c6b34; background: #f0f8f2; color: #1c4d2b; }
.account-error { margin: 0; color: #b3261e; font-weight: 600; }
/* « Mon espace » : bandeau d'accueil avec la recherche, puis des cartes qui chevauchent le bas du bandeau */
.space-hero { position: relative; display: grid; place-items: center; min-height: 190px; padding: 40px 16px 76px; background: #6bb7d9 center / cover no-repeat; text-align: center; color: #fff; }
.space-hero::before { content: ""; position: absolute; inset: 0; background: rgba(82, 176, 216, .53); }
.space-hero-inner { position: relative; width: min(100%, 680px); }
.space-eyebrow { margin: 0 0 4px; font: 500 16px var(--display); letter-spacing: .02em; }
.space-hero h1 { margin: 0; color: #fff; font: 700 clamp(30px, 4.2vw, 42px)/1.15 var(--display); text-shadow: 0 1px 6px rgba(0, 0, 0, .18); }
.space-who { margin: 4px 0 22px; font-size: .95rem; opacity: .95; }
.space-hero .searchbox { max-width: none; margin: 0; }
.space-hero .searchbox input { font-size: 17px; padding: 13px 16px; }
.space-hero .searchbox button { font-size: 17px; padding: .25em 22px 0; }
/* Menu vertical a gauche (les rubriques) et contenu a droite ; sur petit ecran, le menu devient une rangee defilante au-dessus du contenu */
.space-layout { position: relative; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; max-width: 1140px; margin: -44px auto 80px; padding: 0 16px; }
.space-nav { position: sticky; top: calc(var(--header-h) + 16px); padding: 10px; border: 1px solid var(--line); border-radius: 4px; background: #fff; box-shadow: 0 2px 14px rgba(0, 40, 70, .1); }
.space-nav ul { margin: 0; padding: 0; list-style: none; }
.space-nav li + li { margin-top: 2px; }
.space-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-left: 3px solid transparent; border-radius: 3px; color: var(--ink); font: 500 .95rem/1.25 var(--body); transition: background .15s, color .15s; }
.space-nav a svg { flex: none; width: 20px; height: 20px; color: var(--muted); }
.space-nav a:hover { background: var(--grey); color: var(--hover); }
.space-nav a:hover svg { color: var(--hover); }
.space-nav a[aria-current] { border-left-color: var(--action); background: #e8f3fb; color: var(--navy); font-weight: 600; }
.space-nav a[aria-current] svg { color: var(--link); }
.nav-label { flex: 1; min-width: 0; }
.nav-count { flex: none; padding: 0 8px; border-radius: 999px; background: var(--grey); color: var(--muted); font: 600 .75rem/1.7 var(--body); }
.space-nav a[aria-current] .nav-count { background: #fff; color: var(--navy); }
.nav-signout { margin: 8px 0 0; padding: 10px 12px 2px; border-top: 1px solid var(--line); }
.nav-signout .link-button { font-size: .88rem; }
.account-space { display: grid; gap: 20px; align-content: start; min-width: 0; }
@media (max-width: 800px) {
  .space-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: -36px; }
  .space-nav { position: static; padding: 6px; }
  .space-nav ul { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .space-nav li + li { margin: 0; }
  .space-nav a { padding: 9px 12px; white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; border-radius: 3px 3px 0 0; }
  .space-nav a[aria-current] { border-bottom-color: var(--action); }
  .nav-signout { display: none; }
}
.space-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.space-grid > :only-child { grid-column: 1 / -1; }
.space-card { min-width: 0; padding: 22px 24px; border: 1px solid var(--line); border-radius: 4px; background: #fff; box-shadow: 0 2px 14px rgba(0, 40, 70, .1); }
.space-card h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 0; border: 0; font: 600 19px/1.25 var(--display); }
.space-card h2 svg { flex: none; width: 22px; height: 22px; color: var(--link); }
.space-card .count { padding: 1px 9px; border-radius: 999px; background: var(--grey); color: var(--muted); font: 600 .8rem/1.6 var(--body); }
.space-start { border-color: #f0d9c8; background: var(--cream); }
.start-steps { margin: 0; padding: 0; list-style: none; }
.start-steps li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 13px 0; border-top: 1px solid #f0d9c8; }
.start-mark { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--link); color: #fff; font: 700 15px/1 var(--display); }
.start-steps .is-done .start-mark { background: #1c6b34; }
.start-steps .is-done { opacity: .75; }
.start-body { flex: 1 1 260px; min-width: 0; }
.start-body strong { display: block; font: 600 16px/1.3 var(--display); }
.start-body span { color: var(--text); font-size: .93rem; }
.start-go { flex: none; margin-left: auto; }
.space-empty { padding: 6px 0 2px; text-align: center; color: var(--text); }
.space-empty p { margin: 0 0 6px; }
.space-empty .button { margin-top: 10px; }
.space-foot { margin: 10px 0 0; font-size: .9rem; }
.space-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.folder-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 3px; background: #fff; color: var(--ink); transition: border-color .15s, background .15s; }
.folder-tile:hover { border-color: var(--link); background: #f6fafd; color: var(--ink); }
.folder-tile svg { grid-row: 1 / 3; width: 26px; height: 26px; color: var(--link); }
.folder-name { overflow: hidden; font: 600 .95rem/1.3 var(--body); text-overflow: ellipsis; white-space: nowrap; }
.folder-count { color: var(--muted); font-size: .82rem; }
.folder-create { margin: 0 0 18px; }
.folder-create > label, .folder-new > label { display: block; margin: 0 0 4px; font: 600 14px/1.3 var(--display); }
.folder-new-row { display: flex; gap: 8px; }
.folder-new-row input { flex: 1; min-width: 0; font: 400 16px var(--body); color: var(--ink); background: var(--grey); border: 1px solid transparent; border-radius: 2px; padding: 10px 12px; }
.folder-back { margin: 0 0 6px; font-size: .9rem; }
.folder-tools { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.folder-actions { margin: 0; font-size: .9rem; color: var(--muted); }
.folder-rename { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.folder-rename input { flex: 1 1 220px; min-width: 0; font: 400 16px var(--body); color: var(--ink); background: var(--grey); border: 1px solid transparent; border-radius: 2px; padding: 9px 12px; }
.folder-dialog { width: min(480px, calc(100vw - 32px)); }
.folder-help { margin: 0 0 10px; color: var(--text); font-size: .93rem; }
.folder-list { max-height: 280px; margin: 0 0 14px; padding: 0; overflow-y: auto; list-style: none; border: 1px solid var(--line); border-radius: 3px; }
.folder-list li + li { border-top: 1px solid var(--line); }
.folder-list label { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; }
.folder-list label:hover { background: var(--grey); }
.folder-list li.on { background: #f1f8fd; }
.folder-list li.on label span { color: var(--navy); font-weight: 600; }
.folder-list input { flex: none; width: 17px; height: 17px; margin: 0; accent-color: var(--link); }
.folder-list label span { flex: 1; min-width: 0; font-weight: 500; }
.folder-list small { flex: none; color: var(--muted); }
.folder-none { padding: 12px; color: var(--muted); font-size: .92rem; }
.note-dialog .folder-new { display: block; margin: 0 0 6px; }
.note-dialog .folder-new[hidden], .folder-new-open[hidden] { display: none; }
.folder-new-open { display: block; width: 100%; margin: 0 0 6px; padding: 8px 12px; text-align: left; background: none; color: var(--link); font: 500 .92rem/1.3 var(--body); }
.folder-new-open:hover { background: var(--grey); color: var(--hover); }
.folder-new-row .button-ghost { flex: none; padding: calc(9px + .125em) 14px calc(9px - .125em); font-size: .92rem; }
.folder-dialog .folder-status { min-height: 0; margin: 0 0 10px; padding: 8px 12px; border-radius: 3px; background: #eef7f0; font-size: .9rem; line-height: 1.35; }
.folder-dialog .folder-status:empty { display: none; }
.folder-dialog .folder-status.report-error { background: #fdeceb; }
.sidebar-right .folder-button { margin-top: 8px; }
.sidebar-right .folder-button.has { background: #e8f3fb; border-color: #b9d8ee; color: var(--navy); }
.sidebar-right .folder-button.has:hover { background: var(--navy); color: #fff; }
@media (max-width: 800px) { .space-grid > :last-child:nth-child(odd) { grid-column: auto; } }
.space-resume { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; border-left: 4px solid var(--link); }
.sr-main { flex: 1 1 320px; min-width: 0; }
.sr-eyebrow { margin: 0 0 4px; color: var(--muted); font: 600 .78rem/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.space-resume h2 { margin: 0 0 6px; font: 600 1.15rem/1.35 var(--body); }
.space-resume h2 a { color: var(--link); } .space-resume h2 a:hover { color: var(--hover); }
.sr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; }
.sr-seen { color: var(--muted); font-size: .85rem; }
.sr-where { margin-top: 10px; font-size: .9rem; color: var(--text); }
.sr-track { display: block; height: 5px; margin-top: 6px; border-radius: 999px; background: var(--grey); overflow: hidden; }
.sr-fill { display: block; height: 100%; border-radius: 999px; background: var(--link); }
.sr-go { flex: none; margin-left: auto; }
.card-list { margin: 0; }
.card-list > .card { padding: 13px 0; border-top: 1px solid var(--line); }
.card-list > .card:first-child { padding-top: 2px; border-top: 0; }
.card-list .card h3 { font-size: 1rem; }
.card-actions { margin-top: 4px; text-align: right; font-size: .85rem; }
.card-actions .account-date { font-size: .85rem; }
.space-account p { margin: 0 0 10px; font-size: .93rem; color: var(--text); }
@media (max-width: 800px) { .space-grid { grid-template-columns: minmax(0, 1fr); } .space-hero { padding-bottom: 76px; } .space-card { padding: 18px 16px; } .start-go { margin-left: 46px; } }
.account-list { margin: 0; padding: 0; list-style: none; }
.account-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.account-list li > :last-child { flex: none; }
.account-date { color: var(--muted); font-size: .85rem; }
.account-empty { color: var(--muted); }
.account-status { padding: 2px 10px; border-radius: 999px; background: var(--grey); font-size: .8rem; font-weight: 600; }
.account-status.status-traite { background: #e3f3e7; color: #1c4d2b; } .account-status.status-refuse { background: #fbe9e7; color: #8c1d18; }
/* « Enregistrer la recherche » : un bouton à contour dans le groupe d'actions de la barre de résultats (à gauche du tri) ; plein et bleu clair une fois enregistrée */
.save-search-btn { display: inline-block; align-self: center; padding: calc(6px + .125em) 12px calc(6px - .125em); border: 1px solid var(--link); border-radius: 2px; background: #fff; color: var(--link); font: 500 .88rem/1.2 var(--body); white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.save-search-btn:hover { background: var(--link); color: #fff; }
.save-search-btn.is-saved { border-color: #b9d8ee; background: #e8f3fb; color: var(--navy); }
.save-search-btn.is-saved:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.sidebar-right .fav-button { width: 100%; padding: calc(9px + .125em) 14px calc(9px - .125em); background: #fff; color: var(--link); border: 1px solid var(--link); font-size: .95rem; }
.sidebar-right .fav-button:hover { background: var(--link); color: #fff; }
.sidebar-right .fav-button[aria-pressed=true] { background: var(--link); color: #fff; } .sidebar-right .fav-button[aria-pressed=true]:hover { background: var(--navy); }
.sidebar-right .side-links { margin: 8px 0 0; font-size: .82rem; line-height: 1.4; color: var(--muted); }
@media print { .sidebar-right .fav-button, .sidebar-right .side-links { display: none !important; } }

/* ---- Texte sans version web : invitation à demander la version web, avec le compteur public ---- */
.html-demand { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; margin: 20px 0; padding: 20px 22px; border: 1px solid #cfe2f0; border-left: 5px solid var(--link); border-radius: 4px; background: linear-gradient(100deg, #eef6fc, #f7fbfe); }
.html-demand .demand-icon[hidden] { display: none; }
.html-demand .demand-icon, .demand-tile { box-sizing: border-box; align-self: start; flex: none; width: 68px; height: 68px; border-radius: 10px; }  /* same slot: the counter replaces the icon without the layout moving */
.html-demand .demand-icon { padding: 15px; background: var(--link); color: #fff; }
.html-demand .demand-title { margin: 0 0 4px; font: 600 1.2rem/1.3 var(--display); color: var(--ink); }
.html-demand .demand-text { margin: 0 0 12px; color: var(--text); font-size: .95rem; line-height: 1.5; }
.demand-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
a.demand-cta { display: inline-block; text-decoration: none; }
.demand-cta, .demand-btn { padding: calc(10px + .125em) 18px calc(10px - .125em); border: 1px solid var(--link); border-radius: 2px; background: var(--link); color: #fff; font: 600 .95rem/1.2 var(--body); cursor: pointer; transition: background .15s, color .15s; }
.demand-cta:hover, .demand-btn:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.demand-cta:disabled, .demand-btn:disabled { cursor: default; }
.demand-cta.is-done, .demand-btn.is-done { background: #e8f3fb; border-color: #b9d8ee; color: var(--navy); }
.demand-more { font-size: .9rem; }
.html-demand .report-status { margin: 8px 0 0; }
.demand-tile { display: grid; align-content: center; justify-items: center; gap: 1px; margin: 0; background: var(--navy); color: #fff; text-align: center; }
.demand-tile[hidden] { display: none; }
.demand-tile strong { font: 700 1.9rem/1 var(--display); }
.demand-tile span { font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; }
.demand-tile.pop { animation: demand-pop .4s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes demand-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .demand-tile.pop { animation: none; } }
@media (max-width: 700px) { .html-demand { gap: 14px; padding: 16px; } .html-demand .demand-icon, .demand-tile { width: 56px; height: 56px; } .html-demand .demand-icon { padding: 12px; } .demand-tile strong { font-size: 1.5rem; } }

/* ---- Liste publique des textes demandés (accueil et /textes-demandes) ---- */
.demand-intro { max-width: 760px; margin: 0 auto 22px; text-align: center; color: var(--text); line-height: 1.55; }
.demand-side { display: grid; flex: none; justify-items: end; gap: 6px; }
/* Accueil : une carte de l'accueil par ligne, le compteur et le bouton à côté */
.demand-cards { display: grid; gap: 22px; }
.demand-row { display: flex; align-items: center; gap: 18px; }
.demand-row > .law-card { flex: 1 1 auto; min-width: 0; align-self: stretch; justify-content: center; }
.demand-row .demand-side { justify-items: center; width: 124px; text-align: center; }
.law-card-missing { --accent: #5f87a8; }
.dtag-missing, .dtag-missing:hover, .dtag-missing:focus-visible { background: #5f87a8; cursor: default; }  /* a label, not a link: no hover change, no pointer */
.law-meta .dtag { font-size: 12px; line-height: 1.5; position: relative; top: -2px; }  /* the tag shares the metadata line, as in the search list */
@media (max-width: 700px) { .demand-row { gap: 10px; } .demand-row .demand-side { width: 96px; } }
.demand-title-plain { font-weight: 600; line-height: 1.35; color: var(--ink); }
.demand-missing-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #fff3e8; color: #9a4a10; font-size: .76rem; font-weight: 600; }
.demand-num { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.demand-num strong { margin-right: 3px; color: var(--navy); font-size: 1.1rem; }
.demand-all { margin: 14px 0 0; text-align: center; }
#demandes { max-width: 900px; padding-bottom: 8px; }  /* the home section is as wide as the dedicated page */
/* Même principe que la page de recherche : fond gris, et la carte blanche remonte sur le bandeau bleu */
body.requested-body { background: var(--grey); --card-overlap: 30px; }
body.requested-body .requested-page { position: relative; z-index: 1; max-width: 900px; margin-top: calc(var(--card-overlap) * -1); padding: 44px clamp(18px, 4.3vw, 56px) 56px; border-radius: 3px; background: #fff; box-shadow: 0 0 4px rgba(0, 0, 0, .5); }
.requested-page .demand-intro { margin-bottom: 18px; }
#missing-dialog textarea { width: 100%; font: 400 16px var(--body); color: var(--ink); background: var(--grey); border: 1px solid transparent; border-radius: 2px; padding: 10px 12px; resize: vertical; }
@media (max-width: 700px) { .demand-row { gap: 10px; } .demand-btn { padding: calc(8px + .125em) 10px calc(8px - .125em); font-size: .85rem; } }
@media print { .html-demand, .demand-btn { display: none !important; } }

/* Titre et sous-titre du texte (en tête du corps) : collés l'un à l'autre */
.legal-text .doc_title:has(+ .doc_subtitle) { margin-bottom: 0; }
.legal-text .doc_title + .doc_subtitle { margin-top: 0; }
.html-demand .report-status:empty { display: none; }
.demand-text .demand-more { font-size: inherit; }

.html-demand.missing-band { margin-top: 30px; }
.html-demand .demand-title { text-align: left; }  /* a title inside .section keeps the card's own look */
.html-demand .demand-title::after { display: none; }

/* ---- Alertes : suivre un texte (colonne de droite) et la rubrique « Alertes » de Mon espace ---- */
.sidebar-right .follow-button { margin-top: 8px; }
.sidebar-right .follow-button.has { background: #e8f3fb; border-color: #b9d8ee; color: var(--navy); }
.sidebar-right .follow-button.has:hover { background: var(--navy); color: #fff; }
.sidebar-right .follow-email { margin-top: 6px; padding-top: 0; border-top: 0; }
.sidebar-right .follow-email[hidden] { display: none; }
.news-cards .read-item.is-new .card { background: #f3f9fd; }
.news-new { padding: 1px 8px; border-radius: 999px; background: var(--link); color: #fff; font: 600 .72rem/1.6 var(--body); text-transform: uppercase; letter-spacing: .04em; }
.count-new { background: var(--link); color: #fff; }
.follow-list li { align-items: center; gap: 12px 18px; flex-wrap: wrap; }
.follow-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; }
.follow-mail { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--text); cursor: pointer; }
.follow-mail[hidden] { display: none; }
.follow-mail input[type=checkbox] { width: 15px; height: 15px; margin: 0; accent-color: var(--link); }
.follow-mail select { padding: 4px 8px; border: 1px solid var(--line); border-radius: 2px; font: 400 .9rem var(--body); background: #fff; }
.follow-pill { padding: 4px 12px; border: 1px solid var(--link); border-radius: 999px; background: #fff; color: var(--link); font: 600 .82rem/1.4 var(--body); cursor: pointer; }
.follow-pill:hover { background: var(--link); color: #fff; }
.follow-pill.is-on { background: #e8f3fb; border-color: #b9d8ee; color: var(--navy); }
.follow-pill.is-on:hover { background: var(--navy); color: #fff; }
.follow-pill.is-on::before { content: "🔔 "; }
.disc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.disc-chip { display: inline-flex; align-items: center; }
.disc-chip .follow-pill { padding: 5px 12px; }
.disc-chip .follow-pill.is-on { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-width: 0; }
.disc-chip .follow-pill.is-on + .mail-toggle { display: inline-block; }
.mail-toggle { padding: 4px 9px; border: 1px solid #b9d8ee; border-radius: 0 999px 999px 0; background: #fff; color: var(--muted); font: 400 .9rem/1.4 var(--body); cursor: pointer; }
.mail-toggle[hidden] { display: none; }
.mail-toggle.is-on { background: var(--link); border-color: var(--link); color: #fff; }
.mail-toggle:hover { color: var(--link); } .mail-toggle.is-on:hover { background: var(--navy); color: #fff; }
.alerts-settings { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.space-hint { margin: 0 0 10px; color: var(--muted); font-size: .92rem; line-height: 1.5; }
#follow-status { min-height: 1.4em; }
@media print { .sidebar-right .follow-button, .sidebar-right .follow-email { display: none !important; } }

/* Disciplines à suivre : les mêmes étiquettes rectangulaires colorées que partout sur le site. Suivie = pleine couleur (avec 🔔) ; non suivie = contour de la couleur */
.disc-chips { gap: 8px 6px; }
.disc-chip .follow-pill { padding: 2px 7px 1px; border: 1px solid var(--tag, var(--link)); border-radius: 4px; background: #fff; color: var(--tag, var(--link)); font: 400 14px/1.6 var(--body); text-transform: uppercase; transition: background .15s, color .15s; }
.disc-chip .follow-pill:hover, .disc-chip .follow-pill:focus-visible { background: var(--tag, var(--link)); color: #fff; }
.disc-chip .follow-pill.is-on { background: var(--tag, var(--link)); border-color: var(--tag, var(--link)); color: #fff; border-right-width: 1px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.disc-chip .follow-pill.is-on:hover, .disc-chip .follow-pill.is-on:focus-visible { background: var(--tag-hover, var(--navy)); border-color: var(--tag-hover, var(--navy)); }
.disc-chip .mail-toggle { padding: 2px 8px 1px; border: 1px solid var(--tag, var(--link)); border-left-color: rgb(255 255 255 / .55); border-radius: 0 4px 4px 0; background: #fff; color: var(--tag, var(--link)); font: 400 14px/1.6 var(--body); }
.disc-chip .mail-toggle:hover, .disc-chip .mail-toggle:focus-visible { background: var(--tag-hover, var(--navy)); color: #fff; }
.disc-chip .mail-toggle.is-on { background: var(--tag, var(--link)); color: #fff; }
.disc-chip .mail-toggle.is-on:hover { background: var(--tag-hover, var(--navy)); }

/* « Se connecter pour demander » : un lien qui a l'allure du bouton « Moi aussi » (les visiteurs non connectés ne peuvent pas ajouter leur voix) */
a.demand-btn { display: inline-block; text-align: center; text-decoration: none; }
a.demand-btn { min-width: 9.5rem; }
@media (max-width: 700px) { a.demand-btn { min-width: 0; } }

/* Pied de page : les quatre colonnes forment un seul groupe resserré, centré sous la page (largeur de chaque colonne = largeur de son texte) */
@media (min-width: 901px) {
  .site-footer .cols { display: grid; grid-template-columns: minmax(0, 344px) auto minmax(0, 340px) minmax(0, 240px); column-gap: clamp(24px, 3.2vw, 52px); justify-content: center; width: fit-content; max-width: 100%; }
  .site-footer .cols > div, .site-footer .cols > div:first-child, .site-footer .cols > div:nth-child(3), .site-footer .cols > div:nth-child(4) { padding-right: 0; }
}

/* ---- Accueil : les photos défilent derrière la zone de recherche (fondu), la légende nomme le photographe ---- */
.hero { overflow: hidden; }
.hero > .hero-slides { position: absolute; inset: 0; z-index: 0; width: auto; }  /* plus précis que « .hero > div » (largeur et position du contenu) */
.hero-slide { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transition: opacity .8s ease; }
.hero-slide.is-on { opacity: 1; }
.hero::before { z-index: 1; }
.hero > div:not(.hero-slides) { z-index: 2; }
.hero-credit { position: absolute; z-index: 2; right: 18px; bottom: 14px; max-width: min(60%, 560px); margin: 0; text-align: right; color: #fff; font: 400 14px/1.35 var(--body); text-shadow: 0 0 3px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .5); }
.hero-more { z-index: 2; }
@media (max-width: 700px) { .hero-credit { left: 12px; right: 12px; bottom: 70px; max-width: none; text-align: center; font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } }
@media print { .hero-credit { display: none; } }

/* ---- Articles : adresse propre (#art-75) et message « copié » du menu clic droit ---- */
.legal-text p.art { scroll-margin-top: calc(var(--header-h) + 30vh); }
#ctx-toast { position: fixed; left: 50%; bottom: 28px; z-index: 90; margin: 0; padding: 9px 18px; border-radius: 3px; background: var(--ink); color: #fff; font: 500 .92rem/1.3 var(--body); box-shadow: 0 2px 10px rgba(0, 0, 0, .3); transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
#ctx-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { #ctx-toast { transition: none; } }
@media print { #ctx-toast { display: none; } }

/* ---- Jurisprudence : liste et page d'une décision ---- */
body.decision-page .info-band + .decision-layout { margin-top: calc(var(--card-overlap, 30px) * -1); }
.decision-layout { display: block; }
.decision-layout .document { max-width: 960px; }
.decision-subtitle { margin: -6px 0 18px; color: var(--muted); font-size: 1.02rem; line-height: 1.5; }
.decision .principle { font-style: normal; }
.solution { display: inline-block; padding: 1px 8px; border-radius: 3px; background: #e8f3fb; color: var(--navy); font-weight: 600; font-size: .85em; }
.solution-cassation, .solution-cassation-partielle { background: #fdeede; color: #8f3d00; }
.solution-rejet { background: #e8f3fb; color: var(--navy); }
.decision-summary { margin: 26px 0 8px; padding: 20px 22px; background: #f5f9fc; border: 1px solid #d6e6f2; border-left: 5px solid var(--blue); border-radius: 3px; }
.decision-summary h2 { margin: 0 0 6px; font: 700 1.3rem/1.3 var(--display); color: var(--ink); }
.decision-summary h3 { margin: 22px 0 8px; font: 600 1.05rem/1.35 var(--display); color: var(--navy); }
.decision-summary p, .decision-summary li { line-height: 1.55; }
.summary-note { margin: 0 0 14px; color: var(--action); font-size: .92rem; }
.en-bref { margin: 0 0 4px; }
.en-bref-block { position: relative; padding-top: 12px; }
/* Le trait orange prend la place du trait bleu du conteneur (même colonne, 5 px), sur la hauteur du « En bref » seulement : il reste collé au groupe */
.en-bref-block::before { content: ""; position: absolute; left: -27px; top: 0; bottom: 0; width: 5px; background: var(--orange); }
.decision-summary h3.en-bref-title { margin-top: 0; color: var(--action); }  /* le sous-titre « En bref » en orange, le texte dans le conteneur bleu comme le reste */
.grounds { margin: 0; padding-left: 1.3em; }
.grounds > li { margin: 0 0 14px; }
.grounds p { margin: 0 0 4px; }
.ground-label { font-weight: 600; color: var(--ink); }
.ground-answer { padding-left: 10px; border-left: 3px solid #d6e6f2; }
.sort { display: inline-block; padding: 0 7px; border-radius: 3px; background: #eceff3; color: var(--text); font-weight: 600; font-size: .85em; }
.sort-accueilli { background: #e3f4e8; color: #1d6b36; }
.sort-rejete { background: #fdeede; color: #8f3d00; }
.cited { margin: 0; padding-left: 1.2em; }
.cited li { margin: 0 0 8px; }
.cited-usage { display: block; color: var(--muted); font-size: .92rem; }
.cited-note { color: var(--muted); font-size: .9rem; }
.keywords { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.keyword { padding: 2px 9px; border: 1px solid var(--link); border-radius: 3px; background: #fff; color: var(--link); font-size: .86rem; text-decoration: none; }
.keyword:hover { background: var(--link); color: #fff; }
.decision-text { margin-top: 18px; }
.decision-source { word-break: break-all; }
.juris-list { max-width: 960px; margin: 0 auto; }
.juris-search .searchbox { max-width: none; margin: 0 0 12px; }
.juris-filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; margin-bottom: 8px; }
.juris-filters label { display: grid; gap: 3px; font-size: .85rem; color: var(--muted); }
.juris-filters select { min-width: 150px; max-width: 280px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 3px; background: #fff; color: var(--ink); font: 400 .95rem var(--body); }
.juris-reset { align-self: center; padding: 8px 4px; }
.results-count { margin: 18px 0 14px; color: var(--text); }
.juris-cards { display: grid; gap: 14px; }
.juris-card { --accent: var(--blue); }
.juris-snippet { margin: 8px 0 0; color: var(--text); line-height: 1.5; font-size: .96rem; }
.juris-chamber, .juris-dossier { color: var(--text); }
@media (max-width: 700px) { .decision-summary { padding: 16px 14px; } .juris-filters select { min-width: 0; width: 100%; max-width: none; } .juris-filters label { flex: 1 1 140px; } }
/* Impression : l'aperçu est long, il doit pouvoir se couper entre deux pages (sans quoi il part en bloc sur la page suivante et laisse un grand blanc) ;
   on évite seulement de séparer un titre de son texte et de couper au milieu d'un moyen, d'un « En bref » ou d'un texte cité */
@media print {
  .decision-summary { background: none; break-inside: auto; }
  .decision-summary h2, .decision-summary h3 { break-after: avoid; }
  .decision-summary .grounds > li, .decision-summary .en-bref-block, .decision-summary .cited li { break-inside: avoid; }
}

/* Favoris de la jurisprudence : l'étoile d'une carte et le bouton d'une décision */
.fav-button { padding: calc(8px + .125em) 14px calc(8px - .125em); border: 1px solid var(--link); border-radius: 2px; background: #fff; color: var(--link); font: 600 .9rem/1.2 var(--body); text-decoration: none; cursor: pointer; }
.fav-button:hover, .fav-button:focus-visible { background: var(--link); color: #fff; }
.fav-button.is-on { background: #e8f3fb; border-color: #b9d8ee; color: var(--navy); }
@media print { .fav-button { display: none !important; } }
/* L étiquette de solution dans la ligne d une carte : un peu remontée, pour que son texte soit à la hauteur de celui de la chambre et du dossier */
.decision-card .meta .solution { position: relative; top: -1px; }
/* « IA - Aperçu » : le résumé est rédigé par une IA, l'étiquette le dit avant le texte */
.ia-label { position: relative; top: -2px; display: inline-block; margin-right: 6px; padding: 0 7px; border-radius: 3px; background: #eef1f5; color: var(--text); font: 600 .78rem/1.6 var(--body); }
/* Les passages de l'arrêt où se trouvent les mots cherchés (après l'aperçu IA) */
.snippet-found { margin-top: 4px; padding-left: 10px; border-left: 3px solid #ffe58a; color: var(--text); font-size: .9rem; line-height: 1.5; }
/* Page d'une décision : plus de marge à gauche et à droite dans la page blanche (le texte d'un arrêt est long, il respire mieux) */
.decision-layout .document { padding-left: 64px; padding-right: 64px; }
@media (max-width: 900px) { .decision-layout .document { padding-left: 24px; padding-right: 24px; } }
/* Mots-clés officiels : écrits en majuscules par le site de la Cour, affichés en minuscules avec la première lettre en capitale */
.meta-line .keywords { margin: 2px 0 0; }
.meta-line .keyword { text-transform: lowercase; }
.meta-line .keyword::first-letter { text-transform: uppercase; }
/* Pages de texte : les colonnes de gauche et de droite réduisent la page blanche sur un écran moyen, les marges aussi */
@media (min-width: 901px) and (max-width: 1300px) { .text-layout .document { padding-left: 40px; padding-right: 40px; } }
@media (min-width: 901px) and (max-width: 1100px) { .text-layout .document { padding-left: 24px; padding-right: 24px; } }
.doc-sep + .decision-summary { margin-top: 0; }  /* le séparateur donne déjà l'espace avant l'aperçu */
/* Liens de la page d'une décision (source, textes cités) : comme tous les liens du site, bleu au repos, orange au survol, en gras dans le texte */
.decision-source a, .cited a { font-weight: 600; transition: color .15s ease; }
.decision-source a:hover, .decision-source a:focus-visible, .cited a:hover, .cited a:focus-visible { color: var(--hover); }
@media (prefers-reduced-motion: reduce) { .decision-source a, .cited a { transition: none; } }
/* La colonne « Mon espace » d'une page de décision a la taille de texte de celle de la recherche (la colonne des textes est en .9rem) */
.sidebar-right .mine-links a { font-size: 1rem; }
.sidebar-right .nav-count { font-size: .8rem; }

/* Petit bouton « > » au-dessus des onglets de droite : il ferme la colonne ouverte, quelle qu'elle soit (visible seulement quand une colonne est ouverte) */
.slider-close { display: none; }
@media (min-width: 901px) {
  .slider-close { position: fixed; right: 300px; z-index: 51; width: 36px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px 0 0 6px; background: var(--action); color: #fff; box-shadow: -2px 2px 6px rgba(0,0,0,.18); cursor: pointer; top: max(calc(var(--header-h) + 12px), calc(100vh / 3 - 140px)); }
  .slider-close svg { width: 16px; height: 16px; }
  .slider-close:hover, .slider-close:focus-visible { background: var(--action-dark); }
  /* like the tabs, it follows the edge of the column as it slides: when no column is open it waits out of sight beyond the edge of the screen */
  .slider-close { transition: right .2s, visibility 0s; }
  .text-layout:not(:has(.sidebar-right:not(.hide_sidebar_right))) .slider-close { right: -40px; visibility: hidden; transition: right .2s, visibility 0s .2s; }
  /* the tabs make room for it: they move down by its height and a gap */
  #sidebar_slider_right { top: max(calc(var(--header-h) + 48px), calc(100vh / 3 - 104px)); }
  #sidebar_slider_espace { top: max(calc(var(--header-h) + 143px), calc(100vh / 3 - 9px)); }
  /* a page of a decision has the one column: its tab is the first one */
  .decision-page .slider-close { top: max(calc(var(--header-h) + 12px), calc(100vh / 3 - 140px)); }
  .decision-page #sidebar_slider_espace { top: max(calc(var(--header-h) + 48px), calc(100vh / 3 - 104px)); }
}
@media (prefers-reduced-motion: reduce) { .slider-close { transition: none !important; } }
@media print { .slider-close { display: none !important; } }
/* Impression : la page A4 fait moins de 900 px de large, donc les règles « téléphone » s'appliquent. Le bas de page qui laisse la place à la barre d'outils du téléphone
   (64 px) n'a aucun sens sur papier : il débordait sur une dernière page blanche. */
@media print { body, body.text-page, body.decision-page { padding-bottom: 0 !important; margin-bottom: 0 !important; } }
.sidebar-right .mine-links { margin-top: 16px; }
/* L'étoile pleine « Dans vos favoris » : juste après le titre d'une page et d'une carte */
.fav-mark { margin-left: .4em; color: #b36b00; font-size: .8em; line-height: 1; vertical-align: .08em; }
.fav-mark[hidden] { display: none; }
@media print { .fav-mark { display: none !important; } }

.follow-actions .link-button { font-size: .85rem; }
.follow-actions .follow-mail { font-size: .85rem; }

/* L'historique de lecture : chaque lecture est une carte, la date de lecture est dessous, hors de la carte */
.read-cards { display: grid; gap: 14px; }
.read-cards .card { padding: 14px 18px 14px 16px; border: 1px solid var(--line); border-left: 5px solid var(--accent, var(--line)); border-radius: 3px; background: #fff; }  /* the bar takes the colour of the discipline, like the cards of the home page */
.read-cards .card:first-child { padding-top: 14px; }
.read-date { margin: 4px 4px 0; text-align: right; font-size: .85rem; color: var(--muted, #6b7280); }

/* La petite croix qui ferme « Pour bien démarrer », en haut à droite de la section */
.space-start { position: relative; }
.space-start[hidden] { display: none; }
.start-close { position: absolute; top: 10px; right: 12px; width: 28px; height: 28px; padding: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; transition: color .15s ease, background .15s ease; }
.start-close:hover { background: rgba(0, 0, 0, .06); color: var(--hover); }

/* Titres des groupes des colonnes (gauche et droite) : plus discrets */
.filters-title, .mine-title, .page-toc .toc-head h2 { font-size: 18px; gap: 8px; }
.filters-title svg, .mine-title svg { width: 24px; height: 24px; }
.page-toc .toc-head h2 .toc-icon, .toc-icon { width: 20px; height: 20px; }
.sidebar-right .side-title { font-size: 17px; gap: 8px; }
.sidebar-right .side-icon, .side-icon { width: 20px; height: 20px; }

/* « Mon espace » reste un bouton du menu, connecté ou non ; sur sa page il passe à l'orange, sans le soulignement des autres liens */
.site-header nav a.nav-login[aria-current] { background: var(--hover); color: #fff; border-bottom: 0; }