/* ==========================================================================
   Allo Avocat — Design system « Prestige revisité » (voir DESIGN.md)
   Police du logo partout : Poppins (titres et textes) · Arabe : Noto Kufi Arabic (titres et textes)
   ========================================================================== */

/* ---------- Polices (fichiers locaux dans assets/fonts, licence OFL) ---------- */
/* Poppins (police du logo, licence OFL : fonts/Poppins-OFL.txt) — 400 texte, 500/600 titres et boutons, 700 accents */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-400-latin-ext.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-500-latin.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-500-latin-ext.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-600-latin.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-600-latin-ext.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-700-latin.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-700-latin-ext.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Noto Kufi Arabic";
  src: url("../fonts/NotoKufiArabic.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

/* ---------- Tokens ---------- */
/*
  Système de couleurs — règle 60-30-10
  · L0 canevas (~60 %) : --surface-0        · L1 structure (~30 %) : --surface-1 (cartes, sidebar, tableaux)
  · L2 flottant : --surface-2 (menus)       · L3 superposition : --surface-3 (modales, toasts)
  · Accent unique (~10 %) : or — boutons principaux, liens, états actifs, focus.
  Le marine (--navy) est la couleur de marque des grandes sections sombres du site public, pas un accent.
  Profondeur : bordure 1px en transparence de la couleur du texte d'abord, ombre douce (alpha < 0,08) ensuite.
*/
:root {
  /* Constantes de marque (identiques dans les deux thèmes) */
  --navy: #0F1B2D;
  --navy-2: #16243A;
  --navy-3: #24344C;
  --white: #FFFFFF;
  --gold: #C9A46C;
  --gold-light: #D7B98A;
  --gold-dark: #8F6B37;
  --on-accent: #0F1B2D;
  --on-status: #FFFFFF;

  /* Thème clair */
  --fg: #0F1B2D;
  --ink: var(--fg);
  --ink-soft: #2F3A4C;
  --grey: #4A5567;
  --grey-light: #8A93A3;
  --surface-0: #F7F3EC;
  --surface-1: #FFFFFF;
  --surface-2: #FFFFFF;
  --surface-3: #FFFFFF;
  --surface-hover: #FBFAF7;
  --offwhite: #FBF8F3;
  --sand: #EFE8DC;
  --sand-2: #E4DACA;
  --line: color-mix(in srgb, var(--fg) 9%, transparent);
  --line-strong: color-mix(in srgb, var(--fg) 17%, transparent);
  --border-2: color-mix(in srgb, var(--fg) 11%, transparent);
  --border-3: color-mix(in srgb, var(--fg) 13%, transparent);

  --accent: var(--gold);
  --accent-hover: #BC955B;
  --accent-strong: #7E5E2E;
  --gold-tint: color-mix(in srgb, var(--gold) 14%, transparent);
  --scrim: rgba(10, 16, 26, .55);

  --success: #2E7D5B;  --success-bg: #E8F3EE;
  --warning: #A86A12;  --warning-bg: #FBF1E1;
  --danger:  #B42318;  --danger-bg:  #FCEBEA;
  --info:    #2F5D8A;  --info-bg:    #E8EFF7;
  --violet:  #6B4E9B;  --violet-bg:  #F0EBF7;

  --shadow-xs: 0 1px 2px rgba(16, 27, 43, .04);
  --shadow-sm: 0 1px 3px rgba(16, 27, 43, .05);
  --shadow: 0 4px 12px rgba(16, 27, 43, .06);
  --shadow-lg: 0 8px 24px rgba(16, 27, 43, .07);
  --edge: 0 0 0 transparent;

  --font-title: "Poppins", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Poppins", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-arabic: "Noto Kufi Arabic", "Poppins", "Segoe UI", Tahoma, sans-serif;
  --font-arabic-title: "Noto Kufi Arabic", "Poppins", "Segoe UI", Tahoma, sans-serif;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 160ms;
  --t: 280ms;
  --t-slow: 600ms;
  --header-h: 84px;
  --sidebar-w: 268px;
  --container: 1240px;

  /* Échelle z-index */
  --z-sticky: 10;
  --z-chrome: 90;
  --z-dropdown: 100;
  --z-drawer: 200;
  --z-toast: 400;
  color-scheme: light;
}

/* Thème sombre : paliers de luminosité, bordures plus visibles, éclairage de bord plutôt qu'ombres */
:root[data-theme="dark"] {
  --fg: #ECE8E1;
  --ink-soft: #C9CED8;
  --grey: #A3ACBA;
  --grey-light: #737D8C;
  --surface-0: #0B111B;
  --surface-1: #121A27;
  --surface-2: #172131;
  --surface-3: #1B2638;
  --on-status: #0B111B;
  --surface-hover: color-mix(in srgb, var(--fg) 4%, var(--surface-1));
  --offwhite: color-mix(in srgb, var(--fg) 3%, var(--surface-1));
  --sand: color-mix(in srgb, var(--fg) 7%, var(--surface-1));
  --sand-2: color-mix(in srgb, var(--fg) 12%, var(--surface-1));
  --accent: #C9A46C;
  --accent-hover: #D7B98A;
  --accent-strong: #D7B98A;
  --gold-tint: color-mix(in srgb, #C9A46C 16%, transparent);
  --line: color-mix(in srgb, var(--fg) 11%, transparent);
  --line-strong: color-mix(in srgb, var(--fg) 20%, transparent);
  --border-2: color-mix(in srgb, var(--fg) 13%, transparent);
  --border-3: color-mix(in srgb, var(--fg) 15%, transparent);
  --scrim: rgba(0, 0, 0, .62);
  --success: #5CC092;  --success-bg: rgba(92, 192, 146, .12);
  --warning: #E3A94B;  --warning-bg: rgba(227, 169, 75, .12);
  --danger:  #F07A6E;  --danger-bg:  rgba(240, 122, 110, .12);
  --info:    #7FAEDB;  --info-bg:    rgba(127, 174, 219, .12);
  --violet:  #B69BE0;  --violet-bg:  rgba(182, 155, 224, .13);
  --shadow-xs: 0 0 0 transparent;
  --shadow-sm: 0 0 0 transparent;
  --shadow: 0 6px 16px rgba(0, 0, 0, .28);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, .34);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .05);
  color-scheme: dark;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[dir="rtl"] body, body[dir="rtl"] { font-family: var(--font-arabic); font-weight: 400; font-size: 15px; line-height: 1.8; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: url("../images/cursor-gavel.svg") 16 29, pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--gold); color: var(--white); }
hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }

h1, h2, h3, .title, .kpi__value, .display {
  font-family: var(--font-title);
  font-weight: 500;
  font-optical-sizing: auto;
  letter-spacing: -.012em;
  line-height: 1.1;
  margin: 0 0 .4em;
  color: inherit;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .title, [dir="rtl"] .display {
  font-family: var(--font-arabic-title);
  font-variation-settings: normal;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
}
h1 { font-size: clamp(2.5rem, 5.2vw, 4.25rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.875rem); }
h3 { font-size: 1.375rem; }
h4 { font-size: 1rem; font-weight: 600; margin: 0 0 .4em; }
p { margin: 0 0 1em; }
strong, b { font-weight: 600; }
small, .small { font-size: .85rem; }
.muted { color: var(--grey); }
.text-gold { color: var(--gold); }
.medium { font-weight: 500; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: middle; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 28px; height: 28px; }
.icon--xl { width: 40px; height: 40px; stroke-width: 1.2; }
[dir="rtl"] .icon--flip { transform: scaleX(-1); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.container--narrow { max-width: 860px; }
.stack > * + * { margin-top: var(--stack, 16px); }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.grow { flex: 1; min-width: 0; }
.grid { display: grid; gap: 24px; }
.grid-2 { display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 40px; }
.mb-0 { margin-bottom: 0 !important; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-text); font-weight: 500; font-size: .76rem;
  letter-spacing: .22em; color: var(--accent-strong); margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
[dir="rtl"] .eyebrow { letter-spacing: 0; font-size: .85rem; }

/* ---------- Boutons ---------- */
.btn {
  --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-bd: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 22px;
  border: 1px solid var(--btn-bd); border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 500; font-size: .92rem; letter-spacing: .02em; line-height: 1; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
  position: relative; overflow: hidden; isolation: isolate;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform var(--t-slow) var(--ease);
}
.btn:hover::after { transform: translateX(120%); }
.btn:hover { --btn-bg: var(--accent-hover); --btn-bd: var(--accent-hover); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled, .btn.is-loading { opacity: .6; pointer-events: none; }
.btn .icon { width: 18px; height: 18px; }
.btn--gold { --btn-bg: var(--accent); --btn-bd: var(--accent); --btn-fg: var(--on-accent); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg); --btn-bd: var(--line-strong); }
.btn--ghost:hover { --btn-bg: var(--surface-hover); --btn-bd: color-mix(in srgb, var(--fg) 30%, transparent); box-shadow: none; }
.btn--light { --btn-bg: transparent; --btn-fg: var(--white); --btn-bd: rgba(255,255,255,.35); }
.btn--light:hover { --btn-bd: var(--white); --btn-bg: rgba(255,255,255,.06); box-shadow: none; }
.btn--white { --btn-bg: var(--white); --btn-fg: var(--navy); --btn-bd: var(--white); }
.btn--danger, .btn--danger:hover { --btn-bg: var(--danger); --btn-bd: var(--danger); --btn-fg: var(--on-status); }
.btn--success, .btn--success:hover { --btn-bg: var(--success); --btn-bd: var(--success); --btn-fg: var(--on-status); }
.btn--sm { min-height: 36px; padding: 0 14px; font-size: .84rem; gap: 6px; }
.btn--xs { min-height: 30px; padding: 0 10px; font-size: .78rem; gap: 6px; }
.btn--lg { min-height: 56px; padding: 0 30px; font-size: 1rem; }
.btn--block { width: 100%; }
.btn--icon { width: 40px; min-height: 40px; padding: 0; }
.btn.is-loading::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite;
}
.link { color: var(--accent-strong); font-weight: 500; border-bottom: 1px solid transparent; transition: border-color var(--t-fast); }
.link:hover { border-color: currentColor; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--fg); }
.link-arrow .icon { transition: transform var(--t) var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }
[dir="rtl"] .link-arrow:hover .icon { transform: translateX(-4px) scaleX(-1); }
[dir="rtl"] .link-arrow .icon, [dir="rtl"] .btn .icon[data-dir] { transform: scaleX(-1); }

/* ---------- Formulaires ---------- */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field > label, .label { font-size: .82rem; font-weight: 500; color: var(--ink-soft); letter-spacing: .01em; }
.field .hint { font-size: .8rem; color: var(--grey); }
.field .error, .field-error { font-size: .8rem; color: var(--danger); font-weight: 400; }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 12px 16px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface-1); color: var(--ink); font-weight: 400;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  appearance: none;
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-inline-end: 40px;
}
[dir="rtl"] .select { background-position: left 16px center; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--grey-light); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-tint); }
.is-invalid .input, .is-invalid .select, .is-invalid .textarea, .input.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(180,35,24,.08); }
.input--sm, .select--sm { min-height: 38px; padding: 7px 12px; font-size: .9rem; }
.select--sm { padding-inline-end: 32px; background-position: right 10px center; }
.input-group { position: relative; display: flex; align-items: center; }
.input-group .input { padding-inline-start: 44px; }
.input-group > .icon { position: absolute; inset-inline-start: 15px; color: var(--grey); pointer-events: none; }
.input-group .input-action { position: absolute; inset-inline-end: 6px; background: none; border: 0; color: var(--grey); padding: 8px; border-radius: 8px; }
.input-group .input-action:hover { color: var(--fg); background: var(--sand); }
.check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: url("../images/cursor-gavel.svg") 16 29, pointer; font-weight: 400; font-size: .92rem; line-height: 1.45; }
.check input { appearance: none; width: 20px; height: 20px; border: 1.5px solid var(--line-strong); border-radius: 6px; background: var(--surface-1); flex: none; margin: 1px 0 0; transition: all var(--t-fast); display: grid; place-items: center; }
.check input[type="radio"] { border-radius: 50%; }
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::after { content: ""; width: 10px; height: 6px; border: 2px solid var(--on-accent); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.check input[type="radio"]:checked::after { width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--on-accent); transform: none; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 18px; }
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: url("../images/cursor-gavel.svg") 16 29, pointer; font-size: .92rem; }
.switch input { appearance: none; width: 42px; height: 24px; border-radius: 99px; background: var(--line-strong); transition: background var(--t); position: relative; margin: 0; flex: none; }
.switch input::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 2px rgba(0,0,0,.12); transition: transform var(--t) var(--ease-out); }
.switch input:checked { background: var(--success); }
.switch input:checked::after { transform: translateX(18px); }
[dir="rtl"] .switch input:checked::after { transform: translateX(-18px); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.form-grid .full { grid-column: 1 / -1; }
.form-actions { display: flex; gap: 12px; justify-content: flex-end; align-items: center; padding-top: 8px; flex-wrap: wrap; }
.fieldset { border: 0; padding: 0; margin: 0 0 8px; }
.fieldset legend { font-family: var(--font-title); font-weight: 500; font-size: 1.3rem; letter-spacing: 0; margin-bottom: 14px; padding: 0; }
.choice-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 22px; }
.choice-card { position: relative; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: 18px; cursor: url("../images/cursor-gavel.svg") 16 29, pointer; transition: all var(--t) var(--ease); background: var(--surface-1); }
.choice-card input { position: absolute; opacity: 0; }
.choice-card:hover { border-color: var(--gold); }
.choice-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--gold-tint); }
.choice-card .icon { color: var(--gold); margin-bottom: 8px; }
.choice-card strong { display: block; }
.choice-card span { font-size: .85rem; color: var(--grey); }

/* ---------- Badges, chips, avatars ---------- */
.badge {
  --b-fg: var(--grey); --b-bg: var(--sand);
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 9px; border-radius: 99px;
  font-size: .74rem; font-weight: 500; letter-spacing: .02em; line-height: 1.4; white-space: nowrap;
  color: var(--b-fg); background: var(--b-bg); transition: all var(--t) var(--ease);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--success { --b-fg: var(--success); --b-bg: var(--success-bg); }
.badge--warning { --b-fg: var(--warning); --b-bg: var(--warning-bg); }
.badge--danger  { --b-fg: var(--danger);  --b-bg: var(--danger-bg); }
.badge--info    { --b-fg: var(--info);    --b-bg: var(--info-bg); }
.badge--violet  { --b-fg: var(--violet);  --b-bg: var(--violet-bg); }
.badge--gold    { --b-fg: var(--accent-strong); --b-bg: var(--gold-tint); }
.badge--muted   { --b-fg: var(--grey); --b-bg: var(--sand); }
.badge--plain::before { display: none; }
.badge.is-changing { animation: badgePop .5s var(--ease-out); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface-1); font-size: .8rem; color: var(--ink-soft); font-weight: 400; }
.chip .icon { width: 14px; height: 14px; color: var(--accent-strong); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.avatar {
  --size: 44px;
  width: var(--size); height: var(--size); border-radius: 50%; flex: none;
  display: grid; place-items: center; background: linear-gradient(135deg, var(--navy-3), var(--navy));
  color: var(--gold-light); font-family: var(--font-title); font-weight: 500; font-size: calc(var(--size) * .4); letter-spacing: 0;
  position: relative; overflow: hidden;
}
.avatar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(205,184,146,.35); }
.avatar--sm { --size: 34px; } .avatar--lg { --size: 72px; } .avatar--xl { --size: 120px; }
.avatar--gold { background: linear-gradient(135deg, var(--gold-light), var(--gold-dark)); color: var(--on-accent); }
.verified { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-strong); font-size: .78rem; font-weight: 500; }
.verified .icon { width: 16px; height: 16px; }

/* ---------- Cartes ---------- */
.card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs), var(--edge); }
.card__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.card__header h2, .card__header h3, .card__title { font-size: 1.35rem; margin: 0; letter-spacing: .02em; }
.card__body { padding: 24px; }
.card__body--flush { padding: 0; }
.card__footer { padding: 16px 24px; border-top: 1px solid var(--line); background: var(--offwhite); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.card--hover { transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t); }
.card--hover:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.card--navy { background: var(--navy); color: var(--white); border-color: var(--navy); }
.card--sand { background: var(--sand); border-color: var(--sand-2); box-shadow: none; }

