/* PH-LANDING (01/10/2026) — feuille de la maquette Landing_PlanetHorse_Maquette_2026-10-01.html, reprise telle quelle ;
   écarts : bandeau « ribbon » retiré ; boutons de langue .lang button → .lang a (liens serveur, /language/set). */
/* PH-LANDING (01/10/2026) — polices auto-hébergées (SIL OFL 1.1 : Outfit, IBM Plex Sans, IBM Plex Mono ;
   sous-ensemble latin, source @fontsource via jsDelivr). Aucune requête vers un tiers : le Datenschutz publié
   affirme qu'aucun contenu tiers n'est chargé. */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/outfit-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/outfit-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/outfit-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-sans-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }
  /* Layout: a stable logbook. Left-aligned columns, one vertical hairline motif (the split frame of the 15 s film), the red used exactly once per view: on the collision. */
  :root {
    --ph-blue: #0511A9;
    --ph-blue-soft: #E7E9FA;
    --ph-red: #C10000;
    --ph-paper: #F7F8FC;
    --ph-surface: #FFFFFF;
    --ph-ink: #12163A;
    --ph-muted: #5B6185;
    --ph-line: #D6D9EA;
    --ph-line-strong: #AEB3D1;
    --ph-amber-bg: #FFF4D6;
    --ph-amber-ink: #7A4D00;
    --font-display: 'Outfit', 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-body: 'IBM Plex Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-mono: 'IBM Plex Mono', Consolas, 'Courier New', monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --ph-blue: #7780F8;
      --ph-blue-soft: #1B1F4A;
      --ph-red: #E01F1F;
      --ph-paper: #0F1216;
      --ph-surface: #171B22;
      --ph-ink: #F2F4F7;
      --ph-muted: #A4A9C3;
      --ph-line: #2A2F3C;
      --ph-line-strong: #434A5E;
      --ph-amber-bg: #3A2C08;
      --ph-amber-ink: #FFD47A;
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --ph-blue: #7780F8;
    --ph-blue-soft: #1B1F4A;
    --ph-red: #E01F1F;
    --ph-paper: #0F1216;
    --ph-surface: #171B22;
    --ph-ink: #F2F4F7;
    --ph-muted: #A4A9C3;
    --ph-line: #2A2F3C;
    --ph-line-strong: #434A5E;
    --ph-amber-bg: #3A2C08;
    --ph-amber-ink: #FFD47A;
  }

  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--ph-paper);
    color: var(--ph-ink);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  a { color: var(--ph-blue); }
  h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
  h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
  h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
  h3 { font-size: 1.2rem; }
  p { margin: 0; }
  .lede { font-size: 1.15rem; max-width: 34em; color: var(--ph-ink); }
  .eyebrow { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ph-muted); }
  .wrap { max-width: 1120px; margin: 0 auto; padding-inline: 24px; }
  section { padding-block: 72px; border-top: 1px solid var(--ph-line); }
  .section-head { display: grid; gap: 12px; max-width: 40em; margin-bottom: 40px; }
  :focus-visible { outline: 3px solid var(--ph-blue); outline-offset: 3px; }

  .nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--ph-paper) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ph-line); }
  .nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
  .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ph-ink); }
  .brand svg { width: 38px; height: 38px; flex-shrink: 0; }
  .brand .name { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; color: var(--ph-blue); }
  .nav-links { display: flex; align-items: center; gap: 22px; }
  .nav-links a { color: var(--ph-ink); text-decoration: none; font-size: 0.95rem; }
  .nav-links a:hover { color: var(--ph-blue); }
  .nav-links .only-wide { display: none; }
  @media (min-width: 820px) { .nav-links .only-wide { display: inline; } }
  .lang { display: inline-flex; border: 1px solid var(--ph-line-strong); border-radius: 4px; overflow: hidden; font-family: var(--font-mono); font-size: 0.78rem; }
  .lang a, .lang span { background: transparent; border: 0; color: var(--ph-muted); padding: 6px 10px; cursor: pointer; font: inherit; text-decoration: none; display: inline-block; }
  /* PH-BRAND-3 : la langue active est un <span aria-current> (texte, pas de lien) — même apparence qu'avant. */
  .lang [aria-current="true"] { background: var(--ph-blue); color: #fff; cursor: default; }

  .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 4px; font-family: var(--font-display); font-weight: 600; font-size: 1rem; text-decoration: none; border: 1px solid transparent; cursor: pointer; }
  .btn-primary { background: var(--ph-blue); color: #fff; }
  .btn-primary:hover { filter: brightness(1.1); }
  .btn-ghost { background: transparent; color: var(--ph-ink); border-color: var(--ph-line-strong); }
  .btn-ghost:hover { border-color: var(--ph-blue); color: var(--ph-blue); }
  .btn-sm { padding: 8px 14px; font-size: 0.9rem; }
  /* PH-BRAND : .nav-links a (0,1,1) l'emportait sur .btn-primary (0,1,0) — texte bleu sur fond bleu. */
  .nav-links .btn-primary, .nav-links .btn-primary:hover { color: #fff; }

  .hero { border-top: 0; padding-block: 64px 72px; }
  .hero .wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
  @media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; gap: 40px; } }
  .hero-text { display: grid; gap: 22px; }
  .hero-text .cta { display: flex; flex-wrap: wrap; gap: 12px; }
  .stride { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.8rem; color: var(--ph-muted); }
  .note { font-size: 0.85rem; color: var(--ph-muted); }

  .screen { background: var(--ph-surface); border: 1px solid var(--ph-line); border-radius: 6px; box-shadow: 0 24px 60px -30px rgba(5, 17, 169, 0.35); overflow: hidden; }
  .screen-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--ph-line); font-family: var(--font-mono); font-size: 0.78rem; color: var(--ph-muted); }
  .screen-bar b { color: var(--ph-ink); font-weight: 500; }
  .split { display: grid; grid-template-columns: 1fr 1px 1fr; }
  .split > .half { padding: 22px 18px 18px; display: grid; gap: 10px; align-content: start; }
  .split > .rule { background: var(--ph-line-strong); }
  .half .day { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; }
  .half .what { color: var(--ph-muted); font-size: 0.95rem; }
  .half svg { width: 64px; height: 64px; stroke: var(--ph-blue); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .half svg .accent { stroke: var(--ph-red); }
  .horse-line { display: flex; gap: 10px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--ph-line); font-family: var(--font-mono); font-size: 0.8rem; color: var(--ph-muted); }
  .horse-line b { color: var(--ph-ink); font-weight: 500; }
  .collision { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px 18px; border-top: 1px solid var(--ph-line); background: var(--ph-blue-soft); }
  .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ph-red); margin-top: 6px; flex-shrink: 0; }
  .collision .title { font-weight: 600; }
  .collision .sub { font-size: 0.9rem; color: var(--ph-muted); }

  .objects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-block: 36px; }
  @media (max-width: 700px) { .objects { grid-template-columns: 1fr; } }
  .object { display: grid; gap: 12px; justify-items: start; }
  .object svg { width: 72px; height: 72px; stroke: var(--ph-blue); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .object .label { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; }
  .verdict { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 2rem); max-width: 22em; }
  .cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--ph-line); margin-top: 40px; }
  @media (max-width: 700px) { .cases { grid-template-columns: 1fr; } }
  .case { padding: 18px 20px 18px 0; border-bottom: 1px solid var(--ph-line); display: grid; gap: 4px; }
  .case .k { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ph-muted); }
  .quote { margin-top: 48px; padding-left: 22px; border-left: 3px solid var(--ph-blue); max-width: 36em; font-size: 1.1rem; }

  .twocol { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0 48px; }
  @media (max-width: 760px) { .twocol { grid-template-columns: 1fr; } .twocol .rule { display: none; } }
  .twocol .rule { background: var(--ph-line-strong); }
  .col h3 { margin-bottom: 18px; }
  .col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
  .col li { padding-left: 22px; position: relative; }
  .col li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 2px; background: var(--ph-blue); }
  .col.never li::before { width: 10px; height: 10px; top: 0.4em; border: 2px solid var(--ph-muted); background: transparent; border-radius: 50%; }

  .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  @media (max-width: 900px) { .cards { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }
  .card { background: var(--ph-surface); border: 1px solid var(--ph-line); border-radius: 6px; padding: 22px 22px 24px; display: grid; gap: 10px; align-content: start; }
  .card svg { width: 34px; height: 34px; stroke: var(--ph-blue); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .card .k { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ph-muted); }
  .card p { color: var(--ph-muted); font-size: 0.95rem; }

  .terms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; border-top: 1px solid var(--ph-line); margin-top: 32px; }
  @media (max-width: 700px) { .terms { grid-template-columns: 1fr; } }
  .term { padding: 18px 0; border-bottom: 1px solid var(--ph-line); display: grid; gap: 4px; }
  .term b { font-family: var(--font-display); font-weight: 600; }
  .term span { color: var(--ph-muted); font-size: 0.95rem; }
  .tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; font-variant-numeric: tabular-nums; }
  @media (max-width: 600px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
  .tier { border: 1px solid var(--ph-line); border-radius: 6px; padding: 14px 16px; background: var(--ph-surface); display: grid; gap: 2px; }
  .tier .t { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; color: var(--ph-blue); }
  .tier .r { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ph-muted); }
  .tnote { margin-top: 12px; }

  footer { border-top: 1px solid var(--ph-line); padding-block: 28px calc(28px + env(safe-area-inset-bottom, 0px)); font-size: 0.88rem; color: var(--ph-muted); }
  footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; }
  footer a { color: var(--ph-muted); }

  @media (prefers-reduced-motion: no-preference) {
    .collision .dot { animation: pulse 2.4s ease-in-out infinite; }
    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
  }

  /* PH-LANDING-2 (04/10/2026) — landing v2 par rôle : règles propres aux rôles (maquette v2). */
  .rolesec { border-top:1px solid var(--ph-line); padding-block:64px; }
  .rolegrid { display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:center; }
  @media (max-width: 900px) { .rolegrid { grid-template-columns:1fr; gap:32px; } }
  .rolename { font-family:var(--font-display); font-weight:600; font-size:clamp(1.9rem, 3.6vw, 2.8rem); color:var(--ph-blue); line-height:1.05; }
  .rolepain { font-family:var(--font-display); font-weight:600; font-size:clamp(1.25rem, 2.2vw, 1.6rem); line-height:1.2; margin-top:16px; }
  .roletext { margin-top:16px; display:grid; gap:14px; }
  .sees { border-top:1px solid var(--ph-line-strong); padding-top:14px; }
  .sees .k { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ph-muted); margin-bottom:6px; }
  .frow { display:grid; grid-template-columns:14px 1fr auto; gap:12px; align-items:start; padding:14px 18px; border-top:1px solid var(--ph-line); }
  .screen-bar + .frow { border-top:0; }
  .frow .h { font-family:var(--font-display); font-weight:600; font-size:1rem; line-height:1.25; }
  .frow .s { font-size:.88rem; color:var(--ph-muted); margin-top:2px; }
  .frow .w { font-family:var(--font-mono); font-size:.72rem; color:var(--ph-muted); white-space:nowrap; }
  .frow .d { width:12px; height:12px; border-radius:50%; background:var(--ph-red); margin-top:5px; }
  .frow .o { width:12px; height:12px; border-radius:50%; border:2px solid var(--ph-line-strong); box-sizing:border-box; margin-top:5px; }
  .tcols { display:grid; grid-template-columns:repeat(3,1fr); }
  @media (max-width: 520px) { .tcols { grid-template-columns:1fr; } .tcols .tc { border-right:0; border-bottom:1px solid var(--ph-line); } }
  .tc { border-right:1px solid var(--ph-line); padding:14px; }
  .tc:last-child { border-right:0; }
  .tc .who { font-family:var(--font-display); font-weight:600; font-size:.95rem; margin-bottom:8px; }
  .ses { border:1px solid var(--ph-line); border-radius:5px; padding:8px 10px; margin-bottom:8px; font-size:.85rem; }
  .ses b { display:block; }
  .ses.done { color:var(--ph-muted); background:var(--ph-paper); }
  .ses.flag { border-left:4px solid var(--ph-red); }
  /* Barre à 375 px : sans retour à la ligne elle débordait (déjà en v1). */
  @media (max-width: 560px) { .nav .wrap { flex-wrap:wrap; row-gap:8px; padding-block:10px; } .nav-links { gap:10px; margin-left:auto; } }
  /* PH-PILOT-LOGIN (06/10/2026) : la connexion est un bouton visible à toutes les largeurs. Sous 640 px la barre passe sur DEUX lignes : marque + langues,
     puis « Connexion » et « Demander un accès » à égalité sur toute la largeur — aucun défilement horizontal à 375 ni à 320 px. */
  @media (max-width: 640px) {
    .nav .wrap { flex-wrap: wrap; row-gap: 8px; padding-block: 10px; }
    .nav-links { display: contents; }
    .nav-links .lang { order: 1; margin-left: auto; }
    .nav-links .btn { order: 2; flex: 1 1 40%; justify-content: center; text-align: center; }
  }
  .final .cta { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:24px; }