/* MAW 39 — « Créer mon site avec mon associé » : mobile d'abord, gros textes, gros boutons, mascotte en repère. */
@font-face{font-family:Manrope;src:url('/assets/maw09/fonts/manrope.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/assets/maw09/fonts/dmsans.woff2') format('woff2');font-weight:100 1000;font-display:swap}
:root{--ink:#14213d;--ink2:#46505f;--bg:#fbf7ef;--card:#fff;--line:#e4dfd3;--accent:#14213d;--gold:#e8912d;--ok:#16794a;--err:#b42318;--soft:#f3efe4;--r:18px;--font:'DM Sans',system-ui,-apple-system,"Segoe UI",sans-serif;--head:Manrope,system-ui,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased}
html.c-noscroll,html.c-noscroll body{overflow:hidden}
a{color:var(--ink)}
.c-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.c-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:#fff;border-bottom:1px solid var(--line)}
.c-logo img{display:block;height:40px;width:auto}
.c-progress{display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:0}
#c-cat{font-weight:700;font-size:.8rem;text-align:right;line-height:1.25}
.c-bar{display:block;width:150px;height:8px;border-radius:99px;background:var(--soft);overflow:hidden}
.c-bar i{display:block;height:100%;width:4%;background:var(--gold);border-radius:99px;transition:width .5s ease}
.c-main{max-width:640px;margin:0 auto;padding:16px 16px 40px;display:grid;gap:14px}
/* Mascotte + bulle */
.c-coach{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:start}
.c-coach-img{width:72px;height:72px;border-radius:50%;background:#fff;border:2px solid var(--line);object-fit:contain}
.c-bubble{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:12px 14px;box-shadow:0 6px 20px rgba(20,33,61,.06)}
.c-bubble::before{content:"";position:absolute;left:-9px;top:22px;width:16px;height:16px;background:#fff;border-left:1.5px solid var(--line);border-bottom:1.5px solid var(--line);transform:rotate(45deg)}
.c-ack{margin:0 0 6px;color:var(--ok);font-weight:700;font-size:.92rem}
.c-say{margin:0;font-family:var(--head);font-weight:800;font-size:1.28rem;line-height:1.3;letter-spacing:-.01em;outline:none}
.c-why{margin:6px 0 0;color:var(--ink2);font-size:.98rem}
.c-tools{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}
/* Carte de travail */
.c-work{min-width:0}
.c-card{background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:16px;display:grid;gap:12px}
.c-card:empty{display:none}
.c-lead{margin:0;font-size:1.1rem}
.c-field{display:grid;gap:6px}
.c-field label{font-weight:700;font-size:1rem}
.c-field input,.c-field textarea{width:100%;font:inherit;font-size:1.1rem;padding:14px 16px;border:2px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);min-height:56px}
.c-field textarea{resize:vertical;min-height:120px;line-height:1.45}
.c-field input:focus,.c-field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(232,145,45,.18)}
.c-hint{margin:0;color:var(--ink2);font-size:.95rem}
.c-msg{margin:0;min-height:1.5em;font-size:.98rem;font-weight:600}
.c-msg.is-err{color:var(--err)}.c-msg.is-ok{color:var(--ok)}
.c-ok{margin:0;color:var(--ok);font-weight:700}
.c-q{margin:6px 0 0;font-size:1.02rem;font-weight:800}
/* Boutons : ≥ 48 px, principaux ≥ 58 px */
.c-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:10px 18px;border-radius:999px;border:2px solid var(--ink);background:#fff;color:var(--ink);font:inherit;font-weight:700;font-size:1rem;cursor:pointer;text-decoration:none;text-align:center;line-height:1.2}
.c-btn:focus-visible,.c-choice:focus-visible,.c-trade:focus-visible,.c-chip:focus-visible,.c-style:focus-visible,.c-color:focus-visible,.c-role:focus-visible,.c-link:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.c-btn[disabled]{opacity:.45;cursor:not-allowed}
.c-btn-primary{background:var(--ink);color:#fff}
.c-btn-accent{background:var(--gold);border-color:var(--gold);color:#14213d}
.c-btn-xl{min-height:60px;font-size:1.12rem;padding:14px 24px}
.c-btn-soft{background:var(--soft);border-color:var(--soft)}
.c-btn-ghost{border-color:var(--line)}
.c-btn-danger{background:var(--err);border-color:var(--err);color:#fff}
.c-btn-sm{min-height:44px;padding:8px 14px;font-size:.92rem}
.c-btn-wide{width:100%}
.c-link{border:0;background:none;color:var(--ink);text-decoration:underline;font:inherit;font-size:.95rem;cursor:pointer;min-height:44px;padding:0 6px}
.c-row{display:flex;flex-wrap:wrap;gap:10px}
.c-choices{display:grid;gap:10px}
.c-choices-inline{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.c-choice{min-height:58px;padding:12px 16px;border:2px solid var(--line);border-radius:16px;background:#fff;font:inherit;font-weight:700;font-size:1.05rem;text-align:left;color:var(--ink);cursor:pointer}
.c-choice[aria-pressed="true"],.c-choice[aria-checked="true"]{border-color:var(--ink);background:#eef1f7}
.c-actions{position:sticky;bottom:0;z-index:10;display:flex;gap:10px;justify-content:space-between;align-items:center;padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--bg) 78%,rgba(251,247,239,0))}
.c-actions #c-next{flex:1}
.c-actions #c-back[hidden]+#c-next{margin-left:0}
.c-reassure{margin:10px 2px 0;color:var(--ink2);font-size:.92rem}
.c-reassure:empty{display:none}
/* Métiers */
.c-trades{display:grid;gap:8px}
.c-trade{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:58px;padding:10px 16px;border:2px solid var(--line);border-radius:14px;background:#fff;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.c-trade strong{font-size:1.05rem}.c-trade small{color:var(--ink2);font-size:.88rem}
.c-trade[aria-selected="true"]{border-color:var(--ink);background:#eef1f7}
/* Puces */
.c-chips{display:flex;flex-wrap:wrap;gap:8px}
.c-chip{min-height:48px;padding:8px 14px;border:2px solid var(--line);border-radius:999px;background:#fff;font:inherit;font-weight:600;font-size:.98rem;color:var(--ink);cursor:pointer}
.c-chip[aria-pressed="true"]{border-color:var(--ink);background:#eef1f7}
.c-add{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}
.c-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.c-list li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 6px 6px 14px;border:1.5px solid var(--line);border-radius:12px}
.c-quote{margin:0;padding:14px 16px;border-left:5px solid var(--gold);background:var(--soft);border-radius:0 14px 14px 0;font-size:1.05rem;white-space:pre-line}
.c-notice{font-size:.95rem}
/* Photos */
.c-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.c-hero-mock{position:relative;margin:0;border-radius:16px;overflow:hidden;aspect-ratio:16/10;background:#222}
.c-hero-mock img{width:100%;height:100%;object-fit:cover;display:block}
.c-hero-mock figcaption{position:absolute;inset:auto 0 0 0;padding:16px;background:linear-gradient(to top,rgba(0,0,0,.7),transparent);color:#fff;display:grid}
.c-hero-mock strong{font-family:var(--head);font-size:1.3rem}
.c-gallery{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:12px}
.c-gallery li{position:relative;border:1.5px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.c-gallery li.is-drag{opacity:.5}
.c-gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.c-num{position:absolute;top:8px;left:8px;background:var(--ink);color:#fff;border-radius:99px;min-width:30px;height:30px;display:grid;place-items:center;font-weight:800}
.c-ph-actions{display:flex;flex-wrap:wrap;gap:6px;padding:8px}
.c-roles{display:flex;flex-wrap:wrap;gap:6px;padding:0 8px 10px}
.c-role{min-height:44px;padding:6px 12px;border:2px solid var(--line);border-radius:999px;background:#fff;font:inherit;font-size:.9rem;font-weight:600;color:var(--ink);cursor:pointer}
.c-role[aria-checked="true"]{border-color:var(--ink);background:#eef1f7}
/* Style */
.c-styles{display:grid;gap:10px}
.c-style{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;min-height:64px;padding:10px 14px;border:2px solid var(--line);border-radius:16px;background:#fff;text-align:left;font:inherit;color:var(--ink);cursor:pointer}
.c-style[aria-checked="true"]{border-color:var(--ink);background:#eef1f7}
.c-style .c-swatch{grid-row:1/3;display:flex;gap:3px}.c-swatch i{width:14px;height:34px;border-radius:6px;display:block}
.c-style strong{font-size:1.05rem}.c-style small{color:var(--ink2)}
.c-colors{display:flex;flex-wrap:wrap;gap:8px}
.c-color{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:6px 14px 6px 8px;border:2px solid var(--line);border-radius:999px;background:#fff;font:inherit;font-weight:700;color:var(--ink);cursor:pointer}
.c-color i{width:28px;height:28px;border-radius:50%;display:block}
.c-color[aria-checked="true"]{border-color:var(--ink);background:#eef1f7}
.c-inline-preview{border:1.5px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;height:440px}
.c-inline-preview iframe{width:100%;height:100%;border:0;display:block}
/* Adresse */
.c-url-card{padding:16px;border:2px dashed var(--gold);border-radius:16px;background:#fffaf1;display:grid;gap:6px}
.c-url{margin:0;font-size:1.1rem;word-break:break-all}.c-url span{color:var(--ink2)}.c-url strong{font-size:1.2rem}
/* Vérification + mise en ligne */
.c-check{display:flex;gap:12px;align-items:flex-start;font-size:1rem;cursor:pointer}
.c-check input{width:28px;height:28px;flex:none;margin:0;accent-color:var(--ink)}
.c-consent{padding:14px;border:2px solid var(--line);border-radius:14px;background:var(--soft)}
.c-check-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.c-check-list li{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:8px;padding:6px 6px 6px 10px;border:1.5px solid var(--line);border-radius:12px}
.c-tick{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:var(--ok)}
.is-opt .c-tick{background:#b9b3a4}.is-todo .c-tick{background:var(--gold)}
.c-progress-list{margin:0;padding:0 0 0 22px;display:grid;gap:8px;font-size:1.05rem}
.c-progress-list li{color:var(--ink2)}.c-progress-list li.is-now{color:var(--ink);font-weight:800}.c-progress-list li.is-done{color:var(--ok)}
/* Succès */
.c-party{text-align:center;padding:12px 0}
.c-kicker{margin:0;font-family:var(--head);font-weight:800;letter-spacing:.08em;color:var(--gold)}
.c-bigurl{margin:6px 0 0;font-size:1.15rem;font-weight:800;word-break:break-all}
.c-actions-grid{display:grid;gap:10px}
.c-qr-box{display:grid;justify-items:center;gap:8px;text-align:center}
.c-qr{width:220px;height:220px;image-rendering:pixelated;border:1.5px solid var(--line);border-radius:12px}
.c-steps{margin:0;padding-left:22px;display:grid;gap:4px}
.c-install{padding:12px 14px;border-radius:14px;background:var(--soft)}
/* Aperçu latéral (grand écran) + plein écran */
.c-side{display:none}
.c-overlay{position:fixed;inset:0;z-index:100;background:rgba(20,33,61,.92);display:flex;flex-direction:column}
.c-overlay[hidden]{display:none}
.c-overlay-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top));background:#fff}
.c-seg{display:flex;border:2px solid var(--line);border-radius:999px;overflow:hidden}
.c-seg button{min-height:44px;padding:6px 14px;border:0;background:#fff;font:inherit;font-weight:700;color:var(--ink);cursor:pointer}
.c-seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.c-overlay-stage{flex:1;display:flex;justify-content:center;padding:12px;overflow:auto}
.c-overlay-stage iframe{width:100%;height:100%;border:0;border-radius:14px;background:#fff}
.c-overlay[data-device="mobile"] .c-overlay-stage iframe{max-width:400px}
.c-toast{position:fixed;left:16px;right:16px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:60;padding:14px 16px;border-radius:14px;background:var(--ink);color:#fff;font-weight:600;max-width:560px;margin:0 auto}
.c-toast[hidden]{display:none}
.c-foot{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;padding:24px 16px 40px;font-size:.9rem}
/* Humeurs de la mascotte (sans image supplémentaire) */
.c-coach-img.is-anim.mood-hello{animation:c-wave .9s ease}
.c-coach-img.is-anim.mood-success{animation:c-hop .6s ease}
.c-coach-img.is-anim.mood-party{animation:c-hop .6s ease 2}
.c-coach-img.is-anim.mood-error{animation:c-shake .45s ease}
.c-coach-img.is-anim.mood-think{animation:c-tilt 1.4s ease-in-out infinite}
.c-coach-img.mood-error{border-color:var(--gold)}
.c-coach-img.mood-success,.c-coach-img.mood-party{border-color:var(--ok)}
@keyframes c-wave{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}60%{transform:rotate(6deg)}}
@keyframes c-hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-10px)}}
@keyframes c-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes c-tilt{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg)}}
.c-in-fwd{animation:c-in-fwd .36s cubic-bezier(.2,.7,.2,1) both}.c-in-back{animation:c-in-back .36s cubic-bezier(.2,.7,.2,1) both}
@keyframes c-in-fwd{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes c-in-back{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
.c-party.is-anim .c-kicker{animation:c-pop .7s cubic-bezier(.2,.9,.3,1.4) both}
@keyframes c-pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
.c-main{overflow-x:clip}
@media (max-width:520px){.c-add{grid-template-columns:1fr}.c-add .c-btn{width:100%}}
@media (max-width:380px){html,body{font-size:17px}.c-bar{width:110px}.c-say{font-size:1.18rem}}
/* Tablette / ordinateur : mascotte à gauche, étape au centre, aperçu à droite */
@media (min-width:760px){
  .c-main{max-width:1000px;grid-template-columns:240px 1fr;align-items:start;gap:24px;padding-top:28px}
  .c-coach{position:sticky;top:90px;grid-template-columns:1fr;justify-items:center;text-align:left}
  .c-coach-img{width:160px;height:160px}
  .c-bubble::before{left:50%;top:-9px;transform:translateX(-50%) rotate(135deg)}
  .c-tools{justify-content:center}
  .c-gallery{grid-template-columns:1fr 1fr}
  .c-actions-grid{grid-template-columns:1fr 1fr}
}
@media (min-width:1180px){
  .c-main{max-width:1400px;grid-template-columns:240px minmax(420px,560px) 1fr}
  body.c-has-side .c-side{display:flex;flex-direction:column;gap:8px;position:sticky;top:90px;height:calc(100vh - 120px)}
  .c-side-title{margin:0;font-weight:800;color:var(--ink2);font-size:.9rem}
  .c-side iframe{flex:1;width:100%;border:1.5px solid var(--line);border-radius:16px;background:#fff}
  body.c-has-side[data-step="style"] .c-inline-preview{display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.c-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* MAJ89 — progression détaillée et cohérence avec la vitrine. */
:root{--ink:#183b39;--ink2:#4b625c;--accent:#183b39;--gold:#81916b;--bg:#f6f4ed}
.c-substep{font-size:12px;color:var(--ink2);text-align:right;max-width:230px}.c-btn:focus-visible,.c-choice:focus-visible,.c-trade:focus-visible{outline:3px solid #a56a35;outline-offset:3px}.c-top{gap:10px}.c-progress{max-width:72%}

.c-requirement{padding:12px 16px;border-radius:12px;background:#edf3fc;color:#173558;font-weight:650;border:1px solid #ccd9ec;line-height:1.5}