/* ---------- KPI ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 28px; }
.kpi { position: relative; padding: 22px 24px; background: var(--surface-1); box-shadow: var(--shadow-xs), var(--edge); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--t) var(--ease), box-shadow var(--t); }
.kpi:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.kpi::after { content: ""; position: absolute; inset-inline-end: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; border: 1px solid var(--gold-tint); }
.kpi__label { display: flex; align-items: center; gap: 8px; color: var(--grey); font-size: .82rem; font-weight: 400; }
.kpi__label .icon { color: var(--gold); width: 18px; height: 18px; }
.kpi__value { font-size: 3rem; margin: 10px 0 2px; color: var(--fg); line-height: 1; }
.kpi__meta { font-size: .8rem; color: var(--grey); }
.kpi__meta.up { color: var(--success); }
.kpi--accent { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 5%, var(--surface-1)); }
.kpi--accent .kpi__value { color: var(--accent-strong); }
.kpi--accent .kpi__label .icon { color: var(--accent-strong); }

/* ---------- Tableaux ---------- */
.table-wrap { width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th { text-align: start; font-weight: 500; font-size: .74rem; letter-spacing: .1em; color: var(--grey); padding: 14px 20px; background: var(--offwhite); border-bottom: 1px solid var(--line); white-space: nowrap; }
[dir="rtl"] .table th { letter-spacing: 0; }
.table td { padding: 16px 20px; border-bottom: 1px solid var(--line); vertical-align: middle; font-weight: 400; }
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover { background: var(--surface-hover); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .cell-user { display: flex; align-items: center; gap: 12px; min-width: 200px; }
.table .cell-user strong { display: block; font-weight: 500; }
.table .cell-user span { font-size: .82rem; color: var(--grey); }
.table .actions { display: flex; gap: 6px; justify-content: flex-end; }
.table-link { font-weight: 500; color: var(--fg); }
.table-link:hover { color: var(--accent-strong); }

/* ---------- Filtres, toolbar ---------- */
.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.toolbar .input-group { flex: 1; min-width: 220px; }
.toolbar .input, .toolbar .select { min-height: 42px; }
.segmented { display: inline-flex; padding: 4px; background: var(--sand); border-radius: 99px; gap: 2px; flex-wrap: wrap; }
.segmented a, .segmented button, .segmented > label { padding: 8px 16px; border-radius: 99px; font-size: .84rem; font-weight: 500; color: var(--grey); border: 0; background: none; transition: all var(--t) var(--ease); display: inline-flex; gap: 8px; align-items: center; }
.segmented a:hover, .segmented button:hover, .segmented > label:hover { color: var(--fg); }
.segmented .is-active { background: var(--surface-1); color: var(--fg); box-shadow: var(--shadow-xs); }
.segmented > label { cursor: url("../images/cursor-gavel.svg") 16 29, pointer; }
.segmented > label:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.segmented .count { font-size: .72rem; background: var(--gold-tint); color: var(--accent-strong); padding: 1px 7px; border-radius: 99px; }

/* ---------- Pagination ---------- */
.pagination { display: flex; gap: 6px; justify-content: center; align-items: center; padding: 20px; flex-wrap: wrap; }
.pagination a, .pagination span { min-width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 10px; font-size: .88rem; font-weight: 500; border: 1px solid transparent; color: var(--ink-soft); padding: 0 8px; transition: all var(--t-fast); }
.pagination a:hover { border-color: var(--line-strong); background: var(--surface-1); }
.pagination .is-active { background: var(--accent); color: var(--on-accent); }
.pagination .is-disabled { opacity: .35; pointer-events: none; }

/* ---------- États vides & chargement ---------- */
.empty { text-align: center; padding: 56px 24px; color: var(--grey); }
.empty__icon { width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: var(--sand); color: var(--accent-strong); position: relative; }
.empty__icon::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px dashed var(--line-strong); animation: spin 30s linear infinite; }
.empty__icon .icon { width: 30px; height: 30px; }
.empty h3 { color: var(--fg); font-size: 1.4rem; }
.empty p { max-width: 420px; margin: 0 auto 18px; }
.skeleton { position: relative; overflow: hidden; background: var(--sand); border-radius: 8px; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: shimmer 1.4s infinite; }
.skeleton-card { padding: 24px; border-radius: var(--radius-lg); background: var(--surface-1); border: 1px solid var(--line); }
.skeleton-line { height: 12px; margin-bottom: 10px; }
.skeleton-line.w-40 { width: 40%; } .skeleton-line.w-60 { width: 60%; } .skeleton-line.w-80 { width: 80%; }
.skeleton-circle { width: 56px; height: 56px; border-radius: 50%; margin-bottom: 16px; }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--gold); animation: spin .8s linear infinite; }

/* ---------- Alertes ---------- */
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: var(--radius); font-size: .92rem; margin-bottom: 20px; border: 1px solid transparent; font-weight: 400; }
.alert .icon { margin-top: 2px; }
.alert--success { background: var(--success-bg); color: var(--success); border-color: rgba(46,125,91,.2); }
.alert--error, .alert--danger { background: var(--danger-bg); color: var(--danger); border-color: rgba(180,35,24,.2); }
.alert--warning { background: var(--warning-bg); color: var(--warning); border-color: rgba(168,106,18,.2); }
.alert--info { background: var(--info-bg); color: var(--info); border-color: rgba(47,93,138,.2); }
.notice-confidential { display: flex; gap: 14px; align-items: center; padding: 22px; border-radius: var(--radius-lg); background: repeating-linear-gradient(-45deg, var(--sand), var(--sand) 10px, var(--offwhite) 10px, var(--offwhite) 20px); color: var(--ink-soft); }

/* ---------- Toasts ---------- */
.toasts { position: fixed; z-index: var(--z-toast); inset-block-end: 24px; inset-inline-end: 24px; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--surface-3); color: var(--fg); border: 1px solid var(--border-3); border-inline-start: 3px solid var(--accent); box-shadow: var(--shadow-lg), var(--edge); font-size: .9rem; font-weight: 400; animation: toastIn .45s var(--ease-out) both; }
.toast--success { border-inline-start-color: var(--success); } .toast--error { border-inline-start-color: var(--danger); } .toast--warning { border-inline-start-color: var(--warning); }
.toast .icon { margin-top: 1px; color: var(--accent-strong); }
.toast--success .icon { color: var(--success); } .toast--error .icon { color: var(--danger); } .toast--warning .icon { color: var(--warning); }
.toast__close { margin-inline-start: auto; background: none; border: 0; color: var(--grey); padding: 2px; }
.toast.is-leaving { animation: toastOut .3s var(--ease) forwards; }

/* ---------- Modales (dialog) ---------- */
.modal { border: 0; padding: 0; border-radius: var(--radius-xl); width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); background: var(--surface-3); color: var(--fg); border: 1px solid var(--border-3); box-shadow: var(--shadow-lg), var(--edge); overflow: auto; }
.modal--lg { width: min(860px, calc(100vw - 32px)); }
.modal--xl { width: min(1100px, calc(100vw - 32px)); }
.modal::backdrop { background: var(--scrim); backdrop-filter: blur(3px); }
.modal[open] { animation: modalIn .4s var(--ease-out); }
.modal[open]::backdrop { animation: fadeIn .3s var(--ease); }
.modal.is-closing { animation: modalOut .22s var(--ease) forwards; }
.modal__header { display: flex; align-items: center; justify-content: space-between; padding: 22px 26px 0; gap: 16px; }
.modal__header h3 { margin: 0; font-size: 1.6rem; }
.modal__body { padding: 20px 26px 26px; }
.modal__footer { padding: 0 26px 24px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.modal__close { background: var(--sand); border: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; transition: background var(--t-fast), transform var(--t) var(--ease); }
.modal__close:hover { background: var(--sand-2); transform: rotate(90deg); }
.preview-frame { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: var(--radius); background: var(--sand); }
.preview-image { max-height: 70vh; margin: 0 auto; border-radius: var(--radius); }

/* ---------- Dropdown / menus contextuels ---------- */
.dropdown { position: relative; }
.dropdown__menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 10px); z-index: var(--z-dropdown); min-width: 220px;
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 14px; box-shadow: var(--shadow), var(--edge); padding: 6px;
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right; pointer-events: none;
  transition: opacity var(--t-fast) var(--ease), transform var(--t) var(--ease-out);
}
.dropdown.is-open .dropdown__menu { opacity: 1; transform: none; pointer-events: auto; }
.dropdown__menu a, .dropdown__menu button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; font-size: .9rem; font-weight: 400; background: none; border: 0; text-align: start; color: var(--ink-soft); }
.dropdown__menu a:hover, .dropdown__menu button:hover { background: var(--offwhite); color: var(--fg); }
.dropdown__menu .icon { width: 18px; height: 18px; color: var(--grey); }
.dropdown__menu .danger { color: var(--danger); }
.dropdown__menu .danger .icon { color: var(--danger); }
.dropdown__sep { height: 1px; background: var(--line); margin: 6px 0; }
.dropdown__head { padding: 10px 12px 8px; font-size: .8rem; color: var(--grey); }

/* ---------- Onglets ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; position: relative; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; padding: 14px 18px; border: 0; background: none; font-weight: 500; font-size: .9rem; color: var(--grey); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; transition: color var(--t-fast); }
.tab:hover { color: var(--fg); }
.tab.is-active { color: var(--fg); }
.tab .count { font-size: .72rem; background: var(--sand); padding: 1px 8px; border-radius: 99px; color: var(--grey); }
.tabs__ink { position: absolute; bottom: -1px; height: 2px; background: var(--gold); transition: inset-inline-start var(--t) var(--ease-out), width var(--t) var(--ease-out), left var(--t) var(--ease-out); }
.tab-panel { display: none; animation: panelIn .4s var(--ease-out); }
.tab-panel.is-active { display: block; }

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-inline-start: 28px; }
.timeline::before { content: ""; position: absolute; inset-inline-start: 8px; top: 6px; bottom: 6px; width: 1px; background: var(--line-strong); }
.timeline__item { position: relative; padding-bottom: 22px; }
.timeline__item::before { content: ""; position: absolute; inset-inline-start: -25px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--surface-1); border: 2px solid var(--gold); }
.timeline__item--hearing::before { background: var(--violet); border-color: var(--violet); }
.timeline__item--deadline::before { background: var(--warning); border-color: var(--warning); }
.timeline__item--system::before, .timeline__item--status_change::before { border-color: var(--grey-light); }
.timeline__item--future::before { box-shadow: 0 0 0 5px var(--gold-tint); }
.timeline__date { font-size: .78rem; color: var(--grey); }
.timeline__title { font-weight: 500; margin: 2px 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- Uploader ---------- */
.dropzone { position: relative; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg); padding: 34px 20px; text-align: center; background: var(--offwhite); transition: all var(--t) var(--ease); cursor: url("../images/cursor-gavel.svg") 16 29, pointer; }
.dropzone:hover, .dropzone.is-over { border-color: var(--gold); background: color-mix(in srgb, var(--accent) 5%, var(--surface-1)); }
.dropzone.is-over { transform: scale(1.01); box-shadow: 0 0 0 6px var(--gold-tint); }
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: url("../images/cursor-gavel.svg") 16 29, pointer; }
.dropzone__icon { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-1); color: var(--accent-strong); box-shadow: var(--shadow-sm); transition: transform var(--t) var(--ease-out); }
.dropzone.is-over .dropzone__icon { transform: translateY(-4px) scale(1.06); }
.dropzone strong { display: block; color: var(--fg); }
.dropzone small { color: var(--grey); }
.upload-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.upload-item { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-1); animation: slideUp .35s var(--ease-out); }
.upload-item__name { flex: 1; min-width: 0; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-item__bar { height: 4px; border-radius: 4px; background: var(--sand); overflow: hidden; margin-top: 6px; }
.upload-item__bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold-light)); transition: width var(--t) var(--ease); }
.upload-item.is-done .upload-item__bar span { background: var(--success); }
.upload-item.is-error { border-color: rgba(180,35,24,.3); background: var(--danger-bg); }
.upload-item__status { font-size: .78rem; color: var(--grey); }
.upload-item.is-error .upload-item__status { color: var(--danger); }

/* ---------- Liste de documents ---------- */
.doc-list { display: flex; flex-direction: column; }
.doc { display: flex; gap: 14px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line); transition: background var(--t-fast); }
.doc:last-child { border-bottom: 0; }
.doc:hover { background: var(--surface-hover); }
.doc__icon { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; background: var(--sand); color: var(--accent-strong); flex: none; font-size: .62rem; font-weight: 500; letter-spacing: .05em; position: relative; }
.doc__icon[data-ext="pdf"] { background: var(--danger-bg); color: var(--danger); }
.doc__icon[data-ext="docx"], .doc__icon[data-ext="doc"] { background: var(--info-bg); color: var(--info); }
.doc__icon[data-ext="jpg"], .doc__icon[data-ext="jpeg"], .doc__icon[data-ext="png"], .doc__icon[data-ext="webp"] { background: var(--success-bg); color: var(--success); }
.doc__main { flex: 1; min-width: 0; }
.doc__title { font-weight: 500; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.doc__meta { font-size: .8rem; color: var(--grey); }
.doc__actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.icon-btn { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--grey); transition: all var(--t-fast); }
.icon-btn:hover { background: var(--sand); color: var(--fg); }
.icon-btn--danger:hover { background: var(--danger-bg); color: var(--danger); }
.icon-btn .icon { width: 18px; height: 18px; }

/* ---------- Calendrier ---------- */
.calendar { --cell-h: 118px; }
.calendar__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.calendar__title { font-size: 1.8rem; margin: 0; min-width: 220px; }
.calendar__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar__dow { padding: 10px 12px; font-size: .72rem; font-weight: 500; letter-spacing: .12em; color: var(--grey); border-bottom: 1px solid var(--line); background: var(--offwhite); }
.calendar__cell { min-height: var(--cell-h); padding: 8px; border-inline-end: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; transition: background var(--t-fast); }
.calendar__cell:nth-child(7n) { border-inline-end: 0; }
.calendar__cell.is-out { background: var(--offwhite); color: var(--grey-light); }
.calendar__cell.is-today .calendar__day { background: var(--accent); color: var(--on-accent); }
.calendar__day { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: .82rem; font-weight: 500; margin-bottom: 4px; }
.calendar__event { display: block; width: 100%; text-align: start; padding: 4px 8px; margin-bottom: 4px; border-radius: 6px; font-size: .74rem; line-height: 1.35; background: var(--gold-tint); color: var(--accent-strong); border: 0; border-inline-start: 3px solid var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: fadeIn .3s var(--ease); }
.calendar__event[data-status="requested"] { background: var(--warning-bg); color: var(--warning); border-color: var(--warning); }
.calendar__event[data-status="confirmed"] { background: var(--success-bg); color: var(--success); border-color: var(--success); }
.calendar__event[data-status="proposed"] { background: var(--violet-bg); color: var(--violet); border-color: var(--violet); }
.calendar__event[data-kind="hearing"] { background: var(--violet-bg); color: var(--violet); border-color: var(--violet); }
.calendar__event[data-kind="deadline"] { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.calendar__event[data-kind="block"] { background: repeating-linear-gradient(-45deg, var(--sand), var(--sand) 6px, var(--sand-2) 6px, var(--sand-2) 12px); color: var(--grey); border-color: var(--grey-light); }
.calendar__legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: .8rem; color: var(--grey); padding: 14px 22px; }
.calendar__legend span { display: inline-flex; align-items: center; gap: 6px; }
.calendar__legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.calendar.is-loading .calendar__grid { opacity: .5; transition: opacity var(--t); }

/* ---------- Créneaux (prise de RDV) ---------- */
.date-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.date-pill { flex: none; scroll-snap-align: start; width: 66px; padding: 10px 6px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-1); text-align: center; transition: all var(--t) var(--ease); }
.date-pill small { display: block; font-size: .68rem; letter-spacing: .1em; color: var(--grey); }
.date-pill strong { display: block; font-family: var(--font-title); font-size: 1.6rem; line-height: 1.1; font-weight: 500; }
.date-pill:hover { border-color: var(--gold); }
.date-pill.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.date-pill.is-active small { color: var(--on-accent); opacity: .7; }
.date-pill:disabled { opacity: .35; cursor: not-allowed; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; min-height: 48px; }
.slot { padding: 11px 6px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface-1); font-weight: 500; font-size: .9rem; transition: all var(--t-fast) var(--ease); animation: fadeUp .35s var(--ease-out) both; }
.slot:hover { border-color: var(--accent); }
.slot.is-active { background: var(--gold); border-color: var(--gold); color: var(--on-accent); }

/* ---------- Barre de progression des statuts ---------- */
.status-track { display: flex; gap: 6px; margin: 6px 0 0; }
.status-track span { flex: 1; height: 4px; border-radius: 4px; background: var(--sand-2); transition: background var(--t-slow) var(--ease); }
.status-track span.is-done { background: var(--gold); }
.status-select { min-width: 210px; }

