/* ==========================================================
   Système de design commun (accueil + espace client)
   ========================================================== */
:root{
  --bg:#FFFFFF;
  --surface:#F6F6F4;
  --ink:#0E0E10;
  --muted:#6B6B72;
  --line:#ECECEE;
  --amber:#7FC0FA;
  --field:#B4B4BC;          /* bord des champs, assez marqué pour être vu */
  --ph:#ECECEE;             /* rectangle « photo à venir » */
  --on-dark-muted:#A9A9B2;

  --ease:cubic-bezier(0.22,1,0.36,1);
  --ease-in:cubic-bezier(0.55,0,0.8,0.25);
  --spring:cubic-bezier(0.34,1.3,0.64,1);
  --spring:linear(0, 0.0577, 0.1898, 0.35, 0.5093, 0.6513, 0.7685, 0.8593, 0.9255, 0.9709, 0.9997, 1.016, 1.0236, 1.0254, 1.0237, 1.0203, 1.0162, 1.0122, 1.0086, 1.0057, 1.0034, 1.0018, 1.0007, 1, 1);

  --r:20px;
  --r-sm:14px;
  --r-lg:32px;

  --sh-1:0 1px 1px rgba(14,14,16,.03),0 2px 4px rgba(14,14,16,.04);
  --sh-2:0 1px 2px rgba(14,14,16,.04),0 4px 10px rgba(14,14,16,.05),0 14px 28px -6px rgba(14,14,16,.08);
  --sh-3:0 2px 4px rgba(14,14,16,.04),0 10px 20px rgba(14,14,16,.06),0 28px 56px -12px rgba(14,14,16,.12),0 56px 112px -40px rgba(14,14,16,.18);

  --gut:20px;
  --header-h:64px;
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --sar:env(safe-area-inset-right,0px);
}
@media (min-width:640px){:root{--gut:32px}}
@media (min-width:960px){:root{--gut:48px;--header-h:76px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-gutter:stable;scroll-padding-top:calc(var(--header-h) + var(--sat) + 12px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html.is-locked,html.is-locked body{overflow:hidden}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:17px;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
[hidden]{display:none!important}
img,svg{display:block}
img{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;background:none;border:0;padding:0;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:3px;-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-0.035em;line-height:1.05}
p,ul,ol,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
::selection{background:rgba(127,192,250,.22)}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nowrap{white-space:nowrap}

.ico{width:20px;height:20px;flex:none}

.wrap{width:100%;max-width:calc(1200px + 2 * var(--gut));margin-inline:auto;padding-inline:max(var(--gut),var(--sal)) max(var(--gut),var(--sar))}

/* ---------- Lien d'évitement, mentions à confirmer, soulignement à la main ---------- */
.skip{position:absolute;left:12px;top:-60px;z-index:300;min-height:48px;display:inline-flex;align-items:center;padding:0 18px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;text-decoration:none}
.skip:focus{top:calc(8px + var(--sat))}
mark.tbc{background:rgba(127,192,250,.16);color:var(--ink);border-radius:6px;padding:1px 5px;font-weight:600;white-space:nowrap}
.hl{position:relative;display:inline-block;color:var(--amber)}
.hl-line{position:absolute;left:-2%;bottom:-.1em;width:104%;height:.27em;overflow:visible;pointer-events:none}
.hl-line path{fill:none;stroke:var(--amber);stroke-width:3.3;stroke-linecap:round;stroke-linejoin:round}
html.js .hl-line path{stroke-dasharray:1 1.02;stroke-dashoffset:1.01}
html.js .is-drawn .hl-line path{stroke-dashoffset:0;transition:stroke-dashoffset 700ms var(--ease)}
html.js .is-drawn .hl-line path + path{transition-duration:500ms;transition-delay:260ms}

/* ---------- Typographie ---------- */
.h1{font-size:clamp(40px,calc(4.2vw + 16px),76px)}
.h2{font-size:clamp(32px,calc(2.4vw + 16px),52px);text-wrap:balance}
.h3{font-size:20px;line-height:1.2;font-weight:700;letter-spacing:-0.02em}
.lead{font-size:17px;color:var(--muted);font-weight:400}
@media (min-width:960px){.lead{font-size:19px}}
.muted{color:var(--muted)}
.small{font-size:15px}
.tiny{font-size:14px}

/* ---------- Logo ---------- */
.logo{display:inline-flex;align-items:center;gap:10px;min-height:48px;text-decoration:none;font-weight:800;font-size:19px;letter-spacing:-0.03em}
.logo-mark{width:30px;height:30px;flex:none}

/* ---------- Boutons ---------- */
.btn{
  --h:56px;
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--h);padding:0 28px;border-radius:999px;border:0;
  background:var(--ink);color:#fff;
  font-weight:600;font-size:17px;line-height:1.2;letter-spacing:-0.01em;text-align:center;text-decoration:none;
  cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;
  transition:transform 300ms var(--ease);
}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;box-shadow:0 2px 4px rgba(14,14,16,.08),0 8px 18px -4px rgba(14,14,16,.22),0 18px 36px -12px rgba(14,14,16,.22);opacity:0;transition:opacity 300ms var(--ease)}
.btn .ico{width:20px;height:20px}
.btn .ico-go{transition:transform 300ms var(--ease)}
@media (hover:hover){
  .btn:hover{transform:translate3d(0,-2px,0)}
  .btn:hover::before{opacity:1}
  .btn:hover .ico-go{transform:translate3d(3px,0,0)}
}
.btn:active{transform:translate3d(0,0,0) scale(.98);transition-duration:200ms}
.btn:active::before{opacity:.4}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.btn[disabled]::before{opacity:0}
.btn-lg{--h:60px;padding:0 32px;font-size:18px}
.btn-sm{--h:48px;padding:0 20px;font-size:16px}
.btn-block{display:flex;width:100%}
.btn-light{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px #DCDCE1}
.btn-light::before{box-shadow:0 2px 4px rgba(14,14,16,.05),0 10px 20px -8px rgba(14,14,16,.16)}
.btn-invert{background:#fff;color:var(--ink)}
.btn-invert::before{box-shadow:0 10px 30px -6px rgba(0,0,0,.6)}
.btn.is-loading{color:transparent;pointer-events:none}
.btn.is-loading::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin 800ms linear infinite}
.btn-light.is-loading::after{border-color:rgba(14,14,16,.2);border-top-color:var(--ink)}

.link-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 6px;font-weight:600;font-size:16px;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;text-decoration-color:rgba(14,14,16,.3);color:var(--ink);border-radius:10px}
@media (hover:hover){.link-btn:hover{text-decoration-color:var(--ink)}}
.link-btn:active{transform:scale(.98)}

.icon-btn{position:relative;display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;color:var(--ink);flex:none;transition:transform 200ms var(--ease)}
.icon-btn::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--surface);opacity:0;transition:opacity 200ms var(--ease)}
.icon-btn .ico{position:relative;width:22px;height:22px}
@media (hover:hover){.icon-btn:hover::before{opacity:1}}
.icon-btn:active{transform:scale(.94)}

