/* ====================================================================
   formules-premium.css : la section « Quatre chemins vers le même A »
   en scène de studio (variante premium, page variante-formules/).

   Une scène graphite neutre éclairée comme un studio : spot blanc froid,
   sol qui reflète la voiture, grain léger. Le configurateur compose le
   permis, le prix roule. Le rouge de la marque reste le seul accent.
   Sans JavaScript, la liste statique des quatre formules s'affiche ; le
   configurateur n'apparaît que sous .cfg-js (posée par un script en
   ligne juste après la section, donc avant le premier rendu).
   ==================================================================== */
.scene{
  --graphite:#0c0c0d; --graphite-2:#141416;
  --lumiere:222,230,240;           /* blanc froid du spot, en composantes */
  --ecrit:#f4f5f7; --ecrit-2:rgba(244,245,247,.64); --ecrit-3:rgba(244,245,247,.38);
  --trait:rgba(255,255,255,.12); --trait-2:rgba(255,255,255,.22);
  --sol:15%;                        /* hauteur de la ligne de sol dans le plateau */
  position:relative;z-index:1;color:var(--ecrit);padding:140px 0 72px;isolation:isolate
}

/* le fond : graphite neutre, aucune teinte brune ; l'entrée se fait par la lumière qui monte */
.scene-fond{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--graphite)}
.scene-grain{position:absolute;inset:0;opacity:.07;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}

/* le titre, recomposé pour la scène */
.scene-tete{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:32px;align-items:end}
.scene h2{font-size:clamp(40px,5vw,84px);line-height:1;letter-spacing:-.03em;font-weight:300;color:var(--ecrit);text-wrap:balance}
.scene h2 .l2{display:block;font-family:var(--serif);font-weight:300;color:var(--ecrit);letter-spacing:-.02em}
.scene h2 em{font-style:normal;color:var(--rouge)}
.scene-tete p{font-size:17px;line-height:1.5;color:var(--ecrit-2);max-width:34ch;justify-self:end;text-wrap:pretty}

/* le plateau : la voiture posée sur le sol, son reflet dessous */
/* la lumière du studio : un spot blanc froid derrière la voiture, et le sol
   qui le renvoie, sur toute la largeur de l'écran */
.plateau-lumiere{position:absolute;left:calc(50% - 50vw);top:0;bottom:0;width:100vw;pointer-events:none;will-change:opacity}
.plateau-spot{--l:min(1500px,118vw);position:absolute;left:calc(50% - var(--l) / 2);bottom:calc(var(--sol) - 4%);width:var(--l);aspect-ratio:1.8}
.plateau-spot i{position:absolute;inset:0;border-radius:50%;will-change:transform,opacity;
  background:radial-gradient(closest-side,rgba(var(--lumiere),.16),rgba(var(--lumiere),.065) 48%,rgba(var(--lumiere),0) 100%)}