/* ---------- Bandeau mode assistance ---------- */
.imp-banner { position: sticky; top: 0; z-index: var(--z-chrome); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 24px; background: repeating-linear-gradient(-45deg, #8C2A1E, #8C2A1E 14px, #9A3324 14px, #9A3324 28px); color: var(--white); font-size: .88rem; font-weight: 400; }
.imp-banner .icon { color: #FFD7A8; }
.imp-banner strong { font-weight: 500; }
.imp-banner__timer { font-family: var(--font-title); font-size: 1.15rem; letter-spacing: 0; padding: 2px 10px; border-radius: 6px; background: rgba(0,0,0,.25); }
.imp-banner form { margin-inline-start: auto; }

/* ==========================================================================
   SITE PUBLIC
   ========================================================================== */
.site-header { position: fixed; inset-inline: 0; top: 0; z-index: var(--z-chrome); height: var(--header-h); transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease), height var(--t) var(--ease), color var(--t); color: var(--white); }
.site-header.is-solid, .site-header.is-scrolled { background: rgba(16,27,43,.92); backdrop-filter: saturate(140%) blur(14px); box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.site-header.is-scrolled { --header-h: 70px; height: 70px; }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header { transition: transform var(--t) var(--ease), background var(--t), height var(--t); }
.site-header__inner { height: 100%; display: flex; align-items: center; gap: 32px; }
/* Logo : icône (combiné, bulle dorée à balance) au-dessus, nom « allo avocats » centré en dessous. Couleur d'encre = couleur du texte. */
.brand { display: inline-flex; flex-direction: column; align-items: center; align-self: flex-start; gap: 3px; flex: none; color: inherit; }
.brand__mark, .brand__word { position: relative; display: block; width: auto; flex: none; }
.brand__mark { height: 44px; aspect-ratio: 204 / 180; }
.brand__word { height: 15px; aspect-ratio: 405 / 64; }
.brand__mark img, .brand__word img, .brand__ink { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Parties blanches du logo (combiné, « allo ») : pochoir rempli avec la couleur du texte */
.brand__ink { background: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.brand__mark .brand__ink { -webkit-mask-image: url("../images/logo-mark-ink.webp?v=2"); mask-image: url("../images/logo-mark-ink.webp?v=2"); }
.brand__word .brand__ink { -webkit-mask-image: url("../images/logo-word-ink.webp?v=2"); mask-image: url("../images/logo-word-ink.webp?v=2"); }
.main-nav { display: flex; gap: 6px; margin-inline-start: auto; }
.main-nav a { position: relative; padding: 10px 14px; font-size: .9rem; font-weight: 400; color: rgba(255,255,255,.82); transition: color var(--t-fast); }
.main-nav a::after { content: ""; position: absolute; inset-inline: 14px; bottom: 4px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform var(--t) var(--ease-out); }
.main-nav a:hover, .main-nav a.is-active { color: var(--white); }
.main-nav a:hover::after, .main-nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.lang-switch { display: inline-flex; border: 1px solid rgba(255,255,255,.2); border-radius: 99px; padding: 3px; }
.lang-switch a { padding: 4px 10px; font-size: .74rem; font-weight: 500; letter-spacing: .08em; border-radius: 99px; color: rgba(255,255,255,.7); }
.lang-switch a.is-active { background: rgba(255,255,255,.12); color: var(--white); }
.burger { display: none; background: none; border: 1px solid rgba(255,255,255,.25); color: var(--white); width: 44px; height: 44px; border-radius: 12px; place-items: center; }
.mobile-nav { position: fixed; inset: 0; z-index: var(--z-drawer); background: var(--navy); color: var(--white); padding: 24px; display: flex; flex-direction: column; transform: translateY(-100%); transition: transform .5s var(--ease-out); visibility: hidden; }
.mobile-nav.is-open { transform: none; visibility: visible; }
.mobile-nav__top { display: flex; justify-content: space-between; align-items: center; }
.mobile-nav__links { display: flex; flex-direction: column; margin-top: 28px; }
.mobile-nav__links a { font-family: var(--font-title); font-weight: 500; font-size: 1.56rem; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); opacity: 0; transform: translateY(16px); transition: opacity .4s, transform .5s var(--ease-out), color var(--t-fast); }
[dir="rtl"] .mobile-nav__links a { font-family: var(--font-arabic); font-size: 1.08rem; }
.mobile-nav.is-open .mobile-nav__links a { opacity: 1; transform: none; }
.mobile-nav__links a:hover, .mobile-nav__links a.is-active { color: var(--gold-light); }
.mobile-nav__foot { margin-top: auto; padding-top: 24px; display: grid; gap: 10px; }
.mobile-nav { overflow-y: auto; overscroll-behavior: contain; }
.mobile-nav__tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.mobile-nav__tools .lang-switch { display: inline-flex; }
.mobile-nav__tools .lang-switch a { font-size: .8rem; padding: 6px 14px; }
.mobile-nav__tools .theme-toggle { display: inline-grid; }

/* Hero */
.hero { position: relative; overflow: hidden; background: var(--navy); color: var(--white); padding: calc(var(--header-h) + 72px) 0 0; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 30%, transparent 75%); }
.hero__orb { position: absolute; width: 760px; height: 760px; inset-inline-end: -220px; top: -180px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(205,184,146,.20), rgba(181,154,108,.04) 45%, transparent 70%); animation: float 14s ease-in-out infinite; }
.hero__arc { position: absolute; inset-inline-end: -120px; top: 60px; width: 640px; opacity: .55; animation: spin 120s linear infinite; }
.hero__arc circle { fill: none; stroke: var(--gold); stroke-width: .6; }
.hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px; align-items: end; }
.hero h1 { font-size: clamp(3.4rem, 8.6vw, 8.4rem); line-height: .9; margin-bottom: 28px; letter-spacing: 0; }
[dir="rtl"] .hero h1 { font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: 1.2; }
.hero h1 .line { display: block; overflow: hidden; padding-top: .12em; margin-top: -.12em; }
.hero h1 .line > span { display: block; animation: lineUp 1.1s var(--ease-out) both; }
.hero h1 .line:nth-child(2) > span { animation-delay: .12s; }
.hero h1 .line:nth-child(3) > span { animation-delay: .24s; }
.hero h1 em { font-style: normal; color: var(--gold-light); }
.hero__lead { font-size: 1.12rem; max-width: 560px; color: rgba(255,255,255,.74); margin-bottom: 32px; animation: fadeUp 1s .35s var(--ease-out) both; }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; animation: fadeUp 1s .45s var(--ease-out) both; }
.hero__stats { display: grid; gap: 0; border-inline-start: 1px solid rgba(255,255,255,.12); animation: fadeUp 1s .55s var(--ease-out) both; }
.hero__stat { padding: 18px 0 18px 28px; border-bottom: 1px solid rgba(255,255,255,.08); }
[dir="rtl"] .hero__stat { padding: 18px 28px 18px 0; }
.hero__stat:last-child { border-bottom: 0; }
.hero__stat strong { display: block; font-family: var(--font-title); font-weight: 500; font-size: 3rem; line-height: 1; color: var(--gold-light); }
.hero__stat span { color: rgba(255,255,255,.6); font-size: .88rem; }
.search-panel { position: relative; z-index: 2; margin-top: 72px; transform: translateY(50%); animation: fadeUp 1s .6s var(--ease-out) both; }
.search-bar { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 0; background: var(--surface-1); border-radius: 22px; padding: 10px; box-shadow: var(--shadow-lg); color: var(--ink); }
.search-bar__field { display: flex; flex-direction: column; justify-content: center; padding: 8px 20px; border-inline-end: 1px solid var(--line); min-width: 0; }
.search-bar__field:nth-last-child(2) { border-inline-end: 0; }
.search-bar__field label { font-size: .7rem; font-weight: 500; letter-spacing: .14em; color: var(--accent-strong); }
[dir="rtl"] .search-bar__field label { letter-spacing: 0; }
.search-bar__field input, .search-bar__field select { border: 0; padding: 4px 0; background: transparent; font-weight: 400; font-size: 1rem; width: 100%; appearance: none; }
.search-bar__field input:focus, .search-bar__field select:focus { outline: none; }
.search-bar .btn { min-height: 64px; border-radius: 16px; padding: 0 30px; }
.hero + .section, .section--after-hero { padding-top: 140px; }

/* Sections */
.section { padding: 120px 0; position: relative; }
.section--tight { padding: 80px 0; }
.section--sand { background: var(--sand); }
.section--white { background: var(--surface-1); }
.section--navy { background: var(--navy); color: var(--white); }
.section--navy .eyebrow { color: var(--gold-light); }
.section--navy .muted { color: rgba(255,255,255,.6); }
.section__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 48px; align-items: end; margin-bottom: 56px; }
.section__head p { color: var(--grey); font-size: 1.05rem; margin: 0; }
.section--navy .section__head p { color: rgba(255,255,255,.65); }
.section__head--center { grid-template-columns: 1fr; text-align: center; justify-items: center; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--delay, 0ms); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Spécialités */
.spec-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.spec { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 28px; background: var(--surface-1); min-height: 180px; overflow: hidden; transition: background var(--t) var(--ease), color var(--t); }
.spec::before { content: ""; position: absolute; inset: 0; background: var(--navy); transform: translateY(101%); transition: transform .5s var(--ease-out); z-index: 0; }
.spec > * { position: relative; z-index: 1; }
.spec .icon { width: 30px; height: 30px; color: var(--gold); stroke-width: 1.3; transition: transform .5s var(--ease-out); }
.spec__name { font-family: var(--font-title); font-weight: 500; font-size: 1.5rem; line-height: 1.05; margin-top: auto; }
[dir="rtl"] .spec__name { font-family: var(--font-arabic); font-size: 1.1rem; }
.spec__count { font-size: .8rem; color: var(--grey); display: flex; justify-content: space-between; align-items: center; }
.spec__count .icon { width: 18px; height: 18px; opacity: 0; transform: translateX(-8px); transition: all var(--t) var(--ease-out); }
.spec:hover { color: var(--white); }
.spec:hover::before { transform: none; }
.spec:hover .icon { transform: scale(1.1); }
.spec:hover .spec__count { color: rgba(255,255,255,.6); }
.spec:hover .spec__count .icon { opacity: 1; transform: none; color: var(--gold-light); }

/* Étapes */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-strong); }
.step { padding: 36px 36px 0 0; position: relative; }
[dir="rtl"] .step { padding: 36px 0 0 36px; }
.step + .step { padding-inline-start: 36px; border-inline-start: 1px solid var(--line); }
.step__num { font-family: var(--font-title); font-weight: 500; font-size: 5rem; line-height: .9; color: transparent; -webkit-text-stroke: 1px var(--gold); margin-bottom: 18px; transition: color var(--t-slow) var(--ease); }
.step:hover .step__num { color: var(--gold); }
.step h3 { font-size: 1.9rem; }
.step p { color: var(--grey); }
.step::before { content: ""; position: absolute; top: -1px; inset-inline-start: 0; height: 2px; width: 0; background: var(--gold); transition: width .8s var(--ease-out); }
.step.is-visible::before { width: 64px; }

/* Cartes avocat */
.lawyer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lawyer-card { display: flex; flex-direction: column; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t); position: relative; overflow: hidden; }
.lawyer-card::after { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); }
.lawyer-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.lawyer-card:hover::after { transform: scaleX(1); }
.lawyer-card__top { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.lawyer-card__name { font-family: var(--font-title); font-weight: 500; font-size: 1.4rem; line-height: 1.15; margin: 0; }
[dir="rtl"] .lawyer-card__name { font-family: var(--font-arabic); font-size: 1.15rem; }
.lawyer-card__office { font-size: .86rem; color: var(--grey); }
.lawyer-card__bio { font-size: .9rem; color: var(--ink-soft); margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lawyer-card__meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: .82rem; color: var(--grey); margin-bottom: 16px; }
.lawyer-card__meta span { display: inline-flex; align-items: center; gap: 6px; }
.lawyer-card__meta .icon { width: 16px; height: 16px; color: var(--accent-strong); }
.lawyer-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.consult-icons { display: flex; gap: 6px; }
.consult-icons span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--offwhite); color: var(--grey-light); }
.consult-icons span.on { background: var(--gold-tint); color: var(--accent-strong); }
.consult-icons .icon { width: 16px; height: 16px; }

/* Avantages */
.features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.feature { padding: 30px 26px; border-radius: var(--radius-lg); background: var(--surface-1); border: 1px solid var(--line); transition: transform var(--t) var(--ease), box-shadow var(--t); }
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.feature__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--gold-tint); color: var(--accent-strong); margin-bottom: 22px; transition: transform .5s var(--ease-out); }
.feature:hover .feature__icon { transform: rotate(-6deg) scale(1.06); }
.feature h3 { font-size: 1.5rem; }
.feature p { color: var(--grey); font-size: .94rem; margin: 0; }
.section--navy .feature { background: var(--navy-2); border-color: rgba(255,255,255,.07); }
.section--navy .feature p { color: rgba(255,255,255,.62); }
.section--navy .feature__icon { background: rgba(205,184,146,.12); color: var(--gold-light); }

/* Gestion des dossiers (maquette) */
.split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: center; }
.checklist { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; }
.checklist li .icon { color: var(--white); background: var(--gold); border-radius: 50%; padding: 4px; width: 24px; height: 24px; stroke-width: 2.4; flex: none; }
.mockup { position: relative; border-radius: var(--radius-xl); background: var(--surface-1); box-shadow: var(--shadow-lg); border: 1px solid var(--line); overflow: hidden; transform: perspective(1600px) rotateY(-6deg) rotateX(2deg); transition: transform 1s var(--ease-out); }
[dir="rtl"] .mockup { transform: perspective(1600px) rotateY(6deg) rotateX(2deg); }
.mockup:hover { transform: none; }
.mockup__bar { display: flex; gap: 6px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--offwhite); }
.mockup__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.mockup__body { padding: 26px; }
.mockup__title { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.mockup__title strong { font-family: var(--font-title); font-weight: 500; font-size: 1.6rem; }
.mockup .tabs { margin: 18px 0; }
.mockup .tab { padding: 10px 12px; font-size: .8rem; }
.mockup__row { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .86rem; }
.mockup__row:last-child { border-bottom: 0; }
.mockup__float { position: absolute; inset-inline-end: 22px; bottom: 22px; padding: 14px 16px; border-radius: 14px; background: var(--navy); color: var(--white); box-shadow: var(--shadow-lg); font-size: .82rem; display: flex; gap: 10px; align-items: center; animation: float 6s ease-in-out infinite; }
.mockup__float .icon { color: var(--gold-light); }

/* FAQ */
.faq { max-width: 880px; margin: 0 auto; }
.faq__item { border-bottom: 1px solid var(--line-strong); }
.faq__item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 0; cursor: url("../images/cursor-gavel.svg") 16 29, pointer; font-size: 1.12rem; font-weight: 400; color: var(--fg); transition: color var(--t-fast); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--accent-strong); }
.faq__toggle { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; flex: none; transition: transform var(--t) var(--ease-out), background var(--t), border-color var(--t); }
.faq__item[open] .faq__toggle { transform: rotate(45deg); background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.faq__answer { overflow: hidden; color: var(--grey); padding: 0 60px 26px 0; }
[dir="rtl"] .faq__answer { padding: 0 0 26px 60px; }

/* CTA */
.cta-band { position: relative; overflow: hidden; border-radius: var(--radius-xl); background: var(--navy); color: var(--white); padding: 80px; display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 40px; align-items: center; isolation: isolate; }
.cta-band::before { content: ""; position: absolute; inset-inline-end: -120px; top: -160px; width: 520px; height: 520px; border-radius: 50%; border: 1px solid rgba(205,184,146,.25); box-shadow: 0 0 0 60px rgba(205,184,146,.04), 0 0 0 120px rgba(205,184,146,.03); z-index: -1; }
.cta-band h2 { margin: 0 0 14px; }
.cta-band p { color: rgba(255,255,255,.68); margin: 0; font-size: 1.05rem; }
.cta-band .row { justify-content: flex-end; }

/* Footer */
.site-footer { background: var(--navy); color: rgba(255,255,255,.7); padding: 96px 0 32px; position: relative; overflow: hidden; }
.site-footer::before { content: attr(data-word); position: absolute; inset-inline-start: -10px; bottom: -40px; font-family: var(--font-title); font-weight: 500; font-size: clamp(8rem, 22vw, 20rem); line-height: 1; color: rgba(255,255,255,.025); pointer-events: none; letter-spacing: 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 48px; position: relative; }
.site-footer h4 { color: var(--white); font-size: .75rem; letter-spacing: .2em; font-weight: 500; margin-bottom: 20px; }
[dir="rtl"] .site-footer h4 { letter-spacing: 0; font-size: .9rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.site-footer a { transition: color var(--t-fast); }
.site-footer a:hover { color: var(--gold-light); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 72px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); font-size: .82rem; position: relative; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact .icon { color: var(--gold); width: 18px; height: 18px; margin-top: 3px; }
.socials { display: flex; gap: 8px; margin-top: 20px; }
.socials a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); font-size: .75rem; font-weight: 500; }
.socials a:hover { border-color: var(--gold); }

/* Page header (pages internes) */
.page-hero { background: var(--navy); color: var(--white); padding: calc(var(--header-h) + 64px) 0 72px; position: relative; overflow: hidden; }
.page-hero .hero__grid { opacity: .7; }
.page-hero h1 { font-size: clamp(2.8rem, 6vw, 5.4rem); margin-bottom: 12px; }
.page-hero p { color: rgba(255,255,255,.7); max-width: 640px; font-size: 1.08rem; margin: 0; }
.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: .82rem; color: rgba(255,255,255,.55); margin-bottom: 22px; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--gold-light); }
.breadcrumb .icon { width: 14px; height: 14px; }
.prose { font-size: 1.05rem; line-height: 1.8; color: var(--ink-soft); }
.prose h2 { font-size: 2rem; margin: 1.6em 0 .5em; color: var(--fg); }
.prose h3 { font-size: 1.5rem; margin: 1.4em 0 .4em; color: var(--fg); }
.prose ul, .prose ol { padding-inline-start: 1.3em; }
.prose li { margin-bottom: .4em; }
.prose a { color: var(--accent-strong); border-bottom: 1px solid currentColor; }
.prose blockquote { margin: 1.5em 0; padding: 4px 0 4px 24px; border-inline-start: 3px solid var(--gold); font-size: 1.15rem; color: var(--fg); }

/* Annuaire */
.directory { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 36px; align-items: start; }
.filters { position: static; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.filters h3 { font-size: 1.3rem; display: flex; justify-content: space-between; align-items: center; }
.filters .field { margin-bottom: 16px; }
.filters .select, .filters .input { min-height: 44px; }
.filters__toggle { display: none; }
.results-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.results-count { font-family: var(--font-title); font-weight: 500; font-size: 1.6rem; }
.results-count span { color: var(--accent-strong); }
.active-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.active-filters button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 12px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--surface-1); font-size: .78rem; }
.active-filters button:hover { border-color: var(--danger); color: var(--danger); }
.active-filters .icon { width: 13px; height: 13px; }
#results { transition: opacity var(--t); }
#results.is-loading { opacity: .55; }
.directory .lawyer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Fiche avocat */
.profile-hero { background: var(--navy); color: var(--white); padding: calc(var(--header-h) + 56px) 0 64px; position: relative; overflow: hidden; }
.profile-head { display: flex; gap: 32px; align-items: center; position: relative; }
.profile-head .avatar { --size: 140px; font-size: 3.4rem; box-shadow: 0 0 0 8px rgba(205,184,146,.12); }
.profile-head h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); margin-bottom: 8px; }
.profile-head .chips .chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.85); }
.profile-head .chips .chip .icon { color: var(--gold-light); }
.profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; align-items: start; margin-top: -32px; position: relative; z-index: 2; }
.profile-layout .card + .card { margin-top: 24px; }
.booking-card { position: sticky; top: calc(var(--header-h) + 20px); }
.info-list { display: grid; gap: 16px; }
.info-list > div { display: flex; gap: 14px; align-items: flex-start; }
.info-list .icon { color: var(--accent-strong); margin-top: 3px; }
.info-list dt { font-size: .76rem; letter-spacing: .1em; color: var(--grey); font-weight: 500; }
.info-list dd { margin: 0; font-weight: 400; }
.deonto-note { display: flex; gap: 10px; font-size: .8rem; color: var(--grey); padding: 14px; background: var(--offwhite); border-radius: var(--radius); margin-top: 18px; }
.deonto-note .icon { width: 18px; height: 18px; color: var(--accent-strong); flex: none; }

