/*
 * PBAB Express (ADR 0042) : l'accueil de /express et l'île React (assets/express/), à l'identique de la
 * maquette validée (Claude Design). L'île pose ses styles en ligne, comme la maquette (S() de html.js, par
 * le CSSOM, ce que la CSP autorise) ; ici : l'accueil, les composants du design system de la maquette
 * (pb-*), ses animations, et les états :hover, :focus, :active et ::before des éléments de l'île (pbx-*).
 */

/* La maquette suit la taille par défaut des éléments (content-box), sans la remise à zéro du site */
.express-page *,
.express-page *::before,
.express-page *::after {
    box-sizing: revert;
}

.express-page a {
    color: var(--steel-900);
    text-decoration-color: var(--steel-300);
}

.express-page a:hover {
    color: var(--red-500);
}

/* Accueil, masqué dès « C'est parti » */
.express-page [data-express-target~="intro"][hidden] {
    display: none;
}

/* Accueil : photo des tôles, hérisson et « C'est parti » */
.express-intro-hero {
    position: relative;
    min-height: 540px;
    display: flex;
    align-items: center;
    background: var(--steel-900);
    overflow: hidden;
}

.express-intro-hero__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.express-intro-hero__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(23, 27, 30, .94) 0%, rgba(23, 27, 30, .8) 50%, rgba(23, 27, 30, .35) 100%);
}

.express-intro-hero__inner {
    position: relative;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 72px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-sizing: border-box;
}

.express-intro-hero__overline {
    display: flex;
    align-items: center;
    gap: 10px;
    font: var(--type-overline);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: #fff;
}

.express-intro-hero__overline::before {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--red-500);
    border-radius: 2px;
}

.express-intro-hero__title {
    margin: 0;
    max-width: 760px;
    font: 700 clamp(40px, 6vw, 68px)/1.02 var(--font-display);
    letter-spacing: -0.02em;
    color: #fff;
    text-wrap: balance;
}

.express-intro-hero__lead {
    max-width: 560px;
    font: var(--type-body-lg);
    color: var(--steel-200);
}

.express-intro-hero__actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 8px;
}

.express-intro-hero__start {
    position: relative;
    display: inline-flex;
    border-radius: 4px;
}

/* L'anneau pulsé n'apparaît qu'une fois l'île prête (« C'est parti » répond alors) */
.express-intro-hero__start .pbx-anim {
    display: none;
    position: absolute;
    inset: -2px;
    border-radius: 4px;
    pointer-events: none;
    animation: pbxPulse 1.6s cubic-bezier(.2, .7, .2, 1) infinite;
}

.express-page.is-ready .express-intro-hero__start .pbx-anim {
    display: block;
}

/* Tant que l'île se charge, le bouton attend sans paraître désactivé */
.express-intro-hero__start .pb-btn:disabled {
    opacity: 1;
    cursor: progress;
}

.express-intro-hero__start svg {
    width: 18px;
    height: 18px;
}

.express-intro-hero__count {
    font: var(--type-body-sm);
    color: var(--steel-200);
}

.express-intro-hedgehog {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-top: 22px;
}

.express-intro-hedgehog__figure {
    position: relative;
    flex: none;
    width: clamp(84px, 10vw, 124px);
    aspect-ratio: 1;
}

.express-intro-hedgehog__shadow {
    position: absolute;
    left: 27%;
    right: 27%;
    top: 93.5%;
    height: 6%;
    border-radius: 50%;
    background: rgba(23, 27, 30, .2);
    filter: blur(1px);
}

.express-intro-hedgehog__body {
    position: absolute;
    inset: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transform-origin: 50% 96.5%;
    animation: pbxHhIn 800ms cubic-bezier(.3, 1.4, .5, 1) both;
}

.express-intro-hedgehog__idle {
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: 50% 96.5%;
    animation: pbxHhIdle 2.8s ease-in-out .8s infinite;
}

