/* Vyneric interface palette — every semantic role has a matched light/dark value. */
:root {
  --ui-canvas: #f5f7f3;
  --ui-surface: #ffffff;
  --ui-raised: #edf1eb;
  --ui-input: #ffffff;
  --ui-text: #17271d;
  --ui-text-strong: #142219;
  --ui-text-muted: #506156;
  --ui-text-subtle: #52645a;
  --ui-border: #87988a;
  --ui-border-soft: #c5d0c6;
  --ui-accent: #dfead7;
  --ui-accent-text: #203425;
  --ui-brand: #1d3c2c;
  --ui-on-brand: #ffffff;
  --ui-control: #eef2ed;
  --ui-control-text: #203126;
  --ui-error-bg: #fff0ed;
  --ui-error-text: #81251d;
  --ui-error-border: #aa4438;
  --ui-success-bg: #eaf5ec;
  --ui-success-text: #205c35;
  --ui-success-border: #52825f;
  --ui-warning-bg: #fff5dd;
  --ui-warning-text: #684900;
  --ui-warning-border: #9b7622;
  --ui-info-bg: #eaf4fa;
  --ui-info-text: #174965;
  --ui-info-border: #49728b;
  --ui-focus: #276d4b;
  --ui-shadow: 0 16px 40px rgba(24, 44, 31, .09);
  --ui-radius: 16px;
}
:root[data-display-mode="dark"] {
  --ui-canvas: #101712;
  --ui-surface: #1a241d;
  --ui-raised: #222e25;
  --ui-input: #111a14;
  --ui-text: #e9f0e9;
  --ui-text-strong: #f7faf6;
  --ui-text-muted: #c1cec2;
  --ui-text-subtle: #b7c5b9;
  --ui-border: #718276;
  --ui-border-soft: #4a5b4e;
  --ui-accent: #324736;
  --ui-accent-text: #e9f1e4;
  --ui-brand: #d2e2c7;
  --ui-on-brand: #17241a;
  --ui-control: #26342a;
  --ui-control-text: #eef4ed;
  --ui-error-bg: #3a211e;
  --ui-error-text: #ffd9d2;
  --ui-error-border: #cf786c;
  --ui-success-bg: #1c3726;
  --ui-success-text: #d5f0db;
  --ui-success-border: #6ba47b;
  --ui-warning-bg: #3a301b;
  --ui-warning-text: #ffedbd;
  --ui-warning-border: #b99b52;
  --ui-info-bg: #1d3040;
  --ui-info-text: #d7edfb;
  --ui-info-border: #6b9bb8;
  --ui-focus: #a8d9b9;
  --ui-shadow: 0 18px 44px rgba(0, 0, 0, .28);
  color-scheme: dark;
}
html { scroll-padding-top: 92px; }
body { background: var(--ui-canvas); color: var(--ui-text); font-size: 1rem; line-height: 1.65; }
.wrap { width: min(var(--wrap), calc(100% - 48px)); }
::selection { background: var(--ui-accent); color: var(--ui-accent-text); }
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 3px; }
:where(p, li, label, small, time, figcaption) { color: inherit; }
.eyebrow, .article-meta, .job-meta, .inner-intro, .section-intro, .hero-intro, .service-card p, .service-detail p, .about-card p, .article-card > p, .job-desc, .article-deck, .approach-copy > p:not(.eyebrow), .application-layout > div:first-child > p:not(.eyebrow), .account-shell > p:not(.eyebrow) { color: var(--ui-text-muted); }
.site-header { min-height: 78px; height: auto; position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--ui-canvas) 94%, transparent); border-color: var(--ui-border-soft); backdrop-filter: blur(16px); }
.header-inner { min-height: 78px; }
.main-nav { gap: clamp(12px, 2vw, 24px); }
.main-nav > a:not(.button), .main-nav .nav-links > a, .main-nav .member-nav-link { color: var(--ui-text-muted); font-size: .9rem; }
.main-nav > a:not(.button):hover, .main-nav .nav-links > a:hover, .main-nav .member-nav-link:hover { color: var(--ui-text-strong); }
.menu-toggle { width: 48px; height: 48px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface); }
.menu-toggle i { width: 21px; height: 2px; display: block; border-radius: 3px; background: var(--ui-text-strong); }
.button { min-height: 48px; padding: 0 20px; border-radius: 999px; font-size: .94rem; gap: 12px; }
.button-dark, .chat-launcher { background: var(--ui-brand); color: var(--ui-on-brand); border-color: var(--ui-brand); }
.button-dark:hover, .chat-launcher:hover { background: color-mix(in srgb, var(--ui-brand) 88%, var(--ui-text-strong)); color: var(--ui-on-brand); }
.button-accent, .skip-link { background: var(--ui-accent); color: var(--ui-accent-text); border-color: var(--ui-border-soft); }
.button-outline { border-color: var(--ui-border); color: var(--ui-text-strong); background: transparent; }
.button-outline:hover { background: var(--ui-control); }
.button-light { background: var(--ui-surface); color: var(--ui-text-strong); border-color: var(--ui-border); }
.hero { background: linear-gradient(130deg, var(--ui-canvas), var(--ui-raised)); color: var(--ui-text); }
.hero h1, .inner-hero h1, .contact-intro h1, .setup-heading h1 { color: var(--ui-text-strong); }
.hero-grid { opacity: .32; }
.hero-intro, .inner-intro, .section-intro, .approach-copy > p:not(.eyebrow) { font-size: 1.03rem; line-height: 1.8; }
.hero-proof, .hero-bottom, .capability-track, .focus-side-note, .focus-number, .art-coordinate { color: var(--ui-text-subtle); }
.art-core, .node { background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border-soft); box-shadow: var(--ui-shadow); }
.node i { background: var(--ui-brand); color: var(--ui-on-brand); }
.capability-bar { background: var(--ui-surface); border-color: var(--ui-border-soft); }
.section { padding-block: clamp(72px, 9vw, 120px); }
.service-grid, .focus-grid { gap: 14px; border: 0; background: transparent; }
.service-card, .about-card, .article-card, .project-content-card, .team-content-grid article, .talent-card, .contact-message, .comment-card, .comment-reply-card, .comment-review, .public-profile-card, .application-form-wrap, .activity-card, .business-card, .location-entry, .admin-metrics > div, .admin-callout, .editor-form, .member-profile-form, .account-form, .setup-card, .setup-login, .admin-login-card, .service-admin-item, .theme-choice, .integration-config, .chat-panel, .reader-settings-panel, .profile-tab-panel { background: var(--ui-surface); color: var(--ui-text); border: 1px solid var(--ui-border-soft); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); }
.service-card { min-height: 260px; padding: 24px; }
.service-card h3 { font-size: 1.3rem; }
.service-card p, .focus-card p, .article-card > p, .job-desc { font-size: .96rem; line-height: 1.72; }
.service-card:hover { background: var(--ui-raised); transform: translateY(-3px); }
.focus-section { background: #16271d; color: #f1f5ef; }
.focus-section .section-heading h2, .focus-card h3 { color: #f5f8f3; }
.focus-card { background: #20372a; border: 1px solid #506458; border-radius: var(--ui-radius); }
.focus-card p, .focus-card .focus-number { color: #d0ddd2; }
.approach-visual { border-radius: 28px; }
.cta-band { background: var(--cta-band-bg); color: var(--cta-band-fg); }
/* site.css pose .cta-band :where(h2,p,.eyebrow,a) { color:#172a2a } — un noir codee
   en dur qui rendait le bandeau illisible en theme sombre (1,24:1). :where() n'a
   aucune specificite, mais la couleur etait fixe : il faut donc la reprendre ici.
   On evite .cta-inner h2/p/a car ce selecteur atteint aussi le bouton, avec une
   specificite (0,2,1) qui l'emporterait sur .cta-band .button-light (0,2,0) et
   renverrait le texte du bouton sur sa propre couleur de fond. */
/* On ne colore que le texte courant, pas les liens. Le bouton du bandeau garde
   ainsi sa propre paire de couleurs : s'il recevait celle du bandeau, il
   serait #eef4ec sur #f7faf5 en theme sombre, soit 1:1. */
.cta-band :where(h2, p, .eyebrow) { color: var(--cta-band-fg); }
.cta-band .cta-inner .eyebrow { color: var(--cta-band-eyebrow); }
/* Le bouton clair doit se lire sur le fond DU BANDEAU. La regle generique
   .button-light utilise --ui-surface / --ui-text-strong, qui valent #1a241d en
   sombre : le texte du bouton se retrouvait identique a son fond, 1:1. */
.cta-band .button-light {
  background: var(--cta-btn-bg);
  color: var(--cta-btn-fg);
  border-color: var(--cta-btn-bg);
}
.cta-band .button-light:hover { background: #ffffff; color: #14201a; border-color: #ffffff; }
.site-footer { background: #14231a; color: #edf3ed; }
.footer-col > a, .footer-brand p, .footer-newsletter > p, .newsletter-consent, .footer-bottom { color: #d0dbd2; }
.inner-hero { padding-block: clamp(58px, 8vw, 96px) clamp(48px, 7vw, 82px); }
.inner-hero h1 { font-size: clamp(2.55rem, 6vw, 5rem); letter-spacing: -.055em; }
.inner-intro { max-width: 64ch; }
/* Menu depose sous 1080px.
   Les liens ne sont plus poses sur des encadres : une seule colonne pleine
   largeur, separee par un trait fin. La version precedente empilait 2 colonnes ;
   un libelle long comme "Parler d'un projet" occupait alors une ligne entiere
   pour lui seul et laissait un vide a cote. Chaque item portait aussi un fond
   gris et une bordure, ce qui alourdissait l'ecran sur telephone. */
@media (max-width: 1280px) {
  .main-nav { position: absolute; inset: calc(100% - 1px) 0 auto; display: none; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 0; width: 100%; max-height: calc(100dvh - 80px - env(safe-area-inset-bottom)); overflow: auto; padding: 8px max(20px, calc((100vw - var(--wrap)) / 2)) 22px; background: var(--ui-surface); border: 1px solid var(--ui-border-soft); border-top: 0; border-radius: 0 0 18px 18px; box-shadow: var(--ui-shadow); }
  .main-nav.is-open { display: grid; }
  /* site.css pose .main-nav.is-open { grid-template-columns: repeat(2, minmax(0,1fr)) }
     — specificite (0,2,0), superieure a celle de .main-nav (0,1,0) : la regle du
     media query ne suffisait pas, et le menu restait sur deux colonnes, avec
     "Parler d'un projet" seul sur sa ligne. On reprend le meme selecteur. */
  .main-nav.is-open { grid-template-columns: minmax(0, 1fr); gap: 0; }
  :root[data-display-mode="dark"] .main-nav.is-open { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .main-nav .nav-links, .main-nav .nav-actions { display: contents; }
  /* Lien de navigation : pas de fond, pas de cadre, seulement un trait de
     separation. La zone cliquable reste confortable (52px mini). */
  .main-nav .nav-links > a, .main-nav .member-nav-link { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 12px 4px; background: none; border: 0; border-top: 1px solid var(--ui-border-soft); border-radius: 0; color: var(--ink); font-size: 1.05rem; font-weight: 600; }
  /* site.css pose :root[data-display-mode="dark"] .main-nav .nav-links > a { background:#151f1b }
     — une specificite (0,4,1) qui l'emporte sur notre (0,2,1). On rejoue donc le
     selecteur a l'identique pour que la source posteriere l'emporte aussi en
     theme sombre : sans ca, chaque item garde son fond gris. */
  :root[data-display-mode="dark"] .main-nav .nav-links > a,
  :root[data-display-mode="dark"] .main-nav .member-nav-link { background: none; color: var(--ink); }
  .main-nav .nav-links > a:first-of-type { border-top: 0; }
  .main-nav .nav-links > a:hover, .main-nav .nav-links > a:focus-visible { background: var(--ui-raised); }
  /* Le bouton d'action reste plein et marque : c'est la seule entree pleine. */
  .main-nav .button, .main-nav .language-select { grid-column: 1 / -1; width: 100%; min-height: 52px; }
  .main-nav .nav-actions .button { margin-top: 16px; }
  .main-nav .language-select { margin-top: 14px; }
  .main-nav .language-select select { width: 100%; min-height: 52px; color: var(--ui-text-strong); background: var(--ui-input); border-color: var(--ui-border); }
}
@media (max-width: 540px) {
  .wrap { width: calc(100% - 32px); }
  .site-header, .header-inner { min-height: 68px; }
  .main-nav { grid-template-columns: minmax(0, 1fr); max-height: calc(100dvh - 70px - env(safe-area-inset-bottom)); padding: 13px 16px calc(18px + env(safe-area-inset-bottom)); }
  .main-nav .button, .main-nav .language-select { grid-column: auto; }
  .hero-layout { min-height: 0; padding-block: 62px 24px; }
  .hero-art { height: 310px; transform: scale(.82); margin-inline: -30px; }
  .hero-bottom { height: 58px; }
  .section { padding-block: 68px; }
  .section-heading { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 30px; }
  .service-grid, .focus-grid, .about-grid { grid-template-columns: minmax(0, 1fr); }
  .service-card { min-height: 210px; }
  .service-card h3 { margin-top: 32px; }
  .focus-card { min-height: 240px; }
  .approach-section { grid-template-columns: minmax(0,1fr); gap: 34px; padding-block: 72px; }
  .approach-visual { height: 300px; }
  .cta-inner { min-height: 0; align-items: flex-start; flex-direction: column; gap: 20px; padding-block: 42px; }
  .footer-main { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .footer-brand { grid-column: auto; }
  .footer-bottom { flex-wrap: wrap; gap: 10px 18px; }
  .admin-shell, .member-shell { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .admin-sidebar, .member-side { position: static; }
  .admin-sidebar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .admin-sidebar > .eyebrow, .admin-sidebar > form { grid-column: 1/-1; }
  .admin-sidebar a, .member-side a { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--ui-border-soft); border-radius: 11px; background: var(--ui-raised); }
  .editor-grid { grid-template-columns: minmax(0,1fr); }
  .reader-settings { position: fixed; z-index: 40; inset-inline-start: max(12px,env(safe-area-inset-left)); inset-inline-end: auto; inset-block-end: max(14px,env(safe-area-inset-bottom)); }
  .reader-settings-toggle { width: 50px; height: 50px; }
  .reader-settings-panel { inset-inline-start: 0; inset-inline-end: auto; inset-block-end: 60px; width: min(360px,calc(100vw - 24px)); max-height: calc(100dvh - 94px - env(safe-area-inset-bottom)); overflow: auto; }
  .chat-widget { inset-inline-end: max(12px,env(safe-area-inset-right)); inset-inline-start: auto; inset-block-end: max(14px,env(safe-area-inset-bottom)); }
  .chat-launcher { width: 54px; min-height: 54px; padding: 0; display: grid; place-items: center; }
  .chat-launcher svg { width: 24px; height: 24px; }
  .chat-panel { width: min(390px,calc(100vw - 24px)); max-height: calc(100dvh - 88px - env(safe-area-inset-bottom)); }
  .phone-country-control { grid-template-columns: minmax(104px,.45fr) minmax(0,1fr); }
}
/* Surfaces and form controls follow the palette tokens in both themes. */
.admin-sidebar, .member-side, .admin-metrics > div, .admin-callout, .editor-form, .member-profile-form, .account-form, .setup-card, .setup-login, .admin-login-card, .contact-form-wrap, .application-form-wrap, .article-search, .article-comments form, .community-composer { background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border-soft); }
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select) { min-height: 48px; padding: 11px 13px; border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-input); color: var(--ui-text-strong); font: inherit; }
:where(input,textarea)::placeholder { color: var(--ui-text-muted); opacity: 1; }
:where(label, legend, th) { color: var(--ui-text-strong); }
.admin-content label, .editor-form label, .member-profile-form label, .account-form label, .setup-card label { gap: 8px; font-size: .96rem; line-height: 1.5; }
:where(.form-alert,.setup-warning,.setup-result,.comment-feedback) { margin-block: 0 16px; padding: 14px 16px; border: 1px solid var(--ui-border-soft); border-inline-start: 5px solid var(--ui-info-border); border-radius: 12px; line-height: 1.55; }
:where(.form-alert.error,.setup-result.is-error,.comment-feedback.error) { background: var(--ui-error-bg); color: var(--ui-error-text); border-color: var(--ui-error-border); }
:where(.form-alert.success,.setup-result.is-success,.comment-feedback.success) { background: var(--ui-success-bg); color: var(--ui-success-text); border-color: var(--ui-success-border); }
:where(.form-alert.warning,.setup-warning) { background: var(--ui-warning-bg); color: var(--ui-warning-text); border-color: var(--ui-warning-border); }
:where(.form-alert.info) { background: var(--ui-info-bg); color: var(--ui-info-text); border-color: var(--ui-info-border); }
.admin-login-card .form-alert, .account-form > .form-alert, .contact-form-wrap > .form-alert, .application-form-wrap > .form-alert { margin: 0 0 18px; }
.avatar-preview-alert { grid-column: 1/-1; width: 100%; margin-block: 12px 0; }
:where(table) { color: var(--ui-text); }
th { background: var(--ui-raised); color: var(--ui-text-strong); }
td { border-color: var(--ui-border-soft); }
.profile-section-nav button, .profile-section-nav a { min-width: 0; min-height: 48px; border-radius: 11px; }
.profile-section-nav button[aria-selected=true] { background: var(--ui-accent); color: var(--ui-accent-text); border-color: var(--ui-border); }
.cv-live-preview, .profile-accordion, .language-builder, .avatar-crop-card { background: var(--ui-raised); color: var(--ui-text); border-color: var(--ui-border-soft); }
.cv-document { background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border-soft); }
.cv-document :where(h1,h2,h3,p,.eyebrow) { color: var(--ui-text); }
.cv-live-preview iframe, .cv-live-preview object { background: #fff; }
.phone-country-control { display: grid; grid-template-columns: minmax(126px,.42fr) minmax(0,1fr); gap: 8px; }
.phone-country-control select { min-width: 0; }
.avatar-preview-frame { background: var(--ui-raised); color: var(--ui-text-muted); border-color: var(--ui-border); }
.profile-avatar-icon, .avatar-preview-frame > img, .cv-avatar { width: 64px; height: 64px; flex: 0 0 64px; display: block; object-fit: cover; border-radius: 50%; background: var(--ui-raised); border: 1px solid var(--ui-border-soft); }
.avatar-preview-frame > img { width: 156px; height: 156px; max-width: 100%; }
.cv-avatar-frame { overflow: hidden; border-radius: 50%; background: var(--ui-raised); }
.community-post-head { display: flex; align-items: center; gap: 12px; }
.community-post-head time { margin-inline-start: auto; color: var(--ui-text-muted); }
.comment-author { display: flex; align-items: center; gap: 10px; }
.comment-author .profile-avatar-icon { width: 42px; height: 42px; flex-basis: 42px; }
/* Keep floating reading preferences opposite the always-available team chat. */
.reader-settings { position: fixed; z-index: 40; inset-inline-start: max(18px,env(safe-area-inset-left)); inset-inline-end: auto; inset-block-end: max(18px,env(safe-area-inset-bottom)); }
.reader-settings-toggle { width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid var(--ui-border); border-radius: 50%; background: var(--ui-surface); color: var(--ui-text-strong); box-shadow: var(--ui-shadow); }
.reader-settings-toggle svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.reader-settings-panel { inset-inline-start: 0; inset-inline-end: auto; inset-block-end: 60px; max-height: min(75dvh,660px); overflow: auto; background: var(--ui-surface); color: var(--ui-text); }
.reader-settings-panel fieldset { border-color: var(--ui-border-soft); }
.reader-settings-panel fieldset button { min-width: 44px; min-height: 44px; border-color: var(--ui-border); border-radius: 9px; background: var(--ui-control); color: var(--ui-control-text); }
.reader-settings-panel :where(p,legend,label) { color: var(--ui-text-muted); }
.chat-widget { position: fixed; z-index: 41; inset-inline-end: max(18px,env(safe-area-inset-right)); inset-inline-start: auto; inset-block-end: max(18px,env(safe-area-inset-bottom)); }
.chat-launcher { width: 58px; min-height: 58px; padding: 0; display: grid; place-items: center; position: relative; border-radius: 50%; box-shadow: var(--ui-shadow); }
.chat-launcher svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chat-status { width: 9px; height: 9px; display: block; border: 2px solid var(--ui-surface); border-radius: 50%; background: #3d9b5b; }
.chat-launcher .chat-status { position: absolute; inset-block-start: 3px; inset-inline-end: 3px; }
.chat-panel { position: absolute; inset-inline-end: 0; inset-block-end: 70px; width: min(390px,calc(100vw - 32px)); max-height: min(680px,calc(100dvh - 100px)); overflow: auto; }
.chat-panel :where(p,small,label) { color: var(--ui-text); }
.chat-panel .chat-result { margin-block: 10px 0; }
.innovation-entry-link { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; margin-block-start: 20px; padding: 9px 16px; border: 1px solid var(--ui-border); border-radius: 999px; color: var(--ui-text-strong); background: var(--ui-surface); }
.innovation-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.8fr); align-items: center; gap: clamp(28px,6vw,86px); padding-block: clamp(48px,7vw,88px); }
.innovation-atom { width: min(100%,440px); justify-self: center; overflow: visible; }
.innovation-atom .atom-orbit { fill: none; stroke: var(--ui-border); stroke-width: 1.4; opacity: .8; transform-origin: 200px 200px; }
.innovation-atom .atom-orbit--one { transform: rotate(-28deg); }
.innovation-atom .atom-orbit--two { transform: rotate(32deg); }
.innovation-atom .atom-orbit--three { transform: rotate(90deg); }
.innovation-atom .atom-core { fill: var(--ui-brand); }
.innovation-atom .atom-electron { fill: #789c61; transform-origin: 200px 200px; animation: atom-spin 12s linear infinite; }
.innovation-atom .atom-electron--two { animation-duration: 16s; animation-direction: reverse; }
.innovation-atom .atom-electron--three { animation-duration: 19s; }
@keyframes atom-spin { to { transform: rotate(360deg); } }
.innovation-topic-row { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 22px; }
.innovation-topic-row span { min-height: 38px; display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid var(--ui-border-soft); border-radius: 999px; color: var(--ui-text-strong); background: var(--ui-raised); }
:root[data-display-mode="dark"] .hero { background: linear-gradient(130deg,#17211a,#131b16 60%,#1d2a20); }
:root[data-display-mode="dark"] .hero-grid { opacity: .45; background-image: linear-gradient(rgba(201,220,201,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(201,220,201,.12) 1px,transparent 1px); }
:root[data-display-mode="dark"] .art-core { background: #202d24; border-color: #708171; }
:root[data-display-mode="dark"] .core-v, :root[data-display-mode="dark"] .focus-section :where(h2,h3) { color: var(--ui-text-strong); }
:root[data-display-mode="dark"] .node { background: #202d24; border-color: var(--ui-border); color: var(--ui-text); }
:root[data-display-mode="dark"] .node i { background: var(--ui-brand); color: var(--ui-on-brand); }
:root[data-display-mode="dark"] .orbit, :root[data-display-mode="dark"] .approach-ring, :root[data-display-mode="dark"] .approach-ring::before, :root[data-display-mode="dark"] .approach-ring::after { border-color: #728477; }
:root[data-display-mode="dark"] .approach-ring > span { color: var(--ui-text-strong); }
:root[data-display-mode="dark"] .focus-section { background: #0e1510; }
:root[data-display-mode="dark"] .focus-card { background: #1a2820; border-color: #516455; }
:root[data-display-mode="dark"] .focus-card p, :root[data-display-mode="dark"] .focus-card .focus-number { color: #c8d5ca; }
:root[data-display-mode="dark"] .site-footer { background: #0b120d; }
/* Le bandeau d'appel a son propre fond, distinct de la page : en mode sombre il
   reste vert, mais plus sourd. Sans ces deux variables, la regle sombre
   ci-dessous ne changeait que le fond — la couleur du texte, elle, restait
   calculee pour le fond clair. Resultat : titre a 1,24:1, invisible.
   On lie donc fond ET texte dans le meme couple, par theme. */
:root {
  --cta-band-bg: var(--ui-accent);
  --cta-band-fg: var(--ui-accent-text);
  --cta-band-eyebrow: #59674c;
  --cta-btn-bg: var(--ui-accent-text);
  --cta-btn-fg: var(--ui-accent);
}

:root[data-display-mode="dark"] {
  --cta-band-bg: #2a3a2d;
  --cta-band-fg: #eef4ec;
  --cta-band-eyebrow: #a9bb9f;
  /* Le bouton ne peut pas reprendre la couleur du texte du bandeau : celle-ci
     vaut #eef4ec, exactement son fond. D'ou 1:1, un bouton efface. Il lui faut un
     ton a part, assez clair pour ressortir sur le vert du bandeau. */
  --cta-btn-bg: #f7faf5;
  --cta-btn-fg: #1c2a1f;
}
:root[data-display-mode="dark"] .service-card:hover { background: #26342a; }
:root[data-display-mode="dark"] .profile-section-nav button[aria-selected="true"] { background: var(--ui-accent); color: var(--ui-accent-text); border-color: var(--ui-border); }
:root[data-display-mode="dark"] .cv-live-preview iframe, :root[data-display-mode="dark"] .cv-live-preview object { background: #fff; }
:root[data-display-mode="dark"] .innovation-atom .atom-electron { fill: #c8dfa9; }
:root[data-display-mode="dark"] .table-wrap { background: var(--ui-surface); }
@media (max-width: 900px) { .innovation-hero { grid-template-columns: minmax(0,1fr); } .innovation-atom { width: min(72vw,340px); grid-row: 1; } }
@media (prefers-reduced-motion: reduce) { .innovation-atom .atom-electron { animation: none; } }
@media print { .chat-widget, .reader-settings, .site-header, .site-footer { display: none !important; } }

/* Innovation journal: calm editorial hierarchy and a motion-safe atom motif. */
.innovation-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr);align-items:center;gap:clamp(32px,7vw,100px);padding-block:clamp(48px,8vw,112px);min-height:440px}
.innovation-copy h1{max-width:780px;margin:.45em 0;font-size:clamp(2.8rem,7vw,6.2rem);line-height:.98;letter-spacing:-.055em}
.innovation-copy .inner-intro{max-width:620px;margin:1.5rem 0 2rem}
.innovation-atom{position:relative;justify-self:center;width:min(35vw,340px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--ui-raised) 0 30%,transparent 31%);isolation:isolate}
.atom-core{position:absolute;left:50%;top:50%;width:25px;height:25px;transform:translate(-50%,-50%);border-radius:50%;background:var(--ui-brand);box-shadow:0 0 38px color-mix(in srgb,var(--ui-brand) 36%,transparent)}
.atom-orbit{position:absolute;inset:16%;border:1px solid var(--ui-border);border-radius:50%;}
.innovation-atom .orbit-one{transform:rotate(0deg) scaleY(.45)}.innovation-atom .orbit-two{transform:rotate(60deg) scaleY(.45)}.innovation-atom .orbit-three{transform:rotate(-60deg) scaleY(.45)}
.atom-orbit::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;offset-path:ellipse(42% 22% at 50% 50%);offset-distance:0%;border-radius:50%;background:var(--ui-focus);box-shadow:0 0 0 5px var(--ui-surface),0 0 18px var(--ui-focus)}
.innovation-atom .orbit-one::after{animation:atom-drift 12s linear infinite}.innovation-atom .orbit-two::after{animation:atom-drift 16s linear infinite reverse}.innovation-atom .orbit-three::after{animation:atom-drift 20s linear infinite}
@keyframes atom-drift{to{offset-distance:100%}}
.atom-label{position:absolute;padding:.4rem .65rem;border:1px solid var(--ui-border-soft);border-radius:999px;background:var(--ui-surface);color:var(--ui-text);font-size:.68rem;font-weight:700;letter-spacing:.12em}.atom-label-one{top:6%;left:18%}.atom-label-two{right:-3%;top:46%}.atom-label-three{bottom:9%;left:25%}
.innovation-feed{padding-block:2rem 6rem}.innovation-feed-heading{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:1.5rem;border-bottom:1px solid var(--ui-border-soft);padding-bottom:1rem}.innovation-feed-heading h2{margin:.35rem 0 0;font-size:clamp(1.7rem,3vw,2.5rem)}.innovation-count{color:var(--ui-text-muted);font-variant-numeric:tabular-nums}
.innovation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}.innovation-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--ui-border-soft);border-radius:var(--ui-radius);background:var(--ui-surface);color:var(--ui-text);text-decoration:none;transition:border-color .2s,transform .2s,background .2s}.innovation-card:hover{border-color:var(--ui-focus);transform:translateY(-3px)}.innovation-card-media{display:grid;place-items:center;aspect-ratio:16/9;overflow:hidden;background:var(--ui-raised);color:var(--ui-text-muted);font-weight:700}.innovation-card-media img{width:100%;height:100%;object-fit:cover}.innovation-card-body{display:flex;flex:1;flex-direction:column;padding:1.25rem}.innovation-card h3{margin:.8rem 0 .5rem;font-size:1.25rem;line-height:1.25}.innovation-card p{color:var(--ui-text-muted);line-height:1.6}.innovation-card .article-read{margin-top:auto;padding-top:1rem}.innovation-empty{display:flex;gap:1.25rem;align-items:flex-start;padding:clamp(1.25rem,4vw,2.5rem);border:1px solid var(--ui-border-soft);border-radius:var(--ui-radius);background:var(--ui-surface)}.innovation-empty-icon{display:grid;place-items:center;flex:0 0 48px;height:48px;border-radius:50%;background:var(--ui-raised);color:var(--ui-brand);font-size:1.5rem}.innovation-empty h3{margin:0 0 .5rem}.innovation-empty p{max-width:680px;color:var(--ui-text-muted);line-height:1.65}.innovation-empty a{display:inline-block;margin-top:.4rem;font-weight:700;color:var(--ui-brand)}
@media(max-width:760px){.innovation-hero{grid-template-columns:1fr;min-height:0}.innovation-atom{width:min(70vw,280px);grid-row:1}.innovation-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.innovation-grid{grid-template-columns:1fr}.innovation-feed-heading{align-items:flex-start;flex-direction:column}.innovation-hero{gap:2rem}.innovation-empty{gap:.8rem;padding:1rem}}
@media(prefers-reduced-motion:reduce){.atom-orbit::after{animation:none}.innovation-card{transition:none}.innovation-card:hover{transform:none}}

/* Keep controls separated at wide widths too; both floaters remain reachable. */
.innovation-journal-link{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:0 0 1.4rem;padding:12px 16px;border:1px solid var(--ui-border-soft);border-radius:12px;background:var(--ui-raised);color:var(--ui-text-strong)}.innovation-journal-link a{color:var(--ui-brand);font-weight:700}.innovation-hero .button{margin-block:0}

/* Role based member CRM and readable permission editor. */
.member-work-nav{display:grid;width:100%;gap:6px;margin-block:8px 12px}.member-work-nav>a{display:flex;align-items:center;gap:10px;min-height:46px;padding:9px 12px;border:1px solid var(--ui-border-soft);border-radius:11px;background:var(--ui-surface);color:var(--ui-text-strong);text-decoration:none;font-weight:650}.member-work-nav>a:hover,.member-work-nav>a:focus-visible{background:var(--ui-accent);border-color:var(--ui-border)}.member-work-nav>a>span{width:24px;text-align:center;color:var(--ui-brand);font-size:1.1rem}.member-role-badge{padding:6px 10px;border:1px solid var(--ui-border-soft);border-radius:99px;background:var(--ui-raised);font-size:.84rem;font-weight:650;text-transform:capitalize}.member-profile-menu{width:100%;border:1px solid var(--ui-border-soft);border-radius:12px;background:var(--ui-surface)}.member-profile-menu>summary{padding:12px 14px;color:var(--ui-text-strong);font-weight:700;cursor:pointer}.member-profile-menu .profile-section-nav{padding:0 8px 8px}.member-profile-menu .profile-section-nav button{font-size:.9rem}.member-activity-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}.member-activity-grid>section{min-width:0;padding:18px;border:1px solid var(--ui-border-soft);border-radius:12px;background:var(--ui-surface)}.member-activity-grid h3{margin-top:0;color:var(--ui-text-strong)}.member-activity-grid ul{display:grid;gap:12px;padding-inline-start:20px}.member-activity-grid li{color:var(--ui-text-muted)}.member-activity-grid li>a{color:var(--ui-brand);font-weight:650}.member-activity-grid li form{display:inline-block;margin-inline-start:8px}.member-profile-form[data-can-profile-edit="false"] .profile-form-actions{display:none}.member-profile-form :disabled{opacity:1;color:var(--ui-text-muted);-webkit-text-fill-color:var(--ui-text-muted)}.permission-editor{min-width:220px}.permission-editor summary{min-height:42px;padding:9px 11px;border:1px solid var(--ui-border-soft);border-radius:9px;background:var(--ui-raised);color:var(--ui-text-strong);cursor:pointer}.permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:12px}.permission-grid label{display:flex;align-items:center;gap:9px;min-width:0;color:var(--ui-text);font-size:.88rem}.permission-grid input{width:18px;height:18px;flex:0 0 18px}.admin-users-table .inline-admin-update{align-items:flex-start;flex-wrap:wrap}.admin-users-table .permission-editor{flex-basis:100%}.admin-users-table .permission-grid{grid-template-columns:minmax(0,1fr)}
@media(max-width:760px){.member-activity-grid{grid-template-columns:minmax(0,1fr)}.member-work-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.member-work-nav>a{min-width:0;padding:8px;font-size:.89rem}.member-profile-menu{grid-column:1/-1}}

.admin-system-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-block:20px}.system-table-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;padding:0;list-style:none}.system-table-list li{display:flex;align-items:center;gap:8px;min-width:0;color:var(--ui-text-muted);font-size:.88rem;overflow-wrap:anywhere}.system-state{display:grid;place-items:center;width:24px;height:24px;flex:0 0 24px;border:1px solid currentColor;border-radius:50%;font-weight:800}.system-state.is-ok{color:var(--ui-success-text);background:var(--ui-success-bg)}.system-state.is-error{color:var(--ui-error-text);background:var(--ui-error-bg)}.system-diagnostic-form{display:flex;justify-content:space-between;align-items:center;gap:20px}.system-diagnostic-form h2{margin-block:0 5px}.system-diagnostic-form p{margin-block:0;color:var(--ui-text-muted)}
@media(max-width:760px){.admin-system-grid{grid-template-columns:minmax(0,1fr)}.system-table-list{grid-template-columns:minmax(0,1fr)}.system-diagnostic-form{align-items:stretch;flex-direction:column}}

.admin-sidebar a[hidden]{display:none!important}

/* Homepage sections: the grid itself stays clear, so no band shows under the cards. */
#capabilities { padding-bottom: clamp(36px, 5vw, 64px); }
#capabilities .section-heading { gap: clamp(18px, 3vw, 40px); margin-bottom: 28px; }
.focus-section { padding: clamp(48px, 6vw, 76px) 0; background: #16271d; }
.focus-section .section-heading { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 24px; }
.service-grid,
.focus-grid,
:root[data-display-mode="dark"] .service-grid,
:root[data-display-mode="dark"] .focus-grid{
  gap: 16px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.focus-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.service-card,
.focus-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  min-height: 0;
  margin: 0;
  padding: 24px;
}
.service-card h3,
.focus-card h3,
.service-card p,
.focus-card p,
.focus-icon,
.focus-arrow,
.focus-number {
  position: static;
  inset: auto;
  max-width: none;
  margin: 0;
}
.card-index { margin: 0; color: var(--ui-text-subtle); }
.card-glyph,
.proof-icons svg {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card-glyph circle { fill: currentColor; stroke: none; }
.service-card .card-glyph { color: var(--ui-brand); }
.focus-card .card-glyph { width: 32px; height: 32px; color: #d7e4cf; }
.service-card h3,
.focus-card h3 { font-size: 1.2rem; line-height: 1.25; letter-spacing: -.03em; }
.service-card p,
.focus-card p { font-size: .98rem; line-height: 1.65; }
.hero-proof { display: flex; align-items: center; gap: 14px; }
.proof-icons { display: inline-flex; align-items: center; gap: 14px; }
.proof-icons svg { width: 18px; height: 18px; color: var(--ui-text-subtle); }
.hero-copy { padding: 28px 0 36px; }
.section { padding-block: clamp(64px, 8vw, 104px); }
.approach-section { padding-block: clamp(56px, 7vw, 88px); gap: clamp(32px, 5vw, 72px); }
:root[data-display-mode="dark"] .service-card,
:root[data-display-mode="dark"] .service-card h3{
  background: var(--ui-surface);
  color: var(--ui-text-strong);
}
:root[data-display-mode="dark"] .service-card p,
:root[data-display-mode="dark"] .section-intro,
:root[data-display-mode="dark"] .hero-intro,
:root[data-display-mode="dark"] .eyebrow,
:root[data-display-mode="dark"] .approach-copy > p:not(.eyebrow){
  color: var(--ui-text-muted);
}
:root[data-display-mode="dark"] .section-heading h2,
:root[data-display-mode="dark"] h1,
:root[data-display-mode="dark"] h2{
  color: var(--ui-text-strong);
}
:root[data-display-mode="dark"] .focus-section{
  background: #0e1510;
  color: #f4f7f2;
}
:root[data-display-mode="dark"] .focus-card,
:root[data-display-mode="dark"] .focus-card h3{
  background: #1a2820;
  color: #f7faf6;
}
:root[data-display-mode="dark"] .focus-card p{ color: #c9d5cb; }
:root[data-display-mode="dark"] .service-card .card-glyph{ color: #d5e3cc; }
@media (max-width: 950px) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .focus-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .service-grid { grid-template-columns: minmax(0, 1fr); }
  .service-card, .focus-card { padding: 20px; }
  #capabilities, .focus-section, .section { padding-block: 48px; }
}

/* ============================================================
   Footer — refonte responsive (2026-09-28)
   ============================================================ */

/* ---------- Base : 4 colonnes sur PC ---------- */
.site-footer {
  padding-top: clamp(40px, 6vw, 64px);
}

.footer-main {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.5fr;
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(30px, 5vw, 55px);
}

.footer-brand { min-width: 0; }

.footer-brand p {
  margin: 16px 0 0;
  color: #91a099;
  font-size: .9rem;
  line-height: 1.6;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.footer-col .eyebrow {
  margin: 0 0 4px;
  color: #9ca8a0;
}
.footer-col > a {
  font-size: .95rem;
  color: #cfd8d1;
  transition: color .2s;
  overflow-wrap: anywhere;
}
.footer-col > a:hover {
  color: var(--lime);
}

.footer-newsletter { min-width: 0; }
.footer-newsletter > .eyebrow {
  margin: 0 0 6px;
  color: #9ca8a0;
}
.footer-newsletter > p {
  margin: 0 0 10px;
  color: #91a099;
  font-size: .9rem;
  line-height: 1.55;
}
.newsletter-frequency {
  font-size: .82rem !important;
  /* #79897f ne tenait que 4,43:1 sur le fond du pied de page (#14231a), pour
     4,5:1 requis : le texte de la frequence d'envoi etait le seul element du
     site sous le seuil AA. On eclaircit le ton ; le !important reste pose
     parce que la regle concurrente de site.css l'exigeait. */
  color: #9fb3a8 !important;
}

.footer-newsletter form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 6px;
}
.newsletter-email { width: 100%; }
.newsletter-email input {
  width: 100%;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid rgba(232,241,232,.22);
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  color: #fff;
  font-size: .95rem;
}
.newsletter-email input::placeholder { color: #93a097; }
.newsletter-email input:focus {
  border-color: var(--lime);
  outline: none;
  background: rgba(255,255,255,.08);
}
.newsletter-consent {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: #93a097;
  font-size: .85rem;
  line-height: 1.5;
}
.newsletter-consent input {
  accent-color: var(--lime);
  margin-top: 3px;
}

.footer-newsletter form > button {
  align-self: flex-start;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid rgba(232,241,232,.22);
  border-radius: 999px;
  background: transparent;
  color: var(--lime);
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.footer-newsletter form > button:hover {
  background: rgba(255,255,255,.06);
  border-color: var(--lime);
}

.newsletter-feedback { color: var(--lime) !important; font-size: .9rem !important; }
.newsletter-error { color: #f3aa87 !important; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid rgba(235,245,231,.13);
  color: #798a81;
  font-size: .85rem;
}

/* ---------- Tablette : 2 colonnes (< 900px) ---------- */
@media (max-width: 900px) {
  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 28px 24px;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
  .footer-newsletter {
    grid-column: 1 / -1;
    max-width: 520px;
  }
}

/* ---------- Smartphone : 1 colonne (< 520px) ---------- */
@media (max-width: 520px) {
  .footer-main {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-bottom: 28px;
  }
  .footer-brand,
  .footer-newsletter {
    grid-column: auto;
  }
  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .footer-newsletter form > button {
    width: 100%;
    text-align: center;
  }
}

/* ---------- Dark mode ---------- */
:root[data-display-mode="dark"] .footer-newsletter form > button {
  border-color: rgba(200,220,200,.25);
}
:root[data-display-mode="dark"] .newsletter-email input {
  background: rgba(0,0,0,.2);
}



/* ============================================================
   Header responsive — refonte 2026-09-28
   ============================================================ */

/* ---------- Conteneur ---------- */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 28px);
  min-height: 78px;
}

/* ---------- Marque ---------- */
.brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.4375rem;
  font-weight: 800;
  letter-spacing: -1.5px;
  color: var(--ink);
}
.brand-mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--ink);
  color: var(--lime);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  transform: rotate(-7deg);
}
.brand-dot { color: #9abd38; }

/* ---------- Hamburger ---------- */
.menu-toggle {
  flex: 0 0 auto;
  display: none;
  width: 46px;
  height: 46px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background .2s;
}
.menu-toggle:hover { background: var(--paper-2); }
.menu-toggle i {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .22s ease;
}
.menu-toggle[aria-expanded="true"] i:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] i:last-child  { transform: translateY(-4px) rotate(-45deg); }

/* ---------- Navigation principale ---------- */
.main-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(12px, 1.8vw, 26px);
}

.main-nav .nav-links {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 26px);
  min-width: 0;
}
.main-nav .nav-links > a {
  font-size: .9rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  transition: color .2s;
}
.main-nav .nav-links > a:hover { color: var(--ink); }

.main-nav .nav-actions {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 16px);
  min-width: 0;
}

/* ---------- CTA "Parler d'un projet" ---------- */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.nav-cta-arrow { font-size: 1rem; line-height: 1; }

/* ---------- Session membre ---------- */
.member-nav-link {
  font-size: .9rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  transition: color .2s;
}
.member-nav-link:hover { color: var(--ink); }

/* Menu utilisateur (avatar + nom + dropdown) */
.member-menu { position: relative; }
.member-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s;
}
.member-menu-toggle:hover { border-color: var(--ink); }
.member-menu-toggle svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  transition: transform .2s;
}
.member-menu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.member-menu-avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--lime);
  font-weight: 700;
  font-size: .875rem;
}
.member-menu-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 220px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 16px 40px rgba(24,44,31,.12);
  z-index: 60;
}
.member-menu-panel[hidden] { display: none; }
.member-menu-panel a,
.member-menu-panel button {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  text-align: start;
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  transition: background .15s;
}
.member-menu-panel a:hover,
.member-menu-panel button:hover { background: var(--paper-2); }
.member-menu-signout { color: #a34431 !important; font-weight: 600; }

/* ---------- Sélecteur de langue (icône + chevron) ---------- */
.language-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.language-select svg {
  position: absolute;
  inset-inline-start: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  pointer-events: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--muted);
  transition: color .2s;
}
/* Selecteur de langue — la regle qui suivait masquait l'apparence et dessinait
   une fleche en data-uri, avec une couleur codee en dur (#52615a) : elle ne suivait
   pas le theme sombre et s'ajoutait a la fleche native. Les deux marques se
   superposaient. On supprime cette fabrication et on laisse la fleche native faire
   son travail (voir la regle plus bas). */
.language-select select {
  width: auto;
  min-width: 130px;
  max-width: 180px;
  min-height: 42px;
  /* 34 px a gauche : le globe est en position absolute a 10 px du bord, il faut
     donc lui reserver sa place, sinon le texte passe dessous. 32 px a droite
     pour la fleche native. */
  padding-block: 8px;
  padding-inline: 34px 32px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
}
/* Le globe est en positionnement absolu, pose a 10 px du bord gauche du label.
   Le select doit donc lui reserver cette place, sinon le texte passe dessous.
   D'ou le padding-left de 34 px. */
.language-select select:hover { border-color: var(--ink); }
.language-select select:focus-visible { outline: 3px solid var(--focus-ring, #54752a); outline-offset: 2px; }
.language-select:hover svg { color: var(--ink); }

@media (max-width: 700px) {
  .main-nav .language-select { grid-column: 1 / -1; width: 100%; padding: 8px 0; }
  .main-nav .language-select select { width: 100%; max-width: none; }
}

/* ============================================================
   Tablette (< 1080px) — menu déroulant sur une colonne
   ============================================================ */
@media (max-width: 1280px) {
  .menu-toggle { display: flex; }

  .main-nav {
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    right: 0;
    display: none;
    /* Une colonne, et non deux : sur deux colonnes, un libelle long comme
       "Parler d'un projet" prenait une ligne entiere pour lui seul et laissait
       un vide en face. Ce bloc duplique le bloc plus haut (lignes ~141) : les
       deux doivent concorder, sinon le dernier lu l'emporte. */
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    padding: 8px max(20px, calc((100vw - var(--wrap, 1180px)) / 2)) 22px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 16px 40px rgba(24,44,31,.09);
    max-height: calc(100dvh - 80px - env(safe-area-inset-bottom));
    overflow: auto;
  }
  .main-nav.is-open { display: grid; }
  /* Une colonne : site.css impose .main-nav.is-open a deux colonnes avec une
     specificite (0,2,0), superieure a celle de .main-nav. */
  .main-nav.is-open { grid-template-columns: minmax(0, 1fr); gap: 0; }
  :root[data-display-mode="dark"] .main-nav.is-open { grid-template-columns: minmax(0, 1fr); gap: 0; }

  .main-nav .nav-links,
  .main-nav .nav-actions { display: contents; }

  /* Cellules de liens : meme treatment que le bloc plus haut — pas d'encadre,
     pas de fond, seulement un trait de separation. Ce bloc duplique celui de la
     ligne ~147 : les deux doivent dire la meme chose, sinon le dernier lu
     l'emporte et les encadres reviennent. */
  .main-nav .nav-links > a,
  .main-nav .member-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 12px 4px;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: none;
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 600;
    transition: background .2s, color .2s;
  }
  .main-nav .nav-links > a:first-of-type { border-top: 0; }
  .main-nav .nav-links > a:hover,
  .main-nav .member-nav-link:hover {
    background: var(--paper-2);
    color: var(--ink);
  }

  /* CTA pleine largeur */
  .main-nav .nav-cta,
  .main-nav .button {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 52px;
    justify-content: center;
    font-size: .95rem;
  }

  /* Menu utilisateur pleine largeur */
  .main-nav .member-menu {
    grid-column: 1 / -1;
    width: 100%;
  }
  .main-nav .member-menu-toggle {
    width: 100%;
    justify-content: flex-start;
    min-height: 52px;
    padding: 6px 14px 6px 6px;
  }
  .main-nav .member-menu-name { max-width: none; }

  /* Sélecteur de langue pleine largeur */
  .main-nav .language-select {
    grid-column: 1 / -1;
    width: 100%;
  }
  .main-nav .language-select select {
    width: 100%;
    max-width: none;
    min-height: 50px;
    padding-block: 12px;
    padding-inline: 38px 36px;
    font-size: .95rem;
  }
  .main-nav .language-select svg {
    inset-inline-start: 14px;
    width: 18px;
    height: 18px;
  }
}

/* ============================================================
   Smartphone (< 640px) — menu 1 colonne
   ============================================================ */
@media (max-width: 640px) {
  .header-inner { min-height: 68px; gap: 10px; }
  .brand { font-size: 1.2rem; letter-spacing: -1px; }
  .brand-mark { width: 28px; height: 28px; font-size: 1.2rem; border-radius: 8px; }
  .menu-toggle { width: 44px; height: 44px; }

  .main-nav {
    grid-template-columns: 1fr;
    max-height: calc(100dvh - 70px - env(safe-area-inset-bottom));
    padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
  }
  .main-nav .nav-cta,
  .main-nav .button,
  .main-nav .language-select,
  .main-nav .member-menu { grid-column: auto; }
  .main-nav .nav-links > a,
  .main-nav .member-nav-link { font-size: 1rem; }
}

/* ============================================================
   Très petits écrans (< 400px)
   ============================================================ */
@media (max-width: 400px) {
  .main-nav { padding-inline: 12px; gap: 8px; }
  .main-nav .nav-cta,
  .main-nav .button { font-size: .9rem; padding-inline: 14px; }
  .nav-cta-arrow { display: none; }
}

/* ============================================================
   Dark mode
   ============================================================ */
:root[data-display-mode="dark"] .menu-toggle {
  background: #1a2726;
  color: #f1f3ee;
  border-color: #52615a;
}
:root[data-display-mode="dark"] .main-nav.is-open {
  background: #111b1b;
  border-color: #52615a;
}
:root[data-display-mode="dark"] .main-nav .nav-links > a,
:root[data-display-mode="dark"] .main-nav .member-nav-link {
  color: #edf3ed;
  border-color: #52615a;
  /* Pas de fond ici. Ces regles ne sont pas dans une media query, donc elles
     s'appliquent aussi au menu depose, ou chaque item dessinait un encadre
     gris : la regle du media query, plus tard, ne les neutralisait pas a elle
     seule, car une couleur codee en dur ici l'emportait sur son "background:none".
     Le fond du pave reste pose plus haut (--ui-surface). */
}
:root[data-display-mode="dark"] .main-nav .nav-links > a:hover,
:root[data-display-mode="dark"] .main-nav .member-nav-link:hover {
  background: #24332e;
  border-color: #a8b6ab;
}

:root[data-display-mode="dark"] .member-menu-toggle {
  background: #1a2726;
  color: #edf3ed;
  border-color: #52615a;
}
:root[data-display-mode="dark"] .member-menu-panel {
  background: #1a2726;
  border-color: #52615a;
}
:root[data-display-mode="dark"] .member-menu-panel a,
:root[data-display-mode="dark"] .member-menu-panel button {
  color: #edf3ed;
}
:root[data-display-mode="dark"] .member-menu-panel a:hover,
:root[data-display-mode="dark"] .member-menu-panel button:hover {
  background: #24332e;
}
:root[data-display-mode="dark"] .language-select svg { color: #b7c5b9; }
:root[data-display-mode="dark"] .language-select select {
  background: #1a2726;
  color: #edf3ee;
  border-color: #52615a;
  /* Pas de background-image ici, et c'est volontaire. La variante sombre
     redessinait une fleche en data-uri, avec une couleur codee en dur, qui
     s'ajoutait a la fleche native : deux marques superposees. La regle claire
     ne le fait plus, donc rien ici non plus — la fleche native s'adapte seule
     au fond sombre, comme le reste du navigateur. */
}

/* Diagnostic d'exécution (/admin/diagnostics). La page doit rester lisible quand le reste est
   tombé : tout ce qui sort du tampon (routes demandées, messages d'exception, piles) est une
   donnée non fiable et ne doit jamais pouvoir déformer la mise en page — d'où les largeurs
   minimales, le `overflow-wrap` systématique et les colonnes qui défilent sans casser la page. */
.diag-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 0 0 18px; padding: 16px; border: 1px solid var(--ui-border-soft); border-radius: var(--ui-radius); background: var(--ui-surface); }
.diag-toolbar label { display: grid; gap: 5px; font-size: .75rem; font-weight: 700; color: var(--ui-text-muted); }
.diag-toolbar select, .diag-toolbar input { min-width: 190px; padding: 9px 10px; border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-input); color: var(--ui-text); font: inherit; font-weight: 400; }
.diag-live-status { margin: 0 0 16px; font-size: .8rem; color: var(--ui-text-muted); }
.diag-checks, .diag-tally { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.diag-check, .diag-tally li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--ui-border-soft); border-left: 4px solid var(--ui-border); border-radius: 10px; background: var(--ui-raised); }
.diag-check b, .diag-tally code { font-size: .84rem; color: var(--ui-text-strong); overflow-wrap: anywhere; }
.diag-check span { flex: 1 1 240px; font-size: .78rem; color: var(--ui-text-muted); overflow-wrap: anywhere; }
.diag-check.is-ok { border-left-color: var(--ui-success-border); }
.diag-check.is-bad { border-left-color: var(--ui-error-border); background: var(--ui-error-bg); color: var(--ui-error-text); }
.diag-check.is-bad span { color: var(--ui-error-text); }
.diag-tally li { font-size: .78rem; color: var(--ui-text-muted); }
.diag-scroll { overflow-x: auto; }
.diag-table { width: 100%; font-size: .8rem; }
.diag-table th, .diag-table td { vertical-align: top; }
.diag-time { white-space: nowrap; color: var(--ui-text-muted); }
.diag-detail { min-width: 260px; overflow-wrap: anywhere; }
.diag-detail details { margin-top: 6px; }
.diag-detail summary { cursor: pointer; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ui-text-subtle); }
.diag-detail pre { margin: 8px 0 0; padding: 10px; border: 1px solid var(--ui-border-soft); border-radius: 8px; background: var(--ui-raised); font-size: .74rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.diag-level { display: inline-block; padding: 3px 8px; border: 1px solid var(--ui-border-soft); border-radius: 999px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.diag-level-error { border-color: var(--ui-error-border); background: var(--ui-error-bg); color: var(--ui-error-text); }
.diag-level-warn { border-color: var(--ui-warning-border); background: var(--ui-warning-bg); color: var(--ui-warning-text); }
.diag-level-debug { border-color: var(--ui-info-border); background: var(--ui-info-bg); color: var(--ui-info-text); }
.diag-level-info { background: var(--ui-raised); color: var(--ui-text-muted); }
.diag-method { display: inline-block; margin-left: 6px; padding: 2px 6px; border: 1px solid var(--ui-border-soft); border-radius: 6px; font-size: .68rem; font-weight: 700; color: var(--ui-text-subtle); }
.diag-status-error, .diag-row-error td { color: var(--ui-error-text); }
.diag-empty td { color: var(--ui-text-muted); font-style: italic; }
.diag-count { margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--ui-accent); color: var(--ui-accent-text); font-size: .72rem; vertical-align: middle; }
.diag-pill { padding: 2px 7px; border: 1px solid var(--ui-error-border); border-radius: 999px; background: var(--ui-error-bg); color: var(--ui-error-text); font-size: .7rem; font-style: normal; }
.diag-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.diag-actions form { display: flex; margin: 0; }
.diag-actions .admin-inline-note { flex: 1 1 260px; margin: 0; }
@media (max-width: 700px) {
  .diag-toolbar { flex-direction: column; align-items: stretch; }
  .diag-toolbar select, .diag-toolbar input { width: 100%; min-width: 0; }
}

:root[data-display-mode="dark"] .language-select select:hover { border-color: #a8b6ab; }

/* ==========================================================================
   Aperçu du CV — pages rendues en <canvas> par pdfjs.
   Remplace l'ancien <object>/<iframe>, invisible à cause de l'en-tête CSP
   « default-src 'none' » posé sur /espace/cv/pdf. Le rendu en canvas est
   plat et occupe une largeur maîtrisée : les marges évitent qu'une page A4
   déborde de son conteneur sur mobile.
   ========================================================================== */
.cv-preview {
  display: grid;
  gap: 12px;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid var(--ui-border-soft, var(--line));
  border-radius: 12px;
  background: var(--ui-raised, var(--paper-2));
}

.cv-preview-status {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ui-muted, var(--ink-2));
}
.cv-preview-status.is-success { color: var(--ui-ok, #2f7a4d); }
.cv-preview-status.is-error { color: var(--ui-danger, #b3261e); }

.cv-preview-pages {
  display: grid;
  gap: 16px;
  /* Les pages sont centrées et bornées : une page A4 rendue à 900 px de large
     ne doit pas s'étirer sur un écran large ni se tasser sur un téléphone. */
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.cv-preview-frame {
  margin: 0;
  display: grid;
  gap: 6px;
  justify-items: center;
  max-width: 100%;
}

.cv-preview-page {
  display: block;
  width: 100%;
  /* La hauteur vient du ratio de la page ; la largeur est bornée pour qu'un PDF A3
     ne pousse pas la page vers le bas et fatigue l'œil. */
  max-width: 900px;
  height: auto;
  border: 1px solid var(--ui-border-soft, var(--line));
  border-radius: 6px;
  background: #fff;
  /* Les PDF sont souvent en contraste fort : une ombre douce suffit à les
     détacher du fond sans alourdir. */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 6px 18px rgba(0, 0, 0, 0.06);
}

.cv-preview-frame figcaption {
  font-size: 0.8rem;
  color: var(--ui-muted, var(--ink-2));
  font-variant-numeric: tabular-nums;
}

:root[data-display-mode="dark"] .cv-preview-page {
  border-color: #69766d;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 6px 18px rgba(0, 0, 0, 0.35);
}

@media (max-width: 700px) {
  .cv-preview { padding: 10px; gap: 10px; }
  .cv-preview-frame figcaption { font-size: 0.75rem; }
}

/* ==========================================================================
   Formulaire d'article (/admin/articles) — espacement et barre d'outils.

   Les marges venaient de règles empilées : .editor-form ajoute 23 px de
   padding, .editor-grid ajoute encore 8 px, et les blocs successifs se
   touchent ou s'espacent différemment selon que la grille est ouverte ou non.
   On fixe un rythme unique, et on utilise les propriétés logiques
   (padding-inline, margin-inline-start) pour que la mise en page tienne aussi
   en arabe, sans duplication de règles.
   ========================================================================== */
.editor-form { padding: clamp(16px, 3vw, 26px); }

.editor-title-block,
.editor-excerpt-block,
.editor-blocks-wrapper,
.editor-tags-block,
.editor-seo-block,
.editor-form > .editor-grid { margin: 0 0 22px; }

.editor-form > :last-child { margin-bottom: 0; }

/* --- Titre et slug ------------------------------------------------------- */
.editor-title-block { display: grid; gap: 12px; }

.editor-title-block input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  font-size: 1.0625rem;
  border: 1px solid #d8ded5;
  background: #fff;
  color: var(--ink);
}

.slug-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border: 1px solid #d8ded5;
  background: var(--paper-2, #f2f3eb);
  border-radius: 6px;
}

.slug-row .slug-prefix {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.8rem;
  white-space: nowrap;
}

.slug-row input {
  flex: 1 1 180px;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink);
  padding: 4px 0;
}
.slug-row input:focus { outline: none; }

/* --- Chapô -------------------------------------------------------------- */
.editor-excerpt-block { display: grid; gap: 8px; }
.editor-excerpt-block label { display: grid; gap: 6px; }

.editor-excerpt-block textarea {
  width: 100%;
  min-height: 74px;
  padding: 11px 13px;
  border: 1px solid #d8ded5;
  background: #fff;
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.6;
  resize: vertical;
}

.editor-excerpt-block small {
  justify-self: end;
  color: var(--muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

/* --- Zone d'édition ----------------------------------------------------- */
.editor-blocks-wrapper {
  border: 1px solid #d8ded5;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.editor-blocks {
  min-height: 340px;
  padding: 22px 24px;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--ink);
  outline: none;
  overflow-wrap: break-word;
}

.editor-blocks:focus { box-shadow: inset 0 0 0 2px rgba(135, 157, 83, 0.35); }
.editor-blocks p { margin: 0 0 1em; }
.editor-blocks p:last-child { margin-bottom: 0; }
.editor-blocks h2 { margin: 1.4em 0 0.5em; font-size: 1.4rem; line-height: 1.25; }
.editor-blocks h3 { margin: 1.2em 0 0.4em; font-size: 1.15rem; line-height: 1.3; }
.editor-blocks ul, .editor-blocks ol { margin: 0 0 1em; padding-inline-start: 1.4em; }
.editor-blocks blockquote {
  margin: 1em 0;
  padding-inline-start: 14px;
  border-inline-start: 3px solid var(--lime-dark, #879d53);
  color: var(--muted);
}
.editor-blocks pre {
  margin: 1em 0;
  padding: 14px;
  overflow-x: auto;
  background: #1d2420;
  color: #e8f0e6;
  font-family: var(--mono);
  font-size: 0.85rem;
  border-radius: 6px;
}
.editor-blocks hr { margin: 1.6em 0; border: 0; border-top: 1px solid var(--line); }
.editor-blocks figure { margin: 1.2em 0; }
.editor-blocks img, .editor-blocks video { max-width: 100%; height: auto; border-radius: 6px; }
.editor-placeholder { color: var(--muted); font-style: italic; }

/* ==========================================================================
   Barre d'outils : icônes SVG en ligne plutôt qu'emoji. Un emoji dépend de la
   police du système, se colore selon l'OS et s'aligne mal avec le texte. Le
   SVG suit currentColor : il hérite du thème clair comme du thème sombre, et
   chaque bouton garde un title + aria-label pour l'accessibilité.
   ========================================================================== */
.editor-blocks-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  padding: 8px 10px;
  background: #eceee5;
  border-top: 1px solid #d8ded5;
}

.editor-blocks-toolbar .toolbar-label {
  margin-inline-end: 6px;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.editor-blocks-toolbar button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #45564d;
  cursor: pointer;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.editor-blocks-toolbar button svg {
  width: 18px;
  height: 18px;
  /* Ces propriétés sont aussi portées par chaque <svg> du template. Les répéter
     ici garantit l'affichage même si la feuille arrive en retard ou est mise en
     cache : sans fill ni stroke, un SVG est un rectangle vide. */
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.editor-blocks-toolbar button:hover {
  background: #faf9f4;
  border-color: #c8d2c4;
  color: var(--ink);
}

.editor-blocks-toolbar button:active { transform: translateY(1px); }

/* Cible clavier visible : sans elle, la barre est inutilisable au clavier. */
.editor-blocks-toolbar button:focus-visible {
  outline: 2px solid #879d53;
  outline-offset: 1px;
  background: #faf9f4;
}

.editor-blocks-toolbar .toolbar-sep {
  width: 1px;
  height: 22px;
  margin: 0 5px;
  background: #c8d2c4;
}

:root[data-display-mode="dark"] .editor-blocks-toolbar {
  background: #1a221d;
  border-top-color: #3c4a41;
}
:root[data-display-mode="dark"] .editor-blocks-toolbar button { color: #b9c6bb; }
:root[data-display-mode="dark"] .editor-blocks-toolbar button:hover {
  background: #232d27;
  border-color: #4a5a50;
  color: #f1f3ee;
}
:root[data-display-mode="dark"] .editor-blocks-toolbar .toolbar-sep { background: #3c4a41; }
:root[data-display-mode="dark"] .editor-blocks,
:root[data-display-mode="dark"] .editor-title-block input[type="text"],
:root[data-display-mode="dark"] .editor-excerpt-block textarea {
  background: #131a16;
  color: #f1f3ee;
  border-color: #3c4a41;
}

/* ==========================================================================
   Fil communautaire — zone de saisie, suggestions de hashtags, aperçu et
   carrousel.

   L'éditeur est un <div contenteditable> et non un <textarea> : le curseur doit
   être mémorisé entre deux insertions, ce que le composant cursor-insert.js
   mémorise précisément. Le style imite une zone de texte classique pour que la
   transition depuis l'ancien formulaire ne se voie pas.
   ========================================================================== */
.community-editor {
  min-height: 120px;
  max-height: 420px;
  overflow-y: auto;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.6;
  outline: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  /* word-break: break-word casserait les mots en deux au milieu d'un hashtag. */
}

.community-editor:focus {
  border-color: #879d53;
  box-shadow: 0 0 0 2px rgba(135, 157, 83, 0.18);
}

.community-editor:empty::before,
.community-editor.is-empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}

/* Hashtags recognising dans le texte de l'utilisateur : la couleur aide à les
   repérer d'un coup d'œil, sans changer le texte ni son rendu exporté. */
.community-editor .community-tag {
  color: #4a7a2f;
  font-weight: 600;
}

/* --- Suggestions de hashtags ------------------------------------------- */
.tag-suggest-box {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 0 0;
}

.tag-suggest-box .tag-suggest-item {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid #c8d2c4;
  border-radius: 999px;
  background: var(--paper-2, #f2f3eb);
  color: var(--ink);
  font-size: 0.8125rem;
  cursor: pointer;
}

.tag-suggest-box .tag-suggest-item:hover,
.tag-suggest-box .tag-suggest-item:focus-visible {
  border-color: #879d53;
  background: #fff;
  outline: none;
}

.tag-suggest-box .tag-suggest-domain {
  color: var(--muted);
  font-size: 0.6875rem;
}

/* --- Vignettes sous la zone de texte ------------------------------------ */
.community-preview {
  display: grid;
  /* Quatre images tiennent sur une ligne comme sur un réseau social ; en dessous
     de 700 px on passe sur deux colonnes pour ne pas réduire à l'invisible. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
}

.community-preview-item {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  background: var(--paper-2, #f2f3eb);
}

.community-preview-item.is-video { grid-column: span 2; grid-row: span 2; aspect-ratio: 16 / 9; }

.community-preview-item img,
.community-preview-item video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.community-preview-remove {
  position: absolute;
  top: 5px;
  inset-inline-end: 5px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 28, 24, 0.72);
  color: #fff;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}

.community-preview-remove:hover { background: rgba(20, 28, 24, 0.9); }

[data-community-counter] {
  color: var(--muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}
[data-community-counter].is-warning { color: #b07a1e; }
[data-community-counter].is-error { color: #b3261e; font-weight: 700; }

/* --- Carrousel dans le fil ---------------------------------------------- */
.community-carousel {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: var(--paper-2, #f2f3eb);
}

.community-carousel-track {
  display: flex;
  /* La piste défile par transformation : pas de rechargement à chaque image. */
  transition: transform 0.28s ease;
  will-change: transform;
}

.community-carousel-slide {
  flex: 0 0 100%;
  margin: 0;
}

.community-carousel-slide img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: cover;
}

.community-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 28, 24, 0.6);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.community-carousel-nav.is-prev { inset-inline-start: 8px; }
.community-carousel-nav.is-next { inset-inline-end: 8px; }
.community-carousel-nav:hover { background: rgba(20, 28, 24, 0.85); }

.community-carousel-dots {
  position: absolute;
  bottom: 8px;
  inset-inline: 0;
  display: flex;
  justify-content: center;
  gap: 5px;
}

.community-carousel-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
}
.community-carousel-dots button[aria-current="true"] { background: #fff; }

.community-video video {
  display: block;
  width: 100%;
  max-height: 520px;
  border-radius: 10px;
  background: #000;
}

@media (max-width: 700px) {
  .community-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .community-preview-item.is-video { grid-column: span 2; grid-row: auto; }
  .community-editor { min-height: 100px; }
  .community-carousel-slide img,
  .community-video video { max-height: 320px; }
}
/* ==========================================================================
   Socle d'icônes SVG et de composants.

   Correction d'un bug d'affichage : le projet n'avait de règle « svg » que dans
   trois contextes précis (.reader-settings-toggle, .language-switch, barre
   d'outils). Un <svg> posé ailleurs n'avait donc ni taille ni trait : il
   s'affichait à 0×0 et les boutons semblaient vides alors que le HTML était
   correct. La règle ci-dessous donne à tout svg inline une taille et un trait
   lisibles, en currentColor pour suivre le thème clair comme le thème sombre.

   Socle de composants proche de Bootstrap, écrit pour ce projet. Rien n'est
   imposé : le code existant continue de fonctionner, ces règles s'ajoutent et
   se surchargent ensuite par classe.
   ========================================================================== */
svg {
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
  vertical-align: -0.2em;
  pointer-events: none;
}

/* Formes pleines (pastilles, logos) : elles annulent le contour par défaut. */
svg[data-fill], .is-filled svg { fill: currentColor; stroke: none; }

:root {
  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-5: 24px;
  --gap-6: 32px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --control-height: 42px;
  --control-height-sm: 34px;
  --font-size-sm: 0.8125rem;
  --font-size-xs: 0.75rem;
  --transition: 0.15s ease;
}

@media (max-width: 700px) {
  :root { --control-height: 46px; }
}

/* --- Disposition -------------------------------------------------------- */
.stack { display: grid; gap: var(--gap-4); }
.stack-sm { display: grid; gap: var(--gap-2); }
.cluster { display: flex; align-items: center; gap: var(--gap-2); flex-wrap: wrap; }
.cluster-between { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-3); flex-wrap: wrap; }
.push { margin-inline-start: auto; }
.text-muted { color: var(--muted); }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }

/* --- Champs ------------------------------------------------------------- */
.field {
  width: 100%;
  min-height: var(--control-height);
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.5;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.field:focus-visible,
.field:focus {
  outline: none;
  border-color: #879d53;
  box-shadow: 0 0 0 3px rgba(135, 157, 83, 0.22);
}

.field::placeholder { color: var(--muted); opacity: 1; }
.field-sm { min-height: var(--control-height-sm); padding: 6px 9px; font-size: var(--font-size-sm); }
textarea.field { resize: vertical; min-height: 84px; }

select.field {
  /* Le select natif garde sa propre flèche tant qu'on ne masque pas
     l'apparence. Sans appearance:none, on cumule la flèche du navigateur et
     celle dessinée en CSS : c'est ce qui affichait deux flèches. */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Flèche dessinée en CSS : rien à charger, elle suit le thème.
     Deux dégradés carts par demi-carré, collés par leurs angles. */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 16px center, right 11px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  /* site.css pose background:transparent sur les select : sans fond opaque ici,
     la flèche dessinée en CSS disparaît avec le fond. */
  background-color: var(--white);
  padding-inline-end: 34px;
}

[dir="rtl"] select.field {
  background-position: left 11px center, left 16px center;
  padding-inline-end: 12px;
  padding-inline-start: 32px;
}

/* --- Langue de rédaction ------------------------------------------------ */
/* Le <select> remplace les deux boutons FR/EN. Il est dimensionné pour ne pas
   voler la largeur de la ligne, et l'indication reste lisible en thème sombre. */
.editor-lang-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 22px;
  padding: 10px 12px;
  border: 1px solid #d8ded5;
  background: var(--paper-2, #f2f3eb);
  border-radius: 6px;
}

.editor-lang-label {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.editor-lang-select {
  min-width: 150px;
  padding: 7px 10px;
  border: 1px solid #c8d2c4;
  border-radius: 5px;
  background: #fff;
  color: var(--ink);
  font-size: 0.875rem;
  cursor: pointer;
}

.editor-lang-select:focus-visible {
  outline: 2px solid #879d53;
  outline-offset: 1px;
}

.editor-lang-hint {
  flex: 1 1 260px;
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

:root[data-display-mode="dark"] .editor-lang-row {
  background: #1a221d;
  border-color: #3c4a41;
}
:root[data-display-mode="dark"] .editor-lang-select {
  background: #131a16;
  color: #f1f3ee;
  border-color: #3c4a41;
}

/* --- Boutons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-2);
  min-height: var(--control-height);
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: 2px solid #879d53; outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary:hover { background: #000; }
.btn-outline { border-color: var(--line); background: var(--white); }
.btn-outline:hover { border-color: #879d53; background: var(--paper-2); }
.btn-ghost { color: var(--muted); }
.btn-ghost:hover { color: var(--ink); background: var(--paper-2); }
.btn-sm { min-height: var(--control-height-sm); padding: 5px 11px; font-size: var(--font-size-sm); }
.btn-block { width: 100%; }

/* --- Badges ------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper-2);
  color: var(--ink);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

/* --- Cartes ------------------------------------------------------------- */
.card { padding: var(--gap-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.card-muted { background: var(--paper-2); }

/* --- Alertes ------------------------------------------------------------ */
.alert {
  padding: 10px 13px;
  border-inline-start: 3px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  color: var(--ink);
  font-size: var(--font-size-sm);
  line-height: 1.55;
}

.alert-info { border-inline-start-color: #5b7fb5; }
.alert-warn { border-inline-start-color: #c98a2e; background: #fdf6e8; color: #7a5a20; }
.alert-error { border-inline-start-color: #b3261e; background: #fdf0ef; color: #8c1d18; }
.alert-success { border-inline-start-color: #2f7a4d; background: #eef6f0; color: #235c3a; }

/* --- Compteur ----------------------------------------------------------- */
/* Un seul endroit pour la taille et l'alerte. tabular-nums garde la chasse
   constante : le total ne tremble pas à chaque frappe. */
.counter {
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.counter.is-warning { color: #b07a1e; }
.counter.is-error { color: #b3261e; font-weight: 700; }

/* --- Libellés courts ---------------------------------------------------- */
.field-label {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.field-help { display: block; margin-top: 5px; color: var(--muted); font-size: var(--font-size-xs); line-height: 1.5; }
.field-group { display: grid; gap: 5px; }

:root[data-display-mode="dark"] .counter.is-warning { color: #e0b464; }
:root[data-display-mode="dark"] .counter.is-error { color: #f0a49c; }
:root[data-display-mode="dark"] .alert-warn { background: #2a2317; color: #e0c48a; }
:root[data-display-mode="dark"] .alert-error { background: #2b1917; color: #f0a49c; }
:root[data-display-mode="dark"] .alert-success { background: #16241b; color: #9ad4b2; }
:root[data-display-mode="dark"] .field { background: #131a16; color: #f1f3ee; border-color: #3c4a41; }
:root[data-display-mode="dark"] .btn-outline { background: #131a16; border-color: #3c4a41; color: #f1f3ee; }

/* --- Publication : statut, catégorie, actions -------------------------- */
.editor-publish-block {
  display: grid;
  gap: 10px;
}

.editor-publish-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #d8ded5;
  background: var(--paper-2, #f2f3eb);
  border-radius: 8px;
}

.editor-publish-fields select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #c8d2c4;
  background: #fff;
  color: var(--ink);
  font-size: 0.875rem;
}

.editor-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 18px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
}

.editor-actions-hint {
  margin: 8px 0 0;
  padding: 9px 12px;
  border-inline-start: 3px solid #c98a2e;
  background: #fdf6e8;
  color: #7a5a20;
  font-size: 0.75rem;
  line-height: 1.5;
}

:root[data-display-mode="dark"] .editor-publish-fields {
  background: #1a221d;
  border-color: #3c4a41;
}
:root[data-display-mode="dark"] .editor-publish-fields select {
  background: #131a16;
  color: #f1f3ee;
  border-color: #3c4a41;
}
:root[data-display-mode="dark"] .editor-actions-hint {
  background: #2a2317;
  color: #e0c48a;
  border-inline-start-color: #c98a2e;
}

/* --- Tags --------------------------------------------------------------- */
.editor-tags-block { display: grid; gap: 9px; }

.tags-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid var(--ui-border-soft, #d8ded5);
  background: var(--ui-input, #fff);
  color: var(--ui-text-strong, var(--ink));
  border-radius: var(--ui-radius, 16px);
  overflow: hidden;
}

.tags-container:focus-within { border-color: #879d53; }

.tags-container input {
  flex: 1 1 140px;
  min-width: 120px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 0.875rem;
  padding: 4px 0;
}
.tags-container input:focus { outline: none; }

.tag-chips .tag-chip,
.tag-suggest .tag-suggest-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid #c8d2c4;
  border-radius: 999px;
  background: var(--paper-2, #f2f3eb);
  color: var(--ink);
  font-size: 0.75rem;
  white-space: nowrap;
}

.tag-chips .tag-chip button {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1;
}

.tag-suggest { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-suggest:empty { display: none; }
.tag-suggest .tag-suggest-item { cursor: pointer; }
.tag-suggest .tag-suggest-item:hover { border-color: #879d53; }

:root[data-display-mode="dark"] .tags-container {
  background: var(--ui-input);
  border-color: var(--ui-border-soft);
  color: var(--ui-text-strong);
}
:root[data-display-mode="dark"] .tags-container input { color: var(--ui-text-strong); }
:root[data-display-mode="dark"] .tag-chips .tag-chip,
:root[data-display-mode="dark"] .tag-suggest .tag-suggest-item {
  background: var(--ui-raised);
  border-color: var(--ui-border-soft);
  color: var(--ui-text);
}

.editor-tags-block > small {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

/* --- Bloc SEO replié ---------------------------------------------------- */
.editor-seo-block {
  border: 1px solid #d8ded5;
  border-radius: 8px;
  background: var(--paper-2, #f2f3eb);
}

.editor-seo-block > summary {
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.8125rem;
}

.editor-seo-block[open] > summary { border-bottom: 1px solid #d8ded5; }
.editor-seo-block > .editor-grid { padding: 16px 14px 14px; margin: 0; gap: 15px; }

/* --- Réactivité --------------------------------------------------------- */
@media (max-width: 700px) {
  .editor-form { padding: 16px 14px; }
  .editor-title-block,
  .editor-excerpt-block,
  .editor-blocks-wrapper,
  .editor-tags-block,
  .editor-seo-block,
  .editor-form > .editor-grid { margin-bottom: 18px; }
  .editor-blocks { min-height: 260px; padding: 16px; }
  .editor-blocks-toolbar { gap: 2px; padding: 6px; }
  .editor-blocks-toolbar button { width: 32px; height: 32px; }
  .editor-blocks-toolbar button svg { width: 17px; height: 17px; }
  .editor-blocks-toolbar .toolbar-label { display: none; }
  .editor-blocks-toolbar .toolbar-sep { margin: 0 3px; }
}

/* ==========================================================================
   Arabe — direction droite-à-gauche.

   site.css ne posait que sept règles [dir=rtl] : le texte s'alignait à droite,
   mais les grilles, les marges et les composants gardaient leur ordre gauche-droite.
   Ces règles complètent le miroir là où il est réellement visible, en ne réécrivant
   que ce qui est nécessaire. On s'appuie sur les propriétés logiques
   (margin-inline, padding-inline, inset-inline) partout où c'est possible : elles
   fonctionnent dans les deux sens sans duplication. La feuille ne dépend pas de
   l'ordre de chargement et n'affecte pas les langues latines.

   L'attribut dir vient de res.locals.dir, lui-même lu dans _meta.dir du fichier
   de langue : ajouter une langue rtl ne demande donc qu'un _meta.dir = "rtl".
   ========================================================================== */
[dir="rtl"] {
  text-align: right;
}

/* --- Mise en page : les grilles à deux colonnes s'inversent --------------- */
[dir="rtl"] .editor-grid,
[dir="rtl"] .talent-grid,
[dir="rtl"] .team-content-grid,
[dir="rtl"] .project-content-grid,
[dir="rtl"] .masonry-grid {
  direction: rtl;
}

/* --- Navigation et entêtes ---------------------------------------------- */
[dir="rtl"] .site-header,
[dir="rtl"] .site-footer,
[dir="rtl"] .admin-nav,
[dir="rtl"] .member-side {
  direction: rtl;
}

/* La liste des langues reste en ordre latin : un menu « العربية | Français »
   se lit de gauche à droite dans toutes les cultures, sinon il saute à chaque
   changement de langue. */
[dir="rtl"] .language-select,
[dir="rtl"] .language-switch {
  direction: ltr;
}

/* --- Éléments fléchés : la flèche pointe du côté de la lecture ---------- */
[dir="rtl"] .text-link::after,
[dir="rtl"] .button-arrow {
  transform: scaleX(-1);
}

/* --- Formulaires -------------------------------------------------------- */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input[type="search"],
[dir="rtl"] textarea,
[dir="rtl"] select {
  text-align: right;
}

/* La case à cocher reste à gauche du libellé : c'est le repère visuel attendu
   dans un formulaire arabe, et aligner la case à droite le rend ambigu. */
[dir="rtl"] input[type="checkbox"],
[dir="rtl"] input[type="radio"] {
  margin-inline-end: 0.5em;
}

/* --- Aperçu du CV : les pages PDF restent en LTR ------------------------- */
/* Un CV reste un document latin même dans une interface arabe : le forcer en RTL
   afficherait des lignes de texte à l'envers. */
[dir="rtl"] .cv-preview,
[dir="rtl"] .cv-preview-pages,
[dir="rtl"] .cv-preview-frame {
  direction: ltr;
}
[dir="rtl"] .cv-preview-status {
  direction: rtl;
}

/* --- Tableaux d'administration ------------------------------------------ */
[dir="rtl"] .admin-table,
[dir="rtl"] .data-table {
  direction: rtl;
}

/* --- Chiffres : l'arabe garde les chiffres occidentaux -------------------- */
/* tabular-nums garde les colonnes alignées ; sans cela, le rendu des chiffres
   varie selon la police et les tableaux de statistiques se désalignent. */
[dir="rtl"] .cv-preview-frame figcaption,
[dir="rtl"] .admin-table td,
[dir="rtl"] .data-table td {
  font-variant-numeric: tabular-nums;
}

/* Deux textes du pied de page tombaient sous le seuil AA en mode clair : la
   frequence d'envoi de la newsletter a 4,43:1 et la ligne de bas de page
   4,49:1, pour 4,5:1 requis. Ces deux elements heritaient leur couleur, et une
   regle de site.css la redéfinissait apres notre .footer-bottom. On la pose donc
   explicitement ici, en source posterieure. */
.site-footer .newsletter-frequency { color: #9fb3a8; }
.site-footer .footer-bottom span { color: #a7b8ae; }

/* ============================================================
   Engagement, offres et recrutement (/services, /projects)
   ============================================================ */
.service-engagement { padding-block: 4px 28px; }
.service-engagement-text {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.6;
  color: var(--ui-text);
}
.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.offer-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--ui-border-soft);
  border-radius: 20px;
  background: var(--ui-surface);
}
.offer-card h3 { margin: 0; font-size: 1.3rem; letter-spacing: -.02em; }
.offer-duration {
  margin: 0;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ui-accent-text) !important;
}
.offer-for { margin: 0; color: var(--ui-text); }
.offer-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 6px 0 14px;
  padding: 0;
  list-style: none;
  font-size: .92rem;
  color: var(--ui-text-muted) !important;
}
.offer-list li { position: relative; padding-inline-start: 18px; }
/* Puce en CSS plutôt qu'en caractère : elle suit la langue et le RTL. */
.offer-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .58em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ui-accent);
}
.offer-card .text-link { margin-top: auto; align-self: flex-start; }

.recruit-band { padding-block: clamp(38px, 6vw, 72px); }
.recruit-band-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(26px, 4vw, 48px);
  border: 1px solid var(--ui-border-soft);
  border-radius: 24px;
  background: var(--ui-surface);
}
.recruit-band-copy h2 { margin: 0 0 14px; font-size: clamp(1.6rem, 3.2vw, 2.3rem); letter-spacing: -.03em; line-height: 1.12; }
.recruit-band-copy p { margin: 0; color: var(--ui-text); max-width: 58ch; }
.recruit-band-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px !important;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ui-text-muted) !important;
}
.recruit-band-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.recruit-band-actions .button { width: 100%; justify-content: center; }
.recruit-band-actions .text-link { white-space: nowrap; }

@media (max-width: 860px) {
  .recruit-band-inner { grid-template-columns: minmax(0, 1fr); text-align: start; }
  .recruit-band-actions { align-items: stretch; }
  .recruit-band-actions .text-link { text-align: center; }
}

/* Les trois formules se répartissent en colonnes tant qu'il y a la place, puis
   passent en une seule : sur deux colonnes, la troisième carte resterait seule
   en bas, avec une ligne vide à côté. */
@media (max-width: 900px) {
  .offer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Liste du journal, icônes, fil, langues et mode sombre.
   ========================================================================== */

.site-header .menu-toggle > i {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 1;
}
.main-nav .nav-links > a.is-current,
.main-nav .member-nav-link.is-current {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* vyneric-core impose height:auto et max-width:100% à tout svg. Dans un
   bouton ou un lien, la boîte tombe à 0 et l'icône disparaît. */
a > svg,
button > svg,
.card-glyph,
.proof-icons > svg,
.language-select > svg,
.editor-blocks-toolbar button > svg,
.chat-launcher > svg,
.reader-settings-toggle > svg,
.feed-tool > svg {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  max-width: none;
  max-height: none;
  overflow: visible;
  flex: 0 0 auto;
  vertical-align: middle;
}
a > svg:not(:has([fill])),
button > svg:not(:has([fill])),
.card-glyph,
.proof-icons > svg,
.language-select > svg,
.editor-blocks-toolbar button > svg,
.chat-launcher > svg,
.reader-settings-toggle > svg,
.feed-tool > svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.service-card > .card-glyph,
.focus-card > .card-glyph {
  width: 28px;
  height: 28px;
}
.service-card > .card-glyph { color: var(--ui-brand, #1d3c2c); }
.focus-card > .card-glyph { color: #d7e4cf; }
:root[data-display-mode="dark"] .service-card > .card-glyph { color: #d5e3cc; }

.editorial-section .article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.editorial-section .article-card {
  display: grid;
  grid-template-columns: minmax(148px, 220px) minmax(0, 1fr);
  column-gap: 0;
  row-gap: 0;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  border-bottom: 0;
  text-decoration: none;
  color: inherit;
}
.editorial-section .article-card > .article-cover {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  min-height: 168px;
  height: 100%;
  aspect-ratio: auto;
  overflow: hidden;
  border-radius: 0;
  border-start-start-radius: var(--ui-radius);
  border-end-start-radius: var(--ui-radius);
  background: var(--paper-2, #e7e9dc);
}
.editorial-section .article-cover img,
.editorial-section .article-cover-art {
  width: 100%;
  height: 100%;
  min-height: 168px;
  object-fit: cover;
  border-radius: 0;
}
.editorial-section .article-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 16px 18px 18px;
}
.editorial-section .article-meta,
.innovation-card .article-meta {
  margin: 0;
  color: var(--ui-text-muted, #5d6b63);
}
.editorial-section .article-meta time {
  flex: 0 0 auto;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--display);
  font-weight: 650;
}
.editorial-section .article-card h2 {
  margin: 0;
  color: var(--ui-text-strong, var(--ink));
}
.editorial-section .article-copy > p {
  margin: 0;
  color: var(--ui-text-muted, #5c6a62);
  font-size: 0.95rem;
  line-height: 1.6;
}
.editorial-section .article-read { margin-top: auto; padding-top: 4px; }
:root[data-display-mode="dark"] .editorial-section .article-card {
  background: var(--ui-surface, #1a2726);
  color: var(--ui-text, #edf2e9);
  border-color: var(--ui-border-soft, #3c4a41);
}
:root[data-display-mode="dark"] .editorial-section .article-cover,
:root[data-display-mode="dark"] .editorial-section .article-cover-art {
  background: #20332c;
}
:root[data-display-mode="dark"] .editorial-section .article-meta,
:root[data-display-mode="dark"] .editorial-section .article-copy > p,
:root[data-display-mode="dark"] .editorial-section .article-read {
  color: var(--ui-text-muted, #c5d0c8);
}
@media (max-width: 700px) {
  .editorial-section .article-card { grid-template-columns: minmax(0, 1fr); }
  .editorial-section .article-card > .article-cover,
  .editorial-section .article-cover img,
  .editorial-section .article-cover-art {
    min-height: 0;
    aspect-ratio: 16 / 9;
    height: auto;
  }
  .editorial-section .article-card > .article-cover {
    border-start-start-radius: var(--ui-radius);
    border-start-end-radius: var(--ui-radius);
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }
  .editorial-section .article-copy { padding: 14px 14px 16px; }
}

.article-figure,
.article-media-carousel,
.article-media .media-track {
  overflow: hidden;
  border-radius: var(--ui-radius);
}
.article-figure img,
.article-media .media-slide > img,
.article-media .media-slide > video {
  border-radius: 0;
}

.admin-post-cell {
  max-width: 420px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.community-readonly {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--ui-border-soft);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  color: var(--ui-text-muted);
}
.enterprise-collab { padding-block: 8px 88px; }
.enterprise-collab > h2 {
  max-width: 16em;
  margin: 0 0 12px;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.04em;
}
.enterprise-offers-intro {
  max-width: 42rem;
  margin: 0 0 22px;
  color: var(--ui-text-muted);
}
.enterprise-offers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.enterprise-offer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 22px 22px 24px;
  border: 1px solid var(--ui-border-soft);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  color: var(--ui-text);
  overflow: hidden;
}
.enterprise-offer h3 { margin: 0; font-size: 1.15rem; letter-spacing: -0.03em; }
.enterprise-offer p { margin: 0; color: var(--ui-text-muted); line-height: 1.6; }
@media (max-width: 980px) {
  .enterprise-offers { grid-template-columns: 1fr; }
  .enterprise-collab { padding-block: 8px 64px; }
}

.feed-compose {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.feed-avatar,
.community-post > .profile-avatar-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}
.feed-avatar {
  display: grid;
  place-items: center;
  background: var(--ink, #1d3c2c);
  color: var(--lime, #d5f36a);
  font-weight: 750;
}
.feed-compose-main {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white, var(--ui-surface));
  overflow: hidden;
}
.feed-compose-main .community-editor {
  min-height: 88px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.feed-compose-main .community-editor:focus { box-shadow: none; }
.feed-compose-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
}
.feed-tools { display: flex; align-items: center; gap: 4px; min-width: 0; }
.feed-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ui-brand, #1d3c2c);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  cursor: pointer;
}
.feed-tool:hover { background: var(--paper-2, #eef1e8); }
.community-file input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.feed-compose-bar [data-community-counter] { margin-inline-start: auto; }
.feed-compose-main .tag-suggest-box,
.feed-compose-main .community-preview { padding-inline: 12px; }
.community-list { display: flex; flex-direction: column; }
.community-post {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 8px;
  margin: 0;
  padding: 16px 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.community-post > .profile-avatar-icon { grid-column: 1; grid-row: 1; }
.community-post > :not(.profile-avatar-icon) { grid-column: 2; min-width: 0; }
.community-post-head { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.community-post-head time { margin-inline-start: auto; color: var(--ui-text-muted); font-size: 0.82rem; }
.community-post-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.community-hashtag {
  color: var(--ui-brand, #1d3c2c);
  font-weight: 650;
  text-decoration: none;
}
.community-hashtag:hover { text-decoration: underline; }
.related-reading { padding: 8px 0 36px; }
.related-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.related-list a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.tag-community { margin-top: 32px; }
.community-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.community-reply-form textarea,
.community-edit textarea {
  width: 100%;
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white, var(--ui-surface));
  color: var(--ink);
}
:root[data-display-mode="dark"] .feed-compose-main,
:root[data-display-mode="dark"] .community-reply-form textarea,
:root[data-display-mode="dark"] .community-edit textarea,
:root[data-display-mode="dark"] .feed-tool:hover {
  background: #1a2726;
  color: #edf2e9;
  border-color: #3c4a41;
}
:root[data-display-mode="dark"] .community-post { border-color: #3c4a41; }
:root[data-display-mode="dark"] .feed-tool { color: #d5e3cc; }
@media (max-width: 700px) {
  .feed-tool span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .feed-compose,
  .community-post { grid-template-columns: 36px minmax(0, 1fr); }
  .feed-avatar,
  .community-post > .profile-avatar-icon { width: 36px; height: 36px; }
}

.article-editor-form .editor-blocks-wrapper {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--white, var(--ui-surface));
}
.article-editor-form .editor-blocks {
  border: 0;
  border-radius: 0;
  min-height: 240px;
}
.article-editor-form .editor-blocks-toolbar {
  border-top: 1px solid var(--line);
  background: var(--paper, var(--ui-surface));
}
:root[data-display-mode="dark"] .article-editor-form .editor-blocks-wrapper,
:root[data-display-mode="dark"] .article-editor-form .editor-blocks,
:root[data-display-mode="dark"] .article-editor-form .editor-blocks-toolbar {
  background: #131a16;
  color: #f1f3ee;
  border-color: #3c4a41;
}

.locale-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 12px 0 16px;
}
.locale-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.locale-choice small { color: var(--muted); }

html[dir="rtl"] body {
  font-family: "Noto Naskh Arabic", "Geeza Pro", "Traditional Arabic", "Segoe UI", Tahoma, var(--display), sans-serif;
}
html[dir="rtl"] :where(h1, h2, h3, h4, .eyebrow, .article-meta) {
  letter-spacing: 0;
}
html[dir="rtl"] .brand { letter-spacing: -0.04em; direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .art-coordinate,
html[dir="rtl"] .capability-index,
html[dir="rtl"] .hero-bottom > span,
html[dir="rtl"] .node {
  direction: ltr;
  unicode-bidi: isolate;
}

/* L'atome du hero reste un carré. Les orbites sont des pourcentages de ce
   carré : un changement de largeur les réduit ensemble, sans les aplatir. */
.hero .hero-art {
  width: min(100%, 460px);
  aspect-ratio: 1;
  height: auto;
  margin: 8px auto 0;
  justify-self: center;
  align-self: center;
  flex: 0 0 auto;
  transform: none;
  container-type: inline-size;
}
.hero .hero-art .art-glow {
  width: 58%;
  height: 58%;
}
.hero .hero-art .orbit {
  transform: rotate(-24deg) scale(1);
  transform-origin: center;
}
.hero .hero-art .orbit-one {
  width: 76%;
  height: 45%;
}
.hero .hero-art .orbit-two {
  width: 66%;
  height: 66%;
}
.hero .hero-art .orbit-three {
  width: 90%;
  height: 54%;
  transform: rotate(52deg) scale(1);
}
.hero .hero-art .art-core {
  width: 32%;
  height: 32%;
}
.hero .hero-art .core-v {
  font-size: 28cqi;
}
.hero .hero-art .node-ai { top: 13%; left: 18%; }
.hero .hero-art .node-data { top: 34%; right: 4%; }
.hero .hero-art .node-iot { bottom: 14%; left: 14%; }
.hero .hero-art .node-sec { bottom: 22%; right: 8%; }

.editor-lang-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.editor-lang-tabs button {
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--ui-border, #c8d2c4);
  border-radius: 999px;
  background: transparent;
  color: var(--ui-text, inherit);
  cursor: pointer;
}
.editor-lang-tabs button[aria-pressed="true"] {
  background: var(--ui-brand, #1d3c2c);
  color: #f4f7f1;
  border-color: transparent;
}

.language-offer { display: grid; gap: 8px; margin: 18px 0; }
.language-offer p { margin: 0; }
.language-offer [role="group"] { display: flex; flex-wrap: wrap; gap: 6px; }
.language-offer button {
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--ui-border, #c8d2c4);
  border-radius: 999px;
  background: transparent;
  color: var(--ui-text, inherit);
  cursor: pointer;
}
.language-offer button[aria-pressed="true"] {
  background: var(--ui-brand, #1d3c2c);
  color: #f4f7f1;
  border-color: transparent;
}
.language-offer-note { color: var(--muted); font-size: .8125rem; }

:root[data-display-mode="dark"] .chat-panel > header {
  background: #0b1210;
  color: #f4f7f2;
}
:root[data-display-mode="dark"] .chat-panel > header b,
:root[data-display-mode="dark"] .chat-panel > header .chat-close {
  color: #f4f7f2;
}
:root[data-display-mode="dark"] .chat-panel > header small { color: #c5d0c6; }
.chat-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: min(420px, calc(100vw - 24px));
  min-height: min(560px, calc(100dvh - 112px));
  max-height: min(740px, calc(100dvh - 96px));
}
.chat-panel-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.chat-panel > header > .chat-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.chat-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, .1);
  color: inherit;
}
.chat-avatar svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chat-brand-copy { display: flex; flex-direction: column; min-width: 0; }
.chat-panel > header .chat-brand-copy b { font-size: 1rem; letter-spacing: .04em; }
.chat-panel > header .chat-brand-copy small { grid-column: auto; }
.chat-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  margin-bottom: 12px;
}
.chat-panel .chat-bubble {
  max-width: 88%;
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  line-height: 1.45;
}
.chat-panel .chat-bubble-bot { align-self: flex-start; background: #e7eee4; color: #172a2a; }
.chat-panel .chat-bubble-user { align-self: flex-end; background: #1d3c2c; color: #f4f7f1; }
:root[data-display-mode="dark"] .chat-panel .chat-bubble-bot { background: #24302b; color: #f4f7f2; }
.chat-who {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.chat-who[hidden] { display: none; }
.chat-who-note { grid-column: 1 / -1; margin: 0; font-size: .8125rem; }
.chat-who input[name="visitor_email"] { grid-column: 1 / -1; }
.chat-compose-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-message-label { flex: 1; min-width: 0; margin: 0; }
.chat-panel form[data-chat-compose] textarea {
  min-height: 44px;
  max-height: 140px;
  height: 44px;
  padding: 10px 12px;
  resize: none;
  overflow: auto;
  line-height: 1.4;
  field-sizing: content;
}
.chat-panel form[data-chat-compose] .chat-who input { min-height: 40px; padding: 8px 10px; }
.chat-panel form[data-chat-compose] .chat-send {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  flex: 0 0 44px;
  border: 0;
  border-radius: 12px;
  background: #1d3c2c;
  color: #f4f7f1;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.chat-panel form[data-chat-compose] .chat-send svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chat-panel form[data-chat-compose] .chat-send:disabled { opacity: .55; cursor: progress; }
:root[data-display-mode="dark"] .chat-panel form[data-chat-compose] .chat-send { background: #d2e2c7; color: #14211b; }
.chat-panel form[data-chat-compose] .chat-confirm { align-self: stretch; }
.chat-panel form[data-chat-compose] { display: flex; flex-direction: column; gap: 10px; }
.chat-panel form[hidden] { display: none; }
@media (max-width: 700px) {
  .chat-panel {
    min-height: min(68dvh, 640px);
    max-height: calc(100dvh - 88px - env(safe-area-inset-bottom));
  }
}
.home-desk-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 14px; }
.home-desk-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 240px;
  padding: 24px;
  background: var(--ui-surface, #f9f8f3);
  color: var(--ui-text, inherit);
  border: 1px solid var(--ui-border-soft, var(--line));
  border-radius: var(--ui-radius, 18px);
}
.home-desk-card h3 { margin: 0; font-size: clamp(1.6rem, 2vw, 2.1rem); letter-spacing: -.045em; line-height: 1.05; }
.home-desk-card p { margin: 0; color: var(--ui-text-muted, #6d7973); }
.home-desk-card .text-link { margin-top: auto; }
.home-desk-news { background: #142423; color: #f4f7f2; border-color: transparent; }
.home-desk-news p, .home-desk-news .eyebrow { color: #c5d0c6; }
.home-desk-news .text-link { color: #d8e2cc; }
:root[data-display-mode="dark"] .home-desk-card h3 { color: #f7faf6; }
:root[data-display-mode="dark"] .home-desk-news {
  background: #24382d;
  color: #f4f7f2;
  border-color: #8eae96;
}
@media (max-width: 800px) { .home-desk-grid { grid-template-columns: 1fr; } .home-desk-card { min-height: 0; } }

.chat-pending {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 58px;
  min-height: 38px;
  margin: 0;
  padding: 12px 14px;
}
.chat-pending i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: chat-dot 1s infinite ease-in-out;
}
.chat-pending i:nth-child(2) { animation-delay: .15s; }
.chat-pending i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-pending i { animation: none; opacity: .75; }
}
.chat-next {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  max-width: 88%;
  margin: 0;
}
.chat-topic,
.chat-offer {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ui-text-muted, #506156);
  font: inherit;
  font-size: .72rem;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: start;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.chat-offer { color: var(--ui-focus, #276d4b); }
.chat-topic:hover,
.chat-offer:hover { color: var(--ui-text-strong, #142219); }
.chat-topic:focus-visible,
.chat-offer:focus-visible { outline: 2px solid var(--ui-focus, #276d4b); outline-offset: 2px; }

.admin-page .admin-shell {
  align-items: start;
  gap: 28px;
  padding-top: 28px;
  padding-bottom: 72px;
}
.admin-page .admin-sidebar {
  position: sticky;
  top: 88px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: calc(100dvh - 104px);
  margin: 0;
  padding: 14px 12px;
  overflow: auto;
}
.admin-page .admin-sidebar > .eyebrow { margin: 0 0 8px; padding: 0 8px; }
.admin-page .admin-sidebar a,
.admin-page .admin-sidebar button.text-link {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1.35;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.admin-page .admin-sidebar a:hover,
.admin-page .admin-sidebar a:focus-visible,
.admin-page .admin-sidebar button.text-link:hover,
.admin-page .admin-sidebar button.text-link:focus-visible { background: var(--ui-raised); }
.admin-page .admin-sidebar a.admin-current { background: var(--ui-raised); font-weight: 700; }
.admin-page .admin-sidebar form { margin: 8px 0 0; padding: 0; }
.admin-page .admin-content > h1 { margin: 0 0 12px; }
.admin-page .admin-content .admin-lead,
.admin-page .admin-content .setup-note { margin: 0 0 14px; padding: 0; line-height: 1.55; }
.admin-page .editor-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 18px;
  padding: 18px;
}
.admin-page .editor-form h2 { margin: 0; }
.admin-page .editor-form .editor-grid { gap: 14px 16px; margin: 0; }
.admin-page .editor-form label { margin: 0; padding: 0; }
.admin-page .mail-secure-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 4px 0;
}
.admin-page .setup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.admin-page .setup-actions .button { margin: 0; min-height: 44px; padding: 10px 16px; }
.admin-page .ollama-model-list {
  display: block;
  width: 100%;
  height: 240px;
  min-height: 240px;
  margin: 0;
  padding: 6px;
  line-height: 1.45;
}
@media (max-width: 900px) {
  .admin-page .admin-sidebar {
    position: static;
    max-height: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .admin-page .admin-sidebar > .eyebrow,
  .admin-page .admin-sidebar > form { grid-column: 1 / -1; }
}