/* 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: 60px; --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(--blue); }  /* trait fin bleu sous le menu */
.brand img { display: block; height: 38px; width: auto; }
.site-header nav { display: flex; height: 100%; }
.nav-links { display: contents; }  /* sur grand écran les liens sont ceux du menu, côte à côte */
.nav-toggle { display: none; }
.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); border-bottom-color: var(--hover); }  /* au survol : texte orange et trait épais orange dessous */
.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) 22px calc(9px - .125em); border: 0; border-radius: 999px; 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) 22px calc(10px - .125em); border: 0; border-radius: 999px; 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: 12px; 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 input { border-radius: 999px 0 0 999px; padding-left: 22px; }
.searchbox button { border-radius: 0 999px 999px 0; padding-right: 26px; }

/* ---- 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: linear-gradient(to top right, rgba(30, 70, 120, .55), rgba(55, 140, 195, .38) 55%, rgba(120, 210, 235, .22)); }
.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; }
.linked-case-law { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.case-law-intro, .case-law-articles { color: var(--muted); }
.case-law-intro { margin: 4px 0 0; }
.case-law-more { margin-top: 12px; }
.case-law-overview, .linked-case-law .snippet-locked { margin: 8px 0 0; }
.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; }
#drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 70; }

/* ---- Footer ---- */
.narrow { max-width: 900px; margin: 0 auto; padding: 24px 16px; }
.notfound .searchbox { margin-top: 16px; }

@media (max-width: 900px) {
  :root { --header-h: 52px; }
  .site-header { padding: 0 12px; gap: 8px; }
  .brand img { height: 30px; }
  .search-layout { padding: 0 8px; }
  .text-layout { display: block; }
  .document { padding: 18px 16px 110px; margin: 12px 8px 40px; 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; }
  #to-top, .text-layout:has(.sidebar-right:not(.hide_sidebar_right)) ~ #to-top { right: 14px; bottom: 20px; }
}
@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 input { border-radius: 999px; }
  .searchbox button { border-radius: 999px; 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: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-start; }
.info-band .head { flex: 0 1 300px; min-width: 0; padding: 11px 0; }  /* le titre tient sur deux lignes : le reste de la largeur va aux textes */
.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 { flex: 1 1 470px; min-width: 0; display: grid; max-width: 772px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 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 { gap: 6px 24px; align-items: center; }
.info-band.compact .head { flex-basis: 260px; }
.info-band.compact .text { flex-basis: 380px; }
.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 .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: 999px; 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 14px; background: var(--grey); color: var(--ink); border: 1px solid transparent; border-radius: 12px; 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 11px 18px; font-size: 1rem; border-radius: 999px 0 0 999px; }
.panel-search button { flex: none; width: 52px; padding: 0 4px 0 0; border-radius: 0 999px 999px 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 */
/* (en rangée qui passe à la ligne : quand la place manque, le tri et « par page » descendent sous le nombre au lieu de l'écraser) */
.results .results-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; }
.results .results-bar .back-link { padding-right: 20px; font-size: .95rem; white-space: nowrap; }
.results .results-bar .count-line { flex: 1 1 230px; 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 { flex: 0 1 auto; padding-left: 20px; }
@media (max-width: 767px) {
  .results .results-bar { flex-direction: column; align-items: stretch; gap: 8px; }
  .results .results-bar .back-link { padding-right: 0; }
  .results .results-bar .count-line { flex: 0 0 auto; text-align: left; padding: 0; min-height: 0; border: 0; }  /* en colonne, le « 230px » de la ligne précédente deviendrait une hauteur */
  .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; } }

.sidebar-search { padding: 0; }
.sidebar-search .search-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 16px 90px; scrollbar-width: thin; }
.sidebar-search .side-title { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font: 600 20px/1.2 var(--display); color: var(--ink); }
.sidebar-search .side-title-filters { margin-top: 6px; }
.sidebar-search .side-icon { width: 22px; height: 22px; flex: none; color: var(--ink); }
.sidebar-search .panel-search { margin-bottom: 14px; }
.sidebar-search .panel-search input { padding: 10px 12px; font-size: .95rem; }
.sidebar-search .actions-row { position: sticky; bottom: -90px; padding: 12px 0; background: #fff; border-top: 1px solid var(--line); }

/* 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; } }
/* ---- 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: flex; flex-wrap: wrap; 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 { flex: 1 1 380px; min-width: 0; 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 { flex: 0 0 auto; padding: calc(12px + .125em) 28px calc(12px - .125em); border: 1px solid #fff; border-radius: 999px; text-transform: uppercase; font: 700 17px/1 var(--body); white-space: nowrap; }
@media (max-width: 900px) { .strip-wrap { padding: 28px 12px; } .promo-strip { padding: 56px 20px 32px 28px; border-left-width: 12px; } .strip-icon { left: -11px; top: -30px; width: 44px; height: 44px; } .promo-strip h2::after { margin-top: 24px; } }
@media print { .strip-wrap { display: 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; }

/* « 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 { flex: none; white-space: nowrap; font-size: 1.05rem; }  /* la flèche et « Précédent » restent sur la même ligne */
@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; }
/* 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; } }


/* ---- 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; } }
body.search-page .site-footer { padding-left: calc(24px + var(--filters-offset)); }

.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); }
/* the PDF of the pages a table or a passage comes from, opened under its "Voir le PDF associé" button */
.legal-text .pdf-frame { display: block; width: 100%; max-width: 100%; margin: .6em 0 1em; border: 1px solid var(--line); background: #fff; }
.legal-text .pdf-frame[hidden] { display: 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-sep { height: 1px; margin: 4px 6px; background: var(--line); }
.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: left; 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) 14px calc(6px - .125em); border: 1px solid var(--link); border-radius: 999px; 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) 22px calc(10px - .125em); border: 1px solid var(--link); border-radius: 999px; 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; } }


/* ---- 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; }
.summary-quota { margin: 0 0 14px; color: var(--muted, #6b7280); font-size: .88rem; }
.summary-locked { border: 1px dashed var(--border, #cbd5e1); border-radius: 8px; padding: 18px 20px; background: var(--surface, #f8fafc); }
.summary-locked .button { display: inline-block; }
.snippet-locked { color: var(--muted, #6b7280); font-size: .9rem; border: 1px dashed var(--border, #cbd5e1); border-radius: 6px; padding: 6px 10px; background: var(--surface, #f8fafc); }
.snippet-locked svg { vertical-align: -2px; }
.space-plan { border-left: 4px solid var(--action, #b5520a); }
.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; } .en-bref-block::before { left: -19px; }  /* sur la barre bleue : marge intérieure (14) + trait (5) */  .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; }
  /* même corps de texte que l'arrêt (10,5 pt) : l'aperçu gardait la taille de l'écran (16 px, soit 12 pt), plus grande que le texte qui le suit */
  .decision-summary { padding: 3mm 4mm; margin: 0 0 5mm; font-size: 10.5pt; line-height: 1.4; }
  .decision-summary p, .decision-summary li { line-height: 1.4; }
  .decision-summary h2 { margin: 0 0 2mm; font-size: 13pt; }
  .decision-summary h3 { margin: 4mm 0 1.5mm; font-size: 11pt; }
  .decision-summary .summary-note { margin: 0 0 3mm; font-size: 9pt; }
  .decision-summary .summary-quota { display: none; }  /* le compteur de résumés ne sert qu'à l'écran */
  .decision-summary .grounds > li { margin: 0 0 3mm; }
  .decision-summary .en-bref-block { padding-top: 0; }
  .decision-summary .en-bref-block::before { left: -4mm; }
}

/* Favoris de la jurisprudence : l'étoile d'une carte et le bouton d'une décision */
.fav-button { padding: calc(8px + .125em) 16px calc(8px - .125em); border: 1px solid var(--link); border-radius: 999px; 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 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; }

/* ---- Le petit onglet de gauche (comme celui de droite, en miroir) et la place des languettes de gauche ----
   Toujours là : sa flèche pointe vers la colonne pour la fermer quand une colonne de gauche est ouverte, vers l'extérieur pour en rouvrir une.
   Les languettes lui font de la place : recherche d'abord (une loupe), puis sommaire. */
