/* Charte HYLA (skill hyladesign) : corail unique #DE6640, anthracite #343434, Hyla Headline + Hyla Sans */
@font-face{font-family:"Hyla Sans";src:url(/fonts/Hyla-Sans-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Hyla Sans";src:url(/fonts/Hyla-Sans-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Hyla Headline";src:url(/fonts/Hyla-Headline-Regular.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --corail:#DE6640;
  --corail-hover:#D3613D;
  --corail-200:#EBA38C;
  --corail-50:#FAE8E2;
  --anthracite:#343434;
  --fond:#FFFEFD;
  --blanc:#FFFFFF;
  --gris-100:#F3F3F3;
  --gris-300:#C2C2C2;
  --gris-700:#5D5D5D;
  --succes:#69CD3A;
  --erreur:#E94B50;
  --ease:cubic-bezier(.15,.3,.2,.9);
  --headline:"Hyla Headline",Georgia,serif;
  --sans:"Hyla Sans",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--anthracite);background:var(--fond);line-height:1.55}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid #0000FF;box-shadow:0 0 0 4px #AAD4F8;outline-offset:2px}

/* ---------- Compteur public ---------- */
body.compteur{background:var(--anthracite);color:var(--fond);min-height:100svh;overflow-x:hidden}
.fond{position:fixed;inset:0;z-index:0;overflow:hidden}
.fond img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 30%);animation:kenburns 32s ease-in-out infinite alternate;transform-origin:60% 40%}
@keyframes kenburns{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.16) translate3d(-2%,-1.5%,0)}}
.voile{position:fixed;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(52,52,52,.72) 0%,rgba(52,52,52,.30) 30%,rgba(52,52,52,.55) 55%,rgba(52,52,52,.94) 82%,#343434 100%)}
.page{position:relative;z-index:2;max-width:620px;margin:0 auto;padding:20px 20px 32px;min-height:100svh;display:flex;flex-direction:column;gap:20px}
.entete{display:flex;align-items:center;justify-content:space-between;gap:16px}
.entete img{height:24px;width:auto}
.pastille{border:1px solid var(--corail);color:var(--fond);border-radius:100px;padding:6px 16px;font-size:14px;font-weight:700;letter-spacing:.28px;background:rgba(52,52,52,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

.titre-bloc{margin-top:8px}
.surtitre{font-size:16px;opacity:.85}
h1.equipe{font-family:var(--headline);font-weight:400;font-size:clamp(44px,12vw,72px);line-height:1.05;text-shadow:0 2px 24px rgba(52,52,52,.35)}

.verre{background:rgba(255,254,253,.10);border:1px solid rgba(255,254,253,.20);border-radius:12px;backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2)}
.score{padding:24px 20px 20px;text-align:center}
.score-ligne{display:flex;align-items:baseline;justify-content:center;gap:10px;flex-wrap:wrap}
.nombre{font-family:var(--headline);font-size:clamp(96px,30vw,168px);line-height:1;font-variant-numeric:tabular-nums;color:var(--blanc);transition:transform .35s var(--ease)}
.nombre.pop{animation:pop .7s var(--ease)}
@keyframes pop{0%{transform:scale(1)}30%{transform:scale(1.12);color:var(--corail-200)}100%{transform:scale(1)}}
.sur{font-family:var(--headline);font-size:clamp(32px,9vw,48px);color:var(--corail-200);line-height:1}
.sur small{font-family:var(--sans);font-size:18px;color:var(--fond);opacity:.85;margin-left:4px}
.legende{font-size:16px;opacity:.85;margin-top:4px}

.jauge{position:relative;height:16px;border-radius:100px;background:rgba(255,254,253,.18);margin:20px 0 8px;overflow:hidden}
.jauge-rempli{position:absolute;inset:0 auto 0 0;width:0;border-radius:100px;background:var(--corail);transition:width 1.2s var(--ease);overflow:hidden}
.jauge-rempli::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.45) 50%,transparent 80%);transform:translateX(-100%);animation:reflet 2.8s ease-in-out infinite}
@keyframes reflet{60%,100%{transform:translateX(100%)}}
.jauge-infos{display:flex;justify-content:space-between;font-size:14px;opacity:.85}
.restantes{display:inline-block;margin-top:16px;background:var(--corail);color:var(--blanc);border-radius:100px;padding:10px 24px;font-weight:700;font-size:20px;line-height:1.2}
.restantes.atteint{background:var(--fond);color:var(--corail)}

.chrono{padding:16px}
.chrono-titre{text-align:center;font-size:16px;opacity:.9;margin-bottom:12px}
.tuiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tuile{background:rgba(52,52,52,.45);border-radius:12px;padding:10px 4px 8px;text-align:center}
.tuile b{display:block;font-family:var(--headline);font-weight:400;font-size:clamp(32px,10vw,48px);line-height:1;font-variant-numeric:tabular-nums}
.tuile span{font-size:13px;opacity:.85}
.chrono-note{text-align:center;font-size:14px;opacity:.8;margin-top:12px}