/* Pages auth */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth__aside { position: relative; overflow: hidden; background: var(--navy); color: var(--white); padding: 48px; display: flex; flex-direction: column; isolation: isolate; }
.auth__aside h2 { font-size: clamp(2.6rem, 4.6vw, 4.6rem); margin-top: auto; }
.auth__aside p { color: rgba(255,255,255,.65); max-width: 420px; }
.auth__quote { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); display: grid; gap: 14px; }
.auth__quote div { display: flex; gap: 12px; align-items: center; font-size: .92rem; color: rgba(255,255,255,.8); }
.auth__quote .icon { color: var(--gold-light); }
.auth__main { display: flex; flex-direction: column; justify-content: center; padding: 48px clamp(24px, 6vw, 96px); background: var(--surface-0); }
.auth__form { width: 100%; max-width: 460px; margin: 0 auto; }
.auth__form h1 { font-size: clamp(2.4rem, 4vw, 3.4rem); }
.auth__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: auto; padding-bottom: 32px; width: 100%; max-width: 460px; margin-inline: auto; }
.auth__top .lang-switch { border-color: var(--line-strong); }
.auth__top .lang-switch a { color: var(--grey); }
.auth__top .lang-switch a.is-active { background: var(--accent); color: var(--on-accent); }
.auth__bottom { margin-top: auto; padding-top: 32px; font-size: .85rem; color: var(--grey); text-align: center; }
.divider { display: flex; align-items: center; gap: 14px; color: var(--grey); font-size: .8rem; margin: 22px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
.demo-box { margin-top: 24px; padding: 16px; border-radius: var(--radius); border: 1px dashed var(--line-strong); font-size: .82rem; color: var(--grey); }
.demo-box button { background: none; border: 0; padding: 0; color: var(--accent-strong); font-weight: 500; font-size: .82rem; }
.demo-box button:hover { text-decoration: underline; }

/* ==========================================================================
   BACKOFFICE
   ========================================================================== */
.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; background: var(--surface-0); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--surface-1); color: var(--grey); padding: 22px 16px; overflow-y: auto; z-index: var(--z-sticky); border-inline-end: 1px solid var(--line); box-shadow: var(--edge); }
.imp-active .sidebar { top: 44px; height: calc(100vh - 44px); }
.sidebar .brand { display: flex; align-self: stretch; padding: 4px 10px 26px; color: var(--fg); }
.sidebar__role { margin: 0 10px 18px; padding: 9px 12px; border-radius: 10px; background: var(--offwhite); border: 1px solid var(--line); font-size: .72rem; font-weight: 500; letter-spacing: .14em; color: var(--accent-strong); display: flex; gap: 8px; align-items: center; }
[dir="rtl"] .sidebar__role { letter-spacing: 0; }
.sidebar__section { font-size: .68rem; font-weight: 500; letter-spacing: .18em; color: var(--grey-light); padding: 18px 12px 8px; }
[dir="rtl"] .sidebar__section { letter-spacing: 0; font-size: .8rem; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.nav-link { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: .9rem; font-weight: 400; color: var(--ink-soft); transition: background var(--t-fast), color var(--t-fast); }
.nav-link .icon { width: 19px; height: 19px; color: var(--grey-light); transition: color var(--t-fast); }
.nav-link:hover { background: var(--surface-hover); color: var(--fg); }
.nav-link.is-active { background: var(--gold-tint); color: var(--fg); font-weight: 500; }
.nav-link.is-active .icon { color: var(--accent-strong); }
.nav-link.is-active::before { content: ""; position: absolute; inset-inline-start: -16px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.nav-link .count { margin-inline-start: auto; font-size: .7rem; font-weight: 500; background: var(--gold); color: var(--on-accent); padding: 1px 7px; border-radius: 99px; }
.sidebar__foot { margin-top: auto; padding-top: 20px; }
.sidebar__user { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: var(--offwhite); border: 1px solid var(--line); }
.sidebar__user strong { display: block; color: var(--fg); font-weight: 500; font-size: .88rem; line-height: 1.3; }
.sidebar__user span { font-size: .76rem; }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: 16px; height: 76px; padding: 0 36px; background: color-mix(in srgb, var(--surface-0) 86%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.imp-active .topbar { top: 44px; }
.topbar__title { font-family: var(--font-title); font-weight: 500; font-size: 1.7rem; margin: 0; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[dir="rtl"] .topbar__title { font-family: var(--font-arabic); font-size: 1.3rem; }
.topbar__actions { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; }
.topbar .burger { display: none; color: var(--fg); border-color: var(--line-strong); }
.bell { position: relative; }
.bell__dot { position: absolute; top: 4px; inset-inline-end: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--danger); color: var(--white); font-size: .66rem; font-weight: 500; display: grid; place-items: center; border: 2px solid var(--surface-0); color: var(--on-status);  }
.notif-menu { width: 360px; max-width: calc(100vw - 32px); padding: 0; }
.notif-menu__head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.notif-menu__list { max-height: 380px; overflow-y: auto; }
.notif { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: .86rem; transition: background var(--t-fast); }
.notif:hover { background: var(--offwhite); }
.notif.is-unread { background: color-mix(in srgb, var(--accent) 6%, var(--surface-1)); }
.notif.is-unread .notif__dot { background: var(--gold); }
.notif__dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: none; background: transparent; }
.notif strong { display: block; font-weight: 500; }
.notif p { margin: 2px 0; color: var(--grey); }
.notif small { color: var(--grey-light); }
.content { padding: 32px 36px 64px; flex: 1; animation: fadeIn .4s var(--ease); }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.page-head h1 { font-size: clamp(2.2rem, 3.4vw, 3rem); margin: 0; }
.page-head p { margin: 6px 0 0; color: var(--grey); }
.page-head .breadcrumb { color: var(--grey); margin-bottom: 10px; }
.page-head .breadcrumb a:hover { color: var(--accent-strong); }
.layout-2 { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.layout-2--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.list-item { display: flex; align-items: center; gap: 14px; padding: 14px 24px; border-bottom: 1px solid var(--line); transition: background var(--t-fast); }
.list-item:last-child { border-bottom: 0; }
.list-item:hover { background: var(--surface-hover); }
.list-item__main { flex: 1; min-width: 0; }
.list-item__main strong { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item__main span { font-size: .82rem; color: var(--grey); }
.date-box { width: 52px; flex: none; text-align: center; border-radius: 12px; background: var(--offwhite); border: 1px solid var(--line); padding: 6px 0; }
.date-box strong { display: block; font-family: var(--font-title); font-weight: 500; font-size: 1.5rem; line-height: 1; color: var(--fg); }
.date-box small { font-size: .64rem; letter-spacing: .1em; color: var(--accent-strong); }
.welcome { position: relative; overflow: hidden; padding: 34px 36px; border-radius: var(--radius-xl); background: var(--surface-1); color: var(--fg); border: 1px solid var(--line); box-shadow: var(--shadow-xs), var(--edge); margin-bottom: 28px; isolation: isolate; }
.welcome::before { content: ""; position: absolute; inset-inline-end: -90px; top: -130px; width: 380px; height: 380px; border-radius: 50%; border: 1px solid var(--gold-tint); box-shadow: 0 0 0 44px color-mix(in srgb, var(--accent) 4%, transparent), 0 0 0 88px color-mix(in srgb, var(--accent) 2.5%, transparent); z-index: -1; }
.welcome::after { content: ""; position: absolute; inset-inline-start: 0; top: 28px; bottom: 28px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.welcome .eyebrow { color: var(--accent-strong); }
.welcome h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); margin-bottom: 8px; }
.welcome p { color: var(--grey); margin: 0; max-width: 580px; }
.welcome .row { margin-top: 22px; }
.chart { width: 100%; height: 240px; }
.chart text { font-size: 11px; fill: var(--grey); font-family: var(--font-text); }
.chart .grid-line { stroke: var(--line); stroke-dasharray: 3 4; }
.chart .bar { fill: var(--navy); transition: fill var(--t-fast); }
.chart .bar--alt { fill: var(--gold); }
.chart .bar:hover { fill: var(--gold-dark); }
.chart .line { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.chart .area { fill: url(#goldFade); }
.chart .dot { fill: var(--white); stroke: var(--gold); stroke-width: 2; }
.chart-legend { display: flex; gap: 16px; font-size: .8rem; color: var(--grey); }
.chart-legend span { display: inline-flex; gap: 6px; align-items: center; }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.progress { height: 6px; border-radius: 6px; background: var(--sand); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--gold); border-radius: 6px; transition: width 1s var(--ease-out); }
.perm-table td, .perm-table th { text-align: center; }
.perm-table td:first-child, .perm-table th:first-child { text-align: start; }
.code { font-family: Consolas, "Courier New", monospace; font-size: .82rem; background: var(--sand); padding: 2px 6px; border-radius: 4px; }
.mobile-tabbar { display: none; }
.sidebar-backdrop { display: none; }

/* CMS */
.section-list { display: flex; flex-direction: column; gap: 10px; }
.section-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--surface-1); border: 1px solid var(--line); border-radius: 14px; transition: box-shadow var(--t), transform var(--t), opacity var(--t); }
.section-row.is-inactive { opacity: .55; }
.section-row__type { width: 40px; height: 40px; border-radius: 10px; background: var(--gold-tint); color: var(--accent-strong); display: grid; place-items: center; flex: none; }
.lang-tabs .tab { padding: 10px 14px; }
/* Répéteur façon ACF */
.repeater { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.repeater__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.repeater__title { font-size: 1rem; margin: 0; display: flex; align-items: center; gap: 8px; }
.repeater__title .count { font-size: .72rem; background: var(--sand); padding: 1px 8px; border-radius: 99px; color: var(--grey); font-family: var(--font-body); }
.repeater__list { display: grid; gap: 8px; margin-bottom: 12px; }
.repeater-item { border: 1px solid var(--line); border-radius: 12px; background: var(--surface-1); transition: border-color var(--t-fast), opacity var(--t-fast); }
.repeater-item:focus-within { border-color: var(--line-strong); }
.repeater-item.is-dragging { opacity: .45; }
.repeater-item.is-removing { opacity: 0; transition: opacity .2s; }
.repeater-item__head { display: flex; align-items: center; gap: 4px; padding: 4px 6px; background: var(--surface-2); border-radius: 12px 12px 0 0; }
.repeater-item.is-collapsed .repeater-item__head { border-radius: 12px; }
.repeater-item__drag { cursor: grab; border: 0; background: none; color: var(--grey); width: 32px; height: 36px; display: grid; place-items: center; border-radius: 8px; }
.repeater-item__drag:hover { color: var(--fg); background: var(--surface-1); }
.repeater-item__toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 8px 6px; text-align: start; color: var(--fg); font: inherit; font-size: .9rem; border-radius: 8px; }
.repeater-item__num { flex: none; width: 24px; height: 24px; border-radius: 99px; background: var(--gold-tint); color: var(--accent-strong); font-size: .74rem; font-weight: 500; display: grid; place-items: center; }
.repeater-item__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repeater-item__chevron { flex: none; transition: transform var(--t-fast); }
.repeater-item.is-collapsed .repeater-item__chevron { transform: rotate(-90deg); }
[dir="rtl"] .repeater-item.is-collapsed .repeater-item__chevron { transform: rotate(90deg); }
.repeater-item__tools { display: flex; gap: 2px; }
.repeater-item__tools .icon-btn { width: 32px; height: 32px; }
.repeater-item__body { padding: 16px 16px 4px; border-top: 1px solid var(--line); }
.repeater-item.is-collapsed .repeater-item__body { display: none; }
.icon--up { transform: rotate(180deg); }
.repeater__add { width: 100%; justify-content: center; border-style: dashed; }
@media (max-width: 560px) { .repeater-item__tools [data-repeater-up], .repeater-item__tools [data-repeater-down] { display: none; } }
/* Sélecteur d'image */
.image-picker { display: flex; align-items: center; gap: 14px; padding: 10px; border: 1px dashed var(--line-strong); border-radius: 12px; background: var(--surface-1); margin-top: 6px; flex-wrap: wrap; }
.image-picker.has-image { border-style: solid; }
.image-picker__preview { width: 120px; height: 84px; object-fit: cover; border-radius: 8px; background: var(--sand); display: none; }
.image-picker.has-image .image-picker__preview { display: block; }
.image-picker__empty { width: 120px; height: 84px; border-radius: 8px; background: var(--surface-2); color: var(--grey); display: grid; place-items: center; align-content: center; gap: 4px; font-size: .75rem; }
.image-picker.has-image .image-picker__empty, .image-picker:not(.has-image) [data-image-clear] { display: none; }
.image-picker__actions { display: flex; gap: 6px; flex-wrap: wrap; }
button.media-tile { padding: 0; text-align: start; font: inherit; color: inherit; display: block; width: 100%; }
button.media-tile .media-tile__meta { display: block; }
.rte { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-1); overflow: hidden; }
.rte:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-tint); }
.rte__toolbar { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); background: var(--offwhite); flex-wrap: wrap; }
.rte__toolbar button { min-width: 34px; height: 32px; border: 0; background: none; border-radius: 6px; font-size: .82rem; font-weight: 500; color: var(--ink-soft); }
.rte__toolbar button:hover { background: var(--surface-1); }
.rte__area { min-height: 220px; padding: 14px 16px; outline: none; line-height: 1.7; }
.rte__area h2 { font-size: 1.6rem; } .rte__area h3 { font-size: 1.3rem; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.media-tile { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-1); transition: box-shadow var(--t), transform var(--t); }
.media-tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.media-tile img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--sand); }
.media-tile__meta { padding: 10px 12px; font-size: .78rem; color: var(--grey); }
.media-tile.is-selectable { cursor: url("../images/cursor-gavel.svg") 16 29, pointer; }
.media-tile.is-selected { box-shadow: 0 0 0 3px var(--gold); }
.image-field { display: flex; gap: 12px; align-items: center; }
.image-field img { width: 84px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--sand); }
.preview-bar { position: sticky; top: 0; z-index: var(--z-chrome); background: var(--gold); color: var(--on-accent); padding: 10px 24px; display: flex; gap: 12px; align-items: center; justify-content: space-between; font-size: .88rem; font-weight: 500; }

/* Error page */
.error-page { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 40px 24px; background: var(--navy); color: var(--white); position: relative; overflow: hidden; }
.error-page__code { font-family: var(--font-title); font-weight: 500; font-size: clamp(8rem, 26vw, 18rem); line-height: .85; color: transparent; -webkit-text-stroke: 1px var(--gold); }
.error-page p { color: rgba(255,255,255,.7); font-size: 1.1rem; }
.debug { text-align: start; max-width: 960px; margin: 24px auto 0; background: rgba(0,0,0,.35); padding: 16px; border-radius: 10px; font-size: .78rem; white-space: pre-wrap; overflow: auto; max-height: 40vh; }

