/* Charte WAKEA — piste 3. Le cuivre ne dépasse jamais cinq pour cent d'un écran. */
:root{
  --obsidian:#0B0D10; --corps:#31343A; --basalt:#6B6F75; --copper:#A4633A;
  --argile:#EBD9C7; --glacier:#E6F1FB; --stone:#FAF8F5;
  --hair:#E4E0DA; --hair2:#EEEBE6; --line:#C9C4BC;
  --vert:#3F7A56; --ambre:#B07B2C; --rouge:#A8453A;
  --sans:Arial,Helvetica,sans-serif; --serif:Georgia,'Times New Roman',serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--corps);font:13px/1.45 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--copper);text-decoration:none}a:hover{color:#7F4B2C}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--copper);outline-offset:2px}

.top{height:54px;background:var(--obsidian);display:flex;align-items:center;gap:26px;padding:0 22px;position:sticky;top:0;z-index:40}
.marque{display:flex;align-items:baseline;gap:9px}
.marque b{font:400 18px/1 var(--serif);color:#fff;letter-spacing:.5px}
.marque i{width:17px;height:1px;background:var(--copper);display:inline-block;transform:translateY(-5px)}
.marque s{font-size:9.5px;color:#8A8E94;letter-spacing:1.4px;text-decoration:none}
.nav{display:flex;gap:3px}
.nav button{font-size:12.5px;color:#9AA0A6;padding:6px 11px;border-radius:3px}
.nav button:hover{color:#fff}.nav button[aria-current]{color:#fff;background:#1C1F24}
.qui{width:27px;height:27px;border:1px solid var(--copper);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9.5px;color:#fff;letter-spacing:.6px}

.page{padding:20px 28px;display:flex;flex-direction:column;gap:18px;max-width:1560px}
.h1{font:400 23px/1.2 var(--serif);color:var(--obsidian)}
.sur{font-size:9.5px;color:var(--copper);letter-spacing:1.5px;font-weight:bold}
.sous{font-size:11.5px;color:var(--basalt)}
.rang{display:flex;align-items:center;gap:10px}
.entre{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.pousse{flex-grow:1}.sourd{color:var(--basalt)}.pt{font-size:10.5px}.sm{font-size:11.5px}
.filet{border-bottom:1px solid var(--obsidian);padding-bottom:6px;display:flex;align-items:baseline;gap:10px}
.filet-l{border-bottom:1px solid var(--hair);padding-bottom:6px;display:flex;align-items:baseline;gap:10px}

.bt{height:30px;border:1px solid var(--hair);border-radius:3px;display:inline-flex;align-items:center;gap:6px;padding:0 11px;font-size:12px;white-space:nowrap}
.bt:hover{border-color:var(--line);background:var(--stone)}
.bt:disabled{opacity:.45;cursor:not-allowed}
.bt.p{background:var(--obsidian);color:#fff;border-color:var(--obsidian)}.bt.p:hover{background:#22262B}
.bt.c{border-color:var(--copper);color:var(--copper)}.bt.c:hover{background:var(--argile)}
.bt.s{height:26px;font-size:11.5px;padding:0 9px}
.puce{font-size:11.5px;border:1px solid var(--hair);border-radius:2px;padding:3px 9px;color:var(--basalt)}
.puce[aria-pressed="true"]{background:var(--argile);color:var(--obsidian);border-color:var(--argile)}
.et{font-size:11px;background:var(--argile);color:var(--obsidian);border-radius:2px;padding:2px 7px;display:inline-block}
.et.o{background:none;border:1px solid var(--hair);color:var(--basalt)}
.et.v{background:none;border:1px solid var(--vert);color:var(--vert)}
.et.a{background:none;border:1px solid var(--ambre);color:var(--ambre)}
.tri{font-size:9px;color:var(--basalt);border:1px solid var(--hair);border-radius:2px;padding:0 4px}

.tuiles{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.tuile{border-top:1px solid var(--hair);padding-top:10px;display:flex;flex-direction:column;gap:3px}
.tuile.k{border-top-color:var(--copper)}
.tuile b{font:400 26px/1 var(--serif);color:var(--obsidian)}
.tuile span{font-size:10.5px;color:var(--basalt)}

.large{overflow-x:auto}.large>div{min-width:900px}
.th,.tr{display:grid;gap:11px;align-items:center}
.th{padding:0 8px 6px;border-bottom:1px solid var(--obsidian)}
.th span{font-size:9px;color:var(--basalt);letter-spacing:1.1px}
.tr{padding:9px 8px;border-bottom:1px solid var(--hair2);text-align:left;width:100%}
.tr:hover{background:var(--stone)}.tr.tot{border-bottom:1px solid var(--obsidian)}

.enc{border-left:3px solid var(--copper);padding:12px 14px;display:flex;flex-direction:column;gap:5px}
.enc.ar{background:var(--argile)}.enc.gl{background:var(--glacier)}.enc.st{background:var(--stone)}
.enc p{margin:0;font-size:11.5px;line-height:1.5}
.carte{border:1px solid var(--hair);border-radius:3px;padding:11px 13px}
.carte.k{border-color:var(--line);background:var(--stone)}

.champ{border:1px solid var(--line);border-radius:3px;padding:9px 11px;width:100%;background:#fff;font-size:12.5px;line-height:1.5}
.champ:focus{outline:none;border-color:var(--obsidian)}
.lab{font-size:9px;color:var(--basalt);letter-spacing:1.1px;display:block;margin-bottom:3px}
.err{color:var(--rouge);font-size:11.5px}

.voile{position:fixed;inset:0;background:rgba(11,13,16,.55);display:flex;align-items:center;justify-content:center;padding:26px;z-index:60}
.couche{background:#fff;border-radius:4px;display:flex;flex-direction:column;max-height:100%;width:100%;max-width:820px;overflow:hidden}
.couche.large-c{max-width:1040px}
.ct{padding:16px 22px 13px;border-bottom:1px solid var(--hair);display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.ct h2{margin:0;font:400 20px/1.2 var(--serif);color:var(--obsidian)}
.cc{padding:18px 22px;overflow:auto;display:flex;flex-direction:column;gap:15px}
.cp{padding:13px 22px;border-top:1px solid var(--hair);display:flex;align-items:center;justify-content:flex-end;gap:8px}
.x{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:3px}
.x:hover{background:var(--stone)}

.point{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0}
.jauge{height:4px;background:var(--hair2);border-radius:2px;overflow:hidden}.jauge i{display:block;height:4px;background:var(--copper)}
.mot{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--obsidian);color:#fff;font-size:12px;padding:9px 16px;border-radius:3px;z-index:80;opacity:0;transition:opacity .2s;pointer-events:none}
.mot.on{opacity:1}
.cote{width:236px;flex-shrink:0;border-right:1px solid var(--hair);padding:20px 18px;display:flex;flex-direction:column;gap:18px;position:sticky;top:54px}
.visio{width:100%;height:70vh;border:1px solid var(--hair);border-radius:3px;background:var(--stone)}

@media(max-width:1000px){
  .page{padding:16px}
  .cote{position:static;width:100%;border-right:none;border-bottom:1px solid var(--hair)}
  .top{gap:10px 14px;padding:9px 14px;height:auto;flex-wrap:wrap;position:static}
  .nav button{padding:5px 8px}
}