/* ============================================================
   Nadelio Home v5 - self-hosted styles (zero CDN, RGPD/CSP safe)
   Faithful port of the Fable "DC" page. Desktop = pixel-identical
   to source; mobile responsive added below (>=860px unchanged).
   v5 recomposition: the VERDICT is the hero (giant Archivo Black
   headline), the 3D instrument + confidence bands serve it, and the
   bottom dock is 3 cards (questions, presence, action).
   Brass palette (#C6A15B), tooltips and transparency drawer.
   ============================================================ */

/* ---- self-hosted fonts, font-display:swap, /assets/v2/fonts/ ---- */
@font-face{
  font-family:'Archivo Black';
  font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/v2/fonts/archivo-black-400.woff2') format('woff2');
}
@font-face{
  font-family:'Archivo';
  font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/v2/fonts/archivo-400.woff2') format('woff2');
}
@font-face{
  font-family:'Archivo';
  font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/v2/fonts/archivo-500.woff2') format('woff2');
}
@font-face{
  font-family:'Archivo';
  font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/v2/fonts/archivo-600.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/v2/fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/v2/fonts/ibm-plex-mono-500.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/v2/fonts/ibm-plex-mono-600.woff2') format('woff2');
}

/* ---- global reset (verbatim from source <style>) ---- */
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#211A14;}
a{color:#E8DFD2;text-decoration:none;}
a:hover{color:#C6A15B;}
input{outline:none;}
::selection{background:#C6A15B;color:#211A14;}
@keyframes dotpulse{0%,100%{opacity:0.2;}50%{opacity:1;}}
@keyframes tipIn{from{opacity:0;}to{opacity:1;}}
@keyframes drawerIn{from{opacity:0;transform:translateX(18px);}to{opacity:1;transform:translateX(0);}}
@keyframes scrimIn{from{opacity:0;}to{opacity:1;}}
@media (prefers-reduced-motion: reduce){*{animation-duration:0.001ms!important;animation-iteration-count:1!important;transition-duration:0.001ms!important;}}

/* ---- interactive states (ex style-hover / style-focus) ----
   !important is required so these win over the source inline styles,
   exactly like the DC runtime applied its hover/focus overrides. */
.ndl-input:focus{border-bottom-color:#C6A15B !important;}

/* competitive field row: hovering it highlights the matching cluster in the
   3D cloud (nadelio.js setClusterHighlight/fieldOverH) - this background is
   just the DOM-side echo of that, subtle enough to never compete with the
   cloud itself. Background only (no size/layout change), so it composes
   safely with the row's own grid. */
.ndl-field-row{border-radius:2px;transition:background-color 0.2s ease;}
.ndl-field-row:hover{background-color:rgba(198,161,91,0.05);}

.ndl-run:hover{background:#FFF6E4 !important;}
.ndl-run:focus{outline:2px solid #E8DFD2;outline-offset:2px;}

.ndl-chip:hover{border-color:#E8DFD2 !important;color:#E8DFD2 !important;}
.ndl-chip:focus{outline:2px solid #E8DFD2;outline-offset:2px;}

/* text tooltip triggers: "comment on mesure", "echelle...", "presence..." */
.ndl-tip-text:hover{color:#C6A15B !important;border-bottom-color:#C6A15B !important;}
.ndl-tip-text:focus{outline:2px solid #E8DFD2;outline-offset:3px;}

/* circular info-dot trigger next to the focus score ("pourquoi une fourchette") */
.ndl-tip-dot:hover{color:#C6A15B !important;border-color:#C6A15B !important;}
.ndl-tip-dot:focus{outline:2px solid #E8DFD2;outline-offset:2px;}

/* header "transparence" link that opens the drawer */
.ndl-transp:hover{color:#C6A15B !important;border-bottom-color:#C6A15B !important;}
.ndl-transp:focus{outline:2px solid #E8DFD2;outline-offset:3px;color:#C6A15B;}

/* transparency drawer close button */
.ndl-drawer-close:hover{border-color:#E8DFD2 !important;color:#E8DFD2 !important;}
.ndl-drawer-close:focus{outline:2px solid #E8DFD2;outline-offset:2px;}

/* identité & marché panel (resolver/market control, console) */
.ndl-idfield{font-family:'IBM Plex Mono',Menlo,monospace;font-size:12px;color:#E8DFD2;background:#231D18;border:1px solid #463B30;padding:8px 10px;}
.ndl-idfield:focus{border-color:#C6A15B !important;outline:2px solid #E8DFD2;outline-offset:1px;}
#ndl-officialurl{width:100%;max-width:320px;box-sizing:border-box;}
#ndl-idtoggle:hover{color:#C6A15B !important;border-bottom-color:#C6A15B !important;}
#ndl-idtoggle:focus{outline:2px solid #E8DFD2;outline-offset:3px;color:#C6A15B;}
#ndl-idupdate:hover{border-color:#E8DFD2 !important;color:#FFF6E4 !important;}
#ndl-idupdate:focus{outline:2px solid #E8DFD2;outline-offset:2px;}
.ndl-id-change:hover{color:#C6A15B !important;border-bottom-color:#C6A15B !important;}
.ndl-id-change:focus{outline:2px solid #E8DFD2;outline-offset:3px;color:#C6A15B;}

/* Deep Audit CTA + monitoring link in the "aller plus loin" dock card */
.ndl-deep-cta:hover{background:#D9B87A !important;}
.ndl-deep-cta:focus{outline:2px solid #E8DFD2;outline-offset:2px;}
.ndl-mon-link:hover{color:#C6A15B !important;border-bottom-color:#C6A15B !important;}
.ndl-mon-link:focus{outline:2px solid #E8DFD2;outline-offset:3px;color:#C6A15B;}

/* standalone dossier download button (deep dossier, "garder ce dossier") */
.ndl-dl-btn:hover{border-color:#E8DFD2 !important;color:#FFF6E4 !important;}
.ndl-dl-btn:focus{outline:2px solid #E8DFD2;outline-offset:2px;}

/* share result / free-tier export affordances (verdict zone) */
.ndl-share-btn:hover{color:#C6A15B !important;border-bottom-color:#C6A15B !important;}
.ndl-share-btn:focus{outline:2px solid #E8DFD2;outline-offset:3px;color:#C6A15B;}

/* Stripe return path: retry button (pay error) + subscription banner close */
.ndl-pay-retry:hover{background:#FFF6E4 !important;}
.ndl-pay-retry:focus{outline:2px solid #E8DFD2;outline-offset:2px;}
.ndl-subbanner-close:hover{color:#E8DFD2 !important;}
.ndl-subbanner-close:focus{outline:2px solid #E8DFD2;outline-offset:2px;}

/* Deep Audit dossier (below the fold, tier=deep only): two columns above
   860px (score + price side, evidence/report main), one column stacked below,
   matching the [data-nadelio-body] collapse used by the hero. */
.ndl-deepgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,240px);gap:clamp(20px,3vw,40px);}
@media (max-width:860px){
  .ndl-deepgrid{grid-template-columns:1fr !important;}
}

/* persistent footer (legal/contact/methodology) - below the fold, reached by
   the same internal scroll as the deep dossier, never part of the hero grid. */
.ndl-footer{border-top:1px solid #362E24;padding:22px clamp(12px,1.8vw,26px) 30px;}
.ndl-footer-inner{max-width:960px;margin:0 auto;display:flex;flex-direction:column;gap:10px;}
.ndl-footer-brand{font-family:'Archivo Black','Arial Black',sans-serif;font-size:12px;letter-spacing:0.1em;color:#958772;}
.ndl-footer-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:'IBM Plex Mono','SFMono-Regular',Menlo,Consolas,monospace;font-size:11px;}
.ndl-footer-links a{color:#B2A694;border-bottom:1px solid #564D3C;}
.ndl-footer-links a:hover{color:#C6A15B;border-bottom-color:#C6A15B;}
.ndl-footer-links a:focus{outline:2px solid #E8DFD2;outline-offset:2px;}
.ndl-footer-sep{width:3px;height:3px;border-radius:50%;background:#463B30;flex-shrink:0;}

/* ---- responsive mobile (desktop >=860px stays identical) ----
   Ported from the v5 source <style>: below ~860px the 2-col body
   collapses to one column and the 3-up dock reflows to one column.
   The stacked order puts the console (brand input) first so a mobile
   visitor can type immediately, then the verdict and proof read below.
   Desktop DOM and layout are left byte-for-byte as v5. */
@media (max-width:860px){
  /* let the page grow taller than the viewport and scroll */
  [data-nadelio-main]{height:auto !important;min-height:100dvh;}
  /* stack the two body columns */
  [data-nadelio-body]{grid-template-columns:1fr !important;gap:20px !important;}
  /* console drops its right divider, gains a bottom one, sits second */
  [data-nadelio-console]{border-right:none !important;border-bottom:1px solid #362E24;padding-right:0 !important;padding-bottom:18px !important;justify-content:flex-start;min-height:0;order:1;}
  /* the 3-up dock reflows to a single column */
  [data-nadelio-dock]{grid-template-columns:1fr !important;}
  /* the idle offers strip (Deep Audit / Monitoring / Settlement) reflows too */
  .ndl-offers-grid{grid-template-columns:1fr !important;}
  /* keep the WebGL instrument tall enough once stacked */
  [data-nadelio-proof]{min-height:200px !important;}
  /* the verdict/proof column reads below the input once stacked */
  .ndl-right{order:2;}
}

/* ---- small phones (<=560px): the tagline is gone entirely (was the middle
   header node), so at 560px itself the header is just wordmark + badge +
   transparency and fits on its own (verified). Below ~540px though the badge
   text ("Google + AI, bounded measurement" / FR equivalent) plus the
   transparency trigger no longer fit next to the wordmark on real phones
   (390px, 375px) and the transparency link - the only functional control in
   the header - got clipped off-screen entirely, which is worse than before.
   Drop the badge only below that narrower width so the trigger always stays
   reachable; keep it visible at the full 560px this page is asked to support. ---- */
@media (max-width:540px){
  .ndl-hbadge{display:none !important;}
}
@media (max-width:560px){
  [data-nadelio-proof]{min-height:220px !important;}
}

/* ---- short landscape (wide viewport, short height): a phone/tablet turned
   sideways, or a small resized desktop window, keeps the >860px 2-column
   desktop layout (it has the width for it) but that layout assumed a tall
   viewport - [data-nadelio-main] is height:100dvh with grid-template-rows
   auto minmax(0,1fr) auto and the header/console used vh-based clamps that
   do not shrink enough under ~480px of height, so the header collided with
   the h1 and the dock got clipped. Below 480px tall (and only where the
   860px breakpoint above does NOT already apply, i.e. still wide enough for
   2 columns) compact every vertical dimension and let the shell grow/scroll
   instead of clipping, exactly like the narrow-width path already does. */
@media (min-width:861px) and (max-height:480px) {
  [data-nadelio-root]{overflow-y:auto !important;}
  [data-nadelio-main]{height:auto !important;min-height:100dvh;padding:10px clamp(12px,1.8vw,26px) !important;gap:8px !important;}
  header{padding-bottom:6px !important;}
  [data-nadelio-console]{gap:10px !important;}
  [data-nadelio-body]{gap:clamp(12px,2vw,24px) !important;}
  #ndl-axiswrap{min-height:84px !important;}
  [data-nadelio-proof]{gap:6px !important;}
  [data-nadelio-dock]{min-height:76px !important;}
}

/* comfortable touch targets on coarse pointers (>=44px) */
@media (pointer:coarse){
  .ndl-run{min-height:44px;}
  .ndl-chip{min-height:44px;}
  .ndl-tip-text{min-height:44px;}
  .ndl-transp{min-height:44px;}
  .ndl-drawer-close{width:44px;height:44px;}
  .ndl-deep-cta{min-height:44px;}
  .ndl-mon-link{min-height:44px;display:inline-flex;align-items:center;}
  .ndl-dl-btn{min-height:44px;}
  #ndl-idtoggle{min-height:44px;}
  #ndl-idupdate{min-height:44px;}
  .ndl-footer-links a{min-height:44px;display:inline-flex;align-items:center;}
}