/* ==========================================================================
   Belote & Re — feuille de style des pages de contenu
   Palette reprise de l'icône et de l'interface de l'application.
   ========================================================================== */

:root{
  --vert:#18b57e;          /* vert de l'icône : rgb(24,181,126) */
  --vert-clair:#e8f7f1;
  --vert-fonce:#0b6b4a;
  --vert-nuit:#063a2a;
  --rouge:#e23531;         /* rouge du logo B&R */
  --rouge-clair:#fdeceb;
  --bleu:#1877d2;          /* bleu équipe 1 dans l'app */
  --bleu-clair:#e8f1fb;
  --creme:#fbfaf6;
  --encre:#14181b;
  --gris:#5c6670;
  --gris-clair:#8b949c;
  --bord:#e4e7e4;
  --ombre:0 1px 2px rgba(6,58,42,.05), 0 8px 24px rgba(6,58,42,.06);
  --ombre-forte:0 2px 4px rgba(6,58,42,.06), 0 16px 44px rgba(6,58,42,.12);
  --radius:14px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:76px}

body{
  margin:0;
  background:var(--creme);
  color:var(--encre);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17.5px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:780px;margin:0 auto;padding:0 22px}
a{color:var(--vert-fonce);text-underline-offset:2px}
a:hover{color:var(--vert)}

/* ---------- Barre supérieure ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(251,250,246,.88);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--bord);
}
.topbar .wrap{display:flex;align-items:center;gap:12px;height:60px}
.topbar .marque{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--encre);font-weight:700;letter-spacing:-.01em}
.topbar .marque img{width:32px;height:32px;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.topbar .marque span small{display:block;font-weight:500;font-size:.7rem;color:var(--gris-clair);letter-spacing:.02em;line-height:1.1}
.topbar .espace{flex:1}
.btn-mini{
  display:inline-block;background:var(--vert);color:#fff;text-decoration:none;
  padding:8px 16px;border-radius:999px;font-weight:600;font-size:.85rem;white-space:nowrap;
  box-shadow:0 2px 8px rgba(24,181,126,.35);
}
.btn-mini:hover{background:var(--vert-fonce);color:#fff}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(155deg,#12a271 0%,var(--vert-fonce) 55%,var(--vert-nuit) 100%);
}
.hero::after{ /* enseignes de cartes en filigrane */
  content:"♠ ♥ ♦ ♣ ♥ ♠ ♣ ♦ ♠ ♥ ♦ ♣";
  position:absolute;inset:-10% -5% auto auto;
  font-size:8rem;line-height:1.6;letter-spacing:1.5rem;
  color:#fff;opacity:.045;transform:rotate(-12deg);
  pointer-events:none;user-select:none;white-space:normal;width:60%;
}
.hero .wrap{position:relative;z-index:1;padding-top:44px;padding-bottom:44px}
.fil{font-size:.8rem;opacity:.72;margin:0 0 18px;letter-spacing:.02em}
.fil a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.fil a:hover{color:#fff;border-bottom-color:#fff}
.hero-tete{display:flex;align-items:center;gap:18px;margin-bottom:16px}
.hero-tete img{
  width:74px;height:74px;border-radius:17px;flex:none;
  box-shadow:0 6px 22px rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.18);
}
.hero h1{margin:0;font-size:2.15rem;line-height:1.15;letter-spacing:-.022em}
.hero .chapo{margin:0;font-size:1.08rem;opacity:.93;max-width:44rem}
.hero .infos{margin:20px 0 0;font-size:.82rem;opacity:.72;display:flex;gap:16px;flex-wrap:wrap}

/* ---------- Contenu ---------- */
main{padding:38px 0 10px}
h2{
  margin:48px 0 14px;font-size:1.5rem;line-height:1.24;letter-spacing:-.018em;
  padding-bottom:10px;border-bottom:2px solid var(--bord);
}
h2 .puce{color:var(--vert);font-weight:400;margin-right:.4rem}
h3{margin:30px 0 8px;font-size:1.13rem;letter-spacing:-.01em}
p{margin:0 0 15px}
ul,ol{margin:0 0 18px;padding-left:24px}
li{margin-bottom:7px}
li::marker{color:var(--vert-fonce)}
strong{font-weight:650}

