/* Phillias 32 — V8 (01/10/2026) · s'ajoute à v7.css, ne le remplace pas.
   Le mur de 6 m, la roue refaite, la demande en cinq étapes, la mise en situation. */

.visu-cache{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── puces communes ─────────────────────────────────────────────────────── */
.puce{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 18px;border-radius:var(--r-rond);
  border:1.5px solid rgb(250 247 248/.22);background:rgb(250 247 248/.04);color:var(--blanc);
  font:600 .95rem/1.1 var(--texte);cursor:pointer;transition:background var(--rapide),border-color var(--rapide),color var(--rapide)}
.puce:hover{border-color:rgb(250 247 248/.5)}
.puce.est-on{background:var(--accent);border-color:var(--accent);color:var(--encre)}
.puce i{font-style:normal;font-variant-numeric:tabular-nums;opacity:.75;font-weight:500}
.puce--carre{display:grid;gap:2px;justify-items:start;padding:10px 18px;border-radius:var(--r-petit);min-height:58px}
.puce--carre b{font-family:var(--display);font-weight:400;font-size:1rem;letter-spacing:-.01em}
.puce--carre span{font-size:.8rem;opacity:.8}

/* ── 00 · LE MUR ────────────────────────────────────────────────────────── */
.mur{padding-top:clamp(108px,15vh,170px);padding-bottom:clamp(56px,8vh,110px);overflow:hidden}
.mur__tete{display:grid;gap:0}
.mur__titre{font-size:clamp(2.35rem,6.4vw,6.2rem)}
.mur__scene{--lueur:rgb(255 190 90);position:relative;margin:clamp(20px,4vh,48px) 0 0;padding:0}
.mur__lueur{position:absolute;left:50%;top:6%;width:min(1500px,120vw);height:92%;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 42% at 50% 46%,color-mix(in srgb,var(--lueur) 34%,transparent),transparent 72%);
  transition:background .6s linear;filter:saturate(1.2)}
.mur__plateau{position:relative;width:100%;max-width:1680px;margin-inline:auto;height:58vw;max-height:640px}
.mur__bloc{position:absolute;bottom:0;--m:40px}
.mur__bloc[hidden]{display:none}
.mur__pied{position:absolute;bottom:0;width:calc(var(--m)*.3);height:100%;
  background:repeating-linear-gradient(45deg,transparent 0 5px,rgb(180 170 185/.38) 5px 6.5px),
             repeating-linear-gradient(-45deg,transparent 0 5px,rgb(180 170 185/.38) 5px 6.5px);
  border-inline:2px solid rgb(200 190 205/.55)}
.mur__pied--g{left:0}.mur__pied--d{right:0}
.mur__pied::after{content:"";position:absolute;bottom:-2px;left:50%;width:calc(var(--m)*.9);height:4px;transform:translateX(-50%);
  background:rgb(200 190 205/.6);border-radius:2px}
.mur__poutre{position:absolute;top:0;left:0;right:0;height:calc(var(--m)*.3);
  background:repeating-linear-gradient(45deg,transparent 0 5px,rgb(180 170 185/.38) 5px 6.5px);
  border-block:2px solid rgb(200 190 205/.55)}
.mur__ecran{position:absolute;left:calc(var(--m)*.3);right:calc(var(--m)*.3);bottom:var(--m);height:calc(var(--m)*2);
  background:#050304;outline:2px solid #1a1519;
  box-shadow:0 0 calc(var(--m)*.6) color-mix(in srgb,var(--lueur) 55%,transparent),
             0 0 calc(var(--m)*1.8) color-mix(in srgb,var(--lueur) 22%,transparent)}
