/* Pilocab — site de présentation. Une feuille de grand livre : lignes fines, marge rouge, pointages au crayon. */
@font-face { font-family: "Bricolage"; src: url("/polices/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Instrument"; src: url("/polices/instrument.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Instrument"; src: url("/polices/instrument-italique.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Kalam"; src: url("/polices/kalam.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --encre: #13294b;
  --encre-douce: #46597a;
  --sarcelle: #0e9ca7;
  --sarcelle-fonce: #0a7b84;
  --ciel: #5b9be2;
  --papier: #f6f8f9;
  --blanc: #ffffff;
  --regle: #dde5ea;
  --marge: #e39a9a;
  --ambre: #f2c94c;
  --ambre-doux: #fdf3d3;
  --ok: #2f9a63;
  --rayon: 6px;
  --w: 1160px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { overflow-x: clip; }
body {
  margin: 0; background: var(--papier); color: var(--encre);
  font: 400 17px/1.6 "Instrument", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--sarcelle); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: "Bricolage", "Instrument", sans-serif; font-weight: 750; letter-spacing: -0.02em; margin: 0; line-height: 1.08; }
p { margin: 0; }
.w { max-width: var(--w); margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .w { padding: 0 16px; } }

/* — crayon : les annotations du comptable — */
.crayon { font-family: "Kalam", cursive; color: var(--sarcelle-fonce); font-size: 1.15em; line-height: 1.2; }

/* — haut de page — */
.haut { position: relative; z-index: 2; }
.hautin { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0 18px; border-bottom: 1.5px solid var(--encre); }
.marque img { height: 34px; width: auto; }
.menu { display: flex; gap: 28px; align-items: center; font-size: 15.5px; }
.menu a { text-decoration: none; padding: 4px 0; border-bottom: 1.5px solid transparent; }
.menu a:hover { border-color: var(--encre); }
.menu .connexion { color: var(--encre-douce); }
@media (max-width: 760px) { .menu a:not(.connexion) { display: none; } }

/* — boutons : rectangles nets, pas de pilules — */
.btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  background: var(--encre); color: var(--blanc); font-weight: 600; font-size: 16px;
  padding: 13px 20px; border-radius: 4px; border: 1.5px solid var(--encre);
  transition: background .15s, color .15s;
}
.btn:hover { background: #0c1c35; }
.lien { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; padding: 6px 0; border-bottom: 1.5px solid var(--encre); }
.lien:hover { color: var(--sarcelle-fonce); border-color: var(--sarcelle-fonce); }
.fl { transition: transform .15s; }
.btn:hover .fl, .lien:hover .fl { transform: translateX(3px); }

/* — la feuille : lignes du grand livre et marge — */
.feuille {
  position: relative;
  background:
    linear-gradient(90deg, transparent 0, transparent calc(50% - var(--w) / 2 + 6px), var(--marge) calc(50% - var(--w) / 2 + 6px), var(--marge) calc(50% - var(--w) / 2 + 7.5px), transparent calc(50% - var(--w) / 2 + 7.5px)),
    repeating-linear-gradient(180deg, transparent 0, transparent 31px, var(--regle) 31px, var(--regle) 32px),
    var(--blanc);
  border-bottom: 1.5px solid var(--encre);
}
@media (max-width: 1220px) { .feuille { background: repeating-linear-gradient(180deg, transparent 0, transparent 31px, var(--regle) 31px, var(--regle) 32px), var(--blanc); } }

/* — premier écran — */
.hero { padding: 64px 0 72px; }
.heroin { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(38px, 4.4vw, 58px); }
.hero h1 .pointe { position: relative; white-space: nowrap; }
.hero h1 .pointe svg { position: absolute; left: -2%; right: -2%; bottom: -0.12em; width: 104%; height: 0.32em; overflow: visible; }
.hero h1 .pointe path { fill: none; stroke: var(--sarcelle); stroke-width: 5; stroke-linecap: round; }
.lead { font-size: 20px; line-height: 1.5; color: var(--encre-douce); margin-top: 22px; max-width: 30em; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 32px; }
.note { margin-top: 26px; font-size: 14px; color: var(--encre-douce); display: flex; align-items: center; gap: 8px; }
.note .point { width: 8px; height: 8px; border-radius: 50%; background: var(--ambre); box-shadow: 0 0 0 3px var(--ambre-doux); }

.ecran { position: relative; }
.cadre { background: var(--blanc); border: 1.5px solid var(--encre); border-radius: 8px; overflow: hidden; box-shadow: 10px 10px 0 var(--encre); }
.cadre .barre { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--regle); background: #fbfcfd; }
.cadre .barre i { width: 9px; height: 9px; border-radius: 50%; background: var(--regle); }
.cadre .barre span { margin-left: 10px; font-size: 12px; color: var(--encre-douce); }
.annot { position: absolute; display: flex; align-items: flex-start; gap: 6px; pointer-events: none; }
.annot svg { flex: none; overflow: visible; }
.annot path { fill: none; stroke: var(--sarcelle-fonce); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.annot.a1 { top: -38px; right: 6%; flex-direction: row-reverse; }
.annot.a2 { bottom: -46px; left: -4%; }
@media (max-width: 980px) {
  .heroin { grid-template-columns: 1fr; gap: 64px; }
  .annot.a2 { left: 0; }
}
@media (max-width: 560px) { .annot { display: none; } .cadre { box-shadow: 6px 6px 0 var(--encre); } }

/* — sections — */
section { padding: 96px 0; }
.titre { max-width: 760px; }
.titre h2 { font-size: clamp(32px, 4vw, 48px); }
.titre p { margin-top: 18px; font-size: 19px; color: var(--encre-douce); max-width: 36em; }
.kicker { display: block; margin-bottom: 10px; }

/* — ce que fait Pilocab : des lignes de registre — */
.registre { margin-top: 56px; border-top: 1.5px solid var(--encre); }
.ligne { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; padding: 44px 0; border-bottom: 1px solid var(--regle); align-items: center; }
.ligne:last-child { border-bottom: 1.5px solid var(--encre); }
.ligne h3 { font-size: 28px; }
.ligne .sous { font-weight: 600; color: var(--sarcelle-fonce); margin-top: 6px; }
.ligne .dit { margin-top: 14px; color: var(--encre-douce); max-width: 30em; }
.ligne .capture { border: 1px solid var(--regle); border-radius: var(--rayon); overflow: hidden; background: var(--blanc); box-shadow: 0 1px 0 var(--regle), 0 18px 40px -28px rgba(19, 41, 75, .45); }
@media (max-width: 860px) { .ligne { grid-template-columns: 1fr; gap: 24px; padding: 36px 0; } }

/* — Pilo AI — */
.pilo { margin-top: 56px; display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; padding: 32px; background: var(--encre); color: var(--blanc); border-radius: 8px; }
.pilo .p { width: 56px; height: 56px; border-radius: 10px; background: var(--blanc); display: grid; place-items: center; }
.pilo .p img { width: 36px; }
.pilo h3 { font-size: 26px; }
.pilo p { margin-top: 10px; color: #c9d4e5; max-width: 46em; }
.pilo ul { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pilo li { font-size: 14px; padding: 6px 10px; border: 1px solid #3b5179; border-radius: 4px; color: #e6ecf5; }
@media (max-width: 560px) { .pilo { grid-template-columns: 1fr; padding: 24px; } }

/* — autour des dossiers — */
.autour { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 48px; border-top: 1.5px solid var(--encre); }
.autour > div { padding: 30px 28px 6px 0; }
.autour > div + div { padding-left: 28px; border-left: 1px solid var(--regle); }
.autour h3 { font-size: 22px; }
.autour p { margin-top: 10px; color: var(--encre-douce); }
.autour .ico { width: 34px; height: 34px; margin-bottom: 16px; color: var(--sarcelle); }
@media (max-width: 860px) {
  .autour { grid-template-columns: 1fr; }
  .autour > div, .autour > div + div { padding: 26px 0; border-left: 0; border-bottom: 1px solid var(--regle); }
}

/* — l'état du projet — */
.etat { position: relative; max-width: 780px; margin: 0 auto; background: var(--blanc); border: 1.5px solid var(--encre); border-radius: 6px; padding: 38px 40px 34px; box-shadow: 8px 8px 0 var(--sarcelle); }
.etat h3 { font-size: 26px; }
.etat p { margin-top: 12px; color: var(--encre-douce); }
.tampon { position: absolute; top: -22px; right: 28px; transform: rotate(-4deg); border: 2px solid var(--sarcelle-fonce); color: var(--sarcelle-fonce); background: var(--blanc); border-radius: 4px; padding: 6px 12px 5px; text-align: center; line-height: 1.15; }
.tampon small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.tampon b { font-family: "Bricolage", sans-serif; font-size: 17px; }
@media (max-width: 560px) { .etat { padding: 44px 22px 26px; } .tampon { right: 14px; } }

/* — engagements — */
.bande { background: var(--encre); color: var(--blanc); }
.bande .kicker { color: #7fd6dc; }
.duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
.bande h2 { font-size: clamp(32px, 4vw, 46px); }
.bande .lead { color: #c9d4e5; }
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 20px 0; border-bottom: 1px dashed #3b5179; color: #c9d4e5; }
.liste li:first-child { padding-top: 4px; }
.liste b { color: var(--blanc); font-weight: 650; }
.coche { width: 26px; height: 26px; margin-top: 1px; }
.coche path { fill: none; stroke: #7fd6dc; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; gap: 32px; } }

/* — cabinet pilote — */
.final { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.final h2 { font-size: clamp(32px, 4vw, 46px); }
.final p { margin-top: 18px; font-size: 19px; color: var(--encre-douce); max-width: 32em; }
.fiche { background: var(--blanc); border: 1px solid var(--regle); border-radius: 6px; padding: 26px 26px 18px; }
.fiche .crayon { font-size: 22px; }
.fiche dl { margin: 14px 0 0; }
.fiche dl div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--regle); font-size: 15px; }
.fiche dt { color: var(--encre-douce); }
.fiche dd { margin: 0; font-weight: 600; text-align: right; }
@media (max-width: 860px) { .final { grid-template-columns: 1fr; } }

/* — pied — */
.pied { border-top: 1.5px solid var(--encre); background: var(--blanc); padding: 56px 0 28px; font-size: 15px; }
.piedhaut { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.piedhaut .accroche { margin-top: 12px; color: var(--encre-douce); max-width: 24em; }
.piedin { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 40px; }
.piedin h5 { margin: 0 0 12px; font: 400 20px/1.2 "Kalam", cursive; color: var(--sarcelle-fonce); }
.piedin a { display: block; padding: 4px 0; text-decoration: none; }
.piedin a:hover { text-decoration: underline; }
.legal { margin-top: 40px; font-size: 13px; color: var(--encre-douce); max-width: 46em; line-height: 1.55; }
.barbas { margin-top: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 18px; border: 1.5px solid var(--encre); border-radius: 4px; font-size: 13px; }
.barbas .lieu { font-weight: 600; }
@media (max-width: 760px) { .piedin { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .piedin { grid-template-columns: 1fr; } }

/* — pages d'information (mentions, confidentialité, suppression) — */
.doc { padding: 64px 0 96px; }
.doc .w > * { max-width: 760px; }
.doc h1 { font-size: clamp(34px, 4.4vw, 50px); }
.doc .maj { margin-top: 12px; color: var(--encre-douce); font-size: 14px; }
.doc h2 { font-size: 24px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--regle); }
.doc h3 { font-size: 18px; margin-top: 26px; }
.doc p, .doc li { color: #2b3d5d; }
.doc p { margin-top: 12px; }
.doc ul { margin: 12px 0 0; padding-left: 22px; }
.doc li { margin-top: 6px; }
.doc .bloc { margin-top: 16px; padding: 18px 20px; background: var(--blanc); border: 1px solid var(--regle); border-left: 3px solid var(--sarcelle); border-radius: 4px; }
.doc .bloc p:first-child { margin-top: 0; }
.doc a { color: var(--sarcelle-fonce); }

/* — apparition douce au défilement (désactivée si l'appareil demande moins d'animations) — */
.apparait { transition: opacity .6s ease, transform .6s ease; }
.apparait[data-attente] { opacity: 0; transform: translateY(14px); }

/* — aperçu seulement : ce qui reste à fournir — */
mark.manque { background: var(--ambre-doux); color: #8a5a00; border: 1px dashed #d9a400; border-radius: 3px; padding: 0 4px; font: inherit; }