:root{
    --cream:#f5f1ea; --paper:#fdfbf7; --slate:#3d4a54; --slate-d:#232c33;
    --rouge:#ce4a3f; --orange:#dd7a35; --jaune:#e0a93b; --vert:#3f8f63; --bleu:#4a69b0; --violet:#8159a8;
    --sienna:#232c33; --sienna-l:#3d4a54; --cyan:#4a69b0; --olive:#3f8f63;
    --plum:#8159a8; --gold:#e0a93b; --line:#e6e0d4; --ink:#1a2126; --muted:#6d685e;
    --track:#ede8dd;
    --spectre:linear-gradient(90deg,#ce4a3f,#dd7a35,#e0a93b,#3f8f63,#4a69b0,#8159a8);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{background:var(--cream);color:var(--ink);font-family:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;line-height:1.55}
  h1,h2,h3{font-family:inherit;letter-spacing:-.01em}
  .wrap{max-width:920px;margin:0 auto;padding:40px 24px 70px}
  .topnav{text-align:center;font-size:.85rem;padding:0;margin:6px 0 30px}
  .topnav a{color:var(--muted);text-decoration:none;font-weight:600;white-space:nowrap;display:inline-block}
  .topnav a:hover{color:var(--slate-d);text-decoration:underline}
  .topnav .sep{color:var(--line);margin:0 7px}
  header{text-align:center;padding:clamp(8px,2vw,14px) 0 clamp(14px,2.6vw,22px);margin-bottom:0}
  header .lock{display:inline-flex;align-items:center;gap:clamp(11px,3vw,20px);text-align:left;max-width:100%}
  header .gem{width:clamp(58px,13.5vw,104px);height:clamp(58px,13.5vw,104px);flex-shrink:0}
  header h1{font-size:clamp(1.95rem,8.4vw,3.5rem);font-weight:500;color:var(--slate-d);line-height:1;letter-spacing:-.02em}
  header h1 b{font-weight:800}
  header .sub{font-size:clamp(.62rem,2.35vw,.9rem);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:clamp(4px,1.2vw,9px);font-weight:600}
  .specline{height:3px;background:var(--spectre);border-radius:2px;margin-bottom:10px}
  h2{font-size:1.45rem;color:var(--slate-d);margin:44px 0 4px;font-weight:800}
  h2::after{content:"";display:block;width:72px;height:3px;background:var(--spectre);border-radius:2px;margin-top:7px}
  h2 svg{width:21px;height:21px;margin-right:9px;vertical-align:-3px;fill:none;stroke:var(--slate);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .intericon svg{width:46px;height:46px;fill:none;stroke:var(--slate);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .lead{color:var(--muted);font-size:.88rem;margin:8px 0 18px}
  .btn{display:inline-block;background:var(--slate-d);color:#fff;border:none;border-radius:9px;padding:12px 26px;font-size:1rem;cursor:pointer;font-family:inherit;font-weight:700}
  .btn:hover{background:var(--spectre)}
  .btn.ghost{background:transparent;color:var(--slate-d);border:1.5px solid var(--slate-d);font-weight:600}
  .btn.ghost:hover{background:linear-gradient(var(--paper),var(--paper)) padding-box,var(--spectre) border-box;border-color:transparent;color:var(--slate-d)}
  .hidden{display:none!important}
  .card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:22px}

  #progress{position:sticky;top:0;background:var(--cream);padding:10px 0;z-index:5}
  #progress .track{height:8px;background:var(--track);border-radius:4px;overflow:hidden}
  #progress .track i{display:block;height:100%;background:var(--spectre);width:0;transition:width .2s}
  #progress .txt{font-size:.78rem;color:var(--muted);margin-top:4px;text-align:right}
  .qcard{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:22px;margin:14px 0}
  .qcard .mod{font-size:.7rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted)}
  .qcard .txt{font-size:1.06rem;color:var(--slate-d);margin:8px 0 14px}
  .likert{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
  .likert button{background:var(--track);border:1px solid var(--line);border-radius:8px;padding:10px 4px;font-size:.78rem;cursor:pointer;color:var(--slate);font-family:inherit}
  .likert button:hover{background:#e0d5bd}
  .likert button.sel{background:var(--slate-d);color:#fff;border-color:var(--slate-d)}
  .vark{display:grid;gap:8px}
  .vark button{background:var(--track);border:1px solid var(--line);border-radius:8px;padding:12px;font-size:.9rem;cursor:pointer;text-align:left;color:var(--slate);font-family:inherit}
  .vark button:hover{background:#e0d5bd}
  .vark button.sel{background:var(--slate-d);color:#fff;border-color:var(--slate-d)}
  .nav{display:flex;justify-content:space-between;margin-top:16px}

  .synth{background:var(--paper);border:1px solid var(--line);border-left:5px solid transparent;border-image:linear-gradient(180deg,#ce4a3f,#dd7a35,#e0a93b,#3f8f63,#4a69b0,#8159a8) 1;border-radius:0 12px 12px 0;padding:24px;margin-top:16px;font-size:.98rem}
  .synth p{margin:10px 0}
  .synth .si svg{width:16px;height:16px;margin-right:7px;vertical-align:-2px;fill:none;stroke:var(--slate);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .donuts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-top:16px}
  .donutbox{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 8px;text-align:center}
  .donut{--v:50;--c:var(--sienna);width:96px;height:96px;border-radius:50%;margin:0 auto;background:conic-gradient(var(--c) calc(var(--v)*1%), var(--track) 0);display:flex;align-items:center;justify-content:center;position:relative}
  .donut::before{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--paper)}
  .donut span{position:relative;font-size:1.45rem;font-weight:800;color:var(--c)}
  .donutbox .t{font-weight:600;color:var(--slate-d);margin-top:6px;font-size:.9rem}
  .six6{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:16px}
  @media(max-width:760px){.six6{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:430px){.six6{grid-template-columns:repeat(2,1fr)}}
  /* dans les aperçus, la largeur de mise en page est fixe : les seuils de la
     fenêtre ne s'appliquent pas, on rétablit six colonnes (trois sur le téléphone) */
  .desktop .vue .inner .six6,.sheet .page .inner .six6{grid-template-columns:repeat(6,1fr)}
  .phone .vue .inner .six6{grid-template-columns:repeat(3,1fr)}
  .brow{display:grid;grid-template-columns:200px 1fr 40px;align-items:center;gap:12px;font-size:.88rem;margin:6px 0}
  .brow .lab{color:var(--slate-d)}
  .bar{height:9px;background:var(--track);border-radius:5px;overflow:hidden}
  .bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#6b84c4,var(--bleu))}
  .brow.cy .bar i{background:linear-gradient(90deg,#9d7fc0,var(--violet))}
  .brow.ol .bar i{background:linear-gradient(90deg,#6aab8a,var(--vert))}
  .brow.pl .bar i{background:linear-gradient(90deg,#e59a63,var(--orange))}
  .brow.gd .bar i{background:linear-gradient(90deg,#ecc26e,var(--jaune))}
  .brow .val{text-align:right;font-weight:700;color:var(--slate)}
  .tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
  @media(max-width:760px){.tgrid{grid-template-columns:repeat(2,1fr)}}
  .tcard{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 8px;text-align:center}
  .tcard .tc{font-weight:800;color:var(--slate-d);font-size:1.05rem;margin-top:2px}
  .tcard .tn{font-size:.86rem;color:var(--slate);margin-top:1px}
  .tcard .tp{font-size:.76rem;color:var(--muted);margin-top:4px}
  /* formulaire de contact */
  .ctgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media(max-width:620px){.ctgrid{grid-template-columns:1fr}}
  .ct{display:flex;flex-direction:column;gap:5px}
  .ct.large{grid-column:1/-1}
  .ct span{font-size:.82rem;font-weight:700;color:var(--slate-d)}
  .ct span b{color:var(--rouge)}
  .ct input,.ct textarea{font:inherit;font-size:.94rem;color:var(--ink);background:var(--paper);
        border:1px solid var(--line);border-radius:9px;padding:9px 11px;width:100%;box-sizing:border-box}
  .ct input:focus,.ct textarea:focus{outline:2px solid var(--bleu);outline-offset:1px;border-color:var(--bleu)}
  .ct input.ko,.ct textarea.ko{border-color:var(--rouge);background:#fdf3f2}
  .cterr{color:var(--rouge);font-size:.86rem;margin:12px 0 0;display:none}
  .ctopt{margin-top:16px;display:flex;flex-direction:column;gap:9px}
  .ctcase{display:flex;gap:9px;align-items:flex-start;font-size:.85rem;color:var(--slate);line-height:1.45;cursor:pointer}
  .ctcase input{margin:2px 0 0;flex:0 0 auto;width:16px;height:16px;accent-color:var(--slate-d)}
  .ctok{color:var(--vert);font-size:.88rem;margin:12px 0 0;display:none}
  .biblio{list-style:none;margin:10px 0 0;padding:0}
  .biblio li{position:relative;padding-left:18px;font-size:.85rem;color:var(--slate);line-height:1.5;margin:7px 0}
  .biblio li::before{content:"—";position:absolute;left:0;color:var(--muted)}
  /* panneau de partage */
  .shwrap{position:fixed;inset:0;z-index:60;background:rgba(35,44,51,.55);display:flex;align-items:flex-start;
        justify-content:center;padding:24px 16px;overflow:auto}
  .shbox{background:var(--cream);border-radius:16px;max-width:940px;width:100%;padding:22px 24px 26px;position:relative;
        box-shadow:0 24px 60px rgba(35,44,51,.3)}
  .shbox h3{margin:0 0 4px;font-size:1.25rem;color:var(--slate-d)}
  .shclose{position:absolute;top:12px;right:14px;border:0;background:none;font-size:1.6rem;line-height:1;
        color:var(--muted);cursor:pointer}
  .shrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
  .shopt{border:1px solid var(--line);background:var(--paper);border-radius:22px;padding:7px 14px;font:inherit;
        font-size:.85rem;color:var(--slate);cursor:pointer}
  .shopt.sel{background:var(--slate-d);border-color:var(--slate-d);color:var(--paper);font-weight:700}
  .shrat{opacity:.62;font-size:.8em;margin-left:2px}
  .shopt:disabled{opacity:.42;cursor:default}
  .shduo{display:flex;gap:22px;align-items:flex-start;margin-top:16px;flex-wrap:wrap}
  .shprev{flex:0 0 auto;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px}
  .shprev svg{display:block;height:auto}
  .shcol{flex:1 1 300px;min-width:0}
  /* rangées d'icônes de destination, sous les aperçus d'accueil */
  .dests{display:flex;gap:12px;justify-content:center;margin:12px 0 2px;color:var(--slate)}
  .dests span{display:flex;align-items:center;justify-content:center;width:26px;height:26px}
  .dests svg{width:20px;height:20px}
  /* icônes dans les boutons d'action du rapport */
  .btn .bic{display:inline-flex;gap:5px;vertical-align:-3px;margin-left:10px}
  .btn .bic svg{width:16px;height:16px}
  .shsoc{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:18px}
  .shsoclab{font-size:.78rem;letter-spacing:.1em;color:var(--muted);font-weight:700;text-transform:uppercase;margin-right:2px}
  .shic{width:38px;height:38px;border:1px solid var(--line);background:var(--paper);border-radius:50%;
        display:flex;align-items:center;justify-content:center;color:var(--slate);cursor:pointer;padding:0}
  .shic svg{width:20px;height:20px}
  .shic:hover{background:var(--slate-d);border-color:var(--slate-d);color:var(--paper)}
  @media(max-width:700px){.shbox{padding:18px 16px 22px}.shduo{gap:14px}}
  .actions{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 24px}
  .actions.bas{margin:34px 0 0}
  /* projection Big Five : une réglette, pour ne pas répéter les anneaux ni les jauges */
  .b5box{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-top:14px}
  .b5r{display:flex;align-items:center;gap:12px;margin:11px 0}
  .b5r .let{flex:0 0 30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
        color:#fdfbf7;font-weight:800;font-size:.92rem}
  .b5r .nm{flex:0 0 190px;min-width:0;font-size:.88rem;color:var(--slate-d);font-weight:600}
  .b5r .nm i{display:block;font-size:.74rem;color:var(--muted);font-weight:400;font-style:normal}
  .b5r .tr{flex:1 1 auto;min-width:0;height:3px;background:var(--track);border-radius:2px;position:relative}
  .b5r .tr b{position:absolute;top:-5px;width:13px;height:13px;border-radius:50%;transform:translateX(-50%)}
  .b5r .vl{flex:0 0 40px;text-align:right;font-weight:800;font-size:.95rem;color:var(--slate-d)}
  @media(max-width:520px){.b5r .nm{flex:0 0 120px}.b5r .nm i{display:none}}
  .tfam{text-align:center;font-size:.84rem;font-weight:700;letter-spacing:.04em;margin-top:3px}
  /* les quatre familles de types */
  .famgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:14px}
  @media(max-width:700px){.famgrid{grid-template-columns:1fr}}
  .famc{background:var(--paper);border:1px solid var(--line);border-left-width:5px;border-radius:12px;padding:15px 17px}
  .famc h4{font-size:1rem;color:var(--slate-d);margin-bottom:3px}
  .famc .fx{font-size:.78rem;color:var(--muted);font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
  .famc .fd{font-size:.86rem;color:var(--slate);line-height:1.5}
  .famc .ft{font-size:.8rem;color:var(--muted);margin-top:8px}
  .tcard{border-top:4px solid transparent}
  /* Typologie : dimensions et facettes */
  .hxgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
  @media(max-width:900px){.hxgrid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.hxgrid{grid-template-columns:1fr}}
  .hxc{background:var(--paper);border:1px solid var(--line);border-top-width:4px;border-radius:12px;padding:16px}
  .hxc h4{font-size:1rem;color:var(--slate-d);margin-bottom:4px;display:flex;align-items:center;gap:9px}
  .hxc h4 svg{width:22px;height:22px;flex-shrink:0}
  .hxc .hd{font-size:.86rem;color:var(--slate);margin-bottom:9px}
  .hxc .hf{font-size:.79rem;color:var(--muted);line-height:1.5}
  .fcgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:14px}
  @media(max-width:760px){.fcgrid{grid-template-columns:1fr}}
  .fcb{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
  .fcb h4{font-size:.95rem;color:var(--slate-d);margin-bottom:7px}
  .fcb .fl{margin:6px 0;font-size:.84rem;line-height:1.45}
  .fcb .fl b{color:var(--slate-d)}
  .fcb .fl span{color:var(--muted)}
  .astq{font-size:.8rem;color:var(--muted);margin-top:10px;font-style:italic}
  .egrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
  @media(max-width:760px){.egrid{grid-template-columns:1fr}}
  .ecen{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px}
  .ecen h4{font-size:.95rem;color:var(--slate-d);margin-bottom:2px}
  .ecen .ed{font-size:.78rem;color:var(--muted);font-style:italic;margin-bottom:6px}
  .ent{color:var(--muted);font-weight:400;white-space:nowrap}
  .ecen .es{font-size:.8rem;color:var(--slate);margin-bottom:10px}
  .ecen .et{display:flex;align-items:baseline;gap:8px;margin:7px 0;font-size:.9rem;color:var(--slate-d)}
  .ecen .et b{font-size:1.15rem;min-width:20px;text-align:center}
  /* ---- aperçu de la page d'accueil ---- */
  .apercu{margin-top:44px}
  .apercu h2{margin-top:0}
  .mesures{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0 4px}
  .mes{display:inline-flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);
       border-radius:22px;padding:7px 14px 7px 10px;font-size:.85rem;color:var(--slate-d);font-weight:600}
  .mes svg{width:22px;height:22px;flex-shrink:0}
  .mes.tr svg{fill:none;stroke:var(--slate);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  /* les vues sont en position absolue : mises à l'échelle, elles ne doivent pas
     imposer leur largeur réelle aux conteneurs flexibles */
  .vue{position:relative;overflow:hidden;min-width:0;background:var(--cream)}
  .vue .inner{position:absolute;top:0;left:0;transform-origin:top left;padding:14px 16px}
  /* la feuille garde de vraies marges d'impression : elles sont posées en JS,
     en proportion de la largeur de la page, donc constantes en millimètres */
  .sheet .page .inner{position:absolute;transform-origin:top left;padding:0}
  /* dans les aperçus, on aère un peu plus les titres de section qu'à l'écran réel */
  .vue .inner h2,.sheet .page .inner h2{margin-top:62px}
  .vue .fade{position:absolute;left:0;right:0;bottom:0;height:74px;z-index:1;
        background:linear-gradient(rgba(245,241,234,0),var(--cream) 78%)}
  .showcase{display:flex;gap:22px;align-items:flex-end;justify-content:center;margin:24px 0 46px}
  .desktop{flex:1 1 0;min-width:0;max-width:620px}
  .desktop .bezel{background:linear-gradient(#41505b,#28323a);border-radius:12px;padding:11px 11px 15px;
        box-shadow:0 16px 34px rgba(35,44,51,.2),inset 0 1px 0 rgba(255,255,255,.14)}
  .desktop .vue{aspect-ratio:16/10;border-radius:4px;box-shadow:inset 0 1px 5px rgba(0,0,0,.2)}
  .desktop .neck{width:86px;height:24px;margin:0 auto;background:linear-gradient(#c2cbd1,#9aa6ae)}
  .desktop .foot{width:196px;height:11px;margin:0 auto;border-radius:0 0 7px 7px;
        background:linear-gradient(#b3bec5,#8b979f);box-shadow:0 8px 16px rgba(35,44,51,.16)}
  .phone{flex:0 0 158px;width:158px;min-width:0;position:relative;border-radius:24px;padding:7px;
        margin-bottom:34px;background:linear-gradient(#41505b,#232c33);
        box-shadow:0 14px 28px rgba(35,44,51,.22),inset 0 1px 0 rgba(255,255,255,.16)}
  .phone .notch{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:48px;height:13px;
        background:#232c33;border-radius:0 0 8px 8px;z-index:2}
  .phone .vue{aspect-ratio:9/19;border-radius:18px}
  /* bandeau plein sous l'encoche : le contenu décalé ne doit pas déborder au-dessus du titre */
  .phone .vue::before{content:"";position:absolute;left:0;right:0;top:0;height:22px;
        background:var(--cream);z-index:1}
  .outputs{display:flex;gap:40px;justify-content:center;align-items:flex-start;flex-wrap:wrap;margin-top:52px}
  .outputs figure{margin:0;width:270px;display:flex;flex-direction:column;align-items:center;gap:12px}
  .outputs figcaption{font-size:.82rem;color:var(--muted);text-align:center;line-height:1.45}
  .tilt{transform:rotate(-2.5deg);box-shadow:0 14px 32px rgba(35,44,51,.18);border-radius:12px;
        overflow:hidden;border:1px solid var(--line);background:var(--paper);width:100%}
  .tilt svg{display:block;width:100%;height:auto;max-width:100%}
  .sheet{width:224px;transform:rotate(2deg)}
  .sheet .page{position:relative;background:#fff;border:1px solid #e2ddd0;border-radius:3px;
        aspect-ratio:210/297;overflow:hidden;min-width:0;box-shadow:0 12px 26px rgba(35,44,51,.16)}
  .sheet .page .fade{position:absolute;left:0;right:0;bottom:0;height:76px;z-index:1;
        background:linear-gradient(rgba(255,255,255,0),#fff 76%)}
  @media(max-width:700px){
    .showcase{flex-direction:column;align-items:center;gap:24px}
    .desktop{width:100%;max-width:none}
    .phone{flex:0 0 auto;width:172px;margin-bottom:0}
  }
  .ennrow{cursor:pointer;border-radius:8px;padding:2px 8px;margin:0 -8px;transition:background .15s}
  .ennrow:hover{background:var(--track)}
  .ennrow.on{background:#f6ece9}
  .ennrow.on .lab{font-weight:700}
  .totop{position:fixed;right:22px;bottom:22px;width:48px;height:48px;border-radius:50%;border:none;
        background:var(--slate-d);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
        box-shadow:0 6px 18px rgba(35,44,51,.28);opacity:0;visibility:hidden;transform:translateY(10px);
        transition:opacity .2s,transform .2s,visibility .2s;z-index:20}
  .totop.on{opacity:1;visibility:visible;transform:none}
  .totop:hover{background:var(--slate)}
  .totop svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  .lk{color:var(--slate-d);font-weight:600;text-decoration:none;border-bottom:1px solid #cfc6b2}
  .lk:hover{border-bottom-color:var(--slate-d)}
  .somm{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
  .somm a{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:6px 14px;
        font-size:.82rem;color:var(--slate);text-decoration:none;font-weight:600;white-space:nowrap}
  .somm a:hover{background:var(--track);color:var(--slate-d);border-color:#d6cdb8}
  .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
  @media(max-width:760px){.pgrid{grid-template-columns:1fr}}
  .pcard{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px 16px 18px;display:flex;gap:14px;align-items:flex-start}
  .pcard .pic{flex-shrink:0;width:46px;height:46px}
  .pcard .pic svg{width:46px;height:46px;display:block}
  .pcard .pn{font-weight:800;color:var(--slate-d);font-size:1rem}
  .pcard .pd{font-size:.84rem;color:var(--muted);margin-top:3px}
  .eic{display:inline-block;margin-right:8px;font-size:24px;line-height:1;vertical-align:-5px}
  .eic svg{width:27px;height:27px;vertical-align:-6px}
  .emo{font-size:24px;line-height:1}
  .tic svg{width:24px;height:24px;vertical-align:-7px;margin-right:4px}
  .ticL svg{width:52px;height:52px}
  .vico svg{width:22px;height:22px;vertical-align:-5px;margin-right:8px}
  .varkduo{display:flex;gap:26px;align-items:flex-start;margin-top:18px;flex-wrap:wrap}
  .vkbars{flex:1 1 380px;min-width:280px}
  .vkbars .brow{grid-template-columns:170px 1fr 34px}
  .vkcloud{flex:0 0 210px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;
        padding:16px 18px;background:var(--paper);border:1px solid var(--line);border-radius:12px}
  @media(max-width:760px){.vkcloud{flex:1 1 100%}.vkbars .brow{grid-template-columns:140px 1fr 30px}}
  .vcw{display:inline-flex;align-items:center;gap:.28em;font-weight:700;line-height:1.15}
  .vcw svg{width:1em;height:1em;flex-shrink:0}
  .qeico{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:rgba(253,251,247,.95);margin-bottom:8px}
  .qeico svg{width:34px;height:34px}
  .centres{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 4px}
  .cent{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:9px 17px;font-size:.93rem;color:var(--slate-d)}
  .cent.on{border-color:var(--slate-d);border-width:2px;font-weight:600}
  .leg{display:flex;flex-wrap:wrap;gap:8px 18px;margin:12px 0 2px;font-size:.8rem;color:var(--slate)}
  .leg i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
  .cols2{display:grid;grid-template-columns:1fr 1fr;gap:4px 36px}
  @media(max-width:680px){.cols2{grid-template-columns:1fr}}
  .hexgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
  @media(max-width:760px){.hexgrid{grid-template-columns:1fr}}
  .panel{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:20px}
  .panel h3{font-size:1.12rem;color:var(--slate-d);margin-bottom:2px;display:flex;justify-content:space-between;align-items:baseline}
  .panel h3 .sc{font-size:1.45rem;font-weight:800;color:var(--slate-d)}
  .panel .d{font-size:.78rem;color:var(--muted);margin-bottom:10px;font-style:italic}
  .duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
  @media(max-width:760px){.duo{grid-template-columns:1fr}}
  .typebox{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:22px;margin-top:16px}
  .typebox .code{font-size:2.5rem;font-weight:800;color:var(--slate-d);text-align:center;letter-spacing:-.01em}
  .typebox .tname{text-align:center;font-size:1.25rem;color:var(--slate-d);font-weight:700}
  .typebox .tdesc{text-align:center;font-size:.9rem;color:var(--muted);margin:6px auto 14px;max-width:520px}
  .axis{display:grid;grid-template-columns:110px 1fr 110px;align-items:center;gap:8px;font-size:.8rem;margin:8px 0}
  .axis .l,.axis .r{color:var(--muted)} .axis .r{text-align:right}
  .axis .l.on,.axis .r.on{color:var(--slate-d);font-weight:700}
  .axis .track{height:8px;background:var(--track);border-radius:4px;position:relative}
  .axis .track b{position:absolute;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;background:var(--spectre);border:3px solid var(--paper);box-shadow:0 0 0 1px var(--line)}
  .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
  .chip{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:8px 16px;font-size:.86rem;color:var(--slate-d);cursor:pointer}
  .chip.on{border-color:var(--jaune);border-width:2px}
  .chip b{color:var(--slate-d);font-weight:800}
  .gold{background:linear-gradient(135deg,var(--jaune),var(--orange));color:#fff;border-radius:12px;padding:18px;text-align:center;margin-top:14px}
  .gold .n{font-size:1.45rem;font-weight:800}
  .gold .t{font-size:.85rem;opacity:.93;margin-top:3px}
  .note{font-size:.78rem;color:var(--muted);font-style:italic;margin-top:10px}
  footer{margin-top:50px;padding-top:14px;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted);text-align:center}
  footer a{color:var(--muted);text-decoration:none}
  footer a:hover{color:var(--slate-d);text-decoration:underline}
  @media print{.noprint{display:none!important} body{background:#fff}}

/* ---- ajouts liés au site multi-pages ---- */
a.skip{position:absolute;left:-9999px;top:0;background:var(--slate-d);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:99}
a.skip:focus{left:0}
header .lock{text-decoration:none;color:inherit;cursor:pointer}
header .lock .wm{display:block;font-size:clamp(1.95rem,8.4vw,3.5rem);font-weight:500;color:var(--slate-d);line-height:1;letter-spacing:-.02em}
header .lock .wm b{font-weight:800}
header .lock .sub{display:block;font-size:clamp(.62rem,2.35vw,.9rem);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:clamp(4px,1.2vw,9px);font-weight:600}
.topnav a[aria-current="page"]{color:var(--slate-d);text-decoration:underline}
main{display:block}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* le texte d'un bouton ne se souligne jamais, même quand le bouton est un lien */
.btn,.btn:hover,.btn:focus,a.btn,a.btn:hover{text-decoration:none}
/* pied de page */
footer .fbase{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-bottom:9px}
footer .fline{max-width:280px;margin:0 auto 12px;height:3px}
footer .fpitch{font-size:.88rem;color:var(--slate);margin-bottom:12px}
footer .flinks{font-size:.82rem;line-height:1.9}
footer .fgem{display:block;width:34px;margin:18px auto 4px;opacity:.85}
footer .fgem svg{display:block;width:34px;height:34px}
footer .fgem:hover{opacity:1}
.faq{margin-top:14px}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:14px 18px;margin-top:10px}
.faq summary{font-weight:700;color:var(--slate-d);cursor:pointer;font-size:1rem}
.faq details p{font-size:.93rem;margin-top:10px}
.demoban{background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--jaune);border-radius:0 10px 10px 0;padding:14px 18px;margin-bottom:18px;font-size:.9rem;color:var(--slate-d)}
/* encadré « bon à savoir » : plus petit, gris, avec son picto */
.bonsavoir{margin-top:18px;background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:13px 16px;display:flex;gap:11px;align-items:flex-start;font-size:.84rem;color:var(--muted);line-height:1.55}
.bonsavoir>svg{width:21px;height:21px;flex-shrink:0;margin-top:2px;fill:none;stroke:var(--muted);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bonsavoir b{color:var(--slate)}
.bonsavoir p{margin-top:7px}
.bonsavoir p:first-child{margin-top:0}
.bonsavoir a{color:var(--slate);font-weight:600}
/* capsules de sommaire : le picto de la rubrique devant le libellé */
.somm a svg{width:15px;height:15px;vertical-align:-2.5px;margin-right:7px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* destinations du rapport : pictos plus grands, aux couleurs des services */
.dests{gap:16px}
.dests span{width:34px;height:34px}
.dests svg{width:28px;height:28px}

main h1{font-size:1.9rem;font-weight:800;color:var(--slate-d);line-height:1.15}

/* Impression : sans cette règle, le navigateur supprime les fonds et les dégradés,
   et les anneaux de score, les jauges et les traits multicolores disparaissent du PDF
   enregistré, sauf à cocher « Graphismes d'arrière-plan » dans la boîte d'impression. */
@media print{
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  a[href^="http"]::after{content:""}
}

/* =====================================================================
   Mur d'adresse et verrous du rapport.
   Ce qui est voilé n'est jamais le résultat de la personne : c'est le profil
   de démonstration. Le flou est un argument, pas une protection ; la
   protection tient à ce qui est affiché derrière.
   ===================================================================== */
.mur{background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--jaune);
     border-radius:0 12px 12px 0;padding:18px 22px;margin:16px 0 26px}
.mur-titre{font-size:1rem;color:var(--slate-d);font-weight:700;margin-bottom:13px;line-height:1.45}
.mur-ligne{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.mur-ligne input{padding:11px 14px;border:1px solid var(--line);border-radius:8px;
     font-family:inherit;font-size:.95rem;background:var(--cream);min-width:240px}
.mur-ligne input:focus{outline:2px solid var(--slate-d);outline-offset:1px}
#murCode{letter-spacing:.45em;font-size:1.15rem;font-weight:700;text-align:center;
     min-width:160px;max-width:190px;padding-right:0}
.mur-case{display:flex;gap:9px;align-items:flex-start;margin-top:13px;font-size:.84rem;
     color:var(--muted);line-height:1.5;cursor:pointer}
.mur-case input{margin-top:3px;flex-shrink:0}
.mur-note{font-size:.82rem;color:var(--muted);margin-top:13px;line-height:1.5}
.mur-err{display:none;font-size:.86rem;color:#a5432f;margin-top:11px;font-weight:600}
.lienplat{background:none;border:0;padding:0;font:inherit;color:var(--slate);
     text-decoration:underline;cursor:pointer}
.lienplat:hover{color:var(--slate-d)}
.lienplat[disabled]{color:var(--muted);text-decoration:none;cursor:default}

/* Le voile ne rogne jamais sa propre mention : la hauteur minimale garantit
   que le texte et le bouton tiennent, même au-dessus d'un contenu très court.
   Le rognage est porté par le décor seul, pas par le cadre. */
.verrou{position:relative;margin:14px 0 22px;border-radius:12px}
.verrou-decor{filter:blur(7px);opacity:.55;pointer-events:none;user-select:none;
     max-height:430px;min-height:215px;overflow:hidden;border-radius:12px}
.verrou-achat .verrou-decor,
.verrou-achete .verrou-decor{max-height:300px;min-height:195px}
.verrou::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70%;
     border-radius:0 0 12px 12px;
     background:linear-gradient(rgba(245,241,234,0),var(--cream) 72%);pointer-events:none}
.verrou-mention{position:absolute;left:0;right:0;bottom:14px;z-index:2;padding:0 16px;
     display:flex;flex-direction:column;align-items:center;gap:13px;text-align:center}
.verrou-mention p{max-width:560px;font-size:.95rem;line-height:1.5;color:var(--slate-d);
     font-weight:600;background:var(--paper);border:1px solid var(--line);
     border-radius:10px;padding:13px 20px;margin:0}
.verrou-achat .verrou-mention p{border-color:#d8cba8;background:#f8f2e2}
/* Après achat : même voile, mention verte plutôt qu'ambrée. Le lecteur doit
   voir d'un coup d'œil que ce bloc lui appartient, et non qu'il lui manque. */
.verrou-achete .verrou-mention p{border-color:#bcd8c4;background:#eef6f0}
.achat-fait{margin:0 0 20px;padding:16px 20px;border-radius:12px;
     border:1px solid #bcd8c4;background:#eef6f0;
     display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.achat-fait p{margin:0;font-size:.95rem;line-height:1.55;color:var(--slate-d)}
/* dans une colonne de classement, la place est comptée */
.panel .verrou-decor{min-height:185px}
.panel .verrou-mention p{font-size:.86rem;padding:10px 13px}
.panel .verrou-mention .btn{padding:10px 18px;font-size:.92rem}
@media(max-width:560px){
  .verrou-decor{max-height:340px;min-height:200px}
  .verrou-achat .verrou-decor,
  .verrou-achete .verrou-decor{max-height:240px}
  .verrou-mention p{font-size:.88rem;padding:11px 14px}
}
/* rien de tout cela ne s'imprime : on n'imprime que ce qu'on a le droit de lire */
@media print{.verrou,.mur,.achat-fait{display:none!important}}
/* Bandeau visible uniquement à l'ouverture locale du fichier, jamais en ligne. */
.mur-local{margin-top:13px;font-size:.84rem;line-height:1.5;color:#7a5a1e;background:#f8f2e2;
  border:1px dashed #d8cba8;border-radius:8px;padding:10px 13px}

/* =====================================================================
   Page d'achat du rapport complet.
   ===================================================================== */
.listeachat{margin:14px 0 0 20px;font-size:.94rem;line-height:1.6}
.listeachat li{margin-top:7px}
.prixbox{background:var(--paper);border:1px solid var(--line);border-radius:12px;
     padding:22px 24px;margin-top:20px}
.prixligne{display:flex;gap:26px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.prixmontant{font-size:2.6rem;font-weight:800;color:var(--slate-d);line-height:1}
.prixmontant span{font-size:1.1rem;font-weight:700;color:var(--muted)}
.prixnote{font-size:.84rem;color:var(--muted);margin-top:6px}
.prixquoi{flex:1;min-width:270px}
.prixquoi p{font-size:.92rem;color:var(--slate);line-height:1.55;margin:0}
.achat-etat{margin-top:18px;font-size:.9rem;line-height:1.55;border-radius:10px;padding:13px 17px}
.achat-etat:empty{display:none}
.achat-pret{background:#eef4ee;border:1px solid #c9dccb;color:var(--slate-d)}
.achat-bloque{background:#f8f2e2;border:1px solid #d8cba8;color:#7a5a1e}
.achat-cases{margin-top:16px}
.achat-action{margin-top:20px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.achat-action .btn:disabled{opacity:.5;cursor:not-allowed}
.achat-action .btn:disabled:hover{background:var(--slate-d)}

/* Page de remerciement. */
.merci-action{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.btn-inerte{opacity:.45;cursor:not-allowed;pointer-events:none}
#merci .ct small{display:block;font-size:.78rem;color:var(--muted);margin-top:4px;line-height:1.45}
#merci .ct em{font-style:normal;font-weight:400;color:var(--muted);font-size:.8rem}

/* Mentions restant à compléter dans un document en projet. */
mark.atrouver{background:#ffe97a;color:#4a3c00;padding:1px 4px;border-radius:3px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
@media print{mark.atrouver{background:#ffe97a!important}}

/* Recommandations du rapport payant. */
.tension{margin-top:14px}
.tension h3{color:var(--slate-d)}
.tension .d{font-size:.95rem;line-height:1.62;margin-top:8px;color:var(--slate);font-style:normal}
.commentaire{margin-top:16px;border-left:4px solid var(--jaune)}
.commentaire h3{color:var(--slate-d)}
.commentaire .d{font-size:.95rem;line-height:1.62;margin-top:9px;color:var(--slate);font-style:normal}
/* Bascule d'un levier vers son revers : la même disposition, vue de
   l'autre côté. Discrète et sans ambiguïté — le lecteur doit voir que
   ce qui suit prolonge le paragraphe précédent, et ne le contredit pas. */
.bascule{margin:14px 0 0;font-size:.82rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--jaune-d,#a9762f)}
.bascule::before{content:"";display:inline-block;width:18px;height:2px;border-radius:1px;
  background:currentColor;vertical-align:middle;margin-right:8px;opacity:.6}

/* Capsules « gratuit » / « rapport complet » de la page d'exemple.
   Elles n'existent que là : le rapport réel n'a pas à se commenter
   lui-même, et le rapport payant encore moins. Discrètes, alignées sur
   la ligne du titre, et retirées à l'impression — elles renseignent sur
   l'offre, pas sur le profil. */
.cap{display:inline-block;vertical-align:middle;margin-left:10px;padding:3px 9px;
  border-radius:999px;font-size:.66rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;white-space:nowrap;line-height:1.5}
.cap-g{background:#e8efe9;color:#2c6b48;border:1px solid #bcd3c4}
.cap-p{background:#fdf1d8;color:#8a6a1f;border:1px solid #e6cf94}
h2 .cap,h3 .cap{position:relative;top:-2px}
.panel > .cap{margin:0 0 10px;display:block;width:fit-content}
@media print{.cap{display:none}}
@media(max-width:560px){.cap{font-size:.6rem;padding:2px 7px;margin-left:6px}}