/* Charte site vitrine — éditorial clair, bleu cobalt. Consomme public/css/tokens.css (chargé avant).
   Chantier 3 (lot D) : texte, espacements, rayons, ombres et blancs viennent des tokens. Les valeurs
   restées en clair sont des dimensions (icônes, pastilles, cibles 44/56 px), des géométries de zone de
   toucher, ou une mise en forme figée signalée en commentaire. 10 px (gap des listes et formulaires)
   est le demi-barreau conservé tel quel : hors de la liste des orphelins du chantier. */
:root { --display: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, sans-serif;
        --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        --ease: cubic-bezier(.22,.61,.36,1); --safe-b: env(safe-area-inset-bottom, 0px); }
* { box-sizing: border-box; }
html { background: var(--site-bg); scroll-behavior: smooth; }
body { margin: 0; background: var(--site-bg); color: var(--site-ink); font: 500 var(--fs-md)/1.55 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* Réserve sous le pied de page pour la barre collante (84 px = sa hauteur), uniquement sur les pages qui en ont une (documents.html n'en a pas). */
#site, #chauffeur, #livrer, #equipe, #investir { padding-bottom: calc(84px + var(--safe-b)); }
body.no-scroll { overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 max(var(--s-4), env(safe-area-inset-right, 0px)) 0 max(var(--s-4), env(safe-area-inset-left, 0px)); }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; margin: 0 0 var(--s-4); text-wrap: balance; }
h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-xl); }
p { margin: 0 0 var(--s-3); } .lead { font-size: var(--fs-lg); color: var(--site-ink-2); }
.kicker { display: inline-block; font: 700 var(--fs-xs)/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: var(--s-3); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 var(--s-6); border-radius: var(--site-r-sm); border: 0; font: 700 var(--fs-md)/1 var(--font); text-decoration: none; cursor: pointer; transition: transform .16s var(--ease), background .16s var(--ease), box-shadow .2s var(--ease); }
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--blue); color: var(--accent-ink); box-shadow: var(--site-sh-blue); } .btn--primary:hover { background: var(--blue-deep); }
.btn--blue { background: var(--blue); color: var(--accent-ink); } .btn--blue:hover { background: var(--blue-deep); }
.btn--ghost { background: var(--site-surface); color: var(--site-ink); border: 1px solid var(--site-line); } .btn--ghost:hover { background: var(--site-surface-2); }
.btn--block { width: 100%; }
.btn svg { width: 18px; height: 18px; }
.link { position: relative; display: inline-block; color: var(--site-ink); text-decoration: none; border-bottom: 1px solid var(--blue); padding-bottom: 2px; font-weight: 600; }
.link::after { content: ""; position: absolute; inset: -12px -6px; } /* zone de toucher élargie */
.site-nav { position: sticky; top: 0; z-index: 30; background: var(--site-glass); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid var(--site-line); }
.site-nav .wrap { display: flex; align-items: center; gap: var(--s-3); min-height: 60px; }
.site-nav__brand { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; font: 800 var(--fs-lg)/1 var(--display); letter-spacing: -.04em; white-space: nowrap; flex: none; color: var(--site-ink); text-decoration: none; }
.site-nav__brand img { width: 28px; height: 28px; border-radius: var(--site-r-sm); }
.site-nav__actions .btn { min-height: 40px; padding: 0 var(--s-3); font-size: var(--fs-sm); white-space: nowrap; }
.logo-inline { width: .9em; height: .9em; vertical-align: -.08em; margin-right: .12em; border-radius: .2em; }
.site-nav__links { display: none; gap: var(--s-5); margin-left: var(--s-2); } .site-nav__links a { color: var(--site-ink); text-decoration: none; font-weight: 600; }
.site-nav__actions { margin-left: auto; display: flex; gap: var(--s-1); align-items: center; }
/* Très petits écrans (320 px) : tout tient sur une ligne, le burger garde 44 px de cible en mordant sur la marge. */
@media (max-width: 359px) { .site-nav .wrap { gap: var(--s-2); } .site-nav__brand { font-size: var(--fs-md); gap: var(--s-1); } .site-nav__brand img { width: 24px; height: 24px; } .site-nav__actions .btn { font-size: var(--fs-sm); padding: 0 var(--s-2); } .site-nav__burger { margin-right: -10px; } }
.site-nav__burger { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 0; background: transparent; cursor: pointer; border-radius: var(--site-r-sm); color: var(--site-ink); }
.site-nav__burger svg { width: 24px; height: 24px; }
.drawer { position: fixed; inset: 0; z-index: 40; display: none; }
.drawer[open], .drawer.is-closing { display: block; }
.drawer.is-closing { pointer-events: none; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 1; transition: opacity .2s var(--ease); transition-behavior: allow-discrete; }
.drawer__panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(88vw, 360px); background: var(--site-bg); padding: calc(var(--s-5) + env(safe-area-inset-top, 0px)) var(--s-5) var(--s-5); display: flex; flex-direction: column; gap: 10px; overflow-y: auto; box-shadow: var(--site-sh-3); transform: translateX(0); transition: transform .28s var(--ease); transition-behavior: allow-discrete; }
/* Ouverture : état de départ hors écran (navigateurs sans @starting-style : apparition immédiate, comme avant). */
@starting-style { .drawer[open] .drawer__scrim { opacity: 0; } .drawer[open] .drawer__panel { transform: translateX(-100%); } }
/* Fermeture miroir : même chemin, même courbe. */
.drawer.is-closing .drawer__scrim { opacity: 0; } .drawer.is-closing .drawer__panel { transform: translateX(-100%); }
.drawer__links { display: grid; gap: var(--s-1); margin-top: var(--s-4); } .drawer__links a { padding: var(--s-3) var(--s-1); color: var(--site-ink); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--site-line); }
.drawer__app { margin-top: auto; display: grid; gap: 10px; } .drawer__app .row { display: flex; gap: 10px; }
.hero { padding: var(--s-10) 0 var(--s-12); }
.hero-form { display: grid; gap: 10px; margin-top: var(--s-5); max-width: 520px; }
.hero-form__row { position: relative; display: flex; align-items: center; gap: var(--s-3); background: var(--site-surface); border-radius: var(--site-r-sm); padding: 0 var(--s-4); min-height: 56px; }
.hero-form__row input { flex: 1; border: 0; background: transparent; font: 500 var(--fs-md)/1 var(--font); color: var(--site-ink); outline: 0; min-width: 0; }
.hero-form__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--blue); flex: none; }
.hero-form__dot--sq { border-radius: 2px; }
.hero-form__link { width: 2px; height: 14px; background: var(--blue); margin: -10px 0 -10px 20px; position: relative; z-index: 1; } /* connecteur entre les deux pastilles : géométrie, pas un espacement */
.hero-form__when { display: flex; gap: var(--s-2); } .hero-form__when label { flex: 1; position: relative; }
.hero-form__when input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hero-form__when span { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: var(--r-pill); background: var(--site-surface); font-weight: 600; cursor: pointer; }
.hero-form__when input:checked + span { background: var(--blue); color: var(--accent-ink); }
.hero-form__when input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.hero-form input[type="datetime-local"] { min-height: 56px; border: 1px solid var(--site-line); border-radius: var(--site-r-sm); padding: 0 var(--s-4); font: 500 var(--fs-md)/1 var(--font); }
.hero__map { border-radius: var(--site-r-lg); overflow: hidden; background: var(--night); min-height: 320px; margin-top: var(--s-6); }
.hero__map > svg { width: 100%; height: auto; display: block; }
/* Vraie carte de Pontivy (Leaflet + tuiles OSM) passée en nuit par filtre, même DA que le SVG :
   fond --night, tracé cobalt, départ rond blanc, arrivée carrée. Le SVG reste dessous en repli. */