/* ---------- Pilules ---------- */
.pill{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:7px 15px 7px 12px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),var(--sh-1);font-size:15px;font-weight:500;line-height:1.25;color:var(--ink)}
.pill .ico{width:18px;height:18px;color:var(--amber)}
.eyebrow{display:inline-flex;align-items:center;gap:9px;min-height:34px;padding:6px 14px 6px 12px;border-radius:999px;background:var(--surface);font-size:15px;font-weight:600;line-height:1.2;color:var(--ink)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--amber);flex:none}

/* ---------- Photos et rectangles « photo à venir » ---------- */
.ph{display:grid;place-items:center;background:var(--ph);color:var(--muted);font-size:14px;font-weight:500;line-height:1.3;text-align:center;padding:8px}
.ph--after{background:#F3F3F4}
.cmp-before .ph{padding-left:50%}
.cmp-after-in .ph{padding-right:50%}
img.fade-img{opacity:0;transition:opacity 500ms var(--ease)}
img.fade-img.is-loaded{opacity:1}

/* ==========================================================
   Comparateur avant / après
   La photo restaurée est à gauche de la ligne, l'ancienne à droite.
   Tout bouge uniquement par transform (masque + contre-décalage).
   ========================================================== */
.cmp{--p:.5;--hp:.5;position:relative;overflow:hidden;border-radius:var(--r);background:var(--surface);isolation:isolate;touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:ew-resize;-webkit-tap-highlight-color:transparent;transform:translateZ(0)}
.cmp-slide{position:absolute;inset:0;transition:opacity 500ms var(--ease)}
.cmp-slide.is-active{z-index:1}
.cmp-slide:not(.is-active){opacity:0}
.cmp-slide.is-leaving{opacity:1;z-index:0;transition:none}
.cmp-before,.cmp-after,.cmp-after-in{position:absolute;inset:0}
.cmp-after{overflow:hidden;transform:translate3d(calc((var(--p) - 1) * 100%),0,0);will-change:transform}
.cmp-after-in{transform:translate3d(calc((1 - var(--p)) * 100%),0,0);will-change:transform}
.cmp img,.cmp .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;pointer-events:none;-webkit-user-drag:none}
.cmp-handle{position:absolute;inset:0;z-index:3;pointer-events:none;transform:translate3d(calc((var(--hp) - .5) * 100%),0,0);transition:opacity 200ms var(--ease);will-change:transform}
.cmp.handle-out .cmp-handle{opacity:0}
.cmp-line{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 .5px rgba(14,14,16,.06),0 0 14px rgba(14,14,16,.22)}
.cmp-grip{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:0 1px 2px rgba(14,14,16,.1),0 6px 16px rgba(14,14,16,.18);pointer-events:auto;cursor:ew-resize;transition:transform 300ms var(--ease)}
.cmp-grip .ico{width:22px;height:22px}
.cmp.is-dragging .cmp-grip{transform:scale(1.08)}
.cmp.is-anim .cmp-after,.cmp.is-anim .cmp-after-in,.cmp.is-anim .cmp-handle{transition:transform var(--dur,700ms) var(--ease),opacity 200ms var(--ease)}
.cmp-tag{position:absolute;top:12px;z-index:2;display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink);font-size:14px;font-weight:600;box-shadow:var(--sh-1);pointer-events:none;transition:opacity 250ms var(--ease)}
.cmp-tag--after{left:12px}
.cmp-tag--before{right:12px}
.cmp.hide-after .cmp-tag--after,.cmp.hide-before .cmp-tag--before{opacity:0}
.cmp--mini .cmp-grip{width:40px;height:40px;margin:-20px 0 0 -20px}
.cmp--mini .cmp-grip .ico{width:18px;height:18px}
.cmp--mini .cmp-tag{top:10px;min-height:26px;padding:0 10px;font-size:13px}
.cmp--mini .cmp-tag--after{left:10px}
.cmp--mini .cmp-tag--before{right:10px}