.express-intro-hedgehog__idle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.express-intro-hedgehog__bubble {
    position: relative;
    max-width: 360px;
    background: #fff;
    color: var(--steel-900);
    border-radius: 14px;
    padding: 12px 16px;
    font: 600 15px/1.4 var(--font-body);
    transform-origin: 0 100%;
    animation: pbxBubA 450ms cubic-bezier(.2, .9, .3, 1.2) .55s both;
}

.express-intro-hedgehog__bubble::before {
    content: '';
    position: absolute;
    left: -8px;
    bottom: 22px;
    width: 13px;
    height: 13px;
    background: #fff;
    transform: rotate(45deg);
}

/* Accueil : PBAB Drive */
.express-intro-drive {
    background: #fff;
    border-bottom: 1px solid var(--steel-200);
}

.express-intro-drive__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 80px 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 64px;
    align-items: center;
    box-sizing: border-box;
}

.express-intro-drive__text {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.express-intro-drive__head {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.express-intro-drive__overline {
    font: var(--type-overline);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--red-500);
}

.express-intro-drive__title {
    margin: 0;
    font: var(--type-h1);
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.express-intro-drive__lead {
    font: var(--type-body-lg);
    color: var(--steel-600);
}

.express-intro-drive__steps {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--steel-200);
    border-radius: 4px;
}

.express-intro-drive__step {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 16px 20px;
    border-top: 1px solid var(--steel-200);
}

.express-intro-drive__step:first-child {
    border-top-color: transparent;
}

.express-intro-drive__num {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    background: var(--steel-100);
    display: grid;
    place-items: center;
    font: 700 18px/1 var(--font-mono);
    color: var(--red-500);
}

.express-intro-drive__step-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.express-intro-drive__step-title {
    font: var(--type-label);
    font-size: 16px;
}

.express-intro-drive__step-desc {
    font: var(--type-body-sm);
    color: var(--steel-600);
}

.express-intro-drive__depot {
    display: flex;
    align-items: center;
    gap: 8px;
    font: var(--type-body-sm);
    color: var(--steel-600);
}

.express-intro-drive__depot svg {
    flex: none;
    width: 16px;
    height: 16px;
}

.express-intro-drive__depot .mono {
    font-family: var(--font-mono);
}

.express-intro-drive__photo {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

/* Accueil : plus grand ou plus compliqué */
.express-intro-more {
    background: var(--steel-50);
}

.express-intro-more__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.express-intro-more__text {
    font: var(--type-body);
    color: var(--steel-600);
}

.express-intro-more__link {
    display: flex;
    align-items: center;
    gap: 6px;
    font: var(--type-label);
}

.express-intro-more__link svg {
    width: 16px;
    height: 16px;
}

/* Sans JavaScript */
.express-fallback {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 24px;
    display: grid;
    gap: 12px;
    box-sizing: border-box;
}

/* Champ piège : invisible, jamais rempli par un visiteur */
.pbx-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Composants du design system de la maquette (PBABDesignSystem : Button, IconButton, FormField, Input, Textarea, Accordion) */
.pb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:var(--radius-md);font:var(--type-label);font-size:var(--text-base);letter-spacing:0;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out);user-select:none;-webkit-appearance:none;appearance:none}
.pb-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.pb-btn:active:not(:disabled){transform:translateY(1px)}
.pb-btn:disabled{opacity:.45;cursor:not-allowed}
.pb-btn--md{height:var(--control-h-md);padding:0 20px}
.pb-btn--sm{height:var(--control-h-sm);padding:0 14px;font-size:var(--text-sm)}
.pb-btn--lg{height:var(--control-h-lg);padding:0 26px;font-size:var(--text-md)}
.pb-btn--primary{background:var(--action-primary);color:var(--text-inverse)}
.pb-btn--primary:hover:not(:disabled){background:var(--action-primary-hover)}
.pb-btn--primary:active:not(:disabled){background:var(--action-primary-active)}
.pb-btn--secondary{background:var(--action-secondary);color:var(--text-inverse)}
.pb-btn--secondary:hover:not(:disabled){background:var(--action-secondary-hover)}
.pb-btn--outline{background:transparent;color:var(--text-primary);border-color:var(--border-strong)}
.pb-btn--outline:hover:not(:disabled){border-color:var(--steel-900);background:var(--surface-subtle)}
.pb-btn--ghost{background:transparent;color:var(--text-primary)}
.pb-btn--ghost:hover:not(:disabled){background:var(--surface-muted)}
.pb-btn--block{width:100%}
.pb-iconbtn{display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--radius-md);background:transparent;color:var(--text-primary);cursor:pointer;transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out);-webkit-appearance:none;appearance:none;padding:0}
.pb-iconbtn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.pb-iconbtn:disabled{opacity:.45;cursor:not-allowed}
.pb-iconbtn--md{width:var(--control-h-md);height:var(--control-h-md)}
.pb-iconbtn--sm{width:var(--control-h-sm);height:var(--control-h-sm)}
.pb-iconbtn--ghost:hover:not(:disabled){background:var(--surface-muted)}
.pb-field{display:grid;gap:6px}
.pb-field__label{font:var(--type-label);color:var(--text-primary);display:flex;gap:6px;align-items:baseline}
.pb-field__opt{font:var(--type-body-sm);font-weight:400;color:var(--text-tertiary)}
.pb-field__hint{font:var(--type-body-sm);color:var(--text-secondary)}
.pb-field__error{font:var(--type-body-sm);color:var(--status-error);font-weight:500}
.pb-ctl{display:flex;align-items:center;height:var(--control-h-md);border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:#fff;transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}
.pb-ctl:hover{border-color:var(--steel-400)}
.pb-ctl:focus-within{border-color:var(--border-focus);box-shadow:0 0 0 1px var(--border-focus)}
.pb-ctl--error{border-color:var(--status-error)}
.pb-ctl--error:focus-within{border-color:var(--status-error);box-shadow:0 0 0 1px var(--status-error)}
.pb-ctl--disabled{background:var(--surface-muted);color:var(--text-tertiary)}
.pb-ctl input,.pb-ctl select,.pb-ctl textarea{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;padding:0 14px;font:var(--type-body);color:var(--text-primary);-webkit-appearance:none;appearance:none}
.pb-ctl input::placeholder,.pb-ctl textarea::placeholder{color:var(--text-tertiary)}
.pb-ctl__aff{display:flex;align-items:center;padding:0 12px;color:var(--text-tertiary);font:var(--type-mono);font-size:var(--text-sm);white-space:nowrap}
.pb-ctl__aff--l{border-right:1px solid var(--border-default)}
.pb-ctl__aff--r{border-left:1px solid var(--border-default)}
.pb-ctl__ico{display:flex;align-items:center;padding-left:12px;color:var(--text-tertiary)}
.pb-ctl__ico ~ input{padding-left:8px}
.pb-textarea{height:auto;align-items:stretch}
.pb-textarea textarea{padding:12px 14px;resize:vertical;min-height:120px;line-height:var(--leading-normal)}
.pb-acc{border-top:1px solid var(--border-default)}
.pb-acc__item{border-bottom:1px solid var(--border-default)}
.pb-acc__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;background:none;border:0;text-align:left;cursor:pointer;font:var(--type-h4);font-size:var(--text-md);color:var(--text-primary);letter-spacing:0}
.pb-acc__btn:hover{color:var(--red-500)}
.pb-acc__btn:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-xs)}
.pb-acc__ico{flex:none;color:var(--text-secondary);transition:transform var(--duration-base) var(--ease-out)}
.pb-acc__ico--open{transform:rotate(180deg)}
.pb-acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--duration-base) var(--ease-out)}
.pb-acc__panel--open{grid-template-rows:1fr}
.pb-acc__inner{overflow:hidden}
.pb-acc__body{padding:0 40px 20px 0;font:var(--type-body);color:var(--text-secondary);max-width:70ch}
.pb-acc--boxed{border:1px solid var(--border-default);border-radius:var(--radius-md)}
.pb-acc--boxed .pb-acc__item:last-child{border-bottom:0}
.pb-acc--boxed .pb-acc__btn,.pb-acc--boxed .pb-acc__body{padding-left:20px;padding-right:20px}

