/* UX/UI DESIGN — blocs propres à la page (24/10/2026). Histoire : « le désordre devient évidence ».
   Pôle Webcraft Studio (argent) ; mercure en rubans, lissé en soie. */

/* ---------- Besoins : des interrupteurs d'interface ---------- */
.u-reglages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.u-reglages button{display:flex;align-items:center;gap:18px;width:100%;padding:22px 24px;border-radius:18px;border:1px solid var(--w-filet);background:#0E1016;text-align:left;font:inherit;font-size:clamp(16px,1.25vw,19px);line-height:1.4;color:var(--w-gris);cursor:pointer;transition:border-color .4s,color .4s,background .4s}
.u-switch{position:relative;flex:none;width:52px;height:30px;border-radius:999px;background:#2A2E39;transition:background .4s}
.u-switch::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#F7FAFF;box-shadow:0 2px 6px rgba(0,0,0,.4);transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.u-reglages [aria-checked="true"]{border-color:rgba(220,229,242,.35);color:var(--w-blanc);background:linear-gradient(120deg,rgba(220,229,242,.08),#0E1016)}
.u-reglages [aria-checked="true"] .u-switch{background:linear-gradient(90deg,#AEBBCE,#F7FAFF)}
.u-reglages [aria-checked="true"] .u-switch::after{transform:translateX(22px);background:#0E1016}

/* ---------- Le désordre devient évidence ----------
   data-etape sur la section : 1 vrac · 2 wireframe aligné · 3 UI en couleurs · 4 mobile · 5 prototype (curseur) · 6 prêt pour Webflow. Sans JS : 6. */
.u-ordre__grille{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(48px,6vw,112px);align-items:start}
.u-ordre__scene{position:sticky;top:clamp(70px,10vh,120px);display:flex;justify-content:center}
.u-plan{position:relative;width:100%;max-width:640px;aspect-ratio:4/3;border-radius:22px;border:1px dashed var(--w-filet-fort);background:#0C0D11;transition:max-width .9s var(--w-ease),aspect-ratio .9s,border-color .6s,background .6s;overflow:hidden}
.u-bloc{position:absolute;border-radius:10px;border:1px dashed rgba(220,229,242,.35);background:transparent;transform:translate(var(--dx),var(--dy)) rotate(var(--r));transition:all .9s cubic-bezier(.3,1.2,.5,1)}
/* Positions rangées (desktop) */
.u-bloc--nav{left:5%;right:5%;top:5%;height:7%}
.u-bloc--titre{left:5%;width:52%;top:18%;height:9%}
.u-bloc--texte{left:5%;width:40%;top:31%;height:10%}
.u-bloc--bouton{left:5%;width:24%;top:46%;height:9%;border-radius:999px;display:grid;place-items:center}
.u-bloc--bouton i{font-style:normal;font-size:11px;font-weight:700;color:transparent;white-space:nowrap;transition:color .6s}
.u-bloc--image{left:60%;right:5%;top:18%;height:37%}
.u-bloc--carte{top:62%;height:30%;width:28%}
.u-bloc--c1{left:5%}.u-bloc--c2{left:36%}.u-bloc--c3{left:67%}
[data-etape]:not([data-etape="1"]) .u-bloc{transform:none}
[data-etape="2"] .u-bloc{border-style:solid;background:rgba(220,229,242,.07)}
[data-etape="3"] .u-plan,[data-etape="5"] .u-plan,[data-etape="6"] .u-plan{border-style:solid;border-color:rgba(220,229,242,.2);background:#11131A}
[data-etape="3"] .u-bloc,[data-etape="4"] .u-bloc,[data-etape="5"] .u-bloc,[data-etape="6"] .u-bloc{border-color:transparent}
[data-etape="3"] .u-bloc--nav,[data-etape="4"] .u-bloc--nav,[data-etape="5"] .u-bloc--nav,[data-etape="6"] .u-bloc--nav{background:rgba(220,229,242,.1)}
[data-etape="3"] .u-bloc--titre,[data-etape="4"] .u-bloc--titre,[data-etape="5"] .u-bloc--titre,[data-etape="6"] .u-bloc--titre{background:linear-gradient(90deg,#F7FAFF,#AEBBCE)}
[data-etape="3"] .u-bloc--texte,[data-etape="4"] .u-bloc--texte,[data-etape="5"] .u-bloc--texte,[data-etape="6"] .u-bloc--texte{background:repeating-linear-gradient(180deg,rgba(220,229,242,.28) 0 6px,transparent 6px 14px)}
[data-etape="3"] .u-bloc--bouton,[data-etape="4"] .u-bloc--bouton,[data-etape="5"] .u-bloc--bouton,[data-etape="6"] .u-bloc--bouton{background:#F7FAFF}
[data-etape="3"] .u-bloc--bouton i,[data-etape="4"] .u-bloc--bouton i,[data-etape="5"] .u-bloc--bouton i,[data-etape="6"] .u-bloc--bouton i{color:#0E1016}
[data-etape="3"] .u-bloc--image,[data-etape="4"] .u-bloc--image,[data-etape="5"] .u-bloc--image,[data-etape="6"] .u-bloc--image{background:url("../images/mercure-rubans-volet.jpg") center/cover;filter:grayscale(.3)}
[data-etape="3"] .u-bloc--carte,[data-etape="4"] .u-bloc--carte,[data-etape="5"] .u-bloc--carte,[data-etape="6"] .u-bloc--carte{background:linear-gradient(160deg,rgba(220,229,242,.14),rgba(220,229,242,.04))}
/* Mobile : le plan se resserre et les blocs s'empilent */
[data-etape="4"] .u-plan{max-width:300px;aspect-ratio:9/16;border-radius:34px;border:8px solid #1B1E26}
[data-etape="4"] .u-bloc--nav{left:7%;right:7%;top:4%;height:5%}
[data-etape="4"] .u-bloc--image{left:7%;right:7%;top:12%;height:22%}
[data-etape="4"] .u-bloc--titre{left:7%;width:86%;top:37%;height:6%}
[data-etape="4"] .u-bloc--texte{left:7%;width:70%;top:46%;height:8%}
[data-etape="4"] .u-bloc--bouton{left:7%;width:86%;top:57%;height:6%}
[data-etape="4"] .u-bloc--c1{left:7%;width:86%;top:67%;height:12%}
[data-etape="4"] .u-bloc--c2{left:7%;width:86%;top:82%;height:12%}
[data-etape="4"] .u-bloc--c3{opacity:0}
/* Prototype : un curseur va cliquer le bouton */
.u-curseur{position:absolute;left:70%;top:80%;width:18px;height:18px;border-radius:50%;background:#F7FAFF;box-shadow:0 0 0 6px rgba(247,250,255,.18);opacity:0;transition:opacity .4s}
[data-etape="5"] .u-curseur{opacity:1;animation:u-clic 2.6s ease-in-out infinite}
@keyframes u-clic{0%{left:70%;top:80%}45%{left:16%;top:50%;transform:scale(1)}55%{transform:scale(.7);box-shadow:0 0 0 14px rgba(247,250,255,.25)}70%{transform:scale(1)}100%{left:16%;top:50%}}
[data-etape="5"] .u-bloc--bouton{animation:u-bouton 2.6s ease-in-out infinite}
@keyframes u-bouton{50%,60%{box-shadow:0 0 0 6px rgba(220,229,242,.35)}}
.u-plan__badge{position:absolute;right:14px;bottom:14px;padding:6px 12px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#0E1016;background:#F7FAFF;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s var(--w-ease)}
[data-etape="6"] .u-plan__badge{opacity:1;transform:none}
.u-etapes{list-style:none;margin:0;padding:0}
.u-etapes li{min-height:clamp(260px,44vh,440px);opacity:.3;transition:opacity .6s var(--w-ease)}
.u-etapes li.est-actif{opacity:1}
.u-etapes span{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--w-argent)}
.u-etapes h3{margin:14px 0 14px;max-width:20ch;font-size:clamp(26px,2.4vw,40px);font-weight:500;letter-spacing:-.02em;line-height:1.15}
.u-etapes p{margin:0;max-width:38ch;font-size:clamp(17px,1.3vw,20px);line-height:1.55;color:var(--w-gris)}

/* ---------- Profils : fiches persona ---------- */
.u-personas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.u-personas li{padding:24px;border-radius:20px;border:1px solid var(--w-filet);background:linear-gradient(180deg,#12141B,#0C0D11);transition:border-color .4s,transform .5s var(--w-ease)}
.u-personas li:hover{border-color:rgba(220,229,242,.3);transform:translateY(-4px)}
.u-personas__tete{display:flex;align-items:center;gap:14px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px dashed var(--w-filet-fort)}
.u-personas__tete > b{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#F7FAFF,#7D8AA0);color:#0E1016;font-size:15px;font-weight:700}
.u-personas__tete strong{display:block;font-size:17px;line-height:1.25}
.u-personas__tete span{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--w-gris-doux)}
.u-personas dl{margin:0}
.u-personas dt{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--w-gris)}
.u-personas dd{margin:8px 0 0;font-size:16px;line-height:1.55;color:var(--w-blanc)}

@media (max-width:1100px){
  .u-ordre__grille{grid-template-columns:1fr}
  .u-ordre__scene{position:relative;top:0}
  .u-etapes li{min-height:0;padding:22px 0;opacity:1}
  .u-reglages{grid-template-columns:1fr}
  .u-personas{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){.u-curseur,.u-bloc--bouton{animation:none}}
/* 24/10 (audit Studio) : au départ, les blocs du zonage étaient presque invisibles ; tracé plus net, léger fond. */
.u-bloc{border-color:rgba(220,229,242,.62);background:rgba(220,229,242,.035)}
.u-plan{border-color:rgba(220,229,242,.28)}