.plateau-sol{position:absolute;left:0;right:0;top:calc(100% - var(--sol));height:clamp(240px,40vw,620px);
  background:
    radial-gradient(48% 38% at 50% 0,rgba(var(--lumiere),.085),rgba(var(--lumiere),0) 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 70px);mask-image:linear-gradient(to bottom,transparent,#000 70px)}
.scene-plateau{position:relative;height:clamp(250px,31vw,520px);margin-top:clamp(8px,2vw,32px)}
.voit-scene,.voit-pose{position:absolute;inset:0}
.voit{position:absolute;left:0;right:0;margin-inline:auto;bottom:var(--sol);width:min(64%,1040px);opacity:0;visibility:hidden}
.voit.est-la{opacity:1;visibility:visible}
.voit-auto{width:min(52%,850px)}
.voit-img{position:relative;z-index:1;width:100%;height:auto}
/* reflet : la même photo retournée sur la ligne de sol, qui s'éteint vite */
.voit-reflet{position:absolute;left:0;top:100%;width:100%;height:auto;transform:scaleY(-1);
  opacity:.2;filter:blur(1.5px);pointer-events:none;
  -webkit-mask-image:linear-gradient(to top,#000 0,rgba(0,0,0,.45) 14%,transparent 34%);
          mask-image:linear-gradient(to top,#000 0,rgba(0,0,0,.45) 14%,transparent 34%)}
/* la Toyota reçoit le même reflet retourné que la 208, posé sur la même ligne de sol (--sol) */
.voit-ombre{position:absolute;left:0;right:0;margin-inline:auto;bottom:calc(var(--sol) - 14px);width:min(66%,1080px);height:30px;
  border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.85),rgba(0,0,0,0));z-index:0}

/* sans JavaScript : la liste des quatre formules */
.scene-liste{list-style:none;border-top:1px solid var(--trait-2);margin-top:40px}
.scene-liste li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 32px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--trait)}
.scene-liste h3{font-size:22px;font-weight:400}
.scene-liste p{font-size:15px;line-height:1.45;color:var(--ecrit-2);margin-top:4px;text-wrap:pretty}
.sl-prix{display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin:0!important}
.sl-prix strong{font-family:var(--serif);font-weight:300;font-size:40px;color:var(--ecrit);font-variant-numeric:tabular-nums;white-space:nowrap}
.sl-prix span{font-size:14px;color:var(--ecrit-2);white-space:nowrap}
.scene-cfg{display:none}
.cfg-js .scene-liste{display:none}
.cfg-js .scene-cfg{display:grid}

/* le configurateur */
.scene-cfg{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"choix res" "appel res";grid-template-rows:auto 1fr;column-gap:clamp(32px,6vw,120px);row-gap:0;align-items:start;margin-top:clamp(28px,3vw,48px)}
.cfg-choix{grid-area:choix}
.cfg-resultat{grid-area:res}
.cfg-appel{grid-area:appel;justify-self:start;margin-top:clamp(20px,2vw,32px)}
.cfg-choix{display:flex;flex-direction:column;border-top:1px solid var(--trait-2)}
.cfg-pile{display:grid}
.cfg-pile > *{grid-area:1/1}
.cfg-groupe{border:0;margin:0;padding:18px 0;min-width:0;border-bottom:1px solid var(--trait);display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;gap:12px;
  transition:opacity .6s cubic-bezier(.23,1,.32,1),visibility 0s}
.cfg-groupe legend{float:left;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ecrit-3);padding:0}
.cfg-groupe.cache{opacity:0;visibility:hidden;transition:opacity .4s cubic-bezier(.4,0,.2,1),visibility 0s .4s}
.cfg-options{display:flex;flex-wrap:wrap;gap:6px}
.cfg-options label{position:relative;display:inline-flex;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cfg-options input{position:absolute;inset:0;opacity:0;margin:0;cursor:inherit}
.cfg-options span{position:relative;display:inline-flex;align-items:center;height:42px;padding:0 18px;border-radius:999px;font-size:15px;white-space:nowrap;color:var(--ecrit);opacity:.56;
  transition:opacity .5s cubic-bezier(.23,1,.32,1)}
/* le contour du choix : une couche à part, en opacité */
.cfg-options span::before{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.78);opacity:0;transform:scale(.94);
  transition:opacity .6s cubic-bezier(.23,1,.32,1),transform .6s cubic-bezier(.23,1,.32,1)}
.cfg-options label:hover span{opacity:.82}
.cfg-options input:checked + span{opacity:1}
.cfg-options input:checked + span::before{opacity:1;transform:none}
.cfg-options input:focus-visible + span{outline:2px solid var(--ecrit);outline-offset:3px}
.cfg-options input:disabled + span{opacity:.22;cursor:not-allowed}
.cfg-options label:has(input:disabled){cursor:not-allowed}

