/* ============================================================================
   Golfteem — site vitrine, direction « Le tracé »
   Feuille NOUVELLE et autonome. styles.css (ancien) n'est PAS touché :
   mentions-legales.html en dépend, ainsi que de app.js.
   ========================================================================= */

:root{
  --paper:#FAFBF8; --card:#FFFFFF; --sunk:#F1F4EE; --edge:#DFE5D9;
  --txt:#101E15; --dim:#516357; --faint:#7B8C80;
  --acc:#2F6B3C; --hot:#5F9A4C; --ink:#22402E; --onacc:#FFFFFF;
  --m1:#22402E; --m2:#3E6B45; --m3:#72AC5E;
  --pw:clamp(200px,21vw,256px); --bez:9px; --pr:34px; --bezc:#101311;
  --maxw:1120px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ overflow-x:clip; scroll-behavior:smooth; }
body{
  margin:0; overflow-x:clip;
  background:var(--paper); color:var(--txt);
  font-family:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17.5px; line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--acc); }
:focus-visible{ outline:3px solid var(--acc); outline-offset:3px; border-radius:3px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--ink); color:#fff; padding:.7rem 1.1rem; border-radius:0 0 8px 0;
}
.skip:focus{ left:0; }

.shell{ width:min(var(--maxw),calc(100% - 2.5rem)); margin-inline:auto; }
.rel{ position:relative; }

/* ── barre ───────────────────────────────────────────────────────────── */
.bar{
  position:sticky; top:0; z-index:50;
  background:rgba(250,251,248,.93); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--edge);
}
.bar-in{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0; }
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:700;
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; }
.brand .mk{ width:30px; }
.langs{ display:flex; gap:.3rem; }
.lang{
  font:600 .72rem/1 Poppins,sans-serif; letter-spacing:.06em; color:var(--dim);
  text-decoration:none; border:1px solid var(--edge); border-radius:99px;
  padding:.45rem .65rem; transition:.2s;
}
.lang:hover{ color:var(--txt); border-color:var(--acc); }
.lang.is-on{ background:var(--acc); border-color:var(--acc); color:#fff; }

/* ── le signe, vivant ────────────────────────────────────────────────── */
.mk{ display:block; width:100%; height:auto; }
.mk .ar{ transform-box:view-box; transform-origin:100px 100px;
  transition:transform 1.15s cubic-bezier(.16,.84,.3,1); }
.mk .a1{ transform:rotate(calc(24deg  + var(--spin,0deg) * 1.00)); }
.mk .a2{ transform:rotate(calc(-40deg - var(--spin,0deg) * 1.45)); }
.mk .a3{ transform:rotate(calc(150deg + var(--spin,0deg) * 2.10)); }
.spin:hover .mk .a1{ transform:rotate(calc(24deg  + var(--spin,0deg) - 96deg)); }
.spin:hover .mk .a2{ transform:rotate(calc(-40deg - var(--spin,0deg) + 132deg)); }
.spin:hover .mk .a3{ transform:rotate(calc(150deg + var(--spin,0deg) - 78deg)); }
@keyframes gt-settle{ from{ transform:rotate(-9deg) scale(.955); opacity:0 } to{ transform:none; opacity:1 } }

/* ── ouverture ───────────────────────────────────────────────────────── */
.hero{ padding:clamp(2.8rem,6.5vw,4.6rem) 0 clamp(1.4rem,3vw,2rem); text-align:center; }
.eye-big{ width:clamp(84px,11vw,124px); margin:0 auto 1.5rem;
  animation:gt-settle 1.05s cubic-bezier(.16,.84,.24,1) both; }
.kick{ font-size:.73rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--acc); font-weight:600; margin:0 0 1.1rem; }
h1{ font-size:clamp(2.3rem,6vw,3.9rem); line-height:1.02; letter-spacing:-.033em;
  font-weight:700; margin:0 auto; max-width:15ch; text-wrap:balance; }
h2{ font-size:clamp(1.65rem,3.5vw,2.4rem); line-height:1.12; letter-spacing:-.028em;
  font-weight:700; margin:0; text-wrap:balance; }