/* ---------- Animations ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { transform: translateX(100%); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes lineUp { from { transform: translateY(105%); } to { transform: none; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(180,35,24,.45); } 70% { box-shadow: 0 0 0 8px rgba(180,35,24,0); } 100% { box-shadow: 0 0 0 0 rgba(180,35,24,0); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(30px); } }
@keyframes modalIn { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes modalOut { to { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes panelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes badgePop { 0% { transform: scale(.7); opacity: .2; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@keyframes rowFlash { from { background: var(--gold-tint); } to { background: transparent; } }
.flash-row { animation: rowFlash 1.6s var(--ease); }
.is-removing { animation: toastOut .3s var(--ease) forwards; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lawyer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layout-2 { grid-template-columns: 1fr; }
  .profile-layout { grid-template-columns: minmax(0, 1fr); }
  .booking-card { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
  .main-nav, .header-actions .btn--ghost-desktop { display: none; }
  .burger { display: grid; }
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .hero__stats { grid-template-columns: repeat(3, 1fr); border-inline-start: 0; border-top: 1px solid rgba(255,255,255,.12); }
  .hero__stat { padding: 18px 12px 0 0; border-bottom: 0; }
  .hero__stat strong { font-size: 2.6rem; }
  .split { grid-template-columns: 1fr; gap: 48px; }
  .section__head { grid-template-columns: 1fr; gap: 16px; }
  .directory { grid-template-columns: 1fr; }
  .filters { position: fixed; inset: 0; z-index: var(--z-drawer); border-radius: 0; overflow-y: auto; transform: translateX(-100%); transition: transform .45s var(--ease-out); padding-top: 32px; }
  [dir="rtl"] .filters { transform: translateX(100%); }
  .filters.is-open { transform: none; }
  .filters__toggle { display: inline-flex; }
  .cta-band { grid-template-columns: 1fr; padding: 56px 32px; }
  .cta-band .row { justify-content: flex-start; }
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--sidebar-w); transform: translateX(-100%); transition: transform .4s var(--ease-out); z-index: var(--z-drawer); box-shadow: var(--shadow-lg); }
  [dir="rtl"] .sidebar { transform: translateX(100%); }
  .sidebar.is-open { transform: none; }
  .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity var(--t); }
  .sidebar.is-open + .sidebar-backdrop { opacity: 1; pointer-events: auto; }
  .topbar .burger { display: grid; }
  .topbar { padding: 0 20px; }
  .content { padding: 24px 20px 96px; }
  .auth { grid-template-columns: 1fr; }
  .auth__aside { display: none; }
}
@media (max-width: 760px) {
  body { font-size: 15px; }
  .container { padding-inline: 20px; }
  .section { padding: 80px 0; }
  .grid-2, .grid-3, .grid-4, .form-grid, .layout-2--even { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kpi { padding: 16px; }
  .kpi__value { font-size: 2.3rem; }
  .features, .lawyer-grid, .directory .lawyer-grid { grid-template-columns: 1fr; }
  .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec { padding: 20px; min-height: 150px; }
  .spec__name { font-size: 1.2rem; }
  .steps { grid-template-columns: 1fr; }
  .step, .step + .step { padding: 28px 0 24px; border-inline-start: 0; border-bottom: 1px solid var(--line); }
  .step__num { font-size: 4.4rem; }
  .hero { padding-top: calc(var(--header-h) + 40px); }
  .hero h1 { font-size: clamp(3rem, 15vw, 4.4rem); }
  .hero__stat strong { font-size: 2rem; }
  .search-panel { transform: none; margin-top: 40px; padding-bottom: 32px; }
  .search-bar { grid-template-columns: 1fr; padding: 8px; border-radius: 18px; }
  .search-bar__field { border-inline-end: 0; border-bottom: 1px solid var(--line); padding: 12px 14px; }
  .search-bar__field:nth-last-child(2) { border-bottom: 0; }
  .search-bar .btn { min-height: 54px; margin-top: 6px; }
  .hero + .section, .section--after-hero { padding-top: 80px; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .profile-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .profile-head .avatar { --size: 96px; font-size: 2.2rem; }
  .choice-cards { grid-template-columns: 1fr; }
  .faq__answer { padding-inline-end: 0; }
  .topbar__title { font-size: 1.35rem; }
  .table--stack thead { display: none; }
  .table--stack tr { display: block; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .table--stack td { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border: 0; text-align: end; }
  .table--stack td::before { content: attr(data-label); font-size: .74rem; letter-spacing: .08em; color: var(--grey); text-align: start; font-weight: 500; }
  .table--stack td.cell-main { display: block; text-align: start; }
  .table--stack td.cell-main::before { display: none; }
  .table--stack .actions { justify-content: flex-start; }
  .calendar { --cell-h: 74px; }
  .calendar__event { font-size: 0; padding: 0; height: 6px; border-radius: 3px; border-inline-start: 0; margin-bottom: 2px; }
  .calendar__dow { padding: 8px 4px; text-align: center; letter-spacing: 0; }
  .calendar__cell { padding: 4px; }
  .page-head h1 { font-size: 2.1rem; }
  .welcome { padding: 26px; }
  .card__body { padding: 18px; }
  .card__header { padding: 16px 18px; }
  .doc { flex-wrap: wrap; padding: 14px 16px; }
  .doc__actions { width: 100%; justify-content: flex-start; padding-inline-start: 56px; }
  .toolbar { padding: 14px 16px; }
  /* Parcours mobile : barre d'onglets fixe en bas */
  .mobile-tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-chrome); background: var(--surface-1); border-top: 1px solid var(--line); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -1px 3px rgba(16,27,43,.05); }
  .mobile-tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; font-size: .66rem; font-weight: 500; color: var(--grey); border-radius: 10px; position: relative; }
  .mobile-tabbar a .icon { width: 22px; height: 22px; }
  .mobile-tabbar a.is-active { color: var(--accent-strong); }
  .mobile-tabbar a.is-active::before { content: ""; position: absolute; top: -6px; width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold); }
  .toasts { inset-block-end: 84px; inset-inline: 16px; width: auto; }
  .modal { border-radius: 24px 24px 0 0; margin: auto 0 0; width: 100vw; max-width: 100vw; max-height: 92vh; }
  .modal[open] { animation: sheetIn .45s var(--ease-out); }
}
@keyframes sheetIn { from { transform: translateY(100%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .mockup { transform: none; }
}

@media print {
  .sidebar, .topbar, .site-header, .site-footer, .mobile-tabbar, .toasts { display: none !important; }
  .app { display: block; }
}

/* Bloc rendez-vous avec actions secondaires */
.appt-block { border-bottom: 1px solid var(--line); }
.appt-block:last-of-type { border-bottom: 0; }
.appt-block .list-item { border-bottom: 0; }
[dir="rtl"] .appt-block [style*="padding:0 24px 10px 90px"] { padding: 0 90px 10px 24px !important; }
@media (max-width: 760px) { .appt-block [style*="padding:0 24px 10px 90px"] { padding: 0 16px 10px !important; } .list-item { flex-wrap: wrap; } }
.chart .bar--ok { fill: var(--success); }

/* Mobile : aucun débordement horizontal, en-tête compact */
html, body { overflow-x: clip; }
@media (max-width: 560px) {
  .site-header .header-actions .lang-switch { display: none; }
  .site-header__inner { gap: 12px; }
  .brand__mark { height: 38px; }
  .brand__word { height: 13px; }
  .topbar .lang-switch { display: none; }
}

/* Logo dans la sidebar : un peu plus grand, centré au-dessus du menu */
.sidebar .brand__mark { height: 50px; }
.sidebar .brand__word { height: 17px; }
/* Graphiques : la série principale suit la couleur de texte du thème */
.chart .bar { fill: var(--fg); }
.chart .dot { fill: var(--surface-1); }

/* Bascule de thème */
.theme-toggle .theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-toggle__sun { display: inline-block; }
:root[data-theme="dark"] .theme-toggle .theme-toggle__moon { display: none; }
.theme-toggle--dark { color: rgba(255,255,255,.75); }
.theme-toggle--dark:hover { background: rgba(255,255,255,.08); color: var(--white); }
@media (max-width: 560px) { .site-header .theme-toggle { display: none; } }

/* Sélecteur de langue sur surfaces claires (barre du haut, pages de connexion) */
.topbar .lang-switch, .auth__top .lang-switch { border-color: var(--line-strong); }
.topbar .lang-switch a, .auth__top .lang-switch a { color: var(--grey); }
.topbar .lang-switch a.is-active { background: var(--accent); color: var(--on-accent); }

/* ==========================================================================
   DIRECTION ÉDITORIALE
   Inspirée des textes officiels tunisiens, publiés en français et en arabe en vis-à-vis.
   Une seule audace : le hero bilingue. Le reste est calme : casse normale, filets fins,
   aucun mouvement automatique hors de la séquence d’ouverture.
   ========================================================================== */

:root { --surface-0: #F8F6F2; }
:root[data-theme="dark"] { --surface-0: #0B111B; }

/* Échelle typographique en quarte (x1,333) à partir de 16 px */
h1, h2, h3, .title, .display { letter-spacing: -.005em; line-height: 1.04; }
h1 { font-size: clamp(2.6rem, 5.4vw, 4.2rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3.16rem); }
h3 { font-size: 1.78rem; line-height: 1.1; }
.card__header h2, .card__header h3, .card__title { font-size: 1.42rem; letter-spacing: 0; }
.modal__header h3, .empty h3 { font-size: 1.6rem; letter-spacing: 0; }
.page-head h1 { font-size: clamp(2.2rem, 3.4vw, 2.85rem); }
.topbar__title { font-size: 1.6rem; }

/* Libellés : casse normale, sans espacement de capitales */
.eyebrow { font-size: .88rem; font-weight: 400; letter-spacing: 0; color: var(--accent-strong); margin-bottom: 10px; }
.eyebrow::before { display: none; }
.table th { font-size: .8rem; letter-spacing: 0; font-weight: 500; color: var(--grey); }
.sidebar__section { font-size: .78rem; letter-spacing: 0; }
.sidebar__role { font-size: .8rem; letter-spacing: 0; }
.info-list dt { font-size: .8rem; letter-spacing: 0; }
.calendar__dow { font-size: .8rem; letter-spacing: 0; }
.date-pill small, .date-box small { letter-spacing: 0; }
.site-footer h4 { font-size: .9rem; letter-spacing: 0; color: var(--white); }
.search-bar__field label { font-size: .8rem; letter-spacing: 0; color: var(--grey); }
.table--stack td::before { letter-spacing: 0; }

/* Mouvement : plus d’apparitions section par section ni de cartes qui se soulèvent */
.reveal, .reveal.is-visible { opacity: 1; transform: none; transition: none; }
.card--hover:hover, .lawyer-card:hover, .feature:hover, .kpi:hover, .media-tile:hover { transform: none; box-shadow: var(--shadow-xs), var(--edge); }
.lawyer-card::after { display: none; }
.hero__grid, .hero__orb, .hero__arc { display: none; }
.site-footer::before { display: none; }
.mockup, [dir="rtl"] .mockup { transform: none; }
.mockup__float { animation: none; }
.empty__icon::before { animation: none; }

/* --------------------------------------------------------------- Hero bilingue */
.hero--bilingual { padding: calc(var(--header-h) + 64px) 0 0; overflow: visible; z-index: 2; }
.diptych { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.diptych__fr, .diptych__ar { margin: 0; color: var(--white); }
.diptych__fr { font-family: var(--font-title); font-weight: 500; font-size: clamp(2.8rem, 6.4vw, 6.2rem); line-height: 1; letter-spacing: -.01em; text-align: start; }
.diptych__ar { font-family: var(--font-arabic); font-weight: 700; font-size: clamp(2.4rem, 5.6vw, 5.4rem); line-height: 1.25; text-align: right; direction: rtl; color: var(--gold-light); }
.diptych__rule { align-self: stretch; background: linear-gradient(to bottom, transparent, var(--gold) 18%, var(--gold) 82%, transparent); transform-origin: center; animation: ruleGrow 1.1s .1s var(--ease-out) both; }
.diptych__fr, .diptych__ar { animation: fadeIn 1s .35s var(--ease) both; }
[dir="rtl"] .diptych { direction: ltr; }
.hero--bilingual .hero__lead { margin: 40px 0 0; max-width: 62ch; color: rgba(255,255,255,.72); animation: fadeIn 1s .6s var(--ease) both; }
.hero--bilingual .search-panel { margin-top: 40px; transform: translateY(50%); animation: fadeIn 1s .7s var(--ease) both; }
.hero--bilingual .search-bar { border-radius: 16px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.search-shortcuts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; font-size: .9rem; color: rgba(255,255,255,.62); }
.search-shortcuts a { color: rgba(255,255,255,.86); border-bottom: 1px solid rgba(205,184,146,.4); transition: border-color var(--t-fast), color var(--t-fast); }
.search-shortcuts a:hover { color: var(--white); border-color: var(--gold-light); }
@keyframes ruleGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* --------------------------------------------------------------- Spécialités : table des matières */
/* Une ligne par domaine : médaillon, intitulé, points de conduite, nombre d'avocats.
   Survol : bande sable qui glisse depuis le début de ligne, les points deviennent un filet bronze, la flèche apparaît.
   Entrée (une seule fois) : le filet du haut se trace, puis les lignes apparaissent l'une après l'autre. */
.toc { position: relative; columns: 2; column-gap: 56px; padding-top: 1px; }
.toc::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--line-strong); transform-origin: left; }
[dir="rtl"] .toc::before { transform-origin: right; }
.toc a { position: relative; isolation: isolate; display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); break-inside: avoid; color: var(--fg); }
.toc a::before { content: ""; position: absolute; inset: 4px -12px; z-index: -1; border-radius: 10px; background: var(--sand); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); }
[dir="rtl"] .toc a::before { transform-origin: right; }
.toc__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--gold-tint); color: var(--accent-strong); transition: background .35s var(--ease-out), color .35s var(--ease-out), transform .45s var(--ease-out); }
.toc__icon .icon { width: 19px; height: 19px; stroke-width: 1.5; }
.toc__name { font-family: var(--font-title); font-weight: 500; font-size: 1.36rem; line-height: 1.15; transition: color var(--t-fast); }
[dir="rtl"] .toc__name { font-family: var(--font-arabic); font-size: 1.1rem; }
.toc__leader { position: relative; flex: 1; min-width: 24px; height: 1px; background-image: radial-gradient(circle, var(--line-strong) 1px, transparent 1.2px); background-size: 6px 2px; background-repeat: repeat-x; }
.toc__leader::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); }
[dir="rtl"] .toc__leader::after { transform-origin: right; }
.toc__count { font-size: .82rem; font-weight: 600; color: var(--grey); white-space: nowrap; font-variant-numeric: tabular-nums; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-1); transition: border-color .3s, color .3s; }
.toc__arrow { flex: none; width: 18px; height: 18px; color: var(--accent-strong); opacity: 0; translate: -8px 0; transition: opacity .3s, translate .45s var(--ease-out); }
[dir="rtl"] .toc__arrow { translate: 8px 0; }
.toc a:hover::before, .toc a:focus-visible::before { transform: scaleX(1); }
.toc a:hover .toc__icon, .toc a:focus-visible .toc__icon { background: var(--navy); color: var(--gold); transform: rotate(-8deg) scale(1.06); }
.toc a:hover .toc__name, .toc a:focus-visible .toc__name { color: var(--accent-strong); }
.toc a:hover .toc__leader::after, .toc a:focus-visible .toc__leader::after { transform: scaleX(1); }
.toc a:hover .toc__count, .toc a:focus-visible .toc__count { border-color: var(--accent); color: var(--accent-strong); }
.toc a:hover .toc__arrow, .toc a:focus-visible .toc__arrow { opacity: 1; translate: 0 0; }
.toc a:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
/* Entrée : armée par le JS seulement (sans JS ou en mouvement réduit, tout est visible) */
.toc.is-armed::before { transform: scaleX(0); transition: transform 1.1s var(--ease-out); }
.toc.is-armed a { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(250ms + var(--i, 0) * 55ms); }
.toc.is-armed .toc__leader { clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--ease-out); transition-delay: calc(500ms + var(--i, 0) * 55ms); }
[dir="rtl"] .toc.is-armed .toc__leader { clip-path: inset(0 0 0 100%); }
.toc.is-armed.is-visible::before { transform: scaleX(1); }
.toc.is-armed.is-visible a { opacity: 1; transform: none; }
.toc.is-armed.is-visible .toc__leader { clip-path: inset(0 0 0 0); }

/* --------------------------------------------------------------- Avantages : liste d’articles */
.articles { border-top: 1px solid var(--line-strong); }
.article-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.article-row h3 { margin: 0; font-size: 1.78rem; }
.article-row p { margin: 0; color: var(--grey); max-width: 60ch; font-size: 1.02rem; }
.section--navy .articles { border-color: rgba(255,255,255,.18); }
.section--navy .article-row { border-color: rgba(255,255,255,.1); }
.section--navy .article-row p { color: rgba(255,255,255,.66); }
.section-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: end; margin-bottom: 40px; }
.section-intro h2 { margin: 0; max-width: 16ch; }
.section-intro p { margin: 0; color: var(--grey); max-width: 60ch; }
.section--navy .section-intro p { color: rgba(255,255,255,.66); }

/* Étapes : séquence réelle, numérotation conservée mais sans effet */
.step__num { color: var(--accent-strong); -webkit-text-stroke: 0; font-size: 4.2rem; }
.step:hover .step__num { color: var(--accent-strong); }
.step::before { display: none; }
.step h3 { font-size: 1.78rem; }

/* Appel à l’action : une ligne, sans bandeau décoratif */
.cta-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; padding-top: 40px; border-top: 1px solid var(--line-strong); }
.cta-line h2 { margin: 0 0 10px; max-width: 18ch; }
.cta-line p { margin: 0; color: var(--grey); max-width: 56ch; }

/* Lien simple, souligné, sans flèche */
.text-link { color: var(--fg); font-weight: 500; border-bottom: 1px solid var(--accent); padding-bottom: 1px; transition: color var(--t-fast); }
.text-link:hover { color: var(--accent-strong); }
.section--navy .text-link { color: var(--white); }

@media (max-width: 860px) {
  .diptych { grid-template-columns: 1fr; gap: 18px; }
  .diptych__rule { height: 1px; width: 96px; align-self: start; justify-self: end; background: var(--gold); animation: none; }
  .toc { columns: 1; }
  .toc__icon { width: 34px; height: 34px; }
  .toc__name { font-size: 1.18rem; }
  .toc__arrow { display: none; }
  .article-row, .section-intro, .cta-line { grid-template-columns: 1fr; gap: 12px; }
  .hero--bilingual .search-panel { transform: none; padding-bottom: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .diptych__rule, .diptych__fr, .diptych__ar, .hero--bilingual .hero__lead, .hero--bilingual .search-panel { animation: none; }
}


/* ==========================================================================
   Liste de choix personnalisée (remplace le <select> natif, qui reste synchronisé)
   ========================================================================== */
.combo { position: relative; width: 100%; }
.combo__trigger {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 14px 0 16px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-1); color: var(--fg);
  font-weight: 400; text-align: start; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.combo__trigger:hover { border-color: color-mix(in srgb, var(--fg) 28%, transparent); }
.combo__trigger:focus-visible, .combo.is-open .combo__trigger { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--gold-tint); }
.combo__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo__value.is-placeholder { color: var(--grey); }
.combo__chevron { width: 16px; height: 16px; color: var(--grey); transition: transform var(--t) var(--ease-out); flex: none; }
.combo.is-open .combo__chevron { transform: rotate(180deg); }

