/* ==========================================================================
   Site.css — Design System Cartax (responsive, accessible, safe overflow)
   ========================================================================== */

/* ====== Tokens ============================================================ */
:root{
  --brand:#04AFFF; --brand-2:#0078FF;
  --ink:#0B0F1E; --ink-2:#121933;

  --bg:#0b1120;
  --bg-accent:
    radial-gradient(1100px 700px at 10% -15%, rgba(0,120,255,.15), transparent 55%),
    radial-gradient(900px 600px at 95% 0%, rgba(4,175,255,.10), transparent 45%);
  --panel:#0f172a;
  --card: color-mix(in srgb, var(--panel) 78%, #0b1220 22%);
  --line:#22314f;
  --text:#e7ecf7;
  --muted:#9fb0cc;

  --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444;

  --shadow:0 20px 50px rgba(0,0,0,.35);
  --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent);

  --radius:18px; --radius-sm:12px;

  --container-max:1360px;

  --logo-url: url("/wp-content/uploads/cartax/logo-cartax-be.svg");
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#f7faff;
    --bg-accent:
      radial-gradient(1200px 800px at 5% -10%, rgba(0,120,255,.10), transparent 60%),
      radial-gradient(800px 600px at 100% 0%, rgba(4,175,255,.08), transparent 40%);
    --panel:#ffffff; --card:#ffffff; --line:#e6eef7;
    --text:#0f172a; --muted:#556581;
  }
}

@media (min-width:1280px){
  :root{ --container-max:1440px }
}

/* ====== Reset + base ===================================================== */
*{ box-sizing:border-box }
html,body{ margin:0; width:100%; overflow-x:hidden }
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial, sans-serif;
  color:var(--text); background:var(--bg);
  line-height:1.55; background-image:var(--bg-accent);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
@media (max-width:900px){
  body{ background-attachment:scroll }
}

/* Bloque le scroll quand le menu mobile est ouvert */
body.no-scroll{ overflow:hidden }

img,svg,video,iframe{ max-width:100%; height:auto; display:block }
a{ color:var(--brand); text-decoration:underline; text-underline-offset:2px }
a:hover{ text-decoration-thickness:2px }
:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:10px }

@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ====== Layout =========================================================== */
.container{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:clamp(16px, 4vw, 24px);
}

/* Grid helpers */
.grid{ display:grid; gap:clamp(16px, 2.2vw, 24px) }
.cols-2{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 360px), 1fr)) }
.cols-3{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)) }
.cols-4{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)) }

/* Eviter la poussée horizontale */
.container, .grid, .panel, .card, .btn, .nav-links, .menu, .menu > li{ min-width:0 }
h1,h2,h3,p,li,small,.note{ overflow-wrap:anywhere; word-break:break-word; hyphens:auto }

/* ====== Header / Nav ===================================================== */
header.site-header{
  position:sticky; top:0; z-index:1000;
  backdrop-filter:saturate(140%) blur(8px);
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding-block:14px;
}
.brand{ display:flex; align-items:center; gap:14px; font-weight:800 }
.brand img{ height:28px; width:auto; display:block }

/* Desktop links */
.nav-links{ display:flex; align-items:center }
.menu{ display:flex; gap:14px; list-style:none; margin:0; padding:0 }
.menu > li > a{
  display:inline-block; padding:10px 12px; border-radius:10px;
  color:inherit; text-decoration:none; border:1px solid transparent;
}
.menu > li > a:hover{
  background: color-mix(in srgb, var(--panel) 70%, transparent);
}

/* Mobile toggle button */
.nav-toggle{
  display:none; position:relative; width:44px; height:40px;
  border:1px solid var(--line); border-radius:10px;
  background:var(--card); cursor:pointer; color:var(--text);
}
.nav-toggle-bar{
  position:absolute; left:8px; right:8px; height:2px; background:currentColor; border-radius:2px;
}
.nav-toggle-bar:nth-child(1){ top:10px }
.nav-toggle-bar:nth-child(2){ top:18px }
.nav-toggle-bar:nth-child(3){ top:26px }


/* ====== Buttons =========================================================== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:12px;
  border:1px solid var(--line); background:var(--card); color:var(--text);
  cursor:pointer; box-shadow:var(--shadow);
  transition: transform .08s ease, box-shadow .12s ease, background-color .12s ease;
  text-decoration:none; white-space:normal; max-inline-size:100%;
}
.btn:hover{ transform:translateY(-1px) }
.btn:active{ transform:translateY(0) scale(.99) }
.btn.primary{
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#071425; border-color:transparent; font-weight:800;
}
.btn.ghost{ background:transparent }
.btn.small{ padding:8px 10px; border-radius:10px }

/* ====== Content =========================================================== */
.panel{
  background: color-mix(in srgb, var(--panel) 82%, black 8%);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(18px, 2.2vw, 24px); box-shadow:var(--shadow);
}
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:clamp(14px, 2vw, 20px); box-shadow:var(--shadow);
}

/* Forms */
label{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px }
input,select{
  width:100%; padding:12px; border-radius:12px;
  border:1px solid var(--line);
  background:color-mix(in srgb, var(--panel) 85%, black 15%);
  color:var(--text); transition:border-color .12s ease, box-shadow .12s ease;
}
input:focus, select:focus{
  outline:none; border-color:color-mix(in srgb, var(--brand) 40%, var(--line));
  box-shadow:var(--ring);
}
input[type="number"]{ appearance:textfield }

.hr{ height:1px; background:var(--line); margin:16px 0 }
.badge{
  display:inline-block; padding:4px 8px; border:1px solid var(--line);
  border-radius:999px; background:color-mix(in srgb, var(--panel) 80%, white 10%);
  color:var(--muted); font-size:12px; margin-bottom:6px
}
.result{ font-weight:900; font-size:clamp(22px, 2.6vw, 32px) }
.money{ font-variant-numeric:tabular-nums }
.note{ font-size:12px; color:var(--muted) }

/* ====== Footer (global) =================================================== */
footer{
  border-top:1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
}
.footer-grid{
  display:grid; gap:24px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.legal{ font-size:12px; color:var(--muted) }

/* ====== Utilities ========================================================= */
.hidden{ display:none !important }

/* Simulateur host (Shadow DOM inside) — empêche tout overflow du host */
#simulateur-container{ display:block; max-inline-size:100%; overflow:hidden }

/* ====== Print ============================================================= */
@media (print){
  header.site-header, .hero a.btn, .nav .nav-links, .footer-grid{ display:none !important }
  body{ background:#fff; color:#000 }
  .panel,.card{ box-shadow:none; border:1px solid #ddd }
  a{ color:#000; text-decoration:underline }
}

/* ====== Light mode mobile dropdown ======================================= */
@media (prefers-color-scheme: light){
  header.site-header{
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    border-bottom-color:var(--line);
  }
  .nav-toggle{ background:#fff; border-color:#e5eaf5 }
  @media (max-width:900px){
    .nav-links{ background:#fff; border-bottom:1px solid #e5eaf5 }
    .menu > li > a{ background:#fff; border-color:#e5eaf5 }
  }
}

/* === CARTAX — Force mobile gutters (override thème) ===================== */
:root{ --gutter-x: clamp(10px, 3.2vw, 16px) }

@media (max-width:900px){
  .container,
  header.site-header .container,
  footer .container,
  .site-main .container{
    padding-left:var(--gutter-x) !important;
    padding-right:var(--gutter-x) !important;
  }

  .wrap,
  .site-content,
  .content-area,
  .entry-content,
  .wp-site-blocks,
  .wp-block-post-content,
  .wp-block-group.has-global-padding,
  .wp-block-template-part{
    padding-left:var(--gutter-x) !important;
    padding-right:var(--gutter-x) !important;
  }

  .alignfull,
  .is-layout-constrained{
    padding-left:var(--gutter-x) !important;
    padding-right:var(--gutter-x) !important;
  }

  .panel,.card{
    padding-left:max(12px, calc(var(--gutter-x) - 2px)) !important;
    padding-right:max(12px, calc(var(--gutter-x) - 2px)) !important;
    border-width:.5px;
  }
}

/* XS (≤380px) */
@media (max-width:380px){
  :root{ --gutter-x:10px }
}

/* ====== Footer (bloc) ===================================================== */
.site-footer{
  background: var(--panel, #f7f9fc);
  border-top:1px solid var(--line, #e5e7eb);
  margin-top:48px;
}
.site-footer .container{
  max-width:1200px;
  margin-inline:auto;
  padding:24px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  align-items:start;
}
@media (min-width:768px){
  .footer-grid{ grid-template-columns:auto 1fr }
}
.footer-brand strong{ font-weight:700 }
.footer-brand small{ color:var(--muted, #6b7280) }
.footer-nav strong{ display:block; margin-bottom:8px }
.footer-menu{
  list-style:none; margin:0; padding:0; columns:2; column-gap:24px;
}
@media (min-width:768px){
  .footer-menu{ columns:3 }
}
.footer-menu li{ break-inside:avoid; margin:4px 0 }
.footer-menu a{ display:inline-block; text-decoration:none; color:inherit }
/* Neutralise d’éventuelles règles globales qui cassent le texte */
.footer-menu,
.footer-menu *{
  white-space:normal; word-break:normal; overflow-wrap:break-word; writing-mode:horizontal-tb;
}

/* ====== Responsive tables (global) ======================================= */
.table-responsive{
  position:relative;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--radius-sm, 12px);
}
.table-responsive::after{
  content:"";
  position:absolute; top:0; right:0; bottom:0; width:28px;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--panel, #fff) 88%, transparent));
  opacity:.9;
}

/* Support .ctx (template) & .ct-table (legacy) */
table.ctx, .ct-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
table.ctx th, table.ctx td,
.ct-table th, .ct-table td{
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  background:var(--card);
  vertical-align:middle;
  font-variant-numeric:tabular-nums;
}
.table-responsive thead th{
  position:sticky; top:0; z-index:3;
  background:color-mix(in srgb, var(--panel) 92%, white 8%);
  border-bottom:1px solid var(--line);
}

/* 1re colonne sticky */
table.ctx th:first-child, table.ctx td:first-child,
.ct-table th:first-child, .ct-table td:first-child{
  position:sticky; left:0; z-index:4; text-align:left;
  background:var(--card);
  box-shadow:8px 0 12px -8px rgba(0,0,0,.06);
}

/* --- Mobile table tweaks --- */
@media (max-width:900px){

  /* Réduit la largeur totale nécessaire */
  table.ctx, .table-responsive .ct-table{
    table-layout:fixed;
    min-width:660px; /* avant 760px */
  }

  /* Cellules compactes et stables */
  table.ctx th, table.ctx td,
  .table-responsive .ct-table th, .table-responsive .ct-table td{
    padding:8px 8px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:16ch;
  }

  /* 1re colonne lisible (pas d’ellipsis) */
  table.ctx th:first-child, table.ctx td:first-child,
  .table-responsive .ct-table th:first-child, .table-responsive .ct-table td:first-child{
    white-space:nowrap;
    overflow:visible;
    text-overflow:clip;
    max-width:none;
    min-width:10ch;
    box-shadow:10px 0 12px -10px rgba(0,0,0,.08);
  }

  /* Colonnes via <colgroup> */
  col.col-xnarrow{ width:9ch }  /* CV plus étroit */
  col.col-narrow { width:9ch }  /* Cyl (l) compact mais lisible */
  col.col-wide   { width:auto } /* Montant prend le reste */

  /* Légère respiration côté gauche */
  .table-responsive{ padding-left:2px }
}

/* Coins arrondis agréables */
.table-responsive thead th:first-child{ border-top-left-radius:12px }
.table-responsive thead th:last-child { border-top-right-radius:12px }
.table-responsive tbody tr:last-child td:first-child{ border-bottom-left-radius:12px }
.table-responsive tbody tr:last-child td:last-child { border-bottom-right-radius:12px }

/* ==== Incognito / Private mode fix — force LIGHT theme =================== */
/* 1) Indique des contrôles clairs (input, select, etc.) */
:root{ color-scheme:light }

/* 2) Même si le navigateur dit "dark", garde les tokens du thème clair */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#f7faff;
    --bg-accent:
      radial-gradient(1200px 800px at 5% -10%, rgba(0,120,255,.10), transparent 60%),
      radial-gradient(800px 600px at 100% 0%, rgba(4,175,255,.08), transparent 40%);
    --panel:#ffffff;
    --card:#ffffff;
    --line:#e6eef7;
    --text:#0f172a;
    --muted:#556581;
  }

  body{
    background:var(--bg);
    color:var(--text);
    background-image:var(--bg-accent);
  }
  header.site-header{
    background:color-mix(in srgb, var(--bg) 85%, transparent);
    border-bottom-color:var(--line);
  }
  .panel{ background:#fff }
  .card{ background:#fff }
  input,select{
    background:#fff;
    color:#0f172a;
    border-color:var(--line);
  }
  .nav-toggle{ background:#fff; border-color:#e5eaf5 }
  @media (max-width:900px){
    .nav-links{ background:#fff; border-bottom:1px solid #e5eaf5 }
    .menu > li > a{ background:#fff; border-color:#e5eaf5 }
  }
}

/* Keep these near the end of site.css */
header.site-header{ overflow:visible; }  /* don’t clip the dropdown */
.nav{ position:relative; }

@media (max-width:900px){
  .nav-toggle{ display:block; z-index:100002; }  /* stays clickable above dropdown */

  .nav-links{
    position:absolute;
    inset-inline:0;
    top:calc(100% + 8px);
    display:none;
    padding:8px clamp(16px, 4vw, 24px);
    background:var(--card);
    border-bottom:1px solid var(--line);
    z-index:100001; /* must be > 99999 (admin bar) */
    transform-origin:top center;
    transition:opacity .15s ease, transform .15s ease;
  }

  .nav-toggle[aria-expanded="true"] + .nav-links,
  .nav.is-open .nav-links{
    display:block;
    opacity:1; transform:scaleY(1);
  }
}

/* ==== Mobile menu: readable list ==== */
@media (max-width:900px){
  /* Full-width panel with subtle separation */
  .nav-links{
    background: var(--card);
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
    border-bottom: 1px solid var(--line);
    padding: 4px clamp(16px, 4vw, 24px);
  }

  /* Stack items as a simple list (no pills) */
  .nav-links .menu{
    flex-direction: column;
    gap: 0;                /* no big gaps */
    width: 100%;
  }

  .nav-links .menu > li{
    width: 100%;
  }

  .nav-links .menu > li + li{
    border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  }

  .nav-links .menu > li > a{
    display: block;
    width: 100%;
    padding: 14px 2px;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 600;

    /* override the “pill/card” look */
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    /* allow normal wrapping */
    white-space: normal !important;
    overflow: visible;
    text-overflow: clip;
    text-decoration: none;          /* cleaner menu look */
    color: inherit;
  }

  .nav-links .menu > li > a:hover,
  .nav-links .menu > li > a:focus{
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    border-radius: 8px;             /* subtle hover shape only */
  }
}

/* ==== MOBILE NAV — robust, hidden-attribute based ======================= */
/* Base safety */
.nav { position: relative; }
header.site-header { overflow: visible; }

/* Never rely on adjacency; respect [hidden] everywhere */
.nav-links[hidden] { display: none !important; }

/* Mobile layout */
@media (max-width: 900px){
  .nav-toggle{
    display:block;
    z-index:100002; /* above dropdown */
  }

  /* Panel default (closed) state */
  .nav-links{
    position:absolute;
    inset-inline:0;
    top:calc(100% + 8px);
    max-height:calc(100dvh - 72px);
    overflow:auto;
    -webkit-overflow-scrolling:touch;

    background:var(--card);
    border-bottom:1px solid var(--line);
    box-shadow: 0 12px 28px rgba(0,0,0,.18);

    padding: 4px clamp(16px, 4vw, 24px);
    z-index:100001;           /* > admin bar in most cases */
    transform-origin: top center;

    /* animation states (use opacity+transform, not display) */
    opacity:0;
    transform: scaleY(.98);
    pointer-events:none;
  }

  /* Open state — toggled by JS via .is-open & panel.hidden=false */
  .nav.is-open .nav-links{
    opacity:1;
    transform: scaleY(1);
    pointer-events:auto;
    transition: opacity .15s ease, transform .15s ease;
  }

  /* List style: flat, readable, no pills */
  .nav-links .menu{
    display:flex; flex-direction:column; gap:0; width:100%;
    list-style:none; margin:0; padding:0;
  }
  .nav-links .menu > li{ width:100% }
  .nav-links .menu > li + li{
    border-top:1px solid color-mix(in srgb, var(--line) 70%, transparent);
  }
  .nav-links .menu > li > a{
    display:block; width:100%;
    padding:14px 2px;
    font-size:16px; line-height:1.35; font-weight:600;
    color:inherit; text-decoration:none;

    /* kill pill look from desktop */
    border:none !important; border-radius:0 !important;
    background:transparent !important; box-shadow:none !important;

    white-space:normal !important; overflow:visible; text-overflow:clip;
  }
  .nav-links .menu > li > a:hover,
  .nav-links .menu > li > a:focus{
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    border-radius:8px;
  }

  /* Prevent any horizontal push while open */
  html, body, .nav-links { max-width:100vw; overflow-x:hidden; }
}

/* Desktop reset — ensure inline nav regardless of JS state */
@media (min-width: 901px){
  .nav-links{
    position:static;
    display:block !important;
    opacity:1 !important;
    transform:none !important;
    pointer-events:auto !important;
    padding:0;
    background:transparent;
    border:0;
    box-shadow:none;
  }
  .menu{ display:flex; gap:14px; flex-direction:row; }
}