/* États des éléments de l'île (style-hover, style-focus, style-active, style-before de la maquette) */
.pbx-bubble-tail::before { content:'' !important; position:absolute !important; left:-8px !important; bottom:22px !important; width:13px !important; height:13px !important; background:#fff !important; border-left:1.5px solid var(--steel-200) !important; border-bottom:1.5px solid var(--steel-200) !important; transform:rotate(45deg) !important }
.pbx-hover-muted:hover { background:var(--steel-100) !important; color:var(--steel-900) !important }
.pbx-hover-border-500:hover { border-color:var(--steel-500) !important }
.pbx-focus-ring:focus { border-color:var(--steel-900) !important; box-shadow:0 0 0 1px var(--steel-900) !important }
.pbx-hover-subtle:hover { background:var(--steel-50) !important }
.pbx-press:active { transform:translateY(1px) !important }
.pbx-hover-border:hover { border-color:var(--steel-900) !important }
.pbx-hit::before { content:'' !important; position:absolute !important; inset:-14px !important; border-radius:999px !important }
.pbx-hover-red-50:hover { background:var(--red-50) !important }
.pbx-hover-underline:hover { border-bottom-color:var(--red-500) !important }
.pbx-hover-red:hover { color:var(--red-500) !important }
.pbx-hover-strong:hover { background:var(--steel-200) !important; color:var(--steel-900) !important }

/* Animations de la maquette */
@keyframes pbxPulse{0%{box-shadow:0 0 0 0 rgba(200,32,42,.55)}70%{box-shadow:0 0 0 14px rgba(200,32,42,0)}100%{box-shadow:0 0 0 0 rgba(200,32,42,0)}}
@keyframes pbxBlink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes pbxDriveLine{0%{transform:translateX(26px);opacity:0}20%{opacity:1}100%{transform:translateX(-30px);opacity:0}}
@keyframes pbxHhHopA{0%{transform:translateY(0) scale(1,1)}28%{transform:translateY(-18px) scale(.94,1.07)}52%{transform:translateY(0) scale(1.09,.91)}70%{transform:translateY(-5px) scale(.98,1.02)}100%{transform:translateY(0) scale(1,1)}}
@keyframes pbxHhHopB{0%{transform:translateY(0) scale(1,1)}28%{transform:translateY(-18px) scale(.94,1.07)}52%{transform:translateY(0) scale(1.09,.91)}70%{transform:translateY(-5px) scale(.98,1.02)}100%{transform:translateY(0) scale(1,1)}}
@keyframes pbxHhJumpA{0%{transform:scale(1,1)}18%{transform:scale(1.1,.86)}45%{transform:translateY(-22%) scale(.94,1.08)}70%{transform:translateY(0) scale(1.12,.86)}85%{transform:scale(.97,1.03)}100%{transform:scale(1,1)}}
@keyframes pbxHhJumpB{0%{transform:scale(1,1)}18%{transform:scale(1.1,.86)}45%{transform:translateY(-22%) scale(.94,1.08)}70%{transform:translateY(0) scale(1.12,.86)}85%{transform:scale(.97,1.03)}100%{transform:scale(1,1)}}
@keyframes pbxHhPopA{0%{transform:scale(1,1)}35%{transform:scale(1.07,.9)}60%{transform:translateY(-4%) scale(.96,1.06)}80%{transform:translateY(0) scale(1.02,.98)}100%{transform:scale(1,1)}}
@keyframes pbxHhPopB{0%{transform:scale(1,1)}35%{transform:scale(1.07,.9)}60%{transform:translateY(-4%) scale(.96,1.06)}80%{transform:translateY(0) scale(1.02,.98)}100%{transform:scale(1,1)}}
@keyframes pbxHhShadowA{0%,18%{transform:scale(1);opacity:1}45%{transform:scale(.55);opacity:.5}70%,100%{transform:scale(1);opacity:1}}
@keyframes pbxHhShadowB{0%,18%{transform:scale(1);opacity:1}45%{transform:scale(.55);opacity:.5}70%,100%{transform:scale(1);opacity:1}}
@keyframes pbxHhIdle{0%,100%{transform:scale(1,1)}50%{transform:scale(.9925,1.0175)}}
@keyframes pbxHhIn{0%{opacity:0;transform:translateY(40px) scale(.3)}55%{opacity:1;transform:translateY(-10px) scale(1.08)}78%{transform:translateY(3px) scale(.97)}100%{transform:none}}
@keyframes pbxBubA{0%{opacity:0;transform:translateX(-10px) scale(.94)}100%{opacity:1;transform:none}}
@keyframes pbxBubB{0%{opacity:0;transform:translateX(-10px) scale(.94)}100%{opacity:1;transform:none}}
@keyframes pbxReveal{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
@keyframes pbxRing{0%,100%{box-shadow:0 0 0 4px rgba(200,32,42,.25)}50%{box-shadow:0 0 0 11px rgba(200,32,42,.05)}}
@keyframes pbxNum{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* Plan des tôles (layout.js) */
.express-layout__svg {
    display: block;
    height: auto;
}


/* Scènes isométriques (PbxScene de la maquette) */
.pbxa {
    position: absolute;
    inset: 0;
    background: #F7F8F8;
}

.pbxa svg { display: block; width: 100%; height: 100%; }
.pbxa .d-car { animation: pbxa-dcar 7s cubic-bezier(.45, 0, .25, 1) infinite; }
.pbxa .d-load { animation: pbxa-dload 7s linear infinite; }
.pbxa .d-fly { animation: pbxa-dfly 7s ease-in-out infinite; }
.pbxa .d-ok,
.pbxa .l-ok { transform-box: fill-box; transform-origin: center; }
.pbxa .d-ok { animation: pbxa-dok 7s ease-out infinite; }
.pbxa .l-roof { animation: pbxa-lroof 7s ease-out infinite; }
.pbxa .l-frame { animation: pbxa-lframe 7s linear infinite; }
.pbxa .l-ok { animation: pbxa-lok 7s ease-out infinite; }

/* Animations des scènes : calculées une fois pour toutes depuis la projection isométrique de la maquette */
@keyframes pbxa-dcar{0%{transform:translate(-129.9px,-75.0px)}30%{transform:translate(101.8px,58.8px)}62%{transform:translate(101.8px,58.8px)}92%,100%{transform:translate(368.1px,212.5px)}}
@keyframes pbxa-dload{0%,50%{opacity:0}52%,100%{opacity:1}}
@keyframes pbxa-dfly{0%,33%{opacity:0;transform:translate(0.0px,0.0px)}34%{opacity:1;transform:translate(0.0px,0.0px)}42%{transform:translate(-11.3px,-6.5px)}50%{opacity:1;transform:translate(-23.8px,9.3px)}51%,100%{opacity:0;transform:translate(-23.8px,9.3px)}}
@keyframes pbxa-dok{0%,50%{transform:scale(0)}54%{transform:scale(1.15)}57%,62%{transform:scale(1)}66%,100%{transform:scale(0)}}
@keyframes pbxa-lroof{0%,80%{opacity:0;transform:translateY(-10px)}88%,94%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}
@keyframes pbxa-lframe{0%,82%{opacity:1}88%,94%{opacity:0}100%{opacity:1}}
@keyframes pbxa-lok{0%,88%{transform:scale(0)}91%{transform:scale(1.15)}93%,95%{transform:scale(1)}99%,100%{transform:scale(0)}}


@media (prefers-reduced-motion: reduce) {
    .pbx-anim,
    .pbx-anim *,
    .pbx-hh,
    .pbx-hh *,
    .express-intro-hedgehog *,
    .pbxa * {
        animation: none !important;
        transition: none !important;
    }
}