:root{
    --paper: #FBFAF6;
    --bg: #E7EBF0;
    --ink: #1F2733;
    --ink-soft: #5B6673;
    --line: #C7CEDA;
    --bleu: #002654;
    --rouge: #C8313A;
    --commun: #7C8798;
    --peucommun: #2E7D5B;
    --rare: #2A5FA8;
    --legendaire: #B0862C;
    /* nouvelle direction artistique */
    --nuit: #0F1F38;
    --nuit-2: #162C4B;
    --nuit-3: #1F3A60;
    --brume: #A9BCD4;
    --papier: #EEF2F6;
    --encre: #13233B;
    --c-commun: #7E8BA0;
    --c-peucommun: #22A06B;
    --c-rare: #2F7CF6;
    --c-legendaire: #F0B429;
    --c-rouge: #E5484D;
    --titre: 'Big Shoulders Display', Impact, sans-serif;
    --texte: 'Instrument Sans', system-ui, sans-serif;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    min-height:100vh;
    background: var(--nuit);
    font-family: var(--texte);
    color: #fff;
    -webkit-font-smoothing: antialiased;
  }
  #fondTopo{
    position:fixed; inset:0;
    width:100%; height:100%;
    pointer-events:none;
    z-index:0;
  }
  h1{
    font-family: var(--titre);
    font-weight: 900;
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    line-height: 0.95;
    letter-spacing: 0.01em;
    margin: 0 0 10px;
  }
  .sub{
    color: var(--brume);
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 20px;
    max-width: 60ch;
  }
  .pack-zone{
    display:flex;
    gap: 22px;
    flex-wrap: wrap;
    justify-content:flex-start;
    margin-bottom: 14px;
    min-height: 290px;
    width: 100%;
  }
  .pack-zone:empty{ min-height: 0; margin-bottom: 0; }

  /* ---------- Cartes du tirage (retournement) ---------- */
  .card{
    width: 188px;
    height: 263px;
    perspective: 1000px;
    cursor:pointer;
  }
  .card.flipped{ cursor: default; }
  .card-inner{
    position:relative;
    width:100%;
    height:100%;
    transition: transform 0.55s cubic-bezier(.4,.2,.2,1);
    transform-style: preserve-3d;
  }
  .card.flipped .card-inner{ transform: rotateY(180deg); }
  .face{
    position:absolute;
    inset:0;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    border-radius: 14px;
  }
  /* ---------- Dos de carte ---------- */
  .face-back{
    overflow:hidden;
    background: radial-gradient(circle at 50% 42%, #24446F 0%, #13284A 55%, #0B1830 100%);
    border: 1px solid rgba(169,188,212,0.22);
    box-shadow: 0 14px 28px rgba(0,0,0,0.45);
  }
  .face-back .dos-motif{ position:absolute; inset:0; width:100%; height:100%; }
  .face-back::before{
    content:""; position:absolute; inset:9px;
    border: 1.5px solid rgba(240,180,41,0.55);
    border-radius: 9px;
  }
  .face-back .dos-embleme{
    position:absolute; left:50%; top:50%;
    width:70px; height:70px; margin:-35px 0 0 -35px;
    border-radius:50%;
    background: var(--nuit);
    box-shadow: 0 0 0 2px var(--c-legendaire), 0 0 0 7px rgba(15,31,56,0.9), 0 0 0 8.5px rgba(240,180,41,0.4);
    display:flex; align-items:center; justify-content:center;
  }
  .face-back .dos-embleme svg{ width:32px; height:32px; stroke: var(--c-legendaire); }
  .face-back .dos-coin{
    position:absolute; width:7px; height:7px;
    background: var(--c-legendaire);
    transform: rotate(45deg);
    opacity:.8;
  }
  .dos-coin.hg{ top:16px; left:16px; }
  .dos-coin.hd{ top:16px; right:16px; }
  .dos-coin.bg{ bottom:16px; left:16px; }
  .dos-coin.bd{ bottom:16px; right:16px; }

  /* arrivee des cartes une par une, et leger soulevement avant retournement */
  .card.entree{ animation: carteEntree .45s cubic-bezier(.2,.8,.3,1.2) backwards; }
  @keyframes carteEntree{
    from{ transform: translateY(60px) scale(.85) rotate(-4deg); opacity:0; }
    to{ transform:none; opacity:1; }
  }
  @media (hover: hover){
    .card:not(.flipped):hover .card-inner{ transform: translateY(-5px); }
  }
  .face-front{ transform: rotateY(180deg); }

  /* ---------- Recto : nouvelle carte ---------- */
  .carte-cadre{
    position:relative;
    width:100%; height:100%;
    border-radius: 14px;
    padding: 3px;
    transition: transform .15s ease-out;
    box-shadow: 0 14px 28px rgba(0,0,0,0.45);
  }
  .card.commun .carte-cadre{ background: var(--c-commun); padding: 2px; }
  .card.peucommun .carte-cadre{ background: var(--c-peucommun); }
  .card.rare .carte-cadre{ background: linear-gradient(160deg, #7FB0FF, var(--c-rare) 45%, #1D4FB8); }
  .card.legendaire .carte-cadre{
    background: linear-gradient(135deg, #FFF1B8, var(--c-legendaire) 35%, #B7791F 60%, #FCE38A 85%);
    padding: 4px;
    box-shadow: 0 14px 28px rgba(0,0,0,0.45), 0 0 26px rgba(240,180,41,0.35);
  }
  .carte-int{
    height:100%;
    border-radius: 11px;
    background: var(--papier);
    color: var(--encre);
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  .carte-haut{
    display:flex; justify-content:space-between; align-items:center;
    padding: 7px 9px 6px;
  }
  .carte-rarete{
    font-size: 0.68rem; font-weight:600;
    padding: 2px 8px; border-radius: 999px;
    color:#fff;
  }
  .card.commun .carte-rarete{ background: var(--c-commun); }
  .card.peucommun .carte-rarete{ background: var(--c-peucommun); }
  .card.rare .carte-rarete{ background: var(--c-rare); }
  .card.legendaire .carte-rarete{ background: var(--c-legendaire); color: var(--encre); }
  .carte-num{ font-size: 0.68rem; color:#5A6B82; font-variant-numeric: tabular-nums; }
  .carte-art{
    position:relative;
    margin: 0 7px;
    border-radius: 8px;
    overflow:hidden;
    height: 44%;
  }
  .carte-art svg{ display:block; width:100%; height:100%; }
  .carte-dept{
    position:absolute; right:7px; bottom:-6px;
    font-family: var(--titre); font-weight:900;
    font-size: 3.4rem; line-height:1;
    color: rgba(255,255,255,0.28);
  }
  .carte-infos{ padding: 8px 10px 0; flex:1; display:flex; flex-direction:column; min-height:0; }
  .carte-nom{
    font-family: var(--titre); font-weight:800;
    font-size: 1.45rem; line-height:0.98;
    margin:0;
    overflow-wrap:anywhere;
    display:-webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:hidden;
    flex-shrink:0;
  }
  .carte-nom.long{ font-size: 1.2rem; }
  .carte-nom.tres-long{ font-size: 1rem; }
  .carte-rarete, .carte-num{ white-space: nowrap; }
  .carte-departement{ font-size: 0.72rem; color:#5A6B82; margin: 3px 0 0; display:flex; gap:3px; min-width:0; }
  /* si la place manque, c'est le nom qui est raccourci, jamais le numero */
  .carte-departement .dep-nom{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
  .carte-departement .dep-num{ flex-shrink:0; white-space:nowrap; }
  .carte-stats{
    margin: auto 0 8px;
    display:flex; gap: 12px;
    border-top: 1px solid #D5DDE7;
    padding-top: 6px;
  }
  .carte-stats div{ display:flex; flex-direction:column; }
  .carte-stats span{ font-size: 0.6rem; color:#5A6B82; }
  .carte-stats b{ font-family: var(--titre); font-weight:800; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
  .carte-lisere{ display:flex; height:4px; flex-shrink:0; }
  .carte-lisere span{ flex:1; }
  .carte-lisere span:nth-child(1){ background:#1F3F8F; }
  .carte-lisere span:nth-child(2){ background:#fff; }
  .carte-lisere span:nth-child(3){ background: var(--c-rouge); }
  .card.legendaire .carte-cadre::after{
    content:""; position:absolute; inset:4px; border-radius: 11px;
    background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,0.7) 42%, rgba(255,214,102,0.45) 50%, rgba(140,200,255,0.35) 58%, transparent 75%);
    background-size: 260% 260%;
    background-position: var(--hx, 50%) var(--hy, 50%);
    mix-blend-mode: soft-light;
    opacity: 0;
    transition: opacity .2s;
    pointer-events:none;
  }
  .card.legendaire.flipped:hover .carte-cadre::after{ opacity: 1; }

  /* utilise par les cartes de combat */
  .tricolore{
    height: 6px;
    display:flex;
  }
  .tricolore span{flex:1;}
  .tricolore .b{background:var(--bleu);}
  .tricolore .w{background:#fff;}
  .tricolore .r{background:var(--rouge);}

  /* ---------- Paquet a dechirer ---------- */
  .paquet{
    --h-languette: 36px;
    position:relative;
    width: 200px; height: 280px;
    cursor:pointer;
    border:none; padding:0; background:none;
    font: inherit;
    filter: drop-shadow(0 18px 24px rgba(0,0,0,0.5));
    transition: transform .15s ease-out;
  }
  .paquet:focus-visible{ outline: 2px solid var(--c-legendaire); outline-offset: 6px; border-radius: 6px; }
  .paquet .paquet-languette, .paquet .paquet-corps{
    position:absolute; left:0; right:0;
    overflow:hidden;
  }
  .paquet .paquet-languette{
    top:0; height: var(--h-languette);
    clip-path: polygon(0 6px, 5% 0, 10% 6px, 15% 0, 20% 6px, 25% 0, 30% 6px, 35% 0, 40% 6px, 45% 0, 50% 6px, 55% 0, 60% 6px, 65% 0, 70% 6px, 75% 0, 80% 6px, 85% 0, 90% 6px, 95% 0, 100% 6px, 100% 100%, 0 100%);
    transition: transform .45s cubic-bezier(.5,0,.8,.4), opacity .4s ease-in;
    transform-origin: 20% 100%;
  }
  .paquet .paquet-corps{
    top: var(--h-languette); bottom:0;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), 95% 100%, 90% calc(100% - 6px), 85% 100%, 80% calc(100% - 6px), 75% 100%, 70% calc(100% - 6px), 65% 100%, 60% calc(100% - 6px), 55% 100%, 50% calc(100% - 6px), 45% 100%, 40% calc(100% - 6px), 35% 100%, 30% calc(100% - 6px), 25% 100%, 20% calc(100% - 6px), 15% 100%, 10% calc(100% - 6px), 5% 100%, 0 calc(100% - 6px));
    transition: transform .5s ease-in .2s, opacity .45s ease-in .25s;
  }
  .paquet .paquet-motif{ position:absolute; left:0; width:200px; height:280px; }
  .paquet .paquet-languette .paquet-motif{ top:0; }
  .paquet .paquet-corps .paquet-motif{ top: calc(var(--h-languette) * -1); }
  .paquet .paquet-pointilles{
    position:absolute; left:10px; right:10px; bottom:0;
    border-top: 2px dashed rgba(255,255,255,0.35);
  }
  .paquet .paquet-corps::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.22) 48%, transparent 60%);
    background-size: 250% 100%;
    background-position: 110% 0;
    transition: background-position .6s ease;
    pointer-events:none;
  }
  @media (hover: hover){
    .paquet:hover{ transform: translateY(-4px) rotate(-1deg); }
    .paquet:hover .paquet-corps::after{ background-position: -10% 0; }
  }
  .paquet .paquet-etiquette{
    position:absolute; left:0; right:0; top: 38px;
    display:flex; flex-direction:column; align-items:center; gap: 6px;
  }
  .paquet .paquet-etiquette svg{ width:34px; height:34px; }
  .paquet .paquet-titre{
    font-family: var(--titre); font-weight:900;
    font-size: 2.6rem; line-height:.9;
  }
  .paquet .paquet-bande{
    position:absolute; left:0; right:0; bottom: 46px;
    height: 44px;
    display:flex; align-items:center; justify-content:center;
    font-family: var(--titre); font-weight:800; font-size: 1.25rem; letter-spacing:.02em;
  }
  .paquet.gratuit .paquet-etiquette{ color:#fff; }
  .paquet.gratuit .paquet-etiquette svg{ stroke: var(--c-legendaire); }
  .paquet.gratuit .paquet-bande{ background: linear-gradient(90deg, #B7791F, #FCE38A 30%, var(--c-legendaire) 55%, #B7791F); color: var(--encre); }
  .paquet.achete .paquet-etiquette{ color: var(--encre); }
  .paquet.achete .paquet-etiquette svg{ stroke: var(--encre); }
  .paquet.achete .paquet-bande{ background: var(--nuit); color: var(--c-legendaire); }
  .paquet.dechire{ pointer-events:none; transform:none; }
  .paquet.dechire .paquet-languette{ transform: translate(60px, -80px) rotate(24deg); opacity:0; }
  .paquet.dechire .paquet-corps{ transform: translateY(40px) scale(.94); opacity:0; }
  .paquet.dechire .paquet-pointilles{ display:none; }

  @media (prefers-reduced-motion: reduce){
    .paquet, .paquet .paquet-languette, .paquet .paquet-corps, .card-inner, .carte-cadre{ transition:none; }
    .card.entree{ animation:none; }
  }

  /* ---------- Page Ma collection ---------- */
  .coll-entete{
    position: sticky;
    top: 0;
    z-index: 3;
    align-self: stretch;
    margin: -36px -40px 18px;
    padding: 28px 40px 14px;
    background: linear-gradient(180deg, var(--nuit) 78%, rgba(15,31,56,0));
  }
  .coll-ligne-titre{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
  .coll-ligne-titre h1{ margin:0; font-size: clamp(2rem, 4vw, 2.6rem); }
  .coll-compteur{ color: var(--brume); font-size: 0.95rem; }
  .coll-compteur b{ color:#fff; font-weight:600; }
  .coll-filtres{ display:flex; flex-wrap:wrap; gap:8px; }
  .coll-filtre{
    display:inline-flex; align-items:center; gap:7px;
    font-family: inherit; font-size: 0.82rem; font-weight: 500;
    color: var(--brume); background: var(--nuit-2);
    border: 1px solid rgba(169,188,212,0.16); border-radius: 999px;
    padding: 6px 12px; cursor: pointer;
  }
  .coll-filtre .point{ width:8px; height:8px; border-radius:50%; }
  .coll-filtre .nb{ color:#fff; font-variant-numeric: tabular-nums; }
  .coll-filtre:hover{ border-color: rgba(169,188,212,0.4); }
  .coll-filtre.actif{ background: var(--papier); color: var(--encre); border-color: var(--papier); }
  .coll-filtre.actif .nb{ color: var(--encre); font-weight: 600; }
  .coll-filtre:focus-visible{ outline: 2px solid var(--c-legendaire); outline-offset: 2px; }
  .coll-grille{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
  }
  .coll-grille > .collection-empty{ grid-column: 1 / -1; }
  .collection-empty{
    color: var(--brume);
    font-size: 0.8rem;
    font-style: italic;
  }

  .solde-box{
    font-size: 1rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 18px;
    margin-bottom: 20px;
    width: 100%;
    max-width: 600px;
    text-align: center;
    color: var(--ink);
  }
  .solde-box b{ color: var(--legendaire); }
  .bourse-section{
    width: 100%;
    max-width: 600px;
    margin-bottom: 24px;
  }
  .bourse-section h2{
    font-size: 0.85rem;
    font-weight:normal;
    color: var(--brume);
    margin: 0 0 10px;
    font-variant: small-caps;
    letter-spacing:0.03em;
  }
  .bourse-search{
    width:100%;
    font-family:inherit;
    font-size:0.85rem;
    padding: 8px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:#fff;
    color: var(--ink);
  }
  .bourse-filters{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom: 10px;
  }
  .filter-pill{
    font-family:inherit;
    font-size:0.72rem;
    color: var(--ink-soft);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 4px 12px;
    cursor:pointer;
  }
  .filter-pill.active{
    background: var(--bleu);
    color: white;
    border-color: var(--bleu);
  }
  .bourse-grid{
    display:flex;
    flex-direction:column;
    gap:8px;
    max-height: 40vh;
    overflow-y:auto;
  }
  .combat-cards-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    /* empeche les lignes de s'ecraser quand il y a beaucoup de cartes */
    grid-auto-rows: max-content;
    gap: 12px;
    max-height: 60vh;
    overflow-y:auto;
    width:100%;
    max-width: 600px;
    padding-right:4px;
  }
  .combat-card{
    color: var(--ink);
    border-radius: 10px;
    overflow:hidden;
    background: var(--paper);
    box-shadow: 3px 5px 10px rgba(21,27,38,0.2);
  }
  .combat-card.rare{ background: linear-gradient(180deg, var(--paper) 70%, #EEF3FB 100%); }
  .combat-card.legendaire{ background: linear-gradient(180deg, var(--paper) 70%, #FBF4E3 100%); }
  .combat-card .cc-body{ padding:12px 14px 14px; }
  .combat-card .cc-badge{
    display:inline-block;
    font-size:0.62rem;
    font-variant: small-caps;
    color:#fff;
    padding:2px 8px;
    border-radius:2px;
    margin-bottom:8px;
  }
  .combat-card.rare .cc-badge{ background: var(--rare); }
  .combat-card.legendaire .cc-badge{ background: var(--legendaire); }
  .combat-card .cc-name{ font-size:1rem; margin:0 0 2px; color: var(--ink); }
  .combat-card .cc-owner{ font-size:0.72rem; color: var(--ink-soft); margin:0 0 10px; }
  .combat-card .cc-distance{ font-size:0.7rem; color: var(--ink-soft); margin:-6px 0 10px; }
  .combat-proximite{ align-items:center; }
  .prox-toggle{ display:inline-flex; align-items:center; gap:8px; }
  .prox-switch{
    position:relative; width:26px; height:15px; border-radius:999px;
    background: rgba(91,102,115,0.35); flex-shrink:0;
    transition: background .15s;
  }
  .prox-switch::after{
    content:""; position:absolute; top:2px; left:2px;
    width:11px; height:11px; border-radius:50%; background:#fff;
    transition: transform .15s;
  }
  .prox-toggle.active .prox-switch{ background: var(--c-legendaire); }
  .prox-toggle.active .prox-switch::after{ transform: translateX(11px); }
  .prox-rayons{ display:flex; gap:6px; }

  /* ---------- Mes communes attaquees ---------- */
  .tab-badge{
    margin-left:auto;
    min-width:20px; height:20px; padding:0 6px;
    border-radius:999px;
    background: var(--c-rouge); color:#fff;
    font-size:0.72rem; font-weight:600;
    display:inline-flex; align-items:center; justify-content:center;
    font-variant-numeric: tabular-nums;
  }
  .tab-badge[hidden]{ display:none; }
  .menaces{ width:100%; max-width:600px; margin-bottom:22px; }
  .menaces[hidden]{ display:none; }
  .menaces h2{
    font-family: var(--titre); font-weight:800; font-size:1.35rem;
    margin:0 0 10px; color:#fff;
    display:flex; align-items:center; gap:10px;
  }
  .menaces h2::before{
    content:""; width:8px; height:8px; border-radius:50%;
    background: var(--c-rouge);
    box-shadow: 0 0 0 4px rgba(229,72,77,0.25);
  }
  .menaces-liste{ display:flex; flex-direction:column; gap:8px; }
  .menace{
    display:flex; align-items:center; gap:12px;
    background: var(--nuit-2);
    border:1px solid rgba(169,188,212,0.16);
    border-radius:10px;
    padding:10px 14px;
  }
  .menace.danger{ border-left: 3px solid var(--c-rouge); }
  .menace-point{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
  .menace-texte{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .menace-titre{ font-size:0.92rem; }
  .menace-titre b{ font-weight:600; }
  .menace-titre span{ color: var(--brume); }
  .menace-statut{ font-size:0.76rem; color: var(--brume); }
  .menace.danger .menace-statut{ color:#FFB3B5; }
  .menace-serie{ display:flex; gap:4px; flex-shrink:0; }
  .menace-note{ font-size:0.72rem; color: var(--brume); font-style: italic; margin-top:2px; }
  .menace-defendre{
    align-self:flex-start;
    display:inline-flex; align-items:center; gap:6px;
    margin-top:6px;
    font-family: var(--titre); font-weight:800; font-size:1rem; letter-spacing:.02em;
    background: var(--c-legendaire); color: var(--encre);
    border:none; border-radius:10px;
    padding:6px 12px 7px;
    box-shadow: 0 3px 0 #B7791F;
    cursor:pointer;
  }
  .menace-defendre svg{ width:15px; height:15px; }
  .menace-defendre:active:not(:disabled){ transform: translateY(2px); box-shadow: 0 1px 0 #B7791F; }
  .menace-defendre:disabled{ opacity:.5; cursor:default; }
  .menace-defendre:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
  .menace-serie i{ width:10px; height:10px; border-radius:50%; border:1.5px solid rgba(169,188,212,0.45); }
  .menace-serie i.pris{ background: var(--c-rouge); border-color: var(--c-rouge); }
  .en-cours-nb{
    min-width: 18px; padding: 0 5px; border-radius: 999px;
    background: rgba(91,102,115,0.2);
    font-size: 0.68rem; font-weight: 600; text-align:center;
    font-variant-numeric: tabular-nums;
  }
  .prox-toggle.active .en-cours-nb{ background: rgba(255,255,255,0.25); }
  .prox-rayons[hidden]{ display:none; }
  .combat-card .cc-sieges{ display:flex; gap:5px; margin-bottom:8px; }
  .cc-siege-dot{ width:11px; height:11px; border-radius:50%; border:1.5px solid var(--line); }
  .cc-siege-dot.filled{ background: var(--legendaire); border-color: var(--legendaire); }
  .combat-card .cc-status{ font-size:0.7rem; color: var(--ink-soft); margin:0 0 10px; }
  .combat-card .cc-status.ready{ color: var(--peucommun); }
  .combat-card .cc-status.bouclier{ color: var(--rare); font-weight:600; }
  .combat-card .cc-defense{ font-size:0.68rem; color: var(--ink-soft); margin:-4px 0 8px; font-style:italic; }

  /* ---------- Boucliers (bourse) ---------- */
  .bouclier-intro{ margin: -4px 0 10px; color: var(--brume); font-size: 0.8rem; line-height:1.5; max-width:60ch; }
  .bouclier-etat{ display:flex; align-items:center; gap:5px; margin-top:2px; font-size:0.74rem; color: var(--ink-soft); }
  .bouclier-etat svg{ width:13px; height:13px; flex-shrink:0; }
  .bouclier-row.actif .bouclier-etat, .bouclier-row.programme .bouclier-etat{ color: var(--rare); font-weight:600; }
  .bouclier-row .bourse-name{ display:flex; flex-wrap:wrap; column-gap:4px; }
  .bouclier-row .bouclier-etat{ flex-basis:100%; }
  .bouclier-titre-icone{ display:inline-flex; width:28px; height:28px; margin-right:8px; vertical-align:-3px; color: var(--c-legendaire); }
  .bouclier-titre-icone svg{ width:100%; height:100%; }
  .offres{ display:flex; flex-direction:column; gap:8px; margin-bottom:6px; }
  .offre{
    display:flex; align-items:center; gap:10px;
    padding:11px 14px; border-radius:12px;
    background: rgba(169,188,212,0.08);
    border:1.5px solid rgba(169,188,212,0.2);
    cursor:pointer;
  }
  .offre:hover{ border-color: rgba(169,188,212,0.45); }
  .offre:has(input:checked){ border-color: var(--c-legendaire); background: rgba(240,180,41,0.1); }
  .offre input{ accent-color: var(--c-legendaire); margin:0; }
  .offre-duree{ flex:1; font-weight:600; }
  .offre-prix{ font-family: var(--titre); font-weight:800; font-size:1.25rem; color: var(--c-legendaire); }
  .offre-note{ flex-basis:100%; margin-left:26px; font-size:0.72rem; color:#FF8F92; }
  .offre.indisponible{ opacity:0.55; cursor:not-allowed; flex-wrap:wrap; }
  .cc-btn{ width:100%; border-radius:16px; padding:8px; font-size:0.8rem; }
  .bourse-row{
    display:flex;
    align-items:center;
    gap:10px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 12px;
    flex-wrap: wrap;
    color: var(--ink);
  }
  .bourse-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .bourse-name{ flex:1; font-size:0.85rem; min-width:120px; }
  .bourse-dept{ color: var(--ink-soft); font-size:0.76rem; }
  .bourse-price{ font-size:0.8rem; color: var(--ink-soft); white-space:nowrap; }
  .bourse-btn{
    font-family:inherit;
    font-size:0.74rem;
    color: var(--bleu);
    background: none;
    border: 1.5px solid var(--bleu);
    border-radius: 14px;
    padding: 5px 11px;
    cursor: pointer;
    white-space:nowrap;
  }
  .bourse-btn:hover{ background: rgba(0,38,84,0.06); }
  .bourse-btn:disabled{ opacity:0.5; cursor:default; }

  .territory{
    margin-top: 40px;
    width: 100%;
    max-width: 1200px;
    border-top: 1px solid rgba(169,188,212,0.16);
    padding-top: 18px;
  }
  .territory h2{
    font-size: 0.85rem;
    font-weight:normal;
    color: var(--brume);
    margin: 0 0 12px;
    font-variant: small-caps;
    letter-spacing:0.03em;
  }
  .map-note{
    font-size: 0.72rem;
    color: var(--brume);
    margin-top: 8px;
  }
  .toggle-others-btn{
    font-family:inherit;
    font-size:0.76rem;
    color: #fff;
    background: none;
    border: 1.5px solid rgba(169,188,212,0.45);
    border-radius: 16px;
    padding: 6px 14px;
    margin-bottom: 12px;
    cursor: pointer;
    align-self: flex-start;
  }
  .toggle-others-btn:hover{
    background: rgba(169,188,212,0.1);
  }
  .map-wrap{
    position: relative;
    max-width: 1200px;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(169,188,212,0.18);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    cursor: grab;
    background: #0A1629;
    margin: 0 auto;
    touch-action: none;
  }
  .map-wrap:active{ cursor: grabbing; }
  .map-transform{
    position: absolute;
    inset: 0;
    transform-origin: 0 0;
  }
  /* pendant un geste : couche deplacee par la carte graphique, sans redessin */
  .map-wrap.en-mouvement .map-transform{ will-change: transform; }
  .map-wrap.en-mouvement #mapSurvol{ pointer-events: none; }
  .map-wrap{ contain: layout paint; }
  .map-france-svg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  #mapFranceSvg g[data-joueur]{ transition: opacity .2s; }
  #mapFranceSvg.surlignage g[data-joueur]{ opacity: .15; }
  #mapFranceSvg.surlignage g[data-joueur].actif{ opacity: 1; }

  /* ---------- Legende de la carte ---------- */
  .map-legende{
    position:absolute; left:14px; top:14px; z-index:2;
    /* fond presque opaque sans flou : un flou d'arriere-plan serait recalcule a chaque mouvement */
    background: rgba(10,22,40,0.94);
    border: 1px solid rgba(169,188,212,0.18);
    border-radius: 12px;
    font-size: 0.8rem;
    width: 210px;
    max-height: calc(100% - 28px);
    display:flex; flex-direction:column;
    cursor: default;
  }
  .map-legende:empty{ display:none; }
  .map-legende.repliee{ width:auto; }
  .leg-tete{ display:flex; align-items:center; gap:8px; padding: 10px 10px 10px 14px; }
  .map-legende.repliee .leg-tete{ padding: 6px 6px 6px 12px; }
  .leg-tete h3{ margin:0; flex:1; font-family: var(--titre); font-weight:800; font-size:1.05rem; letter-spacing:.01em; color:#fff; }
  .map-legende.repliee .leg-tete h3{ font-size: .95rem; }
  .leg-bouton{
    width:28px; height:28px; border-radius:8px; flex-shrink:0;
    border:none; background: rgba(169,188,212,0.12); color:#fff;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .leg-bouton:hover{ background: rgba(169,188,212,0.22); }
  .leg-bouton svg{ width:14px; height:14px; transition: transform .15s; }
  .map-legende.repliee .leg-bouton svg{ transform: rotate(180deg); }
  .leg-bouton:focus-visible, .leg-joueur:focus-visible, .leg-plus:focus-visible{ outline: 2px solid var(--c-legendaire); outline-offset: 1px; }
  .leg-corps{ padding: 0 8px 12px; overflow-y:auto; min-height:0; }
  .map-legende.repliee .leg-corps{ display:none; }
  .leg-joueur{
    display:flex; align-items:center; gap:8px;
    width:100%; margin:1px 0; padding:5px 6px;
    border:none; border-radius:7px; background:none;
    color: var(--brume); font: inherit; text-align:left; cursor:pointer;
  }
  .leg-joueur:hover{ background: rgba(169,188,212,0.1); }
  .leg-joueur.actif{ background: rgba(169,188,212,0.18); color:#fff; }
  .leg-joueur b{ color:#fff; font-weight:600; }
  .leg-pseudo{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .leg-nb{ margin-left:auto; padding-left:6px; font-variant-numeric: tabular-nums; }
  .leg-pastille{ width:12px; height:12px; border-radius:4px; flex-shrink:0; }
  .leg-plus{
    display:block; width:100%; margin-top:4px; padding:5px 6px;
    border:none; border-radius:7px; background:none;
    color: var(--c-legendaire); font: inherit; font-size: .76rem; text-align:left; cursor:pointer;
  }
  .leg-plus:hover{ background: rgba(240,180,41,0.1); }
  .leg-indice{ margin: 6px 6px 0; color: var(--brume); font-size: .7rem; line-height:1.4; }
  .leg-tailles{ display:flex; align-items:flex-end; gap:10px; margin: 10px 6px 0; padding-top:10px; border-top: 1px solid rgba(169,188,212,0.16); color: var(--brume); font-size: .7rem; }
  .leg-tailles div{ display:flex; flex-direction:column; align-items:center; gap:4px; }

  /* ---------- Mini-cartes de la collection ---------- */
  .mini{
    display:flex; flex-direction:column;
    aspect-ratio: 2 / 3;
    border-radius: 10px; padding: 2px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.35);
    transition: transform .12s ease-out;
    content-visibility: auto;
    contain-intrinsic-size: auto 150px;
  }
  @media (hover: hover){ .mini:hover{ transform: translateY(-3px); } }
  .mini.commun{ background: var(--c-commun); }
  .mini.peucommun{ background: var(--c-peucommun); }
  .mini.rare{ background: linear-gradient(160deg, #7FB0FF, var(--c-rare) 45%, #1D4FB8); }
  .mini.legendaire{
    background: linear-gradient(135deg, #FFF1B8, var(--c-legendaire) 35%, #B7791F 60%, #FCE38A 85%);
    padding: 3px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.35), 0 0 16px rgba(240,180,41,0.35);
  }
  .mini-int{
    flex:1; min-height:0;
    border-radius: 8px; overflow:hidden;
    background: var(--papier); color: var(--encre);
    display:flex; flex-direction:column;
  }
  .mini-art{ position:relative; aspect-ratio: 16 / 10; margin: 4px 4px 0; border-radius: 6px; overflow:hidden; flex-shrink:0; }
  .mini-art svg{ display:block; width:100%; height:100%; }
  .mini-dept{
    position:absolute; right:4px; bottom:-3px;
    font-family: var(--titre); font-weight:900; font-size: 1.6rem; line-height:1;
    color: rgba(255,255,255,0.3);
  }
  .mini-infos{ flex:1; min-height:0; padding: 5px 6px; display:flex; flex-direction:column; }
  .mini-nom{
    font-family: var(--titre); font-weight:800; font-size: 1rem; line-height: 0.95;
    margin:0; overflow-wrap:anywhere;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .mini-nom.long{ font-size: 0.85rem; }
  .mini-num{ margin-top: 3px; font-size: 0.62rem; color:#5A6B82; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric: tabular-nums; }
  .mini-rarete{ margin-top:auto; font-size: 0.6rem; font-weight:600; white-space:nowrap; }
  .mini-bouclier{
    position:absolute; left:4px; top:4px;
    width:20px; height:20px; border-radius:50%;
    background: rgba(11,24,48,0.8); color:#fff;
    display:flex; align-items:center; justify-content:center;
  }
  .mini-bouclier svg{ width:12px; height:12px; }
  .mini.commun .mini-rarete{ color:#5F6C80; }
  .mini.peucommun .mini-rarete{ color:#16734C; }
  .mini.rare .mini-rarete{ color:#1D4FB8; }
  .mini.legendaire .mini-rarete{ color:#9A6412; }
  .mini-lisere{ display:flex; height:3px; flex-shrink:0; }
  .mini-lisere span{ flex:1; }
  .mini-lisere span:nth-child(1){ background:#1F3F8F; }
  .mini-lisere span:nth-child(2){ background:#fff; }
  .mini-lisere span:nth-child(3){ background: var(--c-rouge); }

  button.open-btn{
    font-family: var(--titre);
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: 0.02em;
    background: var(--c-legendaire);
    color: var(--encre);
    border: none;
    border-radius: 12px;
    padding: 11px 22px 13px;
    cursor: pointer;
    box-shadow: 0 5px 0 #B7791F;
    transition: transform .08s ease, box-shadow .08s ease;
  }
  button.open-btn:hover{ filter: brightness(1.05); }
  button.open-btn:active:not(:disabled){ transform: translateY(4px); box-shadow: 0 1px 0 #B7791F; }
  button.open-btn:disabled{ opacity: 0.45; cursor: default; filter: none; }
  button.open-btn:focus-visible{ outline: 2px solid var(--c-legendaire); outline-offset: 3px; }
  .open-btn.secondary{
    background: transparent;
    color: #fff;
    box-shadow: inset 0 0 0 2px rgba(169,188,212,0.35), 0 5px 0 rgba(0,0,0,0.25);
  }
  .open-btn.secondary:active:not(:disabled){
    box-shadow: inset 0 0 0 2px rgba(169,188,212,0.35), 0 1px 0 rgba(0,0,0,0.25);
  }

  .puces{
    display:flex;
    flex-wrap:wrap;
    gap: 8px;
    margin-bottom: 18px;
  }
  .puce{
    background: var(--nuit-2);
    border: 1px solid rgba(169,188,212,0.16);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 0.85rem;
    color: var(--brume);
  }
  .puce b{ color:#fff; font-weight:600; }
  .puce.solde b{ color: var(--c-legendaire); }
  .pack-buttons{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom: 30px;
  }

  .stats{
    margin-top: 18px;
    width: 100%;
    max-width: 460px;
    border-top: 1px solid rgba(169,188,212,0.16);
    padding-top: 14px;
  }
  .stats h2{
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--brume);
    margin: 0 0 10px;
  }
  .stat-row{
    display:flex;
    align-items:center;
    gap:10px;
    font-size: 0.78rem;
    margin-bottom: 6px;
  }
  .stat-row .dot{ width:9px;height:9px;border-radius:50%; flex-shrink:0; }
  .stat-row .label{ width: 88px; color: var(--brume); }
  .bar-track{ flex:1; height:7px; background: rgba(169,188,212,0.18); border-radius:4px; overflow:hidden; }
  .bar-fill{ height:100%; }
  .stat-row .nums{ width: 118px; text-align:right; color: var(--brume); font-size:0.72rem; }

  .note{
    max-width: 60ch;
    font-size: 0.78rem;
    color: var(--brume);
    margin-top: 22px;
    line-height: 1.5;
  }
  .app-shell{
    position: relative;
    z-index: 1;
    display:flex;
    width:100%;
    min-height:100vh;
  }
  .sidebar{
    width: 220px;
    flex-shrink: 0;
    background: rgba(10,22,40,0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-right: 1px solid rgba(169,188,212,0.12);
    padding: 24px 14px;
    display:flex;
    flex-direction:column;
    gap: 6px;
    position: sticky;
    top: 0;
    height: 100vh;
  }
  .sidebar-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .sidebar .brand{
    font-family: var(--titre);
    font-weight: 900;
    font-size: 1.9rem;
    line-height: 1;
    letter-spacing: 0.01em;
    color:#fff;
    padding: 0 10px 22px;
    flex:1;
  }
  .sidebar .brand span{ color: var(--c-legendaire); }
  .logout-icon-btn{
    display:none;
    width:32px; height:32px;
    border-radius:50%;
    background: rgba(169,188,212,0.12);
    border:none;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    flex-shrink:0;
  }
  .logout-icon-btn svg{ width:15px; height:15px; }
  .tabs-row{
    display:flex;
    flex-direction:column;
    gap: 6px;
  }
  .tab{
    --icon-bg: #0B182C;
    position: relative;
    display:flex;
    align-items:center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 10px;
    color: var(--brume);
    font-weight: 500;
    font-size: 0.95rem;
    cursor:pointer;
    user-select: none;
  }
  .tab:hover{ background: rgba(169,188,212,0.08); color:#fff; }
  .tab .icon{
    width:20px; height:20px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    color: inherit;
  }
  .tab .icon svg{ width:20px; height:20px; }
  .tab.active{
    --icon-bg: var(--nuit-3);
    background: var(--nuit-3);
    color:#fff;
  }
  .tab.active::before{
    content:"";
    position:absolute;
    left:-14px; top:8px; bottom:8px;
    width:4px;
    border-radius: 0 4px 4px 0;
    background: var(--c-legendaire);
  }
  .sidebar-footer{
    margin-top:auto;
    padding: 14px 10px 2px;
    border-top: 1px solid rgba(169,188,212,0.14);
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size: 0.75rem;
    color: var(--brume);
    overflow-wrap: anywhere;
  }
  .content{
    flex:1;
    padding: 36px 40px 60px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    min-width:0;
  }
  .tab-panel{
    display:none;
    width:100%;
    flex-direction:column;
    align-items:flex-start;
  }
  .tab-panel.active{ display:flex; }
  .link-btn{
    background:none;
    border:none;
    color:#fff;
    text-decoration:underline;
    font-family:inherit;
    font-size:0.72rem;
    cursor:pointer;
    padding:0;
    text-align:left;
    opacity:0.8;
  }
  @media (max-width: 720px){
    .app-shell{ flex-direction:column; }
    .sidebar{
      width:100%;
      height:auto;
      position: relative;
      padding: 10px 14px 0;
      gap: 0;
      border-right: none;
      border-bottom: 1px solid rgba(169,188,212,0.12);
    }
    .sidebar-top{ padding-bottom:8px; }
    .sidebar .brand{ padding:0; font-size: 1.45rem; }
    .logout-icon-btn{ display:flex; }
    .tabs-row{ flex-direction:row; gap:0; }
    .tab{
      --icon-bg: #0B182C;
      flex:1;
      flex-direction:column;
      gap:4px;
      padding: 10px 4px 9px;
      border-radius: 0;
      border-bottom: 2.5px solid transparent;
      font-size: 0.66rem;
      white-space: nowrap;
    }
    .tab:hover{ background: transparent; }
    .tab .icon, .tab .icon svg{ width:19px; height:19px; }
    .tab.active{
      --icon-bg: #0B182C;
      background: transparent;
      border-bottom-color: var(--c-legendaire);
    }
    .tab.active::before{ display:none; }
    .tab-badge{
      position:absolute; top:5px; left:calc(50% + 5px);
      margin:0; min-width:16px; height:16px; padding:0 4px;
      font-size:0.6rem;
    }
    .sidebar-footer{ display:none; }
    .content{ padding: 20px 14px 32px; }
    .map-legende{ left:8px; top:8px; width:180px; font-size:.74rem; }
    .leg-tailles{ display:none; }
    .coll-entete{ margin: -20px -14px 12px; padding: 14px 14px 10px; }
    .coll-filtres{ flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
    .coll-filtre{ white-space: nowrap; }
    .coll-grille{ grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
    .mini-art{ margin: 3px 3px 0; }
    .mini-dept{ font-size: 1.3rem; }
    .mini-infos{ padding: 4px 5px; }
    .mini-nom{ font-size: 0.9rem; }
    .mini-nom.long{ font-size: 0.78rem; }
    .mini-rarete{ font-size: 0.56rem; }
    .mini-num{ font-size: 0.58rem; margin-top:2px; }
    .mini-total{ display:none; }
    .pack-zone{ gap: 12px; justify-content:center; }
    .card{ width: 164px; height: 240px; }
    .carte-haut{ padding: 6px 7px 5px; }
    .carte-rarete{ font-size: 0.6rem; padding: 2px 6px; }
    /* le rang reste affiche en bas de la carte */
    .carte-num{ display:none; }
    .carte-art{ height: 38%; margin: 0 6px; }
    .carte-dept{ font-size: 2.4rem; right:5px; bottom:-5px; }
    .carte-infos{ padding: 7px 8px 0; }
    .carte-nom{ font-size: 1.1rem; line-height: 0.95; }
    .carte-nom.long{ font-size: 0.95rem; }
    .carte-nom.tres-long{ font-size: 0.82rem; }
    .carte-departement{ font-size: 0.66rem; margin-top: 2px; }
    .carte-stats{ gap: 10px; margin-bottom: 6px; padding-top: 4px; }
    .carte-stats span{ font-size: 0.56rem; }
    .carte-stats b{ font-size: 0.9rem; }
  }
  .auth-screen{
    position: relative;
    z-index: 1;
    padding: 16px;
    width:100%;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .auth-box{
    width:100%;
    max-width:360px;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:10px;
    padding:28px 26px;
    box-shadow: 0 14px 28px rgba(0,0,0,0.4);
    text-align:center;
    color: var(--ink);
  }
  .auth-box h1{
    font-size:1.25rem;
    margin-bottom:6px;
  }
  .auth-box .sub{
    margin-bottom:20px;
    font-size:0.82rem;
    color: var(--ink-soft);
  }
  .auth-box input{
    width:100%;
    font-family:inherit;
    font-size:0.9rem;
    padding:10px 12px;
    margin-bottom:10px;
    border:1px solid var(--line);
    border-radius:6px;
    background:#fff;
    color:var(--ink);
  }
  .auth-buttons{
    display:flex;
    gap:10px;
    margin-top:6px;
  }
  .auth-buttons .open-btn{
    flex:1;
    padding:10px 14px 12px;
    font-size:1.05rem;
  }
  .auth-box .open-btn.secondary{
    color: var(--encre);
    box-shadow: inset 0 0 0 2px var(--line), 0 5px 0 rgba(0,0,0,0.12);
  }
  .auth-msg{
    min-height:1.2em;
    font-size:0.82rem;
    margin:12px 0 0;
    border-radius:8px;
    line-height:1.4;
  }
  .auth-msg.erreur, .auth-msg.succes{ padding:8px 12px; }
  .auth-msg.erreur{ background:#FDECEC; color:#A32227; }
  .auth-msg.succes{ background:#E6F5EE; color:#12664A; }

  /* ---------- Notifications ---------- */
  .notifs{
    position:fixed; z-index:50;
    top:16px; left:50%; transform:translateX(-50%);
    width:min(420px, calc(100vw - 24px));
    display:flex; flex-direction:column; gap:8px;
    pointer-events:none;
  }
  .notif{
    pointer-events:auto;
    display:flex; align-items:center; gap:12px;
    background: rgba(16,32,56,0.96);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border:1px solid rgba(169,188,212,0.2);
    border-left:4px solid var(--brume);
    border-radius:12px;
    padding:11px 10px 11px 12px;
    color:#fff;
    box-shadow:0 14px 30px rgba(0,0,0,0.45);
    font-family: var(--texte);
    opacity:0; transform:translateY(-12px);
    transition: opacity .2s ease, transform .2s ease;
  }
  .notif.visible{ opacity:1; transform:none; }
  .notif.sortie{ opacity:0; transform:translateY(-8px); }
  .notif.victoire, .notif.succes{ border-left-color: var(--c-peucommun); }
  .notif.defaite, .notif.erreur{ border-left-color: var(--c-rouge); }
  .notif.info{ border-left-color: var(--c-rare); }
  .notif-icone{
    width:30px; height:30px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background: rgba(169,188,212,0.14); color:#fff;
  }
  .notif.victoire .notif-icone, .notif.succes .notif-icone{ background: rgba(34,160,107,0.22); color:#5EE0A8; }
  .notif.defaite .notif-icone, .notif.erreur .notif-icone{ background: rgba(229,72,77,0.2); color:#FF8F92; }
  .notif.info .notif-icone{ background: rgba(47,124,246,0.22); color:#8DB8FF; }
  .notif-icone svg{ width:16px; height:16px; }
  .notif-texte{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
  .notif-texte b{ font-weight:600; font-size:0.9rem; }
  .notif-texte span{ color: var(--brume); font-size:0.8rem; }
  .notif-serie{ display:flex; gap:4px; flex-shrink:0; }
  .notif-serie i{ width:11px; height:11px; border-radius:50%; border:1.5px solid rgba(169,188,212,0.45); }
  .notif.victoire .notif-serie i.plein{ background: var(--c-legendaire); border-color: var(--c-legendaire); }
  .notif-fermer{
    width:28px; height:28px; border-radius:8px; flex-shrink:0;
    border:none; background:none; color: var(--brume); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .notif-fermer:hover{ background: rgba(169,188,212,0.12); color:#fff; }
  .notif-fermer svg{ width:14px; height:14px; }

  /* ---------- Fenetres : conquete et prix de vente ---------- */
  .fenetre-fond{
    position:fixed; inset:0; z-index:60;
    background: rgba(5,12,24,0.72);
    display:flex; align-items:center; justify-content:center;
    padding:16px;
    opacity:0; transition: opacity .18s ease;
  }
  .fenetre-fond[hidden]{ display:none; }
  .fenetre-fond.visible{ opacity:1; }
  .fenetre{
    position:relative; overflow:hidden;
    width:min(380px, 100%);
    background: var(--nuit-2);
    border:1px solid rgba(169,188,212,0.2);
    border-radius:18px;
    padding:26px 24px 22px;
    color:#fff; text-align:center;
    box-shadow:0 30px 60px rgba(0,0,0,0.5);
    transform: scale(.94); transition: transform .2s cubic-bezier(.2,.8,.3,1.2);
  }
  .fenetre-fond.visible .fenetre{ transform:none; }
  .fenetre h2{ font-family: var(--titre); font-weight:900; font-size:2.2rem; line-height:.95; margin:0 0 8px; position:relative; }
  .conquete{ border:2px solid var(--c-legendaire); }
  .conquete.rare{ border-color: var(--c-rare); }
  .conquete-eclat{
    position:absolute; left:50%; top:-120px; width:360px; height:360px; margin-left:-180px;
    background: radial-gradient(circle, rgba(240,180,41,0.35), transparent 65%);
    pointer-events:none;
  }
  .conquete.rare .conquete-eclat{ background: radial-gradient(circle, rgba(47,124,246,0.35), transparent 65%); }
  .conquete-sur{ position:relative; margin:0 0 6px; color: var(--c-legendaire); font-weight:600; font-size:.85rem; letter-spacing:.04em; }
  .conquete.rare .conquete-sur{ color:#8DB8FF; }
  .conquete-infos{ position:relative; margin:0 0 16px; color: var(--brume); font-size:.88rem; }
  .conquete-rarete{ display:inline-block; padding:2px 9px; border-radius:999px; background: var(--c-legendaire); color: var(--encre); font-weight:600; font-size:.72rem; margin-right:4px; }
  .conquete.rare .conquete-rarete{ background: var(--c-rare); color:#fff; }
  .conquete-bonus{ position:relative; margin:0 0 6px; font-family: var(--titre); font-weight:800; font-size:1.7rem; color: var(--c-legendaire); }
  .conquete-note{ position:relative; margin:0 0 20px; color: var(--brume); font-size:.8rem; }
  .fenetre .open-btn{ position:relative; }
  .fenetre.prix{ text-align:left; }
  .fenetre.prix h2{ font-size:1.9rem; }
  .prix-commune{ margin:0 0 16px; color: var(--brume); }
  .prix-champ{ display:flex; flex-direction:column; gap:6px; font-size:.82rem; color: var(--brume); }
  .prix-saisie{ display:flex; align-items:center; gap:8px; background: var(--papier); border-radius:10px; padding:4px 12px; }
  .prix-saisie input{ flex:1; min-width:0; border:none; background:none; font-family: var(--titre); font-weight:800; font-size:1.6rem; color: var(--encre); padding:4px 0; }
  .prix-saisie input:focus{ outline:none; }
  .prix-saisie:focus-within{ box-shadow: 0 0 0 2px var(--c-legendaire); }
  .prix-saisie em{ font-style:normal; color:#5A6B82; font-weight:600; }
  .prix-aide{ margin:8px 0 0; font-size:.78rem; color: var(--brume); }
  .prix-erreur{ margin:6px 0 0; min-height:1.1em; font-size:.8rem; color:#FF8F92; }
  .prix-boutons{ display:flex; gap:10px; justify-content:flex-end; margin-top:14px; flex-wrap:wrap; }
  .prix-boutons .open-btn{ font-size:1.05rem; padding:9px 18px 11px; }

  @media (prefers-reduced-motion: reduce){
    .notif, .fenetre-fond, .fenetre{ transition:none; }
  }

  /* =====================================================================
     DIRECTION ARTISTIQUE FINALE : filtres, combat, bourse, connexion
     ===================================================================== */

  /* ---------- Filtres, recherche, pastille de solde ---------- */
  .bourse-filters{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px; }
  .filter-pill{
    display:inline-flex; align-items:center; gap:7px;
    font-family: inherit; font-size: 0.82rem; font-weight: 500;
    color: var(--brume); background: var(--nuit-2);
    border: 1px solid rgba(169,188,212,0.16); border-radius: 999px;
    padding: 6px 12px; cursor: pointer;
  }
  .filter-pill:hover{ border-color: rgba(169,188,212,0.4); }
  .filter-pill.active{ background: var(--papier); color: var(--encre); border-color: var(--papier); }
  .filter-pill:focus-visible{ outline: 2px solid var(--c-legendaire); outline-offset: 2px; }
  .pill-point{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .prox-switch{ background: rgba(169,188,212,0.3); }
  .prox-toggle.active{ background: var(--nuit-3); color:#fff; border-color: rgba(240,180,41,0.5); }
  .en-cours-nb{ background: rgba(169,188,212,0.2); color:#fff; }
  .prox-toggle.active .en-cours-nb{ background: rgba(240,180,41,0.25); }
  .bourse-search{
    width:100%; max-width:420px; margin-bottom:14px;
    background: var(--nuit-2); color:#fff;
    font-family: inherit; font-size: 0.9rem;
    border: 1px solid rgba(169,188,212,0.2); border-radius: 10px; padding: 10px 14px;
  }
  .bourse-search::placeholder{ color: var(--brume); }
  .bourse-search:focus{ outline:none; border-color: var(--c-legendaire); }
  .combat-proximite .puce{ margin-right:4px; }

  /* ---------- Combat : cartes cibles ---------- */
  .cibles-grille{ width:100%; display:grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap:18px; margin-top:6px; }
  .cibles-grille > .collection-empty{ grid-column: 1 / -1; }
  .cible{ border-radius:14px; padding:3px; box-shadow: 0 12px 24px rgba(0,0,0,0.4); }
  .cible.rare{ background: linear-gradient(160deg, #7FB0FF, var(--c-rare) 45%, #1D4FB8); }
  .cible.legendaire{
    background: linear-gradient(135deg, #FFF1B8, var(--c-legendaire) 35%, #B7791F 60%, #FCE38A 85%);
    padding:4px;
    box-shadow: 0 12px 24px rgba(0,0,0,0.4), 0 0 22px rgba(240,180,41,0.3);
  }
  .cible-int{ height:100%; border-radius:11px; background: var(--papier); color: var(--encre); overflow:hidden; display:flex; flex-direction:column; }
  .cible-haut{ display:flex; justify-content:space-between; align-items:center; gap:6px; padding:8px 9px 6px; }
  .cible-rarete{ font-size:0.68rem; font-weight:600; padding:2px 8px; border-radius:999px; color:#fff; white-space:nowrap; }
  .cible.rare .cible-rarete{ background: var(--c-rare); }
  .cible.legendaire .cible-rarete{ background: var(--c-legendaire); color: var(--encre); }
  .cible-etat{ display:inline-flex; align-items:center; gap:4px; font-size:0.68rem; font-weight:600; padding:2px 8px; border-radius:999px; white-space:nowrap; }
  .cible-etat svg{ width:11px; height:11px; }
  .cible-etat.pret{ background:#DDF3E8; color:#12664A; }
  .cible-etat.attente, .cible-etat.protegee{ background:#E4E9F0; color:#5A6B82; }
  .cible-etat.bouclier{ background:#DCE8FD; color:#1D4FB8; }
  .cible-art{ position:relative; margin:0 7px; border-radius:8px; overflow:hidden; height:86px; flex-shrink:0; }
  .cible-art svg{ display:block; width:100%; height:100%; }
  .cible-dept{ position:absolute; right:7px; bottom:-6px; font-family: var(--titre); font-weight:900; font-size:3rem; line-height:1; color: rgba(255,255,255,0.28); }
  .cible-infos{ padding:9px 11px 0; }
  .cible-nom{ font-family: var(--titre); font-weight:800; font-size:1.45rem; line-height:0.98; margin:0; overflow-wrap:anywhere; }
  .cible-nom.long{ font-size:1.15rem; }
  .cible-proprio{ display:flex; align-items:center; gap:6px; margin:4px 0 0; font-size:0.76rem; color:#5A6B82; }
  .cible-proprio i{ width:9px; height:9px; border-radius:3px; flex-shrink:0; }
  .cible-proprio b{ color: var(--encre); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cible-distance{ margin:2px 0 0; font-size:0.72rem; color:#5A6B82; }
  .cible-serie{ display:flex; align-items:center; justify-content:space-between; margin:10px 11px 0; padding-top:8px; border-top:1px solid #D5DDE7; font-size:0.72rem; color:#5A6B82; }
  .cible-ronds{ display:flex; gap:5px; }
  .cible-ronds i{ width:13px; height:13px; border-radius:50%; border:2px solid #C3CCD8; }
  .cible-ronds i.plein{ background: var(--c-legendaire); border-color:#B7791F; }
  .cible-note{ margin:6px 11px 0; font-size:0.72rem; color:#5A6B82; min-height:1.1em; }
  .cible-note.alerte{ color:#A32227; font-style:italic; }
  .cible-attaquer{
    margin: auto 9px 9px; margin-top:10px;
    display:flex; align-items:center; justify-content:center; gap:8px;
    font-family: var(--titre); font-weight:800; font-size:1.15rem; letter-spacing:0.02em;
    background: var(--c-rouge); color:#fff;
    border:none; border-radius:10px; padding:9px 10px 10px;
    box-shadow: 0 4px 0 #9E2A2E; cursor:pointer;
  }
  .cible-attaquer b{ font-family: var(--texte); font-size:0.75rem; font-weight:600; background: rgba(0,0,0,0.2); padding:2px 7px; border-radius:999px; }
  .cible-attaquer:active:not(:disabled){ transform: translateY(3px); box-shadow: 0 1px 0 #9E2A2E; }
  .cible-attaquer:disabled{ background:#C3CCD8; color:#6B7A8F; box-shadow: 0 4px 0 #A9B4C3; cursor:default; }
  .cible-attaquer:disabled b{ background: rgba(255,255,255,0.35); }
  .cible-attaquer:focus-visible{ outline:2px solid var(--encre); outline-offset:2px; }

  /* ---------- Bourse : sections et lignes ---------- */
  .bourse-section{ width:100%; max-width:860px; margin: 26px 0 0; }
  .bourse-section h2{ font-family: var(--titre); font-weight:800; font-size:1.5rem; font-variant:normal; letter-spacing:0.01em; color:#fff; margin:0 0 12px; }
  .bourse-grid{ max-height:none; overflow:visible; gap:8px; }
  .bouclier-intro{ margin:-6px 0 12px; }
  .ligne{
    display:flex; align-items:center; gap:14px;
    background: var(--nuit-2);
    border:1px solid rgba(169,188,212,0.14);
    border-left:4px solid var(--c-commun);
    border-radius:12px;
    padding:11px 12px 11px 14px;
  }
  .ligne.peucommun{ border-left-color: var(--c-peucommun); }
  .ligne.rare{ border-left-color: var(--c-rare); }
  .ligne.legendaire{ border-left-color: var(--c-legendaire); }
  .ligne-texte{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .ligne-nom{ font-family: var(--titre); font-weight:800; font-size:1.25rem; line-height:1; overflow-wrap:anywhere; }
  .ligne-detail{ font-size:0.78rem; color: var(--brume); }
  .ligne-detail i{ display:inline-block; width:8px; height:8px; border-radius:3px; margin:0 4px 0 2px; }
  .ligne-etat{ display:inline-flex; align-items:center; gap:5px; margin-top:3px; font-size:0.76rem; color: var(--brume); }
  .ligne-etat svg{ width:13px; height:13px; flex-shrink:0; }
  .ligne-etat.bleu{ color:#8DB8FF; font-weight:600; }
  .ligne-prix{ font-family: var(--titre); font-weight:800; font-size:1.5rem; color: var(--c-legendaire); white-space:nowrap; }
  .ligne-prix small{ font-family: var(--texte); font-size:0.7rem; font-weight:500; color: var(--brume); margin-left:3px; }
  .ligne-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
  .btn-p{
    font-family: var(--titre); font-weight:800; font-size:1rem; letter-spacing:0.02em;
    border:none; border-radius:10px; padding:7px 13px 8px; cursor:pointer; white-space:nowrap;
  }
  .btn-p.or{ background: var(--c-legendaire); color: var(--encre); box-shadow: 0 3px 0 #B7791F; }
  .btn-p.contour{ background:transparent; color:#fff; box-shadow: inset 0 0 0 1.5px rgba(169,188,212,0.4); }
  .btn-p.contour b{ color: var(--c-legendaire); }
  .btn-p:active:not(:disabled){ transform: translateY(2px); }
  .btn-p.or:active:not(:disabled){ box-shadow: 0 1px 0 #B7791F; }
  .btn-p:disabled{ opacity:0.45; cursor:default; }
  .btn-p:focus-visible{ outline:2px solid var(--c-legendaire); outline-offset:2px; }
  .chip-vente{ font-size:0.72rem; font-weight:600; background: rgba(240,180,41,0.15); color: var(--c-legendaire); padding:3px 9px; border-radius:999px; white-space:nowrap; }

  /* ---------- Connexion ---------- */
  .auth-screen{ position:relative; z-index:1; width:100%; min-height:100vh; padding:24px; display:flex; align-items:center; justify-content:center; }
  .auth{ width:100%; max-width:1000px; display:grid; grid-template-columns: 1.1fr 1fr; gap:40px; align-items:center; }
  .auth-visuel{ position:relative; height:420px; }
  .eventail{ position:absolute; left:50%; top:50%; width:0; height:0; }
  .auth-carte{ position:absolute; width:170px; height:238px; left:-85px; top:-119px; border-radius:13px; padding:3px; box-shadow: 0 18px 36px rgba(0,0,0,0.5); }
  .auth-carte.c1{ transform: translateX(-120px) rotate(-14deg); background: var(--c-peucommun); }
  .auth-carte.c2{ transform: translateX(120px) rotate(14deg); background: linear-gradient(160deg, #7FB0FF, var(--c-rare) 45%, #1D4FB8); }
  .auth-carte.c3{ transform: translateY(-14px); z-index:2; padding:4px; background: linear-gradient(135deg, #FFF1B8, var(--c-legendaire) 35%, #B7791F 60%, #FCE38A 85%); box-shadow: 0 18px 36px rgba(0,0,0,0.5), 0 0 30px rgba(240,180,41,0.35); }
  .auth-carte-int{ position:relative; height:100%; border-radius:10px; background: var(--papier); color: var(--encre); overflow:hidden; display:flex; flex-direction:column; }
  .auth-carte-badge{ position:absolute; top:8px; left:9px; font-size:0.6rem; font-weight:600; padding:2px 7px; border-radius:999px; color:#fff; }
  .auth-carte.peucommun .auth-carte-badge{ background: var(--c-peucommun); }
  .auth-carte.rare .auth-carte-badge{ background: var(--c-rare); }
  .auth-carte.legendaire .auth-carte-badge{ background: var(--c-legendaire); color: var(--encre); }
  .auth-carte-art{ margin:28px 6px 0; height:40%; border-radius:7px; overflow:hidden; }
  .auth-carte-art svg{ display:block; width:100%; height:100%; }
  .auth-carte-nom{ font-family: var(--titre); font-weight:800; font-size:1.3rem; line-height:1; margin:8px 9px 0; }
  .auth-carte-dep{ font-size:0.68rem; color:#5A6B82; margin:3px 9px 0; }
  .auth-carte .mini-lisere{ margin-top:auto; height:4px; }
  .auth-panneau{
    width:100%; max-width:400px;
    background: rgba(22,44,75,0.92);
    border:1px solid rgba(169,188,212,0.18);
    border-radius:20px; padding:30px 28px 26px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.45);
    color:#fff;
  }
  .auth-marque{ font-family: var(--titre); font-weight:900; font-size:2.8rem; line-height:0.9; margin:0 0 8px; }
  .auth-marque span{ color: var(--c-legendaire); }
  .auth-accroche{ color: var(--brume); font-size:0.92rem; line-height:1.5; margin:0 0 22px; }
  .auth-onglets{ display:grid; grid-template-columns:1fr 1fr; background: var(--nuit); border-radius:12px; padding:4px; margin-bottom:18px; }
  .auth-onglets button{ border:none; background:none; color: var(--brume); font-family:inherit; font-size:0.88rem; font-weight:600; padding:9px; border-radius:9px; cursor:pointer; }
  .auth-onglets button.actif{ background: var(--nuit-3); color:#fff; box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
  .auth-onglets button:focus-visible{ outline:2px solid var(--c-legendaire); outline-offset:1px; }
  .auth-champ{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; font-size:0.8rem; color: var(--brume); font-weight:500; }
  .auth-champ[hidden]{ display:none; }
  .auth-champ input{
    width:100%; margin:0;
    background: var(--nuit); color:#fff; font-family:inherit; font-size:0.95rem;
    border:1px solid rgba(169,188,212,0.22); border-radius:10px; padding:11px 13px;
  }
  .auth-champ input::placeholder{ color: rgba(169,188,212,0.6); }
  .auth-champ input:focus{ outline:none; border-color: var(--c-legendaire); box-shadow: 0 0 0 3px rgba(240,180,41,0.18); }
  .auth-champ small{ font-size:0.72rem; font-weight:400; }
  .auth-panneau .auth-msg{ min-height:0; margin:2px 0 12px; }
  .auth-panneau .auth-msg:empty{ display:none; }
  .auth-panneau .auth-msg.erreur{ background: rgba(229,72,77,0.16); color:#FFB3B5; border:1px solid rgba(229,72,77,0.35); }
  .auth-panneau .auth-msg.succes{ background: rgba(34,160,107,0.16); color:#7FE0B5; border:1px solid rgba(34,160,107,0.35); }
  .auth-valider{
    width:100%;
    font-family: var(--titre); font-weight:800; font-size:1.3rem; letter-spacing:0.02em;
    background: var(--c-legendaire); color: var(--encre);
    border:none; border-radius:12px; padding:12px;
    box-shadow: 0 5px 0 #B7791F; cursor:pointer;
  }
  .auth-valider[hidden]{ display:none; }
  .auth-valider:active{ transform: translateY(4px); box-shadow: 0 1px 0 #B7791F; }
  .auth-valider:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

  @media (max-width: 760px){
    .cibles-grille{ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:12px; }
    .cible-nom{ font-size:1.2rem; }
    .cible-nom.long{ font-size:1rem; }
    .cible-art{ height:66px; }
    .cible-dept{ font-size:2.3rem; }
    .cible-haut{ flex-wrap:wrap; }
    .cible-attaquer{ font-size:1rem; }
    .ligne{ flex-wrap:wrap; gap:8px 12px; }
    .ligne-actions{ width:100%; justify-content:flex-start; }
    .auth-screen{ padding:16px 12px; align-items:flex-start; }
    .auth{ grid-template-columns:1fr; gap:0; }
    .auth-visuel{ height:230px; transform: scale(0.62); margin:-20px 0 -30px; }
    .auth-panneau{ margin:0 auto; padding:24px 20px 22px; }
  }


  /* =====================================================================
     ONGLET REGLES
     ===================================================================== */
  #panel-regles .regles{ width:100%; max-width:880px; }
  #panel-regles .essentiel{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:26px; }
  #panel-regles .etape{ background:var(--nuit-2); border:1px solid rgba(169,188,212,.14); border-radius:14px; padding:16px 14px 14px; position:relative; }
  #panel-regles .etape-num{ font-family:var(--titre); font-weight:900; font-size:2.4rem; line-height:1; color:var(--c-legendaire); }
  #panel-regles .etape h3{ font-family:var(--titre); font-weight:800; font-size:1.2rem; line-height:1.05; margin:6px 0 6px; }
  #panel-regles .etape p{ margin:0; color:var(--brume); font-size:.82rem; line-height:1.45; }
  #panel-regles .sommaire{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
  #panel-regles .sommaire a{ color:var(--brume); text-decoration:none; font-size:.82rem; font-weight:500; background:var(--nuit-2); border:1px solid rgba(169,188,212,.16); border-radius:999px; padding:6px 12px; }
  #panel-regles .sommaire a:hover{ border-color:rgba(169,188,212,.45); color:#fff; }
  #panel-regles details.regle{ background:var(--nuit-2); border:1px solid rgba(169,188,212,.14); border-radius:14px; margin-bottom:10px; scroll-margin-top:16px; }
  #panel-regles details.regle[open]{ border-color:rgba(169,188,212,.26); }
  #panel-regles summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:16px 18px; }
  #panel-regles summary::-webkit-details-marker{ display:none; }
  #panel-regles .regle-icone{ width:36px; height:36px; border-radius:10px; background:var(--nuit-3); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--c-legendaire); }
  #panel-regles .regle-icone svg{ width:19px; height:19px; }
  #panel-regles summary h2{ font-family:var(--titre); font-weight:800; font-size:1.45rem; line-height:1; margin:0; flex:1; }
  #panel-regles summary small{ display:block; font-family:var(--texte); font-weight:400; font-size:.8rem; color:var(--brume); margin-top:3px; }
  #panel-regles .chevron{ width:18px; height:18px; color:var(--brume); transition:transform .15s; flex-shrink:0; }
  #panel-regles details[open] .chevron{ transform:rotate(180deg); }
  #panel-regles .regle-corps{ padding:0 18px 18px 66px; color:#DDE6F1; font-size:.92rem; }
  #panel-regles .regle-corps p{ margin:0 0 10px; }
  #panel-regles .regle-corps ul{ margin:0 0 12px; padding-left:18px; }
  #panel-regles .regle-corps li{ margin-bottom:6px; }
  #panel-regles .regle-corps li::marker{ color:var(--c-legendaire); }
  #panel-regles .regle-corps b{ color:#fff; font-weight:600; }
  #panel-regles .regle-corps h4{ font-family:var(--titre); font-weight:800; font-size:1.1rem; margin:16px 0 6px; color:#fff; }
  #panel-regles .tableau{ width:100%; border-collapse:collapse; margin:4px 0 14px; font-size:.86rem; }
  #panel-regles .tableau th{ text-align:left; font-weight:600; font-size:.74rem; color:var(--brume); padding:0 10px 8px 0; border-bottom:1px solid rgba(169,188,212,.2); }
  #panel-regles .tableau td{ padding:9px 10px 9px 0; border-bottom:1px solid rgba(169,188,212,.1); vertical-align:middle; }
  #panel-regles .tableau td.chiffre{ font-family:var(--titre); font-weight:800; font-size:1.05rem; white-space:nowrap; }
  #panel-regles .tableau td.or{ color:var(--c-legendaire); }
  #panel-regles .rarete{ display:inline-block; font-size:.7rem; font-weight:600; padding:2px 9px; border-radius:999px; color:#fff; white-space:nowrap; }
  #panel-regles .rarete.legendaire{ background:var(--c-legendaire); color:var(--encre); }
  #panel-regles .rarete.rare{ background:var(--c-rare); }
  #panel-regles .rarete.peucommun{ background:var(--c-peucommun); }
  #panel-regles .rarete.commun{ background:var(--c-commun); }
  #panel-regles .tableau-defile{ overflow-x:auto; }
  #panel-regles .encart{ display:flex; gap:10px; background:rgba(240,180,41,.08); border:1px solid rgba(240,180,41,.25); border-radius:10px; padding:10px 12px; font-size:.86rem; margin:6px 0 12px; }
  #panel-regles .encart svg{ width:18px; height:18px; flex-shrink:0; color:var(--c-legendaire); margin-top:2px; }
  #panel-regles .encart.rouge{ background:rgba(229,72,77,.08); border-color:rgba(229,72,77,.3); }
  #panel-regles .encart.rouge svg{ color:#FF8F92; }
  #panel-regles .chiffres{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin:4px 0 14px; }
  #panel-regles .chiffre-bloc{ background:var(--nuit); border-radius:10px; padding:10px 12px; }
  #panel-regles .chiffre-bloc b{ display:block; font-family:var(--titre); font-weight:900; font-size:1.7rem; line-height:1; color:var(--c-legendaire); }
  #panel-regles .chiffre-bloc span{ font-size:.76rem; color:var(--brume); }
  @media (max-width:760px){
    #panel-regles main{ padding:22px 14px 50px; }
    #panel-regles .essentiel{ grid-template-columns:1fr 1fr; gap:10px; }
    #panel-regles .regle-corps{ padding:0 14px 16px 14px; }
    #panel-regles summary{ padding:14px; }
    #panel-regles .chiffres{ grid-template-columns:1fr 1fr 1fr; gap:6px; }
    #panel-regles .chiffre-bloc{ padding:8px; }
    #panel-regles .chiffre-bloc b{ font-size:1.35rem; }
    #panel-regles .tableau{ font-size:.8rem; }
  }

  /* ---------- Carte et bandeau des notifications ---------- */
  .notif-carte, .notif-banniere{
    display:flex; align-items:center; gap:14px;
    background: linear-gradient(135deg, rgba(240,180,41,0.12), rgba(22,44,75,0.9) 60%);
    border:1px solid rgba(240,180,41,0.3);
    border-radius:14px;
    padding:14px 16px;
    margin: 0 0 22px;
    width:100%; max-width:880px;
  }
  .notif-carte:empty{ display:none; }
  .notif-banniere[hidden]{ display:none; }
  .notif-icone-grande{
    width:42px; height:42px; border-radius:12px; flex-shrink:0;
    background: var(--c-legendaire); color: var(--encre);
    display:flex; align-items:center; justify-content:center;
  }
  .notif-icone-grande svg{ width:22px; height:22px; }
  .notif-corps{ flex:1; min-width:0; }
  .notif-corps b{ display:block; font-family: var(--titre); font-weight:800; font-size:1.2rem; line-height:1.05; margin-bottom:3px; }
  .notif-corps p{ margin:0; color: var(--brume); font-size:0.84rem; line-height:1.45; }
  .notif-corps p strong{ color:#fff; font-weight:600; }
  .notif-actions{ display:flex; gap:8px; flex-wrap:wrap; }
  .notif-carte.actif{ background: rgba(34,160,107,0.1); border-color: rgba(34,160,107,0.35); }
  .notif-carte.actif .notif-icone-grande{ background: var(--c-peucommun); color:#fff; }
  @media (max-width: 760px){
    .notif-carte, .notif-banniere{ flex-wrap:wrap; padding:12px 14px; }
    .notif-actions{ width:100%; }
    .tab{ font-size:0.62rem; }
  }


  /* ---------- Bouton Règles, en haut à côté du titre ---------- */
  .regles-btn{
    width:32px; height:32px; border-radius:9px; flex-shrink:0;
    border:none; background: rgba(169,188,212,0.12); color: var(--brume);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    margin-right:6px;
  }
  .regles-btn svg{ width:17px; height:17px; }
  .regles-btn:hover{ background: rgba(169,188,212,0.22); color:#fff; }
  .regles-btn.actif{ background: var(--c-legendaire); color: var(--encre); }
  .regles-btn:focus-visible{ outline:2px solid var(--c-legendaire); outline-offset:2px; }
  .sidebar-top{ gap:6px; }
  .sidebar .brand{ padding-bottom:0; }
  .tabs-row{ margin-top:16px; }
  #boucliersToutToggle[hidden]{ display:none; }
  @media (max-width: 720px){
    .tabs-row{ margin-top:0; }
    .regles-btn{ width:30px; height:30px; margin-right:0; }
  }


  /* ---------- Tirer la page vers le bas pour rafraîchir ---------- */
  .tirer-rafraichir{
    position: fixed; left: 50%; top: 8px; z-index: 45;
    width: 38px; height: 38px; margin-left: -19px;
    border-radius: 50%;
    background: var(--nuit-2);
    border: 1px solid rgba(169,188,212,0.25);
    color: var(--brume);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transform: translate(-50%, 0);
    transition: opacity .15s;
    box-shadow: 0 8px 18px rgba(0,0,0,0.4);
  }
  .tirer-rafraichir.visible{ opacity: 1; }
  .tirer-rafraichir.pret{ color: var(--c-legendaire); border-color: var(--c-legendaire); }
  .tirer-rafraichir svg{ width: 18px; height: 18px; }
  .tirer-rafraichir.tourne{ animation: tourneRafraichir .8s linear infinite; }
  @keyframes tourneRafraichir{ to{ transform: translate(-50%, 30px) rotate(360deg); } }
  @media (prefers-reduced-motion: reduce){ .tirer-rafraichir.tourne{ animation: none; } }

  .leg-zoom{ color: var(--c-legendaire); }


  /* ---------- Classement ---------- */
  .classement{ width:100%; max-width:1200px; margin: 0 auto 22px; }
  .cl-tete{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
  .cl-tete h2{ font-family: var(--titre); font-weight:800; font-size:1.5rem; margin:0; flex:1; color:#fff; }
  .cl-modes{ display:flex; gap:8px; }
  .cl-podium{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; align-items:end; margin-bottom:10px; }
  .cl-podium:empty{ display:none; }
  .cl-marche{
    display:flex; flex-direction:column; align-items:center; gap:3px;
    background: var(--nuit-2); border:1px solid rgba(169,188,212,0.16);
    border-radius:14px; padding:14px 10px 12px; cursor:pointer;
    font-family: inherit; color:#fff; text-align:center;
  }
  .cl-marche:hover{ border-color: rgba(169,188,212,0.45); }
  .cl-marche.r1{ padding-top:22px; border-color: rgba(240,180,41,0.55); background: linear-gradient(180deg, rgba(240,180,41,0.14), var(--nuit-2) 70%); }
  .cl-marche.r2{ border-color: rgba(200,214,230,0.35); }
  .cl-marche.r3{ border-color: rgba(194,163,131,0.4); }
  .cl-marche.moi{ box-shadow: inset 0 0 0 1.5px var(--c-legendaire); }
  .cl-marche .cl-rang{ font-family: var(--titre); font-weight:900; font-size:1.6rem; line-height:1; color: var(--brume); }
  .cl-marche.r1 .cl-rang{ color: var(--c-legendaire); font-size:2rem; }
  .cl-marche .cl-pastille{ width:14px; height:14px; border-radius:5px; }
  .cl-marche .cl-pseudo{ font-weight:600; font-size:0.92rem; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cl-marche .cl-score{ font-family: var(--titre); font-weight:800; font-size:1.4rem; color: var(--c-legendaire); }
  .cl-marche.r1 .cl-score{ font-size:1.7rem; }
  .cl-score small{ font-family: var(--texte); font-size:0.62rem; font-weight:500; color: var(--brume); margin-left:3px; }
  .cl-detail{ font-size:0.74rem; color: var(--brume); }
  .cl-liste{ display:flex; flex-direction:column; gap:6px; }
  .cl-ligne{
    display:flex; align-items:center; gap:10px;
    background: var(--nuit-2); border:1px solid rgba(169,188,212,0.12);
    border-radius:10px; padding:8px 12px; cursor:pointer;
    font-family: inherit; color:#fff; text-align:left; font-size:0.88rem;
  }
  .cl-ligne:hover{ border-color: rgba(169,188,212,0.4); }
  .cl-ligne.moi{ border-color: rgba(240,180,41,0.5); background: rgba(240,180,41,0.07); }
  .cl-ligne .cl-rang{ width:26px; color: var(--brume); font-variant-numeric: tabular-nums; }
  .cl-ligne .cl-pastille{ width:11px; height:11px; border-radius:4px; flex-shrink:0; }
  .cl-ligne .cl-pseudo{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cl-mini{ display:flex; align-items:center; gap:4px; color: var(--brume); font-size:0.78rem; }
  .cl-mini .cl-etoile{ color: var(--c-legendaire); font-style:normal; }
  .cl-mini .cl-rond{ width:8px; height:8px; border-radius:50%; background: var(--c-rare); display:inline-block; }
  .cl-ligne .cl-detail{ width:46px; text-align:right; }
  .cl-ligne .cl-score{ font-family: var(--titre); font-weight:800; font-size:1.05rem; color: var(--c-legendaire); width:74px; text-align:right; }
  .cl-plus{
    margin-top:8px; width:100%;
    background:none; border:1px dashed rgba(169,188,212,0.3); border-radius:10px;
    color: var(--brume); font-family: inherit; font-size:0.82rem; padding:8px; cursor:pointer;
  }
  .cl-plus:hover{ color:#fff; border-color: rgba(169,188,212,0.55); }
  .cl-plus[hidden]{ display:none; }
  @media (max-width: 760px){
    .cl-podium{ gap:6px; }
    .cl-marche{ padding:10px 6px 9px; }
    .cl-marche.r1{ padding-top:14px; }
    .cl-marche .cl-pseudo{ font-size:0.78rem; }
    .cl-marche .cl-score{ font-size:1.15rem; }
    .cl-marche.r1 .cl-score{ font-size:1.35rem; }
    .cl-ligne{ font-size:0.82rem; gap:8px; padding:7px 10px; }
    .cl-mini{ display:none; }
  }


  /* ---------- Choix de l'engagement ---------- */
  .intensite-bloc{ width:100%; max-width:860px; margin-bottom:14px; }
  .intensite-bloc h2{ font-family: var(--titre); font-weight:800; font-size:1.2rem; margin:0 0 8px; color:#fff; }
  .intensites{ display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; }
  .intensite{
    display:flex; flex-direction:column; align-items:center; gap:2px;
    background: var(--nuit-2); border:1.5px solid rgba(169,188,212,0.16);
    border-radius:12px; padding:10px 8px 9px; cursor:pointer;
    font-family: inherit; color: var(--brume);
  }
  .intensite:hover{ border-color: rgba(169,188,212,0.45); }
  .intensite.actif{ border-color: var(--c-legendaire); background: rgba(240,180,41,0.1); color:#fff; }
  .int-label{ font-weight:600; font-size:0.88rem; }
  .int-chances{ font-family: var(--titre); font-weight:800; font-size:1.5rem; line-height:1.05; color:#fff; }
  .intensite.actif .int-chances{ color: var(--c-legendaire); }
  .int-cout{ font-size:0.72rem; }
  .int-aide{ grid-column: 1 / -1; margin:6px 0 0; font-size:0.78rem; color: var(--brume); }
  .cible-attaquer i{ font-style:normal; font-family: var(--texte); font-size:0.7rem; font-weight:600; opacity:0.85; }
  @media (max-width: 760px){
    .intensites{ gap:6px; }
    .intensite{ padding:8px 4px; }
    .int-label{ font-size:0.76rem; }
    .int-chances{ font-size:1.2rem; }
    .int-cout{ font-size:0.64rem; }
  }


  /* ---------- Objectifs ---------- */
  .objectifs{ width:100%; max-width:860px; margin: 26px 0 0; }
  .objectifs[hidden]{ display:none; }
  .obj-tete{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
  .obj-tete h2{ font-family: var(--titre); font-weight:800; font-size:1.5rem; margin:0; color:#fff; }
  .obj-pret{
    background: var(--c-legendaire); color: var(--encre);
    font-size:0.76rem; font-weight:600; padding:3px 10px; border-radius:999px;
  }
  .obj-pret[hidden]{ display:none; }
  .obj-groupe h3{
    font-family: var(--texte); font-weight:600; font-size:0.8rem;
    color: var(--brume); margin: 14px 0 8px; text-transform:none;
  }
  .obj{
    display:flex; align-items:center; gap:14px;
    background: var(--nuit-2); border:1px solid rgba(169,188,212,0.14);
    border-radius:12px; padding:11px 14px; margin-bottom:8px;
  }
  .obj.pret{ border-color: rgba(240,180,41,0.5); background: rgba(240,180,41,0.08); }
  .obj.fait{ opacity:0.55; }
  .obj-texte{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
  .obj-texte b{ font-size:0.95rem; font-weight:600; }
  .obj-texte > span{ font-size:0.78rem; color: var(--brume); }
  .obj-barre{ height:5px; border-radius:3px; background: rgba(169,188,212,0.18); overflow:hidden; margin-top:3px; }
  .obj-barre i{ display:block; height:100%; background: var(--c-legendaire); border-radius:3px; }
  .obj.fait .obj-barre i{ background: var(--c-peucommun); }
  .obj-droite{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
  .obj-chiffres{ font-size:0.8rem; color: var(--brume); font-variant-numeric: tabular-nums; white-space:nowrap; }
  .obj-gain{ font-family: var(--titre); font-weight:800; font-size:1.05rem; white-space:nowrap; }
  .obj-gain.points{ color: var(--c-legendaire); }
  .obj-gain.paquet{ color:#8DB8FF; }
  .obj-btn{
    font-family: var(--titre); font-weight:800; font-size:0.95rem;
    background: var(--c-legendaire); color: var(--encre);
    border:none; border-radius:9px; padding:6px 12px 7px; cursor:pointer;
    box-shadow: 0 3px 0 #B7791F;
  }
  .obj-btn:active:not(:disabled){ transform: translateY(2px); box-shadow: 0 1px 0 #B7791F; }
  .obj-btn:disabled{ opacity:0.5; cursor:default; }
  .obj-fait{ font-size:0.76rem; color: var(--c-peucommun); font-weight:600; white-space:nowrap; }
  @media (max-width: 760px){
    .obj{ flex-wrap:wrap; gap:8px 12px; padding:10px 12px; }
    .obj-droite{ width:100%; justify-content:space-between; }
    .obj-texte b{ font-size:0.88rem; }
  }


  /* ---------- Classement repliable ---------- */
  .classement[hidden]{ display:none; }
  .cl-replier{
    width:30px; height:30px; border-radius:9px; flex-shrink:0;
    border:none; background: rgba(169,188,212,0.12); color: var(--brume);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    order:3;
  }
  .cl-replier:hover{ background: rgba(169,188,212,0.24); color:#fff; }
  .cl-replier svg{ width:15px; height:15px; transition: transform .15s; }
  .classement.replie .cl-replier svg{ transform: rotate(180deg); }
  .cl-replier:focus-visible{ outline:2px solid var(--c-legendaire); outline-offset:2px; }
  .classement.replie{ margin-bottom:14px; }
  .classement.replie .cl-modes{ display:none; }
  .classement.replie .cl-tete{ margin-bottom:8px; }


  /* ---------- Journal d'activité ---------- */
  .journal{ width:100%; max-width:1200px; margin: 26px auto 0; }
  .journal[hidden]{ display:none; }
  .jr-tete{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
  .jr-tete h2{ font-family: var(--titre); font-weight:800; font-size:1.5rem; margin:0; flex:1; color:#fff; }
  .jr-modes{ display:flex; gap:8px; }
  .jr-liste{ display:flex; flex-direction:column; gap:6px; }
  .jr-ligne{
    display:flex; align-items:center; gap:12px;
    background: var(--nuit-2); border:1px solid rgba(169,188,212,0.12);
    border-left:3px solid rgba(169,188,212,0.25);
    border-radius:10px; padding:9px 13px;
    font-size:0.88rem; color: var(--brume);
  }
  .jr-ligne b{ color:#fff; font-weight:600; }
  .jr-ligne.conquete{ border-left-color: var(--c-rouge); }
  .jr-ligne.defense{ border-left-color: var(--c-peucommun); }
  .jr-ligne.achat{ border-left-color: var(--c-rare); }
  .jr-ligne.tirage{ border-left-color: var(--c-legendaire); }
  .jr-ligne.moi{ background: rgba(240,180,41,0.07); }
  .jr-ligne.perdu{ background: rgba(229,72,77,0.08); }
  .jr-icone{
    width:28px; height:28px; border-radius:8px; flex-shrink:0;
    background: rgba(169,188,212,0.12);
    display:flex; align-items:center; justify-content:center;
  }
  .jr-icone svg{ width:15px; height:15px; }
  .jr-ligne.conquete .jr-icone{ color:#FF8F92; background: rgba(229,72,77,0.15); }
  .jr-ligne.defense .jr-icone{ color:#5EE0A8; background: rgba(34,160,107,0.15); }
  .jr-ligne.achat .jr-icone{ color:#8DB8FF; background: rgba(47,124,246,0.15); }
  .jr-ligne.tirage .jr-icone{ color: var(--c-legendaire); background: rgba(240,180,41,0.15); }
  .jr-texte{ flex:1; min-width:0; line-height:1.4; }
  .jr-commune.legendaire{ color: var(--c-legendaire); }
  .jr-commune.rare{ color:#8DB8FF; }
  .jr-date{ font-size:0.76rem; white-space:nowrap; flex-shrink:0; opacity:0.8; }
  @media (max-width: 760px){
    .jr-ligne{ flex-wrap:wrap; gap:8px 10px; font-size:0.82rem; padding:8px 11px; }
    .jr-date{ width:100%; padding-left:40px; }
  }


  /* =====================================================================
     NAVIGATION TELEPHONE : barre en bas + menu "Plus"
     ===================================================================== */
  .tab-plus{ display:none; }
  .points{ display:flex; gap:3px; }
  .points i{ width:4px; height:4px; border-radius:50%; background:currentColor; display:block; }
  .voile-menu{
    position:fixed; inset:0; z-index:58;
    background: rgba(5,12,24,0.72);
    opacity:0; transition: opacity .2s;
  }
  .voile-menu.ouvert{ opacity:1; }
  .voile-menu[hidden]{ display:none; }
  .feuille-plus{
    position:fixed; left:0; right:0; bottom:0; z-index:59;
    background: var(--nuit-2);
    border-top:1px solid rgba(169,188,212,0.2);
    border-radius:18px 18px 0 0;
    padding:10px 10px calc(14px + env(safe-area-inset-bottom));
    transform: translateY(102%);
    transition: transform .22s cubic-bezier(.2,.8,.3,1);
  }
  .feuille-plus.ouvert{ transform:none; }
  .feuille-plus[hidden]{ display:none; }
  .feuille-poignee{ width:38px; height:4px; border-radius:2px; background:rgba(169,188,212,0.3); margin:2px auto 10px; }
  .fp-item{
    display:flex; align-items:center; gap:13px; width:100%;
    padding:12px; border:none; background:none; border-radius:10px;
    color:#fff; font-family:inherit; font-size:0.95rem; text-align:left; cursor:pointer;
  }
  .fp-item:hover{ background: rgba(169,188,212,0.1); }
  .fp-item svg{ width:20px; height:20px; color: var(--brume); flex-shrink:0; }
  .fp-item.sortie, .fp-item.sortie svg{ color:#FF8F92; }
  .fp-badge{
    margin-left:auto; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
    background: var(--c-rouge); color:#fff; font-size:0.68rem; font-weight:600;
    display:flex; align-items:center; justify-content:center;
  }
  .fp-sep{ height:1px; background: rgba(169,188,212,0.14); margin:6px 10px; }

  @media (max-width: 720px){
    .app-shell{ padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
    .sidebar{
      position: fixed; left:0; right:0; bottom:0; top:auto; z-index:40;
      width:100%; padding:0;
      background: rgba(10,22,40,0.97);
      -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
      border-bottom:none; border-top:1px solid rgba(169,188,212,0.16);
      flex-direction:column;
    }
    .sidebar-top{ display:none; }
    .tabs-row{
      display:grid; grid-template-columns: repeat(5, 1fr);
      padding:6px 4px calc(8px + env(safe-area-inset-bottom));
      gap:0;
    }
    /* les onglets qui passent dans le menu "Plus" */
    .tab[data-tab="territoire"], .tab[data-tab="bourse"]{ display:none; }
    .tab-plus{ display:flex; }
    .tab{
      flex-direction:column; align-items:center; justify-content:flex-start; gap:4px;
      padding:7px 2px 5px; border:none; border-radius:0;
      font-size:0.64rem; color: var(--brume); background:none;
      position:relative; font-family:inherit;
    }
    .tab .icon{ width:22px; height:22px; }
    .tab .icon svg{ width:22px; height:22px; }
    /* l'icone "Plus" occupe la meme hauteur que les autres */
    .tab-plus .icon{ display:flex; align-items:center; justify-content:center; }
    .tab.active{ color: var(--c-legendaire); background:none; border:none; }
    .tab.active .icon{ color: var(--c-legendaire); }
    .tab.actif{ color: var(--c-legendaire); }
    .tab.active::before{ display:none; }
    .tab-badge{
      position:absolute; top:2px; left:calc(50% + 6px);
      min-width:16px; height:16px; padding:0 4px; font-size:0.6rem;
      margin:0;
    }

    /* le titre et les boutons du haut reviennent dans la page */
    .content{ padding-top:14px; }
    .entete-mobile{
      display:flex; align-items:center; gap:8px;
      width:100%; margin-bottom:14px;
    }
    .entete-mobile .brand{
      font-family: var(--titre); font-weight:900; font-size:1.4rem; line-height:1;
      color:#fff; flex:1;
    }
    .entete-mobile .brand span{ color: var(--c-legendaire); }
  }
  @media (min-width: 721px){
    .feuille-plus, .voile-menu{ display:none !important; }
  }

  .entete-mobile{ display:none; }
  @media (max-width: 720px){ .entete-mobile{ display:flex; } }


  /* ---------- Mot d'accueil ---------- */
  .voile-accueil{
    position:fixed; inset:0; z-index:70;
    background: rgba(5,12,24,0.8);
    display:flex; align-items:center; justify-content:center; padding:16px;
    opacity:0; transition: opacity .2s;
  }
  .voile-accueil.ouvert{ opacity:1; }
  .voile-accueil[hidden]{ display:none; }
  .accueil{
    position:relative; width:min(460px, 100%); max-height:92vh; overflow:auto;
    background: var(--nuit-2);
    border:1px solid rgba(169,188,212,0.22);
    border-radius:20px; padding:26px 24px 20px;
    box-shadow:0 30px 60px rgba(0,0,0,0.55);
    transform: scale(.94); transition: transform .22s cubic-bezier(.2,.8,.3,1.2);
  }
  .voile-accueil.ouvert .accueil{ transform:none; }
  .acc-eclat{
    position:absolute; left:50%; top:-140px; width:420px; height:420px; margin-left:-210px;
    background: radial-gradient(circle, rgba(240,180,41,0.22), transparent 65%);
    pointer-events:none;
  }
  .acc-marque{ position:relative; font-family: var(--titre); font-weight:900; font-size:2.6rem; line-height:.9; margin:0 0 6px; text-align:center; }
  .acc-marque span{ color: var(--c-legendaire); }
  .acc-accroche{ position:relative; text-align:center; color: var(--brume); font-size:0.95rem; line-height:1.5; margin:0 0 20px; }
  .acc-etapes{ position:relative; display:flex; flex-direction:column; gap:12px; margin-bottom:20px; }
  .acc-etape{ display:flex; gap:13px; align-items:flex-start; }
  .acc-num{
    width:30px; height:30px; border-radius:10px; flex-shrink:0;
    background:#fff; color: var(--encre);
    font-family: var(--texte); font-weight:700; font-size:1rem;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 0 1px rgba(240,180,41,0.5);
  }
  .acc-etape b{ display:block; font-size:0.98rem; margin-bottom:2px; }
  .acc-etape span:not(.acc-num){ color: var(--brume); font-size:0.85rem; line-height:1.45; }
  .acc-cadeau{
    position:relative; display:flex; align-items:center; gap:11px;
    background: rgba(240,180,41,0.1); border:1px solid rgba(240,180,41,0.3);
    border-radius:12px; padding:11px 13px; margin-bottom:18px; font-size:0.87rem;
  }
  .acc-cadeau svg{ width:20px; height:20px; color: var(--c-legendaire); flex-shrink:0; }
  .acc-cadeau b{ color: var(--c-legendaire); }
  .acc-go{
    position:relative; width:100%;
    font-family: var(--titre); font-weight:800; font-size:1.35rem; letter-spacing:.02em;
    background: var(--c-legendaire); color: var(--encre);
    border:none; border-radius:13px; padding:13px;
    box-shadow:0 5px 0 #B7791F; cursor:pointer;
  }
  .acc-go:active{ transform: translateY(4px); box-shadow:0 1px 0 #B7791F; }
  .acc-go:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
  .acc-liens{ position:relative; display:flex; justify-content:center; gap:16px; margin-top:12px; }
  .acc-liens button{
    background:none; border:none; color: var(--brume);
    font-family:inherit; font-size:0.82rem; text-decoration:underline; cursor:pointer; padding:4px;
  }
  .acc-liens button:hover{ color:#fff; }
  @media (prefers-reduced-motion: reduce){
    .voile-accueil, .accueil{ transition:none; }
  }