/* ================================================================
Configurateur Tesla — Front-end (réplique du style Porsche)
================================================================ */
/* Supprime le padding-block: 40px du wrapper Woodmart UNIQUEMENT
sur les pages contenant le configurateur (via :has()).
Le configurateur gère lui-même son espacement vertical. */
.wd-content-layout:has(#ctl-app) {
padding-block: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.ctl-app, .ctl-app *, .ctl-app *::before, .ctl-app *::after,
.ctl-modal, .ctl-modal *, .ctl-modal *::before, .ctl-modal *::after {
box-sizing: border-box;
}
/* ======================================================================
RESET WOODMART : neutralise les styles agressifs du thème sur tous
nos boutons internes (padding, border-radius, uppercase, min-height...).
====================================================================== */
.ctl-app button.ctl-opt-info,
.ctl-app button.ctl-acc-header,
.ctl-app button.ctl-btn,
.ctl-app button.ctl-modal-close,
.ctl-modal button.ctl-modal-close,
.ctl-modal button.ctl-btn,
.ctl-modal button.ctl-modal-thumb,
.ctl-modal button.ctl-modal-action,
.ctl-app button.ctl-reset-btn,
.ctl-app button.ctl-line-remove,
.ctl-app button.ctl-nav-toggle {
all: revert;
font-family: inherit !important;
font-weight: inherit !important;
text-transform: none !important;
letter-spacing: 0 !important;
box-shadow: none !important;
min-width: 0 !important;
min-height: 0 !important;
line-height: 1.5 !important;
cursor: pointer !important;
background: transparent;
border: 0;
padding: 0;
margin: 0;
color: inherit;
}
/* v1.8.0-alpha.7 : variables CSS partagées entre `.ctl-app` ET `.ctl-modal` →
le modal peut être déplacé sur (pour échapper aux transform Elementor)
tout en gardant accès aux variables (--ctl-text, --ctl-bg, etc.). */
.ctl-app,
.ctl-modal {
--ctl-bg: #ffffff;
--ctl-bg-soft: #f4f4f6;
--ctl-bg-frosted:rgba(154,158,170,.08);
--ctl-border: #e8e8ec;
--ctl-border-2: #d1d1d6;
--ctl-text: #010205;
--ctl-text-2: #3d3d42;
--ctl-text-mute: #6e6e73;
--ctl-text-soft: rgba(26, 26, 30, 0.7);
--ctl-accent: #010205;
--ctl-success: #00903d;
--ctl-radius-sm: 8px;
--ctl-radius: 12px;
--ctl-radius-lg: 24px;
--ctl-shadow-md: 0 6px 24px rgba(0,0,0,.06);
/* Typographie « Tesla » : Inter (chargé via Google Fonts) avec fallback Helvetica Neue / SF. */
--ctl-font: "Inter", "Helvetica Neue", Helvetica, Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.ctl-modal {
font-family: var(--ctl-font);
color: var(--ctl-text);
}
.ctl-app {
/* Force full-viewport (sortir de la contrainte e-con-inner d'Elementor) */
position: relative !important;
width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
max-width: 100vw !important;
background: var(--ctl-bg);
color: var(--ctl-text);
font-family: var(--ctl-font);
font-size: 16px;
line-height: 1.5;
overflow-x: hidden;
}
.ctl-app img { max-width: 100%; height: auto; display: block; }
.ctl-app button { font-family: inherit; cursor: pointer; }
/* ============== STICKY TOP BAR (desktop only) — style Porsche (v1.7.10) ==============
Mesurée au pixel sur configurator.porsche.com (911 GT3) :
- Hauteur barre : 86px (padding 15px 34px)
- Bouton : 56px de haut, radius 12px, padding 16px 28px, font 16px/400 */
.ctl-topbar {
display: none;
background: #fff;
border-bottom: 1px solid var(--ctl-border);
/* v1.9 : même ombre basse que le header WoodMart du site */
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .1);
position: sticky;
top: 0;
z-index: 50;
}
.ctl-topbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 15px clamp(20px, 2.5vw, 34px);
max-width: none;
/* v1.7.15 : height (et non min-height) pour empêcher le topbar de grandir
quand un modèle est sélectionné et que la vignette apparaît.
v1.9 : hauteur calée sur la barre blanche du header WoodMart (76px). */
height: 76px;
}
/* Bloc droite : prix + actions */
.ctl-topbar-right {
display: flex;
align-items: center;
gap: 24px;
}
/* Bouton "← Modèle" gauche : style link-pure Porsche */
.ctl-app button.ctl-topbar-model,
.ctl-topbar-model {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
background: transparent !important;
border: 0 !important;
/* v1.7.15 : padding vertical 0 pour rester ≤ 56px (= content area du topbar 86px) */
padding: 0 4px !important;
margin: 0 !important;
cursor: pointer !important;
font-family: inherit !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.3 !important;
color: var(--ctl-text) !important;
text-transform: none !important;
letter-spacing: 0 !important;
min-height: 0 !important;
text-align: left !important;
transition: opacity .15s !important;
max-width: 360px !important;
}
.ctl-app button.ctl-topbar-model:hover,
.ctl-topbar-model:hover { opacity: .65 !important; }
/* Thumb du modèle (v1.7.14) — effet "vignette" :
- cadre gris arrondi 100×56 plein (background-clip: border-box par défaut)
- image inset de 10px dans le cadre (background-origin: content-box + padding 10px) */
.ctl-topbar-model-thumb {
flex: 0 0 auto;
width: 100px;
height: 56px;
border-radius: 8px;
background-color: var(--ctl-bg-soft);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
background-origin: content-box;
padding: 10px;
box-sizing: border-box;
transition: opacity .15s;
}
.ctl-topbar-model.is-empty .ctl-topbar-model-thumb { display: none; }
.ctl-topbar-model-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* v1.8.0-alpha.1 : bloc gauche avec bouton modèle + lien vers landing */
.ctl-topbar-left {
display: flex;
align-items: center;
gap: 16px;
min-width: 0;
}
/* v1.9 : logo T-Lab à gauche de « Sélectionner un modèle » (desktop).
max-width calé sur le logo du header (150px), hauteur auto → aucune déformation.
Sélecteur 2 classes + !important pour battre le `img { max-width: 100% }` du thème
(sinon le logo s'affiche à sa taille réelle 772×105). */
/* Logo cliquable → accueil (desktop). Le lien se comporte comme l'ancien ![]()
dans le flex du topbar. */
.ctl-topbar-logo-link {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
text-decoration: none;
transition: opacity .15s;
}
.ctl-topbar-logo-link:hover { opacity: .8; }
.ctl-topbar .ctl-topbar-logo {
flex: 0 0 auto;
width: auto !important;
height: auto !important;
max-width: 150px !important;
display: block;
/* v1.9 : un peu d'air entre le logo et « Sélectionner un modèle » (en plus du gap:16) */
margin-right: 12px;
}
/* Lien "Voir les détails" → landing page modèle (architecture hybride) */
.ctl-topbar-model-details {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
color: var(--ctl-text-mute);
text-decoration: underline;
white-space: nowrap;
transition: color .15s;
}
.ctl-topbar-model-details:hover { color: var(--ctl-text); }
.ctl-topbar-model-details[hidden] { display: none; }
/* Chevron > visible uniquement quand aucun modèle n'est sélectionné */
.ctl-topbar-model-chevron {
flex: 0 0 auto;
color: var(--ctl-text);
display: none;
}
.ctl-topbar-model.is-empty .ctl-topbar-model-chevron { display: inline-block; }
.ctl-topbar-price {
display: flex;
flex-direction: column;
align-items: flex-end;
line-height: 1.1;
margin-right: 8px;
}
.ctl-topbar-amount {
font-size: 16px;
font-weight: 400;
color: var(--ctl-text);
white-space: nowrap;
line-height: 1.2;
}
.ctl-topbar-vat {
font-size: 11px;
color: var(--ctl-text-mute);
margin-top: 2px;
line-height: 1;
}
.ctl-topbar-actions {
display: flex;
gap: 12px;
align-items: center;
}
/* v1.9 : taille calée sur le bouton « Configurer ma Tesla » du header WoodMart
(42px de haut, padding 5/20, font 13/600, radius 5px). */
.ctl-app .ctl-topbar-btn,
.ctl-topbar-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
padding: 5px 20px !important;
border-radius: 5px !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 15.6px !important;
text-decoration: none !important;
border: 1px solid transparent !important;
cursor: pointer !important;
font-family: inherit !important;
text-transform: none !important;
letter-spacing: 0 !important;
min-height: 42px !important;
height: 42px !important;
white-space: nowrap !important;
transition: background .2s, color .2s, border-color .2s !important;
}
.ctl-app .ctl-topbar-btn-ghost,
.ctl-topbar-btn-ghost {
background: transparent !important;
color: var(--ctl-text) !important;
border-color: var(--ctl-text) !important;
}
.ctl-app .ctl-topbar-btn-ghost:hover,
.ctl-topbar-btn-ghost:hover {
background: var(--ctl-text) !important;
color: #fff !important;
}
.ctl-app .ctl-topbar-btn-primary,
.ctl-topbar-btn-primary {
background: var(--ctl-text) !important;
color: #fff !important;
border-color: var(--ctl-text) !important;
}
.ctl-app .ctl-topbar-btn-primary:hover,
.ctl-topbar-btn-primary:hover {
background: #2a2a30 !important;
border-color: #2a2a30 !important;
color: #fff !important;
}
.ctl-topbar-btn svg { flex-shrink: 0; width: 15px; height: 15px; }
/* Affichage uniquement desktop ≥ 1024px */
@media (min-width: 1024px) {
.ctl-topbar { display: block; }
/* Décale les sticky pour ne pas être cachées par la topbar (76px + 16px d'air) */
.ctl-app .ctl-stage { top: 92px !important; }
.ctl-app .ctl-summary-actions { top: 92px !important; }
/* v1.9 : clic sur « Sélectionner un modèle » (ou « Changer ») → le scrollIntoView
d'un accordéon s'arrête 16px sous la topbar sticky, pas dessous.
On retranche la hauteur de la barre admin WP (que scrollIntoView ajoute déjà
via html{margin-top}) pour atterrir au même endroit en admin ET en visiteur. */
.ctl-app .ctl-acc { scroll-margin-top: calc(92px - var(--wp-admin--admin-bar--height, 0px)); }
/* v1.9 : en desktop sur la page configurateur, la .ctl-topbar EST le header.
On masque la rangée logo/menu du header WoodMart (.whb-general-header), mais on
GARDE le bandeau du haut (.whb-top-bar : Paris/Montpellier/horaires).
Desktop only : sur mobile la .ctl-topbar est masquée → le header WoodMart reste. */
.whb-general-header { display: none !important; }
}
/* v1.9 : le conteneur Elementor qui porte le configurateur a un padding-top de 10px.
On l'annule pour coller le configurateur juste sous le header — desktop ET mobile
(sinon il reste un écart de 10px sous le header WoodMart en mobile). Règle globale. */
.e-con-inner:has(#ctl-app) { padding-top: 0 !important; }
/* ============== GRILLE PRINCIPALE (proportions Porsche : 65/30) ============== */
.ctl-main {
display: grid;
grid-template-columns: minmax(0, 1.95fr) minmax(420px, 0.85fr);
gap: clamp(20px, 2vw, 40px);
align-items: start;
max-width: none;
margin: 0;
padding: 24px clamp(16px, 2vw, 36px) 0;
}
/* ============== STAGE GAUCHE (visuel sticky) ============== */
.ctl-app { overflow-x: clip !important; overflow-y: visible !important; }
.ctl-stage {
position: sticky !important;
top: 24px !important;
align-self: start !important;
z-index: 20 !important;
}
.ctl-panel { z-index: 1 !important; }
.ctl-stage-inner {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: var(--ctl-bg-soft);
border-radius: var(--ctl-radius-lg);
overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.ctl-vehicle { position: relative; width: 100%; height: 100%; }
.ctl-vehicle-base {
width: 100%; height: 100%; object-fit: contain;
}
.ctl-vehicle-overlays {
position: absolute; inset: 0; pointer-events: none;
}
.ctl-vehicle-overlays img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: contain;
opacity: 0; transition: opacity .35s ease;
}
.ctl-vehicle-overlays img.is-visible { opacity: 1; }
/* Slider d'images principales — overlay au-dessus du placeholder */
.ctl-vehicle-slider {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
transition: opacity .25s ease;
z-index: 2;
touch-action: pan-y; /* autorise scroll vertical, capture swipe horizontal */
user-select: none;
-webkit-user-select: none;
cursor: grab;
/* GPU compositing : évite le repaint pendant le scroll mobile */
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
.ctl-vehicle-slider:active { cursor: grabbing; }
/* v1.8.19 : background neutre quand le slider est visible — sinon, avec background-size:
contain, l'image base du véhicule transparaissait dans les bandes vides (letterbox).
On masque la base vehicle pour que le slider d'option soit clairement seul à l'écran. */
.ctl-vehicle-slider.is-visible {
opacity: 1;
pointer-events: auto;
background: var(--ctl-bg-soft);
}
.ctl-vehicle-slide {
position: absolute;
inset: 0;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
opacity: 0;
transition: opacity .6s ease;
}
.ctl-vehicle-slide.is-active { opacity: 1; }
/* v1.8.22 : bande de miniatures sous le stage — réplique EXACTE des thumbs modale.
On cible via [data-stage-thumbs] (data attr indépendant de la classe) et on style
les