.hero__map { position: relative; }
.hero__map-live { position: absolute; inset: 0; z-index: 2; background: var(--night); opacity: 0; transition: opacity .6s var(--ease); }
.hero__map-live.is-ready { opacity: 1; }
.hero__map-live .leaflet-tile-pane { filter: invert(1) hue-rotate(195deg) saturate(.35) brightness(.55) contrast(1.05); }
.hero__map-live .leaflet-control-container { display: none; }
.hero__map-live .leaflet-container { background: var(--night); font: inherit; }
.hero-pin { width: 16px; height: 16px; background: var(--accent-ink); border-radius: 50%; box-shadow: 0 0 0 10px rgba(79,125,255,.25), 0 0 24px 8px rgba(79,125,255,.35); }
.hero-pin--end { border-radius: 3px; }
.route-draw { transition: opacity .5s var(--ease); }
.route-draw.is-out { opacity: 0 !important; }
section { padding: var(--s-12) 0; } section + section { border-top: 1px solid var(--site-line); }
.grid-4 { display: grid; gap: var(--s-3); grid-template-columns: 1fr; margin-top: var(--s-6); }
.card { position: relative; background: var(--site-surface); border: 1px solid var(--site-line); border-radius: var(--site-r-md); padding: var(--s-5); display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: center; height: 100%; box-sizing: border-box; color: inherit; text-decoration: none; box-shadow: var(--site-sh-1); transition: transform .2s var(--ease); }
.card::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: var(--site-sh-2); opacity: 0; transition: opacity .2s var(--ease); pointer-events: none; }
@media (hover: hover) { .card:hover { transform: translateY(-2px); } .card:hover::after { opacity: 1; } }
.card--wide { grid-column: span 2; }
.card h3 { margin: 0 0 var(--s-1); font-size: var(--fs-lg); letter-spacing: -.01em; text-wrap: balance; } .card p { margin: 0 0 var(--s-3); color: var(--site-ink-2); font-size: var(--fs-sm); line-height: 1.45; text-wrap: pretty; }
.card img { width: 96px; height: 60px; object-fit: contain; }
/* Ordinateur : les 4 cartes deviennent des colonnes — illustration en haut, texte aligné, même hauteur. */
@media (min-width: 900px) {
  .grid-4 > .card { grid-template-columns: 1fr; align-content: start; align-items: start; gap: var(--s-3); padding: var(--s-6) var(--s-5) var(--s-5); }
  .grid-4 > .card img { order: -1; width: 100%; max-width: 120px; height: 72px; object-position: left center; }
  .grid-4 > .card > div { display: flex; flex-direction: column; height: 100%; }
  .grid-4 > .card p { flex: 1; }
}
.card--photo { display: block; padding: 0; background: transparent; } .card--photo::after { display: none; }
.card--photo img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--site-r-md); display: block; background: var(--site-surface); }
.card--photo h3 { margin: var(--s-3) 0 var(--s-2); }
.split { display: grid; gap: var(--s-6); align-items: center; margin-top: var(--s-10); }
.split img { width: 100%; height: auto; border-radius: var(--site-r-lg); display: block; background: var(--site-surface); }
.split .actions { display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap; }
.split--rev > :first-child { order: 2; }
.photo-band { position: relative; }
/* Téléphone : la photo est cadrée sur le burger (le texte promotionnel imprimé à gauche de la photo est hors champ). */
.photo-band__media { position: relative; aspect-ratio: 16/10; border-radius: var(--site-r-lg); overflow: hidden; background: var(--site-surface); }
.photo-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 56%; transform: scale(1.8); transform-origin: 100% 56%; }
.photo-band__panel { position: relative; padding: var(--s-5) 0 0; max-width: 560px; }
.inline-form { display: flex; gap: var(--s-2); flex-wrap: wrap; } .inline-form input { flex: 1; min-width: 200px; min-height: 56px; border: 1px solid var(--site-line); border-radius: var(--site-r-sm); padding: 0 var(--s-4); font: 500 var(--fs-md)/1 var(--font); }
.inline-form input:focus, .hero-form input[type="datetime-local"]:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }
.hint { font-size: var(--fs-sm); color: var(--site-ink-2); margin: 10px 0 0; }
.err { color: var(--bad); font-size: var(--fs-sm); font-weight: 600; min-height: 1.2em; margin: var(--s-2) 0 0; }
/* Vide : la ligne d'erreur n'occupe de place que lorsqu'elle a quelque chose à dire. */
.err:empty { min-height: 0; margin: 0; }
.ok { color: var(--site-good); font-weight: 700; }
#kitchen.is-done form { display: none; } #kitchen.is-done #alert-done { display: block; }
.site-footer { padding: var(--s-12) 0 var(--s-10); border-top: 1px solid var(--site-line); font-size: var(--fs-sm); }
.site-footer__cols { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
.site-footer h4 { margin: 0 0 var(--s-3); font: 700 var(--fs-xs)/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--site-ink-2); }
.site-footer a { display: flex; align-items: center; min-height: 44px; color: var(--site-ink); text-decoration: none; padding: var(--s-1) 0; }
.site-footer__legal a { display: inline; min-height: 0; padding: 0; }
.site-footer .soc { display: flex; gap: 10px; margin-top: var(--s-3); } .site-footer .soc a { padding: 0; } .site-footer .soc svg { width: 22px; height: 22px; }
.site-footer__legal { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--site-line); color: var(--site-ink-2); font-size: var(--fs-sm); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.site-footer .site-nav__brand { display: inline-flex; align-items: center; gap: var(--s-2); padding: 0; margin-bottom: var(--s-2); min-height: 44px; } .site-footer .site-nav__brand img { width: 26px; height: 26px; }
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 10px max(var(--s-4), env(safe-area-inset-right, 0px)) calc(10px + var(--safe-b)) max(var(--s-4), env(safe-area-inset-left, 0px)); background: var(--site-glass); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-top: 1px solid var(--site-line); transition: transform .3s var(--ease); }
.sticky-cta[data-hidden="1"] { transform: translateY(110%); }
.sticky-cta { display: flex; align-items: center; justify-content: center; gap: 10px; }
.sticky-cta .btn { flex: 1; width: auto; max-width: 1120px; margin: 0 auto; }
/* Icône de l'app dans la barre collante : n'existe que quand la passerelle est active (app-bar.js). */
.sticky-cta__app { display: none; flex: none; width: 56px; height: 56px; place-items: center; border-radius: var(--site-r-sm); background: var(--site-surface); border: 1px solid var(--site-line); }
.sticky-cta__app img { width: 32px; height: 32px; border-radius: 8px; }
body[data-appbar="on"] .sticky-cta__app { display: grid; }
/* Passerelle « Ouvrir dans l'application » (lot F) : même verre que la barre collante, même emplacement.
   Une seule barre à la fois : dès que la barre collante se montre (#bar[data-hidden="0"]), la passerelle
   se replie (sélecteur frère : #bar précède #appbar dans le HTML). Sans JS ou dans l'app installée,
   l'attribut [hidden] la garde hors de l'écran. */
.appbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px max(var(--s-4), env(safe-area-inset-right, 0px)) calc(10px + var(--safe-b)) max(var(--s-4), env(safe-area-inset-left, 0px)); background: var(--site-glass); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-top: 1px solid var(--site-line); transition: transform .3s var(--ease); }
.appbar[hidden] { display: none; }
.appbar[data-hidden="1"], .sticky-cta[data-hidden="0"] ~ .appbar { transform: translateY(110%); }
.appbar__icon { flex: none; width: 40px; height: 40px; border-radius: 10px; }
.appbar__txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.appbar__txt b { font: 700 var(--fs-sm)/1.2 var(--font); color: var(--site-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar__txt span { font-size: var(--fs-xs); line-height: 1.3; color: var(--site-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar__go { flex: none; min-height: 44px; padding: 0 var(--s-4); font-size: var(--fs-sm); border-radius: 999px; }
.appbar__x { flex: none; width: 44px; height: 44px; margin-right: -10px; display: grid; place-items: center; background: none; border: 0; color: var(--site-ink-2); cursor: pointer; border-radius: 50%; }
.appbar__x svg { width: 18px; height: 18px; } .appbar__x:active { transform: scale(.94); }
.appbar__go:focus-visible, .appbar__x:focus-visible, .sticky-cta__app:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
/* Écrans étroits (≤ 419 px) : le titre se plie sur deux lignes plutôt que d'être tronqué, la sous-ligne disparaît. */
@media (max-width: 419px) { .appbar__txt b { white-space: normal; } .appbar__txt span { display: none; } }
.js .rv { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.trace { stroke-dasharray: 900; stroke-dashoffset: 900; animation: dash 1.6s ease-out .3s forwards; }
@keyframes dash { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv { opacity: 1; transform: none; transition: none; } .sticky-cta, .appbar { transition: none; } .trace { animation: none; stroke-dashoffset: 0; } .btn:active { transform: none; }
  .drawer__scrim, .drawer__panel, .card, .card::after, .soc a { transition: none; }
  .drawer.is-closing { display: none; }
}
@media (min-width: 640px) { .grid-4 { grid-template-columns: 1fr 1fr; } .site-footer__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) and (max-width: 899px) { .grid--3 > .card:last-child { grid-column: span 2; } }
@media (min-width: 900px) {
  .wrap { padding: 0 max(var(--s-6), env(safe-area-inset-right, 0px)) 0 max(var(--s-6), env(safe-area-inset-left, 0px)); }
  .site-nav .wrap { gap: var(--s-6); min-height: 72px; } .site-nav__brand { font-size: var(--fs-xl); gap: var(--s-2); } .site-nav__brand img { width: 30px; height: 30px; } .site-nav__actions { gap: 10px; } .site-nav__actions .btn { min-height: 44px; padding: 0 var(--s-5); font-size: var(--fs-sm); }
  .site-nav__links { display: flex; } .site-nav__burger { display: none; }
  /* Sur ordinateur, la barre collante (motif d'app) disparaît, et la réserve sous le pied de page avec elle. */
  .sticky-cta { display: none; } #site, #chauffeur, #livrer, #equipe, #investir { padding-bottom: 0; }
  .appbar { display: none; } /* Ordinateur : « Mon compte » est visible dans la navigation, la passerelle est un motif mobile. */
  /* Hero ordinateur : mise en forme figée (chantier 3), valeurs laissées en clair. */
  .hero { padding: 72px 0 80px; } .hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; } .hero__map { margin-top: 0; }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-4.grid--3 { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr 1fr; gap: var(--s-12); } .split--rev > :first-child { order: 2; }
  .site-footer__cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  section { padding: var(--s-24) 0; }
}
/* Ordinateur : la photo remplit la bande, le panneau opaque flotte dessus (le texte imprimé dans la
   photo est en haut à gauche, sous le panneau ; la photo est cadrée sur le bas). */
@media (min-width: 900px) {
  .photo-band { border-radius: var(--site-r-lg); overflow: hidden; min-height: 360px; display: flex; align-items: stretch; }
  .photo-band__media { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
  .photo-band img { object-position: center bottom; transform: none; }
  .photo-band__panel { background: var(--site-bg); margin: var(--s-4); padding: var(--s-5); border-radius: var(--site-r-md); max-width: 580px; display: flex; flex-direction: column; justify-content: center; }
}
.btn:focus-visible, .link:focus-visible, .card:focus-visible, .soc a:focus-visible, .site-nav__brand:focus-visible, .site-nav__burger:focus-visible, .site-nav__links a:focus-visible, .drawer__links a:focus-visible, .site-footer a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.card .link { align-self: start; }
.split .link { white-space: nowrap; }

/* Icônes sociales du pied de page : cercles ivoire ; X grisé tant que le compte n’existe pas. */
.soc { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--s-3); }
.soc a { display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; border-radius: 50%; background: var(--site-surface); border: 1px solid var(--site-line); color: var(--site-ink); padding: 0; transition: transform .16s var(--ease), background .16s var(--ease); }
@media (hover: hover) { .soc a:hover { background: var(--site-surface-2); } } .soc a:active { transform: scale(.94); }
.soc a.is-soon, .soc .is-soon { opacity: .45; }
.soc svg { width: 18px; height: 18px; }

/* Pass Pontivy : bandeau cobalt, mis en avant comme offre n°1 du site.
   Mise en forme figée (chantier 3) : les espacements restent en clair. Seuls les blancs passent par
   --accent-ink et la fin du dégradé (--blue-night) est assombrie pour que le texte blanc tienne 4,5:1. */
.passband { display: grid; gap: 22px; background: linear-gradient(135deg, var(--blue-deep), var(--blue) 55%, var(--blue-night)); color: var(--accent-ink); border-radius: var(--site-r-xl); padding: 28px 24px; margin-top: 8px; }
.passband .kicker { color: rgba(255,255,255,.82) !important; }
.passband h2 { color: var(--accent-ink); margin: 6px 0 14px; }
.passband__list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.passband__list li { position: relative; padding-left: 26px; font-size: var(--fs-md); line-height: 1.45; color: rgba(255,255,255,.92); }
.passband__list li::before { content: ""; position: absolute; left: 0; top: .42em; width: 12px; height: 7px; border-left: 2.5px solid var(--accent-ink); border-bottom: 2.5px solid var(--accent-ink); transform: rotate(-45deg); }
.passband__list b { color: var(--accent-ink); }
.passband .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.passband .btn--primary { background: var(--accent-ink); color: var(--blue-deep); box-shadow: 0 10px 26px -12px rgba(0,0,0,.5); }
.passband .btn--primary:hover { background: #f2f5ff; }
.passband .link { color: var(--accent-ink); border-bottom-color: rgba(255,255,255,.6); }
/* Prix et liste d'attente : blanc pur (4,52:1 sur la fin du dégradé), plus de blanc à 78 %. */
.passband .hint { color: var(--accent-ink); margin-top: 14px; }
/* Liste d'attente du Pass : « Être prévenu à l'ouverture » ouvre le champ email (site.js). Sans JS, le
   champ est visible d'emblée et le bouton d'ouverture disparaît. Le formulaire reprend .inline-form. */
/* `display:flex` de .inline-form écraserait le [hidden] du navigateur : on le rétablit explicitement. */
.inline-form[hidden] { display: none; }
#passwait .inline-form { margin-top: var(--s-1); } #passwait .inline-form input { background: var(--site-bg); border-color: transparent; }
#passwait .inline-form input:focus { border-color: var(--accent-ink); box-shadow: 0 0 0 3px rgba(255,255,255,.45); }
.passband .ok { color: var(--accent-ink); } .passband .err { color: var(--accent-ink); }
.passband__ill { display: grid; place-items: center; }
.passband__ill img { width: min(260px, 70%); height: auto; filter: drop-shadow(0 16px 30px rgba(0,0,0,.35)); }
@media (min-width: 900px) { .passband { grid-template-columns: 1.25fr .75fr; align-items: center; padding: 40px 36px; gap: 32px; } .passband__ill img { width: 100%; max-width: 300px; } }

/* Signature de l'agence : discrète, cliquable, partout où elle apparaît. */
.site-footer__legal .sig, .card .link[href^="https://wecodinglab"] { color: inherit; text-decoration: none; border-bottom: 1px solid var(--site-line); }
.site-footer__legal .sig:hover { border-bottom-color: var(--blue); color: var(--site-ink); }

/* Tunnels (lot A) : /chauffeur, /livrer, /equipe, /investir — même charte, hero sans carte. */
.notice { background: var(--blue-tint); color: var(--site-ink); font-size: var(--fs-sm); font-weight: 600; text-align: center; padding: 10px var(--s-4); }
.notice--legal { background: var(--site-surface); border: 1px solid var(--site-line); border-radius: var(--site-r-sm); font-weight: 500; color: var(--site-ink-2); margin: var(--s-4) 0 0; text-align: left; }
.hero--solo .wrap { display: block; max-width: 860px; }
.hero--solo .lead { font-size: var(--fs-lg); max-width: 640px; }
.hero--solo .btn { margin-top: var(--s-6); }
.grid-3 { display: grid; gap: var(--s-3); grid-template-columns: 1fr; margin-top: var(--s-6); }
.grid-3 .card { grid-template-columns: 1fr; align-content: start; }
.steps { list-style: none; counter-reset: step; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.steps li { counter-increment: step; position: relative; padding: var(--s-5) var(--s-5) var(--s-5) calc(var(--s-5) + 32px + var(--s-3)); background: var(--site-surface); border: 1px solid var(--site-line); border-radius: var(--site-r-md); }
.steps li::before { content: counter(step); position: absolute; left: var(--s-5); top: var(--s-5); width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: var(--accent-ink); display: grid; place-items: center; font: 800 var(--fs-sm)/1 var(--display); }
.steps h3 { margin: 0 0 var(--s-1); font-size: var(--fs-lg); letter-spacing: -.01em; }
.steps p { margin: 0; color: var(--site-ink-2); font-size: var(--fs-sm); line-height: 1.45; }
.delay { font-weight: 700; margin: var(--s-5) 0 0; }
.contact { display: grid; gap: 10px; justify-items: start; }
.contact .tel { font: 800 clamp(26px, 5vw, 40px)/1.1 var(--display); color: var(--site-ink); text-decoration: none; letter-spacing: -.03em; }
@media (min-width: 900px) { .grid-3, .steps { grid-template-columns: repeat(3, 1fr); } }