h3{ margin:0; font-size:clamp(1.4rem,3vw,2rem); line-height:1.14;
  letter-spacing:-.024em; font-weight:700; }
.lead{ color:var(--dim); font-size:clamp(1.02rem,1.9vw,1.16rem);
  max-width:46ch; margin:1.3rem auto 0; }
.sub{ color:var(--dim); margin:.85rem 0 0; max-width:52ch; }
.ctas{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-top:1.95rem; }
.btn{ display:inline-flex; align-items:center; border-radius:99px; padding:.9rem 1.5rem;
  font-weight:600; font-size:.94rem; border:1px solid var(--edge);
  color:var(--txt); background:transparent; cursor:default; }
.btn.solid{ background:var(--ink); border-color:var(--ink); color:#fff; }
.soon{ color:var(--dim); font-size:.78rem; margin-top:1rem;
  letter-spacing:.1em; text-transform:uppercase; }

/* ── bandeau défilant ────────────────────────────────────────────────── */
.band{ background:var(--ink); color:#EEF4EA; overflow:hidden; display:flex; width:100%; }
.ticker-run{ display:flex; flex:0 0 auto; white-space:nowrap; animation:gt-run 44s linear infinite; }
.ticker:hover .ticker-run{ animation-play-state:paused; }
@keyframes gt-run{ from{ transform:translateX(0) } to{ transform:translateX(-100%) } }
.ticker-run > span{ padding:.62rem clamp(1.1rem,3vw,2.4rem); font-size:.84rem;
  font-weight:600; display:flex; align-items:center; gap:.9rem; }
.ticker-run > span::after{ content:""; width:6px; height:6px; border-radius:50%;
  background:#EEF4EA; opacity:.42; }

/* ── sections ────────────────────────────────────────────────────────── */
.sec{ padding:clamp(2.6rem,6vw,4.2rem) 0; }
.sec + .sec{ border-top:1px solid var(--edge); }

/* ── le tracé ────────────────────────────────────────────────────────── */
.path-sec{ position:relative; padding:clamp(2rem,5vw,3.2rem) 0 clamp(2.6rem,6vw,4rem); }
.pen{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.pen path{ fill:none; stroke:var(--hot); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:var(--len,2000); stroke-dashoffset:var(--off,0); }

/* Trois colonnes : texte / pastille / écran. La pastille est POSÉE SUR le
   trait — il la traverse au lieu d'aller la chercher par un raccord en
   cul-de-sac, qu'il devrait ensuite reparcourir à l'envers. */
.stop{ position:relative; z-index:1; display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(1.4rem,3.4vw,2.6rem); align-items:center; padding:clamp(1.8rem,4vw,3rem) 0; }
.stop .txt{ order:1; }
.stop .mid{ order:2; }
.stop .pic{ order:3; display:grid; justify-items:start; }
.stop:nth-child(even) .txt{ order:3; }
.stop:nth-child(even) .pic{ order:1; justify-items:end; }
.stop .eye{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--hot); font-weight:600; margin:0 0 .5rem; }
.stop .de{ color:var(--dim); margin:.85rem 0 0; max-width:36ch; }
.stop .no{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:var(--card); border:2px solid var(--edge); font:700 .84rem/1 Poppins,sans-serif;
  color:var(--dim); font-variant-numeric:tabular-nums; transition:.3s; }
.stop.lit .no{ border-color:var(--hot); background:var(--hot); color:#fff; }

.phone{ display:block; width:max-content; max-width:100%; padding:var(--bez);
  background:var(--bezc); border-radius:var(--pr);
  box-shadow:0 20px 44px -24px rgba(16,30,21,.4); }
.phone img{ width:var(--pw); max-width:100%; height:auto;
  border-radius:calc(var(--pr) - var(--bez)); }

/* ── chiffres ────────────────────────────────────────────────────────── */
.figs-in{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,3vw,2rem); }
.fg b{ display:block; font-size:clamp(1.9rem,4.4vw,2.9rem); font-weight:700;
  letter-spacing:-.032em; line-height:1; font-variant-numeric:tabular-nums; }
.fg span{ display:block; color:var(--dim); font-size:.9rem; margin-top:.5rem; }
.ln{ display:block; height:0; border-top:1px solid var(--acc); opacity:.5;
  transform:scaleX(1); transform-origin:left center; margin-bottom:1rem;
  transition:transform 1s cubic-bezier(.2,.7,.2,1); }
.ln.armed{ transform:scaleX(0); }

/* ── suivre ──────────────────────────────────────────────────────────── */
.follow-in{ display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.socials{ display:flex; gap:.75rem; flex-wrap:wrap; }
.soc{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  font-weight:600; font-size:.95rem; border:1px solid var(--edge); border-radius:99px;
  padding:.84rem 1.35rem; color:var(--txt); transition:.2s; }
.soc svg{ width:19px; height:19px; }
.soc:hover{ background:var(--acc); border-color:var(--acc); color:#fff; }

/* ── Premium ─────────────────────────────────────────────────────────────
   Masqué par défaut. Une seule ligne de site.js (PREMIUM_VISIBLE) l'ouvre,
   et ?premium=1 permet de le prévisualiser sans rien modifier. */
[data-premium="off"] .premium{ display:none !important; }

.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2rem; }
.plan{ border:1px solid var(--edge); border-radius:14px; padding:1.5rem; background:var(--card); }
.plan.hi{ border-color:var(--acc); box-shadow:0 0 0 1px var(--acc); }
.plan h3{ font-size:1.12rem; }
.plan .price{ font-size:1.85rem; font-weight:700; margin:.6rem 0 .15rem;
  letter-spacing:-.022em; font-variant-numeric:tabular-nums; }
.plan .price small{ font-size:.82rem; font-weight:500; color:var(--dim); letter-spacing:0; }
.plan .how{ color:var(--dim); font-size:.92rem; margin:0; }

.cert-box{ margin-top:1.6rem; background:var(--sunk); border:1px solid var(--edge);
  border-radius:14px; padding:clamp(1.3rem,3vw,1.9rem); }
.cert-box h3{ font-size:1.18rem; margin-bottom:.6rem; text-wrap:balance; }
.cert-box p{ margin:0; color:var(--dim); max-width:66ch; }
.cert-box p + p{ margin-top:.7rem; }
.cert-box strong{ color:var(--txt); font-weight:600; }
.cert-box ul{ margin:.55rem 0 .7rem; padding-left:1.15rem; color:var(--dim); max-width:66ch; }
.cert-box li{ margin:.3rem 0; }
.cert-box li::marker{ color:var(--hot); }
.cert-box .note{ margin-top:.7rem; font-size:.9rem; color:var(--faint); }
/* Le badge de certification, dans le titre. Il suit la taille du texte voisin —
   le cercle blanc extérieur du fichier d'origine est conservé : invisible ici,
   il garantit que le badge reste identique à celui de l'application. */
.cert-box h3 .bdg{ width:.92em; height:.92em; vertical-align:-.08em; margin-left:.26em; }

/* ── le comparatif ───────────────────────────────────────────────────────
   Trois colonnes qui prolongent les cartes de tarif juste au-dessus, 23 lignes
   rangées en quatre thèmes, et une barre d'écart sur les lignes chiffrées :
   « 250 · 350 · 2 000 » alignés ne disent pas qu'on multiplie par huit. */
.cmp-title{ font-size:1.18rem; margin:2.2rem 0 .9rem; }
.cmp-box{ position:relative; border:1px solid var(--edge); border-radius:14px;
  background:var(--card); overflow:hidden; }
.table-wrap{ overflow-x:auto; overscroll-behavior-x:contain; }
table.cmp{ width:100%; border-collapse:collapse; font-size:.95rem; min-width:34rem; }
table.cmp th, table.cmp td{ padding:.72rem .9rem; text-align:center;
  border-bottom:1px solid var(--edge); font-variant-numeric:tabular-nums; }
table.cmp thead th{ background:var(--sunk); vertical-align:bottom;
  padding-top:1.05rem; padding-bottom:.85rem; font-weight:600; }
table.cmp th[scope="row"]{ text-align:left; font-weight:500; color:var(--txt);
  min-width:16rem; }
table.cmp tbody tr:last-child th, table.cmp tbody tr:last-child td{ border-bottom:0; }
table.cmp tbody tr:hover{ background:var(--sunk); }
table.cmp .hi{ background:color-mix(in srgb, var(--acc) 7%, transparent); font-weight:600; }
table.cmp thead .hi{ background:color-mix(in srgb, var(--acc) 12%, transparent); }

/* en-tête : le nom de la formule ET son tarif, comme sur les cartes du dessus */
.cmp .pn{ display:block; font-size:.74rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim); }
.cmp .pp{ display:block; margin-top:.16rem; font-size:1.02rem; font-weight:700;
  letter-spacing:-.02em; color:var(--txt); text-transform:none; }
.cmp thead .hi .pn, .cmp thead .hi .pp{ color:var(--acc); }

/* bandeau de thème */
table.cmp tr.grp th{ text-align:left; background:var(--sunk); color:var(--acc);
  font-size:.71rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  padding-top:.66rem; padding-bottom:.66rem; border-top:1px solid var(--edge); }
table.cmp tbody tr.grp:first-child th{ border-top:0; }

/* barre d'écart : seulement sur les lignes chiffrées */
.cmp .bar{ display:block; width:min(72%,4.4rem); height:3px; margin:.34rem auto 0;
  border-radius:2px; background:var(--edge); position:relative; overflow:hidden; }
.cmp .bar::after{ content:""; position:absolute; top:0; bottom:0; left:0;
  width:calc(var(--f,0) * 100%); border-radius:2px;
  background:color-mix(in srgb, var(--acc) 52%, transparent); }
.cmp .hi .bar{ background:color-mix(in srgb, var(--acc) 15%, transparent); }
.cmp .hi .bar::after{ background:var(--acc); }

/* La colonne Premium est une carte, filets compris — sur téléphone AUSSI,
   depuis que le tableau y tient en entier. Les bandeaux de thème gardent leur
   cellule Premium, sinon la carte serait découpée en quatre morceaux. */
table.cmp .hi{ box-shadow:inset 1px 0 0 var(--acc), inset -1px 0 0 var(--acc); }
table.cmp thead .hi{ box-shadow:inset 1px 1px 0 var(--acc), inset -1px 0 0 var(--acc); }
table.cmp tbody tr:last-child .hi{
  box-shadow:inset 1px 0 0 var(--acc), inset -1px -1px 0 var(--acc); }
/* La colonne Premium est la DERNIÈRE : son liseré droit longe le bord arrondi de
   la boîte, qui le tronquait dans les deux angles. Un box-shadow « inset » suit
   le border-radius de SA cellule : il suffit d'arrondir les deux cellules
   d'angle, et le liseré épouse la courbe. 13 px = les 14 px de la boîte moins
   son propre filet de 1 px. */
table.cmp thead .hi{ border-top-right-radius:13px; }
table.cmp tbody tr:last-child .hi{ border-bottom-right-radius:13px; }

/* voile de bord et consigne de glissement : téléphone seulement */
.cmp-fade{ display:none; position:absolute; top:0; right:0; bottom:0; width:2.8rem;
  pointer-events:none; transition:opacity .25s;
  background:linear-gradient(to right, rgba(255,255,255,0), var(--card)); }
.cmp-box.end .cmp-fade{ opacity:0; }
.swipe{ display:none; }
.swipe.off{ display:none; }   /* prime sur la règle téléphone : même poids, deux classes */
.note{ color:var(--dim); font-size:.88rem; margin-top:1.2rem; }

/* ── pied ────────────────────────────────────────────────────────────── */
.foot{ border-top:1px solid var(--edge); padding:2rem 0 3rem; color:var(--dim); font-size:.88rem; }
.foot-in{ display:flex; flex-wrap:wrap; gap:.9rem 1.7rem;
  justify-content:space-between; align-items:center; }
.foot nav{ display:flex; gap:1.3rem; flex-wrap:wrap; }
.foot a{ text-decoration:none; color:inherit; }
.foot a:hover{ color:var(--txt); }

/* ── responsive ──────────────────────────────────────────────────────── */
@media (max-width:900px){
  .follow-in{ grid-template-columns:1fr; }
  .plans{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  /* La gouttière de page passe de 20 à 36 px : c'est le seul espace jamais
     occupé par du texte, dans les quatre langues. Le tracé y court, et le
     texte ne perd que ~9 % de largeur. */
  .shell{ width:calc(100% - 4.5rem); }
  .pen{ left:-2.25rem; width:calc(100% + 4.5rem); }

  .stop{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .stop .txt, .stop:nth-child(even) .txt{ order:2; }
  .stop .mid{ order:1; margin-bottom:.9rem; }
  .stop .pic, .stop:nth-child(even) .pic{ order:3; justify-items:center; }
  .stop .de{ margin-inline:auto; }
}
@media (max-width:700px){
  .figs-in{ grid-template-columns:1fr; }

  /* ── LE TABLEAU TIENT EN ENTIER, À TOUTES LES LARGEURS ────────────────
     Deux décisions le permettent, et elles vont ensemble.

     1. Il reprend la gouttière de page. Celle-ci a été élargie à 36 px POUR LE
        TRACÉ — or il n'y a pas de tracé dans la section Premium : elle n'y
        servait à rien, et coûtait 48 px au tableau. C'est presque tout ce qui
        manquait.
     2. Disposition FIXE et colonnes en pourcentage. Le contenu ne peut donc
        plus élargir une colonne : il s'y replie. La largeur ne dépend plus de
        la langue — « Zertifiziert » n'impose plus sa loi aux quatre pages.

     Conséquence voulue : plus de glissement, donc ni voile ni consigne. Le
     filet de sécurité reste en place (le conteneur défile toujours, et le
     script rallume les deux repères si jamais ça débordait quelque part). */
  .premium .cmp-box{ margin-inline:-1.5rem; }
  table.cmp{ table-layout:fixed; width:100%; min-width:0; font-size:.86rem; }
  table.cmp th, table.cmp td{ padding:.55rem .38rem; overflow-wrap:break-word; }
  /* Disposition fixe : ce sont les cellules de la PREMIÈRE ligne qui fixent
     les colonnes. Les bandeaux de thème, qui en couvrent trois, n'y entrent
     pour rien. */
  table.cmp thead th:first-child{ width:46%; }
  table.cmp thead th:not(:first-child){ width:18%; min-width:0; }
  table.cmp th[scope="row"]{ min-width:0; max-width:none; }
  /* « Zertifiziert » ne rentre pas dans 60 px : on autorise la césure. Le
     navigateur la place d'après la langue de la page (ZERTIFI-ZIERT), et non
     au hasard — c'est pour ça que chaque langue a SA page. */
  .cmp .pn{ font-size:.62rem; letter-spacing:.01em;
    -webkit-hyphens:auto; hyphens:auto; }
  .cmp .pp{ font-size:.84rem; }
  .cmp .bar{ width:min(92%,2.4rem); }

  /* Ces deux-là ne s'affichent que si, contre toute attente, il fallait encore
     glisser — le script en décide, pas la feuille de style. */
  .cmp-fade{ display:block; }
  .swipe{ display:block; margin:0 0 .55rem; text-align:right;
    font-size:.82rem; color:var(--faint); transition:opacity .3s; }
  .swipe::after{ content:"\00a0\2192"; }
  .swipe.gone{ opacity:0; }
  .cmp-box.fits .cmp-fade{ display:none; }
}

/* Sous 360 px (iPhone SE, ou n'importe quel téléphone dont l'utilisateur a
   agrandi la police système) : on resserre d'un cran de plus. */
@media (max-width:359px){
  table.cmp{ font-size:.78rem; }
  table.cmp th, table.cmp td{ padding:.5rem .28rem; }
  /* .58rem est un SEUIL, pas un réglage esthétique : au-dessus, « PREMIUM » se
     fait couper en « PREMI-UM » par la césure. Le nom de la formule ne se coupe
     pas — mesuré à 320 px dans les quatre langues. */
  .cmp .pn{ font-size:.58rem; }
  .cmp .pp{ font-size:.78rem; }
  .cmp .bar{ width:min(94%,2rem); }
}

/* ── mouvement : jamais indispensable à la lecture ───────────────────── */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
     transition-duration:.001ms !important; }
  .ln, .ln.armed{ transform:none !important; }
  .ticker-run{ animation:none !important; }
}