.combo__panel {
  position: absolute; top: calc(100% + 8px); inset-inline-start: 0; z-index: var(--z-dropdown);
  width: max(100%, 280px); max-width: min(380px, calc(100vw - 32px));
  background: var(--surface-2); color: var(--fg); border: 1px solid var(--border-2); border-radius: 14px;
  box-shadow: var(--shadow), var(--edge); padding: 6px; display: none;
}
.combo.is-open .combo__panel { display: block; animation: comboIn .18s var(--ease-out); }
.combo.is-up .combo__panel { top: auto; bottom: calc(100% + 8px); }
.combo__search { display: flex; align-items: center; gap: 8px; margin: 2px 2px 6px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--offwhite); }
.combo__search .icon { width: 16px; height: 16px; color: var(--grey); }
.combo__search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 9px 0; font-size: .92rem; color: var(--fg); }
.combo__search input:focus { outline: none; }
.combo__list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; overscroll-behavior: contain; }
.combo__option {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; cursor: url("../images/cursor-gavel.svg") 16 29, pointer;
  font-size: .94rem; color: var(--ink-soft); line-height: 1.35;
}
.combo__option .combo__check { width: 16px; height: 16px; color: var(--accent-strong); visibility: hidden; flex: none; }
.combo__option[aria-selected="true"] { color: var(--fg); font-weight: 500; }
.combo__option[aria-selected="true"] .combo__check { visibility: visible; }
.combo__option.is-active { background: var(--surface-hover); color: var(--fg); }
.combo__label { flex: 1; min-width: 0; }
.combo__count { font-size: .8rem; color: var(--grey); font-variant-numeric: tabular-nums; }
.combo__option.is-empty .combo__label { color: var(--grey); }
.combo__divider { height: 1px; background: var(--line); margin: 4px 6px; }
.combo__none { padding: 14px 10px; font-size: .9rem; color: var(--grey); }
@keyframes comboIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Dans la barre de recherche de l'accueil : champ sans bordure, libellé au-dessus */
.search-bar__field .combo__trigger { border: 0; min-height: 30px; padding: 2px 0; background: transparent; border-radius: 6px; font-size: 1rem; }
.search-bar__field .combo__trigger:focus-visible { box-shadow: 0 0 0 3px var(--gold-tint); }
.search-bar__field .combo.is-open .combo__trigger { box-shadow: none; }
.search-bar__field { position: relative; cursor: url("../images/cursor-gavel.svg") 16 29, pointer; transition: background var(--t-fast); border-radius: 10px; }
.search-bar__field:hover, .search-bar__field:focus-within { background: var(--surface-hover); }
.search-bar__field .combo__panel { inset-inline-start: -20px; top: calc(100% + 18px); }
.search-bar__field input[type="search"] { cursor: text; }

@media (max-width: 760px) {
  .combo__panel { width: 100%; max-width: none; }
  .search-bar__field .combo__panel { inset-inline-start: -14px; width: calc(100% + 28px); }
}
@media (prefers-reduced-motion: reduce) { .combo.is-open .combo__panel { animation: none; } }

/* ==========================================================================
   Corrections issues de l’audit UX/UI (contraste WCAG AA, focus, cibles tactiles)
   ========================================================================== */

/* Contraste : couleurs d’état assombries en clair (badges ≥ 4,5:1) */
:root { --success: #256B4C; --warning: #8A5509; }
:root[data-theme="dark"] { --success: #5CC092; --warning: #E3A94B; --grey-light: #7F8999; }
.sidebar__section { color: var(--grey); }
.calendar__cell.is-out { color: var(--grey); }
.date-pill.is-active small { opacity: 1; }

/* Focus clavier : anneau net et constant sur tous les éléments interactifs (WCAG 2.4.7 / 2.4.11) */
:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.input:focus, .select:focus, .textarea:focus, .rte:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
.search-bar__field:focus-within { outline: 2px solid var(--accent-strong); outline-offset: -2px; }
.search-bar__field .combo__trigger:focus-visible { outline: none; box-shadow: none; }
.combo__trigger:focus-visible, .combo.is-open .combo__trigger { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
.btn:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
.site-header :focus-visible, .hero :focus-visible, .section--navy :focus-visible, .site-footer :focus-visible { outline-color: var(--gold-light); }

/* Cibles tactiles : au moins 24 px de haut pour les liens isolés (WCAG 2.5.8) */
.link.small, .text-link, .breadcrumb a, .demo-box button, .search-shortcuts a { display: inline-flex; align-items: center; min-height: 28px; }
.notif-menu__head .link { min-height: 28px; display: inline-flex; align-items: center; }

/* Titres du pied de page (désormais h2 pour une hiérarchie continue) */
.site-footer .footer-title { font-family: var(--font-text); font-variation-settings: normal; font-size: .9rem; font-weight: 500; letter-spacing: 0; line-height: 1.4; color: var(--white); margin: 0 0 20px; }
.filters h2 { font-size: 1.42rem; display: flex; justify-content: space-between; align-items: center; margin-bottom: .6em; }
h2.results-count { margin: 0; font-size: 1.6rem; }

.lawyer-card__name a { display: inline-block; padding-block: 2px; }

/* ==========================================================================
   Carte des avocats (Leaflet)
   ========================================================================== */
.map-panel { position: relative; margin-bottom: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-1); box-shadow: var(--shadow-xs), var(--edge); }
.map-panel__map { height: 380px; background: var(--sand); }
.map-panel__bar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--line); font-size: .9rem; }
.map-offline { position: absolute; inset-inline: 12px; bottom: 12px; z-index: 500; padding: 10px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--grey); font-size: .85rem; }

/* Épingle : monogramme de l'avocat, pointe vers l'adresse */
.map-pin { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--navy); border: 2px solid var(--gold-light); box-shadow: 0 2px 6px rgba(16, 27, 43, .25); transition: background var(--t-fast), transform var(--t-fast); }
.map-pin > span { transform: rotate(45deg); font-family: var(--font-title); font-weight: 500; font-size: 15px; color: var(--gold-light); letter-spacing: 0; }
.map-pin.is-active { background: var(--gold); border-color: var(--navy); transform: rotate(-45deg) scale(1.12); }
.map-pin.is-active > span { color: var(--navy); }
.leaflet-marker-icon:focus-visible .map-pin { outline: 2px solid var(--accent-strong); outline-offset: 3px; }

/* Bulle d'information */
.leaflet-popup-content-wrapper { border-radius: 14px; background: var(--surface-3); color: var(--fg); border: 1px solid var(--border-3); box-shadow: var(--shadow-lg); }
.leaflet-popup-tip { background: var(--surface-3); box-shadow: none; }
.leaflet-popup-content { margin: 16px 18px; font-family: var(--font-text); font-size: .88rem; line-height: 1.45; }
[dir="rtl"] .leaflet-popup-content { font-family: var(--font-arabic); text-align: right; }
.leaflet-container a.leaflet-popup-close-button { color: var(--grey); width: 28px; height: 28px; font-size: 20px; line-height: 26px; }
.map-card__name { display: block; font-family: var(--font-title); font-weight: 500; font-size: 1.25rem; line-height: 1.15; color: var(--fg) !important; margin-bottom: 4px; }
[dir="rtl"] .map-card__name { font-family: var(--font-arabic); font-size: 1rem; }
.map-card__office, .map-card__city { color: var(--grey); }
.map-card__specs { margin-top: 6px; color: var(--ink-soft); }
.leaflet-container a.map-card__cta { color: var(--on-accent); margin-top: 12px; width: 100%; }
.leaflet-container { font-family: var(--font-text); background: var(--sand); }
.leaflet-control-attribution { font-size: 11px; background: color-mix(in srgb, var(--surface-1) 85%, transparent) !important; color: var(--grey); }
.leaflet-control-attribution a { color: var(--accent-strong); }
.leaflet-bar a { background: var(--surface-1); color: var(--fg); border-color: var(--line); }
.leaflet-bar a:hover { background: var(--surface-hover); }
:root[data-theme="dark"] .leaflet-tile-pane { filter: brightness(.72) contrast(1.08) saturate(.7); }

/* Carte de la liste survolée depuis une épingle */
.lawyer-card.is-highlighted { border-color: var(--accent); box-shadow: 0 0 0 3px var(--gold-tint); }

/* Fiche avocat et profil : carte du cabinet */
.office-map { height: 240px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); margin-top: 18px; }
.office-map--picker { height: 320px; cursor: crosshair; }

@media (max-width: 760px) {
  .map-panel__map { height: 300px; }
}

/* Groupe d'épingles proches */
.map-cluster { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: var(--gold-light);
  border: 2px solid var(--gold-light); box-shadow: 0 0 0 5px color-mix(in srgb, var(--navy) 22%, transparent), 0 2px 6px rgba(16, 27, 43, .25);
  font-family: var(--font-title); font-weight: 500; font-size: 18px; cursor: url("../images/cursor-gavel.svg") 16 29, pointer; transition: background var(--t-fast); }
.map-cluster.is-active, .map-cluster:hover { background: var(--gold); color: var(--navy); border-color: var(--navy); }

/* Leaflet empile ses calques jusqu’au niveau 1000 : on les confine à la carte pour qu’ils ne passent jamais au-dessus de l’en-tête. */
.map-panel, .office-map, .leaflet-container { isolation: isolate; z-index: 0; }
.map-panel, .office-map { position: relative; }

/* Filtres de l’annuaire : collants seulement si le panneau tient entièrement dans l’écran,
   sinon il défile avec la page (sa partie basse doit toujours rester atteignable). */
.filters .field { margin-bottom: 14px; }
@media (min-width: 1025px) and (min-height: 940px) {
  .filters { position: sticky; top: calc(var(--header-h) + 16px); }
}

/* Repli de « Autour de moi » : raison exacte + choix de la ville, sous la carte */
.map-locate { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); gap: 12px 24px; align-items: end; padding: 16px; border-top: 1px solid var(--line); background: var(--offwhite); }
.map-locate[hidden] { display: none; }
.map-locate__reason { margin: 0; font-size: .92rem; color: var(--ink-soft); align-self: center; }
@media (max-width: 760px) { .map-locate { grid-template-columns: 1fr; } }

/* ==========================================================================
   Photos et blocs illustrés
   ========================================================================== */
/* Traitement commun : légère désaturation + voile chaud, pour unifier des photos d’origines différentes */
.photo, .media-card__img, .page-hero__figure img { display: block; width: 100%; object-fit: cover; filter: saturate(.82) contrast(1.02); }
.photo { aspect-ratio: 4 / 3; border-radius: var(--radius-xl); border: 1px solid var(--line); }

/* En-tête de page avec photo */
.page-hero--media { padding-bottom: 64px; }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: end; }
.page-hero__figure { margin: 0; position: relative; border-radius: var(--radius-xl); overflow: hidden; }
.page-hero__figure img { aspect-ratio: 4 / 3; }
.page-hero__figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(16, 27, 43, .35)); }
.page-hero--media h1 { margin-bottom: 14px; }

/* Grille de cartes */
.card-grid { display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.media-card { position: relative; display: flex; flex-direction: column; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xs), var(--edge); transition: border-color var(--t-fast); }
.media-card:hover { border-color: var(--line-strong); }
.media-card__img { aspect-ratio: 16 / 10; }
.media-card__body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.media-card h3 { margin: 0; font-size: 1.6rem; }
.media-card h3 a::after { content: ""; position: absolute; inset: 0; }   /* toute la carte est cliquable */
.media-card p { margin: 0; color: var(--grey); }
.media-card .text-link { margin-top: auto; align-self: flex-start; }
.media-card:focus-within { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.section--navy .media-card { background: var(--navy-2); border-color: rgba(255,255,255,.08); }
.section--navy .media-card p { color: rgba(255,255,255,.66); }
.section--navy .media-card h3, .section--navy .media-card h3 a { color: var(--white); }

/* Bannière photo pleine largeur */
.banner { position: relative; overflow: hidden; isolation: isolate; background: var(--navy); color: var(--white); padding: 120px 0; }
.banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: grayscale(.35) contrast(1.05); }
.banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(16,27,43,.92) 0%, rgba(16,27,43,.72) 55%, rgba(16,27,43,.35) 100%); }
[dir="rtl"] .banner::before { background: linear-gradient(270deg, rgba(16,27,43,.92) 0%, rgba(16,27,43,.72) 55%, rgba(16,27,43,.35) 100%); }
.banner__inner { max-width: var(--container); }
.banner h2 { max-width: 16ch; margin-bottom: 14px; }
.banner p { max-width: 54ch; color: rgba(255,255,255,.78); font-size: 1.08rem; margin-bottom: 28px; }

/* Panneau des pages de connexion : photo en fond */
.auth__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: grayscale(.4) contrast(1.05); opacity: .55; }
.auth__aside::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16,27,43,.55) 0%, rgba(16,27,43,.94) 70%); }

@media (max-width: 1024px) {
  .card-grid, .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-hero__grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .card-grid, .card-grid--2, .card-grid--4 { grid-template-columns: 1fr; }
  .banner { padding: 80px 0; }
}

/* Sélecteur pleine largeur (type de consultation) : colonnes égales, jamais de retour à la ligne bancal */
.segmented--block { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); width: 100%; border-radius: 14px; gap: 4px; }
.segmented--block label { cursor: url("../images/cursor-gavel.svg") 16 29, pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 56px; padding: 8px 6px; border-radius: 10px; font-size: .8rem; font-weight: 500; line-height: 1.2; text-align: center; color: var(--grey); transition: background var(--t-fast), color var(--t-fast); min-width: 0; overflow-wrap: anywhere; }
.segmented--block label:hover { color: var(--fg); }
.segmented--block label.is-active { background: var(--surface-1); color: var(--fg); box-shadow: var(--shadow-xs); }
.segmented--block label:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.segmented--block .icon { width: 18px; height: 18px; }

/* Fiche avocat : informations pratiques */
.practical { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.practical__item { background: var(--surface-1); padding: 16px 18px; min-width: 0; }
.practical__item--wide, .practical__item:only-child { grid-column: 1 / -1; }
.practical dt { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 500; color: var(--grey); margin-bottom: 6px; letter-spacing: 0; }
.practical dt .icon { color: var(--accent-strong); }
.practical dd { margin: 0; display: grid; gap: 2px; }
.practical__value { font-weight: 500; font-size: 1rem; color: var(--fg); overflow-wrap: anywhere; }
.practical__sub { color: var(--grey); font-size: .9rem; }
.practical dd.practical__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.practical__chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); font-size: .86rem; color: var(--fg); }
.practical__chip .icon { color: var(--accent-strong); }
.practical__title { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: .78rem; font-weight: 500; color: var(--grey); letter-spacing: 0; margin: 24px 0 8px; }
.practical__title .icon { color: var(--accent-strong); }
.hours { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.hours__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.hours__day { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); }
.hours__ranges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.hours__range { font-variant-numeric: tabular-nums; font-size: .88rem; padding: 3px 10px; border-radius: 8px; background: var(--surface-2); color: var(--fg); }
.hours__closed { font-size: .88rem; color: var(--grey); }
.hours__row.is-closed .hours__day { color: var(--grey); }
.hours__row.is-today { background: var(--gold-tint); border-radius: 10px; border-bottom-color: transparent; }
.hours__row.is-today .hours__day { font-weight: 500; }
.hours__row.is-today .hours__range { background: var(--surface-1); }
.hours__badge { font-size: .7rem; font-weight: 500; padding: 2px 8px; border-radius: 99px; background: var(--accent-strong); color: var(--on-accent); }
.office-locator { margin: 24px 0 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface-1); }
.office-locator .office-map { margin: 0; border: 0; border-radius: 0; height: 260px; }
.office-locator__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.office-locator__addr { display: inline-flex; align-items: flex-start; gap: 8px; font-size: .9rem; color: var(--fg); min-width: 0; }
.office-locator__addr .icon { color: var(--accent-strong); margin-top: 3px; flex: none; }
@media (max-width: 560px) {
  .practical { grid-template-columns: 1fr; }
  .hours__row { padding: 10px 8px; }
  .office-locator .office-map { height: 220px; }
  .office-locator__bar .btn { width: 100%; justify-content: center; }
}
.profile-layout > * { min-width: 0; }

/* ==========================================================================
   Hero d'accueil « photo » : bibliothèque sous voile marine, texte à gauche,
   recherche pleine largeur, bandeau de repères factuels en pied.
   ========================================================================== */
.hero--photo { min-height: min(92vh, 860px); padding: calc(var(--header-h) + 72px) 0 0; display: flex; flex-direction: column; overflow: visible; z-index: 2; background: var(--navy); }
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; z-index: -2; filter: saturate(.7) contrast(1.05); }
[dir="rtl"] .hero__photo { transform: scaleX(-1); }
.hero__veil { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(16, 27, 43, .96) 0%, rgba(16, 27, 43, .88) 38%, rgba(16, 27, 43, .55) 70%, rgba(16, 27, 43, .35) 100%),
    linear-gradient(180deg, rgba(16, 27, 43, .55) 0%, transparent 30%, transparent 62%, rgba(16, 27, 43, .9) 100%); }
[dir="rtl"] .hero__veil { background:
    linear-gradient(270deg, rgba(16, 27, 43, .96) 0%, rgba(16, 27, 43, .88) 38%, rgba(16, 27, 43, .55) 70%, rgba(16, 27, 43, .35) 100%),
    linear-gradient(180deg, rgba(16, 27, 43, .55) 0%, transparent 30%, transparent 62%, rgba(16, 27, 43, .9) 100%); }