/* ---------- Sommaire ---------- */
.sommaire{
  background:#fff;border:1px solid var(--bord);border-radius:var(--radius);
  padding:20px 24px 12px;margin:0 0 34px;box-shadow:var(--ombre);
}
.sommaire p.titre{font-weight:700;margin:0 0 10px;font-size:.82rem;text-transform:uppercase;letter-spacing:.07em;color:var(--gris)}
.sommaire ol{margin-bottom:10px;padding-left:20px}
.sommaire li{margin-bottom:5px}
.sommaire a{text-decoration:none;border-bottom:1px solid transparent}
.sommaire a:hover{border-bottom-color:var(--vert)}

/* ---------- Tableaux ---------- */
.tableau{overflow-x:auto;margin:0 0 24px;border-radius:12px;box-shadow:var(--ombre)}
table{width:100%;border-collapse:collapse;background:#fff;font-size:.97rem;min-width:340px}
thead th{
  background:var(--vert-nuit);color:#fff;font-weight:600;font-size:.86rem;
  letter-spacing:.02em;padding:11px 14px;text-align:left;
}
tbody td{padding:10px 14px;border-bottom:1px solid var(--bord)}
tbody tr:nth-child(even) td{background:#fafaf7}
tbody tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
tr.total td{background:var(--vert-clair) !important;font-weight:700}
td.fort{font-weight:700;color:var(--vert-fonce)}

/* ---------- Encarts ---------- */
.encart{
  position:relative;background:#fff;border:1px solid var(--bord);border-left:4px solid var(--vert);
  border-radius:12px;padding:17px 20px 17px 22px;margin:0 0 26px;box-shadow:var(--ombre);
}
.encart p:last-child{margin-bottom:0}
.encart .etiq{
  display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;color:var(--vert-fonce);margin-bottom:5px;
}
.encart.alerte{border-left-color:var(--rouge)}
.encart.alerte .etiq{color:var(--rouge)}
.encart.bleu{border-left-color:var(--bleu)}
.encart.bleu .etiq{color:var(--bleu)}

/* ---------- Exemples chiffrés ---------- */
.exemple{
  background:#fff;border:1px solid var(--bord);border-radius:var(--radius);
  padding:22px 24px 8px;margin:0 0 26px;box-shadow:var(--ombre);
}
.exemple > h3:first-child{margin-top:0;color:var(--vert-fonce)}
.exemple .tableau{box-shadow:none;border:1px solid var(--bord)}
.exemple table{font-size:.93rem}
.exemple thead th{background:#f0f2ef;color:var(--encre)}

/* ---------- Bloc d'appel ---------- */
.cta{
  position:relative;overflow:hidden;
  background:
    linear-gradient(135deg, rgba(4,44,32,.86) 0%, rgba(8,80,58,.68) 42%, rgba(4,44,32,.88) 100%),
    url("img/fond-cta.jpg") center/cover no-repeat;
  background-color:var(--vert-nuit);
  color:#fff;border-radius:18px;padding:32px 28px;margin:42px 0;
  box-shadow:var(--ombre-forte);
  text-shadow:0 1px 3px rgba(0,0,0,.35);
}
.cta-corps{position:relative;z-index:1;display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.cta img{width:66px;height:66px;border-radius:15px;flex:none;box-shadow:0 5px 18px rgba(0,0,0,.3)}
.cta-texte{flex:1;min-width:240px}
.cta h3{margin:0 0 8px;font-size:1.22rem;color:#fff;letter-spacing:-.015em}
.cta p{margin:0 0 18px;opacity:.92;font-size:.97rem}
.btn{
  display:inline-block;background:#fff;color:var(--vert-nuit);text-decoration:none;
  padding:13px 26px;border-radius:999px;font-weight:700;font-size:1rem;
  box-shadow:0 4px 16px rgba(0,0,0,.3);text-shadow:none;
}
.btn:hover{background:#f2fbf7;color:var(--vert-nuit)}
.cta .mention{display:block;margin-top:12px;font-size:.8rem;opacity:.85}

/* ---------- Boutons d'impression ---------- */
.barre-impression{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:0 0 28px}
.btn-plein{
  display:inline-flex;align-items:center;gap:9px;background:var(--vert);color:#fff;border:none;cursor:pointer;
  padding:14px 26px;border-radius:999px;font-weight:700;font-size:1rem;font-family:inherit;
  box-shadow:0 4px 14px rgba(24,181,126,.34);text-decoration:none;
}
.btn-plein:hover{background:var(--vert-fonce);color:#fff}
.btn-vide{
  display:inline-flex;align-items:center;background:#fff;color:var(--vert-fonce);
  border:1px solid var(--vert);padding:13px 24px;border-radius:999px;font-weight:650;
  text-decoration:none;font-size:1rem;
}
.btn-vide:hover{background:var(--vert-clair);color:var(--vert-fonce)}

/* ---------- Bandeaux visibles à l'impression seulement ---------- */
.print-tete,.print-pied{display:none}

/* ---------- Navigation entre pages ---------- */
.suite{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px}
.suite a{
  display:block;background:#fff;border:1px solid var(--bord);border-radius:12px;
  padding:15px 18px;text-decoration:none;color:var(--encre);box-shadow:var(--ombre);
  transition:border-color .15s ease, transform .15s ease;
}
.suite a:hover{border-color:var(--vert);transform:translateY(-1px);color:var(--encre)}
.suite .fleche{color:var(--vert);font-weight:700;margin-right:.4rem}
.suite small{display:block;color:var(--gris);font-size:.86rem;margin-top:2px}

/* ---------- Pied de page ---------- */
footer{background:var(--vert-nuit);color:rgba(255,255,255,.8);margin-top:56px;padding:34px 0}
footer .wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
footer img{width:44px;height:44px;border-radius:10px;flex:none}
footer .txt{flex:1;min-width:220px;font-size:.88rem;line-height:1.55}
footer strong{color:#fff;display:block;font-size:.98rem;margin-bottom:2px}
footer a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
footer a:hover{color:#fff;border-bottom-color:#fff}

/* ==========================================================================
   Impression des pages de contenu (body.article)
   La feuille de score a ses propres règles, dans sa page.
   ========================================================================== */
@media print{
  body.article{background:#fff;font-size:10.5pt;line-height:1.5}

  body.article .topbar,
  body.article .hero,
  body.article .sommaire,
  body.article .cta,
  body.article .suite,
  body.article .barre-impression,
  body.article .sans-impression,
  body.article > footer{display:none !important}

  body.article .print-tete,
  body.article .print-pied{display:flex !important}

  body.article main{padding:0}
  body.article .wrap{max-width:none;padding:0}

  body.article h2{
    font-size:1.16rem;margin:18px 0 8px;padding-bottom:6px;
    border-bottom:1.5px solid var(--vert);
    break-after:avoid;page-break-after:avoid;
  }
  body.article h3{margin:14px 0 5px;font-size:1rem;break-after:avoid;page-break-after:avoid}
  body.article p,body.article li{orphans:3;widows:3}
  body.article ul,body.article ol{margin-bottom:12px}

  body.article .tableau,
  body.article .exemple,
  body.article .encart{break-inside:avoid;page-break-inside:avoid;box-shadow:none}
  body.article .exemple{padding:14px 16px 4px}
  body.article .encart{padding:12px 14px}
  body.article table{font-size:.86rem}
  body.article thead th{padding:7px 10px}
  body.article tbody td{padding:6px 10px}

  body.article *{-webkit-print-color-adjust:exact;print-color-adjust:exact}

  .print-tete{
    align-items:center;gap:13px;
    border-bottom:2.5px solid var(--vert);padding-bottom:10px;margin-bottom:16px;
  }
  .print-tete img{width:44px;height:44px;border-radius:10px;flex:none}
  .print-tete .t{flex:1;min-width:150px}
  .print-tete .t b{display:block;font-size:1.2rem;line-height:1.18;letter-spacing:-.015em}
  .print-tete .t span{display:block;font-size:.72rem;color:#5c6670;margin-top:1px}

  .print-pied{
    align-items:center;gap:11px;
    border-top:1.5px solid var(--vert);padding-top:9px;margin-top:22px;
    break-inside:avoid;page-break-inside:avoid;
  }
  .print-pied img{width:30px;height:30px;border-radius:7px;flex:none}
  .print-pied .t{flex:1;min-width:190px;font-size:.7rem;line-height:1.4;color:#222}
  .print-pied .t b{font-size:.76rem}

  .print-tete .u,.print-pied .u{
    font-size:.72rem;font-weight:700;color:var(--vert-fonce);
    white-space:nowrap;text-align:right;
  }

  @page{size:A4 portrait;margin:14mm}
}

/* ---------- Adaptations mobiles ---------- */
@media(max-width:600px){
  body{font-size:16.5px}
  .hero h1{font-size:1.62rem}
  .hero-tete{gap:14px}
  .hero-tete img{width:58px;height:58px;border-radius:14px}
  .hero .wrap{padding-top:32px;padding-bottom:34px}
  h2{font-size:1.3rem;margin-top:38px}
  .cta{padding:24px 20px}
  .cta img{width:54px;height:54px}
  .topbar .marque span small{display:none}
}