*{margin:0;padding:0;box-sizing:border-box}
  :root{
    --bg:#E3DDD2;        /* fond principal */
    --ink:#231405;       /* texte foncé, titres */
    --txt:#5a5243;       /* texte courant sur fond clair */
    --brown:#6E4E25;     /* accent des titres (mot en italique) */
    --khaki:#6E6321;     /* boutons, bordures d'accent */
    --btn-txt:#F6EFE2;   /* texte des boutons */
    --olive:#8A7F4A;     /* marque, étiquettes, mentions discrètes */
    --card:#fbf8f1;      /* cartes claires */
    --card-hover:#f3ecdc;
    --line:#d8d0bd;      /* bordure des cartes */
    --dark:#231405;      /* bloc « Ton décalage » */
    --dark-txt:#ECE4D4;
    --camel:#C9985B;     /* étiquette + clôture du décalage */
    --err:#9c3d24;
  }
  html,body{background:var(--bg)}
  body{font-family:'Jost',sans-serif;color:var(--ink);line-height:1.6;font-weight:300;font-size:15px;-webkit-text-size-adjust:100%}
  .page{max-width:620px;margin:0 auto;padding:40px 24px 80px}
  .brand{letter-spacing:.4em;font-size:10px;color:var(--olive);text-transform:uppercase;margin-bottom:14px;text-align:center;font-weight:500}
  h1{font-family:'Fraunces',serif;font-size:36px;font-weight:600;line-height:1.1;text-align:center;color:var(--ink)}
  h1 em{font-style:italic;color:var(--brown);font-weight:500}
  .sub{color:var(--txt);font-size:14px;margin:12px 0 26px;text-align:center}
  .form{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 22px}
  label{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--olive);margin:14px 0 5px;font-weight:500}
  .form>label:first-child{margin-top:0}
  input[type=text],input[type=email],input[type=date],input[type=time]{width:100%;padding:11px 12px;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-family:'Jost',sans-serif;font-size:16px;min-height:44px}
  input::placeholder{color:#8a8372}
  input:focus{outline:2px solid var(--khaki);outline-offset:1px}
  input:disabled{opacity:.45}
  .check{display:flex;gap:9px;align-items:flex-start;margin-top:14px;font-size:12.5px;color:var(--txt);font-weight:300;text-transform:none;letter-spacing:0}
  .check input{width:18px;height:18px;margin-top:2px;accent-color:var(--khaki);flex:none}
  .aster{font-size:11.5px;color:var(--olive);font-style:italic;margin-top:7px;line-height:1.5}
  button.go{width:100%;margin-top:20px;padding:14px;border:none;border-radius:9px;background:var(--khaki);color:var(--btn-txt);font-family:'Jost',sans-serif;font-weight:600;font-size:14px;letter-spacing:.02em;cursor:pointer;min-height:48px;transition:filter .25s}
  button.go:hover{filter:brightness(1.12)}
  button.go:disabled{opacity:.6;cursor:wait}
  .err{color:var(--err);font-size:12.5px;margin-top:12px}
  .err:empty{display:none}
  .hidden{display:none !important}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .ac{position:relative}
  .sugg{position:absolute;left:0;right:0;top:100%;margin-top:4px;z-index:5;background:var(--card);border:1px solid var(--khaki);border-radius:9px;overflow:hidden;list-style:none;box-shadow:0 8px 24px rgba(35,20,5,.15)}
  .sugg li{padding:11px 12px;font-size:14px;color:var(--ink);cursor:pointer;border-bottom:1px solid var(--line);min-height:44px;display:flex;align-items:center}
  .sugg li:last-child{border-bottom:none}
  .sugg li:hover,.sugg li[aria-selected=true]{background:var(--card-hover)}
  .sugg li.note{color:var(--olive);cursor:default;font-style:italic;font-size:13px}
  .picked{font-size:11.5px;color:var(--khaki);margin-top:6px;font-weight:500}
  .bloc{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin-bottom:14px}
  .bloc .lbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--olive);font-weight:600;margin-bottom:6px}
  .bloc h2{font-family:'Fraunces',serif;font-size:24px;color:var(--ink);font-weight:600;margin-bottom:7px;line-height:1.1}
  .bloc p{font-size:14px;color:var(--txt);margin-bottom:10px}
  .bloc p:last-child{margin-bottom:0}
  .bloc .intro{font-size:13px;color:var(--olive);font-style:italic;line-height:1.65}
  .bloc .conn{font-family:'Fraunces',serif;font-style:italic;font-size:16px;color:var(--brown);margin:14px 0 10px}
  .donut{display:flex;align-items:center;gap:22px;margin:16px 0 18px}
  .donut svg{width:132px;height:132px;flex:none}
  .donut ul{list-style:none;font-size:13.5px;color:var(--txt);line-height:2}
  .donut .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px}
  .donut b{color:var(--ink);font-weight:500}
  .deca{background:var(--dark);color:var(--dark-txt);border:1px solid var(--khaki);border-radius:14px;padding:22px 24px;margin-bottom:14px}
  .deca .lbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--camel);font-weight:600;margin-bottom:8px}
  .deca p{font-size:14.5px;color:var(--dark-txt);margin-bottom:10px;line-height:1.6}
  .deca .cl{font-family:'Fraunces',serif;font-style:italic;font-size:18px;color:var(--camel);margin-bottom:0}
  .cta{text-align:center;margin:22px 0 10px}
  .cta h3{font-family:'Fraunces',serif;font-size:22px;color:var(--ink);margin-bottom:10px}
  .cta p{font-size:13.5px;color:var(--txt);margin-bottom:16px}
  .cta a{display:inline-block;background:var(--khaki);color:var(--btn-txt);text-decoration:none;padding:14px 26px;border-radius:30px;font-size:13.5px;font-weight:600;transition:filter .25s}
  .cta a:hover{filter:brightness(1.12)}
  .encart{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-top:20px;font-size:11.5px;color:var(--olive);line-height:1.6}
  .encart b{color:var(--txt);display:block;margin-bottom:6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
  .restart{display:block;text-align:center;margin-top:18px;color:var(--khaki);font-size:12px;cursor:pointer;background:none;border:none;width:100%;min-height:44px}
  .page.wide{max-width:1040px}
  .cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;align-items:center}
  .dom-chart{display:flex;justify-content:center}
  .cols .donut{flex-direction:column;align-items:center;gap:18px;margin:0}
  .cols .donut svg{width:200px;height:200px}
  .cols .donut ul{display:inline-block}
  .cols .dom-txt .intro{margin:2px 0 18px}
  .cols .dom-txt h2{font-size:28px;margin-bottom:12px}
  /* Textes justifiés (césures automatiques pour éviter les trous) */
  .bloc p,.deca p:not(.cl),.cta p,.encart{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
  .cta p{text-align-last:center}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;margin-bottom:14px}
  .row2 .acc{margin-bottom:0}
  .wide .cta,.wide .encart{max-width:760px;margin-left:auto;margin-right:auto}
  /* Accordéon */
  .acc{padding:0;overflow:hidden;transition:border-color .3s,background-color .25s ease}
  .acc:hover{background:var(--card-hover)}
  .acc.open{border-color:var(--khaki)}
  .acc-head{all:unset;box-sizing:border-box;width:100%;display:block;padding:18px 24px;cursor:pointer;min-height:64px}
  .acc-head:focus-visible{outline:2px solid var(--khaki);outline-offset:-4px;border-radius:14px}
  .acc-title{display:block;font-family:'Fraunces',serif;font-size:22px;font-weight:600;color:var(--ink);line-height:1.2}
  .acc-hint{display:flex;align-items:center;gap:6px;margin-top:3px;font-family:'Jost',sans-serif;font-size:12.5px;font-weight:400;color:var(--olive);opacity:.85;transition:opacity .25s}
  .acc:hover .acc-hint{opacity:1}
  .arr{font-style:normal;display:inline-block;transition:transform .35s cubic-bezier(.4,0,.2,1)}
  .acc.open .arr{transform:rotate(180deg)}
  .acc-body{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .45s cubic-bezier(.4,0,.2,1),opacity .35s ease}
  .acc.open .acc-body{grid-template-rows:1fr;opacity:1}
  .acc-in{overflow:hidden;min-height:0}
  .acc-pad{padding:2px 24px 22px}
  .acc:not(.open) .acc-body{visibility:hidden;transition:grid-template-rows .45s cubic-bezier(.4,0,.2,1),opacity .35s ease,visibility 0s .45s}
  @media(prefers-reduced-motion:reduce){.acc-body,.arr,.acc{transition:none !important}}
  @media(max-width:820px){.page.wide{max-width:620px}.cols{grid-template-columns:1fr;gap:18px}.row2{grid-template-columns:1fr}}
  @media(max-width:420px){.page{padding:28px 16px 60px}h1{font-size:30px}.form{padding:18px 16px}}
  /* Sections de page */
  .brand a{color:inherit;text-decoration:none}
  .bloc .donut-wrap{position:relative}
  /* Camembert interactif */
  .donut svg{overflow:visible}
  .donut .seg{cursor:pointer;transition:stroke-width .25s ease,opacity .25s ease}
  .donut .seg:hover,.donut .seg.hl{stroke-width:27}
  .donut.has-hl .seg:not(.hl){opacity:.55}
  .donut li{cursor:pointer;transition:opacity .25s}
  .tip{position:fixed;z-index:20;pointer-events:none;background:var(--dark);color:var(--dark-txt);border:1px solid var(--khaki);border-radius:8px;padding:6px 11px;font-size:13px;font-weight:500;white-space:nowrap;opacity:0;transition:opacity .2s;transform:translate(-50%,-130%)}
  .tip.on{opacity:1}
  /* Liste d'attente */
  .btn{display:inline-block;background:var(--khaki);color:var(--btn-txt);border:none;padding:14px 26px;border-radius:30px;font-family:'Jost',sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none;transition:filter .25s}
  .btn:hover{filter:brightness(1.12)}
  .btn:disabled{opacity:.6;cursor:wait}
  .wl-done{background:var(--dark);color:var(--dark-txt);border:1px solid var(--khaki);border-radius:14px;padding:38px 28px;text-align:center}
  .wl-done h3{font-family:'Fraunces',serif;font-size:26px;color:var(--camel);margin-bottom:12px}
  .wl-done p{font-size:14.5px;color:var(--dark-txt);text-align:center !important;text-align-last:center}
  .wl-done a{color:var(--camel)}
  /* Footer */
  .site-footer{background:var(--dark);color:var(--dark-txt);margin-top:0;padding:44px 24px 36px}
  .foot{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
  .foot h4{font-family:'Fraunces',serif;font-size:18px;font-weight:600;color:var(--camel);margin-bottom:10px}
  .foot p,.foot li{font-size:13.5px;line-height:1.9;color:var(--dark-txt)}
  .foot ul{list-style:none}
  .foot a{color:var(--dark-txt);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .25s,color .25s}
  .foot a:hover{color:var(--camel);border-bottom-color:var(--camel)}
  @media(max-width:700px){.foot{grid-template-columns:1fr;gap:24px}.site-footer{padding:36px 20px 30px}}
  /* Pages légales */
  .legal{max-width:720px;margin:0 auto;padding:40px 24px 20px}
  .legal h1{text-align:left;font-size:34px;color:var(--brown);margin-bottom:6px}
  .legal .maj{color:var(--olive);font-size:13px;margin-bottom:26px}
  .legal h2{font-family:'Fraunces',serif;font-size:21px;font-weight:600;color:var(--brown);margin:32px 0 10px}
  .legal p,.legal li{font-size:15px;color:var(--txt);line-height:1.8;margin-bottom:10px}
  .legal ul{margin:0 0 10px 20px}
  .legal strong{color:var(--ink);font-weight:500}
  .legal a{color:var(--khaki)}
  .back{display:inline-block;margin-top:22px;color:var(--khaki);font-size:13.5px;text-decoration:none}


  /* Page liste d'attente */
  .wl-page{max-width:1100px;margin:0 auto;padding:40px 24px 60px}
  .wl-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:start;margin-top:18px}
  .wl-left h1{text-align:left;font-size:44px;line-height:1.08;color:var(--ink)}
  .wl-kicker{font-family:'Fraunces',serif;font-style:italic;font-size:19px;color:var(--brown);margin:14px 0 26px}
  .proof{display:flex;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 8px;margin-bottom:28px}
  .proof div{flex:1;text-align:center;padding:0 10px;border-left:1px solid var(--line)}
  .proof div:first-child{border-left:none}
  .proof b{display:block;font-family:'Fraunces',serif;font-size:32px;font-weight:600;color:var(--brown);line-height:1.1}
  .proof span{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--olive);margin-top:4px}
  .wl-lead{font-family:'Fraunces',serif;font-size:21px;line-height:1.45;color:var(--ink);margin-bottom:22px}
  .wl-intro{font-size:15px;color:var(--txt);margin-bottom:12px;font-weight:400}
  /* Frise « À la fin, tu auras » : sobre, les étapes se valident une à une et la ligne se remplit */
  .steps{list-style:none;margin:2px 0 6px}
  .steps li{position:relative;display:grid;grid-template-columns:26px 1fr;gap:16px;padding:14px;margin:0 -14px;border-radius:12px;transition:background-color .25s ease}
  .steps li:hover{background:rgba(251,248,241,.85)}
  .step-txt{font-size:15.5px;line-height:1.6;color:var(--ink);font-weight:400;text-align:justify;hyphens:auto;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .steps li:hover .step-txt{transform:translateX(4px)}
  .node{position:relative;z-index:1;width:26px;height:26px;margin-top:1px;border-radius:50%;border:1.5px solid var(--olive);background:var(--bg);display:flex;align-items:center;justify-content:center;transition:background-color .35s ease,border-color .35s ease,box-shadow .3s ease}
  .node svg{width:16px;height:16px;fill:none;stroke:var(--btn-txt);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:0;transition:stroke-dashoffset .4s ease .1s}
  .steps li:hover .node{box-shadow:0 0 0 6px rgba(110,99,33,.14)}
  /* connecteur vertical entre deux étapes (fond gris, remplissage kaki) */
  .steps li:not(:last-child)::before,.steps li:not(:last-child)::after{content:"";position:absolute;left:26px;top:44px;bottom:-14px;width:2px;border-radius:2px;background:var(--line)}
  .steps li:not(:last-child)::after{background:var(--khaki);transform:scaleY(1);transform-origin:top;transition:transform .45s ease .25s}
  /* état initial (JS actif) : cercles vides, ligne vide ; chaque étape se valide quand .on est posé */
  .js .steps li:not(.on) .node{background:var(--bg);border-color:var(--line)}
  .js .steps li:not(.on) .node svg{stroke-dashoffset:24}
  .js .steps li:not(.on) .step-txt{opacity:.55}
  .step-txt{transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .4s ease}
  .steps li.on .node{background:var(--khaki);border-color:var(--khaki)}
  .js .steps li:not(.on):not(:last-child)::after{transform:scaleY(0)}
  @media(prefers-reduced-motion:reduce){.steps li,.node,.node svg,.step-txt,.steps li::after{transition:none !important}.js .steps li:not(.on) .node{background:var(--khaki);border-color:var(--khaki)}.js .steps li:not(.on) .node svg{stroke-dashoffset:0}.js .steps li:not(.on) .step-txt{opacity:1}.steps li:not(:last-child)::after{transform:scaleY(1)}}
  .wl-sep{border:none;border-top:1px solid var(--line);margin:24px 0}
  .wl-rare{font-size:15px;color:var(--txt);font-weight:400;border-left:3px solid var(--camel);padding-left:14px}
  @media(min-height:860px){.wl-col{position:sticky;top:24px}}
  .wl-how{margin-bottom:18px;padding:0 4px}
  .wl-how h2{font-family:'Fraunces',serif;font-size:22px;font-weight:600;color:var(--brown);margin-bottom:12px}
  .wl-how ol{list-style:none}
  .wl-how li{display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:start;padding:9px 0}
  .wl-how .num{width:30px;height:30px;border-radius:50%;background:var(--khaki);color:var(--btn-txt);font-family:'Fraunces',serif;font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center}
  .wl-how p{font-size:14.5px;line-height:1.6;color:var(--txt);text-align:justify;hyphens:auto;margin-top:3px}
  .wl-how li:first-child p{color:var(--ink);font-weight:500}
  .wl-form{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:34px 30px 28px;box-shadow:0 10px 30px rgba(35,20,5,.07)}
  .wl-form h2{font-family:'Fraunces',serif;font-size:27px;font-weight:600;line-height:1.15;color:var(--brown);text-align:center}
  .wl-sub{font-size:14px;color:var(--txt);text-align:center;margin:10px 0 18px}
  .wl-form label:not(.check){text-transform:none;letter-spacing:0;font-size:14.5px;color:var(--ink);font-weight:400;margin:16px 0 6px}
  .req{color:var(--err)}
  button.go.pill{border-radius:30px;margin-top:22px;text-transform:uppercase;letter-spacing:.04em}
  .wl-text{font-size:15.5px;line-height:1.7;color:var(--txt);margin-bottom:20px;font-weight:400}
  .wl-closing{font-family:'Fraunces',serif;font-style:italic;font-size:22px;color:var(--brown);margin-top:22px}
  .wl-done h3{font-size:30px}
  @media(max-width:860px){.wl-grid{grid-template-columns:1fr;gap:28px}.wl-col{position:static !important}.wl-left h1{font-size:34px}.proof b{font-size:26px}}
  @media(max-width:420px){.wl-page{padding:28px 16px 40px}.wl-form{padding:26px 18px 22px}}

  /* Textes toujours justifiés (césures automatiques) */
  .wl-lead,.wl-text,.wl-rare,.wl-sub,.legal p,.legal li,.foot p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
  .wl-closing{text-align:left}

  /* Variante « à cocher soi-même » (?v=cocher) */
  .js .pick{display:block}
  .pick{margin:2px 0 8px}
  .pick-count,.pick-track{display:none}
  .js .pick-count{display:inline}
  .js .pick-track{display:block}
  .pick-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
  .pick-invite{font-family:'Fraunces',serif;font-style:italic;font-size:17px;color:var(--brown)}
  .pick-count{font-size:13px;font-weight:500;color:var(--olive);font-variant-numeric:tabular-nums}
  .pick-track{height:4px;border-radius:4px;background:var(--line);overflow:hidden}
  .pick-track i{display:block;height:100%;width:0;background:var(--khaki);border-radius:4px;transition:width .4s cubic-bezier(.4,0,.2,1)}
  .pick-end{max-height:0;overflow:hidden;opacity:0;transition:max-height .4s ease,opacity .3s ease,margin .3s}
  .pick-end.show{max-height:140px;opacity:1;margin:6px 0 4px}
  .pick-end p{font-size:14.5px;color:var(--brown);font-weight:500;margin-bottom:8px !important}
  .pick-go{display:inline-block;color:var(--btn-txt);background:var(--khaki);padding:10px 20px;border-radius:30px;font-size:13.5px;font-weight:600;text-decoration:none;transition:filter .25s,transform .25s}
  .pick-go:hover{filter:brightness(1.12);transform:translateY(-1px)}
  .v-cocher .steps li{cursor:pointer;user-select:none}
  .v-cocher .steps li:focus-visible{outline:2px solid var(--khaki);outline-offset:-2px}
  .v-cocher.js .steps li:not(.on) .step-txt{opacity:1}
  .v-cocher.js .steps li:not(.on) .node{border-color:var(--olive)}
  .v-cocher.js .steps li:not(.on):hover .node{border-color:var(--khaki);background:rgba(110,99,33,.08)}
  .v-cocher.js .steps li:not(.on):hover .node svg{stroke:var(--khaki);stroke-dashoffset:0;opacity:.45}
  .v-cocher .steps li.on .step-txt{color:var(--ink);font-weight:500}
  .steps li.hint .node{animation:ring 1.6s ease-out infinite}
  @keyframes ring{0%{box-shadow:0 0 0 0 rgba(110,99,33,.45)}100%{box-shadow:0 0 0 12px rgba(110,99,33,0)}}
  @media(prefers-reduced-motion:reduce){.steps li.hint .node{animation:none;box-shadow:0 0 0 5px rgba(110,99,33,.2)}.pick-track i,.pick-end{transition:none}}
  .v2{font-family:'Fraunces',serif;font-style:italic;font-weight:600;color:var(--brown);background:linear-gradient(transparent 62%,rgba(201,152,91,.38) 62%);padding:0 3px;border-radius:2px}
  .pick-end.all p{font-family:'Fraunces',serif;font-style:italic;font-size:21px;font-weight:500;color:var(--brown);margin-bottom:12px !important}
  /* Mot jamais coupé ; césures limitées aux longs mots (7 lettres min., 3 avant et 3 après le tiret) */
  .nohyph{hyphens:none;-webkit-hyphens:none;white-space:nowrap}
  p,li,.step-txt{hyphenate-limit-chars:7 3 3}