.hero--plain .hero__veil { background: none; }
.hero__content { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: 56px; }
.hero--photo .hero__title { font-size: clamp(2.8rem, 6.2vw, 5.6rem); line-height: .95; max-width: 13ch; margin: 0; color: var(--white); animation: fadeUp .9s var(--ease-out) both; }
[dir="rtl"] .hero--photo .hero__title { font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.25; max-width: 16ch; }
.hero__echo { margin: 14px 0 0; font-size: clamp(1.1rem, 1.8vw, 1.5rem); color: var(--gold-light); opacity: .9; font-weight: 400; max-width: 32ch; animation: fadeIn 1s .2s var(--ease) both; }
.hero__echo[lang="ar"] { font-family: var(--font-arabic, inherit); }
.hero--photo .hero__lead { margin: 24px 0 0; max-width: 56ch; font-size: 1.1rem; color: rgba(255, 255, 255, .8); animation: fadeIn 1s .3s var(--ease) both; }
/* position + z-index : la liste déroulante des filtres passe au-dessus des raccourcis et de la bande de chiffres */
.hero__search { position: relative; z-index: 5; margin-top: 40px; max-width: 1040px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 24px 60px rgba(0, 0, 0, .28); animation: fadeIn 1s .4s var(--ease) both; }
.hero__shortcuts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; animation: fadeIn 1s .5s var(--ease) both; }
.hero__shortcuts-label { font-size: .84rem; color: rgba(255, 255, 255, .62); margin-inline-end: 4px; }
.hero__shortcuts a { font-size: .84rem; color: var(--white); padding: 6px 14px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(16, 27, 43, .35); backdrop-filter: blur(6px); transition: border-color var(--t-fast), background var(--t-fast); }
.hero__shortcuts a:hover { border-color: var(--gold); background: rgba(181, 154, 108, .18); }
.hero__facts { border-top: 1px solid rgba(255, 255, 255, .12); background: rgba(16, 27, 43, .55); backdrop-filter: blur(8px); }
.hero__facts-inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hero__fact { display: flex; align-items: center; gap: 12px; padding: 20px 24px; font-size: .9rem; color: rgba(255, 255, 255, .78); border-inline-start: 1px solid rgba(255, 255, 255, .1); min-width: 0; }
.hero__fact:first-child { border-inline-start: 0; padding-inline-start: 0; }
.hero__fact .icon { color: var(--gold-light); flex: none; }
.hero__fact strong { color: var(--white); font-weight: 500; font-size: 1.05rem; }
.hero__fact--link { color: var(--white); text-decoration: none; transition: background var(--t-fast); }
.hero__fact--link:hover { background: rgba(255, 255, 255, .05); }
.hero__fact--link .icon--sm { margin-inline-start: auto; color: var(--gold-light); }
.hero--photo + .section { padding-top: 112px; }
@media (max-width: 1024px) {
  .hero__facts-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__fact:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .hero__fact:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .1); }
}
@media (max-width: 760px) {
  .hero--photo { min-height: 0; padding-top: calc(var(--header-h) + 40px); }
  .hero__photo { object-position: 60% 50%; }
  .hero__veil, [dir="rtl"] .hero__veil { background: linear-gradient(180deg, rgba(16, 27, 43, .82) 0%, rgba(16, 27, 43, .9) 60%, rgba(16, 27, 43, .97) 100%); }
  .hero__content { padding-bottom: 32px; }
  .hero__search { margin-top: 28px; }
  .hero__facts-inner { grid-template-columns: 1fr; }
  .hero__fact, .hero__fact:nth-child(odd) { border-inline-start: 0; padding: 14px 0; }
  .hero__fact + .hero__fact { border-top: 1px solid rgba(255, 255, 255, .1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero--photo .hero__title, .hero__echo, .hero--photo .hero__lead, .hero__search, .hero__shortcuts { animation: none; }
}
.hero--photo { padding-top: calc(var(--header-h) + 48px); }
.hero--photo .hero__title { max-width: 16ch; }
.hero__content { padding-bottom: 40px; }
html[dir="ltr"] .hero__echo { text-align: left; }
html[dir="rtl"] .hero__echo { text-align: right; }
.icon-btn--accent { color: var(--accent-strong); }
.icon-btn--accent:hover { background: var(--gold-tint); color: var(--accent-strong); }

/* Session d'assistance : aide à la justification */
.reason-help { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: -6px 0 20px; flex-wrap: wrap; }
.reason-help__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { border: 1px solid var(--line-strong); background: var(--surface-1); color: var(--fg); border-radius: 99px; padding: 5px 12px; font-size: .8rem; min-height: 30px; transition: border-color var(--t-fast), background var(--t-fast); }
.chip-btn:hover { border-color: var(--accent); background: var(--gold-tint); }
.reason-help__count { font-size: .78rem; color: var(--grey); white-space: nowrap; font-variant-numeric: tabular-nums; padding-top: 6px; }
.reason-help__count.is-ok { color: var(--success); }

/* ==========================================================================
   Étapes en parcours : ligne de progression, nœuds iconographiques, cartes actives
   ========================================================================== */
.journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr)); gap: 24px; position: relative; counter-reset: none; }
/* Rail gris + remplissage doré, centrés sur les nœuds (28px = moitié d'un nœud de 56px) */
.journey::before, .journey::after { content: ""; position: absolute; top: 27px; height: 2px; inset-inline-start: 28px; inset-inline-end: calc((100% - 24px * (var(--steps) - 1)) / var(--steps) - 28px); border-radius: 2px; }
.journey::before { background: var(--line-strong); }
.journey::after { background: linear-gradient(90deg, var(--accent-strong), var(--gold)); transform: scaleX(0); transform-origin: left center; transition: transform 1.4s var(--ease-out) .15s; }
[dir="rtl"] .journey::after { transform-origin: right center; background: linear-gradient(270deg, var(--accent-strong), var(--gold)); }
.journey.is-visible::after { transform: scaleX(1); }
.journey__step { position: relative; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.journey__node { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-1); border: 2px solid var(--line-strong); color: var(--grey); transition: border-color .4s var(--ease), background .4s var(--ease), color .4s var(--ease), transform .3s var(--ease-out); transition-delay: calc(.25s + var(--i) * .4s); }
.journey__node .icon { width: 22px; height: 22px; }
.journey.is-visible .journey__node { border-color: var(--gold); color: var(--accent-strong); background: var(--gold-tint); }
.journey__num { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--navy); color: var(--white); font-size: .72rem; font-weight: 500; display: grid; place-items: center; border: 2px solid var(--surface-1); font-variant-numeric: tabular-nums; }
.journey__card { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 16px; background: var(--surface-1); border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(16, 27, 43, .04); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), border-color var(--t-fast), box-shadow var(--t); transition-delay: calc(.2s + var(--i) * .4s), calc(.2s + var(--i) * .4s), 0s, 0s; }
.journey.is-visible .journey__card { opacity: 1; transform: none; }
/* Masquées seulement quand le script a armé l'animation : sans JavaScript, tout reste visible */
.journey.is-armed:not(.is-visible) .journey__card { opacity: 0; transform: translateY(14px); }
.journey__label { font-size: .78rem; font-weight: 500; color: var(--accent-strong); }
.journey__card h3 { font-size: 1.6rem; margin: 0; }
.journey__card p { margin: 0; color: var(--grey); }
.journey__link { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: .92rem; color: var(--fg); text-decoration: none; align-self: flex-start; }
.journey__link .icon { color: var(--accent-strong); transition: transform var(--t-fast); }
.journey__link::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.journey__card { position: relative; }
.journey__step:hover .journey__card, .journey__step:focus-within .journey__card { border-color: var(--gold); box-shadow: 0 12px 32px rgba(16, 27, 43, .07); }
.journey__step:hover .journey__node { transform: translateY(-3px); transition-delay: 0s; }
.journey__step:hover .journey__link .icon { transform: translateX(3px); }
[dir="rtl"] .journey__step:hover .journey__link .icon { transform: scaleX(-1) translateX(3px); }
.journey__link:focus-visible { outline: none; }
.journey__link:focus-visible::after { box-shadow: 0 0 0 3px var(--gold); }
:root[data-theme="dark"] .journey__card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
:root[data-theme="dark"] .journey__num { background: var(--gold); color: var(--on-accent); }
/* Mobile : parcours vertical, rail à gauche (à droite en arabe) */
@media (max-width: 860px) {
  .journey { grid-template-columns: 1fr; gap: 20px; }
  .journey::before, .journey::after { top: 28px; bottom: 28px; height: auto; width: 2px; inset-inline-start: 27px; inset-inline-end: auto; }
  .journey::after { transform: scaleY(0); transform-origin: center top; background: linear-gradient(180deg, var(--accent-strong), var(--gold)); }
  [dir="rtl"] .journey::after { transform-origin: center top; background: linear-gradient(180deg, var(--accent-strong), var(--gold)); }
  .journey.is-visible::after { transform: scaleY(1); }
  .journey__step { flex-direction: row; align-items: flex-start; gap: 16px; }
  .journey__node { flex: none; }
  .journey__card { padding: 18px 20px; }
  .journey__card h3 { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .journey::after { transition: none; transform: none; }
  .journey__node, .journey__card { transition: border-color var(--t-fast), box-shadow var(--t-fast); }
  .journey__card { opacity: 1; transform: none; }
  .journey__node { border-color: var(--gold); color: var(--accent-strong); background: var(--gold-tint); }
}
.journey.is-visible .journey__node { background: linear-gradient(var(--gold-tint), var(--gold-tint)), var(--surface-1); }
@media (prefers-reduced-motion: reduce) { .journey__node { background: linear-gradient(var(--gold-tint), var(--gold-tint)), var(--surface-1); } }
/* Mobile : un segment de rail entre chaque étape (le rail s'arrête au dernier nœud) */
@media (max-width: 860px) {
  .journey::before, .journey::after { display: none; }
  .journey__step:not(:last-child)::before, .journey__step:not(:last-child)::after { content: ""; position: absolute; top: 56px; bottom: -20px; inset-inline-start: 27px; width: 2px; }
  .journey__step:not(:last-child)::before { background: var(--line-strong); }
  .journey__step:not(:last-child)::after { background: var(--gold); transform: scaleY(0); transform-origin: center top; transition: transform .5s var(--ease-out); transition-delay: calc(.3s + var(--i) * .4s); }
  .journey.is-visible .journey__step::after { transform: scaleY(1); }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .journey__step:not(:last-child)::after { transform: none; transition: none; }
}

/* ==========================================================================
   Bloc Document : sommaire collant + parties (tarifs, conditions)
   ========================================================================== */
.doc { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 64px; align-items: start; }
.doc__toc { position: sticky; top: calc(var(--header-h) + 24px); padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-1); max-height: calc(100vh - var(--header-h) - 48px); overflow: auto; }
.doc__toc-title { font-family: var(--font-body); font-size: .8rem; font-weight: 500; color: var(--grey); letter-spacing: 0; margin: 0 0 10px; }
.doc__toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.doc__toc a { display: block; padding: 8px 12px; border-radius: 10px; font-size: .9rem; line-height: 1.35; color: var(--fg); text-decoration: none; border-inline-start: 2px solid transparent; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.doc__toc a:hover { background: var(--surface-2); }
.doc__toc a.is-active { background: var(--gold-tint); border-inline-start-color: var(--accent-strong); color: var(--fg); font-weight: 500; }
.doc__updated { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: .8rem; color: var(--grey); }
.doc__body { min-width: 0; max-width: 78ch; }
.doc__part { scroll-margin-top: calc(var(--header-h) + 24px); padding-bottom: 48px; margin-bottom: 48px; border-bottom: 1px solid var(--line); }
.doc__part:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.doc__part > h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 0 0 20px; }
.doc__part .prose h3 { font-size: 1.25rem; margin: 28px 0 10px; }
.doc__part .prose ul, .doc__part .prose ol { padding-inline-start: 1.25em; }
.doc__part .prose li + li { margin-top: 6px; }
/* Tableaux de prix et de délais */
.prose table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 20px 0; font-size: .92rem; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.prose th, .prose td { padding: 12px 16px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.prose thead th { background: var(--surface-2); font-weight: 500; font-size: .84rem; color: var(--grey); }
.prose tfoot td { background: var(--gold-tint); font-weight: 500; border-bottom: 0; }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tfoot td { border-top: 1px solid var(--line-strong); }
@media (max-width: 1024px) {
  .doc { grid-template-columns: 1fr; gap: 32px; }
  .doc__toc { position: static; max-height: none; }
  .prose th, .prose td { padding: 10px 12px; }
}

/* Liste des sections (colonne étroite de l'éditeur de page) : texte sur toute la largeur, actions en dessous */
.section-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "handle type text" "actions actions actions"; align-items: center; gap: 10px 12px; padding: 12px 14px; }
.section-row__handle { grid-area: handle; }
.section-row__type { grid-area: type; }
.section-row__text { grid-area: text; min-width: 0; display: grid; gap: 2px; }
.section-row__title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.section-row__meta { font-size: .8rem; color: var(--grey); line-height: 1.35; }
.section-row__actions { grid-area: actions; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.section-row__btns { display: flex; gap: 2px; }
.section-row__btns .icon-btn { width: 34px; height: 34px; }

/* ==========================================================================
   Carrousel d'avocats (accueil) : défilement par crans, flèches centrées, pause
   ========================================================================== */
.carousel { position: relative; padding: 0 28px; }
.carousel__viewport { overflow: hidden; padding: 6px 0 12px; margin: -6px 0 -12px; touch-action: pan-y; cursor: grab; }
.carousel__viewport:active { cursor: grabbing; }
.carousel__track { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; width: 100%; will-change: transform; user-select: none; }
.carousel__slide { flex: 0 0 calc((100% - 3 * 20px) / 4); }
.carousel__slide { min-width: 0; }
.lawyer-mini { height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 28px 20px 22px; border-radius: 18px; background: var(--surface-1); border: 1px solid var(--line); color: var(--fg); text-decoration: none; transition: border-color var(--t-fast), box-shadow var(--t), transform var(--t); }
.lawyer-mini:hover, .lawyer-mini:focus-visible { border-color: var(--gold); box-shadow: 0 14px 34px rgba(16, 27, 43, .08); transform: translateY(-3px); }
.lawyer-mini .avatar { margin-bottom: 6px; }
.lawyer-mini__name { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-title); font-weight: 500; font-size: 1.3rem; line-height: 1.2; }
[dir="rtl"] .lawyer-mini__name { font-family: var(--font-arabic); font-size: 1.1rem; }
.lawyer-mini__check { width: 16px; height: 16px; color: var(--accent-strong); flex: none; }
.lawyer-mini__spec { font-size: .85rem; color: var(--accent-strong); font-weight: 500; }
.lawyer-mini__city { display: inline-flex; align-items: center; gap: 4px; font-size: .84rem; color: var(--grey); }
.lawyer-mini__cta { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 500; border-top: 1px solid var(--line); width: 100%; justify-content: center; }
.lawyer-mini__cta .icon { color: var(--accent-strong); transition: transform var(--t-fast); }
.lawyer-mini:hover .lawyer-mini__cta .icon { transform: translateX(3px); }
[dir="rtl"] .lawyer-mini:hover .lawyer-mini__cta .icon { transform: scaleX(-1) translateX(3px); }
.carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-1); color: var(--fg); border: 1px solid var(--line-strong); box-shadow: 0 6px 18px rgba(16, 27, 43, .10); transition: background var(--t-fast), color var(--t-fast), opacity var(--t-fast); }
.carousel__arrow:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
.carousel__arrow--prev { inset-inline-start: -8px; }
.carousel__arrow--next { inset-inline-end: -8px; }
.carousel__arrow .icon { width: 20px; height: 20px; }
:root[data-theme="dark"] .carousel__arrow { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .carousel__arrow:hover { background: var(--gold); color: var(--on-accent); border-color: var(--gold); }
@media (max-width: 1024px) { .carousel__slide { flex-basis: calc((100% - 2 * 20px) / 3); } }
@media (max-width: 760px) { .carousel__track { gap: 16px; } .carousel__slide { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 520px) {
  .carousel { padding: 0; }
  .carousel__slide { flex-basis: 78%; }
  .carousel__arrow { width: 40px; height: 40px; }
  .carousel__arrow--prev { inset-inline-start: -10px; }
  .carousel__arrow--next { inset-inline-end: -10px; }
}
@media (prefers-reduced-motion: reduce) { .lawyer-mini { transition: border-color var(--t-fast); } .lawyer-mini:hover { transform: none; } }
.carousel[data-static] .carousel__arrow { display: none; }

/* ==========================================================================
   En-tête public en deux bandes : bande haute (message + outils), bande basse (logo + menu)
   ========================================================================== */
:root { --header-top-h: 40px; --header-bottom-h: 92px; --header-scrolled-h: 80px; --header-h: calc(var(--header-top-h) + var(--header-bottom-h)); }
.site-header { height: auto; display: flex; flex-direction: column; }
.site-header.is-scrolled { --header-h: var(--header-scrolled-h); height: auto; }
.header-top { height: var(--header-top-h); border-bottom: 1px solid rgba(255, 255, 255, .08); overflow: hidden; transition: height var(--t) var(--ease), opacity var(--t) var(--ease), border-color var(--t); }
.site-header.is-scrolled .header-top { height: 0; opacity: 0; border-bottom-width: 0; }
.header-top__inner { height: var(--header-top-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.header-top__note { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: rgba(255, 255, 255, .72); min-width: 0; }
.header-top__note span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-top__note .icon { color: var(--gold-light); flex: none; }
.header-top__tools { display: flex; align-items: center; gap: 8px; flex: none; }
.header-top__tools .lang-switch { padding: 2px; }
.header-top__tools .lang-switch a { padding: 2px 9px; font-size: .7rem; }
.header-top__tools .theme-toggle { width: 30px; height: 30px; }
.header-top__tools .theme-toggle .icon { width: 16px; height: 16px; }
.header-top__sep { width: 1px; height: 16px; background: rgba(255, 255, 255, .18); margin-inline: 4px; }
.header-top__link { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: rgba(255, 255, 255, .85); padding: 4px 6px; border-radius: 6px; transition: color var(--t-fast); }
.header-top__link:hover { color: var(--white); }
.header-top__link .icon { color: var(--gold-light); }
.header-top__link--strong { color: var(--gold-light); font-weight: 500; }
.header-top__cta { min-height: 26px; padding: 0 12px; font-size: .76rem; }
.header-bottom { height: var(--header-bottom-h); transition: height var(--t) var(--ease); }
.site-header.is-scrolled .header-bottom { height: var(--header-scrolled-h); }
/* Logo empilé : de l’air au-dessus et en dessous ; un peu plus petit quand l’en-tête se réduit */
.site-header .brand { align-self: center; }
.site-header .brand__mark, .site-header .brand__word { transition: height var(--t) var(--ease); }
.site-header.is-scrolled .brand__mark { height: 40px; }
.site-header.is-scrolled .brand__word { height: 14px; }
.header-bottom .site-header__inner { height: 100%; }
.header-bottom .main-nav { margin-inline-start: auto; }
@media (max-width: 1024px) {
  .header-bottom .burger { display: grid; margin-inline-start: auto; }
}
@media (max-width: 760px) {
  :root { --header-top-h: 36px; --header-bottom-h: 76px; --header-scrolled-h: 68px; }
  .site-header.is-scrolled .brand__mark { height: 34px; }
  .site-header.is-scrolled .brand__word { height: 12px; }
  .header-top__note { display: none; }
  .header-top__inner { justify-content: flex-end; }
  .header-top__cta, .header-top__sep { display: none; }
  .site-header .header-top .lang-switch, .site-header .header-top .theme-toggle { display: inline-flex; }
}
@media (max-width: 380px) { .header-top__link span, .header-top__link { font-size: .74rem; } }

.practical__link { color: var(--fg); text-decoration: none; }
.practical__link:hover { color: var(--accent-strong); text-decoration: underline; }

/* ==========================================================================
   Offres d'abonnement des avocats (accueil, espace avocat)
   ========================================================================== */
.plans { display: grid; grid-template-columns: repeat(var(--plans, 3), minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px 24px 24px; border-radius: 20px; background: var(--surface-1); border: 1px solid var(--line); }
.plan--featured { border-color: var(--gold); box-shadow: 0 18px 44px rgba(16, 27, 43, .10); }
.plan--current { border-color: var(--success); }
.plan__flag { position: absolute; top: -12px; inset-inline-start: 24px; padding: 3px 12px; border-radius: 99px; background: var(--accent-strong); color: var(--on-accent); font-size: .74rem; font-weight: 500; }
.plan--current .plan__flag { background: var(--success); color: var(--on-status, #fff); }
.plan__name { font-size: 1.6rem; margin: 0; }
.plan__tagline { margin: 0; color: var(--grey); font-size: .92rem; }
.plan__price { margin: 8px 0 4px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan__price strong { font-family: var(--font-title); font-weight: 500; font-size: 2.8rem; line-height: 1; }
[dir="rtl"] .plan__price strong { font-family: var(--font-title); }
.plan__unit { color: var(--grey); font-size: .9rem; }
.plan__features { list-style: none; margin: 6px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; flex: 1; align-content: start; }
.plan__features li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; }
.plan__features .icon { color: var(--success); flex: none; margin-top: 3px; }
.plan__cta { margin-top: 12px; }
.plan__cta .is-disabled { pointer-events: none; opacity: .7; }
.pricing-note { margin: 18px 0 0; text-align: center; color: var(--grey); font-size: .86rem; }
.section--navy .plan { color: var(--fg); }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; gap: 28px; } }
/* Espace avocat : offre actuelle */
.sub-current { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.sub-current__main { display: grid; gap: 4px; }
.sub-current__name { font-family: var(--font-title); font-size: 1.8rem; line-height: 1.1; }
.sub-current__perks { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.sub-current__perks li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: var(--surface-2); color: var(--grey); font-size: .86rem; }
.sub-current__perks li.is-on { background: var(--success-bg); color: var(--success); }
/* Menu latéral : fonction non comprise dans l'offre */
.nav-link .nav-lock { margin-inline-start: auto; width: 14px; height: 14px; opacity: .55; }

.plan-strip { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 8px 14px; border-radius: 99px; background: var(--gold-tint); color: var(--fg); font-size: .86rem; text-decoration: none; flex-wrap: wrap; }
.plan-strip .icon { color: var(--accent-strong); }
.plan-strip__cta { font-weight: 500; color: var(--accent-strong); }
.plan-strip:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.text-success { color: var(--success); }

/* Inscription avocat : choix de l'offre */
.plan-pick { border: 0; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.plan-pick legend { margin-bottom: 6px; }
.plan-pick__opt { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 12px; cursor: url("../images/cursor-gavel.svg") 16 29, pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.plan-pick__opt:has(input:checked) { border-color: var(--gold); background: var(--gold-tint); }
.plan-pick__opt input { accent-color: var(--accent-strong); }
.plan-pick__name { font-weight: 500; }
.plan-pick__price { margin-inline-start: auto; color: var(--grey); font-size: .88rem; }

/* Liste des utilisateurs : offre de l'avocat */
.plan-cell { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--grey); }
.plan-cell .icon { color: var(--line-strong); }
.plan-cell--paid { color: var(--fg); }
.plan-cell--paid .icon { color: var(--accent-strong); }
.text-warning { color: var(--warning); }
.plan-cell, .plan-cell + .small, .table td > .muted.small { white-space: nowrap; }

/* Comparatif des offres avocats */
.compare-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-1); }
.compare { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: .94rem; }
.compare th, .compare td { padding: 14px 18px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.compare tbody th { text-align: start; font-weight: 400; color: var(--fg); }
.compare thead th { background: var(--surface-2); vertical-align: bottom; padding-top: 22px; }
.compare__plan { display: block; font-family: var(--font-title); font-weight: 500; font-size: 1.35rem; color: var(--fg); }
.compare__price { display: block; font-size: .84rem; color: var(--grey); font-weight: 400; margin-top: 2px; }
.compare .is-featured { background: var(--gold-tint); }
.compare thead th.is-featured { box-shadow: inset 0 3px 0 var(--accent-strong); }
.compare__yes { color: var(--success); width: 20px; height: 20px; }
.compare__no { color: var(--line-strong); }
.compare tfoot td, .compare tfoot th { border-bottom: 0; padding-block: 18px; }
.compare tbody tr:hover th, .compare tbody tr:hover td { background: color-mix(in srgb, var(--gold) 6%, transparent); }

/* Mon cabinet : confrères rattachés à l'offre */
.team-list { list-style: none; margin: 0 0 16px; padding: 0; border: 1px solid var(--line); border-radius: 12px; }
.team-list__row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.team-list__row:last-child { border-bottom: 0; }
.team-add { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.team-add .field { margin-bottom: 0; min-width: 240px; }
.team-add .btn { min-height: 48px; }

.plan__seats { margin: 0; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 10px; border-radius: 99px; background: var(--surface-2); font-size: .82rem; font-weight: 500; color: var(--fg); }
.plan__seats .icon { color: var(--accent-strong); }
.compare__seats td strong { font-family: var(--font-title); font-size: 1.25rem; }
@media (max-width: 1180px) { .plans[style*="--plans: 4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .plans[style*="--plans: 4"] { grid-template-columns: 1fr; } }
.plans[style*="--plans: 4"] .plan { padding-inline: 20px; }
.plans[style*="--plans: 4"] .plan__price strong { font-size: 2.4rem; }
.plan__tagline { min-height: 2.9em; }
@media (max-width: 900px) { .plan__tagline { min-height: 0; } }

/* Mon cabinet : tableau des profils et ajout */
.firm-table { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 20px; }
.firm-table td .badge { white-space: normal; line-height: 1.35; max-width: 180px; }
.firm-table th, .firm-table td { padding-inline: 14px; }
.firm-table .actions { flex-wrap: nowrap; gap: 4px; }
.firm-table td:last-child { width: 1%; white-space: nowrap; }
.firm-add { padding-top: 18px; border-top: 1px solid var(--line); }
.firm-add h3 { font-size: 1.15rem; margin: 0 0 12px; }
.firm-add .segmented .tab { border: 0; background: none; padding: 8px 16px; border-radius: 99px; font-size: .86rem; font-weight: 500; color: var(--grey); }
.firm-add .segmented .tab.is-active { background: var(--surface-1); color: var(--fg); box-shadow: var(--shadow-xs); }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .form-grid--3 { grid-template-columns: 1fr; } }

/* Mon abonnement : accès à « Mon équipe » */
.team-summary { display: flex; align-items: center; gap: 14px; padding: 16px 20px; color: var(--fg); text-decoration: none; transition: border-color var(--t-fast), box-shadow var(--t); }
.team-summary:hover { border-color: var(--gold); box-shadow: 0 8px 24px rgba(16, 27, 43, .06); }
.team-summary .grow { display: grid; gap: 2px; }
.team-summary__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--gold-tint); color: var(--accent-strong); display: grid; place-items: center; flex: none; }

/* Listes triables : poignée de glisser-déposer et élément en cours de déplacement */
.sort-handle { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--grey-light); cursor: grab; touch-action: none; transition: color var(--t-fast), background var(--t-fast); }
.sort-handle:hover { color: var(--fg); background: var(--sand); }
.sort-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; color: var(--fg); }
.sort-handle .icon { width: 18px; height: 18px; }
.is-sorting, .is-sorting * { cursor: grabbing !important; user-select: none; }
[data-sort-id].is-dragging { position: relative; z-index: 3; background: var(--surface-1); box-shadow: 0 0 0 2px var(--gold), 0 12px 28px rgba(16, 27, 43, .14); border-radius: 12px; opacity: 1; transform: none; }
tr[data-sort-id].is-dragging > td { background: var(--surface-1); }
[data-sortable-group] { min-height: 72px; }
.sort-num { min-width: 26px; }
.sort-col { width: 44px; padding-inline-end: 0 !important; }
[data-sortable] .list-item__main strong, [data-sortable] .list-item__main span { white-space: normal; overflow-wrap: break-word; }
[data-sortable] > .list-item { gap: 6px; padding-inline: 14px; }

/* ==========================================================================
   Prestige revisité — finitions (voir DESIGN.md)
   ========================================================================== */
h1, h2, h3, .title { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Boutons : rectangles adoucis plutôt que pilules, libellé en 600, pas de reflet animé */
.btn { border-radius: var(--radius); font-weight: 600; letter-spacing: 0; font-size: .95rem; }
.btn::after { display: none; }
.btn:hover { transform: none; }
.btn--lg { min-height: 52px; }
.search-bar .btn { border-radius: 12px; }

/* Champs : 48 px, anneau de focus bronze */
.input, .select, .textarea { min-height: 48px; }
.input:focus, .select:focus, .textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 30%, transparent); }

/* Hero : titre serif plus serré, texte d'accompagnement plus lisible */
.hero--photo .hero__title { font-size: clamp(2.6rem, 5.4vw, 4.75rem); line-height: 1.04; letter-spacing: -.02em; max-width: 15ch; }
.hero--photo .hero__lead { color: rgba(255, 255, 255, .86); font-size: 1.125rem; }
.search-bar__field label { font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.hero__shortcuts a { font-weight: 600; }

/* En-tête : navigation en 600 pour la lisibilité sur photo */
.main-nav a { font-weight: 600; font-size: .92rem; }

/* Sections : rythme vertical régulier */
.section { padding: 104px 0; }
.hero--photo + .section, .section--after-hero { padding-top: 104px; }
@media (max-width: 760px) { .section { padding: 64px 0; } .hero--photo + .section, .section--after-hero { padding-top: 64px; } }

/* Cartes : rayon 16 px, ombre douce seulement au survol */
.card { border-radius: var(--radius-lg); }
.lawyer-card:hover { transform: translateY(-2px); }

/* Étiquettes et petits libellés : 600, sans capitales espacées */
.eyebrow { letter-spacing: .02em; font-weight: 600; text-transform: none; }
.badge { font-weight: 600; letter-spacing: 0; }

/* Arabe : titres (Noto Kufi, voir --font-arabic-title) */
[dir="rtl"] .hero--photo .hero__title, [dir="rtl"] .lawyer-card__name,
[dir="rtl"] .topbar__title, [dir="rtl"] .spec__name, [dir="rtl"] .toc__name, [dir="rtl"] .lawyer-mini__name { font-family: var(--font-arabic-title); letter-spacing: 0; }
[dir="rtl"] .hero--photo .hero__title { line-height: 1.3; }

/* Fiches avocat : prochaine disponibilité et honoraires (information qui fait choisir) */
.lawyer-card__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 1px; margin: 0 0 4px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.lawyer-card__fact { background: var(--offwhite); padding: 10px 14px; min-width: 0; }
.lawyer-card__fact dt { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--grey); margin: 0 0 2px; }
.lawyer-card__fact dt .icon { width: 14px; height: 14px; color: var(--accent-strong); }
.lawyer-card__fact dd { margin: 0; font-weight: 600; font-size: .95rem; color: var(--fg); }
.lawyer-card__fact--slot dd { color: var(--accent-strong); }
.lawyer-card__foot .btn--sm { min-height: 38px; }
.lawyer-mini__slot { display: inline-flex; align-items: center; gap: 5px; font-size: .84rem; font-weight: 600; color: var(--accent-strong); background: var(--gold-tint); padding: 3px 10px; border-radius: 99px; }
.lawyer-mini__slot .icon { width: 14px; height: 14px; }
.lawyer-mini__fee { font-size: .84rem; color: var(--ink-soft); }

/* Photo de profil : l'image remplit l'avatar, les initiales restent le repli */
.avatar--photo { background: var(--sand); padding: 0; overflow: hidden; }
.avatar--photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.avatar-card__body { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.avatar-card__text { flex: 1; min-width: 220px; }
.avatar-card label.btn { cursor: url("../images/cursor-gavel.svg") 16 29, pointer; }
.avatar-card label.btn:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Barre de recherche : bouton plus compact, détaché des champs */
@media (min-width: 761px) {
  .search-bar { align-items: center; }
  .search-bar .btn { min-height: 52px; padding: 0 22px; margin-inline-start: 16px; margin-inline-end: 4px; font-size: .95rem; }
}

/* Curseur « marteau de juge » en bois d’acajou (56 px) ; le point actif est sous la tête du marteau levé : au clic, la tête tape ce point.
   Au clic, le marteau frappe (classe is-striking posée par app.js) et une onde bronze part du point d’impact.
   Les champs de saisie gardent leur curseur texte, le glisser-déposer garde sa main. */
html { cursor: url("../images/cursor-gavel.svg") 16 29, auto; }
:where(a[href], button:not(:disabled), [role="button"], summary, select, label[for], input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="file"]) { cursor: url("../images/cursor-gavel.svg") 16 29, pointer; }
:where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="file"], [type="range"], [type="color"]), textarea, [contenteditable="true"]) { cursor: text; }
.is-striking, .is-striking * { cursor: url("../images/cursor-gavel-strike.svg") 16 29, auto !important; }
.is-striking :where(a[href], button, [role="button"], summary, select, label[for], .btn, [data-dropdown-toggle], .combo__trigger) { cursor: url("../images/cursor-gavel-strike.svg") 16 29, pointer !important; }
.gavel-hit { position: fixed; z-index: 9999; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 2px solid var(--gold); pointer-events: none; animation: gavel-hit .42s var(--ease-out) forwards; }
@keyframes gavel-hit { from { transform: scale(.2); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }

/* ======================================================================== Typographie Poppins (police du logo)
   Poppins est plus large et plus haute que l'ancienne serif : tailles réduites, titres en 600 serrés,
   texte courant en 15 px. En arabe, Noto Kufi (géométrique, proche de Poppins) pour tout. */
body { font-size: 15px; line-height: 1.65; }
h1, h2, h3, .title, .kpi__value, .display { font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
h2 { font-size: clamp(1.55rem, 2.7vw, 2.3rem); }
h3 { font-size: 1.15rem; letter-spacing: -.01em; }
.hero--photo .hero__title { font-size: clamp(2.2rem, 4.8vw, 4rem); line-height: 1.06; letter-spacing: -.03em; max-width: 15ch; }
.page-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.8rem); }
.diptych__fr { font-size: clamp(2.2rem, 5vw, 4.6rem); }
.topbar__title { font-size: 1.3rem; }
.fieldset legend { font-size: 1.1rem; }
.spec__name { font-size: 1.2rem; }
.toc__name { font-size: 1.12rem; font-weight: 500; letter-spacing: -.01em; }
.lawyer-card__name { font-size: 1.15rem; font-weight: 600; letter-spacing: -.015em; }
.lawyer-mini__name, .map-card__name { font-size: 1.05rem; font-weight: 600; }
.mobile-nav__links a { font-size: 1.3rem; font-weight: 600; }
.hero__stat strong { font-size: 2.4rem; font-weight: 600; }
.date-pill strong, .date-box strong { font-size: 1.3rem; font-weight: 600; }
.results-count, .mockup__title strong { font-size: 1.3rem; font-weight: 600; }
.plan__price strong { font-size: 2.3rem; font-weight: 700; letter-spacing: -.03em; }
.sub-current__name { font-size: 1.45rem; }
.compare__plan { font-size: 1.12rem; }
.compare__seats td strong { font-size: 1.1rem; }
.step__num { font-size: 4.2rem; font-weight: 700; }
.imp-banner__timer { font-size: 1rem; }
.btn { font-weight: 500; letter-spacing: 0; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .title, [dir="rtl"] .display { font-weight: 700; letter-spacing: 0; line-height: 1.45; }
[dir="rtl"] body, body[dir="rtl"] { font-size: 15px; }
/* Choix du type de consultation (fiche avocat) : « Visioconférence » ne doit pas être coupé en deux */
.segmented--block > label { font-size: .76rem; letter-spacing: -.01em; padding-inline: 6px; overflow-wrap: normal; word-break: normal; hyphens: manual; }