/* ═══════════ Menus hamburger (gauche & droite), partagés par les pages outils ═══════════ */
/* La barre reste au-dessus des fonds des deux tiroirs : ainsi, après avoir
   ouvert un menu, l'autre hamburger reste utilisable pour ouvrir les deux
   panneaux en même temps, comme sur le tableau de bord. */
.topbar { z-index:70 !important; }
/* Quand un tiroir est ouvert, la page est verrouillee par drawer-menu.js.
   Cela supprime le rebond vertical mobile qui pouvait faire descendre la
   barre superieure et reveler le haut du tiroir derriere elle. */
html.drawer-open,
html.drawer-open body { overscroll-behavior:none; }
html.drawer-open body { overflow:hidden; }
.hamburger { flex:none; position:relative; z-index:62; width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(255,255,255,0.22); border-radius:10px; background:transparent; color:#fff; cursor:pointer; padding:0; transition:border-color .15s, background .15s; }
.hamburger:hover { border-color:rgba(255,255,255,0.55); background:rgba(255,255,255,0.06); }
.hamburger svg { width:18px; height:18px; stroke:currentColor; stroke-width:2; stroke-linecap:round; fill:none; }
/* Pastille de notification sur le hamburger droit : un message du fondateur
   (feedback) n'a pas encore été lu. Vert pâle, sans liseré (ni clair ni sombre). */
.hamburger--notify::after { content:''; position:absolute; top:-4px; right:-4px; width:10px; height:10px; border-radius:50%; background:#86efac; }
.drawer-backdrop { position:fixed; inset:0; background:transparent; opacity:0; visibility:hidden; transition:visibility .2s; z-index:60; }
.drawer-backdrop.is-open { opacity:1; visibility:visible; }
.drawer { position:fixed; top:0; bottom:0; width:var(--drawer-w, 280px); min-width:220px; max-width:92vw; background:#0a0a0a; border-right:1px solid rgba(255,255,255,0.08); box-shadow:0 0 40px rgba(0,0,0,0.5); z-index:61; display:flex; flex-direction:column; transition:transform .22s ease; }
.drawer--left { left:0; }
.drawer--right { right:0; left:auto; border-right:0; border-left:1px solid rgba(255,255,255,0.08); }
.drawer--left:not(.is-open) { transform:translateX(-100%); }
.drawer--right:not(.is-open) { transform:translateX(100%); }
.drawer.is-open { transform:translateX(0); }
/* Poignée de redimensionnement : moitié dans le tiroir, moitié dans la zone
   cliquable hors du panneau, pour rester facile à attraper au bord. */
.drawer__resize { position:absolute; top:0; bottom:0; width:10px; cursor:col-resize; z-index:2; touch-action:none; }
.drawer__resize::after { content:''; position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px; background:transparent; transition:background .12s; }
.drawer__resize:hover::after, .drawer__resize.is-drag::after { background:rgba(255,255,255,0.22); }
.drawer--left .drawer__resize { right:-5px; }
.drawer--right .drawer__resize { left:-5px; }
/* Le titre du tiroir vit désormais dans le corps (.drawer__section-title) : la
   tête ne sert plus que d'entretoise pour garder le corps sous la barre du haut. */
.drawer__head { box-sizing:border-box; flex:none; min-height:56px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 18px; border-bottom:1px solid rgba(255,255,255,0.08); }
/* Le drawer gauche s'ouvre par-dessus le hamburger qui l'a déclenché (même z-index élevé
   pour rester cliquable) : on décale son titre pour ne plus passer dessous. */
.drawer--left .drawer__head { padding-left:66px; }
.drawer__title { font-family:'Archivo',sans-serif; font-size:14px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#fff; }
.drawer__body { flex:1; min-height:0; overflow-y:auto; overscroll-behavior-y:contain; padding:10px; display:flex; flex-direction:column; gap:2px; scrollbar-width:thin; scrollbar-color:#fff transparent; }
/* Barre de défilement fine et blanche sur le fond sombre du tiroir. */
.drawer__body::-webkit-scrollbar { width:6px; }
.drawer__body::-webkit-scrollbar-track { background:transparent; }
.drawer__body::-webkit-scrollbar-thumb { background:#fff; border-radius:6px; }
/* La barre de défilement du menu de navigation reste sur son bord extérieur. */
.drawer--left .drawer__body { direction:rtl; }
.drawer--left .drawer__body > * { direction:ltr; }
.drawer__link { display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px; color:rgba(255,255,255,0.86); font-family:'Libre Franklin',sans-serif; font-size:14px; font-weight:500; text-decoration:none; background:transparent; border:0; width:100%; text-align:left; cursor:pointer; transition:background .12s; }
.drawer__link:hover { background:rgba(255,255,255,0.07); color:#fff; }
.drawer__link.is-current { background:rgba(255,255,255,0.10); color:#fff; }
.drawer__link svg { width:18px; height:18px; flex:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; fill:none; opacity:.85; }
.drawer__sep { height:1px; margin:8px 4px; background:rgba(255,255,255,0.08); }
.drawer__section-title { font-family:'Archivo',sans-serif; font-size:12px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:#fff; padding:6px 12px 6px; }
.drawer__soon-tag { margin-left:auto; flex:none; font-family:'Archivo',sans-serif; font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#22c55e; background:rgba(34,197,94,0.20); padding:2px 7px; border-radius:99px; }
.drawer__unread-dot { margin-left:auto; flex:none; width:10px; height:10px; border-radius:50%; background:#86efac; }
.drawer__mode { flex:none; margin-top:8px; padding:12px 10px 6px; border-top:1px solid rgba(255,255,255,0.08); direction:ltr; }
.drawer__mode-label { display:block; margin:0 0 8px 2px; color:rgba(255,255,255,0.62); font-family:'Archivo',sans-serif; font-size:10px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.drawer__mode-options { display:grid; grid-template-columns:1fr 1fr; gap:3px; padding:3px; border:1px solid rgba(255,255,255,0.12); border-radius:10px; background:rgba(255,255,255,0.04); }
.drawer__mode-option { min-width:0; padding:8px 6px; border:0; border-radius:7px; background:transparent; color:rgba(255,255,255,0.58); font-family:'Libre Franklin',sans-serif; font-size:12px; font-weight:600; cursor:pointer; transition:background .15s,color .15s,box-shadow .15s; }
.drawer__mode-soon { display:block; width:max-content; margin:3px auto 0; padding:2px 6px; border-radius:99px; background:rgba(34,197,94,0.20); color:#22c55e; font-family:'Archivo',sans-serif; font-size:8px; font-weight:800; letter-spacing:.07em; line-height:1; text-transform:uppercase; }
.drawer__mode-option.is-active .drawer__mode-soon { color:#16a34a; }
.drawer__mode-option:hover:not(:disabled) { color:#fff; }
.drawer__mode-option:disabled { cursor:not-allowed; color:rgba(255,255,255,0.38); }
.drawer__mode-option.is-active { background:#fff; color:#000; box-shadow:0 1px 5px rgba(0,0,0,0.24); }
.drawer__mode-option:disabled { color:rgba(255,255,255,0.32); cursor:not-allowed; }
.drawer__mode-option:disabled:hover { background:transparent; color:rgba(255,255,255,0.32); }
.drawer__mode-option:focus-visible { outline:2px solid #86efac; outline-offset:1px; }

/* Recherche globale, injectée par drawer-menu.js sur les pages outils. */
.global-search { position:relative; width:min(320px, 28vw); }
.global-search__field { height:38px; display:flex; align-items:center; gap:8px; padding:0 10px; border:1px solid rgba(255,255,255,0.22); border-radius:10px; background:rgba(255,255,255,0.04); color:rgba(255,255,255,0.64); transition:border-color .15s, background .15s, box-shadow .15s; }
.global-search__field:focus-within { border-color:rgba(255,255,255,0.62); background:rgba(255,255,255,0.07); box-shadow:0 0 0 3px rgba(255,255,255,0.08); color:#fff; }
.global-search__field svg { width:17px; height:17px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.global-search__input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:#fff; font:500 13px/1.2 'Libre Franklin',sans-serif; }
.global-search__input::placeholder { color:rgba(255,255,255,0.56); }
.global-search__input::-webkit-search-cancel-button { appearance:none; width:13px; height:13px; flex:none; background:rgba(255,255,255,0.56); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; cursor:pointer; }
.global-search__shortcut { flex:none; padding:2px 5px; border:1px solid rgba(255,255,255,0.15); border-radius:4px; color:rgba(255,255,255,0.5); font:600 10px/1 'Archivo',sans-serif; }
:root[data-theme="paper"] .global-search__field { border-color:var(--t-hamburger-border); color:#111; }
:root[data-theme="paper"] .global-search__field:focus-within { border-color:var(--t-hamburger-border-hov); color:#111; box-shadow:0 0 0 3px rgba(0,0,0,0.08); }
:root[data-theme="paper"] .global-search__input { color:#111; }
:root[data-theme="paper"] .global-search__input::placeholder { color:#111; opacity:1; }
:root[data-theme="paper"] .global-search__input::-webkit-search-cancel-button { background:#111; }
:root[data-theme="paper"] .global-search__shortcut { border-color:rgba(0,0,0,0.3); color:#111; }
.global-search__results { position:absolute; top:calc(100% + 8px); right:0; z-index:80; width:min(430px,calc(100vw - 28px)); max-height:min(62vh,460px); overflow-y:auto; overscroll-behavior:contain; padding:7px; border:1px solid rgba(255,255,255,0.13); border-radius:12px; background:var(--t-elevated); box-shadow:0 18px 42px rgba(0,0,0,0.42); scrollbar-width:thin; scrollbar-color:#fff transparent; }
.global-search__results[hidden] { display:none; }
.global-search__results::-webkit-scrollbar { width:6px; }
.global-search__results::-webkit-scrollbar-track { background:transparent; }
.global-search__results::-webkit-scrollbar-thumb { border-radius:6px; background:#fff; }
.global-search__summary { position:sticky; top:-7px; z-index:1; margin:-7px -7px 0; padding:6px 8px 8px; background:var(--t-elevated); color:rgba(255,255,255,0.52); font:700 10px/1.25 'Archivo',sans-serif; letter-spacing:.09em; text-transform:uppercase; }
.global-search__empty { margin:0; padding:10px 8px; color:rgba(255,255,255,0.72); font-size:13px; }
.global-search__result { width:100%; display:flex; align-items:center; gap:10px; padding:9px 8px; border:0; border-radius:8px; background:transparent; color:#fff; cursor:pointer; text-align:left; font:inherit; }
.global-search__result:hover, .global-search__result:focus-visible { background:rgba(255,255,255,0.09); outline:0; }
.global-search__kind { flex:none; min-width:68px; color:rgba(255,255,255,0.48); font:700 10px/1.2 'Archivo',sans-serif; letter-spacing:.07em; text-transform:uppercase; }
.global-search__copy { min-width:0; display:flex; flex-direction:column; gap:2px; }
.global-search__name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:600; }
.global-search__detail { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:rgba(255,255,255,0.52); font-size:11.5px; }
@media (max-width:1100px) { .global-search { width:190px; } .global-search__shortcut { display:none; } }
@media (max-width:760px) { .drawer__head { min-height:59px; } .global-search { position:static; flex:1; min-width:0; width:auto; } .global-search__results { right:14px; left:14px; width:auto; } .topbar:has(.global-search) { gap:8px; padding:10px 14px !important; } .topbar:has(.global-search) .topbar__left { flex:none; width:auto; gap:10px; } .topbar:has(.global-search) .topbar__doc { display:none; } .topbar:has(.global-search) .topbar__actions { flex:1; min-width:0; width:auto; } .topbar:has(.global-search) .topbar__actions > :not(.global-search):not(.hamburger) { display:none; } }

/* ═══ Étapes de la levée (tiroir gauche des pages outils), reprises du tableau de bord ═══ */
.drawer__link--step { flex-direction:column; align-items:stretch; gap:9px; }
.drawer__step-row { display:flex; align-items:center; gap:12px; }
.drawer__step-num { flex:none; width:22px; height:22px; display:grid; place-items:center; border-radius:6px; background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.72); font-family:'Archivo',sans-serif; font-weight:800; font-size:11px; }
.drawer__step-num svg { width:14px; height:14px; opacity:1; }
/* Barre d'avancement sous chaque étape : plus elle est verte, plus l'étape est aboutie. */
.drawer__step-bar { height:4px; margin-left:34px; border-radius:99px; background:rgba(255,255,255,0.09); overflow:hidden; }
.drawer__step-bar > span { display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,#10b981,#34d399); transition:width .45s ease; }
.drawer__link--step.is-done .drawer__step-num { background:rgba(16,185,129,0.20); color:#34d399; }
/* Étape en cours = vert « Forêt » de la marque. L'étape faite garde l'émeraude
   et sa coche : accent de marque = où l'on en est, succès = ce qui est bouclé. */
.drawer__link--step.is-current { background:rgba(21,128,61,0.28); color:#fff; }
.drawer__link--step.is-current .drawer__step-num { background:rgba(21,128,61,0.55); color:#d1fae5; }
.drawer__link--step.is-active { background:transparent; }
.drawer__link--step.is-active .drawer__step-num { background:#fff; color:#000; }
.drawer__steps-loading, .drawer__steps-empty { margin:0; padding:10px 12px; color:rgba(255,255,255,0.56); font-family:'Libre Franklin',sans-serif; font-size:13px; line-height:1.5; }
.drawer__steps-empty a { color:#86efac; }

/* -- Variante claire des menus ---------------------------------------------
   En mode Papier, les tiroirs et le menu de recherche suivent la coquille
   claire du SaaS au lieu de conserver leur ancienne surface noire. */
:root[data-theme="paper"] .drawer { background:#f7f6f3; border-color:#ddd9d1; box-shadow:0 18px 48px rgba(8,9,12,0.14); }
:root[data-theme="paper"] .drawer__head,
:root[data-theme="paper"] .drawer__mode { border-color:#ddd9d1; }
:root[data-theme="paper"] .drawer__title,
:root[data-theme="paper"] .drawer__section-title { color:#111; }
:root[data-theme="paper"] .drawer__body { scrollbar-color:#8a8578 transparent; }
:root[data-theme="paper"] .drawer__body::-webkit-scrollbar-thumb { background:#8a8578; }
:root[data-theme="paper"] .drawer__resize:hover::after,
:root[data-theme="paper"] .drawer__resize.is-drag::after { background:rgba(17,17,17,0.24); }
:root[data-theme="paper"] .drawer__link { color:#3f3b34; }
:root[data-theme="paper"] .drawer__link:hover { background:rgba(17,17,17,0.055); color:#111; }
:root[data-theme="paper"] .drawer__link.is-current { background:rgba(17,17,17,0.08); color:#111; }
:root[data-theme="paper"] .drawer__sep { background:#ddd9d1; }
:root[data-theme="paper"] .drawer__mode-label { color:#57534a; }
:root[data-theme="paper"] .drawer__mode-options { background:rgba(17,17,17,0.035); border-color:rgba(17,17,17,0.14); }
:root[data-theme="paper"] .drawer__mode-option { color:#57534a; }
:root[data-theme="paper"] .drawer__mode-option:hover { color:#111; background:rgba(17,17,17,0.05); }
:root[data-theme="paper"] .drawer__mode-option.is-active { background:#111; color:#fff; box-shadow:0 1px 5px rgba(8,9,12,0.18); }
:root[data-theme="paper"] .drawer__mode-option:disabled,
:root[data-theme="paper"] .drawer__mode-option:disabled:hover { color:#a8a29e; background:transparent; }
:root[data-theme="paper"] .drawer__step-num { background:rgba(17,17,17,0.06); color:#57534a; }
:root[data-theme="paper"] .drawer__step-bar { background:rgba(17,17,17,0.09); }
:root[data-theme="paper"] .drawer__link--step.is-current { background:rgba(21,128,61,0.10); color:#14532d; }
:root[data-theme="paper"] .drawer__link--step.is-current .drawer__step-num { background:rgba(21,128,61,0.18); color:#15803d; }
:root[data-theme="paper"] .drawer__link--step.is-active { background:rgba(17,17,17,0.055); color:#111; }
:root[data-theme="paper"] .drawer__link--step.is-active .drawer__step-num { background:rgba(17,17,17,0.06); color:#57534a; }
:root[data-theme="paper"] .drawer__steps-loading,
:root[data-theme="paper"] .drawer__steps-empty { color:#57534a; }
:root[data-theme="paper"] .drawer__steps-empty a { color:#15803d; }
:root[data-theme="paper"] .global-search__results { background:#fff; border-color:#e4e0d8; box-shadow:0 20px 50px rgba(8,9,12,0.14); scrollbar-color:#8a8578 transparent; }
:root[data-theme="paper"] .global-search__results::-webkit-scrollbar-thumb { background:#8a8578; }
:root[data-theme="paper"] .global-search__summary { background:#fff; color:#57534a; }
:root[data-theme="paper"] .global-search__empty { color:#57534a; }
:root[data-theme="paper"] .global-search__result { color:#111; }
:root[data-theme="paper"] .global-search__result:hover,
:root[data-theme="paper"] .global-search__result:focus-visible { background:rgba(17,17,17,0.055); }
:root[data-theme="paper"] .global-search__kind,
:root[data-theme="paper"] .global-search__detail { color:#6f6a60; }