/* Filtres de la restauration simulée (le « après » d'une photo envoyée) */
.fx-after{filter:contrast(1.12) saturate(1.18) brightness(1.04)}
.fx-after-2{filter:contrast(1.18) saturate(1.06) brightness(1.06)}
.fx-color{filter:sepia(.42) saturate(1.85) hue-rotate(-6deg) contrast(1.1) brightness(1.05)}
.fx-worn{filter:blur(1.8px) contrast(.76) saturate(.6) brightness(.95) sepia(.18)}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.55;mix-blend-mode:overlay;background-size:180px 180px;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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Filigrane */
.wm{position:absolute;inset:-30%;z-index:1;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:26px 44px;transform:rotate(-22deg);pointer-events:none;opacity:.34;transition:opacity 700ms var(--ease)}
.wm span{color:#fff;font-weight:800;font-size:17px;letter-spacing:-0.02em;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.wm.is-gone{opacity:0}

/* ---------- Bloc photo dont la taille suit l'image ---------- */
.photo-box{--ar:.8;--maxh:60vh;position:relative;aspect-ratio:var(--ar);width:min(100%,calc(var(--maxh) * var(--ar)));margin-inline:auto;border-radius:var(--r);overflow:hidden;background:var(--surface);box-shadow:var(--sh-2)}
.photo-box > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-box > .cmp{position:absolute;inset:0;border-radius:inherit}

/* ==========================================================
   Champs
   ========================================================== */
.field{display:grid;gap:8px}
.field label,.label{font-size:16px;font-weight:600}
.input{width:100%;min-height:56px;padding:0 18px;border-radius:var(--r-sm);border:1.5px solid var(--field);background:#fff;font-size:17px;color:var(--ink);transition:border-color 0s;-webkit-appearance:none;appearance:none}
.input::placeholder{color:#8A8A92}
.input:focus{outline:3px solid rgba(127,192,250,.55);outline-offset:1px;border-color:var(--ink)}
.input[aria-invalid="true"]{border-color:var(--ink);border-width:2px}
.field-hint{font-size:15px;color:var(--muted)}
.field-error{font-size:15px;font-weight:600;color:var(--ink);display:flex;gap:8px;align-items:flex-start}
.field-error::before{content:"";width:8px;height:8px;margin-top:7px;border-radius:50%;background:var(--amber);flex:none}

/* Interrupteur */
.switch{position:relative;flex:none;width:56px;height:34px;border-radius:999px;background:#C4C4CB;cursor:pointer}
.switch::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--ink);opacity:0;transition:opacity 250ms var(--ease)}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(14,14,16,.2),0 3px 8px rgba(14,14,16,.15);transition:transform 350ms var(--ease)}
.switch[aria-checked="true"]::before{opacity:1}
.switch[aria-checked="true"]::after{transform:translate3d(22px,0,0)}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;cursor:pointer}