.equipes{padding:8px 16px;display:flex;flex-direction:column}
.ligne-equipe{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:12px 0;border-bottom:1px solid rgba(255,254,253,.15);color:inherit;text-decoration:none}
.ligne-equipe:last-child{border-bottom:0}
/* Lignes cliquables : flèche corail (icône arrow-right de hyla.com) + survol */
a.ligne-equipe{grid-template-columns:1fr auto 36px;align-items:center;margin:0 -8px;padding:12px 8px;border-radius:12px;transition:background .25s var(--ease)}
a.ligne-equipe::after{content:"";grid-column:3;grid-row:1;width:36px;height:36px;border-radius:50%;background:var(--corail) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 23'%3E%3Cpath d='M4 10.153v1.717h4.089l9.411-.453-.218-.5-6.314 6.463.629.62L19 11.274v-.524L11.597 4l-.63.62 6.315 6.464.218-.501-9.411-.43H4Z' fill='%23FFFFFF' stroke='%23FFFFFF' stroke-width='.6'/%3E%3C/svg%3E") center/20px no-repeat;transition:transform .35s var(--ease)}
a.ligne-equipe:hover,a.ligne-equipe:active{background:rgba(255,254,253,.10)}
a.ligne-equipe:hover::after{transform:translateX(4px)}
.ligne-equipe .nom{font-weight:700;font-size:18px}
.ligne-equipe .val{font-family:var(--headline);font-size:24px;line-height:1.2;font-variant-numeric:tabular-nums}
.ligne-equipe .val small{font-family:var(--sans);font-size:14px;opacity:.75}
.mini-jauge{grid-column:1/-1;height:6px;border-radius:100px;background:rgba(255,254,253,.18);overflow:hidden}
.mini-jauge i{display:block;height:100%;width:0;background:var(--corail);border-radius:100px;transition:width 1.2s var(--ease)}

.pied{margin-top:auto;text-align:center;font-size:12px;opacity:.7;padding-top:8px}
.pied .hors-ligne{color:var(--corail-200)}

.toast{position:fixed;left:50%;top:16px;z-index:20;transform:translate(-50%,-140%);background:var(--fond);color:var(--anthracite);border-radius:100px;padding:12px 24px;font-weight:700;font-size:18px;box-shadow:0 12px 32px rgba(0,0,0,.3);transition:transform .45s var(--ease);white-space:nowrap}
.toast.visible{transform:translate(-50%,0)}
.toast em{font-style:normal;color:var(--corail)}
#confettis{position:fixed;inset:0;z-index:15;pointer-events:none}

@media (min-width:768px){
  .page{max-width:760px;padding:32px 45px 40px;gap:24px}
  .entete img{height:30px}
  .tuile span{font-size:16px}
  .titre-bloc{margin-top:auto}
  h1.equipe{font-size:88px}
  .score{padding:40px 32px 32px}
  .nombre{font-size:200px}
  .sur{font-size:56px}
  .tuile b{font-size:64px}
  .tuile{padding:16px 4px 12px}
  .chrono{padding:24px}
  .chrono-titre,.legende{font-size:18px}
  .restantes{font-size:24px;padding:12px 32px}
}
@media (max-height:700px) and (max-width:767px){.score{padding:16px}}
@media (prefers-reduced-motion:reduce){
  .fond img,.jauge-rempli::after{animation:none}
  .nombre.pop{animation:none}
}

/* ---------- Saisie (fond clair, usage rapide au téléphone) ---------- */
body.saisie{background:var(--gris-100)}
.saisie-page{max-width:640px;margin:0 auto;padding:20px 20px 64px}
.saisie-entete{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.saisie-entete h1{font-family:var(--headline);font-weight:400;font-size:32px;line-height:1.1}
.saisie-entete img{height:22px}
.carte{background:var(--blanc);border-radius:12px;padding:20px;margin-bottom:16px}
.carte h2{font-family:var(--headline);font-weight:400;font-size:24px;line-height:1.1;margin-bottom:12px}
.rang{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.rang .nom{font-weight:700;font-size:20px}
.rang .compte{font-family:var(--headline);font-size:40px;line-height:1;font-variant-numeric:tabular-nums}
.rang .compte small{font-family:var(--sans);font-size:16px;color:var(--gris-700)}
.boutons{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.btn{height:56px;border-radius:100px;border:1px solid var(--anthracite);background:var(--blanc);color:var(--anthracite);font-weight:700;font-size:20px;transition:background .25s var(--ease),transform .1s}
.btn:active{transform:scale(.96)}
.btn.plein{background:var(--corail);border-color:var(--corail);color:var(--blanc)}
.btn.plein:active{background:var(--corail-hover)}
.btn.petit{height:40px;font-size:14px;padding:0 18px;letter-spacing:.28px}
.corriger{display:flex;gap:8px;margin-top:12px}
.corriger input{flex:1;min-width:0;height:40px;border:1px solid var(--gris-300);border-radius:4px;padding:0 12px;font:inherit;font-size:16px}
.lien-texte{background:none;border:0;color:var(--gris-700);text-decoration:underline;font-size:14px;padding:4px 0;margin-top:8px}
.total{display:flex;justify-content:space-between;align-items:baseline}
.total b{font-family:var(--headline);font-weight:400;font-size:40px}
.histo{list-style:none;padding:0}
.histo li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--gris-100);font-size:16px}
.histo li.annule span{text-decoration:line-through;color:var(--gris-700)}
.histo .delta{font-weight:700;color:var(--corail)}
.liens a{color:var(--anthracite)}
.liens li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0}
.message{font-size:14px;color:var(--gris-700)}
.erreur{color:var(--erreur);font-size:14px;margin-top:8px}
.danger{border-color:var(--erreur);color:var(--erreur)}
.saisie .toast{background:var(--anthracite);color:var(--fond);top:auto;bottom:16px;transform:translate(-50%,160%)}
.saisie .toast.visible{transform:translate(-50%,0)}