/* parcoursgolf.fr : feuille unique, mobile d'abord.
   Charte (plan chaine video, Leo, 01/10/2026) : bleu nuit #0B1F3A, jaune drapeau #F2C230,
   Barlow Condensed (titres) + Inter (texte), polices auto-hebergees sous licence OFL.
   Regle de contraste : le jaune se REMPLIT (fond de bouton, pastille) ou s'ecrit sur fond nuit,
   il ne s'ecrit jamais sur fond clair. */

@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2"); }

:root {
  --nuit: #0B1F3A;
  --nuit-2: #13305A;
  --jaune: #F2C230;
  --gazon: #3FA34D;
  --texte: #16263D;
  --texte-2: #4A5A70;
  --fond: #F5F7FA;
  --carte: #FFFFFF;
  --bord: #DCE3EC;
  --gris-clair: #C9D3DF;
  --rayon: 10px;
  --marge: 16px;
  --largeur: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px; line-height: 1.6;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--nuit-2); text-underline-offset: 2px; }
a:hover { color: var(--nuit); }
:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }

.wrap { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--marge); }

h1, h2, h3 { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; line-height: 1.1; margin: 0 0 .5em; }
h1 { font-weight: 700; font-size: clamp(2rem, 7vw, 3.2rem); letter-spacing: .2px; }
h2 { font-weight: 700; font-size: clamp(1.55rem, 4.8vw, 2.1rem); color: var(--nuit); margin-top: 1.6em; }
h3 { font-weight: 600; font-size: 1.3rem; color: var(--nuit); }
p { margin: 0 0 1em; }
ul { padding-left: 1.2em; }

/* --- en-tete --- */
.site-head { background: var(--nuit); color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none;
  font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.45rem; letter-spacing: .3px; }
