/* =========================================================================
   Accueil public — présentation de BolTraap.
   Les jetons et la remise à zéro viennent de base.css.
   ========================================================================= */

/* ---------- Rôles typographiques ----------------------------------------
   Sans police distante, le contraste ne peut plus venir de deux familles :
   il vient du poids et de l'approche. Le titrage prend la grotesque du
   système au maximum de sa graisse, très resserrée ; la monospace du
   système tient le rôle des données et des étiquettes.  */
.display{
  font-family:var(--texte);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.04;
}
.mono{
  font-family:var(--chiffres);
  font-variant-ligatures:none;
}

.eyebrow{
  font-family:var(--chiffres);
  font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acier);
  display:flex;align-items:center;gap:9px;
}
/* Le plateau du logotype, réduit en marqueur de section. */
.eyebrow::before{
  content:"";flex:none;
  width:9px;height:6px;border-radius:50%;
  background:var(--plateau);transform:rotate(-15deg);
}

.wrap{width:100%;max-width:1040px;margin:0 auto;padding:0 24px}

/* ---------- En-tête ------------------------------------------------------ */
.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(250,250,247,.86);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:.5px solid var(--ligne);
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:14px;padding-bottom:14px;
}
.site-header img{height:30px;width:auto;display:block}

/* ---------- Boutons ------------------------------------------------------ */
.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--tap-lg);padding:0 26px;border-radius:14px;
  background:var(--plateau);color:#fff;text-decoration:none;
  font-size:17px;font-weight:500;letter-spacing:-.2px;
  border:.5px solid var(--plateau);
  transition:background .15s ease,transform .15s ease;
}
.cta:hover{background:#E56000}
.cta:active{transform:translateY(1px)}
.cta-sm{min-height:var(--tap);padding:0 18px;font-size:15px;border-radius:12px}
.cta .arrow{font-size:15px;line-height:1}

/* ---------- Héros -------------------------------------------------------- */
.hero .wrap{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);
  gap:64px;align-items:center;
  padding-top:84px;padding-bottom:84px;
}
/* Les éléments de grille ont un minimum automatique : sans min-width,
   la carte impose sa largeur de contenu et fait déborder la page. */
.hero .wrap>*{min-width:0}
.hero h1{
  font-size:clamp(36px,4vw,48px);
  margin:22px 0 0;
}
/* La seconde phrase passe toujours à la ligne : la coupe tombe ainsi sur
   la ponctuation, jamais au milieu d'une proposition. */
.hero h1 em{font-style:normal;color:var(--plateau);display:block}
.hero .lead{
  font-size:18px;color:var(--acier);
  max-width:44ch;margin:20px 0 0;
}
.hero-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:34px}
.hero-note{font-size:13px;color:var(--acier);max-width:20ch}

/* ---------- Signature : la carte de score ------------------------------- */
.carte{
  margin:0;padding:20px;max-width:100%;
  background:var(--surface);
  border:.5px solid var(--ligne);border-radius:20px;
  box-shadow:0 30px 70px -40px rgba(20,20,20,.45);
}
.carte-tete{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:16px;border-bottom:.5px solid var(--ligne);
}
.carte-tete .poste{font-size:19px;font-weight:700}
.carte-tete .lieu{font-size:12px;color:var(--acier);text-align:right}

.grille{
  display:grid;grid-template-columns:minmax(52px,auto) repeat(5,minmax(0,1fr));
  gap:7px;align-items:center;margin-top:16px;
}
.grille .col{
  font-size:11px;color:var(--acier);text-align:center;
  animation:monte .45s ease backwards;
}
.grille .qui{
  font-size:14px;font-weight:500;letter-spacing:-.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  animation:monte .45s ease backwards;
}
/* Reprise exacte du code couleur de l'application. */
.case{
  display:flex;align-items:center;justify-content:center;
  height:38px;border-radius:10px;
  font-size:12px;font-weight:500;
  border:.5px solid var(--ligne);background:var(--surface);color:var(--acier);
  animation:monte .45s ease backwards;
  animation-delay:calc(var(--i) * 70ms + 260ms);
}
.case.t{background:var(--plateau);border-color:var(--plateau);color:#fff}
.case.l{color:var(--encre)}
.case.nt{border-style:dashed}

.carte-pied{
  display:flex;align-items:baseline;gap:12px;
  margin-top:20px;padding-top:16px;border-top:.5px solid var(--ligne);
  animation:monte .5s ease backwards;animation-delay:1.36s;
}
.carte-pied .taux{font-size:34px;color:var(--plateau)}
.carte-pied .detail{font-size:12px;color:var(--acier)}

@keyframes monte{from{opacity:0;transform:translateY(7px)}}

/* ---------- Sections ----------------------------------------------------- */
.section{border-top:.5px solid var(--ligne)}
.section .wrap{padding-top:76px;padding-bottom:76px}
.section h2{
  font-size:clamp(25px,2.7vw,31px);margin:18px 0 0;max-width:26ch;
}

/* Déroulé d'une session : le temps porte l'information, pas un numéro. */
.temps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:52px}
.temps .quand{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--plateau);padding-bottom:12px;border-bottom:1.5px solid var(--plateau);
}
.temps h3{font-size:19px;font-weight:500;letter-spacing:-.3px;margin:18px 0 0}
.temps p{font-size:15px;color:var(--acier);margin:9px 0 0}
.temps .codes{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.temps .code{
  font-size:11px;padding:5px 9px;border-radius:8px;
  border:.5px solid var(--ligne);color:var(--acier);background:var(--surface);
}
.temps .code.t{background:var(--plateau);border-color:var(--plateau);color:#fff}

/* Bon à savoir : une liste de faits, réglures comme seul décor. */
.notes{margin-top:44px;border-top:.5px solid var(--ligne)}
.note{
  display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);
  gap:28px;padding:22px 0;border-bottom:.5px solid var(--ligne);
}
.note dt{font-size:13px;color:var(--acier);letter-spacing:.04em}
.note dd{margin:0;font-size:16px;max-width:62ch}
.note dd .nuance{display:block;color:var(--acier);font-size:14px;margin-top:6px}

/* ---------- Pied de page ------------------------------------------------- */
.site-footer{border-top:.5px solid var(--ligne);background:var(--surface)}
.site-footer .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-top:40px;padding-bottom:40px;
}
.site-footer img{height:26px;width:auto;display:block}
.site-footer .dit{font-size:13px;color:var(--acier);margin:10px 0 0}

/* ---------- Adaptations -------------------------------------------------- */
@media (max-width:900px){
  .hero .wrap{grid-template-columns:minmax(0,1fr);gap:48px;padding-top:56px;padding-bottom:56px}
  .hero h1{max-width:16ch}
  .carte{max-width:460px}
  .temps{grid-template-columns:minmax(0,1fr);gap:36px;margin-top:40px}
  .section .wrap{padding-top:56px;padding-bottom:56px}
}
@media (max-width:560px){
  .wrap{padding:0 20px}
  .site-header .wrap{gap:10px}
  .site-header img{height:26px}
  .hero h1{max-width:none}
  .hero-actions{gap:14px}
  .hero-actions .cta{width:100%}
  .hero-note{max-width:none}
  .carte{padding:16px}
  .grille{grid-template-columns:minmax(44px,auto) repeat(5,minmax(0,1fr));gap:5px}
  .case{height:34px;font-size:11px}
  .note{grid-template-columns:minmax(0,1fr);gap:6px;padding:18px 0}
}