/* Golf Caddie — palette neutre et sobre : papier clair, encre sombre,
   le vert ne sert qu'aux accents. Lisible en plein soleil, sans aplats criards. */
:root{
  --papier:#f6f6f4;        /* fond général, blanc cassé légèrement chaud */
  --carte:#ffffff;
  --carte-doux:#f1f2ef;
  --sable:#f5f1e8;         /* lignes de sous-total de la carte de score */
  --trait:#e4e5e0;
  --trait-fort:#cdcfc8;
  --encre:#1b1f1c;
  --encre-douce:#6c7470;
  --vert:#1b6b4a;          /* accent unique */
  --vert-pale:#e8f2ec;
  --vert-trait:#bcdac9;
  --ambre:#8a5a12;
  --ambre-pale:#faf3e4;
  --rouge:#9c2b2b;
  --rayon:12px;
  --ombre:0 1px 2px rgba(27,31,28,.05), 0 4px 14px rgba(27,31,28,.05);
}
*{box-sizing:border-box}
/* Une règle display: dans une classe l'emporte sinon sur l'attribut hidden. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papier);color:var(--encre);
  font:15px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  padding-bottom:calc(72px + env(safe-area-inset-bottom));
  -webkit-tap-highlight-color:transparent;
}
h3{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--encre-douce);
  margin:0 0 12px;font-weight:600}
main{padding:14px;max-width:620px;margin:0 auto}
.vue{display:none}.vue.active{display:block;animation:apparait .16s ease-out}
@keyframes apparait{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

/* ── En-tête ─────────────────────────────────────────────────────────────── */
header{
  position:sticky;top:0;z-index:10;display:flex;gap:10px;align-items:center;
  justify-content:space-between;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
  background:rgba(246,246,244,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--trait);
}
.ident{display:flex;gap:10px;align-items:center;min-width:0}
.pastille{
  flex:0 0 34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--carte);color:var(--vert);font-weight:700;font-size:12.5px;
  letter-spacing:.03em;border:1px solid var(--trait-fort);
}
.pastille.grande{flex-basis:54px;height:54px;font-size:18px}
.ident-txt{display:flex;flex-direction:column;min-width:0}
.ident-txt strong{font-size:14.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ident-txt span{font-size:12px;color:var(--encre-douce);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.puce{
  font-size:11px;font-weight:600;padding:4px 9px;border-radius:6px;
  border:1px solid var(--trait-fort);background:var(--carte);color:var(--encre-douce);white-space:nowrap;
}
.puce.accent,.puce.ok{color:var(--vert);border-color:var(--vert-trait);background:var(--vert-pale)}
.puce.neutre{color:var(--ambre);border-color:#ead9b4;background:var(--ambre-pale)}

/* ── Blocs ───────────────────────────────────────────────────────────────── */
.bloc,.club-bloc,.fiche-joueur{
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);
  padding:16px;margin-bottom:12px;box-shadow:var(--ombre);
}
.fiche-joueur{display:flex;gap:14px;align-items:center}
.fiche-joueur strong{font-size:19px;display:block}
.chips{display:flex;gap:6px;margin:6px 0 2px;flex-wrap:wrap}

/* ── Sélection du golf ───────────────────────────────────────────────────── */
.selecteurs{display:grid;gap:8px;grid-template-columns:1fr 1fr}
.selecteurs.plein{grid-template-columns:1fr}

/* ── En-tête du trou joué ────────────────────────────────────────────────── */
.entete-trou{
  display:flex;gap:12px;align-items:center;
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);
  padding:10px 12px;margin-bottom:12px;box-shadow:var(--ombre);
}
.entete-trou-txt{min-width:0}
.btn.retour{flex:0 0 auto;padding:10px 12px;font-size:13px}
.entete-trou strong{font-size:17px;display:block;line-height:1.2}
.entete-trou span{display:block;font-size:12px;color:var(--encre-douce)}
.entete-trou #jeu-lieu{margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Un numéro de trou est un raccourci vers sa fiche de jeu. */
table.verticale td.num[data-trou]{cursor:pointer;color:var(--vert);text-decoration:underline;
  text-decoration-color:var(--vert-trait);text-underline-offset:2px}

/* ── Club conseillé ──────────────────────────────────────────────────────── */
.club-bloc{text-align:center;border-color:var(--vert-trait);background:var(--vert-pale)}
.club-etiq{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--vert);font-weight:600}
.club-nom{font-size:44px;font-weight:800;line-height:1.05;color:var(--vert);margin:3px 0 4px;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.club-sous{font-size:13px;color:var(--encre-douce)}
.club-note{margin:12px 0 0;font-size:13px;color:var(--encre)}
.jauge{height:5px;border-radius:3px;background:rgba(255,255,255,.75);margin:14px 0 0;overflow:hidden}
.jauge-barre{height:100%;width:0;border-radius:3px;background:var(--vert);
  transition:width .25s ease,background .25s ease}
.jauge-barre.tendu{background:var(--ambre)}

/* ── Cibles entrée / centre / fond ───────────────────────────────────────── */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.cible{
  display:flex;flex-direction:column;align-items:center;gap:1px;padding:11px 4px;
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);
  color:var(--encre);box-shadow:var(--ombre);
}
.cible span{font-size:10.5px;color:var(--encre-douce);text-transform:uppercase;letter-spacing:.07em}
.cible b{font-size:27px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.cible i{font-size:11px;color:var(--encre-douce);font-style:normal}
.cible.actif{border-color:var(--vert);background:var(--vert-pale)}
.cible.actif b{color:var(--vert)}

/* ── Chiffres et listes ──────────────────────────────────────────────────── */
.duo-stat{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.duo-stat span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--encre-douce)}
.duo-stat b{font-size:25px;font-variant-numeric:tabular-nums}
.corrections{list-style:none;margin:14px 0 0;padding:0;font-size:13px;color:var(--encre-douce)}
.corrections li{padding:3px 0 3px 15px;position:relative}
.corrections li:before{content:"→";position:absolute;left:0;color:var(--vert)}
.jetons{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.jetons span{font-size:12px;padding:5px 10px;border-radius:6px;
  background:var(--carte-doux);border:1px solid var(--trait);color:var(--encre-douce)}
.jetons span.vedette{background:var(--vert-pale);color:var(--vert);border-color:var(--vert-trait)}

/* ── Formulaires ─────────────────────────────────────────────────────────── */
.grille-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* Dans une grille, les colonnes s'alignent : la marge d'empilement ne s'applique pas. */
.grille-2>label,.grille-2>label+label,.selecteurs>label{margin-top:0}
label{display:block;font-size:12px;color:var(--encre-douce);position:relative}
label+label,.rangee{margin-top:10px}
input,select{
  width:100%;margin-top:5px;padding:10px 11px;border-radius:9px;
  border:1px solid var(--trait-fort);background:var(--carte);color:var(--encre);font-size:16px;
}
input:focus,select:focus{outline:2px solid var(--vert);outline-offset:-1px;border-color:var(--vert)}
.unite{position:absolute;right:11px;bottom:11px;font-size:12px;color:var(--encre-douce);font-style:normal}
.interrupteur{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:13px;color:var(--encre)}
.interrupteur input{width:auto;margin:0;accent-color:var(--vert)}
.rangee{display:flex;gap:8px}
.rangee>*{flex:1;min-width:0;margin-top:0}
.btn{
  padding:12px 14px;border-radius:9px;border:1px solid var(--trait-fort);
  background:var(--carte);color:var(--encre);font-size:14px;font-weight:600;
}
.btn.primaire{background:var(--vert);border-color:var(--vert);color:#fff}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.42}
.aide{font-size:12px;color:var(--encre-douce);margin:10px 0 0}
summary{cursor:pointer;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--encre-douce);padding:4px 0;font-weight:600}
details[open] summary{margin-bottom:10px}

/* ── Recherche de golf ───────────────────────────────────────────────────── */
.resultats{list-style:none;padding:0;margin:12px 0 0}
.resultats li{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 11px;border:1px solid var(--trait);border-radius:9px;margin-bottom:8px;
  background:var(--carte-doux);font-size:14px}
.resultats li:last-child{margin-bottom:0}
.resultats small{display:block;color:var(--encre-douce);font-size:12px;margin-top:2px}
.resultats .btn{flex:0 0 auto;padding:8px 12px}

/* ── Sac ─────────────────────────────────────────────────────────────────── */
.sac{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.sac div{display:flex;align-items:center;gap:6px;background:var(--carte-doux);
  border:1px solid var(--trait);border-radius:9px;padding:4px 8px}
.sac span{flex:0 0 32px;font-weight:700;font-size:13px;color:var(--vert)}
.sac input{margin:0;padding:6px;font-size:14px;border:0;background:transparent}

.liste{list-style:none;padding:0;margin:0}
.liste li{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:11px 0;border-bottom:1px solid var(--trait);font-size:14px}
.liste li:last-child{border:0;padding-bottom:0}
.liste small{color:var(--encre-douce);display:block;font-size:12px}
.liste .supprimer{background:none;border:0;color:var(--rouge);font-size:12px;padding:6px}

/* ── Carte de score ──────────────────────────────────────────────────────── */
.carte-score{margin-bottom:14px}
.carte-score h4{font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--encre-douce);margin:0 0 7px;font-weight:600}
.defile{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--trait);border-radius:10px;background:var(--carte)}
table.score{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;font-size:14px}
table.score th,table.score td{
  border-right:1px solid var(--trait);border-bottom:1px solid var(--trait);
  padding:8px 6px;text-align:center;min-width:38px;
}
table.score tr:last-child td,table.score tr:last-child th{border-bottom:0}
table.score th:first-child,table.score td:first-child{
  position:sticky;left:0;z-index:1;background:var(--carte-doux);text-align:left;
  min-width:72px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--encre-douce);font-weight:600;
}
table.score thead th{background:var(--carte-doux);font-weight:700;color:var(--encre);
  font-size:13px;text-transform:none;letter-spacing:0}
