@font-face{font-family:'EBGaramond';font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ebgaramond-400.woff2") format("woff2")}
@font-face{font-family:'EBGaramond';font-style:italic;font-weight:400;font-display:swap;src:url("fonts/ebgaramond-400-italic.woff2") format("woff2")}
@font-face{font-family:'EBGaramond';font-style:normal;font-weight:600;font-display:swap;src:url("fonts/ebgaramond-600.woff2") format("woff2")}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url("fonts/cinzel-600.woff2") format("woff2")}

:root{
  --parchemin:#E6DCC2;--velin:#DBCEAF;--parchemin-h:#EEE6D1;
  --encre:#2A2113;--encre-pale:#6B5F47;
  --vert:#41502F;--vert-vif:#4C5E37;--marine:#2A3947;--sepia:#897B5C;
  --filet:#2A2113;--filet-faible:rgba(42,33,19,.30);--voile:rgba(42,33,19,.05);
}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{background:var(--parchemin);color:var(--encre);
  font-family:'EBGaramond','Iowan Old Style',Palatino,Georgia,serif;font-size:17px;line-height:1.5;
  font-variant-numeric:oldstyle-nums;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom)}
h1,h2,h3{font-weight:normal;margin:0}em,i{font-style:italic}
button{font-family:inherit;color:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:16px;color:var(--encre)}

.entete{text-align:center;padding:16px 16px 0;background:var(--parchemin)}
.titre{font-family:'Cinzel',serif;font-weight:600;font-size:1.12rem;letter-spacing:.20em;color:var(--encre)}
.colophon{font-variant:small-caps;letter-spacing:.18em;font-size:.6rem;color:var(--encre-pale);
  margin:8px auto 0;border-top:.5px solid var(--filet-faible);padding:6px 0 11px;display:inline-block}
.colophon b{font-weight:400;font-family:'Cinzel',serif;font-size:.78em;letter-spacing:.12em}

nav.onglets{display:flex;border-top:1.5px solid var(--filet);border-bottom:1px solid var(--filet);
  background:var(--parchemin);position:sticky;top:0;z-index:19;overflow-x:auto;-webkit-overflow-scrolling:touch}
nav.onglets button{flex:1 0 auto;background:none;border:none;padding:10px 16px;font-variant:small-caps;
  letter-spacing:.13em;font-size:.84rem;color:var(--encre-pale);white-space:nowrap;border-bottom:2px solid transparent}
nav.onglets button.actif{color:var(--encre);border-bottom-color:var(--vert)}

main{padding:16px 14px 96px;max-width:940px;margin:0 auto}
.vue{display:none}.vue.actif{display:block}
.legende{font-variant:small-caps;letter-spacing:.10em;font-size:.72rem;color:var(--encre-pale);margin:0 0 12px}

.pastille{position:relative;width:14px;height:14px;display:inline-block;color:var(--encre);flex:0 0 auto}
.pastille::before,.pastille::after{content:"";position:absolute;box-sizing:border-box}
.v-saisir .pastille{color:var(--vert-vif)}
.v-saisir .pastille::before{inset:2px;background:currentColor;transform:rotate(45deg)}
.v-favorable .pastille::before{inset:2px;border:1.3px solid currentColor;transform:rotate(45deg)}
.v-possible .pastille::before{left:1px;right:1px;top:50%;height:1.4px;margin-top:-.7px;background:currentColor}
.v-surveiller .pastille::before{inset:2.5px;border:1.3px solid currentColor;border-radius:50%}
.v-hors .pastille::before{inset:2px;border-radius:50%;background:currentColor}
.v-hors .pastille::after{inset:2px;left:5.5px;border-radius:50%;background:var(--parchemin)}
.v-eviter .pastille{color:var(--sepia)}
.v-eviter .pastille::before,.v-eviter .pastille::after{left:0;right:0;top:50%;height:1.2px;margin-top:-.6px;background:currentColor}
.v-eviter .pastille::before{transform:rotate(45deg)}
.v-eviter .pastille::after{transform:rotate(-45deg)}
.leg{display:inline-flex;align-items:center;gap:5px;margin-right:14px;white-space:nowrap;line-height:2}
.leg .pastille{width:13px;height:13px}
.rar-leg{display:inline-block;width:0;height:0;border-left:6px solid transparent;border-top:6px solid var(--marine)}

.cadre{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1.5px solid var(--filet)}
table.grille{border-collapse:collapse;width:100%;font-size:.82rem}
table.grille th,table.grille td{border:.5px solid var(--filet-faible);padding:0;text-align:center;height:40px;min-width:40px}
table.grille thead th{font-variant:small-caps;letter-spacing:.05em;font-weight:normal;background:var(--velin);
  font-size:.74rem;height:32px;border-bottom:3px double var(--filet)}
table.grille th.dest{position:sticky;left:0;z-index:2;background:var(--parchemin-h);text-align:left;
  padding:5px 9px;min-width:120px;max-width:144px;font-variant:normal;letter-spacing:0;line-height:1.12;border-right:1.5px solid var(--filet)}
