/* Accueil v3 — Marine et sable. Grille 8 px, illustrations 3:2. */
:root{--sp-v3-radius:12px}
:root body .sp-accueil-v3{display:block;padding:0;background:var(--sp-nuit);color:var(--sp-texte-sur-nuit)}
.sp-v3-inner{max-width:var(--sp-largeur-max);margin:auto;padding:32px 32px 24px;box-sizing:border-box}
.sp-vehicle-bar{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;z-index:5}
.sp-vehicle-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid #53606b;border-radius:var(--sp-v3-radius);overflow:hidden;background:rgba(255,255,255,.025)}
.sp-vehicle-steps>button{position:relative;display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:80px;padding:16px 48px 16px 24px;text-align:left;color:var(--sp-texte-sur-nuit);background:transparent;border:0;cursor:pointer}
.sp-vehicle-steps>button+button{border-left:1px solid #53606b}
.sp-vehicle-steps>button>span{color:var(--sp-gris-sur-nuit);font:12px/1.4 var(--sp-police-texte)}
.sp-vehicle-steps>button>strong{font:500 18px/1.4 var(--sp-police-titre)}
.sp-vehicle-steps>button>i{position:absolute;right:24px;top:30px;font-style:normal;color:var(--sp-bronze-clair)}
:root body .sp-vehicle-steps>button:is(:hover,[aria-expanded="true"]){background:rgba(var(--sp-accent-rgb),.1);color:var(--sp-texte-sur-nuit)}
.sp-vehicle-steps>button:focus-visible{outline:2px solid var(--sp-bronze-clair);outline-offset:-4px}
:root body .sp-vehicle-bar .sp-hero-cta{min-width:192px;border-radius:var(--sp-v3-radius);font-size:15px;white-space:nowrap}
.sp-vehicle-options{position:absolute;left:0;right:0;top:calc(100% + 8px);padding:16px 24px 24px;border:1px solid #53606b;border-radius:var(--sp-v3-radius);background:var(--sp-nuit);box-shadow:0 24px 48px #0004}
.sp-picker-heading{display:flex;gap:16px;align-items:center;justify-content:space-between}
.sp-picker-heading h2{margin:0;font:500 20px var(--sp-police-titre);color:inherit}
.sp-picker-heading button{display:grid;place-items:center;flex:none;min-width:44px;min-height:44px;border:0;border-radius:8px;background:transparent;color:inherit;font:24px var(--sp-police-texte);cursor:pointer}
[data-sp-options-list]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:320px;overflow-y:auto;padding:8px 0 4px}
.sp-picker-option{position:relative;display:flex;flex-direction:column;gap:4px;justify-content:center;min-width:0;min-height:64px;box-sizing:border-box;padding:16px 48px 16px 16px;border:1px solid #53606b;border-radius:var(--sp-v3-radius);background:transparent;color:var(--sp-texte-sur-nuit);text-align:left;cursor:pointer}
.sp-picker-option strong{font:500 16px/1.3 var(--sp-police-titre)}
.sp-picker-option small{font:13px/1.4 var(--sp-police-texte);color:var(--sp-gris-sur-nuit)}
.sp-picker-option>span{position:absolute;right:16px;top:50%;transform:translateY(-50%)}
:root body .sp-picker-option:hover{color:var(--sp-texte-sur-nuit);border-color:var(--sp-bronze-clair);background:#ffffff08}
:root body .sp-picker-option[aria-pressed="true"]{background:var(--sp-bronze-clair);border-color:var(--sp-bronze-clair);color:var(--sp-nuit)}
.sp-picker-option[aria-pressed="true"] small{color:var(--sp-nuit)}
.sp-picker-option:focus-visible,.sp-picker-heading button:focus-visible{outline:2px solid var(--sp-bronze-clair);outline-offset:2px}
.sp-mobile-vehicle{display:none}
.sp-v3-heading{padding:48px 0 0;text-align:center}
:root body .sp-accueil-v3 h1{font:500 clamp(36px,4.4vw,64px)/1.1 var(--sp-police-titre);letter-spacing:-.045em;margin:16px 0;color:var(--sp-texte-sur-nuit)}
:root body .sp-accueil-v3 h1>span{color:var(--sp-bronze-clair)}
.sp-v3-kicker{font:500 11px/1.5 var(--sp-police-mono);letter-spacing:.12em;color:var(--sp-bronze);margin:0 0 16px}
.sp-accueil-v3 .sp-v3-kicker{color:var(--sp-bronze-clair);margin:0}
.sp-v3-specs{margin:0;color:var(--sp-gris-sur-nuit);font:16px/1.5 var(--sp-police-texte)}
.sp-v3-shortcuts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin:24px 0 8px}
:root body .sp-v3-shortcuts a{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;border-bottom:1px solid #53606b;color:var(--sp-texte-sur-nuit);font-size:14px}
.sp-v3-shortcuts a strong{color:var(--sp-bronze-clair);font-weight:500}
.sp-v3-shortcuts a>span{color:var(--sp-bronze-clair)}
:root body .sp-accueil-v3 .sp-plan{margin:0}
.sp-accueil-v3 .sp-plan-grid{opacity:.45}
:root body .sp-accueil-v3 .sp-plan-hint{margin:8px 0 0;text-align:center;font-size:13px;color:var(--sp-gris-sur-nuit)}
:root body .sp-accueil-v3 .sp-garage-detail{max-width:640px;margin:16px auto 0}
.sp-accueil-v3 .sp-garage-detail>summary{min-height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.sp-accueil-v3 .home-garage-actions{display:none}
:root body .sp-accueil-v3 .sp-point{background:transparent}
.sp-accueil-v3 .sp-hotspot{z-index:1}
.sp-accueil-v3 .sp-hotspot:is(:hover,:focus-visible,[data-sp-revealed="true"]){z-index:3}
:root body .sp-accueil-v3 .sp-point-label{display:block;font:12px var(--sp-police-texte);padding:8px 12px}
.sp-hotspot[data-sp-revealed="true"] .sp-point-label{opacity:1;visibility:visible}
.sp-hotspot[data-sp-revealed="true"] .sp-point{background:var(--sp-bronze-clair)!important;color:var(--sp-nuit)}
:root body .sp-home-points,:root body .sp-home-packs{max-width:var(--sp-largeur-max);padding:64px 32px;margin:0 auto;box-sizing:border-box}
:root body .sp-home-points h2,:root body .sp-home-packs h2{font:500 clamp(26px,2.6vw,36px)/1.2 var(--sp-police-titre);letter-spacing:-.03em;margin:0}
.sp-home-points .sp-section-heading,.sp-home-packs .sp-section-heading{align-items:flex-end;gap:24px;margin-bottom:32px}
.sp-home-points .sp-section-heading p:not(.sp-v3-kicker),.sp-home-packs .sp-section-heading p:not(.sp-v3-kicker){max-width:680px;color:var(--sp-gris);font-size:15px;line-height:1.5;margin:16px 0 0}
.sp-section-count{white-space:nowrap;color:var(--sp-gris);font:13px var(--sp-police-mono);padding-bottom:8px}
.sp-point-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.sp-point-card{display:flex;flex-direction:column;min-width:0;box-sizing:border-box;padding:24px;border:1px solid var(--sp-ligne);border-radius:var(--sp-v3-radius);background:var(--sp-blanc)}
.sp-point-card-heading{display:flex;align-items:center;gap:16px}
.sp-point-card-heading>img{width:132px;height:88px;flex:none;object-fit:cover;border-radius:10px}
.sp-point-card-heading>div{min-width:0}
.sp-point-card-heading p{margin:0 0 8px;color:var(--sp-gris);font:12px/1.4 var(--sp-police-texte)}
.sp-point-card-heading p>span{color:var(--sp-bronze);font-family:var(--sp-police-mono);margin-right:8px}
:root body .sp-point-card h3{font:500 20px/1.25 var(--sp-police-titre);letter-spacing:-.02em;margin:0;color:var(--sp-encre)}
.sp-point-description{margin:24px 0;color:var(--sp-gris);font-size:15px;line-height:1.6}
.sp-point-pieces{padding:0;margin:auto 0 0;list-style:none;border-top:1px solid var(--sp-ligne)}
.sp-point-pieces li+li{border-top:1px solid var(--sp-ligne)}
.sp-point-pieces a{display:flex;align-items:center;gap:16px;justify-content:space-between;min-height:48px;padding:8px 0;font-size:13px;color:var(--sp-encre);text-decoration:none}
.sp-point-pieces a:hover>span{text-decoration:underline;text-underline-offset:3px}
.sp-point-pieces a>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sp-point-pieces strong{flex:none;font:500 14px var(--sp-police-texte);white-space:nowrap;text-align:right}
.sp-point-pieces small{display:block;margin-top:4px;font-size:10px;color:var(--sp-gris)}
.sp-point-related{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:44px;margin-top:16px;padding:8px 0;border:0;border-top:1px solid var(--sp-ligne);background:transparent;font:500 14px var(--sp-police-texte);color:var(--sp-encre);text-align:left;cursor:pointer}
.sp-point-related>span{white-space:nowrap;color:var(--sp-bronze)}
.sp-point-related i{font-style:normal;margin-left:8px}
.sp-point-empty{margin:auto 0 0;padding-top:16px;border-top:1px solid var(--sp-ligne);color:var(--sp-gris);font-size:13px}
.sp-points-more{display:none}
:root body .sp-home-packs{border-top:1px solid var(--sp-ligne)}
.sp-pack-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.sp-pack-card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--sp-ligne);border-radius:var(--sp-v3-radius);overflow:hidden;background:var(--sp-blanc)}
.sp-pack-image{position:relative;aspect-ratio:3/2;background:#f1f1f1}
.sp-pack-image>img{display:block;width:100%;height:100%;object-fit:cover}
.sp-pack-image>span{position:absolute;top:16px;left:16px;font:12px var(--sp-police-mono);color:var(--sp-gris)}
.sp-pack-copy{display:flex;flex-direction:column;flex:1;min-width:0;padding:24px}
:root body .sp-pack-copy h3{font:500 22px/1.25 var(--sp-police-titre);letter-spacing:-.03em;margin:0}
.sp-pack-copy>p{font-size:14px;color:var(--sp-gris);margin:8px 0 24px;line-height:1.5}
.sp-pack-copy ul{list-style:none;padding:0;margin:0 0 24px}
.sp-pack-copy li+li{margin-top:16px}
.sp-pack-copy li strong{display:block;font:500 13px/1.5 var(--sp-police-texte)}
.sp-pack-copy li>span{display:block;font-size:12px;line-height:1.5;color:var(--sp-gris);overflow-wrap:anywhere}
:root body .sp-pack-copy>button{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;margin-top:auto;padding:12px 16px;border:0;border-radius:var(--sp-v3-radius);background:var(--sp-action);color:var(--sp-action-texte);font:500 14px var(--sp-police-texte);cursor:pointer}
:root body .sp-pack-copy>button:hover{background:var(--sp-action-survol);color:var(--sp-action-texte)}
:root body .sp-home-packs .home-pack-note{font-size:12px;margin:16px 0 0;line-height:1.5;color:var(--sp-gris)}
.sp-related-notice{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:8px 16px;border:1px solid var(--sp-ligne);border-radius:var(--sp-v3-radius);font-size:14px}
.sp-related-notice button{min-height:44px;padding:8px;border:0;background:none;text-decoration:underline;cursor:pointer}
.sp-vehicle-dialog{box-sizing:border-box;width:640px;max-width:calc(100% - 32px);max-height:85dvh;margin:auto;padding:16px 24px 24px;border:1px solid #53606b;border-radius:16px;background:var(--sp-nuit);color:var(--sp-texte-sur-nuit)}
.sp-vehicle-dialog::backdrop{background:#0c141cb3;backdrop-filter:blur(4px)}
.sp-vehicle-dialog .sp-picker-heading h2{text-align:center;flex:1}
.sp-vehicle-dialog .sp-picker-heading button:disabled{visibility:hidden}
.sp-picker-progress{height:3px;overflow:hidden;background:#53606b;margin:16px 0;border-radius:4px}
.sp-picker-progress>span{display:block;height:100%;background:var(--sp-bronze-clair);transition:width .15s}
.sp-picker-breadcrumb{margin:0 0 16px;color:var(--sp-gris-sur-nuit);text-align:center;font:13px var(--sp-police-texte)}
.sp-dialog-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sp-picker-note{font-size:12px;line-height:1.5;color:var(--sp-gris-sur-nuit);margin:24px 0 0;text-align:center}
html.sp-picker-open{overflow:hidden}
:root body :is(.sp-accueil-v3,.sp-home-points,.sp-home-packs,.sp-vehicle-dialog,.sp-related-notice) [hidden],:root body :is(.sp-home-points,.sp-home-packs,.sp-home-selection,.home-browse,.sp-related-notice)[hidden]{display:none!important}
@media(max-width:1100px) and (min-width:701px){
 .sp-v3-inner{padding:24px 24px 16px}.sp-vehicle-steps>button{padding-left:16px}.sp-vehicle-bar{gap:8px}
 :root body .sp-vehicle-bar .sp-hero-cta{min-width:160px;padding:0 16px}
 :root body .sp-home-points,:root body .sp-home-packs{padding:48px 24px}.sp-point-cards,.sp-pack-cards{gap:16px}
 .sp-point-card,.sp-pack-copy{padding:16px}:root body .sp-point-card h3{font-size:18px}.sp-point-card-heading{gap:16px}
}
@media(max-width:700px){
 .sp-v3-inner{padding:16px 16px 8px}.sp-vehicle-bar{display:none}
 .sp-mobile-vehicle{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:64px;box-sizing:border-box;padding:8px 16px;border:1px solid #53606b;border-radius:var(--sp-v3-radius);background:#ffffff04;color:var(--sp-texte-sur-nuit);text-align:left;cursor:pointer}
 .sp-mobile-vehicle>span:first-child{min-width:0}.sp-mobile-vehicle small{display:block;margin-bottom:4px;font-size:11px;color:var(--sp-gris-sur-nuit)}.sp-mobile-vehicle strong{display:block;font:500 14px/1.4 var(--sp-police-texte)}.sp-mobile-vehicle>span:last-child{flex:none;font-size:12px;color:var(--sp-bronze-clair)}.sp-mobile-vehicle i{font-style:normal}
 .sp-v3-heading{padding-top:32px;text-align:left}
 .sp-v3-kicker{font-size:10px}:root body .sp-accueil-v3 h1{font-size:36px;line-height:1.12;margin:16px 0 8px}
 .sp-v3-specs{font-size:13px}.sp-v3-shortcuts{justify-content:flex-start;gap:0 16px;margin:16px 0 8px}
 :root body .sp-v3-shortcuts a{font-size:12px;gap:4px;min-height:44px}.sp-v3-shortcuts a>span{display:none}
 .sp-accueil-v3 .sp-hero-plan{margin:0 -8px}.sp-accueil-v3 .sp-plan{min-height:0}.sp-accueil-v3 .sp-point{width:24px;height:24px}
 :root body .sp-accueil-v3 .sp-point-label{font-size:10px;padding:6px 8px}.sp-accueil-v3 .sp-hotspot-moteur .sp-point-label,.sp-accueil-v3 .sp-hotspot-freins .sp-point-label{left:auto;right:0;transform:none}
 :root body .sp-accueil-v3 .sp-plan-hint{display:block;font-size:11px;margin-top:8px;min-height:32px}.sp-accueil-v3 .sp-garage-detail>summary{font-size:11px}
 :root body .sp-home-points,:root body .sp-home-packs{padding:40px 16px}
 .sp-home-points .sp-section-heading,.sp-home-packs .sp-section-heading{margin-bottom:24px}.sp-section-count{display:none}
 .sp-home-points .sp-section-heading p:not(.sp-v3-kicker),.sp-home-packs .sp-section-heading p:not(.sp-v3-kicker){font-size:14px;margin-top:16px}
 .sp-point-cards{grid-template-columns:1fr;gap:16px}.sp-point-card{padding:16px}.sp-point-card-heading{gap:16px}
 .sp-point-card-heading>img{width:104px;height:70px}:root body .sp-point-card h3{font-size:18px}.sp-point-card-heading p{font-size:11px;margin-bottom:8px}
 .sp-point-description{font-size:14px;margin:16px 0}.sp-point-pieces a{font-size:12px}.sp-point-pieces strong{font-size:13px}
 .sp-point-cards:not(.is-expanded)>.sp-point-card:nth-child(n+4){display:none}
 .sp-points-more{display:block;width:100%;min-height:48px;margin-top:24px;padding:12px 16px;border:1px solid var(--sp-ligne);border-radius:var(--sp-v3-radius);background:transparent;color:var(--sp-encre);font:500 14px var(--sp-police-texte);cursor:pointer}
 .sp-pack-cards{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;margin:0 -16px;padding:0 16px 16px;overscroll-behavior-x:contain}
 .sp-pack-card{flex:0 0 calc(100vw - 64px);max-width:360px;scroll-snap-align:start}.sp-pack-copy{padding:24px}.sp-pack-copy>p{margin-bottom:16px}
 .sp-vehicle-dialog{width:100%;max-width:100%;margin:auto auto 0;max-height:88dvh;padding:8px 16px calc(24px + env(safe-area-inset-bottom));border:0;border-radius:16px 16px 0 0;animation:sp-v3-sheet .2s ease-out}
 .sp-dialog-options{grid-template-columns:1fr}.sp-picker-option{min-height:64px}.sp-picker-progress{margin:8px 0 16px}
}
@keyframes sp-v3-sheet{from{transform:translateY(32px);opacity:.5}to{transform:translateY(0);opacity:1}}
@media(prefers-reduced-motion:reduce){.sp-vehicle-dialog{animation:none}.sp-picker-progress>span{transition:none}}
/* Le libellé le plus long du bloc existant doit tenir à 390 px. */
@media(max-width:700px){:root body .sp-legende-cartes .sp-statut{white-space:normal;max-width:100%;box-sizing:border-box;line-height:1.4}:root body .sp-legende-cartes .sp-statut svg{flex:none}}