table.score thead th:first-child{color:var(--encre-douce)}
table.score .total{background:var(--sable);font-weight:700;color:var(--encre)}
table.score td.actif{background:var(--vert-pale);color:var(--vert);font-weight:700}
table.score thead th.actif{background:var(--vert);color:#fff}
table.score .estime{color:var(--encre-douce)}
table.score tbody tr:nth-child(2) td{font-weight:600}

.sommaire{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-bottom:14px}
.sommaire div{background:var(--carte-doux);border:1px solid var(--trait);border-radius:9px;
  padding:8px 2px;text-align:center;min-width:0}
.sommaire b{display:block;font-size:18px;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sommaire span{display:block;font-size:9.5px;color:var(--encre-douce);text-transform:uppercase;
  letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avertissement{border:1px solid #ead9b4;background:var(--ambre-pale);border-radius:9px;
  padding:10px 12px;font-size:12px;color:var(--ambre);margin-bottom:14px}
.avertissement ul{margin:6px 0 0;padding-left:17px}

/* ── Édition de la fiche ─────────────────────────────────────────────────── */
.entete-fiche{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.entete-fiche h3{margin:0 0 3px}
.titre-parcours{font-size:19px}
.entete-fiche .btn{flex:0 0 auto;padding:9px 13px}
.tableau{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.tableau th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--encre-douce);
  text-align:right;padding:0 6px 8px;font-weight:600}
.tableau th:first-child{text-align:left}
.tableau td{padding:7px 6px;text-align:right;border-top:1px solid var(--trait)}
.tableau td:first-child{text-align:left;font-weight:700}
.tableau tfoot td{font-weight:700;border-top:2px solid var(--trait-fort);background:var(--sable)}
.tableau-edition td{padding:4px 3px}
.tableau-edition input{margin:0;padding:7px 6px;font-size:15px;text-align:right;
  border-radius:7px;min-width:54px}

/* ── Barre d'onglets ─────────────────────────────────────────────────────── */
.onglets{
  position:fixed;bottom:0;left:0;right:0;z-index:10;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--trait);padding-bottom:env(safe-area-inset-bottom);
}
.onglet{
  background:none;border:0;color:var(--encre-douce);padding:9px 2px 11px;font-size:11px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
.onglet span{font-size:18px;line-height:1;opacity:.55}
.onglet.actif{color:var(--vert);font-weight:600}
.onglet.actif span{opacity:1}

@media (min-width:620px){
  .club-nom{font-size:52px}
  main{padding:18px 14px}
}

/* ── Carte de jeu : aller et retour côte à côte, en colonnes verticales ──── */
.cartes-jeu{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.demi{background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);
  overflow:hidden;box-shadow:var(--ombre)}
.demi h4{margin:0;padding:9px 10px;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--encre-douce);background:var(--carte-doux);border-bottom:1px solid var(--trait);font-weight:600}
table.verticale{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
table.verticale th{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--encre-douce);
  font-weight:600;padding:5px 2px;border-bottom:1px solid var(--trait)}
table.verticale td{padding:3px 1px;text-align:center;border-bottom:1px solid var(--trait)}
table.verticale td.num{font-weight:700;width:20px}
table.verticale td.par,table.verticale td.pts{color:var(--encre-douce);width:24px}
table.verticale td[data-trou]{cursor:pointer}
table.verticale tr.actif td{background:var(--vert-pale)}
table.verticale tr.actif td.num{color:var(--vert)}
table.verticale input{
  width:100%;max-width:44px;margin:0;padding:6px 1px;text-align:center;font-size:16px;font-weight:600;
  border:1px solid var(--trait);border-radius:7px;background:var(--carte);
}
table.verticale input:focus{border-color:var(--vert)}
table.verticale tfoot td{background:var(--sable);font-weight:700;padding:7px 2px;border-bottom:0}
.bilan{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.bilan div{background:var(--carte-doux);border:1px solid var(--trait);border-radius:9px;
  padding:9px 4px;text-align:center}
.bilan b{display:block;font-size:19px;font-variant-numeric:tabular-nums}
.bilan span{font-size:10px;color:var(--encre-douce);text-transform:uppercase;letter-spacing:.04em}
.bilan .sous{color:var(--vert)}
.bilan .sur{color:var(--ambre)}



@media (max-width:359px){
  main{padding:10px}
  .cartes-jeu{gap:6px}
  table.verticale{font-size:13px}
  table.verticale th{font-size:9px}
  .sommaire b{font-size:16px}
  .sommaire span{font-size:9px}
}

.demi-vide{display:flex;flex-direction:column}
.demi-vide p{margin:0;padding:18px 12px;font-size:12px;color:var(--encre-douce);
  text-align:center;line-height:1.6}

/* Pastille du départ : la couleur annoncée est la couleur affichée. */
.puce.depart-noir{background:#2b2b2b;color:#fff;border-color:#2b2b2b}
.puce.depart-blanc{background:#fff;color:#1b1f1c;border-color:var(--trait-fort)}
.puce.depart-jaune{background:#fdf3c4;color:#6b5600;border-color:#e8d98a}
.puce.depart-bleu{background:#dde9f8;color:#1d4e89;border-color:#b6cfea}
.puce.depart-rouge{background:#fbdede;color:#8f2020;border-color:#edb9b9}
.puce.depart-violet{background:#eadef6;color:#5a2b85;border-color:#d2bbe8}
.puce.depart-orange{background:#fde7cf;color:#8a4b10;border-color:#f0cba3}

.bilan .vedette-mode{color:var(--vert)}

/* ── Identité du club ────────────────────────────────────────────────────── */
.bloc-club{display:flex;gap:12px;align-items:center;min-width:0}
.logo-club{width:52px;height:52px;object-fit:contain;flex:0 0 52px;
  background:var(--carte-doux);border:1px solid var(--trait);border-radius:10px;padding:4px}
.meta-club{font-size:11.5px;color:var(--encre-douce);margin-top:2px}

/* Le club joué, juste sous le conseil : c'est là que le regard est. */
.club-joue{display:flex;align-items:center;gap:10px;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--vert-trait)}
.club-joue label{flex:0 0 auto;font-size:12px;color:var(--vert);font-weight:600;
  text-transform:uppercase;letter-spacing:.06em}
.club-joue select{margin:0;flex:1;min-width:0;background:var(--carte);border-color:var(--vert-trait)}
#filtre-golf,#filtre-enregistres{margin:0 0 10px}

/* ── Écran de connexion ──────────────────────────────────────────────────── */
.accueil{position:fixed;inset:0;z-index:50;display:grid;place-items:center;
  padding:20px;background:var(--papier);overflow:auto}
.panneau{width:100%;max-width:360px;margin:0}
.panneau h2{margin:4px 0 2px;font-size:22px}
.marque{font-size:40px;line-height:1}
.panneau .btn{width:100%;margin-top:16px}
.erreur{color:var(--rouge)}
.actions-entete{display:flex;gap:6px;align-items:center}
.bouton-puce{cursor:pointer}
.liste .role{font-size:11px;padding:2px 7px;border-radius:5px;background:var(--vert-pale);
  color:var(--vert);border:1px solid var(--vert-trait);margin-left:6px}
.liste .role.simple{background:var(--carte-doux);color:var(--encre-douce);border-color:var(--trait)}

/* ── Fiche du club ───────────────────────────────────────────────────────── */
.logo-club.cliquable{cursor:pointer;transition:transform .12s ease}
.logo-club.cliquable:active{transform:scale(.94)}
.adresse{margin:0;font-size:15px}
.texte{margin:0;font-size:14px;line-height:1.6}
a.btn.lien{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
textarea{width:100%;margin-top:5px;padding:10px 11px;border-radius:9px;font:inherit;
  border:1px solid var(--trait-fort);background:var(--carte);color:var(--encre);resize:vertical}
textarea:focus{outline:2px solid var(--vert);outline-offset:-1px;border-color:var(--vert)}

/* Les contacts ne sont pas de largeur égale : un numéro ne doit pas se couper. */
.rangee.contacts{flex-wrap:wrap;margin-top:8px}
.rangee.contacts>*{flex:0 1 auto;white-space:nowrap}

/* ── Plan du parcours ────────────────────────────────────────────────────── */
.cadre-plan{background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);
  padding:6px;box-shadow:var(--ombre);overflow:auto;-webkit-overflow-scrolling:touch}
.cadre-plan img{display:block;width:100%;height:auto}
/* Agrandi : l'image déborde et le cadre défile, pour lire un trou de près. */
.cadre-plan.agrandi img{width:260%;max-width:none}
.boutons-fiche{display:flex;gap:8px;flex:0 0 auto}
.entete-trou #plan-zoom{flex:0 0 auto;padding:10px 12px;font-size:15px}

/* ── Plan du trou, dans la page du trou ──────────────────────────────────── */
.plan-trou{padding:10px}
.plan-trou svg{display:block;width:100%;height:auto;max-height:46vh;border-radius:10px}
.plan-trou .aide{margin:8px 2px 0}

/* ── Intention de jeu, au-dessus du club conseillé ───────────────────────── */
.tete-club{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.intentions{display:flex;gap:4px}
.intention{font-size:11px;font-weight:600;padding:5px 9px;border-radius:999px;
  border:1px solid var(--vert-trait);background:var(--carte);color:var(--encre-douce)}
.intention.actif{background:var(--vert);border-color:var(--vert);color:#fff}
.club-zone{margin:8px 0 0;font-size:12.5px;color:var(--vert);font-weight:600}
.club-zone:empty{display:none}

/* ── Aide ────────────────────────────────────────────────────────────────── */
.aide-liste{margin:8px 0 0;padding-left:20px;font-size:14px;line-height:1.65}
.aide-liste li{margin-bottom:6px}
.aide-liste li:last-child{margin-bottom:0}
#vue-aide .texte+.texte{margin-top:10px}
.onglets{grid-template-columns:repeat(5,1fr)}
.onglet{font-size:10px}
.onglet span{font-size:17px}