table.grille thead th.coin{position:sticky;left:0;z-index:3;background:var(--velin);border-right:1.5px solid var(--filet)}
.dest .pays-min{font-variant:small-caps;letter-spacing:.10em;font-size:.6rem;color:var(--encre-pale)}
.cell{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border:none;background:none;padding:0}
td.cellule{position:relative}
.rarete{position:absolute;top:2px;right:2px;width:0;height:0;border-left:6px solid transparent;border-top:6px solid var(--marine)}

.carte{border:1px solid var(--filet);margin-bottom:13px;background:var(--parchemin)}
.carte .tete{display:flex;justify-content:space-between;align-items:baseline;padding:11px 13px;border-bottom:.5px solid var(--filet-faible)}
.carte .nom{font-size:1.12rem}
.carte .pays{font-variant:small-caps;letter-spacing:.14em;font-size:.64rem;color:var(--encre-pale)}
.carte .corps{padding:11px 13px}
.mention{font-variant:small-caps;letter-spacing:.11em;font-size:.84rem;display:inline-flex;align-items:center;gap:7px}
.mention .pastille{width:12px;height:12px}
.detail{font-size:.82rem;color:var(--encre-pale);margin-top:3px}
.axes{display:flex;gap:16px;flex-wrap:wrap;margin-top:9px}
.axe{font-variant:small-caps;letter-spacing:.08em;font-size:.64rem;color:var(--encre-pale)}
.pips{display:flex;gap:2px;margin-top:3px}
.pip{width:7px;height:7px;border:1px solid var(--encre-pale)}
.pip.on{background:var(--vert);border-color:var(--vert)}

.fenetre-tete{font-family:'Cinzel',serif;font-weight:600;letter-spacing:.10em;font-size:.86rem;
  border-bottom:1.5px solid var(--filet);padding-bottom:5px;margin:20px 0 10px;display:flex;justify-content:space-between;align-items:baseline}
.fenetre-tete .quand{font-family:'EBGaramond';font-weight:400;font-variant:small-caps;letter-spacing:.14em;font-size:.64rem;color:var(--encre-pale)}
.rang{display:flex;align-items:baseline;gap:10px;padding:8px 2px;border-bottom:.5px solid var(--voile)}
.rang .ord{font-size:.72rem;color:var(--encre-pale);width:20px}.rang .ville{flex:1}.rang .mention{flex-shrink:0}

.bande{display:grid;grid-template-columns:repeat(12,1fr);border:1px solid var(--filet);margin:12px 0}
.bande-mois{display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 0;border-right:.5px solid var(--filet-faible)}
.bande-mois:last-child{border-right:none}
.bm-lab{font-variant:small-caps;letter-spacing:.03em;font-size:.58rem;color:var(--encre-pale)}

.champ{margin-bottom:12px}
.champ label{display:block;font-variant:small-caps;letter-spacing:.13em;font-size:.66rem;color:var(--encre-pale);margin-bottom:4px}
.champ input[type=text],.champ input[type=number],.champ select,.champ textarea{width:100%;background:var(--parchemin-h);border:1px solid var(--filet);padding:9px;border-radius:0}
.champ textarea{min-height:62px;resize:vertical}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.curseur{display:flex;align-items:center;gap:10px}.curseur input[type=range]{flex:1;accent-color:var(--vert)}
.curseur .val{font-variant:small-caps;letter-spacing:.06em;width:22px;text-align:right}
.jetons{display:flex;flex-wrap:wrap;gap:6px}
.jeton{border:1px solid var(--filet);padding:5px 11px;font-variant:small-caps;letter-spacing:.06em;font-size:.78rem;background:none}
.jeton.on{background:var(--vert);color:var(--parchemin);border-color:var(--vert)}

