@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700;9..144,800&family=Space+Mono:wght@400;700&family=Inter:wght@400;500;600;700;800&display=swap');

  :root{
    --navy: #16263b;
    --green-deep: #1c6b34;
    --green: #3fae44;
    --green-light: #7ed957;
    --blue: #4a90d9;
    --orange: #f2a93b;
    --red: #ef6a52;
    --purple: #7c5cd9;
    --paper: #f4efe1;
    --paper-line: #e2d9bd;
    --ink: #1c1c16;
    --ink-soft: #6b6a5e;
    --white: #fffdf8;
    --dark-bg: #0c1826;
    --dark-bg-2: #0a1420;
  }

  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0; padding:0; background:#0d1912; font-family:'Inter',sans-serif; color:var(--ink);}

  .demo-nav{
    display:flex; gap:6px; justify-content:center; padding:22px 0 0;
    font-family:'Space Mono',monospace; font-size:11px;
  }
  .demo-nav button{
    background:none; border:1px solid rgba(244,239,225,.3); color:#cfe3d2;
    padding:6px 11px; border-radius:20px; cursor:pointer; letter-spacing:.03em;
  }
  .demo-nav button.active{background:var(--orange); border-color:var(--orange); color:#1c1c16; font-weight:700;}

  .device{
    max-width:400px; margin:20px auto 40px; background:var(--paper);
    min-height:840px; position:relative; overflow:hidden;
    border-radius:32px; box-shadow:0 30px 60px rgba(0,0,0,.5);
    display:flex; flex-direction:column;
  }

  .screen{display:none; flex-direction:column; flex:1;}
  .screen.active{display:flex;}
  .screen-pad{padding:22px 20px 26px; display:flex; flex-direction:column; flex:1;}

  /* Thème sombre pour les écrans "liste" (setup, historique, stats, favoris) */
  .screen.dark{ background:linear-gradient(180deg, var(--dark-bg) 0%, var(--dark-bg-2) 100%); }
  .screen.dark .eyebrow{ color:var(--green-light); }
  .screen.dark h1{ color:#fff; }
  .screen.dark .sub, .screen.dark .field-label, .screen.dark .grid-label{ color:#8fa3b8; }
  .screen.dark .legal, .screen.dark .kpi-k, .screen.dark .chart-labels{ color:#7c93aa; }

  /* Barre de navigation native : retour + titre */
  .nav-bar{
    display:flex; align-items:center; gap:8px; padding:16px 14px 6px;
  }
  .nav-back{
    background:none; border:none; font-size:26px; line-height:1; cursor:pointer;
    color:var(--navy); width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  }
  .screen.dark .nav-back{ color:#fff; }
  .nav-title{
    font-family:'Fraunces',serif; font-weight:700; font-size:17px; color:var(--navy);
  }
  .screen.dark .nav-title{ color:#fff; }

  /* ---- Logo lockups ---- */
  .logo-mark{display:block;}
  .logo-word{font-family:'Fraunces',serif; font-weight:800;}

  .top-lockup{
    display:flex; align-items:center; gap:9px; padding:18px 20px 4px;
  }
  .top-lockup .logo-word{font-size:18px; color:var(--navy);}
  .top-lockup .logo-word span{color:var(--green);}

  /* ---- SCREEN 0 : HOME ---- */
  .home-hero{
    background:radial-gradient(circle at 50% 20%, #2a8f45 0%, #1c6b34 45%, var(--navy) 100%);
    padding:44px 24px 30px; text-align:center; position:relative;
  }
  .home-hero .logo-big{margin:0 auto 14px; filter:drop-shadow(0 10px 20px rgba(0,0,0,.35));}
  .home-hero .logo-word-big{
    font-size:34px; color:var(--white); display:block; letter-spacing:-.01em;
  }
  .home-hero .logo-word-big span{color:var(--green-light);}
  .home-hero .word-sub{
    font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.14em;
    text-transform:uppercase; color:#cfe9d4; margin-top:2px;
  }
  .home-hero .claim{
    margin-top:16px; font-family:'Fraunces',serif; font-style:italic; font-weight:500;
    font-size:15px; color:#eaf6ec; line-height:1.35;
  }

  .home-body{padding:24px 20px 26px; display:flex; flex-direction:column; flex:1;}
  .tile-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:22px;}
  .tile{
    border-radius:18px; padding:16px 14px; color:var(--white); cursor:pointer;
    display:flex; flex-direction:column; gap:20px; box-shadow:0 8px 16px rgba(0,0,0,.1);
  }
  .tile .icon{width:26px; height:26px;}
  .tile .t-label{font-weight:700; font-size:13.5px; line-height:1.2;}
  .tile.c-green{background:linear-gradient(135deg,#4fbd54,#2f8f3f);}
  .tile.c-blue{background:linear-gradient(135deg,#63a8e6,#3f7fc4);}
  .tile.c-orange{background:linear-gradient(135deg,#f5bb5c,#e0932a);}
  .tile.c-red{background:linear-gradient(135deg,#f4826b,#dd5238);}
  .tile.c-purple{background:linear-gradient(135deg,#9b7ee8,#6a4fc9);}

  .btn-cta{
    margin-top:auto; background:var(--navy); color:var(--white); border:none;
    padding:17px; border-radius:16px; font-family:'Inter',sans-serif; font-weight:700;
    font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
  }
  .btn-cta:active{background:#0e1a29;}

  /* ---- shared ---- */
  .eyebrow{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--green-deep);}
  h1{font-family:'Fraunces',serif; font-weight:800; font-size:27px; margin:2px 0 4px; line-height:1.05; color:var(--navy);}
  .sub{color:var(--ink-soft); font-size:13px; margin-bottom:18px;}

  /* Setup screen */
  .photo-well{
    height:106px; border-radius:16px; border:2px dashed #d8c9a0;
    display:flex; align-items:center; justify-content:center; gap:8px;
    color:#7a6a45; font-size:13px; font-weight:600; margin-bottom:18px; background:var(--paper);
  }
  .field-label{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:8px; font-weight:700;}
  .tee-row{display:flex; gap:10px; margin-bottom:18px;}
  .tee-dot{
    width:42px; height:42px; border-radius:50%; border:3px solid var(--orange);
    cursor:pointer; position:relative; flex-shrink:0; box-shadow:0 3px 6px rgba(0,0,0,.15);
  }
  .tee-dot.selected{border-color:var(--green); transform:scale(1.1);}
  .tee-dot[data-c="noir"]{background:#1c1c1c;}
  .tee-dot[data-c="blanc"]{background:#f4f4f0;}
  .tee-dot[data-c="jaune"]{background:#e8c33d;}
  .tee-dot[data-c="bleu"]{background:var(--blue);}
  .tee-dot[data-c="rouge"]{background:var(--red);}

  .num-row{display:flex; gap:10px; margin-bottom:18px;}
  .num-field{flex:1;}
  .num-field input{
    width:100%; border:1.5px solid var(--paper-line); background:var(--white);
    border-radius:12px; padding:12px 10px; font-family:'Space Mono',monospace;
    font-size:18px; text-align:center; color:var(--ink);
  }

  .par-grid{display:grid; grid-template-columns:repeat(9,1fr); gap:5px; margin-bottom:8px;}
  .par-cell{
    background:var(--white); border:1px solid var(--paper-line); border-radius:8px;
    text-align:center; padding:6px 0;
  }
  .par-cell .h-num{font-size:9px; color:var(--ink-soft); font-family:'Space Mono',monospace;}
  .par-cell input{
    width:100%; border:none; background:none; text-align:center;
    font-family:'Space Mono',monospace; font-weight:700; font-size:15px; color:var(--navy);
  }
  .grid-label{font-size:10px; color:var(--ink-soft); font-family:'Space Mono',monospace; margin:2px 0 14px;}

  .btn-primary{
    margin-top:auto; background:var(--navy); color:var(--white); border:none;
    padding:16px; border-radius:14px; font-family:'Inter',sans-serif; font-weight:700;
    font-size:15px; cursor:pointer; letter-spacing:.01em;
  }
  .btn-primary:active{background:#0e1a29;}

  /* Hole entry screen */
  .hole-hero{
    display:flex; align-items:flex-end; justify-content:space-between;
    background:radial-gradient(circle at 85% 0%, #2f8f3f 0%, var(--navy) 60%);
    color:var(--white); border-radius:18px; padding:20px; margin-bottom:20px;
    box-shadow:0 10px 20px rgba(0,0,0,.15);
  }
  .hole-num{font-family:'Fraunces',serif; font-size:52px; font-weight:800; line-height:1;}
  .hole-meta{text-align:right; font-family:'Space Mono',monospace; font-size:12px; color:#cfe9d4;}
  .hole-meta .par-val{font-size:20px; color:var(--orange); font-weight:700;}

  .stepper-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:13px 4px; border-bottom:1px solid var(--paper-line);
  }
  .stepper-row .label{font-size:14px; font-weight:700;}
  .stepper-row .label .desc{display:block; font-weight:400; font-size:11px; color:var(--ink-soft); margin-top:2px;}
  .stepper{display:flex; align-items:center; gap:14px;}
  .stepper button{
    width:33px; height:33px; border-radius:50%; border:none;
    background:var(--navy); color:var(--white); font-size:17px; cursor:pointer; line-height:1;
  }
  .stepper .val{font-family:'Fraunces',serif; font-size:26px; font-weight:800; min-width:26px; text-align:center; color:var(--green-deep);}

  .toggle-pair{display:flex; gap:8px;}
  .toggle-pair button{
    border:1.5px solid var(--paper-line); background:var(--white); border-radius:10px;
    padding:7px 14px; font-size:13px; font-weight:700; color:var(--ink-soft); cursor:pointer;
  }
  .toggle-pair button.on{background:var(--green); border-color:var(--green); color:var(--white);}
  .toggle-pair button.on.penalty{background:var(--red); border-color:var(--red);}

  .dots{display:flex; gap:4px; justify-content:center; margin-top:16px;}
  .dots span{width:5px; height:5px; border-radius:50%; background:var(--paper-line);}
  .dots span.done{background:var(--green-light);}
  .dots span.current{background:var(--red); width:7px; height:7px;}

  /* Summary screen */
  .score-hero{display:flex; gap:12px; margin-bottom:20px;}
  .score-card{
    flex:1; background:var(--navy); color:var(--white); border-radius:16px;
    padding:18px 16px; text-align:center; box-shadow:0 8px 16px rgba(0,0,0,.1);
  }
  .score-card.net{background:linear-gradient(135deg,#4fbd54,#2f8f3f); color:var(--white);}
  .score-card .k{font-size:10px; text-transform:uppercase; letter-spacing:.1em; opacity:.85; font-family:'Space Mono',monospace;}
  .score-card .v{font-family:'Fraunces',serif; font-size:38px; font-weight:800; margin-top:4px;}

  .stat-row{display:flex; align-items:center; gap:10px; padding:9px 2px; border-bottom:1px solid var(--paper-line); font-size:13px;}
  .stat-row .ic{width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:13px;}
  .stat-row .ic.blue{background:#e4eefb; color:var(--blue);}
  .stat-row .ic.orange{background:#fdf0dd; color:var(--orange);}
  .stat-row .ic.red{background:#fbe4de; color:var(--red);}
  .stat-row span.label{flex:1;}
  .stat-row .v{font-family:'Space Mono',monospace; font-weight:700; color:var(--navy);}

  .index-box{
    margin-top:16px; background:linear-gradient(135deg,#fef3dd,#fce8c0); border:1.5px solid var(--orange); border-radius:16px; padding:16px;
  }
  .index-box .k{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:#9c6f1a; font-weight:700; font-family:'Space Mono',monospace;}
  .index-box .v{font-family:'Fraunces',serif; font-size:28px; color:var(--navy); margin:6px 0 8px;}
  .index-box .legal{font-size:10.5px; line-height:1.4; color:#8a6a3a;}

  .btn-row{display:flex; gap:10px; margin-top:18px;}
  .btn-row button{flex:1; padding:14px; border-radius:14px; font-weight:700; font-size:13.5px; cursor:pointer; border:none;}
  .btn-row .pdf{background:var(--red); color:var(--white);}
  .btn-row .hist{background:none; border:1.5px solid var(--navy); color:var(--navy);}

/* ==== Ajouts V1.1 (retours de test terrain) ==== */

/* Tuiles carrées arrondies, fidèles aux visuels fournis */
.tile-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
.tile{
  border-radius:18px; padding:16px 14px; align-items:flex-start; justify-content:flex-end;
  min-height:96px; box-shadow:0 10px 20px rgba(0,0,0,.18);
}
.tile .t-label{font-size:13.5px;}
.tile.disabled{ filter:grayscale(.15); opacity:.62; }

/* Bouton d'installation PWA */
.install-banner{
  display:none; align-items:center; gap:10px; background:var(--navy); color:var(--white);
  padding:12px 16px; font-size:12.5px; font-weight:600;
}
.install-banner.show{ display:flex; }
.install-banner button{
  margin-left:auto; background:var(--green); color:var(--white); border:none;
  padding:8px 14px; border-radius:10px; font-weight:700; font-size:12.5px; cursor:pointer;
}
.install-banner .dismiss{
  background:none; color:#cfe9d4; padding:4px 8px; margin-left:4px;
}

/* Setup : date + format */
.select-row{display:flex; gap:8px; margin-bottom:18px;}
.select-row button{
  flex:1; border:2px solid var(--orange); background:var(--white); border-radius:10px;
  padding:10px 6px; font-size:12px; font-weight:700; color:var(--ink-soft); cursor:pointer;
}
.select-row button.on{ background:var(--green); border-color:var(--green); color:var(--white); }
input[type="date"]{
  width:100%; border:1.5px solid var(--paper-line); background:var(--white);
  border-radius:12px; padding:11px 10px; font-family:'Space Mono',monospace; font-size:14px;
}

/* Photo réelle capturée */
.photo-well{ position:relative; overflow:hidden; padding:0; cursor:pointer; }
.photo-well img{ width:100%; height:100%; object-fit:cover; }
.photo-well .placeholder-txt{ pointer-events:none; }

/* Trou : navigation arrière + note */
.hole-nav{ display:flex; gap:10px; margin-top:10px; }
.hole-nav .btn-secondary{
  flex:1; background:var(--white); border:1.5px solid var(--navy); color:var(--navy);
  padding:15px; border-radius:14px; font-weight:700; font-size:14px; cursor:pointer;
}
.hole-nav .btn-primary{ margin-top:0; flex:2; }
.note-field{ margin-top:6px; }
.note-field textarea{
  width:100%; border:1.5px solid var(--paper-line); background:var(--white); border-radius:12px;
  padding:10px; font-family:'Inter',sans-serif; font-size:13px; resize:none; min-height:52px;
}

/* Résumé : carte de score visuelle + retour accueil */
.scorecard-preview{
  margin-top:16px; background:var(--white); border:1.5px solid var(--paper-line); border-radius:14px;
  padding:12px; overflow-x:auto;
}
.scorecard-preview table{ border-collapse:collapse; width:100%; font-family:'Space Mono',monospace; font-size:10.5px; }
.scorecard-preview th, .scorecard-preview td{
  padding:4px 3px; text-align:center; border-bottom:1px solid var(--paper-line); min-width:20px;
}
.scorecard-preview th{ color:var(--ink-soft); font-weight:700; font-size:9px; }
.scorecard-preview td.total{ font-weight:700; color:var(--navy); }

.btn-row-single{ margin-top:10px; }
.btn-row-single button{
  width:100%; padding:14px; border-radius:14px; font-weight:700; font-size:13.5px; cursor:pointer;
  background:none; border:1.5px solid var(--paper-line); color:var(--ink-soft);
}

.legal-footer{
  margin-top:18px; padding-top:14px; border-top:1px solid var(--paper-line);
  text-align:center; font-size:10px; color:var(--ink-soft); font-family:'Space Mono',monospace;
}
.legal-footer a{ color:var(--ink-soft); }

/* Écran Historique */
.history-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px; border:1.5px solid var(--paper-line); border-radius:14px; margin-bottom:10px;
  cursor:pointer; background:var(--white);
}
.history-item .hi-course{ font-weight:700; font-size:14px; color:var(--navy); }
.history-item .hi-date{ font-size:11px; color:var(--ink-soft); font-family:'Space Mono',monospace; }
.history-item .hi-score{ font-family:'Fraunces',serif; font-weight:800; font-size:22px; color:var(--green-deep); }
.empty-state{ text-align:center; color:var(--ink-soft); font-size:13px; padding:40px 20px; }

.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:var(--navy); color:var(--white); padding:10px 18px; border-radius:20px;
  font-size:12.5px; font-weight:600; z-index:50; opacity:0; pointer-events:none;
  transition:opacity .25s;
}
.toast.show{ opacity:1; }

/* Écran Statistiques */
.stat-kpi-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
.kpi-card{
  background:var(--white); border:1.5px solid var(--paper-line); border-radius:14px;
  padding:14px 12px; text-align:center;
}
.kpi-v{ font-family:'Fraunces',serif; font-weight:800; font-size:26px; color:var(--navy); }
.kpi-k{ font-size:10.5px; color:var(--ink-soft); margin-top:2px; line-height:1.3; }
.chart-box{
  background:var(--white); border:1.5px solid var(--paper-line); border-radius:14px;
  padding:14px 12px 10px;
}
.chart-labels{ display:flex; justify-content:space-between; font-family:'Space Mono',monospace; font-size:10px; color:var(--ink-soft); margin-top:2px; }

/* Écran Parcours favoris */
.star-btn{
  background:none; border:none; font-size:22px; color:var(--paper-line); cursor:pointer;
  line-height:1; padding:4px;
}
.star-btn.on{ color:var(--orange); }

/* Favoris : notation 5 étoiles */
.favorite-item{ flex-wrap:wrap; }
.favorite-item .course-thumb{ order:1; }
.favorite-item .fav-info{ order:2; }
.favorite-item .delete-btn{ order:3; }
.favorite-item .star-row{ order:4; flex-basis:100%; justify-content:flex-end; margin-top:8px; }
.star-row{ display:flex; gap:2px; }
.star-row .star-btn{ font-size:19px; padding:2px; }

/* Vignettes photo (historique, favoris) */
.course-thumb{
  width:46px; height:46px; border-radius:10px; object-fit:cover; flex-shrink:0;
}
.course-thumb-placeholder{
  display:flex; align-items:center; justify-content:center; background:var(--paper);
  border:1.5px dashed var(--paper-line); font-size:18px;
}

/* Suppression */
.delete-btn{
  background:none; border:none; font-size:18px; color:var(--ink-soft); cursor:pointer; padding:6px;
  opacity:.6;
}
.delete-btn:active{ opacity:1; color:var(--red); }

/* Photo dans l'écran détail */
.detail-photo{
  border-radius:14px; overflow:hidden; margin-bottom:12px; max-height:160px;
}
.detail-photo img{ width:100%; height:160px; object-fit:cover; display:block; }

/* Onglets Statistiques */
.stats-tabs{ display:flex; gap:4px; background:rgba(255,255,255,.06); border-radius:12px; padding:4px; margin:14px 0 18px; }
.stats-tab{
  flex:1; background:none; border:none; padding:9px 6px; border-radius:9px; font-weight:700; font-size:12.5px;
  color:#8fa3b8; cursor:pointer;
}
.stats-tab.on{ background:var(--green); color:#fff; }
.kpi-v.trend-good{ color:var(--green-deep); }
.kpi-v.trend-bad{ color:var(--red); }

/* Donut répartition des scores */
.donut-box{ display:flex; align-items:center; gap:16px; justify-content:center; }
.donut-legend{ font-size:12px; }
.donut-legend div{ display:flex; align-items:center; gap:6px; margin:5px 0; color:var(--ink-soft); }
.screen.dark .donut-legend div{ color:#c7d4e0; }
.donut-legend .dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.donut-legend .dot.green{ background:var(--green); }
.donut-legend .dot.blue{ background:var(--blue); }

/* Statistiques : texte des boutons en orange pour plus de visibilité sur fond sombre */
#s5 .btn-primary{ color:var(--orange); }
#s5 .stats-tab.on{ color:var(--orange); }
#s5 .kpi-v, #s5 .kpi-v.trend-good, #s5 .kpi-v.trend-bad{ color:var(--orange); }

/* Sélecteur de langue FR / GB */
.lang-switch{
  display:flex; gap:3px; background:rgba(255,255,255,.12); border-radius:20px; padding:3px;
  margin-left:auto;
}
.lang-btn{
  background:none; border:none; font-family:'Space Mono',monospace; font-size:11px; font-weight:700;
  padding:5px 10px; border-radius:16px; cursor:pointer; color:#fff; opacity:.6;
}
.lang-btn.on{ background:var(--orange); color:#1c1c16; opacity:1; }

.lang-switch-home{
  position:absolute; top:16px; right:16px; background:rgba(0,0,0,.28);
}
.home-hero{ position:relative; }

.nav-bar{ align-items:center; }
.screen:not(.dark) .lang-switch{ background:rgba(22,38,59,.08); }
.screen:not(.dark) .lang-btn{ color:var(--navy); opacity:.55; }
.screen:not(.dark) .lang-btn.on{ background:var(--orange); color:#1c1c16; opacity:1; }

/* Pastilles de score colorées (birdie/par/bogey/double bogey) */
.score-pill{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:18px; padding:0 3px; border-radius:5px;
  font-weight:700;
}
.score-pill.score-par{ background:none; color:var(--navy); }
.score-pill.score-birdie{ background:none; border:1.5px solid var(--red); color:var(--navy); border-radius:50%; min-width:18px; height:18px; }
.score-pill.score-bogey{ background:#f5d76e; color:#5a4a12; }
.score-pill.score-double{ background:var(--orange); color:#fff; }

/* Boutons photo : caméra / galerie */
.photo-btn-row{ display:flex; gap:8px; margin:8px 0 18px; }
.photo-btn-row button{
  flex:1; border:1.5px solid var(--paper-line); background:var(--white); border-radius:10px;
  padding:9px 6px; font-size:12px; font-weight:700; color:var(--ink-soft); cursor:pointer;
}