.mur__toile{display:block;width:100%;height:100%;image-rendering:pixelated}
.mur__humain{position:absolute;bottom:0;width:auto;fill:#2a2229;stroke:rgb(250 247 248/.28);stroke-width:1.2}
.mur__sol{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:rgb(250 247 248/.16)}
.mur__sol::after{content:"";position:absolute;left:8%;right:8%;top:2px;height:clamp(40px,8vw,120px);
  background:radial-gradient(50% 100% at 50% 0,color-mix(in srgb,var(--lueur) 28%,transparent),transparent 80%)}
.mur__cote{position:absolute;color:var(--gris);font:600 .8rem/1 var(--mono);letter-spacing:.06em;pointer-events:none}
.mur__cote b{font-weight:600;background:var(--noir);padding:2px 6px;border-radius:4px}
.mur__cote--l{height:14px;display:flex;justify-content:center;align-items:center;
  border-inline:1.5px solid rgb(250 247 248/.5);
  background:linear-gradient(rgb(250 247 248/.5),rgb(250 247 248/.5)) center/100% 1.5px no-repeat}
.mur__cote--h{width:14px;display:flex;align-items:center;justify-content:center;
  border-block:1.5px solid rgb(250 247 248/.5);
  background:linear-gradient(rgb(250 247 248/.5),rgb(250 247 248/.5)) center/1.5px 100% no-repeat}
.mur__cote--p{bottom:0;width:14px;display:flex;align-items:center;justify-content:center;
  border-block:1.5px solid rgb(250 247 248/.35);
  background:linear-gradient(rgb(250 247 248/.35),rgb(250 247 248/.35)) center/1.5px 100% no-repeat}
.mur__cote--h b,.mur__cote--p b{writing-mode:vertical-rl;transform:rotate(180deg);padding:6px 2px}
.mur__leg{margin:clamp(22px,3vh,36px) auto 0;max-width:var(--wrap);padding-inline:var(--pad);
  color:var(--gris-sourd);font-size:var(--t-micro);text-align:center}
.mur__commandes{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:end;justify-content:center;margin-top:clamp(18px,3vh,30px)}
.mur__scenes,.mur__configs{display:flex;flex-wrap:wrap;gap:8px}
.mur__saisie{display:grid;gap:6px;min-width:min(280px,100%)}
.mur__saisie span{font:600 var(--t-ref)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.mur__saisie input{min-height:48px;padding:0 16px;border-radius:var(--r-petit);border:1.5px solid rgb(250 247 248/.22);
  background:var(--noir-2);color:var(--blanc);font:600 1rem var(--texte)}
.mur__saisie input:focus{outline:none;border-color:var(--accent)}
.mur__bas{display:flex;flex-wrap:wrap;gap:12px 48px;align-items:center;justify-content:space-between}
.mur__bas .hero__actions{margin-top:clamp(26px,4vh,44px)}
@media (max-width:699px){
  .mur__commandes{justify-content:flex-start}
  .mur__cote{font-size:.7rem}
  .mur__saisie{flex:1 1 100%}
}

/* ── 00b · LA ROUE ──────────────────────────────────────────────────────── */
.roue8{display:grid;gap:clamp(28px,4vw,72px);grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;position:relative;z-index:1}
@media (max-width:959px){.roue8{grid-template-columns:1fr}.roue8__zone{order:-1}}
.roue8__fiche{--roue-c:var(--violet);margin-top:clamp(18px,3vh,32px);padding:clamp(20px,2.4vw,30px);border-radius:var(--r);
  background:rgb(11 7 8/.78);border:1.5px solid color-mix(in srgb,var(--roue-c) 55%,transparent);
  box-shadow:0 0 60px color-mix(in srgb,var(--roue-c) 18%,transparent);backdrop-filter:blur(6px)}
.roue8__fiche.est-neuve{animation:fiche8 .42s var(--ease)}
@keyframes fiche8{from{opacity:.2;transform:translateY(8px)}}
.roue8__num{margin:0;font:600 var(--t-ref)/1 var(--mono);letter-spacing:.16em;color:var(--roue-c)}
.roue8__titre{margin:.35em 0 .3em;font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1.05}
.roue8__texte{margin:0;color:#CFC4D2;max-width:52ch}
.roue8__prix{margin:.8em 0 0;font-weight:600;color:var(--roue-c);font-variant-numeric:tabular-nums}
.roue8__actions{display:flex;flex-wrap:wrap;gap:10px;margin:1.1em 0 0}
.roue8__zone{display:grid;justify-items:center;gap:14px}
.roue8__roue{--roue-c:var(--violet);position:relative;width:min(560px,86vw);aspect-ratio:1;touch-action:pan-y;
  user-select:none;-webkit-user-select:none;cursor:grab;border-radius:50%;outline-offset:8px}
.roue8__roue:active{cursor:grabbing}
.roue8__roue:focus-visible{outline:3px solid var(--roue-c)}
.roue8__svg{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 0 28px color-mix(in srgb,var(--roue-c) 30%,transparent))}
.roue8__secteur{transition:opacity var(--moyen)}
.roue8__part{cursor:pointer}
.roue8__part:not(.est-actif) .roue8__secteur{opacity:.62}
.roue8__filet{stroke-width:2;opacity:.55}
.roue8__part.est-actif .roue8__filet{stroke-width:3.5;opacity:1}
.roue8__txt{fill:#FAF7F8;font-family:var(--display);text-anchor:middle;letter-spacing:.02em;pointer-events:none}
.roue8__bille{opacity:.28;transition:opacity 90ms}
.roue8__bille.est-on{opacity:1}
.roue8__repere{position:absolute;left:50%;top:-14px;width:0;height:0;transform:translateX(-50%);z-index:2;
  border-left:15px solid transparent;border-right:15px solid transparent;border-top:28px solid var(--blanc);
  filter:drop-shadow(0 2px 6px rgb(0 0 0/.6));transform-origin:50% 0}
.roue8__repere.est-clac{animation:clac .16s ease-out}
@keyframes clac{40%{transform:translateX(-50%) rotate(-14deg)}}
.roue8__moyeu{position:absolute;inset:31%;border-radius:50%;display:grid;place-items:center;pointer-events:none;
  background:radial-gradient(circle at 36% 30%,#FCFAFB,#E7E1E4);box-shadow:0 0 0 6px rgb(11 7 8/.9),0 10px 40px rgb(0 0 0/.5)}
.roue8__moyeu .logo{width:78%}
.roue8__aide{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:center;margin:0;color:var(--gris);font-size:var(--t-petit)}
.roue8__liste{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;max-width:560px}
.roue8__liste a{color:var(--gris);text-decoration:none;font-size:var(--t-petit);padding:4px 2px;border-bottom:1.5px solid transparent}
.roue8__liste a.est-actif{color:var(--blanc);border-color:var(--roue-c,var(--violet))}
@media (prefers-reduced-motion:reduce){.roue8__fiche.est-neuve,.roue8__repere.est-clac{animation:none}}

/* ── 04 · EN SITUATION ──────────────────────────────────────────────────── */
.situ{display:grid;gap:clamp(14px,1.6vw,24px);grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));margin-top:clamp(28px,4vh,48px)}
.situ figure{margin:0;display:grid;gap:10px}
.situ video{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);background:#120d11;display:block}
.situ figcaption{display:grid;gap:2px}
.situ figcaption b{font-family:var(--display);font-weight:400;font-size:1.1rem}
.situ figcaption span{color:var(--gris-sourd);font-size:var(--t-micro)}
.montages{display:grid;gap:clamp(14px,2vw,28px);grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));margin-top:clamp(28px,4vh,48px)}
.montage{padding:clamp(18px,2vw,28px);border-radius:var(--r);background:var(--noir-2);border:1px solid var(--filet);display:grid;gap:12px}
.montage__schema{display:flex;align-items:flex-end;justify-content:center;gap:6%;height:110px;padding-bottom:4px;border-bottom:1.5px solid rgb(250 247 248/.2)}
.montage__schema i{display:block;background:linear-gradient(120deg,#3b2a08,#FFC53D 60%,#ffe6a3);border-radius:2px;
  box-shadow:0 0 24px rgb(255 197 61/.35);margin-bottom:22%}
.montage__schema .un{width:84%;aspect-ratio:3/1}
.montage__schema .demi{width:38%;aspect-ratio:3/2}
.montage__schema svg{height:52%;width:auto;fill:#2a2229;stroke:rgb(250 247 248/.35);stroke-width:1.2;flex:0 0 auto}
.montage h3{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,1.9vw,1.7rem)}
.montage p{margin:0;color:var(--gris)}
.montage .geant{margin:0}

/* ── 08 · LA DEMANDE EN CINQ ÉTAPES ─────────────────────────────────────── */
.resa{display:grid;gap:clamp(20px,2.4vw,36px);grid-template-columns:minmax(0,1fr) 380px;grid-template-areas:"fil fil" "form recap";align-items:start}
@media (max-width:1100px){.resa{grid-template-columns:1fr;grid-template-areas:"fil" "form" "recap"}}
.resa.est-fini{grid-template-areas:"fini"!important;grid-template-columns:1fr!important}
.resa.est-fini>:not(.resa__fini){display:none}
.resa__fil{grid-area:fil;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.resa__fil button{width:100%;display:flex;gap:10px;align-items:center;justify-content:center;min-height:52px;padding:0 10px;
  border-radius:var(--r-petit);border:1.5px solid rgb(5 3 4/.25);background:transparent;color:var(--encre);
  font:600 .95rem var(--texte);cursor:pointer}
.resa__fil b{font-family:var(--display);font-weight:400;font-size:1.15rem}
.resa__fil button[aria-current]{background:var(--encre);color:#FAF7F8;border-color:var(--encre)}
.resa__fil button.est-fait:not([aria-current]){background:rgb(5 3 4/.1)}
@media (max-width:640px){.resa__fil span{display:none}.resa__fil button{min-height:46px}}
.resa__form{grid-area:form;background:var(--noir);color:var(--blanc);border-radius:var(--r);padding:clamp(20px,2.6vw,40px);
  display:grid;gap:0;min-width:0}
.resa__etape{display:none;border:0;margin:0;padding:0;min-width:0}
.resa__etape.est-on{display:grid;gap:14px;animation:etape8 .34s var(--ease)}
@keyframes etape8{from{opacity:0;transform:translateX(14px)}}
@media (prefers-reduced-motion:reduce){.resa__etape.est-on{animation:none}}
.resa__etape--grille.est-on{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:18px}
.resa__etape legend{float:left;width:100%;padding:0;margin:0 0 6px;font-family:var(--display);font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1.05;outline:none}
.resa__etape--grille legend{grid-column:1/-1}
.resa__q{margin:10px 0 0;font:600 var(--t-ref)/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.resa__q b{color:var(--magenta-txt);font-family:var(--texte);letter-spacing:0;text-transform:none;font-size:.95rem}
.resa__q small{letter-spacing:0;text-transform:none;font-family:var(--texte);font-size:.85rem}
.resa__cartes{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(170px,100%),1fr))}
.carte{display:grid;gap:4px;justify-items:start;text-align:left;padding:16px;min-height:86px;border-radius:var(--r-petit);cursor:pointer;
  border:1.5px solid rgb(250 247 248/.16);background:var(--noir-2);color:var(--blanc);font:inherit;
  transition:border-color var(--rapide),background var(--rapide),transform var(--rapide)}
.carte:hover{border-color:rgb(250 247 248/.45)}
.carte:active{transform:scale(.98)}
.carte b{font-family:var(--display);font-weight:400;font-size:1.1rem}
.carte span{color:var(--gris-sourd);font-size:.85rem}
.carte.est-on{background:var(--magenta);border-color:var(--magenta);color:var(--encre)}
.carte.est-on span{color:rgb(5 3 4/.75)}
.resa__choix{display:flex;flex-wrap:wrap;gap:8px}
.resa .puce.est-on{background:var(--magenta);border-color:var(--magenta);color:var(--encre)}
.resa__case{display:flex;gap:10px;align-items:center;font-size:var(--t-petit);color:var(--gris);cursor:pointer}
.resa__case input{width:20px;height:20px;accent-color:var(--magenta)}
.resa__curseur{width:100%;accent-color:var(--magenta);min-height:36px}
.resa .cal{color:var(--blanc)}
.resa .duree__b{border-color:rgb(250 247 248/.25);color:var(--blanc);background:transparent}
.resa .duree__b.est-on{background:var(--magenta);border-color:var(--magenta);color:var(--encre)}
.resa .cal__legende{color:var(--gris)}
.resa .cal__resume{margin:0;color:var(--blanc)}
.resa__erreur{margin:14px 0 0;min-height:1.4em;color:var(--magenta-txt);font-weight:600}
.resa__erreur:empty{margin:0;min-height:0}
.resa__nav{display:flex;justify-content:space-between;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid var(--filet)}
.resa__nav [data-suiv]{margin-left:auto;background:var(--magenta);color:var(--encre)}
.resa__recap{grid-area:recap;position:sticky;top:96px;padding:clamp(20px,2vw,28px);border-radius:var(--r);
  background:rgb(5 3 4/.08);border:1.5px solid rgb(5 3 4/.3);color:var(--encre)}
@media (max-width:1100px){.resa__recap{position:static}}
.resa__recap .oeil{color:rgb(5 3 4/.68)}
.resa__lignes{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:12px 0 0}
.resa__lignes dt{font:600 var(--t-ref)/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgb(5 3 4/.62)}
.resa__lignes dd{margin:0;font-weight:600;text-align:right}
.resa__lignes dd.est-vide{opacity:.4;font-weight:500}
.resa__total{margin:18px 0 6px;padding-top:14px;border-top:1.5px solid rgb(5 3 4/.3)}
.resa__total p{margin:0;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.resa__total b{font-family:var(--display);font-weight:400;font-size:clamp(1.8rem,2.6vw,2.4rem);font-variant-numeric:tabular-nums}
.resa__plus{font-size:var(--t-petit);margin-top:4px!important;color:rgb(5 3 4/.78)}
.resa__recap .recap__ligne{color:var(--encre);border-color:rgb(5 3 4/.2)}
.resa__recap .recap__ligne b{color:var(--encre)}
.resa__note{margin:12px 0 0;font-size:var(--t-micro);color:rgb(5 3 4/.72)}
.resa__fini{grid-area:fini;background:var(--noir);color:var(--blanc);border-radius:var(--r);padding:clamp(24px,4vw,56px);outline:none}
.resa__fini h3{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,3vw,2.6rem);line-height:1.05;margin:.3em 0}
.resa__fini .oeil{color:var(--magenta-txt)}
.resa__fini p{color:#CFC4D2}

/* ── bulle « ajouté à votre demande » ──────────────────────────────────── */
.bulle8{position:fixed;left:50%;bottom:22px;z-index:60;transform:translate(-50%,140%);margin:0;max-width:calc(100vw - 32px);
  padding:12px 20px;border-radius:var(--r-rond);background:var(--blanc);color:var(--encre);font-weight:600;
  box-shadow:0 10px 40px rgb(0 0 0/.45);transition:transform .32s var(--ease);pointer-events:none}
.bulle8.est-on{transform:translate(-50%,0)}
.roue8 .mega{font-size:clamp(2rem,3.5vw,3.7rem)}
.roue8 .mega .mot>span{white-space:normal}

/* le calendrier de la V7 (encre noire sur magenta) repeint pour la carte noire de la demande */
.resa .cal__nav button{border-color:rgb(250 247 248/.3);color:var(--blanc)}
.resa .cal__nav button:hover:not([disabled]){background:rgb(250 247 248/.12)}
.resa .cal__jours span{color:rgb(250 247 248/.55)}
.resa .cal__c{border-color:rgb(250 247 248/.2);color:var(--blanc)}
.resa .cal__c:hover:not([disabled]):not([data-vide]){background:rgb(250 247 248/.12)}
.resa .cal__c::after{background:rgb(250 247 248/.5)}
.resa .cal__c[data-etat="demande"]{background:repeating-linear-gradient(45deg,rgb(250 247 248/.22) 0 2px,transparent 2px 7px)}
.resa .cal__c[data-etat="indisponible"],.resa .cal__c[disabled]{color:rgb(250 247 248/.35);background:rgb(250 247 248/.05);border-color:rgb(250 247 248/.1)}
.resa .cal__c[data-etat="indisponible"]::before{background:linear-gradient(to top right,transparent calc(50% - 1px),rgb(250 247 248/.4) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px))}
.resa .cal__c[data-auj]{box-shadow:inset 0 -3px 0 0 var(--magenta)}
.resa .cal__c[data-plage]{background:rgb(255 61 139/.55);color:var(--blanc)}
.resa .cal__c[data-choisi]{background:var(--magenta);color:var(--encre)}
.resa .cal__legende{color:rgb(250 247 248/.7)}
.resa .cal__legende i{border-color:rgb(250 247 248/.35)}
.resa .cal__legende i.l-demande{background:repeating-linear-gradient(45deg,rgb(250 247 248/.3) 0 2px,transparent 2px 7px)}
.resa .cal__legende i.l-indispo{background:rgb(250 247 248/.12)}
.resa .cal__legende i.l-choisi{background:var(--magenta)}
.resa .cal__note{color:rgb(250 247 248/.7)}
.resa .cal__resume{color:var(--blanc)}
.resa .cal__resume--choisi{color:var(--magenta-txt)}