.logo span { color: var(--jaune); }
.logo svg { width: 22px; height: 26px; }
.nav { display: flex; gap: 16px; flex-wrap: wrap; }
.nav a { color: var(--gris-clair); text-decoration: none; font-weight: 500; font-size: .95rem; padding: 8px 0; }
.nav a:hover, .nav a[aria-current="page"] { color: #fff; }

/* --- hero --- */
.hero { background: linear-gradient(170deg, var(--nuit) 0%, #0A1A31 100%); color: #fff; padding: 14px 0 28px; }
.hero h1 { color: #fff; margin-top: .3em; }
.hero .chapo { color: var(--gris-clair); font-size: 1.05rem; max-width: 46rem; margin: 16px 0 0; }
.logo b { font-weight: 700; }
.crumbs { font-size: .85rem; color: var(--gris-clair); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.crumbs li + li::before { content: "/"; margin: 0 6px 0 2px; color: #6F829C; }
.crumbs a { color: var(--gris-clair); }
.chiffres { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.chiffres li { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  padding: 6px 14px; font-size: .92rem; color: #fff; }
.chiffres strong { color: var(--jaune); font-family: "Barlow Condensed", sans-serif; font-size: 1.2rem; margin-right: 4px; }

/* --- boutons --- */
.btn { display: inline-block; background: var(--jaune); color: var(--nuit); font-weight: 700; text-decoration: none;
  border-radius: 999px; padding: 12px 22px; line-height: 1.2; border: 0; cursor: pointer; font-size: 1rem; }
.btn:hover { background: #FFD24D; color: var(--nuit); }
.btn-ligne { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); }
.btn-ligne:hover { background: rgba(255,255,255,.08); color: #fff; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* --- contenu --- */
main { padding: 8px 0 40px; }
.bloc { background: var(--carte); border: 1px solid var(--bord); border-top: 4px solid var(--nuit); border-radius: var(--rayon);
  padding: 18px var(--marge); margin: 20px 0; }
.bloc > h2:first-child { margin-top: 0; }
.prose { max-width: 46rem; }
.note { font-size: .88rem; color: var(--texte-2); }
.pastille { display: inline-block; font-size: .78rem; font-weight: 600; border-radius: 999px; padding: 2px 10px;
  background: #EEF2F7; color: var(--texte-2); border: 1px solid var(--bord); white-space: nowrap; }
.pastille-osm { background: #FFF6D6; border-color: #F0DC8F; color: #5C4A00; }

/* carte des points */
.carte { background: var(--nuit); border-radius: var(--rayon); padding: 12px; margin: 18px 0; }
.carte svg { width: 100%; max-width: 560px; margin: 0 auto; }
.carte figcaption { color: var(--gris-clair); font-size: .82rem; text-align: center; margin-top: 8px; }

/* grille des regions */
.regions { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
.regions a { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-decoration: none;
  background: var(--carte); border: 1px solid var(--bord); border-top: 4px solid var(--jaune); border-radius: var(--rayon);
  padding: 12px 14px; color: var(--nuit); font-weight: 600; }
.regions a:hover { border-color: var(--nuit-2); }
.regions .n { font-family: "Barlow Condensed", sans-serif; font-size: 1.35rem; color: var(--nuit); white-space: nowrap; }

/* liste des golfs */
.dep { margin-top: 26px; }
.dep-titre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.dep-titre h3 { margin: 0; }
.golfs { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: 1fr; gap: 8px; }
.golfs li { background: var(--carte); border: 1px solid var(--bord); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.golfs .nom { font-weight: 600; color: var(--nuit); overflow-wrap: anywhere; }
.golfs .meta { font-size: .88rem; color: var(--texte-2); overflow-wrap: anywhere; }
.compact-liste { columns: 1; padding-left: 1.1em; }
.compact-liste li { break-inside: avoid; }
details { border: 1px solid var(--bord); border-radius: 8px; background: var(--carte); margin: 8px 0; }
details > summary { cursor: pointer; padding: 12px 14px; font-weight: 600; color: var(--nuit); }
details > div { padding: 0 14px 12px; }

.filtre { display: none; margin: 14px 0 0; }
.filtre.actif { display: block; }
.filtre label { display: block; font-weight: 600; margin-bottom: 4px; }
.filtre input { width: 100%; max-width: 420px; font: inherit; padding: 10px 12px; border: 1px solid var(--bord); border-radius: 8px; }

/* formulaire non branche */
.lead { background: var(--nuit); color: #fff; border-radius: var(--rayon); padding: 20px var(--marge); margin: 24px 0; }
.lead h2 { color: #fff; margin-top: 0; }
.lead p { color: var(--gris-clair); }
.lead form { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 12px 0; }
.lead label { font-size: .9rem; color: var(--gris-clair); display: block; }
.lead input, .lead select { width: 100%; font: inherit; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.06); color: #fff; }
.lead input:disabled, .lead select:disabled { opacity: .7; cursor: not-allowed; }
.bientot { background: #FFF6D6; color: var(--texte); border-radius: 8px; padding: 12px 14px; margin-top: 12px; }
.bientot:target { outline: 3px solid var(--jaune); }

/* FAQ */
.faq h3 { margin-top: 1.2em; }

/* pied */
.site-foot { background: var(--nuit); color: var(--gris-clair); font-size: .88rem; padding: 26px 0 34px; }
.site-foot a { color: #fff; }
.site-foot p { margin: 0 0 .6em; }

@media (min-width: 640px) {
  .regions { grid-template-columns: 1fr 1fr; }
  .golfs { grid-template-columns: 1fr 1fr; }
  .compact-liste { columns: 2; }
  .lead form { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .regions { grid-template-columns: 1fr 1fr 1fr; }
  .golfs { grid-template-columns: 1fr 1fr 1fr; }
  .compact-liste { columns: 3; }
  .hero { padding: 28px 0 44px; }
}

/* --- CTA de relance (apres la liste) --- */
.cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  background: #FFF6D6; border: 1px solid #F0DC8F; border-top: 4px solid var(--jaune); border-radius: var(--rayon);
  padding: 16px var(--marge); margin: 26px 0; }
.cta-band p { margin: 0; font-weight: 600; color: var(--nuit); flex: 1 1 260px; }

/* --- bouton collant, mobile seulement, discret --- */
.cta-collant { display: none; }
@media (max-width: 639px) {
  body { padding-bottom: 68px; }
  .cta-collant { display: block; position: fixed; left: 16px; right: 16px; bottom: 12px; z-index: 20;
    transform: translateY(160%); transition: transform .2s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: var(--jaune); color: var(--nuit); text-align: center; font-weight: 700; text-decoration: none;
    border-radius: 999px; padding: 12px 16px; line-height: 1.2; box-shadow: 0 4px 14px rgba(11,31,58,.28); }
  .cta-collant.visible { transform: none; }
}

/* --- lead magnet --- */
.guide { display: grid; grid-template-columns: 1fr; gap: 16px; background: var(--carte); border: 1px solid var(--bord);
  border-top: 4px solid var(--jaune); border-radius: var(--rayon); padding: 18px var(--marge); margin: 24px 0; }
.guide h2 { margin-top: 0; }
.guide-sur { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--texte-2); margin: 0 0 .4em; }
.guide-form label { display: block; font-weight: 600; margin-bottom: 4px; }
.guide-form input[type="email"] { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--bord); border-radius: 8px; }
.guide-form input:disabled, .guide-form button:disabled { opacity: .65; cursor: not-allowed; }
.consent { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 6px; }
.consent input { margin-top: 5px; flex: 0 0 auto; }
.consent label { font-weight: 400; font-size: .92rem; }
.brouillon { border-top-color: #D9483B; }
@media (min-width: 900px) { .guide { grid-template-columns: 1fr 1fr; } }

/* --- page d'accueil --- */
.hero-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: center; }
.hero-grille > * { min-width: 0; }
.hero-visuel .photo { margin: 0; }
.hero-visuel img { border-radius: var(--rayon); width: 100%; height: auto; }
.hero-visuel figcaption { color: var(--gris-clair); }
.recherche-region { margin-top: 16px; max-width: 520px; }
.recherche-region label { display: block; color: var(--gris-clair); font-size: .9rem; margin-bottom: 4px; }
.recherche-ligne { display: flex; flex-wrap: wrap; gap: 8px; }
.recherche-ligne select { flex: 1 1 200px; min-width: 0; font: inherit; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.3); background: #fff; color: var(--texte); }
.photo { margin: 0 0 14px; }
.photo img { width: 100%; height: auto; border-radius: 8px; display: block; background: #E6ECF2; }
.photo figcaption { font-size: .78rem; color: var(--texte-2); margin-top: 4px; }
.photo figcaption a { color: inherit; }
.quiz-grille { display: grid; grid-template-columns: 1fr; gap: 16px; }
.quiz-carte { background: var(--carte); border: 1px solid var(--bord); border-top: 4px solid var(--jaune); border-radius: var(--rayon); overflow: hidden; min-width: 0; }
.quiz-carte .quiz-photo { margin: 0; }
.quiz-carte .quiz-photo img { border-radius: 0; }
.quiz-carte .quiz-photo figcaption { padding: 0 var(--marge); }
.quiz-corps { padding: 12px var(--marge) 16px; }
.quiz-corps h3 { margin-top: 0; }
.quiz-statique { padding-left: 1.2em; }
.quiz-statique > li { margin-bottom: 12px; }
.quiz-choix { margin: 4px 0; }
.quiz-question { font-weight: 600; color: var(--nuit); margin: 0 0 6px; }
.quiz-compteur { font-size: .82rem; color: var(--texte-2); margin: 0 0 4px; }
.quiz-options { display: grid; gap: 8px; margin: 8px 0; }
.quiz-option { text-align: left; font: inherit; background: #F5F7FA; border: 1px solid var(--bord); border-radius: 8px; padding: 10px 12px; cursor: pointer; color: var(--texte); }
.quiz-option:hover:not(:disabled) { border-color: var(--nuit-2); }
.quiz-option:disabled { cursor: default; }
.quiz-option.juste { background: #E5F4E7; border-color: var(--gazon); }
.quiz-option.faux { background: #FBE7E5; border-color: #D9483B; }
.quiz-verdict { font-weight: 700; margin: 6px 0 2px; }
.quiz-verdict.ok { color: #23702E; }
.quiz-verdict.ko { color: #A8342A; }
.quiz-explication { margin: 0 0 10px; }
.quiz-score { font-family: "Barlow Condensed", sans-serif; font-size: 1.8rem; color: var(--nuit); margin: 4px 0 10px; }
.btn-clair { background: #EEF2F7; color: var(--nuit); }
.faq .photo { max-width: 640px; }
@media (min-width: 640px) { .quiz-grille { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) {
  .hero-grille { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px; }
  .quiz-grille { grid-template-columns: 1fr 1fr 1fr; }
}

/* --- tableaux (comparatifs) : defilement horizontal DANS son cadre, jamais la page --- */
.tableau { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 12px 0 16px; border: 1px solid var(--bord); border-radius: 8px; }
.tableau table, .prose table { width: 100%; border-collapse: collapse; font-size: .92rem; background: var(--carte); }
.tableau th, .tableau td, .prose th, .prose td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--bord); vertical-align: top; }
.tableau thead th, .prose thead th { background: var(--nuit); color: #fff; font-weight: 600; white-space: nowrap; }
.tableau tbody tr:nth-child(even), .prose tbody tr:nth-child(even) { background: #F5F7FA; }
.tableau td.n, .prose td.n { text-align: right; font-variant-numeric: tabular-nums; }

/* --- pied de page complet --- */
.pied-marque { max-width: 46rem; }
.pied-nom { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.6rem; color: #fff; margin: 0 0 .2em; }
.pied-nom span { color: var(--jaune); }
.pied-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 20px 0; }
.pied-grille ul { list-style: none; padding: 0; margin: 0 0 8px; }
.pied-grille li { margin: 0 0 6px; }
.pied-titre { color: #fff; font-weight: 700; margin: 0 0 8px; }
.pied-regions { columns: 2; column-gap: 16px; }
.site-foot a { color: #E6ECF3; }
.pied-sources { border-top: 1px solid rgba(255,255,255,.12); padding-top: 10px; }
@media (min-width: 900px) { .pied-grille { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); } }

/* ligne de methode sous le H1 de l'accueil */
.methode-h1 { color: var(--gris-clair); font-size: .92rem; margin: 6px 0 0; max-width: 46rem; }
.methode-h1 a { color: #fff; }

/* fiches parcours (lot temoin F-01) */
.fiche-donnees th[scope="row"]{text-align:left;white-space:normal}
.fiche-donnees td.src{font-size:.85rem;color:#4A5A70}
.fiche-donnees tr.nr td:not(.src){color:#6B7A90;font-style:italic}
.fiche-donnees .detail{font-size:.85rem;color:#4A5A70}
.proches{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.proches li{padding:.6rem .8rem;background:#F4F6FA;border-radius:8px}
.proches .meta{display:block;font-size:.85rem;color:#4A5A70}
.carte figcaption a{color:#F2C230}
@media (max-width:640px){
 .fiche-donnees thead{display:none}
 .fiche-donnees,.fiche-donnees tbody,.fiche-donnees tr,.fiche-donnees th,.fiche-donnees td{display:block;width:auto;min-width:0;max-width:100%}
 .fiche-donnees td,.fiche-donnees th{white-space:normal;overflow-wrap:anywhere}
 .fiche-donnees tr{padding:.6rem .75rem;border-bottom:1px solid #E1E6EE}
 .fiche-donnees th[scope="row"]{padding:0 0 .2rem;border:0}
 .fiche-donnees td{padding:0;border:0}
 .fiche-donnees td.src{padding-top:.2rem}
}
/* paquets vague 4 : la classe .tableau est portee par la table elle-meme ; elle defile dans son cadre sur mobile */
table.tableau{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* top 10 de l'accueil : une carte par parcours */
.t10-liste{list-style:none;padding:0;margin:16px 0;display:grid;gap:20px}
.t10-carte{background:#fff;border:1px solid #E1E6EE;border-top:4px solid #0B1F3A;border-radius:12px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr)}
.t10-tete{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#0B1F3A;color:#fff}
.t10-rang{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:#F2C230;color:#0B1F3A;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.4rem;display:flex;align-items:center;justify-content:center}
.t10-source{margin:0;font-size:.85rem;line-height:1.35}
.t10-source a{color:#F2C230}
.t10-visuel{margin:0}
.t10-visuel img,.t10-visuel svg{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.t10-visuel figcaption{font-size:.78rem;color:#4A5A70;padding:6px 16px}
.t10-corps{padding:4px 16px 16px;min-width:0}
.t10-corps h3{margin:.4rem 0 .2rem;font-size:1.35rem}
.t10-lieu{margin:0 0 .6rem;color:#4A5A70;font-size:.92rem}
.t10-donnees{list-style:none;padding:0;margin:0 0 .6rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px}
.t10-donnees li{background:#F4F6FA;border-radius:8px;padding:6px 10px;font-size:.9rem;overflow-wrap:anywhere}
.t10-lib{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:#4A5A70}
.t10-src{font-size:.78rem;color:#4A5A70}
.t10-gf{margin:.4rem 0 0;padding:8px 10px;background:#FFF7DA;border-radius:8px}
.t10-gf-detail{margin:.3rem 0 .6rem;font-size:.85rem;color:#4A5A70}
.t10-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:.6rem}
@media (min-width:900px){.t10-carte{grid-template-columns:420px minmax(0,1fr)}.t10-tete{grid-column:1 / -1}.t10-visuel{grid-row:2 / span 1}}

/* --- videos de la chaine (accueil, 05/10) : facade 16:9, l'iframe ne se charge qu'au clic (assets/video.js) --- */
.video-grille { display: grid; gap: 16px; }
.video-carte { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--carte); border: 1px solid var(--bord); border-top: 4px solid var(--nuit); border-radius: var(--rayon); overflow: hidden; min-width: 0; }
.video-cadre { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--nuit); overflow: hidden; }
.video-cadre img, .video-cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.video-cadre img { object-fit: cover; }
.video-facade { position: absolute; inset: 0; display: block; }
.video-facade .video-play { position: absolute; left: 50%; top: 50%; width: 72px; height: 51px; transform: translate(-50%, -50%); transition: transform .15s; }
.video-facade:hover .video-play, .video-facade:focus-visible .video-play { transform: translate(-50%, -50%) scale(1.1); }
.video-facade:focus-visible { outline: 3px solid var(--jaune); outline-offset: -3px; }
.video-corps { padding: 12px var(--marge) 16px; min-width: 0; }
.video-corps h3 { margin-top: 0; }
@media (min-width: 800px) { .video-carte { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; } }