/* ==========================================================
   Couches : grandes fenêtres (parcours, visionneuse) et feuilles
   ========================================================== */
.scrim{position:absolute;inset:0;background:rgba(14,14,16,.44);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity 400ms var(--ease)}
.is-open > .scrim{opacity:1}

.dlg{position:fixed;inset:0;z-index:100;display:flex}
.dlg-panel{position:relative;display:flex;flex-direction:column;width:100%;height:100vh;height:100dvh;background:#fff;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;opacity:0;transform:translate3d(0,28px,0);transition:opacity 400ms var(--ease),transform 600ms var(--ease)}
.dlg.is-open .dlg-panel{opacity:1;transform:none}
.dlg-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:calc(64px + var(--sat));padding:var(--sat) max(12px,var(--sar)) 0 max(16px,var(--sal));background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.dlg-bar .logo{font-size:17px}
.dlg-bar .logo-mark{width:26px;height:26px}
.dlg-count{font-size:15px;font-weight:600;color:var(--muted)}
@media (min-width:960px){
  .dlg{align-items:center;justify-content:center;padding:32px}
  .dlg-panel{width:min(1080px,100%);height:auto;min-height:min(680px,calc(100dvh - 64px));max-height:calc(100dvh - 64px);border-radius:28px;box-shadow:var(--sh-3)}
  .dlg-bar{min-height:72px;padding:0 16px 0 28px;background:rgba(255,255,255,.94)}
}

.sheet{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center}
.sheet-panel{position:relative;width:100%;max-height:calc(100dvh - 16px - var(--sat));overflow-y:auto;overscroll-behavior:contain;background:#fff;border-radius:28px 28px 0 0;padding:6px max(20px,var(--sar)) calc(24px + var(--sab)) max(20px,var(--sal));box-shadow:0 -2px 6px rgba(14,14,16,.04),0 -18px 48px -12px rgba(14,14,16,.22);transform:translate3d(0,105%,0)}
.sheet.is-open .sheet-panel{transform:none;transition:transform 700ms var(--spring)}
.sheet.is-closing .sheet-panel{transform:translate3d(0,105%,0);transition:transform 320ms var(--ease-in)}
.sheet-grab{width:40px;height:5px;margin:4px auto 6px;border-radius:999px;background:#D6D6DB}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 -8px 8px 0}
.sheet-title{font-size:26px}
.sheet-inner{display:grid;gap:18px}
@media (min-width:960px){
  .sheet{align-items:center;padding:32px}
  .sheet-panel{width:min(500px,100%);max-height:calc(100dvh - 64px);border-radius:28px;padding:26px 32px 32px;opacity:0;transform:translate3d(0,48px,0) scale(.98);box-shadow:var(--sh-3)}
  .sheet.is-open .sheet-panel{opacity:1;transform:none;transition:transform 700ms var(--spring),opacity 300ms var(--ease)}
  .sheet.is-closing .sheet-panel{opacity:0;transform:translate3d(0,24px,0) scale(.98);transition:transform 300ms var(--ease-in),opacity 250ms var(--ease)}
  .sheet-grab{display:none}
  .sheet--wide .sheet-panel{width:min(620px,100%)}
}

/* ==========================================================
   Parcours de restauration
   ========================================================== */
.flow-body{flex:1;display:flex;flex-direction:column}
.flow-step{flex:1;display:flex;flex-direction:column;padding:4px max(20px,var(--sar)) 24px max(20px,var(--sal))}
.flow-step.is-in{animation:stepIn 500ms var(--ease) both}
.flow-step.is-out{animation:stepOut 200ms var(--ease) both}
@keyframes stepIn{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
@keyframes stepOut{to{opacity:0;transform:translate3d(0,-6px,0)}}
.flow-h{font-size:30px}
.flow-sub{color:var(--muted);margin-top:10px}
@media (min-width:960px){
  .flow-step{padding:8px 48px 48px}
  .flow-h{font-size:40px}
}

/* Choix de la photo */
.choose{width:100%;max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:20px;padding-top:8px}
.choose-head{text-align:center}
.drop{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:300px;padding:36px 20px;border-radius:var(--r);background:var(--surface);text-align:center;cursor:pointer;transition:transform 400ms var(--ease)}
.drop::before{content:"";position:absolute;inset:0;border-radius:inherit;border:2px dashed #C2C2C9;pointer-events:none}
.drop::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--ink);opacity:0;pointer-events:none;transition:opacity 250ms var(--ease)}
.drop-icon{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:#fff;box-shadow:var(--sh-2);transition:transform 450ms var(--ease)}
.drop-icon .ico{width:30px;height:30px}
.drop-title{font-size:20px;font-weight:700;letter-spacing:-0.02em}
.drop-hint{font-size:15px;color:var(--muted)}
.drop .btn{pointer-events:none}
@media (hover:hover){
  .drop:hover::after{opacity:.4}
  .drop:hover .drop-icon{transform:translate3d(0,-4px,0)}
  .drop:hover .btn{transform:translate3d(0,-2px,0)}
  .drop:hover .btn::before{opacity:1}
}
.drop:focus-within::after{opacity:1}
.drop.is-over{transform:scale(1.012)}
.drop.is-over::after{opacity:1}
.drop.is-over .drop-icon{transform:translate3d(0,-8px,0) scale(1.06)}
.only-pointer{display:none}
@media (hover:hover) and (pointer:fine){.only-pointer{display:inline}}
.notes{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;font-size:15px;color:var(--muted)}
.notes li{display:flex;align-items:center;gap:8px}
.notes .ico{width:18px;height:18px;color:var(--ink)}

/* Restauration en cours */
.restore{flex:1;display:grid;gap:24px;align-content:center;padding-top:8px}
.restore .photo-box{--maxh:calc(100dvh - 380px);min-height:200px}
.scan img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scan-after{position:absolute;inset:0;overflow:hidden;transform:translate3d(0,-100%,0)}
.scan-after-in{position:absolute;inset:0;transform:translate3d(0,100%,0)}
.scan-beam{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transform:translate3d(0,0,0)}
.scan-beam::before{content:"";position:absolute;left:0;right:0;top:-72px;height:72px;background:linear-gradient(to bottom,rgba(214,236,255,0),rgba(214,236,255,.38))}
.scan-beam::after{content:"";position:absolute;left:-2%;right:-2%;top:-1px;height:2px;background:#fff;box-shadow:0 0 10px 2px rgba(205,232,255,.95),0 0 30px 7px rgba(127,192,250,.45)}
.scan.is-running .scan-after{animation:scanMask var(--scan,3600ms) linear forwards}
.scan.is-running .scan-after-in{animation:scanMaskIn var(--scan,3600ms) linear forwards}
.scan.is-running .scan-beam{animation:scanBeam var(--scan,3600ms) linear forwards}
.scan.is-done .scan-after,.scan.is-done .scan-after-in{transform:none}
@keyframes scanMask{from{transform:translate3d(0,-100%,0)}to{transform:translate3d(0,0,0)}}
@keyframes scanMaskIn{from{transform:translate3d(0,100%,0)}to{transform:translate3d(0,0,0)}}
@keyframes scanBeam{0%{opacity:0;transform:translate3d(0,0,0)}5%{opacity:1}95%{opacity:1}100%{opacity:0;transform:translate3d(0,100%,0)}}
.scan-photo-in{animation:photoIn 600ms var(--ease) both}
@keyframes photoIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.restore-side{width:100%;max-width:420px;margin:0 auto}
.restore-side .flow-h{font-size:26px}
.ticks{display:grid;gap:4px;margin-top:16px}
.ticks li{display:flex;align-items:center;gap:14px;min-height:44px;font-weight:500;color:var(--muted)}
.ticks li.is-active,.ticks li.is-done{color:var(--ink)}
.tick{position:relative;width:28px;height:28px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 2px #D9D9DE}
.tick::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:var(--ink);opacity:0}
.is-active > .tick::before{opacity:1;animation:spin 800ms linear infinite}
.tick-ok{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:var(--amber);color:var(--ink);opacity:0;transform:scale(.5);transition:opacity 300ms var(--ease),transform 400ms var(--spring)}
.tick-ok .ico{width:16px;height:16px;stroke-width:2.5}
.is-done > .tick{box-shadow:none}
.is-done > .tick .tick-ok{opacity:1;transform:none}
.bar{height:4px;margin-top:18px;border-radius:4px;background:var(--line);overflow:hidden}
.bar > span{display:block;height:100%;background:var(--amber);transform-origin:left;transform:scaleX(0)}
.bar.is-running > span{animation:barFill var(--scan-total,4000ms) linear forwards}
@keyframes barFill{to{transform:scaleX(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (min-width:960px){
  .restore{grid-template-columns:minmax(0,1fr) 340px;align-items:center;gap:48px;padding-top:0}
  .restore .photo-box{--maxh:min(560px,calc(100dvh - 260px))}
  .restore-side{margin:0}
  .restore-side .flow-h{font-size:32px}
}

/* Résultat et succès */
.result{flex:1;display:grid;gap:20px;align-content:start}
.result .photo-box{--maxh:max(220px,calc(100dvh - 420px - var(--sat) - var(--sab)))}
.result-side{display:grid;gap:12px;width:100%;max-width:440px;margin:0 auto}
.result-side .flow-h{font-size:28px}
.result-side .flow-sub{margin-top:0}
.actions{position:sticky;bottom:0;z-index:4;display:grid;gap:4px;margin:4px calc(-1 * max(20px,var(--sal))) -24px;padding:16px max(20px,var(--sal)) calc(16px + var(--sab));background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 22px)}
.actions .link-btn{justify-self:center}
.actions--static{position:static;margin:8px 0 0;padding:0;background:none}
.retry-row{display:flex;justify-content:center}
.price-note{font-size:15px;color:var(--muted);text-align:center}
.ok-pill{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px 0 6px;border-radius:999px;background:var(--surface);font-size:15px;font-weight:600}
.ok-pill i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--amber)}
.ok-pill .ico{width:16px;height:16px;stroke-width:2.5}
.space-link{font-size:16px;color:var(--muted);text-align:center;margin-top:6px}
.space-link a{color:var(--ink);font-weight:600}
.success-pop{animation:pop 700ms var(--spring) both}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@media (min-width:960px){
  .result{grid-template-columns:minmax(0,1fr) 400px;align-items:center;gap:48px}
  .result .photo-box{--maxh:min(600px,calc(100dvh - 220px))}
  .result-side{margin:0}
  .result-side .flow-h{font-size:36px}
  .actions{position:static;margin:8px 0 0;padding:0;background:none}
  .actions .link-btn{justify-self:start}
  .retry-row{justify-content:flex-start}
  .price-note,.space-link{text-align:left}
}

/* Paiement */
.pay-summary{display:flex;align-items:center;gap:14px;padding:12px;border-radius:var(--r-sm);background:var(--surface)}
.pay-thumb{width:52px;height:52px;border-radius:10px;overflow:hidden;flex:none;background:var(--ph);position:relative}
.pay-thumb img{width:100%;height:100%;object-fit:cover}
.pay-thumb .ph{position:absolute;inset:0;font-size:0}
.pay-thumb-ico{position:absolute;inset:0;display:grid;place-items:center;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.pay-thumb-ico .ico{width:24px;height:24px}
.pay-what{flex:1;min-width:0}
.pay-item{font-weight:600;line-height:1.3}
.pay-detail{font-size:15px;color:var(--muted)}
.pay-price{font-weight:800;font-size:20px;letter-spacing:-0.02em;white-space:nowrap}
.wallets{display:grid;gap:10px}
.divider{display:flex;align-items:center;gap:14px;font-size:15px;color:var(--muted)}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.card-grid .full{grid-column:1/-1}
.secure{display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;color:var(--muted);text-align:center}
.secure .ico{width:18px;height:18px}
.packs{display:grid;gap:10px}
.pack-opt{position:relative;display:flex;align-items:center;gap:14px;min-height:76px;padding:14px 18px;border-radius:var(--r-sm);background:#fff;box-shadow:inset 0 0 0 1.5px #DCDCE1;text-align:left;width:100%;cursor:pointer;transition:transform 200ms var(--ease)}
.pack-opt:active{transform:scale(.99)}
.pack-opt[aria-checked="true"]{box-shadow:inset 0 0 0 2.5px var(--ink)}
.pack-radio{position:relative;width:24px;height:24px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 2px var(--field)}
.pack-radio::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--ink);opacity:0;transform:scale(.4);transition:opacity 200ms var(--ease),transform 300ms var(--spring)}
.pack-opt[aria-checked="true"] .pack-radio{box-shadow:inset 0 0 0 2px var(--ink)}
.pack-opt[aria-checked="true"] .pack-radio::after{opacity:1;transform:none}
.pack-txt{flex:1;min-width:0}
.pack-name{font-weight:700;line-height:1.3;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pack-per{font-size:15px;color:var(--muted)}
.pack-cost{font-weight:800;font-size:19px;letter-spacing:-0.02em;white-space:nowrap}
.reco{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border-radius:999px;background:var(--amber);color:var(--ink);font-size:13px;font-weight:700;letter-spacing:0}
.stage-in{animation:stepIn 450ms var(--ease) both}

/* Confirmation */
.confirm-actions{display:grid;gap:10px;margin-top:6px}
@media (min-width:960px){.confirm-actions{grid-template-columns:1fr 1fr}}

/* ---------- Message bref ---------- */
.toast{position:fixed;left:50%;bottom:calc(24px + var(--sab));z-index:200;display:flex;align-items:center;gap:10px;width:max-content;max-width:calc(100vw - 32px);min-height:52px;padding:12px 20px 12px 14px;border-radius:999px;background:var(--ink);color:#fff;font-size:16px;font-weight:500;box-shadow:var(--sh-3);opacity:0;transform:translate3d(-50%,16px,0);transition:opacity 300ms var(--ease),transform 500ms var(--ease);pointer-events:none}
.toast.is-on{opacity:1;transform:translate3d(-50%,0,0)}
.toast i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--amber);color:var(--ink);flex:none}
.toast .ico{width:16px;height:16px;stroke-width:2.5}

/* ---------- Apparition au défilement ---------- */
html.js [data-reveal]{opacity:0;transform:translate3d(0,18px,0);transition:opacity 700ms var(--ease),transform 700ms var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
html.js [data-reveal].is-in{opacity:1;transform:none}

/* ---------- Blocs gris qui scintillent ---------- */
.sk{position:relative;overflow:hidden;background:#EFEFF1;border-radius:16px}
.sk::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.7),rgba(255,255,255,0));transform:translate3d(-100%,0,0);animation:shimmer 1600ms var(--ease) infinite}
@keyframes shimmer{to{transform:translate3d(100%,0,0)}}

/* ---------- Compteur qui défile ---------- */
.odo{display:inline-flex;height:1.2em;line-height:1.2em;overflow:hidden;vertical-align:-0.22em;font-variant-numeric:tabular-nums}
.odo-col{display:block;height:1.2em;overflow:hidden}
.odo-strip{display:flex;flex-direction:column;transition:transform 700ms var(--ease)}
.odo-strip span{display:block;height:1.2em;text-align:center}
.odo-col.is-new{animation:fadeIn 400ms var(--ease) both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ---------- Mouvement réduit : tout est coupé ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;animation-delay:0ms!important;transition-duration:1ms!important;transition-delay:0ms!important}
  html.js [data-reveal]{opacity:1;transform:none}
  .sk::after{display:none}
}