* { box-sizing: border-box; }

body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 16px/1.5 var(--font-sans);
}




.layout {
    flex: 1 0 auto;
    width: 100%;
    align-content: start;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1.25rem;
    max-width: 1200px;
    margin: 1.25rem auto;
    padding: 0 1.25rem;
    align-items: start;
}

.stack { display: grid; gap: 1.25rem; }

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 1rem 1.25rem;
}

.card h2 {
    margin: 0 0 .6rem;
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ocre-fonce);
}

video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #000;
    border-radius: 0;
}

/* Scan page: fills the viewport under the header. The camera card is 2/3 of the width and the
   video is the largest 16:9 box that fits it, whatever the screen ratio (container query units). */
body:has(.layout-scan) { height: 100dvh; }
.layout-scan {
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: none;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
}
.layout-scan .stack { min-height: 0; overflow: hidden; align-content: start; gap: .6rem; }
.layout-scan .card { padding: .6rem 1rem; min-height: 0; overflow: hidden; }
.layout-scan .card h2 { margin-bottom: .3rem; }
.layout-scan .step p { margin-bottom: .2rem; }
.layout-scan .step .instruction { font-size: 1.15rem; }
.layout-scan .guide, .layout-scan #cartridge { width: auto; height: clamp(3rem, 11dvh, 6.5rem); margin: .1rem auto .3rem; }
.layout-scan .step .history { columns: 3; column-gap: 1rem; font-size: .8rem; margin-top: .3rem; }
.layout-scan pre { max-height: 5.5rem; overflow: hidden; margin: 0; }
.camera { container-type: size; display: grid; place-items: center; min-height: 0; }
.camera .viewfinder { --aspect: 16 / 9; width: min(100cqw, 100cqh * var(--aspect)); aspect-ratio: var(--aspect); background: #000; } /* --aspect is set by main.js from the camera and the saved crop */
.camera video { height: 100%; aspect-ratio: auto; }
/* ?suivi=1: a screen that only follows the station, no camera and nothing to press */
.layout-follow { grid-template-columns: 1fr; }
body:has([data-follow]) :is(.fab, #success-ok, #success-retry, #new-carton, #recap-back) { display: none; }
@media (max-width: 800px) {
    /* téléphone : tout tient dans l'écran, sans défilement. Vidéo plus basse, détails (texte lu, lectures) masqués, boutons flottants sans recouvrir les cartes */
    .layout-scan { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
    .layout-scan .stack { overflow-y: auto; padding-bottom: 3.5rem; grid-auto-rows: max-content; }
    .layout-scan .card { min-height: auto; overflow: visible; } /* une carte garde sa hauteur (la liste des cartouches n'est plus rognée) */
    .camera { container-type: inline-size; }
    .camera .viewfinder { width: min(100cqw, 26dvh * 16 / 9); }
    .layout-scan .stack > .card:has(#lines), .layout-scan details.card { display: none; }
    .layout-scan .guide, .layout-scan #cartridge { height: clamp(2.5rem, 8dvh, 4rem); }
    .layout-follow { grid-template-rows: minmax(0, 1fr); }
}

/* Camcorder-style frame: corner brackets, focus brackets and a small cross. Visual guide only:
   the whole frame is still sent to the OCR. The viewBox is 16:9 like the video, so it scales with it. */
.viewfinder { position: relative; overflow: hidden; border-radius: 0; }
.reticle { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .6)); }
.reticle path { fill: none; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }

.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips:empty::before, pre:empty::before { content: "En attente d'une lecture…"; color: var(--muted); font-size: .95rem; }

.chip {
    display: flex;
    flex-direction: column;
    padding: .45rem .8rem;
    border-radius: 0;
    border: 1px solid transparent;
}
.chip code { font: 600 1.25rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .03em; }
.chip small { font-size: .78rem; }
.chip[data-state="confirmed"] { background: var(--ok-bg); color: var(--ok); }
.chip[data-state="pending"] { background: var(--wait-bg); color: var(--wait); }
.chip[data-locked] { box-shadow: 0 0 0 2px var(--ok); }

pre {
    margin: 0;
    white-space: pre-wrap;
    font: 1rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

details summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
details h3 { margin: .8rem 0 .2rem; font-size: .8rem; color: var(--muted); font-weight: 600; }
details ul { margin: 0; padding-left: 1.2rem; }



.legal p { margin: 0; }


.login { max-width: 22rem; margin: 3rem auto; display: grid; gap: .8rem; }
.login h2 { margin: 0; }
.login label { display: grid; gap: .25rem; font-size: .9rem; color: var(--muted); }
.login input { padding: .5rem .6rem; border: 1px solid var(--border); border-radius: 0; background: var(--bg); color: var(--text); font: inherit; }
.login p { margin: 0; }
.login input:user-invalid { border-color: var(--bad); background: var(--bad-bg); }
.login label { position: relative; }
.login label:has(input[type="email"]:user-invalid)::after { content: "Adresse invalide (avec un @)"; position: absolute; top: 0; right: 0; color: var(--bad); font-size: .85rem; } /* sur la ligne du libellé : ne change pas la hauteur de la carte */
.login small { color: var(--muted); }
.login .error { color: var(--bad); background: var(--bad-bg); padding: .4rem .6rem; border-radius: 0; }
.login .actions { display: grid; gap: .5rem; margin-top: .5rem; } /* même écart visuel que sous le titre « Connexion » */
.layout .login .actions button { padding: .6rem .8rem; border: 0; border-radius: 0; background: var(--accent); color: var(--accent-text); font: inherit; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; }
.layout .login .actions button:hover { background: var(--brun); }

.step p { margin: 0 0 .5rem; }
.step .instruction { font-size: 1.4rem; font-weight: 600; }
.step button { margin-top: .6rem; padding: .4rem .8rem; border: 1px solid var(--border); border-radius: 0; background: var(--card); color: var(--text); font: inherit; cursor: pointer; }

.fab.fab-left { right: auto; left: 1.25rem; text-decoration: none; background: var(--orange-fonce); color: #fff; }
.guide { display: block; width: min(100%, 14rem); height: auto; margin: .2rem auto .6rem; }
.guide[hidden] { display: none; }
.guide .box { fill: var(--bg); stroke: var(--muted); stroke-width: 2; }
.guide .tape { fill: var(--border); opacity: .7; }
.guide .label { fill: #fff; stroke: var(--muted); stroke-width: 1.5; }
.guide .bars { fill: #1f2328; }

.fab { position: fixed; right: 1.25rem; bottom: 3rem; /* above the footer */ padding: .7rem 1.1rem; border: 0; border-radius: 0; background: var(--accent); color: var(--accent-text); font: inherit; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; }
dialog { border: 1px solid var(--border); border-radius: 0; background: var(--card); color: var(--text); padding: 1.25rem; min-width: min(90vw, 22rem); }
dialog::backdrop { background: rgba(0, 0, 0, .5); }
dialog p { margin: 0; color: var(--muted); }
.guide .side { fill: var(--border); stroke: var(--muted); stroke-width: 2; }
.guide .ink { fill: #2b7de9; }
.guide .gold { fill: #c9a227; }

.history { margin: .6rem 0 0; padding-left: 1.6rem; font-family: ui-monospace, monospace; font-size: .9rem; }
.history:empty { display: none; }

.step[data-state=done] { border-color: var(--ok); background: var(--ok-bg); }
.step[data-state=done] h2 { color: var(--ok); }
.step[data-state=done] h2::after { content: " ✓"; }
#step-carton[data-state=done] .guide { display: none; } /* carton scanné : l'étape se replie sur son titre et sa phrase */
#cartridge { width: min(100%, 11rem); }

.recap h2 { margin: 0 0 .4rem; color: var(--ok); }
.recap h2::before { content: "✓ "; }
.recap p { margin: 0 0 .8rem; }
.recap-art { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.recap-art .guide { width: 9rem; margin: 0; }
.recap-art strong { font-size: 1.4rem; color: var(--ok); }
.recap .history { columns: 2; column-gap: 2.5rem; list-style-position: inside; padding: 0; text-align: left; margin: 1rem auto; width: max-content; max-width: 100%; }

[data-step][hidden] { display: none !important; } /* calibration steps: a rule that sets display must not show a hidden step */
.calib-step h2 { margin-bottom: .2rem; }
.calib-step p { margin: .2rem 0; }
.status-wrap { position: relative; }
#status { display: inline-flex; align-items: center; gap: .6rem; font: inherit; font-size: .85rem; cursor: pointer; }
.checks { display: inline-flex; gap: .4rem; }
.check { width: 1.2rem; height: 1.2rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.check .dot { fill: var(--muted); stroke: var(--bg); stroke-width: 1.5; } /* grey: no image yet, or a reading without a threshold */
.check[data-ok=true] .dot { fill: var(--ok); }
.check[data-ok=false] .dot { fill: var(--bad); }
#status[data-state=sent] { color: var(--ok); background: var(--ok-bg); border-color: transparent; } /* every condition holds: the frame is on its way */
#status-detail { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 20; margin: 0; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: 0; background: var(--card); color: var(--text); font-size: .8rem; line-height: 1.6; white-space: pre; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
/* Calibration page: the crop box is drawn over the video, everything outside it is dimmed. */
.calib-frame { position: relative; overflow: hidden; border-radius: 0; background: #000; cursor: crosshair; touch-action: none; user-select: none; }
.calib-frame video { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; pointer-events: none; }
.crop { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55); pointer-events: none; }
.crop[hidden] { display: none; }
.hint { color: var(--muted); font-size: .9rem; margin: .5rem 0; }
.sent { display: block; max-width: 100%; margin-top: .5rem; border-radius: 0; }
.sent:not([src]) { display: none; }
.layout .card .actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.layout .card .actions button, #test { padding: .45rem .9rem; border: 1px solid var(--border); border-radius: 0; background: var(--card); color: var(--text); font: inherit; cursor: pointer; }
#test:disabled { opacity: .5; cursor: default; }
.calib-opts { display: flex; justify-content: space-between; align-items: center; gap: .2rem 1rem; flex-basis: 100%; }
.crop-info { position: absolute; left: .5rem; bottom: .5rem; max-width: calc(100% - 1rem); margin: 0; padding: .15rem .5rem; border-radius: 0; background: rgba(0, 0, 0, .6); color: #fff; font-size: .8rem; pointer-events: none; }
.crop-info:empty { display: none; }
.pill-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .1rem .7rem; /* as tall as the hint text beside it */ border: 1px solid var(--border); border-radius: 0; background: var(--bg); color: var(--text); font: inherit; font-size: .85rem; cursor: pointer; }
.pill-btn svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pill-btn:hover { border-color: var(--accent); }
.pill-btn[aria-pressed=true] { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); } /* the whole frame is read */
.calib-nav { position: fixed; right: 1.25rem; bottom: 3rem; /* above the footer, where the manual entry button sits */ display: flex; gap: .5rem; }
.calib-nav .fab { position: static; }
.calib-nav .fab.secondary { border: 1px solid var(--border); background: var(--card); color: var(--text); }
.calib-nav .fab:disabled { opacity: .5; cursor: default; }
.calib-card { grid-column: 1 / -1; } /* full width: the camera and the zoom sit side by side above the results */
.layout-calib { grid-template-columns: 1fr; gap: .75rem; margin-top: .75rem; margin-bottom: .75rem; }
.layout-calib .card { padding: .6rem 1rem; }
.layout-calib .card h2 { margin-bottom: .3rem; }
.calib-top, .calib-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .2rem 1rem; }
.calib-top .hint, .calib-bar .hint, .layout-calib .diag { margin: .2rem 0; }
.calib-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; align-items: stretch; }
.calib-results .card { min-width: 0; }
.calib-results pre { max-height: 5.5rem; overflow: auto; }
.calib-results h3 { margin: .3rem 0 .1rem; font-size: .8rem; color: var(--muted); font-weight: 600; }
.calib-results ul { margin: 0; max-height: 3rem; overflow: auto; }
.calib-results .sent { max-height: 4rem; }
@media (max-width: 800px) { .calib-results { grid-template-columns: 1fr; } }
/* both boxes have the camera's shape and fit the screen height, so the page needs no scrolling */
.calib-views { --ratio: 16 / 9; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; justify-items: center; }
.calib-frame, .zoom-box { width: min(100%, calc(38dvh * var(--ratio))); aspect-ratio: var(--ratio); }
@media (max-width: 800px) { .calib-views { grid-template-columns: 1fr; } }
/* the right box has the camera box's size (same ratio, set in calibration.js) and holds the final view, fitted inside it by its own aspect, so nothing moves when a zone is drawn */
.zoom-box { container-type: size; display: grid; place-items: center; }
.zoom-box .viewfinder { --aspect: 16 / 9; width: min(100cqw, 100cqh * var(--aspect)); aspect-ratio: var(--aspect); background: #000; }
.zoom-box video { height: 100%; aspect-ratio: auto; }
.hint select { font: inherit; padding: .15rem .3rem; border: 1px solid var(--border); border-radius: 0; background: var(--card); color: var(--text); }

.diag { margin: .3rem 0; padding: .4rem .7rem; border-radius: 0; background: var(--wait-bg); color: var(--wait); font-size: .9rem; }
.diag[data-state=ok] { background: var(--ok-bg); color: var(--ok); }
.diag[data-state=bad] { background: var(--bad-bg); color: var(--bad); }

.success { width: 92vw; height: 90dvh; max-width: none; border: 6px solid var(--ocre-fonce); background: var(--sable); color: var(--text); text-align: center; }
.success[open] { display: grid; grid-template: 1fr auto / 1fr 1fr; align-items: center; gap: 2rem; }
.success div { grid-area: 1 / 1 / 2 / 3; }
.success em { display: block; margin-top: 1.5rem; font-style: normal; font-size: clamp(1.2rem, 3vw, 2.2rem); }
.success em + em { margin-top: .5rem; }
.success em[hidden] { display: none; }
.success em[data-known="false"] { color: var(--text); }
/* a cartridge: the model is what the operator reads from afar, the reference comes second */
#success-model { font-size: clamp(2.5rem, 8vw, 7rem); font-weight: 800; line-height: 1.1; word-break: break-all; }
/* both lines shown (station 2): same size */
.success:has(#success-model:not([hidden]) + #success-reparateur:not([hidden])) :is(#success-model, #success-reparateur) { font-size: clamp(2rem, 4vw, 4rem); font-weight: 800; line-height: 1.1; overflow-wrap: anywhere; }
/* station 1, model sorted elsewhere: the model line is hidden and the repairer takes its place (longer text, so a little smaller, and it may wrap) */
#success-model[hidden] + #success-reparateur { font-size: clamp(2rem, 6vw, 5rem); font-weight: 800; line-height: 1.1; overflow-wrap: anywhere; }
.success:has(#success-model:not([hidden]), #success-model[hidden] + #success-reparateur:not([hidden])) strong { font-size: clamp(1.5rem, 4vw, 3.5rem); }
.success #success-error { color: #c62828; font-weight: 600; }
.success button { grid-row: 2; }
.success p { margin: 0 0 1.5rem; color: var(--text); font-size: clamp(1.5rem, 4vw, 3rem); font-weight: 600; }
.success strong { font-size: clamp(2rem, 7vw, 6rem); word-break: break-all; color: var(--text); }
.success button { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; justify-items: start; column-gap: 2rem; row-gap: .3rem; padding: 2rem 1rem; border: 0; border-radius: 0; color: #fff; font: inherit; font-size: 1.8rem; font-weight: 600; text-align: left; cursor: pointer; }
.success button svg { grid-area: 1 / 1 / span 2; width: 5rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#success-ok { background: var(--ok); }
#success-ok { grid-column: 1; border-radius: 4rem 0 0 4rem; }
#success-retry { background: #c62828; }
#success-retry { grid-column: 2; border-radius: 0 4rem 4rem 0; }
.success button small { font-size: 1rem; font-weight: 400; }

.recap { width: 92vw; height: 90dvh; max-width: none; overflow-y: auto; border: 6px solid var(--ok); background: #000; color: #fff; text-align: center; }
.recap[open] { display: grid; grid-template: 1fr auto / 1fr 1fr; gap: 2rem; }
.recap > div { grid-area: 1 / 1 / 2 / 3; }
.recap button { display: grid; justify-items: center; gap: 1rem; padding: 2rem 3rem; border: 0; border-radius: 0; background: var(--ok); color: #fff; font: inherit; font-size: 1.4rem; font-weight: 600; cursor: pointer; }
.recap #recap-back { background: #c62828; }
.recap button svg { width: 5rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.recap button small { font-size: 1rem; font-weight: 400; }
.recap p { color: #fff; }

dialog form { display: grid; gap: .8rem; }
dialog label { display: grid; gap: .25rem; font-size: .9rem; color: var(--muted); }
dialog input { padding: .5rem .6rem; border: 1px solid var(--border); border-radius: 0; background: var(--bg); color: var(--text); font: inherit; }
dialog .actions { display: flex; gap: .5rem; justify-content: flex-end; }
dialog .actions button { padding: .45rem .9rem; border: 1px solid var(--border); border-radius: 0; background: var(--card); color: var(--text); font: inherit; cursor: pointer; }

/* station selection (/scan): two halves, each with a background that follows the pointer */
.stations { --cut: 50; --lean: 9; /* % of the width: where the diagonal crosses the middle, and how far it leans */ position: relative; flex: 1 0 auto; min-height: 30rem; overflow: hidden; }
.stations:has(.station:first-of-type:hover) { --cut: 57; }
.stations:has(.station:last-of-type:hover) { --cut: 43; }
.stations::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--ocre-fonce);
    --top: calc((var(--cut) + var(--lean)) * 1%); --bottom: calc((var(--cut) - var(--lean)) * 1%);
    clip-path: polygon(calc(var(--top) - 2px) 0, calc(var(--top) + 2px) 0, calc(var(--bottom) + 2px) 100%, calc(var(--bottom) - 2px) 100%); transition: clip-path .5s ease-out; }
.station { position: absolute; inset: 0; display: grid; align-items: end; overflow: hidden; color: #fff; text-decoration: none; isolation: isolate; --px: 0; }
.station:first-of-type { clip-path: polygon(0 0, calc((var(--cut) + var(--lean)) * 1%) 0, calc((var(--cut) - var(--lean)) * 1%) 100%, 0 100%); justify-items: start; }
.station:last-of-type .station-bg { inset: -6% -6% -6% 34%; }
.station:last-of-type { clip-path: polygon(calc((var(--cut) + var(--lean)) * 1%) 0, 100% 0, 100% 100%, calc((var(--cut) - var(--lean)) * 1%) 100%); justify-items: end; }
.station { transition: clip-path .5s ease-out; }
.station-text { width: calc((var(--cut) - var(--lean)) * 1%); }
.station:last-of-type .station-text { width: calc((100 - var(--cut) - var(--lean)) * 1%); }
.station-bg { position: absolute; inset: -6% 34% -6% -6%; /* the half it fills, not the whole page */ z-index: -2; background: center 25% / cover no-repeat; transform: translateX(calc(var(--px) * -2.5%)) scale(1.04); transition: transform .5s ease-out; will-change: transform; /* sa propre couche : l'image n'est pas redessinée pendant que la diagonale (clip-path) glisse */ }
.station-bg-1 { background-image: url("../images/station-1-cJCf71z.svg"); }
.station-bg-2 { background-image: url("../images/station-2-PyaV2Ts.svg"); }
.station::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(77, 60, 54, .92), transparent 62%); transition: opacity .5s; }
.station:hover .station-bg, .station:focus-visible .station-bg { transform: translateX(calc(var(--px) * -4%)) scale(1.14); }
.station:hover::after { opacity: .3; }
.station-text { text-align: center; padding: 1rem 1rem 3rem; transform: translateX(calc(var(--px) * 1.5%)); transition: transform .4s ease-out; text-shadow: 0 2px 18px rgba(0, 0, 0, .7); }
.station-text small { display: block; font-size: 1.1rem; letter-spacing: .15em; text-transform: uppercase; opacity: .85; }
.station-text strong { display: block; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: clamp(2.5rem, 7vw, 5.5rem); line-height: 1.1; }
.station-text span { display: block; margin-top: .6rem; font-size: 1.15rem; opacity: .9; }
@media (max-width: 700px) {
    .stations { display: grid; grid-template-rows: 1fr 1fr; }
    .stations::before { display: none; }
    .station, .station:first-of-type, .station:last-of-type { position: relative; clip-path: none; justify-items: stretch; }
    .station .station-text, .station:last-of-type .station-text { width: auto; }
    .station .station-bg, .station:last-of-type .station-bg { inset: -6%; }
    .station + .station { border-top: 3px solid var(--ocre-fonce); }
}
@media (prefers-reduced-motion: reduce) { .station-bg, .station-text { transition: none; } }

/* Titres de la charte : capitales grasses espacées, éclat devant le titre principal */
.onglet { display: inline-block; padding: .5rem .9rem; background: var(--ocre-fonce); color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; line-height: 1; }
.steps .titre { margin-left: calc(25% - 11rem); padding-left: .16rem; } /* même bord gauche que le bloc du haut */
.titre { margin: 0 0 1rem; font-size: 1.25rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ocre-fonce); }

/* Accueil */
.home { flex: 1 0 auto; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem 2rem; display: grid; gap: 2.5rem; align-content: start; }
/* le texte part de l'axe de la station 1 et le logo est centré sur celui de la station 2 (la frise a deux colonnes égales) */
.hero { position: relative; margin: 4.5rem 0 2.5rem; } /* de l'air au-dessus (sous l'en-tête) et sous le bloc, avant la frise des stations */
.hero-text { margin-left: calc(25% - 11rem); padding-left: .16rem; max-width: 28rem; } /* bord gauche = celui du texte sous « Station 1 » (centré à 25 %, large de 22 rem) */
.hero-logo { position: absolute; left: 75%; top: 50%; width: clamp(10rem, 22vw, 16rem); height: auto; transform: translate(-50%, -50%); }
.hero-text { display: grid; align-content: center; justify-items: start; gap: .9rem; }
.hero h1 img { display: block; height: clamp(4rem, 9vw, 6rem); width: auto; } /* le logo à la place du titre en texte */
.hero h1 { margin: 0; font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1.05; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.hero .lead { margin: 0; max-width: 32rem; font-size: 1.3rem; line-height: 1.35; font-weight: 300; color: var(--ocre-fonce); }
.hero .lead strong { font-weight: 800; }
.cta { display: inline-block; margin-top: .6rem; padding: .85rem 1.4rem; background: var(--accent); color: var(--accent-text); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; text-decoration: none; }
.cta:hover { background: var(--brun); }

.steps .frise { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; position: relative; }
.steps .frise li { display: grid; justify-items: center; gap: .4rem; padding: 0 1rem; text-align: center; position: relative; }
.steps .frise li + li::before { content: ""; position: absolute; left: -50%; right: 50%; top: 1.4rem; border-top: 1.5px solid var(--ocre); }
.steps .num { position: relative; z-index: 1; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--ocre-fonce); color: #fff; font: 700 1.5rem/1 var(--font-display); }
.steps strong { font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.steps li span:last-child { max-width: 22rem; color: var(--muted); }

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 1.5rem 5rem; } /* deux par ligne, retour à la ligne ensuite */
@media (max-width: 1024px) { .tiles { grid-template-columns: 1fr; } } /* téléphone, tablette et petites fenêtres : une tuile par ligne */
.tile { display: flex; align-items: center; gap: 1.25rem; padding: 1.1rem 1.25rem; background: var(--card); border-top: 4px solid var(--ocre); color: inherit; text-decoration: none; }
.tile h2 { margin: 0 0 .4rem; font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ocre-fonce); }
.tile p { margin: 0; }
.tile-text { flex: 1; min-width: 0; padding-right: .7rem; } /* l'icône a ~.7rem de blanc dans sa boîte : même marge de l'autre côté du texte */
.tile-icon { flex: none; width: 5.5rem; height: 5.5rem; fill: none; stroke: var(--ocre-fonce); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tile-icon .accent { stroke: var(--ocre); }
@media (min-width: 1025px) {
    .tile:nth-child(even) { text-align: right; flex-direction: row-reverse; }
    .tile:nth-child(even) .tile-text { padding: 0 0 0 .7rem; } /* colonne de droite : texte et icône à droite */
    .tile:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 5rem) / 2); text-align: center; } /* seule sur sa ligne : centrée sur la grille, à la largeur d'une colonne (5rem = l'écart entre colonnes) */
}
a.tile:hover { background: var(--sable); }
.tile[aria-disabled] { opacity: .55; border-top-color: var(--ocre-clair); }
.tile small { color: var(--muted); }
@media (max-width: 1024px) { .steps .titre { margin-left: 0; padding-left: 0; } .hero-text { margin-left: 0; padding-left: 0; max-width: none; } .hero-logo { display: none; } .steps .frise { grid-template-columns: 1fr; } .steps .frise li + li::before { display: none; } }
@media (max-width: 1024px) { .hero-text { justify-items: center; text-align: center; } .steps .titre { text-align: center; } .hero { margin-top: 2.5rem; margin-bottom: .5rem; } .steps .frise { gap: 1.5rem; } } /* téléphone et tablette : le bloc d'accueil et le titre des stations sont centrés, moins d'espace en haut (2,5 rem au lieu de 4,5) et sous le bouton (3 rem au lieu de 5), un écart entre la station 1 et la station 2 */

/* Voile sombre tant que la webcam n'est pas autorisée (camera.js) */
.cam-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1.25rem; background: rgba(40, 28, 22, .75); }
.cam-overlay[hidden] { display: none; }
.cam-overlay > div { max-width: 28rem; padding: 1.5rem; background: var(--card); border-top: 4px solid var(--ocre); text-align: center; }
.cam-overlay h2 { margin: 0 0 .6rem; font-size: 1.15rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ocre-fonce); }
.cam-overlay p { margin: 0; }
.cam-overlay button { margin-top: 1rem; padding: .6rem 1.2rem; border: 0; background: var(--accent); color: var(--accent-text); font: inherit; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; }
.cam-overlay button:hover { background: var(--brun); }

@media (max-width: 700px) {
    /* fenêtre de confirmation : deux colonnes qui rétrécissent, boutons compacts, sans les rappels de touches */
    .success { padding: .5rem; }
    .success[open] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
    .success div { min-width: 0; }
    .success button { display: flex; justify-content: center; align-items: center; padding: 1rem .5rem; gap: .6rem; font-size: 1.1rem; }
    .success button svg { width: 2.2rem; }
    .success button small { display: none; }
    #success-ok { border-radius: 2rem 0 0 2rem; }
    #success-retry { border-radius: 0 2rem 2rem 0; }
}

/* carton déjà clôturé (bloqué) : titre en rouge, pas de « Confirmer », « Réessayer » prend toute la largeur */
.success[data-refused="true"] p { color: #c62828; font-weight: 800; }
.success[data-refused="true"] #success-ok { display: none; }
.success[data-refused="true"] #success-retry { grid-column: 1 / 3; border-radius: 2rem; }