/*
 * Le site vitrine de leviziotech.ca.
 *
 * 🔴 Sorti du gabarit le 2026-10-06 : la page pesait 380 Ko, dont 258 Ko
 *    d'images encodées en base64 et 20 Ko de styles. Rien n'était mis en
 *    cache — chaque visite retéléchargeait tout. Elle fait maintenant 35 Ko,
 *    et ce fichier n'est chargé qu'une fois.
 *
 * ⚠️ Ce fichier sert les DEUX visages du gabarit : la vitrine de
 *    leviziotech.ca et le portail d'un cabinet. Une règle retirée ici peut
 *    défaire une page qu'on ne regardait pas.
 */
:root{
    /* LIGHT — ivoire chaud (biais or) + vert forêt + or */
    --bone:#F1EFE6;
    --porcelain:#FBFAF4;
    --card:#FFFFFF;
    --ink:#14271C;
    --muted:#5C6B5F;
    --hair:#E2DFD1;
    --spruce:#123A28;      /* vert forêt marque */
    --spruce-deep:#021E1C; /* vert très profond (logo) */
    --gold:#9A7726;        /* or lisible sur clair (accent texte/liens/coches) */
    --gold-ink:#7E611E;
    --gold-tint:#F4EDD9;
    --gold-a:#E7C878;      /* dégradé métallique bouton */
    --gold-b:#C0902F;
    --btn-text:#1B2A15;    /* texte foncé sur bouton or */
    /* couleurs sémantiques : disponible / attention / occupé (≠ accent) */
    --ok:#2E9463;--ok-tint:#E4F1E9;
    --warn:#B0842A;--warn-tint:#F5EBD3;
    --busy:#B0503F;--busy-tint:#F4E5E1;

    --ground:var(--bone);--surface:var(--card);--text:var(--ink);--border:var(--hair);

    --font-display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
    --font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    --wrap:1160px;--r:14px;
    --shadow:0 1px 2px rgba(11,31,21,.06),0 14px 36px -20px rgba(11,31,21,.30);
  }
  @media (prefers-color-scheme:dark){
    :root{
      --bone:#04211D;--porcelain:#062A24;--card:#0C332B;--ink:#EAF1EA;--muted:#9DB3A4;
      --hair:#264534;--spruce:#123A28;--spruce-deep:#081910;
      --gold:#E4C36A;--gold-ink:#F0D488;--gold-tint:#1E3A2A;--gold-a:#EBCD79;--gold-b:#C6982F;--btn-text:#14271C;
      --ok:#4FB07A;--ok-tint:#153327;--warn:#D6A64B;--warn-tint:#33280F;--busy:#D0685B;--busy-tint:#331C18;
      --card:#0C332B;
      --ground:var(--bone);--surface:var(--card);--text:var(--ink);--border:var(--hair);
      --shadow:0 1px 2px rgba(0,0,0,.35),0 20px 44px -22px rgba(0,0,0,.7);
    }
  }
  :root[data-theme="light"]{
    --bone:#F1EFE6;--porcelain:#FBFAF4;--card:#FFFFFF;--ink:#14271C;--muted:#5C6B5F;--hair:#E2DFD1;
    --spruce:#123A28;--spruce-deep:#021E1C;--gold:#9A7726;--gold-ink:#7E611E;--gold-tint:#F4EDD9;
    --gold-a:#E7C878;--gold-b:#C0902F;--btn-text:#1B2A15;
    --ok:#2E9463;--ok-tint:#E4F1E9;--warn:#B0842A;--warn-tint:#F5EBD3;--busy:#B0503F;--busy-tint:#F4E5E1;
    --ground:var(--bone);--surface:var(--card);--text:var(--ink);--border:var(--hair);
    --shadow:0 1px 2px rgba(11,31,21,.06),0 14px 36px -20px rgba(11,31,21,.30);
  }
  :root[data-theme="dark"]{
    --bone:#04211D;--porcelain:#062A24;--card:#0C332B;--ink:#EAF1EA;--muted:#9DB3A4;--hair:#264534;
    --spruce:#123A28;--spruce-deep:#081910;--gold:#E4C36A;--gold-ink:#F0D488;--gold-tint:#1E3A2A;
    --gold-a:#EBCD79;--gold-b:#C6982F;--btn-text:#14271C;
    --ok:#4FB07A;--ok-tint:#153327;--warn:#D6A64B;--warn-tint:#33280F;--busy:#D0685B;--busy-tint:#331C18;
    --ground:var(--bone);--surface:var(--card);--text:var(--ink);--border:var(--hair);
    --shadow:0 1px 2px rgba(0,0,0,.35),0 20px 44px -22px rgba(0,0,0,.7);
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
  body{margin:0;background:var(--ground);color:var(--text);font-family:var(--font-body);
    font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;letter-spacing:.1px}
  h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.12;text-wrap:balance;margin:0}
  p{margin:0}a{color:inherit}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
  .eyebrow{text-transform:uppercase;letter-spacing:.22em;font-size:12px;font-weight:700;color:var(--gold)}
  .tnum{font-variant-numeric:tabular-nums}
  .section{padding:88px 0}
  .lede{color:var(--muted);font-size:19px;max-width:62ch}

  /* eagle emblem */
  .eagle{width:36px;height:36px;flex:0 0 auto;display:block;border-radius:9px;object-fit:cover;box-shadow:0 0 0 1px rgba(228,195,106,.28)}
  .eagle.lg{width:128px;height:128px;border-radius:18px;box-shadow:0 10px 30px -12px rgba(0,0,0,.55),0 0 0 1px rgba(228,195,106,.3)}

  header.bar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--ground) 86%,transparent);
    backdrop-filter:saturate(1.3) blur(12px);border-bottom:1px solid var(--border)}
  .bar-in{display:flex;align-items:center;gap:22px;height:70px}
  .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
  .brand .wm{display:flex;flex-direction:column;line-height:1}
  .brand .wm b{font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:.04em}
  .brand .wm small{font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-top:3px;font-weight:700}
  .wordmark{height:28px;width:auto;display:block}
  .nav{display:flex;gap:26px;margin-left:auto}
  .nav a{color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:500}
  .nav a:hover{color:var(--text)}
  .bar-cta{display:flex;align-items:center;gap:10px}
  .btn{font-size:14.5px;font-weight:600;border-radius:10px;padding:10px 18px;cursor:pointer;
    border:1px solid transparent;text-decoration:none;display:inline-flex;align-items:center;gap:8px;
    transition:transform .12s ease,filter .15s,background .15s,border-color .15s;white-space:nowrap}
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:linear-gradient(135deg,var(--gold-a),var(--gold-b));color:var(--btn-text);
    box-shadow:0 1px 0 rgba(255,255,255,.25) inset}
  .btn-primary:hover{filter:brightness(1.05)}
  .btn-ghost{background:transparent;border-color:var(--border);color:var(--text)}
  .btn-ghost:hover{border-color:var(--gold);color:var(--gold-ink)}
  .btn-dark{background:var(--spruce);color:#F3E6C4}
  .btn-dark:hover{background:var(--spruce-deep)}
  .icon-btn{border:1px solid var(--border);background:var(--surface);width:38px;height:38px;border-radius:10px;
    display:grid;place-items:center;cursor:pointer;color:var(--text)}
  :focus-visible{outline:2.5px solid var(--gold);outline-offset:2px;border-radius:6px}

  /* HERO — identité fixe : vert forêt + or (montre le logo dans son milieu natif) */
  .hero{position:relative;overflow:hidden;background:
    radial-gradient(120% 90% at 84% -18%,rgba(233,201,120,.18),transparent 55%),
    linear-gradient(180deg,#052824,#021E1C);color:#EAF1EA;border-bottom:1px solid rgba(228,195,106,.16)}
  .hero-in{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center;padding:72px 0 84px}
  .hero .eyebrow{color:#E4C36A}
  .hero h1{font-size:clamp(38px,5.4vw,62px);letter-spacing:-.015em;color:#FBF7EC}
  .hero .lede{margin-top:22px;font-size:20px;color:#B7CabF}
  .hero-actions{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
  .hero .btn-ghost{border-color:rgba(228,195,106,.4);color:#F0E5C8}
  .hero .btn-ghost:hover{border-color:#E4C36A;color:#fff}
  .trust{display:flex;gap:30px;margin-top:40px;flex-wrap:wrap}
  .trust .n{font-family:var(--font-display);font-size:27px;font-weight:600;line-height:1;color:#E9CF86}
  .trust .l{color:#96A99D;font-size:13px;margin-top:5px}
  .hero-emblem{display:flex;justify-content:center;margin-bottom:14px}
  .invoice{background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);
    padding:24px 24px 20px;position:relative;color:var(--text)}
  .invoice::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;
    background:linear-gradient(90deg,var(--spruce),var(--gold-b),var(--gold-a));border-radius:18px 18px 0 0}
  .inv-top{display:flex;justify-content:space-between;align-items:flex-start;margin-top:6px}
  .inv-lbl{font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);font-weight:700}
  .inv-badge{font-size:11.5px;font-weight:700;color:var(--ok);background:var(--ok-tint);padding:5px 10px;border-radius:999px}
  .inv-row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--border);font-size:14.5px}
  .inv-row:last-of-type{border-bottom:0}
  .inv-row .amt{font-weight:600;font-variant-numeric:tabular-nums}
  .inv-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;padding-top:14px;border-top:2px solid var(--text)}
  .inv-total .big{font-family:var(--font-display);font-size:30px;font-weight:600;font-variant-numeric:tabular-nums}
  .inv-pay{margin-top:16px;width:100%;justify-content:center}
  .sq{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);margin-top:12px;justify-content:center;width:100%}
  .sq b{color:var(--text)}

  .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
  .plan{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:26px 22px 24px;
    display:flex;flex-direction:column;position:relative;transition:transform .15s,box-shadow .15s,border-color .15s}
  .plan:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--gold) 45%,var(--border))}
  .plan.feat{border-color:var(--gold);box-shadow:var(--shadow)}
  .plan.feat::after{content:"Le plus choisi";position:absolute;top:-11px;left:22px;
    background:linear-gradient(135deg,var(--gold-a),var(--gold-b));color:var(--btn-text);font-size:11px;font-weight:700;
    letter-spacing:.05em;padding:4px 11px;border-radius:999px}
  .plan .pk{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:700}
  .plan h3{font-size:25px;margin:6px 0 2px}
  .plan .sub{color:var(--muted);font-size:13.5px;min-height:38px}
  .price{display:flex;align-items:baseline;gap:4px;margin:14px 0 2px}
  .price .cur{font-size:18px;font-weight:600;color:var(--muted)}
  .price .num{font-size:40px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .price .per{color:var(--muted);font-size:14px}
  .plan ul{list-style:none;padding:0;margin:16px 0 20px;display:flex;flex-direction:column;gap:9px;flex:1}
  .plan li{font-size:14px;padding-left:24px;position:relative}
  .plan li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:8px;
    border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
  .plan li.muted{color:var(--muted)}
  /* Services (04) */
  .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
  @media(max-width:980px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:640px){.svc-grid{grid-template-columns:1fr}}
  .svc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:28px 24px;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
  .svc:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--gold) 45%,var(--border))}
  .svc .ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;
    background:var(--gold-tint);color:var(--gold-ink);margin-bottom:18px}
  .svc h3{font-size:19px;margin:0 0 8px}
  .svc p{color:var(--muted);font-size:14.5px;line-height:1.6;margin:0 0 14px}
  .svc ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
  .svc li{font-size:13.5px;padding-left:22px;position:relative}
  .svc li::before{content:"";position:absolute;left:0;top:6px;width:12px;height:7px;
    border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
  .svc-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:44px}
  .plan li.muted::before{border-color:var(--muted)}
  .setup{display:flex;gap:10px;align-items:center;background:var(--gold-tint);border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);
    border-radius:10px;padding:12px 15px;margin:40px 0;font-size:14px}
  .setup b{font-variant-numeric:tabular-nums}
  .note-row{color:var(--muted);font-size:13px;margin-top:6px;display:flex;gap:8px;align-items:flex-start}
  /* Forfaits (2026-10-17) : la composition sous le prix, puis Microsoft 365 et le
     numéro personnel, obligatoires et facturés à part. La hauteur minimale aligne
     les listes des quatre cartes (la ligne de Connect est plus courte). */
  .plan .compo{color:var(--muted);font-size:12.5px;line-height:1.4;min-height:35px}
  .verdict.oblig{margin:12px 0 22px}
  .oblig-liste{list-style:none;padding:0;margin:10px 0 6px;display:flex;flex-direction:column;gap:7px;font-size:14px}
  .oblig-liste b{font-weight:700}
  /* `.btn` ne passe jamais à la ligne : « Choisir LeViZio OS Partenaire » imposait sa
     largeur à la carte, et `1fr` ne descend pas sous ce minimum. Mesuré le 2026-10-17
     à 1280 px : 4 colonnes de 1 263 px dans une grille de 1 112 px, la 4ᵉ carte
     coupée, 68 px de défilement horizontal sur toute la page. */
  .plan .btn{white-space:normal;text-align:center}

  .tablewrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r);margin-top:38px;background:var(--surface)}
  table{width:100%;border-collapse:collapse;min-width:640px;font-size:14.5px}
  thead th{background:var(--spruce);color:#F1E6C6;text-align:left;padding:15px 18px;font-weight:600;font-size:13px;
    text-transform:uppercase;letter-spacing:.08em}
  thead th:last-child{text-align:right}
  tbody td{padding:13px 18px;border-top:1px solid var(--border)}
  tbody td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
  tbody tr:nth-child(even){background:color-mix(in srgb,var(--gold-tint) 50%,transparent)}
  tr.tot td{background:var(--spruce-deep);color:#F1E6C6;font-weight:700;font-size:15px;border-top:0}
  tr.tot td:last-child{color:#F1E6C6}
  .verdict{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
  .vcard{border:1px solid var(--border);border-radius:var(--r);padding:22px;background:var(--surface)}
  .vcard.win{border-color:var(--gold);background:var(--gold-tint)}
  .vcard .vk{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:700}
  .vcard .vv{font-family:var(--font-display);font-size:30px;font-weight:600;margin-top:6px;font-variant-numeric:tabular-nums}
  .vcard .vd{color:var(--muted);font-size:14px;margin-top:4px}

  .plan-lay{display:grid;grid-template-columns:1.5fr 1fr;gap:30px;margin-top:40px;align-items:start}
  .floor{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px}
  .legend{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:16px;font-size:13px;color:var(--muted)}
  .legend span{display:inline-flex;align-items:center;gap:7px}
  .dot{width:11px;height:11px;border-radius:3px;display:inline-block}
  .d-ok{background:var(--ok)}.d-warn{background:var(--warn)}.d-busy{background:var(--busy)}
  .d-core{background:color-mix(in srgb,var(--spruce) 55%,var(--surface))}
  .fgrid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:64px;gap:8px}
  .cell{border-radius:9px;border:1px solid var(--border);display:flex;flex-direction:column;justify-content:center;
    align-items:center;font-size:12px;text-align:center;cursor:pointer;padding:4px;transition:transform .12s,box-shadow .12s;
    background:var(--surface);color:var(--text);position:relative;font-weight:600}
  .cell .cs{font-weight:500;font-size:10.5px;color:var(--muted)}
  .cell.ok{background:var(--ok-tint);border-color:color-mix(in srgb,var(--ok) 45%,var(--border))}
  .cell.warn{background:var(--warn-tint);border-color:color-mix(in srgb,var(--warn) 45%,var(--border))}
  .cell.busy{background:var(--busy-tint);border-color:color-mix(in srgb,var(--busy) 40%,var(--border));cursor:not-allowed}
  .cell.office:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
  .cell.sel{outline:2.5px solid var(--gold);outline-offset:1px}
  .cell.core{background:color-mix(in srgb,var(--spruce) 12%,var(--surface));border-style:dashed;cursor:default;color:var(--muted)}
  .cell.wide{grid-column:span 2}.cell.tall{grid-row:span 2}
  .fdetail{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:24px;position:sticky;top:88px}
  .fdetail .st{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;padding:5px 11px;
    border-radius:999px;text-transform:uppercase;letter-spacing:.05em}
  .st.ok{background:var(--ok-tint);color:var(--ok)}.st.warn{background:var(--warn-tint);color:var(--warn)}.st.busy{background:var(--busy-tint);color:var(--busy)}
  .fdetail h3{font-size:24px;margin:14px 0 4px}
  .fmeta{display:flex;flex-direction:column;margin:16px 0}
  .fmeta div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:14px}
  .fmeta div span:first-child{color:var(--muted)}
  .fmeta div span:last-child{font-weight:600;font-variant-numeric:tabular-nums}

  .portal-sec{background:linear-gradient(180deg,#052824,#021512);color:#EAF1EA}
  .portal-sec .eyebrow{color:#E4C36A}.portal-sec h2{color:#FBF7EC}.portal-sec .lede{color:#B7CabF}
  .window{margin-top:40px;border-radius:16px;overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,0,0,.65);border:1px solid rgba(228,195,106,.18)}
  .win-bar{background:#081910;display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid rgba(228,195,106,.12)}
  .win-bar i{width:11px;height:11px;border-radius:50%;background:#2b4436;display:inline-block}
  .win-url{margin-left:14px;font-size:12.5px;color:#7d9486;font-family:var(--font-mono)}
  .app{background:var(--porcelain);color:var(--text);display:grid;grid-template-columns:212px 1fr}
  .app-side{background:var(--surface);border-right:1px solid var(--border);padding:20px 14px;display:flex;flex-direction:column;gap:4px}
  .app-side .who{display:flex;align-items:center;gap:10px;padding:6px 8px 16px;border-bottom:1px solid var(--border);margin-bottom:10px}
  .av{width:34px;height:34px;border-radius:50%;background:conic-gradient(from 200deg,var(--spruce),var(--gold-b),var(--gold-a));
    color:#1B2A15;display:grid;place-items:center;font-weight:700;font-size:14px}
  .app-side a{padding:9px 11px;border-radius:9px;font-size:14px;color:var(--muted);text-decoration:none;font-weight:500}
  .app-side a.on{background:var(--gold-tint);color:var(--gold-ink);font-weight:600}
  .app-main{padding:26px 28px}
  .app-h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
  .app-cards{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin-top:20px}
  .acard{border:1px solid var(--border);border-radius:12px;padding:20px;background:var(--surface)}
  .acard .ak{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:700}
  .acard .big{font-family:var(--font-display);font-size:26px;font-weight:600;margin-top:8px;font-variant-numeric:tabular-nums}
  .pm{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--porcelain)}
  .pm .card-ic{width:42px;height:28px;border-radius:5px;background:linear-gradient(135deg,var(--spruce),var(--gold-b))}
  .ilist{margin-top:8px}
  .ilist .il{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border);font-size:14px}
  .ilist .il:last-child{border-bottom:0}
  .pill{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px}
  .pill.paid{background:var(--ok-tint);color:var(--ok)}.pill.due{background:var(--warn-tint);color:var(--warn)}
  .mini-note{font-size:12.5px;color:var(--muted);margin-top:10px}

  .adminband{border:1px dashed var(--border);border-radius:var(--r);padding:26px 28px;background:var(--surface);
    display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;margin-top:20px}
  .adminband .lock{width:52px;height:52px;border-radius:12px;background:var(--gold-tint);color:var(--gold-ink);display:grid;place-items:center;font-size:24px}

  footer{background:linear-gradient(180deg,#052824,#021512);color:#C6D3CA;padding:54px 0 40px}
  .foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
  footer .brand b{color:#FBF7EC}
  footer h4{font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:#8AA093;margin:0 0 14px}
  footer a{display:block;color:#C6D3CA;text-decoration:none;font-size:14px;padding:4px 0}
  footer a:hover{color:#E4C36A}
  .foot-bottom{border-top:1px solid rgba(228,195,106,.14);margin-top:34px;padding-top:20px;display:flex;
    justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#8AA093}
  .foot-bottom a{display:inline;padding:0}
  .foot-bottom>span:last-child{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
  .flag{background:var(--gold-tint);color:var(--gold-ink);border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);
    border-radius:10px;padding:11px 16px;font-size:13px;font-weight:600;text-align:center}

  @media (max-width:900px){
    .hero-in{grid-template-columns:1fr;gap:36px}
    .grid4{grid-template-columns:1fr 1fr}
    .plan-lay,.verdict,.app,.app-cards{grid-template-columns:1fr}
    .app-side{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--border)}
    .app-side .who{width:100%}
    .foot-in{grid-template-columns:1fr 1fr}
    .nav{display:none}
    /* La barre d'en-tête ne peut pas rétrécir : `.btn` porte `white-space:nowrap`
       et `.bar-cta` n'avait pas de `flex-wrap`. Mesuré au banc Chromium le
       2026-09-12 : à 390 px, le document faisait 536 px — 146 px de débordement
       HORIZONTAL sur toute la page, pas seulement sur l'en-tête. */
    .bar-cta{flex-wrap:wrap;justify-content:flex-end;gap:8px;min-width:0}
    .bar-cta .btn{padding:9px 12px;font-size:13.5px}
  }
  @media (max-width:560px){.grid4{grid-template-columns:1fr}.fgrid{grid-template-columns:repeat(4,1fr)}.section{padding:60px 0}}
  /* Sous 430 px (iPhone et la majorité des Android), la marque et deux boutons
     ne tiennent plus sur une ligne. ⚠️ `height:70px` est FIGÉ sur `.bar-in` :
     sans `height:auto`, le retour à la ligne déborderait verticalement au lieu
     de déborder horizontalement — on aurait déplacé le défaut, pas corrigé. */
  @media (max-width:430px){
    .bar-in{flex-wrap:wrap;height:auto;row-gap:10px;padding-block:10px}
    .bar-cta{width:100%;justify-content:flex-start}
  }

/* ───────────────────────────────────────────────────────────────────────────
   Formulaires et pages de la vitrine — soumission, contact, services, tarifs.
   Ajouté le 2026-10-06.

   🔴 Les couleurs viennent des variables DU SITE : --ink, --card, --hair,
      --muted. Une première version inventait --base et --bg-2, qui
      n'existent pas : les valeurs de repli s'appliquaient, et en mode sombre
      le texte sombre se retrouvait sur fond sombre. Illisible, et invisible
      pour qui ne bascule jamais le thème.
   ─────────────────────────────────────────────────────────────────────────── */

.form-soumission { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }

.champ { display: flex; flex-direction: column; gap: 6px; }
.champ > span { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.champ > span em { color: var(--gold); font-style: normal; }

.champ input, .champ select, .champ textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 15px;
  color: var(--ink); background: var(--card);
  /* 🔴 La bordure mélange --hair et --ink : seule, --hair se confond avec le
     fond en mode sombre et on ne voit plus où écrire. Le mélange garde le ton
     du site tout en restant visible dans les deux thèmes. */
  border: 1px solid color-mix(in srgb, var(--hair) 55%, var(--ink) 45%);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
/* Un texte d'exemple doit se lire — sinon il n'aide personne. */
.champ input::placeholder, .champ textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 70%, var(--ink) 30%); opacity: 1;
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-tint, rgba(154,119,38,.18));
}
.champ textarea { resize: vertical; min-height: 130px; }

/* Deux champs côte à côte, qui repassent l'un sous l'autre au téléphone. */
.champ-paire { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .champ-paire { grid-template-columns: 1fr; } }

.mention { font-size: 13.5px; color: var(--muted); margin: 0; }
.mention em { color: var(--gold); font-style: normal; }
.mention a { color: var(--gold); }

.btn-lg { padding: 14px 26px; font-size: 16px; align-self: flex-start; }

.encart { border-radius: 12px; padding: 14px 18px; margin: 0 0 22px; font-size: 15px; color: var(--ink); }
.encart-ok { background: var(--porcelain); border: 1px solid var(--hair); }
.encart-ok strong { color: var(--gold); }
.encart-erreur { background: rgba(208,104,91,.12); border: 1px solid rgba(208,104,91,.45); }

/* Les pages de service. */
.liste-service { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.liste-service li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.liste-service li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--gold); font-weight: 700; }

.autres-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.autres-services a {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  padding: 14px 16px; border: 1px solid var(--hair); background: var(--card);
  border-radius: 12px; color: var(--ink); transition: border-color .15s, transform .15s;
}
.autres-services a:hover { border-color: var(--gold); transform: translateY(-1px); }
.autres-services strong { font-size: 15px; font-weight: 600; }

.lien-service { color: var(--gold); text-decoration: none; font-weight: 600; font-size: 14.5px; }
.lien-service:hover { text-decoration: underline; }