/* L'Argus Flotte Auto — application conducteur V2.
   Jetons et composants repris de la maquette du 25/09 (APP CONDUCTEUR, cartes et pack securite).
   Police du telephone (decision du 26/09), mobile d'abord, 430 px de large au plus. */

:root {
    --bg: #f4f4f6;
    --panel: #fff;
    --panel-alt: #fbfbfc;
    --text: #15151a;
    --muted: #6b6b74;
    --muted-2: #94949c;
    --line: #e7e7eb;
    --line-soft: #eeeef1;
    --argus: #a6192e;
    --argus-dark: #88131f;
    --good: #178a56;
    --good-bg: #eaf9f1;
    --warn: #b4600a;
    --warn-bg: #fff6e9;
    --bad: #d5271f;
    --bad-bg: #fdecec;
    --action: #4a4a52;
    --action-bg: #f1f1f3;
    --ease: cubic-bezier(.2, .7, .3, 1);
    --spring: cubic-bezier(.32, 1.25, .5, 1);
    --dur-fast: 120ms;
    --dur-base: 180ms;
    --dur-slow: 260ms;
    --shadow-card: 0 1px 2px rgba(15, 15, 20, .04), 0 10px 30px -18px rgba(15, 15, 20, .18);
    --shadow-lift: 0 14px 32px -14px rgba(15, 15, 20, .16), 0 2px 6px rgba(15, 15, 20, .05);
    --r-lg: 20px;
    --r-md: 16px;
    --r: 8px;
    --gutter: 20px;
    --tabs-h: 68px;
    --safe-b: env(safe-area-inset-bottom, 0px);
    --app-w: 430px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 1.4;
}
@media (min-width: 480px) { body { background: #e9e9ec; } }
button { font: inherit; color: inherit; margin: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

.ic {
    width: 22px; height: 22px; flex: 0 0 auto; display: block;
    fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.ic.plein { fill: currentColor; stroke: none; }

/* ---- Cadre ---- */
.app { max-width: var(--app-w); margin: 0 auto; min-height: 100dvh; background: var(--bg); position: relative; }
.screen { padding: 0 var(--gutter) calc(var(--tabs-h) + var(--safe-b) + 34px); }
body:has(.dock-act) .screen { padding-bottom: calc(var(--tabs-h) + var(--safe-b) + 98px); }
/* Le numero de build reste en haut a droite de l'application, avec l'en-tete (fixe : cale sur le bord droit de l'application). */
.build {
    position: fixed; top: 4px; right: max(8px, calc((100vw - var(--app-w)) / 2 + 8px)); z-index: 70;
    font-size: 9px; line-height: 1.25; text-align: right; color: var(--muted-2);
    pointer-events: none;
}

/* Apparition des blocs, l'un apres l'autre (maquette : .in). */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.in { animation: rise var(--dur-slow) var(--ease) both; }
.in:nth-child(3) { animation-delay: 50ms; }
.in:nth-child(4) { animation-delay: 100ms; }
.in:nth-child(5) { animation-delay: 150ms; }
.in:nth-child(6) { animation-delay: 200ms; }
.in:nth-child(n+7) { animation-delay: 250ms; }
@media (prefers-reduced-motion: reduce) { .in { animation: none; } }

.press { transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.press:active { transform: scale(.98); }

/* ---- En-tete ---- */
/* L'en-tete (retour, titre) reste en haut quand on defile (retour de JM du 29/09) : sur toute la largeur de l'application, son
   fond cache ce qui passe derriere. */
.top { display: flex; align-items: center; gap: 12px; padding: 18px var(--gutter) 8px; margin: 0 calc(-1 * var(--gutter));
    position: sticky; top: 0; z-index: 55; background: var(--bg); }
/* UN TITRE TIENT SUR UNE LIGNE (remarques du 01/10) : long, il passe en plus petit (.long, .tres-long, poses par la vue) ; ce
   qui deborde encore se coupe. */
.hello { font-size: clamp(22px, 7.2vw, 28px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin: 0; flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hello.long { font-size: clamp(19px, 5.6vw, 22px); }
.hello.tres-long { font-size: clamp(16px, 4.6vw, 18px); }
/* LE RETOUR (remarques du 01/10) : un chevron seul, sans fond, comme la maquette — et AU-DESSUS du titre, sur sa ligne. */
.back { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border: 0; border-radius: var(--r);
    background: transparent; color: var(--text); }
.back .ic { width: 24px; height: 24px; }
.top.avec-retour { display: block; padding-top: 8px; }
.top-cmd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 0 -10px; }
.top-outils { display: flex; align-items: center; gap: 8px; }
.top.avec-retour .hello { display: block; margin-top: 2px; }
.lead { color: var(--muted); font-size: 14px; margin: 8px 0 0; }

/* ---- Hors ligne ---- */
.offbar {
    display: flex; align-items: center; gap: 10px; padding: 11px 15px; margin-top: 12px;
    background: var(--text); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.35; border-radius: var(--r-md);
}
.offbar[hidden] { display: none; }
.offbar .ic { width: 18px; height: 18px; flex: 0 0 18px; }
.offbar b { font-weight: 800; }

/* ---- ZFE autour du conducteur (JM, 16/10) : rouge dans la zone, orange a son approche ; le bouton coupe l'alarme ---- */
.zfebar {
    position: sticky; top: calc(env(safe-area-inset-top, 0px) + 8px); z-index: 65;   /* au-dessus de l en-tete (55), du pied (60) et de l ouverture (50) */
    display: flex; align-items: center; gap: 12px; margin: 8px var(--gutter) 0; padding: 12px 12px 12px 15px;
    background: var(--bad); color: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-lift); line-height: 1.3;
}
.zfebar[hidden] { display: none; }
.zfebar.near { background: var(--warn); }
.zfebar > .ic { width: 24px; height: 24px; flex: 0 0 24px; }
.zfe-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.zfe-t b { font-size: 15px; font-weight: 800; }
.zfe-t small { font-size: 12px; font-weight: 600; opacity: .9; }
.zfe-son {
    flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; gap: 3px; min-width: 64px; padding: 8px 6px;
    border: 0; border-radius: 12px; background: rgba(255, 255, 255, .2); color: #fff; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer;
}
.zfe-son .ic { width: 22px; height: 22px; }
.zfe-son[aria-pressed="true"] { background: rgba(0, 0, 0, .18); }

/* ---- Sections, cartes, lignes ---- */
.sec { margin-top: 24px; }
.sec-t { display: block; margin-bottom: 10px; font-size: 17px; font-weight: 800; letter-spacing: -.015em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card { border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card); overflow: hidden; margin-top: 10px; }
.sec-t + .card { margin-top: 0; }
/* La fiche d'un document (maquette, la feuille de la visionneuse) : deux colonnes de champs, le libelle en petites
   capitales, et sous la feuille, d'ou vient ce qu'on lit. */
.card.docp { padding: 20px 20px 16px; }
.docp dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.docp dt { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.docp dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.docp-s { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 12.5px; font-weight: 600; color: var(--muted); }
/* Les options d'un formulaire (maquette) : des pastilles ; des cartes quand une reponse a une precision. */
.field .label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.choix { display: flex; flex-wrap: wrap; gap: 8px; }
.choix-o { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.choix-o input { position: absolute; opacity: 0; pointer-events: none; }
.choix-o:has(input:checked) { background: var(--text); border-color: var(--text); color: #fff; }
.choix-o:has(input:focus-visible) { outline: 2px solid var(--argus); outline-offset: 2px; }
.choix.cartes { flex-direction: column; }
/* Des pastilles centrees (le lieu d'une reservation, au-dessus de la date et de l'heure : retour de JM du 28/09). */
.choix.centre { justify-content: center; }
/* Une photo prise d'ici (la plaque) : de l'air avant l'autre facon de faire (retour de JM du 28/09). */
.field.photo-ici + .field { margin-top: 36px; }
.field.photo-ici .b-principal { display: flex; align-items: center; justify-content: center; gap: 10px; }
.field.photo-ici .b-lien { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 0; font-size: 15px; }
.choix.cartes .choix-o { border-radius: var(--r-md, 16px); padding: 12px 16px; }
.choix-o small { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.choix-o:has(input:checked) small { color: rgba(255, 255, 255, .8); }
/* Des etapes numerotees (maquette, l'accident). */
.etape { display: flex; gap: 14px; align-items: flex-start; padding: 12px 20px; border-top: 1px solid var(--line-soft); }
.etape:first-child { border-top: 0; }
.etape > i { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: #fff; font-style: normal; font-size: 13px; font-weight: 800; }
.etape b { display: block; font-size: 15px; }
.etape span span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
/* Sans reseau : ce qui le demande se grise (maquette, aide/hors) ; sans texte depuis le 01/10 (retour de JM). */
.hors [data-enligne] { opacity: .5; pointer-events: none; }
/* A droite du titre, plus discret : un compte (« En cours 6 »), une periode (« depuis mars 2022 »). */
.sec-t .ago { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: 8px; }
.note { color: var(--muted); font-size: 13px; margin: 10px 4px 0; line-height: 1.45; }

.veh-row, .veh-info {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 12px 20px; min-height: 48px; border: 0; border-top: 1px solid var(--line-soft);
    background: transparent; color: inherit; font-size: 14px; font-weight: 600; position: relative;
}
.card > :first-child { border-top: 0; }
.veh-row .ic, .veh-info .ic { width: 18px; height: 18px; color: var(--muted); }
/* Une photo en vignette a la place de l'icone (l'historique des releves : la photo du compteur). */
.row-thumb { flex: 0 0 52px; width: 52px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--action-bg); }
.veh-row > span:not(.chev):not(.pill):not(.btn-sm), .veh-info > span:not(.pill) { flex: 1; min-width: 0; }
.veh-row small, .veh-info small { display: block; font-weight: 500; font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
/* UNE LIGNE PAR LIBELLE (remarques du 01/10) : le titre d'une ligne ne passe jamais a la ligne — ce qui deborde se coupe —, et une
   pastille (« CONDUITE SÛRE ») se lit SOUS le titre, apres la date, jamais a sa droite. La sous-ligne d'une ligne qui mene
   quelque part tient aussi sur une ligne ; celle d'une information (une explication) peut en prendre deux. */
.row-t { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.veh-row small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
small.row-s { display: flex; align-items: center; gap: 8px; min-width: 0; }
.row-s .row-d { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-s .row-d:empty { display: none; }
.row-s .pill { height: 18px; padding: 0 7px; font-size: 9.5px; }
.veh-info .row-s .row-d { white-space: normal; }
.veh-row .chev { color: var(--muted-2); }
.veh-row:hover { background: var(--panel-alt); }
.veh-row.na { opacity: .45; pointer-events: none; }

.pill {
    display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; flex: 0 0 auto;
    background: var(--action-bg); color: var(--action);
    font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.pill.good { background: var(--good-bg); color: var(--good); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }

/* Etat vide, et echec d'une section (meme gabarit : une pastille et un titre). */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 34px 24px 28px; }
.empty-ic {
    width: 46px; height: 46px; border-radius: 50%; background: var(--action-bg); color: var(--muted-2);
    display: grid; place-items: center; margin-bottom: 16px;
}
.empty-ic .ic { width: 23px; height: 23px; }
.empty-ic.echec { background: var(--warn-bg); color: var(--warn); }
.empty-t { font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.empty-s { color: var(--muted); font-size: 14px; margin: 8px 0 0; line-height: 1.45; }

/* Messages en tete d'ecran. */
.msg { margin-top: 14px; padding: 12px 15px; border-radius: var(--r-md); font-size: 14px; font-weight: 600; line-height: 1.4; }
.msg-info { background: var(--action-bg); color: var(--action); }
.msg-good { background: var(--good-bg); color: var(--good); }
.msg-warn { background: var(--warn-bg); color: var(--warn); }
.msg-bad { background: var(--bad-bg); color: var(--bad); }

/* ---- Action principale (au-dessus des onglets) ---- */
.dock-act {
    position: fixed; bottom: calc(90px + var(--safe-b)); left: 14px; right: 14px; z-index: 60;
    max-width: calc(var(--app-w) - 28px); margin: 0 auto;
    display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px;
    border: 0; border-radius: 999px; background: var(--text); color: #fff;
    font-size: 16px; font-weight: 700; letter-spacing: -.01em;
}
.dock-act:hover { background: #000; }
/* LE PIED DE L'ECRAN : le bouton de l'operation en cours (celui d'un formulaire, ou l'action principale), colle en bas —
   au-dessus des onglets, ou au bas d'un parcours plein ecran. Pose hors de tout bloc anime ; ses boutons s'y rangent l'un sur
   l'autre. */
.pied { position: fixed; bottom: calc(90px + var(--safe-b)); left: 14px; right: 14px; z-index: 60;
    max-width: calc(var(--app-w) - 28px); margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
/* La page s'arrete juste au-dessus du bouton (retour de JM du 29/09) : un fond, du haut du pied jusqu'au bas de l'ecran, sur
   toute la largeur de l'application ; les onglets passent devant. */
.pied::before { content: ''; position: absolute; top: -10px; bottom: calc(-90px - var(--safe-b)); left: -14px; right: -14px;
    z-index: -1; background: var(--bg); }
.app.si-flow .pied::before { bottom: calc(-24px - var(--safe-b)); }
.pied .dock-act { position: static; width: 100%; max-width: none; margin: 0; cursor: pointer; }
.pied form { margin: 0; }
.pied .dock-act .ic { width: 19px; height: 19px; }
.dock-act.off { opacity: .4; pointer-events: none; }
body:has(.pied .dock-act ~ .dock-act, .pied .dock-act ~ form) .screen { padding-bottom: calc(var(--tabs-h) + var(--safe-b) + 160px); }

/* ---- Suivis (lot 2.7) ---- */
/* L'etat sous le titre : la pastille, seule. */
.etat { margin-top: 10px; }
/* Une phrase dans une carte, quand il n'y a rien d'autre a montrer. */
.texte { margin: 0; padding: 14px 20px; font-size: 14px; line-height: 1.45; color: var(--muted); font-weight: 500; }
/* Une ligne qui agit : un formulaire autour d'un bouton, qui se lit comme les autres lignes. */
.rowf { margin: 0; }
.card > .rowf:first-child > .veh-row { border-top: 0; }
button.veh-row { cursor: pointer; }
/* La bascule (« La voiture est immobilisée ») : un rond vide, ou coche. */
.veh-row .coche { flex: 0 0 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; color: transparent; }
.veh-row .coche .ic { width: 14px; height: 14px; color: inherit; }
.veh-row .coche.on { background: var(--text); border-color: var(--text); color: #fff; }

/* ---- Alertes (lot 2.8) ---- */
/* Une ligne d'alerte : l'icone dans une pastille rouge (a faire), orangee (ca attend), neutre (la flotte suit). */
.veh-al { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: transparent; color: inherit;
    padding: 13px 20px; border-top: 1px solid var(--line-soft); text-decoration: none; }
.veh-al-ic { flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--bad-bg); color: var(--argus); display: grid; place-items: center; }
.veh-al-ic .ic { width: 18px; height: 18px; }
.veh-al-b { flex: 1; min-width: 0; }
.veh-al-t { display: block; font-size: 15px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.veh-al-s { display: block; font-size: 13px; font-weight: 500; color: var(--argus); margin-top: 2px; line-height: 1.35; }
.veh-al .chev { color: var(--muted-2); }
.veh-al:hover { background: var(--panel-alt); }
.veh-al.fixe:hover { background: transparent; }
.veh-al.attention .veh-al-ic { background: var(--warn-bg); color: var(--warn); }
.veh-al.attention .veh-al-s { color: var(--muted); }
.veh-al.info .veh-al-ic { background: var(--action-bg); color: var(--muted); }
.veh-al.info .veh-al-s { color: var(--muted); }
/* Sans reseau, une section qui le demande laisse la place a l'etat « hors ligne » (maquette, alertes/hors). */
.hors-seul { display: none; margin-top: 14px; }
.hors .hors-seul { display: block; }
.hors .enligne-sec { display: none; }

/* ---- Formulaires ---- */
.field { margin-top: 16px; }
.field label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 14px; }
.field input, .field select, .field textarea {
    width: 100%; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--text);
    border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel);
}
.field .check { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.field .check input { width: 20px; height: 20px; }
.help { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
.btn {
    display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin-top: 22px;
    border: 0; border-radius: 999px; background: var(--text); color: #fff; font-size: 16px; font-weight: 700;
}
.btn:hover { background: #000; }

/* ---- Barre d'onglets ---- */
/* La page s'arrete juste au-dessus de la barre d'onglets (retour de JM du 30/09) : un fond, de 10 px au-dessus d'elle jusqu'au
   bas de l'ecran, sur la largeur de l'application ; la barre (et le pied) passent devant. Pose sur .app : un pseudo-element de
   la barre elle-meme peindrait par-dessus son fond blanc. */
.app:has(.tabbar)::after {
    content: ''; position: fixed; left: 0; right: 0; bottom: 0; z-index: 59; max-width: var(--app-w); margin: 0 auto;
    height: calc(var(--tabs-h) + 20px + var(--safe-b)); background: var(--bg);
}
.tabbar {
    position: fixed; bottom: calc(10px + var(--safe-b)); left: 14px; right: 14px; z-index: 60;
    max-width: calc(var(--app-w) - 28px); margin: 0 auto; display: flex; padding: 6px 4px;
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--line-soft); border-radius: 999px;
    box-shadow: 0 12px 30px -10px rgba(15, 15, 20, .22), 0 2px 6px rgba(15, 15, 20, .05);
}
.tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 54px;
    padding: 0 2px; border-radius: 8px; position: relative; color: var(--muted); font-size: 11px; font-weight: 600;
    transition: color var(--dur-fast) var(--ease);
}
.tab .pel {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 14px; border-radius: 999px;
    transition: background var(--dur-fast) var(--ease);
}
.tab .ic { width: 21px; height: 21px; transition: transform var(--dur-fast) var(--spring); }
.tab:active .ic { transform: scale(.9); }
.tab-l { font-size: 10.5px; line-height: 1.15; }
.tab .plein { display: none; }
.tab[aria-current="page"] { color: var(--text); font-weight: 700; }
.tab[aria-current="page"] .trait { display: none; }
.tab[aria-current="page"] .plein { display: block; }
.tab[aria-current="page"] .pel { background: var(--action-bg); }
.tab-aide[aria-current="page"] .pel { background: var(--argus); color: #fff; }
.tab-n {
    position: absolute; top: 4px; left: 50%; margin-left: 6px; min-width: 17px; height: 17px; padding: 0 5px;
    border-radius: 999px; background: var(--text); color: #fff; font-size: 10.5px; font-weight: 800;
    display: grid; place-items: center; font-variant-numeric: tabular-nums;
}

/* ---- Vignette de fin de geste ---- */
.okv {
    position: fixed; inset: 0; z-index: 400; background: var(--panel);
    display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 40px;
    text-align: center; opacity: 0; transition: opacity var(--dur-slow) var(--ease);
}
.okv[hidden] { display: none; }
.okv.go { opacity: 1; }
.okv-c {
    width: 88px; height: 88px; border-radius: 50%; background: var(--text); display: grid; place-items: center;
    transform: scale(.72); opacity: 0; transition: transform 440ms var(--spring), opacity 200ms var(--ease);
}
.okv-k { width: 46px; height: 46px; }
.okv-k path {
    stroke: #fff; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 36; stroke-dashoffset: 36; transition: stroke-dashoffset 420ms var(--ease) 220ms;
}
.okv-t {
    font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-top: 24px; opacity: 0; transform: translateY(9px);
    transition: opacity 260ms var(--ease) 340ms, transform 260ms var(--ease) 340ms;
}
.okv-s {
    font-size: 15px; color: var(--muted); margin-top: 8px; line-height: 1.45; opacity: 0; transform: translateY(9px);
    transition: opacity 260ms var(--ease) 420ms, transform 260ms var(--ease) 420ms;
}
.okv.go .okv-c { transform: none; opacity: 1; }
.okv.go .okv-k path { stroke-dashoffset: 0; }
.okv.go .okv-t, .okv.go .okv-s { opacity: 1; transform: none; }

/* ---- Gabarit d'attente ---- */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.sk { display: block; background: var(--line); border-radius: 8px; animation: pulse 1.4s ease-in-out infinite; }
.skrow { display: flex; gap: 14px; align-items: center; padding: 16px 20px; border-top: 1px solid var(--line-soft); }
.skrow:first-child { border-top: 0; }
.sk-card { margin-top: 24px; }

/* ---- Activation (enrolement) ---- */
.enrol h1 { font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: 18px 0 10px; }
.enrol p { color: var(--muted); }
.enrol label { display: block; margin: 16px 0 6px; font-weight: 700; font-size: 14px; }
.enrol input {
    width: 100%; padding: 12px 14px; font: inherit; font-size: 16px;
    border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel);
}
.enrol .muted { font-size: 14px; margin-top: 18px; }
.enrol .muted a { text-decoration: underline; }

/* ---- Premiere ouverture (maquette, ouverture/*) ----
   Une etape : un filet, un titre, une ligne, un contenu, toujours a la meme hauteur, toujours centres.
   Plein ecran : la barre d'onglets n'a rien a faire dans un parcours dont on ne sort pas. */
.ouv-page {
    position: fixed; inset: 0; z-index: 50; max-width: var(--app-w); margin: 0 auto; overflow-y: auto;
    padding: 0 var(--gutter) 156px;
    background: linear-gradient(180deg, rgba(21, 21, 26, 0) 38%, rgba(21, 21, 26, .10) 100%),
                linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
}
body:has(.ouv-page) .dock-act { bottom: calc(80px + var(--safe-b)); left: var(--gutter); right: var(--gutter);
    max-width: calc(var(--app-w) - var(--gutter) * 2); }
.ouv-filet { height: 3px; border-radius: 999px; background: var(--line); margin: 16px 0 0; overflow: hidden; }
.ouv-filet i { display: block; height: 100%; border-radius: 999px; background: var(--text); transition: width var(--dur-slow) var(--ease); }
.ouv-filet.vide { background: transparent; }
.ouv-tete { margin-top: clamp(48px, 17vh, 181px); text-align: center; }
.ouv-h1 { font-size: 27px; font-weight: 800; letter-spacing: -.03em; line-height: 1.16; max-width: 330px; margin: 0 auto; text-wrap: balance; }
.ouv-sous { margin: 10px auto 0; max-width: 300px; font-size: 14.5px; line-height: 1.45; color: var(--muted); text-wrap: balance; }
.ouv-bloc { margin-top: 26px; text-align: center; }
.ouv-bas {
    position: fixed; z-index: 55; left: 0; right: 0; max-width: var(--app-w); margin: 0 auto; padding: 0 var(--gutter);
    bottom: calc(24px + var(--safe-b)); min-height: 38px; display: flex; align-items: flex-start; justify-content: center;
    font-size: 12.5px; line-height: 1.5; color: var(--muted-2); text-align: center;
}
.ouv-bas a { color: var(--text); font-weight: 600; text-decoration: underline; }
.ouv-erreur { margin: 18px auto 0; max-width: 320px; text-align: left; }

/* Bienvenue : la route, le logo, rien d'autre. */
.ouv-page.ouv-noir { background: var(--text); padding: 0; }
.ouv-fond { position: absolute; inset: 0; overflow: hidden; }
.ouv-fond img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ouv-voile { position: absolute; inset: 0; background: rgba(15, 15, 20, .5); }
.ouv-bienv { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 100%; padding: 0 32px 150px; }
.ouv-logo { width: 210px; max-width: 62%; height: auto; display: block; }
body:has(.ouv-noir) .dock-act { background: var(--panel); color: var(--text); }
body:has(.ouv-noir) .dock-act:hover { background: #fff; }
body:has(.ouv-noir) .ouv-bas { color: rgba(255, 255, 255, .66); }
body:has(.ouv-noir) .ouv-bas a { color: #fff; }
body:has(.ouv-noir) .build { color: rgba(255, 255, 255, .5); }

/* Code d'invitation : six cases remplies par un champ cache, le clavier du telephone ecrit. */
.ouv-cases { display: flex; gap: 9px; width: 100%; border: 0; background: transparent; padding: 0; cursor: text; }
.ouv-case {
    flex: 1; min-width: 0; height: 58px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel);
    display: grid; place-items: center; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ouv-case.on { border-color: var(--text); box-shadow: 0 0 0 1px var(--text) inset; }
.ouv-cache { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.ouv-champ { margin-top: 22px; text-align: left; }
.ouv-champ label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.ouv-champ small { display: block; margin-top: 7px; font-size: 12.5px; color: var(--muted); }
.ouv-saisie {
    display: block; width: 100%; height: 58px; border: 1px solid var(--line); border-radius: var(--r); padding: 0 15px;
    background: var(--panel); font: inherit; color: inherit; font-size: 16px; font-weight: 600;
}
.ouv-saisie:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 1px var(--text) inset; }

/* Permis : deux vues cote a cote. */
.ouv-deux { display: flex; gap: 12px; }
.ouv-deux form { flex: 1; min-width: 0; margin: 0; }
.ouv-vue {
    width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; height: 132px;
    border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); color: var(--muted-2);
    box-shadow: var(--shadow-card); cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ouv-vue .ic { width: 26px; height: 26px; }
.ouv-vue b { font-size: 15px; font-weight: 700; color: var(--text); }
.ouv-vue small { font-size: 12.5px; color: var(--muted-2); }
.ouv-vue.fait { border-color: var(--good); color: var(--good); }
.ouv-vue.fait small { color: var(--good); }
.ouv-vue.envoi { opacity: .6; pointer-events: none; }

/* « C'est bien vous ? » : une carte, quatre lignes. */
.ouv-carte { border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card); overflow: hidden; text-align: left; }
.ouv-ligne { padding: 15px 20px; border-top: 1px solid var(--line-soft); }
.ouv-ligne:first-child { border-top: 0; }
.ouv-ligne b { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; }
.ouv-ligne small { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); line-height: 1.35; }

/* Les ecrans de choix (feuille) : une porte en haut a gauche, le titre au meme axe. */
.ouv-feuille { position: relative; margin-top: 14px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.ouv-porte { position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 999px; background: var(--action-bg);
    color: var(--text); display: grid; place-items: center; }
.ouv-porte .ic { width: 18px; height: 18px; }
.ouv-h2 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; text-align: center; max-width: 286px; margin: 0 auto; }
.ouv-relu { text-align: left; margin-top: 18px; }
.ouv-relu label.veh-row { align-items: flex-start; cursor: pointer; }
.ouv-relu input { position: absolute; opacity: 0; pointer-events: none; }
.ouv-relu .radio {
    flex: 0 0 24px; height: 24px; border-radius: 999px; display: grid; place-items: center;
    box-shadow: 0 0 0 1.5px var(--line) inset; color: transparent;
}
.ouv-relu input:checked ~ .radio { background: var(--text); box-shadow: none; color: #fff; }
.ouv-relu .radio .ic { width: 16px; height: 16px; stroke-width: 2.6; }
.ouv-mot {
    display: block; width: 100%; margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 15px;
    background: var(--panel); font: inherit; font-size: 15px; line-height: 1.45; color: inherit; resize: none;
}

/* Charte : le corps reste aligne a gauche, on ne centre pas sept paragraphes de droit. */
.ouv-charte { padding: 14px 0; }
.ouv-corps { max-height: 314px; overflow: auto; -webkit-overflow-scrolling: touch; text-align: left; padding: 0 20px;
    overscroll-behavior: contain; font-size: 14px; line-height: 1.5; }
.ouv-corps p { margin: 0 0 12px; }
.ouv-corps p:last-child { margin-bottom: 0; }

/* Autorisations : une par une, les pions disent ou l'on en est. */
.ouv-trio { display: flex; justify-content: center; gap: 14px; }
.ouv-pion { width: 66px; height: 66px; border-radius: 999px; background: var(--action-bg); color: var(--muted-2);
    display: grid; place-items: center; transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease); }
.ouv-pion .ic { width: 26px; height: 26px; }
.ouv-pion.vif { background: var(--text); color: #fff; }
.ouv-pion.fait { background: var(--good-bg); color: var(--good); }
.ouv-pion.refus { background: var(--warn-bg); color: var(--warn); }

/* Fin : le sceau, la voiture. */
.ouv-sceau { width: 78px; height: 78px; margin: 0 auto; border-radius: 999px; background: var(--good-bg); color: var(--good);
    display: grid; place-items: center; }
.ouv-sceau .ic { width: 34px; height: 34px; stroke-width: 2.4; }
.ouv-cle { margin-top: 24px; }
.ouv-cle-n { margin-top: 11px; font-size: 15px; font-weight: 700; }

/* Plaque d'immatriculation (maquette). */
.plate { display: inline-flex; align-items: stretch; height: 34px; border: 1px solid #15151a; border-radius: 3px; overflow: hidden;
    background: #fff; color: #15151a; box-shadow: 0 1px 2px rgba(15, 15, 20, .06); }
.plate i { width: 15px; flex: 0 0 15px; background: var(--text); display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 1px; font-style: normal; padding: 3px 0; }
.plate i svg { width: 10px; height: 10px; display: block; }
.plate i em { font-style: normal; font-size: 7px; font-weight: 700; color: #fff; line-height: 1; }
.plate b { display: grid; place-items: center; padding: 0 9px; font-size: 19px; font-weight: 700; letter-spacing: .02em;
    font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Accueil contextuel (lot 2.1) : la carte du vehicule du moment, l'encart au-dessus, les tuiles.
   Repris de la maquette du 19/09 ; la photo du vehicule a droite est celle de la maquette (Peugeot 3008) pour tous, en
   attendant une base de photos des modeles. */
.num { font-variant-numeric: tabular-nums; }
.veh {
    display: block; width: 100%; border-radius: var(--r-lg); background: var(--panel);
    box-shadow: var(--shadow-card); position: relative; overflow: hidden; margin-top: 10px;
}
.veh-main { display: block; width: 100%; padding: 20px; position: relative; color: inherit; }
.veh-main.car { padding-right: 158px; min-height: 166px; }
.veh-main.car:has(.tl) { padding-right: 176px; }
.veh-main.car .tl, .veh-main.car .tl + .sub { margin-right: -156px; }
.veh-car { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 156px; pointer-events: none; display: grid; place-items: center; }
.veh-car img { width: 100%; height: auto; display: block; }
.veh-main.car:has(.tl) .veh-car { top: 24px; transform: none; width: 172px; }
.veh.off .veh-car { opacity: .38; }
.veh-model { font-size: 17px; font-weight: 600; margin-top: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.big { font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin-top: 4px; }
.big small { font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.sub { font-size: 13px; color: var(--muted); margin-top: 6px; }
.state {
    display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; margin-bottom: 12px;
    background: var(--action-bg); color: var(--action); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.veh.off { background: var(--panel-alt); box-shadow: none; border: 1px solid var(--line); }
.veh.off .plate { opacity: .42; }
.veh.off .veh-model { color: var(--muted); }
.veh.off .veh-row, .veh.off .veh-info { border-top-color: var(--line); }

/* La frise d'une periode : debut a gauche, fin a droite, le remplissage dit ou l'on en est. */
.tl {
    display: flex; align-items: flex-end; gap: 12px; margin-top: 18px;
    font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2);
}
.tl b { display: block; font-size: 16px; font-weight: 800; color: var(--text); letter-spacing: -.01em; text-transform: none; margin-bottom: 1px; }
.tl span { flex: 0 0 auto; }
.tl span + span { text-align: right; }
.tl i { flex: 1; height: 3px; background: var(--line); border-radius: 999px; position: relative; font-style: normal; margin-bottom: 6px; }
.tl i em { position: absolute; left: 0; top: 0; bottom: 0; background: var(--text); border-radius: 999px; font-style: normal; }
.tl i em:after {
    content: ""; position: absolute; right: -3px; top: -3px; width: 9px; height: 9px; border-radius: 50%;
    background: var(--text); border: 2px solid var(--panel); box-sizing: content-box;
}
.tl.late i em, .tl.late i em:after { background: var(--argus); }

/* L'encart au-dessus de la carte : le pret, la reservation, le permis a photographier. */
.pret {
    display: flex; align-items: center; gap: 13px; width: 100%; padding: 15px 18px; margin-top: 12px;
    border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card); color: inherit;
}
.pret-ic { flex: 0 0 38px; height: 38px; border-radius: 50%; background: var(--action-bg); color: var(--text); display: grid; place-items: center; }
.pret-ic .ic { width: 20px; height: 20px; }
.pret-b { flex: 1; min-width: 0; }
.pret-e { display: block; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pret-t { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.01em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pret .chev { color: var(--muted-2); }
.pret.tard .pret-ic { background: var(--bad-bg); color: var(--argus); }

/* Les tuiles de l'Aide : l'urgence en rouge, le signalement en sombre. */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; align-items: stretch; }
.tile {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 14px; padding: 16px;
    border-radius: var(--r-md); background: var(--panel); box-shadow: var(--shadow-card); min-height: 112px; color: inherit; position: relative;
}
.tile.large { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 0; gap: 16px; }
.tile-ic { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: var(--action-bg); display: grid; place-items: center; color: var(--text); }
.tile-ic.bad { background: var(--bad-bg); color: var(--argus); }
/* Le titre d'une tuile tient sur une ligne (remarques du 01/10) : sa taille suit la largeur du telephone — « Signaler un problème »,
   « Relever le kilométrage » tiennent des 360 px —, et ce qui deborde encore se coupe. */
.tile-b { display: block; width: 100%; min-width: 0; }
.tile-t { display: block; font-size: clamp(12.5px, 3.5vw, 15px); font-weight: 700; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Ce qui attend le conducteur derriere une tuile : la pastille numerotee d'Alertes (remarques du 01/10). */
.tile-n { position: absolute; top: 12px; right: 12px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: var(--text); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.tile:has(.tile-ic.bad) .tile-n, .tile.sombre .tile-n { background: #fff; color: var(--text); }
.tile-s { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.tile:has(.tile-ic.bad) { background: var(--argus); box-shadow: 0 14px 32px -14px rgba(166, 25, 46, .55); }
.tile:has(.tile-ic.bad) .tile-ic, .tile.sombre .tile-ic { background: rgba(255, 255, 255, .18); color: #fff; }
.tile:has(.tile-ic.bad) .tile-t, .tile.sombre .tile-t { color: #fff; }
.tile:has(.tile-ic.bad) .tile-s, .tile.sombre .tile-s { color: rgba(255, 255, 255, .82); }
.tile.sombre { background: var(--text); box-shadow: 0 14px 32px -14px rgba(15, 15, 20, .5); }

/* ---- Réserver (remarques du 01/10) : « Autour de vous », les questions Où / Quand / Combien, le curseur « Jusqu'à quand ? » ---- */
.card.autour { margin-top: 10px; }
.pv-head { padding: 18px 20px 14px; }
.pv-head .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.pv-head h2 { font-size: 22px; font-weight: 800; letter-spacing: -.025em; margin: 6px 0 0; }
.pv-row { display: flex; align-items: center; gap: 13px; width: 100%; padding: 13px 20px; border-top: 1px solid var(--line-soft); color: inherit; text-align: left; }
.pv-row .ph { flex: 0 0 40px; height: 40px; border-radius: 999px; background: var(--action-bg); color: var(--muted); display: grid; place-items: center; }
.pv-row .ph .ic { width: 21px; height: 21px; }
.pv-row.act .ph { background: var(--text); color: #fff; }
.pv-row .rb { flex: 1; min-width: 0; }
.pv-row .rt { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-row .rt i, .row-m { font-style: normal; font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.pv-row .rs { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-row .meta { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--muted); }
.pv-row .meta2 { display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.25; }
.pv-row .meta2 small { margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--muted-2); }
.pv-row .chev { color: var(--muted-2); }
.crit { display: flex; align-items: center; gap: 13px; width: 100%; padding: 15px 18px; border-top: 1px solid var(--line-soft); color: inherit; text-align: left; }
.card > .crit:first-child { border-top: 0; }
.crit-ic { flex: 0 0 38px; height: 38px; border-radius: 50%; background: var(--action-bg); color: var(--text); display: grid; place-items: center; }
.crit-ic .ic { width: 20px; height: 20px; }
.crit-b { flex: 1; min-width: 0; }
.crit-e { display: block; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2); }
.crit-v { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.01em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crit-v.vide { color: var(--muted-2); font-weight: 600; }
.crit .chev { color: var(--muted-2); }
/* Les jours en bandeau (le volet « Quand ») : ils defilent ; le jour de la semaine, le quantieme dessous. */
.choix.bandeau { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
.choix.bandeau::-webkit-scrollbar { display: none; }
.choix-o.jour { flex: 0 0 58px; flex-direction: column; justify-content: center; gap: 2px; min-height: 64px; padding: 8px 4px; border-radius: var(--r-md); }
.choix-o.jour .ab { font-size: 12px; font-weight: 600; color: var(--muted); }
.choix-o.jour .nn { font-size: 15px; font-weight: 800; white-space: nowrap; }
.choix-o.jour:has(input:checked) .ab { color: rgba(255, 255, 255, .8); }
/* Le curseur « Jusqu'à quand ? » (maquette, « pv-dur ») : la piste, le remplissage, la poignee, la zone indisponible apres le mur. */
.curseur .card { margin-top: 0; }
.pv-dur { padding: 18px 20px 0; }
.pv-durv { font-size: 30px; font-weight: 800; letter-spacing: -.03em; margin-bottom: 14px; }
.pv-track { position: relative; height: 44px; border-radius: 999px; background: var(--action-bg); overflow: hidden; }
.pv-plein { position: absolute; top: 0; bottom: 0; right: 0; left: calc(18px + var(--mur, 1) * (100% - 36px)); background: var(--warn-bg); box-shadow: inset 1px 0 0 var(--warn); }
.pv-fill { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(13px + var(--pv, 0) * (100% - 36px)); border-radius: 999px; background: var(--text); }
.pv-h { position: absolute; top: 50%; left: calc(18px + var(--pv, 0) * (100% - 36px)); width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 999px;
    background: #fff; box-shadow: 0 2px 8px rgba(15, 15, 20, .25); pointer-events: none; }
.pv-h::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 14px; margin: -7px 0 0 -1px; border-radius: 2px; background: var(--muted-2); }
.pv-track input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
    -webkit-appearance: none; appearance: none; background: transparent; }
.pv-track input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 36px; height: 44px; }
.pv-track input[type=range]::-moz-range-thumb { width: 36px; height: 44px; border: 0; }
.pv-ticks { display: flex; justify-content: space-between; margin: 9px 18px 0; font-size: 12px; color: var(--muted-2); font-weight: 600; }
.pv-note { padding: 14px 20px 16px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.pv-note b { color: var(--text); font-weight: 700; }

/* L'AGENDA DE L'EN-TETE (remarques du 01/10 ; maquette, « bell ») : a hauteur du titre, le nombre de reservations a cote. */
.bell { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 13px; flex: 0 0 auto; border-radius: var(--r);
    background: var(--panel); border: 1px solid var(--line-soft); color: var(--text); box-shadow: var(--shadow-card); }
.bell .ic { width: 19px; height: 19px; color: var(--muted); }
.bell-n { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }

/* OU EST LA VOITURE (maquette, « mapband ») : un plan dessine sous la frise, la place et la distance a pied, « Y aller ». */
.mapband { display: block; position: relative; border-top: 1px solid var(--line-soft); }
.mapband svg { display: block; width: 100%; height: 132px; }
.mapband .over { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mapband .where { min-width: 0; background: rgba(255, 255, 255, .94); border-radius: 999px; padding: 8px 12px; font-size: 13px; font-weight: 700;
    box-shadow: var(--shadow-card); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapband .where small { font-size: 13px; font-weight: 500; color: var(--muted); }
.mapband .goto { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px;
    background: var(--text); color: #fff; font-size: 13px; font-weight: 700; box-shadow: var(--shadow-card); }
.mapband .goto .ic { width: 16px; height: 16px; }

/* Le vehicule attitre, en retrait sur une ligne (maquette, « vsw »), quand une autre voiture occupe le moment. */
.vsw { display: flex; align-items: center; gap: 13px; width: 100%; padding: 14px 18px; margin-top: 12px; border-radius: var(--r-lg);
    background: var(--panel-alt); border: 1px solid var(--line); color: inherit; }
.vsw-ic { flex: 0 0 36px; height: 36px; border-radius: 50%; background: var(--action-bg); color: var(--muted); display: grid; place-items: center; }
.vsw-ic .ic { width: 19px; height: 19px; }
.vsw-b { flex: 1; min-width: 0; }
.vsw-t { display: block; font-size: 14px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vsw-s { display: block; font-size: 13px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vsw .chev { color: var(--muted-2); }

/* « Prolonger » : un petit bouton au bout d'une ligne (maquette, « btn-sm »). */
.btn-sm { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px;
    background: var(--action-bg); color: var(--text); font-size: 13px; font-weight: 700; }

/* « Me le rappeler plus tard » : le geste secondaire, en bas d'ecran, ecrit comme les liens de l'ouverture. */
.plus-tard { border: 0; background: transparent; padding: 4px 8px; font: inherit; font-size: 14px; font-weight: 600;
    color: var(--text); text-decoration: underline; cursor: pointer; }
.ouv-bloc .note { text-align: center; margin-top: 16px; }

/* ---- Compteur et releves (lot 2.3) : l'ecart d'un releve cale a droite, la photo en grand. */
.veh-row > b.dkm, .veh-info > b.dkm { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--muted);
    font-variant-numeric: tabular-nums; letter-spacing: 0; }
/* Deux valeurs a droite, l'une sous l'autre (la distance, puis les places) : la ligne garde sa hauteur. */
.veh-row > b.dkm2 { display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.25; }
.veh-row > b.dkm2 small { margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--muted-2); }
.card.photo img { display: block; width: 100%; height: auto; }
form.envoi { opacity: .6; pointer-events: none; }
label.btn { display: flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer; }

/* ---- Profil (lot 2.9) ---- */
/* Un champ nu, sous le titre qui en est le libelle ; et la croix qui l'efface (maquette, moi/telephone). */
.field input::placeholder, .field textarea::placeholder, .rech-f input::placeholder { color: var(--muted-2); }
.ch-x { position: relative; }
.ch-x input { padding-right: 48px; }
.ch-x .x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
.rech-f .x, .ch-x .x { flex: 0 0 32px; width: 32px; height: 32px; border: 0; border-radius: 999px; background: var(--action-bg);
    color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.rech-f .x[hidden], .ch-x .x[hidden] { display: none; }
.rech-f .x .ic, .ch-x .x .ic { width: 15px; height: 15px; stroke-width: 2.4; }
/* La recherche (maquette, moi/adresse) : le meme dessin de champ, une loupe devant ; les propositions sont des LIGNES NUES,
   pas une carte — la commune y departage deux voies du meme nom. */
.rech-f { display: flex; align-items: center; gap: 11px; min-height: 56px; padding: 0 9px 0 15px; background: var(--panel);
    border: 1px solid var(--line); border-radius: var(--r-md);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.rech-f:focus-within { border-color: var(--text); box-shadow: 0 0 0 1px var(--text) inset; }
.rech-f .lo { flex: 0 0 19px; width: 19px; height: 19px; color: var(--muted); }
.rech-f input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 16px; color: inherit; padding: 16px 0; }
.rech-f input:focus { outline: none; }
.props { margin-top: 6px; }
.adr-l { display: flex; align-items: center; gap: 15px; width: 100%; text-align: left; padding: 15px 2px; color: inherit;
    text-decoration: none; border-bottom: 1px solid var(--line-soft); }
.adr-l:last-child { border-bottom: 0; }
.adr-l .ic { width: 20px; height: 20px; flex: 0 0 20px; color: var(--muted); }
.adr-l b { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.adr-l small { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
/* Un texte a intertitres (la charte) : il se lit, et defile dans sa carte. */
.recit { max-height: 360px; overflow: auto; -webkit-overflow-scrolling: touch; padding: 14px 20px 16px; font-size: 14px;
    line-height: 1.55; color: var(--text); }
.recit p { margin: 0 0 12px; }
.recit p:last-child { margin-bottom: 0; }

/* ---- La baguette magique (lot 2.11) : en mode demo, le bouton qui remplit le formulaire d'un geste ---- */
.baguette { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--line-soft);
    background: var(--panel); color: var(--argus); box-shadow: var(--shadow-card); cursor: pointer; }
.baguette .ic { width: 20px; height: 20px; }
.baguette:disabled { opacity: .5; cursor: progress; }
.ouv-tete { position: relative; }
.ouv-tete .baguette { position: absolute; top: 0; right: 0; }

/* ---- Le sinistre (lot 3.1) : la declaration en plein ecran, ses bacs de photos, son recapitulatif, le dossier ---- */
/* Le parcours n'a ni en-tete d'application ni barre d'onglets : sa barre haute (retour, sortie, compteur, jauge) est posee hors
   du defilement, le bouton de l'etape en pied. */
.si-top { position: fixed; top: 0; left: 0; right: 0; z-index: 62; max-width: var(--app-w); margin: 0 auto;
    padding: 0 10px 12px; background: var(--bg); }
.si-top .cmd { display: flex; align-items: center; gap: 8px; padding: 14px 10px 0; }
.si-top .cmd .back { margin: 0; }
.cmd-sep { flex: 1; }
.garder { min-height: 40px; padding: 0 15px; border: 0; border-radius: 999px; background: var(--panel); color: var(--text);
    box-shadow: var(--shadow-card); font-size: 13px; font-weight: 700; cursor: pointer; }
.sortir { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--panel); color: var(--text);
    box-shadow: var(--shadow-card); }
.sortir .ic { width: 20px; height: 20px; stroke-width: 2.2; }
.si-top .compte { display: block; font-size: 13px; font-weight: 700; color: var(--muted); padding: 12px 10px 9px; }
.si-top .meter { height: 6px; margin: 0 10px; border-radius: 999px; background: var(--panel); overflow: hidden; }
.si-top .meter i { display: block; height: 100%; background: var(--text); border-radius: 999px; transition: width var(--dur-slow) var(--ease); }
.app.si-flow .screen { padding: 72px var(--gutter) calc(110px + var(--safe-b)); }
.app.si-flow.si-compte .screen { padding-top: 112px; }
.app.si-flow .pied { bottom: calc(24px + var(--safe-b)); }
.si-h1 { font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin: 6px 0 0; }
/* Le titre de l'etape reste sous la barre haute quand on defile (retour de JM du 29/09) : colle juste sous elle, son fond
   cache ce qui passe derriere ; au repos, il est a sa place (le -8px de marge rend les 14px de haut). */
.app.si-flow .si-h1 { position: sticky; top: 64px; z-index: 61; margin-top: -8px; padding: 14px 0 8px; background: var(--bg); }
.app.si-flow.si-compte .si-h1 { top: 104px; }
.si-flow .lead { font-size: 15px; margin-top: 8px; }
.si-form { margin-top: 18px; }
.si-form.envoi { opacity: 1; }
.si-form.envoi .zone, .si-form.envoi .ajout { opacity: .6; pointer-events: none; }
form.envoi ~ .pied .dock-act { opacity: .6; pointer-events: none; }

/* Les champs d'un parcours : l'asterisque de ce qui est demande, ce qui manque sous le champ, deux champs sur une ligne. */
.field label em { font-style: normal; color: var(--argus); }
.field.ko input, .field.ko select, .field.ko textarea { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad) inset; }
.ko-msg { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--bad); }
.ko-msg .ic { width: 16px; height: 16px; flex: 0 0 16px; }
.duo { display: flex; gap: 10px; align-items: flex-end; }
/* La date et l'heure se lisent depuis la gauche : centrees, elles se coupaient dans un champ etroit (retour de JM du 28/09). */
.field input[type=date], .field input[type=time] { text-align: left; }
.field input[type=date]::-webkit-date-and-time-value, .field input[type=time]::-webkit-date-and-time-value { text-align: left; }
.duo .field { flex: 1; min-width: 0; }
.inter { font-size: 17px; font-weight: 800; letter-spacing: -.015em; margin: 26px 0 0; }
.inter:first-of-type { margin-top: 6px; }
.prose { margin: 14px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.prose b { color: var(--text); font-weight: 700; }
.form .msg { display: flex; align-items: flex-start; gap: 10px; }
.form .msg .ic { width: 19px; height: 19px; flex: 0 0 19px; margin-top: 1px; }
.form .msg b { font-weight: 800; }
[data-si][hidden] { display: none; }
.choix-o.avec-ic { gap: 14px; }
.choix-o.avec-ic > .ic { width: 20px; height: 20px; color: var(--muted); }
.choix-o.avec-ic:has(input:checked) > .ic { color: #fff; }

/* Un bac de photos : les vignettes (une seule cible, la croix de 44 px), puis la zone qui ajoute. */
.bac .grille { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.vign { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: var(--action-bg); }
.vign img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vign .nom { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px; font-size: 11px; font-weight: 700; color: #fff;
    background: linear-gradient(transparent, rgba(0, 0, 0, .55)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vign .x { position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; padding: 0; }
.vign .x span { width: 28px; height: 28px; border-radius: 999px; background: var(--panel); display: grid; place-items: center; box-shadow: var(--shadow-card); }
.vign .x .ic { width: 16px; height: 16px; }
.zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 150px;
    border: 1.5px dashed var(--line); border-radius: var(--r-lg); background: var(--panel); font-size: 16px; font-weight: 700; cursor: pointer; position: relative; }
.zone .ic { width: 28px; height: 28px; color: var(--muted); }
.zone small { font-size: 13px; font-weight: 500; color: var(--muted); }
/* « .field .ajout » : sans lui, « .field label » (plus precis que « .ajout ») le remettait en bloc, le + au-dessus du libelle. */
.ajout, .field .ajout { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 52px; margin-top: 12px;
    border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); font-size: 15px; font-weight: 700; cursor: pointer; position: relative; }
.ajout .ic { width: 18px; height: 18px; }
/* PHOTO OU FICHIERS (retour de JM du 30/09) : deux boutons cote a cote, l'appareil et les fichiers du telephone ; en grand dans
   un bac du sinistre. « .field .source » passe devant « .field label », qui les remettrait en bloc. */
.sources { display: flex; gap: 10px; margin-top: 4px; }
.source, .field .source { flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; margin: 0;
    border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); font-size: 15px; font-weight: 700; cursor: pointer; position: relative; }
.source .ic { width: 20px; height: 20px; }
.sources.gros .source { flex-direction: column; gap: 8px; min-height: 120px; border: 1.5px dashed var(--line); border-radius: var(--r-lg); font-size: 16px; }
.sources.gros .source .ic { width: 28px; height: 28px; color: var(--muted); }
.sources-n { display: block; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--muted); text-align: center; }
.sources-n[hidden] { display: none; }
/* Les vignettes de ce qui est joint, partout (JM, 03/10) : sous « 2 photos jointes » ; un appui en ouvre une en grand,
   par-dessus la page. */
.vignettes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.vignettes[hidden] { display: none; }
.vig { width: 64px; height: 64px; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #eeeef1; cursor: zoom-in; }
.vig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.zoom { position: fixed; inset: 0; z-index: 450; display: grid; place-items: center; padding: 16px; background: rgba(15, 15, 20, .92); cursor: zoom-out; }
.zoom img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.zoom-x { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; width: 40px; height: 40px; display: grid; place-items: center;
    padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; }
.zoom-x .ic { width: 20px; height: 20px; }
.si-form.envoi .source { opacity: .6; pointer-events: none; }
.pied-duo { display: flex; gap: 10px; }
.pied-duo .dock-act { flex: 1; }
.dock-act.dock-sec { background: var(--panel); color: var(--text); box-shadow: var(--shadow-card); }
.dock-act.dock-sec:hover { background: var(--panel); }
.retirer { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; margin-top: 10px; border: 0;
    background: none; font-size: 14px; font-weight: 700; color: var(--muted); }
.b-lien { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; margin-top: 14px; border: 0;
    border-radius: 999px; background: var(--panel); box-shadow: var(--shadow-card); font-size: 15px; font-weight: 700; color: var(--text); }
.b-principal { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 52px; margin-top: 16px; border: 0;
    border-radius: 999px; background: var(--text); color: #fff; font-size: 16px; font-weight: 700; }
.b-principal .ic { width: 19px; height: 19px; }
.attente { margin-top: 16px; flex-direction: column; }
.jauge-ia { height: 4px; border-radius: 999px; background: var(--line); margin-top: 12px; overflow: hidden; width: 100%; }
.jauge-ia i { display: block; height: 100%; width: 6%; background: var(--text); transition: width 15s linear; }
.jauge-ia.go i { width: 96%; }

/* Des consignes : une puce par ligne ; l'encadre dit le ton (attention, danger). */
.cons { border-radius: var(--r-lg); padding: 16px 20px; background: var(--panel); box-shadow: var(--shadow-card); }
.cons.warn { background: var(--warn-bg); }
.cons.danger { background: var(--bad-bg); }
.cons h2 { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 4px; }
.cons h2 .ic { color: var(--argus); }
.cons ul { margin: 0; padding: 0; list-style: none; }
.cons li { display: flex; gap: 12px; font-size: 15px; line-height: 1.45; padding: 7px 0; }
.cons li::before { content: ""; flex: 0 0 6px; height: 6px; border-radius: 999px; background: var(--muted-2); margin-top: 9px; }
.cons b { font-weight: 800; }

/* L'echeance en date reelle, et la liste de ce qui part, etape par etape. */
.limite { border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-card); padding: 16px 20px; }
.limite .ic { width: 22px; height: 22px; color: var(--muted); }
.limite b { display: block; margin-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2); }
.limite span { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.03em; margin-top: 5px; }
.limite small { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.45; }
.rec { display: flex; align-items: flex-start; gap: 14px; padding: 12px 20px; border-top: 1px solid var(--line-soft); color: inherit; }
.card > .rec:first-child { border-top: 0; }
.rec .st { flex: 0 0 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; background: var(--good-bg); color: var(--good); margin-top: 1px; }
.rec .st .ic { width: 14px; height: 14px; stroke-width: 2.4; }
.rec .st.ko { background: var(--action-bg); color: var(--muted-2); }
.rec .st.mq { background: var(--warn-bg); color: var(--warn); }
.rec .rb { flex: 1; min-width: 0; }
.rec .rt { display: block; font-size: 14px; font-weight: 600; }
.rec .rs { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.rec .chev { color: var(--muted-2); align-self: center; }
.rec .chev .ic { width: 18px; height: 18px; }

/* Ou en est un dossier : les etapes franchies pleines, celles a venir en creux. */
.chrono-c { padding: 14px 20px; }
.chrono { position: relative; padding-left: 24px; }
.chrono::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 16px; width: 2px; background: var(--line); }
.chrono > div { position: relative; padding: 8px 0; }
.chrono > div::before { content: ""; position: absolute; left: -25px; top: 13px; width: 12px; height: 12px; border-radius: 999px;
    background: var(--panel); box-shadow: 0 0 0 2px var(--line) inset; }
.chrono > div.on::before { background: var(--text); box-shadow: none; }
.chrono b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.chrono > div:not(.on) b { color: var(--muted-2); }
.chrono span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.texte { white-space: pre-line; }

/* Le diagnostic des degats : aucune somme, jamais. */
.diag .ia-tete { padding: 17px 18px 14px; display: flex; flex-direction: column; gap: 10px; }
.ia-titre { font-size: 18px; font-weight: 800; letter-spacing: -.025em; }
.ia-bad { display: flex; gap: 7px; flex-wrap: wrap; }
.bad { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 10px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; background: var(--action-bg); color: var(--action); font-style: normal; }
.bad.ok, .bad.g1, .bad.g2 { background: var(--good-bg); color: var(--good); }
.bad.g3 { background: var(--warn-bg); color: var(--warn); }
.bad.g4, .bad.g5 { background: var(--bad-bg); color: var(--bad); }
.ia-alerte { display: flex; gap: 10px; align-items: flex-start; margin: 0 18px 12px; padding: 12px 14px; border-radius: var(--r-md);
    background: var(--bad-bg); color: var(--bad); font-size: 14px; font-weight: 600; }
.ia-alerte .ic { width: 18px; height: 18px; flex: 0 0 18px; }
.ia-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-soft); border-top: 1px solid var(--line-soft); }
.ia-grille > div { background: var(--panel); padding: 13px 18px; }
.ia-grille > div:last-child:nth-child(odd) { grid-column: span 2; }
.ia-grille b { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.ia-grille span { display: block; font-size: 14px; font-weight: 700; margin-top: 4px; letter-spacing: -.015em; }
.ia-sec { padding: 15px 18px 5px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2);
    border-top: 1px solid var(--line-soft); }
.ia-li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 18px; font-size: 14px; line-height: 1.45; }
.ia-li b { flex: 0 0 auto; font-weight: 700; max-width: 45%; overflow-wrap: anywhere; }
.ia-li span { flex: 1; min-width: 0; color: var(--muted); }
.ia-li i { flex: 0 0 auto; }
.ia-note { padding: 14px 18px 16px; font-size: 13px; line-height: 1.45; color: var(--muted); border-top: 1px solid var(--line-soft); }
.ia-note b { color: var(--text); font-weight: 700; }

/* ---- Les trajets (remarques du 01/10) : la carte « Dernier trajet » et le trajet en grand, comme la maquette ---- */
.trip-card { display: flex; gap: 14px; align-items: stretch; width: 100%; padding: 14px; margin-top: 10px; border-radius: var(--r-lg);
    background: var(--panel); box-shadow: var(--shadow-card); color: inherit; }
.sec-t + .trip-card { margin-top: 0; }
.trip-card + .trip-card { margin-top: 12px; }
.trip-map { flex: 0 0 96px; width: 96px; height: 96px; border-radius: var(--r-md); display: block; }
.trip-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.trip-route { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trip-route .arrow, .tj-titre .arrow { color: var(--muted-2); font-weight: 500; margin: 0 2px; }
.trip-meta { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trip-pill { display: block; margin-top: 6px; }
/* Le trajet en grand : plein ecran, la carte bord a bord et la fleche retour ; dessous, quand, d'ou vers ou, puis les chiffres. */
.app.tj-plein .screen { padding: 0 0 calc(34px + var(--safe-b)); }
.app.tj-plein .screen > .sec, .app.tj-plein .screen > .msg, .app.tj-plein .offbar { margin-left: var(--gutter); margin-right: var(--gutter); }
.tj-carte { position: relative; height: 56vh; min-height: 320px; max-height: 520px; background: #eeeef1; overflow: hidden; }
.tj-svg, .tj-osm { display: block; width: 100%; height: 100%; }
.tj-osm { position: relative; z-index: 0; }
/* LA FLECHE RETOUR (JM, 04/10) : en haut a gauche comme sur tous les ecrans — le chevron du retour, sur un rond blanc pour se lire
   sur la carte ; sous le credit de la carte, cale dans le coin. */
.tj-retour { position: absolute; top: 20px; left: var(--gutter); z-index: 5; width: 40px; height: 40px; border-radius: 999px;
    background: rgba(255, 255, 255, .96); color: var(--text); display: grid; place-items: center; box-shadow: var(--shadow-card); }
.tj-retour .ic { width: 24px; height: 24px; }
.tj-tete { margin-top: 16px; }
.trip-when { display: block; font-size: 12px; font-weight: 600; color: var(--muted-2); margin-bottom: 3px; }
.tj-titre { font-size: clamp(18px, 5.4vw, 22px); font-weight: 800; letter-spacing: -.02em; line-height: 1.22; margin: 2px 0 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tj-pill { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tj-stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 0; }
.tj-stat { padding: 13px 4px; text-align: center; min-width: 0; }
.tj-stat + .tj-stat { border-left: 1px solid var(--line-soft); }
.tj-stat b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.tj-stat small { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.25; }

/* Le fond reel sous le trace (remarques du 03/10) : la sobriete de la maquette — le fond gris, les parcs vert pale, l'eau bleu
   pale, les rues blanches. Le Backend donne les chemins et les epaisseurs ; ici, les couleurs. */
.m-vert { fill: #e3f3e8; }
.m-eau { fill: #d4ddee; }
.m-riviere, .m-cote, .m-rue, .m-route, .m-axe, .m-autoroute { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.m-riviere { stroke: #d4ddee; }
.m-cote { stroke: #bccbe3; }
.m-rue, .m-route, .m-axe, .m-autoroute { stroke: #fff; }
/* La vraie carte en fond (JM, 03/10) : en transparence sur le gris de la maquette, immobile ; une fois posee, le dessin du Backend
   s'efface. */
.tj-fond { position: absolute; inset: 0; z-index: 1; background: #eeeef1; }
.tj-fond.leaflet-container { background: #eeeef1; font: inherit; }
.tj-carte .tj-svg { position: relative; }
.tj-carte.fond-on .tj-svg { visibility: hidden; }
.tj-fond .tj-bout { background: none; border: 0; }
.tj-fond .leaflet-control-attribution { font-size: 10px; background: rgba(238, 238, 241, .85); color: var(--muted); }
/* « Réserver un véhicule » (JM, 03/10) : sous la photo du vehicule, a hauteur de « Relevé le … », du style de « Pro » / « Perso ». */
.veh-haut { position: relative; }
.veh-btn { position: absolute; right: 16px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
    padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--muted);
    font-size: 14px; font-weight: 700; white-space: nowrap; }
.veh-btn .ic { width: 17px; height: 17px; }
.veh-btn-f { margin: 0; }
button.veh-btn { font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
/* La photo remonte pour laisser le bouton dessous ; sous une frise, le bouton prend sa ligne. */
.veh-haut:has(.veh-btn) .veh-main.car:not(:has(.tl)) .veh-car { top: 12px; transform: none; }
.veh-haut:has(.veh-btn) .veh-main.car:has(.tl) { padding-bottom: 62px; }
/* Pendant la lecture du compteur (JM, 03/10) : au milieu de la page, la photo prise balayee par une ligne, et ce qu'on attend. */
.lecture { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px;
    background: rgba(244, 244, 246, .78); backdrop-filter: blur(3px); opacity: 0; transition: opacity 200ms ease; }
.lecture.go { opacity: 1; }
.lecture-c { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 22px 22px 20px; border-radius: 22px;
    background: var(--panel); box-shadow: 0 18px 40px -12px rgba(15, 15, 20, .28); }
.lecture-photo { position: relative; display: block; width: 220px; height: 150px; border-radius: 14px; overflow: hidden; background: #eeeef1; }
.lecture-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lecture-photo i { position: absolute; left: 0; right: 0; top: 0; height: 34%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55) 70%, rgba(166, 25, 46, .9) 72%, rgba(255, 255, 255, 0) 76%);
    animation: balaye 1.6s ease-in-out infinite alternate; }
.lecture-photo.sans i { background: linear-gradient(to bottom, rgba(21, 21, 26, 0), rgba(21, 21, 26, .12) 70%, var(--text) 72%, rgba(21, 21, 26, 0) 76%); }
.lecture-t { font-size: 16px; font-weight: 700; }
@keyframes balaye { from { transform: translateY(-40%); } to { transform: translateY(230%); } }
@media (prefers-reduced-motion: reduce) { .lecture-photo i { animation-duration: 4s; } }

/* Precedent / Suivant (JM, 03/10) : deux petits boutons cales sur les bords du bas de la carte, du style de « Pro » / « Perso ». */
/* En bas de la carte, sur une ligne : « Précédent », la consigne des points rouges, « Suivant » (JM, 03/10 et 04/10). */
.tj-bas { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.tj-bas > * { pointer-events: auto; }
.tj-nav { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 4px; min-height: 34px; padding: 0 12px;
    border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--muted); font-size: 13px; font-weight: 700;
    box-shadow: var(--shadow-card); }
.tj-nav .ic { width: 15px; height: 15px; }
.tj-suivant { margin-left: auto; }
.tj-credit { position: absolute; right: 8px; bottom: 6px; z-index: 4; padding: 1px 6px; border-radius: 4px;
    background: rgba(238, 238, 241, .85); color: var(--muted); font-size: 10px; font-weight: 500; }
/* « Pro » / « Perso » (maquette) : deux boutons de poids egal, le retenu en sombre. Dans le socle du trajet en grand, a la place
   du bouton du bas ; sous chaque trajet de l'historique. */
.seg { display: flex; gap: 8px; }
.seg form { flex: 1; display: flex; margin: 0; }
.seg button { flex: 1; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
    border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--muted); font: inherit; font-size: 14px; font-weight: 700; }
.seg button .ic { width: 17px; height: 17px; }
.seg button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #fff; }
.socle { padding: 8px; border-radius: 999px; background: rgba(255, 255, 255, .96); border: 1px solid var(--line-soft);
    box-shadow: 0 12px 30px -10px rgba(15, 15, 20, .22), 0 2px 6px rgba(15, 15, 20, .05); }
.app.tj-plein .pied { bottom: calc(14px + var(--safe-b)); }
.app.tj-plein .pied::before { bottom: calc(-14px - var(--safe-b)); }
.app.tj-plein:has(.socle) .screen { padding-bottom: calc(92px + var(--safe-b)); }
.row-seg { padding: 2px 20px 14px; }
/* Un trajet a qualifier (maquette, « N trajets à qualifier ») : la carte en haut — le lien —, « Pro » / « Perso » dessous, sous un
   filet, dans le meme cadre. */
.trip-card.trip-q { flex-direction: column; gap: 0; padding: 0; }
.trip-q .trip-main { display: flex; gap: 14px; align-items: stretch; padding: 14px; color: inherit; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.trip-q .seg { padding: 12px 14px 14px; border-top: 1px solid var(--line-soft); }

/* L'ancien rendu d'un trajet (lot 5.2), garde de cote : la carte Leaflet, puis la vitesse contre la limitation de la route. */
.tj-map { height: 260px; margin-top: 0; z-index: 0; }
.tj-vit { padding: 14px 16px 12px; }
.tj-vit-g { display: flex; gap: 8px; height: 110px; }
.tj-vit-y { display: flex; flex-direction: column; justify-content: space-between; min-width: 44px; font-size: 10px; color: var(--muted-2); text-align: right; }
.tj-vit-g svg { flex: 1; min-width: 0; height: 100%; border-left: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.tj-v { fill: none; stroke: var(--good); stroke-width: 1.8; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* Au-dessus de la limitation, la vitesse en jaune ; dessous, en vert (JM, 04/10). */
.tj-v-dessus { stroke: #f2b200; }
.tj-lim { fill: none; stroke: var(--muted-2); stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.tj-vit-x { display: flex; justify-content: space-between; margin: 4px 0 0 52px; font-size: 11px; color: var(--muted); }
.tj-leg { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.tj-leg i { display: inline-block; width: 16px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 2px solid var(--good); }
.tj-leg i.deux { height: 2px; border-top: 0; background: linear-gradient(90deg, var(--good) 50%, #f2b200 50%); }
.tj-leg .pv { color: #d61f2c; font-weight: 700; }
.tj-leg i.pv { width: 3px; height: 12px; border-top: 0; background: #d61f2c; }
.tj-leg [hidden] { display: none !important; }
.tj-leg .pv-un b { margin-left: 8px; color: var(--text); font-weight: 700; }
.tj-leg i.lim { border-top: 2px dashed var(--muted-2); }

/* Le trajet d'un PV (JM, 04/10) : la barre rouge dans la courbe ; « Infraction » a droite de la pastille, et a sa droite le bouton du
   zoom sur l'infraction ; sur la carte, la fleche vers le point rouge et sa legende. */
.tj-pv { stroke: #d61f2c; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
/* La ligne de la pastille (JM, 04/10) : « Infractions : 13h25, 13h41 » — le mot en rouge, les heures en gras. */
.tj-inf { font-size: 12px; font-weight: 700; color: var(--text); }
.tj-inf b { color: #d61f2c; font-weight: 800; text-transform: uppercase; }
/* « Cliquer les points rouges pour zoomer » (JM, 04/10) : centree, a cheval sur le bas de la carte — « Précédent » et « Suivant »
   gardent leurs coins ; un cadre aux coins carres, pas un bouton. */
/* Marges reduites (JM, 04/10) : le cadre (24 px de haut) commence 11 px au-dessus du bord, sous les boutons poses a 12 px. */
.tj-astuce-bas { position: relative; z-index: 6; margin-top: -11px; text-align: center; pointer-events: none; }
.tj-astuce { display: inline-block; padding: 3px 8px; border: 1px solid var(--line); border-radius: 2px; background: #fff; color: var(--text);
    font-size: 12px; font-weight: 600; line-height: 1.3; box-shadow: var(--shadow-card); }
.app.tj-zoome .tj-astuce-bas { display: none; }
/* ZOOME SUR UNE INFRACTION (JM, 04/10) : la carte et, juste dessous, la courbe vitesse et limitation — rien d'autre ; « Tout le
   trajet », sur la carte, rend l'ecran entier. */
.app.tj-zoome .screen > :not([data-kind="trajet-plan"]):not([data-kind="trajet"]) { display: none !important; }
.app.tj-zoome .tj-nav { display: none !important; }
.tj-dezoom { display: none; position: absolute; right: 14px; bottom: 12px; z-index: 5; align-items: center; min-height: 34px; padding: 0 14px;
    border: 1px solid #15151a; border-radius: 999px; background: #15151a; color: #fff; font: inherit; font-size: 13px; font-weight: 700;
    box-shadow: var(--shadow-card); cursor: pointer; }
.app.tj-zoome .tj-dezoom { display: inline-flex; }
.trip-pill .pill + .pill, .row-s .pill + .pill, .etat .pill + .pill { margin-left: 6px; }
.tj-fond .tj-tag { background: none; border: 0; }
/* Cliquer la legende ou le point rouge ouvre le zoom (JM, 04/10) : seule l'etiquette se clique, pas le vide autour de la fleche. */
.tj-fond .leaflet-marker-icon.tj-tag { pointer-events: none; }
.tj-fond .tj-tag-t { pointer-events: auto; cursor: pointer; }
.tj-tag svg { display: block; overflow: visible; }
.tj-tag-t { position: absolute; white-space: nowrap; padding: 4px 8px; border: 1.5px solid #d61f2c; border-radius: 8px; background: #fff; color: #d61f2c;
    font-size: 12px; font-weight: 800; line-height: 16px; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }