/* ============================================================
     Charte UsePosio "Comptoir"
     Encre froide, laiton chaud, hiérarchie éditoriale.
     Filets d'un pixel plutôt que blocs, grain plutôt que halos.
     ============================================================ */
  :root {
    /* Thème repris du logo : carré graphite, anneau doré et cyan.
       Tous les rapports ci-dessous sont MESURÉS, pas estimés. */
    --bg: #020617;
    --bg-alt: #0b1220;
    --surface: #101a2f;
    --surface-2: #16223c;
    --border: rgba(226, 232, 240, 0.12);
    --border-strong: rgba(226, 232, 240, 0.26);

    /* Texte sur fond graphite : 18,4:1 pour le courant, 11,4 pour le
       secondaire, 7,9 pour le discret. Le seuil AA est à 4,5. */
    --text: #f1f5f9;
    --muted: #b8c4d4;
    --faint: #94a3b8;

    /* Doré du logo. Le ton plein sert de fond de bouton, avec l'encre
       graphite dessus (8,5:1). En texte sur fond sombre, il passe déjà
       à 8,5 mais le ton clair est plus franc à petite taille. */
    --accent: #d4a017;
    --accent-hover: #e8b93a;
    --accent-text: #e8b93a;
    --accent-wash: rgba(212, 160, 23, 0.14);
    --accent-ink: #020617;

    /* Cyan du logo. Second accent, réservé aux signaux fonctionnels :
       hors ligne, inclus, compteurs. 11,2:1 sur le fond. */
    --cool: #22d3ee;
    --cool-wash: rgba(34, 211, 238, 0.12);
    --signal: #22d3ee;

    --radius: 14px;
    --radius-sm: 8px;

    /* Rythme vertical fluide */
    --pad-section: clamp(72px, 9vw, 128px);
    --measure: 62ch;

    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  * { box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
    letter-spacing: -0.015em;
    font-optical-sizing: auto;
  }

  a { color: inherit; text-decoration: none; }

  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
  }

  /* ---------- Header ---------- */
  header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(2, 6, 23, 0.86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color 200ms ease;
  }
  header.scrolled { border-bottom-color: var(--border); }
  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 0;
  }
  .logo {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .logo span { color: var(--accent-text); }
  /* Le signe officiel accompagne le nom. Il est aligne optiquement sur la
     hauteur des majuscules, pas sur la boite du texte, sinon il flotte. */
  .logo {
    display: inline-flex;
    align-items: center;
    gap: 0;
  }
  .logo span { margin: 0; }
  .logo-signe {
    width: 30px;
    height: 30px;
    margin-right: 9px;
    border-radius: 7px;
    display: block;
    flex: none;
  }
  @media (max-width: 520px) {
    .logo-signe { width: 26px; height: 26px; margin-right: 8px; }
  }


  .nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
    font-size: 15px;
    color: var(--muted);
  }
  .nav-links a { transition: color 160ms ease; }
  .nav-links a:hover { color: var(--text); }
  @media (max-width: 860px) { .nav-links { display: none; } }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--accent);
    color: var(--accent-ink);
    border: none;
    border-radius: 10px;
    padding: 13px 22px;
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 180ms ease, transform 120ms ease;
  }
  .btn:hover { background: var(--accent-hover); }
  .btn:active { transform: scale(0.98); }
  .btn:disabled { opacity: 0.6; cursor: not-allowed; }
  .btn-ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    font-weight: 600;
  }
  .btn-ghost:hover { background: var(--surface); border-color: var(--border-strong); }
  .btn-sm { padding: 9px 16px; font-size: 14px; }

  a.btn { text-decoration: none; }

  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

  /* ---------- Hero ---------- */
  /* Le titre à gauche, le comptoir à droite.
     Ce n'est pas une préférence esthétique : c'est ce qui distingue le plus
     vite ce site d'un site de logiciel classique. La photo montre un lieu,
     du matériel, des dirhams dans un tiroir. Aucun concurrent en ligne ne
     peut promettre ça, et le visiteur le voit avant de lire une ligne. */
  .hero {
    padding: 64px 0 40px;
    text-align: left;
  }
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
  }
  .hero-copy { min-width: 0; }
  /* Sous 980 px, une colonne : la photo passe sous le texte, jamais à côté
     d'un titre écrasé. */
  @media (max-width: 980px) {
    .hero { text-align: center; }
    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  }
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-text);
    background: rgba(212, 160, 23, 0.1);
    border: 1px solid rgba(212, 160, 23, 0.3);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 26px;
  }
  .eyebrow .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent);
  }
  h1 {
    font-size: clamp(34px, 5.2vw, 56px);
    font-weight: 700;
    max-width: 820px;
    margin: 0 auto 22px;
  }
  .subhead {
    font-size: 19px;
    color: var(--muted);
    max-width: 640px;
    margin: 0 auto 34px;
  }
  .hero-cta {
    display: flex;
    gap: 12px;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 16px;
  }
  @media (max-width: 980px) {
    .hero-cta { justify-content: center; }
  }
  .hero-note {
    font-size: 14px;
    color: var(--faint);
  }
  .hero-image {
    margin: 0;
    max-width: 100%;
    min-width: 0;
  }
  @media (max-width: 980px) {
    .hero-image { margin: 8px auto 0; max-width: 940px; }
  }
  .hero-image img {
    width: 100%; height: auto; display: block;
    border-radius: 18px;
    border: 1px solid var(--border);
    box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.55);
  }

  /* ---------- Trust strip ---------- */
  .trust {
    padding: 28px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .trust-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px 40px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 15px;
  }
  .trust-item { display: inline-flex; align-items: center; gap: 9px; }

  /* Chiffres marquants. Un gros nombre se retient mieux qu'une phrase, et
     ici chaque chiffre est verifiable : c'est ce qui le rend utilisable. */
  .stats-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 32px;
    text-align: center;
  }
  .stat-num {
    font-family: var(--font-display);
    font-size: clamp(30px, 3.4vw, 44px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text);
  }
  .stat-num span { font-size: 0.52em; color: var(--accent-text); margin-left: 2px; }
  .stat-lab {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--muted);
  }
  @media (max-width: 860px) { .stats-inner { grid-template-columns: repeat(2, 1fr); } }
  .trust-item svg { width: 18px; height: 18px; color: var(--accent-text); flex: none; }

  /* ---------- Sections ---------- */
  section { border-top: 1px solid var(--border); }
  .section-pad { padding: 76px 0; }
  .section-head {
    max-width: 640px;
    margin: 0 auto 48px;
    text-align: center;
  }
  .section-head .kicker {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-text);
    margin-bottom: 12px;
  }
  .section-head h2 { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 14px; }
  .section-head p { color: var(--muted); font-size: 17px; margin: 0; }

  /* Problem */
  .problem { text-align: center; }
  .problem-inner { max-width: 720px; margin: 0 auto; }
  .problem h2 { font-size: clamp(24px, 3.2vw, 32px); margin-bottom: 18px; }
  .problem p { color: var(--muted); font-size: 18px; margin: 0; }

  /* ---------- Captures produit ---------- */
  .shots {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
  }
  .shot { margin: 0; }
  .shot-wide { grid-column: 1 / -1; }
  .shot img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 16px 40px -24px rgba(0, 0, 0, 0.5);
  }
  .shot figcaption {
    margin-top: 16px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6;
  }
  .shot figcaption strong {
    display: block;
    color: var(--text);
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 5px;
  }
  @media (max-width: 820px) {
    .shots { grid-template-columns: 1fr; gap: 34px; }
    .shot-wide { grid-column: auto; }
  }

  /* ---------- Bande multi-secteur ---------- */
  .sectors {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 900px;
    margin: 0 auto;
  }
  .sector {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    font-size: 14.5px;
    white-space: nowrap;
    transition: border-color 180ms ease, color 180ms ease;
  }
  .sector:hover { border-color: rgba(212, 160, 23, 0.55); color: var(--text); }
  .sectors-note {
    max-width: 640px;
    margin: 26px auto 52px;
    text-align: center;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.65;
  }
  @media (max-width: 620px) {
    .sector { font-size: 13.5px; padding: 8px 13px; white-space: normal; }
  }

  /* ---------- Ce qui fait la différence ---------- */
  .diff-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
  .diff {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px;
    transition: border-color 180ms ease;
  }
  .diff:hover { border-color: rgba(212, 160, 23, 0.4); }
  .diff-num {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent-text);
    margin-bottom: 14px;
  }
  .diff h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
  }
  .diff p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.62;
  }
  /* Quatre cartes : 2x2 se lit mieux que 3 puis une orpheline. */
  .diff-grid.paire { grid-template-columns: repeat(2, 1fr); }
  /* Un lien dans une tuile doit se voir : sans ça il prend la couleur du
     paragraphe et personne ne devine qu'il est cliquable. */
  .diff p a {
    color: var(--accent-text);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .diff p a:hover { color: var(--accent-hover); }
  @media (max-width: 940px) { .diff-grid, .diff-grid.paire { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 620px) { .diff-grid, .diff-grid.paire { grid-template-columns: 1fr; } }

  /* ---------- Liste détaillée ---------- */
  .detail-head {
    text-align: center;
    max-width: 560px;
    margin: 72px auto 36px;
  }
  .detail-head h3 {
    font-size: clamp(22px, 2.8vw, 28px);
    margin-bottom: 10px;
  }
  .detail-head p { color: var(--muted); margin: 0; font-size: 16px; }

  .detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .detail-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 24px 20px;
  }
  .detail-block h4 {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--accent-text);
    margin: 0 0 14px;
  }
  .detail-block ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .detail-block li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 9px;
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.5;
  }
  .detail-block li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.65;
  }
  .detail-block li:last-child { margin-bottom: 0; }
  @media (max-width: 940px) { .detail-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 620px) { .detail-grid { grid-template-columns: 1fr; } }

  /* ---------- Comparatif ---------- */
  .compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .compare {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 15px;
  }
  .compare th, .compare td {
    padding: 15px 18px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
  }
  .compare thead th {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
  }
  .compare thead th.us {
    color: var(--accent-text);
    background: rgba(212, 160, 23, 0.07);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }
  .compare td.us {
    background: rgba(212, 160, 23, 0.07);
    color: var(--text);
    font-weight: 600;
  }
  .compare tbody tr:last-child td { border-bottom: none; }
  .compare tbody tr:last-child td.us {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }
  .compare .crit {
    color: var(--text);
    font-weight: 600;
    width: 27%;
  }
  .compare td:not(.us):not(.crit) { color: var(--muted); }
  /* ---------- Comparatif concurrentiel ----------
     Un tableau de douze lignes se lit mal en grille pleine : on retire les
     traits verticaux, on espace, et on ne garde qu'un filet horizontal tres
     leger. Le nom de la solution porte le poids, le reste s'efface. */
  .compare tbody td:first-child {
    font-weight: 600;
    color: var(--text);
  }
  .compare tbody td {
    color: var(--muted);
    padding-top: 17px;
    padding-bottom: 17px;
  }
  .compare tbody tr:last-child td { border-bottom: none; }

  /* Une ligne sur deux, a peine teintee : l'oeil suit la ligne sans effort
     sur un tableau large ou il faut faire defiler horizontalement. */
  .compare tbody tr:nth-child(even) td { background: rgba(226, 232, 240, 0.022); }

  /* La ligne UsePosio doit se reperer d'un coup d'oeil SANS ecraser les
     autres : un comparatif ou le vendeur crie perd sa credibilite. */
  .compare tbody tr.nous td {
    background: var(--accent-wash);
    color: var(--text);
    border-bottom-color: rgba(212, 160, 23, 0.28);
  }
  .compare tbody tr.nous td:first-child {
    box-shadow: inset 3px 0 0 var(--accent);
    color: var(--accent-text);
  }

  /* Precision sous le nom : sur sa propre ligne, jamais collee au nom. */
  .note-inline {
    display: block;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--faint);
    font-weight: 400;
    font-style: normal;
    margin-top: 3px;
  }

  /* Les colonnes de verdict se lisent mieux centrees et un peu plus petites
     que le nom : ce sont des reponses, pas des titres. */
  .compare thead th:nth-child(n+4),
  .compare tbody td:nth-child(n+4) {
    text-align: center;
    font-size: 14px;
  }

  .compare-note {
    margin: 18px 0 0;
    font-size: 13px;
    color: var(--faint);
    text-align: center;
  }
  .compare-scroll-hint {
    display: none;
    font-size: 13px;
    color: var(--faint);
    text-align: center;
    margin-bottom: 12px;
  }
  @media (max-width: 780px) { .compare-scroll-hint { display: block; } }

  /* Feature grid */
  .features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  }
  @media (max-width: 940px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 620px) { .features-grid { grid-template-columns: 1fr; } }

  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px;
    transition: border-color 180ms ease, transform 180ms ease;
  }
  .card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
  .card .ico {
    width: 42px; height: 42px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(212, 160, 23, 0.12);
    margin-bottom: 16px;
  }
  .card .ico svg { width: 22px; height: 22px; color: var(--accent-text); }
  .card h3 { font-size: 18px; margin-bottom: 9px; }
  .card p { color: var(--muted); font-size: 15px; margin: 0; }

  /* Use cases */
  .usecase-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  @media (max-width: 940px) { .usecase-grid { grid-template-columns: 1fr; } }
  .usecase {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 30px;
  }
  .usecase-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
  .usecase-top .ico {
    width: 44px; height: 44px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(212, 160, 23, 0.12);
  }
  .usecase-top .ico svg { width: 24px; height: 24px; color: var(--accent-text); }
  .usecase h3 { font-size: 20px; }
  .usecase ul { list-style: none; margin: 0; padding: 0; }
  .usecase li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 11px;
    color: var(--muted);
    font-size: 15px;
  }
  .usecase li:last-child { margin-bottom: 0; }
  .usecase li::before {
    content: "";
    position: absolute;
    left: 0; top: 8px;
    width: 14px; height: 8px;
    border-left: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(-45deg);
  }

  /* How it works */
  .steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    counter-reset: step;
  }
  @media (max-width: 780px) { .steps { grid-template-columns: 1fr; } }
  .step {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
  }
  .step .num {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 700;
    color: var(--accent-text);
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(212,160,23,0.4);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
  }
  .step h3 { font-size: 18px; margin-bottom: 9px; }
  .step p { color: var(--muted); font-size: 15px; margin: 0; }

  /* Offers */
  .offers {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    max-width: 560px;
    margin: 0 auto;
  }
  /* Une carte d'offre est une case de grille : sans min-width, elle refuse de
     descendre sous la largeur de son bouton, et c'est toute la page qui part
     de travers sur un écran de 375 px. Mesuré : 388 px de large pour 375. */
  .offer { min-width: 0; }
  @media (max-width: 620px) {
    .offer .btn { white-space: normal; }
  }
  .offer .amount {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    margin-bottom: 6px;
  }
  .offer .amount b {
    font-size: 46px; line-height: 1;
    color: var(--accent-text); font-weight: 800;
    letter-spacing: -0.02em;
  }
  .offer .amount span { font-size: 15px; color: var(--muted); }
  .offer .price-note { font-size: 14px; color: var(--muted); margin-bottom: 24px; }
  .offer .extra {
    margin-top: 22px; padding-top: 20px;
    border-top: 1px solid var(--border);
    font-size: 14px; color: var(--muted);
  }
  .offer {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 34px;
    display: flex;
    flex-direction: column;
  }
  .offer.featured { border-color: rgba(212,160,23,0.5); background: var(--surface-2); }
  .offer .tag {
    align-self: flex-start;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--accent-text);
    background: rgba(212,160,23,0.12);
    border-radius: 999px;
    padding: 5px 12px;
    margin-bottom: 18px;
  }
  .offer h3 { font-size: 22px; margin-bottom: 8px; }
  .offer .price { font-size: 16px; color: var(--muted); margin-bottom: 22px; }
  .offer ul { list-style: none; margin: 0 0 26px; padding: 0; flex: 1; }
  .offer li {
    position: relative; padding-left: 26px; margin-bottom: 12px;
    color: var(--text); font-size: 15px;
  }
  .offer li::before {
    content: ""; position: absolute; left: 0; top: 7px;
    width: 14px; height: 8px;
    border-left: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(-45deg);
  }

  /* FAQ */
  .faq-list { max-width: 760px; margin: 0 auto; }
  .faq-item {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    margin-bottom: 12px;
    overflow: hidden;
  }
  .faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 22px;
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  /* Numerotation : elle donne une longueur au parcours et rassure sur le
     fait qu'on a fait le tour des questions. */
  .faq-list { counter-reset: faq; }
  .faq-item { counter-increment: faq; }
  .faq-item summary::before {
    content: counter(faq, decimal-leading-zero);
    font-family: var(--font-mono, var(--font-body));
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-text);
    flex: none;
    margin-right: 4px;
  }
  .faq-item summary::after {
    content: "";
    width: 10px; height: 10px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);
    transition: transform 200ms ease;
    flex: none;
    margin-left: auto;
  }
  .faq-item[open] summary::after { transform: rotate(-135deg); }
  .faq-item .faq-body { padding: 0 22px 20px; color: var(--muted); font-size: 15.5px; }

  /* Final CTA */
  .final-cta { text-align: center; }
  .final-cta h2 { font-size: clamp(26px, 3.4vw, 34px); margin-bottom: 14px; }
  .final-cta p { color: var(--muted); font-size: 17px; max-width: 560px; margin: 0 auto 32px; }
  form.capture {
    display: flex;
    gap: 10px;
    max-width: 480px;
    margin: 0 auto;
  }
  form.capture input[type="email"] {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    color: var(--text);
    font-size: 16px;
    font-family: inherit;
  }
  form.capture input[type="email"]:focus { outline: none; border-color: var(--accent); }
  form.capture input[type="email"]::placeholder { color: var(--faint); }
  @media (max-width: 560px) { form.capture { flex-direction: column; } }
  .form-feedback { font-size: 14px; margin-top: 14px; min-height: 18px; }
  /* Tons foncés : les verts et rouges clairs d'origine venaient du thème
     sombre et tombaient sous 4.5:1 sur le fond crème actuel. */
  .form-feedback.ok { color: #15803d; font-weight: 600; }
  .form-feedback.err { color: #b91c1c; font-weight: 600; }
  .form-note { font-size: 13px; color: var(--faint); margin-top: 12px; }
  .direct-contact {
    display: flex; justify-content: center; align-items: center;
    gap: 10px; flex-wrap: wrap;
    margin-top: 18px; font-size: 14px; color: var(--muted);
  }
  .direct-contact a { color: var(--accent-text); font-family: var(--font-mono); }
  .direct-contact a:hover { text-decoration: underline; }
  /* L'adresse n'est plus un lien : un clic sur mailto ouvre un logiciel de
     messagerie que peu de commercants ont configure, et le lien se fait
     moissonner par les robots a spam. Elle reste lisible et se selectionne
     d'un seul clic pour etre copiee. */
  .direct-contact .adresse-courriel {
    color: var(--accent-text);
    font-family: var(--font-mono);
    user-select: all;
  }

  /* Formulaire de contact */
  form.contact-form {
    max-width: 620px;
    margin: 0 auto;
    text-align: left;
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr 1fr;
  }
  .field { display: flex; flex-direction: column; gap: 7px; }
  .field.full { grid-column: 1 / -1; }
  .field label { font-size: 14px; font-weight: 600; color: var(--text); }
  .field .opt { font-weight: 400; color: var(--faint); }
  .field input,
  .field select,
  .field textarea {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 13px 15px;
    color: var(--text);
    font-size: 16px; /* sous 16px, iOS zoome au focus */
    font-family: inherit;
    width: 100%;
  }
  .field textarea { resize: vertical; min-height: 110px; }
  .field input:focus,
  .field select:focus,
  .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
  .field input::placeholder, .field textarea::placeholder { color: var(--faint); }
  .contact-form .btn { grid-column: 1 / -1; justify-self: center; min-width: 260px; }
  /* Piège à robots : invisible à l'écran et retiré du parcours clavier
     et lecteur d'écran. display:none serait ignoré par certains robots. */
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  @media (max-width: 560px) { form.contact-form { grid-template-columns: 1fr; } }

  /* Footer */
  footer {
    border-top: 1px solid var(--border);
    padding: 40px 0;
    color: var(--muted);
    font-size: 14px;
  }
  .footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }
  /* flex-wrap : avec cinq liens au lieu de quatre, la ligne débordait
     à droite sur mobile au lieu de passer à la ligne. */
  .footer-links { display: flex; gap: 12px 22px; flex-wrap: wrap; }
  .footer-links a { color: var(--muted); transition: color 160ms ease; }
  .footer-links a:hover { color: var(--text); }

  /* Mention legale sur sa propre ligne : elle ne doit pas entrer en
     concurrence avec les liens du pied de page, ni serrer la rangee
     existante qui tient deja trois blocs en space-between. */
  .footer-legal {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    color: var(--faint);
    font-size: 13px;
  }

  /* Notre autre logiciel. Le visiteur de UsePosio n'achetera pas un logiciel
     de parc informatique : ce lien n'est pas la pour convertir, il est la pour
     montrer qu'il y a une maison derriere le produit, pas une page isolee. */
  .footer-maison {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 13px;
  }
  .footer-maison a {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: border-color 160ms ease;
  }
  .footer-maison a:hover { border-bottom-color: var(--text); }

  /* Deux traits de separation colles l'un a l'autre feraient sale : la ligne
     legale se contente de suivre celle-ci. */
  .footer-maison + .footer-legal {
    margin-top: 10px;
    padding-top: 0;
    border-top: none;
  }

  /* ---------- Fast food highlight ---------- */
  .fastfood {
    background:
      radial-gradient(1100px 380px at 15% 0%, rgba(212,160,23,0.10), transparent 60%),
      var(--surface);
  }
  .ff-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
  }
  @media (max-width: 900px) { .ff-inner { grid-template-columns: 1fr; gap: 34px; } }
  .ff-badge {
    display: inline-block;
    font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--accent-text);
    background: rgba(212,160,23,0.12);
    border: 1px solid rgba(212,160,23,0.3);
    border-radius: 999px;
    padding: 6px 14px;
    margin-bottom: 18px;
  }
  .ff-copy h2 { font-size: clamp(25px, 3.2vw, 34px); margin-bottom: 16px; }
  .ff-copy > p { color: var(--muted); font-size: 17px; margin: 0 0 14px; }
  .ff-only {
    font-size: 14px !important;
    color: var(--accent-text) !important;
    font-weight: 600;
  }
  .ff-visual img {
    width: 100%; height: auto; display: block;
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: 0 16px 40px -24px rgba(0, 0, 0, 0.45);
  }
  .ff-steps-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 36px;
  }
  @media (max-width: 780px) { .ff-steps-row { grid-template-columns: 1fr; } }
  .ff-steps { display: flex; flex-direction: column; gap: 16px; }
  .ff-step {
    display: flex;
    gap: 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px;
  }
  .ff-num {
    flex: none;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink);
    font-family: var(--font-display);
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }
  .ff-step h3 { font-size: 17px; margin-bottom: 4px; }
  .ff-step p { color: var(--muted); font-size: 14.5px; margin: 0; }

  .ff-board {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    background: #0b1220;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin-top: 4px;
  }
  .ff-col-title {
    display: block;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: 10px;
    text-align: center;
  }
  .ff-col.ready .ff-col-title { color: var(--cool); }
  .ff-nums { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
  .ff-nums span {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 22px;
    color: var(--accent-text);
    background: rgba(212,160,23,0.1);
    border-radius: 8px;
    padding: 6px 12px;
    min-width: 46px;
    text-align: center;
  }
  .ff-col.ready .ff-nums span { color: var(--cool); background: rgba(34, 211, 238,0.12); }
  .ff-nums span.hot { animation: ffpulse 1.4s ease-in-out infinite; }
  @keyframes ffpulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238,0.5); }
    50% { box-shadow: 0 0 0 6px rgba(34, 211, 238,0); }
  }

  @media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
    .card:hover { transform: none; }
  }
  /* ============================================================
     COUCHE ÉDITORIALE
     ============================================================ */

  /* Grain : casse l'aplat numérique sans halo ni dégradé.
     pointer-events none, il ne doit jamais intercepter un clic. */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.022;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  header, section, footer { position: relative; z-index: 2; }

  /* Logo et titres : le serif porte la marque */
  .logo { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; }
  .nav-links { font-family: var(--font-body); font-size: 15px; gap: clamp(18px, 2.2vw, 32px); }
  .nav-links a { white-space: nowrap; }

  /* Kickers en mono : la signature éditoriale, avec numérotation
     automatique par compteur CSS (aucun balisage à maintenir) */
  body { counter-reset: sect; }
  .section-head .kicker {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--accent-text);
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  .section-head .kicker::before {
    counter-increment: sect;
    content: counter(sect, decimal-leading-zero);
    color: var(--faint);
    padding-right: 12px;
    border-right: 1px solid var(--border);
  }

  /* Échelle typographique fluide */
  h1 { font-size: clamp(38px, 6vw, 68px); font-weight: 600; letter-spacing: -0.03em; }
  .section-head h2 { font-size: clamp(28px, 3.6vw, 42px); }
  .section-head p { font-size: 17px; color: var(--muted); }
  .subhead { font-size: clamp(17px, 2vw, 20px); max-width: var(--measure); }
  .section-pad { padding: var(--pad-section) 0; }
  .section-head { margin-bottom: clamp(40px, 5vw, 64px); }

  /* Chiffres : chasse fixe partout, sinon les prix dansent */
  .amount b, .compare td, .price-note, .hero-note, table { font-variant-numeric: tabular-nums; }
  /* Le mono étalait le montant sur toute la carte : le serif le resserre
     tout en gardant les chiffres à chasse fixe. */
  .amount b { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; }
  .tag, .eyebrow { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.1em; }

  /* Boutons : moins ronds, plus assis */
  .btn {
    border-radius: var(--radius-sm);
    font-family: var(--font-body); font-weight: 600; letter-spacing: -0.01em;
    min-height: 44px; /* cible tactile : le .btn-sm tombait à 41px */
  }
  .btn:hover { transform: translateY(-1px); }
  .btn-ghost:hover { border-color: var(--border-strong); }

  /* Cartes : filet + surface, jamais d'ombre portée molle */
  .card, .offer, .step, .usecase, .faq-item, .detail-block {
    border-color: var(--border);
    transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
  }
  .card:hover, .usecase:hover { border-color: var(--border-strong); }
  .card h3, .offer h3, .step h3 { font-family: var(--font-display); font-weight: 600; }

  /* Icônes : le laiton reste un accent, pas un aplat */
  .card .ico { color: var(--accent-text); }

  /* Comparatif : la colonne UsePosio se distingue par un fond, pas par du gras */
  .compare .us { background: var(--accent-wash); }
  .compare th, .compare td { border-color: var(--border); }
  .compare .crit { color: var(--muted); font-size: 15px; }

  /* Ancrage : le montant barré est celui d'un concurrent, jamais le nôtre.
     Il reste discret, c'est 1 900 DH qui doit dominer. */
  .offer .anchor {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    margin: 0 0 6px;
    font-size: 14px; color: var(--faint);
    font-variant-numeric: tabular-nums;
  }
  /* Le libellé passe devant le montant : barré et posé seul en tête,
     le chiffre se lisait comme notre ancien prix. */
  .offer .anchor-lead {
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--faint);
  }
  .offer .anchor s {
    font-family: var(--font-display);
    font-size: 22px; font-weight: 600;
    color: var(--muted);
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(212, 160, 23, 0.9);
  }

  /* Le prix de lancement est une promesse datée, il doit se voir sans
     voler la vedette au montant. */
  .offer .founder {
    margin: 0 0 20px;
    padding: 12px 14px;
    border-left: 2px solid var(--accent);
    background: var(--accent-wash);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 14px; color: var(--text);
  }
  .offer .extra b { color: var(--text); font-weight: 600; }

  /* Prix : le montant respire */
  .offer.featured { border-color: rgba(212, 160, 23, 0.55); }
  .offer .amount b { font-size: clamp(44px, 6vw, 60px); }

  /* Secteurs : pastilles en mono, plus techniques que marketing */
  .sector { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.02em; }

  /* ---- Rythme : une section sur deux change de valeur ----
     C'était la vraie cause de la monotonie. Huit sections sur le même
     noir se lisaient comme un seul bloc, quelle que soit la couleur. */
  section:nth-of-type(even) { background: var(--bg-alt); }

  /* Halo unique derrière le héros. Un seul dans toute la page :
     répété, il redevient du bruit. */
  /* clip et non hidden : hidden sur un parent casserait le sticky du header */
  .hero { position: relative; overflow: clip; }
  .hero::before {
    content: "";
    position: absolute;
    top: -12%; left: 50%;
    width: min(1100px, 130%); height: 620px;
    transform: translateX(-50%);
    background:
      radial-gradient(58% 50% at 50% 40%, rgba(212, 160, 23, 0.16), transparent 70%),
      radial-gradient(40% 40% at 22% 62%, rgba(15, 118, 110, 0.07), transparent 72%);
    pointer-events: none;
    z-index: 0;
  }
  .hero > * { position: relative; z-index: 1; }

  /* Le froid porte les signaux, le laiton porte la marque */
  .eyebrow {
    color: var(--cool);
    background: var(--cool-wash);
    border-color: rgba(15, 118, 110, 0.30);
  }
  .eyebrow .dot { background: var(--cool); }
  .trust-item svg { color: var(--cool); }
  .section-head .kicker::before { color: var(--cool); }
  .offer li::before, .detail-block li::before { border-color: var(--cool); }
  .step .num { background: var(--cool-wash); color: var(--cool); }

  /* La colonne UsePosio du comparatif gagne un filet chaud à gauche */
  .compare .us { box-shadow: inset 3px 0 0 var(--accent); }

  /* Apparition au défilement : un seul axe, court, jamais bloquant */
  .reveal { opacity: 0; transform: translateY(18px); }
  .reveal.seen {
    opacity: 1; transform: none;
    transition: opacity 520ms var(--ease), transform 520ms var(--ease);
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal, .reveal.seen { opacity: 1; transform: none; transition: none; }
    .btn:hover { transform: none; }
    body::before { display: none; }
  }

  /* Liens vers les pages métier, sous la liste des secteurs */
  .metier-liens {
    display: flex; justify-content: center; align-items: center;
    gap: 8px 14px; flex-wrap: wrap;
    margin: 0 auto 40px; max-width: var(--measure);
    font-size: 15px; color: var(--faint);
  }
  .metier-liens a {
    color: var(--accent-text); font-weight: 600;
    border-bottom: 1px solid var(--accent-wash);
    padding-bottom: 1px;
  }
  .metier-liens a:hover { border-bottom-color: var(--accent); }