.cfg-resultat{display:flex;flex-direction:column;align-items:flex-start}
.cfg-tag{display:grid;height:18px;margin-bottom:6px}
.cfg-tag span{grid-area:1/1;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--rouge);opacity:0;transition:opacity .6s cubic-bezier(.23,1,.32,1)}
.cfg-tag span.est-la{opacity:1}
.cfg-prix{display:flex;align-items:flex-start;gap:.06em;font-family:var(--serif);font-weight:200;font-size:clamp(84px,9.6vw,168px);line-height:.92;letter-spacing:-.035em;color:var(--ecrit);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.cfg-euro{font-size:.34em;line-height:1;margin-top:.22em;padding-right:.1em;letter-spacing:0;color:var(--ecrit-2)}
/* le compteur du prix (formules-premium.js) : une fenêtre d'une ligne par
   colonne, découpée plutôt que masquée pour garder la ligne de base du texte */
/* quand le nombre de chiffres change, la colonne qui arrive ou qui part glisse
   sous le bord gauche du prix, jamais par-dessus la colonne voisine */
.cfg-prix{clip-path:inset(-.3em -50vw -.3em 0)}
.cpt{white-space:nowrap}
.cpt-col{display:inline-block}
.cpt-sep{display:inline-block;padding-right:.12em}   /* l'espace fine des milliers se perdait à ce corps */
/* la fenêtre de chaque colonne prend la hauteur réelle des chiffres (ascendantes comprises, marge de 0,29 em)
   sans changer la ligne : les marges négatives la ramènent au corps du prix */
.cpt-fen{position:relative;display:inline-block;text-align:center;clip-path:inset(0 -.1em);line-height:1.5;margin-block:-.29em}
.cpt-fantome{visibility:hidden}
.cpt-bande{position:absolute;left:0;right:0;top:0;will-change:transform}
.cpt-bande > span{display:block;text-align:center}
/* le code se paie à part : rappelé sous le prix des packs ; masqué pour le code seul, sa place gardée (la fiche ne saute pas) */
.cfg-code{margin-top:10px;font-size:15px;color:var(--ecrit-2);font-variant-numeric:tabular-nums}
.cfg-code[hidden]{display:block;visibility:hidden}
.cfg-fiche{width:100%;margin:clamp(20px,2vw,32px) 0 0;border-top:1px solid var(--trait-2);min-height:calc(4 * 45px + 1px)}
.cfg-fiche div{display:flex;justify-content:space-between;align-items:baseline;gap:24px;height:45px;border-bottom:1px solid var(--trait);align-items:center}
.cfg-fiche dt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ecrit-3)}
.cfg-fiche dd{font-size:15px;color:var(--ecrit);text-align:right;white-space:nowrap}

.scene-aides{margin-top:clamp(40px,4vw,64px);padding-top:18px;border-top:1px solid var(--trait);font-size:13px;line-height:1.7;color:var(--ecrit-3);text-wrap:pretty}
.scene-aides b{font-weight:400;color:var(--ecrit-2)}
.scene-aides span{white-space:nowrap}
.scene-aides i{font-style:normal;margin:0 .2em 0 .7em}

.scene .sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

@media (max-width:1100px){
  .scene-cfg{grid-template-columns:1fr;grid-template-areas:"choix" "res" "appel"}
  .cfg-resultat{margin-top:24px}
  .voit{width:min(76%,1040px)}
  .voit-auto{width:min(62%,850px)}
  .voit-ombre{width:min(78%,1080px)}
}
@media (max-width:900px){
  .scene{padding:80px 0 48px}
  .scene-tete{grid-template-columns:1fr;gap:16px}
  .scene-tete p{justify-self:start}
  /* la voiture pleine largeur */
  .scene-plateau{height:clamp(180px,52vw,420px);margin-inline:calc(-1 * clamp(16px,4vw,80px))}
  .voit{width:96%}
  .voit-auto{width:80%}
  .voit-ombre{width:96%;height:20px;bottom:calc(var(--sol) - 9px)}
  /* les choix en pastilles qui défilent */
  .cfg-groupe{grid-template-columns:1fr;gap:8px;padding:12px 0}
  .cfg-options{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;margin-inline:calc(-1 * clamp(16px,4vw,80px));padding-inline:clamp(16px,4vw,80px);scroll-padding-inline:clamp(16px,4vw,80px)}
  .cfg-options::-webkit-scrollbar{display:none}
  /* le ruban s'éteint sur le bord droit : on devine qu'il défile */
  .cfg-options{-webkit-mask-image:linear-gradient(to right,transparent,#000 16px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(to right,transparent,#000 16px,#000 calc(100% - 48px),transparent)}
  /* code seul : sur téléphone, la ligne « Boîte » ne garde pas sa place vide */
  .cfg-groupe.cache[data-groupe="boite"]{display:none}
  .cfg-fiche{min-height:0}
  .cfg-options label{scroll-snap-align:start;flex:none}
  .cfg-options span{height:40px;padding:0 16px;border:1px solid var(--trait)}
  .cfg-prix{font-size:clamp(84px,27vw,150px)}
  .scene-liste li{grid-template-columns:1fr}
  .sl-prix{align-items:flex-start}
}
/* sous 480 px, les choix passent à la ligne : rien n'est coupé, aucun défilement caché */
@media (max-width:480px){
  .cfg-options{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0;-webkit-mask-image:none;mask-image:none}
}