@media (min-width: 901px) {
  .slider-close.slider-close-left { right: auto; left: var(--lw, 345px); border-radius: 0 6px 6px 0; box-shadow: 2px 2px 6px rgba(0, 0, 0, .18); top: max(calc(var(--header-h) + 12px), calc(100vh / 3 - 88px)); transition: left .2s; }
  .slider-close.slider-close-left svg { transform: rotate(180deg); }
  .text-layout:not(:has(.sidebar-left:not(.hide_sidebar))) .slider-close.slider-close-left { left: 0; }
  .text-layout:not(:has(.sidebar-left:not(.hide_sidebar))) .slider-close.slider-close-left svg { transform: none; }
  #sidebar_slider_search { top: max(calc(var(--header-h) + 48px), calc(100vh / 3 - 40px)); }
  #sidebar_slider { top: max(calc(var(--header-h) + 143px), calc(100vh / 3 + 55px)); }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) { .slider-close svg, .slider-close.slider-close-left { transition: none; } }

/* ---- Téléphone (jusqu'à 900 px) : les colonnes sont des tiroirs qui glissent PAR-DESSUS le texte (drawers.js) ----
   Chaque colonne a sa languette sur le bord de l'écran (recherche et sommaire à gauche, outils du texte et Mon espace à droite). On l'ouvre en la touchant ou en glissant
   le doigt depuis le bord ; le texte est alors figé sous un voile sombre, et on y revient en refermant (la même languette, qui suit le tiroir, le voile, ou un glissement). */
@media (max-width: 900px) {
  .sidebar { transition: transform .25s ease; }
  /* mêmes languettes que les pages de recherche (40 x 79 px) : celles de gauche à 120 px sous le menu, celles de droite 43 px plus bas, pour ne jamais se toucher */
  .slider { display: grid; position: fixed; z-index: 60; top: calc(var(--header-h) + 120px); width: 40px; height: 79px; gap: 9px; align-content: center; justify-items: center; transition: left .25s ease, right .25s ease; }
  .slider-left { left: 0; right: auto; }
  .slider-right { right: 0; left: auto; border-radius: 6px 0 0 6px; box-shadow: -2px 2px 6px rgba(0, 0, 0, .18); }
  .slider .slider-icon { width: 24px; height: 24px; padding-bottom: 9px; }
  .slider .chevron { width: 16px; height: 16px; }
  .slider-right { top: calc(var(--header-h) + 163px); }
  #sidebar_slider { top: calc(var(--header-h) + 215px); }          /* le sommaire sous la recherche (79 px + 16 px d'écart) */
  #sidebar_slider_espace { top: calc(var(--header-h) + 258px); }   /* Mon espace sous les outils du texte */
  .decision-page #sidebar_slider_espace { top: calc(var(--header-h) + 163px); }  /* une décision n'a que celle-ci à droite */
  .slider-left:not(.is-open) .chevron { transform: rotate(180deg) !important; }  /* › : tirer le tiroir */
  .slider-left.is-open .chevron { transform: none !important; }                  /* ‹ : le refermer */
  .slider-right:not(.is-open) .chevron { transform: none !important; }           /* ‹ : tirer le tiroir */
  .slider-right.is-open .chevron { transform: rotate(180deg) !important; }       /* › : le refermer */
  .slider.is-open { z-index: 85; }
  .slider-left.is-open { left: min(88vw, 360px); }
  .slider-right.is-open { right: min(88vw, 360px); }
  body.drawer-open { overflow: hidden; }
  body.drawer-open .slider:not(.is-open) { display: none; }
  #drawer-backdrop[hidden] { display: none; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .sidebar, .slider { transition: none; } }

/* Téléphone : la publicité prend moins de place au-dessus et au-dessous (elle avait 28 px de marge intérieure et 50 px d'écart avec les bandeaux voisins) */
@media (max-width: 900px) {
  .strip-wrap { padding: 14px 12px; }
  .zone + .strip-wrap, .strip-wrap + .zone { margin-top: 20px; }
}
/* Tablette : la publicité garde des marges à gauche et à droite */
@media (min-width: 601px) and (max-width: 1100px) {
  body.text-page .strip-wrap { padding-left: 40px; padding-right: 40px; }
}

/* ---- Téléphone : le menu principal en « sandwich » ----
   Le logo à gauche ; à droite le bouton du compte (Connexion / Mon espace), toujours visible, puis le sandwich qui déplie les liens sous l'en-tête. */
@media (max-width: 900px) {
  .site-header { z-index: 66; }  /* au-dessus des languettes des colonnes (60), sous le voile des tiroirs (70) */
  .site-header nav { display: contents; }
  .site-header nav a.nav-login { margin: 0 0 0 auto; padding: calc(7px + .125em) 14px calc(7px - .125em); font-size: 12px; }
  .nav-toggle { display: grid; place-content: center; gap: 5px; flex: none; width: 42px; height: 42px; margin-right: -6px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--ink); cursor: pointer; }
  .nav-toggle span { display: block; width: 22px; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
  .nav-toggle:hover, .nav-toggle:focus-visible { background: var(--grey); }
  .site-header.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .site-header.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .site-header.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; padding: 6px 0 10px; background: #fff; border-bottom: 1px solid var(--blue); box-shadow: 0 12px 24px rgba(0, 40, 70, .18); }
  .site-header.menu-open .nav-links { display: flex; }
  .site-header nav .nav-links a { height: auto; margin: 0; padding: 15px 20px; border-bottom: 0; border-left: 4px solid transparent; font-size: 15px; }
  .site-header nav .nav-links a:hover, .site-header nav .nav-links a[aria-current] { border-left-color: var(--hover); background: var(--cream); }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .nav-toggle span { transition: none; } }
@media print { .nav-toggle { display: none !important; } }

/* Pages de recherche, téléphone : quand « Mon espace » est ouvert sa languette se retrouve à côté de celle des filtres, à la même hauteur : elles se touchaient.
   Celle de « Mon espace » est donc plus bas (la hauteur d'une languette, 79 px, plus un espace) : jamais l'une sur l'autre. */
@media (max-width: 900px) {
  .mine-tab { top: 215px; }
}

/* ---- Bandeau de l'offre de lancement (accueil et textes les plus demandés, visiteurs sans compte) ---- */
.offer-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; position: relative; padding: 14px 56px 14px 24px; background: linear-gradient(100deg, var(--action-dark) 0%, var(--action) 55%, #c8600f 100%); color: #fff; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12); }
.offer-banner[hidden] { display: none; }
.offer-icon { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; }
.offer-banner p { display: grid; gap: 1px; margin: 0; max-width: 620px; font-size: 15px; line-height: 1.35; }
.offer-banner p strong { color: #fff; font: 700 13px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.offer-banner .button { background: #fff; color: var(--action-dark); padding: calc(7px + .125em) 18px calc(7px - .125em); font-size: 13px; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.offer-banner .button:hover { background: var(--cream); color: var(--action-dark); }
.offer-close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 4px; display: grid; place-items: center; padding: 0; background: transparent; color: #fff; cursor: pointer; }
.offer-close svg { width: 18px; height: 18px; }
.offer-close:hover, .offer-close:focus-visible { background: rgba(255, 255, 255, .22); }
@media (max-width: 600px) { .offer-banner { padding: 12px 44px 12px 14px; justify-content: flex-start; } .offer-icon { display: none; } }
@media print { .offer-banner { display: none !important; } }

/* ---- Page des tarifs ---- */
.pricing-lead { max-width: 640px; margin: 14px auto 0; color: #fff; font-size: 18px; text-align: center; }
.pricing-offer { display: flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; max-width: 100%; margin: 18px auto 0; padding: 10px 20px 6px; border-radius: 28px; background: linear-gradient(100deg, var(--action-dark), var(--action) 60%, #c8600f); color: #fff; font-weight: 600; }
.pricing-offer svg { flex: none; width: 22px; height: 22px; transform: translateY(-3px); }  /* the font sits high in its line: the icon is lifted to the middle of the letters */
.pricing { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin: var(--zone-gap) 0; align-items: stretch; }
.plan-card { position: relative; display: flex; flex-direction: column; padding: 28px 24px 24px; border: 1px solid var(--line); border-top: 4px solid var(--line); border-radius: 8px; background: #fff; }
.plan-card.featured { border: 2px solid var(--blue); border-top: 4px solid var(--orange); box-shadow: 0 8px 24px rgba(0, 70, 109, .14); }
.plan-icon { width: 46px; height: 46px; margin-bottom: 12px; padding: 10px; border-radius: 50%; background: var(--grey); color: var(--navy); }
.featured .plan-icon { background: var(--cream); color: var(--action); }
.plan-card h2 { margin: 0 0 4px; font-size: 22px; }
.plan-card .price { margin: 0 0 16px; color: var(--navy); font: 600 18px var(--display); }
.plan-card ul { flex: 1; margin: 0 0 22px; padding: 0; list-style: none; }
.plan-card li { display: flex; align-items: flex-start; gap: 10px; margin: 9px 0; }
.plan-card li.off { color: var(--muted); }
.plan-card li.soon { color: var(--text); font-style: italic; }
.mark { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.mark.yes { color: #1f8a4c; }
.mark.no { color: #a8adb5; }
.ribbon { position: absolute; top: 16px; right: -1px; padding: 4px 14px 4px 12px; border-radius: 14px 0 0 14px; background: var(--action); color: #fff; font: 700 12px var(--display); letter-spacing: .05em; text-transform: uppercase; }
.plan-status { margin: 0; padding: 10px 12px; border-radius: 6px; background: var(--cream); color: var(--action-dark); font-weight: 600; }
.compare-title { margin: 0 0 18px; text-align: center; }
.compare-wrap { overflow-x: auto; margin-bottom: 28px; border: 1px solid var(--line); border-radius: 8px; }
.compare-table { width: 100%; min-width: 620px; border-collapse: collapse; }
.compare-table th, .compare-table td { padding: 13px 16px; border-bottom: 1px solid var(--line); text-align: center; }
.compare-table thead th { background: var(--blue-surface); color: #fff; font-family: var(--display); font-weight: 600; }
.compare-table thead th.featured { background: var(--action); }
.compare-table tbody th { text-align: left; color: var(--ink); font-weight: 500; }
.compare-table tbody tr:nth-child(even) { background: var(--grey); }
.compare-table td.featured { background: rgba(209, 100, 18, .07); font-weight: 600; }
.compare-table tbody tr:last-child > * { border-bottom: 0; }
.compare-table .mark { display: inline-block; margin: 0; vertical-align: middle; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pricing .note { max-width: 760px; margin: 0 auto var(--zone-gap); color: var(--muted); text-align: center; }
@media (max-width: 600px) { .pricing { padding: 0 12px; } .pricing-lead { font-size: 16px; } .pricing-offer { border-radius: 14px; } }

/* ---- Les trois modes de recherche (textes, jurisprudence, textes + jurisprudence) et la page de la recherche mixte ---- */
.mode-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 4px; border-radius: 28px; background: var(--grey); width: fit-content; max-width: 100%; }
.mode-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: calc(8px + .125em) 18px calc(8px - .125em); border-radius: 22px; color: var(--text); font: 600 14px var(--display); }
.mode-tabs a:hover { color: var(--hover); }
.mode-tabs a[aria-current] { background: var(--action); color: #fff; }
.mode-tabs .mode-lock { flex: none; opacity: .75; }
.mixte-block { margin: 52px 0 36px; padding-top: 30px; border-top: 4px solid var(--blue); }  /* le séparateur entre les textes et la jurisprudence */
.mixte-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--line); }
.mixte-head h2 { margin: 0; font-size: 22px; color: var(--navy); }
.mixte-count { display: inline-block; margin-left: 6px; padding: 1px 10px; border-radius: 12px; background: var(--cream); color: var(--action-dark); font-size: 14px; vertical-align: middle; }
.mixte-empty { color: var(--muted); }
.mixte-locked { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 20px; padding: 22px 24px; border: 1px dashed var(--action); border-radius: 8px; background: var(--cream); color: var(--action-dark); }
.mixte-locked p { flex: 1 1 360px; margin: 0; color: var(--ink); }
.mixte-locked .mixte-actions { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 10px; }
@media print { .mode-tabs { display: none; } }

/* ---- Pages d'erreur (404, 403, 429, 500, 503) : la photo des lémuriens qui dorment, le texte par-dessus ---- */
.error-hero { position: relative; display: flex; align-items: center; min-height: min(560px, calc(100vh - var(--header-h))); padding: 48px max(24px, calc((100vw - 1100px) / 2)); background-size: cover; background-position: 50% 26%; color: #fff; isolation: isolate; }  /* le haut de la photo : on y voit la tête des lémuriens */
.error-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 38, 62, .88) 0%, rgba(0, 38, 62, .72) 38%, rgba(0, 38, 62, .12) 78%); }
.error-text { max-width: 560px; }
.error-code { margin: 0; color: #fff; font: 700 clamp(72px, 12vw, 120px)/1 var(--display); letter-spacing: -.02em; opacity: .92; }
.error-text h1 { margin: 6px 0 12px; font-size: clamp(26px, 4vw, 38px); color: #fff; }
.error-lead { margin: 0 0 22px; font-size: 18px; color: #fff; }
.error-text .searchbox { margin: 0 0 20px; }
.error-actions { margin: 0; }
.error-credit { position: absolute; right: 14px; bottom: 8px; margin: 0; font-size: 12px; color: rgba(255, 255, 255, .8); }
@media (max-width: 800px) { .error-hero { padding: 36px 20px 56px; background-position: 60% 60%; } .error-hero::before { background: linear-gradient(180deg, rgba(0, 38, 62, .86), rgba(0, 38, 62, .55)); } }
@media print { .error-hero { background: none !important; color: var(--ink); } .error-hero::before, .error-credit { display: none; } .error-code, .error-text h1, .error-lead { color: var(--ink); } }


/* ---- Écrans tactiles : un glissement horizontal du doigt n'appartient plus au navigateur ----
   Sans cela, le navigateur peut « prendre » un glissement un peu en diagonale (pour faire défiler ou revenir en arrière) et la colonne ne s'ouvre pas.
   Le défilement vertical et le pincement restent ; les tableaux larges (qui défilent de côté dans leur propre cadre) ne sont pas touchés. */
@media (pointer: coarse) { html, body { touch-action: pan-y pinch-zoom; overscroll-behavior-x: none; } }

/* ---- Téléphone : un petit bouton en haut à droite montre ou cache la colonne principale (tabs-toggle.js) ---- */
#tabs-toggle { display: none; }
@media (max-width: 900px) {
  /* en bas de la colonne principale : rond et orange quand elle est cachée (l'ouvrir), une croix dans la colonne quand elle est affichée (la fermer) */
  #tabs-toggle { display: grid; place-items: center; position: fixed; z-index: 96; left: 14px; bottom: 20px; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: var(--action); color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); cursor: pointer; }
  #tabs-toggle:hover, #tabs-toggle:focus-visible { background: var(--action-dark); }
  #tabs-toggle .x { display: none; }
  body:is(.rail-on, .drawer-open, .filters-open, .mine-open) #tabs-toggle { left: 3px; background: none; box-shadow: none; color: #fff1e4; }
  body:is(.rail-on, .drawer-open, .filters-open, .mine-open) #tabs-toggle:hover { background: rgba(255, 255, 255, .12); }
  body:is(.rail-on, .drawer-open, .filters-open, .mine-open) #tabs-toggle .ico { display: none; }
  body:is(.rail-on, .drawer-open, .filters-open, .mine-open) #tabs-toggle .x { display: block; }
  .slider { transition: left .25s ease, right .25s ease, opacity .25s ease; }
  .filters-tab, .mine-tab { transition: opacity .25s ease; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .slider, .filters-tab, .mine-tab { transition: none; } }
@media print { #tabs-toggle { display: none !important; } }

/* ---- Page des tarifs : photo sous un voile bleu, les trois offres posées dessus (comme la page contact), puis tableau, FAQ et appel final ---- */
.tp-stage { position: relative; padding: 72px 20px 96px; background: #3f7fa8 center / cover no-repeat; }
.tp-stage::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 38, 62, .66) 0%, rgba(0, 62, 100, .5) 60%, rgba(0, 62, 100, .38) 100%); }
.tp-inner { position: relative; width: min(100%, 1100px); margin: 0 auto; }
.tp-head { text-align: center; color: #fff; }
.tp-eyebrow { margin: 0; font: 400 20px var(--body); opacity: .95; }
.tp-head h1 { margin: 4px 0 16px; color: #fff; font: 700 clamp(30px, 4.2vw, 46px)/1.15 var(--display); text-shadow: 0 1px 6px rgba(0, 0, 0, .25); }
.tp-head h1::after { content: ""; display: block; width: 90px; height: 3px; background: var(--orange); margin: 14px auto 0; }
.tp-lead { max-width: 760px; margin: 0 auto; font-size: 19px; }
.tp-head .pricing-offer { margin-top: 30px; }
.tp-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; align-items: stretch; margin-top: 44px; }
.tp-plans .plan-card { border-top-color: var(--blue); box-shadow: 0 8px 32px rgba(0, 0, 0, .35); }
.tp-plans .plan-card.featured { border-top-color: var(--orange); }
@media (min-width: 900px) { .tp-plans .plan-card.featured { margin-top: -18px; margin-bottom: -18px; padding-top: 46px; padding-bottom: 40px; } }  /* the raised card keeps its icon and its button level with the other two */
.tp-compare { margin-top: var(--section-gap); }
.tp-faq { max-width: none; width: auto; margin: var(--section-gap) 0 0; padding: 70px 20px 80px; background: var(--cream); }
.tp-faq .title-icon { color: var(--orange); }
.tp-faq .section-title::after { width: 64px; background: var(--orange); }
.tp-faq-list { display: grid; gap: 14px; max-width: 820px; margin: 0 auto; }
.tp-faq-group { margin: 22px 0 -2px; color: var(--action-dark); font: 700 15px var(--display); letter-spacing: .06em; text-transform: uppercase; }
.tp-faq-group:first-child { margin-top: 0; }
.tp-faq-list details { background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.tp-faq-list details[open] { border-color: #f1c9a6; }
.tp-faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; color: var(--ink); font: 600 17px/1.4 var(--body); cursor: pointer; list-style: none; }
.tp-faq-list summary::-webkit-details-marker { display: none; }
.tp-faq-list summary span { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #ffe9d6; color: var(--action); transition: transform .25s, background .25s; }
.tp-faq-list details[open] summary span { transform: rotate(45deg); background: var(--action); color: #fff; }
.tp-faq-list details > p { margin: 0; padding: 0 22px 20px; font-size: 16.5px; line-height: 1.6; }
.tp-end { position: relative; margin-top: var(--section-gap); padding: 84px 20px; text-align: center; color: #fff; background: linear-gradient(135deg, #a64a00 0%, #d16412 58%, #e5873a 100%); }
.tp-end .button { background: #fff; color: var(--action-dark); box-shadow: 0 6px 18px rgba(80, 30, 0, .3); }
.tp-end .button:hover { background: var(--cream); }
.tp-end h2 { margin: 0 0 10px; color: #fff; font: 700 clamp(26px, 3.4vw, 36px)/1.2 var(--display); }
.tp-end p { max-width: 560px; margin: 0 auto 24px; font-size: 18px; color: #fff3e8; }
.tp-end p.hero-credit { max-width: min(60%, 560px); margin: 0; font-size: 14px; }
@media (max-width: 700px) { .tp-end p.hero-credit { max-width: none; font-size: 12px; bottom: 10px; } }

/* Mon espace, version à deux colonnes de menus (la même coque que sur services.lexxika.com) : colonne 1 = les univers (marine), colonne 2 = les rubriques, puis le détail.
   Bleu pour les textes, orange pour les actes. Les cartes (.space-card) et les listes d'avant restent telles quelles. */
.ms { display: grid; grid-template-columns: 92px 244px minmax(0, 1fr); min-height: calc(100vh - var(--header-h)); background: #f7f9fb; }
.ms-c1 { position: sticky; top: var(--header-h); align-self: start; height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 0; background: #00456d; }
.ms-u, .ms-u:hover { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 70px; padding: 10px 0 8px; border-radius: 16px; color: #cfe2ef; font: 600 11px var(--display); text-decoration: none; }
.ms-u:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.ms-u.is-on { background: rgba(255, 255, 255, .14); color: #fff; }
.ms-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .1); }
.ms-ic svg { width: 22px; height: 22px; }
.ms-u.is-on.is-textes .ms-ic { background: #1a85c3; color: #fff; }
.ms-u.is-on:not(.is-textes) .ms-ic { background: rgba(255, 255, 255, .28); color: #fff; }
.ms-dot { position: absolute; top: 8px; right: 12px; width: 12px; height: 12px; border-radius: 50%; background: #e5484d; border: 2px solid #00456d; }
.ms-grow { flex: 1; }

.ms-c2 { position: sticky; top: var(--header-h); align-self: start; height: calc(100vh - var(--header-h)); overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 22px 14px; background: #fff; border-right: 1px solid var(--line); }
.ms-c2 h2 { margin: 0; padding: 0 12px 12px; font: 700 17px var(--display); color: #0b5c91; }
.ms-c2 ul { margin: 0; padding: 0; list-style: none; }
.ms-c2 li + li { margin-top: 2px; }
.ms-c2 a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-left: 0; border-radius: 10px; font: 400 14px/1.25 var(--body); color: var(--text); }
.ms-c2 a svg { flex: none; width: 19px; height: 19px; color: var(--muted); }
.ms-c2 a:hover { background: var(--grey); color: var(--hover); }
.ms-c2 a:hover svg { color: var(--hover); }
.ms-c2 a[aria-current] { background: #e3f0fa; color: #0b5c91; font-weight: 600; }
.ms-c2 a[aria-current] svg { color: #0b5c91; }
.ms-c2 .nav-label { flex: 1; }
.ms-c2 a[href="/mon-espace/alertes"] .nav-count { background: #fde8e5; color: #a52a1c; }   /* unread news */
.ms-out { margin-top: auto; padding: 16px 12px 0; border-top: 1px solid var(--line); }
.ms-who { display: block; margin-bottom: 4px; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }

.ms-main { min-width: 0; padding: 30px clamp(18px, 3vw, 44px) 70px; }
.ms-head { position: relative; margin: 0 0 22px; }
.ms-head-action { position: absolute; right: 0; bottom: 2px; }
.ms .ms-head-action.button-ghost { border-color: var(--navy); background: #fff; color: var(--navy); }
.ms .ms-head-action.button-ghost:hover { background: var(--navy); color: #fff; }
.ms-crumb { margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.ms-head h1 { margin: 0; font: 700 clamp(22px, 2.2vw, 26px)/1.2 var(--display); color: var(--ink); }
.ms-sub { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.ms-head .searchbox { max-width: 640px; margin: 16px 0 0; }

@media (max-width: 860px) {
  .ms { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
  .ms-c1 { position: static; height: auto; flex-direction: row; justify-content: center; padding: 8px; gap: 6px; }
  .ms-grow { display: none; }
  .ms-c2 { position: static; height: auto; overflow: visible; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .ms-c2 h2 { display: none; }
  .ms-c2 ul { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .ms-c2 li + li { margin: 0; }
  .ms-c2 a { padding: 9px 12px; white-space: nowrap; }
  .ms-out { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 8px 12px 0; border: 0; }
  .ms-who { margin: 0; }
}

/* Mon espace : les listes en lignes denses (favoris, historique, dossiers), les recherches en cartes, le fil des alertes, les dossiers à deux volets, le suivi des signalements. */
.button-small { padding: calc(6px + .125em) 16px calc(6px - .125em); font-size: 13px; }   /* the .125em moves the text down: Hind sits high in its line (as for .button) */
.ms .space-card { border-radius: 16px; box-shadow: none; }
.space-flush { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.ms .space-flush, .space-flat { padding: 0; border: 0; background: none; box-shadow: none; }
.ms .space-flat { display: block; }
.ms .space-card h2 { font-size: 16px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.chips button { padding: 6px 14px; border: 1px solid var(--line); border-radius: 99px; background: #fff; color: var(--text); font: 600 12px var(--display); cursor: pointer; }
.chips button:hover { border-color: var(--action); color: var(--action); }
.chips button.is-on, .chips button.is-on:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

.fav-row[hidden] { display: none; }
.fav-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; margin: 0 0 14px; }
.fav-tools .chips { margin: 0; }
.fav-selects { display: flex; flex-wrap: wrap; gap: 8px; }
.fav-select { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px 0 14px; border: 1px solid var(--line); border-radius: 99px; background: #fff; color: var(--muted); font: 600 12px var(--display); }
.fav-select select { padding: 7px 6px; border: 0; background: transparent; color: var(--ink); font: 600 12px var(--display); cursor: pointer; }
.fav-select:hover { border-color: var(--action); }
.mr-list { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.mr { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--line); }
.mr:first-child { border-top: 0; }
.mr[hidden] { display: none; }
.mr-star { flex: none; color: #d6a100; font-size: 18px; line-height: 1; }
.mr-time { flex: none; width: 44px; color: var(--muted); font-size: 13px; }
.mr-main { flex: 1; min-width: 0; }
.mr-title { color: var(--link); font: 600 14.5px/1.35 var(--display); }
.mr-title:hover { color: var(--hover); }
.mr-meta { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.mr-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.mr-status { flex: none; padding: 3px 11px; border-radius: 99px; background: #e3f4e8; color: #1d7a3c; font: 600 12px var(--display); white-space: nowrap; }
.mr-status[class*="abrog"], .mr-status[class*="prim"] { background: #fde8e5; color: #a52a1c; }
.mr-actions { flex: none; display: flex; align-items: center; gap: 12px; }
.mr-seen { color: var(--muted); font-size: 13px; }
.day-title { margin: 22px 0 8px; font: 600 11px var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.day-title:first-child { margin-top: 0; }

.ss-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ss { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.ss-main { flex: 1; min-width: 0; }
.ss-name { color: var(--link); font: 600 15px var(--display); }
.ss-name:hover { color: var(--hover); }
.ss-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.ss-chips span { padding: 3px 11px; border-radius: 99px; background: var(--grey); color: var(--text); font-size: 12.5px; }
.ss-chips em { font-style: normal; color: var(--muted); }
.ss-actions { flex: none; display: flex; align-items: center; gap: 14px; }

.feed { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.feed-item { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); }
.feed-item:first-child { border-top: 0; }
.feed-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #cfd6dd; }
.feed-item.is-new .feed-dot { background: #e5484d; }
.feed-main { flex: 1; min-width: 0; }
.feed-title { color: var(--link); font: 600 14px/1.35 var(--display); }
.feed-title:hover { color: var(--hover); }
.feed-meta { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.al { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.al-side { display: grid; gap: 16px; }
.al-main .space-card h2 { margin-bottom: 8px; }

/* Dossiers : la liste à gauche (formulaire en pilule, puis les dossiers), le dossier ouvert à droite */
.fd-list .folder-create { margin: 0 0 18px; padding: 0 0 18px; border-bottom: 1px solid var(--line); }
.fd-list .folder-create > label { margin: 0 0 8px; color: var(--muted); font: 600 11px var(--display); letter-spacing: .06em; text-transform: uppercase; }
.fd-list .folder-new-row { gap: 0; }
.fd-list .folder-new-row input { border-radius: 999px 0 0 999px; padding: 10px 14px 10px 18px; font-size: 15px; }
.fd-list .folder-new-row button { flex: none; border-radius: 0 999px 999px 0; padding-right: 24px; }
.fd-list .report-status { margin: 6px 0 0; }
.fd-label { margin: 0 0 6px; color: var(--muted); font: 600 11px var(--display); letter-spacing: .06em; text-transform: uppercase; }
.fd-items { margin: 0; }
.fd-items li + li { margin-top: 2px; }
.fd-item { padding: 12px 14px 12px 12px; }
.fd-count { padding: 2px 10px; border-radius: 99px; background: var(--grey); color: var(--text); font: 600 12px var(--display); }
.fd-item.is-on .fd-count { background: #fff; }
.fd-head { align-items: center; margin: 0 0 18px; }
.fd-head h2 { font-size: 22px; overflow-wrap: anywhere; }
.fd-head .folder-actions { display: flex; flex: none; gap: 8px; margin: 0; }
.ms .fd-head .button-ghost { border-color: var(--navy); background: #fff; color: var(--navy); }
.ms .fd-head .button-ghost:hover { background: var(--navy); color: #fff; }
.ms .fd-head .button-ghost.is-danger { border-color: #b3261e; color: #b3261e; }
.ms .fd-head .button-ghost.is-danger:hover { background: #b3261e; color: #fff; }
.fd-detail .folder-rename { margin: 0 0 16px; }
.fd-detail .folder-rename input { border-radius: 999px; padding-left: 18px; }
/* Dossiers : comme « Mes commandes » des services, la liste est un panneau blanc pleine hauteur collé au bord, avec son titre ; le dossier ouvert est à droite sur le fond gris */
.ms-main--split { padding: 0; }
.ms-main--split .account-space { max-width: none; }
.fd { grid-template-columns: 360px minmax(0, 1fr); gap: 0; align-items: stretch; min-height: calc(100vh - var(--header-h)); }
.fd-list { padding: 26px 0; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: #fff; }
.fd-top { padding: 0 24px 14px; }
.fd-top .ms-crumb { margin: 0 0 2px; }
.fd-top h1 { margin: 0; font: 700 21px var(--display); color: var(--ink); }
.fd-list .folder-create, .fd-list .fd-label, .fd-list .space-empty { margin-left: 24px; margin-right: 24px; }
.fd-items { margin: 0; padding: 0 12px; }
.fd-detail { padding: 30px clamp(18px, 3vw, 40px) 60px; }
@media (max-width: 1100px) { .fd { grid-template-columns: minmax(0, 1fr); min-height: 0; } .fd-list { border-right: 0; border-bottom: 1px solid var(--line); } }
.fd { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; align-items: start; }
.fd-list { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.fd-items { margin: 14px 0 0; padding: 0; list-style: none; }
.fd-item { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-left: 4px solid transparent; border-radius: 10px; color: var(--ink); font: 600 14px var(--display); }
.fd-item svg { flex: none; width: 20px; height: 20px; color: var(--muted); }
.fd-item:hover { background: var(--grey); color: var(--hover); }
.fd-item.is-on, .fd-item.is-on:hover { border-left-color: var(--action); background: #fff4ea; color: var(--ink); }
.fd-item.is-on svg { color: var(--action); }
.fd-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fd-count { flex: none; color: var(--muted); font: 400 12.5px var(--body); }
.fd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 0 0 14px; }
.fd-head h2 { margin: 0; padding: 0; border: 0; font: 700 20px var(--display); }
.fd-head .ms-sub { margin-top: 2px; }
.fd-detail .folder-actions { margin: 4px 0 0; white-space: nowrap; }

.sg-list { display: grid; gap: 14px; max-width: 860px; }
.sg { padding: 22px 24px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.sg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.sg-main { min-width: 0; }
.sg h3 { margin: 0; font: 700 15.5px/1.35 var(--display); }
.sg h3 a { color: var(--ink); }
.sg h3 a:hover { color: var(--hover); }
.sg-meta { margin: 3px 0 0; color: var(--muted); font-size: 13.5px; }
.sg-pill { flex: none; padding: 3px 12px; border-radius: 99px; background: #e3f0fa; color: #0b5c91; font: 600 12px var(--display); white-space: nowrap; }
.sg-pill.status-traite { background: #e3f4e8; color: #1d7a3c; }
.sg-pill.status-refuse { background: #fde8e5; color: #a52a1c; }
.sg-pill.status-nouveau { background: var(--grey); color: var(--text); }
.sg .steps { margin-top: 16px; }
.sg-reply { margin-top: 16px; padding: 12px 16px; border-radius: 12px; background: #eaf3fa; }
.sg-reply strong { font: 700 13px var(--display); color: var(--ink); }
.sg-reply p { margin: 2px 0 0; font-size: 14.5px; }
.steps { display: flex; gap: 0; margin: 12px 0 0; padding: 0; max-width: 420px; list-style: none; }
.steps li { position: relative; flex: 1; text-align: center; color: #9aa3ad; font-size: 12.5px; }
.steps i { display: block; width: 24px; height: 24px; margin: 0 auto 4px; border-radius: 50%; background: #e8ecf0; color: #fff; font: 700 13px/24px var(--display); font-style: normal; position: relative; z-index: 1; }
.steps li:not(:last-child)::after { content: ""; position: absolute; top: 11px; left: 50%; width: 100%; height: 3px; background: #e8ecf0; }
.steps li.is-done { color: var(--ink); }
.steps li.is-done i { background: #1d7a3c; }
.steps li.is-done:not(:last-child)::after { background: #1d7a3c; }

.ov-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ov-tiles a { display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--text); }
.ov-tiles a:hover { border-color: var(--action); color: var(--hover); }
.ov-tiles b { display: block; color: var(--navy); font: 700 26px var(--display); }
.ov-tiles span { font-size: 13px; color: var(--muted); }

@media (max-width: 1100px) {
  .al, .fd { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 800px) {
  .ov-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mr { flex-wrap: wrap; }
  .mr-tags { justify-content: flex-start; }
  .ss { flex-wrap: wrap; }
}
.mr-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.fd-detail .mr { flex-wrap: wrap; row-gap: 8px; }
.fd-detail .mr-main { flex: 1 1 100%; }
.fd-detail .mr-tags { margin-right: auto; justify-content: flex-start; }
.space-grid .mr { flex-wrap: wrap; row-gap: 8px; padding: 12px 14px; }
.space-grid .mr-main { flex: 1 1 100%; }
.space-grid .mr-tags { margin-right: auto; justify-content: flex-start; }
.space-grid .mr-star { display: none; }
@media (max-width: 860px) { .ms-head-action { position: static; margin-top: 10px; } }
.fd-list .report-status:empty, .fd-detail .report-status:empty { display: none; }

/* Vue d'ensemble : l'annonce de Lexxika (offre de lancement) tout en haut, sur un fond coloré, puis la recherche */
.ms .space-plan { display: flex; align-items: center; gap: 16px; padding: 18px 24px; border: 1px solid #f3d5bd; border-left: 4px solid var(--action); background: linear-gradient(110deg, #fff1e4 0%, #fff8f1 45%, #e6f1fa 100%); }
.plan-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--action); box-shadow: 0 2px 8px rgba(181, 82, 10, .18); }
.plan-ico svg { width: 24px; height: 24px; }
.plan-text p { margin: 0; }
.ov-search .searchbox { max-width: 640px; margin: 0; }

/* Dossiers (suite, en dernier pour l'emporter sur les règles d'avant) : un panneau blanc de 420px, pleine hauteur de l'écran, collé au bord comme « Mes commandes » */
.ms .fd { grid-template-columns: 420px minmax(0, 1fr); gap: 0; align-items: stretch; min-height: calc(100vh - var(--header-h)); }
.ms .fd-list { align-self: stretch; padding: 26px 0; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: #fff; box-shadow: none; }
.ms .fd-top { padding: 0 28px 14px; }
.ms .fd-list .folder-create, .ms .fd-list .fd-label, .ms .fd-list .space-empty { margin-left: 28px; margin-right: 28px; }
.ms .fd-items { padding: 0 16px; }
.ms .fd-detail { padding: 30px clamp(18px, 3vw, 40px) 60px; }
@media (max-width: 1100px) { .ms .fd { grid-template-columns: minmax(0, 1fr); min-height: 0; } .ms .fd-list { border-right: 0; border-bottom: 1px solid var(--line); } }

/* Alertes : les nouveautés en cartes groupées par période, les réglages dans la colonne de droite */
.al { grid-template-columns: minmax(0, 1fr) 360px; }
.al-main .day-title:first-child { margin-top: 0; }
.news-cards .read-item.is-new .card { background: #f3f9fe; border-color: #cfe4f4; }
.ms .disc-chip .follow-pill { border-radius: 999px; padding: 4px 12px 3px; font-size: 12.5px; }
.ms .disc-chip .follow-pill.is-on { border-radius: 999px 0 0 999px; }
.ms .disc-chip .mail-toggle { border-radius: 0 999px 999px 0; padding: 4px 10px 3px; }
.disc-more { margin-top: 12px; }
.disc-more summary { cursor: pointer; color: var(--link); font: 600 13px var(--display); }
.disc-more summary:hover { color: var(--hover); }
.disc-more .disc-chips { margin-top: 10px; }

/* Alertes : même coque que les dossiers (panneau blanc à gauche, contenu à droite) */
.fd-help { margin: 18px 28px 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.fd-count.is-new { background: #fde8e5; color: #a52a1c; }
.fd-item.is-on .fd-count.is-new { background: #fff; }
.fd-detail .day-title { margin: 22px 0 8px; font: 600 11px var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fd-detail .fd-head + .day-title { margin-top: 4px; }
.fd-detail .space-card { margin-bottom: 16px; }

/* Cartes : coins arrondis de 8px sur tous les sites (ce fichier est copié sur les autres par tools/sync_shared.py) */
.read-cards .card, .space-card, .ms .space-card, .law-card, .folder-tile, .folder-list, .login-card, .admin-card, .resume-bar, .sidebar .promo,
.mr-list, .ss, .sg, .ov-tiles a, .fd-item, .plan-card { border-radius: 8px; }
.ms .space-flush, .ms .space-flat { border-radius: 0; }
.sg-reply { border-radius: 8px; }

/* Liste des dossiers et des alertes : le même sélecteur que le menu des rubriques (fond bleu clair, texte bleu en gras), pas de carte */
.ms .fd-item { padding: 10px 12px; border-left: 0; border-radius: 10px; color: var(--text); font: 400 14px/1.25 var(--body); }
.ms .fd-item:hover { background: var(--grey); color: var(--hover); }
.ms .fd-item.is-on, .ms .fd-item.is-on:hover { background: #e3f0fa; color: #0b5c91; font-weight: 600; }
.ms .fd-item svg { color: var(--muted); }
.ms .fd-item:hover svg { color: var(--hover); }
.ms .fd-item.is-on svg { color: #0b5c91; }
.ms .fd-items li + li { margin-top: 2px; }
.ms .fd-item.is-on .fd-count { background: #fff; color: var(--navy); }
.ms .fd-item.is-on .fd-count.is-new { color: #a52a1c; }

/* Mon espace : colonne des univers en dégradé orange pour les textes (bleue pour les actes sur l'autre site) ; sélecteurs bleus ici, orange côté actes */
.ms-c1 { background: linear-gradient(180deg, #a84a00 0%, #bd5a0b 55%, #cc6812 100%); }
.ms-u, .ms-u:hover { color: #fff1e4; }
.ms-dot { border-color: #bd5a0b; }
/* Survol dans Mon espace : simple fond gris, le texte garde sa couleur (comme sur les actes) */
.ms-c2 a:hover, .ms .fd-item:hover { background: var(--grey); color: var(--text); }
.ms-c2 a:hover svg, .ms .fd-item:hover svg { color: var(--muted); }
.ms-c2 a[aria-current]:hover, .ms .fd-item.is-on:hover { background: #e3f0fa; color: #0b5c91; }
.ms-c2 a[aria-current]:hover svg, .ms .fd-item.is-on:hover svg { color: #0b5c91; }
/* Menu principal allégé : un seul conteneur, la pastille de l'univers actif (bleu pour les textes), plus de carré autour de l'icône */
.ms-ic, .ms-u.is-on .ms-ic, .ms-u.is-on.is-textes .ms-ic, .ms-u.is-on:not(.is-textes) .ms-ic { background: none; color: inherit; }
.ms-u.is-on, .ms-u.is-on:hover { background: #1a85c3; color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.ms-u, .ms-u:hover { gap: 2px; padding: 12px 0 10px; }
.ms-ic { width: 30px; height: 30px; }
/* Univers actif et sélecteurs : fond bleu clair, texte et icône bleus (comme les actes en orange clair) */
.ms-u.is-on, .ms-u.is-on:hover { background: #eef6fc; color: #1673ad; box-shadow: none; }
.ms-c2 a[aria-current], .ms-c2 a[aria-current]:hover, .ms .fd-item.is-on, .ms .fd-item.is-on:hover { background: #eef6fc; color: #1673ad; }
.ms-c2 a[aria-current] svg, .ms-c2 a[aria-current]:hover svg, .ms .fd-item.is-on svg, .ms .fd-item.is-on:hover svg { color: #1673ad; }

/* Création du compte : case des CGVU */
.login-terms { display: flex; align-items: flex-start; gap: 10px; margin-top: 4px; font: 400 14px/1.45 var(--body); color: var(--text); }
.login-terms input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--action); }

/* Compte : changer de nom */
.name-form { margin: 14px 0 4px; max-width: 420px; }
.name-form label { display: block; margin-bottom: 6px; font: 600 14px var(--display); color: var(--ink); }
.name-row { display: flex; gap: 10px; }
.name-row input { flex: 1; min-width: 0; padding: 9px 14px; border: 1.5px solid #b9cfdf; border-radius: 999px; font: 400 15px var(--body); }
.account-form .login-terms { display: flex; align-items: flex-start; gap: 10px; font: 400 14px/1.45 var(--body); }
.account-form .login-terms input { width: 18px; padding: 0; }

/* Compte : le champ du nom comme dans les formulaires des actes, et l'information en notification */
.name-form { max-width: 520px; }
.name-row { align-items: stretch; }
.name-row input { padding: 11px 14px; border: 1.5px solid #b9cfdf; border-radius: 12px; background: #fff; font: 400 15.5px/1.4 var(--body); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.name-row input:hover { border-color: #8fb4cf; }
.name-row input:focus { outline: none; border-color: var(--blue-surface); box-shadow: 0 0 0 4px rgba(26, 133, 195, .2); }
.name-status { margin: 12px 0 0; padding: 14px 16px; border-radius: 6px; font-size: 15px; }
.name-status[hidden] { display: none; }
.name-status.is-ok { background: #e8f5ea; color: #1d5a2a; }
.name-status.is-error { background: #fdecea; color: #8a1c13; }
.name-form .name-status { margin: 12px 0 0; }

/* Fenêtre de confirmation de la suppression du compte */
.confirm-dialog { width: min(480px, calc(100vw - 32px)); padding: 28px; border: 0; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); color: var(--text); }
.confirm-dialog::backdrop { background: rgba(10, 30, 45, .55); }
.confirm-dialog h2 { margin: 0 0 10px; font: 700 20px/1.25 var(--display); color: var(--ink); }
.confirm-dialog p { margin: 0 0 14px; line-height: 1.5; }
.confirm-dialog label { display: block; margin-bottom: 6px; font: 400 14.5px/1.4 var(--body); }
.confirm-dialog input { width: 100%; box-sizing: border-box; padding: 11px 14px; border: 1.5px solid #b9cfdf; border-radius: 12px; background: #fff; font: 600 15px var(--body); letter-spacing: .03em; }
.confirm-dialog input:focus { outline: none; border-color: var(--blue-surface); box-shadow: 0 0 0 4px rgba(26, 133, 195, .2); }
.confirm-dialog .name-status { margin: 12px 0 0; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.button-danger, .button-danger:hover { background: #b3261e; border-color: #b3261e; color: #fff; }
.button-danger:hover { background: #8f1d17; border-color: #8f1d17; }
.button-danger:disabled { opacity: .4; cursor: not-allowed; }
.name-form .name-status { margin-top: 16px; }

/* ---- Pages d'un texte et d'une décision : la même coque que Mon espace (écrans larges) ----
   Colonne principale (.rail) = les rubriques : Sommaire, Recherche, Dans le texte, Mon espace ; la deuxième colonne affiche le contenu de la rubrique choisie
   (une seule à la fois, celle-ci est retenue). Sous 901 px ce sont toujours les tiroirs de drawers.js. */
.rail { display: none; }
@media (min-width: 901px) {
  :root { --rail: 64px; }
  .rail { position: fixed; top: var(--header-h); left: 0; bottom: 0; z-index: 52; width: var(--rail); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 0; background: linear-gradient(180deg, #a84a00 0%, #bd5a0b 55%, #cc6812 100%); }
  .rail .ms-u { width: 48px; height: 48px; padding: 0; justify-content: center; background: none; border: 0; cursor: pointer; font: 600 11px/1.15 var(--display); text-align: center; color: #fff1e4; }
  .rail .ms-u:hover { background: rgba(255, 255, 255, .1); color: #fff; }
  .rail .ms-u.is-on, .rail .ms-u.is-on:hover { background: #eef6fc; color: #1673ad; }
  .rail .ms-u[hidden] { display: none; }
  .slider, .slider-close { display: none !important; }

  .text-layout { grid-template-columns: minmax(0, 1fr); padding-left: var(--rail); transition: padding-left .2s; }
  .text-layout:has(.sidebar:not(.hide_sidebar):not(.hide_sidebar_right)) { padding-left: calc(var(--rail) + var(--lw, 345px)); }
  .text-layout .sidebar { position: fixed; top: var(--header-h); left: var(--rail); bottom: 0; z-index: 50; width: var(--lw, 345px); height: auto; max-height: none; margin: 0 !important; padding-bottom: 100px; overflow-y: auto;
    border: 0; border-right: 1px solid var(--line); box-shadow: none; transition: transform .2s, visibility 0s; }
  .text-layout .sidebar.hide_sidebar, .text-layout .sidebar.hide_sidebar_right { transform: translateX(-100%); visibility: hidden; transition: transform .2s, visibility 0s .2s; pointer-events: none; }
  .text-layout .sidebar-left { padding-inline: 12px; }
  .text-layout .sidebar-right { padding: 18px 16px 100px; }
  .text-layout .sidebar-search { padding: 0; }
  .text-layout .resizer-left { right: 0; }

  /* the blue band, the advertisement and the conditions of use stay centred on the visible part: the rail, and the column when it is open */
  body.text-page :is(.banner, .info-band) { padding-left: calc(var(--rail) + 16px); padding-right: 16px; transition: padding .2s; }
  body.text-page:has(.sidebar:not(.hide_sidebar):not(.hide_sidebar_right)) :is(.banner, .info-band) { padding-left: calc(var(--rail) + var(--lw, 345px) + 16px); }
  body.text-page .strip-wrap { padding-left: calc(var(--rail) + 70px); padding-right: 70px; transition: padding .2s; }
  body.text-page:has(.sidebar:not(.hide_sidebar):not(.hide_sidebar_right)) .strip-wrap { padding-left: calc(var(--rail) + var(--lw, 345px) + 70px); }
  body.resizing :is(.banner, .info-band, .strip-wrap), body.resizing .text-layout, body.resizing .sidebar { transition: none; }
  #to-top { right: 18px !important; }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) { .text-layout, .text-layout .sidebar, body.text-page :is(.banner, .info-band, .strip-wrap) { transition: none; } }
@media print { .rail { display: none !important; } }

/* ---- Les rubriques de la deuxième colonne : mêmes marges, mêmes titres, mêmes champs (écrans larges) ---- */
.panel-toggle { display: none; }
@media (min-width: 901px) {
  .panel-toggle { position: fixed; z-index: 51; top: max(calc(var(--header-h) + 110px), calc(100vh / 3 - 20px)); left: var(--rail); display: grid; place-items: center; width: 22px; height: 52px; padding: 0; border: 0; border-radius: 0 6px 6px 0; background: var(--action); color: #fff; box-shadow: 2px 2px 6px rgba(0, 0, 0, .18); cursor: pointer; transition: left .2s; }
  .text-layout:has(.sidebar:not(.hide_sidebar):not(.hide_sidebar_right)) .panel-toggle { left: calc(var(--rail) + var(--lw, 345px)); }
  .panel-toggle:hover, .panel-toggle:focus-visible { background: var(--action-dark); }
  .panel-toggle svg { width: 14px; height: 14px; transition: transform .2s; }
  .panel-toggle.is-closed svg { transform: rotate(180deg); }
  body.resizing .panel-toggle { transition: none; }

  /* marges : les mêmes pour toutes les rubriques */
  .text-layout .sidebar-left, .text-layout .sidebar-right { padding: 22px 20px 100px; }
  .text-layout .sidebar-search { padding: 0; }
  .text-layout .sidebar-search .search-scroll { padding: 22px 20px 100px; }
  /* titres de rubrique : une seule façon de les écrire */
  .text-layout .sidebar .side-title:not(.side-title-filters), .text-layout .sidebar .toc-head h4, .text-layout .sidebar .mine-title { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 700 18px/1.2 var(--display); color: var(--ink); }
  .text-layout .sidebar .toc-head h4 { flex: 1 1 auto; margin: 0; }
  .text-layout .sidebar .toc-head { padding-bottom: 14px; margin-bottom: 12px; }
  .text-layout .sidebar .side-icon, .text-layout .sidebar .mine-title svg, .text-layout .sidebar .toc-icon { width: 20px; height: 20px; flex: none; color: var(--ink); }
  /* sous-titre (Affiner) et intitulés des champs */
  .text-layout .sidebar .side-title-filters { display: flex; align-items: center; gap: 8px; margin: 26px 0 12px; font: 600 15px/1.2 var(--body); color: var(--ink); }
  .text-layout .sidebar .side-title-filters .side-icon { width: 18px; height: 18px; }
  .text-layout .sidebar legend, .text-layout .sidebar .side-label { margin: 0 0 6px; font: 600 14px/1.3 var(--body); color: var(--ink); }
  .text-layout .sidebar fieldset { margin: 0 0 18px; }
  .text-layout .sidebar .side-label { margin-top: 18px; }
  .text-layout .sidebar .side-title + .side-label, .text-layout .sidebar .side-title + form { margin-top: 0; }
  .text-layout .sidebar .hint, .text-layout .sidebar .filters .hint { font-size: 12px; line-height: 1.4; }
  /* champs : même hauteur, même police */
  .text-layout .sidebar input[type="text"], .text-layout .sidebar input[type="search"] { height: 44px; box-sizing: border-box; padding: 0 14px; font: 400 15px var(--body); }
  .text-layout .sidebar .panel-search input { padding: 0 14px 0 18px; }
  .text-layout .sidebar .panel-search { margin: 0 0 4px; }
  .text-layout .sidebar .panel-search button { height: 44px; }
  .text-layout .sidebar .find .find-step { width: 44px; height: 44px; }
  .text-layout .sidebar .find { margin-bottom: 4px; }
  .text-layout .sidebar [data-pick] { min-height: 44px; font: 400 15px var(--body); }
  .text-layout .sidebar .toc-head .pill { font-size: 12px; }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) { .panel-toggle { transition: none; } }
@media print { .panel-toggle { display: none !important; } }
@media (min-width: 901px) { .rail .rail-label { display: none; } .rail .ms-ic { width: 32px; height: 32px; } .rail .ms-ic svg { width: 24px; height: 24px; } .rail { padding-top: 18px; gap: 10px; } }

/* Boutons des colonnes : bien arrondis (pastilles du sommaire, flèches précédent / suivant des recherches) */
.toc-head .pill, .page-toc .toc-head .pill { border-radius: 999px; padding: 7px 10px; line-height: 1; }  /* Montserrat : marges égales en haut et en bas */
.find .find-step { border-radius: 12px; }

/* ---- Mon espace (colonne d'un texte ou d'une décision) : plus léger ---- */
.mine-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0 4px; }
.mine-tiles a { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 10px 10px; border-radius: 12px; background: #f3f6f9; color: var(--ink); font: 500 14px/1.2 var(--body); text-decoration: none; transition: background .15s; }
.mine-tiles a:hover { background: #e6edf3; color: var(--ink); }
.mine-tiles a:last-child:nth-child(odd) { grid-column: 1 / -1; }
.mine-tiles svg { flex: none; width: 18px; height: 18px; color: var(--muted); }
.mine-tiles .mt-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mine-tiles .mt-count { flex: none; min-width: 20px; padding: 2px 5px 0; border-radius: 999px; background: #fff; color: var(--muted); font: 600 12px/18px var(--body); text-align: center; }
.mine-tiles .mt-count.is-new { background: #fde8e5; color: #a52a1c; }
.sidebar .mine-list { margin: 0 0 14px; }
.sidebar .mine-list a { padding: 6px 0; font-size: 14px; color: var(--link); }
.sidebar .side-label + .mine-list { margin-top: 0; }
/* les actions sur le texte : des lignes discrètes, bleues quand elles sont actives */
.sidebar-right .fav-button { display: block; width: 100%; padding: calc(11px + .125em) 14px calc(11px - .125em); border: 0; border-radius: 12px; background: #f3f6f9; color: var(--ink); font: 500 14px/1.2 var(--body); text-align: left; }
.sidebar-right .fav-button:hover { background: #e6edf3; color: var(--ink); }
.sidebar-right .fav-button[aria-pressed=true], .sidebar-right .fav-button.has, .sidebar-right .fav-button.is-on { background: #eef6fc; color: #1673ad; }
.sidebar-right .fav-button[aria-pressed=true]:hover, .sidebar-right .fav-button.has:hover, .sidebar-right .fav-button.is-on:hover { background: #e1effa; color: #1673ad; }
.sidebar-right .fav-button + .fav-button { margin-top: 6px; }
.sidebar-right .follow-email { margin-top: 8px; padding: 0 4px; border-top: 0; font-size: 13px; }
/* préférences : discrètes, en bas de la colonne */
.sidebar-right .side-check { margin-top: 10px; padding-top: 0; border-top: 0; font-size: 13px; }
.sidebar-right .side-check:first-of-type { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }

/* cases à cocher : Hind se place haut dans sa ligne, la case remonte d un pixel pour rester au centre du texte */
.side-check input { position: relative; top: -1px; }

/* Mon espace : un trait fin entre les groupes (actions, tuiles, lus récemment, préférences) */
.sidebar-right .mine-tiles { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.sidebar-right .mine-tiles + .side-label { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.sidebar-right .side-check:first-of-type { margin-top: 10px; padding-top: 0; border-top: 0; }
.sidebar-right > :not(.side-check) + .side-check:not(.follow-email) { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }

/* Titres des colonnes : Montserrat a plus d'espace sous les lettres que sur la ligne, l'icône remonte d'un pixel pour rester au centre des majuscules */
@media (min-width: 901px) {
  .text-layout .sidebar .side-title > svg, .text-layout .sidebar .toc-head h4 > svg, .text-layout .sidebar .mine-title > svg { position: relative; top: -1px; }
  .text-layout .sidebar .toc-head h4 > svg { top: -1.5px; }
}

/* ---- Pages de recherche (textes et jurisprudence) : la même coque que les pages d'un texte (écrans larges) ----
   Colonne principale (.rail) = Recherche et Mon espace ; la deuxième colonne affiche la rubrique choisie, une seule à la fois ; la petite languette la ferme ou la rouvre.
   Sous 901 px : les colonnes et leurs languettes d'avant (tiroirs qui recouvrent la page). */
@media (min-width: 901px) {
  body.search-page { --filters-w: 345px; --mine-w: 345px; --panel-time: .2s; --panel-ease: ease; }
  body.search-page.filters-open { --filters-offset: var(--filters-w); }
  body.search-page.mine-open { --mine-offset: var(--mine-w); }
  .page-shift { padding-left: calc(var(--rail) + var(--filters-offset) + var(--mine-offset)); padding-right: 0; }
  body.search-page .site-footer { padding-left: calc(24px + var(--rail) + var(--filters-offset) + var(--mine-offset)); padding-right: 24px; }
  .filters-panel, .mine-panel { z-index: 51; left: var(--rail); right: auto; width: var(--filters-w); border: 0; border-right: 1px solid var(--line); box-shadow: none;
    transform: translateX(-100%); visibility: hidden; transition: transform var(--panel-time) var(--panel-ease), visibility 0s var(--panel-time); }
  body.filters-open .filters-panel, body.mine-open .mine-panel { transform: none; visibility: visible; transition: transform var(--panel-time) var(--panel-ease), visibility 0s; }
  .filters-tab, .mine-tab, #filters-backdrop, #mine-backdrop { display: none !important; }
  body.search-page:is(.filters-open, .mine-open) .panel-toggle { left: calc(var(--rail) + var(--filters-w)); }

  /* marges, titres et champs : comme les colonnes d'un texte */
  .filters-scroll, .mine-scroll { padding: 22px 20px 100px; }
  .filters-panel .filters-title, .mine-panel .mine-title { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 700 18px/1.2 var(--display); color: var(--ink); }
  .filters-panel .filters-title svg, .mine-panel .mine-title svg { position: relative; top: -1px; width: 20px; height: 20px; flex: none; color: var(--ink); }
  .filters-panel .panel-search + .filters-title { margin: 26px 0 12px; font: 600 15px/1.2 var(--body); }
  .filters-panel .panel-search + .filters-title svg { width: 18px; height: 18px; top: 0; }
  .filters-panel legend, .mine-panel .side-label { margin: 0 0 6px; font: 600 14px/1.3 var(--body); color: var(--ink); }
  .filters-panel fieldset { margin: 0 0 18px; }
  .filters-panel .hint { font-size: 12px; line-height: 1.4; }
  .filters-panel input[type="text"], .filters-panel input[type="search"] { height: 44px; box-sizing: border-box; padding: 0 14px; font: 400 15px var(--body); }
  .filters-panel .panel-search { margin: 0 0 4px; }
  .filters-panel .panel-search input { padding: 0 14px 0 18px; }
  .filters-panel .panel-search button { height: 44px; }
  .filters-panel [data-pick] { min-height: 44px; font: 400 15px var(--body); }

  /* Mon espace : mêmes tuiles et mêmes séparateurs que dans la colonne d'un texte */
  .mine-panel .mine-tiles { margin: 0 0 4px; }
  .mine-panel .mine-tiles + .side-label { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
  .mine-panel .mine-list { margin: 0 0 14px; }
  .mine-panel .mine-list a { padding: 6px 0; font-size: 14px; color: var(--link); }
  .mine-panel .side-label + .mine-list { margin-top: 0; }
  .mine-panel .side-check { margin-top: 10px; padding-top: 0; border-top: 0; font-size: 13px; }
  .mine-panel > .mine-scroll > :not(.side-check) + .side-check:not(.follow-email) { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) { .filters-panel, .mine-panel { transition: none !important; } }

/* ---- Marges de la page blanche d'un texte ou d'une décision : elles suivent la place disponible ----
   Large : jusqu'à environ 90 px de chaque côté (comme une feuille A4) ; plus l'écran ou la place à côté des colonnes diminue, plus elles se resserrent, jusqu'à 10 px.
   --avail = la largeur restant à droite de la colonne principale et de la deuxième colonne quand elle est ouverte. */
.text-layout { --avail: 100vw; --gap: 16px; }
@media (min-width: 901px) {
  .text-layout { --avail: calc(100vw - var(--rail)); --gap: clamp(12px, calc((var(--avail) - 560px) * .1), 32px); }
  .text-layout:has(.sidebar:not(.hide_sidebar):not(.hide_sidebar_right)) { --avail: calc(100vw - var(--rail) - var(--lw, 345px)); }
  .text-layout .document { width: calc(100% - var(--gap)); }
}
.text-layout .document, .decision-layout .document { padding-left: clamp(10px, calc((min(900px, var(--avail) - var(--gap)) - 400px) * .18), 90px); padding-right: clamp(10px, calc((min(900px, var(--avail) - var(--gap)) - 400px) * .18), 90px); }

/* Bandeau publicitaire de l'accueil : des marges à gauche et à droite sur tablette et téléphone (10 px au minimum, 40 px au plus) */
.promo-box { width: calc(100% - 2 * clamp(10px, 4vw, 40px)); margin-left: auto; margin-right: auto; }

/* ---- Téléphone (jusqu'à 900 px) : la colonne principale (.rail) et ses deux colonnes, comme sur grand écran ----
   La colonne principale ne se montre que quand une colonne est ouverte (le rond en bas à gauche ouvre la dernière utilisée, sa croix referme tout).
   Les colonnes (le sommaire, la recherche, les outils du texte, Mon espace, les filtres) glissent depuis la gauche, à côté d'elle, par-dessus le texte. */
@media (max-width: 900px) {
  .rail { display: flex; flex-direction: column; align-items: center; gap: 4px; position: fixed; z-index: 95; left: 0; top: var(--header-h); bottom: 0; width: 52px; padding: 16px 0; border-radius: 0;
    background: linear-gradient(180deg, #a84a00 0%, #bd5a0b 55%, #cc6812 100%); box-shadow: 2px 0 10px rgba(0, 0, 0, .25); transform: translateX(-110%); transition: transform .25s ease; }
  body:is(.rail-on, .drawer-open, .filters-open, .mine-open) .rail { transform: none; }
  .rail .ms-u { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: none; color: #fff1e4; cursor: pointer; }
  .rail .ms-u.is-on, .rail .ms-u.is-on:hover { background: #eef6fc; color: #1673ad; }
  .rail .ms-u[hidden], .rail .rail-label { display: none; }
  .rail .ms-ic { display: grid; place-items: center; width: 32px; height: 32px; }
  .rail .ms-ic svg { width: 24px; height: 24px; }
  .slider, .filters-tab, .mine-tab, .panel-toggle { display: none !important; }
  /* the columns open to the right of the rail, whatever their side on a large screen */
  .sidebar { top: var(--header-h); left: 52px !important; right: auto !important; width: min(calc(100vw - 64px), 360px) !important; transform: translateX(-120%); }
  #drawer-backdrop, #filters-backdrop, #mine-backdrop { top: var(--header-h); }  /* le menu du haut reste visible, comme à côté de la colonne principale */
  .sidebar.open { transform: none !important; }
  .filters-panel, .mine-panel { left: 52px; right: auto; width: min(calc(100vw - 64px), 360px); border: 0; transform: translateX(-120%); box-shadow: 0 0 24px rgba(0, 0, 0, .3); }
  body.filters-open .filters-panel, body.mine-open .mine-panel { transform: none; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .rail { transition: none; } }

/* Mon espace de la page de recherche, sur téléphone aussi : le trait et l'espace entre les tuiles et « Lus récemment », et avant les préférences */
@media (max-width: 900px) {
  .mine-panel .mine-tiles { margin: 0 0 4px; }
  .mine-panel .mine-tiles + .side-label { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
  .mine-panel .side-label + .mine-list { margin-top: 0; }
  .mine-panel > .mine-scroll > :not(.side-check) + .side-check:not(.follow-email) { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
}

/* Téléphone : dans le sommaire, le titre prend la première ligne et les deux boutons passent sur la seconde, avec plus d'air */
@media (max-width: 900px) {
  .sidebar-left .toc-head { flex-wrap: wrap; gap: 10px 8px; }
  .sidebar-left .toc-head h4 { flex: 1 0 100%; }
  .sidebar-left .toc-head .pill { padding: 9px 16px; line-height: 1; font-size: 13px; }  /* Montserrat : marges égales en haut et en bas */
}

/* ---- Mon espace (téléphone, jusqu'à 860 px) : une bande bleue collante sous le menu ----
   1re rangée : les 3 univers en contrôle segmenté ; 2e rangée : l'entrée courante (« Favoris 12 ▾ »), qui ouvre la liste des autres, avec le compte et la déconnexion.
   Au-dessus de 860 px les deux colonnes de gauche sont celles d'avant (.ms-bar, .ms-panel ne changent rien). */
.ms-bar, .ms-panel { display: contents; }
.ms-cur { display: none; }
@media (max-width: 860px) {
  .ms { grid-template-rows: auto 1fr; }
  .ms-bar { display: block; position: sticky; top: var(--header-h); z-index: 45; padding: 10px 14px 12px; background: linear-gradient(180deg, #a84a00 0%, #c05f0e 100%); box-shadow: 0 6px 12px rgba(80, 30, 0, .22); }  /* Textes : orange (Actes : bleu marine, sur le site des services) */
  .ms-bar .ms-c1 { display: flex; flex-direction: row; justify-content: stretch; align-items: center; gap: 0; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .14); }
  .ms-bar .ms-u, .ms-bar .ms-u:hover { flex: 1; flex-direction: row; justify-content: center; gap: 7px; width: auto; padding: 9px 0; border-radius: 11px; color: #fff1e4; font: 600 14px var(--display); }
  .ms-bar .ms-u.is-on, .ms-bar .ms-u.is-on:hover { background: #fff; color: #a84a00; box-shadow: none; }
  .ms-bar .ms-ic { width: 20px; height: 20px; }
  .ms-bar .ms-ic svg { width: 18px; height: 18px; }
  .ms-bar .ms-dot { top: 6px; right: 14px; }
  .ms-bar .ms-c2 { position: relative; top: auto; height: auto; margin-top: 10px; padding: 0; border: 0; background: none; }
  .ms-bar .ms-c2 h2 { display: none; }
  .ms-cur, .ms-cur:hover, .ms-cur:focus-visible { background: #fff; color: #8f3f00; }
  .ms-cur { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 12px 16px; border: 0; border-radius: 12px; background: #fff; color: #8f3f00; font: 600 16px var(--display); text-align: left; cursor: pointer; }
  .ms-cur .ms-cur__label { flex: none; }
  .ms-cur em { margin-right: auto; padding: 2px 9px; border-radius: 999px; background: #fdeedd; color: #b5520a; font: 700 13px var(--body); font-style: normal; }
  .ms-cur svg { flex: none; width: 18px; height: 18px; transition: transform .2s; }
  .ms-c2.is-open .ms-cur svg { transform: rotate(180deg); }
  .ms-bar .ms-panel { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 50; max-height: 64vh; overflow-y: auto; padding: 8px; border-radius: 14px; background: #fff; box-shadow: 0 14px 34px rgba(0, 30, 60, .35); }
  .ms-bar .ms-c2.is-open .ms-panel { display: block; }
  .ms-bar .ms-c2 ul { display: block; overflow: visible; }
  .ms-bar .ms-c2 a { white-space: normal; padding: 13px 14px; font-size: 16px; }
  .ms-bar .ms-out { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 0; padding: 12px 14px 6px; border-top: 1px solid var(--line); }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) { .ms-cur svg { transition: none; } }

/* ---- Mon espace (téléphone) : la colonne intermédiaire (liste des dossiers, des alertes) est un troisième menu déroulant, dans la bande orange ---- */
.ms-c3 { display: none; }
@media (max-width: 860px) {
  .ms-bar .ms-c3 { display: block; margin-top: 8px; }
  .ms-cur3 svg { margin-left: auto; transition: transform .2s; }
  .ms-cur3.is-open svg { transform: rotate(180deg); }
  .ms-cur3 .ms-cur__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ms .fd { display: block; min-height: 0; }
  .ms .fd-list { display: none; position: fixed; top: var(--fd-top, 190px); left: 14px; right: 14px; z-index: 50; max-height: calc(100vh - var(--fd-top, 190px) - 24px); padding: 18px 0 22px; overflow-y: auto; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 14px 34px rgba(0, 30, 60, .35); }
  .ms .fd.is-list-open .fd-list { display: block; }
  .ms .fd.is-list-open::before { content: ""; position: fixed; inset: var(--fd-veil, 180px) 0 0 0; z-index: 48; background: rgba(0, 20, 40, .5); }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) { .ms-cur3 svg { transition: none; } }

/* Landing of the jurisprudence: the database (order of courts) is chosen in a list inside the search bar; only the judicial one is online for now */
.searchbox-order input { border-radius: 999px 0 0 999px; }
.searchbox-order select { appearance: none; -webkit-appearance: none; padding-right: 38px !important; background: var(--grey) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 8l10 10L22 8' fill='none' stroke='%23333' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 15px 15px; flex: 0 0 auto; border: 0; border-left: 1px solid rgba(0,0,0,.15); border-radius: 0; color: var(--ink); font: 500 16px var(--body); padding-left: 14px; cursor: pointer; }
.searchbox-order select:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.searchbox-order button { border-radius: 0 999px 999px 0; }
@media (max-width: 600px) { .searchbox-order select { max-width: 130px; padding-left: 6px; padding-right: 36px !important; background-size: 20px 20px; } }
/* Hero: the list has the size of the input and of the button (18 px), on the same baseline as the button */
.hero .searchbox-order select { font-size: 18px; font-weight: 400; padding-top: .2em; }
/* Heroes (texts and jurisprudence): the photo a little brighter and more saturated under the gradient */
.hero .hero-slide { filter: brightness(1.15) saturate(1.3) contrast(1.05); }

/* Icon at the top left of a section title: the blue of the line under the title, tilted at random (--tilt) */
.title-text { position: relative; display: inline-block; }
.title-icon { position: absolute; top: -22px; left: -30px; color: var(--blue); transform: rotate(var(--tilt, -18deg)); }
@media (max-width: 600px) { .title-icon { width: 30px; height: 30px; left: -10px; top: -20px; } }

/* Tokens (AI summaries of the decisions for the readers who are not subscribers) */
.token-chip { display: inline-block; margin-right: 10px; padding: 4px 12px; border-radius: 999px; background: #e6f3fa; color: var(--ink); font-size: 14px; font-weight: 600; white-space: nowrap; }
.token-balance { margin: 0 0 10px; color: var(--ink); }
@media print { .token-chip { display: none; } }
.find-locked { margin: 8px 0 0; font-size: 14px; color: var(--muted, #6b7280); }

.admin-rules { max-width: 900px; margin: 40px auto 80px; padding: 0 20px; }
.admin-rules h1 { margin: 0 0 6px; }
.admin-rules .admin-bar { background: #fff; border: 1px solid var(--line, #e1e4e8); border-radius: 14px; padding: 16px 18px; margin: 18px 0; }
.admin-rules .admin-bar input { min-width: 260px; }
.admin-help { color: var(--muted, #6b7280); margin: 0 0 8px; }
.rule-group { background: #fff; border: 1px solid var(--line, #e1e4e8); border-radius: 14px; padding: 6px 20px 10px; margin: 0 0 18px; box-shadow: 0 6px 20px rgba(20, 60, 90, .05); }
.rule-group h2 { margin: 14px 0 6px; font: 600 18px var(--display); color: var(--blue-surface); padding-bottom: 8px; border-bottom: 2px solid #e6f3fa; }
.rule-row { display: grid; grid-template-columns: 1fr auto 150px; gap: 16px; align-items: center; padding: 11px 0; border-bottom: 1px solid #eef1f4; }
.rule-row:last-child { border-bottom: 0; }
.rule-label { font: 500 15px/1.4 var(--body); color: var(--ink); }
.rule-control { display: inline-flex; align-items: center; gap: 8px; min-width: 186px; }
.rule-control input { width: 84px; font: 600 16px var(--body); padding: 8px 10px; text-align: right; border: 1px solid #c9d3dc; border-radius: 10px; background: var(--grey, #f2f3f5); }
.rule-control input:focus { outline: 2px solid var(--blue); background: #fff; }
.rule-unit { min-width: 70px; color: var(--muted, #6b7280); font-size: 14px; }
.rule-side { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.rule-reset { padding: 4px 12px; font-size: 13px; white-space: nowrap; }
.rule-row.is-changed .rule-control input { border-color: var(--orange); background: var(--cream, #fff6f0); }
.admin-tag { padding: 2px 8px; border-radius: 999px; background: var(--cream, #fff6f0); color: var(--orange-dark, #ab4a00); font-size: 12px; font-weight: 600; }
#rules-form > p, #role-form + p { margin-top: 8px; }
#roles .admin-bar { margin-top: 10px; }
@media (max-width: 700px) { .rule-row { grid-template-columns: 1fr; gap: 8px; } .rule-side { justify-content: flex-start; } }

.journal-list { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--line, #e1e4e8); border-radius: 14px; }
.journal-list li { display: grid; grid-template-columns: 150px 110px 1fr; gap: 12px; padding: 9px 16px; border-bottom: 1px solid #eef1f4; font-size: 14px; }
.journal-list li:last-child { border-bottom: 0; }
.journal-list time { color: var(--muted, #6b7280); }
.journal-echec b { color: #b42318; }
@media (max-width: 700px) { .journal-list li { grid-template-columns: 1fr; gap: 2px; } }

.unlock-form { display: inline-flex; align-items: center; gap: 8px; margin: 0; vertical-align: middle; }
.unlock-form .link-button { font: inherit; font-weight: 600; color: var(--link, #0170b9); background: none; border: 0; padding: 0; cursor: pointer; }
.unlock-form small { color: var(--muted, #6b7280); }

/* The token counter, top right of the pages (like the coins of a video game) */
.token-meter { position: fixed; top: calc(var(--header-h, 60px) + 10px); right: 16px; z-index: 40; display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px; background: #fff; border: 2px solid #f0b429; color: #8a5a00; box-shadow: 0 6px 18px rgba(0, 40, 70, .18); font: 700 15px var(--display); }
.token-meter .token-coin { width: 26px; height: 26px; color: #e0a000; }
.token-pips { display: inline-flex; gap: 4px; }
.token-pips i { width: 11px; height: 11px; border-radius: 50%; background: #f0b429; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); }
.token-pips i.off { background: #e6e8eb; box-shadow: none; }
.token-meter.is-empty { border-color: #c9d3dc; color: #6b7280; }
.token-tip { position: absolute; top: calc(100% + 8px); right: 0; width: 270px; padding: 12px 14px; border-radius: 12px; background: #fff; color: var(--ink, #282828); box-shadow: 0 10px 30px rgba(0, 40, 70, .22); font: 400 14px/1.45 var(--body); }
.token-tip p { margin: 6px 0 0; }
.token-tip[hidden] { display: none; }
.token-tip { opacity: 1; visibility: visible; }
.token-button { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.token-link { font-weight: 600; }
.unlock-button { display: inline-flex; align-items: center; justify-content: center; height: 24px; padding: 0 12px; line-height: 1; border-radius: 999px; border: 1px solid #d5dae0; background: #f2f3f5; color: #6b7280; font: 600 13px/1 var(--body); cursor: pointer; }
.unlock-button:hover:not(:disabled), .unlock-button:focus-visible:not(:disabled) { border-color: #f0b429; background: #fff3cd; color: #6b4600; }
.unlock-button:disabled { opacity: .55; cursor: not-allowed; }
.decision-summary form .button:disabled { background: #c9d3dc; cursor: not-allowed; }
@media (max-width: 700px) { .token-meter { top: auto; bottom: 14px; right: 12px; } .token-tip { top: auto; bottom: calc(100% + 8px); } }
@media print { .token-meter { display: none; } }
.token-button:hover, .token-button:focus-visible { background: none; color: #b87900; }
.token-button:hover .token-coin { transform: rotate(-12deg); }
.token-coin { transition: transform .15s; }
.token-meter { transition: background .15s; }
.token-meter:hover, .token-meter:focus-within { background: #fff3cd; }  /* same yellow as the hover of "Utiliser un jeton" */

/* Buying Kinga: the order page, the result, and the Abonnements section of Mon espace (the cards are those of the Kinga page) */
.order { max-width: 900px; margin: 0 auto; padding: calc(var(--header-h) + 40px) 16px 90px; }
.order h1 { margin: 0 0 6px; color: var(--navy); font: 700 clamp(26px, 4vw, 36px)/1.2 var(--display); }
.order-who { margin: 0 0 22px; color: var(--muted); }
.order-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; align-items: stretch; margin: 26px 0; }
.order-plans .plan-card { border: 2px solid var(--line); border-top: 4px solid var(--line); box-shadow: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.order-plans .plan-card input { position: absolute; opacity: 0; pointer-events: none; }
.order-plans .plan-card:hover { border-color: var(--blue); }
.order-plans .plan-card.is-on { border-color: var(--blue); border-top-color: var(--blue); background: #f2f8fc; box-shadow: 0 10px 28px rgba(0, 70, 109, .2); transform: scale(1.025); }
.order-plans .plan-card:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 3px; }
.order-plans .plan-card.is-on .plan-icon { background: var(--blue-surface); color: #fff; }
.order-plans li small { display: block; color: var(--muted); font-size: .9em; }
.order-pick { display: block; padding: 9px 0; border: 1.5px solid var(--line); border-radius: 999px; text-align: center; color: var(--muted); font-weight: 600; }
.order-plan.is-on .order-pick { border-color: var(--blue); background: var(--blue-surface); color: #fff; }
.order-pick-on, .order-plan.is-on .order-pick-off { display: none; }
.order-plan.is-on .order-pick-on { display: inline; }
.order-submit { display: block; width: 100%; box-sizing: border-box; padding-top: calc(15px + .125em); padding-bottom: calc(15px - .125em); font-size: 18px; text-align: center; }
.order-start { padding: 12px 16px; border-radius: 8px; background: var(--cream); color: var(--action-dark); }
.order-terms { display: flex; gap: 10px; align-items: flex-start; }
.order-terms input { flex: none; margin-top: 4px; accent-color: var(--blue); }
.order-foot { color: var(--muted); font-size: 14px; }
.order-error { padding: 10px 14px; border-radius: 8px; background: var(--cream); color: var(--action-dark); font-weight: 600; }
.order-note, .order-closed { padding: 12px 16px; border-radius: 8px; background: var(--grey); border-left: 4px solid var(--blue); }
.order-result { text-align: center; }
.order-check, .order-oops { display: block; width: 120px; height: 120px; margin: 0 auto 10px; color: var(--blue); }
.order-check { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--blue-surface); color: #fff; font-size: 40px; }
.subs-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 18px; border-radius: 8px; background: rgba(26, 133, 195, .1); border-left: 4px solid var(--blue); color: var(--navy); }
.subs-wrap { overflow-x: auto; }
.subs-table { width: 100%; margin: 16px 0; border-collapse: collapse; }
.subs-table thead th { padding: 10px 12px; background: var(--blue-surface); color: #fff; font: 600 15px var(--display); text-align: left; }
.subs-table td, .subs-table tbody th { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.subs-table tbody th { color: var(--navy); font-weight: 600; }
.subs-state { display: inline-block; padding: 2px 12px; border-radius: 999px; background: var(--grey); color: var(--muted); font: 600 13px var(--display); }
.subs-state.is-actif { background: var(--blue); color: #fff; }
.subs-state.is-a_venir { background: rgba(26, 133, 195, .12); color: var(--navy); }
.subs-foot { color: var(--muted); font-size: 14px; }
.plan-card .price small { font-size: 14px; font-weight: 400; }
.plan-card .price.price-year { margin: -10px 0 16px; }
.ribbon-wrap { max-width: 250px; padding-top: 5px; padding-bottom: 5px; line-height: 1.3; text-align: center; }
.plan-card .price-free { display: inline-block; margin-left: 4px; padding: 1px 10px; border-radius: 999px; background: var(--cream); color: var(--action-dark); font: 600 13px var(--display); vertical-align: 2px; }
.plan-card .plan-status { margin: 0 0 16px; }
.plan-card .button { text-align: center; }

/* ---- Pied de page : deux volets (marque et contact à gauche, grands liens à droite), puis la barre des mentions ---- */
.site-footer { background: var(--navy); color: #cfe3f0; margin-top: 0; padding: 0 24px; font-size: 15.5px; line-height: 1.6; }
.site-footer a { color: #cfe3f0; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer .ft-in { display: grid; grid-template-columns: 1fr 1.1fr; max-width: 1200px; margin: 0 auto; }
.site-footer .ft-left { padding: 60px 48px 40px 0; }
.footer-logo { display: block; margin: 0 0 18px -14px; }  /* the picture has its own margin: the logo lines up with the text */
.site-footer .ft-tag { margin: 0 0 8px; color: #fff; font: 600 20px/1.35 var(--display); }
.site-footer .ft-left p { margin: 0 0 22px; max-width: 360px; }
.site-footer .ft-left .ft-tag { margin: 0 0 8px; }
.site-footer a.ft-write { display: inline-block; padding: calc(11px + .125em) 26px calc(11px - .125em); border-radius: 999px; background: var(--action); color: #fff; font-weight: 600; transition: background .15s; }
.site-footer a.ft-write:hover { background: var(--action-dark); color: #fff; }
.site-footer .ft-left small { display: block; margin-top: 10px; color: #9fc3da; font-size: 13.5px; }
.site-footer .ft-right { padding: 48px 0 28px 48px; border-left: 1px solid rgba(255, 255, 255, .14); }
.site-footer .ft-right a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); color: #fff; font: 600 22px var(--display); transition: padding-left .2s, color .2s; }
.site-footer .ft-right a:hover { padding-left: 10px; color: var(--orange); }
.site-footer .ft-right span { color: #9fc3da; font: 400 14px var(--body); text-align: right; }
.site-footer .ft-bar { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 26px; max-width: 1200px; margin: 0 auto; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 14px; color: #9fc3da; }
.site-footer .ft-bar a { color: #9fc3da; } .site-footer .ft-bar a:hover { color: #fff; }
@media (max-width: 800px) {
  .site-footer { padding-bottom: 60px; }  /* the token counter sits at the bottom of the phone screen */
  .site-footer .ft-in { grid-template-columns: 1fr; }
  .site-footer .ft-left { padding-right: 0; }
  .site-footer .ft-right { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
  .site-footer .ft-right a { font-size: 19px; }
  .site-footer .ft-right span { display: none; }
}