.actes{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.bouton{border:1px solid var(--encre);background:none;padding:9px 18px;font-variant:small-caps;letter-spacing:.11em;font-size:.86rem}
.bouton.plein{background:var(--vert);color:var(--parchemin);border-color:var(--vert)}
.bouton.discret{border-color:var(--encre-pale);color:var(--encre-pale)}
.bouton.peril{border-color:var(--sepia);color:var(--sepia)}
.ajout-barre{margin:2px 0 16px}
.lien{background:none;border:none;font-variant:small-caps;letter-spacing:.10em;color:var(--vert);font-size:.94rem;padding:6px 0;text-decoration:underline;text-underline-offset:3px}

.mois-choix{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:16px}
.mois-choix button{border:.5px solid var(--filet);background:none;padding:7px 11px;font-variant:small-caps;letter-spacing:.05em;font-size:.76rem}
.mois-choix button.actif{background:var(--marine);color:var(--parchemin);border-color:var(--marine)}

.voile-modale{position:fixed;inset:0;background:rgba(42,33,19,.34);z-index:40;display:none;align-items:flex-end;justify-content:center;animation:voilemonte .3s ease}
@keyframes voilemonte{from{opacity:0}to{opacity:1}}
.voile-modale.ouvert{display:flex}
.modale{background:var(--parchemin);width:100%;max-width:560px;max-height:92vh;overflow-y:auto;border-top:2px solid var(--filet);padding:20px 17px 32px;animation:monte .42s cubic-bezier(.2,.8,.2,1)}
@keyframes monte{from{transform:translateY(28px);opacity:.2}to{transform:none;opacity:1}}
.modale .barre-titre{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1.5px solid var(--filet);padding-bottom:9px;margin-bottom:15px}
.modale h2{font-family:'Cinzel',serif;font-weight:600;letter-spacing:.08em;font-size:1rem}
.fermer{background:none;border:none;font-size:1.4rem;color:var(--encre-pale);line-height:1}
.profil{width:100%;border-collapse:collapse;font-size:.86rem;margin-top:6px;font-variant-numeric:oldstyle-nums tabular-nums}
.profil td{border-bottom:.5px solid var(--voile);padding:7px 2px}
.profil td:first-child{font-variant:small-caps;letter-spacing:.10em;font-size:.66rem;color:var(--encre-pale);width:104px}
.note-marge{border-left:2px solid var(--marine);padding:3px 0 3px 11px;margin:11px 0;font-size:.82rem;color:var(--encre-pale);font-style:italic}
.vide{text-align:center;color:var(--encre-pale);font-style:italic;padding:42px 20px;font-size:.92rem}
.maxime{font-style:italic;text-align:center;color:var(--encre-pale);font-size:.92rem;line-height:1.85;margin:30px auto;max-width:440px}
.maxime span{display:block}
.pays{font-variant:small-caps;letter-spacing:.14em;font-size:.64rem;color:var(--encre-pale)}

/* — Frontispice — */
#splash{position:fixed;inset:0;z-index:60;background:var(--parchemin);display:flex;flex-direction:column;
  align-items:center;justify-content:center;will-change:transform,opacity;-webkit-tap-highlight-color:transparent;
  transition:transform 1s cubic-bezier(.7,0,.2,1),opacity 1s ease}
#splash.parti{transform:translateY(-9%) scale(1.03);opacity:0;pointer-events:none}
#splash-img{max-width:min(86vw,430px);max-height:80vh;width:auto;height:auto;
  box-shadow:0 16px 54px rgba(42,33,19,.22);animation:lever 1.5s cubic-bezier(.2,.7,.2,1) .1s both}
@keyframes lever{from{opacity:0;transform:scale(1.06) translateY(12px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
.splash-hint{font-variant:small-caps;letter-spacing:.22em;font-size:.64rem;color:var(--encre-pale);
  margin-top:24px;opacity:0;animation:poindre 1.1s ease 1.7s forwards}
@keyframes poindre{to{opacity:.65}}

/* — Emblème (armes, fond blanc neutralisé) — */
.embleme{height:74px;width:auto;margin:2px auto 4px;display:block;mix-blend-mode:multiply}

/* — Apparition des vues — */
.vue.actif{animation:paraitre .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes paraitre{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* — Boussole — */
.compas-bloc{display:flex;flex-direction:column;align-items:center;margin:4px 0 24px}
.rose{width:min(60vw,224px);height:auto;display:block}
#aiguille{transition:transform 1.5s cubic-bezier(.34,1.32,.36,1);transform-origin:100px 100px;transform-box:view-box}
.compas-cap{font-variant:small-caps;letter-spacing:.08em;font-size:.84rem;color:var(--encre-pale);margin-top:14px;text-align:center;line-height:1.5}
.compas-cap b{font-variant:normal;letter-spacing:0;color:var(--encre);font-weight:600}
.compas-cap .cap-f{color:var(--vert)}

/* — Encrage de la grille — */
@keyframes encrer{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.grille tbody.encrer td.cellule{animation:encrer .5s ease both}
.grille tbody.encrer td:nth-child(2){animation-delay:0.00s}.grille tbody.encrer td:nth-child(3){animation-delay:0.04s}.grille tbody.encrer td:nth-child(4){animation-delay:0.09s}.grille tbody.encrer td:nth-child(5){animation-delay:0.14s}.grille tbody.encrer td:nth-child(6){animation-delay:0.18s}.grille tbody.encrer td:nth-child(7){animation-delay:0.22s}.grille tbody.encrer td:nth-child(8){animation-delay:0.27s}.grille tbody.encrer td:nth-child(9){animation-delay:0.32s}.grille tbody.encrer td:nth-child(10){animation-delay:0.36s}.grille tbody.encrer td:nth-child(11){animation-delay:0.40s}.grille tbody.encrer td:nth-child(12){animation-delay:0.45s}.grille tbody.encrer td:nth-child(13){animation-delay:0.49s}

@media (prefers-reduced-motion:reduce){
  #splash,#splash-img,.vue.actif,.grille tbody.encrer td.cellule{animation:none!important;transition:none!important}
  #aiguille{transition:none!important}
}